/* ═══════════════════════════════════════════════════════════════════════
   Softto Plus · 120 ml yağ serisi

   TASARIM KARARI — sayfanın sabit bir rengi yok.
   Seçili ürünün sıvı rengi `--urun` değişkenine yazılıyor ve zeminden
   vurguya, ışıktan gölgeye kadar her şey ondan türüyor.

   Şişe 3 BOYUTLU DÖNÜYOR: ön yüzde ambalajın kendisi (marka, ürün adı,
   FACE·BODY·HAIR), arka yüzde yazısız hâli. İkisi de aynı fotoğraftan
   üretildiği için form, renk ve kapak tonu birebir tutuyor.

   Tipografi ambalajın kendi ikilisini sürdürüyor: ürün adları serif
   (Cormorant Garamond), sistem yazısı geometrik sans (Jost).
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Sabit zemin: nötr siyah değil, kahveye çalan sıcak siyah. */
  --gece:#0A0705;
  --ak:#F4EDE3;
  --soluk:#9C8D7C;
  --altin:#C9A55C;

  /* Seçili ürün — JS yazar. Başlangıç: Love Oil. */
  --urun:#B3242F;
  --urun-ac:#E04B54;

  --gecis:1000ms cubic-bezier(.22,.61,.36,1);
  --olcek:clamp(15px,.55vw + 13px,17px);
}

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

body{
  margin:0;
  background:var(--gece);
  color:var(--ak);
  font:300 var(--olcek)/1.65 Jost,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2{margin:0; font-weight:300; letter-spacing:-.01em}
p{margin:0}
ul,ol,dl{margin:0; padding:0; list-style:none}

.gizli{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.atla{position:absolute; left:-9999px; top:12px; z-index:99;
  background:var(--ak); color:var(--gece); padding:10px 18px; border-radius:2px}
.atla:focus{left:12px}
:focus-visible{outline:2px solid var(--altin); outline-offset:3px}

.etiket{font-size:10.5px; font-weight:500; letter-spacing:.28em;
  text-transform:uppercase; color:var(--altin)}

/* ── Üst çubuk ───────────────────────────────────────────────────────── */
.ust{
  position:fixed; inset:0 0 auto; z-index:30;
  display:grid; grid-template-columns:1fr auto; align-items:center;
  padding:20px clamp(16px,3.4vw,38px);
  gap:clamp(10px,2.6vw,22px);
}
/* Çubuk sabit duruyor ve sayfa kayınca içerik ALTINDAN GEÇİYOR — telefonda
   "Face & Body Lotion" başlığı doğrudan logonun üstüne biniyordu. Yumuşak bir
   karartma ikisini ayırıyor; kendi zemini olmadığı için hero'da görünmez
   kalıyor. */
.ust::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, var(--gece) 12%, color-mix(in srgb,var(--gece) 62%,transparent) 58%, transparent);
}
.ust-sag{justify-self:end; display:flex; align-items:center; gap:clamp(12px,2vw,26px)}
.marka{
  font-size:clamp(13px,1.4vw,16px); font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ak); text-decoration:none; white-space:nowrap;
}
.marka span{color:var(--altin); margin-left:.35em}
.dil,.menu-dug{
  background:none; border:0; padding:0; cursor:pointer;
  font:500 11px/1 Jost,sans-serif; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ak);
}
.dil span{color:var(--soluk)}
.cta{
  padding:14px 20px; border-radius:100px;
  background:var(--urun-ac); color:#120A08; text-decoration:none;
  font:500 11px/1 Jost,sans-serif; letter-spacing:.16em; text-transform:uppercase;
  transition:background var(--gecis), transform .25s;
  white-space:nowrap;
}
.cta:hover{transform:translateY(-1px)}
/* Telefonda menü düğmesi GİZLENİYORDU ve menüyü açacak başka hiçbir şey
   yoktu — site 620px altında gezilemez hâldeydi. Düğme artık gizlenmiyor,
   ikona dönüşüyor. Aynı sorguda üst çubuk iki sütuna iniyor: marka ile CTA
   arasındaki boşluk tam 0 pikseldi ve pil "PLUS"un üstüne biniyordu. */
@media (max-width:620px){
  .ust{grid-template-columns:auto 1fr; padding-inline:12px}
  .menu-dug{font-size:0; width:44px; height:44px; padding:0}
  .menu-dug::before{content:"\2261"; font-size:22px; line-height:44px}
  .cta{padding:12px 14px; font-size:10px; letter-spacing:.12em}
}

/* ── SAHNE ───────────────────────────────────────────────────────────── */
.sahne{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  grid-template-columns:100%;
  place-items:center;
  padding:92px 0 30px;
  overflow:hidden;
  isolation:isolate;
}

