/* ============================================================
   YAYINLA — MODERN KATMAN v1.0 (Task 34)
   Kapsam: KATEGORİ SAYFALARI (/kategori/*) + HABER DETAY + SHORTS
   KURAL: header/footer (site-header, topbar, cat-strip, site-footer,
   mobile-bottom-nav, cookie-banner) bilinçli olarak kapsam DIŞIDIR —
   bu dosyada onlara ait hiçbir kural yoktur, var olanlar bozulmaz.
   Tüm kurallar yalnızca içerik bölgesindeki sınıfları hedefler.
   Koyu mod [data-mode="dark"], mobil kırılımlar ve
   prefers-reduced-motion tam desteklidir.
   ============================================================ */

/* ============================================================
   BÖLÜM 1 — KATEGORİ SAYFALARI
   ============================================================ */

/* --- 1.1 Kategori hero: derin cam bant + ambient ışık + sheen --- */
.cat-hero {
    border-radius: 22px;
    padding: 1.35rem 1.5rem;
    border: 1px solid color-mix(in srgb, var(--cm) 14%, var(--yl-border));
    background:
        radial-gradient(120% 190% at 0% 0%, color-mix(in srgb, var(--cm) 16%, transparent), transparent 52%),
        radial-gradient(90% 160% at 100% 100%, color-mix(in srgb, var(--cm) 9%, transparent), transparent 55%),
        var(--yl-card, #fff);
    box-shadow: var(--yl-shadow-sm);
    transition: box-shadow var(--yl-trans), transform var(--yl-trans);
}
.cat-hero::before {
    height: 4px;
    background: linear-gradient(90deg, var(--cm), color-mix(in srgb, var(--cm) 30%, transparent) 55%, transparent 85%);
    border-radius: 4px 4px 0 0;
}
/* Ambient halka ışığı: kategori renginde yumuşak atmosfer */
.cat-hero::after {
    content: "";
    position: absolute;
    top: -70px;
    left: -50px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--cm) 22%, transparent), transparent 65%);
    pointer-events: none;
    opacity: .8;
}
.cat-hero__chip {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    position: relative;
    z-index: 1;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--cm) 88%, #fff), var(--cm) 42%, color-mix(in srgb, var(--cm) 55%, #0d1220));
    box-shadow:
        0 10px 24px -8px color-mix(in srgb, var(--cm) 75%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: transform var(--yl-trans), box-shadow var(--yl-trans);
}
.cat-hero:hover .cat-hero__chip {
    transform: translateY(-2px) scale(1.04) rotate(-2deg);
    box-shadow: 0 16px 34px -10px color-mix(in srgb, var(--cm) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.cat-hero__kicker { letter-spacing: .26em; }
.cat-hero__title { letter-spacing: -.02em; }
.cat-hero__stat {
    border-radius: 14px;
    padding: .55rem .85rem;
    border: 1px solid color-mix(in srgb, var(--cm) 16%, var(--yl-border));
    background: color-mix(in srgb, var(--cm) 6%, transparent);
    backdrop-filter: blur(6px);
    position: relative;
    overflow: hidden;
    transition: transform var(--yl-trans), box-shadow var(--yl-trans), border-color var(--yl-trans);
}
.cat-hero__stat::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--cm) 12%, transparent) 48%, transparent 62%);
    translate: -120% 0;
    transition: translate .8s cubic-bezier(.22, .61, .36, 1);
}
.cat-hero:hover .cat-hero__stat::after { translate: 120% 0; }
.cat-hero:hover .cat-hero__stat {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--cm) 42%, var(--yl-border));
    box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--cm) 60%, transparent);
}
.cat-hero__stat strong {
    background: linear-gradient(135deg, var(--cm), color-mix(in srgb, var(--cm) 55%, #1c2434));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cat-hero__stat--today strong,
.cat-hero__stat--hour strong,
.cat-hero__stat--canli strong { background: linear-gradient(135deg, var(--yl-red), var(--yl-red-strong)); -webkit-background-clip: text; background-clip: text; }

/* --- 1.2 Modül kartları: derinlik + iç parıltı + hover hikayesi --- */
.cat-mods { gap: 1.05rem; }
.cat-mod {
    border-radius: 20px;
    padding: 1.15rem 1.2rem 1.25rem;
    border: 1px solid var(--yl-border);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--cm) 3%, transparent), transparent 42%),
        var(--yl-card, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px -18px rgba(15, 23, 42, .35);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, border-color .3s ease;
}
.cat-mod::before {
    height: 3.5px;
    background: linear-gradient(90deg, var(--cm), color-mix(in srgb, var(--cm) 40%, transparent) 60%, transparent 90%);
}
.cat-mod:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--cm) 40%, var(--yl-border));
    box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--cm) 55%, transparent), 0 2px 6px rgba(15, 23, 42, .05);
}
.cat-mod__icon {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: linear-gradient(140deg, var(--cm) 10%, color-mix(in srgb, var(--cm) 55%, #131826) 95%);
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--cm) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .28);
    transition: transform var(--yl-trans);
}
.cat-mod:hover .cat-mod__icon { transform: scale(1.07) rotate(-3deg); }
.cat-mod__title { letter-spacing: -.012em; }
/* Liste satırları: sağa ok mikro-etkileşimi */
.cat-mod__list a { transition: padding-left .22s cubic-bezier(.22, .61, .36, 1); border-radius: 8px; }
.cat-mod__list a:hover { padding-left: .35rem; }
.cat-mod__li-txt { transition: color .18s ease; font-weight: 500; }
.cat-mod__time {
    border-radius: 7px;
    padding: .06rem .4rem;
    background: color-mix(in srgb, var(--cm) 10%, transparent);
}
/* Canlı pulse'a yumuşak hale */
.cat-mod__pulse { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); animation: catPulse 1.2s ease-in-out infinite, catHalo 2.4s ease-out infinite; }
@keyframes catHalo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Son dakika bandı: gradient + parlama */
.cat-mod__band {
    background: linear-gradient(90deg, var(--yl-red-strong), var(--yl-red));
    border-radius: 10px;
    padding: .34rem .8rem;
    box-shadow: 0 6px 16px -8px rgba(225, 29, 46, .55);
    position: relative;
    overflow: hidden;
}
.cat-mod__band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 62%);
    translate: -100% 0;
    animation: bandSweep 3.6s ease-in-out infinite;
}
@keyframes bandSweep { 0%, 55% { translate: -100% 0; } 90%, 100% { translate: 110% 0; } }

/* Skorlar, piyasa, trafik, etkinlik mikro-kartları */
.cat-scores__item, .cat-market__item, .cat-traffic__item, .cat-ev a {
    border-radius: 14px;
    transition: transform .24s cubic-bezier(.22, .61, .36, 1), border-color .24s ease, box-shadow .24s ease;
}
.cat-scores__item:hover, .cat-market__item:hover, .cat-traffic__item:hover, .cat-ev a:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--cm) 60%, transparent);
}
.cat-market__v { letter-spacing: -.01em; }
.cat-traffic__bar span { background: linear-gradient(90deg, #f6b23c, var(--yl-red), var(--yl-red-strong)); box-shadow: 0 0 10px -2px rgba(225, 29, 46, .5); }
.cat-ev__date { box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--cm) 55%, transparent); }

/* --- 1.3 Öne Çıkanlar (cat-lead) vitrin başlığı --- */
.cat-lead__head { gap: .8rem; }
.cat-lead__label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(120deg, var(--yl-brand-strong), var(--yl-brand));
    border-radius: 999px;
    padding: .38rem .95rem;
    box-shadow: 0 6px 16px -8px rgba(13, 24, 48, .6);
}
.cat-lead__label i { color: var(--yl-live); }
.cat-lead__rule { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--yl-border-strong), transparent); }
.cat-lead .news-card-lg { border-radius: 22px; overflow: hidden; }
.cat-lead .news-card-lg .news-card-title { font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem); }

