/* ==========================================================================
   TICISOFT — TASARIM SİSTEMİ (final)
   "Katalog": kırık beyaz kağıt zemin, üstünde saç çizgili beyaz levha kartlar
   ve karar anlarında siyah kartlar. Tek kromatik aksan hologram folyodur.

   Bu dosya sitenin ÇEKİRDEĞİDİR: her sayfa yükler (public/assets/site.css).
   Sayfa illüstrasyonları ayrı dosyalardadır: anasayfa.css (genel anasayfa ve
   Web Sitesi Kurulumu sayfası), eticaret.css (yalnız E-Ticaret sayfası).

   İçindekiler
    0. Yazı tipleri (yerel; latin + Türkçe ek, unicode-range)
    1. Tasarım tokenları (+ siyah bağlam)
    2. Sıfırlama ve temel
    3. Tipografi
    4. Yerleşim, yardımcılar, JS-yok yedeği
    5. Düğmeler
    6. Rozetler, çipler, ikonlar, ikon karosu
    7. Kart sistemi, levha, şekil
    8. Üst menü (7 bağlantı; ≥1180 px masaüstü, altında hamburger)
    9. Mega menüler (Hizmetler, Programlar)
   10. Mobil menü (Hizmetler ve Programlar akordeonu)
   11. Yapışkan alt menü (ürün sayfaları)
   12. Bölüm başlığı (numaralı şerit)
   13. Kahraman kartları: sahne (+ holo folyo), sayfa, ürün + künye + sayfa yolu
   14. Ekran karosu ve ürün banner'ı
   15. Entegrasyon dizini
   16. Bento
   17. Adımlar (nasıl çalışır / nasıl satın alınır)
   18. Program kartları (fiyat satırı, yakındaki programlar, vaat listesi)
   18b. Hizmet blokları: hizmet banner'ı, program vitrini,
        hizmet tablosu, süreç şeridi, gerekçeler, seçim karşılaştırması,
        çapraz bağlantı şeridi
   19. Fiyat: kart, dönem seçici, satın alma akışı, hizmet, dürüstlük
   20. SSS akordeonu ve akordeon grupları
   21. Kapanış kartı
   22. Alt bilgi
   23. Tablo (karşılaştırma + genel)
   24. İç sayfa blokları: galeri, özellik tablosu, sınırlar, not şeridi
   25. Uzun metin (.metin-akisi: blog, kılavuz, yasal)
   26. Formlar
   27. Uyarı kutuları
   28. Hareket ve azaltılmış hareket
   --- İç sayfalar katmanı (dosyanın sonunda) ---
   29. Ek tokenlar ve çizgi ikon maskeleri
   30. Sayfa başlık kartı ve sayfa yolu
   31. Sekmeler, haplar, sayfalama
   32. Rozet çeşitleri, sayı rozeti, avatar, bilgi ipucu
   33. Flash bildirimi, uyarı kutusu ekleri
   34. Kart yardımcıları (kart başlığı, bilgi listesi, boş durum, iskelet)
   35. Tablo ekleri (veri, gömülü, yığılan, özellik)
   36. Uzun metin ekleri (blog tablosu, ön söz, yasal)
   37. Blog (liste, öne çıkan, yazı düzeni, içindekiler, CTA)
   38. Yan menü ve yasal düzen
   39. Form ekleri (girdi grubu, arama, seçim kartı, yükleniyor)
   40. Giriş / kayıt ve iletişim düzeni
   41. Satın alma sihirbazı ve ödeme kabı
   42. Müşteri paneli
   43. Bilgi Bankası (kv-*)
   44. Hata sayfaları ve tek mesajlı sayfa
   45. İç sayfa hareketleri
   ========================================================================== */


/* ---------- 0. Yazı tipleri ----------------------------------------------
   Başlık: Plus Jakarta Sans (değişken, 300–800)   Gövde: Inter (değişken, 400–700)
   *-latin.woff2 : Latin + Latin-1 + ı (kaynak/font-alt-kume.py ile alt kümelendi)
   *-tr.woff2    : yalnız Ğ ğ İ Ş ş ve ₺ (2,5 KB). Ç Ö Ü zaten Latin-1'de.
   Üretimde dosyalar /assets/fonts/ altına taşınır (SPEC §12).              */
@font-face {
  font-family: 'Ticisoft Jakarta';
  src: url('/assets/fonts/jakarta-latin.woff2') format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Ticisoft Jakarta';
  src: url('/assets/fonts/jakarta-tr.woff2') format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+011E-011F, U+0130, U+015E-015F, U+20BA;
}
@font-face {
  font-family: 'Ticisoft Inter';
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Ticisoft Inter';
  src: url('/assets/fonts/inter-tr.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+011E-011F, U+0130, U+015E-015F, U+20BA;
}


/* ---------- 1. Tasarım tokenları ---------------------------------------- */
:root {
  color-scheme: light;

  /* Zemin ve yüzey */
  --kagit: #faf9f6;          /* sayfa zemini (kırık beyaz kağıt) */
  --kart: #ffffff;           /* levha kart yüzeyi */
  --ic-zemin: #f5f4f0;       /* kart içi gömme alan */
  --murekkep: #0a0a0c;       /* siyah: başlık, siyah kart, ana düğme */
  --murekkep-2: #26262c;     /* ana düğme üzeri (hover) */

  /* Metin (kontrast değerleri beyaz karta göre) */
  --metin: #0a0a0c;          /* 19,6:1 */
  --metin-2: #45454d;        /* 9,5:1  ikincil metin, giriş paragrafı */
  --metin-3: #66666e;        /* 5,7:1  altyazı, dipnot (kağıtta 5,4:1, gömmede 5,2:1) */

  /* Çizgi */
  --cizgi: #e7e5e0;          /* saç çizgisi, kart kenarı */
  --cizgi-2: #d3d1cb;        /* belirgin çizgi: ikincil düğme, rozet */
  --cizgi-form: #8f8d87;     /* form alanı kenarı: 3,3:1 (WCAG 1.4.11) */
  --odak: #0a0a0c;           /* odak halkası */

  /* İşlevsel renkler: yalnız durum bildirir, süs olarak kullanılmaz */
  --basari: #157a3c;  --basari-zemin: #eef8f1;  --basari-cizgi: #cbe8d5;   /* 5,0:1 zeminde */
  --hata:   #b42318;  --hata-zemin:   #fdf1f0;  --hata-cizgi:   #f4cdc8;   /* 6,1:1 */
  --uyari:  #9a4a06;  --uyari-zemin:  #fdf5ea;  --uyari-cizgi:  #f1d9b8;   /* 6,0:1 */
  /* Bağlamdan bağımsız sabitler (siyah kart içindeki BEYAZ hap gibi karışık yüzeyler için) */
  --basari-acikta: #157a3c;
  --basari-koyuda: #5ee08f;  --hata-koyuda: #ff8b7e;  --uyari-koyuda: #f7b267;

  /* Hologram folyo: tek kromatik aksan. Renkler ayrı tutulur ki konik merkez
     yüzeyin DIŞINA taşınabilsin (merkez görünürse keskin ışın noktası oluşur). */
  --holo-renkler: #ffd9ea, #cfe6ff, #d4ffe6, #fff6c2, #ffd7f0, #c9dcff, #c6fff0, #fff0cc, #ffd9ea;
  --holo: conic-gradient(from 208deg at 50% 50%, var(--holo-renkler));

  /* Yazı aileleri */
  --yazi-baslik: 'Ticisoft Jakarta', 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --yazi-govde: 'Ticisoft Inter', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Yazı ölçeği (akışkan) */
  --t-dev: clamp(2.5rem, 1.35rem + 5.1vw, 5.5rem);        /* 40 → 88 px  kahraman */
  --t-1: clamp(2.25rem, 1.3rem + 4vw, 4.5rem);             /* 36 → 72 px  iç sayfa kahramanı, banner */
  --t-2: clamp(2rem, 1.3rem + 3vw, 3.75rem);               /* 32 → 60 px  bölüm başlığı */
  --t-3: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);          /* 24 → 34 px  büyük kart başlığı */
  --t-4: clamp(1.1875rem, 1.1rem + .3vw, 1.375rem);        /* 19 → 22 px  kart başlığı */
  --t-giris: clamp(1.0625rem, 1rem + .3vw, 1.25rem);       /* 17 → 20 px  giriş paragrafı */
  --t-govde: 1rem;                                         /* 16 px */
  --t-kucuk: .875rem;                                      /* 14 px */
  --t-altyazi: .8125rem;                                   /* 13 px */

  /* Harf ve kelime aralığı: Plus Jakarta'nın boşluk glifi dardır; negatif harf
     aralığı kelimeleri yapıştırır. Başlık ailesini kullanan HER seçici,
     kendi harf aralığının karşılığı olan --ws-* değerini alır. */
  --hs-dev: -.045em;  --ws-dev: .1em;
  --hs-2: -.04em;     --ws-2: .09em;
  --hs-3: -.03em;     --ws-3: .07em;
  --hs-4: -.02em;     --ws-4: .05em;

  /* Boşluk ölçeği (4 px tabanlı) */
  --b-1: 4px; --b-2: 8px; --b-3: 12px; --b-4: 16px; --b-5: 24px;
  --b-6: 32px; --b-7: 48px; --b-8: 64px; --b-9: 96px; --b-10: 128px;
  --bolum-bosluk: clamp(72px, 5vw + 52px, 152px);      /* bölümler arası hava */
  --kart-ic: clamp(22px, 1.2vw + 16px, 44px);          /* kart iç boşluğu */
  --sahne-ic: clamp(24px, 3.4vw, 64px);                /* kahraman kartı iç boşluğu */
  --oluk: 12px;                                        /* kartlar arası */
  --kenar: 16px;                                       /* sayfa kenar boşluğu */
  --kap-gen: 1320px;
  --menu-yuk: 68px;
  --alt-menu-yuk: 56px;

  /* Yarıçap: büyük yüzey büyük yarıçap */
  --r-sahne: 32px;   /* kahraman, banner, kapanış */
  --r-kart: 24px;    /* bento, program, fiyat, mega menü */
  --r-levha: 14px;   /* ekran levhası, gömme alan */
  --r-kucuk: 10px;   /* küçük düğüm, form alanı */
  --r-hap: 999px;    /* düğme, rozet, çip */

  /* Gölge: kartlarda YOK (saç çizgisi var). Yalnız yüzen katmanlarda. */
  --golge-1: 0 1px 2px rgba(10,10,12,.06);                                          /* küçük düğüm */
  --golge-levha: 0 1px 1px rgba(10,10,12,.04), 0 18px 40px -18px rgba(10,10,12,.28); /* ekran, bildirim */
  --golge-cihaz: 0 2px 4px rgba(10,10,12,.06), 0 40px 70px -30px rgba(10,10,12,.42); /* telefon, tarayıcı */
  --golge-panel: 0 1px 0 rgba(10,10,12,.04), 0 30px 70px -24px rgba(10,10,12,.28);   /* mega menü */

  /* Hareket */
  --gecis: cubic-bezier(.2,.7,.2,1);
  --sure-kisa: .2s;
  --sure-orta: .35s;
}
@media (min-width: 768px)  { :root { --kenar: 28px; --oluk: 16px; } }
@media (min-width: 1200px) { :root { --kenar: 40px; --oluk: 20px; } }

/* Siyah bağlam: siyah kartın içinde tokenlar ters döner; içindeki bileşenler
   (metin, çizgi, rozet, düğme, odak halkası) ek sınıf yazmadan uyum sağlar. */
.kart-siyah, .zemin-siyah {
  --metin: #f5f5f2;          /* 18,7:1 */
  --metin-2: #bcbcc2;        /* 10,4:1 */
  --metin-3: #92929a;        /*  6,3:1 */
  --cizgi: rgba(255,255,255,.12);
  --cizgi-2: rgba(255,255,255,.26);
  --kart: #141417;
  --ic-zemin: #17171b;
  --odak: #ffffff;
  --basari: var(--basari-koyuda); --basari-zemin: rgba(94,224,143,.1); --basari-cizgi: rgba(94,224,143,.32);
  --hata: var(--hata-koyuda);     --uyari: var(--uyari-koyuda);
  background: var(--murekkep);
  color: var(--metin);
}


/* ---------- 2. Sıfırlama ve temel ---------------------------------------
   Sıfırlama :where() ile SIFIR özgüllüktedir: hiçbir bileşen kuralını ezmez.
   Listeler bileşen içinde çıplaktır; .metin-akisi (blog, kılavuz, yasal)
   madde işaretini, girintiyi ve dikey ritmi geri getirir (bkz. §25).       */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--menu-yuk) + 16px); }
html:has(.alt-menu) { scroll-padding-top: calc(var(--alt-menu-yuk) + 20px); }
:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, address, pre) { margin: 0; }
:where(ul, ol) { margin: 0; padding: 0; list-style: none; }
body {
  min-height: 100vh;
  background: var(--kagit);
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: var(--t-govde);
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;                 /* güvenlik ağı; taşma testleri 0 px ölçer */
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }
::selection { background: var(--murekkep); color: #fff; }
.ikon-kumesi { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Odak halkası: her zaman görünür; siyah kartta beyaza döner (--odak) */
:focus-visible { outline: 2px solid var(--odak); outline-offset: 3px; border-radius: 6px; }
.buton:focus-visible, .rozet:focus-visible, .cip:focus-visible { border-radius: var(--r-hap); }


/* ---------- 3. Tipografi ------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--yazi-baslik); font-weight: 600; color: var(--metin);
  letter-spacing: var(--hs-4); word-spacing: var(--ws-4); line-height: 1.2; text-wrap: balance;
}
.baslik-dev { font-size: var(--t-dev); line-height: .98; letter-spacing: var(--hs-dev); word-spacing: var(--ws-dev); }
.baslik-1   { font-size: var(--t-1);   line-height: 1;    letter-spacing: var(--hs-dev); word-spacing: var(--ws-dev); }
.baslik-2   { font-size: var(--t-2);   line-height: 1.03; letter-spacing: var(--hs-2);   word-spacing: var(--ws-2); }
.baslik-3   { font-size: var(--t-3);   line-height: 1.1;  letter-spacing: var(--hs-3);   word-spacing: var(--ws-3); }
.baslik-4   { font-size: var(--t-4);   line-height: 1.25; letter-spacing: var(--hs-4);   word-spacing: var(--ws-4); font-weight: 650; }
.giris { font-size: var(--t-giris); line-height: 1.55; color: var(--metin-2); max-width: 58ch; text-wrap: pretty; }
p { text-wrap: pretty; }
.metin-2 { color: var(--metin-2); }
.metin-3 { color: var(--metin-3); }
.kucuk { font-size: var(--t-kucuk); line-height: 1.55; }
.rakam {                            /* büyük fiyat ve sayılar */
  font-family: var(--yazi-baslik); font-weight: 600; font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.05em; word-spacing: var(--ws-dev);
}
.ust-not {                          /* başlık üstü ürün adı / üst başlık */
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: var(--t-kucuk); font-weight: 500; color: var(--metin-2);
}
.metin-baglanti {                   /* tek başına duran metin bağlantısı (44 px dokunma hedefi) */
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-weight: 600; text-decoration: underline; text-decoration-color: var(--cizgi-2);
  text-underline-offset: .3em; transition: text-decoration-color var(--sure-kisa);
}
.metin-baglanti:hover { text-decoration-color: currentColor; }
.metin-baglanti .ikon { width: 15px; height: 15px; stroke-width: 2; transition: transform var(--sure-orta) var(--gecis); }
.metin-baglanti:hover .ikon { transform: translateX(3px); }
.metin-baglanti:hover .ikon[class*="dis"] { transform: translate(2px, -2px); }


/* ---------- 4. Yerleşim, yardımcılar, JS-yok yedeği --------------------- */
.kap { width: min(100% - 2 * var(--kenar), var(--kap-gen)); margin-inline: auto; }
.izgara { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--oluk); }
.bolum { padding-top: var(--bolum-bosluk); }
.bolum-yakin { padding-top: clamp(48px, 3vw + 32px, 88px); }
/* Sayfanın son bölümü alt bilgiyle arasına bölüm boşluğu alır. İç sayfalarda (blog, yazı, iletişim,
   yasal, satın alma) başlık kartı ile içerik aynı .sahne kabında durur; o da son bölüm sayılır. */
main > :is(.bolum, .bolum-yakin, .sahne):last-child { padding-bottom: var(--bolum-bosluk); }
.yigin > * + * { margin-top: var(--yigin, 16px); }
.orta { text-align: center; margin-inline: auto; }
.kirilmaz { white-space: nowrap; }      /* "e-ticaret", "e-fatura": tire sonrasında satır kırılmaz */

.gorunmez {                         /* yalnız ekran okuyucu */
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.atla {                             /* "İçeriğe geç" */
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--murekkep); color: #fff; padding: 12px 18px; border-radius: var(--r-hap);
  font-weight: 600; text-decoration: none;
}
.atla:focus { top: 12px; }

/* JS-yok yedeği: <html class="js"> başta satır içi betikle eklenir.
   .js-var yalnız JS varken, .js-yok yalnız JS yokken görünür. */
html:not(.js) .js-var { display: none !important; }
.js .js-yok { display: none !important; }


/* ---------- 5. Düğmeler --------------------------------------------------
   .buton-ana    birincil: beyaz yüzeyde mürekkep, siyah kartta beyaz
   .buton-cizgi  ikincil: saç çizgisi kenar
   .buton-holo   yalnız SİYAH KARTTA, kart başına en fazla bir tane
   Boyut: 50 px (.buton-kucuk 44 px). Etiket Inter 600; kelime aralığı normal. */
.dugmeler { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.dugmeler.orta { justify-content: center; }
.buton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border-radius: var(--r-hap);
  border: 1px solid transparent; text-decoration: none; white-space: nowrap;
  font: 600 15.5px/1.1 var(--yazi-govde); letter-spacing: -.005em;
  transition: transform var(--sure-kisa) var(--gecis), background-color var(--sure-kisa), border-color var(--sure-kisa), color var(--sure-kisa), background-position .8s var(--gecis);
}
.buton .ikon { width: 17px; height: 17px; stroke-width: 2; transition: transform var(--sure-orta) var(--gecis); }
.buton:hover .ikon-ileri { transform: translateX(3px); }
.buton:active { transform: translateY(1px) scale(.99); }

