/* vitrin-sokak · site.css — "KUYTU". Sıfır bağımlılık. Hareket yalnız transform / opacity.
   İki yerleşim: .sokak-canli (JS + hareket serbest): yapışkan tuvalde kare dizisi, duraklar kaydırmayla belirir.
   Yoksa (JS yok ya da hareketi azalt): duraklar alt alta, her biri kendi durak karesiyle. */
@import url("tokens.css");

@font-face { font-family: "Saira Stencil One"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../font/stencil-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Saira Stencil One"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../font/stencil-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Saira"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url("../font/saira-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Saira"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url("../font/saira-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Saira Yedek"; src: local("Arial Narrow"), local("Arial"); size-adjust: 98%; ascent-override: 96%; descent-override: 26%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--color-gece); color-scheme: dark; }
html.diyalog-acik { overflow: hidden; }
body { margin: 0; color: var(--color-tebesir); background: var(--color-gece);
  font: 400 16px/1.5 var(--font-govde); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--color-ampul); outline-offset: 3px; }
.gorunmez { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: absolute; left: var(--kenar); top: -80px; z-index: 60; padding: 12px 16px; background: var(--color-ampul);
  color: var(--color-murekkep); font-weight: 700; text-decoration: none; }
.atla:focus { top: 8px; }
.fiyat { font-variant-numeric: tabular-nums; font-weight: 600; }
.ornek { font-size: 13px; font-weight: 400; color: var(--color-tebesir-2); }

/* ── Üst sıra: işaret · drop gezintisi · sepet; altında kurgu satırı (her ekranda, ≥13 px) ──────────────── */
.ust { position: fixed; inset: 0 0 auto 0; z-index: 30; display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  column-gap: var(--space-3); padding: env(safe-area-inset-top) var(--space-2) 0 var(--space-3);
  background: linear-gradient(to bottom, rgba(var(--color-gece-a), 0.92) 0%, rgba(var(--color-gece-a), 0.70) 62%, rgba(var(--color-gece-a), 0) 100%); }
.isaret { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; text-decoration: none; }
.isaret svg { width: 26px; height: 26px; }
.isaret__ampul { fill: var(--color-ampul); }
.isaret__ad { font: 400 22px/1.15 var(--font-display); letter-spacing: 0.06em; }
.gezinti { display: flex; justify-content: center; gap: 2px; }
.gezinti a { display: inline-grid; place-items: center; min-width: 40px; min-height: 44px; padding: 0 var(--space-2);
  font: 600 14px/1 var(--font-govde); font-stretch: 80%; letter-spacing: 0.08em; text-decoration: none; color: var(--color-tebesir-2); }
.gezinti a[aria-current="true"] { color: var(--color-ampul); }
.gezinti a:last-child { display: none; }
.sepet-dugme { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 44px; height: 44px; padding: 0 var(--space-2);
  border: 0; background: transparent; cursor: pointer; font: 600 15px/1 var(--font-govde); }
.sepet-dugme__ad { display: none; }
.sepet-dugme__sayi { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px;
  background: var(--color-tebesir); color: var(--color-murekkep); font-size: 14px; font-variant-numeric: tabular-nums; }
.ust__kurgu { grid-column: 1 / -1; padding: 0 0 var(--space-2); font: 600 13px/1.2 var(--font-govde); color: var(--color-tebesir-2); }
@media (min-width: 720px) {
  .ust { padding-left: var(--space-5); padding-right: var(--space-4); }
  .gezinti a:last-child { display: inline-grid; }
  .sepet-dugme__ad { display: inline; }
}

/* ── Düğme ve bağlantı ───────────────────────────────────────────────────────────────────────────────── */
.dugme { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-5);
  border: 0; border-radius: var(--radius); background: var(--color-ampul); color: var(--color-murekkep); cursor: pointer;
  font: 700 16px/1 var(--font-govde); letter-spacing: 0.02em; transition: transform var(--sure-mikro) var(--ease-giris); }
.dugme:active { transform: scale(0.97); }
.dugme--tam { width: 100%; }
.bag { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; text-underline-offset: 4px; }