/* --- 1.4 Haber kartları: görsel nefes + başlık renk geçişi --- */
.news-card {
    border-radius: 20px;
    overflow: hidden;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, border-color .3s ease;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--yl-shadow); }
.news-card-img img { transition: transform .55s cubic-bezier(.22, .61, .36, 1), filter .3s ease; }
.news-card:hover .news-card-img img { transform: scale(1.055); filter: saturate(1.07); }
.news-card-title { transition: color .2s ease; }
.news-card:hover .news-card-title { color: var(--yl-brand-strong); }
[data-mode="dark"] .news-card:hover .news-card-title { color: #dce6fa; }
.news-card.is-breaking { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--yl-red) 55%, transparent); }
.news-card.is-breaking:hover { box-shadow: inset 0 0 0 1.5px var(--yl-red), var(--yl-shadow); }
.news-card-meta { color: var(--yl-ink-faint); }
/* Kategori çipi: dolgun modern rozet */
.category-chip {
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
    padding: .3rem .65rem !important;
    background: color-mix(in srgb, var(--chip, #0d6efd) 13%, transparent) !important;
    color: color-mix(in srgb, var(--chip, #0d6efd) 72%, var(--yl-ink)) !important;
    border: 1px solid color-mix(in srgb, var(--chip, #0d6efd) 32%, transparent) !important;
    backdrop-filter: blur(4px);
}
[data-mode="dark"] .category-chip { color: color-mix(in srgb, var(--chip, #6ea8ff) 80%, #fff) !important; }

/* --- 1.5 Son dakika saat çizelgesi (timeline) --- */
.tl::before { background: linear-gradient(180deg, color-mix(in srgb, #dc3545 42%, transparent), color-mix(in srgb, var(--yl-border) 80%, transparent)); }
.tl__dot {
    width: 11px;
    height: 11px;
    transition: transform .22s ease, box-shadow .22s ease;
    background: var(--yl-card, #fff);
}
.tl__item:hover .tl__dot { transform: scale(1.35); box-shadow: 0 0 0 5px color-mix(in srgb, #dc3545 14%, transparent); }
.tl__dot--fresh { background: var(--yl-red); border-color: var(--yl-red); animation: freshBeat 1.8s ease-in-out infinite; }
@keyframes freshBeat { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--yl-red) 38%, transparent); } 55% { box-shadow: 0 0 0 6px transparent; } }
.tl__body {
    padding: .5rem .65rem .55rem;
    margin: -.1rem -.65rem;
    border-radius: 12px;
    transition: background .2s ease, transform .22s cubic-bezier(.22, .61, .36, 1);
}
.tl__item:hover .tl__body { background: color-mix(in srgb, var(--cm, #dc3545) 7%, transparent); transform: translateX(3px); }
.tl__title { font-weight: 700; letter-spacing: -.005em; }
.tl__item:hover .tl__title { color: var(--yl-red-strong); }
[data-mode="dark"] .tl__item:hover .tl__title { color: #ff8a91; }

/* --- 1.6 Yan panel (cat-side) widget cila --- */
.cat-side__w {
    border-radius: 18px;
    border: 1px solid var(--yl-border);
    background: var(--yl-card, #fff);
    transition: box-shadow var(--yl-trans), border-color var(--yl-trans), transform var(--yl-trans);
}
.cat-side__w:hover { border-color: color-mix(in srgb, var(--cm) 26%, var(--yl-border)); box-shadow: 0 12px 30px -20px color-mix(in srgb, var(--cm) 65%, transparent); }
.cat-side__h { letter-spacing: .1em; }
.cat-side__most li { transition: padding-left .22s ease; border-radius: 8px; }
.cat-side__most li:hover { padding-left: .35rem; }
.cat-side__most li:hover a { color: var(--cm); }

/* --- 1.7 Deprem canlı şeridi --- */
.qk-lastbar {
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--cm) 22%, var(--yl-border));
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--cm) 12%, transparent), transparent 60%),
        var(--yl-card, #fff);
    box-shadow: 0 8px 22px -14px color-mix(in srgb, var(--cm) 70%, transparent);
    padding: .6rem 1rem;
}
.qk-lastbar__m {
    background: linear-gradient(120deg, var(--cm), color-mix(in srgb, var(--cm) 55%, #10141f));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- 1.8 Sayfalama: modern pill navigasyon --- */
.pagination-wrap { margin-top: 1.75rem; }
.pagination { gap: .4rem; --bs-pagination-border-width: 0; }
.pagination .page-link {
    border-radius: 12px !important;
    font-weight: 700;
    font-size: .9rem;
    min-width: 42px;
    text-align: center;
    padding: .5rem .8rem;
    color: var(--yl-ink-soft);
    background: var(--yl-card, #fff);
    border: 1px solid var(--yl-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: all .22s cubic-bezier(.22, .61, .36, 1);
}
.pagination .page-link:hover {
    color: var(--yl-ink);
    background: var(--yl-bg-soft);
    border-color: var(--yl-border-strong);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -10px rgba(15, 23, 42, .35);
}
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--yl-brand-strong), var(--yl-brand));
    color: #fff;
    box-shadow: 0 10px 22px -10px rgba(13, 24, 48, .65);
}
.pagination .page-item.disabled .page-link { background: transparent; border-color: transparent; color: var(--yl-ink-faint); }

/* ============================================================
   BÖLÜM 2 — HABER DETAY SAYFASI
   ============================================================ */

/* --- 2.1 Başlık & spot: editoryal sahne --- */
.article-title { letter-spacing: -.024em; }
.news-spot { font-size: 1.17rem; line-height: 1.6; }

/* --- 2.2 Kategori etiketi + rozetler --- */
.article-cat {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .05em;
    color: var(--cm, var(--yl-brand));
    background: color-mix(in srgb, var(--cm, var(--yl-brand)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--cm, var(--yl-brand)) 30%, transparent);
    border-radius: 999px;
    padding: .35rem .8rem;
    text-decoration: none;
    transition: all .22s cubic-bezier(.22, .61, .36, 1);
}
.article-cat i { font-size: .68rem; transition: transform .22s ease; }
.article-cat:hover { color: #fff; background: var(--cm, var(--yl-brand)); border-color: var(--cm, var(--yl-brand)); transform: translateY(-1px); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--cm, var(--yl-brand)) 70%, transparent); }
.article-cat:hover i { transform: translateX(2px); }

/* --- 2.3 Yazar meta: avatar halkası + canlı satır --- */
.news-meta { border-radius: 14px; background: color-mix(in srgb, var(--yl-card, #fff) 55%, transparent); backdrop-filter: blur(6px); }
.news-author-av {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-right: .45rem;
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--yl-brand), var(--yl-brand-strong));
    box-shadow: 0 0 0 2px var(--yl-card, #fff), 0 0 0 3.5px color-mix(in srgb, var(--yl-brand) 38%, transparent);
    vertical-align: middle;
    transform: translateY(-2px);
}
.news-meta .bi { color: var(--yl-brand); }
.read-btn {
    border-radius: 10px;
    font-weight: 800;
    transition: all .2s ease;
}
.read-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(13, 24, 48, .55); }

/* --- 2.4 Kapak görseli: sinematik çerçeve --- */
.article-figure { margin: 0; position: relative; }
.article-figure-link {
    display: block;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--yl-shadow);
    position: relative;
    isolation: isolate;
}
.article-figure-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 -70px 90px -60px rgba(10, 14, 26, .5);
    pointer-events: none;
}
.article-figure img { transition: transform .7s cubic-bezier(.22, .61, .36, 1); }
.article-figure:hover img { transform: scale(1.035); }
.article-figure-zoom {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.05rem;
    border-radius: 13px;
    background: rgba(13, 18, 30, .62);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
    opacity: 0;
    transform: translateY(8px);
    transition: all .28s cubic-bezier(.22, .61, .36, 1);
}
.article-figure:hover .article-figure-zoom { opacity: 1; transform: translateY(0); }

/* --- 2.5 AI özeti: yaldızlı cam kart --- */
.ai-summary {
    border-radius: 16px !important;
    border-left: 4px solid var(--yl-live) !important;
    background:
        linear-gradient(115deg, color-mix(in srgb, var(--yl-live) 10%, transparent), transparent 55%),
        var(--yl-bg-soft) !important;
    box-shadow: var(--yl-shadow-sm);
    transition: box-shadow var(--yl-trans), transform var(--yl-trans);
}
.ai-summary:hover { transform: translateY(-1px); box-shadow: var(--yl-shadow); }
.ai-summary strong { color: var(--yl-gold); letter-spacing: .08em; }

/* --- 2.6 Makale gövdesi: okuma konforu + başlık renkleri + drop cap --- */
.news-content { letter-spacing: .002em; }
.news-content > p:first-of-type { font-size: 1.14rem; line-height: 1.75; color: var(--yl-ink); }
.news-content h2, .news-content h3 {
    font-weight: 800;
    letter-spacing: -.015em;
    margin-top: 1.9rem;
    position: relative;
    padding-left: .85rem;
}
.news-content h2::before, .news-content h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    bottom: .18em;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--yl-red), var(--yl-brand));
}
.news-content a {
    color: var(--yl-brand);
    text-decoration: none;
    border-bottom: 2px solid color-mix(in srgb, var(--yl-red) 45%, transparent);
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.news-content a:hover { color: var(--yl-red-strong); border-bottom-color: var(--yl-red); background: color-mix(in srgb, var(--yl-red) 6%, transparent); }
.news-content blockquote {
    border-left: 4px solid var(--yl-live);
    background: color-mix(in srgb, var(--yl-live) 6%, transparent);
    border-radius: 0 14px 14px 0;
    padding: 1rem 1.25rem;
    font-family: var(--yl-font-serif);
    font-size: 1.08rem;
}
.news-content img { border-radius: 16px; box-shadow: var(--yl-shadow-sm); }

/* --- 2.7 Kaynak kutusu + etiketler --- */
.source-box { border-radius: 14px !important; border-style: dashed !important; }
.source-box .bi { color: var(--yl-brand); }
.badge.text-bg-light {
    border-radius: 999px !important;
    padding: .42rem .85rem !important;
    font-weight: 700 !important;
    transition: all .2s cubic-bezier(.22, .61, .36, 1);
}
a.badge.text-bg-light:hover { transform: translateY(-2px); border-color: var(--yl-brand) !important; color: var(--yl-brand) !important; box-shadow: 0 8px 16px -10px rgba(13, 24, 48, .5); }

/* --- 2.8 Paylaşım vitrini: markalı renkli yuvarlaklar --- */
.share-bar { border-radius: 16px; background: color-mix(in srgb, var(--yl-card, #fff) 55%, transparent); backdrop-filter: blur(6px); }
.share-bar .btn {
    border-radius: 12px;
    font-weight: 700;
    transition: all .22s cubic-bezier(.22, .61, .36, 1);
}
.share-bar > a.btn { border: 0; color: #fff; padding-inline: .7rem; box-shadow: 0 6px 14px -8px rgba(15, 23, 42, .55); }
.share-bar > a.btn:hover { transform: translateY(-3px) scale(1.05); color: #fff; }
.share-bar > a.btn:nth-of-type(1) { background: #25d366; } /* WhatsApp */
.share-bar > a.btn:nth-of-type(2) { background: #229ed9; } /* Telegram */
.share-bar > a.btn:nth-of-type(3) { background: #111318; } /* X */
.share-bar > a.btn:nth-of-type(4) { background: #1877f2; } /* Facebook */
.share-bar .js-copy-link:hover { transform: translateY(-2px); }
.share-bar .btn-outline-primary.active { background: var(--yl-red); border-color: var(--yl-red); color: #fff; box-shadow: 0 8px 18px -8px rgba(225, 29, 46, .6); }

/* --- 2.9 Yayılım grafiği / doğrulama / şehir kartları --- */
.news_show-scope .card, article.row > .col-12.col-lg-8 .card.bg-body-tertiary {
    border-radius: 18px;
    box-shadow: var(--yl-shadow-sm);
    transition: box-shadow var(--yl-trans), transform var(--yl-trans);
}
article.row > .col-12.col-lg-8 .card.bg-body-tertiary:hover,
article.row > .col-lg-4 .card.bg-body-tertiary:hover { transform: translateY(-2px); box-shadow: var(--yl-shadow); }
article.row .card-body h2.h6 { letter-spacing: .1em; font-weight: 800; color: var(--yl-ink-soft); }
article.row .card-body h2.h6 .bi { color: var(--yl-red); margin-right: .3rem; }
.timeline { position: relative; }
.timeline::before {
    content: "";
    position: absolute;
    left: .45rem;
    top: .4rem;
    bottom: .4rem;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, #12b76a, color-mix(in srgb, var(--yl-border) 75%, transparent));
}
.timeline > li { padding-left: 1.5rem; position: relative; }
.timeline > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .42rem;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--yl-card, #fff);
    border: 3px solid #12b76a;
    box-shadow: 0 0 0 3px color-mix(in srgb, #12b76a 14%, transparent);
}

/* --- 2.10 Benzer haberler başlığı --- */
section[aria-label="Benzer haberler"] .section-title { letter-spacing: .12em; }
section[aria-label="Benzer haberler"] .row-cols-md-2 .news-card:hover .news-card-title { color: var(--yl-red-strong); }
[data-mode="dark"] section[aria-label="Benzer haberler"] .news-card:hover .news-card-title { color: #ff8a91; }

/* --- 2.11 Yorumlar: topluluk sahnesi --- */
.comments-head .section-title { letter-spacing: .1em; }
.comments-count {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 .55rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--yl-red), var(--yl-red-strong));
    box-shadow: 0 6px 14px -6px rgba(225, 29, 46, .55);
}
.cs-btn {
    border-radius: 999px;
    font-weight: 700;
    transition: all .2s ease;
}
.cs-btn.is-active { box-shadow: 0 6px 14px -8px rgba(13, 24, 48, .6); }
.comment-avatar {
    box-shadow: 0 0 0 2px var(--yl-card, #fff), 0 0 0 3.5px color-mix(in srgb, var(--yl-brand) 30%, transparent);
    font-weight: 800;
}
.comment-bubble { transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; }
.comment-bubble:hover { transform: translateY(-1px); box-shadow: var(--yl-shadow-sm); }
.comment-send {
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 8px 18px -10px rgba(13, 24, 48, .65);
    transition: all .22s cubic-bezier(.22, .61, .36, 1);
}
.comment-send:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(13, 24, 48, .7); }
.comments-empty, .comments-login {
    border-radius: 18px;
    border: 1.5px dashed var(--yl-border-strong);
    background: color-mix(in srgb, var(--yl-bg-soft) 55%, transparent);
    text-align: center;
    padding: 2rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
}
.comments-empty .bi, .comments-login .bi { font-size: 1.9rem; color: var(--yl-brand); }
.comments-login { border-style: solid; background: var(--yl-card, #fff); box-shadow: var(--yl-shadow-sm); }

/* ============================================================
   BÖLÜM 3 — SHORTS (akış + tekli oynatıcı + popup)
   ============================================================ */

/* --- 3.1 Bölüm üst bandı: sinematik lacivert cam --- */
.shorts-topbar {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .1);
    background:
        radial-gradient(120% 210% at 0% 0%, rgba(225, 29, 46, .22), transparent 55%),
        radial-gradient(100% 180% at 100% 100%, rgba(51, 80, 126, .35), transparent 55%),
        linear-gradient(120deg, #0d1220, #131c30);
    box-shadow: 0 18px 40px -22px rgba(6, 10, 22, .8);
    padding: 1.05rem 1.3rem;
    position: relative;
    overflow: hidden;
}
.shorts-topbar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .07) 50%, transparent 62%);
    translate: -100% 0;
    animation: bandSweep 5.2s ease-in-out infinite;
    pointer-events: none;
}
.shorts-topbar__chip {
    background: linear-gradient(135deg, var(--yl-red), var(--yl-red-strong));
    border-radius: 999px;
    box-shadow: 0 6px 16px -6px rgba(225, 29, 46, .65), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.shorts-topbar__title {
    background: linear-gradient(90deg, #fff, #ffd66b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -.02em;
}
.shorts-topbar__meta { color: rgba(255, 255, 255, .68); }
.shorts-topbar__cta {
    border-radius: 999px;
    font-weight: 800;
    background: linear-gradient(120deg, var(--yl-red), #f0564f);
    color: #fff;
    box-shadow: 0 10px 22px -10px rgba(225, 29, 46, .8), inset 0 1px 0 rgba(255, 255, 255, .28);
    transition: all .24s cubic-bezier(.22, .61, .36, 1);
}
.shorts-topbar__cta:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 14px 30px -10px rgba(225, 29, 46, .9); }

/* --- 3.2 Dikey akış: sinematik sahne --- */
.shorts-container {
    max-width: 520px;
    margin-inline: auto;
    border-radius: 26px;
    gap: 1.25rem;
    padding: 1.25rem 0;
    background:
        radial-gradient(60% 22% at 50% 0%, rgba(225, 29, 46, .08), transparent 70%),
        transparent;
}
.shorts-slide {
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 24px 60px -28px rgba(6, 10, 22, .75), inset 0 0 0 1px rgba(255, 255, 255, .07);
    scroll-snap-align: center;
    scroll-margin: 12px;
}
.shorts-video { border-radius: 0; }
.shorts-shade { background: linear-gradient(180deg, rgba(8, 11, 20, .42) 0%, transparent 26%, transparent 55%, rgba(8, 11, 20, .85) 100%); }
.shorts-progress { height: 3.5px; border-radius: 4px; overflow: hidden; opacity: .9; }
.shorts-progress span { background: linear-gradient(90deg, var(--yl-red), #ffd66b); border-radius: 4px; }
.shorts-mute {
    border-radius: 12px;
    background: rgba(10, 14, 26, .55);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    transition: all .22s ease;
}
.shorts-mute:hover { background: rgba(10, 14, 26, .8); transform: scale(1.06); }

/* --- 3.3 Overlay bilgi + aksiyon diskleri --- */
.shorts-author {
    backdrop-filter: blur(6px);
    border-radius: 999px;
    padding: .28rem .8rem .28rem .3rem;
    background: rgba(12, 16, 28, .45);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    transition: background .22s ease;
}
.shorts-author:hover { background: rgba(12, 16, 28, .68); }
.shorts-author-av {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .65), 0 4px 10px -3px rgba(0, 0, 0, .6);
}
.shorts-title { text-shadow: 0 2px 14px rgba(0, 0, 0, .65); letter-spacing: -.012em; }
.shorts-chip {
    backdrop-filter: blur(6px);
    border-radius: 999px;
    background: rgba(12, 16, 28, .5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.shorts-act-disc {
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
    backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 8px 20px -8px rgba(0, 0, 0, .55);
    transition: transform .24s cubic-bezier(.22, .61, .36, 1), background .24s ease, box-shadow .24s ease;
}
.shorts-act:hover .shorts-act-disc { transform: translateY(-3px) scale(1.08); background: linear-gradient(145deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .1)); }
.shorts-act.active .shorts-act-disc {
    background: linear-gradient(145deg, var(--yl-red), var(--yl-red-strong));
    box-shadow: 0 0 0 0 rgba(225, 29, 46, .45), 0 10px 24px -8px rgba(225, 29, 46, .8);
    animation: likePop .45s cubic-bezier(.22, 1.4, .36, 1);
}
@keyframes likePop { 0% { transform: scale(.7); } 55% { transform: scale(1.22); } 100% { transform: scale(1); } }
.shorts-tap {
    border-radius: 50%;
    background: rgba(10, 14, 26, .5);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6);
}
.shorts-hint {
    border-radius: 999px;
    background: rgba(10, 14, 26, .55);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    animation: hintFloat 1.9s ease-in-out infinite;
}
@keyframes hintFloat { 0%, 100% { transform: translateY(0); opacity: .85; } 50% { transform: translateY(-7px); opacity: 1; } }

/* --- 3.4 Tek shorts sayfası (detay) --- */
.short-single-player {
    border-radius: 24px;
    overflow: hidden;
    background: #0a0e1a;
    box-shadow: 0 30px 70px -30px rgba(6, 10, 22, .85), inset 0 0 0 1px rgba(255, 255, 255, .08);
    position: relative;
}
.short-single-player::before {
    content: "";
    position: absolute;
    inset: -1.5px;
    border-radius: 25px;
    background: linear-gradient(140deg, rgba(225, 29, 46, .55), transparent 38%, transparent 62%, rgba(51, 80, 126, .55));
    z-index: -1;
}
.short-single-video { display: block; width: 100%; border-radius: 24px; background: #000; }
.short-single-title { letter-spacing: -.018em; font-weight: 800; }
.short-author { text-decoration: none; }
.short-author:hover span:last-child { color: var(--yl-brand); }
.short-author-av {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
    background: linear-gradient(135deg, var(--yl-brand), var(--yl-brand-strong));
    box-shadow: 0 0 0 2px var(--yl-card, #fff), 0 0 0 3.5px color-mix(in srgb, var(--yl-red) 40%, transparent);
}
.short-stat {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    padding: .32rem .8rem;
    background: color-mix(in srgb, var(--yl-bg-soft) 75%, transparent);
    border: 1px solid var(--yl-border);
    font-size: .82rem;
    font-weight: 700;
    color: var(--yl-ink-soft);
}
.short-stat .bi { color: var(--yl-red); }
.short-single-meta { margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* --- 3.5 Popup oynatıcı (ana sayfa vitrinden açılan) --- */
.shorts-pop-shell {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.shorts-pop-stage { border-radius: 24px 0 0 24px; }
.shorts-pop-side {
    background: linear-gradient(200deg, #10182a 0%, #0a0e1a 55%, #070a13 100%);
}
.shorts-pop-brand { letter-spacing: .04em; }
.shorts-pop-title { letter-spacing: -.014em; }
.spc-head { transition: background .2s ease; border-radius: 14px; }
.spc-head:hover { background: rgba(255, 255, 255, .07); }
.spc-input {
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    transition: all .22s ease;
}
.spc-input:focus { background: rgba(255, 255, 255, .12); border-color: rgba(225, 29, 46, .65); box-shadow: 0 0 0 3px rgba(225, 29, 46, .18); }
.spc-send {
    border-radius: 50%;
    background: linear-gradient(135deg, var(--yl-red), var(--yl-red-strong));
    box-shadow: 0 6px 16px -6px rgba(225, 29, 46, .7);
    transition: all .22s cubic-bezier(.22, .61, .36, 1);
}
.spc-send:hover { transform: translateY(-2px) scale(1.06); }
.shorts-pop-arrow { border-radius: 12px; backdrop-filter: blur(6px); }

/* ============================================================
   BÖLÜM 4 — KOYU MOD İNCE AYARLARI
   ============================================================ */
[data-mode="dark"] .cat-hero {
    background:
        radial-gradient(120% 190% at 0% 0%, color-mix(in srgb, var(--cm) 22%, transparent), transparent 52%),
        var(--yl-card, #171b22);
}
[data-mode="dark"] .cat-mod {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--cm) 5%, transparent), transparent 45%),
        var(--yl-card, #171b22);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 30px -20px rgba(0, 0, 0, .6);
}
[data-mode="dark"] .cat-side__w { background: var(--yl-card, #171b22); }
[data-mode="dark"] .news-meta,
[data-mode="dark"] .share-bar { background: color-mix(in srgb, var(--yl-card, #171b22) 60%, transparent); }
[data-mode="dark"] .news-content blockquote { background: color-mix(in srgb, var(--yl-live) 9%, transparent); }
[data-mode="dark"] .pagination .page-link { background: var(--yl-card, #1a1f28); border-color: var(--yl-border); color: var(--yl-ink-soft); }
[data-mode="dark"] .pagination .page-link:hover { background: var(--yl-bg-soft); }
[data-mode="dark"] .pagination .page-item.active .page-link { background: linear-gradient(135deg, #33507e, #a9bee6); color: #0f1216; }
[data-mode="dark"] .comments-empty, [data-mode="dark"] .comments-login { background: color-mix(in srgb, var(--yl-bg-soft) 70%, transparent); }
[data-mode="dark"] .comments-login { background: var(--yl-card, #1a1f28); }
[data-mode="dark"] .cat-lead__label { background: linear-gradient(120deg, #c4d3f0, #a9bee6); color: #0f1216; }
[data-mode="dark"] .cat-lead__label i { color: #8a5a12; }
[data-mode="dark"] .short-stat { background: var(--yl-bg-soft, #171b22); }
[data-mode="dark"] .news-author-av { box-shadow: 0 0 0 2px var(--yl-card, #171b22), 0 0 0 3.5px color-mix(in srgb, var(--yl-brand) 45%, transparent); }
[data-mode="dark"] .article-figure-link::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 -70px 90px -60px rgba(0, 0, 0, .65); }
[data-mode="dark"] .shorts-container { background: radial-gradient(60% 22% at 50% 0%, rgba(225, 29, 46, .12), transparent 70%); }

/* ============================================================
   BÖLÜM 5 — MOBİL KIRILIMLAR (full mobile uyum)
   ============================================================ */
@media (max-width: 991.98px) {
    .cat-hero { padding: 1.15rem 1.2rem; border-radius: 20px; }
    .cat-hero__chip { width: 54px; height: 54px; border-radius: 16px; }
    .cat-hero__title { font-size: 1.55rem; }
    .shorts-container { max-width: 480px; }
}
@media (max-width: 679.98px) {
    .cat-hero {
        padding: 1rem 1rem 1.05rem;
        border-radius: 18px;
        margin-bottom: 1.15rem;
    }
    .cat-hero::after { width: 170px; height: 170px; top: -55px; left: -40px; }
    .cat-hero__chip { width: 48px; height: 48px; font-size: 1.2rem; border-radius: 14px; }
    .cat-hero__title { font-size: 1.38rem; }
    .cat-hero__meta { gap: .45rem; }
    .cat-hero__stat { min-width: 0; padding: .45rem .6rem; border-radius: 12px; }
    .cat-hero__stat strong { font-size: 1.08rem; }
    .cat-mod { border-radius: 18px; padding: 1rem 1rem 1.1rem; }
    .news-card { border-radius: 17px; }
    .news-card:hover { transform: none; box-shadow: var(--yl-shadow-sm); }
    .tl__body { margin: -.1rem -.45rem; padding: .45rem .5rem .5rem; }
    .tl::before { left: 57px; }
    .cat-side__w { border-radius: 16px; }
    .qk-lastbar { flex-wrap: wrap; gap: .35rem .7rem; border-radius: 14px; }
    /* Haber detay mobil */
    .news-spot { font-size: 1.08rem; }
    .news-content > p:first-of-type { font-size: 1.08rem; }
    .article-figure-link { border-radius: 18px; }
    .article-figure-zoom { width: 36px; height: 36px; right: 10px; bottom: 10px; }
    .share-bar { gap: .45rem !important; }
    .share-bar > a.btn { padding-inline: .85rem; }
    .share-bar .ms-auto { width: 100%; margin-top: .35rem !important; }
    .news-meta { gap: .6rem !important; border-radius: 12px; }
    .news-author-av { width: 26px; height: 26px; font-size: .72rem; }
    .read-tools { margin-left: 0 !important; }
    .comments-empty, .comments-login { padding: 1.5rem 1rem; }
    .shorts-topbar { padding: .9rem 1rem; border-radius: 17px; gap: .5rem; }
    .shorts-topbar__cta { width: 100%; text-align: center; padding-block: .5rem; }
    .shorts-container { max-width: 100%; padding: .75rem 0; gap: .9rem; border-radius: 20px; }
    .shorts-slide { border-radius: 20px; }
    .shorts-act-disc { width: 46px; height: 46px; }
    .short-single-player { border-radius: 20px; }
    .short-single-player::before { border-radius: 21px; }
    .short-single-video { border-radius: 20px; }
}
@media (max-width: 419.98px) {
    .cat-hero__title { font-size: 1.26rem; }
    .cat-hero__stat strong { font-size: 1rem; }
    .cat-mod__icon { width: 36px; height: 36px; border-radius: 11px; }
    .pagination .page-link { min-width: 38px; padding: .45rem .65rem; font-size: .84rem; }
    .shorts-title { font-size: 1.02rem; }
}

/* ============================================================
   BÖLÜM 6 — HAREKET AZALTMA (erişilebilirlik)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .cat-hero__stat::after,
    .cat-mod__band::after,
    .shorts-topbar::after,
    .shorts-act.active .shorts-act-disc,
    .tl__dot--fresh,
    .shorts-hint { animation: none !important; transition: none !important; }
    .cat-mod__pulse { animation: catPulse 1.2s ease-in-out infinite; box-shadow: none; }
    .news-card, .cat-mod, .cat-hero__stat, .article-figure img,
    .news-card-img img, .shorts-act-disc, .pagination .page-link { transition: none !important; }
}

/* ============================================================
   BÖLÜM 7 — ANA SAYFA (manşet + piyasa + vitrinler) — Task 35
   Kapsam yalnızca main içindeki içerik sınıflarıdır; header/footer
   sınıflarına (.site-header/.topbar/.cat-strip/.site-footer/.mnav-*)
   kural YOKTUR.
   ============================================================ */

/* --- 7.1 Bölüm başlıkları (vitrin genel) --- */
main .section-title { letter-spacing: .1em; }
main .section-head { margin-bottom: 1.15rem; }
main .section-title.is-red { position: relative; }
main .see-all {
    border-radius: 999px;
    padding: .32rem .85rem;
    border: 1px solid var(--yl-border);
    background: var(--yl-card, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: all .22s cubic-bezier(.22, .61, .36, 1);
}
main .see-all:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--yl-red) 45%, var(--yl-border));
    color: var(--yl-red-strong);
    box-shadow: 0 8px 18px -10px rgba(225, 29, 46, .5);
}

/* --- 7.2 Manşet slider (hb-hero ailesi) --- */
.hb-slider {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--yl-shadow);
    isolation: isolate;
}
.hb-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 55%, rgba(255, 255, 255, .05) 70%, transparent 85%);
    translate: -100% 0;
    transition: translate 1s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
}
.hb-slider:hover .hb-slide.is-active::after { translate: 100% 0; }
.hb-nav {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    backdrop-filter: blur(8px);
    background: rgba(10, 14, 26, .42);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 8px 20px -8px rgba(0, 0, 0, .6);
    transition: all .22s cubic-bezier(.22, .61, .36, 1);
}
.hb-nav:hover { background: var(--yl-red); transform: scale(1.08); }
.hb-dot { border-radius: 999px; transition: width .3s cubic-bezier(.22, .61, .36, 1); }
.hb-dot.is-active { width: 26px; }
/* Manşet yan liste */
.hb-side-item {
    border-radius: 18px;
    overflow: hidden;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease;
}
.hb-side-item:hover { transform: translateX(4px); box-shadow: var(--yl-shadow); }

/* --- 7.3 Piyasa şeridi + kartları --- */
.hb-ticker { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 12px 28px -18px rgba(6, 10, 22, .8); }
.hb-tk { transition: background .2s ease, transform .2s ease; border-radius: 10px; padding: .2rem .5rem; }
.hb-tk:hover { background: rgba(255, 255, 255, .07); transform: translateY(-1px); }
.hb-mcard {
    border-radius: 18px;
    transition: transform .26s cubic-bezier(.22, .61, .36, 1), box-shadow .26s ease, border-color .26s ease;
}
.hb-mcard:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--yl-brand) 30%, var(--yl-border));
    box-shadow: 0 14px 30px -18px rgba(13, 24, 48, .55);
}
.hb-mc-ic { transition: transform .26s ease; }
.hb-mcard:hover .hb-mc-ic { transform: scale(1.15) rotate(-6deg); }

/* --- 7.4 Alt manşet sekme + panel kartları --- */
.hb-sub-tab {
    border-radius: 999px !important;
    transition: all .22s cubic-bezier(.22, .61, .36, 1);
}
.hb-sub-tab.is-active { box-shadow: 0 8px 18px -10px rgba(13, 24, 48, .65); }
.hb-sub-tab:hover:not(.is-active) { transform: translateY(-2px); }
.hb-sub-panel {
    border-radius: 20px;
    border: 1px solid var(--yl-border);
    background: var(--yl-card, #fff);
    box-shadow: var(--yl-shadow-sm);
}

/* --- 7.5 Shorts vitrin şeridi (ana sayfa) --- */
.shorts-showcase .shorts-card {
    border-radius: 20px;
    overflow: hidden;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease;
}
.shorts-showcase .shorts-card:hover {
    transform: translateY(-5px) scale(1.015);
    box-shadow: 0 20px 44px -20px rgba(6, 10, 22, .7);
}
.shorts-showcase .shorts-card.is-featured { box-shadow: 0 0 0 2px color-mix(in srgb, var(--yl-red) 60%, transparent), 0 14px 30px -16px rgba(225, 29, 46, .55); }
.shorts-nav {
    border-radius: 50%;
    backdrop-filter: blur(8px);
    background: rgba(10, 14, 26, .45);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 8px 18px -8px rgba(0, 0, 0, .55);
    transition: all .22s ease;
}
.shorts-nav:hover { background: var(--yl-red); transform: scale(1.08); }
.shorts-views-chip {
    border-radius: 999px;
    backdrop-filter: blur(6px);
    background: rgba(10, 14, 26, .5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

/* --- 7.6 Vitrin listeleri: son dakika / trend / pulse / olay / canlı --- */
.breaking-list { border-radius: 18px; }
.breaking-list > * { transition: background .2s ease, padding-left .22s cubic-bezier(.22, .61, .36, 1); }
.breaking-list > *:hover { padding-left: .35rem; }
.trend-item {
    border-radius: 14px;
    transition: background .2s ease, transform .22s cubic-bezier(.22, .61, .36, 1);
}
.trend-item:hover { transform: translateX(3px); }
.trend-rank { letter-spacing: -.02em; }
.city-pulse { border-radius: 20px; }
.pulse-cell { border-radius: 14px; transition: background .2s ease, transform .22s ease; }
.pulse-cell:hover { background: color-mix(in srgb, var(--yl-brand-soft) 55%, transparent); transform: translateY(-2px); }
.incident-card { border-radius: 18px; transition: transform .26s cubic-bezier(.22, .61, .36, 1), box-shadow .26s ease; }
.incident-card:hover { transform: translateY(-3px); box-shadow: var(--yl-shadow); }
.live-card { border-radius: 18px; overflow: hidden; transition: transform .26s cubic-bezier(.22, .61, .36, 1), box-shadow .26s ease; }
.live-card:hover { transform: translateY(-3px); box-shadow: var(--yl-shadow); }
.live-dot { animation: liveBeat 1.6s ease-in-out infinite; }
@keyframes liveBeat { 0%, 100% { box-shadow: 0 0 0 0 rgba(225, 29, 46, .45); } 60% { box-shadow: 0 0 0 7px transparent; } }
.widget-card { border-radius: 20px; }
.widget-card:hover { border-color: color-mix(in srgb, var(--yl-brand) 24%, var(--yl-border)); }
.widget-title { letter-spacing: .08em; }
.journalist-row:hover { padding-left: .45rem; }
.trust-box { border-radius: 18px; }
.map-teaser { border-radius: 20px; overflow: hidden; }
.map-teaser:hover { border-color: color-mix(in srgb, var(--yl-live) 45%, var(--yl-border)); }
.map-pin { transition: transform .2s ease; }
.map-teaser:hover .map-pin { transform: scale(1.15); }
.status-chip { border-radius: 999px; font-weight: 800; }

/* --- 7.7 Kur grafik popup'ı ve makas bölümü cila --- */
.hb-chart-card { border-radius: 20px; }
.hb-chart-pop { border-radius: 20px; }
.hb-chart-p { border-radius: 10px; transition: all .2s ease; }
.hb-chart-p.is-active { box-shadow: 0 6px 14px -8px rgba(13, 24, 48, .6); }
.hb-chart-chip { border-radius: 999px; transition: all .2s ease; }
.hb-chart-chip:hover { transform: translateY(-1px); }
.hb-makas-sec { border-radius: 16px; }

/* ============================================================
   BÖLÜM 8 — KALAN SAYFALAR (ajanda, olaylar, etkinlik, canlı,
   arama, şehir, muhabir, duyurular)
   ============================================================ */
.agenda-feed .card { border-radius: 18px; transition: transform .24s cubic-bezier(.22, .61, .36, 1), box-shadow .24s ease; }
.agenda-feed .card:hover { transform: translateY(-2px); box-shadow: var(--yl-shadow-sm); }
.inc-card { border-radius: 18px; transition: transform .24s cubic-bezier(.22, .61, .36, 1), box-shadow .24s ease, border-color .24s ease; }
.inc-card:hover { transform: translateY(-3px); box-shadow: var(--yl-shadow); border-color: color-mix(in srgb, #f59e0b 45%, var(--yl-border)); }
.ev-grup__head { letter-spacing: .1em; }
.ev-grup__n {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 .5rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
    background: color-mix(in srgb, var(--yl-brand) 10%, transparent);
    color: var(--yl-brand);
}
.live-hero { border-radius: 22px; }
.live-chip { border-radius: 999px; font-weight: 800; letter-spacing: .08em; }
.live-chip:not(.live-chip-ended) { box-shadow: 0 6px 16px -8px rgba(225, 29, 46, .65); }
.live-empty {
    border-radius: 18px;
    border: 1.5px dashed var(--yl-border-strong);
    text-align: center;
    padding: 2.2rem 1rem;
    color: var(--yl-ink-faint);
}
.f-panel { border-radius: 18px; box-shadow: var(--yl-shadow-sm); }
.list-group-flush .list-group-item { transition: background .2s ease, padding-left .22s ease; }
.list-group-flush .list-group-item:hover { background: color-mix(in srgb, var(--yl-brand-soft) 45%, transparent); padding-left: .55rem; }

/* ============================================================
   BÖLÜM 9 — AUTH + FORMLAR + GENEL BUTON CİLASI
   (yalnız main içi ve auth sayfa gövdesi; header/footer formu yok)
   ============================================================ */
.auth-card {
    border-radius: 24px;
    box-shadow: var(--yl-shadow-lg);
    animation: authRise .5s cubic-bezier(.22, .61, .36, 1);
}
@keyframes authRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
main .form-control, main .form-select {
    border-radius: 13px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
main .form-control:focus, main .form-select:focus {
    border-color: color-mix(in srgb, var(--yl-brand) 55%, var(--yl-border));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--yl-brand) 14%, transparent);
}
main .form-label { font-weight: 700; font-size: .86rem; color: var(--yl-ink-soft); }
main .form-check-input:checked { background-color: var(--yl-brand); border-color: var(--yl-brand); box-shadow: 0 4px 12px -6px rgba(13, 24, 48, .6); }
main .btn-primary {
    background: linear-gradient(135deg, var(--yl-brand-strong), var(--yl-brand));
    border: 0;
    box-shadow: 0 8px 18px -10px rgba(13, 24, 48, .7);
    transition: all .22s cubic-bezier(.22, .61, .36, 1);
}
main .btn-primary:hover {
    background: linear-gradient(135deg, var(--yl-red-strong), var(--yl-red));
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -10px rgba(225, 29, 46, .65);
}
main .btn-outline-primary { transition: all .22s cubic-bezier(.22, .61, .36, 1); }
main .btn-outline-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(13, 24, 48, .55); }
main .btn-danger { background: linear-gradient(135deg, var(--yl-red), var(--yl-red-strong)); border: 0; }
main .card { border-radius: 18px; }
main .card-header { border-top-left-radius: 18px; border-top-right-radius: 18px; }
main .input-group-text { border-radius: 13px; background: var(--yl-bg-soft); border-color: var(--yl-border); }

/* ============================================================
   BÖLÜM 10 — GENEL BİLEŞEN CİLASI (modal/offcanvas/toast/alert)
   ============================================================ */
.modal-content { border-radius: 22px; box-shadow: var(--yl-shadow-lg); border: 0; }
.offcanvas { border-radius: 0 22px 22px 0; }
.toast { border-radius: 16px; box-shadow: var(--yl-shadow); }
main .alert { border-radius: 16px; border-width: 1.5px; }
main .alert-light { background: color-mix(in srgb, var(--yl-bg-soft) 70%, transparent); }
.dropdown-menu { border-radius: 16px; box-shadow: var(--yl-shadow); border-color: var(--yl-border); }
.dropdown-item { border-radius: 10px; transition: background .18s ease, padding-left .2s ease; }
.dropdown-item:hover { padding-left: 1.45rem; }
.badge { letter-spacing: .015em; }
.tooltip-inner { border-radius: 10px; }

/* ============================================================
   BÖLÜM 11 — KOYU MOD + MOBİL + HAREKET AZALTMA (Task 35 eki)
   ============================================================ */
[data-mode="dark"] main .see-all { background: var(--yl-card, #1a1f28); }
[data-mode="dark"] main .form-control:focus,
[data-mode="dark"] main .form-select:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--yl-brand) 22%, transparent); }
[data-mode="dark"] .hb-nav { background: rgba(255, 255, 255, .12); }
[data-mode="dark"] .pulse-cell:hover { background: color-mix(in srgb, var(--yl-brand-soft) 30%, transparent); }
[data-mode="dark"] .shorts-nav { background: rgba(255, 255, 255, .12); }
[data-mode="dark"] .f-panel { background: var(--yl-card, #1a1f28); }
[data-mode="dark"] main .input-group-text { background: var(--yl-bg-soft); }
@media (max-width: 679.98px) {
    .hb-slider { border-radius: 18px; }
    .hb-nav { width: 36px; height: 36px; }
    .hb-sub-panel { border-radius: 16px; }
    .shorts-showcase .shorts-card:hover { transform: none; }
    .shorts-nav { display: none; }
    .city-pulse { border-radius: 16px; }
    .pulse-cell:hover { transform: none; }
    main .btn-primary:hover { transform: none; }
    main .see-all { padding: .28rem .7rem; font-size: .8rem; }
    .auth-card { border-radius: 18px; }
    .modal-content { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .hb-slide::after, .live-dot, .auth-card { animation: none !important; }
    .hb-nav, .shorts-nav, .hb-tk, .hb-mcard, .trend-item, .pulse-cell,
    .incident-card, .live-card, .breaking-list > *, .dropdown-item,
    main .see-all, main .btn-primary { transition: none !important; }
}

/* ============================================================
   BÖLÜM 12 — KALAN SAYFA EKLERİ (Task 35 tamamlama)
   Ana sayfa mikro ekliler + canlı yayın + arama + duyurular +
   muhabir + statik sayfa + etkinlik rozetleri.
   KURAL: header/footer sınıflarına (site-header/topbar/cat-strip/
   site-footer/mobile-bottom-nav/cookie-banner) kural YOKTUR.
   ============================================================ */

/* --- 12.1 Ana sayfa mikro ekliler --- */
.time-badge {
    border-radius: 10px;
    backdrop-filter: blur(6px);
    background: linear-gradient(135deg, rgba(10, 14, 26, .78), rgba(10, 14, 26, .55));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 6px 14px -8px rgba(6, 10, 22, .8);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.live-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 999px;
    padding: .3rem .78rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--yl-red-strong), var(--yl-red));
    box-shadow: 0 8px 18px -8px rgba(225, 29, 46, .75);
}
.live-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    animation: liveBeat 1.6s ease-in-out infinite;
}
.points-badge {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--yl-brand-strong), var(--yl-brand));
    box-shadow: 0 6px 14px -6px rgba(13, 24, 48, .65);
}
.shorts-featured-chip {
    border-radius: 999px;
    background: linear-gradient(135deg, #f6b73c, #ffd66b);
    color: #3a2a04;
    font-weight: 800;
    letter-spacing: .06em;
    box-shadow: 0 6px 16px -8px rgba(246, 183, 60, .85);
}
.shorts-card-play {
    transition: transform .28s cubic-bezier(.22, .61, .36, 1), opacity .28s ease;
}
.shorts-showcase .shorts-card:hover .shorts-card-play { transform: scale(1.14); }
.shorts-card-more {
    border-radius: 20px;
    border: 1.5px dashed color-mix(in srgb, var(--yl-red) 40%, var(--yl-border));
    background: color-mix(in srgb, var(--yl-red) 4%, var(--yl-card, #fff));
    transition: transform .24s cubic-bezier(.22, .61, .36, 1), border-color .24s ease, box-shadow .24s ease;
}
.shorts-card-more:hover {
    transform: translateY(-4px);
    border-color: var(--yl-red);
    box-shadow: 0 14px 30px -18px rgba(225, 29, 46, .6);
}
.shorts-more-disc {
    background: linear-gradient(145deg, color-mix(in srgb, var(--yl-red) 16%, transparent), transparent);
    transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}
.shorts-card-more:hover .shorts-more-disc { transform: scale(1.1) rotate(-4deg); }
.hb-tk-val { font-variant-numeric: tabular-nums; font-weight: 800; }
.hb-tk-chg { font-variant-numeric: tabular-nums; font-weight: 800; }
.hb-tk.is-up .hb-tk-chg { color: #22c55e; }
.hb-tk.is-down .hb-tk-chg { color: var(--yl-red); }
.hb-tk-makas {
    border-radius: 12px;
    transition: background .22s ease, transform .22s ease;
}
.hb-tk-makas:hover { background: rgba(255, 255, 255, .08); transform: translateY(-1px); }

/* --- 12.2 Canlı yayın sayfaları (/canli-yayin, /canli-yayin/{slug}) --- */
.live-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(120% 200% at 0% 0%, rgba(225, 29, 46, .16), transparent 52%),
        radial-gradient(100% 170% at 100% 100%, rgba(51, 80, 126, .22), transparent 55%),
        var(--yl-card, #fff);
}
.live-hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--yl-red), color-mix(in srgb, var(--yl-red) 32%, transparent) 58%, transparent 86%);
    z-index: 1;
}
.live-hero-title { letter-spacing: -.02em; font-weight: 900; }
.live-hero-cta {
    transition: all .24s cubic-bezier(.22, .61, .36, 1);
    box-shadow: 0 12px 26px -12px rgba(225, 29, 46, .75);
}
.live-hero-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -14px rgba(225, 29, 46, .9);
}
.live-hero-viewers {
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.live-stat {
    border-radius: 18px;
    transition: transform .24s cubic-bezier(.22, .61, .36, 1), box-shadow .24s ease;
}
.live-stat:hover { transform: translateY(-3px); box-shadow: var(--yl-shadow); }
.live-stat-n {
    font-weight: 900;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, var(--yl-brand-strong), var(--yl-red));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.live-start-steps { border-radius: 18px; }
.live-start-steps > li { transition: background .2s ease, transform .22s ease; }
.live-start-steps > li:hover { transform: translateX(3px); }
.live-start-btn { box-shadow: 0 12px 26px -12px rgba(225, 29, 46, .75); }
.live-start-note { border-radius: 14px; }
.live-mini-view { font-variant-numeric: tabular-nums; font-weight: 800; }

/* --- 12.3 Arama sayfası: modern sekmeler --- */
main .nav-tabs {
    border-bottom: 1.5px solid var(--yl-border);
    gap: .3rem;
}
main .nav-tabs .nav-link {
    border: 0;
    border-radius: 999px;
    padding: .42rem 1rem;
    font-weight: 700;
    font-size: .88rem;
    color: var(--yl-ink-soft);
    transition: all .22s cubic-bezier(.22, .61, .36, 1);
}
main .nav-tabs .nav-link:hover { background: color-mix(in srgb, var(--yl-brand-soft) 55%, transparent); transform: translateY(-1px); }
main .nav-tabs .nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, var(--yl-brand-strong), var(--yl-brand));
    box-shadow: 0 8px 18px -10px rgba(13, 24, 48, .65);
}

/* --- 12.4 Duyurular: grup şeritleri --- */
.ann-grup {
    border-radius: 18px;
    transition: transform .24s cubic-bezier(.22, .61, .36, 1), box-shadow .24s ease;
}
.ann-grup:hover { transform: translateY(-2px); box-shadow: var(--yl-shadow-sm); }
.ann-grup .list-group-item { border-color: color-mix(in srgb, var(--yl-border) 70%, transparent); }

/* --- 12.5 Muhabir sayfası (jrnl hero + istatistikler) --- */
.jrnl-hero {
    border-radius: 22px;
    padding: 1.4rem 1.5rem;
    border: 1px solid color-mix(in srgb, var(--yl-brand) 14%, var(--yl-border));
    background:
        radial-gradient(120% 190% at 0% 0%, color-mix(in srgb, var(--yl-brand) 15%, transparent), transparent 52%),
        radial-gradient(90% 160% at 100% 100%, color-mix(in srgb, var(--yl-red) 8%, transparent), transparent 55%),
        var(--yl-card, #fff);
    box-shadow: var(--yl-shadow-sm);
    position: relative;
    overflow: hidden;
}
.jrnl-hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--yl-brand), color-mix(in srgb, var(--yl-brand) 30%, transparent) 55%, transparent 85%);
}
.jrnl-hero__av {
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from 210deg, var(--yl-brand), var(--yl-red), #ffd66b, var(--yl-brand));
    box-shadow: 0 10px 24px -12px rgba(13, 24, 48, .6);
}
.jrnl-hero__av > * { border-radius: 50%; }
.jrnl-stats { font-variant-numeric: tabular-nums; }
.jrnl-stats strong { font-weight: 900; letter-spacing: -.02em; }

/* --- 12.6 Statik sayfa (/sayfa/{slug}) --- */
.prose-card {
    border-radius: 22px;
    padding: clamp(1.2rem, 3vw, 2.2rem);
    box-shadow: var(--yl-shadow-sm);
}
.prose-card > p:first-of-type,
.prose-card > .news-content > p:first-child {
    font-size: 1.08rem;
    font-weight: 500;
    color: var(--yl-ink);
}

/* --- 12.7 Etkinlik tarih rozeti + kart --- */
.cat-ev {
    transition: transform .24s cubic-bezier(.22, .61, .36, 1), box-shadow .24s ease, border-color .24s ease;
}
.cat-ev:hover {
    transform: translateY(-3px);
    box-shadow: var(--yl-shadow);
    border-color: color-mix(in srgb, var(--cm, #6f42c1) 40%, var(--yl-border));
}
.cat-ev__date {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(160deg, color-mix(in srgb, var(--cm, #6f42c1) 16%, var(--yl-card, #fff)), var(--yl-card, #fff));
    border: 1px solid color-mix(in srgb, var(--cm, #6f42c1) 26%, var(--yl-border));
}
.cat-ev__m {
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cm, #6f42c1);
}
.cat-ev__d {
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--yl-ink);
}
.ev-grup__head {
    position: relative;
    padding-bottom: .45rem;
}
.ev-grup__head::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 46px;
    height: 3.5px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--cm, #6f42c1), transparent);
}

/* --- 12.8 Şehir / ilçe: seç-butonu ve liste mikro etkileşim --- */
.js-set-my-city { transition: all .2s ease; }
.js-set-my-city:hover { transform: translateY(-1px); }
.city-neighbor-item { transition: padding-left .2s ease; }
.city-neighbor-item:hover { padding-left: .5rem; }

/* --- 12.9 Bölüm 12 koyu mod karşılıkları --- */
[data-mode="dark"] .time-badge { background: linear-gradient(135deg, rgba(4, 7, 14, .85), rgba(4, 7, 14, .62)); }
[data-mode="dark"] .live-hero {
    background:
        radial-gradient(120% 200% at 0% 0%, rgba(225, 29, 46, .2), transparent 52%),
        radial-gradient(100% 170% at 100% 100%, rgba(51, 80, 126, .3), transparent 55%),
        var(--yl-card, #12161f);
}
[data-mode="dark"] .jrnl-hero {
    background:
        radial-gradient(120% 190% at 0% 0%, color-mix(in srgb, var(--yl-brand) 22%, transparent), transparent 52%),
        radial-gradient(90% 160% at 100% 100%, color-mix(in srgb, var(--yl-red) 12%, transparent), transparent 55%),
        var(--yl-card, #12161f);
}
[data-mode="dark"] .shorts-card-more {
    background: color-mix(in srgb, var(--yl-red) 8%, var(--yl-card, #1a1f28));
    border-color: color-mix(in srgb, var(--yl-red) 32%, var(--yl-border-strong));
}
[data-mode="dark"] .cat-ev__date {
    background: linear-gradient(160deg, color-mix(in srgb, var(--cm, #6f42c1) 24%, var(--yl-card, #1a1f28)), var(--yl-card, #1a1f28));
}
[data-mode="dark"] main .nav-tabs { border-bottom-color: var(--yl-border-strong); }
[data-mode="dark"] main .nav-tabs .nav-link:hover { background: color-mix(in srgb, var(--yl-brand-soft) 25%, transparent); }

/* --- 12.10 Bölüm 12 mobil kırılımları --- */
@media (max-width: 679.98px) {
    main .section-head { flex-wrap: wrap; gap: .45rem .6rem; }
    main .section-head .section-title { font-size: 1.04rem; line-height: 1.32; min-width: 0; flex: 1 1 auto; }
    main .section-head .see-all { flex: 0 0 auto; white-space: nowrap; }
    .shorts-live-chip { padding: .24rem .55rem; font-size: .72rem; }
    .live-hero { border-radius: 18px; }
    .jrnl-hero { padding: 1.15rem 1.15rem; border-radius: 18px; }
    .jrnl-hero__av { width: 64px; height: 64px; }
    .prose-card { border-radius: 18px; }
    .live-stat:hover { transform: none; }
    .cat-ev:hover { transform: none; }
    .live-hero-cta:hover { transform: none; }
    .shorts-card-more { border-radius: 16px; }
    main .nav-tabs .nav-link { padding: .36rem .8rem; font-size: .84rem; }
}
@media (max-width: 419.98px) {
    .live-pill { font-size: .68rem; padding: .26rem .6rem; }
    .jrnl-hero { padding: 1rem; }
    .cat-ev__d { font-size: 1.3rem; }
}

/* --- 12.11 Bölüm 12 hareket azaltma --- */
@media (prefers-reduced-motion: reduce) {
    .live-pill::before, .shorts-more-disc, .hb-tk-makas { animation: none !important; transition: none !important; }
    .time-badge, .points-badge, .shorts-featured-chip, .shorts-card-more,
    .live-hero, .live-hero-cta, .live-stat, .jrnl-hero, .jrnl-hero__av,
    .ann-grup, .cat-ev, .cat-ev__date, main .nav-tabs .nav-link,
    .js-set-my-city, .hb-tk-makas { transition: none !important; }
}