@charset "UTF-8";
/* ============================================================================
   OVASOFT.TR — ova.css
   Tek dosya tasarım sistemi + bileşenler + bölüm düzenleri.
   Kaynak: plan/04-tasarim-sistemi.md (§1 :root, §4 bileşenler, §5 ızgara,
   §6 ritim, §7 erişilebilirlik, §8 hareket), plan/03-mobil.md (§5 tipografi,
   §6 dokunma hedefi, §7 bölüm türü × mobil düzen), plan/02-icerik-ve-mimari.md
   (§4 ana sayfa bölüm sırası).

   YAZIM KURALI: mobil öncelikli. Varsayılan bildirimler 390 px'in stilidir;
   büyük ekran yalnızca `min-width` sorgularıyla eklenir. Tek istisna
   `prefers-reduced-motion`, `prefers-contrast`, `hover`, `pointer` ve
   :root bölüm dolgusu merdiveni.

   YASAKLAR (BRIEF §5): cam/bulanıklık filtresi, neon parıltı, renkli box-shadow, mor-mavi gradyan, emoji ikon,
   yasaklı yazı tipi aileleri (BRIEF §4), sayaç bileşeni,
   yan yana üç eşit yuvarlak kart.

   İÇİNDEKİLER
   ---------------------------------------------------------------------------
    01  :root — tasarım jetonları (04 §1, birebir)
    02  Mobil öncelikli jeton düzeltmesi + güvenli alan + kırılma noktaları
    03  .koyu-bolge — jeton devrilmesi
    04  Sıfırlama ve temel öğeler
    05  Tipografi seviyeleri (.tp-*)
    06  Kapsayıcı, ızgara, şerit (04 §5)
    07  Bölüm kabuğu ve ritim merdiveni (04 §6)
    08  Bileşen 01 — .ust (başlık, masaüstü menü, mobil tam ekran menü)
    09  Bileşen 02 — .dugme
    10  Bileşen 03 — .kart
    11  Bileşen 04 — .rozet ve .cip
    12  Bileşen 05 — .bolum-bas
    13  Bileşen 06 — .sss (akordiyon)
    14  Bileşen 07 — .paket (fiyat kartı)
    15  Bileşen 08 — form alanları
    16  Bileşen 09 — .dipnot ve yasal metin
    17  Bileşen 10 — .alt (alt bilgi)
    18  Bileşen 11 — .bildirim (uyarı kutusu)
    19  Bileşen 12 — .sekme
    20  Bileşen 13 — .tablo
    21  .alt-cubuk — sabit mobil alt çubuk
    22  Ana sayfa bölümleri: #hero #soz #ne-yapariz #is-modeli #paket
                             #surec #entegrasyon #sss-ozet #kapanis
    23  İç sayfa ritmi (breadcrumb, başlık bandı, gövde)
    24  Yardımcı sınıflar ve belirme
    25  Odak görünümü ve erişilebilirlik
    26  Azaltılmış hareket / yüksek kontrast
    27  Yazdırma (print)
   ========================================================================= */


/* ===========================================================================
   01  :root — TASARIM JETONLARI  (04 §1, değişken adları değişmez)
   ======================================================================== */
:root{
  /* ---------- RENK: yüzeyler ---------- */
  --yuzey:            #ffffff;   /* ölçülen: arka-plan sayımında 244 kez, baskın */
  --yuzey-2:          #f6f8fc;   /* ölçülen: govdeArka, 5 rotanın hepsinde aynı */
  --yuzey-3:          #edf2f8;   /* ölçülen: 3. bölüm zemini (anasayfa çözüm alanları) */
  --yuzey-4:          #f4f7fb;   /* ölçülen: --tm-bg, hero zemini */
  --yuzey-mavi:       #e9f1fd;   /* bilgi kutusu / seçili sekme zemini */

  /* ---------- RENK: koyu bölümler ---------- */
  --koyu:             #0d243e;   /* ölçülen: yorum bölümü, iç sayfa başlık bandı */
  --koyu-derin:       #08192c;   /* alt bilgi (eski #1b2c30 yerine) */
  --koyu-kart:        #142f4c;   /* ölçülen: koyu bölüm kartı */
  --koyu-kart-ustu:   #1a3857;   /* ölçülen: koyu bölüm kartı :hover */

  /* ---------- RENK: mürekkep ---------- */
  --murekkep:         #0b1c33;   /* BRIEF §4; beyaz üzerinde 17,10:1 */
  --murekkep-1:       #14283f;   /* gövde metni; 14,95:1 */
  --murekkep-2:       #33475e;   /* ikincil metin;  9,53:1 */
  --murekkep-3:       #4a5f77;   /* sönük metin, kart numarası; 6,57:1 */
  --murekkep-ters:    #ffffff;   /* koyu üzerinde; #0d243e'de 15,68:1 */
  --murekkep-ters-2:  #c3d4e8;   /* koyu üzerinde gövde; 10,38:1 */
  --murekkep-ters-3:  #a8bcd2;   /* koyu üzerinde sönük;  8,06:1 */

  /* ---------- RENK: birincil ---------- */
  --birincil:         #1867d1;   /* BRIEF §4 ölçülen; beyazda 5,39:1 */
  --birincil-koyu:    #1248ac;   /* BRIEF §4 ölçülen; beyazda 8,24:1 */
  --birincil-bas:     #1458bb;   /* :active; beyaz yazıyla 6,68:1 */
  --birincil-acik:    #9ebbe1;   /* BRIEF §4 ölçülen */
  --birincil-vurgu:   #8fb9ee;   /* koyu zeminde bağlantı; #0d243e'de 7,72:1 */
  --birincil-zemin:   #e9f1fd;   /* açık zeminde birincil dolgu */

  /* ---------- RENK: kenarlık ---------- */
  --kenar:            #dce6f0;   /* ölçülen ince çizgi */
  --kenar-2:          #e4ebf3;   /* kart içi ince ayraç */
  --kenar-guclu:      #c8d6e6;   /* kart hover öncesi belirgin çizgi */
  --kenar-form:       #7b8fa8;   /* 3,31:1 — WCAG 1.4.11 karşılığı */
  --kenar-koyu:       #24486d;   /* koyu zeminde ayraç */
  --kenar-koyu-guclu: #557aa4;   /* koyu zeminde form/UI sınırı; 3,51:1 */
  --kenar-birincil:   rgba(24,103,209,.14); /* ölçülen */
  --izgara-cizgi:     rgba(24,103,209,.18); /* ölçülen, %10 açıldı */

  /* ---------- RENK: durum ---------- */
  --basari:      #0f6b3d;  --basari-zemin:  #eaf7f0;  /* 5,97:1 */
  --uyari:       #8a4b07;  --uyari-zemin:   #fdf3e6;  /* 6,19:1 */
  --hata:        #a71d1d;  --hata-zemin:    #fdeeee;  /* 6,57:1 */
  --bilgi:       #155bb8;  --bilgi-zemin:   #e9f1fd;  /* 5,73:1 */

  /* ---------- RENK: odak ---------- */
  --odak:        #0b1c33;  /* dış halka, açık zeminde */
  --odak-zit:    #ffffff;  /* iç halka, açık zeminde */

  /* ---------- TİPOGRAFİ: aileler ---------- */
  --yt-baslik: 'Syne', 'Trebuchet MS', system-ui, sans-serif;
  --yt-govde:  'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --yt-mono:   'Martian Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* ---------- TİPOGRAFİ: ölçek (04 §3) ---------- */
  --fs-marka:  clamp(38px, 1.59rem + 3.24vw, 72px);
  --fs-h1:     clamp(26px, 1.02rem + 2.48vw, 52px);
  --fs-h1-ic:  clamp(25px, 1.08rem + 2.00vw, 46px);
  --fs-h2:     clamp(28px, 1.24rem + 2.10vw, 50px);
  --fs-h2-s:   clamp(24px, 1.16rem + 1.24vw, 38px);
  --fs-h3:     clamp(19px, 1.14rem + 0.19vw, 21px);
  --fs-h4:     17px;
  --fs-govde:  clamp(15.5px, 0.93rem + 0.14vw, 17px);
  --fs-govde-s:14.5px;
  --fs-mikro:  13.5px;   /* mutlak taban — bunun altına HİÇBİR metin inmez */
  --fs-etiket: 13px;     /* Martian Mono, büyük harf — 13 px mobil yazı tabanı (03 §5) */
  --fs-rakam:  clamp(28px, 1.56rem + 0.76vw, 36px);
  --fs-fiyat:  clamp(26px, 1.49rem + 0.57vw, 32px);

  /* ---------- TİPOGRAFİ: satır yüksekliği ---------- */
  --sy-marka: 0.96;  --sy-h1: 1.13;  --sy-h2: 1.08;  --sy-h3: 1.25;
  --sy-govde: 1.68;  --sy-siki: 1.45;  --sy-tek: 1.2;

  /* ---------- TİPOGRAFİ: harf aralığı ---------- */
  --ha-marka: -0.030em;  --ha-h1: -0.020em;  --ha-h2: -0.020em;
  --ha-h3:    -0.015em;  --ha-govde: 0;      --ha-menu: -0.005em;
  --ha-etiket: 0.02em;   --ha-etiket-genis: 0.06em;  --ha-rakam: -0.02em;

  /* ---------- BOŞLUK ---------- */
  --bo-1:4px;   --bo-2:8px;   --bo-3:12px;  --bo-4:16px;  --bo-5:20px;
  --bo-6:24px;  --bo-7:28px;  --bo-8:32px;  --bo-10:40px; --bo-12:48px;
  --bo-14:56px; --bo-16:64px; --bo-18:72px; --bo-20:80px; --bo-24:96px;
  --bo-28:112px;--bo-32:128px;

  /* ---------- BÖLÜM DOLGUSU (04 §6 ritim merdiveni) ---------- */
  --bolum-xs: 32px;  --bolum-s: 48px;  --bolum-m: 64px;
  --bolum-l:  80px;  --bolum-xl: 96px; --bolum-xxl: 128px;

  /* ---------- KAPSAYICI (ölçülen genişlikler) ---------- */
  --kap-genis: 1320px;  /* paketler */
  --kap:       1280px;  /* baskın, 5 kez */
  --kap-orta:  1152px;  /* iç sayfa gövdesi */
  --kap-dar:   896px;
  --kap-metin: 672px;   /* yasal metin sayfaları */
  --kap-oluk:  20px;    /* ölçülen */
  --kap-oluk-g:32px;    /* ölçülen geniş */

  /* ---------- YARIÇAP (ölçülen dağılım) ---------- */
  --r-1:6px;  --r-2:8px;  --r-3:10px; --r-4:12px;
  --r-5:14px; --r-6:16px; --r-7:22px; --r-8:28px; --r-tam:999px;

  /* ---------- GÖLGE (ölçülen — renkli glow YOK) ---------- */
  --g-0: none;
  --g-1: 0 1px 3px rgba(18,54,90,.04);
  --g-2: 0 3px 8px rgba(23,54,85,.04);
  --g-3: 0 12px 32px rgba(18,54,90,.06);
  --g-4: 0 22px 65px -32px rgba(16,41,67,.33);
  --g-koyu: 0 18px 40px -25px rgba(21,59,101,.55);
  --g-buton: inset 0 1px 0 rgba(255,255,255,.22), 0 5px 12px rgba(23,110,229,.10);
  --g-baslik: 0 4px 24px rgba(20,40,63,.024);

  /* ---------- HAREKET ---------- */
  --sure-1: 120ms;  --sure-2: 200ms;  --sure-3: 320ms;  --sure-4: 480ms;
  --egri:       cubic-bezier(.2,.6,.2,1);
  --egri-cikis: cubic-bezier(.4,0,1,1);
  --egri-giris: cubic-bezier(0,0,.2,1);

  /* ---------- KATMAN ---------- */
  --z-zemin:0; --z-icerik:1; --z-ekran:2; --z-yapisan:20;
  --z-baslik:50; --z-yuzen:60; --z-ortu:80; --z-bildirim:90;
}


