/* ============================================================================
   mayAssistant tanıtım sitesi — "Tutanak" tasarım sistemi
   Kâğıt ve mürekkep: ürünün çıktısı bir belge olduğu için sayfa da öyle davranır.
   Bantlar (kâğıt / tutanak / mürekkep) sayfanın ritmini kurar; vurgu rengi (mühür
   yeşili) yalnızca üç yerde görünür. Tek token seti; tema bunları çevirir.
   ========================================================================== */

/* ---- Yazı tipleri: kendi sunucumuzda, latin + latin-ext (Türkçe tam) --------
   Plus Jakarta Sans ve JetBrains Mono değişken ağırlıklı tek dosya (unicode-range
   ile alt küme çifti); Instrument Serif yalnız 400 normal + italik üretiliyor. */
@font-face { font-family:'Plus Jakarta Sans'; src:url('/site/fonts/PlusJakartaSans-Var-latin.woff2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family:'Plus Jakarta Sans'; src:url('/site/fonts/PlusJakartaSans-Var-latinext.woff2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family:'Instrument Serif'; src:url('/site/fonts/InstrumentSerif-Regular-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family:'Instrument Serif'; src:url('/site/fonts/InstrumentSerif-Regular-latinext.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family:'Instrument Serif'; src:url('/site/fonts/InstrumentSerif-Italic-latin.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family:'Instrument Serif'; src:url('/site/fonts/InstrumentSerif-Italic-latinext.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family:'JetBrains Mono'; src:url('/site/fonts/JetBrainsMono-Var-latin.woff2') format('woff2');
  font-weight:100 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family:'JetBrains Mono'; src:url('/site/fonts/JetBrainsMono-Var-latinext.woff2') format('woff2');
  font-weight:100 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }

/* TEK TEMA — açık/koyu ayrımı ve tema anahtarı kaldırıldı (30 Ağu 2026).
   Palet hubx.co'nunki gibi saf siyah baskın: sayfa #000, başlıklar #fff, gövde #9a9aa3;
   araya birkaç açık bant (#fff / #fafafa) nefes olarak giriyor. */
:root {
  /* Bantlar */
  --band-a:#ffffff;            /* açık nefes bandı */
  --band-b:#fafafa;            /* açık nefes bandı — hafif gri */
  --band-ink:#000000;          /* baskın siyah */
  --band-deep:#000000;         /* footer */
  --raised:#121215;            /* siyah bantta kart yüzeyi */
  /* Açık bantta metin rampası */
  --ink:#0a0a0b;
  --body:#5a5a63;
  --mute:#8a8a93;
  /* Siyah bantta metin rampası */
  --on-ink:#ffffff;
  --on-ink-body:#9a9aa3;
  --on-ink-mute:#7c7c85;
  /* Çizgi ve gölge */
  --hair:#e6e6ea;                        /* açık bantta */
  --hair-strong:#d2d2d9;
  --hair-ink:#3a3a44;                    /* siyah bantta — düğme çerçevesiyle aynı */
  --shadow:0 8px 24px rgba(0,0,0,.06);
  /* Tek vurgu: mühür yeşili (siyah zeminde açık sürüm) */
  --seal:#5fcfa6;
  --seal-ink:#5fcfa6;
  /* Konuşmacı renkleri: siyah yüzeyde okunan açık sürümler */
  --spk-a:#7fb3d8; --spk-b:#d6a25f; --spk-c:#d08cae; --spk-d:#6fbdae;
  /* Ölçek */
  --r-in:8px; --r-card:12px; --r-plan:16px; --r-screen:24px; --r-pill:9999px;
  --gap:1200px;
  --ease:cubic-bezier(.22,1,.36,1);
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  color-scheme:dark;
}

*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body {
  margin:0; background:var(--band-ink); color:var(--on-ink-body);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  font-weight:400; letter-spacing:.0024em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:inherit; text-decoration:none }
img,video { max-width:100%; display:block }
/* Başlıklar SemiBold 600 / −0.03em. 800 ve 700 sırayla denendi, ikisi de fazla ağır
   kaldı: Jakarta'nın yüksek x-yüksekliği ve kapalı gözleri, aynı sayısal ağırlıkta
   Helvetica Now Display'den belirgin biçimde daha dolgun görünüyor. */
h1,h2,h3,h4 { color:var(--on-ink); font-weight:500; margin:0; text-wrap:balance }
/* Açık nefes bantlarında metin rampası tersine döner */
.band-a,.band-b { color:var(--body) }
.band-a h1,.band-a h2,.band-a h3,.band-a h4,
.band-b h1,.band-b h2,.band-b h3,.band-b h4 { color:var(--ink) }
h1,h2 { font-weight:600; letter-spacing:-.03em; max-width:22ch }
h3,h4 { letter-spacing:.005em }
/* 22ch sınırı, ortalanmış bantlarda kutuyu sola yapıştırmasın */
[style*="text-align:center"] h1, [style*="text-align:center"] h2 { margin-inline:auto }
p { margin:0 }
:focus-visible { outline:2px solid var(--seal); outline-offset:3px; border-radius:4px }

.wrap { max-width:var(--gap); margin:0 auto; padding:0 24px }
.wrap-narrow { max-width:820px; margin:0 auto; padding:0 24px }

/* ---- Bantlar ------------------------------------------------------------ */
/* Bölüm nefesi: 160px'te iki bölüm arasında 260px boşluk kalıyordu, sayfa kopuk
   görünüyordu. Bölümler birleştirildikten sonra 96px yeterli. */
.band { padding:clamp(40px,4vw,68px) 0 }
/* Her bölümün başında ince ayraç: iki koyu bölüm yan yana geldiğinde bile sınır okunur. */
.band,.tour { border-top:1px solid var(--hair-ink) }
.band-a,.band-b { border-top-color:var(--hair) }
.band-a { background:var(--band-a) }
.band-b { background:var(--band-b) }
.band-ink { background:var(--band-ink); color:var(--on-ink-body) }
.band-ink h1,.band-ink h2,.band-ink h3,.band-ink h4 { color:var(--on-ink) }
.band-thin { padding:0 }

/* ---- Tipografi ölçeği --------------------------------------------------- */
/* Bölüm etiketi ("kicker"): hubx'te bölüm adı iri ve sönük — başlığın üstünde durur */
.eyebrow { font-size:clamp(20px,1.9vw,28px); line-height:1.29; font-weight:700;
  letter-spacing:.005em; color:var(--mute); margin-bottom:14px }
.band-ink .eyebrow { color:var(--on-ink-mute) }
/* Kapsam şeridi: ürünün dokunduğu alanlar tek satırda. Hero'dan ürün turuna taşındı —
   hero'da (hubx'te olduğu gibi) başlığın üstünde etiket yok. */
.kapsam { margin-top:20px; font-size:16px; font-weight:500; color:var(--mute) }
.band-ink .kapsam { color:var(--on-ink-mute) }
h1 { font-size:clamp(28px,4.6vw,48px); line-height:1.1 }
h2 { font-size:clamp(32px,3.6vw,48px); line-height:1.1 }
h3 { font-size:clamp(20px,1.7vw,24px); line-height:1.29 }
/* Sloganlar ve alıntılar için serif italik vurgu */
.serif { font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:0 }
/* Gövde/giriş metni: 19px / 1.55 / 400 (specimen değerleri). Ölçü hero'da 32ch;
   bölüm girişlerinde daha geniş, çünkü bölüm açıklamalarımız referanstakinin
   iki-üç katı uzunlukta ve 32ch'te ince uzun bir şeride dönüşüyorlar. */
.lead { font-size:19px; line-height:1.55; font-weight:400;
  max-width:56ch; color:var(--body); text-wrap:pretty }
.band-ink .lead { color:var(--on-ink-body) }
/* Kalibrasyon A — ŞİMDİLİK YALNIZ İLK İKİ BLOKTA (hero + ürün bölümü başlığı).
   Sayfanın geri kalanı önceki ölçüde bırakıldı ki ikisi yan yana karşılaştırılabilsin:
   başlık 54px/#fff, gövde 32 karakterde katlanır ve başlıktan 26px altta durur. */
#urun .sec-head h2 { font-size:clamp(28px,4.6vw,48px); color:#fff }
#urun .sec-head p { font-size:21px; font-weight:500; max-width:32ch; letter-spacing:0; margin-top:26px }

/* Bölüm başlığı bloğu ortalanır — hubx'in ana kalıbı */
.sec-head { max-width:900px; margin:0 auto 44px; text-align:center }
.sec-head h2 { margin-inline:auto }
.sec-head p { margin:24px auto 0; max-width:56ch; font-size:19px;
  line-height:1.55; font-weight:400; color:var(--body); text-wrap:pretty }
.band-ink .sec-head p { color:var(--on-ink-body) }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums }
.centered { text-align:center; margin-left:auto; margin-right:auto }

/* ---- Düğmeler: mürekkep hapı / kontur hapı ------------------------------ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:46px; padding:0 24px; border-radius:var(--r-pill); border:1px solid transparent;
  font-family:var(--sans); font-size:15px; font-weight:500; cursor:pointer;
  transition:transform .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
  white-space:nowrap }
.btn:active { transform:translateY(1px) }
/* Sayfa siyah: dolu düğme açık zeminli, konturlu düğme #3a3a44 çerçeveli. */
.btn-ink { background:var(--on-ink); color:#000 }
.btn-ink:hover { background:#e2e2e6 }
.btn-line { background:transparent; color:var(--on-ink); border-color:var(--hair-ink) }
.btn-line:hover { border-color:#5a5a68 }
/* Açık nefes bantlarında ters çevrilir */
.band-a .btn-ink,.band-b .btn-ink { background:var(--ink); color:#fff }
.band-a .btn-ink:hover,.band-b .btn-ink:hover { background:#2a2a30 }
.band-a .btn-line,.band-b .btn-line { color:var(--ink); border-color:var(--hair-strong) }
.band-a .btn-line:hover,.band-b .btn-line:hover { border-color:var(--ink) }
.band-ink .btn-ink { background:var(--on-ink); color:#191713 }
.band-ink .btn-line { color:var(--on-ink); border-color:rgba(255,255,255,.28) }
.band-ink .btn-line:hover { border-color:var(--on-ink) }
.btn-sm { height:38px; padding:0 18px; font-size:14px }
.btn-soon { opacity:.5; cursor:default }
.btn-soon:active { transform:none }

/* ---- Nav ---------------------------------------------------------------- */
/* Menü sayfayla aynı siyah: açık bantların üzerinden geçerken de siyah kalır (hubx'te de öyle). */
nav { position:sticky; top:0; z-index:60; background:var(--band-ink); height:64px;
  color:var(--on-ink-body);
  border-bottom:1px solid transparent; transition:border-color .16s var(--ease) }
nav.scrolled { border-bottom-color:var(--hair-ink) }
nav .icon-btn { border-color:var(--hair-ink); color:var(--on-ink-body) }
nav .icon-btn:hover { border-color:#5a5a68; color:var(--on-ink) }
.nav-in { display:flex; align-items:center; gap:28px; height:64px }
/* MARKA — /marka altındaki SVG dosyaları. Metin tabanlı işaret kaldırıldı.
   Görsel arka plan olarak veriliyor; erişilebilir ad <a> üzerindeki aria-label. */
.logo { display:flex; align-items:center; gap:10px }
/* Kilit oranı 400:88 — boy genişliği belirler. 36px'te işaret 164px yer kaplar;
   kutu 166px, sağda ölü boşluk kalmasın. (Uygulamada 42px; site şeridi 64px
   yüksekliğinde olduğu için burada 36px daha oturaklı.) */
/* Tek tema: menü ve alt bilgi siyah zeminde, dolayısıyla marka işareti HER ZAMAN
   koyu-zemin sürümü ("-dark"). Tema ile ters çevirme kaldırıldı. */
.lg { --marka:url('/marka/mayassistant-lockup-dark.svg');
  display:block; width:200px; height:44px;
  background:var(--marka) left center/contain no-repeat }
.nav-links { display:flex; gap:26px; font-size:15px; color:var(--on-ink-body) }
.nav-links a:hover { color:var(--on-ink) }
.nav-spacer { flex:1 }

/* ---- Dil seçimi açılır listesi ---- */
.lang-sar { position:relative; display:flex }
.lang-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:70; min-width:186px;
  background:var(--band-a); border:1px solid var(--hair); border-radius:var(--r-card);
  box-shadow:var(--shadow); padding:6px; display:flex; flex-direction:column; gap:2px }
.lang-opt { display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px;
  background:transparent; border:0; border-radius:var(--r-in); cursor:pointer;
  font-family:var(--sans); font-size:15px; color:var(--ink); text-align:left }
.lang-opt:hover { background:var(--band-b) }
.lang-opt.on { font-weight:500 }
.lang-kod { font-family:var(--mono); font-size:12px; color:var(--mute);
  border:1px solid var(--hair); border-radius:5px; padding:1px 5px; min-width:30px; text-align:center }
.lang-opt.on .lang-kod { color:var(--ink); border-color:var(--hair-strong) }
.lang-tik { margin-left:auto; color:var(--seal); font-size:14px }
.icon-btn { width:36px; height:36px; border-radius:var(--r-pill); border:1px solid var(--hair);
  background:transparent; color:var(--body); cursor:pointer; display:grid; place-items:center;
  font-family:var(--mono); font-size:12px; transition:border-color .16s var(--ease) }
#themeBtnFoot { display:none }   /* tema anahtarı footer'da yalnız mobilde görünür */
.icon-btn:hover { border-color:var(--hair-strong); color:var(--ink) }
.icon-btn svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.5 }

/* ---- Hero --------------------------------------------------------------- */
/* Üst dolgu 112 → 8. Menü zaten 64px yapışkan yer kaplıyor. Ayrıca videonun KENDİ
   kadrajında da üstte boşluk var: animasyonun en geniş anında halkalar 230px'lik bandın
   tamamını dolduruyor, durgun haldeyse ortada ~100px yer kaplıyor. Kadrajı sıkmak
   animasyonun açılışını keseceği için kalan boşluk oradan geliyor, CSS'ten değil. */
.hero { padding:8px 0 clamp(48px,5vw,80px); background:var(--band-ink); color:var(--on-ink-body) }
.hero-note { color:var(--on-ink-mute) }
.hero .lead { color:var(--on-ink-body) }

/* ---- Marka açılış animasyonu ------------------------------------------
   Sayfanın ilk öğesi. Videonun zemini üretim sırasında sayfanın TAM rengine
   oturtulur (bkz. tools/tanitim/video-logo-isle.sh), yani kutu sayfadan ayırt
   edilemez; kendi yüzeyi ya da kenarlığı yoktur. */
/* Alt boşluk küçük: videonun kadrajı zaten altta da boşluk taşıyor. */
.hero-logo { display:flex; justify-content:center; margin-bottom:6px }
/* Zemin sayfa bandıyla aynı: video çözülene kadar geçen anda kutu görünmesin diye
   öğenin kendi zemini de --band-a. Video renkleriyle birebir örtüşür. */
/* Videonun zemini üretimde #14150f'e gömülmüş; sayfa artık SAF SİYAH olduğu için o
   zemin açık bir dikdörtgen olarak görünüyordu. ffmpeg ile yeniden kodlamak yerine
   contrast ile siyahlar eziliyor: (0.08−0.5)×1.19+0.5 ≈ 0, yani zemin #000'a oturuyor,
   parlak logo ise üst uçta kaldığı için etkilenmiyor. */
.hero-logo video { width:100%; max-width:360px; height:auto; display:block;
  background:var(--band-ink); filter:contrast(1.19) }
@media (max-width:680px){ .hero-logo video { max-width:260px } .hero-logo { margin-bottom:14px } }
/* Hareket azaltma açıkken animasyon OYNATILMAZ ama marka gizlenmez:
   kapak karesi (kilidin tamamlanmış hâli) duran görsel olarak kalır.
   Öğeyi display:none yapmak markayı tamamen yok ediyordu. */
/* Tek sütun, ortalanmış: hubx'te hero metni ortada durur, ürün görseli hemen altında. */
.hero-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(48px,6vw,80px);
  justify-items:center; text-align:center }
.hero-metin { display:flex; flex-direction:column; align-items:center; max-width:1000px }
/* Başlık geniş ve mümkünse tek satır; gövde ise BELİRGİN ŞEKİLDE DAR bir sütunda —
   hubx hero'sunun oranı bu: geniş başlık, altında yarısı kadar dar gövde bloğu.
   Genel h1/h2 için geçerli 22ch sınırı burada başlığı erken kırdığı için kaldırıldı. */
/* Kalibrasyon A ölçüleri: başlık #fff, gövde başlıktan 26px altta ve 32 karakterde
   katlanır, düğmeler gövdeden 40px altta. */
.hero h1 { max-width:none; color:#fff; margin-bottom:26px; margin-inline:auto }
/* Ölçü 32 değil 40 karakter: 32'de İngilizce metin altı satıra iniyordu, blok fazla dardı. */
.hero .lead { font-size:21px; font-weight:500; max-width:40ch; letter-spacing:0; margin:0 auto 40px }
.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:18px }
/* Düğme: 15/600/−0.01em, tam yuvarlak, ikon–etiket arası 10px.
   Dikey dolgu 15 değil 11: 15'te hap fazla şişkin duruyordu (yükseklik ~49px). */
.hero .btn { height:auto; padding:11px 26px; gap:10px; line-height:1.2;
  font-size:15px; font-weight:600; letter-spacing:-.01em }
.hero .btn-line { background:transparent; border-color:#3a3a44; color:#fff }
.hero .btn-line:hover { border-color:#5a5a68 }
.hero-note { font-size:16px; font-weight:500 }

/* Söz sırası satırları — yalnız konuşmacı ayrımı bölümündeki karşılaştırma tablosunda.
   (Bunları saran örnek transkript şeridi kaldırıldı.) */
.turn { display:grid; grid-template-columns:52px 1fr; gap:12px; padding:11px 16px; align-items:start }
.turn-t { font-family:var(--mono); font-size:12px; color:var(--mute); padding-top:3px }
.turn-b { border-left:2px solid var(--spk-a); padding-left:12px }
.turn.b .turn-b { border-color:var(--spk-b) }
.turn.c .turn-b { border-color:var(--spk-c) }
.turn-n { display:block; font-size:13px; font-weight:500; color:var(--spk-a); margin-bottom:2px }
.turn.b .turn-n { color:var(--spk-b) }
.turn.c .turn-n { color:var(--spk-c) }
.turn-x { font-size:14.5px; line-height:1.5; color:var(--body) }
/* Koyu bantta şerit ve söz sırası satırları: gövde rengi banttan açık geliyor, ama
   satır metinleri kendi (koyu) rengini taşıyordu — koyu üstüne koyu kalıyordu. */
.band-ink .turn-t { color:var(--on-ink-mute) }
.band-ink .turn-x { color:var(--on-ink-body) }
/* Konuşmacı renkleri koyu yüzeyde AÇIK sürümde sabit: açık temanın koyu mavisi
   (#2c5c82) siyah kartta okunmuyordu. */
.band-ink .turn-n,.band-ink .turn-b { color:#7fb3d8; border-color:#7fb3d8 }
.band-ink .turn.b .turn-n,.band-ink .turn.b .turn-b { color:#d6a25f; border-color:#d6a25f }
.band-ink .turn.c .turn-n,.band-ink .turn.c .turn-b { color:#d08cae; border-color:#d08cae }
.band-ink .compare-h { background:var(--raised); border-bottom-color:var(--hair-ink);
  color:var(--on-ink-mute) }
.band-ink .compare-col { border-color:var(--hair-ink) }
/* Koyu hero'da dolu düğme ters çevrilir (açık zemin, koyu yazı). Konturlu düğmenin
   kendi ayarı hero bloğunda (Kalibrasyon A: şeffaf zemin + #3a3a44 çerçeve). */
.hero .btn-ink { background:var(--on-ink); color:#141410 }
.hero .btn-ink:hover { background:#ffffff }

/* ---- Güven şeridi -------------------------------------------------------- */
.trust { padding:26px 0; border-top:1px solid var(--hair-ink); border-bottom:1px solid var(--hair-ink) }
/* Şerit artık kısa etiketler değil, üç TAM CÜMLE taşıyor. Esnek satırda cümleler
   sarıp ayraç noktaları satır başına düşüyordu; üç sütun her cümleyi kendi
   hizasında tutar ve numaralı adım gibi okunur. Dar ekranda alt alta iner. */
.trust-in { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px 32px;
  font-family:var(--mono); font-size:13px; color:var(--mute) }
.trust-in span { position:relative; padding-left:18px; line-height:1.55 }
.trust-in span::before { content:"·"; position:absolute; left:0; top:0; color:var(--hair-strong) }
@media (max-width:820px){ .trust-in { grid-template-columns:minmax(0,1fr); gap:10px } }

/* ---- Ürün turu ---------------------------------------------------------- */
/* .band ile aynı nefes — ayrı kural olduğu için dolgu azaltmasında atlanmıştı. */
.tour { padding:clamp(40px,4vw,68px) 0 }
/* Ürün özellikleri: sıralı tek liste, HEPSİ AÇIK. Numara, başlık ve açıklama her zaman
   görünür; akordionda yalnız detay (ürün ekranı) var. Ayraçlar ve artı/eksi göstergesi
   SSS akordionuyla aynı dilde. */
.ozellikler { max-width:1100px; margin:clamp(56px,6vw,88px) auto 0;
  border-top:1px solid var(--hair-ink) }
.oz { display:grid; grid-template-columns:46px minmax(0,1fr); gap:12px;
  padding:34px 0; border-bottom:1px solid var(--hair-ink) }
.oz-n { font-family:var(--mono); font-size:12px; color:var(--on-ink-mute); padding-top:6px }
/* Üst satır: solda açıklama, sağda özelliği anlatan sembol görseli.
   Sembol sütunu metinden GENİŞ: illüstrasyonun kendi iç boşluğu cömert, küçükken
   içindeki çizgiler okunmuyordu. */
.oz-bas { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);
  gap:clamp(26px,3vw,44px); align-items:center }
.oz-h { font-size:clamp(19px,1.7vw,24px); line-height:1.25; font-weight:600;
  letter-spacing:-.015em; color:var(--on-ink); margin-bottom:8px }
.oz-yazi p { font-size:17px; line-height:1.55; color:var(--on-ink-body); max-width:42ch }
/* Sembolün kendi zemini siyah: çerçeve, gölge ya da yüzey verilmiyor. */
.oz-sembol { width:100%; height:auto; display:block; border-radius:var(--r-card) }

/* Detay akordionu: küçük, mono bir tetikleyici — özelliğin kendisiyle yarışmasın */
.oz-detay { margin-top:20px }
.oz-detay summary { display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  list-style:none; font-family:var(--mono); font-size:12.5px; color:var(--on-ink-mute);
  transition:color .16s var(--ease) }
.oz-detay summary::-webkit-details-marker { display:none }
.oz-detay summary:hover { color:var(--on-ink) }
.oz-detay[open] summary { margin-bottom:18px }
/* Gösterge artı değil AŞAĞI OK: kapalıyken aşağı bakar, açılınca yukarı döner. */
.oz-pm { width:9px; height:9px; flex:none; margin-bottom:3px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg); transition:transform .2s var(--ease) }
.oz-detay[open] .oz-pm { transform:rotate(-135deg); margin-bottom:-2px }
/* Açılan detay: sağa dayalı, küçük ve BEYAZ zeminli bir panel. Sağa dayanması sembolün
   altına denk getirir; beyaz zemin koyu ürün ekranlarını öne çıkarır. Çerçeve yok —
   ekranlar kendi kenarlığı olmadan, doğrudan beyazın üstünde duruyor. */
.oz-ic { max-width:620px; margin-left:auto; background:#ffffff; color:var(--body);
  border:0; border-radius:var(--r-card); padding:20px }
/* Videonun çerçevesi, yüzeyi ve gölgesi kalkar: geriye yalnız görüntü kalır. */
.oz-ic .screen { border:0; background:transparent; box-shadow:none; border-radius:var(--r-in) }
/* Beyaz zeminde metin rampası tersine döner. ÖZGÜLLÜK: `.band-ink ...` kuralları bu
   dosyada AŞAĞIDA tanımlı ve eşit özgüllükte oldukları için kazanıyorlardı; bant
   sınıfı seçicilere eklendi. */
.band-ink .oz-ic h3,.band-ink .oz-ic .card h3 { color:var(--ink) }
.band-ink .oz-ic p,.band-ink .oz-ic .turn-x { color:var(--body) }
.band-ink .oz-ic .oz-alt,.band-ink .oz-ic .turn-t,.band-ink .oz-ic .compare-h { color:var(--mute) }
.band-ink .oz-ic .card { background:#f6f6f8; border-color:var(--hair); color:var(--body);
  padding:18px 20px }
.band-ink .oz-ic .card:hover { border-color:var(--hair-strong) }
.band-ink .oz-ic .compare-col { border-color:var(--hair) }
.band-ink .oz-ic .compare-h { background:#f6f6f8; border-bottom-color:var(--hair); padding:10px 14px }
/* Konuşmacı renkleri beyaz zeminde koyu sürümlerine döner */
.band-ink .oz-ic .turn-n,.band-ink .oz-ic .turn-b { color:#2c5c82; border-color:#2c5c82 }
.band-ink .oz-ic .turn.b .turn-n,.band-ink .oz-ic .turn.b .turn-b { color:#8a5a2b; border-color:#8a5a2b }
.band-ink .oz-ic .turn.c .turn-n,.band-ink .oz-ic .turn.c .turn-b { color:#77375a; border-color:#77375a }
/* Panel dar olduğu için içindeki çok sütunlu bloklar tek sütuna iner */
.oz-ic .grid-3 { grid-template-columns:minmax(0,1fr); gap:12px }
.oz-ic .compare { gap:12px }
.oz-ic .oz-alt:last-child { margin-bottom:0 }
/* Temsilî görsel kutusu: tasarlanan asset gelene kadar yerini ve 16:10 oranını tutar,
   böylece gerçek görsel düştüğünde sayfa zıplamaz. */
.gy { aspect-ratio:1152/720; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; border-radius:inherit;
  background:repeating-linear-gradient(135deg,transparent 0 11px,rgba(255,255,255,.035) 11px 12px) }
/* Sağ sütundaki sembolün yer tutucusu: kendi çerçevesi olmadığı için kesikli kenarlıkla
   sınırı belli edilir; gerçek görselde bu kenarlık olmayacak. */
.gy-sembol { border:1px dashed var(--hair-ink); border-radius:var(--r-card) }
.gy-no { font-family:var(--mono); font-size:12px; color:var(--on-ink-mute) }
.gy-ad { font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--on-ink) }
.gy-not { font-family:var(--mono); font-size:11.5px; color:var(--on-ink-mute) }
.oz-alt { margin-top:12px; font-family:var(--mono); font-size:12.5px; color:var(--on-ink-mute) }
@media (max-width:820px){
  .oz { grid-template-columns:32px minmax(0,1fr); gap:10px; padding:26px 0 }
  .oz-bas { grid-template-columns:minmax(0,1fr); gap:20px }
}

.screen { border:1px solid var(--hair-ink); border-radius:var(--r-screen); overflow:hidden;
  background:var(--raised); box-shadow:0 24px 60px rgba(0,0,0,.32) }
.screen video,.screen img { width:100%; display:block }
.screen-cap { font-family:var(--mono); font-size:12.5px; color:var(--on-ink-mute); margin-top:14px }

/* ---- Nasıl çalışır: akış diyagramı --------------------------------------- */
/* Akış diyagramı: dikey S eğrisi, altı adım. Kendi zemini siyah olduğu için çerçevesiz;
   1600×3000 çok uzun olduğundan genişliği sınırlanır. */
/* 680px: 560'ta içindeki adım açıklamaları okunmuyordu, 860'ta ise diyagram sayfada
   fazla yer kaplıyordu (1600×3000 kaynak → 1613px yükseklik). */
.akis { margin:clamp(40px,5vw,64px) auto 0; max-width:680px }

/* Mobil ekranların akordionu: bölüm ortalanmış olduğu için tetikleyici de ortada,
   açılan panel de sağa değil ortaya oturur (özellik satırlarında sağa dayalıydı). */
.mob-detay { margin-top:8px }
.mob-detay > summary { justify-content:center }
.mob-detay .oz-ic { margin:0 auto; max-width:820px; text-align:center }
/* Mobil bölümü artık AÇIK bantta: beyaz panel beyaz zeminde kayboluyordu, kaldırıldı. */
.band-a .mob-detay .oz-ic,.band-b .mob-detay .oz-ic { background:transparent; padding:0 }
/* Beyaz panelde .75 saydamlıkla açık gri kalıyordu; tam opaklık + sönük mürekkep. */
.mob-detay .tel figcaption { opacity:1; color:var(--mute); background:rgba(0,0,0,.04) }
.akis img { width:100%; height:auto; display:block }

/* ---- Kartlar ------------------------------------------------------------ */
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px }
.grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px }
.card { border:1px solid var(--hair); border-radius:var(--r-card); padding:28px; background:var(--band-a);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease) }
.card:hover { border-color:var(--hair-strong); box-shadow:var(--shadow) }
/* Koyu bantta kart da koyu yüzeye oturur: beyaz kart + açık gövde rengi okunmaz kalıyordu. */
.band-ink .card { background:var(--raised); border-color:var(--hair-ink); color:var(--on-ink-body) }
.band-ink .card:hover { border-color:rgba(255,255,255,.22); box-shadow:none }
.band-ink .card h3 { color:var(--on-ink) }
.card h3 { margin-bottom:10px }
.card p { font-size:15.5px; line-height:1.55 }
.band-ink .card { background:var(--raised); border-color:var(--hair-ink) }
.card-plain { border:0; padding:0; background:transparent }
.card-plain:hover { box-shadow:none }
.card-big { grid-column:span 2 }
.card-media { padding:0; overflow:hidden }
.card-media video,.card-media img { width:100%; border-bottom:1px solid var(--hair) }
.card-media .card-body { padding:24px 28px 28px }

/* ---- Konuşmacı ayrımı karşılaştırması ----------------------------------- */
.compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px }
.compare-col { border:1px solid var(--hair); border-radius:var(--r-card); overflow:hidden }
.compare-h { font-family:var(--mono); font-size:12px; color:var(--mute); padding:11px 16px;
  border-bottom:1px solid var(--hair); background:var(--band-b) }
.band-b .compare-h { background:var(--band-a) }
.compare-rows { padding:8px 0 }

/* ---- Tablolar ----------------------------------------------------------- */
.tbl-scroll { overflow-x:auto; border:1px solid var(--hair); border-radius:var(--r-card) }
table.rule { width:100%; border-collapse:collapse; font-size:15px; min-width:640px }
table.rule th { text-align:left; font-family:var(--mono); font-size:11.5px; font-weight:400;
  color:var(--mute); text-transform:uppercase; letter-spacing:.07em;
  padding:14px 18px; border-bottom:1px solid var(--hair); white-space:nowrap }
table.rule td { padding:15px 18px; border-bottom:1px solid var(--hair); vertical-align:top; color:var(--body) }
table.rule tr:last-child td { border-bottom:0 }
table.rule td:first-child { color:var(--ink); font-weight:500 }
table.rule .num { font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap }
/* Vurgunun 1. meşru kullanımı: veride "bizde kalır" satırları */
table.rule tr.ours td:first-child { box-shadow:inset 2px 0 0 var(--seal) }
.tick { color:var(--ink) } .dash { color:var(--mute) }

/* ---- Kullanım senaryoları: katılımcı listesi gibi ------------------------ */
.roles { border-top:1px solid var(--hair-ink) }
.role { display:grid; grid-template-columns:minmax(150px,220px) 1fr; gap:24px;
  padding:22px 0; border-bottom:1px solid var(--hair-ink); align-items:baseline }
.role h3 { font-size:17px }
.role p { font-size:15.5px; line-height:1.55 }
/* İkinci paragraf grid'in ÜÇÜNCÜ öğesi: sütun belirtilmezse ikinci satırın SOL
   sütununa, yani başlığın altına düşüyordu. Sağ sütuna, ilk paragrafın altına alınır. */
.role .why { grid-column:2; color:var(--on-ink-mute); margin-top:6px; font-size:14.5px }

/* ---- Fiyatlandırma ------------------------------------------------------ */
.plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch;
  max-width:980px; margin:0 auto }
/* Ücretli planlar gizliyken tek kart kalıyor: 980px'e yayılmasın, ortada dursun. */
.plans-tek { grid-template-columns:minmax(0,380px); justify-content:center }
.plan { border:1px solid var(--hair); border-radius:var(--r-plan); padding:32px 28px;
  display:flex; flex-direction:column; text-align:left; background:var(--band-a) }
/* Zemin --ink DEĞİL --band-ink: --ink temayla TERS döner (açık temada #191713,
   koyu temada #e7e7ea). Koyu temada kart beyazlaşıyor ama üstündeki --on-ink-*
   metinler açık kaldığı için kartın içi tamamen görünmez oluyordu.
   --band-ink her iki temada da koyu (#191713 / #0a0908), yani ters kart hep ters kalır. */
.plan-live { background:var(--band-ink); border-color:var(--band-ink); color:var(--on-ink-body) }
.plan-live h3 { color:var(--on-ink) }
.plan-soon { opacity:.62 }
.plan h3 { font-size:17px; font-weight:500; margin-bottom:14px }
.price { display:flex; align-items:baseline; gap:6px; margin-bottom:6px }
.price b { font-family:var(--mono); font-size:38px; font-weight:500; letter-spacing:-.02em; color:var(--ink) }
.plan-live .price b { color:var(--on-ink) }
.price small { font-size:14px; color:var(--mute) }
.plan-live .price small { color:var(--on-ink-mute) }
/* Vurgunun 2. meşru kullanımı: satılabilir plandaki dakika rakamı */
.plan-quota { font-family:var(--mono); font-size:14px; color:var(--seal-ink); margin-bottom:22px }
.plan-soon .plan-quota,.plan:not(.plan-live) .plan-quota { color:var(--seal) }
.plan ul { list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:11px }
.plan li { font-size:15px; padding-left:20px; position:relative; line-height:1.45 }
.plan li::before { content:""; position:absolute; left:0; top:9px; width:9px; height:2px;
  background:var(--hair-strong) }
.plan-live li::before { background:rgba(255,255,255,.34) }
.plan .btn { margin-top:auto; width:100% }
/* Ters çevrilmiş (mürekkep zeminli) Free kartında düğme de ters döner —
   yoksa mürekkep üstüne mürekkep düşüyor ve düğme görünmüyordu. */
.plan-live .btn-ink { background:var(--on-ink); color:#191713 }
.plan-live .btn-ink:hover { background:#fff }
.beta-note { max-width:720px; margin:0 auto 40px; text-align:center; font-size:15.5px; color:var(--body);
  border:1px solid var(--hair); border-radius:var(--r-card); padding:16px 22px; background:var(--band-a) }
.vat { text-align:center; font-family:var(--mono); font-size:12.5px; color:var(--mute); margin-top:28px }
/* Fiyat ve SSS artık koyu bantta: açık yüzeyli kutular yükseltilmiş koyu yüzeye döner,
   yoksa plan kartı (--band-ink) bandın kendisiyle AYNI renk olup tamamen kayboluyor. */
.band-ink .plan,.band-ink .beta-note { background:var(--raised); border-color:var(--hair-ink);
  color:var(--on-ink-body) }
.band-ink .plan h3,.band-ink .price b { color:var(--on-ink) }
.band-ink .plan-live { background:var(--raised); border-color:rgba(255,255,255,.28) }
.band-ink .price small,.band-ink .vat { color:var(--on-ink-mute) }
.band-ink .faq,.band-ink .faq details { border-color:var(--hair-ink) }
.band-ink .faq summary { color:var(--on-ink) }
.band-ink .faq-n { color:var(--on-ink-mute) }
.band-ink .faq-pm { border-color:var(--on-ink-body) }
.band-ink .faq-a a { color:var(--on-ink) }

/* ---- SSS ---------------------------------------------------------------- */
.faq { border-top:1px solid var(--hair) }
.faq details { border-bottom:1px solid var(--hair) }
.faq summary { display:grid; grid-template-columns:40px 1fr 24px; gap:8px; align-items:center;
  padding:20px 0; cursor:pointer; list-style:none; color:var(--ink); font-size:17px; font-weight:500 }
.faq summary::-webkit-details-marker { display:none }
.faq-n { font-family:var(--mono); font-size:12px; color:var(--mute); font-weight:400 }
/* SSS göstergesi de aynı dilde: aşağı ok, açılınca yukarı döner. */
.faq-pm { width:10px; height:10px; justify-self:end; margin-bottom:4px;
  border-right:1.6px solid var(--body); border-bottom:1.6px solid var(--body);
  transform:rotate(45deg); transition:transform .2s var(--ease) }
.faq details[open] .faq-pm { transform:rotate(-135deg); margin-bottom:-2px }
.faq-a { padding:0 24px 24px 48px; font-size:16px; line-height:1.6; max-width:76ch }
.faq-a a { color:var(--ink); text-decoration:underline; text-underline-offset:3px }

/* ---- Footer ------------------------------------------------------------- */
footer { background:var(--band-deep); color:var(--on-ink-mute); padding:56px 0 36px }
.foot-grid { display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:40px 28px; margin-bottom:48px }
footer h4 { font-family:var(--mono); font-size:11.5px; font-weight:400; color:var(--on-ink-mute);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px }
.foot-col a { display:block; font-size:14.5px; color:var(--on-ink-body); padding:5px 0 }
.foot-col a:hover { color:var(--on-ink) }
.foot-brand .logo { margin-bottom:14px }
.foot-brand p { font-size:14.5px; color:var(--on-ink-mute); max-width:34ch }
.foot-base { border-top:1px solid rgba(255,255,255,.09); padding-top:24px;
  display:flex; flex-wrap:wrap; gap:8px 24px; font-size:13.5px; font-family:var(--mono) }

/* ---- Yasal metin açılır penceresi (kayıt formu) -------------------------- */
.lgb { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px;
  background:rgba(16,15,12,.62); backdrop-filter:blur(3px) }
.lgb[hidden] { display:none }
.lgm { width:min(780px,100%); max-height:min(86vh,860px); background:var(--band-a);
  border:1px solid var(--hair); border-radius:var(--r-plan); display:flex; flex-direction:column;
  overflow:hidden; box-shadow:0 30px 80px rgba(16,15,12,.4) }
.lgm-h { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 26px; border-bottom:1px solid var(--hair) }
.lgm-h h3 { font-size:19px }
.lgm-x { width:34px; height:34px; border-radius:var(--r-pill); border:1px solid var(--hair);
  background:transparent; color:var(--body); cursor:pointer; font-size:18px; line-height:1 }
.lgm-x:hover { border-color:var(--hair-strong); color:var(--ink) }
.lgm-body { overflow-y:auto; padding:26px; font-size:15.5px; line-height:1.66; color:var(--body);
  scroll-behavior:smooth }
.lgm-body h1,.lgm-body h2 { font-size:20px; margin:26px 0 10px }
.lgm-body h1:first-child,.lgm-body h2:first-child { margin-top:0 }
.lgm-body h3 { font-size:17px; margin:20px 0 8px }
.lgm-body p,.lgm-body li { margin:0 0 12px }
.lgm-body ul,.lgm-body ol { padding-left:22px }
.lgm-body table { width:100%; border-collapse:collapse; font-size:14px; margin:14px 0 }
.lgm-body th,.lgm-body td { border:1px solid var(--hair); padding:8px 10px; text-align:left }
.lgm-end { height:1px }
.lgm-f { border-top:1px solid var(--hair); padding:18px 26px; display:flex; align-items:center;
  justify-content:space-between; gap:16px; flex-wrap:wrap }
.lgm-hint { font-family:var(--mono); font-size:12.5px; color:var(--mute) }
.lgm-ok:disabled { opacity:.42; cursor:not-allowed }
.lgm-ok:disabled:active { transform:none }

/* ---- Giriş / kayıt formları --------------------------------------------- */
.auth-wrap { min-height:calc(100vh - 64px); display:grid; place-items:center; padding:56px 24px }
.auth-card { width:min(460px,100%); border:1px solid var(--hair); border-radius:var(--r-plan);
  padding:40px 36px; background:var(--band-a) }
.auth-card h1 { font-size:27px; margin-bottom:8px; color:var(--ink) }   /* kart beyaz zeminli: siyah temanın beyaz h1'i görünmüyordu (10 Eyl) */
.auth-card .btn-ink { background:var(--ink); color:#fff }
.auth-card .btn-ink:hover { background:#2a2a30 }
.auth-sub { font-size:15.5px; color:var(--body); margin-bottom:28px }
.auth-card label { display:block; font-size:13.5px; color:var(--body); margin:16px 0 6px }
.auth-card input[type="text"],.auth-card input[type="email"],.auth-card input[type="password"] {
  width:100%; height:46px; padding:0 14px; border:1px solid var(--hair); border-radius:var(--r-in);
  background:var(--band-a); color:var(--ink); font-family:var(--sans); font-size:15.5px }
.auth-card input:focus { outline:none; border-color:var(--ink) }
.auth-card .btn { width:100%; margin-top:26px }
.auth-alt { margin-top:22px; font-size:14.5px; color:var(--body); text-align:center }
.auth-alt a { color:var(--ink); text-decoration:underline; text-underline-offset:3px }
.auth-err { color:#f2b8b5; font-size:14px; margin-top:14px; min-height:20px }
.auth-err.ok { color:#7ed3a3 }
/* 6 haneli doğrulama kodu alanı (kayıt sonrası / doğrulanmamış giriş) */
.auth-card input.kod-input { width:100%; height:58px; padding:0 14px; border:1px solid var(--hair); border-radius:var(--r-in);
  background:var(--band-a); color:var(--ink); font-family:var(--mono); font-size:26px; letter-spacing:.32em; text-align:center;
  font-variant-numeric:tabular-nums }
.auth-card input.kod-input::placeholder { letter-spacing:.32em; color:var(--mute) }
.auth-alt a.pasif { color:var(--mute); pointer-events:none; text-decoration:none }
.kod-sayac { color:var(--mute); font-variant-numeric:tabular-nums }
.consent { display:flex; gap:11px; align-items:flex-start; margin-top:16px; font-size:14px;
  line-height:1.5; color:var(--body) }
.consent input[type="checkbox"] { width:18px; height:18px; margin:2px 0 0; flex:none; accent-color:var(--ink) }
.consent a,.lgb-link { color:var(--ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer }
.consent-note { font-size:13px; color:var(--mute); margin-top:14px; line-height:1.5 }

/* ---- Yasal sayfa iskeleti ------------------------------------------------ */
.legal { max-width:820px; margin:0 auto; padding:64px 24px 96px }
.legal .tbl-scroll,.legal table { max-width:100% }
.legal table { display:block; overflow-x:auto; white-space:normal }   /* dar ekranda sayfayı taşırmasın */
.legal .ph { background:rgba(245,158,11,.16); border-radius:4px; padding:0 5px }
.lg-foot { max-width:820px; margin:0 auto; padding:0 24px 48px; color:var(--mute); font-size:13px }
/* Yasal sayfa nav'ındaki geri bağlantısı metin taşıyor; ikon kutusuna sığmıyordu. */
.nav-back { display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 16px;
  border:1px solid var(--hair); border-radius:var(--r-pill); color:var(--body);
  font-size:14px; white-space:nowrap; transition:border-color .16s var(--ease) }
.nav-back:hover { border-color:var(--hair-strong); color:var(--ink) }
.legal h1 { font-size:34px; margin-bottom:10px }
.legal .updated { font-family:var(--mono); font-size:13px; color:var(--mute); margin-bottom:40px }
.legal h2 { font-size:22px; margin:40px 0 12px }
.legal h3 { font-size:18px; margin:26px 0 8px }
.legal p,.legal li { font-size:16.5px; line-height:1.68; margin-bottom:14px }
.legal ul,.legal ol { padding-left:24px }
.legal a { color:var(--ink); text-decoration:underline; text-underline-offset:3px }
.legal table { width:100%; border-collapse:collapse; font-size:15px; margin:18px 0 }
.legal th,.legal td { border:1px solid var(--hair); padding:10px 12px; text-align:left }

/* ---- Hareket: dört olay ------------------------------------------------- */
.reveal { opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease) }
.reveal.in { opacity:1; transform:none }

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

/* ---- Duyarlılık --------------------------------------------------------- */
@media (max-width:900px) {
  /* Tablette nav taşıyordu: bölüm bağlantıları gizlenir, sayfa tek akış olduğu için kayıpsız */
  .nav-links { display:none }
}
@media (max-width:960px) {
  .hero-grid,.tour-grid { grid-template-columns:minmax(0,1fr); gap:44px }
  .tour-steps,.tour-panel { position:static }
  .grid-3,.grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .plans { grid-template-columns:minmax(0,1fr); max-width:460px }
  .foot-grid { grid-template-columns:repeat(2,1fr) }
}
@media (max-width:680px) {
  body { font-size:16px }
  .band { padding:64px 0 }
  .hero { padding:8px 0 60px }
  /* minmax(0,1fr): düz "1fr" min-width:auto demek ve geniş tablo sütunu taşırıyordu */
  .grid-2,.grid-3,.grid-4,.compare { grid-template-columns:minmax(0,1fr) }
  .card-big { grid-column:auto }
  .role { grid-template-columns:minmax(0,1fr); gap:6px }
  .foot-grid { grid-template-columns:minmax(0,1fr) }
  .faq summary { grid-template-columns:28px 1fr 20px; font-size:16px }
  .faq-a { padding-left:28px }
  /* Mobil üst çubuk: lockup logo solda; sağda dil · Aç/Open · Ücretsiz başla.
     Tema düğmesi navdan kalkar, footer'daki kopyası görünür. */
  .nav-in { gap:6px }
  nav .wrap { padding:0 16px }   /* DENEME: 8 → 16px (logo sığması için --pad-x'ten dar kalır) */
  /* Logo ESNEK: dar modellerde (320-375px) kendiliğinden daralır, düğmeler asla taşmaz */
  .nav-in .logo { flex:0 1 216px; min-width:96px; overflow:hidden }
  .nav-in .icon-btn, .nav-in .btn-sm { flex:none }
  #themeBtn { display:none }
  #themeBtnFoot { display:inline-grid; margin-left:auto }
  .btn-sm { height:34px; padding:0 13px; font-size:13px }
  .icon-btn { width:32px; height:32px }
  .lg { width:100%; max-width:216px; height:46px }
  .wrap,.wrap-narrow { padding:0 18px }
}

/* ---- Google ile giriş düğmesi (login/signup/google-kayit) ---- */
.auth-veya{display:flex;align-items:center;gap:10px;margin:14px 0 10px;font-size:12px;opacity:.6}
.auth-veya::before,.auth-veya::after{content:'';flex:1;height:1px;background:currentColor;opacity:.35}
.g-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:#fff;color:#1f1f1f;border:1px solid #dadce0;border-radius:10px;
  font-weight:600;font-size:14.5px;padding:11px 0;cursor:pointer;text-decoration:none}
.g-btn:hover{background:#f7f8f8}
.g-btn svg{width:18px;height:18px;flex-shrink:0}

/* ---- Mobil bölümü: telefon çerçeveli ekran görüntüleri ---- */
.tel-sira{display:flex;gap:32px;justify-content:center;flex-wrap:wrap}
.tel{width:250px;margin:0;border-radius:30px;overflow:hidden;background:#000;
  border:1px solid rgba(127,140,160,.28);box-shadow:0 28px 56px -28px rgba(0,0,0,.55)}
.tel img{width:100%;display:block}
.tel figcaption{font-size:13px;opacity:.75;padding:12px 10px 14px;background:rgba(127,140,160,.07)}
@media (max-width:640px){ .tel{width:200px} .tel-sira{gap:20px} }

/* Dar ekranda biçim tablosu kaydırma yerine sarar: kesik metin izlenimi kalmasın */
@media (max-width:640px){
  table.rule{min-width:0;font-size:14px}
  table.rule td{padding:13px 12px}
  table.rule .num{white-space:normal;word-break:break-word}
}

/* DENEME (31 Ağu 2026): hubx yerleşim boşlukları — içerik 1116px (69.75rem) kilitli, yatay dolgu kademeli
   (24 → 40 → 60 → 110 → 160px). hubx.co'nun --site-width/--spacing-layout-horizontal değerleri birebir.
   Geri almak için bu bloğu sil. Mobil nav'daki 'nav .wrap{padding:0 8px}' istisnası bilerek korunuyor. */
:root { --pad-x:24px }   /* kullanıcı isteği: her genişlikte sağ/sol 24px (kademe kaldırıldı) */
.wrap { max-width:calc(69.75rem + 2*var(--pad-x)); padding:0 var(--pad-x) }
/* DENEME (31 Ağu 2026): mobilde büyük tanıtım metinleri küçülür — hero 21px → 17px, bölüm girişleri 19-21px → 17px.
   hubx mobil gövde ölçüsü (~17px). Geri almak için bu kuralı sil. */
@media (max-width:680px){
}

/* DENEME (31 Ağu 2026): hubx hero alt metin gradienti — metne kırpılmış radyal gradient (merkez metnin üstünde;
   üst-orta koyu gri, kenarlara %78 beyaz). Desteklemeyen tarayıcıda düz renk kalır. Geri almak için bloğu sil. */
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .hero .lead {
    background: radial-gradient(120.96% 120.96% at 50% -20.96%, #696969 0%, hsla(0,0%,100%,.78) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
}

/* DENEME (31 Ağu 2026): hubx tarzı tam ekran menü (logo tıklamasıyla). Satırlar saç çizgisiyle ayrılır,
   sağ üstte X; hubx mobil menüsünün birebir dokusu. Geri almak için bu blok + index.html'deki blok silinir. */
.mega-menu { display:none; position:fixed; inset:0; z-index:80; background:#000; color:#fff;   /* hubx: --color-black */
  overflow:auto; flex-direction:column }
.mega-menu.open { display:flex }
body.mm-kilit { overflow:hidden }
.mm-top { display:flex; align-items:center; justify-content:space-between; height:64px; flex:none; width:100% }
.mm-close { background:none; border:0; color:#fff; cursor:pointer; padding:10px; margin-right:-10px;
  display:flex; border-radius:8px }
.mm-close:hover { opacity:.7 }
.mm-close:focus-visible { outline:2px solid #fff; outline-offset:2px }
.mm-list { display:flex; flex-direction:column; width:100%; margin-top:8px }
.mm-list a { font-size:17px; line-height:21px; font-weight:700; letter-spacing:.0024em; color:#fff;
  padding:12px 0; border-bottom:1px solid #242424 }   /* hubx birebir: 17px/21px, .75rem dikey, mine-shaft çizgi */
.mm-list a:hover { opacity:.7 }   /* hubx: renk sabit #fff, hover'da opaklık .7 */
@media (prefers-reduced-motion:no-preference){
  .mega-menu.open { animation:mmKay .32s cubic-bezier(.22,.61,.36,1) }
  @keyframes mmKay { from { transform:translateY(-100%) } to { transform:translateY(0) } }
  .mega-menu.open .mm-list a { opacity:0; animation:mmSatir .26s ease-out forwards }
  .mega-menu.open .mm-list a:nth-child(1){ animation-delay:.10s }
  .mega-menu.open .mm-list a:nth-child(2){ animation-delay:.15s }
  .mega-menu.open .mm-list a:nth-child(3){ animation-delay:.20s }
  .mega-menu.open .mm-list a:nth-child(4){ animation-delay:.25s }
  .mega-menu.open .mm-list a:nth-child(5){ animation-delay:.30s }
  @keyframes mmSatir { from { opacity:0; transform:translateY(-8px) } to { opacity:1; transform:translateY(0) } }
}

/* DENEME (31 Ağu 2026): hero alt metni hubx 'body-l + medium' birebir — mobil 17px/1.24/+.0024em,
   ≥768px 18px/1.6/+.01em, ≥1200px 20px; ağırlık 500. Beğenilmezse bu blok silinir (eski: 21px/500, mobil 17/1.55/600). */
.hero .lead { font-weight:500; font-size:17px; line-height:1.24; letter-spacing:.0024em; max-width:36ch }
@media (min-width:768px){ .hero .lead { font-size:18px; line-height:1.6; letter-spacing:.01em; max-width:40ch } }
@media (min-width:1200px){ .hero .lead { font-size:20px } }

/* DENEME (31 Ağu 2026): ürün turu açıklamaları (.oz-yazi p) hero ile aynı hubx 'body-l' dokusu —
   mobil 17px/1.24/+.0024em, ≥768px 18px/1.6/+.01em, ≥1200px 20px; ağırlık 500 + hero'daki gradient (kıyas sonrası kullanıcı tercihi). */
.oz-yazi p { font-weight:500; font-size:17px; line-height:1.24; letter-spacing:.0024em }
@media (min-width:768px){ .oz-yazi p { font-size:18px; line-height:1.6; letter-spacing:.01em } }
@media (min-width:1200px){ .oz-yazi p { font-size:20px } }
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .oz-yazi p {
    background: radial-gradient(120.96% 120.96% at 50% -20.96%, #696969 0%, hsla(0,0%,100%,.78) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
}

/* DENEME (31 Ağu 2026): ürün turu adım numaraları (01/02...) kaldırıldı (kullanıcı isteği). Numara sütunu (46px/32px)
   ızgaradan da çıkarıldı — yoksa içerik dar sütuna düşüyordu. Geri: bu bloğu sil. */
.oz-n { display:none }
.oz { grid-template-columns:minmax(0,1fr) }
@media (max-width:820px){ .oz { grid-template-columns:minmax(0,1fr) } }

/* DENEME (31 Ağu 2026): bölüm girişleri (.sec-head p) hero/tur ile aynı hubx 'body-l' rampası —
   mobil 17px/1.24/+.0024em, ≥768px 18px/1.6/+.01em, ≥1200px 20px; ağırlık 500. Gradient yok (açık zemin). */
.sec-head p, #urun .sec-head p { font-weight:500; font-size:17px; line-height:1.24; letter-spacing:.0024em }
@media (min-width:768px){ .sec-head p, #urun .sec-head p { font-size:18px; line-height:1.6; letter-spacing:.01em } }
@media (min-width:1200px){ .sec-head p, #urun .sec-head p { font-size:20px } }

/* DENEME (31 Ağu 2026): kapanış başlığı hubx 'gradient-orange' — 3 radyal (mercan/mor/şeftali) + taban #fc576e,
   metne kırpılır. Desteklemeyen tarayıcıda tabana yakın düz renk. */
.grad-sicak { color:#fc576e }
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .grad-sicak {
    background:
      radial-gradient(29.77% 64.42% at 9.53% 92.39%, #f76751 0, rgba(252,87,110,0) 100%),
      radial-gradient(132.71% 151.47% at 102.8% 66.18%, #7174c7 0, rgba(252,87,110,0) 100%),
      radial-gradient(30.6% 32.1% at 6.69% 19.8%, #ffa57a 0, rgba(252,87,110,0) 100%),
      linear-gradient(0deg, #fc576e, #fc576e);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    -webkit-box-decoration-break:clone; box-decoration-break:clone;
  }
}

/* DENEME (31 Ağu 2026): düğme yazısı 500 → 700 (hubx düğmeleri Bold); yatay dolgu her varyantta 24px */
.btn { font-weight:700 }
.btn:not(.btn-sm), .hero .btn { padding-left:24px; padding-right:24px }
.btn:not(.btn-sm) { font-size:16px }   /* 15 → 16px; nav'daki küçük düğmeler (btn-sm) eski boyutunda (kullanıcı isteği) */

/* DENEME (31 Ağu 2026): video kartının çerçeve boşluğu 20px → 3px (kullanıcı isteği).
   Altyazı kenara yapışmasın diye kendi iç boşluğunu alır. */
.oz-ic { padding:3px }
/* Kart 3px'e inince metinler kenara yapışıyordu: yalnız metin öğeleri 8px yatay iç boşluk alır (video tam genişlikte kalır). */
.oz-ic > p, .oz-ic .oz-alt, .oz-ic .screen-cap { padding-left:8px; padding-right:8px }
.oz-ic > p:first-child { padding-top:8px }
.oz-ic > :last-child { padding-bottom:8px }

/* DENEME (31 Ağu 2026): metin içinde paragraf ayrımı — i18n düz metin bastığı için <br> yerine span (sözlükteki
   HTML yalnız <a/<span/<b> içeren değerlerde uygulanır). */
.p-ayri { display:block; margin-top:.9em }

/* DÜZELTME (31 Ağu 2026): hukuki sayfalar siyah temaya geçişte güncellenmemişti — bağlantı rengi --ink (#0a0a0b)
   siyah zeminde görünmüyordu, tablo çizgileri ve geri düğmesi açık tema token'larındaydı. Siyah bant karşılıkları: */
.legal a { color:var(--on-ink) }
.legal a:hover { color:var(--seal) }
.legal th, .legal td { border-color:var(--hair-ink) }
.legal th { color:var(--on-ink) }
.nav-back { border-color:var(--hair-ink); color:var(--on-ink-body) }
.nav-back:hover { border-color:var(--on-ink-body); color:var(--on-ink) }

/* 31 Ağu 2026: kayıt/giriş kartlarına kapatma (×) düğmesi — siteye dönüş. Kart konumlandırma için relative. */
.auth-card { position:relative }
.auth-x { position:absolute; top:14px; right:14px; width:34px; height:34px; display:inline-flex;
  align-items:center; justify-content:center; border-radius:var(--r-pill); border:1px solid var(--hair);
  color:var(--body); background:var(--band-a); transition:border-color .16s var(--ease), color .16s var(--ease) }
.auth-x:hover { border-color:var(--hair-strong); color:var(--ink) }
.auth-x:focus-visible { outline:2px solid var(--seal); outline-offset:2px }

/* 1 Eyl 2026: Google girişi kartın ÜSTÜNE alındı (form alanlarından önce) — aralıklar yeni sıraya göre. */
.auth-card .g-btn { margin-top:22px }
.auth-card .auth-veya { margin:16px 0 4px }

/* 27 Eyl 2026: giriş sayfası KOYU tasarım (kullanıcının mobil referans görseli) — yalnız body.auth-koyu olan sayfalarda.
   Zemin saf siyah, beyaz Google düğmesi, BÜYÜK HARF etiketler, koyu giriş kutuları (#0d0d11 / #24242c), mavi (#4a90ff)
   odak çerçevesi + "Giriş yap" düğmesi + bağlantılar. Telefonda (≤680px) kart çerçevesiz, 24px kenar payı.
   Apple düğmesi şimdilik bilerek yok. Diğer kimlik sayfaları (signup/unuttum/sifirla) eski beyaz kartta kalır. */
.auth-koyu { --mavi:#4a90ff; --mavi-koyu:#3b82f6; --kutu:#0d0d11; --kutu-cizgi:#24242c; --gri:#8b8b94 }
.auth-koyu .auth-wrap { padding:40px 24px 56px }
.auth-koyu .auth-card { background:transparent; border-color:var(--hair-ink); padding:36px 32px 32px }
.auth-koyu .auth-card h1 { color:var(--on-ink); font-size:24px; letter-spacing:-.02em; margin:0 44px 6px 0 }
.auth-koyu .auth-sub { color:var(--gri); font-size:15px; margin-bottom:20px }
.auth-koyu .auth-x { background:transparent; border-color:var(--hair-ink); color:var(--gri) }
.auth-koyu .auth-x:hover { border-color:#5a5a68; color:var(--on-ink) }
.auth-koyu .auth-card .g-btn { margin-top:0; height:42px; padding:0; border:0; border-radius:12px;
  background:#fff; color:#0a0a0b; font-size:15px; font-weight:700 }
.auth-koyu .auth-card .g-btn:hover { background:#ececf0 }
.auth-koyu .auth-card .auth-veya { margin:24px 0 6px; color:var(--gri); opacity:1; font-size:13px }
.auth-koyu .auth-veya::before,.auth-koyu .auth-veya::after { background:#1c1c22; opacity:1 }
.auth-koyu .auth-card label:not(.consent) { margin:18px 0 7px; font-size:11.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gri) }
.auth-koyu .auth-card input[type="text"],.auth-koyu .auth-card input[type="email"],
.auth-koyu .auth-card input[type="password"],.auth-koyu .auth-card input.kod-input {
  height:40px; padding:0 12px; border-color:var(--kutu-cizgi); border-radius:10px;
  background:var(--kutu); color:var(--on-ink); font-size:16px }   /* 16px: iOS odakta yakınlaştırmasın */
.auth-koyu .auth-card input.kod-input { height:56px; font-size:26px }
.auth-koyu .auth-card input:focus { border-color:var(--mavi); box-shadow:0 0 0 1px var(--mavi) }
.auth-koyu .auth-card input:-webkit-autofill { -webkit-box-shadow:0 0 0 1000px var(--kutu) inset;
  -webkit-text-fill-color:var(--on-ink); caret-color:var(--on-ink) }
.auth-koyu .auth-forgot { text-align:right; margin-top:14px; font-size:14px }
.auth-koyu .auth-forgot a { color:var(--mavi); font-weight:600; text-decoration:none }
.auth-koyu .auth-forgot a:hover { text-decoration:underline; text-underline-offset:3px }
.auth-koyu .auth-err { margin:0; min-height:0 }
.auth-koyu .auth-err:not(:empty) { margin-top:12px }
.auth-koyu .auth-card .btn { margin-top:18px; height:44px; border-radius:12px }
.auth-koyu .auth-card .btn-ink { background:var(--mavi); color:#fff }
.auth-koyu .auth-card .btn-ink:hover { background:var(--mavi-koyu) }
.auth-koyu .auth-alt { margin-top:22px; color:var(--gri); font-size:14.5px }
.auth-koyu .auth-alt a { color:var(--mavi); font-weight:600; text-decoration:none }
.auth-koyu .auth-alt a:hover { text-decoration:underline; text-underline-offset:3px }
.auth-koyu .auth-alt a.pasif { color:var(--gri) }
.auth-koyu .kod-sayac { color:var(--gri) }
@media (max-width:680px) {
  .auth-koyu .auth-wrap { min-height:0; padding:12px 24px 40px; place-items:start stretch }
  .auth-koyu .auth-card { width:100%; border:0; border-radius:0; padding:8px 0 0 }
  .auth-koyu .auth-x { top:0; right:0 }
  .auth-koyu .auth-card h1 { font-size:23px }
}
/* 27 Eyl 2026 (kullanıcı): login altındaki yasal bağlantılar küçük punto (11.5px), aralıklı (12px), ayraç noktası hafif
   büyük (4px daire, yazı tipinden bağımsız) ve SAYFANIN EN ALTINDA (gövde dikey flex; form alanı kalan boşluğu alır,
   içerik kısaysa bağlantılar ekranın altına yapışır, uzunsa belgenin sonunda kalır). Telefonda satır bilinçli 3+3 kırılır;
   satır başındaki ayraç gizlenir. */
body.auth-koyu { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column }
.auth-koyu nav,.auth-koyu .auth-legal { flex:none }
.auth-koyu .auth-wrap { flex:1 1 auto; min-height:0 }
.auth-koyu .auth-legal { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 12px;
  margin-top:auto; padding:8px 24px calc(20px + env(safe-area-inset-bottom, 0px)); font-size:11.5px; color:var(--on-ink-mute) }
.auth-koyu .auth-legal a { display:inline-flex; align-items:center; color:var(--on-ink-mute); text-decoration:none }
.auth-koyu .auth-legal a:hover { color:var(--on-ink) }
.auth-koyu .auth-legal a + a::before,.auth-koyu .auth-legal .auth-legal-kir + a::before { content:''; width:4px; height:4px;
  border-radius:50%; background:#5e5e68; margin-right:12px; flex:none }
.auth-koyu .auth-legal-kir { display:none }
@media (max-width:680px) {
  .auth-koyu .auth-legal-kir { display:block; flex-basis:100%; height:0 }
  .auth-koyu .auth-legal .auth-legal-kir + a::before { display:none }
}

/* 27 Eyl 2026: KAYIT / PAROLA sayfaları koyu tasarım (kullanıcının mobil referans görselleri) — body.auth-koyu.alt-sayfa.
   Login bloğunun üstüne: telefonda uygulama tarzı üst çubuk (← Kaydol · dil · ×; logo ve karttaki × gizli),
   Ad | Soyadı iki sütun, Parola (tekrar), mavi yuvarlatılmış onay kutuları (özel çizim; input semantiği korunur),
   beta plan kutusu gizli (görselde yok). Rıza metinleri kısaltılmadı (hukuki ifade). */
.alt-sayfa .mob-geri,.alt-sayfa .mob-baslik,.alt-sayfa .mob-kapat { display:none }
.auth-koyu .ad-soyad { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 12px }
.alt-sayfa .beta-plan { display:none }
.auth-koyu .consent { display:flex; margin-top:14px; gap:12px; align-items:flex-start; font-size:13.5px; line-height:1.45; color:#d4d4da }
.auth-koyu .consent input[type="checkbox"] { appearance:none; -webkit-appearance:none; width:22px; height:22px; margin:-1px 0 0;
  flex:none; border:1.5px solid #3a3a44; border-radius:6px; background:var(--kutu); cursor:pointer; position:relative;
  transition:background .12s var(--ease), border-color .12s var(--ease) }
.auth-koyu .consent input[type="checkbox"]:checked { background:var(--mavi); border-color:var(--mavi) }
.auth-koyu .consent input[type="checkbox"]:checked::after { content:''; position:absolute; left:7px; top:3px; width:5px;
  height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) }
.auth-koyu .consent input[type="checkbox"]:focus-visible { outline:2px solid var(--mavi); outline-offset:2px }
.auth-koyu .consent a,.auth-koyu .lgb-link { color:var(--mavi); text-decoration:none }
.auth-koyu .consent a:hover,.auth-koyu .lgb-link:hover { text-decoration:underline; text-underline-offset:3px }
.auth-koyu .req { color:var(--gri) }
@media (max-width:680px) {
  .alt-sayfa .nav-in .logo { display:none }
  .alt-sayfa .mob-geri { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
    margin-left:-8px; border-radius:50%; color:var(--on-ink) }
  .alt-sayfa .mob-baslik { display:inline-block; font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--on-ink) }
  .alt-sayfa .mob-kapat { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
    margin-left:6px; border-radius:50%; background:#2a2a2e; color:var(--on-ink) }
  .alt-sayfa .auth-x { display:none }
  .alt-sayfa .auth-card h1 { margin-right:0 }
  .alt-sayfa .auth-wrap { padding-top:4px }
}

/* 27 Eyl 2026: parola sıfırlama sayfaları — yeşil bilgi kutusu (unuttum: gönderildi; sifirla: güncellendi). */
.auth-koyu .auth-ok { display:flex; gap:10px; align-items:flex-start; margin-top:18px; padding:14px 16px; border-radius:12px;
  background:rgba(52,199,123,.10); border:1px solid rgba(52,199,123,.35); color:#d4d4da; font-size:13.5px; line-height:1.5 }
.auth-koyu .auth-ok::before { content:'✓'; color:#34c77b; font-weight:800; flex:none }
.auth-koyu .auth-ok[hidden] { display:none }
.auth-koyu .auth-card .btn[hidden] { display:none }   /* .btn'nin inline-flex'i hidden özniteliğini eziyordu */

/* 27 Eyl 2026 (kullanıcı): AÇIK TEMA sürümleri — uygulamadaki mayTheme='light' anahtarı sayfa başındaki satır içi betikle
   html[data-theme="light"] olur. Koyu blok tokenlarla yazıldığı için burada yalnız tokenlar ve sabit renkler değişir. */
html[data-theme="light"] { color-scheme:light }
html[data-theme="light"] body.auth-koyu { --mavi:#2f7cf6; --mavi-koyu:#256ce0; --kutu:#f4f4f6; --kutu-cizgi:#dcdce2; --gri:#6b6b74;
  --on-ink:#0a0a0b; --on-ink-body:#5a5a63; --on-ink-mute:#7a7a83; --hair-ink:#e2e2e6; --band-ink:#ffffff }
html[data-theme="light"] .auth-koyu .lg { --marka:url('/marka/mayassistant-lockup-light.svg') }
html[data-theme="light"] .auth-koyu .auth-card .g-btn { border:1px solid #dadce0 }
html[data-theme="light"] .auth-koyu .auth-card .g-btn:hover { background:#f7f8f8 }
html[data-theme="light"] .auth-koyu .auth-veya::before,html[data-theme="light"] .auth-koyu .auth-veya::after { background:#e6e6ea }
html[data-theme="light"] .auth-koyu .auth-err { color:#c62828 }
html[data-theme="light"] .auth-koyu .auth-ok { color:#1f3a2a }
html[data-theme="light"] .auth-koyu .consent { color:#2a2a30 }
html[data-theme="light"] .auth-koyu .consent input[type="checkbox"] { border-color:#c8c8d0; background:#fff }
html[data-theme="light"] .auth-koyu .consent input[type="checkbox"]:checked { background:var(--mavi); border-color:var(--mavi) }
html[data-theme="light"] .auth-koyu .auth-legal a + a::before,
html[data-theme="light"] .auth-koyu .auth-legal .auth-legal-kir + a::before { background:#b5b5bd }
html[data-theme="light"] .auth-koyu .auth-x:hover { border-color:#b5b5bd }
html[data-theme="light"] .alt-sayfa .mob-kapat { background:#ececf0 }
html[data-theme="light"] nav .icon-btn:hover { border-color:#b5b5bd }

/* 27 Eyl 2026 (kullanıcı tasarımı): 6 haneli kod ekranı — altı ayrı kutu; "Kod gelmedi mi? Yeniden gönder" + "← Giriş ekranına dön". */
.auth-koyu .kod-kutular { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-top:22px }
.auth-koyu .auth-card input.kod-kutu { height:54px; padding:0; text-align:center; font-size:22px; font-weight:700; border-radius:12px;
  font-variant-numeric:tabular-nums; caret-color:var(--mavi) }
.auth-koyu .auth-alt.kod-geri { margin-top:12px }
/* google-kayit: Google'dan gelen e-posta alanı — başında G işareti, değiştirilemez */
.auth-koyu .g-alan { position:relative; margin-top:22px }
.auth-koyu .g-alan-ic { position:absolute; left:14px; top:50%; width:18px; height:18px; transform:translateY(-50%); pointer-events:none }
.auth-koyu .auth-card .g-alan input[type="email"] { padding-left:42px }   /* özgüllük: genel kutu kuralı (0,3,1) padding'i eziyordu */
.auth-koyu .auth-card input:disabled { color:var(--gri); -webkit-text-fill-color:var(--gri); opacity:1 }

/* 27 Eyl 2026 (kullanıcı tasarımı): ONAYLAR bloğu — belgeli satırlarda (Koşullar+Gizlilik, KVKK) belge adı kalın beyaz
   (mavi bağlantı değil): satıra dokununca metin açılır,
   "Okudum…" kutuyu işaretler; açıklama notu yok (kullanıcı kaldırdı). Yasal metin sayfası: masaüstünde 640px koyu kart, telefonda TAM EKRAN
   (başlık + "Son güncelleme", sağ üstte daire ×, BÜYÜK HARF bölüm etiketi, mavi madde imleri, altta yapışık mavi düğme,
   KVKK'da düğme üstünde not). Açık tema sürümleri blokun sonunda. */
/* 27 Eyl gece (kullanıcı tam sayfa tasarımı): başlık, sayaç ve › KALDIRILDI — sade, sık satırlar (12px ara). */
.auth-koyu .onaylar { margin-top:24px }
.auth-koyu .onaylar .consent { margin-top:12px; cursor:pointer }
.auth-koyu .onaylar .consent:first-of-type { margin-top:0 }
.auth-koyu .consent > span { flex:1 1 auto; min-width:0 }
.auth-koyu .consent b { color:var(--on-ink); font-weight:700 }
/* yasal metin sayfası */
.auth-koyu .lgb { background:rgba(0,0,0,.72) }
.auth-koyu .lgm { width:min(640px,100%); background:var(--kutu); border-color:var(--kutu-cizgi); border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.6) }
.auth-koyu .lgm-h { align-items:flex-start; padding:24px 24px 12px; border-bottom:0 }
.auth-koyu .lgm-hb { flex:1 1 auto; min-width:0 }
.auth-koyu .lgm-h h3 { font-size:20px; font-weight:800; letter-spacing:-.02em; line-height:1.25; color:var(--on-ink) }
.auth-koyu .lgm-tarih { margin-top:6px; font-size:12.5px; color:var(--gri) }
.auth-koyu .lgm-tarih:empty { display:none }
.auth-koyu .lgm-x { width:34px; height:34px; flex:none; border:0; border-radius:50%; background:#2a2a2e; color:var(--on-ink);
  display:inline-flex; align-items:center; justify-content:center; font-size:0 }
.auth-koyu .lgm-x:hover { background:#3a3a40; color:var(--on-ink) }
.auth-koyu .lgm-body { padding:4px 24px 28px; font-size:14.5px; line-height:1.55; color:#d4d4da; scroll-behavior:auto }
.auth-koyu .lgm-bolum { margin:22px 0 12px; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gri) }
.auth-koyu .lgm-bolum:first-child { margin-top:10px }
.auth-koyu .lgm-body h1,.auth-koyu .lgm-body h2 { font-size:15.5px; font-weight:700; letter-spacing:-.01em; color:var(--on-ink); margin:22px 0 8px }
.auth-koyu .lgm-body h3 { font-size:14.5px; font-weight:700; color:var(--on-ink); margin:18px 0 6px }
.auth-koyu .lgm-body b,.auth-koyu .lgm-body strong { color:var(--on-ink) }
.auth-koyu .lgm-body p,.auth-koyu .lgm-body li { margin:0 0 10px }
.auth-koyu .lgm-body ul { padding-left:0; list-style:none }
.auth-koyu .lgm-body ul li { position:relative; padding-left:18px }
.auth-koyu .lgm-body ul li::before { content:''; position:absolute; left:2px; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--mavi) }
.auth-koyu .lgm-body ol { padding-left:20px }
.auth-koyu .lgm-body a { color:var(--mavi) }
.auth-koyu .lgm-body th,.auth-koyu .lgm-body td { border-color:var(--kutu-cizgi) }
.auth-koyu .lgm-f { position:relative; display:block; border-top:0; padding:0 24px 24px }
.auth-koyu .lgm-f::before { content:''; position:absolute; left:0; right:0; top:-28px; height:28px; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--kutu)) }
.auth-koyu .lgm-not { margin:0 0 12px; font-size:12.5px; line-height:1.5; color:var(--gri) }
.auth-koyu .lgm-not[hidden] { display:none }
.auth-koyu .lgm-ok { width:100%; margin:0; height:44px; padding:0 18px; border-radius:12px; background:var(--mavi); color:#fff;
  font-size:15px; font-weight:700 }
.auth-koyu .lgm-ok:hover { background:var(--mavi-koyu) }
@media (max-width:680px) {
  .auth-koyu .lgb { padding:0; place-items:stretch }
  .auth-koyu .lgm { width:100%; height:100vh; height:100dvh; max-height:none; border:0; border-radius:0; background:#000 }
  .auth-koyu .lgm-h { padding:calc(18px + env(safe-area-inset-top, 0px)) 24px 10px }
  .auth-koyu .lgm-f { padding:0 24px calc(18px + env(safe-area-inset-bottom, 0px)) }
  .auth-koyu .lgm-f::before { background:linear-gradient(to bottom, transparent, #000) }
}
/* açık tema */
html[data-theme="light"] .auth-koyu .lgb { background:rgba(10,10,11,.45) }
html[data-theme="light"] .auth-koyu .lgm { background:#fff; border-color:#e2e2e6; box-shadow:0 30px 80px rgba(0,0,0,.18) }
html[data-theme="light"] .auth-koyu .lgm-x { background:#ececf0 }
html[data-theme="light"] .auth-koyu .lgm-x:hover { background:#e0e0e6 }
html[data-theme="light"] .auth-koyu .lgm-body { color:#2a2a30 }
html[data-theme="light"] .auth-koyu .lgm-f::before { background:linear-gradient(to bottom, transparent, #fff) }
/* Metin gövdesi açılışta programla odaklanır (klavye ile kaydırma için); sitenin yeşil odak çerçevesi burada çerçeve çizgisi gibi göründüğünden kapalı. */
.auth-koyu .lgm-body:focus,.auth-koyu .lgm-body:focus-visible { outline:none }
/* 27 Eyl 2026: Apple ile devam et (signup) — Google düğmesinin altında 10px arayla, aynı beyaz stil; logo 18px siyah. */
.auth-koyu .auth-card .g-btn + .g-btn { margin-top:10px }
.auth-koyu .auth-card .apple-btn svg { width:18px; height:18px; margin-top:-2px }
.auth-koyu .auth-card .g-btn[hidden] { display:none }

/* 11 Eki 2026: "Takvim görünümü" alt bloğu (04 e-posta bölümünün metin sütununda, "Daha fazla"nın dışında — Google doğrulaması
   için ana sayfada görünür). İnce çizgiyle ayrılır, başlık mono: özellik başlığıyla yarışmaz. */
.oz-takvim { margin-top:18px; padding-top:16px; border-top:1px solid var(--hair-ink); max-width:42ch }
.oz-takvim-b { display:block; font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; color:var(--on-ink); margin-bottom:6px }
.oz-yazi .oz-takvim p { font-size:15px; line-height:1.55 }
.oz-takvim a { color:var(--on-ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px }
.oz-takvim a:hover { text-decoration-thickness:2px }