/* ===========================================================================
   BurdWare Box — v3
   Tasarim sistemi: Vivid+Co ("prismatic light through obsidian")
   refero.design/style/8875b14e-c59a-492f-8780-8027a480f21c

   Kurallar (stilin kendi DO/DON'T listesinden):
   - Dolgulu dugme YOK, vurgu rengi YOK, gradyan YOK, golge YOK.
   - Tum metin ve etkilesimli oge #fffdf9; ikincil metin #6f879c. Baska renk yok.
   - Otorite kalinliktan degil olcekten gelir: baslik agirligi 400.
     700 yalniz 36px alt basliklarda.
   - Display satir yuksekligi 1.00-1.01, tracking -0.02em.
   - Dugme ve cogu kart 0px kose.
   - RGB prizma renkleri YALNIZ hero gorselinin icinde yasar, UI'a sizmaz.
   ========================================================================= */

:root{
  --obsidian:#101010;
  --graphite-veil:#495764;
  --ash-border:#403f3f;
  --fog-blue:#6f879c;
  --bone:#fffdf9;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --s4:4px; --s8:8px; --s12:12px; --s16:16px; --s20:20px; --s28:28px;
  --s40:40px; --s56:56px; --s72:72px; --s108:108px; --s144:144px;
  --maxw:1440px;
  --content:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--bone); font-family:var(--font);
  font-size:20px; line-height:1.2; letter-spacing:.01em;
  background:var(--obsidian);
  background-image:linear-gradient(180deg,#1a2028 0%,var(--obsidian) 46%,var(--obsidian) 100%);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--bone); text-decoration:none}

/* ---- tipografi: olcek tasir, kalinlik degil ------------------------- */
h1,h2{font-weight:400; margin:0; letter-spacing:-.02em}
h1{font-size:136px; line-height:1}
h2{font-size:105px; line-height:1.01}
.kicker{
  font-size:17px; font-weight:400; letter-spacing:.02em; text-transform:uppercase;
  color:var(--fog-blue); margin:0 0 var(--s28);
}
.eyebrow{
  font-size:17px; font-weight:400; letter-spacing:.02em; text-transform:uppercase;
  color:var(--fog-blue); margin:0 0 var(--s28);
}

/* ---- nav: ince, dolgusuz; tek kenarlikli oge Set up ------------------ */
.nav{position:sticky; top:0; z-index:50; background:rgba(16,16,16,.86); backdrop-filter:blur(12px)}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:var(--s20) var(--s40);
  display:flex; align-items:center; gap:var(--s40);
}
.nav-brand img{height:20px; width:auto}
.nav-links{display:flex; gap:var(--s28); margin-left:auto}
.nav-links a{font-size:17px; letter-spacing:.01em; color:var(--bone)}
.nav-links a:hover{color:var(--fog-blue)}
.nav-end{display:flex; align-items:center; gap:var(--s16)}
/* dolgu yok -- sistemde birincil eylem rengi yok, yalniz ince kenarlik */
.nav-cta{
  border:1px solid var(--bone); border-radius:5px; padding:7px 16px;
  font-size:17px; letter-spacing:.01em;
}
.nav-cta:hover{background:var(--bone); color:var(--obsidian)}
.nav-toggle{display:none; background:none; border:0; padding:var(--s8); cursor:pointer}
.nav-toggle span{display:block; width:18px; height:1px; background:var(--bone); margin:4px 0}
.drawer{display:none}

/* ---- bolum ritmi: 108px --------------------------------------------- */
section{max-width:var(--content); margin:0 auto; padding:var(--s108) var(--s40)}
section > p{max-width:60ch; font-size:20px; line-height:1.5; color:var(--bone)}

/* ---- HERO: dikey ve yatay ortalanmis, ~%50 yukseklik baslik bloguna -- */
.hero{text-align:center; padding-top:var(--s108); padding-bottom:var(--s72)}
.hero h1{margin-bottom:var(--s28)}
.hero-sub{
  font-size:22px; line-height:1.2; letter-spacing:.01em; color:var(--fog-blue);
  margin:0 auto var(--s40); max-width:30ch;
}
.links{display:flex; gap:var(--s40); justify-content:center; margin:0 0 var(--s72); flex-wrap:wrap}
.links a{font-size:20px; border-bottom:1px solid var(--ash-border); padding-bottom:3px}
.links a:hover{border-bottom-color:var(--bone)}
.hero-art{margin:0 auto; max-width:620px}
.hero-foot{
  text-align:center; color:var(--fog-blue); font-size:17px;
  letter-spacing:.02em; text-transform:uppercase; margin:var(--s56) auto 0;
}

/* ---- STATS: kutu yok, cizgiyle ayrilmis sutunlar --------------------- */
.stats{padding-top:var(--s72)}
.stats ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--ash-border);
}
.stats li{
  padding:var(--s40) var(--s20) var(--s40) 0;
  border-bottom:1px solid var(--ash-border);
}
.stats li + li{border-left:1px solid var(--ash-border); padding-left:var(--s20)}
.stats b{
  display:block; font-size:56px; font-weight:400; line-height:1.13;
  letter-spacing:-.01em; margin-bottom:var(--s12);
}
.stats span{font-size:17px; line-height:1.4; letter-spacing:.01em; color:var(--fog-blue)}

