/* ===========================================================
   THE TURN ROASTERY — Bileşenler (Faz 2)
   Buton · Ambalaj · Ürün kartı · Satın alma kutusu · Künye
   Kavurma göstergesi · Demleme zamanlayıcı · Filtre · Çekmece
   =========================================================== */

/* ---------- Buton ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-6);
  font-size:var(--fs-sm);font-weight:600;letter-spacing:.01em;
  border:1px solid transparent;border-radius:var(--radius-none);
  text-align:center;position:relative;overflow:hidden;
  transition:background-color var(--dur-fast) var(--ease-hover),
             color var(--dur-fast) var(--ease-hover),
             border-color var(--dur-fast) var(--ease-hover);
}
.btn--primary{background:var(--accent);color:var(--accent-contrast)}
.btn--primary:hover{background:var(--accent-hover)}
.btn--secondary{border-color:var(--border-strong);color:var(--text)}
.btn--secondary:hover{border-color:var(--text);background:var(--surface-sunken)}
.btn--block{width:100%}
.btn--lg{padding:var(--space-4) var(--space-8);font-size:var(--fs-body)}
.btn[disabled]{opacity:.45;pointer-events:none}
/* sepete ekleme: buton içi ilerleme çizgisi */
.btn__progress{
  position:absolute;inset:0;background:rgba(255,255,255,.22);
  transform:scaleX(0);transform-origin:left;
}
.btn[data-loading] .btn__progress{
  transform:scaleX(1);transition:transform 620ms var(--ease-swap);
}

/* ---------- Ambalaj: gerçek ürün render'ı ---------- */
.bag{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  display:grid;place-items:center;padding:var(--space-4);
  background:
    radial-gradient(85% 65% at 50% 32%,rgba(216,165,124,.14),transparent 68%),
    linear-gradient(165deg,var(--navy-800) 0%,var(--navy-950) 70%);
  isolation:isolate;
}
.bag > img{
  width:auto;height:100%;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.55));
}
.bag__weight{
  position:absolute;top:var(--space-3);right:var(--space-4);z-index:1;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;
  color:rgba(255,255,255,.5);
}

/* ---------- 360°: gerçek kare dizisi ----------
   42 kare, döner tabla çekimi. Arka planları Vision ile ayıklandı,
   taban izine göre hizalandı, tek ölçeğe normalize edildi. */
.bagspin{
  position:relative;width:clamp(220px,30vw,360px);
  aspect-ratio:640/760;margin-inline:auto;
  touch-action:pan-y;user-select:none;cursor:grab;
}
.spin[data-dragging] .bagspin{cursor:grabbing}
.bagspin__img{
  width:100%;height:100%;object-fit:contain;display:block;
  position:relative;z-index:1;pointer-events:none;
  filter:drop-shadow(0 44px 44px rgba(0,0,0,.55));
}
.bagspin__floor{
  position:absolute;left:50%;bottom:2%;translate:-50% 0;z-index:0;
  width:min(150%,420px);aspect-ratio:5/1;
  border:1px solid var(--border);border-radius:50%;
  pointer-events:none;
}
/* Kareler yüklenirken imleç beklemede kalsın */
.bagspin:not([data-ready]){cursor:progress}

/* ---------- Ürün kartı ---------- */
.card{display:flex;flex-direction:column;gap:var(--space-4);position:relative}
.card__media{overflow:hidden;background:var(--surface-sunken);position:relative}
.card__media .bag > img{transition:scale 620ms var(--ease-reveal)}
.card:hover .card__media .bag > img,
.card:focus-within .card__media .bag > img{scale:1.05}
.card__badges{
  position:absolute;top:var(--space-3);left:var(--space-3);z-index:2;
  display:flex;flex-direction:column;gap:var(--space-1);align-items:flex-start;
}
.card__head{display:flex;justify-content:space-between;gap:var(--space-4);align-items:baseline}
.card__name{font-size:var(--fs-h3);font-weight:600;line-height:1.35}
.card__origin{
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-subtle);margin-top:2px;display:block;
}
.card__price{
  font-family:var(--font-mono);font-size:var(--fs-data);font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
/* tat notaları: hover'da alttan yükselir */
.card__notes{
  display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-2);
  font-size:var(--fs-sm);color:var(--text-muted);
  translate:0 6px;opacity:.75;
  transition:translate var(--dur-slow) var(--ease-reveal),
             opacity var(--dur-slow) var(--ease-reveal);
}
.card:hover .card__notes,.card:focus-within .card__notes{translate:0 0;opacity:1}
.card__notes span::after{content:" ·";color:var(--accent);margin-left:2px}
.card__notes span:last-child::after{content:""}
.card__link::after{content:"";position:absolute;inset:0;z-index:3}

/* ---------- Rozet ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 7px;
  background:var(--surface-raised);border:1px solid var(--border-strong);
  border-radius:var(--radius-input);color:var(--text);
}
.badge--fresh{border-color:var(--in-stock);color:var(--in-stock)}
.badge--low{border-color:var(--low-stock);color:var(--low-stock)}
.badge--out{border-color:var(--sold-out);color:var(--sold-out)}
.badge--accent{border-color:var(--accent);color:var(--accent)}

/* ---------- Kavurma göstergesi ---------- */
.roast-scale{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;margin-top:var(--space-4)}
.roast-scale div{
  height:44px;display:grid;place-items:end center;padding-bottom:5px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;
  color:rgba(255,255,255,.85);position:relative;
}
.roast-scale div:nth-child(1){background:var(--copper-300);color:var(--copper-950)}
.roast-scale div:nth-child(2){background:var(--copper-400);color:var(--copper-950)}
.roast-scale div:nth-child(3){background:var(--copper-600)}
.roast-scale div:nth-child(4){background:var(--copper-800)}
.roast-scale div:nth-child(5){background:var(--copper-950)}
.roast-scale div[data-active]{
  outline:2px solid var(--text);outline-offset:-2px;font-weight:600;
}

/* ---------- Demleme zamanlayıcı ---------- */
.brew{border:1px solid var(--border);background:var(--surface-raised)}
.brew__head{
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);
  padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--border);
}
.brew__clock{
  font-family:var(--font-mono);font-size:2rem;font-variant-numeric:tabular-nums;
  letter-spacing:.02em;line-height:1;
}
.brew__steps{list-style:none;margin:0;padding:0}
.brew__steps li{
  display:grid;grid-template-columns:70px 1fr auto;gap:var(--space-4);
  padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--border);
  align-items:baseline;position:relative;
  transition:background-color var(--dur-base) var(--ease-hover);
}
.brew__steps li:last-child{border-bottom:0}
.brew__steps li[data-active]{background:var(--surface-sunken)}
.brew__steps li[data-active]::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
}
.brew__t{font-family:var(--font-mono);font-size:var(--fs-data);font-variant-numeric:tabular-nums;color:var(--accent)}
.brew__w{font-family:var(--font-mono);font-size:var(--fs-data);color:var(--text-muted);white-space:nowrap}

/* ---------- Filtre çubuğu ---------- */
.filters{
  display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);align-items:center;
  padding-block:var(--space-4);border-block:1px solid var(--border);
}
.filters__label{
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-subtle);margin-right:var(--space-2);
}
.chipbtn{
  padding:6px var(--space-3);font-size:var(--fs-sm);
  border:1px solid var(--border-strong);border-radius:var(--radius-pill);
  transition:border-color var(--dur-fast) var(--ease-hover),
             background-color var(--dur-fast) var(--ease-hover),
             color var(--dur-fast) var(--ease-hover);
}
.chipbtn:hover{border-color:var(--text)}
.chipbtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}

/* ---------- Akordiyon ---------- */
.acc{border-top:1px solid var(--border)}
.acc__btn{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);
  padding:var(--space-5) 0;text-align:left;font-size:var(--fs-h3);font-weight:600;
}
.acc__sign{position:relative;width:14px;height:14px;flex:0 0 auto;color:var(--accent)}
.acc__sign::before,.acc__sign::after{
  content:"";position:absolute;left:0;top:calc(50% - .75px);
  width:100%;height:1.5px;background:currentColor;
  transition:transform var(--dur-base) var(--ease-swap);
}
.acc__sign::after{transform:rotate(90deg)}
.acc__btn[aria-expanded="true"] .acc__sign::after{transform:rotate(0deg)}
/* Fotoğraf üzerindeki akordiyon */
.acc--onmedia{border-top-color:var(--border)}
.acc--onmedia .acc__panel .inner{color:var(--text-muted)}
.acc__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-base) var(--ease-swap);
}
.acc__panel > div{overflow:hidden}
.acc__btn[aria-expanded="true"] + .acc__panel{grid-template-rows:1fr}
.acc__panel .inner{padding-bottom:var(--space-6);color:var(--text-muted);max-width:var(--measure)}

