/**
 * Jet Barkod. Simülasyon sayfası: sinematik kabuk.
 * ============================================================================
 *
 * NE YAPIYOR
 * Sayfa perdelere bölünmüş. Her perde uzun bir kaydırma alanı ve içinde
 * ekrana yapışan bir sahne taşıyor. Kaydırdıkça sahne ilerliyor, sayfa
 * ilerlemiyor: anlatının temposunu parmak belirliyor.
 *
 * NEDEN KAYDIRMA ÇALINMIYOR
 * `scroll` olayını yakalayıp sayfayı kendi hesabına kaydıran sayfalar
 * telefonda kırılıyor: atalet bozuluyor, geri jesti takılıyor, ekran
 * okuyucu kayboluyor. Burada tarayıcının kendi kaydırması olduğu gibi
 * duruyor; yalnız `position: sticky` ile sahne yerinde tutuluyor.
 *
 * İLERLEME TEK SAYI
 * `js/simulasyon.js` her perdeye `--p` yazıyor: 0 perdenin başı, 1 sonu.
 * Bütün hareket bu tek sayıdan türüyor. JS hiçbir stil hesaplamıyor,
 * yalnız sayıyı tazeliyor; ne animate edileceğine CSS karar veriyor.
 *
 * PERDE İÇİ DURAKLAR
 * Bir perdede birkaç durak olabiliyor. Her durak `--p` üzerinde bir
 * aralık: `araligi()` deseni o aralığı kendi 0..1'ine çeviriyor.
 * Örnek: ikinci durak 0.25 ile 0.50 arasındaysa
 * `clamp(0, calc((var(--p) - 0.25) / 0.25), 1)`.
 *
 * JS YOKSA
 * `sim-hazir` sınıfı gelmezse yapışma ve `--p` hiç devreye girmiyor;
 * perdeler alt alta duran normal bölümlere dönüyor ve her sahne SON
 * hâliyle görünüyor. Anlatı hareketsiz kalır ama eksiksiz okunur.
 *
 * RENK VE YAZI
 * Palet ve tipografi `css/hakkimizda.css` içinden geliyor (`--hk-*`).
 * Burada yeni renk üretilmiyor. Tek yeni ölçek basamağı `--sim-dev`:
 * açılış başlığı sayfanın tek en büyük öğesi, mevcut ölçeğin üstünde
 * duruyor ve başka hiçbir yerde kullanılmıyor.
 *
 * HAREKET
 * Süre ve eğri `css/motion.css` token'larından. Yalnız `transform` ve
 * `opacity` animate ediliyor; `--p` ile sürülen her şey de bu ikisine
 * bağlanıyor. Genişlik, yükseklik, gölge animate edilmiyor.
 * ============================================================================
 */

:root {
    /* Sayfanın tek en büyük yazısı. Açılış başlığından başka yerde yok.
       Yükseklik de hesaba katılıyor: yalnız `vw` ile ölçeklenen başlık
       geniş ama alçak ekranda (yatay telefon, kısa pencere) dört satıra
       çıkıp sahnenin tamamını yiyordu. */
    --sim-dev: clamp(2rem, min(6.4vw, 8.6vh), 4.8rem);

    /* Derinlik. Telefonda düzleşiyor: eğik yüzeyler küçük ekranda
       okunaklılığı bozuyor ve boyama maliyeti artıyor. */
    --sim-derinlik: 1400px;
    --sim-egim: 1;

    /* Sahne yüksekliği. `dvh` adres çubuğu gizlenince sahnenin
       zıplamasını önlüyor. */
    --sim-sahne-y: 100dvh;
}

@media (max-width: 767px) {
    :root {
        --sim-derinlik: 2200px;
        --sim-egim: 0.45;
    }
}

/* ============================================================================
 * PERDE
 * ========================================================================== */

.sim-perde {
    position: relative;
    /* Kaydırma payı: sahnenin baştan sona oynaması için gereken yol.
       JS yokken bu yükseklik anlamsız, o yüzden `sim-hazir` altında. */
    background: var(--hk-murekkep);
    color: var(--hk-ak);
}

.sim-hazir .sim-perde {
    height: var(--sim-yol, 300vh);
}

.sim-sahne {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: var(--sim-sahne-y);
    padding: 48px 16px;
    overflow: hidden;
    perspective: var(--sim-derinlik);
    perspective-origin: 50% 46%;
}

.sim-hazir .sim-sahne {
    position: sticky;
    top: 0;
    height: var(--sim-sahne-y);
    min-height: 0;
    padding: 0 16px;
}

/* Sahnedeki her şey tek bir 3B uzayda: katmanlar birbirinin önünde ve
   arkasında gerçekten duruyor, sıralamayı z-index değil derinlik
   belirliyor. */
.sim-kat {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    pointer-events: none;
}

/* Oynayan katman derleyiciye önceden haber veriyor. Sınıf JS tarafından
   yalnız perde görünürken takılıyor: sürekli açık bırakmak bellekte
   gereksiz katman tutuyor. */
.sim-perde.gorunur .sim-kat--oynak { will-change: transform, opacity; }

/* Katmanlar aynı yere yığılmasın: her biri sahnenin bir bölgesinde durur.
   Üstte söz, altta cihaz; ortada ikisinin arasında kalan derinlik. */
.sim-kat--ust {
    place-items: start center;
    padding-top: clamp(76px, 13vh, 148px);
}

.sim-kat--alt { place-items: end center; }

/* Deste alt bölgede ama tabana yapışmıyor: karar kartları onun yerine
   gelirken ortada bir soluklanma payı kalsın. */
.sim-kat--dek { padding-bottom: clamp(48px, 11vh, 130px); }

.sim-ic {
    position: relative;
    width: min(100%, var(--hk-en));
    margin: 0 auto;
}

/* ============================================================================
 * ZEMİN: derinlik ızgarası
 * Düz siyah zeminde 3B hareket okunmuyor, gözün tutunacağı bir şey yok.
 * Perspektifle uzaklaşan ince bir ızgara mesafeyi görünür kılıyor.
 * ========================================================================== */

.sim-izgara {
    position: absolute;
    left: 50%;
    bottom: -10%;
    width: 260%;
    height: 130%;
    margin-left: -130%;
    background-image:
        linear-gradient(to right, rgb(255 255 255 / 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(255 255 255 / 0.07) 1px, transparent 1px);
    background-size: 68px 68px;
    transform: rotateX(calc(74deg * var(--sim-egim)))
               translate3d(0, calc(var(--p, 0) * -180px), 0);
    transform-origin: 50% 100%;
    opacity: 0.5;
    mask-image: linear-gradient(to top, #000 0%, transparent 72%);
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 72%);
}

/* Ufuktaki ışık. Sahnenin bir yönü olduğunu söylüyor. */
.sim-ufuk {
    position: absolute;
    left: 50%;
    top: 42%;
    width: min(760px, 92vw);
    height: 320px;
    margin-left: min(-380px, -46vw);
    border-radius: 999px;
    background: radial-gradient(closest-side, rgb(19 91 236 / 0.34), transparent 72%);
    filter: blur(18px);
    opacity: calc(0.35 + var(--p, 0) * 0.4);
}

/* ============================================================================
 * BAŞLIK KATMANI
 * ========================================================================== */

.sim-soz {
    position: relative;
    z-index: 2;
    /* `ch` KULLANILMIYOR: bu kapta yazı gövde boyunda, başlık ise
       `--sim-dev`. `26ch` başlığın değil kabın harfini ölçüyor ve
       278 piksel çıkıyordu; başlık beş satıra bölünüp sahneyi yiyordu. */
    width: min(92vw, 940px);
    margin: 0 auto;
    text-align: center;
}

.sim-soz__ad {
    margin: 0;
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: var(--sim-dev);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--hk-ak);
}

