:root{
  --bg1:#0e3a6d; --bg2:#2a86cc; --card:#0f2f57cc;
  --stroke:#6ec3ff; --text:#e8f3ff; --muted:#b7d6ff; --accent:#9dd4ff;
  --shadow:rgba(0,0,0,.35);
  /* akan diisi ulang via JS sesuai tinggi header */
  --banner-h:120px;
  /* tinggi ticker */
  --ticker-h:40px;
}

/* ======== BRAND BAR COLOR THEME ======== */
:root{
  --brand1:#1c67b3; --brand2:#0f2b52;
  --brandText:#fff; --brandBullet:rgba(255,255,255,.9); --brandBorder:rgba(255,255,255,.22);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text);
  background:
    radial-gradient(1200px 600px at 70% 20%,#2a86cc55,transparent),
    linear-gradient(135deg,var(--bg1),var(--bg2));
}
.wrap{max-width:1150px;margin:0 auto;padding:16px 16px 40px}

/* ===== Header (brand bar) ===== */
.topBanner{ position:sticky; top:0; z-index:50; }
.topBanner.brandBar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 14px;
  background:linear-gradient(90deg,var(--brand1),var(--brand2)) !important;
  border-bottom:1px solid var(--brandBorder);
  box-shadow:0 3px 12px rgba(0,0,0,.25);
}
.brand{ flex:0 0 auto; }
.brand img{ height:clamp(34px,5vw,56px); width:auto; display:block; }

