/* ===========================================================
   THE TURN ROASTERY — Temel katman (Faz 1)
   Reset, tipografi ölçeği, grid, kabuk (header/footer).
   =========================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--surface);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}

:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}

/* ---------- Tipografi ---------- */
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:400;font-optical-sizing:auto}
.t-display-xl{
  font-family:var(--font-display);font-size:var(--fs-display-xl);
  line-height:var(--lh-tight);letter-spacing:var(--track-display);
  font-weight:600;text-transform:uppercase;
  /* Diyakritikler kabın dışına taşabilsin */
  padding-block:.06em;overflow:visible;
}
.t-display-l{
  font-family:var(--font-display);font-size:var(--fs-display-l);
  line-height:.88;letter-spacing:var(--track-display);font-weight:600;
}
.t-display-m{
  font-family:var(--font-display);font-size:var(--fs-display-m);
  line-height:.92;letter-spacing:var(--track-display);font-weight:600;
}
.t-h1{
  font-family:var(--font-display);font-size:var(--fs-h1);
  line-height:1.05;letter-spacing:0;font-weight:600;
}
.t-h2{font-size:var(--fs-h2);font-weight:700;line-height:1.25;letter-spacing:-.01em}
.t-h3{font-size:var(--fs-h3);font-weight:600;line-height:1.4}
.t-body-l{font-size:var(--fs-body-l);line-height:1.65}
.t-sm{font-size:var(--fs-sm);line-height:1.6}
.t-muted{color:var(--text-muted)}
.measure{max-width:var(--measure)}
p{margin:0}

.label{
  font-family:var(--font-mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--accent);
}
.label--quiet{color:var(--text-subtle)}
.data{
  font-family:var(--font-mono);font-size:var(--fs-data);
  letter-spacing:var(--track-data);font-variant-numeric:tabular-nums;
}
:lang(tr){hyphens:none}
:lang(en){hyphens:auto}

/* ---------- Bağlantı: soldan sağa bakır altı çizgi ---------- */
a{color:inherit;text-decoration:none}
a.link{
  color:var(--accent);position:relative;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:0 100%;
  background-size:100% 1px;
  transition:background-size var(--dur-fast) var(--ease-hover);
}
a.link:hover{background-size:0 1px;background-position:100% 100%}

/* ---------- Düzen ---------- */
.page{max-width:var(--page-max);margin-inline:auto;padding-inline:var(--page-pad)}
.section{padding-block:var(--space-24)}
@media (min-width:1024px){.section{padding-block:var(--space-32)}}
.section--tight{padding-block:var(--space-16)}

.sec-head{
  display:flex;align-items:baseline;gap:var(--space-6);flex-wrap:wrap;
  border-bottom:1px solid var(--border);
  padding-bottom:var(--space-3);margin-bottom:var(--space-10);
}
.sec-head > :first-child{flex:1;min-width:min(100%,320px)}

.grid-products{
  display:grid;gap:var(--space-8) var(--gutter);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:768px){.grid-products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1280px){.grid-products{grid-template-columns:repeat(4,minmax(0,1fr))}}

.split{display:grid;gap:var(--space-12);grid-template-columns:1fr}
@media (min-width:900px){.split{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16)}}

.rule{height:1px;background:var(--border);border:0;margin:0}

/* ---------- Duyuru bandı ---------- */
.announce{
  background:var(--navy-800);color:var(--sand-50);
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.1em;text-transform:uppercase;
  text-align:center;padding:var(--space-2) var(--space-4);
}
.announce b{color:var(--copper-400);font-weight:500}

/* ---------- Yüzen kabuk ----------
   Header yok. Geriye iki cam kapsül kalıyor: solda marka,
   sağda sepet + menü. İkisi de sayfanın üstünde durur, hiçbir
   şeyin yerini işgal etmez.
   =========================================================== */