.buton-ana { background: var(--murekkep); color: #fff; }
.buton-ana:hover { background: var(--murekkep-2); }
.kart-siyah .buton-ana, .zemin-siyah .buton-ana { background: #fff; color: var(--murekkep); }
.kart-siyah .buton-ana:hover, .zemin-siyah .buton-ana:hover { background: #e8e7e3; }

.buton-cizgi { background: transparent; color: var(--metin); border-color: var(--cizgi-2); }
.buton-cizgi:hover { border-color: var(--metin); }

/* Holo: konik merkez düğmenin ÇOK ALTINDA; görünen kısım yumuşak renk kaymasıdır */
.buton-holo {
  color: var(--murekkep);
  background: conic-gradient(from 208deg at 50% 320%, var(--holo-renkler));
  background-size: 180% 100%; background-position: 15% 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 30px -12px rgba(255,217,234,.45);
}
.buton-holo:hover { background-position: 85% 0; }

.buton-kucuk { min-height: 44px; padding: 0 18px; font-size: 14.5px; }
.buton-genis { width: 100%; }


/* ---------- 6. Rozetler, çipler, ikonlar -------------------------------- */
.ikon { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ikon-kucuk { width: 16px; height: 16px; stroke-width: 2; }

/* Durum rozeti: durum hem renkle hem metinle söylenir */
.rozet {
  display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 11px;
  border-radius: var(--r-hap); border: 1px solid var(--cizgi-2); background: var(--kart);
  font: 600 12.5px/1 var(--yazi-govde); letter-spacing: 0; color: var(--metin-2); white-space: nowrap;
}
.rozet::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.rozet-satista { color: var(--basari); background: var(--basari-zemin); border-color: var(--basari-cizgi); }
.rozet-yakinda { color: var(--metin); }
.rozet-yakinda::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.rozet-duz::before { display: none; }

/* Çip: statik bilgi (36 px) ya da bağlantı (.cip-baglanti, 44 px dokunma hedefi) */
.cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.cipler.orta { justify-content: center; }
.cip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px;
  border-radius: var(--r-hap); border: 1px solid var(--cizgi); background: var(--ic-zemin);
  font-size: 14px; font-weight: 500; color: var(--metin); white-space: nowrap;
}
.cip .ikon { width: 16px; height: 16px; stroke-width: 2; color: var(--metin-2); }
a.cip, .cip-baglanti { min-height: 44px; padding: 0 8px 0 16px; background: var(--kart); border-color: var(--cizgi-2); text-decoration: none; transition: border-color var(--sure-kisa); }
a.cip:hover { border-color: var(--metin); }
a.cip .rozet { min-height: 28px; }

/* İkon karosu: 40–48 px mürekkep kare, beyaz ikon (holo DEĞİL: küçük yüzey) */
.ikon-karo {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--murekkep); color: #fff;
}
.ikon-karo .ikon { width: 21px; height: 21px; }
.kart-siyah .ikon-karo { background: #fff; color: var(--murekkep); }


/* ---------- 7. Kart sistemi, levha, şekil --------------------------------
   .kart         beyaz levha, saç çizgisi kenar, gölgesiz (varsayılan kap)
   .kart-sahne   kahraman / banner / kapanış: en büyük yarıçap
   .kart-siyah   mürekkep kart; tokenlar ters döner (bkz. §1)
   .kart-isik    siyah kartın kenarında holo ışığı (konik merkez kartın DIŞINDA)
   .levha        ekran görüntüsü çerçevesi; .pencere-ust pencere şeridi
   .sekil        figür + "Şekil N." altyazısı                                */
.kart {
  position: relative; min-width: 0; overflow: hidden;
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r-kart);
  padding: var(--kart-ic);
}
.kart-sahne { border-radius: var(--r-sahne); padding: var(--sahne-ic); }
.kart-siyah { border-color: var(--murekkep); }
.kart-siyah .buton-cizgi:hover { border-color: #fff; }

/* Hologram kenar ışığı: kaynak kartın sağ alt (ya da .kart-isik-ust ile sağ üst)
   köşesinin DIŞINDA; maske ışığı kısa mesafede söndürür, kartın büyük kısmı saf
   siyah kalır (geniş pastel + siyah = gri sis; bundan kaçınılır). Statik, blur yok. */
.kart-isik { isolation: isolate; }
.kart-isik::before {
  content: ''; position: absolute; z-index: -1; right: 0; bottom: 0; pointer-events: none;
  width: min(70%, 640px); height: min(90%, 520px);
  background: conic-gradient(from 208deg at 112% 116%, var(--holo-renkler));
  opacity: .95;
  -webkit-mask-image: radial-gradient(farthest-corner at 100% 100%, #000 0%, rgba(0,0,0,.55) 11%, rgba(0,0,0,.16) 22%, transparent 36%);
          mask-image: radial-gradient(farthest-corner at 100% 100%, #000 0%, rgba(0,0,0,.55) 11%, rgba(0,0,0,.16) 22%, transparent 36%);
}
.kart-isik-ust::before {
  top: 0; bottom: auto;
  background: conic-gradient(from 208deg at 112% -16%, var(--holo-renkler));
  -webkit-mask-image: radial-gradient(farthest-corner at 100% 0%, #000 0%, rgba(0,0,0,.55) 11%, rgba(0,0,0,.16) 22%, transparent 36%);
          mask-image: radial-gradient(farthest-corner at 100% 0%, #000 0%, rgba(0,0,0,.55) 11%, rgba(0,0,0,.16) 22%, transparent 36%);
}

.kart-bas { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.kart-bas .ikon { width: 22px; height: 22px; }
.kart h3 + p, .kart .kart-bas + p { margin-top: 8px; }
.kart p + p { margin-top: 10px; }
.kart-dip {                         /* kartın en altındaki dipnot */
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--cizgi);
  font-size: var(--t-altyazi); line-height: 1.5; color: var(--metin-3);
}
.gomme-ic { background: var(--ic-zemin); border: 1px solid var(--cizgi); border-radius: var(--r-levha); }

.levha { position: relative; overflow: hidden; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r-levha); }
.levha img { width: 100%; }
.levha-koyu { border-color: rgba(255,255,255,.14); background: #141417; }
.pencere-ust {
  display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px;
  border-bottom: 1px solid var(--cizgi); background: var(--kart);
}
.pencere-ust i { width: 8px; height: 8px; border-radius: 50%; background: var(--cizgi-2); }
.pencere-ust span { margin-left: 8px; font-size: 11.5px; color: var(--metin-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.levha-koyu .pencere-ust { background: #1b1b20; border-bottom-color: rgba(255,255,255,.1); }
.levha-koyu .pencere-ust i { background: rgba(255,255,255,.22); }
.levha-koyu .pencere-ust span { color: #9a9aa2; }

/* Şekil altyazısı: HER görsel temsilî mi gerçek mi olduğunu yazar */
.sekil figcaption, .altyazi {
  margin-top: 12px; font-size: var(--t-altyazi); line-height: 1.5; color: var(--metin-3); max-width: 72ch;
}
.sekil figcaption b, .altyazi b { color: var(--metin); font-weight: 600; margin-right: 4px; }


/* ---------- 8. Üst menü -------------------------------------------------- */
.ust-menu {
  position: sticky; top: 0; z-index: 50;
  background: var(--kagit); border-bottom: 1px solid transparent;
  transition: border-color var(--sure-orta);
}
.ust-menu.dolu, .ust-menu.acik { border-bottom-color: var(--cizgi); }
.ust-menu-akan { position: relative; }            /* ürün sayfasında yerini alt menü alır */
.ust-ic { position: relative; display: flex; align-items: center; gap: 20px; height: var(--menu-yuk); }
.logo { display: inline-flex; align-items: center; flex: none; min-height: 44px; border-radius: 8px; }
.logo img { width: 112px; height: auto; margin-left: -4px; }  /* logo dosyasında iç boşluk var */

.ana-nav { display: none; }
.menu-linkler { display: flex; align-items: center; gap: 2px; }
.menu-linkler > li > a, .menu-linkler > li > button {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px;
  border-radius: var(--r-hap); font-size: 15px; font-weight: 500; color: var(--metin-2);
  text-decoration: none; white-space: nowrap; transition: color var(--sure-kisa), background-color var(--sure-kisa);
}
.menu-linkler > li > a:hover, .menu-linkler > li > button:hover { color: var(--metin); background: rgba(10,10,12,.045); }
.menu-linkler [aria-current] { color: var(--metin); }
.menu-linkler [aria-current]::after {   /* geçerli sayfa ("page") ya da bölüm ("true"): metnin altında nokta */
  content: ''; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor;
}
.menu-linkler button[aria-current]::after { margin-left: -11px; }   /* ok ikonunu hesaba kat: nokta metnin ortasında */
.menu-linkler button[aria-expanded="true"] { color: var(--metin); background: rgba(10,10,12,.06); }
.ok-ikon { width: 14px; height: 14px; stroke-width: 2; transition: transform var(--sure-orta) var(--gecis); }
[aria-expanded="true"] > .ok-ikon { transform: rotate(180deg); }

.menu-sag { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.menu-giris {
  display: none; align-items: center; height: 44px; padding: 0 12px; border-radius: var(--r-hap);
  font-size: 15px; font-weight: 500; color: var(--metin-2); text-decoration: none; white-space: nowrap;
}
.menu-giris:hover { color: var(--metin); }
.menu-sag .buton-kucuk { padding: 0 16px; }
.menu-dugme {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-hap);
  border: 1px solid var(--cizgi-2); background: var(--kart); color: var(--metin);
}
.menu-dugme .ikon { width: 20px; height: 20px; }
.menu-dugme .kapat-ikon, .menu-dugme[aria-expanded="true"] .ac-ikon { display: none; }
.menu-dugme[aria-expanded="true"] .kapat-ikon { display: block; }

@media (min-width: 400px) { .logo img { width: 124px; } }
/* Masaüstü menü 1180 px'ten itibaren: 7 bağlantı + Giriş yap + CTA bu genişliğin altında
   tek satıra sığmaz (1024 ve 1100'de hamburger). 1180–1279 arası bağlantılar sıkışık aralıkla
   dizilir; ≥1280 px'te normal aralık. Ölçüm: 1180'de ~40 px, 1280'de ~150 px boşluk kalır. */
@media (min-width: 1180px) {
  .ana-nav { display: block; margin-inline: auto; }
  .menu-giris { display: inline-flex; }
  .menu-dugme { display: none !important; }
  .menu-sag { margin-left: 0; }
  .logo img { width: 128px; }
  .ust-ic { gap: 16px; }
  .menu-linkler > li > a, .menu-linkler > li > button { padding: 0 10px; }
  .menu-giris { padding: 0 8px; }
}
@media (min-width: 1280px) {
  .ust-ic { gap: 20px; }
  .menu-linkler > li > a, .menu-linkler > li > button { padding: 0 13px; }
  .menu-giris { padding: 0 12px; }
}


/* ---------- 9. Mega menüler (Hizmetler, Programlar) ----------------------
   İki panel aynı sözleşmeyle çalışır. Panel DOM'da düğmenin HEMEN ARKASINDA
   durur: ilk Tab paneldeki ilk bağlantıya girer. Tıkla / Enter / Space açar;
   Esc kapatır ve odağı düğmeye verir; dışarı tıklama ve odağın panelden
   çıkması kapatır; biri açılınca öteki kapanır. Hover ile açılmaz. JS yoksa
   düğme yerine bağlantı görünür (.js-yok: /#hizmetler, /programlar).
   Panel ortalı ve menünün altında durur: hangi düğmeden açılırsa açılsın aynı yer. */
.mega {
  position: absolute; left: 50%; top: calc(100% + 6px); z-index: 60;
  width: min(1160px, calc(100vw - 2 * var(--kenar)));
  transform: translateX(-50%);
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r-kart);
  box-shadow: var(--golge-panel); padding: 10px;
}
.mega[hidden] { display: none; }
.mega-izgara { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr) minmax(0, 1.1fr); gap: 10px; }
.mega-giris { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 18px 16px; }
.mega-etiket { font-size: var(--t-altyazi); font-weight: 600; color: var(--metin-3); }
.mega-baslik {
  font-family: var(--yazi-baslik); font-size: 22px; font-weight: 600; line-height: 1.14;
  letter-spacing: var(--hs-3); word-spacing: var(--ws-3); text-wrap: balance;
}
.mega-metin { font-size: 14px; line-height: 1.5; color: var(--metin-2); }
.mega-giris .metin-baglanti { margin-top: auto; min-height: 44px; font-size: 14.5px; }

/* Öne çıkan: satıştaki program, siyah kart */
.mega-one {
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  border-radius: 18px; padding: 22px 22px 0;
}
.mega-one-metin { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.mega-one-ad {
  margin-top: 4px; font-family: var(--yazi-baslik); font-size: 20px; font-weight: 600; line-height: 1.2;
  letter-spacing: var(--hs-3); word-spacing: var(--ws-3);
}
.mega-one-cumle { font-size: 14px; line-height: 1.5; color: var(--metin-2); max-width: 34ch; }
.mega-fiyat { font-size: 13px; color: var(--metin-3); }
.mega-fiyat b { font-family: var(--yazi-baslik); font-size: 16px; font-weight: 650; color: var(--metin); letter-spacing: -.02em; word-spacing: var(--ws-4); margin-right: 4px; }
.mega-one-linkler { display: flex; flex-wrap: wrap; gap: 0 18px; font-size: 14px; }
.mega-one-linkler .metin-baglanti { min-height: 44px; }
.mega-one-ekran {
  align-self: end; margin: 10px -22px 0 18%; height: 150px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.16); border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0;
}
.mega-one-ekran img { width: 100%; height: auto; }

/* Yakında olanlar */
.mega-yakinda { display: grid; align-content: start; gap: 4px; padding: 6px 0; }
.mega-oge { display: flex; gap: 14px; padding: 14px; border-radius: 16px; text-decoration: none; transition: background-color var(--sure-kisa); }
.mega-oge:hover { background: var(--ic-zemin); }
.mega-oge-metin { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mega-oge-ust { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mega-oge strong {
  font-family: var(--yazi-baslik); font-size: 16.5px; font-weight: 650; line-height: 1.25;
  letter-spacing: var(--hs-4); word-spacing: var(--ws-4);
}
.mega-oge-cumle { font-size: 14px; line-height: 1.45; color: var(--metin-2); }
.mega-alt {
  display: flex; align-items: center; gap: 8px; margin: 10px 8px 2px; padding: 12px 10px 4px;
  border-top: 1px solid var(--cizgi); font-size: 13px; color: var(--metin-3);
}
.mega-alt .ikon { color: var(--metin-2); }

/* Hizmetler paneli: giriş · üç ana hizmet (gömme blok içinde büyük satırlar) · diğer hizmetler */
.mega-hizmet .mega-izgara { grid-template-columns: minmax(0, .82fr) minmax(0, 1.5fr) minmax(0, .98fr); }
/* Orta blok panel kenarına yapışmaz: üst kenarı yan sütunların etiket satırıyla aynı çizgide (mega-giris üst boşluğu 20 px) */
.mega-ana { display: grid; align-content: start; gap: 2px; margin: 20px 0 8px; padding: 8px; border-radius: 18px; background: var(--ic-zemin); border: 1px solid var(--cizgi); }
.mega-ana-oge {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; gap: 16px; align-items: start;
  padding: 16px 16px 16px 14px; border-radius: 14px; text-decoration: none; transition: background-color var(--sure-kisa), box-shadow var(--sure-kisa);
}
.mega-ana-oge:hover { background: var(--kart); box-shadow: 0 0 0 1px var(--cizgi); }
.mega-ana-oge strong {
  font-family: var(--yazi-baslik); font-size: 17.5px; font-weight: 650; line-height: 1.25;
  letter-spacing: var(--hs-4); word-spacing: var(--ws-4);
}
.mega-ana-oge .mega-fiyat { margin-top: 2px; }
.mega-ana-oge .mega-fiyat b { font-size: 14.5px; margin-right: 0; }
.mega-ok { align-self: center; width: 18px; height: 18px; stroke-width: 2; color: var(--metin-3); transition: transform var(--sure-orta) var(--gecis), color var(--sure-kisa); }
.mega-ana-oge:hover .mega-ok { transform: translateX(3px); color: var(--metin); }
.mega-diger { display: flex; flex-direction: column; gap: 6px; padding: 20px 10px 8px 14px; }
.mega-liste { border-top: 1px solid var(--cizgi); }
.mega-liste a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 4px;
  border-bottom: 1px solid var(--cizgi); font-size: 14.5px; line-height: 1.35; color: var(--metin-2); text-decoration: none;
  transition: color var(--sure-kisa);
}
.mega-liste a:hover { color: var(--metin); }
.mega-liste a:hover span { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.mega-liste .ikon { color: var(--metin); }


/* ---------- 10. Mobil menü ------------------------------------------------ */
.mobil-menu {
  position: fixed; inset: var(--menu-yuk) 0 0 0; z-index: 49;
  display: flex; flex-direction: column;
  background: var(--kagit); overflow-y: auto; overscroll-behavior: contain;
  padding: 4px var(--kenar) 0;
}
.mobil-menu[hidden] { display: none; }
.mobil-menu > nav { display: flex; flex-direction: column; min-height: 100%; }
.mobil-liste > li { border-bottom: 1px solid var(--cizgi); }
.mobil-liste > li > a, .mobil-akordeon {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px;
  font-family: var(--yazi-baslik); font-size: 20px; font-weight: 600;
  letter-spacing: var(--hs-4); word-spacing: var(--ws-4); text-decoration: none; color: var(--metin); text-align: left;
}
.mobil-akordeon .ok-ikon { width: 20px; height: 20px; }
/* Geçerli bölüm / sayfa: adın yanında mürekkep nokta (masaüstündeki noktanın karşılığı) */
.mobil-liste [aria-current] .mobil-ad::after, .mobil-tumu[aria-current="page"]::after {
  content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 0 .2em 8px; border-radius: 50%; background: currentColor; vertical-align: middle;
}
.mobil-alt a[aria-current="page"] .ikon-karo { box-shadow: 0 0 0 2px var(--kagit), 0 0 0 3.5px var(--murekkep); }   /* bu sayfa: ikon karosunda halka */
.mobil-alt { padding-bottom: 12px; }
.mobil-alt[hidden] { display: none; }
.mobil-alt a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; text-decoration: none; color: var(--metin); }
.mobil-alt .ikon-karo { width: 40px; height: 40px; border-radius: 11px; }
.mobil-alt .ikon-karo .ikon { width: 19px; height: 19px; }
.mobil-alt-metin { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; font-weight: 600; font-size: 16px; }
.mobil-alt-metin small { font-weight: 400; font-size: 13.5px; color: var(--metin-3); }
.mobil-alt .rozet { margin-left: auto; }
/* Hizmetler akordeonundaki "Diğer hizmetler": iki sütun kısa bağlantı */
.mobil-diger { padding: 8px 0 2px; }
.mobil-diger-baslik { font-size: var(--t-altyazi); font-weight: 600; color: var(--metin-3); }
.mobil-diger ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; margin-top: 4px; }
.mobil-alt .mobil-diger a { min-height: 44px; padding: 4px 0; font-size: 15px; font-weight: 500; color: var(--metin-2); }
.mobil-tumu { font-weight: 600; min-height: 48px !important; gap: 6px !important; }
.mobil-tumu .ikon { width: 16px; height: 16px; stroke-width: 2; }
/* Eylem çifti menünün altına yapışır: akordeon açıkken de görünür; içerik altından kayarken üstte yumuşak geçiş */
.mobil-eylem {
  position: sticky; bottom: 0; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: auto; padding: 24px 0 calc(20px + env(safe-area-inset-bottom)); background: var(--kagit);
}
.mobil-eylem::before { content: ''; position: absolute; left: 0; right: 0; top: -20px; height: 20px; background: linear-gradient(to top, var(--kagit), rgba(250,249,246,0)); pointer-events: none; }
.mobil-eylem .buton { padding-inline: 12px; }
/* Uzun deneme metni ("30 gün ücretsiz deneyin ↗", ~232 px) iki eşit sütuna ancak ~506 px'ten sonra sığar;
   daha darda kısa hâli ("Ücretsiz deneyin"). Eskiden 320 px'te düğme ekranın 29 px dışına taşıyordu.
   Kısa ve uzun metin aynı eylemdir; display:none olan erişilebilirlik ağacından da düşer. */
.mobil-eylem-uzun { display: none; }
@media (min-width: 520px) {
  .mobil-eylem-uzun { display: inline; }
  .mobil-eylem-kisa { display: none; }
}
.ust-menu.acik .menu-sag > .buton { visibility: hidden; }   /* menü açıkken eylem menünün altında: tekrar yok */
body.menu-acik { overflow: hidden; }
@media (min-width: 1180px) { .mobil-menu { display: none !important; } }


/* ---------- 11. Yapışkan alt menü (ürün sayfaları) -----------------------
   Apple kalıbı: ana menü kayıp gider, ürün menüsü tepede kalır. İçerik:
   ürün adı · bölüm çapaları (kaydırılabilir) · sürekli görünen eylem düğmesi. */
.alt-menu {
  position: sticky; top: 0; z-index: 45;
  background: color-mix(in srgb, var(--kagit) 94%, transparent);
  border-bottom: 1px solid var(--cizgi);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
.alt-menu-ic { display: flex; align-items: center; gap: 16px; height: var(--alt-menu-yuk); }
.alt-menu-ad {
  display: none; flex: none; font-family: var(--yazi-baslik); font-weight: 650; font-size: 17px;
  letter-spacing: var(--hs-4); word-spacing: var(--ws-4); text-decoration: none;
}
.alt-menu-linkler {
  display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.alt-menu-linkler::-webkit-scrollbar { display: none; }
.alt-menu-linkler a {
  display: inline-flex; align-items: center; height: 44px; padding: 0 12px; border-radius: var(--r-hap);
  font-size: 14px; font-weight: 500; color: var(--metin-2); text-decoration: none; white-space: nowrap;
}
.alt-menu-linkler a:hover { color: var(--metin); }
.alt-menu-linkler a[aria-current="true"] { color: var(--metin); background: rgba(10,10,12,.06); }
.alt-menu .buton { flex: none; }
/* Uzun deneme metni ("30 gün ücretsiz deneyin", CafePOS) dar ekranda kısa hâline döner: bölüm çapalarına
   yer kalsın. Kısa ve uzun metin aynı eylemdir; display:none olan erişilebilirlik ağacından da düşer. */
.alt-menu-uzun { display: none; }
@media (min-width: 900px) {
  .alt-menu-ad { display: inline-flex; align-items: center; min-height: 44px; }
  .alt-menu-linkler { justify-content: flex-end; -webkit-mask-image: none; mask-image: none; }
  .alt-menu-uzun { display: inline; }
  .alt-menu-kisa { display: none; }
}


/* ---------- 12. Bölüm başlığı -------------------------------------------
   Dergi şeridi: "01 — Mağaza ———————— sağ not"; altında başlık (7 sütun) ve
   giriş paragrafı (4 sütun) alt çizgiden hizalı.                           */
.bolum-bas { margin-bottom: clamp(28px, 3.5vw, 52px); }
.bolum-serit {
  display: flex; align-items: center; gap: 14px; margin-bottom: clamp(22px, 2.6vw, 36px);
  font-size: var(--t-kucuk); color: var(--metin-2);
}
.bolum-serit::after { content: ''; flex: 1; height: 1px; background: var(--cizgi); order: 2; }
.bolum-no { font-family: var(--yazi-baslik); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--metin); letter-spacing: -.01em; word-spacing: var(--ws-4); }
.bolum-no::after { content: '\2009\2014'; font-weight: 400; color: var(--metin-3); }
.bolum-ad { font-weight: 500; color: var(--metin); }
.bolum-ek { order: 3; font-size: var(--t-altyazi); color: var(--metin-3); white-space: nowrap; }
@media (max-width: 639px) { .bolum-ek { display: none; } }
.bolum-bas .izgara { align-items: end; row-gap: 18px; }
.bolum-bas h2, .bolum-bas .giris { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .bolum-bas h2 { grid-column: 1 / span 7; }
  .bolum-bas .giris { grid-column: 9 / span 4; }
}


/* ---------- 13. Kahraman kartları ----------------------------------------
   .sahne-kart   anasayfa: metin + görsel, iki sütun (≥1000 px)
   .sayfa-sahne  iç sayfa: ortalı başlık + çipler
   .urun-sahne   ürün detayı: metin + ekran, ekran kartın alt kenarından taşar
   Kahraman başlığı kapsayıcı genişliğine göre de sınırlanır (cqi): en uzun
   Türkçe kelime ("pazaryerleriniz") her genişlikte sütuna sığar.          */
.sahne { padding-top: clamp(8px, 1.2vw, 20px); }
.sahne-kart { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.sahne-metin { container-type: inline-size; display: flex; flex-direction: column; align-items: flex-start; }
.sahne-metin .baslik-dev { margin-top: 18px; font-size: min(var(--t-dev), 11.6cqi); }
.sahne-metin .giris { margin-top: 22px; max-width: 46ch; }
.sahne-metin .dugmeler { margin-top: 30px; }
.fiyat-satiri { margin-top: 18px; font-size: 14.5px; line-height: 1.5; color: var(--metin-2); }
.fiyat-satiri b { color: var(--metin); font-weight: 600; }
@media (min-width: 1000px) {
  .sahne-kart { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: stretch; }
  .sahne-metin { justify-content: space-between; }
}
.sahne-metin .yol { margin: -10px 0 6px; }     /* hizmet sayfası kahramanı: yol en üstte */
.sahne-metin .yol + .ust-not { margin-top: 0; }

/* Kahraman folyosu: beyaz kartta izin verilen TEK holo yüzey (§6), sayfa başına bir tane,
   yalnız kahramanda (anasayfa, E-Ticaret, Web Sitesi Kurulumu). Konik merkez folyonun
   SOL DIŞINDA. İçindeki çizim em ile kurulur: ≥640 px'te 62em × 58em, mobilde ~34,5em
   genişlik; ölçek font-size'dan (cqi) gelir. Çizimler sayfanın CSS'indedir
   (eticaret.css: Örnek Mağaza; anasayfa.css: katmanlı üç hizmet, Örnek Firma sitesi). */
.sahne-gorsel { container-type: inline-size; margin: 0; display: flex; flex-direction: column; }
.folyo {
  position: relative; isolation: isolate; overflow: hidden; width: 100%;
  aspect-ratio: 1 / 1.08; border-radius: 22px;
  background: conic-gradient(from 208deg at -30% 40%, var(--holo-renkler));
  font-size: 2.9cqi;                    /* mobil kompozisyon: ~34,5em genişlik */
}
.folyo::after {                         /* folyo dokusu: ince çapraz tarama */
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .4;
  background: repeating-linear-gradient(115deg, transparent 0 14px, rgba(255,255,255,.6) 14px 15px);
}
.sahne-gorsel figcaption { margin-top: 12px; }
@media (min-width: 640px) {
  .folyo { aspect-ratio: 62 / 58; font-size: 1.6129cqi; flex: 1; min-height: 0; }   /* 62em = kapsayıcı genişliği */
}

/* Künye: katalogdaki spesifikasyon satırı */
.kunye { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-top: 36px; border-top: 1px solid var(--cizgi); }
.kunye > div { padding: 14px 14px 0 0; min-width: 0; }
.kunye > div:nth-child(n+3) { border-top: 1px solid var(--cizgi); margin-top: 14px; }
.kunye dt { font-size: var(--t-altyazi); color: var(--metin-3); }
.kunye dd {
  margin-top: 2px; font-family: var(--yazi-baslik); font-weight: 600; font-size: 16.5px; line-height: 1.3;
  letter-spacing: var(--hs-4); word-spacing: var(--ws-4);
}
@media (min-width: 640px) {
  .kunye { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kunye > div { padding: 16px 16px 0 0; }
  .kunye > div + div { border-left: 1px solid var(--cizgi); padding-left: 16px; }
  .kunye > div:nth-child(n+3) { border-top: 0; margin-top: 0; }
}
.kunye-orta { max-width: 860px; margin-inline: auto; text-align: left; }
/* 1000–1199 px: kahraman iki sütunken metin sütunu dar; künye 2 × 2 dizilir (dört hücre sığmaz) */
@media (min-width: 1000px) and (max-width: 1199px) {
  .sahne-metin .kunye { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sahne-metin .kunye > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .sahne-metin .kunye > div:nth-child(n+3) { border-top: 1px solid var(--cizgi); margin-top: 14px; }
}

/* Sayfa yolu (breadcrumb) */
.yol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: 14px; color: var(--metin-3); }
.yol a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--metin-2); text-decoration: none; }
.yol a:first-child { padding-left: 0; }
.yol a:hover { color: var(--metin); text-decoration: underline; }
.yol .ikon { width: 14px; height: 14px; stroke-width: 2; }
.yol [aria-current] { padding: 0 4px; }

/* İç sayfa kahramanı: ortalı */
.sayfa-sahne { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sayfa-sahne .yol { justify-content: center; }
.sayfa-sahne .baslik-1 { margin-top: 18px; max-width: 16ch; }
.sayfa-sahne .giris { margin: 22px auto 0; max-width: 50ch; }
.sayfa-sahne .cipler { margin-top: 30px; }

/* Ürün kahramanı: ekran kartın alt kenarından taşar */
.urun-sahne { padding-bottom: 0; }
.urun-sahne-ust { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.urun-sahne-ust .baslik-dev { margin-top: 16px; font-size: min(var(--t-dev), 12.5cqi); }
.urun-sahne-baslik { container-type: inline-size; }
.urun-sahne-ust .giris { max-width: 46ch; }
.urun-sahne-ust .dugmeler { margin-top: 26px; }
.urun-kimlik { margin-top: 18px; gap: 10px; font-weight: 600; color: var(--metin); }
.urun-kimlik img { width: 28px; height: 28px; border-radius: 8px; }
@media (min-width: 1000px) { .urun-sahne-ust { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 56px; } }
.urun-ekran { margin-top: clamp(28px, 3vw, 44px); }
.urun-ekran .levha { border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -20px 60px -40px rgba(10,10,12,.35); }
.urun-ekran .levha img { aspect-ratio: 1440 / 700; object-fit: cover; object-position: left top; }
.sahne-altyazi { margin-top: 12px; }
@media (max-width: 639px) {
  /* object-fit: initial "fill" demekti: 16:9 / 2:1 ekran 4:3 kutuya esneyip yazılar uzuyordu. Kesit
     masaüstündeki gibi sol üstten kırpılır (en-boy korunur, SPEC §1) */
  .urun-ekran .levha img { aspect-ratio: 4 / 3; width: 175%; max-width: none; object-fit: cover; object-position: left top; }
}


/* ---------- 14. Ekran karosu ve ürün banner'ı ----------------------------
   .ekran-karo  metin üstte, gerçek ekran altta; ekran kartın sağ ve alt
                kenarından taşar, karonun kalan yüksekliğini DOLDURUR (ölü alan
                kalmaz). .ekran-karo-yan: ≥640 px'te metin solda, ekran sağda.
   .banner      Apple ürün karosu: ortalı ad, tek iddia, iki hap düğme, karonun
                altından taşan ekran. Programlar sayfasında B-S-B dönüşümüyle.   */
.ekran-karo { display: flex; flex-direction: column; padding-bottom: 0; }
.ekran-karo-metin { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.ekran-karo-metin h2, .ekran-karo-metin h3 { margin-top: 14px; }
.ekran-karo-metin > p { margin-top: 8px; color: var(--metin-2); max-width: 44ch; }
.ekran-karo-metin .dugmeler { margin-top: 20px; }
.ekran-karo-metin .altyazi { margin-top: 10px; }
.ekran-karo-gorsel {
  flex: 1; display: flex; min-height: 150px; margin: 26px calc(-1 * var(--kart-ic)) 0 clamp(0px, 8%, 56px);
}
.ekran-karo-gorsel > a, .ekran-karo-gorsel > .levha { flex: 1; display: flex; min-width: 0; }
.ekran-karo-gorsel .levha {
  position: relative; flex: 1; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; box-shadow: var(--golge-levha);
}
/* Görsel mutlak konumlu: karonun yüksekliğini metin belirler, ekran kalan alanı doldurur */
.ekran-karo-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.ekran-karo-gorsel { min-height: clamp(190px, 17vw, 250px); }
.kart-siyah .ekran-karo-gorsel .levha { border-color: rgba(255,255,255,.16); box-shadow: none; }
.ekran-karo-gorsel a { border-radius: 12px 0 0 0; }
.ekran-karo-gorsel a:hover .levha { border-color: var(--cizgi-2); }
@media (max-width: 639px) {
  .ekran-karo-gorsel { flex: none; margin-left: 0; }
  .ekran-karo-kisa .ekran-karo-gorsel .levha { aspect-ratio: 16 / 9; }   /* anasayfa kısa karo: yalnız bir bakış */
  .ekran-karo-gorsel .levha { aspect-ratio: 4 / 3; }
  .ekran-karo-gorsel img { position: static; width: 165%; height: auto; max-width: none; object-fit: initial; }
  .ekran-karo-gorsel { min-height: 0; }
}
@media (min-width: 640px) {
  .ekran-karo-yan { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); column-gap: 28px; }
  .ekran-karo-yan .ekran-karo-metin { padding-bottom: var(--kart-ic); }
  .ekran-karo-yan .ekran-karo-gorsel { margin: clamp(28px, 4vw, 52px) calc(-1 * var(--kart-ic)) 0 0; min-height: 260px; }
}

.banner { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 0; }
.banner-urun { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px; font-family: var(--yazi-baslik); font-weight: 650; font-size: 18px; letter-spacing: var(--hs-4); word-spacing: var(--ws-4); }
.banner-urun img { width: 28px; height: 28px; border-radius: 8px; }
.banner .baslik-1 { margin-top: 16px; max-width: 15ch; }
.banner .giris { margin: 18px auto 0; max-width: 52ch; }
.banner .kunye { margin-top: 30px; }
.banner .dugmeler { justify-content: center; margin-top: 30px; }
.banner-ekran { width: min(100%, 1040px); margin: clamp(32px, 4vw, 56px) auto 0; }
.banner-ekran .levha { border-bottom: 0; border-radius: 16px 16px 0 0; }
.banner-ekran img { aspect-ratio: 16 / 7.4; object-fit: cover; object-position: left top; }
.kart-siyah .banner-ekran .levha { box-shadow: 0 0 0 1px rgba(255,255,255,.04); }
.kart:not(.kart-siyah) .banner-ekran .levha { box-shadow: 0 -24px 60px -40px rgba(10,10,12,.3); }
@media (max-width: 639px) {
  .banner { text-align: left; align-items: flex-start; }
  .banner .dugmeler { justify-content: flex-start; }
  .banner-urun { justify-content: flex-start; }
  .banner-ekran { margin-right: calc(-1 * var(--sahne-ic)); width: auto; }
  .banner-ekran .levha { border-right: 0; border-radius: 12px 0 0 0; aspect-ratio: 4 / 3; }
  .banner-ekran img { aspect-ratio: auto; width: 170%; max-width: none; object-fit: initial; }
}


/* ---------- 15. Entegrasyon dizini ---------------------------------------
   Kategorili dizin: hangi işin hangi servisle yapıldığını söyler. Logolar
   tek renge çevrilir (filter), en-boy korunur (object-fit). Logosu olmayan
   servis başlık yazısıyla dizilir. Mobilde 2 sütunlu hücre ızgarası.       */
.dizin { padding-top: clamp(56px, 5vw, 88px); }
.dizin-baslik { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 16px; }
.dizin-baslik h2 { font-size: var(--t-4); font-weight: 650; }
.dizin-baslik p { font-size: var(--t-kucuk); color: var(--metin-3); }
.dizin-tablo { border-top: 1px solid var(--cizgi-2); }
.dizin-satir { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 0 16px; border-bottom: 1px solid var(--cizgi); }
.dizin-satir dt { font-size: var(--t-altyazi); font-weight: 500; color: var(--metin-3); }
.dizin-satir dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
.dizin-satir dd > * { display: flex; align-items: center; min-height: 34px; min-width: 0; }
.marka-logo { height: 21px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; filter: grayscale(1) brightness(0); opacity: .86; }
.marka-logo.kisa { height: 26px; }       /* dar logolar (Trendyol, BizimHesap) optik denge */
.marka-logo.uzun { height: 18px; }
.marka-yazi {
  font-family: var(--yazi-baslik); font-weight: 650; font-size: 15.5px; line-height: 1.2; color: #26262b;
  letter-spacing: var(--hs-4); word-spacing: var(--ws-4);
}
@media (min-width: 768px) {
  .dizin-satir { grid-template-columns: 170px minmax(0, 1fr); align-items: center; padding: 16px 0; }
  .dizin-satir dd { display: flex; flex-wrap: wrap; gap: 10px 32px; }
  .marka-yazi { font-size: 16.5px; }
}


/* ---------- 16. Bento ----------------------------------------------------
   12 sütun: 7+5 / 4+4+4 / 7+5 / 12. Tablette 6+6, mobilde tek sütun.
   Kartın yüksekliği boşsa çizim alanı (.gomme.dolgu) esner, delik kalmaz.  */
.bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oluk); }
.bento > .kart { display: flex; flex-direction: column; }
.bento h3 { font-size: var(--t-4); font-weight: 650; line-height: 1.22; letter-spacing: var(--hs-4); word-spacing: var(--ws-4); }
.bento .buyuk h3 { font-size: var(--t-3); font-weight: 600; line-height: 1.1; letter-spacing: var(--hs-3); word-spacing: var(--ws-3); }
.bento .kart > p:not(.kart-dip) { color: var(--metin-2); max-width: 52ch; }
.bento .kart > .kart-dip { margin-top: auto; }
/* Hakkımızda "Ne yapıyoruz" bentosu (.hizmet-kartlari): kartın dibindeki tek bağlantı, kartlar farklı
   uzunlukta olsa da aynı hizada durur; "Çevresindeki işler" kartında paragraf altındaki bağlantı
   çipleri 44 px dokunma hedefini korur (.kart-cipler çipi küçültürdü). Genel .bento'ya yazılmaz:
   panel kartlarındaki bağlantı ve lisans modülü çipleri kendi aralığını taşır. */
.hizmet-kartlari > .kart > .metin-baglanti:last-child { align-self: flex-start; margin-top: auto; padding-top: 12px; }
.hizmet-kartlari > .kart > p + .cipler { margin-top: 18px; }
.gomme { margin-top: 24px; }
.gomme.dolgu { flex: 1; display: flex; flex-direction: column; }
.gomme.dolgu > .gomme-ic, .gomme.dolgu > .sekil-ic { flex: 1; }
.gomme + .kart-dip, .sekil + .kart-dip { margin-top: 20px !important; }
.kunye-satir { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-altyazi); color: var(--metin-3); }
.kunye-satir span { display: inline-flex; align-items: center; gap: 6px; }
.kunye-satir span + span::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: currentColor; margin-right: 8px; }
/* Kart içi çip satırı (bento) */
.kart-cipler { margin-top: 16px; }
.kart-cipler .cip { min-height: 30px; padding: 0 12px; font-size: 13px; }

/* "Pakette ayrıca": grup akordeonları; mobilde tek sütun kapalı, tablette 2, geniş ekranda 4 sütun */
.ayrica { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; }
@media (min-width: 768px) { .ayrica { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 6px; } }
@media (min-width: 1100px) { .ayrica { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }
@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .b-7, .b-5, .b-4, .b-6 { grid-column: span 6; }
  .b-12, .b-8 { grid-column: span 12; }
  .b-4:nth-last-child(1):nth-child(odd) { grid-column: span 12; }
}
@media (min-width: 1100px) {
  .b-7 { grid-column: span 7; } .b-5 { grid-column: span 5; }
  .b-4 { grid-column: span 4; } .b-8 { grid-column: span 8; }
  .b-4:nth-last-child(1):nth-child(odd) { grid-column: span 4; }
}


/* ---------- 17. Adımlar --------------------------------------------------
   .adimlar  tek kart içinde saç çizgisiyle ayrılmış 3 adım (nasıl çalışır)
   .sira     numaralı dikey liste (nasıl satın alınır, satın alma akışı)
   Numara diskleri mürekkeptir; hologram küçük yüzeyde kullanılmaz.        */
.adimlar { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; }
.adim { display: flex; flex-direction: column; padding: var(--kart-ic); min-width: 0; }
.adim + .adim { border-top: 1px solid var(--cizgi); }
.adim-no {
  font-family: var(--yazi-baslik); font-weight: 300; font-size: clamp(56px, 5.4vw, 88px); line-height: .82;
  letter-spacing: -.06em; word-spacing: var(--ws-dev); color: var(--metin); font-variant-numeric: lining-nums;
}
.adim h3 { margin-top: 22px; font-size: var(--t-4); font-weight: 650; }
.adim > p { margin-top: 8px; color: var(--metin-2); max-width: 40ch; }
.adim .gomme { margin-top: auto; padding-top: 24px; }
@media (min-width: 900px) {
  .adimlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .adim + .adim { border-top: 0; border-left: 1px solid var(--cizgi); }
}

.sira { counter-reset: sira; display: grid; gap: 14px; }
.sira > li { counter-increment: sira; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; line-height: 1.5; color: var(--metin-2); }
.sira > li::before {
  content: counter(sira); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--murekkep); color: #fff; font: 600 13px/1 var(--yazi-govde); font-variant-numeric: tabular-nums;
}
.sira > li b { color: var(--metin); font-weight: 600; }
.kart-siyah .sira > li::before { background: #fff; color: var(--murekkep); }


/* ---------- 18. Program kartları ------------------------------------------
   Kahramanın altındaki iki karoluk program satırı (.program-satiri, .yakinda-karo,
   .karo-son, .program-fiyat-buyuk) ikinci turdan beri hiçbir sayfada yok (SPEC §8.4);
   çıkarıldı. Barkodlu Satış karosu Sektörel Yazılım banner'ındadır (§18b).         */
.program-fiyat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin-top: 14px; font-size: var(--t-kucuk); color: var(--metin-2); }
.program-fiyat b { font-family: var(--yazi-baslik); font-weight: 600; font-size: 22px; letter-spacing: -.035em; word-spacing: var(--ws-3); color: var(--metin); }

/* Yakındaki programlar listesi (Sektörel Yazılım banner'ının program vitrini) */
.yakinda-liste { margin-top: 18px; border-top: 1px solid var(--cizgi); }
.yakinda-liste li { border-bottom: 1px solid var(--cizgi); }
.yakinda-liste a { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; text-decoration: none; min-height: 44px; }
.yakinda-liste a:hover strong { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.yakinda-liste-metin { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.yakinda-liste-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.yakinda-liste strong { font-family: var(--yazi-baslik); font-size: 18px; font-weight: 650; letter-spacing: var(--hs-4); word-spacing: var(--ws-4); line-height: 1.25; }
.yakinda-liste small { font-size: 14px; color: var(--metin-2); line-height: 1.45; }
.yakinda-liste em { font-style: normal; font-size: 13px; color: var(--metin-3); }

/* Vaat listesi (görselsiz ürün: QR Menü) */
.vaat-liste { border-top: 1px solid var(--cizgi); }
.vaat-liste li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--cizgi); }
.vaat-liste .ikon { margin-top: 1px; }
.vaat-liste b { display: block; font-weight: 600; font-size: 16px; line-height: 1.35; }
.vaat-liste span span { display: block; font-size: 14.5px; color: var(--metin-2); margin-top: 2px; }


/* ---------- 18b. Hizmet blokları -----------------------------------------
   Genel anasayfa ve hizmet sayfaları (Web Sitesi Kurulumu) için.
   .hizmet-banner    anasayfanın omurgası: üç ana hizmetin büyük kartı; metin (5) +
                     görsel (7). B-S-B ritmi; ortadaki .kart-siyah. .hizmet-banner-ters
                     masaüstünde görseli sola alır (DOM sırası değişmez: önce metin).
                     Adın önünde ikon karosu (numara yok: tek numara sistemi bölüm
                     şeridi). Görsel sütun kapsayıcıdır (cqi); iki sütun dikeyde ortalı.
   .hizmet-banner-vitrin  program vitrini: siyah Barkodlu Satış ekran karosu + yakındaki
                     programlar (Sektörel Yazılım banner'ının görsel alanı)
   .kunye-2          künyenin her genişlikte 2 × 2 hâli (dar metin sütunu için)
   .hizmet-tablo     diğer hizmetler: tek kart, saç çizgisiyle bölünmüş hücreler
   .surec            numaralı süreç şeridi (4–5 adım); masaüstünde yatay ray,
                     900 px altında soldan dikey ray. Adım sayısı --adim ile verilir
   .gerekce-izgara   "Neden Ticisoft": sol başlık + iki sütunlu gerekçe listesi
   .karar-izgara     iki seçeneği yan yana tartan kart çifti (web sitesi / E-Ticaret)
   .capraz-serit     sayfa sonunda tek satırlık çapraz bağlantı şeridi
   "Sektör → program" karoları (.sektor-liste) ikinci turda program vitriniyle değişti;
   hiçbir sayfada kullanılmadığı için çıkarıldı (SPEC §8.22).                     */
.hizmetler-yigin { display: grid; gap: var(--oluk); }
.hizmet-banner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.hizmet-banner-metin { container-type: inline-size; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hizmet-ad { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--metin); }
.hizmet-banner-metin > .baslik-2 { margin-top: 24px; max-width: 13ch; font-size: min(var(--t-2), 11cqi); }
.hizmet-banner-metin > .giris { margin-top: 18px; max-width: 46ch; }
.hizmet-banner-metin > .kunye { margin-top: 28px; }
.hizmet-banner-metin > .dugmeler { margin-top: 28px; }
.hizmet-banner-metin > .fiyat-satiri { margin-top: 16px; }
.hizmet-banner-gorsel { container-type: inline-size; display: flex; flex-direction: column; min-width: 0; margin: 0; }
.hizmet-banner-gorsel > .gomme-ic { flex: 1; }
.hizmet-banner-gorsel figcaption, .hizmet-banner-gorsel .altyazi { margin-top: 12px; }
@media (min-width: 1000px) {
  /* İki sütun dikeyde ortalanır: kısa kalan sütun (çoğu zaman görsel) içeriğine sarılır, gömme alanda ölü boşluk kalmaz */
  .hizmet-banner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 4vw, 64px); align-items: center; }
  .hizmet-banner-ters { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .hizmet-banner-ters .hizmet-banner-gorsel { order: -1; }
}

.kunye-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .kunye-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kunye-2 > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .kunye-2 > div:nth-child(n+3) { border-top: 1px solid var(--cizgi); margin-top: 16px; }
}

/* Program vitrini: Sektörel Yazılım banner'ının görsel alanı. Onaylı siyah Barkodlu Satış ekran karosu
   (gerçek ekran) + yakındaki programlar (.yakinda-liste satırları) + fiyat modeli altyazısı. Görsel sütun
   600 px'ten darsa (1000–1199 px) karo dikey dizilir: metin üstte, ekran altta taşar. */
.hizmet-banner-vitrin .yakinda-liste { margin-top: 10px; }
.hizmet-banner-vitrin .yakinda-liste a { padding: 16px 2px; }
@media (min-width: 640px) {
  @container (max-width: 599px) {
    .hizmet-banner-vitrin .ekran-karo-yan { display: flex; }
    .hizmet-banner-vitrin .ekran-karo-yan .ekran-karo-metin { padding-bottom: 0; }
    .hizmet-banner-vitrin .ekran-karo-yan .ekran-karo-gorsel { margin: 24px calc(-1 * var(--kart-ic)) 0 clamp(0px, 8%, 56px); min-height: 190px; }
  }
}


/* Diğer hizmetler: tek kart, hücreler saç çizgisiyle bölünür (1 px aralık = çizgi) */
.hizmet-tablo {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 0;
  background: var(--cizgi);
}
.hizmet-tablo > li { display: flex; background: var(--kart); }
.hizmet-tablo a {
  flex: 1; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px 14px; align-content: start;
  padding: 20px var(--kart-ic); text-decoration: none; transition: background-color var(--sure-kisa);
}
.hizmet-tablo a:hover { background: var(--ic-zemin); }
.hizmet-tablo a:focus-visible { outline-offset: -4px; border-radius: 12px; }
.hizmet-tablo a > .ikon { grid-row: 1 / span 3; margin-top: 1px; }
.hizmet-tablo h3 { font-size: var(--t-4); font-weight: 650; line-height: 1.22; }
.hizmet-tablo p { font-size: 15px; line-height: 1.5; color: var(--metin-2); }
.hizmet-tablo-eylem {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14.5px; font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--cizgi-2); text-underline-offset: .3em;
}
.hizmet-tablo-eylem .ikon { width: 15px; height: 15px; stroke-width: 2; transition: transform var(--sure-orta) var(--gecis); }
.hizmet-tablo a:hover .hizmet-tablo-eylem { text-decoration-color: currentColor; }
.hizmet-tablo a:hover .hizmet-tablo-eylem .ikon { transform: translateX(3px); }
@media (max-width: 639px) { .hizmet-tablo p { font-size: 14.5px; } .hizmet-tablo a { padding: 18px 22px; } }
@media (min-width: 640px) {
  .hizmet-tablo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hizmet-tablo a { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: var(--kart-ic); }
  .hizmet-tablo a > .ikon { margin: 0 0 14px; width: 24px; height: 24px; }
  .hizmet-tablo-eylem { margin-top: auto; padding-top: 18px; }
}
@media (min-width: 1000px) { .hizmet-tablo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Tablonun son hücresi (teklif çağrısı): gömme zemin; 3 sütunda iki hücre kaplar ki 7 hizmet + çağrı
   ızgarayı boşluksuz doldursun (2 sütunda tek hücre yeter: 7 + 1 = 4 tam satır) */
.hizmet-tablo-cta a { background: var(--ic-zemin); }
.hizmet-tablo-cta a:hover { background: var(--cizgi); }
@media (min-width: 1000px) { .hizmet-tablo-cta { grid-column: span 2; } }
/* Mega menüde iki liste alt alta (Ajans hizmetleri + Diğer hizmetler): ikinci etiket nefes alır */
.mega-diger .mega-liste + .mega-etiket { margin-top: 14px; }

/* Süreç şeridi: numaralı adımlar bir rayın üzerinde; son adım (destek) kesik çizgiyle sürer */
.surec { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; }
.surec-adim { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px var(--kart-ic) 22px calc(var(--kart-ic) + 34px); }
.surec-adim + .surec-adim { border-top: 1px solid var(--cizgi); }
.surec-adim::before {                 /* ray: mobilde dikey */
  content: ''; position: absolute; left: calc(var(--kart-ic) + 5px); top: 0; bottom: 0; width: 1px; background: var(--cizgi-2);
}
.surec-adim:first-child::before { top: 30px; }
.surec-adim:last-child::before { background: repeating-linear-gradient(180deg, var(--cizgi-2) 0 5px, transparent 5px 10px); }
.surec-adim::after {                  /* durak */
  content: ''; position: absolute; left: var(--kart-ic); top: 30px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--murekkep); box-shadow: 0 0 0 4px var(--kart);
}
.surec-no {
  font-family: var(--yazi-baslik); font-weight: 300; font-size: 40px; line-height: .82;
  letter-spacing: -.06em; word-spacing: var(--ws-dev); color: var(--metin); font-variant-numeric: lining-nums;
}
.surec-adim h3 { margin-top: 14px; font-size: var(--t-4); font-weight: 650; line-height: 1.25; }
.surec-adim > p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--metin-2); max-width: 40ch; }
.surec-adim > .surec-not { margin-top: auto; padding-top: 14px; font-size: var(--t-altyazi); line-height: 1.45; color: var(--metin-3); }
@media (min-width: 900px) {
  .surec { grid-template-columns: repeat(var(--adim, 4), minmax(0, 1fr)); }
  .surec-adim { padding: calc(var(--kart-ic) + 40px) clamp(18px, 2vw, 32px) var(--kart-ic); }
  .surec-adim:first-child { padding-left: var(--kart-ic); }
  .surec-adim:last-child { padding-right: var(--kart-ic); }
  .surec-adim + .surec-adim { border-top: 0; border-left: 1px solid var(--cizgi); }
  .surec-adim::before { left: 0; right: 0; top: calc(var(--kart-ic) + 5px); bottom: auto; width: auto; height: 1px; }
  .surec-adim:first-child::before { top: calc(var(--kart-ic) + 5px); left: var(--kart-ic); }
  .surec-adim:last-child::before { background: repeating-linear-gradient(90deg, var(--cizgi-2) 0 5px, transparent 5px 10px); }
  .surec-adim::after { top: var(--kart-ic); left: clamp(18px, 2vw, 32px); }
  .surec-adim:first-child::after { left: var(--kart-ic); }
  .surec-no { font-size: clamp(44px, 3.6vw, 60px); }
}

/* Neden Ticisoft: sol başlık, sağda iki sütunlu gerekçe listesi (yalnız doğrulanmış gerekçe) */
.gerekce-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.gerekce-yan p { margin-top: 14px; color: var(--metin-2); max-width: 34ch; }
.gerekce-yan .dugmeler { margin-top: 22px; }
.gerekce-liste { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--cizgi-2); }
.gerekce-liste li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-content: start; gap: 4px 14px; padding: 20px 0; border-bottom: 1px solid var(--cizgi); }
.gerekce-liste .ikon { grid-row: 1 / span 2; width: 22px; height: 22px; margin-top: 2px; }
.gerekce-liste b {
  font-family: var(--yazi-baslik); font-size: 18px; font-weight: 650; line-height: 1.3;
  letter-spacing: var(--hs-4); word-spacing: var(--ws-4); color: var(--metin);
}
.gerekce-liste p { font-size: 15px; line-height: 1.55; color: var(--metin-2); max-width: 44ch; }
@media (min-width: 640px) { .gerekce-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; } .gerekce-liste li { padding: 24px 0; } }
@media (min-width: 900px) { .gerekce-izgara { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--oluk); } }

