/* =====================================================================
   ÇEKİLİŞ SİSTEMİ · ATM TERMİNAL ARAYÜZÜ
   ---------------------------------------------------------------------
   Tüm yönetim ekranları tek bir kiosk kabuğu içinde çalışır:

     body.atm-page
       └─ .atm                (kasa / bezel)
            └─ .atm-screen    (cam yüzey)
                 ├─ .atm-top  (marka · menü · oturum)  - tek satır
                 ├─ .atm-body (sayfa içeriği)
                 └─ .atm-foot (durum şeridi)

   Gövdenin iki modu vardır:

     .atm-body--fit   Ekrana tam sığar. Sayfa hiç kaydırılmaz; içerik
                      kalan yüksekliği paylaşır (anasayfa, çekiliş).
     .atm-body--flow  İçerik uzun olabilir; yalnızca gövde kaydırılır,
                      üst ve alt şerit sabit kalır (ayarlar, listeler).

   Dikey ölçüler vh tabanlı clamp() ile verilir: 1920x1080'de ferah,
   dizüstü yüksekliklerinde otomatik sıkışır. Hiçbir ekranda taşma veya
   sayfa kayması oluşmaz.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) Tasarım değişkenleri
   --------------------------------------------------------------------- */
:root {
    /* Kasa (bezel) */
    --shell-1: #32363d;
    --shell-2: #1b1e23;
    --shell-3: #0d0f12;
    --room: #06080a;

    /* Ekran yüzeyleri */
    --screen-1: #14456e;
    --screen-2: #0a2a48;
    --screen-3: #06192c;
    --surface: rgba(255, 255, 255, .055);
    --surface-2: rgba(255, 255, 255, .085);
    --surface-3: rgba(255, 255, 255, .13);

    /* Metin */
    --ink: #f4f9fe;
    --ink-2: #b6cfe4;
    --ink-3: #8fadc4;

    /* Çizgiler */
    --line: rgba(150, 199, 235, .2);
    --line-2: rgba(150, 199, 235, .34);
    --line-3: rgba(150, 199, 235, .52);

    /* Vurgu ve durumlar */
    --key: #38bdf8;
    --key-2: #7dd3fc;
    --key-ink: #04263a;
    --key-soft: rgba(56, 189, 248, .14);
    --key-line: rgba(56, 189, 248, .42);

    --ok: #34d399;
    --ok-ink: #d8fbec;
    --ok-soft: rgba(52, 211, 153, .13);
    --ok-line: rgba(52, 211, 153, .34);

    --warn: #fbbf24;
    --warn-ink: #fdefd0;
    --warn-soft: rgba(251, 191, 36, .13);
    --warn-line: rgba(251, 191, 36, .34);

    --bad: #fb7185;
    --bad-ink: #ffe0e4;
    --bad-soft: rgba(251, 113, 133, .13);
    --bad-line: rgba(251, 113, 133, .36);

    /* Yerleşim ölçüleri */
    --radius-xl: 20px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 9px;
    --radius-pill: 980px;
    --tap: 46px;
    --content-max: 1560px;

    /* Dikey ritim: yüksekliğe göre nefes alır */
    --pad-y: clamp(16px, 2.4vh, 30px);
    --pad-x: clamp(16px, 2vw, 36px);
    --gap: clamp(16px, 2.1vh, 24px);
    --gap-sm: clamp(9px, 1.2vh, 14px);

    /* Gölge */
    --lift-1: 0 1px 2px rgba(0, 0, 0, .3);
    --lift-2: 0 10px 24px -14px rgba(0, 0, 0, .75);
    --lift-3: 0 22px 48px -24px rgba(0, 0, 0, .8);
    --glow: 0 0 0 1px var(--key-line), 0 14px 30px -18px rgba(56, 189, 248, .55);

    /* Hareket */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --fast: .16s;
    --mid: .26s;
}

/* ---------------------------------------------------------------------
   2) Temel
   --------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--room);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: break-word;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.25;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Bileşen sınıflarındaki display kuralları tarayıcının [hidden] kuralını
   ezmesin (örn. çekiliş sonuç paneli açılana kadar gizli kalmalı). */
[hidden] { display: none !important; }

a {
    color: var(--key-2);
    text-decoration: none;
}

a:hover { text-decoration: underline; }

img, svg { max-width: 100%; }

:focus-visible {
    outline: 2px solid var(--key-2);
    outline-offset: 2px;
    border-radius: 6px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: -100px;
    left: 14px;
    z-index: 300;
    padding: 12px 18px;
    color: var(--key-ink);
    background: var(--key-2);
    border-radius: var(--radius-md);
    font-weight: 650;
    transition: top var(--fast) var(--ease);
}

.skip-link:focus {
    top: 14px;
    text-decoration: none;
}

.num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* Kalan alanı dolduran ve kendi içinde küçülebilen bölge */
.fill {
    flex: 1 1 auto;
    min-height: 0;
}

/* Genişlik sınırlayıcı aynı zamanda esnek alan ise dikey kolon olur;
   böylece içindeki panel kalan yüksekliği alabilir. */
.wrap.fill {
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------------
   3) Kiosk kabuğu
   --------------------------------------------------------------------- */
body.atm-page {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    padding: clamp(8px, 1.1vh, 16px) clamp(8px, .8vw, 16px);
    padding-top: max(clamp(8px, 1.1vh, 16px), env(safe-area-inset-top));
    padding-bottom: max(clamp(8px, 1.1vh, 16px), env(safe-area-inset-bottom));
    background: radial-gradient(120% 80% at 50% -20%, #12161b 0%, var(--room) 70%);
    overflow: hidden;
}

.atm {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    padding: clamp(6px, .8vh, 12px);
    background: linear-gradient(180deg, var(--shell-1) 0%, var(--shell-2) 45%, var(--shell-3) 100%);
    border-radius: clamp(16px, 1.8vh, 24px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1),
                inset 0 -1px 0 rgba(0, 0, 0, .6),
                var(--lift-3);
}

.atm-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    color: var(--ink);
    background: radial-gradient(135% 115% at 50% -15%, var(--screen-1) 0%, var(--screen-2) 45%, var(--screen-3) 100%);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: clamp(11px, 1.3vh, 18px);
}

/* İnce teknik ızgara + cam parlaması */
.atm-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(to right, rgba(150, 199, 235, .045) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(to bottom, rgba(150, 199, 235, .045) 1px, transparent 1px) 0 0 / 48px 48px;
    pointer-events: none;
}

/* Köşe vinyeti */
.atm-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 100% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .32) 100%);
    pointer-events: none;
}

.atm-screen > * {
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------------------
   4) Üst şerit — tek satır: marka | menü | oturum
   --------------------------------------------------------------------- */
.atm-top {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px clamp(14px, 1.6vw, 26px);
    padding: clamp(9px, 1.3vh, 15px) var(--pad-x);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0));
}

.atm-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.atm-brand:hover { color: var(--ink); text-decoration: none; }

