/* =====================================================================
   ESCUDO — Bir Mini Cross'un Anatomisi
   Kaydırmayla sürülen kare dizisi + editoryal panel koreografisi
   ===================================================================== */

:root{
  --ink:      #08090a;
  --ink-2:    #0d0f11;
  --paper:    #eceae7;
  --muted:    rgba(236,234,231,.60);
  --faint:    rgba(236,234,231,.30);
  --amber:    #ff6a13;
  --amber-dim:rgba(255,106,19,.72);

  --serif: "Archivo", system-ui, sans-serif;
  --cond:  "Barlow Condensed", "Archivo", system-ui, sans-serif;
  --sans:  "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pad: clamp(20px, 4.4vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------------------------------------------------------------
   Ortak tipografi
   --------------------------------------------------------------- */
.kicker{
  font-family:var(--cond);
  font-size:clamp(10px,1.05vw,12px);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--amber-dim);
  margin:0 0 1.4em;
}

/* =====================================================================
   YÜKLEYİCİ
   ===================================================================== */
.loader{
  position:fixed; inset:0; z-index:120;
  background:var(--ink);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:22px;
  transition:opacity .7s ease, visibility .7s ease;
}
.loader.is-done{ opacity:0; visibility:hidden; }

.loader__mark{
  font-family:var(--serif);
  font-variation-settings:"wdth" 118,"wght" 800;
  font-size:clamp(20px,3vw,30px);
  letter-spacing:.42em;
  text-indent:.42em;
  color:var(--paper);
}
.loader__bar{
  width:min(210px,42vw); height:1px;
  background:rgba(236,234,231,.16);
  overflow:hidden;
}
.loader__bar i{
  display:block; height:100%; width:0;
  background:var(--amber);
  transition:width .25s linear;
}
.loader__pct{
  font-family:var(--cond);
  font-size:11px; letter-spacing:.28em;
  color:var(--faint);
}
.loader__pct em{ font-style:normal; margin-left:.15em; }

/* =====================================================================
   ÜST ÇUBUK
   ===================================================================== */
.header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(16px,2.4vw,28px) var(--pad);
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  mix-blend-mode:difference;
}
.header__brand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--serif);
  font-variation-settings:"wdth" 116,"wght" 700;
  font-size:15px; letter-spacing:.34em;
}
/* marka işareti — eğik çift çizgi (yarış pistindeki hız işareti) */
.header__mark{
  width:16px; height:14px; flex:none;
  background:
    linear-gradient(105deg, transparent 0 18%, var(--amber) 18% 44%, transparent 44% 58%, var(--paper) 58% 84%, transparent 84%);
}
.header__nav{
  display:flex; align-items:center; gap:clamp(18px,2.6vw,34px);
  font-family:var(--cond);
  font-size:12px; letter-spacing:.24em;
}
.header__nav a{ color:var(--paper); opacity:.82; transition:opacity .3s; }
.header__nav a:hover{ opacity:1; }
.header__cta{
  border:1px solid rgba(236,234,231,.42);
  padding:.72em 1.35em;
  opacity:1 !important;
  transition:background .35s, color .35s, border-color .35s;
}
.header__cta:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }

/* =====================================================================
   SAHNE — pinlenen kare dizisi
   ===================================================================== */
.scene{ position:relative; height:900vh; }

.sticky{
  position:relative;
  height:100vh; height:100svh;
  overflow:hidden;
  background:var(--ink);
}

.frames{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}

/* köşe karartma + üst/alt geçiş — metnin okunurluğunu taşır */
.vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 88% at 50% 46%, transparent 34%, rgba(8,9,10,.62) 100%),
    linear-gradient(to bottom, rgba(8,9,10,.72) 0%, transparent 20% 74%, rgba(8,9,10,.86) 100%);
}

/* ---------------------------------------------------------------
   Paneller
   --------------------------------------------------------------- */
.panel{
  position:absolute; top:50%;
  width:min(30ch,34vw);
  z-index:10;
  will-change:transform,opacity;
}
.panel--left { left:var(--pad);  text-align:left; }
.panel--right{ right:var(--pad); text-align:right; }

/* Metnin altına taşınan karartma — sahne aydınlandığında da okunur kalsın.
   Panelin kendi kutusundan taşar, kenara doğru söner. */
