/* ============================================================
   LiveFootball — Global Stylesheet
   Order: Variables → Reset → Base → Layout → Header →
          Search → Tabs → Cards → Player → Footer →
          Overlay → Toast → Utilities → Accessibility
   ============================================================ */


/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */

:root {
    color-scheme: light;

    /* Brand */
    --accent:        #00e5a0;
    --accent-dim:    rgba(0, 229, 160, 0.14);
    --accent-text:   #00b87f;

    /* Status */
    --live:          #34A853;
    --live-dim:      rgba(52, 168, 83, 0.12);
    --red:           #EA4335;
    --red-dim:       rgba(234, 67, 53, 0.10);

    /* Surfaces */
    --bg:            #ffffff;
    --bg-2:          #f6f7f9;
    --bg-3:          #eef0f4;
    --surface:       #ffffff;

    /* Borders */
    --border:        rgba(0, 0, 0, 0.07);
    --border-strong: rgba(0, 0, 0, 0.13);

    /* Typography */
    --text-1:        #0d0f14;
    --text-2:        #4a4f5e;
    --text-3:        #8a90a0;
    --font:          'Google Sans', sans-serif;
    --mono:          'Google Sans', sans-serif;

    /* Shape */
    --radius:        12px;
    --radius-sm:     8px;
    --radius-xs:     5px;

    /* Elevation */
    --shadow:        0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
    --shadow-lg:     0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);

    /* Motion */
    --transition:    0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
    color-scheme: dark;

    --bg:            #0d0f14;
    --bg-2:          #0d0f14;
    --bg-3:          #1c2030;
    --surface:       #141720;

    --border:        rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.11);

    --text-1:        #f8fafc;
    --text-2:        #cbd5e1;
    --text-3:        #64748b;

    --shadow:        0 1px 3px rgba(0,0,0,0.3),  0 4px 12px rgba(0,0,0,0.2);
    --shadow-lg:     0 4px 16px rgba(0,0,0,0.4), 0 1px  4px rgba(0,0,0,0.2);
}


/* ── 2. RESET ─────────────────────────────────────────────── */

*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    background: var(--bg);
    -ms-overflow-style:  none !important;
    scrollbar-width:     none !important;
}

::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

ul, ol { list-style: none; }

a { text-decoration: none; color: inherit; }

button { cursor: pointer; font-family: inherit; }

img, svg { display: block; }


/* ── 3. BASE ──────────────────────────────────────────────── */

body {
    font-family:            var(--font);
    color:                  var(--text-1);
    line-height:            1.5;
    -webkit-font-smoothing: antialiased;
    display:                flex;
    justify-content:        center;
    min-height:             100vh;
}


/* ── 4. LAYOUT ────────────────────────────────────────────── */

.wrapper {
    width:        100%;
    max-width:    640px;
    background:   var(--bg);
    min-height:   100vh;
    display:      flex;
    flex-direction: column;
    border-left:  1px solid var(--border);
    border-right: 1px solid var(--border);
}

.main {
    padding: 16px 14px;
    flex: 1;
    background: var(--bg-2);
}

/* Skip link */
.skip-link {
    position:      absolute;
    top:           -100%;
    left:          16px;
    z-index:       9999;
    background:    var(--accent);
    color:         #0d0f14;
    padding:       8px 16px;
    border-radius: var(--radius-sm);
    font:          600 0.85rem var(--font);
    transition:    top 0.2s;
}
.skip-link:focus { top: 8px; }


/* ── 5. HEADER ────────────────────────────────────────────── */

