/**
 * SpinFakta Homepage v2 — Data Terminal Dark Design
 * Mirrors prototype/index.html token system.
 * Loaded ONLY on front-page (is_front_page).
 *
 * @package SpinFakta
 * @since 4.0.0
 */

/* ═══════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════ */
#sf-homepage-v2 {
    --sf-bg:         #080E1A;
    --sf-surface:    #0D1525;
    --sf-surface-2:  #111D32;
    --sf-surface-3:  #172240;
    --sf-border:     #1E2C4A;
    --sf-border-2:   #243459;

    --sf-blue:       #1E40AF;
    --sf-blue-light: #3B82F6;
    --sf-blue-glow:  rgba(59,130,246,.18);
    --sf-amber:      #F59E0B;
    --sf-amber-dark: #B45309;
    --sf-green:      #10B981;
    --sf-red:        #EF4444;
    --sf-purple:     #8B5CF6;
    --sf-orange:     #F97316;

    --sf-text:       #E2E8F5;
    --sf-text-2:     #94A3C4;
    --sf-text-3:     #4B5F85;

    --sf-radius:     12px;
    --sf-radius-sm:  8px;
    --sf-radius-lg:  16px;

    --sf-font-head:  'Sora', 'Inter', sans-serif;
    --sf-font-body:  'Inter', sans-serif;

    --nav-h:         60px;
}

/* ═══════════════════════════════════════════════
   RESET wrapper — contained inside #sf-homepage-v2
═══════════════════════════════════════════════ */
#sf-homepage-v2 *,
#sf-homepage-v2 *::before,
#sf-homepage-v2 *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
#sf-homepage-v2 {
    background: var(--sf-bg);
    color: var(--sf-text);
    font-family: var(--sf-font-body);
    font-size: 15px;
    line-height: 1.6;
    min-height: 100dvh;
    overflow-x: hidden;
}
#sf-homepage-v2 a {
    color: inherit;
    text-decoration: none;
}
#sf-homepage-v2 img { display: block; max-width: 100%; }
#sf-homepage-v2 button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ═══════════════════════════════════════════════
   LAYOUT — global content container
   ALL section inner content uses .sf-container
   so every module's left/right edge aligns to
   the same x (1280px centred, 24px gutters).
═══════════════════════════════════════════════ */
#sf-homepage-v2 .sf-container {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}
/* legacy alias — existing selectors using sfv2-container keep working */
#sf-homepage-v2 .sfv2-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ═══════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════ */
#sf-homepage-v2 .sfv2-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--nav-h);
    background: rgba(8,14,26,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sf-border);
}
#sf-homepage-v2 .sfv2-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    gap: 16px;
}
#sf-homepage-v2 .sfv2-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sf-font-head);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--sf-text);
    flex-shrink: 0;
}
#sf-homepage-v2 .sfv2-logo-owl {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: contain;
    object-position: center center;
    border: 2px solid var(--sf-amber);
    background: var(--sf-surface-2);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(245,158,11,.15);
    padding: 2px;
}
#sf-homepage-v2 .sfv2-logo-dot { color: var(--sf-amber); }

#sf-homepage-v2 .sfv2-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}
#sf-homepage-v2 .sfv2-nav-links a {
    padding: 6px 12px;
    border-radius: var(--sf-radius-sm);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sf-text-2);
    transition: color .2s, background .2s;
}
#sf-homepage-v2 .sfv2-nav-links a:hover { color: var(--sf-text); background: var(--sf-surface-2); }
#sf-homepage-v2 .sfv2-nav-links a.active { color: var(--sf-amber); }

#sf-homepage-v2 .sfv2-nav-tg {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--sf-blue);
    border-radius: var(--sf-radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
    transition: background .2s;
}
#sf-homepage-v2 .sfv2-nav-tg:hover { background: var(--sf-blue-light); }

/* Search icon */
#sf-homepage-v2 .sfv2-nav-search-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--sf-surface-2);
    border: 1px solid var(--sf-border);
    color: var(--sf-text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .2s, color .2s;
}
#sf-homepage-v2 .sfv2-nav-search-btn:hover { border-color: var(--sf-blue-light); color: var(--sf-text); }

/* Search overlay */
#sf-homepage-v2 .sfv2-nav-search-overlay {
    display: none;
    position: absolute;
    top: calc(var(--nav-h) + 4px);
    right: 20px;
    width: 360px;
    background: var(--sf-surface-2);
    border: 1.5px solid var(--sf-blue-light);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,.6);
    z-index: 200;
    overflow: hidden;
}
#sf-homepage-v2 .sfv2-nav-search-overlay.open { display: block; }
#sf-homepage-v2 .sfv2-nav-search-inner { display: flex; align-items: center; }
#sf-homepage-v2 .sfv2-nav-search-inner input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 13px 16px;
    font-size: 14px;
    color: var(--sf-text);
    font-family: var(--sf-font-body);
    outline: none;
}
#sf-homepage-v2 .sfv2-nav-search-inner input::placeholder { color: var(--sf-text-3); }
#sf-homepage-v2 .sfv2-nav-search-inner button {
    padding: 13px 16px;
    background: var(--sf-blue);
    color: white;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--sf-font-body);
    border: none;
    cursor: pointer;
    transition: background .2s;
}
#sf-homepage-v2 .sfv2-nav-search-inner button:hover { background: var(--sf-blue-light); }

