/* ==================================================================
   AKILLI KARŞILAMA · v7 / A · "Gece"
   Tasarım dili: tek :root bloğu. Diğer sayfalar bu değişkenleri
   ve aşağıdaki bileşenleri hazır kullanır. Düz hex ve düz px yalnız
   :root içinde (istisna: medya sorguları em, SVG data URI dolguları).
================================================================== */
:root{
  /* --- Renk --- */
  --c-bg:#f9faf6;            /* kağıt */
  --c-surface:#eff5ed;       /* mint */
  --c-surface-2:#e3ede0;
  --c-card:#ffffff;
  --c-ink:#172a24;           /* mürekkep (marka, sabit) */
  --c-ink-2:#0f1d18;         /* koyu bölüm */
  --c-ink-3:#1f362e;
  --c-muted:#5f6d66;
  --c-line:#dce5da;
  --c-accent:#c0f76a;        /* misket (marka, sabit) */
  --c-accent-soft:#d7f5b1;   /* açık misket: panel etiketi */
  --c-accent-ink:#438253;    /* koyu yeşil vurgu */
  --c-accent-ink-2:#2f6b41;  /* küçük vurgu metni (AA) */
  --c-on-dark:#f4f8f1;
  --c-on-dark-muted:#b3c4ba;
  --c-focus:#2f6b41;
  --c-ink-a06:rgba(23,42,36,.06);
  --c-ink-a12:rgba(23,42,36,.12);
  --c-ink-a40:rgba(23,42,36,.4);
  --c-ink-a86:rgba(15,29,24,.86);
  --c-paper-a72:rgba(249,250,246,.74);
  --c-paper-a90:rgba(249,250,246,.9);
  --c-white-a06:rgba(255,255,255,.06);
  --c-white-a10:rgba(255,255,255,.1);
  --c-white-a16:rgba(255,255,255,.16);
  --c-accent-a30:rgba(192,247,106,.3);
  --c-accent-a55:rgba(192,247,106,.55);
  --c-shadow-deep:rgba(15,29,24,.55);
  /* gün ışığı: akşam (17:58) ve sabah (09:00). Gece sahnesi de bu değerleri okur. */
  --c-sun:#fbfff0;
  --c-dusk:#f3e7a1;          /* gün batımı, turuncumsu misket */
  --c-dusk-a55:rgba(243,231,161,.55);
  --c-dawn-top:#cfe3c6;      /* sabah 09:00 gökyüzü */
  --c-dawn-bot:#f1f7e3;
  --c-moon:#e6f1ea;
  --c-moon-2:#b9cdc2;
  /* gökyüzü (JS gece sahnesinde günceller) */
  --sky-top:#e6f0e2;
  --sky-bot:#f9faf6;

  /* --- Tipografi --- */
  --font-display:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-body:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --fs-xs:.75rem;                                       /* 12 px, etiket */
  --fs-s:clamp(.875rem,.85rem + .1vw,.9375rem);         /* 14–15 */
  --fs-body:clamp(1rem,.97rem + .15vw,1.0625rem);       /* 16–17 */
  --fs-l:clamp(1.125rem,1.03rem + .45vw,1.375rem);      /* 18–22 */
  --fs-xl:clamp(1.3rem,1.1rem + .9vw,1.8rem);
  --fs-2xl:clamp(1.65rem,1.2rem + 2vw,2.6rem);
  --fs-3xl:clamp(2.1rem,1.35rem + 3.4vw,4rem);          /* h2 */
  --fs-hero:clamp(2.55rem,1.45rem + 5.2vw,6rem);        /* h1 */
  --fs-page:clamp(2.3rem,1.35rem + 3.9vw,4.75rem);      /* alt sayfa h1 */
  --fs-clock:clamp(4.2rem,1.6rem + 12vw,13rem);
  --lh-tight:1;
  --lh-snug:1.15;
  --lh-body:1.6;
  --tracking-tight:-.035em;
  --tracking-display:-.045em;
  --tracking-label:.16em;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-black:800;

  /* --- Boşluk ve düzen --- */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:3rem;
  --space-8:clamp(3rem,2rem + 4vw,4.5rem);
  --space-9:clamp(4.5rem,3rem + 6vw,8.5rem);
  --wrap:1240px;
  --gutter:clamp(1.125rem,.6rem + 2.6vw,3.5rem);        /* 390'da 18 px */
  --header-h:4.75rem;
  --tap:2.75rem;                                         /* 44 px */

  /* --- Biçim --- */
  --bw:1px;                                              /* ince çizgi */
  --bw-2:2px;                                            /* ray, alt çizgi */
  --ring:4px;                                            /* nokta halesi */
  --radius-s:.75rem;
  --radius-m:1.25rem;
  --radius-l:1.75rem;
  --radius-pill:999px;
  --border:var(--bw) solid var(--c-line);
  --border-dark:var(--bw) solid var(--c-white-a16);
  --shadow-1:0 .0625rem .125rem var(--c-ink-a06),0 .5rem 1.5rem -1rem var(--c-ink-a40);
  --shadow-2:0 1.5rem 3.75rem -2rem var(--c-ink-a40);
  --shadow-3:0 3.125rem 6.25rem -2.5rem var(--c-shadow-deep);
  --ease:cubic-bezier(.22,1,.36,1);
  --dur-1:.18s;
  --dur-2:.35s;
  --dur-3:.7s;
}

/* ---------------- Temel ---------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + var(--space-4));overflow-x:clip}
@supports not (overflow:clip){html{overflow-x:hidden}}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--fw-black);letter-spacing:var(--tracking-tight);line-height:var(--lh-snug);margin:0}
p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
em{font-style:normal}
::selection{background:var(--c-accent);color:var(--c-ink)}
:focus-visible{outline:.1875rem solid var(--c-focus);outline-offset:.1875rem;border-radius:var(--radius-s)}
.on-dark,.is-dark{--c-focus:var(--c-accent)}
.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.sr{position:absolute!important;width:var(--bw);height:var(--bw);padding:0;margin:calc(-1 * var(--bw));overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:var(--space-4);top:-10rem;z-index:300;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--space-5);border-radius:var(--radius-pill);background:var(--c-ink);color:var(--c-on-dark);font-weight:var(--fw-bold)}
.skip:focus{top:var(--space-3)}
section[id]{scroll-margin-top:var(--header-h)}
[tabindex="-1"]:focus{outline:0}

/* ---------------- Marka bileşeni ---------------- */
.brand{display:inline-flex;align-items:center;gap:var(--space-3);min-height:var(--tap);font-family:var(--font-display);font-weight:var(--fw-black);line-height:1;letter-spacing:-.02em;color:var(--c-ink)}
/* Logo (kalem 11, <x-marka-logo>): açık zeminde 3D, koyu zeminde düz beyaz; width/height öznitelikte */
.brand-logo{display:block;flex:none;width:auto;height:3rem}
.brand-logo-koyu{display:none}
.nav-on-dark .site-header .brand-logo-acik{display:none}
.nav-on-dark .site-header .brand-logo-koyu{display:block;height:2.5rem}
.foot-brand .brand-logo{height:3.5rem}
@media (max-width:32.5em){.site-header .brand-logo-acik{height:2.5rem}.nav-on-dark .site-header .brand-logo-koyu{height:2.25rem}}
/* "ak" simgesi sprite'tan (#i-ak): gövde bulunduğu yerin yazı rengini alır, uç misket */
.ak-mark{--ak-govde:currentColor;--ak-uc:var(--c-accent)}
.brand-mark{width:2.5rem;height:2.5rem;flex:none}
.brand-word{display:flex;flex-direction:column;font-size:var(--fs-s);gap:.12em}
.brand-word span+span{color:var(--c-accent-ink-2)}
.on-dark .brand,.brand.is-light{color:var(--c-on-dark)}
.on-dark .brand-word span+span,.brand.is-light .brand-word span+span{color:var(--c-accent)}
/* varyant: koyu zemin */
.mark-dark{--mark-karo:var(--c-accent);--mark-nokta:var(--c-ink);--md1:.42;--md2:.7;--md3:1;--md3-fill:var(--c-ink)}
/* "yazıyor" nabzı: noktalar sırayla belirir */
@property --md1{syntax:'<number>';inherits:true;initial-value:.5}
@property --md2{syntax:'<number>';inherits:true;initial-value:.82}
@property --md3{syntax:'<number>';inherits:true;initial-value:1}
@keyframes yaziyor{0%,100%{--md1:.25;--md2:.35;--md3:.45}20%{--md1:1;--md2:.35;--md3:.45}40%{--md1:.6;--md2:1;--md3:.45}60%{--md1:.45;--md2:.7;--md3:1}}
@media (prefers-reduced-motion:no-preference){.is-typing{animation:yaziyor 1.8s var(--ease) infinite}}