.header {
    position:        sticky;
    top:             0;
    z-index:         200;
    background:      var(--bg);
    border-bottom:   1px solid var(--border);
    padding:         0 16px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          56px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.logo {
    font-size:      1.35rem;
    font-weight:    700;
    color:          var(--text-1);
    letter-spacing: -0.02em;
    display:        flex;
    align-items:    center;
}

.header-right {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.btn-icon {
    background:    transparent;
    border:        1px solid var(--border-strong);
    color:         var(--text-2);
    width:         34px;
    height:        34px;
    border-radius: var(--radius-sm);
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    var(--transition);
}
.btn-icon:hover { background: var(--bg-3); color: var(--text-1); }


/* ── 6. BANNER SLIDER ─────────────────────────────────────── */

.banner-slider-wrap {
    position:      relative;
    margin:        0 0 14px;
    height:        90px;
    overflow:      hidden;
    border-radius: 10px;
    border:        1px solid var(--border);
    user-select:   none;
}

@media (max-width: 480px) {
    .banner-slider-wrap { height: 100px; }
}

/* Clip layer */
.banner-track-clip {
    position: absolute;
    inset:    0;
    overflow: hidden;
}

/* Scrolling track */
.banner-track {
    display:     flex;
    height:      100%;
    will-change: transform;
    transition:  transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    list-style:  none;
    margin:      0;
    padding:     0;
}

/* Individual slide */
.banner-slide {
    min-width:   100%;
    height:      100%;
    flex-shrink: 0;
}

.banner-slide-inner {
    width:           100%;
    height:          100%;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             4px;
}

/* ── Ad placeholder slide styles ── */
.ad-slide {
    border: 2px dashed var(--border-strong);
    background: var(--surface);
}

/* Each slide gets a slightly different tint so the transition is visible */
.ad-slide-1 { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.ad-slide-2 { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.ad-slide-3 { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }

.ad-slot-label {
    font:           600 0.58rem var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--text-3);
    opacity:        0.5;
}

.ad-slot-main {
    font:    700 1rem var(--font);
    color:   var(--text-2);
    opacity: 0.4;
}

.ad-slot-size {
    font:    500 0.65rem var(--mono);
    color:   var(--text-3);
    opacity: 0.35;
}

/* Navigation arrows */
.bs-arrow {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         10;
    background:      color-mix(in srgb, var(--surface) 80%, transparent);
    border:          1px solid var(--border-strong);
    color:           var(--text-2);
    width:           28px;
    height:          28px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.18s, opacity 0.18s;
    opacity:         0;
}

.banner-slider-wrap:hover .bs-arrow { opacity: 1; }
.bs-arrow:hover { background: var(--surface); }

.bs-arrow-prev { left:  8px; }
.bs-arrow-next { right: 8px; }

/* Dot indicators */
.bs-dots {
    position:  absolute;
    bottom:    8px;
    left:      50%;
    transform: translateX(-50%);
    display:   flex;
    gap:       5px;
    z-index:   10;
}

.bs-dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    var(--border-strong);
    border:        none;
    padding:       0;
    cursor:        pointer;
    transition:    background 0.2s, transform 0.2s;
}
.bs-dot.active {
    background: var(--accent);
    transform:  scale(1.3);
}


/* ── 7. SEARCH ────────────────────────────────────────────── */

.search-wrap {
    position:      relative;
    margin-bottom: 12px;
}

.search-icon {
    position:        absolute;
    left:            14px;
    top:             50%;
    transform:       translateY(-50%);
    color:           var(--text-3);
    pointer-events:  none;
}

.search-input {
    width:         100%;
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    color:         var(--text-1);
    font:          0.9rem var(--font);
    padding:       11px 42px 11px 40px;
    outline:       none;
    transition:    var(--transition);
}
.search-input::placeholder { color: var(--text-3); }
.search-input:focus {
    border-color: var(--accent);
    box-shadow:   0 0 0 3px var(--accent-dim);
}

.search-clear {
    position:        absolute;
    right:           10px;
    top:             50%;
    transform:       translateY(-50%);
    background:      var(--bg-3);
    border:          none;
    color:           var(--text-3);
    width:           22px;
    height:          22px;
    border-radius:   50%;
    display:         none;
    align-items:     center;
    justify-content: center;
    font-size:       14px;
    transition:      var(--transition);
}
.search-clear:hover { color: var(--text-1); }


/* ── 8. TABS ──────────────────────────────────────────────── */

.tabs-wrap {
    display:    flex;
    gap:        6px;
    overflow-x: auto;
    margin:     0 -14px;
    padding:    2px 14px 12px;
    -webkit-mask-image: linear-gradient(to right, transparent, black 14px, black calc(100% - 14px), transparent);
    mask-image:         linear-gradient(to right, transparent, black 14px, black calc(100% - 14px), transparent);
}

.tab {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;  /* vertically centers single-line tabs (e.g. "All") */
    gap:             2px;
    min-height:      42px;    /* uniform height across 1-line and 2-line tabs */
    padding:         6px 14px;
    border-radius:   20px;
    border:          1px solid var(--border);
    background:      var(--surface);
    color:           var(--text-2);
    font:            500 0.8rem var(--font);
    white-space:     nowrap;
    transition:      var(--transition);
}
.tab:hover  { border-color: var(--border-strong); color: var(--text-1); }
.tab.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-text); }