/* ── Duraklar: ortak metin ──────────────────────────────────────────────────────────────────────────── */
.durak__no { font: 600 14px/1.2 var(--font-govde); font-stretch: 80%; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-ampul); }
.durak__ad { margin-top: var(--space-2); font: 400 clamp(52px, 13vw, 112px)/1.15 var(--font-display); letter-spacing: 0.02em; }
.durak__alt { margin-top: var(--space-2); font-size: 17px; color: var(--color-tebesir); }
.durak__star { margin-top: var(--space-4); font-size: 18px; }
.durak__star-ad { font-weight: 600; }
.durak__eylem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin-top: var(--space-4); }
.durak__durust { margin-top: var(--space-3); font-size: 14px; color: var(--color-tebesir-2); }
/* Hukuk O1 (27 Eki): figür durağında, yıldız parçayla aynı görünümde, ≥13 px, opaklık ≥0,9, kontrast ≥4,5:1 */
.durak__atif { max-width: 46ch; margin-top: var(--space-3); font-size: 13px; line-height: 1.45; color: var(--color-tebesir-2); }
/* 390 px'te 30vw harfleri kenara taşırdı (duman sınaması 27 Eki): 24vw ≈ 94 px, kelime ~%80 genişlik */
.acilis__ad { font: 400 clamp(72px, 24vw, 248px)/1.15 var(--font-display); letter-spacing: 0.04em; }
.acilis__alt { margin-top: var(--space-2); font-size: clamp(17px, 2.4vw, 22px); }
.acilis__ipucu { margin-top: var(--space-6); font: 600 13px/1 var(--font-govde); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-tebesir-2); }

/* Askıdaki kâğıt etiket: gri-beyaz kâğıt, mürekkep yazı; iple askıya bağlı */
.etiket { position: relative; display: grid; gap: 2px; min-width: 44px; min-height: 44px; padding: 10px 12px 9px 22px; border: 0;
  border-radius: var(--radius); background: var(--color-etiket); color: var(--color-murekkep); cursor: pointer; text-align: left;
  box-shadow: 0 6px 18px rgba(var(--color-gece-a), 0.55); }
.etiket::after { content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--color-gece-2); }
.etiket__ad { font: 600 14px/1.2 var(--font-govde); font-stretch: 85%; }
.etiket__fiyat { font: 700 15px/1.2 var(--font-govde); font-variant-numeric: tabular-nums; }
.etiket:focus-visible { outline-color: var(--color-ampul); }

/* ── Düz yerleşim (JS yok / hareketi azalt) ─────────────────────────────────────────────────────────── */
.sokak__tuval, .sokak__gren, .sicak { display: none; }
.durak { position: relative; padding-bottom: var(--space-7); }
.durak__kare img { width: 100%; max-height: 92svh; object-fit: cover; }
.durak__metin { padding: var(--space-5) var(--kenar) 0; max-width: 640px; }
.durak--acilis { padding-top: 96px; }
.etiketler { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4) var(--kenar) 0; }
.duvar { max-width: 720px; }

/* ── Canlı yerleşim: yapışkan sahne, kare dizisi ─────────────────────────────────────────────────────── */
.sokak-canli .sokak { position: relative; }
/* 8 Kas (gerçek telefon, önbelleksiz): tuval ilk kareyi 2,4 sn'de, yavaş ağda 4,5 sn'de çiziyordu; o arada sokak yoktu, yalnız yazı vardı
   (kurucu: «telefonda gözükmüyor»). İlk kare afiştir: sahnenin zemininde hemen görünür, tuval üstüne açılır. Yalnız dikey (telefon):
   masaüstünde boş açılış ölçülmedi, yatay afiş soğuk açılışta en uzun kareye 40–60 ms ekliyordu (8 Kas, aday j/k kıyası). */
