/* ── ERP Standardı tasarım sistemi: self-hosted Inter (HariboSovos portu) ── */
@font-face {
  font-family: 'InterVariable'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('/fonts/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'InterVariable'; font-style: italic; font-weight: 100 900;
  font-display: swap; src: url('/fonts/InterVariable-Italic.woff2') format('woff2');
}

:root {
  /* Kmp.Blazor grid token'ları → saas (koyu) paletine eşle. kmp-blazor.css app.css'ten ÖNCE yüklenir
     → bu eşleme RCL light varsayılanlarını ezer; grid saas dark temasını izler. */
  --kmp-primary: var(--accent); --kmp-primary-subtle: var(--surface-2); --kmp-primary-border-subtle: var(--border-2); --kmp-primary-text: var(--accent-2);
  --kmp-surface: var(--surface); --kmp-surface-muted: var(--surface-2); --kmp-body: var(--text); --kmp-secondary: var(--text-muted);
  --kmp-secondary-bg: var(--surface-2); --kmp-tertiary-bg: var(--surface-2); --kmp-border: var(--border);
  --kmp-danger: var(--danger-text); --kmp-danger-subtle: var(--danger-soft); --kmp-success: var(--ok-text);
  --kmp-radius-sm: var(--radius); --kmp-radius-md: var(--radius); --kmp-radius-lg: var(--radius-lg); --kmp-radius-pill: 999px;
  --kmp-shadow-xs: var(--shadow-sm); --kmp-shadow-lg: var(--shadow-lg); --kmp-font: var(--font-sans);
  --bg: #0c111b; --surface: #131a26; --surface-2: #1e293b; --border: #2a3344; --border-2: #334155;
  --text: #e2e8f0; --text-muted: #94a3b8; --text-dim: #64748b;
  /* ERP Standardı marka: confident indigo (HariboSovos --kmp-primary, koyu tema tonu) */
  --accent: #6366f1; --accent-2: #818cf8; --accent-rgb: 99, 102, 241;
  --ok: #16a34a; --ok-soft: #142a1e; --ok-text: #4ade80;
  --danger: #dc2626; --danger-soft: #2d1a1a; --danger-text: #f87171;
  --warn: #78350f; --warn-text: #fde68a; --warn-strong: #fbbf24; --short: #7c3aed; --short-text: #e9d5ff;
  --info-text: #93c5fd;
  --radius: 8px; --radius-lg: 12px;
  /* HariboSovos token ölçeği */
  --font-sans: 'InterVariable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --kmp-ease: cubic-bezier(.4, 0, .2, 1);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.18);
  --shadow-md: 0 4px 10px -2px rgba(0,0,0,.34), 0 2px 5px -2px rgba(0,0,0,.22);
  --shadow-lg: 0 14px 28px -8px rgba(0,0,0,.42), 0 5px 10px -5px rgba(0,0,0,.28);
  --focus-ring: 0 0 0 .2rem rgba(var(--accent-rgb), .35);
}

/* ── Light tema — html[data-theme="light"] token override'ları (varsayılan: dark).
   Yalnız token'lar değişir; bileşen kuralları iki temada da aynı kalır.
   Sidebar (.kmp-sidebar) ve /turkiye-live yayın ekranı BİLEREK hep koyu (hardcoded renkler). ── */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f7fb; --surface: #ffffff; --surface-2: #eef2f7; --border: #d8dfe9; --border-2: #c3ccd9;
  --text: #1f2937; --text-muted: #5b6b7f; --text-dim: #8494a7;
  --accent: #4f46e5; --accent-2: #6366f1; --accent-rgb: 79, 70, 229;
  --ok: #16a34a; --ok-soft: #dcfce7; --ok-text: #15803d;
  --danger: #dc2626; --danger-soft: #fee2e2; --danger-text: #b91c1c;
  --warn: #fef3c7; --warn-text: #92400e; --warn-strong: #b45309; --short: #7c3aed; --short-text: #6d28d9;
  --info-text: #1d4ed8;
  --shadow-sm: 0 1px 3px rgba(15,23,42,.10), 0 1px 2px rgba(15,23,42,.06);
  --shadow-md: 0 4px 10px -2px rgba(15,23,42,.12), 0 2px 5px -2px rgba(15,23,42,.08);
  --shadow-lg: 0 14px 28px -8px rgba(15,23,42,.16), 0 5px 10px -5px rgba(15,23,42,.10);
}

/* Inter + ince tipografi (tabular sayılar, font-feature, antialias) — tüm uygulama */
html, body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02','cv03','cv04','cv11','ss01';
}
h1, h2, h3, .section-title, .strip-title, .metric-value { letter-spacing: -.011em; }
.metric-value, .tab-badge, .metric-cadence { font-variant-numeric: tabular-nums; }

/* Global focus discipline: mouse-click shows no outline; keyboard Tab shows ring */
:focus:not(:focus-visible) { outline: none; }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ── Bootstrap-benzeri utility shim — Bootstrap YÜKLÜ DEĞİL; /kanalim vb. sayfaların
   kullandığı utility sınıflarının token'lı karşılıkları (iki temada da çalışır). ── */
.text-muted { color: var(--text-muted) !important; }
.small { font-size: .82rem; }
.fs-4 { font-size: 1.35rem; }
.fw-semibold { font-weight: 600; }
.text-end { text-align: end !important; }
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
.align-items-center { align-items: center; }
.align-items-baseline { align-items: baseline; }
.align-self-center { align-self: center; }
.justify-content-between { justify-content: space-between; }
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: 1rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: 1rem; }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; }
.p-2 { padding: .5rem; } .py-2 { padding-top: .5rem; padding-bottom: .5rem; } .py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.container-fluid { width: 100%; box-sizing: border-box; }
.border { border: 1px solid var(--border); }
.rounded { border-radius: var(--radius); }
.h-100 { height: 100%; box-sizing: border-box; }
[role="button"] { cursor: pointer; }
.row { display: flex; flex-wrap: wrap; margin: 0 -.5rem; }
.row.g-3 { row-gap: 1rem; }
.row > * { padding: 0 .5rem; box-sizing: border-box; }
.row .card { margin-bottom: 0; padding: .5rem 1rem; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
@media (min-width: 992px) { .col-lg-3 { flex: 0 0 25%; max-width: 25%; } }
.border-primary { border-color: var(--accent) !important; }

.badge { display: inline-block; padding: .24rem .5rem; font-size: .72rem; font-weight: 600;
         border-radius: 6px; line-height: 1; white-space: nowrap; }
.text-bg-success { background: var(--ok-soft); color: var(--ok-text); }
.text-bg-warning { background: var(--warn); color: var(--warn-text); }
.text-bg-danger { background: var(--danger-soft); color: var(--danger-text); }
.text-bg-info { background: var(--surface-2); color: var(--info-text); }
.text-bg-secondary { background: var(--surface-2); color: var(--text-muted); }
.text-bg-light { background: var(--surface-2); color: var(--text); }

.alert { border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .9rem;
         font-size: .88rem; margin-bottom: 1rem; background: var(--surface); color: var(--text); }
.alert-info { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
       background: var(--surface-2); color: var(--text); border: 1px solid var(--border-2);
       border-radius: var(--radius); padding: .4rem .8rem; font-size: .85rem; cursor: pointer;
       text-decoration: none; transition: background .15s var(--kmp-ease), border-color .15s var(--kmp-ease), color .15s var(--kmp-ease); }
.btn:hover { border-color: var(--accent); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-sm { padding: .22rem .55rem; font-size: .78rem; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn-outline-secondary { background: transparent; color: var(--text-muted); }
.btn-outline-secondary:hover { background: var(--surface-2); color: var(--text); }

.form-control { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--text);
                border: 1px solid var(--border); border-radius: var(--radius); padding: .45rem .65rem;
                font-size: .88rem; outline: none; transition: border-color .15s var(--kmp-ease); }
.form-control:focus { border-color: var(--accent); }
.form-control::placeholder { color: var(--text-dim); }
.form-control-sm { padding: .3rem .55rem; font-size: .8rem; }

/* ── Shared components ─────────────────────────────────────── */

/* Spinner */
.spinner { display: inline-block; width: 14px; height: 14px;
           border: 2px solid rgba(255,255,255,.3); border-top-color: white;
           border-radius: 50%; animation: spin .7s linear infinite; }
.spinner-sm { width: 11px; height: 11px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Segment control */
.segment-ctrl { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.seg-btn { background: transparent; color: var(--text-muted); border: none; padding: .3rem .75rem;
           font-size: .82rem; cursor: pointer; min-height: 44px; transition: background .15s, color .15s; }
.seg-btn:hover:not(:disabled) { background: var(--surface-2); }
.seg-btn.seg-active { background: var(--accent); color: white; }
.seg-btn:disabled { opacity: .4; cursor: default; }

/* Toggle switch */
.auto-toggle { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; min-height: 44px; user-select: none; }
.auto-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.auto-toggle-track { position: relative; width: 46px; height: 26px; background: var(--border);
                     border-radius: 999px; transition: background .2s cubic-bezier(.4,0,.2,1); flex-shrink: 0; }
.auto-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
                     background: var(--text-muted); transition: transform .2s cubic-bezier(.4,0,.2,1), background .2s; }
.auto-toggle input:checked + .auto-toggle-track { background: var(--ok); }
.auto-toggle input:checked + .auto-toggle-track .auto-toggle-thumb { transform: translateX(20px); background: #fff; }
.auto-toggle-text { font-size: .85rem; color: var(--text-muted); font-weight: 600; letter-spacing: .03em; }

/* Metric card */
.metric-card { background: var(--surface-2); border-radius: var(--radius); padding: .55rem .8rem; min-width: 0; }
.metric-label { color: var(--text-muted); font-size: .72rem; white-space: nowrap; }
.metric-value { color: var(--text); font-size: 1.4rem; font-weight: 600; line-height: 1.1; }
.metric-accent { color: var(--accent-2); }
.metric-suffix { color: var(--text-dim); font-size: .8rem; font-weight: 400; }
.metric-cadence { color: var(--text); font-size: .95rem; font-weight: 600; line-height: 1.2; }

/* ── Panel (migrated from Queue.razor) ── */

/* iOS zoom önleme: tüm form elemanları min 16px font */
input, textarea, select, button { font-size: max(16px, 1em); -webkit-tap-highlight-color: transparent; }

.container { max-width: 960px; margin: 2rem auto; padding: 0 .9rem; font-family: var(--font-sans); }
.notif-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.notif-status { font-size: .82rem; }
.notif-ok  { color: var(--ok-text); }
.notif-err { color: var(--danger-text); }

/* Yeni video kartı */
.new-video-card { margin-bottom: 1.5rem; }
.new-video-inner { padding: .25rem 0; }
/* Üret (Yeni Video) — 2 kolon: sol konu+ayarlar | sağ plan önizleme */
.cv-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: 1.5rem; align-items: start; margin-top: .5rem; }
.cv-block { margin-bottom: 1.1rem; }
.cv-label { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
            color: var(--text-dim); margin-bottom: .55rem; }
.cv-settings { display: flex; flex-direction: column; gap: .65rem; max-width: 480px; }
.setting-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: .9rem; min-height: 38px; }
.setting-label { color: var(--text-dim); font-size: .82rem; font-weight: 500; text-align: right; }
.setting-ctrl { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.setting-row > .segment-ctrl, .setting-row > .setting-ctrl { justify-self: start; }
.cv-cta { width: 100%; justify-content: center; }
.cv-hint { border: 1px dashed var(--border); border-radius: 12px; padding: 1.75rem 1.4rem;
           background: linear-gradient(180deg, rgba(var(--accent-rgb),.05), transparent);
           display: flex; flex-direction: column; align-items: center; text-align: center; gap: .8rem; min-height: 180px;
           justify-content: center; }
.cv-hint__icon { font-size: 1.9rem; line-height: 1; opacity: .92; }
.cv-hint__text { margin: 0; color: var(--text-muted); font-size: .88rem; line-height: 1.65; max-width: 36ch; }
.cv-hint__text strong { color: var(--accent-2); font-weight: 600; }
@media (max-width: 992px) {
  .cv-grid { grid-template-columns: 1fr; gap: 1rem; }
  .cv-settings { grid-template-columns: 1fr; }
}
.section-title { margin: 0 0 .75rem 0; color: var(--text); font-size: 1.1rem; }

/* Otomasyon kartı */
.automation-card { display: block; margin-bottom: 1.5rem; }
.auto-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.auto-header .section-title { margin: 0; }
.auto-hint { font-size: .82rem; margin: .35rem 0 .9rem; line-height: 1.4; }
.auto-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-bottom: .8rem; }
.auto-num { width: 70px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
            padding: .35rem .5rem; text-align: center; }
.auto-num:focus { border-color: var(--accent); outline: none; }
.auto-status-row { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: .25rem; }
.auto-stat { font-size: .85rem; color: var(--text-muted); }
.auto-stat strong { color: var(--text); }
/* Konu havuzu */
.pool-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-bottom: .6rem; }
.pool-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.add-idea-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.add-idea-input { flex: 1; min-width: 180px; background: var(--bg); color: var(--text); border: 1px solid var(--border);
                  border-radius: 8px; padding: .5rem .7rem; font-size: .9rem; outline: none;
                  transition: border-color .15s cubic-bezier(.4,0,.2,1); }
.add-idea-input:focus { border-color: var(--accent); }
.add-idea-input::placeholder { color: var(--text-dim); }
.add-idea-fmt { flex-shrink: 0; }
.pool-empty { font-size: .85rem; margin: .3rem 0; }
.pool-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.pool-item { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; background: var(--surface);
             border: 1px solid var(--border); border-radius: 8px; padding: .5rem .65rem; }
.pool-text { flex: 1; min-width: 160px; color: var(--text); font-size: .88rem; }
.pool-badge { background: var(--surface-2); color: var(--info-text); border-radius: 6px; padding: .12rem .45rem;
              font-size: .72rem; white-space: nowrap; }
.pool-lang { color: var(--text-muted); }
.pool-src { color: var(--accent-2); }
/* .pool-del removed — no usages (migrated to kmp-btn kmp-btn--danger kmp-btn--sm) */
/* Fikre özel ayar badge'i (ses/altyazı override) */
.pool-ovr { background: var(--ok-soft); color: var(--ok-text); }
/* Per-fikir inline editör — satırın altına tam genişlik açılır */
.pool-editor { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
               margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.pe-field { display: flex; flex-direction: column; gap: .2rem; font-size: .72rem; color: var(--text-muted); }
.pe-field select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
                   padding: .35rem .5rem; font-size: .82rem; min-height: 36px; }
.pe-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.pe-seg button { background: transparent; color: var(--text-muted); border: none; padding: .35rem .65rem;
                 font-size: .78rem; cursor: pointer; min-height: 36px; }
.pe-seg button.pe-on { background: var(--accent); color: #fff; }
.pe-cap { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--text-muted); }

/* ── Playlist yönetim sekmesi ── */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pl-help { margin: .25rem 0 1rem; font-size: .82rem; line-height: 1.5; }
.pl-help code { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: .05rem .3rem; font-size: .92em; }
.pl-list { display: flex; flex-direction: column; gap: 1.4rem; }
.pl-theme { display: flex; flex-direction: column; gap: .5rem; }
.pl-theme-head { font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim);
                 font-weight: 600; padding-left: .15rem; }