/* İki seçenek yan yana: beyaz (teklifle hizmet) + siyah (paket). Ortada "ya da" diski */
.karar-izgara { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oluk); }
.karar-kart { display: flex; flex-direction: column; align-items: flex-start; }
.karar-kart :is(h2, h3) { margin-top: 12px; font-size: var(--t-3); letter-spacing: var(--hs-3); word-spacing: var(--ws-3); }
.karar-kart > p { margin-top: 10px; color: var(--metin-2); max-width: 44ch; }
.karar-liste { width: 100%; margin-top: 22px; border-top: 1px solid var(--cizgi); }
.karar-liste li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cizgi); font-size: 15px; line-height: 1.5; color: var(--metin-2); }
.karar-liste .ikon { width: 18px; height: 18px; margin-top: 2px; stroke-width: 2.2; color: var(--metin); }
.karar-liste li.yok .ikon { color: var(--metin-3); }
.karar-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; width: 100%; margin-top: auto; padding-top: 26px; }
.karar-fiyat { font-size: 14px; color: var(--metin-2); }
.karar-fiyat b {
  display: block; font-family: var(--yazi-baslik); font-weight: 600; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.1;
  letter-spacing: -.04em; word-spacing: var(--ws-3); color: var(--metin); font-variant-numeric: lining-nums tabular-nums;
}
/* Fiyatlar sayfasının karar kartları (.bento, 2026-09-27'den beri beş kart: 4+4+4 / 6+6). Üçlü satırda (b-4) fiyat
   ve düğme alt alta: geniş tutarlı kartta ("2.000 ₺") yan yana sığmayıp kırılır, dar tutarlıda ("999 ₺") kırılmazdı —
   aynı satırda iki farklı düzen. Tablette (768–1099) bütün kartlar yarım genişlikte; tek sayıda kartın sonuncusu
   (web sitesi) tam satır olur, yanında boş hücre kalmaz (SPEC §1 "Ölü alan ve hiza"). */