.atm-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    color: var(--key-ink);
    background: linear-gradient(160deg, var(--key-2), var(--key));
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 6px 14px -8px rgba(56, 189, 248, .8);
    font-size: 15px;
}

.atm-brand-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Oturum bloğu */
.atm-session {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 12px;
    min-width: 0;
}

/* Mağaza seçimi: terminalin durduğu şube üst şeritten seçilir */
.magaza-secim {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 4px 6px 4px 12px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-pill);
    transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.magaza-secim:hover,
.magaza-secim:focus-within {
    background: var(--surface-2);
    border-color: var(--line-3);
}

/* Şube seçilmediyse dikkat çeker: teslim kaydı şubesiz düşer */
.magaza-secim.is-empty {
    background: var(--warn-soft);
    border-color: var(--warn-line);
}

.magaza-secim-etiket {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--ink-3);
    font-size: 13px;
    cursor: pointer;
}

.magaza-secim.is-empty .magaza-secim-etiket { color: var(--warn); }

/* Kutunun kendisi şeritle bütünleşir: çerçevesi ve zemini yoktur */
.magaza-secim select,
.magaza-secim select:hover,
.magaza-secim select:focus {
    width: auto;
    max-width: 26ch;
    min-height: 30px;
    padding: 0 26px 0 2px;
    color: var(--ink);
    background-color: transparent;
    background-position: right 8px center, right 3px center;
    border: 0;
    border-radius: var(--radius-pill);
    box-shadow: none;
    outline: none;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    cursor: pointer;
}

.magaza-secim select:focus-visible {
    outline: 2px solid var(--key-2);
    outline-offset: 2px;
}

/* Açılan listede seçenekler koyu zeminde okunur kalsın */
.magaza-secim select option {
    color: var(--ink);
    background: #0a2540;
}

.magaza-secim.is-empty select { color: var(--warn-ink); }

.atm-exit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 14px;
    color: var(--bad-ink);
    background: var(--bad-soft);
    border: 1px solid var(--bad-line);
    border-radius: var(--radius-pill);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}

.atm-exit:hover,
.atm-exit:focus-visible {
    color: #fff;
    background: rgba(251, 113, 133, .28);
    text-decoration: none;
}

/* ---------------------------------------------------------------------
   5) Ekran gövdesi — iki mod
   --------------------------------------------------------------------- */
.atm-body {
    flex: 1 1 auto;
    min-height: 0;
}

.atm-body-inner {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: var(--pad-y) var(--pad-x);
}

/* --- Sığdırma modu: sayfa hiç kaydırılmaz --- */
.atm-body--fit { overflow: hidden; }

.atm-body--fit .atm-body-inner {
    height: 100%;
    min-height: 0;
}

/* Sığdırma modunda sabit yükseklikli bloklar küçülmez; kalan alanı
   yalnızca .fill taşıyan bölge doldurur. */
.atm-body--fit .atm-body-inner > .wrap:not(.fill),
.atm-body--fit .atm-body-inner > .prompt,
.atm-body--fit .atm-body-inner > .alert-stack { flex: 0 0 auto; }

/* --- Akış modu: yalnızca gövde kaydırılır --- */
.atm-body--flow {
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;   /* kaydırma çubuğu açılırken kayma olmaz */
    scrollbar-width: thin;
}

.atm-body--flow::-webkit-scrollbar { width: 10px; }
.atm-body--flow::-webkit-scrollbar-thumb {
    background: rgba(150, 199, 235, .22);
    border: 3px solid transparent;
    border-radius: 99px;
    background-clip: content-box;
}

.atm-body--flow .atm-body-inner { min-height: 100%; }
.atm-body--flow .atm-body-inner.is-centered { justify-content: center; }

/* İçerik genişlik sınırı */
.wrap {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
}

.wrap--narrow { max-width: 900px; }
.wrap--form { max-width: 1120px; }

/* ---------------------------------------------------------------------
   6) Ekran başlığı
   --------------------------------------------------------------------- */
.screen-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 22px;
}

.eyebrow {
    display: block;
    margin-bottom: 7px;
    color: var(--key-2);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.screen-head h1 {
    font-size: clamp(22px, 3vh, 33px);
    font-weight: 650;
    letter-spacing: -.03em;
}

.screen-head .sub {
    margin-top: 6px;
    max-width: 78ch;
    color: var(--ink-2);
    font-size: clamp(13.5px, 1.6vh, 15px);
}

.screen-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Ortalanmış yönlendirme metni (kiosk soru ekranı) */
.prompt {
    flex: 0 0 auto;
    text-align: center;
}

.prompt .eyebrow {
    margin-bottom: 7px;
    letter-spacing: .18em;
}

.prompt h1 {
    font-size: clamp(21px, 3.2vh, 34px);
    letter-spacing: -.025em;
}

.prompt p {
    max-width: 66ch;
    margin: clamp(6px, 1vh, 11px) auto 0;
    color: var(--ink-2);
    font-size: clamp(13px, 1.6vh, 15px);
}

/* ---------------------------------------------------------------------
   7) Alt şerit: firma bilgisi + menü bağlantıları
   --------------------------------------------------------------------- */
.atm-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 20px;
    flex: 0 0 auto;
    padding: clamp(8px, 1.2vh, 13px) var(--pad-x);
    border-top: 1px solid var(--line);
    background: linear-gradient(0deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0));
    color: var(--ink-3);
    font-size: 12px;
    letter-spacing: .03em;
}

.atm-foot-brand {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Menü: sade metin bağlantılar, aralarında ince ayırıcı */
.foot-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 0;
    min-width: 0;
}

.foot-link {
    position: relative;
    padding: 3px 13px;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 550;
    letter-spacing: 0;
    white-space: nowrap;
    border-radius: 6px;
    transition: color var(--fast) var(--ease);
}

/* Bağlantılar arası ayırıcı çizgi */
.foot-link + .foot-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 12px;
    margin-top: -6px;
    background: var(--line-2);
}

.foot-link:hover,
.foot-link:focus-visible {
    color: var(--key-2);
    text-decoration: none;
}

.foot-link.is-active {
    color: var(--key-2);
    font-weight: 700;
}

/* Aktif ekranın altında ince vurgu */
.foot-link.is-active::after {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: -2px;
    height: 2px;
    background: var(--key-2);
    border-radius: 2px;
}

