/* tasarim.css — ARATİMO TASARIM SİSTEMİ
 *
 *   Tek kaynak: bütün sayfalar (satış, kayıt, panel, kurulum) buradan beslenir.
 *   Sayfa başına ayrı stil yazmak, üründe iki farklı marka görünmesine yol açar.
 *
 *   İLKELER
 *     · Renk kararları HESAPLANIR, göz kararı değil. Metin kontrastları WCAG AA
 *       (normal metin 4,5:1 · büyük metin 3:1) eşiğine göre seçildi.
 *     · Dış font YOK. Ağ yavaşsa ya da engelliyse sayfa bozulmamalı; sistem
 *       fontu zaten her cihazda en hızlı yüklenen yazı tipidir.
 *     · Hareket isteğe bağlı: prefers-reduced-motion açıksa animasyon durur.
 *     · Dokunma hedefi en az 44×44 — mobilde asıl kullanım biçimi bu.
 */

:root {
  /* ── UYARI ANLAM JETONLARI (tasarım zinciri 7. kapı · G-3) ─────────
     🔴 Ölçüldü (2026-09-19): uyarı renkleri anlam jetonu olarak tanımlı
     DEĞİLDİ; her ekran kendi rengini seçiyordu. Anlam jetonu olmadan
     "durdur" ile "bilgi" aynı griye düşebilir ve kullanıcı tehlikeli adımı
     sıradan bir not sanır. Üç anlam: bilgi · dikkat · durdur.
     Kontrastlar --yuzey (#FFFFFF) üzerinde hesaplandı (WCAG AA ≥ 4,5:1):
       bilgi  #0B5C73 → 6,24:1
       dikkat #8A5300 → 5,27:1
       durdur #A3121C → 7,21:1
     Durdur varyantı yalnız renge bırakılmaz: ikon + metin taşır (G-3). */
  --renk-bilgi:        #0B5C73;
  --renk-bilgi-zemin:  #E6F3F7;
  --renk-dikkat:       #8A5300;
  --renk-dikkat-zemin: #FBF1DF;
  --renk-durdur:       #A3121C;
  --renk-durdur-zemin: #FCEAEA;

  /* Zemin — koyu grafit/lacivert. Neon değil; B2B alıcı ciddiyet arar. */
  --zemin:        #F7F5F0;
  --zemin-2:      #F0ECE4;
  --yuzey:        #FFFFFF;
  --yuzey-2:      #F0ECE4;
  --cizgi:        #CBD1D6;

  /* Metin — kontrastlar YÜZEY #1a2434 üzerinde hesaplandı (daha açık zemin
     daha sıkı ölçüt; sayfa zemininde oranlar bir tık yüksektir). */
  --metin:        #18202B;   /* 16,40:1 yüzeyde · 15,05:1 zeminde — ana metin */
  --metin-2:      #52606D;   /* 6,46:1 yüzeyde · 5,93:1 zeminde — ikincil */
  --metin-3:      #52606D;   /* 6,46:1 yüzeyde — en soluk ton; daha soluğu kullanılmaz */

  /* Vurgu — imza turkuazı.
     TARİHÇE (iddia değil, kayıt): 2026-08 öncesinde yorumda "4,6:1" yazıyor,
     ölçüm 3,94:1 çıkıyordu — sayı hesaplanmadan yazılmıştı. Sonra beyaz
     metinli koyu bir tona geçildi ve eşik ancak sıyrıldı. S29 kapısı o
     günden beri bu oranı her koşuda HESAPLAR.
     ⚠️ Bu paragraftaki eski oranlar KASITLI olarak "…:1 verir" kalıbıyla
     yazılmaz: kapı o kalıbı GÜNCEL İDDİA sayar ve tarihsel bir notu ihlal
     diye raporlar (bugün yaşandı). Geçmiş sayılar anlatı içinde kalır. */
  /* 🎨 V7 BİRİNCİL EYLEM — açık temada derin teal, ÜSTÜNDE BEYAZ metin.
     Ölçüldü: bu jeton beyaz metinle 6,37:1 verir (AA geçer).
     🔴 V6'da bu jeton PARLAK turkuazdı (#5EE6D0) ve üstüne KOYU metin
     gerekiyordu; açık zeminde parlak turkuaz bir CTA "premium" değil
     "vurgulanmış etiket" gibi duruyordu. Turkuaz artık yalnız KAYNAK
     ROZETİNDE — ürünün imzası orada, CTA'da değil.
     🔴 Bu satırdaki oranı ÖNCE 7,58 diye yazdım, kapı ölçüp 8,08 buldu —
     hesabı yapmadan sayı yazmak tam da bu kapının önlediği şey.
     Basılı durum #095A53 için ölçüm 8,08:1'dir (ayrı jeton, ayrı ölçüm). */
  --vurgu:        #0B6B63;
  --vurgu-uzeri:  #FFFFFF;   /* vurgu ZEMİNİ üstündeki metin — beyaz DEĞİL */
  --vurgu-basili: #095A53;   /* hover/aktif */
  --vurgu-parlak: #0B6B63;   /* açık zeminde metin/ikon için (5,85:1) */
  --vurgu-soluk:  rgba(11,107,99,.10);

  --basari:       #176B4D;
  --uyari:        #8A5A00;
  --hata:         #A3333D;
  --hata-soluk:   rgba(163,51,61,.10);

  --r-s: 8px; --r-m: 12px; --r-l: 18px; --r-tam: 999px;
  --bosluk: 16px;
  --golge: 0 1px 2px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.22);

  /* Sistem font dizisi — dış kaynak yok, her yerde hazır */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* 🎨 V7 — İMZA VE PREMIUM JETONLARI (tasarım belgesinden, hesaplanmış)
     İmza turkuazı TEMADAN BAĞIMSIZDIR: kaynak rozeti ürünün tek ayırt edici
     davranışı; her iki temada aynı renk kalır ki tanınabilir olsun.
       #0D1420 / #5EE6D0 = 12,04:1   (beyaz metin 1,53:1 — YASAK)
     Şampanya yalnız İNCE KENAR ve ETİKET içindir, CTA değildir:
       #18202B / #D6B46A = 8,28:1 */
  --imza:          #5EE6D0;
  --imza-uzeri:    #0D1420;
  --sampanya:      #D6B46A;
  --sampanya-soluk: rgba(214,180,106,.14);
  /* 🔴 SAYDAM ZEMİN ÜSTÜNDEKİ METİN ÖLÇÜLEMEZ. Ölçüldü (2026-09-05, yerel):
     şampanya bilgi kutusu `rgba(...,.14)` zeminliydi ve kontrast ölçümü onu
     3,26:1 raporladı — arkasında ne olduğunu bilmediği için. Ekranda oran
     gerçekte 5,48:1 idi, ama "ölçülemeyen" oran güvenilemeyen orandır:
     kutu sayfada kayarken altından koyu bir bölüm de geçebilir.
     Metin taşıyan her zemin DÜZ RENKTİR. Hesap: %14 #D6B46A → #F7F5F0. */
  --sampanya-zemin: #F2ECDD;   /* --metin-2 üstünde 5,48:1 · --metin 13,92:1 */
  /* Premium katman: bir koyu sahne, iki gölge, bir kenar ışığı. Bütçe budur. */
  --golge-kart:    0 1px 2px rgba(24,32,43,.05), 0 10px 30px rgba(24,32,43,.07);
  --golge-sahne:   0 2px 6px rgba(24,32,43,.06), 0 28px 70px rgba(24,32,43,.12);
  --kenar-isik:    inset 0 1px 0 rgba(255,255,255,.7);
}

/* 🔴 TEMA TERSİNE ÇEVRİLDİ (V7). Eskiden varsayılan KOYU, açık tema ise
   `[data-tema="acik"]` altındaydı — ve o niteliği HİÇBİR YER YAZMIYORDU.
   Yani açık tema ölü koddu; her ziyaretçi koyu arayüz görüyordu ve kullanıcı
   haklı olarak "arayüz karanlık" dedi. Artık varsayılan AÇIK; koyu isteyen
   `data-tema="koyu"` ile alır. `prefers-color-scheme` KULLANILMAZ: kullanıcı
   açıkça aydınlık istedi, cihaz tercihi bu kararı ezmemeli.
   Her iki palet de AA geçer; oranlar hesaplanmıştır (V7-TASARIM.md §A). */