/* ---------------- Düğmeler ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);min-height:3.25rem;padding:0 var(--space-5);border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-s);line-height:1.1;white-space:nowrap;border:var(--bw) solid transparent;transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),background-color var(--dur-2)}
.btn:hover{transform:translateY(-.125rem)}
.btn-sm{min-height:var(--tap);padding:0 var(--space-4)}
.btn .ar{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--c-white-a16);transition:transform var(--dur-2) var(--ease)}
.btn:hover .ar{transform:translateX(.1875rem)}
.btn-primary{background:var(--c-ink);color:var(--c-on-dark);box-shadow:var(--shadow-2)}
.btn-accent{background:var(--c-accent);color:var(--c-ink);box-shadow:0 1.125rem 2.5rem -1.375rem var(--c-accent-a55)}
.btn-accent .ar{background:var(--c-ink-a12)}
.btn-secondary{background:var(--c-card);color:var(--c-ink);border-color:var(--c-line)}
.btn-secondary .ar{background:var(--c-surface)}
.btn-quiet{background:transparent;color:inherit;padding:0 var(--space-3);border-radius:var(--radius-pill);min-height:var(--tap)}
.btn-quiet:hover{background:var(--c-ink-a06);transform:none}
.on-dark .btn-secondary,.is-dark .btn-secondary{background:var(--c-white-a06);color:var(--c-on-dark);border-color:var(--c-white-a16)}
.on-dark .btn-quiet:hover,.is-dark .btn-quiet:hover{background:var(--c-white-a10)}
.link{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:var(--fw-semibold);color:var(--c-ink);text-decoration:underline;text-decoration-color:var(--c-accent-ink);text-underline-offset:.3em;text-decoration-thickness:var(--bw-2)}
.on-dark .link{color:var(--c-on-dark);text-decoration-color:var(--c-accent)}

/* ---------------- Rozet / çip ---------------- */
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-3);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--c-accent-ink-2)}
.eyebrow::before{content:'';width:.5rem;height:.5rem;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 var(--ring) var(--c-accent-a30);flex:none}
.on-dark .eyebrow,.is-dark .eyebrow{color:var(--c-accent)}
.chip{display:inline-flex;align-items:center;gap:var(--space-2);min-height:2rem;padding:0 var(--space-3);border-radius:var(--radius-pill);background:var(--c-surface);color:var(--c-accent-ink-2);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-xs);letter-spacing:.06em}
.chip-ornek{background:var(--c-ink);color:var(--c-accent);letter-spacing:.1em;text-transform:uppercase}
.on-dark .chip,.is-dark .chip{background:var(--c-white-a10);color:var(--c-accent)}
.chip.chip-ornek{background:var(--c-ink);color:var(--c-accent)}
/* saat çipi: gecenin dili sonraki bölümlerde (misket saat + zaman) */
.chip-saat{background:var(--c-ink);color:var(--c-accent);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.chip-saat svg{width:1.05rem;height:1.05rem;flex:none}

/* ---------------- Bölüm başlığı ---------------- */
.section{padding-block:var(--space-9);position:relative}
.sec-head{display:grid;gap:var(--space-4);margin-bottom:var(--space-8);max-width:60rem}
.sec-head--split{max-width:none}
@media (min-width:56.25em){.sec-head--split{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:end;gap:var(--space-7)}}
.sec-head .h2{margin-top:var(--space-3)}
.h2{font-size:var(--fs-3xl);letter-spacing:var(--tracking-display);line-height:1.02}
.h2 em{color:var(--c-accent-ink)}
.on-dark .h2 em,.is-dark .h2 em{color:var(--c-accent)}
.lead{font-size:var(--fs-l);color:var(--c-muted);max-width:52ch;line-height:1.5}
.on-dark .lead,.is-dark .lead{color:var(--c-on-dark-muted)}
.on-dark{background:var(--c-ink);color:var(--c-on-dark)}

/* ---------------- Zaman rayı (gece sahnesinin çizgisi; ayırıcı olarak da kullanılır) ---------------- */
.time-rule{position:relative;height:3.5rem;color:var(--c-ink);margin-bottom:var(--space-6)}
.time-rule .tr-line{position:absolute;left:0;right:0;top:1.1rem;height:var(--bw-2);border-radius:var(--bw-2);background:linear-gradient(90deg,var(--c-dusk),var(--c-ink) 22%,var(--c-ink) 78%,var(--c-accent));opacity:.9}
.time-rule .tr-tick{position:absolute;top:1.85rem;transform:translateX(-50%);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-xs);color:var(--c-muted);font-variant-numeric:tabular-nums}
.time-rule .tr-tick.first{transform:none}
.time-rule .tr-tick.last{transform:translateX(-100%)}
.time-rule .tr-stop{position:absolute;top:1.1rem;width:.8rem;height:.8rem;margin:-.4rem 0 0 -.4rem;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 var(--ring) var(--c-accent-a30)}
.time-rule .tr-sun,.time-rule .tr-moon{position:absolute;top:1.1rem;width:1.1rem;height:1.1rem;margin:-.55rem 0 0 -.55rem;border-radius:50%}
.time-rule .tr-sun{left:0;margin-left:0}
.time-rule .tr-sun.am{left:auto;right:0;margin:-.55rem 0 0 0}
.time-rule .tr-sun{background:var(--c-dusk);box-shadow:0 0 0 var(--ring) var(--c-dusk-a55)}
.time-rule .tr-sun.am{background:var(--c-accent);box-shadow:0 0 0 var(--ring) var(--c-accent-a30)}
.time-rule .tr-moon{background:var(--c-moon);box-shadow:inset -.28rem -.08rem 0 0 var(--c-moon-2),0 0 0 var(--ring) var(--c-ink-a06)}
.time-rule .tr-cap{position:absolute;right:0;top:-.9rem;font-size:var(--fs-xs);font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--c-accent-ink-2)}
/* Dar ekran: başlık üstte akışta, çizelge altta. Çizgi, nokta ve etiketler kutunun ALTINA göre
   konumlanır; başlık kaç satır olursa olsun çizgiyle çakışmaz. (Revizyon 1: eski kuralda başlığın
   margin-top'u kutudan dışarı taşıyordu — margin collapse — ve başlık çizginin üstüne biniyordu.) */
@media (max-width:37.5em){
  .time-rule{display:flow-root;height:auto;padding-bottom:3.25rem}
  .time-rule .tr-tick.mid{display:none}
  .time-rule .tr-cap{position:static;display:block;margin-bottom:var(--space-2)}
  .time-rule .tr-line,.time-rule .tr-stop,.time-rule .tr-sun,.time-rule .tr-moon{top:calc(100% - 2.15rem)}
  .time-rule .tr-tick{top:calc(100% - 1.4rem)}
}

/* ---------------- Kart ---------------- */
.card{background:var(--c-card);border:var(--border);border-radius:var(--radius-l);padding:var(--space-6);box-shadow:var(--shadow-1);position:relative;overflow:hidden}
.card h3{font-size:var(--fs-xl);letter-spacing:-.025em}
.card p{color:var(--c-muted)}
.on-dark .card{background:var(--c-white-a06);border:var(--border-dark);box-shadow:none}
.on-dark .card p{color:var(--c-on-dark-muted)}

/* ---------------- Sohbet penceresi ve balon ---------------- */
.chat{background:var(--c-surface);border:var(--border);border-radius:var(--radius-l);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-2)}
.chat-head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--c-card);border-bottom:var(--border)}
.chat-head b{display:block;font-family:var(--font-display);font-size:var(--fs-s);line-height:1.2}
.chat-head small{display:block;font-size:var(--fs-xs);color:var(--c-muted);line-height:1.3}
.chat-head .chip-ornek{margin-left:auto;flex:none}
.chat-head .who{min-width:0;flex:1}
.avatar{width:2.5rem;height:2.5rem;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--c-surface-2);color:var(--c-accent-ink-2);font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-xs);letter-spacing:.04em}
.chat-body{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4)}
.chat-day{align-self:center;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:var(--c-card);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--c-muted);box-shadow:var(--shadow-1)}
.msg{max-width:86%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-m);font-size:var(--fs-s);line-height:1.45;box-shadow:0 .375rem 1rem -.75rem var(--c-ink-a40);overflow-wrap:anywhere}
.msg time{display:block;margin-top:var(--space-1);font-size:var(--fs-xs);color:var(--c-muted);text-align:right;line-height:1}
.msg-in{align-self:flex-start;background:var(--c-card);color:var(--c-ink);border-bottom-left-radius:var(--space-1)}
/* Asistan balonu marka simgesinin renginde: açık zeminde mürekkep, koyu zeminde kağıt.
   Misket yalnız vurgu; okundu işareti yok (WhatsApp'ın yeşil balonu ve ✓✓ düzeni kopyalanmaz). */
.msg-out{align-self:flex-end;background:var(--c-ink);color:var(--c-on-dark);border-bottom-right-radius:var(--space-1)}
.msg-out time{color:var(--c-on-dark-muted)}
.on-dark .msg-out{background:var(--c-bg);color:var(--c-ink)}
.on-dark .msg-out time{color:var(--c-muted)}
/* "yazıyor" göstergesi = marka simgesi "Yazıyor"un kendisi (noktalar sırayla belirir) */
.typing{align-self:flex-end;display:none;align-items:center;gap:var(--space-2);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--c-muted);line-height:1}
.typing .brand-mark{width:2.25rem;height:2.25rem}
/* Oynatılan sohbet: henüz düşmemiş mesaj görünmez ama ekran okuyucu için DOM'da kalır. */
.motion .chat[data-play] .msg:not(.on),.cine .scene .msg:not(.on){position:absolute!important;width:var(--bw);height:var(--bw);padding:0;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;box-shadow:none}
.motion .chat[data-play] .msg.on,.cine .scene .msg.on{animation:msg-in var(--dur-3) var(--ease) both}
.motion .chat[data-play] .typing.on,.cine .scene .typing.on{display:inline-flex;animation:msg-in var(--dur-2) var(--ease) both}
.motion .chat[data-play] .chat-body{transition:opacity var(--dur-2)}
.motion .chat[data-play].fade .chat-body{opacity:0}
@keyframes msg-in{from{opacity:0;transform:translateY(.75rem) scale(.97)}to{opacity:1;transform:none}}