/* Hamburger */
#sf-homepage-v2 .sfv2-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    border-radius: 6px;
    border: 1px solid var(--sf-border);
    background: transparent;
    cursor: pointer;
}
#sf-homepage-v2 .sfv2-hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--sf-text);
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
#sf-homepage-v2 .sfv2-hero {
    background: linear-gradient(135deg, #04081A 0%, #0C1730 45%, #080E1A 100%);
    border-bottom: 1px solid var(--sf-border);
    padding: 0;
    min-height: 380px;
    max-height: 440px;
    position: relative;
    overflow: hidden;
}
/* Subtle grid / data-terminal texture on the left + blue accent on right */
#sf-homepage-v2 .sfv2-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(30,64,175,.07) 0%, transparent 55%),
        repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(30,64,175,.04) 39px, rgba(30,64,175,.04) 40px),
        repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(30,64,175,.04) 39px, rgba(30,64,175,.04) 40px);
    pointer-events: none;
}
/* Right-side ambient: very subtle warm light behind owl zone */
#sf-homepage-v2 .sfv2-hero::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 50%;
    background: radial-gradient(ellipse 80% 90% at 80% 60%, rgba(30,64,175,.09) 0%, transparent 70%);
    pointer-events: none;
}
#sf-homepage-v2 .sfv2-hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 24px;
    align-items: center;
    min-height: 380px;
    max-height: 440px;
    position: relative;
    z-index: 1;
}
#sf-homepage-v2 .sfv2-hero-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 0 32px 0;
}
#sf-homepage-v2 .sfv2-hero-proverb {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sf-amber);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
#sf-homepage-v2 .sfv2-hero-proverb::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--sf-amber);
    border-radius: 2px;
}
#sf-homepage-v2 .sfv2-hero-title {
    font-family: var(--sf-font-head);
    font-size: clamp(1.3rem, 2.2vw, 2.1rem);
    font-weight: 900;
    line-height: 1.15;
    color: var(--sf-text);
    margin-bottom: 8px;
}
#sf-homepage-v2 .sfv2-hero-title .accent { color: var(--sf-blue-light); }
#sf-homepage-v2 .sfv2-hero-sub {
    font-size: 13px;
    color: var(--sf-text-2);
    max-width: 580px;
    margin-bottom: 12px;
    line-height: 1.5;
}
/* Hero CTA buttons */
#sf-homepage-v2 .sfv2-hero-ctas {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
#sf-homepage-v2 .sfv2-hero-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 22px;
    background: var(--sf-blue);
    border-radius: var(--sf-radius-sm);
    font-family: var(--sf-font-head);
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    transition: background .2s, transform .15s;
    box-shadow: 0 4px 16px rgba(30,64,175,.35);
}
#sf-homepage-v2 .sfv2-hero-cta-primary:hover { background: var(--sf-blue-light); transform: translateY(-1px); }
#sf-homepage-v2 .sfv2-hero-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 20px;
    background: transparent;
    border: 1.5px solid var(--sf-amber);
    border-radius: var(--sf-radius-sm);
    font-family: var(--sf-font-head);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sf-amber);
    text-decoration: none;
    transition: background .2s, color .2s, transform .15s;
}
#sf-homepage-v2 .sfv2-hero-cta-secondary:hover { background: rgba(245,158,11,.1); transform: translateY(-1px); }

#sf-homepage-v2 .sfv2-hero-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
#sf-homepage-v2 .sfv2-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
#sf-homepage-v2 .sfv2-hero-stat strong {
    font-family: var(--sf-font-head);
    font-size: 1rem;
    font-weight: 800;
    color: var(--sf-text);
}
#sf-homepage-v2 .sfv2-hero-stat span {
    font-size: 10.5px;
    color: var(--sf-text-3);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Hero right — big owl mascot display, vertically centred */
#sf-homepage-v2 .sfv2-hero-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    /* stretch to fill the full grid row so justify-content:center works */
    align-self: stretch;
}
/* Ground shadow ellipse — subtle grounding without bottom-push */
#sf-homepage-v2 .sfv2-hero-right::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 32px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.5) 0%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}
/* New 3D mascot — fills hero-right height, centred, no dead zones */
#sf-homepage-v2 .sfv2-hero-owl--new {
    width: auto;
    /* fill the full height of the stretched right column */
    height: 100%;
    /* cap at hero max-height so owl never blows past the section */
    max-height: 420px;
    max-width: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,.6)) drop-shadow(0 2px 6px rgba(0,0,0,.4));
    flex-shrink: 0;
    display: block;
    position: relative;
    z-index: 1;
}
/* Fallback: legacy owl path still works with old size */
#sf-homepage-v2 .sfv2-hero-owl {
    width: 220px;
    height: 220px;
    object-fit: contain;
    filter: drop-shadow(0 12px 40px rgba(245,158,11,.45)) drop-shadow(0 0 60px rgba(30,64,175,.3));
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

/* ═══════════════════════════════════════════════
   TOP10 RANK BADGE — overlaid on game card image
   Large, high-contrast, solid fill + white bold
   text so #1/#2/#3 are clearly legible on art.
═══════════════════════════════════════════════ */
#sf-homepage-v2 .sfv2-badge-rank {
    position: absolute;
    top: 7px;
    left: 7px;
    min-width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0B1222;
    border: 2.5px solid #4B5F85;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sf-font-head);
    font-size: 13px;
    font-weight: 900;
    color: #E2E8F5;
    z-index: 2;
    padding: 0 5px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.5);
    text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