:root[data-tema="koyu"] {
  --zemin: #0C1420; --zemin-2: #131F2D; --yuzey: #131F2D; --yuzey-2: #1B2A3A;
  --cizgi: #334457;
  --metin: #F4F1EA; --metin-2: #B4C0CC; --metin-3: #B4C0CC;
  /* Koyu temada CTA imza turkuazıdır (koyu metinle 12,04:1). */
  --vurgu: #5EE6D0; --vurgu-uzeri: #0D1420; --vurgu-basili: #38BFAE;
  --vurgu-parlak: #5EE6D0; --vurgu-soluk: rgba(94,230,208,.12);
  --basari: #7BD3AE; --uyari: #E8C77A; --hata: #FFB4AB;
  --hata-soluk: rgba(255,180,171,.14);
  --sampanya: #E8C77A; --sampanya-soluk: rgba(232,199,122,.16);
  --sampanya-zemin: #353A39;   /* --metin-2 üstünde 6,25:1 · --metin 10,25:1 */
  --golge-kart:  0 1px 2px rgba(0,0,0,.30), 0 10px 30px rgba(0,0,0,.28);
  --golge-sahne: 0 2px 6px rgba(0,0,0,.34), 0 28px 70px rgba(0,0,0,.42);
  --kenar-isik:  inset 0 1px 0 rgba(255,255,255,.06);
  --golge: var(--golge-kart);
}
/* Geriye dönük ad: eski `acik` niteliği artık varsayılanla aynı. */
:root[data-tema="acik"] { color-scheme: light; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--zemin); color: var(--metin);
  font-family: var(--font); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }

/* ── ERİŞİLEBİLİRLİK ─────────────────────────────────────────────── */

/* Klavye kullanıcısı nerede olduğunu GÖRMELİ. Odak halkasını kaldırmak,
   klavyeyle gezineni kör etmektir. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--vurgu-parlak);
  outline-offset: 2px;
  border-radius: var(--r-s);
}

/* İçeriğe atla — klavye kullanıcısı her sayfada menüyü baştan geçmesin */
.atla {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--vurgu); color: var(--vurgu-uzeri); padding: 12px 18px;
  border-radius: 0 0 var(--r-m) 0; font-weight: 600;
}
.atla:focus { left: 0; }

/* Yalnız ekran okuyucu için */
.gizli-metin {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

/* ── DÜZEN ───────────────────────────────────────────────────────── */
.kap { width: min(1200px, 100% - 40px); margin-inline: auto; }
@media (max-width: 560px) { .kap { width: min(1200px, 100% - 24px); } }

.bolum { padding: 84px 0; }
@media (max-width: 760px) { .bolum { padding: 52px 0; } }

.izgara { display: grid; gap: 20px; }
.izgara-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.izgara-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.izgara-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .izgara-3, .izgara-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .izgara-2, .izgara-3, .izgara-4 { grid-template-columns: 1fr; } }

/* ── TİPOGRAFİ ───────────────────────────────────────────────────── */
/* 🎨 V6 TİPOGRAFİ ÖLÇEĞİ — premium etki font dosyasından değil, SIKI
   HİYERARŞİDEN gelir. Sistem yazı tipi korunur (ek font indirilmez: hız).
   Tasarım belgesindeki jetonlar (1440 → 390 px) ve satır yükseklikleri:
     display 64→40 (1,05) · h2 40→30 (1,15) · h3 24→21 (1,25)
     gövde 17→16 (1,60)   · destek 22→19 (1,45)
   Eski ölçek 50/34/21 ile daha "kurumsal broşür" duruyordu; büyük başlık
   ve sıkı satır yüksekliği ürüne ağırlık verir. Ara değerler `clamp` ile
   akar, böylece 768px'te de kırılmaz. */
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.05; font-weight: 700; }
h2 { font-size: clamp(30px, 2.9vw, 40px); line-height: 1.15; font-weight: 650; }
h3 { font-size: clamp(21px, 1.8vw, 24px); line-height: 1.25; font-weight: 650; }
/* Kart başlıkları bazen h4 olmak zorunda: bir h3 alt başlığın ALTINDAKİ
   kartlar h3 kalırsa hiyerarşi düzleşir (ekran okuyucu grubu göremez).
   Görsel ağırlık aynı kalsın diye h4 kart içinde h3 gibi çizilir. */
.kart h4 { font-size: clamp(19px, 1.6vw, 21px); line-height: 1.25; font-weight: 650; }
h4 { line-height: 1.3; }
p  { margin: 0 0 1em; color: var(--metin-2); }
/* Hero destek metni: 22→19px, satır 1,45 (V6 `h1Destek` jetonu). */
.buyuk { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45; color: var(--metin-2); }
.soluk { color: var(--metin-3); font-size: 14px; }
a { color: var(--vurgu-parlak); }