/* ---------------- Adım ---------------- */
.step-num{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-3xl);letter-spacing:-.06em;line-height:.9;color:var(--c-accent-ink)}

/* ---------------- Fiyat kartı ---------------- */
.plans{display:grid;gap:var(--space-5);align-items:stretch}
@media (min-width:61.25em){.plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plan{display:flex;flex-direction:column;gap:var(--space-5);background:var(--c-card);border:var(--border);border-radius:var(--radius-l);padding:var(--space-6);position:relative;overflow:hidden;box-shadow:var(--shadow-1)}
.plan h3{font-size:var(--fs-xl)}
.plan-sub{color:var(--c-muted);font-size:var(--fs-s);margin-top:var(--space-1)}
.plan-price{display:grid;gap:var(--space-1)}
.price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-2)}
.price-row b{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-2xl);letter-spacing:-.05em;line-height:1}
.price-row span{color:var(--c-muted);font-size:var(--fs-s);font-weight:var(--fw-semibold)}
/* ikinci satır (ör. yıllık) gelirse küçük etiketle ayrılır */
.price-row small{flex-basis:100%;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted);font-family:var(--font-display);font-weight:var(--fw-bold)}
.plan ul{display:grid;gap:var(--space-3);font-size:var(--fs-s)}
.plan li{display:flex;gap:var(--space-3);align-items:flex-start}
.plan li::before{content:'';flex:none;width:1.25rem;height:1.25rem;margin-top:.1rem;border-radius:50%;background:var(--c-surface) no-repeat center/60% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 5 9l5-6' fill='none' stroke='%23438253' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.plan .btn{margin-top:auto}
.plan-hot{background:var(--c-ink);color:var(--c-on-dark);border-color:var(--c-ink);box-shadow:var(--shadow-3)}
.plan-hot .plan-sub,.plan-hot .price-row span,.plan-hot .price-row small{color:var(--c-on-dark-muted)}
.plan-hot li::before{background-color:var(--c-white-a10);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 5 9l5-6' fill='none' stroke='%23c0f76a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.plan-tag{align-self:flex-start}
.plan-hot::after{content:'';position:absolute;right:-30%;bottom:-40%;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--c-accent-a30),transparent 65%);pointer-events:none}
.plan > *{position:relative;z-index:1}

/* ---------------- SSS öğesi ---------------- */
.faq-item{background:var(--c-card);border:var(--border);border-radius:var(--radius-m);transition:border-color var(--dur-2)}
.faq-item+.faq-item{margin-top:var(--space-3)}
.faq-item[open]{border-color:var(--c-accent-ink)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:3.5rem;padding:var(--space-3) var(--space-5);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-body);border-radius:var(--radius-m)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'';flex:none;width:2rem;height:2rem;border-radius:50%;background:var(--c-surface) no-repeat center/50% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5l4-4' fill='none' stroke='%23172a24' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");transition:transform var(--dur-2) var(--ease),background-color var(--dur-2)}
.faq-item[open] summary::after{transform:rotate(180deg);background-color:var(--c-accent)}
.faq-item p{padding:0 var(--space-5) var(--space-5);color:var(--c-muted);max-width:62ch}

/* ================================================================
   HEADER (ortak)
   Açık zeminde kağıt hap; koyu zeminde (data-koyu bölümler ve
   kararmış gece sahnesi) koyu hap. Ara gri hâl yok.
================================================================ */
.site-header{position:fixed;inset:0 0 auto;z-index:100;padding-top:var(--space-3);transition:transform var(--dur-2) var(--ease)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:3.75rem;padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);border-radius:var(--radius-pill);border:var(--bw) solid transparent;transition:background-color var(--dur-2),border-color var(--dur-2),box-shadow var(--dur-2),color var(--dur-2)}
.scrolled .site-header .bar{background:var(--c-bg);border-color:var(--c-line);box-shadow:var(--shadow-1)}
.nav-on-dark .site-header .bar{background:var(--c-ink-2);border-color:var(--c-white-a10);box-shadow:none;color:var(--c-on-dark)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .scrolled .site-header .bar{background:var(--c-paper-a90);-webkit-backdrop-filter:blur(1rem) saturate(1.3);backdrop-filter:blur(1rem) saturate(1.3)}
  .nav-on-dark .site-header .bar{background:var(--c-ink-a86);-webkit-backdrop-filter:blur(1rem) saturate(1.2);backdrop-filter:blur(1rem) saturate(1.2)}
}
.nav-on-dark .site-header .brand{color:var(--c-on-dark)}
.nav-on-dark .site-header .brand-word span+span{color:var(--c-accent)}
.nav-on-dark .site-header .brand-mark{--mark-karo:var(--c-accent);--mark-nokta:var(--c-ink);--md1:.42;--md2:.7;--md3:1;--md3-fill:var(--c-ink)}
.nav-on-dark .site-header .btn-primary{background:var(--c-accent);color:var(--c-ink)}
.nav-on-dark .site-header .btn-primary .ar{background:var(--c-ink-a12)}
.nav-on-dark .site-header .menu-btn{background:var(--c-accent);color:var(--c-ink)}
.nav-on-dark .site-header .nav-links a:hover,.nav-on-dark .site-header .login:hover{background:var(--c-white-a10)}
.nav-on-dark{--c-focus:var(--c-accent)}
.nav-links{display:flex;gap:var(--space-1)}
.nav-links a,.login{display:inline-flex;align-items:center;white-space:nowrap;min-height:var(--tap);padding:0 var(--space-3);border-radius:var(--radius-pill);font-weight:var(--fw-medium);font-size:var(--fs-s);transition:background-color var(--dur-1)}
.nav-links a:hover,.login:hover{background:var(--c-ink-a06)}
.nav-cta{display:flex;align-items:center;gap:var(--space-2)}
.login{font-weight:var(--fw-semibold)}
/* Bulunulan sayfa (aria-current="page"): bağlantı açık misket bir hap içinde (b12, Arda 10.10.2026:
   "renk şeklinde vurgu, kutunun içinde"). Koyu hapta yarı saydam misket; "Demo talep et"
   seçiliyken misket zemin ve çevresinde açık misket hale. */
.nav-links a[aria-current="page"],.nav-links a[aria-current="page"]:hover{background:var(--c-accent-soft);color:var(--c-ink);font-weight:var(--fw-semibold)}
.nav-on-dark .site-header .nav-links a[aria-current="page"]{background:var(--c-accent-a30);color:var(--c-on-dark)}
.site-header .btn-primary[aria-current="page"],.mobile-menu .btn-primary[aria-current="page"]{background:var(--c-accent);color:var(--c-ink);box-shadow:0 0 0 var(--ring) var(--c-accent-soft)}
.site-header .btn-primary[aria-current="page"] .ar,.mobile-menu .btn-primary[aria-current="page"] .ar{background:var(--c-ink-a12)}
.nav-on-dark .site-header .btn-primary[aria-current="page"]{box-shadow:0 0 0 var(--ring) var(--c-accent-a30)}
.menu-btn{display:none;width:var(--tap);height:var(--tap);border-radius:50%;background:var(--c-ink);color:var(--c-on-dark);place-items:center}
.menu-btn svg{width:1.25rem;height:1.25rem}
.menu-btn .x{display:none}
.menu-btn[aria-expanded="true"] .x{display:block}
.menu-btn[aria-expanded="true"] .bars{display:none}
.mobile-menu{position:fixed;left:var(--gutter);right:var(--gutter);top:calc(var(--header-h) + var(--space-2));z-index:99;background:var(--c-card);color:var(--c-ink);border:var(--border);border-radius:var(--radius-l);padding:var(--space-3);box-shadow:var(--shadow-3);display:none;flex-direction:column;max-height:calc(100vh - var(--header-h) - var(--space-5));max-height:calc(100svh - var(--header-h) - var(--space-5));overflow-y:auto;overscroll-behavior:contain}
.mobile-menu.open{display:flex}
.mobile-menu a{display:flex;align-items:center;flex:none;min-height:3.25rem;padding:0 var(--space-4);border-radius:var(--radius-m);font-weight:var(--fw-semibold);font-size:var(--fs-l)}
.mobile-menu a:hover{background:var(--c-surface)}
.mobile-menu a:not(.btn)[aria-current="page"]{background:var(--c-accent-soft);color:var(--c-ink)}
.mobile-menu .btn{margin-top:var(--space-2);font-size:var(--fs-body)}
@media (max-width:66.25em){.nav-links,.nav-cta .login{display:none}.menu-btn{display:grid}}
@media (max-width:32.5em){.nav-cta .btn{display:none}}
@media (min-width:66.3125em){.mobile-menu:not(.menu-kalabalik){display:none!important}}
/* Menüde dörtten çok bağlantı varsa (Hakkımızda, Demo) masaüstü menü 1200 px altında sığmaz:
   o genişlikte de mobil menüye geçilir. Ana sayfanın dört bağlantılı hâli etkilenmez. */
