/* ELEKTRİK HABER BANDI - stiller (haber_bandi.php tarafından yüklenir)
   Tüm sınıflar "hb-" ile başlar; sayfanın Tailwind/CSS'i ile çakışmaz. */
    /* Tüm sınıflar "hb-" ile başlar. Renkler/yuvarlaklıklar index.html'in slate + amber tasarımıyla aynıdır. */
    .hb-wrap {
        --hb-bg: #0f172a;          /* slate-900 */
        --hb-border: #1e293b;      /* slate-800 */
        --hb-title: #f1f5f9;       /* slate-100 */
        --hb-desc: #94a3b8;        /* slate-400 */
        --hb-accent: #f59e0b;      /* amber-500 */
        --hb-local: #34d399;       /* emerald-400 */
        --hb-gap: 16px;            /* bandın üstündeki ve altındaki boşluk (tek yerden ayarlanır) */
        display: flex;
        align-items: stretch;
        width: calc(100% - 32px);
        max-width: 1216px;
        margin: var(--hb-gap) auto;   /* üst ve alt boşluk eşit */
        background: var(--hb-bg);
        border: 1px solid var(--hb-border);
        border-left: 4px solid var(--hb-accent);
        border-radius: 16px;
        font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        line-height: 1.5;
        overflow: hidden;
    }
    .hb-wrap *, .hb-modal-overlay * { box-sizing: border-box; }

    /* Bandın hemen altındaki bölümün kendi üst iç boşluğunu (py-14 / sm:py-20) sıfırla;
       böylece bandın altındaki boşluk, üstündekiyle (--hb-gap) birebir aynı olur.
       Band görünmezse (haber yoksa) bu kural devreye girmez, bölüm normal boşluğunu korur. */
    .hb-wrap + section { padding-top: 0; }

    .hb-label {
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0 16px;
        font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .2px;
        color: #fff;
        white-space: nowrap;
        background: rgba(245, 158, 11, 0.07);
        border-right: 1px solid var(--hb-border);
    }
    .hb-dot {
        width: 10px; height: 10px; border-radius: 50%;
        background: #10b981;
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
        animation: hb-pulse 2s infinite;
    }
    @keyframes hb-pulse {
        0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
        70%  { transform: scale(1);    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
    }

    .hb-viewport {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    }
    .hb-track {
        display: flex;
        width: max-content;
        animation: hb-scroll var(--hb-duration, 60s) linear infinite;
        will-change: transform;
    }
    @keyframes hb-scroll {
        from { transform: translateX(0); }
        to   { transform: translateX(calc(var(--hb-shift, 0px) * -1)); }
    }
    .hb-wrap.hb-paused .hb-track { animation-play-state: paused; }
    /* Fare üstüne gelince durur (dokunmatik ekranda 'takılı hover' olmasın diye yalnızca fareli cihazlarda) */
    @media (hover: hover) and (pointer: fine) {
        .hb-wrap:hover .hb-track { animation-play-state: paused; }
    }
    /* Klavyeyle gezinirken durur; fareyle tıklayınca odak kalıcı duraklatma yapmaz */
    .hb-wrap:has(.hb-item:focus-visible) .hb-track { animation-play-state: paused; }

    .hb-group { display: flex; flex: none; }

    .hb-item {
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-right: 32px;
        padding: 13px 0;
        background: none;
        border: 0;
        font: inherit;
        color: var(--hb-title);
        cursor: pointer;
        white-space: nowrap;
        text-align: left;
    }
    .hb-item:hover .hb-item-title,
    .hb-item:focus-visible .hb-item-title { color: var(--hb-accent); }
    .hb-item:focus-visible { outline: 2px solid var(--hb-accent); outline-offset: 2px; border-radius: 6px; }
    .hb-item h3 { margin: 0; }

    .hb-tag {
        background: rgba(245, 158, 11, 0.10);
        color: #fbbf24;            /* amber-400 */
        font-weight: 700;
        padding: 3px 9px;
        border-radius: 6px;
        text-transform: uppercase;
        font-size: 10px;
        letter-spacing: 0.5px;
    }
    .hb-local .hb-tag { background: rgba(16, 185, 129, 0.12); color: var(--hb-local); }
    .hb-item-title { font-size: 13px; font-weight: 600; transition: color 0.2s; }
    .hb-item-date  { font-size: 12px; color: var(--hb-desc); }
    .hb-sep { color: var(--hb-accent); margin-left: 22px; }

    .hb-toggle {
        flex: none;
        width: 44px;
        background: none;
        border: 0;
        border-left: 1px solid var(--hb-border);
        color: var(--hb-desc);
        font-size: 14px;
        cursor: pointer;
        transition: color 0.2s, background 0.2s;
    }
    .hb-toggle:hover, .hb-toggle:focus-visible { color: #020617; background: var(--hb-accent); outline: none; }

    /* Detay penceresi */
    .hb-modal-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(2, 6, 23, 0.82);   /* slate-950 */
        -webkit-backdrop-filter: blur(4px);
                backdrop-filter: blur(4px);
        z-index: 9999;
        align-items: center;
        justify-content: center;
        padding: 16px;
        font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    }
    .hb-modal-overlay.hb-open { display: flex; }
    .hb-modal {
        position: relative;
        width: 100%;
        max-width: 580px;
        max-height: 90vh;
        overflow-y: auto;
        background: #0f172a;
        color: #f1f5f9;
        border: 1px solid #1e293b;
        border-radius: 16px;
        padding: 24px;
    }
    .hb-modal.hb-local { border-color: rgba(16, 185, 129, 0.55); }
    .hb-modal-close {
        position: absolute; top: 12px; right: 14px;
        background: transparent; border: 0;
        font-size: 24px; line-height: 1;
        color: #94a3b8; cursor: pointer;
    }
    .hb-modal-close:hover, .hb-modal-close:focus-visible { color: #f59e0b; outline: none; }
    .hb-modal-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-right: 28px; font-size: 12px; color: #94a3b8; }
    .hb-modal-title { font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 20px; font-weight: 800; line-height: 1.35; margin: 0 0 12px; color: #fff; }
    .hb-modal-body p { font-size: 14px; line-height: 1.75; color: #cbd5e1; margin: 0 0 12px; }
    .hb-modal .hb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
    .hb-modal .hb-tags span { font-size: 10px; padding: 2px 8px; border-radius: 999px; background: #1e293b; color: #94a3b8; }
    .hb-modal-footer {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
        margin-top: 18px; padding-top: 14px;
        border-top: 1px solid #1e293b;
        font-size: 12px; color: #94a3b8;
    }
    .hb-modal-actions { display: flex; gap: 8px; }
    .hb-btn {
        display: inline-block;
        background: #f59e0b;
        border: 1px solid #f59e0b;
        color: #020617;
        padding: 8px 18px;
        border-radius: 10px;
        font: inherit;
        font-size: 13px; font-weight: 700;
        cursor: pointer;
        transition: background 0.2s, border-color 0.2s;
    }
    .hb-btn:hover, .hb-btn:focus-visible { background: #fbbf24; border-color: #fbbf24; outline: none; }

    .hb-full { display: none; }

    /* JS yoksa bant kaymaz; yatay kaydırılabilir şerit olarak görünür */
    .hb-wrap:not(.hb-js) .hb-track { animation: none; }
    .hb-wrap:not(.hb-js) .hb-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .hb-wrap:not(.hb-js) .hb-toggle { display: none; }

    @media (min-width: 640px) { .hb-wrap { width: calc(100% - 48px); } }
    @media (min-width: 1024px) { .hb-wrap { width: calc(100% - 64px); } }
    @media (max-width: 600px) {
        .hb-label span.hb-label-text { display: none; }  /* dar ekranda yalnızca canlı nokta kalır */
        .hb-label { padding: 0 12px; }
    }
    @media (prefers-reduced-motion: reduce) {
        .hb-track { animation: none; }
        .hb-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
        .hb-group[aria-hidden="true"] { display: none; }
        .hb-toggle { display: none; }
    }