.pl-row { display: flex; align-items: flex-start; gap: .75rem; padding: .8rem .9rem;
          background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
          transition: border-color .15s, box-shadow .15s; }
.pl-row:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); box-shadow: var(--shadow-sm); }
.pl-lang { margin-top: .15rem; }
.pl-meta { flex: 1; min-width: 0; }
.pl-title { color: var(--text); font-size: .9rem; font-weight: 600; }
.pl-desc-text { font-size: .78rem; line-height: 1.4; margin-top: .1rem; }
.pl-status { flex-shrink: 0; }
.pl-pending { color: var(--text-muted); }
.pl-edit { flex: 1; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.pl-input { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
            padding: .5rem .6rem; font-size: .9rem; width: 100%; box-sizing: border-box; }
.pl-desc { resize: vertical; font-family: inherit; line-height: 1.4; }
.pl-edit-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pl-livenote { font-size: .76rem; }

/* Otomasyon ses/altyazı satırı */
.auto-av { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-bottom: .4rem; }
.auto-av-hint { margin-top: .1rem; }

/* Açıklama alt-metni textarea */
.desc-footer-input {
    width: 100%; box-sizing: border-box; background: var(--bg); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px; padding: .5rem .65rem;
    font-size: .9rem; line-height: 1.4; resize: vertical; outline: none;
    transition: border-color .15s cubic-bezier(.4,0,.2,1);
}
.desc-footer-input:focus { border-color: var(--accent); }
.desc-footer-input::placeholder { color: var(--text-dim); }
/* Otomasyon — bölüm başlıkları + açıklama bloğu */
.auto-section-label { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em;
                      color: var(--text-muted); font-weight: 700; margin: .3rem 0 .7rem; }
.desc-footer-block { display: flex; flex-direction: column; gap: .45rem; align-items: stretch; }
.desc-footer-actions { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.desc-footer-actions .auto-hint { margin: 0; }
.desc-save { min-height: 36px; padding: .3rem .9rem; font-size: .82rem; }

/* Serbest metin */
.free-text-row { margin-bottom: .6rem; }
.free-input { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--text);
              border: 1px solid var(--border); border-radius: 8px; padding: .6rem .85rem;
              font-size: 1rem; outline: none;
              transition: border-color .15s cubic-bezier(.4,0,.2,1); }
.free-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.18); }
.free-input:disabled { opacity: .5; }
.free-input::placeholder { color: var(--text-dim); }

/* Bölge seçici (konu keşfi → Trendler çipinde) */
.trend-region { flex: 0 0 auto; min-width: 130px; background: var(--bg); color: var(--text); border: 1px solid var(--border);
                border-radius: 8px; padding: .35rem .6rem; font-size: .82rem; cursor: pointer; font-weight: 600; }
.trend-region:focus { border-color: var(--accent); outline: none; }
.trend-region:disabled { opacity: .5; cursor: default; }

/* ── Konu keşfi: etiket çipleri ── */
.cv-label-hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-muted); font-size: .72rem; }
.tag-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.tag-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--surface-2); color: var(--text-muted);
            border: 1px solid var(--border); border-radius: 999px; padding: .4rem .8rem; font-size: .82rem; font-weight: 600;
            cursor: pointer; line-height: 1; white-space: nowrap;
            transition: border-color .15s cubic-bezier(.4,0,.2,1), background .15s, color .15s, transform .12s, box-shadow .15s; }
.tag-chip:hover:not(:disabled) { border-color: var(--accent); color: var(--text); transform: translateY(-1px); }
.tag-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.3); }
.tag-chip--on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(var(--accent-rgb),.35); }
.tag-chip--on:hover:not(:disabled) { color: #fff; transform: translateY(-1px); }
.tag-chip:disabled { opacity: .5; cursor: default; }
.tag-chip__emoji { font-size: .95rem; }

/* ── Konu keşfi: bölge satırı (yalnız Trendler çipinde) ── */
.discover-region-row { display: flex; align-items: center; gap: .5rem; margin-top: .65rem; flex-wrap: wrap; }
.discover-region-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.rule-source { color: var(--text-muted); font-size: .8rem; line-height: 1.35; }

/* ── Konu keşfi: öneri kartları ── */
.suggest-busy { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; color: var(--text-muted); font-size: .85rem; }
.suggest-hint, .suggest-empty { margin: .75rem 0 0; font-size: .82rem; color: var(--text-muted); line-height: 1.55; }
.suggest-list { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.suggest-card { display: flex; align-items: center; gap: .7rem; background: var(--surface); border: 1px solid var(--border);
                border-radius: 10px; padding: .55rem .55rem .55rem .8rem; transition: border-color .15s, box-shadow .15s, transform .12s; }
.suggest-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.suggest-text { flex: 1; min-width: 0; color: var(--text); font-size: .88rem; line-height: 1.4; }
.suggest-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.suggest-edit { background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted);
                width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
                cursor: pointer; font-size: .9rem; transition: border-color .15s, color .15s, background .15s; }
.suggest-edit:hover:not(:disabled) { border-color: var(--accent); color: var(--text); background: var(--surface-2); }
.suggest-edit:disabled { opacity: .5; cursor: default; }

/* Seçenekler satırı */
.options-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-bottom: .9rem; }
.option-group { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.option-label { color: var(--text-muted); font-size: .82rem; white-space: nowrap; }
.cb-label { color: var(--text-muted); font-size: .85rem; display: inline-flex; align-items: center; gap: .35rem;
            cursor: pointer; min-height: 38px; padding: 0 .5rem; border: 1px solid var(--border); border-radius: 8px;
            transition: border-color .15s, background .15s; }
.cb-label:hover { border-color: var(--accent); }
.cb-label input[type=checkbox] { accent-color: var(--accent); cursor: pointer; width: 15px; height: 15px; }

/* Ses seçimi dropdown + önizleme butonu */
.voice-select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
                padding: 0 .6rem; min-height: 38px; font-size: .85rem; cursor: pointer; flex: 1; min-width: 0; max-width: 240px;
                transition: border-color .15s cubic-bezier(.4,0,.2,1); }
.voice-select:focus { border-color: var(--accent); outline: none; }
.voice-select:disabled { opacity: .5; cursor: default; }
.preview-btn { background: var(--surface-2); color: var(--accent-2); border: 1px solid var(--border); border-radius: 8px;
               width: 38px; height: 38px; flex-shrink: 0; padding: 0; font-size: .95rem; cursor: pointer;
               display: inline-flex; align-items: center; justify-content: center;
               transition: background .15s cubic-bezier(.4,0,.2,1), color .15s, border-color .15s; }
.preview-btn:hover:not(:disabled) { background: var(--accent); color: white; border-color: var(--accent); }
.preview-btn:disabled { opacity: .5; cursor: default; }

/* Plan satırı */
.plan-row { margin-bottom: .6rem; }

/* Yeni Video — boş durum: "nasıl çalışır" rehberi (dashed placeholder yerine) */
.cv-guide { border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem 1.4rem; height: 100%; box-sizing: border-box;
            background: linear-gradient(180deg, rgba(var(--accent-rgb),.06), rgba(var(--accent-rgb),.012));
            display: flex; flex-direction: column; gap: 1.15rem; }
.cv-guide__head { display: flex; align-items: center; gap: .5rem; color: var(--text); font-weight: 600; font-size: .92rem; }
.cv-guide__spark { font-size: 1.05rem; }
.cv-guide__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.05rem; }
.cv-guide__step { display: grid; grid-template-columns: 28px 1fr; gap: .8rem; align-items: start; }
.cv-guide__num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
                 background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: .82rem;
                 font-weight: 700; box-shadow: 0 2px 8px rgba(79,70,229,.4); }
.cv-guide__step > div { display: flex; flex-direction: column; gap: .18rem; }
.cv-guide__step strong { color: var(--text); font-size: .9rem; font-weight: 600; }
.cv-guide__step span { color: var(--text-muted); font-size: .82rem; line-height: 1.5; }

/* Hata */
.plan-error { color: var(--danger-text); font-size: .88rem; margin: .4rem 0 0; }

/* Önizleme kartı */
.preview-card { background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px;
                padding: .85rem 1rem; margin: .6rem 0; }
.preview-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .65rem; }
.preview-meta strong { color: var(--text); font-size: .95rem; flex: 1; min-width: 200px; }
.preview-badge { background: var(--surface-2); color: var(--info-text); border-radius: 6px;
                 padding: .15rem .5rem; font-size: .75rem; white-space: nowrap; }
/* preview-badge-select: badge içinde küçük select/picker barındırır */
.preview-badge-select { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .4rem; }
.tpl-select { background: transparent; color: var(--info-text); border: none; border-bottom: 1px solid var(--border-2);
              font-size: .75rem; cursor: pointer; padding: 0 .1rem; outline: none; min-height: 0; }