.panel::before{
  content:"";
  position:absolute; z-index:-1;
  inset:-18% -34% -22% -48%;
  background:radial-gradient(closest-side at 38% 50%, rgba(8,9,10,.86), rgba(8,9,10,0) 100%);
  pointer-events:none;
}
.panel--right::before{
  inset:-18% -48% -22% -34%;
  background:radial-gradient(closest-side at 62% 50%, rgba(8,9,10,.86), rgba(8,9,10,0) 100%);
}
.panel--hero::before{
  inset:-40% -12%;
  background:radial-gradient(closest-side, rgba(8,9,10,.62), rgba(8,9,10,0) 100%);
}

.panel__no{
  font-family:var(--serif);
  font-style:italic;
  font-variation-settings:"wdth" 100,"wght" 500;
  font-size:13px;
  color:var(--amber);
  margin:0 0 .35em;
  letter-spacing:.06em;
}
.panel__eyebrow{
  font-family:var(--cond);
  font-size:11px; letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1.1em;
}
.panel__title{
  font-family:var(--serif);
  font-variation-settings:"wdth" 112,"wght" 780;
  font-size:clamp(34px,4.4vw,62px);
  line-height:.94;
  letter-spacing:-.018em;
  margin:0 0 .58em;
  text-wrap:balance;
}
.panel__body{
  font-size:clamp(14px,1.06vw,16px);
  color:var(--muted);
  margin:0 0 1.9em;
  max-width:34ch;
}
.panel--right .panel__body{ margin-left:auto; }

.panel__spec{
  font-family:var(--cond);
  font-size:11px; letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--faint);
  margin:0;
  padding-top:1.05em;
  border-top:1px solid rgba(236,234,231,.16);
}
.panel__spec b{
  color:var(--amber-dim);
  font-weight:600;
  margin-right:.85em;
}

/* ---------------------------------------------------------------
   Açılış paneli
   --------------------------------------------------------------- */
.panel--hero{
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(1180px,92vw);
  text-align:center;
}
.panel--hero .kicker{ margin-bottom:1.9em; }

.hero__title{
  margin:0;
  font-family:var(--serif);
  line-height:.9;
  letter-spacing:-.024em;
}
.hero__title span{
  display:block;
  white-space:nowrap;
  font-variation-settings:"wdth" 118,"wght" 840;
  font-size:clamp(44px,8.4vw,122px);
  text-transform:uppercase;
}
.hero__title em{
  display:block;
  white-space:nowrap;
  font-style:italic;
  font-variation-settings:"wdth" 96,"wght" 520;
  font-size:clamp(38px,7.2vw,106px);
  color:var(--amber);
  text-transform:none;
  margin-top:.06em;
}

.scroll-hint{
  margin-top:clamp(34px,5vw,64px);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--cond);
  font-size:10px; letter-spacing:.42em; text-indent:.42em;
  color:var(--faint);
}
.scroll-hint i{
  width:1px; height:44px;
  background:linear-gradient(to bottom,var(--amber),transparent);
  animation:drop 2.4s ease-in-out infinite;
  transform-origin:top;
}
@keyframes drop{
  0%,100%{ transform:scaleY(.2); opacity:.3; }
  50%    { transform:scaleY(1);  opacity:1;  }
}

/* ---------------------------------------------------------------
   HUD — bölüm sayacı + ilerleme
   --------------------------------------------------------------- */
.hud{
  position:absolute; right:var(--pad); bottom:clamp(20px,3vw,34px);
  z-index:12;
  display:flex; align-items:center; gap:16px;
}
.hud__count{
  font-family:var(--serif);
  font-size:13px; letter-spacing:.1em;
}
.hud__count b{ font-variation-settings:"wdth" 108,"wght" 700; color:var(--paper); }
.hud__count i{ font-style:italic; color:var(--faint); margin-left:.35em; font-size:11px; }

.hud__bar{
  width:clamp(80px,12vw,160px); height:1px;
  background:rgba(236,234,231,.18);
}
.hud__bar i{ display:block; height:100%; width:0; background:var(--amber); }

/* =====================================================================
   TAM KÜNYE
   ===================================================================== */