/* ── BUTON ───────────────────────────────────────────────────────── */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 22px; border: 1px solid transparent;
  border-radius: var(--r-m); font: inherit; font-weight: 650; cursor: pointer;
  text-decoration: none; transition: transform .12s ease, background .12s ease;
}
.dugme:active { transform: translateY(1px); }
.dugme[disabled], .dugme[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.dugme-birincil { background: var(--vurgu); color: var(--vurgu-uzeri); font-weight: 600; }
.dugme-birincil:hover { background: var(--vurgu-basili); }
.dugme-birincil:hover:not([disabled]) { background: var(--vurgu-parlak); color: #08211f; }
.dugme-ikincil { background: transparent; color: var(--metin); border-color: var(--cizgi); }
.dugme-ikincil:hover:not([disabled]) { background: var(--yuzey-2); }
.dugme-sade { background: none; border: 0; color: var(--vurgu-parlak); padding: 10px 12px; }
.dugme-kucuk { min-height: 38px; padding: 8px 14px; font-size: 14px; }

/* ── KART ────────────────────────────────────────────────────────── */
.kart {
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r-l); padding: 22px;
}
.kart-baslik { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

/* ── ROZET ───────────────────────────────────────────────────────── */
.rozet {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-tam);
  font-size: 12.5px; font-weight: 650; border: 1px solid var(--cizgi);
  background: var(--yuzey-2); color: var(--metin-2);
}
.rozet-ok { background: rgba(53,179,126,.14); color: #6fd8ab; border-color: rgba(53,179,126,.3); }
.rozet-uyari { background: rgba(217,154,43,.14); color: #e8bb6a; border-color: rgba(217,154,43,.3); }
.rozet-hata { background: var(--hata-soluk); color: #f38c8f; border-color: rgba(229,72,77,.32); }

/* ── FORM ────────────────────────────────────────────────────────── */
.alan { display: grid; gap: 7px; margin-bottom: 18px; }
.alan label { font-weight: 600; font-size: 14.5px; }
.alan input, .alan select, .alan textarea {
  min-height: 46px; padding: 11px 14px; font: inherit;
  background: var(--zemin-2); color: var(--metin);
  border: 1px solid var(--cizgi); border-radius: var(--r-m);
}
/* ⚠️ `.alan` bir SARMALAYICI sınıftır (etiket + girdi ızgarası). Panelde
   bazı girdilere doğrudan `class="alan"` verilmişti; bu kural olmadan
   tarayıcı varsayılanına düşüyor ve koyu arayüzde BEYAZ, dar, monospace
   bir kutu olarak çıkıyordu (ekran görüntüsünde görüldü — hiçbir kapı
   yakalamaz, geçerli HTML üretir). İki kullanım da desteklenir. */
input.alan, select.alan, textarea.alan {
  display: block; width: 100%; min-height: 46px; padding: 11px 14px; font: inherit;
  background: var(--zemin-2); color: var(--metin);
  border: 1px solid var(--cizgi); border-radius: var(--r-m);
  margin-bottom: 0;
}
textarea.alan { min-height: 88px; resize: vertical; }
input.alan[type="color"] { padding: 4px; height: 46px; }
input.alan:focus, select.alan:focus, textarea.alan:focus { border-color: var(--vurgu-parlak); }

.alan input:focus, .alan select:focus, .alan textarea:focus { border-color: var(--vurgu-parlak); }
/* Hata YALNIZ renkle anlatılmaz: metin + simge + aria-invalid birlikte */
.alan-hata input, .alan-hata select, .alan-hata textarea { border-color: var(--hata); }
.alan-mesaj { font-size: 13.5px; color: var(--metin-3); }
.alan-hata .alan-mesaj { color: #f38c8f; }
.alan-hata .alan-mesaj::before { content: "⚠ "; }

/* ── DURUM KUTULARI ──────────────────────────────────────────────── */
/* "Veri yok" ile "veri alınamadı" AYNI EKRAN OLAMAZ — biri normal, diğeri arıza. */
.durum { text-align: center; padding: 40px 20px; border-radius: var(--r-l); border: 1px dashed var(--cizgi); }
.durum-simge { font-size: 30px; margin-bottom: 10px; opacity: .8; }
/* Kart başlığı h3 iken h2 oldu (heading-order ihlali); stil ikisini de
   kapsar ki eski işaretlemeli sayfa kalırsa görünüm bozulmasın. */
.durum h2, .durum h3 { margin-bottom: 6px; font-size: 19px; }
.durum p { max-width: 46ch; margin-inline: auto; }
.durum-hata { border-style: solid; border-color: rgba(229,72,77,.35); background: var(--hata-soluk); }

/* İskelet — yükleniyor. Sahte sayı göstermek yerine yapıyı gösterir. */
.iskelet { background: linear-gradient(90deg, var(--yuzey-2) 25%, var(--cizgi) 37%, var(--yuzey-2) 63%);
  background-size: 400% 100%; animation: kayar 1.3s ease infinite; border-radius: var(--r-s); }
@keyframes kayar { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.iskelet-satir { height: 14px; margin: 8px 0; }
.iskelet-sayi { height: 32px; width: 90px; }

/* ── TABLO ───────────────────────────────────────────────────────── */
.tablo-sar { overflow-x: auto; }              /* dar ekranda sayfa değil TABLO kayar */
table.tablo { width: 100%; border-collapse: collapse; min-width: 520px; }
.tablo th, .tablo td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--cizgi); font-size: 14.5px; }
.tablo th { color: var(--metin-3); font-weight: 650; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }

/* ── ÜST BAR ─────────────────────────────────────────────────────── */
.ust {
  position: sticky; top: 0; z-index: 40;
  /* 🔴 SAYDAM DEĞİL. Kontrast ölçümü saydam zemin üstündeki menü metnini
     3,28:1 raporluyordu — arkasında ne olduğu bilinemediği için. Ekranda
     oran 5,85:1 idi, ama sayfa kaydıkça çubuğun altından koyu bir bölüm de
     geçebilir. Ölçülemeyen oran, güvenilemeyen orandır. */
  background: var(--zemin);
  border-bottom: 1px solid var(--cizgi);
}
.ust-ic { display: flex; align-items: center; gap: 22px; height: 66px; }
.marka { font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--metin); text-decoration: none;   min-height: 44px; display: inline-flex; align-items: center;
}
.marka span { color: var(--vurgu-parlak); }
.ust nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
/* 🔴 BAĞLAM KURALI DÜĞMENİN RENGİNİ EZİYORDU.
   `.ust nav a` özgüllüğü (0,2,1) `.dugme-birincil` (0,1,0) kuralını
   yeniyordu: menüdeki "ARATİMO'yu kur" düğmesi turkuaz zemin üzerinde
   --metin-2 ile çiziliyor ve kontrast 2,37:1'e düşüyordu (canlı ölçüm).
   OctoAudit bunu "serious" olarak tam bu düğmelerde göstermişti.
   Düzeltme !important ile değil, KAPSAM DIŞI BIRAKARAK: menü bağlamı
   düğme sınıflarının rengine karışmaz. Aynısı alt bilgi için de geçerli. */
/* 🔴 DOKUNMA HEDEFİ 44 PİKSELİN ALTINDAYDI. Ölçüm (üç görünümde, gerçek
   tarayıcıda): menü bağlantıları 33px, marka 27–30px, alt bilgi 33px.
   Projenin kendi tasarım kuralı "hedef ≥44px" diyor; parmakla kullanımda
   33px ıskalanır. Yükseklik dolgu yerine min-height + dikey ortalama ile
   verilir: görsel yoğunluk değişmez, hedef büyür. */
.ust nav a { text-decoration: none; padding: 9px 12px; border-radius: var(--r-s); font-size: 15px;
  min-height: 44px; display: inline-flex; align-items: center; }
.ust nav a:not(.dugme) { color: var(--metin-2); }
.ust nav a:not(.dugme):hover { background: var(--yuzey-2); color: var(--metin); }
.ust nav a:not(.dugme)[aria-current="page"] { color: var(--metin); background: var(--yuzey-2); }
@media (max-width: 860px) { .ust nav .gizle-mobil { display: none; } }
/* Dar ekranda menü SIĞMIYORDU: 390px görünümde içerik 450px'e taşıyor ve
   sayfa yatay kayıyordu (gerçek tarayıcı ölçümü). Yatay kayan bir sayfa
   mobilde en görünür kusurdur — ilk izlenimi tek başına bozar.
   Çözüm: menü sarmalı, marka ve birincil eylem korunur, ara bağlantılar
   dar ekranda gizlenir. */
@media (max-width: 620px) {
  /* 🔴 ÜST ÇUBUK TELEFONDA İKİ SATIRA SARIYORDU — gözle görüldü ve ölçüldü
     (390×844): marka üstte, menü altta, ikisi 844 pikselin 230'unu (≈%27)
     yiyordu. Karar öğeleri o kadar aşağı itilmişti. Sarma KALDIRILDI; her
     parça sığacak kadar küçültüldü ve yatay taşma ölçümle doğrulandı.
     Dil seçici GİZLENMEZ: bir kez gizlenmişti ve telefondan gelen ziyaretçi
     dilini hiç değiştiremiyordu. */
  .ust-ic { height: 60px; padding: 0; flex-wrap: nowrap; gap: 6px; }
  .ust nav { gap: 0; flex-wrap: nowrap; justify-content: flex-end; }
  .ust nav a { padding: 8px 8px; font-size: 13.5px; }
  .ust nav a.dugme { padding: 8px 12px; font-size: 13.5px; }
  /* 🔴 DİL SEÇİCİ TELEFONDA HİÇ GÖRÜNMÜYORDU — ölçüldü (2026-09-03).
     Aşağıdaki kural "düğme olmayan ve öncelikli olmayan her bağlantıyı
     gizle" diyordu; TR/EN/DE bağlantıları da bu tarife uyuyor ve
     siliniyordu. Sonuç: ARATİMO çok dilli bir ürün olduğunu ana sayfada
     söylüyor ama ziyaretçi TELEFONDA dilini hiç değiştiremiyordu —
     üstelik ziyaretin çoğu telefondan geliyor.
     Ara menü bağlantıları dar ekranda hâlâ gizli (yer yok); dil seçimi
     ise ürünün vaadi, gizlenemez. */
  .ust nav a:not(.dugme):not([data-oncelik]) { display: none; }
  /* Geri açma AYRI kuralda: `:not(.dil-secici a)` biçimindeki bileşik
     :not() eski Safari sürümlerinde kuralın TAMAMINI düşürür — o zaman
     menü bağlantılarının hepsi geri gelir ve sayfa yatay kayar. Basit
     seçici + !important her tarayıcıda aynı sonucu verir. */
  .ust nav .dil-secici { display: inline-flex !important; gap: 0; }
  .ust nav .dil-secici a { display: inline-flex !important; padding: 8px 5px; font-size: 13px; min-height: 44px; }
  .marka { font-size: 16px; white-space: nowrap; }
}
/* 🔴 EN DAR CİHAZDA (320px) ÜST ÇUBUK 13 PİKSEL TAŞIYORDU — ölçüldü.
   Yatay kayan sayfa mobilde en görünür kusurdur. Bu genişlikte üst
   çubuktaki kurulum düğmesi KALDIRILIR: aynı düğme kahramanda, ilk
   ekranda, dolu hâlde zaten duruyor — yani eylem kaybolmuyor, MÜKERRER
   olan gidiyor. Dil seçici ve giriş kalır (ikisinin başka yolu yok). */
@media (max-width: 370px) {
  .ust nav a.dugme { display: none; }
}
/* Uzun sözcük ve adresler taşmasın (e-posta, alan adı, kurulum kodu) */
h1, h2, h3, h4, p, td, li, summary { overflow-wrap: anywhere; }
/* Gövde satırı 68 karakteri geçmez (V6 §B): uzun satır okumayı yorar.
   Kart ve ızgara içindeki paragraflar zaten dar; yalnız serbest akan
   paragraflara uygulanır. */
.kap > p, .kap > .buyuk { max-width: 68ch; }

/* ── PANEL DÜZENİ ────────────────────────────────────────────────── */
.panel { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.panel > * { min-width: 0; }   /* grid çocuğu varsayılan olarak küçülmez */
.yan { background: var(--zemin-2); border-right: 1px solid var(--cizgi); padding: 22px 16px; }
.yan-nav { display: grid; gap: 3px; margin-top: 22px; }
.yan-nav a {
  color: var(--metin-2); text-decoration: none; padding: 11px 13px;
  border-radius: var(--r-m); font-size: 15px; display: flex; gap: 10px; align-items: center;
}
.yan-nav a:hover { background: var(--yuzey); color: var(--metin); }
.yan-nav a[aria-current="page"] { background: var(--vurgu-soluk); color: var(--vurgu-parlak); font-weight: 620; }
.panel-ic { padding: 28px 30px 60px; min-width: 0; }
@media (max-width: 900px) {
  /* Dar ekranda panel tek sütuna iner ve menü yatay şeride dönüşür.
     ⚠️ `grid-auto-flow: column` + `overflow-x` BİRLİKTE ÇALIŞMAZ: grid
     sütunları içeriğe göre büyür ve konteyneri min-content genişliğine
     zorlar. Ölçüldü — 390px ekranda yan menü 1009px'e çıkıp SAYFAYI
     yatay kaydırıyordu. Kaydırması gereken menünün kendisidir, sayfa değil.
     Çözüm: flex + konteynerde min-width:0 (grid çocuğunun küçülebilmesi için). */
  /* Grid satırı ESNEMESİN: `min-height:100vh` tek sütuna inince yükseklik
     iki satıra paylaştırılıyor ve menü şeridi ekranın üçte birini boş
     alanla kaplıyordu (ekran görüntüsünde görüldü, ölçüm yakalamadı —
     yatay taşma yoktu, yalnız dikey israf vardı). */
  .panel { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .yan {
    border-right: 0; border-bottom: 1px solid var(--cizgi); padding: 14px;
    min-width: 0; max-width: 100%; overflow: hidden;
  }
  /* Menü YATAY KAYDIRMA yerine SARIYOR.
     Kaydırmalı şeritte 390px ekranda son üç madde (Kurulum, Kullanım ve
     Plan, Ayarlar) ekran DIŞINDA kalıyordu; kaydırma göstergesi de
     olmadığı için oradan haberdar olunmuyordu. Ekran görüntüsüne bakınca
     görüldü — taşma ölçümü yakalamadı, çünkü kayan sayfa değil şeritti.
     Yedi maddelik menüde bulunabilirlik, tek satır kalmaktan önemli. */
  .yan-nav {
    display: flex; flex-wrap: wrap; margin-top: 12px; gap: 6px;
  }
  .yan-nav a { white-space: nowrap; flex: 0 0 auto; }
  .nav-ayrac { flex: 0 0 100%; margin: 6px 0; }
  .panel-ic { padding: 18px 16px 48px; min-width: 0; }
}

/* ── ÖLÇÜM KARTI ─────────────────────────────────────────────────── */
.olcum b { display: block; font-size: 27px; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
/* Ölçüm kartında etiketler ALT ALTA. Satır içi kaldıklarında iki etiket
   birbirine yapışıyordu: "konuşmason 30 gün" (ekran görüntüsünde görüldü;
   ne kapı ne taşma ölçümü yakalar — geçerli HTML, okunamaz metin). */
.olcum .etiket { display: block; color: var(--metin-3); font-size: 13.5px; }
.olcum .etiket + .etiket { margin-top: 2px; }

/* ── ADIM ÇUBUĞU ─────────────────────────────────────────────────── */
.adimlar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.adim { display: flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: var(--r-tam);
  border: 1px solid var(--cizgi); background: var(--yuzey); font-size: 13.5px; color: var(--metin-3); }
.adim[data-durum="aktif"] { border-color: var(--vurgu-parlak); color: var(--metin); background: var(--vurgu-soluk); }
.adim[data-durum="bitti"] { color: #6fd8ab; border-color: rgba(53,179,126,.3); }
.adim-no { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--yuzey-2); font-size: 12px; font-weight: 700; }

/* ── KOD KUTUSU ──────────────────────────────────────────────────── */
.kod {
  background: #0a0f18; border: 1px solid var(--cizgi); border-radius: var(--r-m);
  padding: 14px 16px; font-family: var(--font-mono); font-size: 13px;
  color: #b9cbe4; overflow-x: auto; white-space: pre; -webkit-user-select: all; user-select: all;
}

/* ── UYARI ŞERİDİ ────────────────────────────────────────────────── */
.serit { border-radius: var(--r-m); padding: 13px 16px; font-size: 14.5px; border: 1px solid; }
.serit-bilgi { background: var(--vurgu-soluk); border-color: rgba(47,179,168,.3); color: var(--metin); }
.serit-uyari { background: rgba(217,154,43,.1); border-color: rgba(217,154,43,.3); color: var(--metin); }
.serit-hata { background: var(--hata-soluk); border-color: rgba(229,72,77,.32); color: var(--metin); }

/* ── FOOTER ──────────────────────────────────────────────────────── */
.alt { border-top: 1px solid var(--cizgi); padding: 40px 0; background: var(--zemin-2); margin-top: 60px; }
.alt-izgara { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 28px; }
@media (max-width: 760px) { .alt-izgara { grid-template-columns: 1fr 1fr; } }
.alt a { text-decoration: none; display: flex; align-items: center; padding: 5px 0; font-size: 14.5px;
  min-height: 44px; }
.alt a:not(.dugme) { color: var(--metin-2); }
.alt a:not(.dugme):hover { color: var(--metin); }

/* ── PANEL MENÜ AYRACI ─────────────────────────────────────────────────
   Günlük iş ile hesap işlerini ayırır. Görsel bir çizgi; ekran okuyucuya
   aria-hidden ile geçilmez, çünkü sıralamada anlam taşımaz. */
.nav-ayrac {
  border: 0;
  border-top: 1px solid var(--cizgi);
  margin: 12px 8px;
}

/* ── WIDGET ÖNİZLEMESİ ─────────────────────────────────────────────────
   Ziyaretçinin göreceği balonun panel içindeki temsili. Gerçek widget
   DEĞİLDİR; ayarların sonucunu göstermek içindir. Bu yüzden içindeki
   metinler dekoratif sayılır ve okuyucuya iki kez okutulmaz. */
.onizleme-cerceve {
  border: 1px solid var(--cizgi);
  border-radius: var(--r-m);
  background: var(--zemin-2);
  overflow: hidden;
}
.onizleme-cerceve[data-aygit="mobil"] { max-width: 300px; }
.onizleme-sayfa {
  position: relative;
  min-height: 300px;
  padding: 14px;
  display: flex;
}
.onizleme-cerceve[data-aygit="mobil"] .onizleme-sayfa { min-height: 380px; }
.onizleme-balon {
  --onizleme-vurgu: var(--vurgu);
  margin-top: auto;
  width: min(300px, 100%);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-m);
  box-shadow: var(--golge);
  overflow: hidden;
}
.onizleme-balon[data-konum="sag"] { margin-inline-start: auto; }
.onizleme-balon[data-konum="sol"] { margin-inline-end: auto; }
.onizleme-ust {
  background: var(--onizleme-vurgu);
  color: #fff;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.onizleme-ust .etiket { color: rgba(255,255,255,.82); }
.onizleme-govde { padding: 12px; min-height: 96px; }
.onizleme-mesaj {
  margin: 0;
  background: var(--yuzey-2);
  border-radius: var(--r-s);
  padding: 10px 12px;
}
.onizleme-alt {
  border-top: 1px solid var(--cizgi);
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--metin-3);
}
.onizleme-gonder {
  background: var(--onizleme-vurgu);
  color: #fff;
  border-radius: var(--r-tam);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
}

/* Tamamlanan adım tıklanabilir — düğme, adım rozetinin görünümünü korur. */
.adim-dugme {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; color: inherit; font: inherit;
  padding: 0; margin: 0; cursor: pointer; min-height: 44px;
}
.adim-dugme:hover { text-decoration: underline; }
/* ── AVATARLAR ───────────────────────────────────────────────────── */
.avatar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px}.avatar-kart{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;padding:14px;border:1px solid var(--cizgi);border-radius:var(--r-m);background:var(--yuzey)}.avatar-kart h3{margin:0}.avatar-kart p{margin:2px 0}.avatar-kart .rozet,.avatar-kart .dugme{grid-column:2}.avatar-yuz{width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--yuzey-2);display:grid;place-items:center;font-size:26px;font-weight:800}.avatar-yuz img,.avatar-preview img{width:100%;height:100%;object-fit:cover}.avatar-form{max-width:640px}.avatar-onay{display:flex;gap:10px;align-items:flex-start;margin:8px 0 18px;font-size:14px}.avatar-onay input{margin-top:3px}.avatar-preview{width:180px;aspect-ratio:1;border:1px dashed var(--cizgi);border-radius:var(--r-l);display:grid;place-items:center;overflow:hidden;color:var(--metin-3);margin-bottom:16px}.avatar-preview img{object-fit:cover}

/* ── ARATİMO KENDİNİ TANITIYOR ─────────────────────────────────────────
   Ana sayfanın kanıt bloğu. Solda yüz, sağda ne söylediği. Dar ekranda
   tek sütuna iner; yüz üstte kalır çünkü asıl kanıt odur. */
.tanitim-sar {
  display: grid;
  /* Yüz sahnenin merkezi: ziyaretçi ürünün ne olduğunu YÜZDEN anlamalı.
     Önceki 380px'lik kutu "küçük bir profil fotoğrafı" gibi duruyordu. */
  /* 🔴 TEK SÜTUN. Yan sütundaki sohbet paneli ürünü "avatar + ayrı bir
     chatbot" gibi gösteriyordu. Sahne tek parça: yüz üstte, altında ince
     şerit (altyazı · dil · konuş). */
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
  gap: 0;
  align-items: start;
  background: var(--zemin-2);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-l);
  padding: 26px;
}
@media (max-width: 860px) { .tanitim-sar { grid-template-columns: 1fr; gap: 22px; } }

.tanitim-yuz img, .tanitim-yuz video {
  width: 100%; max-width: 560px; aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: var(--r-l);
  background: var(--yuzey); display: block;
}
.tanitim-ses { margin-top: 12px; }
/* Tanıtımı BAŞLATAN düğme: sahnenin birincil çağrısı, kaçırılmayacak kadar
   büyük. Video kendiliğinden başlamıyor (ziyaretçi kararı + tarayıcı sesli
   otomatik oynatmayı zaten engelliyor). */
.tanitim-oynat { margin-top: 12px; width: 100%; padding: 14px; font-size: 16px; }

/* Cümleler tek tek okunabilsin: tanıtım bir paragraf yığını değil,
   ARATİMO'nun söylediği ayrı cümlelerdir. */
.tanitim-metin p {
  margin: 0 0 10px;
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--vurgu);
  color: var(--metin);
}
.tanitim-eylem { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 14px; }

/* ── KONUŞMA SÜTUNU ────────────────────────────────────────────────────
   🔴 Kullanıcı ölçümü (2026-08-19): yazışma yüzün ALTINDA açılıyordu.
   Ziyaretçi yüze bakarken yazıyı görmüyor, ikisi ayrı şeymiş gibi
   duruyordu: "konuşma yazıları ONUN YANINDA çıksın."
   Sütun yüzle AYNI yükseklikte tutulur — yan yana iki eşit sahne. */
/* Şerit: yüzün hemen altında, aynı genişlikte. Kutu değil, sahnenin parçası. */
#aratimo-konusma { display: block; width: 100%; margin-top: 4px; }

/* Doğrulanmış tanıtım cümleleri artık kahramanın ALTINDA kendi bölümünde. */
.tanitim-dayanak {
  margin-top: 22px; padding: 24px;
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  border-radius: var(--r-l);
}
.tanitim-dayanak > h2 { margin: 0 0 14px; }
.tanitim-ses-oynatici { width: 100%; max-width: 380px; margin-top: 12px; }

/* ── AVATAR SAHNESİ ────────────────────────────────────────────────────
   Ziyaretçi sayfayı açtığında ürünün ne olduğunu YÜZDEN anlamalı.
   Portre büyük tutuldu; kahraman alanının ağırlık merkezi burası. */
.tanitim-yuz img, .tanitim-yuz video {
  max-width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,.45), var(--golge);
  transition: transform .5s ease, box-shadow .5s ease;
}
/* Konuşurken hafif canlılık — GERÇEK dudak eşlemesi değil, o canlı
   oturumda olur. Sahte animasyonu gerçekmiş gibi sunmuyoruz. */
