/* ── 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);
  color-scheme: dark; /* native form chrome (select caret, option popup, scrollbar) koyu render — light tema html[data-theme=light]'te light'e döner */
  --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-primary { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.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; }

/* .form-select (Havuz modal köşe/dil/durum dropdown'ları) — .form-control ile aynı koyu/açık tema.
   Bootstrap varsayılanı beyaz zemin + koyu caret → koyu modalda kötü görünüyordu (kullanıcı bildirimi).
   Caret rengi tema-duyarlı: data-URI'ye var() konamaz → koyu tema açık stroke, açık tema koyu stroke. */
.form-select { width: 100%; box-sizing: border-box; background-color: var(--bg); color: var(--text);
               border: 1px solid var(--border); border-radius: var(--radius); padding: .45rem 2rem .45rem .65rem;
               font-size: .88rem; outline: none; cursor: pointer; -webkit-appearance: none; appearance: none;
               background-repeat: no-repeat; background-position: right .6rem center; background-size: 14px 11px;
               background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
               transition: border-color .15s var(--kmp-ease); }
.form-select:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.form-select:disabled { opacity: .5; cursor: default; }
.form-select option { background-color: var(--surface); color: var(--text); }
html[data-theme="light"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235b6b7f' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }

/* ── 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-multi { display: flex; flex-wrap: wrap; gap: .35rem .75rem; }
.pe-multi-opt { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--text);
                cursor: pointer; }
.pe-multi-opt input { accent-color: var(--accent); }
.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; display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.pl-pending { color: var(--text-muted); }
.pl-create-now { white-space: nowrap; }
.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); }
.produce-warn { color: var(--warn-strong); font-weight: 600; }

/* Küçük salt-okuma tablosu (ör. /admin/ai canlı hız metresi) */
.kmp-mini-table { font-size: .88rem; }
.kmp-mini-table th { padding: .35rem .55rem; border-bottom: 2px solid var(--surface-2); font-weight: 600; color: var(--muted); }
.kmp-mini-table td { padding: .3rem .55rem; border-bottom: 1px solid var(--surface-2); }

/* 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; }
/* 🌐 Dil/kanal rozeti — her şerit satırında kompakt bayrak+kod (main=TR, Novo Vision=EN). */
.lang-chip { font-size: .72rem; font-weight: 600; white-space: nowrap; flex-shrink: 0;
             padding: .1rem .45rem; border-radius: var(--kmp-radius-pill, 999px);
             background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); }
/* 🎬 Oynatma-listesi düzeltme sub-satırı (yalnız Onaylı havuz işi) — dil chip'i ile aynı sakin dil. */
.strip-playlist { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.strip-playlist__icon { font-size: 1rem; flex-shrink: 0; }
.strip-playlist__label { font-size: .78rem; color: var(--text-muted); font-weight: 500; flex-shrink: 0; }
.strip-playlist__busy { display: inline-flex; align-items: center; }
/* Şerit içindeki select: normal voice-select'ten daha yığın (min-height küçük). */
.voice-select--strip { min-height: 32px; font-size: .8rem; max-width: 280px; flex: 0 1 auto; }
/* 📈 Performans rozeti (Task 11) — Yayınlandı şeridinde izlenme/beğeni/yorum tek pill'de,
   tabular-nums hizalı; belirgin ama sakin. --bs-tertiary-bg yoksa proje tokenına düşer. */
.perf-badge {
    display: inline-flex; gap: .6rem; align-items: center;
    padding: .25rem .7rem;
    border-radius: var(--kmp-radius-pill, 999px);
    background: var(--bs-tertiary-bg, var(--surface));
    border: 1px solid var(--border);
    font-variant-numeric: tabular-nums; font-size: .82rem;
}
.perf-badge__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
/* Ü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; }

/* AI Maliyet panosu (/admin/ai-maliyet) — özet kutucukları + ince ilerleme çubuğu */
.aim-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; }
.aim-tile { border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 10px;
            padding: .85rem 1rem; background: var(--surface-2); }
.aim-tile--free { border-left-color: var(--ok-text); }
.aim-tile--paid { border-left-color: var(--accent); }
.aim-tile.is-warn { border-left-color: var(--warn-strong); }
.aim-tile.is-danger { border-left-color: var(--danger-text); }
.aim-tile__head { font-size: .82rem; font-weight: 600; color: var(--muted); }
.aim-tile__big { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: .15rem 0; }
.aim-tile__tag { font-size: .7rem; font-weight: 500; color: var(--muted); }
.aim-tile__sub { font-size: .82rem; line-height: 1.35; }
.aim-bar { height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; margin: .2rem 0; border: 1px solid var(--border); }
.aim-bar__fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.aim-bar__fill.is-warn { background: var(--warn-strong); }
.aim-bar__fill.is-danger { background: var(--danger); }

.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ı ── */
/* column: kart + altındaki hukuki bağlantı satırı ALT ALTA dizilsin (glow absolute → akış dışı). */
.login-wrap {
    min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2rem 1rem; position: relative; overflow: hidden;
}
/* Gizlilik/Koşullar — Google API denetimi "Primary Access URL" olarak /login'i açar; politikalar
   oradan GÖRÜNÜR olmalı (yalnız doğrudan URL ile erişilebilir olmaları zayıf kalır). */
.login-legal {
    position: relative; z-index: 1; margin-top: 1.4rem;
    display: flex; gap: .3rem .9rem; flex-wrap: wrap; justify-content: center;
    font-size: .78rem; color: var(--text-dim);
}
.login-legal a { color: var(--text-muted); text-decoration: none; }
.login-legal a:hover { color: var(--accent-2); text-decoration: underline; }
.login-legal a:focus-visible { outline: none; border-radius: .25rem;
                               box-shadow: var(--focus-ring, 0 0 0 3px rgba(99,102,241,.45)); }
/* YouTube atfı — ToS'un istedigi iki bağlantı + denetimin istediği "marka görünür" kanıtı.
   Kart genişliğine hizalı (max-width: kartla aynı) ki ekran görüntüsü derli toplu çıksın. */
.login-attrib {
    position: relative; z-index: 1;
    margin: .85rem auto 0; max-width: 380px;
    display: flex; align-items: flex-start; gap: .5rem;
    font-size: .72rem; line-height: 1.5; color: var(--text-dim); text-align: left;
}
.login-attrib b { font-weight: 600; color: var(--text-muted); }
.login-attrib a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.login-attrib a:hover { color: var(--accent-2); }
.login-attrib a:focus-visible { outline: none; border-radius: .25rem;
                                box-shadow: var(--focus-ring, 0 0 0 3px rgba(99,102,241,.45)); }
