/* ===================== CORE ===================== */
:root{--bg:#ffffff;--text:#0b1422;--muted:#667085;--brand:#1b4cff;--border:#e6e9ef;--live:#2b5cff;--dot:#ff2b2b;--max:1160px;--shadow:0 6px 20px rgba(0,0,0,.08)}
    *{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.55 -apple-system,system-ui,Segoe UI,Roboto,Helvetica,Arial}img{max-width:100%;display:block;height:auto}a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}.container{max-width:var(--max);margin:0 auto;padding:0 16px}

    /* Header */
    header.site{position:sticky;top:0;z-index:70;background:#fff;border-bottom:1px solid var(--border)}
    .bar{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:10px 0}
    .hamb{background:transparent;border:0;padding:8px;border-radius:10px;font-size:22px}
    .brand{display:flex;align-items:center;gap:8px} .brand img{height:28px}
    .logotype{font-weight:800;background:linear-gradient(90deg,#2356ff,#f25555,#f8a13b);-webkit-background-clip:text;background-clip:text;color:transparent}
    .icons{display:flex;align-items:center;gap:14px}
    .search-btn{display:inline-flex;align-items:center;justify-content:center;height:32px;width:32px;border-radius:8px;border:1px solid var(--border);background:#fff}
    .live-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #cbd5e1;border-radius:10px;font-weight:700;color:#1d3df5}
    .live-dot{height:8px;width:8px;border-radius:50%;background:var(--live)}
    .tabs{display:flex;gap:22px;align-items:center;padding:8px 0;overflow:auto}
    .tab{font-weight:700;color:#111827;white-space:nowrap} .tab .newdot{display:inline-block;height:8px;width:8px;border-radius:50%;background:var(--dot);margin-left:6px}

    /* Sidebar */
    .sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.2s;z-index:80}
    .sheet-overlay.show{opacity:1;visibility:visible}
    .sheet{position:fixed;inset:0 auto 0 0;width:min(92vw,460px);max-width:460px;background:#fff;border-right:1px solid var(--border);
           transform:translateX(-105%);transition:.25s;z-index:90;display:flex;flex-direction:column;border-top-right-radius:16px;border-bottom-right-radius:16px;box-shadow:var(--shadow)}
    .sheet.open{transform:none}
    .sheet-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
    .sheet-close{background:transparent;border:0;color:#ef4444;font-weight:800;font-size:22px}
    .sheet-body{padding:12px 16px;overflow:auto}
    .profile{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);margin-bottom:12px}
    .avatar{height:40px;width:40px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;color:#94a3b8}
    .block{margin:14px 0}
    .block h4{margin:0 0 10px;font-size:14px;color:#0f172a;border-bottom:1px solid var(--border);padding-bottom:8px}
    .cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
    .cat-item{display:flex;align-items:center;gap:10px}
    .ico{height:26px;width:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:700}
    .ico.blue{background:#2563eb} .ico.green{background:#22c55e} .ico.red{background:#ef4444} .ico.orange{background:#f97316} .ico.purple{background:#8b5cf6} .ico.teal{background:#14b8a6} .ico.pink{background:#ec4899} .ico.gray{background:#64748b}

    /* HERO */
    .hero-wrap{border-bottom:1px solid var(--border);background:#fff}
    .hero{position:relative;overflow:hidden;border-radius:14px;margin:10px 0;box-shadow:0 4px 20px rgba(0,0,0,.06)}
    .track{display:flex;transition:transform .35s ease}
    .slide{min-width:100%;position:relative;background:#e2e8f0}
    .slide .media{aspect-ratio:16/9;background:#e5e7eb}
    .slide .caption{
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      bottom:14px;
      width:min(92%, 860px);
      text-align:center;
      color:#fff;
      padding:0 12px;
      background:transparent;
    }
    .slide::after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:0;
      height:45%;
      background:linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 86%, rgba(0,0,0,.7) 100%);
      pointer-events:none;
    }
    .slide .caption h2,.slide .caption h3{
      margin:0;
      line-height:1.2;
      font-weight:800;
      font-size:18px;
      text-shadow:0 2px 8px rgba(0,0,0,.55);
    }
    @media(min-width:640px){ .slide .caption h2,.slide .caption h3{font-size:22px} }
    @media(min-width:1024px){ .slide .caption h2,.slide .caption h3{font-size:26px} }
    .slide .caption h2,.slide .caption h3{margin:0;line-height:1.25;font-weight:800;font-size:18px}
    @media(min-width:640px){ .slide .caption h2,.slide .caption h3{font-size:22px} }
    @media(min-width:1024px){ .slide .caption h2,.slide .caption h3{font-size:28px} }
    .slide .caption h2,.slide .caption h3{margin:0;line-height:1.25;font-weight:800;font-size:18px}
    @media(min-width:640px){ .slide .caption h2,.slide .caption h3{font-size:22px} }
    @media(min-width:1024px){ .slide .caption h2,.slide .caption h3{font-size:28px} }
    .dots{position:absolute;left:12px;bottom:12px;display:flex;gap:6px}
    .dot{height:8px;width:8px;border-radius:999px;background:rgba(255,255,255,.6);border:0}
    .dot[aria-current="true"]{background:#fff}
    .ctrl{position:absolute;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;gap:8px;width:100%;padding:0 6px;pointer-events:none}
    .ctrl button{pointer-events:auto;height:36px;width:36px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.35);color:#fff;backdrop-filter:blur(6px)}

    /* Content */
    main{padding:12px 0 24px}
    .section-head{display:flex;align-items:end;justify-content:space-between;margin:8px 0}
    .section-head h2{margin:0;font-size:18px}
    .news-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
    @media(min-width:720px){ .news-grid{grid-template-columns:repeat(3,1fr)} }
    @media(min-width:1024px){ .news-grid{grid-template-columns:repeat(4,1fr)} }
    article.card{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 2px 8px rgba(15,23,42,.04);display:flex;flex-direction:column}
    .thumb{aspect-ratio:16/9;background:#e2e8f0} .thumb img{width:100%;height:100%;object-fit:cover}
    .meta{padding:10px 12px;display:flex;flex-direction:column;gap:6px}
    .cat{display:flex;gap:6px;flex-wrap:wrap} .cat span{font-size:12px;padding:4px 8px;border-radius:999px;background:#f1f5f9;color:#0f172a;border:1px solid #e2e8f0}
    .title{margin:0;font-size:15px;line-height:1.35;color:#0b1422}
    /* Gradient untuk judul post WordPress (auto-load) */
    .tile .title a,
    .feed-grid .title a,
    .grid-news .title a,
    .wp-cat .title a,
    .card .title a{
      background: linear-gradient(90deg, #facc15 0%, #38bdf8 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
 .excerpt{margin:0;color:#667085;font-size:13px}
    /* Gradient untuk judul section */
    .section-title h2,
    .section-head h2,
    section > h2,
    section h2.section-title,
    .wrap > h2{
      background: linear-gradient(90deg, #38bdf8 0%, #facc15 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
 .byline{margin:0;color:#6b7280;font-size:12px}
    /* Gradient khusus section "Situs Slot Informasi Gacor dengan Provider Game Terlengkap" */
    #seo-article h1,
    #seo-article h2,
    #seo-article h3,
    #seo-article h4,
    #seo-article .section-title,
    #seo-article .title{
      background: linear-gradient(90deg, #38bdf8 0%, #facc15 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }

    .feed-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:8px}
    @media(min-width:900px){ .feed-grid{grid-template-columns:1fr 1fr} }
    .card.list .title{font-size:18px}

    .recs{margin-top:8px}
    .recs-head{display:flex;align-items:center;justify-content:space-between;margin:6px 0}
    .recs-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
    .card.mini .title{font-size:14px}
    @media(min-width:900px){ .recs-grid{grid-template-columns:repeat(3,1fr)} }
    @media(min-width:1200px){ .recs-grid{grid-template-columns:repeat(4,1fr)} }

    .headline-single{margin:16px 0}
    .headline-single .card .title{font-size:20px}

    .game-demo{margin-top:8px}
    .vrow{display:flex;gap:12px;overflow:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
    .vcard{min-width:240px;scroll-snap-align:start}
    .vthumb{position:relative;display:block;border-radius:12px;overflow:hidden;border:1px solid #e5e7eb}
    .vthumb .play{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.65);color:#fff;border-radius:999px;padding:4px 8px;font-size:12px}
    .vthumb .dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.65);color:#fff;border-radius:6px;padding:2px 6px;font-size:12px}
    .game-demo .controls{display:flex;gap:8px;justify-content:flex-end;margin:6px 0}
    .btn{padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer}

    /* Konten Kategori */
    .cat-desc{font-size:14px;color:#555;line-height:1.6;margin:6px 0 14px}

    .wp-sections{margin-top:18px}
    .wp-cat-block{margin:12px 0 22px}
    .wp-cat-block .section-head h3{font-size:18px;margin:0}
    .wp-cat{display:grid;gap:14px}
    .wp-cat .tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
    .wp-cat .tile{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 2px 8px rgba(15,23,42,.04)}
    .wp-cat .tile .thumb{aspect-ratio:16/9;border-radius:14px 14px 0 0;overflow:hidden}
    .wp-cat .tile .meta{padding:10px 12px}
    .wp-cat .label{font-weight:800;font-size:16px;margin:4px 0 6px;display:block;letter-spacing:.2px}
    .wp-cat .tile .title{font-size:15px}
    .wp-cat .title a{color:#1b4cff;text-decoration:none}
    .wp-cat .title a:hover{text-decoration:underline}
    .wp-cat .divider{height:1px;background:#e5e7eb;margin:4px 0}
    .wp-cat .list{display:grid;gap:16px}
    .wp-cat .media{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center}
    .wp-cat .media .thumb{border-radius:12px;overflow:hidden;border:1px solid #e5e7eb;aspect-ratio:1/1}
    .wp-cat .media .title{font-size:15px}
    .wp-cat .media .label{font-weight:800;font-size:14px;margin-bottom:4px;display:block}
    @media(min-width:900px){ .wp-cat .media{grid-template-columns:128px 1fr} }
    
    /* Editor's Picks */
    /* FLASH SECTION (Deep Blue Vertical) */
    .flash-section{margin:24px 0}
    .flash-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
    @media(min-width:720px){ .flash-grid{grid-template-columns:repeat(4,1fr)} }
    .flash-card{background:linear-gradient(180deg,#0f172a 0%,#1e3a8a 100%);border:1px solid #1e40af;border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(15,23,42,.3);display:flex;flex-direction:column;transition:all .3s ease;height:100%}
    .flash-card:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(30,58,138,.4)}
    .flash-card .thumb{aspect-ratio:16/9;background:#020617;position:relative;overflow:hidden} /* Aspect ratio changed to Landscape */
    .flash-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
    .flash-card:hover .thumb img{transform:scale(1.1)}
    .flash-card .meta{padding:14px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;flex:1;background:linear-gradient(0deg, rgba(15,23,42,1) 0%, rgba(15,23,42,0.8) 100%)}
    .flash-card .label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#60a5fa;font-weight:800;display:inline-flex;align-items:center;background:rgba(30,64,175,0.3);padding:4px 8px;border-radius:6px;width:fit-content}
    .flash-card .title{margin:0;font-size:16px;line-height:1.4;font-weight:700;color:#fff}
    .flash-card .title a{color:#fff;text-decoration:none;background:none;-webkit-text-fill-color:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* Reduced line clamp for landscape */
    .flash-card .title a:hover{color:#38bdf8}
    .flash-card .date{font-size:11px;color:#94a3b8;margin-top:auto}

    .picks{border:2px solid #1e3a8a;border-radius:18px;overflow:hidden;background:#fff;margin:12px 0}
    .picks-head{background:linear-gradient(180deg,#0b66ff,#0a3ffc);color:#fff;padding:14px 16px;font-weight:900;letter-spacing:.5px;font-style:italic}
    .picks-grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));padding:14px}
    @media(min-width:900px){ .picks-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
    .picks .card{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff}
    .picks .thumb{aspect-ratio:16/9}
    .picks .title{font-size:16px}

    /* Footer */
    .footer{background:#efeff1;border-top:1px solid #dfe3ea}
    .footer .inner{max-width:980px;margin:0 auto;padding:28px 16px;text-align:center}
    .footer .brand img{height:48px;display:block;margin:0 auto 10px}
    .footer .network{display:flex;align-items:center;justify-content:center;gap:8px;color:#6b7280;margin:-2px 0 18px}
    .footer .network img{height:22px}
    .footer .links{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;color:#4b5563;margin:0 0 18px}
    .footer .links a{color:#4b5563;text-decoration:none;font-weight:600}
    .footer .links .sep{opacity:.6}
    .footer .social{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:2px 0 16px}
    .footer .sbtn{height:44px;width:44px;border-radius:999px;display:grid;place-items:center;color:#fff;font-size:18px;font-weight:900;box-shadow:0 2px 8px rgba(0,0,0,.12)}
    .s-wa{background:#22c55e} .s-fb{background:#1877f2} .s-x{background:#111827}
    .s-ig{background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%)}
    .s-in{background:#2563eb} .s-yt{background:#ef4444} .s-tt{background:#111827}
    .footer .dl-title{color:#6b7280;margin:0 0 10px}
    .footer .stores{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0 0 12px}
    .footer .stores img{height:46px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
    .footer .copy{
  display:block;
  color:#6b7280;
  margin-top:18px;
  font-size:14px;
}
    /* === SEARCH OVERLAY (modern) === */
    .search-overlay{position:fixed;inset:0;background:rgba(255,255,255,0.98);z-index:9999;display:none;flex-direction:column}
    .search-overlay.active{display:flex}
    .search-box{position:sticky;top:0;background:#fff;display:flex;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border)}
    .search-input{flex:1;display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:28px;padding:10px 14px}
    .search-input input{flex:1;border:0;outline:none;font-size:16px;background:transparent}
    .close-btn{border:1px solid var(--border);background:#fff;border-radius:10px;padding:8px 12px;font-weight:700;cursor:pointer}
    .search-results{padding:16px;display:grid;gap:16px;grid-template-columns:1fr}
    @media(min-width:600px){ .search-results{grid-template-columns:repeat(2,1fr)} }
    @media(min-width:900px){ .search-results{grid-template-columns:repeat(3,1fr)} }
    .search-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.04)}
    .search-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
    .search-card h3{margin:0;padding:10px;font-size:15px;line-height:1.35}
  
    /* header actions & search button */
    header.site .bar-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end}
    header.site .bar-actions .btn-icon{border:1px solid var(--border);background:#fff;border-radius:12px;padding:8px 12px;cursor:pointer;font-size:16px;line-height:1}
    header.site .bar-actions .btn-icon:active{transform:scale(.98)}
    
    /* === Search results: 2-col mobile grid + Load More === */
    .search-results{padding:16px;display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}
    @media(min-width:768px){ .search-results{gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))} }
    @media(min-width:1100px){ .search-results{grid-template-columns:repeat(4,minmax(0,1fr))} }
    .search-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.04)}
    .search-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
    .search-card h3{margin:0;padding:10px;font-size:14px;line-height:1.35}
    .search-overlay{overflow:auto}
    .load-more-wrap{padding:12px 16px;display:flex;justify-content:center}
    .load-more{border:1px solid var(--border);background:#fff;border-radius:999px;padding:10px 18px;font-weight:700;cursor:pointer}
    .load-more:disabled{opacity:.5;cursor:not-allowed}

    /* === Popular search block (first view) === */
    .popular{padding:14px 16px}
    .popular h3{margin:6px 0 10px;font-size:20px}
    .popular .lead{display:flex;align-items:center;gap:8px}
    .popular .lead .bar{width:6px;height:18px;border-radius:4px;background:#ff2b2b}
    .popular .tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
    .popular .tag{display:inline-block;background:#eaf2ff;color:#1b4cff;padding:10px 14px;border-radius:999px;
                  font-weight:700;font-size:14px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(27,76,255,.08)}

    /* === Editor's Picks: slider 2 cards per slide === */
    .picks{border:2px solid #1e3a8a;border-radius:18px;overflow:hidden;background:#fff;margin:12px 0}
    .picks-head{background:linear-gradient(180deg,#0b66ff,#0a3ffc);color:#fff;padding:14px 16px;font-weight:900;letter-spacing:.5px;font-style:italic}
    .picks-wrap{position:relative;padding:14px}
    .picks-viewport{overflow:hidden}
    .picks-track{display:flex;transition:transform .35s ease}
    .picks-slide{min-width:100%;display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .picks-card{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.04)}
    .picks-card .thumb{aspect-ratio:16/9;background:#e5e7eb}
    .picks-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
    .picks-card .meta{padding:10px 12px}
    .picks-card .title{margin:0;font-size:16px;line-height:1.35}
    .picks-nav{position:absolute;top:50%;left:8px;right:8px;display:flex;justify-content:space-between;transform:translateY(-50%);pointer-events:none}
    .picks-nav button{pointer-events:auto;border:0;background:rgba(30,41,59,.18);backdrop-filter:blur(2px);width:44px;height:44px;border-radius:999px;color:#fff;font-size:22px;display:grid;place-items:center}
    .picks-dots{display:flex;gap:8px;justify-content:center;padding-top:10px}
    .picks-dots .dot{width:10px;height:10px;border-radius:999px;background:#cbd5e1;border:0}
    .picks-dots .dot[aria-current="true"]{background:#1e3a8a}
    @media(max-width:520px){ .picks-slide{grid-template-columns:1fr 1fr;gap:12px} .picks-card .title{font-size:15px} }

    /* === Distinct styles: Terbaru vs News Feed === */
    .latest-wrap{display:grid;gap:14px}
    .latest-wrap .card{border-radius:16px;overflow:hidden;border:1px solid var(--border);background:#fff;box-shadow:0 2px 10px rgba(15,23,42,.05)}
    .latest-wrap .card .thumb{aspect-ratio:16/9}
    .latest-wrap .card .title{font-size:18px}
    /* first item highlight */
    .latest-wrap .card:nth-child(1){grid-column:1/-1}
    .latest-wrap .card:nth-child(1) .title{font-size:22px}
    @media(min-width:680px){
      .latest-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
      .latest-wrap .card:nth-child(1){grid-column:1/-1}
    }
    @media(min-width:1024px){
      .latest-wrap{grid-template-columns:repeat(3,minmax(0,1fr))}
      .latest-wrap .card:nth-child(1){grid-column:1/-1}
    }

    /* News Feed: strict 2-col grid */
    .feed-wrap{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
    .feed-wrap .card{border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#fff}
    .feed-wrap .thumb{aspect-ratio:16/9}
    .feed-wrap .title{font-size:16px}
  
/* --- Perf Fixes: reserve space, prevent CLS, reduce work below-the-fold --- */
.hero{aspect-ratio:16/9;min-height:clamp(220px,56vw,480px)} /* Keep stable height even before JS fills it */
.hero .track, .hero .slide{min-height:100%}
/* Initial skeletons: same sizes as cards to avoid layout jumps */
.skel-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){ .skel-grid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1024px){ .skel-grid{grid-template-columns:repeat(4,1fr)} }
.skel-card{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.04)}
.skel-card .s-thumb{aspect-ratio:16/9;background:#e5e7eb}
.skel-card .s-meta{padding:10px 12px}
.skel-bar{height:12px;background:#e9eef7;border-radius:8px;margin:8px 0}
.skel-bar.big{height:16px}
/* Avoid relayout for big sections below the fold */
.game-demo, .wp-sections, footer.footer{content-visibility:auto;contain-intrinsic-size: 1px 600px}
/* Default lazy for non-critical images */
img:not(.lcp){content-visibility:auto}
  
/* --- Mobile overflow fixes --- */
html, body{max-width:100%; overflow-x:hidden}
.container{width:100%; max-width:var(--max); margin:0 auto; padding:0 16px}
.hero, .hero .track, .hero .slide{max-width:100vw}
.tabs{overflow:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:18px}
.tabs::-webkit-scrollbar{display:none}
.tab{display:inline-block; white-space:nowrap}
/* Prevent long words from stretching cards */
.title, .excerpt{word-wrap:break-word; overflow-wrap:anywhere}
/* Ensure drawer off-canvas never pushes layout width */
.drawer{contain:layout size; will-change:transform}
/* Avoid accidental overflow from controls */
.ctrl, .picks-nav{left:0; right:0; max-width:100%}
  
/* --- Mobile header + hero precision fixes --- */
header.site .bar{min-width:0}
.brand, .icons, .tabs{min-width:0}
.brand img{height:28px; width:auto}
@media(max-width:480px){
  header.site .bar{grid-template-columns: 36px 1fr auto; gap:8px; padding:8px 0}
  .brand img{height:24px}
  .logotype{font-size:14px}
  .icons{gap:8px}
  .search-btn{height:32px;width:32px;border-radius:10px}
}
/* Hero should never be cropped/overflow on mobile edges */
.hero-wrap .container{padding-left:16px; padding-right:16px}
.hero{border-radius:16px; overflow:hidden; margin:8px 0; max-width:100%}
.slide .media{display:block; width:100%; height:auto}
.slide .media img{width:100%; height:100%; object-fit:cover; display:block}
.slide .caption{left:50%; transform:translateX(-50%); bottom:10px; width:min(94%, 820px)}
@media(max-width:480px){
  .slide .caption h2,.slide .caption h3{font-size:16px}
  .ctrl button{height:32px; width:32px}
}
/* Make sure arrow buttons sit inside safe padding */
.ctrl{padding-left:6px; padding-right:6px}
  
/* --- A11Y: skip link focus visible --- */
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;padding:10px 12px;background:#111;color:#fff;border-radius:10px;z-index:10000;display:inline-block;outline:3px solid #38bdf8;outline-offset:2px}
.skip-link:focus-visible{left:8px;top:8px;width:auto;height:auto;padding:10px 14px;clip:auto;overflow:visible;white-space:normal;background:#111;color:#fff;border-radius:10px;z-index:10000;outline:3px solid #38bdf8;outline-offset:2px;display:inline-block}
/* Icon buttons larger for tap */
button, .icon-btn{min-width:44px;min-height:44px}
/* Visually-hidden helper */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  *{animation: none !important; transition: none !important; scroll-behavior: auto !important}
}
  
/* --- Hero dots & controls tidy --- */
.hero .dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:8px;pointer-events:auto}
.hero .dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.65);border:0}
.hero .dot[aria-current="true"]{background:#fff}
.ctrl button{border:0;background:rgba(17,24,39,.55);color:#fff;border-radius:999px;backdrop-filter:blur(2px)}
  
/* --- Store badges as inline buttons (no external images) --- */
.badges{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:480px){.badges{grid-template-columns:repeat(3,1fr)}}
.btn-store{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;
  text-decoration:none;font-weight:600;box-shadow:0 2px 8px rgba(16,24,40,.08);border:1px solid rgba(2,6,23,.06)}
.btn-store svg{width:28px;height:28px;flex:0 0 28px}
.btn-store.play{background:#1a73e8;color:#fff}
.btn-store.appstore{background:#000;color:#fff}
.btn-store.appgallery{background:#e60000;color:#fff}
.btn-store span{line-height:1}
  
/* Skip link hidden by default; visible only on focus */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;white-space:nowrap;border:0;padding:0;margin:0}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;padding:10px 12px;background:#0f172a;color:#fff;border-radius:10px;z-index:10000;box-shadow:0 2px 8px rgba(0,0,0,.25)}
  
/* Drawer/sidebar hidden by default */
.sheet-overlay{position:fixed;inset:0;background:rgba(2,6,23,.52);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:70}
.drawer{position:fixed;top:0;left:0;width:min(420px,88vw);height:100dvh;background:#fff;color:#0f172a;
  box-shadow:6px 0 24px rgba(2,6,23,.18);border-radius:0 18px 18px 0;transform:translateX(-105%);
  transition:transform .25s ease;overflow-y:auto;z-index:80}
.drawer.open{transform:translateX(0)}
.sheet-overlay.open{opacity:1;pointer-events:auto}
body.drawer-open{overflow:hidden;touch-action:none}
/* Prevent incorrect aspect ratio */
img{height:auto;max-width:100%}
  
/* === A11Y PATCH: Contrast & Tap Targets === */
/* Ensure labels pass contrast on white backgrounds */
.label{
  color:#1f2937 !important; /* dark gray, AA compliant */
  font-weight:600;
}
/* Optional category color dot (keeps brand color without hurting text contrast) */
.label::before{
  content:"";
  display:inline-block;
  width:.6em; height:.6em; border-radius:999px;
  background: var(--cat, #6b7280);
  margin-right:.4em;
}
.label[data-cat="game"]{ --cat:#1d4ed8 }
.label[data-cat="slot"]{ --cat:#b91c1c }
.label[data-cat="demo"]{ --cat:#7c3aed }
.label[data-cat="blog"]{ --cat:#0f766e }
.label[data-cat="news"]{ --cat:#c2410c }

/* Footer contrast */
footer.footer .di-title,
footer.footer .network span{ color:#374151 !important }
footer.footer a{ color:#1d4ed8 }

/* Skip link: visually hidden but focusable */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;padding:10px 12px;background:#0f172a;color:#fff;border-radius:10px;z-index:10000}
  
/* A11Y: enforce text contrast for .label even if inline color present */
.label{color:#1f2937 !important}
  
/* === Hero dots size override === */
.hero .dot{width:8px;height:8px;min-width:0;min-height:0;border-radius:999px}
@media(max-width:600px){ .hero .dot{width:6px;height:6px} }

/* === Modern Close Button for Drawer === */
.drawer .close{
  background: rgba(239,68,68,0.1);
  border: 2px solid #ef4444;
  color: #ef4444;
  font-size: 22px;
  font-weight: 800;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .25s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.drawer .close:hover{
  background: #ef4444;
  color: #fff;
  transform: scale(1.05);
}
.drawer .close:active{
  transform: scale(0.95);
}

/* === Modern Button Style untuk Lihat Semua === */
.section-head a{
  display:inline-block;
  padding:6px 14px;
  font-size:14px;
  font-weight:600;
  color:#1b4cff;
  border:2px solid #1b4cff;
  border-radius:999px; /* pill shape */
  background:rgba(27,76,255,0.05);
  text-decoration:none;
  transition:all .25s ease;
}
.section-head a:hover{
  background:#1b4cff;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(27,76,255,0.25);
}
.section-head a:active{
  transform:translateY(0);
  box-shadow:none;
}

/* === Modern Button Style untuk link navigasi (Video, Indeks, dll.) === */
.recs-head a{
  display:inline-block;
  padding:6px 14px;
  font-size:14px;
  font-weight:600;
  color:#1b4cff;
  border:2px solid #1b4cff;
  border-radius:999px;
  background:rgba(27,76,255,0.05);
  text-decoration:none;
  transition:all .25s ease;
}
.recs-head a:hover{
  background:#1b4cff;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(27,76,255,0.25);
}
.recs-head a:active{
  transform:translateY(0);
  box-shadow:none;
}

/* === Mobile center align for store badges === */
@media(max-width:600px){
  .btn-store{justify-content:center;text-align:center}
}

/* === Standardized Store Badges (black style) === */
.store-badges .btn-store{
  background:#111 !important;
  color:#fff !important;
  border:none !important;
  border-radius:14px !important;
  padding:12px 16px !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  text-decoration:none !important;
}
.store-badges .btn-store svg,
.store-badges .btn-store img{ width:28px; height:28px; flex:0 0 28px }
.store-badges .btn-store .lines{ display:flex; flex-direction:column; line-height:1.05 }
.store-badges .btn-store .lines .kicker{
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; opacity:.8
}
.store-badges .btn-store .lines .brand{ font-size:18px; font-weight:700 }
@media(max-width:600px){
  .store-badges .btn-store{ padding:10px 14px; gap:10px; border-radius:12px }
  .store-badges .btn-store svg,
  .store-badges .btn-store img{ width:24px; height:24px; flex-basis:24px }
  .store-badges .btn-store .lines .kicker{ font-size:9px }
  .store-badges .btn-store .lines .brand{ font-size:16px }
}

/* === Responsive multi-column badges on mobile (not stacked) === */
@media(max-width:600px){
  /* make any direct container that holds .btn-store become a wrap row */
  .store-badges :where(div,section,nav,ul,ol):has(> .btn-store){
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    justify-content:center !important;
  }
  /* three columns look */
  .store-badges .btn-store{
    flex:0 0 calc(33.333% - 10px) !important;
    width:calc(33.333% - 10px) !important;
    padding:10px 8px !important;
    gap:8px !important;
    border-radius:10px !important;
  }
  .store-badges .btn-store svg,
  .store-badges .btn-store img{ width:20px !important; height:20px !important; flex-basis:20px !important }
  .store-badges .btn-store .lines .kicker{ font-size:8px !important }
  .store-badges .btn-store .lines .brand{ font-size:12px !important }
}

/* === Mobile: badges in 3 columns (side-by-side) === */
@media(max-width:600px){
  .badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
  .badges .btn-store{display:inline-flex;justify-content:center;flex:0 0 calc(33.333% - 10px);width:calc(33.333% - 10px);padding:10px 8px}
  .badges .btn-store span{font-size:12px}
  .badges .btn-store svg{width:20px;height:20px;flex-basis:20px}
}

/* === Logo kecil untuk "part of" === */
.footer .partof img{
  max-height:18px;
  width:auto;
  vertical-align:middle;
  opacity:.9;
}

/* === Extra small logo for "part of" === */
.footer .partof img{
  max-height:10px !important;
  width:auto !important;
  vertical-align:middle;
  opacity:.8;
}

/* === Super small logo for "part of" === */
.footer .partof img{
  max-height:8px !important;
  width:auto !important;
  vertical-align:middle;
  opacity:.85;
}
.footer .partof{
  font-size:13px;
  color:#555;
}

/* === Glassmorphism effect untuk logo utama === */
.header .logo{
  display:inline-block;
  padding:12px 24px;
  border-radius:16px;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(10px) saturate(180%);
  -webkit-backdrop-filter:blur(10px) saturate(180%);
  box-shadow:0 4px 20px rgba(0,0,0,0.1);
}

/* === Glass effect for footer main logo to separate from "part of" line === */
.footer .brand{
  display:inline-block;
  padding:10px 18px;
  border-radius:16px;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(10px) saturate(180%);
  -webkit-backdrop-filter:blur(10px) saturate(180%);
  box-shadow:0 4px 16px rgba(0,0,0,0.08);
}

/* === SEO/UX patch v21 === */
.card .thumb{ aspect-ratio: 3/2; object-fit: cover; width:100%; }
.section-head a{ outline-offset:2px }
.section-head a:focus-visible{ outline:3px solid #1b4cff }

/* === Sidebar submenu (Blog > Tips-Trik) === */
.menu-item.has-sub{ display:block; }
.menu-item.has-sub .parent{ flex:1 1 auto; }
.menu-item.has-sub .sub-toggle{ display:none; }
.menu-item.has-sub .chev{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:6px; cursor:pointer;
  background:rgba(27,76,255,0.08); border:1px solid rgba(27,76,255,0.2);
  font-weight:700; user-select:none; transition:transform .2s ease, background .2s ease;
}
.menu-item.has-sub .submenu{ display:none; padding-left:10px; margin-top:6px; }
.menu-item.has-sub .submenu a{ display:block; padding:6px 0; font-size:14px; }
.menu-item.has-sub .sub-toggle:checked ~ .submenu{ display:block; }
.menu-item.has-sub .sub-toggle:checked ~ .chev{ transform:rotate(180deg); background:rgba(27,76,255,0.12); }

@media(max-width:600px){
  .menu-item.has-sub{ display:block; }
  .menu-item.has-sub .chev{ width:26px; height:26px; }
  .menu-item.has-sub .submenu a{ font-size:13px; }
}

/* Submenu under Blog (vertical layout) */
.menu-item.has-sub .parent{ display:inline-block; margin-right:8px; }
.menu-item.has-sub .chev{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:6px; cursor:pointer;
  background:rgba(27,76,255,0.08); border:1px solid rgba(27,76,255,0.2);
  font-weight:700; user-select:none; transition:transform .2s ease, background .2s ease;
}
.menu-item.has-sub .submenu{ display:none; padding-left:36px; margin-top:6px; }
.menu-item.has-sub .sub-toggle:checked ~ .submenu{ display:block; }
.menu-item.has-sub .sub-toggle:checked ~ .chev{ transform:rotate(180deg); background:rgba(27,76,255,0.12); }

@media(max-width:600px){
  .menu-item.has-sub .submenu{ padding-left:32px; }
  .menu-item.has-sub .chev{ width:26px; height:26px; }
}

/* === Dropdown submenu overlays (no layout shift) === */
.menu-item.has-sub{ position:relative; display:block; }
.menu-item.has-sub .submenu{
  position:absolute;
  left:0;
  top:100%;
  display:none;
  min-width:180px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,0.98);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.06);
  z-index:50;
}
.menu-item.has-sub .submenu a{ display:block; padding:8px 6px; white-space:nowrap; }
.menu-item.has-sub .sub-toggle:checked ~ .submenu{ display:block; }

@media(max-width:600px){
  /* On small screens, make dropdown align with menu edge and fit content */
  .menu-item.has-sub .submenu{ min-width: 60%; }
}

/* === v28: Compact & responsive submenu style (auto-applies to any .menu-item.has-sub) === */
.menu-item.has-sub{ position:relative; display:block; }
.menu-item.has-sub .submenu{
  position:absolute;
  left:0; top:100%;
  display:none;
  min-width:auto;           /* follow content width */
  padding:4px 8px;
  border-radius:8px;
  background:rgba(255,255,255,0.95);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.06);
  z-index:50;
  white-space:nowrap;       /* keep one line */
}
.menu-item.has-sub .submenu a{
  display:block;
  padding:6px 10px;
  font-size:14px;
}
.menu-item.has-sub .sub-toggle:checked ~ .submenu{ display:block; }

@media(max-width:600px){
  .menu-item.has-sub .submenu{
    padding:6px 10px;
    border-radius:10px;
  }
  .menu-item.has-sub .submenu a{ font-size:15px; }
}
  
  .footer .footer-article{
    max-width:980px;
    margin:0 auto 24px auto;
    padding:16px 0;
    font-size:14px;
    line-height:1.7;
    color:#111111;
  }
  .footer .footer-article h2{
    font-size:20px;
    margin-bottom:8px;
    font-weight:700;
    color:#000000;
  }
  .footer .footer-article h3{
    font-size:16px;
    margin-top:16px;
    margin-bottom:6px;
    font-weight:700;
    color:#000000;
  }
  .footer .footer-article p{
    margin:0 0 8px 0;
    color:#111111;
  }
  .footer .footer-article ul,
  .footer .footer-article ol{
    margin:0 0 10px 20px;
    color:#111111;
  }
  .footer .footer-article li{
    margin-bottom:4px;
    color:#111111;
  }

  .footer .footer-article{
    max-width:980px;
    margin:0 auto 24px auto;
    padding:16px 0;
    font-size:14px;
    line-height:1.7;
    color:#111111;
  }
  .footer .footer-article h2{
    font-size:20px;
    margin-bottom:8px;
    font-weight:700;
    color:#000000;
  }
  .footer .footer-article h3{
    font-size:16px;
    margin-top:16px;
    margin-bottom:6px;
    font-weight:700;
    color:#000000;
  }
  .footer .footer-article p{
    margin:0 0 8px 0;
    color:#111111;
  }
  .footer .footer-article ul,
  .footer .footer-article ol{
    margin:0 0 10px 20px;
    color:#111111;
  }
  .footer .footer-article li{
    margin-bottom:4px;
    color:#111111;
  }

  .footer .footer-article{
    max-width:980px;
    margin:0 auto 24px auto;
    padding:16px 0;
    font-size:14px;
    line-height:1.7;
    color:#111111;
  }
  .footer .footer-article h2{
    font-size:20px;
    margin-bottom:8px;
    font-weight:700;
    color:#000000;
  }
  .footer .footer-article h3{
    font-size:16px;
    margin-top:16px;
    margin-bottom:6px;
    font-weight:700;
    color:#000000;
  }
  .footer .footer-article p{
    margin:0 0 8px 0;
    color:#111111;
  }
  .footer .footer-article ul,
  .footer .footer-article ol{
    margin:0 0 10px 20px;
    color:#111111;
  }
  .footer .footer-article li{
    margin-bottom:4px;
    color:#111111;
  }

  .footer .footer-article{
    max-width:980px;
    margin:0 auto 24px auto;
    padding:16px 0;
    font-size:14px;
    line-height:1.7;
    color:#111111;
  }
  .footer .footer-article h2{
    font-size:20px;
    margin-bottom:8px;
    font-weight:700;
    color:#000000;
  }
  .footer .footer-article h3{
    font-size:16px;
    margin-top:16px;
    margin-bottom:6px;
    font-weight:700;
    color:#000000;
  }
  .footer .footer-article p{
    margin:0 0 8px 0;
    color:#111111;
  }
  .footer .footer-article ul,
  .footer .footer-article ol{
    margin:0 0 10px 20px;
    color:#111111;
  }
  .footer .footer-article li{
    margin-bottom:4px;
    color:#111111;
  }

  .footer .footer-article{
    max-width:980px;
    margin:0 auto 24px auto;
    padding:16px 0;
    font-size:14px;
    line-height:1.7;
    color:#111111;
  }
  .footer .footer-article h2{
    font-size:20px;
    margin-bottom:8px;
    font-weight:700;
    color:#000000;
  }
  .footer .footer-article h3{
    font-size:16px;
    margin-top:16px;
    margin-bottom:6px;
    font-weight:700;
    color:#000000;
  }
  .footer .footer-article p{
    margin:0 0 8px 0;
    color:#111111;
  }
  .footer .footer-article ul,
  .footer .footer-article ol{
    margin:0 0 10px 20px;
    color:#111111;
  }
  .footer .footer-article li{
    margin-bottom:4px;
    color:#111111;
  }

  .footer .footer-article{
    max-width:980px;
    margin:0 auto 24px auto;
    padding:16px 0;
    font-size:14px;
    line-height:1.7;
    color:#111111;
  }
  .footer .footer-article h2{
    font-size:20px;
    margin-bottom:8px;
    font-weight:700;
    color:#000000;
  }
  .footer .footer-article h3{
    font-size:16px;
    margin-top:16px;
    margin-bottom:6px;
    font-weight:700;
    color:#000000;
  }
  .footer .footer-article p{
    margin:0 0 8px 0;
    color:#111111;
  }
  .footer .footer-article ul,
  .footer .footer-article ol{
    margin:0 0 10px 20px;
    color:#111111;
  }
  .footer .footer-article li{
    margin-bottom:4px;
    color:#111111;
  }

  /* Perapian bullet dan numbered list dalam artikel footer */
  .footer .footer-article ul,
  .footer .footer-article ol {
    padding-left: 22px;
    margin-left: 10px;
    margin-bottom: 14px;
  }
  .footer .footer-article li {
    margin-bottom: 6px;
    line-height: 1.6;
    padding-left: 4px;
  }
  .footer .footer-article ol,
  .footer .footer-article ul {
    list-style-position: inside;
  }
  @media (max-width: 480px) {
    .footer .footer-article ul,
    .footer .footer-article ol {
      padding-left: 16px;
      margin-left: 6px;
    }
    .footer .footer-article li {
      padding-left: 2px;
    }
  }

  /* Rata kiri tapi blok tetap berada di tengah */
  .footer .footer-article{
    text-align: left;
    margin-left: auto;
    margin-right: auto;
  }

.footer-article .article-divider {
    width: 100vw;
    margin: 40px calc(50% - 50vw) 20px;
    border: none;
    border-top: 3px solid #1e40ff;
}

.footer-article {
    background-color: #0a1b3c;
    color: #ffffff;
}
.footer-article h2,
.footer-article h3,
.footer-article p,
.footer-article li {
    color: #ffffff;
}

.footer-article {
    background-color: #0a1b3c;
    color: #ffffff;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 50px 20px;
}
.footer-article h2,
.footer-article h3,
.footer-article p,
.footer-article li {
    color: #ffffff;
}

.footer-article .inner-article {
    max-width: 1160px;
    margin: 0 auto;
    text-align: left;
}

.footer-article h2 {
    background: linear-gradient(90deg, #5bc0ff, #ffe45c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.footer-article a {
    background: linear-gradient(90deg, #ffe45c, #5bc0ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    text-decoration: none;
}
.footer-article a:hover {
    opacity: 0.8;
}

.footer-article .seo {
    display: block;
    width: 100%;
}

/* === Provider Hub (merged sections, SEO-semantic) === */
.provider-subtitle{
  margin:18px 0 10px;
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:.2px;
}
.hub-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.hub-nav a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:inherit;
  text-decoration:none;
  font-weight:700;
  font-size:.92rem;
}
.hub-nav a:hover{ background:rgba(255,255,255,.10); }
.provider-after{ margin-top:18px; }
.provider-after > section{ margin-top:18px; }

/* === Provider Hub: full width + sidebar (nyatu dengan provider-section) === */
#provider-hub{
  margin: 0;
  border-radius: 0;
  padding: 34px 0 36px;
  border-left: 0;
  border-right: 0;
}
#provider-hub .provider-inner{
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 18px;
}

/* Layout: main + sidebar */
.hub-layout{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(280px,360px);
  gap: 18px;
  align-items: start;
}
.hub-main{min-width:0}
.hub-sidebar{min-width:0}
.sidebar-sticky{
  position: sticky;
  top: 84px;
  display: grid;
  gap: 14px;
}

/* Widget card mengikuti gaya provider */
.widget-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 16px 34px rgba(2,6,23,.55);
}
.widget-card h3{
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: .2px;
}
.widget-card .muted{
  margin: 0 0 12px;
  font-size: 12px;
  color: rgba(229,237,255,.78);
}

/* Tabs kategori */
.widget-tabs{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.widget-tab{
  appearance:none;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: #e5edff;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
}
.widget-tab[aria-selected="true"]{
  background: linear-gradient(90deg, rgba(91,192,255,.22), rgba(255,228,92,.18));
  border-color: rgba(255,228,92,.35);
}

/* List posting */
.widget-list{
  list-style:none;
  margin: 0;
  padding: 0;
  display:grid;
  gap: 10px;
  min-height: 120px; /* CLS guard */
}
.widget-link{
  display:block;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  text-decoration:none;
  color:#e5edff;
  transition: transform .15s ease, filter .15s ease;
}
.widget-link:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.widget-link .t{ display:block; font-weight: 700; font-size: 13px; line-height: 1.3; }
.widget-link .m{ display:flex; gap:8px; align-items:center; margin-top:6px; font-size: 11px; color: rgba(229,237,255,.72); }
.widget-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

/* Box custom widget */
.widget-box{
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.16);
  border: 1px dashed rgba(255,255,255,.18);
  font-size: 12px;
  color: rgba(229,237,255,.82);
}

/* Responsive */
@media (max-width: 980px){
  .hub-layout{ grid-template-columns: minmax(0,1fr) minmax(240px,320px); }
}
@media (max-width: 768px){
  /* mobile: konten utama tetap lebar, sidebar turun (lebih UX + tetap grid card 2 kolom) */
  .hub-layout{ grid-template-columns: 1fr; gap: 14px; }
  .sidebar-sticky{ position: static; top:auto; }
}

    /* === Widget "Kilas" (Random Post) === */
    .kilas-card{border:1px solid rgba(148,163,184,.35);background:rgba(15,23,42,.55);border-radius:16px;padding:14px}
    .kilas-head{display:flex;align-items:center;gap:10px;margin:0 0 10px}
    .kilas-badge{display:inline-flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.2px}
    .kilas-badge:before{content:"";width:4px;height:18px;border-radius:8px;background:linear-gradient(180deg,#38bdf8,#facc15)}
    .kilas-top{display:block;border-radius:14px;overflow:hidden;border:1px solid rgba(148,163,184,.25)}
    .kilas-top img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
    .kilas-title{margin:10px 2px 0;font-size:16px;line-height:1.35;font-weight:800}
    .kilas-title a{text-decoration:none;color:#e5e7eb}
    .kilas-list{list-style:none;margin:10px 0 0;padding:0}
    .kilas-list li{padding:10px 2px;border-top:1px solid rgba(148,163,184,.18)}
    .kilas-list a{color:#e5e7eb;text-decoration:none;font-weight:700;line-height:1.35;display:block}
    .kilas-skel{border:1px dashed rgba(148,163,184,.3);border-radius:12px;padding:12px;color:#cbd5e1}
    .kilas-card a:hover{opacity:.92}

    /* === Sidebar Quick Links: center + modern buttons === */
    #sidebarQuickLinks{
      display:grid !important;
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      gap:10px !important;
      margin-top:12px !important;
      width:100%;
      max-width:320px; /* biar rapi di tengah card */
      margin-left:auto;
      margin-right:auto;
      justify-content:center;
      align-content:center;
    }
    #sidebarQuickLinks .chip{
      display:flex;
      align-items:center;
      justify-content:center;
      padding:10px 12px;
      border-radius:14px;
      font-weight:800;
      font-size:13px;
      letter-spacing:.2px;
      text-decoration:none;
      color:#0b1220;
      background:linear-gradient(90deg,#38bdf8 0%, #facc15 100%);
      border:1px solid rgba(255,255,255,.18);
      box-shadow:0 10px 22px rgba(2,6,23,.35);
      transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    }
    #sidebarQuickLinks .chip:hover{
      transform:translateY(-1px);
      box-shadow:0 14px 28px rgba(2,6,23,.45);
      opacity:.96;
    }
    #sidebarQuickLinks .chip:active{
      transform:translateY(0);
      opacity:.92;
    }
    @media (max-width:420px){
      #sidebarQuickLinks{max-width:100%;}
      #sidebarQuickLinks .chip{padding:10px 10px;font-size:13px}
    }

    /* === Header judul kategori (Slot, Sportsbook, dst) – Dark Blue Modern === */
    .wp-cat-block .section-head{
      background: linear-gradient(135deg, #020617 0%, #020b2e 45%, #020617 100%);
      padding: 16px 18px;
      border-radius: 18px;
      box-shadow: 0 14px 34px rgba(2,6,23,.55);
      border: 1px solid rgba(56,189,248,.15);
      margin-bottom: 14px;
    }
    .wp-cat-block .section-head h3{ margin:0; }
    .wp-cat-block .section-head a{
      background: rgba(2,6,23,.55);
      border: 1px solid rgba(56,189,248,.45);
      color: #e5e7eb;
      backdrop-filter: blur(6px);
      border-radius: 999px;
      padding: 9px 12px;
      text-decoration: none;
      font-weight: 800;
      font-size: 12px;
      line-height: 1;
      transition: opacity .15s ease, transform .15s ease, background .15s ease;
    }
    .wp-cat-block .section-head a:hover{
      background: rgba(56,189,248,.12);
      opacity: .96;
      transform: translateY(-1px);
    }

    /* === Card post: background judul artikel (auto WP) dark blue modern === */
    .tile .meta,
    .card .meta,
    .grid-news .meta{
      background: linear-gradient(135deg,#020617 0%, #020b2e 55%, #020617 100%);
      padding: 14px 14px 16px;
      border-top: 1px solid rgba(56,189,248,.15);
    }

    /* label kategori tetap kontras */
    .tile .label,
    .card .label{
      color:#c7d2fe;
      font-weight:700;
    }

    /* judul artikel tetap gradient */
    .tile .title a,
    .card .title a{
      text-shadow: 0 1px 2px rgba(0,0,0,.35);
    }

    /* === FIX: hilangkan sisa putih di bawah meta card (WP auto posts) === */
    .tile,
    .card{
      background: linear-gradient(135deg,#020617 0%, #020b2e 55%, #020617 100%);
      overflow: hidden;
    }

    /* Pastikan area meta mengisi penuh bawah card */
    .tile .meta,
    .card .meta{
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 110px;
      height: auto;
      width: 100%;
      box-sizing: border-box;
    }

    /* Hilangkan background putih default jika ada dari elemen lain */
    .tile .meta *{
      background: transparent;
    }

    /* Jika ada footer/desc kosong, tetap konsisten */
    .tile .byline,
    .card .byline{
      color: rgba(226,232,240,.85);
    }

    /* Responsive: biar tidak kepotong di breakpoint tertentu */
    @media (max-width: 520px){
      .tile .meta,
      .card .meta{
        min-height: 96px;
        padding: 12px 12px 14px;
      }
    }

    /* === FIX2: pastikan meta mengisi penuh tinggi card (hilangkan strip putih) === */
    .news-grid .tile,
    .wp-cat .tile,
    #slot-feed .card,
    .feed-grid .card{
      display:flex !important;
      flex-direction:column !important;
      background: linear-gradient(135deg,#020617 0%, #020b2e 55%, #020617 100%) !important;
      overflow:hidden !important;
    }

    .news-grid .tile .meta,
    .wp-cat .tile .meta,
    #slot-feed .card .meta,
    .feed-grid .card .meta{
      flex:1 1 auto !important;
      background: linear-gradient(135deg,#020617 0%, #020b2e 55%, #020617 100%) !important;
      border-top: 1px solid rgba(56,189,248,.15) !important;
      width:100% !important;
      box-sizing:border-box !important;
    }

    /* kalau ada wrapper putih di dalam tile */
    .tile .meta,
    .card .meta{ border-bottom-left-radius:14px; border-bottom-right-radius:14px; }

    /* === HERO: lebih fit (tidak terlalu tinggi) tapi tetap responsif === */
    .hero{margin:10px 0;border-radius:16px}
    .hero .media{aspect-ratio: 21 / 9;} /* desktop lebih pendek */
    @media (max-width: 900px){
      .hero .media{aspect-ratio: 16 / 9;}
    }
    @media (max-width: 520px){
      .hero .media{aspect-ratio: 16 / 10;}
    }

    /* === FIX HERO DESKTOP: frame mengikuti gambar (hilangkan area abu-abu bawah) === */
    @media (min-width: 901px){
      .hero .track{align-items:stretch;}
      .hero .slide{background:transparent;}
      .hero .media{
        display:block !important;
        width:100%;
        aspect-ratio: 21 / 9;
        background:transparent;
      }
      .hero .media img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
      }
    }

/* ===================== PATCH 01 ===================== */
/* === HERO CAPTION LIFT & RESPONSIVE OVERLAY TWEAK === */
/* Move the caption higher so it's not covered by the blur/gradient.
   Pure CSS override; no removal of existing rules. */
.slide .caption{
  bottom: clamp(44px, 11vw, 140px) !important;
  width: min(92%, 860px);
}
/* Improve readability and prevent two-line chop */
.slide .caption h2{
  line-height: 1.25;
  text-wrap: balance;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

/* Reduce gradient height a bit on small screens so caption has more room */
@media (max-width: 480px){
  .slide::after{ height: 38% !important; }
  .slide .caption{ bottom: clamp(38px, 14vw, 120px) !important; }
  .ctrl button{ height: 32px; width: 32px; }
}

/* Tablet adjustments */
@media (min-width: 481px) and (max-width: 1023px){
  .slide::after{ height: 40% !important; }
  .slide .caption{ bottom: clamp(40px, 10vw, 130px) !important; }
}

/* Desktop: keep caption high but proportional */
@media (min-width: 1024px){
  .slide .caption{ bottom: clamp(36px, 7vw, 120px) !important; }
}

/* ===================== PATCH 02 ===================== */
.article-divider{
  width:100%;
  height:4px;
  border:0;
  margin:0 0 20px 0;
  background:linear-gradient(90deg,#1b4cff,#5c7bff,#1b4cff);
  display:block;
}

/* ===================== PATCH 03 ===================== */
/* === PROVIDER GAME SLOT UNGGULAN === */
.provider-section{
  margin: 56px 0 40px;
  padding: 28px 22px 26px;
  border-radius: 26px;
  background: radial-gradient(circle at top left,#020617,#020617 40%,#030712 100%);
  border: 1px solid rgba(30,64,175,0.7);
  box-shadow: 0 28px 60px rgba(15,23,42,0.85);
  color:#e5edff;
}

.provider-section .provider-inner{
  max-width: 1160px;
  margin: 0 auto;
}

.provider-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:24px;
}

.provider-head h2{
  font-size:22px;
  font-weight:700;
  margin:0 0 8px 0;
  color:#e5edff;
}

.provider-head h2 span{
  background:linear-gradient(90deg,#5bc0ff,#ffe45c);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.provider-head p{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:#9ca3af;
  max-width:780px;
}

.provider-more{
  align-self:flex-start;
  font-size:13px;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid rgba(96,165,250,0.9);
  background:linear-gradient(135deg,rgba(91,192,255,0.18),rgba(255,228,92,0.08));
  color:#e5edff;
  text-decoration:none;
  white-space:nowrap;
}
.provider-more:hover{
  opacity:.9;
}

/* Grid kartu provider */
.provider-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.provider-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  padding:18px 18px 16px;
  border-radius:20px;
  background:radial-gradient(circle at top,#020617,#020617 55%,#020617 100%);
  border:1px solid rgba(148,163,184,0.35);
}

.provider-icon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 20% 0%,#1b4cff,#0b1120);
  box-shadow:0 10px 22px rgba(15,23,42,0.9);
  font-size:18px;
}

.provider-meta h3{
  margin:0 0 6px 0;
  font-size:15px;
  font-weight:700;
  color:#e5edff;
}

.provider-meta p{
  margin:0 0 10px 0;
  font-size:13px;
  line-height:1.6;
  color:#a5b4fc;
}

.provider-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  background:linear-gradient(90deg,#5bc0ff,#ffe45c);
  color:#020617;
}

/* Responsive */
@media (max-width:1024px){
  .provider-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:720px){
  .provider-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .provider-more{
    margin-top:4px;
  }
}

@media (max-width:600px){
  .provider-section{
    margin:40px 0 30px;
    padding:22px 18px 20px;
  }
  .provider-grid{
    grid-template-columns:1fr;
  }
  .provider-card{
    padding:16px 14px;
  }
}

/* ===================== PATCH 04 ===================== */
/* === GAME POPULER & PEMENANG MESIN SLOT === */
.popular-section{
  margin: 56px 0 32px;
}
.popular-inner{
  max-width: 1160px;
  margin: 0 auto;
}
.popular-layout{
  display:grid;
  grid-template-columns: minmax(0,2.1fr) minmax(0,1.3fr);
  gap:20px;
}

/* left: game populer */
.popular-games{
  background: radial-gradient(circle at top left,#022c3e,#02201f 45%,#02131e 100%);
  border-radius:26px;
  padding:18px 20px 20px;
  border:1px solid rgba(34,197,235,0.55);
  box-shadow:0 24px 50px rgba(15,23,42,0.92);
}
.popular-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.popular-title{
  display:flex;
  align-items:center;
  gap:10px;
}
.popular-title-bar{
  width:4px;
  height:24px;
  border-radius:999px;
  background:linear-gradient(180deg,#f97316,#fbbf24);
}
.popular-title h2{
  margin:0;
  font-size:18px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#f9fafb;
}
.popular-nav{
  display:flex;
  align-items:center;
  gap:8px;
}
.popular-nav button{
  width:32px;
  height:32px;
  border-radius:999px;
  border:none;
  background:rgba(15,23,42,0.8);
  box-shadow:0 0 0 1px rgba(148,163,184,0.5);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#e5e7eb;
}
.popular-nav button span{
  font-size:16px;
  line-height:1;
}

/* grid game */
.game-scroll{
  overflow-x:auto;
  padding-bottom:2px;
}
.game-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(150px,1fr));
  gap:12px 14px;
  padding-right:4px;
}
.game-card{
  background:#005261;
  background:linear-gradient(145deg,#065f46,#036672);
  border-radius:16px;
  padding:8px 8px 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  box-shadow:0 10px 22px rgba(15,23,42,0.9);
}
.game-thumb{
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:16/9;
  background:#020617;
}
.game-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.game-name{
  font-size:13px;
  font-weight:600;
  color:#ecfeff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* right column */
.popular-right{
  display:grid;
  grid-template-rows:auto auto;
  gap:16px;
}

/* winners card */
.winners-card{
  background:radial-gradient(circle at top left,#0f172a,#020617 55%);
  border-radius:26px;
  padding:18px 20px;
  border:1px solid rgba(248,250,252,0.06);
  box-shadow:0 22px 44px rgba(15,23,42,0.9);
}
.winners-card h3{
  margin:0 0 14px 0;
  font-size:16px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#f9fafb;
}
.winner-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.winner-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  padding:10px 12px;
  border-radius:18px;
  background:#020617;
  color:#e5e7eb;
}
.winner-thumb{
  width:64px;
  height:48px;
  border-radius:12px;
  background:#111827;
  overflow:hidden;
}
.winner-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.winner-meta strong{
  font-size:13px;
  display:block;
}
.winner-meta span{
  font-size:11px;
  display:block;
  color:#9ca3af;
}
.winner-meta em{
  font-size:12px;
  font-style:normal;
  color:#f97316;
}

/* 4D box */
.result-card{
  background:radial-gradient(circle at top,#022c22,#020617 60%);
  border-radius:26px;
  padding:18px 20px 16px;
  border:1px solid rgba(251,146,60,0.65);
  box-shadow:0 22px 44px rgba(15,23,42,0.9);
  text-align:center;
  color:#f9fafb;
}
.result-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 18px;
  border-radius:999px;
  border:1px solid rgba(251,146,60,0.9);
  font-size:11px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.result-number{
  font-size:40px;
  font-weight:800;
  letter-spacing:0.15em;
  margin-bottom:10px;
}
.result-footer{
  margin-top:6px;
  padding-top:10px;
  border-radius:0 0 18px 18px;
  background:#f97316;
  font-size:11px;
  color:#111827;
}

/* responsive */
@media(max-width:1024px){
  .popular-layout{
    grid-template-columns: minmax(0,1.8fr) minmax(0,1.4fr);
  }
  .game-grid{
    grid-template-columns:repeat(3,minmax(150px,1fr));
  }
}
@media(max-width:800px){
  .popular-layout{
    grid-template-columns:1fr;
  }
  .popular-section{
    margin:40px 0 30px;
  }
}
@media(max-width:600px){
  .game-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .popular-games,
  .winners-card,
  .result-card{
    border-radius:22px;
  }
}

/* ===================== PATCH 05 ===================== */
/* ===============================
   FULL BLEED – PROVIDER HUB & SEO
   =============================== */
.provider-section.full-bleed,
.seo-article.full-bleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:24px 16px;
  box-sizing:border-box;
}
@media (min-width:1024px){
  .provider-section.full-bleed,
  .seo-article.full-bleed{
    padding:32px 48px;
  }
}

/* ===================== PATCH 06 ===================== */
/* ===============================
   OVERRIDE: Provider Hub FULL BLEED (edge-to-edge)
   =============================== */
#provider-hub.full-bleed,
.provider-section.full-bleed{
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  border-radius:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  box-shadow:none !important;
}
@media (min-width:1024px){
  #provider-hub.full-bleed,
  .provider-section.full-bleed{
    border-radius:0 !important;
  }
}
/* Keep inner blocks consistent with provider theme, but avoid "card within card" look */
#provider-hub.full-bleed .hub-block{
  border-radius:18px;
}

/* ===================== PATCH 07 ===================== */
/* ===============================
   SPACING: Provider Hub (clean)
   =============================== */
#provider-hub.full-bleed{
  margin-top: clamp(20px, 3vw, 48px) !important;
}

/* ===================== PATCH 08 ===================== */
/* tombol hamburger: tampil satu saja di header bar */
.site .container.bar .hamb:not(:first-of-type){display:none!important}

/* Drawer */
#ov{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:.2s;z-index:90}
.drawer{position:fixed;inset:0 auto 0 0;width:min(92vw,480px);max-height:100vh;overflow:auto;background:#fff;
  border-top-right-radius:16px;border-bottom-right-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.2);
  transform:translateX(-104%);transition:transform .25s;z-index:100}
.drawer .head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #e5e7eb}
.drawer .head img{height:34px}
.drawer .close{border:0;background:transparent;font-size:28px;color:#ef4444;cursor:pointer}
.drawer .hello{display:flex;gap:12px;align-items:center;padding:16px;border-bottom:1px solid #f1f5f9}
.drawer .hello .avatar{width:44px;height:44px;border-radius:50%;background:#e5e7eb;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#6b7280}
.drawer .sec{padding:16px}
.drawer .sec h4{margin:0 0 10px;font-size:16px;font-weight:800}
.badgelist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.badge{display:flex;align-items:center;gap:10px}
.badge .dot{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;color:#fff}
.dot.blue{background:#2563eb}.dot.green{background:#10b981}.dot.orange{background:#f59e0b}
.dot.purple{background:#8b5cf6}.dot.pink{background:#ec4899}.dot.red{background:#ef4444}.dot.slate{background:#64748b}
.badge a{color:#2563eb;text-decoration:none;font-weight:700}
.badge a:hover{text-decoration:underline}

/* ===================== PATCH 09 ===================== */
html.no-scroll, body.no-scroll{overflow:hidden;}
  .demoPop{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,.72);z-index:9999;padding:14px;}
  .demoPop.is-open{display:flex;}
  .demoPop__box{width:min(1100px,100%);height:min(720px,100%);background:#0b1220;border:1px solid rgba(148,163,184,.25);border-radius:16px;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;}
  .demoPop__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:linear-gradient(180deg, rgba(15,23,42,.95), rgba(2,6,23,.88));border-bottom:1px solid rgba(148,163,184,.18);}
  .demoPop__ttl{font-weight:700;font-size:14px;color:#e5e7eb;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .demoPop__close{width:34px;height:34px;border-radius:10px;border:1px solid rgba(148,163,184,.25);background:rgba(15,23,42,.6);color:#e5e7eb;cursor:pointer;display:grid;place-items:center;}
  .demoPop__close:hover{background:rgba(30,41,59,.75);}
  .demoPop__frame{flex:1;background:#000;}
  .demoPop__frame iframe{width:100%;height:100%;border:0;display:block;}
  @media (max-width: 640px){
    .demoPop{padding:0;}
    .demoPop__box{width:100%;height:100%;border-radius:0;}
    .demoPop__head{padding:10px 10px;}
  }
  /* make vthumb button behave like existing anchor */
  .vthumb.demo-open{border:0;background:transparent;padding:0;cursor:pointer;text-align:left;width:100%;}

    /* Gradient untuk sub section kategori (Slot, Sportsbook, dll) */
    .wp-cat h2,
    .wp-cat h3,
    .wp-cat .cat-title,
    .wp-cat .section-title,
    .category-title,
    .cat-head h2{
      background: linear-gradient(90deg, #38bdf8 0%, #facc15 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }

    /* FIX: Gradient untuk sub section kategori (judul di .section-head) */
    .wp-cat-block .section-head h3{
      background: linear-gradient(90deg, #38bdf8 0%, #facc15 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }

    /* FIX: Deskripsi kategori warna putih terang */
    .wp-cat-block .cat-desc,
    .wp-cat-block p,
    .category-desc{
      color: #ffffff;
      opacity: 0.95;
    }

    /* FIX FINAL: Judul utama SEO article gradient biru muda ke kuning */
    #seo-article h1{
      background: linear-gradient(90deg, #38bdf8 0%, #facc15 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }

    /* FIX: Gradient untuk judul hero SEO (seperti di screenshot) */
    .seo-hero h1,
    .seo-hero .hero-title,
    .hero-seo h1,
    .hero-seo .hero-title{
      background: linear-gradient(90deg, #38bdf8 0%, #facc15 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }

    /* FIX: Judul section utama Provider Hub (seperti screenshot) */
    #provider-hub-title,
    .provider-head h2{
      background: linear-gradient(90deg, #38bdf8 0%, #facc15 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }

/* ===================== PATCH 10 ===================== */
/* === FORCE HERO DESKTOP (LAST OVERRIDE) === */
@media (min-width: 901px){
  section.hero .track{align-items:stretch !important;}
  section.hero .slide{background:transparent !important;}
  section.hero a.media{
    display:block !important;
    width:100% !important;
    aspect-ratio: 21 / 9 !important;
    background:transparent !important;
  }
  section.hero a.media img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
  }
}

/* ===================== PATCH 11 ===================== */
/* === HERO DESKTOP FINAL OVERRIDE: buang min-height/aspect-ratio yang bikin ruang kosong === */
@media (min-width: 901px){
  section.hero{
    aspect-ratio: auto !important;
    min-height: unset !important;
    height: auto !important;
    background: transparent !important;
  }
  section.hero .track,
  section.hero .slide{
    min-height: 0 !important;
    height: auto !important;
    background: transparent !important;
  }
  section.hero a.media{
    display:block !important;
    width:100% !important;
    aspect-ratio: 21 / 9 !important;
    background: transparent !important;
  }
  section.hero a.media img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
  }
}

/* === PSI Performance patch: CLS guards for dynamic WP blocks === */
:where(.news-grid,.feed-grid,.grid-news,.wp-cat,.wp-cat .grid,.recs-grid){min-height: 420px;}
@media(min-width:720px){ :where(.news-grid,.feed-grid,.grid-news,.wp-cat,.wp-cat .grid,.recs-grid){min-height: 360px;} }
@media(min-width:1024px){ :where(.news-grid,.feed-grid,.grid-news,.wp-cat,.wp-cat .grid,.recs-grid){min-height: 320px;} }
/* Ensure logo doesn't shift layout */
.brand img{width:176px;height:44px;aspect-ratio:176/44;}

/* === PSI PATCH: make hero image a background (not LCP), keep instant gradient paint === */
.hero .media{ position:relative; overflow:hidden; }
.hero .media .hero-bg{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at top left, rgba(2,6,23,.55), rgba(2,6,23,.85)),
    url('https://www.logonslot.com/assets/images/logonslot-placeholder.webp');
  background-size:cover;
  background-position:center;
  transform: translateZ(0);
}
/* Prevent any stray inline img inside hero affecting layout */
.hero .media img{ display:block; width:100%; height:100%; object-fit:cover; }

/* === Speed Index: reduce render cost for below-the-fold blocks only === */
@media (min-width:0px){
  .below-fold{ content-visibility:auto; contain-intrinsic-size: 900px 1200px; }
}