/* ---------- Sepet çekmecesi ---------- */
/* Perde ve sayfa yayla sürülür — CSS geçişi YOK.
   CSS geçişi uçuş halinde yakalanıp hız devralamaz. */
.scrim{
  position:fixed;inset:0;background:var(--scrim);z-index:80;
  opacity:0;pointer-events:none;
}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:90;
  background:var(--surface-raised);border-left:1px solid var(--border);
  box-shadow:-24px 0 60px -30px rgba(11,21,38,.5);
  transform:translate3d(101%,0,0);      /* JS yoksa kapalı kalır */
  display:flex;flex-direction:column;
  touch-action:pan-y;                    /* yatay jest bize, dikey gövdeye */
  will-change:transform;
}
.drawer[data-dragging]{user-select:none;cursor:grabbing}
/* Tutma göstergesi: sürüklenebilir olduğu görünsün */
.drawer__grip{
  position:absolute;left:7px;top:50%;translate:0 -50%;
  width:4px;height:44px;border-radius:var(--radius-pill);
  background:var(--border-strong);
}
.drawer__head{
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--border);
}
.drawer__body{flex:1;overflow-y:auto;padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}
.drawer__foot{padding:var(--space-6);border-top:1px solid var(--border);display:flex;flex-direction:column;gap:var(--space-4)}
.line{display:grid;grid-template-columns:56px 1fr auto;gap:var(--space-4);align-items:start}
.line .bag{aspect-ratio:4/5;padding:4px}
.line .bag__weight{display:none}

/* ---------- Yorum özeti ---------- */
.reviews__summary{display:flex;gap:var(--space-8);flex-wrap:wrap;align-items:center}
.stars{color:var(--accent);letter-spacing:.15em;font-size:var(--fs-body-l)}
.bars{display:flex;flex-direction:column;gap:4px;min-width:220px;flex:1}
.bars__row{display:grid;grid-template-columns:14px 1fr 32px;gap:var(--space-3);align-items:center;
  font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
.bars__row i{display:block;height:6px;background:var(--surface-sunken);position:relative}
.bars__row i b{position:absolute;inset:0 auto 0 0;background:var(--accent)}
.review{border-top:1px solid var(--border);padding-block:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}
.review__head{display:flex;gap:var(--space-3);align-items:baseline;flex-wrap:wrap}


/* ===========================================================
   Basma tepkisi — bırakmada değil, basma anında.
   Gecikme göründüğü anda doğrudanlık hissi uçuruma düşer.
   =========================================================== */
.btn,.chipbtn,.qty button,.field__ctl select,.card__media .bag{
  transition:scale 110ms cubic-bezier(.32,.72,0,1),
             background-color var(--dur-fast) var(--ease-hover),
             border-color var(--dur-fast) var(--ease-hover),
             color var(--dur-fast) var(--ease-hover);
}
.btn:active:not([disabled]){scale:.975}
.chipbtn:active{scale:.96}
.field__ctl select:active{scale:.985}
.qty button:active{scale:.88}
.card:active .card__media .bag{scale:1.015}
@media (prefers-reduced-motion:reduce){
  .btn:active,.chipbtn:active,.qty button:active,
  .field__ctl select:active,.card:active .card__media .bag{scale:1}
}

/* ===========================================================
   rev 2 — referans denetiminden sonra eklenenler
   =========================================================== */

/* ---------- Ambalaj: koyu zeminde ışıkla ayrılır ---------- */

/* ---------- 360° ürün görüntüleyici ----------
   Referansta paketin altında eliptik bir yörünge ve ‹ › kontrolü var:
   sürükleyerek döndürülüyor. Gerçek çekim 24 kareyle yapılır;
   prototipte tek ambalaj 3B eksende döner — jest ve momentum aynı. */
.spin{
  position:relative;display:grid;place-items:center;
  padding-block:var(--space-10) var(--space-24);
  perspective:1500px;touch-action:pan-y;user-select:none;
}
.spin__stage{
  width:min(340px,58vw);transform-style:preserve-3d;
  will-change:transform;cursor:grab;
}
.spin[data-dragging] .spin__stage{cursor:grabbing}
.spin__ellipse{
  position:absolute;bottom:var(--space-12);left:50%;translate:-50% 0;
  width:min(640px,86vw);aspect-ratio:5/1;
  border:1px solid var(--border);border-radius:50%;
  pointer-events:none;
}
.spin__hint{
  position:absolute;bottom:calc(var(--space-12) - 18px);left:50%;translate:-50% 0;
  width:38px;height:38px;border-radius:var(--radius-pill);
  border:1px solid var(--border-strong);background:var(--surface);
  display:grid;place-items:center;
  font-family:var(--font-mono);font-size:12px;color:var(--text-muted);
}
.spin__hint:hover{border-color:var(--text);color:var(--text)}

/* ---------- Ölçek göstergesi: geleneksel ↔ modern ---------- */
.gauge{
  display:flex;align-items:center;justify-content:center;gap:var(--space-4);
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--text-subtle);margin-top:var(--space-10);
}
.gauge__dots{display:flex;gap:var(--space-2)}
.gauge__dots i{
  width:7px;height:7px;border-radius:50%;
  border:1px solid var(--border-strong);display:block;
}
.gauge__dots i[data-on]{background:var(--accent);border-color:var(--accent)}

/* ---------- Tat notaları: referanstaki boru ayraçlı satır ---------- */
.notes-line{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--space-2) var(--space-3);
  font-family:var(--font-mono);font-size:var(--fs-sm);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
}
.notes-line span:not(:last-child)::after{
  content:"|";margin-left:var(--space-3);color:var(--accent);
}

.btn--ghost{
  border-color:var(--border-strong);color:var(--text);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.btn--ghost:hover{border-color:var(--text);background:rgba(255,255,255,.14)}

/* ===========================================================
   rev 3 — form kontrolleri, künye, kavurma grafiği, timeline
   =========================================================== */

/* ---------- Standart kontrol dili ----------
   Tek yükseklik (--ctl-h), tek kenarlık, tek yarıçap.
   Select, adet sayacı ve buton aynı satırda hizalanır. */
.btn--ctl{height:var(--ctl-h);padding-inline:26px}

.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field__label{
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--text-subtle);white-space:nowrap;
}
.field__ctl{position:relative;display:block}
.field__ctl select{
  appearance:none;-webkit-appearance:none;
  width:100%;height:var(--ctl-h);
  padding:0 42px 0 15px;
  background:transparent;color:var(--text);
  border:1px solid var(--border-strong);border-radius:var(--radius-input);
  font-family:var(--font-body);font-size:var(--fs-sm);font-weight:500;
  line-height:1;cursor:pointer;
}
.field__ctl select:hover{border-color:var(--text)}
.field__ctl select option{background:var(--navy-900);color:#F3F5F9}
.field__chev{
  position:absolute;right:14px;top:50%;translate:0 -50%;
  width:16px;height:16px;fill:none;stroke:var(--text-muted);
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none;transition:stroke var(--dur-fast) var(--ease-hover);
}
.field__ctl:hover .field__chev{stroke:var(--text)}

.qty{
  display:flex;align-items:center;width:max-content;height:var(--ctl-h);
  border:1px solid var(--border-strong);border-radius:var(--radius-input);
}
.qty button{width:42px;height:100%;display:grid;place-items:center;font-size:17px;line-height:1}
.qty button:hover{background:var(--surface-sunken)}
.qty output{
  min-width:36px;text-align:center;font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;font-size:var(--fs-data);
}

/* ---------- Sabit alt satın alma barı ----------
   Abonelik yok: tek seferlik satın alma. Kimlik solda,
   kontroller ortada, fiyat ve aksiyon sağda. */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:grid;gap:var(--space-5) var(--space-8);
  grid-template-columns:1fr;align-items:end;
  padding:var(--space-4) var(--page-pad);
  background:color-mix(in srgb,var(--surface-raised) 84%,transparent);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-top:1px solid var(--border);
}
@media (min-width:1080px){
  .buybar{grid-template-columns:minmax(0,1fr) auto auto}
}
.buybar__id{display:flex;flex-direction:column;gap:3px;min-width:0;padding-bottom:11px}
.buybar__name{
  font-family:var(--font-display);font-size:1.625rem;font-weight:600;
  line-height:1;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.buybar__meta{
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-subtle);
}
.buybar__fields{display:flex;gap:var(--space-4);flex-wrap:wrap;align-items:flex-end}
.buybar__fields .field:nth-child(1){width:118px}
.buybar__fields .field:nth-child(2){width:168px}
.buybar__buy{display:flex;align-items:flex-end;gap:var(--space-5)}
.buybar__price{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:1.25rem;font-weight:600;white-space:nowrap;padding-bottom:11px;
}
@media (max-width:1079px){
  .buybar__id{padding-bottom:0}
  .buybar__buy{justify-content:space-between}
  .buybar__buy .btn{flex:1}
}
body{padding-bottom:var(--buybar-h)}