.kunye{
  padding:clamp(80px,13vh,150px) var(--pad) clamp(60px,9vh,110px);
  display:grid;
  grid-template-columns:minmax(240px,.8fr) minmax(0,1.6fr);
  gap:clamp(34px,6vw,90px);
  align-items:start;
  border-top:1px solid rgba(236,234,231,.1);
}
.kunye__head{ position:sticky; top:clamp(90px,12vh,130px); }
.kunye__title{
  font-family:var(--serif);
  font-variation-settings:"wdth" 114,"wght" 800;
  font-size:clamp(34px,4.6vw,64px);
  line-height:.94; letter-spacing:-.022em;
  margin:0;
}
.kunye__list{ margin:0; }
.kunye__list > div{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px;
  padding:.95em 0;
  border-bottom:1px solid rgba(236,234,231,.09);
}
.kunye__list dt{
  font-family:var(--cond);
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--faint);
  flex:none;
}
.kunye__list dd{
  margin:0;
  font-size:clamp(14px,1.08vw,16px);
  color:var(--paper);
  text-align:right;
}

@media (max-width: 860px){
  .kunye{ grid-template-columns:1fr; }
  .kunye__head{ position:static; }
  .kunye__list > div{ flex-direction:column; align-items:flex-start; gap:.3em; }
  .kunye__list dd{ text-align:left; }
}

/* =====================================================================
   GÜVENLİ KULLANIM
   ===================================================================== */
.guvenlik{
  padding:clamp(60px,9vh,110px) var(--pad) clamp(80px,12vh,140px);
  border-top:1px solid rgba(236,234,231,.1);
}
.guvenlik .kicker{ margin-bottom:clamp(30px,4.4vw,52px); }
.guvenlik__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(30px,4.6vw,64px);
}
.guvenlik__grid b{
  display:block;
  font-family:var(--serif);
  font-variation-settings:"wdth" 112,"wght" 760;
  font-size:clamp(30px,3.6vw,50px);
  line-height:1;
  color:var(--amber);
  margin-bottom:.34em;
}
.guvenlik__grid h3{
  font-family:var(--cond);
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  font-weight:600;
  color:var(--paper);
  margin:0 0 1em;
  padding-bottom:1em;
  border-bottom:1px solid rgba(236,234,231,.14);
}
.guvenlik__grid p{
  margin:0;
  font-size:clamp(14px,1.04vw,15px);
  color:var(--muted);
  max-width:38ch;
}

/* =====================================================================
   KAPANIŞ
   ===================================================================== */
.outro{
  position:relative;
  padding:clamp(96px,16vh,190px) var(--pad) clamp(80px,12vh,150px);
  text-align:center;
  background:
    radial-gradient(88% 130% at 50% 0%, rgba(255,106,19,.06), transparent 62%),
    var(--ink);
}
.outro__mark{
  display:inline-block;
  width:22px; height:18px;
  margin-bottom:clamp(28px,4vw,46px);
  background:
    linear-gradient(105deg, transparent 0 18%, var(--amber) 18% 44%, transparent 44% 58%, var(--paper) 58% 84%, transparent 84%);
}
.outro__title{
  font-family:var(--serif);
  font-variation-settings:"wdth" 114,"wght" 800;
  font-size:clamp(40px,7.2vw,104px);
  line-height:.92;
  letter-spacing:-.024em;
  margin:0 0 .5em;
}
.outro__body{
  max-width:46ch; margin:0 auto clamp(34px,5vw,54px);
  color:var(--muted);
  font-size:clamp(15px,1.15vw,17px);
}
.btn{
  display:inline-block;
  font-family:var(--cond);
  font-size:12px; letter-spacing:.28em;
  padding:1.2em 2.6em;
  border:1px solid rgba(236,234,231,.4);
  color:var(--paper);
  transition:background .4s, color .4s, border-color .4s;
}
.btn:hover{ background:var(--amber); border-color:var(--amber); color:var(--ink); }

/* =====================================================================
   ALT BİLGİ
   ===================================================================== */