.sim-soz__ad em {
    display: block;
    font-style: normal;
    color: var(--hk-mavi-ak);
}

.sim-soz__alt {
    max-width: 46ch;
    margin: 24px auto 0;
    font-size: 1.06rem;
    line-height: 1.55;
    color: var(--hk-ak-soluk);
}

.sim-etiket {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 6px 12px;
    border: 1px solid rgb(255 255 255 / 0.16);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hk-ak-soluk);
}

.sim-etiket i {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--hk-mavi-ak);
}

/* ============================================================================
 * CİHAZ KASALARI
 * El terminali ve telefon. İkisi de DOM; ekranlarının içine gerçek arayüz
 * çiziliyor, resim konmuyor. Böylece ürün neyse sahnede o görünüyor.
 * ========================================================================== */

.sim-cihaz {
    position: relative;
    transform-style: preserve-3d;
    border-radius: 16px;
    background: linear-gradient(160deg, #262d3a, #12161f);
    box-shadow:
        0 40px 90px rgb(0 0 0 / 0.55),
        inset 0 1px 0 rgb(255 255 255 / 0.09);
}

.sim-cihaz__ekran {
    position: relative;
    overflow: hidden;
    border-radius: 9px;
    background: var(--hk-kagit);
    color: var(--hk-yazi);
}

/* El terminali: kalın çerçeve, küçük ekran, altında tuş takımı.
   Genişlik yüksekliğe de bağlı: cihaz ekran boyu kadar uzadığında
   sahnede sözle çakışıyordu. */
.sim-terminal {
    width: min(290px, 76vw, 30vh);
    padding: 14px 14px 0;
}

.sim-terminal .sim-cihaz__ekran {
    aspect-ratio: 3 / 4;
}

.sim-terminal__tuslar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 12px 0 14px;
}

.sim-terminal__tuslar span {
    height: 14px;
    border-radius: 6px;
    background: rgb(255 255 255 / 0.09);
}

/* Telefon: ince çerçeve, uzun ekran. */
.sim-telefon {
    width: min(290px, 74vw, 26vh);
    padding: 10px;
    border-radius: 16px;
}

.sim-telefon .sim-cihaz__ekran {
    aspect-ratio: 9 / 19;
    border-radius: 12px;
}

/* ============================================================================
 * İKİ ŞERİT: eskiden / şimdi
 * ========================================================================== */

.sim-yol-cift {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 24px;
    padding: 0 24px;
    transform-style: preserve-3d;
}

.sim-yaka {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.sim-yaka--eski {
    border: 1px solid rgb(154 116 52 / 0.5);
    background: rgb(154 116 52 / 0.16);
    color: #e8c88a;
}

.sim-yaka--yeni {
    border: 1px solid rgb(19 91 236 / 0.5);
    background: rgb(19 91 236 / 0.18);
    color: var(--hk-mavi-ak);
}

.sim-yaka svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ============================================================================
 * KAYDIRMA İPUCU
 * Yapışan ilk sahnede sayfa durmuş gibi görünüyor. Küçük bir işaret
 * devamı olduğunu söylüyor; ilerleme başlayınca sönüyor.
 * ========================================================================== */

.sim-ipucu {
    position: absolute;
    left: 50%;
    bottom: 28px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hk-ak-soluk);
    transform: translateX(-50%);
    opacity: clamp(0, calc(1 - var(--p, 0) * 8), 1);
}

.sim-ipucu i {
    display: block;
    width: 1px;
    height: 26px;
    background: linear-gradient(to bottom, transparent, var(--hk-ak-soluk));
    animation: sim-ipucu-in 1.8s var(--motion-ease-standard) infinite;
}

@keyframes sim-ipucu-in {
    0%   { transform: translateY(-6px) scaleY(0.6); opacity: 0; }
    45%  { opacity: 1; }
    100% { transform: translateY(6px) scaleY(1); opacity: 0; }
}

/* ============================================================================
 * PERDE 0: AÇILIŞ
 *
 * İKİ AYRI HAREKET, KARIŞTIRMA
 * Giriş (sayfa açılınca bir kez oynayan) ile ilerleme (kaydırmaya bağlı)
 * ayrı öğelerde duruyor. Aynı öğeye ikisini birden yazarsan `animation`
 * ile `transform` çakışıyor ve biri diğerini eziyor. Dıştaki `.sim-gir`
 * girişi, içteki öğe kaydırmayı taşıyor.
 *
 * İLK KARE DOLU
 * Bütün hareket `--p` ile sürülseydi `--p: 0` anında ekranda hiçbir şey
 * olmazdı: ziyaretçi karşısında siyah bir ekran bulur ve kaydırması
 * gerektiğini bilmezdi. Başlık ve terminal ilk kareden itibaren duruyor;
 * kaydırma onları yalnız İLERLETİYOR.
 *
 * Duraklar:
 *   0.10 - 0.34  sipariş fişi terminale düşer
 *   0.44 - 0.74  kamera geri çekilir, sahne iki şeride ayrılır
 *   0.70 - 1.00  şeritler yerine oturur, açıklamaları gelir
 * ========================================================================== */

.sim-acilis {
    --d2: clamp(0, calc((var(--p, 0) - 0.10) / 0.24), 1);
    --d3: clamp(0, calc((var(--p, 0) - 0.44) / 0.30), 1);
    --d4: clamp(0, calc((var(--p, 0) - 0.70) / 0.30), 1);
}

/* Giriş: sayfa açılınca bir kez. Kaydırmayla ilgisi yok.

   Animasyon SARMALIN üstünde, çocuğun değil. `animation-fill-mode: both`
   bitiş değerini kalıcı olarak uyguluyor; aynı öğede hem giriş opaklığı
   hem `--p` ile sürülen opaklık olsaydı animasyon ikincisini kalıcı
   olarak ezerdi ve başlık bir daha hiç sönmezdi. */
.sim-gir {
    display: block;
    transform-style: preserve-3d;
}

.js-hazir .sim-gir {
    animation: sim-gir var(--motion-panel) var(--motion-ease-out) both;
    animation-delay: calc(var(--s, 0) * 90ms);
}