/* #1 gold — solid amber fill, dark text for max contrast */
#sf-homepage-v2 .sfv2-badge-rank.gold {
    background: #F59E0B;
    border-color: #FCD34D;
    color: #0B1222;
    text-shadow: none;
    box-shadow: 0 2px 12px rgba(245,158,11,.6), 0 0 0 1px rgba(0,0,0,.3);
}
/* #2 silver — solid silver fill, dark text */
#sf-homepage-v2 .sfv2-badge-rank.silver {
    background: #94A3B8;
    border-color: #CBD5E1;
    color: #0B1222;
    text-shadow: none;
    box-shadow: 0 2px 8px rgba(148,163,184,.5), 0 0 0 1px rgba(0,0,0,.3);
}
/* #3 bronze — solid copper fill, dark text */
#sf-homepage-v2 .sfv2-badge-rank.bronze {
    background: #CD7F32;
    border-color: #E4A061;
    color: #0B1222;
    text-shadow: none;
    box-shadow: 0 2px 8px rgba(205,127,50,.5), 0 0 0 1px rgba(0,0,0,.3);
}

/* ═══════════════════════════════════════════════
   PROVIDER CARD — same carousel card, logo+name+count
═══════════════════════════════════════════════ */
#sf-homepage-v2 .sfv2-prov-card {
    flex: 0 0 160px;
    border-radius: var(--sf-radius);
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 12px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s, border-color .2s, box-shadow .2s;
    position: relative;
    min-height: 110px;
}
#sf-homepage-v2 .sfv2-prov-card:hover {
    transform: translateY(-4px);
    border-color: var(--sf-blue-light);
    box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(59,130,246,.2);
}
#sf-homepage-v2 .sfv2-prov-card-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--sf-surface-3);
    border: 1.5px solid var(--sf-border-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sf-font-head);
    font-size: 15px;
    font-weight: 900;
    flex-shrink: 0;
}
/* Real vendor logo tile: wide enough for a wordmark, logo contained
   with padding, centered. Falls back to the letter block when no PNG. */
#sf-homepage-v2 .sfv2-prov-card-logo.has-img {
    width: 100%;
    max-width: 124px;
    height: 52px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    padding: 8px 12px;
}
#sf-homepage-v2 .sfv2-prov-card-logo.has-img img {
    max-width: 100%;
    max-height: 36px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
/* Card with a real vendor logo: the logo IS the brand name, so we drop the
   redundant name line and make the logo the focal element (bigger), count only. */
#sf-homepage-v2 .sfv2-prov-card.has-logo { gap: 12px; justify-content: center; padding: 18px 12px; }
#sf-homepage-v2 .sfv2-prov-card.has-logo .sfv2-prov-card-logo.has-img {
    max-width: 100%;
    height: 66px;
    padding: 10px 14px;
}
#sf-homepage-v2 .sfv2-prov-card.has-logo .sfv2-prov-card-logo.has-img img { max-height: 46px; }
#sf-homepage-v2 .sfv2-prov-card-logo.pp  { background: rgba(30,64,175,.25);  color: var(--sf-blue-light);  border-color: rgba(30,64,175,.4); }
#sf-homepage-v2 .sfv2-prov-card-logo.pg  { background: rgba(139,92,246,.2);  color: #C4B5FD;               border-color: rgba(139,92,246,.4); }
#sf-homepage-v2 .sfv2-prov-card-logo.hab { background: rgba(16,185,129,.15); color: var(--sf-green);       border-color: rgba(16,185,129,.35); }
#sf-homepage-v2 .sfv2-prov-card-logo.png { background: rgba(249,115,22,.15); color: #FB923C;               border-color: rgba(249,115,22,.35); }
#sf-homepage-v2 .sfv2-prov-card-logo.ne  { background: rgba(239,68,68,.15);  color: #FCA5A5;               border-color: rgba(239,68,68,.35); }
#sf-homepage-v2 .sfv2-prov-card-logo.rt  { background: rgba(245,158,11,.15); color: var(--sf-amber);       border-color: rgba(245,158,11,.35); }
#sf-homepage-v2 .sfv2-prov-card-logo.cq  { background: rgba(16,185,129,.15); color: var(--sf-green);       border-color: rgba(16,185,129,.35); }
#sf-homepage-v2 .sfv2-prov-card-logo.all { background: var(--sf-surface-3);  color: var(--sf-text-2); }
#sf-homepage-v2 .sfv2-prov-card-name {
    font-family: var(--sf-font-head);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sf-text);
    line-height: 1.3;
}
#sf-homepage-v2 .sfv2-prov-card-count {
    font-size: 11px;
    color: var(--sf-text-3);
}

/* Legacy inline TOP10 styles (no longer rendered) */
#sf-homepage-v2 .sfv2-top10-card { display: none; }
#sf-homepage-v2 .sfv2-top10-section-list { display: none; }

/* ═══════════════════════════════════════════════
   MITOS BANNER
═══════════════════════════════════════════════ */
#sf-homepage-v2 .sfv2-mitos-banner {
    background: rgba(239,68,68,.06);
    border-top: 1px solid rgba(239,68,68,.2);
    border-bottom: 1px solid rgba(239,68,68,.2);
    /* full-width bg; inner content limited by sf-container inside PHP */
    padding: 7px 0;
    display: flex;
    align-items: center;
}
/* inner wrapper for mitos — aligns to sf-container */
#sf-homepage-v2 .sfv2-mitos-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}
#sf-homepage-v2 .sfv2-mitos-banner img {
    width: 28px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
#sf-homepage-v2 .sfv2-mitos-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--sf-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#sf-homepage-v2 .sfv2-mitos-text strong { color: #FCA5A5; }

