/* ============ KÖZ ============ */
:root{
  --bg:#0c0b09;
  --bg-2:#12100d;
  --bone:#ece2d1;
  --bone-dim:#c9bfae;
  --muted:#8f8677;
  --amber:#c97b3c;
  --ember:#d95c2e;
  --line:rgba(236,226,209,.14);
  --line-soft:rgba(236,226,209,.07);
  --serif:"Fraunces", "Iowan Old Style", Georgia, serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --sans:"Inter", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --ease:cubic-bezier(.22,.61,.24,1);
  --pad:clamp(18px,4vw,64px);
}
*{box-sizing:border-box}
html{background:var(--bg); scroll-behavior:smooth}
html.locked, body.locked{overflow:hidden}
body{
  margin:0; background:var(--bg); color:var(--bone);
  font-family:var(--serif); font-weight:300;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--amber); color:#0c0b09}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}

/* film grain */
.grain{
  position:fixed; inset:-50%; z-index:60; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:overlay;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)}
}

/* ============ topbar ============ */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; justify-content:center;
  padding:18px var(--pad);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  mix-blend-mode:difference;
  transition:transform .5s var(--ease), background .4s;
}
.topbar.hide{transform:translateY(-110%)}
.mark{display:inline-flex; align-items:center; line-height:1; text-decoration:none}
.mark-img{height:30px; width:auto; display:block}
.top-mid{text-align:center; color:var(--bone-dim); white-space:nowrap; opacity:.7}
.top-nav{display:flex; justify-content:flex-end; gap:22px}
.top-nav a{opacity:.72; transition:opacity .3s}
.top-nav a:hover{opacity:1}
@media(max-width:760px){ .top-mid{display:none} }

/* ============ dil seçici ============ */
.koz-lang{
  position:absolute; right:var(--pad); top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:2px;
}
.koz-lang-b{
  appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bone-dim); opacity:.45; padding:6px 5px; line-height:1;
  transition:opacity .3s, color .3s; position:relative;
  display:inline-flex; align-items:center; justify-content:center;
}
.koz-flag{display:block; width:16px; height:11px; line-height:0}
.koz-flag svg{
  display:block; width:100%; height:100%;
  border-radius:1px; overflow:hidden;
  outline:1px solid rgba(0,0,0,.28);
  box-shadow:0 0 0 .5px rgba(236,226,209,.18);
}
.koz-lang-b:hover{opacity:.85}
.koz-lang-b.on{opacity:1; color:var(--bone)}
.koz-lang-b.on::after{
  content:''; position:absolute; left:5px; right:5px; bottom:1px; height:1px;
  background:currentColor; opacity:.8;
}
@media(max-width:760px){
  .koz-lang{right:calc(var(--pad) * .6); gap:0}
  .koz-lang-b{padding:6px 4px}
  .koz-flag{width:14px; height:9.6px}
}

/* ============ ilk giriş dil seçimi (sadece bayrak) ============ */
html.koz-intro-open, html.koz-intro-open body{overflow:hidden}
.koz-intro{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:#0c0b09;
  opacity:0; animation:kozIntroIn .5s ease forwards;
}
.koz-intro.out{animation:kozIntroOut .4s ease forwards}
@keyframes kozIntroIn{from{opacity:0} to{opacity:1}}
@keyframes kozIntroOut{from{opacity:1} to{opacity:0}}
.koz-intro-inner{display:flex; align-items:center; justify-content:center; gap:clamp(22px,6vw,64px)}
.koz-intro-b{
  appearance:none; background:none; border:0; cursor:pointer; padding:14px;
  opacity:.62; transition:opacity .35s, transform .35s;
  display:inline-flex; align-items:center; justify-content:center;
}
.koz-intro-b:hover, .koz-intro-b:focus-visible{opacity:1; transform:translateY(-3px); outline:none}
.koz-intro-flag{display:block; width:clamp(52px,11vw,88px); line-height:0}
.koz-intro-flag svg{
  display:block; width:100%; height:auto;
  border-radius:2px;
  outline:1px solid rgba(236,226,209,.22);
  box-shadow:0 10px 40px rgba(0,0,0,.65);
}
@media(max-width:760px){
}

@media(prefers-reduced-motion:reduce){
  .koz-intro, .koz-intro.out{animation-duration:.01s}
}

/* ============ hero ============ */
.hero{
  position:relative; min-height:100svh; padding:0 var(--pad) 34px;
  display:grid; grid-template-rows:1fr auto; overflow:hidden;
  isolation:isolate;
}
/* Mobil: hero bir tık kısa tutulur ki marka şeridi ilk ekranın altında
   görünür olsun (kaydırma ipucu yerine doğrudan şerit). */
@media(max-width:760px){
  .hero{min-height:0; height:calc(100svh - 132px); padding-bottom:16px}
  .hero-foot{padding-top:12px}
  .scroll-cue{display:none}
  .hero-typewrap{margin-top:clamp(78px,12vh,110px)}
}
.hero{padding-top:calc(34px + env(safe-area-inset-top,0px))}
.hero-media{position:absolute; inset:0; z-index:-2; overflow:hidden}
.hero-media picture{display:block; width:100%; height:100%}
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  transform:scale(1.04);
  filter:saturate(.72) contrast(1.08) brightness(.72) sepia(.12);
  animation:heroIn 2.4s var(--ease) both;
}
@keyframes heroIn{from{transform:scale(1.12); opacity:.2} to{transform:scale(1.04); opacity:1}}
.hero-veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(12,11,9,.55) 78%, rgba(12,11,9,.96) 100%),
    linear-gradient(180deg, rgba(12,11,9,.72) 0%, transparent 22%, transparent 56%, rgba(12,11,9,.92) 100%);
}
.hero-typewrap{align-self:center; margin-top:clamp(96px,14vh,150px)}
.hero-title{
  margin:0; font-weight:300; font-size:clamp(54px,10.5vw,158px); line-height:.9;
  letter-spacing:-.03em; max-width:9.5ch; text-wrap:nowrap;
}
.hero-title em{font-style:italic; font-weight:300; color:var(--amber); margin-left:0}
@keyframes titleIn{from{opacity:0; transform:translateY(34px)} to{opacity:1; transform:none}}
.hero-side{
  position:absolute; right:var(--pad); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:16px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-dim);
}
.hero-side .hero-rule{width:1px; height:64px; background:var(--line)}
.hero-side-txt{text-align:center; line-height:2; opacity:.65}
.hero-no{color:var(--amber)}
@media(max-width:900px){.hero-side{display:none}}
.hero-foot{
  display:flex; justify-content:space-between; align-items:flex-end; gap:30px;
  padding-top:26px;
}
.hero-foot p{max-width:44ch; margin:0; font-size:15px; line-height:1.65; color:var(--bone-dim)}
.scroll-cue{
  display:flex; align-items:center; gap:12px; flex:none;
  font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-dim);
}
.scroll-cue i{display:block; width:52px; height:1px; background:var(--bone-dim); transition:width .4s var(--ease); position:relative}
.hero-foot .scroll-cue{margin-left:auto}
.scroll-cue i::after{content:""; position:absolute; right:0; top:-2.5px; width:6px; height:6px; border-right:1px solid var(--bone-dim); border-bottom:1px solid var(--bone-dim); transform:rotate(-45deg)}
.scroll-cue:hover i{width:74px}

/* ============ bottom nav ============
   Yüzen kapsül değil: ekranın alt kenarına tam oturan sabit sekme
   çubuğu. Köşe yuvarlaması yok, cam/bulanıklık yok, gölge yok.
   İçerik barın arkasına girmesin diye body'de --navbar kadar boşluk var. */
:root{
  --navbar:calc(62px + env(safe-area-inset-bottom, 0px));
}
body{padding-bottom:var(--navbar)}
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0;
  z-index:95;
  display:flex; align-items:stretch; gap:0; padding:0;
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:#0d0b09;
  border-top:1px solid rgba(236,226,209,.12);
  border-radius:0;
  box-shadow:none;
  transform:none;
  transition:transform .35s var(--ease), opacity .3s var(--ease);
  animation:none;
}
@keyframes navIn{from{opacity:0} to{opacity:1}}
/* Kilitli ekranlar (ürün reels'i, sheet) sekme çubuğunu gizlemez: anasayfadaki
   kategoriler/sepet/hesap çubuğu ürün reels'inde de görünür ve çalışır.
   Kilitte yalnız sayfa kaydırması durur. */
.bottom-nav{
  /* Sekme çubuğu kendi zeminini taşır: reels/sheet katmanlarının üstünde
     kalırken sahnenin görüntüsü altından sızmasın. */
  background:#0d0b09;
}
.bn-item{
  position:relative; flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  min-width:0; height:62px; padding:8px 4px 7px;
  border-radius:0;
  color:var(--muted);
  font-family:var(--sans, "Inter", system-ui, -apple-system, sans-serif);
  font-size:11px; letter-spacing:0; text-transform:none; line-height:1;
  transition:color .3s var(--ease), background .3s var(--ease);
}
/* aktif sekmenin üstünde ince köz çizgisi */
.bn-item::before{
  content:""; position:absolute; top:-1px; left:22%; right:22%; height:1px;
  background:linear-gradient(90deg, transparent, var(--ember), transparent);
  opacity:0; transition:opacity .35s var(--ease);
}
.bn-ico{position:relative; display:flex; align-items:center; justify-content:center; color:var(--muted); transition:color .3s var(--ease)}
.bn-ico svg{width:20px; height:20px; display:block}
.bn-label{font-size:11px; letter-spacing:0; font-weight:450; transition:color .3s var(--ease)}
.bn-item:hover{color:var(--bone-dim); background:rgba(236,226,209,.04)}
.bn-item:hover .bn-ico{color:var(--bone-dim)}
.bn-item.is-active{color:var(--bone); background:none}
.bn-item.is-active .bn-ico{color:var(--amber)}
.bn-item.is-active::before{opacity:1}

/* ---------- Kategoriler sekmesi işareti ----------
   Kadran çemberi + üzerinde yavaşça dönen ince yay + merkezde nabız gibi
   atan köz. Kategoriler ekranı bir kadran olduğu için işaret onun minyatürü:
   sade, tek renk, ince çizgi; hareket 8 sn'lik tek tur, göz yormaz. */
.bn-item--cat .cat-mark{width:20px; height:20px; overflow:visible}
.bn-item--cat .cm-ring{
  fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round;
  opacity:.45;
}
.bn-item--cat .cm-dash{
  fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round;
  stroke-dasharray:4.6 4.4;
  transform-origin:24px 24px; animation:catOrbit 14s linear infinite;
  opacity:.85;
}
.bn-item--cat .cm-core{
  fill:currentColor; transform-origin:24px 24px;
  animation:catEmber 3.2s ease-in-out infinite;
}
@keyframes catOrbit{from{transform:rotate(0)} to{transform:rotate(360deg)}}
@keyframes catEmber{
  0%,100%{opacity:.55; transform:scale(.82)}
  50%{opacity:1; transform:scale(1.05)}
}
.bn-item--cat:active .cm-core{animation:none; opacity:1; transform:scale(1.35)}
.bn-item--cat:hover .cm-ring{opacity:.7}
.bn-item--cat:hover .cm-dash{opacity:1}
.bn-item.is-active .cm-core{opacity:1}
@media(prefers-reduced-motion:reduce){
  .bn-item--cat .cm-arc,.bn-item--cat .cm-core{animation:none}
  .bn-item--cat .cm-core{opacity:.9}
}
.bn-badge{
  position:absolute; top:-3px; right:-9px; min-width:14px; height:14px; padding:0 4px;
  display:flex; align-items:center; justify-content:center; border-radius:999px;
  background:var(--amber); color:#0c0b09;
  font-family:var(--mono); font-size:8px; font-weight:500; letter-spacing:0;
}
@media(max-width:620px){
  :root{--navbar:calc(58px + env(safe-area-inset-bottom, 0px))}
  .bn-item{height:58px; padding:7px 4px 6px}
  .bn-ico svg{width:19px; height:19px}
  .bn-label{font-size:10.5px; letter-spacing:0}
}

@media(max-width:760px){
}

@media(prefers-reduced-motion:reduce){
  .koz-intro, .koz-intro.out{animation-duration:.01s}
}

/* ============ hero ============ */
.hero{
  position:relative; min-height:100svh; padding:0 var(--pad) 34px;
  display:grid; grid-template-rows:1fr auto; overflow:hidden;
  isolation:isolate;
}
/* Mobil: hero bir tık kısa tutulur ki marka şeridi ilk ekranın altında
   görünür olsun (kaydırma ipucu yerine doğrudan şerit). */