@keyframes sim-gir {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Başlık ilk kareden beri ekranda; sahne ikiye ayrılırken yukarı çıkıp
   söner. */
.sim-acilis .sim-soz {
    transform: translate3d(0, calc(var(--d3) * -90px), 0);
    opacity: calc(1 - var(--d3));
}

/* Terminal ve fiş TEK yuvada duruyor: fiş terminalin ekranına inecek,
   ikisi ayrı katmanda olsaydı hizaları ekran boyuna göre kayardı. */
.sim-yuva {
    position: relative;
    transform-style: preserve-3d;
    /* Cihaz alt kenardan taşıyor: sahnenin devamı olduğu hissi veriyor
       ve söze yer açıyor. */
    transform: translate3d(0, calc(24% + var(--d3, 0) * 14%),
                           calc(-160px - var(--d3, 0) * 320px))
               rotateX(calc((11deg - var(--d2, 0) * 7deg) * var(--sim-egim)))
               rotateY(calc(var(--d3, 0) * -14deg * var(--sim-egim)));
    opacity: calc(1 - var(--d3, 0) * 0.75);
}

/* Sipariş fişi terminalin ekranına düşüyor. */
.sim-fis {
    position: absolute;
    left: 50%;
    top: 16%;
    width: 76%;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--hk-kagit);
    color: var(--hk-yazi);
    box-shadow: 0 24px 50px rgb(0 0 0 / 0.5);
    transform:
        translate3d(-50%, calc(-300px + var(--d2) * 300px), 40px)
        rotate(calc(-9deg + var(--d2) * 9deg));
    opacity: calc(var(--d2) * (1 - var(--d3)));
}

.sim-fis__ust {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.sim-fis__banko {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.sim-fis__not {
    font-size: 11px;
    color: var(--hk-cok-soluk);
}

.sim-fis__satir {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-top: 1px solid var(--hk-cizgi);
    font-size: 12px;
}

.sim-fis__satir b {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--hk-soluk);
}

/* İki şerit sahnenin sonunda açılıyor. */
/* Giriş kayması KAPTA DEĞİL, sütunlarda.
   Kap `inset: 0` ile sahnenin tamamı kadar; ona verilen her dikey kayma
   doğrudan alttan taşma demek oluyordu. İçerik zaten ortalanmış olduğu
   için görünen bir kırpılma olmuyordu ama kutu sahnenin dışına çıkıyordu.
   Kayma sütunlara taşındı; kap yerinde duruyor. */
.sim-acilis .sim-yol-cift { opacity: var(--d3); }

.sim-acilis .sim-yol-cift > div {
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
}

.sim-acilis .sim-yol-cift > div:first-child {
    transform: translate3d(calc(var(--d3) * -4%), calc(28px - var(--d3) * 28px),
                           calc(var(--d4) * -60px))
               rotateY(calc(var(--d3) * 13deg * var(--sim-egim)));
}

.sim-acilis .sim-yol-cift > div:last-child {
    transform: translate3d(calc(var(--d3) * 4%), calc(28px - var(--d3) * 28px),
                           calc(var(--d4) * -60px))
               rotateY(calc(var(--d3) * -13deg * var(--sim-egim)));
}

.sim-yol-cift p {
    max-width: 24ch;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--hk-ak-soluk);
    opacity: var(--d4);
}

/* ============================================================================
 * PERDE 1: SİPARİŞ TOPLAMA
 *
 * İki durak tek sahnede. Önce koridor kameraya doğru akıyor: koşu bu.
 * Sonra akış duruyor, terminal geri çekiliyor, telefon kadraja yükseliyor
 * ve satırlar sırayla yeşile dönüyor.
 *
 * Duraklar:
 *   0.00 - 0.46  koridor akıyor, terminal elde, birinci replik
 *   0.42 - 0.60  akış yavaşlıyor, replik değişiyor
 *   0.52 - 1.00  telefon yükseliyor, satırlar sırayla işaretleniyor
 * ========================================================================== */

.sim-toplama {
    --k1: clamp(0, calc(var(--p, 0) / 0.46), 1);
    --k2: clamp(0, calc((var(--p, 0) - 0.42) / 0.18), 1);
    --k3: clamp(0, calc((var(--p, 0) - 0.52) / 0.22), 1);
    --gecis: var(--k2);
}

/* ── Koridor ──
   Altı raf çerçevesi derinlemesine diziliyor ve `--k1` ile kameraya doğru
   geliyor. Akış hissini veren şey çerçevelerin yanından geçmesi. */
.sim-koridor {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    /* Akış `--k1` ile hızlanıp `--k2` ile duruyor: koşu bitiyor. */
    transform: translate3d(0, 0, calc(var(--k1) * 1500px * (1 - var(--k2) * 0.35)));
}

.sim-koridor i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(78vw, 900px);
    height: min(64vh, 560px);
    margin: calc(min(64vh, 560px) / -2) 0 0 calc(min(78vw, 900px) / -2);
    border: 2px solid rgb(148 163 184 / 0.16);
    border-radius: 4px;
    /* Her çerçeve bir öncekinden 340 piksel daha uzakta. */
    transform: translate3d(0, 0, calc(var(--i) * -340px));
    /* Uzaktaki soluk, yakındaki belirgin. */
    opacity: calc(0.15 + var(--i) * 0.13);
}

/* Raf katları: çerçevenin içinde yatay çizgiler. Boş dikdörtgen raf
   gibi durmuyor, üç kat çizgi duruyor. */
.sim-koridor i::before,
.sim-koridor i::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgb(148 163 184 / 0.2);
}

.sim-koridor i::before { top: 33%; }
.sim-koridor i::after  { top: 66%; }

/* ── Replikler ── */
.sim-repl {
    position: relative;
    width: min(92vw, 720px);
    text-align: center;
}

.sim-repl p {
    margin: 0;
    font-size: clamp(1rem, 2.1vw, 1.32rem);
    line-height: 1.5;
    color: var(--hk-ak-soluk);
}

.sim-repl b {
    display: block;
    margin-top: 6px;
    font-weight: 700;
    color: var(--hk-ak);
}

.sim-repl .sim-yaka { margin-bottom: 12px; }

/* İki replik üst üste duruyor, yalnız görünürlükleri değişiyor: biri
   diğerinin yerini alsaydı sahne o anda bir satır boyu zıplardı. */
.sim-repl__b {
    position: absolute;
    inset: 0;
}

/* GEÇİŞ SIRAYLA, AYNI ANDA DEĞİL.

   Geçiş değeri her perdenin kendi durağından geliyor (`--gecis`). Eskiden
   doğrudan toplama perdesinin `--k2`si okunuyordu; fırın ve sayım
   perdelerinde o değişken tanımsız olduğu için `calc` geçersiz oluyor ve
   iki replik de tam opak kalıyordu.

   Sonra düz çapraz geçişe alındı: `A = 1 - gecis`, `B = gecis`. Bu da
   ortada iki metnin de yarı saydam olduğu bir an bırakıyor. Tek satırlık
   yazıda göze batmıyor ama bu perdelerde iki metin de üç satır ve üst
   üste binince ikisi de okunmaz oluyor, ekran kirli görünüyor.

   Artık A geçişin ilk %45'inde tamamen sönüyor, B %55'ten sonra
   beliriyor. Arada ikisinin de görünmediği kısa bir boşluk var: temiz
   kesme. Hafif dikey kayma da yönü anlatıyor. */
.sim-repl__a {
    opacity: clamp(0, calc(1 - var(--gecis, 0) * 2.22), 1);
    transform: translate3d(0, calc(var(--gecis, 0) * -14px), 0);
}

.sim-repl__b {
    opacity: clamp(0, calc((var(--gecis, 0) - 0.55) * 2.22), 1);
    transform: translate3d(0, calc((1 - var(--gecis, 0)) * 14px), 0);
}