/* ---------- Radyal künye ---------- */
.orbit{
  position:relative;display:grid;gap:var(--space-8);
  grid-template-columns:1fr;padding-block:var(--space-8);
}
.orbit__side{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-6)}
.orbit__side li{display:grid;gap:2px;position:relative}
.orbit__v{font-size:var(--fs-h3);font-weight:600;line-height:1.25}
.orbit__u{
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:var(--track-data);color:var(--text-muted);
  font-weight:400;margin-left:5px;
}
.orbit__k{
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-subtle);
}
/* Açıklama satırın altında AÇILMIYOR — çemberin içinde beliriyor.
   Böylece hover hiçbir yerde yükseklik değiştirmiyor. */
.orbit__side li{cursor:default}

/* Etiketler de kuruluşa katılıyor: kolun hemen öncesinde beliriyor
   (kol etiketten çembere doğru uzuyor, sıra bu yüzden bu).
   Kaydırma li'nin KENDİSİNE değil çocuklarına uygulanıyor —
   li'nin translate'ini JS (fitArms) çemberin yayı için kullanıyor,
   ikisi aynı özelliğe yazarsa etiketler yerinden oynuyor. */
.orbit__side li > *{
  opacity:0;
  transition:opacity 620ms var(--ease-reveal),
             translate 620ms var(--ease-reveal);
  transition-delay:calc(300ms + var(--i,0) * 90ms);
}
.orbit__side--l li > *{translate:-14px 0}
.orbit__side--r li > *{translate:14px 0}
.orbit[data-lit] .orbit__side li > *{opacity:1;translate:0 0}
/* Çıkışta ters sırada ve daha hızlı — kollarla aynı ritim */
.orbit:not([data-lit]) .orbit__side li > *{
  transition-duration:340ms;
  transition-delay:calc((4 - var(--i,0)) * 60ms);
}
/* Kurulmamışken etiketler tıklanmaz ve hover almaz: görünmeyen
   bir şeyin üzerine gelince çemberin içinde açıklama çıkıyordu. */
.orbit:not([data-lit]) .orbit__side{pointer-events:none}

.orbit__ring{position:relative;display:grid;place-items:center}
.orbit__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* Dış çember SVG'den çıkarıldı: artık HTML öğesi.
   Ölçü SVG'nin bıraktığı yerden: viewBox 200, r=99, stroke .8 →
   dış kenar 99.4/100 (genişlik %99.4), kalınlık 0.8/200 = 1.36 px
   (340 px'lik diskte). Çizilme animasyonu YOK — bu çember sabit;
   iç çember, vurgu yayı ve çentikler çizilmeye devam ediyor. */
.orbit__hoop{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:99.4%;aspect-ratio:1;border-radius:50%;
  border:1.4px solid var(--border-strong);
  pointer-events:none;
}
.orbit__circle{
  fill:none;stroke:var(--border-strong);stroke-width:.8;
  stroke-dasharray:1;stroke-dashoffset:1;
  transform:rotate(-90deg);transform-origin:50% 50%;
  transition:stroke-dashoffset 1700ms var(--ease-reveal);
}
.orbit__circle--in{stroke-width:.4;opacity:.5;transition-delay:180ms}
.orbit[data-lit] .orbit__circle{stroke-dashoffset:0}
.orbit__ticks line{
  stroke:var(--text-subtle);stroke-width:.6;opacity:0;
  transition:opacity 500ms var(--ease-reveal);
  transition-delay:calc(700ms + var(--i) * 14ms);
}
.orbit[data-lit] .orbit__ticks line{opacity:.55}
.orbit__core{
  position:relative;z-index:1;width:78%;aspect-ratio:1;
}
.orbit__disc > .orbit__svg{position:absolute;inset:0;width:100%;height:100%}
/* Yüzler ızgara hücresine değil MERKEZE hizalanıyor: hücrenin
   genişliğini en geniş yüz belirlediği için notalar 17 px sağa
   kayıyordu. */
.orbit__face{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--space-1);text-align:center;
  /* Görünmeyen yüz tıklamayı yutmasın; görünen yüz tıklanabilsin.
     Bu satır olmadan detay yüzünün pointer-events:none'ı içindeki
     "Daha fazla" düğmesine de miras kalıyordu. */
  pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-swap),
             scale var(--dur-base) var(--ease-swap);
}
/* Üç yüz: notalar (boşta), kısa detay (hover), uzun metin (açık).
   Yalnızca görünen yüz tıklanabilir. */
.orbit__face{opacity:0;scale:.94}
.orbit__ring:not([data-detail]):not([data-full]) .orbit__face--notes{opacity:1;scale:1}
.orbit__ring[data-detail]:not([data-full]) .orbit__face--detail{opacity:1;scale:1;pointer-events:auto}
/* Açılırken kısa detay sönüyor, uzun metin disk büyüdükten sonra
   giriyor — dar bir çemberde geniş metin bir an bile görünmüyor. */
.orbit__ring[data-full] .orbit__face--detail{opacity:calc(1 - var(--t) * 2);scale:1}
.orbit__ring[data-full] .orbit__face--full{
  opacity:calc((var(--t) - .4) * 2.2);scale:1;pointer-events:auto;
}
.orbit__dv{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,3vw,2.375rem);line-height:1;text-transform:uppercase;
}
.orbit__dh{
  margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--text-muted);
  max-width:24ch;text-wrap:balance;
}
/* Vurgu yayı: hangi düğümün üzerindeysek halkanın o dilimi yanar */
.orbit__arc{
  fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:.083 .917;stroke-dashoffset:0;
  transform:rotate(calc(var(--a,-15) * 1deg));transform-origin:50% 50%;
  opacity:0;
  transition:transform var(--dur-base) var(--ease-swap),
             opacity var(--dur-base) var(--ease-swap);
}
.orbit__ring[data-detail] .orbit__arc{opacity:1}
.orbit__note{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.25rem,2.4vw,1.875rem);line-height:1;
  text-transform:uppercase;
  opacity:0;translate:0 .3em;
  transition:opacity 700ms var(--ease-reveal), translate 700ms var(--ease-reveal);
  transition-delay:calc(900ms + var(--n,0) * 110ms);
}
.orbit[data-lit] .orbit__note{opacity:1;translate:0 0}
/* ---- Künye seviyeden çıkarken: daha hızlı, ters sırada ----
   Dış çember (.orbit__hoop) bu sökülmeye katılmıyor; sabit
   kalarak kompozisyonun çapasını tutuyor. */
.orbit:not([data-lit]) .orbit__circle{transition-duration:700ms;transition-delay:0ms}
.orbit:not([data-lit]) .orbit__ticks line{
  transition-duration:300ms;
  transition-delay:calc((47 - var(--i,0)) * 6ms);
}
.orbit:not([data-lit]) .orbit__note{
  transition-duration:420ms;
  transition-delay:calc((2 - var(--n,0)) * 70ms);
}
/* "Fincanda" etiketi notalarla aynı kuruluşa dahil: notalardan
   hemen önce beliriyor (üst satır önce okunur), çıkışta hepsinden
   sonra sönüyor — ters sıranın son halkası o. */
.orbit__face--notes .label{
  opacity:0;translate:0 .3em;
  transition:opacity 700ms var(--ease-reveal), translate 700ms var(--ease-reveal);
  transition-delay:820ms;
}
.orbit[data-lit] .orbit__face--notes .label{opacity:1;translate:0 0}
.orbit:not([data-lit]) .orbit__face--notes .label{
  transition-duration:420ms;transition-delay:210ms;
}
.orbit__core .label{margin-bottom:var(--space-2)}