@media(max-width:760px){
  .hero{min-height:0; height:calc(100svh - 132px); padding-bottom:16px}
  .hero-foot{padding-top:12px}
  .scroll-cue{display:none}
  .hero-typewrap{margin-top:clamp(78px,12vh,110px)}
}
.hero{padding-top:calc(34px + env(safe-area-inset-top,0px))}
.hero-media{position:absolute; inset:0; z-index:-2; overflow:hidden}
.hero-media picture{display:block; width:100%; height:100%}
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  transform:scale(1.04);
  filter:saturate(.72) contrast(1.08) brightness(.72) sepia(.12);
  animation:heroIn 2.4s var(--ease) both;
}
@keyframes heroIn{from{transform:scale(1.12); opacity:.2} to{transform:scale(1.04); opacity:1}}
.hero-veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(12,11,9,.55) 78%, rgba(12,11,9,.96) 100%),
    linear-gradient(180deg, rgba(12,11,9,.72) 0%, transparent 22%, transparent 56%, rgba(12,11,9,.92) 100%);
}
.hero-typewrap{align-self:center; margin-top:clamp(96px,14vh,150px)}
.hero-title{
  margin:0; font-weight:300; font-size:clamp(54px,10.5vw,158px); line-height:.9;
  letter-spacing:-.03em; max-width:9.5ch; text-wrap:nowrap;
}
.hero-title em{font-style:italic; font-weight:300; color:var(--amber); margin-left:0}
@keyframes titleIn{from{opacity:0; transform:translateY(34px)} to{opacity:1; transform:none}}
.hero-side{
  position:absolute; right:var(--pad); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:16px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-dim);
}
.hero-side .hero-rule{width:1px; height:64px; background:var(--line)}
.hero-side-txt{text-align:center; line-height:2; opacity:.65}
.hero-no{color:var(--amber)}
@media(max-width:900px){.hero-side{display:none}}
.hero-foot{
  display:flex; justify-content:space-between; align-items:flex-end; gap:30px;
  padding-top:26px;
}
.hero-foot p{max-width:44ch; margin:0; font-size:15px; line-height:1.65; color:var(--bone-dim)}
.scroll-cue{
  display:flex; align-items:center; gap:12px; flex:none;
  font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-dim);
}
.scroll-cue i{display:block; width:52px; height:1px; background:var(--bone-dim); transition:width .4s var(--ease); position:relative}
.hero-foot .scroll-cue{margin-left:auto}
.scroll-cue i::after{content:""; position:absolute; right:0; top:-2.5px; width:6px; height:6px; border-right:1px solid var(--bone-dim); border-bottom:1px solid var(--bone-dim); transform:rotate(-45deg)}
.scroll-cue:hover i{width:74px}

/* ============ bottom nav ============ */
/* ============ bottom sheet ============ */
.sheet{position:fixed; inset:0; bottom:var(--navbar); z-index:70; display:flex; align-items:flex-end; justify-content:center; pointer-events:none}
.sheet-veil{
  position:absolute; inset:0; background:rgba(7,6,5,.62); opacity:0;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  transition:opacity .4s var(--ease); cursor:default;
}
.sheet-panel{
  position:relative; width:min(440px, 100%); margin:0 12px 12px;
  padding:26px 26px 24px; border-radius:22px;
  background:linear-gradient(180deg, #15120e, #100e0b);
  border:1px solid rgba(236,226,209,.1);
  box-shadow:0 30px 80px -30px rgba(0,0,0,1), inset 0 1px 0 rgba(236,226,209,.07);
  transform:translateY(28px); opacity:0;
  transition:transform .45s var(--ease), opacity .35s var(--ease);
}
.sheet.open{pointer-events:auto}
.sheet-veil{bottom:calc(-1 * var(--navbar))}
.sheet.open .sheet-veil{opacity:1}
.sheet.open .sheet-panel{transform:none; opacity:1}
.sheet-grab{display:block; width:34px; height:2px; margin:-8px auto 22px; border-radius:2px; background:rgba(236,226,209,.18)}
.sheet-panel .eyebrow{margin-bottom:10px}
.sheet-panel h3{margin:0 0 10px; font-weight:300; font-size:26px; letter-spacing:-.02em; line-height:1.15}
.sheet-panel p{margin:0 0 22px; font-size:14px; line-height:1.65; color:var(--muted)}
.sheet-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px; border-radius:999px; border:1px solid rgba(201,123,60,.45);
  color:var(--bone); font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.sheet-cta:hover{background:var(--amber); border-color:var(--amber); color:#0c0b09}
.sheet-x{position:absolute; top:14px; right:14px; padding:8px; color:var(--muted); transition:color .3s}
.sheet-x:hover{color:var(--bone)}
@media(max-width:620px){ .sheet-panel{margin:0 12px 12px; border-radius:22px} }
/* Sepet hesap/takip gibi tam ekran değil: normal pencere, sekmeler her zaman
   erişilebilir. Panel sekme çubuğunun üstünde ortalanır ve içi kayar. */
.sheet--cart .sheet-veil{ background:rgba(7,6,5,.78) }
.sheet--cart .sheet-panel{
  padding:30px 26px 24px; border-radius:20px;
  border:1px solid rgba(236,226,209,.14);
  box-shadow:0 40px 90px -34px rgba(0,0,0,1), 0 0 0 1px rgba(0,0,0,.5), inset 0 1px 0 rgba(236,226,209,.08);
  max-height:calc(100dvh - var(--navbar) - 32px); overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.sheet--cart .sheet-panel h3{ font-size:28px; line-height:1.15 }
.sheet--cart .sheet-grab{ display:none }
.sheet--cart .sheet-x{ top:16px; right:16px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:rgba(236,226,209,.05); border:1px solid var(--line-soft); padding:0 }
.sheet--cart .sheet-x:hover{ background:rgba(236,226,209,.12); color:var(--bone) }
.sheet--cart .cart-list{ max-height:none; overflow:visible; margin:20px 0 6px; gap:0 }
.sheet--cart .cart-row{ padding:14px 0; border-top:1px solid var(--line-soft) }
.sheet--cart .cart-row img{ width:54px; height:54px; border-radius:8px; background:rgba(236,226,209,.03) }
.sheet--cart .cart-info strong{ font-size:17px; letter-spacing:-.01em }
.sheet--cart .cart-info span{ margin-top:1px }
.sheet--cart .cart-rm{ width:30px; height:30px; transition:color .25s, border-color .25s, background .25s }
.sheet--cart .cart-rm:hover{ background:rgba(217,92,46,.12) }
.sheet--cart .cart-form{ margin-top:18px; padding-top:18px; border-top:1px solid var(--line) }
.sheet--cart .cf-who{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:4px }
.sheet--cart .cart-submit{ margin-top:8px; padding:15px 18px; letter-spacing:0; font-size:15px }
.sheet--cart .cart-track-link{ margin-top:16px }
/* Sepet + geçmiş: tam ekran panel */
.sheet.full{ bottom:0 }
.sheet.full .sheet-veil{ background:rgba(7,6,5,.92) }
.sheet.full .sheet-panel{
  width:100%; max-width:100%; height:100%; margin:0; border-radius:0; border:0;
  padding:calc(22px + env(safe-area-inset-top)) 20px calc(30px + env(safe-area-inset-bottom));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  box-shadow:none; background:linear-gradient(180deg,#14110d,#0b0a08 60%);
}
.sheet.full .sheet-grab{ display:none }
.sheet.full .sheet-x{ top:calc(14px + env(safe-area-inset-top)); right:14px }
.sheet.full .sheet-panel h3{ font-size:30px }
.sheet.full .sheet-panel .cart-empty-body{ margin-bottom:18px }
.oc-cancel{
  margin-right:auto; padding:10px 14px; border-radius:999px; font-family:var(--mono);
  font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:#e07a5f; border:1px solid rgba(224,122,95,.4); background:transparent;
  cursor:pointer; transition:background .25s, color .25s;
}
.oc-cancel:hover{ background:rgba(224,122,95,.12); color:#f09070 }
.oc-hist{ margin:18px 0 4px; border-top:1px solid rgba(236,226,209,.09); padding-top:14px }
.oc-hist-cap{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:10px }
.oc-hist-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  padding:11px 2px; border:0; border-bottom:1px solid rgba(236,226,209,.06); background:transparent;
  color:var(--bone); font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-align:left;
}
.oc-hist-row:hover{ color:var(--amber) }
.oc-hist-code{ font-size:12px }

@media(max-width:700px){
  .hero{min-height:92svh}
  .hero-foot{flex-direction:column; align-items:flex-start; gap:18px}
  .scroll-cue{display:none}
}

/* ============ sections ============ */
.cats{padding:clamp(80px,12vh,150px) var(--pad) clamp(60px,9vh,110px)}
.sec-head{
  display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:end;
  padding-bottom:clamp(38px,6vh,70px); border-bottom:1px solid var(--line);
}
.eyebrow{
  display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--amber); margin-bottom:22px;
}
.sec-head h2{margin:0; font-weight:300; font-size:clamp(38px,5.6vw,84px); line-height:.96; letter-spacing:-.03em}
.sec-head h2 em{font-style:italic; color:var(--bone-dim)}
.sec-note{margin:0 0 6px; max-width:38ch; justify-self:end; font-size:14.5px; line-height:1.7; color:var(--muted)}
@media(max-width:820px){
  .sec-head{grid-template-columns:1fr; gap:22px}
  .sec-note{justify-self:start}
}

/* category grid */
.cat-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2.2vw,30px);
  padding-top:clamp(34px,5vh,60px);
}
.cat-card{
  position:relative; display:block; overflow:hidden; cursor:pointer; text-align:left;
  aspect-ratio:4/4.7; background:#15120e; border:1px solid var(--line-soft);
  opacity:0; transform:translateY(38px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.cat-card.in{opacity:1; transform:none}
.cat-card:nth-child(even){margin-top:clamp(20px,5vw,78px)}
.cat-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.66) brightness(.7) contrast(1.06);
  transform:scale(1.02); transition:transform 1.1s var(--ease), filter .8s var(--ease);
}
.cat-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,11,9,.06) 0%, rgba(12,11,9,.24) 45%, rgba(12,11,9,.9) 100%);
  transition:opacity .5s;
}
.cat-card:hover img{transform:scale(1.09); filter:saturate(.9) brightness(.82) contrast(1.06)}
.cat-card:hover::after{opacity:.86}
.cat-top{
  position:absolute; z-index:2; top:clamp(16px,2vw,26px); left:clamp(16px,2vw,26px); right:clamp(16px,2vw,26px);
  display:flex; justify-content:space-between; align-items:flex-start;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-dim);
}
.cat-count{opacity:.65}
.cat-body{
  position:absolute; z-index:2; left:clamp(16px,2vw,26px); right:clamp(16px,2vw,26px); bottom:clamp(16px,2vw,28px);
  display:flex; flex-direction:column; gap:12px;
}
.cat-name{
  font-family:var(--serif); font-weight:300; font-size:clamp(26px,3.4vw,52px);
  line-height:1; letter-spacing:-.02em; margin:0;
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
}
.cat-name i{
  font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  color:var(--amber); transform:translateY(-4px);
}
.cat-tag{
  margin:0; font-size:13.5px; line-height:1.55; color:var(--bone-dim); max-width:30ch;
  max-height:0; opacity:0; overflow:hidden; transition:max-height .55s var(--ease), opacity .4s;
}
.cat-card:hover .cat-tag, .cat-card:focus-visible .cat-tag{max-height:60px; opacity:1}
.cat-bar{position:absolute; z-index:2; left:0; bottom:0; height:2px; width:0; background:var(--amber); transition:width .6s var(--ease)}
.cat-card:hover .cat-bar{width:100%}
@media(max-width:720px){
  .cat-grid{grid-template-columns:1fr; gap:16px}
  .cat-card:nth-child(even){margin-top:0}
  .cat-card{aspect-ratio:4/4.2}
  .cat-tag{max-height:60px; opacity:1}
}

/* ============ manifesto ============ */
.manifesto{
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:clamp(26px,5vw,90px);
  padding:clamp(70px,11vh,130px) var(--pad); border-top:1px solid var(--line);
  background:linear-gradient(180deg,#0c0b09,#100e0b);
}
.man-score{display:flex; flex-direction:column; font-size:clamp(60px,10vw,150px); line-height:.8; font-weight:300; color:transparent; -webkit-text-stroke:1px rgba(201,123,60,.55); letter-spacing:-.04em; user-select:none}
.man-body{max-width:900px}
.man-lead{margin:0 0 clamp(36px,5vh,60px); font-size:clamp(22px,2.6vw,38px); line-height:1.34; letter-spacing:-.015em; max-width:26ch}
.man-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,44px); border-top:1px solid var(--line); padding-top:26px}
.man-no{font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--amber)}
.man-cols h3{margin:12px 0 8px; font-weight:500; font-size:16px; letter-spacing:.01em}
.man-cols p{margin:0; font-size:13.5px; line-height:1.65; color:var(--muted)}
@media(max-width:820px){
  .manifesto{grid-template-columns:1fr}
  .man-score{flex-direction:row; gap:6px; font-size:56px}
  .man-cols{grid-template-columns:1fr; gap:22px}
}