@media (max-width:75em){.menu-kalabalik .nav-links,.menu-kalabalik .nav-cta .login{display:none}.menu-kalabalik .menu-btn{display:grid}}
@media (min-width:75.0625em){.mobile-menu{display:none!important}}
/* Yatay telefon (500 px altı yükseklik): menü iki sütun, satırlar kısa; "Giriş yap" ve
   "Demo talep et" kaydırmadan görünür. Menü açıkken çerez penceresi menünün altında
   kalmasın diye geçici olarak gizlenir (mobil denetimi K6, 29.09.2026). */
@media (max-width:75em) and (max-height:31.25em){
  .mobile-menu.open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-2);align-content:start}
  .mobile-menu a{min-height:var(--tap);font-size:var(--fs-body)}
  .mobile-menu .btn{grid-column:1 / -1;margin-top:var(--space-1)}
  body:has(.mobile-menu.open) .cerez{visibility:hidden}
}
/* JS yoksa (ya da gece.js yüklenemezse) mobil menü düz bağlantı listesi olarak görünür */
html:not(.js) .menu-btn{display:none}
@media (max-width:66.25em){
  html:not(.js) .mobile-menu{display:flex;position:static;max-height:none;margin:calc(var(--header-h) + var(--space-3)) var(--gutter) 0;box-shadow:none}
  html:not(.js) .mobile-menu + main .hero{padding-top:var(--space-6)}
}
@media (max-width:75em){html:not(.js) .mobile-menu.menu-kalabalik{display:flex;position:static;max-height:none;margin:calc(var(--header-h) + var(--space-3)) var(--gutter) 0;box-shadow:none}}

/* ================================================================
   KAHRAMAN · gündüz, 17:58 (güneş batıyor)
================================================================ */
.hero{position:relative;overflow:hidden;padding-top:calc(var(--header-h) + var(--space-6));padding-bottom:var(--space-6);background:radial-gradient(55% 60% at 78% 88%,var(--c-dusk-a55),transparent 70%),linear-gradient(180deg,var(--c-surface) 0%,var(--sky-top) 50%,var(--c-dawn-bot) 100%)}
.hero-grid{display:grid;gap:var(--space-7);align-items:center;min-height:min(calc(100svh - var(--header-h) - 7rem),46rem)}
@media (min-width:61.25em){.hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}}
.hero-copy{position:relative;z-index:2}
.hero h1{font-size:var(--fs-hero);letter-spacing:var(--tracking-display);line-height:.96;margin:var(--space-4) 0 var(--space-5)}
.hero h1 em{color:var(--c-accent-ink);display:inline-block}
.hero-def{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-xl);line-height:1.3;letter-spacing:-.02em;max-width:30ch;color:var(--c-ink)}
.hero-def mark{background:linear-gradient(transparent 58%,var(--c-accent) 58%,var(--c-accent) 92%,transparent 92%);color:inherit;padding-inline:.08em}
.hero-lead{margin-top:var(--space-4);color:var(--c-muted);max-width:50ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.hero-notes{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin-top:var(--space-5);font-size:var(--fs-s);color:var(--c-muted)}
.hero-notes li{display:flex;align-items:center;gap:var(--space-2)}
.hero-notes li::before{content:'';width:.5rem;height:.5rem;border-radius:50%;background:var(--c-accent-ink)}
.hero-visual{position:relative;min-height:34rem;display:grid;place-items:center;isolation:isolate}
/* batan güneş: ufuk çizgisinin arkasına iner */
.hero-dusk{position:absolute;left:-8%;right:-8%;top:0;bottom:24%;overflow:hidden;z-index:-1;pointer-events:none}
.hero-dusk::after{content:'';position:absolute;left:4%;right:4%;bottom:0;height:var(--bw);background:linear-gradient(90deg,transparent,var(--c-ink-a40) 20%,var(--c-ink-a40) 80%,transparent)}
.hero-sun{position:absolute;left:var(--sun-x,50%);bottom:0;width:min(26rem,78%);aspect-ratio:1;margin-left:max(-13rem,-39%);transform:translateY(24%);border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--c-sun) 0 30%,var(--c-dusk) 44%,var(--c-dusk-a55) 56%,transparent 71%)}
.hero-rings{position:absolute;left:var(--sun-x,50%);bottom:0;width:0;height:0}
.hero-rings i{position:absolute;left:0;top:0;border:var(--bw) solid var(--c-ink-a12);border-radius:50%;transform:translate(-50%,-50%)}
.hero-rings i:nth-child(1){width:30rem;height:30rem}
.hero-rings i:nth-child(2){width:42rem;height:42rem;opacity:.6}
.hero-rings i:nth-child(3){width:54rem;height:54rem;opacity:.35}
.phone{position:relative;width:min(20rem,78vw);border-radius:2.6rem;padding:.6rem;background:var(--c-ink);box-shadow:var(--shadow-3);transform:perspective(87.5rem) rotateY(-12deg) rotateX(5deg) rotateZ(2deg);transform-style:preserve-3d;transition:transform 1.2s var(--ease)}
.phone::before{content:'';position:absolute;inset:calc(-1 * var(--bw));border-radius:inherit;border:var(--bw) solid var(--c-white-a16);pointer-events:none}
.phone .chat{border-radius:2.1rem;border:0;box-shadow:none;min-height:31rem}
.phone-status{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-5) var(--space-1);background:var(--c-card);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-xs)}
.phone-status .notch{width:5rem;height:1.35rem;border-radius:var(--radius-pill);background:var(--c-ink)}
.phone-status .bat{width:1.5rem;height:.7rem;border-radius:.2rem;border:.09375rem solid var(--c-ink);position:relative}
.phone-status .bat::after{content:'';position:absolute;inset:var(--bw) 30% var(--bw) var(--bw);background:var(--c-ink);border-radius:var(--bw)}
.phone .chat-body{flex:1;justify-content:flex-end;background:var(--c-surface) radial-gradient(circle,var(--c-ink-a06) .0625rem,transparent .09375rem) 0 0/1.1rem 1.1rem}
.phone .chat-day{margin-bottom:auto}
.phone-input{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-3);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);background:var(--c-card);border-radius:var(--radius-pill);font-size:var(--fs-s);color:var(--c-muted)}
.phone-input i{margin-left:auto;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--c-accent);display:grid;place-items:center}
.phone-input i::after{content:'';width:0;height:0;border-left:.6rem solid var(--c-ink);border-top:.38rem solid transparent;border-bottom:.38rem solid transparent;margin-left:.15rem}
.hero .avatar-mark{width:2.5rem;height:2.5rem;flex:none}
.float-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-m);background:var(--c-card);border:var(--border);box-shadow:var(--shadow-2);max-width:17rem}
.float-chip small{display:block;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--c-accent-ink-2)}
.float-chip b{display:block;font-family:var(--font-display);font-size:var(--fs-s);line-height:1.25}
.float-chip .big{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-2xl);letter-spacing:-.05em;line-height:1}
.float-chip.c1{left:0;top:30%}
.float-chip.c2{right:0;bottom:10%;background:var(--c-accent);border-color:var(--c-accent)}
/* masaüstü: telefon sağa yaslanır, batan güneş ve rozetler solda görünür */
@media (min-width:61.25em){
  .hero-visual{--sun-x:34%}
  .hero-visual .phone{justify-self:end;margin-right:var(--space-5)}
  .float-chip.c1{top:24%}
  .float-chip.c2{right:auto;left:0;bottom:14%}
}
.float-chip.c2 small{color:var(--c-ink-3)}
@media (max-width:40em){.hero-visual{min-height:30rem}.float-chip.c1{top:22%;left:-.25rem}.float-chip.c2{bottom:2%;right:-.25rem}.float-chip{max-width:13.5rem;padding:var(--space-2) var(--space-3)}}
.hero-foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--space-1) var(--space-4);margin-top:var(--space-5)}
.hero-foot a{display:inline-flex;align-items:center;gap:var(--space-3);min-height:var(--tap);padding:0 var(--space-4);border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.hero-foot a:hover{background:var(--c-ink-a06)}
.hero-foot b{color:var(--c-ink);font-variant-numeric:tabular-nums}
.hero-foot .down{width:1.5rem;height:2.25rem;border:.09375rem solid var(--c-accent-ink);border-radius:var(--radius-pill);position:relative;flex:none}
.hero-foot .down::after{content:'';position:absolute;left:50%;top:.4rem;width:.25rem;height:.5rem;margin-left:-.125rem;border-radius:.125rem;background:var(--c-accent-ink)}
.hero-skip{display:flex;align-items:center;gap:0}
.hero-skip span{font-size:var(--fs-xs);color:var(--c-muted);font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:.12em;text-transform:uppercase;padding-right:var(--space-1)}
.hero-foot .hero-skip a{color:var(--c-accent-ink-2);text-decoration:underline;text-underline-offset:.3em;padding:0 var(--space-3)}
@keyframes cue{from{transform:translateY(0);opacity:1}to{transform:translateY(.8rem);opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .hero-foot .down::after{animation:cue 1.8s var(--ease) infinite}
  .hero-sun{animation:sun-set 2.4s var(--ease) both}
  .phone{animation:phone-in 1.2s var(--ease) both .1s}
  .float-chip{animation:chip-in .9s var(--ease) both .6s}
  .float-chip.c2{animation-delay:.8s}
}
@keyframes sun-set{from{transform:translateY(0);opacity:.6}}
@keyframes phone-in{from{transform:perspective(87.5rem) rotateY(-24deg) rotateX(10deg) translateY(2.5rem);opacity:0}}
@keyframes chip-in{from{transform:translateY(1rem) scale(.94);opacity:0}}

/* ================================================================
   GECE · sinematik sahne
   Varsayılan (JS yok / hareket azaltılmış): statik, okunur kart ızgarası.
   .cine: sabitlenen sahne, kaydırmaya bağlı saat ve gökyüzü.
================================================================ */
.night{position:relative;background:linear-gradient(180deg,var(--c-ink-3),var(--c-ink-2) 40%,var(--c-ink));color:var(--c-on-dark);--c-focus:var(--c-accent)}
.night-stage{position:relative}
.night-sky,.night-orb,.night-horizon{display:none}
.night-inner{padding-block:var(--space-9);position:relative;z-index:2}
.night-head{display:grid;gap:var(--space-3);max-width:44rem;margin-bottom:var(--space-7)}
.night-head .h2 em{color:var(--c-accent)}
.night-head .eyebrow{color:var(--c-accent)}
.night-intro-text{color:var(--c-on-dark-muted);font-size:var(--fs-l);max-width:48ch}
.night-skip{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-1);font-size:var(--fs-s)}
.night-skip > span{color:var(--c-on-dark-muted);margin-right:var(--space-1)}
.night-skip a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--space-3);border-radius:var(--radius-pill);font-weight:var(--fw-semibold);text-decoration:underline;text-decoration-color:var(--c-accent);text-underline-offset:.3em;text-decoration-thickness:var(--bw-2)}
.night-skip a:hover{background:var(--c-white-a10)}
.night-now,.night-rail{display:none}
.night-scenes{display:grid;gap:var(--space-5)}
@media (min-width:47.5em){.night-scenes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:68.75em){.night-scenes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.scene{position:relative}
.scene.chat{background:var(--c-surface);color:var(--c-ink)}
.scene-time{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-2xl);letter-spacing:-.05em;line-height:1;color:var(--c-accent-ink);font-variant-numeric:tabular-nums;margin-bottom:var(--space-2)}
.scene-intro,.scene-final{border-radius:var(--radius-l);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);justify-content:center}
.scene-intro{background:var(--c-white-a06);border:var(--border-dark)}
.scene-intro .chip-ornek{align-self:flex-start}
.cine .night-stage:not(.is-dark) .scene-intro{background:var(--c-paper-a72);border:var(--border);box-shadow:var(--shadow-2)}
.cine .night-stage:not(.is-dark) .scene-intro p{color:var(--c-muted)}
.scene-intro .brand-mark{width:4rem;height:4rem}
.scene-intro h3{font-size:var(--fs-2xl);letter-spacing:-.035em}
.scene-intro p{color:var(--c-on-dark-muted)}
.scene-final{background:linear-gradient(180deg,var(--c-dawn-bot),var(--c-bg));color:var(--c-ink);grid-column:1 / -1}
.scene-final h3{font-size:var(--fs-2xl);letter-spacing:-.04em}
.scene-final h3 em{color:var(--c-accent-ink)}
.scene-final-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4)}
.answered{display:grid;gap:var(--space-2)}
.answered li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-2) var(--space-4);align-items:center;padding:var(--space-2) var(--space-4);border-radius:var(--radius-s);background:var(--c-card);border:var(--border);font-size:var(--fs-s)}
.answered time{font-family:var(--font-display);font-weight:var(--fw-black);font-variant-numeric:tabular-nums;color:var(--c-accent-ink-2)}
.answered b{font-family:var(--font-display);display:block;line-height:1.25}
.answered span{color:var(--c-muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.answered .ok{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-xs);color:var(--c-accent-ink-2);background:var(--c-surface);padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);white-space:nowrap}
.answered .ok span{display:inline;color:inherit;overflow:visible}
.night-disclaimer{margin-top:var(--space-5);font-size:var(--fs-s);color:var(--c-on-dark-muted)}

/* ---- sinematik mod ---- */
/* Sahne en büyük görünüm yüksekliğini (lvh) kaplar, içerik en küçüğe (svh) yerleşir: mobil adres
   çubuğu gizlenince sahnenin altında sayfa zemini şeridi açılmaz, çubuk açıkken ray görünür kalır. */
.cine .night{background:var(--sky-bot)}
.cine .night-stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:linear-gradient(180deg,var(--sky-top),var(--sky-bot));color:var(--c-ink);transition:color var(--dur-3)}
.cine .night-stage.is-dark{color:var(--c-on-dark)}
.cine .night-sky{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 1s}
.cine.gl .night-sky{opacity:1}
/* CSS güneş/ay: yalnız WebGL yoksa. WebGL varsa gök cismi gölgelendiricide çizilir. */
.cine .night-orb{display:block;position:absolute;left:0;top:0;width:var(--orb-d,7rem);aspect-ratio:1;border-radius:50%;z-index:1;pointer-events:none;will-change:transform;opacity:0;background:radial-gradient(circle at 50% 50%,var(--c-sun) 0 38%,var(--c-dusk) 52%,transparent 71%);box-shadow:0 0 5rem 1rem var(--c-dusk-a55)}
.cine .night-orb.moon{background:radial-gradient(circle at 40% 38%,var(--c-moon) 0 44%,var(--c-moon-2) 60%,transparent 71%);box-shadow:0 0 4.5rem .75rem var(--c-white-a10)}
.cine.gl .night-orb{display:none}
.cine .night-horizon{display:block;position:absolute;left:0;right:0;bottom:0;height:22%;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent,var(--c-ink-a12));opacity:0;transition:opacity var(--dur-3)}
.cine .is-dark .night-horizon{opacity:1}
.cine .night-inner{height:100vh;height:100svh;padding:calc(var(--header-h) + var(--space-4)) 0 var(--space-5);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;gap:var(--space-4)}
.cine .night-head{margin:0;gap:var(--space-2);align-content:start}
.cine .night-head .h2{font-size:var(--fs-2xl);transition:font-size var(--dur-3) var(--ease),letter-spacing var(--dur-3)}
.cine .night-stage:not(.is-dark) .night-head .h2 em{color:var(--c-accent-ink-2)}
.cine .night-stage:not(.is-dark) .night-head .eyebrow{color:var(--c-accent-ink-2)}
.cine .night-stage:not(.is-dark) .night-skip > span{color:var(--c-muted)}
.cine .night-stage:not(.is-dark) .night-skip a{text-decoration-color:var(--c-accent-ink)}
.cine .night-stage:not(.is-dark) .night-skip a:hover{background:var(--c-ink-a06)}
.cine .night-intro-text,.cine .night-disclaimer,.cine .scene-time{display:none}
/* ilk saniyelerden sonra başlık üst etiket boyutuna iner: ekranı saat ve sohbet taşır */
.cine .compact .night-head .h2{font-size:var(--fs-body);letter-spacing:-.01em}
.cine .compact .night-skip{font-size:var(--fs-xs)}
.cine .night-now{display:flex;align-items:flex-end;gap:var(--space-4)}
.night-clock{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-clock);letter-spacing:-.065em;line-height:.8;font-variant-numeric:tabular-nums;white-space:nowrap}
.is-dark .night-clock{color:var(--c-accent);text-shadow:0 0 3rem var(--c-accent-a30)}
.night-clock-label{display:block;font-size:var(--fs-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--fw-bold);margin-bottom:var(--space-3);opacity:.75;text-shadow:none}
.night-caption{display:grid;gap:var(--space-1);align-content:start;max-width:26rem;padding-bottom:var(--space-2)}
.night-caption .cap-sector{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--c-accent-ink-2)}
.is-dark .night-caption .cap-sector{color:var(--c-accent)}
.night-caption .cap-text{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-l);line-height:1.3;letter-spacing:-.015em}
.cine .night-scenes{display:block;position:relative;min-height:0}
.cine .scene{position:absolute;left:0;right:0;top:50%;max-height:100%;overflow:hidden;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity var(--dur-2) linear}
.cine .scene.active{opacity:1;pointer-events:auto}
/* kart taşarsa en yeni mesaj görünür kalır; eski mesaj üst kenarda yumuşakça kaybolur (kesik balon görünmez) */
.cine .scene.chat .chat-body{-webkit-mask-image:linear-gradient(180deg,transparent,var(--c-ink) var(--space-4));mask-image:linear-gradient(180deg,transparent,var(--c-ink) var(--space-4))}
.cine .scene.chat{display:flex}
.cine .scene.chat .chat-body{justify-content:flex-end;overflow:hidden;min-height:0;flex:1 1 auto}
.cine .scene-final{grid-column:auto}
.cine .scene-final .answered li{padding-block:var(--space-1)}
.cine .night-rail{display:block;position:relative;height:3.25rem}
.rail-line{position:absolute;left:0;right:0;top:1.1rem;height:var(--bw-2);border-radius:var(--bw-2);background:currentColor;opacity:.2}
.rail-fill{position:absolute;left:0;top:1.1rem;height:var(--bw-2);border-radius:var(--bw-2);background:var(--c-accent-ink);width:0}
.is-dark .rail-fill{background:var(--c-accent)}
.rail-stop{position:absolute;top:1.1rem;width:.75rem;height:.75rem;margin:-.33rem 0 0 -.375rem;border-radius:50%;background:var(--sky-bot);border:var(--bw-2) solid currentColor;opacity:.55;transition:background-color var(--dur-2),opacity var(--dur-2),transform var(--dur-2) var(--ease)}
.rail-stop.done{background:var(--c-accent);border-color:var(--c-accent);opacity:1;transform:scale(1.2)}
.rail-tick{position:absolute;top:1.9rem;transform:translateX(-50%);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-xs);opacity:.7;font-variant-numeric:tabular-nums}
.rail-tick.first{transform:none}
.rail-tick.last{transform:translateX(-100%)}
/* ray işaretçisi = küçük gök cismi: akşam güneşi, gece hilal, sabah misket güneş */
.rail-mark{position:absolute;top:1.1rem;width:1.25rem;height:1.25rem;margin:-.58rem 0 0 -.625rem;border-radius:50%;background:var(--c-dusk);box-shadow:0 0 0 var(--ring) var(--c-dusk-a55),0 0 1.25rem .25rem var(--c-dusk-a55);transition:background-color var(--dur-3),box-shadow var(--dur-3)}
.rail-mark.moon{background:var(--c-moon);box-shadow:inset -.32rem -.1rem 0 0 var(--c-moon-2),0 0 0 var(--ring) var(--c-white-a10),0 0 1.25rem .25rem var(--c-white-a16)}
.rail-mark.am{background:var(--c-accent);box-shadow:0 0 0 var(--ring) var(--c-accent-a30),0 0 1.25rem .25rem var(--c-accent-a30)}
@media (min-width:56.25em){
  .cine .night-inner{grid-template-columns:minmax(0,1fr) minmax(22rem,28rem);grid-template-rows:auto minmax(0,1fr) auto;column-gap:var(--space-8);row-gap:var(--space-4)}
  .cine .night-head{grid-column:1;grid-row:1;max-width:34rem}
  .cine .night-now{grid-column:1;grid-row:2;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--space-5)}
  .cine .night-scenes{grid-column:2;grid-row:1 / 3;align-self:stretch}
  .cine .night-rail{grid-column:1 / -1;grid-row:3}
  .cine .night-head .h2{font-size:var(--fs-3xl)}
  .cine .compact .night-head .h2{font-size:var(--fs-l)}
  .cine .scene .msg{font-size:var(--fs-body)}
}
/* Mobil (Revizyon 1): sabit sahnede hiçbir blok kaydırırken yer değiştirmez.
   - Başlık baştan küçük boyutta; "compact" geçişi mobilde yerleşimi değiştirmez (eskiden saat ve kart 27 px zıplıyordu).
   - Altyazının yüksekliği JS'te en uzun altyazıya göre ayrılır (eskiden satır sayısı değişince saat ±21 px zıplıyordu).
   - Kart üst kenara yaslanır ve aşağı doğru büyür (eskiden ortalıydı; her yeni mesajda üst kenarı ~32 px yukarı sıçrıyordu). */