@media (max-aspect-ratio: 9/10) { .sokak-canli .sokak__sahne { background-image: url("../kare/dikey-720/0000.webp"); background-position: center; background-size: cover; background-repeat: no-repeat; } }
/* overflow: clip — hidden kaydırılabilir bir kaptır: odak alttaki etikete dönünce tarayıcı sahnenin İÇİNİ kaydırıyordu
   (tuval yukarı kayıp alt yarı boş kalıyordu, 30 Eki telefonda ölçüldü). clip kaydırma kabı değildir. */
.sokak-canli .sokak__sahne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; }
.sokak-canli .sokak__tuval { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  transition: opacity var(--sure-isinma) var(--ease-isinma); }
.sokak-canli.sokak-hazir .sokak__tuval { opacity: 1; }
.sokak-canli .sokak__gren { display: block; position: absolute; inset: -50%; pointer-events: none; opacity: 0.07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22220%22%3E%3Cfilter%20id%3D%22g%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.9%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%201.2%20-0.2%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23g)%22%2F%3E%3C%2Fsvg%3E"); }
/* --g durağın görünürlüğü. Miras almaz: sokak.js durağa ve metnine ayrı yazar. Miras alsaydı her yazımda durağın bütün altı biçem hesabına girerdi (6× işlemcide saniyede ~100 ms). */
@property --g { syntax: '<number>'; inherits: false; initial-value: 0; }
.sokak-canli .durak { position: absolute; inset: 0; padding: 0; opacity: var(--g, 0); pointer-events: none; }
.sokak-canli .durak__kare { display: none; }
.sokak-canli .durak.acik .durak__metin, .sokak-canli .durak.acik .etiket, .sokak-canli .durak.acik .sicak { pointer-events: auto; }
.sokak-canli .durak__metin { position: absolute; left: 0; right: 0; bottom: 0; max-width: none;
  padding: 120px var(--kenar) calc(var(--space-6) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(var(--color-gece-a), 0.94) 0%, rgba(var(--color-gece-a), 0.80) 46%, rgba(var(--color-gece-a), 0) 100%);
  transform: translate3d(0, calc((1 - var(--g, 0)) * 18px), 0); }
.sokak-canli .durak--acilis .durak__metin { top: 0; display: grid; place-content: center; text-align: center; padding-top: 80px;
  background: radial-gradient(ellipse at 50% 52%, rgba(var(--color-gece-a), 0.62) 0%, rgba(var(--color-gece-a), 0.0) 62%); }
.sokak-canli .durak__metin--ince { top: auto; padding-top: 72px; padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); }
.sokak-canli .durak--duvar .durak__metin { top: 0; display: grid; align-content: center; justify-items: center; text-align: center;
  background: radial-gradient(ellipse at 50% 46%, rgba(var(--color-gece-a), 0.55) 0%, rgba(var(--color-gece-a), 0.0) 70%); }
.sokak-canli .etiketler { position: absolute; inset: 0; padding: 0; display: block; }
/* JS konumu <li>'ye yazar (transform); etiketin kendi kayması ve eğikliği butonda kalır, böylece dönme konumu savurmaz */
.sokak-canli .etiketler li { position: absolute; left: 0; top: 0; }
/* --ip: ipin boyu. JS çakışan etiketi bir alt sıraya indirir ve ipi o kadar uzatır (390'da D2 askısında üç etiket üst üste biniyordu) */
.sokak-canli .etiket { translate: -50% var(--ip, 34px); opacity: 0;
  transition: opacity var(--sure-durak) var(--ease-giris); }
.sokak-canli .etiket.gorunur { opacity: 1; }
.sokak-canli .etiket::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: var(--ip, 34px);
  background: linear-gradient(to top, var(--color-tebesir-2), rgba(var(--color-gece-a), 0)); }
