/* ========================= 
   BASE & VARIABLES
   ========================= */
* { box-sizing: border-box }

:root{
  --primary:      #5B2A86;
  --secondary:    #7D48B1;
  --under-hero:   #2B193D;

  /* Card colors (Past & Latest) */
  --past-head-bg: #5B2A86;
  --past-body-bg: #f5f6f8;
  --past-border:  #d6d8df;

  /* Mobile nav */
  --mobile-nav-link: #fff;
  --mobile-nav-sep:  rgba(255,255,255,.15);
  --topbar-height:   56px;

  /* DEFAULT bola – akan dioverride dari header.php */
  --ball-c1:#b98cff;
  --ball-c2:#6a2fb7;
  --ball-c3:#3b176e;
  --ball-ct:#ffffff;

  /* tinggi panel kiri/kanan di hero (diatur responsif di bawah) */
  --hero-panel-h: 230px;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  background:#111; color:#eee;
}
a{ color:#fff; text-decoration:none }
.wrap{ max-width:1000px; margin:0 auto; padding:0 16px }

/* TOPBAR & NAV */
.topbar .nav{ display:flex; align-items:center; justify-content:space-between; padding:10px 0 }
.topbar .brand img{ height:40px }
.topbar nav a{ margin-left:14px; opacity:.9 }
.topbar nav a:hover{ opacity:1 }
.topbar nav a.admin{ background:rgba(255,255,255,.15); padding:6px 10px; border-radius:8px }

/* Mobile Nav */
.nav-toggle{
  display:none; position:relative; width:42px; height:34px; margin-left:auto;
  border:0; background:#2b193d; border-radius:8px; cursor:pointer;
}
.nav-toggle span{ position:absolute; left:9px; right:9px; height:3px; background:#fff; border-radius:2px }
.nav-toggle span:nth-child(1){ top:9px }
.nav-toggle span:nth-child(2){ top:15px }
.nav-toggle span:nth-child(3){ top:21px }

.mobile-nav{
  position:sticky; top:0; background:var(--primary);
  display:none; flex-direction:column; z-index:40;
  border-bottom:1px solid var(--mobile-nav-sep);
}
.mobile-nav a{
  color:var(--mobile-nav-link); display:block; padding:14px 18px;
  font-weight:700; border-bottom:1px solid var(--mobile-nav-sep);
}
.mobile-nav a:active{ background:rgba(0,0,0,.15) }
.mobile-nav.is-open{ display:flex !important }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.nav-toggle.is-open span:nth-child(2){ opacity:0 }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

@media (max-width:900px){
  .desktop-nav{ display:none }
  .nav-toggle{ display:block }
  .hero{ margin-top:0 }
}

/* HERO */
.hero{ position:relative; min-height:260px; background-size:cover; background-position:center }
.hero .overlay{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.35)) }
.hero-inner{ position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:16px; padding:16px }

.card{
  background:rgba(255,255,255,.06); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:14px
}

/* ===================== SLIDER (GESER KANAN → KIRI) ===================== */
.slider-card .logo-box{ margin-bottom:10px; text-align:center }

/* hilangkan efek glass di kartu slider */
.slider-card,
.slider-card.card{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* kontainer slider */
.slider{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--past-border);
  box-shadow: 0 10px 26px rgba(0,0,0,.20);
  width: 100%;
  height: 100%;           /* disamakan via JS dengan .latest-card */
}

/* setiap slide ditumpuk absolut; mulai di luar kanan */
.slider .slide{
  position: absolute;
  inset: 0;
  min-height: 140px;
  transform: translateX(100%);
  transition: transform .45s ease-in-out;
  will-change: transform;
}

/* slide aktif terlihat di posisi 0 */
.slider .slide.active{
  transform: translateX(0);
}

/* saat keluar ke kiri / kanan */
.slider .slide.leave-left{  transform: translateX(-100%); }
.slider .slide.leave-right{ transform: translateX(100%); }

/* gambar memenuhi kotak */
.slider .slide img{
  display:block; width:100%; height:100%; object-fit:cover;
}

/* tombol & dots */
.slider .prev,.slider .next{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.4); border:none; color:#fff; font-size:22px;
  padding:6px 10px; border-radius:10px; cursor:pointer
}
.slider .prev{ left:8px } .slider .next{ right:8px }
.slider .dots{ position:absolute; left:0; right:0; bottom:6px; text-align:center }
.slider .dots .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#fff; opacity:.5; margin:0 3px }
.slider .dots .dot.active{ opacity:1 }

/* sembunyikan dot lama berbentuk <span> jika ada (legacy) */
.slider .dots span.dot { display: none !important; }

/* pastikan dua panel sejajar */
.hero-inner{ align-items: stretch; }
.latest-card{ min-height: var(--hero-panel-h); }

/* === Responsif tinggi slider === */
/* Desktop default: --hero-panel-h: 230px (di :root) */
@media (max-width: 900px){
  :root{ --hero-panel-h: 200px; }
  .slider-card{ height:auto !important; }
  .slider{ height: var(--hero-panel-h) !important; }
}
@media (max-width: 640px){
  :root{ --hero-panel-h: 200px; }
  .slider{ height: var(--hero-panel-h) !important; }
  .slider .slide img{ object-position: center top; }
}
@media (max-width: 380px){
  :root{ --hero-panel-h: 180px; }
  .slider{ height: var(--hero-panel-h) !important; }
}

/* ================================================================== */

/* UNDER-HERO */
.under-hero{ background:var(--under-hero); padding:20px 0 40px }
.section h2{ margin:0 0 12px }