/* ============ visit ============ */
.visit{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px);
  padding:clamp(70px,10vh,120px) var(--pad); border-top:1px solid var(--line);
}
.visit h2{margin:0; font-weight:300; font-size:clamp(30px,4vw,58px); line-height:1.06; letter-spacing:-.025em}
.visit h2 em{font-style:italic; color:var(--amber)}
.visit-right{display:flex; flex-direction:column; justify-content:flex-end}
.visit-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:16px 0; border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.visit-row strong{font-family:var(--serif); font-size:16px; font-weight:300; letter-spacing:0; text-transform:none; color:var(--bone)}
.visit-row a.plain{border-bottom:1px solid var(--amber); color:var(--amber); padding-bottom:2px}
@media(max-width:760px){.visit{grid-template-columns:1fr; gap:34px}}

/* ============ footer ============ */
.site-foot{
  padding:clamp(10px,1.6vh,16px) var(--pad) calc(14px + 26px); border-top:1px solid var(--line);
  display:flex; flex-direction:column;
  gap:0;
}
.foot-brand{
  font-family:var(--serif); font-size:clamp(64px,13vw,132px); line-height:1; letter-spacing:-.045em; font-weight:300;
  color:transparent; -webkit-text-stroke:1px rgba(236,226,209,.30);
  margin:-.06em 0 0 -.02em; user-select:none; align-self:flex-start;
  display:block; overflow:visible; padding-bottom:.06em;
}
.foot-row{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-top:clamp(10px,1.6vh,16px); padding-top:0;
  border-top:0;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  line-height:1.6; width:100%;
}
.foot-dot{opacity:.45; transform:translateY(-1px)}
.foot-copy{margin-left:auto; white-space:nowrap}
@media(max-width:760px){
  .foot-brand{font-size:clamp(72px,26vw,150px); -webkit-text-stroke:1px rgba(236,226,209,.24)}
  .foot-row{gap:6px 8px; font-size:9px; letter-spacing:.12em}
  .foot-copy{margin-left:0; width:100%; opacity:.75}
}

/* ============ reels ============ */
.reels{
  position:fixed; inset:0; z-index:60; background:#070605;
  transform:translateY(100%); visibility:hidden;
  transition:transform .16s var(--ease), visibility .16s;
}
.reels.open{transform:none; visibility:visible}
/* Kadran sahnesi bir kez kurulunca kapanışta gizlenen .reels bileşen
   transform'uyla karartılıyordu; sahne yeniden açılışta kendi transform
   geçişiyle geliyordu. Sahne açıkken geçiş kapalı: anında görünsün. */
.reels.mode-orbit{transition:none}
.reels-track{
  position:relative; height:100%; overflow:hidden;
  touch-action:none; overscroll-behavior:none;
}
.reels-track::-webkit-scrollbar{display:none}

.reel{
  position:absolute; inset:0; height:100%; min-height:0; overflow:hidden;
  display:flex; align-items:flex-end;
  isolation:isolate; background:#0c0b09;
  will-change:transform; backface-visibility:hidden;
  transform:translate3d(0,100%,0);
}
.reel-media{position:absolute; inset:0; z-index:-2}
.reel-media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  user-select:none; -webkit-user-drag:none;
}
.reel-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,6,5,.72) 0%, rgba(7,6,5,.06) 25%, rgba(7,6,5,.1) 45%, rgba(7,6,5,.88) 82%, rgba(7,6,5,.98) 100%);
}
.reel-accent{position:absolute; inset:0; z-index:-1; opacity:.12; background:var(--accent,#c97b3c)}

.reel-inner{
  position:relative; z-index:2; width:100%;
  padding:0 var(--pad) clamp(74px,10vh,110px);
  display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end;
}
.reel-copy{max-width:820px; transform:translateY(2px)}
.reel-series{
  display:flex; align-items:center; gap:14px; margin-bottom:clamp(12px,2.5vh,24px);
  font-family:var(--mono); font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--bone-dim);
}
.reel-series::before{content:""; width:26px; height:1px; background:var(--amber)}
.reel-name{
  margin:0 0 18px; font-weight:300; font-size:clamp(38px,7.2vw,104px); line-height:.92;
  letter-spacing:-.035em; text-shadow:0 4px 18px rgba(0,0,0,.28);
}
.reel-notes{display:flex; flex-wrap:wrap; gap:8px 0; margin:0 0 16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim)}
.reel-notes span{display:flex; align-items:center}
.reel-notes span+span::before{content:"/"; margin:0 12px; color:var(--amber); opacity:.8}
.reel-desc{margin:0 0 22px; max-width:52ch; font-size:14.5px; line-height:1.65; color:var(--bone-dim)}
.reel-meta{display:flex; align-items:flex-end; gap:28px; flex-wrap:wrap}
.reel-price{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--bone)}
.reel-price b{font-weight:400}

/* desktop side panel note */
.reel-note{
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--mono); font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:rgba(236,226,209,.4);
  align-self:end; padding-bottom:6px;
}
@media(max-width:760px){ .reel-note{display:none} .reel-inner{grid-template-columns:1fr} }

/* top bar */
.reels-topbar{
  position:absolute; z-index:6; inset:0 0 auto 0;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px var(--pad);
  background:linear-gradient(180deg, rgba(7,6,5,.7), transparent);
}
.reels-back{
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim);
  padding:8px 12px 8px 8px; border:1px solid var(--line); border-radius:999px;
  background:rgba(7,6,5,.6);
  transition:border-color .3s, color .3s;
}
.reels-back:hover{border-color:var(--amber); color:var(--bone)}
.reels-head{display:flex; align-items:center; gap:16px; font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase}
.reels-cat{color:var(--bone)}
.reels-idx{color:var(--amber)}
.reels-brand{font-family:var(--serif); font-size:15px; letter-spacing:.2em; color:rgba(236,226,209,.55)}

/* action rail — like / cart */
.reel-actions{
  position:absolute; z-index:5; right:clamp(12px,2.6vw,26px); bottom:clamp(110px,22vh,190px);
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.ra-btn{display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--bone)}
.ra-btn svg{
  width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .2s var(--ease), fill .2s, stroke .2s;
}
.ra-btn .ra-count, .ra-btn .ra-label{
  font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(236,226,209,.72);
}
.ra-btn.on[data-act="like"] svg{fill:var(--amber); stroke:var(--amber)}
.ra-btn.on[data-act="cart"] svg{stroke:var(--amber)}
.ra-btn.on[data-act="cart"] .ra-label{color:var(--amber)}
.ra-btn.pop svg{animation:raPop .32s var(--ease)}
@keyframes raPop{0%{transform:scale(1)}45%{transform:scale(1.25)}100%{transform:scale(1)}}

.reels-hint{
  position:absolute; z-index:6; bottom:16px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  opacity:0; pointer-events:none; transition:opacity .4s;
  font-family:var(--mono); font-size:8px; letter-spacing:.26em; text-transform:uppercase; color:rgba(236,226,209,.5);
}
.reels-hint.show{opacity:1}
.reels-hint{display:none !important}
.reels-hint i{width:1px; height:22px; background:linear-gradient(180deg, rgba(236,226,209,.6), transparent); animation:hintNudge 1.8s ease-in-out infinite}
@keyframes hintNudge{0%,100%{transform:translateY(0); opacity:.5} 50%{transform:translateY(-5px); opacity:1}}

/* close */
.reels-close{
  position:relative; z-index:9; width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%; color:var(--bone-dim);
  background:rgba(7,6,5,.55); font-size:18px; line-height:1;
  transition:.3s;
}
.reels-close:hover{color:var(--bone); border-color:var(--amber)}

/* ---------- brand slides ---------- */
.brand-slide{cursor:pointer}
.brand-slide .reel-media::after{background:none}
.brand-grad{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(7,6,5,.72) 0%, rgba(7,6,5,.1) 32%, rgba(7,6,5,.16) 55%, rgba(7,6,5,.9) 100%);
}
.brand-grad::after{
  content:""; position:absolute; inset:0; background:var(--accent); opacity:.1;
}
.brand-inner{
  position:relative; z-index:2; width:100%; height:100%;
  padding:76px var(--pad) 30px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.brand-top, .brand-foot{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(236,226,209,.55);
  padding-bottom:14px; border-bottom:1px solid rgba(236,226,209,.18);
}
.brand-top span:first-child{color:var(--accent)}
.brand-foot{border-bottom:0; border-top:1px solid rgba(236,226,209,.16); padding:14px 0 0}
.brand-foot span:last-child{color:rgba(236,226,209,.4)}

.brand-core{margin:auto 0; max-width:1100px}
.brand-mark{width:44px; height:44px; color:var(--accent); margin-bottom:clamp(14px,3vh,26px); opacity:.95}
.brand-mark svg{width:100%; height:100%}
.brand-name{
  margin:0 0 clamp(14px,2.6vh,26px); font-weight:300;
  font-size:clamp(58px,13.2vw,188px); line-height:.84; letter-spacing:-.04em;
  text-wrap:balance;
}
[data-slug="adalya"] .brand-name{font-style:italic; letter-spacing:-.03em}
[data-slug="daim"] .brand-name{font-family:var(--mono); font-weight:400; text-transform:uppercase; letter-spacing:-.015em; font-size:clamp(46px,9.4vw,132px)}
[data-slug="manterra"] .brand-name{text-transform:uppercase; font-weight:300; letter-spacing:.015em; font-size:clamp(40px,8.6vw,122px)}
[data-slug="smogmoon"] .brand-name{text-transform:lowercase; letter-spacing:-.05em; font-size:clamp(52px,12vw,170px)}
.brand-tag{
  margin:0 0 clamp(18px,3.4vh,32px); max-width:36ch;
  font-size:clamp(14px,1.5vw,19px); line-height:1.6; color:rgba(236,226,209,.78);
}
.brand-enter{
  display:inline-flex; align-items:center; gap:16px; padding:13px 20px;
  border:1px solid rgba(236,226,209,.3); border-radius:999px;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--bone);
  background:rgba(7,6,5,.45); transition:.3s;
}
.brand-enter i{font-style:normal; transition:transform .35s var(--ease)}
.brand-enter:hover{border-color:var(--accent); background:rgba(201,123,60,.14)}
.brand-enter:hover i{transform:translateX(4px)}

.mode-brands .reels-back{display:flex}
.mode-brands .reels-head{display:none}
.mode-brands .reels-close{display:none}
.mode-brands .reels-topbar{background:none; justify-content:flex-start; padding:16px var(--pad)}
.mode-brands .reels-hint{display:none}

@media(max-width:760px){
  .brand-inner{padding:68px var(--pad) 22px}
  .brand-foot span:last-child{display:none}
  .brand-mark{width:34px; height:34px}
  .reel-inner{padding:0 calc(var(--pad) + 34px) clamp(70px,10vh,100px) var(--pad)}
  .reel-actions{right:10px; bottom:auto; top:50%; transform:translateY(-50%); gap:15px}
}

