/* ============================================================
   MENYAMA — Halaman "Segera Hadir" (statis, berdiri sendiri)
   Tidak memakai satu pun aset/CSS aplikasi. Semua di folder ini.
   ============================================================ */

/* Plus Jakarta Sans — self-hosted, tanpa CDN (jaringan RS bisa memblokir akses keluar) */
@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/PlusJakartaSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/PlusJakartaSans-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/PlusJakartaSans-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/PlusJakartaSans-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#F2EEE8;
  --surface:#FFFFFF;
  --border:#E7E2DA;
  --ink:#1B2320;
  --ink-muted:#5A6560;
  --brand:#0F6F68;
  --brand-dark:#0B534E;
  --brand-tint:#E6F1F0;
  --brand-tint-line:#CFE3E1;
  --radius:20px;
  --radius-sm:12px;
  --pill:999px;
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --shadow:0 1px 2px rgba(27,35,32,.05),0 24px 56px -22px rgba(27,35,32,.28);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100svh;               /* svh: aman terhadap bilah URL ponsel yang menyusut */
  display:grid;
  place-items:center;
  padding:24px 16px;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
}

/* Latar: dua pendar brand + pola titik halus, murni CSS (tanpa berkas gambar) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(760px 460px at 12% -8%, rgba(15,111,104,.16), transparent 62%),
    radial-gradient(680px 520px at 92% 108%, rgba(180,83,9,.10), transparent 60%),
    radial-gradient(rgba(27,35,32,.055) 1px, transparent 1px);
  background-size:auto,auto,22px 22px;
}

.shell{
  position:relative;
  z-index:1;
  width:100%;
  max-width:720px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:40px 36px 32px;
  text-align:center;
  animation:rise .6s cubic-bezier(.2,.7,.3,1) both;
}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---- Lockup brand ---- */
.brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:22px}
.brand img{width:56px;height:56px;display:block;border-radius:14px}
.brand-text{text-align:left;line-height:1.1}
.brand-name{font-size:22px;font-weight:700;letter-spacing:.02em}
.brand-org{font-size:13px;font-weight:500;color:var(--ink-muted);letter-spacing:.04em;text-transform:uppercase}

/* ---- Judul ---- */
h1{
  margin:6px 0 10px;
  font-size:clamp(30px,6.4vw,46px);
  line-height:1.15;
  font-weight:700;
  letter-spacing:-.02em;
}
h1 .accent{color:var(--brand)}
.kepanjangan{
  margin:0 auto;max-width:36ch;
  font-size:15px;font-weight:600;color:var(--brand-dark);
  letter-spacing:.01em;
}
.lead{margin:16px auto 0;max-width:52ch;color:var(--ink-muted);font-size:17px}

/* ---- Tiga poin nilai ---- */
.poin{
  list-style:none;margin:30px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
.poin li{
  padding:18px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:#FCFAF7;
  text-align:center;
}
.poin svg{width:26px;height:26px;color:var(--brand);margin-bottom:8px}
.poin b{display:block;font-size:15px;font-weight:600;line-height:1.35}
.poin span{display:block;margin-top:4px;font-size:13.5px;color:var(--ink-muted);line-height:1.45}

/* ---- Kaki ---- */
footer{
  margin-top:28px;padding-top:20px;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;
  font-size:13.5px;color:var(--ink-muted);
}

/* ---- Responsif ---- */
@media (max-width:640px){
  .shell{padding:30px 20px 24px;border-radius:16px}
  .poin{grid-template-columns:1fr;gap:10px}
  .poin li{display:flex;align-items:flex-start;gap:12px;text-align:left;padding:14px}
  .poin svg{flex:0 0 auto;margin:2px 0 0}
  .lead{font-size:16px}
  footer{flex-direction:column;gap:8px}
}
@media (max-width:359px){
  .brand img{width:46px;height:46px}
  .brand-name{font-size:19px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}