/* ============================================================
   Yayinla.net — "AURORA" Teması v3.0
   Sıfırdan yazılmış modern editoryal tasarım sistemi.
   ------------------------------------------------------------
   Dosya türüne göre tasarım kararları (haber portalı):
   · Serif display (Fraunces) başlıklar — gazete güveni + karakter
   · Sans (Inter) gövde — ekranda hızlı okunabilirlik
   · Kırmızı YALNIZCA son dakika / canlı / acil için
   · Kimlik: derin mürekkep laciverti + sıcak kağıt zemin
   · Değişken sözleşmesi korunur: --yl-* (view inline stilleri),
     --art-h (kapak sanatı hue), --chip (kategori rengi)
   · Koyu mod: [data-mode="dark"] (JS tarafından çözümlenir;
     system tercihi matchMedia ile izlenir) + [data-theme="dark"]
     geriye dönük uyumluluk.
   ============================================================ */

/* ---------- 1. FONTLAR ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/fraunces-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/fraunces-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/fraunces-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/fraunces-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-600i-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-600i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. TASARIM BELİRTEÇLERİ ---------- */
:root {
    --yl-ink: #171a21;
    --yl-ink-soft: #4a5261;
    --yl-ink-faint: #6b7484;
    --yl-bg: #f7f5f0;
    --yl-bg-soft: #efece4;
    --yl-bg-elev: #ffffff;
    --yl-brand: #14243f;
    --yl-brand-strong: #0d1830;
    --yl-brand-soft: #e8edf6;
    --yl-red: #e11d2e;
    --yl-red-strong: #b7121f;
    --yl-red-soft: #fdecee;
    --yl-live: #e8a13c;
    --yl-gold: #b98a2f;
    --yl-border: #e7e3d9;
    --yl-border-strong: #d3cec1;
    --yl-radius: 18px;
    --yl-radius-sm: 12px;
    --yl-radius-xs: 9px;
    --yl-shadow-sm: 0 1px 2px rgba(23, 26, 33, .05), 0 3px 14px rgba(23, 26, 33, .05);
    --yl-shadow: 0 2px 6px rgba(23, 26, 33, .05), 0 16px 38px rgba(23, 26, 33, .10);
    --yl-shadow-lg: 0 12px 24px rgba(23, 26, 33, .08), 0 30px 70px rgba(23, 26, 33, .18);
    --yl-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --yl-font-serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", "Noto Serif", serif;
    --yl-glass: rgba(255, 255, 255, .86);
    --yl-header-h: 64px;
    --yl-nav-h: 44px;
    --yl-trans: .24s cubic-bezier(.22, .61, .36, 1);
    --yl-rule: 3px;
    --yl-grad-red: linear-gradient(135deg, #e11d2e, #f0564f);
    --yl-grad-brand: linear-gradient(135deg, #14243f, #33507e);
    --yl-nav-h-total: calc(var(--yl-header-h) + var(--yl-nav-h) + 4px);
}
[data-mode="dark"], [data-theme="dark"] {
    color-scheme: dark;
    --yl-ink: #eceef3;
    --yl-ink-soft: #a7afbe;
    --yl-ink-faint: #7e8798;
    --yl-bg: #0f1216;
    --yl-bg-soft: #171b22;
    --yl-bg-elev: #1a1f28;
    --yl-brand: #a9bee6;
    --yl-brand-strong: #c4d3f0;
    --yl-brand-soft: #212b40;
    --yl-red: #ff4d55;
    --yl-red-strong: #ff6b71;
    --yl-red-soft: #331418;
    --yl-live: #f0b55a;
    --yl-border: #262c37;
    --yl-border-strong: #38404e;
    --yl-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 10px rgba(0, 0, 0, .38);
    --yl-shadow: 0 4px 12px rgba(0, 0, 0, .45), 0 18px 40px rgba(0, 0, 0, .5);
    --yl-shadow-lg: 0 24px 60px rgba(0, 0, 0, .62);
    --yl-glass: rgba(15, 18, 22, .86);
    --yl-grad-red: linear-gradient(135deg, #c2141f, #e2403c);
    --yl-grad-brand: linear-gradient(135deg, #16233c, #2b4066);
}

/* ---------- 3. BOOTSTRAP KÖPRÜSÜ ---------- */
[data-mode="dark"], [data-theme="dark"] {
    --bs-body-bg: var(--yl-bg);
    --bs-body-color: var(--yl-ink);
    --bs-emphasis-color: var(--yl-ink);
    --bs-emphasis-color-rgb: 236, 238, 243;
    --bs-body-color-rgb: 236, 238, 243;
    --bs-secondary-color: var(--yl-ink-soft);
    --bs-secondary-color-rgb: 167, 175, 190;
    --bs-tertiary-color: var(--yl-ink-faint);
    --bs-secondary-bg: var(--yl-bg-soft);
    --bs-tertiary-bg: var(--yl-bg-soft);
    --bs-border-color: var(--yl-border);
    --bs-border-color-translucent: var(--yl-border);
    --bs-link-color: var(--yl-brand);
    --bs-link-hover-color: var(--yl-red);
    --bs-heading-color: var(--yl-ink);
    --bs-body-font-family: var(--yl-font);
}

/* ---------- 4. TEMEL ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.site-body {
    font-family: var(--yl-font);
    color: var(--yl-ink);
    background: var(--yl-bg);
    padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-size: .95rem;
    line-height: 1.62;
    transition: background-color .3s ease, color .3s ease;
}
@media (min-width: 768px) { body.site-body { padding-bottom: 0; } }
h1, h2, h3, h4, h5, h6 {
    font-family: var(--yl-font-serif);
    letter-spacing: -.015em;
    font-weight: 600;
    color: var(--yl-ink);
    font-variation-settings: "opsz" 40;
}
a { color: var(--yl-brand); }
::selection { background: var(--yl-red); color: #fff; }
img { max-width: 100%; }
:focus-visible {
    outline: 2px solid var(--yl-red);
    outline-offset: 2px;
    border-radius: 4px;
}
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline-offset: 1px; }

/* İnce kaydırma çubukları */
* { scrollbar-width: thin; scrollbar-color: var(--yl-border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--yl-border-strong); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

.skip-link:focus { position: fixed; top: 10px; left: 10px; z-index: 3000; width: auto; height: auto; padding: .55rem 1.1rem; background: var(--yl-brand); color: #fff; border-radius: 10px; box-shadow: var(--yl-shadow); }

/* Bootstrap ritmi ile uyum: kart ve modal köşeleri */
.site-body .card, .auth-body .card { border-color: var(--yl-border); border-radius: var(--yl-radius); background: var(--yl-bg-elev); }
.site-body .modal-content, .auth-body .modal-content { border-radius: var(--yl-radius); border: 1px solid var(--yl-border); }
.site-body .dropdown-menu, .auth-body .dropdown-menu {
    border: 1px solid var(--yl-border); border-radius: var(--yl-radius-sm);
    box-shadow: var(--yl-shadow); background: var(--yl-bg-elev);
}
.site-body .dropdown-item:active, .auth-body .dropdown-item:active { background: var(--yl-brand); }
.site-body .form-control, .site-body .form-select, .auth-body .form-control, .auth-body .form-select {
    border-color: var(--yl-border-strong); border-radius: var(--yl-radius-xs); background: var(--yl-bg-elev); color: var(--yl-ink);
}
.site-body .form-control:focus, .site-body .form-select:focus, .auth-body .form-control:focus, .auth-body .form-select:focus {
    border-color: var(--yl-brand); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--yl-brand) 16%, transparent);
}
.site-body .btn-primary, .auth-body .btn-primary { --bs-btn-bg: var(--yl-brand); --bs-btn-border-color: var(--yl-brand); --bs-btn-hover-bg: var(--yl-brand-strong); --bs-btn-hover-border-color: var(--yl-brand-strong); --bs-btn-active-bg: var(--yl-brand-strong); }
.site-body .btn-outline-primary, .auth-body .btn-outline-primary { --bs-btn-color: var(--yl-brand); --bs-btn-border-color: var(--yl-border-strong); --bs-btn-hover-bg: var(--yl-brand); --bs-btn-hover-border-color: var(--yl-brand); --bs-btn-active-bg: var(--yl-brand); }
.site-body .btn-danger, .auth-body .btn-danger { --bs-btn-bg: var(--yl-red); --bs-btn-border-color: var(--yl-red); --bs-btn-hover-bg: var(--yl-red-strong); --bs-btn-hover-border-color: var(--yl-red-strong); }
.site-body .btn-outline-danger, .auth-body .btn-outline-danger { --bs-btn-color: var(--yl-red); --bs-btn-hover-bg: var(--yl-red); --bs-btn-hover-border-color: var(--yl-red); }
.site-body .table { --bs-table-bg: transparent; }
.site-body .badge { font-weight: 600; letter-spacing: .01em; }
.site-body .alert { border-radius: var(--yl-radius-sm); border-width: 1px; }

/* ---------- 5. OKUMA İLERLEME ÇUBUĞU ---------- */
.reading-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: var(--yl-grad-red);
    z-index: 2050; transition: width .08s linear; pointer-events: none;
}

/* ---------- 6. ÜST ŞERİT (TOPBAR) — mürekkep laciverti ---------- */
.topbar {
    font-size: .775rem;
    background: var(--yl-brand-strong);
    color: rgba(255, 255, 255, .8);
    border-bottom: 0;
}
.topbar a { color: rgba(255, 255, 255, .74); transition: color var(--yl-trans); }
.topbar a:hover { color: #fff; }
.topbar .topbar-time { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.topbar a[style] { color: #ff97a0 !important; font-weight: 800; letter-spacing: .06em; }
.topbar a[style]:hover { color: #fff !important; }
[data-mode="dark"] .topbar, [data-theme="dark"] .topbar { background: #0a0d13; border-bottom: 1px solid #1c2230; }

/* ---------- 7. BAŞLIK (HEADER) — gazete masthead ---------- */
.site-header {
    z-index: 1030;
    background: var(--yl-glass) !important;
    -webkit-backdrop-filter: saturate(1.5) blur(16px);
    backdrop-filter: saturate(1.5) blur(16px);
    border-bottom: 1px solid var(--yl-border);
    box-shadow: 0 8px 28px rgba(13, 24, 48, .05);
}
[data-mode="dark"] .site-header, [data-theme="dark"] .site-header { box-shadow: none; border-bottom-color: #232a38; }
/* Gazete kuralı: masthead altı kırmızı çizgi + ince mürekkep çizgisi */
.site-header::after {
    content: ""; display: block; height: var(--yl-rule);
    background: linear-gradient(90deg, var(--yl-red) 0 64px, var(--yl-brand-strong) 64px 100%);
    opacity: .95;
}
.brand-mark {
    font-family: var(--yl-font-serif);
    font-weight: 700;
    font-size: 1.66rem;
    letter-spacing: -.02em;
    color: var(--yl-ink) !important;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    font-variation-settings: "opsz" 60;
}
.brand-mark .dot { color: var(--yl-red); font-size: 1.5em; line-height: 0; margin-left: 1px; }
.brand-mark .tld { font-family: var(--yl-font); font-size: .8rem; font-weight: 600; color: var(--yl-ink-faint); margin-left: 3px; letter-spacing: .08em; }
.site-header .navbar-brand { position: relative; transition: transform var(--yl-trans); }
.site-header .navbar-brand:hover { transform: translateY(-1px); }
.site-header .navbar-brand::after {
    content: ""; position: absolute; left: 2px; right: 2px; bottom: -6px; height: 2px;
    background: var(--yl-red);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--yl-trans);
}
.site-header .navbar-brand:hover::after { transform: scaleX(1); }

.main-nav { text-transform: uppercase; }
.main-nav .nav-link {
    color: var(--yl-ink-soft);
    font-size: .755rem;
    font-weight: 700;
    letter-spacing: .07em;
    padding: .5rem .75rem;
    border-radius: 9px;
    transition: color var(--yl-trans), background var(--yl-trans);
    white-space: nowrap;
    position: relative;
}
.main-nav .nav-link:hover { color: var(--yl-ink); background: var(--yl-bg-soft); }
.main-nav .nav-urgent {
    color: #fff;
    background: var(--yl-red);
    letter-spacing: .07em;
    border-radius: 999px;
    padding-inline: .9rem;
    box-shadow: 0 3px 14px color-mix(in srgb, var(--yl-red) 40%, transparent);
}
.main-nav .nav-urgent:hover { color: #fff; background: var(--yl-red-strong); }
.nav-urgent .bi { animation: urgent-pulse 2.4s ease-in-out infinite; }
@keyframes urgent-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 11px;
    color: var(--yl-ink-soft); background: transparent; border: 0;
    position: relative; transition: background var(--yl-trans), color var(--yl-trans), transform var(--yl-trans);
    text-decoration: none;
}
.icon-btn:hover { background: var(--yl-bg-soft); color: var(--yl-ink); }
.icon-btn:active { transform: scale(.94); }
.icon-btn .notif-count {
    position: absolute; top: 3px; right: 3px;
    font-size: .58rem; padding: .16rem .32rem;
    box-shadow: 0 0 0 2px var(--yl-bg-elev);
}
.menu-toggle { border: 0; background: transparent; font-size: 1.5rem; line-height: 1; color: var(--yl-ink); padding: .3rem .5rem; border-radius: 10px; }
.menu-toggle:hover { background: var(--yl-bg-soft); }

.search-form .input-group {
    background: var(--yl-bg-soft);
    border: 1px solid var(--yl-border);
    border-radius: 999px;
    overflow: hidden;
    transition: border-color var(--yl-trans), box-shadow var(--yl-trans), background var(--yl-trans);
}
.search-form .input-group:focus-within { border-color: var(--yl-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--yl-brand) 13%, transparent); background: var(--yl-bg-elev); }
.search-form .form-control { border: 0; background: transparent; box-shadow: none; font-size: .84rem; }
.search-form .form-control::placeholder { color: var(--yl-ink-faint); }
.search-form .btn { border: 0; background: transparent; color: var(--yl-ink-soft); border-radius: 0; }
.search-form .btn:hover { color: var(--yl-red); }

.header-cta { border-radius: 999px; font-weight: 700; }

/* Tema düğmesi: yalnızca geçerli modun ikonu görünür */
.js-theme-toggle i { display: none; }
.js-theme-toggle { transition: transform var(--yl-trans), background var(--yl-trans); }
.js-theme-toggle:active { transform: rotate(-14deg) scale(.94); }
[data-theme="light"] .js-theme-toggle i.bi-sun-fill { display: inline; }
[data-theme="dark"] .js-theme-toggle i.bi-moon-stars-fill { display: inline; }
[data-theme="system"] .js-theme-toggle i.bi-circle-half { display: inline; }
html:not([data-theme="dark"]):not([data-theme="light"]) .js-theme-toggle i.bi-circle-half { display: inline; }

/* ---------- 8. KATEGORİ ŞERİDİ ---------- */
.cat-strip {
    background: color-mix(in srgb, var(--yl-bg-elev) 72%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--yl-border);
    position: relative;
}
[data-mode="dark"] .cat-strip, [data-theme="dark"] .cat-strip { background: color-mix(in srgb, var(--yl-bg-soft) 78%, transparent); }
.cat-strip-inner {
    display: flex; gap: .1rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: .32rem 0;
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent);
}
.cat-strip-inner::-webkit-scrollbar { display: none; }
.cat-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .36rem .82rem;
    font-size: .785rem;
    font-weight: 600;
    color: var(--yl-ink-soft);
    text-decoration: none;
    border-radius: 999px;
    white-space: nowrap;
    transition: color var(--yl-trans), background var(--yl-trans), border-color var(--yl-trans);
    border: 1px solid transparent;
}
.cat-chip:hover { color: var(--yl-ink); background: var(--yl-bg-soft); border-color: var(--yl-border); }
.cat-chip.is-hot {
    color: #fff;
    background: var(--yl-red);
    font-weight: 700;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--yl-red) 34%, transparent);
}
.cat-chip.is-hot:hover { background: var(--yl-red-strong); color: #fff; }

/* ---------- 9. SON DAKİKA TICKER — kesintisiz döngü ---------- */
.breaking-ticker {
    background: var(--yl-brand-strong);
    color: #fff;
    height: 40px;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
    position: relative;
    z-index: 1020;
}
.ticker-label {
    background: var(--yl-red);
    padding: 0 .95rem;
    font-size: .7rem;
    letter-spacing: .16em;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.ticker-label .bi { animation: urgent-pulse 2s ease-in-out infinite; }
.ticker-label::after {
    content: ""; position: absolute; right: -13px; top: 0;
    border-block: 20px solid transparent; border-left: 13px solid var(--yl-red);
}
.ticker-track { overflow: hidden; position: relative; }
.ticker-items {
    animation: ticker-scroll 44s linear infinite;
    will-change: transform;
    width: max-content;
}
.ticker-track:hover .ticker-items { animation-play-state: paused; }
.ticker-items a {
    color: rgba(255,255,255,.92); text-decoration: none; font-weight: 600; font-size: .845rem;
    display: inline-flex; align-items: center;
    transition: color var(--yl-trans);
}
.ticker-items a::before {
    content: "●"; font-size: .5rem; margin-right: .55rem;
    color: var(--yl-live);
}
.ticker-items a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---------- 10. BÖLÜM BAŞLIKLARI ---------- */
.section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1rem;
    gap: 1rem;
}
/* Başlık dar ekranda küçülüp alt satıra kırılabilir; min-width:0 olmadan
   nowrap rozet (ör. Shorts çipi) mobilde sayfayı yatay taşırıyordu */
.section-head .section-title { flex: 0 1 auto; min-width: 0; }
.section-head .see-all { flex: 0 0 auto; }
.section-title {
    font-family: var(--yl-font);
    font-size: .92rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--yl-ink);
    display: inline-flex; align-items: center; gap: .65rem;
    margin: 0;
    white-space: nowrap;
}
.section-title::before {
    content: ""; width: 9px; height: 9px;
    background: var(--yl-brand);
    border-radius: 2.5px;
    flex-shrink: 0;
    transform: rotate(45deg);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--yl-brand) 14%, transparent);
}
.section-title.is-red::before { background: var(--yl-red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--yl-red) 14%, transparent); }
.section-head::after {
    content: ""; order: 2; flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--yl-border-strong), transparent);
    margin-left: .35rem;
    min-width: 24px;
}
.see-all {
    order: 3;
    font-size: .75rem; font-weight: 700; letter-spacing: .05em;
    color: var(--yl-ink-soft); text-decoration: none;
    display: inline-flex; align-items: center; gap: .25rem;
    text-transform: uppercase;
    transition: color var(--yl-trans), gap var(--yl-trans);
    white-space: nowrap;
}
.see-all:hover { color: var(--yl-red); gap: .55rem; }

/* ---------- 11. HABER KARTI ---------- */
.news-card {
    background: var(--yl-bg-elev);
    border: 1px solid var(--yl-border);
    border-radius: var(--yl-radius);
    overflow: hidden;
    transition: transform var(--yl-trans), box-shadow var(--yl-trans), border-color var(--yl-trans);
    height: 100%;
    position: relative;
}
.news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--yl-shadow);
    border-color: var(--yl-border-strong);
}
.news-card-img { overflow: hidden; background: var(--yl-bg-soft); }
.news-card-img img { transition: transform .55s cubic-bezier(.22, .61, .36, 1); }
.news-card:hover .news-card-img img { transform: scale(1.05); }
.news-card-body { padding: .95rem 1.05rem 1.1rem; }
.news-card-title {
    font-family: var(--yl-font-serif);
    font-size: 1.08rem;
    line-height: 1.3;
    font-weight: 600;
    margin: 0;
    color: var(--yl-ink);
    transition: color var(--yl-trans);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-variation-settings: "opsz" 32;
}
.news-card:hover .news-card-title { color: var(--yl-red); }
.news-card-md .news-card-title { font-size: 1.16rem; }
.news-card-sm .news-card-title { font-size: 1rem; -webkit-line-clamp: 2; }
.news-card-lg .news-card-title { font-size: 1.62rem; -webkit-line-clamp: 3; }
.news-card-spot { color: var(--yl-ink-soft); }
.news-card-meta {
    color: var(--yl-ink-faint);
    font-size: .745rem;
    gap: .35rem .85rem !important;
    font-variant-numeric: tabular-nums;
}
.news-card-meta .bi { font-size: .78rem; }

