/**
 * Jet Barkod. Karşılaştırma sahnesi.
 * ============================================================================
 *
 * Solda eski yöntem, sağda Jet Barkod. İkisi aynı anda başlar, aynı saati
 * paylaşır. Biri bitince bayrağını çeker ve kronometresi durur; diğeri
 * saymaya devam eder. Aradaki fark rakamla ortada kalır.
 *
 * TEK SAAT
 * İki kronometre ayrı sayaçlar değil. Tek bir başlangıç damgası var,
 * her çizim karesinde ikisi de aynı damgadan hesaplanıyor. Bu yüzden
 * "aynı anda başlama" iddiası gerçekten doğru; iki zamanlayıcı arasında
 * kayma olmuyor.
 *
 * KAYMA YOK
 * Sahne kutusunun oranı sabit. Ekranlar üst üste duruyor, biri diğerinin
 * yerini almıyor; yalnız görünürlükleri değişiyor. İmleç, göz ve bayrak
 * transform ile hareket ediyor. Adım listesi de baştan tam boyunda
 * yazılıyor, satırlar sonradan eklenmiyor.
 *
 * HAREKET TERCİHİ
 * `prefers-reduced-motion` açıksa canlandırma hiç oynatılmıyor; iki taraf
 * da son hâliyle ve bitiş süreleriyle gösteriliyor. Anlatılan şey
 * kayboluyor değil, hareketsiz duruyor.
 * ============================================================================
 */

.krs {
    /* Renkler hakkımızda sayfasıyla aynı: kırık beyaz kağıt, mürekkep
       siyahı, markanın mavisi. İki renk arası degrade yok. */
    --krs-cizgi: #e4e1d8;
    --krs-yumusak: #f7f6f2;
    --krs-yazi: #131720;
    --krs-soluk: #5b6472;
    --krs-cok-soluk: #8b909a;
    --krs-eski: #8a6420;
    --krs-eski-soft: #faf6ec;
    --krs-yeni: #0e7c58;
    --krs-yeni-soft: #eef7f2;
    --krs-mor: #135bec;
    --krs-yumusak-gecis: cubic-bezier(0.22, 1, 0.36, 1);

    margin-top: 2.4rem;
    border: 1px solid var(--krs-cizgi);
    border-radius: 1.2rem;
    background: #fff;
    overflow: hidden;
}

/* ---------- Üst şerit ---------- */

.krs__ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    padding: 0.95rem 1.15rem;
    border-bottom: 1px solid var(--krs-cizgi);
    background: var(--krs-yumusak);
}

.krs__ad {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.012em;
    color: var(--krs-yazi);
}

.krs__bosluk { flex: 1; }

/* Yazı "Oynat", "Oynuyor" ve "Tekrar oynat" arasında geçiyor. Genişlik
   sabitlenmezse üst şerit her seferinde biraz kayıyor. */
/* ---------- Oynat perdesi ----------
   Küçük bir köşe düğmesi kimsenin gözüne çarpmıyordu. Sahnenin tam
   ortasında, video oynatıcı gibi duran büyük bir düğme var artık.
   Sahne görüş alanına girdiğinde halkası genişleyerek dikkat çekiyor. */

.krs__alan { position: relative; }

.krs__perde {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    gap: 0.9rem;
    background: rgb(248 250 252 / 0.72);
    -webkit-backdrop-filter: blur(2px) saturate(120%);
    backdrop-filter: blur(2px) saturate(120%);
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 260ms ease;
}

.krs__perde[hidden] { display: none; }
.krs__perde.gizli { opacity: 0; pointer-events: none; }

.krs__oynat {
    position: relative;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--krs-mor);
    color: #fff;
    box-shadow: 0 14px 34px -12px rgb(93 62 188 / 0.75);
    transition: transform 200ms var(--krs-yumusak-gecis), background 200ms ease;
}