.login-yt { flex: none; width: 20px; height: 14px; margin-top: .18rem; }
/* 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; }

/* YouTube günlük kota tahmini kartı (StatusBar altında) */
.dash-quota { display: flex; align-items: center; gap: .75rem; margin: 0 0 .75rem;
              padding: .6rem .85rem; background: var(--surface); border: 1px solid var(--border);
              border-radius: 10px; }
.dash-quota__ico { font-size: 1.35rem; line-height: 1; }
.dash-quota__val { font-size: .95rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.dash-quota__sub { font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dash-quota__tag { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
                   color: var(--text-muted); background: var(--bg); border: 1px solid var(--border);
                   border-radius: 999px; padding: .05rem .4rem; margin-left: .3rem; vertical-align: middle; }

/* 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 { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: .2rem; padding: .75rem .6rem;
    scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.3) transparent; }
.kmp-sidebar__nav::-webkit-scrollbar { width: 8px; }
.kmp-sidebar__nav::-webkit-scrollbar-thumb { background: rgba(148,163,184,.25); border-radius: 8px; }
.kmp-sidebar__nav::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.4); }
.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: yapısal stiller Kmp.Blazor paketinden (kmp-blazor.css) gelir; app.css yalnız
   --kmp-* değişkenlerini (yukarıda :root) markaya eşler → grid dark/light temaya oturur.
   Eski yerel KmpGrid'in .kmp-grid__* bloku paket geçişinde (ebe13fc) ÖLÜ kaldı; dahası
   .kmp-grid tabanı (border+shadow+overflow) paketin .kmp-grid-scroll kartını İKİNCİ kez
   çerçeveleyip kutu-içinde-kutu "uçmuş" görünüme yol açıyordu → tüm blok kaldırıldı.
   Yalnız .kmp-grid__colfilter korunur: Admin ekranlarında satır-içi kompakt input stili (grid değil). ── */
.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); }

/* ── 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; }

/* ── Topbar kanal seçici (ChannelSelector.razor — 2+ aktif kanalda görünür) ──
   İkon + select TEK çerçeve içinde; yükseklik topbar düğmeleriyle (38px) hizalı,
   köşe 8px (siblings ile aynı), OS-native chevron yerine özel SVG ok. ── */
.kmp-channel-picker { display: inline-flex; align-items: center; gap: .3rem; margin-inline-start: .35rem;
    height: 38px; padding: 0 .25rem 0 .6rem; background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 8px; transition: background .15s, border-color .15s; }
.kmp-channel-picker:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.kmp-channel-picker:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.kmp-channel-picker__ico { font-size: .92rem; line-height: 1; opacity: .8; flex-shrink: 0; }
.kmp-channel-picker__select {
  appearance: none; -webkit-appearance: none;
  background: transparent; color: var(--text); border: 0; outline: none;
  padding: 0 1.35rem 0 .15rem; height: 100%; font: inherit; font-weight: 600; cursor: pointer;
  min-width: 138px; max-width: 220px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .3rem center; background-size: .85rem;
}
.kmp-channel-picker__select option { color: var(--text); background: var(--surface); font-weight: 500; }

/* ── 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(640px, 44vw); height: auto; opacity: .07; filter: grayscale(.15);
}
@media (max-width: 1200px) {
    .tr-live-watermark { display: none; }
}
/* FB9 (2026-07-04) — sağ hava kolonu SABİT 300px ("auto" DEĞİL): cycleWeather her 9sn farklı şehir/metin
   çizer; auto kolon içerikle 265–289px arası nefes alıp ortadaki saat şeridini kıpraştırıyordu (kullanıcı:
   "genişlik değişince saatler kıpraşıyor — daha statik olmalı"). Sabit kolon = saatler statik; hava verisi
   geç yüklenirken de yer ayrılır (layout shift yok). Chip metinleri zaten ellipsis/clamp'li — taşmaz. */
.tr-live-hero {
    position: relative; z-index: 1; display: grid; grid-template-columns: 188px minmax(0, 1fr) 300px;
    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;
}
/* Madde B (2026-07-06) — "SIRADA" rozeti artık haber köşesi resminin (.tr-live-rail-media) SOL-ÜST
   köşesinde mutlak konumlu overlay olarak durur (eskiden .tr-live-brand içinde, Piyasalar etiketinin
   üstünde yanlış konumdaydı — kullanıcı bildirimi). Koyu yarı-saydam zemin + küçük punto → resmin
   üzerinde okunur kalır. Idle durumda (foto yok, .tr-live-rail.is-noimg → media 64px mini şeride iner)
   konum/boyut makul kalsın diye ayrıca küçültülür (aşağıdaki is-noimg override). */
.tr-live-rail-rundown {
    position: absolute; top: 0; left: 0; z-index: 2; max-width: 100%;
    display: flex; align-items: baseline; gap: 6px;
    padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(99,102,241,.28), rgba(10,15,30,.72));
    box-shadow: 0 6px 16px rgba(0,0,0,.35);
    overflow: hidden;
}
.tr-live-rail.is-noimg .tr-live-rail-rundown {
    top: 0; left: 0; padding: 2px 8px;
}
.tr-live-rundown-kicker {
    flex-shrink: 0; font-size: 10px; font-weight: 800; letter-spacing: .12em; color: #818cf8; text-transform: uppercase;
}
.tr-live-rundown-body {
    min-width: 0; font-size: 12.5px; font-weight: 700; color: #e2e8f0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.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; }
}
/* ── PİYASA KPI zoom (FLIP-tarzı) ── yalnız yerleşim/z-index/başlangıç durumu; TÜM hareket WAAPI ile
   (element.animate). transition KULLANILMAZ — capture Chrome reduce'ta global transition-kill uygular. */