/* ---------------------------------------------------------------------
   8) Butonlar
   --------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: var(--tap);
    padding: 0 22px;
    color: var(--key-ink);
    background: linear-gradient(180deg, var(--key-2) 0%, var(--key) 100%);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 15px;
    font-weight: 650;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 24px -16px rgba(56, 189, 248, .95), inset 0 1px 0 rgba(255, 255, 255, .45);
    transition: filter var(--fast) var(--ease), transform var(--fast) var(--ease),
                box-shadow var(--fast) var(--ease);
    -webkit-tap-highlight-color: transparent;
}

.btn:hover,
.btn:focus-visible {
    color: var(--key-ink);
    text-decoration: none;
    filter: brightness(1.07);
    box-shadow: 0 14px 28px -16px rgba(56, 189, 248, 1), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.btn:active { transform: scale(.98); }

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: .5;
    filter: grayscale(.4);
    cursor: default;
    box-shadow: none;
}

.btn-ghost {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line-2);
    box-shadow: none;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
    color: var(--ink);
    background: var(--surface-2);
    border-color: var(--line-3);
    filter: none;
}

.btn-danger {
    color: var(--bad-ink);
    background: var(--bad-soft);
    border-color: var(--bad-line);
    box-shadow: none;
}

.btn-danger:hover,
.btn-danger:focus-visible {
    color: #fff;
    background: rgba(251, 113, 133, .28);
    filter: none;
}

.btn-sm {
    min-height: 42px;
    padding: 0 18px;
    font-size: 14px;
}

/* Seçili durum (örn. rapor tarih aralığı düğmesi) */
.btn-ghost.is-on {
    color: var(--key-2);
    background: var(--key-soft);
    border-color: var(--key-line);
}

.btn-lg {
    min-height: clamp(48px, 6.4vh, 58px);
    padding: 0 30px;
    font-size: clamp(15px, 1.9vh, 17.5px);
}

.btn-block { width: 100%; }

/* ---------------------------------------------------------------------
   9) Uyarı blokları
   --------------------------------------------------------------------- */
.alert {
    --ton: var(--key);

    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 13px 16px;
    color: #eef6fc;
    background: linear-gradient(90deg, rgba(56, 189, 248, .2) 0%, rgba(56, 189, 248, .07) 100%);
    border: 1px solid var(--line-2);
    border-left: 4px solid var(--ton);
    border-radius: var(--radius-md);
    box-shadow: var(--lift-2), inset 0 1px 0 rgba(255, 255, 255, .07);
    font-size: 14.5px;
    animation: alert-in .3s var(--ease) both;
}

@keyframes alert-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

/* İkon: tonun içinde dolgulu daire */
.alert > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    color: var(--ton);
    background: rgba(255, 255, 255, .1);
    border: 1px solid var(--line-2);
    border-radius: 50%;
    font-size: 15px;
}

/* Metin bloğu genişleyerek kapatma düğmesini sağ kenara iter */
.alert-body {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.5;
}

.alert-body p { font-weight: 550; }
.alert p + p { margin-top: 4px; color: var(--ink-2); font-weight: 400; }
.alert strong { color: #fff; font-weight: 650; }

/* Tür renkleri: sol şerit, zemin tonu ve ikon aynı renkten türer */
.alert-success {
    --ton: var(--ok);
    background: linear-gradient(90deg, rgba(52, 211, 153, .22) 0%, rgba(52, 211, 153, .07) 100%);
    border-color: var(--ok-line);
}

.alert-success > i { background: rgba(52, 211, 153, .18); border-color: var(--ok-line); }

.alert-warning {
    --ton: var(--warn);
    background: linear-gradient(90deg, rgba(251, 191, 36, .22) 0%, rgba(251, 191, 36, .07) 100%);
    border-color: var(--warn-line);
}

.alert-warning > i { background: rgba(251, 191, 36, .18); border-color: var(--warn-line); }

/* Bootstrap'teki adlandırmayla uyumlu olsun diye iki isim de geçerli */
.alert-danger,
.alert-error {
    --ton: var(--bad);
    background: linear-gradient(90deg, rgba(251, 113, 133, .22) 0%, rgba(251, 113, 133, .07) 100%);
    border-color: var(--bad-line);
}

.alert-danger > i,
.alert-error > i { background: rgba(251, 113, 133, .18); border-color: var(--bad-line); }

.alert-info {
    --ton: var(--key);
    background: linear-gradient(90deg, rgba(56, 189, 248, .22) 0%, rgba(56, 189, 248, .07) 100%);
    border-color: var(--key-line);
}

.alert-info > i { background: rgba(56, 189, 248, .18); border-color: var(--key-line); }

/* Kapatma düğmesi: metin bloğu genişlediği için sağ kenarda kalır */
.alert-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--ink-2);
    background: rgba(255, 255, 255, .06);
    border: 1px solid transparent;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    transition: color var(--fast) var(--ease), background var(--fast) var(--ease),
                border-color var(--fast) var(--ease);
}

.alert-close:hover,
.alert-close:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border-color: var(--line-2);
}

/* Kapanma animasyonu */
.alert.is-closing {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
}

.alert-stack {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---------------------------------------------------------------------
   10) Kart / panel
   --------------------------------------------------------------------- */
.panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .035) 100%);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--lift-2), inset 0 1px 0 rgba(255, 255, 255, .07);
    overflow: hidden;
}

.panel-head {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    padding: clamp(13px, 1.7vh, 17px) clamp(16px, 1.7vw, 24px);
    border-bottom: 1px solid var(--line-2);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
}

.panel-head h2 {
    font-size: clamp(15.5px, 2vh, 17.5px);
    font-weight: 650;
    letter-spacing: -.018em;
}

.panel-head .sub {
    color: var(--ink-3);
    font-size: 13px;
    font-weight: 500;
}

.panel-body {
    padding: clamp(16px, 2.1vh, 26px) clamp(16px, 1.7vw, 26px);
    /* Form ızgarası ekran değil kap genişliğine göre kolon sayısını seçer */
    container-type: inline-size;
}

/* Panel gövdesi kalan alanı doldurup kendi içinde kaydırılabilir */
.panel-body--fill {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.panel-body--scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.panel-foot {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: clamp(13px, 1.6vh, 17px) clamp(16px, 1.7vw, 24px);
    border-top: 1px solid var(--line-2);
    background: rgba(0, 0, 0, .2);
}

/* Yan yana panel ızgarası (rapor kırılımları gibi) */
.panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: clamp(12px, 1.6vw, 20px);
    align-items: start;
}

/* Boş durum */
.empty {
    margin: auto;
    padding: clamp(22px, 4vh, 48px) 22px;
    text-align: center;
}

.empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(50px, 7vh, 62px);
    height: clamp(50px, 7vh, 62px);
    margin-bottom: 15px;
    color: var(--key-2);
    background: var(--key-soft);
    border: 1px solid var(--key-line);
    border-radius: 50%;
    font-size: clamp(19px, 2.6vh, 23px);
}

.empty h2,
.empty h3 {
    font-size: clamp(17px, 2.2vh, 20px);
    font-weight: 620;
}

.empty p {
    max-width: 54ch;
    margin: 9px auto 0;
    color: var(--ink-2);
    font-size: 14px;
}

.empty .btn { margin-top: 18px; }

/* Etiketler */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    color: var(--ink-2);
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-pill);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.badge--ok   { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-line); }
.badge--warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }
.badge--bad  { color: var(--bad); background: var(--bad-soft); border-color: var(--bad-line); }

/* ---------------------------------------------------------------------
   11) Tablolar
   --------------------------------------------------------------------- */