/* Zemin: ürün renginden akan DÜZ GEÇİŞ. Üretilen fotoğrafik sahneler
   üzerine çok düşük yoğunlukta doku olarak biniyor — referanstaki gibi
   rengin kendisi baskın, fotoğraf değil. */
.fon{position:absolute; inset:0; z-index:-2; background:var(--gece)}
.fon::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(46% 38% at 50% 46%, color-mix(in srgb,var(--urun-ac) 26%,transparent), transparent 72%),
    radial-gradient(90% 55% at 50% 112%, color-mix(in srgb,var(--urun) 16%,transparent), transparent 64%),
    linear-gradient(180deg, #0C0806, var(--gece) 58%);
  transition:background var(--gecis);
}
.fon-doku{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:.07; mix-blend-mode:overlay;
  transition:opacity var(--gecis);
}

/* Şişenin arkasındaki dev ad — referanstaki gibi bulanık ve geride. */
.dev-ad{
  grid-row:1; grid-column:1; align-self:center;
  z-index:-1; margin:0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:300; font-style:italic;
  font-size:clamp(58px,15vw,215px);
  line-height:.88; letter-spacing:-.02em;
  text-align:center; text-wrap:balance;
  font-variant-numeric:lining-nums;
  color:color-mix(in srgb,var(--ak) 70%,var(--urun-ac));
  opacity:.07; filter:blur(3px);
  transition:color var(--gecis), opacity var(--gecis);
  user-select:none;
}

/* ── Şişe rayı ve 3B dönüş ───────────────────────────────────────────── */
.sise-yol{
  grid-row:1; grid-column:1; align-self:center;
  position:relative;
  width:min(100%,1240px);
  height:100%; max-height:min(66svh,560px); min-height:0;
  display:flex; align-items:center; justify-content:center;
  perspective:1400px;
}
/* Alfa kanallı WebP kullanılıyor, KARIŞIM YOK.
   Önceki sürüm "mix-blend-mode: screen" ile siyah zemini düşürüyordu. O yol
   3B dönüşle birlikte çalışmıyor: "transform-style: preserve-3d" yeni bir
   stacking context açınca karışım arka plana ulaşamıyor ve şişeler ekranda
   yine siyah dikdörtgen kutulara dönüşüyor (ölçüldü). Alfa artık hazırlık
   aşamasında üretiliyor — bkz. tools/gorsel/web-hazirla.sh. */
.sise{
  position:absolute;
  height:100%; aspect-ratio:740/1200;
  transform-style:preserve-3d;
  transition:transform var(--gecis), opacity var(--gecis);
  will-change:transform,opacity;
}
.yuz{
  position:absolute; inset:0;
  backface-visibility:hidden;
  display:flex; align-items:center; justify-content:center;
}
.yuz img{display:block; height:100%; width:auto}
.yuz-arka{transform:rotateY(180deg)}

/* Odaktaki şişe yavaşça dönüyor: ambalaj → yazısız yüz → ambalaj.
   Referanstaki 3B dönüşün karşılığı; burada iki gerçek fotoğraftan
   kuruluyor, model dosyası gerekmiyor. */
@keyframes don{ to{ transform:rotateY(360deg) } }
.sise[data-yer="0"]{ transform:translateX(0) scale(1); opacity:1; z-index:5 }
.sise[data-yer="0"] .donen{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  animation:don 15s linear infinite;
}
.donen{position:absolute; inset:0; transform-style:preserve-3d}
.sise:hover .donen{animation-play-state:paused}

/* Komşular kenarlara doğru açılanıp soluyor.
   translateX YÜZDESİ ŞİŞENİN KENDİ GENİŞLİĞİNE göre hesaplanıyor (~345 px),
   viewport'a göre değil — ilk sürümdeki %40 yalnızca 138 px kaydırıyordu ve
   komşular odaktaki şişenin üstüne biniyordu. %92 ≈ 320 px, aradaki boşluğu
   açıyor. */
.sise[data-yer="-1"]{ transform:translateX(-92%)  scale(.62) rotateY(26deg);  opacity:.46; z-index:4 }
.sise[data-yer="1"] { transform:translateX( 92%)  scale(.62) rotateY(-26deg); opacity:.46; z-index:4 }
.sise[data-yer="-2"]{ transform:translateX(-168%) scale(.44) rotateY(36deg);  opacity:.16; z-index:3 }
.sise[data-yer="2"] { transform:translateX( 168%) scale(.44) rotateY(-36deg); opacity:.16; z-index:3 }
.sise[data-yer="uzak"]{ transform:scale(.34); opacity:0; z-index:1; pointer-events:none }

@media (max-width:900px){
  .sise[data-yer="-1"]{ transform:translateX(-78%) scale(.5) rotateY(22deg);  opacity:.3 }
  .sise[data-yer="1"] { transform:translateX( 78%) scale(.5) rotateY(-22deg); opacity:.3 }
  .sise[data-yer="-2"],.sise[data-yer="2"]{ opacity:0 }
}

