/* =============================================================================
 * Manşet (Hero Carousel) — Anasayfa v3 öne çıkan haber bandı
 * -----------------------------------------------------------------------------
 * Sunai 2026-04-30 · Patron statik mockup birebir port
 *  · Kaynak: C:/Users/musta/Downloads/Faydalı Bilgin/manset.html (style bloğu 11-78)
 *  · Markup: views/front/anasayfa/v3/index.php (.hero-carousel + .hc-* yapısı)
 *  · JS    : public/assets/theme-v3/carousel.js (7 sn rotasyon, IO pause)
 *
 * SCOPE: Tüm token'lar .hero-carousel altında scope'lu — sayfanın geri kalanı
 *        eski tema değişkenlerini kullanmaya devam eder. Ana font da yine scope'lu.
 *
 * KATEGORİ EŞLEŞMESİ: --cat-c renkleri data-cat attr'una bağlı.
 *   index.php'de $dataKat() callback'i tüm kategori slug'larını eşler:
 *   saglik, diyet, guzellik, moda, dekorasyon, elisleri, teknoloji, yemek,
 *   yasam, ev, psikoloji, finans, faydali (fallback).
 *
 * REDUCED-MOTION: hcfill keyframe + img scale + opacity transition fallback
 *                 prefers-reduced-motion: reduce bloğunda durdurulur.
 * ========================================================================= */

/* ----- AdSense ad/content separation policy uyumu (Sunai 2026-05-01) -------
 * 30.04 Patron tespit: .sf-ad-header alt sınırı manşet üst sınırına (361px)
 * yapışık — gap_px=0. AdSense Policy "Ad/Content Separation": reklam ile
 * içerik arası net görsel ayrım + accidental click engeli zorunlu.
 *
 * Strateji: header banner doğrudan manşetin önündeyse 32px boşluk + 8px
 * padding-bottom + 1px hairline border. theme.css'deki .sf-ad-header
 * { min-height } tanımı override edilmez (specificity uyumlu birleşim).
 * 13 site sweep gerekirse ortak theme.css'e taşınır. */
.sf-ad.sf-ad-header,
.sf-ad-header {
    margin-bottom: 20px !important;
}

[data-theme="dark"] .sf-ad-header {
    border-bottom-color: #2A2745;
}

@media (max-width: 640px) {
    .sf-ad-header {
        margin-bottom: 24px;
    }
}

/* ----- Manşet design token'ları (sadece .hero-carousel scope'unda) ---------- */
.hero-carousel {
    /* Patron yeni paleti (theme.css mockup'tan) */
    --bg-base       : #FAFAFA;
    --bg-surface    : #FFFFFF;
    --bg-subtle     : #F4F4F6;
    --bg-deep       : #EEF2FF;
    --border-soft   : #E5E5E5;
    --border-medium : #D1D1D6;
    --text-primary  : #1E1B4B;
    --text-secondary: #4C4677;
    --text-muted    : #6B6A8A;
    --accent        : #4338CA;

    /* Kategori palet — hc-item[data-cat] üstünden seçilir */
    --cat-saglik     : #4338CA;
    --cat-diyet      : #1F6E3F;
    --cat-faydali    : #4C4677;
    --cat-dekorasyon : #A16207;
    --cat-moda       : #6D28D9;
    --cat-teknoloji  : #1E40AF;
    --cat-yemek      : #B91C1C;
    --cat-yasam      : #0F766E;
    --cat-elisleri   : #9A3412;
    --cat-guzellik   : #9D174D;

    /* Layout iskelet */
    display              : grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    border               : 1px solid var(--border-soft);
    background           : var(--bg-base);
    overflow             : hidden;
    height               : 450px;
    font-family          : 'Inter', system-ui, -apple-system, sans-serif;
}

/* ----- Dark mode override (FBPortal data-theme="dark") --------------------- */
[data-theme="dark"] .hero-carousel {
    --bg-base       : #0F0E1A;
    --bg-surface    : #15142A;
    --bg-subtle     : #1A1830;
    --bg-deep       : #1E1B4B;
    --border-soft   : #2A2745;
    --border-medium : #3F3B66;
    --text-primary  : #F5F4FF;
    --text-secondary: #B8B4D9;
    --text-muted    : #8A86B0;
    --accent        : #818CF8;
}

/* ----- Sol panel: aktif slide (büyük görsel + meta) ------------------------ */
.hero-carousel .hc-main {
    position  : relative;
    overflow  : hidden;
    background: var(--bg-deep);
    height    : 100%;
}

.hero-carousel .hc-slide {
    position      : absolute;
    inset         : 0;
    opacity       : 0;
    transition    : opacity .8s ease;
    pointer-events: none;
    display       : grid;
    grid-template-rows: 1fr auto;
}

.hero-carousel .hc-slide.active {
    opacity       : 1;
    pointer-events: auto;
}

.hero-carousel .hc-img {
    position : relative;
    overflow : hidden;
    min-height: 0;
}

.hero-carousel .hc-img img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    transition: transform 8s ease;
}