.sokak-canli .etiketler li:nth-child(odd) .etiket { rotate: -3deg; }
.sokak-canli .etiketler li:nth-child(even) .etiket { rotate: 2.5deg; }
.sokak-canli .sicak { display: block; position: absolute; left: 0; top: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
/* Etiket sarkacı: <li>'nin kökeni ipin asıldığı nokta (giysinin eteği); JS translate + rotate yazar */
.sokak-canli .etiketler li { transform-origin: 0 0; }
/* Giysi katmanları (src/giysi.js): tuvalin hemen üstü, grenin altı; durağa oturmuşken öne çıkan/nefes alan giysi.
   Sıra: tüm örtüler (giysinin arkası, çevresinden doldurulmuş) < gölgeler < giysiler (uzaktan yakına). */
.giysiler { display: none; }
.sokak-canli .giysiler { display: block; position: absolute; inset: 0; pointer-events: none;
  transition: opacity var(--sure-mikro) var(--ease-cikis); }
.giysiler__ortu, .giysiler__golge, .giysiler__kumas { position: absolute; inset: 0; }
.giysiler canvas { position: absolute; display: block; }
.giysiler__golge canvas, .giysiler__kumas canvas { will-change: transform; }
.giysi-canli .sicak { display: none !important; }
.sokak__sahne.giysi-ustunde { cursor: pointer; }
.sokak-canli .acilis__ipucu { animation: ipucu 2.4s var(--ease-giris) infinite; }
@keyframes ipucu { 0%, 100% { opacity: 0.55; transform: translateY(0); } 50% { opacity: 1; transform: translateY(6px); } }

@media (min-width: 900px) and (min-aspect-ratio: 9/10) {
  .sokak-canli .durak--figur .durak__metin { top: 0; bottom: 0; width: min(44vw, 560px); display: grid; align-content: center;
    padding: 96px var(--space-7) var(--space-7); }
  .sokak-canli .durak--sag .durak__metin { left: auto; right: 0;
    background: linear-gradient(to left, rgba(var(--color-gece-a), 0.90) 0%, rgba(var(--color-gece-a), 0.70) 55%, rgba(var(--color-gece-a), 0) 100%);
    transform: translate3d(calc((1 - var(--g, 0)) * 22px), 0, 0); }
  .sokak-canli .durak--sol .durak__metin { left: 0; right: auto;
    background: linear-gradient(to right, rgba(var(--color-gece-a), 0.90) 0%, rgba(var(--color-gece-a), 0.70) 55%, rgba(var(--color-gece-a), 0) 100%);
    transform: translate3d(calc((var(--g, 0) - 1) * 22px), 0, 0); }
  .sokak-canli .durak--kepenk .durak__metin { top: 0; display: grid; align-content: end; padding: var(--space-8); }
}

/* ── Duvar (kapanış) ────────────────────────────────────────────────────────────────────────────────── */
.duvar__ad { font: 400 clamp(72px, 18vw, 180px)/1.15 var(--font-display); letter-spacing: 0.05em; }
.duvar__satir { margin-top: var(--space-2); font-size: 18px; }
.duvar__droplar { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); }
.duvar__droplar a { display: inline-flex; align-items: center; min-height: 44px; font: 600 15px/1 var(--font-govde); font-stretch: 80%;
  letter-spacing: 0.12em; text-underline-offset: 4px; }
.duvar__kunye { display: grid; gap: var(--space-3); max-width: 560px; margin-top: var(--space-6); font-size: 14px; line-height: 1.55; color: var(--color-tebesir-2); }
.duvar__kunye strong { color: var(--color-tebesir); }
.duvar__kunye .bag { color: var(--color-tebesir); justify-content: center; }

/* ── Liste (31 Eki, kurucu "orta yol"): 3B sokak kepenkte biter, liste sahnenin son ekranının üstüne karanlıktan doğar ────── */
.liste { position: relative; z-index: 2; padding: var(--space-8) var(--kenar); background: var(--color-gece); }
/* 8 Kas: soğuk açılışta ilk yerleşim sayfadaki bütün yazıyı bir kerede şekillendiriyordu (telefon taklidinde sokak.js 430–520 ms, uzun görev
   toplamı eşiğin hemen altında: 585–906 / 850). Uzun sokağın sonundaki liste ve kapanış açılışta ekran dışıdır: ilk yerleşime girmez. */