/* ── Yan metin (sol) ─────────────────────────────────────────────────── */
.yan{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:9; max-width:230px;
  display:flex; flex-direction:column; gap:10px;
}
.yan-sol{left:clamp(16px,4.6vw,66px)}
.cizgi{
  width:44px; height:1px; background:var(--urun-ac);
  transition:background var(--gecis);
}
.yan-bas{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(21px,2.3vw,30px); line-height:1.1;
  font-variant-numeric:lining-nums;
}
.yan-metin{font-size:13.5px; line-height:1.6; color:var(--soluk)}

/* ── Rozet şeridi (sağ) ──────────────────────────────────────────────── */
.rozet{
  position:absolute; right:clamp(14px,3.2vw,44px); top:50%;
  transform:translateY(-50%); z-index:9;
  display:flex; flex-direction:column; gap:14px;
}
.rozet li{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  width:52px;
}
.rozet svg{
  width:38px; height:38px; padding:9px;
  border:1px solid color-mix(in srgb,var(--ak) 20%,transparent);
  border-radius:50%;
  fill:none; stroke:var(--ak); stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round;
  transition:border-color var(--gecis);
}
.rozet li:hover svg{border-color:var(--urun-ac)}
.rozet span{font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--soluk)}

@media (max-width:820px){
  .yan{position:static; transform:none; max-width:none; align-items:center;
    text-align:center; padding:0 22px 4px}
  .yan-sol{order:2}
  .rozet{position:static; transform:none; flex-direction:row; order:3;
    justify-content:center; gap:8px; padding-top:6px}
  .rozet svg{width:32px; height:32px; padding:7px}
  .yan .cizgi{display:none}
  .rozet span{font-size:11px; letter-spacing:.08em}
  .rozet li{width:auto; min-width:58px}
  .sahne{grid-template-rows:minmax(0,1fr) auto auto auto; gap:2px; padding:78px 0 18px}
  .sise-yol{grid-row:1}
}

/* ── Oklar: yanlarda ─────────────────────────────────────────────────── */
.ok{
  position:absolute; top:50%; transform:translateY(-50%); z-index:8;
  width:42px; height:42px; padding:0;
  display:grid; place-items:center;
  background:color-mix(in srgb,var(--gece) 55%,transparent);
  border:1px solid color-mix(in srgb,var(--ak) 20%,transparent);
  border-radius:50%; color:var(--ak); cursor:pointer;
  backdrop-filter:blur(3px);
  transition:border-color .3s, background .3s;
}
.ok:hover{border-color:var(--urun-ac); background:color-mix(in srgb,var(--urun) 34%,transparent)}
.ok svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round}
.ok-sol{left:max(320px,17vw)}
.ok-sag{right:max(320px,17vw)}
/* Telefonda oklar ŞİŞE HİZASINDA kalıyor. Alta indirilince yan metnin
   üstüne biniyor ve cümleyi kesiyorlardı; şişenin yanı hem boş hem de
   parmağın doğal olarak durduğu yer. */
@media (max-width:820px){
  .ok{top:38%; width:44px; height:44px}
  .ok-sol{left:12px} .ok-sag{right:12px}
}

/* ── Künye + ilerleme ────────────────────────────────────────────────── */
.kunye{
  grid-row:2; grid-column:1; z-index:7;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  width:min(100%,520px); padding:0 22px;
}
.kunye-ad{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(24px,3vw,38px); letter-spacing:.06em; text-align:center;
  font-variant-numeric:lining-nums;
}
/* İlerleme: her ürün bir dilim. Hangisinde olduğun ve kaç tane olduğu
   aynı anda okunuyor — nokta dizisi bunu yapmıyordu. */
.ilerleme{display:flex; gap:5px; width:100%}
.ilerleme button{
  position:relative; flex:1; padding:0; border:0; background:none; cursor:pointer;
}
/* Görünmez dokunma alanı — çizginin kendisi 2px kalıyor, hedef 38px oluyor. */
.ilerleme button::before{content:""; position:absolute; inset:-18px 0}
.ilerleme button::after{
  content:""; display:block; height:2px;
  background:color-mix(in srgb,var(--ak) 22%,transparent);
  transition:background var(--gecis);
}
.ilerleme button[aria-current="true"]::after{background:var(--urun-ac)}
.ilerleme button:hover::after{background:color-mix(in srgb,var(--ak) 48%,transparent)}