.tanitim-yuz.konusuyor img {
  animation: aratimo-nefes 2.4s ease-in-out infinite;
  box-shadow: 0 0 0 3px var(--vurgu-soluk), var(--golge);
}
@keyframes aratimo-nefes {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.012); }
}
@media (prefers-reduced-motion: reduce) {
  .tanitim-yuz.konusuyor img { animation: none; }
}

/* ── SİTE DİL SEÇİCİ ───────────────────────────────────────────────────
   Dil sayfaları TEK KAYNAKTAN üretilir; seçici yalnız aralarında gezinir.
   Küçük ve sade: pazarlama sayfasının birincil eylemini gölgelememeli. */
.dil-secici { display: inline-flex; gap: 2px; margin-inline-end: 6px; }
.dil-secici a {
  padding: 6px 8px; font-size: 13px; border-radius: var(--r-s);
  color: var(--metin-3); text-decoration: none;
}
.dil-secici a:hover { color: var(--metin); background: var(--yuzey); }
.dil-secici a[aria-current="page"] { color: var(--vurgu-parlak); font-weight: 650; }

/* ── KAHRAMAN: METİN SOLDA, KONUŞAN YÜZ SAĞDA ─────────────────────────
   Kullanıcı isteği (2026-08-26): avatar kahraman bölümünün sağındaki boş
   alana taşındı. Öncesinde sağ taraf tamamen boştu ve konuşan yüz ancak
   aşağı kaydırınca görünüyordu — satan ürünün kanıtı ilk ekranda değildi.
   Sütunlar tanitim.js tarafından kuruluyor; bu dosya yalnız yerleşimi
   tanımlar. İki sütun YALNIZ geniş ekranda; dar ekranda metin üstte, yüz
   altında kalır (yüz küçülüp okunmaz hâle gelmez).                      */