@media(max-width:760px){
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

.sheet-cta[hidden]{display:none}

.toast{
  position:fixed; z-index:200; left:50%; bottom:calc(18px + var(--navbar));
  transform:translate(-50%, 8px);
  padding:10px 18px; border-radius:999px; border:1px solid rgba(201,123,60,.45);
  background:rgba(7,6,5,.92); color:var(--bone);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  opacity:0; visibility:hidden; transition:opacity .22s, transform .22s, visibility .22s;
}
.toast.show{opacity:1; visibility:visible; transform:translate(-50%, 0)}

.cart-list{display:flex; flex-direction:column; gap:12px; margin:16px 0 12px; max-height:44vh; overflow:auto}
.cart-row{display:flex; align-items:center; gap:12px; padding-top:12px; border-top:1px solid var(--line)}
.cart-row img{width:46px; height:46px; object-fit:cover; border-radius:6px; flex:0 0 auto}
.cart-info{display:flex; flex-direction:column; gap:3px; margin-right:auto}
.cart-info strong{font-family:var(--serif); font-weight:400; font-size:16px; color:var(--bone)}
.cart-info span{font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.cart-rm{width:26px; height:26px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--bone-dim); font-size:15px; line-height:1}
.cart-rm:hover{color:var(--bone); border-color:var(--amber)}
.cart-note{font-family:var(--sans); font-size:12px; letter-spacing:0; text-transform:none; color:var(--muted); line-height:1.5}

/* ---------- sipariş formu (sepet içi) ---------- */
.cart-form{display:flex; flex-direction:column; gap:10px; margin-top:4px}
.cf-row{display:grid; gap:10px}
.cf-row.cf-2{grid-template-columns:1fr 1fr}
@media(max-width:420px){.cf-row.cf-2{grid-template-columns:1fr}}
.cf-field{display:flex; flex-direction:column; gap:5px}
.cf-field > span{font-family:var(--sans); font-size:13px; letter-spacing:0; text-transform:none; color:var(--bone-dim); font-weight:450}
.cf-field input,.cf-field textarea{
  width:100%; background:rgba(236,226,209,.03); border:1px solid var(--line);
  border-radius:8px; padding:12px 14px; color:var(--bone); min-height:46px;
  font-family:var(--sans); font-size:16px; font-weight:400; outline:none; resize:vertical;
  transition:border-color .2s var(--ease), background .2s;
}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:rgba(143,134,119,.7); font-size:14px}
.cf-field input:focus,.cf-field textarea:focus{border-color:var(--amber); background:rgba(236,226,209,.05)}
.cf-error{margin:0; font-family:var(--sans); font-size:13px; letter-spacing:0; text-transform:none; color:var(--ember); line-height:1.45}
.cart-submit{
  margin-top:2px; padding:13px 18px; border-radius:3px;
  background:var(--amber); color:#0c0b09; border:1px solid var(--amber);
  font-family:var(--sans); font-size:14px; letter-spacing:0; text-transform:none; font-weight:600;
  transition:background .2s, border-color .2s; border-radius:8px;
}
.cart-submit:hover{background:var(--ember); border-color:var(--ember)}
.cart-submit:disabled{opacity:.55; cursor:default}
.cart-empty-body{margin:0 0 16px; color:var(--bone-dim); font-size:13px; line-height:1.5}
.thanks-actions{margin-top:16px; display:flex; justify-content:center}
.cart-track-link{
  align-self:flex-start; margin-top:4px;
  font-family:var(--sans); font-size:13px; letter-spacing:0; text-transform:none;
  color:var(--bone-dim); border-bottom:1px solid var(--line); padding-bottom:2px;
}
.cart-track-link:hover{color:var(--bone); border-color:var(--amber)}

/* ---------- sipariş / takip kartı ---------- */
.order-card{border:1px solid var(--line); border-radius:4px; padding:16px; background:rgba(236,226,209,.02)}
.oc-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.oc-code{font-family:var(--mono); font-size:12px; letter-spacing:.22em; color:var(--amber)}
.oc-status{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.18em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; border:1px solid currentColor;
}
.oc-status.yeni{color:var(--ember)}
.oc-status.hazirlaniyor{color:var(--amber)}
.oc-status.hazir{color:#8faa79}
.oc-status.teslim{color:var(--muted)}
.oc-status.iptal{color:#a8523f}
.oc-lead{margin:0 0 14px; font-size:15px; line-height:1.5; color:var(--bone-dim)}
.ol-steps{list-style:none; display:flex; gap:0; margin:0 0 16px; padding:0}
.ol-steps li{flex:1; display:flex; flex-direction:column; gap:6px; position:relative;
  font-family:var(--mono); font-size:7.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:center}
.ol-steps li i{height:2px; background:var(--line); border-radius:2px; display:block}
.ol-steps li.on{color:var(--bone-dim)}
.ol-steps li.on i{background:var(--amber)}
.ol-steps li.now{color:var(--bone)}
.ol-steps li.now i{background:var(--ember); box-shadow:0 0 8px rgba(217,92,46,.5)}
.oc-list{margin:0 0 12px; max-height:32vh}
.oc-qty{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--bone-dim)}
.oc-note{margin:0 0 12px; font-size:14px; font-style:italic; color:var(--muted); line-height:1.5}
.oc-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--line-soft)}
.oc-refresh,.oc-new,.track-mine,.track-form button{
  font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim);
}
.oc-refresh:hover,.oc-new:hover,.track-mine:hover{color:var(--bone)}
.oc-new{border-bottom:1px solid var(--line)}
.track-intro{margin:0 0 12px; font-size:15px; color:var(--bone-dim)}
.track-form{display:flex; gap:8px}
.track-form input{
  flex:1; min-width:0; background:rgba(236,226,209,.03); border:1px solid var(--line); border-radius:3px;
  padding:11px 12px; color:var(--bone); font-family:var(--mono); font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; outline:none;
}
.track-form input:focus{border-color:var(--amber)}
.track-form button{padding:11px 16px; border:1px solid var(--line); border-radius:3px; color:var(--bone)}
.track-form button:hover{border-color:var(--amber); color:var(--amber)}
.track-mine{margin-top:12px; border-bottom:1px solid var(--line); padding-bottom:2px}
.track-switch{margin-top:12px}
.track-loading{font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--muted)}

/* ---------- hesap ---------- */
.acc-form{display:flex; flex-direction:column; gap:12px; margin-top:6px}
.acc-intro{margin:0 0 4px; font-family:var(--sans); font-size:14px; line-height:1.55; color:var(--muted)}
.acc-card{display:flex; flex-direction:column; gap:12px}
.acc-lead{margin:0; font-size:16px; line-height:1.5; color:var(--bone)}
.acc-rules{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.acc-rules li{font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); padding-left:14px; position:relative; line-height:1.6}
.acc-rules li::before{content:'—'; position:absolute; left:0; color:var(--amber)}
.acc-name-note{margin:0; font-size:14px; font-style:italic; color:var(--muted);
  padding-top:12px; border-top:1px solid var(--line-soft)}
.acc-gate{display:flex; flex-direction:column; gap:12px; margin-top:14px}
.cf-who{display:flex; align-items:baseline; gap:10px; padding:10px 0 4px}
.cf-who-label{font-family:var(--sans); font-size:12px; letter-spacing:0; text-transform:none; color:var(--muted)}
.cf-who strong{font-family:var(--serif); font-weight:400; font-size:19px; color:var(--bone)}