.tr-live-spotlight-backdrop {
    /* Geometri JS ile KPI ızgarasına ölçeklenir (inset:0 DEĞİL) → yalnız KPI bölgesi kararır;
       haber köşesi + başlık + footer aydınlık kalır. left/top/width/height spotlightTo() tarafından atanır.
       Buzlu cam (backdrop-filter) statik: yalnız arkadaki KPI ızgarası bulanır, büyüyen klon net kalır. */
    position: fixed; z-index: 40; pointer-events: none; border-radius: 16px;
    background: rgba(2, 6, 14, 0);
    backdrop-filter: blur(7px) saturate(.9);
    -webkit-backdrop-filter: blur(7px) saturate(.9);
}
.tr-live-spotlight-backdrop[hidden] { display: none; }
.tr-live-spotlight-clone {
    position: fixed; z-index: 41; margin: 0; transform-origin: center center; pointer-events: none;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
    will-change: transform, box-shadow;
}
.tr-live-weather-spotlight-backdrop { z-index: 42; border-radius: 18px; }
.tr-live-weather-spotlight-clone {
    z-index: 43; margin: 0; transform-origin: center center; pointer-events: none;
    padding: 10px; border-radius: 16px;
    background: linear-gradient(145deg, rgba(8,47,73,.96), rgba(15,23,42,.92));
    box-shadow: 0 34px 90px rgba(0,0,0,.58), 0 0 0 1px rgba(125,211,252,.22);
    overflow: hidden; will-change: transform, opacity, filter;
}
.tr-live-weather-spotlight-clone::after {
    content: ""; position: absolute; inset: -20%; pointer-events: none;
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.18) 48%, transparent 72%);
    transform: translateX(-70%); animation: tr-live-weather-sweep 2.8s ease-in-out infinite;
}
.tr-live-weather-spotlight-clone .tr-live-weather-chip {
    background: rgba(15,23,42,.72); border-color: rgba(125,211,252,.28);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.tr-live-weather-spotlight-clone .tr-live-weather-ico {
    font-size: 34px; animation: tr-live-weather-float 1.8s ease-in-out infinite;
}
.tr-live-weather-spotlight-clone .tr-live-weather-chip:nth-child(2n) .tr-live-weather-ico { animation-delay: .25s; }
.tr-live-weather-spotlight-clone .tr-live-weather-chip:nth-child(3n) .tr-live-weather-ico { animation-delay: .5s; }
@keyframes tr-live-weather-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.05); }
}
@keyframes tr-live-weather-sweep {
    0% { transform: translateX(-70%); opacity: 0; }
    20%, 70% { opacity: 1; }
    100% { transform: translateX(70%); opacity: 0; }
}
/* KPI zoom emtia medalyonu — büyüyen klonun sol-üst köşesinde ilgili emtiayı temsil eden görsel(ler).
   Klonun 2.4× transform'uyla ölçeklenir (çocuk). Giriş fade+slide WAAPI (reduce-bağımsız); base opacity:1
   (WAAPI başarısız olursa yine görünür). Klon head glyph'i JS'te visibility:hidden → medalyon onun yerini alır. */
.tr-live-spot-medallion {
    position: absolute; top: 7px; left: 7px; z-index: 5; opacity: 1;
    display: flex; align-items: center; gap: 3px; padding: 3px; border-radius: 8px;
    background: rgba(2, 6, 14, .55);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.tr-live-spot-medallion img { display: block; }
.tr-live-spot-flag {
    width: 21px; height: 15px; border-radius: 2px; object-fit: cover;
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .35);
}
.tr-live-spot-photo { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; }
.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; }
/* (j) Editöryel alt-bant (footer/bülten reklam) — statik footer'ın hemen üstünde ince şerit.
   Varsayılan gizli; live-screen.js enabled+mesaj varsa açar. Mesaj değişiminde WAAPI ile yumuşak
   geçiş (capture prefers-reduced-motion görür → transition'a değil animasyona/WAAPI'ye güven). */
.tr-live-adband {
    position: relative; width: 100%; margin-top: 0.35rem; padding: 4px 12px;
    display: flex; align-items: center; gap: 10px; line-height: 1.15;
    border-radius: 8px; background: linear-gradient(90deg, rgba(79,70,229,.16), rgba(79,70,229,.04));
    border: 1px solid rgba(129,140,248,.22);
}
/* ⚠️ [hidden] muhafızı ZORUNLU: display:flex, hidden attr'ının UA display:none'ını ezer → JS band.hidden=true
   görsel etki etmez ("kapalı ama canlıda gözüküyor" bug'ı, 2026-07-09). Diğer tüm toggle'lı elemanlarla aynı idiom. */
.tr-live-adband[hidden] { display: none; }
.tr-live-adband-label {
    flex: 0 0 auto; font-size: 0.66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: #c7d2fe; background: rgba(79,70,229,.32); padding: 2px 8px; border-radius: 999px;
}
.tr-live-adband-text {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.92rem; font-weight: 600; color: rgba(255,255,255,.86); letter-spacing: .005em;
}
/* (j) Canlı KPI şeridi (yayın karnesi) — ince, çip dizili; operatör açınca görünür */
.tr-live-kpibar {
    position: relative; width: 100%; margin-top: 0.35rem; padding: 4px 12px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; line-height: 1.15;
    border-radius: 8px; background: linear-gradient(90deg, rgba(16,185,129,.14), rgba(16,185,129,.03));
    border: 1px solid rgba(52,211,153,.20);
}
/* ⚠️ [hidden] muhafızı (adband ile aynı sebep): display:flex hidden attr'ını ezmesin → operatör kapatınca gerçekten gizlensin. */
.tr-live-kpibar[hidden] { display: none; }
.tr-live-kpibar-label {
    flex: 0 0 auto; font-size: 0.66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #a7f3d0; background: rgba(16,185,129,.24); padding: 2px 8px; border-radius: 999px;
}
.tr-live-kpibar-chip {
    flex: 0 0 auto; font-size: 0.86rem; font-weight: 600; color: rgba(255,255,255,.80); letter-spacing: .005em;
}
.tr-live-kpibar-chip strong { color: #ecfdf5; font-weight: 800; font-variant-numeric: tabular-nums; }
/* 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;
    /* Sağ haber/bülten rayı +%25 (3/12=%25 → 5/16=%31,25 = ×1,25) — kullanıcı isteği: ray genişlesin. */
    display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 5fr); 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);
}
.tr-live-rail.is-seg-flash .tr-live-rail-text {
    animation: tr-live-seg-flash .72s ease-out both;
}
.tr-live-rail.is-seg-flash .tr-live-rail-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
    transform: translateX(-120%);
    animation: tr-live-seg-sweep .72s ease-out both;
}
@keyframes tr-live-seg-flash {
    0% { border-color: rgba(255,255,255,.07); box-shadow: none; }
    18% { border-color: rgba(248,250,252,.42); box-shadow: 0 0 24px rgba(34,211,238,.24); }
    100% { border-color: rgba(255,255,255,.07); box-shadow: none; }
}
@keyframes tr-live-seg-sweep {
    to { transform: translateX(120%); }
}
/* 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;
}
/* Madde D (2026-07-06) — haber fotoğrafının SAĞ-ALTINA ilgili haberin tarih+saati bindirilir (yalnız
   haber segmentinde; market/hava/intro/cta'da live-screen.js hidden bırakır/ekler). Koyu yarı-saydam
   zemin + tabular-nums → küçük punto ama okunur, fotoğrafın üstünde (z-index resmin .is-on'undan yüksek). */
