/* ============================================================
   SIRAMATIK - EKRAN (TV / TABLET / TELEFON) CSS
   Strateji: vmin birimleri + 100dvh rijit layout — asla scroll, asla taşma
   vmin = min(viewport_w, viewport_h) → her iki yönde de ölçeklenir
   ============================================================ */

:root {
    /* Tek düz renk yedek / modal uyumu */
    --ekran-bg: #34343c;
    /* Üst: açık gri → orta: antrasit → alt: siyah; çok adımlı yumuşak geçiş */
    --ekran-bg-gradient: linear-gradient(
        180deg,
        #6a6a74 0%,
        #63636d 6%,
        #5c5c66 12%,
        #55555e 18%,
        #4e4e56 24%,
        #47474f 30%,
        #414148 36%,
        #3b3b42 42%,
        #35353c 48%,
        #303036 54%,
        #2b2b31 60%,
        #26262b 66%,
        #212126 72%,
        #1c1c21 78%,
        #17171b 83%,
        #131316 88%,
        #0f0f12 92%,
        #0b0b0d 95%,
        #080809 97%,
        #050506 99%,
        #020203 100%
    );
    --ekran-card: rgba(255, 255, 255, 0.14);
    --ekran-border: rgba(255, 255, 255, 0.12);
    --ekran-spotlight: linear-gradient(135deg, #ff4d7a 0%, #e03a8a 40%, #7c6cf7 100%);
    --ekran-text: #f1f5f9;
    --ekran-muted: #94a3b8;
    --ekran-accent: #22c55e;
    --ekran-glow: 0 0 60px rgba(255, 45, 106, 0.35);
    /* Bölüm / kuyruk / lokasyon — zıt palet (spotlight: camgöbeği / turuncu / lime) */
    --ekran-spot-bolum: #22d3ee;
    --ekran-spot-kuyruk: #fb923c;
    --ekran-spot-konum: #bef264;
    --ekran-spot-sk-sep: rgba(255, 255, 255, 0.72);
    /* Liste: mavi / turuncu-kırmızı / fuşya (koyu kart üzeri yüksek ayrım) */
    --ekran-list-bolum: #60a5fa;
    --ekran-list-kuyruk: #f97316;
    --ekran-list-konum: #e879f9;
    --ekran-list-sk-sep: rgba(203, 213, 225, 0.9);

    /* vmin tabanlı token'lar: portrait/landscape her ikisinde de doğru ölçeklenir */
    --ekran-header-h1: clamp(13px, 3.2vmin, 42px);
    --ekran-header-sub: clamp(10px, 1.6vmin, 20px);
    --ekran-clock-size: clamp(14px, 4vmin, 52px);
    /* Spotlight numarası: önceki boyutun %150'si */
    --ekran-numara-size: clamp(60px, 19.5vmin, 210px);
    /* Bölüm + kuyruk metni: önceki boyutun %130'u */
    --ekran-label-size: clamp(12px, 2.34vmin, 29px);
    --ekran-item-num: clamp(16px, 4.5vmin, 52px);
    --ekran-item-svc: clamp(12px, 2.08vmin, 23px);
    --ekran-safe-top: max(6px, env(safe-area-inset-top));
    --ekran-safe-right: max(6px, env(safe-area-inset-right));
    --ekran-safe-bottom: max(6px, env(safe-area-inset-bottom));
    --ekran-safe-left: max(6px, env(safe-area-inset-left));
    /* Ortak yatay padding — spotlight ve liste AYNI değeri kullanır */
    --ekran-content-padx: clamp(10px, 3vw, 40px);
    /* Split: spotlight ile reklam üst kenarı aynı hizada */
    --ekran-split-top-align: clamp(14px, 3vmin, 48px);
    /* Split: dinamik genişlik dağılımı */
    --ekran-queue-w: 50%;
    --ekran-ad-w: 50%;
}

/* Büyük ekran: header ve saat ~%30 büyür */
@media (min-width: 1024px) {
    :root {
        --ekran-header-h1: clamp(20px, 3.5vmin, 55px);
        --ekran-header-sub: clamp(12px, 1.8vmin, 26px);
        --ekran-clock-size: clamp(20px, 4.5vmin, 68px);
    }
}

/* ─── TEMEL RESET ─────────────────────────────────────────── */
html {
    height: 100%;
    min-height: 100dvh;
    min-height: 100svh;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--ekran-bg-gradient);
    background-color: #050506;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    background: transparent;
    color: var(--ekran-text);
    font-family: 'Outfit', system-ui, sans-serif;
    /* RİJİT: tam viewport (TV / tablet tarayıcı çubukları için svh + dvh) */
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    max-height: 100vh;
    max-height: 100dvh;
    max-height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding:
        var(--ekran-safe-top) var(--ekran-safe-right) var(--ekran-safe-bottom) var(--ekran-safe-left);
}