/* League name — primary label */
.tab-name {
    font-size:   0.8rem;
    font-weight: 500;
    line-height: 1;
}

/* Country sublabel — secondary, smaller, plain text (no emoji flags — unreliable across OS) */
.tab-country {
    font-size:   0.65rem;
    font-weight: 400;
    opacity:     0.65;
    line-height: 1;
}
.tab.active .tab-country { opacity: 0.8; }


/* ── ODDS ROW — shown below competition name on each match card ── */
.odds-row {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             8px;
    padding:         8px 16px;
    margin:          4px 0 10px;
    background:      color-mix(in srgb, var(--accent) 8%, transparent);
    border-radius:   8px;
}
.odds-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            3px;
    min-width:      48px;
}
.odds-label {
    font-size:      0.6rem;
    font-weight:    600;
    opacity:        0.45;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.odds-val {
    font-weight: 800;
    font-size:   1rem;
    color:       var(--accent);
    line-height: 1;
}
/* Dim the dash when odds are unavailable */
.odds-val:has-text("–"),
.odds-val[data-empty] { opacity: 0.3; }
.odds-sep { opacity: 0.2; font-size: 0.75rem; }


/* ── 9. SECTION HEADERS ───────────────────────────────────── */

.section-header,
h2.section-header,
h3.section-header {
    font:           600 0.72rem var(--mono);
    letter-spacing: 0.09em;
    color:          var(--text-3);
    text-transform: uppercase;
    padding:        10px 0 8px;
    margin:         0;
}

.live-header {
    color:           var(--live);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
}

.live-header-left {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.live-count-pill {
    font:           700 0.65rem var(--mono);
    color:          var(--live);
    background:     var(--live-dim);
    padding:        2px 8px;
    border-radius:  4px;
    letter-spacing: 0.06em;
}


/* ── 10. LIVE INDICATORS ──────────────────────────────────── */

.live-dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    var(--live);
    animation:     pulse 1.6s infinite;
    display:       inline-block;
    flex-shrink:   0;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.8); }
}


/* ── 11. EVENT CARDS ──────────────────────────────────────── */

.card-list { padding: 0; margin: 0; }
.card-list li { padding: 0; margin: 0; }

.event-card {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    text-align:      center;
    background:      var(--surface);
    border:          1px solid var(--border);
    border-radius:   var(--radius);
    padding:         12px 14px;
    margin-bottom:   8px;
    transition:      var(--transition);
}
.event-card:hover {
    border-color: var(--border-strong);
    box-shadow:   var(--shadow);
    transform:    translateY(-1px);
}
.event-card.is-live {
    border-color: rgba(52, 168, 83, 0.28);
    background:   linear-gradient(160deg, rgba(52,168,83,0.05), var(--surface));
}

/* Top row: tanggal / countdown / menit */
.card-top-row {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             4px;
    margin-bottom:   10px;
}

.card-date {
    font:        0.72rem var(--mono);
    color:       var(--text-3);
    line-height: 1;
}

.card-minute {
    font:           700 0.7rem var(--mono);
    color:          var(--live);
    background:     var(--live-dim);
    padding:        2px 8px;
    border-radius:  4px;
    letter-spacing: 0.02em;
    line-height:    1.5;
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
}

.card-minute.is-countdown {
    color:      var(--accent-text);
    background: var(--accent-dim);
}

/* Team vs row */
.card-vs-row {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    width:           100%;
    margin-bottom:   8px;
}

.team-col {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            5px;
    flex:           1;
    min-width:      0;
}

.team-logo-lg {
    width:           44px;
    height:          44px;
    border-radius:   50%;
    background:      var(--bg-3);
    border:          1px solid var(--border);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font:            700 0.65rem var(--font);
    color:           var(--text-2);
    overflow:        hidden;
    flex-shrink:     0;
}
.team-logo-lg img { width: 100%; height: 100%; object-fit: contain; }