.krs__perde:hover .krs__oynat { transform: scale(1.06); background: #4c31a0; }
.krs__perde:active .krs__oynat { transform: scale(0.98); }
.krs__perde:focus-visible { outline: 3px solid var(--krs-mor); outline-offset: -4px; }

.krs__oynat svg { width: 30px; height: 30px; margin-left: 4px; }

/* Genişleyen halka: sahne göründüğünde çalışıyor, sonra duruyor. */
.krs__oynat::before,
.krs__oynat::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--krs-mor);
    opacity: 0;
}

.krs.gorunur .krs__oynat::before { animation: krs-halka 2.6s ease-out infinite; }
.krs.gorunur .krs__oynat::after { animation: krs-halka 2.6s ease-out 1.3s infinite; }

@keyframes krs-halka {
    0%   { opacity: 0.55; transform: scale(1); }
    70%  { opacity: 0; transform: scale(1.9); }
    100% { opacity: 0; transform: scale(1.9); }
}

.krs__perde-yazi {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--krs-yazi);
    text-align: center;
}

.krs__perde-alt {
    margin-top: -0.55rem;
    font-size: 0.76rem;
    color: var(--krs-soluk);
    text-align: center;
}

/* ---------- Bitiş hâli ----------
   Oynatma bitince büyük perde GERİ GELMİYOR. Geri gelseydi son kareyi,
   bayrakları ve süreleri örterdi; izleyici sonucu göremeden ekran
   kapanıyordu. Onun yerine köşede küçük bir tekrar düğmesi beliriyor,
   sahne olduğu gibi açıkta kalıyor. */

/* Sonuç şeridinde duruyor: her genişlikte sonucun hemen yanında,
   sahnenin hiçbir yerini örtmüyor. Yer baştan ayrılmış, görünürlük
   değişince şerit uzayıp kısalmıyor. */
.krs__tekrar {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, 6px, 0);
    transition: opacity 260ms ease, transform 320ms var(--krs-yumusak-gecis),
                background 160ms ease;
}