/* ===========================================================================
   02  MOBİL ÖNCELİKLİ JETON DÜZELTMESİ + GÜVENLİ ALAN + KIRILMA NOKTALARI
   Yukarıdaki blok 04 §1'den birebir alındığı için masaüstü değerlerini
   taşıyor. Mobil öncelikli yazım gereği taban değerler burada mobile
   çekilir, masaüstü değerleri `min-width:768px` ile geri konur.
   ======================================================================== */
:root{
  --bolum-xs:24px; --bolum-s:32px; --bolum-m:40px;
  --bolum-l:48px;  --bolum-xl:56px; --bolum-xxl:72px;

  /* Kırılma noktaları (03 §2) — belge değeri, medya sorgusunda elle yazılır */
  --kn-2sutun:640px; --kn-tablet:768px; --kn-masaustu:1024px; --kn-genis:1344px;

  /* Güvenli alan (03 §3.4) — viewport-fit=cover olmadan hepsi 0 döner */
  --gv-ust: env(safe-area-inset-top, 0px);
  --gv-alt: env(safe-area-inset-bottom, 0px);
  --gv-sol: env(safe-area-inset-left, 0px);
  --gv-sag: env(safe-area-inset-right, 0px);

  --ust-boy: 60px;              /* mobil başlık yüksekliği */
  --alt-cubuk-boy: calc(56px + var(--gv-alt));
  --tam-boy: 100vh;             /* 100vh yasak; altta 100svh ile geçilir */
  --sutun-bosluk: 20px;         /* 04 §5: <768 */
}
@supports (height: 100svh){ :root{ --tam-boy: 100svh; } }

@media (min-width:768px){
  :root{
    --bolum-xs:32px; --bolum-s:48px; --bolum-m:64px;
    --bolum-l:80px;  --bolum-xl:96px; --bolum-xxl:128px;
    --ust-boy: 68px;
    --sutun-bosluk: 24px;
  }
}
@media (min-width:1024px){
  :root{ --ust-boy: 76px; }
}
@media (min-width:1200px){
  :root{ --sutun-bosluk: 32px; }
}


/* ===========================================================================
   03  .koyu-bolge — koyu bölüm içinde jetonlar devrilir
   ======================================================================== */
.koyu-bolge{
  --yuzey: var(--koyu-kart);
  --yuzey-2: var(--koyu);
  --yuzey-3: var(--koyu-derin);
  --yuzey-4: var(--koyu);
  --yuzey-mavi: rgba(255,255,255,.06);
  --murekkep: #ffffff;
  --murekkep-1: var(--murekkep-ters-2);
  --murekkep-2: var(--murekkep-ters-3);
  --murekkep-3: var(--murekkep-ters-3);
  --birincil: var(--birincil-vurgu);
  --birincil-koyu: var(--birincil-vurgu);
  --kenar: rgba(255,255,255,.10);
  --kenar-2: rgba(255,255,255,.07);
  --kenar-guclu: rgba(255,255,255,.18);
  --kenar-form: var(--kenar-koyu-guclu);
  --odak: #ffffff;
  --odak-zit: var(--murekkep);
  color: var(--murekkep);
  background: var(--yuzey-2);
}


/* ===========================================================================
   04  SIFIRLAMA VE TEMEL ÖĞELER
   ======================================================================== */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--ust-boy) + 16px);
  /* overflow-x:clip YASAK (03 §2) — taşma sebebi kaldırılır, gizlenmez */
}

body{
  margin:0;
  background:var(--yuzey-2);
  color:var(--murekkep-1);
  font:400 var(--fs-govde)/var(--sy-govde) var(--yt-govde);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  hyphens:auto;
  -webkit-hyphens:auto;
}

/* Sabit alt çubuk açıkken son bölüm çubuğun altında kalmasın (03 §3.4) */
body.alt-cubuklu{ padding-bottom:var(--alt-cubuk-boy); }
@media (min-width:1024px){ body.alt-cubuklu{ padding-bottom:0; } }

