/* =========================
   1. GLOBAL & THEME
========================= */
:root { --bg-light:#ffffff; --bg-card:#ffffff; --border-light:#e0e0e0; --netflix-red:#e50914; --text-main:#1a1a1a; }
body { background-color:var(--bg-light); color:var(--text-main); font-family:'Inter',sans-serif; margin:0; overflow-x:hidden; }

/* =========================
   2. NAVBAR STRUCTURE
========================= */
/* MOBILE DEFAULT */
.navbar-custom { background:#fff; padding-top:10px; position:relative; z-index:1000; }
.nav-top-row { display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; }

/* Navbar kedua sticky terpisah di mobile */
.nav-bottom-row-sticky { position:sticky; top:0; width:100%; background:#fff; z-index:1020; padding:5px 0; }

/* DESKTOP & TABLET */
@media (min-width:992px){

  /* Navbar utama normal (tidak sticky sendiri) */
  .navbar-custom {
      position:relative;
  }

  /* Navbar kedua tetap sticky */
  .nav-bottom-row-sticky {
      position:sticky;
      box-shadow:none;
      border-bottom:none;
      padding:10px 0;
  }

}

/* =========================
   3. MENU ITEMS & SCROLL
========================= */
.user-profile-icon { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--border-light); border-radius:50%; background:#fff; color:#000; text-decoration:none; transition:.2s; }
.btn-register { padding:8px 20px; border-radius:50px; font-weight:700; font-size:.85rem; background:#000; color:#fff; text-decoration:none; display:flex; align-items:center; white-space:nowrap; transition:.2s; border:none; }

.menu-scroll-container { position:relative; display:flex; align-items:center; width:100%; }
.menu-scroll-wrapper { display:flex; overflow-x:auto; scroll-behavior:smooth; white-space:nowrap; padding:5px 0; gap:12px; scrollbar-width:none; -ms-overflow-style:none; }
.menu-scroll-wrapper::-webkit-scrollbar { display:none; }
.menu-item { display:inline-block; padding:6px 18px; font-size:13px; font-weight:600; color:#000000; text-decoration:none; border-radius:50px; background:#f1f1f1; transition:.2s; }
.menu-item.active { background:#000; color:#fff; }

.btn-login-outline { display: inline-flex; align-items: center; padding: 6px 20px; font-size: 0.85rem; font-weight: 700; color: #1a1a1a; text-decoration: none !important; border: 1.5px solid #1a1a1a; border-radius: 50px; transition: all 0.3s ease; letter-spacing: 0.5px; }
.btn-login-outline:hover { background-color: #1a1a1a; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

/* =========================
   4. SCROLL BUTTONS
========================= */
.scroll-btn { position:absolute; width:34px; height:34px; background:#fff; border:1px solid #ddd; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:15; box-shadow:0 2px 8px rgba(0,0,0,0.1); color:#000; }
.btn-left { left:0; display:none; }
.btn-right { right:0; }
.grad-left,.grad-right { position:absolute; top:0; bottom:0; width:60px; z-index:5; pointer-events:none; }
.grad-left { left:0; background:linear-gradient(to right,white 40%,transparent); display:none; }
.grad-right { right:0; background:linear-gradient(to left,white 40%,transparent); }

.btn-view-all-round {
    width:32px;
    height:32px;
    background:var(--netflix-red);
    color:#fff !important;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:.3s;
    font-size:14px;
}

.btn-view-all-round:hover {
    transform:rotate(45deg);
    background:#000;
}

/* Replay Scroll Buttons */
#btn-replay-left, 
#btn-replay-right,
#btn-sch-left,
#btn-sch-right,
#btn-news-left,
#btn-news-right {
    width:32px;
    height:32px;
    border-radius:50%;
    border:1px solid #ddd;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    transition:.2s;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

#btn-replay-left:hover, 
#btn-replay-right:hover,
#btn-sch-left:hover,
#btn-sch-right:hover,
#btn-news-left:hover,
#btn-news-right:hover {
    background:#000;
    color:#fff;
    border-color:#000;
}

/* =========================
   5. HERO BANNER
========================= */
.hero-wrapper { position:relative; border-radius:24px; overflow:hidden; background:#000; height:500px; width:100%; background-size:cover; background-position:center; }
.hero-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.35); z-index:1; }
.hero-info-pos { position:relative; z-index:10; padding:40px; }

@media (max-width:768px){
.hero-wrapper { height:380px; }
}

.btn-play-pill { background:var(--netflix-red); color:#fff !important; padding:10px 35px; border-radius:50px; font-weight:800; text-decoration:none; display:inline-flex; align-items:center; gap:10px; transition:.3s; }
.btn-play-center { width:80px; height:80px; background:var(--netflix-red); color:#fff !important; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:40px; text-decoration:none; transition:.3s; box-shadow:0 0 30px rgba(229,9,20,.4); z-index:10; }

/* =========================
   6. MATCH CARDS
========================= */
.section-title { font-weight:800; letter-spacing:-.5px; font-size:1.4rem; }
.scroll-content-wrapper {
    display:flex;
    overflow-x:auto;
    gap:12px;
    padding:10px 0 5px 0;
    scrollbar-width:none;
    align-items:flex-start;
}

.scroll-content-wrapper::-webkit-scrollbar {
    display:none;
}

.match-card-scroll { min-width:300px; background:#fff; border:1px solid #eee; border-radius:16px; padding:15px; flex:0 0 auto; display:flex; align-items:center; text-decoration:none; color:inherit; position:relative; transition:.2s; }
.match-card-scroll:hover { border-color:#bbb; transform:translateY(-2px); }

.team-logo-card { width:42px; height:42px; object-fit:contain; background:#f9f9f9; border-radius:8px; padding:4px; }
.team-box { flex:1; text-align:center; font-weight:700; font-size:.82rem; white-space:normal; }
.vs-divider { padding:0 8px; text-align:center; border-left:1px solid #eee; border-right:1px solid #eee; margin:0 8px; }
.vs-divider .time { color:var(--netflix-red); font-weight:800; font-size:.95rem; display:block; }
.vs-divider .date { font-size:.65rem; color:#888; text-transform:uppercase; }
.league-badge { position:absolute; top:-8px; left:15px; background:#000; color:#fff; font-size:9px; padding:2px 8px; border-radius:4px; font-weight:700; }

/* =========================
   7. NEWS CARDS
========================= */
.news-card-scroll { min-width:320px; max-width:400px; height:auto; flex:0 0 auto; text-decoration:none !important; display:flex; flex-direction:column; transition:.3s; }
.news-card-scroll:hover { transform:translateY(-4px); }
.news-img-wrapper { width:100%; aspect-ratio:19/6; border-radius:12px; overflow:hidden; margin-bottom:10px; background:#f5f5f5; }
.news-img-wrapper img { width:100%; height:100%; object-fit:cover; }
.category-tag { display:block; font-size:.65rem; font-weight:800; color:var(--netflix-red); text-transform:uppercase; margin-bottom:4px; }
.news-title { font-weight:700; font-size:.95rem; line-height:1.3; color:#1a1a1a; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; }

/* =========================
   8. GRADIENT SYSTEM
========================= */
.grad-nav-bottom { position:fixed; left:0; width:100%; height:50px; background:linear-gradient(to bottom,white,transparent); z-index:1001; pointer-events:none; opacity:0; visibility:hidden; top: 50px; transition:.4s; }
.grad-bottom { position:fixed; bottom:0; left:0; width:100%; height:100px; background:linear-gradient(to top,white 20%,transparent); z-index:1001; pointer-events:none; transition:.4s; opacity:1; visibility:visible; }

@media (min-width:992px){ .grad-nav-bottom { top: 61px; } }

@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.3;} }
.bi-circle-fill { animation:blink 1.2s infinite; }

/* Teks Utama Hero */
.hero-main-title {
    font-size: 2.5rem;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin-bottom: 10px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

/* Sub-teks Hero */
.hero-sub-title {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.9);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.4;
}

/* Responsif untuk Mobile */
@media (max-width: 768px) {
    .hero-main-title {
        font-size: 1.8rem;
    }
    .hero-sub-title {
        font-size: 0.95rem;
    }
}

/* Iklan */
.ad-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 90px;
    background: rgba(0,0,0,0.02); /* Placeholder halus saat iklan loading */
}