:root{
  --bg:#0f172a;--card:#1e293b;--border:#334155;--text:#f8fafc;--muted:#94a3b8;
  --primary:#00ff9d;--live:#ef4444;--shadow:0 4px 16px rgba(0,0,0,.4);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* Font utama: Lato Bold untuk semua teks */
* {
    font-family: 'Lato', sans-serif !important;
    font-weight: 700 !important;   /* Bold di mana-mana */
}

/* Supaya teks biasa tetap terlihat normal (optional) */
.news-title,
.news-meta,
.news-excerpt,
.news-source {
    font-weight: 700 !important;
}

/* Background & warna sesuai tema SCOREID */
body {
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
}

header{background:#0b1120;padding:1rem;text-align:center;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;backdrop-filter:blur(10px)}
.logo{font-size:2.1rem;font-weight:900;color:var(--primary);letter-spacing:-1.5px}
.subtitle{color:var(--muted);font-size:.92rem;margin-top:.3rem}
.container{max-width:1200px;margin:0 auto;padding:1rem}

/* Tabs */
.tab-container{max-width:900px;margin:1.2rem auto;padding:0 1px}
.tab-buttons{display:flex;background:rgba(0,255,157,.08);scrollbar-width:none;overflow-x:auto}
.tab-buttons::-webkit-scrollbar{display:none}
.tab-btn{flex:1;min-width:50px;padding:.8rem .3rem;text-align:center;color:var(--muted);cursor:pointer;transition:.3s;font-size:.75rem;white-space:nowrap;position:relative}
.tab-btn.active{color:var(--primary);background:rgba(0,255,157,.15)}
.tab-btn.live.active::before{content:"●";color:var(--live);animation:pulse 1.5s infinite;margin-right:.4rem}
.tab-btn::after{content:'';position:absolute;bottom:0;left:50%;width:0;height:3px;background:var(--primary);transition:.3s;transform:translateX(-50%)}
.tab-btn.active::after{width:65%}
.tab-content{padding:1.3rem 8px;max-width:900px;margin:0 auto}

/* Filters & Button */
.filters{display:flex;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap;align-items:center}
select,input{padding:1rem;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text);flex:1 1 200px;outline:none}
select:focus,input:focus{border-color:var(--primary)}
button{padding:.8rem 1.4rem;border:none;border-radius:10px;background:var(--primary);color:#000;font-weight:600;cursor:pointer;transition:.2s}
button:hover{background:#00e68a}
button.secondary{background:var(--card);color:var(--text);border:1px solid var(--border)}

.count{text-align:center;padding:.9rem;background:var(--card);border-radius:10px;margin:1rem 0;color:var(--primary);font-size:1rem}

/* Match Card */
.match-card{background:var(--card);border-radius:12px;margin-bottom:.9rem;overflow:hidden;box-shadow:var(--shadow);transition:transform .25s}
.match-card:hover{transform:translateY(-3px)}
.match-header{background:rgba(0,255,157,.12);padding:.9rem 1.1rem;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:.8rem}
.match{display:grid;grid-template-columns:1fr auto 1fr;padding:1.1rem;gap:1rem;border-bottom:1px solid var(--border);align-items:center}
.match:last-child{border-bottom:none}
.team{display:flex;align-items:center;gap:.8rem;font-weight:500;min-width:0}
.team span{white-space:normal;overflow:visible;text-overflow:unset;word-wrap:break-word;line-height:1.3}
.team.home{justify-content:flex-end;text-align:right;flex-direction:row-reverse}
.team.away{flex-direction:row-reverse;text-align:right}
.crest{width:34px;height:34px;object-fit:contain;border-radius:6px;background:#fff;padding:4px;flex-shrink:0}
.score{font-size:1.6rem;font-weight:800;color:var(--primary);text-align:center}
.status,.time{text-align:center;font-size:.85rem;margin-top:.3rem}
.live-status{color:var(--live);animation:blink 1s infinite}

.watch-container {
    margin-top: 6px; /* jarak antara jam dan tombol */
}

.watch-btn {
    padding: 6px 10px; 
    font-size: 0.75rem;
    border-radius: 6px;
    background: var(--primary);
    color: #000;
    font-weight: 600;
    cursor: pointer;
}

.watch-btn:hover {
    background: #00e68a;
}

.container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 2rem;
}

@media (min-width: 1024px) {

.tab-container,
    .tab-content {
        max-width: 1500px !important;
        width: 100% !important;
    }

    .match-card {
        max-width: 1500px !important;
    }
}

#newsBar,
.news-slider-wrap,
.news-slider {
    width: 100% !important;
    max-width: 100% !important;
}

/* JUDUL SECTION */
#newsBar .section-title {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--primary);
    margin: 8px 0 10px 0;
    padding-left: 12px;
    border-left: 5px solid var(--primary);
}

/* SLIDER */
.news-slider,
#newsSlider {
    display: flex;
    overflow-x: auto;
    gap: 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 0 16px 0;
    -webkit-overflow-scrolling: touch;
}

.news-slider::-webkit-scrollbar,
#newsSlider::-webkit-scrollbar {
    height: 6px;
}

.news-slider::-webkit-scrollbar-thumb,
#newsSlider::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 3px;
}

/* WRAP */
.news-slider-wrap {
    width: 100%;
    overflow: hidden;
}

/* CARD — PC & MOBILE SAMA */
.news-card {
    flex: 0 0 88vw;         
    max-width: 420px;   
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    transition: all 0.25s ease;
    height: 420px;          
}

/* HOVER (tidak mengubah layout mobile) */
.news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

/* GAMBAR */
.news-thumb {
    width: 100%;
    height: 240px;          
    object-fit: cover;
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
}

/* JUDUL */
.news-title {
    padding: 10px 12px 0;
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--text);

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 72px;
}

.news-excerpt {
    padding: 8px 14px 0;
    margin: 0;
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.45;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 66px;
}

.news-meta {
    padding: 8px 10px;
    font-size: 0.8rem;
    color: var(--muted);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: auto;
    border-top: 1px solid var(--border);
    background: rgba(0,255,157,0.04);
}

.news-source { display: none !important; }

.news-date {
    font-weight: 700;
    color: var(--primary);
}


.no-time {
    background: #f2f2f2 !important;
    color: #777 !important;
    border-left: 4px solid #ccc;
}

    .popup-overlay {
        display: none;
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .popup-content {
        position: relative;
        height: 70vh;      
        max-height: 600px;    
        width: auto;
        aspect-ratio: 700 / 1280; 
        background: transparent;
        padding: 0;
        box-shadow: none;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .banner-link {
        display: block;
        width: 100%;
        height: auto;
    }

    .banner-image {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 0;
        object-fit: cover; 
    }

    .close-btn {
        position: absolute;
        top: 8px;
        right: 10px;
        background: white;
        color: black;
        font-size: 22px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
        z-index: 10;
    }

    /* Responsif untuk semua tipe mobile (kecil hingga besar) */
    @media (max-width: 768px) {
        .popup-content {
            width: 95%; /* Lebih lebar di mobile kecil untuk user-friendly */
        }
        .close-btn {
            top: 10px;
            right: 5px;
            font-size: 24px;
            width: 30px;
            height: 30px;
        }
    }

    /* Tambahan untuk mobile sangat kecil (misalnya <400px lebar) */
    @media (max-width: 400px) {
        .popup-content {
            width: 98%; /* Hampir full screen di ponsel kecil */
        }
    }