:root{
  --bg:#0b0f14; --card:#111826; --text:#e5e7eb; --muted:#a3a3a3;
  --brand:#f59e0b; --brand-2:#3b82f6; --radius:14px;
  --red-1:#ef4444;   --red-2:#f87171;
  --yellow-1:#f59e0b;--yellow-2:#facc15;
  --green-1:#22c55e; --green-2:#86efac;
  --grad-primary-from:#f59e0b; /* oranye */
  --grad-primary-to:#ffd166;   /* oranye terang */
  --grad-alt-from:#3b82f6;     /* biru */
  --grad-alt-to:#60a5fa;       /* biru terang */
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* ====== MASTHEAD (logo + banner + tombol) ====== */
.masthead{
  max-width:1100px;
  margin:0 auto;
  padding:12px 14px;
  display:grid;
  gap:12px;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "logo actions"
    "banner banner";
  align-items:center;
}

/* Logo kiri (desktop), center (HP) */
.masthead .logo{
  grid-area: logo;
  display:flex; align-items:center; justify-content:flex-start;
}
.masthead .logo img{
  width:155px; height:40px;        /* desktop */
  object-fit:contain; display:block;
}

/* ===== Tombol: SAMA LEBAR ===== */
.masthead .actions{
  grid-area: actions;
  display:grid;                    /* grid agar 2 tombol sama lebar */
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
  justify-self:end;                /* menempel kanan di desktop */
  width: clamp(260px, 28vw, 360px);/* tidak kecil, tidak terlalu besar */
}
.masthead .actions .btn{
  width:100%;
  padding:12px 16px;
  font-size:.95rem;
}

.btn{
  appearance:none; border:none; cursor:pointer;
  border-radius:999px;
  font-weight:600; letter-spacing:.2px;
  color:#fff;
  background:transparent;                    /* penting: jangan ada background solid di base */
  transition:transform .08s ease, filter .15s ease, background-position .3s ease;
  background-size:200% 100%;
  background-position:0% 50%;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.btn.primary{
  color:#111;
  background: linear-gradient(
    90deg,
    var(--grad-primary-from, #f59e0b),
    var(--grad-primary-to, #ffd166)
  );
}

.btn.alt{
  color:#fff;
  background: linear-gradient(
    90deg,
    var(--grad-alt-from, #3b82f6),
    var(--grad-alt-to, #60a5fa)
  );
}

.btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
  background-position:100% 50%;
}

.btn:active{
  transform:translateY(0);
  filter:brightness(0.98);
}

.btn:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}

/* Banner BESAR */
.masthead .banner{
  grid-area: banner;
  display:flex; justify-content:center;
}
.masthead .banner .frame{
  width:100%; max-width:1100px; height:auto;
  aspect-ratio: 8 / 3;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#0f172a,#0b1220);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.masthead .banner .frame img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* ====== Responsif (HP) ====== */
@media (max-width:900px){
  .masthead{
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "banner"
      "actions";        /* tombol pindah ke bawah banner */
    justify-items:center;
  }
  .masthead .logo{ justify-content:center; }
  .masthead .actions{
    justify-self:center;
    width: min(92%, 420px);        /* tetap sama lebar & pas di HP */
  }
}
@media (max-width:480px){
  /* Logo HP lebih besar sedikit */
  .masthead .logo img{ width:120px; height:31px; }
  .masthead .actions .btn{ padding:10px 14px; font-size:.95rem; }
}

/* ===== Konten utama (judul + grid) tetap center ===== */
.wrap{
  max-width:1100px; margin:0 auto; padding:14px;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}

/* ===== Judul di bawah banner, tengah ===== */
.page-title{
  margin:0; text-align:center;
  font-size:clamp(1.1rem, 2.2vw + .6rem, 1.6rem);
  letter-spacing:.2px;
}
.page-sub{ margin:4px 0 0; text-align:center; color:var(--muted); font-size:.95rem; }

.update-time{
  margin-top:6px;
  text-align:center;
  color:var(--muted);
  font-size:.95rem;
}


/* ===== Grid center, lebar mengikuti konten ===== */
.grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(2, max-content);  /* HP: 2 kolom */
  justify-content:center; justify-items:center;
  width:fit-content; margin-inline:auto;
}
@media (min-width:960px){
  .grid{ grid-template-columns: repeat(5, max-content); } /* Desktop: 5 kolom */
}

/* ===== Kartu ===== */
.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:12px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:box-shadow .3s ease;
}
.card.pulse{box-shadow:0 0 0 0 rgba(34,197,94,.35);animation:pulseGlow 1.8s ease-in-out infinite}
@keyframes pulseGlow{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.35)}
  60%{box-shadow:0 0 24px 8px rgba(34,197,94,.22)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,.35)}
}

.thumb{width:150px;height:150px;border-radius:12px;overflow:hidden;background:#0a101a;display:block;border:1px solid rgba(255,255,255,.08)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}

.meta{width:100%;text-align:center;font-size:.95rem;color:var(--muted);display:flex;flex-direction:column;gap:8px;align-items:center}
.meta .row{display:flex;align-items:center;gap:8px;justify-content:center}

.badge{font-size:.72rem;font-weight:700;letter-spacing:.3px;padding:3px 8px;border-radius:999px;border:1px solid transparent;user-select:none}
.badge.red{background:rgba(239,68,68,.12);color:var(--red-2);border-color:rgba(239,68,68,.35)}
.badge.yellow{background:rgba(245,158,11,.12);color:var(--yellow-2);border-color:rgba(245,158,11,.35)}
.badge.green{background:rgba(34,197,94,.12);color:var(--green-2);border-color:rgba(34,197,94,.35)}

.bar{width:150px;height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.05)}
.fill{width:0%;height:100%;background:linear-gradient(90deg,var(--brand),#ffd166);transition:width .35s ease,background .2s ease}
.fill.red   {background:linear-gradient(90deg,var(--red-1),var(--red-2))}
.fill.yellow{background:linear-gradient(90deg,var(--yellow-1),var(--yellow-2))}
.fill.green {background:linear-gradient(90deg,var(--green-1),var(--green-2))}
.pct{font-weight:700}
.pct.red{color:var(--red-2)}
.pct.yellow{color:var(--yellow-2)}
.pct.green{color:var(--green-2)}

.btn.pola{width:150px;background:#222;color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 0}
.btn.pola:hover{background:#2b2b2b}