.table-wrap {
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Panel içinde kalan alanı dolduran tablo alanı.
   Alt kenarda yumuşak geçiş, kaydırılacak satır olduğunu belli eder;
   yarım kalan satır kesik görünmez. */
.table-wrap--fill {
    flex: 1 1 auto;
    min-height: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
}

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

table.data caption {
    padding: 0 0 10px;
    color: var(--ink-3);
    font-size: 12.5px;
    text-align: left;
}

table.data th,
table.data td {
    padding: clamp(11px, 1.5vh, 15px) clamp(14px, 1.6vw, 22px);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--line);
}

table.data thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--ink-2);
    background: #0c2a47;
    border-bottom-color: var(--line-3);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background var(--fast) var(--ease); }
table.data tbody tr:nth-child(even) { background: rgba(255, 255, 255, .022); }
table.data tbody tr:hover { background: rgba(56, 189, 248, .09); }

table.data td.num,
table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }

.cell-strong { font-weight: 600; }
.cell-muted { color: var(--ink-3); }

/* ---------------------------------------------------------------------
   12) Formlar
   --------------------------------------------------------------------- */
label { font-weight: 550; }

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="date"],
select,
textarea {
    width: 100%;
    min-height: var(--tap);
    padding: 11px 15px;
    color: var(--ink);
    /* Girilebilir alanlar panelden daha koyu: kenarları belirgin olur */
    background: rgba(4, 21, 38, .55);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease),
                box-shadow var(--fast) var(--ease);
    appearance: none;
}

textarea { min-height: 110px; resize: vertical; }

select {
    padding-right: 40px;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                      linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
    background-position: right 18px center, right 13px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

input::placeholder,
textarea::placeholder { color: var(--ink-3); }

input:hover,
select:hover,
textarea:hover {
    border-color: var(--line-3);
    background: rgba(6, 26, 46, .6);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    background: rgba(8, 32, 55, .75);
    border-color: var(--key);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .2), inset 0 1px 3px rgba(0, 0, 0, .3);
}

input[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: var(--bad);
    box-shadow: 0 0 0 3px rgba(251, 113, 133, .18);
}

input[type="number"] { font-variant-numeric: tabular-nums; }

.form-row {
    display: grid;
    grid-template-columns: minmax(170px, 260px) minmax(0, 1fr);
    gap: 8px 26px;
    padding: clamp(12px, 1.7vh, 18px) 0;
    border-bottom: 1px solid var(--line);
}

.form-row:first-of-type { padding-top: 2px; }
.form-row:last-of-type { border-bottom: 0; padding-bottom: 2px; }

.form-label {
    display: block;
    padding-top: 12px;
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 600;
}

.form-input { max-width: 620px; }

.field-block + .field-block { margin-top: clamp(11px, 1.6vh, 16px); }

.field-block label {
    display: block;
    margin-bottom: 7px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
}

.help {
    margin-top: 8px;
    color: var(--ink-3);
    font-size: 13px;
    line-height: 1.5;
}

/* Ayar anahtarı gibi ikincil yardım metinleri */
.help--code { opacity: .85; }

code {
    padding: 2px 7px;
    color: var(--key-2);
    background: rgba(56, 189, 248, .12);
    border: 1px solid rgba(56, 189, 248, .22);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
}

.check {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-height: var(--tap);
    padding: 0 18px 0 15px;
    color: var(--ink);
    background: rgba(4, 21, 38, .45);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-md);
    font-size: 14.5px;
    font-weight: 550;
    cursor: pointer;
    transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.check:hover { background: var(--surface-2); border-color: var(--line-3); }

/* Yerel onay kutusu koyu zeminde gri bir kare olarak kalıyordu:
   görünüm sıfırlanıp panelin diline uygun çizildi. */
.check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    place-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    background: rgba(4, 21, 38, .7);
    border: 1.5px solid var(--line-3);
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
    cursor: pointer;
    transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.check input[type="checkbox"]::before {
    content: "";
    width: 11px;
    height: 6px;
    border-left: 2.5px solid var(--key-ink);
    border-bottom: 2.5px solid var(--key-ink);
    border-radius: 1px;
    transform: rotate(-45deg) translate(1px, -2px);
    opacity: 0;
    transition: opacity var(--fast) var(--ease);
}

.check input[type="checkbox"]:checked {
    background: linear-gradient(180deg, var(--key-2) 0%, var(--key) 100%);
    border-color: var(--key-2);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}

.check input[type="checkbox"]:checked::before { opacity: 1; }

.check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--key-2);
    outline-offset: 2px;
}

.check:has(input:checked) {
    background: var(--key-soft);
    border-color: var(--key-line);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: clamp(16px, 2.4vh, 24px);
    padding-top: clamp(14px, 2vh, 20px);
    border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------------------
   12a) Form modali
   Ekleme ve düzenleme formlarının tamamı yerel <dialog> ögesinin içinde
   durur. panel.js showModal() çağırdığı için modal üst katmana çıkar:
   karartmayı tarayıcı çizer, arka plan odak almaz ve panelin overflow
   sınırları modali kırpmaz. Betik çalışmazsa sunucunun bastığı `open`
   niteliği sayesinde form yine görünür kalır, yalnızca karartma olmaz.
   --------------------------------------------------------------------- */
.modal {
    position: fixed;
    inset: 0;
    width: min(620px, calc(100vw - 2 * clamp(12px, 4vw, 40px)));
    max-width: none;
    max-height: min(88dvh, 900px);
    margin: auto;
    padding: 0;   /* karartma tıklamasının hedefi dialog'un kendisi olsun */
    color: var(--ink);
    background: linear-gradient(180deg, #12395c 0%, #0a2540 100%);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--lift-3);
    overflow: hidden;
}

/* Uzun formlarda başlık ve kaydet şeridi erişilebilir kalsın: gövde kayar */
.modal[open] {
    display: flex;
    flex-direction: column;
    animation: modal-in var(--mid) var(--ease) both;
}

/* Alanı bol formlar (ayar listesi gibi) */
.modal--wide { width: min(920px, calc(100vw - 2 * clamp(12px, 4vw, 40px))); }

.modal::backdrop {
    background: rgba(3, 10, 18, .62);
    animation: modal-fade var(--mid) var(--ease) both;
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to { opacity: 1; transform: none; }
}

@keyframes modal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: clamp(13px, 1.7vh, 18px) clamp(16px, 1.7vw, 24px);
    border-bottom: 1px solid var(--line-2);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
}

.modal-head h2 {
    min-width: 0;
    font-size: clamp(15.5px, 2vh, 18px);
    font-weight: 650;
    letter-spacing: -.018em;
}

.modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: clamp(16px, 2.1vh, 26px) clamp(16px, 1.7vw, 26px);
    /* Form ızgarası ekranın değil modalin genişliğine göre kolon seçer */
    container-type: inline-size;
}

/* Doğrulama hataları formun hemen üstüne taşınır (panel.js) */
.alert-stack--modal { margin-bottom: clamp(14px, 2vh, 20px); }