.tpl-select:focus { border-bottom-color: var(--accent); }
.tpl-select:disabled { opacity: .45; cursor: default; }
.preview-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.preview-note { display: flex; align-items: center; gap: .45rem; margin: .55rem 0 0; color: var(--text-muted); font-size: .82rem; line-height: 1.45; }
.script-preview { display: flex; flex-direction: column; gap: .5rem; margin-top: .7rem; }
.script-edit-title,
.script-edit-desc,
.script-edit-segment {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .5rem .65rem;
  font-family: var(--font-sans);
  font-size: .86rem;
  line-height: 1.45;
}
.script-edit-title { font-weight: 700; }
.script-edit-desc,
.script-edit-segment { resize: vertical; }
.script-edit-title:focus,
.script-edit-desc:focus,
.script-edit-segment:focus { outline: none; border-color: var(--accent); }
.live-context { margin-top: .75rem; border: 1px solid var(--border); border-radius: 8px; padding: .65rem .7rem; background: color-mix(in srgb, var(--surface-2) 80%, transparent); }
.live-context__head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; color: var(--text-muted); font-size: .76rem; margin-bottom: .45rem; }
.live-context__head strong { color: var(--text); font-size: .82rem; }
.live-context__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .65rem; }
.live-context__grid span { color: var(--text-muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-context__grid b { color: var(--accent-2); font-weight: 700; }

/* Üretim durumu */
.produce-status { margin: .5rem 0 0 0; font-size: .88rem; }
.produce-ok  { color: var(--ok-text); }
.produce-err { color: var(--danger-text); }

/* Ayırıcı + katalog satırı */
.divider { border: none; border-top: 1px solid var(--surface-2); margin: 1rem 0 .85rem; }
.catalog-row { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.topic-select { flex: 1; min-width: 200px; background: var(--bg); color: var(--text);
               border: 1px solid var(--border); border-radius: 8px; padding: .45rem .65rem;
               font-size: .9rem; cursor: pointer; }

/* Durum şeridi */
.status-strip { border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.25rem;
               margin-bottom: 1.5rem; background: var(--surface); }
.strip-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.strip-title { margin: 0; color: var(--text-muted); font-size: .9rem; text-transform: uppercase;
              letter-spacing: .05em; }
.strip-row { display: flex; align-items: center; gap: .7rem; padding: .6rem .85rem;
            border-radius: 10px; font-size: .9rem; flex-wrap: wrap;
            background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--border);
            transition: border-color .15s, background .15s; }
.strip-row + .strip-row { margin-top: .5rem; }
.strip-row-active   { border-left-color: var(--accent); }
.strip-row-failed   { border-left-color: #ef4444; background: rgba(239,68,68,.06); }
.strip-row-success  { border-left-color: #22c55e; background: rgba(34,197,94,.06); }
.strip-row-approved { border-left-color: #f59e0b; background: rgba(245,158,11,.06); }
.strip-row-cancelled { border-left-color: var(--text-muted); }
.strip-icon { font-size: 1.05rem; flex-shrink: 0; }
.strip-label { color: var(--text); flex: 1; min-width: 160px; font-weight: 500; }
.strip-key { font-size: .76rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.strip-actions { display: flex; gap: .45rem; flex-wrap: wrap; }
/* Üretim ilerleme çubuğu (aktif işler): aşama yüzdesi + geçen/~kalan süre */
.strip-progress { flex-basis: 100%; display: flex; align-items: center; gap: .6rem; margin-top: .2rem; }
.strip-progress-track { flex: 1; height: 6px; border-radius: 999px; background: rgba(148,163,184,.18); overflow: hidden; }
.strip-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2));
            transition: width .4s cubic-bezier(.4,0,.2,1); }
.strip-progress-meta { font-size: .74rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .strip-progress-fill { transition: none; } }
/* Ses seçicide: seçilen sese eşlenen Mira karakter önizlemesi */
.mira-preview { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.mira-preview-img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; object-position: 50% 12%;
            border: 1px solid var(--border); background: var(--bg); flex-shrink: 0; }
.short-btn-card { margin-top: .25rem; align-self: flex-start; }
.strip-short-status { font-size: .8rem; flex-basis: 100%; margin-top: .15rem; }

/* Panel kartları — tek kolon kapsayıcı; iç düzen bileşene aittir (ör. .cv-grid).
   (Eski onay-kartı 2-kolon grid'iydi; onay kartları artık .approval-card kullanıyor.) */
.card { display: block; border: 1px solid var(--border);
        border-radius: 12px; padding: 1.25rem; margin-bottom: 1.5rem; background: var(--surface); color: var(--text);
        box-shadow: var(--shadow-md); }
.card video { width: 100%; border-radius: 8px; background: #000; }
.meta { display: flex; flex-direction: column; gap: .6rem; }
.meta label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--text-muted); }
.meta input, .meta textarea { background: var(--bg); color: var(--text); border: 1px solid var(--border);
        border-radius: 6px; padding: .5rem .65rem; font-size: .95rem; width: 100%; box-sizing: border-box; }
.actions { display: flex; gap: .75rem; margin-top: .25rem; flex-wrap: wrap; }
/* Onayla/Reddet düğmeleri eşit genişlikte (Task 2'de kaldırılan flex:1 geri eklendi) */
.approval-action { flex: 1; justify-content: center; }
.muted { color: var(--text-dim); }

/* Tab navigation */
/* tab-nav-row: sekmeler + kalıcı "＋ Yeni Video" CTA yan yana (CTA sağa hizalı) */
.tab-nav-row { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.tab-nav-row .tab-nav { flex: 1; margin-bottom: 0; border-bottom: none; }
.tab-nav-row { border-bottom: 1px solid var(--border); margin: 1rem 0 1.25rem; padding-bottom: 0; }
.tab-nav-cta { margin-bottom: .25rem; }
.tab-nav { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin: 1rem 0 1.25rem; flex-wrap: wrap; }
/* Boş-durum: nötr bilgi + eyleme-dönük CTA */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: .9rem;
               padding: 2.5rem 1rem; text-align: center; }
.empty-state__msg { color: var(--text-muted); font-size: .95rem; margin: 0; }
.tab { background: transparent; border: none; color: var(--text-muted); padding: .6rem .9rem; font-size: .95rem; cursor: pointer; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; }
.tab:hover { color: var(--text); }
.tab-active { color: var(--text); border-bottom-color: var(--accent); }
.tab-badge { background: var(--accent); color: #fff; border-radius: 999px; font-size: .72rem; padding: .05rem .45rem; min-width: 1.2em; text-align: center; }

/* ── Stüdyo giriş kartları (Üret sekmesi) ── */
.studio-entry { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.1rem; }
@media (max-width: 640px) { .studio-entry { grid-template-columns: 1fr; } }
.studio-entry__card {
    display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem;
    background: var(--card, rgba(255,255,255,.03)); border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: .8rem; text-decoration: none; color: var(--text);
    transition: border-color .15s, transform .15s, background .15s;
}
.studio-entry__card:hover { border-color: var(--accent); transform: translateY(-2px); }
.studio-entry__icon { font-size: 1.6rem; line-height: 1; }
.studio-entry__body { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.studio-entry__body strong { font-size: .98rem; }
.studio-entry__body small { color: var(--text-muted); font-size: .78rem; }
.studio-entry__go { color: var(--accent); font-size: 1.2rem; font-weight: 700; }

/* ── Giriş ekranı ── */
.login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem; position: relative; overflow: hidden;
}
/* Radial glow: yumuşak indigo halo arka planda */
.login-glow {
    position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);
    width: 640px; height: 480px; border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(var(--accent-rgb),.18) 0%, rgba(var(--accent-rgb),.06) 45%, transparent 70%);
    pointer-events: none; z-index: 0;
}
.login-card {
    position: relative; z-index: 1;
    width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: .95rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 2.25rem 2rem; box-shadow: var(--shadow-lg);
}
/* Marka çipi: ikon + isim */
.login-brand-chip {
    display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .25rem;
}
.login-brand-icon {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 2px 10px rgba(var(--accent-rgb),.45); font-size: 1.1rem; line-height: 1;
}
.login-brand-name { font-size: 1.55rem; font-weight: 800; letter-spacing: -.025em; color: var(--text); }
.login-sub { margin: -.3rem 0 .3rem; color: var(--text-muted); font-size: .9rem; }
.login-error {
    background: var(--danger-soft); color: var(--danger-text); border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border)); border-radius: 8px;
    padding: .5rem .7rem; font-size: .85rem; margin: 0;
}
.login-field { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: var(--text-muted); }
.login-field input {
    background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
    padding: .6rem .7rem; font-size: 1rem; outline: none;
    transition: border-color .15s var(--kmp-ease), box-shadow .15s var(--kmp-ease);
}
.login-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.18); }
.login-submit { width: 100%; justify-content: center; margin-top: .25rem; }
/* login-btn → kmp-btn kmp-btn--primary kmp-btn--lg .login-submit (migrated) */

/* ── Hesap çipi + çıkış (üst bar) ── */
.acct-chip { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border-2); border-radius: 999px;
             padding: .25rem .7rem; font-size: .8rem; white-space: nowrap; }
.logout-form { margin: 0; display: inline; }
/* .logout-btn removed — no usages (migrated to kmp-topbar__logout in MainLayout) */
.admin-link { background: var(--surface-2); color: var(--info-text); border: 1px solid var(--border-2); border-radius: 8px;
              padding: .3rem .7rem; font-size: .8rem; text-decoration: none; min-height: 36px;
              display: inline-flex; align-items: center; }
.admin-link:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Admin yönetim ekranları ── */
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
              flex-wrap: wrap; margin-bottom: 1rem; }