@media (min-width: 768px) and (max-width: 1099px) {
  .bento > .karar-kart.b-6:nth-last-child(1):nth-child(odd) { grid-column: span 12; }
}
@media (min-width: 1100px) {
  .bento > .karar-kart.b-4 .karar-alt { flex-direction: column; align-items: flex-start; }
}
.karar-ya {
  display: none; position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; place-items: center;
  background: var(--kagit); border: 1px solid var(--cizgi-2); font-size: 13px; font-weight: 600; color: var(--metin-2);
}
@media (min-width: 900px) {
  .karar-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .karar-ya { display: grid; }
}

/* Sayfa sonu çapraz bağlantı şeridi: tek satır, saç çizgileri arasında */
.capraz-serit {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 32px;
  padding: 12px 0; border-top: 1px solid var(--cizgi-2); border-bottom: 1px solid var(--cizgi);
}
.capraz-serit p { font-size: 15px; line-height: 1.5; color: var(--metin-2); max-width: 62ch; padding: 8px 0; }
.capraz-serit p b { color: var(--metin); font-weight: 600; }
.capraz-serit ul { display: flex; flex-wrap: wrap; gap: 0 26px; }
.capraz-serit .metin-baglanti { font-size: 15px; }
.capraz-serit .rozet { min-height: 24px; padding: 0 9px; font-size: 11.5px; }


/* ---------- 19. Fiyat ---------------------------------------------------- */
.fiyat-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oluk); }
@media (min-width: 1000px) { .fiyat-izgara { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.fiyat-kart { display: flex; flex-direction: column; }
.fiyat-izgara + .kart { margin-top: var(--oluk); }
.fiyat-ust { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 18px; }
.fiyat-ust h3 { font-size: var(--t-3); letter-spacing: var(--hs-3); word-spacing: var(--ws-3); }
.fiyat-ust p { margin-top: 6px; color: var(--metin-2); font-size: 15px; max-width: 36ch; }
.fiyat-ust > .rozet { flex: none; }

/* Aylık / yıllık seçici: iki fiyat HTML'de basılı; JS yalnız görünürlüğü ve
   satın alma bağlantısındaki donem= parametresini değiştirir. "2 ay hediye"
   ipucu İKİ durumda da görünür. JS yoksa seçici gizlenir, iki fiyat alt alta. */
.donem-secici { display: inline-flex; padding: 4px; border-radius: var(--r-hap); border: 1px solid var(--cizgi-2); }
.donem-secici button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-hap);
  font-size: 14px; font-weight: 600; color: var(--metin-2); transition: background-color var(--sure-kisa), color var(--sure-kisa);
}
.donem-secici button:hover { color: var(--metin); }
.donem-secici button[aria-pressed="true"] { background: #fff; color: var(--murekkep); box-shadow: var(--golge-1); }
.donem-secici small { font-size: 12px; font-weight: 600; color: var(--basari); }
.donem-secici button[aria-pressed="true"] small { color: var(--basari-acikta); }   /* beyaz hap: açık zemin tonu */
html:not(.js) .donem-secici { display: none; }
html:not(.js) [data-fiyat][hidden] { display: block; }

.fiyat-tutar { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--cizgi); }
.fiyat-tutar b { font-family: var(--yazi-baslik); font-weight: 600; font-size: clamp(54px, 6vw, 92px); line-height: .9; letter-spacing: -.055em; word-spacing: var(--ws-dev); font-variant-numeric: lining-nums tabular-nums; }
.fiyat-tutar span { font-size: 17px; color: var(--metin-2); }
.fiyat-not { margin-top: 12px; font-size: 15px; color: var(--metin-2); }
.fiyat-not strong { color: var(--metin); font-weight: 600; }
.fiyat-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 28px; }
.fiyat-eylem .buton { min-width: 220px; }
.fiyat-eylem p { flex: 1 1 220px; font-size: 13.5px; line-height: 1.5; color: var(--metin-3); }

/* Satın alma akışı: CTA'dan sonra ne olacağını söyler (giriş duvarı sürprizi yok) */
.satin-alma-akisi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 22px; padding: 16px 18px; border-radius: var(--r-levha); border: 1px solid var(--cizgi); counter-reset: akis; }
.satin-alma-akisi li { counter-increment: akis; display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.35; color: var(--metin-2); }
.satin-alma-akisi li::before {
  content: counter(akis); display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--cizgi-2); color: var(--metin); font: 600 11.5px/1 var(--yazi-govde);
}
@media (min-width: 360px) { .satin-alma-akisi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .satin-alma-akisi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }

.fiyat-kdv { margin-top: 14px; font-size: 13.5px; color: var(--metin-3); }
/* "Pakete dahil olanlar": mobilde kapalı akordeon, geniş ekranda açık liste */
.dahil-grup { margin-top: 26px; }
.dahil-grup > summary { border-bottom: 1px solid var(--cizgi); }
.dahil-grup .dahil { margin-top: 0; border-top: 0; }
@media (min-width: 768px) { .dahil-grup > summary { padding-bottom: 12px; color: var(--metin-2); font-weight: 500; } }
.dahil { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 28px; margin-top: 28px; border-top: 1px solid var(--cizgi); }
.dahil li { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--cizgi); font-size: 15px; line-height: 1.45; }
.dahil .ikon { width: 17px; height: 17px; margin-top: 2px; stroke-width: 2.2; }
@media (min-width: 640px) { .dahil { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Dürüstlük kartı: pakete dahil OLMAYAN ücretler */
.durustluk h3 { font-size: var(--t-4); font-weight: 650; }
.durustluk > p { color: var(--metin-2); font-size: 15px; }
.cizgili-liste { margin-top: 18px; border-top: 1px solid var(--cizgi); }
.cizgili-liste li { display: flex; flex-direction: column; gap: 1px; padding: 11px 0; border-bottom: 1px solid var(--cizgi); font-size: 15px; line-height: 1.4; }
.cizgili-liste small { color: var(--metin-3); font-size: 13px; }
.ilke { display: grid; gap: 12px; margin-top: 22px; }
.ilke li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--metin-2); }
.ilke b { color: var(--metin); font-weight: 600; }
.ilke .ikon { width: 19px; height: 19px; margin-top: 2px; color: var(--basari); stroke-width: 2.2; }

/* Fiyat kartının yanındaki sütun: dürüstlük kartı + Kurulum Hizmeti alt alta */
.fiyat-yan { display: grid; gap: var(--oluk); align-content: start; }
@media (min-width: 1000px) {
  .fiyat-yan { grid-template-rows: auto 1fr; }
  /* Az içerikli yan sütun (ör. CafePOS: 2 adım + 3 çip): artan yükseklik son karta yığılıp ölü alan
     bırakmasın; auto satırlar + stretch artanı iki karta EŞİT pay olarak ekler */
  .fiyat-yan-paylasim { grid-template-rows: auto auto; align-content: stretch; }
}

/* Kurulum Hizmeti (tek seferlik ek hizmet) */
.hizmet { display: flex; flex-direction: column; }
.hizmet-ust { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 20px; }
.hizmet h3 { margin-top: 6px; font-size: var(--t-4); font-weight: 650; }
.hizmet > p { margin-top: 8px; color: var(--metin-2); font-size: 15px; max-width: 46ch; }
.hizmet-fiyat { text-align: right; }
.hizmet-fiyat b { display: block; font-family: var(--yazi-baslik); font-weight: 600; font-size: clamp(32px, 2.6vw, 40px); letter-spacing: -.05em; word-spacing: var(--ws-dev); line-height: 1; }
.hizmet-fiyat span { display: block; margin-top: 6px; font-size: 13px; color: var(--metin-3); }
.hizmet-liste { margin-top: 18px; border-top: 1px solid var(--cizgi); }
.hizmet-liste li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cizgi); font-size: 14.5px; line-height: 1.45; color: var(--metin-2); }
.hizmet-liste .ikon { width: 18px; height: 18px; margin-top: 1px; color: var(--metin); stroke-width: 2.2; }
.hizmet .kart-dip { margin-top: auto; border-top: 0; padding-top: 14px; }


/* ---------- 20. SSS akordeonu ve akordeon grupları ----------------------
   Yerel <details>/<summary>: JS gerektirmez. Aynı name="" özniteliğini alan
   sorular birbirini kapatır (tek açık soru). .grup-akordeon: mobilde kapalı,
   masaüstünde açık liste (site.js data-mobil-kapali ile yönetir).          */
.sss-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 900px) { .sss-izgara { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--oluk); } }
.sss-yan p { margin-top: 14px; color: var(--metin-2); max-width: 32ch; }
.sss-yan .dugmeler { margin-top: 22px; }
.sss { border-top: 1px solid var(--cizgi-2); }
.sss details { border-bottom: 1px solid var(--cizgi); }
.sss summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 68px; padding: 16px 0; cursor: pointer; list-style: none;
  font-family: var(--yazi-baslik); font-size: clamp(17px, 1.3vw, 19.5px); font-weight: 600; line-height: 1.3;
  letter-spacing: var(--hs-4); word-spacing: var(--ws-4);
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary:focus-visible { outline-offset: -2px; border-radius: 8px; }
.arti { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--cizgi-2); transition: background-color var(--sure-kisa), border-color var(--sure-kisa); }
.arti::before, .arti::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--metin); transform: translate(-50%, -50%); }
.arti::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--sure-orta) var(--gecis); }
summary:hover .arti { border-color: var(--metin); }
details[open] > summary .arti { background: var(--murekkep); border-color: var(--murekkep); }
details[open] > summary .arti::before, details[open] > summary .arti::after { background: #fff; }
details[open] > summary .arti::after { transform: translate(-50%, -50%) rotate(0deg); }
.sss .cevap { padding: 0 52px 22px 0; color: var(--metin-2); max-width: 68ch; }
.sss .cevap p + p { margin-top: 10px; }

.grup-akordeon > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px;
  cursor: pointer; list-style: none; font-size: var(--t-kucuk); font-weight: 600; color: var(--metin);
  border-bottom: 1px solid var(--cizgi-2);
}
.grup-akordeon > summary::-webkit-details-marker { display: none; }
.grup-akordeon > summary .ok-ikon { width: 18px; height: 18px; color: var(--metin-2); }
.grup-akordeon[open] > summary .ok-ikon { transform: rotate(180deg); }
.grup-akordeon li { padding: 10px 0; border-bottom: 1px solid var(--cizgi); font-size: 15px; line-height: 1.45; color: var(--metin-2); }
.grup-akordeon li b { color: var(--metin); font-weight: 600; }
@media (min-width: 768px) {
  .grup-akordeon > summary { cursor: default; min-height: 0; padding-bottom: 10px; }
  .grup-akordeon > summary .ok-ikon { display: none; }
}


/* ---------- 21. Kapanış kartı -------------------------------------------- */
.kapanis { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: 0; overflow: hidden; }
.kapanis-metin { padding-bottom: var(--sahne-ic); }
.kapanis .baslik-2 { max-width: 14ch; font-size: clamp(2.2rem, 1.35rem + 3.4vw, 4.4rem); }
.kapanis .giris { margin-top: 18px; }
.kapanis .dugmeler { margin-top: 28px; }
/* Maskotun ayak satırları görselde kesik; kart alt kenarı bunları örter */
.kapanis-maskot { justify-self: end; align-self: end; width: min(170px, 46%); margin-top: -8px; }
.kapanis-maskot img { width: 100%; clip-path: inset(0 0 7.4% 0); margin-bottom: -12.4%; }
@media (min-width: 900px) {
  .kapanis { grid-template-columns: minmax(0, 1fr) 300px; align-items: end; column-gap: 40px; }
  .kapanis-metin { padding-top: calc(var(--sahne-ic) * .3); }
  .kapanis-maskot { width: 250px; margin: 0 24px 0 0; }
}


/* ---------- 22. Alt bilgi ------------------------------------------------ */
.alt-bilgi { border-top: 1px solid var(--cizgi-2); padding: 52px 0 28px; font-size: 14.5px; }
.alt-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
.alt-marka { grid-column: 1 / -1; }
.alt-marka img { width: 128px; margin-left: -4px; }
.alt-marka p { margin-top: 10px; color: var(--metin-2); max-width: 36ch; }
.alt-izgara h2 { font-family: var(--yazi-govde); font-size: 13px; font-weight: 600; letter-spacing: 0; word-spacing: 0; color: var(--metin); margin-bottom: 6px; }
.alt-izgara ul a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--metin-2); text-decoration: none; }
/* Mobil: gruplar tek sütun, bağlantılar satır içinde akar (44 px hedef korunur, sayfa kısalır) */
@media (max-width: 899px) {
  .alt-izgara { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .alt-izgara ul { display: flex; flex-wrap: wrap; column-gap: 20px; }
}
.alt-izgara ul a:hover { color: var(--metin); text-decoration: underline; }
/* 900–1199 px: marka üstte tam satır, altında 6 sütun; ≥1200 px: marka + 6 sütun tek satır */
@media (min-width: 900px) {
  .alt-izgara { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px 20px; }
  .alt-izgara ul a { min-height: 34px; line-height: 1.35; padding: 5px 0; }
}
@media (min-width: 1200px) {
  .alt-izgara { grid-template-columns: minmax(0, 1.9fr) repeat(6, minmax(0, 1.3fr)); column-gap: 18px; }
  .alt-marka { grid-column: auto; }
}
.firma { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--cizgi); font-size: 13px; color: var(--metin-3); }
.firma strong { color: var(--metin); font-weight: 600; }
.firma a { display: inline-flex; align-items: center; min-height: 44px; color: var(--metin-2); }
.alt-son { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: 12px; font-size: 13px; color: var(--metin-3); }
@media (min-width: 900px) { .firma a { min-height: 32px; } }


/* ---------- 23. Tablo ----------------------------------------------------
   .tablo-kap  yatay kaydırma kabı (sayfa taşmaz, tablo kayar)
   .tablo      genel veri tablosu; .tablo-karsilastir ilk sütunu yapışkan
   Panel ve kılavuz tabloları aynı sınıfı kullanır.                       */
.tablo-kap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-kart); border: 1px solid var(--cizgi);
  /* Kaydırma gölgesi: sağda devamı varsa ince gölge; sona gelince örtü (local) gölgeyi kapatır */
  background:
    linear-gradient(270deg, var(--kart) 40%, rgba(255,255,255,0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, rgba(10,10,12,.16), transparent) right center / 14px 100% no-repeat,
    var(--kart);
}
.tablo-ipucu { display: none; }
@media (max-width: 799px) { .tablo-ipucu { display: flex; align-items: center; gap: 6px; } .tablo-ipucu .ikon { width: 15px; height: 15px; } }
.tablo { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.45; }
.tablo caption { padding: 16px 20px; text-align: left; font-size: var(--t-altyazi); color: var(--metin-3); caption-side: bottom; border-top: 1px solid var(--cizgi); }
.tablo th, .tablo td { padding: 14px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--cizgi); }
.tablo tr:last-child > * { border-bottom: 0; }
.tablo thead th { font-size: var(--t-altyazi); font-weight: 600; color: var(--metin-3); background: var(--kart); white-space: nowrap; }
.tablo tbody th { font-weight: 600; color: var(--metin); }
.tablo td { color: var(--metin-2); }
.tablo .rozet { vertical-align: middle; }
.tablo-karsilastir { min-width: 760px; }
.tablo-karsilastir thead th { font-family: var(--yazi-baslik); font-size: 16px; color: var(--metin); letter-spacing: var(--hs-4); word-spacing: var(--ws-4); }
.tablo-karsilastir th:first-child { position: sticky; left: 0; z-index: 1; background: var(--kart); width: 170px; box-shadow: 1px 0 0 var(--cizgi); }
.tablo td small { display: block; margin-top: 2px; font-size: 13px; color: var(--metin-3); }
.tablo tbody th small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--metin-3); }   /* satır başlığı alt notu */
.tablo :is(th, td).sayi b { font-weight: 600; color: var(--metin); }


/* ---------- 24. İç sayfa blokları ---------------------------------------- */
/* Ekran galerisi (ürün detayı): ekran karoları, beyaz-siyah dönüşümlü */
.galeri { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oluk); }
@media (min-width: 900px) {
  .galeri { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .g-12 { grid-column: span 12; } .g-7 { grid-column: span 7; } .g-5 { grid-column: span 5; } .g-6 { grid-column: span 6; } .g-4 { grid-column: span 4; }
}
.galeri + .altyazi { margin-top: 12px; }

/* Özellik tablosu (künye düzeni): grup adı solda, maddeler sağda */
.ozellik-tablo { padding: 0; }
.ozellik-satir { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px var(--kart-ic); }
.ozellik-satir + .ozellik-satir { border-top: 1px solid var(--cizgi); }
.ozellik-satir > summary, .ozellik-satir > h3 { display: flex; align-items: center; justify-content: flex-start; gap: 12px; font-family: var(--yazi-baslik); font-size: var(--t-4); font-weight: 650; color: var(--metin); letter-spacing: var(--hs-4); word-spacing: var(--ws-4); border: 0; min-height: 60px; }
.ozellik-satir > summary .ok-ikon { margin-left: auto; }
.ozellik-satir ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; padding-bottom: 14px; }
.ozellik-satir li { padding: 9px 0; border-top: 1px solid var(--cizgi); border-bottom: 0; }
@media (min-width: 900px) {
  .ozellik-satir { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; padding: 24px var(--kart-ic); }
  .ozellik-satir > summary { align-self: start; min-height: 0; padding: 0; }
  .ozellik-satir ul { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 0; }
  .ozellik-satir li:nth-child(-n+2) { border-top: 0; padding-top: 2px; }
}

/* "Bilmeniz gerekenler": ürünün bilerek yapmadıkları */
.sinir-kart { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.sinir-kart h3 { font-size: var(--t-3); letter-spacing: var(--hs-3); word-spacing: var(--ws-3); }
.sinir-kart > div > p { margin-top: 8px; color: var(--metin-2); font-size: 15px; max-width: 36ch; }
.sinir-liste { border-top: 1px solid var(--cizgi); }
.sinir-liste li { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--cizgi); font-size: 15px; line-height: 1.5; color: var(--metin-2); }
.sinir-liste b { color: var(--metin); font-weight: 600; }
.sinir-liste .ikon { width: 19px; height: 19px; margin-top: 2px; color: var(--uyari); }
@media (min-width: 900px) { .sinir-kart { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; } }