h1,h2,h3,h4,h5,h6{ margin:0; font-family:var(--yt-baslik); font-weight:600; color:var(--murekkep); }
p,ul,ol,dl,figure,blockquote,pre{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img,picture,video,canvas,svg{ display:block; max-width:100%; }
img,video{ height:auto; }
svg{ fill:currentColor; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
table{ border-collapse:collapse; width:100%; }
hr{ border:0; border-top:1px solid var(--kenar); margin:var(--bo-8) 0; }
strong,b{ font-weight:600; }
::selection{ background:var(--birincil-zemin); color:var(--murekkep); }

a{ color:var(--birincil-koyu); text-decoration:none; }
a:not([class]){
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  padding:6px 0;              /* satır içi bağlantı 44px'e zorlanmaz (03 §6) */
}

/* Dokunma davranışı (03 §6) — 300 ms gecikme ve yapışık vurgu kalkar */
a,button,[role="button"],label,summary,input,select,textarea{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* Uzun Türkçe kelimeler 390 px'te taşmasın */
h1,h2,h3,h4,p,li,dd,dt,summary,figcaption{ overflow-wrap:break-word; }
.kirilabilir{ overflow-wrap:anywhere; word-break:break-word; }


/* ===========================================================================
   05  TİPOGRAFİ SEVİYELERİ (04 §3.5)
   ======================================================================== */
.tp-marka { font:700 var(--fs-marka)/var(--sy-marka) var(--yt-baslik);
            letter-spacing:var(--ha-marka); text-wrap:balance; }
.tp-h1    { font:600 var(--fs-h1)/var(--sy-h1) var(--yt-baslik);
            letter-spacing:var(--ha-h1); text-wrap:balance; max-width:20ch; }
.tp-h1-ic { font:600 var(--fs-h1-ic)/var(--sy-h1) var(--yt-baslik);
            letter-spacing:var(--ha-h1); text-wrap:balance; max-width:22ch; }
.tp-h2    { font:600 var(--fs-h2)/var(--sy-h2) var(--yt-baslik);
            letter-spacing:var(--ha-h2); text-wrap:balance; max-width:23ch; }
.tp-h2-s  { font:600 var(--fs-h2-s)/var(--sy-h2) var(--yt-baslik);
            letter-spacing:var(--ha-h2); text-wrap:balance; }
.tp-h3    { font:600 var(--fs-h3)/var(--sy-h3) var(--yt-baslik);
            letter-spacing:var(--ha-h3); text-wrap:balance; }
.tp-h4    { font:600 var(--fs-h4)/1.35 var(--yt-baslik); letter-spacing:-.01em; }
.tp-govde { font:400 var(--fs-govde)/var(--sy-govde) var(--yt-govde);
            text-wrap:pretty; max-width:66ch; }
.tp-govde-s{ font:400 var(--fs-govde-s)/1.6 var(--yt-govde); }
.tp-mikro { font:400 var(--fs-mikro)/1.55 var(--yt-govde); color:var(--murekkep-3); }
.tp-menu  { font:600 13.5px/1.2 var(--yt-govde); letter-spacing:var(--ha-menu); }
.tp-etiket{ font:500 var(--fs-etiket)/var(--sy-tek) var(--yt-mono);
            letter-spacing:var(--ha-etiket); text-transform:uppercase; }
.tp-etiket-g{ font:500 var(--fs-etiket)/var(--sy-tek) var(--yt-mono);
            letter-spacing:var(--ha-etiket-genis); text-transform:uppercase; }
.tp-rakam { font:500 var(--fs-rakam)/1 var(--yt-mono);
            letter-spacing:var(--ha-rakam); font-variant-numeric:tabular-nums; }
.tp-fiyat { font:600 var(--fs-fiyat)/1 var(--yt-mono);
            letter-spacing:var(--ha-rakam); font-variant-numeric:tabular-nums; }

/* Mobil menü satırı 18 px Syne (03 §3.2) */
.tp-menu-mobil{ font:600 18px/1.2 var(--yt-baslik); letter-spacing:-.01em; }

/* Metin renk yardımcıları */
.renk-sonuk{ color:var(--murekkep-3); }
.renk-ikincil{ color:var(--murekkep-2); }
.renk-vurgu{ color:var(--birincil-koyu); }


/* ===========================================================================
   06  KAPSAYICI, IZGARA, ŞERİT (04 §5 / 03 §7.3)
   ======================================================================== */
.kap{
  width:100%;
  margin-inline:auto;
  padding-inline:max(var(--kap-oluk), var(--gv-sol), var(--gv-sag));
  max-width:calc(var(--kap) + 2 * var(--kap-oluk));
}
@media (min-width:768px){
  .kap{
    padding-inline:max(var(--kap-oluk-g), var(--gv-sol), var(--gv-sag));
    max-width:calc(var(--kap) + 2 * var(--kap-oluk-g));
  }
}
.kap--genis{ max-width:calc(1320px + 2 * var(--kap-oluk-g)); }
.kap--orta { max-width:calc(1152px + 2 * var(--kap-oluk-g)); }
.kap--dar  { max-width:calc(896px  + 2 * var(--kap-oluk-g)); }
.kap--metin{ max-width:calc(672px  + 2 * var(--kap-oluk)); }

/* Izgara: taban tek sütun, genişlikle açılır. Eşit yükseklik YOK. */
.izgara{ display:grid; gap:var(--sutun-bosluk); align-items:start; }
@media (min-width:640px){
  .izgara--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:900px){
  .izgara--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .izgara--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1200px){
  .izgara--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* Yatay kaydırılan şerit — <640 px'te 3+ eş türden öğe için (03 §7.3) */
.serit{
  display:flex;
  gap:12px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--kap-oluk);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding-inline:max(var(--kap-oluk), var(--gv-sol));
  padding-block:4px;
  margin-inline:calc(-1 * var(--kap-oluk));
}
.serit::-webkit-scrollbar{ display:none; }
.serit > *{ flex:0 0 82vw; max-width:320px; scroll-snap-align:start; }

/* Şerit altı ilerleme: nokta değil, 1/4 sayacı + 2 px çizgi */
.serit-durum{ display:flex; align-items:center; gap:12px; margin-top:14px; }
.serit-konum{ font:500 var(--fs-etiket)/1 var(--yt-mono); color:var(--murekkep-3);
              font-variant-numeric:tabular-nums; }
.serit-cizgi{ position:relative; flex:1; height:2px; background:var(--kenar); border-radius:2px; }
.serit-cizgi::after{
  content:""; position:absolute; inset:0 auto 0 0;
  width:calc(var(--serit-oran, .25) * 100%);
  background:var(--birincil); border-radius:2px;
}
@media (min-width:640px){
  .serit{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--sutun-bosluk); overflow:visible; margin-inline:0;
    padding-inline:0; scroll-snap-type:none;
  }
  .serit > *{ flex:none; max-width:none; }
  .serit-durum{ display:none; }
}
@media (min-width:1200px){
  .serit{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}


/* ===========================================================================
   07  BÖLÜM KABUĞU VE RİTİM MERDİVENİ (04 §6)
   Kural: ardışık iki bölümün zemini + dolgusu + iç düzeni aynı olamaz.
   ======================================================================== */
.bolum{ position:relative; padding-block:var(--bolum-m); }
.bolum--xs { padding-block:var(--bolum-xs); }
.bolum--s  { padding-block:var(--bolum-s); }
.bolum--m  { padding-block:var(--bolum-m); }
.bolum--l  { padding-block:var(--bolum-l); }
.bolum--xl { padding-block:var(--bolum-xl); }
.bolum--xxl{ padding-block:var(--bolum-xxl); }
.bolum--sifir{ padding-block:0; }
.bolum--bitisik{ padding-top:0; padding-bottom:var(--bolum-xs); }

.bolum--beyaz{ background:var(--yuzey); }
.bolum--acik { background:var(--yuzey-3); }
.bolum--kagit{ background:var(--yuzey-4); }
.bolum--seffaf{ background:transparent; }
.bolum--koyu { background:var(--koyu); }
.bolum--koyu-derin{ background:var(--koyu-derin); }

/* Yalnızca beyaz → beyaz geçişinde çizgi (04 §6 kural 4) */
.bolum--beyaz + .bolum--beyaz{ border-top:1px solid var(--kenar-birincil); }

/* Izgara dokusu: yalnız açık zeminli bölümlerde */
.bolum--dokulu{
  background-image:
    linear-gradient(var(--izgara-cizgi) 1px, transparent 1px),
    linear-gradient(90deg, var(--izgara-cizgi) 1px, transparent 1px);
  background-size:80px 80px, 80px 80px;
}

/* 5. bölümden itibaren boyama bütçesi (02 §4) */
.bolum--gec{ content-visibility:auto; contain-intrinsic-size:auto 520px; }


/* ===========================================================================
   08  BİLEŞEN 01 — .ust  (04 §4.1 / 03 §3.1–3.2)
   ======================================================================== */
.ust{
  position:sticky; top:0; z-index:var(--z-baslik);
  background:var(--yuzey);      /* 03 §3.1: tam opak; altindaki icerik okunmaz */
  border-bottom:1px solid var(--kenar);
  padding-top:var(--gv-ust);
  /* Cam/bulanıklık filtresi kullanılmıyor: 04 §4.1 ve §10 derleme denetimi.
     Opak zemin (.97) zaten okunurluğu veriyor, kare süresi bozulmuyor. */
  transition:box-shadow var(--sure-2) linear;
}
.ust--kaydi{ box-shadow:var(--g-baslik); }

.ust-ic{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; min-height:var(--ust-boy);
}
.ust-logo{ display:flex; align-items:center; min-height:44px; min-width:44px; }
.ust-logo img{ height:30px; width:auto; }
@media (min-width:768px){ .ust-logo img{ height:32px; } }
@media (min-width:1024px){ .ust-logo img{ height:34px; } }

/* Masaüstü menü — mobilde basılmaz */
.ust-menu{ display:none; }
@media (min-width:1024px){
  .ust-menu{ display:flex; align-items:center; gap:2px; }
}
.ust-bag{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 16px; border-radius:var(--r-3);
  font:600 13.5px/1.2 var(--yt-govde); letter-spacing:var(--ha-menu);
  color:var(--murekkep-2);
  transition:background-color var(--sure-2) var(--egri), color var(--sure-2) var(--egri);
}
.ust-bag[aria-current="page"]{ background:var(--birincil); color:#ffffff; }
.ust-bag:active{ transform:translateY(1px); }

/* Sağdaki eylem alanı */
.ust-eylem{ display:flex; align-items:center; gap:8px; }
.ust-ara{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--r-3);
  border:1px solid var(--kenar-guclu); color:var(--birincil-koyu);
}
.ust-ara svg{ width:20px; height:20px; }
@media (min-width:1024px){ .ust-ara{ display:none; } }
.ust-cta{ display:none; }
@media (min-width:1024px){ .ust-cta{ display:inline-flex; } }

/* Hamburger — 48 × 48 (03 §3.1) */
.menu-ac{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:var(--r-3); color:var(--murekkep);
}
@media (min-width:1024px){ .menu-ac{ display:none; } }
.menu-ac-cizgi{ display:block; width:20px; height:2px; background:currentColor; border-radius:2px; }
.menu-ac-kutu{ display:grid; gap:6px; }

/* Tam ekran mobil menü (03 §3.2) — blur yok, tam opak */
.menu-ortu{
  position:fixed; inset:0; z-index:var(--z-ortu);
  background:var(--yuzey);
  padding:calc(var(--gv-ust) + var(--ust-boy)) 0 calc(var(--gv-alt) + 24px);
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; transform:translateY(-8px); visibility:hidden;
  transition:opacity 140ms var(--egri-cikis), transform 140ms var(--egri-cikis),
             visibility 0s linear 140ms;
}
.menu-ortu[data-acik="1"]{
  opacity:1; transform:none; visibility:visible;
  transition:opacity 180ms var(--egri-giris), transform 180ms var(--egri-giris),
             visibility 0s;
}
@media (min-width:1024px){ .menu-ortu{ display:none; } }

.menu-satir{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:56px; padding:0 var(--kap-oluk);
  font:600 18px/1.2 var(--yt-baslik); letter-spacing:-.01em;
  color:var(--murekkep);
  border-bottom:1px solid var(--kenar-2);
}
.menu-satir-ok{ font:400 16px/1 var(--yt-govde); color:var(--murekkep-3); }
.menu-grup > summary{ list-style:none; }
.menu-grup > summary::-webkit-details-marker{ display:none; }
.menu-grup[open] > .menu-satir .menu-satir-ok{ transform:rotate(90deg); }
.menu-alt-liste{ background:var(--yuzey-2); }
.menu-alt-liste .menu-satir{
  min-height:52px; padding-left:calc(var(--kap-oluk) + 16px);
  font:600 var(--fs-govde)/1.2 var(--yt-govde);
  color:var(--murekkep-2);
}
.menu-dip{
  display:grid; gap:12px;
  padding:24px var(--kap-oluk) 0;
}
.menu-dip .dugme{ width:100%; }
.menu-telefon{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; border-radius:var(--r-4);
  border:1px solid var(--kenar-guclu);
  font:600 var(--fs-govde)/1 var(--yt-govde); color:var(--murekkep);
}

@media (hover:hover){
  .ust-bag:hover{ background:var(--yuzey-3); color:var(--birincil-koyu); }
  .ust-bag[aria-current="page"]:hover{ background:var(--birincil-koyu); color:#ffffff; }
  .ust-ara:hover{ border-color:var(--birincil); background:var(--yuzey-mavi); }
  .menu-ac:hover{ background:var(--yuzey-3); }
  .menu-satir:hover{ background:var(--yuzey-2); }
}


/* ===========================================================================
   09  BİLEŞEN 02 — .dugme  (04 §4.2 / 03 §6)
   ======================================================================== */
.dugme{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 22px; border-radius:var(--r-4);
  border:1px solid transparent;
  font:600 14px/1.2 var(--yt-govde);
  max-width:100%;
  text-align:center; text-decoration:none; white-space:nowrap;
  transition:transform var(--sure-2) var(--egri),
             background-color var(--sure-2) var(--egri),
             border-color var(--sure-2) var(--egri),
             color var(--sure-2) var(--egri);
}
.dugme-ikon{ flex:none; width:18px; height:18px;
             transition:transform var(--sure-2) var(--egri); }
.dugme--tam{ width:100%; }

/* Boyutlar */
.dugme--s{ min-height:44px; padding:0 16px; border-radius:var(--r-3); font-size:13.5px; }
.dugme--s .dugme-ikon{ width:16px; height:16px; }
.dugme--m{ min-height:48px; padding:0 22px; border-radius:var(--r-4); font-size:14px; }
.dugme--l{ min-height:56px; padding:0 28px; border-radius:var(--r-4); font-size:15.5px; }
.dugme--l .dugme-ikon{ width:20px; height:20px; }
/* Dokunmatikte küçük boy yok (04 §4.2) */
@media (pointer:coarse){ .dugme--s{ min-height:48px; padding:0 20px; } }

/* Birincil */
.dugme--bir{
  background:var(--birincil); color:#ffffff;
  border-color:var(--birincil-koyu);
  box-shadow:var(--g-buton);
}
.dugme--bir:active{ background:var(--birincil-bas); transform:translateY(1px); box-shadow:var(--g-1); }

/* İkincil */
.dugme--iki{
  background:var(--yuzey); color:var(--murekkep-1);
  border-color:var(--kenar-guclu);
}
.dugme--iki:active{ transform:translateY(1px); }

/* Sessiz — ikon zorunlu, böylece bağlantıdan ayrışır */
/* Sessiz düğme metin gibi uzayabildiği için 360 px'te taşıyordu (M2):
   satır sarmasına izin verilir, yükseklik içeriğe göre büyür. */
.dugme--ses{
  background:transparent; color:var(--birincil-koyu); border-color:transparent;
  padding:8px 14px;
  white-space:normal; text-align:left;
  justify-content:flex-start;
}
.dugme--ses.dugme--s{ padding:8px 14px; }
.dugme--ses:active{ background:var(--yuzey-mavi); }

/* Devre dışı */
.dugme:disabled,
.dugme[aria-disabled="true"]{
  background:#c8d6e6; color:#5b6f86; border-color:#c8d6e6;
  box-shadow:none; cursor:not-allowed; transform:none;
}

/* Koyu bölümde birincil düğme.
   .koyu-bolge içinde --birincil jetonu açık vurgu rengine (#8fb9ee) devriliyor;
   düğme bunu zemin olarak alınca beyaz yazıyla kontrast 1,9:1'e düşüyordu.
   Birincil düğme koyu zeminde de markanın kendi mavisinde kalır: beyaz yazı 5,39:1. */
.koyu-bolge .dugme--bir{
  background:#1867d1; color:#ffffff; border-color:#1248ac;
}
.koyu-bolge .dugme--bir:active{ background:#1458bb; }

/* Koyu bölümde ikincil düğme */
.koyu-bolge .dugme--iki{
  background:rgba(255,255,255,.06);
  border-color:var(--kenar-koyu-guclu);
  color:#ffffff;
}
.koyu-bolge .dugme--ses{ color:var(--birincil-vurgu); }

@media (hover:hover){
  .dugme--bir:hover{ background:var(--birincil-koyu); transform:translateY(-2px); }
  .dugme--iki:hover{ border-color:var(--birincil); color:var(--birincil-koyu); background:var(--yuzey-mavi); }
  .dugme--ses:hover{ background:var(--yuzey-3); }
  .dugme:hover .dugme-ikon{ transform:translateX(3px); }
  .dugme:disabled:hover,
  .dugme[aria-disabled="true"]:hover{ background:#c8d6e6; transform:none; }
  .koyu-bolge .dugme--iki:hover{ background:rgba(255,255,255,.12); border-color:#ffffff; }
  .koyu-bolge .dugme--bir:hover{ background:#1248ac; border-color:#1248ac; }
}


/* ===========================================================================
   10  BİLEŞEN 03 — .kart  (04 §4.3 / 03 §7.4)
   Kart içi sıra sabit: ikon → etiket → başlık → özet → liste → eylem.
   ======================================================================== */
.kart{
  position:relative; display:flex; flex-direction:column;
  padding:20px; border-radius:var(--r-6);
  background:var(--yuzey); border:1px solid var(--kenar);
  box-shadow:var(--g-2);
  /* gölge geçişi yok: kare süresi (BRIEF §5) */
  transition:transform var(--sure-2) var(--egri), border-color var(--sure-2) var(--egri);
}
@media (min-width:768px){ .kart{ padding:28px; } }

.kart::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:transparent; border-radius:var(--r-6) var(--r-6) 0 0;
  transition:background-color var(--sure-2) var(--egri);
}
.kart-no{
  position:absolute; top:24px; right:24px;
  font:500 var(--fs-etiket)/var(--sy-tek) var(--yt-mono);
  letter-spacing:var(--ha-etiket); text-transform:uppercase;
  color:var(--murekkep-3);
}
.kart-ikon{ width:40px; height:40px; color:var(--birincil); margin-bottom:16px; }
.kart-etiket{
  font:500 var(--fs-etiket)/var(--sy-tek) var(--yt-mono);
  letter-spacing:var(--ha-etiket); text-transform:uppercase;
  color:var(--birincil-koyu); margin-bottom:10px;
}
.kart-baslik{ font:600 var(--fs-h3)/var(--sy-h3) var(--yt-baslik);
              letter-spacing:var(--ha-h3); color:var(--murekkep); }
.kart-metin{ margin-top:10px; font:400 var(--fs-govde)/1.75 var(--yt-govde);
             color:var(--murekkep-2); text-wrap:pretty; }
.kart-liste{ margin-top:14px; display:grid; gap:8px; }
.kart-madde{
  position:relative; padding-left:16px;
  font:400 var(--fs-govde-s)/1.6 var(--yt-govde); color:var(--murekkep-2);
}
.kart-madde::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; background:var(--birincil);
}
.kart-eylem{
  margin-top:auto; padding-top:18px;
  border-top:1px solid var(--kenar-2);
  display:flex; align-items:center; gap:8px;
  min-height:44px;
  font:600 var(--fs-govde-s)/1 var(--yt-govde); color:var(--birincil-koyu);
}
.kart-eylem-bosluk{ margin-top:22px; }

/* Görselli kart: mobilde görsel üstte, ≥900'de sağda %45 */
.kart--gorselli{ padding:0; overflow:hidden; }
.kart--gorselli .kart-govde{ padding:20px; display:flex; flex-direction:column; }
.kart-gorsel img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
@media (min-width:768px){ .kart--gorselli .kart-govde{ padding:28px; } }
@media (min-width:900px){
  .kart--gorselli{ display:grid; grid-template-columns:55% 45%; align-items:stretch; }
  .kart--gorselli .kart-gorsel{ order:2; height:100%; }
  .kart--gorselli .kart-gorsel img{ height:100%; aspect-ratio:4/3; }
}

/* Koyu bölümde kart */
.koyu-bolge .kart{ background:var(--koyu-kart); border-color:var(--kenar); box-shadow:none; }

.kart:focus-within{ border-color:var(--birincil-acik); }
@media (hover:hover){
  .kart:hover{ transform:translateY(-4px); border-color:var(--birincil-acik); box-shadow:var(--g-3); }
  .kart:hover::before{ background:var(--birincil); }
  .koyu-bolge .kart:hover{ background:var(--koyu-kart-ustu); }
}


/* ===========================================================================
   11  BİLEŞEN 04 — .rozet ve .cip  (04 §4.4)
   ======================================================================== */
.rozet{
  display:inline-flex; align-items:center; gap:6px;
  min-height:26px; padding:0 10px; border-radius:var(--r-1);
  font:500 var(--fs-etiket)/var(--sy-tek) var(--yt-mono);
  letter-spacing:var(--ha-etiket); text-transform:uppercase;
  background:var(--yuzey-3); color:var(--murekkep-2);
  border:1px solid transparent;
}
.rozet--sessiz{ background:var(--yuzey-3); color:var(--murekkep-2); border-color:transparent; }
.rozet--bilgi { background:var(--bilgi-zemin);  color:var(--bilgi);  border-color:#c3d8f5; }
.rozet--basari{ background:var(--basari-zemin); color:var(--basari); border-color:#bfe3ce; }
.rozet--uyari { background:var(--uyari-zemin);  color:var(--uyari);  border-color:#efd6b3; }
.rozet--hata  { background:var(--hata-zemin);   color:var(--hata);   border-color:#efc4c4; }
.rozet--koyu  { background:rgba(255,255,255,.07); color:var(--murekkep-ters-2);
                border-color:var(--kenar-koyu); }
/* Tıklanabilir rozet (filtre çipi) 44 px'e çıkar — koyu ve sessiz türevleri de.
   Metin dikeyde ortalanır, görünür yükseklik dolguyla değil hizayla verilir. */
.rozet--tiklanir,
.rozet--tiklanir.rozet--koyu,
.rozet--tiklanir.rozet--sessiz{
  display:inline-flex; align-items:center;
  min-height:44px; padding:0 14px;
}

/* Hizmet çipi — tıklanmıyor, 44 px kuralı dışı (04 §4.4) */
.cip{
  display:inline-flex; align-items:center; gap:6px;
  min-height:32px; padding:0 12px; border-radius:var(--r-tam);
  font:400 var(--fs-mikro)/1 var(--yt-govde);
  background:var(--yuzey); color:var(--murekkep-2);
  border:1px solid var(--kenar);
}
.cip-liste{ display:flex; flex-wrap:wrap; gap:8px; }
.koyu-bolge .cip{ background:rgba(255,255,255,.05); border-color:var(--kenar-koyu);
                  color:var(--murekkep-ters-2); }

@media (hover:hover){
  .rozet--tiklanir:hover{ background:var(--yuzey-mavi); color:var(--birincil-koyu); }
}


/* ===========================================================================
   12  BİLEŞEN 05 — .bolum-bas  (04 §4.5)
   Ana sayfada ortalı, iç sayfalarda sola dayalı.
   ======================================================================== */
.bolum-bas{ margin-inline:auto; text-align:center; max-width:720px; }
.bolum-bas--sol{ margin-inline:0; text-align:left; }

.bolum-etiket{
  display:inline-flex; align-items:center; gap:13px;
  font:500 var(--fs-etiket)/var(--sy-tek) var(--yt-mono);
  letter-spacing:var(--ha-etiket-genis); text-transform:uppercase;
  color:var(--birincil-koyu);
}
.bolum-etiket::before{
  content:""; width:32px; height:1px; background:var(--birincil); flex:none;
}
.bolum-baslik{
  margin-top:14px;
  font:600 var(--fs-h2)/var(--sy-h2) var(--yt-baslik);
  letter-spacing:var(--ha-h2); text-wrap:balance;
  max-width:23ch; color:var(--murekkep);
}
.bolum-bas .bolum-baslik{ margin-inline:auto; }
.bolum-bas--sol .bolum-baslik{ margin-inline:0; }
.bolum-alt{
  margin-top:16px; max-width:54ch;
  font:400 var(--fs-govde)/var(--sy-govde) var(--yt-govde);
  color:var(--murekkep-2); text-wrap:pretty;
}
.bolum-bas .bolum-alt{ margin-inline:auto; }
.bolum-bas--sol .bolum-alt{ margin-inline:0; }

/* Başlık bloğu ile içerik arası */
.bolum-icerik{ margin-top:24px; }
@media (min-width:768px){ .bolum-icerik{ margin-top:48px; } }


/* ===========================================================================
   13  BİLEŞEN 06 — .sss (akordiyon)  (04 §4.6 / 03 §7.11)
   Açılma grid-template-rows:0fr→1fr ile; max-height hilesi yok.
   ======================================================================== */
.sss-liste{ display:grid; gap:10px; max-width:68ch; }
.sss{
  background:var(--yuzey);
  border:1px solid var(--kenar);
  border-radius:var(--r-4);
  transition:border-color var(--sure-2) var(--egri);
}
.sss[open]{
  border-color:var(--birincil-acik);
  background:#f7faff;
  box-shadow:inset 3px 0 0 var(--birincil);
}
.sss-soru{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:56px; padding:18px 20px;
  font:600 var(--fs-govde)/1.45 var(--yt-govde);
  color:var(--murekkep); cursor:pointer; list-style:none;
}
.sss-soru::-webkit-details-marker{ display:none; }

/* + işareti: iki 2 px çizgi, açıkta 45° döner */
.sss-ikon{
  position:relative; flex:none; width:24px; height:24px;
}
.sss-ikon::before,
.sss-ikon::after{
  content:""; position:absolute; left:50%; top:50%;
  background:var(--birincil); border-radius:1px;
  transform:translate(-50%,-50%);
}
.sss-ikon::before{ width:14px; height:2px; }
.sss-ikon::after { width:2px; height:14px; }
.sss[open] .sss-ikon{ transform:rotate(45deg); }
.sss-ikon{ transition:transform var(--sure-2) var(--egri); }

.sss-govde{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--sure-2) var(--egri);
}
.sss[open] .sss-govde{ grid-template-rows:1fr; }
.sss-govde-ic{ overflow:hidden; }
.sss-govde-ic > *{
  padding:0 20px 20px;
  font:400 var(--fs-govde)/var(--sy-govde) var(--yt-govde);
  color:var(--murekkep-2); max-width:62ch;
}
.koyu-bolge .sss{ background:var(--koyu-kart); }
.koyu-bolge .sss[open]{ background:var(--koyu-kart-ustu); }

@media (hover:hover){
  .sss:hover{ border-color:var(--birincil-acik); }
}


/* ===========================================================================
   14  BİLEŞEN 07 — .paket (fiyat kartı)  (04 §4.7 / 03 §7.5)
   Kartlar eşit yükseklikte DEĞİL: align-items:start.
   ======================================================================== */
.paket-liste{ display:grid; gap:16px; align-items:start; }
@media (min-width:900px){
  .paket-liste{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sutun-bosluk); }
}
@media (min-width:1200px){
  .paket-liste--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .paket-liste--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

.paket{
  position:relative; display:flex; flex-direction:column;
  padding:20px; border-radius:var(--r-6);
  background:var(--yuzey); border:1px solid var(--kenar);
  box-shadow:var(--g-2);
  transition:transform var(--sure-2) var(--egri), border-color var(--sure-2) var(--egri);
}
@media (min-width:768px){
  .paket{ padding:28px; }
  .paket-fiyat-kutu{ margin-top:18px; padding:16px; }
  .paket .dugme{ margin-top:18px; }
  .paket .cip-liste{ margin-top:16px; }
  .paket-ayrac{ margin:18px 0; }
  .paket-kapsam{ gap:10px; }
}

/* Sol vurgu şeridi (ölçülen: top 28, height 34, width 3) */
.paket::before{
  content:""; position:absolute; left:0; top:28px;
  width:3px; height:34px; background:var(--birincil);
  border-radius:0 2px 2px 0;
}
.paket--one{
  background:var(--koyu);          /* düz renk — gradyan yok */
  border-color:var(--birincil-acik);
  box-shadow:var(--g-4);
}
.paket-rozet{
  position:absolute; left:50%; top:0; transform:translate(-50%,-50%);
  white-space:nowrap;
  min-height:26px; padding:0 12px; border-radius:var(--r-1);
  display:inline-flex; align-items:center;
  font:500 var(--fs-etiket)/1 var(--yt-mono);
  letter-spacing:var(--ha-etiket); text-transform:uppercase;
  background:var(--yuzey-mavi); color:var(--birincil-koyu);
  border:1px solid #aac8e9;
}
.paket-etiket{
  font:500 var(--fs-etiket)/var(--sy-tek) var(--yt-mono);
  letter-spacing:var(--ha-etiket); text-transform:uppercase;
  color:var(--murekkep-3);
}
.paket-ad{ margin-top:8px; font:600 var(--fs-h3)/var(--sy-h3) var(--yt-baslik);
           letter-spacing:var(--ha-h3); color:var(--murekkep); }
.paket-ozet{ margin-top:10px; font:400 var(--fs-govde-s)/1.6 var(--yt-govde);
             color:var(--murekkep-2); }

/* Fiyat kutusu */
.paket-fiyat-kutu{
  margin-top:14px; padding:14px; border-radius:var(--r-3);
  background:var(--yuzey-2);
  display:grid; gap:6px;
}
.paket--one .paket-fiyat-kutu{ background:rgba(255,255,255,.06); }
.fiyat-baslik{
  font:500 var(--fs-etiket)/var(--sy-tek) var(--yt-mono);
  letter-spacing:var(--ha-etiket); text-transform:uppercase;
  color:var(--murekkep-3);
}
.fiyat-eski{
  font:400 var(--fs-mikro)/1.3 var(--yt-mono); color:var(--murekkep-3);
  text-decoration:line-through; font-variant-numeric:tabular-nums;
}
.fiyat{
  font:600 var(--fs-fiyat)/1 var(--yt-mono);
  letter-spacing:var(--ha-rakam); font-variant-numeric:tabular-nums;
  color:var(--murekkep);
}
.fiyat-birim{ font-size:.62em; color:var(--murekkep-3); margin-left:.35em; }
.fiyat-taksit{ font:400 var(--fs-mikro)/1.5 var(--yt-govde); color:var(--birincil-koyu); }
.fiyat-not{ font:400 var(--fs-mikro)/1.5 var(--yt-govde); color:var(--murekkep-3); }

.paket .dugme{ margin-top:14px; width:100%; }
@media (max-width:1023px){ .paket .dugme{ min-height:52px; } }
.paket .cip-liste{ margin-top:12px; }
.paket-ayrac{ margin:14px 0; border-top:1px solid var(--kenar-2); }
.paket-kapsam{ display:grid; gap:8px; }
.paket-madde{
  position:relative; padding-left:24px;
  font:400 var(--fs-govde-s)/1.6 var(--yt-govde); color:var(--murekkep-2);
}
.paket-madde-ikon{
  position:absolute; left:0; top:.15em; width:16px; height:16px; color:var(--birincil);
}
/* Mobilde kapsam listesinin kuyruğu katlanır */
.paket-devam > summary{
  list-style:none; min-height:44px; display:flex; align-items:center;
  font:600 var(--fs-govde-s)/1 var(--yt-govde); color:var(--birincil-koyu); cursor:pointer;
}
.paket-devam > summary::-webkit-details-marker{ display:none; }

@media (hover:hover){
  .paket:hover{ transform:translateY(-3px); border-color:var(--birincil-acik); }
}


/* ===========================================================================
   15  BİLEŞEN 08 — FORM ALANLARI  (04 §4.8 / 03 §7.9)
   Girdi metni 16 px: iOS'ta odakta zorla yakınlaştırmayı engeller.
   ======================================================================== */
.form{ display:grid; gap:20px; }
@media (min-width:640px){
  .form--iki{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .form-tam{ grid-column:1 / -1; }
}
.alan{ display:grid; gap:8px; min-width:0; }
.alan-etiket{
  font:600 var(--fs-mikro)/1.3 var(--yt-govde);
  letter-spacing:.01em; color:var(--murekkep-1);
}
.girdi,
.secim,
.metin-alan{
  width:100%; max-width:100%;
  min-height:48px; padding:0 14px;
  border-radius:var(--r-3);
  border:1px solid var(--kenar-form);
  background:var(--yuzey); color:var(--murekkep);
  font:400 16px/1.4 var(--yt-govde);
  transition:border-color var(--sure-2) var(--egri);
}
@media (max-width:1023px){
  .girdi,.secim,.metin-alan{ min-height:52px; }   /* 03 §6 mobil girdi yüksekliği */
}
.metin-alan{ min-height:120px; padding:12px 14px; line-height:1.6; resize:vertical; }
.girdi::placeholder,
.metin-alan::placeholder{ color:#64788f; }
.secim{
  appearance:none; -webkit-appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2333475e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
.girdi:focus,
.secim:focus,
.metin-alan:focus{ border-color:var(--birincil); }
.girdi:disabled,
.secim:disabled,
.metin-alan:disabled{
  background:var(--yuzey-3); color:var(--murekkep-3);
  border-color:var(--kenar-guclu); cursor:not-allowed;
}
.alan-yardim{ margin-top:-2px; font:400 var(--fs-mikro)/1.5 var(--yt-govde); color:var(--murekkep-3); }
.alan-hata,
.alan > .hata{
  display:flex; align-items:flex-start; gap:8px;
  font:600 var(--fs-mikro)/1.45 var(--yt-govde); color:var(--hata);
}
.alan > .hata[hidden]{ display:none; }
.koyu-bolge .alan > .hata{ color:#ffc9c4; }
.alan-hata svg{ flex:none; width:16px; height:16px; margin-top:1px; }
[aria-invalid="true"].girdi,
[aria-invalid="true"].secim,
[aria-invalid="true"].metin-alan{ border:1.5px solid var(--hata); }
.alan--basarili .girdi,
.alan--basarili .secim,
.alan--basarili .metin-alan{ border-color:var(--basari); }
.alan-onay-ikon{ width:18px; height:18px; color:var(--basari); }

/* Onay kutusu (03 §6): görünür kutu 22 px, dokunma alanı ETİKETİN TAMAMI.
   Yerel <input> görsel olarak gizlenir ama yerinde durur — klavye odağı,
   ekran okuyucu adı/durumu ve form doğrulaması (aria-invalid) bozulmaz.
   Görünür kutu .onay::before, işaret .onay::after ile çizilir. */
.onay{
  position:relative;
  display:flex; align-items:flex-start; gap:12px;
  min-height:44px; padding:11px 0; cursor:pointer;
  font:400 var(--fs-govde-s)/1.6 var(--yt-govde); color:var(--murekkep-2);
}
/* Görünür kutu — akıştaki ilk öğe, 22 × 22 */
.onay::before{
  content:""; flex:none; width:22px; height:22px;
  border:1px solid var(--kenar-form); border-radius:var(--r-1);
  background:var(--yuzey);
  transition:background-color var(--sure-1) var(--egri), border-color var(--sure-1) var(--egri);
}
/* Yerel kutu: görünmez, etiketin tamamını kaplar → dokunma alanı 44 px'in üstünde */
.onay input[type="checkbox"]{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; margin:0; padding:0;
  appearance:none; -webkit-appearance:none;
  opacity:0; border:0; background:none; cursor:pointer;
}
/* Etiket metni ve içindeki bağlantı kutunun ÜSTÜNDE kalır: bağlantı tıklanabilir */
.onay > span{ position:relative; z-index:1; pointer-events:none; }
.onay > span a{ pointer-events:auto; }
/* İşaretli durum */
.onay:has(input[type="checkbox"]:checked)::before{
  background:var(--birincil); border-color:var(--birincil-koyu);
}
.onay:has(input[type="checkbox"]:checked)::after{
  content:""; position:absolute; left:8px; top:14px;
  width:6px; height:11px;
  border:2px solid #ffffff; border-top:0; border-left:0;
  transform:rotate(42deg);
}
/* Odak halkası görünür kutuda */
.onay:has(input[type="checkbox"]:focus-visible)::before{
  outline:3px solid var(--odak); outline-offset:2px;
  box-shadow:0 0 0 2px var(--odak-zit);
}
/* Doğrulama hatası: renk tek başına bildirim değil, metin de yazılır (ova.js) */
.alan--hatali .onay::before{ border:1.5px solid var(--hata); background:var(--hata-zemin); }
/* :has() desteklemeyen tarayıcıda kutu yine çizilir, işaret yerel kutudan gelir */
@supports not selector(:has(*)){
  .onay input[type="checkbox"]{
    position:static; inset:auto; opacity:1; width:22px; height:22px;
    flex:none; border:1px solid var(--kenar-form); border-radius:var(--r-1);
    background:var(--yuzey);
  }
  .onay::before{ display:none; }
  .onay > span{ pointer-events:auto; }
  .onay input[type="checkbox"]:checked{ background:var(--birincil); border-color:var(--birincil-koyu); }
}

/* Radyo kartı ("Ne zaman arayalım?") */
.radyo-grup{ display:grid; gap:12px; }
@media (min-width:640px){ .radyo-grup{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.radyo-kart{
  display:flex; align-items:flex-start; gap:12px;
  min-height:72px; padding:12px; border-radius:var(--r-3);
  border:1px solid var(--kenar); background:var(--yuzey); cursor:pointer;
  font:400 var(--fs-govde-s)/1.5 var(--yt-govde); color:var(--murekkep-2);
  transition:border-color var(--sure-2) var(--egri), background-color var(--sure-2) var(--egri);
}
.radyo-kart input[type="radio"]{
  flex:none; appearance:none; -webkit-appearance:none;
  width:22px; height:22px; margin:0;
  border:1px solid var(--kenar-form); border-radius:50%; background:var(--yuzey);
}
.radyo-kart input[type="radio"]:checked{ border:6px solid var(--birincil); }
.radyo-kart:has(input:checked){
  border-color:var(--birincil); background:var(--yuzey-mavi);
  box-shadow:inset 0 0 0 1px var(--birincil);
}
.radyo-kart b{ display:block; color:var(--murekkep); font-weight:600; }

/* Çok adımlı form (03 §7.9) */
.adim-cizgi{ height:4px; background:var(--kenar); border-radius:2px; overflow:hidden; }
.adim-cizgi span{ display:block; height:100%; width:var(--adim-oran,16.6%); background:var(--birincil); }
.adim-yazi{ margin-top:10px; font:400 var(--fs-mikro)/1.4 var(--yt-govde); color:var(--murekkep-2); }
.adim-gezinme{ display:flex; gap:12px; margin-top:24px; }
.adim-gezinme .dugme--iki{ flex:0 0 96px; min-height:48px; }
.adim-gezinme .dugme--bir{ flex:1; min-height:52px; }

.koyu-bolge .girdi,
.koyu-bolge .secim,
.koyu-bolge .metin-alan{
  background:rgba(255,255,255,.04); color:#ffffff; border-color:var(--kenar-koyu-guclu);
}
.koyu-bolge .girdi::placeholder,
.koyu-bolge .metin-alan::placeholder{ color:var(--murekkep-ters-3); }

@media (hover:hover){
  .girdi:hover, .secim:hover, .metin-alan:hover{ border-color:#5b6f86; }
  .radyo-kart:hover{ border-color:var(--birincil-acik); }
}


/* ===========================================================================
   16  BİLEŞEN 09 — .dipnot ve YASAL METİN  (04 §4.9 / 03 §7.10)
   ======================================================================== */
.dipnot{ font:400 var(--fs-mikro)/1.55 var(--yt-govde); color:var(--murekkep-3); }
.dipnot a{ color:var(--murekkep-2); text-decoration:underline; text-underline-offset:3px; }

.metin-sayfa{ max-width:68ch; }
.metin-sayfa p{ font:400 var(--fs-govde)/var(--sy-govde) var(--yt-govde); color:var(--murekkep-1); }
.metin-sayfa p + p{ margin-top:20px; }
.metin-sayfa h2{ margin-top:40px; margin-bottom:12px;
                 font:600 var(--fs-h2-s)/var(--sy-h2) var(--yt-baslik);
                 letter-spacing:var(--ha-h2); }
.metin-sayfa h3{ margin-top:36px; margin-bottom:10px;
                 font:600 var(--fs-h3)/var(--sy-h3) var(--yt-baslik);
                 letter-spacing:var(--ha-h3); }
.metin-sayfa ul,
.metin-sayfa ol{ margin-top:16px; padding-left:20px; display:grid; gap:8px; }
.metin-sayfa ul li{ list-style:disc; }
.metin-sayfa ol li{ list-style:decimal; }
.metin-sayfa li{ font:400 var(--fs-govde)/var(--sy-govde) var(--yt-govde); color:var(--murekkep-1); }


/* ===========================================================================
   17  BİLEŞEN 10 — .alt (alt bilgi)  (04 §4.10 / 03 §7.12)
   ======================================================================== */
.alt{
  background:var(--koyu-derin);
  border-top:1px solid var(--kenar-koyu);
  color:var(--murekkep-ters-2);
  padding-top:40px;
  padding-bottom:calc(32px + var(--gv-alt) + var(--alt-cubuk-boy));
}
@media (min-width:768px){
  .alt{ padding-top:var(--bolum-l); padding-bottom:var(--bolum-m); }
}
@media (min-width:1024px){
  .alt{ padding-bottom:var(--bolum-m); }
}
.alt-izgara{ display:grid; gap:20px; }
@media (min-width:600px){ .alt-izgara{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 24px; } }
@media (min-width:900px){ .alt-izgara{ grid-template-columns:2fr repeat(4,1fr); gap:40px; } }

.alt-marka img{ height:36px; width:auto; }
.alt-slogan{
  margin-top:16px;
  font:500 var(--fs-etiket)/var(--sy-tek) var(--yt-mono);
  letter-spacing:var(--ha-etiket-genis); text-transform:uppercase;
  color:var(--birincil-vurgu);
}
.alt-tanim{ margin-top:12px; max-width:44ch;
            font:400 var(--fs-govde-s)/1.7 var(--yt-govde); color:var(--murekkep-ters-2); }
.alt-iletisim{ margin-top:20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
@media (min-width:900px){ .alt-iletisim{ display:flex; flex-wrap:wrap; } }
.alt-cip{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 14px; border-radius:var(--r-tam);
  border:1px solid var(--kenar-koyu);
  font:600 var(--fs-mikro)/1 var(--yt-govde); color:#ffffff;
  transition:background-color var(--sure-2) var(--egri);
}
.alt-cip svg{ width:18px; height:18px; }
@media (min-width:900px){ .alt-cip{ min-height:44px; } }

.alt-baslik{
  font:500 var(--fs-etiket)/var(--sy-tek) var(--yt-mono);
  letter-spacing:var(--ha-etiket-genis); text-transform:uppercase;
  color:var(--birincil-vurgu);
}
.alt-liste{ margin-top:8px; }
.alt-bag{
  display:flex; align-items:center; min-height:44px;
  font:400 var(--fs-govde-s)/1.4 var(--yt-govde); color:var(--murekkep-ters-2);
  border-bottom:1px solid rgba(255,255,255,.06);
}
@media (min-width:900px){ .alt-bag{ border-bottom:0; } }

/* Katlanabilir bağlantı grubu — yalnız mobilde katlanır */
.alt-grup > summary{
  display:flex; align-items:center; justify-content:space-between;
  min-height:48px; list-style:none; cursor:pointer;
}
.alt-grup > summary::-webkit-details-marker{ display:none; }
@media (min-width:900px){
  .alt-grup > summary{ cursor:default; pointer-events:none; }
  .alt-grup > summary .menu-satir-ok{ display:none; }
}

.alt-yasal{
  margin-top:28px; padding-top:28px;
  border-top:1px solid var(--kenar-koyu);
  display:grid; gap:0;
}
.alt-yasal a{
  display:flex; align-items:center; min-height:44px;
  font:400 var(--fs-mikro)/1.4 var(--yt-govde); color:var(--murekkep-ters-3);
  border-bottom:1px solid rgba(255,255,255,.06);
}
@media (min-width:768px){
  .alt-yasal{ display:flex; flex-wrap:wrap; gap:8px; }
  .alt-yasal a{
    min-height:40px; padding:0 12px; border:1px solid var(--kenar-koyu);
    border-radius:var(--r-tam);
  }
}
.alt-telif{
  margin-top:20px;
  font:400 var(--fs-mikro)/1.55 var(--yt-govde); color:var(--murekkep-ters-3);
}

@media (hover:hover){
  .alt-cip:hover{ background:rgba(255,255,255,.06); }
  .alt-bag:hover{ color:#ffffff; text-decoration:underline; text-underline-offset:5px; }
  .alt-yasal a:hover{ color:#ffffff; }
}


/* ===========================================================================
   18  BİLEŞEN 11 — .bildirim (uyarı kutusu)  (04 §4.11)
   `.uyari` adı 04'te geçtiği için eş anlamlı olarak da tanımlıdır.
   Animasyon yok: okuyucu odağı kaçmasın.
   ======================================================================== */
.bildirim,
.uyari-kutu{
  position:relative; display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px; border-radius:var(--r-3);
  background:var(--bilgi-zemin); color:var(--murekkep-1);
  border-left:3px solid var(--bilgi);
}
.bildirim-ikon{ flex:none; width:20px; height:20px; color:var(--bilgi); margin-top:1px; }
.bildirim-baslik{ font:600 var(--fs-govde)/1.4 var(--yt-govde); color:var(--murekkep); }
.bildirim-govde{ margin-top:4px; font:400 var(--fs-govde-s)/1.6 var(--yt-govde); color:var(--murekkep-2); }
.bildirim-kapat{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin:-11px -8px -11px auto; border-radius:var(--r-2);
  color:var(--murekkep-2);
}
.bildirim-kapat svg{ width:18px; height:18px; }

.bildirim--bilgi ,.uyari-kutu--bilgi { background:var(--bilgi-zemin);  border-left-color:var(--bilgi); }
.bildirim--basari,.uyari-kutu--basari{ background:var(--basari-zemin); border-left-color:var(--basari); }
.bildirim--uyari ,.uyari-kutu--uyari { background:var(--uyari-zemin);  border-left-color:var(--uyari); }
.bildirim--hata  ,.uyari-kutu--hata  { background:var(--hata-zemin);   border-left-color:var(--hata); }
.bildirim--basari .bildirim-ikon{ color:var(--basari); }
.bildirim--uyari  .bildirim-ikon{ color:var(--uyari); }
.bildirim--hata   .bildirim-ikon{ color:var(--hata); }

@media (hover:hover){
  .bildirim-kapat:hover{ background:rgba(11,28,51,.06); color:var(--murekkep); }
}


/* ===========================================================================
   19  BİLEŞEN 12 — .sekme  (04 §4.12)
   ======================================================================== */
.sekme-liste{
  display:flex; gap:2px; overflow-x:auto; scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.sekme-liste::-webkit-scrollbar{ display:none; }
.sekme{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 18px; border-radius:var(--r-3);
  font:600 13.5px/1.2 var(--yt-govde); letter-spacing:var(--ha-menu);
  color:var(--murekkep-2); white-space:nowrap; scroll-snap-align:start;
  transition:background-color var(--sure-2) var(--egri), color var(--sure-2) var(--egri);
}
.sekme[aria-selected="true"]{ background:var(--birincil); color:#ffffff; }

/* Alt çizgi görünümü — uzun listelerde */
.sekme-liste--cizgi{
  gap:0; border-bottom:1px solid var(--kenar);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
}
.sekme-liste--cizgi .sekme{
  min-height:48px; border-radius:0; background:none;
  border-bottom:2px solid transparent;
}
.sekme-liste--cizgi .sekme[aria-selected="true"]{
  background:none; color:var(--murekkep); border-bottom-color:var(--birincil);
}
.sekme-panel{ padding-top:24px; }
.sekme-panel[hidden]{ display:none; }

@media (hover:hover){
  .sekme:hover{ background:var(--yuzey-3); }
  .sekme[aria-selected="true"]:hover{ background:var(--birincil-koyu); color:#ffffff; }
  .sekme-liste--cizgi .sekme:hover{ background:none; color:var(--murekkep); }
}


/* ===========================================================================
   20  BİLEŞEN 13 — .tablo  (04 §4.13 / 03 §7.6)
   Mobil: karşılaştırma tablosu kaydırılır, diğer tablolar karta döner.
   ======================================================================== */
.tablo-kabuk{
  position:relative;
  border:1px solid var(--kenar); border-radius:var(--r-4); overflow:hidden;
}
.tablo{ width:100%; font-variant-numeric:tabular-nums; }
.tablo caption{
  text-align:left; padding:14px 16px;
  font:600 var(--fs-govde-s)/1.4 var(--yt-govde); color:var(--murekkep-2);
  border-bottom:1px solid var(--kenar);
}
.tablo thead th{
  background:var(--yuzey-3); text-align:left; padding:12px 16px;
  font:500 var(--fs-etiket)/var(--sy-tek) var(--yt-mono);
  letter-spacing:var(--ha-etiket); text-transform:uppercase; color:var(--murekkep-2);
}
.tablo tbody td,
.tablo tbody th{
  padding:14px 16px; text-align:left;
  border-bottom:1px solid var(--kenar);
  font:400 var(--fs-govde-s)/1.6 var(--yt-govde); color:var(--murekkep-1);
}
.tablo .sayi{ text-align:right; font-family:var(--yt-mono); font-weight:400; }
/* Zebra yok — çizgi yeterli */

/* Karşılaştırma tablosu: yatay kaydırma + yapışkan ilk sütun */
.tablo-kabuk--kaydir{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tablo-kabuk--kaydir::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:24px;
  background:linear-gradient(90deg, rgba(255,255,255,0), var(--yuzey));
  pointer-events:none;
}
.tablo--karsilastir td,
.tablo--karsilastir th{ min-width:132px; padding:14px 12px; }
.tablo--karsilastir tbody th:first-child,
.tablo--karsilastir thead th:first-child{
  position:sticky; left:0; background:var(--yuzey);
  box-shadow:1px 0 0 rgba(11,28,51,.10);
}

/* Mobilde satır → kart (yatay kaydırma yok) */
.tablo--kart{ display:block; }
.tablo--kart thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.tablo--kart tbody{ display:grid; gap:12px; }
.tablo--kart tr{
  display:block; border:1px solid var(--kenar); border-radius:var(--r-3);
  background:var(--yuzey); padding:4px 0;
}
.tablo--kart td{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--kenar-2); padding:12px 14px;
}
.tablo--kart tr td:last-child{ border-bottom:0; }
.tablo--kart td::before{
  content:attr(data-baslik);
  flex:none;
  font:500 var(--fs-etiket)/var(--sy-tek) var(--yt-mono);
  letter-spacing:var(--ha-etiket); text-transform:uppercase; color:var(--murekkep-3);
}
@media (min-width:768px){
  .tablo--kart{ display:table; }
  .tablo--kart thead{ position:static; width:auto; height:auto; clip-path:none; display:table-header-group; }
  .tablo--kart tbody{ display:table-row-group; }
  .tablo--kart tr{ display:table-row; border:0; border-radius:0; padding:0; }
  .tablo--kart td{ display:table-cell; }
  .tablo--kart td::before{ content:none; }
  .tablo--yapiskan thead th{ position:sticky; top:76px; z-index:1; }
}

@media (hover:hover){
  .tablo tbody tr:hover td{ background:var(--yuzey-2); }
}


/* ===========================================================================
   21  .alt-cubuk — SABİT MOBİL ALT ÇUBUK  (03 §3.3)
   Üç eşit hedef: Ara · WhatsApp · Teklif. Yalnız <1024 px.
   ======================================================================== */
.alt-cubuk{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-ortu);
  display:flex; gap:12px;
  padding:4px 12px calc(4px + var(--gv-alt));
  min-height:var(--alt-cubuk-boy);
  background:var(--yuzey);
  border-top:1px solid rgba(11,28,51,.10);
  box-shadow:0 -1px 0 rgba(11,28,51,.04);
  transform:translateY(100%);
  transition:transform var(--sure-2) var(--egri);
}
.alt-cubuk[data-gorunur="1"]{ transform:none; }
.alt-cubuk-dugme{
  flex:1 1 0; min-width:0;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; border-radius:var(--r-3);
  font:600 15px/1 var(--yt-govde);
  border:1px solid transparent; text-align:center;
}
.alt-cubuk-dugme svg{ flex:none; width:20px; height:20px; }
.alt-cubuk-dugme span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.alt-cubuk-dugme--ara{
  background:var(--yuzey); color:var(--birincil-koyu);
  border-color:rgba(24,103,209,.30);
}
.alt-cubuk-dugme--wa{ background:var(--birincil); color:#ffffff; border-color:var(--birincil-koyu); }
.alt-cubuk-dugme--teklif{
  background:var(--yuzey-mavi); color:var(--birincil-koyu);
  border-color:rgba(24,103,209,.30);
}
.alt-cubuk-dugme:active{ transform:translateY(1px); }
@media (min-width:1024px){ .alt-cubuk{ display:none; } }
/* Klavye açıkken (bir alan odaktayken) gövdeye konan sınıf çubuğu gizler */
body.alan-odakta .alt-cubuk{ transform:translateY(100%); }


/* ===========================================================================
   22  ANA SAYFA BÖLÜMLERİ (02 §4)
   Sıra: hero · soz · ne-yapariz · is-modeli · paket · surec · entegrasyon ·
         sss-ozet · kapanis
   Ritim: hiçbir iki komşu bölümün zemini + dolgusu + iç düzeni aynı değil.
   ======================================================================== */

/* ---- 1. #hero — video + metin, dolgu 0, zemin kağıt --------------------- */
#hero{
  position:relative;
  background:var(--yuzey-4);
  padding-block:0;
  overflow:clip;
}
.hero-govde{
  position:relative; z-index:var(--z-icerik);
  display:grid; gap:24px;
  padding-top:28px; padding-bottom:32px;
  min-height:0;            /* 03 §4.3: hero TOPLAMI 668 px; medya şeridi dâhil */
  align-content:center;
}
.hero-etiket{
  display:inline-flex; align-items:center; gap:10px; width:max-content;
  min-height:32px; padding:0 12px; border-radius:var(--r-tam);
  background:var(--yuzey); border:1px solid var(--kenar-birincil);
  font:500 var(--fs-etiket)/1 var(--yt-mono);
  letter-spacing:var(--ha-etiket); text-transform:uppercase; color:var(--birincil-koyu);
}
.hero-baslik{
  font:600 var(--fs-h1)/var(--sy-h1) var(--yt-baslik);
  letter-spacing:var(--ha-h1); text-wrap:balance; max-width:18ch;
  color:var(--murekkep);
}
.hero-ozet{
  max-width:48ch;
  font:400 clamp(16px, .95rem + .3vw, 19px)/1.52 var(--yt-govde);
  color:var(--murekkep-2); text-wrap:pretty;
}
.hero-eylem{ display:grid; gap:12px; }
.hero-eylem .dugme{ width:100%; min-height:52px; }
.hero-not{ font:400 var(--fs-mikro)/1.55 var(--yt-govde); color:var(--murekkep-3); }
.hero-medya{ position:relative; border-radius:var(--r-6); overflow:hidden; background:var(--koyu); }
.hero-medya img,
.hero-medya video{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/10; }
/* Video üstündeki okunabilirlik örtüsü — blur değil, düz renk */
.hero-ortu{ position:absolute; inset:0; background:rgba(11,28,51,.55); pointer-events:none; }

@media (min-width:640px){
  .hero-eylem{ display:flex; flex-wrap:wrap; }
  .hero-eylem .dugme{ width:auto; }
}
@media (min-width:1024px){
  .hero-govde{
    grid-template-columns:minmax(0,1fr);
    padding-top:0; padding-bottom:0;
    min-height:0;
  }
  .hero-baslik{ max-width:20ch; }
}

/* ---- 2. #soz — koyu ince şerit, 3 süreç sözü, rakam yok ---------------- */
#soz{
  background:var(--koyu);
  padding-block:32px;
}
.soz-liste{ display:grid; gap:20px; }
.soz-madde{
  display:flex; align-items:flex-start; gap:12px;
  font:400 var(--fs-govde)/1.6 var(--yt-govde); color:var(--murekkep-ters-2);
}
.soz-madde b{ color:#ffffff; font-weight:600; }
.soz-ikon{ flex:none; width:20px; height:20px; color:var(--birincil-vurgu); margin-top:3px; }
@media (min-width:768px){
  #soz{ padding-block:44px; }
  .soz-liste{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
  .soz-madde + .soz-madde{ padding-left:32px; border-left:1px solid var(--kenar-koyu); }
}

/* ---- 3. #ne-yapariz — beyaz, 12 sütunda 7+5 / 5+7 ---------------------- */
#ne-yapariz{
  background:var(--yuzey);
  padding-top:44px; padding-bottom:44px;     /* 03 §7.13 orta */
}
.ny-izgara{ display:grid; gap:16px; margin-top:24px; }
.ny-blok{ min-width:0; }
@media (min-width:768px){
  #ne-yapariz{ padding-top:112px; padding-bottom:96px; }
  .ny-izgara{ margin-top:48px; }
}
@media (min-width:900px){
  .ny-izgara{
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:var(--sutun-bosluk); row-gap:64px;
  }
  /* 1. sıra: 7 + 5 · 2. sıra: 5 + 7 — yan yana eşit kart yok */
  .ny-blok:nth-child(1){ grid-column:1 / span 7; }
  .ny-blok:nth-child(2){ grid-column:8 / span 5; margin-top:40px; }
  .ny-blok:nth-child(3){ grid-column:1 / span 5; }
  .ny-blok:nth-child(4){ grid-column:6 / span 7; margin-top:40px; }
}

/* ---- 4. #is-modeli — masaüstü yatay ray, mobil dikey liste ------------- */
#is-modeli{
  background:var(--yuzey-3);
  padding-top:56px; padding-bottom:56px;     /* 03 §7.13 ağır */
}
.im-liste{ display:grid; gap:14px; margin-top:24px; }
.im-kart{
  display:grid; gap:12px; padding:20px;
  background:var(--yuzey); border:1px solid var(--kenar); border-radius:var(--r-5);
}
.im-kart-no{
  font:500 var(--fs-etiket)/1 var(--yt-mono);
  letter-spacing:var(--ha-etiket); text-transform:uppercase; color:var(--murekkep-3);
}
.im-kart-baslik{ font:600 var(--fs-h3)/var(--sy-h3) var(--yt-baslik);
                 letter-spacing:var(--ha-h3); color:var(--murekkep); }
.im-kart-metin{ font:400 var(--fs-govde-s)/1.65 var(--yt-govde); color:var(--murekkep-2); }
.im-yol{ display:contents; }
.im-ray{ display:contents; }
.im-sahne{ display:contents; }

@media (min-width:768px){
  #is-modeli{ padding-top:76px; padding-bottom:96px; }
}
@media (min-width:1024px){
  /* Kaydırma yolu: yükseklik JS'ten değil, kart sayısından gelir */
  .im-yol{
    display:block; position:relative;
    height:calc(var(--im-sahne-sayisi, 4) * 78vh);
  }
  .im-ray{
    display:block; position:sticky; top:var(--ust-boy);
    height:calc(var(--tam-boy) - var(--ust-boy));
    overflow:hidden;
  }
  .im-sahne{
    display:flex; align-items:center; gap:var(--sutun-bosluk);
    height:100%; padding-inline:max(var(--kap-oluk-g), calc((100vw - var(--kap)) / 2));
    /* JS yalnız --im-x yazar; left/margin animasyonu yok */
    transform:translate3d(calc(-1 * var(--im-x, 0px)), 0, 0);
    will-change:transform;
  }
  .im-liste{ display:contents; }
  .im-kart{
    flex:0 0 clamp(360px, 32vw, 460px);
    align-self:center; padding:32px; border-radius:var(--r-6);
    transition:opacity var(--sure-3) var(--egri), transform var(--sure-3) var(--egri);
  }
  .im-kart[data-etkin="0"]{ opacity:.45; transform:scale(.97); }
}

/* ---- 5. #paket — beyaz, 3 kart + tüm paketler bağlantısı --------------- */
#paket{
  background:var(--yuzey);
  padding-block:44px;                        /* 03 §7.13 orta */
}
@media (min-width:768px){ #paket{ padding-block:96px; } }
.paket-dip{
  margin-top:28px; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:12px;
  font:400 var(--fs-govde-s)/1.6 var(--yt-govde); color:var(--murekkep-2);
}

/* ---- 6. #surec — koyu, mobil dikey / masaüstü yatay zaman çizgisi ------ */
#surec{
  background:var(--koyu);
  padding-block:56px;                        /* 03 §7.13 ağır */
}
@media (min-width:768px){ #surec{ padding-block:112px; } }
.surec-liste{ position:relative; display:grid; gap:0; margin-top:24px; padding-left:28px; }
.surec-liste::before{
  content:""; position:absolute; left:7px; top:8px; bottom:8px; width:1px;
  background:var(--kenar-koyu);
}
.surec-adim{ position:relative; padding:14px 0; }
.surec-adim::before{
  content:""; position:absolute; left:-28px; top:20px;
  width:15px; height:15px; border-radius:50%;
  background:var(--koyu); border:2px solid var(--birincil-vurgu);
}
.surec-no{
  font:500 var(--fs-etiket)/1 var(--yt-mono);
  letter-spacing:var(--ha-etiket); text-transform:uppercase; color:var(--birincil-vurgu);
}
.surec-baslik{ margin-top:8px; font:600 var(--fs-h4)/1.35 var(--yt-baslik); color:#ffffff; }
.surec-metin{ margin-top:6px; font:400 var(--fs-govde-s)/1.65 var(--yt-govde);
              color:var(--murekkep-ters-2); max-width:52ch; }
@media (min-width:900px){
  .surec-liste{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:var(--sutun-bosluk); padding-left:0; margin-top:56px;
  }
  .surec-liste::before{ left:0; right:0; top:7px; bottom:auto; width:auto; height:1px; }
  .surec-adim{ padding:32px 0 0; }
  .surec-adim::before{ left:0; top:0; }
}

/* ---- 7. #entegrasyon — beyaz, mobilde durağan ızgara, ≥1024'te şerit --- */
#entegrasyon{
  background:var(--yuzey);
  padding-block:32px;                        /* 03 §7.13 hafif */
}
@media (min-width:768px){ #entegrasyon{ padding-block:56px; } }
.ent-izgara{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px; margin-top:20px;
}
.ent-hucre{
  display:flex; align-items:center; justify-content:center;
  min-height:44px; padding:8px;
  border:1px solid var(--kenar); border-radius:var(--r-2); background:var(--yuzey);
}
.ent-hucre img{ height:24px; width:auto; object-fit:contain; }
.ent-not{ margin-top:16px; font:400 var(--fs-mikro)/1.6 var(--yt-govde); color:var(--murekkep-3); }
@media (min-width:640px){
  .ent-izgara{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .ent-hucre{ min-height:56px; }
  .ent-hucre img{ height:28px; }
}
@media (min-width:1024px){
  .ent-izgara{
    display:flex; flex-wrap:nowrap; gap:32px; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  }
  .ent-hucre{ flex:none; border:0; min-height:64px; }
  .ent-serit{ display:flex; gap:32px; animation:ent-kay 38s linear infinite; }
}
@keyframes ent-kay{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

/* ---- 8. #sss-ozet — açık zemin, tek sütun ------------------------------ */
#sss-ozet{
  background:var(--yuzey-2);
  padding-top:44px; padding-bottom:44px;     /* 03 §7.13 orta */
}
@media (min-width:768px){ #sss-ozet{ padding-top:88px; padding-bottom:64px; } }
#sss-ozet .sss-liste{ margin-inline:auto; margin-top:24px; }
.sss-dip{ margin-top:24px; text-align:center; }

/* ---- 9. #kapanis — koyu, mobilde form üstte ---------------------------- */
#kapanis{
  background:var(--koyu);
  padding-block:56px;                        /* 03 §7.13 ağır */
}
@media (min-width:768px){ #kapanis{ padding-block:120px; } }
.kapanis-izgara{ display:grid; gap:32px; }
.kapanis-form{ order:-1; }
.kapanis-kutu{
  padding:20px; border-radius:var(--r-6);
  background:var(--koyu-kart); border:1px solid var(--kenar-koyu);
}
@media (min-width:768px){ .kapanis-kutu{ padding:28px; } }
.kapanis-baslik{ font:600 var(--fs-h2-s)/var(--sy-h2) var(--yt-baslik);
                 letter-spacing:var(--ha-h2); color:#ffffff; max-width:20ch; }
.kapanis-metin{ margin-top:16px; max-width:46ch;
                font:400 var(--fs-govde)/var(--sy-govde) var(--yt-govde);
                color:var(--murekkep-ters-2); }
.kapanis-iletisim{ margin-top:24px; display:grid; gap:10px; }
@media (min-width:900px){
  .kapanis-izgara{ grid-template-columns:5fr 7fr; gap:64px; align-items:start; }
  .kapanis-form{ order:0; }
}


/* ===========================================================================
   23  İÇ SAYFA RİTMİ  (04 §6)
   ======================================================================== */
.ekmek{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  min-height:40px; background:var(--yuzey);
  font:400 var(--fs-mikro)/1.4 var(--yt-govde); color:var(--murekkep-3);
}
.ekmek a{ color:var(--murekkep-2); }
.ekmek li{ display:flex; align-items:center; gap:8px; }
.ekmek li + li::before{ content:"/"; color:var(--murekkep-3); }

.bant{
  position:relative; overflow:hidden;
  background:var(--koyu);
  padding-block:var(--bolum-l);
}
/* Tek radyal ışık — ölçülen #1d3657 pikselinden; mor-mavi gradyan değil */
.bant::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 120% at 88% 10%, rgba(24,103,209,.26), transparent 62%);
}
.bant > *{ position:relative; }
.bant-baslik{
  font:600 var(--fs-h1-ic)/var(--sy-h1) var(--yt-baslik);
  letter-spacing:var(--ha-h1); color:#ffffff; max-width:22ch; text-wrap:balance;
}
.bant-ozet{
  margin-top:16px; max-width:56ch;
  font:400 var(--fs-govde)/var(--sy-govde) var(--yt-govde); color:var(--murekkep-ters-2);
}
.bant-eylem{ margin-top:24px; display:flex; flex-wrap:wrap; gap:12px; }

.ic-govde{ padding-block:var(--bolum-l); }
.ic-govde--beyaz{ background:var(--yuzey); padding-block:var(--bolum-m); }


/* ===========================================================================
   24  YARDIMCI SINIFLAR VE BELİRME
   ======================================================================== */
.gizli{ display:none !important; }
.gorsel-gizli{
  position:absolute !important; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}
.sadece-mobil{ display:block; }
.sadece-masaustu{ display:none; }
@media (min-width:1024px){
  .sadece-mobil{ display:none; }
  .sadece-masaustu{ display:block; }
}

/* --- Tek başına duran metin bağlantıları (03 §6) ---------------------------
   WCAG 2.5.8: bir CÜMLE İÇİNDEKİ bağlantı hedef boyu kuralından muaftır ve
   büyütülmez (paragraf satır ritmi bozulur). Buradaki seçiciler yalnızca
   kendi başına duran bağlantıları kapsar: kırıntı yolu, kart/bölüm altı
   "…gör" bağlantıları, tablo hücresindeki paket bağlantısı, alt bilgi
   markası. Hepsi 44 px'e çıkar. */
.ekmek a,
.ekmek li > span[aria-current],
.paket-dip > a,
.sss-dip > a,
.alt-marka > a,
.tablo--kart td > a,
.tablo--kart th > a,
.bolum-dip > a{
  display:inline-flex; align-items:center;
  min-height:44px;
}
/* Kırıntı yolunda satırlar arası 8 px boşluk kalsın (komşu hedef kuralı) */
.ekmek{ row-gap:4px; }

/* Görsel hedefi 44 px'ten küçükse alan sözde öğeyle büyütülür (03 §6) */
.kucuk-hedef{ position:relative; }
.kucuk-hedef::after{
  content:""; position:absolute; inset:50% auto auto 50%;
  width:max(44px,100%); height:max(44px,100%);
  transform:translate(-50%,-50%);
}

/* Bölüm başına en fazla bir belirme (04 §8.1) */
.belir{
  opacity:0; transform:translateY(12px);
  transition:opacity var(--sure-3) var(--egri-giris),
             transform var(--sure-3) var(--egri-giris);
}
.belir[data-gorundu="1"],
.belir--ac{ opacity:1; transform:none; }

/* İçeriğe geç — odakta gerçekten görünür (04 §7.3 / 03 §9)
   Negatif `left` ile gizleme YASAK: bazı tarayıcılarda yatay kaydırma alanı
   üretiyor ve taşma denetimine (M2) takılıyor. Kırpma tekniği kullanılır. */
.icerige-gec{
  position:absolute; left:0; top:0;
  width:1px; height:1px; margin:0; padding:0; border:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.icerige-gec:focus,
.icerige-gec:focus-visible{
  position:fixed; left:12px; top:12px;
  width:auto; height:auto; min-height:48px; padding:0 20px;
  overflow:visible; clip-path:none;
  display:inline-flex; align-items:center;
  background:var(--birincil); color:#ffffff; border-radius:var(--r-3);
  font:600 var(--fs-govde)/1.2 var(--yt-govde);
  box-shadow:var(--g-3);
  z-index:var(--z-bildirim);
}

/* Boşluk yardımcıları — ölçü merdiveninden */
.ust-bosluk-2{ margin-top:var(--bo-2); }
.ust-bosluk-4{ margin-top:var(--bo-4); }
.ust-bosluk-6{ margin-top:var(--bo-6); }
.ust-bosluk-8{ margin-top:var(--bo-8); }
.ust-bosluk-12{ margin-top:var(--bo-12); }
.orta-blok{ margin-inline:auto; }
.tam-genis{ width:100%; }


/* ===========================================================================
   25  ODAK GÖRÜNÜMÜ VE ERİŞİLEBİLİRLİK  (04 §7.2)
   Çift katmanlı halka: her zeminde en az bir katman kontrastlı kalır.
   ======================================================================== */
:where(a,button,summary,[role="tab"],[role="button"],[tabindex]:not([tabindex="-1"])):focus-visible,
:where(input,select,textarea):focus-visible{
  outline:3px solid var(--odak);
  outline-offset:2px;
  box-shadow:0 0 0 2px var(--odak-zit);
  border-radius:inherit;
}
:focus:not(:focus-visible){ outline:none; box-shadow:none; }
/* Odak hiçbir yerde outline:none ile kapatılmaz. */


/* ===========================================================================
   26  AZALTILMIŞ HAREKET / YÜKSEK KONTRAST  (04 §7.3, §8.3)
   ======================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
  html{ scroll-behavior:auto; }
  .belir,
  .belir--ac{ opacity:1; transform:none; }
  .ent-serit{ animation:none; }
  .ent-izgara{
    display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); overflow:visible;
    -webkit-mask-image:none; mask-image:none;
  }
  .im-kart[data-etkin="0"]{ opacity:1; transform:none; }
}

@media (prefers-contrast:more){
  :root{
    --kenar: var(--kenar-guclu);
    --kenar-2: var(--kenar-guclu);
    --murekkep-3: var(--murekkep-2);
  }
  :where(a,button,summary,[role="tab"],[tabindex]:not([tabindex="-1"])):focus-visible,
  :where(input,select,textarea):focus-visible{ outline-width:4px; }
  .kart,.paket,.sss{ border-width:1px; border-color:var(--kenar-guclu); }
}

/* Windows yüksek kontrast kipinde kenarlar görünür kalsın */
@media (forced-colors:active){
  .dugme{ border:1px solid ButtonText; }
  .kart,.paket,.sss,.tablo-kabuk{ border:1px solid CanvasText; }
  .sss-ikon::before,.sss-ikon::after{ background:CanvasText; }
}


/* ===========================================================================
   27  YAZDIRMA (PRINT)
   Kağıda giden: metin, fiyat, iletişim. Gitmeyen: gezinme, çubuk, video.
   ======================================================================== */
@media print{
  :root{
    --bolum-xs:8px; --bolum-s:10px; --bolum-m:12px;
    --bolum-l:14px; --bolum-xl:16px; --bolum-xxl:18px;
  }
  html,body{
    background:#ffffff !important; color:#000000 !important;
    font-size:11pt; line-height:1.45;
  }
  .ust, .menu-ortu, .alt-cubuk, .hero-medya, .hero-ortu,
  .serit-durum, .sekme-liste, .icerige-gec, video, .ent-izgara{
    display:none !important;
  }
  .koyu-bolge, .bolum--koyu, .bolum--koyu-derin, .alt, #soz, #surec, #kapanis, .bant{
    background:#ffffff !important; color:#000000 !important; border-top:1px solid #999;
  }
  .koyu-bolge *, .bolum--koyu *, .alt *, #soz *, #surec *, #kapanis *, .bant *{
    color:#000000 !important;
  }
  .bant::before{ display:none !important; }
  .kap,.kap--genis,.kap--orta,.kap--dar,.kap--metin{ max-width:none; padding-inline:0; }
  .bolum, .bolum--xs, .bolum--s, .bolum--m, .bolum--l, .bolum--xl, .bolum--xxl{
    padding-block:12px;
  }
  .kart,.paket,.sss,.tablo-kabuk{
    box-shadow:none !important; border:1px solid #999 !important;
    break-inside:avoid; page-break-inside:avoid;
  }
  .paket::before,.kart::before{ display:none; }
  .sss .sss-govde{ grid-template-rows:1fr; }
  .sss-ikon{ display:none; }
  h1,h2,h3{ break-after:avoid; page-break-after:avoid; color:#000000 !important; }
  .dugme{
    border:1px solid #666 !important; background:none !important;
    color:#000000 !important; box-shadow:none !important;
  }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#444; }
  a[href^="#"]::after,a[href^="tel:"]::after,a[href^="mailto:"]::after{ content:""; }
  .im-yol{ height:auto !important; }
  .im-ray{ position:static !important; height:auto !important; overflow:visible !important; }
  .im-sahne{ display:block !important; transform:none !important; padding:0 !important; }
  .im-kart{ opacity:1 !important; transform:none !important; }
}