.floater{
  position:fixed;top:74px;z-index:120;
  display:flex;align-items:center;gap:var(--space-2);
}
.floater--brand{left:var(--page-pad)}
.floater--brand .pill:hover{color:var(--text)}
.floater--brand .pill:hover .u{fill:var(--accent-hover)}
.floater--tools{right:var(--page-pad)}

/* Kapsül yok: üçü de çerçevesiz ve zeminsiz duruyor.
   Fotoğraf üzerinde okunurluğu gölge taşıyor. */
.pill{
  display:flex;align-items:center;gap:var(--space-3);
  padding:0;border:0;background:none;
  color:var(--text);
  filter:drop-shadow(0 2px 10px rgba(3,7,14,.7));
  transition:scale 110ms cubic-bezier(.32,.72,0,1),
             color var(--dur-fast) var(--ease-hover);
}
.pill:hover{color:var(--accent)}
.pill:active{scale:.96}
.floater--tools{gap:var(--space-6)}

.brand{display:flex;align-items:center;gap:var(--space-3)}
.brand svg{width:auto;height:30px;flex:0 0 auto}
.brand .u{fill:var(--accent)}
.brand__txt{display:flex;flex-direction:column;justify-content:center}
.brand__name{
  font-family:var(--font-body);font-weight:700;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;line-height:1;
}
.brand__sub{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--text-subtle);line-height:1;margin-top:3px;
}

.cart-btn{font-size:var(--fs-sm);font-weight:600}
.cart-count{
  min-width:20px;height:20px;padding-inline:6px;border-radius:var(--radius-pill);
  background:var(--accent);color:var(--accent-contrast);
  font-family:var(--font-mono);font-size:11px;font-variant-numeric:tabular-nums;
  display:grid;place-items:center;line-height:1;
}

/* ---------- Footer ---------- */
.footer{padding-block:var(--space-24) var(--space-10);border-top:1px solid var(--border)}
.footer__grid{
  display:grid;gap:var(--space-10) var(--gutter);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:900px){.footer__grid{grid-template-columns:2fr repeat(4,1fr)}}
.footer h4{
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--text-subtle);margin-bottom:var(--space-4);
}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.footer li a{font-size:var(--fs-sm);color:var(--text-muted)}
.footer li a:hover{color:var(--accent)}
.footer__bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);
  margin-top:var(--space-16);padding-top:var(--space-5);
  border-top:1px solid var(--border);
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-subtle);
}
.newsletter{display:flex;gap:var(--space-2);margin-top:var(--space-5);max-width:380px}
.newsletter input{
  flex:1;min-width:0;background:transparent;border:1px solid var(--border-strong);
  border-radius:var(--radius-input);padding:10px var(--space-3);font-size:var(--fs-sm);
  transition:border-color var(--dur-fast) var(--ease-hover);
}
.newsletter input::placeholder{color:var(--text-subtle)}
.newsletter input:focus{border-color:var(--accent);outline:none}

/* ---------- Yardımcılar ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.flow{display:flex;flex-direction:column}
.flow-2{gap:var(--space-2)} .flow-3{gap:var(--space-3)}
.flow-4{gap:var(--space-4)} .flow-6{gap:var(--space-6)}
.flow-8{gap:var(--space-8)}

.brand__txt{display:flex;flex-direction:column;justify-content:center}


/* ===========================================================
   Tam taşan medya — referansın asıl taşıyıcısı.
   Sayfa dolgusu burada biter; görsel kenardan kenara gider.
   =========================================================== */