@media (min-width:900px){
  .orbit{
    grid-template-columns:1fr min(340px,30vw) 1fr;
    align-items:center;gap:0;padding-block:var(--space-16);
  }
  .orbit__ring{grid-column:2;grid-row:1;width:100%;aspect-ratio:1;justify-self:center}
  .orbit__side{grid-row:1;gap:28px}   /* 40 → 28: dikey açıklık ~%15 daralıyor */
  .orbit__side--l{grid-column:1;text-align:right;padding-inline-end:var(--space-16)}
  .orbit__side--r{grid-column:3;text-align:left;padding-inline-start:var(--space-16)}
  /* Merkeze uzanan kol + düğüm */
  .orbit__side li::before{
    /* Kol SABİT uzunlukta. Etiketin kendisi çemberin yayına
       oturduğu için kolun uzamasına gerek yok; ucu halkanın
       3 px dışında bitiyor. */
    content:"";position:absolute;top:.7em;height:1px;width:26px;
    background:var(--border-strong);transform:scaleX(0);
    transition:transform 800ms var(--ease-reveal), background-color var(--dur-fast) var(--ease-hover);
    transition-delay:calc(500ms + var(--i,0) * 90ms), 0ms;
  }
  .orbit__side li::after{
    content:"";position:absolute;top:calc(.7em - 2.5px);
    width:6px;height:6px;border-radius:50%;background:var(--accent);
    scale:0;transition:scale 520ms cubic-bezier(.34,1.4,.64,1);
    transition-delay:calc(980ms + var(--i,0) * 90ms);
  }
  .orbit[data-lit] .orbit__side li::before{transform:scaleX(1)}
  .orbit[data-lit] .orbit__side li::after{scale:1}
  /* Çıkışta ters sıra: en dıştaki önce sönsün. Giriş yukarıdan
     aşağı kuruluyorsa çıkış aşağıdan yukarı sökülmeli — yoksa
     aynı yönde iki kez izlenen bir animasyon gibi okunuyor. */
  .orbit:not([data-lit]) .orbit__side li::before{
    transition-duration:380ms,var(--dur-fast);
    transition-delay:calc((4 - var(--i,0)) * 60ms),0ms;
  }
  .orbit:not([data-lit]) .orbit__side li::after{
    transition-duration:300ms;
    transition-delay:calc((4 - var(--i,0)) * 60ms);
  }
  .orbit__side--l li::before{left:100%;margin-left:8px;transform-origin:left center}
  .orbit__side--l li::after{left:calc(100% + 34px);translate:-50% 0}
  .orbit__side--r li::before{right:100%;margin-right:8px;transform-origin:right center}
  .orbit__side--r li::after{right:calc(100% + 34px);translate:50% 0}
  /* Üzerine gelince o kol vurgulanır */
  .orbit__side li:hover::before,
  .orbit__side li:focus-within::before{background:var(--accent)}
  .orbit__side li:hover::after,
  .orbit__side li:focus-within::after{scale:1.7}
}
@media (max-width:899px){
  .orbit__ring{
    order:-1;border:1px solid var(--border);border-radius:50%;
    aspect-ratio:1;width:min(260px,70vw);justify-self:center;margin-bottom:var(--space-6);
  }
  .orbit__svg,.orbit__hoop{display:none}
}

/* ---------- Lot künyesi şeridi ---------- */
.lotbar{
  display:grid;gap:1px;background:var(--border);
  border:1px solid var(--border);margin:var(--space-12) 0 0;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:760px){.lotbar{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.lotbar{grid-template-columns:repeat(6,minmax(0,1fr))}}
.lotbar > div{background:var(--surface);padding:var(--space-4) var(--space-4) var(--space-5)}
.lotbar dt{
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--text-subtle);margin-bottom:5px;
}
.lotbar dd{margin:0;font-size:var(--fs-sm);font-weight:600;line-height:1.35}
.lotbar dd span{
  font-family:var(--font-mono);font-weight:400;font-size:var(--fs-label);
  color:var(--text-muted);margin-left:6px;
}
.lotbar--roast{margin-top:var(--space-8)}
.lotbar--roast dd{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---------- Kavurma profili grafiği ---------- */
.chartwrap{
  margin:0;border:1px solid var(--border);background:var(--surface-raised);
  padding:var(--space-8) var(--space-5) var(--space-5);
}
.roastchart{width:100%;height:auto;display:block;overflow:visible}
.rc-grid line{stroke:var(--border);stroke-width:1}
.rc-base{stroke:var(--border-strong)}
.rc-ax{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  fill:var(--text-subtle);
}
.rc-ax--r{opacity:.72}
.rc-ev{
  stroke:var(--border-strong);stroke-width:1;stroke-dasharray:2 5;
  opacity:0;transition:opacity 600ms var(--ease-reveal);
  transition-delay:calc(1250ms + var(--i) * 110ms);
}
.reveal.is-in .rc-ev{opacity:.85}
.rc-clip{
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1900ms var(--ease-reveal) 150ms;
}
.reveal.is-in .rc-clip{transform:scaleX(1)}
.rc-bt{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.rc-ror{fill:none;stroke:var(--text-subtle);stroke-width:1.5;stroke-dasharray:5 5;stroke-linecap:round}
.rc-dot{
  fill:var(--surface-raised);stroke:var(--accent);stroke-width:2;
  scale:0;transform-box:fill-box;transform-origin:center;
  transition:scale 520ms cubic-bezier(.34,1.4,.64,1);
  transition-delay:calc(1450ms + var(--i) * 110ms);
}
.reveal.is-in .rc-dot{scale:1}
.rc-lab{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;fill:var(--text-muted);
  opacity:0;transition:opacity 600ms var(--ease-reveal);
  transition-delay:calc(1400ms + var(--i) * 110ms);
}
.reveal.is-in .rc-lab{opacity:1}
.chartwrap__legend{
  display:flex;gap:var(--space-6);flex-wrap:wrap;
  margin-top:var(--space-4);padding-top:var(--space-4);
  border-top:1px solid var(--border);
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-subtle);
}
.lg{display:inline-flex;align-items:center;gap:9px}
.lg::before{content:"";width:22px;height:2.5px;background:var(--accent);border-radius:2px}
.lg--ror::before{height:1.5px;background:none;
  background-image:linear-gradient(90deg,var(--text-subtle) 0 5px,transparent 5px 10px);
  background-size:10px 1.5px;}

.brew__ctrl{display:flex;gap:var(--space-2)}
@media (prefers-reduced-motion:reduce){
}

/* ===========================================================
   Demleme — yatay akan zaman çizgisi
   Ray sabit oynatma başlığının altından akar; kartlar rayın
   üstünde ve altında dönüşümlü durur, arkada dev hayalet saat.
   =========================================================== */
.btl{
  position:relative;overflow:hidden;
  border-top:1px solid var(--border);
  padding:var(--space-8) 0 var(--space-5);
  --pps:6;               /* saniye başına piksel */
  --head:30%;            /* oynatma başlığının yatay konumu */
}
.btl__ghost{
  position:absolute;left:50%;top:46%;translate:-50% -50%;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(7rem,17vw,13rem);line-height:.8;
  color:var(--text);opacity:.038;pointer-events:none;user-select:none;
  white-space:nowrap;letter-spacing:-.02em;
}
.btl__viewport{position:relative;height:420px}
.btl__rail{
  position:absolute;top:50%;left:var(--head);height:0;
  transform:translateX(calc(var(--t,0) * var(--pps) * -1px));
  transition:transform 980ms linear;
  will-change:transform;
}
.btl__line{
  position:absolute;top:0;left:calc(var(--pps) * -60px);
  width:calc(var(--pps) * 330px);height:1px;background:var(--border-strong);
}
.btl__line--done{
  left:0;width:calc(var(--t,0) * var(--pps) * 1px);height:2px;top:-.5px;
  background:var(--accent);transition:width 980ms linear;
  box-shadow:0 0 10px 1px color-mix(in srgb,var(--accent) 55%,transparent);
}
.btl__node{
  position:absolute;top:0;left:calc(var(--t) * var(--pps) * 1px);
  translate:-50% 0;
}
.btl__dot{
  position:absolute;top:0;left:50%;translate:-50% -50%;
  width:11px;height:11px;border-radius:50%;
  border:1.5px solid var(--border-strong);background:var(--surface);
  transition:background-color var(--dur-base) var(--ease-hover),
             border-color var(--dur-base) var(--ease-hover),
             scale var(--dur-base) var(--ease-swap);
}
.btl__time{
  position:absolute;top:var(--space-4);left:50%;translate:-50% 0;
  font-family:var(--font-mono);font-size:1.375rem;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--text-subtle);
  transition:color var(--dur-base) var(--ease-hover);
}
.btl__card{
  position:absolute;left:50%;translate:-50% 0;width:264px;
  padding:var(--space-4) var(--space-5) var(--space-5);
  border:1px solid var(--border);background:var(--surface-raised);
  display:flex;flex-direction:column;gap:6px;
  opacity:.42;transition:opacity var(--dur-base) var(--ease-hover),
                         border-color var(--dur-base) var(--ease-hover);
}
/* Kartlar rayın üstünde ve altında dönüşümlü */
.btl__node[data-side="below"] .btl__card{top:var(--space-16)}
.btl__node[data-side="above"] .btl__card{bottom:var(--space-10)}
.btl__card{z-index:2}
.btl__eyebrow{
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent);
}
.btl__title{margin:0;font-size:var(--fs-h3);font-weight:600;line-height:1.3}
.btl__desc{margin:0;font-size:var(--fs-sm);line-height:1.55;color:var(--text-muted)}