.hero-carousel .hc-slide.active .hc-img img {
    transform: scale(1.06);
}

.hero-carousel .hc-img::after {
    content       : '';
    position      : absolute;
    inset         : 0;
    background    : linear-gradient(0deg, rgba(30, 27, 75, .55) 0%, rgba(30, 27, 75, 0) 50%);
    pointer-events: none;
}

/* Mockup'ta kategori rozetini gizliyor (hc-eye satırı yetiyor) */
.hero-carousel .hc-img .badge {
    display: none;
}

.hero-carousel .hc-body {
    padding       : 14px 22px 16px;
    background    : var(--bg-base);
    display       : flex;
    flex-direction: column;
    gap           : 6px;
}

.hero-carousel .hc-eye {
    font-size      : 10px;
    font-weight    : 700;
    letter-spacing : 0.2em;
    text-transform : uppercase;
    color          : var(--accent);
}

.hero-carousel .hc-title {
    font-weight       : 800;
    font-size         : clamp(1.3rem, 1rem + 1vw, 1.75rem);
    line-height       : 1.25;
    letter-spacing    : -0.02em;
    color             : var(--text-primary);
    text-wrap         : balance;
    margin            : 0;
    display           : -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow          : hidden;
    padding-bottom    : 2px;
}

.hero-carousel .hc-title a {
    color          : inherit;
    text-decoration: none;
}

.hero-carousel .hc-title a:hover {
    color: var(--accent);
}

.hero-carousel .hc-meta {
    display        : flex;
    gap            : 10px;
    flex-wrap      : wrap;
    font-size      : 9.5px;
    letter-spacing : 0.08em;
    text-transform : uppercase;
    color          : var(--text-muted);
    padding-top    : 2px;
    font-weight    : 500;
}

.hero-carousel .hc-meta b {
    color      : var(--text-primary);
    font-weight: 600;
}

.hero-carousel .hc-meta .cta {
    margin-left   : auto;
    color         : var(--accent);
    font-weight   : 700;
    letter-spacing: 0.1em;
}

/* ----- Sağ panel: 6 başlık listesi (tab davranışı) ------------------------- */
.hero-carousel .hc-side {
    background    : var(--bg-base);
    color         : var(--text-primary);
    display       : flex;
    flex-direction: column;
    border-left   : 1px solid var(--border-soft);
    max-height    : 100%;
}

.hero-carousel .hc-side-head {
    padding        : 10px 18px;
    font-size      : 10px;
    font-weight    : 700;
    letter-spacing : 0.2em;
    text-transform : uppercase;
    color          : var(--accent);
    border-bottom  : 1px solid var(--border-soft);
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    flex-shrink    : 0;
}

.hero-carousel .hc-side-head .count {
    color      : var(--text-muted);
    font-weight: 500;
}

.hero-carousel .hc-item-list {
    flex          : 1 1 auto;
    overflow      : hidden;
    min-height    : 0;
    display       : flex;
    flex-direction: column;
}

.hero-carousel .hc-item {
    --cat-c              : var(--text-muted);
    flex                 : 1 1 0;
    min-height           : 0;
    display              : grid;
    grid-template-columns: 20px 80px 1fr;
    gap                  : 12px;
    padding              : 0 18px;
    border-bottom        : 1px solid var(--border-soft);
    cursor               : pointer;
    text-align           : left;
    background           : transparent;
    border-top           : none;
    border-right         : none;
    border-left          : 2px solid transparent;
    color                : inherit;
    transition           : all .25s;
    position             : relative;
    font-family          : inherit;
    align-items          : center;
    width                : 100%;
}

.hero-carousel .hc-item:last-of-type {
    border-bottom: none;
}

.hero-carousel .hc-item:hover {
    background: var(--bg-subtle);
}

.hero-carousel .hc-item.active {
    border-left-color: var(--cat-c);
    background       : color-mix(in srgb, var(--cat-c) 8%, transparent);
}

.hero-carousel .hc-item.active::after {
    content   : '';
    position  : absolute;
    left      : 2px;
    bottom    : 0;
    height    : 2px;
    width     : 0;
    background: var(--cat-c);
    animation : hcfill 7s linear forwards;
}

@keyframes hcfill {
    to {
        width: calc(100% - 2px);
    }
}

.hero-carousel .hc-item .n {
    font-weight   : 700;
    font-size     : 13px;
    color         : var(--text-muted);
    line-height   : 1;
    letter-spacing: -0.01em;
}

.hero-carousel .hc-item .thumb {
    width      : 80px;
    height     : 56px;
    overflow   : hidden;
    background : var(--bg-deep);
    flex-shrink: 0;
}

.hero-carousel .hc-item .thumb img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    display   : block;
    transition: transform .4s ease;
}

.hero-carousel .hc-item:hover .thumb img {
    transform: scale(1.08);
}

.hero-carousel .hc-item.active .n {
    color: var(--cat-c);
}