/* ---- SAY ------------------------------------------------------------- */
.say em{font-style:normal; color:var(--fog-blue)}
.say h2{margin-bottom:var(--s40)}

/* ---- FLOW ------------------------------------------------------------ */
.flow{border-top:1px solid var(--ash-border); border-bottom:1px solid var(--ash-border)}
.flow-words{
  font-size:56px; font-weight:400; line-height:1.13; letter-spacing:-.01em;
  margin:0 0 var(--s40); max-width:none;
}
.flow-words span{color:var(--graphite-veil)}
.flow-words span.hot{color:var(--bone)}
.flow-note{color:var(--fog-blue); font-size:20px; line-height:1.5; margin:0}

/* ---- ART ------------------------------------------------------------- */
.art-sec h2{margin-bottom:var(--s56)}
.wide{margin:0 0 var(--s56)}
.art-note{color:var(--fog-blue); font-size:20px; line-height:1.5; margin:0; max-width:62ch}

/* ---- LIGHT: ters cevirme yok; ayni tuval, 36px/700 alt baslik -------- */
.light{border-top:1px solid var(--ash-border)}
.light h2{margin-bottom:var(--s40)}
.light p{color:var(--fog-blue); font-size:20px; line-height:1.5; max-width:58ch; margin:0 0 var(--s56)}
.light ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0;
}
.light li{
  font-size:36px; font-weight:700; line-height:1.5; letter-spacing:-.01em;
  padding:var(--s20) var(--s20) var(--s20) 0; border-top:1px solid var(--ash-border);
}

/* ---- STOP ------------------------------------------------------------ */
.stop{text-align:center; padding-top:var(--s144); padding-bottom:var(--s144)}
.stop h2{margin:0 auto var(--s40); max-width:14ch}
/* sistemde vurgu rengi yok: durus, soluk degil TAM beyaz olarak okunur */
.stop em{font-style:normal; color:var(--bone)}
.stop h2{color:var(--graphite-veil)}
.stop p{color:var(--fog-blue); margin:0 auto; max-width:50ch; font-size:20px; line-height:1.5}

/* ---- CTA: dolgulu dugme yok ------------------------------------------ */
.cta{text-align:center}
.cta h2{margin-bottom:var(--s40)}
.cta p{color:var(--fog-blue); margin:0 auto var(--s56); max-width:54ch; font-size:20px; line-height:1.5}
.cta-actions{display:flex; gap:var(--s28); align-items:center; justify-content:center; flex-wrap:wrap}
.btn{border:1px solid var(--bone); border-radius:0; padding:16px 32px; font-size:20px; letter-spacing:.01em}
.btn:hover{background:var(--bone); color:var(--obsidian)}
.link{color:var(--fog-blue); font-size:20px; border-bottom:1px solid var(--ash-border); padding-bottom:3px}
.link:hover{color:var(--bone); border-bottom-color:var(--bone)}

/* ---- FOOT ------------------------------------------------------------ */
.foot{border-top:1px solid var(--ash-border); padding:var(--s72) var(--s40); text-align:center}
.foot p{color:var(--fog-blue); font-size:17px; line-height:1.5; margin:0 auto var(--s40); max-width:52ch}
.foot nav{display:flex; gap:var(--s28); justify-content:center; flex-wrap:wrap; margin-bottom:var(--s28)}
.foot nav a{font-size:17px; letter-spacing:.02em; text-transform:uppercase; color:var(--fog-blue)}
.foot nav a:hover{color:var(--bone)}
.foot small{font-size:15px; letter-spacing:.01em; color:var(--graphite-veil)}

/* ---- giris animasyonu ------------------------------------------------ */
.js .rev{opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .8s ease}
.js .rev.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .js .rev{opacity:1; transform:none; transition:none} }

/* ---- telefon --------------------------------------------------------- */
@media (max-width:900px){
  body{font-size:18px}
  section{padding:var(--s72) var(--s20)}
  h1{font-size:54px; line-height:1.02}
  h2{font-size:44px; line-height:1.05}
  .hero-sub{font-size:20px}
  .flow-words{font-size:32px}
  .stats ul{grid-template-columns:1fr}
  .stats li{padding:var(--s28) 0; border-left:0 !important; padding-left:0 !important}
  .stats b{font-size:44px}
  .light li{font-size:26px}
  .nav-inner{padding:var(--s16) var(--s20); gap:var(--s16)}
  .nav-links{display:none}
  .nav-toggle{display:block}
  .drawer{display:none; background:var(--obsidian); padding:var(--s20);
          border-top:1px solid var(--ash-border)}
  .drawer.open{display:flex; flex-direction:column; gap:var(--s20)}
  .drawer a{font-size:20px}
  .stop{padding-top:var(--s108); padding-bottom:var(--s108)}
}