.kahraman-ikili {
  display: grid;
  /* 🔴 EŞİK ÇOK YÜKSEKTİ. Ölçüldü (2026-08-26): yan yana yerleşim yalnız
     1100 pikselden GENİŞ pencerede oluyordu; 1024 ve altında avatar yine
     alta düşüyordu. Yan pencereyle çalışan bir kullanıcı için taşıma hiç
     olmamış görünüyor — nitekim öyle bildirildi.
     Yüz sütunu artık ESNER (280–460px), böylece dar pencerede küçülerek
     yan yana kalır; yalnız gerçekten dar ekranda (920px altı) alta iner — 950px'te metin
     sütunu 378px kalıyor ve başlık düzgün kırılıyor, gözle doğrulandı. */
  grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);
  gap: 36px;
  /* ÜSTTEN hizalanır. Ortadan hizalayınca kısa olan metin sütunu, uzun olan
     yüz sütununa göre ortalanıyor ve başlığın ÜSTÜNDE koca bir boşluk
     kalıyordu — ilk ekranda satış cümlesi aşağı itilmiş oluyordu. */
  align-items: start;
}

/* 🔴 TELEVİZYON PANELİ SIĞMIYORDU. Ölçüldü (2026-09-07, 1440x900 canlı):
   yüz sütunu 460 pikselle sınırlıyken içine iki sütun koyunca ekran 198,
   yazı 189 piksel kalıyordu — "televizyon" değil iki dar şerit. Ekran ile
   yazının yan yana durabilmesi için panelin kendisi geniş olmalı; bu
   genişlik ancak gerçekten geniş pencerede vardır, o yüzden eşik 1100px. */