/* ── Elde terminal ──
   Koşarken hafifçe sallanıyor; akış durunca geri plana çekilip söner. */
.sim-kosan {
    transform: translate3d(calc(-24% + var(--k2) * -14%), calc(18% + var(--k3) * 30%),
                           calc(-60px - var(--k3) * 420px))
               rotateY(calc(14deg * var(--sim-egim)))
               rotateZ(calc((2deg - var(--k1) * 4deg) * var(--sim-egim)));
    opacity: calc(1 - var(--k3) * 0.85);
}

/* Terminal ekranındaki liste: küçük, sıkışık, okunması için durmak
   gereken tipografi. Anlatılan şey bu. */
.sim-term-ekran { padding: 6px; }

.sim-term-bas {
    padding: 3px 4px;
    border-radius: 3px;
    background: #e5e7eb;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #374151;
}

.sim-term-liste {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.sim-term-liste li {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 7px;
    color: #4b5563;
}

.sim-term-liste b { margin-left: auto; font-size: 8px; color: #111827; }

/* ── Telefon ──
   Akış durduktan sonra kadraja yükseliyor. */
.sim-yukselen {
    transform: translate3d(calc(22% + var(--k3) * -4%),
                           calc(120% - var(--k3) * 104%),
                           calc(-40px + var(--k3) * 120px))
               rotateY(calc((-16deg + var(--k3) * 12deg) * var(--sim-egim)));
    opacity: var(--k3);
}

/* ── Telefondaki siparişler ekranı ── */
.sim-sip {
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: var(--hk-kagit-2);
    font-size: 9px;
}

.sim-sip__bas {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 5px 7px;
}

.sim-sip__bas strong {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}

.sim-sip__bas span { font-size: 8px; color: #667085; }

.sim-sip__cubuk {
    height: 3px;
    margin: 0 5px 8px;
    border-radius: 999px;
    background: #e4e7ec;
    overflow: hidden;
}

/* Çubuk genişlik DEĞİL ölçek ile doluyor: genişlik animasyonu her karede
   yerleşim hesaplatıyor, ölçek hesaplatmıyor. */
.sim-sip__cubuk i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--hk-mavi);
    transform: scaleX(var(--k3));
    transform-origin: left center;
}

.sim-sip__liste {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sim-sip__satir {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--hk-cizgi);
    border-radius: 9px;
    background: #fff;
    overflow: hidden;
}

/* Alındı hâli: satırın üstüne yeşil bir kaplama beliriyor. Arka plan
   rengini `--p` ile değiştirmek mümkün değil; opaklık değiştirmek
   mümkün ve ucuz. */
.sim-sip__satir::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid #a7e8c8;
    border-radius: 9px;
    background: #f0fdf6;
    opacity: clamp(0, calc((var(--p, 0) - var(--esik)) / 0.05), 1);
}

/* Satırın kendi içeriği kaplamanın üstünde kalıyor. */
.sim-sip__satir > * { position: relative; z-index: 1; }

.sim-sip__gorsel {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: #eef2f6 center / cover no-repeat;
}

.sim-sip__gorsel[data-urun="ekmek"]    { background-image: url(../assets/tanitim/ekmek.jpg); }
.sim-sip__gorsel[data-urun="sut"]      { background-image: url(../assets/tanitim/sut.jpg); }
.sim-sip__gorsel[data-urun="su"]       { background-image: url(../assets/tanitim/su.jpg); }
.sim-sip__gorsel[data-urun="maydanoz"] { background-image: url(../assets/tanitim/maydanoz.jpg); }
.sim-sip__gorsel[data-urun="yogurt"]   { background-image: url(../assets/tanitim/yogurt.jpg); }

.sim-sip__ad {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 9px;
    font-weight: 600;
    color: #111827;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Adet rozeti: çoklu olan mavi ve kalın. Kaçırılması en pahalı bilgi. */
.sim-sip__adet {
    flex: none;
    padding: 2px 5px;
    border-radius: 6px;
    background: var(--hk-kagit-3);
    font-size: 9px;
    font-weight: 800;
    color: #667085;
}

.sim-sip__adet--coklu { background: #dbe7ff; color: var(--hk-mavi); }

.sim-sip__tik {
    flex: none;
    position: relative;
    width: 15px;
    height: 15px;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    background: #fff;
    text-decoration: none;
}

.sim-sip__tik::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 999px;
    background: var(--hk-yesil);
    opacity: clamp(0, calc((var(--p, 0) - var(--esik)) / 0.05), 1);
}

.sim-sip__tik::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 5px;
    width: 6px;
    height: 3px;
    border: 0 solid #fff;
    border-left-width: 1.6px;
    border-bottom-width: 1.6px;
    transform: rotate(-45deg);
    opacity: clamp(0, calc((var(--p, 0) - var(--esik)) / 0.05), 1);
}

/* ============================================================================
 * PERDE 2: FIRIN
 *
 * Anlatılan şey bir sayı: altmış. Dört dilim çarpı on beş ürün. Panelde
 * satırlar kapalı geliyor, raf ve donuk değerini görmek için her birini
 * tek tek açmak gerekiyor.
 *
 * O yüzden bu sahnede tempo BİLİNÇLİ OLARAK YAVAŞ: satırlar teker teker
 * açılıyor ve sayaç ağır ağır tırmanıyor. Kaydıran kişi altmışı saymıyor,
 * hissediyor. Sonra tek düğme ve deste bir anda açılıp karar kartlarına
 * dönüşüyor.
 *
 * Duraklar:
 *   0.00 - 0.44  satırlar tek tek açılıyor, sayaç tırmanıyor
 *   0.44 - 0.58  replik değişiyor, deste geri çekiliyor
 *   0.54 - 1.00  karar kartları öne geliyor
 * ========================================================================== */

.sim-firin {
    --f1: clamp(0, calc(var(--p, 0) / 0.44), 1);
    --f2: clamp(0, calc((var(--p, 0) - 0.44) / 0.14), 1);
    --f3: clamp(0, calc((var(--p, 0) - 0.54) / 0.24), 1);
    --gecis: var(--f2);
}

/* ── Deste ──
   YEDİ OKUNUR SATIR, ON DÖRT SLİVER DEĞİL.

   Önce on dört satır derinlemesine diziliyordu. Perspektif uzaktakini
   küçültüyor; on dördü birden ekrana sığdırınca hepsi birkaç piksellik
   dilime iniyor ve hiçbiri okunmuyordu. Oysa anlatılmak istenen şey
   satırların GÖRÜNTÜSÜ değil: raf ve donuk değerinin ancak satır açılınca
   ortaya çıkması. Görünmeyen bir değeri göstermeye çalışmanın anlamı yok.
   Sayıyı (altmış) sayaç ve alttaki "53 satır daha" satırı söylüyor.

   Derinlik duruyor ama süs olarak: liste hafifçe geriye yatık. */
/* Liste ve "53 satır daha" yazısı TEK KAPTA.
   Kardeş olduklarında ızgara ikisini ayrı satıra koyuyor ve katman
   yüksekliği boyunca dağıtıyordu: liste 250-516'da, yazı 779-801'de,
   arada 263 piksel boşluk. Yazı listeden kopuk duruyordu. */
.sim-dek-yuva {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-style: preserve-3d;
}