/* Aktif düğüm */
.btl__node[data-on] .btl__dot{background:var(--accent);border-color:var(--accent);scale:1.35}
.btl__node[data-on] .btl__time{color:var(--text)}
.btl__node[data-on] .btl__card{opacity:1;border-color:var(--border-strong)}
/* Geçilmiş düğümler */
.btl__node[data-past] .btl__dot{border-color:var(--accent)}
.btl__node[data-past] .btl__card{opacity:.6}

/* Oynatma işaretçisi: dikey çizgi kartların içinden geçiyordu,
   yerine rayın üstünde duran küçük bir ok. */
.btl__head{
  position:absolute;left:var(--head);top:50%;translate:-50% 0;
  margin-top:-15px;width:0;height:0;z-index:3;pointer-events:none;
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:8px solid var(--text);
}
.btl__head::after{
  content:"";position:absolute;left:-1px;top:-46px;width:2px;height:38px;
  background:linear-gradient(rgba(255,255,255,0),var(--text));opacity:.35;
}
.btl__foot{
  display:flex;justify-content:space-between;gap:var(--space-4);
  margin-top:var(--space-4);padding:var(--space-4) var(--space-6) 0;
  border-top:1px solid var(--border);
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-subtle);
}
.btl__now{color:var(--accent)}
.btl__water b{color:var(--text);font-weight:500}

@media (max-width:760px){
  .btl{--pps:4.6;--head:22%}
  .btl__viewport{height:470px}
  .btl__card{width:210px}
}
@media (prefers-reduced-motion:reduce){
  .btl__rail,.btl__line--done{transition:none}
}

/* Alt bar hero'dayken saklanır — 360° ambalaja yer açar */
.buybar{
  transform:translateY(0);
  transition:transform 520ms var(--ease-swap);
  will-change:transform;
}
.buybar[data-hidden="true"]{transform:translateY(101%)}
@media (prefers-reduced-motion:reduce){.buybar{transition:none}}

/* ===========================================================
   Üretici galerisi — yatay kaydırılan şerit
   Ürün sayfasındaki tek yatay kaydırma; sürükleme jesti
   360° görüntüleyiciye ait olduğu için burada native scroll
   ve scroll-snap kullanılıyor, JS yok.
   =========================================================== */
.gallery{padding-block:var(--space-16) var(--space-12)}
.gallery__head{
  display:flex;flex-direction:column;gap:var(--space-3);
  margin-bottom:var(--space-8);
}
.gallery__hint{color:var(--text-subtle)}
.gallery__strip{
  display:flex;gap:var(--space-4);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scroll-padding-inline:var(--page-pad);
  padding-bottom:var(--space-5);
  scrollbar-width:thin;
  scrollbar-color:var(--border-strong) transparent;
}
.gallery__strip::-webkit-scrollbar{height:6px}
.gallery__strip::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}
.gallery__strip::-webkit-scrollbar-track{background:transparent}
.gshot{
  margin:0;flex:0 0 auto;width:clamp(260px,34vw,460px);
  scroll-snap-align:start;
  display:flex;flex-direction:column;gap:var(--space-3);
}
.gshot img{
  width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  background:var(--surface-sunken);
  filter:saturate(.88) contrast(1.04);
  transition:filter var(--dur-base) var(--ease-hover),
             scale var(--dur-slow) var(--ease-reveal);
}
.gshot:hover img{filter:saturate(1) contrast(1.04);scale:1.015}
.gshot figcaption{
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-subtle);
  line-height:1.5;
}
/* İlk kare geniş: girişi o taşısın */
.gshot:first-child{width:clamp(300px,46vw,660px);margin-inline-start:var(--page-pad)}
.gshot:last-child{margin-inline-end:var(--page-pad)}
.gallery__credit{
  color:var(--text-subtle);margin-top:var(--space-5);
}
@media (max-width:640px){
  .gshot,.gshot:first-child{width:min(78vw,340px)}
}

/* ---------- Künye: halkanın kendisi büyüyor ----------
   Ayrı bir çember açılmıyor. Halkanın görseli .orbit__disc'e
   taşındı: ızgara hücresi sabit kaldığı için sayfa kaymıyor,
   disk mutlak konumlu olarak büyüyor. Aynı anda yan kolonlar
   dışa itiliyor ve kollar uzuyor — böylece diğer alanlar disk
   büyükken de görünür ve TIKLANABİLİR kalıyor. */
/* --t bölümde tanımlı: disk büyürken kardeş öğeler de sönebilsin. */
/* --t artık SAHNEDE tanımlı: gauge ve lot şeridi künye kabından
   çıkıp sahnenin en altına taşındı, ikisi de aynı değeri görsün. */
.pdp-stage{--t:0}
/* Kırpma penceresi künyenin kendisi: disk bu kutunun
   yüksekliğini aştığı için yanlarda tamamen görünüp üstte ve
   altta kesiliyor. */
.orbit{
  overflow:hidden;
  /* Detay açıkken sayfa rayının dışına taşıyor: başlık ve lot
     şeridi zaten çekildiği için bu alan boşta. */
  margin-inline:calc(var(--t) * var(--page-pad) * -1);
}
.orbit{
  --grow:calc(80px + var(--push) * 2);   /* diskin büyüme miktarı */
  --push:clamp(0px,calc((100vw - 1060px) * 0.62),300px);    /* kolonların dışa itilmesi */
}
/* Detay açılınca başlık, ölçek ve lot şeridi çekiliyor: disk
   bölümün tamamını kullanabilsin. Kapanınca geri geliyorlar. */
/* 1. sayfada künye başlığı da yok: sahnede yalnızca çıplak
   çember duruyor. Başlık, alanlarla birlikte 2. sayfada geliyor. */
.pdp-stage .pdp-section__center,
.pdp-stage .gauge,
.pdp-stage .lotbar,
.js-motion .pdp-stage .pdp-section__center.is-in,
.js-motion .pdp-stage .gauge.is-in,
.js-motion .pdp-stage .lotbar.is-in{
  opacity:0;
  transition:opacity var(--dur-slow) var(--ease-reveal);
}
.pdp-stage[data-lit] .pdp-section__center,
.pdp-stage[data-lit] .gauge,
.pdp-stage[data-lit] .lotbar,
.js-motion .pdp-stage[data-lit] .pdp-section__center.is-in,
.js-motion .pdp-stage[data-lit] .gauge.is-in,
.js-motion .pdp-stage[data-lit] .lotbar.is-in{
  opacity:calc(1 - var(--t) * 1.4);
  transition:opacity var(--dur-base) var(--ease-swap);
}
.pdp-stage[data-open] .pdp-section__center,
.pdp-stage[data-open] .gauge,
.pdp-stage[data-open] .lotbar{pointer-events:none}

.orbit__disc{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:calc(100% + var(--t) * var(--grow));
  aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  /* CSS geçişi YOK: genişliği yay her karede sürüyor.
     İkisi birlikte çalışınca hareket gecikmeli ve tökezlemeli oluyordu. */
}