.bleed{width:100%;position:relative;overflow:clip}
.media{position:relative;overflow:hidden;isolation:isolate;background:var(--surface-sunken)}
.media > img,.media > video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
/* Kaydırmayla yavaş kayan görsel: yükseklik fazladan verilir */
.media--parallax > img{height:124%;top:-12%;will-change:transform}
.media__shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(3,7,14,.86) 0%,rgba(3,7,14,.45) 45%,rgba(3,7,14,.25) 100%);
}
.media__shade--center{
  background:
    radial-gradient(70% 55% at 50% 46%,rgba(3,7,14,.62),transparent 100%),
    radial-gradient(120% 95% at 50% 50%,rgba(3,7,14,.30),rgba(3,7,14,.88) 100%);
}
.media__body{
  position:relative;z-index:2;
  padding:var(--space-24) var(--page-pad);
  display:flex;flex-direction:column;gap:var(--space-5);
}
.media--tall{min-height:clamp(520px,78vh,860px)}
.media--band{min-height:clamp(380px,52vh,600px)}
.media--center .media__body{align-items:center;text-align:center}
.media--center .measure{margin-inline:auto}
.media--bottom .media__body{justify-content:flex-end;min-height:inherit}
.media figcaption{
  position:absolute;right:var(--page-pad);bottom:var(--space-4);z-index:2;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
}

/* ===========================================================
   Marquee — referansın imza öğesi. Ölçümde 9 adet vardı.
   Duyuru, çalma listesi, öne çıkan partiler.
   =========================================================== */
.marquee{
  --marquee-dur:38s;
  overflow:hidden;white-space:nowrap;
  border-block:1px solid var(--border);
  background:var(--surface-raised);
  padding-block:var(--space-2);
}
.marquee__track{display:inline-flex;gap:var(--space-8);will-change:transform}
.marquee__track > span{
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);
  display:inline-flex;align-items:center;gap:var(--space-2);
}
.marquee__track b{color:var(--accent);font-weight:500}
.marquee--accent{background:var(--accent);border-color:transparent}
.marquee--accent .marquee__track > span{color:var(--accent-contrast)}
.marquee--accent .marquee__track b{color:var(--accent-contrast);font-weight:700}
.js-motion .marquee__track{animation:marquee var(--marquee-dur) linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .js-motion .marquee__track{animation:none}
  .marquee{overflow-x:auto}
}

/* ===========================================================
   Menü — sabit çubuk yerine tam ekran açılır katman
   Düğme sağ üstte küçük ve serbest duruyor; katman oradan
   açılıp oraya kapanıyor (mekânsal tutarlılık).
   =========================================================== */