/* ── KOKU ────────────────────────────────────────────────────────────── */
.koku{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(28px,6vw,80px);
  padding:clamp(72px,11vw,148px) clamp(20px,6vw,88px);
  border-top:1px solid color-mix(in srgb,var(--ak) 8%,transparent);
}
.koku-govde{display:flex; flex-direction:column; gap:16px; max-width:46ch}
.koku h2{font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(32px,4.6vw,58px); line-height:1.06; text-wrap:balance}
.koku-metin{color:var(--soluk); max-width:38ch}
.sure{display:flex; gap:clamp(24px,5vw,56px); margin-top:14px}
.sure dt{font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(28px,3.6vw,42px); color:var(--altin);
  font-variant-numeric:lining-nums tabular-nums}
.sure dd{margin:2px 0 0; font-size:12.5px; letter-spacing:.1em; color:var(--soluk)}
.koku-gorsel{border-radius:3px; overflow:hidden;
  border:1px solid color-mix(in srgb,var(--ak) 9%,transparent)}
.koku-gorsel video{display:block; width:100%; aspect-ratio:16/10; object-fit:cover}
@media (max-width:820px){
  .koku{grid-template-columns:1fr}
  .koku-gorsel{order:-1}
}

/* ── LOTION ──────────────────────────────────────────────────────────── */
.lotion{
  padding:clamp(64px,10vw,128px) clamp(20px,6vw,88px) clamp(72px,11vw,140px);
  display:flex; flex-direction:column; gap:clamp(28px,5vw,52px);
  border-top:1px solid color-mix(in srgb,var(--ak) 8%,transparent);
}
.bolum-bas{display:flex; flex-direction:column; gap:12px; max-width:46ch}
.lotion h2{font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(30px,4.2vw,52px); line-height:1.08}
.lotion .bolum-metin{max-width:38ch}
.lotion-izgara{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(14px,2.4vw,26px)}
.lotion-kart{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:34px 16px 24px;
  border:1px solid color-mix(in srgb,var(--ak) 8%,transparent);
  border-radius:3px;
  background:linear-gradient(170deg, color-mix(in srgb,var(--kart) 16%,transparent), transparent 62%);
  transition:border-color .45s, transform .45s;
}
.lotion-kart:hover{border-color:color-mix(in srgb,var(--kart) 52%,transparent);
  transform:translateY(-3px)}
.lotion-kart img{display:block; height:210px; width:auto}
.lotion-ad{font-family:"Cormorant Garamond",Georgia,serif; font-size:19px;
  text-align:center; font-variant-numeric:lining-nums}
.lotion-alt{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--soluk)}

/* ── Alt ─────────────────────────────────────────────────────────────── */
.alt{
  padding:36px clamp(20px,6vw,88px) 44px;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
  border-top:1px solid color-mix(in srgb,var(--ak) 8%,transparent);
}
.alt-marka{font-size:13px; font-weight:600; letter-spacing:.22em; text-transform:uppercase}
.alt-marka span{color:var(--altin); margin-left:.35em}
.alt-not{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--soluk)}

/* ═══════════════════════════════════════════════════════════════════════
   ORTAK: menü, iç sayfa iskeleti
   Tek sayfalık vitrinden çok sayfalı siteye geçerken eklendi.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tam ekran menü ──────────────────────────────────────────────────── */
.menu{
  position:fixed; inset:0; z-index:40;
  display:grid; grid-template-rows:auto 1fr auto;
  background:var(--gece);
  opacity:0; visibility:hidden;
  transition:opacity .45s ease, visibility .45s;
}
.menu[data-acik="1"]{opacity:1; visibility:visible}
.menu::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(80% 55% at 78% 18%, color-mix(in srgb,var(--urun) 34%,transparent), transparent 68%),
    radial-gradient(70% 50% at 12% 88%, color-mix(in srgb,var(--urun-ac) 22%,transparent), transparent 66%);
}
.menu-ust{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px clamp(16px,3.4vw,38px);
}
.menu-kapat{
  background:none; border:0; padding:12px 8px; margin:-12px -8px; cursor:pointer; color:var(--ak);
  font:500 11px/1 Jost,sans-serif; letter-spacing:.18em; text-transform:uppercase;
}
.menu-liste{
  align-self:center;
  display:flex; flex-direction:column; gap:clamp(6px,1.4vh,14px);
  padding:0 clamp(20px,7vw,96px);
}
.menu-liste a{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(34px,7vw,76px); line-height:1.05;
  color:var(--ak); text-decoration:none;
  display:flex; align-items:baseline; gap:16px;
  transition:color .3s;
}
.menu-liste a:hover{color:var(--urun-ac)}
.menu-liste a[aria-current="page"]{color:var(--urun-ac)}
.menu-no{
  font:500 11px/1 Jost,sans-serif; letter-spacing:.2em; color:var(--soluk);
  font-variant-numeric:tabular-nums;
}
.menu-alt{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding:22px clamp(16px,3.4vw,38px) 30px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--soluk);
  border-top:1px solid color-mix(in srgb,var(--ak) 8%,transparent);
}