/* BALLS */
.balls{
  display:flex;
  gap:8px;
  align-items:center;
}

.ball{
  display:inline-grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:50%;

  background: radial-gradient(120% 120% at 30% 30%,
              var(--ball-c1, #b98cff) 0%,
              var(--ball-c2, #6a2fb7) 55%,
              var(--ball-c3, #3b176e) 100%);
  box-shadow:
    inset 0 3px 6px rgba(255,255,255,.25),
    inset 0 -6px 10px rgba(0,0,0,.4),
    0 6px 10px rgba(0,0,0,.55);
  color: var(--ball-ct, #ffffff);

  /* >>> angka lebih tebal & besar <<< */
  font-weight: 900;                        /* tebal */
  font-size: clamp(20px, 2.2vw, 24px);     /* lebih besar + responsif */
  line-height: 1;                          /* rapat supaya center pas */
  letter-spacing: .5px;                    /* opsional biar “blok” */
}

/* PAST DRAW LIST */
.result-list{ display:grid; gap:16px }

.result-card.card{
  background:var(--past-body-bg) !important;
  border:1px solid var(--past-border);
  border-radius:14px; box-shadow:0 10px 26px rgba(0,0,0,.20);
  padding:0 !important; overflow:hidden;
}
.result-card .top{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--past-head-bg); color:#fff;
  padding:12px 16px; margin:0; border-bottom:1px solid rgba(0,0,0,.18);
  border-radius:14px 14px 0 0;
}
.result-card .grid3{
  display:grid; grid-template-columns:repeat(3, minmax(180px, 1fr));
  gap:24px; padding:14px 16px 16px;
  justify-items:center; align-items:center;
  max-width:860px; margin:8px auto 14px;
}
.result-card .grid3 > div{ text-align:center; display:flex; flex-direction:column; align-items:center }
.result-card .grid3 > div > strong{ color:#111; display:block; margin-bottom:8px; font-weight:800; letter-spacing:.1px }
.result-card .grid3 .balls{ display:flex; gap:12px; justify-content:center }

@media (max-width:640px){
  .hero-inner{ grid-template-columns:1fr }
  .result-card .grid3{
    grid-template-columns:1fr; gap:18px; padding:14px; max-width:100%; margin:12px auto 8px;
  }
  .result-card .grid3 .balls{ gap:12px; justify-content:center }
}

/* LATEST DRAW CARD */
.latest-card{
  background:var(--past-body-bg);
  border:1px solid var(--past-border);
  border-radius:14px; overflow:hidden; box-shadow:0 10px 26px rgba(0,0,0,.20);
  padding:0 !important;
}
.latest-card > h3{
  margin:0; padding:10px 16px; background:var(--past-head-bg); color:#fff; font-weight:800;
  border-radius:14px 14px 0 0;
}
.latest-card .latest-date{
  margin:0; padding:9px 16px; background:var(--past-head-bg); color:#fff;
  border-top:1px solid rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.latest-card .latest-date .date-text{ font-weight:800 }
.latest-card .latest-date .draw-badge{
  background:none !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important; color:#fff !important; font-weight:800; white-space:nowrap; font-size:.95rem;
}
.latest-card .prize-row{
  background:var(--past-body-bg);
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-top:1px solid rgba(0,0,0,.06);
}
.latest-card .prize-row > span{ color:#111; font-weight:800; min-width:86px }
.latest-card .prize-row .balls{ display:flex; gap:14px }

/* FOOTER */
.site-footer{ color:#fff; margin-top:0 }
.footer-inner{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; padding:16px 0 }
.footer-inner .col h4{ margin:0 0 8px }

/* ADMIN */
.admin-login,.admin{ background:#121016; color:#eae1ff }
.login-card{ max-width:360px; margin:60px auto }
.admin .admin-nav{ background:var(--primary); padding:8px 12px }
.admin .admin-nav a{ margin-right:12px }
.admin .admin-nav a.right{ float:right }
.admin .admin-nav a.active{ font-weight:700; text-decoration:underline }
.admin .wrap{ max-width:1000px; margin:14px auto }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px }
.form label{ display:block; margin:6px 0 }
.form input,.form textarea{
  width:100%; padding:8px; border-radius:8px; border:1px solid #444; background:#1c1330; color:#fff
}
.btn{ background:var(--secondary); border:none; color:#fff; padding:10px 14px; border-radius:10px; cursor:pointer }
.btn.ghost{ background:transparent; border:1px solid #666 }
.alert{ background:#332244; border-left:4px solid #bf4040; padding:10px; border-radius:8px }
.alert.success{ border-left-color:#3bbf6f }
.table table{ width:100%; border-collapse:collapse }
.table th,.table td{ border-bottom:1px solid #2e2345; padding:8px; text-align:left }
a.danger{ color:#ff7a7a }
.pagination{ margin-top:12px }
.pagination .page{ display:inline-block; background:#2b1b45; padding:6px 10px; border-radius:8px; margin:2px }
.pagination .page.active{ background:#5b2a86 }

/* Tagline di atas panel hero */
.hero-tagline{
  grid-column: 1 / -1;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
  margin: 4px 0 8px;
}
.hero-tagline h1{
  margin: 0 0 4px;
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 26px);
}
.hero-tagline p{
  margin: 0;
  font-size: clamp(13px, 1.6vw, 16px);
  opacity: .95;
}

@media (max-width:768px){
  .grid2,.grid3{ grid-template-columns:1fr }
}