/* ---------- köz kadranı ---------- */
.orbit{position:absolute; inset:0; z-index:4; display:none; overflow:hidden; transition:opacity .22s; background:
  radial-gradient(50% 34% at 50% 78%, rgba(255,110,34,.035) 0%, rgba(0,0,0,0) 74%),
  #030202}
/* Sahne warm'ken ama kadran modunda değilken (marka/ürün feed'i açıkken)
   z-index 4 ürün feed'inin üstünde kalıp görüntüyü kapatıyordu. */
.reels.orbit-warm:not(.mode-orbit) .orbit{z-index:0}
/* ---------- köz yatağı: saatin altında yanan kor ---------- */
.orbit-embers{position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block; pointer-events:none}
.orbit-bed{position:absolute; left:50%; bottom:-14%; width:min(112vw,1000px); height:50%; z-index:1; pointer-events:none; mix-blend-mode:screen; filter:blur(17px) saturate(1.08); transform-origin:50% 72%; will-change:transform; contain:paint;
  background:
    radial-gradient(16% 19% at 44% 44%, rgba(255,142,50,.62) 0%, rgba(255,84,16,.22) 46%, rgba(0,0,0,0) 76%),
    radial-gradient(13% 16% at 57% 48%, rgba(255,98,22,.54) 0%, rgba(216,48,2,.18) 44%, rgba(0,0,0,0) 78%),
    radial-gradient(9% 12% at 50% 38%, rgba(255,190,96,.46) 0%, rgba(255,116,26,.14) 48%, rgba(0,0,0,0) 80%),
    radial-gradient(46% 40% at 50% 52%, rgba(255,88,18,.24) 0%, rgba(122,28,2,.10) 48%, rgba(0,0,0,0) 78%);
  opacity:calc(.08 + var(--fire,.2) * .92);
  animation:bedBreathe 2.6s cubic-bezier(.45,.05,.55,.95) infinite}
.orbit-bed::after{content:""; position:absolute; left:50%; top:36%; width:34%; height:30%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(closest-side, rgba(255,198,112,.62), rgba(255,96,22,.26) 56%, rgba(255,60,0,0) 80%); filter:blur(9px);
  opacity:calc(.08 + var(--fire,.2) * .9);
  animation:coalGlow 1.9s cubic-bezier(.42,.05,.58,.95) infinite}
@keyframes coalGlow{
  0%,100%{transform:translateX(-50%) scale(1)}
  16%{transform:translateX(-50%) scale(1.05)}
  29%{transform:translateX(-51%) scale(1.01)}
  46%{transform:translateX(-49%) scale(1.07)}
  61%{transform:translateX(-50%) scale(1)}
  77%{transform:translateX(-52%) scale(1.04)}
}
@media(max-width:700px){
  .orbit-bed{bottom:0; height:42%; width:128vw; filter:blur(15px) saturate(1.08)}
  .orbit-bed::after{top:40%; width:30%; height:24%}
}
@keyframes bedBreathe{
  0%,100%{transform:translateX(-50%) scale(1)}
  7%{transform:translateX(-50%) scale(1.025)}
  12%{transform:translateX(-50%) scale(.995)}
  24%{transform:translateX(-50%) scale(1.015)}
  33%{transform:translateX(-50%) scale(1)}
  47%{transform:translateX(-50%) scale(1.04)}
  54%{transform:translateX(-50%) scale(1.005)}
  68%{transform:translateX(-50%) scale(1.02)}
  79%{transform:translateX(-50%) scale(.998)}
  90%{transform:translateX(-50%) scale(1.012)}
}
/* ---- Odun ateşi: saatin altından ön yüze vuran, düzensiz sıcak ışık ----
   Değerler her karede JS'den gelir:
   --fire 0..1 toplam şiddet · --fire-x -1..1 alev yalpası ·
   --fire-h 0..1 alev boyu · --stoke 0..1.4 kadran çevirmenin közü. */
/* Közün saate vuran ışığı: kor yatağının alt-sağ ocağından yüzeye ve
   kasaya düşen sıcak yansıma. --fire 0..1, --fire-x -1..1 (fire-ring.js). */
.dial-heat{position:absolute; inset:-2%; border-radius:50%; z-index:8; pointer-events:none;
  mix-blend-mode:screen;
  will-change:opacity,transform;
  opacity:calc(.20 + var(--fire,.5) * .80);
  background:
    radial-gradient(64% 54% at 70% 80%, rgba(255,190,108,.34) 0%, rgba(255,126,34,.17) 42%, rgba(255,70,0,0) 74%),
    radial-gradient(70% 30% at 46% 104%, rgba(255,176,88,.50) 0%, rgba(255,106,22,.22) 44%, rgba(255,54,0,0) 78%),
    radial-gradient(30% 18% at 26% 99%, rgba(255,150,60,.26) 0%, rgba(255,82,12,.10) 54%, rgba(255,54,0,0) 82%);
  filter:blur(11px) saturate(1.2);
  /* Kare başına blur yeniden hesaplanmasın: katman kendi compositing
     katmanında tutulur, sadece opacity/transform güncellenir. */
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  contain:paint;
  transform:translate3d(calc(var(--fire-x,0) * 8px),0,0);
  transition:opacity .12s linear}
.dial-heat::before{content:""; position:absolute; inset:-1%; border-radius:50%; pointer-events:none;
  will-change:opacity;
  background:conic-gradient(from 96deg at 50% 50%,
    rgba(255,160,58,0) 0deg,
    rgba(255,182,98,.36) 32deg,
    rgba(255,126,30,.20) 62deg,
    rgba(255,126,30,0) 100deg);
  -webkit-mask:radial-gradient(closest-side, transparent 83%, #000 89%, #000 100%);
  mask:radial-gradient(closest-side, transparent 83%, #000 89%, #000 100%);
  filter:blur(2.5px);
  opacity:calc(.26 + var(--fire,.5) * .64);
  transition:opacity .3s linear}
.dial-heat::after{content:""; position:absolute; inset:6%; border-radius:50%; pointer-events:none;
  background:linear-gradient(118deg,
    rgba(255,190,110,0) 34%,
    rgba(255,176,92,.10) 43%,
    rgba(255,226,170,.22) 49%,
    rgba(255,170,86,.09) 56%,
    rgba(255,150,60,0) 68%);
  filter:blur(7px);
  opacity:calc(.30 + var(--fire,.5) * .55);
  transform:translate3d(calc(var(--fire-x,0) * -9px),0,0)}
@keyframes rimFlame{
  0%,100%{opacity:.42}
  9%{opacity:.86}
  21%{opacity:.5}
  34%{opacity:.78}
  47%{opacity:.44}
  58%{opacity:.9}
  70%{opacity:.52}
  83%{opacity:.72}
  93%{opacity:.46}
}
/* Kadran çevrildikçe alttaki korun tutuşması: olay anında parlar, ~1 sn söner. */
.dial-flare{position:absolute; inset:-3%; border-radius:50%; z-index:9; pointer-events:none; mix-blend-mode:screen;
  opacity:calc(.04 + var(--stoke,0) * .92);
  background:
    radial-gradient(70% 42% at 50% 108%, rgba(255,178,86,.78) 0%, rgba(255,96,16,.36) 42%, rgba(255,44,0,0) 76%),
    radial-gradient(40% 27% at 33% 102%, rgba(255,216,146,.58) 0%, rgba(255,120,26,.24) 52%, rgba(255,44,0,0) 82%),
    radial-gradient(36% 24% at 69% 103%, rgba(255,196,118,.5) 0%, rgba(255,104,18,.2) 54%, rgba(255,44,0,0) 84%);
  filter:blur(7px) saturate(1.25);
  will-change:transform; contain:paint;
  transform:translate3d(calc(var(--fire-x,0) * 17px),0,0) scale(calc(1 + var(--stoke,0) * .022));
  transition:opacity .08s linear}
/* Asıl ateş: tabandan yükselen alev dilleri ve cama vuran sıcak yansıma. */
.dial-fire{position:absolute; inset:-4%; border-radius:50%; z-index:10; pointer-events:none;
  mix-blend-mode:screen; overflow:hidden;
  opacity:calc(.01 + var(--fire,.22) * .99);
  background:
    radial-gradient(66% 58% at 50% 62%, rgba(255,160,70,.34) 0%, rgba(255,116,26,.16) 48%, rgba(255,44,0,0) 76%),
    radial-gradient(88% calc(42% + var(--fire-h,0) * 21%) at 50% 112%, rgba(255,208,126,.76) 0%, rgba(255,124,30,.42) 34%, rgba(255,44,0,0) 72%),
    radial-gradient(54% calc(24% + var(--fire-h,0) * 17%) at 30% 106%, rgba(255,234,176,.62) 0%, rgba(255,148,40,.29) 46%, rgba(255,44,0,0) 78%),
    radial-gradient(48% calc(22% + var(--fire-h,0) * 16%) at 71% 105%, rgba(255,206,130,.54) 0%, rgba(255,116,24,.25) 48%, rgba(255,44,0,0) 80%),
    radial-gradient(86% 84% at 50% 54%, rgba(255,150,60,0) 62%, rgba(255,186,104,.28) 78%, rgba(255,214,146,.48) 89%, rgba(255,150,44,0) 99%);
  filter:blur(8px) saturate(1.3);
  will-change:transform; contain:paint;
  transform:translate3d(calc(var(--fire-x,0) * 15px), calc(var(--fire-h,0) * -11px),0)}
.dial-fire i{position:absolute; bottom:-5%; display:block; pointer-events:none;
  border-radius:50% 50% 46% 46% / 74% 74% 26% 26%;
  background:
    radial-gradient(46% 34% at 50% 84%, rgba(255,250,220,.96) 0%, rgba(255,206,112,.62) 36%, rgba(255,124,26,.20) 66%, rgba(255,60,0,0) 82%),
    linear-gradient(to top, rgba(255,190,90,.46) 0%, rgba(255,128,30,.20) 54%, rgba(255,80,10,0) 88%);
  filter:blur(3.5px);
  transform-origin:50% 100%;
  mix-blend-mode:screen;
  animation:flameLick 1.55s cubic-bezier(.36,.06,.64,.94) infinite alternate}
.dial-fire i:nth-child(1){left:12%; width:14%; height:calc(10% + var(--fire-h,0) * 30%); animation-delay:-.25s; animation-duration:1.32s}
.dial-fire i:nth-child(2){left:25%; width:11%; height:calc(14% + var(--fire-h,0) * 38%); animation-delay:-.72s; animation-duration:1.66s}
.dial-fire i:nth-child(3){left:38%; width:15%; height:calc(17% + var(--fire-h,0) * 34%); animation-delay:-.4s; animation-duration:1.44s}
.dial-fire i:nth-child(4){left:52%; width:12%; height:calc(13% + var(--fire-h,0) * 40%); animation-delay:-.95s; animation-duration:1.78s}
.dial-fire i:nth-child(5){left:64%; width:14%; height:calc(16% + var(--fire-h,0) * 32%); animation-delay:-.15s; animation-duration:1.38s}
.dial-fire i:nth-child(6){left:77%; width:11%; height:calc(11% + var(--fire-h,0) * 36%); animation-delay:-.58s; animation-duration:1.58s}
.dial-fire::after{content:""; position:absolute; inset:-2%; border-radius:50%;
  background:linear-gradient(126deg,
    rgba(255,190,104,0) 30%,
    rgba(255,196,112,.10) 40%,
    rgba(255,236,190,.28) 47%,
    rgba(255,186,96,.12) 55%,
    rgba(255,150,60,0) 67%);
  filter:blur(9px);
  opacity:calc(.1 + var(--fire,.22) * .62);
  transform:translate3d(calc(var(--fire-x,0) * -20px),0,0)}
.dial-sparks{position:absolute; inset:0; width:100%; height:100%; z-index:11; pointer-events:none; border-radius:50%; overflow:hidden}
/* Alev katmanları kapalı; köz yatağının yansıması .dial-heat'te kalır. */
.dial-flare,.dial-fire{display:none!important}
.fire-ring{position:absolute; z-index:3; display:block; pointer-events:none}
/* Kor halkası tek ısı kaynağı: eski alt ışık kapalı. Arka plan köz alanı
   fire-ring.js'in kendi canvas'ında (ember-field, z-index 1) çizilir. */
.orbit-bed,.orbit-embers{display:none!important}
.ember-field{position:absolute; inset:0; z-index:1; display:block; pointer-events:none}
@keyframes flameLick{
  0%{opacity:.34; transform:translate3d(calc(var(--fire-x,0) * 5px),0,0) scaleY(.82) scaleX(1.06) rotate(-3deg)}
  22%{opacity:.72; transform:translate3d(calc(var(--fire-x,0) * 7px),-2px,0) scaleY(1.02) scaleX(.97) rotate(1deg)}
  43%{opacity:.48; transform:translate3d(calc(var(--fire-x,0) * 4px),1px,0) scaleY(.91) scaleX(1.04) rotate(-1.5deg)}
  61%{opacity:.88; transform:translate3d(calc(var(--fire-x,0) * 9px),-4px,0) scaleY(1.16) scaleX(.95) rotate(2.5deg)}
  79%{opacity:.56; transform:translate3d(calc(var(--fire-x,0) * 6px),-1px,0) scaleY(.96) scaleX(1.02) rotate(-.5deg)}
  100%{opacity:.8; transform:translate3d(calc(var(--fire-x,0) * 8px),-3px,0) scaleY(1.08) scaleX(.99) rotate(1.5deg)}
}
@media(max-width:760px){
}

@media(prefers-reduced-motion:reduce){.orbit-bed,.orbit-bed::after,.dial-heat::before,.dial-fire i{animation:none}}
.orbit::before{content:""; position:absolute; inset:-10%; z-index:0; pointer-events:none; opacity:.55; will-change:transform; background: radial-gradient(40% 26% at 32% 38%, rgba(120,86,60,.10) 0%, rgba(0,0,0,0) 70%), radial-gradient(46% 30% at 68% 62%, rgba(96,64,40,.09) 0%, rgba(0,0,0,0) 72%), radial-gradient(34% 22% at 54% 24%, rgba(140,90,52,.07) 0%, rgba(0,0,0,0) 75%); filter:blur(22px)}
@keyframes cosySmoke{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-18px,-10px,0) scale(1.05)}}
.orbit::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(120% 100% at 50% 46%, rgba(0,0,0,0) 44%, rgba(0,0,0,.40) 78%, rgba(0,0,0,.72) 100%)}
.reels.mode-orbit .orbit{display:block}
/* Kadran bir kez kurulunca sönmez: kategoriye girip çıkınca sahne yeniden
   kurulmasın. Görünmezken pointer olayı almaz ve döngü park edilir. */
.reels.orbit-warm .orbit{display:block}
.reels.orbit-warm:not(.mode-orbit) .orbit{opacity:0; pointer-events:none}
/* Kabuk warm'ken gizlenmez (sahne içinde kalıyor); yalnız içerik gizlenir.
   Ana sayfa zaten .reels'in altında, üstü şeffaf kalınca görünür. */
/* Park hâlinde kabuk görünür ama olay geçirgen olmalı: aksi hâlde tam ekran
   kaplama ana sayfanın tüm tıklamalarını yutuyordu. */
.reels.orbit-idle{background:transparent; visibility:visible; transform:none; pointer-events:none}
/* Idle kabuk içeriği gizli; sahne de görünmemeli, yoksa ürün feed'i
   kapanınca ana sayfada kadran kalıntısı kalıyor. */
.reels.orbit-idle .orbit{display:none}
/* Idle kabuk içeriği gizli. */
.reels.orbit-idle .reels-topbar,
.reels.orbit-idle .reels-track,
.reels.orbit-idle .reels-hint{display:none}
.reels.mode-orbit .reels-track{display:none}
.reels.mode-orbit .reels-topbar{display:flex; background:none; padding:16px var(--pad)}
.reels.mode-orbit .reels-back,
.reels.mode-orbit .reels-head{display:none}
.reels-exit{display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:rgba(7,6,5,.6); color:var(--bone-dim); margin-left:auto;
  transition:color .3s, border-color .3s}
.reels-exit:hover{color:var(--bone); border-color:rgba(226,180,110,.4)}
/* Telefonda tarayıcının kendi geri tuşu reels'i kapatıyor (popstate → shellClose);
   ürün reels'inde ekrandaki geri/çarpı kontrolleri gizlenir. */
