@font-face { font-family: "Tenor Sans"; src: url("/font/TenorSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
/* RAYNSIS satış sitesi — TEK GEÇİŞ (21.09.2026, HAYAL_SARTNAMESI 5 ekran).
   Tek palet (MARKA_KIMLIGI §3): mürekkep · kırık beyaz · yüzey · siyah · iki gri · çizgi. Vurgu rengi yok.
   8 px ızgara, tek kap genişliği, tek yazı ailesi. Kaydırmaya bağlı sahne yok; her bölüm kendi yüksekliğinde. */
:root {
  --murekkep: #1D1D1F; --zemin: #F5F5F7; --yuzey: #FFFFFF; --siyah: #000000;
  --gri: #6E6E73; --gri2: #86868B; --cizgi: #D2D2D7; --cizgi-koyu: #2C2C2E;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Optima", "Candara", "Gill Sans", "Gill Sans MT", "Trebuchet MS", sans-serif;
  --kap: 1120px; --r: 16px; --r2: 12px; --golge: 0 1px 2px rgba(0,0,0,.05), 0 8px 32px rgba(0,0,0,.06);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--murekkep); background: var(--zemin); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
/* 22.09: anywhere kelimeyi yer varken bile kırabiliyordu; break-word yalnız taşma kaçınılmazsa kırar (Yasa 31) */
p, li, dd, dt, h1, h2, h3, small, summary { text-wrap: pretty; overflow-wrap: break-word; }
.kap { width: 100%; max-width: var(--kap); margin: 0 auto; padding: 0 24px; }
.orta { text-align: center; }
.kucuk { font-size: 14px; color: var(--gri); line-height: 1.5; }
.alt { font-size: 19px; color: var(--gri); max-width: 40rem; margin: 16px 0 0; }
h1 { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 700; margin: 0; }
h1 .s { display: block; }
h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; margin: 0; max-width: 46rem; }
h2 .satir { display: block; }
h2 .satir + .satir { color: var(--gri2); }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; margin: 0; font-weight: 600; }
/* marka: Tenor Sans · harf aralığı 0.196em (Canva 196) · satır 1.4 · kapı marka_kapisi.py + marka_kurali.json (22.09 Faruk) */
.marka { font-family: "Tenor Sans", var(--serif); font-weight: 400; letter-spacing: 0.196em; line-height: 1.4; font-size: 16px; text-transform: uppercase; margin-right: -0.196em; }
.ust-etiket { font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gri2); margin: 0 0 16px; }