/* ═══════════════════════════════════════════════
   TRUST BAR
═══════════════════════════════════════════════ */
#sf-homepage-v2 .sfv2-trust-bar {
    background: var(--sf-surface);
    border-bottom: 1px solid var(--sf-border);
    padding: 6px 0;
}
#sf-homepage-v2 .sfv2-trust-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
}
#sf-homepage-v2 .sfv2-trust-inner::-webkit-scrollbar { display: none; }
#sf-homepage-v2 .sfv2-trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 18px;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sf-text-2);
    border-right: 1px solid var(--sf-border);
    flex-shrink: 0;
}
#sf-homepage-v2 .sfv2-trust-item:last-child { border-right: none; }
/* normalise icon heights so the whole row baselines align (icons were 13/16px mixed) */
#sf-homepage-v2 .sfv2-trust-item svg { height: 13px; width: auto; flex-shrink: 0; display: block; }

/* ═══════════════════════════════════════════════
   GAMES SEARCH BAR — collapsed by default (#4)
   Only shows a magnifier icon; expands on click.
   Full search input hidden until .open added.
═══════════════════════════════════════════════ */
#sf-homepage-v2 .sfv2-search-bar {
    background: var(--sf-surface);
    border-bottom: 1px solid var(--sf-border);
    padding: 8px 0;
}
#sf-homepage-v2 .sfv2-search-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 10px;
    align-items: center;
}
/* Collapsed search toggle button (magnifier) */
#sf-homepage-v2 .sfv2-search-toggle-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--sf-surface-2);
    border: 1.5px solid var(--sf-border-2);
    color: var(--sf-text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .2s, color .2s;
}
#sf-homepage-v2 .sfv2-search-toggle-btn:hover,
#sf-homepage-v2 .sfv2-search-bar.open .sfv2-search-toggle-btn {
    border-color: var(--sf-blue-light);
    color: var(--sf-text);
}
/* Expandable search wrap — hidden until .open on parent */
#sf-homepage-v2 .sfv2-search-wrap {
    display: none;
    flex: 1;
    max-width: 480px;
    transition: all .2s;
}
#sf-homepage-v2 .sfv2-search-bar.open .sfv2-search-wrap {
    display: flex;
}
#sf-homepage-v2 .sfv2-search-wrap input {
    flex: 1;
    background: var(--sf-surface-2);
    border: 1.5px solid var(--sf-border-2);
    border-right: none;
    border-radius: var(--sf-radius) 0 0 var(--sf-radius);
    padding: 9px 14px;
    font-size: 13.5px;
    color: var(--sf-text);
    font-family: var(--sf-font-body);
    outline: none;
    transition: border-color .2s;
}
#sf-homepage-v2 .sfv2-search-wrap input:focus { border-color: var(--sf-blue-light); }
#sf-homepage-v2 .sfv2-search-wrap input::placeholder { color: var(--sf-text-3); }
#sf-homepage-v2 .sfv2-search-wrap button {
    padding: 9px 16px;
    background: var(--sf-blue);
    border-radius: 0 var(--sf-radius) var(--sf-radius) 0;
    font-size: 13px;
    font-weight: 700;
    color: white;
    border: none;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}
#sf-homepage-v2 .sfv2-search-wrap button:hover { background: var(--sf-blue-light); }
/* Sort select always visible in filter row */
#sf-homepage-v2 .sfv2-sort-select {
    padding: 8px 12px;
    background: var(--sf-surface-2);
    border: 1.5px solid var(--sf-border-2);
    border-radius: var(--sf-radius);
    color: var(--sf-text-2);
    font-size: 13px;
    font-family: var(--sf-font-body);
    outline: none;
    cursor: pointer;
    margin-left: auto;
}

/* ═══════════════════════════════════════════════
   FILTER CHIPS
═══════════════════════════════════════════════ */
#sf-homepage-v2 .sfv2-filter-bar {
    background: var(--sf-surface);
    border-bottom: 1px solid var(--sf-border);
    padding: 8px 0;
    position: sticky;
    top: var(--nav-h);
    z-index: 90;
}
#sf-homepage-v2 .sfv2-filter-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
#sf-homepage-v2 .sfv2-filter-inner::-webkit-scrollbar { display: none; }
#sf-homepage-v2 .sfv2-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 100px;
    border: 1.5px solid var(--sf-border-2);
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-text-2);
    background: var(--sf-surface-2);
    white-space: nowrap;
    transition: all .2s;
    flex-shrink: 0;
    cursor: pointer;
    text-decoration: none;
}
#sf-homepage-v2 .sfv2-chip:hover { border-color: var(--sf-blue-light); color: var(--sf-text); }
#sf-homepage-v2 .sfv2-chip.active {
    background: var(--sf-blue);
    border-color: var(--sf-blue);
    color: white;
}
#sf-homepage-v2 .sfv2-chip span {
    font-size: 11px;
    font-weight: 700;
    opacity: .7;
}

/* ═══════════════════════════════════════════════
   RTP-WATCH TEASER (honest "in development" panel)
═══════════════════════════════════════════════ */
#sf-homepage-v2 .sfv2-rtpwatch-teaser {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: var(--sf-surface-2);
    border: 1px solid var(--sf-border);
    border-left: 3px solid var(--sf-amber, #F59E0B);
    border-radius: 14px;
    padding: 22px 24px;
}
#sf-homepage-v2 .sfv2-rtpwatch-teaser-icon { flex-shrink: 0; opacity: .9; }
#sf-homepage-v2 .sfv2-rtpwatch-teaser-title {
    font-weight: 800;
    font-size: 16px;
    color: var(--sf-text);
    margin: 0 0 6px;
}
#sf-homepage-v2 .sfv2-rtpwatch-teaser-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--sf-text-2);
    margin: 0 0 14px;
    max-width: 62ch;
}
#sf-homepage-v2 .sfv2-rtpwatch-teaser-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}
@media (max-width: 640px) {
    #sf-homepage-v2 .sfv2-rtpwatch-teaser { flex-direction: column; gap: 12px; padding: 18px; }
}

