/* Oda sahnesi (core/oda-sahne.js, docs/oda-sahnesi.md): story.css'in üstüne. Yakın plan paneli (core/oda-panel.js):
   başlık eski vitrinin yazı stilinde, ürün tonunda; ürün seçici, fiyat ve durum satırı, Satın al / Sipariş ver, Tüm
   ürünler; kenara gelince bakış ipucu; telefonda kartlar arası döngü düğmesi. */

/* Genel planda sahne kahramandır: odada başlığa yer kalacak boş duvar yok (raflar, çerçeveler). Başlık görünmez
   ama sayfada kalır (ekran okuyucu, arama motoru); sol üstte yalnız kısa bir cümle hapı. İşaretçilerin yazısı
   yalnız üzerine gelince açılır (11 bölgenin hepsi yazılı olunca oda kalabalıklaşıyordu). */
.oda .story-copy { top: 16px; width: auto; max-width: min(520px, calc(100% - 40px)); }
.oda .story-copy::before { display: none; }
.oda .story-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oda .story-lede {
  display: inline-block;
  margin: 0;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(250, 250, 248, 0.88);
  font-size: 14px;
  color: var(--ink-2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(30, 35, 40, 0.08);
}
.oda .story-actions { display: none; }
.oda .pin:not(.on) .pin-label { opacity: 0; transform: translateX(-4px); pointer-events: none; }
.oda .pin.left:not(.on) .pin-label { transform: translateX(4px); }
.oda .pin-label i { display: none; } /* işaretçide yalnız ürünün kısa adı */

/* ---- Üst çubuk ve alttaki şablon şeridi: loş odanın içinde koyu (beyaz çubuk sahneyi ikiye bölüyordu). Sol üstte
   şeffaf zeminli beyaz Oktos logosu (core/logo-beyaz.svg). Renkler yakın plan panelininkiyle aynı aile. */
.topbar { background: #111214; border-bottom-color: rgb(243 238 229 / 0.1); }
.topbar .brand { color: #f3eee5; }
.topbar .sitenav a { color: rgb(243 238 229 / 0.7); }
.topbar .sitenav a:hover { background: rgb(243 238 229 / 0.08); color: #f3eee5; }
.topbar .sitenav a[aria-current] { color: #f3eee5; }
.topbar .lang { border-color: rgb(243 238 229 / 0.22); }
.topbar .lang button { color: rgb(243 238 229 / 0.7); }
.topbar .lang button.on { background: #f3eee5; color: #111214; }
.oda .story-strip { background: rgb(17 18 20 / 0.88); box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 30px rgb(0 0 0 / 0.35); }
.oda .chip-name { color: #f3eee5; }
.oda .chip-act { color: #f2b48a; }
.oda .chip.soon .chip-act { color: rgb(243 238 229 / 0.62); }
.oda .chip:hover, .oda .chip.on { background: rgb(243 238 229 / 0.1); border-color: rgb(243 238 229 / 0.16); }
.oda .chip.focused { background: #f3eee5; }
.oda .chip.focused .chip-name { color: #111214; }
.oda .chip.focused .chip-act { color: var(--accent-ink); }

/* ---- Yakın plan paneli ----
   Loş odanın içinde koyu: yatay ekranda sol kenarda, kart zemini yok; okunurluğu soldan gelen koyu bir gölge verir
   (.oda-scrim), sahne arkada görünmeye devam eder. Başlık ürün tonunda (--c, core/oda-panel.js URUN_TONU; koyu zemin
   için). Panelin üstü sabittir, aşağı doğru büyür. Telefonda ve dikey ekranda kart alttan, koyu bir yaprak olarak açılır. */
.oda {
  --sc-ink: #f3eee5;                      /* koyu zeminde yazı */
  --sc-ink-2: rgb(243 238 229 / 0.74);
  --sc-line: rgb(243 238 229 / 0.24);
}
.oda-scrim {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(60%, 820px);
  background: linear-gradient(90deg, rgb(11 12 14 / 0.84) 0%, rgb(11 12 14 / 0.7) 34%, rgb(11 12 14 / 0.3) 64%, rgb(11 12 14 / 0) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms cubic-bezier(0.23, 1, 0.32, 1);
}
.oda.is-focused .oda-scrim { opacity: 1; }
.oda .story-card {
  --c: var(--ink);
  left: clamp(24px, 4.5vw, 72px);
  top: max(72px, calc(50% - 210px));
  bottom: auto;
  width: min(440px, 36vw);
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.oda .sc-title {
  margin-bottom: 12px;
  font-family: 'Big Shoulders Display', var(--sans);
  font-weight: 700;
  font-size: clamp(46px, 5.2vw, 78px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--c);
  font-kerning: none;
}
.oda .sc-desc { max-width: 30ch; margin-bottom: 18px; font-size: 19px; line-height: 1.4; color: var(--sc-ink); }
.oda .sc-back { border-color: var(--sc-line); background: transparent; color: var(--sc-ink); }
@media (hover: hover) and (pointer: fine) { .oda .sc-back:hover { background: rgb(243 238 229 / 0.1); } }
.oda .sc-hint { color: var(--sc-ink-2); }
.oda .sc-soon { display: none; } /* adressiz ürün düğmesiz kalır; "Tüm ürünler" yol verir */
/* Ürün satırı: varsa ürün görseli (küçük), mağaza fiyatı ve durum */
.sc-urun { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.sc-urun[hidden] { display: none; }
.sc-gorsel { flex: none; width: auto; height: 48px; max-width: 48px; object-fit: contain; border-radius: 4px; }
.sc-gorsel[hidden] { display: none; }
.sc-urun p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; margin: 0; }
.sc-fiyat { font: 600 18px/1.2 var(--sans); color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.sc-fiyat[hidden] { display: none; }
.sc-durum { font-size: 13px; line-height: 1.3; color: var(--sc-ink-2); }
/* Tüm ürünler: 2B ürün listesine sade bağlantı. Ürün sayfası (2026-11-02): aynı dilde, ürün düğmesinin yanında ikincil */
.sc-tum, .sc-sayfa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sc-ink);
  text-decoration: none;
}
.sc-sayfa { margin: 0 4px; }
.sc-sayfa[hidden] { display: none; }
.sc-tum svg, .sc-sayfa svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) and (pointer: fine) {
  .sc-tum:hover span, .sc-sayfa:hover span { text-decoration: underline 1px; text-underline-offset: 0.2em; }
  .sc-tum:hover svg, .sc-sayfa:hover svg { transform: translateX(3px); }
}
.sc-tum:focus-visible, .sc-sayfa:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; border-radius: 4px; }
/* Yakın planda işaretçiler susar (panel zaten bölgeyi söyler, noktalar ürünün üstüne biner); yalnız üzerine gelinen
   başka bir bölgenin notu görünür */
.oda.is-focused .pin:not(.on),
.oda.is-focused .pin.is-cur { opacity: 0; pointer-events: none; }

/* Ürün seçici: ‹ ad n/N ›; tek ürünlü yuvada oklar yok, yalnız ad */
.sc-tpl { display: flex; align-items: center; gap: 4px; margin: 0 0 12px; }
.sc-tpl[hidden], .sc-step[hidden] { display: none; }
.sc-tpl.tek .sc-tpl-name { padding: 0; }
/* Ürün adları uzun olabilir ("Grimdark Evrenleri · Ultra Ön-Cepheciler"): kesilmez, dar kartta satıra kırılır */
.sc-tpl-name {
  min-width: 0;
  margin: 0;
  padding: 0 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--sc-ink);
  text-wrap: balance;
}
.sc-tpl-name small { margin-left: 4px; font: 500 13px var(--mono); color: var(--sc-ink-2); white-space: nowrap; }
.sc-step {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--sc-line);
  border-radius: 999px;
  background: rgb(243 238 229 / 0.06);
  color: var(--sc-ink);
  transition: background-color 150ms ease, transform 120ms ease-out;
}
.sc-step:active { transform: scale(0.94); }
.sc-step svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .sc-step:hover { background: rgb(243 238 229 / 0.16); } }

/* (Toz yazısı ve aracın harf hareketleri araç duraklarıyla kalktı, 2026-11-01; git geçmişinde.) */

/* Kenardan bakma ipucu: fare kenar şeridindeyken o yanda hafif gölge ve ok (dönülebildiği sürece) */
.oda-cue {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 12%;
  display: grid;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}
.oda-cue.l { left: 0; justify-items: start; background: linear-gradient(90deg, rgba(25, 27, 30, 0.16), transparent); }
.oda-cue.r { right: 0; justify-items: end; background: linear-gradient(270deg, rgba(25, 27, 30, 0.16), transparent); }
.story[data-look="left"] .oda-cue.l,
.story[data-look="right"] .oda-cue.r { opacity: 1; }
.oda-cue svg {
  width: 30px;
  height: 30px;
  margin: 0 18px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* Kart altta: telefon, dar pencere, dikey ekran. Kararı motor verir (core/story.js resize(): tuval oranı ve işaretçi
   türü, data-panel="side|bottom"): kadraj da aynı karara göre kayar. Kart kendi zeminini alır, perde yok. */
.oda[data-panel="bottom"] .oda-scrim { display: none; }
.oda[data-panel="bottom"] .story-card {
  top: auto;
  bottom: 96px; /* şeridin üstünde; telefonda döngü düğmesinin üstünde (aşağıda) */
  left: 12px;
  right: 12px;
  width: auto;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgb(17 18 21 / 0.9);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 18px 48px rgb(0 0 0 / 0.35);
}
.oda[data-panel="bottom"] .sc-title { margin-bottom: 8px; font-size: clamp(34px, 9vw, 46px); }
.oda[data-panel="bottom"] .sc-desc { margin-bottom: 12px; font-size: 15px; }
.oda[data-panel="bottom"] .sc-tpl { margin-bottom: 8px; }
.oda[data-panel="bottom"] .sc-urun { margin-bottom: 12px; }
.oda[data-panel="bottom"] .sc-gorsel { height: 40px; max-width: 40px; }
.oda[data-panel="bottom"] .sc-tum { margin-top: 2px; min-height: 40px; }

@media (pointer: coarse), (max-width: 720px) {
  .sc-step { width: 44px; height: 44px; }
}

/* ---- v8 (2026-11-04): tam ekran oda. Sahne sabit, üst çubuk yerinde, kaydırma çubuğu yok (kaydırmalı tur kalktı).
   Alttaki işaretçi şeridi ("Atölyeden çıkanlar" sekmeleri) görünmez: yalnız klavye ve ekran okuyucu için (odaklanınca
   görünür) ---- */
html.oda-tam { scrollbar-width: none; }
html.oda-tam::-webkit-scrollbar { display: none; }
.oda-tam .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; }
.oda .story-strip:not(:focus-within) {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Ürün işaretçileri: ürün tonunda mat, düz disk, ince açık çerçeve; tek, soluk ve yavaş bir halka yayılır (ışıltı
   yok). Renk core/oda-panel.js URUN_TONU ile aynı (motor işaretçiye data-tool="urun" yazar). Hareket azaltmada halka yok. */
.oda .pin { --c: #e8c48c; }
.story.oda .pin-dot {
  left: -6px; top: -6px; width: 12px; height: 12px;
  background: color-mix(in srgb, var(--c) 72%, #3a3a3a);
  box-shadow: 0 0 0 2px rgb(244 241 235 / 0.88), 0 1px 3px rgb(0 0 0 / 0.35);
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s ease;
}
.story.oda .pin-dot::before {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 1.5px solid rgb(244 241 235 / 0.7);
  opacity: 0;
  animation: oda-halka 3.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;
  animation-delay: calc(var(--i, 0) * -0.41s);
}
.story.oda .pin-dot::after { display: none; } /* story.css'in açılıştaki turuncu nabzı odada yok */
@keyframes oda-halka { 0% { transform: scale(1); opacity: 0.5; } 70%, 100% { transform: scale(2.3); opacity: 0; } }
.story.oda .pin.on .pin-dot { transform: scale(1.25); box-shadow: 0 0 0 2px #f4f1eb, 0 1px 4px rgb(0 0 0 / 0.4); }
.oda .pin-label { border-left: 3px solid var(--c); }
@media (prefers-reduced-motion: reduce) {
  .story.oda .pin-dot::before { animation: none; }
}

/* Açılış perdesi koyu (sahne kurulurken beyaz parlamasın); ortada yazı ve ilerleme çubuğu (oda/index.html --ilerleme) */
body { background: #0b0c0e; }
.oda .story-veil { background: #0b0c0e; }
.oda[aria-busy="true"] .story-veil::after { top: calc(50% - 20px); color: rgb(243 238 229 / 0.72); letter-spacing: 0.02em; }
.oda-yukle { position: absolute; left: 50%; top: calc(50% + 8px); width: min(260px, 60vw); height: 3px; translate: -50% 0; border-radius: 3px; background: rgb(243 238 229 / 0.14); overflow: hidden; }
.oda-yukle i { position: absolute; inset: 0; background: #f2b48a; transform-origin: left center; transform: scaleX(var(--ilerleme, 0.06)); transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
.oda:not([aria-busy="true"]) .oda-yukle { display: none; }
@media (prefers-reduced-motion: reduce) { .oda-yukle i { transition: none; } }
.oda.is-focused .story-canvas { touch-action: pan-y; } /* yakın planda yatay sürükleme ürünü çevirir */
.oda.oda-donuyor .story-canvas { cursor: grabbing; }
/* ---- Dokunma hedefleri: üst çubukta logo ve dil düğmeleri en az 44 px ---- */
html.oda-tam .topbar .brand { min-height: 44px; min-width: 44px; }
html.oda-tam .lang button { min-width: 44px; }

/* ---- Yatay telefon (kısa yatay ekran): kart yandan açılır (story.js resize: en/boy ≥ 1,4 ve boy ≤ 560 px), üst çubuk
   incelir, kart sıkışır (ipucu ve toz yazısı yok) ---- */
@media (orientation: landscape) and (max-height: 560px) {
  html.oda-tam .topbar { height: 44px; }
  .story.oda { top: 44px; }
  .oda-scrim { width: min(66%, 640px); }
  .oda .story-card { top: 12px; left: max(16px, env(safe-area-inset-left)); width: min(340px, 46vw); }
    .oda .sc-title { margin-bottom: 6px; font-size: clamp(28px, 8.5vh, 40px); }
  .oda .sc-desc { margin-bottom: 8px; font-size: 14px; }
  .oda .sc-tpl, .oda .sc-urun { margin-bottom: 8px; }
  .oda .sc-hint { display: none; }
}

/* ---- Biggie'li sunum (core/oda-sunum.js, 2026-11-03): açılış yazıları, "kobe" balonu ----
   Yazılar perdenin de üstünde (?giris=yukleme: oda yüklenirken başlar). Hareket WAAPI ile yalnız opacity/transform;
   başlangıç hâli görünmez (animasyon fill: both) */
.oda-acilis {
  position: absolute; z-index: 4; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); translate: -50% 0;
  width: min(920px, calc(100% - 32px)); text-align: center; pointer-events: none; isolation: isolate;
}
.oda-acilis[hidden] { display: none; }
.oda-acilis::before {
  content: ''; position: absolute; inset: -64px -120px; z-index: -1;
  background: radial-gradient(closest-side, rgb(11 12 14 / 0.46) 55%, rgb(11 12 14 / 0));
}
.oa-ad { display: grid; justify-items: center; gap: 8px; margin: 0; }
.oa-ad > span, .oa-cumle { opacity: 0; will-change: opacity, transform; }
.oa-isim {
  font-family: 'Big Shoulders Display', var(--sans); font-weight: 700;
  font-size: clamp(44px, 7vw, 92px); line-height: 0.92; letter-spacing: 0.01em;
  color: #f6f2ea; text-shadow: 0 2px 18px rgb(0 0 0 / 0.45);
}
.oa-unvan {
  font: 500 clamp(14px, 1.6vw, 18px)/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: rgb(246 242 234 / 0.86); text-shadow: 0 1px 10px rgb(0 0 0 / 0.5);
}
.oa-cumle {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 30ch;
  font: 500 clamp(19px, 2.3vw, 30px)/1.3 var(--sans); color: #f6f2ea; text-wrap: balance;
  text-shadow: 0 2px 14px rgb(0 0 0 / 0.5);
}
.oda-balon {
  position: absolute; z-index: 4; left: 0; top: 0; padding: 8px 14px; border-radius: 14px;
  background: #faf8f4; color: var(--ink, #15171a); font: 700 17px/1 var(--sans); letter-spacing: 0.02em;
  box-shadow: 0 6px 18px rgb(20 22 26 / 0.22); pointer-events: none; white-space: nowrap;
  transform: translate(-50%, -100%);
}
.oda-balon::after {
  content: ''; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; translate: -50% 0; rotate: 45deg;
  background: inherit; border-radius: 2px;
}
.oda-balon[hidden] { display: none; }
/* v8b: telefonda genel planda yana kaydırma ipucu (core/oda-sunum.js); kaydırınca ya da durakta söner */
.oda-kaydir {
  position: absolute; z-index: 2; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); translate: -50% 0; margin: 0;
  padding: 8px 14px; border-radius: 999px; background: rgb(17 18 20 / 0.72); color: #f3eee5; font: 500 14px/1.2 var(--sans);
  white-space: nowrap; pointer-events: none; transition: opacity 400ms ease;
}
.oda-kaydir.gizli, .oda.is-focused .oda-kaydir, .oda.sunum-acilis .oda-kaydir { opacity: 0; }
/* Açılış sürerken işaretçiler bekler */
.oda.sunum-acilis .story-pins { opacity: 0 !important; pointer-events: none !important; }
/* v8: kitaplıktaki büstlerin noktaları (core/oda-sunum.js noktaKaresi): işaretçilerden küçük, aynı ton; tıklanınca Biggie
   büstü eline alır. Dokunma hedefi 44 px (görünen disk 10 px) */
.oda-bust-noktalar { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.oda-bust-noktalar[hidden] { display: none; }
.oda-bust-nokta {
  position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; padding: 0; border: 0; background: none;
  pointer-events: auto; cursor: pointer;
}
.oda-bust-nokta[hidden] { display: none; }
.oda-bust-nokta::before {
  content: ''; position: absolute; left: 17px; top: 17px; width: 10px; height: 10px; border-radius: 50%;
  background: color-mix(in srgb, #e8c48c 72%, #3a3a3a);
  box-shadow: 0 0 0 2px rgb(244 241 235 / 0.88), 0 1px 3px rgb(0 0 0 / 0.35);
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) { .oda-bust-nokta:hover::before { transform: scale(1.3); } }
.oda-bust-nokta:focus-visible { outline: 2px solid #f4f1eb; outline-offset: -8px; border-radius: 50%; }
/* Elde büst: kartta fotoğraf, ad, cümle, ölçü (core/cati-panel.js oda kipi) */
.oda .cati-bust img { display: block; width: 100%; max-height: 220px; object-fit: contain; border-radius: 6px; background: rgb(255 255 255 / 0.04); margin-bottom: 10px; }
.oda[data-panel="bottom"] .cati-bust img { max-height: 84px; width: auto; }
.oda[data-panel="bottom"] .story-card:has(.cati-ek-bust) .sc-desc { display: none; } /* telefonda büst elde: kart kısa, büst görünür */
.oda[data-panel="bottom"] .cati-bust p:not(.cati-olcu) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.oda .cati-bust h3 { margin: 0 0 6px; font: 600 18px/1.25 var(--sans); }
.oda .cati-bust p { margin: 0 0 6px; font-size: 14px; line-height: 1.45; }
.oda .cati-bust .cati-olcu { opacity: 0.75; font-size: 13px; }
.oda .cati-foto { margin: 0; }
.oda .cati-foto figcaption { font-size: 12px; line-height: 1.35; }
.oda .cati-foto figcaption span { display: none; }
@media (pointer: coarse), (max-width: 720px) {
  .oda-acilis { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .oa-isim { font-size: clamp(42px, 12vw, 56px); }
  .oa-unvan { font-size: 13px; letter-spacing: 0.12em; }
  .oa-cumle { font-size: 19px; max-width: 22ch; }
}

/* ---- Kutu oyunu paneli (2026-11-04 v7, core/oda-kutu-panel.js) ----
   Yakın plan kartının dilinde: yatay ekranda sol kenarda, zeminsiz, okunurluğu soldaki koyu perde verir; telefonda ve
   dikey ekranda alttan koyu yaprak. Panel açıkken rafın kartı gizlenir. Oklar kutunun iki yanında (yer her karede
   oda-sunum.js'ten), ipucu imlecin yanında. */
.story.oda.kutu-acik .story-card { visibility: hidden !important; pointer-events: none !important; }
.oda.kutu-acik .oda-scrim { opacity: 1; }
.oda-kutu {
  position: absolute;
  z-index: 12;
  left: clamp(24px, 4.5vw, 72px);
  top: max(72px, calc(50% - 210px));
  width: min(420px, 34vw);
  color: var(--sc-ink);
}
.oda-kutu[hidden] { display: none; }
.ok-ust { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; min-height: 22px; }
.ok-taslak {
  padding: 2px 8px;
  border: 1px solid rgb(242 180 138 / 0.6);
  border-radius: 999px;
  font: 600 12px/1.4 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f2b48a;
}
.ok-taslak[hidden] { display: none; }
.ok-sayac { font: 500 13px var(--mono); color: var(--sc-ink-2); font-variant-numeric: tabular-nums; }
.ok-ad {
  margin: 0 0 6px;
  font-family: 'Big Shoulders Display', var(--sans);
  font-weight: 700;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: #e8c48c;
  font-kerning: none;
}
.ok-baslik { margin: 0 0 8px; font: 600 16px/1.3 var(--sans); color: var(--sc-ink); }
.ok-metin { max-width: 34ch; margin: 0 0 14px; font-size: 17px; line-height: 1.45; color: var(--sc-ink); }
.ok-gorsel { margin: 0 0 14px; }
.ok-gorsel[hidden] { display: none; }
.ok-gorsel img { display: block; width: 100%; max-height: 180px; object-fit: cover; border-radius: 6px; }
.ok-gorsel img[hidden] { display: none; }
.ok-gorsel figcaption {
  display: grid;
  place-items: center;
  height: 120px;
  border: 1px dashed var(--sc-line);
  border-radius: 6px;
  font-size: 13px;
  color: var(--sc-ink-2);
}
.ok-gorsel figcaption[hidden] { display: none; }
.ok-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ok-geri {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--sc-line);
  border-radius: 999px;
  background: transparent;
  font: 600 14px var(--sans);
  color: var(--sc-ink);
  transition: background-color 150ms ease, transform 120ms ease-out;
}
.ok-geri:active { transform: scale(0.97); }
.ok-geri svg, .oda-kutu-ok svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ok-ipucu { font-size: 13px; color: var(--sc-ink-2); }
.oda-kutu-ok {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--sc-line);
  border-radius: 999px;
  background: rgb(17 18 21 / 0.72);
  color: var(--sc-ink);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.3);
  transition: background-color 150ms ease, opacity 150ms ease;
}
.oda-kutu-ok[hidden] { display: none; }
.oda-kutu-ok svg { width: 22px; height: 22px; }
.oda-kutu-ok:disabled { opacity: 0.45; }
.oda-kutu-ok:active:not(:disabled) { background: rgb(243 238 229 / 0.18); } /* ölçek yok: yer transform'la verildiği için ölçek düğmeyi kaydırırdı */
.ok-geri:focus-visible, .oda-kutu-ok:focus-visible { outline: 2px solid #e8c48c; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .ok-geri:hover { background: rgb(243 238 229 / 0.1); }
  .oda-kutu-ok:hover:not(:disabled) { background: rgb(17 18 21 / 0.9); }
}
.oda-kutu-ipucu {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 13;
  display: grid;
  gap: 2px;
  max-width: 260px;
  padding: 8px 12px;
  border-left: 3px solid #e8c48c;
  border-radius: 4px;
  background: rgb(17 18 21 / 0.9);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.35);
  pointer-events: none;
  color: var(--sc-ink);
}
.oda-kutu-ipucu[hidden] { display: none; }
.oda-kutu-ipucu b { font: 600 15px/1.25 var(--sans); }
.oda-kutu-ipucu span { font-size: 13px; line-height: 1.35; color: var(--sc-ink-2); }
.oda-kutu-ipucu small { font-size: 12px; color: #f2b48a; }
.oda-kutu-ipucu small[hidden] { display: none; }
/* Telefon ve dikey ekran: alttan yaprak (yakın plan kartı gibi), oklar kutunun iki yanında kalır */
.oda[data-panel="bottom"] .oda-kutu {
  top: auto;
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: 12px;
  right: 12px;
  width: auto;
  max-height: 46svh;
  overflow-y: auto;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgb(17 18 21 / 0.92);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 18px 48px rgb(0 0 0 / 0.35);
}
.oda[data-panel="bottom"].kutu-acik .oda-scrim { opacity: 0; }
.oda[data-panel="bottom"] .ok-ad { font-size: clamp(30px, 8.5vw, 42px); }
.oda[data-panel="bottom"] .ok-metin { margin-bottom: 10px; font-size: 15px; }
.oda[data-panel="bottom"] .ok-gorsel figcaption { height: 72px; }
.oda[data-panel="bottom"] .ok-ipucu { display: none; }
@media (prefers-reduced-motion: reduce) { .ok-geri, .oda-kutu-ok { transition: none; } }