.team-name-lg {
    font:           500 0.8rem var(--font);
    color:          var(--text-1);
    letter-spacing: -0.01em;
    line-height:    1.25;
    word-break:     break-word;
}

/* Center col: score or vs */
.center-col {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    min-width:       52px;
}

.vs-text {
    font:           600 0.68rem var(--mono);
    color:          var(--text-3);
    letter-spacing: 0.06em;
}

.score-row {
    display:     flex;
    align-items: center;
    gap:         4px;
}

.score-num {
    font:           700 1.4rem var(--mono);
    color:          var(--text-1);
    line-height:    1;
    letter-spacing: -0.03em;
    min-width:      20px;
    text-align:     center;
}

.score-sep {
    font:        400 1rem var(--mono);
    color:       var(--text-3);
    line-height: 1;
}

/* League label */
.card-league-center {
    font:          0.72rem var(--font);
    color:         var(--text-3);
    padding:       2px 9px;
    background:    var(--bg-3);
    border-radius: 4px;
    margin-bottom: 10px;
}

/* Action buttons */
.card-btn-row {
    display: flex;
    gap:     7px;
    width:   100%;
}

.btn-bet {
    flex:            1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             5px;
    background:      transparent;
    border:          1px solid var(--accent);
    color:           var(--accent-text);
    padding:         7px 10px;
    border-radius:   var(--radius-sm);
    font:            600 0.76rem var(--font);
    text-decoration: none;
    white-space:     nowrap;
    transition:      var(--transition);
}
.btn-bet:hover { background: var(--accent-dim); }

.btn-watch-now {
    flex:            1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             5px;
    background:      var(--accent);
    border:          1px solid transparent;
    color:           #0d0f14;
    padding:         7px 10px;
    border-radius:   var(--radius-sm);
    font:            600 0.76rem var(--font);
    text-decoration: none;
    white-space:     nowrap;
    transition:      var(--transition);
}
.btn-watch-now:hover { opacity: 0.88; }

.btn-notify-text {
    flex:            1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             5px;
    background:      transparent;
    border:          1px solid var(--border-strong);
    color:           var(--text-2);
    padding:         7px 10px;
    border-radius:   var(--radius-sm);
    font:            500 0.76rem var(--font);
    white-space:     nowrap;
    transition:      var(--transition);
}
.btn-notify-text:hover   { border-color: var(--accent); color: var(--accent-text); }
.btn-notify-text.notified { border-color: var(--accent); color: var(--accent-text); background: var(--accent-dim); }

/* Countdown pill (standalone, below buttons) */
.card-countdown-center {
    font:          500 0.7rem var(--mono);
    color:         var(--accent-text);
    padding:       2px 8px;
    background:    var(--accent-dim);
    border-radius: 4px;
    margin-top:    7px;
}



/* State cards */
.state-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       32px 20px;
    text-align:    center;
    color:         var(--text-2);
    font-size:     0.9rem;
    margin:        8px 0;
}


/* ── 12. PLAYER (watch-live.html) ─────────────────────────── */

.player-wrap {
    position:      relative;
    width:         auto;
    padding-bottom: 56.25%;
    background:    #000;
    border-radius: 0;
    overflow:      hidden;
    margin:        -16px -14px 14px;
    border:        none;
}

.player-wrap iframe,
.player-wrap #adContainer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}




/* ── 13. MATCH INFO CARD (watch-live.html) ────────────────── */

.match-card {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    text-align:      center;
    background:      var(--surface);
    border:          1px solid rgba(52,168,83,0.25);
    border-radius:   var(--radius);
    padding:         14px 16px 12px;
    margin-bottom:   12px;
    background:      linear-gradient(160deg, rgba(52,168,83,0.05), var(--surface));
}

.match-top {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             4px;
    margin-bottom:   12px;
}

.match-date {
    font:        0.72rem var(--mono);
    color:       var(--text-3);
    line-height: 1;
}

.match-minute {
    font:           700 0.72rem var(--mono);
    color:          var(--live);
    background:     var(--live-dim);
    padding:        2px 8px;
    border-radius:  4px;
    letter-spacing: 0.02em;
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    line-height:    1.5;
}

.match-vs {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    width:           100%;
    margin-bottom:   10px;
}