.alert-stack--modal .alert { min-height: 0; }

/* Modal açıkken arka plan kaydırılmaz (telefonda gövde normal akıştadır) */
body.is-modal-open { overflow: hidden; }

/* ---------------------------------------------------------------------
   12b) Liste ekranları: araç şeridi · filtre · sayfalama · satır aksiyonu
   --------------------------------------------------------------------- */

/* Liste yerleşimi. Ekleme ve düzenleme formları listenin yanında değil
   modalin içinde durduğu için kolon her zaman tektir. */
.crud-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(12px, 1.4vw, 20px);
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
}

/* Tam yükseklikte liste paneli: başlık ve sayfalama sabit, tablo kayar */
.list-panel {
    flex: 1 1 auto;
    min-height: 0;
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

/* Panel başlığındaki araç şeridi kalan genişliği alır. Sarmalayan bir flex
   kabının içsel genişliği içeriğinden küçük hesaplandığı için buna gerek
   var; aksi halde arama kutusu butonu alt satıra itiyor. */
.panel-head .toolbar {
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
}

.toolbar > form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

/* Arama alanı sabit genişlikte kalır; büyüyüp yanındaki butonu alta itmez */
.search-field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 300px;
    min-width: 180px;
}

.search-field > i {
    position: absolute;
    left: 14px;
    color: var(--ink-3);
    font-size: 13px;
    pointer-events: none;
}

.search-field input {
    min-height: 42px;
    padding-left: 40px;
    font-size: 14.5px;
}

.search-field:focus-within > i { color: var(--key-2); }

/* Araç şeridindeki açılır listeler içerik kadar yer kaplar */
.toolbar select {
    width: auto;
    min-width: 140px;
    min-height: 42px;
    font-size: 14.5px;
}

/* Filtre satırı */
.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    align-items: end;
}

.filter-grid label:not(.check) {
    display: block;
    margin-bottom: 7px;
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
}

.filter-grid input,
.filter-grid select { min-height: 42px; font-size: 14px; }

.filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Satır içi aksiyonlar */
.row-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--ink-2);
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: color var(--fast) var(--ease), background var(--fast) var(--ease),
                border-color var(--fast) var(--ease);
}

.icon-btn:hover,
.icon-btn:focus-visible {
    color: var(--ink);
    background: var(--surface-2);
    border-color: var(--line-3);
    text-decoration: none;
}

.icon-btn--danger:hover,
.icon-btn--danger:focus-visible {
    color: #fff;
    background: rgba(251, 113, 133, .28);
    border-color: var(--bad-line);
}

.icon-btn--ok:hover,
.icon-btn--ok:focus-visible {
    color: #fff;
    background: rgba(52, 211, 153, .26);
    border-color: var(--ok-line);
}

/* Satır içi form (durum değiştir / sil) blok akışını bozmasın */
.inline-form { display: inline; }

/* Sıralanabilir başlık */
.th-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.th-sort:hover { color: var(--key-2); text-decoration: none; }
.th-sort i { font-size: 10px; opacity: .6; }
.th-sort.is-active { color: var(--key-2); }
.th-sort.is-active i { opacity: 1; }

/* Sayfalama */
.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    width: 100%;
}