.tr-live-rail-date {
    position: absolute; right: 0; bottom: 0; z-index: 2;
    padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10);
    background: rgba(10,15,30,.72); color: rgba(226,232,240,.92);
    font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em;
    box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.tr-live-rail-date[hidden] { display: none; }
.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 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.
   Kullanıcı isteği (2026-07-04): başlık kesiliyordu → clamp 2→4 satıra çıkarıldı. tickKaraoke()
   translateY matematiği body.clientHeight'ı her karede DOM'dan canlı okur (sabit değer değil) →
   başlık büyüyüp body'nin ayrılan alanı küçülse bile scrollHeight/clientHeight oranı otomatik
   doğru kalır; JS'te ek değişiklik GEREKMEDİ (yalnız CSS). ; 2026-07-04: 4→5 */
.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: 4; overflow: hidden;
    max-height: calc(1.2em * 4);
}
.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; position: relative;
    transition: font-size .3s var(--kmp-ease, ease);
}
.tr-live-rail-body-inner {
    min-height: 100%; display: flex; flex-direction: column; justify-content: flex-start;
    will-change: transform;
}
/* 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;
}
.tr-live-rail-body--lg {
    font-size: 27px; font-weight: 600; line-height: 1.42; justify-content: center;
    color: #eef2ff; text-align: center;
}
.tr-live-rail-body--md .tr-live-rail-body-inner,
.tr-live-rail-body--lg .tr-live-rail-body-inner {
    justify-content: 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);
}
/* Spor/Dünya Kupası kartı span'i ızgara-dolum kuralına bağlı: span = 7 − (KPI_adet mod 7).
   Ripple (XRP) eklenince KPI 18→19 oldu (19 mod 7 = 5) → spor span 3→2: 19 KPI + span-2 spor = 21 = 7×3,
   üçüncü satır tam dolar, boş kolon kalmaz. (Önceki 18 KPI'da span 3'tü.) */
.tr-live-card--sport { grid-column: span 2; }
/* Kullanıcı isteği: KPI kartları %5 en/boy küçülsün (ray +%25 genişleyince ferahlasın). Dolgu-ızgarada
   hücre boyu sabit → kart görseli scale(.95) ile hücre içinde %5 küçülür, çevresinde ince pay oluşur.
   Spor kartı KPI değil → hariç (span-2 ile zaten yeniden boyutlandı). */
.tr-live-card:not(.tr-live-card--sport) { transform: scale(.95); transform-origin: center; }
.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; }
/* Yüz başlığı (BUGÜNKÜ MAÇLAR — SON 16 vb.) artık ayrı tablo satırı değil, kart başlığında topun yanında
   (kullanıcı isteği 2026-07-06: "işaretli başlığı topun yanına taşı"). DÜNYA KUPASI altına, sağ hizalı,
   ball (48px) yüksekliğini doldurur → tabloya bir satır yer açıldı. JS (cycleSport) aktif yüzü yazar. */
.tr-live-sport-titlewrap {
    display: flex; flex-direction: column; align-items: flex-end; min-width: 0; gap: 1px;
    padding: 5px 10px 0 0;
}
.tr-live-sport-titlewrap strong { padding: 0; text-align: right; }
.tr-live-sport-subhead {
    font-size: 0.86rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: #34d399; line-height: 1.12; text-align: right; overflow-wrap: anywhere;
}
.tr-live-sport-subhead:empty { display: none; }
/* 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.84rem; 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);
}
/* Başlık ayrı satırdan kalkınca açılan yerle içerik büyütüldü (kullanıcı: "içeriği bir-iki satır büyüt"). */
.tr-live-sport-table td {
    font-size: 1.2rem; font-weight: 700; color: rgba(255,255,255,.92);
    padding: 5px 8px; line-height: 1.3;
    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; }
/* Madde — puan tablosu 4→10 kolona genişledi (# Takım O G B M A Y Av P). Takım adı (2.) esnek kalır;
   O/G/B/M/A/Y/Av (3.–9.) dar+ortalı+tabular-nums; P (10., son) vurgulu sarı — kutu span-3 KPI kartına
   sığması için font biraz küçültüldü, taşma yok (table-layout:fixed + ellipsis güvence altında). */