/* lg: overlay hero — kapak zemin üzerinde metin */
.news-card-lg { border: 0; background: var(--yl-brand-strong); }
.news-card-lg .news-card-img { position: absolute; inset: 0; }
.news-card-lg { min-height: 400px; }
.news-card-lg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10, 15, 26, .06) 18%, rgba(10, 15, 26, .52) 56%, rgba(8, 12, 22, .88) 100%);
    transition: opacity var(--yl-trans);
}
.news-card-lg .news-card-body {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 1.35rem 1.45rem;
}
.news-card-lg .news-card-title { color: #fff; letter-spacing: -.02em; }
.news-card-lg:hover .news-card-title { color: #ffd9db; }
.news-card-lg .news-card-meta { color: rgba(255,255,255,.8); }
.news-card-lg .news-card-spot { color: rgba(255,255,255,.88); }
.news-card-lg .category-chip { --chip-a: color-mix(in srgb, var(--chip) 80%, #fff); color: #fff; background: color-mix(in srgb, var(--chip) 68%, #000); border-color: transparent; }
.news-card-lg .badge-verify { background: rgba(255,255,255,.17) !important; color: #fff !important; backdrop-filter: blur(5px); }
.news-card-lg .badge-breaking { box-shadow: 0 3px 12px rgba(0,0,0,.35); }

/* ============================================================
   HB MANŞET — haberler.com tarzı: büyük slider + resimli yan manşet
   ============================================================ */
.hb-slider {
    position: relative; overflow: hidden;
    border-radius: var(--yl-radius);
    background: var(--yl-brand-strong);
    box-shadow: var(--yl-shadow);
    isolation: isolate;
}
.hb-slides { position: relative; height: clamp(320px, 42vw, 520px); }
.hb-slide {
    position: absolute; inset: 0; z-index: 1;
    opacity: 0; visibility: hidden; transform: scale(1.045);
    transition: opacity .55s ease, transform 1.1s cubic-bezier(.22,.61,.36,1), visibility .55s;
}
.hb-slide.is-active { opacity: 1; visibility: visible; transform: none; z-index: 2; }
.hb-slide .news-card, .hb-slide .news-card-lg { height: 100%; min-height: 0; border-radius: 0; }
.hb-slide .news-card-lg::after {
    background: linear-gradient(180deg, rgba(8,12,22,.05) 34%, rgba(8,12,22,.42) 62%, rgba(6,9,16,.93) 100%);
}
/* haberler.com caption: yalnız kırmızı rozet + büyük başlık */
.hb-slide .news-card-body { padding: 1.5rem 1.6rem 1.6rem; }
.hb-slide .news-card-meta, .hb-slide .news-card-spot, .hb-slide .badge-verify { display: none !important; }
.hb-slide .news-card-title {
    font-size: clamp(1.45rem, 2.4vw, 2.3rem); line-height: 1.14;
    -webkit-line-clamp: 2; text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
.hb-slide .badge-breaking, .hb-slide .category-chip {
    background: #ec0000 !important; color: #fff !important; border-color: transparent !important;
    font-size: .8rem; padding: .44rem .85rem; border-radius: 7px; letter-spacing: .045em;
    box-shadow: 0 6px 18px rgba(236,0,0,.42);
}
/* yuvarlak oklar (haberler.com new3btn) */
.hb-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
    width: 42px; height: 42px; border-radius: 50%; border: 0; padding: 0;
    background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center;
    font-size: 1.2rem; cursor: pointer; backdrop-filter: blur(4px);
    opacity: 0; transition: opacity var(--yl-trans), background var(--yl-trans), transform var(--yl-trans);
}
.hb-slider:hover .hb-nav, .hb-slider:focus-within .hb-nav, .hb-slider.is-touch .hb-nav { opacity: 1; }
.hb-nav:hover { background: rgba(0,0,0,.74); }
.hb-nav:active { transform: translateY(-50%) scale(.9); }
.hb-prev { left: 14px; }
.hb-next { right: 14px; }
/* dots (haberler.com slider-dots) */
.hb-dots {
    position: absolute; right: 16px; bottom: 15px; z-index: 6;
    display: flex; align-items: center; gap: 7px;
}
.hb-dot {
    width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0;
    background: rgba(255,255,255,.45); cursor: pointer;
    transition: width .3s ease, background .3s ease;
}
.hb-dot:hover { background: rgba(255,255,255,.75); }
.hb-dot.is-active { width: 26px; background: #fff; }
/* yan manşet: resimli kartlar (new3card tarzı — üst görsel + başlık) */
.hb-side { display: flex; flex-direction: column; gap: .9rem; height: 100%; }
.hb-side-item { flex: 1 1 0; display: flex; min-height: 0; }
.hb-side-item .news-card { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.hb-side-item .news-card-img { flex: 1 1 auto; min-height: 104px; position: relative; }
.hb-side-item .news-card-img.ratio::before { content: none !important; }
.hb-side-item .news-card-img::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(8,12,22,.22) 100%);
    pointer-events: none;
}
.hb-side-item .news-card-body { padding: .62rem .85rem .72rem; }
.hb-side-item .news-card-title { font-size: 1.04rem; -webkit-line-clamp: 2; }
.hb-side-item .news-card-meta { gap: .7rem; font-size: .74rem; }
.hb-side-item .badge { font-size: .64rem; }
/* harita satırı (manşetin bir altında tam genişlik) */
.hb-map .widget-card { border-radius: var(--yl-radius); overflow: hidden; }
.hb-map #home-map { border-radius: var(--yl-radius-sm); overflow: hidden; z-index: 0; }
[data-mode="dark"] .hb-slider { box-shadow: var(--yl-shadow-lg); }
[data-mode="dark"] .hb-side-item .news-card-img::after { background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.4) 100%); }
@media (max-width: 991.98px) {
    .hb-slides { height: clamp(250px, 52vw, 400px); }
    .hb-side { margin-top: .35rem; }
    .hb-side-item .news-card-img { min-height: 132px; }
    .hb-nav { opacity: 1; width: 37px; height: 37px; }
}
@media (max-width: 575.98px) {
    .hb-slides { height: 320px; }
    .hb-slide .news-card-body { padding: 1rem 1.05rem 1.1rem; }
    .hb-slide .news-card-title { font-size: 1.28rem; }
    .hb-slide .badge-breaking, .hb-slide .category-chip { font-size: .7rem; padding: .34rem .65rem; }
    .hb-dots { right: 12px; bottom: 12px; }
    .hb-side-item .news-card-img { min-height: 116px; }
}
@media (prefers-reduced-motion: reduce) {
    .hb-slide { transition: opacity .18s linear; transform: none; }
    .hb-dot, .hb-nav { transition: none; }
}

/* --- PİYASA ŞERİDİ: haberler.com tarzı döviz/borsa bandı (manşetin hemen üstünde) --- */
.hb-ticker {
    display: flex; align-items: stretch;
    background: linear-gradient(92deg, #14181f 0%, #1c2330 55%, #232c3c 100%);
    color: #fff; border-radius: var(--yl-radius); overflow: hidden;
    box-shadow: var(--yl-shadow); margin-bottom: .9rem;
}
.hb-ticker-cap {
    display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0;
    background: var(--yl-red); color: #fff;
    font-weight: 800; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
    padding: 0 .95rem;
}
.hb-ticker-viewport {
    display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
/* MARQUEE: içerik JS tarafından 2x klonlanır; translateX(-50%) = kesintisiz döngü */
.hb-ticker-track {
    display: flex; align-items: stretch; width: max-content;
    animation: hbMarquee 38s linear infinite; will-change: transform;
}
.hb-ticker:hover .hb-ticker-track,
.hb-ticker:focus-within .hb-ticker-track,
.hb-ticker.is-paused .hb-ticker-track { animation-play-state: paused; }
@keyframes hbMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hb-ticker.is-paused .hb-ticker-track .hb-tk:hover { background: rgba(255,255,255,.06); }
.hb-tk { display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0;
    padding: .58rem 1rem; border-right: 1px solid rgba(255,255,255,.09);
    white-space: nowrap; transition: background .18s ease;
}
.hb-tk:hover { background: rgba(255,255,255,.06); }
/* Canlı API güncellemesinde değişen değere kısa flaş */
.hb-tk.is-flash .hb-tk-val { animation: hbTkFlash .9s ease 2; }
@keyframes hbTkFlash { 0%, 100% { color: #fff; } 50% { color: var(--yl-live); } }
.hb-tk-name {
    font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.66);
}
.hb-tk-val { font-size: .98rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.hb-tk-chg {
    display: inline-flex; align-items: center; gap: .18rem;
    font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
    padding: .12rem .42rem; border-radius: 99px;
}
.hb-tk.is-up .hb-tk-chg { color: #4ade80; background: rgba(74,222,128,.12); }
.hb-tk.is-down .hb-tk-chg { color: #f87171; background: rgba(248,113,113,.12); }
.hb-tk.is-up .hb-tk-chg i { font-size: .68rem; }
.hb-tk.is-down .hb-tk-chg i { font-size: .68rem; }
/* v5.0 ÇİP MAKAS ROZETİ: kuyumcu makası yüzdesi — şerit her zaman koyu
   olduğu için tek tema yeterli; title ile ipucu, cursor:help */
.hb-tk-makas {
    display: inline-flex; align-items: center;
    font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums;
    padding: .1rem .42rem; border-radius: 99px; white-space: nowrap;
    color: #fcd34d; background: rgba(251,191,36,.15); border: 1px solid rgba(251,191,36,.3);
    cursor: help;
}
/* Tıklanabilir öğe (k kodlu): button reset + grafik işareti — mini kur popup'ı açılır */
button.hb-tk {
    appearance: none; background: none; border: 0; border-right: 1px solid rgba(255,255,255,.09);
    font: inherit; color: inherit; text-align: inherit; cursor: pointer;
}
button.hb-tk:hover, button.hb-tk:focus-visible { background: rgba(255,255,255,.1); }
button.hb-tk:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.hb-tk-ic { font-size: .8rem; color: rgba(255,255,255,.45); transition: color .18s ease, transform .18s ease; }
button.hb-tk:hover .hb-tk-ic, button.hb-tk:focus-visible .hb-tk-ic { color: var(--yl-live); transform: translateY(-1px); }
/* Grafik popup'ı açıkken şerit sakinleşir */
.hb-ticker.is-chart-open .hb-ticker-track { animation-play-state: paused; }
[data-mode="dark"] .hb-ticker { box-shadow: var(--yl-shadow-lg); border: 1px solid rgba(255,255,255,.08); }
/* Duraklat/oynat düğmesi (erişilebilirlik: hareketi kullanıcı denetimine bırakır) */
.hb-ticker-pause {
    appearance: none; border: 0; border-left: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05); color: #fff; width: 42px; flex-shrink: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: .95rem;
    transition: background .18s ease;
}
.hb-ticker-pause:hover { background: rgba(255,255,255,.16); }
.hb-ticker-pause:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
/* Hareketi azalt tercihinde: marquee kapalı, şerit elle kaydırılabilir kalır */
@media (prefers-reduced-motion: reduce) {
    .hb-ticker-track { animation: none; }
    .hb-ticker-viewport { overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; -webkit-mask-image: none; mask-image: none; }
    .hb-tk.is-flash .hb-tk-val { animation: none; }
}
@media (max-width: 575.98px) {
    .hb-ticker-cap { padding: 0 .7rem; font-size: .66rem; }
    .hb-tk { padding: .5rem .7rem; gap: .38rem; }
    .hb-tk-val { font-size: .9rem; }
    .hb-ticker-pause { width: 34px; }
}

/* --- PİYASA KARTLARI: manşetin hemen altında, şerit dışında ayrı vitrin ---
   Altın gramı odaklı tıklanabilir kartlar (Gram Altın/Gümüş/Ons/BIST 30):
   sunucuda çizilmiş 30 günlük sparkline + canlı değer + günlük değişim.
   Tıklayınca şeritteki ile aynı mini kur grafik popup'ı açılır. */
.hb-market-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem;
}
.hb-mcard {
    position: relative; appearance: none; text-align: left; cursor: pointer;
    display: flex; flex-direction: column; gap: .18rem; overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.45));
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--yl-border); border-radius: var(--yl-radius);
    padding: .8rem .95rem .65rem; color: var(--yl-ink); font: inherit;
    box-shadow: var(--yl-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hb-mcard::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: linear-gradient(180deg, var(--yl-red), transparent 85%);
    opacity: 0; transition: opacity .18s ease;
}
.hb-mcard:hover, .hb-mcard:focus-visible {
    transform: translateY(-3px); box-shadow: var(--yl-shadow);
    border-color: rgba(214, 40, 40, .35);
}
.hb-mcard:hover::before, .hb-mcard:focus-visible::before { opacity: 1; }
.hb-mcard:focus-visible { outline: 2px solid var(--yl-red); outline-offset: 2px; }
.hb-mcard:active { transform: translateY(-1px); }
.hb-mc-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.hb-mc-name {
    font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--yl-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hb-mc-ic { flex-shrink: 0; font-size: .82rem; color: var(--yl-ink-faint); transition: color .18s ease, transform .18s ease; }
.hb-mcard:hover .hb-mc-ic, .hb-mcard:focus-visible .hb-mc-ic { color: var(--yl-red); transform: translateY(-1px); }
.hb-mc-val {
    font-size: clamp(1.12rem, 1.6vw, 1.4rem); font-weight: 800; line-height: 1.2;
    font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.hb-mc-chg {
    display: inline-flex; align-items: center; gap: .18rem; align-self: flex-start;
    font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
    padding: .1rem .45rem; border-radius: 99px;
}
.hb-mcard.is-up .hb-mc-chg { color: #16a34a; background: rgba(74, 222, 128, .14); }
.hb-mcard.is-down .hb-mc-chg { color: #dc2626; background: rgba(248, 113, 113, .14); }
.hb-mcard.is-up .hb-mc-chg i, .hb-mcard.is-down .hb-mc-chg i { font-size: .66rem; }
/* Canlı poll (/piyasa-kartlar) güncellemesinde değişen kart değerine kısa flaş */
.hb-mcard.is-flash .hb-mc-val { animation: hbMcFlash .9s ease 2; }
@keyframes hbMcFlash { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
    .hb-mcard.is-flash .hb-mc-val { animation: none; }
}
/* v5.1 KART MAKAS ROZETİ: şeritteki .hb-tk-makas ile aynı amber dil; kart zemini
   açık olduğundan metin koyu amber'e çekilir (kontrast), koyu modda şeritle aynı */
.hb-mc-makas { margin-top: .1rem; }
.hb-mcard .hb-mc-makas { color: #b45309; background: rgba(251, 191, 36, .18); border-color: rgba(180, 83, 9, .35); }
[data-mode="dark"] .hb-mcard .hb-mc-makas { color: #fcd34d; background: rgba(251, 191, 36, .15); border-color: rgba(251, 191, 36, .3); }
/* Sunucuda çizilen 30 günlük eğilim (SVG polyline) */
.hb-mc-spark { display: block; width: 100%; height: 34px; margin-top: .35rem; }
.hb-mc-spark .hb-mc-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hb-mc-spark .hb-mc-area { stroke: none; opacity: .16; }
.hb-mc-spark.is-up .hb-mc-line { stroke: #16a34a; }
.hb-mc-spark.is-up .hb-mc-area { fill: #16a34a; }
.hb-mc-spark.is-down .hb-mc-line { stroke: #dc2626; }
.hb-mc-spark.is-down .hb-mc-area { fill: #dc2626; }
.hb-mc-spark .hb-mc-dot { stroke: #fff; stroke-width: 1.4; }
.hb-mc-spark.is-up .hb-mc-dot { fill: #16a34a; }
.hb-mc-spark.is-down .hb-mc-dot { fill: #dc2626; }
/* Koyu mod: cam kartlar koyu zeminde aynı derinlikte */
[data-mode="dark"] .hb-mcard {
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
    border-color: rgba(255,255,255,.09);
    color: var(--yl-ink);
}
[data-mode="dark"] .hb-mcard:hover, [data-mode="dark"] .hb-mcard:focus-visible {
    border-color: rgba(255, 122, 122, .4);
    background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
}
[data-mode="dark"] .hb-mcard.is-up .hb-mc-chg { color: #4ade80; background: rgba(74, 222, 128, .13); }
[data-mode="dark"] .hb-mcard.is-down .hb-mc-chg { color: #f87171; background: rgba(248, 113, 113, .13); }
[data-mode="dark"] .hb-mc-spark.is-up .hb-mc-dot { stroke: #10151d; }
[data-mode="dark"] .hb-mc-spark.is-down .hb-mc-dot { stroke: #10151d; }
@media (max-width: 991.98px) {
    .hb-market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .hb-market-grid { gap: .55rem; }
    .hb-mcard { padding: .65rem .75rem .5rem; }
    .hb-mc-val { font-size: 1.05rem; }
    .hb-mc-spark { height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .hb-mcard, .hb-mcard:hover, .hb-mcard:focus-visible { transform: none; transition: none; }
}

/* --- MİNİ KUR GRAFİĞİ POPUP'ı: şeritteki öğeye tıklayınca açılan hafif diyalog --- */
.hb-chart-pop {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1080;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem; background: rgba(10, 12, 18, .58);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.hb-chart-pop[hidden] { display: none; }
.hb-chart-card {
    position: relative; width: min(94vw, 430px);
    background: var(--yl-bg-elev, #fff); color: var(--yl-ink, #1b2130);
    border: 1px solid var(--yl-border, rgba(15,23,42,.12)); border-radius: 18px;
    box-shadow: var(--yl-shadow-lg, 0 24px 64px rgba(10,12,20,.35));
    padding: 1.05rem 1.15rem .95rem; animation: hbChartIn .2s ease;
}
@keyframes hbChartIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.hb-chart-x {
    appearance: none; border: 0; background: var(--yl-bg-soft, rgba(15,23,42,.06)); color: inherit;
    width: 32px; height: 32px; border-radius: 99px; cursor: pointer; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: .8rem;
    transition: background .18s ease, color .18s ease;
}
.hb-chart-x:hover { background: var(--yl-red); color: #fff; }
.hb-chart-x:focus-visible { outline: 2px solid var(--yl-red); outline-offset: 2px; }
.hb-chart-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin: 0 2.4rem .55rem 0; }
.hb-chart-name { font-size: 1.02rem; font-weight: 900; letter-spacing: .02em; }
.hb-chart-val { font-size: 1.32rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--yl-ink, #1b2130); }
.hb-chart-chg { font-size: .84rem; font-weight: 800; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: .15rem; }
.hb-chart-chg.is-up { color: var(--yl-success, #16a34a); }
.hb-chart-chg.is-down { color: var(--yl-danger, #dc2626); }
.hb-chart-chg .hb-chart-range { font-weight: 600; color: var(--yl-ink-soft, #5a6478); }
/* v5.0 DÖNEM KARŞILAŞTIRMASI: ortalama çizgisi (kesikli amber) + rozet.
   Rozet kimliği amberde kalır; yalnız "anlık" sapması yeşil/kırmızıya döner */
.hb-chart-avgline {
    stroke: #f59e0b; stroke-width: 1.4; stroke-dasharray: 5 4; stroke-opacity: .85;
    vector-effect: non-scaling-stroke; pointer-events: none;
}
.hb-chart-avg {
    display: inline-flex; align-items: center; gap: .22rem;
    font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums;
    padding: .14rem .52rem; border-radius: 99px; white-space: nowrap;
    color: #92400e; background: #fef3c7; border: 1px solid #fcd34d;
}
.hb-chart-avg .hb-avg-delta.is-up { color: var(--yl-success, #16a34a); }
.hb-chart-avg .hb-avg-delta.is-down { color: var(--yl-danger, #dc2626); }
[data-mode="dark"] .hb-chart-avgline { stroke: #fbbf24; stroke-opacity: .8; }
[data-mode="dark"] .hb-chart-avg { color: #fcd34d; background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.32); }
[data-mode="dark"] .hb-chart-avg .hb-avg-delta.is-up { color: #4ade80; }
[data-mode="dark"] .hb-chart-avg .hb-avg-delta.is-down { color: #f87171; }
/* Dönem seçimi (7/30/90 gün) + karşılaştırma düğmesi: popup araç satırı */
.hb-chart-tools { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin: 0 0 .55rem; }
.hb-chart-periods { display: flex; align-items: center; gap: .3rem; margin: 0; }
.hb-chart-p {
    appearance: none; border: 1px solid var(--yl-border, rgba(15,23,42,.14)); background: transparent;
    color: var(--yl-ink-soft, #5a6478); font-family: inherit; font-weight: 800; font-size: .72rem;
    letter-spacing: .02em; padding: .28rem .68rem; border-radius: 99px; cursor: pointer;
    transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.hb-chart-p:hover { color: var(--yl-red, #e11d2e); border-color: var(--yl-red, #e11d2e); }
.hb-chart-p:focus-visible { outline: 2px solid var(--yl-red, #e11d2e); outline-offset: 2px; }
.hb-chart-p.is-active {
    background: var(--yl-grad-red, linear-gradient(135deg, #f43f5e, #e11d2e));
    border-color: transparent; color: #fff;
    box-shadow: 0 4px 12px rgba(225, 29, 46, .3);
}
/* KARŞILAŞTIRMA DÜGMESİ (v4.8 çoklu + ayarlanabilir): noktalı çizgi motifi —
   aktifken mavi dolgu; chevron menünün açık olduğunu gösterir */
.hb-chart-cmp-wrap { position: relative; display: inline-flex; }
.hb-chart-cmp {
    appearance: none; border: 1px solid var(--yl-border, rgba(15,23,42,.14)); background: transparent;
    color: var(--yl-ink-soft, #5a6478); font-family: inherit; font-weight: 800; font-size: .72rem;
    letter-spacing: .01em; padding: .28rem .7rem; border-radius: 99px; cursor: pointer;
    display: inline-flex; align-items: center; gap: .3rem;
    transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.hb-chart-cmp i { font-size: .82rem; }
.hb-chart-cmp:hover { color: var(--yl-cmp, #2563eb); border-color: var(--yl-cmp, #2563eb); }
.hb-chart-cmp:focus-visible { outline: 2px solid var(--yl-cmp, #2563eb); outline-offset: 2px; }
.hb-chart-cmp.is-active {
    background: var(--yl-cmp, #2563eb); border-color: transparent; color: #fff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .28);
}
/* Aktif ortak sayısı rozeti (düğme içinde) */
.hb-chart-cmp-count {
    font-size: .64rem; line-height: 1; font-variant-numeric: tabular-nums;
    padding: .18rem .38rem; border-radius: 99px; font-weight: 800;
    background: rgba(255, 255, 255, .24); color: inherit;
}
.hb-chart-cmp:not(.is-active) .hb-chart-cmp-count { background: rgba(37, 99, 235, .12); color: var(--yl-cmp, #2563eb); }
.hb-chart-cmp-chev { font-size: .68rem; transition: transform .16s ease; }
.hb-chart-cmp[aria-expanded="true"] .hb-chart-cmp-chev { transform: rotate(180deg); }
/* v4.8 KARŞILAŞTIRMA MENÜSÜ: çip listesi — düğmenin altında açılan panel */
.hb-chart-cmp-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
    min-width: 250px; max-width: 300px; padding: .6rem .65rem .65rem;
    background: var(--yl-bg-elev, #fff); color: var(--yl-ink, #1b2130);
    border: 1px solid var(--yl-border, rgba(15,23,42,.14)); border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
}
.hb-chart-cmp-hint {
    margin: 0 0 .45rem; font-size: .68rem; font-weight: 700;
    letter-spacing: .02em; color: var(--yl-ink-faint, #8590a6);
}
.hb-chart-cmp-grid { display: flex; flex-wrap: wrap; gap: .35rem; }
.hb-chart-chip {
    appearance: none; border: 1px solid var(--yl-border, rgba(15,23,42,.16)); background: transparent;
    color: var(--yl-ink-soft, #5a6478); font-family: inherit; font-weight: 700; font-size: .72rem;
    padding: .26rem .6rem; border-radius: 99px; cursor: pointer;
    transition: color .14s ease, background .14s ease, border-color .14s ease;
    /* v4.9: çip iki satırlı — üstte ad, altta ANLIK değer + günlük % değişim */
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: .1rem;
    text-align: left; line-height: 1.15;
}
.hb-chart-chip-name { font-weight: 700; }
.hb-chart-chip-live { display: inline-flex; align-items: baseline; gap: .35rem; white-space: nowrap; }
.hb-chart-chip-val { font-weight: 800; font-variant-numeric: tabular-nums; font-size: .74rem; color: var(--yl-ink, #101828); }
.hb-chart-chip-chg { font-weight: 700; font-size: .66rem; font-variant-numeric: tabular-nums; }
.hb-chart-chip-chg.is-up { color: var(--yl-success, #16a34a); }
.hb-chart-chip-chg.is-down { color: var(--yl-danger, #dc2626); }
.hb-chart-chip.is-active .hb-chart-chip-val,
.hb-chart-chip.is-active .hb-chart-chip-chg { color: rgba(255, 255, 255, .92); }
.hb-chart-chip:hover .hb-chart-chip-val { color: inherit; }
.hb-chart-chip:hover { color: var(--yl-cmp, #2563eb); border-color: var(--yl-cmp, #2563eb); }
.hb-chart-chip:focus-visible { outline: 2px solid var(--yl-cmp, #2563eb); outline-offset: 2px; }
.hb-chart-chip.is-active {
    background: var(--yl-cmp, #2563eb); border-color: transparent; color: #fff;
}
.hb-chart-body { height: 132px; }
.hb-chart-svg { width: 100%; height: 100%; display: block; }
.hb-chart-line { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hb-chart-svg.is-up .hb-chart-line { stroke: var(--yl-success, #16a34a); }
.hb-chart-svg.is-down .hb-chart-line { stroke: var(--yl-danger, #dc2626); }
/* KARŞILAŞTIRMALI SERİ (Gram vs Dolar): kesikli mavi çizgi — ana seriden net ayrışır */
.hb-chart-line2 {
    fill: none; stroke: var(--yl-cmp, #2563eb); stroke-width: 1.9;
    stroke-dasharray: 5 4; stroke-linecap: round; stroke-linejoin: round;
    opacity: .92;
}
.hb-chart-dot2 { fill: var(--yl-cmp, #2563eb); stroke: #fff; stroke-width: 1.4; }
/* 2. karşılaştırma serisi (3. seri): kesikli mor — mavi line2'den ayrışır */
.hb-chart-line3 {
    fill: none; stroke: var(--yl-cmp2, #7c3aed); stroke-width: 1.9;
    stroke-dasharray: 2 4; stroke-linecap: round; stroke-linejoin: round;
    opacity: .92;
}
.hb-chart-dot3 { fill: var(--yl-cmp2, #7c3aed); stroke: #fff; stroke-width: 1.4; }
.hb-chart-legend {
    display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
    margin: .4rem 0 0; font-size: .74rem; font-weight: 700; color: var(--yl-ink-soft, #5a6478);
}
.hb-lg-item { display: inline-flex; align-items: center; gap: .32rem; }
.hb-lg-item b { font-variant-numeric: tabular-nums; color: var(--yl-ink, #1b2130); }
.hb-lg-dot {
    width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
    background: var(--yl-success, #16a34a);
}
.hb-chart-svg.is-down ~ .hb-chart-legend .hb-lg-item:not(.is-cmp):not(.is-cmp2) .hb-lg-dot { background: var(--yl-danger, #dc2626); }
.hb-lg-item.is-cmp .hb-lg-dot { background: var(--yl-cmp, #2563eb); border-radius: 99px; }
.hb-lg-item.is-cmp2 .hb-lg-dot { background: var(--yl-cmp2, #7c3aed); border-radius: 99px; }
/* Kuyumcu primi rozeti (çeyrek/yarım popup meta'sı) */
.hb-chart-prem {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .14rem .5rem; border-radius: 99px;
    background: rgba(217, 119, 6, .12); color: #b45309; font-weight: 700;
}
.hb-chart-prem i { font-size: .82rem; }
.hb-chart-area { opacity: .16; }
.hb-chart-svg.is-up .hb-chart-area { fill: var(--yl-success, #16a34a); }
.hb-chart-svg.is-down .hb-chart-area { fill: var(--yl-danger, #dc2626); }
.hb-chart-dot { stroke: #fff; stroke-width: 1.5; }
.hb-chart-svg.is-up .hb-chart-dot { fill: var(--yl-success, #16a34a); }
.hb-chart-svg.is-down .hb-chart-dot { fill: var(--yl-danger, #dc2626); }
.hb-chart-meta {
    display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
    margin: .55rem 0 0; font-size: .72rem; font-weight: 600; color: var(--yl-ink-soft, #5a6478);
}
.hb-chart-load, .hb-chart-err {
    height: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem;
    font-size: .86rem; font-weight: 700; color: var(--yl-ink-soft, #5a6478);
}
.hb-chart-err i { color: var(--yl-danger, #dc2626); }
.hb-chart-spin {
    width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid var(--yl-border, rgba(15,23,42,.15)); border-top-color: var(--yl-red);
    animation: hbChartSpin .8s linear infinite;
}
@keyframes hbChartSpin { to { transform: rotate(360deg); } }
[data-mode="dark"] .hb-chart-card { background: var(--yl-bg-elev); }
[data-mode="dark"] .hb-chart-line2 { stroke: #60a5fa; }
[data-mode="dark"] .hb-chart-line3 { stroke: #a78bfa; }
[data-mode="dark"] .hb-chart-dot3 { fill: #a78bfa; stroke: var(--yl-bg-elev, #10141f); }
[data-mode="dark"] .hb-chart-cmp-menu { background: var(--yl-bg-elev); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
[data-mode="dark"] .hb-chart-cmp-count { background: rgba(255, 255, 255, .18); }
[data-mode="dark"] .hb-chart-cmp:not(.is-active) .hb-chart-cmp-count { background: rgba(96, 165, 250, .18); color: #93c5fd; }
[data-mode="dark"] .hb-chart-chip { border-color: var(--yl-border); }
[data-mode="dark"] .hb-chart-chip:hover { color: #93c5fd; border-color: #60a5fa; }
[data-mode="dark"] .hb-chart-chip.is-active { background: #3b82f6; color: #fff; }
[data-mode="dark"] .hb-chart-dot2 { fill: #60a5fa; stroke: var(--yl-bg-elev, #10141f); }
[data-mode="dark"] .hb-chart-cmp { color: var(--yl-ink-soft); border-color: var(--yl-border); }
[data-mode="dark"] .hb-chart-cmp:hover { color: #93c5fd; border-color: #60a5fa; }
[data-mode="dark"] .hb-chart-cmp.is-active { background: #3b82f6; color: #fff; }
[data-mode="dark"] .hb-lg-item b { color: var(--yl-ink); }
[data-mode="dark"] .hb-chart-prem { background: rgba(251, 191, 36, .14); color: #fbbf24; }
/* v4.9: çip anlık değer + kuyumcu makası geçmişi paneli (koyu mod dahil) */
[data-mode="dark"] .hb-chart-chip-val { color: var(--yl-ink); }
[data-mode="dark"] .hb-chart-chip.is-active .hb-chart-chip-val,
[data-mode="dark"] .hb-chart-chip.is-active .hb-chart-chip-chg { color: rgba(255, 255, 255, .92); }
[data-mode="dark"] .hb-chart-chip-chg.is-up { color: #4ade80; }
[data-mode="dark"] .hb-chart-chip-chg.is-down { color: #f87171; }
.hb-makas-sec {
    margin-top: .7rem; padding-top: .45rem;
    border-top: 1px dashed var(--yl-border, rgba(15, 23, 42, .18));
}
.hb-makas-head {
    display: flex; align-items: center; gap: .45rem; width: 100%;
    appearance: none; background: none; border: 0; padding: .3rem .5rem;
    border-radius: 10px; cursor: pointer; color: inherit; font: inherit;
    transition: background .14s ease;
}
.hb-makas-head:hover { background: rgba(217, 119, 6, .09); }
.hb-makas-head:focus-visible { outline: 2px solid #d97706; outline-offset: 2px; }
.hb-makas-head .bi-percent { color: #d97706; font-size: .95rem; }
.hb-makas-title { font-weight: 800; font-size: .78rem; letter-spacing: .01em; }
.hb-makas-val { margin-left: auto; color: #b45309; font-weight: 800; font-size: .8rem; font-variant-numeric: tabular-nums; }
.hb-makas-chev { transition: transform .18s ease; font-size: .8rem; color: var(--yl-ink-faint, #8590a6); }
.hb-makas-head[aria-expanded="false"] .hb-makas-chev { transform: rotate(-90deg); }
.hb-makas-body { padding: .1rem .5rem .4rem; }
.hb-makas-chart { min-height: 70px; }
.hb-makas-svg { width: 100%; height: 70px; display: block; }
.hb-makas-area { fill: rgba(217, 119, 6, .14); }
.hb-makas-line {
    fill: none; stroke: #d97706; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
}
.hb-makas-dot { fill: #d97706; stroke: #fff; stroke-width: 1.2; }
/* v5.0: makas panelinde dönem ortalama çizgisi (koyu amber) */
.hb-makas-avgline {
    stroke: #92400e; stroke-width: 1.2; stroke-dasharray: 4 3; stroke-opacity: .65;
    vector-effect: non-scaling-stroke; pointer-events: none;
}
[data-mode="dark"] .hb-makas-avgline { stroke: #fbbf24; stroke-opacity: .6; }
.hb-makas-meta {
    display: flex; flex-wrap: wrap; gap: .2rem .8rem;
    margin: .4rem 0 0; font-size: .68rem; font-weight: 600; color: var(--yl-ink-soft, #5a6478);
}
[data-mode="dark"] .hb-makas-head:hover { background: rgba(245, 158, 11, .12); }
[data-mode="dark"] .hb-makas-head .bi-percent { color: #fbbf24; }
[data-mode="dark"] .hb-makas-val { color: #fbbf24; }
[data-mode="dark"] .hb-makas-area { fill: rgba(245, 158, 11, .16); }
[data-mode="dark"] .hb-makas-line { stroke: #f59e0b; }
[data-mode="dark"] .hb-makas-dot { fill: #fbbf24; stroke: var(--yl-bg-elev, #10141f); }
@media (max-width: 575px) {
    .hb-chart-tools { justify-content: center; }
    .hb-chart-legend { gap: .6rem; font-size: .7rem; }
    /* Menü dar ekranda kart genişliğine otursun (taşma yok) */
    .hb-chart-cmp-menu { left: 0; right: auto; min-width: 0; max-width: none; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .hb-chart-card { animation: none; }
    .hb-chart-spin { animation-duration: 1.6s; }
    .hb-chart-cmp { transition: none; }
    .hb-chart-chip, .hb-chart-cmp-chev { transition: none; }
    .hb-makas-chev { transition: none; }
}

/* --- ALT MANŞET SEKMELERİ: vitrin kategori filtresi (Gündem/Spor/Ekonomi/Teknoloji) --- */
.hb-sub-tabs {
    display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 .85rem;
}
.hb-sub-tab {
    appearance: none; border: 1px solid var(--yl-border); background: var(--yl-bg-elev);
    color: var(--yl-ink-soft); font-family: inherit; font-weight: 800; font-size: .8rem;
    letter-spacing: .01em; padding: .42rem 1.05rem; border-radius: 99px; cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hb-sub-tab:hover { color: var(--yl-red); border-color: var(--yl-red); transform: translateY(-1px); }
.hb-sub-tab:focus-visible { outline: 2px solid var(--yl-red); outline-offset: 2px; }
.hb-sub-tab.is-active {
    background: var(--yl-grad-red); border-color: transparent; color: #fff;
    box-shadow: 0 6px 16px rgba(225, 29, 46, .32);
}
.hb-sub-panel.is-anim { animation: hbSubIn .32s cubic-bezier(.22,.61,.36,1); }
@keyframes hbSubIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hb-sub-panel.is-anim { animation: none; } }
@media (max-width: 575.98px) { .hb-sub-tab { font-size: .74rem; padding: .34rem .8rem; } }

/* --- ALT MANŞET: haberler.com tarzı 4'lü resimli vitrin kartları (slider'ın hemen altında) --- */
.hb-sub .news-card { height: 100%; }
.hb-sub .news-card-img { position: relative; }
.hb-sub .news-card-body { padding: .62rem .85rem .7rem; }
.hb-sub .news-card-title { font-size: .99rem; line-height: 1.34; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.hb-sub .news-card-meta { gap: .65rem; font-size: .72rem; }
.hb-sub .badge { font-size: .62rem; }
.hb-sub .news-card:hover .news-card-img img { transform: scale(1.045); }
.hb-sub .news-card-img img { transition: transform .45s cubic-bezier(.2,.7,.3,1); }
@media (max-width: 575.98px) {
    .hb-sub .news-card-title { font-size: .92rem; }
    .hb-sub .news-card-body { padding: .52rem .68rem .6rem; }
}

/* rozetler */
.badge-breaking {
    background: var(--yl-red) !important; color: #fff;
    text-transform: uppercase;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--yl-red) 35%, transparent);
}
.category-chip {
    background: color-mix(in srgb, var(--chip, #0d6efd) 11%, var(--yl-bg-elev)) !important;
    color: color-mix(in srgb, var(--chip, #0d6efd) 72%, var(--yl-ink)) !important;
    border: 1px solid color-mix(in srgb, var(--chip, #0d6efd) 28%, transparent) !important;
    font-weight: 700;
}
[data-mode="dark"] .category-chip, [data-theme="dark"] .category-chip {
    background: color-mix(in srgb, var(--chip, #0d6efd) 22%, var(--yl-bg-elev)) !important;
    color: color-mix(in srgb, var(--chip, #0d6efd) 55%, #fff) !important;
}
.badge-verify { font-size: .675rem; letter-spacing: .015em; }
.badge-verify.text-bg-success { --bs-bg-opacity: 1; }
.time-badge {
    background: var(--yl-brand-soft) !important; color: var(--yl-brand) !important;
    font-variant-numeric: tabular-nums; font-weight: 700; flex-shrink: 0;
    font-size: .72rem;
    padding: .34rem .55rem;
}
[data-mode="dark"] .time-badge, [data-theme="dark"] .time-badge { color: var(--yl-brand-strong) !important; }

/* ---------- 12. KAPAK SANATI (görselsiz haber) — mesh gradyan ---------- */
.cover-art {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
    width: 100%; height: 100%;
    overflow: hidden;
    background:
        radial-gradient(78% 60% at 14% 8%, hsl(var(--art-h) 92% 62% / .92), transparent 62%),
        radial-gradient(88% 78% at 86% 92%, hsl(calc(var(--art-h) + 44) 74% 40% / .96), transparent 66%),
        radial-gradient(56% 50% at 62% 44%, hsl(calc(var(--art-h) + 18) 82% 47% / .5), transparent 76%),
        linear-gradient(150deg, hsl(var(--art-h) 64% 31%), hsl(calc(var(--art-h) + 26) 68% 16%));
    color: #fff;
}
/* yumuşak doku katmanı */
.cover-art::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px);
    background-size: 22px 22px;
    opacity: .35;
    mask-image: radial-gradient(120% 100% at 30% 20%, #000, transparent 75%);
}
.cover-art-icon {
    font-size: 2.5rem; opacity: .95;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.news-card:hover .cover-art-icon { transform: translateY(-4px) scale(1.06); }
.cover-art-cat {
    font-family: var(--yl-font);
    font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    opacity: .9;
    padding: .22rem .6rem;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.cover-art-short .cover-art-icon { font-size: 2.8rem; }

/* ---------- 13. SON DAKİKA LİSTESİ ---------- */
.breaking-list {
    --bs-list-group-bg: var(--yl-bg-elev);
    --bs-list-group-border-color: var(--yl-border);
    border-radius: var(--yl-radius) !important;
    overflow: hidden;
    box-shadow: var(--yl-shadow-sm);
}
.breaking-list .list-group-item { transition: background var(--yl-trans); border-color: var(--yl-border); }
.breaking-list .list-group-item:hover { background: var(--yl-bg-soft); }
.breaking-list strong { font-family: var(--yl-font-serif); font-size: 1.04rem; font-weight: 600; }

/* ---------- 14. TREND LİSTESİ ---------- */
.trend-item {
    padding: .7rem .55rem;
    border-radius: var(--yl-radius-sm);
    transition: background var(--yl-trans);
    border-bottom: 1px dashed color-mix(in srgb, var(--yl-border-strong) 66%, transparent);
}
[class*="row-cols"] > [class*="col"]:nth-last-child(1) .trend-item,
.row-cols-md-2 > [class*="col"]:nth-last-child(-n+2) .trend-item { border-bottom-color: transparent; }
.trend-item:hover { background: var(--yl-bg-elev); box-shadow: var(--yl-shadow-sm); }
.trend-rank {
    font-family: var(--yl-font-serif);
    font-size: 1.8rem; font-weight: 600; line-height: 1;
    color: var(--yl-ink-faint);
    min-width: 2rem;
    font-style: italic;
    transition: color var(--yl-trans);
    font-variant-numeric: tabular-nums;
}
.trend-item:nth-child(-n+3) .trend-rank { color: var(--yl-red); }
.trend-item:hover .trend-rank { color: var(--yl-red); }
.trend-item strong { font-family: var(--yl-font-serif); font-size: 1.04rem; color: var(--yl-ink); font-weight: 600; }

/* ---------- 15. ŞEHRİMDE NE OLUYOR (pulse) ---------- */
.city-pulse { border: 1px solid var(--yl-border); border-radius: var(--yl-radius); background: var(--yl-bg-elev); box-shadow: var(--yl-shadow-sm); }
.pulse-cell {
    background: var(--yl-bg-soft);
    border-radius: var(--yl-radius-sm);
    padding: .9rem .4rem .8rem;
    height: 100%;
    transition: transform var(--yl-trans), background var(--yl-trans), box-shadow var(--yl-trans);
    border: 1px solid transparent;
}
.pulse-cell:hover { transform: translateY(-3px); background: var(--yl-bg-elev); box-shadow: var(--yl-shadow); border-color: var(--yl-border); }
.pulse-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 11px;
    font-size: 1.02rem;
    margin-bottom: .3rem;
}
.pulse-ic.ic-red { background: var(--yl-red-soft); color: var(--yl-red); }
.pulse-ic.ic-amber { background: color-mix(in srgb, #e8a13c 16%, transparent); color: #b3721a; }
[data-mode="dark"] .pulse-ic.ic-amber, [data-theme="dark"] .pulse-ic.ic-amber { color: var(--yl-live); }
.pulse-ic.ic-blue { background: var(--yl-brand-soft); color: var(--yl-brand); }
.pulse-ic.ic-green { background: rgba(25, 135, 84, .14); color: #17864f; }
.pulse-num { font-family: var(--yl-font-serif); font-size: 1.6rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pulse-label { font-size: .71rem; color: var(--yl-ink-soft); letter-spacing: .03em; }

/* ---------- 16. OLAY DOSYASI & ETKİNLİK KARTLARI ---------- */
.incident-card {
    background: var(--yl-bg-elev);
    border: 1px solid var(--yl-border);
    border-radius: var(--yl-radius);
    transition: transform var(--yl-trans), box-shadow var(--yl-trans), border-color var(--yl-trans);
    position: relative;
    overflow: hidden;
    box-shadow: var(--yl-shadow-sm);
}
.incident-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--yl-live), color-mix(in srgb, var(--yl-live) 40%, transparent));
}
.incident-card:hover { transform: translateY(-3px); box-shadow: var(--yl-shadow); border-color: var(--yl-border-strong); }
.incident-card strong { font-family: var(--yl-font-serif); font-size: 1.06rem; font-weight: 600; }
.status-chip {
    border-radius: 999px;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .3rem .62rem;
}

/* ---------- 17. CANLI YAYIN ---------- */
.live-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--yl-red);
    display: inline-block; flex-shrink: 0;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--yl-red) 55%, transparent);
    animation: live-pulse 1.6s infinite;
}
@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--yl-red) 55%, transparent); }
    70% { box-shadow: 0 0 0 9px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.live-pill {
    background: var(--yl-red); color: #fff;
    font-size: .65rem; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase;
    padding: .2rem .55rem; border-radius: 5px;
    display: inline-flex; align-items: center; gap: .3rem;
}
.live-card {
    background: var(--yl-bg-elev);
    border: 1px solid var(--yl-border);
    border-radius: var(--yl-radius);
    transition: transform var(--yl-trans), box-shadow var(--yl-trans), border-color var(--yl-trans);
    height: 100%;
    box-shadow: var(--yl-shadow-sm);
}
.live-card:hover { transform: translateY(-3px); box-shadow: var(--yl-shadow); border-color: color-mix(in srgb, var(--yl-red) 38%, var(--yl-border)); }
.live-card strong { font-family: var(--yl-font-serif); font-size: 1.07rem; font-weight: 600; }

/* ---------- 18. SHORTS ---------- */
.shorts-rail { scroll-snap-type: x mandatory; }
.shorts-thumb { scroll-snap-align: start; transition: transform var(--yl-trans); }
.shorts-thumb:hover { transform: translateY(-3px); }
.shorts-thumb .ratio {
    border-radius: var(--yl-radius-sm); overflow: hidden;
    background: linear-gradient(160deg, hsl(var(--art-h, 260) 55% 30%), hsl(calc(var(--art-h, 260) + 40) 60% 16%));
    box-shadow: var(--yl-shadow-sm);
}
.shorts-thumb img { transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
.shorts-thumb:hover img { transform: scale(1.07); }
.shorts-single { max-width: 460px; margin-inline: auto; }
.shorts-video { border-radius: var(--yl-radius); background: #000; }
.shorts-overlay {
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.74) 100%);
    border-radius: 0 0 var(--yl-radius) var(--yl-radius);
}
.shorts-info, .shorts-actions { color: #fff; }

/* ---------- 19. WIDGET'LAR ---------- */
.widget-card { border-radius: var(--yl-radius); border: 1px solid var(--yl-border); background: var(--yl-bg-elev); box-shadow: var(--yl-shadow-sm); }
.widget-title {
    font-family: var(--yl-font);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--yl-ink);
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 .45rem;
}
.widget-title .bi { color: var(--yl-red); font-size: .95rem; }
.journalist-row { padding: .6rem 0; transition: padding-left var(--yl-trans); }
.journalist-row:hover { padding-left: .25rem; }
.journalist-row:last-child { border-bottom: 0 !important; }
.journalist-row a { color: var(--yl-ink) !important; }
.journalist-row a strong { font-weight: 700; }
.journalist-row a .text-secondary { color: var(--yl-ink-soft) !important; }
.points-badge { border-radius: 999px; font-size: .69rem; font-weight: 800; padding: .28rem .6rem; }
.trust-box {
    border: 1px dashed color-mix(in srgb, var(--yl-gold) 55%, var(--yl-border)) !important;
    background: color-mix(in srgb, var(--yl-gold) 7%, var(--yl-bg-elev)) !important;
    border-radius: var(--yl-radius);
}
.trust-box .widget-title .bi { color: var(--yl-gold); }

/* Harita teaser (svg] stil) */
.map-teaser {
    position: relative; overflow: hidden;
    border-radius: var(--yl-radius-sm);
    background:
        radial-gradient(140% 120% at 20% 0%, rgba(90, 130, 200, .30), transparent 60%),
        radial-gradient(120% 120% at 85% 100%, rgba(225, 60, 70, .18), transparent 55%),
        #101b30;
    min-height: 210px;
}
.map-teaser svg { width: 100%; height: auto; display: block; }
.map-pin {
    position: absolute; width: 10px; height: 10px; border-radius: 50%;
    background: var(--yl-red); border: 2px solid rgba(255,255,255,.9);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--yl-red) 60%, transparent);
    animation: live-pulse 2.2s infinite;
}
.map-pin.pin-b { background: var(--yl-live); animation-delay: .5s; }
.map-pin.pin-c { background: #43cea2; animation-delay: 1s; }

/* ---------- 20. MAKALE SAYFASI ---------- */
.news-title { font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.6rem); line-height: 1.16; font-weight: 700; letter-spacing: -.02em; }
.news-spot { font-size: 1.13rem; line-height: 1.58; color: var(--yl-ink-soft); font-family: var(--yl-font-serif); }
.news-meta { border-color: var(--yl-border) !important; }
.article-figure img { border-radius: var(--yl-radius) !important; }
.article-figure figcaption, .article-figure .figure-caption { font-size: .78rem; color: var(--yl-ink-faint); margin-top: .5rem; }
.news-content { font-size: 1.06rem; line-height: 1.8; color: var(--yl-ink); }
.news-content p { margin-bottom: 1.15rem; }
.news-content h2, .news-content h3 { margin: 1.8rem 0 .85rem; font-size: 1.4rem; }
.news-content img { border-radius: var(--yl-radius-sm); }
.news-content blockquote {
    border-left: 4px solid var(--yl-red);
    margin: 1.5rem 0; padding: .9rem 1.25rem;
    background: var(--yl-bg-elev);
    font-family: var(--yl-font-serif);
    font-size: 1.14rem;
    border-radius: 0 var(--yl-radius-sm) var(--yl-radius-sm) 0;
    box-shadow: var(--yl-shadow-sm);
}
.news-content a { text-decoration: underline; text-underline-offset: 3px; }
.news-content ul, .news-content ol { padding-left: 1.4rem; margin-bottom: 1.15rem; }
.news-content li { margin-bottom: .35rem; }
.ai-summary { border-left: 4px solid var(--yl-brand) !important; border-radius: 0 var(--yl-radius-sm) var(--yl-radius-sm) 0 !important; }
.source-box { background: var(--yl-bg-soft) !important; border-color: var(--yl-border) !important; border-radius: var(--yl-radius-sm) !important; }
.gallery a { border-radius: var(--yl-radius-sm); overflow: hidden; display: block; transition: opacity var(--yl-trans); }
.gallery a:hover { opacity: .88; }
.share-bar { border-color: var(--yl-border) !important; }
.incident-link { border-radius: var(--yl-radius-sm) !important; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--yl-ink-faint); }
.breadcrumb a { color: var(--yl-ink-soft); }
.breadcrumb a:hover { color: var(--yl-red); }
.timeline { position: relative; padding-left: 1.4rem; }
.timeline::before {
    content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
    width: 2px; background: linear-gradient(180deg, var(--yl-red), var(--yl-border));
    border-radius: 2px;
}
.timeline-item { position: relative; padding-bottom: 1.15rem; }
.timeline-item::before {
    content: ""; position: absolute; left: -1.4rem; top: .4rem;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--yl-bg-elev);
    border: 3px solid var(--yl-red);
}
.timeline-time { font-size: .74rem; color: var(--yl-ink-faint); font-variant-numeric: tabular-nums; }
.timeline-item strong { font-family: var(--yl-font-serif); }
.event-meta { font-size: .82rem; color: var(--yl-ink-soft); }

/* ---------- 21. YORUMLAR ---------- */
.comment-avatar {
    width: 38px; height: 38px;
    background: var(--yl-brand-soft); color: var(--yl-brand);
    font-weight: 800;
}
.comment-bubble { border-radius: 4px 16px 16px 16px !important; }
.comment-form textarea { border-radius: var(--yl-radius-sm) !important; }
.comment-list .comment + .comment { margin-top: 0; }
.js-like-comment.liked { color: var(--yl-red) !important; }
.js-like-comment.liked .bi::before { content: "\f415"; }

/* ---------- 22. FOOTER — koyu masthead ---------- */
.site-footer {
    background: var(--yl-brand-strong);
    color: #a7b0c0;
    margin-top: 3.5rem;
    padding: 3rem 0 0;
    position: relative;
}
.site-footer::before {
    content: ""; display: block; position: absolute; top: 0; left: 0; right: 0;
    height: var(--yl-rule);
    background: linear-gradient(90deg, var(--yl-red), color-mix(in srgb, var(--yl-red) 30%, transparent));
}
[data-mode="dark"] .site-footer, [data-theme="dark"] .site-footer { background: #0a0d13; }
.site-footer .brand-mark { color: #fff !important; font-size: 1.8rem; }
.site-footer .brand-mark .dot { color: var(--yl-red); }
.site-footer .brand-mark .tld { color: #6d7889; }
.site-footer h6 {
    color: #fff; font-family: var(--yl-font);
    font-size: .72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .14em;
    margin-bottom: .95rem;
}
.footer-links a {
    color: #a7b0c0; text-decoration: none;
    display: inline-block; padding: .2rem 0;
    transition: color var(--yl-trans), transform var(--yl-trans);
}
.footer-links a:hover { color: #fff; transform: translateX(4px); }
.social-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 11px;
    border: 1px solid rgba(255,255,255,.16);
    color: #ccd3de; font-size: .98rem;
    transition: background var(--yl-trans), border-color var(--yl-trans), color var(--yl-trans), transform var(--yl-trans);
}
.social-circle:hover { background: var(--yl-red); border-color: var(--yl-red); color: #fff; transform: translateY(-3px); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.09);
    margin-top: 2.2rem; padding: 1.15rem 0;
    font-size: .77rem; color: #7e8798;
}

/* ---------- 23. ÇEREZ BANNERİ — yüzen kart, mobilde alt nav üstünde ---------- */
.cookie-banner {
    background: var(--yl-glass) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    border-top: 1px solid var(--yl-border);
    box-shadow: var(--yl-shadow-lg);
    padding-block: .85rem;
    z-index: 1060;
    /* mobil alt navigasyonun ÜSTÜNDE durur (66px + safe-area) */
    bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (min-width: 768px) {
    .cookie-banner { bottom: 0 !important; }
}

/* ---------- 24. MOBİL ALT NAVİGASYON ---------- */
.mobile-bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040;
    background: var(--yl-glass);
    -webkit-backdrop-filter: saturate(1.5) blur(18px);
    backdrop-filter: saturate(1.5) blur(18px);
    border-top: 1px solid var(--yl-border);
    padding: .32rem .2rem calc(.32rem + env(safe-area-inset-bottom, 0px));
}
.mnav-item {
    display: flex; flex-direction: column; align-items: center; gap: .15rem;
    font-size: .61rem; font-weight: 700; letter-spacing: .03em;
    color: var(--yl-ink-faint) !important;
    padding: .25rem 0;
    text-transform: uppercase;
    border-radius: 10px;
    transition: color var(--yl-trans);
}
.mnav-item .bi { font-size: 1.24rem; transition: transform var(--yl-trans); }
.mnav-item:active .bi { transform: scale(.88); }
.mnav-item.active, .mnav-item:hover { color: var(--yl-ink) !important; }
.mnav-item.is-hot { color: var(--yl-red) !important; }
.mnav-item .submit-fab {
    width: 42px; height: 42px; margin-top: -1.15rem;
    background: var(--yl-grad-red);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--yl-red) 45%, transparent);
    font-size: 1.15rem;
    border: 3px solid var(--yl-bg);
    transition: transform var(--yl-trans), box-shadow var(--yl-trans);
}
.mnav-item:active .submit-fab { transform: scale(.9); }
.mnav-profile {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--yl-brand); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 800;
}

/* ---------- 25. AUTH (giriş/kayıt) ---------- */
.auth-body {
    min-height: 100vh;
    background:
        radial-gradient(900px 460px at 88% -10%, color-mix(in srgb, var(--yl-red) 9%, transparent), transparent 60%),
        radial-gradient(700px 420px at -8% 110%, color-mix(in srgb, var(--yl-brand) 12%, transparent), transparent 58%),
        var(--yl-bg);
    padding: 1.2rem;
}
.auth-card {
    width: 100%; max-width: 430px;
    background: var(--yl-bg-elev);
    border: 1px solid var(--yl-border);
    border-radius: var(--yl-radius);
    box-shadow: var(--yl-shadow);
    padding: 2.1rem 1.8rem;
    position: relative;
    overflow: hidden;
}
.auth-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0;
    height: var(--yl-rule);
    background: var(--yl-grad-red);
}
.auth-logo .brand-mark { font-size: 1.9rem; }
.auth-body {
    --bs-body-bg: var(--yl-bg);
    --bs-body-color: var(--yl-ink);
    --bs-secondary-color: var(--yl-ink-soft);
    --bs-border-color: var(--yl-border);
    --bs-link-color: var(--yl-brand);
    --bs-heading-color: var(--yl-ink);
}
[data-theme="dark"] .auth-body { color-scheme: dark; }

/* ---------- 26. ÇEŞİTLİ ---------- */
.progress { border-radius: 999px; background: var(--yl-bg-soft); }
.progress-bar { background: var(--yl-brand); }
.submit-fab-lg { width: 52px; height: 52px; }
.user-select-all { user-select: all; }
.tracking-wider { letter-spacing: .06em; }
.chat-box { max-height: 420px; overflow-y: auto; }
.alert-light { border-color: var(--yl-border) !important; }
.modal-header { border-bottom-color: var(--yl-border); }
.modal-footer { border-top-color: var(--yl-border); }
.offcanvas { background: var(--yl-bg-elev); border-color: var(--yl-border); }
.offcanvas-header { border-bottom-color: var(--yl-border); }
[data-mode="dark"] .btn-close, [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.table > :not(caption) > * > * { border-color: var(--yl-border); }
.nav-tabs { border-color: var(--yl-border); }
.nav-tabs .nav-link { color: var(--yl-ink-soft); border: 0; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link:hover { border-bottom-color: var(--yl-border-strong); }
.nav-tabs .nav-link.active { color: var(--yl-ink); background: transparent; border-bottom-color: var(--yl-red); font-weight: 700; }
.list-group-flush { border-radius: var(--yl-radius-sm); overflow: hidden; }
.lead { font-family: var(--yl-font-serif); color: var(--yl-ink-soft); }
.profile-avatar { width: 84px; height: 84px; font-size: 1.9rem; }

/* sayfalama (Paginator) */
.site-body .pagination, .auth-body .pagination { --bs-pagination-color: var(--yl-ink-soft); --bs-pagination-border-color: var(--yl-border); --bs-pagination-hover-color: var(--yl-ink); --bs-pagination-hover-bg: var(--yl-bg-soft); --bs-pagination-hover-border-color: var(--yl-border-strong); --bs-pagination-active-bg: var(--yl-brand); --bs-pagination-active-border-color: var(--yl-brand); --bs-pagination-focus-color: var(--yl-brand); --bs-pagination-focus-box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--yl-brand) 15%, transparent); margin-bottom: 0; }

/* ---------- 27. REKLAM ALANLARI ---------- */
.ad-slot {
    background: transparent;
    border: 1px dashed var(--yl-border-strong);
    border-radius: var(--yl-radius-sm);
    padding: .35rem;
    color: var(--yl-ink-faint);
    font-size: .74rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.ad-slot .ad-box {
    background: repeating-linear-gradient(-45deg, var(--yl-bg-soft), var(--yl-bg-soft) 12px, color-mix(in srgb, var(--yl-bg-soft) 60%, var(--yl-bg-elev)) 12px, color-mix(in srgb, var(--yl-bg-soft) 60%, var(--yl-bg-elev)) 24px);
    border-radius: calc(var(--yl-radius-sm) - 4px);
    color: var(--yl-ink-faint);
    font-weight: 600;
}
.ad-slot:empty { display: none; }

/* ---------- 28. YUKARI ÇIK DÜĞMESİ (app.js üretir) ---------- */
.back-to-top {
    position: fixed; right: 18px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 1050;
    width: 44px; height: 44px; border-radius: 13px;
    border: 1px solid var(--yl-border);
    background: var(--yl-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--yl-ink);
    font-size: 1.05rem;
    box-shadow: var(--yl-shadow);
    opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
    transition: opacity var(--yl-trans), transform var(--yl-trans), visibility var(--yl-trans), background var(--yl-trans), color var(--yl-trans), border-color var(--yl-trans);
    display: inline-flex; align-items: center; justify-content: center;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.back-to-top:hover { background: var(--yl-red); border-color: var(--yl-red); color: #fff; transform: translateY(-2px); }
@media (min-width: 768px) { .back-to-top { bottom: 26px; right: 26px; } }

/* ---------- 29. TOAST ---------- */
.toast-container { z-index: 3000; }
.site-body .toast { border-radius: var(--yl-radius-sm); font-size: .86rem; }

/* ---------- 30. GİRİŞ ANİMASYONLARI ---------- */
@keyframes rise-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
.hero .news-card-lg { animation: rise-in .5s cubic-bezier(.22, .61, .36, 1) both; }
.hero .col-md-5 .news-card:nth-child(1) { animation: rise-in .5s .06s cubic-bezier(.22, .61, .36, 1) both; }
.hero .col-md-5 .news-card:nth-child(2) { animation: rise-in .5s .12s cubic-bezier(.22, .61, .36, 1) both; }
.hero .col-md-5 .news-card:nth-child(3) { animation: rise-in .5s .18s cubic-bezier(.22, .61, .36, 1) both; }

/* ---------- 31. YAZDIRMA (makale) ---------- */
@media print {
    .site-header, .site-footer, .breaking-ticker, .mobile-bottom-nav,
    .cat-strip, .topbar, .share-bar, .cookie-banner, .comment-form, aside, .back-to-top { display: none !important; }
    body { background: #fff; color: #000; }
    .news-content { font-size: 11.5pt; }
}

/* ---------- 32. HAREKET AZALTMA ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .ticker-items { animation: none; }
}

/* ---------- 33. KÜÇÜK EKRAN AYARLARI ---------- */
@media (max-width: 767.98px) {
    .news-card-lg { min-height: 320px; }
    .news-card-lg .news-card-title { font-size: 1.3rem; }
    .news-card-lg .news-card-body { padding: 1rem 1.1rem; }
    .news-title { font-size: 1.65rem; }
    .breaking-ticker { height: 36px; }
    .ticker-label { padding-inline: .75rem; font-size: .66rem; }
    .ticker-label::after { border-block-width: 18px; border-left-width: 11px; }
    .site-footer { padding-top: 2.2rem; }
    .main-container-pad { padding-inline: .8rem; }
    .brand-mark { font-size: 1.5rem; }
    .section-head::after { display: none; }
}

/* ---------- 34. EK YARDIMCILAR ---------- */
.header-cta-outline {
    border: 1.5px solid var(--yl-border-strong);
    color: var(--yl-ink) !important;
    background: transparent;
    transition: border-color var(--yl-trans), background var(--yl-trans), color var(--yl-trans);
}
.header-cta-outline:hover { border-color: var(--yl-brand); background: var(--yl-brand); color: #fff !important; }
.footer-desc { color: #8f98a6; max-width: 320px; line-height: 1.7; }

/* Hero overlay kartında kategori filigranı gizli (rozet zaten kategoriyi gösterir) */
.news-card-lg .cover-art-cat { display: none; }

/* ============================================================
   AURORA v3.1 — "IŞIK" CİLA KATMANI
   Vitrinler, bölüm başlıkları, kartlar, footer, her yer.
   Var olan sınıf kancaları kullanılır; markup değişikliği YOK.
   ============================================================ */

/* ---------- 35. YÜZEYLER: KARTLARA DERİNLİK ---------- */
:root {
    --yl-grad-card: linear-gradient(180deg, rgba(20, 36, 63, .035), transparent 42%);
    --yl-ring: 0 0 0 1px color-mix(in srgb, var(--yl-brand) 22%, transparent);
}
[data-mode="dark"], [data-theme="dark"] {
    --yl-grad-card: linear-gradient(180deg, rgba(169, 190, 230, .05), transparent 42%);
    --yl-ring: 0 0 0 1px color-mix(in srgb, var(--yl-brand) 30%, transparent);
}
.widget-card, .city-pulse, .trust-box {
    position: relative;
    overflow: hidden;
    border-radius: var(--yl-r-lg);
}
.widget-card::before, .city-pulse::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 88px;
    background: var(--yl-grad-card);
    pointer-events: none;
}
.widget-card { transition: box-shadow var(--yl-trans), transform var(--yl-trans), border-color var(--yl-trans); }
.widget-card:hover {
    transform: translateY(-2px);
    border-color: var(--yl-border-strong);
    box-shadow: var(--yl-shadow);
}
.city-pulse { border: 1px solid var(--yl-border); box-shadow: var(--yl-shadow-sm); }

/* ---------- 36. BÖLÜM BAŞLIKLARI — EDİTORYAL VİTRİN ---------- */
.section-head {
    margin-bottom: 1rem;
    position: relative;
}
.section-title {
    font-family: var(--yl-font-serif);
    font-weight: 700;
    font-size: 1.28rem;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    gap: .65rem;
}
.section-title::before {
    width: 5px;
    height: 1.15em;
    border-radius: 99px;
    background: var(--yl-grad-brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--yl-brand) 12%, transparent);
    flex-shrink: 0;
}
.section-title.is-red::before {
    background: var(--yl-grad-red);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--yl-red) 14%, transparent);
}
.section-head::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -.45rem;
    height: 1px;
    background: linear-gradient(90deg, var(--yl-border-strong), var(--yl-border) 55%, transparent);
}
.see-all {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--yl-ink-soft);
    border: 1px solid var(--yl-border);
    border-radius: 999px;
    padding: .32rem .8rem;
    background: var(--yl-bg-elev);
    transition: color var(--yl-trans), border-color var(--yl-trans), background var(--yl-trans), gap var(--yl-trans), transform var(--yl-trans);
}
.see-all:hover {
    color: #fff;
    background: var(--yl-brand);
    border-color: var(--yl-brand);
    transform: translateX(2px);
}
.see-all .bi { transition: transform var(--yl-trans); }
.see-all:hover .bi { transform: translateX(2px); }

/* ---------- 37. SON DAKİKA VİTRİNİ — MODERN HABER SATIRLARI ---------- */
.breaking-list {
    border-radius: var(--yl-r-lg);
    overflow: hidden;
    border: 1px solid var(--yl-border);
    background: var(--yl-bg-elev);
    box-shadow: var(--yl-shadow-sm);
}
.breaking-list .list-group-item {
    position: relative;
    padding: .9rem 1.1rem;
    transition: background var(--yl-trans), padding-left var(--yl-trans);
}
.breaking-list .list-group-item::after {
    content: "\F138"; /* bi-chevron-right */
    font-family: "bootstrap-icons";
    position: absolute;
    right: 1rem;
    top: 50%;
    translate: 0 -50%;
    opacity: 0;
    color: var(--yl-red);
    transition: opacity var(--yl-trans), right var(--yl-trans);
}
.breaking-list .list-group-item:hover {
    background: var(--yl-bg-soft);
    padding-left: 1.3rem;
}
.breaking-list .list-group-item:hover::after { opacity: 1; right: .8rem; }
.breaking-list .list-group-item + .list-group-item { border-top: 1px solid var(--yl-border); }
.time-badge {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: .74rem;
    letter-spacing: .03em;
    color: #fff;
    background: var(--yl-grad-brand);
    border-radius: 8px;
    padding: .34rem .5rem;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--yl-brand) 30%, transparent);
}

/* ---------- 38. TREND VİTRİNİ — NUMARALI SIRALAMA ---------- */
.trend-item {
    display: flex;
    padding: .8rem .9rem;
    border-radius: var(--yl-r-md);
    border: 1px solid transparent;
    transition: background var(--yl-trans), border-color var(--yl-trans), transform var(--yl-trans);
}
.trend-item:hover {
    background: var(--yl-bg-elev);
    border-color: var(--yl-border);
    transform: translateY(-2px);
}
.trend-rank {
    font-family: var(--yl-font-serif);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1;
    min-width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--yl-ink-soft);
    background: var(--yl-bg-soft);
    border: 1px solid var(--yl-border);
    transition: all var(--yl-trans);
}
.trend-item:nth-child(-n+3) .trend-rank {
    color: #fff;
    background: var(--yl-grad-red);
    border-color: transparent;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--yl-red) 35%, transparent);
}
.trend-item:hover .trend-rank { color: #fff; background: var(--yl-grad-red); border-color: transparent; }
.trend-item strong { font-family: var(--yl-font-serif); font-size: 1.02rem; font-weight: 600; }

/* ---------- 39. CANLI YAYIN VİTRİNİ ---------- */
.live-card {
    position: relative;
    border-radius: var(--yl-r-md);
    border: 1px solid color-mix(in srgb, var(--yl-red) 22%, var(--yl-border));
    background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--yl-red) 7%, transparent), transparent 55%),
        var(--yl-bg-elev);
    overflow: hidden;
}
.live-card::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 4px;
    background: var(--yl-grad-red);
}
.live-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--yl-grad-red);
    border-radius: 999px;
    padding: .2rem .55rem;
    animation: livePulse 2.2s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--yl-red) 40%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--yl-red) 8%, transparent); }
}

/* ---------- 40. OLAY DOSYALARI + ETKİNLİK KARTLARI ---------- */
.incident-card {
    position: relative;
    border-radius: var(--yl-r-md);
    border: 1px solid var(--yl-border);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--yl-brand) 4%, transparent), transparent 45%),
        var(--yl-bg-elev);
    box-shadow: var(--yl-shadow-sm);
    overflow: hidden;
    transition: transform var(--yl-trans), box-shadow var(--yl-trans), border-color var(--yl-trans);
}
.incident-card::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 4px;
    border-inline-start: 0;
    background: var(--yl-grad-brand);
    opacity: .75;
    transition: opacity var(--yl-trans);
}
.incident-card:hover::before { opacity: 1; }
.incident-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--yl-shadow);
    border-color: var(--yl-border-strong);
}
.status-chip {
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    padding: .3rem .65rem;
}

/* ---------- 41. SHORTS VİTRİNİ — 9:16 YATAY ŞERİT ---------- */
.shorts-rail {
    scroll-snap-type: x mandatory;
    padding: .25rem .25rem .5rem;
    margin-inline: -.25rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}
.shorts-thumb .ratio {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--yl-shadow-sm);
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color var(--yl-trans), transform var(--yl-trans), box-shadow var(--yl-trans);
}
.shorts-thumb:hover .ratio {
    outline-color: color-mix(in srgb, var(--yl-red) 55%, transparent);
    transform: translateY(-3px);
    box-shadow: var(--yl-shadow);
}
.shorts-thumb { position: relative; }
.shorts-thumb .ratio::after {
    content: "\F287"; /* bi-play-fill */
    font-family: "bootstrap-icons";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.9rem;
    color: #fff;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .55));
    text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
    pointer-events: none;
    border-radius: inherit;
}
.shorts-thumb .d-block.small {
    font-weight: 600;
    line-height: 1.35;
    transition: color var(--yl-trans);
}
.shorts-thumb:hover .d-block.small { color: var(--yl-red); }

/* ---------- 42. ŞEHRİMDE NE OLUYOR — İSTATİSTİK VİTRİNİ ---------- */
.pulse-cell {
    border-radius: var(--yl-r-md);
    border: 1px solid var(--yl-border);
    background: var(--yl-bg-elev);
    padding: .9rem .6rem .75rem;
    transition: transform var(--yl-trans), box-shadow var(--yl-trans), border-color var(--yl-trans), background var(--yl-trans);
}
.pulse-cell:hover {
    transform: translateY(-3px);
    border-color: var(--yl-border-strong);
    box-shadow: var(--yl-shadow);
    background: var(--yl-bg-soft);
}
.pulse-ic {
    width: 2.3rem;
    height: 2.3rem;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.05rem;
    transition: transform var(--yl-trans);
}
.pulse-cell:hover .pulse-ic { transform: scale(1.12) rotate(-4deg); }
.pulse-ic.ic-red { color: var(--yl-red); background: color-mix(in srgb, var(--yl-red) 12%, transparent); }
.pulse-ic.ic-amber { color: #b45309; background: rgba(245, 158, 11, .14); }
.pulse-ic.ic-blue { color: #1d4ed8; background: rgba(59, 130, 246, .14); }
.pulse-ic.ic-green { color: #047857; background: rgba(16, 185, 129, .14); }
[data-mode="dark"] .pulse-ic.ic-amber, [data-theme="dark"] .pulse-ic.ic-amber { color: #fbbf24; }
[data-mode="dark"] .pulse-ic.ic-blue, [data-theme="dark"] .pulse-ic.ic-blue { color: #60a5fa; }
[data-mode="dark"] .pulse-ic.ic-green, [data-theme="dark"] .pulse-ic.ic-green { color: #34d399; }
.pulse-num {
    font-size: 1.85rem;
    background: var(--yl-grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pulse-label { font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--yl-ink-faint); }

/* ---------- 43. SIDEBAR VİTRİNLERİ ---------- */
.widget-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--yl-font-serif);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .01em;
}
.widget-title .bi {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    font-size: .9rem;
    color: var(--yl-brand) !important;
    background: color-mix(in srgb, var(--yl-brand) 13%, transparent);
}
.widget-title.is-map .bi { color: #1d4ed8 !important; background: rgba(59, 130, 246, .13); }
.trust-box { border: 1px solid color-mix(in srgb, var(--yl-gold) 35%, var(--yl-border)); background: color-mix(in srgb, var(--yl-gold) 6%, var(--yl-bg-elev)); }
.trust-box .widget-title .bi { color: #b45309 !important; background: rgba(245, 158, 11, .15); }
[data-mode="dark"] .trust-box .widget-title .bi, [data-theme="dark"] .trust-box .widget-title .bi { color: #fbbf24 !important; }
.journalist-row {
    padding: .7rem .35rem;
    border-radius: 10px;
    transition: background var(--yl-trans), padding-left var(--yl-trans);
}
.journalist-row:hover { background: var(--yl-bg-soft); padding-left: .6rem; }
.journalist-row .points-badge {
    background: color-mix(in srgb, #10b981 13%, transparent) !important;
    color: #047857 !important;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #10b981 25%, transparent);
}
[data-mode="dark"] .journalist-row .points-badge, [data-theme="dark"] .journalist-row .points-badge { color: #34d399 !important; }

/* Haritada Keşfet düğmesi */
.widget-card .btn-outline-primary {
    font-weight: 700;
    border-radius: 999px;
    transition: all var(--yl-trans);
}
.widget-card .btn-outline-primary:hover {
    background: var(--yl-brand);
    border-color: var(--yl-brand);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--yl-brand) 35%, transparent);
    transform: translateY(-1px);
}

/* ---------- 44. FOOTER — KURUMSAL VİTRİN ---------- */
.site-footer {
    position: relative;
    background:
        radial-gradient(90% 160% at 85% 0%, rgba(51, 80, 126, .35), transparent 55%),
        linear-gradient(180deg, #101a2e, #0b1220);
    padding-top: 3.2rem;
}
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--yl-red), #7c2230 30%, #33507e 70%, transparent);
}
.site-footer .brand-mark { font-size: 1.7rem; }
.site-footer h6 {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #aab6cc;
    margin-bottom: .9rem;
    position: relative;
    padding-bottom: .5rem;
}
.site-footer h6::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--yl-red);
}
.footer-links li + li { margin-top: .1rem; }
.footer-links a {
    display: inline-block;
    padding: .22rem 0;
    color: #c3cddd;
    transition: color var(--yl-trans), transform var(--yl-trans);
}
.footer-links a:hover { color: #fff; transform: translateX(4px); }
.social-circle {
    width: 2.35rem;
    height: 2.35rem;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #d6deeb;
    transition: all var(--yl-trans);
}
.social-circle:hover {
    background: var(--yl-red);
    border-color: var(--yl-red);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(225, 29, 46, .35);
}
.footer-bottom {
    margin-top: 2.4rem;
    padding-block: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .09);
    color: #8f98a6;
    font-size: .82rem;
}

/* ---------- 45. CANLI GÜNDEM — FİLTRELER + AKIŞ ---------- */
.js-agenda-filter {
    border-radius: 999px;
    font-weight: 700;
    font-size: .82rem;
    padding: .42rem 1.05rem;
    transition: all var(--yl-trans);
}
.js-agenda-filter.btn-danger {
    background: var(--yl-grad-red);
    border: 0;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--yl-red) 30%, transparent);
}
.js-agenda-filter.btn-danger:hover { transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--yl-red) 40%, transparent); }
.js-agenda-filter.btn-outline-secondary:hover, .js-agenda-filter.btn-outline-danger:hover {
    transform: translateY(-1px);
    border-color: var(--yl-red);
    color: var(--yl-red);
}
.agenda-feed {
    background: var(--yl-bg-elev);
    border: 1px solid var(--yl-border);
    border-radius: var(--yl-r-lg);
    padding: .35rem 1rem;
    box-shadow: var(--yl-shadow-sm);
}
.agenda-feed > a {
    position: relative;
    padding: .85rem .4rem;
    border-radius: 10px;
    border-bottom: 1px solid var(--yl-border);
    transition: background var(--yl-trans), padding-left var(--yl-trans);
}
.agenda-feed > a:last-child { border-bottom: 0; }
.agenda-feed > a:hover { background: var(--yl-bg-soft); padding-left: .8rem; }
.agenda-feed .badge {
    min-width: 4.1rem;
    justify-content: center;
    border-radius: 8px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
}
.agenda-feed strong { font-family: var(--yl-font-serif); font-size: 1rem; }
/* Akış yan paneli kartları */
.col-lg-4 .card.border-0.bg-body-tertiary {
    border: 1px solid var(--yl-border);
    border-radius: var(--yl-r-lg);
    background: var(--yl-bg-elev) !important;
    box-shadow: var(--yl-shadow-sm);
}
.col-lg-4 .card.border-0.bg-body-tertiary h2 {
    font-family: var(--yl-font-serif);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .01em;
    padding-bottom: .5rem;
    margin-bottom: .25rem;
    border-bottom: 2px solid var(--yl-border);
    position: relative;
}
.col-lg-4 .card.border-0.bg-body-tertiary h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 34px;
    height: 2px;
    background: var(--yl-red);
}

/* ---------- 46. HABER DETAY — PAYLAŞ VİTRİNİ ---------- */
.share-bar {
    border-block: 1px solid var(--yl-border) !important;
    padding-block: .8rem !important;
}
/* Yalnızca sosyal paylaş bağlantıları (ikonlu <a>) kare olur;
   metinli butonlar (Link, Beğen, Kaydet, Bildir) normal akar */
.share-bar a.btn {
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
}
.share-bar .btn {
    transition: all var(--yl-trans);
}
.share-bar .btn:hover {
    transform: translateY(-2px);
    background: var(--yl-brand);
    border-color: var(--yl-brand);
    color: #fff;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--yl-brand) 35%, transparent);
}
.share-bar .btn-outline-danger:hover {
    background: var(--yl-red);
    border-color: var(--yl-red);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--yl-red) 35%, transparent);
}

/* ---------- 47. BUTON & FORM CİLA ---------- */
.btn-primary {
    background: var(--yl-grad-brand);
    border: 0;
    transition: all var(--yl-trans);
}
.btn-primary:hover {
    background: linear-gradient(135deg, #1b3057, #3d5f96);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--yl-brand) 35%, transparent);
}
.btn-danger {
    background: var(--yl-grad-red);
    border: 0;
    transition: all var(--yl-trans);
}
.btn-danger:hover {
    background: linear-gradient(135deg, #c2141f, #ef5550);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--yl-red) 40%, transparent);
}
.form-control:focus, .form-select:focus {
    border-color: var(--yl-brand);
    box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--yl-brand) 18%, transparent);
}

/* ---------- 48. YUKARI ÇIK + ÇEREZ BANDI CİLASI ---------- */
.back-to-top {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--yl-border-strong);
    box-shadow: var(--yl-shadow);
    transition: transform var(--yl-trans), background var(--yl-trans), border-color var(--yl-trans);
}
.back-to-top:hover {
    background: var(--yl-red) !important;
    border-color: var(--yl-red);
    color: #fff;
    transform: translateY(-3px);
}
.cookie-banner {
    background: color-mix(in srgb, var(--yl-bg-elev) 88%, transparent) !important;
    backdrop-filter: blur(14px) saturate(1.35);
    -webkit-backdrop-filter: blur(14px) saturate(1.35);
    border-top: 1px solid var(--yl-border);
    box-shadow: 0 -10px 34px rgba(0, 0, 0, .16);
}
.cookie-banner .btn-primary { box-shadow: 0 4px 12px color-mix(in srgb, var(--yl-red) 30%, transparent); }

/* ---------- 49. KÜÇÜK EKRAN CİLASI ---------- */
@media (max-width: 767.98px) {
    .section-title { font-size: 1.14rem; }
    .see-all { font-size: .72rem; padding: .26rem .65rem; }
    .breaking-list .list-group-item::after { content: none; }
    .trend-rank { min-width: 1.8rem; height: 1.8rem; font-size: 1.25rem; }
    .pulse-num { font-size: 1.55rem; }
    .site-footer { padding-top: 2.4rem; }
    .site-footer h6 { margin-top: .4rem; }
    .agenda-feed { padding-inline: .6rem; }
}

/* ============================================================
   AURORA v3.2 — "DERİNLİK" KATMANI
   · Renk yenilemesi: mor (aurora) + turkuaz ikincil aksanlar
   · Scroll-reveal: bölümler yumuşakça belirir (JS .rv / .rv-in)
   · Akıllı başlık: aşağı kaydırma'da gizlenir, yukarıda döner
   · Mikro etkileşimler: parlama süpürmesi, dalga, altı çizgi
   · Tümü prefers-reduced-motion'a saygılı
   ============================================================ */

/* ---------- 50. AURORA RENK YENİLEMESİ ---------- */
:root {
    --yl-violet: #6153e4;
    --yl-violet-strong: #4f41d6;
    --yl-violet-soft: #edecfd;
    --yl-teal: #0d9488;
    --yl-grad-aurora: linear-gradient(115deg, #14243f 0%, #3d3a8f 52%, #6153e4 100%);
    --yl-grad-violet: linear-gradient(135deg, #6153e4, #9f8ffb);
    --yl-grad-teal: linear-gradient(135deg, #0d9488, #2dd4bf);
    --yl-body-wash:
        radial-gradient(56rem 32rem at 85% -10rem, rgba(97, 83, 228, .08), transparent 62%),
        radial-gradient(44rem 28rem at -6% -8rem, rgba(225, 29, 46, .05), transparent 58%);
    --yl-shadow-violet: 0 10px 30px rgba(97, 83, 228, .20);
}
[data-mode="dark"], [data-theme="dark"] {
    --yl-violet: #8f7ff2;
    --yl-violet-strong: #a99bf7;
    --yl-violet-soft: #262052;
    --yl-grad-aurora: linear-gradient(115deg, #16233c 0%, #43408f 52%, #8f7ff2 100%);
    --yl-body-wash:
        radial-gradient(56rem 32rem at 85% -10rem, rgba(143, 127, 242, .12), transparent 62%),
        radial-gradient(44rem 28rem at -6% -8rem, rgba(255, 77, 85, .07), transparent 58%);
}
body.site-body { background-image: var(--yl-body-wash); }
@media (min-width: 992px) { body.site-body { background-attachment: fixed; } }
::selection { background: var(--yl-violet); color: #fff; }
:focus-visible { outline-color: var(--yl-violet); }
.form-control:focus, .form-select:focus {
    border-color: var(--yl-violet);
    box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--yl-violet) 16%, transparent);
}
.search-form .input-group:focus-within {
    border-color: var(--yl-violet);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--yl-violet) 14%, transparent);
}

/* ---------- 51. SCROLL-REVEAL + TEMBEL GÖRSEL GEÇİŞİ ---------- */
html.js-anim .rv { opacity: 0; transform: translateY(16px); }
html.js-anim .rv.rv-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .65s ease, transform .65s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--rv-d, 0s);
}
html.js-anim img.img-lazy { opacity: 0; transform: scale(1.02); transition: opacity .5s ease, transform .5s ease; }
html.js-anim img.img-lazy.img-loaded { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html.js-anim .rv { opacity: 1 !important; transform: none !important; }
    html.js-anim img.img-lazy { opacity: 1; transform: none; }
}

/* ---------- 52. AKILLI BAŞLIK + MENÜ MİKRO-ETKİLEŞİM ---------- */
.site-header {
    transition: transform .34s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
    will-change: transform;
}
.site-header.head-hidden { transform: translateY(-110%); }
.site-header.head-stuck { box-shadow: 0 12px 34px rgba(13, 24, 48, .14); }
[data-mode="dark"] .site-header.head-stuck, [data-theme="dark"] .site-header.head-stuck { box-shadow: 0 12px 34px rgba(0, 0, 0, .55); }
/* Ana menü: mor gradyan altı çizgi kayması (acil hapı hariç) */
.main-nav .nav-link:not(.nav-urgent)::after {
    content: "";
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: .22rem;
    height: 2px;
    border-radius: 2px;
    background: var(--yl-grad-violet);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
.main-nav .nav-link:not(.nav-urgent):hover::after { transform: scaleX(1); }
.cat-chip:hover { transform: translateY(-1px); }
.cat-chip { transition: color var(--yl-trans), background var(--yl-trans), border-color var(--yl-trans), transform var(--yl-trans); }

/* ---------- 53. HERO VİTRİNİ 2.0 ---------- */
/* Ana kapak: ışık süpürmesi + derin scrim + ok rozeti */
.news-card-lg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .16) 48%, transparent 62%);
    transform: translateX(-130%);
    transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}
.news-card-lg:hover::before { transform: translateX(130%); }
.news-card-lg::after {
    background:
        linear-gradient(180deg, rgba(10, 15, 26, .05) 20%, rgba(10, 15, 26, .58) 58%, rgba(8, 12, 22, .92) 100%),
        linear-gradient(100deg, rgba(97, 83, 228, .30), transparent 48%);
}
.news-card-lg .news-card-body::after {
    content: "\F138"; /* bi-chevron-right */
    font-family: "bootstrap-icons";
    position: absolute;
    right: 1.15rem;
    bottom: 1.2rem;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: translate(-10px, 10px);
    transition: opacity .3s ease, transform .3s ease, background .3s ease, border-color .3s ease;
}
.news-card-lg:hover .news-card-body::after {
    opacity: 1;
    transform: none;
    background: var(--yl-red);
    border-color: var(--yl-red);
}
/* Yan vitrin kartları: aurora ray belirir */
.news-card-sm::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16%;
    bottom: 16%;
    width: 3px;
    border-radius: 3px;
    background: var(--yl-grad-aurora);
    opacity: 0;
    transition: opacity var(--yl-trans);
}
.news-card-sm:hover::before { opacity: 1; }
/* Orta kart hover halkası (yalnız md — lg'nin scrim'i korunur) */
.news-card-md::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 0 transparent;
    transition: box-shadow .3s ease;
}
.news-card-md:hover::after { box-shadow: inset 0 0 0 1.6px color-mix(in srgb, var(--yl-violet) 55%, transparent); }

/* ---------- 54. BÖLÜM BAŞLIKLARI — AURORA İMZA ---------- */
.section-title::before {
    background: var(--yl-grad-aurora);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--yl-violet) 14%, transparent);
}
.section-title.is-red::before {
    background: var(--yl-grad-red);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--yl-red) 15%, transparent);
}
.section-head::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--yl-violet) 55%, transparent), var(--yl-border) 42%, transparent);
}
.see-all:hover {
    color: #fff;
    background: var(--yl-violet);
    border-color: var(--yl-violet);
    box-shadow: var(--yl-shadow-violet);
}

/* ---------- 55. VİTRİN KARTLARI — RENK VE CANLILIK ---------- */
.time-badge { background: var(--yl-grad-aurora); box-shadow: 0 2px 8px color-mix(in srgb, #3d3a8f 30%, transparent); }
.trend-item {
    background: var(--yl-bg-elev);
    border-color: var(--yl-border);
    box-shadow: var(--yl-shadow-sm);
}
.trend-item:hover {
    border-color: color-mix(in srgb, var(--yl-violet) 38%, var(--yl-border));
    box-shadow: var(--yl-shadow);
}
.live-card { animation: liveGlow 3.4s ease-in-out infinite; }
@keyframes liveGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(225, 29, 46, 0), var(--yl-shadow-sm); }
    50% { box-shadow: 0 0 24px color-mix(in srgb, var(--yl-red) 15%, transparent), var(--yl-shadow-sm); }
}
.incident-card::before { background: var(--yl-grad-aurora); }
.pulse-num {
    background: var(--yl-grad-aurora);
    -webkit-background-clip: text;
    background-clip: text;
    font-variant-numeric: tabular-nums;
}
[data-mode="dark"] .pulse-num, [data-theme="dark"] .pulse-num {
    background: linear-gradient(135deg, #a9bee6, #8f7ff2);
    -webkit-background-clip: text;
    background-clip: text;
}
.widget-title .bi {
    color: var(--yl-violet) !important;
    background: color-mix(in srgb, var(--yl-violet) 12%, transparent);
}
.shorts-thumb:hover .ratio { outline-color: color-mix(in srgb, var(--yl-violet) 55%, transparent); }

/* ---------- 56. BUTON PARLAMASI + DALGA ---------- */
.btn { position: relative; overflow: hidden; }
.btn-primary, .btn-danger { position: relative; overflow: hidden; }
.btn-primary::before, .btn-danger::before {
    content: "";
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: -70%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent);
    transform: skewX(-22deg);
    transition: left .55s ease;
    pointer-events: none;
}
.btn-primary:hover::before, .btn-danger:hover::before { left: 135%; }
.btn-ripple {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: currentColor;
    opacity: .2;
    transform: scale(0);
    animation: btnRipple .62s ease-out forwards;
    pointer-events: none;
}
@keyframes btnRipple { to { transform: scale(24); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .btn-ripple { display: none; } }

/* ---------- 57. FOOTER — AURORA ÇİZGİSİ ---------- */
.site-footer::before {
    background: linear-gradient(90deg, var(--yl-red) 0%, #7c2230 20%, var(--yl-violet) 52%, var(--yl-teal) 76%, transparent 100%);
}
.footer-links a:hover { color: #fff; }
.social-circle:hover {
    background: var(--yl-violet);
    border-color: var(--yl-violet);
    box-shadow: 0 8px 18px rgba(97, 83, 228, .4);
}

/* ---------- 58. KÜÇÜK EKRAN — v3.2 ---------- */
@media (max-width: 767.98px) {
    body.site-body { background-attachment: scroll; }
    .news-card-lg { min-height: 340px; }
    .news-card-lg .news-card-body::after { display: none; }
    .main-nav .nav-link::after { content: none; }
}

/* ============================================================
   AURORA v3.3 — "OKUMA" KATMANI
   Haber detay okuma deneyimi + yorum akışı 2.0 + lightbox
   + shorts oynatıcı 2.0
   ============================================================ */

/* ---------- 59. OKUMA DENEYİMİ — MAKALE ---------- */
/* Yazı boyutu: JS documentElement'e --read-scale yazar (1 / 1.12 / 1.26 / 1.4) */
.news-content {
    font-size: calc(1.06rem * var(--read-scale, 1));
    line-height: 1.85;
    letter-spacing: .002em;
}
.news-content h2, .news-content h3 {
    font-size: calc(1.4rem * var(--read-scale, 1));
    font-family: var(--yl-font-serif);
    letter-spacing: -.01em;
    padding-left: .65rem;
    border-left: 3px solid var(--yl-red);
    line-height: 1.3;
}
/* Editoryal drop-cap: ilk paragrafın ilk harfi */
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
    .news-content > p:first-of-type::first-letter {
        font-family: var(--yl-font-serif);
        font-weight: 700;
        color: var(--yl-red);
    }
}
.news-content > p:first-of-type::first-letter {
    font-family: var(--yl-font-serif);
    font-size: 3.05em;
    font-weight: 700;
    float: left;
    line-height: .84;
    padding: .05em .1em 0 0;
    color: var(--yl-red);
}
/* Kapak: hafif çerçeve + büyütme rozeti */
.article-figure { position: relative; }
.article-figure-link {
    display: block; position: relative; overflow: hidden;
    border-radius: var(--yl-radius);
    outline: 1px solid var(--yl-border);
    outline-offset: -1px;
}
.article-figure-link img {
    transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}
.article-figure-link:hover img { transform: scale(1.03); }
.article-figure-zoom {
    position: absolute; right: .8rem; bottom: .8rem;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .95rem;
    background: rgba(10, 14, 22, .55);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transform: translateY(6px);
    transition: opacity var(--yl-trans), transform var(--yl-trans);
}
.article-figure-link:hover .article-figure-zoom,
.article-figure-link:focus-visible .article-figure-zoom { opacity: 1; transform: translateY(0); }
/* Yazar avatarı */
.news-author { display: inline-flex; align-items: center; gap: .45rem; }
.news-author-av {
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, var(--yl-red), color-mix(in srgb, var(--yl-red) 55%, var(--yl-violet)));
    box-shadow: 0 2px 6px rgba(190, 30, 45, .35);
}
/* Yazı boyutu araçları */
.read-tools {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px; border-radius: 999px;
    background: var(--yl-bg-soft);
    border: 1px solid var(--yl-border);
}
.read-btn {
    border: 0; background: transparent; cursor: pointer;
    font-family: var(--yl-font);
    font-size: .72rem; font-weight: 800; line-height: 1;
    color: var(--yl-ink-soft);
    padding: .28rem .5rem; border-radius: 999px;
    transition: all var(--yl-trans);
    letter-spacing: .02em;
}
.read-btn:hover { background: var(--yl-violet); color: #fff; box-shadow: 0 3px 10px rgba(97, 83, 228, .35); }
.read-btn:active { transform: scale(.94); }
/* AI özeti — ikon çipli */
.ai-summary { border-left: none !important; border-radius: var(--yl-radius-sm) !important; position: relative; overflow: hidden; }
.ai-summary::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
    background: linear-gradient(180deg, var(--yl-violet), var(--yl-teal));
}
.ai-summary .card-body { padding-left: 1.1rem; }
.ai-summary strong {
    display: inline-flex; align-items: center; gap: .4rem;
    background: linear-gradient(90deg, var(--yl-violet), var(--yl-teal));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    letter-spacing: .08em;
}
/* Okuma ilerleme çubuğu — parlak uç nokta */
.reading-progress::after {
    content: ""; position: absolute; right: -3px; top: 50%;
    width: 9px; height: 9px; border-radius: 50%;
    transform: translateY(-50%);
    background: #fff;
    box-shadow: 0 0 10px 2px color-mix(in srgb, var(--yl-red) 75%, transparent);
}
@media (prefers-reduced-motion: reduce) { .article-figure-link img { transition: none; } }

/* ---------- 60. LIGHTBOX — galeri ve kapak ---------- */
.yl-lightbox {
    position: fixed; inset: 0; z-index: 3000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(7, 10, 17, .88);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
}
.yl-lightbox.open { opacity: 1; visibility: visible; }
.yl-lightbox figure { margin: 0; max-width: min(92vw, 1100px); max-height: 88vh; display: flex; flex-direction: column; }
.yl-lightbox img {
    max-width: 100%; max-height: 80vh; object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
    transform: scale(.96); transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
.yl-lightbox.open img { transform: scale(1); }
.yl-lightbox figcaption {
    text-align: center; color: rgba(255, 255, 255, .82);
    font-size: .85rem; margin-top: .9rem;
}
.yl-lightbox-close, .yl-lightbox-nav {
    position: absolute; border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: background var(--yl-trans), transform var(--yl-trans);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.yl-lightbox-close { top: 18px; right: 18px; width: 44px; height: 44px; font-size: 1.05rem; }
.yl-lightbox-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 1.2rem; }
.yl-lightbox-close:hover, .yl-lightbox-nav:hover { background: rgba(255, 255, 255, .24); }
.yl-lightbox-close:active, .yl-lightbox-nav:active { transform: scale(.92); }
.yl-lightbox .yl-lightbox-close:active { transform: scale(.92); }
.yl-lightbox-prev { left: 18px; }
.yl-lightbox-next { right: 18px; }
.yl-lightbox.single .yl-lightbox-nav { display: none; }
@media (max-width: 640px) {
    .yl-lightbox-nav { width: 40px; height: 40px; }
    .yl-lightbox-prev { left: 8px; }
    .yl-lightbox-next { right: 8px; }
}

/* ---------- 61. YORUMLAR 2.0 — topluluk akışı ---------- */
.comments-head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.comments-head .section-title { margin: 0 !important; }
.comments-count {
    min-width: 30px; height: 26px; padding: 0 .55rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; font-size: .78rem; font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--yl-red), color-mix(in srgb, var(--yl-red) 60%, var(--yl-violet)));
    box-shadow: 0 4px 12px rgba(190, 30, 45, .3);
    font-variant-numeric: tabular-nums;
}
.comments-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--yl-border), transparent); }
/* Avatar: isim hash'ine göre gradyan halka */
.comment { display: flex; gap: .75rem; margin-bottom: 1.1rem; }
.comment-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .95rem;
    color: #fff;
    background: linear-gradient(135deg, hsl(var(--av-h, 260) 74% 56%), hsl(calc(var(--av-h, 260) + 55) 72% 44%));
    box-shadow: 0 3px 10px hsl(var(--av-h, 260) 60% 45% / .35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.comment-avatar-me {
    background: linear-gradient(135deg, var(--yl-red), var(--yl-violet));
    box-shadow: 0 3px 10px rgba(190, 30, 45, .35);
}
.comment-main { flex: 1; min-width: 0; }
.comment-bubble {
    background: var(--yl-bg-elev);
    border: 1px solid var(--yl-border);
    border-radius: 4px 16px 16px 16px;
    padding: .8rem 1rem;
    transition: border-color var(--yl-trans), box-shadow var(--yl-trans), transform var(--yl-trans);
}
.comment:hover .comment-bubble {
    border-color: color-mix(in srgb, hsl(var(--av-h, 260) 70% 55%) 38%, var(--yl-border));
    box-shadow: var(--yl-shadow-sm);
}
.comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .82rem; }
.comment-name { font-weight: 700; color: var(--yl-ink); }
.comment-trust {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .68rem; font-weight: 700;
    color: var(--yl-ok, #1a9e6e);
    background: color-mix(in srgb, var(--yl-ok, #1a9e6e) 12%, transparent);
    padding: .14rem .5rem; border-radius: 999px;
}
.comment-time { color: var(--yl-ink-faint); margin-left: auto; font-size: .74rem; }
.comment-body { margin: .5rem 0 0; color: var(--yl-ink); line-height: 1.65; overflow-wrap: anywhere; }
.comment-foot { display: flex; gap: 1rem; margin-top: .3rem; padding-left: .4rem; }
.comment-like {
    border: 0; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .78rem; font-weight: 600; color: var(--yl-ink-faint);
    padding: .25rem .3rem; border-radius: 999px;
    transition: color var(--yl-trans), background var(--yl-trans);
}
.comment-like:hover { color: var(--yl-red); background: color-mix(in srgb, var(--yl-red) 8%, transparent); }
.comment-like.liked { color: var(--yl-red) !important; }
.comment-like.liked .bi::before { content: "\f417"; } /* heart-fill */
.comment-like.pop .bi { animation: heartPop .45s cubic-bezier(.22, 1.61, .36, 1); }
.comment-report {
    border: 0; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .74rem; font-weight: 600; color: var(--yl-ink-faint);
    padding: .25rem .5rem; border-radius: 999px;
    transition: color var(--yl-trans), background var(--yl-trans);
}
.comment-report:hover { color: #d97706; background: rgba(217, 119, 6, .1); }
@keyframes heartPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.5); }
    100% { transform: scale(1); }
}
/* AJAX ile eklenen yeni yorum: yumuşak giriş + vurgu */
.comment-in { animation: commentIn .7s cubic-bezier(.22, .61, .36, 1); }
@keyframes commentIn {
    0% { opacity: 0; transform: translateY(14px) scale(.98); }
    45% { opacity: 1; }
    60% { transform: translateY(0) scale(1); }
    75% { }
    100% { }
}
.comment-in .comment-bubble {
    animation: commentGlow 2.4s ease .2s;
}
@keyframes commentGlow {
    0%, 100% { box-shadow: none; border-color: var(--yl-border); }
    30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--yl-violet) 18%, transparent); border-color: var(--yl-violet); }
}
/* Form kartı */
.comment-form {
    background: var(--yl-bg-elev);
    border: 1px solid var(--yl-border);
    border-radius: var(--yl-radius);
    padding: 1rem;
    margin-bottom: 1.4rem;
    box-shadow: var(--yl-shadow-sm);
    transition: border-color var(--yl-trans), box-shadow var(--yl-trans);
}
.comment-form:focus-within {
    border-color: color-mix(in srgb, var(--yl-violet) 55%, var(--yl-border));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--yl-violet) 12%, transparent);
}
.comment-form textarea {
    border-radius: var(--yl-radius-sm) !important;
    background: var(--yl-bg-soft);
    border: 1px solid var(--yl-border);
    resize: vertical; min-height: 84px;
    transition: border-color var(--yl-trans);
}
.comment-form textarea:focus {
    background: var(--yl-bg-elev);
    border-color: var(--yl-violet) !important;
    box-shadow: none !important;
}
.comment-form-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: .45rem; font-size: .74rem;
}
.comment-hint { color: var(--yl-ink-faint); display: inline-flex; align-items: center; gap: .3rem; }
.comment-counter { color: var(--yl-ink-faint); font-variant-numeric: tabular-nums; }
.comment-counter b { color: var(--yl-ink-soft); font-weight: 700; }
.comment-send { margin-top: .6rem; }
.comment-send.sending { opacity: .65; pointer-events: none; }
.comment-send .bi { transition: transform var(--yl-trans); }
.comment-send:hover .bi { transform: translateX(3px); }
/* Giriş yapmamış: davet kartı */
.comments-login {
    display: flex; align-items: center; gap: .8rem;
    background: color-mix(in srgb, var(--yl-violet) 6%, var(--yl-bg-elev));
    border: 1px dashed color-mix(in srgb, var(--yl-violet) 40%, var(--yl-border));
    border-radius: var(--yl-radius);
    padding: .9rem 1.1rem; margin-bottom: 1.4rem;
    color: var(--yl-ink-soft); font-size: .88rem;
}
.comments-login .bi { font-size: 1.5rem; color: var(--yl-violet); }
/* Boş durum */
.comments-empty {
    text-align: center; padding: 2.2rem 1rem;
    border: 1px dashed var(--yl-border);
    border-radius: var(--yl-radius);
    color: var(--yl-ink-faint);
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
}
.comments-empty .bi { font-size: 2rem; color: var(--yl-ink-faint); opacity: .7; }
.comments-empty strong { color: var(--yl-ink-soft); font-size: .95rem; }
.comments-empty span { font-size: .82rem; }
@media (prefers-reduced-motion: reduce) {
    .comment-in, .comment-in .comment-bubble, .comment-like.pop .bi { animation: none; }
}

/* ---------- 62. SHORTS OYNATICI 2.0 — dikey vitrin ---------- */
.shorts-container {
    --shorts-w: min(100%, 428px);
    --shorts-h: min(72vh, 760px);
    position: relative;
    width: var(--shorts-w);
    height: var(--shorts-h);
    margin-inline: auto;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-radius: 26px;
    background: #06080d;
    box-shadow:
        0 30px 70px rgba(8, 12, 24, .38),
        0 0 0 1px var(--yl-border);
    isolation: isolate;
}
.shorts-container::-webkit-scrollbar { display: none; }
.shorts-slide {
    position: relative;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    background: #06080d;
}
.shorts-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    background: #06080d;
}
.shorts-shade {
    position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background:
        linear-gradient(180deg, rgba(4, 6, 12, .6) 0%, transparent 22%),
        linear-gradient(0deg, rgba(4, 6, 12, .82) 0%, transparent 46%);
}
.shorts-progress {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 4;
    background: rgba(255, 255, 255, .16);
}
.shorts-progress span {
    display: block; height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--yl-red), var(--yl-violet));
    border-radius: 0 2px 2px 0;
}
.shorts-mute {
    position: absolute; top: 14px; right: 14px; z-index: 5;
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(10, 14, 24, .45);
    color: #fff; font-size: 1rem; cursor: pointer;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: background var(--yl-trans), transform var(--yl-trans);
}
.shorts-mute:hover { background: rgba(97, 83, 228, .55); }
.shorts-mute:active { transform: scale(.9); }
.shorts-overlay {
    position: absolute; inset: auto 0 0 0; z-index: 3;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: .75rem;
    padding: 1.1rem 1rem 1.35rem;
    background: none; border-radius: 0;
}
.shorts-info { color: #fff; min-width: 0; flex: 1; padding-bottom: .35rem; }
.shorts-author {
    display: inline-flex; align-items: center; gap: .5rem;
    color: #fff; text-decoration: none; font-weight: 700; font-size: .86rem;
    transition: opacity var(--yl-trans);
}
.shorts-author:hover { opacity: .85; color: #fff; }
.shorts-author-av {
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 800;
    background: linear-gradient(135deg, var(--yl-red), var(--yl-violet));
    border: 2px solid rgba(255, 255, 255, .85);
    box-shadow: 0 4px 12px rgba(190, 30, 45, .45);
}
.shorts-title {
    font-family: var(--yl-font);
    font-size: .98rem; font-weight: 600; line-height: 1.4;
    margin: .55rem 0 .5rem;
    color: #fff;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.shorts-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .72rem; font-weight: 700;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #fff;
    padding: .22rem .6rem; border-radius: 999px;
}
.shorts-actions {
    display: flex; flex-direction: column; align-items: center; gap: 1.05rem;
    z-index: 3;
}
.shorts-act {
    border: 0; background: transparent; padding: 0;
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    color: #fff; text-decoration: none; cursor: pointer;
    font-family: var(--yl-font);
}
.shorts-act-disc {
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: background var(--yl-trans), transform var(--yl-trans), box-shadow var(--yl-trans);
}
.shorts-act:hover .shorts-act-disc { background: rgba(255, 255, 255, .22); transform: translateY(-2px); }
.shorts-act-num { font-size: .74rem; font-weight: 700; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.shorts-act.js-react.active .shorts-act-disc {
    background: linear-gradient(135deg, var(--yl-red), color-mix(in srgb, var(--yl-red) 60%, var(--yl-violet)));
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(190, 30, 45, .55);
    animation: heartPop .45s cubic-bezier(.22, 1.61, .36, 1);
}
/* Dokunma: oynat/duraklat flaşı */
.shorts-tap {
    position: absolute; left: 50%; top: 50%; z-index: 2;
    width: 76px; height: 76px; margin: -38px 0 0 -38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(8, 10, 18, .5);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #fff; font-size: 2rem;
    opacity: 0; pointer-events: none;
}
.shorts-tap.pop { animation: tapFlash .7s ease forwards; }
@keyframes tapFlash {
    0% { opacity: .95; transform: scale(.8); }
    55% { opacity: .95; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.25); }
}
.shorts-slide.is-paused .shorts-tap { opacity: 1; transform: scale(1); animation: none; }
/* Çift dokunuş beğeni patlaması */
.shorts-burst {
    position: absolute; z-index: 6;
    width: 84px; height: 84px; margin: -42px 0 0 -42px;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    color: var(--yl-red);
    font-size: 3rem;
    filter: drop-shadow(0 8px 22px rgba(190, 30, 45, .6));
    animation: burstUp .9s cubic-bezier(.17, .67, .35, 1) forwards;
}
@keyframes burstUp {
    0% { opacity: 0; transform: scale(.4) rotate(-12deg); }
    30% { opacity: 1; transform: scale(1.15) rotate(4deg); }
    70% { opacity: 1; transform: scale(1) rotate(-2deg); }
    100% { opacity: 0; transform: scale(1.35) translateY(-56px); }
}
/* İlk slayt kaydırma ipucu */
.shorts-hint {
    position: absolute; left: 50%; top: 16px; transform: translateX(-50%); z-index: 3;
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #fff;
    background: rgba(10, 14, 24, .5);
    border: 1px solid rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    padding: .4rem .85rem; border-radius: 999px;
    animation: hintFloat 1.8s ease-in-out infinite;
    pointer-events: none;
    transition: opacity .4s ease;
}
.shorts-container.is-playing .shorts-hint { opacity: 0; }
@keyframes hintFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(5px); }
}
.shorts-none {
    height: 100%; display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, .8); text-align: center; padding: 2rem;
}
.shorts-none a { color: #ff97a0; font-weight: 700; }
/* Tek shorts sayfası */
.short-single-player {
    max-width: 460px; margin-inline: auto;
    border-radius: var(--yl-radius);
    overflow: hidden;
    background: #06080d;
    box-shadow: 0 24px 60px rgba(8, 12, 24, .35), 0 0 0 1px var(--yl-border);
}
.short-single-video { display: block; width: 100%; max-height: 76vh; background: #06080d; }
.short-single-title {
    font-family: var(--yl-font-serif);
    font-size: 1.45rem; font-weight: 700; letter-spacing: -.015em;
    line-height: 1.3;
    margin-top: 1.1rem;
}
.short-single-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .9rem;
    margin-top: .6rem; font-size: .84rem; color: var(--yl-ink-soft);
}
.short-author {
    display: inline-flex; align-items: center; gap: .5rem;
    text-decoration: none; font-weight: 700; color: var(--yl-ink);
    transition: opacity var(--yl-trans);
}
.short-author:hover { opacity: .8; color: var(--yl-ink); }
.short-author-av {
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .76rem; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, var(--yl-red), var(--yl-violet));
    box-shadow: 0 3px 9px rgba(190, 30, 45, .4);
}
.short-stat { display: inline-flex; align-items: center; gap: .35rem; }
.short-stat .bi { color: var(--yl-red); }
@media (prefers-reduced-motion: reduce) {
    .shorts-hint, .shorts-tap.pop, .shorts-burst { animation: none; }
    .shorts-hint { opacity: 0; }
}
@media (max-width: 767.98px) {
    .shorts-container {
        --shorts-w: 100%;
        --shorts-h: calc(100dvh - 148px);
        border-radius: var(--yl-radius);
        box-shadow: 0 16px 40px rgba(8, 12, 24, .3), 0 0 0 1px var(--yl-border);
    }
}


/* ============================================================
   28. v3.4 — SHORTS VİTRİNİ: slider + popup oynatıcı
   Ana sayfadaki dikey video vitrini; karta tıklayan popup
   oynatıcıda izler (side panel + sahne düzeni).
   ============================================================ */
.shorts-slider { position: relative; }
.shorts-rail {
    display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 6px 4px 16px; margin-inline: -4px;
    scrollbar-width: none; cursor: grab;
}
.shorts-rail:active { cursor: grabbing; }
.shorts-rail::-webkit-scrollbar { display: none; }
/* Bootstrap bu derlemeye .ratio-9x16 eklemiyor (yalnız 1x1/4x3/16x9/21x9 var) —
   vitrin ve akış kartları için dikey video oranını burada tanımla (v3.8 düzeltmesi) */
.ratio-9x16 { --bs-aspect-ratio: 177.7778%; }
.shorts-card {
    --sc-w: 138px;
    position: relative; flex: 0 0 var(--sc-w); width: var(--sc-w);
    border: 0; background: none; padding: 0; cursor: pointer;
    scroll-snap-align: start; text-align: start;
    border-radius: var(--yl-radius-sm); overflow: hidden;
    isolation: isolate;
    transition: transform var(--yl-trans), box-shadow var(--yl-trans);
}
.shorts-card:hover { transform: translateY(-4px); box-shadow: var(--yl-shadow); }
.shorts-card:focus-visible { outline: 2px solid var(--yl-red); outline-offset: 3px; }
.shorts-card-media { display: block; border-radius: var(--yl-radius-sm); background: #0b0f1c; }
.shorts-card-media img { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.shorts-card:hover .shorts-card-media img { transform: scale(1.08); }
.shorts-card-shade {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    border-radius: var(--yl-radius-sm);
    background:
        linear-gradient(180deg, rgba(4, 8, 18, .38), transparent 36%),
        linear-gradient(0deg, rgba(4, 8, 18, .88), transparent 52%);
}
.shorts-card-top {
    position: absolute; top: 8px; left: 8px; right: 8px; z-index: 2;
    display: flex; justify-content: space-between; align-items: center; gap: 4px;
    pointer-events: none;
}
.shorts-views-chip {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .66rem; font-weight: 700; color: #fff;
    background: rgba(4, 8, 18, .58);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    padding: .18rem .5rem; border-radius: 999px;
}
.shorts-featured-chip {
    display: inline-flex; align-items: center; gap: .22rem;
    font-size: .62rem; font-weight: 800; color: #241503;
    background: linear-gradient(135deg, #ffd66b, #f4a83a);
    padding: .18rem .5rem; border-radius: 999px;
    box-shadow: 0 2px 8px rgba(244, 168, 58, .4);
}
.shorts-card-play {
    position: absolute; z-index: 2; inset: 0; margin: auto;
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.5rem; color: #fff;
    background: rgba(225, 29, 46, .92);
    box-shadow: 0 6px 18px rgba(225, 29, 46, .45);
    opacity: 0; transform: scale(.6);
    transition: opacity var(--yl-trans), transform var(--yl-trans);
    pointer-events: none;
}
.shorts-card:hover .shorts-card-play,
.shorts-card:focus-visible .shorts-card-play { opacity: 1; transform: scale(1); }
.shorts-card-info {
    position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 2;
    color: #fff; pointer-events: none; min-width: 0;
}
.shorts-card-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .78rem; line-height: 1.28; font-weight: 600;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
.shorts-card-sub { display: block; font-size: .66rem; opacity: .8; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shorts-card-more {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
    background: var(--yl-grad-brand); color: #fff; text-decoration: none;
}
.shorts-card-more:hover { color: #fff; transform: translateY(-4px); box-shadow: var(--yl-shadow); }
.shorts-more-disc {
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.2rem;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3);
    transition: transform var(--yl-trans), background var(--yl-trans);
}
.shorts-card-more:hover .shorts-more-disc { transform: translate(2px, -2px); background: rgba(225, 29, 46, .85); border-color: transparent; }
.shorts-more-txt { text-align: center; padding: 0 .5rem; }
.shorts-more-txt strong { display: block; font-size: .84rem; }
.shorts-more-txt span { display: block; font-size: .68rem; opacity: .75; margin-top: 2px; }
.shorts-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--yl-border); background: var(--yl-bg-elev); color: var(--yl-ink);
    cursor: pointer; display: grid; place-items: center; font-size: 1.05rem;
    box-shadow: var(--yl-shadow);
    opacity: 0; pointer-events: none;
    transition: opacity var(--yl-trans), background var(--yl-trans), color var(--yl-trans), border-color var(--yl-trans);
}
.shorts-slider:hover .shorts-nav:not(.is-off),
.shorts-nav:focus-visible { opacity: 1; pointer-events: auto; }
.shorts-nav:hover { background: var(--yl-red); color: #fff; border-color: var(--yl-red); }
.shorts-nav.is-off { opacity: 0 !important; pointer-events: none !important; }
.shorts-nav.js-shorts-prev { left: -15px; }
.shorts-nav.js-shorts-next { right: -15px; }
@media (max-width: 991.98px) {
    .shorts-nav { display: none; }
    .shorts-card { --sc-w: 122px; }
}
@media (max-width: 374.98px) { .shorts-card { --sc-w: 108px; } }

/* --- Popup oynatıcı --- */
.shorts-pop { position: fixed; inset: 0; z-index: 1085; }
.shorts-pop[hidden] { display: none; }
.shorts-pop-backdrop {
    position: absolute; inset: 0; border: 0; padding: 0;
    background: rgba(5, 8, 16, .74);
    -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
    opacity: 0; transition: opacity .26s ease;
}
.shorts-pop.is-open .shorts-pop-backdrop { opacity: 1; }
.shorts-pop-shell {
    position: absolute; inset: 0; margin: auto;
    display: grid; grid-template-columns: auto minmax(238px, 272px);
    width: max-content; max-width: 96vw;
    height: min(86vh, 660px);
    background: #0a0e1a; color: #fff;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 22px; overflow: hidden;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
    transform: translateY(16px) scale(.97); opacity: 0;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), opacity .24s ease;
}
.shorts-pop.is-open .shorts-pop-shell { transform: none; opacity: 1; }
.shorts-pop-stage {
    position: relative; height: 100%;
    aspect-ratio: 9 / 16; max-width: 96vw;
    background: #000; overflow: hidden;
}
.shorts-pop-video { width: 100%; height: 100%; object-fit: contain; display: block; }
.shorts-pop-arrow {
    position: absolute; right: 12px; z-index: 6;
    width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(10, 14, 26, .55); color: #fff; font-size: 1.05rem;
    display: grid; place-items: center;
    transition: background var(--yl-trans), transform var(--yl-trans);
}
.shorts-pop-arrow:hover { background: rgba(225, 29, 46, .9); }
.shorts-pop-arrow:active { transform: scale(.92); }
.shorts-pop-arrow.is-up { top: 12px; }
.shorts-pop-arrow.is-down { bottom: 26px; }
.shorts-pop-side {
    min-width: 0; display: flex; flex-direction: column; gap: 11px;
    padding: 18px 18px 16px;
    background: linear-gradient(180deg, #131a2c, #0a0e1a);
    overflow-y: auto;
}
.shorts-pop-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.shorts-pop-brand {
    display: inline-flex; align-items: center; gap: .32rem;
    font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: #ffd66b;
}
.shorts-pop-pos { font-size: .74rem; color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; }
.shorts-pop-pos .cur { color: #fff; }
.shorts-pop-title {
    font-family: var(--yl-font-serif);
    font-size: 1.08rem; line-height: 1.32; font-weight: 600;
    color: #fff; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.shorts-pop-author {
    display: inline-flex; align-items: center; gap: .55rem; width: max-content; max-width: 100%;
    color: #fff; text-decoration: none; font-weight: 600; font-size: .86rem;
}
.shorts-pop-author:hover { color: #ffd66b; }
.shorts-pop-author .shorts-author-av { flex-shrink: 0; }
.shorts-pop-city {
    display: inline-flex; align-items: center; gap: .32rem; width: max-content;
    font-size: .72rem; font-weight: 700; color: #ffd66b;
    background: rgba(244, 168, 58, .12); border: 1px solid rgba(244, 168, 58, .28);
    padding: .18rem .6rem; border-radius: 999px;
}
.shorts-pop-city[hidden] { display: none; }
.shorts-pop-stats { display: flex; gap: 16px; font-size: .78rem; color: rgba(255, 255, 255, .62); }
.shorts-pop-stats b { color: #fff; font-variant-numeric: tabular-nums; }
.shorts-pop-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.shorts-pop-actions .btn { border-radius: 999px; font-weight: 600; }
.shorts-pop-actions .btn-outline-secondary { color: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .32); }
.shorts-pop-actions .btn-outline-secondary:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .55); }
.shorts-pop-actions .btn-outline-primary { color: #ff8b94; border-color: rgba(225, 29, 46, .55); }
.shorts-pop-actions .btn-outline-primary:hover,
.shorts-pop-actions .btn-outline-primary.active { background: var(--yl-red); border-color: var(--yl-red); color: #fff; }
.shorts-pop-actions .btn-dark { background: #fff; border-color: #fff; color: #0a0e1a; }
.shorts-pop-actions .btn-dark:hover { background: #ffd66b; border-color: #ffd66b; color: #241503; }
.shorts-pop-foot {
    margin-top: auto; padding-top: 12px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, .09);
}
.shorts-pop-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    background: rgba(255, 255, 255, .07); color: #fff;
    border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
    padding: .45rem .6rem; font-size: .8rem; font-weight: 600; cursor: pointer;
    transition: background var(--yl-trans), transform var(--yl-trans);
}
.shorts-pop-btn:hover { background: rgba(255, 255, 255, .16); }
.shorts-pop-btn:active { transform: scale(.96); }
.shorts-pop-close {
    position: absolute; top: 10px; right: 10px; z-index: 7;
    width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(10, 14, 26, .65); color: #fff; font-size: .95rem;
    display: grid; place-items: center;
    transition: background var(--yl-trans), transform var(--yl-trans);
}
.shorts-pop-close:hover { background: var(--yl-red); transform: rotate(90deg); }
body.shorts-pop-open { overflow: hidden; }
@media (max-width: 767.98px) {
    .shorts-pop-shell {
        grid-template-columns: 1fr; grid-template-rows: auto 1fr;
        width: 100vw; max-width: 100vw; height: 100dvh;
        border-radius: 0; border: 0;
        transform: translateY(18px);
    }
    .shorts-pop-stage { width: 100%; max-width: none; height: auto; aspect-ratio: auto; max-height: 58dvh; }
    .shorts-pop-video { object-fit: contain; }
    .shorts-pop-arrow { display: none; }
    .shorts-pop-side { padding: 14px 16px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .shorts-pop-shell, .shorts-pop-backdrop, .shorts-card, .shorts-card-play, .shorts-nav { transition: none; }
}
@media print {
    .shorts-showcase, .shorts-pop, .sel-share { display: none !important; }
}

/* ============================================================
   29. v3.4 — HABER DETAY: okuma deneyimi + yorum akışı
   ============================================================ */
@media (min-width: 992px) {
    .news-content { max-width: 72ch; }
}
.news-content p { text-wrap: pretty; }
.news-content > p:first-of-type::first-letter {
    float: left;
    font-family: var(--yl-font-serif); font-weight: 700;
    font-size: 3.05em; line-height: .82;
    padding: .05em .12em 0 0;
    color: var(--yl-brand);
}
[data-mode="dark"] .news-content > p:first-of-type::first-letter,
[data-theme="dark"] .news-content > p:first-of-type::first-letter { color: #9db4dd; }
.news-content h2, .news-content h3 {
    position: relative; padding-left: .95rem;
    scroll-margin-top: calc(var(--yl-nav-h-total, 112px) + 14px);
}
.news-content h2::before, .news-content h3::before {
    content: ""; position: absolute; left: 0; top: .16em; bottom: .16em;
    width: 4px; border-radius: 4px;
    background: var(--yl-grad-red);
}
.news-content h2 { font-family: var(--yl-font-serif); letter-spacing: -.01em; }
.news-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.15rem; font-size: .95rem; }
.news-content table td, .news-content table th { border: 1px solid var(--yl-border); padding: .45rem .7rem; }
.news-content table th { background: var(--yl-bg-soft); }
.comment-form textarea {
    transition: border-color var(--yl-trans), box-shadow var(--yl-trans);
}
.comment-form textarea:focus {
    border-color: var(--yl-brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--yl-brand) 13%, transparent);
}
.comment-sort { display: inline-flex; gap: 4px; }
.cs-btn {
    border: 1px solid var(--yl-border); background: var(--yl-bg-elev); color: var(--yl-ink-soft);
    font-size: .73rem; font-weight: 700; padding: .24rem .72rem;
    border-radius: 999px; cursor: pointer; white-space: nowrap;
    transition: color var(--yl-trans), background var(--yl-trans), border-color var(--yl-trans);
}
.cs-btn:hover { color: var(--yl-ink); border-color: var(--yl-border-strong); }
.cs-btn.is-active { background: var(--yl-brand); color: #fff; border-color: var(--yl-brand); }
.comment-top-crown {
    display: inline-flex; align-items: center; gap: .3rem;
    margin-top: .55rem;
    font-size: .7rem; font-weight: 800; color: #8a6410;
    background: linear-gradient(135deg, #fff3d1, #ffe6a3);
    border: 1px solid #f0d48a;
    padding: .16rem .6rem; border-radius: 999px;
}
[data-mode="dark"] .comment-top-crown,
[data-theme="dark"] .comment-top-crown { color: #ffd66b; background: rgba(244, 168, 58, .13); border-color: rgba(244, 168, 58, .3); }
@media (max-width: 575.98px) {
    .comments-head { flex-wrap: wrap; }
    .comments-rule { display: none; }
}

/* --- Seçim paylaşma balonu --- */
.sel-share {
    position: fixed; z-index: 1090;
    display: inline-flex; align-items: center; gap: 2px;
    background: var(--yl-brand-strong); color: #fff;
    border-radius: 999px; padding: .3rem .55rem;
    box-shadow: var(--yl-shadow-lg);
    animation: sel-pop .18s cubic-bezier(.22, .61, .36, 1);
}
.sel-share[hidden] { display: none; }
.sel-share-lbl { font-size: .68rem; font-weight: 700; opacity: .7; margin-right: .15rem; }
.sel-share button {
    border: 0; background: transparent; color: #fff;
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    transition: background var(--yl-trans);
}
.sel-share button:hover { background: rgba(255, 255, 255, .16); }
@keyframes sel-pop {
    from { opacity: 0; transform: translateY(6px) scale(.92); }
}
@media print {
    .sel-share { display: none !important; }
}

/* ---------- 63. SHORTS POPUP YORUM PANELİ — YouTube Shorts tarzı ---------- */
.shorts-pop-side { overflow: hidden; }
.shorts-pop-comments {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, .09);
    padding-top: 10px;
}
.spc-head {
    display: inline-flex; align-items: center; gap: .45rem; width: 100%;
    background: none; border: 0; padding: 0 0 8px; cursor: pointer;
    color: rgba(255, 255, 255, .82); font-size: .8rem; font-weight: 700;
    text-align: left;
}
.spc-head:hover .spc-title { color: #fff; }
.spc-head .spc-n {
    min-width: 22px; text-align: center;
    font-size: .68rem; font-weight: 800; color: #fff;
    background: var(--yl-grad-red);
    border-radius: 999px; padding: .08rem .42rem;
    font-variant-numeric: tabular-nums;
}
.spc-chev { margin-left: auto; font-size: .82rem; transition: transform var(--yl-trans); color: rgba(255, 255, 255, .5); }
.spc-list {
    flex: 1; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 11px;
    padding: 2px 6px 6px 2px;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.spc-list::-webkit-scrollbar { width: 5px; }
.spc-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 4px; }
.spc-msg {
    display: flex; align-items: center; gap: .5rem;
    color: rgba(255, 255, 255, .5); font-size: .78rem;
    padding: 10px 2px; margin: 0;
}
.spc-msg[hidden] { display: none; }
.spc-empty { justify-content: center; text-align: center; }
.spc-error { color: #ff8b94; }
/* Kompakt yorum balonu */
.sc-item { display: grid; grid-template-columns: 30px 1fr; gap: 9px; animation: scIn .3s ease both; }
@keyframes scIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.sc-av {
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: hsl(var(--av-h, 220) 58% 42%);
    color: #fff; font-size: .74rem; font-weight: 800;
    flex-shrink: 0; user-select: none;
}
.sc-main { min-width: 0; }
.sc-head { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.sc-name { font-size: .76rem; font-weight: 700; color: #fff; }
.sc-trust { color: #ffd66b; font-size: .66rem; }
.sc-time { font-size: .66rem; color: rgba(255, 255, 255, .42); }
.sc-body {
    margin: 1px 0 0; font-size: .79rem; line-height: 1.45;
    color: rgba(255, 255, 255, .88); word-break: break-word;
    overflow-wrap: anywhere;
}
.sc-foot { display: flex; gap: 10px; margin-top: 2px; }
.sc-like, .sc-reply-hint {
    background: none; border: 0; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: .28rem;
    font-size: .68rem; font-weight: 600; color: rgba(255, 255, 255, .48);
    transition: color var(--yl-trans), transform var(--yl-trans);
}
.sc-like:hover, .sc-reply-hint:hover { color: rgba(255, 255, 255, .85); }
.sc-like.is-liked { color: #ff5b64; }
.sc-like.is-liked .sc-like-n { color: #ff5b64; }
.sc-like.pop { animation: scPop .34s ease; }
@keyframes scPop { 40% { transform: scale(1.24); } }
.sc-reply-hint { cursor: pointer; }
/* Thread: yanıtlar + aç/kapa + rapor butonu */
.sc-report {
    background: none; border: 0; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: .26rem;
    font-size: .68rem; font-weight: 600; color: rgba(255, 255, 255, .34);
    margin-left: auto; transition: color var(--yl-trans), transform var(--yl-trans);
}
.sc-report:hover { color: #ff8a93; transform: translateY(-1px); }
.sc-thread-toggle {
    display: inline-flex; align-items: center; gap: .32rem;
    background: none; border: 0; padding: .28rem 0 0; cursor: pointer;
    font-size: .7rem; font-weight: 700;
    color: hsl(220 65% 62%);
    transition: color var(--yl-trans);
}
.sc-thread-toggle:hover { color: hsl(220 78% 72%); }
.sc-thread-chev { font-size: .62rem; transition: transform var(--yl-trans); }
.sc-thread-chev.is-open { transform: rotate(-180deg); }
.sc-replies {
    margin: .3rem 0 0; padding: 0 0 0 10px;
    border-left: 2px solid rgba(255, 255, 255, .1);
    display: grid; gap: .55rem;
}
.sc-item.is-reply { grid-template-columns: 24px 1fr; gap: 7px; }
.sc-item.is-reply .sc-av { width: 24px; height: 24px; font-size: .6rem; }
.sc-item.is-reply .sc-name { font-size: .72rem; }
.sc-item.is-reply .sc-body { font-size: .75rem; }
.sc-item.is-reply .sc-replies { margin: 0; }
/* Düzey-2 thread (yanıtın yanıtı): daha dar girinti + daha küçük kart */
.sc-thread-toggle2 { font-size: .66rem; padding-top: .2rem; }
.sc-replies2 {
    margin: .24rem 0 0; padding: 0 0 0 9px;
    border-left: 2px solid rgba(255, 255, 255, .07);
    display: grid; gap: .45rem;
}
.sc-item.is-reply2 { grid-template-columns: 20px 1fr; gap: 6px; }
.sc-item.is-reply2 .sc-av { width: 20px; height: 20px; font-size: .54rem; }
.sc-item.is-reply2 .sc-name { font-size: .68rem; }
.sc-item.is-reply2 .sc-body { font-size: .71rem; }
.sc-item.is-reply2 .sc-foot { gap: .5rem; }
.sc-item.is-reply2 .sc-like, .sc-item.is-reply2 .sc-reply-hint, .sc-item.is-reply2 .sc-report { font-size: .64rem; }
/* Yorum formu */
.spc-form {
    display: flex; align-items: flex-start; gap: 7px;
    padding-top: 9px; margin-top: 2px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.spc-form .spc-send { margin-top: 1px; }
.spc-form-av {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--yl-grad-red);
    color: #fff; font-size: .68rem; font-weight: 800;
}
.spc-input-wrap { flex: 1; min-width: 0; display: grid; gap: 5px; }
.spc-replying {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .66rem; font-weight: 600; color: hsl(220 65% 66%);
    padding: .14rem .5rem; border-radius: 999px;
    background: hsl(220 60% 60% / .12);
    border: 1px solid hsl(220 60% 60% / .28);
    width: fit-content;
}
.spc-replying b { font-weight: 800; }
.spc-reply-cancel {
    background: none; border: 0; cursor: pointer; padding: 0 0 0 2px;
    color: inherit; font-size: .78rem; line-height: 1;
    display: inline-grid; place-items: center;
    transition: color var(--yl-trans), transform var(--yl-trans);
}
.spc-reply-cancel:hover { color: #fff; transform: scale(1.15); }
.spc-input {
    flex: 1; min-width: 0;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff; border-radius: 999px;
    font-size: .78rem; padding: .42rem .8rem;
    outline: none;
    transition: border-color var(--yl-trans), background var(--yl-trans);
}
.spc-input::placeholder { color: rgba(255, 255, 255, .38); }
.spc-input:focus { border-color: rgba(225, 29, 46, .65); background: rgba(255, 255, 255, .1); }
.spc-send {
    width: 32px; height: 32px; border-radius: 50%; border: 0; flex-shrink: 0;
    background: var(--yl-grad-red); color: #fff; cursor: pointer;
    display: grid; place-items: center; font-size: .84rem;
    transition: transform var(--yl-trans), filter var(--yl-trans), opacity var(--yl-trans);
}
.spc-send:hover { filter: brightness(1.12); }
.spc-send:active { transform: scale(.9); }
.spc-send:disabled { opacity: .55; cursor: wait; }
.spc-login {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    margin-top: 8px; padding: .48rem .6rem;
    border: 1px dashed rgba(255, 255, 255, .3); border-radius: 999px;
    color: rgba(255, 255, 255, .78); font-size: .76rem; font-weight: 600;
    text-decoration: none; transition: border-color var(--yl-trans), color var(--yl-trans), background var(--yl-trans);
}
.spc-login:hover { color: #fff; border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .06); }
/* Katlama durumu */
.shorts-pop-comments.is-collapsed .spc-list,
.shorts-pop-comments.is-collapsed .spc-form,
.shorts-pop-comments.is-collapsed .spc-login { display: none; }
.shorts-pop-comments.is-collapsed .spc-chev { transform: rotate(-90deg); }
@media (max-width: 767.98px) {
    .shorts-pop-side { overflow-y: auto; }
    .spc-list { flex: 0 1 auto; max-height: 148px; }
    .shorts-pop-comments.is-collapsed .spc-list { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sc-item, .sc-like.pop { animation: none; }
}

/* ---------- 64. CANLI YAYIN DETAY — sahne, çipler, balon sohbet ---------- */
.live-detail .live-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.live-chip {
    display: inline-flex; align-items: center; gap: .34rem;
    font-size: .72rem; font-weight: 700; color: var(--yl-ink-soft);
    background: var(--yl-bg-elev);
    border: 1px solid var(--yl-border);
    border-radius: 999px; padding: .26rem .68rem;
    font-variant-numeric: tabular-nums;
    transition: box-shadow var(--yl-trans), border-color var(--yl-trans);
}
.live-chip b { color: var(--yl-ink); font-variant-numeric: tabular-nums; }
.live-chip i { color: var(--yl-red); }
.live-chip-viewers i, .live-chip-time i { color: var(--yl-red); }
.live-chip-city { color: #8a5a00; border-color: color-mix(in srgb, #f4a83a 45%, var(--yl-border)); background: color-mix(in srgb, #f4a83a 10%, var(--yl-bg-elev)); }
.live-chip-ended { color: var(--yl-ink-faint); }
.live-chip.bump { animation: chipBump .5s ease; }
@keyframes chipBump { 35% { transform: scale(1.09); } }
.live-title {
    font-family: var(--yl-font-serif);
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    font-weight: 600; line-height: 1.28;
    color: var(--yl-ink); margin: .65rem 0 .8rem;
    text-wrap: balance;
}
.live-author { display: flex; align-items: center; gap: .7rem; }
.live-author-av {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    background: hsl(var(--av-h, 220) 55% 42%);
    color: #fff; font-weight: 800; font-size: 1.05rem;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--yl-red) 24%, transparent);
}
.live-author-meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.live-author-meta strong { font-size: .95rem; color: var(--yl-ink); }
.live-author-link { font-size: .78rem; color: var(--yl-red); text-decoration: none; font-weight: 600; }
.live-author-link:hover { text-decoration: underline; }
.live-author-sub { font-size: .74rem; color: var(--yl-ink-faint); }
/* Sahne: aurora çerçeve + overlay çipler */
.live-stage {
    position: relative; border-radius: var(--yl-radius);
    overflow: hidden; background: #000;
    border: 1px solid var(--yl-border);
    box-shadow: var(--yl-shadow);
}
.live-stage.is-live {
    border-color: color-mix(in srgb, var(--yl-red) 45%, var(--yl-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--yl-red) 22%, transparent), 0 18px 44px rgba(225, 29, 46, .14);
}
.live-stage iframe, .live-stage video { display: block; width: 100%; }
.live-stage-badge, .live-stage-viewers {
    position: absolute; z-index: 5; top: 12px;
    display: inline-flex; align-items: center; gap: .34rem;
    font-size: .7rem; font-weight: 800; color: #fff;
    background: rgba(5, 8, 16, .62);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border-radius: 999px; padding: .24rem .62rem;
    font-variant-numeric: tabular-nums;
}
.live-stage-badge { left: 12px; letter-spacing: .08em; }
.live-stage-viewers { right: 12px; }
.live-stage-fallback {
    aspect-ratio: 16 / 9; display: grid; place-content: center; gap: .4rem;
    color: rgba(255, 255, 255, .68);
}
.live-stage-fallback i { font-size: 2.6rem; color: var(--yl-red); }
.live-stage-fallback p { font-size: .88rem; }
/* Açıklama kartı */
.live-desc {
    background: var(--yl-bg-elev);
    border: 1px solid var(--yl-border);
    border-left: 3px solid var(--yl-red);
    border-radius: var(--yl-radius-sm);
    padding: .9rem 1.05rem;
}
.live-desc-title {
    font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: var(--yl-ink-faint); margin: 0 0 .4rem;
}
.live-desc-title i { color: var(--yl-red); margin-right: .3rem; }
.live-desc p { color: var(--yl-ink-soft); font-size: .92rem; line-height: 1.62; }
/* Sohbet kartı */
.live-chat {
    background: var(--yl-bg-elev);
    border: 1px solid var(--yl-border);
    border-radius: var(--yl-radius);
    overflow: hidden;
    box-shadow: var(--yl-shadow-sm);
}
.live-chat-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: .78rem .95rem;
    border-bottom: 1px solid var(--yl-border);
    background: linear-gradient(90deg, color-mix(in srgb, var(--yl-red) 8%, transparent), transparent 65%);
}
.live-chat-title { font-size: .8rem; font-weight: 800; color: var(--yl-ink); letter-spacing: .02em; }
.live-chat-title i { color: var(--yl-red); margin-right: .3rem; }
.live-chat-online {
    display: inline-flex; align-items: center; gap: .38rem;
    font-size: .7rem; font-weight: 700; color: var(--yl-ink-faint);
    font-variant-numeric: tabular-nums;
}
.live-chat-online b { color: var(--yl-ink); }
.live-chat-body {
    height: 388px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 10px;
    padding: .85rem .9rem;
    scrollbar-width: thin;
}
.live-chat-off {
    height: auto; min-height: 120px;
    display: grid; place-content: center; justify-items: center; gap: .4rem;
    color: var(--yl-ink-faint); font-size: .84rem;
}
.live-chat-off i { font-size: 1.6rem; color: var(--yl-border-strong); }
/* Balon mesaj */
.lch { display: flex; gap: 8px; animation: scIn .26s ease both; }
.lch-av {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    background: hsl(var(--av-h, 220) 55% 44%);
    color: #fff; font-size: .68rem; font-weight: 800;
    user-select: none;
}
.lch-main { min-width: 0; background: var(--yl-bg-soft); border: 1px solid var(--yl-border); border-radius: 4px 13px 13px 13px; padding: .42rem .66rem; }
.lch-name { display: block; font-size: .68rem; font-weight: 800; color: hsl(var(--av-h, 220) 60% 42%); }
.lch-msg { margin: 1px 0 0; font-size: .8rem; line-height: 1.45; color: var(--yl-ink); overflow-wrap: anywhere; }
.lch.is-mine .lch-main { background: color-mix(in srgb, var(--yl-red) 9%, var(--yl-bg-soft)); border-color: color-mix(in srgb, var(--yl-red) 30%, var(--yl-border)); }
.lch.is-mine .lch-name { color: var(--yl-red); }
/* Sohbet mesaj araçları (⋮) — hover'da görünür, herkese açık bildir + moderatör aksiyonları */
.lch { position: relative; }
.lch-tools {
    align-self: flex-start; flex-shrink: 0;
    width: 22px; height: 22px; border-radius: 50%;
    background: transparent; border: 0; cursor: pointer;
    color: var(--yl-ink-soft, rgba(15, 18, 22, .38)); font-size: .74rem;
    display: grid; place-items: center;
    opacity: 0; transform: scale(.9);
    transition: opacity var(--yl-trans), transform var(--yl-trans), background var(--yl-trans), color var(--yl-trans);
}
.lch:hover .lch-tools, .lch-tools:focus-visible { opacity: 1; transform: none; }
.lch-tools:hover { background: var(--yl-border); color: var(--yl-ink); }
@media (hover: none) { .lch-tools { opacity: .6; transform: none; } }
/* Mini rapor/araç menüsü (shorts yorumu + canlı sohbet ortak) */
.yl-report-menu {
    position: fixed; z-index: 3200;
    min-width: 190px; padding: 6px;
    background: var(--yl-bg-elev, #16181d);
    border: 1px solid var(--yl-border);
    border-radius: 12px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .28);
    display: grid; gap: 2px;
    animation: ylMenuIn .16s ease both;
}
@keyframes ylMenuIn { from { opacity: 0; transform: translateY(5px) scale(.98); } to { opacity: 1; transform: none; } }
.yl-report-head {
    display: flex; align-items: center; gap: .36rem;
    font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: var(--yl-ink-soft, rgba(255, 255, 255, .5));
    padding: .3rem .55rem .34rem;
    border-bottom: 1px solid var(--yl-border);
    margin-bottom: 3px;
}
.yl-report-menu > button {
    background: none; border: 0; cursor: pointer; text-align: left;
    display: flex; align-items: center; gap: .5rem;
    padding: .44rem .6rem; border-radius: 8px;
    font-size: .8rem; font-weight: 600; color: var(--yl-ink);
    transition: background var(--yl-trans), color var(--yl-trans);
}
.yl-report-menu > button:hover { background: color-mix(in srgb, var(--yl-red) 12%, transparent); color: var(--yl-red); }
.yl-report-menu .yl-mod-item { border-top: 1px solid var(--yl-border); }
.yl-report-menu .yl-mod-item.is-danger { color: #e11d2e; }
.yl-report-menu .yl-mod-item.is-danger:hover { background: rgba(225, 29, 46, .14); color: #ff5b64; }
/* Moderatör rozeti (sohbet başlığı) */
.live-mod-badge {
    display: inline-flex; align-items: center; gap: .22rem;
    font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: hsl(220 65% 62%);
    background: hsl(220 65% 62% / .14);
    border: 1px solid hsl(220 65% 62% / .3);
    border-radius: 999px; padding: .08rem .42rem;
    vertical-align: middle;
}
/* Emoji çubuğu + form */
.live-chat-emoji {
    display: flex; gap: 2px; padding: .32rem .6rem;
    border-top: 1px solid var(--yl-border);
    background: var(--yl-bg-soft);
}
.js-chat-emoji {
    background: none; border: 0; cursor: pointer;
    font-size: .98rem; line-height: 1;
    padding: .28rem .38rem; border-radius: 8px;
    transition: transform var(--yl-trans), background var(--yl-trans);
}
.js-chat-emoji:hover { background: color-mix(in srgb, var(--yl-red) 12%, transparent); transform: scale(1.22); }
.js-chat-emoji:active { transform: scale(.9); }
.live-chat-foot { padding: .6rem .7rem; border-top: 1px solid var(--yl-border); background: var(--yl-bg-elev); }
.live-chat-form { display: flex; align-items: center; gap: 7px; }
.live-chat-av {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--yl-grad-red); color: #fff; font-size: .68rem; font-weight: 800;
}
.live-chat-form .form-control { border-radius: 999px; border-color: var(--yl-border); font-size: .82rem; }
.live-chat-form .form-control:focus { border-color: var(--yl-red); box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--yl-red) 14%, transparent); }
.live-chat-send {
    width: 32px; height: 32px; border-radius: 50%; border: 0; flex-shrink: 0;
    background: var(--yl-grad-red); color: #fff; cursor: pointer;
    display: grid; place-items: center; font-size: .84rem;
    transition: filter var(--yl-trans), transform var(--yl-trans);
}
.live-chat-send:hover { filter: brightness(1.12); }
.live-chat-send:active { transform: scale(.9); }
.live-chat-invite { font-size: .78rem; color: var(--yl-ink-faint); text-align: center; }
.live-chat-invite a { color: var(--yl-red); font-weight: 700; }
/* Diğer yayınlar */
.live-others { background: var(--yl-bg-elev); border: 1px solid var(--yl-border); border-radius: var(--yl-radius); overflow: hidden; box-shadow: var(--yl-shadow-sm); }
.live-others-head {
    padding: .72rem .95rem; font-size: .78rem; font-weight: 800; color: var(--yl-ink);
    border-bottom: 1px solid var(--yl-border);
    background: linear-gradient(90deg, color-mix(in srgb, var(--yl-red) 8%, transparent), transparent 65%);
}
.live-others-head i { color: var(--yl-red); margin-right: .34rem; }
.live-others-body { display: flex; flex-direction: column; }
.live-others-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .66rem .95rem;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--yl-border) 55%, transparent);
    transition: background var(--yl-trans);
}
.live-others-item:last-child { border-bottom: 0; }
.live-others-item:hover { background: var(--yl-bg-soft); }
.live-others-dot { flex-shrink: 0; width: 14px; text-align: center; }
.live-others-main { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.32; }
.live-others-main strong { font-size: .8rem; font-weight: 700; color: var(--yl-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-others-main span { font-size: .7rem; color: var(--yl-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-others-view { flex-shrink: 0; font-size: .7rem; font-weight: 700; color: var(--yl-red); font-variant-numeric: tabular-nums; }

/* ---------- 65. CANLI YAYIN LİSTESİ — hero vitrin + istatistik ---------- */
.live-hero { position: relative; border-radius: var(--yl-radius); overflow: hidden; border: 1px solid color-mix(in srgb, var(--yl-red) 26%, var(--yl-border)); box-shadow: var(--yl-shadow); }
.live-hero-link {
    position: relative; display: flex; flex-direction: column; gap: 34px;
    padding: 1.25rem 1.3rem 1.15rem;
    background:
        radial-gradient(130% 170% at 0% 0%, color-mix(in srgb, var(--yl-red) 16%, transparent), transparent 58%),
        var(--yl-grad-brand);
    color: #fff; text-decoration: none;
    isolation: isolate;
}
.live-hero-link::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .07) 48%, transparent 62%);
    transform: translateX(-100%);
    transition: transform .8s ease;
}
.live-hero-link:hover::after { transform: translateX(100%); }
.live-hero-top { display: flex; align-items: center; gap: 8px; }
.live-hero-viewers {
    margin-left: auto; display: inline-flex; align-items: center; gap: .34rem;
    font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums;
    background: rgba(5, 8, 16, .42); border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px; padding: .22rem .6rem;
}
.live-hero-main { display: flex; flex-direction: column; gap: .4rem; }
.live-hero-title { font-family: var(--yl-font-serif); font-size: clamp(1.2rem, 2.2vw, 1.55rem); font-weight: 600; line-height: 1.28; color: #fff; text-wrap: balance; }
.live-hero-sub { font-size: .78rem; color: rgba(255, 255, 255, .78); display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.live-hero-cta {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--yl-grad-red); color: #fff;
    font-size: .82rem; font-weight: 800; letter-spacing: .02em;
    border-radius: 999px; padding: .5rem 1.05rem;
    box-shadow: 0 8px 22px rgba(225, 29, 46, .4);
    transition: transform var(--yl-trans), box-shadow var(--yl-trans);
}
.live-hero-link:hover .live-hero-cta { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(225, 29, 46, .5); }
.live-hero-link:hover { color: #fff; }
.live-empty {
    display: flex; align-items: center; gap: .9rem;
    background: var(--yl-bg-elev); border: 1px dashed var(--yl-border-strong);
    border-radius: var(--yl-radius); padding: 1.1rem 1.2rem;
}
.live-empty i { font-size: 1.7rem; color: var(--yl-red); }
.live-empty div { display: flex; flex-direction: column; }
.live-empty strong { font-size: .95rem; color: var(--yl-ink); }
.live-empty span { font-size: .8rem; color: var(--yl-ink-faint); }
.live-empty-sm { padding: .85rem 1rem; }
.live-empty-sm i { font-size: 1.2rem; }
.live-mini-view {
    font-size: .7rem; font-weight: 800; color: var(--yl-red);
    display: inline-flex; align-items: center; gap: .3rem;
    font-variant-numeric: tabular-nums;
}
.live-mini-sub { font-size: .74rem; color: var(--yl-ink-faint); }
.live-card-end { border-left: 0 !important; }
.live-card-end::before { background: var(--yl-border-strong) !important; }
/* İstatistik şeridi */
.live-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: var(--yl-bg-elev); border: 1px solid var(--yl-border);
    border-radius: var(--yl-radius); overflow: hidden;
    box-shadow: var(--yl-shadow-sm);
}
.live-stat {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: .85rem .4rem;
    border-right: 1px solid var(--yl-border);
}
.live-stat:last-child { border-right: 0; }
.live-stat-n { font-size: 1.35rem; font-weight: 800; color: var(--yl-red); font-variant-numeric: tabular-nums; font-family: var(--yl-font-serif); }
.live-stat-l { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--yl-ink-faint); text-align: center; }
/* Başlat rehberi */
.live-start { background: var(--yl-bg-elev); border: 1px solid var(--yl-border); border-radius: var(--yl-radius); box-shadow: var(--yl-shadow-sm); }
.live-start-title { font-size: .86rem; font-weight: 800; color: var(--yl-ink); letter-spacing: .02em; }
.live-start-title i { color: var(--yl-red); margin-right: .3rem; }
.live-start-steps {
    margin: .8rem 0 1rem; padding: 0 0 0 1.15rem;
    display: flex; flex-direction: column; gap: .45rem;
    color: var(--yl-ink-soft); font-size: .82rem;
}
.live-start-steps li::marker { color: var(--yl-red); font-weight: 800; }
.live-start-btn { border-radius: 999px; font-weight: 800; box-shadow: 0 8px 20px rgba(225, 29, 46, .32); transition: transform var(--yl-trans), box-shadow var(--yl-trans); }
.live-start-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(225, 29, 46, .42); }
.live-start-note { display: block; margin-top: .7rem; font-size: .7rem; color: var(--yl-ink-faint); }
.live-start-note i { color: #1c8a4b; margin-right: .25rem; }
@media (max-width: 767.98px) {
    .live-chat-body { height: 300px; }
    .live-stat-n { font-size: 1.12rem; }
}
@media (prefers-reduced-motion: reduce) {
    .live-hero-link::after, .live-chip.bump { animation: none; transition: none; }
}

/* ============================================================
   66. v3.8 — ÜST SHORTS ŞERİDİ + TÜM BÖLÜMLERDE MODERN CILA
   Ana sayfada shorts vitrini artık slider'ın (hero) üstünde:
   kompakt cam panel şerit + bölümlerde son rötuşlar.
   ============================================================ */

/* --- 66.1 Üst shorts şeridi: kompakt cam panel --- */
.shorts-showcase.is-top .shorts-slider {
    position: relative;
    background: color-mix(in srgb, var(--yl-ink) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--yl-border) 72%, transparent);
    border-radius: var(--yl-radius);
    padding: 10px 6px 6px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
[data-mode="dark"] .shorts-showcase.is-top .shorts-slider {
    background: color-mix(in srgb, #ffffff 4%, transparent);
    border-color: color-mix(in srgb, var(--yl-border) 90%, transparent);
}
.shorts-showcase.is-top .shorts-rail { padding: 4px 6px 10px; gap: 10px; }
.shorts-showcase.is-top .shorts-card { --sc-w: 112px; border-radius: 10px; }
.shorts-showcase.is-top .shorts-card:hover { transform: translateY(-3px); }
.shorts-showcase.is-top .shorts-card-media { border-radius: 10px; }
.shorts-showcase.is-top .shorts-card-shade { border-radius: 10px; }
.shorts-showcase.is-top .shorts-card-title { font-size: .7rem; -webkit-line-clamp: 1; }
.shorts-showcase.is-top .shorts-card-sub { display: none; }
.shorts-showcase.is-top .shorts-card-info { left: 7px; right: 7px; bottom: 6px; }
.shorts-showcase.is-top .shorts-card-top { top: 6px; left: 6px; right: 6px; }
.shorts-showcase.is-top .shorts-views-chip { font-size: .6rem; padding: .14rem .42rem; }
.shorts-showcase.is-top .shorts-featured-chip { font-size: .56rem; padding: .14rem .42rem; }
.shorts-showcase.is-top .shorts-card-play { width: 34px; height: 34px; font-size: 1.1rem; }
.shorts-showcase.is-top .shorts-nav { width: 32px; height: 32px; font-size: .95rem; }
.shorts-showcase.is-top .shorts-card-more { border-radius: 10px; }
.shorts-showcase.is-top .shorts-more-disc { width: 36px; height: 36px; font-size: 1rem; }
.shorts-showcase.is-top .shorts-more-txt strong { font-size: .74rem; }
.shorts-showcase.is-top .shorts-more-txt span { font-size: .6rem; }
/* Kenar solma ipuçları: kaydırılabilir olduğunu sezdirir */
.shorts-showcase.is-top .shorts-slider::before,
.shorts-showcase.is-top .shorts-slider::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 34px; z-index: 2;
    pointer-events: none; opacity: 0; transition: opacity .3s ease;
}
.shorts-showcase.is-top .shorts-slider:not(.is-at-start)::before {
    opacity: 1;
}
.shorts-showcase.is-top .shorts-slider::before {
    left: 0; border-radius: var(--yl-radius) 0 0 var(--yl-radius);
    background: linear-gradient(90deg, color-mix(in srgb, var(--yl-bg) 88%, transparent), transparent);
}
.shorts-showcase.is-top .shorts-slider::after {
    right: 0; border-radius: 0 var(--yl-radius) var(--yl-radius) 0;
    background: linear-gradient(270deg, color-mix(in srgb, var(--yl-bg) 88%, transparent), transparent);
}
.shorts-showcase.is-top .shorts-slider:not(.is-at-end)::after { opacity: 1; }

/* --- 66.2 Shorts başlık çipi --- */
.shorts-live-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    font-family: var(--yl-font-sans);
    font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #fff; background: var(--yl-grad-red);
    padding: .22rem .6rem; border-radius: 999px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--yl-red) 36%, transparent);
    margin-right: .5rem; vertical-align: middle;
    animation: shortsChipPulse 2.8s ease-in-out infinite;
}
.shorts-live-chip .bi { font-size: .72rem; }
@keyframes shortsChipPulse {
    0%, 100% { box-shadow: 0 4px 14px color-mix(in srgb, var(--yl-red) 30%, transparent); }
    50% { box-shadow: 0 4px 20px color-mix(in srgb, var(--yl-red) 52%, transparent); }
}

/* --- 66.3 Son dakika listesi: sol vurgu + satır kayması --- */
.breaking-list { position: relative; overflow: hidden; border-radius: var(--yl-radius-sm); }
.breaking-list .list-group-item {
    position: relative; transition: transform var(--yl-trans), background-color var(--yl-trans), box-shadow var(--yl-trans);
}
.breaking-list .list-group-item::before {
    content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--yl-red);
    opacity: 0; transform: scaleY(.4); transform-origin: center;
    transition: opacity var(--yl-trans), transform var(--yl-trans);
}
.breaking-list .list-group-item:hover {
    background: color-mix(in srgb, var(--yl-red) 4%, var(--yl-bg-elev));
    transform: translateX(4px);
    box-shadow: var(--yl-shadow-sm);
}
.breaking-list .list-group-item:hover::before { opacity: 1; transform: scaleY(1); }
.breaking-list .time-badge { transition: transform var(--yl-trans); }
.breaking-list .list-group-item:hover .time-badge { transform: scale(1.06); }

/* --- 66.4 Canlı yayın kartları: nabız halkası --- */
.live-card { position: relative; }
.live-card .live-dot { position: relative; }
.live-card .live-dot::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--yl-red) 55%, transparent);
    opacity: 0; animation: liveDotRing 2.2s ease-out infinite;
}
@keyframes liveDotRing {
    0% { transform: scale(.6); opacity: .9; }
    70% { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}
.live-card .live-pill {
    transition: transform var(--yl-trans), box-shadow var(--yl-trans);
}
.live-card:hover .live-pill { transform: scale(1.05); box-shadow: 0 4px 12px rgba(225, 29, 46, .3); }

/* --- 66.5 Şehir nabzı: hücre numaraları gradyan vurgu --- */
.pulse-cell .pulse-num {
    transition: color var(--yl-trans);
}
.pulse-cell:hover .pulse-num { color: var(--yl-red); }
.city-pulse .js-city-select { transition: border-color var(--yl-trans), box-shadow var(--yl-trans); }
.city-pulse .js-city-select:focus { border-color: var(--yl-red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--yl-red) 14%, transparent); }

/* --- 66.6 Olay dosyaları + etkinlikler: üst şerit parlaklığı --- */
.incident-card::before { transition: opacity var(--yl-trans), transform var(--yl-trans); transform: scaleX(.35); transform-origin: left; }
.incident-card:hover::before { transform: scaleX(1); }

/* --- 66.7 Sidebar widget'ları: başlık ikonu plaka + satır vurgusu --- */
.journalist-row { border-radius: 10px; }
.journalist-row .points-badge { transition: transform var(--yl-trans), box-shadow var(--yl-trans); }
.journalist-row:hover .points-badge { transform: scale(1.1); box-shadow: 0 4px 12px rgba(25, 135, 84, .25); }
.trust-box { position: relative; overflow: hidden; }
.trust-box::after {
    content: ""; position: absolute; right: -30px; bottom: -30px; width: 110px; height: 110px;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--yl-brand) 10%, transparent), transparent 70%);
}

/* --- 66.8 Erişilebilirlik ve hareket azaltma --- */
.shorts-showcase.is-top .shorts-card:focus-visible { outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .shorts-live-chip { animation: none; }
    .live-card .live-dot::after { animation: none; opacity: 0; }
    .breaking-list .list-group-item:hover { transform: none; }
}

/* ============================================================
   67. v3.9 — Üst shorts şeridi tam genişlik + haber yorumları
        2 seviyeli thread (header altı bandın kartları büyüdü)
   ============================================================ */

/* --- 67.1 Shorts şeridi: header'ın altında tam genişlik — kartlar ferahlatıldı --- */
.shorts-showcase.is-top .shorts-slider { padding: 12px 8px 8px; }
.shorts-showcase.is-top .shorts-rail { padding: 4px 8px 12px; gap: 12px; }
.shorts-showcase.is-top .shorts-card { --sc-w: 132px; border-radius: 12px; }
.shorts-showcase.is-top .shorts-card-media,
.shorts-showcase.is-top .shorts-card-shade,
.shorts-showcase.is-top .shorts-card-more { border-radius: 12px; }
.shorts-showcase.is-top .shorts-card-title { font-size: .72rem; -webkit-line-clamp: 2; }
.shorts-showcase.is-top .shorts-card-sub { display: block; font-size: .6rem; }
.shorts-showcase.is-top .shorts-card-info { left: 9px; right: 9px; bottom: 8px; }
.shorts-showcase.is-top .shorts-card-play { width: 38px; height: 38px; font-size: 1.2rem; }
.shorts-showcase.is-top .shorts-more-disc { width: 40px; height: 40px; font-size: 1.06rem; }
.shorts-showcase.is-top .shorts-more-txt strong { font-size: .78rem; }
@media (max-width: 575.98px) {
    .shorts-showcase.is-top .shorts-card { --sc-w: 116px; }
    .shorts-showcase.is-top .shorts-card-sub { display: none; }
    .shorts-showcase.is-top .shorts-card-title { -webkit-line-clamp: 1; }
}

/* --- 67.2 Haber yorumları: 2 seviyeli thread (YouTube deseni, AURORA stili) --- */
.comment-replies {
    margin: .45rem 0 0; padding: 0 0 0 12px;
    border-left: 2px solid color-mix(in srgb, var(--yl-border) 80%, transparent);
    display: grid; gap: .6rem;
}
.comment-replies[hidden] { display: none; }
.comment-replies2 {
    margin: .4rem 0 0; padding: 0 0 0 10px;
    border-left: 2px solid color-mix(in srgb, var(--yl-border) 52%, transparent);
    display: grid; gap: .5rem;
}
.comment-replies2[hidden] { display: none; }
.comment.is-reply { gap: 8px; }
.comment.is-reply .comment-avatar { width: 28px; height: 28px; font-size: .72rem; }
.comment.is-reply .comment-bubble { padding: .55rem .75rem; border-radius: 4px 12px 12px 12px; }
.comment.is-reply .comment-head { font-size: .76rem; }
.comment.is-reply .comment-body { font-size: .84rem; margin-top: .3rem; }
.comment.is-reply2 { gap: 6px; }
.comment.is-reply2 .comment-avatar { width: 24px; height: 24px; font-size: .62rem; }
.comment.is-reply2 .comment-bubble { padding: .45rem .65rem; }
.comment.is-reply2 .comment-head { font-size: .72rem; }
.comment.is-reply2 .comment-body { font-size: .8rem; }
.comment-reply-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    background: none; border: 0; padding: .22rem .5rem; border-radius: 999px; cursor: pointer;
    font-size: .74rem; font-weight: 600; color: var(--yl-ink-faint);
    transition: color var(--yl-trans), background var(--yl-trans), transform var(--yl-trans);
}
.comment-reply-btn:hover {
    color: var(--yl-violet);
    background: var(--yl-violet-soft, color-mix(in srgb, var(--yl-violet) 10%, transparent));
    transform: translateY(-1px);
}
.cm-thread-toggle {
    display: inline-flex; align-items: center; gap: .32rem;
    background: none; border: 0; padding: .3rem 0 0; cursor: pointer;
    font-size: .72rem; font-weight: 700; color: var(--yl-violet);
    transition: color var(--yl-trans);
}
.cm-thread-toggle:hover { color: var(--yl-violet-strong); }
.cm-thread-toggle2 { font-size: .68rem; padding-top: .24rem; }
.cm-chev { font-size: .64rem; transition: transform var(--yl-trans); }
.cm-chev.is-open { transform: rotate(-180deg); }
/* Yanıt modu çubuğu: "@isim kullanıcısına yanıt yazılıyor" */
.cm-replying {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .74rem; font-weight: 600; color: var(--yl-ink);
    background: color-mix(in srgb, var(--yl-violet) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--yl-violet) 26%, transparent);
    padding: .3rem .6rem; border-radius: 8px; margin-bottom: .5rem;
}
.cm-replying .bi-reply { color: var(--yl-violet); }
.cm-replying b { color: var(--yl-violet-strong); }
.cm-replying-cancel {
    background: none; border: 0; cursor: pointer; color: var(--yl-ink-faint);
    display: inline-flex; padding: .12rem .3rem; border-radius: 6px; margin-left: .15rem;
    transition: color var(--yl-trans), background var(--yl-trans);
}
.cm-replying-cancel:hover { color: var(--yl-red); background: color-mix(in srgb, var(--yl-red) 10%, transparent); }
[data-mode="dark"] .comment-replies { border-left-color: rgba(255, 255, 255, .14); }
[data-mode="dark"] .comment-replies2 { border-left-color: rgba(255, 255, 255, .09); }
@media (max-width: 575.98px) {
    .comment-replies { padding-left: 8px; }
    .comment-replies2 { padding-left: 7px; }
}
@media (prefers-reduced-motion: reduce) {
    .cm-chev, .comment-reply-btn, .cm-replying-cancel { transition: none; }
}

/* ============================================================
   v4.0 — (A) CANLI YAYIN KLİP VİTRİNİ + (B) OKUMA İLERLEME ÇUBUĞU
   ============================================================ */

/* ---- (A) Klip vitrini: yayın sayfasında kısa özet şeridi ---- */
.clip-showcase { --clip-h: 152px; }
.clip-showcase .section-title { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.clip-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--yl-grad-red); color: #fff;
    font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    padding: .28rem .6rem; border-radius: 999px;
    box-shadow: 0 4px 12px rgba(225, 29, 46, .28);
}
.clip-count {
    min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--yl-brand); color: #fff; border-radius: 999px;
    font-size: .74rem; font-weight: 800;
}
.clip-add-toggle {
    display: inline-flex; align-items: center; gap: .35rem;
    border: 1.5px dashed var(--yl-red); background: var(--yl-red-soft); color: var(--yl-red-strong);
    font-size: .76rem; font-weight: 700; padding: .4rem .8rem; border-radius: 999px;
    cursor: pointer; transition: var(--yl-trans);
}
.clip-add-toggle:hover, .clip-add-toggle.is-open { background: var(--yl-red); color: #fff; border-style: solid; }
.clip-add-toggle.is-open .bi-plus-lg { transform: rotate(45deg); }
.clip-add-toggle .bi-plus-lg { transition: transform .24s ease; }

.clip-panel {
    margin-top: .8rem; padding: .85rem .95rem;
    background: var(--yl-glass); backdrop-filter: blur(10px);
    border: 1px solid var(--yl-border); border-radius: var(--yl-radius-sm);
    box-shadow: var(--yl-shadow-sm);
    animation: ylClipIn .24s cubic-bezier(.22, .61, .36, 1);
}
@keyframes ylClipIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.clip-panel-form { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; }
.clip-select { flex: 1 1 260px; min-width: 0; border-radius: var(--yl-radius-xs); }
.clip-panel-btn { border-radius: var(--yl-radius-xs); font-weight: 700; white-space: nowrap; }
.clip-panel-hint { margin: .55rem 0 0; font-size: .74rem; color: var(--yl-ink-faint); display: flex; gap: .4rem; align-items: baseline; }

.clip-wrap { position: relative; flex: 0 0 auto; width: var(--clip-h); }
.clip-wrap .shorts-card { width: 100%; }
.clip-card-chip {
    display: inline-flex; align-items: center; gap: .25rem;
    background: rgba(20, 36, 63, .78); color: #ffd9a0;
    font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    padding: .22rem .5rem; border-radius: 999px; backdrop-filter: blur(4px);
}
.clip-detach { position: absolute; top: 6px; right: 6px; z-index: 4; }
.clip-detach-btn {
    width: 22px; height: 22px; border: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(17, 24, 39, .66); color: #fff; font-size: .6rem;
    cursor: pointer; opacity: 0; transform: scale(.8);
    transition: opacity .18s ease, transform .18s ease, background .18s ease;
}
.clip-wrap:hover .clip-detach-btn, .clip-wrap:focus-within .clip-detach-btn { opacity: 1; transform: scale(1); }
.clip-detach-btn:hover { background: var(--yl-red); }
.clip-slider .shorts-card-media img { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.clip-slider .shorts-card:hover .shorts-card-media img { transform: scale(1.06); }

.clip-empty {
    margin-top: .8rem; padding: 1.4rem 1rem; text-align: center;
    border: 1.5px dashed var(--yl-border-strong); border-radius: var(--yl-radius-sm);
    color: var(--yl-ink-faint); display: flex; flex-direction: column; gap: .3rem; align-items: center;
}
.clip-empty .bi { font-size: 1.5rem; color: var(--yl-red); }
.clip-empty strong { color: var(--yl-ink); font-size: .92rem; }
.clip-empty span { font-size: .78rem; max-width: 420px; }

@media (max-width: 575.98px) {
    .clip-showcase { --clip-h: 128px; }
    .clip-detach-btn { opacity: .8; transform: scale(1); }
}
[data-mode="dark"] .clip-panel { background: rgba(23, 27, 34, .92); }
[data-mode="dark"] .clip-add-toggle { background: rgba(225, 29, 46, .14); }
[data-mode="dark"] .clip-add-toggle:hover, [data-mode="dark"] .clip-add-toggle.is-open { background: var(--yl-red); }
[data-mode="dark"] .clip-empty { border-color: rgba(255, 255, 255, .14); }
@media (prefers-reduced-motion: reduce) {
    .clip-panel, .clip-add-toggle .bi-plus-lg, .clip-slider .shorts-card-media img { transition: none; animation: none; }
}

/* ---- (B) Haber okuma ilerleme çubuğu + yüzde baloncuğu ---- */
.read-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 1080;
    background: transparent; pointer-events: none;
    opacity: 0; transform: translateY(-4px);
    transition: opacity .25s ease, transform .25s ease;
}
.read-progress.is-visible { opacity: 1; transform: none; }
.read-progress-fill {
    display: block; height: 100%; width: 0;
    background: var(--yl-grad-red);
    box-shadow: 0 0 10px rgba(225, 29, 46, .45);
    border-radius: 0 4px 4px 0;
    transition: width .12s linear;
}
.read-progress.is-done .read-progress-fill { background: linear-gradient(135deg, #0f9d58, #34c983); box-shadow: 0 0 10px rgba(15, 157, 88, .4); }
.read-bubble {
    position: fixed; right: 18px; bottom: 18px; z-index: 1080;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--yl-glass); backdrop-filter: blur(10px);
    border: 1px solid var(--yl-border); box-shadow: var(--yl-shadow);
    pointer-events: none;
    opacity: 0; transform: translateY(10px) scale(.9);
    transition: opacity .25s ease, transform .25s ease, border-color .25s ease;
}
.read-bubble b { font-size: .82rem; font-weight: 800; color: var(--yl-red-strong); line-height: 1; }
.read-bubble span { font-size: .52rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--yl-ink-faint); }
.read-bubble.is-visible { opacity: 1; transform: none; }
.read-bubble.is-done b { color: #0f9d58; }
.read-bubble.is-done { border-color: rgba(15, 157, 88, .4); }
@media (max-width: 575.98px) {
    .read-bubble { right: 12px; bottom: 12px; width: 46px; height: 46px; }
    .read-bubble b { font-size: .72rem; }
}
[data-mode="dark"] .read-bubble { background: rgba(23, 27, 34, .92); }
[data-mode="dark"] .read-bubble b { color: #ff6b74; }
[data-mode="dark"] .read-progress.is-done .read-progress-fill { background: linear-gradient(135deg, #12b76a, #4ade80); }
@media (prefers-reduced-motion: reduce) {
    .read-progress, .read-progress-fill, .read-bubble { transition: none; }
}

/* ============================================================
   v5.2 KATEGORİ MODÜLLERİ — kategori sayfası (/kategori/{slug})
   Kategori rengi --cm ile modüle akar; admin panelden açılıp
   kapatılabilir. Koyu mod ve hareket azaltma desteklidir.
   ============================================================ */
.cat-mods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 0 0 1.75rem;
}
.cat-mod {
    grid-column: span 1;
    background: var(--yl-card, #fff);
    border: 1px solid var(--yl-border);
    border-radius: 16px;
    padding: 1.1rem 1.15rem 1.2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.cat-mod::before {
    content: "";
    position: absolute; inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cm), transparent 78%);
    opacity: .85;
}
.cat-mod:hover { border-color: color-mix(in srgb, var(--cm) 42%, var(--yl-border)); box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--cm) 45%, transparent); transform: translateY(-2px); }
.cat-mod--wide { grid-column: span 2; }
.cat-mod__head { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .9rem; }
.cat-mod__icon {
    flex: 0 0 auto;
    width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center;
    font-size: 1.05rem; color: #fff;
    background: linear-gradient(135deg, var(--cm), color-mix(in srgb, var(--cm) 62%, #1b1f27));
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--cm) 65%, transparent);
}
.cat-mod__headtxt { flex: 1 1 auto; min-width: 0; }
.cat-mod__title { font-size: 1rem; font-weight: 800; margin: 0; letter-spacing: -.01em; color: var(--yl-ink); }
.cat-mod__desc { font-size: .74rem; color: var(--yl-ink-faint); margin: .1rem 0 0; line-height: 1.35; }
.cat-mod__body { font-size: .86rem; }
.cat-mod__empty { color: var(--yl-ink-faint); font-size: .8rem; margin: .25rem 0 0; }
.cat-mod__sample, .cat-mod__src {
    display: inline-block; margin-top: .7rem;
    font-size: .62rem; font-weight: 700; letter-spacing: .06em;
    color: var(--yl-ink-faint);
    border: 1px dashed var(--yl-border);
    border-radius: 99px; padding: .12rem .55rem;
}
.cat-mod__more { display: inline-flex; align-items: center; gap: .2rem; margin-top: .6rem; font-size: .78rem; font-weight: 700; color: var(--cm); text-decoration: none; }
.cat-mod__more:hover { text-decoration: underline; }

/* Liste / bant ortakları */
.cat-mod__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cat-mod__list li { border-bottom: 1px dashed var(--yl-border); }
.cat-mod__list li:last-child { border-bottom: 0; }
.cat-mod__list a, .cat-mod__list li { display: flex; align-items: center; gap: .55rem; padding: .42rem 0; }
.cat-mod__list a { color: inherit; text-decoration: none; }
.cat-mod__list a:hover .cat-mod__li-txt { color: var(--cm); }
.cat-mod__li-txt { flex: 1 1 auto; min-width: 0; font-size: .82rem; line-height: 1.35; }
.cat-mod__time { flex: 0 0 auto; font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--cm); }
.cat-mod__city { flex: 0 0 auto; font-size: .68rem; color: var(--yl-ink-faint); white-space: nowrap; }
.cat-mod__clock { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 800; color: var(--cm); }
.cat-mod__live-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--cm); }
.cat-mod__pulse { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: catPulse 1.2s ease-in-out infinite; }
@keyframes catPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }

/* Son dakika bandı */
.cat-mod__band {
    display: flex; align-items: center; gap: .5rem;
    margin: -.15rem 0 .5rem;
    font-size: .72rem; font-weight: 800; letter-spacing: .14em;
    color: #fff; background: var(--yl-red-strong, #e11d2e);
    border-radius: 8px; padding: .3rem .7rem;
}
.cat-mod__band .cat-mod__pulse { background: #fff; }

/* Skorlar */
.cat-scores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.cat-scores__item {
    border: 1px solid var(--yl-border); border-radius: 12px;
    padding: .55rem .7rem; display: flex; flex-direction: column; gap: .3rem;
    background: color-mix(in srgb, var(--cm) 4%, transparent);
}
.cat-scores__lig { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--yl-ink-faint); }
.cat-scores__teams { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cat-scores__team { font-size: .82rem; font-weight: 700; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-scores__team:last-of-type { text-align: right; }
.cat-scores__score {
    flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums;
    font-size: .9rem; padding: .06rem .5rem; border-radius: 8px;
    background: var(--yl-soft, rgba(15, 23, 42, .06));
}
.cat-scores__score.is-live { color: #fff; background: var(--yl-red-strong, #e11d2e); }
.cat-scores__min { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 700; color: var(--yl-ink-faint); font-variant-numeric: tabular-nums; }
.cat-scores__min.is-live { color: var(--yl-red-strong, #e11d2e); }

/* Mini tablo (puan durumu) */
.cat-table { width: 100%; font-size: .78rem; border-collapse: collapse; }
.cat-table th, .cat-table td { padding: .34rem .3rem; text-align: center; border-bottom: 1px dashed var(--yl-border); }
.cat-table th { font-size: .62rem; letter-spacing: .08em; color: var(--yl-ink-faint); text-transform: uppercase; }
.cat-table th:last-child, .cat-table td:last-child { padding-right: 0; }
.cat-table__l { text-align: left !important; font-weight: 600; }
.cat-table__pos { font-weight: 800; color: var(--yl-ink-faint); }
.cat-table__pos-1 { color: var(--cm); }
.cat-table__p { font-weight: 800; color: var(--cm); }

/* Piyasa paneli */
.cat-market { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.cat-market__item {
    display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
    border: 1px solid var(--yl-border); border-radius: 12px;
    padding: .5rem .65rem; text-decoration: none; color: inherit; position: relative;
    background: color-mix(in srgb, var(--cm) 4%, transparent);
    transition: border-color .2s ease, transform .2s ease;
}
.cat-market__item:hover { border-color: color-mix(in srgb, var(--cm) 50%, var(--yl-border)); transform: translateY(-2px); }
.cat-market__n { font-size: .64rem; font-weight: 800; letter-spacing: .06em; color: var(--yl-ink-faint); text-transform: uppercase; }
.cat-market__v { font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cat-market__c { font-size: .66rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cat-market__c.is-up { color: #0f9d58; }
.cat-market__c.is-down { color: var(--yl-red-strong, #e11d2e); }
.cat-market__pm { position: absolute; top: .35rem; right: .4rem; font-size: .55rem !important; padding: .05rem .35rem !important; }

/* İpucu / sağlık */
.cat-tip, .cat-tips li { display: flex; gap: .7rem; align-items: flex-start; }
.cat-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.cat-tips li { padding-bottom: .6rem; border-bottom: 1px dashed var(--yl-border); }
.cat-tips li:last-child { border-bottom: 0; padding-bottom: 0; }
.cat-tip__icon, .cat-tips__icon {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center; font-size: .95rem;
    color: var(--cm); background: color-mix(in srgb, var(--cm) 12%, transparent);
}
.cat-tip__cat, .cat-tips__ad { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cm); margin-bottom: .15rem; }
.cat-tip__txt, .cat-tips__txt { font-size: .8rem; line-height: 1.45; color: var(--yl-ink); }

/* Sınav takvimi */
.cat-exams { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cat-exams li { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .45rem 0; border-bottom: 1px dashed var(--yl-border); }
.cat-exams li:last-child { border-bottom: 0; }
.cat-exams__ad { display: block; font-size: .8rem; font-weight: 700; }
.cat-exams__tarih { display: block; font-size: .68rem; color: var(--yl-ink-faint); }
.cat-exams .badge { flex: 0 0 auto; font-size: .62rem; }

/* Trafik kartları */
.cat-traffic { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.cat-traffic__item { border: 1px solid var(--yl-border); border-radius: 12px; padding: .6rem .7rem; background: color-mix(in srgb, var(--cm) 4%, transparent); }
.cat-traffic__top { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .45rem; }
.cat-traffic__sehir { font-size: .78rem; font-weight: 800; }
.cat-traffic__top .badge { font-size: .58rem; }
.cat-traffic__bar { height: 6px; border-radius: 99px; background: var(--yl-soft, rgba(15, 23, 42, .08)); overflow: hidden; margin-bottom: .4rem; }
.cat-traffic__bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f59e0b, var(--yl-red-strong, #e11d2e)); transition: width .4s ease; }
.cat-traffic__not { font-size: .66rem; color: var(--yl-ink-faint); line-height: 1.35; }

/* Deprem listesi */
.cat-quakes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cat-quakes li { display: flex; align-items: center; gap: .55rem; padding: .4rem 0; border-bottom: 1px dashed var(--yl-border); }
.cat-quakes li:last-child { border-bottom: 0; }
/* Geniş modülde sarsıntı listesi 2 kolona bölünür (8 kayıt tek sırada sıkışmaz) */
.cat-mod--wide .cat-quakes { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.cat-mod--wide .cat-quakes li:nth-last-child(-n + 2) { border-bottom: 0; }
.cat-quakes__yer { flex: 1 1 auto; min-width: 0; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-quakes__s { flex: 0 0 auto; font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums; border-radius: 7px; padding: .1rem .45rem; }
.cat-quakes__d { flex: 0 0 auto; font-size: .66rem; color: var(--yl-ink-faint); font-variant-numeric: tabular-nums; }

/* Hava widget */
.cat-weather { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.cat-weather__now { display: flex; flex-direction: column; min-width: 128px; }
.cat-weather__now > i { font-size: 1.9rem; color: var(--cm); line-height: 1; margin-bottom: .25rem; }
.cat-weather__t { font-size: 1.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cat-weather__yer { font-size: .72rem; font-weight: 700; color: var(--yl-ink-faint); }
.cat-weather__det { font-size: .64rem; color: var(--yl-ink-faint); }
.cat-weather__days { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; flex: 1 1 220px; }
.cat-weather__day {
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
    border: 1px dashed var(--yl-border); border-radius: 10px; padding: .45rem .3rem;
    font-size: .68rem; font-weight: 700;
}
.cat-weather__day > i { font-size: 1.05rem; color: var(--cm); }
.cat-weather__mm { color: var(--yl-ink-faint); font-variant-numeric: tabular-nums; font-weight: 600; }

/* ===== v5.3 — MODÜL GÖRSEL İYİLEŞTİRME (oturt + zenginleştir) ===== */

/* v5.9.1: pano bandı başlığı (.cat-mods__head/title/sub/headicon) KALDIRILDI —
   ön yüzde modül alanının üzerinde hiçbir yazı yok; kartlar doğrudan akar. */

/* v5.9: MODÜL ibaresi (cat-mod__tag) ön yüzden kaldırıldı — kural silindi */

/* Modül kafası: tüm modüllerde aynı ayrım çizgisi (oturt) */
.cat-mod__head { padding-bottom: .65rem; border-bottom: 1px dashed var(--yl-border); }

/* Modül alt satırı: kaynak + ek bilgi rozetleri aynı hizada */
.cat-mod__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-top: .7rem; }
.cat-mod__foot .cat-mod__sample, .cat-mod__foot .cat-mod__src { margin-top: 0; }

/* Canlı maç sayısı rozeti */
.cat-mod__live-count {
    display: inline-flex; align-items: center; gap: .35rem; margin: .7rem 0 0 .5rem;
    font-size: .66rem; font-weight: 800; color: var(--yl-red-strong, #b7121f);
}
.cat-mod__live-count .cat-mod__pulse { background: var(--yl-red-strong, #b7121f); }

/* Puan durumu: son 5 maç formu */
.cat-table__form { white-space: nowrap; }
.cat-form-dot {
    display: inline-grid; place-items: center;
    width: 15px; height: 15px; margin-right: 2px;
    border-radius: 50%; font-style: normal;
    font-size: .52rem; font-weight: 800; line-height: 1;
}
.cat-form-dot--G { color: #fff; background: #0f9d58; }
.cat-form-dot--B { color: #6b7280; background: var(--yl-bg-soft, #efece4); box-shadow: inset 0 0 0 1px var(--yl-border-strong, #d3cec1); }
.cat-form-dot--M { color: #fff; background: var(--yl-red, #e11d2e); }
.cat-form-legend { display: flex; align-items: center; gap: .85rem; margin-top: .55rem; font-size: .64rem; color: var(--yl-ink-faint); flex-wrap: wrap; }
.cat-form-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.cat-form-legend .cat-mod__sample { margin-left: auto; }

/* Ajanda: ŞİMDİ / SIRADA rozetleri */
.cat-mod__list--agenda li.is-past { opacity: .55; }
.cat-agenda-badge {
    flex: 0 0 auto; font-size: .56rem; font-weight: 800; letter-spacing: .1em;
    border-radius: 99px; padding: .18rem .5rem;
}
.cat-agenda-badge--simdi { color: #fff; background: var(--yl-red, #e11d2e); box-shadow: 0 2px 8px -2px rgba(225, 29, 46, .5); }
.cat-agenda-badge--sirada { color: var(--cm); border: 1px solid color-mix(in srgb, var(--cm) 45%, transparent); background: color-mix(in srgb, var(--cm) 8%, transparent); }

/* Vitrin ek başlıkları */
.cat-mod__extra { margin-top: .55rem; padding-top: .45rem; border-top: 1px dashed var(--yl-border); }
.cat-mod__extra a { padding: .34rem 0; }
.cat-mod__extra .bi { font-size: .8rem; color: var(--cm); flex: 0 0 auto; }

/* Sınav takvimi geri sayımı */
.cat-exams__right { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; }
.cat-exams__gun {
    font-size: .6rem; font-weight: 800; font-variant-numeric: tabular-nums;
    color: var(--cm); border: 1px solid color-mix(in srgb, var(--cm) 40%, transparent);
    background: color-mix(in srgb, var(--cm) 8%, transparent);
    border-radius: 99px; padding: .2rem .5rem; white-space: nowrap;
}

/* Deprem: en büyük çipi */
.cat-quakes__max {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .66rem; font-weight: 800; font-variant-numeric: tabular-nums;
    color: var(--cm);
}

/* Hava: hissedilen + güneş saatleri */
.cat-weather__hisset { font-size: .7rem; font-weight: 700; color: var(--cm); }
.cat-weather__sun {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--yl-ink-faint);
}
.cat-weather__sun .bi-sunset { margin-left: .35rem; }

/* Etkinlik takvim blokları */
.cat-ev { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.cat-ev a {
    display: flex; gap: .65rem; align-items: center;
    border: 1px solid var(--yl-border); border-radius: 12px;
    padding: .5rem .6rem; text-decoration: none; color: inherit;
    background: color-mix(in srgb, var(--cm) 4%, transparent);
    transition: border-color .2s ease, transform .2s ease;
    height: 100%;
}
.cat-ev a:hover { border-color: color-mix(in srgb, var(--cm) 50%, var(--yl-border)); transform: translateY(-2px); }
.cat-ev__date {
    flex: 0 0 auto; width: 44px; border-radius: 10px; overflow: hidden;
    display: flex; flex-direction: column; text-align: center;
    border: 1px solid color-mix(in srgb, var(--cm) 35%, transparent);
}
.cat-ev__d { font-family: var(--yl-font-serif); font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--cm); background: color-mix(in srgb, var(--cm) 10%, transparent); }
.cat-ev__m { font-size: .56rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--cm); padding: .1rem 0; }
.cat-ev__txt { min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.cat-ev__title { font-size: .8rem; font-weight: 700; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cat-ev__time, .cat-ev__city { font-size: .66rem; color: var(--yl-ink-faint); display: inline-flex; align-items: center; gap: .25rem; }

/* Kategori hero bandı */
.cat-hero {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    border: 1px solid var(--yl-border);
    border-radius: 18px; padding: 1.15rem 1.25rem;
    margin-bottom: 1.5rem; position: relative; overflow: hidden;
    background:
        linear-gradient(115deg, color-mix(in srgb, var(--cm) 12%, transparent), transparent 55%),
        var(--yl-card, #fff);
    box-shadow: var(--yl-shadow-sm);
}
.cat-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--cm), transparent 80%); }
.cat-hero__chip {
    flex: 0 0 auto; width: 58px; height: 58px; border-radius: 16px;
    display: grid; place-items: center; font-size: 1.6rem; color: #fff;
    background: linear-gradient(135deg, var(--cm), color-mix(in srgb, var(--cm) 58%, #10131a));
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--cm) 70%, transparent);
}
.cat-hero__txt { flex: 1 1 240px; min-width: 0; }
.cat-hero__kicker { display: block; font-size: .62rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--cm); margin-bottom: .2rem; }
.cat-hero__title { font-family: var(--yl-font-serif); font-size: 2rem; font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: -.015em; color: var(--yl-ink); }
.cat-hero__desc { font-size: .82rem; color: var(--yl-ink-faint); margin-top: .3rem; max-width: 62ch; }
.cat-hero__meta { flex: 0 0 auto; display: flex; gap: .55rem; }
.cat-hero__stat {
    display: inline-flex; flex-direction: column; align-items: center; min-width: 78px;
    border: 1px solid var(--yl-border); border-radius: 12px; padding: .5rem .75rem;
    background: color-mix(in srgb, var(--cm) 5%, transparent);
    font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--yl-ink-faint);
}
.cat-hero__stat strong { font-family: var(--yl-font-serif); font-size: 1.25rem; font-weight: 700; color: var(--cm); line-height: 1.15; }

/* Koyu mod */
[data-mode="dark"] .cat-mod { background: var(--yl-card, #171b22); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
[data-mode="dark"] .cat-market__item, [data-mode="dark"] .cat-traffic__item, [data-mode="dark"] .cat-scores__item { background: rgba(255, 255, 255, .04); }
[data-mode="dark"] .cat-scores__score { background: rgba(255, 255, 255, .08); }
[data-mode="dark"] .cat-market__c.is-up { color: #4ade80; }
[data-mode="dark"] .cat-market__c.is-down { color: #f87171; }
[data-mode="dark"] .cat-hero { background: linear-gradient(115deg, color-mix(in srgb, var(--cm) 20%, transparent), transparent 55%), var(--yl-card, #171b22); }
[data-mode="dark"] .cat-form-dot--B { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); color: #cbd5e1; }
[data-mode="dark"] .cat-mod__live-count { color: #f87171; }
[data-mode="dark"] .cat-mod__live-count .cat-mod__pulse { background: #f87171; }
[data-mode="dark"] .cat-ev__m { color: #0e1116; }

/* Responsive */
@media (max-width: 991.98px) {
    .cat-mods { grid-template-columns: repeat(2, 1fr); }
    .cat-mod--wide { grid-column: span 2; }
    .cat-market { grid-template-columns: repeat(3, 1fr); }
    .cat-hero__title { font-size: 1.6rem; }
    .cat-ev { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 679.98px) {
    .cat-mods { grid-template-columns: 1fr; margin-bottom: 1.25rem; }
    .cat-mod--wide { grid-column: span 1; }
    .cat-scores, .cat-market, .cat-traffic { grid-template-columns: 1fr 1fr; }
    .cat-weather__days { grid-template-columns: repeat(2, 1fr); }
    .cat-mod--wide .cat-quakes { grid-template-columns: 1fr; }
    .cat-mod--wide .cat-quakes li:nth-last-child(2) { border-bottom: 1px dashed var(--yl-border); }
    .cat-ev { grid-template-columns: 1fr; }
    .cat-hero { gap: .75rem; padding: .95rem 1rem; }
    .cat-hero__chip { width: 46px; height: 46px; font-size: 1.25rem; border-radius: 13px; }
    .cat-hero__title { font-size: 1.4rem; }
    .cat-hero__meta { width: 100%; }
    .cat-hero__stat { flex: 1 1 0; }
    .cat-form-legend { gap: .6rem; }
    .cat-table__form { min-width: 82px; }
}
@media (max-width: 419.98px) {
    .cat-scores, .cat-market, .cat-traffic { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .cat-mod, .cat-mod__pulse, .cat-market__item, .cat-traffic__bar span { transition: none; animation: none; }
}

/* ============================================================
   v5.4 — BÖLÜM SAYFALARI A-Z (kendi alanına göre düzenleme)
   ============================================================ */

/* --- Bölüm hero: cat-hero ailesini paylaşır; küçük varyasyonlar --- */
.sec-hero .cat-hero__stat strong { font-variant-numeric: tabular-nums; }

/* --- Son Dakika saat çizelgesi (timeline) --- */
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 63px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: color-mix(in srgb, #dc3545 22%, var(--yl-border)); }
.tl__item { display: flex; align-items: flex-start; gap: .7rem; padding: .55rem 0; position: relative; }
.tl__time { flex: 0 0 46px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; font-size: .8rem; color: var(--yl-ink-faint); line-height: 1.7; }
.tl__dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; margin-top: .62rem; background: #fff; border: 2.5px solid color-mix(in srgb, #dc3545 55%, var(--yl-border)); position: relative; z-index: 1; }
.tl__dot--fresh { border-color: #dc3545; background: #dc3545; box-shadow: 0 0 0 4px color-mix(in srgb, #dc3545 18%, transparent); }
.tl__body { flex: 1 1 auto; min-width: 0; text-decoration: none; color: var(--yl-ink); padding: .1rem 0; }
.tl__title { display: block; font-size: .9rem; line-height: 1.35; font-weight: 700; }
.tl__meta { display: block; font-size: .72rem; color: var(--yl-ink-faint); margin-top: .1rem; }
.tl__fresh { display: inline-block; vertical-align: 2px; margin-left: .4rem; font-size: .56rem; font-weight: 900; letter-spacing: .1em; color: #fff; background: #dc3545; border-radius: 999px; padding: .14rem .5rem; }
.tl__item:hover .tl__title { color: #dc3545; }
@media (max-width: 575.98px) {
    .tl::before { left: 11px; }
    .tl__item { flex-wrap: wrap; }
    .tl__time { flex: 0 0 auto; order: 0; font-size: .72rem; padding-left: 34px; }
    .tl__dot { position: absolute; left: 6px; top: .78rem; margin: 0; order: 0; }
    .tl__body { flex: 1 1 100%; order: 1; padding-left: 34px; }
}

/* --- Etkinlik / Duyuru grup başlıkları (Bugün / Bu Hafta / İlerisi) --- */
.ev-grup { margin-bottom: 1.6rem; }
.ev-grup__head {
    display: flex; align-items: center; gap: .5rem;
    font-family: var(--yl-font-serif); font-size: 1.02rem; font-weight: 700;
    color: var(--yl-ink); margin: 0 0 .8rem;
    padding-bottom: .45rem; border-bottom: 2px dashed color-mix(in srgb, var(--yl-border), transparent 30%);
}
.ev-grup__head i { color: #f783ac; }
.ev-grup__n { font-family: var(--yl-font-sans, Inter, sans-serif); font-size: .64rem; font-weight: 800; color: var(--yl-ink-faint); background: var(--yl-border); border-radius: 999px; padding: .12rem .5rem; }
.ann-grup { margin-bottom: 1.5rem; }
.ann-grup .ev-grup__head i { color: #20c997; }

/* --- Etkinlik kartı: takvim bloğu yerleşimi --- */
.is-evcard { display: flex; gap: .8rem; align-items: flex-start; }
.is-evcard .cat-ev__date { margin-top: .1rem; }

/* --- Olay dosyası kartı --- */
.inc-card { transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.inc-card:hover { border-color: color-mix(in srgb, #fd7e14 55%, var(--yl-border)); transform: translateY(-2px); box-shadow: var(--yl-shadow-sm); }

/* --- Canlı Gündem trend sıraları --- */
.trend-rank {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 8px;
    display: grid; place-items: center; font-size: .68rem; font-weight: 800;
    color: var(--yl-ink-faint); background: color-mix(in srgb, #dc3545 10%, transparent);
}
.trend-rank + * + * { min-width: 0; }

/* --- Shorts üst bandı (overlay) --- */
.shorts-topbar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 30;
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .55rem 1rem;
    background: linear-gradient(180deg, rgba(10, 12, 16, .72), transparent);
    color: #fff; pointer-events: none;
}
.shorts-topbar a, .shorts-topbar button { pointer-events: auto; }
.shorts-topbar__chip { font-size: .56rem; font-weight: 900; letter-spacing: .18em; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; padding: .2rem .55rem; }
.shorts-topbar__title { font-family: var(--yl-font-serif); font-size: 1.05rem; font-weight: 600; margin: 0; }
.shorts-topbar__meta { font-size: .68rem; opacity: .85; }
.shorts-topbar__cta {
    margin-left: auto; font-size: .7rem; font-weight: 800; color: #fff; text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: .3rem .75rem;
    background: rgba(255, 255, 255, .1); backdrop-filter: blur(6px);
}
.shorts-topbar__cta:hover { background: rgba(255, 255, 255, .22); color: #fff; }

/* --- Koyu mod --- */
[data-mode="dark"] .tl::before { background: color-mix(in srgb, #dc3545 30%, rgba(255, 255, 255, .12)); }
[data-mode="dark"] .tl__dot { background: #171b22; }
[data-mode="dark"] .tl__body { color: #e7eaf0; }
[data-mode="dark"] .ev-grup__head { color: #e7eaf0; }
[data-mode="dark"] .ev-grup__n { background: rgba(255, 255, 255, .1); color: #cbd5e1; }
[data-mode="dark"] .trend-rank { background: color-mix(in srgb, #dc3545 22%, transparent); color: #f1f3f7; }

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .shorts-topbar__meta { display: none; }
}

/* ==================================================================
   v5.5 — TÜM SAYFALAR AURORA: detay / profil / arama / kurumsal oturtma
   sec-hero ailesi (cat-hero) artık olay + etkinlik + duyuru + şehir +
   ilçe + arama + kurumsal sayfalarda; aşağıdaki blok yeni bileşenler.
   ================================================================== */

/* --- 1. Haber detayı: başlık bandı --- */
.article-title { font-family: var(--yl-font-serif); font-size: 2.15rem; font-weight: 600; line-height: 1.14; letter-spacing: -.018em; color: var(--yl-ink); }
.article-cat {
    display: inline-flex; align-items: center; gap: .25rem; text-decoration: none;
    font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--cm, var(--yl-brand)); background: color-mix(in srgb, var(--cm, var(--yl-brand)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--cm, var(--yl-brand)) 30%, transparent);
    border-radius: 999px; padding: .3rem .7rem; transition: background .15s ease;
}
.article-cat:hover { background: color-mix(in srgb, var(--cm, var(--yl-brand)) 22%, transparent); color: var(--cm, var(--yl-brand)); }
.article-cat i { font-size: .6rem; }
.news-spot { font-size: 1.05rem; line-height: 1.55; color: var(--yl-ink-soft); }
.news-meta {
    border: 0 !important; border-radius: var(--yl-radius); background: var(--yl-bg-soft);
    padding: .6rem .85rem !important; flex-wrap: wrap; row-gap: .35rem;
}
.news-meta > span { display: inline-flex; align-items: center; gap: .3rem; }
.news-author-av { font-family: var(--yl-font-serif); }
@media (max-width: 767.98px) {
    .article-title { font-size: 1.62rem; }
    .news-meta .read-tools { margin-left: 0 !important; }
}

/* --- 2. Etkinlik: geri sayım şeridi --- */
.ev-count {
    display: inline-flex; align-items: center; gap: .55rem; margin-bottom: .8rem;
    background: linear-gradient(115deg, color-mix(in srgb, #6f42c1 16%, transparent), transparent 60%), var(--yl-bg-soft);
    border: 1px solid var(--yl-border); border-radius: var(--yl-radius);
    padding: .55rem .95rem; font-size: .85rem; color: var(--yl-ink-soft);
}
.ev-count i { color: #6f42c1; font-size: 1.05rem; }
.ev-count__val { font-family: var(--yl-font-serif); font-weight: 700; font-size: 1.02rem; color: var(--yl-ink); font-variant-numeric: tabular-nums; }
.ev-count__lbl { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--yl-ink-faint); }

/* --- 3. Kurumsal içerik kartı (sayfa + duyuru + etkinlik gövdesi) --- */
.prose-card {
    background: var(--yl-bg-elev, var(--yl-card, #fff)); border: 1px solid var(--yl-border);
    border-radius: var(--yl-radius); padding: 1.35rem 1.5rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.prose-card .news-content > p:first-child::first-letter {
    font-family: var(--yl-font-serif); font-size: 2.1rem; font-weight: 600;
    line-height: 1; padding-right: .4rem; color: var(--yl-brand);
}
.an-org { border: 1px solid var(--yl-border); }
.an-org__av {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px; font-size: .95rem;
    background: color-mix(in srgb, #0d6efd 12%, transparent); color: #0d6efd;
}
.ev-meta { border: 1px solid var(--yl-border); }

/* --- 4. Muhabir profili --- */
.jrnl-hero__av {
    font-family: var(--yl-font-serif); font-weight: 700; font-size: 1.7rem;
    color: var(--cm); background: color-mix(in srgb, var(--cm) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--cm) 35%, transparent);
}
.jrnl-stats .table td { border-color: var(--yl-border); padding: .42rem .35rem; }
.jrnl-stats .section-title { color: var(--yl-ink); }

/* --- 5. Arama filtre paneli --- */
.f-panel { border: 1px solid var(--yl-border); }
.f-panel .form-check { align-self: center; margin-bottom: 0; }

/* --- 6. Olay dosyası: resmî nokta --- */
.tl__dot--official { background: #198754; box-shadow: 0 0 0 3px color-mix(in srgb, #198754 22%, transparent); }
.tl__meta { display: block; font-size: .78rem; color: var(--yl-ink-faint); }

/* --- 7. Auth: AURORA kimlik cilası --- */
.auth-card { position: relative; }
.auth-card::after {
    content: ""; position: absolute; inset: auto 0 -1px 0; height: 3px; border-radius: 999px;
    background: linear-gradient(90deg, var(--yl-brand), var(--yl-red), transparent 85%);
    pointer-events: none;
}
[data-mode="dark"] .auth-card { border-color: #2a3242; background: #171b22; }

/* --- 8. Koyu mod uyumları --- */
[data-mode="dark"] .article-title { color: #f1f3f7; }
[data-mode="dark"] .news-spot { color: #b8c0cd; }
[data-mode="dark"] .news-meta { background: #1b2029; }
[data-mode="dark"] .ev-count { background: linear-gradient(115deg, color-mix(in srgb, #6f42c1 22%, transparent), transparent 60%), #1b2029; border-color: #2a3242; }
[data-mode="dark"] .ev-count__val { color: #e7eaf0; }
[data-mode="dark"] .prose-card { background: #171b22; border-color: #2a3242; box-shadow: none; }
[data-mode="dark"] .prose-card .news-content > p:first-child::first-letter { color: #6ea8fe; }
[data-mode="dark"] .an-org { border-color: #2a3242; background: #1b2029 !important; }
[data-mode="dark"] .an-org__av { background: color-mix(in srgb, #6ea8fe 18%, transparent); color: #6ea8fe; }
[data-mode="dark"] .ev-meta { border-color: #2a3242; background: #1b2029 !important; }
[data-mode="dark"] .f-panel { border-color: #2a3242; background: #1b2029 !important; }
[data-mode="dark"] .jrnl-stats .table { --bs-table-color: #dfe3ea; }

/* --- 9. Responsive --- */
@media (max-width: 575.98px) {
    .prose-card { padding: 1rem 1.05rem; }
    .jrnl-hero .cat-hero__meta { flex-wrap: wrap; row-gap: .5rem; }
    .ev-count { padding: .45rem .7rem; }
}

/* ==========================================================================
   v5.6 — KATEGORİ SAYFALARI BÖLÜM BÖLÜM (son-dakika → tüm kategoriler)
   cat-hero canlı rozeti · cat-lead öne çıkanlar · cat-timeline dakika akışı ·
   cat-side yan panel (son dakika / en çok okunan / etiketler / kategoriler)
   ========================================================================== */
.cat-hero--live { border-color: color-mix(in srgb, var(--cm) 42%, transparent); }
.cat-hero__live {
    display: inline-flex; align-items: center; gap: .35rem; vertical-align: middle;
    margin-inline-start: .5rem; padding: .18rem .55rem; border-radius: 999px;
    font-family: var(--yl-font-sans); font-size: .6rem; font-weight: 800; letter-spacing: .16em;
    color: #fff; background: linear-gradient(120deg, #d7263d, #b7121f);
    box-shadow: 0 2px 10px rgba(183, 18, 31, .35);
}
.cat-hero__live .cat-mod__pulse { background: #fff; width: 6px; height: 6px; }
.cat-hero__stat--today strong { color: var(--yl-ink); }
.cat-hero__stat--today { border-style: dashed; }

/* --- BÖLÜM: ÖNE ÇIKANLAR (cat-lead) --- */
.cat-lead { margin-top: 1.15rem; }
.cat-lead__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .8rem; }
.cat-lead__label {
    display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
    font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
    color: var(--cm, var(--yl-brand)); padding: .28rem .6rem; border-radius: 999px;
    background: color-mix(in srgb, var(--cm, var(--yl-brand)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--cm, var(--yl-brand)) 28%, transparent);
}
.cat-lead__label i { font-size: .8rem; }
.cat-lead__rule { flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--cm, var(--yl-brand)) 35%, transparent), transparent); }
.cat-lead .news-card-lg .news-card-title { font-size: 1.3rem; line-height: 1.25; }

/* --- BÖLÜM: DAKİKA AKIŞI (cat-timeline) --- */
.cat-timeline { margin-top: 1.15rem; position: relative; }
.cat-tl__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .85rem; }
.cat-tl__label {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
    color: var(--yl-red-strong, #b7121f); padding: .28rem .6rem; border-radius: 999px;
    background: color-mix(in srgb, var(--yl-red-strong, #b7121f) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--yl-red-strong, #b7121f) 26%, transparent);
}
.cat-tl__count { font-size: .7rem; color: var(--yl-ink-faint); font-variant-numeric: tabular-nums; }
.cat-tl__hourgroup { display: flex; align-items: center; gap: .6rem; margin: .95rem 0 .35rem; }
.cat-tl__bubble {
    font-family: var(--yl-font-serif); font-weight: 700; font-size: .8rem; color: #fff;
    background: var(--cm, var(--yl-brand)); padding: .2rem .6rem; border-radius: 999px;
    font-variant-numeric: tabular-nums; box-shadow: 0 2px 8px color-mix(in srgb, var(--cm, var(--yl-brand)) 35%, transparent);
}
.cat-tl__rail { flex: 1; height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--cm, var(--yl-brand)) 45%, transparent), transparent); border-radius: 2px; }
.cat-tl__item { display: flex; gap: .7rem; padding: .6rem .35rem .6rem .2rem; border-bottom: 1px dashed color-mix(in srgb, var(--yl-ink) 12%, transparent); position: relative; }
.cat-tl__item:last-child { border-bottom: 0; }
.cat-tl__dot {
    flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; margin-top: .42rem;
    background: color-mix(in srgb, var(--cm, var(--yl-brand)) 65%, var(--yl-ink) 10%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cm, var(--yl-brand)) 18%, transparent);
}
.cat-tl__dot--live { background: #d7263d; box-shadow: 0 0 0 3px rgba(215, 38, 61, .18); color: #d7263d; display: grid; place-items: center; font-size: .5rem; }
.cat-tl__time { flex: 0 0 3.1rem; font-weight: 700; font-size: .78rem; color: var(--cm, var(--yl-brand)); font-variant-numeric: tabular-nums; padding-top: .18rem; }
.cat-tl__txt { min-width: 0; }
.cat-tl__link { display: block; color: var(--yl-ink); text-decoration: none; font-weight: 600; font-size: .93rem; line-height: 1.35; }
.cat-tl__link:hover { color: var(--cm, var(--yl-brand)); text-decoration: underline; }
.cat-tl__item.is-breaking .cat-tl__link { font-weight: 800; }
.cat-tl__item.is-breaking { background: linear-gradient(90deg, rgba(215, 38, 61, .05), transparent 70%); border-radius: 8px; }
.cat-tl__meta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .22rem; font-size: .72rem; color: var(--yl-ink-faint); }
.cat-tl__meta i { margin-inline-end: .15rem; }
.cat-tl__brk { color: #d7263d; font-weight: 800; letter-spacing: .08em; font-size: .62rem; }
.cat-tl__ago { margin-inline-start: auto; font-variant-numeric: tabular-nums; }

/* --- BÖLÜM: YAN PANEL (cat-side) --- */
.cat-side { display: flex; flex-direction: column; gap: 1rem; }
.cat-side__w { box-shadow: var(--yl-shadow-sm, 0 1px 3px rgba(0, 0, 0, .06)); }
.cat-side__h {
    display: flex; align-items: center; gap: .45rem;
    font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--yl-ink); margin-bottom: .6rem;
}
.cat-side__h i { color: var(--cm, var(--yl-brand)); font-size: .95rem; }
.cat-side__w:first-child .cat-side__h i { color: var(--yl-red-strong, #b7121f); }
.cat-side__most { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.cat-side__most li { padding: .45rem 0; border-bottom: 1px dashed color-mix(in srgb, var(--yl-ink) 12%, transparent); }
.cat-side__most li:last-child { border-bottom: 0; }
.cat-side__mostlink { display: flex; gap: .6rem; align-items: flex-start; text-decoration: none; }
.cat-side__mostno {
    flex: 0 0 auto; font-family: var(--yl-font-serif); font-weight: 700; font-size: 1rem;
    color: transparent; -webkit-text-stroke: 1.2px var(--cm, var(--yl-brand)); line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.cat-side__mostlink:hover .cat-side__mostno { color: var(--cm, var(--yl-brand)); }
.cat-side__mosttxt { color: var(--yl-ink); font-size: .82rem; font-weight: 600; line-height: 1.35; }
.cat-side__mostlink:hover .cat-side__mosttxt { color: var(--cm, var(--yl-brand)); }
.cat-side__mostview { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; color: var(--yl-ink-faint); margin-top: .18rem; padding-inline-start: calc(1rem + .6rem); }
.cat-side__tags, .cat-side__cats { display: flex; flex-wrap: wrap; gap: .4rem; }
.cat-side__tag {
    font-size: .72rem; font-weight: 600; text-decoration: none; color: var(--yl-ink);
    padding: .25rem .6rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--yl-ink) 16%, transparent);
    background: color-mix(in srgb, var(--yl-ink) 4%, transparent);
}
.cat-side__tag:hover { color: var(--yl-brand); border-color: var(--yl-brand); }
.cat-side__cat {
    display: inline-flex; align-items: center; gap: .35rem; text-decoration: none;
    font-size: .72rem; font-weight: 700; color: var(--yl-ink);
    padding: .28rem .62rem; border-radius: 999px;
    background: color-mix(in srgb, var(--cc, var(--yl-brand)) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--cc, var(--yl-brand)) 30%, transparent);
}
.cat-side__cat i { color: var(--cc, var(--yl-brand)); }
.cat-side__cat:hover { background: color-mix(in srgb, var(--cc, var(--yl-brand)) 22%, transparent); color: var(--yl-ink); }

/* koyu mod */
[data-mode="dark"] .cat-hero__live { background: linear-gradient(120deg, #ef4444, #b91c1c); }
[data-mode="dark"] .cat-tl__item.is-breaking { background: linear-gradient(90deg, rgba(239, 68, 68, .1), transparent 70%); }
[data-mode="dark"] .cat-tl__link { color: var(--yl-ink); }
[data-mode="dark"] .cat-tl__bubble { color: #0b0d10; }
[data-mode="dark"] .cat-side__mostno { -webkit-text-stroke-color: var(--cm, #6ea8fe); }
[data-mode="dark"] .cat-side__tag { border-color: color-mix(in srgb, #fff 18%, transparent); background: color-mix(in srgb, #fff 6%, transparent); color: var(--yl-ink); }
[data-mode="dark"] .cat-side__cat { color: var(--yl-ink); }

/* responsive */
@media (max-width: 767.98px) {
    .cat-lead .news-card-lg .news-card-title { font-size: 1.1rem; }
    .cat-tl__time { flex-basis: 2.6rem; font-size: .72rem; }
    .cat-tl__link { font-size: .88rem; }
    .cat-tl__meta { gap: .55rem; font-size: .68rem; }
    .cat-tl__ago { display: none; }
}
@media (max-width: 575.98px) {
    .cat-lead__head { margin-bottom: .6rem; }
    .cat-tl__bubble { font-size: .72rem; padding: .16rem .5rem; }
    .cat-side__mostview { padding-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cat-hero__live .cat-mod__pulse, .cat-tl__label .cat-mod__pulse { animation: none; }
}

/* ============================================================
   v5.7 — DEPREM KATEGORİSİ A-Z (son-depremler filtreli liste,
   Büyüklük Dağılımı, Sismik Harita, Güvenlik Rehberi, hero stat)
   ============================================================ */

/* --- Hero: sismik stat'lar + son sarsıntı şeridi --- */
.cat-hero__stat--q24 strong, .cat-hero__stat--qmax strong { color: var(--cm, #dc3545); }
.qk-lastbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .6rem;
    margin-top: .75rem; padding: .55rem .8rem;
    background: color-mix(in srgb, var(--cm, #dc3545) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--cm, #dc3545) 24%, transparent);
    border-inline-start: 3px solid var(--cm, #dc3545);
    border-radius: 10px;
}
.qk-lastbar__pulse { display: inline-flex; align-items: center; }
.qk-lastbar__ad { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--cm, #dc3545); }
.qk-lastbar__yer { font-size: .82rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qk-lastbar__m { font-size: .7rem; font-weight: 800; color: #fff; background: #d6001c; border-radius: 7px; padding: .1rem .45rem; }
.qk-lastbar__ago { margin-inline-start: auto; font-size: .72rem; color: var(--yl-ink-faint, #6b7280); font-variant-numeric: tabular-nums; }

/* --- Filtre çipleri --- */
.qk-filters { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: .65rem; }
.qk-filter {
    border: 1px solid var(--yl-border, #e5e7eb); background: transparent; color: inherit;
    font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .18rem .7rem;
    transition: background .15s, color .15s, border-color .15s;
}
.qk-filter:hover { border-color: var(--cm, #dc3545); color: var(--cm, #dc3545); }
.qk-filter.active { background: var(--cm, #dc3545); border-color: var(--cm, #dc3545); color: #fff; }
.qk-filters__info { margin-inline-start: auto; font-size: .7rem; color: var(--yl-ink-faint, #6b7280); display: inline-flex; align-items: center; gap: .3rem; }
.qk-filter-empty { margin: .5rem 0 0; }
.cat-quakes li[hidden], .cat-quakes li[style*="display: none"] { display: none !important; }

/* --- Relatif zaman + derinlik rozetleri --- */
.cat-quakes__ago { flex: 0 0 auto; font-size: .66rem; color: var(--yl-ink-faint, #6b7280); font-variant-numeric: tabular-nums; }
.cat-quakes__depth { flex: 0 0 auto; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-radius: 6px; padding: .08rem .38rem; border: 1px solid transparent; }
.cat-quakes__depth--sig { color: #0a7a5c; background: rgba(16, 163, 127, .12); border-color: rgba(16, 163, 127, .3); }
.cat-quakes__depth--orta { color: #9a6700; background: rgba(232, 162, 0, .12); border-color: rgba(232, 162, 0, .32); }
.cat-quakes__depth--derin { color: #6c47ff; background: rgba(108, 71, 255, .1); border-color: rgba(108, 71, 255, .3); }

/* --- Büyüklük Dağılımı (bant barları) --- */
.qk-atisa__head { font-size: .76rem; color: var(--yl-ink-faint, #6b7280); margin-bottom: .6rem; }
.qk-atisa__head strong { color: var(--cm, #dc3545); }
.qk-atisa__row { display: grid; grid-template-columns: 5.6rem 1fr 2rem 2.6rem 5.4rem; align-items: center; gap: .55rem; padding: .3rem 0; }
.qk-atisa__row + .qk-atisa__row { border-top: 1px dashed var(--yl-border, #e5e7eb); }
.qk-atisa__ad { font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qk-atisa__bar { display: block; height: .55rem; border-radius: 999px; background: rgba(107, 114, 128, .12); overflow: hidden; }
.qk-atisa__bar span { display: block; height: 100%; border-radius: inherit; transition: width .5s ease; }
.qk-atisa__bar.bi-red span { background: #d6001c; }
.qk-atisa__bar.bi-amber span { background: #e8a200; }
.qk-atisa__bar.bi-blue span { background: #0b3b8c; }
.qk-atisa__bar.bi-slate span { background: #5f7185; }
.qk-atisa__bar.bi-mute span { background: #9ca3af; }
.qk-atisa__n { font-size: .78rem; font-weight: 800; text-align: end; font-variant-numeric: tabular-nums; }
.qk-atisa__pct { font-size: .66rem; color: var(--yl-ink-faint, #6b7280); font-variant-numeric: tabular-nums; }
.qk-atisa__max { font-size: .64rem; color: var(--yl-ink-faint, #6b7280); white-space: nowrap; text-align: end; }
.qk-atisa__row--top .qk-atisa__n { color: var(--cm, #dc3545); }
.qk-atisa__row--top .qk-atisa__ad::after { content: " Yoğun"; font-size: .58rem; font-weight: 800; color: var(--cm, #dc3545); margin-inline-start: .3rem; }

/* --- Sismik Harita --- */
.qk-map { height: 300px; border-radius: 12px; overflow: hidden; border: 1px solid var(--yl-border, #e5e7eb); background: var(--yl-surface, #f3f4f6); z-index: 1; }
.qk-map__note { margin-top: .5rem; font-size: .72rem; color: var(--yl-ink-faint, #6b7280); display: flex; align-items: center; gap: .35rem; }

/* --- Güvenlik Rehberi --- */
.qk-guvende__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.qk-guvende { border: 1px solid var(--yl-border, #e5e7eb); border-radius: 12px; padding: .8rem .9rem; background: var(--yl-surface-soft, #fafafa); }
.qk-guvende--success { border-inline-start: 3px solid #198754; }
.qk-guvende--danger { border-inline-start: 3px solid #d6001c; }
.qk-guvende--primary { border-inline-start: 3px solid #0b3b8c; }
.qk-guvende__head { display: flex; align-items: center; gap: .45rem; font-size: .82rem; margin-bottom: .5rem; }
.qk-guvende__head i { font-size: 1rem; }
.qk-guvende--success .qk-guvende__head i { color: #198754; }
.qk-guvende--danger .qk-guvende__head i { color: #d6001c; }
.qk-guvende--primary .qk-guvende__head i { color: #0b3b8c; }
.qk-guvende__list { margin: 0; padding-inline-start: 1.1rem; }
.qk-guvende__list li { font-size: .74rem; line-height: 1.5; padding: .14rem 0; }
.qk-guvende__foot { margin-top: .8rem; }
.qk-tels { display: flex; flex-wrap: wrap; gap: .4rem; }
.qk-tel { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; border: 1px solid var(--yl-border, #e5e7eb); border-radius: 999px; padding: .2rem .65rem; background: var(--yl-surface, #fff); }
.qk-tel strong { font-size: .78rem; }
.qk-tel i { color: #d6001c; }
.qk-canta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .55rem; }
.qk-canta__ad { font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; gap: .3rem; margin-inline-end: .2rem; }
.qk-canta__c { font-size: .66rem; color: var(--yl-ink-faint, #6b7280); border: 1px dashed var(--yl-border, #e5e7eb); border-radius: 999px; padding: .1rem .5rem; }

/* --- Yan panel: Güçlü Sarsıntılar --- */
.cat-side__note { font-size: .68rem; color: var(--yl-ink-faint, #6b7280); margin-bottom: .5rem; }
.cat-side__quakes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.cat-side__quakes li { display: flex; align-items: flex-start; gap: .55rem; }
.cat-side__qm { flex: 0 0 auto; font-size: .68rem; font-weight: 800; border-radius: 7px; padding: .12rem .45rem; }
.cat-side__qtxt { min-width: 0; font-size: .78rem; line-height: 1.35; }
.cat-side__qtxt strong { font-size: .78rem; }
.cat-side__qtxt small { color: var(--yl-ink-faint, #6b7280); font-size: .68rem; }

/* --- Koyu mod --- */
[data-mode="dark"] .qk-lastbar { background: rgba(214, 0, 28, .1); }
[data-mode="dark"] .cat-quakes__depth--sig { color: #4fd1b5; background: rgba(16, 163, 127, .16); }
[data-mode="dark"] .cat-quakes__depth--orta { color: #ffd166; background: rgba(232, 162, 0, .16); }
[data-mode="dark"] .cat-quakes__depth--derin { color: #b3a0ff; background: rgba(108, 71, 255, .16); }
[data-mode="dark"] .qk-filter { border-color: rgba(255, 255, 255, .16); }
[data-mode="dark"] .qk-atisa__bar { background: rgba(255, 255, 255, .1); }
[data-mode="dark"] .qk-guvende { background: rgba(255, 255, 255, .04); }
[data-mode="dark"] .qk-tel, [data-mode="dark"] .qk-canta__c { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); }

/* --- Responsive --- */
@media (max-width: 767.98px) {
    .qk-atisa__row { grid-template-columns: 5.2rem 1fr 1.8rem 2.4rem; }
    .qk-atisa__max { display: none; }
    .qk-guvende__grid { grid-template-columns: 1fr; }
    .qk-map { height: 240px; }
}
@media (max-width: 575.98px) {
    .qk-lastbar__ago { margin-inline-start: 0; width: 100%; }
    .qk-atisa__row { grid-template-columns: 4.6rem 1fr 1.6rem; }
    .qk-atisa__pct { display: none; }
    .qk-filters__info { margin-inline-start: 0; width: 100%; }
}

/* --- v5.7 düzeltme: deprem modülleri tam genişlik (span2 boş kolon bırakıyordu);
       bu data-key'ler yalnız deprem kategorisinde render olur, diğer sayfalar etkilenmez --- */
[data-cat-mod="son-depremler"], [data-cat-mod="deprem-atisa"],
[data-cat-mod="deprem-harita"], [data-cat-mod="deprem-guvende"] { grid-column: 1 / -1; }

/* ==================================================================
   v5.8 — SIRALI KATEGORİ TURU II (ekonomi → spor → son-dakika → gündem →
   politika → teknoloji → sağlık → eğitim → yaşam → kültür → çevre)
   11 yeni modül bileşeni + hero stat'ları + yan panel piyasa özeti.
   ================================================================== */

/* --- v5.8: yeni geniş modüller tam genişlik (span2 boş kolon bırakmasın) --- */
[data-cat-mod="ekonomi-doviz"], [data-cat-mod="spor-fikstur"],
[data-cat-mod="gundem-trend"], [data-cat-mod="saglik-nobetci"] { grid-column: 1 / -1; }

/* --- EKONOMİ: Döviz & Altın Tablosu --- */
.ek-fx { display: flex; flex-direction: column; }
.ek-fx__head, .ek-fx__row {
    display: grid; grid-template-columns: 64px 1fr 110px 132px; gap: .6rem; align-items: center;
    padding: .5rem .6rem;
}
.ek-fx__head { font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--yl-ink-faint); border-bottom: 1px dashed color-mix(in srgb, var(--cm, #0d6efd) 45%, transparent); }
.ek-fx__row + .ek-fx__row { border-top: 1px solid color-mix(in srgb, var(--yl-border) 70%, transparent); }
.ek-fx__k {
    display: inline-grid; place-items: center; min-width: 0;
    font-size: .66rem; font-weight: 900; letter-spacing: .04em;
    color: var(--cm, #0d6efd); background: color-mix(in srgb, var(--cm, #0d6efd) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--cm, #0d6efd) 26%, transparent);
    border-radius: 8px; padding: .18rem .3rem;
}
.ek-fx__l { font-weight: 700; font-size: .82rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-fx__v { font-variant-numeric: tabular-nums; font-weight: 800; text-align: right; font-size: .84rem; }
.ek-fx__c { display: flex; align-items: center; justify-content: flex-end; gap: .3rem; }
.ek-fx__c b { font-weight: 800; font-size: .74rem; white-space: nowrap; }
.ek-fx__c .is-up { color: var(--yl-green, #198754); }
.ek-fx__c .is-down { color: var(--yl-red, #dc3545); }
.ek-fx__pm { position: static; }

/* --- EKONOMİ: Kur Çevirici --- */
.ek-calc { border: 1px dashed color-mix(in srgb, var(--cm, #0d6efd) 40%, transparent); border-radius: 14px; padding: .9rem; background: color-mix(in srgb, var(--cm, #0d6efd) 4%, transparent); }
.ek-calc__row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.ek-calc__lab { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--yl-ink-faint); }
.ek-calc__in {
    width: 130px; border: 1px solid var(--yl-border); border-radius: 10px; padding: .42rem .6rem;
    font-weight: 800; font-size: .95rem; background: var(--yl-card, #fff); color: var(--yl-ink);
}
.ek-calc__in:focus { outline: none; border-color: var(--cm, #0d6efd); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cm, #0d6efd) 18%, transparent); }
.ek-calc__sel {
    border: 1px solid color-mix(in srgb, var(--cm, #0d6efd) 34%, transparent); border-radius: 10px;
    padding: .42rem .5rem; font-weight: 800; font-size: .82rem; background: var(--yl-card, #fff); color: var(--yl-ink);
}
.ek-calc__sel:focus { outline: none; border-color: var(--cm, #0d6efd); }
.ek-calc__sonuc { margin-top: .7rem; display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.ek-calc__tl { font-family: var(--yl-font-serif); font-size: 1.65rem; font-weight: 700; color: var(--cm, #0d6efd); letter-spacing: -.01em; }
.ek-calc__not { font-size: .7rem; color: var(--yl-ink-faint); }

/* --- SPOR: Haftanın Fikstürü --- */
.sp-fxst { display: flex; flex-direction: column; }
.sp-fxst__gun {
    display: flex; align-items: center; gap: .4rem;
    font-size: .66rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
    color: var(--cm, #0d6efd); margin: .65rem 0 .2rem;
}
.sp-fxst__row {
    display: grid; grid-template-columns: 52px 1fr auto; gap: .6rem; align-items: center;
    padding: .5rem .2rem; border-bottom: 1px solid color-mix(in srgb, var(--yl-border) 70%, transparent);
}
.sp-fxst__saat { font-variant-numeric: tabular-nums; font-weight: 800; font-size: .8rem; color: var(--yl-ink-faint); }
.sp-fxst__mac { font-size: .86rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-fxst__mac em { font-style: normal; font-size: .7rem; color: var(--yl-ink-faint); padding: 0 .25rem; }
.sp-fxst__lig { font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--yl-ink-faint); background: color-mix(in srgb, var(--yl-border) 45%, transparent); border-radius: 999px; padding: .18rem .5rem; white-space: nowrap; }

/* --- SPOR: Gol Krallığı --- */
.sp-gol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.sp-gol li { display: grid; grid-template-columns: 26px 1fr 120px 34px; gap: .55rem; align-items: center; }
.sp-gol__no {
    display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
    font-size: .7rem; font-weight: 900; color: var(--yl-ink-faint);
    background: color-mix(in srgb, var(--cm, #0d6efd) 10%, transparent);
}
.sp-gol li:first-child .sp-gol__no { color: #fff; background: linear-gradient(135deg, #d4a017, #f2c94c); }
.sp-gol__ad { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.sp-gol__ad strong { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-gol__ad small { font-size: .66rem; color: var(--yl-ink-faint); }
.sp-gol__bar { height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--yl-border) 55%, transparent); overflow: hidden; }
.sp-gol__bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--cm, #0d6efd) 55%, transparent), var(--cm, #0d6efd)); transition: width .5s ease; }
.sp-gol__n { font-variant-numeric: tabular-nums; font-weight: 900; font-size: .88rem; text-align: right; }

/* --- GÜNDEM: Şu Anda Gündemde (trend sıralaması) --- */
.cat-trend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cat-trend__item { display: flex; align-items: center; gap: .6rem; padding: .48rem .2rem; }
.cat-trend__item + .cat-trend__item { border-top: 1px solid color-mix(in srgb, var(--yl-border) 70%, transparent); }
.cat-trend__rank {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center;
    font-size: .72rem; font-weight: 900; color: var(--yl-ink-faint);
    background: color-mix(in srgb, #dc3545 10%, transparent);
}
.cat-trend__item:nth-child(-n+3) .cat-trend__rank { color: #fff; background: var(--yl-grad-red, linear-gradient(135deg, #d6001c, #ff6a3d)); }
.cat-trend__txt { min-width: 0; flex: 1; font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--yl-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-trend__txt:hover { color: var(--cm, #0d6efd); }
.cat-trend__skor { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: .68rem; font-weight: 800; color: var(--yl-ink-faint); background: color-mix(in srgb, var(--yl-border) 40%, transparent); border-radius: 999px; padding: .14rem .45rem; }

/* --- POLİTİKA: Haftalık Anket --- */
.pl-anket { display: flex; flex-direction: column; gap: .5rem; }
.pl-anket__row { display: grid; grid-template-columns: 92px 1fr 52px; gap: .55rem; align-items: center; }
.pl-anket__ad { font-size: .78rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-anket__bar { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--yl-border) 55%, transparent); overflow: hidden; }
.pl-anket__bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--cm, #0d6efd) 60%, transparent), var(--cm, #0d6efd)); }
.pl-anket__row:first-child .pl-anket__bar span { background: var(--yl-grad-red, linear-gradient(135deg, #d6001c, #ff6a3d)); }
.pl-anket__pct { font-variant-numeric: tabular-nums; font-weight: 900; font-size: .8rem; text-align: right; }
.pl-anket__kararsiz { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--yl-ink-faint); border-top: 1px dashed var(--yl-border); padding-top: .5rem; margin-top: .15rem; }

/* --- TEKNOLOJİ: Haftanın Uygulamaları --- */
.tp-app { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.tp-app__c { display: flex; align-items: center; gap: .6rem; border: 1px solid color-mix(in srgb, var(--yl-border) 80%, transparent); border-radius: 12px; padding: .55rem .65rem; transition: border-color .15s ease, transform .15s ease; }
.tp-app__c:hover { border-color: color-mix(in srgb, var(--cm, #0d6efd) 55%, transparent); transform: translateY(-1px); }
.tp-app__ik { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; font-size: 1.05rem; color: var(--cm, #0d6efd); background: color-mix(in srgb, var(--cm, #0d6efd) 10%, transparent); }
.tp-app__tx { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.tp-app__tx strong { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-app__tx small { font-size: .66rem; color: var(--yl-ink-faint); }
.tp-app__puan { margin-inline-start: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: .22rem; font-variant-numeric: tabular-nums; font-size: .72rem; font-weight: 900; color: #b58500; }
.tp-app__puan i { font-size: .6rem; }

/* --- SAĞLIK: Nöbetçi Eczaneler --- */
.sg-nobet { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.sg-nobet__c { border: 1px solid color-mix(in srgb, var(--yl-border) 80%, transparent); border-radius: 12px; padding: .6rem .7rem; }
.sg-nobet__top { display: flex; align-items: center; gap: .4rem; justify-content: space-between; }
.sg-nobet__top strong { font-size: .8rem; }
.sg-nobet__sehir { font-size: .6rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--cm, #0d6efd); background: color-mix(in srgb, var(--cm, #0d6efd) 10%, transparent); border-radius: 999px; padding: .16rem .45rem; }
.sg-nobet__ad { font-size: .7rem; color: var(--yl-ink-faint); margin: .3rem 0 .35rem; }
.sg-nobet__tel { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 800; text-decoration: none; color: var(--cm, #0d6efd); }
.sg-nobet__tel:hover { color: var(--cm, #0d6efd); text-decoration: underline; }

/* --- EĞİTİM: Burs Takvimi --- */
.ed-burs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ed-burs li { display: flex; align-items: center; gap: .8rem; justify-content: space-between; padding: .55rem .2rem; }
.ed-burs li + li { border-top: 1px solid color-mix(in srgb, var(--yl-border) 70%, transparent); }
.ed-burs__txt { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.ed-burs__ad { font-size: .82rem; font-weight: 800; }
.ed-burs__kurum, .ed-burs__tutar { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; color: var(--yl-ink-faint); }
.ed-burs__kurum i { color: var(--cm, #0d6efd); }
.ed-burs__right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.ed-burs__gun { font-size: .64rem; font-weight: 900; color: #fff; background: var(--yl-grad-red, linear-gradient(135deg, #d6001c, #ff6a3d)); border-radius: 999px; padding: .2rem .55rem; white-space: nowrap; }
.ed-burs__tarih { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; color: var(--yl-ink-faint); white-space: nowrap; }

/* --- YAŞAM: Günün Menüsü --- */
.ym-menu { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ym-menu__card { position: relative; border-radius: 13px; padding: .8rem .85rem .7rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--yl-border) 80%, transparent); }
.ym-menu__card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; }
.ym-menu__card--ogle::before { background: var(--yl-grad-warm, linear-gradient(180deg, #f2c94c, #e8a200)); }
.ym-menu__card--aksam::before { background: var(--yl-grad-indigo, linear-gradient(180deg, #5f5dd3, #3b3a8f)); }
.ym-menu__etiket { display: inline-flex; align-items: center; gap: .3rem; font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--yl-ink-faint); }
.ym-menu__ad { display: block; margin: .35rem 0 .3rem; font-size: .85rem; line-height: 1.25; }
.ym-menu__meta { display: inline-flex; align-items: center; gap: .45rem; font-size: .68rem; color: var(--yl-ink-faint); }

/* --- KÜLTÜR-SANAT: Vizyondakiler --- */
.kl-viz { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.kl-viz__c { border: 1px solid color-mix(in srgb, var(--yl-border) 80%, transparent); border-radius: 12px; padding: .6rem .7rem; display: flex; flex-direction: column; gap: .3rem; transition: border-color .15s ease, transform .15s ease; }
.kl-viz__c:hover { border-color: color-mix(in srgb, var(--cm, #0d6efd) 55%, transparent); transform: translateY(-1px); }
.kl-viz__top { display: flex; align-items: center; gap: .5rem; justify-content: space-between; }
.kl-viz__ad { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-viz__puan { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .22rem; font-variant-numeric: tabular-nums; font-size: .72rem; font-weight: 900; color: #b58500; }
.kl-viz__puan i { font-size: .6rem; }
.kl-viz__meta { font-size: .66rem; color: var(--yl-ink-faint); }
.kl-viz__bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--yl-border) 55%, transparent); overflow: hidden; }
.kl-viz__bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--cm, #0d6efd) 55%, transparent), var(--cm, #0d6efd)); }

/* --- ÇEVRE: Hava Kalitesi --- */
.cv-aqi { display: flex; flex-direction: column; gap: .7rem; }
.cv-aqi__now { display: flex; align-items: center; gap: .8rem; }
.cv-aqi__val {
    display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px;
    font-family: var(--yl-font-serif); font-size: 1.6rem; font-weight: 700; color: #fff;
}
.cv-aqi__val.is-iyi { background: linear-gradient(135deg, #198754, #34c07c); }
.cv-aqi__val.is-orta { background: linear-gradient(135deg, #e8a200, #f2c94c); }
.cv-aqi__val.is-hassas { background: linear-gradient(135deg, #fd7e14, #ffab5e); }
.cv-aqi__val.is-kotu { background: linear-gradient(135deg, #d6001c, #ff6a3d); }
.cv-aqi__val.is-cokkotu { background: linear-gradient(135deg, #7a0410, #b3273a); }
.cv-aqi__txt { display: flex; flex-direction: column; line-height: 1.2; }
.cv-aqi__txt strong { font-size: .95rem; }
.cv-aqi__txt small { font-size: .7rem; color: var(--yl-ink-faint); }
.cv-aqi__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.cv-aqi__c { display: flex; flex-direction: column; align-items: center; gap: .05rem; border: 1px solid color-mix(in srgb, var(--yl-border) 80%, transparent); border-radius: 10px; padding: .45rem .3rem; }
.cv-aqi__c span { font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--yl-ink-faint); }
.cv-aqi__c strong { font-variant-numeric: tabular-nums; font-size: .88rem; }
.cv-aqi__c small { font-size: .56rem; color: var(--yl-ink-faint); }
.cv-aqi__skala { position: relative; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #198754 0 25%, #e8a200 25% 45%, #fd7e14 45% 68%, #d6001c 68% 90%, #7a0410 90% 100%); }
.cv-aqi__nokta { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--yl-ink); transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.cv-aqi__isimler { display: flex; justify-content: space-between; font-size: .58rem; font-weight: 700; color: var(--yl-ink-faint); }

/* --- v5.8: hero stat çeşitleri + yan panel piyasa özeti --- */
.cat-hero__stat--usd strong, .cat-hero__stat--gram strong, .cat-hero__stat--bist strong { font-variant-numeric: tabular-nums; }
.cat-hero__stat--canli { border-color: color-mix(in srgb, #dc3545 40%, transparent); color: #dc3545; }
.cat-hero__stat--hour { border-color: color-mix(in srgb, #fd7e14 45%, transparent); color: #c86a10; }
.cat-side__market { list-style: none; margin: 0; padding: 0; }
.cat-side__market li { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid color-mix(in srgb, var(--yl-border) 70%, transparent); }
.cat-side__market li:last-child { border-bottom: 0; }
.cat-side__mk-n { font-size: .76rem; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-side__mk-v { margin-inline-start: auto; font-variant-numeric: tabular-nums; font-size: .76rem; font-weight: 800; white-space: nowrap; }
.cat-side__mk-c { flex: 0 0 auto; font-size: .66rem; font-weight: 900; white-space: nowrap; }
.cat-side__mk-c.is-up { color: #198754; }
.cat-side__mk-c.is-down { color: #dc3545; }

/* --- v5.8: koyu mod --- */
[data-mode="dark"] .ek-fx__row + .ek-fx__row,
[data-mode="dark"] .sp-fxst__row,
[data-mode="dark"] .cat-trend__item + .cat-trend__item,
[data-mode="dark"] .ed-burs li + li,
[data-mode="dark"] .cat-side__market li { border-color: rgba(255, 255, 255, .1); }
[data-mode="dark"] .ek-calc { background: rgba(255, 255, 255, .04); border-color: color-mix(in srgb, var(--cm, #0d6efd) 45%, transparent); }
[data-mode="dark"] .ek-calc__in, [data-mode="dark"] .ek-calc__sel { background: #171b22; color: #e7eaf0; border-color: rgba(255, 255, 255, .16); }
[data-mode="dark"] .tp-app__c, [data-mode="dark"] .sg-nobet__c,
[data-mode="dark"] .kl-viz__c, [data-mode="dark"] .ym-menu__card { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03); }
[data-mode="dark"] .ek-fx__k, [data-mode="dark"] .sp-gol__no, [data-mode="dark"] .sg-nobet__sehir { background: color-mix(in srgb, var(--cm, #0d6efd) 22%, transparent); }
[data-mode="dark"] .sp-fxst__lig, [data-mode="dark"] .cat-trend__skor { background: rgba(255, 255, 255, .1); color: #cbd5e1; }
[data-mode="dark"] .cv-aqi__c { border-color: rgba(255, 255, 255, .12); }
[data-mode="dark"] .cv-aqi__nokta { background: #171b22; border-color: #e7eaf0; }
[data-mode="dark"] .cat-hero__stat--canli { border-color: rgba(255, 90, 90, .45); color: #ff8a8a; }
[data-mode="dark"] .cat-hero__stat--hour { border-color: rgba(253, 126, 20, .45); color: #ffb066; }

/* --- v5.8: responsive --- */
@media (max-width: 991.98px) {
    .tp-app, .sg-nobet, .kl-viz, .ym-menu { grid-template-columns: 1fr 1fr; }
    .cv-aqi__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 679.98px) {
    .ek-fx__head, .ek-fx__row { grid-template-columns: 56px 1fr 92px 108px; gap: .4rem; }
    .ek-fx__l { font-size: .76rem; }
    .sp-gol li { grid-template-columns: 24px 1fr 70px 30px; }
    .pl-anket__row { grid-template-columns: 78px 1fr 46px; }
    .tp-app, .sg-nobet, .kl-viz { grid-template-columns: 1fr; }
    .ym-menu { grid-template-columns: 1fr; }
    .cv-aqi__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 419.98px) {
    .ek-fx__head, .ek-fx__row { grid-template-columns: 50px 1fr 80px 92px; }
    .cat-hero__stat { padding-inline: .5rem; }
}

/* v5.8 reduced-motion: yeni bar geçişlerini kapat */
@media (prefers-reduced-motion: reduce) {
    .sp-gol__bar span, .pl-anket__bar span, .kl-viz__bar span, .tp-app__c, .kl-viz__c { transition: none; }
}

/* ============================================================
   v5.9 — MODERN CİLA TURU
   MODÜL ibaresi ön yüzden kaldırıldı; buna eşlik eden global
   parlatma: dengeli başlık kırılımı, kaydırma çubuğu cilası,
   kaydırda-beliri (reveal) animasyonu, pano kafası saç çizgisi,
   modül/hero mikro-etkileşimleri. Koyu mod + hareket azaltma destekli.
   ============================================================ */

/* --- 1. Dengeli satır kırılımı: başlıklar tek kelime sarkıtıyor --- */
h1, h2, h3, h4,
.news-card-title, .cat-side__h { text-wrap: balance; }

/* --- 2. Kaydırma çubuğu cilası: brand tonlu, hover'da koyulaşan --- */
::-webkit-scrollbar-thumb { transition: background-color .25s ease; }
::-webkit-scrollbar-thumb:hover { background: var(--yl-ink-faint, #6b7280); }
html[data-mode="dark"], html[data-theme="dark"] { scrollbar-color: rgba(255, 255, 255, .22) transparent; }
html[data-mode="dark"] ::-webkit-scrollbar-thumb, html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); }
html[data-mode="dark"] ::-webkit-scrollbar-thumb:hover, html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .4); }

/* --- 3. Kaydırda-beliri: yl-anim html'deyken modüller/yan panel yumuşak girer.
   html.yl-anim yalnız JS + IntersectionObserver varken ve hareket azaltma
   kapalıyken <head> inline script'ince eklenir (no-JS'te içerik görünür kalır). --- */
html.yl-anim .cat-mod,
html.yl-anim .cat-side__w {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s cubic-bezier(.22, .61, .36, 1), transform .65s cubic-bezier(.22, .61, .36, 1);
}
html.yl-anim .cat-mod.in,
html.yl-anim .cat-side__w.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html.yl-anim .cat-mod, html.yl-anim .cat-side__w { opacity: 1; transform: none; transition: none; }
}

/* --- 4. v5.9.1: pano kafası saç çizgisi (.cat-mods__head::after) başlıkla
   birlikte KALDIRILDI — kural silindi --- */

/* --- 5. Modül mikro-etkileşimleri: köşe parıltısı + ikon eğimi + başlık rengi --- */
.cat-mod::after {
    content: "";
    position: absolute; top: -48px; right: -48px;
    width: 150px; height: 150px; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--cm) 15%, transparent), transparent 72%);
    opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.cat-mod:hover::after { opacity: 1; }
.cat-mod__icon { transition: transform .35s cubic-bezier(.22, .61, .36, 1); }
.cat-mod:hover .cat-mod__icon { transform: translateY(-2px) rotate(-3deg); }
.cat-mod__title { transition: color .25s ease; }
.cat-mod:hover .cat-mod__title { color: var(--cm); }

/* --- 6. Kategori hero'su: karşı köşede yumuşak renkli hâle --- */
.cat-hero::after {
    content: "";
    position: absolute; right: -70px; bottom: -110px;
    width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--cm, #0d6efd) 11%, transparent), transparent 70%);
    pointer-events: none;
}

/* --- 7. Yan panel widget'ları: hover'da hafif kalkma --- */
.cat-side__w { transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease; }
.cat-side__w:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -18px rgba(15, 23, 42, .35); }

/* --- 8. v5.9 koyu mod: parıltı/hâle zaten color-mix; yalnız gölge ayarı
   (v5.9.1: saç çizgisi koyu mod kuralları başlıkla birlikte silindi) --- */
[data-mode="dark"] .cat-side__w:hover { box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .6); }

/* --- 9. v5.9 reduced-motion: mikro-etkileşimleri kapat --- */
@media (prefers-reduced-motion: reduce) {
    .cat-mod__icon, .cat-side__w, .cat-mod, ::-webkit-scrollbar-thumb { transition: none; }
}