/* ─── HEADER ──────────────────────────────────────────────── */
/* Ana gövdeden belirgin şerit: mor-lacivert ton, spotlight paleti ile uyumlu */
.ekran-header {
    flex-shrink: 0;
    background: linear-gradient(
        180deg,
        #4a4562 0%,
        #38344e 28%,
        #2c283c 58%,
        #242030 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 10px 28px rgba(0, 0, 0, 0.4);
    padding: clamp(6px, 1.5vmin, 20px) clamp(10px, 3vw, 40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(6px, 2vmin, 20px);
    border-bottom: 1px solid rgba(124, 108, 247, 0.45);
    overflow: hidden;
}

.ekran-header>div:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.ekran-header h1 {
    font-size: var(--ekran-header-h1);
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(90deg, #fff 0%, #c7d2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ekran-header .subtitle {
    font-size: var(--ekran-header-sub);
    color: rgba(226, 232, 240, 0.72);
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── SAAT ─────────────────────────────────────────────────── */
.ekran-saat {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    font-variant-numeric: tabular-nums;
}

.simple-clock {
    display: flex;
    align-items: center;
    gap: clamp(3px, 0.8vmin, 10px);
    font-size: var(--ekran-clock-size);
    font-weight: 800;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    background: rgba(0, 0, 0, 0.28);
    padding: clamp(4px, 1vmin, 10px) clamp(8px, 2vmin, 20px);
    border-radius: clamp(6px, 1.2vmin, 14px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.clock-sep {
    opacity: 0.6;
    animation: ekran-blink 1s step-end infinite;
}

@keyframes ekran-blink {
    50% {
        opacity: 0;
    }
}

/* ─── ANA SATIR: KUYRUK + REKLAM (TV) ─────────────────────── */
.ekran-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
}

.ekran-queue-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    min-height: 0;
}

.ekran-main--split .ekran-queue-column {
    flex: 0 0 var(--ekran-queue-w);
    max-width: var(--ekran-queue-w);
    width: var(--ekran-queue-w);
    min-width: 0;
    padding-top: var(--ekran-split-top-align);
    box-sizing: border-box;
}

.ekran-main--split .ekran-ad-column {
    flex: 0 0 var(--ekran-ad-w);
    max-width: var(--ekran-ad-w);
    width: var(--ekran-ad-w);
    min-width: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Dar dikey ekran: üst üste, yine yarı yarıya */
@media (max-aspect-ratio: 1/1) {
    .ekran-main--split {
        flex-direction: column;
    }

    .ekran-main--split .ekran-queue-column,
    .ekran-main--split .ekran-ad-column {
        flex: 1 1 50%;
        max-width: 100%;
        width: 100%;
        max-height: 50%;
        min-height: 0;
    }
}

.ekran-main--full-queue .ekran-queue-column,
.ekran-main--queue-only .ekran-queue-column {
    flex: 1;
    max-width: 100%;
}

.ekran-ad-column {
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    background: transparent;
    min-height: 0;
    min-width: 0;
    box-sizing: border-box;
}

/* Reklam alanı ekran sınırlarına kadar esner, ortalama ekran-ad-inner flex ile sağlanır */
.ekran-main--split .ekran-ad-column,
.ekran-main--ad-full .ekran-ad-column {
    display: flex;
    padding-bottom: 0;
}

@supports (padding-bottom: 5dvh) {
    .ekran-main--split .ekran-ad-column,
    .ekran-main--ad-full .ekran-ad-column {
        padding-bottom: 0;
    }
}

.ekran-main--ad-full .ekran-queue-column {
    display: none;
}

.ekran-main--ad-full .ekran-ad-column {
    /* Ad full modunda boş kalan alanı reklam kolonu tamamen kaplasın */
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
    min-width: 0;
}

.ekran-ad-inner {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Reklam/görsel panel: sade görünüm (arka kart/çizgi yok) */
    border-radius: clamp(16px, 2.8vmin, 36px);
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Split: reklam üstten başlasın; spotlight ile aynı üst ofset (--ekran-split-top-align sütunda) */
/* Split: reklam dikey ve yatay tam ortada olsun (--ekran-split-top-align ofseti varsa bu iptal edilebilir ancak biz her taraftan ortalamak istiyoruz) */
.ekran-main--split .ekran-ad-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ekran-ad-asset {
    border: none;
    border-radius: clamp(12px, 1.9vmin, 24px);
    overflow: hidden;
}

/* Görsel / video: konteynerin ~%95’i; dikey ve yatay tam ortada */
.ekran-ad-inner > img.ekran-ad-asset,
.ekran-ad-inner > video.ekran-ad-asset {
    position: relative;
    display: block;
    flex: 0 1 auto;
    align-self: center;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 96%;
    object-fit: contain;
    object-position: center;
    margin: 0;
    border-radius: clamp(20px, 3.2vmin, 42px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Güvenlik: asset class'i eklenmese bile köşeler yuvarlak kalsın */
.ekran-ad-inner > img,
.ekran-ad-inner > video {
    border-radius: clamp(20px, 3.2vmin, 42px);
}

/* YouTube vb.: aynı %95 sınır ve ortalama */
.ekran-ad-inner iframe.ekran-ad-asset {
    flex: 0 1 auto;
    align-self: center;
    width: 100%;
    height: 96%;
    max-width: 100%;
    max-height: 96%;
    min-height: 0;
    min-width: 0;
    border: none;
    border-radius: clamp(20px, 3.2vmin, 42px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.ekran-ad-inner iframe {
    border-radius: clamp(20px, 3.2vmin, 42px);
}

/* ─── SPOTLIGHT (AKTİF SIRA) ─────────────────────────────── */
.ekran-spotlight-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    align-self: center;
    width: 99%;
    max-width: 100%;
    box-sizing: border-box;
    /* TEK KAYNAK: her iki tarafta da aynı yatay padding */
    padding: clamp(6px, 2vmin, 20px) var(--ekran-content-padx);
}

/* Yarım ekran (split): sol %50 içinde kart tam genişlik, yan boşluk minimum */
.ekran-main--split .ekran-spotlight-wrap {
    padding-left: clamp(6px, 1.2vmin, 14px);
    padding-right: clamp(6px, 1.2vmin, 14px);
}

.ekran-spotlight {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: clamp(12px, 3vmin, 50px) clamp(12px, 3vmin, 36px);
    border-radius: clamp(10px, 2vmin, 28px);
    background: var(--ekran-spotlight);
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: var(--ekran-glow), inset 0 2px 0 rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(6px, 2vmin, 20px);
    position: relative;
    overflow: hidden;
}

.ekran-main--split .ekran-spotlight {
    padding: clamp(8px, 1.8vmin, 16px) clamp(10px, 1.9vmin, 18px);
    gap: clamp(4px, 1.2vmin, 10px);
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
}

.ekran-numara {
    font-size: var(--ekran-numara-size);
    font-weight: 800;
    color: #fff;
    text-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    line-height: 1;
}

.ekran-main--split .ekran-numara {
    font-size: clamp(38px, 11.2vmin, 110px);
    line-height: 0.92;
    flex: 0 0 auto;
}

/* Spotlight içindeki label'lar */
.ekran-spotlight .ekran-label,
.ekran-spotlight-label {
    font-size: var(--ekran-label-size);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Spotlight sağ blok: kuyruk metni üstte, lokasyon (varsa) altta — sağa hizalı */
.ekran-spotlight-detay {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    flex: 1 1 auto;
    min-width: 0;
    gap: clamp(4px, 0.75vmin, 10px);
}

.ekran-main--split .ekran-spotlight-detay {
    flex: 1 1 auto;
    gap: clamp(1px, 0.35vmin, 4px);
}

.ekran-spotlight-servis {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0;
    font-size: var(--ekran-label-size);
    font-weight: 700;
    line-height: 1.22;
    word-break: break-word;
    max-width: 100%;
}

.ekran-main--split .ekran-spotlight-servis {
    font-size: clamp(16px, 2.325vmin, 27px);
    line-height: 1.16;
}

.ekran-spotlight-bolum {
    color: var(--ekran-spot-bolum);
}

.ekran-spotlight-kuyruk-text {
    color: var(--ekran-spot-kuyruk);
}

.ekran-spotlight-sk-sep {
    color: var(--ekran-spot-sk-sep);
    font-weight: 600;
    user-select: none;
}

.ekran-spotlight-konum {
    font-size: var(--ekran-label-size);
    font-weight: 600;
    color: var(--ekran-spot-konum);
    line-height: 1.2;
    word-break: break-word;
    max-width: 100%;
}

.ekran-main--split .ekran-spotlight-konum {
    font-size: clamp(15px, 2.025vmin, 24px);
    line-height: 1.1;
}

/* ─── LİSTE (ÖNCEKİ SIRALAR) ─────────────────────────────── */
.ekran-list {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Spotlight ile aynı yatay padding */
    padding: 0 var(--ekran-content-padx) clamp(6px, 2vmin, 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4px, 1.5vmin, 18px);
    perspective: 1800px;
    transform-style: preserve-3d;
}

.ekran-main--split .ekran-list {
    padding-left: clamp(6px, 1.2vmin, 14px);
    padding-right: clamp(6px, 1.2vmin, 14px);
}

.ekran-cagri-item {
    max-width: 95%;
    flex-shrink: 0;
    background: var(--ekran-card);
    backdrop-filter: blur(12px);
    border: 1px solid var(--ekran-border);
    border-radius: clamp(6px, 1.5vmin, 18px);
    padding: clamp(8px, 1.5vmin, 24px) clamp(12px, 3vmin, 50px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s ease, width 0.5s ease;
    transform-origin: center center;
    overflow: hidden;
    box-sizing: border-box;
}

/* Aktif sıra (spotlight) her zaman en geniş; geçmiş satırlar asla onu geçmez */
.ekran-cagri-item:nth-child(1) {
    width: 99%;
    max-width: 99%;
    transform: translateZ(0);
    opacity: 1;
    z-index: 10;
}

.ekran-cagri-item:nth-child(2) {
    width: 96%;
    max-width: 96%;
    transform: translateZ(-120px);
    opacity: 0.88;
    z-index: 9;
}

.ekran-cagri-item:nth-child(3) {
    width: 92%;
    max-width: 92%;
    transform: translateZ(-240px);
    opacity: 0.72;
    z-index: 8;
}

.ekran-cagri-item:nth-child(4) {
    width: 87%;
    max-width: 87%;
    transform: translateZ(-360px);
    opacity: 0.52;
    z-index: 7;
}

.ekran-cagri-item:nth-child(5) {
    width: 81%;
    max-width: 81%;
    transform: translateZ(-480px);
    opacity: 0.32;
    z-index: 6;
}

.ekran-cagri-item:nth-child(6) {
    width: 74%;
    max-width: 74%;
    transform: translateZ(-600px);
    opacity: 0.16;
    z-index: 5;
}

.ekran-cagri-item:nth-child(n+7) {
    width: 66%;
    max-width: 66%;
    transform: translateZ(-800px);
    opacity: 0.06;
    z-index: 4;
}

.ekran-cagri-numara {
    font-size: var(--ekran-item-num);
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
}

.ekran-cagri-detay {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    flex: 1 1 auto;
    min-width: 0;
    gap: clamp(2px, 0.45vmin, 8px);
}

.ekran-cagri-servis {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0;
    font-size: var(--ekran-item-svc);
    line-height: 1.22;
    word-break: break-word;
    max-width: 100%;
}

.ekran-cagri-bolum {
    color: var(--ekran-list-bolum);
    font-weight: 700;
}

.ekran-cagri-kuyruk-text {
    color: var(--ekran-list-kuyruk);
    font-weight: 700;
}

.ekran-cagri-sk-sep {
    color: var(--ekran-list-sk-sep);
    font-weight: 600;
    user-select: none;
}

.ekran-cagri-konum {
    display: block;
    font-size: var(--ekran-item-svc);
    font-weight: 700;
    color: var(--ekran-list-konum);
    line-height: 1.2;
    word-break: break-word;
    max-width: 100%;
}

/* ─── BOŞLUK DURUMU ─────────────────────────────────────── */
.ekran-empty {
    text-align: center;
    padding: clamp(20px, 5vmin, 60px);
    color: var(--ekran-muted);
    font-size: clamp(0.9rem, 2vmin, 1.3rem);
}

.ekran-empty-icon {
    font-size: clamp(2rem, 6vmin, 4rem);
    margin-bottom: clamp(8px, 2vmin, 16px);
    opacity: 0.4;
}

/* ─── AYARLAR: görünmez köşe + tek dokunuşla çark ─────────── */
.ekran-settings-reveal-zone {
    position: fixed;
    bottom: max(8px, calc(var(--ekran-safe-bottom) - 4px));
    left: max(8px, calc(var(--ekran-safe-left) - 4px));
    width: clamp(72px, 14vmin, 120px);
    height: clamp(72px, 14vmin, 120px);
    z-index: 1001;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.ekran-settings-reveal-zone--off {
    display: none !important;
    pointer-events: none !important;
}

/* TV / eski WebKit: yalnız opacity yerine tamamen kaldır (kiosk ile aynı mantık) */
.ekran-settings-btn {
    position: fixed;
    bottom: max(16px, var(--ekran-safe-bottom));
    left: max(16px, var(--ekran-safe-left));
    width: clamp(calc(36px * 1.2), calc(5vmin * 1.2), calc(52px * 1.2));
    height: clamp(calc(36px * 1.2), calc(5vmin * 1.2), calc(52px * 1.2));
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--ekran-border);
    color: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: clamp(calc(0.9rem * 1.2), calc(2vmin * 1.2), calc(1.4rem * 1.2));
    z-index: 1002;
    transition: opacity 0.2s ease, transform 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.ekran-settings-btn:not(.ekran-settings-btn--revealed) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.ekran-settings-btn.ekran-settings-btn--revealed {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
}

.ekran-settings-btn.ekran-settings-btn--revealed:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(1.08);
}

/* ─── MODAL ──────────────────────────────────────────────── */
/* display: yalnızca none; açılışta JS style.display = flex verir (çifte display hatası yok). */
.ekran-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 10001;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: max(16px, env(safe-area-inset-top, 0px))
        max(20px, env(safe-area-inset-right, 0px))
        max(16px, env(safe-area-inset-bottom, 0px))
        max(20px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.ekran-modal-panel {
    background: #fff;
    color: #1e293b;
    border-radius: 20px;
    max-width: 900px;
    width: 100%;
    max-height: min(90vh, calc(100vh - 32px));
    max-height: min(90vh, calc(100dvh - 32px));
    min-height: 0;
    margin-top: auto;
    margin-bottom: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
    padding: 30px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Şifre modalı: içerik kısa; tam viewport yüksekliği zorlama */
.ekran-modal-panel--compact {
    max-height: min(92vh, calc(100vh - 32px));
    max-height: min(92vh, calc(100dvh - 32px));
    height: auto;
}

.ekran-modal-panel-top {
    flex: 0 0 auto;
}

.ekran-modal-panel h2 {
    margin: 0 0 8px 0;
    color: #0f172a;
    font-size: 1.6rem;
    font-weight: 700;
    flex-shrink: 0;
}

.ekran-modal-panel-top > p,
.ekran-modal-panel > p {
    margin: 0 0 20px 0;
    color: #64748b;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.ekran-modal-panel-top > p:last-child {
    margin-bottom: 16px;
}

.ekran-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-right: 8px;
}

@media (max-width: 700px) {
    .ekran-modal-grid {
        grid-template-columns: 1fr;
    }
}

.ekran-modal-section {
    background: #f8fafc;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.ekran-modal-section h3 {
    margin: 0 0 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
}

.ekran-modal-section label {
    display: block;
    margin: 10px 0 4px;
    font-size: 0.85rem;
    color: #475569;
}

.ekran-modal-section input[type="text"],
.ekran-modal-section select {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 0.9rem;
    box-sizing: border-box;
}

.ekran-modal-section select[multiple] {
    min-height: 100px;
}

.ekran-modal-actions {
    padding: 20px 0 0;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
    flex: 0 0 auto;
    flex-shrink: 0;
}

/* Reklam anahtarı + özel URL: Ekran dağılımı kaydırıcısının hemen altında */
.ekran-panel-reklam-quick {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.ekran-panel-reklam-quick .ekran-panel-reklam-ozel-label {
    margin-top: 0;
}

.ekran-panel-reklam-quick .ekran-panel-reklam-footnote {
    margin-top: 6px;
}

.ekran-panel-reklam-intro {
    color: #64748b;
    font-size: 0.8rem;
    margin: 0 0 12px;
    line-height: 1.45;
}

.ekran-panel-reklam-firma-ozet {
    padding: 12px 14px;
    border-radius: 10px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    margin-bottom: 4px;
}

.ekran-panel-reklam-firma-baslik {
    font-size: 0.8rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.ekran-panel-reklam-firma-aciklama {
    font-size: 0.72rem;
    color: #64748b;
    margin: 0 0 8px;
    line-height: 1.35;
}

.ekran-panel-reklam-firma-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 140px;
    overflow-y: auto;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #0f172a;
}

.ekran-panel-reklam-firma-list li {
    padding: 6px 8px;
    margin-bottom: 4px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    word-break: break-all;
    font-family: ui-monospace, monospace;
}

.ekran-panel-reklam-firma-durum {
    font-size: 0.75rem;
    color: #475569;
    margin: 10px 0 0;
    line-height: 1.4;
}

.ekran-panel-reklam-firma-durum.ekran-panel-reklam-durum--ok {
    color: #15803d;
}

.ekran-panel-reklam-firma-durum.ekran-panel-reklam-durum--warn {
    color: #b45309;
}

.ekran-panel-reklam-ozel-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}

.ekran-panel-reklam-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
}

.ekran-panel-reklam-footnote {
    color: #64748b;
    font-size: 0.75rem;
    display: block;
    margin-top: 8px;
    line-height: 1.35;
}

.ekran-btn {
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.ekran-btn-save {
    background: #22c55e;
    color: #fff;
}

.ekran-btn-save:hover {
    background: #16a34a;
}

.ekran-btn-cancel {
    background: #64748b;
    color: #fff;
}

.ekran-btn-cancel:hover {
    background: #475569;
}

.ekran-btn-reset {
    background: #f59e0b;
    color: #fff;
}

.ekran-btn-reset:hover {
    background: #d97706;
}

/* ─── BAŞLAT EKRANI ──────────────────────────────────────── */
.ekran-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 26, 0.97);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
    padding: 24px;
}

.ekran-overlay h1 {
    font-size: clamp(1.4rem, 4vw, 2.5rem);
    margin: 0 0 16px;
    font-weight: 800;
}

.ekran-overlay p {
    color: #94a3b8;
    margin-bottom: 32px;
    max-width: 480px;
    line-height: 1.6;
    font-size: clamp(0.9rem, 2vmin, 1.1rem);
}

.ekran-overlay button {
    padding: clamp(12px, 2.5vmin, 20px) clamp(28px, 6vmin, 56px);
    font-size: clamp(1rem, 2.5vmin, 1.2rem);
    font-weight: 700;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(34, 197, 94, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.ekran-overlay button:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 40px rgba(34, 197, 94, 0.45);
}

/* ─── HEARTBEAt ANİMASYON ─────────────────────────────────── */
@keyframes ekran-heartbeat {

    0%,
    100% {
        transform: scale(1);
        box-shadow: var(--ekran-glow);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 0 80px rgba(255, 45, 106, 0.5);
    }
}

.ekran-spotlight.animate {
    animation: ekran-heartbeat 1.4s ease-in-out infinite;
}

/* Sekmeli ayarlar – yardımcı sınıflar */
.ekran-readonly-fp {
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.8rem;
}

.ekran-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin-top: 0;
}

.ekran-check-row-spaced {
    margin-top: 10px;
    margin-bottom: 6px;
}

.ekran-label-spaced {
    margin-top: 14px;
}

.ekran-split-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.ekran-split-row input[type="range"] {
    flex: 1;
    cursor: pointer;
}

.ekran-split-val {
    font-size: 0.85rem;
    font-weight: 700;
    color: #475569;
    min-width: 38px;
}

.ekran-split-val:first-child {
    text-align: right;
}

.ekran-hint-block {
    display: block;
    color: #64748b;
    font-size: 0.8rem;
    margin-top: 6px;
}

.ekran-select-multiple {
    width: 100%;
    min-height: 140px;
}

.ekran-queue-grid {
    grid-template-columns: 1fr 1fr;
}

.ekran-modal-panel.ekran-settings-shell {
    padding: 0;
    max-width: min(1280px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
}

@media (max-width: 720px) {
    .ekran-queue-grid {
        grid-template-columns: 1fr;
    }
}