.krs__tekrar.acik {
    visibility: visible;
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.krs__tekrar:hover { background: #1e293b; }
.krs__tekrar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.krs__tekrar svg { width: 0.85rem; height: 0.85rem; }

/* Kazanan şerit: sonucu tek bakışta okutan yumuşak bir çerçeve. */
.krs__serit { position: relative; }

.krs__serit::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 2px solid transparent;
    transition: border-color 420ms ease, box-shadow 420ms ease;
}

.krs__serit--yeni.kazandi::after {
    border-color: rgb(4 120 87 / 0.55);
    box-shadow: inset 0 0 34px -12px rgb(4 120 87 / 0.55);
}

/* Sonuç şeridi bitince öne çıkıyor. */
.krs__sonuc {
    transition: background 420ms ease, border-color 420ms ease;
}

.krs__sonuc.bitti {
    background: var(--krs-yeni-soft);
    border-top-color: #b9ddcc;
}

.krs__fark {
    transform: scale(0.94);
    transition: opacity 320ms ease, transform 420ms var(--krs-yumusak-gecis);
}

.krs__fark.acik { transform: scale(1); }

/* ---------- İki şerit ---------- */

/*
 * `minmax(0, 1fr)` şart. Düz `1fr` en az içerik genişliğinin altına
 * inemiyor; başlıktaki etiket ve kronometre yan yana sığmayınca ız
 * büyüyor ve şerit kabından taşıp kırpılıyordu. Dar ekranda 340 piksellik
 * kutuya 361 piksellik şerit giriyordu.
 */
.krs__alan {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.krs__serit { min-width: 0; }

@media (min-width: 820px) {
    .krs__alan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .krs__serit + .krs__serit { border-left: 1px solid var(--krs-cizgi); }
}

.krs__serit + .krs__serit { border-top: 1px solid var(--krs-cizgi); }

@media (min-width: 820px) {
    .krs__serit + .krs__serit { border-top: none; }
}

.krs__baslik {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.8rem 1.05rem;
    border-bottom: 1px solid var(--krs-cizgi);
}

.krs__etiket {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.krs__etiket { flex: none; }
.krs__serit--eski .krs__etiket { color: var(--krs-eski); }
.krs__serit--yeni .krs__etiket { color: var(--krs-yeni); }

/* Çok dar ekranda etiket ile şerit adı yan yana sığmıyor. Etiket gidiyor;
   hangi tarafın hangisi olduğu zaten şerit adından ve renginden belli. */
@media (max-width: 430px) {
    .krs__etiket { display: none; }
    .krs__saat { min-width: 4.9rem; font-size: 0.78rem; }
    .krs__baslik { padding-left: 0.8rem; padding-right: 0.8rem; }
}

.krs__serit-ad {
    flex: 1;
    min-width: 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--krs-soluk);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Kronometre sabit genişlikte: rakam değişince başlık kaymaz. */
.krs__saat {
    flex: none;
    min-width: 5.4rem;
    padding: 0.24rem 0.55rem;
    border-radius: 0.45rem;
    background: #0f172a;
    color: #e2e8f0;
    font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace;
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    transition: background 260ms ease, color 260ms ease;
}

.krs__saat.bitti { background: var(--krs-yeni); color: #fff; }
.krs__serit--eski .krs__saat.bitti { background: #78716c; }

/* ---------- Sahne ---------- */

.krs__sahne {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--krs-yumusak);
    overflow: hidden;
}

/* Ekranlar üst üste; biri diğerinin yerini almıyor. */
/*
 * Ekranlar üst üste duruyor. Geçiş kısa: uzun tutulduğunda yeni ekranın
 * içeriği eskisinin üstünde okunacak kadar uzun görünüyor ve "daha
 * gelmeden geldi" hissi veriyordu.
 */
.krs__ekran {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 120ms ease;
    pointer-events: none;
}

.krs__ekran.acik { opacity: 1; }

.krs__ekran svg { display: block; width: 100%; height: 100%; }

/* ---------- Yükleniyor perdesi ---------- */

.krs__yukleniyor {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    gap: 0.6rem;
    background: rgb(248 250 252 / 0.82);
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}

.krs__yukleniyor.acik { opacity: 1; }

.krs__cark {
    width: 26px;
    height: 26px;
    border: 3px solid #dbeafe;
    border-top-color: var(--krs-mor);
    border-radius: 50%;
    animation: krs-don 900ms linear infinite;
}

@keyframes krs-don { to { transform: rotate(360deg); } }

.krs__yukleniyor span {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--krs-cok-soluk);
}

/* ---------- Göz odağı ---------- */

/*
 * Personelin gözünün nereye baktığını gösterir. Karartma değil, tersi:
 * bakılan yer olduğu gibi kalır, gerisi hafifçe soluklaşır. Sert bir
 * spot ışığı bilgiyi okunmaz hâle getiriyordu.
 */
.krs__goz {
    position: absolute;
    top: 0;
    left: 0;
    width: 84px;
    height: 84px;
    margin: -42px 0 0 -42px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transition: transform 520ms var(--krs-yumusak-gecis), opacity 260ms ease;
    background: radial-gradient(circle,
        rgb(19 91 236 / 0.15) 0%,
        rgb(19 91 236 / 0.08) 42%,
        rgb(19 91 236 / 0) 68%);
    box-shadow: inset 0 0 0 1.5px rgb(19 91 236 / 0.26);
}

.krs__goz.acik { opacity: 1; }

.krs__goz::after {
    content: '';
    position: absolute;
    inset: 26px;
    border-radius: 50%;
    border: 1.5px solid rgb(37 99 235 / 0.4);
    animation: krs-goz 2.2s ease-in-out infinite;
}

@keyframes krs-goz {
    0%, 100% { transform: scale(0.82); opacity: 0.85; }
    50%      { transform: scale(1.06); opacity: 0.35; }
}

/* ---------- İmleç ---------- */

.krs__imlec {
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transition: transform 520ms var(--krs-yumusak-gecis), opacity 200ms ease;
    filter: drop-shadow(0 2px 3px rgb(15 23 42 / 0.32));
    z-index: 3;
}

.krs__imlec.acik { opacity: 1; }

/* Tıklama halkası: imlecin ucundan açılır. */
.krs__tik {
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    border: 2px solid var(--krs-mor);
    pointer-events: none;
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.2);
    z-index: 2;
}

.krs__tik.calis { animation: krs-tik 460ms ease-out; }

@keyframes krs-tik {
    0%   { opacity: 0.9; transform: translate3d(var(--x), var(--y), 0) scale(0.2); }
    100% { opacity: 0;   transform: translate3d(var(--x), var(--y), 0) scale(1.35); }
}

/* ---------- Bayrak ---------- */

.krs__bayrak {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 62px;
    height: 62px;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.8);
    transition: opacity 320ms ease, transform 520ms var(--krs-yumusak-gecis);
    z-index: 4;
}

.krs__bayrak.acik { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

.krs__bayrak .bez {
    transform-box: fill-box;
    transform-origin: left center;
    animation: krs-dalgalan 1.5s ease-in-out infinite;
}

@keyframes krs-dalgalan {
    0%, 100% { transform: skewY(0deg) scaleX(1); }
    30%      { transform: skewY(-4.5deg) scaleX(0.965); }
    70%      { transform: skewY(4deg) scaleX(0.985); }
}

/* ---------- Adım listesi ---------- */

.krs__adimlar {
    margin: 0;
    padding: 0.7rem 0.85rem 0.9rem;
    list-style: none;
    border-top: 1px solid var(--krs-cizgi);
    background: #fff;
}

.krs__adim {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.2rem 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--krs-cok-soluk);
    transition: color 220ms ease;
}

.krs__adim.gecti { color: var(--krs-soluk); }

/*
 * Sıradaki adım koyulaşıyor ama KALINLAŞMIYOR. Kalın yazı daha geniş
 * olduğu için satır bir alta sarıyor, satır yüksekliği değişiyor ve liste
 * zıplıyordu. Vurgu rengi ve noktadaki halka yeterli.
 */
.krs__adim.simdi { color: var(--krs-yazi); }

/* Nokta üç durumda da aynı boyda: satır genişliği hiç oynamıyor. */
.krs__adim-nokta {
    width: 6px;
    height: 6px;
    flex: none;
    margin-top: 0.42rem;
    border-radius: 50%;
    background: #e2e8f0;
    transition: background 220ms ease, box-shadow 220ms ease;
}

.krs__adim.gecti .krs__adim-nokta { background: #cbd5e1; }

.krs__serit--eski .krs__adim.simdi .krs__adim-nokta {
    background: var(--krs-eski);
    box-shadow: 0 0 0 3px rgb(180 83 9 / 0.15);
}

.krs__serit--yeni .krs__adim.simdi .krs__adim-nokta {
    background: var(--krs-yeni);
    box-shadow: 0 0 0 3px rgb(4 120 87 / 0.15);
}

/* Satır sayısı baştan belli; liste sonradan uzamıyor. */
.krs__adim-yazi { flex: 1; min-width: 0; }

/* ---------- Sonuç ---------- */

.krs__sonuc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.1rem;
    padding: 0.9rem 1.15rem;
    border-top: 1px solid var(--krs-cizgi);
    background: var(--krs-yumusak);
    font-size: 0.85rem;
    color: var(--krs-soluk);
    /* Fark rozeti sonradan görünür olsa da yükseklik sabit kalsın. */
    min-height: 3.4rem;
}

/* Senaryoya özel vurgu cümlesi. Fark rozetiyle aynı anda beliriyor. */
.krs__vurgu {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border: 1px solid #fde68a;
    border-radius: 0.5rem;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 320ms ease;
}

.krs__vurgu.acik { opacity: 1; }

/* Rozet baştan yer kaplıyor, yalnız görünürlüğü değişiyor. */
.krs__fark { min-width: 11.5rem; min-height: 1.75rem; justify-content: center; }

.krs__fark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.28rem 0.65rem;
    border-radius: 0.5rem;
    background: var(--krs-yeni-soft);
    border: 1px solid #a7f3d0;
    color: var(--krs-yeni);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transition: opacity 320ms ease;
}