.sim-dek {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: min(88vw, 470px);
    margin: 0;
    padding: 0;
    list-style: none;
    transform-style: preserve-3d;
    transform: rotateX(calc(7deg * var(--sim-egim)))
               translate3d(0, calc(var(--f3) * 30px), calc(var(--f3) * -340px));
    opacity: calc(1 - var(--f3) * 0.9);
}

/* Açılan satır: raf ve donuk değerleri beliriyor, satır belirginleşiyor.
   `--esik` her satırda farklı; sıra bu yüzden teker teker geliyor ve
   sahnenin temposunu belirleyen şey bu oluyor. */
.sim-dek__satir {
    --ac: clamp(0, calc((var(--p, 0) - var(--esik)) / 0.03), 1);
    display: flex;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding: 0 11px;
    border: 1px solid rgb(148 163 184 / calc(0.16 + var(--ac) * 0.36));
    border-radius: 9px;
    background: rgb(17 24 39 / calc(0.6 + var(--ac) * 0.34));
    opacity: calc(0.42 + var(--ac) * 0.58);
}

.sim-dek__gorsel {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: #1f2937 center / cover no-repeat;
}

.sim-dek__gorsel[data-f="f-ekmek"]    { background-image: url(../assets/tanitim/f-ekmek.jpg); }
.sim-dek__gorsel[data-f="f-baget"]    { background-image: url(../assets/tanitim/f-baget.jpg); }
.sim-dek__gorsel[data-f="f-simit"]    { background-image: url(../assets/tanitim/f-simit.jpg); }
.sim-dek__gorsel[data-f="f-kruvasan"] { background-image: url(../assets/tanitim/f-kruvasan.jpg); }
.sim-dek__gorsel[data-f="f-ispanak"]  { background-image: url(../assets/tanitim/f-ispanak.jpg); }
.sim-dek__gorsel[data-f="f-peynirli"] { background-image: url(../assets/tanitim/f-peynirli.jpg); }
.sim-dek__gorsel[data-f="f-rustik"]   { background-image: url(../assets/tanitim/f-rustik.jpg); }