/* düğmeler */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 16px; line-height: 1; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .15s ease, background .15s ease, border-color .15s ease; font-family: inherit; }
.btn:active { transform: scale(.98); }
.btn-birincil { background: var(--murekkep); color: #fff; }
.btn-birincil:hover { background: #000; }
.btn-ikincil { background: transparent; color: var(--murekkep); border-color: var(--cizgi); }
.btn-ikincil:hover { border-color: var(--murekkep); }
.btn-beyaz { background: #fff; color: var(--murekkep); }
.btn-beyaz:hover { background: var(--zemin); }
.btn-kucuk { height: 38px; padding: 0 16px; font-size: 14px; }
.btn.tam { width: 100%; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(245,245,247,.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0,0,0,.06); }
.nav-ic { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 24px; }
.nav-linkler { display: flex; gap: 28px; font-size: 15px; color: var(--gri); }
.nav-linkler a:hover, .nav-linkler a.aktif { color: var(--murekkep); }
.nav-sag { display: flex; gap: 8px; align-items: center; }
.sayac { background: var(--murekkep); color: #fff; border-radius: 999px; font-size: 11px; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }

/* bölümler */
.ekran { padding: 112px 0; }
.ekran.gri { background: var(--zemin-niyet, #EDEDF0); }
.ekran.koyu { background: var(--siyah); color: #fff; }
.ekran.koyu .alt, .ekran.koyu .kucuk { color: #A1A1A6; }
.ekran.koyu h2 .satir + .satir { color: #86868B; }
.ekran.son { padding: 96px 0; }
.ekran.son .kap { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.ekran.son h2 { max-width: 52rem; }

/* 1 · hero */
.hero { padding: 88px 0 72px; background: var(--zemin); }
.hero-izgara { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.hero-baslik { grid-column: 1 / -1; margin-bottom: 8px; }
@media (min-width: 761px) { .hero-baslik .s { white-space: nowrap; } }
.hero-metin .alt { margin-top: 0; }
.hero-urun { box-shadow: var(--golge); }

/* ürün ekranı (sohbet) — tek bileşen, her yerde aynı */
.urun { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 10px; color: var(--murekkep); font-size: 15px; line-height: 1.45; }
.u-bas { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--cizgi); margin-bottom: 4px; }
.u-bas b { display: block; font-size: 14px; }
.u-bas small { display: block; font-size: 12px; color: var(--gri); }
.u-bas .saat { margin-left: auto; font-size: 12px; color: var(--gri2); font-variant-numeric: tabular-nums; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--siyah); display: grid; place-items: center; overflow: hidden; flex: none; }
.avatar img { width: 26px; height: auto; filter: invert(1); }
.u-ray, .u-siz { max-width: 88%; padding: 10px 14px; border-radius: 18px; }
.u-ray { background: #F0F0F3; border-bottom-left-radius: 6px; align-self: flex-start; }
.u-siz { background: var(--murekkep); color: #fff; border-bottom-right-radius: 6px; align-self: flex-end; }
.u-ray small { display: block; margin-top: 6px; font-size: 12px; color: var(--gri2); }
.u-giden { border: 1px solid var(--cizgi); border-radius: var(--r2); padding: 10px 12px; margin: 2px 0; background: #fff; }
.u-giden .ke-bas { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.u-giden .ke-bas b { font-size: 13px; display: block; }
.u-giden .ke-bas small { font-size: 12px; color: var(--gri); display: block; }
.u-giden p { margin: 0; font-size: 14px; }
/* 22.09 02:0x Faruk: "seçenekler yan yana olsun". A ve B eşit genişlikte tek satır; yer yoksa alta sarar. */
.u-secenek { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-self: flex-start; max-width: 100%; }
.u-secenek .sec { flex: 1 1 calc(50% - 8px); min-width: 150px; font-size: 13px; line-height: 1.35; }   /* 150 px altında alt alta sarar (QC yetim ölçümü) */
.u-secenek .sec { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border: 1px solid var(--cizgi); border-radius: 12px; font-size: 14px; }
.u-secenek .sec.secili { border-color: var(--murekkep); }
.u-secenek .sec i, .u-siz i { font-style: normal; font-weight: 700; font-size: 12px; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid currentColor; flex: none; }
.u-siz i { margin-right: 8px; vertical-align: middle; }

/* logo bandı: yalnız işaret, siyah beyaz */
.bant { padding: 8px 0 40px; background: var(--zemin); }
.bant .kap { overflow: hidden; }
.bant-liste { display: flex; flex-wrap: nowrap; width: max-content; margin: 0; padding: 24px 0 0; animation: bant-kay 40s linear infinite; }
.bant-grup { list-style: none; margin: 0; padding: 0 18px; display: flex; flex-wrap: nowrap; gap: 36px; flex: 0 0 auto; }
.bant-liste img { filter: grayscale(1) contrast(1.1); opacity: .55; width: auto; height: 26px; max-width: 120px; transition: opacity .2s; }
.bant-liste img.yazi { height: 18px; }  /* geniş yazı-logo (en/boy > 2,5): DHL; 22.09 Faruk 'aynı ölçüde ve okunabilir' */
.bant-grup { align-items: center; }
@media (hover: hover) { .bant-liste img:hover { opacity: 1; filter: none; } .bant:hover .bant-liste { animation-play-state: paused; } }
/* 23.09 Faruk: tek şerit (kullanılan + bağlanabilen, 38 logo) → süre öğe sayısıyla orantılı, hız eskisiyle aynı */
.bant-mcp .bant-liste { animation-duration: 95s; }
@keyframes bant-kay { from { transform: translateX(-25%); } to { transform: translateX(0); } }

/* 2 · kıyas + hesap */
.kiyas-izgara { margin-top: 40px; }
.kiyas { width: 100%; border-collapse: collapse; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); overflow: hidden; font-size: 16px; }
.kiyas th, .kiyas td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.kiyas thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--gri2); font-weight: 600; background: #FAFAFC; }
.kiyas tbody th { font-weight: 500; color: var(--gri); width: 42%; }
.kiyas tbody tr:last-child th, .kiyas tbody tr:last-child td { border-bottom: 0; }
.kiyas td:last-child { font-weight: 600; }
.kiyas td { white-space: nowrap; }
.kiyas tr.sok td b { white-space: nowrap; }
.kiyas tr.sok td { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kiyas tr.sok td b { font-size: 32px; }
.kiyas-dip { font-size: 14px; color: var(--gri); margin: 16px 4px 0; }
.hesap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; margin-top: 56px; align-items: start; }
.hesap-form { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 24px; }
.hesap-kapsam { margin: 8px 0 18px; font-size: 14px; color: var(--gri); line-height: 1.5; }
.hesap-form h3 { margin-bottom: 8px; }
.pozisyon { display: grid; grid-template-columns: 1fr 96px 160px; gap: 12px; align-items: end; padding: 14px 0; border-bottom: 1px solid var(--cizgi); }
.pozisyon.tek { grid-template-columns: 1fr 1fr; border-bottom: 0; }
.pozisyon > div b { display: block; font-size: 15px; }
.pozisyon > div small { display: block; font-size: 13px; color: var(--gri); }
.pozisyon label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--gri); }
.pozisyon input, .pozisyon select { height: 40px; border: 1px solid var(--cizgi); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 15px; color: var(--murekkep); background: #fff; width: 100%; }
.pozisyon input:focus, .pozisyon select:focus { outline: 2px solid var(--murekkep); outline-offset: 1px; border-color: transparent; }
.hesap-form .kucuk { margin: 12px 0 0; }
.kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 24px; }
.hesap-sonuc { position: sticky; top: 88px; }
.hesap-sonuc .satir { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--cizgi); font-size: 15px; }
.hesap-sonuc .satir[hidden] { display: none; }  /* 22.09: display:flex hidden'ı eziyordu, '0 TL' satırı görünüyordu */
.hesap-sonuc .satir span { color: var(--gri); }
.hesap-sonuc .satir b { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hesap-sonuc .satir.buyuk { font-size: 17px; }
.hesap-sonuc .satir.buyuk b { font-size: 28px; letter-spacing: -0.02em; }
.hesap-sonuc .satir.enbuyuk { font-size: 18px; padding: 16px 0; border-bottom: 2px solid var(--murekkep); }
.hesap-sonuc .satir.enbuyuk span { color: var(--murekkep); font-weight: 600; }
.hesap-sonuc .satir.enbuyuk b { font-size: 40px; letter-spacing: -0.03em; line-height: 1; }  /* 22.09 Faruk: yıllık kâr en göz alıcı, sonra aylık, sonra diğerleri */
.hesap-sonuc .kucuk { margin: 12px 0 16px; }

/* 3 · sonunda */
.sonunda-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.sonunda-metin .alt { margin-top: 20px; }
/* kurucu (21.09) */
.kurucu-izgara { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.kurucu-foto { margin: 0; position: relative; }
.kurucu-foto img + .monogram { display: none; }
.kurucu-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); box-shadow: var(--golge); background: #E8E8ED; }
.kurucu-foto .monogram { display: flex; aspect-ratio: 4 / 5; align-items: center; justify-content: center; border-radius: var(--r); background: var(--murekkep); color: #fff; font-family: var(--serif); font-size: clamp(64px, 12vw, 120px); letter-spacing: .04em; }
.kurucu-foto figcaption { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.kurucu-foto figcaption b { font-size: 17px; }
.kurucu-foto figcaption span { font-size: 14px; color: var(--gri); }
.kurucu-metin .alt + .alt { margin-top: 12px; }
.kurucu-metin .btn { margin-top: 28px; }
.kurucu-metin .kucuk { margin-top: 20px; }
@media (max-width: 760px) { .kurucu-izgara { grid-template-columns: 1fr; gap: 32px; } .kurucu-foto { max-width: 320px; } }
.sifirlar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 32px 0; }
.sifirlar > div { border: 1px solid var(--cizgi-koyu); border-radius: var(--r2); padding: 18px 20px; }
.sifirlar b { display: block; font-size: 28px; letter-spacing: -0.02em; line-height: 1; }
.sifirlar span { display: block; font-size: 13px; color: #A1A1A6; margin-top: 8px; }
.sifirlar .son { background: #fff; color: var(--murekkep); border-color: #fff; }
.sifirlar .son span { color: var(--gri); }
.sonunda-metin .kucuk { margin-top: 20px; }
.sonunda-urun { color: var(--murekkep); }

/* 4 · bir gün */
.gun-akis { margin-top: 48px; display: grid; gap: 24px; }
/* 22.09 01:4x — Faruk: "düzen sağlanmamış". .an düzeni SAAT SÜTUNU + gövde içindir; neden.html'de 6 kart
   saat sütunu olmadan class="kart an" taşıyordu → paragraflar 112 px'lik şeride sıkışıp kelimeler ortadan kırılıyordu
   (ölçüm: .an-soz genişliği 1440 px ekranda 112 px). Saat sütunu yoksa düzen tek sütuna döner. */
.an { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; align-items: start; }
.an:not(:has(> .an-saat)) { display: block; }
.an-saat { position: sticky; top: 88px; }
.an-saat b { display: block; font-size: 32px; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.an-saat small { display: block; margin-top: 8px; font-size: 13px; color: var(--gri); }
.an-govde { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 24px; }
.an-bas { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.an-bas h3 { font-size: 22px; }
.yaka { font-size: 12px; color: var(--gri); border: 1px solid var(--cizgi); border-radius: 999px; padding: 3px 10px; }
.an-govde > .alt { font-size: 15px; margin: 4px 0 20px; max-width: none; }
/* 22.09 02:0x — Faruk: "seçenekler yan yana olsun" + "düzen için gerekirse puntoda +/- yap".
   Ölçüm: orta sütun (sohbet) 285 px'ti, iki seçenek yan yana 125 px'e düşüp dört satıra bölünüyordu.
   Sohbet sütunu genişletildi (0.85 / 1.3 / 0.85), seçenek puntosu 14 → 13 px. */
.uc-adim { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.16fr) minmax(0, .92fr); gap: 16px; align-items: start; }
.adim-kart { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* 22.09 01:5x — Faruk: "yükleniyor efekti hissini metinle ver; sonuç dikkat çekerken dikkati ona sorun ve
   'RAYNSIS size danışıyor' başlıkları yöneltsin". Üç başlık artık eşit ağırlıkta etiket değil, ilerleyen bir zincir:
   ① aralarında akan bağlantı çizgisi ② görünürlüğe girince sırayla yazılır (sorun → danışıyor → sonuç)
   ③ ilk ikisi soluk ve işlem hâlinde (danışıyorda üç nokta akar), sonuç koyu ve tamamlanmış. */
.adim-no { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--gri2); font-weight: 600;
  display: flex; align-items: center; gap: 8px; position: relative; }
.adim-kart:nth-child(1) .adim-no::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gri2); flex: none; }
.adim-kart:nth-child(2) .adim-no::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gri2); flex: none; }
.adim-kart:nth-child(3) .adim-no { color: var(--murekkep); }
.adim-kart:nth-child(3) .adim-no::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--murekkep); flex: none; }
/* 22.09 01:5x'te eklenen "akan bağ" çizgisi KALDIRILDI (Faruk 01:58): left:calc(100% + 10px) başlığın kendi genişliğinden
   ölçtüğü için sütun aralığı 64 px'ten darken çizgi KOMŞU BAŞLIĞIN ÜSTÜNDEN geçiyordu (üstü çizili görünüm).
   Akış artık yalnız metinle veriliyor: nokta + sırayla beliriş + sonuçta koyu renk. Kapı: süsleme taşması ölçümü. */
/* işlem hâli: ikinci başlıkta üç nokta akar (yalnız bölüm görünürken) */
.adim-kart:nth-child(2) .adim-no i { font-style: normal; letter-spacing: .2em; opacity: .55; }
.reveal.gorunur .adim-kart:nth-child(2) .adim-no i { animation: nokta-akis 1.4s steps(4, end) infinite; }
@keyframes nokta-akis { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
/* sırayla yazılış: üç başlık 0 / 160 / 320 ms gecikmeyle belirir */
.uc-adim .adim-no { opacity: 0; transform: translateY(4px); transition: opacity .45s ease, transform .45s ease; }
.uc-adim.yazildi .adim-kart:nth-child(1) .adim-no { opacity: 1; transform: none; transition-delay: 0ms; }
.uc-adim.yazildi .adim-kart:nth-child(2) .adim-no { opacity: 1; transform: none; transition-delay: 160ms; }
.uc-adim.yazildi .adim-kart:nth-child(3) .adim-no { opacity: 1; transform: none; transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  .uc-adim .adim-no { opacity: 1; transform: none; transition: none; }
  .reveal.gorunur .adim-kart:nth-child(2) .adim-no i { animation: none; }
}

.alan-kart { border: 1px solid var(--cizgi); border-radius: var(--r2); padding: 14px; background: #FAFAFC; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.alan-buyuk { margin: 0; font-size: 15px; font-weight: 500; }
.alan-sonuc { margin: 0; font-size: 15px; font-weight: 500; }
.alan-kayit { color: var(--gri2); font-size: 12px; }
.sohbet-ekran { padding: 12px; gap: 8px; }
.sohbet-ekran .u-ray, .sohbet-ekran .u-siz { max-width: 100%; font-size: 14px; }
.kanal-ekran { border: 1px solid var(--cizgi); border-radius: var(--r2); background: #fff; overflow: hidden; }
.ke-bas { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--cizgi); }
.ke-bas b { display: block; font-size: 13px; }
.ke-bas small { display: block; font-size: 12px; color: var(--gri); }
.kanal { width: 20px; height: 20px; flex: none; }
.ke-govde { padding: 12px; background: #F0F0F3; }
.ke-balon { background: #fff; border-radius: 12px; border-bottom-left-radius: 4px; padding: 10px 12px; font-size: 14px; }
.ke-saat { display: block; text-align: right; font-size: 11px; color: var(--gri2); margin-top: 6px; }
.ke-saat .tik { width: 16px; height: 8px; vertical-align: middle; }
.ke-saat .tik path { stroke: var(--gri2); }
/* alana özgü görsel kartlar */
.gorsel-kart { border-top: 1px solid var(--cizgi); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.g-bas b { display: block; font-size: 13px; }
.g-bas small { display: block; font-size: 12px; color: var(--gri); }
.g-dip { margin: 0; font-size: 12px; color: var(--gri2); }
.g-slot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.g-slot .h { font-size: 12px; padding: 6px 0; text-align: center; border-radius: 8px; background: #fff; border: 1px solid var(--cizgi); font-variant-numeric: tabular-nums; }
.g-slot .h.dolu { background: var(--murekkep); color: #fff; border-color: var(--murekkep); }
.g-slot .h.cevapsiz { border-style: dashed; color: var(--gri); }
.g-slot .h.teklif { background: #fff; border-color: var(--murekkep); font-weight: 700; }
.g-slot .h.bos { color: var(--gri2); }
.g-acik { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--gri); }
.g-acik i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--cizgi); margin-right: 4px; vertical-align: -1px; background: #fff; }
.g-acik i.dolu { background: var(--murekkep); border-color: var(--murekkep); }
.g-acik i.cevapsiz { border-style: dashed; }
.g-acik i.teklif { border-color: var(--murekkep); }
.g-manset { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.g-manset b { white-space: nowrap; }
.g-manset b { font-size: 24px; letter-spacing: -0.02em; }
.g-manset span { font-size: 12px; color: var(--gri); }
.g-cubuk { display: flex; flex-direction: column; gap: 4px; }
.g-ust { display: flex; justify-content: space-between; font-size: 13px; }
.g-ust b { font-variant-numeric: tabular-nums; }
.g-bar { height: 6px; background: #E5E5EA; border-radius: 3px; overflow: hidden; }
.g-bar i { display: block; height: 100%; background: var(--murekkep); border-radius: 3px; }
.g-bar i.kotu { background: var(--gri2); }
b.kotu { color: var(--gri); }
b.iyi { color: var(--murekkep); }
.g-adim { display: flex; flex-direction: column; gap: 8px; }
.g-adim .a { display: grid; grid-template-columns: 12px 1fr; gap: 10px; align-items: baseline; font-size: 13px; }
.g-adim .a i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--murekkep); background: #fff; }
.g-adim .a.bitti i, .g-adim .a.tamam i { background: var(--murekkep); }
.g-adim .a.simdi i { box-shadow: 0 0 0 3px rgba(29,29,31,.15); background: var(--murekkep); }
.g-adim .a b { display: block; }
.g-adim .a small { display: block; color: var(--gri); font-size: 12px; }
.g-sayi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.g-sayi > div { background: #fff; border: 1px solid var(--cizgi); border-radius: 10px; padding: 10px; }
.g-sayi small { display: block; font-size: 11px; color: var(--gri); }
.g-sayi b { display: block; font-size: 20px; letter-spacing: -0.02em; }
.g-sayi span { display: block; font-size: 11px; color: var(--gri2); }
.g-eslesme { display: grid; gap: 8px; }
.g-eslesme > div { background: #fff; border: 1px solid var(--cizgi); border-radius: 10px; padding: 10px; display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.g-eslesme small { color: var(--gri2); }
.g-satir { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; font-size: 13px; padding: 6px 0; border-bottom: 1px dashed var(--cizgi); }
.g-satir:last-of-type { border-bottom: 0; }
.g-satir em { font-style: normal; color: var(--gri2); font-variant-numeric: tabular-nums; }
.g-satir b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.diger { margin-top: 32px; border-top: 1px solid var(--cizgi); }
.diger summary, .sss summary { transition: color .25s ease; }
@media (hover: hover) { .diger summary:hover, .sss summary:hover { color: #000; } .diger summary:hover::after, .sss summary:hover::after { color: var(--murekkep); } }
.diger summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 24px 0; font-size: 20px; font-weight: 600; }
.diger summary::-webkit-details-marker { display: none; }
.diger summary::after { content: "+"; margin-left: auto; font-size: 24px; color: var(--gri2); }
.diger[open] summary::after { content: "–"; }
.diger summary small { font-size: 14px; color: var(--gri); font-weight: 400; }
.diger .gun-akis { margin-top: 0; padding-bottom: 8px; }

/* 5 · paketler */
.paket-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; align-items: stretch; }
.paket { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.paket.vurgu { border-color: var(--murekkep); box-shadow: var(--golge); }
.paket .rozet { position: absolute; top: -12px; left: 24px; background: var(--murekkep); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.paket .no { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gri2); font-weight: 600; }
.paket h3 { font-size: 24px; }
.paket .kisa { margin: 0; color: var(--gri); font-size: 15px; min-height: 3.2em; }
.paket .fiyat { display: flex; align-items: baseline; gap: 8px; padding: 12px 0; border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.paket .fiyat b { font-size: 34px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.paket .fiyat span { color: var(--gri); font-size: 14px; }
.paket ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; color: var(--murekkep); flex: 1; }
.paket li { padding-left: 18px; position: relative; }
.paket li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--murekkep); }
.ekran.gri .kucuk.orta { margin: 32px auto 0; max-width: 44rem; }

/* sınırlar + sss */
.sss-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.sinir { margin: 40px 0 0; display: grid; gap: 0; }
.sinir > div { padding: 16px 0; border-top: 1px solid var(--cizgi); }
.sinir dt { font-weight: 600; font-size: 16px; }
.sinir dd { margin: 4px 0 0; color: var(--gri); font-size: 15px; }
.sss h3 { margin-bottom: 8px; }
.sss details { border-top: 1px solid var(--cizgi); }
.sss details:last-child { border-bottom: 1px solid var(--cizgi); }
.sss summary { list-style: none; cursor: pointer; padding: 16px 32px 16px 0; font-weight: 600; font-size: 16px; position: relative; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; position: absolute; right: 0; top: 14px; color: var(--gri2); font-size: 20px; }
.sss details[open] summary::after { content: "–"; }
.sss .cevap { padding: 0 0 16px; color: var(--gri); font-size: 15px; }

/* footer */
footer { background: var(--siyah); color: #A1A1A6; padding: 48px 0 40px; font-size: 14px; }
footer .ust { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid var(--cizgi-koyu); }
footer .marka { color: #fff; }
footer .linkler { display: flex; gap: 24px; flex-wrap: wrap; }
footer .linkler a:hover { color: #fff; }
footer .alt-satir { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; font-size: 13px; }

/* sepet */
.perde { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 60; }
.cekmece { position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100%); background: #fff; z-index: 70; transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0,0,0,.12); }
.cekmece.acik { transform: none; }
.cekmece .bas { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--cizgi); }
.cekmece .kapat { background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: var(--gri); }
.cekmece .govde { flex: 1; overflow: auto; padding: 24px; }
.cekmece .dip { padding: 20px 24px; border-top: 1px solid var(--cizgi); }
.cekmece .toplam { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 12px; }
.cekmece .kucuk { margin: 12px 0 0; }
.sepet-satir { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.sepet-satir small { display: block; color: var(--gri); }
.sepet-satir button { background: none; border: 0; color: var(--gri); font-size: 13px; cursor: pointer; text-decoration: underline; font-family: inherit; }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* mobil yapışkan */

/* ortaya çıkış (hafif, tek kez) */
.raynsis-js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal.goster { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* duyarlı */
@media (max-width: 1024px) {
  .hero-izgara, .sonunda-izgara { grid-template-columns: 1fr; gap: 40px; }
  .hesap { grid-template-columns: 1fr; }
  .hesap-sonuc { position: static; }
  .uc-adim { grid-template-columns: 1fr; }
  .sss-izgara { grid-template-columns: 1fr; gap: 48px; }
  .an { grid-template-columns: 88px 1fr; gap: 16px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .kap { padding: 0 20px; }
  .ekran { padding: 72px 0; }
  .hero { padding: 48px 0 40px; }
  .alt { font-size: 17px; }
  .nav-linkler { display: none; }
  .nav-sag .btn-birincil { display: none; }
  .cta .btn { width: 100%; }
  .pozisyon { grid-template-columns: 76px 1fr; }
  .pozisyon > div { grid-column: 1 / -1; }
  .kiyas th, .kiyas td { padding: 12px; font-size: 14px; }
  .kiyas tbody th { width: 34%; font-size: 13px; }
  .kiyas td { font-size: 13px; padding: 10px 8px; }
  .kiyas thead th { font-size: 11px; padding: 10px 8px; }
  .kiyas tr.sok td { font-size: 18px; }
  .kiyas tr.sok td b { font-size: 20px; }
  .sifirlar { grid-template-columns: 1fr 1fr; }
  .sifirlar b { font-size: 22px; }
  .an { grid-template-columns: 1fr; gap: 12px; }
  .an-saat { position: static; display: block; }
  .an-saat small { display: block; margin-top: 4px; }
  .an-saat b { font-size: 24px; }
  .an-saat small { margin: 0; }
  .an-govde { padding: 16px; }
  .paket-izgara { grid-template-columns: 1fr; }
  .paket .kisa { min-height: 0; }
}

/* 21.09 00:5x Faruk: "ana referans arka plan = bir önceki model ana sayfası" — koyu hero (tekgecis öncesi .sinema paleti: siyah zemin, glow, cam kart, beyaz büyük harf başlık 2 satır) */
.hero { background: var(--siyah); color: #fff; position: relative; overflow: hidden; padding: 64px 0 56px; }
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hero::before { background: radial-gradient(60% 55% at 72% 38%, rgba(255,255,255,.14), rgba(255,255,255,.03) 45%, transparent 70%); }
.hero::after { background: radial-gradient(48% 60% at 70% 50%, rgba(180,205,235,.20), rgba(180,205,235,.04) 50%, transparent 72%); }
.hero > .kap { position: relative; z-index: 1; }
.hero-izgara { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); grid-template-rows: auto auto; gap: 36px 48px; align-items: stretch; }
.hero-baslik { grid-column: 1 / -1; grid-row: 1; margin: 0; color: #fff; text-transform: uppercase; font-size: clamp(2.4rem, 4.9vw, 4rem); line-height: .94; letter-spacing: -.045em; }
.hero-urun { grid-column: 1; grid-row: 2; }
.hero-metin { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.hero-metin .alt { color: #E5E5EA; font-size: 16px; line-height: 1.55; max-width: 28rem; margin: 0; }
.hero-metin .cta { margin: 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.hero .urun { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 40px 120px rgba(150,190,240,.18), 0 0 0 1px rgba(255,255,255,.04) inset; }
.hero .u-bas { border-bottom-color: rgba(255,255,255,.12); }
.hero .u-bas small, .hero .u-bas .saat, .hero .u-ray small, .hero .urun .kucuk { color: #A1A1A6; }
.hero .u-ray { background: rgba(255,255,255,.09); color: #fff; }
.hero .u-siz { background: #fff; color: var(--siyah); }
.hero .avatar { background: #fff; } .hero .avatar img { filter: none; }
.hero .btn-birincil { background: #fff; color: var(--siyah); border-color: #fff; } .hero .btn-birincil:hover { background: var(--zemin); }
.hero .btn-ikincil { color: #fff; border-color: rgba(255,255,255,.4); } .hero .btn-ikincil:hover { border-color: #fff; }
.nav.koyu { background: var(--siyah); border-bottom-color: var(--siyah); -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav.koyu .marka, .nav.koyu .nav-linkler a { color: #fff; } .nav.koyu .nav-linkler { color: #A1A1A6; }
.nav.koyu .btn-ikincil { color: #fff; border-color: rgba(255,255,255,.4); } .nav.koyu .btn-birincil { background: #fff; color: var(--siyah); border-color: #fff; }
@media (max-width: 760px) {
  .hero { padding: 40px 0 40px; }
  .hero-izgara { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 24px; }
  .hero-baslik, .hero-urun, .hero-metin { grid-column: 1; }
  .hero-metin { grid-row: 2; } .hero-urun { grid-row: 3; }
  .hero-metin .cta { justify-content: flex-start; }
}
.hero .u-giden { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #E5E5EA; }
.hero .u-giden b, .hero .u-giden .ke-bas b { color: #fff; } .hero .u-giden small, .hero .ke-bas small { color: #A1A1A6; }
.hero .ke-bas { border-bottom-color: rgba(255,255,255,.12); }

.btn-sepet { display: inline-flex; align-items: center; gap: 6px; padding-left: 10px; padding-right: 10px; }
.btn-sepet svg { display: block; }
.sayac[hidden] { display: none; }

/* 21.09 Faruk: sohbet şablonundaki mesajlar sırayla belirir (görünüme girince) */
.urun > .u-ray, .urun > .u-siz, .urun > .u-giden, .urun > .u-secenek { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.urun.goster > .u-ray, .urun.goster > .u-siz, .urun.goster > .u-giden, .urun.goster > .u-secenek { opacity: 1; transform: none; }
.urun.goster > :nth-child(2) { transition-delay: .1s } .urun.goster > :nth-child(3) { transition-delay: .5s } .urun.goster > :nth-child(4) { transition-delay: .9s }
.urun.goster > :nth-child(5) { transition-delay: 1.3s } .urun.goster > :nth-child(6) { transition-delay: 1.7s } .urun.goster > :nth-child(7) { transition-delay: 2.1s } .urun.goster > :nth-child(8) { transition-delay: 2.5s }
@media (prefers-reduced-motion: reduce) { .urun > .u-ray, .urun > .u-siz, .urun > .u-giden, .urun > .u-secenek { opacity: 1; transform: none; transition: none; } .bant-liste { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }

/* 21.09 onarım: neden.html "tek soru" diyagramı (tek geçişte düşmüştü) */
.akis { max-width: 60rem; margin: 40px auto 0; color: var(--murekkep); }
.akis svg { width: 100%; height: auto; display: block; font: 500 15px/1 system-ui, -apple-system, sans-serif; }
.akis .dugum rect, .akis .dugum circle { fill: var(--yuzey); stroke: var(--cizgi); stroke-width: 1.5; }
.akis .dugum.siz rect, .akis .dugum.ray circle { fill: var(--murekkep); stroke: var(--murekkep); }
.akis .dugum.siz text, .akis .dugum.ray text { fill: #fff; }
.akis .dugum.ray text { font-weight: 700; font-size: 20px; letter-spacing: .02em; }
.akis .dugum text { text-anchor: middle; fill: var(--murekkep); }
.akis .hat { stroke: var(--murekkep); stroke-width: 1.5; stroke-dasharray: 6 6; opacity: .55; }
.akis .dugum.kat { opacity: 0; transform: translateX(-8px); transition: opacity .5s ease, transform .6s ease; }
.akis.goster .dugum.kat { opacity: 1; transform: none; }
.akis.goster .dugum.kat:nth-of-type(4) { transition-delay: .5s } .akis.goster .dugum.kat:nth-of-type(5) { transition-delay: .62s } .akis.goster .dugum.kat:nth-of-type(6) { transition-delay: .74s } .akis.goster .dugum.kat:nth-of-type(7) { transition-delay: .86s } .akis.goster .dugum.kat:nth-of-type(8) { transition-delay: .98s }
@media (max-width: 720px) { .akis svg { font-size: 22px; } .akis .dugum.ray text { font-size: 26px; } }
/* 21.09 Faruk: mobilde "bir gün" kartları yatay kaydırmalı (scroll azalsın) */
@media (max-width: 720px) {
  .gun-ipucu { display: block; font-size: 13px; color: var(--gri); margin-top: 12px; }
}
.gun-ipucu { display: none; }


/* 21.09 ONARIM: neden.html sınıfları (tek geçiş yeniden yazımı 21.09 00:31 düşürmüştü; yedek stil.css.bak-2026-09-21-tekgecis'ten, değişkenler eşlendi) */
p, h1, h2, h3, .rol, .an-soz, .kucuk, .dip {overflow-wrap: break-word;}
.izgara {display: grid; gap: 24px; grid-template-columns: minmax(0,1fr);}
@media (min-width: 720px) {
  .izgara-3 {grid-template-columns: repeat(3, minmax(0,1fr));}
  .izgara-2 {grid-template-columns: repeat(2, minmax(0,1fr));}
}
.logo {display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.08em; font-size: 15px;}
.logo .goz {width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--murekkep); position: relative;}
.logo .goz::after {content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--murekkep);}
.surec .n {font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--gri2); padding-top: 6px;}
/* ---------- kıyas tablosu ---------- */
.tablo-kap {overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--cizgi-koyu); border-radius: var(--r);}
td.evet {color: #fff; font-weight: 600;}
td.hayir {color: #A1A1A6;}
.raynsis-js .reveal-grup > * {opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(.2,.8,.2,1), transform 700ms cubic-bezier(.2,.8,.2,1);}
.reveal-grup.goster > * {opacity: 1; transform: none;}
.reveal-grup.goster > *:nth-child(2) {transition-delay: 90ms;}
.reveal-grup.goster > *:nth-child(3) {transition-delay: 180ms;}
.reveal-grup.goster > *:nth-child(4) {transition-delay: 270ms;}
.mesaj {border: 1px solid var(--cizgi); border-radius: var(--r); padding: 24px; background: #fff; display: none;}
.mesaj.goster {display: block;}
.mesaj.tamam {border-color: var(--murekkep);}
.mesaj .no {font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.25rem; margin: 8px 0;}
.reveal, .reveal-grup > * {opacity: 1 !important; transform: none !important; transition: none !important;}
.matris td.evet {color: var(--murekkep); font-weight: 600;}
.matris td.hayir {color: var(--gri2);}
/* ---------- anlar ---------- */
.an .an-soz {font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; color: var(--murekkep); margin: 0 0 16px;}
.rol {font-size: 13px; color: var(--gri); margin: 0 0 12px; line-height: 1.4;}
.rol b {color: var(--murekkep); font-weight: 600;}
.eleman-tablo td .kucuk {display: block; margin-top: 2px; font-weight: 400;}
.eleman-tablo tr.toplam td {font-weight: 600; border-top: 2px solid var(--murekkep);}
.eleman-tablo tr.toplam td.evet, .eleman-tablo tr.toplam td.hayir {font-size: 1.05rem;}
/* Kıyas vurgusu: insan tarafı soluk, RAYNSIS tarafı koyu (Faruk 19.09 20:04) */
.kart .bugun {color: var(--gri);}
.kart .bugun b {color: var(--gri); font-weight: 500;}
.kart .sis {color: var(--murekkep); font-weight: 500; border-left: 3px solid var(--murekkep); padding-left: 12px; margin-top: 12px;}
.kart .sis b {font-weight: 700;}
.kart .sis .yapmaz {display: block; margin-top: 6px; font-weight: 600;}
.reveal-grup.goster .grafik rect {transform: scaleX(1);}
.reveal-grup.goster .grafik text.deger {opacity: 1;}
.reveal.goster tbody tr.toplam td.evet, .reveal.goster .eleman-tablo td.evet {transition: color 600ms 400ms;}
.koyu .hiz-tablo td.hayir {color: #A1A1A6;}
.koyu .hiz-tablo td.evet {color: #fff; font-weight: 600;}
.koyu .tablo-kap {border-color: var(--cizgi-koyu);}
/* ================= GELECEKTEN MESAJ — onay kartı ================= */
.onay-karti {max-width: 44rem; margin: 48px auto 0; background: var(--siyah); color: #fff; border-radius: 20px; padding: 24px 24px 20px; box-shadow: 0 24px 60px rgba(0,0,0,0.18);}
.onay-karti .bas {font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--koyu-muted, #A1A1A6); display: flex; align-items: center; gap: 8px;}
.onay-karti .nokta {width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: nabiz 1.6s ease-in-out infinite;}
}
.onay-karti .soru {font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 14px 0 20px;}
.onay-karti .gelecek {display: grid; gap: 12px;}
@media (min-width: 720px) {
  .onay-karti .gelecek {grid-template-columns: 1fr 1fr;}
}
.onay-karti .gelecek > div {background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.5; color: #D2D2D7;}
.onay-karti .gelecek b {display: block; color: #fff; margin-bottom: 6px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;}
.onay-karti .dugmeler {display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap;}
.onay-karti .dugmeler span {flex: 1 1 160px; text-align: center; padding: 12px 16px; border-radius: 999px; font-weight: 600; font-size: 15px;}
.onay-karti .d-evet {background: #fff; color: var(--siyah);}
.onay-karti .d-hayir {background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.35);}
.onay-karti .kucuk {color: var(--koyu-muted, #A1A1A6); margin-top: 14px;}
.reveal.onay-karti .gelecek > div {opacity: 0; transform: translateY(10px); transition: opacity 500ms cubic-bezier(.2,.8,.2,1), transform 600ms cubic-bezier(.2,.8,.2,1);}
.reveal.goster.onay-karti .gelecek > div:first-child {opacity: 1; transform: none; transition-delay: 350ms;}
.reveal.goster.onay-karti .gelecek > div:last-child {opacity: 1; transform: none; transition-delay: 650ms;}
@media (prefers-reduced-motion: reduce) {
  .onay-karti .nokta {animation: none;}
  .reveal.onay-karti .gelecek > div {opacity: 1 !important; transform: none !important; transition: none !important;}
}
.izgara {gap: 32px;}
.izgara {gap: 40px;}
.bolum-cta {margin-top: 48px; display: flex; justify-content: flex-start;}
.kap[style*="text-align:center"] .bolum-cta {justify-content: center;}
/* rol satırı: yaka rozeti + unvan (Faruk 20:45: kısa, sınıflandırılmış) */
.rol {display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px;}
.rol b {color: var(--murekkep); font-weight: 600;}
.yaka.mavi {background: var(--murekkep); color: #fff; border-color: var(--murekkep);}
.koyu .yaka.mavi {background: #fff; color: var(--siyah);}
.koyu .rol b {color: #fff;}
/* ================= SUNUM DÜZENİ (Apple ürün sayfası: her ekran tek başlık, tek görsel) 19.09 20:5x ================= */
.sunum .ekran {padding-block: clamp(96px, 12vh, 168px);}
.sunum .ekran > .kap > .etiket {display: inline-block; margin-bottom: 20px;}
.sunum .ekran h2 {font-size: clamp(2.25rem, 5.2vw, 4.75rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; max-width: 22ch;}
.sunum .ekran.orta {text-align: center;}
.sunum .ekran.orta h2 {margin-inline: auto;}
.sunum .ekran.orta > .kap > .etiket {display: block;}
.sunum .ekran .alt {margin-top: 20px; font-size: clamp(1.05rem, 1.5vw, 1.3rem);}
.sunum .orta-metin {margin-inline: auto;}
.sunum .ekran .izgara, .sunum .ekran .tablo-kap, .sunum .ekran .hesap, .sunum .ekran .sinir, .sunum .ekran .zaman, .sunum .ekran .akis, .sunum .ekran .cag-akis, .sunum .ekran .mikro-sohbet, .sunum .ekran .sss {margin-top: 56px;}
.sunum .ekran .kucuk {margin-top: 12px;}
.sunum .koyu .kucuk, .sunum .koyu .alt {color: var(--koyu-muted, #A1A1A6);}
.sunum .koyu h2, .sunum .koyu .etiket {color: #fff;}
.orta-cta {justify-content: center;}
.sunum .cta {display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px;}
.sunum .hero {padding-block: clamp(96px, 14vh, 160px) clamp(72px, 9vh, 120px);}
.sunum .hero h1 {font-size: clamp(2.5rem, 5.4vw, 5.25rem);}
/* eski çağ → RAYNSIS */
.cag-akis {display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; max-width: 60rem; margin-inline: auto;}
.cag-akis .eski, .cag-akis .yeni {border: 1px solid rgba(255,255,255,0.18); border-radius: 20px; padding: 28px 24px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center;}
.cag-akis .eski span {padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.3); color: #D2D2D7; font-size: 14px;}
.cag-akis small {flex-basis: 100%; text-align: center; color: var(--koyu-muted, #A1A1A6); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 8px;}
.cag-akis .ok {font-size: 2.5rem; color: #fff;}
.cag-akis .yeni {background: #fff; color: var(--siyah); flex-direction: column;}
.cag-akis .yeni b {font-size: 1.75rem; letter-spacing: -0.02em;}
.cag-akis .yeni small {color: var(--gri);}
.goz-buyuk {width: 44px; height: 44px; border-radius: 50%; border: 5px solid var(--siyah); position: relative;}
.goz-buyuk::after {content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--siyah);}
@media (max-width: 720px) {
  .cag-akis {grid-template-columns: 1fr;}
  .cag-akis .ok {transform: rotate(90deg);}
}
.an-izgara .kart {padding: 24px;}
.an-izgara .an-soz {font-size: 1.15rem; margin-bottom: 10px;}
.kart.an {display: block;}   /* :has desteklemeyen tarayıcı için yedek */
/* 22.09 QC: 768–1024 px'te üç sütun ~230 px'e düşüp kelimeleri kırıyordu → iki sütun */
@media (min-width: 721px) and (max-width: 1024px) { .izgara-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 22.09: 834 px'te üç sütun = 185 px metin kutusu → cümle sonu ya kırılıyor ya yetim kalıyordu (Yasa 31'in iki ucu).
     Kutuyu genişletmek tek doğru çözüm: iki sütun. Bölüm o zaman 3,4 × ekran olduğu için dekoratif bölüm görseli bu bantta gizlenir. */
  #sektor figure.bant { display: none; } }
.an-izgara .sis {margin-top: 10px;}
.daha {margin-top: 32px; max-width: 48rem; margin-inline: auto; text-align: left;}
.daha summary {cursor: pointer; font-weight: 600; color: var(--murekkep); padding: 12px 0; border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi);}
.koyu .daha summary {color: #fff; border-color: rgba(255,255,255,0.18);}
.daha p {color: var(--gri); font-size: 15px; padding: 12px 0;}
/* abonelik farkı ✓ ✗ */
.fark-tablo td.evet, .fark-tablo td.hayir {white-space: normal; font-weight: 600;}
.koyu .fark-tablo th, .koyu .fark-tablo td {border-color: rgba(255,255,255,0.14);}
.koyu .fark-tablo td.hayir {color: var(--koyu-muted, #A1A1A6);}
.koyu .fark-tablo td.evet {color: #fff;}
.koyu .eleman-tablo th, .koyu .eleman-tablo td {border-color: rgba(255,255,255,0.14);}
.koyu .eleman-tablo td.hayir {color: var(--koyu-muted, #A1A1A6);}
.koyu .eleman-tablo td.evet {color: #fff;}
.koyu .eleman-tablo tr.toplam td {border-top-color: #fff;}
.koyu .tablo-kap {border-color: rgba(255,255,255,0.14);}
/* zaman çizelgesi */
.zaman {display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; max-width: 64rem; margin-inline: auto; position: relative; text-align: left;}
.zaman::before {content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 2px; background: var(--cizgi);}
.zaman .adim {padding: 40px 24px 0; position: relative;}
.zaman .adim::before {content: ""; position: absolute; top: 6px; left: 24px; width: 18px; height: 18px; border-radius: 50%; background: var(--murekkep); border: 4px solid var(--zemin); box-shadow: 0 0 0 2px var(--murekkep);}
.zaman .n {font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gri);}
.zaman h3 {margin-top: 6px; font-size: 1.25rem;}
.zaman p {color: var(--gri); margin-top: 6px; font-size: 15px;}
@media (max-width: 720px) {
  .zaman {grid-template-columns: 1fr;}
  .zaman::before {display: none;}
}
/* mikro sohbet koyu zeminde */
.mikro-sohbet {max-width: 40rem; margin-inline: auto; text-align: left;}
.koyu .kart h3, .koyu .kart .an-soz, .koyu .kart .no {color: #fff;}
/* ✓ ✗ işaretleri CSS ile (metin kapısı emoji saymasın) */
.fark-tablo td.isaret::before {display: inline-block; width: 1.4em; font-weight: 700;}
.fark-tablo td.evet.isaret::before {content: "\2713";}
.fark-tablo td.hayir.isaret::before {content: "\2717";}
.cag-akis {grid-template-columns: 1.6fr auto 1fr; max-width: 72rem;}
.cag-akis .eski span {font-size: 13px; padding: 8px 13px;}
.cag-akis .eski {gap: 8px;}
@media (max-width: 720px) {
  .cag-akis {grid-template-columns: 1fr;}
}
/* onay kartı: gidecek mesaj önizlemesi (Faruk 21:14) */
.onay-karti .mesaj {display: block; margin-top: 12px; padding: 10px 12px; border-left: 2px solid rgba(255,255,255,0.45); background: rgba(255,255,255,0.04); border-radius: 0 10px 10px 0; color: #fff; font-size: 13px; line-height: 1.5;}
.onay-karti .mesaj i {display: block; font-style: normal; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--koyu-muted, #A1A1A6); margin-bottom: 4px;}
/* ================= TİPOGRAFİ HİYERARŞİSİ (Faruk 21:14: h1-h2-h3 ve satır aralığı vurgusu) ================= */
.sunum h1 {font-size: clamp(2.75rem, 6.2vw, 6rem); line-height: 1.0; letter-spacing: -0.04em; font-weight: 700;}
.sunum .ekran h2, .sunum .serit + .ekran h2 {font-size: clamp(2.25rem, 4.6vw, 4.25rem); line-height: 1.06; letter-spacing: -0.03em; font-weight: 700;}
.sunum h3 {font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height: 1.2; letter-spacing: -0.015em; font-weight: 600;}
.sunum .kart h3 {margin-bottom: 10px;}
.sunum .kart .an-soz {font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -0.015em;}
.sunum .etiket {font-size: 12px; letter-spacing: 0.14em; font-weight: 600;}
.sunum .ekran > .kap > .etiket {margin-bottom: 16px;}
.sunum .ekran .alt {margin-top: 24px; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.45; max-width: 46rem;}
.sunum .hero .alt {font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.45; margin-top: 28px;}
.sunum .kart p, .sunum .sinir span, .sunum .kucuk, .sunum td, .sunum .sohbet > div {line-height: 1.5;}
.sunum .kart p {font-size: 16px;}
.sunum .kart .sis {font-size: 16px; line-height: 1.5;}
.sunum .kucuk {font-size: 13px; line-height: 1.5;}
.sunum .ekran .izgara, .sunum .ekran .tablo-kap, .sunum .ekran .hesap, .sunum .ekran .sinir, .sunum .ekran .zaman, .sunum .ekran .akis, .sunum .ekran .cag-akis, .sunum .ekran .mikro-sohbet, .sunum .ekran .sss, .sunum .onay-karti {margin-top: 64px;}
.sunum .bolum-cta {margin-top: 56px;}
.sunum .serit .sayi {font-size: clamp(2.5rem, 4.6vw, 4rem); line-height: 1; letter-spacing: -0.04em; font-weight: 700;}
.sunum .serit .ad {margin-top: 10px; font-size: 15px;}
.sunum .olcum .buyuk {font-size: clamp(3.5rem, 7vw, 6rem);}
.sunum .onay-karti .soru {font-size: clamp(1.375rem, 2.6vw, 2rem); line-height: 1.15;}
.sunum .zaman h3 {font-size: 1.5rem;}
.sunum .asistan .satir {font-size: 15px; line-height: 1.5;}
.sunum .hesap-sonuc .satir b {font-size: 1.25rem;}
.sunum .hesap-sonuc .satir:nth-of-type(5) b {font-size: 1.75rem;}
/* dengeli başlık kırılımı, paragrafta dul satır yok */
h1, h2, h3, .an-soz, .soru {text-wrap: balance;}
.sunum .ekran .bant + .cag-akis, .sunum .ekran .bant + .izgara {margin-top: 56px;}
.ekran.fotolu {position: relative; isolation: isolate; background-color: var(--siyah);}
.ekran.fotolu::before {content: ""; position: absolute; inset: 0; background-image: var(--foto); background-size: cover; background-position: center; opacity: 0.38; z-index: -2;}
.ekran.fotolu::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.75) 100%); z-index: -1;}
.ekran.fotolu .onay-karti {box-shadow: 0 30px 90px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1);}
@media (prefers-reduced-transparency: reduce) {
  .ekran.fotolu::before {opacity: 0.15;}
}
.sunum .hero .alt {margin-top: 20px;}
@media (min-width: 1100px) {
  .izgara.yetenek {grid-template-columns: repeat(4, 1fr);}
}
@media (min-width: 700px) and (max-width: 1099px) {
  .izgara.yetenek {grid-template-columns: repeat(2, 1fr);}
}
.izgara.yetenek .kart p:last-child {font-size: 0.95rem; line-height: 1.5;}
/* 22.09 01:1x — QC: #sektor 3,4 × ekran. Bölüm görseli 16:9'dan panoramaya kırpıldı (içerik kaybı yok, dekoratif). */
#sektor figure.bant img { aspect-ratio: 24 / 9; object-fit: cover; height: auto; }
/* mobilde 4 sütunlu kıyas tablosu 9 satır × 4 hücre = 3.700 px; ilk 4 satır görünür, kalanı düğmeyle açılır */
@media (max-width: 720px) {
  .fark-4.katli tbody tr:nth-child(n+3) { display: none; }
  .fark-4.katli.acik tbody tr { display: table-row; }
  .tablo-daha { display: inline-flex; margin-top: 12px; }
}
.tablo-daha { display: none; }
.sek-ozet {margin: 28px 0 0; padding-top: 14px; border-top: 1px solid var(--cizgi); color: var(--gri);}
.sek-ozet b {color: var(--murekkep); font-weight: 700;}

.fark-4 th[scope="row"] {text-align: left; font-weight: 600;}
.fark-4 th, .fark-4 td {min-width: 9rem; vertical-align: top;}
/* 19.09 23:2x — SİHİR: mesaj şablonu kartın kahramanı (Faruk: "sönük ve sıkışık") */
.onay-karti {max-width: 56rem; padding: 28px 28px 24px;}
.onay-karti .gelecek {gap: 16px;}
.onay-karti .gelecek > div {padding: 16px 16px 18px; font-size: 14px; color: #B8B8BF;}
.onay-karti .mesaj {margin-top: 14px; padding: 18px 20px; background: #fff; color: var(--siyah); border: 0; border-left: 0; border-radius: 14px; font-size: 16px; line-height: 1.55; font-weight: 500; letter-spacing: -0.005em; box-shadow: 0 12px 30px rgba(0,0,0,0.35);}
.onay-karti .mesaj i {color: var(--gri); font-size: 11px; margin-bottom: 8px;}
.onay-karti .hayir .mesaj {background: #F2F2F5; box-shadow: none;}
@media (min-width: 720px) {
  .onay-karti .mesaj {font-size: 17px;}
}
/* 19.09 23:3x — KİMLİK bölümü kanıt satırı */
.kart .kanit {margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--cizgi); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--gri); line-height: 1.5;}
.kart .kanit b {display: block; color: var(--murekkep); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px;}
.sunum .serit .sayi {font-size: clamp(2rem, 3.6vw, 3.25rem);}
/* 19.09 23:4x — KIYAS soru başlıkları (Faruk: "bold olmalı, öne çıkmalı") */
.fark-4 tbody th[scope="row"] {text-transform: none; letter-spacing: -0.01em; font-size: 16px; font-weight: 700; color: var(--murekkep); line-height: 1.3; vertical-align: top;}
.koyu .fark-4 tbody th[scope="row"] {color: #fff;}
.fark-4 tbody td.evet {font-weight: 600;}
/* sinema görünürken üst navigasyon koyu cam (tek çubuk, referans gibi) */
.nav.koyu-cam {background: #000 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom-color: #000 !important;}
.nav.koyu-cam .logo, .nav.koyu-cam .nav-linkler a {color: #fff;}
.nav.koyu-cam .logo .goz {border-color: #fff;}
.nav.koyu-cam .logo .goz::after {background: #fff;}
.nav.koyu-cam .btn-ikincil {color: #fff; border-color: rgba(255,255,255,0.4); background: transparent;}
.nav.koyu-cam .btn-birincil {background: #fff; color: var(--siyah); border-color: #fff;}
.reveal-grup.goster .kart.modul .sohbet > div {animation: satir 500ms cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(400ms + var(--i, 0) * 700ms);}
.ck-durum .nokta {width: 8px; height: 8px; border-radius: 50%; background: var(--murekkep); animation: nabiz 2s infinite ease-in-out;}
.ekran-cift .izgara {gap: 16px;}
/* 20.09 bölüm gövdesi başlıktan nefes alır: kart/ekran h2'nin altına yapışmaz (Faruk: "üst üste binmiş") */
.sunum .ekran .calisan-kart, .sunum .ekran .ekran-cift, .sunum .ekran .krono {margin-top: 48px;}
.sunum .ekran h2.kucuk-baslik {font-size: clamp(1.9rem, 3.2vw, 2.9rem);}
.sunum .ekran.orta .alt.orta-metin {margin-inline: auto; max-width: 40rem;}
.sunum .ekran .alt + .alt {margin-top: 10px;}
.sunum .ekran h2 {max-width: 26ch;}
.cv-iletisim .nokta {display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--murekkep); margin-right: 6px; animation: nabiz 2s infinite ease-in-out;}
/* ---------- HER ALAN KENDİNE ÖZGÜ SUNUM (Faruk 22:19: güç çeşitliliği fiziki algılansın) ---------- */
/* randevu ızgarası: Sorun kartı geniş, hücreler büyük, beyaz kart */
.sunum-slot .uc-adim {grid-template-columns: minmax(0,1.25fr) minmax(0,1fr) minmax(0,0.95fr);}
.sunum-slot .g-slot {grid-template-columns: repeat(4, 1fr); gap: 8px;}
.sunum-slot .g-slot .h {padding: 12px 4px; font-size: 14px; border-radius: 12px;}
/* tutar çubukları: manşet rakam + gri zemin */
.sunum-cubuk .sorun .alan-kart {background: var(--zemin);}
.sunum-cubuk .sorun .alan-kart .gorsel-kart .g-bar {background: var(--yuzey);}
/* aşama/rota: sol dikey çizgi, Sonuç geniş */
.sunum-adim .uc-adim {grid-template-columns: minmax(0,0.95fr) minmax(0,1fr) minmax(0,1.15fr);}
.sunum-adim .sorun .alan-kart {border-left: 5px solid var(--murekkep); border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
.sunum-adim .g-adim .a {padding-bottom: 18px;}
.sunum-adim .g-adim .a i {width: 18px; height: 18px;}
.sunum-adim .g-adim .a::before {left: 8px; top: 18px;}
.sunum-adim .g-adim .a b {font-size: 15px;}
/* gelen kutusu / liste: numaralı satırlar, kâğıt çizgisi */
.sunum-liste .g-satir {display: grid; grid-template-columns: 2em minmax(0,1fr) auto; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--cizgi);}
.sunum-liste .g-satir em {font-style: normal; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--gri);}
.sunum-liste .g-satir span {color: var(--murekkep);}
.sunum-liste .sorun .alan-kart {background: repeating-linear-gradient(to bottom, transparent 0 39px, rgba(0,0,0,0.035) 39px 40px), var(--yuzey);}
/* ilan eşleşmesi: ters kart (koyu zemin), üç fiş */
.sunum-eslesme .sorun .alan-kart {background: var(--murekkep); color: #fff; border-color: var(--murekkep);}
.sunum-eslesme .sorun .alan-kart .g-bas b, .sunum-eslesme .sorun .alan-kart .g-bas small, .sunum-eslesme .sorun .alan-kart .g-dip {color: rgba(255,255,255,0.75);}
.sunum-eslesme .sorun .alan-kart .g-bas {border-color: rgba(255,255,255,0.18);}
.sunum-eslesme .g-eslesme > div {background: rgba(255,255,255,0.10); color: #fff; padding: 14px 14px;}
.sunum-eslesme .g-eslesme small {color: rgba(255,255,255,0.6);}
.sunum-eslesme .g-eslesme b {font-size: 16px;}
.sunum-eslesme .uc-adim {grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);}
.sunum-liste .gorsel-kart .g-satir em {display: inline;}
@media (max-width: 960px) {
  .sunum-slot .uc-adim, .sunum-adim .uc-adim, .sunum-eslesme .uc-adim {grid-template-columns: 1fr;}
}
/* liste türü düzeltme (22:24): değer etiketin altında, sıkışma yok; kâğıt çizgisi kaldırıldı */
.sunum-liste .g-satir {grid-template-columns: 2em minmax(0,1fr); row-gap: 2px;}
.sunum-liste .g-satir b {grid-column: 2; text-align: left; font-weight: 600;}
.sunum-liste .sorun .alan-kart {background: var(--yuzey);}
.sunum-liste .g-satir em {display: block; grid-column: 1; grid-row: 1;}
.sunum-liste .g-satir span {grid-column: 2; grid-row: 1;}
.sunum-liste .g-satir b {grid-column: 2; grid-row: 2;}
.sonunda .bolum-cta {display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px;}

/* 21.09 Faruk: referans şeridi tam genişlik */
.bant .kap { max-width: none; padding: 0; }
.bant-liste { border-top: 0; }
.bant-grup img { filter: grayscale(1) contrast(1.1); opacity: .55; width: auto; height: 26px; max-width: 120px; transition: opacity .2s, filter .2s; }
@media (hover: hover) { .bant-grup img:hover { opacity: 1; filter: none; } }
@media (prefers-reduced-motion: reduce) { .bant-liste { animation: none; } }

/* 21.09: kart kod gibi olmaz — kanıt satırı düz yazı */
.kanit, .kanit b { font-family: var(--font) !important; letter-spacing: 0 !important; text-transform: none !important; }

/* 21.09 Faruk: evet = tik, hayır = çarpı */
.evet > b::before, .evet > strong::before, .evet > .bas::before, .d-evet::before { content: "✓ "; font-weight: 700; }
.hayir > b::before, .hayir > strong::before, .hayir > .bas::before, .d-hayir::before { content: "✕ "; font-weight: 700; }

/* 21.09: kıyas hücreleri mobilde sarar (uzun cevap taşırıyordu) */
@media (max-width: 720px) { .kiyas td { white-space: normal; } .kiyas tr.sok td b { white-space: nowrap; } }

/* 21.09 Faruk: mobilde kart dikey akar; kartın içindeki Sorun · RAYNSIS size danışıyor · Sonuç yatay kayar */
@media (max-width: 720px) {
  .an .uc-adim { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: -16px; padding: 0 16px 8px; scroll-padding-inline: 16px; }
  .an .uc-adim::-webkit-scrollbar { display: none; }
  .an .uc-adim > .adim-kart { flex: 0 0 86%; scroll-snap-align: start; }
}

/* 22.09 — dar telefonda %86'lık kart metni 26 karakter/satıra düşürüyordu (site_qc eşiği 28, Yasa 36).
   Şerit kendi overflow-x kabında kaydığı için kart neredeyse tam ekran olabilir; sayfa gövdesi taşmaz. */
@media (max-width: 480px) {
  .an .uc-adim > .adim-kart { flex: 0 0 calc(100vw - 52px); }
}

@media (max-width: 720px) { .an { grid-template-columns: minmax(0, 1fr); } .an-govde, .an { min-width: 0; } }

/* 21.09 Faruk: kıyas tablosu — RAYNSIS sütunu modern çizgiyle ayrılır, fark net */
/* 22.09 02:0x Faruk: "raynsis alanı ortalanmalı" — kıyas tablosunun RAYNSIS sütunu yatayda ortalanır. */
.kiyas th:nth-child(3), .kiyas td:nth-child(3) { border-left: 1px solid var(--cizgi); background: rgba(0,0,0,.025); text-align: center; }
/* "gece 03:00 dâhil": ana iddiayı bozmayan, göz kırpan ikincil not (punto alt sınırı 12 px — duzen_kurali.json) */
.kiyas .fis { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--gri); letter-spacing: .01em; }
.kiyas thead th:nth-child(3) { background: rgba(0,0,0,.045); }
.kiyas thead th:nth-child(3) { color: var(--murekkep); }
.kiyas thead th:first-child { color: var(--gri2); }
.kiyas td:nth-child(2) { color: var(--gri); }
.kiyas tr.sok td:nth-child(2) { color: var(--murekkep); }
.kiyas-dip { max-width: none; }

/* 21.09 apple.com kıyas denetimi: içeriğe geç · 44 px dokunma alanı · mobil menü */
.atla { position: absolute; left: 16px; top: -48px; z-index: 100; background: var(--murekkep); color: #fff; padding: 10px 14px; border-radius: 10px; }
.atla:focus { top: 12px; }
.nav-linkler a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
.btn-kucuk { min-height: 44px; }
.menu-dugme { display: none; }
@media (max-width: 720px) {
  .menu-dugme { display: inline-flex; padding-left: 10px; padding-right: 10px; }
  .nav { position: sticky; }
  .nav-linkler { display: none; }
  .nav.acik .nav-linkler { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; left: 0; right: 0; top: 100%; background: rgba(245,245,247,.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--cizgi); padding: 8px 16px 12px; }
  .nav.acik .nav-linkler a { min-height: 48px; font-size: 17px; border-bottom: 1px solid var(--cizgi); }
  .nav.acik .nav-linkler a:last-child { border-bottom: 0; }
}

/* 21.09 Faruk: neden.html mobil — kart ızgaraları yatay kayar, kıyas tablosu kart olur, 11 px yazı yok */
@media (max-width: 720px) {
  #anlar .izgara, #kimlik .izgara, #gelecek .izgara, #ne .izgara, #sektor .izgara { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: -16px; padding: 4px 16px 12px; scroll-padding-inline: 16px; }
  #anlar .izgara::-webkit-scrollbar, #kimlik .izgara::-webkit-scrollbar, #gelecek .izgara::-webkit-scrollbar, #ne .izgara::-webkit-scrollbar, #sektor .izgara::-webkit-scrollbar { display: none; }
  #anlar .izgara > *, #kimlik .izgara > *, #gelecek .izgara > *, #ne .izgara > *, #sektor .izgara > * { flex: 0 0 86%; scroll-snap-align: start; min-width: 0; }
  .neden-ipucu { display: block; font-size: 13px; color: var(--gri); margin: 8px 0 0; }
  /* dört sütunlu kıyas tablosu → her satır bir kart, her hücre etiketli */
  .tablo-kap { overflow: visible; }
  .fark-tablo.fark-4, .fark-tablo.fark-4 tbody, .fark-tablo.fark-4 tr, .fark-tablo.fark-4 td, .fark-tablo.fark-4 th { display: block; width: auto; }
  .fark-tablo.fark-4 thead { display: none; }
  .fark-tablo.fark-4 tr { border: 1px solid rgba(255,255,255,.14); border-radius: var(--r2); padding: 12px 14px; margin-bottom: 12px; background: rgba(255,255,255,.04); }
  .fark-tablo.fark-4 tr > th { font-weight: 700; padding: 0 0 8px; border: 0; }
  .fark-tablo.fark-4 td { padding: 8px 0; border: 0; border-top: 1px solid rgba(255,255,255,.1); white-space: normal; color: #A1A1A6; }
  .fark-tablo.fark-4 td.evet, .fark-tablo.fark-4 tr > th { color: #fff; }
  .fark-tablo.fark-4 td::before { content: attr(data-etiket); display: block; font-size: 12px; color: #8E8E93; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
  .fark-tablo.fark-4 td:last-child { font-weight: 600; }
  .mesaj i, .ke-saat, .g-acik, .g-sayi small { font-size: 12px; }
}
.neden-ipucu { display: none; }

/* 21.09 Faruk: her ay yeni — sitenin kendi dili: sol metin, sağ gerçek sohbet ekranı */
.heray-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.heray-ay { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: #A1A1A6; font-weight: 600; margin: 0 0 16px; }
.heray-metin .alt { color: #E5E5EA; margin-top: 16px; }
.heray-metin .kucuk { color: #A1A1A6; margin-top: 16px; }
.heray-urun { box-shadow: var(--golge); }
.kapi-listesi { display: grid; gap: 4px; margin-top: 8px; font-size: 14px; color: var(--gri); }
.kapi-listesi span { display: block; }
@media (max-width: 720px) { .heray-izgara { grid-template-columns: 1fr; gap: 28px; } }
.kapi-listesi span::before { content: "✓ "; font-weight: 700; color: var(--murekkep); }

/* 21.09 Faruk: dokunmatikte şerit elle kaydırılır; akış JS ile, dokununca durur, bırakınca sürer */
@media (hover: none) {
  .bant .kap { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .bant .kap::-webkit-scrollbar { display: none; }
  .bant-liste { animation: none; }
}

/* 21.09 Faruk: mobilde sepet ve menü halkasız, çıplak ikon */
@media (max-width: 720px) { .btn-sepet, .menu-dugme { border: 0; background: transparent; box-shadow: none; padding-left: 8px; padding-right: 8px; min-width: 44px; } .btn-sepet svg, .menu-dugme svg { width: 22px; height: 22px; } .nav-sag { gap: 4px; } }

/* 21.09 23:2x — kısa açıklama notları: satırlar dengeli kırılır, tek başına kalan kısa son satır yok (Faruk: 'bozuk hissi') */
p.kucuk, .alt, .gun-ipucu, .neden-ipucu { text-wrap: balance; }

/* 21.09 23:3x — paket listesi kartı doldurmak için açılmaz; maddeler üstte sıkı, düğme altta (Faruk: 'diğer iki kartta bozukluk hissi') */
.paket ul { align-content: start; }
.paket .btn, .paket button { margin-top: auto; }

/* 21.09 23:3x — üç fiyat kartında satırlar (etiket · başlık · açıklama · fiyat · liste · düğme) ortak ray üzerinde: açıklama 2 ya da 3 satır olsa da fiyat çizgisi aynı yükseklikte (Faruk: 'orta ve sağ kart daha yukarıda') */
.paket .kisa { min-height: 4.65em; }                       /* geri düşüş: 3 satır */
@supports (grid-template-rows: subgrid) {
  .paket-izgara { grid-auto-rows: auto; }
  .paket { display: grid; grid-template-rows: subgrid; grid-row: span 6; align-items: start; }
  .paket .kisa { min-height: 0; }
  .paket ul { align-self: start; }
  .paket .btn, .paket button { align-self: end; margin-top: 0; }
}

/* 21.09 23:3x — Önerilen rozeti kartın üst kenarında ortalı (Faruk) */
.paket .rozet { left: 50%; transform: translateX(-50%); }

/* 21.09 23:4x — şerit 'sonradan eklenmiş' hissi (Faruk): ① etiket ② logolar yükseklikten ölçeklenir, wordmark ezilmez ③ dikey ortalı ④ kenarlarda solma */
.bant { padding: 36px 0 40px; }
.bant-etiket { margin: 0 0 18px; text-align: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gri2); font-weight: 600; }
.bant .kap { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.bant-liste { padding: 0; align-items: center; }
.bant-grup { align-items: center; gap: 44px; padding: 0 22px; }
.bant-liste img, .bant-grup img { width: auto; height: 26px; max-width: 96px; object-fit: contain; }
.bant-grup li { display: flex; align-items: center; height: 32px; }

/* 21.09 23:4x — kıyas bölümü mobilde 3,1 ekrandı (sim: 53/100 çıkış). Form alanları mobilde katlı; masaüstünde açık (Faruk 'düzenlemeleri yap') */
.hesap-ozet, .hesap-ac { display: none; }
@media (max-width: 720px) {
  .hesap-ozet { display: block; margin: 4px 0 12px; color: var(--gri); font-size: 14px; }
  .hesap-ac { display: inline-flex; margin-bottom: 4px; }
  .hesap-alan { display: none; }
  .hesap.acik .hesap-alan { display: block; }
  .hesap.acik .hesap-ozet, .hesap.acik .hesap-ac { display: none; }
}

/* 21.09 23:5x — Faruk: "ana ekrandaki gibi şablonların arkasına şık gölgelendirmeleri tüm sayfada alanına göre özelleştirerek yapalım"
   Kural: hero'daki mavi-saat parıltısı (atsky kökü) her bölümde rolüne göre tonlanır — para/kasa sıcak fildişi, sohbet/otomasyon soğuk mavi, kapanış nötr beyaz. Işık kaynağı hep sağ-üst (hero ile aynı). */
.ekran { position: relative; isolation: isolate; }
.ekran > .kap { position: relative; z-index: 1; }
.ekran.koyu:not(.fotolu)::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(50% 55% at 74% 30%, var(--isik, rgba(180,205,235,.16)), rgba(180,205,235,.03) 50%, transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }

/* koyu bölümlerde kartların arkasında rol rengiyle parıltı */
.ekran.koyu .urun, .ekran.koyu .kart, .ekran.koyu .onay-karti {
  box-shadow: 0 32px 96px var(--isik, rgba(150,190,240,.20)); }   /* kart rengi olduğu gibi (açık kart koyu zeminde okunur), yalnız parıltı */


/* 21.09 23:5x — Faruk: "çiğ beyaz ekranı canlı tepki veren motion siteler tarzına çevir".
   Açık bölümler: ① zemin düz beyaz değil, iki yavaş süzülen ışık lekesi (mavi saat + fildişi) ② kart imleci izleyen ışıkla ve hafif kalkışla tepki verir ③ hareket azaltma tercihine saygı */
.ekran:not(.koyu) { background-color: var(--zemin-niyet, #FAFAFC); overflow: hidden;
  /* taban da kenarda ortak nötr tona (var(--zemin)) iner: komşu açık bölümle aynı renkte buluşur → sınır çizgisi yok */
  background-image: linear-gradient(180deg, var(--zemin), var(--zemin-niyet, #FAFAFC) 14%, var(--zemin-niyet, #FAFAFC) 86%, var(--zemin)); }
.ekran.gri { background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(20,25,40,.035) 14%, rgba(20,25,40,.035) 86%, rgba(0,0,0,0)), linear-gradient(180deg, var(--zemin), var(--zemin-niyet, #FAFAFC) 14%, var(--zemin-niyet, #FAFAFC) 86%, var(--zemin)); }
/* 22.09 00:5x — Faruk: "renk geçişleri bir anda kesilemez, geçişler doğal olmalı". Eski daire lekeler bölümün overflow:hidden kenarında bıçakla kesiliyordu.
   Yeni: leke katmanı bölümü kaplar (inset:0), ışık kaynağı background-position ile süzülür, üst/alt %16'da maske ile söner → komşu bölüme yumuşak iner. */
.ekran:not(.koyu)::before, .ekran:not(.koyu)::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); }
.ekran:not(.koyu)::before { background-image: radial-gradient(closest-side, var(--leke1, rgba(150,185,235,.30)), transparent); background-size: 70vw 70vw; background-position: 112% -18%; animation: leke-a 22s ease-in-out infinite alternate; }
.ekran:not(.koyu)::after  { background-image: radial-gradient(closest-side, var(--leke2, rgba(245,225,190,.28)), transparent); background-size: 64vw 64vw; background-position: -14% 118%; animation: leke-b 26s ease-in-out infinite alternate; }
@keyframes leke-a { from { background-position: 112% -18%; } to { background-position: 96% 10%; } }
@keyframes leke-b { from { background-position: -14% 118%; } to { background-position: 4% 92%; } }

/* 22.09 00:5x — Faruk: "mouse ile gezinirken oluşan mavi detay amatörlük katıyor". Mavi radyal ışık KALDIRILDI.
   Yerine 2025–26 premium kalıbı: ① tek renk (mürekkep) KENAR ışığı — imleci izler, yalnız 1px çerçevede görünür (mask ile), zemin boyanmaz
   ② 2px kaldırma + 4 katman nötr gölge (codefronts "Minimalist Elevation": -8px/4 katman; burada yarıya inmiş) ③ çerçeve bir ton koyulaşır.
   Yalnız fare olan cihazlarda; reduced-motion'da geçiş yok. */
/* 22.09 01:0x — Faruk: "geçiş kesildi ve bozuk hissinde". details (Diğer meslekler açılırı + SSS satırları) yalnız 1px ÜST çizgi taşıyor, köşe yarıçapı 0;
   kart gölgesi verilince tam genişlikte kesik bir dikdörtgen olarak okunuyordu. Yükselme yalnız gerçek kartlara uygulanır. */
.ekran:not(.koyu) .kart, .ekran:not(.koyu) .urun, .ekran:not(.koyu) .paket, .ekran:not(.koyu) .hesap-form {
  position: relative; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease;
  box-shadow: 0 1px 2px rgba(20,30,50,.04), 0 8px 24px rgba(20,30,50,.05); }
@media (hover: hover) {
  .ekran:not(.koyu) .kart:hover, .ekran:not(.koyu) .urun:hover, .ekran:not(.koyu) .paket:hover, .ekran:not(.koyu) .hesap-form:hover {
    transform: translateY(-2px); border-color: #C9C9CF;
    box-shadow: 0 2px 4px rgba(20,30,50,.04), 0 6px 12px rgba(20,30,50,.06), 0 14px 28px rgba(20,30,50,.07), 0 28px 56px rgba(20,30,50,.08); }
  .isik::after { content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s; padding: 1px;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(29,29,31,.55), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
  .isik:hover::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .ekran:not(.koyu)::before, .ekran:not(.koyu)::after { animation: none; } .ekran:not(.koyu) .kart, .ekran:not(.koyu) .urun, .ekran:not(.koyu) .paket, .isik::after { transition: none; } }
@media (max-width: 720px) { .ekran:not(.koyu)::before { background-size: 140vw 140vw; } .ekran:not(.koyu)::after { background-size: 130vw 130vw; } }

/* 22.09 · KANIT ŞERİDİ + YAPMAYACAKLARI (lansman ölçümü CL 1265) */
.olcek { padding-top: 40px; padding-bottom: 40px; }
.olcek-bas { font-size: 15px; color: var(--gri); margin: 0 0 20px; }
.olcek-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 32px; }
.olcek-kart b { display: block; font-size: 40px; line-height: 1.05; letter-spacing: -.02em; color: var(--murekkep); }
.olcek-kart span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--gri); }
.olcek-dip { margin-top: 24px; font-size: 13px; color: var(--gri2); }
.yapmaz-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 32px; margin-top: 28px; }
.yapmaz-kart b { display: block; font-size: 17px; line-height: 1.3; }
.yapmaz-kart span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; opacity: .72; }
.koyu .olcek-dip { opacity: .6; }
@media (max-width: 900px) { .olcek-izgara, .yapmaz-izgara { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .olcek-izgara, .yapmaz-izgara { grid-template-columns: 1fr; gap: 20px; } .olcek-kart b { font-size: 34px; } }

/* 22.09 01:5x — REGRESYON ONARIMI (dosya sonunda olmalı: hover bloğundan SONRA gelmezse eziliyor).
   00:5x'te eklenen .kart{position:relative} kuralı .hesap-sonuc'un sticky'sini ezdi; top:88px relative olarak
   uygulanınca sonuç kartı formdan 88 px AŞAĞI kaydı (Faruk: "düzendeki sorunu da hallet"). Kapı: site_qc hiza ölçümü. */
@media (min-width: 1025px) { .ekran:not(.koyu) .hesap-sonuc, .hesap-sonuc { position: sticky; top: 88px; } }

/* 22.09 · KANIT BÖLÜMÜ (neden.html) */
.kanit-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 32px; margin-top: 30px; }
.kanit-kart b { display: block; font-size: 17px; line-height: 1.3; }
.kanit-kart span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--gri); }
.kanit-dip { margin-top: 30px; font-size: 15px; line-height: 1.6; color: var(--murekkep); }
@media (max-width: 900px) { .kanit-izgara { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kanit-izgara { grid-template-columns: 1fr; gap: 22px; } }

/* 22.09 · kanıt şeridi güçlendirme: etiket satırı + sayaç + giriş hareketi */
.olcek-kart i { display: block; font-style: normal; margin-top: 2px; font-size: 13px; letter-spacing: .01em; color: var(--gri2); }
.olcek-kart b { font-variant-numeric: tabular-nums; }
.olcek-kart span { margin-top: 10px; }
.raynsis-js .olcek-kart { opacity: 0; transform: translateY(10px); transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1); }
.olcek.goster .olcek-kart { opacity: 1; transform: none; }
.olcek.goster .olcek-kart:nth-child(2) { transition-delay: 70ms; }
.olcek.goster .olcek-kart:nth-child(3) { transition-delay: 140ms; }
.olcek.goster .olcek-kart:nth-child(4) { transition-delay: 210ms; }
.olcek.goster .olcek-kart:nth-child(5) { transition-delay: 280ms; }
.olcek.goster .olcek-kart:nth-child(6) { transition-delay: 350ms; }
@media (prefers-reduced-motion: reduce) { .olcek-kart { opacity: 1; transform: none; transition: none; } }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   22.09 02:1x — YASA 36 UYGULAMASI (Faruk: "hala tek tek kontrol etmek zorundayım, hatalar bitmiyor")
   Aşağıdakiler tek tek bulgu onarımı değil, duzen_kurali.json'daki GENEL eşiklerin karşılığıdır.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ① Kart içi gövde metni ortalanamaz. `.orta` bölüm başlığını ortalar, kart içeriğine sızamaz. */
.ekran.orta .kart, .ekran.orta .kart *, .ekran.orta .alan-kart, .ekran.orta .alan-kart *,
.ekran.orta .urun, .ekran.orta .urun *, .sunum .ekran.orta .kart, .sunum .ekran.orta .kart * { text-align: left; }
.ekran.orta .kart .orta, .ekran.orta .kart .g-bas { text-align: center; }

/* ② Rozet ve etiket tek satırda kalır. */
.yaka, .rozet, .no, .bant-etiket, .ust-etiket, .sec i, .adim-no { white-space: nowrap; }
.rol { flex-wrap: nowrap; }

/* ③ Metin kutusu 28 karakter/satırın altına inmez: dar ekranda kart iç boşluğu ve punto sıkılaşır,
      sütun sayısı düşer. (Punto tabanı 12 px — duzen_kurali.json) */
/* Sütun sayısı SABİT verilmez: kart genişliği tabandan belirlenir, tarayıcı sütun sayısını ona göre seçer.
   280 px taban, satırda en az 28 karakter demektir (duzen_kurali.json). Mobil kaydırmalı şeritler etkilenmez (720 altı flex). */
@media (min-width: 721px) {
  .izgara-3, .izgara-4, #ne .izgara, #anlar .izgara, #kimlik .izgara, #sektor .izgara,
  .paket-izgara, #yapmaz .izgara, #olcek .izgara {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
@media (max-width: 720px) {
  .kart { padding: 16px; }
  .kart .sis { padding-left: 8px; border-left-width: 2px; }
  .kart .bugun, .kart .sis { font-size: 14.5px; line-height: 1.5; }
  .an-soz { font-size: 1.05rem; }
  .izgara .kart, #ne .izgara .kart, #anlar .izgara .kart { flex-basis: 90%; }
}

/* ④ KIYAS TABLOSU (fark-4): satır ayırıcı, dikey ritim, RAYNSIS sütunu vurgulu, hücre üst hizalı.
      Faruk 02:16 "tablo da başarısız": satırlar birbirine giriyordu, RAYNSIS sütunu ayırt edilmiyordu. */
.fark-4 { border-collapse: separate; border-spacing: 0; width: 100%; }
.fark-4 thead th { padding: 14px 16px; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-align: left;
  color: var(--gri2); border-bottom: 1px solid var(--cizgi); vertical-align: bottom; }
.koyu .fark-4 thead th { color: #A1A1A6; border-color: rgba(255,255,255,.16); }
.fark-4 tbody th, .fark-4 tbody td { padding: 14px 16px; border-top: 1px solid var(--cizgi); vertical-align: top; line-height: 1.45; }
.koyu .fark-4 tbody th, .koyu .fark-4 tbody td { border-color: rgba(255,255,255,.10); }
.fark-4 tbody tr:nth-child(even) th, .fark-4 tbody tr:nth-child(even) td { background: rgba(0,0,0,.025); }
.koyu .fark-4 tbody tr:nth-child(even) th, .koyu .fark-4 tbody tr:nth-child(even) td { background: rgba(255,255,255,.035); }
.fark-4 th:last-child, .fark-4 td:last-child { background: rgba(0,0,0,.04); }
.koyu .fark-4 th:last-child, .koyu .fark-4 td:last-child { background: rgba(255,255,255,.07); color: #fff; font-weight: 600; }
.fark-4 thead th:last-child { font-weight: 700; color: var(--murekkep); }
.koyu .fark-4 thead th:last-child { color: #fff; }
.fark-4 th, .fark-4 td { min-width: 0; }
.fark-4 colgroup col:first-child { width: 22%; }
@media (max-width: 1024px) { .fark-4 thead th, .fark-4 tbody th, .fark-4 tbody td { padding: 12px 10px; font-size: 14px; } }

/* 22.09 · grid öğesi taşma onarımı: min-width:auto uzun içerikte satırı taşırır (mobil yatay kaydırma) */
.olcek-izgara > *, .yapmaz-izgara > *, .kanit-izgara > * { min-width: 0; overflow-wrap: break-word; }
.olcek-kart b { max-width: 100%; }

/* 22.09 · logo şeridi dar ekranda sayfayı taşırıyordu (ölçüm: .bant-liste sağ kenar 3819 / ekran 390).
   Şerit kendi kutusunda kayar; sayfa yatay kaymaz. hover:none kuralının genişletilmiş hâli. */
@media (max-width: 900px) {
  .bant .kap { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .bant .kap::-webkit-scrollbar { display: none; }
}
/* ölçüm 22.09 02:2x (360px): #sonunda 560/360 · #kurucu 488/360 · #kiyas 365/360 → grid öğesi min-width onarımı */
.sonunda-izgara > *, .kurucu-izgara > *, .kiyas-izgara > *, .heray-izgara > *, .paket-izgara > * { min-width: 0; }
.sonunda-izgara, .kurucu-izgara, .kiyas-izgara { max-width: 100%; }

/* 22.09 · scroll efektleri güçlendirme (Faruk: "güncel ve popüler efektleri ekle")
   Hepsi hareket azaltma ayarına saygılı; JS yoksa hiçbiri içeriği gizlemez. */

/* a) bölüm başlığı: alttan yukarı maskeden çıkar */
.raynsis-js .olcek-bas, .raynsis-js #yapmaz h2, .raynsis-js #kanit-nasil h2 {
  clip-path: inset(0 0 100% 0); opacity: 0;
  transition: clip-path .7s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}
.olcek.goster .olcek-bas, #yapmaz.goster h2, #kanit-nasil.goster h2 { clip-path: inset(0 0 0 0); opacity: 1; }

/* b) rakamın altında büyüyen çizgi — sayaç dolarken uzar */
.olcek-kart { position: relative; padding-top: 10px; }
.olcek-kart::before {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 0;
  background: var(--murekkep); opacity: .18; transition: width .8s cubic-bezier(.2,.8,.2,1) .1s;
}
.olcek.goster .olcek-kart::before { width: 100%; }

/* c) yapmayacakları kartları sırayla kayar */
.raynsis-js .yapmaz-kart { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
#yapmaz.goster .yapmaz-kart { opacity: 1; transform: none; }
#yapmaz.goster .yapmaz-kart:nth-child(2) { transition-delay: 60ms; }
#yapmaz.goster .yapmaz-kart:nth-child(3) { transition-delay: 120ms; }
#yapmaz.goster .yapmaz-kart:nth-child(4) { transition-delay: 180ms; }
#yapmaz.goster .yapmaz-kart:nth-child(5) { transition-delay: 240ms; }
#yapmaz.goster .yapmaz-kart:nth-child(6) { transition-delay: 300ms; }

/* d) kanıt kartları aynı ritimde */
.raynsis-js .kanit-kart { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
#kanit-nasil.goster .kanit-kart { opacity: 1; transform: none; }
#kanit-nasil.goster .kanit-kart:nth-child(2) { transition-delay: 60ms; }
#kanit-nasil.goster .kanit-kart:nth-child(3) { transition-delay: 120ms; }
#kanit-nasil.goster .kanit-kart:nth-child(4) { transition-delay: 180ms; }
#kanit-nasil.goster .kanit-kart:nth-child(5) { transition-delay: 240ms; }
#kanit-nasil.goster .kanit-kart:nth-child(6) { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .raynsis-js .olcek-kart, .raynsis-js .yapmaz-kart, .raynsis-js .kanit-kart,
  .raynsis-js .olcek-bas, .raynsis-js #yapmaz h2, .raynsis-js #kanit-nasil h2 {
    opacity: 1; transform: none; clip-path: none; transition: none;
  }
  .olcek-kart::before { transition: none; }
}

/* 22.09 · ölçüm: kapalı sepet çekmecesi 360px ekranda sağ kenarı 720'ye taşıyor → mobilde yatay kayma.
   Kapalıyken görünmez olur: taşma biter, ekran okuyucu da kapalı paneli okumaz. */
.cekmece { visibility: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s linear .3s; }
.cekmece.acik { visibility: visible; transition: transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s; }

/* 22.09 02:2x — Sepet çekmecesi kapalıyken ekran dışında duruyor (fixed + translateX) ve küçük telefonlarda
   belgeyi yatayda genişletiyordu (QC: 390/430/360'ta "yatay taşma"). `clip` taşmayı keser, `hidden`in aksine
   position:sticky'yi bozmaz. */
html { overflow-x: clip; }
body { overflow-x: clip; }
/* Kapalı çekmece fixed olduğu hâlde sayfa kaydırma genişliğini büyütüyor (ölçüm: sağ=720 / ekran=360).
   overflow-x:clip yatay kaymayı keser ve `hidden`in aksine kaydırma kutusu yaratmaz → sticky başlık bozulmaz. */
html, body { overflow-x: clip; }

/* 22.09 02:3x — 768–900 px arasında hero'nun ikinci sütunu 218 px'e düşüp gövde metnini 27 karakter/satıra
   indiriyordu (duzen_kurali.json tabanı 28). Bu bantta hero tek sütuna iner. */
@media (min-width: 721px) and (max-width: 980px) {
  .hero-izgara { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 28px; }
  .hero-metin { grid-column: 1; grid-row: auto; }
  .hero-metin .alt { max-width: 46rem; }
}

/* 22.09 02:3x Faruk: "müşteri mesajı da gözükmeli ki işlem süresi anlaşılsın". Giden mesajın saati,
   talebin saatiyle birlikte okunur: 08:10 talep → 08:15 belge → 13:02 karşı tarafa takip. */
.u-giden .giden-saat { display: block; margin-top: 6px; font-size: 12px; color: var(--gri); }

/* 22.09 02:5x Faruk: "istenilen saat detayı RAYNSIS mesajı altındaki saatin aynı şekilde
   müşteri girdisinde de olmasıydı ... tüm sitede yapılması gerekirken sadece bu alanda yapılmış."
   Saat artık her baloncukta, iki tarafta da; kural sayfaya değil baloncuk tipine yazıldı. */
.u-siz small { display: block; margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.66); text-align: right; }
.u-siz i + small { text-align: right; }
.hero .u-siz small { color: var(--gri); }
.u-ray small { text-align: left; }
/* Rozet (A/B) ile cevap aynı satırda kalır, saat kendi satırına iner. Dar kartta
   rozetten sonra tek kelimelik cevabın alt satıra düşmesi yetim okunuyordu. */
.u-siz { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.u-siz i { margin-right: 0; }
.u-siz small { flex: 1 0 100%; }
/* Kurulum paketi: tek seferlik bedelin altında devam eden aylık (Faruk 22.09 03:1x). */
.paket .fiyat { flex-wrap: wrap; }
.paket .fiyat .fiyat-eski { margin-right: 8px; font-size: 16px; color: var(--gri); text-decoration: line-through; }
.paket .fiyat .fiyat-indirim { flex: 1 0 100%; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--metin, inherit); }
.paket .fiyat .fiyat-aylik { flex: 1 0 100%; margin-top: 4px; font-size: 12px; color: var(--gri); }

/* 22.09 — dil seçici (bar, çerçevesiz) + para hapları (fiyat bölümü) · AIBUTIK Para.tsx deseni */
.gorsel-gizli { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Bar: kutu yok, çizgi yok — yalnız metin ve ok. Ok CSS ile çizilir: data-URI içinde currentColor
   geçmez (SVG kendi bağlamında boyanır), koyu üst çubukta görünmez olurdu. */
.dil-kap {
  position: relative; display: inline-flex; align-items: center;
  margin-right: 4px; color: inherit;
}
.dil-kap::after {
  content: ""; position: absolute; right: 3px; top: 50%; pointer-events: none;
  width: 6px; height: 6px; margin-top: -4px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); opacity: .75;
}
.dil-sec {
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent; box-shadow: none;
  font: inherit; font-size: 13px; line-height: 1; font-weight: 500; letter-spacing: .02em;
  color: currentColor; opacity: .78; cursor: pointer;
  padding: 6px 16px 6px 2px; min-height: 32px;
  transition: opacity .18s ease;
}
.dil-sec:hover { opacity: 1; }
/* 22.09 Faruk: "dil seçeneği siyah zeminde okunmuyor." — ölçüm: nav zemini rgb(0,0,0) iken etiket
   rgb(29,29,31) çıkıyordu; currentColor .nav-sag'dan (koyu mürekkep) kalıtılıyordu, nav linklerinden değil.
   Çözüm: koyu çubukta dil etiketi nav linkleriyle AYNI kuralı izler. */
.nav.koyu .dil-kap, .nav.koyu .dil-sec,
.nav.koyu-cam .dil-kap, .nav.koyu-cam .dil-sec { color: #fff; }
.nav.koyu .dil-sec, .nav.koyu-cam .dil-sec { opacity: .85; }
.nav.koyu .dil-sec:hover, .nav.koyu-cam .dil-sec:hover { opacity: 1; }
.dil-sec:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; opacity: 1; }
.dil-sec option { color: #14161a; background: #fff; }

/* Fiyat bölümü: hap düğmeler, seçili olan dolu */
/* Başlık sola hizalı → seçici de aynı eksende durur; ortalanmış şerit başlıkla kopuk görünüyordu. */
.para-haplar { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px;
               margin: 30px 0 24px; scroll-margin-top: 110px; }
.para-hap {
  font: inherit; font-size: 12px; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums;
  padding: 7px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--cizgi, #d9dce1); background: transparent; color: var(--metin, #1b1d21);
  opacity: .72; transition: opacity .16s ease, border-color .16s ease, background-color .16s ease, color .16s ease;
}
.para-hap:hover { opacity: 1; border-color: var(--cizgi-koyu, #b9bec7); }
.para-hap.secili { opacity: 1; background: var(--metin, #1b1d21); border-color: var(--metin, #1b1d21); color: var(--zemin, #fff); }
.para-hap:focus-visible { outline: 2px solid var(--vurgu, #1f5fd8); outline-offset: 2px; opacity: 1; }
#tahsilat-notu { opacity: .8; }
/* Dar ekran: haplar sarmaz, kendi kabında yatay kayar (bölüm yüksekliği şişmesin; sayfa gövdesi taşmaz) */
@media (max-width: 560px) {
  .para-haplar { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch;
                 scrollbar-width: none; gap: 5px; padding-bottom: 2px; margin-bottom: 16px; }
  .para-haplar::-webkit-scrollbar { display: none; }
  .para-hap { padding: 6px 10px; font-size: 11px; flex: 0 0 auto; }
}

/* 22.09 03:4x Faruk: "mobil optimizasyonda da bir çok sorun var."
   Telefonda üç paket alt alta dizilince bölüm ekranın 3,3 katına çıkıyordu (kapı yakaladı).
   Premium mobil kalıbı: yatay kaydırmalı kart rayı + hizalama noktaları. Yükseklik tek ekrana iner,
   kartların içeriği kısaltılmaz. Masaüstü düzeni değişmez. */
@media (max-width: 720px) {
  .paket-izgara {
    display: flex; gap: 12px; margin-top: 28px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 4px 16px 12px; margin-left: -16px; margin-right: -16px;
  }
  .paket-izgara::-webkit-scrollbar { display: none; }
  .paket-izgara > .paket {
    flex: 0 0 82%; max-width: 320px; scroll-snap-align: center; margin-top: 8px;
  }
  .paket-izgara > .paket.vurgu { order: -1; }   /* önerilen önce gelir */
  .paket .fiyat { padding: 10px 0; }
  .paket .fiyat b { font-size: 30px; }
}

/* ══ MOBİL İSKELET — 22.09 03:5x (Faruk: "mobil optimizasyonda da bir çok sorun var …
   iskelet otursun ki detayları düzenlemeye başlayalım"). Eşikler duzen_kurali.json'da,
   kapı site_qc.py. Masaüstü düzenine dokunulmaz. ══ */

/* 1 · Dokunma hedefi 44 px — görsel küçük kalır, dokunulan kutu büyür (WCAG 2.5.5). */
@media (max-width: 720px) {
  .logo, .nav-linkler a, .para-hap, .dil-sec a, .dil-sec button, summary { min-height: 44px; }
  .logo, .para-hap, .dil-sec a, .dil-sec button { display: inline-flex; align-items: center; }
  summary { display: flex; align-items: center; }
}

/* 2 · Meta metin 12 px'in altına inmez — saat damgası, dipnot, rozet dâhil. */
.ke-saat, .g-acik, .g-sayi small, .g-sayi span, .onay-karti .mesaj i { font-size: 12px; }
.sayac { font-size: 12px; min-width: 20px; height: 20px; }
@media (max-width: 720px) { .kiyas thead th { font-size: 12px; } }

/* 3 · Değişken uzunluklu iki metin aynı satırda zorlanmaz; taşma yerine sarar. */
@media (max-width: 720px) { .rol { flex-wrap: wrap; row-gap: 4px; } }

/* 4 · Telefonda dikey yoğunluk: gövde satır yüksekliği 1,55 → 1,48; bölüm dolgusu kısalır.
   Punto düşürülmez (okunurluk), boşluk düşürülür. */
@media (max-width: 720px) {
  body { line-height: 1.48; }
  .ekran { padding-top: 64px; padding-bottom: 64px; }
  .ekran h2 { margin-bottom: 12px; }
}

/* 5 · Telefonda hesap kartı: form kapalıyken sonuç kartı da kapalı kalır.
   Kapalı formun "—" dolu sekiz satırı bilgi değil boşluktur; #kiyas'ın mobil
   yüksekliğinin bir kısmı buradan geliyordu. */
@media (max-width: 720px) {
  .hesap:not(.acik) .hesap-sonuc { display: none; }
}

/* 22.09 — çapa ile gelinen bölüm yapışkan üst çubuğun altında başlar (#paketler'de para şeridi örtülüyordu) */
main section[id] { scroll-margin-top: 84px; }

/* 6 · Kalan dokunma hedefleri: alt bağlantılar, sepet kapatma, dil seçici. */
@media (max-width: 720px) {
  .linkler a { min-height: 44px; display: inline-flex; align-items: center; }
  .cekmece .kapat { min-height: 44px; min-width: 44px; }
  .dil-sec, .dil-sec * { min-height: 44px; }
  .dil-sec { display: inline-flex; align-items: center; }
}

/* 7 · "Bir gün" zaman çizelgesi telefonda dikeyde sıkışır — yataya ÇEVRİLMEZ:
   akış saate bağlı, yatay kaydırma "atladım mı" endişesi üretir. Kart yüksekliği düşer. */
@media (max-width: 720px) {
  #gun .an { padding: 14px; gap: 10px; }
  #gun .an + .an { margin-top: 12px; }
  #gun .an-soz { margin: 6px 0; }
  #gun .uc-adim { gap: 8px; }
}

/* 8 · "Bir gün" katlanması — yalnız telefonda ve yalnız betik çalışıyorsa. */
@media (max-width: 720px) {
  .raynsis-js .gun-akis.gun-katli > .an:nth-of-type(n+2) { display: none; }
  .raynsis-js .gun-akis.gun-katli.acik > .an:nth-of-type(n+2) { display: grid; }
  .gun-daha { margin-top: 14px; }
}
@media (min-width: 721px) { .gun-daha { display: none; } }

/* 9 · Uzun yazışma ekranı telefonda katlanır (ilk dört balon). Betik kapalıysa hepsi açık. */
@media (max-width: 720px) {
  .raynsis-js .urun.sohbet-katli > .u-ray:nth-of-type(n+3),
  .raynsis-js .urun.sohbet-katli > .u-siz:nth-of-type(n+3),
  .raynsis-js .urun.sohbet-katli > .u-giden { display: none; }
  .raynsis-js .urun.sohbet-katli.acik > .u-ray, .raynsis-js .urun.sohbet-katli.acik > .u-siz { display: flex; }
  .raynsis-js .urun.sohbet-katli.acik > .u-ray { display: block; }
  .raynsis-js .urun.sohbet-katli.acik > .u-giden { display: block; }
  .sohbet-daha { margin-top: 12px; }
  .ekran { padding-top: 56px; padding-bottom: 56px; }
}
@media (min-width: 721px) { .sohbet-daha { display: none; } }

/* 10 · Hero telefonda 1,8 ekranı aşıyordu: başlık ve sohbet kartı arasındaki boşluk kısalır,
   punto düşürülmez (ilk ekran okunurluğu satışın kendisidir). */
@media (max-width: 720px) {
  .hero { padding-top: 40px; padding-bottom: 48px; }
  .hero-urun { padding: 14px; gap: 8px; }
  .hero .alt { margin-bottom: 18px; }
}

/* 22.09 — telefonda hero 2,26 ekran boyundaydı (eşik 1,8 · duzen_kurali.json). Yükün 955 px'i hero
   sohbet kutusu. Kutu kendi içinde kayar: tek satır içerik bile kesilmez, bölüm ekrana sığar.
   Sohbet penceresinin kendi kaydırması zaten beklenen davranıştır. */
@media (max-width: 480px) {
  .hero-urun { max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .hero-urun::-webkit-scrollbar { display: none; }
}

/* ══ BEYAZ ÜSTÜNE BEYAZ YAZI ONARIMI — 22.09 05:0x (Faruk iki kare gösterdi) ══
   Kök sebep: "bölüm koyu" kuralları kartın İÇİNE de beyaz metin yazıyordu; kartın kendi
   zemini beyaz olduğu için metin görünmez oluyordu. Ölçüm: neden.html #ne kartlarında
   '01' ve başlık kontrast 1,00; index ve /en/ #sonunda giden mesaj bloğunda aynısı.
   (02:5x'te "giden mesaj boş görünüyor" diye rapor edilen şey de buydu — metin oradaydı.)
   Kural: metnin rengi kartın KENDİ zeminine göre belirlenir, bölümün zeminine göre değil.
   Gerçekten koyu kartlar `.koyu-kart` sınıfını taşır. */
.koyu .kart:not(.koyu-kart) { color: var(--murekkep); }
.koyu .kart:not(.koyu-kart) h3,
.koyu .kart:not(.koyu-kart) .an-soz,
.koyu .kart:not(.koyu-kart) .no,
.koyu .kart:not(.koyu-kart) b,
.koyu .kart:not(.koyu-kart) .rol b { color: var(--murekkep); }
.u-giden p, .u-giden .ke-bas b { color: var(--murekkep); }
.u-giden .ke-bas small, .u-giden small { color: var(--gri); }
.hero .u-giden p, .hero .u-giden b, .hero .u-giden .ke-bas b { color: #fff; }

/* Kıyas tablosu (neden.html "Yıllık / Maaşlı eleman / RAYNSIS") — 22.09 05:1x Faruk "tablo hatalı".
   Ölçüm 1440 px: orta sütun 170 px, "Olur; maliyeti yukarıda" sığmıyordu; toplam satırının
   orta hücresi boştu ve satır kopuk okunuyordu. Sütun payları sabitlendi, hücreler üstten hizalı. */
.eleman-tablo { table-layout: fixed; width: 100%; }
.eleman-tablo th:first-child, .eleman-tablo td:first-child { width: 42%; }
.eleman-tablo th:nth-child(2), .eleman-tablo td:nth-child(2) { width: 29%; }
.eleman-tablo th:last-child, .eleman-tablo td:last-child { width: 29%; }
.eleman-tablo th, .eleman-tablo td { vertical-align: top; padding: 12px 14px; overflow-wrap: break-word; }
.eleman-tablo tr.toplam td[colspan="2"] { width: auto; }
.eleman-tablo td .kucuk { color: var(--gri); line-height: 1.4; }
@media (max-width: 720px) {
  .eleman-tablo th, .eleman-tablo td { padding: 10px 8px; font-size: 14px; }
  .eleman-tablo th:first-child, .eleman-tablo td:first-child { width: 46%; }
}

/* 22.09 — ödeme formu etiketleri: metin <span class="etiket"> içinde, input'la aynı akışta bölünmez
   (site_qc: "E-posta kelime ortadan kırılıyor ← LABEL"). .sunum içindeki .etiket kuralından ayrı tutulur. */
form label > .etiket { display: block; margin-bottom: 6px; }


/* 22.09 17:0x — neden.html mobil kilidi 2,6 → 1,8'e indirildi (duzen_kurali.json).
   ÖNCE (360 px): cag 2,2x · gelecek 2,6x · kiyas 2,6x. Üçü de içerik taşıyor, punto düşürülmedi. */
@media (max-width: 720px) {
  /* CAG — 16 pozisyon hapı dikey uzuyordu. Hap küçülür, satıra daha çoğu sığar;
     liste dekoratif (aria-hidden), okunurluk kaybı yok. */
  .cag-akis .eski, .cag-akis .yeni { padding: 16px 12px; gap: 6px; }
  .cag-akis .eski span { padding: 6px 10px; font-size: 12px; }
  .cag-akis { gap: 14px; }

  /* GELECEK — onay kartındaki iki örnek mesaj metni kartın yarısıydı. Telefonda katlanır.
     Gizleme yalnız .raynsis-js altında: betik çalışmazsa mesajlar açık (görünürlük betiğe bağlanmaz). */
  .raynsis-js .onay-karti.mesaj-katli .mesaj { display: none; }
  .raynsis-js .onay-karti.mesaj-katli.acik .mesaj { display: block; }
  .mesaj-daha { margin-top: 14px; }
}
@media (min-width: 721px) { .mesaj-daha { display: none; } }

/* 22.09 17:1x — ikinci tur: üçü de 1,9–2,2x'te takıldı. Görsel ve boşluk kısılır, metin korunur. */
@media (max-width: 720px) {
  /* CAG: bölüm görseli panoramaya kırpılır (dekoratif; #sektor'de aynı çözüm uygulandı). */
  #cag figure.bant img { aspect-ratio: 24 / 9; object-fit: cover; height: auto; }
  #cag figure.bant { margin-block: 18px; }
  /* GELECEK: kart iç boşluğu ve evet/hayır blokları sıkışır; rakamlar aynen kalır. */
  #gelecek .onay-karti { padding: 16px 16px 14px; margin-top: 24px; }
  #gelecek .onay-karti .gelecek > div { padding: 10px 12px; font-size: 13px; }
  #gelecek .onay-karti .soru { margin: 10px 0 14px; }
  #gelecek .onay-karti .dugmeler { margin-top: 12px; }
  #gelecek .bolum-cta { margin-top: 18px; }
  /* KIYAS: satır arası ve alt notlar sıkışır. */
  #kiyas .tablo-kap { margin-top: 18px; }
  #kiyas .kucuk, #kiyas .daha { margin-top: 10px; }
}

/* 22.09 17:1x — üçüncü tur: cag 1,83x kaldı. Pozisyon hapları bir kademe daha küçülür
   (dekoratif liste, aria-hidden) ve bölüm boşlukları sıkışır. Başlık puntosuna dokunulmadı. */
@media (max-width: 720px) {
  #cag .cag-akis .eski span { padding: 5px 8px; font-size: 11px; }
  #cag .cag-akis .eski, #cag .cag-akis .yeni { padding: 12px 10px; gap: 5px; }
  #cag .cag-akis small { margin-top: 4px; }
  #cag .cag-akis { gap: 10px; margin-top: 18px; }
  #cag .alt { margin-top: 16px; }
}

/* 22.09 — teşhis bölümünden sektör diline geçiş. Düğme DEĞİL: sayfadaki birincil karar
   tek kalmalı (CTA tavanı 6). Bu bir gezinme bağı, satış çağrısı değil. */
.sek-bag { margin-top: 20px; font-size: 0.95rem; }
.sek-bag a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }