/* ═══════════════════════════════════════════════════════════════════════════
   ODANDA GÖR — HALKA AÇIK YÜZLER · TASARIM SİSTEMİ
   ───────────────────────────────────────────────────────────────────────────
   AESTHETIC : "Atölye Işığı" — bir iç mimarlık dergisinin kâğıdı + bir ölçüm
               aletinin hassasiyeti.
   TEZ       : Sayfa, ürünün kendisi gibi davranmalı: her bölümde bir şey
               ölçülür ve gözünüzün önünde değişir. Süs değil, kanıt.
   PALET     : #F4F1EA alçı (dominant) · #17150F is (ikincil) · #B23B22 kökboya
               (aksan — Anadolu halısının kök boyası; markanın tek sıcak vurgusu)
   TİPOGRAFİ : Bodoni Moda (didone display — dergi otoritesi)
               × IBM Plex Sans (nötr-teknik gövde — enstrüman dili)
               × IBM Plex Mono (yalnız ölçüm etiketleri)
   HAREKET   : "Deliberate" — yavaş, kasıtlı perde açılışları; ölçüm çizgisi.
   İMZA      : "Ölçüm Katmanı" — görselin üzerinden geçen enstrüman çizgisi ve
               kendini çizen ölçü etiketleri. Ürünün yaptığı işin görünür hâli.

   TEK KAYNAK: bu dosya. Derlenmiş sürüm docroot'a `php bin/build-assets.php`
   ile basılır; docroot'taki dosya ELLE DÜZENLENMEZ (bin/test.php ayrışmayı
   yakalar). Renk değeri yalnız :root içinde bulunur.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENLAR ─────────────────────────────────────────────────────────── */
:root{
  /* Tipografi aileleri */
  --font-display:"Bodoni Moda",Didot,"Bodoni MT",Georgia,serif;
  --font-body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Tip skalası — 1.25 modüler oran, 11 seviye. 12px gövde metni YOK. */
  --t-3xs:11px; --t-2xs:12px; --t-xs:13px; --t-sm:14.5px; --t-base:16.5px;
  --t-md:18.5px; --t-lg:22px;
  --t-xl:clamp(25px,2.6vw,33px);
  --t-2xl:clamp(31px,4.2vw,52px);
  --t-3xl:clamp(38px,5.6vw,74px);
  --t-hero:clamp(44px,8vw,118px);

  --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700;
  --lead-tight:1.08; --lead-snug:1.24; --lead-normal:1.62; --lead-relaxed:1.78;
  --track-tight:-.03em; --track-snug:-.012em; --track-normal:0;
  --track-wide:.06em; --track-wider:.2em;

  /* Boşluk — 8 tabanlı */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s8:48px; --s10:64px; --s12:88px; --s16:128px; --s20:168px;
  --gutter:clamp(20px,5vw,48px);

  /* Kenar yarıçapı — "hassas alet": neredeyse keskin. Yuvarlak köşe yığını yok. */
  --r-xs:3px; --r-sm:5px; --r:8px; --r-lg:14px; --r-pill:999px;

  /* Genişlikler */
  --max-content:1240px; --max-wide:1520px; --max-prose:66ch; --max-narrow:820px;

  /* Hareket */
  --dur-instant:90ms; --dur-fast:180ms; --dur:340ms; --dur-slow:680ms; --dur-cine:1500ms;
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.76,0,.24,1);
  --ease-spring:cubic-bezier(.34,1.42,.64,1);

  --nav-h:68px;
  --z-atmos:0; --z-base:1; --z-sticky:30; --z-nav:40; --z-modal:60;
}

/* ── 2. "SAHNE" — KOYU, VARSAYILAN ───────────────────────────────────────
   Koyu varsayılan bir tercih değil GEREKLİLİK: sayfanın omurgası tam ekran
   video ve oda fotoğrafları. Koyu zeminde bunlar ışık kaynağı olur, açık
   zeminde gri kutulara döner. Yüzeyler CAM (blur + ince ışık kenarı),
   derinlik ışık huzmesi + katmanlı gölgeyle kurulur. */
:root,:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#08090c;          /* dominant %60 — mavimsi derin siyah, saf #000 DEĞİL */
  --paper-2:#0d0f14;
  --paper-3:#141821;
  --card:rgba(255,255,255,.045);      /* cam yüzey */
  --card-2:rgba(255,255,255,.075);
  --card-solid:#11141b;

  --ink:#ffffff; --ink-2:#b0b6c2; --ink-3:#8d94a3; --ink-inv:#08090c;

  --madder:#ff5a2b;         /* %10 aksan — kor. Sıcak, sinyal gücünde */
  --madder-deep:#e8410f;
  --madder-soft:rgba(255,90,43,.14);
  --madder-line:rgba(255,90,43,.42);

  --steel:#35d6c0;          /* ölçüm/enstrüman dili */
  --steel-soft:rgba(53,214,192,.13);

  --line:rgba(255,255,255,.13);
  --line-2:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.28);

  --ok:#7ddc8f; --ok-bg:rgba(125,220,143,.13);
  --warn:#ffc24d; --warn-bg:rgba(255,194,77,.13);
  --bad:#ff6a5e; --bad-bg:rgba(255,106,94,.13);

  /* Koyuda derinlik: daha açık yüzey + ışık kenarı + derin gölge */
  --sh-sm:inset 0 1px 0 rgba(255,255,255,.06);
  --sh:inset 0 1px 0 rgba(255,255,255,.07),0 24px 60px -20px rgba(0,0,0,.85);
  --sh-lg:inset 0 1px 0 rgba(255,255,255,.09),0 60px 120px -30px rgba(0,0,0,.9);
  --sh-brand:0 18px 50px -14px rgba(255,90,43,.55);

  --slab:#06070a;           /* moddan BAĞIMSIZ koyu blok: kod kutusu, kapanış bölümü */
  --slab-ink:#f2f3f5;
  --grain:.055;
  --scrim:linear-gradient(to top,rgba(8,9,12,.94) 0%,rgba(8,9,12,.5) 42%,transparent 78%);
  --glass:rgba(8,9,12,.66);
  --blur:blur(20px) saturate(1.5);
}

/* ── 3. AYDINLIK — okuma modu (tema düğmesiyle) ──────────────────────────
   Kremden UZAK duruldu: soğuk nötr beyaz. Bej/krem ailesi bu palette yok. */
:root[data-theme="light"]{
  color-scheme:light;
  --paper:#fbfbfc; --paper-2:#f1f2f5; --paper-3:#e6e8ed;
  --card:#ffffff; --card-2:#f7f8fa; --card-solid:#ffffff;
  --ink:#0b0c10; --ink-2:#454b56; --ink-3:#5f6773; --ink-inv:#ffffff;
  --madder:#e0410c; --madder-deep:#b83208;
  --madder-soft:rgba(224,65,12,.09); --madder-line:rgba(224,65,12,.34);
  --steel:#0e8f7c; --steel-soft:rgba(14,143,124,.1);
  --line:rgba(11,12,16,.14); --line-2:rgba(11,12,16,.07); --line-strong:rgba(11,12,16,.3);
  --ok:#1c7a37; --ok-bg:rgba(28,122,55,.1);
  --warn:#96660f; --warn-bg:rgba(150,102,15,.11);
  --bad:#c02718; --bad-bg:rgba(192,39,24,.09);
  --sh-sm:0 1px 2px rgba(11,12,16,.06),0 2px 10px rgba(11,12,16,.05);
  --sh:0 2px 8px rgba(11,12,16,.07),0 16px 34px -10px rgba(11,12,16,.14);
  --sh-lg:0 4px 14px rgba(11,12,16,.08),0 40px 80px -22px rgba(11,12,16,.22);
  --sh-brand:0 16px 42px -14px rgba(224,65,12,.45);
  --slab:#0d0f13; --slab-ink:#f2f3f5;
  --grain:.03;
  --scrim:linear-gradient(to top,rgba(11,12,16,.88) 0%,rgba(11,12,16,.44) 40%,transparent 74%);
  --glass:rgba(251,251,252,.8);
  --blur:blur(18px) saturate(1.3);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
    /* Sistem aydınlık olsa BİLE varsayılan sahne koyudur: vitrin bir gösteri yüzeyidir.
       Aydınlık moda geçiş bilinçli bir tercihtir (tema düğmesi). */
    color-scheme:dark;
  }
}

/* ── 4. RESET + TABAN ────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-block-start:calc(var(--nav-h) + 16px)}
body{
  font-family:var(--font-body);font-size:var(--t-base);line-height:var(--lead-normal);
  font-weight:var(--w-regular);color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden;font-variant-numeric:tabular-nums lining-nums;
}
h1,h2,h3,h4{
  font-family:var(--font-display);font-optical-sizing:auto;
  font-weight:var(--w-medium);line-height:var(--lead-tight);
  letter-spacing:var(--track-tight);text-wrap:balance;
}
h1{font-size:var(--t-3xl)} h2{font-size:var(--t-2xl)} h3{font-size:var(--t-lg)}
h4{font-size:var(--t-md);font-family:var(--font-body);font-weight:var(--w-semibold);letter-spacing:var(--track-snug)}
p{text-wrap:pretty}
a{color:var(--madder);text-decoration:none;transition:color var(--dur-fast) var(--ease-expo)}
a:hover{color:var(--ink)}
img,video,svg,canvas{display:block;max-inline-size:100%}
img,video{block-size:auto}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--madder);color:var(--ink-inv)}
:focus-visible{outline:2px solid var(--madder);outline-offset:3px;border-radius:var(--r-xs)}
:target{scroll-margin-block-start:calc(var(--nav-h) + 24px)}
hr{border:0;block-size:1px;background:var(--line)}

.skip{
  position:absolute;inset-inline-start:var(--s4);inset-block-start:-64px;z-index:var(--z-modal);
  background:var(--madder);color:var(--ink-inv);padding:12px 20px;border-radius:var(--r-sm);
  font-weight:var(--w-semibold);transition:inset-block-start var(--dur-fast) var(--ease-expo);
}
.skip:focus{inset-block-start:var(--s4);color:var(--ink-inv)}

/* ── 5. YARDIMCI SINIFLAR ────────────────────────────────────────────────── */
.wrap{inline-size:100%;max-inline-size:var(--max-content);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{max-inline-size:var(--max-wide)}
.wrap-narrow{max-inline-size:var(--max-narrow)}
.mono{
  font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:var(--track-wider);
  text-transform:uppercase;font-weight:var(--w-regular);
}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.vh{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vh *{inline-size:1px !important;block-size:1px !important}   /* bal küpü alanı da 1px kalsın */
.nowrap{white-space:nowrap}

/* Bölüm iskeleti — dikey ritim tek yerde tanımlı */
.sec{padding-block:clamp(var(--s10),8vw,var(--s16));position:relative}
.sec-tight{padding-block:clamp(var(--s10),7vw,var(--s12))}
.sec-head{max-inline-size:60ch;margin-block-end:clamp(var(--s8),6vw,var(--s12))}
.sec-head.center{margin-inline:auto;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;color:var(--madder);
  font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:var(--track-wider);
  text-transform:uppercase;margin-block-end:var(--s4);
}
.eyebrow::before{content:"";inline-size:28px;block-size:1px;background:currentColor;flex:none}
.sec-head.center .eyebrow::after{content:"";inline-size:28px;block-size:1px;background:currentColor;flex:none}
.lead{font-size:var(--t-md);color:var(--ink-2);max-inline-size:58ch;margin-block-start:var(--s4)}
.sec-head.center .lead{margin-inline:auto}

/* ── 6. ATMOSFER — ışık huzmeleri + kağıt tanesi ─────────────────────────
   Üç katman: (1) yavaşça sürüklenen renkli huzmeler, (2) ölçüm ızgarası,
   (3) tane. Hepsi GPU dostu: yalnız transform/opacity animasyonu var. */
.atmos{position:fixed;inset:0;z-index:var(--z-atmos);pointer-events:none;overflow:hidden;background:var(--paper)}
.beam{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.beam-1{inline-size:60vw;block-size:60vw;inset-block-start:-22vw;inset-inline-start:-10vw;
  background:radial-gradient(circle,var(--madder) 0%,transparent 68%);
  animation:drift1 26s var(--ease-inout) infinite alternate}
.beam-2{inline-size:52vw;block-size:52vw;inset-block-start:22vh;inset-inline-end:-16vw;
  background:radial-gradient(circle,var(--steel) 0%,transparent 68%);opacity:.34;
  animation:drift2 32s var(--ease-inout) infinite alternate}
.beam-3{inline-size:44vw;block-size:44vw;inset-block-end:-16vw;inset-inline-start:26vw;
  background:radial-gradient(circle,var(--madder) 0%,transparent 70%);opacity:.22;
  animation:drift3 38s var(--ease-inout) infinite alternate}
@keyframes drift1{to{transform:translate3d(9vw,7vh,0) scale(1.14)}}
@keyframes drift2{to{transform:translate3d(-11vw,-9vh,0) scale(.88)}}
@keyframes drift3{to{transform:translate3d(7vw,-6vh,0) scale(1.2)}}
.atmos::after{
  content:"";position:absolute;inset:0;opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .atmos::after{mix-blend-mode:multiply}
:root[data-theme="light"] .beam{opacity:.28;filter:blur(110px)}
.grid-rule{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:clamp(64px,7vw,104px) 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
}
.page{position:relative;z-index:var(--z-base)}

/* Cam yüzey — kart ve panellerde ortak */
.glass{background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--line)}

/* ── 7. NAVİGASYON ───────────────────────────────────────────────────────── */
/* Desen: üst çubuk. Masaüstünde hamburger YOK — bağlantılar açıkta durur.
   Aktif göstergesi: alttan büyüyen kökboya çizgi (renk değişimi değil). */
.nav{
  position:fixed;inset-inline:0;inset-block-start:0;z-index:var(--z-nav);
  border-block-end:1px solid transparent;
  transition:background var(--dur) var(--ease-expo),border-color var(--dur),backdrop-filter var(--dur);
}
.nav.is-stuck{
  background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);border-block-end-color:var(--line-2);
}
.nav-in{display:flex;align-items:center;gap:var(--s5);min-block-size:var(--nav-h)}
/* flex:none idi; dar ekranda marka daralmayınca menü düğmesini ekran DIŞINA itiyordu
   (390px viewport'ta düğme x=456'ya düşüyordu). Marka artık daralabilir. */
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);min-inline-size:0}
.brand>span{min-inline-size:0;overflow:hidden}
.brand-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand:hover{color:var(--ink)}
.brand-mark{inline-size:30px;block-size:30px;flex:none;color:var(--madder)}
.brand-name{
  font-family:var(--font-display);font-size:20px;font-weight:var(--w-semibold);
  letter-spacing:var(--track-snug);line-height:1;
}
.brand-sub{
  display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--ink-3);margin-block-start:3px;
}
.nav-links{display:flex;gap:clamp(10px,1.8vw,26px);margin-inline-start:auto;align-items:center}
.nav-links>a{
  color:var(--ink-2);font-size:var(--t-sm);font-weight:var(--w-medium);
  position:relative;padding-block:8px;letter-spacing:var(--track-snug);
}
.nav-links>a::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:1.5px;
  background:var(--madder);transform:scaleX(0);transform-origin:inline-start;
  transition:transform var(--dur) var(--ease-expo);
}
.nav-links>a:hover,.nav-links>a[aria-current]{color:var(--ink)}
.nav-links>a:hover::after,.nav-links>a[aria-current]::after{transform:scaleX(1)}
.nav-end{display:flex;align-items:center;gap:var(--s3);margin-inline-start:var(--s5)}
.nav-toggle{display:none}

/* Tema düğmesi */
.theme-btn{
  inline-size:40px;block-size:40px;display:grid;place-items:center;flex:none;
  background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--ink-2);cursor:pointer;transition:all var(--dur-fast) var(--ease-expo);
}
.theme-btn:hover{color:var(--ink);border-color:var(--line-strong)}
.theme-btn svg{inline-size:17px;block-size:17px;stroke:currentColor;fill:none;stroke-width:1.6}
.theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:block}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .i-sun{display:block}
  :root:not([data-theme="light"]) .theme-btn .i-moon{display:none}
}

/* Mobil çekmece */
@media (max-width:480px){
  .brand-sub{display:none}
  .brand-name{font-size:18px}
}
@media (max-width:900px){
  /* Zemin ŞART: hero'nun parlak karesinde saydam düğmenin beyaz ikonu kayboluyordu.
     Kendi cam zeminini taşır, arkasında ne olursa olsun okunur. */
  .nav-toggle{
    display:grid;place-items:center;inline-size:44px;block-size:44px;margin-inline-start:auto;
    background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
    border:1px solid var(--line-strong);border-radius:var(--r-sm);
    color:var(--ink);cursor:pointer;
  }
  .nav-toggle svg{inline-size:19px;block-size:19px;stroke:currentColor;fill:none;stroke-width:1.7}
  .nav-links,.nav-end{
    position:fixed;inset-block-start:var(--nav-h);inset-inline:0;flex-direction:column;
    align-items:stretch;gap:0;margin:0;padding:var(--s4) var(--gutter);
    background:var(--paper);border-block-end:1px solid var(--line);
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity var(--dur) var(--ease-expo),transform var(--dur) var(--ease-expo),visibility var(--dur);
  }
  .nav-end{inset-block-start:auto;position:static;flex-direction:row;flex-wrap:wrap}
  .nav.is-open .nav-links{transform:none;opacity:1;visibility:visible;overflow-y:auto;max-block-size:calc(100svh - var(--nav-h))}
  .nav.is-open{background:var(--paper);border-block-end-color:var(--line)}
  .nav-links>a{padding-block:14px;border-block-end:1px solid var(--line-2);font-size:var(--t-md)}
  .nav-links>a::after{display:none}
}

/* ── 8. BUTONLAR ─────────────────────────────────────────────────────────── */
/* Hiyerarşi: solid (kökboya) → outline → ghost. Hover = 1px yükselme + gölge
   derinleşmesi; tıklama = geri oturma. Ölçek pompalama yok. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-body);font-size:var(--t-sm);font-weight:var(--w-semibold);
  letter-spacing:var(--track-snug);line-height:1;text-align:center;
  padding:15px 26px;min-block-size:48px;border:1px solid transparent;border-radius:var(--r-sm);
  cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--dur-fast) var(--ease-expo),box-shadow var(--dur-fast) var(--ease-expo),
             background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);
}
.btn svg{inline-size:16px;block-size:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8}
.btn:active{transform:translateY(0)}

.btn-primary{background:var(--madder);color:var(--ink-inv);box-shadow:var(--sh-brand)}
.btn-primary:hover{background:var(--madder-deep);color:var(--ink-inv);transform:translateY(-2px);box-shadow:0 20px 46px -14px rgba(178,59,34,.58)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-outline:hover{color:var(--madder);border-color:var(--madder);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink-2);padding-inline:14px}
.btn-ghost:hover{color:var(--ink);background:var(--paper-3)}
.btn-inv{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-inv:hover{background:var(--madder);border-color:var(--madder);color:var(--ink-inv);transform:translateY(-2px)}
.btn-lg{font-size:var(--t-md);padding:18px 34px;min-block-size:56px}
.btn-sm{font-size:var(--t-xs);padding:10px 16px;min-block-size:38px}
/* Dokunmatikte parmak hedefi: 44px altı düğme ve çip-bağlantı bırakılmaz. */
a.chip,.chip[href],[role="tab"]{min-block-size:40px}
@media (pointer:coarse){
  .btn-sm{min-block-size:44px;padding-inline:18px}
  a.chip,.chip[href],[role="tab"]{min-block-size:44px}
}
.btn-block{inline-size:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn.is-busy{pointer-events:none;color:transparent}
.btn.is-busy::after{ /* projeye özel yükleniyor: dokuma çizgisi, jenerik spinner değil */
  content:"";position:absolute;inset-inline:18%;inset-block-start:calc(50% - 1px);block-size:2px;
  background:linear-gradient(90deg,transparent,currentColor,transparent);color:var(--ink-inv);
  animation:shuttle 1.1s var(--ease-inout) infinite;
}
@keyframes shuttle{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}

/* ── 9. İMZA: ÖLÇÜM KATMANI ─────────────────────────────────────────────── */
/* Ürünün yaptığı iş görünür hâle gelir: enstrüman çizgisi görselin üzerinden
   geçer, ölçü etiketleri kendini çizer. Sayfa boyunca TEK dil. */
.measure{position:relative;overflow:hidden}
.measure::after{ /* tarama çizgisi — görünür alana girince bir kez geçer */
  content:"";position:absolute;inset-inline:-4%;inset-block-start:-14%;block-size:16%;
  z-index:3;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--steel-soft) 40%,var(--madder) 52%,var(--steel-soft) 62%,transparent);
  mix-blend-mode:screen;filter:blur(1px);
}
.measure.in-view::after{animation:sweep var(--dur-cine) var(--ease-inout) .15s 1 forwards}
@keyframes sweep{
  0%{opacity:0;transform:translateY(0)}
  10%{opacity:.85} 84%{opacity:.85}
  100%{opacity:0;transform:translateY(760%)}
}
/* Ölçü etiketi — mono, enstrüman rengi, ince çerçeve */
.tag{
  position:absolute;z-index:4;display:inline-flex;align-items:center;gap:7px;
  padding:7px 11px;border-radius:var(--r-xs);
  background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line);box-shadow:var(--sh-sm);
  font-family:var(--font-mono);font-size:var(--t-3xs);letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap;
  opacity:0;transform:translateY(6px);
}
.tag b{color:var(--ink);font-weight:var(--w-medium);font-variant-numeric:tabular-nums}
/* Fotoğrafın ÜSTÜNDE duran etiket: açık zeminli bir karede cam etiket kayboluyordu.
   Medya üstünde kontrast fotoğrafa bırakılmaz — kendi koyu zeminini taşır. */
.media-tag{background:rgba(14,12,9,.72);border-color:rgba(243,239,230,.16);color:rgba(243,239,230,.82);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
.media-tag b{color:#fbf8f1}
.tag::before{content:"";inline-size:5px;block-size:5px;border-radius:var(--r-pill);background:var(--steel);flex:none}
.tag-brand::before{background:var(--madder)}
.in-view .tag{animation:tagIn var(--dur-slow) var(--ease-expo) forwards}
.in-view .tag:nth-of-type(2){animation-delay:.9s}
.in-view .tag:nth-of-type(3){animation-delay:1.15s}
.in-view .tag:nth-of-type(4){animation-delay:1.4s}
@keyframes tagIn{to{opacity:1;transform:none}}
/* Kendini çizen ölçü oku (SVG stroke-dashoffset) */
.rule-line{stroke:var(--madder);stroke-width:1.25;fill:none;
  stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400)}
.in-view .rule-line{animation:draw 1.3s var(--ease-expo) .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ── 10. MEDYA — görseller "yerleştirilmiş" değil, küratörlü ─────────────── */
.media{position:relative;overflow:hidden;background:var(--paper-3);border-radius:var(--r)}
.media img,.media video{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.media-4x3{aspect-ratio:4/3} .media-3x2{aspect-ratio:3/2}
.media-1x1{aspect-ratio:1/1} .media-4x5{aspect-ratio:4/5} .media-16x9{aspect-ratio:16/9}
.media-frame{border:1px solid var(--line);box-shadow:var(--sh-lg)}
.media-scrim::after{content:"";position:absolute;inset:0;background:var(--scrim);pointer-events:none}
.media-zoom img{transition:transform var(--dur-cine) var(--ease-expo);will-change:transform}
.media-zoom:hover img{transform:scale(1.045)}
/* Tam taşma: içerik genişliğinden taşar, kenarlara dayanır */
.bleed{inline-size:100vw;margin-inline-start:50%;transform:translateX(-50%)}

/* Video çerçevesi — poster üstünde oynat düğmesi, tıklayınca gerçek video yüklenir */
.video{position:relative;background:var(--ink);border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.video img{inline-size:100%;display:block;object-fit:cover}
.video-play{
  position:absolute;inset:0;inline-size:100%;display:grid;place-items:center;
  background:transparent;border:0;cursor:pointer;color:var(--ink-inv);
}
.video-play span{
  display:grid;place-items:center;inline-size:78px;block-size:78px;border-radius:var(--r-pill);
  background:var(--madder);box-shadow:var(--sh-brand);
  transition:transform var(--dur) var(--ease-spring);
}
.video-play:hover span{transform:scale(1.07)}
.video-play svg{inline-size:26px;block-size:26px;fill:currentColor;stroke:none;margin-inline-start:4px}
.video-play::after{
  content:attr(data-label);position:absolute;inset-block-end:var(--s5);inset-inline-start:var(--s5);
  font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:var(--track-wider);
  text-transform:uppercase;color:var(--ink-inv);text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.video.is-playing .video-play{display:none}

/* ── 11. ÖNCESİ / SONRASI SÜRGÜSÜ ────────────────────────────────────────── */
/* Sayfanın en ikna edici parçası: kanıt. Klavye ile de sürülebilir (range input). */
.ba{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);
  box-shadow:var(--sh-lg);background:var(--paper-3);touch-action:pan-y;--x:50%}
.ba>img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
.ba>img.ba-after{clip-path:inset(0 0 0 var(--x))}
/* Yükseklik veren kare: MUTLAK DEĞİL. `.ba>img` kuralı bunu da absolute yapıyordu ve
   aspect-ratio verilmemiş her .ba (galeri rayı) sıfır yükseklikte kalıyordu.
   Seçici `.ba>img.ba-sizer` olmalı: yalın `.ba-sizer` (0,1,0) `.ba>img`'den (0,1,1) ZAYIF
   kalıyor ve position/block-size geçersizleşiyordu. Bu, ilk düzeltmenin işe yaramama sebebiydi. */
.ba>img.ba-sizer{position:relative;inline-size:100%;block-size:auto;display:block;visibility:hidden;object-fit:fill}
/* Görsel hiç inmezse kutu çökmesin (yerinde boşluk kalsın, düzen zıplamasın). */
.ba{min-block-size:180px}
.ba-handle{
  position:absolute;inset-block:0;inset-inline-start:var(--x);inline-size:2px;
  background:var(--paper);box-shadow:0 0 0 1px rgba(0,0,0,.28);z-index:2;pointer-events:none;
}
.ba-handle::after{
  content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;
  inline-size:46px;block-size:46px;transform:translate(-50%,-50%);border-radius:var(--r-pill);
  background:var(--paper);box-shadow:var(--sh);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b23b22' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M9 6 5 12l4 6M15 6l4 6-4 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:22px;
}
.ba-range{
  position:absolute;inset:0;inline-size:100%;block-size:100%;z-index:3;
  margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent;
}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;inline-size:52px;block-size:100%}
.ba-range::-moz-range-thumb{inline-size:52px;block-size:100%;border:0;background:transparent}
.ba-range:focus-visible{outline:2px solid var(--madder);outline-offset:2px}
.ba-lbl{
  position:absolute;inset-block-end:var(--s4);z-index:2;pointer-events:none;
  font-family:var(--font-mono);font-size:var(--t-3xs);letter-spacing:var(--track-wider);
  text-transform:uppercase;padding:6px 10px;border-radius:var(--r-xs);
  background:rgba(23,21,15,.62);color:#f6f3ec;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.ba-lbl-a{inset-inline-start:var(--s4)} .ba-lbl-b{inset-inline-end:var(--s4)}

/* ── 12. YATAY GALERİ — sayfa ritmini kıran tek bölüm ───────────────────── */
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,440px);gap:var(--s5);
  overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;
  padding-block-end:var(--s4);padding-inline:var(--gutter);
  margin-inline:calc(var(--gutter) * -1);
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
}
.rail>*{scroll-snap-align:start}
/* Rayda kartlar HİZALI durmalı: kaynak fotoğraflar farklı oranlarda geliyor (1080×1440 ↔ 905×1024)
   ve doğal yükseklik bırakılırsa alt yazılar birbirini tutmuyor. Rayda oranı biz dayatırız,
   yükseklik veren kare devre dışı kalır. */
.rail .ba{aspect-ratio:4/5;min-block-size:0}
.rail .ba>img.ba-sizer{position:absolute}
.rail::-webkit-scrollbar{block-size:5px}
.rail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--r-pill)}
.rail::-webkit-scrollbar-track{background:var(--line-2)}
.rail-nav{display:flex;gap:var(--s2);margin-block-start:var(--s5)}
.rail-btn{
  inline-size:44px;block-size:44px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  color:var(--ink);cursor:pointer;transition:all var(--dur-fast) var(--ease-expo);
}
.rail-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.rail-btn[disabled]{opacity:.3;pointer-events:none}
.rail-btn svg{inline-size:17px;block-size:17px;stroke:currentColor;fill:none;stroke-width:1.7}

/* ── 13. KARTLAR ─────────────────────────────────────────────────────────── */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s6);position:relative;box-shadow:var(--sh-sm);
}
.card-link{
  display:block;color:inherit;
  transition:transform var(--dur) var(--ease-expo),box-shadow var(--dur) var(--ease-expo),border-color var(--dur);
}
.card-link:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--madder-line);color:inherit}
.card-flat{background:transparent;box-shadow:none;border-color:var(--line-2)}
.card-feature{border-color:var(--madder-line);background:var(--card)}
.card-feature::before{
  content:"";position:absolute;inset-block-start:-1px;inset-inline:-1px;block-size:2px;
  background:var(--madder);border-start-start-radius:var(--r);border-start-end-radius:var(--r);
}
.card h3{margin-block-end:var(--s3)}
.card p{color:var(--ink-2)}
.card-ico{
  inline-size:42px;block-size:42px;display:grid;place-items:center;margin-block-end:var(--s5);
  border:1px solid var(--line);border-radius:var(--r-sm);color:var(--madder);background:var(--madder-soft);
}
.card-ico svg{inline-size:20px;block-size:20px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* Izgara/esnek çocukların otomatik en küçük genişliği (min-width:auto) kolonun içerikten
   daha dar olmasını engelliyor; 500px'te .editorial kabı 450px iken kolon 496px hesaplanıyor
   ve sayfa 21px yatay taşıyordu. Kural: bu kapların çocukları DARALABİLİR. */
.grid>*,.editorial>*,.bento>*,.pin>*,.packs>*,.stats>*,.hscene-track>*,.grid-form>*{min-inline-size:0}
.plat,.chip{max-inline-size:100%}

.grid{display:grid;gap:var(--s5)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
/* Form ızgarası ayrı: 320px'lik kart eşiği dar kartın içinde iki kolonu düşürüyordu
   (820px kabuk − iç boşluk = 634px < 2×320+16). Alan kutuları daha erken ikiye ayrılır. */
.grid-form{grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}

/* Bento hücresi — çapa hücre görsel taşır, ötekiler ikon + iki satır */
.cell{display:flex;flex-direction:column;padding:var(--s5)}
.cell h3{font-family:var(--font-body);font-size:var(--t-md);font-weight:var(--w-semibold);
  letter-spacing:var(--track-snug);margin-block-end:6px}
.cell p{font-size:var(--t-sm)}
.cell .card-ico{margin-block-end:var(--s4)}
/* Çapa hücrenin görseli hücreyi ele geçirmesin: yükseklik SINIRLI, metne yer kalır. */
.cell-media{margin:calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s5);border-radius:0;
  flex:0 0 auto;block-size:clamp(180px,22vw,260px)}
.cell-media img{block-size:100%}
.b-hero{justify-content:flex-end}
.b-hero .card-ico{display:none}
.b-hero h3{font-family:var(--font-display);font-size:var(--t-lg);font-weight:var(--w-medium);
  letter-spacing:var(--track-tight)}

/* Bento — eşit hücre yığını değil, hiyerarşi */
/* dense: geniş hücrelerden artan boşluğu sonraki küçük hücreler doldurur,
   yoksa satır sonlarında kocaman delikler kalıyor. */
.bento{display:grid;gap:var(--s4);grid-template-columns:repeat(6,1fr);grid-auto-flow:row dense}
.bento>*{grid-column:span 2}
.bento>.b-wide{grid-column:span 3}
.bento>.b-hero{grid-column:span 4;grid-row:span 2}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento>*,.bento>.b-wide{grid-column:span 1}
  .bento>.b-hero{grid-column:span 2;grid-row:span 1}
}
@media (max-width:520px){.bento{grid-template-columns:1fr}.bento>.b-hero{grid-column:span 1}}

/* ── 14. EDİTORYAL DÜZEN — kasıtlı asimetri (5:3:4, eşit kolon DEĞİL) ────── */
.editorial{display:grid;gap:clamp(var(--s6),5vw,var(--s10));grid-template-columns:5fr 4fr;align-items:start}
.editorial-r{grid-template-columns:4fr 5fr}
.editorial .off{padding-block-start:clamp(0px,6vw,var(--s12))} /* taban hizası kasıtlı kaydırılır */
@media (max-width:900px){.editorial,.editorial-r{grid-template-columns:1fr}.editorial .off{padding-block-start:0}}

/* Adım listesi — numaralar display fontta, dev ve soluk */
.steps{display:grid;gap:var(--s8);counter-reset:adim}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:start}
.step::before{
  counter-increment:adim;content:counter(adim,decimal-leading-zero);
  font-family:var(--font-display);font-size:clamp(38px,5vw,62px);line-height:.8;
  color:transparent;-webkit-text-stroke:1px var(--line-strong);font-weight:var(--w-medium);
}
.step h3{margin-block-end:var(--s2)}
.step p{color:var(--ink-2);max-inline-size:46ch}

/* Devasa filigran — bölüm ayracı olarak tipografi */
.watermark{
  position:absolute;inset-inline:0;inset-block-start:var(--wm-top,4%);z-index:-1;
  overflow:hidden;pointer-events:none;user-select:none;line-height:1;
}
.watermark span{
  display:block;white-space:nowrap;font-family:var(--font-display);font-weight:var(--w-semibold);
  font-size:clamp(110px,19vw,290px);letter-spacing:var(--track-tight);
  color:transparent;-webkit-text-stroke:1px var(--line-2);will-change:transform;
}

/* ── 15. İSTATİSTİK ŞERİDİ ───────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  border-block:1px solid var(--line)}
.stat{padding:var(--s6) var(--s5);border-inline-end:1px solid var(--line)}
.stat:last-child{border-inline-end:0}
.stat .v{font-family:var(--font-display);font-size:var(--t-xl);font-weight:var(--w-medium);
  line-height:1;letter-spacing:var(--track-tight);display:block}
.stat .v small{font-size:.5em;color:var(--ink-3);margin-inline-start:4px;font-family:var(--font-body)}
.stat .k{display:block;margin-block-start:10px;font-family:var(--font-mono);font-size:var(--t-3xs);
  letter-spacing:var(--track-wider);text-transform:uppercase;color:var(--ink-3)}
@media (max-width:640px){.stat{border-inline-end:0;border-block-end:1px solid var(--line-2)}}

/* ── 16. SEKMELER ────────────────────────────────────────────────────────── */
.tabs{display:flex;gap:var(--s1);border-block-end:1px solid var(--line);margin-block-end:var(--s8);
  overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  background:transparent;border:0;border-block-end:2px solid transparent;
  padding:14px 20px;cursor:pointer;color:var(--ink-3);white-space:nowrap;
  font-size:var(--t-sm);font-weight:var(--w-semibold);letter-spacing:var(--track-snug);
  transition:color var(--dur-fast),border-color var(--dur-fast);margin-block-end:-1px;
}
.tab:hover{color:var(--ink-2)}
.tab[aria-selected="true"]{color:var(--ink);border-block-end-color:var(--madder)}
.tabpanel[hidden]{display:none}

/* ── 17. SSS — details/summary, JS'siz de çalışır ────────────────────────── */
.faq{border-block-start:1px solid var(--line)}
.faq details{border-block-end:1px solid var(--line)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding-block:var(--s5);cursor:pointer;list-style:none;
  font-size:var(--t-md);font-weight:var(--w-medium);color:var(--ink);
  transition:color var(--dur-fast);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--madder)}
.faq summary::after{
  content:"";inline-size:13px;block-size:13px;flex:none;border-inline-end:1.5px solid currentColor;
  border-block-end:1.5px solid currentColor;transform:rotate(45deg) translate(-3px,-3px);
  transition:transform var(--dur) var(--ease-expo);
}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq details[open] summary{color:var(--madder)}
.faq .ans{padding-block-end:var(--s5);color:var(--ink-2);max-inline-size:var(--max-prose)}

/* ── 18. FORMLAR ─────────────────────────────────────────────────────────── */
.field{display:block;margin-block-end:var(--s5)}
.field>span{display:block;font-size:var(--t-sm);font-weight:var(--w-semibold);margin-block-end:8px;color:var(--ink)}
.field .hint{display:block;font-weight:var(--w-regular);color:var(--ink-3);font-size:var(--t-xs);margin-block-start:6px}
.input,.select,.textarea{
  inline-size:100%;padding:14px 16px;min-block-size:48px;
  background:var(--card);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast);
}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--madder);box-shadow:0 0 0 3px var(--madder-soft);
}
.textarea{min-block-size:130px;resize:vertical;line-height:var(--lead-normal)}
.select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857e68' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-inline-end:44px}
.field.is-bad .input,.field.is-bad .select,.field.is-bad .textarea{border-color:var(--bad)}
.err{color:var(--bad);font-size:var(--t-xs);margin-block-start:6px;display:block}
.check{display:flex;gap:11px;align-items:flex-start;cursor:pointer;font-size:var(--t-sm);color:var(--ink-2)}
.check{min-block-size:44px;align-items:center}
.check input{inline-size:22px;block-size:22px;flex:none;accent-color:var(--madder)}

/* Uyarı kutuları */
.note{padding:var(--s4) var(--s5);border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--card-2);font-size:var(--t-sm);color:var(--ink-2)}
.note-ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ink)}
.note-bad{border-color:var(--bad);background:var(--bad-bg);color:var(--ink)}
.note-warn{border-color:var(--warn);background:var(--warn-bg);color:var(--ink)}

/* ── 19. ROZET / ÇİP ─────────────────────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:7px 13px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);
  font-family:var(--font-mono);font-size:var(--t-3xs);letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--ink-2);
}
.chip b{color:var(--ink);font-weight:var(--w-medium)}
.chip-brand{border-color:var(--madder-line);color:var(--madder);background:var(--madder-soft)}
.chip-live::before{content:"";inline-size:6px;block-size:6px;border-radius:var(--r-pill);
  background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg);flex:none}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* ── 20. FİYAT ───────────────────────────────────────────────────────────── */
.price-card{display:flex;flex-direction:column;gap:var(--s4)}
.amount{font-family:var(--font-display);font-size:var(--t-2xl);line-height:1;
  letter-spacing:var(--track-tight);font-weight:var(--w-medium)}
.amount small{font-family:var(--font-body);font-size:var(--t-sm);color:var(--ink-3);
  font-weight:var(--w-regular);letter-spacing:var(--track-normal)}
.price-card .was{color:var(--ink-3);text-decoration:line-through;font-size:var(--t-sm)}
.price-list{display:grid;gap:11px;margin-block:var(--s2);padding:0;list-style:none}
.price-list li{display:flex;gap:11px;align-items:flex-start;font-size:var(--t-sm);color:var(--ink-2)}
.price-list li::before{
  content:"";inline-size:15px;block-size:15px;flex:none;margin-block-start:3px;
  background:var(--madder);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ── 20b. ÖDEME FORMU ────────────────────────────────────────────────────
   `.err` ve `.prog` betiğin innerHTML'iyle basılır (views/payment/card.php) —
   sınıf adları SİLİNEMEZ. */
.pay-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s3)}
@media (max-width:420px){.pay-row{grid-template-columns:1fr 1fr}.pay-row>:last-child{grid-column:1/-1}}
.pan{font-family:var(--font-mono);letter-spacing:.06em}
.field .hint{min-block-size:18px}
.err{color:var(--bad);font-weight:var(--w-medium)}
.prog{color:var(--ok);font-weight:var(--w-semibold)}

/* ── 21. TABLO ───────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
table.tbl{inline-size:100%;border-collapse:collapse;font-size:var(--t-sm)}
table.tbl th,table.tbl td{padding:14px 18px;text-align:start;border-block-end:1px solid var(--line-2)}
table.tbl th{font-family:var(--font-mono);font-size:var(--t-3xs);letter-spacing:var(--track-wider);
  text-transform:uppercase;color:var(--ink-3);font-weight:var(--w-regular);background:var(--card-2)}
table.tbl tr:last-child td{border-block-end:0}
table.tbl td b{font-weight:var(--w-semibold)}

/* ── 22. BOŞ DURUM ───────────────────────────────────────────────────────── */
.empty{text-align:center;padding:var(--s12) var(--s5);border:1px dashed var(--line-strong);
  border-radius:var(--r);background:var(--card-2)}
.empty svg{inline-size:52px;block-size:52px;margin-inline:auto;margin-block-end:var(--s5);
  color:var(--ink-3);stroke:currentColor;fill:none;stroke-width:1.2}
.empty h3{margin-block-end:var(--s2)}
.empty p{color:var(--ink-2);max-inline-size:44ch;margin-inline:auto;margin-block-end:var(--s5)}

/* ── 23. YÜKLENİYOR — gerçek yerleşimi yansıtan iskelet ──────────────────── */
.skel{background:linear-gradient(90deg,var(--paper-2) 25%,var(--paper-3) 50%,var(--paper-2) 75%);
  background-size:220% 100%;animation:shimmer 1.6s var(--ease-inout) infinite;border-radius:var(--r-sm)}
@keyframes shimmer{from{background-position:220% 0}to{background-position:-220% 0}}

/* ── 24. PROSE — /rehber yazıları ────────────────────────────────────────── */
.prose{max-inline-size:var(--max-prose);font-size:var(--t-md);line-height:var(--lead-relaxed);color:var(--ink-2)}
.prose>*+*{margin-block-start:var(--s5)}
.prose h2{font-size:var(--t-xl);color:var(--ink);margin-block-start:var(--s10)}
.prose h3{font-size:var(--t-lg);color:var(--ink);margin-block-start:var(--s8)}
.prose ul,.prose ol{padding-inline-start:var(--s5);display:grid;gap:10px}
.prose li{padding-inline-start:4px}
.prose li::marker{color:var(--madder)}
.prose strong{color:var(--ink);font-weight:var(--w-semibold)}
.prose blockquote{border-inline-start:2px solid var(--madder);padding-inline-start:var(--s5);
  font-family:var(--font-display);font-size:var(--t-lg);color:var(--ink);line-height:var(--lead-snug)}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose img{border-radius:var(--r);border:1px solid var(--line)}
.prose figcaption{font-size:var(--t-xs);color:var(--ink-3);margin-block-start:8px}
/* Makale gövdelerinde kullanılan iki kalıp (views/rehber/*.php): vurgu kutusu ve ikili görsel */
.prose .kutu{background:var(--card-2);border:1px solid var(--line);border-inline-start:2px solid var(--madder);
  border-radius:var(--r-sm);padding:var(--s4) var(--s5);font-size:var(--t-sm)}
.prose .fig2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media (max-width:560px){.prose .fig2{grid-template-columns:1fr}}

/* ── 25. FOOTER ──────────────────────────────────────────────────────────── */
.foot{border-block-start:1px solid var(--line);padding-block:var(--s10) var(--s6);margin-block-start:var(--s12)}
.foot-grid{display:grid;gap:var(--s8);grid-template-columns:minmax(0,2fr) repeat(auto-fit,minmax(150px,1fr))}
.foot h4{font-family:var(--font-mono);font-size:var(--t-3xs);letter-spacing:var(--track-wider);
  text-transform:uppercase;color:var(--ink-3);font-weight:var(--w-regular);margin-block-end:var(--s4)}
.foot ul{list-style:none;display:grid;gap:11px}
.foot ul a{color:var(--ink-2);font-size:var(--t-sm)}
.foot ul a:hover{color:var(--madder)}
.foot-bar{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;align-items:center;
  margin-block-start:var(--s8);padding-block-start:var(--s5);border-block-start:1px solid var(--line-2);
  font-size:var(--t-xs);color:var(--ink-3)}

/* ── 26. MOBİL YAPIŞKAN CTA ──────────────────────────────────────────────── */
.sticky-cta{
  position:fixed;inset-inline:0;inset-block-end:0;z-index:var(--z-sticky);display:none;
  padding:12px var(--gutter) max(12px,env(safe-area-inset-bottom));
  background:var(--glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-block-start:1px solid var(--line);
  transform:translateY(110%);transition:transform var(--dur) var(--ease-expo);
}
.sticky-cta.on{transform:none}
@media (max-width:820px){.sticky-cta{display:block}body{padding-block-end:78px}}

/* ── 27. HAREKET — girişler ──────────────────────────────────────────────── */
/* KURAL: yalnız js varken gizle. JS düşerse/robot okursa içerik DAİMA görünür. */
.js [data-rise]{opacity:0;transform:translateY(26px);
  transition:opacity var(--dur-slow) var(--ease-expo),transform var(--dur-slow) var(--ease-expo)}
.js [data-rise].in-view{opacity:1;transform:none}
.js [data-rise="2"]{transition-delay:.09s}
.js [data-rise="3"]{transition-delay:.18s}
.js [data-rise="4"]{transition-delay:.27s}
.js [data-rise="5"]{transition-delay:.36s}
/* Perde açılışı — görsel maskeden açılır (lüks/editoryal dil) */
.js [data-curtain]{clip-path:inset(0 0 100% 0);
  transition:clip-path var(--dur-cine) var(--ease-inout)}
.js [data-curtain].in-view{clip-path:inset(0 0 0 0)}
/* Satır satır açılan başlık */
/* overflow:hidden satırı maskeler ama Bodoni'nin italik kuyruklarını da keser →
   alta nefes payı bırakılır, aynı kadar da yukarı toplanır (satır arası bozulmaz). */
/* overflow:hidden satırı maskeler ama Bodoni'nin çıkıntı ve kuyruklarını da keser.
   Didone'de bu pay küçük olamaz: 118px'te .12em yetmedi, üçüncü satır kesiliyordu.
   Payı verip aynı kadar geri toplarız — satır arası aynen korunur. */
.js [data-lines] .ln{display:block;overflow:hidden;padding-block:.2em .24em;margin-block:-.2em -.24em}
.js [data-lines] .ln>span{display:block;transform:translateY(105%);
  transition:transform var(--dur-slow) var(--ease-expo)}
.js [data-lines].in-view .ln>span{transform:none}
.js [data-lines].in-view .ln:nth-child(2)>span{transition-delay:.1s}
.js [data-lines].in-view .ln:nth-child(3)>span{transition-delay:.2s}

/* ── 28. ERİŞİLEBİLİRLİK — hareket azaltma ZORUNLU ──────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js [data-rise],.js [data-curtain],.js [data-lines] .ln>span{opacity:1;transform:none;clip-path:none}
  .measure::after{display:none}
  .tag{opacity:1;transform:none}
  .rule-line{stroke-dashoffset:0}
}
@media print{
  .nav,.sticky-cta,.atmos,.rail-nav,.theme-btn,.video-play{display:none !important}
  body{background:#fff;color:#000}
}

/* ═══════════════════════════════════════════════════════════════════════════
   SAYFA: "/" — satış vitrini
   Sayfaya özgü yerleşimler de BU dosyada durur; ikinci bir stil kaynağı açmak
   tam olarak eski hâlin (beş kopya) hatasıydı.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero: başlık tam genişlikte (dergi manşeti), altı ASİMETRİK ────────────
   Klişeden kaçış: "solda metin sağda resim" değil. Manşet tüm genişliği alır,
   ardından 4:5 bölünür ve görsel ızgaranın DIŞINA taşar (kasıtlı kırık). */
.hero{padding-block:calc(var(--nav-h) + clamp(48px,9vh,104px)) clamp(var(--s10),9vw,var(--s16));position:relative}
.hero-title{margin-block-end:clamp(var(--s6),4vw,var(--s10))}
.hero-title h1{font-size:var(--t-hero);max-inline-size:15ch;font-weight:var(--w-medium);line-height:1.08}
.hero-title h1 em{font-style:italic;color:var(--madder)}
.hero-body{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:clamp(var(--s6),4vw,var(--s10));align-items:start}
.hero-copy{padding-block-start:var(--s2)}
.hero-copy .lead{font-size:var(--t-md);margin-block-end:var(--s6)}
.hero-copy .btn-row{margin-block-end:var(--s6)}
.hero-media{position:relative;margin-block-start:clamp(-28px,-2vw,0px)} /* ızgara kırıcı — manşete değmeyecek kadar */
.hero-media .ba{aspect-ratio:4/3}
@media (max-width:900px){
  .hero-body{grid-template-columns:1fr}
  .hero-media{margin-block-start:var(--s4);order:-1}
  .hero-media .ba{aspect-ratio:3/4}
}

/* ── Film: kod ile kurulmuş ürün turu (video dosyası olmadan) ─────────────
   Üç kare gerçek üretim görselleriyle döner: oda → tarama → sonuç.
   Görünür alana girmeden BAŞLAMAZ, reduced-motion'da ilk karede durur. */
.film{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--ink);aspect-ratio:4/5;box-shadow:var(--sh-lg)}
.film img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;opacity:0}
.film .f-oda{opacity:1}
.film.run .f-oda{animation:filmOda 9s var(--ease-inout) infinite}
.film.run .f-sonuc{animation:filmSonuc 9s var(--ease-inout) infinite}
@keyframes filmOda{0%,28%{opacity:1}44%,88%{opacity:0}100%{opacity:1}}
@keyframes filmSonuc{0%,30%{opacity:0}46%,86%{opacity:1}100%{opacity:0}}
.film-scan{position:absolute;inset-inline:-6%;inset-block-start:-16%;block-size:18%;opacity:0;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(111,189,177,.42) 42%,var(--madder) 52%,rgba(111,189,177,.42) 62%,transparent);
  mix-blend-mode:screen;filter:blur(1.5px)}
.film.run .film-scan{animation:filmScan 9s var(--ease-inout) infinite}
@keyframes filmScan{0%,26%{opacity:0;transform:translateY(0)}30%{opacity:1}44%{opacity:1}
  46%{opacity:0;transform:translateY(660%)}100%{opacity:0;transform:translateY(660%)}}
.film-hud{position:absolute;inset-block-end:0;inset-inline:0;z-index:3;padding:var(--s5);
  background:var(--scrim);display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.film-hud .mono{color:#f3efe6;font-size:var(--t-3xs)}
.film-step{display:flex;gap:6px;margin-inline-start:auto}
.film-step i{inline-size:22px;block-size:2px;background:rgba(243,239,230,.3);border-radius:var(--r-pill)}
.film.run .film-step i:nth-child(1){animation:filmDot 9s linear infinite}
.film.run .film-step i:nth-child(2){animation:filmDot 9s linear infinite;animation-delay:2.6s}
.film.run .film-step i:nth-child(3){animation:filmDot 9s linear infinite;animation-delay:4.2s}
@keyframes filmDot{0%,2%{background:var(--madder)}28%{background:var(--madder)}30%,100%{background:rgba(243,239,230,.3)}}
@media (prefers-reduced-motion:reduce){
  .film.run .f-oda,.film.run .f-sonuc,.film.run .film-scan,.film.run .film-step i{animation:none}
  .film .f-sonuc{opacity:1}
}

/* ── Kod bloğu — kurulum satırı ──────────────────────────────────────────── */
.code{position:relative;background:var(--slab);border-radius:var(--r);padding:var(--s6) var(--s5);
  border:1px solid var(--line);overflow-x:auto}
.code pre{font-family:var(--font-mono);font-size:var(--t-xs);line-height:1.8;color:#cfc7b6;white-space:pre}
.code .c-tag{color:#e0916a} .code .c-attr{color:#8fc4bb} .code .c-val{color:#d9cf9a}
.code-copy{position:absolute;inset-block-start:var(--s3);inset-inline-end:var(--s3)}
.code-copy .btn{background:rgba(243,239,230,.09);color:#f3efe6;border-color:rgba(243,239,230,.18)}
.code-copy .btn:hover{background:var(--madder);border-color:var(--madder);color:var(--ink-inv)}

/* Platform listesi — logo yerine düz tipografi (uydurma logo basmaktan iyidir) */
.plats{display:flex;flex-wrap:wrap;gap:var(--s2)}
.plat{padding:9px 15px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:var(--t-sm);font-weight:var(--w-medium);color:var(--ink-2);background:var(--card)}

/* Onay listesi */
.checks{list-style:none;display:grid;gap:var(--s3);margin-block-start:var(--s5)}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-sm);color:var(--ink-2)}
.checks li svg{inline-size:17px;block-size:17px;flex:none;margin-block-start:3px;
  stroke:var(--madder);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.checks b{color:var(--ink);font-weight:var(--w-semibold)}

/* Görselsiz sektör paneli — yer tutucu fotoğraf yerine markanın kendi ölçüm dili */
.media-blank{display:grid;place-items:center;background:var(--paper-2);
  background-image:linear-gradient(90deg,var(--line-2) 1px,transparent 1px),
                   linear-gradient(0deg,var(--line-2) 1px,transparent 1px);
  background-size:28px 28px}
.media-blank span{font-family:var(--font-display);font-size:clamp(56px,7vw,88px);
  line-height:1;color:transparent;-webkit-text-stroke:1px var(--line-strong)}

/* Sektör kartı */
.vert{position:relative;display:flex;flex-direction:column;overflow:hidden}
.vert .media{border-radius:0;margin:calc(var(--s6) * -1) calc(var(--s6) * -1) var(--s5)}
.vert-state{position:absolute;inset-block-start:var(--s4);inset-inline-end:var(--s4);z-index:2}
.vert h3{margin-block-end:var(--s2)}
.vert p{flex:1;margin-block-end:var(--s5)}
/* Kart içindeki eylem bağlantısı satır içi metin DEĞİL, ana çağrıdır: parmak hedefi 44px. */
.vert a{display:inline-flex;align-items:center;min-block-size:44px;
  font-size:var(--t-sm);font-weight:var(--w-semibold)}

/* Kalite kademeleri */
.tier .kredi{margin-block-start:auto;padding-block-start:var(--s4);border-block-start:1px solid var(--line-2);
  font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--ink-3)}
.tier .kredi b{color:var(--madder);font-weight:var(--w-medium)}

/* Fiyat bölümü — lisans kartı geniş, paketler ızgarada */
.pricing{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(var(--s6),4vw,var(--s10));align-items:start}
@media (max-width:980px){.pricing{grid-template-columns:1fr}}
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));gap:var(--s3)}
.pack{padding:var(--s5);border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  transition:border-color var(--dur) var(--ease-expo),transform var(--dur) var(--ease-expo)}
.pack:hover{border-color:var(--madder-line);transform:translateY(-3px)}
.pack .c{font-family:var(--font-display);font-size:var(--t-lg);line-height:1;display:block;margin-block:10px 6px}
.pack .c small{font-family:var(--font-body);font-size:var(--t-xs);color:var(--ink-3)}
.pack .p{font-size:var(--t-md);font-weight:var(--w-semibold)}
.pack .u{font-size:var(--t-xs);color:var(--ink-3);margin-block-start:4px}
.badge{position:absolute;inset-block-start:calc(var(--s5) * -1);inset-inline-start:var(--s6);
  background:var(--madder);color:var(--ink-inv);padding:7px 14px;border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:var(--t-3xs);letter-spacing:var(--track-wide);text-transform:uppercase}

/* Vaka kartı */
.vaka .d{font-family:var(--font-display);font-size:var(--t-xl);line-height:1;color:var(--madder)}
.vaka .e{font-family:var(--font-mono);font-size:var(--t-3xs);letter-spacing:var(--track-wider);
  text-transform:uppercase;color:var(--ink-3);margin-block:8px var(--s4)}
.vaka img{block-size:26px;inline-size:auto;object-fit:contain;margin-block-end:var(--s4);opacity:.8}

/* Kapanış — is zemin üstünde ters kontrast */
.final{background:var(--slab);color:var(--slab-ink);border-radius:var(--r-lg);
  padding:clamp(var(--s10),8vw,var(--s16)) var(--gutter);text-align:center;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 60% at 50% 0%,rgba(178,59,34,.28),transparent 70%)}
.final>*{position:relative}
.final h2{color:var(--slab-ink);max-inline-size:20ch;margin-inline:auto}
.final h2 em{font-style:italic;color:var(--madder)}
.final p{color:rgba(242,243,245,.74);max-inline-size:56ch;margin:var(--s5) auto var(--s8)}
.final .btn-outline{color:var(--slab-ink);border-color:rgba(242,243,245,.32)}
.final .btn-outline:hover{color:var(--slab);background:var(--slab-ink);border-color:var(--slab-ink)}

/* ═══════════════════════════════════════════════════════════════════════════
   SAYFA: "/demo" — sahte mağaza vitrini
   Bu ekran BİZİM sitemiz gibi görünmemeli; ziyaretçi bir mağazada olduğunu
   sanmalı. Bu yüzden ana navigasyon basılmaz, ince bir mağaza çubuğu kullanılır.
   Yine de tasarım sistemi ORTAKTIR — ayrı bir stil kaynağı açılmaz.
   ═══════════════════════════════════════════════════════════════════════════ */
.shop-top{border-block-end:1px solid var(--line);background:var(--card)}
.shop-top .wrap{display:flex;align-items:center;gap:var(--s4);min-block-size:64px;flex-wrap:wrap}
.shop-name{font-family:var(--font-display);font-size:20px;font-weight:var(--w-medium);letter-spacing:var(--track-snug)}
.shop-top .mono{margin-inline-start:auto;color:var(--madder)}
.shop-top .mono a{color:inherit;text-decoration:underline;text-underline-offset:3px}

.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),1fr));gap:var(--s5)}
.shop-card{display:block;color:inherit;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm);
  transition:transform var(--dur) var(--ease-expo),box-shadow var(--dur),border-color var(--dur)}
.shop-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--madder-line);color:inherit}
.shop-card .ph{overflow:hidden;background:var(--paper-3)}
.shop-card img{inline-size:100%;aspect-ratio:3/4;object-fit:cover;
  transition:transform var(--dur-cine) var(--ease-expo)}
.shop-card:hover img{transform:scale(1.045)}
.shop-card .i{padding:var(--s4)}
.shop-card b{display:block;font-size:var(--t-sm);font-weight:var(--w-semibold);line-height:1.35}
.shop-card span{display:block;margin-block-start:6px;font-family:var(--font-mono);font-size:var(--t-sm);color:var(--madder)}

.shop-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(var(--s6),4vw,var(--s10));align-items:start}
@media (max-width:760px){.shop-detail{grid-template-columns:1fr}}
.shop-detail h1{font-size:var(--t-xl)}
.shop-price{font-family:var(--font-mono);font-size:var(--t-lg);color:var(--madder);margin-block:var(--s3) var(--s1)}
.shop-img{inline-size:100%;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh-lg)}
.variant-list{display:flex;gap:9px;flex-wrap:wrap;margin-block-end:var(--s5)}
.variant-list b{border:1px solid var(--line);background:var(--card);border-radius:var(--r-pill);
  padding:9px 16px;font-weight:var(--w-medium);font-size:var(--t-sm);
  transition:border-color var(--dur-fast),color var(--dur-fast)}
.variant-list b:hover{border-color:var(--madder);color:var(--madder)}
.variant-list b.no{opacity:.42;text-decoration:line-through}
.shop-hint{display:flex;gap:14px;align-items:center;background:var(--card);
  border:1px solid var(--madder-line);border-radius:var(--r);padding:var(--s4) var(--s5);
  font-size:var(--t-sm);color:var(--ink-2);box-shadow:var(--sh-sm)}
.shop-hint b{color:var(--ink)}
.shop-hint .dot{flex:none;inline-size:38px;block-size:38px;border-radius:var(--r-pill);
  background:var(--madder);color:var(--ink-inv);display:grid;place-items:center;font-size:17px}

/* ═══════════════════════════════════════════════════════════════════════════
   SAHNE BİLEŞENLERİ — gösteri katmanı
   Hepsinin ortak kuralı: JS düşerse sayfa çalışmaya devam eder, hareket
   azaltma tercihinde tamamı susar, animasyon yalnız transform/opacity.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Açılış perdesi ──────────────────────────────────────────────────────
   İlk izlenimin 800 ms'i. Sayfa hazır olana kadar zemini kapatır, sonra
   yukarı çekilir; altındaki hero tam kadraj açılır. Tek seferlik. */
.curtain{
  position:fixed;inset:0;z-index:100;background:var(--paper);
  display:grid;place-items:center;
  transition:transform 900ms var(--ease-inout),opacity 400ms linear 600ms;
}
.curtain.done{transform:translateY(-101%);opacity:0;pointer-events:none}
.curtain-in{display:grid;justify-items:center;gap:var(--s5)}
.curtain-mark{inline-size:44px;block-size:44px;color:var(--madder);
  animation:pulse 1.6s var(--ease-inout) infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.94)}50%{opacity:1;transform:scale(1)}}
.curtain-bar{inline-size:min(46vw,220px);block-size:1px;background:var(--line);position:relative;overflow:hidden}
.curtain-bar i{position:absolute;inset:0;background:var(--madder);transform:scaleX(0);
  transform-origin:inline-start;transition:transform 700ms var(--ease-expo)}
.curtain.loading .curtain-bar i{transform:scaleX(1)}
.curtain-txt{font-family:var(--font-mono);font-size:var(--t-3xs);letter-spacing:var(--track-wider);
  text-transform:uppercase;color:var(--ink-3)}
.no-js .curtain{display:none}

/* ── Özel imleç — yalnız hassas işaretçili cihazlarda ───────────────────── */
@media (pointer:fine){
  .cursor-on,.cursor-on *{cursor:none}
  .cur{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:99;pointer-events:none;
    will-change:transform;mix-blend-mode:difference}
  .cur-dot{inline-size:7px;block-size:7px;border-radius:var(--r-pill);background:#fff;
    margin:-3.5px 0 0 -3.5px}
  .cur-ring{inline-size:38px;block-size:38px;border:1px solid rgba(255,255,255,.7);
    border-radius:var(--r-pill);margin:-19px 0 0 -19px;
    transition:width .3s var(--ease-expo),height .3s var(--ease-expo),margin .3s var(--ease-expo),
               background-color .3s,border-color .3s}
  .cur-ring.on{inline-size:64px;block-size:64px;margin:-32px 0 0 -32px;background:rgba(255,255,255,.14)}
  .cur-ring.drag{inline-size:86px;block-size:86px;margin:-43px 0 0 -43px;
    background:rgba(255,255,255,.16);border-color:transparent}
  .cur-ring::after{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;
    font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
    color:#fff;opacity:0;transition:opacity .25s}
  .cur-ring.drag::after{opacity:1}
}
@media (pointer:coarse){.cur{display:none}}

/* ── HERO — tam ekran sahne ──────────────────────────────────────────────
   Zemin renk DEĞİL, hareketli görüntüdür. Metin scrim üzerinde durur. */
.stage{position:relative;min-block-size:100svh;display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate}
.stage-bg{position:absolute;inset:0;z-index:-2}
.stage-bg img,.stage-bg video{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.js .stage-bg{transform:scale(1.06);animation:stageIn 2.4s var(--ease-expo) .35s forwards}
@keyframes stageIn{to{transform:scale(1)}}
/* İKİ perde birden: (1) alttan yukarı, (2) METNİN olduğu yandan içeri.
   Tek perde yetmiyordu — başlık parlak bir duvarın üstüne denk gelince okunmuyordu.
   Ayrıca hafif bir renk tavı: video sahnesi zeminle aynı sıcaklığa çekilir. */
.stage-bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(8,9,12,.9) 0%,rgba(8,9,12,.62) 38%,rgba(8,9,12,.1) 72%,transparent 100%),
    linear-gradient(to top,var(--paper) 1%,rgba(8,9,12,.74) 26%,rgba(8,9,12,.2) 60%,rgba(8,9,12,.5) 100%)}
.stage-bg img,.stage-bg video{filter:saturate(.82) contrast(1.06) brightness(.92)}
:root[data-theme="light"] .stage-bg::after{
  background:
    linear-gradient(to right,rgba(11,12,16,.86) 0%,rgba(11,12,16,.58) 38%,rgba(11,12,16,.08) 72%,transparent 100%),
    linear-gradient(to top,var(--paper) 1%,rgba(11,12,16,.6) 28%,rgba(11,12,16,.14) 62%,rgba(11,12,16,.36) 100%)}
.stage-in{position:relative;inline-size:100%;padding-block:calc(var(--nav-h) + var(--s10)) clamp(var(--s10),9vh,var(--s16))}
.stage h1{font-size:var(--t-hero);color:#fff;max-inline-size:14ch;font-weight:var(--w-medium)}
.stage h1 em{font-style:italic;color:var(--madder)}
.stage .lead{color:rgba(255,255,255,.8);max-inline-size:46ch}
.stage .eyebrow{color:#fff}
.stage .eyebrow::before{background:var(--madder)}
.stage-row{display:flex;flex-direction:column;gap:var(--s6);align-items:flex-start}
.stage-cta{display:flex;flex-direction:column;gap:var(--s5);max-inline-size:52ch}
.stage .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.stage .chip b{color:#fff}
/* Kaydırma göstergesi */
.scroll-cue{position:absolute;inset-block-end:var(--s5);inset-inline-end:var(--gutter);z-index:2;
  display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.7);
  font-family:var(--font-mono);font-size:var(--t-3xs);letter-spacing:var(--track-wider);text-transform:uppercase}
.scroll-cue i{inline-size:1px;block-size:44px;background:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.75));
  position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset-inline:0;block-size:14px;background:var(--madder);
  animation:cue 2.2s var(--ease-inout) infinite}
@keyframes cue{0%{transform:translateY(-16px)}100%{transform:translateY(46px)}}
@media (max-width:820px){.scroll-cue{display:none}.stage h1{font-size:clamp(38px,11vw,64px)}}

/* Kinetik başlık — karakter karakter */
/* Maskenin üst payı Türkçe için kritik: Ü, İ, Ö noktaları başlığın tepesinden taşar
   ve overflow:hidden onları kesiyordu (360px'te "Ürününüz" umlautu kırpılmıştı). */
.js .kin{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-block:.2em .1em;margin-block:-.2em -.1em}
.js .kin>span{display:inline-block;transform:translateY(105%);
  transition:transform 900ms var(--ease-expo)}
.js .kin.in>span{transform:none}

/* ── Kayan yazı şeridi (marquee) ─────────────────────────────────────────
   Bölüm ayracı. İki kopya yan yana akar; biri bitince öteki yerini alır. */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:var(--s5);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-in{display:flex;inline-size:max-content;animation:slide 38s linear infinite}
.marquee:hover .marquee-in{animation-play-state:paused}
.marquee span{display:flex;align-items:center;gap:clamp(24px,4vw,64px);padding-inline-end:clamp(24px,4vw,64px);
  font-family:var(--font-display);font-size:clamp(30px,5vw,64px);font-weight:var(--w-medium);
  letter-spacing:var(--track-tight);color:transparent;-webkit-text-stroke:1px var(--line-strong);white-space:nowrap}
.marquee span b{color:var(--madder);-webkit-text-stroke:0;font-weight:var(--w-medium)}
.marquee span i{inline-size:9px;block-size:9px;border-radius:var(--r-pill);background:var(--madder);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── Sabitlenen sahne — süreç adımları ───────────────────────────────────
   Sol kolon kayar, sağdaki görsel SABİT kalır ve adıma göre değişir. */
.pin{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(var(--s6),5vw,var(--s12));
  align-items:start}
.pin-media{position:sticky;inset-block-start:calc(var(--nav-h) + var(--s6));
  aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--sh-lg);background:var(--paper-3)}
.pin-media img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;
  opacity:0;transform:scale(1.05);transition:opacity 700ms var(--ease-expo),transform 1200ms var(--ease-expo)}
.pin-media img.on{opacity:1;transform:scale(1)}
.pin-media .pin-lbl{position:absolute;inset-block-end:var(--s4);inset-inline-start:var(--s4);z-index:3}
.pin-steps{display:grid;gap:clamp(var(--s10),14vh,var(--s16));padding-block:6vh 24vh}
.pin-step{opacity:.34;transition:opacity 500ms var(--ease-expo)}
.pin-step.on{opacity:1}
.pin-step .no{font-family:var(--font-mono);font-size:var(--t-3xs);letter-spacing:var(--track-wider);
  color:var(--madder);display:block;margin-block-end:var(--s3)}
.pin-step h3{font-size:var(--t-xl);margin-block-end:var(--s3)}
.pin-step p{color:var(--ink-2);max-inline-size:44ch}
@media (max-width:900px){
  .pin{grid-template-columns:1fr}
  .pin-media{position:relative;inset-block-start:auto;order:-1;margin-block-end:var(--s6)}
  .pin-steps{gap:var(--s8);padding-block:0}
  .pin-step{opacity:1}
}

/* ── Yatay sahne — dikey kaydırma yatay ilerletir ────────────────────────── */
.hscene{position:relative}
.hscene-pin{position:sticky;inset-block-start:0;block-size:100svh;display:flex;align-items:center;overflow:hidden}
.hscene-track{display:flex;gap:clamp(var(--s5),3vw,var(--s8));padding-inline:var(--gutter);
  will-change:transform}
.hscene-track>*{flex:none;inline-size:min(78vw,520px)}
.hscene-intro{display:grid;align-content:center;gap:var(--s4);inline-size:min(74vw,470px)}
.hscene-intro h2{font-size:var(--t-2xl)}
.hscene-intro .lead{margin-block-start:0}
.hscene-bar{position:absolute;inset-block-end:var(--s8);inset-inline:var(--gutter);block-size:2px;background:var(--line-2)}
.hscene-bar i{display:block;block-size:100%;background:var(--madder);transform-origin:inline-start;transform:scaleX(0)}
@media (max-width:820px){
  .hscene-pin{position:static;block-size:auto;display:block}
  .hscene-track{transform:none !important;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1);padding-block-end:var(--s4)}
  .hscene-track>*{scroll-snap-align:start}
  .hscene-bar{display:none}
}

/* ── Boru hattı şeması — kendini çizen SVG ──────────────────────────────── */
.pipe{inline-size:100%;block-size:auto;overflow:visible}
.pipe .ln{stroke:var(--line-strong);stroke-width:1;fill:none;
  stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300)}
.pipe .hot{stroke:var(--madder);stroke-width:1.6}
.pipe .node{fill:var(--paper-3);stroke:var(--line-strong);stroke-width:1}
.pipe .cap{fill:var(--ink-2);font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.pipe .cap-hot{fill:var(--madder)}
.pipe .dot{fill:var(--madder);opacity:0}
.in-view .pipe .ln{animation:draw 1.4s var(--ease-expo) forwards}
.in-view .pipe .ln:nth-of-type(2){animation-delay:.25s}
.in-view .pipe .ln:nth-of-type(3){animation-delay:.5s}
.in-view .pipe .dot{animation:popIn .5s var(--ease-spring) forwards}
@keyframes popIn{to{opacity:1}}

/* ── Kart üstü parlama — imleç konumuna göre ────────────────────────────── */
.lume{position:relative;overflow:hidden}
.lume::before{content:"";position:absolute;inset:-1px;pointer-events:none;opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),var(--madder-soft),transparent 62%);
  transition:opacity .35s}
.lume:hover::before{opacity:1}

@media (prefers-reduced-motion:reduce){
  .beam,.marquee-in,.scroll-cue i::after,.curtain-mark{animation:none !important}
  .js .stage-bg{transform:none;animation:none}
  .js .kin>span{transform:none}
  .hscene-track{transform:none !important}
  .pin-media img{opacity:1}
  .pin-media img~img{display:none}
}