.sim-dek__ad {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 11px;
    font-weight: 600;
    color: var(--hk-ak);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sim-dek__pisir {
    flex: none;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgb(180 83 9 / 0.25);
    font-size: 10px;
    font-weight: 700;
    color: #f0b360;
}

/* Raf ve donuk yalnız satır AÇILINCA görünüyor. Kapalıyken yok olmaları
   anlatının kendisi: o değerler için tıklamak gerekiyor. */
.sim-dek__stok {
    flex: none;
    display: flex;
    gap: 6px;
    opacity: var(--ac);
}

.sim-dek__stok i {
    padding: 2px 6px;
    border-radius: 6px;
    background: rgb(148 163 184 / 0.16);
    font-size: 10px;
    font-style: normal;
    color: var(--hk-ak-soluk);
    white-space: nowrap;
}

.sim-dek__devam {
    width: min(88vw, 470px);
    margin: 12px 0 0;
    font-size: 0.86rem;
    color: var(--hk-ak-soluk);
    text-align: center;
    opacity: calc(1 - var(--f3) * 0.9);
}

.sim-dek__devam strong { color: var(--hk-ak); font-weight: 700; }

/* ── Sayaç ──
   Rakamlar üst üste duruyor, her biri kendi aralığında görünüyor.
   Kaydırma hızını rakam değil ARALIK belirliyor; sayı akmıyor, sayıyor. */
.sim-sayac {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 10px;
}

.sim-sayac s {
    position: relative;
    display: inline-block;
    min-width: 2ch;
    text-align: right;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.sim-sayac s span {
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: calc(
        clamp(0, calc((var(--p, 0) - var(--a)) / 0.008), 1) *
        (1 - clamp(0, calc((var(--p, 0) - var(--b)) / 0.008), 1))
    );
}

.sim-sayac s span:first-child { position: static; }

/* ── Karar kartları ── */
.sim-karar {
    display: flex;
    gap: 12px;
    width: min(92vw, 760px);
    transform-style: preserve-3d;
    opacity: var(--f3);
}

.sim-karar__kart {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border: 1px solid;
    border-radius: 12px;
    background: rgb(17 24 39 / 0.94);
    /* Kartlar sırayla geliyor: `--s` her kartta bir artıyor.

       Kayma eskiden 60/120/180 pikseldi: üçüncü kart giriş sırasında
       sahnenin altından 36 ila 67 piksel taşıyordu. Sıra hissi 26/40/54
       ile de kuruluyor, taşma kalmıyor. */
    transform: translate3d(0, calc((1 - var(--f3)) * (26px + var(--s) * 14px)), 0);
}

.sim-karar__kart em {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #1f2937 center / cover no-repeat;
}

.sim-karar__kart em[data-f="f-ekmek"]    { background-image: url(../assets/tanitim/f-ekmek.jpg); }
.sim-karar__kart em[data-f="f-kruvasan"] { background-image: url(../assets/tanitim/f-kruvasan.jpg); }
.sim-karar__kart em[data-f="f-simit"]    { background-image: url(../assets/tanitim/f-simit.jpg); }

.sim-karar__etiket {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.sim-karar__kart strong {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--hk-ak);
}

.sim-karar__kart small { font-size: 11px; color: var(--hk-ak-soluk); }

.sim-karar__kart--acil  { border-color: rgb(179 35 31 / 0.55); }
.sim-karar__kart--acil  .sim-karar__etiket { color: #f87171; }
.sim-karar__kart--uyari { border-color: rgb(180 83 9 / 0.55); }
.sim-karar__kart--uyari .sim-karar__etiket { color: #f0b360; }
.sim-karar__kart--tamam { border-color: rgb(14 124 88 / 0.55); }
.sim-karar__kart--tamam .sim-karar__etiket { color: #4ade80; }

/* ============================================================================
 * PERDE 3: SAYIM
 *
 * Anlatılan şey mesafe: sayım masada mı yapılıyor, rafın önünde mi. O
 * yüzden bu sahnede kamera GERÇEKTEN yer değiştiriyor; masa geri çekilip
 * koridor öne geliyor.
 *
 * Duraklar:
 *   0.00 - 0.44  masa başı: ara, oku, deftere yaz
 *   0.44 - 0.58  replik değişiyor, masa geri çekiliyor
 *   0.54 - 1.00  rafın önü: telefon, barkod, fark
 * ========================================================================== */

.sim-sayim {
    --s1: clamp(0, calc(var(--p, 0) / 0.44), 1);
    --s2: clamp(0, calc((var(--p, 0) - 0.44) / 0.14), 1);
    --s3: clamp(0, calc((var(--p, 0) - 0.54) / 0.24), 1);
    --gecis: var(--s2);
}

/* Koridor sayım perdesinde durağan başlıyor, sahnenin ikinci yarısında
   kameraya yaklaşıyor: masadan rafa geçiş bu. */
.sim-koridor--yavas {
    transform: translate3d(0, 0, calc(var(--s3, 0) * 900px));
    opacity: calc(0.25 + var(--s3, 0) * 0.75);
}

.sim-masa {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(86vw, 420px);
    transform: translate3d(calc(-18% - var(--s3) * 22%), calc(10% + var(--s3) * 24%),
                           calc(-40px - var(--s3) * 420px))
               rotateY(calc(12deg * var(--sim-egim)));
    opacity: calc(1 - var(--s3) * 0.92);
}

.sim-masa__ekran {
    padding: 12px;
    border: 1px solid rgb(148 163 184 / 0.22);
    border-radius: 12px;
    background: rgb(17 24 39 / 0.95);
}

.sim-masa__arama {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgb(148 163 184 / 0.28);
    border-radius: 9px;
    font-size: 11px;
    color: var(--hk-ak-soluk);
}

.sim-masa__arama i {
    width: 9px;
    height: 9px;
    border: 1.4px solid currentColor;
    border-radius: 999px;
}

.sim-masa__sonuc {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.sim-masa__sonuc li {
    display: flex;
    align-items: center;
    padding: 5px 4px;
    border-bottom: 1px solid rgb(148 163 184 / 0.14);
    font-size: 11px;
    color: var(--hk-ak);
}

.sim-masa__sonuc li.sonuk { opacity: 0.4; }
.sim-masa__sonuc b { margin-left: auto; font-weight: 700; }

/* Defter: her kalem için bir çentik. Altı çentik ağır ağır doluyor. */
.sim-masa__defter {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid rgb(148 163 184 / 0.18);
    border-radius: 10px;
    background: rgb(148 163 184 / 0.07);
}

.sim-masa__defter i {
    width: 14px;
    height: 3px;
    border-radius: 999px;
    background: var(--hk-ak-soluk);
    opacity: clamp(0, calc((var(--p, 0) - var(--esik)) / 0.02), 1);
}

/* ── Rafın önündeki telefon ── */
.sim-raf-telefon {
    transform: translate3d(calc(20% - var(--s3) * 6%), calc(120% - var(--s3) * 104%),
                           calc(-30px + var(--s3) * 110px))
               rotateY(calc((-14deg + var(--s3) * 10deg) * var(--sim-egim)));
    opacity: var(--s3);
}

.sim-sayim-ekran {
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: var(--hk-kagit-2);
}

/* Tarayıcı penceresi: kamera görüntüsü ve okuma çizgisi. */
.sim-sayim__tarayici {
    position: relative;
    height: 58px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: #0b1220;
    overflow: hidden;
}

.sim-sayim__cizgi {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    height: 1.5px;
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
}

.sim-perde.gorunur .sim-sayim__cizgi {
    animation: sim-tara 1.6s var(--motion-ease-standard) infinite;
}

@keyframes sim-tara {
    0%, 100% { transform: translateY(-18px); opacity: 0.4; }
    50%      { transform: translateY(18px); opacity: 1; }
}

.sim-sayim__liste {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Satırlar okundukça listeye düşüyor: aşağıdan gelip yerine oturuyor. */
.sim-sayim__liste li {
    --gel: clamp(0, calc((var(--p, 0) - var(--esik)) / 0.05), 1);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 6px;
    border: 1px solid var(--hk-cizgi);
    border-radius: 7px;
    background: #fff;
    font-size: 9px;
    color: #111827;
    transform: translate3d(0, calc((1 - var(--gel)) * 12px), 0);
    opacity: var(--gel);
}

.sim-sayim__liste em {
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: #eef2f6 center / cover no-repeat;
}

.sim-sayim__liste em[data-urun="sogan"]    { background-image: url(../assets/tanitim/sogan.jpg); }
.sim-sayim__liste em[data-urun="maydanoz"] { background-image: url(../assets/tanitim/maydanoz.jpg); }
.sim-sayim__liste em[data-urun="sos"]      { background-image: url(../assets/tanitim/sos.jpg); }
.sim-sayim__liste em[data-urun="su"]       { background-image: url(../assets/tanitim/su.jpg); }
.sim-sayim__liste em[data-urun="un"]       { background-image: url(../assets/tanitim/un.jpg); }

.sim-sayim__liste span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sim-sayim__liste b { flex: none; font-weight: 700; }

/* Fark: eksikse kırmızı, eşitse gri. Anlam yalnız renkte değil, sayının
   önündeki işarette de duruyor. */
.sim-sayim__liste s {
    flex: none;
    min-width: 22px;
    padding: 1px 4px;
    border-radius: 5px;
    background: #fdecec;
    color: #b3231f;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.sim-sayim__liste s.esit { background: var(--hk-kagit-3); color: var(--hk-soluk); }

/* ============================================================================
 * PERDE 4: BARKOD
 *
 * Kısa perde. Yırtık etiket geri çekiliyor, telefonda ürün adı yazılıp
 * barkod beliriyor.
 *
 * Duraklar:
 *   0.00 - 0.44  yırtık etiket, okunamadı uyarısı
 *   0.44 - 0.58  replik değişiyor
 *   0.54 - 1.00  telefon geliyor, ad yazılıyor, barkod çıkıyor
 * ========================================================================== */

.sim-barkod {
    --b1: clamp(0, calc(var(--p, 0) / 0.44), 1);
    --b2: clamp(0, calc((var(--p, 0) - 0.44) / 0.14), 1);
    --b3: clamp(0, calc((var(--p, 0) - 0.54) / 0.24), 1);
    --gecis: var(--b2);
}

/* Barkod deseni. Düzenli aralıklı çizgi barkod gibi durmuyor; kalınlıklar
   değişince gerçeğe benziyor. */
.sim-etiket-kart__barkod,
.sim-bul__barkod {
    background:
        repeating-linear-gradient(90deg,
            #111827 0 2px, transparent 2px 3px,
            #111827 3px 4px, transparent 4px 7px,
            #111827 7px 10px, transparent 10px 11px,
            #111827 11px 12px, transparent 12px 15px);
}

.sim-etiket-kart {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(78vw, 300px);
    padding: 16px;
    border-radius: 12px;
    background: var(--hk-kagit);
    box-shadow: 0 30px 70px rgb(0 0 0 / 0.5);
    /* Etiketin sağ alt köşesi yırtık: barkodun bir kısmı yok. */
    clip-path: polygon(0 0, 100% 0, 100% 62%, 74% 76%, 88% 88%, 46% 100%, 0 100%);
    transform: translate3d(calc(-16% - var(--b3) * 20%), calc(4% + var(--b3) * 18%),
                           calc(-40px - var(--b3) * 380px))
               rotate(calc(-3deg * var(--sim-egim)));
    opacity: calc(1 - var(--b3) * 0.9);
}

.sim-etiket-kart__gorsel {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: var(--hk-kagit-3) center / cover no-repeat;
}

.sim-etiket-kart__gorsel[data-urun="kaymak"] { background-image: url(../assets/tanitim/kaymak.jpg); }

.sim-etiket-kart__barkod {
    height: 42px;
    border-radius: 3px;
}

.sim-etiket-kart__uyari {
    position: absolute;
    left: 16px;
    top: 16px;
    padding: 4px 9px;
    border-radius: 6px;
    background: var(--hk-kirmizi);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* ── Telefonda arama ── */
/* Telefon alçak pencerede replik yazısının 9 pikselini örtüyordu. Son
   konumu bir tık aşağı alındı; alttan kırpılması sorun değil, üstteki
   yazıyla çakışması sorun. */
.sim-barkod-tel {
    transform: translate3d(calc(20% - var(--b3) * 4%), calc(112% - var(--b3) * 88%),
                           calc(-30px + var(--b3) * 100px))
               rotateY(calc((-14deg + var(--b3) * 10deg) * var(--sim-egim)));
    opacity: var(--b3);
}

.sim-bul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background: var(--hk-kagit-2);
}

.sim-bul__arama {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid var(--hk-cizgi);
    border-radius: 9px;
    background: #fff;
    font-size: 10px;
    color: #111827;
}

.sim-bul__arama i {
    flex: none;
    width: 9px;
    height: 9px;
    border: 1.4px solid var(--hk-soluk);
    border-radius: 999px;
}

/* Yazılan ad harf harf değil, soldan sağa açılarak geliyor: `width`
   animasyonu yerleşim hesaplatır, `clip-path` hesaplatmaz. */
.sim-bul__yazi {
    clip-path: inset(0 calc((1 - var(--b3)) * 100%) 0 0);
    white-space: nowrap;
}

.sim-bul__sonuc {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px;
    border: 1px solid var(--hk-cizgi);
    border-radius: 10px;
    background: #fff;
    /* Sonuç kartı, ad yazıldıktan SONRA beliriyor. */
    opacity: clamp(0, calc((var(--p, 0) - 0.72) / 0.12), 1);
}

.sim-bul__sonuc em {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    background: var(--hk-kagit-3) center / cover no-repeat;
}

.sim-bul__sonuc em[data-urun="kaymak"] { background-image: url(../assets/tanitim/kaymak.jpg); }

.sim-bul__sonuc strong { font-size: 10px; font-weight: 700; color: #111827; }

.sim-bul__barkod {
    height: 36px;
    border-radius: 2px;
}

.sim-bul__no {
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--hk-soluk);
    text-align: center;
}

/* ============================================================================
 * TOPLAM PANOSU
 *
 * Sayfadaki tek rakamın durduğu yer. İki durumu var: sahne oynatılmadan
 * önce boş durum, sonra dolu. Boş durum "burada bir şey yok" demiyor, ne
 * yapılması gerektiğini söylüyor.
 * ========================================================================== */

.sim-toplam {
    margin-top: 2rem;
    border: 1px solid var(--hk-murekkep-cizgi);
    border-radius: 16px;
    background: var(--hk-murekkep-2);
    overflow: hidden;
}

.sim-toplam[data-durum="bos"] .sim-toplam__dolu,
.sim-toplam[data-durum="dolu"] .sim-toplam__bos { display: none; }

.sim-toplam__bos {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px;
}

.sim-toplam__bos svg {
    flex: none;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--hk-ak-soluk);
    stroke-width: 1.6;
    stroke-linecap: round;
}

.sim-toplam__bos p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--hk-ak-soluk);
}

.sim-toplam__bos strong { color: var(--hk-ak); }

.sim-toplam__liste {
    margin: 0;
    padding: 8px 0 0;
    list-style: none;
}

.sim-toplam__liste li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--hk-murekkep-cizgi);
    font-size: 0.95rem;
    color: var(--hk-ak-soluk);
}

.sim-toplam__liste span {
    flex: 1 1 auto;
    min-width: 0;
}

.sim-toplam__liste b {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--hk-ak);
}

.sim-toplam__sonuc {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px;
    text-align: center;
}

.sim-toplam__etiket {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hk-ak-soluk);
}

.sim-toplam__sayi {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #4ade80;
}

.sim-toplam__not { font-size: 0.86rem; color: var(--hk-ak-soluk); }

/* ============================================================================
 * ANLATI ARASI: açık zeminli okuma bölümü
 * Sinematik perdeler arasında göz dinlensin ve iddia yazıyla da kurulsun.
 * ========================================================================== */

.sim-ara {
    padding: clamp(4rem, 9vw, 7.5rem) clamp(1.1rem, 4vw, 2rem);
    background: var(--hk-kagit);
    color: var(--hk-yazi);
}

.sim-ara__ic {
    width: min(100%, var(--hk-en));
    margin: 0 auto;
}

.sim-ara--koyu {
    background: var(--hk-murekkep);
    color: var(--hk-ak);
}

/* Senaryo dosyası gelmediğinde kap boş kalmıyor. */
.sim-eksik {
    padding: 24px;
    border: 1px solid var(--hk-cizgi);
    border-radius: 12px;
    background: var(--hk-kagit-2);
    color: var(--hk-soluk);
    font-size: 13px;
    text-align: center;
}

.sim-ara--koyu .sim-eksik {
    border-color: var(--hk-murekkep-cizgi);
    background: var(--hk-murekkep-2);
    color: var(--hk-ak-soluk);
}

/* ============================================================================
 * DAR EKRAN
 *
 * Masaüstünde cihazlar yan yana duruyor: biri solda eski yöntem, biri
 * sağda yeni. Telefonda o yan yana yer yok; 375 pikselde masa kadrajın
 * 29 piksel dışına taşıyor ve karar kartları üçe bölününce her biri 115
 * piksele düşüyordu.
 *
 * Çözüm yatay kaymayı büyütmek değil KALDIRMAK: dar ekranda iki cihaz da
 * ortada duruyor ve biri sönerken diğeri beliriyor. Aynı yerde geçiş,
 * anlatıyı bozmuyor; zaten ikisi aynı anda gerekli değil.
 * ========================================================================== */

@media (max-width: 767px) {
    .sim-kosan {
        transform: translate3d(0, calc(14% + var(--k3) * 26%),
                               calc(-40px - var(--k3) * 300px))
                   rotateZ(calc((1deg - var(--k1) * 2deg) * var(--sim-egim)));
    }

    .sim-yukselen {
        transform: translate3d(0, calc(110% - var(--k3) * 96%), 0);
    }

    .sim-masa {
        width: min(92vw, 360px);
        transform: translate3d(0, calc(6% + var(--s3) * 20%),
                               calc(-30px - var(--s3) * 300px));
    }

    .sim-raf-telefon {
        transform: translate3d(0, calc(110% - var(--s3) * 96%), 0);
    }

    /* Üç karar kartı alt alta. Yan yana durduklarında her biri 115
       piksele düşüyor ve içindeki üç satır okunmuyor. */
    .sim-karar {
        flex-direction: column;
        width: min(92vw, 400px);
    }

    .sim-karar__kart {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
    }

    .sim-karar__kart em { flex: none; }

    .sim-karar__kart strong { margin-left: auto; font-size: 15px; }

    /* Etiket ve gerekçe dar ekranda tek satıra sığmıyor; gerekçe
       kartın altına değil etiketin altına giriyor. */
    .sim-karar__kart small { display: none; }

    .sim-etiket-kart {
        width: min(80vw, 300px);
        transform: translate3d(0, calc(2% + var(--b3) * 16%),
                               calc(-30px - var(--b3) * 300px));
    }

    .sim-barkod-tel {
        transform: translate3d(0, calc(112% - var(--b3) * 88%), 0);
    }

    .sim-dek { width: min(94vw, 400px); }
    .sim-dek__devam { width: min(94vw, 400px); font-size: 0.8rem; }
    .sim-dek__satir { gap: 6px; padding: 0 8px; }
    .sim-dek__ad { font-size: 10px; }
    .sim-dek__stok i { padding: 2px 4px; font-size: 9px; }
}

/* ============================================================================
 * ALÇAK PENCERE
 *
 * 320x568 gibi kısa ekranlarda replik yazısı üç satıra çıkıyor ve üst
 * boşlukla birlikte sahnenin yarısını yiyor; altta duran öğeler yazının
 * içine giriyordu (barkod perdesinde etiket 7, telefon 17 piksel).
 *
 * Yükseklik bir kırılma noktası olarak ayrıca ele alınıyor: genişlik
 * kuralları burada işe yaramıyor, çünkü sorun dar olmak değil alçak
 * olmak.
 * ========================================================================== */

@media (max-height: 640px) {
    .sim-kat--ust { padding-top: 40px; }

    .sim-repl p { font-size: 0.95rem; }
    .sim-repl .sim-yaka { margin-bottom: 8px; }

    /* Cihazlar ve etiket bir tık aşağı: alttan kırpılmaları sorun değil,
       üstteki yazıyla çakışmaları sorun. */
    .sim-etiket-kart { transform: translate3d(0, calc(10% + var(--b3) * 16%), calc(-30px - var(--b3) * 300px)); }
    .sim-barkod-tel  { transform: translate3d(0, calc(118% - var(--b3) * 80%), 0); }
    .sim-yukselen    { transform: translate3d(0, calc(118% - var(--k3) * 88%), 0); }
    .sim-raf-telefon { transform: translate3d(0, calc(118% - var(--s3) * 88%), 0); }

    .sim-kat--dek { padding-bottom: 32px; }

    /* Kartların giriş kayması alçak pencerede 32 piksellik payı aşıp
       sahnenin altından 9 piksel taşıyordu. */
    .sim-karar__kart {
        transform: translate3d(0, calc((1 - var(--f3)) * (12px + var(--s) * 5px)), 0);
    }
    .sim-dek { gap: 3px; }
    .sim-dek__satir { height: 28px; }
    .sim-dek__devam { margin-top: 8px; font-size: 0.78rem; }
}

/* Yatay telefon (844x390 gibi). Üstte üç satır yazı, altta yedi satırlık
   liste; 390 piksele ikisi birden sığmıyor. Satır sayısını azaltmak
   yerine satırlar inceltiliyor: "53 satır daha" cümlesi ekrandaki
   sayıya dayandığı için satır atmak o cümleyi yanlış yapardı. */
@media (max-height: 460px) {
    .sim-kat--ust { padding-top: 24px; }
    .sim-repl p { font-size: 0.86rem; line-height: 1.4; }
    .sim-repl .sim-yaka { margin-bottom: 5px; padding: 5px 10px; }
    .sim-sayac { margin-top: 5px; }

    .sim-dek { gap: 2px; }
    .sim-dek__satir { height: 24px; gap: 6px; padding: 0 7px; }
    .sim-dek__gorsel { width: 16px; height: 16px; }
    .sim-dek__ad { font-size: 9.5px; }
    .sim-dek__pisir { padding: 1px 5px; font-size: 9px; }
    .sim-dek__stok i { padding: 1px 4px; font-size: 9px; }
    .sim-dek__devam { margin-top: 6px; font-size: 0.72rem; }
    .sim-kat--dek { padding-bottom: 20px; }
}

/* ============================================================================
 * AZALTILMIŞ HAREKET
 *
 * `--p` bire sabitlenmiyor: son kare bazı katmanların sönmüş hâli, o hâlde
 * anlatının yarısı ekrandan kalkardı. Onun yerine yapışma ve derinlik
 * tamamen kalkıyor, katmanlar akışta alt alta diziliyor ve HEPSİ görünür
 * oluyor. Hareket yok, eksik de yok.
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .sim-hazir .sim-perde { height: auto; }

    .sim-hazir .sim-sahne,
    .sim-sahne {
        position: static;
        height: auto;
        min-height: 0;
        padding: clamp(3rem, 7vw, 5rem) 16px;
        perspective: none;
        overflow: visible;
    }

    .sim-kat {
        position: static;
        display: grid;
        justify-items: center;
        gap: 32px;
        margin-top: 32px;
    }

    .sim-kat--zemin { display: none; }

    .sim-perde [style*="--p"],
    .sim-soz,
    .sim-cihaz,
    .sim-fis,
    .sim-yol-cift,
    .sim-yol-cift > div,
    .sim-yol-cift p {
        transform: none !important;
        opacity: 1 !important;
    }

    .sim-fis {
        position: static;
        width: min(320px, 88vw);
        margin: 0 auto;
    }

    .sim-yol-cift {
        position: static;
        gap: 32px;
        padding: 0;
    }

    .sim-ipucu { display: none; }
    .sim-ipucu i { animation: none; }

    /* Toplama perdesi: koridor akışı kalkıyor, iki replik de alt alta
       duruyor, iki cihaz da görünür, liste toplanmış hâlde. Hareket
       gitti, anlatı yerinde. */
    .sim-koridor { display: none; }

    .sim-repl__a,
    .sim-repl__b {
        position: static;
        transform: none !important;
        opacity: 1 !important;
    }

    .sim-repl__b { margin-top: 28px; }

    .sim-kosan,
    .sim-yukselen {
        transform: none !important;
        opacity: 1 !important;
    }

    .sim-sip__cubuk i { transform: scaleX(1); }

    .sim-sip__satir::after,
    .sim-sip__tik::before,
    .sim-sip__tik::after { opacity: 1; }

    /* Fırın perdesi: deste akışta alt alta, hepsi açık; karar kartları
       görünür. Sayaç yalnız varılan sayıyı gösteriyor, çünkü anlatılan
       şey tırmanış değil altmışın kendisi. */
    .sim-dek {
        display: flex;
        flex-direction: column;
        gap: 6px;
        transform: none !important;
        opacity: 1 !important;
    }

    .sim-dek__satir {
        position: static;
        margin-top: 0;
        transform: none !important;
        opacity: 1 !important;
    }

    .sim-dek__stok,
    .sim-dek__devam { opacity: 1; }

    .sim-dek-yuva { transform: none !important; }

    .sim-karar { opacity: 1 !important; }
    .sim-karar__kart { transform: none !important; }

    .sim-sayac s span { opacity: 0; }
    .sim-sayac s span:last-child { position: static; opacity: 1; }
    .sim-sayac s span:first-child:not(:last-child) { display: none; }

    /* Sayım perdesi: masa da raf da görünür, defter dolu, liste dolu. */
    .sim-masa,
    .sim-raf-telefon {
        transform: none !important;
        opacity: 1 !important;
    }

    .sim-masa__defter i { opacity: 1; }

    .sim-sayim__liste li {
        transform: none !important;
        opacity: 1 !important;
    }

    .sim-sayim__cizgi,
    .sim-perde.gorunur .sim-sayim__cizgi { animation: none; }

    /* Barkod perdesi: yırtık etiket de telefon da görünür, ad tam yazılı,
       sonuç kartı açık. */
    .sim-etiket-kart,
    .sim-barkod-tel {
        transform: none !important;
        opacity: 1 !important;
    }

    .sim-bul__yazi { clip-path: none; }
    .sim-bul__sonuc { opacity: 1; }
}