.match-team {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            5px;
    flex:           1;
    min-width:      0;
}

.match-logo {
    width:           44px;
    height:          44px;
    border-radius:   50%;
    background:      var(--bg-3);
    border:          1px solid var(--border);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font:            700 0.65rem var(--font);
    color:           var(--text-2);
    overflow:        hidden;
    flex-shrink:     0;
}
.match-logo img { width: 100%; height: 100%; object-fit: contain; }

.match-team-name {
    font:           500 0.8rem var(--font);
    color:          var(--text-1);
    letter-spacing: -0.01em;
    line-height:    1.25;
    word-break:     break-word;
}

.match-score {
    display:         flex;
    align-items:     center;
    gap:             4px;
    flex-shrink:     0;
    min-width:       52px;
    justify-content: center;
}

.match-score-num {
    font:           700 1.45rem var(--mono);
    color:          var(--text-1);
    line-height:    1;
    letter-spacing: -0.03em;
    min-width:      22px;
    text-align:     center;
}

.match-score-sep {
    font:        400 1rem var(--mono);
    color:       var(--text-3);
    line-height: 1;
}

.match-league {
    font:          0.72rem var(--font);
    color:         var(--text-3);
    padding:       2px 9px;
    background:    var(--bg-3);
    border-radius: 4px;
    margin-bottom: 8px;
}

/* Bet Now inside match-card */
.match-card .btn-bet {
    flex:    unset;
    width:   100%;
    padding: 8px 14px;
}

/* Action row (watch-live) */
.action-row {
    display:       flex;
    gap:           8px;
    margin-bottom: 16px;
    width:         100%;
}

.btn-action {
    flex:            1;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    background:      var(--surface);
    border:          1px solid var(--border);
    color:           var(--text-2);
    padding:         8px 14px;
    border-radius:   var(--radius-sm);
    font:            500 0.8rem var(--font);
    text-decoration: none;
    transition:      var(--transition);
}
.btn-action:hover { border-color: var(--border-strong); color: var(--text-1); background: var(--bg-3); }


/* ── 13b. BREADCRUMB (watch-live.html) ───────────────────── */

.breadcrumb {
    margin-bottom: 10px;
}

.breadcrumb ol {
    display:     flex;
    align-items: center;
    gap:         6px;
    list-style:  none;
    flex-wrap:   wrap;
}

.breadcrumb li {
    font:        0.75rem var(--font);
    color:       var(--text-3);
    display:     flex;
    align-items: center;
    gap:         6px;
}

/* Chevron separator via pseudo-element — no extra markup needed */
.breadcrumb li + li::before {
    content: '›';
    color:   var(--text-3);
}

.breadcrumb a {
    color:       var(--text-3);
    transition:  color var(--transition);
}
.breadcrumb a:hover { color: var(--accent-text); }

.breadcrumb li[aria-current="page"] {
    color: var(--text-2);
}


/* ── 14. FOOTER ───────────────────────────────────────────── */

.footer {
    background:   var(--surface);
    border-top:   1px solid var(--border);
}

/* Top band */
.footer-top {
    padding:         28px 24px 24px;
    display:         grid;
    grid-template-columns: 1fr 1fr;
    gap:             32px;
}

@media (max-width: 440px) {
    .footer-top { grid-template-columns: 1fr; gap: 24px; }
}

.footer-brand {}

.footer-logo {
    font:           700 1.1rem var(--font);
    color:          var(--text-1);
    letter-spacing: -0.02em;
    margin-bottom:  8px;
    display:        block;
}

.footer-tagline {
    font:        0.8rem var(--font);
    color:       var(--text-3);
    line-height: 1.6;
    max-width:   200px;
}

.footer-col-title {
    font:           600 0.7rem var(--mono);
    color:          var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-bottom:  12px;
    display:        block;
}

.footer-links {
    display:        flex;
    flex-direction: column;
    gap:            9px;
}

.footer-links a {
    font:        0.82rem var(--font);
    color:       var(--text-2);
    transition:  color var(--transition);
    display:     inline-flex;
    align-items: center;
    gap:         6px;
}
.footer-links a:hover { color: var(--accent-text); }

/* Bottom band */
.footer-bottom {
    border-top:      1px solid var(--border);
    padding:         14px 24px;
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             12px;
    flex-wrap:       wrap;
}