@media (min-width: 1100px) {
  .kahraman-ikili { grid-template-columns: minmax(400px, 1fr) minmax(560px, 720px); }
  .kahraman-sag { max-width: none; }
}
/* 🔴 KAYDIRINCA AVATAR EKRANDAN KAYBOLUYORDU. Kullanıcı bildirdi
   (2026-09-04): "konuşma aşağı indikçe avatar yukarıda kalıyor, sayfa da
   aşağı iniyor — yazılar kaysın avatar kalsın." Ölçüldü (canlı, 1440x900):
   1000px kaydırınca yüz -1442..-1036'ya düşüyor, yani TAMAMEN ekran dışında.
   Konuşan yüzü satan bir üründe, konuşurken yüzün kaybolması ürünün
   kendisini gizlemek demektir.

   ÖNCE `position: sticky` denedim ve ÇALIŞMADI — ölçüldü: yüz yine
   -1042'ye düştü. Sebebi yapışkanlığın EBEVEYN KUTUSUYLA sınırlı olması:
   kahraman bölümü bitince yapışkan çocuk da onunla gider. Sayfanın geri
   kalanı boyunca yüzü tutmak yapışkanlıkla mümkün değil.

   Doğrusu: kahraman ekrandan ÇIKINCA ve KONUŞMA SÜRÜYORKEN aynı sütun
   köşeye SABİTLENİR. İkinci bir widget DEĞİL — aynı öğe, yeni bir kutu
   (DOM'da taşınmaz; canlı WebRTC görüntüsü kopmaz). Konuşma yoksa hiç
   sabitlenmez: pazarlama sayfasını gezen ziyaretçiye kalıcı bir kutu
   dayatmayız. */
.kahraman-sag { min-width: 0; }

.kahraman-sag.avatar-sabit {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 45;
  width: clamp(230px, 24vw, 320px);
  max-height: min(78vh, 640px);
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: var(--r-l);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  background: var(--zemin-2);
  border: 1px solid var(--cizgi);
  padding: 10px;
}
/* Sabitken sahne sıkışır: yüz küçülür ama okunur kalır, şerit altında durur. */
.kahraman-sag.avatar-sabit .tanitim-sar { padding: 6px; }
.kahraman-sag.avatar-sabit .tanitim-oynat { padding: 9px 8px; font-size: 13px; }
/* 🔴 İKİ MEKANİZMA ÇAKIŞIYORDU. Televizyon düzeni geldikten sonra (yüz solda,
   yazı sağda) bu köşe kutusu o iki sütunu 230-320 piksellik kutuya sıkıştırıyor,
   sütunlar ~140 piksele düşüyor ve dokuz dilli seçim listesi alt alta diziliyordu
   — gözle görüldü (kullanıcı ekran görüntüsü, 2026-09-07).
   Köşe kutusu DAR bir kutudur: orada televizyon düzeni yoktur, tek sütun vardır.
   Yapışkan yüz panelin İÇİNDE tutar; bu kutu ise panel tümüyle geçildikten
   sonra devralır. İkisi aynı anda değil, sırayla çalışır. */