.tr-live-sport-table--standings th:nth-child(n+3):nth-child(-n+9),
.tr-live-sport-table--standings td:nth-child(n+3):nth-child(-n+9) {
    width: 1.7rem; text-align: center; font-variant-numeric: tabular-nums; padding: 4px 3px;
}
.tr-live-sport-table--standings th:last-child, .tr-live-sport-table--standings td:last-child {
    width: 2.1rem; text-align: center;
}
.tr-live-sport-table--standings td:last-child { color: #fbbf24; font-weight: 800; }
.tr-live-sport-table--standings td { font-size: 1.04rem; }
/* Kullanıcı eki (2026-07-04): Tarih kolonu "Saat"/"dd.MM" kısa formattan tam gg.aa.yyyy [HH:mm]'e
   genişledi (MAÇLAR: "05.07.2026 21:45"; SONUÇLAR: "05.07.2026") — genişlik büyütüldü + nowrap +
   tabular-nums ile satır taşması engellendi, font hafifçe küçültüldü. */
.tr-live-sport-table--matches th:first-child, .tr-live-sport-table--matches td:first-child {
    width: 9.6rem; color: #38bdf8; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 0.98rem;
}
.tr-live-sport-table--results th:first-child, .tr-live-sport-table--results td:first-child {
    width: 6.6rem; color: rgba(148,163,184,.9); white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 0.98rem;
}
.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 (standings'te 2., diğerlerinde de 2.) — sığmayan uzun isimde ellipsis yerine
   iki satıra kaydır (standings'te tek satırda kalması tercih edilir — 10 kolonlu dar tabloda satır
   yüksekliği tutarlı kalsın diye ellipsis+nowrap korunur; yalnız matches/results wrap eder). */
.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;
}
.tr-live-sport-table--standings td:nth-child(2) {
    max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Spor haberleri — dikey aşağıdan-yukarı akış (yatay marquee dar kutuda başlıkları üst üste bindiriyordu).
   Liste iki kez ardışık basılır (Razor'da); track %50 yukarı kayınca tam bir tur tamamlanmış olur → dikişsiz döngü. */
.tr-live-sport-news { overflow: hidden; position: relative; flex: 1; min-height: 0; }
.tr-live-sport-news-track {
    display: flex; flex-direction: column; will-change: transform;
    animation: tr-sport-news-up 36s linear infinite;
}
.tr-live-sport-news-line {
    padding: 4px 0; font-size: 1.02rem; font-weight: 700; color: rgba(255,255,255,.9);
    border-bottom: 1px solid rgba(255,255,255,.05);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.tr-live-sport-news-dot { color: #34d399; font-size: .6rem; margin-right: .4rem; }
/* Bir kopya kutuya sığıyorsa (az haber) JS fitSportNews() --static ekler: animasyon durur
   (kayacak taşma yok) + dikiş kopyası gizlenir → "aynı haber iki kez" görüntüsü ortadan kalkar. */
.tr-live-sport-news-track--static { animation: none; }
.tr-live-sport-news-track--static .tr-live-sport-news-line--dup { display: none; }
@keyframes tr-sport-news-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
/* .tr-live-sport-news-track BİLEREK reduce-muafı DEĞİL (essential motion): akış içerik taşır —
   başlıkların tamamı ancak kayarak görünür. Broadcast capture Chrome'u OS'ten reduce türettiği
   için kapatmak yayında statik duplike satırlar bırakır. */
@media (prefers-reduced-motion: reduce) {
    .tr-live-sport-face { transition: 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; }
}

/* Sesli CTA anonsuyla senkron: Abone/Beğen/Bildirim aksiyon butonları + sahte imleç.
   Giriş/tıklama/çıkış hareketinin TAMAMI live-screen.js'te WAAPI (element.animate) ile — CSS transition
   YOK, çünkü yakalama Chrome'u prefers-reduced-motion:reduce görür → transition ölür ama WAAPI oynar
   (spotlight/medalyon ile aynı ders). Konteyner şeffaf satır; pill/arka-plan butonlarda. */
.tr-live-sub-cta {
    position: fixed; left: 50%; bottom: 62px; transform: translateX(-50%);
    z-index: 40; pointer-events: none; display: inline-flex; align-items: center; gap: 12px;
    max-width: 96vw; opacity: 0; visibility: hidden;
}
.tr-live-sub-cta.is-on { opacity: 1; visibility: visible; }
/* (f) Belirişte "bildirim sinyali" — şeridin arkasında kırmızı ışık pırıltısı (WAAPI ile opacity+scale). */
.tr-live-cta-glow {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.55);
    width: 116%; height: 340%; z-index: -1; pointer-events: none; opacity: 0;
    background: radial-gradient(ellipse at center, rgba(240,22,22,.9), rgba(240,22,22,0) 68%);
    filter: blur(14px); will-change: transform, opacity;
}
.tr-live-cta-btn {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border-radius: 999px; font-weight: 800; font-size: 20px; line-height: 1;
    color: #fff; white-space: nowrap; transform-origin: center; will-change: transform, opacity;
}
/* (f) Üç buton da BASKIN KIRMIZI + beyaz simge. Abone = en parlak kırmızı (birincil, kırmızı hâle);
   Beğen/Bildirim = daha koyu kırmızı → görsel hiyerarşi korunur ama palet tek baskın kırmızı ailesi. */
.tr-live-cta-sub {
    background: linear-gradient(90deg, #ff1a2e, #d1091d);
    box-shadow: 0 14px 40px rgba(0,0,0,.5), 0 0 24px rgba(240,22,22,.6), inset 0 0 0 1px rgba(255,255,255,.24);
}
.tr-live-cta-sub.is-done {
    background: linear-gradient(90deg, #4b5563, #374151);
    box-shadow: 0 14px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.18);
}
.tr-live-cta-like, .tr-live-cta-bell {
    background: linear-gradient(90deg, #c30a1f, #8f0715);
    box-shadow: 0 14px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.2);
}
.tr-live-cta-ic { font-size: 22px; line-height: 1; display: inline-flex; color: #fff; }
.tr-live-cta-ic svg { display: block; }
/* (f) Zil üstünde bildirim rozeti — belirişle senkron pinger (WAAPI). */
.tr-live-cta-badge {
    position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border-radius: 50%;
    background: #ff2038; opacity: 0; z-index: 2; will-change: transform, opacity;
    box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 10px rgba(255,32,56,.95);
}
.tr-live-cta-cursor {
    position: fixed; left: 0; top: 0; z-index: 41; pointer-events: none;
    opacity: 0; will-change: transform, opacity; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
}

/* ── 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; }
}

/* ── T6: SAAT BAŞI BÜLTEN — tam-ekran görsel intro perdesi (glassmorphism) ────────────────────────────
   document.body altında JS ile oluşturulur (InteractiveServer re-render'ından bağımsız, standby/kitap deseni).
   1920×1080 sabit yakalama çerçevesinin tamamını kaplar (position:fixed inset:0). Giriş/çıkış + kademeli
   tipografi HAREKETİ tamamen JS element.animate() ile yapılır (broadcast capture reduced-motion türetir →
   CSS transition öldürülür; WAAPI etkilenmez). Bu blok yalnız DURAĞAN görünümü tanımlar; hareket yok. */
.tr-live-intro {
    position: fixed;
    inset: 0;
    z-index: 1000; /* standby (999) dahil her şeyin ÜSTÜNDE — bülten açılışı en öndedir */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    pointer-events: none; /* yayın ekranı — etkileşim yok */
    opacity: 1;
    will-change: opacity, transform;
}
.tr-live-intro[hidden] { display: none; }
/* Koyu-cam perde: derin gradyan + hafif blur (arka düzeni yumuşatarak örter). */
.tr-live-intro__scrim {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 95% at 50% 8%, rgba(79, 70, 229, 0.42), transparent 58%),
        linear-gradient(160deg, rgba(6, 10, 23, 0.94) 0%, rgba(11, 18, 38, 0.97) 55%, rgba(6, 10, 23, 0.98) 100%);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
}
/* İnce tarama ızgarası — sinyal-ekranı dokusu (standby ile aynı dil). */
.tr-live-intro__scrim::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(80% 70% at 50% 42%, #000 38%, transparent 100%);
    -webkit-mask-image: radial-gradient(80% 70% at 50% 42%, #000 38%, transparent 100%);
}
/* Süpürme ışık şeridi — soldan sağa geçen gradyan (JS transform ile sürülür). */
.tr-live-intro__sweep {
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 40%;
    opacity: 0;
    background: linear-gradient(100deg,
        transparent 0%, rgba(165, 180, 252, 0.10) 30%,
        rgba(224, 231, 255, 0.55) 50%, rgba(165, 180, 252, 0.10) 70%, transparent 100%);
    filter: blur(6px);
    mix-blend-mode: screen;
    transform: translateX(-120%) skewX(-12deg);
}
.tr-live-intro__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    padding: 3rem 4rem;
    color: #eef2ff;
}
.tr-live-intro__brand {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}
.tr-live-intro__logo {
    width: 76px;
    height: 76px;
    filter: drop-shadow(0 12px 34px rgba(99, 102, 241, 0.6));
}
.tr-live-intro__brandtext {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #ffffff 0%, #c7d2fe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.tr-live-intro__clock {
    font-size: 8.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 18px 60px rgba(79, 70, 229, 0.55);
    background: linear-gradient(180deg, #ffffff 0%, #a5b4fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.tr-live-intro__rule {
    width: 260px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, #818cf8 20%, #6366f1 50%, #818cf8 80%, transparent);
}
.tr-live-intro__kicker {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.9);
}

/* ── T6: segment kartı (lower-third) — SAAT BAŞI bültende aktif segment türü etiketi ──────────────────
   Küçük, zarif, sol-alt köşe. Yalnız hourly bültende + bir etiket varsa görünür (JS updateSegCard). Giriş
   animasyonu JS element.animate() ile (broadcast-güvenli). Bu blok yalnız duruğan görünümü tanımlar. */
.tr-live-segcard {
    position: fixed;
    left: 44px;
    bottom: 108px; /* alt banttan (ticker) yukarıda kalsın */
    z-index: 998;  /* karaoke/rayın üstünde ama intro perdesi/standby'nin altında */
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem 1.15rem .6rem .95rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(30, 27, 75, 0.82));
    border: 1px solid rgba(129, 140, 248, 0.42);
    box-shadow: 0 12px 34px rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
    overflow: hidden;
}
.tr-live-segcard[hidden] { display: none; }
.tr-live-segcard__dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #f43f5e;
    box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.22);
    animation: tr-live-segdot 1.4s ease-in-out infinite;
}
.tr-live-segcard__label {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #eef2ff;
}
.tr-live-segcard__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    transform-origin: left center;
    transform: scaleX(0);
    background: linear-gradient(90deg, #22d3ee, #22c55e);
    box-shadow: 0 0 12px rgba(34, 211, 238, .45);
}
@keyframes tr-live-segdot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(.82); }
}
@media (prefers-reduced-motion: reduce) {
    .tr-live-segcard__dot { 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) {
    /* Kaydırma mobilde LiveLayout.razor'daki html/body override'ı ile açılır (yayın çerçevesinin
       overflow:hidden'ı max-width:640px'te gevşetilir → pencere scroll'u). Buradaki shell yalnız
       içerik yüksekliğine büyür (height:auto) + yatay taşmayı keser. */
    .tr-live-shell {
        height: auto; min-height: 100vh; overflow-x: hidden;
        padding: 0 10px 14px; gap: 10px;
    }
    /* Sahne: mobilde tek sütun — ray (bülten foto+başlık+gövde) dar 25% sütunda okunmaz kalıyordu;
       KPI ızgarasının ALTINA tam genişlik iner (değerli haber içeriği korunur, [[item b]]). */
    .tr-live-stage { grid-template-columns: 1fr; gap: 12px; }
    .tr-live-rail {
        border-left: none; border-top: 1px solid rgba(255,255,255,.08);
        padding-left: 0; padding-top: 12px; box-shadow: none;
    }
    .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 { bottom: 14px; gap: 8px; }
    .tr-live-cta-btn { font-size: 14px; padding: 7px 12px; gap: 5px; }
    .tr-live-cta-ic svg { width: 16px; height: 16px; }
    .tr-live-cta-badge { width: 11px; height: 11px; top: -2px; right: -2px; }
}

/* ── 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;
}

/* ── 📌 Sabit yorum affordance — ApprovalCard + JobStrip (Yayınlandı) ortak; global (CSS-izolasyon
   iki bileşeni ayrı kapsadığı için burada paylaşılır). Yayın sonrası YouTube'a manuel sabitlenecek soru. ── */
.pinned-comment {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .7rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--warn-strong, #fbbf24) 12%, var(--surface-2));
    border: 1px solid color-mix(in srgb, var(--warn-strong, #fbbf24) 34%, var(--border));
}
.pinned-comment__icon { flex: 0 0 auto; font-size: 1rem; line-height: 1; }
.pinned-comment__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .88rem;
    line-height: 1.35;
    color: var(--text);
    word-break: break-word;
}
.pinned-comment__copy {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: .3rem .6rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.pinned-comment__copy:hover { background: var(--surface-2); border-color: var(--accent); }
.pinned-comment__copy:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (prefers-reduced-motion: reduce) {
    .pinned-comment__copy { transition: none; }
}
.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; }
    /* (e) Mobil dikey: 16:9 player'ı dev boşlukta ORTALAMA (232px üst+alt void = "berbat") — marka barının
       hemen ALTINA yasla; flex:1 korunduğu için footer en alta sabitlenir, boşluk player↔footer arasında
       (kasıtlı nefes payı gibi okunur, ortada yüzen minik video DEĞİL). */
    .pl-player-wrap { align-items: flex-start; }
}
/* (e) Yatay telefon (kısa yükseklik): 16:9 player'ı GENİŞLİK yerine YÜKSEKLİĞE göre sığdır → kaydırma olmadan
   ekrana tam otursun (LiveLayout /canli'de scroll'a izin verir ama tek ekranda görmek daha iyi).
   Yükseklik viewport-göreli (kesin) olmalı — flex ebeveyn yüksekliği belirsiz olduğu için "height:100%"
   çöker (0×0). width:auto + aspect-ratio 16/9 → genişlik yükseklikten türetilir. */
@media (orientation: landscape) and (max-height: 500px) {
    .pl-player-wrap { align-items: center; flex: 1; }
    .pl-player-frame { width: auto; height: calc(100vh - 150px); max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .pl-yt-btn { transition: none; }
}

/* ── SON DAKİKA takeover (tam ekran kırmızı) ──────────────────────────────────────────────────────────
   JS ile document.body altında oluşturulur; 1920×1080 sabit çerçeveyi tümüyle kaplar. z-index intro
   perdesinden (1000) ve standby'den (999) YÜKSEK → SON DAKİKA her şeyin ÜSTÜNDE. Giriş/çıkış fade'i JS
   element.animate() (WAAPI) ile yapılır — broadcast capture reduced-motion türetir → CSS transition
   öldürülür, WAAPI etkilenmez (essential motion). Bu blok yalnız duruğan görünümü + .is-on final state'ini
   taşır; CSS transition KULLANILMAZ (bu yüzden reduced-motion bloğu da gereksiz). */
.tr-live-alert-takeover {
    position: fixed; inset: 0; z-index: 1100; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 60px;
    background: radial-gradient(circle at 50% 40%, rgba(220,38,38,.96), rgba(120,10,10,.97));
    opacity: 0; visibility: hidden; pointer-events: none;
}
.tr-live-alert-takeover.is-on { opacity: 1; visibility: visible; }
.tr-live-alert-kicker {
    font-size: 46px; font-weight: 900; letter-spacing: .16em; color: #fff; text-transform: uppercase;
    text-shadow: 0 4px 24px rgba(0,0,0,.5);
}
.tr-live-alert-text {
    font-size: 56px; font-weight: 800; color: #fff; line-height: 1.15; max-width: 1400px;
    text-shadow: 0 4px 24px rgba(0,0,0,.5);
}

/* (h) Konserve short dolgusu — TTS susarken kanalın kendi Short'u telefon çerçevesinde + bulanık fon. */
.tr-live-stage { position: relative; }
.tr-live-short {
    position: absolute; inset: 0; z-index: 40;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 38%, rgba(20,26,48,.6), rgba(6,9,20,.95));
    overflow: hidden;
}
.tr-live-short[hidden] { display: none; }
.tr-live-short-bg {
    position: absolute; inset: -8%; width: 116%; height: 116%;
    object-fit: cover; filter: blur(46px) saturate(1.5) brightness(.45);
    transform: scale(1.12); pointer-events: none;
}
.tr-live-short-frame {
    position: relative; height: 88%; aspect-ratio: 9 / 16; max-width: 92%;
    border-radius: 22px; overflow: hidden; background: #000;
    box-shadow: 0 30px 90px rgba(0,0,0,.65), 0 0 0 3px rgba(255,255,255,.08);
}
.tr-live-short-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-live-short-cta {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 18px 22px; color: #fff;
    background: linear-gradient(to top, rgba(5,8,18,.94), rgba(5,8,18,.55) 60%, transparent);
    opacity: 0; transform: translateY(30px);
}
.tr-live-short.is-cta .tr-live-short-cta {
    animation: trShortCtaIn .5s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes trShortCtaIn {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tr-live-short-cta-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .3px; }
.tr-live-short-cta-brand img { border-radius: 7px; }
.tr-live-short-cta-title {
    margin-top: 6px; font-size: 1.15rem; font-weight: 600; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tr-live-short-cta-sub { margin-top: 8px; font-size: .95rem; color: #ffd24a; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
    .tr-live-short.is-cta .tr-live-short-cta { animation: none; opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   PANEL MOBİL UYUMU (factory.erp.tr yönetim ekranları) — additive, izole @media bloğu.
   KAPSAM: yalnız yönetim panel kabuğu (kmp-shell/topbar/modal/form/içerik). Canlı-yayın (tr-live-*)
   ve public izleme (pl-*) sayfaları HARİÇ — onların kendi responsive kuralları yukarıda tanımlı.
   KÖK NEDEN: viewport meta App.razor'da mevcut (device-width doğru) → kırılmalar içerik düzeyinde:
   topbar yatay taşması, dev modal, dokunma-dışı form hedefleri. Kullanıcı çoğunlukla mobilden
   yönetiyor → mobil uyum "şart". ═══════════════════════════════════════════════════════════════ */

/* (M1) Yatay taşma emniyet ağı — drawer off-canvas iken (≤991.98px) içerikteki yatay taşmayı KIRP.
   clip: overflow-y'yi auto'ya ZORLAMAZ + scroll-container yaratmaz (hidden'ın aksine); sticky topbar
   .kmp-content'in kardeşi olduğu için etkilenmez. kmpGrid kendi .kmp-grid-scroll'unda kaydığından
   grid kırpılmaz; kırpılan yalnız taşan dekoratif/ikincil içerik olur → tüm-sayfa yana kaymayı önler. */
@media (max-width: 991.98px) {
    .kmp-content { overflow-x: clip; }
    .kmp-content .container { max-width: 100%; }
}

/* (M2) Telefon (≤640px): topbar sıkıştır + modal ~tam-ekran + dokunma-dostu form kontrolleri. */
@media (max-width: 640px) {
    /* Topbar tek satıra sığsın: "⚙ Yönetim" bağlantısı kenar-menüde zaten var → gizle; kullanıcı adını
       gizle (avatar baş harfi kalır) → hamburger + tema + avatar + çıkış rahat sığar. */
    .kmp-topbar { padding: 0 .55rem; gap: .35rem; }
    .kmp-topbar__link { display: none; }
    .kmp-topbar__user { gap: 0; font-size: 0; }
    .kmp-topbar__avatar { font-size: .78rem; }   /* ebeveyn font-size:0 mirasını geri al */
    .kmp-topbar__logout { padding: .36rem .5rem; }

    /* İçerik: dar ekranda kenar boşluklarını azalt → kartlar genişliği kullanır; başlık satırları sarsın. */
    .kmp-content .container { margin-top: .8rem; padding-left: .7rem; padding-right: .7rem; }
    .kmp-content .section-head { flex-wrap: wrap; gap: .5rem; }

    /* KmpModal telefonda ~tam ekran: inline width'i ez, fare-özel resize grip'ini gizle,
       footer butonları sarsın + genişleyip dokunmaya uygun olsun. */
    .kmp-modal { width: 96vw !important; max-width: 96vw; max-height: 92vh; }
    .kmp-modal-body { padding: .85rem; }
    .kmp-modal-head, .kmp-modal-foot { padding-left: .85rem; padding-right: .85rem; }
    .kmp-modal-resize { display: none; }
    .kmp-modal-foot { flex-wrap: wrap; }
    .kmp-modal-foot .kmp-btn { flex: 1 1 auto; }

    /* Form kontrolleri: iOS odakta oto-zoom'u engelle (≥16px) + blok kontrollere rahat dokunma yüksekliği.
       Kompakt grid satır-içi filtresi (.kmp-grid__colfilter) HARİÇ — küçük kalmalı. */
    .kmp-content input:not(.kmp-grid__colfilter),
    .kmp-content select,
    .kmp-content textarea,
    .kmp-content .form-control,
    .kmp-content .form-select { font-size: 16px; }
    .kmp-content .form-control,
    .kmp-content .form-select,
    .kmp-content .pl-input { min-height: 42px; }
    .kmp-content textarea.form-control,
    .kmp-content textarea.pl-input { min-height: 5.5rem; }
}

/* (M3) Dar ekran (≤992px): kmpGrid mobil taşma düzeltmesi — "alanlar kayboluyor" bug'ı.
   KÖK-NEDEN (kanıtlı, izole repro @390px): paket kmp-blazor.css
   `.kmp-grid-table { table-layout: fixed; width: 100% }` + sabit-genişlikli th'ler
   (ör. Havuz: 180+150+120+70+120+160 = 800px) telefon viewport'unu (≈350px kullanılabilir) aşınca,
   CSS fixed-layout kuralı gereği esnek kolon (İfade, genişliksiz) 0px'e EZİLİR (kaybolur) ve kalan
   sabit kolonlar ekranın sağına taşar. `.kmp-grid-scroll {overflow:auto}` yatay kaydırır ama DOKUNMADA
   keşfedilemez (görünür kaydırma çubuğu yok; dikey sayfa-kaydırma onları ortaya çıkarmaz) → kullanıcı
   "bazı alanlar kayboluyor" görür.
   ÇÖZÜM: table-layout:auto → her kolon doğal-okunur genişlik alır (sihirli toplam yok, grid-başına doğru);
   hücre max-width sınırı → uzun metin sarar, tablo makul kalır; tablo viewport'u aşınca kırpma sağ kenarda
   GÖRÜNÜR olur → yatay kaydırma keşfedilebilir hale gelir. Yalnız .kmp-content kapsamında (panel gridleri)
   → canlı yayın (/turkiye-live) ve public sayfalar etkilenmez. */
@media (max-width: 991.98px) {
    .kmp-content .kmp-grid-table { table-layout: auto; }
    .kmp-content .kmp-grid-table th,
    .kmp-content .kmp-grid-table td { max-width: 72vw; }
    .kmp-content .kmp-grid-scroll { -webkit-overflow-scrolling: touch; }
}

/* ── Gün Kapsaması ısı-haritası (/havuz/kapsama) ──
   Renkler inline verilir (band → bg/fg/border); burası yalnız taban biçim (boyut, hover, focus).
   Bootstrap semantic class'larına GÜVENMİYORUZ (dark tema onları eziyordu = "renklendirme yok" bug'ı). */
.kmp-cov-cell {
    width: 100%;
    min-height: 30px;
    padding: .25rem 0;
    border: 1px solid transparent;
    border-radius: .4rem;
    font-size: .82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    cursor: pointer;
    transition: transform var(--kmp-transition, .15s ease), box-shadow var(--kmp-transition, .15s ease), filter var(--kmp-transition, .15s ease);
}
.kmp-cov-cell:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.12); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.25)); }
.kmp-cov-cell:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgba(99,102,241,.45)); }
.kmp-cov-cell:disabled { opacity: .6; cursor: progress; }

