/* SakuTrainer — gaya bersama landing, aplikasi, dan halaman privasi.
   Warna dari piringan beban standar: biru 20 kg (utama), merah 25 kg (rekor), emas (Pro), grafit, kapur. */
:root{
  --bg:#eceef1; --surface:#ffffff; --sunk:#e1e4e9; --line:#cdd2d9;
  --ink:#151a21; --mut:#5b6573;
  --blue:#1d55c9; --blueTx:#ffffff; --blueSoft:#dbe5fa;
  --red:#c8321f; --redSoft:#f8e1dd; --gold:#e0b23a; --ok:#21845a;
  --phone:#0e1116;
  --f-display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --f-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --f-num:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --logo:url(/assets/sakutrainer-logo.svg);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#101318; --surface:#181c23; --sunk:#0c0f13; --line:#2b313b; --ink:#e9edf2; --mut:#939dab;
  --blue:#5d8bf0; --blueTx:#0b1020; --blueSoft:#1d2a47; --red:#ff6a55; --redSoft:#3a1d19; --ok:#4cc58d; --phone:#000;
  --logo:url(/assets/sakutrainer-logo-putih.svg); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#101318; --surface:#181c23; --sunk:#0c0f13; --line:#2b313b; --ink:#e9edf2; --mut:#939dab;
  --blue:#5d8bf0; --blueTx:#0b1020; --blueSoft:#1d2a47; --red:#ff6a55; --redSoft:#3a1d19; --ok:#4cc58d; --phone:#000;
  --logo:url(/assets/sakutrainer-logo-putih.svg); color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 var(--f-body)}
img{max-width:100%}
a{color:var(--blue)}
h1,h2,h3{font-family:var(--f-display);line-height:1.02;margin:0;text-wrap:balance;letter-spacing:.005em}
p{margin:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.wrap{max-width:1140px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font:500 12px var(--f-num);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.logo{display:block;width:172px;aspect-ratio:1600/336;background:var(--logo) left center/contain no-repeat;text-indent:-9999px;overflow:hidden}

/* tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:14px;padding:14px 20px;font:700 16px var(--f-body);background:var(--blue);color:var(--blueTx);text-decoration:none;cursor:pointer}
.btn:hover{filter:brightness(1.07)}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.btn.sm{padding:9px 14px;font-size:14px;border-radius:11px}
.btn .g{width:20px;height:20px;flex:none;background:#fff;border-radius:50%;display:grid;place-items:center}
.btn .g svg{width:14px;height:14px}

/* ponsel tiruan */
.phone{width:300px;max-width:100%;background:var(--phone);border-radius:38px;padding:9px;box-shadow:0 30px 60px -30px rgba(10,20,40,.55)}
.scr{background:var(--bg);border-radius:30px;overflow:hidden;display:flex;flex-direction:column;font-size:13px}
.sbar{display:flex;justify-content:space-between;padding:10px 20px 4px;font:11px var(--f-num);color:var(--mut)}
.anim{position:relative;overflow:hidden;background:#000;border-radius:12px}
.anim img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.anim img+img{animation:fade 2.6s ease-in-out infinite}
@keyframes fade{0%,35%{opacity:0}50%,85%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.anim img+img{animation:none;opacity:0}}

.pill{display:inline-block;font:11px var(--f-num);padding:3px 8px;border-radius:6px;background:var(--sunk);color:var(--mut)}
.pill.red{background:var(--redSoft);color:var(--red);font-weight:700}
.pill.gold{background:var(--gold);color:#1d1500;font-weight:700}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);max-width:calc(100% - 32px);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:12px;font-size:15px;z-index:20;box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}