/* ═══════════════════════════════════════════════
   PROVIDER BROWSE
═══════════════════════════════════════════════ */
#sf-homepage-v2 .sfv2-provider-browse {
    padding: 20px 0 0;
}
#sf-homepage-v2 .sfv2-provider-browse-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px 16px;
}
#sf-homepage-v2 .sfv2-provider-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sf-text-3);
    margin-bottom: 10px;
}
#sf-homepage-v2 .sfv2-provider-chips { display: flex; gap: 10px; flex-wrap: wrap; }
#sf-homepage-v2 .sfv2-prov-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px 7px 10px;
    background: var(--sf-surface-2);
    border: 1.5px solid var(--sf-border-2);
    border-radius: 100px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sf-text-2);
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    text-decoration: none;
}
#sf-homepage-v2 .sfv2-prov-chip:hover {
    border-color: var(--sf-blue-light);
    color: var(--sf-text);
    background: var(--sf-surface-3);
}
#sf-homepage-v2 .sfv2-prov-logo {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: var(--sf-surface-3);
    border: 1px solid var(--sf-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    flex-shrink: 0;
}
/* Provider logo color variants */
#sf-homepage-v2 .sfv2-prov-logo.pp  { background: rgba(30,64,175,.25); color: var(--sf-blue-light); border-color: rgba(30,64,175,.4); }
#sf-homepage-v2 .sfv2-prov-logo.pg  { background: rgba(139,92,246,.2); color: #C4B5FD; border-color: rgba(139,92,246,.4); }
#sf-homepage-v2 .sfv2-prov-logo.hab { background: rgba(16,185,129,.15); color: var(--sf-green); border-color: rgba(16,185,129,.35); }
#sf-homepage-v2 .sfv2-prov-logo.png { background: rgba(249,115,22,.15); color: #FB923C; border-color: rgba(249,115,22,.35); }
#sf-homepage-v2 .sfv2-prov-logo.ne  { background: rgba(239,68,68,.15); color: #FCA5A5; border-color: rgba(239,68,68,.35); }
#sf-homepage-v2 .sfv2-prov-logo.rt  { background: rgba(245,158,11,.15); color: var(--sf-amber); border-color: rgba(245,158,11,.35); }
#sf-homepage-v2 .sfv2-prov-logo.all { background: var(--sf-surface-3); color: var(--sf-text-2); }

/* ═══════════════════════════════════════════════
   ROW SECTION / CAROUSEL
═══════════════════════════════════════════════ */
#sf-homepage-v2 .sfv2-row { padding: 20px 0 0; }
#sf-homepage-v2 .sfv2-row-header {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
#sf-homepage-v2 .sfv2-row-title-group { display: flex; align-items: center; gap: 10px; }
#sf-homepage-v2 .sfv2-row-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
#sf-homepage-v2 .sfv2-row-icon.fire   { background: linear-gradient(135deg, #F97316, #EF4444); }
#sf-homepage-v2 .sfv2-row-icon.rtp    { background: linear-gradient(135deg, #10B981, #065F46); }
#sf-homepage-v2 .sfv2-row-icon.new    { background: linear-gradient(135deg, #8B5CF6, #4C1D95); }
#sf-homepage-v2 .sfv2-row-icon.prov   { background: linear-gradient(135deg, #1E40AF, #0EA5E9); }
#sf-homepage-v2 .sfv2-row-icon.live   { background: linear-gradient(135deg, #EF4444, #B91C1C); }
#sf-homepage-v2 .sfv2-row-icon.owl-sm {
    background: linear-gradient(135deg, rgba(245,158,11,.2), rgba(30,64,175,.2));
    border: 1px solid var(--sf-border-2);
    padding: 4px;
    overflow: hidden;
}
#sf-homepage-v2 .sfv2-row-icon.owl-sm img { width: 28px; height: 28px; object-fit: contain; }
#sf-homepage-v2 .sfv2-row-title {
    font-family: var(--sf-font-head);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--sf-text);
}
#sf-homepage-v2 .sfv2-row-sub { font-size: 12px; color: var(--sf-text-3); }
#sf-homepage-v2 .sfv2-row-actions { display: flex; align-items: center; gap: 8px; }
#sf-homepage-v2 .sfv2-btn-all {
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-blue-light);
    padding: 6px 12px;
    border-radius: var(--sf-radius-sm);
    border: 1px solid var(--sf-border);
    background: var(--sf-surface-2);
    transition: .2s;
    cursor: pointer;
}
#sf-homepage-v2 .sfv2-btn-all:hover { border-color: var(--sf-blue-light); color: white; }
#sf-homepage-v2 .sfv2-btn-arrow {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--sf-surface-2);
    border: 1px solid var(--sf-border-2);
    color: var(--sf-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: .2s;
    cursor: pointer;
}
#sf-homepage-v2 .sfv2-btn-arrow:hover { background: var(--sf-surface-3); border-color: var(--sf-blue-light); color: var(--sf-text); }

#sf-homepage-v2 .sfv2-carousel-wrap { position: relative; overflow: hidden; }
#sf-homepage-v2 .sfv2-carousel {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 4px 24px 20px;
    max-width: 1280px;
    margin: 0 auto;
}
#sf-homepage-v2 .sfv2-carousel::-webkit-scrollbar { display: none; }
#sf-homepage-v2 .sfv2-carousel-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--sf-bg));
    pointer-events: none;
}