/* ── İç sayfa başlığı ────────────────────────────────────────────────── */
.sayfa-bas{
  padding:clamp(120px,16vh,190px) clamp(20px,6vw,88px) clamp(38px,6vw,64px);
  display:flex; flex-direction:column; gap:14px;
  position:relative; isolation:isolate;
}
.sayfa-bas::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, color-mix(in srgb,var(--urun) 22%,var(--gece)), var(--gece) 82%);
  transition:background var(--gecis);
}
.sayfa-bas h1{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(38px,6vw,74px); line-height:1.04; text-wrap:balance;
  font-variant-numeric:lining-nums;
}
.sayfa-ozet{color:var(--soluk); max-width:52ch}

/* ── Ortak bölüm kabı ────────────────────────────────────────────────── */
.bolum{
  padding:clamp(52px,8vw,104px) clamp(20px,6vw,88px);
  border-top:1px solid color-mix(in srgb,var(--ak) 8%,transparent);
  display:flex; flex-direction:column; gap:clamp(24px,4vw,44px);
}
.bolum h2{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(28px,4vw,48px); line-height:1.08; text-wrap:balance;
  font-variant-numeric:lining-nums;
}
.bolum-metin{color:var(--soluk); max-width:56ch}

/* ── Ürün listesi (seri sayfaları) ───────────────────────────────────── */
.urun-liste{display:flex; flex-direction:column; gap:1px;
  background:color-mix(in srgb,var(--ak) 8%,transparent)}
.urun-satir{
  display:grid; grid-template-columns:104px 1fr auto;
  align-items:center; gap:clamp(16px,3vw,38px);
  padding:22px clamp(12px,2vw,26px);
  background:var(--gece);
  transition:background .4s;
}
.urun-satir:hover{background:color-mix(in srgb,var(--satir) 12%,var(--gece))}
.urun-satir img{display:block; height:104px; width:auto; margin:0 auto}
.urun-bilgi{display:flex; flex-direction:column; gap:3px; min-width:0}
.urun-ad{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(20px,2.4vw,27px); line-height:1.15;
  font-variant-numeric:lining-nums;
}
.urun-alt{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--satir)}
.urun-not{font-size:13.5px; color:var(--soluk); margin-top:4px; max-width:46ch}
.urun-hacim{
  font:400 11px/1 "Jost",sans-serif; letter-spacing:.2em;
  text-transform:uppercase; color:var(--soluk); white-space:nowrap;
}
@media (max-width:620px){
  .urun-satir{grid-template-columns:76px 1fr; gap:14px}
  .urun-satir img{height:76px}
  .urun-hacim{display:none}
}

/* ── Adım listesi (kullanım) ─────────────────────────────────────────── */
.adim{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px;
  background:color-mix(in srgb,var(--ak) 8%,transparent)}
.adim li{background:var(--gece); padding:26px 22px 30px;
  display:flex; flex-direction:column; gap:9px}
.adim-no{
  font-family:"Cormorant Garamond",Georgia,serif; font-style:italic;
  font-size:34px; line-height:1; color:var(--altin);
  font-variant-numeric:lining-nums;
}
.adim-bas{font-size:16px; font-weight:500}
.adim-metin{font-size:14px; color:var(--soluk)}

/* ── Bilgi ızgarası (marka) ──────────────────────────────────────────── */
.bilgi{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px;
  background:color-mix(in srgb,var(--ak) 8%,transparent)}
.bilgi div{background:var(--gece); padding:24px 20px 28px;
  display:flex; flex-direction:column; gap:6px}
.bilgi dt{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--altin)}
.bilgi dd{margin:0; font-size:14.5px; color:var(--ak)}

/* ── İletişim ────────────────────────────────────────────────────────── */
.kanal{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.kanal a{
  display:flex; flex-direction:column; gap:6px;
  padding:24px 22px 26px; text-decoration:none;
  border:1px solid color-mix(in srgb,var(--ak) 10%,transparent);
  border-radius:3px; color:var(--ak);
  transition:border-color .4s, transform .4s;
}
.kanal a:hover{border-color:var(--urun-ac); transform:translateY(-2px)}
.kanal-tur{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--altin)}
.kanal-ad{font-family:"Cormorant Garamond",Georgia,serif; font-size:22px}
.kanal-not{font-size:13px; color:var(--soluk)}

/* İç sayfalarda üst çubuk her zaman zeminli durmalı */
.ic .ust::before{background:linear-gradient(180deg, var(--gece) 45%, transparent)}

/* İç sayfalarda .koku bölümü kendi ölçeğini dayatmasın — ana sayfada hero
   ölçeğiyle uyumlu, iç sayfalarda .bolum ritmine uymalı. */