/* Görselsiz ürün kartı (QR Menü): solda vaat, sağda madde listesi */
.qr-kart { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.qr-sol { display: flex; flex-direction: column; align-items: flex-start; }
.qr-sol .baslik-2 { margin-top: 16px; }
.qr-sol .giris { margin-top: 16px; }
.qr-sol .dugmeler { margin-top: 26px; }
.qr-sol .kart-dip { margin-top: auto; width: 100%; }
.qr-sol .dugmeler + .kart-dip { margin-top: 28px; }
@media (min-width: 900px) { .qr-kart { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: stretch; } .qr-kart .vaat-liste li { padding: 20px 0; } }

/* Fiyat yan sütunundaki küçük kartlar (nasıl satın alınır, donanım uyumu) */
.fiyat-yan .kart > h3 + .sira { margin-top: 18px; }
.donanim-metin { margin-top: 8px; }
.donanim-cipler { margin-top: 16px; }

/* Diğer ürünler (çapraz bağlantı kartları) */
.diger-programlar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oluk); }
@media (min-width: 768px) { .diger-programlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .diger-programlar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Dört kart (üç program + E-Ticaret): üçlü ızgarada dördüncü kart alt satırda yalnız kalırdı (SPEC §1 "Ölü
   alan ve hiza"); orta genişlikte 2×2, geniş ekranda tek sıra */
@media (min-width: 1000px) { .diger-programlar-dort { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .diger-programlar-dort { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.diger-programlar a.kart { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-decoration: none; transition: border-color var(--sure-kisa); }
.diger-programlar a.kart:hover { border-color: var(--cizgi-2); }
.diger-programlar h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: var(--t-4); font-weight: 650; }
.diger-programlar p { color: var(--metin-2); font-size: 15px; }
.diger-programlar .metin-baglanti { margin-top: auto; padding-top: 6px; }

/* Not şeridi: kısa dürüstlük notu */
.not-serit {
  display: flex; gap: 12px; align-items: flex-start; margin-top: var(--oluk); padding: 16px 18px;
  border-radius: var(--r-levha); background: var(--ic-zemin); border: 1px solid var(--cizgi);
  font-size: 14.5px; color: var(--metin-2); line-height: 1.5;
}
.not-serit .ikon { width: 20px; height: 20px; margin-top: 1px; color: var(--metin); }
.not-serit b { color: var(--metin); font-weight: 600; }


/* ---------- 25. Uzun metin (.metin-akisi) --------------------------------
   Blog yazısı, kılavuz bölümü, yasal metin. Sıfırlamayı yerelde geri alır:
   dikey ritim, madde işaretleri, alıntı, kod, tablo, görsel altyazısı.     */
.metin-akisi { max-width: 70ch; font-size: 17px; line-height: 1.72; color: var(--metin-2); }
.metin-akisi > * + * { margin-top: 1.1em; }
.metin-akisi > :first-child { margin-top: 0; }
.metin-akisi > .ust-not + :is(h1, h2) { margin-top: .5em; }
.metin-akisi h2 { margin-top: 2.2em; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; letter-spacing: var(--hs-3); word-spacing: var(--ws-3); }
.metin-akisi h3 { margin-top: 1.9em; font-size: var(--t-4); line-height: 1.3; font-weight: 650; }
.metin-akisi h4 { margin-top: 1.6em; font-family: var(--yazi-govde); font-size: 17px; font-weight: 600; letter-spacing: 0; word-spacing: 0; }
.metin-akisi :is(h2, h3, h4) + * { margin-top: .6em; }
.metin-akisi strong, .metin-akisi b { color: var(--metin); font-weight: 600; }
.metin-akisi a { color: var(--metin); font-weight: 500; text-decoration-color: var(--cizgi-form); text-underline-offset: .25em; }
.metin-akisi a:hover { text-decoration-color: currentColor; }
.metin-akisi ul, .metin-akisi ol { padding-left: 1.3em; }
.metin-akisi ul { list-style: disc; }
.metin-akisi ol { list-style: decimal; }
.metin-akisi li + li { margin-top: .4em; }
.metin-akisi li::marker { color: var(--metin-3); }
.metin-akisi blockquote { padding: 4px 0 4px 20px; border-left: 2px solid var(--murekkep); font-family: var(--yazi-baslik); font-size: 1.2em; line-height: 1.5; color: var(--metin); letter-spacing: -.01em; word-spacing: .03em; }
.metin-akisi code { padding: .1em .35em; border-radius: 6px; background: var(--ic-zemin); border: 1px solid var(--cizgi); font: .88em/1.4 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: var(--metin); }
.metin-akisi pre { overflow-x: auto; padding: 16px 18px; border-radius: var(--r-levha); background: var(--murekkep); color: #f5f5f2; font: 14px/1.6 ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.metin-akisi pre code { padding: 0; background: none; border: 0; color: inherit; }
.metin-akisi hr { border: 0; height: 1px; background: var(--cizgi); margin-block: 2em; }
.metin-akisi img { border-radius: var(--r-levha); border: 1px solid var(--cizgi); }
.metin-akisi figure figcaption { margin-top: 10px; font-size: var(--t-altyazi); color: var(--metin-3); }
.metin-akisi table { width: 100%; border-collapse: collapse; font-size: 15px; }
.metin-akisi th, .metin-akisi td { padding: 10px 12px; border-bottom: 1px solid var(--cizgi); text-align: left; vertical-align: top; }
.metin-akisi th { color: var(--metin); font-weight: 600; background: var(--ic-zemin); }


/* ---------- 26. Formlar --------------------------------------------------
   Etiket her zaman görünür (yer tutucu etiket yerine geçmez). Kenar 3,3:1.
   Durumlar: :focus-visible, [aria-invalid="true"] (hata), .alan-basari,
   :disabled. Hata metni .alan-mesaj (aria-describedby ile bağlanır).       */
.form { display: grid; gap: 18px; }
.form-satir { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 640px) { .form-satir { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.alan { display: grid; gap: 7px; min-width: 0; }
.alan[hidden] { display: none; }   /* QR sihirbazındaki bağlama kodu alanı: yalnız adres kod isteyince açılır (grid UA [hidden]'ı ezer) */
.alan > label, .alan-etiket { font-size: 14px; font-weight: 600; color: var(--metin); }
.alan-ipucu { font-size: 13px; color: var(--metin-3); }
/* Temel alan stili :where() ile düşük özgüllükte: durum kuralları (hata, odak, pasif) onu her zaman ezer */
.girdi, .alan :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%; min-height: 48px; padding: 11px 14px; border-radius: var(--r-kucuk);
  border: 1px solid var(--cizgi-form); background: var(--kart); color: var(--metin);
  font-size: 16px; line-height: 1.4; transition: border-color var(--sure-kisa), box-shadow var(--sure-kisa);
}
.alan textarea { min-height: 128px; resize: vertical; }
.alan select { appearance: none; padding-right: 42px; background-image: linear-gradient(45deg, transparent 50%, var(--metin) 50%), linear-gradient(135deg, var(--metin) 50%, transparent 50%); background-position: calc(100% - 21px) 52%, calc(100% - 16px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.alan ::placeholder { color: var(--metin-3); opacity: 1; }
.alan :is(input, select, textarea):hover { border-color: var(--metin-2); }
.alan :is(input, select, textarea):focus-visible { outline: 0; border-color: var(--murekkep); box-shadow: 0 0 0 3px rgba(10,10,12,.14); }
.alan :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--hata); background: var(--hata-zemin); }
.alan :is(input, select, textarea)[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px rgba(180,35,24,.18); }
.alan-basari :is(input, select, textarea) { border-color: var(--basari); }
.alan :is(input, select, textarea):disabled { background: var(--ic-zemin); color: var(--metin-3); border-color: var(--cizgi-2); cursor: not-allowed; }
.alan-mesaj { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; }
.alan-mesaj .ikon { width: 16px; height: 16px; stroke-width: 2; }
.alan-mesaj.hata { color: var(--hata); }
.alan-mesaj.basari { color: var(--basari); }

/* Onay kutusu ve seçenek düğmesi: 44 px dokunma satırı, 20 px kutu */
.secim { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; font-size: 15px; line-height: 1.45; color: var(--metin-2); cursor: pointer; }
.secim input { appearance: none; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--cizgi-form); background: var(--kart); border-radius: 6px; cursor: pointer; transition: background-color var(--sure-kisa), border-color var(--sure-kisa); }
.secim input[type="radio"] { border-radius: 50%; }
.secim input:checked { background: var(--murekkep); border-color: var(--murekkep); }
.secim input[type="checkbox"]:checked::after { content: ''; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.secim input[type="radio"]:checked { background: var(--kart); border: 6px solid var(--murekkep); }
.secim input:focus-visible { outline: 2px solid var(--odak); outline-offset: 2px; }
.secim input:disabled { background: var(--ic-zemin); border-color: var(--cizgi-2); cursor: not-allowed; }
.secim:has(input:disabled) { color: var(--metin-3); cursor: not-allowed; }
.secim a { color: var(--metin); font-weight: 500; }
.buton:disabled, .buton[aria-disabled="true"] { opacity: .45; pointer-events: none; }


/* ---------- 27. Uyarı kutuları ------------------------------------------- */
.uyari-kutu { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-levha); border: 1px solid var(--cizgi); background: var(--ic-zemin); font-size: 15px; line-height: 1.5; color: var(--metin); }
.uyari-kutu .ikon { width: 20px; height: 20px; margin-top: 1px; }
.uyari-kutu b { font-weight: 600; }
.uyari-kutu p { color: var(--metin-2); }
.uyari-kutu-basari { background: var(--basari-zemin); border-color: var(--basari-cizgi); }
.uyari-kutu-basari .ikon { color: var(--basari); }
.uyari-kutu-hata { background: var(--hata-zemin); border-color: var(--hata-cizgi); }
.uyari-kutu-hata .ikon { color: var(--hata); }
.uyari-kutu-uyari { background: var(--uyari-zemin); border-color: var(--uyari-cizgi); }
.uyari-kutu-uyari .ikon { color: var(--uyari); }


/* ---------- 28. Hareket ---------------------------------------------------
   İçerik varsayılan olarak GÖRÜNÜR. Açılış animasyonu yalnız CSS; kaydırınca
   belirme yalnız JS varken ve hareket azaltılmamışken çalışır. Azaltılmış
   harekette hiçbir şey hareket etmez.                                      */
@media (prefers-reduced-motion: no-preference) {
  .acilis { animation: acilis .9s var(--gecis) both; }
  .acilis-2 { animation-delay: .07s; }
  .acilis-3 { animation-delay: .14s; }
  .acilis-4 { animation-delay: .21s; }
  @keyframes acilis { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .js [data-belir]:not(.gorundu) { opacity: 0; transform: translateY(18px); }
  .js [data-belir] { transition: opacity .8s var(--gecis), transform .8s var(--gecis); }
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}



/* ==========================================================================
   İÇ SAYFALAR KATMANI (29–45)
   Blog, yasal metin, iletişim, giriş/kayıt, satın alma, müşteri paneli,
   Bilgi Bankası, hata ve tek mesajlı sayfalar. Aynı tokenlar, aynı kart dili:
   kağıt zemin, saç çizgili beyaz levha, karar anında siyah kart.
   Örnekler: bilesenler.html (SPEC §8.11–8.21).
   Ad çakışması yok: anasayfa.css illüstrasyonlarının .ilerleme, .odeme,
   .tamam, .kurulum-liste adları burada ÇIPLAK kullanılmaz.

   29. Ek tokenlar ve çizgi ikon maskeleri
   30. Sayfa başlık kartı ve sayfa yolu (ol yapısı)
   31. Sekmeler, haplar, sayfalama
   32. Rozet çeşitleri, sayı rozeti, avatar, bilgi ipucu
   33. Flash bildirimi ve uyarı kutusu ekleri
   34. Kart yardımcıları: kart başlığı, bilgi listesi, anahtar kutusu, boş durum, iskelet
   35. Tablo ekleri: veri tablosu, gömülü tablo, mobilde yığılan tablo, özellik tablosu
   36. Uzun metin ekleri: blog gövdesi tablosu, ön söz, yasal metin
   37. Blog: liste kartı, öne çıkan yazı, yazı düzeni, içindekiler, yazı sonu CTA
   38. Yan menü ve yasal metin düzeni
   39. Form ekleri: zorunlu işareti, girdi grubu, arama, seçim kartı, yükleniyor
   40. Giriş / kayıt (kimlik) ve iletişim düzeni
   41. Satın alma sihirbazı: adım göstergesi, adres, paket özeti, toplam, ödeme kabı
   42. Müşteri paneli: kabuk, menü, üst çubuk, özet, sistem, kurulum, yazışma
   43. Bilgi Bankası: yerleşim, kenar çubuğu, makale, kv-* bileşenleri, dizin
   44. Hata sayfaları ve tek mesajlı sayfa
   45. İç sayfa hareketleri
   ========================================================================== */


/* ---------- 29. Ek tokenlar ve çizgi ikon maskeleri ----------------------
   CSS'in çizdiği küçük işaretler (tik, ok, çarpı, ampul, uyarı) satır içi SVG
   ile aynı çizgi dilindedir; dış istek yoktur (data URI). Maske olanlar
   currentColor'la boyanır; *-beyaz / *-murekkep olanlar zemin görselidir.   */
:root {
  --r-balon: 18px;           /* destek yazışması balonu */
  --panel-yan: 248px;        /* müşteri paneli kenar menüsü */
  --kv-yan: 236px;           /* Bilgi Bankası kenar çubuğu */
  --i-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='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --i-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 6 6 6-6 6'/%3E%3C/svg%3E");
  --i-kapat: 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.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E");
  --i-cizgi: 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.2' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E");
  --i-ampul: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17.5h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.7 10.7c.5.4.7 1 .7 1.6v.7h6v-.7c0-.6.2-1.2.7-1.6A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E");
  --i-uyari: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.8 19.5h18.4L12 4Z'/%3E%3Cpath d='M12 10v4.2M12 16.9h.01'/%3E%3C/svg%3E");
  --i-tik-beyaz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --i-tik-murekkep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0c' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --i-kapat-beyaz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M7.5 7.5l9 9M16.5 7.5l-9 9'/%3E%3C/svg%3E");
  --i-ara-gri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366666e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E");
}
@media (min-width: 1100px) { :root { --panel-yan: 272px; } }
@media (min-width: 1200px) { :root { --kv-yan: 268px; } }
/* Siyah bağlamda uyarı/hata zeminleri de koyulaşır (açık zemin + açık metin olmasın) */
.kart-siyah, .zemin-siyah {
  --uyari-zemin: rgba(247,178,103,.1);  --uyari-cizgi: rgba(247,178,103,.3);
  --hata-zemin: rgba(255,139,126,.1);   --hata-cizgi: rgba(255,139,126,.32);
}


/* ---------- 30. Sayfa başlık kartı ve sayfa yolu ------------------------
   .sayfa-bas       iç sayfa başlığı: yol, üst etiket, h1, açıklama, meta.
                    ≥900 px: başlık 7 sütun, açıklama 5 sütun (alttan hizalı).
   .sayfa-bas-dar   tek sütun (blog yazısı, yasal, kılavuz dizini)
   .sayfa-meta      başlık altı bilgi satırı (tarih, okuma süresi, güncelleme)
   .sayfa-bas-alt   başlık kartının alt şeridi (haplar, çipler)
   Ortalı kahraman gerekiyorsa mevcut .sayfa-sahne kullanılır (§13).        */
.sayfa-bas { display: flex; flex-direction: column; align-items: flex-start; }
.sayfa-bas > .yol { margin-top: -10px; }
.sayfa-bas-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; width: 100%; margin-top: clamp(14px, 2vw, 28px); }
.sayfa-bas-izgara > * { min-width: 0; }
/* Yolsuz başlık kartı (blog listesi): ızgara kartın tepesinden başlar (maket: style="margin-top:0") */
.sayfa-bas > .sayfa-bas-izgara:first-child { margin-top: 0; }
.sayfa-bas-metin { display: flex; flex-direction: column; align-items: flex-start; }
.sayfa-bas .ust-not + :is(h1, h2) { margin-top: 14px; }
.sayfa-bas :is(.baslik-1, .baslik-2) { max-width: 17ch; }
.sayfa-bas .giris { max-width: 52ch; }
@media (min-width: 900px) {
  .sayfa-bas-izgara { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 4vw, 64px); align-items: end; }
  .sayfa-bas-dar .sayfa-bas-izgara { grid-template-columns: minmax(0, 1fr); }
}
.sayfa-bas-dar .giris { max-width: 62ch; }
.sayfa-bas-alt { width: 100%; margin-top: clamp(22px, 2.6vw, 36px); padding-top: 18px; border-top: 1px solid var(--cizgi); }
.sayfa-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; width: 100%;
  margin-top: clamp(22px, 2.6vw, 36px); padding-top: 16px; border-top: 1px solid var(--cizgi);
  font-size: 14px; color: var(--metin-2);
}
.sayfa-meta > * { display: inline-flex; align-items: center; gap: 8px; }
.sayfa-meta .ikon { width: 16px; height: 16px; stroke-width: 2; color: var(--metin-3); }
.sayfa-meta b { font-weight: 600; color: var(--metin); }

/* Sayfa yolu: <nav class="yol"><ol><li>…</li></ol></nav> (BreadcrumbList ile birebir).
   Ayraç CSS'ten gelir; son öğe uzun başlıkta tek satıra kısalır. Eski a/ikon/span yapısı da çalışır. */
.yol ol { display: flex; flex-wrap: nowrap; align-items: center; min-width: 0; max-width: 100%; }
.yol li { display: inline-flex; align-items: center; flex: none; min-width: 0; }
.yol li:last-child { flex: 0 1 auto; }
.yol li + li::before {
  content: ''; flex: none; width: 14px; height: 14px; margin: 0 6px; background: currentColor; opacity: .75;
  -webkit-mask: var(--i-sag) center / contain no-repeat; mask: var(--i-sag) center / contain no-repeat;
}
.yol li > a, .yol li > [aria-current] { padding-inline: 0; }
.yol li > [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ---------- 31. Sekmeler, haplar, sayfalama ------------------------------
   .sekmeler  alt çizgili sekme şeridi; sunucu tarafı bağlantılardır
              (aria-current="page"). Mobilde yatay kayar, sayfa taşmaz.
   .haplar    filtre hapları (blog kategorisi): bağlantı (aria-current) ya da
              düğme (aria-pressed). Seçili hap mürekkep dolgu.
   .syf       sayfalama (sayfalama.blade.php sınıfları korunur). <640 px'te
              yalnız Önceki · geçerli sayfa / toplam · Sonraki görünür.       */
.sekmeler {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--cizgi);
}
.sekmeler::-webkit-scrollbar { display: none; }
.sekmeler :is(a, button) {
  position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 48px; padding: 0 14px; font-size: 15px; font-weight: 500; color: var(--metin-2);
  text-decoration: none; white-space: nowrap; transition: color var(--sure-kisa);
}
.sekmeler :is(a, button):hover { color: var(--metin); }
.sekmeler :is([aria-current="page"], [aria-selected="true"]) { color: var(--metin); font-weight: 600; }
.sekmeler :is([aria-current="page"], [aria-selected="true"])::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: var(--murekkep);
}
.sekmeler :focus-visible { outline-offset: -3px; }

.haplar { display: flex; flex-wrap: wrap; gap: 8px; }
.haplar-kay {                      /* mobilde tek satır, yatay kayar */
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(-1 * var(--kenar)); padding: 2px var(--kenar) 4px;
}
.haplar-kay::-webkit-scrollbar { display: none; }
.kart .haplar-kay { margin-inline: calc(-1 * var(--kart-ic)); padding-inline: var(--kart-ic); }
@media (min-width: 768px) { .haplar-kay, .kart .haplar-kay { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0; } }
.hap {
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 0 16px;
  border-radius: var(--r-hap); border: 1px solid var(--cizgi-2); background: var(--kart);
  font-size: 14.5px; font-weight: 500; color: var(--metin-2); text-decoration: none; white-space: nowrap;
  transition: border-color var(--sure-kisa), color var(--sure-kisa), background-color var(--sure-kisa);
}
.hap:hover { border-color: var(--metin); color: var(--metin); }
.hap small { font-size: 12.5px; font-weight: 500; color: var(--metin-3); font-variant-numeric: tabular-nums; }
.hap:is([aria-current="page"], [aria-pressed="true"]) { background: var(--murekkep); border-color: var(--murekkep); color: #fff; }
.hap:is([aria-current="page"], [aria-pressed="true"]) small { color: rgba(255,255,255,.72); }
.kart-siyah .hap:is([aria-current="page"], [aria-pressed="true"]) { background: #fff; border-color: #fff; color: var(--murekkep); }
.hap:focus-visible, .syf-adim:focus-visible, .yan-menu a:focus-visible { border-radius: var(--r-hap); }

.syf { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.syf-adim {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 14px;
  border-radius: var(--r-hap); border: 1px solid var(--cizgi); background: var(--kart);
  font: 600 15px/1 var(--yazi-govde); font-variant-numeric: tabular-nums; color: var(--metin-2); text-decoration: none;
  transition: border-color var(--sure-kisa), color var(--sure-kisa);
}
a.syf-adim:hover { border-color: var(--metin); color: var(--metin); }
.syf-adim .ikon { width: 17px; height: 17px; stroke-width: 2; }
.syf-aktif { background: var(--murekkep); border-color: var(--murekkep); color: #fff; }
.syf-pasif { background: transparent; border-color: transparent; color: var(--metin-3); }
.syf-ok.syf-pasif { opacity: .5; }
.syf-toplam { display: none; font-size: 14px; color: var(--metin-3); font-variant-numeric: tabular-nums; }
@media (max-width: 639px) {
  .syf { flex-wrap: nowrap; }
  .syf > :not(.syf-ok):not(.syf-aktif):not(.syf-toplam) { display: none; }
  .syf-toplam { display: inline; }
  .syf > .syf-ok:first-child { margin-right: auto; }
  .syf > .syf-ok:last-child { margin-left: auto; }
}


/* ---------- 32. Rozet çeşitleri, sayı rozeti, avatar, bilgi ipucu --------
   Durum rozetleri İŞLEVSEL renktedir ve durum metinle de söylenir. Noktanın
   biçimi de farklıdır (renk körlüğü): başarı dolu, uyarı halka, hata kare,
   süreç nabız atan dolu, pasif çizgi. Durum eşlemesi SPEC §8.14'te.        */
.rozet-basari { color: var(--basari); background: var(--basari-zemin); border-color: var(--basari-cizgi); }
.rozet-uyari  { color: var(--uyari);  background: var(--uyari-zemin);  border-color: var(--uyari-cizgi); }
.rozet-uyari::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.rozet-hata   { color: var(--hata);   background: var(--hata-zemin);   border-color: var(--hata-cizgi); }
.rozet-hata::before { border-radius: 1.5px; }
.rozet-surec  { color: #fff; background: var(--murekkep); border-color: var(--murekkep); }
.kart-siyah .rozet-surec, .zemin-siyah .rozet-surec { color: var(--murekkep); background: #fff; border-color: #fff; }
.rozet-pasif  { color: var(--metin-3); background: var(--ic-zemin); border-color: var(--cizgi); }
.rozet-pasif::before { width: 8px; height: 1.5px; border-radius: 1px; }

/* Sayı rozeti: menüde açık talep sayısı, sekmede adet */
.rozet-sayi {
  display: inline-grid; place-items: center; flex: none; min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: var(--r-hap); background: var(--murekkep); color: #fff;
  font: 600 12px/1 var(--yazi-govde); font-variant-numeric: tabular-nums;
}
.rozet-sayi-acik { background: var(--ic-zemin); color: var(--metin-2); box-shadow: inset 0 0 0 1px var(--cizgi); }
.kart-siyah .rozet-sayi { background: #fff; color: var(--murekkep); }

/* Avatar: baş harfler (fotoğraf yok) */
.avatar {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--murekkep); color: #fff; font: 600 13px/1 var(--yazi-govde); letter-spacing: .02em;
}
.avatar-kucuk { width: 26px; height: 26px; font-size: 10.5px; }
.avatar-acik { background: var(--kart); color: var(--metin); box-shadow: inset 0 0 0 1px var(--cizgi-2); }

/* Bilgi ipucu (tooltip): üzerine gelince ve klavye odağında açılır; Esc odağı
   bırakır (site.js). Balon ipucunun içindedir: fare balona geçince açık kalır.
   Kart kenarında kesilmesin diye ipucu içeren kart taşmaya izin verir.     */
.ipucu { position: relative; display: inline-flex; vertical-align: middle; }
.ipucu-dugme {
  position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  color: var(--metin-3); transition: color var(--sure-kisa);
}
.ipucu-dugme::after { content: ''; position: absolute; inset: -10px; }      /* 44 px dokunma alanı */
.ipucu-dugme:hover, .ipucu:focus-within .ipucu-dugme { color: var(--metin); }
.ipucu-dugme .ikon { width: 18px; height: 18px; stroke-width: 2; }
.ipucu-balon {
  position: absolute; z-index: 40; left: 50%; bottom: calc(100% + 10px); display: none;
  width: max-content; max-width: min(280px, 72vw); padding: 10px 12px; border-radius: 10px;
  background: var(--murekkep); color: #f5f5f2; box-shadow: var(--golge-levha);
  font: 500 13.5px/1.45 var(--yazi-govde); letter-spacing: 0; word-spacing: 0; text-align: left; white-space: normal; transform: translateX(-50%);
}
.ipucu-balon::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }   /* fare köprüsü */
.ipucu-balon::after {
  content: ''; position: absolute; left: 50%; top: 100%; margin-left: -6px;
  border: 6px solid transparent; border-top-color: var(--murekkep);
}
.ipucu:hover .ipucu-balon, .ipucu:focus-within .ipucu-balon { display: block; }
.ipucu-sag .ipucu-balon { left: auto; right: -8px; transform: none; }
.ipucu-sag .ipucu-balon::after { left: auto; right: 14px; }
.ipucu-sol .ipucu-balon { left: -8px; transform: none; }
.ipucu-sol .ipucu-balon::after { left: 20px; }
.kart-siyah .ipucu-balon { background: #fff; color: var(--murekkep); }
.kart-siyah .ipucu-balon::after { border-top-color: #fff; }
.kart:has(.ipucu):not(.kart-isik) { overflow: visible; }


/* ---------- 33. Flash bildirimi ve uyarı kutusu ekleri -------------------
   .flash       sayfa ya da form sonucu (session flash): beyaz kart + renkli
                ikon diski. İçerik alanının en üstünde .flash-alan içinde.
                Başarıda role="status", hatada role="alert".
   .uyari-kutu  (§27) içerik içi bilgi/uyarı kutusudur; ikisi karışmaz.     */
.flash-alan { display: grid; gap: 10px; margin-bottom: var(--oluk); }
.flash {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px;
  border: 1px solid var(--cizgi); border-radius: 16px; background: var(--kart); box-shadow: var(--golge-1);
  font-size: 15px; line-height: 1.5; color: var(--metin);
}
.flash > div { min-width: 0; }
.flash-ikon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--murekkep); color: #fff; }
.flash-ikon .ikon { width: 16px; height: 16px; stroke-width: 2.4; }
.flash b { display: block; font-weight: 600; }
.flash p { margin-top: 2px; font-size: 14.5px; color: var(--metin-2); }
.flash .metin-baglanti { min-height: 36px; font-size: 14.5px; }
.flash-basari { border-color: var(--basari-cizgi); }
.flash-basari .flash-ikon { background: var(--basari); }
.flash-hata { border-color: var(--hata-cizgi); }
.flash-hata .flash-ikon { background: var(--hata); }
.flash-uyari { border-color: var(--uyari-cizgi); }
.flash-uyari .flash-ikon { background: var(--uyari); }

.uyari-kutu > div { min-width: 0; }
.uyari-kutu p + p { margin-top: 6px; }
.uyari-kutu .metin-baglanti { min-height: 36px; font-size: 14.5px; }
.kart-siyah .uyari-kutu { background: rgba(255,255,255,.05); }


/* ---------- 34. Kart yardımcıları ----------------------------------------
   .kart-ust        kart başlığı satırı: başlık (+ alt satır) solda, eylem sağda
   .bilgi-listesi   anahtar–değer satırları (dl > div > dt + dd); ≥640 yan yana
   .anahtar         lisans anahtarı / geçici şifre gibi kopyalanacak değer
   .bos-durum       veri yokken: ikon karosu, başlık, cümle, eylem
   .iskelet         yükleniyor yer tutucusu (satır); .yukleniyor dönen halka  */
.kart-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 18px; }
.kart-ust > div { min-width: 0; }
.kart-ust :is(h2, h3) { font-size: var(--t-4); font-weight: 650; line-height: 1.25; letter-spacing: var(--hs-4); word-spacing: var(--ws-4); }
.kart .kart-ust :is(h2, h3) + p { margin-top: 3px; font-size: 14px; color: var(--metin-3); }
.kart-ust .dugmeler { gap: 8px; }

.bilgi-listesi { border-top: 1px solid var(--cizgi); }
.bilgi-listesi > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--cizgi); }
.bilgi-listesi dt { font-size: 13px; color: var(--metin-3); }
.bilgi-listesi dd { min-width: 0; font-size: 15.5px; line-height: 1.5; color: var(--metin); overflow-wrap: anywhere; }
.bilgi-listesi dd small { display: block; font-size: 13px; color: var(--metin-3); }
.bilgi-listesi dd a { font-weight: 500; text-decoration-color: var(--cizgi-form); }
.bilgi-listesi dd a .ikon { display: inline-block; width: 14px; height: 14px; margin-left: 4px; vertical-align: -1px; stroke-width: 2; }
.bilgi-listesi code, .anahtar { font: 500 13.5px/1.55 ui-monospace, 'Cascadia Mono', Consolas, monospace; }
@media (min-width: 640px) {
  .bilgi-listesi > div { grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: baseline; }
}
.bilgi-listesi-dikey > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.anahtar {
  display: block; padding: 12px 14px; border-radius: var(--r-kucuk); border: 1px solid var(--cizgi);
  background: var(--ic-zemin); color: var(--metin); word-break: break-all; user-select: all;
}
.kart-siyah .anahtar { background: rgba(255,255,255,.06); }

.bos-durum {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(40px, 6vw, 72px) var(--kart-ic); border-style: dashed; border-color: var(--cizgi-2);
}
.bos-durum .ikon-karo { width: 56px; height: 56px; border-radius: 16px; }
.bos-durum .ikon-karo .ikon { width: 24px; height: 24px; }
.bos-durum :is(h2, h3) { margin-top: 20px; font-size: var(--t-4); font-weight: 650; }
.kart.bos-durum :is(h2, h3) + p { margin-top: 8px; }
.bos-durum p { max-width: 46ch; color: var(--metin-2); }
.bos-durum .dugmeler { margin-top: 24px; justify-content: center; }

.iskelet {
  display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, #ecebe6 0 35%, #f6f5f1 50%, #ecebe6 65% 100%) 0 0 / 300% 100%;
}
.iskelet + .iskelet { margin-top: 10px; }
.yukleniyor {
  display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px;
  border: 2px solid currentColor; border-right-color: transparent; animation: donus .75s linear infinite;
}


/* ---------- 35. Tablo ekleri ---------------------------------------------
   .tablo-veri        panel veri tablosu: sıkı satır, orta hizalı hücre
   .sayi / .eylem     sağa hizalı tutar ve eylem sütunları
   .tablo-kap-gomulu  tablo kartın içinde kenardan kenara (kart başlığının altında)
   .tablo-yigin       <640 px'te her satır bir karta döner: hücre etiketini
                      data-etiket="Tutar" özniteliğinden alır (thead gizlenir,
                      ekran okuyucu için tablo anlamı korunur)
   .tablo-ozellik     özellik / karşılaştırma listesi: .var (tik) ve .yok (çizgi)
                      hücreleri, .tablo-grup ara başlık satırı                  */
.tablo-veri { font-size: 14.5px; }
.tablo-veri :is(th, td) { padding: 12px 16px; vertical-align: middle; }
/* Başlık satırı alt çizgisi (çekirdekteki tr:last-child kuralı thead satırını da sıfırlıyordu) */
.tablo.tablo-veri thead tr > *, .tablo.tablo-ozellik thead tr > * { border-bottom: 1px solid var(--cizgi-2); }
.tablo-veri tbody tr { transition: background-color var(--sure-kisa); }
.tablo-veri tbody tr:hover { background: #fcfbf8; }
.tablo :is(th, td).sayi { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tablo :is(th, td).eylem { text-align: right; white-space: nowrap; }
.tablo td a:not(.buton) { color: var(--metin); font-weight: 500; text-decoration-color: var(--cizgi-form); }
.tablo td a:not(.buton):hover { text-decoration-color: currentColor; }
.tablo td a .ikon { display: inline-block; width: 14px; height: 14px; margin-left: 3px; vertical-align: -2px; stroke-width: 2; }
.tablo code { font: 500 13px/1.4 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: var(--metin); }
.tablo-kap-gomulu {
  margin: 0 calc(-1 * var(--kart-ic)) calc(-1 * var(--kart-ic));
  border: 0; border-top: 1px solid var(--cizgi); border-radius: 0;
}
.tablo-kap-gomulu .tablo :is(th, td):first-child { padding-left: var(--kart-ic); }
.tablo-kap-gomulu .tablo :is(th, td):last-child { padding-right: var(--kart-ic); }
@media (max-width: 639px) {
  .tablo-yigin thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tablo-yigin, .tablo-yigin tbody, .tablo-yigin tr { display: block; width: 100%; }
  .tablo-yigin tr { padding: 14px 18px; border-bottom: 1px solid var(--cizgi); }
  .tablo-yigin tbody tr:last-child { border-bottom: 0; }
  .tablo-yigin tbody tr:hover { background: none; }
  .tablo-yigin :is(th, td) {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 5px 0 !important; border: 0; text-align: right;
  }
  .tablo-yigin :is(th, td)::before { content: attr(data-etiket); flex: none; font-size: 13px; font-weight: 500; color: var(--metin-3); text-align: left; }
  .tablo-yigin tbody th { justify-content: flex-start; padding-bottom: 8px !important; font-size: 16px; text-align: left; }
  .tablo-yigin tbody th::before { content: none; }
  .tablo-yigin tbody th { flex-wrap: wrap; row-gap: 2px; }
  .tablo-yigin tbody th small { flex-basis: 100%; }
  .tablo-yigin td.eylem { justify-content: flex-end; padding-top: 8px !important; }
  .tablo-yigin td.eylem::before { content: none; }
  .tablo-kap-gomulu .tablo-yigin tr { padding-inline: var(--kart-ic); }
  .tablo-kap:has(.tablo-yigin) { background: var(--kart); }
}
.tablo-ozellik :is(thead th, td):not(:first-child) { text-align: center; }
.tablo-ozellik thead th { padding-top: 18px; padding-bottom: 16px; font-family: var(--yazi-baslik); font-size: 16px; font-weight: 650; color: var(--metin); letter-spacing: var(--hs-4); word-spacing: var(--ws-4); white-space: normal; }
.tablo-ozellik thead th small { display: block; margin-top: 2px; font-family: var(--yazi-govde); font-size: 13px; font-weight: 400; letter-spacing: 0; word-spacing: 0; color: var(--metin-3); }
.tablo :is(td, th).var, .tablo :is(td, th).yok { color: var(--metin); }
.tablo :is(td, th).var::before, .tablo :is(td, th).yok::before {
  content: ''; display: inline-block; width: 18px; height: 18px; vertical-align: -4px; background: currentColor;
  -webkit-mask: var(--i-tik) center / contain no-repeat; mask: var(--i-tik) center / contain no-repeat;
}
.tablo :is(td, th).yok { color: var(--metin-3); }
.tablo :is(td, th).yok::before { -webkit-mask-image: var(--i-cizgi); mask-image: var(--i-cizgi); }
.tablo .tablo-grup th {
  padding-top: 20px; padding-bottom: 8px; background: var(--ic-zemin);
  font-family: var(--yazi-govde); font-size: var(--t-altyazi); font-weight: 600; letter-spacing: 0; word-spacing: 0; color: var(--metin-2);
}
.tablo-ozellik .vurgu { background: #fcfbf8; }
@media (max-width: 639px) {
  .tablo-ozellik :is(th, td) { padding: 12px 12px; }
  .tablo-ozellik td { white-space: nowrap; }
}
.tablo-ozellik thead .vurgu { box-shadow: inset 0 2px 0 var(--murekkep); }


/* ---------- 36. Uzun metin ekleri ----------------------------------------
   Blog gövdeleri (database/seeders/blog/*.html) ham HTML'dir: thead'siz
   tablo, strong, em, blockquote, code. Yasal metin daha sıkı ölçekle yazılır. */
.metin-akisi :is(h2, h3) { scroll-margin-top: calc(var(--menu-yuk) + 24px); }
.metin-akisi em { font-style: italic; }
.metin-onsoz > p:first-child { font-size: 1.12em; line-height: 1.62; color: var(--metin); }
.metin-akisi figure img { width: 100%; }
.metin-akisi table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--cizgi); border-radius: var(--r-levha); line-height: 1.5; }
.metin-akisi :is(th, td) { padding: 12px 14px; overflow-wrap: break-word; }
.metin-akisi td { color: var(--metin-2); }
.metin-akisi tbody:last-child > tr:last-child > * { border-bottom: 0; }
.metin-akisi table > :first-child > tr:first-child > :first-child { border-top-left-radius: calc(var(--r-levha) - 1px); }
.metin-akisi table > :first-child > tr:first-child > :last-child { border-top-right-radius: calc(var(--r-levha) - 1px); }
.metin-akisi table > :last-child > tr:last-child > :first-child { border-bottom-left-radius: calc(var(--r-levha) - 1px); }
.metin-akisi table > :last-child > tr:last-child > :last-child { border-bottom-right-radius: calc(var(--r-levha) - 1px); }
/* Telefonda tablo kendi içinde kayar: içerik dar ise kutu içeriğe oturur, genişse %100 + yatay kaydırma */
@media (max-width: 639px) {
  .metin-akisi table { display: block; width: fit-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 14px; }
  .metin-akisi :is(th, td) { padding: 9px 10px; }
}
.metin-akisi kbd {
  padding: .05em .4em; border-radius: 5px; border: 1px solid var(--cizgi-2); border-bottom-width: 2px; background: var(--kart);
  font: 500 .85em/1.4 var(--yazi-govde); color: var(--metin);
}
/* Yasal metin: madde başlıkları küçük, gövde 16 px */
.metin-yasal { font-size: 16px; line-height: 1.72; }
.metin-yasal h2 { margin-top: 2em; font-size: var(--t-4); font-weight: 650; line-height: 1.3; letter-spacing: var(--hs-4); word-spacing: var(--ws-4); }
.metin-yasal h3 { font-size: 16.5px; }
.metin-yasal > h2:first-child { margin-top: 0; }


/* ---------- 37. Blog ------------------------------------------------------
   Liste:  .blog-izgara > a.kart.blog-kart (.blog-kapak + .blog-kart-govde)
           ilk yazı .blog-kart-one (≥900 px yatay). Kapaklar (1200×630, eski
           mor tonlu) gri tona çevrilir: sayfa siyah-beyaz kalır. Yeni kapak
           üretilince filtre kaldırılabilir (SPEC §8.16).
   Yazı:   .yazi-bas (başlık kartı + kapak) → .yazi-izgara (gövde kartı +
           sağ ray: içindekiler, küçük CTA) → .yazi-cta (siyah) → ilgili.    */
.blog-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oluk); }
/* Liste sayfası: başlık kartı, ızgara ve sayfalama aynı .sahne kabında oluk aralığıyla dizilir */
.sayfa-bas + .blog-izgara, .blog-izgara + .syf { margin-top: var(--oluk); }
@media (min-width: 640px)  { .blog-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .blog-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.blog-kart { display: flex; flex-direction: column; padding: 0; color: inherit; text-decoration: none; transition: border-color var(--sure-kisa); }
.blog-kart:hover { border-color: var(--cizgi-2); }
.blog-kapak { position: relative; aspect-ratio: 1200 / 630; overflow: hidden; background: var(--murekkep); border-bottom: 1px solid var(--cizgi); }
.blog-kapak img, .yazi-kapak img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.blog-kapak img { transition: transform .6s var(--gecis); }
.blog-kart:hover .blog-kapak img { transform: scale(1.025); }
.blog-kart-govde { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1; padding: 20px 22px 22px; }
.blog-kart-baslik {
  font-family: var(--yazi-baslik); font-size: var(--t-4); font-weight: 650; line-height: 1.25;
  letter-spacing: var(--hs-4); word-spacing: var(--ws-4); color: var(--metin); text-wrap: balance;
}
.blog-kart:hover .blog-kart-baslik { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.blog-ozet {
  font-size: 15px; line-height: 1.55; color: var(--metin-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--metin-3); font-variant-numeric: tabular-nums; }
.blog-meta > * + *::before { content: ''; display: inline-block; width: 3px; height: 3px; margin: 0 9px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.blog-kart-one { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .blog-kart-one { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .blog-kart-one .blog-kapak { border-bottom: 0; border-right: 1px solid var(--cizgi); }
  .blog-kart-one .blog-kart-govde { justify-content: flex-end; gap: 14px; padding: clamp(28px, 3vw, 44px); }
  .blog-kart-one .blog-kart-baslik { font-size: var(--t-3); font-weight: 600; line-height: 1.1; letter-spacing: var(--hs-3); word-spacing: var(--ws-3); }
  .blog-kart-one .blog-ozet { font-size: 16px; -webkit-line-clamp: 4; line-clamp: 4; }
  .blog-kart-one .blog-meta { margin-top: 6px; }
}
.blog-bos { grid-column: 1 / -1; }

/* Yazı başlığı: metin solda, kapak sağda (≥1000 px) */
.yazi-bas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.yazi-bas-metin { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
/* align-items:flex-start yolu içerik genişliğine büyütür: uzun yazı başlığında kart dışına taşar ve son
   öğenin "…" kısalması hiç devreye girmez. Yol en çok kart genişliğinde kalır. */
.yazi-bas-metin > .yol { max-width: 100%; }
/* Sayfa yolunun altındaki kategori rozeti (maket: style="margin-top:14px") */
.yazi-bas-metin > .yol + .ust-not { margin-top: 14px; }
.baslik-yazi {
  margin-top: 14px; max-width: 22ch; font-size: clamp(1.875rem, 1.3rem + 2.3vw, 3.25rem); line-height: 1.06;
  letter-spacing: var(--hs-2); word-spacing: var(--ws-2);
}
.yazi-bas .giris { margin-top: 18px; }
.yazi-kapak .levha { background: var(--murekkep); }
.yazi-kapak img { aspect-ratio: 1200 / 630; }
@media (min-width: 1000px) {
  .yazi-bas { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 56px); align-items: end; }
}

/* Gövde + sağ ray. DOM'da ray önce gelir (mobilde içindekiler metnin üstünde) */
.yazi-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oluk); align-items: start; margin-top: var(--oluk); }
.yazi-yan { display: grid; gap: var(--oluk); min-width: 0; }
.yazi-yan-cta { display: none; }
@media (min-width: 1100px) {
  .yazi-izgara { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  /* Ray görünüme sığar: 10+ başlıklı yazıda içindekiler + paket kartı görünümden uzundu ve kartın
     düğmesi yapışkan rayda hiç ekrana girmiyordu. İçindekiler kendi içinde kayar, paket kartı sabit
     kalır; kısa yazıda (ray sığıyorsa) görünüm değişmez. */
  .yazi-yan {
    order: 2; position: sticky; top: calc(var(--menu-yuk) + 16px);
    display: flex; flex-direction: column; max-height: calc(100vh - var(--menu-yuk) - 32px);
  }
  .yazi-yan > * { flex: none; }
  .yazi-yan > .icindekiler { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .yazi-yan-cta { display: block; }
}
.yazi-govde { min-width: 0; }
.yazi-govde .metin-akisi { margin-inline: auto; }

/* İçindekiler: <details class="kart icindekiler" data-mobil-kapali open>.
   Mobilde kapalı akordeon; ≥768 px açık liste (tablette iki sütun). */
.icindekiler { padding: 0 var(--kart-ic); }
.icindekiler > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px;
  cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; color: var(--metin);
}
.icindekiler > summary::-webkit-details-marker { display: none; }
.icindekiler > summary .ok-ikon { width: 18px; height: 18px; color: var(--metin-2); }
.icindekiler[open] > summary .ok-ikon { transform: rotate(180deg); }
.icindekiler ol { counter-reset: ic; padding-bottom: 12px; }
.icindekiler li { break-inside: avoid; }
.icindekiler a {
  display: flex; gap: 12px; min-height: 44px; padding: 11px 0; border-top: 1px solid var(--cizgi);
  font-size: 14.5px; line-height: 1.4; color: var(--metin-2); text-decoration: none; transition: color var(--sure-kisa);
}
.icindekiler a::before {
  counter-increment: ic; content: counter(ic, decimal-leading-zero); flex: none; min-width: 20px;
  font: 600 12px/1.7 var(--yazi-govde); font-variant-numeric: tabular-nums; color: var(--metin-3);
}
.icindekiler a:hover, .icindekiler a[aria-current] { color: var(--metin); }
@media (min-width: 768px) {
  .icindekiler > summary { cursor: default; min-height: 0; padding: 20px 0 12px; }
  .icindekiler > summary .ok-ikon { display: none; }
}
@media (min-width: 768px) and (max-width: 1099px) { .icindekiler ol { columns: 2; column-gap: 28px; } }
.yazi-yan-cta p { margin-top: 8px; font-size: 14.5px; color: var(--metin-2); }
.yazi-yan-cta .fiyat-satiri { margin-top: 12px; font-size: 13.5px; }
.yazi-yan-cta .buton { margin-top: 16px; }

/* Yazı sonu CTA: siyah kart, tek holo düğme */
.yazi-cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.yazi-izgara + .yazi-cta { margin-top: var(--oluk); }   /* gövde ızgarasından oluk kadar ayrılır (maket: .galeri-ara) */
.yazi-cta .baslik-2 { margin-top: 14px; max-width: 15ch; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); }
.yazi-cta .giris { margin-top: 16px; }
.yazi-cta .dugmeler { margin-top: 26px; }
.yazi-cta .ilke { margin-top: 0; align-self: end; }
@media (min-width: 900px) { .yazi-cta { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; } }


/* ---------- 38. Yan menü ve yasal metin düzeni ---------------------------
   .yan-menu  belge / bölüm gezinmesi: ≥900 px dikey liste (yapışkan),
              altında yatay kayan hap şeridi. Geçerli öğe aria-current.      */
.yan-menu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.yan-menu-baslik { padding: 0 12px 8px; font-size: 13px; font-weight: 600; color: var(--metin-3); }
.yan-menu a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 12px;
  font-size: 15px; line-height: 1.35; color: var(--metin-2); text-decoration: none;
  transition: background-color var(--sure-kisa), color var(--sure-kisa);
}
.yan-menu a:hover { color: var(--metin); background: rgba(10,10,12,.045); }
.yan-menu a[aria-current="page"] { color: var(--metin); font-weight: 600; background: var(--kart); box-shadow: 0 0 0 1px var(--cizgi), var(--golge-1); }
@media (max-width: 899px) {
  .yan-menu {
    flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--kenar)); padding: 2px var(--kenar) 4px;
  }
  .yan-menu::-webkit-scrollbar { display: none; }
  .yan-menu-baslik { display: none; }
  .yan-menu a { flex: none; padding: 0 16px; border: 1px solid var(--cizgi-2); border-radius: var(--r-hap); background: var(--kart); font-size: 14.5px; white-space: nowrap; }
  .yan-menu a[aria-current="page"] { background: var(--murekkep); border-color: var(--murekkep); color: #fff; box-shadow: none; }
}
.yasal-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oluk); align-items: start; margin-top: var(--oluk); }
@media (min-width: 900px) {
  .yasal-izgara { grid-template-columns: 250px minmax(0, 1fr); gap: 28px; }
  .yasal-izgara > .yan-menu { position: sticky; top: calc(var(--menu-yuk) + 16px); }
}
.yasal-izgara .metin-akisi { max-width: 74ch; }


/* ---------- 39. Form ekleri ----------------------------------------------
   .zorunlu        yıldız (aria-hidden); alanın kendisinde required olur
   .istege-bagli   "(isteğe bağlı)" notu
   .alan-grup      fieldset + legend sıfırlama
   .girdi-grup     önek/sonek bitişik girdi (".ticisoft.net", "₺")
   .girdi-ara      büyüteçli arama girdisi (sarmalayıcı gerekmez)
   .secim-kart     radyo / onay kartı (dönem, adres türü, ek hizmet). Kartın
                   tamamı tıklanır; iç içe girdi varsa kart <div> olur ve etiket
                   ::after ile kartı kaplar (SPEC §8.12)
   [aria-busy]     düğmede yükleniyor: dönen halka, ok gizlenir
   .alan-mesaj.bekliyor  "Kontrol ediliyor…" satırı                        */
.zorunlu { margin-left: 2px; font-weight: 500; color: var(--metin-3); }
.istege-bagli { font-family: var(--yazi-govde); font-size: 13px; font-weight: 400; letter-spacing: 0; word-spacing: 0; color: var(--metin-3); }
.form-not { font-size: 13px; color: var(--metin-3); }
.form-baslik { font-size: var(--t-3); line-height: 1.1; letter-spacing: var(--hs-3); word-spacing: var(--ws-3); }
.form-baslik + p { margin-top: 8px; color: var(--metin-2); }
.alan-grup { display: grid; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
.alan-grup > legend { float: left; width: 100%; margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 600; color: var(--metin); }
.alan-grup > legend + * { clear: both; }
.alan-grup .secim { padding: 7px 0; }
.alan { align-content: start; }
.alan-grup > legend .istege-bagli { margin-left: 4px; }
.form-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.form-alt p { flex: 1 1 220px; font-size: 13px; line-height: 1.5; color: var(--metin-3); }
.form-alt .buton-genis { flex: 1 1 100%; }

.girdi-grup {
  display: flex; align-items: stretch; min-width: 0; overflow: hidden;
  border: 1px solid var(--cizgi-form); border-radius: var(--r-kucuk); background: var(--kart);
  transition: border-color var(--sure-kisa), box-shadow var(--sure-kisa);
}
.girdi-grup:hover { border-color: var(--metin-2); }
.girdi-grup:focus-within { border-color: var(--murekkep); box-shadow: 0 0 0 3px rgba(10,10,12,.14); }
.girdi-grup:has([aria-invalid="true"]) { border-color: var(--hata); background: var(--hata-zemin); }
.girdi-grup:has(:disabled) { border-color: var(--cizgi-2); background: var(--ic-zemin); }
.girdi-grup :is(input, select) { flex: 1; width: 100%; min-width: 0; min-height: 46px; padding: 11px 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 16px; line-height: 1.4; color: var(--metin); }
.girdi-grup ::placeholder { color: var(--metin-3); opacity: 1; }
.girdi-grup :is(input, select):focus-visible { outline: 0; box-shadow: none; }
.alan .girdi-grup :is(input, select)[aria-invalid="true"] { background: transparent; }
.girdi-ek {
  display: flex; align-items: center; flex: none; padding: 0 14px; background: var(--ic-zemin);
  font-size: 15.5px; color: var(--metin-2); white-space: nowrap;
}
.girdi-ek:last-child { border-left: 1px solid var(--cizgi); }
.girdi-ek:first-child { border-right: 1px solid var(--cizgi); }
@media (max-width: 379px) { .girdi-ek { padding: 0 10px; font-size: 14.5px; } }

.girdi-ara, .alan .girdi-ara {
  padding-left: 42px;
  background: var(--kart) var(--i-ara-gri) no-repeat 13px 50% / 18px 18px;
}
.girdi-ara::-webkit-search-cancel-button { cursor: pointer; }

/* Seçim kartı */
.secim-kartlar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 480px) { .secim-kartlar-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.secim-kart {
  position: relative; display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 16px;
  border: 1px solid var(--cizgi-2); border-radius: 16px; background: var(--kart); cursor: pointer;
  transition: border-color var(--sure-kisa), box-shadow var(--sure-kisa);
}
.secim-kart:hover { border-color: var(--metin-2); }
.secim-kart:has(> input:checked) { border-color: var(--murekkep); box-shadow: inset 0 0 0 1px var(--murekkep); }
.secim-kart:has(> input:focus-visible) { outline: 2px solid var(--odak); outline-offset: 3px; }
.secim-kart:has(> input:disabled) { cursor: not-allowed; opacity: .55; }
.secim-kart > input {
  appearance: none; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin: 1px 0 0;
  border: 1.5px solid var(--cizgi-form); border-radius: 50%; background: var(--kart); cursor: pointer;
  transition: background-color var(--sure-kisa), border-color var(--sure-kisa);
}
.secim-kart > input:focus-visible { outline: 0; }
.secim-kart > input[type="checkbox"] { border-radius: 6px; }
.secim-kart > input:checked { background: var(--murekkep); border-color: var(--murekkep); }
.secim-kart > input[type="radio"]:checked { background: var(--kart); border: 6px solid var(--murekkep); }
.secim-kart > input[type="checkbox"]:checked::after {
  content: ''; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg);
}
.secim-kart-govde { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.secim-kart-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.secim-kart-ad { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--metin); cursor: pointer; }
div.secim-kart .secim-kart-ad::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }   /* kartın tamamı etiketi seçer */
.secim-kart-fiyat {
  font-family: var(--yazi-baslik); font-size: 24px; font-weight: 600; line-height: 1.15; color: var(--metin);
  letter-spacing: -.035em; word-spacing: var(--ws-3); font-variant-numeric: lining-nums tabular-nums;
}
.secim-kart-fiyat small { font-family: var(--yazi-govde); font-size: 14px; font-weight: 400; letter-spacing: 0; word-spacing: 0; color: var(--metin-3); }
.secim-kart-ek-fiyat { font-family: var(--yazi-baslik); font-size: 17px; font-weight: 650; letter-spacing: -.02em; word-spacing: var(--ws-4); white-space: nowrap; font-variant-numeric: tabular-nums; }
.secim-kart-not { font-size: 13.5px; line-height: 1.45; color: var(--metin-3); }
.secim-kart-ic { position: relative; z-index: 1; display: grid; gap: 8px; margin-top: 10px; cursor: auto; }
.secim-kart .rozet { min-height: 24px; padding: 0 9px; font-size: 12px; }

/* Yükleniyor */
.buton[aria-busy="true"] { pointer-events: none; }
.buton[aria-busy="true"]::before {
  content: ''; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: donus .75s linear infinite;
}
.buton[aria-busy="true"] .ikon-ileri { display: none; }
.alan-mesaj.bekliyor { color: var(--metin-3); }
.alan-mesaj.bekliyor::before {
  content: ''; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: donus .75s linear infinite;
}
.alan-mesaj:empty { display: none; }


/* ---------- 40. Giriş / kayıt (kimlik) ve iletişim düzeni -----------------
   .kimlik          ortalanmış dar kart (giriş: 480 px)
   .kimlik-izgara   kayıt: form kartı (7) + siyah "sonra ne olacak" kartı (5)
   .iletisim-izgara iletişim: form kartı (7) + iletişim / satıcı kartları (5)
   .kanal-liste     telefon, e-posta, adres satırları (ikon karolu)          */
.kimlik { padding-top: clamp(16px, 3vw, 48px); padding-bottom: var(--bolum-bosluk); }
.kimlik-kart { width: min(100%, 480px); margin-inline: auto; }
.kimlik-kart > .ust-not + .baslik-3 { margin-top: 12px; }   /* maket: başlıkta satır içi margin-top:12px */
.kimlik-kart .giris { margin-top: 10px; font-size: 16.5px; }
.kimlik-kart .form { margin-top: 26px; }
.kimlik-kart .flash, .kimlik-kart .uyari-kutu { margin-top: 20px; }
.kimlik-alt { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--cizgi); text-align: center; font-size: 15px; color: var(--metin-2); }
.kimlik-alt .metin-baglanti { margin-left: 4px; }
.kimlik-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oluk); max-width: 1120px; margin-inline: auto; }
.kimlik-izgara .kimlik-kart { width: 100%; }
.kimlik-yan { display: flex; flex-direction: column; }
.kimlik-yan .baslik-3 { margin-top: 14px; max-width: 16ch; }
.kimlik-yan .sira { margin-top: 24px; }
.kimlik-yan .kart-dip { margin-top: auto; padding-top: 18px; }
.kimlik-yan .sira + .kart-dip { margin-top: 28px; }
@media (min-width: 1000px) {
  .kimlik-izgara { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .kimlik-yan { position: sticky; top: calc(var(--menu-yuk) + 16px); }
}

.iletisim-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oluk); align-items: start; }
.iletisim-yan { display: grid; gap: var(--oluk); }
.sayfa-bas + .iletisim-izgara { margin-top: var(--oluk); }
/* Satıcı bilgileri kartındaki sözleşme bağlantısı (maket: style="margin-top:8px") */
.iletisim-yan .bilgi-listesi + .metin-baglanti { margin-top: 8px; }
@media (min-width: 1000px) { .iletisim-izgara { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.kanal-liste { display: grid; margin-top: 20px; border-top: 1px solid var(--cizgi); }
.kanal-liste li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--cizgi); }
.kanal-liste .ikon-karo { width: 40px; height: 40px; border-radius: 11px; }
.kanal-liste .ikon-karo .ikon { width: 19px; height: 19px; }
.kanal-liste div { display: flex; flex-direction: column; min-width: 0; }
.kanal-liste small { font-size: 13px; color: var(--metin-3); }
.kanal-liste :is(a, b) {
  font-family: var(--yazi-baslik); font-size: 18px; font-weight: 650; line-height: 1.35; color: var(--metin);
  letter-spacing: var(--hs-4); word-spacing: var(--ws-4); overflow-wrap: anywhere;
}
/* Tek başına duran bağlantı: dokunma hedefi 44 px (SPEC §10); eksi dikey pay satır ritmini 32 px'teki gibi tutar */
.kanal-liste a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -6px; text-decoration: none; }
.kanal-liste a:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.kanal-liste address { font-size: 15px; line-height: 1.5; color: var(--metin-2); }