/* Yan kolonlar dışa itiliyor, kollar aynı miktarda uzuyor */
/* Kolon bazlı itme yok: her etiket kendi yüksekliğinde çemberin
   yayı üzerine oturuyor (JS'te translate, her karede).
   CSS geçişi YOK — yay zaten her kareyi sürüyor; ikisi birlikte
   olunca geri hesap ıraksıyordu. */

.orbit__more{
  margin-top:var(--space-3);
  padding:7px var(--space-4);border-radius:var(--radius-pill);
  border:1px solid var(--border-strong);
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--text);
  transition:border-color var(--dur-fast) var(--ease-hover),
             color var(--dur-fast) var(--ease-hover),
             scale 110ms cubic-bezier(.32,.72,0,1);
}
.orbit__more:hover{border-color:var(--accent);color:var(--accent)}
.orbit__more:active{scale:.95}
.orbit__more[hidden]{display:none}

/* Metin kabı SABİT genişlikte: yüzde verilince disk büyürken
   paragraf her karede yeniden sarılıyordu (12 → 11 → 10 satır). */
.orbit__face--full{
  gap:var(--space-3);width:clamp(300px,42vw,720px);
  /* Kırpılan bandın içinde kalsın */
  max-height:min(440px, 52vh);
}
/* Metin diskin görünen bandına sığmazsa çemberin içinde kayıyor */
.orbit__scroll{
  min-height:0;overflow-y:auto;overscroll-behavior:contain;
  max-height:min(360px, 44vh);
  padding-inline:var(--space-2);
  scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;
  -webkit-mask-image:linear-gradient(transparent 0,#000 14px,
    #000 calc(100% - 14px),transparent 100%);
  mask-image:linear-gradient(transparent 0,#000 14px,
    #000 calc(100% - 14px),transparent 100%);
}
.orbit__scroll::-webkit-scrollbar{width:4px}
.orbit__scroll::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}
.orbit__scroll::-webkit-scrollbar-track{background:transparent}
.orbit__pt{
  margin:0;font-size:var(--fs-sm);line-height:1.66;
  white-space:pre-line;   /* sözlükteki paragraf araları korunuyor */
  text-align:left;
  color:var(--text-muted);text-wrap:pretty;
}
.orbit__close{
  margin-top:var(--space-1);
  padding:8px var(--space-5);border-radius:var(--radius-pill);
  border:1px solid var(--border-strong);color:var(--text);
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:var(--track-label);text-transform:uppercase;
  transition:border-color var(--dur-fast) var(--ease-hover),
             color var(--dur-fast) var(--ease-hover),
             scale 110ms cubic-bezier(.32,.72,0,1);
}
.orbit__close:hover{border-color:var(--accent);color:var(--accent)}
.orbit__close:active{scale:.95}

@media (max-width:899px){
  /* Tek kolonda itme yok; disk yalnızca büyüyor */
  .orbit{--grow:clamp(60px,18vw,200px);--push:0px}
  .orbit__side--l,.orbit__side--r{translate:none}
  .orbit__face--full{width:min(74vw,300px)}
  .orbit__scroll{max-height:min(240px,32vh)}
}

/* ---------- Lot künyesi şeridi ---------- */
.lotbar{
  display:grid;gap:1px;background:var(--border);
  border:1px solid var(--border);margin:var(--space-12) 0 0;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:760px){.lotbar{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.lotbar{grid-template-columns:repeat(6,minmax(0,1fr))}}
.lotbar > div{background:var(--surface);padding:var(--space-4) var(--space-4) var(--space-5)}
.lotbar dt{
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--text-subtle);margin-bottom:5px;
}
.lotbar dd{margin:0;font-size:var(--fs-sm);font-weight:600;line-height:1.35}
.lotbar dd span{
  font-family:var(--font-mono);font-weight:400;font-size:var(--fs-label);
  color:var(--text-muted);margin-left:6px;
}
.lotbar--roast{margin-top:var(--space-8)}
.lotbar--roast dd{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---------- Kavurma profili grafiği ---------- */
.chartwrap{
  margin:0;border:1px solid var(--border);background:var(--surface-raised);
  padding:var(--space-8) var(--space-5) var(--space-5);
}
.roastchart{width:100%;height:auto;display:block;overflow:visible}
.rc-grid line{stroke:var(--border);stroke-width:1}
.rc-base{stroke:var(--border-strong)}
.rc-ax{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  fill:var(--text-subtle);
}
.rc-ax--r{opacity:.72}
.rc-ev{
  stroke:var(--border-strong);stroke-width:1;stroke-dasharray:2 5;
  opacity:0;transition:opacity 600ms var(--ease-reveal);
  transition-delay:calc(1250ms + var(--i) * 110ms);
}
.reveal.is-in .rc-ev{opacity:.85}
.rc-clip{
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1900ms var(--ease-reveal) 150ms;
}
.reveal.is-in .rc-clip{transform:scaleX(1)}
.rc-bt{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.rc-ror{fill:none;stroke:var(--text-subtle);stroke-width:1.5;stroke-dasharray:5 5;stroke-linecap:round}
.rc-dot{
  fill:var(--surface-raised);stroke:var(--accent);stroke-width:2;
  scale:0;transform-box:fill-box;transform-origin:center;
  transition:scale 520ms cubic-bezier(.34,1.4,.64,1);
  transition-delay:calc(1450ms + var(--i) * 110ms);
}
.reveal.is-in .rc-dot{scale:1}
.rc-lab{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;fill:var(--text-muted);
  opacity:0;transition:opacity 600ms var(--ease-reveal);
  transition-delay:calc(1400ms + var(--i) * 110ms);
}
.reveal.is-in .rc-lab{opacity:1}
.chartwrap__legend{
  display:flex;gap:var(--space-6);flex-wrap:wrap;
  margin-top:var(--space-4);padding-top:var(--space-4);
  border-top:1px solid var(--border);
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-subtle);
}
.lg{display:inline-flex;align-items:center;gap:9px}
.lg::before{content:"";width:22px;height:2.5px;background:var(--accent);border-radius:2px}
.lg--ror::before{height:1.5px;background:none;
  background-image:linear-gradient(90deg,var(--text-subtle) 0 5px,transparent 5px 10px);
  background-size:10px 1.5px;}

.brew__ctrl{display:flex;gap:var(--space-2)}
@media (prefers-reduced-motion:reduce){
}

/* ===========================================================
   Demleme — yatay akan zaman çizgisi
   Ray sabit oynatma başlığının altından akar; kartlar rayın
   üstünde ve altında dönüşümlü durur, arkada dev hayalet saat.
   =========================================================== */
.btl{
  position:relative;overflow:hidden;
  border-top:1px solid var(--border);
  padding:var(--space-8) 0 var(--space-5);
  --pps:6;               /* saniye başına piksel */
  --head:30%;            /* oynatma başlığının yatay konumu */
}
.btl__ghost{
  position:absolute;left:50%;top:46%;translate:-50% -50%;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(7rem,17vw,13rem);line-height:.8;
  color:var(--text);opacity:.038;pointer-events:none;user-select:none;
  white-space:nowrap;letter-spacing:-.02em;
}
.btl__viewport{position:relative;height:420px}
.btl__rail{
  position:absolute;top:50%;left:var(--head);height:0;
  transform:translateX(calc(var(--t,0) * var(--pps) * -1px));
  transition:transform 980ms linear;
  will-change:transform;
}
.btl__line{
  position:absolute;top:0;left:calc(var(--pps) * -60px);
  width:calc(var(--pps) * 330px);height:1px;background:var(--border-strong);
}
.btl__line--done{
  left:0;width:calc(var(--t,0) * var(--pps) * 1px);height:2px;top:-.5px;
  background:var(--accent);transition:width 980ms linear;
  box-shadow:0 0 10px 1px color-mix(in srgb,var(--accent) 55%,transparent);
}
.btl__node{
  position:absolute;top:0;left:calc(var(--t) * var(--pps) * 1px);
  translate:-50% 0;
}
.btl__dot{
  position:absolute;top:0;left:50%;translate:-50% -50%;
  width:11px;height:11px;border-radius:50%;
  border:1.5px solid var(--border-strong);background:var(--surface);
  transition:background-color var(--dur-base) var(--ease-hover),
             border-color var(--dur-base) var(--ease-hover),
             scale var(--dur-base) var(--ease-swap);
}
.btl__time{
  position:absolute;top:var(--space-4);left:50%;translate:-50% 0;
  font-family:var(--font-mono);font-size:1.375rem;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--text-subtle);
  transition:color var(--dur-base) var(--ease-hover);
}
.btl__card{
  position:absolute;left:50%;translate:-50% 0;width:264px;
  padding:var(--space-4) var(--space-5) var(--space-5);
  border:1px solid var(--border);background:var(--surface-raised);
  display:flex;flex-direction:column;gap:6px;
  opacity:.42;transition:opacity var(--dur-base) var(--ease-hover),
                         border-color var(--dur-base) var(--ease-hover);
}
/* Kartlar rayın üstünde ve altında dönüşümlü */
.btl__node[data-side="below"] .btl__card{top:var(--space-16)}
.btl__node[data-side="above"] .btl__card{bottom:var(--space-10)}
.btl__card{z-index:2}
.btl__eyebrow{
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent);
}
.btl__title{margin:0;font-size:var(--fs-h3);font-weight:600;line-height:1.3}
.btl__desc{margin:0;font-size:var(--fs-sm);line-height:1.55;color:var(--text-muted)}