@media (max-width:56.1875em){
  .cine .night-inner{gap:var(--space-3)}
  .cine .night-head .eyebrow{display:none}
  .cine .night-head .h2,.cine .compact .night-head .h2{font-size:var(--fs-l);letter-spacing:-.015em;transition:none}
  .cine .night-skip,.cine .compact .night-skip{font-size:var(--fs-xs)}
  .night-clock{font-size:clamp(3.4rem,17vw,5.5rem)}
  .night-clock-label{display:none}
  .cine .night-caption .cap-text{font-size:var(--fs-body)}
  .cine .night-caption{align-content:end}
  .cine .scene-intro{padding:var(--space-5);gap:var(--space-3)}
  .cine .scene-intro .brand-mark{width:3rem;height:3rem}
  .cine .scene-intro h3{font-size:var(--fs-xl)}
  .cine .scene{top:0;transform:none}
  .cine .scene-final{padding:var(--space-5);gap:var(--space-3);justify-content:flex-start}
  .cine .scene-final h3{font-size:var(--fs-xl)}
  .cine .scene-final > .eyebrow,.cine .scene-final-actions .link{display:none}
  /* sabah listesi: iki sütun, saat + onay üstte, işletme adı altta */
  .cine .scene-final .answered{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cine .scene-final .answered li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t ok" "n n";gap:0 var(--space-2);padding:var(--space-2) var(--space-3);min-height:0}
  .cine .scene-final .answered time{grid-area:t}
  .cine .scene-final .answered div{grid-area:n;min-width:0}
  .cine .scene-final .answered b{font-size:var(--fs-xs);line-height:1.3}
  .cine .scene-final .answered div span{display:none}
  .cine .scene-final .answered .ok{grid-area:ok;padding:0 var(--space-2);min-height:1.5rem}
  .cine .scene-final .answered .ok-t{position:absolute;width:var(--bw);height:var(--bw);overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cine .scene-final .btn{min-height:var(--tap)}
}
@media (max-height:45em) and (max-width:56.1875em){.cine .night-head .eyebrow{display:none}}
/* .sikis: sahne sığmazsa JS ekler (ör. 360×724, 375×667 kısa telefonlar). Görünüm yüksekliğine bağlı medya sorgusu
   değil, sayfa açılışındaki yüksekliğe bağlı sınıf: adres çubuğu açılıp kapanınca düzen değişmez. */
@media (max-width:56.1875em){
  .cine .sikis .night-clock{font-size:clamp(3rem,15vw,4.5rem)}
  .cine .sikis .night-caption .cap-text{font-size:var(--fs-s);line-height:1.25}
  .cine .sikis .scene-final h3{font-size:var(--fs-l)}
  .cine .sikis .scene-final .answered{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cine .sikis .scene-final .answered li{grid-template-areas:"t ok"}
  .cine .sikis .scene-final .answered div{position:absolute;width:var(--bw);height:var(--bw);overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cine .sikis .scene-intro .brand-mark{width:2.25rem;height:2.25rem}
  .cine .sikis .scene-intro p{font-size:var(--fs-s)}
}
/* masaüstü kısa pencere (ör. 1366×768 dizüstünde tarayıcı içi ≈ 1366×657): sabah listesi iki sütun */
@media (min-width:56.25em){
  .cine .sikis .scene-final{padding:var(--space-5);gap:var(--space-3)}
  .cine .sikis .scene-final > .eyebrow{display:none}
  .cine .sikis .scene-final h3{font-size:var(--fs-xl)}
  .cine .sikis .scene-final .answered{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cine .sikis .scene-final .answered li{grid-template-columns:auto minmax(0,1fr) auto;gap:0 var(--space-3);padding:var(--space-2) var(--space-3)}
  .cine .sikis .scene-final .answered div span,.cine .sikis .scene-final .answered .ok-t{position:absolute;width:var(--bw);height:var(--bw);overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cine .sikis .scene-final .answered .ok{padding:0 var(--space-2);min-height:1.5rem}
}


/* ================================================================
   ÖZELLİKLER · sabah paneli (açık)
================================================================ */
.features{overflow:hidden;background:linear-gradient(180deg,var(--c-dawn-bot),var(--c-bg) 45%,var(--c-surface))}
.feat-grid{display:grid;gap:var(--space-7);align-items:center}
@media (min-width:61.25em){.feat-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.feat-list{display:grid;gap:var(--space-5)}
.feat-list li{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);align-items:start}
.feat-list .ic{width:2.75rem;height:2.75rem;border-radius:var(--radius-s);background:var(--c-ink);display:grid;place-items:center;color:var(--c-accent)}
.feat-list .ic svg{width:1.4rem;height:1.4rem}
.feat-list h3{font-size:var(--fs-l);letter-spacing:-.02em;margin-bottom:var(--space-1)}
.feat-list p{color:var(--c-muted);font-size:var(--fs-s)}
.panel-wrap{position:relative}
.panel-wrap .chip-saat{position:absolute;left:var(--space-5);top:calc(-1 * var(--space-4));z-index:2;min-height:2.25rem;padding-inline:var(--space-4);box-shadow:var(--shadow-2)}
.panel{background:var(--c-bg);color:var(--c-ink);border:var(--border);border-radius:var(--radius-l);box-shadow:var(--shadow-3);overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:40em){.panel{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
.panel-top{grid-column:1 / -1;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:var(--border);background:var(--c-card)}
.panel-top .dots{display:flex;gap:.35rem}
.panel-top .dots i{width:.6rem;height:.6rem;border-radius:50%;background:var(--c-line)}
.panel-top b{font-family:var(--font-display);font-size:var(--fs-s)}
.panel-top .chip{margin-left:auto}
.panel-list{border-right:var(--border);padding:var(--space-2)}
.panel-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-1) var(--space-3);align-items:center;padding:var(--space-3);border-radius:var(--radius-s)}
.panel-row.sel{background:var(--c-surface)}
.panel-row .avatar{grid-row:span 2;width:2.25rem;height:2.25rem}
.panel-row b{font-family:var(--font-display);font-size:var(--fs-s);line-height:1.2;display:flex;justify-content:space-between;gap:var(--space-2)}
.panel-row b time{font-weight:var(--fw-medium);color:var(--c-muted);font-size:var(--fs-xs)}
.panel-row span{font-size:var(--fs-xs);color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{display:inline-flex;align-items:center;gap:.3rem;padding:.1rem .5rem;border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:var(--fw-bold);font-family:var(--font-display);background:var(--c-accent-soft);color:var(--c-ink)}
.pill.human{background:var(--c-ink);color:var(--c-accent)}
.pill.lead{background:var(--c-surface-2);color:var(--c-accent-ink-2)}
.panel-chat{display:flex;flex-direction:column}
.panel-chat .chat-body{flex:1;background:var(--c-surface)}
.panel-note{grid-column:1 / -1;padding:var(--space-2) var(--space-4);font-size:var(--fs-xs);color:var(--c-muted);border-top:var(--border);background:var(--c-card)}
@media (max-width:39.9375em){.panel-chat{display:none}.panel-list{border-right:0}}

/* ================================================================
   KİMİN İÇİN · örnek gecenin saat sırasıyla
================================================================ */
.who-grid{display:grid;gap:var(--space-4)}
@media (min-width:43.75em){.who-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:67.5em){.who-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.who-card{display:flex;flex-direction:column;gap:var(--space-3);transition:transform var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease)}
.who-card:hover{transform:translateY(-.25rem);box-shadow:var(--shadow-2)}
.who-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-2)}
.who-icon{width:3.5rem;height:3.5rem;border-radius:var(--radius-m);background:var(--c-surface);display:grid;place-items:center;color:var(--c-accent-ink)}
.who-icon svg{width:1.9rem;height:1.9rem}
.who-q{margin-top:auto;padding-top:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}
.who-q .msg{font-size:var(--fs-s);max-width:100%;background:var(--c-surface);box-shadow:none}
.who-q small{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted);font-family:var(--font-display);font-weight:var(--fw-bold)}

/* ================================================================
   NASIL ÇALIŞIR · 4 adım
================================================================ */
.how{background:var(--c-surface);overflow:hidden}
.steps{display:grid;gap:var(--space-4)}
@media (min-width:47.5em){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:72.5em){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.step{display:flex;flex-direction:column;gap:var(--space-3);background:var(--c-card);border:var(--border);border-radius:var(--radius-l);padding:var(--space-5);position:relative;box-shadow:var(--shadow-1)}
.step h3{font-size:var(--fs-xl);letter-spacing:-.025em}
.step p{color:var(--c-muted);font-size:var(--fs-s)}
.step .chip{align-self:flex-start;margin-top:auto}
.step-vis{height:10.5rem;border-radius:var(--radius-m);background:var(--c-surface);margin-bottom:var(--space-2);position:relative;overflow:hidden;display:grid;place-items:center}
.step-dark{background:var(--c-ink);color:var(--c-on-dark);border-color:var(--c-ink)}
.step-dark p{color:var(--c-on-dark-muted)}
.step-dark .step-num{color:var(--c-accent)}
.step-dark .step-vis{background:var(--c-ink-3)}
.step-dark .chip{background:var(--c-white-a10);color:var(--c-accent)}
.qr{width:6.5rem;height:6.5rem;padding:.45rem;background:var(--c-card);border-radius:var(--radius-s);box-shadow:var(--shadow-2);color:var(--c-ink)}
.qr svg{width:100%;height:100%}
.scanline{position:absolute;left:50%;top:18%;width:8.5rem;height:.1875rem;margin-left:-4.25rem;border-radius:.1875rem;background:var(--c-accent-ink);box-shadow:0 0 1.125rem .125rem var(--c-accent-a55)}
@keyframes scan{to{transform:translateY(6.4rem)}}
.docs{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;padding:var(--space-3)}
.docs span{display:inline-flex;align-items:center;gap:var(--space-2);min-height:2rem;padding:0 var(--space-3);border-radius:var(--radius-pill);background:var(--c-card);border:var(--border);font-size:var(--fs-xs);font-weight:var(--fw-semibold);box-shadow:var(--shadow-1)}
.docs span::before{content:'';width:.6rem;height:.75rem;border-radius:.125rem;background:var(--c-accent-ink)}
.docs span.hl{background:var(--c-accent);border-color:var(--c-accent)}
.docs span.hl::before{background:var(--c-ink)}
.mini-chat{width:86%;display:flex;flex-direction:column;gap:var(--space-2)}
.mini-chat .msg{font-size:var(--fs-xs);padding:var(--space-2) var(--space-3);max-width:92%}
.mini-chat .typing{display:inline-flex}
.toggle-list{width:88%;display:grid;gap:var(--space-2)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-s);background:var(--c-white-a06);border:var(--border-dark);font-size:var(--fs-xs);line-height:1.3}
.sw{flex:none;width:2.4rem;height:1.4rem;border-radius:var(--radius-pill);background:var(--c-white-a16);position:relative}
.sw::after{content:'';position:absolute;top:.2rem;left:.2rem;width:1rem;height:1rem;border-radius:50%;background:var(--c-on-dark);transition:transform var(--dur-2) var(--ease)}
.sw.on{background:var(--c-accent)}
.sw.on::after{transform:translateX(1rem);background:var(--c-ink)}
@media (prefers-reduced-motion:no-preference){
  .scanline{animation:scan 2.4s ease-in-out infinite alternate}
  .sw.auto{animation:sw-bg 5s ease-in-out infinite}
  .sw.auto::after{animation:sw-k 5s var(--ease) infinite}
}
@keyframes sw-bg{0%,45%{background:var(--c-white-a16)}55%,100%{background:var(--c-accent)}}
@keyframes sw-k{0%,45%{transform:none}55%,100%{transform:translateX(1rem)}}
.how-foot{margin-top:var(--space-6);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5);color:var(--c-muted)}

/* ================================================================
   GÜVEN
================================================================ */
.trust-grid{display:grid;gap:var(--space-6);align-items:start}
@media (min-width:61.25em){.trust-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.trust-list{display:grid;gap:var(--space-4)}
@media (min-width:43.75em){.trust-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.trust-item{display:flex;flex-direction:column;gap:var(--space-3)}
.trust-item .ic{width:3rem;height:3rem;border-radius:var(--radius-s);background:var(--c-surface);display:grid;place-items:center;color:var(--c-accent-ink)}
.trust-item .ic svg{width:1.5rem;height:1.5rem}
.trust-item h3{font-size:var(--fs-l)}
.trust-item p{font-size:var(--fs-s)}
.rules{background:var(--c-ink);color:var(--c-on-dark);border-radius:var(--radius-l);padding:var(--space-6);display:grid;gap:var(--space-3);box-shadow:var(--shadow-3);position:relative;overflow:hidden}
.rules h3{font-size:var(--fs-l)}
.rules .toggle-row{font-size:var(--fs-s);padding:var(--space-3) var(--space-4)}
.rules .toggle-row b{display:block;font-family:var(--font-display);color:var(--c-accent)}
.rules small{font-size:var(--fs-xs);color:var(--c-on-dark-muted)}
.rules::after{content:'';position:absolute;right:-25%;top:-35%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--c-accent-a30),transparent 65%);pointer-events:none}
.rules > *{position:relative;z-index:1}

/* ================================================================
   FİYAT
================================================================ */
.pricing{background:var(--c-surface)}
.pricing-foot{margin-top:var(--space-5);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);color:var(--c-muted);font-size:var(--fs-s)}

/* ================================================================
   SSS
================================================================ */
.faq-grid{display:grid;gap:var(--space-7)}
@media (min-width:61.25em){.faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.faq-side{display:grid;gap:var(--space-4);align-content:start}
@media (min-width:61.25em){.faq-side{position:sticky;top:calc(var(--header-h) + var(--space-6))}}
.faq-links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);align-items:center}

/* ================================================================
   KAPANIŞ · sabah 09:00 (sahnenin son ışığıyla aynı degrade)
================================================================ */
.closing{padding-block:0 var(--space-9)}
.closing-card{position:relative;overflow:hidden;isolation:isolate;border-radius:calc(var(--radius-l) * 1.4);background:radial-gradient(70% 60% at 76% 112%,var(--c-accent-a55) 0%,transparent 70%),linear-gradient(180deg,var(--c-dawn-top),var(--c-dawn-bot));color:var(--c-ink);border:var(--border);display:grid;gap:var(--space-6);padding:var(--space-8) var(--space-6);align-items:center}
@media (min-width:61.25em){.closing-card{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);padding:var(--space-9) var(--space-8)}}
.closing-card .h2{font-size:var(--fs-3xl);margin-top:var(--space-4)}
.closing-card .lead{color:var(--c-ink-3);margin-top:var(--space-4)}
.closing-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.closing-contact{display:flex;flex-wrap:wrap;gap:0 var(--space-5);margin-top:var(--space-4);font-size:var(--fs-s)}
.closing-contact a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--c-ink);text-decoration:underline;text-decoration-color:var(--c-accent-ink);text-underline-offset:.3em}
.closing-contact a:hover{text-decoration-color:var(--c-ink)}
.closing-art{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);min-height:17rem}
.closing-art .brand-mark{width:min(15rem,52vw);height:auto;aspect-ratio:1;filter:drop-shadow(0 2.5rem 3.75rem var(--c-ink-a40));position:relative;z-index:1}
.closing-clock{position:relative;z-index:1;text-align:center;font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-3xl);letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums;color:var(--c-accent-ink)}
.closing-clock small{display:block;font-size:var(--fs-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--c-accent-ink-2);margin-bottom:var(--space-2)}
/* doğan güneş: kahramanın batan güneşinin tersi */
.closing-sun{position:absolute;left:50%;bottom:-70%;width:130%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,var(--c-sun) 0 22%,var(--c-accent-a55) 34%,transparent 62%);z-index:-1;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .closing-art .brand-mark{animation:bob 6s ease-in-out infinite}
  .closing-card.in .closing-sun{animation:sun-rise 2.4s var(--ease) both}
}
@keyframes bob{50%{transform:translateY(-.625rem) rotate(-2deg)}}
@keyframes sun-rise{from{transform:translate(-50%,14%);opacity:.5}}