/* ---------- 41. Satın alma sihirbazı -------------------------------------
   Akış: 1 Hesap → 2 Paket ve adres (bu sayfa) → 3 Ödeme (PayTR iframe) → 4 Kurulum.
   .adim-gosterge   numaralı adım şeridi: li.tamam / li[aria-current="step"];
                    <640 px'te yalnız geçerli adımın adı görünür
   .sihirbaz-izgara form (7) + yapışkan özet (5): .paket-ozet (beyaz) +
                    .siparis-toplam (siyah, tek holo düğme = karar anı)
   .odeme-kap       ödeme sayfası: başlık, iframe çerçevesi, güven satırı    */
.adim-gosterge { display: flex; align-items: flex-start; counter-reset: ag; }
.adim-gosterge li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--metin-3); }
.adim-gosterge li::before {
  counter-increment: ag; content: counter(ag); position: relative; z-index: 1;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--cizgi-2); background: var(--kart); color: var(--metin-2);
  font: 600 13px/1 var(--yazi-govde); font-variant-numeric: tabular-nums;
}
.adim-gosterge li::after { content: ''; position: absolute; top: 14.5px; left: 38px; right: 8px; height: 1.5px; border-radius: 1px; background: var(--cizgi-2); }
.adim-gosterge li:last-child { flex: none; }
.adim-gosterge li:last-child::after { display: none; }
.adim-gosterge li.tamam { color: var(--metin-2); }
.adim-gosterge li.tamam::before { content: ''; border-color: var(--murekkep); background: var(--murekkep) var(--i-tik-beyaz) center / 16px no-repeat; }
.adim-gosterge li.tamam::after { background: var(--murekkep); }
.adim-gosterge li[aria-current="step"] { color: var(--metin); font-weight: 600; }
.adim-gosterge li[aria-current="step"]::before { border-color: var(--murekkep); background: var(--murekkep); color: #fff; box-shadow: 0 0 0 4px rgba(10,10,12,.08); }
.kart-siyah .adim-gosterge li::before { background: transparent; }
@media (max-width: 639px) {
  .adim-gosterge li:not([aria-current]) .adim-gosterge-ad { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .adim-gosterge li[aria-current="step"] { flex: 1.6; }
}

.sihirbaz-bas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: end; }
.sihirbaz-bas .baslik-2 { margin-top: 12px; }
.sihirbaz-bas .giris { margin-top: 12px; }
@media (min-width: 1000px) { .sihirbaz-bas { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px; } }
.sihirbaz-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oluk); align-items: start; margin-top: var(--oluk); }
.sihirbaz-form { display: grid; gap: var(--oluk); min-width: 0; }
.sihirbaz-form > .flash-alan { margin-bottom: 0; }   /* form üstü hata özeti: aralığı ızgaranın gap'i verir */
.sihirbaz-yan { display: grid; gap: var(--oluk); min-width: 0; }
@media (min-width: 1000px) {
  .sihirbaz-izgara { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .sihirbaz-yan { position: sticky; top: calc(var(--menu-yuk) + 16px); }
}
.sihirbaz-baslik { display: flex; align-items: center; gap: 12px; font-size: var(--t-4); font-weight: 650; line-height: 1.25; }
.sihirbaz-no {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--murekkep); color: #fff; font: 600 13px/1 var(--yazi-govde); letter-spacing: 0; word-spacing: 0;
}
.sihirbaz-adim > p { margin-top: 8px; color: var(--metin-2); font-size: 15px; max-width: 56ch; }
.sihirbaz-adim > :is(.secim-kartlar, .secim-kart, .alan-grup) { margin-top: 18px; }