.menu-btn{
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:var(--track-label);text-transform:uppercase;
}
.menu-btn__bars{display:grid;gap:4px;width:16px}
.menu-btn__bars i{
  display:block;height:1.5px;background:currentColor;width:100%;
  transition:transform var(--dur-base) var(--ease-swap),
             opacity var(--dur-base) var(--ease-swap);
}
.menu-btn[aria-expanded="true"] .menu-btn__bars i:first-child{transform:translateY(2.75px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__bars i:last-child{transform:translateY(-2.75px) rotate(-45deg)}

.navmenu{
  position:fixed;inset:0;z-index:110;
  /* Katman sitenin lacivert dünyasında; token'lar varsayılan
     koyu takımdan geliyor (açık metin, Bakır 400 vurgu). */
  background:var(--navy-1000);
  /* Token'ları devirmek yetmiyor: sınıfsız metin body'nin hesaplanmış
     açık rengini miras alıyordu, katmanın kendi rengi de ayarlanmalı. */
  color:var(--text);
  /* Sağ üstteki düğmeden açılır, oraya kapanır. Yarıçap px olarak
     JS'ten geliyor: kenar çizgisi de aynı değeri kullanıyor. */
  --ox:calc(100% - 66px);
  --oy:58px;
  clip-path:circle(var(--r,0px) at var(--ox) var(--oy));
  overflow-y:auto;
}
.navmenu[hidden]{display:none}
/* Video kendi renginde oynuyor; lacivert zemin ve üstündeki
   renk katmanı ona serin bir kayma veriyor.
   isolation YOK — karışım zemine ulaşmalı. */
.navmenu__bg{position:absolute;inset:0;z-index:0}
.navmenu__bg img,
.navmenu__media{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:.72;
  filter:contrast(1.1) saturate(.8) brightness(.82);
}
.navmenu__bg::before{
  content:"";position:absolute;inset:0;z-index:1;
  mix-blend-mode:color;opacity:.5;
  background:linear-gradient(122deg,var(--navy-900),var(--navy-600) 60%,var(--navy-500));
}
.navmenu__bg::after{
  content:"";position:absolute;inset:0;
  /* Tipografinin durduğu sol taraf temiz kalsın; video sağda okunsun */
  /* Sol: tipografi için koyu. Orta: video net. Sağ: yan kolon için perde. */
  background:linear-gradient(to right,
    var(--navy-1000) 2%, rgba(7,14,26,.62) 30%,
    rgba(7,14,26,.1) 58%, rgba(7,14,26,.3) 74%, rgba(7,14,26,.68) 100%);
}
.navmenu__inner{
  position:relative;z-index:1;min-height:100%;
  display:grid;gap:var(--space-12);align-content:center;
  grid-template-columns:1fr;
  padding:var(--space-24) var(--page-pad) var(--space-16);
}
@media (min-width:900px){
  .navmenu__inner{grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr);gap:var(--space-16)}
}
.navmenu__links{display:flex;flex-direction:column;gap:var(--space-5)}
.navmenu__links a{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.5rem,7vw,5.5rem);line-height:1;
  letter-spacing:var(--track-display);text-transform:uppercase;
  color:var(--text);width:max-content;max-width:100%;
  position:relative;
  opacity:0;translate:0 .4em;
  transition:opacity var(--dur-slow) var(--ease-reveal),
             translate var(--dur-slow) var(--ease-reveal),
             color var(--dur-fast) var(--ease-hover);
  transition-delay:calc(var(--i,0) * 70ms + 90ms);
}
.navmenu[data-open] .navmenu__links a{opacity:1;translate:0 0}
.navmenu__links a:hover{color:var(--accent)}
.navmenu__links a small{
  font-family:var(--font-mono);font-size:var(--fs-label);font-weight:400;
  letter-spacing:var(--track-label);color:var(--text-subtle);
  display:block;margin-bottom:var(--space-2);
}
.navmenu__aside{
  display:flex;flex-direction:column;gap:var(--space-6);
  border-top:1px solid var(--border);padding-top:var(--space-6);
  opacity:0;translate:0 .4em;
  transition:opacity var(--dur-slow) var(--ease-reveal),
             translate var(--dur-slow) var(--ease-reveal);
  transition-delay:420ms;
}
@media (min-width:900px){
  .navmenu__aside{border-top:0;border-left:1px solid var(--border);
    padding:0 0 0 var(--space-8)}
}
.navmenu[data-open] .navmenu__aside{opacity:1;translate:0 0}

/* ===========================================================
   Hero dizisi — Ken Burns + çapraz geçiş
   Video gelene kadar hareket buradan geliyor. <video> eklenince
   .seq bloğu tek bir <video> ile değiştirilir, başka bir şey
   değişmez.
   =========================================================== */
.seq{position:absolute;inset:0;z-index:0;overflow:hidden}
.seq__shot{position:absolute;inset:0;opacity:0;overflow:hidden}
.seq__shot img{width:100%;height:100%;object-fit:cover;scale:1.06}
.seq__shot:first-child{opacity:1}
.js-motion .seq__shot{animation:seqFade 21s linear infinite}
.js-motion .seq__shot img{animation:kenburns 21s linear infinite}
.js-motion .seq__shot:nth-child(1),
.js-motion .seq__shot:nth-child(1) img{animation-delay:0s}
.js-motion .seq__shot:nth-child(2),
.js-motion .seq__shot:nth-child(2) img{animation-delay:7s}
.js-motion .seq__shot:nth-child(3),
.js-motion .seq__shot:nth-child(3) img{animation-delay:14s}
@keyframes seqFade{
  0%{opacity:0} 4%{opacity:1} 31%{opacity:1} 35%{opacity:0} 100%{opacity:0}
}
@keyframes kenburns{
  0%{scale:1.06;translate:0 0}
  35%{scale:1.17;translate:-1.2% -1.4%}
  100%{scale:1.17;translate:-1.2% -1.4%}
}