.foot{
  border-top:1px solid rgba(236,234,231,.1);
  padding:clamp(46px,7vw,76px) var(--pad) clamp(28px,4vw,44px);
  background:var(--ink-2);
}
.foot__top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:clamp(32px,6vw,90px);
  flex-wrap:wrap;
  margin-bottom:clamp(40px,6vw,68px);
}
.foot__brand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--serif);
  font-variation-settings:"wdth" 116,"wght" 700;
  font-size:15px; letter-spacing:.34em;
}
.foot__cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(140px,190px));
  gap:clamp(24px,3.4vw,54px);
}
@media (max-width: 720px){
  .foot__cols{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); width:100%; }
}
.foot__cols h3{
  font-family:var(--cond);
  font-size:11px; letter-spacing:.3em; font-weight:600;
  color:var(--amber-dim);
  margin:0 0 1.4em;
}
.foot__cols a,
.foot__cols span{
  display:block;
  font-size:14px;
  color:var(--muted);
  margin-bottom:.72em;
  transition:color .3s;
}
.foot__cols a:hover{ color:var(--paper); }
.foot__legal{
  font-family:var(--cond);
  font-size:11px; letter-spacing:.2em;
  color:var(--faint);
  margin:0;
}

/* =====================================================================
   KARE DİZİSİ YOKKEN — paneller normal akışa düşer
   (assets/frames/manifest.json bulunamazsa app.js bu sınıfı ekler)
   ===================================================================== */
body.no-frames .scene{ height:auto; }
body.no-frames .sticky{ height:auto; overflow:visible; }
body.no-frames .frames,
body.no-frames .hud{ display:none; }
body.no-frames .vignette{ display:none; }

body.no-frames .panel{
  position:relative; top:auto; left:auto; right:auto;
  transform:none !important;
  opacity:1 !important; visibility:visible !important;
  width:min(52ch,88vw);
  margin:0 auto;
  padding:clamp(72px,14vh,140px) 0;
  text-align:left;
  border-bottom:1px solid rgba(236,234,231,.08);
}
body.no-frames .panel::before{ display:none; }
body.no-frames .panel--right{ text-align:left; }
body.no-frames .panel--right .panel__body{ margin-left:0; }
body.no-frames .panel--hero{
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  border-bottom:0;
}

/* =====================================================================
   DUYARLI
   ===================================================================== */
@media (max-width: 900px){
  .panel{
    width:auto;
    left:var(--pad); right:var(--pad);
    text-align:left;
    top:auto; bottom:clamp(84px,15vh,130px);
  }
  .panel--right{ text-align:left; }
  .panel--right .panel__body{ margin-left:0; }
  .panel__body{ max-width:none; }

  /* Metin dikeyde alt yarıda duruyor; masaüstündeki yanal radial karartma
     burada işe yaramıyor (sahnenin solu/sağı değil, ALTI bastırılmalı).
     Panelin kendi halesi kapatılıp yerine sahne genişliğinde bir alt
     perde konuyor — app.js de kareyi dikeyde yukarı alıyor, ikisi
     birlikte metni motosikletin gövdesinden kurtarıyor. */
  .panel::before{ display:none; }
  .sticky::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height:62%;
    background:linear-gradient(to bottom,
      rgba(8,9,10,0) 0%, rgba(8,9,10,.72) 42%, rgba(8,9,10,.95) 100%);
    pointer-events:none;
    z-index:5;
  }
  body.no-frames .sticky::after{ display:none; }

  .panel__title{ font-size:clamp(30px,8.4vw,44px); }
  .panel__body{ font-size:15px; line-height:1.6; }
  .panel__spec{ font-size:10px; letter-spacing:.16em; }

  /* Sahne dikeyde üst yarıda; açılış başlığı da onun ALTINA iner,
     yoksa kaportanın üstüne düşüp okunmuyordu. */
  .panel--hero{
    left:50%; right:auto; top:64%; bottom:auto;
    text-align:center;
    width:min(92vw,560px);
  }
  /* Açılışta iki satır da tek satırda kalsın diye vw'ye bağlandı */
  .hero__title span{ font-size:clamp(38px,11.4vw,72px); }
  .hero__title em{ font-size:clamp(32px,9.6vw,60px); }
  .scroll-hint{ margin-top:clamp(22px,5vw,34px); }

  .vignette{
    background:
      radial-gradient(130% 78% at 50% 34%, transparent 30%, rgba(8,9,10,.58) 100%),
      linear-gradient(to bottom, rgba(8,9,10,.74) 0%, transparent 20% 46%, rgba(8,9,10,.5) 100%);
  }
  .header__nav a:not(.header__cta){ display:none; }
  .hud{ left:var(--pad); right:var(--pad); justify-content:space-between; z-index:12; }
}

@media (prefers-reduced-motion: reduce){
  .scroll-hint i{ animation:none; }
}