.ic .koku{padding-block:clamp(52px,8vw,104px); gap:clamp(24px,4vw,44px)}
.ic .koku h2{font-size:clamp(28px,4vw,48px)}
.ic .koku-metin{max-width:56ch}

/* Alt bilgi gezinmesi — HTML kaynağında sayfadan sayfaya giden bağlantı
   bırakır (menü JS ile üretiliyor, kazıyıcılar ve JS'siz ziyaretçi için
   çıkmaz oluyordu). */
.alt{flex-wrap:wrap}
.alt-nav{display:flex; flex-wrap:wrap; gap:6px 18px; order:3; width:100%;
  padding-top:18px; margin-top:4px;
  border-top:1px solid color-mix(in srgb,var(--ak) 8%,transparent)}
.alt-nav a{font-size:12.5px; letter-spacing:.06em; color:var(--soluk); text-decoration:none;
  padding:4px 0; transition:color .3s}
.alt-nav a:hover{color:var(--ak)}
.alt-nav a[aria-current="page"]{color:var(--altin)}

/* 33 — kullanim.html'de aynı metnin iki paragrafı arasındaki boşluk başlık
   arasıyla eşitti (.bolum gap 44px), iki ayrı blok gibi okunuyordu. */
.bolum-yazi{display:flex; flex-direction:column; gap:14px; max-width:56ch}
.bolum-yazi p{color:var(--soluk)}

/* ═══════════════════════════════════════════════════════════════════════
   ŞİŞE: kapak, hacim, akan yağ
   ═══════════════════════════════════════════════════════════════════════ */

/* Kapak ve gövde AYNI görselin iki kırpımı — tarayıcı dosyayı bir kez
   indiriyor. %36 kesme noktası ambalajdaki metal huni omzun bittiği yer. */
.parca{position:absolute; left:50%; top:0; height:100%; width:auto;
  transform:translateX(-50%); display:block}
.parca-govde{clip-path:inset(35.5% 0 0 0)}
.parca-kapak{
  clip-path:inset(0 0 64.5% 0);
  transform-origin:50% 90%;
  transition:transform 780ms cubic-bezier(.34,1.3,.5,1);
}
/* Ürün değişirken kapak açılıp geri oturuyor. */
[data-kapak="acik"] .sise[data-yer="0"] .parca-kapak{
  transform:translateX(-50%) translateY(-26px) rotate(-5deg);
}
/* İmleç şişenin üstündeyken de aralanıyor — kapağın çıkabildiği belli olsun. */
.sise[data-yer="0"]:hover .parca-kapak{
  transform:translateX(-50%) translateY(-16px) rotate(-3deg);
}

/* ── Hacim ────────────────────────────────────────────────────────────
   Şişe düz bir fotoğraf; dönerken kâğıt gibi görünmemesi için cama iki
   şey ekleniyor: kenarlardan içeri düşen karartma (yuvarlaklık) ve sol
   üstten inen dar bir parlama (ışığın cam üstünde kaydığı yer).
   Gerçek 3B model yok; bunlar dönüş açısına göre kayarak hacim hissi veriyor. */
.yuz-on::before,
.yuz-on::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  clip-path:inset(35.5% 0 0 0);
  /* MASKE ŞART: gradyanlar şişe siluetinin dışına taşınca ekranda yine
     siyah dikdörtgen kutular beliriyor. Şişenin kendi alfa kanalı maske
     olarak kullanılıyor — --sise değişkenini JS her şişeye yazıyor. */
  -webkit-mask-image:var(--sise); mask-image:var(--sise);
  -webkit-mask-size:auto 100%;    mask-size:auto 100%;
  -webkit-mask-position:center;   mask-position:center;
  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
}
.yuz-on::before{
  background:linear-gradient(90deg,
    rgba(0,0,0,.5) 0%, rgba(0,0,0,.16) 17%, transparent 34%,
    transparent 66%, rgba(0,0,0,.2) 84%, rgba(0,0,0,.55) 100%);
  mix-blend-mode:multiply;
}
.yuz-on::after{
  background:linear-gradient(104deg,
    transparent 26%, rgba(255,255,255,.16) 33%, rgba(255,255,255,.05) 39%,
    transparent 46%);
  mix-blend-mode:screen;
}

/* ── Akan yağ ─────────────────────────────────────────────────────────
   Şişenin ağzından süzülen tek damla. Ürünün kendi rengini alıyor, bu
   yüzden her üründe ayrı bir sıvı gibi görünüyor. */