.pager-info {
    color: var(--ink-3);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.pager-links {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    color: var(--ink-2);
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.pager-btn:hover {
    color: var(--ink);
    background: var(--surface-2);
    text-decoration: none;
}

.pager-btn.is-active {
    color: var(--key-ink);
    background: linear-gradient(180deg, #eaf7ff, var(--key-2));
    border-color: rgba(255, 255, 255, .5);
}

.pager-btn.is-off { opacity: .35; }
.pager-gap { color: var(--ink-3); padding: 0 2px; }

/* Form ızgarası: yer varsa bir satırda iki alan, yoksa tek kolon.
   Ölçü ekranın değil panelin genişliğine göre alınır; böylece hem geniş
   ayar paneli hem dar yan form paneli doğru davranır. */
.form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(12px, 1.8vh, 18px) clamp(14px, 1.6vw, 22px);
}

@container (min-width: 540px) {
    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Kap sorgusu desteklenmiyorsa geniş ekranda iki kolona düş */
@supports not (container-type: inline-size) {
    @media (min-width: 1100px) {
        .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
}

.form-grid .span-2 { grid-column: 1 / -1; }

/* .check bir <label> olduğu için burada hariç tutulur; aksi halde
   display:block alarak kendi flex düzenini kaybediyor. */
.form-grid label:not(.check) {
    display: block;
    margin-bottom: 8px;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -.005em;
}

/* Salt okunur değer plakası (düzeltilemeyen alanlar) */
.value-plate {
    padding: 11px 14px;
    color: var(--ink);
    background: rgba(255, 255, 255, .04);
    border: 1px dashed var(--line-2);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
}

/* Tek satır özet: liste ekranlarında dikey yer kazandırır */
.stat-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 0;
    flex: 1 1 auto;
}

.stat-inline > div {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 0 clamp(16px, 1.8vw, 26px);
    border-left: 1px solid var(--line);
}

.stat-inline > div:first-child { padding-left: 0; border-left: 0; }

.stat-inline .label {
    color: var(--ink-3);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.stat-inline .value {
    color: var(--ink);
    font-size: clamp(16px, 2.1vh, 21px);
    font-weight: 680;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Özet şeridi (rapor toplamları) */
.panel-foot .stat-strip { flex: 1 1 auto; }

.stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: clamp(10px, 1.4vh, 16px);
}

.stat-box {
    padding: clamp(12px, 1.6vh, 16px) 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
    border: 1px solid var(--line-2);
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.stat-box .label {
    display: block;
    color: var(--ink-3);
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.stat-box .value {
    display: block;
    margin-top: 6px;
    font-size: clamp(19px, 2.6vh, 26px);
    font-weight: 680;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
}

.stat-box .foot {
    display: block;
    margin-top: 3px;
    color: var(--ink-3);
    font-size: 12px;
}

/* Metin taşıyan özet kutusu (sayı değil ad/tarih gösterirken) */
.stat-box--text .value {
    font-size: clamp(15px, 1.9vh, 18px);
    letter-spacing: -.015em;
}

/* ---------------------------------------------------------------------
   13) Kademe tuş takımı (anasayfa)
   --------------------------------------------------------------------- */

/* Tuşların yerleştiği esnek alan: sığmazsa yalnızca burası kaydırılır */
.keypad-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Tek satırlık ızgara kalan yüksekliği alır; kolonlar ve tuşlar bu
   yüksekliği paylaşır. Böylece ekranda ferah, dengeli bir tuş takımı olur. */
.keypad {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    gap: clamp(10px, 1.4vh, 20px) clamp(14px, 2vw, 34px);
    width: 100%;
    max-width: var(--content-max);
    min-height: 100%;
    margin: 0 auto;
}

.keypad-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(9px, 1.3vh, 16px);
    min-height: 0;
}

/* Tuşlar ATM ölçeğinde: tek satır iri tutar metni, kalın kenar çubuğu.
   Alt sınırlar küçük pencerelerde eskisi gibi kalır; kiosk yüksekliğinde
   vh payı devreye girip tuşlar belirgin şekilde büyür. */
.pad-key {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: clamp(12px, 1.3vw, 22px);
    /* Tutar girişi kaldırıldığı için tuşlar kalan yüksekliği paylaşır:
       az kademede daha iri, çok kademede daha derli toplu dururlar. */
    min-height: clamp(56px, 9.4vh, 104px);
    max-height: clamp(96px, 26vh, 260px);
    padding: clamp(9px, 1.2vh, 16px) clamp(16px, 1.6vw, 28px);
    color: var(--ink);
    background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .035) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--lift-1);
    transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
                box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
    -webkit-tap-highlight-color: transparent;
}

.keypad-col--right .pad-key {
    flex-direction: row-reverse;
    text-align: right;
}

.pad-key:hover,
.pad-key:focus-visible {
    color: #fff;
    text-decoration: none;
    background: linear-gradient(180deg, rgba(56, 189, 248, .26) 0%, rgba(56, 189, 248, .1) 100%);
    border-color: var(--key-line);
    box-shadow: var(--glow);
}

/* Tuşlar hover'da yana kaymaz: yalnızca zemin ve kenarlık aydınlanır.
   Dokunmatik ekranda kayma parmağın altındaki hedefi oynatıyordu. */

.pad-key:active { transform: scale(.99); }

.pad-key-bar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: clamp(30px, 2.6vh, 40px);
    height: clamp(32px, 5.6vh, 60px);
    color: #0a2b47;
    background: linear-gradient(180deg, #eef3f8 0%, #a8b8c8 100%);
    border-radius: 6px;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .28), 0 1px 0 rgba(255, 255, 255, .25);
    font-size: clamp(13px, 1.7vh, 17px);
    transition: background var(--fast) var(--ease);
}

.pad-key:hover .pad-key-bar,
.pad-key:focus-visible .pad-key-bar {
    background: linear-gradient(180deg, #ffffff 0%, var(--key-2) 100%);
}

/* Tuşta tek satır durur, dikeyde ortalanır */
.pad-key-face {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
}

.pad-key-amount {
    font-size: clamp(24px, 4.6vh, 44px);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.12;
    font-variant-numeric: tabular-nums;
}

/* Kilitli tuşta kısa gerekçe: kademeye eşleşen stoklu ürün yok */
.pad-key-note {
    margin-top: 4px;
    color: var(--warn);
    font-size: clamp(11.5px, 1.6vh, 14px);
    font-weight: 600;
}

.pad-key.is-locked {
    opacity: .4;
    filter: grayscale(.65);
    pointer-events: none;
    box-shadow: none;
}

/* ---------------------------------------------------------------------
   14) Çekiliş çarkı
   --------------------------------------------------------------------- */
.cekilis-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, clamp(320px, 26vw, 420px));
    gap: clamp(12px, 1.4vw, 22px);
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
}

/* Çark kolonu: başlık + çark + aksiyon, hepsi kalan yüksekliğe sığar */
.wheel-panel { min-height: 0; }

/* Çarkın esnek alanı. container-type: size sayesinde çark hem genişliğe
   hem yüksekliğe göre ölçeklenir; hangisi küçükse o belirler. */
.wheel-area {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Işık halkası ve dış gölge için nefes payı: panelin overflow:hidden
       sınırına dayanmaz. Ölçü birimleri içerik kutusuna göre hesaplandığı
       için çark bu payın içinde kalır. */
    padding: clamp(5px, 1.6%, 16px);
}

.wheel-stage {
    position: relative;
    width: min(100cqw, 100cqh);
    aspect-ratio: 1 / 1;
}

/* Container query desteği yoksa yükseklik tabanlı yedek ölçü */
@supports not (container-type: size) {
    .wheel-area { display: flex; }
    .wheel-stage { width: min(100%, 46vh); }
}

.wheel-stage::before {
    content: "";
    position: absolute;
    inset: -2.5%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(56, 189, 248, .2), rgba(56, 189, 248, 0) 72%);
    pointer-events: none;
}

.wheel {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: clamp(4px, 1.8cqmin, 9px) solid #0d2c49;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16),
                0 0 0 clamp(5px, 2.4cqmin, 12px) rgba(255, 255, 255, .03),
                0 22px 44px -20px rgba(0, 0, 0, .75);
    transform: rotate(0deg);
    transition-property: transform;
    transition-timing-function: cubic-bezier(.15, .85, .18, 1);
    transition-duration: 4.4s;
    will-change: transform;
}

.wheel-label {
    position: absolute;
    inset: 0;
    transform: rotate(var(--a));
    pointer-events: none;
}

/* Etiket rengi dilim parlaklığına göre PHP tarafında belirlenir */
.wheel-label-text {
    position: absolute;
    top: 3.2cqmin;
    left: 50%;
    max-width: 38%;
    transform: translateX(-50%);
    color: #fff;
    font-size: clamp(10px, 3cqmin, 15px);
    font-weight: 650;
    letter-spacing: -.01em;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wheel-label-text.is-dark { text-shadow: 0 1px 1px rgba(255, 255, 255, .4); }

.wheel-pointer {
    position: absolute;
    top: clamp(-12px, -2.4cqmin, -6px);
    left: 50%;
    z-index: 3;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: clamp(8px, 2.6cqmin, 14px) solid transparent;
    border-right: clamp(8px, 2.6cqmin, 14px) solid transparent;
    border-top: clamp(16px, 5.2cqmin, 28px) solid var(--key-2);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .6));
}

.wheel-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 21%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    color: var(--key-2);
    background: linear-gradient(180deg, #12395c, #0a2740);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 8px 20px rgba(0, 0, 0, .55);
    font-size: clamp(12px, 4.4cqmin, 22px);
}

.wheel-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 1vh, 11px);
    width: 100%;
}

.btn-spin {
    min-width: min(320px, 100%);
    letter-spacing: -.01em;
}

.wheel-hint {
    color: var(--ink-2);
    font-size: clamp(12.5px, 1.6vh, 14px);
    text-align: center;
}

/* Sağ kolon: gerekirse kendi içinde kaydırılır */
.cekilis-side {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.4vh, 20px);
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.result-panel {
    flex: 0 0 auto;
    border-color: var(--key-line);
    box-shadow: 0 0 0 1px var(--key-line), 0 18px 40px -22px rgba(56, 189, 248, .5);
}

.result-panel.is-open { animation: result-in .3s var(--ease) both; }

@keyframes result-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.result-gift {
    margin-bottom: clamp(12px, 1.8vh, 18px);
    padding: clamp(11px, 1.6vh, 16px) 18px;
    color: #fff;
    background: linear-gradient(180deg, rgba(56, 189, 248, .2), rgba(56, 189, 248, .07));
    border: 1px solid var(--key-line);
    border-radius: var(--radius-md);
    font-size: clamp(18px, 2.6vh, 26px);
    font-weight: 680;
    letter-spacing: -.025em;
    text-align: center;
}