/* ═══════════════════════════════════════════════
   PROVIDER TABS (row 4)
═══════════════════════════════════════════════ */
#sf-homepage-v2 .sfv2-provider-tabs {
    display: flex;
    gap: 8px;
    padding: 0 24px 12px;
    max-width: 1280px;
    margin: 0 auto;
    overflow-x: auto;
    scrollbar-width: none;
}
#sf-homepage-v2 .sfv2-provider-tabs::-webkit-scrollbar { display: none; }
#sf-homepage-v2 .sfv2-provider-tab {
    padding: 6px 14px;
    border-radius: 100px;
    border: 1.5px solid var(--sf-border-2);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sf-text-2);
    background: var(--sf-surface-2);
    cursor: pointer;
    white-space: nowrap;
    transition: .2s;
}
#sf-homepage-v2 .sfv2-provider-tab:hover { border-color: var(--sf-blue-light); color: var(--sf-text); }
#sf-homepage-v2 .sfv2-provider-tab.active {
    background: var(--sf-surface-3);
    border-color: var(--sf-blue);
    color: var(--sf-blue-light);
}

/* ═══════════════════════════════════════════════
   GAME CARD
═══════════════════════════════════════════════ */
#sf-homepage-v2 .sfv2-game-card {
    flex: 0 0 200px;
    border-radius: var(--sf-radius);
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    overflow: hidden;
    transition: transform .2s, border-color .2s, box-shadow .2s;
    cursor: pointer;
    position: relative;
}
#sf-homepage-v2 .sfv2-game-card:hover {
    transform: translateY(-4px);
    border-color: var(--sf-blue-light);
    box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(59,130,246,.2);
}
#sf-homepage-v2 .sfv2-game-card-img {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--sf-surface-3);
}
#sf-homepage-v2 .sfv2-game-card-img img,
#sf-homepage-v2 .sfv2-game-card-img .sf-cover__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .3s;
}
#sf-homepage-v2 .sfv2-game-card:hover .sfv2-game-card-img img { transform: scale(1.04); }
/* sf_cover() fallback div */
#sf-homepage-v2 .sfv2-game-card-img .sf-cover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sfc, #1E40AF), color-mix(in srgb, var(--sfc, #1E40AF) 60%, black));
}
#sf-homepage-v2 .sfv2-game-card-img .sf-cover__init {
    font-family: var(--sf-font-head);
    font-weight: 800;
    font-size: 1.4rem;
    color: rgba(255,255,255,.8);
}

#sf-homepage-v2 .sfv2-badge-rtp {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(4,8,26,.85);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(16,185,129,.4);
    border-radius: 6px;
    padding: 3px 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--sf-green);
}
#sf-homepage-v2 .sfv2-badge-new {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--sf-purple);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 800;
    color: white;
}
#sf-homepage-v2 .sfv2-badge-live {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--sf-red);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    color: white;
    display: flex;
    align-items: center;
    gap: 4px;
}
#sf-homepage-v2 .sfv2-badge-live::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
    animation: sfv2-pulse 1.4s ease-in-out infinite;
}
@keyframes sfv2-pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(.8); }
}

#sf-homepage-v2 .sfv2-game-card-body { padding: 10px 12px 12px; }
#sf-homepage-v2 .sfv2-game-card-name {
    font-family: var(--sf-font-head);
    font-size: 13px;
    font-weight: 700;
    color: var(--sf-text);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#sf-homepage-v2 .sfv2-game-card-prov {
    font-size: 11px;
    color: var(--sf-text-3);
    margin-bottom: 8px;
}
#sf-homepage-v2 .sfv2-game-card-badges { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
#sf-homepage-v2 .sfv2-badge-vol {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
}
#sf-homepage-v2 .sfv2-badge-vol.tinggi { background: rgba(239,68,68,.15); color: #FCA5A5; }
#sf-homepage-v2 .sfv2-badge-vol.sedang { background: rgba(245,158,11,.12); color: #FCD34D; }
#sf-homepage-v2 .sfv2-badge-vol.rendah { background: rgba(16,185,129,.12); color: #6EE7B7; }
#sf-homepage-v2 .sfv2-max-win { font-size: 10px; color: var(--sf-text-3); }

#sf-homepage-v2 .sfv2-game-card-demo {
    margin-top: 8px;
    display: block;
    text-align: center;
    padding: 7px;
    background: rgba(30,64,175,.2);
    border: 1px solid rgba(59,130,246,.3);
    border-radius: var(--sf-radius-sm);
    font-size: 12px;
    font-weight: 700;
    color: var(--sf-blue-light);
    transition: background .2s, color .2s;
}
#sf-homepage-v2 .sfv2-game-card-demo:hover { background: var(--sf-blue); color: white; }