.kmp-cov-table th { font-weight: 600; }

/* Özet + skala çipleri — --c (arka renk) ve --fg (yazı) inline verilir */
.kmp-cov-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .6rem; border-radius: 999px;
    font-size: .8rem; font-weight: 600;
    background: color-mix(in srgb, var(--c) 20%, transparent);
    color: var(--fg);
    border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
}

/* Gün-detay satırı (modal içi) */
.kmp-cov-item {
    padding: .6rem .75rem;
    border: 1px solid var(--border, var(--bs-border-color));
    border-radius: .55rem;
    background: var(--surface-2, transparent);
}
.min-w-0 { min-width: 0; }

/* ══ Hukuki sayfalar (/gizlilik · /privacy · /kosullar · /terms) ══
   ANONİM sayfalar: MainLayout <NotAuthorized> dalında kabuk YOK → sayfa kendi çerçevesini taşır.
   Google API denetimi bu iki URL'yi doğrudan açar; okunabilirlik (ölçü ~70ch) ve iki tema şart. */
.legal { max-width: 60rem; margin: 0 auto; padding: 2.25rem 1.1rem 4rem; font-family: var(--font-sans);
         color: var(--text); line-height: 1.7; }
.legal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
               flex-wrap: wrap; padding-bottom: 1.1rem; margin-bottom: 1.75rem;
               border-bottom: 1px solid var(--border); }