.paket-ozet .kart-ust { margin-bottom: 14px; }
.paket-ozet-liste { border-top: 1px solid var(--cizgi); }
.paket-ozet-liste li { display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--cizgi); font-size: 14.5px; line-height: 1.45; color: var(--metin-2); }
.paket-ozet-liste .ikon { width: 17px; height: 17px; margin-top: 2px; stroke-width: 2.2; color: var(--metin); }

.toplam-satirlar { border-top: 1px solid var(--cizgi); }
.toplam-satirlar > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--cizgi); font-size: 15px; }
.toplam-satirlar > div[hidden] { display: none; }   /* seçilmeyen Kurulum Hizmeti satırı özetten kalkar (esnek kap UA [hidden]'ı ezer) */
.toplam-satirlar dt { color: var(--metin-2); min-width: 0; }
.toplam-satirlar dt small { display: block; font-size: 13px; color: var(--metin-3); }
.toplam-satirlar dd { color: var(--metin); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.toplam-tutar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-top: 20px; }
.toplam-tutar span { font-size: 14px; color: var(--metin-2); }
.toplam-tutar b {
  font-family: var(--yazi-baslik); font-size: clamp(40px, 4vw, 56px); font-weight: 600; line-height: 1;
  letter-spacing: -.05em; word-spacing: var(--ws-dev); font-variant-numeric: lining-nums tabular-nums;
}
.siparis-toplam .buton { width: 100%; margin-top: 22px; }
.guven-notu { display: flex; gap: 10px; margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--metin-3); }
.guven-notu .ikon { width: 16px; height: 16px; margin-top: 2px; stroke-width: 2; color: var(--metin-2); }