/* ================================================================
   FOOTER (ortak)
================================================================ */
.site-footer{background:var(--c-ink-2);color:var(--c-on-dark-muted);padding-block:var(--space-8) var(--space-6);font-size:var(--fs-s);--c-focus:var(--c-accent)}
.foot-grid{display:grid;gap:var(--space-7)}
@media (min-width:56.25em){.foot-grid{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr))}}
@media (min-width:37.5em) and (max-width:56.1875em){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand{grid-column:1 / -1}}
.foot-brand{display:grid;gap:var(--space-4);align-content:start}
.foot-brand .brand{color:var(--c-on-dark)}
.foot-brand .brand-word span+span{color:var(--c-accent)}
.foot-brand p{max-width:28ch;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-l);line-height:1.3;color:var(--c-on-dark)}
.foot-col h2{font-family:var(--font-display);font-size:var(--fs-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--c-accent);margin-bottom:var(--space-2);font-weight:var(--fw-bold)}
.foot-col a,.foot-col .legal-item{display:flex;align-items:center;min-height:var(--tap);color:var(--c-on-dark);transition:color var(--dur-1)}
.foot-col a:hover{color:var(--c-accent)}
.foot-col .legal-item{color:var(--c-on-dark-muted)}
.foot-bottom{margin-top:var(--space-7);padding-top:var(--space-5);border-top:var(--border-dark);display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);justify-content:space-between}