.legal__brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600;
                letter-spacing: -.01em; color: var(--text); text-decoration: none; }
.legal__brand img { width: 28px; height: 28px; border-radius: 7px; }
.legal__lang { display: inline-flex; gap: .3rem; }
.legal__lang a { padding: .3rem .7rem; border-radius: 999px; font-size: .82rem; font-weight: 500;
                 color: var(--text-muted); text-decoration: none; border: 1px solid transparent;
                 transition: background .15s var(--kmp-ease), color .15s var(--kmp-ease); }
.legal__lang a:hover { background: var(--surface-2); color: var(--text); }
.legal__lang a.is-active { background: var(--surface-2); border-color: var(--border);
                           color: var(--accent-2); }
.legal__lang a:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgba(99,102,241,.45)); }

.legal h1 { margin: 0 0 .35rem; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem); font-weight: 600;
            letter-spacing: -.02em; line-height: 1.2; }
.legal__meta { margin: 0 0 2rem; font-size: .84rem; color: var(--text-dim); }
.legal__lead { margin: 0 0 2rem; font-size: 1.02rem; color: var(--text-muted); max-width: 62ch; }
.legal section { margin-bottom: 2rem; max-width: 72ch; }
.legal h2 { margin: 0 0 .6rem; font-size: 1.03rem; font-weight: 600; letter-spacing: -.005em;
            color: var(--text); }