.odeme-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oluk); align-items: start; margin-top: var(--oluk); }
@media (min-width: 1000px) { .odeme-izgara { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.sahne > .odeme-izgara:first-child { margin-top: 0; }   /* adım göstergesi olmayan (süre uzatma) siparişte bölümün ilk öğesi */
.odeme-kap { padding: 0; }
.odeme-kap-ust { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; padding: var(--kart-ic); border-bottom: 1px solid var(--cizgi); }
/* Sipariş kalemi (paket · dönem · adres): başlık + tutar satırının altında kendi satırı (mobilde tutar
   sağda kalır). .kart p + p (10 px) kuralını ezecek kadar özgül. */
.odeme-kap-ust > .odeme-kap-detay { flex: 1 0 100%; margin-top: -4px; font-size: 14px; line-height: 1.45; color: var(--metin-3); overflow-wrap: anywhere; }
/* Ödeme formu açılamadığında (PayTR yapılandırılmamış ya da token alınamadı) iframe çerçevesi yerine uyarı */
.odeme-hata { display: grid; gap: 14px; padding: var(--kart-ic); }
.odeme-hata > p { font-size: 14.5px; line-height: 1.55; color: var(--metin-2); }
.odeme-kap-ust .baslik-4 { margin-top: 8px; }
.odeme-kap-tutar { text-align: right; }
.odeme-kap-tutar b { display: block; font-family: var(--yazi-baslik); font-size: clamp(30px, 2.6vw, 38px); font-weight: 600; line-height: 1; letter-spacing: -.045em; word-spacing: var(--ws-dev); font-variant-numeric: tabular-nums; }
.odeme-kap-tutar span { display: block; margin-top: 6px; font-size: 13px; color: var(--metin-3); }
/* iframe yüklenene kadar arkasındaki yer tutucu görünür (JS gerekmez) */
.odeme-cerceve { position: relative; min-height: 540px; padding: 10px; }
.odeme-cerceve > iframe { position: relative; z-index: 1; display: block; width: 100%; min-height: 520px; border: 0; }
.odeme-yer-tutucu {
  position: absolute; inset: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 24px; border: 1px dashed var(--cizgi-2); border-radius: var(--r-levha); background: var(--kart);
  text-align: center; font-size: 14px; color: var(--metin-3);
}
.odeme-yer-tutucu .iskelet { width: min(320px, 80%); }
.odeme-yer-tutucu .iskelet:nth-of-type(2) { width: min(240px, 60%); }
.odeme-kap-alt { display: flex; gap: 10px; padding: 14px var(--kart-ic) 18px; border-top: 1px solid var(--cizgi); font-size: 13px; line-height: 1.5; color: var(--metin-3); }
.odeme-kap-alt .ikon { width: 16px; height: 16px; margin-top: 2px; stroke-width: 2; color: var(--metin-2); }


/* ---------- 42. Müşteri paneli --------------------------------------------
   Kabuk:  .panel > aside.panel-yan + main.panel-ana
           <768 px: panel-yan yapışkan üst çubuktur (logo + "Menü" düğmesi);
           menü <details class="panel-menu" data-mobil-kapali open> içinde açılır.
           ≥768 px: panel-yan tam yükseklik kenar menü, özet (summary) gizli.
           JS yoksa details açık kalır: menü her genişlikte görünür.
   İçerik: .panel-cubuk (sayfa yolu + hızlı eylemler), .panel-bas (başlık),
           kart ızgarası için .bento + .b-* (§16) yeniden kullanılır.
   Bloklar: .ozet-izgara, .sistem-kart, .kurulum-kart (+ .ilerleme-cubuk,
           .kurulum-adimlar), .yazisma (destek balonları).                   */
.panel { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; background: var(--kagit); }
.panel-yan {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--menu-yuk); padding: 0 var(--kenar); background: var(--kagit); border-bottom: 1px solid var(--cizgi);
}
.panel-logo { display: inline-flex; align-items: center; flex: none; min-height: 44px; border-radius: 8px; }
.panel-logo img { width: 112px; height: auto; margin-left: -4px; }
.panel-menu > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 13px; cursor: pointer; list-style: none;
  border-radius: var(--r-hap); border: 1px solid var(--cizgi-2); background: var(--kart); font-size: 14.5px; font-weight: 600; color: var(--metin);
}
.panel-menu > summary::-webkit-details-marker { display: none; }
.panel-menu > summary .ikon { width: 18px; height: 18px; }
.panel-menu > summary .kapat-ikon, .panel-menu[open] > summary .ac-ikon { display: none; }
.panel-menu[open] > summary .kapat-ikon { display: block; }
.panel-menu[open] > summary { background: var(--murekkep); border-color: var(--murekkep); color: #fff; }
.panel-menu > nav {
  position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column;
  max-height: calc(100vh - var(--menu-yuk)); overflow-y: auto; overscroll-behavior: contain;
  padding: 10px var(--kenar) 18px; background: var(--kagit); border-bottom: 1px solid var(--cizgi);
  box-shadow: 0 28px 40px -28px rgba(10,10,12,.3);
}
.panel-linkler { display: grid; gap: 2px; }
.panel-link {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 12px;
  font-size: 15px; font-weight: 500; color: var(--metin-2); text-align: left; text-decoration: none;
  transition: background-color var(--sure-kisa), color var(--sure-kisa);
}
.panel-link .ikon { width: 20px; height: 20px; color: var(--metin-3); transition: color var(--sure-kisa); }
.panel-link:hover { color: var(--metin); background: rgba(10,10,12,.045); }
/* Geçerli öğe: sayfanın kendisi "page", bölüm içindeki sayfa (sipariş ayrıntısı → Siparişler,
   talep → Destek talepleri) "true" (SPEC §8.3); ikisi aynı görünür */
.panel-link:hover .ikon, .panel-link:is([aria-current="page"], [aria-current="true"]) .ikon { color: var(--metin); }
.panel-link:is([aria-current="page"], [aria-current="true"]) { color: var(--metin); font-weight: 600; background: var(--kart); box-shadow: 0 0 0 1px var(--cizgi), var(--golge-1); }
.panel-link .rozet-sayi { margin-left: auto; }
.panel-link .ikon-dis { width: 14px; height: 14px; margin-left: auto; stroke-width: 2; }
.panel-menu-etiket { padding: 16px 12px 6px; font-size: 12.5px; font-weight: 600; color: var(--metin-3); }
.panel-kullanici {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px;
  border: 1px solid var(--cizgi); border-radius: 14px; background: var(--kart);
}
.panel-kullanici-metin { display: flex; flex-direction: column; min-width: 0; font-size: 14px; line-height: 1.35; }
.panel-kullanici-metin b { font-weight: 600; }
.panel-kullanici-metin small { font-size: 12.5px; color: var(--metin-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-cikis { margin-top: 4px; }
@media (min-width: 768px) {
  .panel { grid-template-columns: var(--panel-yan) minmax(0, 1fr); }
  .panel-yan {
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 18px;
    height: 100vh; padding: 18px 14px; border-bottom: 0; border-right: 1px solid var(--cizgi); overflow-y: auto;
  }
  .panel-logo { align-self: flex-start; margin-left: 10px; }
  .panel-menu > summary { display: none; }
  .panel-menu > nav {
    position: static; min-height: calc(100vh - 100px); max-height: none; overflow: visible;
    padding: 0; background: none; border: 0; box-shadow: none;
  }
  .panel-kullanici { margin-top: auto; }
}
/* İçerik alanı kapsayıcı sorgusu verir: kenar menü yer kapladığı için (768–1099 px) kart ızgarası
   görünüm genişliğine değil içerik genişliğine göre tek sütuna iner. */
.panel-ana { min-width: 0; padding: 16px var(--kenar) 64px; container: panel / inline-size; }
@media (min-width: 768px) { .panel-ana { padding: 20px clamp(24px, 3vw, 48px) 80px; } }
.panel-ic { max-width: 1120px; }
.panel-cubuk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 48px; margin-bottom: clamp(12px, 2vw, 24px); }
.panel-cubuk .yol { font-size: 13.5px; }
.panel-cubuk-sag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.panel-bas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.panel-bas > div { min-width: 0; }
.panel-bas-baslik { font-size: var(--t-3); font-weight: 600; line-height: 1.1; letter-spacing: var(--hs-3); word-spacing: var(--ws-3); overflow-wrap: anywhere; }   /* uzun alan adı (sipariş başlığı) taşmasın */
.panel-bas p { margin-top: 8px; max-width: 60ch; color: var(--metin-2); }
.panel-bolum { margin-top: clamp(28px, 3vw, 44px); }
.panel-bolum > .kart-ust { margin-bottom: 14px; }

/* Özet kartları: yalnız hesaba ait gerçek sayılar */
.ozet-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--oluk); }
.ozet-kart { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; }
.ozet-kart dt { font-size: 13.5px; color: var(--metin-3); }
.ozet-kart dd { display: flex; flex-direction: column; gap: 4px; }
.ozet-deger {
  font-family: var(--yazi-baslik); font-size: clamp(28px, 2.4vw, 36px); font-weight: 600; line-height: 1.05;
  letter-spacing: -.04em; word-spacing: var(--ws-2); font-variant-numeric: lining-nums tabular-nums;
}
.ozet-not { font-size: 13.5px; color: var(--metin-2); overflow-wrap: anywhere; }
@container panel (max-width: 599px) {  /* dar içerikte kısa satır: sayı sağda */
  .ozet-izgara { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .panel-ana .bilgi-listesi > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ozet-kart { gap: 2px; padding: 14px 18px; }
  .ozet-kart dd { flex-direction: row-reverse; align-items: baseline; justify-content: space-between; gap: 12px; }
  .ozet-deger { font-size: 28px; }
}

/* Sistem kartı: kurulu mağaza, lisans, yenileme */
.sistem-kart .kart-ust { align-items: flex-start; }
.sistem-ad { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sistem-ad > div { min-width: 0; }
.sistem-ad h2, .sistem-ad h3 { font-size: 18px; overflow-wrap: anywhere; }
.sistem-ad a { color: inherit; text-decoration: none; }
.sistem-ad a:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.sistem-ad a .ikon { display: inline-block; width: 15px; height: 15px; margin-left: 4px; vertical-align: -1px; stroke-width: 2; }
@media (max-width: 479px) {
  .sistem-ad { gap: 12px; }
  .sistem-ad .ikon-karo { width: 36px; height: 36px; border-radius: 10px; }
  .sistem-ad .ikon-karo .ikon { width: 18px; height: 18px; }
  .sistem-ad :is(h2, h3) { font-size: 16px; }
}
@container panel (max-width: 759px) {
  .panel-ana .bento > [class*="b-"] { grid-column: 1 / -1; }
  .panel-ana .kurulum-adimlar { columns: auto; }
}
.sistem-yenile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 18px; }
.sistem-yenile .alan { flex: 1 1 220px; }
.sistem-yenile .buton { min-height: 48px; }
/* Siparişsiz (elle verilmiş) lisansın anahtarı: "Anahtarı göster" bağlantısı açınca kod kutusu gelir */
.sistem-anahtar > summary { cursor: pointer; list-style: none; }
.sistem-anahtar > summary::-webkit-details-marker { display: none; }
.sistem-anahtar .anahtar { margin-top: 8px; }
/* Panel anasayfası formları: fatura türüne göre gizlenen alanlar (.alan / .form-satir ızgarası
   UA [hidden] kuralını ezmesin) ve e-posta tercihi düğmesi */
[data-fatura-tur][hidden] { display: none; }
.eposta-tercih-dugme { margin-top: 12px; }

/* Sipariş ayrıntısı: kart altındaki düğme, uyarı kutusu ve lisans kapsamındaki modül çipleri */
.siparis-eylem { margin-top: 20px; }
.siparis-uyari { margin-top: 16px; }       /* maket: satır içi margin-top:16px */
.lisans-modul-baslik { margin-top: 22px; font-size: 14px; font-weight: 600; color: var(--metin); }
.lisans-moduller { margin-top: 10px; }
.lisans-moduller .cip { white-space: normal; }   /* uzun modül adı dar ekranda kırılabilsin */

/* Kurulum ilerlemesi. Çubuk yüzdeyi gösterir; ince aralıklar (span --k) model
   eşiklerindedir (Kurulum::ADIMLAR). Adım listesi JS'nin verdiği sınıfla
   boyanır: li.tamam / li.aktif / li.hata (işaretler CSS'ten, emoji yok). */
.kurulum-ust { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.kurulum-ust > div { min-width: 0; }
/* Kart başlığı: maketteki (.bento h3) görünümü panelde h2 + .baslik-4 ile de basılır */
.kurulum-ust :is(.baslik-3, .baslik-4) { margin-top: 12px; overflow-wrap: anywhere; }
.kurulum-kart .kurulum-hata { margin-top: 20px; }   /* kurulum hatası kutusu adımların altında */
.kurulum-yuzde {
  font-family: var(--yazi-baslik); font-size: clamp(52px, 5vw, 76px); font-weight: 300; line-height: .85;
  letter-spacing: -.06em; word-spacing: var(--ws-dev); font-variant-numeric: lining-nums tabular-nums;
}
.ilerleme-cubuk { position: relative; height: 10px; margin-top: 24px; overflow: hidden; border-radius: var(--r-hap); background: var(--ic-zemin); box-shadow: inset 0 0 0 1px var(--cizgi); }
.ilerleme-cubuk > i { display: block; height: 100%; border-radius: inherit; background: var(--metin); transition: width .6s var(--gecis); }
.ilerleme-cubuk > span { position: absolute; top: 0; bottom: 0; left: var(--k); width: 3px; margin-left: -1.5px; background: var(--kart); }
.kart-siyah .ilerleme-cubuk { background: rgba(255,255,255,.1); box-shadow: none; }
.kart-siyah .ilerleme-cubuk > span { background: var(--murekkep); }
.kurulum-adimlar { margin-top: 22px; border-top: 1px solid var(--cizgi); }
@media (min-width: 640px) { .kurulum-adimlar { columns: 2; column-gap: 32px; } }
.kurulum-adimlar li {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 9px 0; border-bottom: 1px solid var(--cizgi);
  font-size: 14.5px; line-height: 1.4; color: var(--metin-3); break-inside: avoid;
}
.kurulum-adimlar li::before { content: ''; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--cizgi-2); }
.kurulum-adimlar li.tamam { color: var(--metin-2); }
.kurulum-adimlar li.tamam::before { border: 0; background: var(--murekkep) var(--i-tik-beyaz) center / 12px no-repeat; }
.kart-siyah .kurulum-adimlar li.tamam::before { background: #fff var(--i-tik-murekkep) center / 12px no-repeat; }
.kurulum-adimlar li.aktif { color: var(--metin); font-weight: 600; }
.kurulum-adimlar li.aktif::before { border: 2px solid var(--cizgi-2); border-top-color: var(--metin); animation: donus .9s linear infinite; }
.kurulum-adimlar li.hata { color: var(--hata); font-weight: 600; }
.kurulum-adimlar li.hata::before { border: 0; background: var(--hata) var(--i-kapat-beyaz) center / 12px no-repeat; }
.kart-siyah .kurulum-adimlar li.hata::before { background-color: #d93a2b; }

/* Hazır sistem kartı başlığı: ikon diski + başlık */
.durum-bas { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.durum-bas :is(h2, h3) { font-size: var(--t-4); font-weight: 650; }
.durum-bas p { margin-top: 2px; font-size: 14px; color: var(--metin-3); }
.durum-disk { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--basari-zemin); color: var(--basari); box-shadow: inset 0 0 0 1px var(--basari-cizgi); }
.durum-disk .ikon { width: 20px; height: 20px; stroke-width: 2.2; }

/* Destek yazışması: müşteri sağda mürekkep balon, destek solda gömme balon */
.yazisma { display: flex; flex-direction: column; gap: 18px; }
.yazisma-gun { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 500; color: var(--metin-3); }
.yazisma-gun::before, .yazisma-gun::after { content: ''; flex: 1; height: 1px; background: var(--cizgi); }
.balon { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: min(92%, 620px); }
.balon-kimden { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--metin-2); }
.balon-metin { padding: 12px 16px; border-radius: var(--r-balon); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.balon-metin p + p { margin-top: 8px; }
.balon-saat { font-size: 12px; color: var(--metin-3); font-variant-numeric: tabular-nums; }
.balon-destek { align-self: flex-start; }
.balon-destek .balon-metin { background: var(--ic-zemin); border: 1px solid var(--cizgi); border-top-left-radius: 6px; color: var(--metin); }
.balon-siz { align-self: flex-end; align-items: flex-end; }
.balon-siz .balon-metin { background: var(--murekkep); color: #f5f5f2; border-top-right-radius: 6px; }
@media (min-width: 640px) { .balon { max-width: min(78%, 620px); } }
.yazisma-yanit { display: grid; gap: 12px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--cizgi); }
.yazisma-yanit .form-alt { justify-content: flex-end; }
/* Talep kartı başlığı (konu uzun olabilir) ve kapalı talepte yanıt formunun yerindeki kutu */
.talep-kart .kart-ust .baslik-4 { margin-top: 8px; overflow-wrap: anywhere; }
.talep-kapali { margin-top: 24px; }


/* ---------- 43. Bilgi Bankası (kılavuz) ----------------------------------
   30 bölüm dosyasının HTML'i DEĞİŞMEZ; aynı sınıflar yeni dille boyanır:
   .kv-ekran (+ .kv-isaret konumlu numara), .kv-aciklama (numaralı açıklama),
   .kv-adimlar (zaman çizgili adımlar), .kv-ipucu, .kv-dikkat.
   ipucu/dikkat içindeki ilk <span> emojidir: yazı boyutu sıfırlanır, yerine
   aynı çizgi dilinde SVG işaret (maske) çizilir. Ekranda emoji görünmez.
   Yerleşim (kilavuz/yerlesim.blade.php): site üst menüsü + .kap.kv-yerlesim
   > aside.kv-yan (details.kv-yan-kutu[data-mobil-kapali][open] > summary +
   input.kv-ara + nav) + main.kv-icerik. Arama betiği (.kv-yan-grup /
   .kv-yan-link süzme) aynen çalışır.                                        */
.kv-yerlesim { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oluk); align-items: start; padding-top: clamp(8px, 1.2vw, 20px); padding-bottom: var(--bolum-bosluk); }
@media (min-width: 768px) { .kv-yerlesim { grid-template-columns: var(--kv-yan) minmax(0, 1fr); column-gap: clamp(20px, 2.6vw, 44px); } }
.kv-yan { min-width: 0; }
@media (min-width: 768px) {
  .kv-yan {
    position: sticky; top: calc(var(--menu-yuk) + 12px); max-height: calc(100vh - var(--menu-yuk) - 24px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--cizgi-2) transparent;
    margin-left: -6px; padding: 4px 6px 24px;
  }
}
/* Mobil: kenar çubuğu kapalı bir kart ("Bölümler 30"); ≥768 px açık liste */
.kv-yan-kutu { border: 1px solid var(--cizgi); border-radius: var(--r-kart); background: var(--kart); padding: 0 12px; }
.kv-yan-kutu > summary {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 6px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 600; color: var(--metin);
}
.kv-yan-kutu > summary::-webkit-details-marker { display: none; }
.kv-yan-kutu > summary .ok-ikon { width: 18px; height: 18px; margin-left: auto; color: var(--metin-2); }
.kv-yan-kutu[open] > summary .ok-ikon { transform: rotate(180deg); }
.kv-yan-kutu > nav { padding-bottom: 12px; }
@media (min-width: 768px) {
  .kv-yan-kutu { padding: 0; border: 0; border-radius: 0; background: none; }
  .kv-yan-kutu > summary { display: none; }
}
.kv-ara {
  display: block; width: 100%; min-height: 44px; margin: 0 0 16px; padding: 10px 14px 10px 40px;
  border: 1px solid var(--cizgi-form); border-radius: var(--r-kucuk);
  background: var(--kart) var(--i-ara-gri) no-repeat 13px 50% / 17px 17px;
  font-size: 16px; color: var(--metin); transition: border-color var(--sure-kisa), box-shadow var(--sure-kisa);
}
.kv-ara::placeholder { color: var(--metin-3); opacity: 1; }
.kv-ara:hover { border-color: var(--metin-2); }
.kv-ara:focus-visible { outline: 0; border-color: var(--murekkep); box-shadow: 0 0 0 3px rgba(10,10,12,.14); }
.kv-yan-grup + .kv-yan-grup { margin-top: 18px; }
.kv-yan-baslik { padding: 0 10px 6px; font-size: 12.5px; font-weight: 600; color: var(--metin-3); }
.kv-yan-link {
  display: flex; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: 10px;
  font-size: 14.5px; line-height: 1.35; color: var(--metin-2); text-decoration: none;
  transition: background-color var(--sure-kisa), color var(--sure-kisa);
}
@media (min-width: 768px) { .kv-yan-link { min-height: 38px; padding: 7px 10px; } }
.kv-yan-link:hover { color: var(--metin); background: rgba(10,10,12,.045); }
.kv-yan-link.aktif, .kv-yan-link[aria-current="page"] { color: var(--metin); font-weight: 600; background: var(--kart); box-shadow: 0 0 0 1px var(--cizgi), var(--golge-1); }

/* Bölüm başlığı: kağıt zeminde; makale gövdesi beyaz levhada */
.kv-icerik { min-width: 0; }
.kv-yol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 13.5px; color: var(--metin-3); }
.kv-yol a { display: inline-flex; align-items: center; min-height: 44px; color: var(--metin-2); text-decoration: none; }
.kv-yol a:hover { color: var(--metin); text-decoration: underline; }
.kv-yol b { font-weight: 500; color: var(--metin-3); }
.kv-baslik {
  margin-top: 4px; max-width: 20ch; font-size: clamp(2rem, 1.35rem + 2.5vw, 3.375rem); font-weight: 600; line-height: 1.04;
  letter-spacing: var(--hs-2); word-spacing: var(--ws-2);
}
.kv-ozet { margin-top: 16px; max-width: 60ch; font-size: var(--t-giris); line-height: 1.55; color: var(--metin-2); text-wrap: pretty; }
.kv-dk { font-size: 14px; color: var(--metin-3); white-space: nowrap; }
.kv-makale {
  margin-top: clamp(24px, 3vw, 40px); padding: var(--sahne-ic); background: var(--kart);
  border: 1px solid var(--cizgi); border-radius: var(--r-sahne);
  font-size: 16.5px; line-height: 1.72; color: var(--metin-2);
}
.kv-makale > * + * { margin-top: 1em; }
.kv-makale > :first-child { margin-top: 0; }
.kv-makale > :is(p, ul, ol:not([class]), h2, h3) { max-width: 72ch; }
.kv-makale h2 {
  margin-top: 2.1em; font-size: clamp(1.4rem, 1.15rem + .9vw, 1.875rem); line-height: 1.15;
  letter-spacing: var(--hs-3); word-spacing: var(--ws-3); scroll-margin-top: calc(var(--menu-yuk) + 24px);
}
.kv-makale h3 { margin-top: 1.7em; font-size: var(--t-4); font-weight: 650; line-height: 1.3; }
.kv-makale :is(h2, h3) + * { margin-top: .6em; }
.kv-makale :is(b, strong) { color: var(--metin); font-weight: 600; }
.kv-makale a { color: var(--metin); font-weight: 500; text-decoration-color: var(--cizgi-form); text-underline-offset: .25em; }
.kv-makale a:hover { text-decoration-color: currentColor; }
.kv-makale > ul, .kv-makale > ol:not([class]) { padding-left: 1.3em; }
.kv-makale > ul { list-style: disc; }
.kv-makale > ol:not([class]) { list-style: decimal; }
.kv-makale > :is(ul, ol:not([class])) > li + li { margin-top: .5em; }
.kv-makale li::marker { color: var(--metin-3); }
.kv-makale code {
  padding: .1em .35em; border-radius: 6px; background: var(--ic-zemin); border: 1px solid var(--cizgi);
  font: .88em/1.4 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: var(--metin);
}

/* Ekran görüntüsü + numaralı işaretler. İşaretler satır içi left/top (%) ile
   konumlanır; çerçeveye iç boşluk EKLENMEZ (yüzdeler kayar). Çerçeve taşmayı KIRPMAZ: kenara
   yakın işaret (ör. Başlangıç 2: top 2.6%) dar ekranda yarım kesiliyordu; köşeleri görselin
   kendi yarıçapı kırpar, görünüm aynı kalır. */
.kv-ekran {
  position: relative; margin-block: 26px 14px; overflow: visible;
  border: 1px solid var(--cizgi); border-radius: var(--r-levha); background: var(--kart); box-shadow: var(--golge-levha);
}
.kv-makale > .kv-ekran { margin-top: 26px; }
.kv-ekran img { display: block; width: 100%; height: auto; border-radius: calc(var(--r-levha) - 1px); }
.kv-isaret {
  position: absolute; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--murekkep); color: #fff; font: 700 13px/1 var(--yazi-govde); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 3px #fff, 0 6px 16px -4px rgba(10,10,12,.55);
}
@media (max-width: 639px) { .kv-isaret { width: 22px; height: 22px; font-size: 11px; box-shadow: 0 0 0 2px #fff, 0 4px 10px -3px rgba(10,10,12,.5); } }

/* Numaralı açıklama: işaret numarasıyla eşleşen dolu diskler, saç çizgili satırlar */
.kv-aciklama { counter-reset: kvs; margin-top: 18px; border-top: 1px solid var(--cizgi); }
.kv-aciklama > li { position: relative; padding: 14px 0 14px 44px; border-bottom: 1px solid var(--cizgi); font-size: 16px; line-height: 1.65; }
.kv-aciklama > li::before {
  counter-increment: kvs; content: counter(kvs); position: absolute; left: 0; top: 14px;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--murekkep); color: #fff; font: 700 12.5px/1 var(--yazi-govde); font-variant-numeric: tabular-nums;
}

/* Adımlar: çizgi disk + dikey zaman çizgisi (açıklamadan ayrışır) */
.kv-adimlar { counter-reset: kva; margin-top: 18px; }
.kv-adimlar > li { position: relative; padding: 3px 0 22px 50px; font-size: 16px; line-height: 1.65; }
.kv-adimlar > li:last-child { padding-bottom: 4px; }
.kv-adimlar > li::before {
  counter-increment: kva; content: counter(kva); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--murekkep); background: var(--kart); color: var(--metin);
  font: 600 14px/1 var(--yazi-baslik); letter-spacing: 0; word-spacing: 0; font-variant-numeric: lining-nums tabular-nums;
}
.kv-adimlar > li::after { content: ''; position: absolute; left: 15.5px; top: 38px; bottom: 6px; width: 1px; background: var(--cizgi-2); }
.kv-adimlar > li:last-child::after { display: none; }

/* İpucu ve dikkat kutuları: emoji gizlenir, SVG işaret çizilir */
.kv-ipucu, .kv-dikkat {
  display: flex; align-items: flex-start; gap: 12px; margin-block: 24px; padding: 16px 18px;
  border-radius: var(--r-levha); font-size: 15.5px; line-height: 1.62;
}
.kv-makale > :is(.kv-ipucu, .kv-dikkat) { margin-top: 24px; }
.kv-ipucu { background: var(--ic-zemin); border: 1px solid var(--cizgi); color: var(--metin-2); }
.kv-dikkat { background: var(--uyari-zemin); border: 1px solid var(--uyari-cizgi); color: var(--metin-2); }
.kv-ipucu > div, .kv-dikkat > div { min-width: 0; }
.kv-ipucu b, .kv-dikkat b { color: var(--metin); font-weight: 600; }
.kv-ipucu > span:first-child, .kv-dikkat > span:first-child {
  flex: none; width: 20px; height: 20px; margin-top: 2px; overflow: hidden;
  font-size: 0; line-height: 0; color: transparent; background: var(--metin);
  -webkit-mask: var(--i-ampul) center / contain no-repeat; mask: var(--i-ampul) center / contain no-repeat;
}
.kv-dikkat > span:first-child { background: var(--uyari); -webkit-mask-image: var(--i-uyari); mask-image: var(--i-uyari); }

/* Önceki / sonraki bölüm */
.kv-gezinti { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oluk); margin-top: var(--oluk); }
@media (min-width: 640px) { .kv-gezinti { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .kv-gezinti > span:empty { display: none; } }
.kv-gez {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 18px 22px;
  border: 1px solid var(--cizgi); border-radius: var(--r-kart); background: var(--kart); text-decoration: none;
  transition: border-color var(--sure-kisa);
}
.kv-gez:hover { border-color: var(--cizgi-2); }
.kv-gez span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--metin-3); }
.kv-gez span .ikon { width: 15px; height: 15px; stroke-width: 2; }
.kv-gez b {
  font-family: var(--yazi-baslik); font-size: 17.5px; font-weight: 650; line-height: 1.3; color: var(--metin);
  letter-spacing: var(--hs-4); word-spacing: var(--ws-4);
}
.kv-gez-sag { align-items: flex-end; text-align: right; }

/* Dizin sayfası (kilavuz/dizin.blade.php) */
.kv-kahraman {
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--sahne-ic);
  border: 1px solid var(--cizgi); border-radius: var(--r-sahne); background: var(--kart);
}
.kv-kahraman :is(h1, h2) { margin-top: 18px; max-width: 14ch; font-size: var(--t-1); line-height: 1; letter-spacing: var(--hs-dev); word-spacing: var(--ws-dev); }
.kv-kahraman .gradyan { color: inherit; background: none; -webkit-text-fill-color: currentColor; }
.kv-kahraman p { margin-top: 18px; max-width: 54ch; font-size: var(--t-giris); line-height: 1.55; color: var(--metin-2); }
.kv-dizin-kategori {
  display: flex; align-items: center; gap: 14px; margin: clamp(36px, 4.5vw, 60px) 0 16px;
  font-family: var(--yazi-govde); font-size: 14px; font-weight: 600; letter-spacing: 0; word-spacing: 0; color: var(--metin);
}
.kv-dizin-kategori::after { content: ''; flex: 1; height: 1px; background: var(--cizgi); }
.kv-dizin-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--oluk); }
.kv-kart {
  display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--cizgi); border-radius: var(--r-kart);
  background: var(--kart); text-decoration: none; transition: border-color var(--sure-kisa);
}
.kv-kart:hover { border-color: var(--cizgi-2); }
.kv-kart-baslik {
  font-family: var(--yazi-baslik); font-size: 18px; font-weight: 650; line-height: 1.25; color: var(--metin);
  letter-spacing: var(--hs-4); word-spacing: var(--ws-4);
}
.kv-kart p { flex: 1; font-size: 14.5px; line-height: 1.55; color: var(--metin-2); }
.kv-kart-alt { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--cizgi); font-size: 13px; color: var(--metin-3); }
.kv-kart-ok { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--metin); }
.kv-kart-ok .ikon { width: 15px; height: 15px; stroke-width: 2; transition: transform var(--sure-orta) var(--gecis); }
.kv-kart:hover .kv-kart-ok .ikon { transform: translateX(3px); }


/* ---------- 44. Hata sayfaları ve tek mesajlı sayfa ----------------------
   .hata-kart   dev ince kod (404 / 410 / 503) + başlık + eylemler;
                altında .hata-linkler (altı yön kartı)
   .mesaj-kart  tek mesaj: e-posta listesinden çıkış, ödeme sonucu, kayıt
                onayı. Ortalı dar kart + .mesaj-ikon diski.
   503 bağımsız sayfadır (DB/layout yok): hata-503.html satır içi stilli.   */
.hata-sayfa { padding-top: clamp(8px, 1.2vw, 20px); padding-bottom: var(--bolum-bosluk); }
.hata-kart { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 56px; align-items: end; }
.hata-kod {
  margin-left: -.05em; font-family: var(--yazi-baslik); font-size: clamp(104px, 17vw, 248px); font-weight: 300; line-height: .78;
  letter-spacing: -.075em; word-spacing: var(--ws-dev); color: var(--metin); font-variant-numeric: lining-nums tabular-nums;
}
.hata-metin { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hata-metin .baslik-2 { margin-top: 14px; max-width: 16ch; }
.hata-metin .giris { margin-top: 18px; }
.hata-metin .dugmeler { margin-top: 28px; }
@media (min-width: 900px) { .hata-kart { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.hata-linkler { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oluk); margin-top: var(--oluk); }
@media (min-width: 640px)  { .hata-linkler { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hata-linkler { grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* altı yön kartı: 2 × 3 */
.hata-linkler a {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px 22px;
  border: 1px solid var(--cizgi); border-radius: var(--r-kart); background: var(--kart); text-decoration: none;
  transition: border-color var(--sure-kisa);
}
.hata-linkler a:hover { border-color: var(--cizgi-2); }
.hata-linkler .ikon { width: 22px; height: 22px; margin-bottom: 10px; color: var(--metin); }
.hata-linkler b { display: flex; align-items: center; gap: 6px; font-family: var(--yazi-baslik); font-size: 17px; font-weight: 650; letter-spacing: var(--hs-4); word-spacing: var(--ws-4); }
.hata-linkler b .ikon { width: 15px; height: 15px; margin: 0; stroke-width: 2; transition: transform var(--sure-orta) var(--gecis); }
.hata-linkler a:hover b .ikon { transform: translateX(3px); }
.hata-linkler span { font-size: 14px; line-height: 1.5; color: var(--metin-2); }
@media (max-width: 639px) {           /* telefonda kısa satır: ikon solda */
  .hata-linkler a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 14px; padding: 16px 18px; }
  .hata-linkler a > .ikon { grid-row: 1 / span 2; margin: 1px 0 0; }
}

.mesaj-sayfa { padding-top: clamp(16px, 5vw, 72px); padding-bottom: var(--bolum-bosluk); }
.mesaj-kart { display: flex; flex-direction: column; align-items: center; width: min(100%, 580px); margin-inline: auto; text-align: center; }
.mesaj-ikon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--murekkep); color: #fff; }
.mesaj-ikon .ikon { width: 26px; height: 26px; stroke-width: 2; }
.mesaj-ikon-basari { background: var(--basari-zemin); color: var(--basari); box-shadow: inset 0 0 0 1px var(--basari-cizgi); }
.mesaj-ikon-hata { background: var(--hata-zemin); color: var(--hata); box-shadow: inset 0 0 0 1px var(--hata-cizgi); }
.mesaj-kart .baslik-3 { margin-top: 20px; max-width: 18ch; }
.mesaj-kart .giris { margin: 12px auto 0; font-size: 16.5px; max-width: 46ch; }
.mesaj-kart .giris b { color: var(--metin); font-weight: 600; overflow-wrap: anywhere; }
.mesaj-not { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--metin-3); max-width: 46ch; }
.mesaj-kart .dugmeler { justify-content: center; margin-top: 26px; }
.mesaj-kart .bilgi-listesi { width: 100%; margin-top: 24px; text-align: left; }


/* ---------- 45. İç sayfa hareketleri ------------------------------------
   Dönen halkalar yükleniyor bilgisidir: azaltılmış harekette durur ama halka
   (boşluklu çember) görünür kalır. Nabız ve iskelet parıltısı yalnız hareket
   azaltılmamışken çalışır.                                                 */
@keyframes donus { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .rozet-surec::before { animation: nabiz 1.6s var(--gecis) infinite; }
  @keyframes nabiz { 50% { opacity: .3; } }
  .iskelet { animation: iskelet 1.5s linear infinite; }
  @keyframes iskelet { to { background-position: -150% 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .yukleniyor, .buton[aria-busy="true"]::before, .alan-mesaj.bekliyor::before, .kurulum-adimlar li.aktif::before { animation: none !important; }
}