/* ================================================================
   Açılış hareketi (yalnızca JS + hareket açık; gece.js yüklenemezse
   başlık betiği .js/.motion sınıflarını geri alır, içerik görünür kalır)
================================================================ */
@media (prefers-reduced-motion:no-preference){
  .motion .reveal{opacity:0;transform:translateY(1.75rem);transition:opacity var(--dur-3) var(--ease),transform 1s var(--ease)}
  .motion .reveal.in{opacity:1;transform:none}
  .motion .reveal-group > .reveal:nth-child(2){transition-delay:.08s}
  .motion .reveal-group > .reveal:nth-child(3){transition-delay:.16s}
  .motion .reveal-group > .reveal:nth-child(4){transition-delay:.24s}
  .motion .reveal-group > .reveal:nth-child(5){transition-delay:.32s}
  .motion .reveal-group > .reveal:nth-child(6){transition-delay:.4s}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}}
/* kısa masaüstü ekranı (≈ 700–800 px): sabah kartı sıkışır */
@media (min-width:56.25em) and (max-height:50em){
  .cine .scene-final{padding:var(--space-5);gap:var(--space-3)}
  .cine .scene-final h3{font-size:var(--fs-xl)}
  .cine .scene-final .answered div span{display:none}
  .cine .scene-final .btn{min-height:var(--tap)}
}

/* ================================================================
   ALT SAYFALAR (Faz 2 · 02: Özellikler, Fiyatlandırma, SSS)
   Ana sayfanın bileşenleri (sec-head, card, trust-list, feat-list, rules,
   chat, plans, faq-item, closing) aynen kullanılır. Burada yalnızca alt
   sayfalara özgü parçalar var: sayfa başı (batan güneşle), kısa yollar,
   koyu bölüm ayarları ve karşılaştırma tablosu.
================================================================ */
.page-head{position:relative;overflow:hidden;isolation:isolate;padding-top:calc(var(--header-h) + var(--space-8));padding-bottom:var(--space-8);background:radial-gradient(50% 70% at 90% 100%,var(--c-dusk-a55),transparent 70%),linear-gradient(180deg,var(--c-surface) 0%,var(--sky-top) 55%,var(--c-dawn-bot) 100%)}
.page-head h1{font-size:var(--fs-page);letter-spacing:var(--tracking-display);line-height:1;margin:var(--space-4) 0 var(--space-5);max-width:17ch}
.page-head h1 em{color:var(--c-accent-ink)}
.page-head .lead{max-width:56ch}
.page-sun{position:absolute;right:-6rem;bottom:-10rem;z-index:-1;width:min(28rem,72vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--c-sun) 0 30%,var(--c-dusk) 44%,var(--c-dusk-a55) 56%,transparent 71%);pointer-events:none}
.page-jump{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-6)}
.page-jump > span{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted);margin-right:var(--space-2)}
.page-jump a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--space-4);border-radius:var(--radius-pill);background:var(--c-card);border:var(--border);font-weight:var(--fw-semibold);font-size:var(--fs-s);transition:border-color var(--dur-1)}
.page-jump a:hover{border-color:var(--c-accent-ink)}
.alt{background:var(--c-surface)}
/* bilgi havuzu görseli (Özellikler): ana sayfanın panel bileşeni, tek sütun */
.panel.havuz{grid-template-columns:minmax(0,1fr)}
.havuz-govde{display:grid;gap:var(--space-3);padding:var(--space-5);background:var(--c-surface)}
.havuz-baslik{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--c-accent-ink-2)}
.havuz-govde .docs{justify-content:flex-start;padding:0 0 var(--space-3)}
.havuz-govde .chat-body{padding:0}
/* koyu bölüm: gece sahnesinin degradesi; içindeki sohbet penceresi açık kalır */
.section.on-dark{background:linear-gradient(180deg,var(--c-ink-3),var(--c-ink-2) 40%,var(--c-ink))}
.on-dark .trust-item .ic{background:var(--c-white-a10);color:var(--c-accent)}
.on-dark .feat-list .ic{background:var(--c-accent);color:var(--c-ink)}
.on-dark .feat-list p{color:var(--c-on-dark-muted)}
.on-dark .chat{color:var(--c-ink)}
.on-dark .chat .msg-out{background:var(--c-ink);color:var(--c-on-dark)}
.on-dark .chat .msg-out time{color:var(--c-on-dark-muted)}
.sec-note{margin-top:var(--space-5);font-size:var(--fs-s);color:var(--c-muted);max-width:70ch}
.on-dark .sec-note{color:var(--c-on-dark-muted)}

/* ---------------- Karşılaştırma tablosu (Fiyatlandırma) ----------------
   Dar ekranda tablo kendi kutusunda yana kayar, ilk sütun sabit kalır;
   sayfa yatay taşmaz. position:relative, hücrelerdeki .sr metinleri kutuda tutar
   (yoksa mutlak konumlu metin kaydırma kutusundan kaçıp sayfayı genişletir). */
.cmp-wrap{position:relative;overflow-x:auto;overscroll-behavior-x:contain;border:var(--border);border-radius:var(--radius-l);background:var(--c-card);box-shadow:var(--shadow-1)}
.cmp{width:100%;min-width:38rem;border-collapse:separate;border-spacing:0;font-size:var(--fs-s)}
.cmp th,.cmp td{padding:var(--space-3) var(--space-4);text-align:left;vertical-align:top;border-bottom:var(--border);line-height:1.4}
.cmp thead th{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-l);letter-spacing:-.02em;vertical-align:bottom;background:var(--c-card)}
.cmp thead th small{display:block;font-family:var(--font-body);font-weight:var(--fw-medium);font-size:var(--fs-xs);letter-spacing:0;color:var(--c-muted);margin-top:var(--space-1)}
.cmp tbody th{font-weight:var(--fw-semibold);color:var(--c-ink);width:34%}
.cmp td{color:var(--c-ink-3)}
.cmp td b{font-family:var(--font-display);font-weight:var(--fw-black)}
.cmp .hot{background:var(--c-surface)}
.cmp thead .hot{box-shadow:inset 0 var(--bw-2) 0 var(--c-accent-ink)}
.cmp tr.grup th{padding-top:var(--space-5);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--c-accent-ink-2);background:var(--c-bg)}
.cmp tr:last-child > *{border-bottom:0}
.cmp th:first-child{position:sticky;left:0;z-index:1;background:var(--c-card);box-shadow:inset calc(-1 * var(--bw)) 0 0 var(--c-line)}
.cmp tr.grup th:first-child{background:var(--c-bg);box-shadow:none}
.cmp .var,.cmp .yok{display:inline-flex;align-items:center;gap:var(--space-2)}
.cmp .var::before{content:'';flex:none;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--c-accent-soft) no-repeat center/60% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 5 9l5-6' fill='none' stroke='%23172a24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.cmp .yok{color:var(--c-muted)}
.cmp-ipucu{display:none;margin-top:var(--space-3);font-size:var(--fs-xs);color:var(--c-muted)}
@media (max-width:40em){.cmp-ipucu{display:block}.cmp{min-width:31rem;font-size:var(--fs-xs)}.cmp th,.cmp td{padding:var(--space-3)}.cmp tbody th{width:8.5rem}.cmp thead th{font-size:var(--fs-body)}}
.pkg-grid{display:grid;gap:var(--space-4)}
@media (min-width:47.5em){.pkg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pkg-grid .card{display:flex;flex-direction:column;gap:var(--space-3)}
.pkg-grid ul{display:grid;gap:var(--space-2);font-size:var(--fs-s);color:var(--c-ink-3)}
.pkg-grid li{display:flex;gap:var(--space-3);align-items:flex-start}
.pkg-grid li::before{content:'';flex:none;width:.5rem;height:.5rem;margin-top:.55rem;border-radius:50%;background:var(--c-accent-ink)}