.hero-carousel .hc-item .cat {
    font-size      : 9px;
    letter-spacing : 0.14em;
    text-transform : uppercase;
    color          : var(--cat-c);
    margin-bottom  : 3px;
    font-weight    : 700;
}

.hero-carousel .hc-item .ttl {
    font-weight       : 600;
    font-size         : 14px;
    line-height       : 1.28;
    color             : var(--text-primary);
    letter-spacing    : -0.005em;
    display           : -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow          : hidden;
    padding-bottom    : 1px;
}

.hero-carousel .hc-item.active .ttl {
    color: var(--text-primary);
}

/* ----- Kategori → renk eşleştirme (data-cat attr ile) ---------------------- */
.hero-carousel .hc-item[data-cat="saglik"]     { --cat-c: var(--cat-saglik); }
.hero-carousel .hc-item[data-cat="diyet"]      { --cat-c: var(--cat-diyet); }
.hero-carousel .hc-item[data-cat="faydali"]    { --cat-c: var(--cat-faydali); }
.hero-carousel .hc-item[data-cat="dekorasyon"] { --cat-c: var(--cat-dekorasyon); }
.hero-carousel .hc-item[data-cat="moda"]       { --cat-c: var(--cat-moda); }
.hero-carousel .hc-item[data-cat="teknoloji"]  { --cat-c: var(--cat-teknoloji); }
.hero-carousel .hc-item[data-cat="yemek"]      { --cat-c: var(--cat-yemek); }
.hero-carousel .hc-item[data-cat="yasam"]      { --cat-c: var(--cat-yasam); }
.hero-carousel .hc-item[data-cat="elisleri"]   { --cat-c: var(--cat-elisleri); }
.hero-carousel .hc-item[data-cat="guzellik"]   { --cat-c: var(--cat-guzellik); }
.hero-carousel .hc-item[data-cat="ev"]         { --cat-c: var(--cat-dekorasyon); }
.hero-carousel .hc-item[data-cat="psikoloji"]  { --cat-c: var(--cat-moda); }
.hero-carousel .hc-item[data-cat="finans"]     { --cat-c: var(--cat-teknoloji); }
.hero-carousel .hc-item:not([data-cat]),
.hero-carousel .hc-item[data-cat=""]           { --cat-c: var(--text-muted); }

/* ----- Alt çubuk: ok butonları + "Otomatik · 7 sn" ------------------------- */
.hero-carousel .hc-side-foot {
    padding        : 8px 18px;
    border-top     : 1px solid var(--border-soft);
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    font-size      : 9.5px;
    letter-spacing : 0.14em;
    text-transform : uppercase;
    color          : var(--text-muted);
    flex-shrink    : 0;
    font-weight    : 500;
}

.hero-carousel .hc-arrows {
    display: flex;
    gap    : 4px;
}

.hero-carousel .hc-arrows button {
    width          : 24px;
    height         : 24px;
    border         : 1px solid var(--border-medium);
    background     : transparent;
    color          : var(--text-secondary);
    cursor         : pointer;
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    transition     : all .2s;
}

.hero-carousel .hc-arrows button:hover {
    background  : var(--accent);
    color       : #fff;
    border-color: var(--accent);
}

.hero-carousel .hc-arrows svg {
    width : 10px;
    height: 10px;
}

/* ----- Mobil <1024px: tek kolon stack ------------------------------------- */
@media (max-width: 1023px) {
    /* Mobil: tek wrapper iki ayrı karta bölünür — büyük slide üstte, "Öne Çıkanlar" altta. */
    .hero-carousel {
        grid-template-columns: 1fr;
        height               : auto;
        border               : none;
        background           : transparent;
        gap                  : 16px;
    }

    .hero-carousel .hc-main {
        aspect-ratio : 5 / 4;
        border       : 1px solid var(--border-soft);
        border-radius: 8px;
        overflow     : hidden;
        background   : var(--bg-deep);
    }

    .hero-carousel .hc-side {
        border       : 1px solid var(--border-soft);
        border-left  : 1px solid var(--border-soft);
        border-radius: 8px;
        overflow     : hidden;
        background   : var(--bg-base);
    }

    /* hc-item mobil: parent height auto → flex: 1 0 0 sıkıştırıyor.
       İçerik yüksekliğine göre auto, min 72px güvence. */
    .hero-carousel .hc-item {
        flex      : 0 0 auto;
        min-height: 72px;
        padding   : 12px 18px;
    }
    .hero-carousel .hc-item .thumb {
        width : 80px;
        height: 56px;
    }
}

/* ----- Erişilebilirlik: prefers-reduced-motion fallback -------------------- */
@media (prefers-reduced-motion: reduce) {
    .hero-carousel .hc-slide,
    .hero-carousel .hc-img img,
    .hero-carousel .hc-item .thumb img,
    .hero-carousel .hc-arrows button {
        transition: none !important;
    }

    .hero-carousel .hc-slide.active .hc-img img {
        transform: none;
    }

    .hero-carousel .hc-item.active::after {
        animation: none;
        width    : calc(100% - 2px);
    }
}