.krs__fark.acik { opacity: 1; }

.krs__fark small { font-size: 0.72rem; font-weight: 600; }

/* ---------- Sahne dili ---------- */

.krs g, .krs rect, .krs path, .krs circle, .krs text { vector-effect: non-scaling-stroke; }

.krs .p-zemin { fill: #f1f5f9; }
.krs .p-kart { fill: #fff; stroke: #e2e8f0; stroke-width: 1; }
.krs .p-mor { fill: #5d3ebc; }
.krs .p-sari { fill: #ffd300; }
.krs .p-cizgi { stroke: #e2e8f0; stroke-width: 1; fill: none; }
.krs .p-gri { fill: #e2e8f0; }
.krs .p-koyu { fill: #0f172a; }
.krs .p-soluk { fill: #94a3b8; }
.krs .p-yazi { font-family: inherit; font-size: 6.5px; fill: #475569; }
.krs .p-yazi--kalin { font-weight: 700; fill: #0f172a; }
.krs .p-yazi--ak { fill: #fff; }
.krs .p-yazi--kucuk { font-size: 5.5px; }
.krs .p-vurgu { fill: #eff6ff; stroke: #2563eb; stroke-width: 1; }
.krs .p-yesil { fill: #059669; }
.krs .p-kirmizi { fill: #dc2626; }

/* El yazısı. Elde tutulan sayım defteri için: sistemin ürettiği yazıyla
   karışmasın diye ayrı bir yazı tipi ve mürekkep rengi. Dış yazı tipi
   indirilmiyor, işletim sisteminin el yazısı yüzü kullanılıyor. */
.krs .el-yazisi {
    font-family: 'Bradley Hand', 'Segoe Script', 'Snell Roundhand', 'Comic Sans MS', cursive;
    fill: #1e3a8a;
    font-weight: 600;
}

.krs .el-yazisi--kirmizi { fill: #b91c1c; }

@media (prefers-reduced-motion: reduce) {
    .krs__ekran,
    .krs__imlec,
    .krs__goz,
    .krs__bayrak,
    .krs__yukleniyor { transition: none !important; }

    .krs__cark,
    .krs__goz::after,
    .krs__bayrak .bez,
    .krs__tik { animation: none !important; }

    .krs__ekran.acik .jb-kaydir,
    .krs__ekran.acik .jb-kaydir-cubuk { animation: none !important; }
}


/* 380px altında fark rozeti şeridi 360 piksele zorluyordu; sayfa yatay
   kayıyordu. Rozet burada daralıyor, yükseklik aynı kalıyor. */
@media (max-width: 380px) {
    .krs__fark { min-width: 8.6rem; }
    .krs__saat { min-width: 4.4rem; }
}

/* ==========================================================================
   Sonuç ızgarasının kaydırılması (barkod sahnesi, sağ şerit)
   ==========================================================================
   "35 ürün geldi" yazmak yetmiyordu; ziyaretçi ilk dört kartı görüp
   gerisini hayal ediyordu. Kartlar kırpma alanının içinde yukarı kayıyor,
   bütün liste gözünün önünden geçiyor.

   Kayma yalnızca ekran açıkken oynuyor. Kapalı ekranlarda animasyon hiç
   başlamıyor, arka planda kare harcanmıyor. `forwards` sayesinde adım
   bitince liste sonda kalıyor, başa zıplamıyor. */

.krs__ekran .jb-kaydir,
.krs__ekran .jb-kaydir-cubuk { transform: translateY(0); }

.krs__ekran.acik .jb-kaydir {
    animation: krs-urun-kaydir 2400ms cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

.krs__ekran.acik .jb-kaydir-cubuk {
    animation: krs-urun-cubuk 2400ms cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

@keyframes krs-urun-kaydir {
    0%, 10% { transform: translateY(0); }
    100% { transform: translateY(-260px); }
}

@keyframes krs-urun-cubuk {
    0%, 10% { transform: translateY(0); }
    100% { transform: translateY(84px); }
}