/* Film grenli doku: koyu fotoğrafın üstünde dijital düzlüğü kırar */
.grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.16;
  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='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Kaydırma işareti */
.scroll-cue{
  position:absolute;left:50%;bottom:var(--space-8);translate:-50% 0;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:var(--space-3);
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.scroll-cue i{display:block;width:1px;height:38px;background:rgba(255,255,255,.28);position:relative;overflow:hidden}
.js-motion .scroll-cue i::after{
  content:"";position:absolute;left:0;width:100%;height:14px;background:#fff;
  animation:cue 2.4s var(--ease-swap) infinite;
}
@keyframes cue{0%{top:-14px}55%{top:38px}100%{top:38px}}

/* Başlık: maskeden yükselerek açılır */
.rise{display:block}
/* Maske kutusu Türkçe diyakritiklerini kesmesin diye pay bırakılıyor */
.js-motion .rise{overflow:hidden;padding-block:.12em;margin-block:-.12em}
.js-motion .rise > span{
  display:block;translate:0 105%;
  transition:translate var(--dur-cinematic) var(--ease-reveal);
  transition-delay:calc(var(--i,0) * 130ms);
}
.js-motion .rise.is-in > span,
.js-motion .is-in .rise > span{translate:0 0}

@media (prefers-reduced-motion:reduce){
  .js-motion .seq__shot,.js-motion .seq__shot img{animation:none}
  .js-motion .seq__shot:first-child{opacity:1}
  .js-motion .scroll-cue i::after{animation:none}
  .js-motion .rise > span{translate:0 0}
  .navmenu{clip-path:none}
  .navmenu[hidden]{display:none}
}

/* Kapsüllerin zemini kalktığı için metin doğrudan içeriğin üstünde
   duruyor. Krem bir bölüm altlarından geçtiğinde açık metin okunmaz
   kalıyordu: kabuk, altındaki zemine göre renk değiştiriyor. */
.floater[data-on-light]{
  --text:var(--navy-900);
  --text-subtle:var(--sand-700);
  --accent:var(--copper-700);
  --accent-contrast:#FFFFFF;
}
.floater[data-on-light] .pill{
  color:var(--text);
  filter:drop-shadow(0 1px 8px rgba(247,243,236,.9));
}
.floater[data-on-light] .brand__sub{color:var(--text-subtle)}

/* Menü açıkken katman koyu: kabuk krem bölüm gözlemcisinden
   bağımsız olarak açık takıma döner. */
.floater[data-menu-dark]{
  --text:#F3F5F9;
  --text-subtle:#6A7A96;
  --accent:var(--copper-400);
  --accent-contrast:var(--navy-1000);
}
.floater[data-menu-dark] .pill{
  color:var(--text);
  filter:drop-shadow(0 2px 10px rgba(3,7,14,.7));
}
.floater[data-menu-dark] .brand__sub{color:var(--text-subtle)}

/* ===========================================================
   Açılma efektini görünür kılan kenar hattı
   Menü ve sayfa aynı lacivertte olduğu için kırpma kenarı
   okunmuyordu; kenar bakır bir çizgiyle işaretleniyor.
   Sayfanın kendisi yerinde duruyor.
   =========================================================== */

/* 2 — Açılan dairenin kenarında bakır bir hat. Ortada en parlak,
   başta ve sonda sönük: calc(r · (1−r) · 3) */
.navmenu__edge{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  background:radial-gradient(circle var(--r,0px) at var(--ox) var(--oy),
    transparent 0 calc(100% - 2.5px),
    var(--copper-300) calc(100% - 2.5px) 100%);
  opacity:calc(var(--reveal,0) * (1 - var(--reveal,0)) * 3);
  filter:drop-shadow(0 0 12px rgba(216,165,124,.55));
}

@media (prefers-reduced-motion:reduce){
  .navmenu__edge{display:none}
}