/* ====== STYLE KHUSUS HALAMAN LIVE ====== */
.ld-wrap{max-width:1150px;margin:0 auto;padding:16px 16px 40px}
.ld-card{background:#0f2f57cc;border:1px solid #2162b3;border-radius:12px;padding:16px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.ld-title{margin:0 0 12px;font-size:clamp(20px,3.4vw,36px);text-align:center}
.ld-sub{margin:0 0 14px;text-align:center;color:#cfe3ff}

/* Bar info "LIVE DRAW : …" */
.ld-bar{
  margin:10px auto 18px;
  padding:12px 18px;
  text-align:center;
  font-weight:800;
  font-size:clamp(16px,2.2vw,24px);
  color:#0e2242;
  border-radius:10px;
  border:1px solid #e8d17a;
  background:linear-gradient(180deg,#f6e27a,#e6c34f 55%,#d7a930);
  box-shadow:inset 0 1px 0 #fff6, 0 6px 16px rgba(0,0,0,.25);
}

/* NEXT DRAW IN */
.ld-next{margin:6px 0 10px;text-align:center;font-weight:800;letter-spacing:.5px;text-decoration:underline}

/* ========= Fancy Countdown Tiles ========= */
.ld-clock{
  display:flex;
  justify-content:center;
  gap:16px;                /* ubah ke 0 jika mau super nempel */
  flex-wrap:wrap;
}

.ld-slot{
  position:relative;
  width:clamp(90px,16vw,210px);
  height:clamp(86px,15vw,160px);
  border-radius:18px;

  /* rim + depth */
  border:1px solid rgba(90,40,10,.65);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),  /* top highlight tipis */
    inset 0 -12px 26px rgba(0,0,0,.28),   /* inner shadow */
    0 10px 25px rgba(0,0,0,.35);          /* drop shadow */

  /* warna & gradasi */
  background:
    radial-gradient(160% 100% at 30% 15%, rgba(255,255,255,.15), transparent 60%),
    linear-gradient(180deg, #f9a64d 0%, #e17a2f 52%, #c65918 52%, #a74510 100%);

  display:grid;
  place-items:center;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

/* kilau diagonal halus */
.ld-slot::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 40%);
  mix-blend-mode:overlay;
  pointer-events:none;
}

/* Matikan garis split lama & titik pemisah */
.ld-slot::before{ display:none !important; }
.ld-sep{ display:none !important; }

/* interaksi kecil */
.ld-slot:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -14px 30px rgba(0,0,0,.30),
    0 14px 30px rgba(0,0,0,.45);
}

/* Angka */
.ld-num{
  font-family:"Saira Extra Condensed", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:900;
  font-size:clamp(48px,9vw,120px);
  letter-spacing:3px;
  line-height:1;
  color:#ffe07a;
  text-shadow:
    0 1px 0 rgba(255,255,255,.4),  /* bevel tipis */
    0 3px 0 #7a3a0e,               /* garis bawah gelap */
    0 12px 20px rgba(0,0,0,.35);   /* glow bawah */
}

/* Info kecil di bawah */
.ld-foot{margin-top:14px;text-align:center;color:#b7d6ff;font-size:14px}

/* RESULT terbaru (di bawah tanggal) */
.ld-last{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin:6px 0 12px;text-align:center
}
.ld-pill{
  display:inline-block;padding:0;background:transparent !important;border:none !important;
  box-shadow:none !important;color:#fff !important;font-weight:800;text-transform:uppercase;letter-spacing:.5px
}
.ld-balls{display:flex;gap:10px;justify-content:center}
.ld-balls .ball-img{
  width:42px;height:42px;display:inline-block;object-fit:contain;
  filter:drop-shadow(0 4px 6px #0008) drop-shadow(0 0 10px #65c5ff44)
}

/* rapetin konten setelah ticker supaya tidak ketutup */
.topBanner + .newsTicker + .ld-wrap{ padding-top:12px }
.ld-wrap > *:first-child{ margin-top:0 }

@media (max-width:600px){
  .ld-bar{padding:10px 12px}
  .ld-foot{font-size:12px}
  .ld-clock{ gap:10px; }
  .ld-num{ letter-spacing:2px; }
}

/* ===== BEAUTY UPGRADE: Countdown Cards ===== */

/* kartu countdown: glossy + depth */
.ld-slot{
  position: relative;
  isolation: isolate;
  border-radius: 22px;
  /* warm gradient lebih hidup */
  background:
    radial-gradient(120% 120% at 50% 0%, #ffd49533 0 40%, transparent 41%),
    linear-gradient(180deg,#ffa643 0%, #e8772b 52%, #c35416 100%);
  border: 1.5px solid #a0440f;
  box-shadow:
     0 18px 30px rgba(0,0,0,.35),
     inset 0 6px 18px rgba(255,255,255,.12),
     inset 0 -10px 18px rgba(0,0,0,.25);
}

/* glossy top shine */
.ld-slot::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(180deg,rgba(255,255,255,.35),transparent 48%);
  mix-blend-mode:soft-light; opacity:.75; pointer-events:none;
}

/* inner rim & vignette */
.ld-slot::after{
  content:"";
  position:absolute; inset:6px; border-radius:18px;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.18),
    inset 0 -14px 28px rgba(0,0,0,.25);
  pointer-events:none;
}

/* angka: lebih “emboss” + glow tipis */
.ld-num{
  font-weight: 900;
  color: #ffe8a6;
  text-shadow:
    0 3px 0 #8b3f12,                 /* garis dasar huruf */
    0 8px 16px rgba(0,0,0,.45),      /* bayangan jatuh */
    0 0 22px rgba(255,187,64,.35);   /* glow hangat */
  letter-spacing: .02em;
  transform: translateZ(0);
}

/* sentuhan hover (desktop saja) */
@media (hover:hover) and (pointer:fine){
  .ld-slot{ transition: transform .15s ease, box-shadow .2s ease }
  .ld-slot:hover{
    transform: translateY(-2px);
    box-shadow:
      0 22px 34px rgba(0,0,0,.40),
      inset 0 6px 18px rgba(255,255,255,.12),
      inset 0 -12px 22px rgba(0,0,0,.28);
  }
}

/* rapetin sambungan kartu biar mulus */
.ld-slot + .ld-slot{ margin-left: -3px }

/* mobile tuning */
@media (max-width:600px){
  .ld-slot{ border-radius: 16px }
  .ld-slot::after{ inset:5px; border-radius:14px }
  .ld-num{ letter-spacing: 1px }
}

/* animasi angka saat berubah (pakai class .bump yang sudah ada) */
@keyframes pulseNum {
  0%{ transform: translateZ(0) scale(1) }
  40%{ transform: translateZ(0) scale(1.04) }
  100%{ transform: translateZ(0) scale(1) }
}
.ld-num.bump{ animation: pulseNum .18s ease }

/* ===== FRAME di sekitar countdown ===== */
.ld-clock{
  /* bikin ukurannya pas konten & bisa ditengah */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 10px auto 0;

  /* bingkai */
  padding: 14px 18px;
  border-radius: 30px;
  background:
    radial-gradient(120% 160% at 50% 0%, #61b3ff28 0 38%, transparent 40%),
    linear-gradient(180deg,#153b6a,#0e2f57 60%, #0b2444);
  border: 1px solid #2162b3;
  box-shadow:
    0 14px 34px rgba(0,0,0,.35),
    inset 0 2px 0 rgba(255,255,255,.10),
    inset 0 -12px 22px rgba(0,0,0,.25);
  position: relative;
  gap: 0 !important; /* kartu tetap nempel */
}

/* garis rim bagian dalam frame */
.ld-clock::before{
  content:"";
  position:absolute; inset:6px;
  border-radius: 24px;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.08);
  pointer-events:none;
}

/* mobile tuning */
@media (max-width:600px){
  .ld-clock{ padding:10px 12px; border-radius:22px }
  .ld-clock::before{ inset:5px; border-radius:18px }
}

/* kartu tetap rapet di dalam frame */
.ld-slot + .ld-slot{ margin-left:-3px }

/* === FIX: frame countdown jangan melebar === */
.ld-clock{
  display: inline-flex !important;   /* bukan block */
  width: max-content !important;     /* fit to content */
  white-space: nowrap !important;    /* biar nggak turun baris */
  flex-wrap: nowrap !important;      /* jangan wrap */
  margin: 10px auto 0 !important;    /* center */
  padding: 14px 18px;
  border-radius: 30px;
  background:
    radial-gradient(120% 160% at 50% 0%, #61b3ff28 0 38%, transparent 40%),
    linear-gradient(180deg,#153b6a,#0e2f57 60%, #0b2444);
  border: 1px solid #2162b3;
  box-shadow:
    0 14px 34px rgba(0,0,0,.35),
    inset 0 2px 0 rgba(255,255,255,.10),
    inset 0 -12px 22px rgba(0,0,0,.25);
  gap: 0 !important;
  position: relative;
}

.ld-clock::before{
  content:"";
  position:absolute; inset:6px;
  border-radius:24px;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.08);
  pointer-events:none;
}

/* kartu tetap nempel */
.ld-slot + .ld-slot{ margin-left:-3px }

/* === Center & shrink countdown frame === */
.ld-card .ld-clock{
  display: flex !important;          /* kontainer flex */
  flex-wrap: nowrap !important;      /* jangan turun baris */
  justify-content: initial !important;
  white-space: nowrap !important;

  /* kunci supaya tidak melebar penuh */
  width: fit-content !important;
  width: -moz-fit-content !important; /* Firefox lama */
  width: max-content !important;

  /* center di kartu */
  margin: 12px auto 0 !important;

  /* gaya bingkai (boleh ganti sesuai selera) */
  padding: 14px 18px;
  border-radius: 30px;
  background:
    radial-gradient(120% 160% at 50% 0%, #61b3ff28 0 38%, transparent 40%),
    linear-gradient(180deg,#153b6a,#0e2f57 60%, #0b2444);
  border: 1px solid #2162b3;
  box-shadow:
    0 14px 34px rgba(0,0,0,.35),
    inset 0 2px 0 rgba(255,255,255,.10),
    inset 0 -12px 22px rgba(0,0,0,.25);
}

/* kartu nempel rapat */
.ld-slot + .ld-slot{ margin-left:-3px; }