.reels.mode-orbit .reels-exit,
.reels.mode-orbit .reels-back{display:none !important}
.reels.mode-orbit .reels-hint{display:none}
.orbit.leaving{opacity:0}
.orbit-tint{position:absolute; inset:-25%; background:#c97b3c; opacity:.04; transition:background-color .7s ease}

.orbit-stars{display:none}
.orbit-stars i{position:absolute; display:block; border-radius:50%; background:#dfe6f2; animation:orbitTwinkle linear infinite}
.orbit-stars.near i{background:radial-gradient(circle, #ffffff 0%, #e6f1ff 42%, rgba(230,241,255,0) 74%)}
.stars-drift{position:absolute; inset:-34px; animation:orbitDrift 68s ease-in-out infinite alternate; will-change:transform}
@keyframes orbitDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-26px,-15px,0)}}.orbit-stars.near i.glow{box-shadow:0 0 6px rgba(198,224,255,.5),0 0 14px rgba(120,170,255,.22)}
.orbit-shoot{display:none}
@keyframes orbitShoot{0%{opacity:0; transform:translate3d(0,0,0) rotate(-14deg)}8%{opacity:.8}72%{opacity:.5}100%{opacity:0; transform:translate3d(140vw,-42vh,0) rotate(-14deg)}}
@keyframes orbitTwinkle{0%,100%{opacity:.06}42%{opacity:.5}50%{opacity:1}58%{opacity:.5}}
.dial:active{cursor:grabbing}
/* Parmak/fare kadranı çevirirken süs animasyonlarını duraklat. */
body.dial-dragging .orbit-stars i{animation-play-state:paused}
body.dial-dragging .dial-aura{transition:none}
.dial{position:absolute; left:50%; top:51%; width:min(94vw,680px); aspect-ratio:1; transform:translate(-50%,-50%); z-index:2; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; cursor:grab}
.dial *{-webkit-touch-callout:none; -webkit-user-drag:none}
.watch-host{position:absolute; inset:0; z-index:1; pointer-events:none; will-change:transform; transform:translateZ(0)}
.watch-host .watch{width:100%; height:100%; display:block; overflow:visible}
.dial-aura{position:absolute; inset:-8%; border-radius:50%; z-index:-1; pointer-events:none; background:radial-gradient(circle, var(--acc,#c97b3c) 0%, transparent 62%); opacity:calc(.3 + var(--stoke-soft,0)); filter:blur(30px); transition:background .6s}
.dial-bezel{position:absolute; inset:-2.6%; border-radius:50%; z-index:0; pointer-events:none; background:radial-gradient(circle, #070605 0 62%, #17120d 64%, #3a2c1e 84%, #0d0a07 92%, #2a2016 100%); box-shadow:0 30px 80px rgba(0,0,0,.65), inset 0 0 26px rgba(0,0,0,.8)}
.dial-face{position:absolute; inset:6.5%; border-radius:50%; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(118deg, rgba(255,238,205,.055) 0 1px, transparent 1px 11px),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,245,220,.035) 0 1px, transparent 1px 7px),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.035) 0deg .3deg, transparent .3deg 1.1deg),
    radial-gradient(circle at 40% 26%, #2e261b 0%, #1a1510 46%, #0b0908 100%);
  box-shadow:inset 0 0 90px rgba(0,0,0,.85), inset 0 0 0 1px rgba(226,180,110,.26)}
.dial-face::after{content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 50% 50%, transparent 46%, rgba(0,0,0,.62) 100%)}
.dial-screw{position:absolute; width:3.4%; aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle at 35% 30%, #8fa0ad, #3c454c 58%, #10161a); box-shadow:0 0 0 1px rgba(0,0,0,.7), 0 3px 6px rgba(0,0,0,.6)}
.dial-screw::after{content:""; position:absolute; left:20%; right:20%; top:47%; height:7%; background:#0a0f13; transform:rotate(32deg)}
.dial-jewel{position:absolute; width:3%; aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle at 35% 30%, #ff8ea0, #d63a55 45%, #6e1230 75%, #2c0512); box-shadow:0 0 0 1.5px #c9a66b, 0 0 0 3px rgba(0,0,0,.75), 0 0 10px rgba(214,58,85,.55), inset 0 1px 1px rgba(255,255,255,.35)}
.dial-jewel::after{content:""; position:absolute; left:22%; top:14%; width:30%; height:24%; border-radius:50%; background:rgba(255,255,255,.7); filter:blur(1px)}
.dial-engrave{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; opacity:.6}
.dial-engrave text{fill:rgba(226,180,110,.5); font-family:var(--mono); font-size:8.5px; letter-spacing:.28em}
.dial-ring{position:absolute; inset:0; z-index:2; pointer-events:none}
.dial-ring svg{width:100%; height:100%; display:block; filter:drop-shadow(0 10px 24px rgba(0,0,0,.5))}
.dial-sun{position:absolute; left:50%; top:50%; width:46%; aspect-ratio:1; margin:-23% 0 0 -23%; z-index:2; pointer-events:none; will-change:transform}
.dial-sun svg{width:100%; height:100%; display:block; filter:drop-shadow(0 10px 22px rgba(0,0,0,.6))}
.dial-rotor{position:absolute; inset:0; z-index:4; will-change:transform; border-radius:50%}
.dial-brand{position:absolute; left:50%; top:50%; width:11.5%; aspect-ratio:1; margin:-5.75% 0 0 -5.75%; transform-origin:50% 50%; z-index:2; pointer-events:none; will-change:transform}
.brand-spin{position:absolute; inset:0; transform-origin:50% 50%; will-change:transform}
.brand-medal{position:absolute; inset:8%; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:radial-gradient(circle at 42% 34%, #2a241b, #0b0a08 64%, #040404 100%); box-shadow:0 0 0 1.5px rgba(196,156,99,.55), 0 0 0 3px rgba(0,0,0,.8), inset 0 1px 2px rgba(255,255,255,.14), inset 0 -9px 18px rgba(0,0,0,.95)}
.brand-medal img{width:100%; height:100%; object-fit:contain; mix-blend-mode:screen; opacity:.9; transform:scale(1.35); filter:brightness(1.4) contrast(1.06); transition:opacity .3s; -webkit-user-drag:none; user-drag:none; -webkit-touch-callout:none; pointer-events:none}
.brand-medal .brand-mono{font-family:var(--serif); font-size:clamp(14px,3.2vw,22px); color:#d8b98a; line-height:1}
.dial-brand.active .brand-medal{box-shadow:0 0 0 2.5px #e9d1a0, 0 0 0 3px rgba(0,0,0,.8), inset 0 1px 2px rgba(255,255,255,.2), inset 0 -9px 18px rgba(0,0,0,.95)}
.dial-brand.active .brand-medal img{opacity:1}
/* Ton-içi gravür: marka adı doğrudan metal halkaya kazınır. */
.brand-etch{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); white-space:nowrap;
  font-family:var(--serif); font-weight:600; font-size:var(--etch-size,9px); letter-spacing:.2em;
  text-indent:.2em; line-height:1; color:rgba(198,168,117,.95);
  text-shadow:0 1px 0 rgba(0,0,0,.6), 0 -1px 0 rgba(255,244,216,.26);
  transition:color .35s ease, text-shadow .35s ease; pointer-events:auto; cursor:pointer}
.dial-brand.active .brand-etch{color:rgba(247,229,192,.98);
  text-shadow:0 1px 0 rgba(0,0,0,.6), 0 -1px 0 rgba(255,255,255,.4), 0 0 12px rgba(255,214,150,.45)}
/* Sabit ışık süpürmesi: halka dönse de ışık 12 yönünde kalır. */
.dial-sheen{position:absolute; inset:0; border-radius:50%; z-index:5; pointer-events:none; mix-blend-mode:screen;
  background:conic-gradient(from -30deg at 50% 50%, rgba(255,246,226,0) 0deg,
    rgba(255,240,208,.17) 27deg, rgba(255,246,226,.02) 58deg, rgba(0,0,0,0) 92deg 360deg);
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 0 33.5%, #000 36% 44.5%, transparent 46%);
  mask:radial-gradient(circle at 50% 50%, transparent 0 33.5%, #000 36% 44.5%, transparent 46%);
  opacity:.9}
/* Camın üstünde yarı saydam marka filigranı; çarklar arkadan görünür. */
.dial-mark{position:absolute; left:50%; top:46%; width:42%; aspect-ratio:1;
  transform:translate(-50%,-50%); z-index:3; pointer-events:none;
  opacity:0; transition:opacity .5s ease; mix-blend-mode:screen;
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 0 50%, rgba(0,0,0,.5) 64%, transparent 80%);
  mask:radial-gradient(circle at 50% 50%, #000 0 50%, rgba(0,0,0,.5) 64%, transparent 80%)}
.dial-mark.on{opacity:.9}
.dial-mark img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transform-origin:50% 50%; will-change:transform,opacity;
  filter:brightness(1.3) contrast(1.05); opacity:.9; -webkit-user-drag:none; user-select:none}
.dial-hit{position:absolute; left:50%; top:50%; width:44%; aspect-ratio:1; transform:translate(-50%,-50%); z-index:6; border:0; border-radius:50%; background:transparent; padding:0; cursor:pointer}

/* ---- kurma kolu (remix): kasanın 3 yönü ---- */
.dial-crown{
  position:absolute; left:100%; top:50%; z-index:7;
  width:clamp(20px,3.4%,26px); height:clamp(38px,6.2%,48px);
  transform:translate(-6%,-50%); padding:0; border:0; border-radius:4px 8px 8px 4px;
  background:linear-gradient(100deg,#6b4f22 0%,#e8cd93 22%,#a9823f 42%,#f0dcae 58%,#7d5f2d 78%,#4c3717 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.65), 0 0 14px rgba(226,150,70,.26), inset 0 0 6px rgba(0,0,0,.5);
  cursor:pointer; transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.dial-crown::after{
  content:""; position:absolute; inset:5px 3px; border-radius:3px;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.34) 0 1.5px, transparent 1.5px 4px);
}
.dial-crown:hover{transform:translate(-6%,-50%) scale(1.07); box-shadow:0 0 0 1px rgba(0,0,0,.65), 0 0 24px rgba(240,200,143,.52), inset 0 0 6px rgba(0,0,0,.5)}
.dial-crown:active{transform:translate(-6%,-50%) scale(.96)}
.dial-crown:focus-visible{outline:1px solid rgba(232,190,125,.65); outline-offset:5px}
.dial-crown-tip{
  position:absolute; right:-2px; top:50%; transform:translate(100%,-50%);
  padding-left:9px; font-family:var(--mono); font-size:7.5px; letter-spacing:.2em;
  color:rgba(201,169,97,.55); writing-mode:vertical-rl; text-orientation:mixed;
  pointer-events:none; transition:opacity .25s, color .25s;
}
.dial-crown:hover .dial-crown-tip{opacity:1; color:rgba(232,190,125,.9)}
/* remix tetiklendiğinde kol bir tur döner */
.dial-crown.spin{animation:crownSpin .62s var(--ease)}
@keyframes crownSpin{
  0%{rotate:0deg} 60%{rotate:200deg} 100%{rotate:360deg}
}
@media (prefers-reduced-motion:reduce){ .dial-crown.spin{animation:none} }
.dial-hit:focus-visible{outline:1px solid rgba(232,190,125,.6); outline-offset:6px}
.dial-index{position:absolute; left:0; right:0; bottom:13.2%; z-index:7; text-align:center; font-family:var(--mono); font-size:8.5px; letter-spacing:.22em; color:rgba(231,207,156,.6); font-variant-numeric:tabular-nums; pointer-events:none}
.dial-carrier{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; filter:drop-shadow(0 9px 16px rgba(0,0,0,.7))}
.dial-pinion{position:absolute; left:50%; top:50%; width:17%; aspect-ratio:1; margin:-8.5% 0 0 -8.5%; transform-origin:50% 50%; z-index:1; will-change:transform}
.dial-pinion .pg{position:absolute; inset:0; will-change:transform}
.dial-pinion .pg svg{width:100%; height:100%; display:block; filter:drop-shadow(0 5px 11px rgba(0,0,0,.55))}
.dial-planet{position:absolute; left:50%; top:50%; width:18%; aspect-ratio:1; margin:-13% 0 0 -13%; transform-origin:50% 50%; z-index:2; will-change:transform}
.dial-planet .pg{position:absolute; inset:0; will-change:transform}
.dial-planet .pg svg{width:100%; height:100%; display:block; filter:drop-shadow(0 7px 15px rgba(0,0,0,.55))}
.dial-medal{position:absolute; inset:21%; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 42% 34%, #2a241b, #0b0a08 64%, #040404 100%); box-shadow:0 0 0 2px rgba(196,156,99,.5), 0 0 0 3px rgba(0,0,0,.8), inset 0 1px 2px rgba(255,255,255,.14), inset 0 -9px 18px rgba(0,0,0,.95); will-change:transform}
.dial-medal::after{content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; background:linear-gradient(150deg, rgba(255,255,255,.10), transparent 40%, transparent 68%, rgba(0,0,0,.35))}
.dial-medal img{width:100%; height:100%; object-fit:contain; mix-blend-mode:screen; opacity:.92; transform:scale(1.55); filter:brightness(1.5) contrast(1.06); transition:opacity .3s}
.dial-planet.active .dial-medal{box-shadow:0 0 0 2px #e9d1a0, 0 0 24px rgba(226,150,70,.6), inset 0 1px 2px rgba(255,255,255,.2), inset 0 -9px 18px rgba(0,0,0,.95)}
.dial-planet.active .dial-medal img{opacity:1}
.dial-planet.active::after{content:""; position:absolute; inset:-6%; border-radius:50%; border:1px solid rgba(232,190,125,.28); pointer-events:none}
.dial-plates{position:absolute; inset:0; border-radius:50%}
.dial-ticks{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:4}
.dial-ticks circle:not(.bezel){fill:none; stroke:rgba(201,123,60,.30); stroke-width:1}
.dial-ticks circle.lip{stroke:rgba(226,180,110,.22); stroke-width:2}
.dial-ticks .bezel{fill:none}
.dial-ticks line.minute{stroke:rgba(214,190,150,.16); stroke-width:.8}
.dial-ticks line.minute.major{stroke:rgba(232,190,125,.38); stroke-width:1.1}
.dial-ticks line.knurl{stroke:rgba(226,190,135,.26); stroke-width:.8}
.dial-ticks line.knurl.major{stroke:rgba(240,205,150,.55); stroke-width:1.15}
.dial-ticks line.brand-tick{stroke:rgba(232,190,125,.26); stroke-width:1}
.dial-ticks line.brand-tick.major{stroke:rgba(232,190,125,.58); stroke-width:1.6}
.dial-plate{position:absolute; left:50%; top:50%; width:clamp(50px,14vw,68px); aspect-ratio:1; transform:translate(-50%,-50%) rotate(var(--a,0deg)) translateY(calc(-1 * var(--r,150px))); border-radius:50%; background:radial-gradient(circle at 50% 32%, #231b14, #080706 72%); border:1px solid rgba(226,180,110,.26); display:grid; place-items:center; padding:12%; cursor:pointer; opacity:.62; pointer-events:auto; box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -5px 12px rgba(0,0,0,.7), 0 2px 0 rgba(232,190,125,.06), 0 6px 14px rgba(0,0,0,.55); transition:opacity .4s, border-color .4s, box-shadow .4s, scale .45s cubic-bezier(.2,.8,.2,1)}
.dial-plate::before{content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid rgba(226,180,110,.12); box-shadow:inset 0 2px 5px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.05); pointer-events:none; z-index:2}
.dial-plate::after{content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; background:linear-gradient(150deg, rgba(255,255,255,.09), transparent 42%); z-index:2}
.dial-plate img{width:100%; height:100%; object-fit:contain; display:block; border-radius:50%; will-change:transform; filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))}
.dial-plate:hover{opacity:.9; scale:1.04}
.dial-plate.active{opacity:1; scale:1.08; border-color:rgba(232,190,125,.75); box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -5px 12px rgba(0,0,0,.6), 0 0 0 3px rgba(232,190,125,.05), 0 0 26px rgba(226,150,70,.22)}
.dial-plate.active::before{border-color:rgba(232,190,125,.34)}
.dial-mono{font-family:var(--serif); font-size:clamp(22px,5vw,34px); color:#d8b98a; line-height:1}
.dial-center{position:absolute; left:50%; top:50%; z-index:6; transform:translate(-50%,-50%); width:clamp(130px,36%,236px); height:clamp(130px,36%,236px); display:grid; place-items:center; padding:6px; background:radial-gradient(circle at 50% 34%, #1d1711 0%, #0a0807 58%, #040303 100%); border:1px solid rgba(201,123,60,.42); border-radius:50%; box-shadow:0 0 0 1px rgba(232,190,125,.10), 0 0 0 7px rgba(6,5,4,.86), 0 0 0 8px rgba(226,180,110,.22), 0 30px 60px rgba(0,0,0,.85), 0 6px 14px rgba(0,0,0,.6), inset 0 0 0 1px rgba(236,226,209,.05), inset 0 0 34px rgba(0,0,0,.9); cursor:pointer; transition:box-shadow .35s, border-color .35s}
.dial-center:hover{border-color:rgba(232,190,125,.75); box-shadow:0 0 0 1px rgba(232,190,125,.18), 0 0 0 7px rgba(6,5,4,.9), 0 0 0 8px rgba(232,190,125,.42), 0 30px 60px rgba(0,0,0,.85), 0 0 34px rgba(226,150,70,.22), inset 0 0 34px rgba(0,0,0,.9)}
.dial-center::before{content:""; position:absolute; inset:-4.5%; border-radius:50%; border:1px solid rgba(226,180,110,.14); pointer-events:none; box-shadow:0 0 18px rgba(0,0,0,.8)}
.dial-center::after{content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:2; background:linear-gradient(128deg, rgba(255,255,255,.07), transparent 34%, transparent 70%, rgba(255,255,255,.02))}
.dial-center-art{position:absolute; inset:20% 20% 30%; z-index:1; display:grid; place-items:center}
.dial-center-art img{max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:screen; transition:opacity .22s, transform .45s; filter:drop-shadow(0 8px 18px rgba(0,0,0,.55))}
.dial-center.swap .dial-center-art img{opacity:0; transform:scale(.96)}
.dial-center-mono{font-family:var(--serif); font-size:64px; color:#d8b98a; line-height:1}
.dial-center-sign{position:absolute; left:0; right:0; bottom:19%; z-index:1; text-align:center; font-family:var(--serif); font-size:clamp(10px,2.6vw,14px); letter-spacing:.42em; text-indent:.42em; color:#d9bb8b; opacity:.85}
.dial-center-idx{position:absolute; left:0; right:0; bottom:9%; z-index:1; text-align:center; font-size:8px; letter-spacing:.24em; color:rgba(231,207,156,.45); font-variant-numeric:tabular-nums}
.watch-pip{position:absolute; left:50%; top:16%; z-index:7; width:6px; height:6px; transform:translateX(-50%); border-radius:50%; background:#f0c88f; box-shadow:0 0 10px rgba(240,200,143,.7); pointer-events:none}
.watch-marker{position:absolute; left:50%; top:3.1%; z-index:7; width:0; height:0; transform:translateX(-50%); border-left:7px solid transparent; border-right:7px solid transparent; border-top:12px solid rgba(232,190,125,.95); filter:drop-shadow(0 0 9px rgba(232,190,125,.45))}
.watch-crown{position:absolute; right:-13px; top:50%; transform:translateY(-50%); width:13px; height:44px; z-index:2; border-radius:4px; background:repeating-linear-gradient(90deg, #2b2118 0 1px, #14100c 1px 3px), linear-gradient(180deg, #3a2d20, #120e0a 30%, #2b2118 50%, #120e0a 70%, #3a2d20); box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08)}
.watch-crown::before{content:""; position:absolute; left:-5px; top:50%; transform:translateY(-50%); width:5px; height:18px; background:linear-gradient(180deg, #221a12, #0d0a07); border-radius:2px 0 0 2px}
.watch-glass{position:absolute; inset:0; border-radius:50%; z-index:5; pointer-events:none; overflow:hidden; background:radial-gradient(58% 42% at 32% 10%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%), radial-gradient(120% 80% at 30% 12%, rgba(255,255,255,.05), transparent 38%), radial-gradient(circle at 68% 82%, rgba(150,190,255,.045), transparent 45%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.035), inset 0 18px 38px rgba(255,255,255,.04), inset 0 -24px 50px rgba(0,0,0,.18)}
.watch-glass::after{content:""; position:absolute; left:14%; top:6%; width:52%; height:26%; border-radius:50%; transform:rotate(-18deg); background:linear-gradient(120deg, rgba(255,255,255,.14), rgba(255,255,255,0) 62%); filter:blur(6px); opacity:.7}
.dial-sweep{position:absolute; inset:3.5%; border-radius:50%; border:1px solid rgba(226,180,110,.4); opacity:0; pointer-events:none; z-index:4}
.dial-sweep.on{animation:dialSweep .85s ease-out}
@keyframes dialSweep{0%{opacity:.55; transform:scale(.94)}100%{opacity:0; transform:scale(1.05)}}
.orbit-cta{position:absolute; z-index:5; left:50%; bottom:clamp(26px,5.5vh,54px); transform:translateX(-50%); width:58px; height:58px; padding:0; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(226,180,110,.32); background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.07), rgba(255,255,255,.01) 60%), rgba(10,8,7,.55); color:#e6bf8a; cursor:pointer; box-shadow:0 18px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07); transition:border-color .35s, background .35s, box-shadow .35s, transform .35s}
.orbit-cta::after{content:""; position:absolute; inset:-7px; border-radius:50%; border:1px solid rgba(226,180,110,.12); pointer-events:none}
.orbit-cta svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s}
.orbit-cta:hover{border-color:rgba(226,180,110,.6); background:rgba(201,123,60,.10); transform:translateX(-50%) translateY(-2px); box-shadow:0 22px 50px rgba(0,0,0,.55), 0 0 26px rgba(226,150,70,.14), inset 0 1px 0 rgba(255,255,255,.08)}
.orbit-cta:hover svg{transform:translateX(3px)}
@media(max-width:760px){
  .watch-crown{right:-11px; width:11px; height:38px}
}
@media(max-width:760px){
}

@media(prefers-reduced-motion:reduce){
  .bn-item, .bn-ico, .bn-label{transition:none}
}

/* ---------- bezel hissiyatı ---------- */
.watch-marker{transition:filter .12s ease}
.watch-marker.tick{filter:drop-shadow(0 0 15px rgba(255,214,150,.95)) brightness(1.45)}

/* ---------- döner bezel çemberi ---------- */
.dial-rim{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; overflow:visible}
.dial-rim .rim-knurl line{stroke:rgba(226,190,135,.30); stroke-width:.9}
.dial-rim .rim-knurl line.maj{stroke:rgba(242,208,152,.62); stroke-width:1.5}
.dial-rim .rim-scale line{stroke:rgba(214,190,150,.26); stroke-width:.8}
.dial-rim .rim-scale line.maj{stroke:rgba(232,190,125,.55); stroke-width:1.1}
.dial-rim .rim-seat{fill:rgba(3,3,3,.55); stroke:rgba(226,180,110,.30); stroke-width:1.4}

/* ---------- sabit kasa dudağı + iç kadran halkası ---------- */
.dial-case{position:absolute; inset:0; z-index:5; pointer-events:none}
.dial-case svg{width:100%; height:100%; display:block}
.case-edge line{stroke:rgba(226,190,135,.20); stroke-width:.65}
.case-edge line.maj{stroke:rgba(240,205,150,.50); stroke-width:1.05}
.dial-chapter{position:absolute; inset:0; z-index:3; pointer-events:none}
.dial-chapter svg{width:100%; height:100%; display:block; filter:drop-shadow(0 0 16px rgba(0,0,0,.65))}
.chap-tick line{stroke:rgba(226,198,150,.55); stroke-width:1}
.chap-tick line.maj{stroke:rgba(242,204,146,.92); stroke-width:1.6}
.rim-tachy .tachy-tick.major{stroke:rgba(244,210,156,.8); stroke-width:1.15}
.rim-tachy .tachy-tick.mid{stroke:rgba(238,202,146,.46); stroke-width:.9}
.rim-tachy .tachy-tick.minor{stroke:rgba(236,198,138,.30); stroke-width:.7}
.rim-tachy .tachy-num{fill:rgba(244,218,172,.92); font-family:Georgia,'Times New Roman',serif; font-size:8.4px; font-weight:600; letter-spacing:.02em; filter:drop-shadow(0 1px 1px rgba(0,0,0,.85))}
.chap-baton line{stroke:url(#batGold); stroke-width:3.2; stroke-linecap:round; filter:drop-shadow(0 2px 2px rgba(0,0,0,.7))}

/* ---------- akış: kadrana dokun, gir ---------- */
.dial-brand{pointer-events:auto; cursor:pointer}
.dial-hit::after{content:""; position:absolute; inset:-6%; border-radius:50%; border:1px solid rgba(232,190,125,.20); opacity:.3; pointer-events:none}
.dial-hit:hover::after{animation:none; opacity:.85; border-color:rgba(232,190,125,.48)}
@keyframes dialInvite{0%,100%{opacity:.16}50%{opacity:.55}}
/* El gölgesi: kasa üstünde sabit gölge katmanı (SVG filtresi değil) */
.hands{filter:none}
/* Eller: geçiş YOK. JS her karede rotate() yazıyor; CSS transition araya
   girince aynı kareye iki farklı açı uygulanıp titreme/parlama oluyordu. */
#hourHand,#minuteHand,#secondHand{transition:none!important; will-change:auto}
/* Filtre KALDIRILDI: transform her karede değiştiği için drop-shadow/brightness
   yeniden raster'lanıyor ve akrepte ışık titremesi (flicker) yaratıyordu.
   Gölge artık statik bir katmanla veriliyor. */
#hourHand path:first-child,#minuteHand path:first-child{stroke-width:.85}
.hands{will-change:transform; backface-visibility:hidden}
#secondHand line:nth-child(2){opacity:.95}


/* ============================================================
   ANA SAYFA — hareket katmanı (home-scenes.js ile birlikte)
   ============================================================ */

/* ---- hero: köz canvas + nefes alan ışık ---- */
.hero-embers{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:-1; pointer-events:none;
  mix-blend-mode:screen; opacity:.9;
  transition:opacity .8s var(--ease);
}
/* Sıcak ışık artık animasyonsuz ve bulanıksız: 70vmax'lik blur(6px) daire
   her karede yeniden bulanıklaştırılıyordu (scroll'da ana takılma nedeni). */
.hero-glow{
  position:absolute; z-index:-1; pointer-events:none;
  left:0; top:0; width:70vmax; height:70vmax; margin:-35vmax 0 0 -35vmax;
  border-radius:50%;
  background:radial-gradient(circle, rgba(217,92,46,.26) 0%, rgba(201,123,60,.10) 36%, rgba(201,123,60,0) 68%);
  transform:translate3d(50vw,52vh,0);
}
.hero-foot{position:relative; z-index:3}

/* ---- hero başlık: sabit (duman maskesi animasyonu kapalı) ---- */
.hero-title .ht-line{display:block; overflow:hidden; padding-bottom:.06em}
.hero-title .ht-in{
  display:block;
  transform:none;
  opacity:1;
}
.hero-title{position:relative; z-index:2}
@keyframes dustIn{
  0%{transform:translate3d(0,18px,0); opacity:0}
  100%{transform:translate3d(0,0,0); opacity:1}
}
/* Sonsuz köz süpürmesi kaldırıldı: mix-blend-mode + background-clip:text
   birleşimi telefonlarda her karede tam katman yeniden çizimi istiyordu. */
.hero-title em{position:relative; display:inline-block}

/* ---- KÖZ OCAĞI ---- */
.hearth{
  position:relative;
  height:300svh;
  background:
    radial-gradient(70% 55% at 50% 62%, rgba(217,92,46,.10), transparent 72%),
    linear-gradient(180deg,#0a0908 0%, #0c0a08 40%, #080706 100%);
}
.hearth-stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; grid-template-rows:auto 1fr auto; align-items:center;
  padding:calc(14px + env(safe-area-inset-top,0px)) var(--pad) calc(28px + var(--navbar));
}
.hearth-fire{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1; mix-blend-mode:screen;
}
.hearth-glow{
  position:absolute; left:50%; top:58%; width:min(120vw,760px); aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.55);
  border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(255,150,70,.30) 0%, rgba(217,92,46,.14) 38%, rgba(217,92,46,0) 68%);
  opacity:.35; will-change:transform, opacity;
}
.hearth-head{
  position:relative; z-index:4; text-align:center;
  display:grid; gap:8px; justify-items:center;
}
.hearth-eyebrow{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--amber); opacity:.85;
}
.hearth-title{
  margin:0; font-weight:300; font-size:clamp(26px,7vw,44px); line-height:1;
  letter-spacing:-.02em; font-style:italic; opacity:.9;
}
/* marka közleri: ortada yığılmış, sırayla yanar */
.hearth-marks{
  position:relative; z-index:3; align-self:center;
  margin-top:clamp(20px,6vh,70px);
  display:flex; align-items:center; justify-content:center; gap:clamp(6px,2.4vw,22px);
  flex-wrap:wrap; padding:0;
}
.hearth-mark{
  position:relative; display:grid; place-items:center;
  width:clamp(58px,17vw,104px); height:clamp(58px,17vw,104px);
  border-radius:50%;
  background:radial-gradient(circle at 42% 36%, #1c1712, #0c0a08 70%);
  box-shadow:inset 0 0 0 1px rgba(236,226,209,.08), 0 10px 30px rgba(0,0,0,.7);
  opacity:.42; filter:grayscale(1) brightness(.7);
  transition:opacity .6s var(--ease), filter .6s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease);
}
.hearth-mark img{
  max-width:64%; max-height:64%; width:auto; height:auto; object-fit:contain;
}
.hearth-mark.is-lit{
  opacity:1; filter:none; transform:scale(1.06);
  box-shadow:
    inset 0 0 0 1px rgba(255,190,130,.35),
    0 0 34px rgba(217,92,46,.55),
    0 0 80px rgba(217,92,46,.25),
    0 10px 30px rgba(0,0,0,.7);
}
/* köz gözeneği: yanan markanın içinde kıpırdayan kor taneleri */
.hearth-mark::after{
  content:""; position:absolute; inset:10%; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle at 30% 70%, rgba(255,170,90,.9) 0 6%, transparent 40%),
    radial-gradient(circle at 68% 34%, rgba(255,120,50,.85) 0 5%, transparent 38%),
    radial-gradient(circle at 54% 76%, rgba(255,210,150,.8) 0 4%, transparent 34%);
  opacity:0; mix-blend-mode:screen;
  transition:opacity .5s var(--ease);
}
.hearth-mark.is-lit::after{opacity:.55; animation:emberFlicker 2.8s ease-in-out infinite}
@keyframes emberFlicker{0%,100%{opacity:.35; transform:scale(1)} 45%{opacity:.72; transform:scale(1.05)} 70%{opacity:.42; transform:scale(.98)}}

/* orta blok: yanan markanın adı + CTA */
.hearth-core{
  position:absolute; z-index:4; left:0; right:0;
  bottom:calc(96px + var(--navbar));
  text-align:center;
  display:grid; gap:4px; justify-items:center; align-content:end;
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.hearth-core.is-on{opacity:1; transform:none}
.hearth-brand{
  margin:0; font-size:clamp(30px,9vw,52px); line-height:1; font-weight:300;
  letter-spacing:-.02em; font-style:italic;
  text-shadow:0 0 34px rgba(217,92,46,.45);
}
.hearth-meta{
  margin:0 0 10px; font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}
.hearth-cta{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 20px; border-radius:999px;
  border:1px solid rgba(217,92,46,.55);
  background:rgba(217,92,46,.14); backdrop-filter:blur(6px);
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:#f7e6d2;
  transition:background .3s, border-color .3s, transform .3s;
}
.hearth-cta:active{transform:scale(.97)}
.hearth-cta svg{transition:transform .3s var(--ease)}
.hearth-progress{
  position:absolute; left:var(--pad); right:var(--pad); bottom:calc(18px + var(--navbar));
  height:1px; background:var(--line-soft); z-index:4;
}
.hearth-progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--amber), var(--ember));
  box-shadow:0 0 12px rgba(217,92,46,.8);
}

@media(max-width:760px){
  .hearth{height:280svh}
  .hearth-stage{padding-top:calc(18px + env(safe-area-inset-top,0px))}
  .hearth-marks{gap:8px}
  .hearth-mark{width:clamp(62px,19vw,86px); height:clamp(62px,19vw,86px)}
}

/* ---- GÜNÜN SEÇKİLERİ ---- */
.daily{
  display:grid; gap:clamp(14px,3vw,22px);
  padding:clamp(26px,5vh,56px) var(--pad) clamp(20px,4vh,40px);
  grid-template-columns:1fr;
  background:#0a0908;
}
.daily-card{
  position:relative; overflow:hidden;
  border:1px solid var(--line-soft); border-radius:3px;
  background:linear-gradient(180deg, rgba(236,226,209,.035), rgba(236,226,209,.012));
  padding:14px 14px 16px;
  display:grid; grid-template-rows:auto auto auto; gap:12px;
}
.daily-no{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--amber);
}
.daily-no b{color:var(--muted); font-weight:400; letter-spacing:.14em}
.daily-media{
  position:relative; border-radius:2px; overflow:hidden; aspect-ratio:1;
  background:
    radial-gradient(circle at 50% 55%, rgba(217,92,46,.10), transparent 62%), #12100d;
}
.daily-media img{
  width:100%; height:100%; object-fit:contain; padding:6%;
  transition:transform 1.2s var(--ease), filter .6s;
}
.daily-card--tobacco:active .daily-media img{transform:scale(1.04)}
.daily-body{display:grid; gap:8px}
.daily-brand{
  font-family:var(--mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}
.daily-name{
  margin:0; font-size:clamp(24px,6.6vw,38px); font-weight:300; line-height:1.02; letter-spacing:-.02em;
  overflow-wrap:anywhere; hyphens:auto;
}
.daily-name--mix{font-size:clamp(19px,3.6vw,26px); line-height:1.12; letter-spacing:-.01em}
.daily-notes{
  margin:0; display:flex; flex-wrap:wrap; gap:6px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; color:var(--bone-dim);
}
.daily-notes span{
  padding:4px 8px; border:1px solid var(--line-soft); border-radius:999px; opacity:.85;
}
.daily-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:2px}
.daily-strength{display:inline-flex; gap:4px; align-items:center}
.daily-strength i{display:block; width:14px; height:2px; background:rgba(236,226,209,.18); border-radius:1px}
.daily-strength i.on{background:linear-gradient(90deg,var(--amber),var(--ember)); box-shadow:0 0 6px rgba(217,92,46,.55)}
.daily-cta{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; border-radius:999px; border:1px solid rgba(236,226,209,.24);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  transition:background .3s, border-color .3s, transform .3s;
}
.daily-cta:active{transform:scale(.97)}
.daily-cta--icon{padding:9px 11px}
.daily-cta--solid{background:rgba(217,92,46,.16); border-color:rgba(217,92,46,.55); color:#f6e3cd}
.daily-shuffle{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-soft); color:var(--bone-dim);
  transition:color .3s, border-color .3s, transform .5s var(--ease);
}
.daily-shuffle:active{transform:rotate(180deg); color:var(--amber); border-color:rgba(217,92,46,.6)}

/* karışım sahnesi: iki görsel üst üste, köz ışığı arada */
.mix-stage{
  position:relative; aspect-ratio:16/10; border-radius:2px; overflow:hidden;
  background:radial-gradient(80% 80% at 50% 60%, rgba(217,92,46,.16), #100e0c 70%);
  display:grid; place-items:center;
}
.mix-img{
  position:absolute; width:44%; aspect-ratio:1; object-fit:cover; border-radius:50%;
  box-shadow:0 12px 40px rgba(0,0,0,.7), 0 0 0 1px rgba(236,226,209,.10);
  transition:transform .9s var(--ease), filter .9s var(--ease);
  filter:saturate(.9) contrast(1.05);
}
.mix-a{left:6%; top:50%; transform:translateY(-50%) rotate(-6deg)}
.mix-b{right:6%; top:50%; transform:translateY(-50%) rotate(6deg)}
.mix-stage.is-mixing .mix-a{transform:translateY(-50%) translateX(18%) rotate(0deg)}
.mix-stage.is-mixing .mix-b{transform:translateY(-50%) translateX(-18%) rotate(0deg)}
.mix-plus{
  position:relative; z-index:3;
  font-family:var(--mono); font-size:16px; color:var(--bone);
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:rgba(12,11,9,.72); border:1px solid rgba(236,226,209,.22);
}
.mix-glow{
  position:absolute; width:70%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,170,100,.28), transparent 66%);
  mix-blend-mode:screen; animation:mixPulse 4.6s ease-in-out infinite;
}
@keyframes mixPulse{0%,100%{opacity:.5; transform:scale(.92)} 50%{opacity:.95; transform:scale(1.06)}}
.mix-ratio{display:flex; gap:4px; height:2px; margin-top:2px}
.mix-ratio i{display:block; height:2px; border-radius:1px; background:linear-gradient(90deg,var(--amber),var(--ember))}
.mix-ratio i:first-child{flex:var(--ra,1)}
.mix-ratio i:last-child{flex:var(--rb,1); opacity:.55}

@media(min-width:860px){
  .daily{grid-template-columns:1fr 1fr; max-width:1180px; margin:0 auto; padding-inline:var(--pad)}
  .daily{align-items:stretch}
  .daily-card{grid-template-columns:minmax(110px,36%) 1fr; grid-template-rows:auto 1fr; column-gap:14px}
  .daily-body{min-width:0}
  .daily-no{grid-column:1 / -1}
  .daily-media,.mix-stage{aspect-ratio:1; height:100%}
  .daily-body{align-self:center}
}

/* ---- imleç takibi (değerler JS'ten) ---- */
.hero-map{--mx:50%; --my:50%}
.hero-map .hero-media img{transition:transform .9s var(--ease)}

/* ---- ses düğmesi ---- */
  position:fixed; left:calc(var(--pad) * .55); bottom:calc(18px + env(safe-area-inset-bottom,0px));
  z-index:46; display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(236,226,209,.16); background:rgba(12,11,9,.5); backdrop-filter:blur(8px);
  font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  transition:color .3s, border-color .3s, opacity .4s;
}
@keyframes eqJump{0%,100%{height:3px} 50%{height:11px}}

@media(max-width:760px){
}

@media(prefers-reduced-motion:reduce){
  .hero-title .ht-in{animation:none; opacity:1; transform:none; filter:none}
  .hero-title em::after, .hero-glow{animation:none}
  .hero-glow{opacity:.5}
}

/* ---- kaydırma akıcılığı: ekran dışı bölümler hiç boyanmaz ----
   Uzun tek sayfada tarayıcı her karede görünmeyen bölümleri de
   hesaba katıyordu; bu blok onları düzenden çıkarır. `contain-intrinsic-size`
   yer tutucu yüksekliği verir ki scroll çubuğu zıplamasın. */
.daily, .hearth {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}


/* ---------- hesap paneli: rahat kullanım ---------- */
.acc-form{gap:14px; margin-top:2px}
.acc-hint{margin:0; font-family:var(--sans); font-size:13.5px; line-height:1.5; color:var(--muted)}
.acc-hint a, .acc-hint button{color:var(--bone-dim); border-bottom:1px solid var(--line); padding:0; font:inherit}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:46px}
.pw-eye{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  color:var(--muted); border:0; background:none;
}
.pw-eye:hover{color:var(--bone)}
.pw-eye svg{width:18px; height:18px}
.acc-ok{margin:0; font-family:var(--sans); font-size:14px; color:#8faa79}
.acc-welcome{margin:2px 0 14px; font-family:var(--sans); font-size:14px; line-height:1.5; color:var(--muted)}
.acc-actions{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.acc-link{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:10px;
  background:rgba(236,226,209,.03); color:var(--bone); text-align:left;
  font-family:var(--sans); font-size:15px; letter-spacing:0; text-transform:none;
  transition:border-color .2s, background .2s;
}
.acc-link:hover{border-color:rgba(201,123,60,.5); background:rgba(236,226,209,.06)}
.acc-link span.ar{color:var(--muted); font-size:16px}
.cart-empty-cta{margin-top:14px}

/* ---------- hesap: siparişler tam ekran panel ---------- */
/* Siparişler listesi uzun olduğu için tam ekran; içerik panelin kendi
   içinde kayar, sayfa değil. İç içe scroller'a touch-action ver ki iOS/Android
   dokunmatik kaydırma panelde çalışsın. */
.sheet--account .sheet-panel{
  overscroll-behavior:contain; touch-action:pan-y;
}
.sheet--account .sheet-panel::-webkit-scrollbar{width:4px}
.sheet--account .sheet-panel::-webkit-scrollbar-thumb{background:rgba(236,226,209,.18); border-radius:2px}