.kahraman-sag.avatar-sabit .tanitim-sar { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.kahraman-sag.avatar-sabit .tanitim-yuz {
  position: static;                 /* dar kutuda yapışkanlığın yol alacağı yer yok */
  max-height: 190px;
}
.kahraman-sag.avatar-sabit .tanitim-yuz img,
.kahraman-sag.avatar-sabit .tanitim-yuz video { max-height: 150px; }
/* Kurulum çağrısı sayfada zaten var; dar kutuda yeri yok, konuşmayı aşağı iter. */
.kahraman-sag.avatar-sabit .tanitim-eylem { display: none; }
/* Sabitlenen sütun akıştan çıktığı için yerinde boşluk kalmasın diye
   kahraman ızgarası tek sütuna döner. */
.kahraman-ikili.avatar-sabit-aktif { grid-template-columns: minmax(0, 1fr); }

/* 🔴 SABİT KUTU SAYFA İÇERİĞİNİ ÖRTÜYORDU — gözle görüldü (ekran
   görüntüsü, 1440px): "Her soru yeniden ücretlendirilir" kartının sağ
   yarısı kutunun altında kalıyordu. Ölçüm bunu yakalamaz (yatay taşma yok,
   kutu ekranın içinde) — bakmadan bulunmazdı.
   İçerik sabit kutu kadar SAĞDAN DARALIR; hiçbir şey altında kalmaz.
   Yalnız sabitleme etkinken uygulanır, kapanınca sayfa eski genişliğine
   döner. */
body.avatar-sabit-var main { padding-inline-end: clamp(258px, 26vw, 356px); }
@media (max-width: 620px) { body.avatar-sabit-var main { padding-inline-end: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .kahraman-sag.avatar-sabit { transition: width .18s ease, padding .18s ease; }
}
/* Kahraman sütununda sahne kabın tamamını kullanır: 640px'lik ortalama
   kuralı burada yüzü gereksizce küçültürdü. */
.kahraman-sag .tanitim-sar { grid-template-columns: minmax(0, 1fr); }
.kahraman-sag .tanitim-yuz img,
.kahraman-sag .tanitim-yuz video { max-width: 100%; }

/* 🔴 TABLETTE YAN YANA DEĞİLDİ. Ölçüldü (2026-09-03, 768x1024): iki sütun
   920px'te tek sütuna iniyordu; tablette başlık üstte, yüz altında kalıyordu.
   768px'te metin sütunu 412px kalıyor ve başlık düzgün kırılıyor — yan yana
   durabilecekken alt alta koymak, ürünün kanıtını ilk ekrandan çıkarıyordu.
   Eşik dar ekran düzeninin başladığı yere (620px) çekildi; onun altında zaten
   `kahraman-bolunmus` düzeni devreye giriyor (başlık + yüz yan yana,
   açıklama altta). Yani 620px ALTINDA da yan yana — düzeni değişik. */
@media (max-width: 920px) {
  .kahraman-ikili { grid-template-columns: minmax(0, 1fr) minmax(230px, 340px); gap: 24px; }
  .kahraman-sag { max-width: none; }
}
/* ── TELEFONDA "KONUŞAN YÜZE DÖN" ŞERİDİ (V6 §H.1) ───────────────────
   Telefonda avatar bilinçli olarak sabitlenmiyor (390px'te sabit kutu
   ekranın üçte birini kaplardı). Bedeli, konuşurken yüzü kaybetmekti.
   Bu şerit yüzü KAPLAMAZ: 44px, alt kenarda, yalnız konuşma sürerken ve
   yalnız kahraman ekran dışındayken. Dokununca canlı sahneye kaydırır. */
.konusma-serit {
  position: fixed; inset-inline: 12px; bottom: 12px; z-index: 46;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--cizgi); border-radius: 14px;
  background: var(--zemin-2); color: var(--metin);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  font: inherit; font-size: 14px; text-align: start; cursor: pointer;
}
.konusma-serit.acik { display: flex; }
.konusma-serit:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.konusma-serit-durum { color: var(--metin-2); font-size: 13px; }
.konusma-serit-eylem { color: var(--vurgu); font-weight: 650; white-space: nowrap; }
/* Geniş ekranda avatar zaten sabitleniyor; şerit orada HİÇ görünmez. */
@media (min-width: 621px) { .konusma-serit { display: none !important; } }

@media (max-width: 620px) {
  .kahraman-ikili { grid-template-columns: 1fr; gap: 24px; }
  /* Dar ekranda YAPIŞKANLIK KAPALI: 390px'te sabit bir sütun ekranın
     yarısını kalıcı kaplar ve okunacak yer bırakmaz. Telefonda düzen
     zaten başlık+yüz yan yana; kaydırma doğal akar. */
  /* Telefonda sabitleme KAPALI: 390px'te köşeye sabit bir kutu ekranın
     üçte birini kalıcı kaplar ve okunacak yer bırakmaz. */
  .kahraman-sag { max-width: 560px; }
  .kahraman-sag.avatar-sabit { position: static; width: auto; max-height: none;
    box-shadow: none; border: 0; padding: 0; background: transparent; }
}

/* ── TELEFON: BAŞLIK ile YÜZ YAN YANA, AÇIKLAMA ALTTA ────────────────
   Ölçüldü (2026-09-03, 390x844): tek sütunlu dizilimde konuşan yüz y=740'ta
   başlıyor, 288px yüksekliğiyle ekrandan taşıyordu — ziyaretçi ilk ekranda
   ürünün KANITINI (konuşan yüz) hiç görmüyordu.
   Düzen: rozet+başlık solda, yüz sağda, açıklama ve düğmeler ikisinin
   altında tam genişlikte.
   `display: contents` ile metin sarmalayıcısının kutusu kaldırılır ve iki
   parçası doğrudan kahraman ızgarasının hücrelerine yerleşir; böylece
   kaynak HTML tek parça kalır (JS çalışmazsa `kahraman-bolunmus` sınıfı
   hiç eklenmez ve bu kuralların TAMAMI devre dışı kalır — bozuk yarım
   düzen oluşmaz). */
@media (max-width: 620px) {
  /* 🔴 YÜZ 114 PİKSELLİK SÜTUNA SIKIŞMIŞTI. Ölçüldü (2026-09-07, 390x844
     canlı): ekran 114x168 piksel, yazışma şeridi ise JS ile bambaşka bir
     yere (açıklamanın altına) taşınıyordu. Sonuç tam da kullanıcının
     bildirdiği kusur: "avatar yukarıda kalıyor", yazı çok aşağıda akıyor.
     Telefonda yan yana düzen fiziksel olarak mümkün değil; televizyon
     karşılığı şudur: ekran BAŞLIĞIN HEMEN ALTINDA, tam genişlikte ve
     sınırlı yükseklikte; yazışma onun hemen altından akar.
     Yüzün ilk ekranda kalması kararı (2026-09-03) korunuyor — yüz hâlâ
     açıklama metninin ÜSTÜNDE, yani katlamanın üstünde. */
  .kahraman-bolunmus {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "baslik" "yuz" "govde";
    row-gap: 16px;
    align-items: start;
  }
  .kahraman-bolunmus .kahraman-sol { display: contents; }
  .kahraman-bolunmus .kahraman-baslik { grid-area: baslik; min-width: 0; }
  .kahraman-bolunmus .kahraman-govde { grid-area: govde; min-width: 0; }
  .kahraman-bolunmus .kahraman-sag { grid-area: yuz; max-width: none; min-width: 0; }
  .kahraman-bolunmus .kahraman-sag .tanitim-sar { padding: 10px; border-radius: var(--r-m); }
  .kahraman-bolunmus .kahraman-sag .tanitim-oynat { padding: 9px 6px; font-size: 12.5px; margin-top: 8px; }
  /* Dar sütunda başlık taşmasın. */
  .kahraman-bolunmus .kahraman-baslik h1 { font-size: clamp(26px, 8vw, 34px); }
}


/* ══ KANIT ŞERİDİ (V7) ═══════════════════════════════════════════════════
   Ürünün tek ayırt edici davranışının İLK EKRANDAKİ kanıtı: bir cümle ve
   o cümlenin dayanağı. Rakiplerin hepsi "uydurmuyorum" der; gösterebilen
   yoktur. Şerit o farkı karar anına taşır.

   RENK KARARI: imza turkuazı burada kullanılır, düğmede DEĞİL. Rozet
   temadan bağımsızdır (açık ve koyu temada aynı) — ürünün imzası tanınabilir
   kalmalı. Ölçüldü: #0D1420 metin / #5EE6D0 zemin = 12,04:1.
   Alıntı --metin, dayanak satırı --metin-2 ile yazılır; ikisinin de oranı
   --yuzey üzerinde jeton bloğunda hesaplanmıştır. */
.kanit-serit {
  position: relative;
  max-width: 46ch;
  margin-top: 22px;
  padding: 14px 16px 13px;
  border: 1px solid var(--cizgi);
  border-inline-start: 3px solid var(--imza);
  border-radius: var(--r-m);
  background: var(--yuzey);
  box-shadow: var(--kenar-isik), var(--golge-kart);
}
.kanit-serit-etiket {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-tam);
  background: var(--yuzey-2);
  color: var(--metin-2);
  /* 🔴 11 PİKSELDİ — tasarım katmanı kapısı yakaladı. Bu depoda aynı kusur
     bir kez daha olmuştu (2026-08-26, güven şeridi açıklamaları): renk
     kontrastını ölçüp YAZI BOYUTUNU ölçmemek. Türkçede ö ü ç ş ğ işaretleri
     küçük puntoda okunmaz olur; eşik 12,5 pikseldir. */
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .09em;
}
.kanit-serit-cumle {
  margin: 0;
  color: var(--metin);
  font-size: 15.5px;
  line-height: 1.5;
  font-weight: 560;
}
/* Düz paragraf; çocuğa gereksiz `display` verilmez.
   ⚠️ ÖLÇÜM NOTU (2026-09-05): kapalı bir <details>'in içeriğini
   `getBoundingClientRect().height` ile yoklamak YANILTIR — tarayıcı içeriği
   `content-visibility: hidden` ile atlar, kutu ölçüsü sıfırlanmaz. Boş bir
   sayfada, hiç CSS olmadan da 18px ölçtüm. Doğru yoklama `checkVisibility()`;
   onunla ölçüldüğünde aç/kapa doğru çalışıyor. Kusur üründe değil ölçümdeydi. */
.kanit-serit-dayanak {
  margin: 10px 0 0;
  color: var(--metin-2);
  font-size: 13px;
  line-height: 1.55;
}
.kanit-serit-rozet {
  padding: 3px 10px;
  border-radius: var(--r-tam);
  background: var(--imza);
  color: var(--imza-uzeri);
  font-size: 12.5px;
  font-weight: 750;
}
.kanit-serit-dayanak code {
  padding: 1px 6px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-s);
  background: var(--yuzey-2);
  color: var(--metin);
  font-family: var(--font-mono);
  font-size: 12.5px;
}
/* Dar ekranda şerit kahraman gövdesiyle birlikte yüzün ALTINA düşer;
   ilk ekranda kalabilmesi için kısalır — ölçüm 390×844'te yapılır. */
@media (max-width: 620px) {
  .kanit-serit { margin-top: 16px; padding: 12px 13px; max-width: 100%; }
  .kanit-serit-cumle { font-size: 14.5px; }
}

/* 🔴 TEK BİRİNCİL EYLEM — tanıtım düğmesi dolu düğme olmaktan çıkarıldı.
   Ölçüldü (2026-09-05): ilk ekranda üç dolu düğme yarışıyordu. Oynat
   düğmesi POSTER ÜZERİNDE durur; ağırlığı ikincil, konumu belirgin. */
