/* ============================================================================
   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-ext alt kümesi (Türkçe tam) ---- */
@font-face { font-family:'Geist'; src:url('/site/fonts/Geist-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap }
@font-face { font-family:'Geist'; src:url('/site/fonts/Geist-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap }
@font-face { font-family:'Geist'; src:url('/site/fonts/Geist-SemiBold.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap }
@font-face { font-family:'Geist Mono'; src:url('/site/fonts/GeistMono-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap }
@font-face { font-family:'Geist Mono'; src:url('/site/fonts/GeistMono-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap }

:root {
  /* Bantlar */
  --band-a:#ffffff;            /* kâğıt */
  --band-b:#f3f2ed;            /* tutanak — sıcak arşiv kâğıdı */
  --band-ink:#191713;          /* mürekkep bandı (ürün ve senaryolar) */
  --band-deep:#100f0c;         /* footer */
  --raised:#24221d;            /* koyu bantta kart yüzeyi */
  /* Metin rampası */
  --ink:#191713;
  --body:#55524b;
  --mute:#86827a;
  --on-ink:#f5f3ee;
  --on-ink-body:rgba(245,243,238,.76);
  --on-ink-mute:rgba(245,243,238,.55);
  /* Çizgi ve gölge */
  --hair:#e4e1d9;
  --hair-strong:#d3cfc4;
  --hair-ink:rgba(255,255,255,.11);
  --shadow:0 8px 24px rgba(25,23,19,.06);
  /* Tek vurgu: mühür yeşili — yalnız üç yerde */
  --seal:#0f6b4f;
  --seal-ink:#5fcfa6;
  /* Konuşmacı renkleri: yalnız ürün yüzeyinin içinde */
  --spk-a:#2c5c82; --spk-b:#8a5a2b; --spk-c:#77375a; --spk-d:#2e6b62;
  /* Ö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:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Geist Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  color-scheme:light;
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --band-a:#141410; --band-b:#0e0d0a; --band-ink:#0a0908; --band-deep:#080706;
    --raised:#201e1a;
    --ink:#f5f3ee; --body:rgba(245,243,238,.76); --mute:rgba(245,243,238,.55);
    --hair:rgba(255,255,255,.11); --hair-strong:rgba(255,255,255,.18);
    --shadow:0 8px 24px rgba(0,0,0,.4);
    --seal:#5fcfa6;
    --spk-a:#7fb3d8; --spk-b:#d6a25f; --spk-c:#d08cae; --spk-d:#6fbdae;
    color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  /* #14130f DEĞİL #141410: logo videosunun zemini sayfayla BİREBİR aynı olmalı.
     YUV 4:2:0 kuantalaması #14130f'i üretemiyor (ulaşabildiği en yakın değer #14120e)
     ve logo kutusunun kenarında 1 birimlik keskin bir basamak bırakıyordu — keskin
     kenar, alan farkından çok daha görünür. #141410 kodlamadan geçip ekranda aynen
     çıkıyor. İki tema tanımı da (medya sorgusu + data-theme) aynı değeri taşımalı. */
  --band-a:#141410; --band-b:#0e0d0a; --band-ink:#0a0908; --band-deep:#080706;
  --raised:#201e1a;
  --ink:#f5f3ee; --body:rgba(245,243,238,.76); --mute:rgba(245,243,238,.55);
  --hair:rgba(255,255,255,.11); --hair-strong:rgba(255,255,255,.18);
  --shadow:0 8px 24px rgba(0,0,0,.4);
  --seal:#5fcfa6;
  --spk-a:#7fb3d8; --spk-b:#d6a25f; --spk-c:#d08cae; --spk-d:#6fbdae;
  color-scheme:dark;
}

*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body {
  margin:0; background:var(--band-a); color:var(--body);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:inherit; text-decoration:none }
img,video { max-width:100%; display:block }
h1,h2,h3,h4 { color:var(--ink); font-weight:500; margin:0; text-wrap:balance; letter-spacing:-.015em }
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 ------------------------------------------------------------ */
.band { padding:96px 0 }
.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 --------------------------------------------------- */
.eyebrow { font-family:var(--mono); font-size:13px; font-weight:400; color:var(--mute);
  letter-spacing:.01em; margin-bottom:20px }
.band-ink .eyebrow { color:var(--on-ink-mute) }
h1 { font-size:clamp(34px,5.4vw,58px); line-height:1.08 }
h2 { font-size:clamp(27px,3.4vw,38px); line-height:1.16 }
h3 { font-size:20px; line-height:1.3; font-weight:500 }
.lead { font-size:19px; line-height:1.6; max-width:52ch; color:var(--body) }
.band-ink .lead { color:var(--on-ink-body) }
.sec-head { max-width:60ch; margin-bottom:48px }
.sec-head p { margin-top:14px; color:var(--body) }
.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) }
.btn-ink { background:var(--ink); color:var(--band-a) }
.btn-ink:hover { background:#2e2b25 }
:root[data-theme="dark"] .btn-ink:hover { background:#e2ded6 }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .btn-ink:hover { background:#e2ded6 } }
.btn-line { background:transparent; color:var(--ink); border-color:var(--hair-strong) }
.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 ---------------------------------------------------------------- */
nav { position:sticky; top:0; z-index:60; background:var(--band-a); height:64px;
  border-bottom:1px solid transparent; transition:border-color .16s var(--ease) }
nav.scrolled { border-bottom-color:var(--hair) }
.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ı.) */
.lg { --marka:url('/marka/mayassistant-lockup-light.svg');
  display:block; width:200px; height:44px;
  background:var(--marka) left center/contain no-repeat }
:root[data-theme="dark"] .lg { --marka:url('/marka/mayassistant-lockup-dark.svg') }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .lg { --marka:url('/marka/mayassistant-lockup-dark.svg') }
}
/* Alt bilgi mürekkep bandında duruyor: zemin tema ile TERS döner, işaret de ters seçilir. */
.foot-brand .lg { --marka:url('/marka/mayassistant-lockup-dark.svg') }
:root[data-theme="dark"] .foot-brand .lg { --marka:url('/marka/mayassistant-lockup-light.svg') }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .foot-brand .lg { --marka:url('/marka/mayassistant-lockup-light.svg') }
}
.nav-links { display:flex; gap:26px; font-size:15px; color:var(--body) }
.nav-links a:hover { color:var(--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) }
.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 88px }

/* ---- 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. */
.hero-logo video { width:100%; max-width:360px; height:auto; display:block;
  background:var(--band-a) }
@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. */
.hero-grid { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:64px; align-items:start }
.hero h1 { margin-bottom:22px }
.hero .lead { margin-bottom:32px }
.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px }
.hero-note { font-family:var(--mono); font-size:13px; color:var(--mute) }

/* Söz sırası şeridi: gerçek bir kaydın segment verisinden */
.turn-strip { border:1px solid var(--hair); border-radius:var(--r-card); background:var(--band-a);
  overflow:hidden }
.turn-head { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--hair); font-family:var(--mono);
  font-size:12px; color:var(--mute) }
.turn-rows { padding:6px 0 }
.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) }

/* ---- Güven şeridi -------------------------------------------------------- */
.trust { padding:16px 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair) }
/* Ş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: yapışkan panel ------------------------------------------ */
.tour { padding:96px 0 }
.tour-grid { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:56px; align-items:start }
.tour-steps { display:flex; flex-direction:column; gap:8px; position:sticky; top:112px }
.tour-step { text-align:left; background:transparent; border:0; border-left:2px solid var(--hair-ink);
  padding:18px 0 18px 22px; cursor:pointer; color:var(--on-ink-mute); font-family:var(--sans);
  transition:border-color .2s var(--ease), color .2s var(--ease) }
.tour-step h3 { color:var(--on-ink-mute); font-size:18px; transition:color .2s var(--ease) }
.tour-step p { font-size:15px; margin-top:6px; max-width:38ch }
.tour-step[aria-selected="true"] { border-left-color:var(--on-ink); color:var(--on-ink-body) }
.tour-step[aria-selected="true"] h3 { color:var(--on-ink) }

/* Adımlar tıklanabilir ama düğme gibi görünmüyordu: ikon, imleç, hover zemini ve
   seçilide dolan sol çizgi birlikte "seçilebilir" olduğunu anlatıyor. */
.tour-step { position:relative; cursor:pointer; padding-left:56px;
  border-radius:0 var(--r-in) var(--r-in) 0; transition:background .18s var(--ease), border-color .2s var(--ease) }
.ts-ik { position:absolute; left:16px; top:18px; width:28px; height:28px;
  background-position:center; background-repeat:no-repeat; background-size:24px;
  opacity:.45; transition:opacity .2s var(--ease), transform .2s var(--ease) }
.tour-step:hover { background:rgba(255,255,255,.045) }
.tour-step:hover .ts-ik { opacity:.8 }
.tour-step[aria-selected="true"] { background:rgba(255,255,255,.06) }
.tour-step[aria-selected="true"] .ts-ik { opacity:1; transform:scale(1.06) }
.ts-mic        { background-image:url('/ikon/mic-dark_no_border.svg') }
.ts-camera     { background-image:url('/ikon/camera-dark_no_border.svg') }
.ts-play       { background-image:url('/ikon/play-dark_no_border.svg') }
/* Transkript ve özet için hazır ikon yok; aynı çizgi diliyle (4.5 kalınlık, yuvarlak
   uç) geçici olarak burada çizildi. Setin kendi sürümü gelince bu iki satır değişir. */
.ts-transcript { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='20 20 76 76'%3E%3Cline x1='34' y1='40' x2='72' y2='40' stroke='%234a90ff' stroke-width='4.5' stroke-linecap='round'/%3E%3Cline x1='34' y1='54' x2='82' y2='54' stroke='%23c084fc' stroke-width='4.5' stroke-linecap='round'/%3E%3Cline x1='34' y1='68' x2='64' y2='68' stroke='%234a90ff' stroke-width='4.5' stroke-linecap='round'/%3E%3Cline x1='34' y1='82' x2='78' y2='82' stroke='%23c084fc' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") }
.ts-summary    { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='20 20 76 76'%3E%3Crect x='30' y='28' width='56' height='60' rx='9' fill='none' stroke='%234a90ff' stroke-width='4.5'/%3E%3Cline x1='42' y1='46' x2='74' y2='46' stroke='%234a90ff' stroke-width='4.5' stroke-linecap='round'/%3E%3Cline x1='42' y1='58' x2='68' y2='58' stroke='%234a90ff' stroke-width='4.5' stroke-linecap='round'/%3E%3Cline x1='42' y1='70' x2='60' y2='70' stroke='%234a90ff' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") }
.tour-panel { position:sticky; top:112px }
.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: iki şeritli zaman çizelgesi -------------------------- */
.track { display:grid; grid-template-columns:120px 1fr; gap:0 24px }
.track-lbl { font-family:var(--mono); font-size:12px; color:var(--mute); padding-top:22px }
.track-line { display:flex; gap:0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair) }
.track-cell { flex:1; padding:20px 18px 22px; border-right:1px solid var(--hair); min-width:0 }
.track-cell:last-child { border-right:0 }
.track-cell.on { background:var(--band-a) }
.track-n { font-family:var(--mono); font-size:11px; color:var(--mute); display:block; margin-bottom:8px }
.track-cell h3 { font-size:16px; margin-bottom:6px }
.track-cell p { font-size:14px; line-height:1.5 }
.track-cell.empty { background:repeating-linear-gradient(135deg,transparent 0 6px,var(--hair) 6px 7px) }

/* ---- 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) }
.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 }
.role .why { 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 #f5f3ee). 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 }

/* ---- 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 }
.faq-pm { position:relative; width:16px; height:16px; justify-self:end }
.faq-pm::before,.faq-pm::after { content:""; position:absolute; background:var(--body);
  transition:transform .2s var(--ease) }
.faq-pm::before { left:0; top:7px; width:16px; height:1.5px }
.faq-pm::after { left:7px; top:0; width:1.5px; height:16px }
.faq details[open] .faq-pm::after { transform:scaleY(0) }
.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:72px 0 40px }
.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 }
.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:#b3261e; font-size:14px; margin-top:14px; min-height:20px }
:root[data-theme="dark"] .auth-err { color:#f2b8b5 }
.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) }
  .track { grid-template-columns:minmax(0,1fr); gap:8px }
  .track-lbl { padding-top:0 }
  .track-line { flex-direction:column }
  .track-cell { border-right:0; border-bottom:1px solid var(--hair) }
  .track-cell:last-child { border-bottom:0 }
}
@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 }
  /* Nav dar ekranda sığmıyordu: ikincil eylem gizlenir, boşluk daralır */
  .nav-in { gap:12px }
  #navLoginLink { display:none }
  /* 680px altında kilit sığmaz: yalnız simge kalır.
     ÖZGÜLLÜK: düz `.lg` (0,1,0) yazılırsa yukarıdaki `:root[data-theme="dark"] .lg`
     (0,2,0) kuralı --marka'yı ezer ve koyu temada kilit 28px'e sıkışır. Bu yüzden
     buradaki kuralların hepsi :root ile yazıldı. */
  :root .lg { width:36px; height:36px; --marka:url('/marka/mayassistant-icon-light.svg') }
  :root[data-theme="dark"] .lg { --marka:url('/marka/mayassistant-icon-dark.svg') }
  :root .foot-brand .lg { --marka:url('/marka/mayassistant-icon-dark.svg') }
  :root[data-theme="dark"] .foot-brand .lg { --marka:url('/marka/mayassistant-icon-light.svg') }
  .wrap,.wrap-narrow { padding:0 18px }
}