.footer-copy {
    font:  0.75rem var(--font);
    color: var(--text-3);
}

.footer-disclaimer {
    font:        0.72rem var(--font);
    color:       var(--text-3);
    line-height: 1.5;
    max-width:   340px;
    text-align:  right;
}

@media (max-width: 440px) {
    .footer-bottom     { flex-direction: column; align-items: flex-start; }
    .footer-disclaimer { text-align: left; max-width: 100%; }
}

.footer-legal-row {
    border-top: 1px solid var(--border);
    padding: 12px 24px;
    text-align: center;
    background: var(--bg-2);
}

.footer-legal {
    font: 700 0.68rem var(--mono);
    color: var(--text-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.8;
}


/* ── 15. OVERLAY ──────────────────────────────────────────── */

.overlay {
    display:         none;
    position:        fixed;
    inset:           0;
    background:      rgba(13, 15, 20, 0.88);
    z-index:         9999;
    align-items:     center;
    justify-content: center;
    padding:         20px;
    backdrop-filter: blur(4px);
}
.overlay.visible { display: flex; }

.overlay-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       28px 24px;
    max-width:     340px;
    width:         100%;
    text-align:    center;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    gap:           10px;
}

.overlay-icon {
    width:           48px;
    height:          48px;
    border-radius:   50%;
    background:      var(--bg-3);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--text-3);
}

.overlay-title {
    font:  700 1rem var(--font);
    color: var(--text-1);
    margin: 0;
}

.overlay-msg {
    font:        0.84rem var(--font);
    color:       var(--text-3);
    line-height: 1.6;
    margin:      0;
}

.overlay-back {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    margin-top:      4px;
    padding:         9px 22px;
    background:      var(--accent);
    border-radius:   var(--radius-sm);
    font:            600 0.85rem var(--font);
    color:           #0d0f14;
    transition:      var(--transition);
}
.overlay-back:hover { opacity: 0.88; }


/* ── 16. TOAST ────────────────────────────────────────────── */

.toast {
    position:    fixed;
    bottom:      20px;
    left:        50%;
    transform:   translateX(-50%) translateY(80px);
    background:  var(--text-1);
    color:       var(--bg);
    padding:     10px 20px;
    border-radius: var(--radius);
    font:        500 0.85rem var(--font);
    z-index:     9999;
    transition:  transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    white-space: nowrap;
}
.toast.visible { transform: translateX(-50%) translateY(0); }


/* ── 17. SCROLL TO TOP ────────────────────────────────────── */

.scroll-top {
    position:        fixed;
    bottom:          20px;
    right:           20px;
    width:           40px;
    height:          40px;
    border-radius:   50%;
    background:      var(--text-1);
    color:           var(--bg);
    border:          none;
    display:         none;
    align-items:     center;
    justify-content: center;
    z-index:         500;
    transition:      var(--transition);
    box-shadow:      var(--shadow-lg);
}
.scroll-top:hover   { transform: translateY(-2px); }
.scroll-top.visible { display: flex; }


/* ── 18. UTILITIES ────────────────────────────────────────── */

.visually-hidden {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border:     0;
}

/* ── 19. MOBILE MENU ──────────────────────────────────────── */

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%; /* Sembunyi di kanan */
    width: 280px;
    height: 100vh;
    background: var(--surface);
    z-index: 1000;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -2px 0 12px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

.mobile-menu.active {
    right: 0; /* Muncul saat aktif */
}

.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu-header {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.menu-title {
    font: 700 1.1rem var(--font);
    color: var(--text-1);
}

.menu-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text-3);
    line-height: 1;
}

.menu-links {
    padding: 10px 0;
    overflow-y: auto;
}

.menu-link {
    display: block;
    padding: 14px 20px;
    font: 500 0.95rem var(--font);
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.menu-link:hover {
    background: var(--bg-3);
    color: var(--accent-text);
}

.menu-link:last-child {
    border-bottom: none;
}

.menu-separator {
    height: 1px;
    background: var(--border-strong);
    margin: 12px 20px;
    list-style: none;
    opacity: 0.6;
}

.menu-links li:nth-child(n+10) .menu-link {
    font-size: 0.85rem;
    color: var(--text-3);
}