.result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: clamp(14px, 2vh, 20px);
}

.result-actions .btn { flex: 1 1 140px; }

.slice-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 9px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
    vertical-align: baseline;
}

/* ---------------------------------------------------------------------
   14b) SweetAlert - koyu terminal teması
   Bildirimler ve onay kutuları buradan biçimlenir.
   --------------------------------------------------------------------- */
.swal2-container { z-index: 400; }

.swal2-container.swal2-backdrop-show { background: rgba(3, 10, 18, .62); }

.atm-swal.swal2-popup {
    padding: clamp(20px, 2.6vh, 30px);
    color: var(--ink);
    background: linear-gradient(180deg, #12395c 0%, #0a2540 100%);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--lift-3);
    font-family: inherit;
}

.atm-swal .swal2-title {
    padding: 0;
    color: var(--ink);
    font-size: clamp(17px, 2.2vh, 20px);
    font-weight: 650;
    letter-spacing: -.02em;
}

.atm-swal .swal2-html-container {
    margin: 12px 0 0;
    padding: 0;
    color: var(--ink-2);
    font-size: 14.5px;
    line-height: 1.55;
}

.atm-swal .swal-liste {
    margin: 0;
    padding: 0;
    text-align: left;
    list-style: none;
}

.atm-swal .swal-liste li {
    position: relative;
    padding: 4px 0 4px 18px;
}

.atm-swal .swal-liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 6px;
    height: 6px;
    background: var(--bad);
    border-radius: 50%;
}

.atm-swal .swal2-actions {
    margin: clamp(18px, 2.4vh, 24px) 0 0;
    gap: 10px;
}

/* Butonlar panelin kendi buton stilini kullanır (buttonsStyling: false) */
.atm-swal .swal2-styled { margin: 0; }

.atm-swal .swal2-close {
    color: var(--ink-3);
    font-size: 26px;
    box-shadow: none;
}

.atm-swal .swal2-close:hover { color: var(--ink); background: transparent; }

/* İkon renkleri */
.atm-swal .swal2-icon { margin: 0 auto 6px; border-color: currentColor; }
.atm-swal .swal2-icon.swal2-success { color: var(--ok); }
.atm-swal .swal2-icon.swal2-error { color: var(--bad); }
.atm-swal .swal2-icon.swal2-warning { color: var(--warn); }
.atm-swal .swal2-icon.swal2-info,
.atm-swal .swal2-icon.swal2-question { color: var(--key); }

.atm-swal .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(52, 211, 153, .4); }
.atm-swal .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--ok); }
.atm-swal .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--bad); }

/* Köşe bildirimi (toast)
   SweetAlert kendi stilini çalışma anında <head> sonuna enjekte ettiği için
   toast kuralları .swal2-container ile bir kademe daha özgül yazılır. */

/* ---------------------------------------------------------------------
   15) Duyarlı davranış
   --------------------------------------------------------------------- */

/* Alt şerit daralınca firma bilgisi ve menü ayrı satırlara geçer */
@media (max-width: 1180px) {
    .atm-foot { justify-content: center; }

    .foot-nav { justify-content: center; }
}

/* Dar ekranlar (1080px ve altı): kiosk sığdırma modu normal akışa döner.
   Tek kolona inen yerleşimde çarkı sıkıştırıp küçültmek yerine sayfanın
   kaydırılmasına izin verilir; böylece çark okunur boyutta kalır. */
@media (max-width: 1080px) {
    .atm-body--fit {
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scrollbar-gutter: stable;
    }

    .atm-body--fit .atm-body-inner {
        height: auto;
        min-height: 100%;
    }

    .cekilis-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

    /* Çark artık yükseklikten değil, güvenli bir ölçüden boyutlanır */
    .wheel-area {
        container-type: normal;
        padding: 0;
    }

    .wheel-stage { width: min(100%, 58vh, 520px); }

    .wheel-label-text { font-size: clamp(10px, 2.6vh, 15px); }
    .wheel-hub { font-size: clamp(13px, 3.4vh, 20px); }

    .wheel { border-width: 7px; }

    .wheel-pointer {
        top: -9px;
        border-left-width: 12px;
        border-right-width: 12px;
        border-top-width: 24px;
    }

    .cekilis-side {
        max-height: none;
        overflow: visible;
    }

    .keypad-area { overflow: visible; }

    /* Akış modunda tuşlar doğal yüksekliklerini alır */
    .keypad {
        min-height: 0;
        grid-template-rows: auto;
    }

    .pad-key {
        flex: 0 0 auto;
        max-height: none;
    }
}

/* Tablet ve altı: tuş takımı tek kolon */
@media (max-width: 900px) {
    .keypad { grid-template-columns: minmax(0, 1fr); }

    .keypad-col--right .pad-key {
        flex-direction: row;
        text-align: left;
    }

    .form-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .form-label { padding-top: 0; margin-bottom: 7px; }
    .form-input { max-width: none; }
}

/* Telefon: kabuk tam ekrana açılır, sayfa normal akışta kaydırılır */
@media (max-width: 720px) {
    body.atm-page {
        height: auto;
        min-height: 100dvh;
        padding: 0;
        overflow: visible;
        background: var(--screen-3);
    }

    .atm {
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .atm-screen {
        overflow: visible;
        border: 0;
        border-radius: 0;
        min-height: 100dvh;
    }

    .atm-top {
        position: sticky;
        top: 0;
        z-index: 20;
        padding-top: max(11px, env(safe-area-inset-top));
        background: #08243c;
        box-shadow: 0 10px 24px -20px rgba(0, 0, 0, .9);
    }

    /* Telefonda sayfanın kendisi kaydırılır, kabuk içinde ayrı alan yok */
    .atm-body--fit,
    .atm-body--flow { overflow: visible; }

    .atm-body--fit .atm-body-inner { height: auto; }

    .wheel-stage { width: min(100%, 78vw); }

    .atm-foot {
        padding-bottom: max(11px, env(safe-area-inset-bottom));
        justify-content: center;
        text-align: center;
    }

    .screen-head,
    .screen-actions { width: 100%; }

    .screen-actions .btn { flex: 1 1 auto; }

    .btn-spin { width: 100%; }

    .result-actions .btn { flex: 1 1 100%; }
}

@media (max-width: 560px) {
    .magaza-secim select { max-width: 12ch; }

    .atm-brand { letter-spacing: .06em; font-size: 13px; }

    table.data th,
    table.data td { padding: 11px 13px; }
}

/* ---------------------------------------------------------------------
   16) Hareket tercihi
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .wheel { transition-duration: .3s !important; }

    .result-panel.is-open { animation: none; }

    /* ::backdrop evrensel seçicinin kapsamına girmez, ayrıca susturulur */
    .modal[open],
    .modal::backdrop { animation: none; }
}