.damla{
  position:absolute; left:50%; top:34%;
  width:7px; height:11px; margin-left:-3.5px;
  border-radius:50% 50% 46% 46%;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--urun-ac) 85%,transparent),
    color-mix(in srgb,var(--urun) 92%,transparent));
  box-shadow:0 0 9px color-mix(in srgb,var(--urun-ac) 55%,transparent),
             inset 0 -2px 3px rgba(255,255,255,.34);
  opacity:0; pointer-events:none;
}
.sise[data-yer="0"] .damla{animation:aksin 5.2s ease-in infinite}
@keyframes aksin{
  0%   {opacity:0; transform:translateY(0) scaleY(.6)}
  8%   {opacity:.95; transform:translateY(4px) scaleY(1)}
  62%  {opacity:.9;  transform:translateY(150px) scaleY(1.25)}
  74%  {opacity:.55; transform:translateY(196px) scaleY(1.5)}
  82%,100%{opacity:0; transform:translateY(214px) scaleY(.4)}
}
/* Hareket tercihi kapalıysa damla akmasın. */
@media (prefers-reduced-motion:reduce){
  .sise[data-yer="0"] .damla{animation:none}
  .sise[data-yer="0"] .donen{animation:none}
}

/* ── 360° döndürücü ──────────────────────────────────────────────────
   Şişe gerçek render'ın 24 karesinden oluşuyor; sürüklendikçe kare
   değişiyor. Prosedürel 3B'nin yerini aldı (bkz. assets/js/donus.js). */
.donus{
  position:absolute; inset:0;
  display:grid; place-items:center;
  cursor:grab; touch-action:pan-y;
}
.donus.tutuluyor{cursor:grabbing}
.donus-kare{
  display:block; height:100%; width:auto; max-width:100%;
  object-fit:contain; user-select:none; -webkit-user-drag:none;
  filter:drop-shadow(0 24px 44px rgba(0,0,0,.5));
}
.donus-ipucu{
  position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--soluk); pointer-events:none;
  opacity:.85; transition:opacity .4s;
}
.donus.tutuluyor ~ .donus-ipucu{opacity:0}

/* Dönüş dizisi devraldığında altındaki fotoğraf katmanları gizleniyor —
   yoksa iki şişe üst üste biniyor. */
[data-donus="var"] .sise[data-yer="0"] .parca,
[data-donus="var"] .sise[data-yer="0"] .yuz-on::before,
[data-donus="var"] .sise[data-yer="0"] .yuz-on::after{opacity:0}
[data-donus="var"] .sise[data-yer="0"] .donen{animation:none}
[data-donus="var"] .sise[data-yer="0"] .yuz-arka{display:none}

/* ═══════════════════════════════════════════════════════════════════════
   EDİTORYAL KATMAN — @octaboot.lb tarzı
   Siyah zemin, ince büyük harf etiket, dev ince serif başlık, altın
   çerçeveli çağrı. Renk ürünün çevresinde bir hale olarak kalıyor;
   ekranı doldurmuyor.
   ═══════════════════════════════════════════════════════════════════════ */

/* Üstte duran ince etiket — "THE HOUSE OF FASHION" karşılığı. */
.ust-etiket{
  position:absolute; left:50%; top:clamp(92px,13vh,128px);
  transform:translateX(-50%); z-index:6;
  font-size:9.5px; font-weight:500; letter-spacing:.42em; text-transform:uppercase;
  color:color-mix(in srgb,var(--altin) 78%,transparent);
  white-space:nowrap; pointer-events:none;
}

/* Altın çerçeveli çağrı — Octaboot'un "BOOK A PRIVATE FITTING" düğmesi. */
.cerceve{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 30px; text-decoration:none;
  border:1px solid color-mix(in srgb,var(--altin) 55%,transparent);
  color:var(--altin);
  font:500 10px/1 Jost,sans-serif; letter-spacing:.28em; text-transform:uppercase;
  transition:border-color .45s, background .45s, color .45s;
}
.cerceve:hover{
  border-color:var(--altin);
  background:color-mix(in srgb,var(--altin) 12%,transparent);
  color:var(--ak);
}

/* ── Detay bölümü: solda/sağda yakın plan, karşısında editorial metin ── */
.detay{
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:clamp(28px,6vw,86px);
  padding:clamp(72px,12vw,156px) clamp(20px,6vw,88px);
  border-top:1px solid color-mix(in srgb,var(--ak) 7%,transparent);
}
.detay:nth-of-type(even) .detay-gorsel{order:2}
.detay-govde{display:flex; flex-direction:column; gap:16px; max-width:44ch}
.detay-etiket{
  font-size:9.5px; font-weight:500; letter-spacing:.36em; text-transform:uppercase;
  color:color-mix(in srgb,var(--altin) 82%,transparent);
}
.detay h2{
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:300;
  font-size:clamp(30px,4.6vw,58px); line-height:1.04; letter-spacing:-.01em;
  text-wrap:balance;
}
.detay h2 em{font-style:italic; color:color-mix(in srgb,var(--urun-ac) 62%,var(--ak));
  transition:color var(--gecis)}
