:root{
  /* ====== WARNA WEB (nyaman di mata, ubah di sini saja) ====== */
  --biru-atas:#4cb0ee;        /* latar atas (biru cerah) */
  --biru-bawah:#2c88d4;       /* latar bawah */
  --biru-brand:#a6d6f6;       /* bingkai kartu, aksen */
  --biru-muda:#dff1fd;        /* kotak ikon */
  --biru-garis-ikon:#bfe2f8;  /* garis kotak ikon */
  --biru-tombol-1:#4aa6ea;    /* nomor & ikon: atas */
  --biru-tombol-2:#2679c8;    /* nomor & ikon: bawah */
  --kuning-1:#ffe14d;         /* tombol buka: atas (kuning cerah) */
  --kuning-2:#ffc700;         /* tombol buka: bawah */
  --biru-tua:#1f3b5c;         /* teks di kartu */
  --teks-kartu-lembut:#56708f;
  --kartu-atas:#f5f8fb;
  --kartu-bawah:#e9f0f7;
  --teks-judul-atas:#f4f7fa;  /* judul: putih lembut -> abu terang */
  --teks-judul-bawah:#e3ebf3;
  --teks-sub:#f1f6fa;
  --putih:#f7fafc;
  --radius:28px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--putih);
  min-height:100vh;
  background:linear-gradient(180deg,var(--biru-atas) 0%,var(--biru-bawah) 100%) fixed;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--putih);outline-offset:3px;border-radius:12px}

.wrap{max-width:1080px;margin:0 auto;padding:56px 20px 72px}

.hero{text-align:center;margin-bottom:40px}
.judul{
  font-weight:800;
  font-size:clamp(2.4rem,9vw,4.2rem);
  line-height:1.1;
  letter-spacing:-.02em;
  background:linear-gradient(180deg,var(--teks-judul-atas) 20%,var(--teks-judul-bawah) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 4px rgba(10,50,100,.35));
}
.sub{
  margin:18px auto 0;
  max-width:560px;
  font-weight:500;
  font-size:clamp(1rem,3.4vw,1.25rem);
  color:var(--teks-sub);
  text-shadow:0 1px 3px rgba(10,50,100,.3);
}
.garis{
  width:min(260px,60%);height:5px;border-radius:5px;margin:34px auto 0;
  background:linear-gradient(90deg,transparent,var(--putih),transparent);
  opacity:.8;
}

.kartu{
  position:relative;
  background:linear-gradient(180deg,var(--kartu-atas) 0%,var(--kartu-bawah) 100%);
  border:3px solid var(--biru-brand);
  border-radius:var(--radius);
  color:var(--biru-tua);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
  box-shadow:0 8px 20px rgba(10,30,60,.2);
}
.ikon{
  width:76px;height:76px;border-radius:24px;
  display:grid;place-items:center;
  background:var(--biru-muda);border:2px solid var(--biru-garis-ikon);
  color:var(--biru-tombol-2);
}
.ikon svg{width:40px;height:40px}
.tombol{
  display:inline-block;
  background:linear-gradient(180deg,var(--kuning-1),var(--kuning-2));
  color:var(--biru-tua);
  font-weight:700;
  border-radius:999px;
  box-shadow:0 3px 8px rgba(10,30,60,.2);
  transition:filter .15s,transform .15s;
}
.tombol:hover{filter:brightness(1.08)}
.tombol:active{transform:scale(.97)}

.menu{display:grid;gap:22px;grid-template-columns:1fr}
.menu .kartu{padding:34px 26px 30px;gap:14px}
.menu .ikon{width:96px;height:96px;border-radius:30px}
.menu .ikon svg{width:52px;height:52px}
.menu h2{font-size:1.5rem;font-weight:800}
.menu p{font-size:.95rem;color:var(--teks-kartu-lembut);max-width:280px}
.menu .tombol{margin-top:6px;padding:13px 34px;font-size:1rem}
@media(min-width:760px){.menu{grid-template-columns:repeat(3,1fr);gap:26px}}

.atas{display:flex;align-items:center;margin-bottom:26px}
.kembali{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px 10px 12px;border-radius:999px;
  background:rgba(255,255,255,.2);
  color:var(--putih);
  font-weight:600;font-size:.95rem;
  transition:background .15s;
}
.kembali:hover{background:rgba(255,255,255,.34)}
.kembali svg{width:20px;height:20px}
.hero.kecil{margin-bottom:28px}
.hero.kecil .judul{font-size:clamp(2.1rem,8vw,3.4rem)}
.hero.kecil .sub{font-size:clamp(.95rem,3.2vw,1.15rem)}


.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr);gap:24px}}
@media(min-width:980px){.grid{grid-template-columns:repeat(4,1fr)}}

.item{padding:26px 14px 20px;gap:14px;min-height:260px}
.item .ikon{margin-top:4px}
.item .nomor{
  position:absolute;top:-12px;right:-8px;
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  font-weight:800;font-size:1rem;color:var(--putih);
  background:linear-gradient(180deg,var(--biru-tombol-1),var(--biru-tombol-2));
  border:3px solid var(--putih);
  box-shadow:0 3px 8px rgba(10,30,60,.25);
}
.item h3{
  font-size:.95rem;font-weight:700;line-height:1.3;letter-spacing:.02em;
  flex:1;display:flex;align-items:center;
  text-transform:uppercase;
}
.item .tombol{padding:10px 26px;font-size:.92rem;width:100%;max-width:200px}

.kosong{
  grid-column:1/-1;text-align:center;padding:36px 20px;
  background:rgba(255,255,255,.16);border:2px dashed rgba(255,255,255,.6);
  border-radius:var(--radius);color:var(--putih);
}
.kosong b{display:block;font-size:1.1rem;margin-bottom:6px}

footer{text-align:center;margin-top:56px;font-size:.85rem;color:var(--teks-sub);opacity:.9}

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