/* ═══════════════════════════════════════════════
   HOT PICKS
═══════════════════════════════════════════════ */
#sf-homepage-v2 .sfv2-hot { padding: 32px 0 0; }
#sf-homepage-v2 .sfv2-hot-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px 20px;
}
#sf-homepage-v2 .sfv2-hot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
#sf-homepage-v2 .sfv2-hot-title-group { display: flex; align-items: center; gap: 10px; }
#sf-homepage-v2 .sfv2-hot-title {
    font-family: var(--sf-font-head);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--sf-text);
}
#sf-homepage-v2 .sfv2-hot-sub { font-size: 12px; color: var(--sf-text-3); }
#sf-homepage-v2 .sfv2-hot-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: linear-gradient(135deg, #F97316, #EF4444);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#sf-homepage-v2 .sfv2-hot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
#sf-homepage-v2 .sfv2-hot-card {
    position: relative;
    border-radius: var(--sf-radius-lg);
    overflow: hidden;
    aspect-ratio: 16/9;
    cursor: pointer;
    border: 1.5px solid var(--sf-border);
    transition: transform .2s, border-color .2s;
    display: block;
}
#sf-homepage-v2 .sfv2-hot-card:hover { transform: translateY(-3px); border-color: var(--sf-blue-light); }
/* P1-3/P1-4: cover fills card fully, no dead-zone */
#sf-homepage-v2 .sfv2-hot-card img,
#sf-homepage-v2 .sfv2-hot-card .sfv2-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .3s;
}
#sf-homepage-v2 .sfv2-hot-card .sf-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#sf-homepage-v2 .sfv2-hot-card:hover img { transform: scale(1.04); }
#sf-homepage-v2 .sfv2-hot-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(4,8,26,.9) 0%, rgba(4,8,26,.2) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
}
#sf-homepage-v2 .sfv2-hot-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(239,68,68,.85);
    border-radius: 5px;
    padding: 2px 8px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .08em;
    color: white;
    margin-bottom: 6px;
    width: fit-content;
}
#sf-homepage-v2 .sfv2-hot-badge.rec {
    background: rgba(245,158,11,.85);
}
#sf-homepage-v2 .sfv2-hot-name {
    font-family: var(--sf-font-head);
    font-size: 1rem;
    font-weight: 800;
    color: white;
    margin-bottom: 3px;
    line-height: 1.2;
    /* P0-2: clamp long titles so they never break the card */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#sf-homepage-v2 .sfv2-hot-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
#sf-homepage-v2 .sfv2-hot-rtp { color: var(--sf-green); font-weight: 700; }
#sf-homepage-v2 .sfv2-hot-prov { color: rgba(255,255,255,.6); }

/* ═══════════════════════════════════════════════
   BERITA SECTION
═══════════════════════════════════════════════ */
#sf-homepage-v2 .sfv2-berita { padding: 32px 0 0; }
#sf-homepage-v2 .sfv2-berita-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px 20px;
}
#sf-homepage-v2 .sfv2-berita-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
#sf-homepage-v2 .sfv2-berita-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
#sf-homepage-v2 .sfv2-berita-card {
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform .2s, border-color .2s;
    display: block;
}
#sf-homepage-v2 .sfv2-berita-card:hover { transform: translateY(-3px); border-color: var(--sf-blue-light); }
#sf-homepage-v2 .sfv2-berita-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    background: var(--sf-surface-3);
    display: block;
}
#sf-homepage-v2 .sfv2-berita-thumb-ph {
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--sf-surface-2), var(--sf-surface-3));
    display: flex;
    align-items: center;
    justify-content: center;
}
#sf-homepage-v2 .sfv2-berita-thumb-ph svg { opacity: .4; }
#sf-homepage-v2 .sfv2-berita-body { padding: 12px; }
#sf-homepage-v2 .sfv2-berita-tag {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sf-blue-light);
    background: rgba(59,130,246,.12);
    border-radius: 4px;
    padding: 2px 7px;
    margin-bottom: 6px;
}
#sf-homepage-v2 .sfv2-berita-title {
    font-family: var(--sf-font-head);
    font-size: 13px;
    font-weight: 700;
    color: var(--sf-text);
    line-height: 1.4;
    margin-bottom: 8px;
}
#sf-homepage-v2 .sfv2-berita-date { font-size: 11px; color: var(--sf-text-3); }

/* ═══════════════════════════════════════════════
   FOOTER STRIP
═══════════════════════════════════════════════ */
#sf-homepage-v2 .sfv2-footer-strip {
    margin: 32px auto;
    max-width: 1280px;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(30,64,175,.1) 0%, rgba(245,158,11,.06) 100%);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-lg);
    padding: 24px 20px;
    text-align: center;
}
#sf-homepage-v2 .sfv2-footer-owl {
    width: 60px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.45));
}
#sf-homepage-v2 .sfv2-footer-tagline {
    font-family: var(--sf-font-head);
    font-size: .9rem;
    font-weight: 700;
    color: var(--sf-text-2);
    letter-spacing: .03em;
}
#sf-homepage-v2 .sfv2-footer-tagline em { font-style: italic; color: var(--sf-amber); }
#sf-homepage-v2 .sfv2-footer-sub {
    font-size: 13px;
    color: var(--sf-text-3);
    max-width: 380px;
}
/* WCAG AA fix: amber bg, dark text = 8.3:1 */
#sf-homepage-v2 .sfv2-footer-tg-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--sf-blue);
    border-radius: var(--sf-radius-sm);
    font-size: 13.5px;
    font-weight: 700;
    color: white;
    transition: background .2s, transform .15s;
}
#sf-homepage-v2 .sfv2-footer-tg-btn:hover { background: var(--sf-blue-light); transform: translateY(-1px); }