.admin-form { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.admin-in { width: auto; min-width: 160px; flex: 0 1 auto; }
.admin-reset { background: var(--bg); border-radius: 8px; }

/* ── Kanal seçici barı ── */
.channel-bar { display: flex; align-items: center; gap: .6rem; margin: .25rem 0 .5rem;
               padding: .5rem .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.channel-label { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.channel-select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
                  padding: .35rem .6rem; font-size: .95rem; min-height: 40px; }
.channel-active { color: var(--text); font-weight: 600; }
.channel-empty { color: var(--text-muted); font-size: .88rem; gap: .75rem; }

/* Tablet/mobil: 800px ve altı */
@media (max-width: 800px) {
    .container { padding: 0 .9rem; }
    .card { grid-template-columns: 1fr; }
    .card video { width: 100%; }
    .free-input { width: 100%; }
    .catalog-row { flex-direction: column; align-items: stretch; }
    .catalog-row .topic-select { min-width: 0; width: 100%; }
    .strip-row { flex-wrap: wrap; }
    .notif-bar { flex-wrap: wrap; }
}

/* Küçük mobil: 480px ve altı */
@media (max-width: 480px) {
    .preview-meta { flex-direction: column; align-items: flex-start; }
    .preview-meta strong { min-width: 0; }
    .options-row { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .option-group { flex-wrap: wrap; }
}

/* ── Cila (polish): sabit-yükseklik sekmeler + erişilebilir focus + ince dokunuşlar ── */

/* Sekme içeriği sabit zemin: kısa sekmeye geçince panel yukarı ÇÖKMEZ/ZIPLAMAZ.
   (En uzun sekme bunu aşabilir; amaç sekmeler-arası sıçramayı yok etmek.) */
.tab-panel { min-height: 540px; }

/* Sekmeler: yumuşak geçiş + üstte hafif vurgu zemini */
.tab { transition: color .15s cubic-bezier(.4,0,.2,1), background .15s, border-color .15s; border-radius: 6px 6px 0 0; }
.tab:hover { background: var(--surface); }
.tab-active { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* Erişilebilir klavye-focus halkası: fareyle tıklamada görünmez, Tab ile gezerken belirir.
   .kmp-btn:focus-visible yukarıdaki tanımında box-shadow ile ele alınır; diğer etkileşimli ögelere outline. */
.tab:focus-visible,
.seg-btn:focus-visible,
.admin-link:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
}

/* Metin seçimi + ince kaydırma çubuğu teması (koyu temaya uyumlu) */
::selection { background: color-mix(in srgb, var(--accent-2) 38%, transparent); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #475569; }

@media (max-width: 800px) {
    /* Mobilde sabit zemin gereksiz dikey boşluk yaratmasın */
    .tab-panel { min-height: 0; }
}

/* ── KmpConfirm: async onay diyaloğu (ERP Standardı — window.confirm/inline yerine) ── */
.kmp-confirm-backdrop {
    position: fixed; inset: 0; background: rgba(7,11,18,.62); backdrop-filter: blur(2px);
    z-index: 1000; animation: kmp-fade .15s var(--kmp-ease);
}
.kmp-confirm {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1001;
    width: min(420px, calc(100vw - 2rem)); background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    overflow: hidden; animation: kmp-pop .18s var(--kmp-ease);
}
.kmp-confirm__head { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem .25rem; }
.kmp-confirm__icon { font-size: 1.1rem; }
.kmp-confirm--danger .kmp-confirm__icon { color: var(--danger-text); }
.kmp-confirm__title { font-weight: 600; font-size: 1.02rem; }
.kmp-confirm__body { padding: .5rem 1.25rem 1rem; color: var(--text-muted); font-size: .92rem; line-height: 1.5; }
.kmp-confirm__foot { display: flex; justify-content: flex-end; gap: .6rem; padding: .25rem 1.25rem 1.1rem; }
.kmp-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem;
           border-radius: var(--radius); font-weight: 600; font-size: .95rem; line-height: 1;
           cursor: pointer; border: 1px solid transparent; min-height: 40px;
           transition: transform .15s var(--kmp-ease), background .15s var(--kmp-ease),
                       box-shadow .15s var(--kmp-ease), color .15s var(--kmp-ease), filter .15s var(--kmp-ease);
           background: var(--surface-2); color: var(--text); }
.kmp-btn:hover { transform: translateY(-1px); }
.kmp-btn:active { transform: translateY(0); }
.kmp-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kmp-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.kmp-btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.kmp-btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.kmp-btn--ghost { background: transparent; color: var(--text-dim); border-color: var(--border); }
.kmp-btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.kmp-btn--danger { background: transparent; color: var(--danger-text); border-color: var(--border); }
.kmp-btn--danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.kmp-btn--warn { background: transparent; color: var(--warn-text); border-color: color-mix(in srgb, var(--warn-text) 45%, var(--border)); }
.kmp-btn--warn:hover { background: color-mix(in srgb, var(--warn-text) 16%, transparent); }
.kmp-btn--sm { padding: .4rem .7rem; font-size: .85rem; min-height: 34px; }
.kmp-btn--lg { padding: .7rem 1.3rem; font-size: 1.05rem; min-height: 50px; }
@keyframes kmp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kmp-pop { from { opacity: 0; transform: translate(-50%,-46%) scale(.97); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }

/* ── KmpModal: sürükle/boyutlandır modal (ERP Standardı — kmp-modal.js) ── */
.kmp-modal-backdrop {
    position: fixed; inset: 0; background: rgba(7,11,18,.62); backdrop-filter: blur(2px);
    z-index: 1000; animation: kmp-fade .15s var(--kmp-ease);
}
.kmp-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1001;
    max-width: calc(100vw - 1.5rem); max-height: 88vh; display: flex; flex-direction: column;
    background: var(--surface); color: var(--text); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
    animation: kmp-pop .18s var(--kmp-ease);
}
.kmp-modal-head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0; }
.kmp-modal-head__title { font-weight: 600; font-size: 1rem; flex: 1; }
.kmp-modal-x { margin-left: auto; background: transparent; border: none; color: var(--text-muted);
    font-size: 1rem; cursor: pointer; width: 30px; height: 30px; border-radius: 6px; line-height: 1; }
.kmp-modal-x:hover { background: var(--border); color: var(--text); }
.kmp-modal-x:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kmp-modal-body { padding: 1.1rem; overflow: auto; flex: 1; }
.kmp-modal-foot { display: flex; justify-content: flex-end; gap: .6rem; padding: .8rem 1.1rem;
    border-top: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0; }
.kmp-modal-resize { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 0 50%, var(--border-2) 50% 60%, transparent 60% 70%, var(--border-2) 70% 80%, transparent 80%); }

/* ── Drawer shell (ERP Standardı — HariboSovos portu; push/collapse + mobil overlay) ── */
.kmp-shell { display: flex; min-height: 100vh; }
.kmp-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 248px; z-index: 60; overflow: hidden;
    background: linear-gradient(180deg, #0f1729, #131c30); border-right: 1px solid rgba(148,163,184,.14);
    display: flex; flex-direction: column; transition: width .22s var(--kmp-ease), transform .22s var(--kmp-ease);
}
.kmp-sidebar__brand { display: flex; align-items: center; gap: .6rem; padding: 0 1.1rem; height: 60px;
    border-bottom: 1px solid rgba(148,163,184,.14); flex-shrink: 0; }
.kmp-sidebar__logo { width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; object-fit: cover;
    display: block; box-shadow: 0 2px 8px rgba(79,70,229,.35); }
.kmp-sidebar__brandtext { font-weight: 700; letter-spacing: -.01em; white-space: nowrap; transition: opacity .15s; }
.kmp-sidebar__nav { display: flex; flex-direction: column; gap: .2rem; padding: .75rem .6rem; }
.kmp-navlink { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: 8px;
    color: rgba(226,232,240,.82); text-decoration: none; font-size: .9rem; font-weight: 500; white-space: nowrap;
    transition: background .15s, color .15s; }
.kmp-navlink:hover { background: rgba(148,163,184,.1); color: #fff; }
.kmp-navlink.active { background: color-mix(in srgb, var(--accent) 22%, transparent); color: #fff;
    box-shadow: inset 3px 0 0 var(--accent); }
.kmp-navlink__icon { width: 1.2rem; text-align: center; flex-shrink: 0; }
.kmp-navlink__label { transition: opacity .15s; }
.kmp-main-wrap { flex: 1; margin-left: 248px; display: flex; flex-direction: column; min-width: 0;
    transition: margin-left .22s var(--kmp-ease); }
.kmp-topbar { height: 52px; display: flex; align-items: center; padding: 0 1rem; position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.kmp-hamburger { background: transparent; border: 1px solid var(--border); color: var(--text-muted);
    width: 38px; height: 38px; border-radius: 8px; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.kmp-hamburger:hover { background: var(--surface-2); color: var(--text); }
.kmp-hamburger:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kmp-content { flex: 1; min-width: 0; }
.kmp-content .container { margin-top: 1.25rem; }
.kmp-scrim { display: none; position: fixed; inset: 0; background: rgba(7,11,18,.5); backdrop-filter: blur(2px); z-index: 55; }

[data-sidebar="collapsed"] .kmp-sidebar { width: 64px; }
[data-sidebar="collapsed"] .kmp-sidebar__brandtext,
[data-sidebar="collapsed"] .kmp-navlink__label { opacity: 0; width: 0; }
[data-sidebar="collapsed"] .kmp-main-wrap { margin-left: 64px; }

@media (max-width: 991.98px) {
    .kmp-sidebar { transform: translateX(-100%); width: 248px; box-shadow: var(--shadow-lg); }
    .kmp-main-wrap { margin-left: 0; }
    [data-sidebar="open"] .kmp-sidebar { transform: translateX(0); }
    [data-sidebar="open"] .kmp-scrim { display: block; }
}

/* ── KmpGrid (ERP Standardı kmpGrid — arama/sırala/filtre/kolon) ── */
.kmp-grid { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: visible; box-shadow: var(--shadow-sm); }
.kmp-grid__toolbar { display: flex; align-items: center; gap: .6rem; padding: .65rem .75rem; border-bottom: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
.kmp-grid__search { display: flex; align-items: center; gap: .4rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: .3rem .6rem; flex: 1; min-width: 180px; }
.kmp-grid__search input { background: transparent; border: none; color: var(--text); outline: none; width: 100%; font-size: .88rem; }
.kmp-grid__search-ico { opacity: .6; font-size: .85rem; }
.kmp-grid__toolbar-slot { display: flex; gap: .5rem; }
.kmp-grid__colmenu { position: relative; }
.kmp-grid__colbtn { min-height: 34px; padding: .35rem .7rem; font-size: .82rem; }
.kmp-grid__colmenu-pop, .kmp-grid__setpop { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 180px; max-height: 280px; overflow: auto; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .4rem; }
.kmp-grid__setpop { left: 0; right: auto; }
.kmp-grid__colmenu-item { display: flex; align-items: center; gap: .5rem; padding: .35rem .4rem; font-size: .85rem; color: var(--text-muted); border-radius: 5px; cursor: pointer; white-space: nowrap; }
.kmp-grid__colmenu-item:hover { background: var(--surface-2); color: var(--text); }
.kmp-grid__scroll { overflow: auto; max-height: 70vh; }
.kmp-grid__table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.kmp-grid__table thead th { position: sticky; top: 0; z-index: 10; background: var(--surface-2); color: var(--text-dim); text-transform: uppercase; font-size: .68rem; letter-spacing: .05em; font-weight: 600; text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.kmp-grid__table th.kmp-sortable { cursor: pointer; user-select: none; }
.kmp-grid__table th.kmp-sortable:hover { color: var(--text); }
.kmp-grid__sort { margin-left: .3rem; color: var(--accent-2); font-size: .65rem; }
.kmp-grid__filterrow th { padding: .3rem .5rem; background: var(--surface); }
.kmp-grid__colfilter { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; color: var(--text); padding: .25rem .4rem; font-size: .78rem; outline: none; }
.kmp-grid__colfilter:focus { border-color: var(--accent-2); }
.kmp-grid__setbtn { background: var(--bg); border: 1px solid var(--border); border-radius: 5px; color: var(--text-muted); padding: .25rem .5rem; font-size: .75rem; cursor: pointer; }
.kmp-grid__setbtn.active { border-color: var(--accent); color: var(--accent-2); }
.kmp-grid__table tbody td { padding: .5rem .7rem; border-bottom: 1px solid var(--border); color: var(--text); }
.kmp-grid__table tbody tr:nth-child(even) { background: rgba(148,163,184,.03); }
.kmp-grid__table tbody tr:hover { background: rgba(var(--accent-rgb),.08); }
.kmp-grid__table .kmp-num { text-align: right; font-variant-numeric: tabular-nums; }
.kmp-grid__empty { text-align: center; color: var(--text-dim); padding: 1.5rem; }
.kmp-grid__foot { padding: .5rem .75rem; font-size: .78rem; color: var(--text-dim); border-top: 1px solid var(--border); background: var(--surface-2); }

/* ── Topbar aksiyonları (kullanıcı/yönetim/çıkış — drawer shell) ── */
.kmp-topbar { gap: .55rem; }
.kmp-topbar__spacer { flex: 1; }
.kmp-topbar__link { color: var(--text-muted); text-decoration: none; font-size: .83rem; font-weight: 500; padding: .38rem .7rem; border-radius: 8px; border: 1px solid var(--border); white-space: nowrap; transition: background .15s, color .15s; }
.kmp-topbar__link:hover { background: var(--surface-2); color: var(--text); }
.kmp-topbar__user { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 500; color: var(--text); white-space: nowrap; }
.kmp-topbar__avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 700; }
.kmp-topbar__logout-form { margin: 0; display: inline-flex; }
.kmp-topbar__logout { background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 8px; padding: .38rem .65rem; font-size: .82rem; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.kmp-topbar__logout:hover { background: var(--danger-soft); color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
/* Tema düğmesi (koyu/açık) — ikon CSS ile temaya göre değişir, JS state gerekmez */
.kmp-topbar__theme { background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 8px;
                     padding: .34rem .6rem; font-size: .9rem; line-height: 1; cursor: pointer;
                     transition: background .15s, color .15s, border-color .15s; }
.kmp-topbar__theme:hover { background: var(--surface-2); color: var(--text); }
.kmp-topbar__theme:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kmp-topbar__theme .theme-ico--sun { display: none; }
html[data-theme="light"] .kmp-topbar__theme .theme-ico--sun { display: inline; }
html[data-theme="light"] .kmp-topbar__theme .theme-ico--moon { display: none; }

/* ── Kanal seçici (her zaman dropdown, belirgin) ── */
.channel-select { font-weight: 600; min-width: 180px; }
.channel-add { color: var(--accent-2); text-decoration: none; font-size: .82rem; font-weight: 600; padding: .32rem .6rem; border: 1px solid var(--border); border-radius: 8px; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.channel-add:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Sistem/Ayarlar sayfası ── */
.status-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .65rem; border-radius: 999px;
               font-size: .78rem; font-weight: 600; }
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-ok   { background: rgba(34,197,94,.12); color: var(--ok-text); }
.status-err  { background: rgba(239,68,68,.12); color: var(--danger-text); }
.status-warn { background: rgba(245,158,11,.12); color: var(--warn-strong); }
.sys-code { background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: .1rem .4rem; font-size: .82rem; }
.sys-code-sm { font-size: .74rem; word-break: break-all; }
.sys-actions { margin-top: 1.1rem; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.sys-conn { font-family: ui-monospace, monospace; font-size: .82rem; resize: vertical; }

@media (prefers-reduced-motion: reduce) {
    .spinner { animation: none; border-top-color: white; opacity: .7; }
    .kmp-confirm, .kmp-confirm-backdrop, .kmp-modal, .kmp-modal-backdrop { animation: none !important; }
    * { transition: none !important; }
}

/* ── KmpEmojiPicker: kürate kategorili emoji seçici (ERP Standardı) ── */
.kmp-ep { position: relative; display: inline-flex; align-items: center; }
.kmp-ep__trigger {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--surface-2); color: var(--text); border: 1px solid var(--border-2);
    border-radius: 6px; padding: .15rem .45rem; font-size: .9rem; cursor: pointer; min-height: 28px;
    transition: border-color .15s var(--kmp-ease), background .15s var(--kmp-ease);
}
.kmp-ep__trigger:hover { border-color: var(--accent); background: var(--surface-2); }
.kmp-ep__trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kmp-ep__trigger--open { border-color: var(--accent); box-shadow: var(--focus-ring); }
.kmp-ep__value { font-size: 1.05rem; line-height: 1; }
.kmp-ep__caret { font-size: .65rem; color: var(--text-muted); margin-top: 1px; }
/* backdrop (closes panel on outside click) */
.kmp-ep__backdrop { position: fixed; inset: 0; z-index: 200; }
/* dropdown panel */
.kmp-ep__panel {
    position: absolute; top: calc(100% + 5px); left: 0; z-index: 201;
    background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: .55rem .6rem; min-width: 230px; max-width: 280px;
    max-height: 370px; overflow-y: auto; animation: kmp-pop .15s var(--kmp-ease);
    scrollbar-width: thin; scrollbar-color: var(--border-2) transparent;
}
.kmp-ep__section { margin-bottom: .5rem; }
.kmp-ep__section:last-child { margin-bottom: 0; }
.kmp-ep__section-label {
    font-size: .65rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-dim); margin-bottom: .3rem; padding-left: .1rem;
}
.kmp-ep__grid { display: flex; flex-wrap: wrap; gap: 2px; }
.kmp-ep__cell {
    background: transparent; border: 1px solid transparent; border-radius: 5px;
    width: 34px; height: 34px; display: grid; place-items: center; font-size: 1.15rem;
    cursor: pointer; transition: background .1s, border-color .1s;
}
.kmp-ep__cell:hover { background: var(--surface-2); border-color: var(--border); }
.kmp-ep__cell:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kmp-ep__cell--active { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); }
/* "Suggested" cell: slightly highlighted */
.kmp-ep__cell--suggested {
    border-color: var(--border-2);
    background: color-mix(in srgb, var(--accent-2) 10%, transparent);
}
.kmp-ep__cell--suggested.kmp-ep__cell--active {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    border-color: var(--accent);
}
/* free-text "other" section */
.kmp-ep__section--other { border-top: 1px solid var(--border); padding-top: .5rem; margin-top: .4rem; }
.kmp-ep__other-row { display: flex; align-items: center; gap: .5rem; }
.kmp-ep__free {
    width: 54px; background: var(--surface-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 5px; text-align: center;
    font-size: 1.1rem; padding: .18rem .2rem; min-height: 32px;
    transition: border-color .15s;
}
.kmp-ep__free:focus { border-color: var(--accent); outline: none; box-shadow: var(--focus-ring); }
.kmp-ep__free-hint { font-size: .68rem; color: var(--text-dim); }

/* ── CreateForm: Split görsel upload satırı ── */
.split-upload-row { margin: .45rem 0 .6rem; padding: .5rem .65rem; background: var(--surface-2);
                    border: 1px solid var(--border); border-radius: var(--radius); }
.split-optional { font-size: .7rem; color: var(--text-dim); font-weight: 400; }
.split-upload-ctrl { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.split-file-input { font-size: .8rem; color: var(--text-muted); max-width: 260px; cursor: pointer; }
.split-uploaded { font-size: .8rem; color: var(--ok-text); font-weight: 500; }
.split-clear-btn { background: transparent; border: 1px solid var(--border-2); border-radius: 5px;
                   color: var(--text-dim); padding: 0 .4rem; font-size: .8rem; cursor: pointer; min-height: 26px; }
.split-clear-btn:hover { color: var(--danger-text); border-color: var(--danger); }

/* ── AI Sağlayıcıları paneli (/admin/ai) ── */
.ai-rows { display: flex; flex-direction: column; gap: .75rem; max-width: 860px; }
.ai-row {
    border: 1px solid var(--border, #2a3344);
    border-radius: 12px;
    padding: .85rem 1rem;
    background: color-mix(in srgb, var(--bs-body-bg, #131a26) 92%, transparent);
    transition: border-color .18s, box-shadow .18s;
}
.ai-row-on { border-color: color-mix(in srgb, var(--accent, #6366f1) 40%, var(--border, #2a3344)); box-shadow: var(--shadow-sm); }
.ai-row-head { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.ai-name { font-size: 1.02rem; }
.ai-keystate { margin-left: auto; font-size: .8rem; font-weight: 500; opacity: .85; }
.ai-fields { margin-top: .7rem; display: flex; flex-direction: column; gap: .5rem; padding-left: 1.9rem; }
.ai-key-ctrl { display: flex; gap: .5rem; align-items: center; flex: 1; }
.ai-key-ctrl .free-input { flex: 1; }
.ai-links { display: flex; align-items: center; gap: .8rem; margin-top: .2rem; }
.ai-env code { font-size: .78rem; }

/* ── Türkiye canlı yayın ekranı (/turkiye-live) ── */
/* Yayın ekranında Blazor "yeniden bağlanılıyor" diyaloğunu GİZLE — panel deploy'unda
   ekran cache'li veriyle akmaya devam eder (live-screen.js), teknik diyalog yayına DÜŞMEZ.
   Admin panelinde normal reconnect UI korunur (yalnız bu sayfada gizli). */
body:has(.tr-live-shell) #components-reconnect-modal {
    display: none !important;
}
.tr-live-shell {
    position: relative; height: 100vh; width: 100vw; overflow: hidden; color: #f8fafc;
    padding: 0 28px 16px; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 18% 12%, rgba(99, 102, 241, 0.18), transparent 30%),
        radial-gradient(circle at 82% 8%, rgba(20, 184, 166, 0.15), transparent 28%),
        linear-gradient(135deg, #060a13 0%, #0c111d 48%, #04090c 100%);
}
.tr-live-bg-grid {
    position: absolute; inset: 0; opacity: .12; pointer-events: none;
    background-image:
        linear-gradient(rgba(148,163,184,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.12) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(180deg, black, transparent 82%);
}
/* Madde 3 — kanal filigranı: 96px'lik header logosunun en az 3 katı (≥288px), TV-bug gibi çok şeffaf.
   Sağ-alt köşede, tüm veri katmanlarının (z-index:1) ALTINDA durur → KPI/hava/tarih hiçbir zaman örtülmez;
   pointer-events:none ile tıklama/etkileşim almaz; 1920×1080'de taşma yok (sabit köşe + max ölçü). */
.tr-live-watermark {
    position: absolute; right: 18px; bottom: 54px; z-index: 0; pointer-events: none;
    width: min(320px, 22vw); height: auto; opacity: .07; filter: grayscale(.15);
}
@media (max-width: 1200px) {
    .tr-live-watermark { display: none; }
}
.tr-live-hero {
    position: relative; z-index: 1; display: grid; grid-template-columns: 188px minmax(0, 1fr) auto;
    align-items: center; gap: 22px; margin: 0 -28px; padding: 6px 28px 7px;
    border: 1px solid rgba(255,255,255,.07); border-top: 0; border-radius: 0;
    background: linear-gradient(180deg, rgba(7,12,22,.90), rgba(7,12,22,.58));
    box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.tr-live-brand {
    min-width: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 4px;
}
.tr-live-logo {
    height: 96px; width: auto; flex: 0 0 auto;
    filter: drop-shadow(0 4px 12px rgba(99, 102, 241, 0.45));
}
.tr-live-kicker {
    display: inline-flex; align-items: center; gap: 8px; color: #818cf8; font-size: 16.25px;
    text-transform: uppercase; letter-spacing: .12em; font-weight: 800;
    text-shadow: 0 0 12px rgba(129, 140, 248, 0.4);
}
.tr-live-hero h1 {
    margin: 0; font-size: 43.75px; line-height: 1; letter-spacing: 0;
    font-weight: 900;
    background: linear-gradient(to right, #fff 60%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tr-live-date {
    margin-top: 6px; color: rgba(167, 243, 208, .78); font-family: "JetBrains Mono", "Roboto Mono", monospace;
    font-size: 16.25px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
}
.tr-live-day {
    color: rgba(148, 163, 184, .68); font-family: "JetBrains Mono", "Roboto Mono", monospace;
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.tr-live-hero p { margin: 0; max-width: 900px; color: #64748b; font-size: 17.5px; line-height: 1.3; }
/* Madde 4/5 — SAĞ sütun artık yalnız hava durumu (CANLI rozeti SON DAKİKA bandına taşındı); tüm alan hava paneline. */
.tr-live-right {
    min-width: 0; display: flex; flex-direction: column; align-items: stretch;
    justify-content: center; align-self: stretch;
}
/* Madde E — CANLI rozeti artık marka bloğunda (tarih+gün altında), SON DAKİKA etiketinin dışında. */
.tr-live-status {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    margin-top: 4px; font-size: 14px; color: #fff; font-weight: 950; letter-spacing: .04em;
    text-transform: uppercase;
}
.tr-live-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 999px; background: #22c55e;
    box-shadow: 0 0 18px #22c55e; animation: tr-live-pulse 1.6s ease-in-out infinite;
}
.tr-live-header-center {
    min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px;
}
.tr-live-header-clocks {
    /* Madde C — Tokyo/Pekin eklendi: 5→6 kadran, 1920 genişlikte taşmasız sığması için hafif küçültüldü. */
    min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch; gap: 4px;
}

/* ── Kitap/defter açılma animasyonu (sesli bülten HAVA/PİYASA köşesi) ──────────────────────────────
   Ortada bir kitap açılır: kapak sayfa gibi çevrilir (rotateY), okunan içerik sağ sayfada karaoke-senkron
   belirir, köşe bitince kapak kapanıp kitap kaybolur. Yalnız görsel — ses daemon'da çalar. */
.tr-live-book {
    position: fixed; inset: 0; z-index: 900;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    background: radial-gradient(58% 54% at 50% 50%, rgba(3,7,18,.66), rgba(3,7,18,.30) 62%, transparent 100%);
    opacity: 0; transition: opacity .55s ease;
}
.tr-live-book[hidden] { display: none; }
.tr-live-book.is-open { opacity: 1; }
.tr-live-book__stage { perspective: 3200px; }
.tr-live-book__book {
    position: relative; width: 84vh; height: 58vh; max-width: 94vw;
    transform-style: preserve-3d;
    transform: rotateX(9deg) scale(.8); opacity: 0;
    transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .55s ease;
    filter: drop-shadow(0 52px 78px rgba(0,0,0,.66));
}
.tr-live-book.is-open .tr-live-book__book { transform: rotateX(4deg) scale(1); opacity: 1; }
/* omurga gölgesi (iki sayfa arası) */
.tr-live-book__book::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 40px; transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(60,44,14,0) 0%, rgba(60,44,14,.36) 46%, rgba(60,44,14,.36) 54%, rgba(60,44,14,0) 100%);
    z-index: 4; pointer-events: none;
}
.tr-live-book__page {
    position: absolute; top: 0; width: 50%; height: 100%;
    box-sizing: border-box; padding: 4.4vh 3.6vh;
    background: linear-gradient(150deg, #fdf9ef 0%, #f3ead3 100%);
    color: #3a2f1e;
}
.tr-live-book__page--left {
    left: 0; border-radius: 14px 3px 3px 14px;
    box-shadow: inset -24px 0 34px -20px rgba(80,60,20,.55);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; text-align: center;
}
.tr-live-book__page--right {
    right: 0; border-radius: 3px 14px 14px 3px;
    box-shadow: inset 24px 0 34px -20px rgba(80,60,20,.55);
    display: flex; align-items: center; justify-content: center;
}
.tr-live-book__emoji { font-size: 21vh; line-height: 1; filter: drop-shadow(0 10px 16px rgba(0,0,0,.2)); }
.tr-live-book__kicker {
    font-size: 3.6vh; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #4338ca;
}
.tr-live-book.is-weather .tr-live-book__kicker { color: #0e7490; }
.tr-live-book__rule { width: 46%; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #4338ca, transparent); }
.tr-live-book.is-weather .tr-live-book__rule { background: linear-gradient(90deg, #0e7490, transparent); }
.tr-live-book__brand { font-size: 1.5vh; letter-spacing: .22em; text-transform: uppercase; color: rgba(90,74,51,.6); }
/* sağ sayfa: mini tablo (şehir/ad solda · derece/değer sağda), TTS ilerledikçe satırlar belirir */
.tr-live-book__table { width: 100%; display: flex; flex-direction: column; gap: 1.15vh; }
.tr-live-book__brow {
    display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1.6vh;
    padding: 1vh 1.5vh; border-radius: 12px;
    background: rgba(120,90,30,.06); border-bottom: 1px solid rgba(120,90,30,.12);
    opacity: 0; transform: translateX(14px);
    transition: opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
/* piyasa satırı: ad(1fr) solda · değer+değişim bloğu sağda */
.tr-live-book__brow.is-mkt { grid-template-columns: 1fr auto; }
.tr-live-book__brow.is-in { opacity: 1; transform: none; }
.tr-live-book__brow-ic { font-size: 3.4vh; line-height: 1; width: 4vh; text-align: center; }
.tr-live-book__brow-lb { font-size: 2.7vh; font-weight: 800; color: #3a2f1e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-live-book__brow-vwrap { display: flex; flex-direction: column; align-items: flex-end; gap: .1vh; line-height: 1.05; }
.tr-live-book__brow-vl { font-size: 3vh; font-weight: 900; color: #1f2937; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-live-book__brow-chg { font-size: 1.9vh; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: #64748b; }
.tr-live-book__brow.is-up  .tr-live-book__brow-chg { color: #059669; }
.tr-live-book__brow.is-down .tr-live-book__brow-chg { color: #dc2626; }
/* açılışta içeriğe "çevrilen sayfa" yaprağı — omurgadan sağa döner */
.tr-live-book__leaf {
    position: absolute; top: 0; left: 50%; width: 50%; height: 100%; z-index: 3;
    transform-origin: left center; transform: rotateY(0deg); opacity: 0;
    background: linear-gradient(120deg, #fbf6ea 0%, #ece0c4 100%);
    border-radius: 3px 14px 14px 3px; backface-visibility: hidden;
    box-shadow: -14px 0 26px -12px rgba(80,60,20,.5);
    pointer-events: none;
}
.tr-live-book.is-open .tr-live-book__leaf { animation: tr-live-leaf-turn 1.05s cubic-bezier(.4,0,.2,1) .12s 1 both; }
@keyframes tr-live-leaf-turn {
    0%   { opacity: 1; transform: rotateY(0deg); }
    70%  { opacity: 1; }
    100% { opacity: 0; transform: rotateY(-164deg); }
}
/* kapak — kapalıyken kitabı örter, açılınca omurgadan belirgin biçimde çevrilir (sayfa açma hissi) */
.tr-live-book__cover {
    position: absolute; inset: 0; z-index: 5;
    transform-origin: left center; transform: rotateY(0deg);
    transition: transform 1.1s cubic-bezier(.4,0,.2,1), opacity 1.1s ease;
    backface-visibility: hidden; border-radius: 10px 18px 18px 10px;
    background: linear-gradient(150deg, #6366f1 0%, #4338ca 46%, #312e81 100%);
    box-shadow: inset -10px 0 26px rgba(0,0,0,.3), 0 34px 60px rgba(0,0,0,.52);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4vh; color: #eef2ff;
}
/* kapak sırtı parıltısı — çevrilirken kağıt kenarı hissi */
.tr-live-book__cover::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 16px;
    background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0));
}
.tr-live-book.is-weather .tr-live-book__cover { background: linear-gradient(150deg, #22d3ee 0%, #0891b2 46%, #155e75 100%); }
.tr-live-book.is-open .tr-live-book__cover { transform: rotateY(-172deg); opacity: 0; }
.tr-live-book__cover-emoji { font-size: 19vh; line-height: 1; filter: drop-shadow(0 10px 20px rgba(0,0,0,.4)); }
.tr-live-book__cover-title { font-size: 4vh; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
    .tr-live-book__book, .tr-live-book__cover { transition: opacity .3s ease; transform: none !important; }
    .tr-live-book__leaf { animation: none; opacity: 0; }
    .tr-live-book__brow { transition: opacity .3s ease; transform: none; }
}
.tr-live-clock-tile {
    min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.tr-live-clock-meta {
    min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
}
.tr-live-clock-meta span {
    color: rgba(255,255,255,.55); font-size: 13px; font-weight: 900; letter-spacing: .03em;
    text-transform: uppercase; white-space: nowrap;
}
.tr-live-clock-meta strong {
    color: #fff; font-family: "JetBrains Mono", "Roboto Mono", monospace; font-size: 22px;
    line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums;
}
/* Madde 3 (T2H) — kullanıcı kararı: aynı anda 3-4 şehir (BURADA 4 — 2×2, hero'nun yatay/dikey oranına
   1×4'ten daha iyi uyar + saat şeridiyle aynı yüksekliği paylaşır), rastgele küme (seçim live-screen.js
   cycleWeather()'da istemci-taraflı — yukarıdaki "Madde 5" notundaki 7-kolon/13-şehir-birden düzeni
   TAMAMEN kaldırıldı). İkon artık ayrı BÜYÜK bir eleman (küçük/okunaksız kaldığı bildirildi); koşul metni
   artık "small" değil normal punto + iki-satıra kadar wrap (kesilme yok).
   Fix 3 (2026-07-04, kullanıcı revizyonu "6 veya 8") — görüntü yönetmeni kararı 6, 3×2 ızgara (3 kolon ×
   2 satır; 2×4'e göre daha yatay/geniş dağılır, saat şeridiyle aynı yüksekliği hâlâ paylaşır — panel alanı
   büyümüyor/taşmıyor). Kart iç boşluğu/punto 4'lü haline göre hafif küçültüldü ama ikon büyük + koşul metni
   TAM kalacak şekilde (T2H'nin kazanımı korunuyor — küçük/kesik ikon-metne geri dönülmedi). */
.tr-live-weather-panel {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr;
    gap: 6px 8px; min-width: 0; align-content: center; height: 100%;
}
.tr-live-weather-chip {
    min-width: 0; min-height: 0; border: 1px solid rgba(94,234,212,.16); border-radius: 10px;
    background: rgba(15,23,42,.5); padding: 5px 8px; text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.tr-live-weather-ico {
    display: block; font-size: 26px; line-height: 1; margin-bottom: 1px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.tr-live-weather-chip strong {
    display: block; overflow: hidden; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 850;
    text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; max-width: 100%;
}
.tr-live-weather-chip b {
    display: block; color: #5eead4; font-family: "JetBrains Mono", "Roboto Mono", monospace;
    font-size: 21px; line-height: 1.15; font-weight: 900; font-variant-numeric: tabular-nums;
}
.tr-live-weather-chip small {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    color: #94a3b8; font-size: 10.5px; line-height: 1.15; max-width: 100%;
}
.tr-live-weather-loading {
    grid-column: 1 / -1; color: #64748b; font-size: 15px; text-align: center;
}
/* Sol-altta çalan MP3 bilgisi — "Kaynaklar" yazısıyla aynı küçük/silik stil (besteci varsa ID3'ten) */
.tr-live-music-credit {
    min-width: 0; max-width: 60%; overflow: hidden; font-size: 0.8125rem; color: rgba(255,255,255,.3);
    white-space: nowrap; text-overflow: ellipsis;
}
.tr-live-music-credit[hidden] { display: none; }
/* Alt bilgi şeridi — düşük yükseklik: müzik kredisi (sol) · kaynaklar (orta) · ERP markası (sağ) */
.tr-live-footer {
    position: relative; left: 0; right: 0; bottom: 0; width: 100%;
    margin-top: 0.25rem; padding-top: 3px; display: flex; align-items: center;
    justify-content: space-between; gap: 14px; line-height: 1.1;
}
.tr-live-sources {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-align: left; font-size: 0.75rem; color: rgba(255,255,255,.28); /* alt SOL köşe */
}
/* Madde 2 (T2H) — marka sloganı, alt bandın ortasında; küçük+zarif+sürekli görünür, sabit genişlik
   (kaynaklar/ERP kredisi metinleri onu asla itip taşıramaz — flex:0 0 auto + nowrap). */
.tr-live-slogan {
    flex: 0 0 auto; white-space: nowrap; text-align: center; font-size: 0.8rem; font-weight: 800;
    letter-spacing: .06em; color: rgba(165, 180, 252, .58); text-transform: uppercase;
}
.tr-live-erp-credit {
    flex: 0 0 auto; white-space: nowrap; text-align: right; font-size: 0.775rem;
    color: rgba(255,255,255,.42); font-weight: 600; letter-spacing: .01em;
}
.tr-live-erp-url { color: #818cf8; font-weight: 700; }
.real-clock {
    width: 104px; height: 104px; flex: 0 0 104px;
    filter: drop-shadow(0 12px 18px rgba(0,0,0,.44));
}
.real-clock__svg {
    display: block; width: 100%; height: 100%;
}
.real-clock__numeral {
    font-family: Georgia, "Times New Roman", serif; font-size: 13.75px; font-weight: 700;
    text-anchor: middle; dominant-baseline: central; letter-spacing: 0;
}
.real-clock__hand {
    stroke-linecap: round;
}
.real-clock__hand--hour {
    stroke-width: 6;
}
.real-clock__hand--minute {
    stroke-width: 4;
}
.real-clock__hand--second {
    stroke: #b91c1c; stroke-width: 1.8;
}
@keyframes tr-live-pulse { 0%,100% { opacity: .45; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }
.tr-live-loading { position: relative; z-index: 1; font-size: 40px; color: #cbd5e1; }
/* ── 10+2 sahne: sol KPI ızgarası + sağ dikey ray ── */
.tr-live-stage {
    position: relative; z-index: 1; flex: 1; min-height: 0;
    display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 2fr); gap: 16px;
}
.tr-live-main { min-width: 0; min-height: 0; }
.tr-live-rail {
    min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px;
    border-left: 1px solid rgba(255,255,255,.08); padding-left: 14px;
    box-shadow: inset 8px 0 24px rgba(0,0,0,.25);
}
/* Madde B — foto VARKEN 4:3 (eskiden 4:5 → dikey ray genişliğinin dev bir dilimini yiyordu); metin
   panelinin payına daha çok yer kalsın diye oran daraltıldı.
   Madde D — kullanıcı "görsel bir tık küçülsün" dedi (başlık/gövde çakışmasıyla birlikte bildirdi) →
   3:2'ye daraltıldı (4:3'ten biraz daha kısa), metne kalan pay bir miktar daha büyüdü. */
.tr-live-rail-media {
    position: relative; flex: 0 0 auto; aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden;
    background: rgba(10,15,30,.55); box-shadow: 0 16px 40px rgba(0,0,0,.45);
    transition: flex-basis .5s var(--kmp-ease, ease), max-height .5s var(--kmp-ease, ease);
}
/* Madde B — foto YOKKEN (is-noimg) media küçük bir mini-rozet şeridine iner, metin paneli rayın
   neredeyse tamamını kullanır. Tamamen gizlemek yerine mini boyutta bırakıldı: foto geldiği an
   crossfade göze çarpsın (aniden belirmesin) + marka logosu ray boşken de tamamen boş görünmesin. */
.tr-live-rail.is-noimg .tr-live-rail-media {
    aspect-ratio: auto; max-height: 64px;
}
.tr-live-rail.is-noimg .tr-live-rail-media .tr-live-bulletin-fallback img {
    width: 22px; height: 22px;
}
.tr-live-rail-media .tr-live-bulletin-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity .6s var(--kmp-ease, cubic-bezier(.4,0,.2,1));
}
.tr-live-rail-media .tr-live-bulletin-img.is-on { opacity: 1; z-index: 1; }
/* Madde 2 kök-neden fix: fallback DOM'da img'lerden SONRA geliyor + z-index yoktu → gerçek fotoğraf
   yüklenip .is-on olsa bile filigran üstünde kalıyordu. z-index:0 + .is-on'lu img üstte (z-index:1) ile
   fotoğraf her zaman fallback'in önüne geçer. */
.tr-live-rail-media .tr-live-bulletin-fallback {
    position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center;
    opacity: .35;
}
.tr-live-rail-text {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px;
    padding: 14px 12px; border-radius: 14px; overflow: hidden;
    background: linear-gradient(180deg, rgba(10,15,30,.55), rgba(10,15,30,.30));
    border: 1px solid rgba(255,255,255,.07);
}
/* Madde D — YAPISAL GARANTİ: başlık ile gövde asla çakışamaz. Kök neden başlığın sınırsız yükseklikte
   olmasıydı (uzun cümlede 4-5 satıra taşıp gövdenin üstüne biniyordu) + gövdenin kendi yüksekliği
   olmadığı için JS'teki translateY "kaydırma" viewport'u anlamsızdı (clientHeight=scrollHeight, hiç
   kırpma yoktu). Çözüm: başlık flex:0 0 auto + line-clamp(2) ile SABİT üst sınıra oturur (taşan kısım
   "…" ile kesilir); gövde flex:1 1 auto + min-height:0 ile kalan alanı TAMAMEN kaplar ve kendi içinde
   kırpar → ikisi asla normal-akış dışına taşmaz, uzunluk ne olursa olsun çakışma imkânsız. */
.tr-live-rail-title {
    flex: 0 0 auto; font-size: 20px; font-weight: 700; line-height: 1.2; color: #e2e8f0;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    max-height: calc(1.2em * 2);
}
.tr-live-rail-body {
    flex: 1 1 auto; min-height: 0; font-size: 19px; font-weight: 400; line-height: 1.35;
    color: rgba(255,255,255,.85); overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-start;
    transition: font-size .3s var(--kmp-ease, ease);
}
/* Madde 4 (T2H) — kısa gövde metni: kademeli tipografik büyütme (2 eşik, JS applyRailBodyScale karar verir)
   + dikey ortalama (kısa metin panelin ÜST kenarına yapışık kalmasın, boş görünmesin). Seçim tipografik
   ölçekleme + dikey ortalama kombinasyonu — yalnız rozet/accent-çubuğu eklemek albeniyi artırmaz ama
   boşluğu ÇÖZMEZ; büyük punto + ortalama hem okunurluğu hem "dolgunluk" hissini birlikte verir.
   NOT: tickKaraoke() translateY matematiği scrollHeight/clientHeight oranını kullanır — bu tier'lar
   yalnızca KISA metinde uygulanır (scrollHeight≈clientHeight, kaydırma zaten sıfıra yakın) → karaoke
   scroll'u ETKİLEMEZ. */
.tr-live-rail-body--md {
    font-size: 23px; font-weight: 500; line-height: 1.45; justify-content: center;
}
.tr-live-rail-body--lg {
    font-size: 27px; font-weight: 600; line-height: 1.42; justify-content: center;
    color: #eef2ff; text-align: center;
}
/* Madde 4 (T2H) — ray IDLE (hiç bülten yokken) dolgusu: .tr-live-rail-text ile aynı flex hücresini
   paylaşır (ikisi de <aside> flex-column'un doğrudan çocuğu), bu yüzden flex:1 1 auto ile aynı alanı
   doldurur — ray'in toplam yüksekliği/genişliği BÜYÜMEZ, yalnız içerik değişir. Görünüm bilinçli
   "abartısız": marka logosu + ad + slogan, düşük opaklık + ince çerçeve — T2G'nin canlı bülten
   kartlarıyla YARIŞMAZ, yalnız boşluğu nazikçe doldurur. Geçiş dili rayın diğer elemanlarıyla aynı
   (var(--kmp-ease, ease), .tr-live-rail-media'daki gibi opacity/transform tabanlı). */
.tr-live-rail-idle {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 10px; text-align: center; padding: 20px 14px;
    border-radius: 14px; border: 1px solid rgba(255,255,255,.06);
    background: linear-gradient(180deg, rgba(10,15,30,.4), rgba(10,15,30,.2));
    opacity: .72; transition: opacity .5s var(--kmp-ease, ease);
}
.tr-live-rail-idle[hidden] { display: none; }
.tr-live-rail-idle-logo {
    width: 40px; height: 40px; border-radius: 10px; opacity: .85;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.4));
}
.tr-live-rail-idle-name {
    font-size: 17px; font-weight: 800; letter-spacing: .08em; color: rgba(226,232,240,.82);
}
.tr-live-rail-idle-slogan {
    font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: rgba(165,180,252,.5);
}
/* Madde 5 (T2H) + kullanıcı düzeltmesi (2026-07-04): 8 kolonda son satır (3. satır) yalnız spor kartı
   (span 3) + 1 normal kart = 4/8 dolu, 4 kolon BOŞ kalıyordu (kullanıcı canlı ekran görüntüsünde fark etti).
   7 KOLONA düşürüldü: 18 piyasa kartı (DAX dahil, 2. kullanıcı düzeltmesi) / 7 = satır 1-2 tam dolu (14),
   satır 3'te 4 normal kart kalır; spor kartı span 3 ile 4+3=7 → üçüncü satır TAM dolu, boş kolon yok. Kutular biraz büyüdü
   (okunurluk artışı — bilinçli). Kart markup'ı değişmedi (T3 KPI-zoom bu ızgara üzerine gelecek). */
.tr-live-grid {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: 1fr; column-gap: 9px; row-gap: 14px; min-height: 0; height: 100%;
}
.tr-live-card {
    min-width: 0; min-height: 0;
    border: 1px solid rgba(255,255,255,.05); border-radius: 11px;
    border-left: 3px solid color-mix(in srgb, currentColor 55%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, currentColor 9%, transparent), transparent 42%),
        linear-gradient(180deg, rgba(15,23,42,.78), rgba(15,23,42,.46));
    padding: 11px; box-shadow: 0 20px 40px rgba(0,0,0,.3); display: flex; flex-direction: column;
    position: relative; overflow: hidden; isolation: isolate;
    backdrop-filter: blur(8px);
}
/* Madde 5 — Spor/Dünya Kupası kartı 6→8 kolon geçişinde tek kolonda maç adları/skorlar okunmaz kalıyordu;
   kullanıcı düzeltmesiyle (2026-07-04) span 3'e ayarlandı: 18 KPI + span-3 spor = 7 sütun × 3 satır.
   Son satırı (4 normal kart + span 3) tam doldurur, boş kolon kalmaz. */
.tr-live-card--sport { grid-column: span 3; }
.tr-live-card-head strong { color: color-mix(in srgb, currentColor 78%, #e2e8f0); }
.tr-live-card::after {
    content: ""; position: absolute; inset: auto -40px -80px auto; width: 140px; height: 140px;
    border-radius: 50%; opacity: .16; background: currentColor; filter: blur(20px); pointer-events: none;
}
/* Eğilim flash'ı — artış yeşil / azalış kırmızı yumuşak gradient, ince ve aralıklı (abartısız). */
.tr-live-card--up::before, .tr-live-card--down::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
    border-radius: inherit; opacity: 0;
}
.tr-live-card--up::before {
    background: linear-gradient(180deg, rgba(16,185,129,.16), transparent 60%);
    animation: tr-live-trend-flash 6s ease-in-out infinite;
}
.tr-live-card--down::before {
    background: linear-gradient(180deg, rgba(244,63,94,.16), transparent 60%);
    animation: tr-live-trend-flash 6s ease-in-out infinite;
}
@keyframes tr-live-trend-flash {
    0%, 70%, 100% { opacity: 0; }
    12%, 24% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .tr-live-card--up::before, .tr-live-card--down::before { animation: none; opacity: .55; }
}
/* Y4 — yön çubuğu (kalıcı, görünür): flash yerine inset taban çizgisi */
.tr-live-card--up   { box-shadow: inset 0 -3px 0 rgba(16,185,129,.55), 0 20px 40px rgba(0,0,0,.3); }
.tr-live-card--down { box-shadow: inset 0 -3px 0 rgba(244,63,94,.55),  0 20px 40px rgba(0,0,0,.3); }
.tr-live-card--time { color: #38bdf8; }
.tr-live-card--money { color: #5eead4; }
.tr-live-card--gold { color: #fbbf24; }
.tr-live-card--stock { color: #c084fc; }
.tr-live-card--crypto { color: #f472b6; }
.tr-live-card--people { color: #f87171; }
.tr-live-card--sport { color: #34d399; }
.tr-live-card--stale { filter: grayscale(.5); opacity: .72; }
/* Y8 — kapalı kart dinginliği (hafta sonu) */
.tr-live-card--closed { filter: saturate(.55); }
/* Piyasa kapalı — kart dalgalanmaz; sönük değer + amber KAPALI rozeti (son kapanış). */
.tr-live-card--closed .tr-live-value { opacity: .85; }
.tr-live-closed-badge {
    display: inline-flex; align-items: center;
    margin-right: .35rem;
    font-size: 0.75rem; font-weight: 800; letter-spacing: .05em;
    color: #fbbf24;
    background: rgba(251, 191, 36, .12);
    border: 1px solid rgba(251, 191, 36, .3);
    padding: .05rem .34rem; border-radius: 999px;
    text-transform: uppercase; vertical-align: middle;
}
/* Dönen futbol/spor KPI kutusu — yüzler üst üste, aktif olan görünür (JS 7sn'de çevirir). */
.tr-live-sport-faces { position: relative; flex: 1; min-height: 0; margin-top: 6px; }
.tr-live-sport-face {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 4px;
    opacity: 0; transform: translateY(6px); pointer-events: none;
    transition: opacity .5s var(--kmp-ease, ease), transform .5s var(--kmp-ease, ease);
}
.tr-live-sport-face.is-active { opacity: 1; transform: none; }
.tr-live-sport-face-head {
    font-size: 0.95rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #34d399; margin-bottom: 4px; flex: 0 0 auto;
}
/* Gerçek tablo görünümü — puan durumu / maçlar / sonuçlar. Başlık satırı silik+uppercase, satırlar zebra.
   Madde 5 — kart 3 kolona yayılınca (T2H) tabloya ~3× yatay yer açıldı: fontlar büyüdü + maç/takım adı
   kolonu artık kesilmiyor (nowrap+ellipsis yerine wrap; sayısal kolonlar hâlâ dar+sabit+nowrap). */
.tr-live-sport-table {
    width: 100%; border-collapse: collapse; table-layout: fixed;
    font-family: "JetBrains Mono", "Roboto Mono", monospace;
}
.tr-live-sport-table th {
    font-size: 0.78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: rgba(148,163,184,.85); text-align: left; padding: 3px 8px 4px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.tr-live-sport-table td {
    font-size: 1.08rem; font-weight: 700; color: rgba(255,255,255,.92);
    padding: 4px 8px; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.tr-live-sport-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.028); }
/* Sütun hizaları: sayısal kolonlar dar+ortalı/sağa, takım/maç adı esner + artık taşarsa kelime kaydırır. */
.tr-live-sport-table--standings th:first-child, .tr-live-sport-table--standings td:first-child { width: 2.1rem; text-align: center; color: #34d399; }
.tr-live-sport-table--standings th:nth-child(3), .tr-live-sport-table--standings td:nth-child(3),
.tr-live-sport-table--standings th:nth-child(4), .tr-live-sport-table--standings td:nth-child(4) { width: 2.6rem; text-align: center; }
.tr-live-sport-table--standings td:nth-child(4) { color: #fbbf24; font-weight: 800; }
.tr-live-sport-table--matches th:first-child, .tr-live-sport-table--matches td:first-child { width: 4.6rem; color: #38bdf8; }
.tr-live-sport-table--results th:first-child, .tr-live-sport-table--results td:first-child { width: 4rem; color: rgba(148,163,184,.9); }
.tr-live-sport-table--results th:last-child, .tr-live-sport-table--results td:last-child { width: 3.6rem; text-align: center; color: #fbbf24; font-weight: 800; }
/* Takım/maç adı kolonu (2. sütun her üç tipte de) — sığmayan uzun isimde ellipsis yerine iki satıra kaydır. */
.tr-live-sport-table--standings td:nth-child(2),
.tr-live-sport-table--matches td:nth-child(2),
.tr-live-sport-table--results td:nth-child(2) {
    white-space: normal; overflow-wrap: break-word; line-height: 1.15;
}
/* Spor haberleri — her satır bağımsız kayan banner (sığmayan başlıklar tam görünür). */
.tr-live-sport-news { display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.tr-live-sport-news-row {
    overflow: hidden; position: relative; height: 1.55rem; display: flex; align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.tr-live-sport-news-scroll {
    display: flex; white-space: nowrap; will-change: transform;
    animation: ticker-scroll 26s linear infinite;
}
.tr-live-sport-news-item {
    display: inline-flex; align-items: center; gap: .4rem; padding-right: 2.5rem;
    font-size: 0.95rem; font-weight: 700; color: rgba(255,255,255,.9);
}
.tr-live-sport-news-dot { color: #34d399; font-size: .6rem; }
@media (prefers-reduced-motion: reduce) {
    .tr-live-sport-face { transition: none; }
    .tr-live-sport-news-scroll { animation: none; }
}
/* İkon SOL-ÜST köşeye, açıklama (USD/TL) SAĞ-ÜST köşeye SIFIR padding ile yapışır.
   head, kart padding'ini (14px) negatif marjla iptal ederek kartın iç kenarına taşar → köşelere flush. */
.tr-live-card-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; color: #e2e8f0;
    margin: -11px -11px 0 -11px;
}
/* Şık ikon rozeti — sol-üst köşeye tam yapışık (sıfır padding); içinde SVG / glyph / kısa metin (BIST, NDX…).
   Madde 5 — 6→8 kolon geçişinde kartlar daraldı; ikon/başlık oranlı küçüldü (≈×0.83) ki kart taşmasın. */
.tr-live-icon {
    display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px;
    border-radius: 11px 0 13px 0; color: inherit; font-size: 27px; line-height: 1;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    margin: 0;
}
.tr-live-icon svg { width: 29px; height: 29px; display: block; }
.tr-live-icon .tr-icn-glyph { font-size: 27px; font-weight: 800; line-height: 1; }
.tr-live-icon .tr-icn-badge {
    font-size: 13px; font-weight: 900; letter-spacing: .02em;
    font-family: "JetBrains Mono", "Roboto Mono", monospace;
}
/* Açıklama sağ-üst köşeye flush: sıfır marj, sağ kenara hizalı, hafif sağ/üst iç boşluk okunurluk için. */
.tr-live-card-head strong {
    margin: 0; min-width: 0; font-size: 17.5px; line-height: 1.12;
    text-align: right; overflow-wrap: anywhere; padding: 5px 10px 0 0;
}
/* Değer ortada, +%50 büyük; chart alta full-width bant olarak yayılır. */
.tr-live-value-zone {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; gap: 5px; padding: 3px 0;
}
.tr-live-value {
    color: #fff; font-size: clamp(22px, 1.7vw, 32px); font-weight: 900;
    line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;
    display: inline-flex; align-items: baseline; justify-content: center; max-width: 100%;
    transition: color .18s ease, text-shadow .18s ease, transform .18s ease;
}
.tr-live-value small { font-size: .42em; color: rgba(255, 255, 255, 0.45); margin-left: 4px; font-weight: 650; }
.tr-live-meta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
    font-size: 14px; line-height: 1.1;
}
.tr-live-chg {
    font-weight: 800; padding: 2px 6px; border-radius: 5px; font-size: 14px;
    display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums;
}
.tr-live-chg.is-up { color: #10b981; background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.16); }
.tr-live-chg.is-down { color: #f43f5e; background: rgba(244,63,94,.1); border: 1px solid rgba(244,63,94,.16); }
.tr-live-prevclose { color: #94a3b8; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tr-live-submeta {
    color: #94a3b8; font-size: 13.5px; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Sparkline alt bant — kartın alt kenarına full-width yayılır (padding'i taşarak). */
.tr-live-spark-band { margin: 6px -11px -11px; height: 40px; opacity: .9; pointer-events: none; }
.tr-live-spark-band svg { display: block; width: 100%; height: 100%; overflow: hidden; }
/* Sola-kayan canlı grafik: JS her ~1.5sn yeni gerçek noktayı ekler + bu grubu bir adım sola öteler. */
.tr-live-spark-scroll { will-change: transform; }
.tr-live-subtitle {
    margin-top: 6px; min-height: 24px; color: #94a3b8; font-size: 16.25px; line-height: 1.25;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.tr-live-sparkline {
    width: 104px; height: 32px; flex: 0 0 104px; opacity: .95;
    border: 1px solid rgba(255,255,255,.06); border-radius: 6px; overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
}
.tr-live-sparkline svg { display: block; width: 104px; height: 32px; }
.tr-live-sparkline-baseline { stroke: rgba(148,163,184,.20); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tr-live-sparkline-line {
    fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
    filter: drop-shadow(0 0 4px currentColor); vector-effect: non-scaling-stroke;
}
.trend-badge { flex: 0 0 auto; }
.tr-live-card footer {
    margin-top: 10px; display: flex; justify-content: space-between; gap: 8px; color: #64748b;
    font-size: 13.75px; border-top: 1px solid rgba(255,255,255,.05); padding-top: 8px;
}
.tr-live-ticker {
    position: relative; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; justify-content: space-between; gap: 20px;
    color: #64748b; font-size: 15px; border-top: 1px solid rgba(255,255,255,.05); padding-top: 6px;
}
.tr-live-ticker-console { position: relative; z-index: 1; min-height: 78px; flex: 0 0 auto; }
.tr-live-news-ticker-band,
.tr-live-markets-ticker-band,
.tr-live-bist-ticker-band {
    display: flex; align-items: center; height: 47px; font-family: "JetBrains Mono", "Roboto Mono", monospace;
}
.tr-live-news-ticker-band { border-bottom: 1px solid rgba(255,255,255,.06); }
.tr-live-markets-ticker-band { border-bottom: 1px solid rgba(255,255,255,.06); }
.news-ticker-label, .markets-ticker-label, .bist-ticker-label {
    flex: 0 0 158px; width: 158px; height: 100%; color: #fff; padding: 0 14px;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 18.75px; font-weight: 950;
    letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; z-index: 10;
    display: flex; align-items: center; justify-content: flex-start; gap: 8px;
}
/* Madde E — CANLI rozeti çıktı, sade haline (158px) döndü. */
.news-ticker-label {
    background: #ff3b3b; box-shadow: 5px 0 18px rgba(255, 59, 59, .46), inset 0 -1px 0 rgba(255,255,255,.18);
}
.markets-ticker-label {
    background: #2563eb; box-shadow: 5px 0 18px rgba(37, 99, 235, .34), inset 0 -1px 0 rgba(255,255,255,.12);
}
.bist-ticker-label {
    background: #d97706; box-shadow: 5px 0 18px rgba(217, 119, 6, .42), inset 0 -1px 0 rgba(255,255,255,.16);
}
.tr-live-bist-dot {
    display: inline-block; width: 12px; height: 12px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 10px #fff, 0 0 22px #fef3c7, 0 0 34px #f59e0b;
    animation: tr-live-pulse-amber .58s ease-in-out infinite alternate;
}
@keyframes tr-live-pulse-amber {
    0% { opacity: .55; transform: scale(.72); box-shadow: 0 0 8px #fff, 0 0 16px #fbbf24; }
    100% { opacity: 1; transform: scale(1.45); box-shadow: 0 0 14px #fff, 0 0 28px #fef3c7, 0 0 48px #f59e0b; }
}
.tr-live-football-dot {
    display: inline-block; width: 12px; height: 12px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 10px #fff, 0 0 22px #dcfce7, 0 0 34px #22c55e;
    animation: tr-live-pulse-green .58s ease-in-out infinite alternate;
}
@keyframes tr-live-pulse-green {
    0% { opacity: .55; transform: scale(.72); box-shadow: 0 0 8px #fff, 0 0 16px #4ade80; }
    100% { opacity: 1; transform: scale(1.45); box-shadow: 0 0 14px #fff, 0 0 28px #dcfce7, 0 0 48px #22c55e; }
}
.tr-live-markets-dot {
    display: inline-block; width: 12px; height: 12px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 10px #fff, 0 0 22px #dbeafe, 0 0 34px #3b82f6;
    animation: tr-live-pulse-blue .58s ease-in-out infinite alternate;
}
@keyframes tr-live-pulse-blue {
    0% { opacity: .55; transform: scale(.72); box-shadow: 0 0 8px #fff, 0 0 16px #60a5fa; }
    100% { opacity: 1; transform: scale(1.45); box-shadow: 0 0 14px #fff, 0 0 28px #dbeafe, 0 0 48px #3b82f6; }
}
/* SON DAKİKA standalone konsolu (saat panellerinin altı) — tek bant, alt çizgi gerekmez. */
.tr-live-news-console .tr-live-news-ticker-band { border-bottom: none; }
.news-ticker-wrap { min-width: 0; }
.news-ticker-content { min-width: max-content; }
.tr-live-news-dot {
    display: inline-block; width: 12px; height: 12px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 10px #fff, 0 0 22px #fffbeb, 0 0 34px #ff1f1f;
    animation: tr-live-pulse-red .58s ease-in-out infinite alternate;
}
@keyframes tr-live-pulse-red {
    0% { opacity: .55; transform: scale(.72); box-shadow: 0 0 8px #fff, 0 0 16px #ff5252; }
    100% { opacity: 1; transform: scale(1.45); box-shadow: 0 0 14px #fff, 0 0 28px #fffbeb, 0 0 48px #ff1f1f; }
}
@keyframes ticker-scroll {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}
/* Bantı kendi GPU katmanına al → headless screencast'ta yumuşak, titremesiz kayış (CFR kare-tekrarı azalır). */
.news-ticker-content { will-change: transform; backface-visibility: hidden; transform: translateZ(0); }
@media (max-width: 1200px) {
    .tr-live-hero { grid-template-columns: 1fr; }
    .tr-live-header-center { grid-template-columns: 1fr; }
    .tr-live-header-clocks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tr-live-weather-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tr-live-right { align-items: stretch; }
    .tr-live-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tr-live-ticker { left: 32px; right: 32px; flex-wrap: wrap; }
}

/* Aralıklı abone/beğen altyazı hatırlatması — broadcast'te de görünür (CTA), periyodik (JS is-on). */
.tr-live-sub-cta {
    position: fixed; left: 50%; bottom: 62px; z-index: 40; pointer-events: none;
    display: inline-flex; align-items: center; gap: 10px; max-width: 92vw;
    padding: 10px 22px; border-radius: 999px;
    background: linear-gradient(90deg, rgba(220,38,38,.94), rgba(190,18,60,.94));
    color: #fff; font-size: 21.25px; font-weight: 800; letter-spacing: .01em; line-height: 1.15;
    box-shadow: 0 18px 48px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.14);
    backdrop-filter: blur(8px); text-align: center;
    opacity: 0; transform: translateX(-50%) translateY(14px);
    transition: opacity .55s var(--kmp-ease, ease), transform .55s var(--kmp-ease, ease);
}
.tr-live-sub-cta.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.tr-live-sub-ico { font-size: 23.75px; line-height: 1; }
@media (prefers-reduced-motion: reduce) {
    .tr-live-sub-cta { transition: opacity .2s ease; transform: translateX(-50%); }
    .tr-live-sub-cta.is-on { transform: translateX(-50%); }
}

/* ── Bekleme / sinyal ekranı (panel canlı↔bekleme) ───────────────────────────
   Tüm yayın alanını kaplar; yayını kesmeden gösterilir (live-screen.js [data-standby]).
   Varsayılan gizli (hidden attr) → JS standby olunca kaldırır. */
.tr-live-standby {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(37, 51, 92, 0.65), transparent 60%),
        linear-gradient(160deg, #060a17 0%, #0b1226 55%, #060a17 100%);
    color: #eef2ff;
    overflow: hidden;
}
.tr-live-standby[hidden] { display: none; }
.tr-live-standby::before {
    /* ince tarama ızgarası — sinyal ekranı dokusu */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(80% 70% at 50% 45%, #000 40%, transparent 100%);
    pointer-events: none;
}
.tr-live-standby__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    padding: 2.5rem 3rem;
    max-width: 60rem;
}
.tr-live-standby__logo {
    width: 96px;
    height: 96px;
    filter: drop-shadow(0 10px 30px rgba(99, 102, 241, 0.55));
    opacity: .95;
}
.tr-live-standby__bars {
    display: flex;
    align-items: flex-end;
    gap: .55rem;
    height: 46px;
}
.tr-live-standby__bars span {
    width: 10px;
    border-radius: 6px;
    background: linear-gradient(180deg, #818cf8, #4f46e5);
    animation: tr-standby-bar 1.1s ease-in-out infinite;
}
.tr-live-standby__bars span:nth-child(1) { height: 40%; animation-delay: 0s; }
.tr-live-standby__bars span:nth-child(2) { height: 70%; animation-delay: .12s; }
.tr-live-standby__bars span:nth-child(3) { height: 100%; animation-delay: .24s; }
.tr-live-standby__bars span:nth-child(4) { height: 70%; animation-delay: .36s; }
.tr-live-standby__bars span:nth-child(5) { height: 40%; animation-delay: .48s; }
@keyframes tr-standby-bar {
    0%, 100% { transform: scaleY(.5); opacity: .6; }
    50% { transform: scaleY(1); opacity: 1; }
}
.tr-live-standby__title {
    margin: 0;
    font-size: 3.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.tr-live-standby__msg {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.82);
    max-width: 44rem;
}
.tr-live-standby__clock {
    margin-top: .3rem;
    font-size: 2.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    color: #a5b4fc;
}
.tr-live-standby__brand {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: rgba(148, 163, 184, 0.7);
}
@media (prefers-reduced-motion: reduce) {
    .tr-live-standby__bars span { animation: none; }
}

/* ── MOBİL (≤640px, dikey telefon) ───────────────────────────────────────────
   Yalnız mobil tarayıcıyı etkiler; 1920×1080 headless broadcast capture ETKİLENMEZ.
   İstek: sadece İstanbul saati kalsın + KPI'lar ölçeklensin + bant etiketleri daralsın + okunur olsun. */
@media (max-width: 640px) {
    /* Sayfa sabit 100vh + overflow:hidden mobilde içeriği kırpıyor → kaydırılabilir yap. */
    .tr-live-shell {
        height: auto; min-height: 100vh; overflow-y: auto; overflow-x: hidden;
        padding: 0 10px 14px; gap: 10px;
    }
    .tr-live-hero {
        grid-template-columns: 1fr; gap: 10px; margin: 0 -10px; padding: 8px 12px;
        text-align: center;
    }
    .tr-live-hero h1 { font-size: 32.5px; }
    .tr-live-date { text-align: center; }
    .tr-live-day { text-align: center; }

    /* Madde C — sıra artık Tokyo→New York; ana saatimiz İstanbul olduğu için dar ekranda ":first-child"
       yerine sabit ".tr-live-clock-tile--anchor" (Istanbul city-key'i) hedeflenir. */
    .tr-live-header-clocks { grid-template-columns: 1fr; justify-items: center; gap: 8px; }
    .tr-live-clock-tile:not(.tr-live-clock-tile--anchor) { display: none; }
    .real-clock { width: 84px; height: 84px; flex-basis: 84px; }

    .tr-live-right { align-items: center; }
    .tr-live-weather-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .tr-live-weather-chip b { font-size: 20px; }

    /* KPI ızgarası: 2 sütun, esnek yükseklik, ölçeklenmiş tipografi. */
    .tr-live-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
        flex: none; grid-auto-rows: auto;
    }
    .tr-live-card { padding: 10px; }
    .tr-live-icon { width: 45px; height: 45px; flex-basis: 45px; font-size: 25px; border-radius: 12px; }
    .tr-live-icon svg { width: 27.5px; height: 27.5px; }
    .tr-live-icon .tr-icn-glyph { font-size: 25px; }
    .tr-live-icon .tr-icn-badge { font-size: 13px; }
    .tr-live-card-head strong { font-size: 16.25px; }
    .tr-live-value { font-size: clamp(24px, 6vw, 34px); }
    .tr-live-meta { font-size: 12.5px; }
    .tr-live-spark-band { margin: 5px -10px -10px; height: 38px; }

    /* Bant etiketleri çok geniş kalıyordu → daralt + küçült; içerik okunur olsun. */
    .news-ticker-label, .markets-ticker-label, .bist-ticker-label {
        flex: 0 0 92px; width: 92px; font-size: 13.75px; padding: 0 8px; letter-spacing: .02em; gap: 5px;
    }
    .tr-live-news-ticker-band,
    .tr-live-markets-ticker-band,
    .tr-live-bist-ticker-band { height: 32px; }
    .tr-live-ticker-console { min-height: 64px; }
    .news-item, .news-ticker-content span { font-size: 1.1875rem !important; }

    .tr-live-footer { flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
    .tr-live-music-credit { max-width: 100%; }

    .tr-live-sub-cta { font-size: 16.25px; padding: 8px 14px; bottom: 14px; gap: 6px; }
    .tr-live-sub-ico { font-size: 18.75px; }
}

/* ── T2H Madde 1 — /canli kamusal canlı izleme sayfası ──────────────────────────────────────────
   novovizyon.erp.tr'nin arkasındaki sayfa: YouTube embed (watch-time YouTube'a yazar) + marka barı +
   "YouTube'da izle" butonu. /turkiye-live'dan TAMAMEN AYRI, bağımsız sayfa (LiveLayout paylaşılır ama
   kendi "pl-" önekli sınıfları var — tr-live-* stilleriyle karışmaz). Responsive: mobilde 16:9 korunur. */
.pl-shell {
    min-height: 100vh; display: flex; flex-direction: column; gap: 18px;
    padding: 22px clamp(16px, 4vw, 48px) 28px;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(79, 70, 229, 0.16), transparent 60%),
        linear-gradient(160deg, #05070f 0%, #0b1020 55%, #05070f 100%);
    color: #eef2ff; font-family: var(--kmp-font-sans, "Inter", system-ui, sans-serif);
}
.pl-brand {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.pl-logo {
    flex: 0 0 auto; border-radius: 12px; filter: drop-shadow(0 6px 16px rgba(99, 102, 241, 0.45));
}
.pl-brand-text {
    display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.pl-brand-name {
    font-size: clamp(20px, 3vw, 28px); font-weight: 900; letter-spacing: .02em; color: #fff;
}
.pl-slogan {
    font-size: clamp(11px, 1.6vw, 13.5px); font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: #a5b4fc;
}
.pl-yt-btn {
    margin-left: auto; display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 22px; border-radius: 999px; text-decoration: none;
    background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff;
    font-size: 15px; font-weight: 800; letter-spacing: .01em;
    box-shadow: 0 12px 30px rgba(220, 38, 38, .38), inset 0 0 0 1px rgba(255,255,255,.12);
    transition: transform .25s var(--kmp-ease, cubic-bezier(.4,0,.2,1)), box-shadow .25s var(--kmp-ease, ease);
}
.pl-yt-btn:hover {
    transform: translateY(-2px); box-shadow: 0 16px 38px rgba(220, 38, 38, .48), inset 0 0 0 1px rgba(255,255,255,.18);
}
.pl-yt-btn:focus-visible {
    outline: 3px solid #a5b4fc; outline-offset: 3px;
}
.pl-yt-btn svg { flex: 0 0 auto; }
.pl-player-wrap {
    flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
}
.pl-player-frame {
    position: relative; width: 100%; max-width: 1600px; aspect-ratio: 16 / 9;
    border-radius: 18px; overflow: hidden; background: #000;
    box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
}
.pl-player {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.pl-footer {
    text-align: center; font-size: 13px; color: rgba(226, 232, 240, .45);
}
.pl-footer a { color: #818cf8; font-weight: 700; text-decoration: none; }
.pl-footer a:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .pl-shell { padding: 16px 14px 20px; gap: 14px; }
    .pl-brand { gap: 10px; }
    .pl-logo { width: 44px; height: 44px; }
    .pl-yt-btn { margin-left: 0; flex-basis: 100%; justify-content: center; }
    .pl-player-frame { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .pl-yt-btn { transition: none; }
}