/* Aktif düğüm */
.btl__node[data-on] .btl__dot{background:var(--accent);border-color:var(--accent);scale:1.35}
.btl__node[data-on] .btl__time{color:var(--text)}
.btl__node[data-on] .btl__card{opacity:1;border-color:var(--border-strong)}
/* Geçilmiş düğümler */
.btl__node[data-past] .btl__dot{border-color:var(--accent)}
.btl__node[data-past] .btl__card{opacity:.6}

/* Oynatma işaretçisi: dikey çizgi kartların içinden geçiyordu,
   yerine rayın üstünde duran küçük bir ok. */
.btl__head{
  position:absolute;left:var(--head);top:50%;translate:-50% 0;
  margin-top:-15px;width:0;height:0;z-index:3;pointer-events:none;
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:8px solid var(--text);
}
.btl__head::after{
  content:"";position:absolute;left:-1px;top:-46px;width:2px;height:38px;
  background:linear-gradient(rgba(255,255,255,0),var(--text));opacity:.35;
}
.btl__foot{
  display:flex;justify-content:space-between;gap:var(--space-4);
  margin-top:var(--space-4);padding:var(--space-4) var(--space-6) 0;
  border-top:1px solid var(--border);
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-subtle);
}
.btl__now{color:var(--accent)}
.btl__water b{color:var(--text);font-weight:500}

@media (max-width:760px){
  .btl{--pps:4.6;--head:22%}
  .btl__viewport{height:470px}
  .btl__card{width:210px}
}
@media (prefers-reduced-motion:reduce){
  .btl__rail,.btl__line--done{transition:none}
}

/* Alt bar hero'dayken saklanır — 360° ambalaja yer açar */
.buybar{
  transform:translateY(0);
  transition:transform 520ms var(--ease-swap);
  will-change:transform;
}
.buybar[data-hidden="true"]{transform:translateY(101%)}
@media (prefers-reduced-motion:reduce){.buybar{transition:none}}

/* ===========================================================
   Üretici galerisi — yatay kaydırılan şerit
   Ürün sayfasındaki tek yatay kaydırma; sürükleme jesti
   360° görüntüleyiciye ait olduğu için burada native scroll
   ve scroll-snap kullanılıyor, JS yok.
   =========================================================== */
.gallery{padding-block:var(--space-16) var(--space-12)}
.gallery__head{
  display:flex;flex-direction:column;gap:var(--space-3);
  margin-bottom:var(--space-8);
}
.gallery__hint{color:var(--text-subtle)}
.gallery__strip{
  display:flex;gap:var(--space-4);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scroll-padding-inline:var(--page-pad);
  padding-bottom:var(--space-5);
  scrollbar-width:thin;
  scrollbar-color:var(--border-strong) transparent;
}
.gallery__strip::-webkit-scrollbar{height:6px}
.gallery__strip::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}
.gallery__strip::-webkit-scrollbar-track{background:transparent}
.gshot{
  margin:0;flex:0 0 auto;width:clamp(260px,34vw,460px);
  scroll-snap-align:start;
  display:flex;flex-direction:column;gap:var(--space-3);
}
.gshot img{
  width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  background:var(--surface-sunken);
  filter:saturate(.88) contrast(1.04);
  transition:filter var(--dur-base) var(--ease-hover),
             scale var(--dur-slow) var(--ease-reveal);
}
.gshot:hover img{filter:saturate(1) contrast(1.04);scale:1.015}
.gshot figcaption{
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-subtle);
  line-height:1.5;
}
/* İlk kare geniş: girişi o taşısın */
.gshot:first-child{width:clamp(300px,46vw,660px);margin-inline-start:var(--page-pad)}
.gshot:last-child{margin-inline-end:var(--page-pad)}
.gallery__credit{
  color:var(--text-subtle);margin-top:var(--space-5);
}
@media (max-width:640px){
  .gshot,.gshot:first-child{width:min(78vw,340px)}
}

/* ===========================================================
   KÜNYE SAHNESİ — 200vh'lik scroll bütçesi
   Sahne boyunca çember ekranda sabit duruyor. Yerinden
   kımıldamayan bir şeyin "girip çıkması" okunmadığı için künye
   sahne boyunca KURULU ve DURAĞAN kalıyor: kuruluş, sahneye
   girmeden önce ilk karede sessizce uygulanıyor.

   Sabitleme position:sticky ile değil, elle yapılıyor
   (pre → on → post). Sticky, kapsayıcı kutusunun yüksekliğiyle
   sınırlı; burada bütçeyi sahnenin kendisi belirliyor.
   =========================================================== */
.pdp-stage{height:200vh;position:relative}
/* gauge + lot şeridi 200vh'ın en altında: sabit çemberin altına
   düşsünler, içinden geçmesinler.
   flex + margin-top:auto DEĞİL — .page'in margin-inline:auto'su
   flex öğesinin genişlemesini iptal ediyor, kutu içeriğe göre
   büzülüyordu (çember 1238 yerine 819/420 px'e düşüyordu).
   Alt boşluk satın alma barını da hesaba katıyor: bar sabit ve
   sahnenin son 104 px'ini örtüyor. */
.stage-foot{
  position:absolute;left:0;right:0;bottom:0;
  padding-bottom:calc(var(--buybar-h) + var(--space-6));
}
/* Çember sabitlenince akıştan çıkıyor: yerini bu kap tutuyor,
   böylece altındaki içerik zıplamıyor. */
.orbit-hold{position:relative}
/* Sahnede çemberin dikey payı dar: üstte başlık, altta şerit
   için yer açılıyor. Bu dar pay .orbit'in kırpma bandını da
   daraltıyor (388 px), uzun metin yüzü ona göre sığdırılıyor —
   yoksa "Kapat" düğmesinin altı kesiliyor. --band'i JS ölçüyor. */
.pdp-stage .orbit{padding-block:var(--space-6)}
.pdp-stage .orbit__face--full{max-height:calc(var(--band,440px) - 24px)}
.pdp-stage .orbit__scroll{max-height:calc(var(--band,440px) - 150px)}

/* ---- Yatık çember + üzerinde 360° ambalaj ----
   Sayfanın en üstünde çember geriye yatık duruyor: bir zemin
   halkası gibi okunuyor ve ambalaj onun üstünde duruyor. Scroll
   ilerledikçe dikleşiyor, ambalaj sönüyor, halka künyenin
   çemberine dönüşüyor. */
.pdp-stage{
  --flat:1; --ring-s:1; --bag-o:0; --hero-o:1; --bag-drop:0px; --disc-o:0;
  /* Yatıkken kenarlık kalın: fiziksel bir kenar, diyagram
     çizgisinden daha çok yer kaplar. Dikleşirken 1.4'e iner.
     2.2 fazla ağır kaldı, 1.4 diyagram gibiydi — arası: 1.8. */
  --hoop-w:calc(1.4px + .4px * var(--disc-o));
}
/* Yassılaşma 3B döndürmeyle DEĞİL, çemberin yüksekliğiyle
   yapılıyor: rotateX kenarlığı da eziyor, 1.4 px'lik çizgi üstte
   ve altta piksel altına düşüp kesik kesik görünüyordu. Yükseklik
   değişince kenarlık kalınlığı her yerde aynı kalıyor. */