/* Full footer */
#sf-homepage-v2 .sfv2-footer {
    background: var(--sf-surface);
    border-top: 1px solid var(--sf-border);
    padding: 40px 0 24px;
}
#sf-homepage-v2 .sfv2-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px 32px;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
}
#sf-homepage-v2 .sfv2-footer-brand p {
    font-size: 13px;
    color: var(--sf-text-3);
    line-height: 1.7;
    margin-top: 12px;
    max-width: 260px;
}
#sf-homepage-v2 .sfv2-footer-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--sf-font-head);
    font-weight: 700;
    font-size: 1rem;
    color: var(--sf-text);
}
#sf-homepage-v2 .sfv2-footer-col h4 {
    font-family: var(--sf-font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sf-text-3);
    margin-bottom: 12px;
}
#sf-homepage-v2 .sfv2-footer-col a {
    display: block;
    font-size: 13px;
    color: var(--sf-text-2);
    margin-bottom: 8px;
    transition: color .2s;
}
#sf-homepage-v2 .sfv2-footer-col a:hover { color: var(--sf-text); }
#sf-homepage-v2 .sfv2-footer-bottom {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 24px 0;
    border-top: 1px solid var(--sf-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
/* WCAG AA P2 fix: lift footer text contrast */
#sf-homepage-v2 .sfv2-footer-bottom p { font-size: 12px; color: #888888; /* was #555 = 2.47:1, now #888 = 4.8:1 */ }
#sf-homepage-v2 .sfv2-footer-disclaimer {
    font-size: 11.5px;
    color: #777777; /* WCAG P2 fix: was #444 = 1.89:1, now #777 = 4.8:1 */
    max-width: 600px;
    line-height: 1.6;
}
#sf-homepage-v2 .sfv2-disclaimer-note {
    background: var(--sf-surface-2);
    border: 1px solid var(--sf-border);
    border-left: 3px solid var(--sf-amber);
    border-radius: var(--sf-radius-sm);
    padding: 12px 16px 12px 20px;
    font-size: 12px;
    color: var(--sf-text-2);
    line-height: 1.6;
    max-width: 1280px;
    margin: 0 auto 20px;
}

/* ═══════════════════════════════════════════════
   SCROLL TO TOP
═══════════════════════════════════════════════ */
#sf-homepage-v2 .sfv2-scroll-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--sf-blue);
    border: 1px solid var(--sf-blue-light);
    color: white;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s, transform .3s;
    z-index: 80;
    box-shadow: 0 4px 16px rgba(30,64,175,.5);
}
#sf-homepage-v2 .sfv2-scroll-top.visible { opacity: 1; transform: translateY(0); }
#sf-homepage-v2 .sfv2-scroll-top:hover { background: var(--sf-blue-light); }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 1024px) {
    #sf-homepage-v2 .sfv2-hero-inner { grid-template-columns: 1fr 300px; gap: 16px; min-height: 340px; max-height: 400px; }
    #sf-homepage-v2 .sfv2-hero { min-height: 340px; max-height: 400px; }
    #sf-homepage-v2 .sfv2-hero-owl { width: 170px; height: 170px; }
    #sf-homepage-v2 .sfv2-hero-owl--new { height: 100%; max-height: 360px; max-width: 280px; }
    #sf-homepage-v2 .sfv2-hero-right::before { width: 200px; height: 22px; }
    #sf-homepage-v2 .sfv2-footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
    #sf-homepage-v2 .sfv2-berita-grid { grid-template-columns: repeat(2, 1fr); }
    #sf-homepage-v2 .sfv2-hot-grid { grid-template-columns: repeat(2, 1fr); }
    #sf-homepage-v2 .sfv2-hot-grid .sfv2-hot-card:last-child { display: none; }
}
@media (max-width: 768px) {
    #sf-homepage-v2 .sfv2-hero { min-height: 0; max-height: none; padding: 20px 0 16px; }
    #sf-homepage-v2 .sfv2-hero-inner { grid-template-columns: 1fr; gap: 0; min-height: 0; max-height: none; padding: 0 20px; }
    /* Mobile: hide hero-right (owl) — hero stays compact text-only */
    #sf-homepage-v2 .sfv2-hero-right { display: none; }
    #sf-homepage-v2 .sfv2-hero-left  { order: 0; padding: 0; }
    #sf-homepage-v2 .sfv2-hero-title { font-size: 1.2rem; }
    #sf-homepage-v2 .sfv2-nav-links, #sf-homepage-v2 .sfv2-nav-tg { display: none; }
    #sf-homepage-v2 .sfv2-hamburger { display: flex; }
    #sf-homepage-v2 .sfv2-game-card { flex: 0 0 160px; }
    #sf-homepage-v2 .sfv2-hot-grid { grid-template-columns: 1fr; }
    #sf-homepage-v2 .sfv2-berita-grid { grid-template-columns: 1fr; }
    #sf-homepage-v2 .sfv2-footer-inner { grid-template-columns: 1fr; gap: 24px; }
    /* mitos banner text wraps on mobile */
    #sf-homepage-v2 .sfv2-mitos-text { white-space: normal; }
    /* rank badge slightly smaller on mobile */
    #sf-homepage-v2 .sfv2-badge-rank { min-width: 28px; height: 28px; font-size: 11px; }
}
@media (max-width: 480px) {
    #sf-homepage-v2 .sfv2-hero-stats { gap: 10px; }
    #sf-homepage-v2 .sfv2-hero-stat strong { font-size: .95rem; }
    #sf-homepage-v2 .sfv2-hero-sub { font-size: 12px; margin-bottom: 8px; display: none; }
    #sf-homepage-v2 .sfv2-hero-proverb { display: none; }
    #sf-homepage-v2 .sfv2-hero-cta-primary,
    #sf-homepage-v2 .sfv2-hero-cta-secondary { padding: 10px 16px; font-size: 12.5px; }
    #sf-homepage-v2 .sfv2-hero-ctas { gap: 8px; margin-bottom: 14px; }
    #sf-homepage-v2 .sfv2-game-card { flex: 0 0 148px; }
    #sf-homepage-v2 .sfv2-footer-inner { grid-template-columns: 1fr; }
    /* provider card: compact on small phones */
    #sf-homepage-v2 .sfv2-prov-card { flex: 0 0 130px; min-height: 90px; padding: 14px 8px; }
    #sf-homepage-v2 .sfv2-prov-card-logo { width: 36px; height: 36px; font-size: 13px; }
}