.liste { content-visibility: auto; contain-intrinsic-size: auto 2400px; }
.sokak-canli .liste { margin-top: -40vh; margin-top: -40svh; padding-top: calc(40svh + var(--space-6));
  background: linear-gradient(to bottom, rgba(var(--color-gece-a), 0) 0, rgba(var(--color-gece-a), 0.86) 22svh, var(--color-gece) 40svh); }
.liste__ust, .liste__drop, .liste__not { max-width: 1200px; margin-left: auto; margin-right: auto; }
.liste__baslik { margin-top: var(--space-2); font: 400 clamp(44px, 11vw, 96px)/1.15 var(--font-display); letter-spacing: 0.02em; }
.liste__drop { margin-top: var(--space-7); }
.liste__drop-ad { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-3); padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-cizgi); font: 700 18px/1.2 var(--font-govde); letter-spacing: 0.12em; }
.liste__drop-ad span { color: var(--color-ampul); }
.liste__drop-ad small { font: 400 15px/1.3 var(--font-govde); letter-spacing: 0; color: var(--color-tebesir-2); }
.liste__izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-3); margin-top: var(--space-4); }
@media (min-width: 760px) { .liste__izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); } }
.kart { display: grid; gap: 4px; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
/* kart zemini sokağın lambası: üstten sıcak ışık konisi (siyah giysi koyu zeminde kayboluyordu, 31 Eki kare) */
.kart img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; border-radius: var(--radius);
  background: radial-gradient(ellipse 75% 65% at 50% 28%, rgba(var(--color-ampul-a), 0.34) 0%, rgba(var(--color-ampul-a), 0.10) 55%, rgba(var(--color-ampul-a), 0) 80%), var(--color-gece-3);
  transition: transform var(--sure-mikro) var(--ease-giris); }
.kart:hover img { transform: scale(1.02); }
.kart:active img { transform: scale(0.98); }
.kart:focus-visible { outline: 3px solid var(--color-ampul); outline-offset: 4px; border-radius: var(--radius); }
.kart__ad { margin-top: var(--space-2); font-weight: 600; font-size: 15px; line-height: 1.3; }
.kart__fiyat { font: 700 15px/1.2 var(--font-govde); font-variant-numeric: tabular-nums; }
.liste__not { margin-top: var(--space-6); font-size: 14px; color: var(--color-tebesir-2); }

/* ── Kapanış: sokağın duvarı (0419), görünür olunca kamera yavaşça yaklaşır; hareketi azaltta düz kare ───────────────────── */
.kapanis { position: relative; display: grid; overflow: hidden; overflow: clip; background: var(--color-gece); content-visibility: auto; contain-intrinsic-size: auto 900px; }
.kapanis__kare, .kapanis__metin { grid-area: 1 / 1; }
.kapanis__kare { height: 100vh; height: 100svh; overflow: hidden; overflow: clip; }
.kapanis__kare img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sokak-canli .kapanis__kare img { transform: scale(1.08); transition: transform 2.4s var(--ease-cikis); }
.sokak-canli .kapanis.gorundu .kapanis__kare img { transform: scale(1); }
/* duvarın tabelası (lamba + KUYTU, karenin üst-orta üçte biri) açık kalır: metin alt kenarda, künye resmin altında */
.kapanis__metin.duvar { position: relative; max-width: none; display: grid; align-content: end; justify-items: center; text-align: center;
  padding: 0 var(--kenar) var(--space-7);
  background: linear-gradient(to bottom, var(--color-gece) 0%, rgba(var(--color-gece-a), 0) 22%, rgba(var(--color-gece-a), 0) 58%, rgba(var(--color-gece-a), 0.92) 100%); }
.kapanis__kunye { grid-area: 2 / 1; justify-self: center; margin: 0; padding: var(--space-6) var(--kenar) var(--space-8); text-align: center; }

/* ── Çekmeceler: ürün paneli ve sepet ───────────────────────────────────────────────────────────────── */
.cekmece { width: min(440px, 100%); max-width: 100%; height: 100%; max-height: 100%; margin: 0 0 0 auto; padding: 0; border: 0;
  background: var(--color-gece-2); color: var(--color-tebesir); }
