/* Başak Kır Pidesi — polish katmanı (site.css'ten SONRA yüklenir) v1
   Amaç: kompozisyon/tipografi/ritim cilası + erişilebilirlik. Ağır/her-zaman-açık efekt YOK. */

:root{
  --ease:cubic-bezier(.2,.7,.2,1);
  --r-lg:22px; --r-md:16px;
}

/* sabit header altında ankraj hizalama */
html{scroll-padding-top:92px}

/* erişilebilirlik: içeriğe geç + görünür focus */
.skip{position:fixed;left:14px;top:-60px;z-index:200;background:var(--gold);color:#1a1300;font-weight:800;
  padding:10px 16px;border-radius:10px;transition:top .2s var(--ease)}
.skip:focus{top:14px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,.th:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
:focus:not(:focus-visible){outline:none}

/* TİPOGRAFİ RİTMİ — display başlıklarda optik sıkılaştırma + denge */
.serif,.h2,.hero h1,.phero h1,.camp h3,.mbody h3,.bcard h3,.ctastrip h2,.soon-hero h1{
  letter-spacing:-.015em;text-wrap:balance}
.lead,.story p,.phero p{text-wrap:pretty}
.eyebrow{position:relative;padding-left:30px}
.eyebrow::before{content:"";position:absolute;left:0;top:50%;width:20px;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold));transform:translateY(-50%)}
.sec-head{margin-bottom:clamp(34px,5vw,56px)}

/* BUTON — premium parlama (yalnız hover'da, GPU-dostu) */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn.primary::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .6s var(--ease)}
.btn.primary:hover::after{transform:translateX(120%)}
.btn{letter-spacing:.01em}

/* KART/PANEL — daha yumuşak, derin gölge ritmi */
.svc,.prod,.camp,.mrow,.bcard,.cform,.bx,.step{border-radius:var(--r-lg)}
.svc:hover,.prod:hover,.camp:hover{box-shadow:0 30px 60px -34px rgba(244,223,22,.45),0 8px 22px -18px rgba(0,0,0,.8)}

/* bölüm üst ince altın hairline (ritim) */
.sec + .sec{border-top:1px solid rgba(244,223,22,.07)}

/* HERO dengesi: lead genişliği + pill ince hizası */
.hero .lead{max-width:540px}
.pill{backdrop-filter:saturate(1.1)}

/* MENÜ satırı: fiyat rozetini daha okunur yap */
.mbody .price,.prod .price{box-shadow:0 6px 16px -8px rgba(244,223,22,.7)}

/* ŞUBE haritası: hover'da renk canlansın */
.bcard .map{transition:filter .4s var(--ease)}
.bcard:hover .map{filter:grayscale(0) contrast(1.02) brightness(1)}

/* İLETİŞİM formu odak hissi */
.cform{box-shadow:0 30px 70px -50px rgba(244,223,22,.4)}

/* marquee biraz daha sakin */
.marquee .track{animation-duration:34s}

/* görsel yüklenirken yumuşak placeholder (CLS azalt) */
.prod .ph,.mimg,.step .ph,.gal a,.feature .imgwrap,.storyimg{background:linear-gradient(135deg,#15100a,#0f0a05)}

/* mobil menü: bağlantı girişine ince kayma */
.mobile a{transition:background .2s var(--ease),transform .2s var(--ease),color .2s var(--ease)}
.mobile.open a{animation:mslide .4s var(--ease) both}
.mobile.open a:nth-child(2){animation-delay:.04s}
.mobile.open a:nth-child(3){animation-delay:.08s}
.mobile.open a:nth-child(4){animation-delay:.12s}
.mobile.open a:nth-child(5){animation-delay:.16s}
.mobile.open a:nth-child(6){animation-delay:.20s}
@keyframes mslide{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* hero 3D fallback (mobil/reduced-motion: statik görsel) */
.stage-fallback{display:none}
.stage-fallback.show{display:block;width:100%;max-width:520px;margin:0 auto;border-radius:24px;
  aspect-ratio:1/1;object-fit:cover;border:1px solid rgba(244,223,22,.3);
  box-shadow:0 40px 90px -34px rgba(0,0,0,.85),0 0 44px -10px rgba(244,223,22,.25)}

/* daha iyi seçim rengi */
::selection{background:rgba(244,223,22,.3);color:#fff}

/* Safari/iOS uyumu: backdrop-filter ön eki */
header.nav.scrolled{-webkit-backdrop-filter:blur(14px)}
.pill{-webkit-backdrop-filter:saturate(1.1)}

/* DAYANIKLILIK: site.js engellenir/yavaşsa içerik ASLA gizli kalmasın.
   JS varsa .in / .ready zaten anında gösterir; bu yedek 2.4sn'de garantiler. */
@keyframes fadeFallback{to{opacity:1;transform:none}}
html.js .reveal{animation:fadeFallback .6s ease 2.4s forwards}
html.js .reveal.in{animation:none}
html.js .hero .ld{animation:fadeFallback .8s ease 1.8s forwards}
html.js.ready .hero .ld{animation:none}

/* reduced-motion: tüm cila animasyonlarını da kapat */
@media (prefers-reduced-motion:reduce){
  .btn.primary::after,.mobile.open a{animation:none!important;transition:none!important;transform:none!important}
  html.js .reveal,html.js .hero .ld{animation:none!important;opacity:1!important;transform:none!important}
}

/* ============================================================
   ESKİ TARAYICI UYUMU — eski Chrome'da layout ÇÖKMESİN.
   Yeni tarayıcılar @supports negatifini atlar; yalnızca
   ilgili özelliği DESTEKLEMEYEN eski sürümler bu yedekleri alır.
   (site.css'ten SONRA yüklendiği için sıralama: önce vh, sonra svh)
   ============================================================ */

/* 100svh yok (Chrome<108): hero yüksekliği önce 100vh ile garanti,
   destekleyen tarayıcıda hemen altındaki svh satırı bunu ezer. */
.hero{min-height:100vh}
.hero{min-height:100svh}

/* CSS `inset` kısayolu yok (Chrome<87): tam-ekran sabit katmanları
   uzun-yazımla (top/right/bottom/left) konumla — yoksa kayarlar. */
#embers,.hero-bg,.scrim,.lb{top:0;right:0;bottom:0;left:0}

/* `aspect-ratio` yok (Chrome<88): görsel kutuları 0 yükseklikle çökerdi.
   Klasik padding-bottom oranı + mutlak konumlu görselle yedekle. */
@supports not (aspect-ratio: 1 / 1){
  #stage3d{height:min(520px,90vw)}
  .stage-fallback.show{height:min(520px,90vw)}
  .show-card{height:min(70vw,470px)}
  .prod .ph,.step .ph{height:0;padding-bottom:75%}            /* 4:3 */
  .prod .ph > img,.step .ph > img{position:absolute;top:0;left:0;width:100%;height:100%}
  .feature .imgwrap img,.storyimg img{height:auto}
}