@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
body.kimak-bp-full{margin:0!important;background:#070707!important;}
#kimak-bp-app,*{box-sizing:border-box}
#kimak-bp-app{font-family:'Space Grotesk',Arial,sans-serif;background:radial-gradient(circle at top,rgba(255,106,0,.16),transparent 32%),#070707;color:#fff;min-height:100vh}
#kimak-bp-app a{text-decoration:none;color:inherit}
.kbp-container{width:min(1460px,calc(100% - 28px));margin:auto}
.kbp-header{position:sticky;top:0;z-index:999;background:rgba(5,5,5,.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,106,0,.28)}
.kbp-header-inner{height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.kbp-logo img{display:block;width:auto;height:48px;max-width:210px;object-fit:contain}
.kbp-nav{display:flex;align-items:center;gap:10px}
.kbp-nav-btn{display:inline-flex;align-items:center;justify-content:center;min-width:92px;height:38px;padding:0 20px;border-radius:10px;font-size:12px;font-weight:900;letter-spacing:.8px}
.kbp-login{color:#ff7a00!important;border:1px solid rgba(255,122,0,.72);background:rgba(255,106,0,.07)}
.kbp-register{color:#090909!important;border:1px solid #ff8a00;background:linear-gradient(135deg,#e94b00,#ff6900 48%,#ff9400);box-shadow:0 7px 20px rgba(255,92,0,.20)}
.kbp-hero{padding:70px 0 45px;text-align:center}
.kbp-badge{display:inline-block;padding:8px 17px;border:1px solid rgba(255,106,0,.28);border-radius:999px;color:#ff8a00;font-size:11px;font-weight:800;margin-bottom:15px}
.kbp-hero h1,.kbp-section-title h2,.kbp-jp-amount,.kbp-prediksi-head h3{font-family:'Oswald','Space Grotesk',sans-serif}
.kbp-hero h1{font-size:clamp(36px,7vw,68px);line-height:1.02;margin:0;text-transform:uppercase}
.kbp-hero h1 span{color:#ff8a00}
.kbp-hero p{max-width:700px;margin:14px auto 0;color:#8f8f8f;line-height:1.7;font-size:14px}
.kbp-section{padding:30px 0 55px}
.kbp-panel{padding:26px;border:1px solid rgba(255,106,0,.34);border-radius:18px;background:radial-gradient(circle at 50% 0%,rgba(255,106,0,.08),transparent 32%),linear-gradient(180deg,#111,#070707);box-shadow:0 12px 45px rgba(0,0,0,.42),0 0 28px rgba(255,90,0,.06)}
.kbp-section-title{text-align:center;margin-bottom:22px}
.kbp-section-title small{color:#ff6a00;font-weight:900;letter-spacing:2px;font-size:11px}
.kbp-section-title h2{font-size:clamp(31px,4vw,46px);text-transform:uppercase;margin:5px 0 0}
#bukti-jp .kbp-section-title h2:after{content:" TERBARU";color:#ff6900}
#prediksi .kbp-section-title h2:after{content:" HARI INI";color:#ff6900}
.kbp-section-title p{color:#777;font-size:13px;margin-top:7px}
.kbp-toolbar{max-width:760px;margin:0 auto 22px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.kbp-search-box{flex:1;min-width:240px}
.kbp-search-box input{width:100%;padding:14px 16px;background:#090909;border:1px solid #333;color:#fff;border-radius:8px;outline:none;font-family:inherit;font-size:13.5px}
.kbp-search-box input:focus{border-color:#ff8a00}
.kbp-counter{color:#777;font-size:12px}
.kbp-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-bottom:20px}
.kbp-tab{border:1px solid #383838;background:linear-gradient(#171717,#0e0e0e);color:#ddd;border-radius:7px;padding:10px 15px;cursor:pointer;font-family:'Oswald',sans-serif;font-weight:700;font-size:12px}
.kbp-tab.active,.kbp-tab:hover{color:#080808;border-color:#ff8500;background:linear-gradient(135deg,#f15300,#ff9300)}
.kbp-jp-grid,.kbp-prediksi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kbp-jp-card,.kbp-prediksi-card{border-radius:9px;border:1px solid rgba(255,105,0,.44);background:linear-gradient(145deg,rgba(255,106,0,.045),transparent 42%),#0c0c0c;box-shadow:0 7px 18px rgba(0,0,0,.28);overflow:hidden;position:relative}
.kbp-jp-card:before,.kbp-prediksi-card:before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;z-index:2;background:linear-gradient(90deg,transparent,#ff5d00,#ff9b00,transparent)}
.kbp-jp-image,.kbp-prediksi-image{
    width:100%;
    aspect-ratio:1/1;
    background:#070707;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    border-bottom:1px solid rgba(255,106,0,.18);
}
.kbp-jp-image img,.kbp-prediksi-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    object-position:center;
    max-width:100%;
    max-height:100%;
    transition:transform .25s ease;
}
.kbp-jp-card:hover .kbp-jp-image img,
.kbp-prediksi-card:hover .kbp-prediksi-image img{
    transform:scale(1.012);
}
.kbp-jp-body{padding:14px}
.kbp-jp-game{color:#f2f2f2;font-family:'Oswald',sans-serif;font-size:18px;font-weight:700;text-transform:uppercase;margin-bottom:5px}
.kbp-jp-amount{color:#ff7900;font-size:24px;font-weight:700;margin-bottom:11px}
.kbp-jp-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:11.5px}
.kbp-jp-row span{color:#8e8e8e}.kbp-jp-row strong{color:#eaeaea;text-align:right}
.kbp-jp-status{margin-top:11px;color:#ff7a00;font-size:10.5px;font-weight:800;letter-spacing:.7px}
.kbp-prediksi-head{text-align:left;padding:14px;border-bottom:1px solid rgba(255,106,0,.24)}
.kbp-prediksi-head h3{color:#f5f5f5;font-size:19px;line-height:1.1;margin:0;text-transform:uppercase}
.kbp-prediksi-head small{display:block;padding-left:17px;color:#c2c2c2;font-size:11.5px;margin-top:7px;position:relative}.kbp-prediksi-head small:before{content:"▣";position:absolute;left:0;color:#ff7200}
.kbp-pagination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:7px;margin-top:28px}
.kbp-page-btn{min-width:38px;height:38px;padding:0 12px;border-radius:6px;border:1px solid #252525;background:#111;color:#aaa;cursor:pointer;font-weight:800;font-size:12px}
.kbp-page-btn.active,.kbp-page-btn:hover{background:linear-gradient(135deg,#e94b00,#ff8a00);border-color:#ff8a00;color:#080808}.kbp-page-btn:disabled{opacity:.3;cursor:not-allowed}
.kbp-empty{grid-column:1/-1;text-align:center;padding:45px 20px;color:#777;border:1px dashed #292929;border-radius:15px}
.kbp-footer{margin-top:25px;border-top:1px solid #181818;background:#050505;padding:30px 0;text-align:center;color:#555;font-size:11px}
@media(max-width:1200px){.kbp-jp-grid,.kbp-prediksi-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.kbp-jp-grid,.kbp-prediksi-grid{grid-template-columns:repeat(2,1fr)}.kbp-panel{padding:20px}}
@media(max-width:560px){.kbp-container{width:calc(100% - 18px)}.kbp-panel{padding:15px}.kbp-jp-grid,.kbp-prediksi-grid{grid-template-columns:1fr}.kbp-tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto}.kbp-tab{flex:0 0 auto}.kbp-logo img{max-width:145px;height:40px}.kbp-nav-btn{min-width:78px;height:35px;padding:0 13px;font-size:10px}.kbp-hero{padding-top:45px}}

/* v2.2 — optimasi gambar 1254×1254 */
.kbp-jp-card,.kbp-prediksi-card{contain:layout paint}
.kbp-jp-image,.kbp-prediksi-image{min-height:0}
@media(max-width:560px){
  .kbp-jp-image,.kbp-prediksi-image{aspect-ratio:1/1}
}

.kbp-banner-wrap{width:min(1168px,calc(100% - 32px));margin:24px auto 0}
.kbp-main-banner{display:block;width:100%;height:auto;max-height:430px;object-fit:contain;border:1px solid rgba(255,106,0,.38);border-radius:18px;background:#090909}
@media(max-width:700px){.kbp-banner-wrap{width:calc(100% - 20px)}.kbp-main-banner{border-radius:12px}}

/* v2.4 zoom-safe banner/layout fix */
html,body{overflow-x:hidden}
#kimak-bp-app{width:100%;max-width:100%;overflow-x:clip}
#kimak-bp-app .kbp-container{
  width:calc(100% - 32px)!important;
  max-width:1460px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
#kimak-bp-app .kbp-banner-wrap{
  width:calc(100% - 32px)!important;
  max-width:1168px!important;
  margin:24px auto 0!important;
  padding:0!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  overflow:hidden!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
}
#kimak-bp-app .kbp-main-banner{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
  margin:0 auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  position:static!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  flex:0 1 auto!important;
}
@media(max-width:700px){
  #kimak-bp-app .kbp-container,
  #kimak-bp-app .kbp-banner-wrap{width:calc(100% - 20px)!important}
}


/* =========================================================
   v2.5 MOBILE OPTIMIZATION
   Fokus: viewport kecil, zoom browser, header, banner, card,
   filter tabs, search, typography, spacing, touch target.
   ========================================================= */

html, body{
  max-width:100%;
  overflow-x:hidden;
}

#kimak-bp-app{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.kbp-container,
.kbp-banner-wrap,
.kbp-panel,
.kbp-toolbar,
.kbp-tabs,
.kbp-jp-grid,
.kbp-prediksi-grid{
  min-width:0;
  max-width:100%;
}

.kbp-main-banner{
  margin-inline:auto;
  object-position:center center;
}

/* Tablet */
@media (max-width: 900px){
  .kbp-container{
    width:min(100% - 24px, 100%);
  }

  .kbp-header-inner{
    min-height:64px;
    height:auto;
    padding:9px 0;
    gap:10px;
  }

  .kbp-logo{
    min-width:0;
    flex:1 1 auto;
  }

  .kbp-logo img,
  .kbp-brand-mark img{
    max-width:170px;
    max-height:46px;
    width:auto;
    height:auto;
  }

  .kbp-nav{
    flex:0 0 auto;
    gap:7px;
  }

  .kbp-nav-btn{
    min-width:72px;
    height:36px;
    padding:0 12px;
    font-size:10px;
  }

  .kbp-hero{
    padding:44px 0 28px;
  }

  .kbp-hero h1{
    font-size:clamp(32px,8vw,52px);
    line-height:1.05;
    overflow-wrap:anywhere;
  }

  .kbp-hero p{
    padding:0 8px;
    font-size:13px;
    line-height:1.65;
  }

  .kbp-banner-wrap{
    width:calc(100% - 24px);
    margin:18px auto 0;
  }

  .kbp-main-banner{
    width:100%;
    max-width:100%;
    height:auto;
    max-height:none;
    border-radius:14px;
  }

  .kbp-section{
    padding:18px 0 30px;
  }

  .kbp-panel{
    width:100%;
    padding:18px;
    border-radius:14px;
  }

  .kbp-section-title{
    margin-bottom:16px;
  }

  .kbp-section-title h2{
    font-size:clamp(27px,6vw,38px);
  }

  .kbp-toolbar{
    max-width:100%;
    margin:0 0 16px;
    gap:8px;
  }

  .kbp-search-box{
    min-width:0;
    width:100%;
    flex:1 1 100%;
  }

  .kbp-search-box input{
    min-height:44px;
    font-size:16px; /* cegah auto zoom iPhone */
  }

  .kbp-counter{
    width:100%;
    text-align:left;
    padding-left:2px;
  }

  .kbp-jp-grid,
  .kbp-prediksi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
}

/* Mobile */
@media (max-width: 600px){
  .kbp-container{
    width:calc(100% - 16px);
  }

  .kbp-header{
    position:sticky;
    top:0;
  }

  .kbp-header-inner{
    min-height:58px;
    padding:7px 0;
    gap:6px;
  }

  .kbp-logo img,
  .kbp-brand-mark img{
    max-width:132px;
    max-height:38px;
  }

  .kbp-nav{
    gap:5px;
  }

  .kbp-nav-btn{
    min-width:60px;
    height:34px;
    padding:0 8px;
    border-radius:8px;
    font-size:9px;
    letter-spacing:.35px;
  }

  .kbp-hero{
    padding:30px 0 20px;
  }

  .kbp-badge{
    padding:6px 11px;
    font-size:9px;
    margin-bottom:11px;
  }

  .kbp-hero h1{
    font-size:clamp(29px,10.5vw,42px);
    line-height:1.02;
    letter-spacing:-.25px;
  }

  .kbp-hero p{
    margin-top:10px;
    padding:0 6px;
    font-size:12px;
    line-height:1.55;
  }

  .kbp-banner-wrap{
    width:calc(100% - 16px);
    margin:14px auto 0;
  }

  .kbp-main-banner{
    width:100%;
    height:auto;
    aspect-ratio:auto;
    object-fit:contain;
    border-radius:11px;
  }

  .kbp-section{
    padding:14px 0 24px;
  }

  .kbp-panel{
    padding:13px;
    border-radius:12px;
  }

  .kbp-section-title small{
    font-size:9px;
    letter-spacing:1.2px;
  }

  .kbp-section-title h2{
    font-size:clamp(25px,8vw,34px);
    line-height:1.08;
    margin-top:4px;
  }

  .kbp-section-title p{
    font-size:11px;
    margin-top:5px;
  }

  .kbp-tabs{
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:7px;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 1px 8px;
    margin-bottom:12px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .kbp-tabs::-webkit-scrollbar{
    display:none;
  }

  .kbp-tab{
    flex:0 0 auto;
    min-height:38px;
    padding:8px 12px;
    border-radius:8px;
    font-size:10px;
    scroll-snap-align:start;
    white-space:nowrap;
  }

  .kbp-toolbar{
    display:block;
    margin-bottom:13px;
  }

  .kbp-search-box{
    width:100%;
  }

  .kbp-search-box input{
    width:100%;
    min-height:44px;
    padding:11px 12px;
    border-radius:8px;
    font-size:16px;
  }

  .kbp-counter{
    margin-top:7px;
    font-size:10px;
  }

  .kbp-jp-grid,
  .kbp-prediksi-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .kbp-jp-card,
  .kbp-prediksi-card{
    width:100%;
    max-width:100%;
    border-radius:10px;
  }

  .kbp-jp-image,
  .kbp-prediksi-image{
    width:100%;
    aspect-ratio:1/1;
  }

  .kbp-jp-image img,
  .kbp-prediksi-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
  }

  .kbp-jp-body{
    padding:13px;
  }

  .kbp-jp-game{
    font-size:17px;
  }

  .kbp-jp-amount{
    font-size:22px;
  }

  .kbp-jp-row{
    font-size:11px;
    gap:8px;
  }

  .kbp-jp-row span{
    flex:0 0 35%;
  }

  .kbp-jp-row strong{
    flex:1 1 auto;
    min-width:0;
    overflow-wrap:anywhere;
  }

  .kbp-prediksi-head{
    padding:12px;
  }

  .kbp-prediksi-head h3{
    font-size:17px;
  }

  .kbp-prediksi-head small{
    font-size:10px;
  }

  .kbp-pagination{
    gap:5px;
    margin-top:18px;
  }

  .kbp-page-btn{
    min-width:36px;
    height:36px;
    padding:0 9px;
    font-size:11px;
  }

  .kbp-footer{
    margin-top:12px;
    padding:22px 12px;
    font-size:10px;
  }
}

/* Very small phones */
@media (max-width: 380px){
  .kbp-container{
    width:calc(100% - 12px);
  }

  .kbp-logo img,
  .kbp-brand-mark img{
    max-width:112px;
    max-height:34px;
  }

  .kbp-nav-btn{
    min-width:54px;
    height:32px;
    padding:0 7px;
    font-size:8.5px;
  }

  .kbp-hero h1{
    font-size:28px;
  }

  .kbp-panel{
    padding:10px;
  }

  .kbp-tab{
    padding:7px 10px;
    font-size:9.5px;
  }
}


/* =========================================================
   v2.6 — HARD CENTER FIX FOR BANNER / BROWSER ZOOM
   Banner dan container dipaksa tetap berada di tengah
   pada zoom 67% / 80% / 90% / 100% / 110% / 125% / 150%.
   ========================================================= */

html{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
}

body,
body.kimak-bp-full{
  width:100%;
  max-width:100%;
  margin:0 !important;
  padding:0 !important;
  overflow-x:hidden !important;
}

#kimak-bp-app{
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  padding:0 !important;
  overflow-x:clip !important;
}

/* Semua container utama benar-benar center */
.kbp-container,
.kbp-banner-wrap{
  box-sizing:border-box !important;
  position:relative !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  float:none !important;
  clear:both !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Banner: center berbasis viewport, bukan parent yang bisa melebar */
.kbp-banner-wrap{
  display:grid !important;
  place-items:center !important;
  width:min(1168px, calc(100vw - 32px)) !important;
  max-width:calc(100vw - 32px) !important;
  min-width:0 !important;
  margin-top:24px !important;
  padding:0 !important;
  overflow:hidden !important;
}

/* Gambar tidak boleh punya margin/position warisan */
.kbp-main-banner{
  display:block !important;
  position:static !important;
  inset:auto !important;
  float:none !important;
  transform:none !important;
  margin:0 auto !important;
  padding:0 !important;

  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:auto !important;
  max-height:none !important;

  object-fit:contain !important;
  object-position:50% 50% !important;
}

/* Header dan section juga jangan menciptakan overflow */
.kbp-header,
.kbp-hero,
.kbp-section,
.kbp-footer{
  width:100% !important;
  max-width:100% !important;
  overflow-x:clip !important;
}

@media (max-width: 900px){
  .kbp-banner-wrap{
    width:min(100% - 20px, 1168px) !important;
    max-width:calc(100vw - 20px) !important;
    margin-top:18px !important;
  }
}

@media (max-width: 600px){
  .kbp-banner-wrap{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    margin-top:14px !important;
  }
}

@media (max-width: 380px){
  .kbp-banner-wrap{
    width:calc(100vw - 12px) !important;
    max-width:calc(100vw - 12px) !important;
  }
}

/* Browser zoom edge cases */
@supports (overflow: clip){
  html, body, #kimak-bp-app{
    overflow-x:clip !important;
  }
}


/* =========================================================
   v2.7 — CENTER LOCK + MOBILE OPTIMIZATION
   Banner mengikuti garis tengah dan lebar konten Bukti JP/Prediksi.
   Tidak mengubah file gambar yang di-upload.
   ========================================================= */

:root{
  --kbp-shell-max: 1460px;
  --kbp-shell-pad: 14px;
}

/* Global anti-horizontal drift */
html,
body,
body.kimak-bp-full,
#kimak-bp-app{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  overflow-x:hidden !important;
}

/* Satu sistem container untuk header/hero/banner/panel */
.kbp-container,
.kbp-banner-wrap{
  box-sizing:border-box !important;
  width:min(var(--kbp-shell-max), calc(100% - (var(--kbp-shell-pad) * 2))) !important;
  max-width:min(var(--kbp-shell-max), calc(100vw - (var(--kbp-shell-pad) * 2))) !important;
  min-width:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  float:none !important;
}

/* Banner harus mengikuti container, tidak pakai ukuran viewport liar */
.kbp-banner-wrap{
  display:block !important;
  position:relative !important;
  margin-top:22px !important;
  padding:0 !important;
  overflow:hidden !important;
}

.kbp-main-banner{
  display:block !important;
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:auto !important;
  max-height:none !important;
  margin:0 auto !important;
  padding:0 !important;
  inset:auto !important;
  transform:none !important;
  float:none !important;
  object-fit:contain !important;
  object-position:center center !important;
}

/* Panel sejajar persis dengan banner */
.kbp-panel{
  width:100% !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Hindari elemen anak mendorong layout ke samping */
.kbp-header,
.kbp-header-inner,
.kbp-hero,
.kbp-section,
.kbp-toolbar,
.kbp-tabs,
.kbp-jp-grid,
.kbp-prediksi-grid,
.kbp-jp-card,
.kbp-prediksi-card{
  min-width:0 !important;
  max-width:100% !important;
}

/* Desktop/tablet zoom stability */
@media (min-width: 901px){
  .kbp-container,
  .kbp-banner-wrap{
    width:min(var(--kbp-shell-max), calc(100% - 28px)) !important;
    max-width:min(var(--kbp-shell-max), calc(100vw - 28px)) !important;
  }
}

/* Tablet */
@media (max-width: 900px){
  :root{ --kbp-shell-pad:12px; }

  .kbp-container,
  .kbp-banner-wrap{
    width:calc(100% - 24px) !important;
    max-width:calc(100vw - 24px) !important;
  }

  .kbp-header-inner{
    min-height:62px !important;
    height:auto !important;
    gap:8px !important;
  }

  .kbp-logo img,
  .kbp-brand-mark img{
    max-width:160px !important;
    max-height:44px !important;
  }

  .kbp-nav-btn{
    min-width:68px !important;
    height:35px !important;
    padding:0 10px !important;
    font-size:10px !important;
  }

  .kbp-hero{
    padding:38px 0 24px !important;
  }

  .kbp-panel{
    padding:18px !important;
  }

  .kbp-jp-grid,
  .kbp-prediksi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }
}

/* Mobile */
@media (max-width: 600px){
  :root{ --kbp-shell-pad:8px; }

  .kbp-container,
  .kbp-banner-wrap{
    width:calc(100% - 16px) !important;
    max-width:calc(100vw - 16px) !important;
  }

  .kbp-header-inner{
    min-height:56px !important;
    padding:6px 0 !important;
  }

  .kbp-logo img,
  .kbp-brand-mark img{
    max-width:126px !important;
    max-height:36px !important;
  }

  .kbp-nav{
    gap:4px !important;
  }

  .kbp-nav-btn{
    min-width:58px !important;
    height:32px !important;
    padding:0 7px !important;
    font-size:8.5px !important;
  }

  .kbp-hero{
    padding:26px 0 18px !important;
  }

  .kbp-hero h1{
    font-size:clamp(28px,10vw,40px) !important;
    line-height:1.03 !important;
  }

  .kbp-hero p{
    font-size:12px !important;
    line-height:1.55 !important;
    padding:0 4px !important;
  }

  .kbp-banner-wrap{
    margin-top:12px !important;
  }

  .kbp-main-banner{
    border-radius:10px !important;
  }

  .kbp-section{
    padding:12px 0 22px !important;
  }

  .kbp-panel{
    padding:12px !important;
    border-radius:11px !important;
  }

  .kbp-section-title h2{
    font-size:clamp(24px,8vw,33px) !important;
  }

  .kbp-toolbar{
    display:block !important;
    width:100% !important;
    margin-bottom:12px !important;
  }

  .kbp-search-box{
    width:100% !important;
    min-width:0 !important;
  }

  .kbp-search-box input{
    width:100% !important;
    min-height:44px !important;
    font-size:16px !important;
  }

  .kbp-counter{
    margin-top:6px !important;
    font-size:10px !important;
  }

  .kbp-tabs{
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    gap:6px !important;
    padding-bottom:7px !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .kbp-tabs::-webkit-scrollbar{display:none !important;}

  .kbp-tab{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    min-height:36px !important;
    padding:8px 11px !important;
    font-size:9.5px !important;
  }

  .kbp-jp-grid,
  .kbp-prediksi-grid{
    grid-template-columns:1fr !important;
    gap:11px !important;
  }

  .kbp-jp-image,
  .kbp-prediksi-image{
    aspect-ratio:1/1 !important;
  }

  .kbp-jp-image img,
  .kbp-prediksi-image img{
    object-fit:contain !important;
    object-position:center center !important;
  }

  .kbp-jp-body{
    padding:12px !important;
  }

  .kbp-jp-game{
    font-size:17px !important;
  }

  .kbp-jp-amount{
    font-size:21px !important;
  }

  .kbp-page-btn{
    min-width:34px !important;
    height:34px !important;
    padding:0 8px !important;
    font-size:10px !important;
  }
}

/* Very small phones */
@media (max-width: 380px){
  .kbp-container,
  .kbp-banner-wrap{
    width:calc(100% - 12px) !important;
    max-width:calc(100vw - 12px) !important;
  }

  .kbp-logo img,
  .kbp-brand-mark img{
    max-width:108px !important;
  }

  .kbp-nav-btn{
    min-width:52px !important;
    padding:0 6px !important;
  }

  .kbp-panel{
    padding:10px !important;
  }
}

/* Modern browsers: hard clip any fractional-pixel zoom drift */
@supports (overflow: clip){
  html, body, #kimak-bp-app,
  .kbp-header, .kbp-hero, .kbp-section, .kbp-footer{
    overflow-x:clip !important;
  }
}


/* =========================================================
   v2.8 — BANNER TANPA GARIS / TANPA KOTAK
   Hanya banner yang dibuat borderless.
   Posisi center-lock v2.7 tetap dipertahankan.
   ========================================================= */

.kbp-banner-wrap{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:0 !important;
  overflow:visible !important;
}

.kbp-main-banner{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:0 !important;
}

/* Hilangkan efek pseudo-element apabila theme/plugin lain menambahkan bingkai */
.kbp-banner-wrap::before,
.kbp-banner-wrap::after,
.kbp-main-banner::before,
.kbp-main-banner::after{
  content:none !important;
  display:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Mobile tetap tanpa garis */
@media (max-width: 600px){
  .kbp-main-banner{
    border-radius:0 !important;
  }
}


/* =========================================================
   v2.9 — WORDPRESS ADMIN BAR SAFE OFFSET
   Tidak mengubah desain frontend.
   Hanya mencegah header LOGIN/DAFTAR tertutup admin bar
   saat pengguna sedang login ke WordPress.
   ========================================================= */

/* Header plugin */
body.admin-bar .kbp-header{
  top:32px !important;
}

/* WordPress memakai admin bar 46px di layar <= 782px */
@media screen and (max-width:782px){
  body.admin-bar .kbp-header{
    top:46px !important;
  }
}

/* Pastikan header tetap di atas konten plugin, tapi di bawah admin bar WP */
.kbp-header{
  z-index:9990 !important;
}

body.admin-bar #wpadminbar{
  z-index:99999 !important;
}

/* Tombol header tidak boleh ketutup/terpotong */
.kbp-header-inner,
.kbp-nav,
.kbp-nav-btn{
  position:relative;
}

.kbp-nav{
  z-index:2;
  overflow:visible !important;
}

.kbp-nav-btn{
  visibility:visible !important;
  opacity:1 !important;
  white-space:nowrap !important;
}

/* Jangan tambahkan offset untuk pengunjung biasa */
body:not(.admin-bar) .kbp-header{
  top:0 !important;
}


/* =========================================================
   v3.0 — BANNER FIT + HEADER LOGO SAFE
   Tidak mengubah desain, warna, card, spacing utama, atau layout.
   Hanya mencegah banner/logo membesar berlebihan.
   ========================================================= */

/* Header tetap aman di bawah WordPress Admin Bar */
body.admin-bar .kbp-header{ top:32px !important; }
@media screen and (max-width:782px){
  body.admin-bar .kbp-header{ top:46px !important; }
}
body:not(.admin-bar) .kbp-header{ top:0 !important; }

/* Logo header: jangan pernah melebar/terpotong */
.kbp-logo,
.kbp-brand-mark{
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
  overflow:visible !important;
}
.kbp-logo img,
.kbp-brand-mark img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:210px !important;
  max-height:48px !important;
  object-fit:contain !important;
  object-position:center !important;
}

/* Banner mengikuti lebar konten dan tidak berubah menjadi logo raksasa */
.kbp-banner-wrap{
  box-sizing:border-box !important;
  width:min(1460px, calc(100% - 28px)) !important;
  max-width:min(1460px, calc(100vw - 28px)) !important;
  margin:22px auto 0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  overflow:hidden !important;
  text-align:center !important;
}

.kbp-main-banner{
  display:block !important;
  position:static !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:420px !important;
  margin:0 auto !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:0 !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
}

/* Tablet */
@media(max-width:900px){
  .kbp-logo img,
  .kbp-brand-mark img{
    max-width:160px !important;
    max-height:42px !important;
  }

  .kbp-banner-wrap{
    width:calc(100% - 20px) !important;
    max-width:calc(100vw - 20px) !important;
    margin-top:18px !important;
  }

  .kbp-main-banner{
    max-height:340px !important;
  }
}

/* Mobile */
@media(max-width:600px){
  .kbp-logo img,
  .kbp-brand-mark img{
    max-width:126px !important;
    max-height:36px !important;
  }

  .kbp-banner-wrap{
    width:calc(100% - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    margin-top:14px !important;
  }

  .kbp-main-banner{
    width:100% !important;
    max-width:100% !important;
    max-height:none !important;
  }
}

/* Very small mobile */
@media(max-width:380px){
  .kbp-logo img,
  .kbp-brand-mark img{
    max-width:108px !important;
    max-height:32px !important;
  }
}


/* v3.1 — TRUE FULL-WIDTH HOMEPAGE FIX
   Mengisolasi homepage plugin dari layout/global styles tema WordPress.
   Desain internal tetap sama. */
html:has(body.kimak-bp-full),
html:has(body.kimak-bp-full) body,
body.kimak-bp-full{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:#070707 !important;
  overflow-x:hidden !important;
}
body.kimak-bp-full > #kimak-bp-app{
  position:relative !important;
  display:block !important;
  width:100vw !important;
  max-width:none !important;
  min-width:0 !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding:0 !important;
  inset-inline:auto !important;
  transform:none !important;
  overflow-x:clip !important;
}
body.kimak-bp-full #kimak-bp-app .kbp-header{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
body.kimak-bp-full #kimak-bp-app .kbp-container{
  width:calc(100% - 28px) !important;
  max-width:1460px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
/* Saat login, header plugin tidak tertutup WordPress Admin Bar. */
body.admin-bar.kimak-bp-full .kbp-header{top:32px !important;}
@media(max-width:782px){
  body.admin-bar.kimak-bp-full .kbp-header{top:46px !important;}
}
@media(max-width:600px){
  body.kimak-bp-full #kimak-bp-app .kbp-container{width:calc(100% - 18px) !important;}
}


/* =========================================================
   v3.3.0 — ARTIKEL WORDPRESS
   ========================================================= */
#artikel .kbp-section-title h2:after{content:" TERBARU";color:#ff6900}
.kbp-article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.kbp-article-card{overflow:hidden;border:1px solid rgba(255,105,0,.38);border-radius:11px;background:linear-gradient(145deg,rgba(255,106,0,.04),transparent 45%),#0c0c0c;box-shadow:0 8px 22px rgba(0,0,0,.30)}
.kbp-article-thumb{display:flex;aspect-ratio:16/9;background:#080808;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid rgba(255,106,0,.18);color:#ff7900!important;font-family:'Oswald',sans-serif;font-size:24px;font-weight:700;letter-spacing:1px}
.kbp-article-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.kbp-article-card:hover .kbp-article-thumb img{transform:scale(1.025)}
.kbp-article-body{padding:17px}
.kbp-article-meta,.kbp-single-meta{font-size:11px;color:#ff7900;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.kbp-article-body h3{font-family:'Oswald','Space Grotesk',sans-serif;font-size:21px;line-height:1.25;margin:7px 0 8px;color:#f5f5f5}
.kbp-article-body h3 a:hover{color:#ff7900!important}
.kbp-article-body p{margin:0 0 14px;color:#929292;line-height:1.65;font-size:12.5px}
.kbp-readmore{display:inline-flex;color:#ff7900!important;font-size:11px;font-weight:900;letter-spacing:.5px}
.kbp-article-all-wrap{text-align:center;margin-top:24px}
.kbp-article-all{display:inline-flex;padding:12px 18px;border:1px solid #ff7900;border-radius:8px;color:#ff7900!important;font-size:11px;font-weight:900;letter-spacing:.7px}
.kbp-article-all:hover{background:#ff7900;color:#090909!important}
.kbp-article-search{display:flex;max-width:760px;margin:0 auto 24px;gap:8px}
.kbp-article-search input{flex:1;min-width:0;padding:14px 16px;background:#090909;border:1px solid #333;color:#fff;border-radius:8px;outline:none;font-family:inherit}
.kbp-article-search input:focus{border-color:#ff7900}
.kbp-article-search button{border:1px solid #ff7900;border-radius:8px;padding:0 20px;background:linear-gradient(135deg,#e94b00,#ff8a00);color:#090909;font-weight:900;cursor:pointer}
.kbp-article-hero{padding-bottom:28px}
.kbp-single-wrap{width:min(980px,calc(100% - 28px));margin:42px auto 70px}
.kbp-single-article{padding:34px;border:1px solid rgba(255,106,0,.34);border-radius:18px;background:linear-gradient(180deg,#111,#080808);box-shadow:0 12px 45px rgba(0,0,0,.42)}
.kbp-back-articles{display:inline-flex;margin-bottom:20px;color:#ff7900!important;font-size:11px;font-weight:900;letter-spacing:.6px}
.kbp-single-article h1{font-family:'Oswald','Space Grotesk',sans-serif;font-size:clamp(34px,6vw,58px);line-height:1.08;margin:8px 0 22px;text-transform:none;color:#fff}
.kbp-single-featured{margin:0 0 28px;border:1px solid rgba(255,106,0,.28);border-radius:13px;overflow:hidden;background:#080808}
.kbp-single-featured img{display:block;width:100%;height:auto}
.kbp-single-content{color:#d0d0d0;font-size:16px;line-height:1.85;overflow-wrap:anywhere}
.kbp-single-content h2,.kbp-single-content h3,.kbp-single-content h4{font-family:'Oswald','Space Grotesk',sans-serif;color:#fff;margin-top:1.6em}
.kbp-single-content h2{font-size:32px}.kbp-single-content h3{font-size:25px}
.kbp-single-content a{color:#ff7900!important;text-decoration:underline}
.kbp-single-content img{max-width:100%;height:auto;border-radius:9px}
.kbp-single-content blockquote{margin:24px 0;padding:14px 18px;border-left:3px solid #ff7900;background:#0d0d0d;color:#aaa}
.kbp-single-content ul,.kbp-single-content ol{padding-left:24px}
@media(max-width:900px){.kbp-article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kbp-single-article{padding:24px}}
@media(max-width:560px){.kbp-article-grid{grid-template-columns:1fr}.kbp-article-search{flex-direction:column}.kbp-article-search button{height:44px}.kbp-single-wrap{width:calc(100% - 18px);margin-top:22px}.kbp-single-article{padding:18px;border-radius:13px}.kbp-single-content{font-size:15px;line-height:1.75}}

/* =========================================
   MOBILE LIVE MATCH OPTIMIZATION
   ========================================= */

#live-match{
    scroll-margin-top: 10px;
}

@media (max-width:768px){

    #live-match{
        padding-top:8px !important;
        margin-top:0 !important;
    }

    #kimak-live-panel{
        padding:10px !important;
        border-radius:12px !important;
    }

    #live-match .kbp-section-title{
        margin-bottom:10px !important;
    }

    #live-match .kbp-section-title small{
        font-size:11px !important;
    }

    #live-match .kbp-section-title h2{
        font-size:21px !important;
        margin:3px 0 !important;
    }

    #live-match .kbp-section-title p{
        font-size:13px !important;
        margin:3px 0 8px !important;
    }

    #kimak-player-box{
        width:100% !important;
        aspect-ratio:16/9 !important;
        margin:0 !important;
        border-radius:10px !important;
        overflow:hidden !important;
        background:#000 !important;
        position:relative !important;
    }

    #kimak-live-video{
        width:100% !important;
        height:100% !important;
        display:block !important;
        object-fit:contain !important;
        background:#000 !important;
    }

    #kimak-live-info{
        margin-top:8px !important;
        gap:6px !important;
    }

    .kimak-info-box{
        padding:8px !important;
    }
}

/* =========================================
   FINAL MOBILE LIVE MATCH COMPACT
   ========================================= */

@media (max-width:768px){

    #live-match{
        padding-top:4px !important;
        padding-bottom:8px !important;
    }

    #kimak-live-panel{
        padding:8px !important;
        border-radius:12px !important;
    }

    #live-match .kbp-section-title{
        margin-bottom:8px !important;
    }

    #live-match .kbp-section-title small{
        font-size:10px !important;
        line-height:1.2 !important;
    }

    #live-match .kbp-section-title h2{
        font-size:20px !important;
        line-height:1.1 !important;
        margin:2px 0 4px !important;
    }

    #live-match .kbp-section-title p{
        font-size:12px !important;
        line-height:1.35 !important;
        margin:0 0 6px !important;
    }

    #kimak-player-box{
        width:100% !important;
        aspect-ratio:16/9 !important;
        min-height:0 !important;
        margin:0 !important;
        border-radius:10px !important;
        overflow:hidden !important;
    }

    #kimak-live-video{
        width:100% !important;
        height:100% !important;
        object-fit:contain !important;
    }

    #kimak-live-info{
        margin-top:6px !important;
        gap:6px !important;
    }

    .kimak-info-box{
        padding:8px 10px !important;
        min-height:0 !important;
        border-radius:9px !important;
    }

    .kimak-info-box small,
    .kimak-info-box .label{
        font-size:10px !important;
        line-height:1.2 !important;
    }

    .kimak-info-box strong,
    .kimak-info-box .value{
        font-size:14px !important;
        line-height:1.25 !important;
    }

    #live-match + .kbp-section{
        margin-top:10px !important;
        padding-top:10px !important;
    }
}