.mainNavText{
  margin-left:auto; flex:1 1 auto; display:flex; justify-content:flex-end;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.mainNavText::-webkit-scrollbar{ display:none; }
.navList{ display:flex; align-items:center; gap:0; flex-wrap:nowrap; white-space:nowrap; margin:0; padding:0; list-style:none; }
.navList li{ display:flex; align-items:center; }
.navList li + li::before{ content:"•"; color:var(--brandBullet); margin:0 12px; font-weight:700; text-shadow:0 1px 0 rgba(0,0,0,.45) }
.topBanner.brandBar .navList a{
  display:inline; color:var(--brandText) !important; text-decoration:none; font-weight:700;
  font-size:clamp(13px,1.7vw,16px); padding:0; text-shadow:0 1px 0 rgba(0,0,0,.45)
}
.topBanner.brandBar .navList a:hover{ text-decoration:underline; }

/* Banner-only varian (kalau dipakai di halaman lain) */
.topBanner.bannerOnly{ height:auto; padding:0; border-bottom:1px solid rgba(255,255,255,.15); box-shadow:0 3px 12px rgba(0,0,0,.25) }
.topBanner.bannerOnly > a{ display:block; width:100%; height:100% }
.topBanner.bannerOnly > a img{ display:block; width:100%; height:100%; object-fit:cover }

@media (max-width:720px){
  .topBanner.brandBar{ padding:8px 10px }
  .navList li + li::before{ margin:0 10px }
  .topBanner.brandBar .navList a{ font-size:13px }
}

/* ===== Tabs ===== */
.tabs{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  background:linear-gradient(#0c2443,#153c6e);
  border:1px solid #215b9f; border-radius:12px; padding:8px;
  box-shadow:0 10px 30px var(--shadow) inset, 0 2px 10px var(--shadow);
  position:sticky; top:calc(var(--banner-h) + var(--ticker-h) + 10px); z-index:5;
}
.tab{
  cursor:pointer; padding:10px 14px; border-radius:10px; font-weight:700;
  background:linear-gradient(#e6eef8,#c7dff8); color:#123d6d; border:1px solid #9dc7ef;
  text-transform:capitalize; letter-spacing:.2px; box-shadow:0 2px 0 #8fb7e3 inset;
  user-select:none; transition:transform .06s ease;
}
.tab:hover{ transform:translateY(-1px) }
.tab.active{ background:linear-gradient(#fefefe,#e6f2ff); outline:2px solid #7ec0ff }
.tab.spacer{ margin-left:auto; pointer-events:none; background:transparent; border:none; box-shadow:none }
.tab.badge{ background:transparent; color:#eaf5ff; border:1px dashed #7ec0ff }

@media (max-width:600px){
  :root{ --ticker-h:36px; }
  .tabs{ top:calc(var(--banner-h) + var(--ticker-h) + 8px) !important; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none }
  .tabs::-webkit-scrollbar{ display:none }
  .tab{ flex:0 0 auto; padding:10px 12px; font-size:13px; border-radius:10px }
}

/* ===== Layout ===== */
.grid{ display:grid; grid-template-columns:1fr 1.45fr; gap:16px; margin-top:16px }
@media (max-width:960px){ .grid{ grid-template-columns:1fr } }

/* ===== Cards ===== */
.card{
  background:var(--card); border:1px solid #2162b3; border-radius:12px; padding:16px;
  backdrop-filter:blur(6px); box-shadow:0 12px 30px var(--shadow);
}
.card h3{ margin:0 0 8px; font-size:22px; color:#eaf3ff; text-shadow:0 1px 0 #00254a }
.subtle{ color:var(--muted); font-size:13px }

/* ===== Time box ===== */
.timeBox{
  display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:130px;
  background:linear-gradient(180deg,#16437b,#0e2e57 70%); border-radius:10px; border:1px solid #2f73bd;
  box-shadow:inset 0 2px 14px #00000055;
}
.timeBox .title{ font-size:28px; opacity:.92 }
.timeBox .time{ font-size:46px; font-weight:900; letter-spacing:1px }

/* ===== World clock ===== */
.clockList{ margin-top:12px; padding:14px; border-radius:10px; border:1px solid #2f73bd; background:linear-gradient(180deg,#143865,#0c2c53) }
.clockRow{ display:flex; justify-content:space-between; padding:8px 6px; border-bottom:1px dashed #376ea7 }
.clockRow:last-child{ border-bottom:none }

/* ===== Promo banner slot ===== */
.promoBox{
  display:grid; place-items:center; min-height:240px; margin-top:12px; border-radius:10px; border:1px solid #2f73bd;
  background:linear-gradient(160deg,#305d9a,#264d87 40%,#1c3a6a); position:relative; overflow:hidden;
}
.promoBox:before{ content:""; position:absolute; width:180px; height:180px; border-radius:50%; left:18%; top:12%; background:#f8d34a; box-shadow:0 0 40px 10px #f8d34a33 }
.promoBox:after{ content:""; position:absolute; width:220px; height:220px; border-radius:50%; left:12%; bottom:-70px; background:#7ac1ff33; box-shadow:inset 0 12px 30px #00000055 }
.promoHint{ position:relative; z-index:2; color:#cfe7ff; font-weight:600; opacity:.9 }
.promoBox.banner{ min-height:0; padding:0; position:relative; overflow:hidden }
.promoBox.banner::before,.promoBox.banner::after,.promoBox.banner .promoHint{ display:none !important }
.promoBox.banner a{ display:block }
.promoBox.banner img{ display:block; width:100%; height:auto; border-radius:10px }

/* ===== Table ===== */
.tableCard h3{ display:flex; align-items:center; gap:10px }
.table{ width:100%; border-collapse:collapse; margin-top:8px; table-layout:auto !important }
.table th,.table td{ padding:14px 10px; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.table thead th{ font-size:13px; color:#183d68; border:1px solid #9bc2ee }
.table tbody tr{ background:linear-gradient(90deg,#11345fdd,#0c2c53dd); border-bottom:1px solid #214f8a; position:relative; transition:background .15s ease, box-shadow .15s ease }
.table tbody tr:nth-child(even){ background:linear-gradient(90deg,#0f2e57dd,#0a274bdc) }
.table tbody td.day{ color:#e9f5ff; font-weight:700 }

/* Hover efek (desktop) */
@media (hover:hover) and (pointer:fine){
  .table tbody tr:hover{
    background:linear-gradient(90deg,#1b4f8fee,#123a68ee);
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.08), 0 4px 16px rgba(0,0,0,.25);
  }
  .balls,.ball,.ball-img{ transition:transform .12s ease, filter .12s ease; will-change:transform }
  .table tbody tr:hover .balls .ball-img, .table tbody tr:hover .balls .ball{
    transform:translateY(-1px) scale(1.06); filter:drop-shadow(0 6px 10px rgba(101,197,255,.45));
  }
  .table tbody tr:hover td{ color:#f0f6ff }
  .table tbody tr:hover td.day{ color:#fff }
}

/* Kunci agar tidak geser horizontal */
.left,.right{ min-width:0 }
.tableCard,.tabs,.card,.promoBox{ max-width:100% }
.tableCard{ overflow-x:hidden !important; -webkit-overflow-scrolling:auto; touch-action:pan-y; overscroll-behavior-x:contain }
html,body{ overflow-x:hidden }
img{ max-width:100%; height:auto }

/* Kolom RESULT center & ngepas konten */
.table th:last-child,.table td:last-child{ text-align:center }
.table td:last-child .balls{ display:inline-flex; justify-content:center; margin-inline:auto; gap:10px; flex-wrap:nowrap }
.table thead th:nth-child(3), .table td:last-child{ width:auto !important; min-width:220px }
@media (max-width:600px){
  .table td:last-child .balls{ gap:8px }
  .table thead th:nth-child(3), .table td:last-child{ min-width:150px }
}

/* ===== PNG bola angka ===== */
:root{ --ball-size-desktop:32px; --ball-size-mobile:26px; }
.ball-img{
  width:var(--ball-size-desktop); height:var(--ball-size-desktop);
  display:inline-block; object-fit:contain;
  filter:drop-shadow(0 4px 6px #0008) drop-shadow(0 0 10px #65c5ff44);
}
@media (max-width:600px){
  .ball-img{ width:var(--ball-size-mobile); height:var(--ball-size-mobile) }
}

/* ===== Sticky header + scroll hanya isi tabel ===== */
.tableCard{ --result-sticky-gap:52px; }  /* default; boleh diubah via JS */
.tableCard{
  max-height:68vh; overflow-y:auto; overflow-x:hidden;
  position:relative; -webkit-overflow-scrolling:touch; touch-action:pan-y;
}
/* Judul tabel ikut sticky */
.tableCard h3{
  position:sticky; top:0; z-index:6; margin:0; padding:12px 16px;
  background:linear-gradient(180deg,#1a3f73,#0f2f57);
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex; justify-content:center; align-items:center; gap:10px; text-align:center;
}
/* Sticky THEAD (bukan per-TH) -> biar nggak “tenggelam” */
.tableCard .table thead{
  position:sticky; top:var(--result-sticky-gap); z-index:5;
  background:linear-gradient(#e6eef8,#cfe1f7);
}
.tableCard .table thead th{
  position:static; background:transparent; text-align:center !important;
}
/* Body tetap kiri (kecuali kolom RESULT) */
.table tbody td{ text-align:left }
.table td:last-child{ text-align:center }
@media (max-width:600px){ .tableCard{ max-height:65vh } }

/* ===== Sticky News Ticker — nempel di bawah header ===== */
/* ===== Sticky News Ticker di bawah header (global) ===== */
:root{ --ticker-h: 40px; }
@media (max-width:600px){ :root{ --ticker-h: 36px; } }

.newsTicker{
  position: sticky;
  position: -webkit-sticky;     /* Safari iOS */
  top: var(--banner-h);         /* nempel tepat di bawah header */
  z-index: 45;                  /* di bawah header (z=50), di atas konten */
  margin-top: 0;
  display: flex;
  align-items: center;
  background: #0f1e33;
  color: #eaf3ff;
  border: 1px solid #2162b3;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  overflow: hidden;
}
.tk-icon{
  background:#ff2b2b; color:#fff;
  width:52px; min-width:52px; height:var(--ticker-h);
  display:grid; place-items:center;
}
.tk-track{
  flex:1; height:var(--ticker-h);
  display:flex; align-items:center; overflow:hidden; position:relative;
}
.tk-line{
  white-space:nowrap; display:inline-block; padding-left:1rem;
  animation: tk-marquee var(--ticker-speed, 10s) linear infinite;
}
.tk-line:hover{ animation-play-state: paused; }
@keyframes tk-marquee{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* Tabs offset ikut memperhitungkan tinggi header + ticker */
.tabs{
  top: calc(var(--banner-h) + var(--ticker-h) + 10px) !important;
}
@media (max-width:600px){
  .tabs{ top: calc(var(--banner-h) + var(--ticker-h) + 8px) !important; }
}

/* ===== Mobile tweaks ===== */
@media (max-width:600px){
  .wrap{ padding:12px 10px 28px }
  .card{ padding:12px; border-radius:10px }
  .card h3{ font-size:18px }
  .timeBox{ min-height:104px }
  .timeBox .title{ font-size:19px }
  .timeBox .time{ font-size:clamp(28px,9vw,42px) }
  .clockList{ padding:10px }
  .clockRow{ padding:7px 4px; font-size:14px }
  .promoBox{ min-height:180px }
}

/* ===== Result Time (Jakarta) — detak & warning ===== */
.live-time{
  display:inline-flex; align-items:baseline; gap:.15em;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.live-time .colon{
  display:inline-block; width:.55em; text-align:center;
  animation:rtBlink 1s steps(1,end) infinite;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.35));
}
.live-time .hh,.live-time .mm{
  display:inline-block; transform-origin:center;
  text-shadow:0 1px 0 rgba(255,255,255,.35), 0 3px 0 rgba(0,0,0,.35), 0 10px 16px rgba(0,0,0,.35);
  animation:rtBeat 1.25s ease-in-out infinite;
}
.live-time .mm{ animation-delay:.625s; }
@keyframes rtBlink{ 0%,49%{opacity:1} 50%,100%{opacity:.12} }
@keyframes rtBeat{ 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-1px) scale(1.05)} }
@media (max-width:600px){ .live-time{ gap:.1em } .live-time .mm{ animation-delay:.62s } }

/* warning glow (5 menit sebelum result) */
.live-time.warning .colon{ animation-duration:.5s; opacity:1 }
.live-time.warning .hh,.live-time.warning .mm{
  color:#fff2c4;
  animation:warnBeat .9s ease-in-out infinite, warnGlow 1.8s ease-in-out infinite;
}
@keyframes warnBeat{ 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-1px) scale(1.08)} }
@keyframes warnGlow{
  0%,100%{ text-shadow:0 1px 0 rgba(255,255,255,.45), 0 3px 0 rgba(0,0,0,.45), 0 0 12px rgba(255,200,80,.35), 0 8px 16px rgba(0,0,0,.45) }
  50%   { text-shadow:0 1px 0 rgba(255,255,255,.6), 0 3px 0 rgba(0,0,0,.5), 0 0 24px rgba(255,210,100,.75), 0 10px 20px rgba(0,0,0,.5) }
}