/* ===== PENGATURAN: ubah di sini ===== */
:root{
  --bg-image: url("https://abcreavity.id/feed/abcreavity-og-image.jpg");   /* gambar latar versi desktop */
  --bg-fallback: #EAEBEC;              /* warna cadangan bila gambar tidak ada */
  --card: #FAFBFC;
  --ink: #0A0B0C;
  --btn: #0A0B0C;                      /* warna tombol */
  --btn-hover: #CB2A1A;                /* warna saat disentuh/hover */
  --btn-text: #FAFBFC;
  --shadow: #CACBCC;                   /* bayangan tebal tombol */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);color:var(--ink);line-height:1.5;
  background:var(--bg-fallback) var(--bg-image) center/cover fixed no-repeat;
  min-height:100vh;padding:32px 16px 48px;
}
.card{
  max-width:480px;margin:0 auto;background:var(--card);
  border-radius:32px;padding:28px 22px 28px;
  box-shadow:0 20px 50px rgba(0,0,0,.22);
}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.top button{
  background:none;border:0;cursor:pointer;color:var(--ink);font:600 14px var(--font);
  display:flex;align-items:center;gap:6px;padding:6px;border-radius:8px;
}
.top svg{width:18px;height:18px}
.profile{text-align:center;padding:8px 6px 4px}
.avatar{
  width:112px;height:112px;border-radius:50%;margin:0 auto 14px;position:relative;overflow:hidden;
  display:grid;place-items:center;font:800 38px var(--font);color:var(--ink);
}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
h1{font-size:26px;font-weight:800;letter-spacing:-.01em}
.sub{font-weight:600;margin-top:2px}
.desc{font-size:14px;margin:12px auto 0;max-width:40ch;color:#5A6B6C}
.socials{display:grid;grid-template-columns:repeat(6,1fr);gap:14px 6px;justify-items:center;margin:18px 0 6px}
.socials a{width:30px;height:30px;display:grid;place-items:center;border-radius:8px}
.socials img{width:24px;height:24px}
h2{font-size:15px;font-weight:800;text-align:center;margin:26px 0 12px}
.list{display:grid;gap:14px}
.btn{
  display:flex;align-items:center;justify-content:center;position:relative;
  min-height:54px;padding:12px 44px;text-align:center;text-decoration:none;
  background:var(--btn);color:var(--btn-text);font-weight:800;font-size:14px;
  border:2px solid var(--btn);border-radius:14px;box-shadow:0 4px 0 var(--shadow);
  transition:transform .12s,box-shadow .12s,background .12s,border-color .12s;
}
.btn:hover,.btn:focus-visible,.btn:active{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--shadow)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--shadow)}
.btn:focus-visible,.socials a:focus-visible,.top button:focus-visible{outline:3px solid #CB2A1A;outline-offset:3px}
.btn .ico{position:absolute;left:14px;width:22px;height:22px;filter:invert(1)}
.btn .dots{position:absolute;right:16px;font-size:18px;line-height:1;opacity:.8}
footer{text-align:center;font-size:12px;color:#5A6B6C;margin-top:30px}

/* ===== Versi mobile: kartu memenuhi layar, tanpa latar ===== */
@media (max-width:600px){
  body{background:var(--card);padding:0}
  .card{max-width:none;border-radius:0;box-shadow:none;padding:20px 16px 28px}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}