.detay-metin{color:var(--soluk); font-size:15.5px; max-width:40ch}
.detay-gorsel{
  position:relative; border-radius:2px; overflow:hidden;
  background:#070504;
  border:1px solid color-mix(in srgb,var(--ak) 7%,transparent);
}
.detay-gorsel img,.detay-gorsel video{display:block; width:100%; height:auto;
  aspect-ratio:4/3; object-fit:cover}
/* Görselin altına inen ince altın çizgi — Octaboot'ta bölümleri bu ayırıyor. */
.detay-gorsel::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb,var(--altin) 62%,transparent), transparent);
}
@media (max-width:820px){
  .detay{grid-template-columns:1fr; gap:24px}
  .detay:nth-of-type(even) .detay-gorsel{order:0}
}

/* Bölüm arası ince altın ayraç */
.ayrac{
  height:1px; margin:0 clamp(20px,6vw,88px);
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb,var(--altin) 34%,transparent), transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
   ANLATIM — @octaboot.lb'nin scroll akışı
   Ürün ekranda SABİT durur, kaydırdıkça döner ve her aşamada bir
   ayrıntısı anlatılır. Octaboot bunu yaka → manşet → düğme diye yapıyor;
   burada kapak → cam → etiket → hacim.

   Dönüş kareleri zaten elimizde (24 kare), scroll konumu doğrudan kare
   indeksine bağlanıyor: ayrı bir animasyon kütüphanesi gerekmiyor.
   ═══════════════════════════════════════════════════════════════════════ */
.anlatim{
  position:relative;
  border-top:1px solid color-mix(in srgb,var(--ak) 7%,transparent);
}
.anlatim-sabit{
  position:sticky; top:0; height:100svh;
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(24px,5vw,72px);
  padding:0 clamp(20px,6vw,88px);
  overflow:hidden;
}
/* Şişe sağda, metin solda — Octaboot'taki gibi. */
.anlatim-sise{
  position:relative; grid-column:2;
  height:min(72svh,660px);
  display:grid; place-items:center;
}
.anlatim-sise .donus{position:absolute; inset:0}
.anlatim-sise .donus-kare{filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}

/* Şişenin arkasındaki ışık — ürün rengini taşıyor, ekranı doldurmuyor. */
.anlatim-sabit::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(38% 34% at 72% 50%,
    color-mix(in srgb,var(--urun-ac) 22%,transparent), transparent 70%);
  transition:background var(--gecis);
}

.anlatim-metin{
  grid-column:1; position:relative;
  display:grid; align-items:center; min-height:12em;
}
/* Adımlar üst üste duruyor, yalnız etkin olan görünüyor. */
.anlatim-adim{
  grid-area:1/1;
  display:flex; flex-direction:column; gap:14px; max-width:42ch;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
  pointer-events:none;
}
.anlatim-adim[data-etkin="1"]{opacity:1; transform:none; pointer-events:auto}
.anlatim-no{
  font:500 10px/1 "IBM Plex Mono","Jost",monospace; letter-spacing:.3em;
  color:color-mix(in srgb,var(--altin) 75%,transparent);
  font-variant-numeric:tabular-nums;
}
.anlatim-adim h3{
  margin:0; font-family:"Cormorant Garamond",Georgia,serif; font-weight:300;
  font-size:clamp(28px,4.2vw,52px); line-height:1.06; letter-spacing:-.01em;
  text-wrap:balance;
}
.anlatim-adim h3 em{font-style:italic;
  color:color-mix(in srgb,var(--urun-ac) 62%,var(--ak));
  transition:color var(--gecis)}
.anlatim-adim p{color:var(--soluk); font-size:15.5px}

/* Kaydırma alanı — her adım bir ekran boyu. */
.anlatim-yol{position:relative}
.anlatim-durak{height:100svh}

/* İlerleme: hangi adımdayız. */
.anlatim-cizgi{
  position:absolute; left:clamp(20px,6vw,88px); bottom:clamp(28px,6vh,56px);
  display:flex; gap:6px; z-index:2;
}
.anlatim-cizgi span{
  width:26px; height:2px; background:color-mix(in srgb,var(--ak) 20%,transparent);
  transition:background .45s;
}
.anlatim-cizgi span[data-etkin="1"]{background:var(--urun-ac)}

@media (max-width:820px){
  .anlatim-sabit{grid-template-columns:1fr; grid-template-rows:1fr auto;
    padding-bottom:clamp(28px,8vh,60px)}
  .anlatim-sise{grid-column:1; grid-row:1; height:min(46svh,420px)}
  .anlatim-metin{grid-column:1; grid-row:2; min-height:11em}
  .anlatim-adim{max-width:none}
  .anlatim-cizgi{left:50%; transform:translateX(-50%); bottom:12px}
}