/* Yatıkken çember %50 daha büyük; dikleşirken kendi ölçüsüne
   dönüyor. Ölçek çemberin KUTUSUNA veriliyor, transform'a değil —
   transform kenarlığı yeniden ezerdi. */
.pdp-stage .orbit__hoop{
  width:calc(99.4% * var(--ring-s));
  height:calc(99.4% * var(--flat) * var(--ring-s));
  /* Yatıkken diskin bir YÜZEYİ var: ışık uzak kenardan düşüyor,
     öne doğru sönüyor. Çember dikleşirken bu dolgu sıfıra gidiyor
     ve geriye künyenin teknik halkası kalıyor — çember malzeme
     değiştiriyor, fiziksel tabladan diyagrama. Dolgu kenarlığın
     opaklığına dokunmuyor: alfa --disc-o ile ölçekleniyor. */
  background:radial-gradient(118% 165% at 50% -12%,
    rgba(247,243,236,calc(.085 * var(--disc-o))) 0%,
    rgba(247,243,236,calc(.038 * var(--disc-o))) 46%,
    rgba(247,243,236,0) 76%);
  border-width:var(--hoop-w);
}

/* Temas gölgesi: ambalajın tabanının altında, elipsin DÜZLEMİNDE
   yatan koyu leke. Nesneyi zemine bağlayan tek en güçlü ipucu bu;
   drop-shadow silueti takip ettiği için nesneyi havada bırakıyordu.
   Elipsle birlikte yassılaşıyor, çember dikleşince kayboluyor. */
.stage-shadow{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  margin-top:var(--bag-drop);
  width:calc(215px * var(--ring-s));
  height:calc(215px * var(--flat) * var(--ring-s));
  background:radial-gradient(closest-side,
    rgba(0,0,0,.78) 0%, rgba(0,0,0,.44) 52%, rgba(0,0,0,0) 100%);
  filter:blur(7px);
  opacity:var(--disc-o);
  z-index:1;pointer-events:none;
}

/* Tablanın ÖN kenarı: aynı elipsin alt yarısı, ambalajın üstünde.
   Gerçek bir tablanın ön kenarı nesnenin tabanının önünden geçer;
   tamamı arkada kalınca paketi hiçbir şey tutmuyordu. */
.stage-rim{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:calc(99.4% * var(--ring-s));
  height:calc(99.4% * var(--flat) * var(--ring-s));
  border:var(--hoop-w) solid var(--border-strong);
  border-radius:50%;
  clip-path:inset(50% 0 0 0);      /* yalnızca ön (alt) yay */
  opacity:var(--disc-o);
  z-index:3;pointer-events:none;
}
/* Ambalaj çemberin kırpma penceresine takılmasın: kırpma yalnızca
   detay açıkken (büyüyen disk için) gerekiyor. */
.pdp-stage:not([data-lit]) .orbit{overflow:visible}
/* Ambalaj halkanın MERKEZİNE basıyor: alt kenarı çemberin
   düzleminde duruyor, yatıkken tam üstünde görünüyor. */
.stage-bag{
  position:absolute;left:50%;bottom:calc(50% - var(--bag-drop,0px));
  translate:-50% 0;
  z-index:2;opacity:var(--bag-o);
  touch-action:pan-y;user-select:none;cursor:grab;
}
.stage-bag[data-dragging]{cursor:grabbing}
.stage-bag img{-webkit-user-drag:none;user-select:none}
/* Sürükleme sırasında seçim jesti komşu metinlere taşıyordu:
   jest boyunca tüm sayfada seçim kapalı. */
:root:has(.stage-bag[data-dragging]) body{user-select:none}
.stage-bag__in{width:min(300px,26vw)}

/* Sürükleme ipucu: elipsin hemen altında. Konumu elipsin o anki
   yarıçapından hesaplanıyor (169 px = diskin yarısı), böylece
   çember dikleşip küçülürken ipucu da onunla birlikte geliyor.
   İlk sürüklemede söner — işini yaptıktan sonra durmaz. */
.stage-hint{
  position:absolute;left:50%;
  top:calc(50% + (169px * var(--flat) * var(--ring-s)) + 20px);
  translate:-50% 0;margin:0;white-space:nowrap;pointer-events:none;
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:var(--track-label);color:var(--text-subtle);
  display:flex;align-items:center;gap:var(--space-3);
  opacity:var(--bag-o);
}
/* Oklar sırayla dışa doğru itiliyor: yön iki tarafta da
   okunsun diye tek keyframe --dir ile çevriliyor. */
.stage-hint span{
  color:var(--accent);--dir:-1;
  animation:hint-nudge 2.4s var(--ease-hover) infinite;
}
.stage-hint span:last-child{--dir:1;animation-delay:1.2s}
@keyframes hint-nudge{
  0%,58%,100%{translate:0;opacity:.55}
  22%{translate:calc(var(--dir) * 4px);opacity:1}
}
.pdp-stage[data-hint-off] .stage-hint{
  opacity:0;transition:opacity 400ms var(--ease-swap);
}
@media (prefers-reduced-motion:reduce){
  .stage-hint span{animation:none;opacity:.8}
}
.pdp-stage[data-lit] .stage-bag{pointer-events:none}
.stage-bag .bagspin{width:100%}
.stage-bag .bagspin__img{
  filter:drop-shadow(0 30px 34px rgba(0,0,0,calc(.55 * var(--bag-o))));
}

/* Başlık şeridi çemberden ÖNCE çekiliyor: çember yükselirken
   metnin içinden geçmesin. Sönme scroll'a bağlı, sınıf geçişine
   değil — geçiş süresi scroll hızından bağımsız olduğu için
   hızlı kaydırmada metin çemberin üstünde kalıyordu. */
.pdp-stage .pdp2{
  opacity:var(--hero-o);
  translate:0 calc((1 - var(--hero-o)) * -48px);
  transition:none;   /* değer her karede geliyor, geçiş geciktirir */
}

/* ---- Sayfa 1 ↔ sayfa 2: hero ile künye başlığı yer değiştirir ----
   İkisi de aynı çapaya bağlı ve ikisi de AKIŞIN DIŞINDA: akışta
   kalsalardı sabitlenmeye girip çıkarken .orbit-hold'un yeri
   kayar, çember zıplardı. Hero yukarı çıkarken başlık aşağıdan
   gelir — çıkış ve giriş aynı eksende, ters yönde. */
.pdp-stage .pdp2,
.pdp-stage .pdp-section__center{
  position:absolute;left:0;right:0;top:var(--head-post,0px);
  z-index:2;margin:0;
  transition:opacity var(--dur-slow) var(--ease-reveal),
             translate var(--dur-slow) var(--ease-reveal);
}
.pdp-stage[data-pin="on"] .pdp2,
.pdp-stage[data-pin="on"] .pdp-section__center{position:fixed;top:var(--head-top)}
.pdp-stage .pdp2{padding-block:0}
.pdp-stage[data-lit] .pdp2{pointer-events:none}
.pdp-stage .pdp-section__center{translate:0 48px}
.pdp-stage[data-lit] .pdp-section__center{translate:0 0}

.pdp-stage[data-pin="on"] .orbit{
  position:fixed;z-index:1;
  top:var(--pin-top);
  /* Detay açıldığındaki tam taşma sabitken de aynı çalışsın:
     margin-inline yerine left/width'e katılıyor — mutlak
     konumda negatif margin kutuyu simetrik büyütmüyor. */
  left:calc(var(--pin-left) - var(--t) * var(--page-pad));
  width:calc(var(--pin-w) + var(--t) * var(--page-pad) * 2);
  margin-inline:0;
}
/* Tam taşma burada da SİMETRİK olmalı: yalnızca margin-inline
   bırakılınca kutu soldan çekiliyor ama sağa uzamıyordu, disk
   100 px sola kayıyordu. */
.pdp-stage[data-pin="post"] .orbit{
  position:absolute;z-index:1;top:var(--post-top);
  left:calc(var(--t) * var(--page-pad) * -1);
  width:calc(100% + var(--t) * var(--page-pad) * 2);
  margin-inline:0;
}
/* İlk karede geçişler kapalı: kuruluş animasyon olarak değil,
   başlangıç durumu olarak uygulanıyor. */
.orbit[data-static],
.orbit[data-static] *,
.orbit[data-static] *::before,
.orbit[data-static] *::after{transition:none !important}