.legal h2 span { display: inline-block; min-width: 1.6rem; color: var(--accent-2);
                 font-variant-numeric: tabular-nums; }
.legal p { margin: 0 0 .8rem; color: var(--text-muted); }
.legal ul { margin: 0 0 .8rem; padding-left: 1.15rem; color: var(--text-muted); }
.legal li { margin-bottom: .4rem; }
.legal li::marker { color: var(--text-dim); }
.legal strong { color: var(--text); font-weight: 600; }
.legal code { font-size: .86em; padding: .1rem .35rem; border-radius: .3rem;
              background: var(--surface-2); border: 1px solid var(--border); }
.legal a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.legal a:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgba(99,102,241,.45));
                         border-radius: .25rem; }

/* Sınırlı Kullanım (Limited Use) beyanı — denetçinin aradığı paragraf, görsel olarak ayrışsın. */
.legal__callout { border: 1px solid var(--border); border-left: 3px solid var(--accent);
                  border-radius: var(--radius, .6rem); background: var(--surface-2);
                  padding: 1rem 1.1rem; margin: 0 0 .8rem; }
.legal__callout p:last-child { margin-bottom: 0; }

.legal__foot { margin-top: 2.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border);
               font-size: .85rem; color: var(--text-dim); display: flex; flex-wrap: wrap;
               gap: .4rem 1.25rem; }
@media (max-width: 640px) {
    .legal { padding: 1.5rem .9rem 3rem; }
}