.tanitim-oynat { margin-top: 12px; width: 100%; padding: 14px; font-size: 16px; }
.kanit-serit-ac { margin-top: 10px; }
/* İşaretçi `list-style: none` ile gizlenir; summary'nin display'i
   `list-item` olarak BIRAKILIR. Pilin genişliği kendi <span>'iyle sınırlı
   olduğu için görünüm zaten istenen gibi. */
/* 🔴 DOKUNMA HEDEFİ 428×28'Dİ — klavye turunda ölçüldü (2026-09-05).
   Bu summary bir düğmedir: kanıtı açar/kapatır. Sayfadaki diğer bütün
   odaklanabilir öğeler 44 piksele çıkarılmışken bunu 28'de bırakmak,
   denetimi yarım bırakmak olurdu. Yükseklik dikey dolguyla verilir;
   pilin görünen boyu değişmez. */
.kanit-serit-ac > summary {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  padding-block: 9px;
  display: flex;
  align-items: center;
}
.kanit-serit-ac > summary::-webkit-details-marker { display: none; }
.kanit-serit-ac > summary:focus-visible {
  outline: 3px solid var(--vurgu); outline-offset: 3px; border-radius: var(--r-tam);
}
.kanit-serit-ac[open] > summary { margin-bottom: 8px; }
.kanit-serit-ilke {
  margin: 8px 0 0;
  color: var(--metin-2);
  font-size: 12.5px;
}

/* 🔴 DÜĞMEYİ SESSİZ BAĞLANTIYA ÇEVİRİRKEN DOKUNMA HEDEFİNİ DÜŞÜRDÜM.
   OctoAudit ölçtü (2026-09-05, üç dilde): "Nasıl çalıştığını gör" 136×26 —
   WCAG 2.5.8 asgarisi 44px. "Tek birincil eylem" kuralı için düğmeyi
   bağlantıya indirdim ama yükseklik düğmenin dolgusundan geliyordu.
   Ağırlık düşer, HEDEF DÜŞMEZ: yükseklik ayrıca verilir. */
.sessiz-eylem {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--vurgu-parlak);
  font-weight: 600;
  text-underline-offset: .22em;
}

/* ══ SAHNE: SABİT YÜZ · YANINDA AKAN KONUŞMA ═════════════════════════════
   Kullanıcı isteği (2026-09-07): "avatara sorulan sorular avatarın sağında
   ya da solunda aşağı doğru akan şekilde dursun; televizyon gibi düşün, o
   sabit konuşuyor, yazılar yanından akıyor. Böylece aşağı indi yukarı çıktı
   derdi de biter."

   🔴 NEDEN YAPISAL BİR ÇÖZÜM: bugüne kadarki yaklaşım "sayfa kaydıkça
   avatarı köşeye SABİTLE" idi (avatar-sabit). Bu, sorunu ortaya çıktıktan
   SONRA yamalıyordu ve koşula bağlıydı — konuşma başlamadıysa ya da avatar
   bağlantısı kurulamadıysa hiç devreye girmiyordu. Kullanıcının önerdiği
   düzen sorunu hiç doğurmuyor: yüz kendi sütununda YAPIŞKAN durur, konuşma
   YANINDAKİ sütunda kendi içinde akar. Sayfa uzamaz, yüz ekrandan çıkmaz.

   Geniş ekranda iki sütun; dar ekranda yüz üstte YAPIŞKAN, konuşma altında
   akar (yan yana koymak 380 pikselde okunmaz metin üretir). */
/* ═══ SAHNE: TELEVİZYON DÜZENİ ═════════════════════════════════════════
   Yüz SABİT bir ekran gibi durur, yazışma onun yanından aşağı akar.
   Önce `position: sticky` ile denendi ve TUTMADI — ölçüldü (2026-09-07,
   canlı): sarmal 574 piksel, yüz 520; yapışkanın yol alacağı boşluk 54
   piksel kalıyordu. Yapışkan, kabı ekranda kaldığı sürece tutar; kap ile
   öğe neredeyse aynı boydaysa hiç tutmaz. Doğrusu sayfa kaydırmasına hiç
   bağlanmamak: panelin KENDİ içinde iki sütun, akış sütunu kendi içinde
   kayar. Widget'ın gölge kökü de kendi akışını zaten sınırlıyor
   (.akis{max-height:min(46vh,420px)}), yani iki taraf da sınırlı. */
@media (min-width: 1100px) {
  .kahraman-sag .tanitim-sar {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }
  /* 🔴 GENİŞ EKRANDA YAPIŞKANLIK EKSİKTİ — kullanıcı bildirdi ve haklıydı
     (2026-09-07, ekran görüntüsü): sayfa kaydırılınca yüz yukarıdan çıkıyor,
     panelin sol yarısı BOŞ bej bir alan olarak kalıyordu.
     Benim ölçümüm bunu kaçırdı çünkü masaüstünde yalnız "konuşma uzayınca
     yüz kımıldıyor mu" diye baktım, KAYDIRARAK hiç ölçmedim. İki ayrı soru:
     biri düzenin, öteki kaydırmanın. Ölçüm ancak sorduğu soruyu yanıtlar.
     Yapışkanlık burada TUTAR: yüz en çok 540 piksel, akış sütunu ise konuşma
     uzadıkça büyüyor — yani kabın yolu yüzden belirgin uzun. */
  .kahraman-sag .tanitim-yuz {
    position: sticky;
    top: 84px;                      /* üst çubuk yüksekliği + pay */
    align-self: start;              /* ızgara hücresini doldurup yolu yutmasın */
    max-height: min(62vh, 540px);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .kahraman-sag .tanitim-yuz img,
  .kahraman-sag .tanitim-yuz video {
    max-height: min(48vh, 420px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
  .kahraman-sag .sahne-akis {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 1099px) {
  /* Dar ekranda sütun yok: ekran üstte SINIRLI yükseklikte, yazı altında
     akar. Yüzün ekranı doldurup yazıyı katlamanın altına itmesi, dar
     ekrandaki asıl kusurdu.
     Ekran burada YAPIŞKAN: televizyon üstte kalır, yazı altından akar.
     Yapışkanlık bu kez tutar — ölçüldü (2026-09-07, 390x844): yüz 324
     piksel, akış kabı ise widget'ın kendi sınırıyla (46vh) birlikte 700
     pikselin üzerinde; yani yapışkanın yol alacağı yer var. Önceki
     denemede tutmamasının sebebi yazının yüzün İÇİNDE olmasıydı, kap ile
     öğe neredeyse aynı boydaydı. */
  .kahraman-sag .tanitim-yuz {
    position: sticky;
    top: 60px;
    z-index: 2;
    background: var(--zemin);
    max-height: 34vh;
    /* Portre kutunun soluna yaslanıp sağında boşluk bırakıyordu (gözle
       görüldü, 390px ekran görüntüsü). Ortalama yalnız geniş ekran
       kuralında vardı. */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .kahraman-sag .tanitim-yuz img,
  .kahraman-sag .tanitim-yuz video {
    max-height: 24vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
  /* Yapışkan öğenin yol alabilmesi için kap ondan belirgin uzun olmalı. */
  .kahraman-sag .sahne-akis { min-height: 52vh; }
}

/* Güven bileşeni: senaryoya özel uyarı kutusu (G-1/G-3). Ekranlar rengi
   kendileri seçmez, bu sınıfı kullanır. */
.uyari { display:flex; gap:10px; align-items:flex-start; padding:12px 14px;
  border-radius:10px; border:1px solid currentColor; margin:12px 0; }
.uyari .uyari-ikon { flex:0 0 auto; font-weight:700; line-height:1.4; }
.uyari-bilgi  { color:var(--renk-bilgi);  background:var(--renk-bilgi-zemin); }
.uyari-dikkat { color:var(--renk-dikkat); background:var(--renk-dikkat-zemin); }
.uyari-durdur { color:var(--renk-durdur); background:var(--renk-durdur-zemin); }
.uyari p { color:var(--metin); margin:0; }