.cekmece::backdrop { background: var(--color-perde); }
.cekmece[open] { animation: cekmece-gir var(--sure-cekmece) var(--ease-giris); }
@keyframes cekmece-gir { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
.cekmece__ic { display: flex; flex-direction: column; min-height: 100%; padding: max(8px, env(safe-area-inset-top)) var(--kenar) calc(var(--space-5) + env(safe-area-inset-bottom)); }
.cekmece__ust { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 56px; }
.cekmece__ust h2 { font: 400 30px/1.15 var(--font-display); letter-spacing: 0.04em; }
.kapat { min-width: 44px; height: 44px; padding: 0 var(--space-3); border: 1px solid var(--color-cizgi); border-radius: var(--radius);
  background: transparent; cursor: pointer; font-weight: 600; }
.urun__drop { font: 600 14px/1.2 var(--font-govde); font-stretch: 80%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-ampul); }
.urun__foto { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; margin-top: var(--space-2); background: var(--color-gece-3); }
.urun__ad { margin-top: var(--space-4); font: 700 26px/1.2 var(--font-govde); font-stretch: 85%; }
.urun__alt { margin-top: var(--space-1); color: var(--color-tebesir-2); }
.urun__alt .fiyat { color: var(--color-tebesir); }
.urun__form { margin-top: var(--space-5); }
.bedenler { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.bedenler legend { width: 100%; margin-bottom: var(--space-2); font-weight: 600; }
.beden { position: relative; }
.beden input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.beden span { display: grid; place-items: center; min-width: 56px; height: 48px; border: 1px solid var(--color-tebesir-2); border-radius: var(--radius);
  font-weight: 600; }
.beden input:checked + span { background: var(--color-tebesir); color: var(--color-murekkep); border-color: var(--color-tebesir); }
.beden input:focus-visible + span { outline: 3px solid var(--color-ampul); outline-offset: 3px; }
.bedenler[aria-invalid="true"] .beden span { border-color: var(--color-ampul); }
.urun__hata { margin-top: var(--space-2); color: var(--color-ampul); font-weight: 600; }
.urun__form .dugme { margin-top: var(--space-4); }
.urun__kurgu, .sepet__kurgu { margin-top: var(--space-3); font: 600 13px/1.3 var(--font-govde); color: var(--color-tebesir-2); }
.sepet__bos { margin-top: var(--space-5); color: var(--color-tebesir-2); }
.sepet__liste { margin-top: var(--space-4); }
.sepet-satir { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space-3); padding: 14px 0; border-bottom: 1px solid var(--color-cizgi); }
.sepet-satir img { width: 64px; height: 80px; object-fit: contain; background: var(--color-gece-3); }
.sepet-satir__ad { font-weight: 600; }
.sepet-satir__alt { margin-top: 2px; font-size: 14px; color: var(--color-tebesir-2); }
.sepet-satir__alt .fiyat { color: var(--color-tebesir); }
.adet { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--space-2); }
.adet__dg { width: 44px; height: 44px; border: 1px solid var(--color-cizgi); border-radius: var(--radius); background: transparent; cursor: pointer; font-size: 18px; }
.adet__sayi { min-width: 24px; text-align: center; font-variant-numeric: tabular-nums; }
.sepet-satir__sil { align-self: start; min-height: 44px; padding: 0 4px; border: 0; background: transparent; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sepet__ozet { display: flex; justify-content: space-between; margin-top: var(--space-4); font-weight: 600; font-variant-numeric: tabular-nums; }
.sepet__kapali { margin-top: auto; padding: 18px 16px; border-radius: var(--radius); background: var(--color-gece-3); }
.sepet__ozet + .sepet__kapali, .sepet__liste + .sepet__ozet[hidden] + .sepet__kapali { margin-top: var(--space-6); }
.sepet__kapali h3 { font: 700 18px/1.25 var(--font-govde); }
.sepet__kapali p { margin-top: 6px; font-size: 14px; color: var(--color-tebesir-2); }
.jssiz { padding: var(--space-4) var(--kenar); color: var(--color-tebesir-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}