/* ===== css/temel.css ===== */
/*
 * Razbin — temel.css: tasarım belirteçleri, yazı tipleri, sıfırlama, tipografi, yerleşim.
 * Sahibi: Tasarım sistemi (belgeler/SOZLESME.md bölüm 3, 5). Belirteç ADLARI sözleşmedir; değiştirilmez.
 * (Bu ilk sürüm omurga tarafından belirteçler önceden hazır olsun diye yazıldı; tasarım sistemi genişletir.)
 */

/* ---------------------------------------------------------------- yazı tipleri (değişken ağırlık) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/jakarta-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/jakarta-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- belirteçler */
:root {
  /* gece mavisi */
  --renk-gece-950: #060B16;
  --renk-gece-900: #0B1426;
  --renk-gece-800: #12203A;
  --renk-gece-700: #1B2C4B;
  --renk-gece-600: #2A3D60;
  /* turkuaz */
  --renk-turkuaz-200: #A5F0F6;
  --renk-turkuaz-300: #6FE3EE;
  --renk-turkuaz-400: #38D3E3;
  --renk-turkuaz-500: #19C3D6;
  --renk-turkuaz-600: #0EA2B4;
  --renk-turkuaz-700: #0B7F8E;
  --renk-turkuaz-800: #0A6370;
  /* yardımcı */
  --renk-mavi-400: #60A5FA;
  --renk-mavi-500: #3B82F6;
  --renk-amber-400: #FBBF24;
  --renk-amber-500: #F59E0B;
  --renk-kirmizi-500: #EF4444;
  --renk-kirmizi-600: #DC2626;
  --renk-yesil-500: #22C55E;
  --renk-yesil-600: #16A34A;
  /* gri */
  --renk-gri-0: #FFFFFF;
  --renk-gri-50: #F6F8FB;
  --renk-gri-100: #EEF2F7;
  --renk-gri-200: #E2E8F0;
  --renk-gri-300: #CBD5E1;
  --renk-gri-400: #94A3B8;
  --renk-gri-500: #64748B;
  --renk-gri-600: #475569;
  --renk-gri-700: #334155;
  --renk-gri-800: #1E293B;
  --renk-gri-900: #0F172A;

  /* anlamsal (açık zemin) */
  --zemin: var(--renk-gri-0);
  --zemin-2: var(--renk-gri-50);
  --metin: #0B1426;
  --metin-2: var(--renk-gri-600);
  --metin-3: var(--renk-gri-500);
  --cizgi: var(--renk-gri-200);
  --vurgu: var(--renk-turkuaz-500);
  --vurgu-metin: var(--renk-turkuaz-700);
  --odak: var(--renk-turkuaz-500);
  /* anlamsal (koyu zemin) */
  --koyu-zemin: var(--renk-gece-900);
  --koyu-zemin-2: var(--renk-gece-800);
  --koyu-metin: #E7EEF8;
  --koyu-metin-2: #A9B8CE;
  --koyu-cizgi: rgba(255, 255, 255, 0.10);
  /* durum */
  --basari: var(--renk-yesil-600);
  --uyari: var(--renk-amber-500);
  --hata: var(--renk-kirmizi-600);

  /* yazı */
  --yazi-baslik: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --yazi-govde: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --boyut-xs: 0.75rem;
  --boyut-sm: 0.875rem;
  --boyut-md: 1rem;
  --boyut-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --boyut-xl: clamp(1.1875rem, 1.1rem + 0.45vw, 1.375rem);
  --boyut-2xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --boyut-3xl: clamp(1.625rem, 1.35rem + 1.3vw, 2.25rem);
  --boyut-4xl: clamp(1.875rem, 1.45rem + 2vw, 2.875rem);
  --boyut-5xl: clamp(2.125rem, 1.55rem + 2.8vw, 3.625rem);
  --boyut-6xl: clamp(2.375rem, 1.6rem + 3.6vw, 4.375rem);

  /* ölçüler */
  --bosluk-1: 0.25rem;
  --bosluk-2: 0.5rem;
  --bosluk-3: 0.75rem;
  --bosluk-4: 1rem;
  --bosluk-5: 1.25rem;
  --bosluk-6: 1.5rem;
  --bosluk-7: 2rem;
  --bosluk-8: 2.5rem;
  --bosluk-9: 3rem;
  --bosluk-10: 4rem;
  --bosluk-11: 5rem;
  --bosluk-12: 6rem;
  --bolum-bosluk: clamp(3.5rem, 2.2rem + 5.5vw, 7.5rem);
  --yaricap-1: 6px;
  --yaricap-2: 10px;
  --yaricap-3: 14px;
  --yaricap-4: 20px;
  --yaricap-5: 28px;
  --yaricap-tam: 999px;
  --golge-1: 0 1px 2px rgba(11, 20, 38, 0.06), 0 1px 3px rgba(11, 20, 38, 0.08);
  --golge-2: 0 4px 12px rgba(11, 20, 38, 0.08), 0 2px 4px rgba(11, 20, 38, 0.05);
  --golge-3: 0 24px 48px -12px rgba(11, 20, 38, 0.25), 0 8px 16px -8px rgba(11, 20, 38, 0.12);
  --golge-parilti: 0 0 0 1px rgba(25, 195, 214, 0.25), 0 12px 40px -8px rgba(25, 195, 214, 0.35);
  --kap-genislik: 1200px;
  --kap-kenar: clamp(16px, 4vw, 32px);
  --ust-yukseklik: 64px;
  --z-yuzen: 40;
  --z-ust: 50;
  --z-menu: 60;
  --z-cerez: 70;
  --gecis-hizli: 150ms;
  --gecis: 250ms;
  --egri: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 1024px) {
  :root {
    --ust-yukseklik: 72px;
  }
}

/* ================================================================================================================
 * Tasarım sistemi katmanı. Yukarıdaki yazı tipi ve belirteç blokları omurganındır, olduğu gibi korunur.
 * Bu katman: belirteç ince ayarı ve ek belirteçler, koyu bağlam, sıfırlama, tipografi, yerleşim, yardımcılar.
 * Bileşenler: bilesenler.css. Belge: belgeler/TASARIM_SISTEMI.md
 * ================================================================================================================ */

/* ---------------------------------------------------------------- belirteç ince ayarı (WCAG AA karşıtlığı) */
:root {
  /* Sözleşmedeki adlar aynı kalır; yalnız değerler karşıtlık için ayarlandı. */
  --renk-turkuaz-700: #0A7886;     /* metin: beyaz 5.2:1, gri-50 4.9:1, gri-100 4.6:1 (#0B7F8E gri-50'de 4.45) */
  --metin-3: #5F6F86;              /* soluk metin: beyaz 5.1:1, gri-50 4.8:1 (gri-500 gri-50'de 4.47) */
  --odak: #0B8E9F;                 /* odak halkası: beyaz 3.9:1, gri-100 3.5:1 (WCAG 1.4.11: en az 3:1) */
  --basari: var(--renk-yesil-700); /* yeşil-600 beyazda 3.3:1, metin olarak yetmez */

  /* ek ölçek değerleri */
  --renk-yesil-700: #15803D;
  --renk-kirmizi-400: #F87171;
  --renk-kirmizi-700: #B91C1C;

  /* teknik etiket yazısı (yalnız gerekirse) */
  --yazi-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* renksiz maskeler: "background-color: currentColor" ile boyanır (Lucide, ISC çizimleri) */
  --maske-tik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --maske-sag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --maske-hata: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
  --tik-koyu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1426' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- bileşen belirteçleri (açık zemin) */
/* Bileşenler yalnız anlamsal adları kullanır; koyu bağlamda aynı adlar yeniden tanımlanır (aşağıda). */
:root,
.tema-acik {
  --yuzey: var(--renk-gri-0);                 /* kart / panel yüzeyi */
  --yuzey-2: var(--renk-gri-50);              /* hafif yükseltilmiş yüzey, üzerine gelince */
  --yuzey-3: var(--renk-gri-0);               /* yüzey-2 üstünde öne çıkan parça (seçili sekme) */
  --cizgi-guclu: var(--renk-gri-300);         /* ikincil düğme kenarı */
  --girdi-zemin: var(--renk-gri-0);
  --girdi-cizgi: #7C8BA1;                     /* form alanı kenarı: beyaza karşı 3.5:1 */
  --girdi-cizgi-ust: var(--renk-gri-600);     /* üzerine gelince */
  --vurgu-zemin: rgba(25, 195, 214, 0.10);    /* turkuaz tonlu zemin */
  --vurgu-cizgi: rgba(14, 162, 180, 0.32);    /* turkuaz tonlu kenar */
  --vurgu-metin-2: var(--renk-turkuaz-800);   /* tonlu zemin üstündeki metin (rozet) */
  --odak-hale: rgba(25, 195, 214, 0.22);      /* odaktaki form alanının dış halesi */
  --hata-zemin: #FEF2F2;
  --hata-cizgi: #FECACA;
  --hata-hale: rgba(220, 38, 38, 0.16);
  --hata-metin: var(--renk-kirmizi-700);      /* hata özetindeki bağlantılar */
  --basari-zemin: #F0FDF4;
  --golge-kart: var(--golge-1);
  --golge-kart-ust: var(--golge-3);
  --cerceve-zemin: linear-gradient(180deg, var(--renk-gri-0), var(--renk-gri-50));
  --cerceve-cizgi: var(--renk-gri-200);
  --cerceve-golge: 0 32px 64px -24px rgba(11, 20, 38, 0.28), 0 12px 24px -12px rgba(11, 20, 38, 0.12);
  /* renkli küçük çizimler (renk değişkene bağlanamadığı için iki temada ayrı tanımlı) */
  --ok-asagi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --ok-asagi-vurgu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7886' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --tik-vurgu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7886' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- koyu bağlam */
/* Koyu alanlarda anlamsal adlar yeniden tanımlanır; içerideki bütün bileşenler kendiliğinden koyu temaya uyar.
   Başka bir koyu alan için .tema-koyu, koyu alanın içindeki açık panel için .tema-acik kullanılır. */
.bolum--koyu,
.hero,
.cagri,
.kart--koyu,
.tema-koyu {
  --zemin: var(--koyu-zemin);
  --zemin-2: var(--koyu-zemin-2);
  --metin: var(--koyu-metin);
  --metin-2: var(--koyu-metin-2);
  --metin-3: #8494AE;                         /* gece-900 6.0:1, gece-800 5.3:1 */
  --cizgi: var(--koyu-cizgi);
  --vurgu-metin: var(--renk-turkuaz-300);
  --vurgu-metin-2: var(--renk-turkuaz-200);
  --odak: var(--renk-turkuaz-400);
  --basari: var(--renk-yesil-500);
  --hata: var(--renk-kirmizi-400);
  --hata-metin: var(--renk-kirmizi-400);
  --yuzey: rgba(255, 255, 255, 0.035);
  --yuzey-2: rgba(255, 255, 255, 0.07);
  --yuzey-3: rgba(255, 255, 255, 0.12);
  --cizgi-guclu: rgba(255, 255, 255, 0.2);
  --girdi-zemin: rgba(255, 255, 255, 0.04);
  --girdi-cizgi: rgba(255, 255, 255, 0.36);   /* gece-900'e karşı 3.3:1 */
  --girdi-cizgi-ust: rgba(255, 255, 255, 0.55);
  --vurgu-zemin: rgba(25, 195, 214, 0.12);
  --vurgu-cizgi: rgba(56, 211, 227, 0.32);
  --odak-hale: rgba(56, 211, 227, 0.25);
  --hata-zemin: rgba(239, 68, 68, 0.12);
  --hata-cizgi: rgba(248, 113, 113, 0.4);
  --hata-hale: rgba(248, 113, 113, 0.22);
  --basari-zemin: rgba(34, 197, 94, 0.12);
  --golge-kart: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --golge-kart-ust: 0 24px 48px -16px rgba(0, 0, 0, 0.55);
  --cerceve-zemin: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02));
  --cerceve-cizgi: rgba(255, 255, 255, 0.1);
  --cerceve-golge: 0 40px 80px -28px rgba(0, 0, 0, 0.7), 0 0 72px -24px rgba(25, 195, 214, 0.35);
  --ok-asagi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B8CE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --ok-asagi-vurgu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236FE3EE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --tik-vurgu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236FE3EE' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  color: var(--metin);
  color-scheme: dark;
}

/* koyu alanın içindeki açık panel: temel anlamsal adlar da açığa döner */
.tema-acik {
  --zemin: var(--renk-gri-0);
  --zemin-2: var(--renk-gri-50);
  --metin: #0B1426;
  --metin-2: var(--renk-gri-600);
  --metin-3: #5F6F86;
  --cizgi: var(--renk-gri-200);
  --vurgu-metin: var(--renk-turkuaz-700);
  --odak: #0B8E9F;
  --basari: var(--renk-yesil-700);
  --hata: var(--renk-kirmizi-600);
  color: var(--metin);
  color-scheme: light;
}

/* ---------------------------------------------------------------- sıfırlama */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--ust-yukseklik) + 16px);
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--yazi-govde);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--metin);
  background-color: var(--zemin);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  /* yatay taşmaya karşı güvenlik: 'clip' kaydırma kabı oluşturmaz, yapışkan üst menüyü bozmaz */
  overflow-x: clip;
}

:where(h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, dd, ul, ol, pre, table) {
  margin: 0;
}

:where(ul, ol) {
  padding: 0;
}

/* sınıfsız liste (düz metin içinde) madde imini korur */
:where(ul, ol):not([class]) {
  padding-left: 1.25rem;
}

ul[class],
ol[class] {
  list-style: none;
}

img,
picture,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

svg {
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

:disabled {
  cursor: not-allowed;
}

[hidden] {
  display: none !important;
}

hr {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--cizgi);
}

/* ---------------------------------------------------------------- tipografi */
h1,
h2,
h3,
h4,
h5,
h6,
.baslik-1,
.baslik-2,
.baslik-3,
.baslik-4 {
  font-family: var(--yazi-baslik);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
  overflow-wrap: anywhere;   /* uzun Türkçe sözcük dar sütunda bölünür, kutuyu taşırmaz */
}

h1,
.baslik-1 {
  font-size: var(--boyut-5xl);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.028em;
}

h2,
.baslik-2 {
  font-size: var(--boyut-4xl);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -0.022em;
}

h3,
.baslik-3 {
  font-size: var(--boyut-2xl);
  line-height: 1.25;
  letter-spacing: -0.014em;
}

h4,
.baslik-4 {
  font-size: var(--boyut-xl);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

h5,
h6 {
  font-size: var(--boyut-lg);
  line-height: 1.4;
  letter-spacing: -0.005em;
}

p {
  max-width: 72ch;           /* okunur satır uzunluğu */
  text-wrap: pretty;
}

strong,
b {
  font-weight: 650;
}

small {
  font-size: 0.875em;
}

a {
  color: var(--vurgu-metin);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color var(--gecis-hizli) var(--egri), text-decoration-color var(--gecis-hizli) var(--egri);
}

a:hover {
  text-decoration-color: currentColor;
}

/* telefon numarası satır sonunda bölünmez */
a[href^="tel:"] {
  white-space: nowrap;
}

code,
kbd,
samp {
  font-family: var(--yazi-mono);
  font-size: 0.9em;
}

::selection {
  background-color: rgba(25, 195, 214, 0.28);
  color: inherit;
}

/* ---------------------------------------------------------------- odak */
:focus-visible {
  outline: 2px solid var(--odak);
  outline-offset: 3px;
}

.ana-icerik:focus {
  outline: none;             /* "içeriğe atla" ile odaklanan ana alan çerçevelenmez */
}

/* ---------------------------------------------------------------- yazı yardımcıları */
.giris {
  max-width: 62ch;
  font-size: var(--boyut-lg);
  line-height: 1.65;
  color: var(--metin-2);
}

.metin-kucuk {
  font-size: var(--boyut-sm);
  line-height: 1.55;
}

.metin-ikincil {
  color: var(--metin-2);
}

.vurgu-metni {
  color: var(--vurgu-metin);
}

/* koyu bağlamda vurgu turkuaz geçişli */
:is(.bolum--koyu, .hero, .cagri, .kart--koyu, .tema-koyu) .vurgu-metni {
  color: var(--renk-turkuaz-300);
  background-image: linear-gradient(100deg, var(--renk-turkuaz-200) 0%, var(--renk-turkuaz-400) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.tema-acik .vurgu-metni {
  color: var(--vurgu-metin);
  background-image: none;
  -webkit-text-fill-color: currentColor;
}

/* Üst başlık kısa bir etikettir: p'nin 72ch sınırı kaldırılır (ortalı düzende kutu eksenden kaymasın). Sarılınca
   çizgi ilk satırın ortasında kalır (satır yüksekliği 1.4 → 0.7em), iki satırın arasına düşmez. */
.ust-baslik {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  max-width: none;
  font-family: var(--yazi-govde);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vurgu-metin);
}

.ust-baslik::before {
  content: "";
  flex: none;
  width: 1.125rem;
  height: 2px;
  margin-top: calc(0.7em - 1px);
  border-radius: 2px;
  background-color: currentColor;
  opacity: 0.8;
}

.gorunmez {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------------------------------------------------------------- yerleşim: kapsayıcı */
.kap {
  width: 100%;
  max-width: calc(var(--kap-genislik) + 2 * var(--kap-kenar));
  margin-inline: auto;
  padding-left: max(var(--kap-kenar), env(safe-area-inset-left));
  padding-right: max(var(--kap-kenar), env(safe-area-inset-right));
}

.kap--dar {
  max-width: calc(760px + 2 * var(--kap-kenar));
}

.kap--genis {
  max-width: calc(1360px + 2 * var(--kap-kenar));
}

/* ---------------------------------------------------------------- yerleşim: bölüm */
.bolum {
  position: relative;
  padding-block: var(--bolum-bosluk);
}

.bolum--siki {
  padding-block: calc(var(--bolum-bosluk) * 0.6);
}

.bolum--acik {
  background-color: var(--zemin-2);
}

.bolum--koyu {
  background-color: var(--renk-gece-900);
  background-image:
    radial-gradient(70% 55% at 50% 0%, rgba(25, 195, 214, 0.09), transparent 70%),
    linear-gradient(180deg, var(--renk-gece-900), var(--renk-gece-950));
}

/* aynı zeminli ardışık bölümlerde boşluk ikiye katlanmaz */
.bolum:not(.bolum--koyu, .bolum--acik) + .bolum:not(.bolum--koyu, .bolum--acik),
.bolum--acik + .bolum--acik,
.bolum--koyu + .bolum--koyu {
  padding-top: 0;
}

/* bölüm başı: üst başlık + h2 + giriş */
.bolum-basi {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
}

.bolum-basi > * + * {
  margin-top: 1rem;
}

.bolum-basi > .ust-baslik + * {
  margin-top: 0.875rem;
}

.bolum-basi > * + .dugme-grubu {
  margin-top: 1.75rem;
}

.bolum-basi--orta {
  margin-inline: auto;
  text-align: center;
}

.bolum-basi--orta > * {
  margin-inline: auto;
}

.bolum-basi--orta > .ust-baslik,
.bolum-basi--orta > .dugme-grubu {
  justify-content: center;
}

/* ---------------------------------------------------------------- yerleşim: ızgara */
.izgara {
  --izgara-bosluk: clamp(1rem, 0.7rem + 1.2vw, 1.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--izgara-bosluk);
}

.izgara > * {
  min-width: 0;
}

@media (min-width: 560px) {
  .izgara--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 640px) {
  .izgara--2,
  .izgara--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* iki sütunlu aralıkta tek kalan son öğe ortalanır (2 + 1 dengeli görünür) */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .izgara--3 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--izgara-bosluk)) / 2);
  }
}

@media (min-width: 1024px) {
  .izgara--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .izgara--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.izgara--oto {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--izgara-min, 16rem)), 1fr));
}

/* ---------------------------------------------------------------- yerleşim: ikili (metin + görsel) */
.ikili {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  align-items: center;
}

.ikili__metin,
.ikili__gorsel {
  min-width: 0;
}

.ikili__gorsel {
  position: relative;
}

/* üstten hizalı: sütun yükseklikleri çok farklıyken (uzun metin + kısa görsel, form + iletişim bilgisi) */
.ikili--ust {
  align-items: start;
}

@media (min-width: 960px) {
  .ikili {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ikili--ters > .ikili__gorsel {
    order: -1;
  }
}

/* ---------------------------------------------------------------- yerleşim: dikey akış */
/* Kenar boşlukları sıfır; .yigin ve metin kapları öğeler arasına düzenli dikey boşluk koyar. */
.yigin > * + *,
.ikili__metin > * + * {
  margin-top: var(--yigin-bosluk, 1rem);
}

.yigin--siki {
  --yigin-bosluk: 0.5rem;
}

.yigin--genis {
  --yigin-bosluk: 2rem;
}

:is(.yigin, .ikili__metin) > .ust-baslik + * {
  margin-top: 0.875rem;
}

:is(.yigin, .ikili__metin) > * + :is(.dugme-grubu, .tik-listesi, .nokta-listesi) {
  margin-top: 1.75rem;
}

:is(.yigin, .ikili__metin) > * + :is(h2, h3, h4) {
  margin-top: 2rem;
}

/* ---------------------------------------------------------------- yasal metin (uzun metin sayfaları) */
.yasal-metin {
  max-width: 72ch;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--metin);
}

.yasal-metin > * + * {
  margin-top: 1rem;
}

.yasal-metin h2 {
  margin-top: 3rem;
  font-size: var(--boyut-2xl);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.yasal-metin h3 {
  margin-top: 2rem;
  font-size: var(--boyut-lg);
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.yasal-metin > :first-child {
  margin-top: 0;
}

.yasal-metin h2 + *,
.yasal-metin h3 + * {
  margin-top: 0.75rem;
}

.yasal-metin ul,
.yasal-metin ol {
  padding-left: 1.5rem;
}

.yasal-metin ul {
  list-style: disc;
}

.yasal-metin ol {
  list-style: decimal;
}

.yasal-metin li + li {
  margin-top: 0.5rem;
}

.yasal-metin li::marker {
  color: var(--metin-3);
}

.yasal-metin a {
  overflow-wrap: anywhere;
}

.yasal-metin strong {
  color: var(--metin);
}

/* sınıfsız tablo; .tablo bileşeni kendi görünümünü korur (tercih edilen: .tablo-sarici > table.tablo) */
.yasal-metin table:not(.tablo) {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.yasal-metin table:not(.tablo) :is(th, td) {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--cizgi);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.yasal-metin table:not(.tablo) th {
  background-color: var(--zemin-2);
  font-weight: 600;
}

/* ---------------------------------------------------------------- hareket azaltma */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== css/bilesenler.css ===== */
/*
 * Razbin — bilesenler.css: ortak bileşenler.
 * Sahibi: Tasarım sistemi. Örnek HTML ve kullanım kuralları: belgeler/TASARIM_SISTEMI.md · canlı vitrin: /_bilesenler/
 *
 * Renkler yalnız anlamsal belirteçlerden gelir (--metin, --yuzey, --vurgu-metin …). Koyu alanlar (.bolum--koyu,
 * .hero, .cagri, .kart--koyu, .tema-koyu) bu adları temel.css'te yeniden tanımlar; bileşenler kendiliğinden uyar.
 * Üst menü, mobil menü, altbilgi ve WhatsApp düğmesi burada değil: kabuk.css.
 *
 * İçindekiler: düğme · kart · simge · rozet · listeler · adımlar · sekmeler · SSS · çağrı bandı · ölçüt ·
 *              özellik ızgarası · tablo · hero · ekmek kırıntısı · görsel çerçevesi · form
 */

/* ================================================================ düğme */
.dugme {
  --dugme-yukseklik: 3rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 100%;
  min-height: var(--dugme-yukseklik);
  padding: 0.625rem 1.375rem;
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--yaricap-tam);
  font-family: var(--yazi-govde);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.006em;
  text-align: center;
  text-decoration: none;
  text-wrap: balance;        /* kaçınılmaz iki satırlık etiket dengeli bölünür */
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--metin);
  background-color: var(--yuzey);
  box-shadow: var(--golge-kart);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  transition:
    background-color var(--gecis-hizli) var(--egri),
    border-color var(--gecis-hizli) var(--egri),
    color var(--gecis-hizli) var(--egri),
    box-shadow var(--gecis) var(--egri),
    transform var(--gecis-hizli) var(--egri);
}

.dugme:hover {
  color: var(--metin);
  text-decoration: none;
}

.dugme:active {
  transform: translateY(1px);
}

/* (0,2,0): .ikon tabanından bağımsız olarak düğmede yazı boyuna göre ölçeklenir */
.dugme .dugme__ikon,
.dugme > .ikon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  transition: transform var(--gecis) var(--egri);
}

/* birincil: turkuaz zemin, gece mavisi metin (8.6:1); açık ve koyu zeminde aynı */
.dugme--birincil {
  color: var(--renk-gece-900);
  background-color: var(--renk-turkuaz-500);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 55%);
  border-color: rgba(10, 120, 134, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(11, 20, 38, 0.14),
    0 6px 18px -8px rgba(14, 162, 180, 0.6);
}

.dugme--birincil:hover {
  color: var(--renk-gece-950);
  background-color: var(--renk-turkuaz-400);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 4px rgba(11, 20, 38, 0.12),
    0 10px 28px -8px rgba(25, 195, 214, 0.75);
}

.dugme--birincil:active {
  background-color: var(--renk-turkuaz-600);
  box-shadow: inset 0 1px 3px rgba(11, 20, 38, 0.25);
}

/* ikincil: yüzey zemini ve ince kenar; koyu zeminde cam görünümü */
.dugme--ikincil:hover {
  background-color: var(--yuzey-2);
  border-color: var(--metin-3);
}

/* metin: zeminsiz, bağlantı gibi; yanında ok simgesiyle */
.dugme--metin {
  min-height: 2.75rem;
  padding: 0.5rem 0;
  border-width: 0;
  border-radius: var(--yaricap-1);
  color: var(--vurgu-metin);
  background: none;
  box-shadow: none;
}

.dugme--metin:hover {
  color: var(--vurgu-metin);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.dugme--metin:active {
  transform: none;
}

/* boyutlar */
.dugme--buyuk {
  --dugme-yukseklik: 3.5rem;
  padding: 0.75rem 1.75rem;
  font-size: 1.0625rem;
}

.dugme--kucuk {
  --dugme-yukseklik: 2.5rem;
  gap: 0.375rem;
  padding: 0.4375rem 1rem;
  font-size: 0.9375rem;
}

.dugme--metin.dugme--buyuk,
.dugme--metin.dugme--kucuk {
  padding-inline: 0;
}

.dugme--tam {
  display: flex;
  width: 100%;
}

/* Metin düğmesi + sondaki ok (#i-ok-sag, #i-sag, #i-ok-sag-ust): etiket bağlantı gibi satır içi akar. Dar kapta sarılınca
   satırlar kabın hizasında durur ve ok son sözcükle aynı satırda kalır (esnek düzende metin satırı dolduruyor, ok sağ
   kenara kopuyordu). Okun satırdaki net genişliği sıfırdır (eksi sağ boşluk), yeri düğmenin sağ iç boşluğunda ayrılır
   (.kart__alt ile aynı yöntem); dokunma yüksekliği 44 px kalır. :where() önemi düşük tutar (sayfa kuralı değiştirebilir);
   :has() bilmeyen tarayıcıda ve yüklenirken esnek düzen sürer. */
.dugme.dugme--metin:where(:has(> .dugme__ikon > use:is([href$="#i-ok-sag"], [href$="#i-sag"], [href$="#i-ok-sag-ust"]))):where(:not([data-yukleniyor])) {
  display: inline-block;
  padding-block: 0.75rem;
  padding-right: calc(1.25em + 0.5rem);
  text-align: inherit;
}

.dugme.dugme--metin:where(:has(> .dugme__ikon > use:is([href$="#i-ok-sag"], [href$="#i-sag"], [href$="#i-ok-sag-ust"]))):where(:not([data-yukleniyor])) > .dugme__ikon {
  margin-left: 0.5rem;
  margin-right: calc(-1.25em - 0.5rem);
  vertical-align: top;
}

/* ok simgesi üzerine gelince ilerler (:has desteklemeyen tarayıcıda yalnız hareket olmaz) */
@media (hover: hover) {
  .dugme:hover .dugme__ikon:has(> use[href$="#i-ok-sag"]) {
    transform: translateX(3px);
  }

  .dugme:hover .dugme__ikon:has(> use[href$="#i-sag"]) {
    transform: translateX(3px);
  }

  .dugme:hover .dugme__ikon:has(> use[href$="#i-ok-sag-ust"]) {
    transform: translate(2px, -2px);
  }
}

/* devre dışı */
.dugme:disabled,
.dugme[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.dugme[aria-disabled="true"] {
  pointer-events: none;
}

/* yükleniyor: form.js gönderirken data-yukleniyor koyar; simgenin yerine dönen gösterge */
.dugme[data-yukleniyor] {
  cursor: progress;
  pointer-events: none;
}

/* yüklenirken düğme soluklaşmaz: işlem sürüyor, devre dışı değil */
.dugme[data-yukleniyor]:disabled,
.dugme[data-yukleniyor][aria-disabled="true"] {
  opacity: 0.9;
}

.dugme[data-yukleniyor]::before {
  content: "";
  flex: none;
  width: 1.125em;
  height: 1.125em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: dugme-don 0.7s linear infinite;
}

.dugme[data-yukleniyor] .dugme__ikon {
  display: none;
}

@keyframes dugme-don {
  to {
    transform: rotate(1turn);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* durum bildiren gösterge: yavaş döner, durmaz */
  .dugme[data-yukleniyor]::before {
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
  }
}

/* düğme grubu */
.dugme-grubu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

@media (max-width: 639.98px) {
  /* dar ekranda düğmeler satırı doldurur; sığmayan alt satıra geçip tam genişlik olur */
  .dugme-grubu > .dugme:not(.dugme--metin),
  .hero__dugmeler > .dugme:not(.dugme--metin),
  .cagri__dugmeler > .dugme:not(.dugme--metin) {
    flex: 1 1 auto;
  }
}

/* çok dar ekran (< 360 px): grup ve hero düğmeleri zaten alt alta, tam genişlikte durur. Uzun etiket (~30 karakter)
   düğmenin içinde iki satıra kırılmasın diye yan boşluk 16 px'e iner; yazı boyu değişmez. Küçük düğmeler (SSS konu
   çapaları gibi) yan yana akmayı sürdürür. */
@media (max-width: 359.98px) {
  .dugme-grubu > .dugme:not(.dugme--metin, .dugme--kucuk),
  .hero__dugmeler > .dugme:not(.dugme--metin, .dugme--kucuk) {
    flex-basis: 100%;
    padding-inline: 1rem;
  }
}

/* ================================================================ kart */
.kart {
  --kart-yaricap: var(--yaricap-4);
  --kart-ic-bosluk: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--kart-ic-bosluk);
  color: var(--metin);
  background-color: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kart-yaricap);
  box-shadow: var(--golge-kart);
}

.kart > * + * {
  margin-top: 0.75rem;
}

.kart > :is(.kart__ikon, .ikon-kutusu) + * {
  margin-top: 1.25rem;
}

.kart > .kart__ust-baslik + * {
  margin-top: 0.5rem;
}

.kart > * + :is(.kart__liste, .tik-listesi, .nokta-listesi) {
  margin-top: 1.25rem;
}

.kart > .kart__alt {
  margin-top: auto;
  padding-top: 1.5rem;
}

.kart__ust-baslik {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vurgu-metin);
}

.kart__baslik {
  font-family: var(--yazi-baslik);
  font-size: var(--boyut-xl);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--metin);
}

.kart__metin {
  color: var(--metin-2);
}

.kart__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* çizgili: zeminsiz, yalnız ince kenar (ikincil bilgi, açık gri bölüm) */
.kart--cizgili {
  background-color: transparent;
  box-shadow: none;
}

/* koyu: açık bölüm içinde öne çıkan gece mavisi kart (belirteçler temel.css'te koyuya döner) */
.kart--koyu {
  background-color: var(--renk-gece-900);
  background-image:
    radial-gradient(120% 70% at 100% 0%, rgba(25, 195, 214, 0.16), transparent 60%),
    linear-gradient(180deg, var(--renk-gece-800), var(--renk-gece-900));
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 48px -24px rgba(6, 11, 22, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* etkileşimli: başlıktaki .kart__bag bütün kartı tıklanır yapar */
.kart--etkilesimli {
  transition:
    transform var(--gecis) var(--egri),
    box-shadow var(--gecis) var(--egri),
    border-color var(--gecis) var(--egri);
}

@media (hover: hover) {
  .kart--etkilesimli:hover {
    transform: translateY(-4px);
    border-color: var(--vurgu-cizgi);
    box-shadow: var(--golge-kart-ust), var(--golge-parilti);
  }
}

.kart--etkilesimli:focus-within {
  border-color: var(--vurgu-cizgi);
  box-shadow: var(--golge-kart-ust), var(--golge-parilti);
}

.kart__bag {
  color: inherit;
  text-decoration: none;
}

.kart__bag:hover {
  color: inherit;
}

.kart__bag::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  border-radius: var(--kart-yaricap);
}

.kart__bag:focus-visible {
  outline: none;
}

.kart__bag:focus-visible::after {
  outline: 2px solid var(--odak);
  outline-offset: 3px;
}

/* ipucu ("İnceleyin →") düz metin gibi akar ve sarılabilir; ok son sözcükten ayrılmaz. Okun satırdaki net genişliği
   sıfırdır (eksi sağ boşluk), yeri paragrafın sağ iç boşluğunda ayrılmıştır: satır sonuna sığan sözcüğün yanına ok da
   sığar, satır oktan önce bölünmez. Okun aralığı ve hizası düşük önemle yazıldı; sayfa kuralı (0,2,0) değiştirebilir. */
.kart--etkilesimli .kart__alt {
  display: block;
  padding-right: 1.5rem;            /* ok 1.125rem + aralık 0.375rem */
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--vurgu-metin);
}

.kart--etkilesimli .kart__alt .ikon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--gecis) var(--egri);
}

.kart__alt:where(.kart--etkilesimli *) .ikon {
  margin-left: 0.375rem;
  margin-right: -1.5rem;
  vertical-align: -0.2em;
}

@media (hover: hover) {
  .kart--etkilesimli:hover .kart__alt .ikon {
    transform: translateX(4px);
  }
}

/* kartın üstündeki görsel (sektör çizimi, sahne): köşeleri kırpılır; ilk çocuk olarak yazılır.
   Varsayılan kartın iç boşluğunda durur; --tam kartın üst ve yan kenarlarına taşar (üst köşeler kartla aynı). */
.kart__gorsel {
  position: relative;
  isolation: isolate;               /* Safari: büyüyen içerik yuvarlatılmış köşeden taşmasın */
  overflow: hidden;
  border-radius: var(--kart-gorsel-yaricap, var(--yaricap-3));
}

.kart__gorsel > :is(img, svg, picture, video) {
  display: block;
  width: 100%;
  height: auto;
}

.kart > .kart__gorsel + * {
  margin-top: 1.5rem;
}

.kart > .kart__gorsel--tam {
  margin: calc(-1 * var(--kart-ic-bosluk)) calc(-1 * var(--kart-ic-bosluk)) 0;
  border-radius: calc(var(--kart-yaricap) - 1px) calc(var(--kart-yaricap) - 1px) 0 0;
}

/* etkileşimli kartta görsel üzerine gelince hafifçe büyür (kırpılan çerçevenin içinde) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .kart--etkilesimli .kart__gorsel > * {
    transition: transform var(--gecis) var(--egri);
  }

  .kart--etkilesimli:hover .kart__gorsel > * {
    transform: scale(1.03);
  }
}

/* ================================================================ simge */
.ikon {
  display: inline-block;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
}

.ikon--kucuk {
  width: 1.125rem;
  height: 1.125rem;
}

.ikon--buyuk {
  width: 2rem;
  height: 2rem;
}

/* simge kutusu: turkuaz tonlu yuvarlatılmış kare (kartta .kart__ikon aynı görünür) */
.ikon-kutusu,
.kart__ikon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: var(--yaricap-3);
  color: var(--vurgu-metin);
  background-color: var(--vurgu-zemin);
  box-shadow: inset 0 0 0 1px var(--vurgu-cizgi);
}

.ikon-kutusu > .ikon,
.kart__ikon > .ikon {
  width: 1.5rem;
  height: 1.5rem;
}

.ikon-kutusu--kucuk {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--yaricap-2);
}

.ikon-kutusu--kucuk > .ikon {
  width: 1.25rem;
  height: 1.25rem;
}

.ikon-kutusu--buyuk {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--yaricap-4);
}

.ikon-kutusu--buyuk > .ikon {
  width: 1.75rem;
  height: 1.75rem;
}

/* koyu kutu: açık zeminde gece mavisi kare + turkuaz simge */
.ikon-kutusu--koyu {
  color: var(--renk-turkuaz-300);
  background-color: var(--renk-gece-900);
  background-image: linear-gradient(160deg, var(--renk-gece-700), var(--renk-gece-900) 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 20px -10px rgba(6, 11, 22, 0.6);
}

/* ================================================================ rozet */
.rozet {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 100%;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-tam);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: var(--metin-2);
  background-color: var(--yuzey-2);
  overflow-wrap: anywhere;
  vertical-align: middle;
}

.rozet > .ikon {
  width: 0.875rem;
  height: 0.875rem;
}

.rozet--turkuaz {
  color: var(--vurgu-metin-2);
  background-color: var(--vurgu-zemin);
  border-color: var(--vurgu-cizgi);
}

.rozet--koyu {
  color: var(--koyu-metin);
  background-color: var(--renk-gece-900);
  border-color: var(--renk-gece-700);
}

/* rozet içindeki nokta; --canli: yumuşak nabız (canlı veri) */
.rozet__nokta {
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background-color: currentColor;
}

.rozet__nokta--canli {
  background-color: var(--basari);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--basari) 55%, transparent);
  animation: rozet-nabiz 2.4s var(--egri) infinite;
}

@keyframes rozet-nabiz {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--basari) 55%, transparent);
  }

  70%,
  100% {
    box-shadow: 0 0 0 0.4375rem color-mix(in srgb, var(--basari) 0%, transparent);
  }
}

/* ================================================================ listeler */
.tik-listesi,
.kart__liste {
  display: grid;
  gap: 0.75rem;
}

.kart__liste {
  gap: 0.5rem;
  font-size: 0.9375rem;
}

.tik-listesi > li,
.kart__liste > li {
  position: relative;
  min-width: 0;
  padding-left: 2rem;
}

.tik-listesi > li::before,
.kart__liste > li::before,
.tik-listesi > li::after,
.kart__liste > li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  top: calc((1lh - 1.375rem) / 2);
  width: 1.375rem;
  height: 1.375rem;
}

.tik-listesi > li::before,
.kart__liste > li::before {
  border-radius: 50%;
  background-color: var(--vurgu-zemin);
  box-shadow: inset 0 0 0 1px var(--vurgu-cizgi);
}

.tik-listesi > li::after,
.kart__liste > li::after {
  background-color: var(--vurgu-metin);
  -webkit-mask: var(--maske-tik) center / 0.75rem no-repeat;
  mask: var(--maske-tik) center / 0.75rem no-repeat;
}

.nokta-listesi {
  display: grid;
  gap: 0.5rem;
}

.nokta-listesi > li {
  position: relative;
  min-width: 0;
  padding-left: 1.25rem;
}

.nokta-listesi > li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.62em;
  top: calc((1lh - 0.375rem) / 2);
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--vurgu);
}

/* ================================================================ adımlar (mobil: dikey zaman çizgisi, ≥900: yatay) */
.adimlar {
  --adim-no: 2.75rem;
  --adim-aralik: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  display: grid;
}

.adim {
  position: relative;
  display: grid;
  grid-template-columns: var(--adim-no) minmax(0, 1fr);
  column-gap: 1.125rem;
  align-content: start;
  padding-bottom: 2.25rem;
}

.adim:last-child {
  padding-bottom: 0;
}

.adim__no {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: var(--adim-no);
  height: var(--adim-no);
  border-radius: 50%;
  font-family: var(--yazi-baslik);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--vurgu-metin);
  background-color: var(--zemin);
  background-image: linear-gradient(var(--vurgu-zemin), var(--vurgu-zemin));
  box-shadow: inset 0 0 0 1px var(--vurgu-cizgi);
}

.adim__no > .ikon {
  width: 1.25rem;
  height: 1.25rem;
}

.adim__baslik {
  grid-column: 2;
  padding-top: 0.5rem;
  font-family: var(--yazi-baslik);
  font-size: var(--boyut-lg);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.adim__metin {
  grid-column: 2;
  margin-top: 0.375rem;
  color: var(--metin-2);
}

/* adımları birleştiren çizgi */
.adim:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--adim-no) / 2 - 1px);
  top: calc(var(--adim-no) + 0.375rem);
  bottom: 0.375rem;
  width: 2px;
  border-radius: 2px;
  background-image: linear-gradient(180deg, var(--vurgu-cizgi), var(--cizgi));
}

/* --dikey: geniş ekranda da dikey zaman çizgisi (uzun metinli adımlar, .ikili sütunu, dar kap). Yatay düzen yalnız
   --dikey olmayan listeye uygulanır; :where() seçicilerin önemini değiştirmez (sayfa kuralları eskisi gibi geçerli). */
.adimlar--dikey > .adim:not(:last-child) {
  padding-bottom: clamp(2.25rem, 1.75rem + 1.5vw, 3rem);
}

@media (min-width: 900px) {
  .adimlar:where(:not(.adimlar--dikey)) {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: var(--adim-aralik);
  }

  :where(.adimlar:not(.adimlar--dikey)) > .adim {
    display: block;
    padding-bottom: 0;
  }

  :where(.adimlar:not(.adimlar--dikey)) .adim__no {
    margin-bottom: 1.25rem;
  }

  :where(.adimlar:not(.adimlar--dikey)) .adim__baslik {
    padding-top: 0;
  }

  :where(.adimlar:not(.adimlar--dikey)) > .adim:not(:last-child)::before {
    top: calc(var(--adim-no) / 2 - 1px);
    left: calc(var(--adim-no) + 0.75rem);
    right: calc(0.75rem - var(--adim-aralik));
    bottom: auto;
    width: auto;
    height: 2px;
    background-image: linear-gradient(90deg, var(--vurgu-cizgi), var(--cizgi));
  }
}

/* ================================================================ sekmeler */
/* cekirdek.js düğmelere aria-selected, panellere hidden koyar ve kaba data-sekmeler-hazir ekler.
   JS yoksa (html.js yok) işlemeyen sekme şeridi gizlenir, paneller alt alta görünür. */
[data-sekmeler] {
  min-width: 0;
}

html:not(.js) .sekmeler__liste {
  display: none;
}

.sekmeler__liste {
  display: flex;
  gap: 0.25rem;
  width: max-content;
  max-width: 100%;
  padding: 0.3125rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0.3125rem;
  scrollbar-width: none;
  background-color: var(--yuzey-2);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-tam);
}

.sekmeler__liste::-webkit-scrollbar {
  display: none;
}

.sekmeler--orta > .sekmeler__liste {
  margin-inline: auto;
}

.sekmeler__dugme {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  border: 0;
  border-radius: var(--yaricap-tam);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--metin-2);
  background-color: transparent;
  scroll-snap-align: start;
  transition:
    color var(--gecis-hizli) var(--egri),
    background-color var(--gecis-hizli) var(--egri),
    box-shadow var(--gecis-hizli) var(--egri);
}

.sekmeler__dugme:hover {
  color: var(--metin);
}

.sekmeler__dugme:focus-visible {
  outline-offset: -2px;
}

.sekmeler__dugme[aria-selected="true"] {
  color: var(--metin);
  background-color: var(--yuzey-3);
  box-shadow: var(--golge-1), inset 0 0 0 1px var(--cizgi);
}

.sekmeler__dugme > .ikon {
  width: 1.125rem;
  height: 1.125rem;
}

.sekmeler__dugme[aria-selected="true"] > .ikon {
  color: var(--vurgu-metin);
}

.sekmeler__panel {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.sekmeler__panel:focus-visible {
  outline-offset: 8px;
  border-radius: var(--yaricap-3);
}

/* JS yokken alt alta duran paneller arasında boşluk */
.sekmeler__panel:not([hidden]) ~ .sekmeler__panel:not([hidden]) {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

/* ================================================================ SSS */
.sss-listesi {
  border-top: 1px solid var(--cizgi);
}

.sss {
  border-bottom: 1px solid var(--cizgi);
}

.sss__soru {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 3.5rem;
  padding: 1.25rem 0;
  border-radius: var(--yaricap-2);
  font-family: var(--yazi-baslik);
  font-size: var(--boyut-lg);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--metin);
  list-style: none;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: color var(--gecis-hizli) var(--egri);
}

.sss__soru::-webkit-details-marker {
  display: none;
}

.sss__soru::marker {
  content: "";
}

/* dönen ok: daire içinde aşağı ok, açıkken yukarı döner */
.sss__soru::after {
  content: "";
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--yuzey-2) var(--ok-asagi) center / 1.125rem no-repeat;
  box-shadow: inset 0 0 0 1px var(--cizgi);
  transition:
    transform var(--gecis) var(--egri),
    background-color var(--gecis-hizli) var(--egri),
    box-shadow var(--gecis-hizli) var(--egri);
}

.sss__soru:hover {
  color: var(--vurgu-metin);
}

.sss__soru:hover::after,
.sss[open] > .sss__soru::after {
  background-color: var(--vurgu-zemin);
  background-image: var(--ok-asagi-vurgu);
  box-shadow: inset 0 0 0 1px var(--vurgu-cizgi);
}

.sss[open] > .sss__soru::after {
  transform: rotate(180deg);
}

.sss__soru:focus-visible {
  outline-offset: 4px;
}

.sss__cevap {
  padding: 0 clamp(0rem, -1.5rem + 7vw, 3.25rem) 1.5rem 0;
  color: var(--metin-2);
}

.sss__cevap > * + * {
  margin-top: 0.75rem;
}

.sss[open] > .sss__cevap {
  animation: sss-belir var(--gecis) var(--egri) both;
}

@keyframes sss-belir {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* yumuşak açılma (destekleyen tarayıcıda yükseklik de akar) */
@supports selector(::details-content) {
  .sss {
    interpolate-size: allow-keywords;
  }

  .sss::details-content {
    block-size: 0;
    overflow-y: clip;
    transition:
      block-size var(--gecis) var(--egri),
      content-visibility var(--gecis) allow-discrete;
  }

  .sss[open]::details-content {
    block-size: auto;
  }
}

/* ================================================================ çağrı bandı */
.cagri {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  align-items: center;
  overflow: hidden;
  padding: clamp(2rem, 1.25rem + 4vw, 4.5rem);
  border-radius: var(--yaricap-5);
  background-color: var(--renk-gece-900);
  background-image:
    radial-gradient(55% 90% at 100% 0%, rgba(25, 195, 214, 0.32), transparent 62%),
    radial-gradient(45% 80% at 0% 100%, rgba(59, 130, 246, 0.16), transparent 62%),
    linear-gradient(180deg, var(--renk-gece-800), var(--renk-gece-900));
  box-shadow: 0 32px 64px -32px rgba(6, 11, 22, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ince ızgara deseni, ışıma noktasından uzaklaştıkça söner */
.cagri::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(75% 95% at 85% 10%, #000 15%, transparent 72%);
  mask-image: radial-gradient(75% 95% at 85% 10%, #000 15%, transparent 72%);
  pointer-events: none;
}

/* üst kenarda turkuaz ışık çizgisi */
.cagri::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background-image: linear-gradient(90deg, transparent, rgba(111, 227, 238, 0.75), transparent);
  pointer-events: none;
}

.cagri__metin {
  min-width: 0;
}

.cagri__metin > * + * {
  margin-top: 1rem;
}

.cagri__metin > .ust-baslik + * {
  margin-top: 0.875rem;
}

.cagri__metin > p:not([class]) {
  font-size: var(--boyut-lg);
  color: var(--metin-2);
}

.cagri__dugmeler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* dar ekran (< 480 px): düğmeler tam genişlik, alt alta; etiket düğmenin içinde tek satırda kalsın diye bandın ve
   düğmenin yan boşluğu daralır, büyük düğmenin yazısı 15 → 17 px akar (320 px'te "Message us on WhatsApp" sığar). */
@media (max-width: 479.98px) {
  .cagri {
    padding-inline: max(1rem, 5vw);
  }

  .cagri__dugmeler > .dugme:not(.dugme--metin) {
    flex-basis: 100%;
    padding-inline: 1rem;
  }

  .cagri__dugmeler > .dugme--buyuk:not(.dugme--metin) {
    font-size: clamp(0.9375rem, 0.4375rem + 2.5vw, 1.0625rem);
  }
}

/* ≥ 900 px: metin solda, düğmeler sağda alt alta ve eşit genişlikte. Düğme sütunu en geniş etiket kadardır; metin
   sütunu daralmaz (yan yana iki uzun düğme 900-1180 px'te başlığı 5-7 satıra itiyordu). */
@media (min-width: 900px) {
  .cagri:not(.cagri--orta) {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 3rem;
  }

  .cagri:not(.cagri--orta) .cagri__dugmeler {
    flex-direction: column;
    align-items: stretch;
  }
}

.cagri--orta {
  justify-items: center;
  text-align: center;
}

.cagri--orta .cagri__metin > * {
  margin-inline: auto;
}

.cagri--orta :is(.cagri__dugmeler, .ust-baslik) {
  justify-content: center;
}

/* ================================================================ ölçüt kutusu (yalnız gerçek ürün davranışı) */
.olcut {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
  padding-left: 1.25rem;
}

.olcut::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 2px;
  border-radius: 2px;
  background-image: linear-gradient(180deg, var(--vurgu) 0%, var(--vurgu-cizgi) 55%, transparent);
}

.olcut__deger {
  order: -1;
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: var(--boyut-4xl);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--metin);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.olcut__deger small {
  margin-left: 0.125em;
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--metin-2);
}

.olcut__etiket {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--metin-2);
}

/* ================================================================ özellik ızgarası */
.ozellik-izgarasi {
  --ozellik-sutun-aralik: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 1.25rem + 2vw, 3rem) var(--ozellik-sutun-aralik);
}

@media (min-width: 640px) {
  .ozellik-izgarasi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ozellik-izgarasi {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ozellik-izgarasi--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ozellik-izgarasi--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* iki sütunlu düzende tek kalan son öğe ortalanır (2 + 1 dengeli görünür; .izgara--3 gibi): 640-1023 px'te bütün
   türlerde, --2'de her genişlikte. Izgaraya sayfa sınıfı (sayfa-…) verip sütunlarını kendisi düzenleyen sayfada
   (tek sütunlu liste, 768 px'te üç sütun) bu kural devreye girmez; ortalama gerekiyorsa sayfa kendisi yapar. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  :where(.ozellik-izgarasi:not([class*="sayfa-"])) > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--ozellik-sutun-aralik)) / 2);
  }
}

@media (min-width: 1024px) {
  :where(.ozellik-izgarasi--2:not([class*="sayfa-"])) > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--ozellik-sutun-aralik)) / 2);
  }
}

/* mobilde simge solda, metin sağda; ≥640 alt alta */
.ozellik {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0.375rem;
  align-content: start;
  min-width: 0;
}

.ozellik > .ikon-kutusu {
  grid-row: 1 / span 3;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--yaricap-2);
}

.ozellik > :not(.ikon-kutusu) {
  grid-column: 2;
}

.ozellik > :is(h3, h4, .ozellik__baslik) {
  padding-top: 0.5rem;
  font-size: var(--boyut-lg);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.ozellik > p {
  color: var(--metin-2);
}

.ozellik:not(:has(> .ikon-kutusu)) {
  display: block;
}

.ozellik:not(:has(> .ikon-kutusu)) > * + * {
  margin-top: 0.375rem;
}

@media (min-width: 640px) {
  .ozellik {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .ozellik > .ikon-kutusu {
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.75rem;
    border-radius: var(--yaricap-3);
  }

  .ozellik > :is(h3, h4, .ozellik__baslik) {
    padding-top: 0;
  }
}

/* ================================================================ tablo (sarıcıda yatay kayar, sayfa kaymaz) */
.tablo-sarici {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-3);
  background-color: var(--yuzey);
  box-shadow: var(--golge-kart);
}

.tablo-sarici:focus-visible {
  outline-offset: 2px;
}

.tablo {
  width: 100%;
  min-width: 36rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.tablo--esnek {
  min-width: 0;
}

.tablo caption {
  padding: 1rem 1.25rem 0.75rem;
  caption-side: top;
  text-align: left;
  font-weight: 650;
  color: var(--metin);
}

.tablo th,
.tablo td {
  padding: 0.875rem 1.25rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--cizgi);
}

.tablo thead th {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--metin-2);
  background-color: var(--yuzey-2);
}

.tablo tbody th {
  font-weight: 600;
  color: var(--metin);
}

.tablo td {
  color: var(--metin-2);
}

.tablo tbody tr:last-child > * {
  border-bottom: 0;
}

.tablo .sag {
  text-align: right;
}

.tablo .ikon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--vurgu-metin);
}

/* ================================================================ hero (ana sayfa) */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 1.5rem + 5.5vw, 6.5rem) clamp(3.5rem, 2rem + 5vw, 6.5rem);
  background-color: var(--renk-gece-950);
  background-image:
    radial-gradient(55% 65% at 80% 6%, rgba(25, 195, 214, 0.22), transparent 70%),
    radial-gradient(45% 55% at 4% 100%, rgba(59, 130, 246, 0.14), transparent 70%),
    linear-gradient(180deg, var(--renk-gece-950) 0%, var(--renk-gece-900) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

@supports (overflow: clip) {
  .hero {
    overflow: clip;
  }
}

/* ince perspektif ızgara (zemin), ufka doğru söner */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -50%;
  right: -50%;
  bottom: 0;
  height: 80%;
  background-image:
    linear-gradient(to right, rgba(111, 227, 238, 0.13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(111, 227, 238, 0.13) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center bottom;
  transform: perspective(520px) rotateX(62deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.45) 40%, transparent 85%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.45) 40%, transparent 85%);
  pointer-events: none;
}

/* çok hafif doku (SVG gürültüsü, resim dosyası değil) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");
  opacity: 0.045;
  pointer-events: none;
}

.hero__ic {
  --hero-aralik: clamp(2.75rem, 1.5rem + 5vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hero-aralik);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__ic {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .hero__ic:not(:has(> .hero__gorsel)) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hero__metin {
  min-width: 0;
  max-width: 42rem;
}

.hero__metin > * + * {
  margin-top: 1.25rem;
}

.hero__baslik {
  font-family: var(--yazi-baslik);
  font-size: clamp(2.125rem, 1.2rem + 4.2vw, 4.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.032em;
  color: var(--renk-gri-0);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* başlıkta nokta ve virgül: Plus Jakarta Sans ikisini de geniş bir sol boşlukla (~0.12em) çizer. Sayfalar başlık
   sonundaki noktayı ve başlık içindeki virgülü sözcüğe bitişik <span class="son">.</span> / <span class="son">,</span>
   içine alır ("görün<span class="son">.</span>", "kapanışa<span class="son">,</span> mağazanız"). Virgülün başı noktayla
   aynı hizadadır; kuyruğu taban çizgisinin altında kaldığı için önceki harfe değmez. Yalnız başlık yazısında
   (gövde yazısı Inter'in noktası dar çizilir); soru ve ünlem işaretinde kullanılmaz. */
:is(.hero__baslik, h1, .baslik-1, h2, .baslik-2, h3, .baslik-3, h4, .baslik-4, h5, h6,
  .kart__baslik, .adim__baslik, .ozellik__baslik, .sss__soru) .son {
  margin-left: -0.09em;
}

.hero__giris {
  max-width: 36rem;
  font-size: var(--boyut-lg);
  line-height: 1.65;
  color: var(--metin-2);
}

.hero__metin > .hero__dugmeler {
  margin-top: 2.25rem;
}

.hero__dugmeler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* yetenek çipleri */
.hero__notlar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
}

.hero__metin > .hero__notlar {
  margin-top: 2rem;
}

.hero__notlar > li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  max-width: 100%;
  padding: 0.3125rem 0.875rem 0.3125rem 0.6875rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--yaricap-tam);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
  color: var(--metin-2);
  background-color: rgba(255, 255, 255, 0.04);
}

.hero__notlar .ikon {
  width: 1rem;
  height: 1rem;
  color: var(--renk-turkuaz-400);
}

.hero__gorsel {
  position: relative;
  min-width: 0;
}

/* görselsiz ana sayfa hero'su: ortalı ve dengeli */
.hero:not(.hero--alt) .hero__ic:not(:has(> .hero__gorsel)) {
  justify-items: center;
  text-align: center;
}

.hero:not(.hero--alt) .hero__ic:not(:has(> .hero__gorsel)) > .hero__metin {
  max-width: 54rem;
}

.hero:not(.hero--alt) .hero__ic:not(:has(> .hero__gorsel)) .hero__giris {
  margin-inline: auto;
}

.hero:not(.hero--alt) .hero__ic:not(:has(> .hero__gorsel)) :is(.hero__dugmeler, .hero__notlar, .ust-baslik) {
  justify-content: center;
}

/* ortalı hero'larda (görselsiz ana sayfa hero'su, .hero--orta) en çok genişliği olan öğe de eksende durur:
   p.ust-baslik (72ch) ve kısa notlar sola yaslanıp eksenden kaymasın */
.hero:not(.hero--alt) .hero__ic:not(:has(> .hero__gorsel)) > .hero__metin > *,
.hero--orta .hero__metin > * {
  margin-inline: auto;
}

/* ---------------------------------------------------------------- hero--alt (alt sayfa) */
.hero--alt {
  padding-block: clamp(1.75rem, 1.25rem + 2.5vw, 3rem) clamp(3rem, 2rem + 4vw, 5.5rem);
}

.hero--alt::before {
  opacity: 0.6;
}

.hero--alt .hero__baslik {
  font-size: var(--boyut-5xl);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

/* ---------------------------------------------------------------- hero--orta (görselsiz, ortalı alt sayfa hero'su) */
/* Bir beyan ya da merkez sayfa girişi için (Hakkımızda, Sektörler). Ekmek kırıntısı, üst başlık, başlık, giriş,
   düğmeler ve çipler aynı eksende durur. Görsel eklenirse metnin altına iner (tek sütun). */
.hero--orta .hero__ic {
  justify-items: center;
  text-align: center;
}

@media (min-width: 1024px) {
  .hero--orta .hero__ic {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hero--orta .hero__metin {
  max-width: 52rem;
}

.hero--orta .hero__gorsel {
  justify-self: stretch;          /* görsel içerik genişliğine büzülmesin */
  text-align: start;
}

.hero--orta .hero__giris {
  max-width: 42rem;
  margin-inline: auto;
  text-wrap: balance;
}

.hero--orta :is(.ust-baslik, .hero__dugmeler, .hero__notlar, .ekmek__liste) {
  justify-content: center;
}

/* ekmek kırıntısı .hero__ic'in ilk çocuğudur: iki sütunun üstünde tam satır, görsel ne kadar uzun olursa olsun
   hero'nun tepesinde durur. Satır aralığı eksi kenar boşluğuyla 28 → 40 px'e iner. */
.hero__ic > .ekmek {
  grid-column: 1 / -1;
  margin-bottom: calc(clamp(1.75rem, 1.25rem + 2vw, 2.5rem) - var(--hero-aralik));
}

/* eski yerleşim: .hero__metin içinde ilk öğe */
.hero__metin > .ekmek {
  margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
}

.hero__metin > .ekmek + * {
  margin-top: 0;
}

/* ================================================================ ekmek kırıntısı ({{ekmek}} üretir) */
.ekmek {
  font-size: 0.875rem;
  line-height: 1.45;
}

/* bağlantılar 44 px yüksek dokunma alanıdır; eksi kenar boşluğu görsel ritmi korur */
.ekmek__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.5rem;
  margin-block: -0.625rem;
}

.ekmek__oge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--metin-2);
}

.ekmek__oge + .ekmek__oge::before {
  content: "";
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  background-color: var(--metin-3);
  -webkit-mask: var(--maske-sag) center / contain no-repeat;
  mask: var(--maske-sag) center / contain no-repeat;
}

.ekmek__bag {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.375rem;          /* odak halkasına pay; eksi kenar boşluğu metni yerinde tutar */
  margin-inline: -0.375rem;
  border-radius: var(--yaricap-1);
  color: var(--metin-2);
  text-decoration: none;
}

.ekmek__bag:hover {
  color: var(--metin);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ekmek__oge[aria-current] {
  min-height: 2.75rem;
  font-weight: 500;
  color: var(--metin);
}

.ekmek__oge[aria-current] > span {
  overflow-wrap: anywhere;
}

/* ================================================================ görsel çerçevesi (ürün görsellerini saran ışımalı alan) */
.gorsel-cerceve {
  position: relative;
  isolation: isolate;
  min-width: 0;
  margin: 0;
  padding: clamp(0.5rem, 0.35rem + 0.6vw, 0.875rem);
  border-radius: var(--yaricap-5);
  background-image: var(--cerceve-zemin);
  box-shadow: inset 0 0 0 1px var(--cerceve-cizgi), var(--cerceve-golge);
}

/* üst kenardan süzülen turkuaz ışık */
.gorsel-cerceve::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: radial-gradient(70% 45% at 50% 0%, rgba(25, 195, 214, 0.2), transparent 70%);
  pointer-events: none;
}

/* sade: kutusuz, yalnız arkadan ışıma (telefon görselleri gibi kendi çerçevesi olanlar için) */
.gorsel-cerceve--sade {
  padding: 0;
  background-image: none;
  box-shadow: none;
}

/* dolu, yumuşak hale: iç alan aynı tonla dolu, dışı gölgeyle söner. Gölge kaydırma alanını büyütmez,
   dar ekranda yatay taşma yapmaz. */
.gorsel-cerceve--sade::before {
  inset: 22% 18%;
  border-radius: 50%;
  background-image: none;
  background-color: rgba(25, 195, 214, 0.12);
  box-shadow: 0 0 96px 64px rgba(25, 195, 214, 0.12);
}

/* yüzen kart: görselin köşesine binen küçük sahne kartı (shn-kart-*). Dar ekranda görselin altında ortalı akar
   (telefonun üstünü örtmesin); 640 px'ten itibaren seçilen köşeye konumlanır, çerçevenin dışına taşmaz. */
.gorsel-cerceve > .gorsel-yuzen {
  position: relative;
  z-index: 2;
  width: max-content;
  max-width: 100%;
  margin: 0.75rem auto 0;
}

@media (min-width: 640px) {
  .gorsel-cerceve > .gorsel-yuzen {
    position: absolute;
    max-width: min(17rem, 60%);
    margin: 0;
  }

  .gorsel-yuzen--sol-ust {
    top: 8%;
    left: 0;
  }

  .gorsel-yuzen--sag-ust {
    top: 8%;
    right: 0;
  }

  .gorsel-yuzen--sol-alt {
    bottom: 10%;
    left: 0;
  }

  .gorsel-yuzen--sag-alt {
    bottom: 10%;
    right: 0;
  }

  /* dikeyde ortada, sol ya da sağ kenarda (eş adlar: --sol-orta, --sag-orta). translate, transform'dan bağımsızdır:
     kartın kendi canlandırmasıyla çakışmaz. */
  :is(.gorsel-yuzen--orta-sol, .gorsel-yuzen--sol-orta) {
    top: 50%;
    left: 0;
    translate: 0 -50%;
  }

  :is(.gorsel-yuzen--orta-sag, .gorsel-yuzen--sag-orta) {
    top: 50%;
    right: 0;
    translate: 0 -50%;
  }

  /* Tek sütunlu yerleşimde (hero 640-1023, ikili 640-959) çerçeve bütün satırı kaplar; telefon ortada kalır, köşedeki
     kart telefondan kopar. Yüzen kartlı telefon çerçevesi bu yüzden makul genişlikte ve ortada durur; iki sütunlu
     düzende sütun zaten daha dardır (etkisi yok). */
  .gorsel-cerceve--sade:has(> .gorsel-yuzen):has(.tlf):not(:has(.tlf-ikili)) {
    max-width: 36rem;
    margin-inline: auto;
  }

  .gorsel-cerceve--sade:has(> .gorsel-yuzen):has(.tlf-ikili) {
    max-width: 44rem;
    margin-inline: auto;
  }
}

.gorsel-cerceve > figcaption {
  padding: 0.75rem 0.5rem 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
  color: var(--metin-2);
}

/* ================================================================ form alanları (sunucu-form ajanı kullanır) */
.form {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
  container-type: inline-size;   /* alan ızgarası formun kendi genişliğine bakar */
}

.form__izgara {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem 1rem;
}

/* form en az 36 rem (576 px) genişse iki sütun; dar sütundaki form tek sütun kalır.
   Kapsayıcı sorgusu olmayan eski tarayıcıda tek sütun. */
@container (min-width: 36rem) {
  .form__izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.alan {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.alan--tam {
  grid-column: 1 / -1;
}

.alan__etiket {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--metin);
}

.alan__zorunlu {
  margin-left: 0.25rem;
  font-weight: 700;
  color: var(--hata);
}

.alan__girdi {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--girdi-cizgi);
  border-radius: var(--yaricap-2);
  font-family: var(--yazi-govde);
  font-size: 1rem;              /* 16px altı iOS'ta yakınlaştırır */
  line-height: 1.5;
  color: var(--metin);
  background-color: var(--girdi-zemin);
  box-shadow: 0 1px 2px rgba(11, 20, 38, 0.04);
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color var(--gecis-hizli) var(--egri),
    box-shadow var(--gecis-hizli) var(--egri),
    background-color var(--gecis-hizli) var(--egri);
}

.alan__girdi::placeholder {
  color: var(--metin-3);
  opacity: 1;
}

.alan__girdi:hover {
  border-color: var(--girdi-cizgi-ust);
}

.alan__girdi:focus,
.alan__girdi:focus-visible {
  border-color: var(--odak);
  outline: 2px solid transparent;  /* yüksek karşıtlık kipinde görünür kalır */
  box-shadow: 0 0 0 4px var(--odak-hale);
}

.alan__girdi:disabled {
  opacity: 0.6;
}

textarea.alan__girdi {
  min-height: 9rem;
  resize: vertical;
}

.alan__secim {
  padding-right: 2.75rem;
  background-image: var(--ok-asagi);
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1.125rem;
  cursor: pointer;
}

.alan__secim option {
  color: var(--renk-gece-900);
  background-color: var(--renk-gri-0);
}

.alan__ipucu {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--metin-2);
}

.alan__hata {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--hata);
}

.alan__hata::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.1rem;
  background-color: currentColor;
  -webkit-mask: var(--maske-hata) center / contain no-repeat;
  mask: var(--maske-hata) center / contain no-repeat;
}

.alan__hata:empty {
  display: none;
}

/* hata durumu: kırmızı kenar (.alan--hatali ya da aria-invalid) */
.alan--hatali .alan__girdi,
.alan__girdi[aria-invalid="true"] {
  border-color: var(--hata);
  box-shadow: inset 0 0 0 1px var(--hata);
}

.alan--hatali .alan__girdi:focus,
.alan__girdi[aria-invalid="true"]:focus {
  border-color: var(--hata);
  box-shadow: inset 0 0 0 1px var(--hata), 0 0 0 4px var(--hata-hale);
}

/* onay kutusu */
.onay {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
}

.onay__kutu {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 1.5px solid var(--girdi-cizgi);
  border-radius: 7px;
  background-color: var(--girdi-zemin);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.9375rem;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition:
    background-color var(--gecis-hizli) var(--egri),
    border-color var(--gecis-hizli) var(--egri),
    box-shadow var(--gecis-hizli) var(--egri);
}

.onay__kutu:hover {
  border-color: var(--girdi-cizgi-ust);
}

.onay__kutu:checked {
  border-color: var(--renk-turkuaz-600);
  background-color: var(--renk-turkuaz-500);
  background-image: var(--tik-koyu);
}

.onay__kutu:focus-visible {
  outline: 2px solid var(--odak);
  outline-offset: 2px;
}

.alan--hatali .onay__kutu,
.onay__kutu[aria-invalid="true"] {
  border-color: var(--hata);
  box-shadow: 0 0 0 3px var(--hata-hale);
}

.onay__metin {
  padding-top: 0.0625rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--metin-2);
  cursor: pointer;
}

.onay__metin a {
  font-weight: 500;
}

/* hata özeti (role=alert): form.js gösterir ve odaklar */
.form__ozet {
  position: relative;
  padding: 1rem 1.25rem 1rem 3.25rem;
  border: 1px solid var(--hata-cizgi);
  border-radius: var(--yaricap-3);
  color: var(--metin);
  background-color: var(--hata-zemin);
}

.form__ozet::before {
  content: "";
  position: absolute;
  left: 1.125rem;
  top: 1.1rem;
  width: 1.375rem;
  height: 1.375rem;
  background-color: var(--hata);
  -webkit-mask: var(--maske-hata) center / contain no-repeat;
  mask: var(--maske-hata) center / contain no-repeat;
}

.form__ozet:focus {
  outline: 2px solid var(--hata);
  outline-offset: 2px;
}

.form__ozet > * + * {
  margin-top: 0.5rem;
}

.form__ozet > :first-child {
  font-weight: 650;
}

.form__ozet ul {
  padding-left: 1.125rem;
  list-style: disc;
}

.form__ozet li + li {
  margin-top: 0.25rem;
}

.form__ozet a {
  font-weight: 500;
  color: var(--hata-metin);
}

/* durum satırı (aria-live): boşken yer kaplamaz ama erişilebilirlik ağacında kalır */
.form__durum {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--metin-2);
}

/* boşken ızgara akışından çıkar (çift boşluk olmasın); erişilebilirlik ağacında kalır */
.form__durum:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
}

/* gönder: düğmenin kendisi ya da düğmeyi saran satır; dar formda tam genişlik */
.form__gonder {
  justify-self: start;
}

@container (max-width: 35.99rem) {
  .form__gonder {
    justify-self: stretch;
  }

  .form__gonder.dugme,
  .form__gonder > .dugme {
    width: 100%;
  }
}

/* başarı paneli */
.form__basari {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) clamp(1.25rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-4);
  text-align: center;
  color: var(--metin);
  background-color: var(--yuzey);
  box-shadow: var(--golge-2);
}

.form__basari::before {
  content: "";
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--vurgu-zemin) var(--tik-vurgu) center / 1.5rem no-repeat;
  box-shadow: inset 0 0 0 1px var(--vurgu-cizgi), 0 0 0 8px color-mix(in srgb, var(--vurgu) 7%, transparent);
}

/* başlık: h2 / h3 ya da (başlık sırası izin vermiyorsa) ilk paragraf; tek paragraf başlık sayılmaz */
.form__basari > :is(h2, h3, p:first-child:not(:last-child)) {
  max-width: 30ch;
  font-family: var(--yazi-baslik);
  font-size: var(--boyut-2xl);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.014em;
  color: var(--metin);
  text-wrap: balance;
}

.form__basari > p {
  max-width: 44ch;
  color: var(--metin-2);
}

.form__basari:focus {
  outline: none;
}

/* kartın içindeki formda (iletişim sayfası) panel kartın yüzeyini kullanır: ikinci çerçeve, zemin ve gölge yok */
.kart .form__basari {
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

/* bal tuzağı: ekran dışında; kapsayıcıya aria-hidden="true", girdiye tabindex="-1" autocomplete="off" */
.bal {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ===== css/kabuk.css ===== */
/*
 * Razbin — kabuk.css: her sayfada görünen kabuk.
 * İçindekiler: belirteçler · logo · atla bağlantısı · üst menü (masaüstü + açılır paneller) · dil seçici · mobil menü ·
 *              altbilgi · WhatsApp düğmesi · beliriş (data-goster) · yazdırma
 * Sahibi: Kabuk. Yapı, metin anahtarları ve JS davranışları: belgeler/KABUK.md.
 * Bileşen sınıfları (.dugme, .ikon, .kap, .gorunmez, .tema-koyu) burada yeniden tanımlanmaz, yalnız kullanılır.
 * JS durumları: cekirdek.js <html>'e "js" sınıfı koyar; açık panel ve mobil menüde "data-acik" özniteliği bulunur.
 */

/* ================================================================ belirteçler (yalnız kabuk) */
:root {
  /* --renk-gece-900 (#0B1426) saydam tonları; belirteç onaltılık olduğundan rgba ile yazıldı */
  --kabuk-cam-hero: rgba(11, 20, 38, 0.5);      /* sayfa başı, arkada koyu hero */
  --kabuk-cam: rgba(11, 20, 38, 0.93);          /* kaydırılmış üst menü: açık içerik üstünde de gece mavisi */
  --kabuk-cam-yedek: rgba(11, 20, 38, 0.97);    /* backdrop-filter desteklenmezse */
  --kabuk-cizgi: rgba(255, 255, 255, 0.08);
  --kabuk-zemin-ust: rgba(255, 255, 255, 0.06); /* koyu zeminde üzerine gelince */
  --kabuk-golge: 0 16px 32px -20px rgba(3, 7, 15, 0.8);
  --kabuk-panel-golge: 0 32px 64px -24px rgba(3, 7, 15, 0.75), 0 12px 24px -12px rgba(3, 7, 15, 0.5);
  --whatsapp-yesil: #25D366;                    /* WhatsApp marka rengi */
}

/* ================================================================ logo (üst menü, mobil menü, altbilgi) */
/* Yazı ve işaret currentColor; noktalar marka turkuazı. SVG'deki fill özniteliğinin yerine belirteçten gelir. */
.logo__nokta {
  fill: var(--renk-turkuaz-500);
}

/* ================================================================ atla bağlantısı */
.atla {
  position: fixed;
  top: 0.75rem;
  left: max(0.75rem, env(safe-area-inset-left));
  z-index: calc(var(--z-cerez) + 10);
  padding: 0.75rem 1.125rem;
  border-radius: var(--yaricap-2);
  font-weight: 600;
  line-height: 1.25;
  color: var(--renk-gece-950);
  background-color: var(--renk-turkuaz-400);
  box-shadow: var(--golge-3);
  text-decoration: none;
  transform: translateY(calc(-100% - 1.5rem));
  transition: transform var(--gecis-hizli) var(--egri);
}

.atla:focus {
  transform: none;
  outline: 2px solid var(--renk-gri-0);
  outline-offset: 2px;
}

/* ================================================================ üst menü */
.ust {
  position: sticky;
  top: 0;
  z-index: var(--z-ust);
  background-color: var(--koyu-zemin);
  box-shadow: inset 0 -1px 0 var(--kabuk-cizgi);
  transition:
    background-color var(--gecis) var(--egri),
    box-shadow var(--gecis) var(--egri);
}

/* Sayfa koyu bir bölümle başlıyorsa o bölümün zemini üst menünün altına uzanır; içerik yerinden oynamaz
   (eksi kenar boşluğu kadar saydam üst kenarlık). Üst menü sayfa başında bu zemini yarı saydam gösterir. */
.ust ~ .ana-icerik > :is(.hero, .bolum--koyu):first-child {
  margin-top: calc(-1 * var(--ust-yukseklik));
  border-top: var(--ust-yukseklik) solid transparent;
  background-origin: border-box;
}

body:has(> .ana-icerik > :is(.hero, .bolum--koyu):first-child) > .ust:not(.ust--kaydirildi) {
  background-color: var(--kabuk-cam-hero);
}

/* kaydırılınca: daha opak, bulanık arka plan ve gölge */
.ust--kaydirildi {
  background-color: var(--kabuk-cam);
  box-shadow: inset 0 -1px 0 var(--kabuk-cizgi), var(--kabuk-golge);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ust--kaydirildi {
    background-color: var(--kabuk-cam-yedek);
  }
}

.ust__ic {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: var(--ust-yukseklik);
}

.ust__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 2.75rem;
  border-radius: var(--yaricap-1);
  color: var(--koyu-metin);
  text-decoration: none;
}

.ust__logo .logo {
  display: block;
  width: auto;
  height: 1.625rem;
}

/* ---------------------------------------------------------------- masaüstü gezinme (≥1024) */
.ust__menu {
  display: none;
}

.ust__liste {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.ust__oge {
  position: relative;
}

.ust__bag,
.ust__acilir-dugme {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--yaricap-tam);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--koyu-metin-2);
  background-color: transparent;
  text-decoration: none;
  transition:
    color var(--gecis-hizli) var(--egri),
    background-color var(--gecis-hizli) var(--egri);
}

.ust__bag:hover,
.ust__acilir-dugme:hover,
.ust__acilir-dugme[aria-expanded="true"] {
  color: var(--koyu-metin);
  background-color: var(--kabuk-zemin-ust);
}

/* bulunulan sayfa ya da bölüm: parlak metin + altta kısa turkuaz çizgi */
.ust__bag:is([aria-current="page"], [data-aktif-bolum]),
.ust__acilir-dugme:is([aria-current="page"], [data-aktif-bolum]) {
  color: var(--koyu-metin);
}

.ust__bag:is([aria-current="page"], [data-aktif-bolum])::after,
.ust__acilir-dugme:is([aria-current="page"], [data-aktif-bolum])::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.1875rem;
  width: 1rem;
  height: 2px;
  margin-left: -0.5rem;
  border-radius: 2px;
  background-color: var(--renk-turkuaz-400);
}

.ust__ok {
  width: 1rem;
  height: 1rem;
  margin-right: -0.125rem;
  opacity: 0.7;
  transition: transform var(--gecis) var(--egri), opacity var(--gecis-hizli) var(--egri);
}

.ust__acilir-dugme[aria-expanded="true"] .ust__ok {
  opacity: 1;
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------- açılır panel */
.acilir-panel {
  position: absolute;
  top: calc(100% + 1.5rem);      /* düğme (40px) ile üst menü (72px) alt kenarı arası 16px + 8px boşluk */
  left: -0.75rem;
  z-index: 1;
  width: 40rem;
  max-width: calc(100vw - 2 * var(--kap-kenar));
  padding: 0.625rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--yaricap-4);
  color: var(--koyu-metin);
  background-color: var(--renk-gece-900);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 40%);
  box-shadow: var(--kabuk-panel-golge), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.375rem) scale(0.985);
  transform-origin: 2.5rem 0;
  transition:
    opacity 180ms var(--egri),
    transform 180ms var(--egri),
    visibility 0s linear 180ms;
}

/* imleç düğmeden panele inerken aradaki boşluk da panele sayılır (panel kapanmaz) */
.acilir-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 1.5rem;
}

/* üst kenarda ince turkuaz ışık */
.acilir-panel::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 14%;
  right: 14%;
  height: 1px;
  background-image: linear-gradient(90deg, transparent, rgba(111, 227, 238, 0.55), transparent);
  pointer-events: none;
}

/* açılırken görünürlük geçişsiz değişir: içindeki bağlantılar hemen odaklanabilir (kapanırken gecikmeli gizlenir) */
.acilir-panel[data-acik] {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity 180ms var(--egri),
    transform 180ms var(--egri);
}

/* JS yokken: üzerine gelince ya da klavye odağı içerideyken açık */
html:not(.js) .ust__oge--acilir:is(:hover, :focus-within) > .acilir-panel {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: none;
}

.acilir-panel__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.125rem;
}

.acilir-panel__bag {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  height: 100%;
  padding: 0.75rem;
  border-radius: var(--yaricap-3);
  color: var(--koyu-metin);
  text-decoration: none;
  transition: background-color var(--gecis-hizli) var(--egri);
}

.acilir-panel__bag:hover {
  color: var(--koyu-metin);
  background-color: rgba(255, 255, 255, 0.05);
}

.acilir-panel__bag:focus-visible {
  outline-offset: -2px;
  background-color: rgba(255, 255, 255, 0.05);
}

.acilir-panel__bag[aria-current="page"] {
  background-color: rgba(25, 195, 214, 0.08);
}

.acilir-panel__ikon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--yaricap-2);
  color: var(--renk-turkuaz-300);
  background-color: rgba(25, 195, 214, 0.1);
  box-shadow: inset 0 0 0 1px rgba(56, 211, 227, 0.22);
  transition:
    color var(--gecis-hizli) var(--egri),
    background-color var(--gecis-hizli) var(--egri);
}

.acilir-panel__ikon .ikon {
  width: 1.25rem;
  height: 1.25rem;
}

.acilir-panel__bag:is(:hover, :focus-visible, [aria-current="page"]) .acilir-panel__ikon {
  color: var(--renk-turkuaz-200);
  background-color: rgba(25, 195, 214, 0.18);
}

.acilir-panel__metin {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  min-width: 0;
  padding-top: 0.0625rem;
}

.acilir-panel__ad {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.acilir-panel__aciklama {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--koyu-metin-2);
}

.acilir-panel__tumu {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0.5rem -0.625rem -0.625rem;
  padding: 0.875rem 1.375rem;
  border-top: 1px solid var(--kabuk-cizgi);
  border-radius: 0 0 calc(var(--yaricap-4) - 1px) calc(var(--yaricap-4) - 1px);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--renk-turkuaz-300);
  background-color: rgba(255, 255, 255, 0.025);
  text-decoration: none;
  transition: color var(--gecis-hizli) var(--egri), background-color var(--gecis-hizli) var(--egri);
}

.acilir-panel__tumu:hover {
  color: var(--renk-turkuaz-200);
  background-color: rgba(255, 255, 255, 0.045);
}

.acilir-panel__tumu:focus-visible {
  outline-offset: -2px;
}

.acilir-panel__tumu .ikon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--gecis) var(--egri);
}

.acilir-panel__tumu:hover .ikon {
  transform: translateX(3px);
}

/* ---------------------------------------------------------------- sağdaki eylemler */
.ust__eylemler {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

.ust__giris,
.ust__cta {
  display: none;
}

.ust__giris {
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: var(--yaricap-tam);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--koyu-metin-2);
  text-decoration: none;
  transition: color var(--gecis-hizli) var(--egri), background-color var(--gecis-hizli) var(--egri);
}

.ust__giris:hover {
  color: var(--koyu-metin);
  background-color: var(--kabuk-zemin-ust);
}

.ust__giris .ikon {
  width: 1.125rem;
  height: 1.125rem;
}

.ust__cta {
  margin-left: 0.5rem;
  white-space: nowrap;
}

/* menü düğmesi (JS'siz hâli #mobil-menu bağlantısı, JS'li hâli düğme; görünüşleri aynı) */
.ust__menu-dugmesi {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.625rem;
  padding: 0;
  border: 0;
  border-radius: var(--yaricap-2);
  color: var(--koyu-metin);
  background-color: transparent;
  transition: background-color var(--gecis-hizli) var(--egri);
}

.ust__menu-dugmesi:hover {
  background-color: var(--kabuk-zemin-ust);
}

.ust__menu-dugmesi .ikon {
  width: 1.5rem;
  height: 1.5rem;
}

@media (min-width: 1024px) {
  .ust__logo .logo {
    height: 1.75rem;
  }

  .ust__menu {
    display: block;
    margin-left: 2rem;
  }

  .ust__giris {
    display: inline-flex;
  }

  .ust__cta {
    display: inline-flex;
  }

  .ust__menu-dugmesi {
    display: none;
  }
}

/* 1024-1279: müşteri girişi yalnız simge (yazı ekran okuyucuda kalır); menü aralıkları biraz daralır ki en uzun
   dilde (TR) simge ve çağrı düğmesiyle de sağ kenar payı korunsun, menü ile eylemler arasında nefes payı kalsın */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .ust__menu {
    margin-left: 1.25rem;
  }

  .ust__bag,
  .ust__acilir-dugme {
    padding: 0 0.625rem;
  }

  .ust__giris {
    padding: 0;
  }

  .ust__giris-metin {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ================================================================ dil seçici */
.dil-secici {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.625rem;
  border-radius: var(--yaricap-tam);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--koyu-metin-2);
  text-decoration: none;
  transition: color var(--gecis-hizli) var(--egri), background-color var(--gecis-hizli) var(--egri);
}

.dil-secici:hover {
  color: var(--koyu-metin);
  background-color: var(--kabuk-zemin-ust);
}

.dil-secici__ikon {
  width: 1.125rem;
  height: 1.125rem;
}

/* geniş: dilin tam adı (mobil menü ve altbilgi) */
.dil-secici--genis {
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0 0.875rem 0 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px var(--kabuk-cizgi);
}

/* ================================================================ mobil menü (<1024) */
.mobil-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  color: var(--koyu-metin);
  background-color: var(--renk-gece-950);
  background-image: radial-gradient(90% 45% at 100% 0%, rgba(25, 195, 214, 0.1), transparent 70%);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 200ms var(--egri),
    visibility 0s linear 200ms;
}

/* açılırken görünürlük geçişsiz değişir (ilk öğe hemen odaklanır); kapanırken solma bitince gizlenir */
.mobil-menu[data-acik],
html:not(.js) .mobil-menu:target {
  visibility: visible;
  opacity: 1;
  transition: opacity 200ms var(--egri);
}

/* kaydırma kilidi: gövde sabitlenir (iOS Safari dahil); JS kaydırma konumunu body'nin "top"una yazar */
html.menu-acik {
  overflow: hidden;
}

html.menu-acik body {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

.mobil-menu__ust {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: var(--ust-yukseklik);
  background-color: var(--renk-gece-950);
  box-shadow: inset 0 -1px 0 var(--kabuk-cizgi);
}

.mobil-menu__logo {
  display: inline-flex;
  align-items: center;
  color: var(--koyu-metin);
}

.mobil-menu__logo .logo {
  display: block;
  width: auto;
  height: 1.625rem;
}

.mobil-menu__kapat {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.625rem;
  padding: 0;
  border: 0;
  border-radius: var(--yaricap-2);
  color: var(--koyu-metin);
  background-color: transparent;
  transition: background-color var(--gecis-hizli) var(--egri);
}

.mobil-menu__kapat:hover {
  background-color: var(--kabuk-zemin-ust);
}

.mobil-menu__kapat .ikon {
  width: 1.5rem;
  height: 1.5rem;
}

.mobil-menu__govde {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 2rem;
  padding-top: 0.5rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  transform: translateY(-0.5rem);
  transition: transform 260ms var(--egri);
}

.mobil-menu[data-acik] .mobil-menu__govde {
  transform: none;
}

.mobil-menu__nav,
.mobil-menu__alt {
  width: 100%;
  max-width: 35rem;
}

.mobil-menu__liste > li {
  border-bottom: 1px solid var(--kabuk-cizgi);
}

.mobil-menu__bag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.5rem 0.25rem;
  border-radius: var(--yaricap-2);
  font-family: var(--yazi-baslik);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--koyu-metin);
  text-decoration: none;
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.mobil-menu__bag:hover {
  color: var(--koyu-metin);
}

.mobil-menu__bag:focus-visible,
.mobil-menu__alt-bag:focus-visible,
.mobil-menu__tumu:focus-visible {
  outline-offset: -2px;
}

.mobil-menu__baslik::-webkit-details-marker {
  display: none;
}

.mobil-menu__baslik::marker {
  content: "";
}

/* bulunulan sayfa ya da bölüm: solda turkuaz nokta */
.mobil-menu__bag:is([aria-current="page"], [data-aktif-bolum])::before {
  content: "";
  flex: none;
  order: -1;
  width: 0.375rem;
  height: 0.375rem;
  margin-right: -0.375rem;
  border-radius: 50%;
  background-color: var(--renk-turkuaz-400);
}

.mobil-menu__bag:is([aria-current="page"], [data-aktif-bolum]) {
  justify-content: flex-start;
}

.mobil-menu__bag:is([aria-current="page"], [data-aktif-bolum]) .mobil-menu__ok {
  margin-left: auto;
}

.mobil-menu__ok {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--koyu-metin-2);
  transition: transform var(--gecis) var(--egri);
}

.mobil-menu__grup[open] .mobil-menu__ok {
  transform: rotate(180deg);
}

.mobil-menu__alt-liste {
  padding: 0 0 0.75rem;
}

.mobil-menu__grup[open] > .mobil-menu__alt-liste {
  animation: mobil-alt-belir var(--gecis) var(--egri);
}

@keyframes mobil-alt-belir {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
}

.mobil-menu__alt-bag {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.5rem 0.25rem;
  border-radius: var(--yaricap-2);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--koyu-metin-2);
  text-decoration: none;
  transition: color var(--gecis-hizli) var(--egri);
}

.mobil-menu__alt-bag:hover,
.mobil-menu__alt-bag[aria-current="page"] {
  color: var(--koyu-metin);
}

.mobil-menu__alt-bag .ikon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--renk-turkuaz-300);
}

.mobil-menu__alt-bag[aria-current="page"] {
  background-color: rgba(25, 195, 214, 0.08);
  padding-inline: 0.625rem;
  margin-inline: -0.375rem;
}

.mobil-menu__tumu {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 3rem;
  padding: 0.5rem 0.25rem;
  border-radius: var(--yaricap-2);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--renk-turkuaz-300);
  text-decoration: none;
}

.mobil-menu__tumu .ikon {
  width: 1rem;
  height: 1rem;
}

.mobil-menu__alt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  margin-top: auto;
}

.mobil-menu__dugmeler {
  display: grid;
  gap: 0.75rem;
  width: 100%;
}

.mobil-menu__kisayollar {
  display: grid;
  gap: 0.125rem;
  width: 100%;
}

.mobil-menu__kisayol {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  border-radius: var(--yaricap-1);
  font-size: 0.9375rem;
  color: var(--koyu-metin-2);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.mobil-menu__kisayol:hover {
  color: var(--koyu-metin);
}

.mobil-menu__kisayol .ikon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--renk-turkuaz-300);
}

@media (min-width: 1024px) {
  .mobil-menu {
    display: none;
  }
}

/* ================================================================ altbilgi */
.alt {
  position: relative;
  padding-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--koyu-metin-2);
  background-color: var(--renk-gece-950);
  background-image: radial-gradient(60% 40% at 0% 0%, rgba(25, 195, 214, 0.06), transparent 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* WhatsApp düğmesi varken sayfa sonu düğmenin altında kalmasın */
.alt--yuzen-pay {
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
}

.alt__ust {
  display: grid;
  gap: 2.75rem;
  padding-bottom: 3rem;
}

.alt__logo {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  border-radius: var(--yaricap-1);
  color: var(--koyu-metin);
  text-decoration: none;
}

.alt__logo .logo {
  display: block;
  width: auto;
  height: 1.75rem;
}

.alt__slogan {
  margin-top: 1.25rem;
  font-family: var(--yazi-baslik);
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--koyu-metin);
  text-wrap: balance;
}

/* slogan sonundaki nokta başlık yazısında geniş boşlukla çizilir (bilesenler.css .son ile aynı yaklaşma) */
.alt__slogan .son {
  margin-left: -0.09em;
}

.alt__cumle {
  max-width: 40ch;
  margin-top: 0.5rem;
}

.alt__iletisim {
  margin-top: 1.5rem;
  font-style: normal;
}

.alt__iletisim-liste {
  display: grid;
  gap: 0.125rem;
}

.alt__iletisim-bag {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.5rem;
  border-radius: var(--yaricap-1);
  color: var(--koyu-metin);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--gecis-hizli) var(--egri);
}

.alt__iletisim-bag:hover {
  color: var(--renk-turkuaz-200);
}

.alt__iletisim .ikon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--renk-turkuaz-300);
}

.alt__not {
  display: block;
  margin-top: -0.25rem;
  padding: 0 0 0.375rem 1.75rem;
  font-size: 0.8125rem;
  color: var(--koyu-metin-2);
}

.alt__adres {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5rem 0;
  color: var(--koyu-metin-2);
}

.alt__adres .ikon {
  margin-top: 0.1875rem;
}

.alt__menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 2.25rem 1.5rem;
}

.alt__sutun {
  min-width: 0;
}

.alt__baslik {
  display: flex;
  align-items: center;
  min-height: 1.5rem;
  margin-bottom: 0.75rem;
  font-family: var(--yazi-govde);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--koyu-metin);
}

.alt__baslik a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  border-radius: var(--yaricap-1);
  color: inherit;
  text-decoration: none;
}

.alt__baslik a:hover {
  color: var(--renk-turkuaz-200);
}

.alt__liste {
  display: grid;
  gap: 0.375rem;
}

.alt__bag {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.25rem 0;
  border: 0;
  border-radius: var(--yaricap-1);
  font: inherit;
  line-height: 1.35;
  text-align: left;
  color: var(--koyu-metin-2);
  background: none;
  text-decoration: none;
  transition: color var(--gecis-hizli) var(--egri);
}

.alt__bag:hover,
.alt__bag[aria-current="page"] {
  color: var(--koyu-metin);
}

.alt__alt {
  display: grid;
  gap: 1.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--kabuk-cizgi);
  font-size: 0.875rem;
}

.alt__yasal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}

.alt__telif {
  max-width: none;
  color: var(--koyu-metin-2);
}

.alt__araclar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.alt__sosyal {
  display: flex;
  gap: 0.5rem;
}

.alt__sosyal-bag {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--koyu-metin-2);
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--kabuk-cizgi);
  transition:
    color var(--gecis-hizli) var(--egri),
    background-color var(--gecis-hizli) var(--egri);
}

.alt__sosyal-bag:hover {
  color: var(--koyu-metin);
  background-color: rgba(255, 255, 255, 0.09);
}

.alt__sosyal-bag .ikon {
  width: 1.125rem;
  height: 1.125rem;
}

/* dokunmatik ekranda altbilgi bağlantıları 44px yüksekliğinde dokunma alanı. Sütun başlıkları (bağlantılı ya da
   değil) aynı yükseklikte; iki satıra sarılan bağlantıda da metinler arası boşluk tek satırlıdakiyle aynı kalır. */
@media (pointer: coarse) {
  .alt__baslik {
    min-height: 2.75rem;
    margin-bottom: 0.25rem;
  }

  .alt__baslik a,
  .alt__bag,
  .alt__iletisim-bag {
    min-height: 2.75rem;
  }

  .alt__liste .alt__bag {
    padding-block: calc((2.75rem - 1.35em) / 2);
  }

  .alt__liste {
    gap: 0;
  }
}

@media (min-width: 640px) {
  .alt__menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .alt__ust {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
    gap: 4rem;
    padding-bottom: 4rem;
  }

  .alt__alt {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "yasal araclar"
      "telif araclar";
    gap: 0.25rem 2rem;
    align-items: center;
  }

  .alt__yasal {
    grid-area: yasal;
  }

  .alt__telif {
    grid-area: telif;
  }

  .alt__araclar {
    grid-area: araclar;
    justify-content: flex-end;
  }
}

/* ================================================================ WhatsApp düğmesi */
.whatsapp-dugme {
  position: fixed;
  right: max(1rem, calc(env(safe-area-inset-right) + 0.75rem));
  bottom: max(1rem, calc(env(safe-area-inset-bottom) + 0.75rem));
  z-index: var(--z-yuzen);
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  color: var(--renk-gri-0);
  background-color: var(--whatsapp-yesil);
  box-shadow:
    0 10px 24px -8px rgba(7, 94, 84, 0.6),
    0 2px 6px rgba(6, 11, 22, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  text-decoration: none;
  animation: whatsapp-giris 400ms var(--egri) 600ms backwards;
  transition:
    transform var(--gecis) var(--egri),
    box-shadow var(--gecis) var(--egri),
    bottom var(--gecis) var(--egri),
    opacity var(--gecis-hizli) var(--egri),
    visibility 0s;
}

@keyframes whatsapp-giris {
  from {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.85);
  }
}

.whatsapp-dugme:hover {
  color: var(--renk-gri-0);
  transform: translateY(-2px);
  box-shadow:
    0 14px 30px -8px rgba(7, 94, 84, 0.7),
    0 3px 8px rgba(6, 11, 22, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* açık ve koyu zeminde görünen çift halka */
.whatsapp-dugme:focus-visible {
  outline: 2px solid transparent;
  box-shadow:
    0 0 0 3px var(--renk-gri-0),
    0 0 0 6px var(--renk-gece-900);
}

.whatsapp-dugme__ikon {
  width: 1.875rem;
  height: 1.875rem;
}

/* etiket: masaüstünde üzerine gelince ya da klavye odağında solda belirir */
.whatsapp-dugme__etiket {
  position: absolute;
  top: 50%;
  right: calc(100% + 0.75rem);
  padding: 0.5rem 0.75rem;
  border-radius: var(--yaricap-2);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--koyu-metin);
  background-color: var(--renk-gece-900);
  box-shadow: 0 8px 24px -8px rgba(3, 7, 15, 0.55), inset 0 0 0 1px var(--kabuk-cizgi);
  opacity: 0;
  transform: translate(0.375rem, -50%);
  pointer-events: none;
  transition: opacity var(--gecis-hizli) var(--egri), transform var(--gecis) var(--egri);
}

.whatsapp-dugme:focus-visible .whatsapp-dugme__etiket {
  opacity: 1;
  transform: translate(0, -50%);
}

@media (hover: hover) and (pointer: fine) {
  .whatsapp-dugme:hover .whatsapp-dugme__etiket {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

/* çerez bandı açıkken: 640px altında bant tam genişlik alttadır, düğme bandın üstüne kayar (analitik.js bandın
   güvenli alan dahil yüksekliğini --cerez-yukseklik ile verir). Geniş ekranda bant sol alttadır, düğme yerinde kalır. */
@media (max-width: 639.98px) {
  body[data-cerez-acik] .whatsapp-dugme {
    bottom: calc(var(--cerez-yukseklik, 12rem) + 0.75rem);
  }
}

/* mobil menü açıkken gizli */
html.menu-acik .whatsapp-dugme {
  visibility: hidden;
  opacity: 0;
}

/* ================================================================ beliriş (data-goster) */
/* cekirdek.js yalnız ilk ekranın altındaki öğelere "goster--bekliyor" koyar; JS yoksa ya da hareket azaltılmışsa
   hiçbir öğe gizlenmez. Beliriş bitince "goster--gorundu" de kaldırılır (bileşenin kendi geçişleri bozulmasın). */
.goster--bekliyor {
  opacity: 0;
  transform: translate3d(0, 1.125rem, 0);
}

.goster--gorundu {
  transition:
    opacity 700ms var(--egri),
    transform 700ms var(--egri);
}

.goster--gorundu[data-goster-gecikme="1"] {
  transition-delay: 90ms;
}

.goster--gorundu[data-goster-gecikme="2"] {
  transition-delay: 180ms;
}

.goster--gorundu[data-goster-gecikme="3"] {
  transition-delay: 270ms;
}

.goster--gorundu[data-goster-gecikme="4"] {
  transition-delay: 360ms;
}

@media (prefers-reduced-motion: reduce) {
  .goster--bekliyor {
    opacity: 1;
    transform: none;
  }

  /* giriş animasyonunun 600ms gecikmesi de olmasın: düğme sayfayla birlikte görünür */
  .whatsapp-dugme {
    animation: none;
  }
}

/* Hareket azaltılmışken temel.css bütün geçişleri 0.01ms yapar; "transition: all" (varsayılan) olan iç içe
   öğelerde devralınan görünürlük her katmanda bir kare gecikir. Panel ve menünün içinde geçiş hiç olmasın. */
@media (prefers-reduced-motion: reduce) {
  :is(.acilir-panel, .mobil-menu) * {
    transition: none !important;
  }
}

/* sayfa içi çapa hedefi (bölüm, form): odak yalnız ekran okuyucu ve sonraki Tab için; çerçeve çizilmez */
[data-capa-hedefi]:focus {
  outline: none;
}

/* ================================================================ yazdırma */
/* Arka plan basılmaz: koyu kabuk beyaz kâğıtta koyu metne döner; gezinme ve yüzen öğeler basılmaz. */
@media print {
  .ust,
  .alt {
    position: static;
    padding-block: 1rem;
    color: var(--renk-gece-900);
    background: none;
    box-shadow: none;
  }

  .ust__logo,
  .alt__logo,
  .alt__slogan,
  .alt__iletisim-bag,
  .alt__adres,
  .alt__telif {
    color: var(--renk-gece-900);
  }

  .alt__not {
    color: var(--renk-gri-600);
  }

  .alt__iletisim .ikon {
    color: var(--renk-turkuaz-700);
  }

  .ust__menu,
  .ust__eylemler,
  .mobil-menu,
  .yuzen,
  .atla,
  .alt__menu,
  .alt__cumle,
  .alt__yasal,
  .alt__araclar {
    display: none !important;
  }

  .alt__ust {
    padding-bottom: 1rem;
  }

  .ust ~ .ana-icerik > :is(.hero, .bolum--koyu):first-child {
    margin-top: 0;
    border-top: 0;
  }

  .goster--bekliyor {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== css/gorseller-telefon.css ===== */
/*
 * Razbin — gorseller-telefon.css: mobil uygulamanın ekran maketleri (sablonlar/gorseller/tlf-*.html).
 * Sahibi: Telefon görselleri (belgeler/SOZLESME.md bölüm 3 ve 9). Kullanım ve parça listesi: belgeler/GORSELLER_TELEFON.md
 *
 * Ölçek: .tlf kökü bir kapsayıcıdır (container-type: inline-size). Çerçeve cqi ve yüzdeyle, ekranın içi em ile kurulur.
 * Ekranın taban yazı boyu 10 tasarım noktasıdır (ekran 390 nokta genişliğinde tasarlandı): 1em = 10 nokta; bu boy kap
 * genişliğinden kap sorgusu adımlarıyla gelir (aşağıda). Böylece her genişlikte bütün oranlar korunur. Kap sorgusu
 * bilmeyen tarayıcı (iOS 15) 340 px'lik telefonun ölçüsünü kullanır (dar ekranda ekran genişliğine göre küçülür).
 * Grafikler satır içi SVG'dir; geometrileri örnek veriden hesaplandı (GORSELLER_TELEFON.md "Grafik geometrisi").
 * SVG içinde kimlik (id) yok: aynı parça bir sayfada birkaç kez kullanılabilir. Satır içi style özniteliği de yok (CSP).
 */

/* ------------------------------------------------------------------ yerel belirteçler (temel.css'teki belirteçlerden) */
.tlf,
.tlf-ikili {
  /* uygulama teması: koyu gece mavisi + turkuaz */
  --tlf-zemin: var(--renk-gece-950);
  --tlf-ust: var(--renk-gece-900);
  --tlf-kart: var(--renk-gece-800);
  --tlf-secili: var(--renk-gece-600);
  --tlf-cizgi: rgba(255, 255, 255, 0.07);          /* beyaz %7: kart kenarı, ayraç */
  --tlf-cizgi-2: rgba(255, 255, 255, 0.11);        /* beyaz %11: ızgara çizgisi, düğme kenarı */
  --tlf-dolgu: rgba(255, 255, 255, 0.05);          /* beyaz %5: düğme zemini */
  --tlf-yazi: var(--koyu-metin);
  --tlf-yazi-2: var(--koyu-metin-2);
  --tlf-yazi-3: var(--renk-gri-400);               /* soluk yazı: kart zemininde 6.3:1 */
  --tlf-vurgu: var(--renk-turkuaz-400);
  --tlf-vurgu-yazi: var(--renk-turkuaz-300);
  --tlf-vurgu-zemin: rgba(25, 195, 214, 0.14);     /* turkuaz-500 %14 */
  /* grafik (dataviz denetimi, kart zemini gece-800; ayrıntı GORSELLER_TELEFON.md): tek seri turkuaz-600 (OKLCH L 0,65,
     koyu bantta, 5,3:1). Vurgulu grafikte öne çıkan işaret turkuaz-400 (9:1), geri kalanı turkuaz-700 (3,4:1);
     ikisinin farkı ΔE 25 (renk körlüğü benzetiminde de 24+) */
  --tlf-seri: var(--renk-turkuaz-600);
  --tlf-seri-soluk: rgba(14, 162, 180, 0.22);      /* turkuaz-600 %22: süren dönemin dolgusu */
  --tlf-seri-vurgu: var(--renk-turkuaz-400);
  --tlf-baglam: var(--renk-turkuaz-700);
  /* durum renkleri: her zaman simge ya da yazıyla birlikte */
  --tlf-iyi: var(--renk-yesil-500);
  --tlf-iyi-zemin: rgba(34, 197, 94, 0.14);        /* yesil-500 %14 */
  --tlf-uyari: var(--renk-amber-400);
  --tlf-uyari-zemin: rgba(251, 191, 36, 0.13);     /* amber-400 %13 */
  --tlf-kotu: var(--renk-kirmizi-500);
  --tlf-kotu-zemin: rgba(239, 68, 68, 0.15);       /* kirmizi-500 %15 */
  --tlf-canli: var(--renk-kirmizi-600);            /* CANLI rozeti: beyaz yazıyla 4.8:1 */
  /* donanım (cihaz gövdesi): cam ve ada gerçek cihazdaki gibi siyah, metal kenar gece mavisi */
  --tlf-cam: #000;
  --tlf-ada: #000;
  --tlf-metal-1: var(--renk-gri-500);
  --tlf-metal-2: var(--renk-gece-700);
  --tlf-metal-3: var(--renk-gece-900);
  --tlf-golge: 0 0.6em 1.4em -0.2em rgba(11, 20, 38, 0.30), 0 3.4em 6em -1.6em rgba(11, 20, 38, 0.42);
  --tlf-golge-koyu: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 3.4em 7em -2em rgba(0, 0, 0, 0.65),
    0 0 7em -1.5em rgba(25, 195, 214, 0.30);
}

/* ------------------------------------------------------------------ kök ve cihaz */
.tlf {
  container-type: inline-size;
  contain-intrinsic-inline-size: 340px;            /* genişliği içerikten alan kapta (flex, inline-block) çökmez */
  position: relative;
  display: block;
  width: 100%;
  max-width: var(--tlf-genislik, 340px);
  margin: 0 auto;
  padding: 0;
  line-height: 1.3;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.tlf *,
.tlf *::before,
.tlf *::after {
  box-sizing: border-box;
}
/* Değiştiriciler parçayı saran kaba da konabilir: <div class="tlf--egik">{{> gorseller/tlf-kasa}}</div> */
.tlf--kucuk {
  --tlf-genislik: 260px;
}

/* gövde: metal kenar (border, degrade) + siyah cam (zemin) + ekran. Yan düğmeler için yanlarda %1,2 pay. */
.tlf__govde {
  position: relative;
  margin: 0 1.2%;
  aspect-ratio: 9 / 19.5;
  padding: 1.9%;
  border: 3px solid transparent;
  border-width: 0.9cqi;
  border-radius: 50px;
  border-radius: 14.6cqi;
  background:
    linear-gradient(var(--tlf-cam), var(--tlf-cam)) padding-box,
    linear-gradient(150deg, var(--tlf-metal-1) 0%, var(--tlf-metal-3) 22%, var(--tlf-metal-2) 48%, var(--tlf-metal-3) 76%, var(--tlf-metal-1) 100%) border-box;
  box-shadow: var(--tlf-golge);
  /* kap sorgusu bilmeyen tarayıcı: 340 px telefonun boyu; dar ekranda telefon ekranın ~%90'ı (320 px'te 288 px) */
  font-size: min(8.021px, 2.12vw);
}
/* Taban yazı boyu = kap genişliği × 0,02359 (ekran genişliğinin 1/39'u: 1em = 10 tasarım noktası). cqi yerine 10 px'lik
   kap sorgusu adımlarıyla verilir (her adım kendi alt sınırına göre; ölçek farkı en çok %4, yazı hiç büyümez):
   Chrome'un tam sayfa ekran görüntüsünde (captureBeyondViewport) cqi ile verilen yazı boyu metni kaybettiriyor. */
@container (min-width: 150px) { .tlf__govde { font-size: 3.538px; } }
@container (min-width: 160px) { .tlf__govde { font-size: 3.774px; } }
@container (min-width: 170px) { .tlf__govde { font-size: 4.010px; } }
@container (min-width: 180px) { .tlf__govde { font-size: 4.246px; } }
@container (min-width: 190px) { .tlf__govde { font-size: 4.482px; } }
@container (min-width: 200px) { .tlf__govde { font-size: 4.718px; } }
@container (min-width: 210px) { .tlf__govde { font-size: 4.954px; } }
@container (min-width: 220px) { .tlf__govde { font-size: 5.190px; } }
@container (min-width: 230px) { .tlf__govde { font-size: 5.426px; } }
@container (min-width: 240px) { .tlf__govde { font-size: 5.662px; } }
@container (min-width: 250px) { .tlf__govde { font-size: 5.897px; } }
@container (min-width: 260px) { .tlf__govde { font-size: 6.133px; } }
@container (min-width: 270px) { .tlf__govde { font-size: 6.369px; } }
@container (min-width: 280px) { .tlf__govde { font-size: 6.605px; } }
@container (min-width: 290px) { .tlf__govde { font-size: 6.841px; } }
@container (min-width: 300px) { .tlf__govde { font-size: 7.077px; } }
@container (min-width: 310px) { .tlf__govde { font-size: 7.313px; } }
@container (min-width: 320px) { .tlf__govde { font-size: 7.549px; } }
@container (min-width: 330px) { .tlf__govde { font-size: 7.785px; } }
@container (min-width: 340px) { .tlf__govde { font-size: 8.021px; } }
@container (min-width: 350px) { .tlf__govde { font-size: 8.256px; } }
@container (min-width: 360px) { .tlf__govde { font-size: 8.492px; } }
@container (min-width: 370px) { .tlf__govde { font-size: 8.728px; } }
@container (min-width: 380px) { .tlf__govde { font-size: 8.964px; } }
@container (min-width: 390px) { .tlf__govde { font-size: 9.200px; } }
@container (min-width: 400px) { .tlf__govde { font-size: 9.436px; } }
@container (min-width: 420px) { .tlf__govde { font-size: 9.908px; } }
@container (min-width: 440px) { .tlf__govde { font-size: 10.380px; } }
@container (min-width: 460px) { .tlf__govde { font-size: 10.851px; } }
@container (min-width: 480px) { .tlf__govde { font-size: 11.323px; } }
@container (min-width: 500px) { .tlf__govde { font-size: 11.795px; } }
@container (min-width: 520px) { .tlf__govde { font-size: 12.267px; } }
/* sol: eylem + ses düğmeleri, sağ: güç düğmesi */
.tlf__govde::before,
.tlf__govde::after {
  content: "";
  position: absolute;
  width: 3px;
  width: 0.95cqi;
  border-radius: 1px 0 0 1px;
  background: linear-gradient(90deg, var(--tlf-metal-2), var(--tlf-metal-1));
}
.tlf__govde::before {
  left: -5px;
  left: -1.85cqi;
  top: 16%;
  height: 3.2%;
  box-shadow: 0 30px 0 0 var(--tlf-metal-2), 0 58px 0 0 var(--tlf-metal-2);
  box-shadow: 0 9cqi 0 0 var(--tlf-metal-2), 0 17cqi 0 0 var(--tlf-metal-2);
}
.tlf__govde::after {
  right: -5px;
  right: -1.85cqi;
  top: 25%;
  height: 9%;
  border-radius: 0 1px 1px 0;
  background: linear-gradient(270deg, var(--tlf-metal-2), var(--tlf-metal-1));
}

.tlf__ekran {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 40px;
  border-radius: 11.8cqi;
  background:
    radial-gradient(120% 45% at 85% -8%, rgba(25, 195, 214, 0.16), rgba(25, 195, 214, 0) 60%),
    var(--tlf-zemin);
  color: var(--tlf-yazi);
  font-family: var(--yazi-govde);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  word-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  isolation: isolate;
}
/* camın hafif parıltısı */
.tlf__ekran::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 32%);
}
.tlf__ada {
  position: absolute;
  z-index: 30;
  top: 1.1em;
  left: 50%;
  width: 12.4em;
  height: 3.6em;
  margin-left: -6.2em;
  border-radius: 2em;
  background: radial-gradient(circle at 80% 50%, var(--renk-gece-700) 0 0.45em, var(--tlf-ada) 0.75em);
}

/* gölge ve 3B eğim */
.tlf--golgesiz .tlf__govde {
  box-shadow: none;
}
.bolum--koyu .tlf__govde,
.hero .tlf__govde,
.cagri .tlf__govde,
.kart--koyu .tlf__govde {
  box-shadow: var(--tlf-golge-koyu);
}
.bolum--koyu .tlf--golgesiz .tlf__govde,
.hero .tlf--golgesiz .tlf__govde,
.cagri .tlf--golgesiz .tlf__govde,
.kart--koyu .tlf--golgesiz .tlf__govde {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}
/* eğim: küçültülmüş (scale) olduğu için eğik telefon kabının dışına taşmaz */
.tlf--egik .tlf__govde {
  transform: perspective(2400px) rotateX(7deg) rotateY(-16deg) rotateZ(2deg) scale(0.92);
  transition: transform 700ms var(--egri);
}
.tlf--egik:hover .tlf__govde {
  transform: perspective(2400px) rotateX(3deg) rotateY(-7deg) rotateZ(1deg) scale(0.94);
}

/* ------------------------------------------------------------------ uygulama düzeni */
.tlf-uyg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.tlf-i {
  display: block;
  flex: none;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tlf-i--dolu {
  fill: currentColor;
  stroke: none;
}

/* durum çubuğu */
.tlf__durum {
  position: relative;
  z-index: 13;                                     /* alt sayfanın perdesi durum çubuğunu karartmaz */
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 5.2em;
  padding: 0.5em 2.4em 0;
  color: var(--tlf-yazi);
}
.tlf__saat {
  width: 9em;
  font-size: 1.6em;
  font-weight: 600;
  text-align: center;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.tlf__durum-ikon {
  display: block;
  width: 7.8em;
  height: 1.4em;
  padding: 0 0.4em;
  fill: currentColor;
}
.tlf__durum-ikon .tlf-s-wifi {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.tlf__durum-ikon .tlf-s-soluk {
  opacity: 0.45;
}
.tlf__ev {
  position: absolute;
  z-index: 25;
  bottom: 0.8em;
  left: 50%;
  width: 13.4em;
  height: 0.5em;
  margin-left: -6.7em;
  border-radius: 1em;
  background: var(--tlf-yazi);
  opacity: 0.75;
}

/* üst alan: mağaza seçici, zil, hesap, Gün / Hafta / Ay, tarih */
.tlf-ust {
  flex: none;
  padding: 0.4em 1.6em 1.2em;
}
.tlf-ust__satir {
  display: flex;
  align-items: center;
  gap: 0.8em;
  height: 4.6em;
}
.tlf-magaza {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.9em;
  min-width: 0;
}
.tlf-magaza__ikon {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  border-radius: 1.05em;
  background: linear-gradient(140deg, var(--renk-turkuaz-300), var(--renk-turkuaz-600));
  color: var(--renk-gece-950);
  font-size: 1em;
  box-shadow: 0 0.4em 1.2em -0.3em rgba(25, 195, 214, 0.55);
}
.tlf-magaza__ikon .tlf-i {
  width: 2em;
  height: 2em;
  stroke-width: 2.1;
}
.tlf-magaza__ad {
  overflow: hidden;
  font-size: 1.7em;
  font-weight: 700;
  letter-spacing: -0.015em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tlf-magaza__ok {
  width: 1.5em;
  height: 1.5em;
  margin-left: -0.3em;
  color: var(--tlf-yazi-3);
  stroke-width: 2.4;
}
.tlf-ust__dugme {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 3.8em;
  height: 3.8em;
  border: 1px solid var(--tlf-cizgi);
  border-radius: 50%;
  background: var(--tlf-dolgu);
  color: var(--tlf-yazi);
}
.tlf-ust__dugme .tlf-i {
  width: 2em;
  height: 2em;
}
.tlf-zil__rozet {
  position: absolute;
  top: -0.3em;
  right: -0.35em;
  display: grid;
  place-items: center;
  min-width: 1.75em;
  height: 1.75em;
  padding: 0 0.45em;
  border-radius: 1em;
  background: var(--tlf-canli);
  box-shadow: 0 0 0 0.25em var(--tlf-zemin);
  color: var(--renk-gri-0);
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1;
}
.tlf-ust__alt {
  display: flex;
  gap: 0.8em;
  margin-top: 1em;
}
.tlf-donem,
.tlf-tarih {
  display: flex;
  align-items: center;
  padding: 0.3em;
  border: 1px solid var(--tlf-cizgi);
  border-radius: 1.3em;
  background: var(--tlf-dolgu);
}
.tlf-donem {
  flex: 1;
}
.tlf-donem__oge {
  flex: 1;
  height: 2.3em;
  border-radius: 0.72em;
  color: var(--tlf-yazi-3);
  font-size: 1.35em;
  font-weight: 600;
  line-height: 2.3em;
  text-align: center;
}
.tlf-donem__oge--secili {
  background: var(--tlf-secili);
  box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--tlf-yazi);
}
.tlf-tarih {
  flex: none;
  gap: 0.1em;
}
.tlf-tarih__ok {
  display: grid;
  place-items: center;
  width: 2.8em;
  height: 3.1em;
  color: var(--tlf-yazi-2);
}
.tlf-tarih__ok .tlf-i {
  width: 1.5em;
  height: 1.5em;
  stroke-width: 2.4;
}
.tlf-tarih__ok--kapali {
  opacity: 0.35;
}
.tlf-tarih__ad {
  padding: 0 0.2em;
  font-size: 1.35em;
  font-weight: 650;
}

/* içerik */
.tlf-icerik {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1em;
  min-height: 0;
  padding: 0 1.6em;
  overflow: hidden;
}
.tlf-sayfa-bas {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.8em;
  margin: 0.1em 0 0.1em;
}
.tlf-sayfa-bas .tlf-ust__dugme {
  width: 3.4em;
  height: 3.4em;
}
.tlf-sayfa-bas .tlf-i {
  width: 1.7em;
  height: 1.7em;
  stroke-width: 2.4;
}
.tlf-sayfa-bas__ad {
  font-size: 2.1em;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* kart */
.tlf-kart {
  flex: none;
  padding: 1.4em 1.4em 1.5em;
  border: 1px solid var(--tlf-cizgi);
  border-radius: 1.8em;
  background: var(--tlf-kart);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.tlf-kart__bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
  min-height: 2.2em;
  margin-bottom: 0.8em;
}
.tlf-kart__baslik {
  font-size: 1.3em;
  font-weight: 600;
  color: var(--tlf-yazi-2);
}
.tlf-kart__ek {
  font-size: 1.15em;
  color: var(--tlf-yazi-3);
  white-space: nowrap;
}
.tlf-kart__ek b {
  color: var(--tlf-yazi);
  font-weight: 650;
}

/* canlı işareti */
.tlf-canli {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.45em;
  padding: 0.3em 0.75em 0.3em 0.6em;
  border-radius: 1em;
  background: var(--tlf-vurgu-zemin);
  color: var(--tlf-vurgu-yazi);
  font-size: 1.1em;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tlf-canli__nokta {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--tlf-vurgu);
  box-shadow: 0 0 0 0.22em rgba(56, 211, 227, 0.22);
  animation: tlf-nabiz 2.4s ease-in-out infinite;
}
@keyframes tlf-nabiz {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* büyük sayı ve değişim */
.tlf-sayi {
  font-size: 4.3em;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--renk-gri-0);
}
.tlf-birim {
  margin-left: 0.3em;
  font-size: 1.5em;
  font-weight: 500;
  color: var(--tlf-yazi-2);
}
.tlf-zo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 1em;
}
.tlf-zo > .tlf-kart__bas,
.tlf-zo > .tlf-zo__kiyas {
  grid-column: 1 / -1;
}
.tlf-zo__alt {
  margin-top: 0.55em;
  font-size: 1.15em;
  color: var(--tlf-yazi-3);
}
.tlf-zo__sag {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.7em;
  padding-bottom: 0.15em;
}
.tlf-degisim {
  display: flex;
  align-items: center;
  gap: 0.55em;
  white-space: nowrap;
}
.tlf-degisim__yuzde {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 0.2em 0.5em 0.2em 0.35em;
  border-radius: 0.6em;
  background: var(--tlf-iyi-zemin);
  color: var(--tlf-iyi);
  font-size: 1.2em;
  font-weight: 700;
}
.tlf-degisim__yuzde .tlf-i {
  width: 0.95em;
  height: 0.95em;
  stroke-width: 2.8;
}
.tlf-degisim__ad {
  font-size: 1.1em;
  color: var(--tlf-yazi-3);
}

/* aynı saate kadar kıyasın tabanları (dün, geçen hafta) */
.tlf-zo__kiyas {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3em 1.1em;
  margin-top: 1.2em;
  padding-top: 1.05em;
  border-top: 1px solid var(--tlf-cizgi);
  font-size: 1.12em;
  color: var(--tlf-yazi-3);
}
.tlf-zo__kiyas > span:first-child {
  flex: 1;
  white-space: nowrap;
}
.tlf-zo__kiyas b {
  margin-left: 0.2em;
  color: var(--tlf-yazi);
  font-weight: 650;
}

/* KPI kutuları */
.tlf-kpiler {
  display: grid;
  flex: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1em;
}
.tlf-kpi {
  padding: 1.25em 1.3em 1.35em;
  border: 1px solid var(--tlf-cizgi);
  border-radius: 1.8em;
  background: var(--tlf-kart);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.tlf-kpi__bas {
  display: flex;
  align-items: center;
  gap: 0.65em;
}
.tlf-kpi__ikon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.7em;
  height: 2.7em;
  border-radius: 0.85em;
  background: var(--tlf-vurgu-zemin);
  color: var(--tlf-vurgu-yazi);
}
.tlf-kpi__ikon .tlf-i {
  width: 1.55em;
  height: 1.55em;
}
.tlf-kpi__ad {
  display: -webkit-box;
  overflow: hidden;
  font-size: 1.15em;
  font-weight: 500;
  line-height: 1.2;
  color: var(--tlf-yazi-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.tlf-kpi__deger {
  margin-top: 0.4em;
  font-size: 2.6em;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  white-space: nowrap;
}
.tlf-kpi__birim {
  margin: 0 0.12em 0 0.2em;
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--tlf-yazi-3);
}
.tlf-kpi__alt {
  margin-top: 0.3em;
  overflow: hidden;
  font-size: 1.1em;
  color: var(--tlf-yazi-3);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* üç ölçüt (Kasa) */
.tlf-uclu {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.9fr);
  margin-top: 1.3em;
  padding-top: 1.2em;
  border-top: 1px solid var(--tlf-cizgi);
}
.tlf-uclu__oge {
  min-width: 0;
  padding: 0 0.8em;
  border-left: 1px solid var(--tlf-cizgi);
}
.tlf-uclu__oge:first-child {
  padding-left: 0;
  border-left: 0;
}
.tlf-uclu__ad {
  min-height: 2.5em;
  font-size: 1.05em;
  line-height: 1.25;
  color: var(--tlf-yazi-3);
}
.tlf-uclu__deger {
  margin-top: 0.3em;
  font-size: 1.75em;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.tlf-uclu__deger .tlf-kpi__birim {
  font-size: 0.62em;
}
.tlf-uclu__alt {
  margin-top: 0.15em;
  font-size: 1.05em;
  line-height: 1.25;
  color: var(--tlf-yazi-3);
}

/* grafik (satır içi SVG; yazı boyları SVG birimiyle) */
.tlf-g {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.tlf-g__izgara,
.tlf-g__taban {
  fill: none;
  stroke: var(--tlf-cizgi-2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.tlf-g__taban {
  stroke: rgba(255, 255, 255, 0.2);
}
.tlf-g__eksen {
  fill: var(--tlf-yazi-3);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
}
.tlf-g__deger {
  fill: var(--tlf-yazi);
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tlf-g__deger--soluk {
  fill: var(--tlf-yazi-2);
  font-weight: 600;
}
.tlf-g__cubuk {
  fill: var(--tlf-seri);
}
.tlf-g__cubuk--baglam {
  fill: var(--tlf-baglam);
}
.tlf-g__cubuk--vurgu {
  fill: var(--tlf-seri-vurgu);
}
/* süren dönem (bugün / bu saat): soluk dolgu + 45° tarama; anlamı "Sürüyor" anahtarında yazılı */
.tlf-g__kismi {
  fill: var(--tlf-seri-soluk);
}
.tlf-g__kismi--vurgu {
  fill: rgba(56, 211, 227, 0.22);                  /* turkuaz-400 %22 */
}
.tlf-g__kismi--baglam {
  fill: rgba(11, 127, 142, 0.3);                   /* turkuaz-700 %30 */
}
.tlf-g__tarama {
  fill: none;
  stroke: var(--tlf-seri);
  stroke-width: 1.3;
}
.tlf-g__tarama--vurgu {
  stroke: var(--tlf-seri-vurgu);
}
.tlf-g__tarama--baglam {
  stroke: var(--tlf-baglam);
}
.tlf-g__alan {
  fill: var(--tlf-seri);
  fill-opacity: 0.12;
}
.tlf-g__cizgi {
  fill: none;
  stroke: var(--tlf-seri);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tlf-g__cizgi--suruyor {
  stroke-dasharray: 2.5 4;
}
.tlf-g__nokta {
  fill: var(--tlf-seri);
  stroke: var(--tlf-kart);
  stroke-width: 2;
}
.tlf-g__nokta--bos {
  fill: var(--tlf-kart);
  stroke: var(--tlf-seri);
}

/* grafik anahtarı (tek seri: lejant kutusu yok; yalnız "sürüyor" işaretinin anlamı) */
.tlf-anahtar {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 1.1em;
  color: var(--tlf-yazi-3);
  white-space: nowrap;
}
.tlf-anahtar__tarama {
  width: 1em;
  height: 1em;
  border-radius: 0.2em;
  background: repeating-linear-gradient(135deg, var(--tlf-seri) 0 0.13em, var(--tlf-seri-soluk) 0.13em 0.36em);
}
.tlf-anahtar__kesik {
  width: 1.6em;
  height: 0;
  border-top: 0.18em dashed var(--tlf-seri);
}

/* alt sekmeler */
.tlf-sekmeler {
  position: absolute;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  height: 8.6em;
  padding: 0 0.6em 2.5em;
  border-top: 1px solid var(--tlf-cizgi);
  background: var(--tlf-ust);
  box-shadow: 0 -1.2em 2.4em rgba(6, 11, 22, 0.7);
}
.tlf-sekme {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  min-width: 0;
  color: var(--tlf-yazi-3);
}
.tlf-sekme .tlf-i {
  width: 2.3em;
  height: 2.3em;
  stroke-width: 1.8;
}
.tlf-sekme__ad {
  max-width: 100%;
  overflow: hidden;
  font-size: 1.05em;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tlf-uyg--magazam .tlf-sekme--magazam,
.tlf-uyg--kasa .tlf-sekme--kasa,
.tlf-uyg--gorunum .tlf-sekme--gorunum {
  color: var(--tlf-vurgu-yazi);
}
.tlf-uyg--magazam .tlf-sekme--magazam::before,
.tlf-uyg--kasa .tlf-sekme--kasa::before,
.tlf-uyg--gorunum .tlf-sekme--gorunum::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 3.2em;
  height: 0.3em;
  margin-left: -1.6em;
  border-radius: 0 0 0.3em 0.3em;
  background: var(--tlf-vurgu);
  box-shadow: 0 0.2em 1em rgba(56, 211, 227, 0.55);
}

/* ------------------------------------------------------------------ an karesi (Kasa: en kalabalık an, Açılış: açılış anı) */
.tlf-kare {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 1.1em;
  background: linear-gradient(180deg, var(--renk-gece-800), var(--renk-gece-900));
}
.tlf-kare::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 60% at 70% 10%, rgba(165, 240, 246, 0.20), rgba(165, 240, 246, 0) 70%),
    radial-gradient(30% 40% at 18% 30%, rgba(251, 191, 36, 0.10), rgba(251, 191, 36, 0) 70%);
}
.tlf-kare--genis {
  aspect-ratio: 12 / 5;
}
.tlf-oynat-hap {
  position: absolute;
  z-index: 2;
  right: 0.7em;
  bottom: 0.7em;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.75em 0.35em 0.55em;
  border-radius: 1em;
  background: rgba(6, 11, 22, 0.78);
  color: var(--renk-gri-0);
  font-size: 1.15em;
  font-weight: 600;
}
.tlf-oynat-hap .tlf-i {
  width: 0.95em;
  height: 0.95em;
}
.tlf-an__bas {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.9em;
}
.tlf-an__saat {
  font-size: 1.3em;
  font-weight: 650;
  color: var(--tlf-yazi);
  font-variant-numeric: tabular-nums;
}
.tlf-an__saat span {
  font-weight: 500;
  color: var(--tlf-yazi-3);
}

/* ------------------------------------------------------------------ soyut kamera sahneleri (kişi yok: yuvarlak işaret) */
.tlf-sahne {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.tlf-s__duvar { fill: var(--renk-gece-800); }
.tlf-s__duvar-2 { fill: var(--renk-gece-900); }
.tlf-s__zemin { fill: var(--renk-gece-950); }
.tlf-s__cizgi { fill: none; stroke: rgba(255, 255, 255, 0.06); stroke-width: 0.6; }
.tlf-s__cerceve { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 0.8; }
.tlf-s__isik { fill: var(--renk-turkuaz-200); fill-opacity: 0.22; }
.tlf-s__isik-2 { fill: var(--renk-turkuaz-200); fill-opacity: 0.06; }
.tlf-s__dolap { fill: var(--renk-gece-700); }
.tlf-s__ust { fill: var(--renk-gece-600); }
.tlf-s__ekran { fill: var(--renk-turkuaz-300); fill-opacity: 0.55; }
.tlf-s__urun { fill: none; stroke-width: 2.6; stroke-dasharray: 3 1.4 5 2 2.5 1.6; }
.tlf-s__urun--1 { stroke: rgba(56, 211, 227, 0.32); }
.tlf-s__urun--2 { stroke: rgba(251, 191, 36, 0.26); }
.tlf-s__urun--3 { stroke: rgba(96, 165, 250, 0.30); }
.tlf-s__perde { fill: var(--renk-turkuaz-800); fill-opacity: 0.75; }
.tlf-s__perde-kivrim { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 0.7; }
.tlf-s__kepenk { fill: var(--renk-gece-600); }
.tlf-s__kepenk-cizgi { fill: none; stroke: rgba(0, 0, 0, 0.35); stroke-width: 0.8; }
.tlf-s__hale { fill: var(--renk-turkuaz-300); fill-opacity: 0.22; }
.tlf-s__kisi { fill: var(--renk-turkuaz-200); }

/* ------------------------------------------------------------------ Bildirimler (alt sayfa) */
.tlf-perde {
  position: absolute;
  inset: 0;
  z-index: 12;
  background: rgba(3, 6, 12, 0.66);
}
.tlf-alt-sayfa {
  position: absolute;
  z-index: 14;
  right: 0;
  bottom: 0;
  left: 0;
  top: 47%;
  padding: 0.8em 1.6em 3em;
  border-top: 1px solid var(--tlf-cizgi-2);
  border-radius: 2.4em 2.4em 0 0;
  background: var(--tlf-ust);
  box-shadow: 0 -2em 4em rgba(0, 0, 0, 0.5);
}
.tlf-alt-sayfa__tutamak {
  width: 4.2em;
  height: 0.5em;
  margin: 0 auto 1.2em;
  border-radius: 1em;
  background: var(--tlf-cizgi-2);
}
.tlf-alt-sayfa__bas {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-bottom: 0.6em;
}
.tlf-alt-sayfa__baslik {
  flex: 1;
  font-size: 2.1em;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.tlf-alt-sayfa__bas .tlf-ust__dugme {
  width: 3.4em;
  height: 3.4em;
}
.tlf-alt-sayfa__bas .tlf-i {
  width: 1.7em;
  height: 1.7em;
}
.tlf-rozet {
  padding: 0.25em 0.7em;
  border-radius: 1em;
  background: var(--tlf-vurgu-zemin);
  color: var(--tlf-vurgu-yazi);
  font-size: 1.1em;
  font-weight: 650;
  white-space: nowrap;
}
.tlf-grup {
  margin: 1.4em 0.2em 0.7em;
  font-size: 1.1em;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--tlf-yazi-3);
}
.tlf-bildirim {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.1em;
  margin-bottom: 0.7em;
  padding: 1.15em 1.2em;
  border: 1px solid var(--tlf-cizgi);
  border-radius: 1.5em;
  background: var(--tlf-kart);
}
.tlf-bildirim--yeni {
  border-color: rgba(56, 211, 227, 0.28);
  background: linear-gradient(90deg, rgba(25, 195, 214, 0.12), rgba(25, 195, 214, 0.04)), var(--tlf-kart);
}
.tlf-bildirim__ikon {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  border-radius: 1.1em;
}
.tlf-bildirim__ikon .tlf-i {
  width: 1.9em;
  height: 1.9em;
}
.tlf-bildirim--uyari .tlf-bildirim__ikon {
  background: var(--tlf-uyari-zemin);
  color: var(--tlf-uyari);
}
.tlf-bildirim--kotu .tlf-bildirim__ikon {
  background: var(--tlf-kotu-zemin);
  color: var(--tlf-kotu);
}
.tlf-bildirim__govde {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.3em;
  min-width: 0;
}
.tlf-bildirim__magaza {
  font-size: 1.05em;
  font-weight: 650;
  letter-spacing: 0.03em;
  color: var(--tlf-yazi-3);
}
.tlf-bildirim__baslik {
  font-size: 1.4em;
  font-weight: 600;
  line-height: 1.28;
  color: var(--tlf-yazi);
}
.tlf-bildirim__saat {
  flex: none;
  padding-top: 0.1em;
  font-size: 1.15em;
  font-weight: 600;
  color: var(--tlf-yazi-3);
  font-variant-numeric: tabular-nums;
}
.tlf-bildirim--yeni .tlf-bildirim__saat {
  color: var(--tlf-vurgu-yazi);
}
.tlf-bildirim--yeni::after {
  content: "";
  position: absolute;
  right: 1.3em;
  bottom: 1.4em;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  background: var(--tlf-vurgu);
  box-shadow: 0 0 0 0.25em rgba(56, 211, 227, 0.2);
}

/* ------------------------------------------------------------------ Canlı görünüm (oynatıcı, temadan bağımsız koyu) */
.tlf-uyg--canli {
  background: var(--renk-gece-950);
}
.tlf-oyn__ust {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.8em;
  padding: 0.6em 1.6em 1.2em 1.2em;
}
.tlf-oyn__ust .tlf-ust__dugme {
  width: 3.4em;
  height: 3.4em;
  border: 0;
  background: transparent;
}
.tlf-oyn__ust .tlf-ust__dugme .tlf-i {
  width: 2em;
  height: 2em;
  stroke-width: 2.3;
}
.tlf-oyn__baslik {
  flex: 1;
  min-width: 0;
}
.tlf-oyn__ad {
  font-size: 1.7em;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.tlf-oyn__alt {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.3em;
  font-size: 1.15em;
  color: var(--tlf-yazi-3);
}
.tlf-oyn__saat {
  font-size: 1.45em;
  font-weight: 600;
  color: var(--tlf-yazi);
  font-variant-numeric: tabular-nums;
}
.tlf-canli-rozet {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.12em 0.5em 0.12em 0.4em;
  border-radius: 0.4em;
  background: var(--tlf-canli);
  color: var(--renk-gri-0);
  font-size: 0.85em;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.tlf-canli-rozet::before {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--renk-gri-0);
  animation: tlf-nabiz 1.8s ease-in-out infinite;
}
.tlf-izgara {
  display: grid;
  flex: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3em;
}
.tlf-karo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, var(--renk-gece-800), var(--renk-gece-900));
}
.tlf-karo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 55% at 50% 0%, rgba(165, 240, 246, 0.16), rgba(165, 240, 246, 0) 70%),
    linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0) 45%);
}
.tlf-karo--kasa::after {
  background:
    radial-gradient(40% 55% at 78% 8%, rgba(165, 240, 246, 0.18), rgba(165, 240, 246, 0) 70%),
    linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0) 45%);
}
.tlf-karo--reyon::after {
  background:
    radial-gradient(30% 50% at 52% 12%, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0) 70%),
    linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0) 45%);
}
.tlf-karo__canli {
  position: absolute;
  z-index: 2;
  top: 0.6em;
  left: 0.6em;
}
.tlf-karo__ad {
  position: absolute;
  z-index: 2;
  right: 0.7em;
  bottom: 0.55em;
  left: 0.8em;
  overflow: hidden;
  font-size: 1.15em;
  font-weight: 650;
  color: var(--renk-gri-0);
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.tlf-oyn__arac {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
  padding: 1.8em 1.6em 0.6em;
}
.tlf-duzen {
  display: flex;
  gap: 0.3em;
  padding: 0.3em;
  border-radius: 1.3em;
  background: rgba(255, 255, 255, 0.07);
}
.tlf-duzen__oge {
  display: grid;
  place-items: center;
  width: 4.6em;
  height: 3.4em;
  border-radius: 1em;
  color: var(--tlf-yazi-2);
}
.tlf-duzen__oge .tlf-i {
  width: 1.9em;
  height: 1.9em;
  stroke-width: 1.8;
}
.tlf-duzen__oge--secili {
  background: var(--renk-gri-0);
  color: var(--renk-gece-950);
}
.tlf-arac-dugme {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  height: 4em;
  padding: 0 1.3em;
  border-radius: 1.3em;
  background: rgba(255, 255, 255, 0.07);
  color: var(--tlf-yazi);
}
.tlf-arac-dugme .tlf-i {
  width: 1.8em;
  height: 1.8em;
}
.tlf-arac-dugme span {
  font-size: 1.3em;
  font-weight: 600;
}
.tlf-liste {
  margin: 2.4em 1.6em 0;
}
.tlf-liste__baslik {
  margin: 0 0.2em 1em;
  font-size: 1.3em;
  font-weight: 600;
  color: var(--tlf-yazi-2);
}
.tlf-cihaz {
  display: flex;
  align-items: center;
  gap: 1.1em;
  padding: 1.25em 1.1em;
  border-top: 1px solid var(--tlf-cizgi);
}
.tlf-cihaz:first-of-type {
  border-top: 0;
}
.tlf-cihaz--secili {
  border-radius: 1.3em;
  background: var(--tlf-vurgu-zemin);
}
.tlf-cihaz--secili + .tlf-cihaz {
  border-top: 0;
}
.tlf-cihaz__ikon {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.6em;
  height: 3.6em;
  border-radius: 1.05em;
  background: linear-gradient(150deg, var(--renk-gece-700), var(--renk-gece-900));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: var(--tlf-yazi-2);
}
.tlf-cihaz__ikon .tlf-i {
  width: 1.9em;
  height: 1.9em;
}
.tlf-cihaz__metin {
  flex: 1;
  min-width: 0;
}
.tlf-cihaz__ad {
  font-size: 1.45em;
  font-weight: 650;
}
.tlf-cihaz__alt {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.2em;
  font-size: 1.1em;
  color: var(--tlf-yazi-3);
}
.tlf-cihaz__alt::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--tlf-iyi);
  box-shadow: 0 0 0 0.22em rgba(34, 197, 94, 0.18);
}
.tlf-cihaz__oynat {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.6em;
  height: 3.6em;
  border-radius: 50%;
  background: var(--tlf-vurgu);
  color: var(--renk-gece-950);
  box-shadow: 0 0.4em 1.2em -0.2em rgba(56, 211, 227, 0.5);
}
.tlf-cihaz__oynat .tlf-i {
  width: 1.5em;
  height: 1.5em;
  margin-left: 0.2em;
}
.tlf-uyg--canli .tlf-kart {
  padding: 0.4em 0.4em;
  background: var(--renk-gece-900);
}

/* ------------------------------------------------------------------ Açılış / Kapanış */
.tlf-ak {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1em;
}
.tlf-ak__kutu {
  padding: 1.3em 1.35em 1.4em;
  border: 1px solid var(--tlf-cizgi);
  border-radius: 1.8em;
  background: var(--tlf-kart);
}
.tlf-ak__ad {
  font-size: 1.2em;
  font-weight: 500;
  color: var(--tlf-yazi-2);
}
.tlf-ak__saat {
  margin-top: 0.25em;
  font-size: 3.2em;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.tlf-durum-cip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-top: 0.7em;
  padding: 0.25em 0.65em 0.25em 0.45em;
  border-radius: 1em;
  background: var(--tlf-iyi-zemin);
  color: var(--tlf-iyi);
  font-size: 1.1em;
  font-weight: 650;
  white-space: nowrap;
}
.tlf-durum-cip .tlf-i {
  width: 1.1em;
  height: 1.1em;
  stroke-width: 2.8;
}
.tlf-ak__plan {
  margin-top: 0.75em;
  font-size: 1.1em;
  color: var(--tlf-yazi-3);
  font-variant-numeric: tabular-nums;
}
.tlf-serit {
  display: grid;
  grid-template-columns: 2.4em repeat(7, minmax(0, 1fr));
  gap: 0.45em 0.35em;
  align-items: center;
}
.tlf-serit__gun {
  font-size: 1.05em;
  font-weight: 600;
  color: var(--tlf-yazi-3);
  text-align: center;
  white-space: nowrap;
}
.tlf-serit__gun--bugun {
  color: var(--tlf-vurgu-yazi);
}
.tlf-serit__ikon {
  display: grid;
  place-items: center;
  height: 2.7em;
  color: var(--tlf-yazi-3);
}
.tlf-serit__ikon .tlf-i {
  width: 1.6em;
  height: 1.6em;
}
.tlf-serit__hucre {
  height: 2.7em;
  border-radius: 0.8em;
  background: var(--tlf-iyi-zemin);
  color: var(--tlf-yazi);
  font-size: 1.05em;
  font-weight: 600;
  line-height: 2.57em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.tlf-serit__hucre--gec {
  background: var(--tlf-uyari-zemin);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.45);
  color: var(--tlf-uyari);
}
.tlf-serit__hucre--bos {
  background: var(--tlf-dolgu);
  color: var(--tlf-yazi-3);
}
.tlf-serit__hucre--bugun {
  box-shadow: inset 0 0 0 1px rgba(56, 211, 227, 0.6);
}
.tlf-serit__notlar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.4em;
  margin-top: 1.2em;
  padding-top: 1.1em;
  border-top: 1px solid var(--tlf-cizgi);
  font-size: 1.12em;
  color: var(--tlf-yazi-3);
}
.tlf-serit__notlar b {
  color: var(--tlf-yazi);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.tlf-serit__uyari {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--tlf-uyari);
}
.tlf-serit__uyari .tlf-i {
  width: 1.15em;
  height: 1.15em;
}

/* ------------------------------------------------------------------ ikili kompozisyon (hero) */
.tlf-ikili {
  container-type: inline-size;
  contain-intrinsic-inline-size: 600px;
  position: relative;
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
}
.tlf-ikili__sahne {
  position: relative;
}
.tlf-ikili__arka {
  display: none;
}
/* geniş kapta iki telefon: önde Mağazam (alta yaslı), sağ üstte kaydırılmış Kasa. Yükseklik öndeki telefonun boyu
   (genişlik × 0,55 × 0,976 × 19,5/9 = 1,163) + 0,092 kaydırma: aspect-ratio 100 / 125,5. */
@container (min-width: 460px) {
  .tlf-ikili__sahne {
    aspect-ratio: 100 / 125.5;
  }
  .tlf-ikili__sahne::before {
    content: "";
    position: absolute;
    inset: 8% 4% 6% 10%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(25, 195, 214, 0.22), rgba(25, 195, 214, 0));
    pointer-events: none;
  }
  .tlf-ikili__arka,
  .tlf-ikili__on {
    position: absolute;
    display: block;
  }
  .tlf-ikili__arka {
    top: 0;
    right: 1%;
    width: 49%;
  }
  .tlf-ikili__on {
    z-index: 2;
    bottom: 0;
    left: 4%;
    width: 55%;
  }
  .tlf-ikili .tlf {
    max-width: none;
  }
  .tlf-ikili__arka .tlf__ekran::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 19;
    background: linear-gradient(200deg, rgba(6, 11, 22, 0.05), rgba(6, 11, 22, 0.42));
    pointer-events: none;
  }
}

/* ------------------------------------------------------------------ hareket */
@media (prefers-reduced-motion: reduce) {
  .tlf-canli__nokta,
  .tlf-canli-rozet::before {
    animation: none;
  }
  .tlf--egik .tlf__govde,
  .tlf--egik:hover .tlf__govde {
    transform: perspective(2400px) rotateX(7deg) rotateY(-16deg) rotateZ(2deg) scale(0.92);
    transition: none;
  }
}

/* ------------------------------------------------------------------ geliştirme vitrini (/_gorseller/) */
.tlf-vitrin {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 32px;
  align-items: flex-start;
  margin-top: 32px;
}
.tlf-vitrin__oge {
  max-width: 100%;
  margin: 0;
}
.tlf-vitrin__oge--240 { width: 240px; }
.tlf-vitrin__oge--300 { width: 300px; }
.tlf-vitrin__oge--340 { width: 340px; }
.tlf-vitrin__oge--420 { width: 420px; margin-top: 16px; }
.tlf-vitrin__tam { margin: 32px 0 48px; }
.tlf-vitrin__ad {
  margin: 0 0 4px;
  font-size: var(--boyut-md);
}
.tlf-vitrin__ad code {
  font-size: 0.9em;
}
.tlf-vitrin__not {
  margin: 0 0 16px;
  font-size: var(--boyut-sm);
  opacity: 0.8;
}

/* ===== css/gorseller-sahne.css ===== */
/*
 * Razbin — gorseller-sahne.css: sahne görselleri (shn-*).
 * Pano, ısı haritası, kasa kuyruğu, müşteri kategorileri, gün çizelgesi, şube karşılaştırması, nasıl çalışır akışı,
 * kıyas grafiği, tahmin kartı, sektör çizimleri ve hero kartları.
 * Sahibi: Sahne görselleri (belgeler/SOZLESME.md bölüm 3). Parça listesi ve kullanım: belgeler/GORSELLER_SAHNE.md.
 *
 * İlkeler
 *  - Her görselin kökü `.shn` (kap sorgusu kabı: `shn`). İç ölçüler em; iç yazı boyu kabın genişliğinden (cqi) gelir.
 *    Kap sorgusu bilmeyen eski tarayıcılarda dar (mobil) düzen ve sabit yazı boyu kalır.
 *  - Renkler yalnız temel.css belirteçlerinden. Tema: açık varsayılan; koyu alanlarda (.bolum--koyu, .hero, .cagri,
 *    .kart--koyu, .tema-koyu) koyu. Koyu alanın içinde açık görünüm için sarmalayıcı: .tema-acik; açık alanda koyu
 *    görünüm için: .tema-koyu (tasarım sisteminin bağlam sınıfları; yazı belirteçleri de onlarla değişir).
 *  - Veri geometrisi bölüm 9'daki örnek günden hesaplandı (GORSELLER_SAHNE.md "Geometri"). Satır içi style yok
 *    (ileride CSP): değerler bu dosyadaki sınıflarda ya da SVG özniteliklerinde.
 *  - SVG kimliği (id) kullanılmaz: aynı görsel bir sayfada iki kez de kullanılabilir.
 *  - Hareket yalnız `prefers-reduced-motion: no-preference`'ta; JS yoksa son hâl görünür.
 */

/* ================================================================ 1. tema belirteçleri */
:root,
.tema-acik {
  --shn-zemin: var(--renk-gri-0);
  --shn-zemin-2: var(--renk-gri-50);
  --shn-zemin-3: var(--renk-gri-100);
  --shn-cizgi: var(--renk-gri-200);
  --shn-izgara: var(--renk-gri-100);
  --shn-eksen: var(--renk-gri-300);
  --shn-metin: var(--metin);
  --shn-metin-2: var(--metin-2);
  --shn-metin-3: var(--metin-3); /* tasarım sisteminin ayarlı soluk metni (açık zeminlerde >= 4.5:1) */
  /* seriler (dataviz denetimi: GORSELLER_SAHNE.md "Renk") */
  --shn-bugun: var(--renk-turkuaz-500);
  --shn-bugun-guclu: var(--renk-turkuaz-600);
  --shn-vurgu-yazi: var(--renk-turkuaz-700);
  --shn-dun: var(--renk-gri-500);
  --shn-hafta: var(--renk-mavi-500);
  /* durum (her zaman simge + yazıyla) */
  --shn-uyari: var(--renk-amber-500);
  --shn-hata: var(--renk-kirmizi-600);
  --shn-basari: var(--renk-yesil-600);
  /* ısı haritası (tek renk tonu, açıkta koyulaşır) */
  --shn-isi-ic: var(--renk-turkuaz-700);
  --shn-isi-orta: var(--renk-turkuaz-400);
  --shn-isi-karisim: multiply;
  --shn-isi-olcek: linear-gradient(90deg, var(--renk-turkuaz-200), var(--renk-turkuaz-400) 45%, var(--renk-turkuaz-700));
  /* kamera bakışlı sahne ve çizimler */
  --shn-sahne-tavan: var(--renk-gri-100);
  --shn-sahne-yan: var(--renk-gri-50);
  --shn-sahne-arka: var(--renk-gri-100);
  --shn-sahne-zemin: var(--renk-gri-0);
  --shn-sahne-karo: var(--renk-gri-100);
  --shn-sahne-cizgi: var(--renk-gri-300);
  --shn-sahne-esya: var(--renk-gri-0);
  --shn-sahne-ust: var(--renk-gri-50);
  --shn-sahne-kapi: var(--renk-gri-200);
  --shn-cizim: var(--renk-gri-600);
  --shn-cizim-ince: var(--renk-gri-300);
  --shn-cizim-zemin: var(--renk-gri-50);
  --shn-cizim-taban: var(--renk-gri-100);
  --shn-cizim-dolgu: var(--renk-gri-0);
  /* çerçeve ve gölge */
  --shn-pencere-ust: var(--renk-gri-50);
  --shn-pencere-nokta: var(--renk-gri-300);
  --shn-golge: 0 1px 2px rgba(11, 20, 38, 0.05), 0 18px 40px -20px rgba(11, 20, 38, 0.28);
  --shn-golge-buyuk: 0 1px 2px rgba(11, 20, 38, 0.06), 0 40px 80px -32px rgba(11, 20, 38, 0.38);
  --shn-ton: 0.12;
}

.bolum--koyu,
.hero,
.cagri,
.kart--koyu,
.tema-koyu {
  --shn-zemin: var(--renk-gece-800);
  --shn-zemin-2: var(--renk-gece-900);
  --shn-zemin-3: var(--renk-gece-700);
  --shn-cizgi: var(--koyu-cizgi);
  --shn-izgara: var(--koyu-cizgi);
  --shn-eksen: var(--renk-gece-600);
  --shn-metin: var(--metin);
  --shn-metin-2: var(--metin-2);
  --shn-metin-3: var(--metin-3);
  --shn-bugun: var(--renk-turkuaz-400);
  --shn-bugun-guclu: var(--renk-turkuaz-300);
  --shn-vurgu-yazi: var(--renk-turkuaz-300);
  --shn-dun: var(--renk-gri-500);
  --shn-hafta: var(--renk-mavi-500);
  --shn-uyari: var(--renk-amber-400);
  --shn-hata: var(--renk-kirmizi-500);
  --shn-basari: var(--renk-yesil-500);
  --shn-isi-ic: var(--renk-turkuaz-200);
  --shn-isi-orta: var(--renk-turkuaz-500);
  --shn-isi-karisim: screen;
  --shn-isi-olcek: linear-gradient(90deg, var(--renk-turkuaz-800), var(--renk-turkuaz-500) 50%, var(--renk-turkuaz-200));
  --shn-sahne-tavan: var(--renk-gece-950);
  --shn-sahne-yan: var(--renk-gece-800);
  --shn-sahne-arka: var(--renk-gece-700);
  --shn-sahne-zemin: var(--renk-gece-900);
  --shn-sahne-karo: var(--renk-gece-800);
  --shn-sahne-cizgi: var(--renk-gece-600);
  --shn-sahne-esya: var(--renk-gece-700);
  --shn-sahne-ust: var(--renk-gece-600);
  --shn-sahne-kapi: var(--renk-gece-950);
  --shn-cizim: var(--koyu-metin-2);
  --shn-cizim-ince: var(--renk-gece-600);
  --shn-cizim-zemin: var(--renk-gece-800);
  --shn-cizim-taban: var(--renk-gece-900);
  --shn-cizim-dolgu: var(--renk-gece-700);
  --shn-pencere-ust: var(--renk-gece-900);
  --shn-pencere-nokta: var(--renk-gece-600);
  --shn-golge: 0 0 0 1px rgba(255, 255, 255, 0.02), 0 24px 48px -24px rgba(0, 0, 0, 0.7);
  --shn-golge-buyuk: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 48px 96px -40px rgba(0, 0, 0, 0.85);
  --shn-ton: 0.16;
}

/* ================================================================ 2. ortak kök ve parçalar */
.shn {
  container: shn / inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  margin: 0;
  color: var(--shn-metin);
  font-family: var(--yazi-govde);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: normal;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.shn *,
.shn *::before,
.shn *::after {
  box-sizing: border-box;
}
/* görsel bir resim gibi davranır: yüksek karşıtlık kipinde ve yazdırırken renkleri korunur (metin karşılığı aria-label) */
.shn {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
@media (forced-colors: active) {
  .shn {
    forced-color-adjust: none;
  }
}
.shn svg {
  display: block;
  overflow: visible;
}
.shn ul,
.shn ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.shn b {
  font-weight: 650;
}

/* iç sarmalayıcı (aria-hidden): yazı boyu kabın genişliğine bağlı; kartlar için ortak ölçek.
   Izgarada kök uzarsa iç kart da uzar (aynı satırdaki kartlar eşit boy). */
.shn__ic {
  flex: 1 1 auto;
  font-size: 0.8125rem;
  font-size: clamp(0.75rem, 0.6rem + 1.1cqi, 0.9375rem);
}

/* kart yüzeyi */
.shn-kutu {
  background: var(--shn-zemin);
  border: 1px solid var(--shn-cizgi);
  border-radius: 1.125em;
  box-shadow: var(--shn-golge);
  padding: 1.1em 1.15em 1.2em;
}
@container shn (min-width: 26rem) {
  .shn-kutu {
    padding: 1.35em 1.5em 1.45em;
  }
}

/* kart başlığı */
.shn-bas {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5em 0.75em;
  margin-bottom: 1em;
}
.shn-bas__metin {
  min-width: 0;
}
.shn-bas__baslik {
  display: block;
  font-size: 1em;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: var(--shn-metin);
}
.shn-bas__alt {
  display: block;
  margin-top: 0.15em;
  font-size: 0.8125em;
  color: var(--shn-metin-3);
}

/* hap (rozet) */
.shn-hap {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.65em;
  border: 1px solid var(--shn-cizgi);
  border-radius: 999px;
  background: var(--shn-zemin-2);
  color: var(--shn-metin-2);
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* canlı nokta */
.shn-canli {
  position: relative;
  display: inline-block;
  flex: none;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--shn-bugun);
}
.shn-canli::after {
  content: "";
  position: absolute;
  inset: -0.3em;
  border-radius: 50%;
  background: var(--shn-bugun);
  opacity: 0.25;
}

/* değişim (artış / azalış): yazı mürekkep renginde, yön simgesi durum renginde */
.shn-degisim {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2em;
  font-weight: 650;
  color: var(--shn-metin);
  white-space: nowrap;
}
.shn-degisim svg {
  align-self: center;
  width: 0.85em;
  height: 0.85em;
  flex: none;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shn-degisim--artis svg {
  stroke: var(--shn-basari);
}
.shn-degisim--azalis svg {
  stroke: var(--shn-hata);
}

/* durum çipi: simge + yazı; zemin durum renginin yıkaması */
.shn-durum {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.35em 0.75em 0.35em 0.45em;
  border-radius: 999px;
  color: var(--shn-metin);
  font-size: 0.8125em;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.shn-durum::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--shn-durum-renk, var(--shn-bugun));
  opacity: var(--shn-ton);
}
.shn-durum__simge {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background: var(--shn-durum-renk, var(--shn-bugun));
  color: var(--renk-gece-900);
}
.shn-durum__simge svg {
  width: 0.85em;
  height: 0.85em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shn-durum--basari {
  --shn-durum-renk: var(--shn-basari);
}
.shn-durum--basari .shn-durum__simge {
  color: var(--renk-gri-0);
}

/* küçük çizgi simgeleri (16x16 görünüm kutusu) */
.shn-ikon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* sütun grafiği (saatlik): ızgara sütunları, çubuk tabana oturur, üstü 4 px yuvarlak */
.shn-sutunlar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0 0.3em;
  border-bottom: 1px solid var(--shn-eksen);
}
.shn-sutun {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.shn-cubuk {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1.7em;
  border-radius: 0.3em 0.3em 0 0;
  background: var(--shn-bugun);
  transform-origin: 50% 100%;
}
/* sürmekte olan saat: soluk ve çizgili (45°) */
.shn-cubuk--suruyor {
  background: repeating-linear-gradient(135deg, var(--shn-bugun) 0 0.14em, transparent 0.14em 0.36em);
  box-shadow: inset 0 0 0 1px var(--shn-bugun);
}
/* tahmin: kesik çizgili çerçeve, dolgusuz */
.shn-cubuk--tahmin {
  background: transparent;
  border: 1px dashed var(--shn-bugun-guclu);
  border-bottom: 0;
}
.shn-cubuk__deger {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -0.3em);
  color: var(--shn-metin);
  font-size: 0.8em;
  font-weight: 650;
  white-space: nowrap;
}
.shn-saatler {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0 0.3em;
  margin-top: 0.45em;
  color: var(--shn-metin-3);
  font-size: 0.72em;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.shn-saatler > span:nth-child(even) {
  visibility: hidden;
}

/* y ekseni olan sütun grafiği: [y etiketleri | sütunlar] / [ . | saatler]; ızgara 50'de bir (ölçek 0-200) */
.shn-grafik {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: 0.55em;
}
.shn-grafik__y {
  grid-column: 1;
  grid-row: 1;
  padding-top: 1.2em;
}
.shn-grafik__y-ic {
  position: relative;
  height: 100%;
  min-width: 1.55em;
}
.shn-grafik__y-ic > span {
  position: absolute;
  right: 0;
  transform: translateY(50%);
  color: var(--shn-metin-3);
  font-size: 0.7em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.shn-grafik__y-ic > span:nth-child(1) { bottom: 100%; }
.shn-grafik__y-ic > span:nth-child(2) { bottom: 75%; }
.shn-grafik__y-ic > span:nth-child(3) { bottom: 50%; }
.shn-grafik__y-ic > span:nth-child(4) { bottom: 25%; }
.shn-grafik > .shn-sutunlar {
  grid-column: 2;
  grid-row: 1;
  background: linear-gradient(to bottom, var(--shn-izgara) 1px, transparent 1px) 0 0 / 100% 25% repeat-y content-box;
}
.shn-grafik > .shn-saatler {
  grid-column: 2;
  grid-row: 2;
}

/* bölüm 9: Merkez Mağaza bugünkü saatlik ziyaretçi; ölçek 0-200 (yükseklik = değer / 200) */
.shn-ziy-10 { height: 23%; }    /* 46 */
.shn-ziy-11 { height: 37%; }    /* 74 */
.shn-ziy-12 { height: 52%; }    /* 104 */
.shn-ziy-13 { height: 64.5%; }  /* 129 */
.shn-ziy-14 { height: 68.5%; }  /* 137 */
.shn-ziy-15 { height: 56.5%; }  /* 113 */
.shn-ziy-16 { height: 61%; }    /* 122 */
.shn-ziy-17 { height: 73.5%; }  /* 147 */
.shn-ziy-18 { height: 88.5%; }  /* 177 */
.shn-ziy-19 { height: 93.5%; }  /* 187 */
.shn-ziy-20 { height: 23.5%; }  /* 47, sürüyor (20:00-20:20) */
.shn-ziy-20t { height: 66.5%; } /* 133 beklenen */
.shn-ziy-21t { height: 40%; }   /* 80 beklenen */

/* gösterge anahtarı (lejant) */
.shn-anahtar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 1em;
  color: var(--shn-metin-2);
  font-size: 0.75em;
}
.shn-anahtar__oge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  white-space: nowrap;
}
.shn-anahtar__kutu {
  flex: none;
  width: 0.8em;
  height: 0.8em;
  border-radius: 0.2em;
  background: var(--shn-bugun);
}
.shn-anahtar__kutu--suruyor {
  background: repeating-linear-gradient(135deg, var(--shn-bugun) 0 0.12em, transparent 0.12em 0.3em);
  box-shadow: inset 0 0 0 1px var(--shn-bugun);
}
.shn-anahtar__kutu--tahmin {
  background: transparent;
  border: 1px dashed var(--shn-bugun-guclu);
}
.shn-anahtar__cizgi {
  flex: none;
  width: 1.4em;
  height: 0;
  border-top: 2.5px solid var(--shn-bugun);
}
.shn-anahtar__cizgi--dun {
  border-top: 2px dashed var(--shn-dun);
}
.shn-anahtar__cizgi--hafta {
  border-top: 2.5px dotted var(--shn-hafta);
}

/* sıralı ölçek (ısı) göstergesi: Düşük -> Yüksek */
.shn-olcek {
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: var(--shn-metin-3);
  font-size: 0.75em;
}
.shn-olcek__serit {
  flex: 0 1 6.5em;
  min-width: 3em;
  height: 0.5em;
  border-radius: 999px;
  background: var(--shn-isi-olcek);
}

/* ================================================================ 3. shn-isi-sahne (kamera bakışlı sahne; iç parça) */
/* Görünüm kutusu 640x400, tek kaçış noktası (320, 70). Lekeler zemine yatık (en/boy 2,4) ve zemin çokgenine kırpılır. */
.shn-sahne {
  position: relative;
  isolation: isolate;
  aspect-ratio: 640 / 400;
  overflow: hidden;
  border: 1px solid var(--shn-cizgi);
  border-radius: 0.75em;
  background: var(--shn-sahne-zemin);
}
.shn-sahne__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.shn-sahne__svg * {
  vector-effect: non-scaling-stroke;
}
.shn-sahne__tavan { fill: var(--shn-sahne-tavan); }
.shn-sahne__yan { fill: var(--shn-sahne-yan); }
.shn-sahne__arka { fill: var(--shn-sahne-arka); }
.shn-sahne__zemin { fill: var(--shn-sahne-zemin); }
.shn-sahne__karo {
  fill: none;
  stroke: var(--shn-sahne-karo);
  stroke-width: 1;
}
.shn-sahne__kenar {
  fill: none;
  stroke: var(--shn-sahne-cizgi);
  stroke-width: 1;
}
.shn-sahne__kapi {
  fill: var(--shn-sahne-kapi);
  stroke: var(--shn-sahne-cizgi);
  stroke-width: 1;
}
.shn-sahne__esya {
  fill: var(--shn-sahne-esya);
  stroke: var(--shn-sahne-cizgi);
  stroke-width: 1;
}
.shn-sahne__ust {
  fill: var(--shn-sahne-ust);
  stroke: var(--shn-sahne-cizgi);
  stroke-width: 1;
}
.shn-sahne__ince,
.shn-sahne__halka {
  fill: none;
  stroke: var(--shn-sahne-cizgi);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.shn-sahne__ton {
  fill: var(--shn-bugun);
  opacity: 0.45;
}
.shn-sahne__lekeler {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: polygon(27.5% 44%, 72.5% 44%, 100% 76.5%, 100% 100%, 0% 100%, 0% 76.5%); /* zemin */
}
.shn-leke {
  position: absolute;
  aspect-ratio: 2.4; /* zemine yatık elips */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--shn-isi-ic), var(--shn-isi-orta) 42%, transparent);
  mix-blend-mode: var(--shn-isi-karisim);
}
/* düşük yoğunluklu lekeler: koyu çekirdek yok, üst üste binince koyulaşır */
.shn-leke--yumusak {
  background: radial-gradient(closest-side, var(--shn-isi-orta), transparent);
}
/* lekeler: merkez (%), genişlik (sahne genişliğinin %'si), yoğunluk */
.shn-sahne__leke--1 { left: 50%; top: 65.5%; width: 44%; opacity: 0.95; }     /* yeni sezon masaları */
.shn-sahne__leke--2 { left: 78.125%; top: 53%; width: 20%; opacity: 0.8; }     /* kabin girişi */
.shn-sahne__leke--3 { left: 17.5%; top: 84.5%; width: 26%; opacity: 0.6; }     /* kampanya askısı */
.shn-sahne__leke--4 { left: 50%; top: 49%; width: 46%; opacity: 0.5; }         /* arka duvar askıları */
.shn-sahne__leke--5 { left: 15%; top: 62.5%; width: 22%; opacity: 0.45; }      /* duvar reyonu */
.shn-sahne__leke--6 { left: 51.562%; top: 90.5%; width: 34%; opacity: 0.5; }   /* ana yol */
.shn-sahne__leke--7 { left: 67.188%; top: 62.5%; width: 18%; opacity: 0.4; }   /* masalardan kabine */

.shn-sahne__etiket {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  padding: 0.18em 0.55em;
  border-radius: 999px;
  background: var(--shn-zemin);
  box-shadow: 0 0 0 1px var(--shn-cizgi);
  color: var(--shn-metin-2);
  font-size: 0.72em;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}
.shn-sahne__etiket--duvar { left: 14.375%; top: 30.5%; }
.shn-sahne__etiket--kabin { left: 77.5%; top: 20%; }
.shn-sahne__etiket--yeni { left: 50%; top: 55%; }
.shn-sahne__etiket--kampanya { left: 17.5%; top: 74.5%; }
/* panel içindeki küçük sahne: etiketsiz */
.shn-panel__kart--isi .shn-sahne__etiket {
  display: none;
}

/* kamera seçici (başlıkta) */
.shn-secim {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.5em 0.3em 0.55em;
  border: 1px solid var(--shn-cizgi);
  border-radius: 0.55em;
  background: var(--shn-zemin);
  color: var(--shn-metin);
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.shn-secim .shn-ikon {
  width: 1.05em;
  height: 1.05em;
  color: var(--shn-metin-3);
}
.shn-secim__etiket {
  color: var(--shn-metin-3);
  font-weight: 500;
}
/* ısı haritası başlığı: "Seçilen kamera" seçicisi sığmazsa başlığın altına iner */
.shn-isi .shn-bas {
  flex-wrap: wrap;
}

/* ================================================================ 4. shn-panel (masaüstü yönetim paneli) */
.shn-panel__ic {
  font-size: 0.625rem;
  font-size: clamp(0.59rem, 3.35cqi, 0.75rem);
}
@container shn (min-width: 30rem) {
  .shn-panel__ic {
    font-size: min(2.08cqi, 0.8125rem);
  }
}
@container shn (min-width: 45rem) {
  .shn-panel__ic {
    font-size: min(1.85cqi, 0.8125rem);
  }
}
@container shn (min-width: 60rem) {
  .shn-panel__ic {
    font-size: min(1.4cqi, 0.8125rem);
  }
}
.shn-panel__pencere {
  overflow: hidden;
  border: 1px solid var(--shn-cizgi);
  border-radius: 1em;
  background: var(--shn-zemin);
  box-shadow: var(--shn-golge-buyuk);
}
.shn-panel__cubuk {
  display: flex;
  align-items: center;
  gap: 0.75em;
  height: 2.6em;
  padding: 0 1em;
  border-bottom: 1px solid var(--shn-cizgi);
  background: var(--shn-pencere-ust);
}
.shn-panel__isiklar {
  display: flex;
  flex: none;
  gap: 0.45em;
}
.shn-panel__isiklar > span {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--shn-pencere-nokta);
}
.shn-panel__adres {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 auto;
  padding: 0.35em 1.1em;
  border: 1px solid var(--shn-cizgi);
  border-radius: 0.55em;
  background: var(--shn-zemin);
  color: var(--shn-metin-3);
  font-size: 0.85em;
  white-space: nowrap;
  transform: translateX(-1.25em);
}
.shn-panel__adres-nokta {
  width: 0.55em;
  height: 0.55em;
  border-radius: 0.15em;
  background: var(--shn-bugun);
}
.shn-panel__govde {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* sol menü: dar kapta yok, orta kapta yalnız simge, geniş kapta simge + ad */
.shn-panel__menu {
  display: none;
}
@container shn (min-width: 45rem) {
  .shn-panel__govde {
    grid-template-columns: 3.6em minmax(0, 1fr);
  }
  .shn-panel__menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
    padding: 1em 0.55em;
    border-right: 1px solid var(--shn-cizgi);
    background: var(--shn-zemin-2);
  }
  .shn-panel__marka {
    display: flex;
    align-items: center;
    gap: 0.55em;
    margin-bottom: 0.9em;
    color: var(--shn-metin);
    font-family: var(--yazi-baslik);
    font-size: 1.05em;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .shn-panel__marka-isaret {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.75em;
    height: 1.75em;
    color: var(--shn-metin);
  }
  .shn-panel__marka-isaret svg {
    width: 1.3em;
    height: 1.3em;
  }
  .shn-panel__marka-ad,
  .shn-panel__menu-ad {
    display: none;
  }
  .shn-panel__menu-oge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65em;
    width: 100%;
    padding: 0.55em;
    border-radius: 0.55em;
    color: var(--shn-metin-3);
    font-size: 0.92em;
    white-space: nowrap;
  }
  .shn-panel__menu-oge.shn-etkin {
    background: var(--shn-zemin);
    box-shadow: 0 0 0 1px var(--shn-cizgi);
    color: var(--shn-metin);
    font-weight: 600;
  }
  .shn-panel__menu-oge.shn-etkin .shn-ikon {
    color: var(--shn-vurgu-yazi);
  }
}
@container shn (min-width: 60rem) {
  .shn-panel__govde {
    grid-template-columns: 11.5em minmax(0, 1fr);
  }
  .shn-panel__menu {
    align-items: stretch;
    padding: 1.1em 0.8em;
  }
  .shn-panel__marka {
    padding: 0 0.35em;
  }
  .shn-panel__marka-ad,
  .shn-panel__menu-ad {
    display: inline;
  }
  .shn-panel__menu-oge {
    justify-content: flex-start;
    padding: 0.5em 0.65em;
  }
}

.shn-panel__ana {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.85em;
  padding: 1em;
  background: var(--shn-zemin);
}
@container shn (min-width: 30rem) {
  .shn-panel__ana {
    gap: 1em;
    padding: 1.25em 1.35em 1.4em;
  }
}
.shn-panel__ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em 0.75em;
}
.shn-panel__secici {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.38em 0.6em 0.38em 0.55em;
  border: 1px solid var(--shn-cizgi);
  border-radius: 0.6em;
  background: var(--shn-zemin);
  color: var(--shn-metin);
  font-size: 1.02em;
  font-weight: 650;
  white-space: nowrap;
}
.shn-panel__secici .shn-ikon {
  color: var(--shn-metin-3);
}
.shn-panel__an {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--shn-metin-2);
  font-size: 0.9em;
  white-space: nowrap;
}
.shn-panel__donem {
  display: none;
}
@container shn (min-width: 30rem) {
  .shn-panel__donem {
    display: inline-flex;
    margin-left: auto;
    padding: 0.2em;
    border-radius: 0.6em;
    background: var(--shn-zemin-3);
  }
  .shn-panel__donem > span {
    padding: 0.28em 0.8em;
    border-radius: 0.45em;
    color: var(--shn-metin-3);
    font-size: 0.85em;
    font-weight: 550;
  }
  .shn-panel__donem > .shn-etkin {
    background: var(--shn-zemin);
    box-shadow: 0 0 0 1px var(--shn-cizgi);
    color: var(--shn-metin);
  }
}

/* ölçüt şeridi */
.shn-panel__olcutler {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6em;
}
@container shn (min-width: 30rem) {
  .shn-panel__olcutler {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75em;
  }
}
.shn-panel__olcut {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.2em;
  padding: 0.75em 0.85em 0.8em;
  border: 1px solid var(--shn-cizgi);
  border-radius: 0.8em;
  background: var(--shn-zemin);
}
.shn-panel__olcut-ad {
  color: var(--shn-metin-2);
  font-size: 0.82em;
  white-space: nowrap;
}
.shn-panel__olcut-deger {
  color: var(--shn-metin);
  font-size: 1.55em;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: nowrap;
}
.shn-panel__olcut-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15em 0.35em;
  color: var(--shn-metin-3);
  font-size: 0.76em;
}

/* kartlar */
.shn-panel__izgara {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75em;
}
@container shn (min-width: 30rem) {
  .shn-panel__izgara {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }
}
.shn-panel__kart {
  min-width: 0;
  padding: 0.85em 0.95em 0.9em;
  border: 1px solid var(--shn-cizgi);
  border-radius: 0.8em;
  background: var(--shn-zemin);
}
.shn-panel__kart-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2em 0.75em;
  margin-bottom: 0.85em;
}
.shn-panel__kart-baslik {
  color: var(--shn-metin);
  font-size: 0.92em;
  font-weight: 650;
  white-space: nowrap;
}
.shn-panel__kart-not {
  color: var(--shn-metin-3);
  font-size: 0.76em;
  white-space: nowrap;
}
.shn-panel__kart--grafik {
  display: flex;
  flex-direction: column;
}
.shn-panel__kart--grafik > .shn-grafik {
  flex: 1 1 auto;
}
.shn-panel__sutunlar {
  min-height: 8.5em;
  padding-top: 1.2em;
}
.shn-panel__kart .shn-anahtar {
  margin-top: 0.75em;
}
.shn-panel__kart--isi,
.shn-panel__kart--tablo {
  display: none;
}
@container shn (min-width: 30rem) {
  .shn-panel__kart--isi {
    display: flex;
    flex-direction: column;
  }
  .shn-panel__kart--isi .shn-sahne {
    margin: auto 0;
  }
  .shn-panel__kart--isi .shn-olcek {
    margin-top: 0.7em;
  }
  .shn-panel__kart--tablo {
    display: block;
    grid-column: 1 / -1;
  }
}

/* şube tablosu (panelde ve shn-coklu-magaza'da aynı satır düzeni) */
.shn-tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86em;
  font-variant-numeric: tabular-nums;
}
.shn-tablo th,
.shn-tablo td {
  padding: 0.55em 0.6em;
  border-bottom: 1px solid var(--shn-izgara);
  text-align: right;
  white-space: nowrap;
}
.shn-tablo th:first-child,
.shn-tablo td:first-child {
  padding-left: 0;
  text-align: left;
}
.shn-tablo th:last-child,
.shn-tablo td:last-child {
  padding-right: 0;
}
.shn-tablo th {
  padding-top: 0;
  color: var(--shn-metin-3);
  font-size: 0.88em;
  font-weight: 550;
}
.shn-tablo tr:last-child td {
  border-bottom: 0;
  padding-bottom: 0;
}
.shn-tablo td:first-child {
  color: var(--shn-metin);
  font-weight: 600;
}
.shn-tablo td {
  color: var(--shn-metin-2);
}
.shn-tablo .shn-secili td:first-child {
  color: var(--shn-vurgu-yazi);
}
.shn-tablo__nokta {
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--shn-bugun);
  vertical-align: 0.12em;
}
.shn-tablo__bos {
  display: inline-block;
  width: 0.45em;
  margin-right: 0.5em;
}

/* ================================================================ 5. shn-isi-haritasi */
.shn-isi__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em 1em;
  margin-top: 0.95em;
}
.shn-isi__not {
  color: var(--shn-metin-3);
  font-size: 0.75em;
}

/* ================================================================ 6. shn-kuyruk */
.shn-kuyruk__sahne {
  position: relative;
  aspect-ratio: 560 / 228;
  border: 1px solid var(--shn-cizgi);
  border-radius: 0.75em;
  background: var(--shn-zemin-2);
}
.shn-kuyruk__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.shn-kuyruk__svg * {
  vector-effect: non-scaling-stroke;
}
.shn-kuyruk__alan {
  fill: none;
  stroke: var(--shn-uyari);
  stroke-width: 1.25;
  stroke-dasharray: 5 4;
}
.shn-kuyruk__alan-ton {
  fill: var(--shn-uyari);
  opacity: 0.07;
}
.shn-kuyruk__bos-personel {
  fill: none;
  stroke: var(--shn-uyari);
  stroke-width: 1.25;
  stroke-dasharray: 3 3;
}
.shn-kuyruk__tezgah {
  fill: var(--shn-sahne-ust);
  stroke: var(--shn-sahne-cizgi);
  stroke-width: 1;
}
.shn-kuyruk__kasa {
  fill: var(--shn-zemin);
  stroke: var(--shn-metin-3);
  stroke-width: 1.25;
}
.shn-kuyruk__serit {
  fill: none;
  stroke: var(--shn-eksen);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.shn-kuyruk__kisi {
  fill: var(--shn-bugun);
}
.shn-kuyruk__kisi-hale {
  fill: var(--shn-bugun);
  opacity: 0.18;
}
.shn-kuyruk__bos {
  fill: none;
  stroke: var(--shn-eksen);
  stroke-width: 1.25;
  stroke-dasharray: 3 3;
}
.shn-kuyruk__sure {
  fill: none;
  stroke: var(--shn-bugun-guclu);
  stroke-width: 2;
  stroke-linecap: round;
}
.shn-kuyruk__esik {
  fill: none;
  stroke: var(--shn-metin-3);
  stroke-width: 1.25;
  stroke-dasharray: 4 3;
}
.shn-kuyruk__etiket {
  position: absolute;
  transform: translate(-50%, -50%);
  color: var(--shn-metin-2);
  font-size: 0.72em;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
/* sahne görünüm kutusu 560x228: personel alanı (84, 46), tezgâh (190, 99), eşik çizgisi x = 446 (6. ve 7. yerin arası), etiketi solunda (438, 34) */
.shn-kuyruk__etiket--alan { left: 15%; top: 20.18%; transform: translate(0, -50%); }
.shn-kuyruk__etiket--tezgah { left: 33.93%; top: 43.42%; color: var(--shn-metin-3); }
.shn-kuyruk__etiket--esik { left: 78.21%; top: 14.91%; transform: translate(-100%, -50%); color: var(--shn-metin-3); }
/* eşik etiketi personel alanının sağ kenarı (x = 288) ile eşik çizgisi arasındaki boşluğa sığar. Uzun biçim ("Yoğunluk
   eşiği · 7") ~350 px'ten dar kapta personel alanının kenarına biner (ölçüldü: 320 px'te TR −3, EN −5 px); 400 px'ten dar
   kapta kısa biçim ("Eşik 7"), üstünde uzun biçimle en az 10 px boşluk kalır */
.shn-kuyruk__esik-kisa {
  display: none;
}
@container shn (max-width: 24.99rem) {
  .shn-kuyruk__esik-uzun {
    display: none;
  }
  .shn-kuyruk__esik-kisa {
    display: inline;
  }
}
/* saatlik en uzun kuyruk (her saatte görülen en uzun sıra): ölçek 0-9 kişi; yoğunluk eşiği 7 (bugünkü tek bildirim 19:05) */
.shn-kuyruk__saatlik {
  margin-top: 1.05em;
  padding-bottom: 1em;
  border-bottom: 1px solid var(--shn-izgara);
}
.shn-kuyruk__saatlik-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25em 0.75em;
  margin-bottom: 0.6em;
}
.shn-kuyruk__saatlik-baslik {
  color: var(--shn-metin);
  font-size: 0.86em;
  font-weight: 650;
}
.shn-kuyruk__sutunlar {
  position: relative;
  height: 5em;
}
.shn-kuyruk__sutunlar .shn-cubuk {
  max-width: 1.25em;
}
.shn-cubuk--yogun {
  background: var(--shn-uyari);
}
.shn-anahtar__kutu--yogun {
  background: var(--shn-uyari);
}
.shn-k1 { height: 11.11%; }
.shn-k2 { height: 22.22%; }
.shn-k3 { height: 33.33%; }
.shn-k4 { height: 44.44%; }
.shn-k5 { height: 55.56%; }
.shn-k6 { height: 66.67%; }
.shn-k7 { height: 77.78%; }
.shn-kuyruk__esik-cizgi {
  position: absolute;
  right: 0;
  bottom: 77.78%; /* 7 / 9 */
  left: 0;
  border-top: 1.5px dashed var(--shn-metin-3);
  pointer-events: none;
}
/* etiket solda: sabah saatlerinin kısa çubukları eşiğin çok altında, akşamın uzun çubuklarını örtmez */
.shn-kuyruk__esik-cizgi > span {
  position: absolute;
  left: 0;
  bottom: 0.3em;
  padding: 0 0.35em;
  border-radius: 0.3em;
  background: var(--shn-zemin);
  color: var(--shn-metin-3);
  font-size: 0.7em;
  line-height: 1.25;
  white-space: nowrap;
}
/* üç ölçüt: etiketler iki satıra kırılsa da değerler aynı hizada (subgrid) */
.shn-kuyruk__olcutler {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  gap: 0 1em;
  margin-top: 1em;
}
.shn-kuyruk__olcutler > .shn-olcut {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0.15em;
}
.shn-kuyruk__olcutler .shn-olcut__ad {
  align-self: end;
}
.shn-olcut {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.15em;
}
.shn-olcut__ad {
  color: var(--shn-metin-2);
  font-size: 0.78em;
}
.shn-olcut__deger {
  color: var(--shn-metin);
  font-size: 1.3em;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.2;
  white-space: nowrap;
}
.shn-olcut__alt {
  color: var(--shn-metin-3);
  font-size: 0.75em;
}

/* ================================================================ 7. shn-segmentler (müşteri kategorileri) */
/* Her kategori ziyaretçilerin yüzdesi; kategoriler kesişebilir, bu yüzden ayrı çubuklar (iz = ziyaretçilerin %100'ü). */
.shn-seg__toplam {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  margin-bottom: 1em;
}
.shn-seg__sayi {
  color: var(--shn-metin);
  font-size: 2em;
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.shn-seg__birim {
  color: var(--shn-metin-2);
  font-size: 0.85em;
}
.shn-seg__liste {
  display: grid;
  gap: 0.95em;
}
.shn-seg__oge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "ad deger"
    "iz iz";
  align-items: baseline;
  gap: 0.4em 0.75em;
  font-size: 0.88em;
}
.shn-seg__ad {
  grid-area: ad;
  min-width: 0;
  color: var(--shn-metin-2);
}
.shn-seg__deger {
  grid-area: deger;
  color: var(--shn-metin-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.shn-seg__deger b {
  color: var(--shn-metin);
  font-weight: 650;
}
.shn-seg__iz {
  position: relative;
  grid-area: iz;
  display: block;
  height: 0.6em;
  overflow: hidden;
  border-radius: 999px;
}
.shn-seg__iz::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--shn-bugun);
  opacity: 0.14;
}
.shn-seg__cubuk {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 999px;
  background: var(--shn-bugun);
  transform-origin: 0 50%;
}
/* bölüm 9: hemen çıkan %22 · gezip almayan %48 (= ziyaretçi − hemen çıkan − alışveriş yapan) · kabine giren %17
   (öbürleriyle kesişir) · alışveriş yapan %30; toplam %100'ü geçer */
.shn-seg__cubuk--1 { width: 22%; }
.shn-seg__cubuk--2 { width: 48%; }
.shn-seg__cubuk--3 { width: 17%; }
.shn-seg__cubuk--4 { width: 30%; }
.shn-seg__not {
  margin-top: 1.1em;
  color: var(--shn-metin-3);
  font-size: 0.75em;
}

/* ================================================================ 8. shn-gun-cizelgesi */
/* ızgara: dar kapta gün adı + rozet üstte, iz tam genişlik; geniş kapta [gün | iz | rozet] */
.shn-gun__izgara {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "saat saat"
    "g1 r1"
    "iz1 iz1"
    "g2 r2"
    "iz2 iz2";
  align-items: center;
  gap: 0.35em 0.75em;
}
.shn-gun__izgara::before {
  content: "";
  grid-area: saat;
  height: 1.5em;
}
.shn-gun__katman {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  align-self: stretch;
  pointer-events: none;
}
.shn-gun__gun--1 { grid-area: g1; }
.shn-gun__gun--2 { grid-area: g2; }
.shn-gun__iz--1 { grid-area: iz1; }
.shn-gun__iz--2 { grid-area: iz2; }
.shn-gun__rozet--1 { grid-area: r1; }
.shn-gun__rozet--2 { grid-area: r2; }
/* dar kapta gün adı dikey ızgaranın ve plan bandının üstündedir: çizgiler harflerin çevresinde zemin renginde ince bir
   haleyle kesilir (dikdörtgen zemin, "Yesterday" gibi uzun adda tolerans taramasının ve plan bandının başında çentik
   bırakıyordu) */
.shn-gun__gun {
  position: relative;
  z-index: 1;
  justify-self: start;
  color: var(--shn-metin);
  font-size: 0.8em;
  font-weight: 650;
  text-shadow:
    0 0 0.12em var(--shn-zemin),
    0 0 0.12em var(--shn-zemin),
    0 0 0.25em var(--shn-zemin),
    0 0 0.25em var(--shn-zemin);
}
.shn-gun__rozet {
  position: relative;
  z-index: 1;
  justify-self: end;
  font-size: 0.75em;
}
.shn-gun__rozet::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: var(--shn-zemin);
}
@container shn (min-width: 36rem) {
  .shn-gun__izgara {
    grid-template-columns: 4.5em minmax(0, 1fr) auto;
    grid-template-areas:
      ". saat ."
      "g1 iz1 r1"
      "g2 iz2 r2";
    gap: 0.8em 1.1em;
  }
  .shn-gun__katman {
    grid-column: 2;
  }
  .shn-gun__gun {
    text-shadow: none;
  }
  .shn-gun__rozet::after {
    display: none;
  }
}
/* saat etiketleri ve dikey ızgara: 08:00-24:00, 2 saatte bir (yüzde = (saat - 8) / 16) */
.shn-gun__saat {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--shn-izgara);
}
.shn-gun__saat > span {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  color: var(--shn-metin-3);
  font-size: 0.72em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.shn-gun__saat--1 { left: 0; }
.shn-gun__saat--2 { left: 12.5%; }
.shn-gun__saat--3 { left: 25%; }
.shn-gun__saat--4 { left: 37.5%; }
.shn-gun__saat--5 { left: 50%; }
.shn-gun__saat--6 { left: 62.5%; }
.shn-gun__saat--7 { left: 75%; }
.shn-gun__saat--8 { left: 87.5%; }
.shn-gun__saat--9 { left: 100%; }
.shn-gun__saat--1 > span { transform: none; }
.shn-gun__saat--9 > span { transform: translateX(-100%); }
.shn-gun__saat--2 > span,
.shn-gun__saat--4 > span,
.shn-gun__saat--6 > span,
.shn-gun__saat--8 > span {
  display: none;
}
@container shn (min-width: 30rem) {
  .shn-gun__saat--2 > span,
  .shn-gun__saat--4 > span,
  .shn-gun__saat--6 > span,
  .shn-gun__saat--8 > span {
    display: block;
  }
}
/* planlanan çalışma saatleri 10:00-22:00 ve ±10 dk tolerans */
.shn-gun__plan,
.shn-gun__tolerans {
  position: absolute;
  top: 1.6em;
  bottom: 0;
}
.shn-gun__plan {
  left: 12.5%;
  width: 75%;
  border-left: 1px solid var(--shn-eksen);
  border-right: 1px solid var(--shn-eksen);
}
.shn-gun__plan::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--shn-bugun);
  opacity: 0.06;
}
.shn-gun__tolerans {
  width: 2.083%;
  background: repeating-linear-gradient(135deg, var(--shn-eksen) 0 1px, transparent 1px 0.3em);
}
.shn-gun__tolerans--acilis { left: 11.458%; }
.shn-gun__tolerans--kapanis { left: 86.458%; }

/* iz: üstte ışık çizgisi (ince), ortada kepenk çubuğu, altta saat etiketleri */
.shn-gun__iz {
  position: relative;
  z-index: 1;
  height: 3em;
}
.shn-gun__isik {
  position: absolute;
  top: 0.4em;
  height: 0;
  border-top: 2px solid var(--shn-metin-3);
}
.shn-gun__isik::before {
  content: "";
  position: absolute;
  left: -0.32em;
  top: calc(-0.32em - 1px);
  width: 0.64em;
  height: 0.64em;
  border-radius: 50%;
  background: var(--shn-zemin);
  box-shadow: inset 0 0 0 2px var(--shn-metin-3);
}
.shn-gun__acik {
  position: absolute;
  top: 0.95em;
  height: 0.85em;
  border-radius: 0.2em;
  background: var(--shn-bugun);
  transform-origin: 0 50%;
}
.shn-gun__kalan {
  position: absolute;
  top: 0.95em;
  height: 0.85em;
  border: 1px dashed var(--shn-bugun-guclu);
  border-left: 0;
  border-radius: 0 0.2em 0.2em 0;
}
.shn-gun__an {
  position: absolute;
  top: 0.15em;
  height: 1.9em;
  border-left: 2px solid var(--shn-metin);
  transform: translateX(-1px);
}
.shn-gun__zaman {
  position: absolute;
  top: 2.75em;
  color: var(--shn-metin);
  font-size: 0.72em;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
}
.shn-gun__zaman--simdi {
  color: var(--shn-metin-2);
  font-weight: 550;
  transform: translateX(0.45em);
}
.shn-gun__simdi-ad {
  display: none;
}
@container shn (min-width: 30rem) {
  .shn-gun__simdi-ad {
    display: inline;
  }
}
/* bölüm 9 + türetilen: ışık bugün 09:41, açılış 09:58, şimdi 20:20; dün ışık 09:44-22:12, açık 09:54-22:03 */
.shn-gun__isik--bugun { left: 10.521%; width: 66.562%; }
.shn-gun__acik--bugun { left: 12.292%; width: 64.791%; }
.shn-gun__kalan--bugun { left: 77.083%; width: 10.417%; }
.shn-gun__an--bugun { left: 77.083%; }
.shn-gun__zaman--acilis { left: 12.292%; }
.shn-gun__zaman--simdi { left: 77.083%; }
.shn-gun__isik--dun { left: 10.833%; width: 77.917%; }
.shn-gun__acik--dun { left: 11.875%; width: 75.937%; opacity: 0.5; }
.shn-gun__zaman--kapanis { left: 87.812%; }
.shn-gun__anahtar {
  margin-top: 0.9em;
}
.shn-anahtar__kepenk {
  flex: none;
  width: 1.2em;
  height: 0.6em;
  border-radius: 0.15em;
  background: var(--shn-bugun);
}
.shn-anahtar__isik {
  position: relative;
  flex: none;
  width: 1.2em;
  height: 0;
  border-top: 2px solid var(--shn-metin-3);
}
.shn-anahtar__isik::before {
  content: "";
  position: absolute;
  left: -0.1em;
  top: calc(-0.28em - 1px);
  width: 0.56em;
  height: 0.56em;
  border-radius: 50%;
  background: var(--shn-zemin);
  box-shadow: inset 0 0 0 2px var(--shn-metin-3);
}
.shn-anahtar__tolerans {
  flex: none;
  width: 0.8em;
  height: 0.8em;
  border-radius: 0.15em;
  background: repeating-linear-gradient(135deg, var(--shn-metin-3) 0 1px, transparent 1px 0.25em);
}

/* ================================================================ 9. shn-coklu-magaza */
.shn-cm__toplam {
  color: var(--shn-metin-2);
  font-size: 0.8125em;
  white-space: nowrap;
}
/* dar kapta toplam, başlığın altına iner */
.shn-cm .shn-bas {
  flex-wrap: wrap;
}
.shn-cm__toplam b {
  color: var(--shn-metin);
}
.shn-cm__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75em;
}
@container shn (min-width: 26rem) {
  .shn-cm__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.shn-cm__magaza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "ad ad"
    "sayi degisim"
    "kuyruk oran";
  align-items: center;
  gap: 0.3em 0.9em;
  padding: 0.8em 0.95em 0.85em;
  border: 1px solid var(--shn-cizgi);
  border-radius: 0.8em;
  background: var(--shn-zemin);
}
/* uzun şube adı satır kırar (kartta da tabloda da komşu hücreye ve değişim rozetine taşmaz) */
.shn-cm__ad {
  grid-area: ad;
  min-width: 0;
  color: var(--shn-metin);
  font-size: 0.9em;
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.shn-cm__degisim {
  grid-area: degisim;
  justify-self: end;
  font-size: 0.85em;
}
.shn-cm__sayi {
  grid-area: sayi;
  min-width: 0;
  margin-bottom: 0.2em;
  color: var(--shn-metin);
  font-size: 1.55em;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: nowrap;
}
.shn-cm__birim {
  margin-left: 0.3em;
  color: var(--shn-metin-3);
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0;
}
.shn-cm__kuyruk {
  grid-area: kuyruk;
}
.shn-cm__oran {
  grid-area: oran;
}
.shn-cm__mini {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.1em;
}
.shn-cm__mini-ad {
  color: var(--shn-metin-3);
  font-size: 0.72em;
  line-height: 1.25;
}
.shn-cm__mini-deger {
  color: var(--shn-metin);
  font-size: 0.86em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.shn-cm__oran {
  text-align: right;
}
.shn-cm__metre {
  position: relative;
  display: block;
  width: 100%;
  height: 0.35em;
  margin-top: 0.3em;
  overflow: hidden;
  border-radius: 999px;
}
.shn-cm__metre::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--shn-bugun);
  opacity: 0.2;
}
.shn-cm__metre > span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 999px;
  background: var(--shn-bugun);
  transform-origin: 0 50%;
}
/* kasaya ulaşma oranı (bölüm 9): %30 · %26 · %34 · %22 */
.shn-cm__metre--merkez > span { width: 30%; }
.shn-cm__metre--avm > span { width: 26%; }
.shn-cm__metre--cadde > span { width: 34%; }
.shn-cm__metre--outlet > span { width: 22%; }
.shn-cm__baslik-satiri {
  display: none;
}
/* geniş kapta tablo düzeni: aynı sütun şablonu her satırda */
@container shn (min-width: 48rem) {
  .shn-cm__liste {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .shn-cm__baslik-satiri,
  .shn-cm__magaza {
    display: grid;
    grid-template-columns: minmax(8em, 1.4fr) minmax(4.5em, 0.8fr) minmax(6.5em, 1fr) minmax(8em, 1fr) minmax(9.5em, 1.5fr);
    grid-template-areas: "ad sayi degisim kuyruk oran";
    align-items: center;
    gap: 0 1em;
  }
  .shn-cm__baslik-satiri {
    padding: 0 0 0.6em;
    border-bottom: 1px solid var(--shn-cizgi);
    color: var(--shn-metin-3);
    font-size: 0.75em;
    font-weight: 550;
  }
  .shn-cm__baslik-satiri > span:nth-child(n + 2) {
    text-align: right;
  }
  .shn-cm__magaza {
    padding: 0.85em 0;
    border: 0;
    border-bottom: 1px solid var(--shn-izgara);
    border-radius: 0;
    background: transparent;
  }
  .shn-cm__magaza:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .shn-cm__sayi {
    margin: 0;
    font-size: 1.05em;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .shn-cm__birim {
    display: none;
  }
  .shn-cm__mini-ad {
    display: none;
  }
  .shn-cm__kuyruk {
    text-align: right;
  }
  .shn-cm__oran {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6em;
    padding-left: 1.5em;
  }
  .shn-cm__oran .shn-cm__metre {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }
  .shn-cm__oran .shn-cm__mini-deger {
    grid-column: 2;
    grid-row: 1;
    min-width: 2.6em;
    text-align: right;
  }
}

/* ================================================================ 10. shn-akis (nasıl çalışır) */
.shn-akis__ic {
  font-size: 0.875rem;
  font-size: clamp(0.8125rem, 0.7rem + 0.6cqi, 0.9375rem);
}
.shn-akis__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.6em;
}
.shn-akis__adim {
  position: relative;
  display: grid;
  grid-template-columns: 3.4em minmax(0, 1fr);
  align-items: center;
  gap: 1em;
}
.shn-akis__ikon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.4em;
  height: 3.4em;
  border: 1px solid var(--shn-cizgi);
  border-radius: 1em;
  background: var(--shn-zemin);
  box-shadow: var(--shn-golge);
  color: var(--shn-vurgu-yazi);
}
.shn-akis__ikon svg {
  width: 1.6em;
  height: 1.6em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shn-akis__ikon--cihaz {
  border-color: transparent;
  background: var(--renk-gece-900);
  box-shadow: var(--shn-golge), 0 0 0 1px var(--renk-gece-700), 0 0 2em -0.4em var(--renk-turkuaz-500);
  color: var(--renk-turkuaz-400);
}
.shn-akis__dolgu {
  fill: var(--shn-zemin);
}
.shn-akis__metin {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.15em;
}
.shn-akis__no {
  color: var(--shn-vurgu-yazi);
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.shn-akis__baslik {
  color: var(--shn-metin);
  font-size: 1em;
  font-weight: 650;
  line-height: 1.3;
}
.shn-akis__alt {
  color: var(--shn-metin-2);
  font-size: 0.86em;
  line-height: 1.4;
}
/* bağlantı çizgisi: dar kapta dikey */
.shn-akis__bag {
  position: absolute;
  left: 1.7em;
  top: calc(3.4em + 0.35em);
  bottom: calc(-1.6em + 0.35em);
  width: 2px;
  overflow: hidden;
  transform: translateX(-50%);
}
.shn-akis__bag::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, var(--shn-bugun) 0 0.3em, transparent 0.3em 0.6em);
  opacity: 0.55;
}
.shn-akis__bag::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 45%;
  background: linear-gradient(180deg, transparent, var(--shn-bugun-guclu), transparent);
  opacity: 0;
}
@container shn (min-width: 44rem) {
  .shn-akis__liste {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5em;
  }
  .shn-akis__adim {
    grid-template-columns: minmax(0, 1fr);
    align-content: start; /* satır uzayınca iç satırlar esnemez: metinler aynı hizada */
    align-items: start;
    justify-items: center;
    gap: 1em;
    text-align: center;
  }
  .shn-akis__ikon {
    width: 4.2em;
    height: 4.2em;
    border-radius: 1.2em;
  }
  .shn-akis__ikon svg {
    width: 1.85em;
    height: 1.85em;
  }
  .shn-akis__dolgu {
  fill: var(--shn-zemin);
}
.shn-akis__metin {
    align-items: center;
  }
  .shn-akis__bag {
    left: calc(50% + 2.1em + 0.6em);
    right: calc(-50% - 1.5em + 2.1em + 0.6em);
    top: 2.1em;
    bottom: auto;
    width: auto;
    height: 2px;
    transform: translateY(-50%);
  }
  .shn-akis__bag::before {
    background: repeating-linear-gradient(90deg, var(--shn-bugun) 0 0.3em, transparent 0.3em 0.6em);
  }
  .shn-akis__bag::after {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 45%;
    height: auto;
    background: linear-gradient(90deg, transparent, var(--shn-bugun-guclu), transparent);
  }
}

/* ================================================================ 11. shn-kiyas (aynı saate kadar) */
.shn-kiyas__ozet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 0.9em;
  margin-bottom: 0.4em;
}
.shn-kiyas__sayi {
  color: var(--shn-metin);
  font-size: 2em;
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.shn-kiyas__cipler {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}
.shn-kiyas__cip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.25em 0.6em;
  border: 1px solid var(--shn-cizgi);
  border-radius: 999px;
  background: var(--shn-zemin-2);
  color: var(--shn-metin-2);
  font-size: 0.78em;
  white-space: nowrap;
}
.shn-kiyas__cip .shn-degisim {
  font-size: 1em;
}
.shn-kiyas .shn-kutu {
  display: flex;
  flex-direction: column;
}
.shn-kiyas__grafik {
  position: relative;
  flex: 1 1 auto;
  margin-top: 1.9em;
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr);
  grid-template-rows: minmax(12.5em, 1fr) auto;
}
.shn-kiyas__y {
  position: relative;
  grid-column: 1;
  grid-row: 1;
}
.shn-kiyas__y > span {
  position: absolute;
  right: 0.6em;
  transform: translateY(-50%);
  color: var(--shn-metin-3);
  font-size: 0.72em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.shn-kiyas__y > span:nth-child(1) { top: 0; }
.shn-kiyas__y > span:nth-child(2) { top: 33.333%; }
.shn-kiyas__y > span:nth-child(3) { top: 66.667%; }
.shn-kiyas__y > span:nth-child(4) { top: 100%; }
.shn-kiyas__alan {
  position: relative;
  grid-column: 2;
  grid-row: 1;
}
@container shn (min-width: 36rem) {
  .shn-kiyas__grafik {
    grid-template-rows: minmax(15em, 1fr) auto;
  }
}
.shn-kiyas__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.shn-kiyas__svg * {
  vector-effect: non-scaling-stroke;
}
.shn-kiyas__izgara {
  fill: none;
  stroke: var(--shn-izgara);
  stroke-width: 1;
}
.shn-kiyas__taban {
  fill: none;
  stroke: var(--shn-eksen);
  stroke-width: 1;
}
.shn-kiyas__bugun-alan {
  fill: var(--shn-bugun);
  opacity: 0.1;
}
.shn-kiyas__bugun {
  fill: none;
  stroke: var(--shn-bugun);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shn-kiyas__dun {
  fill: none;
  stroke: var(--shn-dun);
  stroke-width: 1.75;
  stroke-dasharray: 6 4;
}
.shn-kiyas__hafta {
  fill: none;
  stroke: var(--shn-hafta);
  stroke-width: 2.25;
  stroke-dasharray: 0.5 4.5;
  stroke-linecap: round;
}
.shn-kiyas__sonra {
  opacity: 0.4;
}
.shn-kiyas__simdi {
  position: absolute;
  top: -0.4em;
  bottom: 0;
  left: 86.111%;
  border-left: 1px solid var(--shn-metin-3);
}
.shn-kiyas__simdi > span {
  position: absolute;
  bottom: 100%;
  left: 0;
  transform: translate(-50%, -0.2em);
  padding: 0.12em 0.5em;
  border-radius: 999px;
  background: var(--shn-metin);
  color: var(--shn-zemin);
  font-size: 0.7em;
  font-weight: 650;
  white-space: nowrap;
}
.shn-kiyas__nokta {
  position: absolute;
  left: 86.111%;
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--shn-zemin);
  transform: translate(-50%, -50%);
}
.shn-kiyas__nokta--bugun { top: 14.4%; background: var(--shn-bugun); }
.shn-kiyas__nokta--hafta { top: 20.733%; background: var(--shn-hafta); }
.shn-kiyas__nokta--dun { top: 23.6%; background: var(--shn-dun); }
.shn-kiyas__x {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  height: 1.5em;
}
.shn-kiyas__x > span {
  position: absolute;
  top: 0.45em;
  transform: translateX(-50%);
  color: var(--shn-metin-3);
  font-size: 0.72em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 10:00-22:00, 2 saatte bir; dar kapta 4 saatte bir */
.shn-kiyas__x > span:nth-child(1) { left: 0; transform: none; }
.shn-kiyas__x > span:nth-child(2) { left: 16.667%; }
.shn-kiyas__x > span:nth-child(3) { left: 33.333%; }
.shn-kiyas__x > span:nth-child(4) { left: 50%; }
.shn-kiyas__x > span:nth-child(5) { left: 66.667%; }
.shn-kiyas__x > span:nth-child(6) { left: 83.333%; }
.shn-kiyas__x > span:nth-child(7) { left: 100%; transform: translateX(-100%); }
.shn-kiyas__x > span:nth-child(even) {
  display: none;
}
@container shn (min-width: 30rem) {
  .shn-kiyas__x > span:nth-child(even) {
    display: block;
  }
}
/* "şimdi" değerleri: dar kapta grafiğin altında gösterge, geniş kapta grafiğin içinde sabit ipucu kutusu */
.shn-kiyas__degerler {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45em 0.6em;
  margin-top: 0.9em;
  padding-top: 0.85em;
  border-top: 1px solid var(--shn-izgara);
  font-size: 0.82em;
}
.shn-kiyas__degerler-bas {
  grid-column: 1 / -1;
  color: var(--shn-metin-3);
  font-size: 0.9em;
  font-weight: 600;
}
.shn-kiyas__degerler .shn-anahtar__cizgi {
  width: 1.3em;
}
.shn-kiyas__degerler-ad {
  color: var(--shn-metin-2);
}
.shn-kiyas__degerler-sayi {
  color: var(--shn-metin);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
@container shn (min-width: 36rem) {
  .shn-kiyas__degerler {
    position: absolute;
    top: 0.8em;
    left: calc(2.6em + 0.9em);
    margin: 0;
    padding: 0.75em 0.9em;
    border: 1px solid var(--shn-cizgi);
    border-radius: 0.75em;
    background: var(--shn-zemin);
    box-shadow: var(--shn-golge);
  }
}

/* ================================================================ 12. shn-tahmin */
.shn-tahmin__sayi {
  color: var(--shn-metin);
  font-size: 2.6em;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.shn-tahmin__aciklama {
  margin-top: 0.3em;
  color: var(--shn-metin-2);
  font-size: 0.86em;
}
.shn-tahmin__ilerleme {
  margin-top: 1.1em;
}
.shn-tahmin__serit {
  position: relative;
  height: 0.6em;
  overflow: hidden;
  border-radius: 999px;
}
.shn-tahmin__serit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--shn-bugun);
  opacity: 0.18;
}
.shn-tahmin__dolu {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 88.55%; /* 1.284 / 1.450 */
  border-radius: 999px;
  background: var(--shn-bugun);
  transform-origin: 0 50%;
}
.shn-tahmin__sayilar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25em 1em;
  margin-top: 0.5em;
  color: var(--shn-metin-2);
  font-size: 0.78em;
}
.shn-tahmin__sayilar b {
  color: var(--shn-metin);
}
.shn-tahmin__tempo {
  margin-top: 1.25em;
  padding-top: 1em;
  border-top: 1px solid var(--shn-izgara);
}
.shn-tahmin__tempo-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25em 0.75em;
  margin-bottom: 0.7em;
}
.shn-tahmin__tempo-baslik {
  color: var(--shn-metin);
  font-size: 0.86em;
  font-weight: 650;
}
.shn-tahmin__sutunlar {
  height: 5.5em;
}
.shn-tahmin__sutunlar .shn-cubuk {
  max-width: 1.25em;
}
/* 20:00 saati: gerçekleşen kısmın üstünde beklenen kısım */
.shn-tahmin__ust-uste {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 1.25em;
  flex-direction: column;
  justify-content: flex-end;
}
.shn-tahmin__ust-uste > .shn-cubuk--tahmin {
  height: 64.66%; /* (133 - 47) / 133 */
}
.shn-tahmin__ust-uste > .shn-cubuk--suruyor {
  height: 35.34%; /* 47 / 133 */
  border-radius: 0;
}
.shn-tahmin__not {
  margin-top: 0.9em;
  color: var(--shn-metin-3);
  font-size: 0.75em;
}

/* ================================================================ 13. sektör çizimleri */
.shn-sektor {
  aspect-ratio: 480 / 320;
}
.shn-sektor__svg {
  width: 100%;
  height: 100%;
}
.shn-cizim {
  fill: none;
  stroke: var(--shn-cizim);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shn-cizim--ince {
  stroke: var(--shn-cizim-ince);
  stroke-width: 1.5;
}
.shn-cizim-dolgu {
  fill: var(--shn-cizim-dolgu);
  stroke: var(--shn-cizim);
  stroke-width: 2;
  stroke-linejoin: round;
}
.shn-cizim-zemin {
  fill: var(--shn-cizim-zemin);
}
.shn-cizim-taban {
  fill: var(--shn-cizim-taban);
}
.shn-cizim-ton {
  fill: var(--shn-bugun);
  opacity: var(--shn-ton);
}
.shn-cizim-ton--guclu {
  opacity: 0.28;
}
.shn-cizim-vurgu {
  fill: var(--shn-bugun);
}
.shn-cizim-vurgu-cizgi {
  fill: none;
  stroke: var(--shn-bugun);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shn-cizim-vurgu-cizgi--ince {
  stroke-width: 1.75;
}
.shn-cizim-kisi {
  fill: var(--shn-metin-3);
}
.shn-cizim-kisi--vurgu {
  fill: var(--shn-bugun);
}
.shn-cizim-isik {
  fill: var(--shn-bugun);
  opacity: 0.22;
}
.shn-cizim-isik--hafif {
  opacity: 0.12;
}
.shn-cizim-isik--koni {
  opacity: 0.13;
}
.shn-cizim-cip {
  fill: var(--shn-zemin);
  stroke: var(--shn-cizgi);
  stroke-width: 1.5;
}

/* ================================================================ 14. hero kartları (shn-kart-*) */
.shn.shn-kart {
  container-type: normal;
  display: inline-block;
  width: auto;
  max-width: 100%;
  font-size: 0.875rem;
}
.shn-kart__ic {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8em;
  border: 1px solid var(--shn-cizgi);
  background: var(--shn-zemin);
  box-shadow: var(--shn-golge);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) and (background: color-mix(in srgb, red 50%, transparent)) {
  .shn-kart__ic {
    background: color-mix(in srgb, var(--shn-zemin) 84%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }
}
.shn-kart-bildirim .shn-kart__ic {
  width: 19.5em;
  max-width: 100%;
  padding: 0.85em 1em 0.85em 0.85em;
  border-radius: 1.1em;
}
.shn-kart__simge {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5em;
  height: 2.5em;
  border-radius: 0.75em;
  background: var(--shn-uyari);
  color: var(--renk-gece-900);
}
.shn-kart__simge svg {
  width: 1.5em;
  height: 1.5em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shn-kart__metin {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.1em;
}
.shn-kart__ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
  color: var(--shn-metin-3);
  font-size: 0.78em;
}
.shn-kart__uygulama {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.shn-kart__uygulama svg {
  width: 0.95em;
  height: 0.95em;
  color: var(--shn-metin);
}
.shn-kart__baslik {
  color: var(--shn-metin);
  font-size: 0.95em;
  font-weight: 650;
  line-height: 1.3;
}
.shn-kart__alt {
  color: var(--shn-metin-2);
  font-size: 0.82em;
}
.shn-kart-artis .shn-kart__ic {
  gap: 0.6em;
  padding: 0.5em 1em 0.5em 0.5em;
  border-radius: 999px;
  white-space: nowrap;
}
.shn-kart-artis .shn-kart__simge {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: var(--shn-bugun);
}
.shn-kart-artis .shn-kart__simge svg {
  width: 1.05em;
  height: 1.05em;
  stroke-width: 2.2;
}
.shn-kart-artis__deger {
  color: var(--shn-metin);
  font-size: 0.95em;
  font-weight: 650;
}
.shn-kart-artis__not {
  color: var(--shn-metin-2);
  font-size: 0.85em;
}

/* ================================================================ 15. hareket (yalnız izin verilirse) */
@media (prefers-reduced-motion: no-preference) {
  .shn-canli::after {
    animation: shn-nabiz 2.4s var(--egri) infinite;
  }
  .shn-akis__bag::after {
    opacity: 1;
    animation: shn-akis-dikey 2.6s linear infinite;
  }
  .shn-akis__adim:nth-child(2) .shn-akis__bag::after {
    animation-delay: 0.65s;
  }
  .shn-akis__adim:nth-child(3) .shn-akis__bag::after {
    animation-delay: 1.3s;
  }
  @container shn (min-width: 44rem) {
    .shn-akis__bag::after {
      animation-name: shn-akis-yatay;
    }
  }
  /* gorseller.js: ekrana girince çubuklar büyür (JS yoksa ya da hareket kapalıysa son hâl görünür) */
  .shn--bekliyor .shn-cubuk,
  .shn--bekliyor .shn-tahmin__ust-uste {
    transform: scaleY(0);
  }
  .shn--bekliyor .shn-seg__cubuk,
  .shn--bekliyor .shn-cm__metre > span,
  .shn--bekliyor .shn-tahmin__dolu {
    transform: scaleX(0);
  }
  .shn--bekliyor .shn-kiyas__svg {
    clip-path: inset(0 100% 0 0);
  }
  .shn--goster .shn-cubuk,
  .shn--goster .shn-tahmin__ust-uste,
  .shn--goster .shn-seg__cubuk,
  .shn--goster .shn-cm__metre > span,
  .shn--goster .shn-tahmin__dolu {
    transform: none;
    transition: transform 0.8s var(--egri);
    transition-delay: calc(var(--shn-sira, 0) * 45ms);
  }
  .shn--goster .shn-kiyas__svg {
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.4s var(--egri);
  }
}
@keyframes shn-nabiz {
  0% {
    transform: scale(0.6);
    opacity: 0.45;
  }
  70%,
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
@keyframes shn-akis-dikey {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(222%);
  }
}
@keyframes shn-akis-yatay {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(222%);
  }
}

/* ================================================================ 16. vitrin yardımcıları (yalnız /_gorseller/) */
.shn-vitrin__ara {
  margin: 2.5rem 0 1rem;
  font-size: var(--boyut-lg);
}
.shn-vitrin__ara code {
  margin-left: 0.5em;
  color: var(--metin-2);
  font-size: 0.8em;
  font-weight: 500;
}
.bolum--koyu .shn-vitrin__ara code {
  color: var(--koyu-metin-2);
}
.shn-vitrin__blok {
  margin-top: 2.5rem;
}
.shn-vitrin__not {
  margin: -0.25rem 0 1.25rem;
}
.shn-vitrin__genislikler {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem;
}
.shn-vitrin__genislikler > * {
  flex: 0 1 auto;
  width: 100%;
}
.shn-vitrin__g380 { max-width: 380px; }
.shn-vitrin__g540 { max-width: 540px; }
.shn-vitrin__g720 { max-width: 720px; }
.shn-vitrin__sahne {
  position: relative;
  padding: 3rem 0 4.5rem;
}
.shn-vitrin__kart-1 {
  position: absolute;
  left: -0.5rem;
  bottom: 1rem;
  z-index: 2;
}
.shn-vitrin__kart-2 {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  z-index: 2;
}
.shn-vitrin__kartlar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* yazdırırken bekleyen (henüz büyümemiş) parçalar son hâlinde */
@media print {
  .shn--bekliyor .shn-cubuk,
  .shn--bekliyor .shn-tahmin__ust-uste,
  .shn--bekliyor .shn-seg__cubuk,
  .shn--bekliyor .shn-cm__metre > span,
  .shn--bekliyor .shn-tahmin__dolu {
    transform: none;
  }
  .shn--bekliyor .shn-kiyas__svg {
    clip-path: none;
  }
}

/* ===== css/cerez.css ===== */
/*
 * Razbin — cerez.css: çerez bandı (sablonlar/parcalar/cerez.html; davranış varliklar/js/analitik.js).
 * Sahibi: sunucu ve form. Yalnız tasarım belirteçlerini kullanır (temel.css). Bant yalnız ayarlar.json'da GA4 ya da
 * Meta Pixel kimliği varken sayfadadır.
 * Masaüstünde sol altta yüzen beyaz kart (sağ alt WhatsApp düğmesinindir), 640 px altında alttan tam genişlik panel.
 * Bant açıkken body[data-cerez-acik] sayfanın altına bandın yüksekliği kadar boşluk bırakır (son satırlar kapanmaz);
 * --cerez-yukseklik değişkenini yüzen öğeler de kullanabilir.
 */

.cerez {
  position: fixed;
  z-index: var(--z-cerez);
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-start;
  padding: 0 var(--kap-kenar) calc(var(--bosluk-5) + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.cerez[hidden] {
  display: none;
}

.cerez__ic {
  display: grid;
  gap: var(--bosluk-4);
  width: 100%;
  max-width: 30rem;
  max-height: calc(100vh - var(--ust-yukseklik) - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--bosluk-6);
  color: var(--metin);
  background-color: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-4);
  box-shadow: var(--golge-3);
  pointer-events: auto;
}

@supports (height: 100svh) {
  .cerez__ic {
    max-height: calc(100svh - var(--ust-yukseklik) - 2rem);
  }
}

.cerez__baslik {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: var(--boyut-lg);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--metin);
}

.cerez__baslik:focus {
  outline: none;
}

.cerez__metin {
  margin: 0;
  font-size: var(--boyut-sm);
  line-height: 1.6;
  color: var(--metin-2);
}

.cerez__metin a {
  font-weight: 500;
  color: var(--vurgu-metin);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* ---------------------------------------------------------------- seçenekler */
.cerez__secenekler {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.cerez__secenek {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bosluk-4);
  padding-block: var(--bosluk-3);
  border-top: 1px solid var(--cizgi);
}

.cerez__secenek:last-child {
  border-bottom: 1px solid var(--cizgi);
}

.cerez__secenek-metin {
  font-size: var(--boyut-sm);
  line-height: 1.5;
  color: var(--metin-2);
  cursor: pointer;
}

.cerez__secenek-metin strong {
  display: block;
  margin-bottom: 0.125rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--metin);
}

.cerez__secenek-metin span {
  display: block;
}

/* açma / kapama anahtarı (role="switch" onay kutusu); topuz arka plan çizimidir, sözde öğe gerekmez */
.cerez__anahtar {
  flex: none;
  width: 2.75rem;
  height: 1.625rem;
  margin: 0;
  border: 0;
  border-radius: var(--yaricap-tam);
  background-color: var(--renk-gri-500);
  background-image: radial-gradient(circle closest-side, var(--renk-gri-0) calc(100% - 3px), transparent calc(100% - 2px));
  background-repeat: no-repeat;
  background-size: 1.625rem 1.625rem;
  background-position: left center;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition:
    background-color var(--gecis-hizli) var(--egri),
    background-position var(--gecis-hizli) var(--egri);
}

.cerez__anahtar:checked {
  background-color: var(--renk-turkuaz-700);
  background-position: right center;
}

.cerez__anahtar:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.cerez__anahtar:focus-visible {
  outline: 2px solid var(--odak);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- düğmeler */
.cerez__dugmeler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-2);
}

.cerez__ayar-ac {
  margin-right: auto;
}

/* seçenekler açıkken ve dar ekranda iki sütun: Reddet | Kabul et; altında tam genişlikte Ayarlar ya da Seçimi kaydet
   (seçenekler açılınca "Ayarlar" gizlenir, yerine "Seçimi kaydet" gelir) */
.cerez[data-secenekler-acik] .cerez__dugmeler {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cerez[data-secenekler-acik] .cerez__red {
  order: 1;
}

.cerez[data-secenekler-acik] .cerez__kabul {
  order: 2;
}

.cerez[data-secenekler-acik] .cerez__kaydet {
  order: 3;
  grid-column: 1 / -1;
}

@media (max-width: 639.98px) {
  .cerez {
    padding: 0;
  }

  .cerez__ic {
    max-width: none;
    gap: var(--bosluk-3);
    padding: var(--bosluk-5) var(--kap-kenar) calc(var(--bosluk-4) + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0;
    border-radius: var(--yaricap-4) var(--yaricap-4) 0 0;
  }

  .cerez__dugmeler {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--bosluk-1);
  }

  .cerez__red {
    order: 1;
  }

  .cerez__kabul {
    order: 2;
  }

  .cerez__ayar-ac,
  .cerez__kaydet {
    order: 3;
    grid-column: 1 / -1;
    margin-right: 0;
  }
}

/* bant açıkken sayfanın son satırları bandın altında kalmasın */
body[data-cerez-acik] {
  padding-bottom: var(--cerez-yukseklik, 0px);
}

@media (prefers-reduced-motion: no-preference) {
  .cerez:not([hidden]) .cerez__ic {
    animation: cerez-giris var(--gecis) var(--egri) both;
  }
}

@keyframes cerez-giris {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cerez__anahtar {
    transition: none;
  }
}

/* yüksek karşıtlık kipi: anahtar tarayıcının kendi onay kutusuna döner */
@media (forced-colors: active) {
  .cerez__anahtar {
    width: 1.25rem;
    height: 1.25rem;
    background-image: none;
    -webkit-appearance: checkbox;
    appearance: auto;
  }
}

@media print {
  .cerez {
    display: none !important;
  }
}

/* ===== css/uygulama.css ===== */
/*
 * Razbin — uygulama.css: mobil uygulama bandı (sablonlar/parcalar/uygulama-bandi.html; davranış varliklar/js/uygulama.js)
 * ve mağaza bağlantıları (parcalar/uygulama-baglari.html: altbilgi ve Mobil Raporlama sayfası). Sahibi: Kabuk.
 * Yalnız tasarım belirteçlerini kullanır (temel.css).
 *
 * Bant 640 px altında alttan tam genişlik şerittir; geniş ekranda (tablet) sol altta yüzen karttır (sağ alt WhatsApp
 * düğmesinindir). Açıkken body[data-uygulama-acik] ve kökte --uygulama-yukseklik (güvenli alan dahil) olur: dar ekranda
 * WhatsApp düğmesi bandın üstüne kayar, sayfanın son satırları bandın altında kalmaz. Çerez bandı ya da mobil menü
 * açıkken bant görünmez.
 */

/* ================================================================ bant */
.uygulama-bandi {
  position: fixed;
  z-index: var(--z-yuzen);
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--bosluk-3);
  padding:
    var(--bosluk-3)
    max(var(--kap-kenar), env(safe-area-inset-right, 0px))
    calc(var(--bosluk-3) + env(safe-area-inset-bottom, 0px))
    max(var(--bosluk-2), env(safe-area-inset-left, 0px));
  color: var(--metin);
  background-color: var(--yuzey);
  border-top: 1px solid var(--cizgi);
  box-shadow: 0 -12px 32px -16px rgba(11, 20, 38, 0.32);
}

/* Apple'ın akıllı bandındaki gibi kapatma solda; dokunma alanı 36 × 44 px */
.uygulama-bandi__kapat {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.75rem;
  margin: 0 calc(var(--bosluk-1) * -1) 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--yaricap-2);
  color: var(--metin-2);
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--gecis-hizli) var(--egri), background-color var(--gecis-hizli) var(--egri);
}

.uygulama-bandi__kapat .ikon {
  width: 1.125rem;
  height: 1.125rem;
}

.uygulama-bandi__kapat:hover {
  color: var(--metin);
  background-color: var(--yuzey-2);
}

.uygulama-bandi__kapat:focus-visible {
  outline: 2px solid var(--odak);
  outline-offset: 0;
}

/* uygulama simgesinin küçüğü: gece mavisi kare, beyaz işaret, turkuaz nokta (mağazadaki simgeyle aynı) */
.uygulama-bandi__simge {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  color: var(--renk-gri-0);
  background-color: var(--renk-gece-900);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.uygulama-bandi__simge .logo-isaret {
  display: block;
  width: auto;
  height: 1.625rem;
}

.uygulama-bandi__metin {
  flex: 1 1 auto;
  display: grid;
  gap: 0.125rem;
  min-width: 0;
  margin: 0;
  line-height: 1.25;
}

.uygulama-bandi__baslik {
  font-family: var(--yazi-baslik);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--metin);
}

.uygulama-bandi__alt {
  font-size: 0.8125rem;
  color: var(--metin-2);
}

.uygulama-bandi__dugme {
  flex: none;
}

@media (prefers-reduced-motion: no-preference) {
  .uygulama-bandi:not([hidden]) {
    animation: uygulama-giris 420ms var(--egri) 400ms backwards;
  }
}

@keyframes uygulama-giris {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
}

/* çerez bandı ya da mobil menü açıkken görünmez (çerez bandı kapanınca uygulama.js açar) */
body[data-cerez-acik] .uygulama-bandi,
html.menu-acik .uygulama-bandi {
  visibility: hidden;
}

@media (max-width: 639.98px) {
  body[data-uygulama-acik]:not([data-cerez-acik]) {
    padding-bottom: var(--uygulama-yukseklik, 0px);
  }

  body[data-uygulama-acik]:not([data-cerez-acik]) .whatsapp-dugme {
    bottom: calc(var(--uygulama-yukseklik, 4.5rem) + 0.75rem);
  }
}

/* tablet: sol altta yüzen kart; WhatsApp düğmesi yerinde kalır */
@media (min-width: 640px) {
  .uygulama-bandi {
    left: max(1rem, env(safe-area-inset-left, 0px));
    right: auto;
    bottom: max(1rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem));
    width: min(26rem, calc(100% - 7rem));
    padding: var(--bosluk-3) var(--bosluk-4) var(--bosluk-3) var(--bosluk-2);
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap-4);
    box-shadow: var(--golge-3);
  }
}

@media (forced-colors: active) {
  .uygulama-bandi {
    border: 1px solid CanvasText;
  }
}

@media print {
  .uygulama-bandi {
    display: none !important;
  }
}

/* ================================================================ mağaza bağlantıları */
.uygulama-baglari {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.uygulama-baglari > li {
  margin: 0;
}

.uygulama-bagi {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3.25rem;
  padding: 0.5rem 1.125rem 0.5rem 0.875rem;
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--yaricap-3);
  color: var(--metin);
  background-color: var(--yuzey);
  text-decoration: none;
  transition:
    border-color var(--gecis-hizli) var(--egri),
    background-color var(--gecis-hizli) var(--egri),
    transform var(--gecis-hizli) var(--egri);
}

.uygulama-bagi:hover {
  color: var(--metin);
  text-decoration: none;
  border-color: var(--vurgu-cizgi);
  background-color: var(--yuzey-2);
}

.uygulama-bagi:active {
  transform: translateY(1px);
}

.uygulama-bagi:focus-visible {
  outline: 2px solid var(--odak);
  outline-offset: 2px;
}

.uygulama-bagi__ikon {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  color: var(--vurgu-metin);
}

.uygulama-bagi__metin {
  display: grid;
  line-height: 1.2;
  text-align: left;
}

.uygulama-bagi__ust {
  font-size: var(--boyut-xs);
  color: var(--metin-2);
}

.uygulama-bagi__ad {
  font-family: var(--yazi-baslik);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* altbilgide: iletişim listesinin altında */
.alt__uygulama {
  margin-top: var(--bosluk-6);
}

.alt__uygulama-baslik {
  margin: 0 0 var(--bosluk-3);
  font-size: var(--boyut-sm);
  font-weight: 600;
  color: var(--metin);
}

@media print {
  .alt__uygulama {
    display: none !important;
  }
}

/* ===== css/sayfa/404.css ===== */
/*
 * Sayfa bulunamadı (/404.html; tek dosya, iki dilli, noindex) — sayfa ajanı.
 * Yalnız bu sayfaya özgü yerleşim ayarları; bütün seçiciler .sayfa-404 ile başlar (SOZLESME.md bölüm 6).
 * Renk yalnız anlamsal belirteçlerden; boşluk --bosluk-* ve bileşenlerin kendi ölçeğinden.
 * Türkçe blok ortalı alt sayfa hero'sudur (.hero--orta, bileşen); burada simge, hızlı bağlantılar ve İngilizce blok.
 */

/* ---------------------------------------------------------------- Türkçe blok: pusula simgesi */
/* turkuaz hale ile çevrili büyük simge; blok düzeyinde durur ki satır kutusunun alt boşluğunu almasın
   (.hero--orta onu eksene ortalar). Alt boşluk üst başlığın boşluğuyla birleşir. */
.sayfa-404 .yok-ikon {
  display: grid;
  margin-bottom: var(--bosluk-7);
  box-shadow:
    inset 0 0 0 1px var(--vurgu-cizgi),
    0 0 0 var(--bosluk-2) color-mix(in srgb, var(--vurgu) 9%, transparent),
    var(--golge-parilti);
}

/* hızlı bağlantılar: düğmelerin altında, ince bir çizgiyle ayrılmış sakin satır */
.sayfa-404 .yok-hizli {
  justify-content: center;
  width: min(100%, 30rem);
  gap: var(--bosluk-1) var(--bosluk-6);
  padding-top: var(--bosluk-5);
  border-top: 1px solid var(--cizgi);
}

.sayfa-404 .hero__metin > .yok-hizli {
  margin-top: var(--bosluk-8);
}

/* dar ekran (< 480 px): tam genişlik düğmelerde etiket tek satırda kalsın (çağrı bandındaki ölçü) */
@media (max-width: 479.98px) {
  .sayfa-404 :is(.hero__dugmeler, .yok-en__ic > .dugme-grubu) > .dugme:not(.dugme--metin) {
    padding-inline: var(--bosluk-4);
  }

  .sayfa-404 .hero__dugmeler > .dugme--buyuk:not(.dugme--metin) {
    font-size: clamp(0.9375rem, 0.4375rem + 2.5vw, 1.0625rem);
  }
}

/* ---------------------------------------------------------------- İngilizce blok: açık zeminde ortalı */
.sayfa-404 .yok-en__ic {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sayfa-404 .yok-en__ic > * + * {
  margin-top: var(--bosluk-4);
}

.sayfa-404 .yok-en__ic > .ust-baslik {
  justify-content: center;
}

.sayfa-404 .yok-en__ic > .ust-baslik + * {
  margin-top: 0.875rem;
}

.sayfa-404 .yok-en__ic > .dugme-grubu {
  justify-content: center;
  margin-top: var(--bosluk-7);
}

.sayfa-404 .yok-en__ic > .yok-hizli {
  margin-top: var(--bosluk-7);
}

/* ===== css/sayfa/ana-sayfa.css ===== */
/*
 * Razbin — ana sayfa (/ ve /en/). Sahibi: ana sayfa sayfa ajanı.
 * Yalnız sayfaya özgü yerleşim; renk, ölçü ve gölge tasarım sisteminin belirteçlerinden (SOZLESME.md bölüm 5).
 * Bütün seçiciler .sayfa-ana-sayfa ile başlar (SOZLESME.md bölüm 6).
 */

/* ---------------------------------------------------------------- 1 · hero: düğmelerin altındaki kısa not */
.sayfa-ana-sayfa .sayfa-ana-sayfa__not {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2) var(--bosluk-5);
  font-size: var(--boyut-sm);
  line-height: 1.45;
  color: var(--metin-2);
}

.sayfa-ana-sayfa .sayfa-ana-sayfa__not > li {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-2);
}

.sayfa-ana-sayfa .sayfa-ana-sayfa__not .ikon {
  flex: none;
  color: var(--vurgu-metin);
}

/* hero görseli (tlf-ikili): iki telefonda önde Mağazam alta, arkada Kasa üste yaslı. Yüzen kartlar boş köşelere
   oturur, ekran içeriği örtülmez: bildirim kartı öndeki telefonun yalnız üst kenarına biner (alt kenarı çerçeve
   yüksekliğinin %9,3'ünde; telefonun üstü %7,3'te, durum çubuğundaki saat %10,3'te başlar; oranlar tlf-ikili'nin sabit
   en/boyundan gelir, kartın boyundan bağımsızdır), artış çipi sağ altta arkadaki telefonun altındaki boşluktadır.
   640 px altında kartlar görselin altında akar. */
.sayfa-ana-sayfa .hero__gorsel {
  container: ana-hero / inline-size;
}

@media (min-width: 640px) {
  .sayfa-ana-sayfa .hero__gorsel .gorsel-yuzen--sol-ust {
    top: auto;
    bottom: 90.7%;
  }

  .sayfa-ana-sayfa .hero__gorsel .gorsel-yuzen--sag-alt {
    bottom: 0;
  }

  /* görsel 460-520 px iken (yaklaşık 1100-1230 px ekran) öndeki telefon artış çipinin altına uzanır; çip biraz aşağı
     iner ki telefonun alt menüsünü değil, yalnız alt kenarını örtsün */
  @container ana-hero (min-width: 460px) and (max-width: 519.98px) {
    .sayfa-ana-sayfa .hero__gorsel .gorsel-yuzen--sag-alt {
      bottom: calc(-1 * var(--bosluk-5));
    }
  }
}

/* Görsel 460 px'ten darsa tlf-ikili tek telefona iner (1024-1100 px arası ekranlar; kap sorgusu bilmeyen tarayıcıda her
   genişlik): telefon çerçeveyi doldurur, köşedeki kart ekranın üstünü ve alt menüyü örterdi. O zaman kartlar telefonun
   altında ortalı akar (640 px altındaki gibi). */
@container ana-hero (max-width: 459.98px) {
  .sayfa-ana-sayfa .hero__gorsel .gorsel-cerceve > .gorsel-yuzen {
    position: relative;
    inset: auto;
    max-width: 100%;
    margin: var(--bosluk-3) auto 0;
  }
}

@supports not (container-type: inline-size) {
  .sayfa-ana-sayfa .hero__gorsel .gorsel-cerceve > .gorsel-yuzen {
    position: relative;
    inset: auto;
    max-width: 100%;
    margin: var(--bosluk-3) auto 0;
  }
}

/* ---------------------------------------------------------------- 2 · sorun: solda bölüm başı, sağda üç satır */
.sayfa-ana-sayfa .sayfa-ana-sayfa__sorunlar {
  display: grid;
  gap: var(--bosluk-4);
}

@media (min-width: 640px) {
  /* kart yatay: simge solda, başlık ve metin sağda */
  .sayfa-ana-sayfa .sayfa-ana-sayfa__sorunlar > .kart {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--bosluk-6);
    row-gap: var(--bosluk-2);
    align-items: start;
  }

  .sayfa-ana-sayfa .sayfa-ana-sayfa__sorunlar > .kart > * {
    margin-top: 0;
  }

  .sayfa-ana-sayfa .sayfa-ana-sayfa__sorunlar > .kart > .kart__ikon {
    grid-row: 1 / span 2;
  }

  .sayfa-ana-sayfa .sayfa-ana-sayfa__sorunlar > .kart > :not(.kart__ikon) {
    grid-column: 2;
  }

  .sayfa-ana-sayfa .sayfa-ana-sayfa__sorunlar .kart__baslik {
    padding-top: var(--bosluk-2);
  }
}

@media (min-width: 960px) {
  .sayfa-ana-sayfa .sayfa-ana-sayfa__sorun {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--bosluk-10);
    align-items: center;
  }

  .sayfa-ana-sayfa .sayfa-ana-sayfa__sorun > .bolum-basi {
    margin-bottom: 0;
  }
}

/* ---------------------------------------------------------------- 3 · çözümler: ızgaranın altında ortalı bağlantı */
.sayfa-ana-sayfa .sayfa-ana-sayfa__alt-bag {
  display: flex;
  justify-content: center;
  margin-top: clamp(var(--bosluk-8), 4vw, var(--bosluk-10));
}

/* ---------------------------------------------------------------- 5 · nasıl çalışır: akış kartı ve adımlar */
.sayfa-ana-sayfa .sayfa-ana-sayfa__adimlar {
  margin-top: clamp(var(--bosluk-9), 6vw, var(--bosluk-11));
  padding-top: clamp(var(--bosluk-8), 4vw, var(--bosluk-10));
  border-top: 1px solid var(--cizgi);
}

/* dar ekranda (tek sütunlu ikili) akış kartı metin sütunu genişliğinde kalır; içi dikey akış */
@media (max-width: 959.98px) {
  .sayfa-ana-sayfa .sayfa-ana-sayfa__akis {
    max-width: 32rem;
  }
}

/* ---------------------------------------------------------------- 6 · ölçümler: ölçüt şeridi */
.sayfa-ana-sayfa .sayfa-ana-sayfa__olcutler {
  margin-top: clamp(var(--bosluk-9), 5vw, var(--bosluk-11));
}

/* üç kısa ölçüt 640 px'ten itibaren tek satır (izgara--3'ün 2 + 1 düzeni yerine) */
@media (min-width: 640px) {
  .sayfa-ana-sayfa .sayfa-ana-sayfa__olcut-izgara {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------- 7 · sektörler: başlık satırı ve kart görseli */
.sayfa-ana-sayfa .sayfa-ana-sayfa__bas-satir {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bosluk-3) var(--bosluk-8);
  margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
}

.sayfa-ana-sayfa .sayfa-ana-sayfa__bas-satir > .bolum-basi {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------- 8 · neden Razbin: solda bölüm başı, sağda 2 × 2
   bölüm başı kartların ortasına hizalanır (sorun bölümüyle aynı düzen) */
@media (min-width: 1024px) {
  .sayfa-ana-sayfa .sayfa-ana-sayfa__neden {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--bosluk-10);
    align-items: center;
  }

  .sayfa-ana-sayfa .sayfa-ana-sayfa__neden > .bolum-basi {
    margin-bottom: 0;
  }
}

/* adım numarası CSS sayacıyla yazılır: numara metni ("2") ile başlığın ("Kurulum") birleşmesi ölçek iddiası
   denetimine takılıyordu ("2 Kurulum"); ol sırayı zaten ekran okuyucuya söyler, numara görseldir */
.sayfa-ana-sayfa .sayfa-ana-sayfa__adimlar {
  counter-reset: ana-adim;
}

.sayfa-ana-sayfa .sayfa-ana-sayfa__adimlar > .adim {
  counter-increment: ana-adim;
}

.sayfa-ana-sayfa .sayfa-ana-sayfa__adimlar .adim__no:empty::before {
  content: counter(ana-adim);
}

/* ===== css/sayfa/bilesenler.css ===== */
/*
 * Bileşen vitrini (/_bilesenler/, taslak sayfa) — yalnız vitrine özgü yardımcılar (etiket, renk örneği, yer tutucu).
 * Sahibi: Tasarım sistemi. Gerçek sayfalarda kullanılmaz; bütün seçiciler .sayfa-bilesenler ile başlar.
 */

/* örnek etiketi: "Türler", ".dugme--birincil" … */
.sayfa-bilesenler .vitrin-etiket {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--metin-3);
}

.sayfa-bilesenler .vitrin-etiket code,
.sayfa-bilesenler .giris code {
  padding: 0.0625rem 0.4375rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-1);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--metin-2);
  background-color: var(--yuzey-2);
}

.sayfa-bilesenler .vitrin-blok + .vitrin-blok {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

/* koyu ya da çerçeveli örnek alanı */
.sayfa-bilesenler .vitrin-panel {
  padding: clamp(1.25rem, 0.9rem + 2vw, 2.5rem);
  border: 1px dashed var(--cizgi-guclu);
  border-radius: var(--yaricap-4);
}

.sayfa-bilesenler .vitrin-panel.tema-koyu {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background-color: var(--renk-gece-900);
  background-image: radial-gradient(70% 60% at 50% 0%, rgba(25, 195, 214, 0.1), transparent 70%);
}

.sayfa-bilesenler .vitrin-panel > * + * {
  margin-top: 1.5rem;
}

.sayfa-bilesenler .vitrin-dar {
  max-width: 22.5rem;
}

/* içindekiler */
.sayfa-bilesenler .vitrin-icindekiler {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sayfa-bilesenler .vitrin-icindekiler a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.375rem 1rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-tam);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--metin-2);
  background-color: var(--yuzey);
  transition: border-color var(--gecis-hizli) var(--egri), color var(--gecis-hizli) var(--egri);
}

.sayfa-bilesenler .vitrin-icindekiler a:hover {
  border-color: var(--vurgu-cizgi);
  color: var(--vurgu-metin);
}

/* ızgara örneklerindeki kutular */
.sayfa-bilesenler .vitrin-kutu {
  display: grid;
  place-items: center;
  min-height: 4.5rem;
  padding: 0.75rem;
  border: 1px dashed var(--vurgu-cizgi);
  border-radius: var(--yaricap-2);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  color: var(--vurgu-metin-2);
  background-color: var(--vurgu-zemin);
}

/* renk örnekleri */
.sayfa-bilesenler .vitrin-renkler {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.75rem), 1fr));
  gap: 0.75rem;
}

.sayfa-bilesenler .vitrin-renk {
  overflow: hidden;
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-3);
  font-size: 0.8125rem;
  line-height: 1.4;
  background-color: var(--yuzey);
}

.sayfa-bilesenler .vitrin-renk::before {
  content: "";
  display: block;
  height: 4rem;
  background-color: var(--vitrin-renk);
  box-shadow: inset 0 -1px 0 rgba(11, 20, 38, 0.08);
}

.sayfa-bilesenler .vitrin-renk > span {
  display: block;
  padding: 0.5rem 0.75rem 0.625rem;
  color: var(--metin-2);
}

.sayfa-bilesenler .vitrin-renk strong {
  display: block;
  font-weight: 650;
  color: var(--metin);
}

.sayfa-bilesenler .vitrin-renk--gece-950 { --vitrin-renk: var(--renk-gece-950); }
.sayfa-bilesenler .vitrin-renk--gece-900 { --vitrin-renk: var(--renk-gece-900); }
.sayfa-bilesenler .vitrin-renk--gece-800 { --vitrin-renk: var(--renk-gece-800); }
.sayfa-bilesenler .vitrin-renk--gece-700 { --vitrin-renk: var(--renk-gece-700); }
.sayfa-bilesenler .vitrin-renk--gece-600 { --vitrin-renk: var(--renk-gece-600); }
.sayfa-bilesenler .vitrin-renk--turkuaz-200 { --vitrin-renk: var(--renk-turkuaz-200); }
.sayfa-bilesenler .vitrin-renk--turkuaz-300 { --vitrin-renk: var(--renk-turkuaz-300); }
.sayfa-bilesenler .vitrin-renk--turkuaz-400 { --vitrin-renk: var(--renk-turkuaz-400); }
.sayfa-bilesenler .vitrin-renk--turkuaz-500 { --vitrin-renk: var(--renk-turkuaz-500); }
.sayfa-bilesenler .vitrin-renk--turkuaz-600 { --vitrin-renk: var(--renk-turkuaz-600); }
.sayfa-bilesenler .vitrin-renk--turkuaz-700 { --vitrin-renk: var(--renk-turkuaz-700); }
.sayfa-bilesenler .vitrin-renk--turkuaz-800 { --vitrin-renk: var(--renk-turkuaz-800); }
.sayfa-bilesenler .vitrin-renk--gri-0 { --vitrin-renk: var(--renk-gri-0); }
.sayfa-bilesenler .vitrin-renk--gri-50 { --vitrin-renk: var(--renk-gri-50); }
.sayfa-bilesenler .vitrin-renk--gri-200 { --vitrin-renk: var(--renk-gri-200); }
.sayfa-bilesenler .vitrin-renk--gri-400 { --vitrin-renk: var(--renk-gri-400); }
.sayfa-bilesenler .vitrin-renk--gri-600 { --vitrin-renk: var(--renk-gri-600); }
.sayfa-bilesenler .vitrin-renk--gri-900 { --vitrin-renk: var(--renk-gri-900); }
.sayfa-bilesenler .vitrin-renk--basari { --vitrin-renk: var(--basari); }
.sayfa-bilesenler .vitrin-renk--uyari { --vitrin-renk: var(--uyari); }
.sayfa-bilesenler .vitrin-renk--hata { --vitrin-renk: var(--hata); }
.sayfa-bilesenler .vitrin-renk--mavi { --vitrin-renk: var(--renk-mavi-500); }

/* yazı örnekleri */
.sayfa-bilesenler .vitrin-yazi > * + * {
  margin-top: 0.75rem;
}

.sayfa-bilesenler .vitrin-yazi > .vitrin-etiket {
  margin-top: 2rem;
  margin-bottom: 0;
}

.sayfa-bilesenler .vitrin-yazi > .vitrin-etiket:first-child {
  margin-top: 0;
}

/* ürün görseli yer tutucusu (gerçek görseller tlf-* / shn-* parçalarıdır) */
.sayfa-bilesenler .vitrin-gorsel {
  display: grid;
  gap: 0.875rem;
  padding: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  border-radius: calc(var(--yaricap-5) - 0.5rem);
  background-color: var(--yuzey);
  box-shadow: inset 0 0 0 1px var(--cizgi);
}

.sayfa-bilesenler .tema-koyu .vitrin-gorsel,
.sayfa-bilesenler .hero .vitrin-gorsel {
  background-color: rgba(6, 11, 22, 0.55);
}

.sayfa-bilesenler .vitrin-gorsel__bas {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sayfa-bilesenler .vitrin-gorsel__bas::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: var(--renk-turkuaz-400);
  box-shadow: 0 0 0 4px rgba(56, 211, 227, 0.18);
}

.sayfa-bilesenler .vitrin-gorsel__bas::after {
  content: "";
  width: 40%;
  height: 0.5rem;
  border-radius: 999px;
  background-color: var(--yuzey-2);
  box-shadow: inset 0 0 0 1px var(--cizgi);
}

.sayfa-bilesenler .vitrin-gorsel__olcutler {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
}

.sayfa-bilesenler .vitrin-gorsel__olcutler > span {
  height: 3.5rem;
  border-radius: var(--yaricap-2);
  background-color: var(--yuzey-2);
  box-shadow: inset 0 0 0 1px var(--cizgi);
}

.sayfa-bilesenler .vitrin-gorsel__olcutler > span:first-child {
  background-image: linear-gradient(135deg, rgba(25, 195, 214, 0.22), transparent 70%);
}

.sayfa-bilesenler .vitrin-gorsel__grafik {
  display: flex;
  align-items: flex-end;
  gap: 4%;
  height: clamp(7rem, 5rem + 8vw, 11rem);
  padding: 0.875rem 0.875rem 0;
  border-radius: var(--yaricap-2);
  background-color: var(--yuzey-2);
  box-shadow: inset 0 0 0 1px var(--cizgi);
}

.sayfa-bilesenler .vitrin-gorsel__grafik > span {
  flex: 1 1 0;
  border-radius: 4px 4px 0 0;
  background-image: linear-gradient(180deg, var(--renk-turkuaz-400), rgba(25, 195, 214, 0.35));
}

/* örnek gün: saatlik ziyaretçi (sözleşme bölüm 9), en yüksek 187 = %100 */
.sayfa-bilesenler .vitrin-gorsel__grafik > span:nth-child(1) { height: 25%; }
.sayfa-bilesenler .vitrin-gorsel__grafik > span:nth-child(2) { height: 40%; }
.sayfa-bilesenler .vitrin-gorsel__grafik > span:nth-child(3) { height: 56%; }
.sayfa-bilesenler .vitrin-gorsel__grafik > span:nth-child(4) { height: 69%; }
.sayfa-bilesenler .vitrin-gorsel__grafik > span:nth-child(5) { height: 73%; }
.sayfa-bilesenler .vitrin-gorsel__grafik > span:nth-child(6) { height: 60%; }
.sayfa-bilesenler .vitrin-gorsel__grafik > span:nth-child(7) { height: 65%; }
.sayfa-bilesenler .vitrin-gorsel__grafik > span:nth-child(8) { height: 79%; }
.sayfa-bilesenler .vitrin-gorsel__grafik > span:nth-child(9) { height: 95%; }
.sayfa-bilesenler .vitrin-gorsel__grafik > span:nth-child(10) { height: 100%; }

.sayfa-bilesenler .vitrin-gorsel__grafik > span:nth-child(11) {
  height: 25%;
  background-image: repeating-linear-gradient(135deg, rgba(56, 211, 227, 0.45) 0 4px, rgba(56, 211, 227, 0.15) 4px 8px);
}

/* ===== css/sayfa/cerez.css ===== */
/* Çerez Politikası (/cerez-politikasi/, /en/cookie-policy/) — sayfa ajanı.
 * Beş yasal sayfanın ortak yerleşimi (kvkk, gizlilik, cerez, kullanim, veri-silme; aynı kurallar her dosyada kendi önekiyle):
 *   içindekiler + öbür yasal metinler (dar ekranda metnin üstünde kart; >=1024 px'te sağ sütunda, sığarsa yapışkan)
 *   + .yasal-metin (tasarım sistemi; burada yalnız bölüm ayracı ve numarası) + soru satırı. Tablo kuralları sayfaya özgü.
 * Bütün seçiciler .sayfa-cerez ile başlar; renk, boşluk, yarıçap ve geçiş yalnız belirteçlerden.
 */

/* ---------------------------------------------------------------- yerleşim */
.sayfa-cerez .sayfa-cerez__duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bosluk-8);
  max-width: 72ch;
}

.sayfa-cerez .sayfa-cerez__govde {
  min-width: 0;
}

/* ---------------------------------------------------------------- içindekiler (dar ekranda metnin üstünde kart) */
.sayfa-cerez .sayfa-cerez__yan {
  min-width: 0;
  padding: var(--bosluk-5);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-4);
  background-color: var(--zemin-2);
}

.sayfa-cerez .sayfa-cerez__gezinme > .ust-baslik {
  margin-bottom: var(--bosluk-3);
}

.sayfa-cerez .sayfa-cerez__liste > li {
  break-inside: avoid;
}

.sayfa-cerez .sayfa-cerez__liste a {
  display: flex;
  gap: var(--bosluk-2);
  padding: var(--bosluk-2) 0 var(--bosluk-2) var(--bosluk-4);
  border-left: 2px solid var(--cizgi);
  font-size: var(--boyut-sm);
  font-weight: 500;
  line-height: 1.45;
  color: var(--metin-2);
  text-decoration: none;
  transition: color var(--gecis-hizli) var(--egri), border-color var(--gecis-hizli) var(--egri);
}

.sayfa-cerez .sayfa-cerez__liste a:hover {
  color: var(--vurgu-metin);
  border-left-color: var(--vurgu);
}

.sayfa-cerez .sayfa-cerez__liste a[aria-current="page"] {
  font-weight: 650;
  color: var(--metin);
  border-left-color: var(--vurgu-metin);
}

.sayfa-cerez .sayfa-cerez__no {
  flex: none;
  min-width: 1.75em;
  color: var(--metin-3);
  font-variant-numeric: tabular-nums;
}

/* öbür yasal metinler yalnız geniş ekranda: dar ekranda altbilgi aynı bağlantıları hemen aşağıda verir */
.sayfa-cerez .sayfa-cerez__diger {
  display: none;
}

@media (min-width: 640px) {
  .sayfa-cerez .sayfa-cerez__yan {
    padding: var(--bosluk-6) var(--bosluk-7);
  }

  .sayfa-cerez .sayfa-cerez__gezinme:first-child > .sayfa-cerez__liste {
    columns: 2;
    column-gap: var(--bosluk-6);
  }
}

/* ---------------------------------------------------------------- geniş ekran: metin solda, içindekiler sağda */
@media (min-width: 1024px) {
  .sayfa-cerez .sayfa-cerez__duzen {
    grid-template-columns: minmax(0, 72ch) minmax(14rem, 18rem);
    grid-template-areas: "metin yan";
    justify-content: space-between;
    column-gap: var(--bosluk-10);
    max-width: none;
  }

  .sayfa-cerez .sayfa-cerez__govde {
    grid-area: metin;
  }

  /* sağ iç pay: 1024-1335 px arasında sağ alttaki yüzen WhatsApp düğmesi bu sütunun kenarına biner */
  .sayfa-cerez .sayfa-cerez__yan {
    grid-area: yan;
    align-self: start;
    padding: 0 var(--bosluk-8) 0 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }

  .sayfa-cerez .sayfa-cerez__gezinme:first-child > .sayfa-cerez__liste {
    columns: auto;
  }

  .sayfa-cerez .sayfa-cerez__diger {
    display: block;
    margin-top: var(--bosluk-7);
    padding-top: var(--bosluk-7);
    border-top: 1px solid var(--cizgi);
  }
}

/* yapışkanlık yalnız sütun ekrana sığdığında (alçak pencerede alt bağlantılar erişilmez kalmasın) */
@media (min-width: 1024px) and (min-height: 50rem) {
  .sayfa-cerez .sayfa-cerez__yan {
    position: sticky;
    top: calc(var(--ust-yukseklik) + var(--bosluk-7));
  }
}

/* ---------------------------------------------------------------- yasal metin: bölüm ayracı ve numarası */
.sayfa-cerez .yasal-metin h2 {
  margin-top: var(--bosluk-8);
  padding-top: var(--bosluk-7);
  border-top: 1px solid var(--cizgi);
}

.sayfa-cerez .yasal-metin > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.sayfa-cerez .sayfa-cerez__bolum-no {
  color: var(--vurgu-metin);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- soru satırı */
.sayfa-cerez .sayfa-cerez__soru {
  display: flex;
  align-items: center;
  gap: var(--bosluk-4);
  max-width: 72ch;
  margin-top: var(--bosluk-10);
  padding: var(--bosluk-4) var(--bosluk-5);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-4);
  background-color: var(--zemin-2);
}

.sayfa-cerez .sayfa-cerez__soru > p {
  min-width: 0;
  color: var(--metin-2);
}

.sayfa-cerez .sayfa-cerez__soru a {
  font-weight: 600;
  overflow-wrap: anywhere;
}

@media print {
  .sayfa-cerez .sayfa-cerez__yan,
  .sayfa-cerez .sayfa-cerez__soru {
    display: none;
  }
}

/* ---------------------------------------------------------------- yalnız bu sayfada: çerez tablosu ve ayar düğmesi */
.sayfa-cerez .yasal-metin .tablo code {
  padding: 0.0625rem 0.375rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-1);
  font-size: 0.8125rem;
  color: var(--metin);
  background-color: var(--yuzey-2);
  white-space: nowrap;
}

.sayfa-cerez .sayfa-cerez__sure {
  white-space: nowrap;
}

/* tablonun altındaki not tabloya yakın durur */
.sayfa-cerez .yasal-metin .tablo-sarici + .metin-kucuk {
  margin-top: var(--bosluk-3);
  color: var(--metin-3);
}

/* telefonda beş sütun sığmaz: her satır etiketli küçük bir karta dönüşür (yatay kaydırma yok). Tablo anlamı
   işaretlemedeki role="table/row/cell…" ile korunur; sütun başlıkları ekran okuyucu için yerinde kalır. */
@media (max-width: 639px) {
  .sayfa-cerez .sayfa-cerez__tablo {
    display: block;
    min-width: 0;
    font-size: var(--boyut-sm);
  }

  .sayfa-cerez .sayfa-cerez__tablo thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .sayfa-cerez .sayfa-cerez__tablo :is(tbody, tr, th, td) {
    display: block;
  }

  .sayfa-cerez .sayfa-cerez__tablo tbody tr {
    padding: var(--bosluk-4);
  }

  .sayfa-cerez .sayfa-cerez__tablo tbody tr + tr {
    border-top: 1px solid var(--cizgi);
  }

  .sayfa-cerez .sayfa-cerez__tablo tbody :is(th, td) {
    padding: 0;
    border: 0;
  }

  .sayfa-cerez .sayfa-cerez__tablo tbody th {
    margin-bottom: var(--bosluk-2);
    font-size: var(--boyut-md);
  }

  .sayfa-cerez .sayfa-cerez__tablo tbody td {
    position: relative;
    padding: var(--bosluk-1) 0 var(--bosluk-1) 6.5rem;
  }

  .sayfa-cerez .sayfa-cerez__tablo tbody td::before {
    content: attr(data-etiket);
    content: attr(data-etiket) / "";
    position: absolute;
    top: var(--bosluk-1);
    left: 0;
    width: 6rem;
    font-weight: 600;
    color: var(--metin-3);
  }
}

/* ===== css/sayfa/cozum-coklu.css ===== */
/* Çoklu Mağaza Yönetimi (cozum-coklu) — yalnız bu sayfaya özgü küçük yerleşim ayarları.
   Bütün seçiciler .sayfa-cozum-coklu ile başlar; renk, boşluk ve çizgi yalnız belirteçlerden. */

/* Hero: mağaza karşılaştırması geniş bir görsel; 1024 px'ten itibaren metnin altında tam satır olur ki
   görsel tablo düzeninde ("bütün mağazalar tek ekranda") görünsün. Metin o zaman iki sütuna yayılır:
   solda üst başlık + başlık, sağda giriş + düğmeler (tablo ilk ekrana sığar). Dar ekranda hero olduğu gibi. */
@media (min-width: 1024px) {
  .sayfa-cozum-coklu .sayfa-cozum-coklu__hero .hero__ic {
    grid-template-columns: minmax(0, 1fr);
  }

  .sayfa-cozum-coklu .sayfa-cozum-coklu__hero .hero__metin {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas:
      "ust ."
      "baslik giris"
      "baslik dugmeler";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--bosluk-10);
    align-items: start;
    max-width: none;
  }

  .sayfa-cozum-coklu .sayfa-cozum-coklu__hero .hero__metin > * {
    margin-top: 0;
  }

  .sayfa-cozum-coklu .sayfa-cozum-coklu__hero .hero__metin > .ust-baslik {
    grid-area: ust;
    margin-bottom: var(--bosluk-5);
  }

  .sayfa-cozum-coklu .sayfa-cozum-coklu__hero .hero__baslik {
    grid-area: baslik;
  }

  .sayfa-cozum-coklu .sayfa-cozum-coklu__hero .hero__giris {
    grid-area: giris;
    padding-top: var(--bosluk-1);
  }

  .sayfa-cozum-coklu .sayfa-cozum-coklu__hero .hero__dugmeler {
    grid-area: dugmeler;
    margin-top: var(--bosluk-7);
  }
}

/* Ne kazanırsınız: her sütunun üstünde ince ayırıcı çizgi. Sınıf bölümdedir, ızgara sayfa sınıfı taşımaz: iki sütunlu
   aralıkta (640-1023 px) tek kalan üçüncü maddeyi tasarım sistemi ortalar. */
.sayfa-cozum-coklu .sayfa-cozum-coklu__kazanc .ozellik-izgarasi > .ozellik {
  padding-top: var(--bosluk-6);
  border-top: 1px solid var(--cizgi);
}

/* Mağaza başına ayarlar: görselin yanında tek sütunlu liste, maddeler ince çizgiyle ayrılır */
.sayfa-cozum-coklu .ikili__metin > .sayfa-cozum-coklu__ayarlar {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: var(--bosluk-8);
}

.sayfa-cozum-coklu .sayfa-cozum-coklu__ayarlar > .ozellik + .ozellik {
  margin-top: var(--bosluk-6);
  padding-top: var(--bosluk-6);
  border-top: 1px solid var(--cizgi);
}

/* SSS: "Bütün soruları görün" listenin altında ortalı */
.sayfa-cozum-coklu .sayfa-cozum-coklu__sss-alt {
  text-align: center;
}

/* ===== css/sayfa/cozum-davranis.css ===== */
/* Müşteri Davranışı Analitiği (cozum-davranis) — sayfaya özgü küçük yerleşim ayarları. Sahibi: sayfa ajanı.
   Bütün seçiciler .sayfa-cozum-davranis ile başlar; yalnız tasarım belirteçleri kullanılır. */

/* hero görseli: kategori kartı 260-480 px için çizildi; geniş sütunda ya da tek sütunda gerilmesin */
.sayfa-cozum-davranis .hero__gorsel > .gorsel-cerceve {
  max-width: 30rem;
  margin-inline: auto;
}

/* kısa not satırı: simge + metin (kategori ayarları, kabin kamerası) */
.sayfa-cozum-davranis .sayfa-cozum-davranis__not {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-3);
  max-width: 46rem;
  margin-top: var(--bosluk-7);
  font-size: var(--boyut-sm);
  line-height: 1.55;
  color: var(--metin-2);
}

.sayfa-cozum-davranis .sayfa-cozum-davranis__not > .ikon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--vurgu-metin);
}

/* tek başına duran bölüm başı (kalış süresi): altında içerik olmadığı için alt boşluğu bölüm verir */
.sayfa-cozum-davranis .sayfa-cozum-davranis__yalniz {
  margin-bottom: 0;
}

.sayfa-cozum-davranis .sayfa-cozum-davranis__yalniz > .ikon-kutusu + .ust-baslik {
  margin-top: var(--bosluk-6);
}

/* SSS listesinin altındaki "Bütün soruları görün" */
.sayfa-cozum-davranis .sayfa-cozum-davranis__sss-alt {
  margin-top: var(--bosluk-6);
}

/* ===== css/sayfa/cozum-kasa.css ===== */
/*
 * Razbin — Kasa ve Kuyruk Yönetimi (/cozumler/kasa-ve-kuyruk-yonetimi/, /en/solutions/checkout-and-queue-management/).
 * Sahibi: cozum-kasa sayfa ajanı. Yalnız bu sayfaya özgü küçük yerleşim ayarları; renk, boşluk, yarıçap ve gölge
 * belirteçlerden. Bütün seçiciler .sayfa-cozum-kasa ile başlar (SOZLESME.md bölüm 6).
 */

/* ---------------------------------------------------------------- kuyruk bölümü: olay görüntüsü notu */
.sayfa-cozum-kasa .sayfa-cozum-kasa__not {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-4);
  max-width: 36rem;
  padding: var(--bosluk-4) var(--bosluk-5);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-3);
  background-color: var(--yuzey);
  box-shadow: var(--golge-1);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--metin-2);
}

.sayfa-cozum-kasa .ikili__metin > .tik-listesi + .sayfa-cozum-kasa__not {
  margin-top: var(--bosluk-7);
}

.sayfa-cozum-kasa .sayfa-cozum-kasa__not > .ikon-kutusu {
  flex: none;
}

.sayfa-cozum-kasa .sayfa-cozum-kasa__not > span:last-child {
  min-width: 0;
  align-self: center;
}

/* çok dar ekranda simge metnin üstüne çıkar: metin sütunu daralıp satırlar kısalmasın */
@media (max-width: 399.98px) {
  .sayfa-cozum-kasa .sayfa-cozum-kasa__not {
    flex-direction: column;
    gap: var(--bosluk-3);
    padding: var(--bosluk-4);
  }

  .sayfa-cozum-kasa .sayfa-cozum-kasa__not > span:last-child {
    align-self: stretch;
  }
}

/* ---------------------------------------------------------------- personel yokken bekleme (koyu bölüm) */
/* Izgaraya sayfa sınıfı verilmez: iki sütunlu aralıkta (640-1023 px) tek kalan üçüncü özelliği bileşen ortalar. */
/* başlık ile özellikler arasında ince ayırıcı: koyu bölümde üç özellik bir aile gibi okunur */
.sayfa-cozum-kasa .bolum--koyu .ozellik-izgarasi {
  padding-top: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  border-top: 1px solid var(--cizgi);
}

/* ortalı bölüm başının altında özellikler de ortalı (mobilde simge solda kalır) */
@media (min-width: 640px) {
  .sayfa-cozum-kasa .bolum--koyu .ozellik-izgarasi > .ozellik {
    align-items: center;
    text-align: center;
  }
}

/* ---------------------------------------------------------------- kasaya gelen müşteri: özet kartı */
.sayfa-cozum-kasa .sayfa-cozum-kasa__ozet {
  max-width: 34rem;
  margin-inline: auto;
  box-shadow: var(--golge-2);
}

/* iki sütunda kart sütunu doldurur: sağ kenarı üstteki kuyruk görseliyle ve kabın kenarıyla aynı hizada */
@media (min-width: 960px) {
  .sayfa-cozum-kasa .sayfa-cozum-kasa__ozet {
    max-width: none;
  }
}

.sayfa-cozum-kasa .sayfa-cozum-kasa__ozet-liste > li {
  display: flex;
  align-items: center;
  gap: var(--bosluk-4);
  min-width: 0;
  padding-block: var(--bosluk-5);
  font-weight: 600;
  line-height: 1.45;
  color: var(--metin);
}

.sayfa-cozum-kasa .sayfa-cozum-kasa__ozet-liste > li:first-child {
  padding-top: 0;
}

.sayfa-cozum-kasa .sayfa-cozum-kasa__ozet-liste > li:last-child {
  padding-bottom: 0;
}

.sayfa-cozum-kasa .sayfa-cozum-kasa__ozet-liste > li + li {
  border-top: 1px solid var(--cizgi);
}

.sayfa-cozum-kasa .sayfa-cozum-kasa__ozet-liste .ikon-kutusu {
  flex: none;
}

.sayfa-cozum-kasa .sayfa-cozum-kasa__ozet-liste > li > span:last-child {
  min-width: 0;
}

/* ---------------------------------------------------------------- bildirimler: telefon + yüzen kart */
/* Sahnenin genişlik sınırını (tek sütunda kart telefondan kopmasın) bileşen verir (.gorsel-yuzen, TASARIM_SISTEMI 5.15).
   Yüzen kart (640 px'ten itibaren köşeye konumlanır) telefonun bildirim listesini örtmesin: listenin üstündeki
   soluk ekran alanının hizasına iner. */
@media (min-width: 640px) {
  .sayfa-cozum-kasa .sayfa-cozum-kasa__bildirim-sahne > .gorsel-yuzen {
    top: 28%;
  }
}

/* ---------------------------------------------------------------- sık sorulanlar: masaüstünde iki sütun */
.sayfa-cozum-kasa .sayfa-cozum-kasa__sss {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "bas"
    "liste"
    "bag";
  row-gap: clamp(2rem, 1.4rem + 2.4vw, 3rem);
}

.sayfa-cozum-kasa .sayfa-cozum-kasa__sss > .bolum-basi {
  grid-area: bas;
  margin-bottom: 0;
}

.sayfa-cozum-kasa .sayfa-cozum-kasa__sss > .sss-listesi {
  grid-area: liste;
  min-width: 0;
}

.sayfa-cozum-kasa .sayfa-cozum-kasa__sss > .sayfa-cozum-kasa__sss-bag {
  grid-area: bag;
}

@media (min-width: 1024px) {
  .sayfa-cozum-kasa .sayfa-cozum-kasa__sss {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "bas liste"
      "bag liste";
    column-gap: clamp(3rem, 1rem + 4vw, 6rem);
    row-gap: var(--bosluk-6);
    align-items: start;
  }
}

/* ===== css/sayfa/cozum-mobil.css ===== */
/*
 * Mobil Raporlama (cozum-mobil) — yalnız bu sayfanın küçük yerleşim ayarları.
 * Bütün seçiciler .sayfa-cozum-mobil ile başlar; renk, boşluk ve yarıçap yalnız belirteçlerden.
 */

/* 1 · Hero: mağaza bağlantıları notların altında (parcalar/uygulama-baglari; kap tema-koyu: koyu zemin belirteçleri) */
.sayfa-cozum-mobil .sayfa-cozum-mobil__magazalar {
  margin-top: var(--bosluk-7);
}

.sayfa-cozum-mobil .sayfa-cozum-mobil__magazalar-baslik {
  margin: 0 0 var(--bosluk-3);
  font-size: var(--boyut-sm);
  font-weight: 600;
  color: var(--metin-2);
}

/* 3 · Dönemler: iki ölçüt (hafta ve ay görünümü) her genişlikte yan yana. Sütunlar içerik genişliğinde: eşit sütunda
   "Hafta görünümü" 320 px'te iki satıra kırılıp iki ölçütü dengesiz gösteriyordu; sığmazsa yine kırılır, taşmaz. */
.sayfa-cozum-mobil .sayfa-cozum-mobil__donemler {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: var(--bosluk-5) var(--bosluk-7);
  margin-top: var(--bosluk-7);
}

@media (min-width: 30rem) {
  .sayfa-cozum-mobil .sayfa-cozum-mobil__donemler {
    column-gap: var(--bosluk-10);
  }
}

/* 2 · Dört sekme: kartın üst kenarında, uygulamanın alt menüsündeki seçili sekme çizgisini anımsatan kısa işaret
   (simge kutusu genişliğinde, yalnız süs) */
.sayfa-cozum-mobil .sayfa-cozum-mobil__sekmeler > .kart::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--kart-ic-bosluk);
  width: var(--bosluk-9);
  height: 3px;
  border-radius: 0 0 var(--yaricap-1) var(--yaricap-1);
  background-color: var(--vurgu);
}

/* 4 · Bildirim ayarları: yatay not kartı, girişten bir adım ayrık. Dar ekranda simge ve başlık yan yana, metin
   altta tam genişlikte; 480 px'ten itibaren simge solda, başlık ve metin sağda. */
.sayfa-cozum-mobil .sayfa-cozum-mobil__ayar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--bosluk-4);
  align-items: center;
  margin-top: var(--bosluk-7);
}

.sayfa-cozum-mobil .sayfa-cozum-mobil__ayar > :not(.kart__ikon) {
  margin-top: 0;
}

.sayfa-cozum-mobil .sayfa-cozum-mobil__ayar > .kart__metin {
  grid-column: 1 / -1;
}

@media (min-width: 30rem) {
  .sayfa-cozum-mobil .sayfa-cozum-mobil__ayar {
    gap: var(--bosluk-2) var(--bosluk-5);
    align-items: start;
  }

  .sayfa-cozum-mobil .sayfa-cozum-mobil__ayar > .kart__ikon {
    grid-row: 1 / span 2;
  }

  .sayfa-cozum-mobil .sayfa-cozum-mobil__ayar > .kart__metin {
    grid-column: 2;
  }

  .sayfa-cozum-mobil .sayfa-cozum-mobil__ayar > .kart__baslik {
    padding-top: var(--bosluk-2);
  }
}

/* 6 · Kişiselleştirme: geniş ekranda bölüm başı solda, dört özellik sağda (2 × 2) */
@media (min-width: 1024px) {
  .sayfa-cozum-mobil .sayfa-cozum-mobil__yan {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--bosluk-10);
    align-items: start;
  }

  .sayfa-cozum-mobil .sayfa-cozum-mobil__yan > .bolum-basi {
    margin-bottom: 0;
  }
}

/* 6a · Canlı görünüm: üst başlık yerindeki rozet başlığa üst başlık kadar yakın dursun */
.sayfa-cozum-mobil .ikili__metin > .rozet + h2 {
  margin-top: var(--bosluk-4);
}

/* Kısa çizgili sözcük ("e-posta", "hour-by-hour") çizgiden bölünüp satır sonunda "e-" bırakmasın */
.sayfa-cozum-mobil .sayfa-cozum-mobil__bitisik {
  white-space: nowrap;
}

/* 7 · SSS listesinin altındaki "Bütün soruları görün" bağlantısı */
.sayfa-cozum-mobil .sayfa-cozum-mobil__sss-alt {
  display: flex;
  justify-content: center;
  margin-top: var(--bosluk-7);
}

/* ===== css/sayfa/cozum-operasyon.css ===== */
/* Mağaza Operasyonları (cozum-operasyon) — yalnız bu sayfaya özgü küçük yerleşim ayarları.
   Bütün seçiciler .sayfa-cozum-operasyon ile başlar; renk, boşluk ve çizgi yalnız belirteçlerden. */

/* Ne kazanırsınız: solda başlık, sağda ince çizgiyle ayrılan üç fayda satırı (960 px'ten itibaren yan yana) */
.sayfa-cozum-operasyon .sayfa-cozum-operasyon__ayrik {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bosluk-8);
}

@media (min-width: 960px) {
  .sayfa-cozum-operasyon .sayfa-cozum-operasyon__ayrik {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--bosluk-11);
    align-items: start;
  }
}

.sayfa-cozum-operasyon .sayfa-cozum-operasyon__kazanc-oge {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--bosluk-5);
  align-items: start;
  padding-block: var(--bosluk-7);
  border-top: 1px solid var(--cizgi);
}

.sayfa-cozum-operasyon .sayfa-cozum-operasyon__kazanc-oge:first-child {
  padding-top: 0;
  border-top: 0;
}

.sayfa-cozum-operasyon .sayfa-cozum-operasyon__kazanc-oge:last-child {
  padding-bottom: 0;
}

.sayfa-cozum-operasyon .sayfa-cozum-operasyon__kazanc-oge h3 {
  padding-top: var(--bosluk-2);
}

.sayfa-cozum-operasyon .sayfa-cozum-operasyon__kazanc-oge p {
  margin-top: var(--bosluk-2);
  color: var(--metin-2);
}

/* Açılış ve kapanış: gün çizelgesi geniş görsel; altında iki sütunlu madde listesi ve kısa not */
.sayfa-cozum-operasyon .sayfa-cozum-operasyon__genis {
  max-width: 64rem;
  margin-inline: auto;
}

.sayfa-cozum-operasyon .sayfa-cozum-operasyon__maddeler {
  margin-top: var(--bosluk-9);
}

@media (min-width: 768px) {
  .sayfa-cozum-operasyon .sayfa-cozum-operasyon__maddeler {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bosluk-4) var(--bosluk-8);
  }
}

.sayfa-cozum-operasyon .sayfa-cozum-operasyon__not {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-2);
  max-width: none;
  margin-top: var(--bosluk-7);
  padding-top: var(--bosluk-5);
  border-top: 1px solid var(--cizgi);
}

.sayfa-cozum-operasyon .sayfa-cozum-operasyon__not > .ikon {
  flex: none;
  margin-top: 0.15em;
  margin-top: calc((1lh - 1.125rem) / 2);
  color: var(--vurgu-metin);
}

/* SSS: "Bütün soruları görün" listenin altında ortalı */
.sayfa-cozum-operasyon .sayfa-cozum-operasyon__sss-alt {
  margin-top: var(--bosluk-7);
  text-align: center;
}

/* ===== css/sayfa/cozum-ziyaretci.css ===== */
/*
 * Razbin — Ziyaretçi Analitiği (/cozumler/ziyaretci-analitigi/, /en/solutions/visitor-analytics/). Sahibi: sayfa ajanı.
 * Yalnız küçük yerleşim ayarları; renk, gölge ve yarıçap tasarım sisteminin belirteçlerinden.
 * Bütün seçiciler .sayfa-cozum-ziyaretci ile başlar (SOZLESME.md bölüm 6).
 * Hero tek sütunken (640–1023 px) yüzen kartlı telefon çerçevesinin genişlik sınırını bileşen verir (TASARIM_SISTEMI 5.15).
 */

/* Artış çipi telefonun sol alt köşesine, yalnız alt çerçevesine biner: telefon ekranındaki ölçüleri örtmez.
   (640 px altında bileşen çipi telefonun altına ortalı akıtır.) translate, transform'dan bağımsızdır. */
@media (min-width: 640px) {
  .sayfa-cozum-ziyaretci .hero__gorsel .gorsel-yuzen--sol-alt {
    bottom: 0;
    translate: 0 70%;
  }
}

/* "Ne ölçer": geniş ekranda bölüm başı solda (kaydırırken yerinde kalır), altı ölçü sağda iki sütun.
   1200 px'ten dar ekranda başlık dört satıra düşmesin diye bölüm başı üstte kalır. */
@media (min-width: 1200px) {
  .sayfa-cozum-ziyaretci .sayfa-cozum-ziyaretci__olcumler {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
    align-items: start;
  }

  .sayfa-cozum-ziyaretci .sayfa-cozum-ziyaretci__olcumler > .bolum-basi {
    position: sticky;
    top: calc(var(--ust-yukseklik) + var(--bosluk-8));
    margin-bottom: 0;
  }
}

/* SSS listesinin altındaki "Bütün soruları görün" */
.sayfa-cozum-ziyaretci .sayfa-cozum-ziyaretci__sss-alt {
  margin-top: var(--bosluk-6);
}

/* ===== css/sayfa/cozumler.css ===== */
/*
 * Çözümler sayfası (/cozumler/, /en/solutions/) — sayfa ajanı.
 * Yalnız küçük yerleşim ayarları; renk, boşluk ve yazı yalnız belirteçlerden. Bütün seçiciler .sayfa-cozumler ile başlar.
 */

/* çözüm kartlarının sağ üst köşesindeki sıra numarası: CSS sayacıyla çizilen süs (metinde yok, ekran okuyucu
   okumaz: "/ ''" alternatif metni; desteklemeyen tarayıcı ilk content satırını kullanır), simge kutusunun ortasına hizalı */
.sayfa-cozumler .sayfa-cozumler__liste {
  counter-reset: cozum;
}

.sayfa-cozumler .sayfa-cozumler__liste > .kart {
  counter-increment: cozum;
}

.sayfa-cozumler .sayfa-cozumler__liste > .kart::before {
  content: counter(cozum, decimal-leading-zero);
  content: counter(cozum, decimal-leading-zero) / "";
  position: absolute;
  top: var(--kart-ic-bosluk);
  right: var(--kart-ic-bosluk);
  font-family: var(--yazi-baslik);
  font-size: var(--boyut-sm);
  font-weight: 700;
  line-height: 3rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--metin-3);
  pointer-events: none;
}

/* çözüm kartlarındaki maddeler: son satırda tek sözcük kalmasın (paragraflardaki gibi) */
.sayfa-cozumler .sayfa-cozumler__liste .kart__liste > li {
  text-wrap: pretty;
}

/* bölünmeden sarılan ifade: hero başlığının sonu ("… ölçümler, / tek platformda", "… your store, / on one platform")
   ve tek platform başlığının parçaları ("Aynı cihaz, / aynı uygulama, / aynı tanımlar") */
.sayfa-cozumler .sayfa-cozumler__ifade {
  white-space: nowrap;
}

/* son çağrı başlığı iki cümle / iki parça: 640 px'ten itibaren yalnız aralarından bölünür ("See the unseen. /
   Decide with confidence."). Daha dar ekranda ikinci parça tek satıra sığmaz; orada serbest sarılır. */
@media (min-width: 640px) {
  .sayfa-cozumler .sayfa-cozumler__cumle {
    white-space: nowrap;
  }
}

/* tek platform: üç sütun, her birinin üstünde ince çizgi ve kısa turkuaz vurgu */
.sayfa-cozumler .sayfa-cozumler__sutunlar > .ozellik {
  position: relative;
  padding-top: var(--bosluk-7);
  border-top: 1px solid var(--cizgi);
}

.sayfa-cozumler .sayfa-cozumler__sutunlar > .ozellik::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: var(--bosluk-9);
  height: 2px;
  border-radius: 2px;
  background-color: var(--vurgu);
}

/* üç öğe 2 + 1 kalmasın: 640-767 px tek sütun, 768 px'ten itibaren üç sütun. Izgara sayfa sınıfı taşıdığı için
   bileşenin "iki sütunda tek kalan son öğeyi ortala" kuralı burada devreye girmez (TASARIM_SISTEMI 5.11). */
@media (min-width: 640px) and (max-width: 767.98px) {
  .sayfa-cozumler .sayfa-cozumler__sutunlar {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 768px) {
  .sayfa-cozumler .sayfa-cozumler__sutunlar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* modüler yapı: bölümde tek başına duran ortalı blok; bölüm başının alt boşluğu gerekmez */
.sayfa-cozumler .sayfa-cozumler__moduler {
  margin-bottom: 0;
}

.sayfa-cozumler .sayfa-cozumler__moduler > .ikon-kutusu + * {
  margin-top: var(--bosluk-6);
}

/* sektör köprüsü (.ikili--ust: solda bölüm başı, sağda dört kart). 960-1199 px'te yan sütundaki kartlar çok daralır
   (~210 px, başlıklar üç satır); burada başlık üstte, kartlar altta kalır (768 px'teki gibi). 1200 px'ten itibaren
   metin 5, kartlar 7 pay alır: kartlar ferahlar, metin sütununun altında büyük boşluk kalmaz. */
@media (min-width: 960px) and (max-width: 1199.98px) {
  .sayfa-cozumler .sayfa-cozumler__sektorler {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1200px) {
  .sayfa-cozumler .sayfa-cozumler__sektorler {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* ===== css/sayfa/form-vitrini.css ===== */
/*
 * Razbin — form vitrini (/_form/, /en/_form/; taslak, yalnız geliştirme sürümünde). Sahibi: sunucu ve form.
 * İletişim sayfası için örnek yerleşim: solda kısa metin (masaüstünde kaydırırken yerinde kalır), sağda kart içinde form.
 * Bütün seçiciler .sayfa-form-vitrini ile başlar (SOZLESME.md bölüm 6).
 */

.sayfa-form-vitrini .ikili {
  align-items: start;
}

@media (min-width: 960px) {
  .sayfa-form-vitrini .ikili {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .sayfa-form-vitrini .ikili__metin {
    position: sticky;
    top: calc(var(--ust-yukseklik) + 2.5rem);
  }
}

/* telefon numarası ve e-posta adresi satır sonunda bölünmesin */
.sayfa-form-vitrini .ikili__metin a[href^="tel:"],
.sayfa-form-vitrini .ikili__metin a[href^="mailto:"] {
  white-space: nowrap;
}

.sayfa-form-vitrini .ikili__gorsel > .kart {
  --kart-ic-bosluk: clamp(1.25rem, 0.75rem + 2.2vw, 2.5rem);
  box-shadow: var(--golge-2);
}

/* kartın içindeki başarı paneli ikinci bir kart gibi görünmesin */
.sayfa-form-vitrini .kart .form__basari {
  padding-inline: 0;
  border: 0;
  box-shadow: none;
  background: none;
}

/* ===== css/sayfa/gizlilik.css ===== */
/* Gizlilik Politikası (/gizlilik-politikasi/, /en/privacy-policy/) — sayfa ajanı.
 * Beş yasal sayfanın ortak yerleşimi (kvkk, gizlilik, cerez, kullanim, veri-silme; aynı kurallar her dosyada kendi önekiyle):
 *   içindekiler + öbür yasal metinler (dar ekranda metnin üstünde kart; >=1024 px'te sağ sütunda, sığarsa yapışkan)
 *   + .yasal-metin (tasarım sistemi; burada yalnız bölüm ayracı ve numarası) + soru satırı. Tablo kuralları sayfaya özgü.
 * Bütün seçiciler .sayfa-gizlilik ile başlar; renk, boşluk, yarıçap ve geçiş yalnız belirteçlerden.
 */

/* ---------------------------------------------------------------- yerleşim */
.sayfa-gizlilik .sayfa-gizlilik__duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bosluk-8);
  max-width: 72ch;
}

.sayfa-gizlilik .sayfa-gizlilik__govde {
  min-width: 0;
}

/* ---------------------------------------------------------------- içindekiler (dar ekranda metnin üstünde kart) */
.sayfa-gizlilik .sayfa-gizlilik__yan {
  min-width: 0;
  padding: var(--bosluk-5);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-4);
  background-color: var(--zemin-2);
}

.sayfa-gizlilik .sayfa-gizlilik__gezinme > .ust-baslik {
  margin-bottom: var(--bosluk-3);
}

.sayfa-gizlilik .sayfa-gizlilik__liste > li {
  break-inside: avoid;
}

.sayfa-gizlilik .sayfa-gizlilik__liste a {
  display: flex;
  gap: var(--bosluk-2);
  padding: var(--bosluk-2) 0 var(--bosluk-2) var(--bosluk-4);
  border-left: 2px solid var(--cizgi);
  font-size: var(--boyut-sm);
  font-weight: 500;
  line-height: 1.45;
  color: var(--metin-2);
  text-decoration: none;
  transition: color var(--gecis-hizli) var(--egri), border-color var(--gecis-hizli) var(--egri);
}

.sayfa-gizlilik .sayfa-gizlilik__liste a:hover {
  color: var(--vurgu-metin);
  border-left-color: var(--vurgu);
}

.sayfa-gizlilik .sayfa-gizlilik__liste a[aria-current="page"] {
  font-weight: 650;
  color: var(--metin);
  border-left-color: var(--vurgu-metin);
}

.sayfa-gizlilik .sayfa-gizlilik__no {
  flex: none;
  min-width: 1.75em;
  color: var(--metin-3);
  font-variant-numeric: tabular-nums;
}

/* öbür yasal metinler yalnız geniş ekranda: dar ekranda altbilgi aynı bağlantıları hemen aşağıda verir */
.sayfa-gizlilik .sayfa-gizlilik__diger {
  display: none;
}

@media (min-width: 640px) {
  .sayfa-gizlilik .sayfa-gizlilik__yan {
    padding: var(--bosluk-6) var(--bosluk-7);
  }

  .sayfa-gizlilik .sayfa-gizlilik__gezinme:first-child > .sayfa-gizlilik__liste {
    columns: 2;
    column-gap: var(--bosluk-6);
  }
}

/* ---------------------------------------------------------------- geniş ekran: metin solda, içindekiler sağda */
@media (min-width: 1024px) {
  .sayfa-gizlilik .sayfa-gizlilik__duzen {
    grid-template-columns: minmax(0, 72ch) minmax(14rem, 18rem);
    grid-template-areas: "metin yan";
    justify-content: space-between;
    column-gap: var(--bosluk-10);
    max-width: none;
  }

  .sayfa-gizlilik .sayfa-gizlilik__govde {
    grid-area: metin;
  }

  /* sağ iç pay: 1024-1335 px arasında sağ alttaki yüzen WhatsApp düğmesi bu sütunun kenarına biner */
  .sayfa-gizlilik .sayfa-gizlilik__yan {
    grid-area: yan;
    align-self: start;
    padding: 0 var(--bosluk-8) 0 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }

  .sayfa-gizlilik .sayfa-gizlilik__gezinme:first-child > .sayfa-gizlilik__liste {
    columns: auto;
  }

  .sayfa-gizlilik .sayfa-gizlilik__diger {
    display: block;
    margin-top: var(--bosluk-7);
    padding-top: var(--bosluk-7);
    border-top: 1px solid var(--cizgi);
  }
}

/* yapışkanlık yalnız sütun ekrana sığdığında (alçak pencerede alt bağlantılar erişilmez kalmasın); eşik bu sayfanın
   sütun yüksekliğine göre (üst pay + sütun + 24 px; 1280 px genişlikte ölçüldü) */
@media (min-width: 1024px) and (min-height: 53rem) {
  .sayfa-gizlilik .sayfa-gizlilik__yan {
    position: sticky;
    top: calc(var(--ust-yukseklik) + var(--bosluk-7));
  }
}

/* ---------------------------------------------------------------- yasal metin: bölüm ayracı ve numarası */
.sayfa-gizlilik .yasal-metin h2 {
  margin-top: var(--bosluk-8);
  padding-top: var(--bosluk-7);
  border-top: 1px solid var(--cizgi);
}

.sayfa-gizlilik .yasal-metin > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.sayfa-gizlilik .sayfa-gizlilik__bolum-no {
  color: var(--vurgu-metin);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- soru satırı */
.sayfa-gizlilik .sayfa-gizlilik__soru {
  display: flex;
  align-items: center;
  gap: var(--bosluk-4);
  max-width: 72ch;
  margin-top: var(--bosluk-10);
  padding: var(--bosluk-4) var(--bosluk-5);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-4);
  background-color: var(--zemin-2);
}

.sayfa-gizlilik .sayfa-gizlilik__soru > p {
  min-width: 0;
  color: var(--metin-2);
}

.sayfa-gizlilik .sayfa-gizlilik__soru a {
  font-weight: 600;
  overflow-wrap: anywhere;
}

@media print {
  .sayfa-gizlilik .sayfa-gizlilik__yan,
  .sayfa-gizlilik .sayfa-gizlilik__soru {
    display: none;
  }
}

/* ---------------------------------------------------------------- yalnız bu sayfada: Instagram hizmet sağlayıcıları tablosu */
/* metin tablosu: Inter'in eşit genişlikli rakam biçimi (tablo bileşeninde açık) kısa çizgiyi de genişletir */
.sayfa-gizlilik .sayfa-gizlilik__tablo {
  font-variant-numeric: normal;
}

.sayfa-gizlilik .sayfa-gizlilik__tablo tbody th {
  white-space: nowrap;
}

/* telefonda üç metin sütunu sığmaz: her satır, etiketi değerin üstünde duran bir karta dönüşür (yatay kaydırma
   yok). Tablo anlamı işaretlemedeki role="table/row/cell…" ile korunur; sütun başlıkları ekran okuyucu için kalır. */
@media (max-width: 639px) {
  .sayfa-gizlilik .sayfa-gizlilik__tablo {
    display: block;
    font-size: var(--boyut-sm);
  }

  .sayfa-gizlilik .sayfa-gizlilik__tablo thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .sayfa-gizlilik .sayfa-gizlilik__tablo :is(tbody, tr, th, td) {
    display: block;
  }

  .sayfa-gizlilik .sayfa-gizlilik__tablo tbody tr {
    padding: var(--bosluk-4);
  }

  .sayfa-gizlilik .sayfa-gizlilik__tablo tbody tr + tr {
    border-top: 1px solid var(--cizgi);
  }

  .sayfa-gizlilik .sayfa-gizlilik__tablo tbody :is(th, td) {
    padding: 0;
    border: 0;
  }

  .sayfa-gizlilik .sayfa-gizlilik__tablo tbody th {
    font-size: var(--boyut-md);
    white-space: normal;
  }

  .sayfa-gizlilik .sayfa-gizlilik__tablo td {
    margin-top: var(--bosluk-3);
  }

  .sayfa-gizlilik .sayfa-gizlilik__tablo td::before {
    content: attr(data-etiket);
    content: attr(data-etiket) / "";
    display: block;
    margin-bottom: 0.125rem;
    font-size: var(--boyut-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--metin-3);
  }
}

/* ===== css/sayfa/hakkimizda.css ===== */
/* Hakkımızda (/hakkimizda/, /en/about/) — sayfa ajanı.
 * Yalnız bu sayfaya özgü yerleşim: renk, boşluk, yarıçap ve yazı ölçüsü tasarım sisteminin belirteçlerinden;
 * bileşenler yeniden tanımlanmaz (yalnız kendi değişkenleri: --kart-ic-bosluk, --kart-yaricap, --adim-no).
 * Ortalı hero bileşenden gelir (.hero--orta). Bütün seçiciler .sayfa-hakkimizda ile başlar (SOZLESME.md bölüm 6).
 */

/* ---------------------------------------------------------------- başlık yazı tipindeki gövde cümleleri: nokta ve virgül */
/* Beyan kartları ve kapanış cümlesi başlık yazı tipiyle dizilir; tasarım sisteminin .son ayarı yalnız başlık öğelerinde
   çalıştığı için aynı yaklaşma burada da verilir (nokta, virgül ve noktalı virgül sözcüğe bitişik durur). */
.sayfa-hakkimizda :is(.sayfa-hakkimizda__beyan-metin, .sayfa-hakkimizda__son-soz) .son {
  margin-left: -0.09em;
}

/* ---------------------------------------------------------------- misyon ve vizyon: iki beyan kartı */
.sayfa-hakkimizda__beyan {
  --kart-ic-bosluk: clamp(1.5rem, 0.9rem + 2.6vw, 3rem);
  --kart-yaricap: var(--yaricap-5);
  background-image: radial-gradient(70% 90% at 0% 0%, var(--vurgu-zemin), transparent 70%);
}

.sayfa-hakkimizda__beyan > .kart__ust-baslik {
  display: flex;
  align-items: center;
  gap: var(--bosluk-3);
  font-family: var(--yazi-govde);
}

.sayfa-hakkimizda__beyan > .kart__ust-baslik::before {
  content: "";
  flex: none;
  width: var(--bosluk-7);
  height: 2px;
  border-radius: 2px;
  background-image: linear-gradient(90deg, var(--vurgu), var(--vurgu-cizgi));
}

.sayfa-hakkimizda__beyan > .kart__ust-baslik + * {
  margin-top: var(--bosluk-5);
}

.sayfa-hakkimizda__beyan-metin {
  font-family: var(--yazi-baslik);
  font-size: var(--boyut-2xl);
  font-weight: 650;
  line-height: 1.34;
  letter-spacing: -0.018em;
  color: var(--metin);
}

/* ---------------------------------------------------------------- adımızın hikâyesi: metin */
/* paragraflar sakin (ikincil renk); Farsça ve Türkçe sözcükler parlak ve kalın (yazı tipinde italik yok) */
.sayfa-hakkimizda__hikaye .ikili__metin > p:not([class]) {
  color: var(--metin-2);
}

.sayfa-hakkimizda__hikaye i {
  font-style: normal;
  font-weight: 600;
  color: var(--metin);
}

.sayfa-hakkimizda__hikaye .ikili__metin > .sayfa-hakkimizda__son-soz {
  margin-top: var(--bosluk-7);
}

.sayfa-hakkimizda__son-soz {
  font-family: var(--yazi-baslik);
  font-size: var(--boyut-xl);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.006em;
  color: var(--metin);
  text-wrap: balance;
}

/* vurgulu ikinci yarı ("artık görebilirsiniz.") sığdıkça tek parça kalır; sığmazsa kendi içinde sarar */
.sayfa-hakkimizda__son-soz > .vurgu-metni {
  display: inline-block;
}

/* ---------------------------------------------------------------- adımızın hikâyesi: tipografik denklem (görsel dosyası yok) */
.sayfa-hakkimizda__denklem {
  --kart-ic-bosluk: clamp(1.5rem, 0.75rem + 3vw, 3rem);
  --kart-yaricap: var(--yaricap-5);
  align-items: center;
  max-width: 36rem;          /* tek sütunda (tablet) kart yayvanlaşmaz, ortada durur */
  margin-inline: auto;
  text-align: center;
}

/* iki terim kutusu her zaman eşit yükseklikte (anlam iki satıra sarsa da) */
.sayfa-hakkimizda__terimler {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: var(--bosluk-3);
  width: 100%;
}

.sayfa-hakkimizda__terim {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk-2);
  min-width: 0;
  padding: clamp(1rem, 0.6rem + 1.6vw, 1.75rem) var(--bosluk-3);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-4);
  background-color: var(--yuzey);
}

.sayfa-hakkimizda__soz {
  font-family: var(--yazi-baslik);
  font-size: var(--boyut-4xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--metin);
}

.sayfa-hakkimizda__anlam {
  font-size: var(--boyut-xs);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vurgu-metin);
  overflow-wrap: anywhere;
}

.sayfa-hakkimizda__arti {
  align-self: center;
  font-family: var(--yazi-baslik);
  font-size: var(--boyut-2xl);
  font-weight: 600;
  line-height: 1;
  color: var(--vurgu-metin);
}

/* eşittir: iki yanında sönen ince çizgi */
.sayfa-hakkimizda__denklem > .sayfa-hakkimizda__esittir {
  display: flex;
  align-items: center;
  gap: var(--bosluk-4);
  width: 100%;
  margin-top: var(--bosluk-5);
  font-family: var(--yazi-baslik);
  font-size: var(--boyut-2xl);
  font-weight: 600;
  line-height: 1;
  color: var(--vurgu-metin);
}

.sayfa-hakkimizda__esittir::before,
.sayfa-hakkimizda__esittir::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background-image: linear-gradient(90deg, transparent, var(--vurgu-cizgi));
}

.sayfa-hakkimizda__esittir::after {
  background-image: linear-gradient(90deg, var(--vurgu-cizgi), transparent);
}

.sayfa-hakkimizda__denklem > .sayfa-hakkimizda__ad {
  margin-top: var(--bosluk-4);
  font-family: var(--yazi-baslik);
  font-size: var(--boyut-6xl);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.sayfa-hakkimizda__denklem > .sayfa-hakkimizda__tanim {
  margin-top: var(--bosluk-2);
  font-size: var(--boyut-md);
  color: var(--metin-2);
}

/* aynı aileden: dürbün, hurdebin */
.sayfa-hakkimizda__denklem > .sayfa-hakkimizda__aile {
  display: grid;
  gap: var(--bosluk-3);
  width: 100%;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-top: 1px solid var(--cizgi);
  text-align: left;
}

/* dar ekranda sözcük üstte, kökeni altında (iki satır aynı düzende); 480 px'ten itibaren sözcük solda, kökeni sağda */
.sayfa-hakkimizda__akraba {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bosluk-1);
}

.sayfa-hakkimizda__akraba-soz {
  font-family: var(--yazi-baslik);
  font-size: var(--boyut-lg);
  font-weight: 700;
  line-height: 1.3;
  color: var(--metin);
}

.sayfa-hakkimizda__akraba-koken {
  font-size: var(--boyut-sm);
  line-height: 1.5;
  color: var(--metin-2);
}

@media (min-width: 480px) {
  .sayfa-hakkimizda__akraba {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: var(--bosluk-4);
  }

  .sayfa-hakkimizda__akraba-koken {
    text-align: right;
  }
}

/* ---------------------------------------------------------------- adımızın hikâyesi: işaretimiz (kara kutu) */
/* hikâyenin ikinci satırı: üstünde iki ucu sönen ince çizgi; geniş ekranda işaret solda, metin sağda (.ikili--ters) */
.sayfa-hakkimizda__isaret {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  background: linear-gradient(90deg, transparent, var(--cizgi) 15%, var(--cizgi) 85%, transparent) top / 100% 1px no-repeat;
}

.sayfa-hakkimizda__isaret > .ikili__gorsel {
  display: grid;
  place-items: center;
}

/* işaret düz çizilir (gölge, ışıma, çerçeve yok; belgeler/MARKA.md bölüm 5); çevresinde koruma alanı kalır */
.sayfa-hakkimizda__isaret-cizim {
  display: block;
  width: auto;
  height: clamp(6rem, 4.5rem + 5vw, 9rem);
  aspect-ratio: 90.1 / 100;
  color: var(--metin);
}

/* ---------------------------------------------------------------- çalışma biçimimiz: simgeli adımlar */
.sayfa-hakkimizda__adimlar {
  --adim-no: 3.25rem;
}

.sayfa-hakkimizda__adimlar .adim__no > .ikon {
  width: 1.5rem;
  height: 1.5rem;
}

/* dikey sırada (900 px altı) liste ortalı başlığın ekseninde durur */
@media (max-width: 899px) {
  .sayfa-hakkimizda__adimlar {
    max-width: 34rem;
    margin-inline: auto;
  }
}

/* ===== css/sayfa/iletisim.css ===== */
/*
 * İletişim (/iletisim/, /en/contact/) — sayfa ajanı.
 * Yalnız bu sayfaya özgü yerleşim ayarları; bütün seçiciler .sayfa-iletisim ile başlar (SOZLESME.md bölüm 6).
 * Renk yalnız anlamsal belirteçlerden; boşluk --bosluk-* ve bileşenlerin kendi ölçeğinden.
 */

/* ---------------------------------------------------------------- hero: kısa; başlık masaüstünde iki satır */
.sayfa-iletisim .il-hero .hero__metin {
  max-width: 52rem;
}

.sayfa-iletisim .il-hero .hero__giris {
  max-width: 38rem;
}

/* dar ekran (< 480 px): tam genişlik düğmelerde etiket tek satırda kalsın (çağrı bandındaki ölçü; 320 px'te
   "Message us on WhatsApp" sığar) */
@media (max-width: 479.98px) {
  .sayfa-iletisim .il-hero .hero__dugmeler > .dugme:not(.dugme--metin) {
    padding-inline: var(--bosluk-4);
  }

  .sayfa-iletisim .il-hero .hero__dugmeler > .dugme--buyuk:not(.dugme--metin) {
    font-size: clamp(0.9375rem, 0.4375rem + 2.5vw, 1.0625rem);
  }
}

/* ---------------------------------------------------------------- form + iletişim kartı */
/* masaüstünde form geniş sütunda, iletişim kartı dar sütunda; sütunlar arası ikili'nin varsayılanından sıkı.
   Bölümün üst boşluğu kısalır: formun başlığı ilk ekranda görünsün. */
@media (min-width: 960px) {
  .sayfa-iletisim .il-talep {
    padding-top: var(--bosluk-10);
  }

  .sayfa-iletisim .il-ikili {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: var(--bosluk-9);
  }

  .sayfa-iletisim .il-form {
    --kart-ic-bosluk: var(--bosluk-8);
  }
}

/* uzun form kayarken iletişim kartı yerinde kalır (kart ekrana sığıyorsa) */
@media (min-width: 960px) and (min-height: 720px) {
  .sayfa-iletisim .il-ikili > .ikili__gorsel {
    position: sticky;
    top: calc(var(--ust-yukseklik) + var(--bosluk-6));
  }
}

.sayfa-iletisim .il-form {
  box-shadow: var(--golge-2);
}

/* #demo-formu çapasına gelen ziyaretçi kartın başlığını da görsün (başlık formun hemen üstünde, kartın içinde) */
.sayfa-iletisim .il-form > .form {
  scroll-margin-top: calc(var(--kart-ic-bosluk) + 3.25rem);
}

.sayfa-iletisim .il-form > .il-form__baslik + .form {
  margin-top: var(--bosluk-4);
}

/* başarıda form kendi panelini gösterir; kartın başlığı ikinci bir başlık gibi kalmasın */
.sayfa-iletisim .il-form:has(.form__basari:not([hidden])) > .il-form__baslik {
  display: none;
}

/* ---------------------------------------------------------------- iletişim kartı: simge + etiket + değer satırları */
.sayfa-iletisim .il-kart > .il-liste {
  margin-top: var(--bosluk-6);
}

.sayfa-iletisim .il-satir {
  position: relative;
  min-height: 2.5rem;
  padding-block: var(--bosluk-4);
  padding-left: calc(2.5rem + var(--bosluk-4));
  border-top: 1px solid var(--cizgi);
}

.sayfa-iletisim .il-satir:first-child {
  padding-top: 0;
  border-top: 0;
}

.sayfa-iletisim .il-satir:last-child {
  padding-bottom: 0;
}

.sayfa-iletisim .il-satir__ikon {
  position: absolute;
  left: 0;
  top: var(--bosluk-4);
}

.sayfa-iletisim .il-satir:first-child .il-satir__ikon {
  top: 0;
}

.sayfa-iletisim .il-satir__etiket {
  font-size: var(--boyut-sm);
  line-height: 1.4;
  color: var(--metin-2);
}

.sayfa-iletisim .il-satir__deger {
  margin-top: var(--bosluk-1);
  font-weight: 600;
  line-height: 1.45;
  color: var(--metin);
  overflow-wrap: anywhere;
}

.sayfa-iletisim .il-satir__deger a {
  color: var(--metin);
  text-decoration-color: var(--vurgu-cizgi);
}

.sayfa-iletisim .il-satir__deger a:hover {
  color: var(--vurgu-metin);
  text-decoration-color: currentColor;
}

/* bağlantılı satırın tamamı tıklanır (dokunmatik ekranda geniş hedef: simge + etiket + değer) */
.sayfa-iletisim .il-satir__deger a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* e-posta adresi ve telefon satır sonunda bölünmesin (dar ekranda kart zaten yeterince geniş) */
.sayfa-iletisim .il-satir__deger a[href^="mailto:"] {
  overflow-wrap: normal;
  word-break: normal;
}

.sayfa-iletisim .il-satir__dis {
  margin-left: var(--bosluk-1);
  color: var(--vurgu-metin);
  vertical-align: -0.125em;
}

/* tablet (640-959 px): kart formun altında tam genişlikte; satırlar iki sütuna yayılır, kartın sağı boş kalmaz.
   Satır sayısı ayarlara göre değişir (boş ayar = satır yok); her sütunun ilk satırı çizgisiz başlar, son çift
   alt boşluksuz biter. */
@media (min-width: 640px) and (max-width: 959.98px) {
  .sayfa-iletisim .il-kart > .il-liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--bosluk-8);
  }

  .sayfa-iletisim .il-satir:nth-child(2) {
    padding-top: 0;
    border-top: 0;
  }

  .sayfa-iletisim .il-satir:nth-child(2) .il-satir__ikon {
    top: 0;
  }

  .sayfa-iletisim .il-satir:nth-last-child(2):nth-child(odd) {
    padding-bottom: 0;
  }
}

/* ---------------------------------------------------------------- kısa SSS: solda başlık, sağda sorular */
.sayfa-iletisim .il-sss .sss-listesi + .dugme-grubu {
  margin-top: var(--bosluk-6);
}

@media (min-width: 960px) {
  .sayfa-iletisim .il-sss__ic {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

/* ===== css/sayfa/kullanim.css ===== */
/* Kullanım Koşulları (/kullanim-kosullari/, /en/terms-of-use/) — sayfa ajanı.
 * Beş yasal sayfanın ortak yerleşimi (kvkk, gizlilik, cerez, kullanim, veri-silme; aynı kurallar her dosyada kendi önekiyle):
 *   içindekiler + öbür yasal metinler (dar ekranda metnin üstünde kart; >=1024 px'te sağ sütunda, sığarsa yapışkan)
 *   + .yasal-metin (tasarım sistemi; burada yalnız bölüm ayracı ve numarası) + soru satırı. Tablo kuralları sayfaya özgü.
 * Bütün seçiciler .sayfa-kullanim ile başlar; renk, boşluk, yarıçap ve geçiş yalnız belirteçlerden.
 */

/* ---------------------------------------------------------------- yerleşim */
.sayfa-kullanim .sayfa-kullanim__duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bosluk-8);
  max-width: 72ch;
}

.sayfa-kullanim .sayfa-kullanim__govde {
  min-width: 0;
}

/* ---------------------------------------------------------------- içindekiler (dar ekranda metnin üstünde kart) */
.sayfa-kullanim .sayfa-kullanim__yan {
  min-width: 0;
  padding: var(--bosluk-5);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-4);
  background-color: var(--zemin-2);
}

.sayfa-kullanim .sayfa-kullanim__gezinme > .ust-baslik {
  margin-bottom: var(--bosluk-3);
}

.sayfa-kullanim .sayfa-kullanim__liste > li {
  break-inside: avoid;
}

.sayfa-kullanim .sayfa-kullanim__liste a {
  display: flex;
  gap: var(--bosluk-2);
  padding: var(--bosluk-2) 0 var(--bosluk-2) var(--bosluk-4);
  border-left: 2px solid var(--cizgi);
  font-size: var(--boyut-sm);
  font-weight: 500;
  line-height: 1.45;
  color: var(--metin-2);
  text-decoration: none;
  transition: color var(--gecis-hizli) var(--egri), border-color var(--gecis-hizli) var(--egri);
}

.sayfa-kullanim .sayfa-kullanim__liste a:hover {
  color: var(--vurgu-metin);
  border-left-color: var(--vurgu);
}

.sayfa-kullanim .sayfa-kullanim__liste a[aria-current="page"] {
  font-weight: 650;
  color: var(--metin);
  border-left-color: var(--vurgu-metin);
}

.sayfa-kullanim .sayfa-kullanim__no {
  flex: none;
  min-width: 1.75em;
  color: var(--metin-3);
  font-variant-numeric: tabular-nums;
}

/* öbür yasal metinler yalnız geniş ekranda: dar ekranda altbilgi aynı bağlantıları hemen aşağıda verir */
.sayfa-kullanim .sayfa-kullanim__diger {
  display: none;
}

@media (min-width: 640px) {
  .sayfa-kullanim .sayfa-kullanim__yan {
    padding: var(--bosluk-6) var(--bosluk-7);
  }

  .sayfa-kullanim .sayfa-kullanim__gezinme:first-child > .sayfa-kullanim__liste {
    columns: 2;
    column-gap: var(--bosluk-6);
  }
}

/* ---------------------------------------------------------------- geniş ekran: metin solda, içindekiler sağda */
@media (min-width: 1024px) {
  .sayfa-kullanim .sayfa-kullanim__duzen {
    grid-template-columns: minmax(0, 72ch) minmax(14rem, 18rem);
    grid-template-areas: "metin yan";
    justify-content: space-between;
    column-gap: var(--bosluk-10);
    max-width: none;
  }

  .sayfa-kullanim .sayfa-kullanim__govde {
    grid-area: metin;
  }

  /* sağ iç pay: 1024-1335 px arasında sağ alttaki yüzen WhatsApp düğmesi bu sütunun kenarına biner */
  .sayfa-kullanim .sayfa-kullanim__yan {
    grid-area: yan;
    align-self: start;
    padding: 0 var(--bosluk-8) 0 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }

  .sayfa-kullanim .sayfa-kullanim__gezinme:first-child > .sayfa-kullanim__liste {
    columns: auto;
  }

  .sayfa-kullanim .sayfa-kullanim__diger {
    display: block;
    margin-top: var(--bosluk-7);
    padding-top: var(--bosluk-7);
    border-top: 1px solid var(--cizgi);
  }
}

/* yapışkanlık yalnız sütun ekrana sığdığında (alçak pencerede alt bağlantılar erişilmez kalmasın); eşik bu sayfanın
   sütun yüksekliğine göre (üst pay + sütun + 24 px; 1280 px genişlikte ölçüldü) */
@media (min-width: 1024px) and (min-height: 56rem) {
  .sayfa-kullanim .sayfa-kullanim__yan {
    position: sticky;
    top: calc(var(--ust-yukseklik) + var(--bosluk-7));
  }
}

/* ---------------------------------------------------------------- yasal metin: bölüm ayracı ve numarası */
.sayfa-kullanim .yasal-metin h2 {
  margin-top: var(--bosluk-8);
  padding-top: var(--bosluk-7);
  border-top: 1px solid var(--cizgi);
}

.sayfa-kullanim .yasal-metin > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.sayfa-kullanim .sayfa-kullanim__bolum-no {
  color: var(--vurgu-metin);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- soru satırı */
.sayfa-kullanim .sayfa-kullanim__soru {
  display: flex;
  align-items: center;
  gap: var(--bosluk-4);
  max-width: 72ch;
  margin-top: var(--bosluk-10);
  padding: var(--bosluk-4) var(--bosluk-5);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-4);
  background-color: var(--zemin-2);
}

.sayfa-kullanim .sayfa-kullanim__soru > p {
  min-width: 0;
  color: var(--metin-2);
}

.sayfa-kullanim .sayfa-kullanim__soru a {
  font-weight: 600;
  overflow-wrap: anywhere;
}

@media print {
  .sayfa-kullanim .sayfa-kullanim__yan,
  .sayfa-kullanim .sayfa-kullanim__soru {
    display: none;
  }
}

/* ===== css/sayfa/kvkk.css ===== */
/* KVKK Aydınlatma Metni (/kvkk-aydinlatma-metni/, /en/privacy-notice/) — sayfa ajanı.
 * Beş yasal sayfanın ortak yerleşimi (kvkk, gizlilik, cerez, kullanim, veri-silme; aynı kurallar her dosyada kendi önekiyle):
 *   içindekiler + öbür yasal metinler (dar ekranda metnin üstünde kart; >=1024 px'te sağ sütunda, sığarsa yapışkan)
 *   + .yasal-metin (tasarım sistemi; burada yalnız bölüm ayracı ve numarası) + soru satırı. Tablo kuralları sayfaya özgü.
 * Bütün seçiciler .sayfa-kvkk ile başlar; renk, boşluk, yarıçap ve geçiş yalnız belirteçlerden.
 */

/* ---------------------------------------------------------------- yerleşim */
.sayfa-kvkk .sayfa-kvkk__duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bosluk-8);
  max-width: 72ch;
}

.sayfa-kvkk .sayfa-kvkk__govde {
  min-width: 0;
}

/* ---------------------------------------------------------------- içindekiler (dar ekranda metnin üstünde kart) */
.sayfa-kvkk .sayfa-kvkk__yan {
  min-width: 0;
  padding: var(--bosluk-5);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-4);
  background-color: var(--zemin-2);
}

.sayfa-kvkk .sayfa-kvkk__gezinme > .ust-baslik {
  margin-bottom: var(--bosluk-3);
}

.sayfa-kvkk .sayfa-kvkk__liste > li {
  break-inside: avoid;
}

.sayfa-kvkk .sayfa-kvkk__liste a {
  display: flex;
  gap: var(--bosluk-2);
  padding: var(--bosluk-2) 0 var(--bosluk-2) var(--bosluk-4);
  border-left: 2px solid var(--cizgi);
  font-size: var(--boyut-sm);
  font-weight: 500;
  line-height: 1.45;
  color: var(--metin-2);
  text-decoration: none;
  transition: color var(--gecis-hizli) var(--egri), border-color var(--gecis-hizli) var(--egri);
}

.sayfa-kvkk .sayfa-kvkk__liste a:hover {
  color: var(--vurgu-metin);
  border-left-color: var(--vurgu);
}

.sayfa-kvkk .sayfa-kvkk__liste a[aria-current="page"] {
  font-weight: 650;
  color: var(--metin);
  border-left-color: var(--vurgu-metin);
}

.sayfa-kvkk .sayfa-kvkk__no {
  flex: none;
  min-width: 1.75em;
  color: var(--metin-3);
  font-variant-numeric: tabular-nums;
}

/* öbür yasal metinler yalnız geniş ekranda: dar ekranda altbilgi aynı bağlantıları hemen aşağıda verir */
.sayfa-kvkk .sayfa-kvkk__diger {
  display: none;
}

@media (min-width: 640px) {
  .sayfa-kvkk .sayfa-kvkk__yan {
    padding: var(--bosluk-6) var(--bosluk-7);
  }

  .sayfa-kvkk .sayfa-kvkk__gezinme:first-child > .sayfa-kvkk__liste {
    columns: 2;
    column-gap: var(--bosluk-6);
  }
}

/* ---------------------------------------------------------------- geniş ekran: metin solda, içindekiler sağda */
@media (min-width: 1024px) {
  .sayfa-kvkk .sayfa-kvkk__duzen {
    grid-template-columns: minmax(0, 72ch) minmax(14rem, 18rem);
    grid-template-areas: "metin yan";
    justify-content: space-between;
    column-gap: var(--bosluk-10);
    max-width: none;
  }

  .sayfa-kvkk .sayfa-kvkk__govde {
    grid-area: metin;
  }

  /* sağ iç pay: 1024-1335 px arasında sağ alttaki yüzen WhatsApp düğmesi bu sütunun kenarına biner */
  .sayfa-kvkk .sayfa-kvkk__yan {
    grid-area: yan;
    align-self: start;
    padding: 0 var(--bosluk-8) 0 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }

  .sayfa-kvkk .sayfa-kvkk__gezinme:first-child > .sayfa-kvkk__liste {
    columns: auto;
  }

  .sayfa-kvkk .sayfa-kvkk__diger {
    display: block;
    margin-top: var(--bosluk-7);
    padding-top: var(--bosluk-7);
    border-top: 1px solid var(--cizgi);
  }
}

/* yapışkanlık yalnız sütun ekrana sığdığında (alçak pencerede alt bağlantılar erişilmez kalmasın); eşik bu sayfanın
   sütun yüksekliğine göre (üst pay + sütun + 24 px; 1280 px genişlikte ölçüldü) */
@media (min-width: 1024px) and (min-height: 56rem) {
  .sayfa-kvkk .sayfa-kvkk__yan {
    position: sticky;
    top: calc(var(--ust-yukseklik) + var(--bosluk-7));
  }
}

/* ---------------------------------------------------------------- yasal metin: bölüm ayracı ve numarası */
.sayfa-kvkk .yasal-metin h2 {
  margin-top: var(--bosluk-8);
  padding-top: var(--bosluk-7);
  border-top: 1px solid var(--cizgi);
}

.sayfa-kvkk .yasal-metin > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.sayfa-kvkk .sayfa-kvkk__bolum-no {
  color: var(--vurgu-metin);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- soru satırı */
.sayfa-kvkk .sayfa-kvkk__soru {
  display: flex;
  align-items: center;
  gap: var(--bosluk-4);
  max-width: 72ch;
  margin-top: var(--bosluk-10);
  padding: var(--bosluk-4) var(--bosluk-5);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-4);
  background-color: var(--zemin-2);
}

.sayfa-kvkk .sayfa-kvkk__soru > p {
  min-width: 0;
  color: var(--metin-2);
}

.sayfa-kvkk .sayfa-kvkk__soru a {
  font-weight: 600;
  overflow-wrap: anywhere;
}

@media print {
  .sayfa-kvkk .sayfa-kvkk__yan,
  .sayfa-kvkk .sayfa-kvkk__soru {
    display: none;
  }
}

/* ---------------------------------------------------------------- yalnız bu sayfada: veri sorumlusu künyesi */
.sayfa-kvkk .sayfa-kvkk__kunye {
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-3);
  background-color: var(--yuzey);
  box-shadow: var(--golge-kart);
}

.sayfa-kvkk .sayfa-kvkk__kunye > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bosluk-1);
  padding: var(--bosluk-4) var(--bosluk-5);
}

.sayfa-kvkk .sayfa-kvkk__kunye > div + div {
  border-top: 1px solid var(--cizgi);
}

.sayfa-kvkk .sayfa-kvkk__kunye dt {
  font-size: var(--boyut-sm);
  font-weight: 600;
  color: var(--metin-2);
}

.sayfa-kvkk .sayfa-kvkk__kunye dd {
  min-width: 0;
  color: var(--metin);
  overflow-wrap: anywhere;
}

@media (min-width: 640px) {
  .sayfa-kvkk .sayfa-kvkk__kunye > div {
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: var(--bosluk-5);
    align-items: baseline;
  }
}

/* ---------------------------------------------------------------- yalnız bu sayfada: işlenen veriler tablosu */
/* metin tablosu: Inter'in eşit genişlikli rakam biçimi (tablo bileşeninde açık) kısa çizgiyi de genişletir */
.sayfa-kvkk .sayfa-kvkk__tablo {
  font-variant-numeric: normal;
}

/* telefonda üç uzun metin sütunu sığmaz: her satır, etiketi değerin üstünde duran bir karta dönüşür (yatay kaydırma
   yok). Tablo anlamı işaretlemedeki role="table/row/cell…" ile korunur; sütun başlıkları ekran okuyucu için kalır. */
@media (max-width: 639px) {
  .sayfa-kvkk .sayfa-kvkk__tablo {
    display: block;
    font-size: var(--boyut-sm);
  }

  .sayfa-kvkk .sayfa-kvkk__tablo thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .sayfa-kvkk .sayfa-kvkk__tablo :is(tbody, tr, th, td) {
    display: block;
  }

  .sayfa-kvkk .sayfa-kvkk__tablo tbody tr {
    padding: var(--bosluk-4);
  }

  .sayfa-kvkk .sayfa-kvkk__tablo tbody tr + tr {
    border-top: 1px solid var(--cizgi);
  }

  .sayfa-kvkk .sayfa-kvkk__tablo tbody :is(th, td) {
    padding: 0;
    border: 0;
  }

  .sayfa-kvkk .sayfa-kvkk__tablo tbody th {
    font-size: var(--boyut-md);
  }

  .sayfa-kvkk .sayfa-kvkk__tablo td {
    margin-top: var(--bosluk-3);
  }

  .sayfa-kvkk .sayfa-kvkk__tablo td::before {
    content: attr(data-etiket);
    content: attr(data-etiket) / "";
    display: block;
    margin-bottom: 0.125rem;
    font-size: var(--boyut-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--metin-3);
  }
}

/* ===== css/sayfa/nasil-calisir.css ===== */
/*
 * Nasıl Çalışır (/nasil-calisir/, /en/how-it-works/) — sayfa ajanı.
 * Yalnız bu sayfaya özgü yerleşim ayarları; bütün seçiciler .sayfa-nasil-calisir ile başlar (SOZLESME.md bölüm 6).
 * Renk yalnız anlamsal belirteçlerden; boşluk yalnız --bosluk-* ve bileşenlerin kendi ölçeğinden.
 */

/* ---------------------------------------------------------------- hero: metin üstte, akış görseli altta tam genişlik */
/* metin bloğu biraz genişler: başlık iki satıra, giriş üç satıra iner ve akış bandı ilk ekranda kalır */
.sayfa-nasil-calisir .nc-hero .hero__metin {
  max-width: 52rem;
}

.sayfa-nasil-calisir .nc-hero .hero__giris {
  max-width: 44rem;
}

/* shn-akis geniş kapta yatay dizilir; çerçeveye iç boşluk verilir ki dört halka bant gibi nefes alsın */
.sayfa-nasil-calisir .nc-hero__akis {
  container: nc-akis / inline-size;
  padding: clamp(1.25rem, 0.75rem + 2vw, 2.5rem) clamp(1rem, 0.25rem + 2.5vw, 3rem);
}

/* dar çerçevede görsel dikey liste olur (kendi kırılımı 44rem): liste çerçevenin ortasında dursun */
@container nc-akis (max-width: 43.99rem) {
  .sayfa-nasil-calisir .nc-hero__akis > .shn-akis {
    max-width: 24rem;
    margin-inline: auto;
  }
}

@media (min-width: 1024px) {
  .sayfa-nasil-calisir .nc-hero .hero__ic {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------- akış: üç halka, aralarında ok */
.sayfa-nasil-calisir .nc-halkalar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--bosluk-3);
}

.sayfa-nasil-calisir .nc-halka {
  width: min(100%, 34rem);
}

.sayfa-nasil-calisir .nc-halkalar__ok {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--vurgu-metin);
  background-color: var(--vurgu-zemin);
  box-shadow: inset 0 0 0 1px var(--vurgu-cizgi);
  transform: rotate(90deg);
}

@media (min-width: 1024px) {
  .sayfa-nasil-calisir .nc-halkalar {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    justify-items: stretch;
    gap: var(--bosluk-4);
  }

  .sayfa-nasil-calisir .nc-halka {
    width: auto;
  }

  .sayfa-nasil-calisir .nc-halkalar__ok {
    align-self: center;
    transform: none;
  }
}

/* ---------------------------------------------------------------- süreç: başlık solda sabit, adımlar sağda dikey */
/* dikey zaman çizgisini her genişlikte bileşen verir (ol.adimlar.adimlar--dikey); burada yalnız ölçü ve numara */
.sayfa-nasil-calisir .nc-surec .adimlar {
  --adim-no: 3rem;
  counter-reset: nc-adim;
}

/* adım numarası süstür (aria-hidden; sırayı ol söyler): sayaçla yazılır ki içerik denetçisi "2 Kurulum"u
   ölçek iddiası sanmasın */
.sayfa-nasil-calisir .nc-surec .adim {
  counter-increment: nc-adim;
}

.sayfa-nasil-calisir .nc-surec .adim__no::before {
  content: counter(nc-adim);
}

.sayfa-nasil-calisir .nc-surec .adim__baslik {
  font-size: var(--boyut-xl);
}

@media (min-width: 960px) {
  .sayfa-nasil-calisir .nc-surec__ic {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
    align-items: start;
  }

  .sayfa-nasil-calisir .nc-surec__bas {
    position: sticky;
    top: calc(var(--ust-yukseklik) + var(--bosluk-8));
    margin-bottom: 0;
  }
}

/* ---------------------------------------------------------------- gereksinimler: koyu not kartı */
.sayfa-nasil-calisir .nc-ekip {
  --kart-ic-bosluk: clamp(1.75rem, 1rem + 3vw, 3rem);
}

.sayfa-nasil-calisir .nc-ekip .kart__baslik {
  font-size: var(--boyut-2xl);
}

.sayfa-nasil-calisir .nc-ekip .kart__metin {
  font-size: var(--boyut-lg);
  line-height: 1.65;
}

/* ---------------------------------------------------------------- ölçümler: dört kamera + yapay zekâ şeridi */
/* mobil: kartın kendi dikey akışı · ≥640: simge + metin yan yana, not altta · ≥1024: not sağda, ince ayraçla */
.sayfa-nasil-calisir .nc-yz {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.sayfa-nasil-calisir .nc-yz__metin > * + * {
  margin-top: var(--bosluk-2);
}

.sayfa-nasil-calisir .nc-yz.kart > .nc-yz__not {
  margin-top: var(--bosluk-5);
  padding-top: var(--bosluk-5);
  border-top: 1px solid var(--cizgi);
  font-size: var(--boyut-sm);
  line-height: 1.6;
  color: var(--metin-2);
}

@media (min-width: 640px) {
  .sayfa-nasil-calisir .nc-yz.kart {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--bosluk-5) var(--bosluk-6);
  }

  .sayfa-nasil-calisir .nc-yz.kart > * + * {
    margin-top: 0;
  }

  .sayfa-nasil-calisir .nc-yz.kart > .nc-yz__not {
    grid-column: 2;
    margin-top: 0;
  }
}

@media (min-width: 1024px) {
  .sayfa-nasil-calisir .nc-yz.kart {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--bosluk-8);
  }

  .sayfa-nasil-calisir .nc-yz.kart > .nc-yz__not {
    grid-column: 3;
    padding-top: 0;
    padding-left: var(--bosluk-8);
    border-top: 0;
    border-left: 1px solid var(--cizgi);
  }
}

/* ---------------------------------------------------------------- her gün: panel geniş sütunda */
/* panelin gölgesi ve arka ışıması koyu bölümün dışına, beyaz SSS zeminine taşmasın */
.sayfa-nasil-calisir .nc-gunluk {
  overflow: hidden;
}

@supports (overflow: clip) {
  .sayfa-nasil-calisir .nc-gunluk {
    overflow: clip;
  }
}

.sayfa-nasil-calisir .nc-gunluk .ikili__metin > .nc-gunluk__not {
  margin-top: var(--bosluk-7);
}

.sayfa-nasil-calisir .nc-gunluk__not {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-4);
  padding-top: var(--bosluk-6);
  border-top: 1px solid var(--cizgi);
  color: var(--metin-2);
}

@media (min-width: 960px) {
  .sayfa-nasil-calisir .nc-gunluk .ikili {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }
}

/* ---------------------------------------------------------------- sss: alttaki bağlantı ortalı */
.sayfa-nasil-calisir .nc-sss__alt {
  margin-top: var(--bosluk-7);
  text-align: center;
}

/* ===== css/sayfa/sektor-avm.css ===== */
/*
 * Razbin — AVM ve Zincir Mağazalar (sektor-avm; /sektorler/avm-ve-zincir-magazalar/, /en/industries/malls-and-retail-chains/).
 * Sahibi: sektor-avm sayfa ajanı. Yalnız küçük yerleşim ayarları; bütün seçiciler .sayfa-sektor-avm ile başlar.
 */

/* Şubeler (koyu bant): özellik ızgarasının altındaki bağlantı ortada */
.sayfa-sektor-avm .sayfa-sektor-avm__devam {
  display: flex;
  justify-content: center;
  margin-top: clamp(var(--bosluk-8), 1.5rem + 2vw, var(--bosluk-10));
}

/* Bağlantı dar ekranda iki satıra sarılınca ok son sözcükle aynı satırda kalır (düğmenin esnek düzeninde metin
   satırı doldurur, ok sağ kenara kopardı). Etiket tek bir satır içi öğe; ok son sözcüğe bitişik. */
.sayfa-sektor-avm .sayfa-sektor-avm__bitisik {
  white-space: nowrap;
}

.sayfa-sektor-avm .sayfa-sektor-avm__bitisik > .dugme__ikon {
  margin-left: var(--bosluk-2);
  vertical-align: -0.25em;
}

/* SSS + AVM çizimi (.ikili--ust: soru açılınca çizim yerinde kalır) */
.sayfa-sektor-avm .sayfa-sektor-avm__sss > .ikili__metin > * + .sss-listesi {
  margin-top: var(--bosluk-7);
}

/* AVM çizimi 220–600 px için çizildi: tek sütunda (tablet) en çok 600 px, ortada */
.sayfa-sektor-avm .sayfa-sektor-avm__sss > .ikili__gorsel {
  width: 100%;
  max-width: 37.5rem;
  justify-self: center;
}

/* ===== css/sayfa/sektor-giyim.css ===== */
/*
 * Razbin — sektör sayfası: Giyim, Moda ve Ayakkabı (/sektorler/giyim-ve-moda/, /en/industries/fashion-and-apparel/).
 * Sahibi: sektor-giyim sayfa ajanı. Yalnız bu sayfanın yerleşim ayarları; bütün seçiciler .sayfa-sektor-giyim ile başlar
 * (SOZLESME.md bölüm 6). Renk, boşluk ve gölge yalnız belirteçlerden.
 */

/* ---------------------------------------------------------------- üç soru: kapı → kabin → kasa
   Üç sütunda kartları simge hizasında ince bir yol bağlar (adımlar bileşenindeki çizginin aynısı). Çizgi bir kartın
   simgesinden sonra başlar, aradaki boşluğu geçer ve sonraki kartın simgesinden önce biter. */
@media (min-width: 1024px) {
  .sayfa-sektor-giyim .sayfa-sektor-giyim__yol > .kart:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--kart-ic-bosluk) + 1.5rem - 1px);
    left: calc(var(--kart-ic-bosluk) + 3rem + var(--bosluk-4));
    right: calc(var(--bosluk-4) - var(--izgara-bosluk) - var(--kart-ic-bosluk) - 2px);
    height: 2px;
    border-radius: var(--yaricap-tam);
    background-image: linear-gradient(90deg, var(--vurgu-cizgi), var(--cizgi));
    pointer-events: none;
  }
}

/* ---------------------------------------------------------------- ölçümler: başlık + kategori görseli | altı ölçüm */
.sayfa-sektor-giyim .sayfa-sektor-giyim__olcumler {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bosluk-10);
}

.sayfa-sektor-giyim .sayfa-sektor-giyim__olcumler-gorsel {
  max-width: 30rem;
}

/* tablet: başlık ve görsel yan yana (görsel tek başına satırın yarısını boş bırakmasın) */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .sayfa-sektor-giyim .sayfa-sektor-giyim__olcumler-bas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--bosluk-8);
    align-items: center;
  }

  .sayfa-sektor-giyim .sayfa-sektor-giyim__olcumler-bas > .bolum-basi {
    margin-bottom: 0;
  }
}

@media (min-width: 1024px) {
  .sayfa-sektor-giyim .sayfa-sektor-giyim__olcumler {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--bosluk-11);
    align-items: center;
  }
}

/* ölçüm başlığı ilgili çözüm sayfasına gider: başlık rengi korunur, ok ve ince alt çizgi bağlantıyı belli eder.
   Dikey dolgu dokunma alanını büyütür (≥ 24 px), eksi kenar boşluğu yerleşimi değiştirmez. Ok son sözcükten
   ayrılmaz (etkileşimli kartın ipucundaki yöntem): okun satırdaki net genişliği sıfırdır, yeri sağ iç boşlukta
   ayrılmıştır; başlık sarılsa da ok tek başına alt satıra düşmez. */
.sayfa-sektor-giyim .sayfa-sektor-giyim__bag {
  display: inline-block;
  padding-block: var(--bosluk-1);
  padding-right: 1.375rem;            /* ok 1.125rem + aralık 0.25rem */
  margin-block: calc(-1 * var(--bosluk-1));
  color: var(--metin);
  text-decoration-color: var(--vurgu-cizgi);
}

.sayfa-sektor-giyim .sayfa-sektor-giyim__bag:hover {
  color: var(--vurgu-metin);
  text-decoration-color: currentColor;
}

.sayfa-sektor-giyim .sayfa-sektor-giyim__bag > .ikon {
  width: 1.125rem;
  height: 1.125rem;
  margin-left: var(--bosluk-1);
  margin-right: -1.375rem;
  vertical-align: -0.125em;
  color: var(--vurgu-metin);
  transition: transform var(--gecis) var(--egri);
}

@media (hover: hover) {
  .sayfa-sektor-giyim .sayfa-sektor-giyim__bag:hover > .ikon {
    transform: translateX(4px);
  }
}

/* ---------------------------------------------------------------- bir cumartesi: metin + çizimin altında zaman çizgisi
   İkili tek sütunken (< 960 px) yazısız çizim bütün satırı kaplayıp bölümü uzatmasın: ölçülü genişlik, ortada
   (öbür sektör sayfalarındaki sahne çizimleriyle aynı ölçü). */
@media (max-width: 959.98px) {
  .sayfa-sektor-giyim .sayfa-sektor-giyim__cizim {
    width: 100%;
    max-width: 36rem;
    margin-inline: auto;
  }
}

.sayfa-sektor-giyim .sayfa-sektor-giyim__gun {
  margin-top: var(--bosluk-10);
}

@media (min-width: 960px) {
  .sayfa-sektor-giyim .sayfa-sektor-giyim__gun {
    margin-top: var(--bosluk-11);
  }
}

/* ---------------------------------------------------------------- sık sorulanlar: başlık solda, sorular sağda */
@media (min-width: 1024px) {
  .sayfa-sektor-giyim .sayfa-sektor-giyim__sss {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--bosluk-11);
    align-items: start;
  }

  .sayfa-sektor-giyim .sayfa-sektor-giyim__sss > .bolum-basi {
    margin-bottom: 0;
  }
}

/* ===== css/sayfa/sektor-hizmet.css ===== */
/*
 * Razbin — sektör sayfası: Kafe, Restoran ve Hizmet Noktaları
 * (/sektorler/kafe-restoran-ve-hizmet-noktalari/, /en/industries/cafes-restaurants-and-service-points/).
 * Sahibi: sektor-hizmet sayfa ajanı. Yalnız bu sayfanın yerleşim ayarları; bütün seçiciler .sayfa-sektor-hizmet ile
 * başlar (SOZLESME.md bölüm 6). Renk, boşluk, yarıçap ve gölge yalnız belirteçlerden.
 */

/* ---------------------------------------------------------------- 1 · hero: sahne çizimi ve bildirim kartı
   Hero tek sütunken (< 1024 px) yazısız çizim bütün satırı kaplayıp ilk ekranı uzatmasın: ölçülü genişlik, ortada.
   Bildirim kartı 640 px'ten itibaren çerçevenin sol üst köşesine biner: üst ve sol kenardan biraz dışarı taşar;
   böylece çizimin sol üstündeki panoyu yarım örtmez, doluluk çipi, bekleme alanı ve tezgâh açık kalır. Hero iki
   sütunken kart köşeden daha çok taşar (derinlik); solunda metin sütununun boşluğu vardır, sayfa yatay kaymaz.
   640 px altında bileşenin kendi yerleşimi geçerlidir (kart görselin altında akar). */
@media (max-width: 1023.98px) {
  .sayfa-sektor-hizmet .sayfa-sektor-hizmet__sahne {
    max-width: 36rem;
    margin-inline: auto;
  }
}

@media (min-width: 640px) {
  .sayfa-sektor-hizmet .sayfa-sektor-hizmet__sahne > .gorsel-yuzen--sol-ust {
    top: calc(-1 * var(--bosluk-5));
    left: calc(-1 * var(--bosluk-4));
  }
}

@media (min-width: 1024px) {
  .sayfa-sektor-hizmet .sayfa-sektor-hizmet__sahne > .gorsel-yuzen--sol-ust {
    top: calc(-1 * var(--bosluk-7));
    left: calc(-1 * var(--bosluk-7));
  }
}

/* ---------------------------------------------------------------- 2 · sektörün soruları
   Dar ekranda başlık üstte, sorular altta; 1024 px'ten itibaren başlık solda (soruların ortasına hizalı), üç soru
   sağda ince çizgilerle ayrılmış satırlar hâlinde. */
.sayfa-sektor-hizmet .sayfa-sektor-hizmet__sorular {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bosluk-7);
}

.sayfa-sektor-hizmet .sayfa-sektor-hizmet__sorular > .bolum-basi {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .sayfa-sektor-hizmet .sayfa-sektor-hizmet__sorular {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--bosluk-11);
    align-items: center;
  }
}

.sayfa-sektor-hizmet .sayfa-sektor-hizmet__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sayfa-sektor-hizmet .sayfa-sektor-hizmet__soru {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--bosluk-5);
  align-items: start;
  padding-block: var(--bosluk-6);
  border-top: 1px solid var(--cizgi);
}

.sayfa-sektor-hizmet .sayfa-sektor-hizmet__soru:last-child {
  border-bottom: 1px solid var(--cizgi);
}

.sayfa-sektor-hizmet .sayfa-sektor-hizmet__soru-metin {
  min-width: 0;
  padding-top: var(--bosluk-2);
}

.sayfa-sektor-hizmet .sayfa-sektor-hizmet__soru-metin > * + * {
  margin-top: var(--bosluk-2);
}

.sayfa-sektor-hizmet .sayfa-sektor-hizmet__soru-metin > p {
  color: var(--metin-2);
}

@media (min-width: 640px) {
  .sayfa-sektor-hizmet .sayfa-sektor-hizmet__soru {
    column-gap: var(--bosluk-6);
    padding-block: var(--bosluk-7);
  }
}

/* ---------------------------------------------------------------- 4 · ölçüm başlıkları ilgili çözüme gider
   Başlık rengi korunur; ince turkuaz alt çizgi ve ok bağlantıyı belli eder. Dikey dolgu dokunma alanını büyütür
   (≥ 24 px), eksi kenar boşluğu yerleşimi değiştirmez. */
.sayfa-sektor-hizmet .sayfa-sektor-hizmet__bag {
  display: inline-block;
  padding-block: var(--bosluk-1);
  margin-block: calc(-1 * var(--bosluk-1));
  color: var(--metin);
  text-decoration-color: var(--vurgu-cizgi);
}

.sayfa-sektor-hizmet .sayfa-sektor-hizmet__bag:hover {
  color: var(--vurgu-metin);
  text-decoration-color: currentColor;
}

.sayfa-sektor-hizmet .sayfa-sektor-hizmet__bag > .ikon {
  width: 1.125rem;
  height: 1.125rem;
  margin-left: var(--bosluk-1);
  vertical-align: -0.125em;
  color: var(--vurgu-metin);
  transition: transform var(--gecis) var(--egri);
}

@media (hover: hover) {
  .sayfa-sektor-hizmet .sayfa-sektor-hizmet__bag:hover > .ikon {
    transform: translateX(var(--bosluk-1));
  }
}

/* ===== css/sayfa/sektor-market.css ===== */
/*
 * Razbin — Market, Kozmetik ve Eczane sektör sayfası
 * (/sektorler/market-kozmetik-ve-eczane/, /en/industries/grocery-beauty-and-pharmacy/). Sahibi: sayfa ajanı.
 * Yalnız küçük yerleşim ayarları; bütün seçiciler .sayfa-sektor-market ile başlar, değerler belirteçlerden gelir.
 * Kart ipucu ("… inceleyin →"), başlıktaki virgül (.son) ve yüzen kart bileşenin kendisindedir; burada yeniden yazılmaz.
 */

/* 3 · Kasa: bildirim notu (simge kutusu + kısa metin, ince kenarlı yüzey) */
.sayfa-sektor-market .sayfa-sektor-market__not {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-4);
  padding: var(--bosluk-5);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-3);
  background-color: var(--yuzey);
  box-shadow: var(--golge-kart);
}

.sayfa-sektor-market .ikili__metin > .tik-listesi + .sayfa-sektor-market__not {
  margin-top: var(--bosluk-7);
}

.sayfa-sektor-market .sayfa-sektor-market__not > p {
  min-width: 0;
  padding-top: var(--bosluk-1);
  color: var(--metin-2);
}

/* dar ekranda metin sütunu daralmasın: iç boşluk ve simge aralığı bir adım küçülür */
@media (max-width: 479.98px) {
  .sayfa-sektor-market .sayfa-sektor-market__not {
    gap: var(--bosluk-3);
    padding: var(--bosluk-4);
  }
}

/* 4 · Özellik başlıklarındaki bağlantı: başlık renginde, ok simgesiyle; üzerine gelince turkuaz ve altı çizili.
   Dikey iç boşluk dokunma alanını büyütür (dar ekranda ≥ 24 px), eksi dış boşluk satır yüksekliğini korur. */
.sayfa-sektor-market .ozellik > h3 > a {
  display: inline-block;
  padding-block: var(--bosluk-1);
  margin-block: calc(-1 * var(--bosluk-1));
  color: inherit;
  text-decoration: none;
}

.sayfa-sektor-market .ozellik > h3 > a:hover {
  color: var(--vurgu-metin);
  text-decoration-line: underline;
}

.sayfa-sektor-market .ozellik > h3 > a .ikon {
  margin-left: var(--bosluk-1);
  color: var(--vurgu-metin);
  vertical-align: -0.125em;
  transition: transform var(--gecis) var(--egri);
}

@media (hover: hover) {
  .sayfa-sektor-market .ozellik > h3 > a:hover .ikon {
    transform: translateX(var(--bosluk-1));
  }
}

/* Özellik başlığında son sözcük ile ok simgesi aynı satırda kalır (simge tek başına alt satıra düşmez); EN
   başlıklarda "checkout-focused" tireden bölünmez. */
.sayfa-sektor-market .sayfa-sektor-market__bitisik {
  white-space: nowrap;
}

/* 5 · Örnek akşam: sektör çizimi ortada, adımlar altında (dar ekranda çizimle aynı genişlikte) */
.sayfa-sektor-market .sayfa-sektor-market__sahne {
  max-width: 40rem;
  margin-inline: auto;
}

.sayfa-sektor-market .sayfa-sektor-market__sahne + .adimlar {
  margin-top: clamp(var(--bosluk-8), 1rem + 3vw, var(--bosluk-10));
}

@media (max-width: 899.98px) {
  .sayfa-sektor-market .sayfa-sektor-market__sahne + .adimlar {
    max-width: 40rem;
    margin-inline: auto;
  }
}

/* ===== css/sayfa/sektorler.css ===== */
/* Sektörler sayfası (/sektorler/, /en/industries/) — sayfa ajanı.
 * Yalnız yerleşim: renk, boşluk, yarıçap ve geçiş tasarım sisteminin belirteçlerinden; bileşenler yeniden tanımlanmaz.
 * Ortalı hero .hero--orta, kart çizimi .kart__gorsel, kart altındaki ok .kart--etkilesimli .kart__alt ile bileşenden gelir.
 * Bütün seçiciler .sayfa-sektorler ile başlar.
 */

/* ---------------------------------------------------------------- dört sektör: sahne çizimli kartlar (2×2) */
.sayfa-sektorler .sayfa-sektorler__izgara {
  --izgara-bosluk: var(--bosluk-6);
}

@media (min-width: 1024px) {
  .sayfa-sektorler .sayfa-sektorler__izgara {
    --izgara-bosluk: var(--bosluk-7);
  }
}

/* çizimin kendi zemini 480×320 kutuda rx 20: kırpma köşesi onunla aynı (yatay %4,1667 / dikey %6,25),
   üzerine gelince büyüyen çizimin köşesi de aynı kalır */
.sayfa-sektorler .sayfa-sektorler__izgara .kart__gorsel {
  --kart-gorsel-yaricap: 4.1667% / 6.25%;
}

/* simge kutusu başlığın solunda (çizim kartın üstünde olduğu için simge başlıkla aynı satırda) */
.sayfa-sektorler .sayfa-sektorler__baslik {
  display: flex;
  align-items: center;
  gap: var(--bosluk-3);
}

.sayfa-sektorler .sayfa-sektorler__baslik > .kart__baslik {
  min-width: 0;
}

/* dar sütunda maddenin ve ipucunun son satırında tek sözcük kalmaz ("… hour by / hour", "… için / Razbin →") */
.sayfa-sektorler .sayfa-sektorler__izgara .kart__liste > li {
  text-wrap: pretty;
}

.sayfa-sektorler .sayfa-sektorler__izgara .kart__alt {
  text-wrap: balance;
}

/* ---------------------------------------------------------------- ortak temel: özellikler + uygulama ekranı */
.sayfa-sektorler .sayfa-sektorler__ortak .ozellik-izgarasi {
  margin-top: var(--bosluk-7);
}

@media (min-width: 960px) {
  .sayfa-sektorler .sayfa-sektorler__ortak .ozellik-izgarasi {
    margin-top: var(--bosluk-9);
  }
}

/* ===== css/sayfa/sss.css ===== */
/*
 * SSS (/sss/, /en/faq/) — sayfa ajanı.
 * Yalnız bu sayfaya özgü yerleşim; bütün seçiciler .sayfa-sss ile başlar (SOZLESME.md bölüm 6).
 * Renk yalnız anlamsal belirteçlerden; boşluk --bosluk-* ve bileşenlerin kendi ölçeğinden.
 *
 * Parçalar: .sss-dizin (hero'daki konu dizini, .kart üzerine) · .sss-grup (konu bölümü: solda yapışkan başlık,
 * sağda .sss-listesi) · .sss-grup--gorselli (başlık ve liste sağda, telefon görseli solda) · .sss-olcumler.
 */

/* ---------------------------------------------------------------- hero: metin + konu dizini */
@media (min-width: 1024px) {
  .sayfa-sss .sss-hero .hero__ic {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  }
}

.sayfa-sss .sss-dizin {
  --kart-ic-bosluk: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  width: 100%;
  max-width: 36rem;
  padding-bottom: var(--bosluk-3);
}

.sayfa-sss .sss-dizin__liste > li + li {
  border-top: 1px solid var(--cizgi);
}

.sayfa-sss .sss-dizin__bag {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.75rem, 0.35rem + 1.5vw, 1rem);
  min-height: 4.25rem;
  margin-inline: calc(-1 * var(--bosluk-3));
  padding: var(--bosluk-3);
  border-radius: var(--yaricap-3);
  color: var(--metin);
  text-decoration: none;
  transition: background-color var(--gecis-hizli) var(--egri);
}

.sayfa-sss .sss-dizin__bag:hover {
  color: var(--metin);
  background-color: var(--yuzey-2);
}

.sayfa-sss .sss-dizin__ad {
  display: block;
  font-family: var(--yazi-baslik);
  font-size: var(--boyut-md);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.sayfa-sss .sss-dizin__ozet {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--boyut-sm);
  line-height: 1.45;
  color: var(--metin-2);
  text-wrap: pretty;              /* dar ekranda satır sonunda tek sözcük kalmasın */
}

.sayfa-sss .sss-dizin__ok {
  color: var(--metin-3);
  transition: transform var(--gecis) var(--egri), color var(--gecis-hizli) var(--egri);
}

.sayfa-sss .sss-dizin__bag:hover .sss-dizin__ok {
  color: var(--vurgu-metin);
  transform: translateY(2px);
}

/* ---------------------------------------------------------------- konu bölümleri */
/* çapayla gelindiğinde bölüm boşluğunun çoğu atlanır: başlık, üst menünün ~56 px altına oturur */
.sayfa-sss .sss-grup {
  scroll-margin-top: calc(var(--bosluk-8) - var(--bolum-bosluk));
}

.sayfa-sss .sss-grup__ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
}

.sayfa-sss .sss-grup__bas {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .sayfa-sss .sss-grup__ic {
    grid-template-columns: minmax(0, 21.25rem) minmax(0, 1fr);
    column-gap: clamp(3rem, -3rem + 8vw, 6.5rem);
    align-items: start;
  }

  /* uzun listede konu başlığı görünür kalır */
  .sayfa-sss .sss-grup__bas {
    position: sticky;
    top: calc(var(--ust-yukseklik) + var(--bosluk-8));
  }
}

/* "Hangi ölçümleri görürüm?" listesi: genişlik yetince iki sütun, yukarıdan aşağı okunur */
@media (min-width: 560px) {
  .sayfa-sss .sss-olcumler {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    column-gap: var(--bosluk-7);
  }
}

/* ---------------------------------------------------------------- görselli bölüm (Raporlar, koyu) */
/* telefonun gölgesi ve ışıması koyu bölümün içinde kalır (tek sütunda alttaki beyaz bölüme sızmasın) */
.sayfa-sss .sss-grup--gorselli {
  overflow: hidden;
}

@supports (overflow: clip) {
  .sayfa-sss .sss-grup--gorselli {
    overflow: clip;
  }
}

/* dar ekranda telefon listenin altında ortalı durur; geniş ekranda sol sütunu alır */
.sayfa-sss .sss-grup__gorsel {
  --tlf-genislik: 17.5rem;
  padding-top: var(--bosluk-4);
}

@media (min-width: 1024px) {
  .sayfa-sss .sss-grup--gorselli .sss-grup__ic {
    grid-template-areas:
      "gorsel bas"
      "gorsel liste";
    grid-template-rows: auto 1fr;
  }

  .sayfa-sss .sss-grup--gorselli .sss-grup__bas {
    grid-area: bas;
    position: static;
  }

  .sayfa-sss .sss-grup--gorselli .sss-listesi {
    grid-area: liste;
  }

  .sayfa-sss .sss-grup--gorselli .sss-grup__gorsel {
    --tlf-genislik: 21.25rem;
    grid-area: gorsel;
    padding-top: 0;
  }
}

/* ===== css/sayfa/tesekkurler.css ===== */
/*
 * Teşekkürler (/tesekkurler/, /en/thank-you/; noindex) — sayfa ajanı.
 * Yalnız bu sayfaya özgü yerleşim ayarları; bütün seçiciler .sayfa-tesekkurler ile başlar (SOZLESME.md bölüm 6).
 * Renk yalnız anlamsal belirteçlerden; boşluk --bosluk-* ve bileşenlerin kendi ölçeğinden.
 * Hero ortalı onay ekranıdır: .hero--orta (bileşen) ekmek kırıntısını, üst başlığı, başlığı, girişi ve düğmeleri
 * ortalar; burada yalnız onay simgesi, e-posta bağlantısı ve dar ekran düğmeleri ayarlanır.
 */

/* ---------------------------------------------------------------- hero: onay simgesi */
/* turkuaz hale ile çevrili büyük tik (formun başarı panelindeki tikle aynı dil). Blok düzeyinde durur ki satır
   kutusunun alt boşluğunu almasın; .hero--orta onu eksene ortalar. Alt boşluk üst başlığın boşluğuyla birleşir. */
.sayfa-tesekkurler .tk-hero__ikon {
  display: grid;
  margin-bottom: var(--bosluk-7);
  box-shadow:
    inset 0 0 0 1px var(--vurgu-cizgi),
    0 0 0 var(--bosluk-2) color-mix(in srgb, var(--vurgu) 9%, transparent),
    var(--golge-parilti);
}

/* giriş cümlesindeki e-posta adresi satır sonunda bölünmesin */
.sayfa-tesekkurler .tk-hero .hero__giris a {
  white-space: nowrap;
}

/* dar ekran (< 480 px): tam genişlik düğmelerde etiket tek satırda kalsın (çağrı bandındaki ölçü; 320 px'te
   "Message us on WhatsApp" sığar) */
@media (max-width: 479.98px) {
  .sayfa-tesekkurler .tk-hero .hero__dugmeler > .dugme:not(.dugme--metin) {
    padding-inline: var(--bosluk-4);
  }

  .sayfa-tesekkurler .tk-hero .hero__dugmeler > .dugme--buyuk:not(.dugme--metin) {
    font-size: clamp(0.9375rem, 0.4375rem + 2.5vw, 1.0625rem);
  }
}

/* ---------------------------------------------------------------- sonraki adımlar: dar kapta, başlıkla ortalı */
@media (min-width: 900px) {
  .sayfa-tesekkurler .tk-sonra .adim {
    text-align: center;
  }

  .sayfa-tesekkurler .tk-sonra .adim__no {
    margin-inline: auto;
  }

  /* adımları bağlayan çizgi numaradan numaraya uzansın (ortalı numaralar) */
  .sayfa-tesekkurler .tk-sonra .adim:not(:last-child)::before {
    left: calc(50% + var(--adim-no) / 2 + var(--bosluk-3));
    right: calc(-50% + var(--adim-no) / 2 + var(--bosluk-3) - var(--adim-aralik));
  }
}

/* ===== css/sayfa/veri-silme.css ===== */
/* Veri Silme Talimatları (/veri-silme-talimatlari/, /en/data-deletion-instructions/) — sayfa ajanı.
 * Beş yasal sayfanın ortak yerleşimi (kvkk, gizlilik, cerez, kullanim, veri-silme; aynı kurallar her dosyada kendi önekiyle):
 *   içindekiler + öbür yasal metinler (dar ekranda metnin üstünde kart; >=1024 px'te sağ sütunda, sığarsa yapışkan)
 *   + .yasal-metin (tasarım sistemi; burada yalnız bölüm ayracı ve numarası) + soru satırı. Sayfaya özgü: talep kartı.
 * Bütün seçiciler .sayfa-veri-silme ile başlar; renk, boşluk, yarıçap ve geçiş yalnız belirteçlerden.
 */

/* ---------------------------------------------------------------- yerleşim */
.sayfa-veri-silme .sayfa-veri-silme__duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bosluk-8);
  max-width: 72ch;
}

.sayfa-veri-silme .sayfa-veri-silme__govde {
  min-width: 0;
}

/* ---------------------------------------------------------------- içindekiler (dar ekranda metnin üstünde kart) */
.sayfa-veri-silme .sayfa-veri-silme__yan {
  min-width: 0;
  padding: var(--bosluk-5);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-4);
  background-color: var(--zemin-2);
}

.sayfa-veri-silme .sayfa-veri-silme__gezinme > .ust-baslik {
  margin-bottom: var(--bosluk-3);
}

.sayfa-veri-silme .sayfa-veri-silme__liste > li {
  break-inside: avoid;
}

.sayfa-veri-silme .sayfa-veri-silme__liste a {
  display: flex;
  gap: var(--bosluk-2);
  padding: var(--bosluk-2) 0 var(--bosluk-2) var(--bosluk-4);
  border-left: 2px solid var(--cizgi);
  font-size: var(--boyut-sm);
  font-weight: 500;
  line-height: 1.45;
  color: var(--metin-2);
  text-decoration: none;
  transition: color var(--gecis-hizli) var(--egri), border-color var(--gecis-hizli) var(--egri);
}

.sayfa-veri-silme .sayfa-veri-silme__liste a:hover {
  color: var(--vurgu-metin);
  border-left-color: var(--vurgu);
}

.sayfa-veri-silme .sayfa-veri-silme__liste a[aria-current="page"] {
  font-weight: 650;
  color: var(--metin);
  border-left-color: var(--vurgu-metin);
}

.sayfa-veri-silme .sayfa-veri-silme__no {
  flex: none;
  min-width: 1.75em;
  color: var(--metin-3);
  font-variant-numeric: tabular-nums;
}

/* öbür yasal metinler yalnız geniş ekranda: dar ekranda altbilgi aynı bağlantıları hemen aşağıda verir */
.sayfa-veri-silme .sayfa-veri-silme__diger {
  display: none;
}

@media (min-width: 640px) {
  .sayfa-veri-silme .sayfa-veri-silme__yan {
    padding: var(--bosluk-6) var(--bosluk-7);
  }

  .sayfa-veri-silme .sayfa-veri-silme__gezinme:first-child > .sayfa-veri-silme__liste {
    columns: 2;
    column-gap: var(--bosluk-6);
  }
}

/* ---------------------------------------------------------------- geniş ekran: metin solda, içindekiler sağda */
@media (min-width: 1024px) {
  .sayfa-veri-silme .sayfa-veri-silme__duzen {
    grid-template-columns: minmax(0, 72ch) minmax(14rem, 18rem);
    grid-template-areas: "metin yan";
    justify-content: space-between;
    column-gap: var(--bosluk-10);
    max-width: none;
  }

  .sayfa-veri-silme .sayfa-veri-silme__govde {
    grid-area: metin;
  }

  /* sağ iç pay: 1024-1335 px arasında sağ alttaki yüzen WhatsApp düğmesi bu sütunun kenarına biner */
  .sayfa-veri-silme .sayfa-veri-silme__yan {
    grid-area: yan;
    align-self: start;
    padding: 0 var(--bosluk-8) 0 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }

  .sayfa-veri-silme .sayfa-veri-silme__gezinme:first-child > .sayfa-veri-silme__liste {
    columns: auto;
  }

  .sayfa-veri-silme .sayfa-veri-silme__diger {
    display: block;
    margin-top: var(--bosluk-7);
    padding-top: var(--bosluk-7);
    border-top: 1px solid var(--cizgi);
  }
}

/* yapışkanlık yalnız sütun ekrana sığdığında (alçak pencerede alt bağlantılar erişilmez kalmasın) */
@media (min-width: 1024px) and (min-height: 50rem) {
  .sayfa-veri-silme .sayfa-veri-silme__yan {
    position: sticky;
    top: calc(var(--ust-yukseklik) + var(--bosluk-7));
  }
}

/* ---------------------------------------------------------------- yasal metin: bölüm ayracı ve numarası */
.sayfa-veri-silme .yasal-metin h2 {
  margin-top: var(--bosluk-8);
  padding-top: var(--bosluk-7);
  border-top: 1px solid var(--cizgi);
}

.sayfa-veri-silme .yasal-metin > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.sayfa-veri-silme .sayfa-veri-silme__bolum-no {
  color: var(--vurgu-metin);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- soru satırı */
.sayfa-veri-silme .sayfa-veri-silme__soru {
  display: flex;
  align-items: center;
  gap: var(--bosluk-4);
  max-width: 72ch;
  margin-top: var(--bosluk-10);
  padding: var(--bosluk-4) var(--bosluk-5);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-4);
  background-color: var(--zemin-2);
}

.sayfa-veri-silme .sayfa-veri-silme__soru > p {
  min-width: 0;
  color: var(--metin-2);
}

.sayfa-veri-silme .sayfa-veri-silme__soru a {
  font-weight: 600;
  overflow-wrap: anywhere;
}

@media print {
  .sayfa-veri-silme .sayfa-veri-silme__yan,
  .sayfa-veri-silme .sayfa-veri-silme__soru {
    display: none;
  }
}

/* ---------------------------------------------------------------- yalnız bu sayfada: talep kartı ve e-posta düğmesi */
.sayfa-veri-silme .sayfa-veri-silme__talep {
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-3);
  background-color: var(--yuzey);
  box-shadow: var(--golge-kart);
}

.sayfa-veri-silme .sayfa-veri-silme__talep > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bosluk-1);
  padding: var(--bosluk-4) var(--bosluk-5);
}

.sayfa-veri-silme .sayfa-veri-silme__talep > div + div {
  border-top: 1px solid var(--cizgi);
}

.sayfa-veri-silme .sayfa-veri-silme__talep dt {
  font-size: var(--boyut-sm);
  font-weight: 600;
  color: var(--metin-2);
}

.sayfa-veri-silme .sayfa-veri-silme__talep dd {
  min-width: 0;
  font-weight: 600;
  color: var(--metin);
  overflow-wrap: anywhere;
}

@media (min-width: 640px) {
  .sayfa-veri-silme .sayfa-veri-silme__talep > div {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: var(--bosluk-5);
    align-items: baseline;
  }
}

/* düğme kartın hemen altında; dar ekranda tam genişlik, rahat dokunma alanı */
.sayfa-veri-silme .yasal-metin > .sayfa-veri-silme__eylem {
  margin-top: var(--bosluk-5);
}

@media (max-width: 479px) {
  .sayfa-veri-silme .sayfa-veri-silme__eylem > .dugme {
    width: 100%;
  }
}

@media print {
  .sayfa-veri-silme .sayfa-veri-silme__eylem {
    display: none;
  }
}