/* =====================================================================
   17) Liste ekranı eklentileri: filtre modali ve toplam satırı
   Filtre kutuları modalin içine taşındı; başlıktaki düğme kaç kısıt
   olduğunu sayar, seçili kısıtlar listenin üstünde etiket olarak durur.
   ===================================================================== */

/* Düğme içindeki sayaç (örn. "Filtrele 2") */
.btn-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    color: var(--key-ink);
    background: var(--key-2);
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

/* Seçili filtre etiketleri */
.filter-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.filter-tags-label {
    color: var(--ink-3);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Tablo altı toplam satırı: başlık gibi yapışkandır, liste kayarken
   ekranda kalır. Alt kenardaki yumuşak geçiş toplamı soldurmasın diye
   bu tablolarda maske kapatılır. */
.table-wrap--foot {
    -webkit-mask-image: none;
    mask-image: none;
}

table.data tfoot th,
table.data tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: clamp(11px, 1.5vh, 15px) clamp(14px, 1.6vw, 22px);
    color: var(--ink);
    background: #0b2540;
    border-top: 1px solid var(--line-3);
    border-bottom: 0;
    /* Kayan satırların üstünde şerit gibi dursun */
    box-shadow: 0 -10px 18px -14px rgba(0, 0, 0, .9);
    font-size: 13.5px;
    font-weight: 680;
    text-align: left;
    white-space: nowrap;
}

table.data tfoot td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* =====================================================================
   18) Tam ekran çark (cekilis.php)
   Bu ekranda kabuk yok: üst şerit, menü ve altbilgi basılmaz. Ortada
   yalnızca kocaman bir çark durur; çevirme tuşu çarkın göbeğindedir.
   Çark durunca sonuç kartı açılır: teslim et ya da vazgeç.
   ===================================================================== */
body.cark-page {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    padding: clamp(8px, 1.4vh, 20px);
    padding-top: max(clamp(8px, 1.4vh, 20px), env(safe-area-inset-top));
    padding-bottom: max(clamp(8px, 1.4vh, 20px), env(safe-area-inset-bottom));
    background: radial-gradient(135% 115% at 50% -15%, var(--screen-1) 0%, var(--screen-2) 45%, var(--screen-3) 100%);
    overflow: hidden;
}

.cark-sahne {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Çark alanı hem genişliğe hem yüksekliğe göre ölçeklenir; hangisi
   küçükse çarkın çapını o belirler. Dar ekranlarda bile kabuk
   yerleşiminin küçültme kuralları buraya işlemez. */
.cark-page .wheel-area {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    container-type: size;
    padding: clamp(6px, 1.4vh, 18px);
}

.cark-page .wheel-stage { width: min(100cqw, 100cqh); }

@supports not (container-type: size) {
    .cark-page .wheel-stage { width: min(94vw, 82dvh); }
}

/* Göbekteki çevirme tuşu */
.cark-hub {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2%;
    width: 25%;
    padding: 0;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    transition: filter var(--fast) var(--ease), transform var(--fast) var(--ease);
    -webkit-tap-highlight-color: transparent;
}

.cark-hub-metin {
    color: #fff;
    font-size: clamp(8px, 2.4cqmin, 15px);
    font-weight: 750;
    letter-spacing: .14em;
    line-height: 1;
}

.cark-hub:hover:not(:disabled),
.cark-hub:focus-visible:not(:disabled) {
    filter: brightness(1.18);
    transform: translate(-50%, -50%) scale(1.03);
}

.cark-hub:active:not(:disabled) { transform: translate(-50%, -50%) scale(.98); }

.cark-hub:disabled { cursor: default; }

/* Alt yarıdaki dilim etiketleri baş aşağı kalmasın: kutu yerinde durur,
   yalnızca yazı çevrilir. Kazanan dilim her zaman üstte olduğu için
   sonuç anında etiket düz okunur. */
.wheel-label-text.is-flip { transform: translateX(-50%) rotate(180deg); }

/* Çarkın altındaki tek satır bilgi */
.cark-ipucu {
    flex: 0 0 auto;
    padding-top: clamp(6px, 1.2vh, 14px);
    color: var(--ink-2);
    font-size: clamp(12.5px, 1.8vh, 15px);
    text-align: center;
}

/* Vazgeçme (çark çevrilmeden önce) */
.cark-kapat {
    position: fixed;
    top: clamp(10px, 1.6vh, 20px);
    right: clamp(10px, 1.2vw, 22px);
    z-index: 30;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--ink-2);
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: 50%;
    font-size: 17px;
    transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.cark-kapat:hover,
.cark-kapat:focus-visible {
    color: #fff;
    background: rgba(251, 113, 133, .28);
    border-color: var(--bad-line);
    text-decoration: none;
}

/* Bildirim şeridi (teslim hatası gibi durumlar) */
.cark-bildirim {
    position: fixed;
    top: clamp(10px, 1.6vh, 20px);
    left: 50%;
    z-index: 25;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(620px, calc(100vw - 120px));
    transform: translateX(-50%);
}

/* --- Sonuç kartı --- */
.cark-sonuc {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 3vh, 34px);
    background: rgba(3, 10, 18, .72);
    backdrop-filter: blur(3px);
}

.cark-sonuc.is-open { animation: modal-fade var(--mid) var(--ease) both; }

.cark-sonuc-kart {
    width: min(580px, 100%);
    padding: clamp(20px, 3.4vh, 40px) clamp(18px, 2.6vw, 36px);
    text-align: center;
    background: linear-gradient(180deg, #12395c 0%, #0a2540 100%);
    border: 1px solid var(--key-line);
    border-radius: var(--radius-xl);
    box-shadow: var(--lift-3), 0 0 0 1px var(--key-line);
    animation: modal-in var(--mid) var(--ease) both;
}

.cark-sonuc-etiket {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--key-2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.cark-sonuc-ad {
    margin: clamp(10px, 1.8vh, 18px) 0 0;
    color: #fff;
    font-size: clamp(26px, 5.4vh, 48px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.cark-sonuc-not {
    margin-top: clamp(6px, 1.2vh, 12px);
    color: var(--ink-2);
    font-size: clamp(12.5px, 1.7vh, 14.5px);
    font-variant-numeric: tabular-nums;
}

.cark-sonuc-tus {
    display: grid;
    gap: 10px;
    margin-top: clamp(18px, 2.8vh, 28px);
}

.cark-sonuc-tus form { display: block; }

/* =====================================================================
   19) Yeni bileşenlerin duyarlı davranışı
   ===================================================================== */
@media (max-width: 720px) {
    /* Telefonda çark ekranı da kaydırılmaz: çark ekrana sığar */
    body.cark-page { height: 100dvh; }

    .cark-page .wheel-stage { width: min(96vw, 72dvh); }

    .cark-bildirim { width: calc(100vw - 90px); }
}

@media (prefers-reduced-motion: reduce) {
    .cark-sonuc.is-open,
    .cark-sonuc-kart { animation: none; }

    .cark-hub:hover:not(:disabled),
    .cark-hub:focus-visible:not(:disabled) { transform: translate(-50%, -50%); }
}