:root{
  color-scheme: light dark;
  --bg:#f6f8fc; --surface:#ffffff; --ink:#0f172a; --muted:#64748b; --line:#e5e7eb;
  --accent:#0ea5e9; --accent-2:#0284c7;
  --live:#10b981; --sched:#38bdf8; --done:#94a3b8; --off:#ef4444;
  --shadow: 0 10px 28px rgba(2, 8, 20, .06);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(900px 520px at 90% -10%, #dbeafe 0%, transparent 55%),
    radial-gradient(1000px 520px at -10% 10%, #f0f9ff 0%, transparent 60%),
    var(--bg);
  color:var(--ink);
}

/* Topbar */
.topbar{max-width:1100px;margin:18px auto 8px;padding:0 18px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.2px}
.logo{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;display:grid;place-items:center;font-weight:900;box-shadow:var(--shadow)
}

/* Hero */
.hero{max-width:1100px;margin:6px auto 18px;padding:0 18px;display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
@media (max-width:900px){.hero{grid-template-columns:1fr}}
.h-title{font-size:clamp(28px,4.6vw,42px);line-height:1.12;margin:6px 0 8px}
.lead{color:var(--muted);max-width:62ch}

/* Phone preview */
.phone{
  background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:16px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; min-height:420px
}
.chip{font-size:12px;padding:6px 10px;border:1px dashed var(--line);border-radius:999px;color:var(--muted);width:max-content;background:#fff}
.card{
  border:1px solid var(--line); border-radius:16px; padding:14px 14px 12px; background:#fff;
  display:flex;flex-direction:column;gap:6px; transition:.18s ease transform,.18s ease box-shadow;
  position:relative;
}
.card::after{ /* glow tipis di sisi kiri */
  content:""; position:absolute; left:0; top:0; bottom:0; width:8px; border-radius:16px 0 0 16px;
  box-shadow:0 0 0 1px rgba(15,23,42,.02) inset;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,23,42,.10); }
.row{display:flex;justify-content:space-between;gap:8px;align-items:center}
.meta{color:var(--muted);font-size:13px}
a.card{color:inherit;text-decoration:none}

/* Sections */
.section{max-width:1100px;margin:16px auto;padding:0 18px}
.section-header{display:flex;align-items:center;gap:10px;margin:10px 0 8px;font-weight:800;letter-spacing:.2px}
.section-header .dot{width:10px;height:10px;border-radius:50%}
.dot-live{background:var(--live)} .dot-sched{background:var(--sched)} .dot-done{background:var(--done)} .dot-off{background:var(--off)}
.list{display:grid;grid-template-columns:1fr;gap:12px}
.empty{color:var(--muted);font-style:italic;margin:8px 0 4px}

/* Badges */
.badge{font-size:12px;padding:5px 10px;border-radius:999px;background:#f1f5f9;border:1px solid var(--line)}
.badge-live{background:#ecfdf5;border-color:#bbf7d0;color:#065f46}
.badge-scheduled{background:#eff6ff;border-color:#bae6fd;color:#024e7a}
.badge-done{background:#f8fafc;border-color:#e2e8f0;color:#334155}
.badge-off{background:#fef2f2;border-color:#fecaca;color:#991b1b}

/* Title link */
.item-title{font-weight:800; letter-spacing:.2px; color:#0b1220;}
.item-title:hover{ text-decoration:underline; }

/* Helpers */
.hr{height:1px;background:linear-gradient(to right,transparent,var(--line),transparent);margin:12px 0}
footer{margin:24px 0 30px;text-align:center;color:var(--muted)}

/* +++ tombol galeri per event +++ */
.card-actions{display:flex;justify-content:flex-end;margin-top:-6px}
.btn-gallery{
  display:inline-block; padding:6px 12px; border-radius:10px;
  border:1px solid var(--line); background:#fff; text-decoration:none;
  font-weight:600; color:#0b1220;
  transition:background .2s ease, border-color .2s ease, transform .1s ease;
}
.btn-gallery:hover{ background:#f0f9ff; border-color:#bae6fd; }
.btn-gallery:active{ transform:translateY(1px); }

.btn-gallery-inline{
  display:inline-block;
  padding:6px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#f0f9ff;
  color:#0284c7;
  font-weight:600;
  text-decoration:none;
  font-size:13px;
  transition:.2s ease all;
}
.btn-gallery-inline:hover{
  background:#e0f2fe;
  border-color:#bae6fd;
}

.card-click{ cursor:pointer; }



/* --- Highlight Event Section (Orange Style) --- */
.highlight-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  background:#fff7ed; /* lembut krem oranye */
  border:2px solid #fb923c;
  color:#ea580c; /* teks oranye terang */
  font-weight:900;
  font-size:20px; /* diperbesar */
  border-radius:14px;
  padding:16px 22px;
  box-shadow:0 4px 12px rgba(251,146,60,.3);
  transition:all .3s ease;
}
.highlight-row:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(251,146,60,.4);
}

.highlight-row .chip{
  background:rgba(251,146,60,.15);
  padding:8px 14px;
  border-radius:10px;
  color:#ea580c;
  font-weight:800;
  font-size:16px;
}

.badge-scheduled {
  background:#ea580c;
  color:#fff;
  font-weight:800;
  border-radius:999px;
  padding:8px 14px;
  font-size:15px;
  box-shadow:0 2px 8px rgba(234,88,12,.3);
}

/* === Play Store Button (Hijau Tua – Konsisten Theme) === */
.btn-playstore{
  display:inline-block;
  padding:12px 22px;
  border-radius:12px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.2px;
  text-decoration:none;
  color:#ffffff !important;

  background:linear-gradient(
    135deg,
    #065f46,   /* hijau tua */
    #047857    /* hijau emerald */
  );

  border:1px solid rgba(6,95,70,.4);
  box-shadow:0 8px 20px rgba(6,95,70,.25);
  transition:all .25s ease;
}

.btn-playstore:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 12px 28px rgba(6,95,70,.35);
  background:linear-gradient(
    135deg,
    #047857,
    #065f46
  );
}

.btn-playstore:active{
  transform:scale(.97);
}

/* =========================================================
   PLAY STORE BUTTON – HIJAU TUA (IKLAN HALUS & PROFESIONAL)
   ========================================================= */
.btn-playstore{
  display:inline-block;
  padding:12px 22px;
  border-radius:12px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.2px;
  text-decoration:none;
  color:#ffffff !important;

  background:linear-gradient(
    135deg,
    #065f46,   /* hijau tua */
    #047857    /* emerald */
  );

  border:1px solid rgba(6,95,70,.45);
  box-shadow:0 8px 20px rgba(6,95,70,.25);
  transition:all .25s ease;
}

.btn-playstore:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 12px 28px rgba(6,95,70,.35);
  background:linear-gradient(
    135deg,
    #047857,
    #065f46
  );
}

.btn-playstore:active{
  transform:scale(.97);
}

/* Full width di HP */
@media (max-width:600px){
  .btn-playstore{
    width:100%;
    text-align:center;
  }
}