/* Samsung WindFree Ansuran — tapak ejen. Mobile-first, tiada framework,
   tiada build. Bahasa reka bentuk: putih + biru ais (rujukan poster WindFree),
   biru jenama sebagai aksen, merah/kuning hanya untuk cip promo.
   Tiada mod gelap (sama keputusan dengan tapak LG). */

@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("/static/fon/jakarta-var.woff2") format("woff2-variations"),
      url("/static/fon/jakarta-var.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

:root{
  --biru:#1428a0; --biru-2:#1f3fd1; --biru-gelap:#0b1a6e; --biru-soft:#eef2ff;
  --ais:#e8f3fc; --ais-2:#f3f8fd;
  --merah:#d7141a; --kuning:#ffd84d;
  --ink:#0f172a; --ink-2:#334155; --mut:#5b6576;
  --bg:#fff; --bg-2:#f4f7fb; --card:#fff; --line:#dde4ee; --line-2:#edf1f7;
  --ok:#0a7d33; --ok-bg:#e8f5ec; --warn:#9a3412; --warn-bg:#fff4ed;
  --wa:#25d366; --wa-2:#1ebe5a; --wa-ink:#052e16;
  --r:14px; --r-lg:22px;
  --shadow:0 1px 2px rgb(15 23 42 / .05), 0 12px 32px rgb(15 23 42 / .08);
  --pad:clamp(1rem, 3vw, 1.5rem);
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{
  font:400 clamp(15px,.45vw + 13.8px,16.5px)/1.6 "Plus Jakarta Sans",-apple-system,
       BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
[hidden]{display:none !important}
h1,h2,h3,h4{line-height:1.2;text-wrap:balance}
h1,h2{letter-spacing:-.018em}
:where(button,a,input,select,textarea){font:inherit}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--biru-2);outline-offset:2px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:.5rem;z-index:50;background:var(--biru);
  color:#fff;padding:.6rem 1rem;border-radius:8px;font-weight:700}
.skip:focus{left:.5rem}
main{outline:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ── butang ─────────────────────────────────────────────────────────── */
.btn-1,.btn-2,.wa-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.7rem 1.25rem;border-radius:999px;font-weight:700;
  font-size:.95rem;cursor:pointer;border:2px solid transparent;text-align:center;
  transition:background-color .15s,border-color .15s,transform .15s;
}
.btn-1{background:var(--biru);color:#fff}
.btn-1:hover{background:var(--biru-2)}
.btn-2{background:var(--card);color:var(--biru);border-color:currentColor}
.btn-2:hover{background:var(--biru-soft)}
.wa-btn{background:var(--wa);color:var(--wa-ink)}
.wa-btn:hover{background:var(--wa-2)}
.penuh{width:100%}
.besar{min-height:56px;font-size:1.05rem}
.ikon-wa{width:1.25em;height:1.25em;fill:currentColor;flex:none}
button:disabled{opacity:.55;cursor:not-allowed}

/* ── header ─────────────────────────────────────────────────────────── */
.top{
  position:sticky;top:0;z-index:30;background:rgb(255 255 255 / .96);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:.35rem var(--pad);padding:.6rem var(--pad);
}
.brand{display:inline-flex;align-items:center}
.brand img{height:26px;width:auto}
.top nav{display:flex;justify-content:flex-end;gap:.1rem;white-space:nowrap}
.top nav a{display:inline-flex;align-items:center;min-height:44px;padding:.35rem .6rem;
  border-radius:8px;font-weight:600;color:var(--mut);font-size:.82rem}
.top nav a:hover{color:var(--ink);background:var(--bg-2)}
.ejen{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:.45rem;
  font-size:.82rem;color:var(--mut);flex-wrap:wrap}
.ejen:empty{display:none}
.ejen img{width:26px;height:26px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.ejen strong{color:var(--ink)}
.ejen a{color:var(--biru);font-weight:700}
@media (max-width:560px){
  .top nav a:nth-child(2){display:none}          /* "Kenapa WindFree" — ruang sempit */
  .brand img{height:24px}
  .top nav a{padding:.35rem .5rem}
}
@media (max-width:374px){ .brand img{height:20px} .top nav a{padding:.35rem .35rem;font-size:.78rem} }
@media (min-width:860px){
  .top{grid-template-columns:auto 1fr auto}
  .ejen{grid-column:2;grid-row:1;justify-content:flex-end}
  .brand img{height:30px}
}

main{max-width:var(--maxw);margin-inline:auto;padding:var(--pad) var(--pad) 3rem}

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:
    radial-gradient(120% 90% at 100% 0%, rgb(255 255 255 / .9) 0, transparent 55%),
    linear-gradient(160deg, #dcecfb 0%, var(--ais) 45%, #f7fbff 100%);
  padding:clamp(1.3rem,4vw,2.6rem);
  display:grid;gap:1.3rem 2.4rem;
  grid-template-areas:"teks" "visual" "ejen" "percuma";
}
.hero-teks{grid-area:teks;position:relative;z-index:1}
.hero-visual{grid-area:visual;position:relative;margin-inline:-.5rem}
.hero-visual::before{               /* "angin lembut" di bawah unit */
  content:"";position:absolute;inset:auto 6% -4% 6%;height:46%;
  background:radial-gradient(60% 70% at 50% 0%, rgb(56 132 255 / .22), transparent 70%);
  filter:blur(6px);
}
.hero-visual img{position:relative;width:100%;max-width:640px;margin-inline:auto}
.hero-ejen{grid-area:ejen}
.hero .percuma{grid-area:percuma}
.kicker{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--biru);margin-bottom:.5rem}
.hero h1{font-size:clamp(1.9rem,5vw,3.1rem);font-weight:800;margin-bottom:.7rem;
  color:var(--biru-gelap);max-width:14em}
.hero .lede{font-size:clamp(.98rem,1.5vw,1.1rem);color:var(--ink-2);max-width:36rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.3rem}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1fr) 310px;
        grid-template-areas:"teks ejen" "visual ejen" "percuma percuma"}
  .hero-visual{margin:-.6rem 0 -.4rem}
  .hero-visual img{max-width:600px;margin:0}
  .hero-ejen{align-self:center}
}

.cip-promo{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem}
.cip-promo li{font-size:.78rem;font-weight:800;letter-spacing:.02em;padding:.38rem .8rem;
  border-radius:999px;background:var(--card);color:var(--biru-gelap);
  border:1px solid var(--line)}
.cip-promo .cip-kuning{background:var(--kuning);border-color:#f1c40f;color:#1c1400}
.cip-promo .cip-merah{background:var(--merah);border-color:var(--merah);color:#fff}
.cip-promo.kecil{margin:0 0 .6rem}
.cip-promo.kecil li{font-size:.72rem;padding:.3rem .65rem}

/* kad ejen dalam hero */
.ek{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  padding:1.3rem 1.2rem 1.1rem;text-align:center;display:grid;justify-items:center;gap:.25rem}
.ek-foto{width:112px;height:112px;border-radius:50%;object-fit:cover;
  border:4px solid #fff;box-shadow:0 0 0 2px var(--biru-soft);margin-bottom:.4rem}
.ek-inisial{display:grid;place-items:center;background:var(--biru-soft);color:var(--biru);
  font-weight:800;font-size:2rem}
.ek-nama{font-size:1.15rem;font-weight:800;line-height:1.25}
.ek-peranan{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--biru)}
.ek-kawasan{display:inline-flex;align-items:center;gap:.3rem;font-size:.85rem;color:var(--mut)}
.ek-kawasan svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.ek .wa-btn{margin-top:.8rem}
.ek-nota{font-size:.78rem;color:var(--mut);margin-top:.35rem}
.ek-umum{text-align:left;justify-items:stretch}
.ek-umum .ek-teks{font-size:.9rem;color:var(--ink-2)}

/* lima perkara percuma (ala baris bawah poster) */
.percuma{display:grid;gap:.6rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.percuma li{background:rgb(255 255 255 / .92);border-radius:var(--r);padding:.85rem .9rem;
  display:flex;gap:.7rem;align-items:flex-start}
.percuma li:last-child{grid-column:1/-1}
.percuma .ikon{width:34px;height:34px;flex:none;color:var(--biru);background:var(--biru-soft);
  border-radius:50%;padding:7px}
.percuma h3{font-size:.86rem;font-weight:800;color:var(--biru-gelap)}
.percuma p{font-size:.76rem;color:var(--mut);line-height:1.45;margin-top:.1rem}
@media (min-width:760px){
  .percuma{grid-template-columns:repeat(5,minmax(0,1fr))}
  .percuma li{flex-direction:column}
  .percuma li:last-child{grid-column:auto}
}

/* ── seksyen umum ───────────────────────────────────────────────────── */
.seksyen{margin-top:clamp(2.6rem,6vw,4rem)}
.kepala-s{max-width:44rem;margin-bottom:1.3rem}
.kepala-s h2{font-size:clamp(1.45rem,3.2vw,2.05rem);font-weight:800;color:var(--biru-gelap)}
.kepala-s p{color:var(--ink-2);margin-top:.4rem}

/* ── kad model (ala kotak harga poster) ─────────────────────────────── */
.grid-model{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.kad-model{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;transition:box-shadow .2s,transform .2s}
.kad-model:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.km-hp{background:linear-gradient(180deg,var(--biru-2),var(--biru));color:#fff;
  text-align:center;font-size:1.35rem;font-weight:800;padding:.55rem}
.km-hp a{display:block}
.km-img{background:linear-gradient(180deg,var(--ais-2),#fff);padding:.9rem .7rem .2rem}
.km-img img{width:100%;aspect-ratio:640/300;object-fit:contain}
.km-bilik{display:flex;gap:.45rem;align-items:flex-start;font-size:.84rem;font-weight:700;
  padding:.7rem 1.1rem 0;color:var(--ink-2);line-height:1.35}
.km-bilik small{display:block;font-size:.8rem;font-weight:500;color:var(--mut)}
.ikon-k{width:18px;height:18px;flex:none;color:var(--biru);margin-top:.05rem}
.harga{display:flex;align-items:baseline;gap:.25rem;padding:.35rem 1.1rem 0;color:var(--merah)}
.harga .rm{font-size:1rem;font-weight:800;color:var(--ink)}
.harga b{font-size:2.6rem;font-weight:800;line-height:1;letter-spacing:-.03em}
.harga .bln{font-size:.9rem;font-weight:600;color:var(--ink-2)}
.harga.besar{padding:0}
.harga.besar b{font-size:3.4rem}
.km-nota{font-size:.8rem;color:var(--mut);padding:.35rem 1.1rem 0}
.km-promo{padding:.55rem 1.1rem 0;display:flex;flex-wrap:wrap;gap:.35rem}
.km-promo li{font-size:.7rem;font-weight:800;color:#fff;background:var(--merah);
  border-radius:999px;padding:.22rem .6rem}
.km-aksi{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:1rem 1.1rem 1.1rem;margin-top:auto}
.km-aksi .btn-2,.km-aksi .wa-btn{min-height:44px;padding:.5rem .8rem;font-size:.88rem}

/* ── empat sebab ────────────────────────────────────────────────────── */
.empat{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.empat li{background:var(--bg-2);border-radius:var(--r);padding:1.2rem 1.1rem}
.empat .ikon{width:48px;height:48px;padding:11px;border-radius:50%;color:#fff;
  background:radial-gradient(circle at 30% 25%,var(--biru-2),var(--biru-gelap));margin-bottom:.8rem}
.empat h3{font-size:1.05rem;font-weight:800;margin-bottom:.3rem}
.empat p{font-size:.88rem;color:var(--ink-2)}
.nota-ujian{font-size:.76rem;color:var(--mut);margin-top:.9rem;max-width:60rem}
.nota-ujian a{color:var(--biru);font-weight:700}

/* ── panduan HP ─────────────────────────────────────────────────────── */
.panduan{display:grid;gap:.6rem}
.panduan a{display:grid;grid-template-columns:4.6rem 1fr auto;grid-template-areas:
  "hp bilik rm" "hp luas rm";align-items:center;gap:.05rem 1rem;padding:.85rem 1.1rem;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.panduan a:hover{border-color:var(--biru)}
.pg-hp{grid-area:hp;font-size:1.25rem;font-weight:800;color:var(--biru)}
.pg-bilik{grid-area:bilik;font-weight:700}
.pg-luas{grid-area:luas;font-size:.82rem;color:var(--mut)}
.pg-rm{grid-area:rm;font-weight:800;color:var(--merah);font-size:1.1rem}
.pg-rm small{font-size:.72rem;color:var(--mut);font-weight:600}

/* ── jadual banding ─────────────────────────────────────────────────── */
.jadual-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);
  -webkit-overflow-scrolling:touch}
table.banding{border-collapse:collapse;width:100%;min-width:640px;font-size:.87rem}
.banding th,.banding td{padding:.7rem .9rem;border-bottom:1px solid var(--line-2);
  text-align:left;vertical-align:top}
.banding thead th{background:var(--biru);color:#fff;font-weight:800;font-size:.95rem}
.banding thead th a{display:block}
.banding tbody th{font-weight:600;color:var(--ink-2);background:var(--bg-2);
  position:sticky;left:0;min-width:9.5rem}
.banding tbody tr:last-child>*{border-bottom:0}
.tb-harga{color:var(--merah);font-size:1.05rem}

/* ── langkah ────────────────────────────────────────────────────────── */
.langkah{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  counter-reset:l}
.langkah li{border:1px solid var(--line);border-radius:var(--r);padding:1.1rem;background:var(--card)}
.langkah b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--biru);color:#fff;font-weight:800;margin-bottom:.6rem}
.langkah h3{font-size:1rem;font-weight:800}
.langkah p{font-size:.87rem;color:var(--ink-2);margin-top:.2rem}

/* ── soalan lazim ───────────────────────────────────────────────────── */
.faq{display:grid;gap:1.4rem;background:var(--bg-2);border-radius:var(--r-lg);
  padding:clamp(1.3rem,4vw,2.4rem)}
@media (min-width:900px){
  .faq{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:2.6rem}
  .faq-kiri{position:sticky;top:6rem;align-self:start}
}
.faq-kiri h2{font-size:clamp(1.45rem,3.2vw,2.05rem);font-weight:800;color:var(--biru-gelap)}
.faq-kiri p{color:var(--ink-2);margin:.5rem 0 1rem}
.faq-senarai{display:grid;gap:.55rem}
.faq-item{background:var(--card);border-radius:var(--r);border:1px solid var(--line)}
.faq-item summary{cursor:pointer;list-style:none;padding:.95rem 3rem .95rem 1.1rem;
  font-weight:700;position:relative;min-height:48px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:1.1rem;top:50%;
  transform:translateY(-50%);font-size:1.3rem;font-weight:700;color:var(--biru)}
.faq-item[open] summary::after{content:"–"}
.faq-item p{padding:0 1.1rem 1.05rem;color:var(--ink-2);font-size:.93rem}

/* ── footer ─────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);background:var(--bg-2);margin-top:3rem}
.foot-dalam{max-width:var(--maxw);margin-inline:auto;padding:2rem var(--pad) 2.4rem;
  display:grid;gap:.8rem;font-size:.84rem;color:var(--mut)}
.foot-logo{height:24px;width:auto}
.foot-nav a{color:var(--ink-2);font-weight:600}
.foot-nav a:hover{color:var(--biru)}
.penafian{font-size:.78rem;max-width:60rem}

/* bar WhatsApp melekat — telefon sahaja */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:.6rem var(--pad)
  calc(.6rem + env(safe-area-inset-bottom));background:rgb(255 255 255 / .96);
  border-top:1px solid var(--line);box-shadow:0 -6px 20px rgb(15 23 42 / .06);
  transition:transform .25s}
.mcta.sorok{transform:translateY(110%)}
.mcta:empty{display:none}
@media (max-width:759px){ body:has(.mcta:not(:empty)){padding-bottom:calc(76px + env(safe-area-inset-bottom))} }
@media (min-width:760px){ .mcta{display:none} }

/* ── halaman produk ─────────────────────────────────────────────────── */
.remah{font-size:.84rem;color:var(--mut);margin-bottom:1rem}
.remah a{color:var(--biru);font-weight:600}
.pd{display:grid;gap:1.6rem}
@media (min-width:900px){ .pd{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2.6rem} }
.galeri{align-self:start}
@media (min-width:900px){ .galeri{position:sticky;top:5.5rem} }
.g-utama{background:linear-gradient(180deg,var(--ais),var(--ais-2));border-radius:var(--r-lg);
  padding:1rem}
.g-utama img{width:100%;aspect-ratio:4/3;object-fit:contain}
.g-senarai{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.45rem;margin-top:.6rem}
.g-kecil{border:2px solid var(--line);background:var(--ais-2);border-radius:10px;padding:.2rem;
  cursor:pointer;min-height:44px}
.g-kecil[aria-current="true"]{border-color:var(--biru)}
.g-kecil img{aspect-ratio:4/3;object-fit:contain;width:100%}
.pd-info h1{font-size:clamp(1.7rem,4vw,2.4rem);font-weight:800;color:var(--biru-gelap)}
.kod{font-size:.84rem;color:var(--mut);margin-top:.25rem}
.kod b{color:var(--ink-2)}
.cip-spec{display:flex;flex-wrap:wrap;gap:.4rem;margin:.9rem 0 1.1rem}
.cip-spec li{font-size:.78rem;font-weight:700;border:1px solid var(--line);border-radius:999px;
  padding:.3rem .7rem;color:var(--ink-2);background:var(--bg-2)}
.kotak-harga{background:var(--ais);border-radius:var(--r-lg);padding:1.1rem 1.3rem;margin-bottom:.9rem}
.kh-nota{font-size:.86rem;color:var(--ink-2);margin-top:.2rem}
.ejen-mini{display:flex;align-items:center;gap:.7rem;margin-top:.9rem;padding:.7rem .9rem;
  border:1px solid var(--line);border-radius:var(--r);font-size:.86rem;color:var(--mut)}
.ejen-mini img,.ejen-mini .ek-inisial{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.ejen-mini .ek-inisial{font-size:1rem}
.ejen-mini strong{color:var(--ink);font-size:.98rem}
.pilih-hp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;margin-top:1.2rem}
.pilih-hp a{display:grid;justify-items:center;border:2px solid var(--line);border-radius:12px;
  padding:.5rem .2rem;min-height:48px;font-size:.8rem;color:var(--mut)}
.pilih-hp a b{font-size:.95rem;color:var(--ink)}
.pilih-hp a:hover{border-color:var(--biru-2)}
.pilih-hp a[aria-current="page"]{border-color:var(--biru);background:var(--biru-soft)}
.sesuai{display:flex;gap:.5rem;margin-top:1.1rem;font-size:.92rem;color:var(--ink-2)}
.termasuk{display:grid;gap:.45rem;margin-top:1rem;border-top:1px solid var(--line);padding-top:1rem}
.termasuk li{display:flex;gap:.65rem;align-items:center}
.termasuk .ikon{width:30px;height:30px;padding:6px;flex:none;color:var(--biru);
  background:var(--biru-soft);border-radius:50%}
.termasuk h3{font-size:.9rem;font-weight:700}
.termasuk p{display:none}

.angka{display:grid;gap:.6rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){ .angka{grid-template-columns:repeat(4,minmax(0,1fr))} }
.angka li{background:var(--bg-2);border-radius:var(--r);padding:1rem 1.1rem;border-top:3px solid var(--biru)}
.angka b{display:block;font-size:clamp(1.2rem,2.6vw,1.6rem);font-weight:800;color:var(--biru-gelap)}
.angka span{font-size:.8rem;color:var(--mut)}
.ciri-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.ciri-kump{background:var(--bg-2);border-radius:var(--r-lg);padding:1.2rem 1.3rem}
.ciri-kump h3{font-size:1.08rem;font-weight:800;color:var(--biru);margin-bottom:.7rem}
.ciri-kump ul{display:grid;gap:.8rem}
.ciri-kump h4{font-size:.93rem;font-weight:700}
.ciri-kump p{font-size:.86rem;color:var(--ink-2);margin-top:.1rem}
.spec-senarai{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  align-items:start}
.spec{border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.spec summary{cursor:pointer;padding:.85rem 1.1rem;font-weight:800;color:var(--biru-gelap);min-height:48px}
.spec table{width:100%;border-collapse:collapse;font-size:.86rem}
.spec th,.spec td{padding:.5rem 1.1rem;border-top:1px solid var(--line-2);text-align:left;vertical-align:top}
.spec th{font-weight:500;color:var(--mut);width:55%}
.spec td{font-weight:700}
.grid-model.tiga{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}

/* ── halaman ringkas (mesej server, pengesahan kelulusan) ───────────── */
main.ringkas{margin:2.5rem auto}
.kotak-mesej{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.6rem;display:grid;gap:.8rem;box-shadow:var(--shadow)}
.kotak-mesej h1{font-size:1.4rem;font-weight:800;color:var(--biru-gelap)}
.kotak-mesej a:not([class]){color:var(--biru);font-weight:700;text-decoration:underline}
.kotak-mesej .kecil{font-size:.85rem;color:var(--mut)}
.bulat{width:120px;height:120px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.butiran{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;font-size:.92rem}
.butiran dt{color:var(--mut)}
.butiran dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.baris-butang{display:flex;gap:.6rem;flex-wrap:wrap}
.baris-butang form{flex:1}
.baris-butang button{width:100%}

/* ── borang (daftar, login, dashboard, admin) ───────────────────────── */
.kotak{max-width:36rem;margin-inline:auto}
.kotak h1{font-size:1.6rem;font-weight:800;color:var(--biru-gelap);margin-bottom:.35rem}
.kotak .intro{color:var(--mut);margin-bottom:1.4rem}
fieldset{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  padding:1.2rem;margin:0 0 1.1rem;min-width:0}
legend{padding:0 .4rem;font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.09em;color:var(--biru)}
.medan{margin-bottom:1.1rem}
.medan:last-child{margin-bottom:0}
.medan label{display:block;font-weight:700;font-size:.88rem;margin-bottom:.3rem}
.bantu{font-size:.82rem;color:var(--mut)}
.medan .bantu{font-size:.8rem;margin-bottom:.45rem}
.medan input,.medan select,.medan textarea{width:100%;font-size:16px;min-height:48px;
  padding:.65rem .8rem;border:1.5px solid #9aa4b2;border-radius:10px;background:var(--card);color:var(--ink)}
.medan textarea{resize:vertical;min-height:96px}
.medan input:focus,.medan select:focus,.medan textarea:focus{border-color:var(--biru);outline:none;
  box-shadow:0 0 0 3px rgb(20 40 160 / .15)}
.sub-baris{display:flex;align-items:center;gap:.4rem}
.sub-baris input{flex:1;min-width:0}
.sub-baris .ekor{font-size:.85rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.tanda{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;color:var(--ink-2)}
.tanda input{width:22px;height:22px;flex:none;margin-top:.1rem;accent-color:var(--biru)}
.jerat{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pratonton{display:flex;align-items:center;gap:1rem;margin-top:.8rem}
.pratonton img,.pratonton .kosong{width:88px;height:88px;border-radius:50%;object-fit:cover;
  flex:none;border:1px solid var(--line);background:var(--bg-2)}
.pratonton .kosong{display:grid;place-items:center;font-size:.7rem;color:var(--mut);text-align:center;padding:.4rem}
.lapor{margin-top:1rem;padding:.85rem 1rem;border-radius:10px;font-size:.9rem;font-weight:600}
.lapor:empty{display:none}
.lapor.ok{background:var(--ok-bg);color:var(--ok);border:1px solid rgb(10 125 51 / .3)}
.lapor.ralat{background:var(--warn-bg);color:var(--warn);border:1px solid rgb(154 52 18 / .3)}
.siap{border:1px solid var(--line);border-top:4px solid var(--ok);border-radius:var(--r);
  background:var(--card);padding:1.6rem;text-align:center}
.siap h2{font-size:1.25rem;margin-bottom:.5rem}
.siap p{color:var(--ink-2)}
.toast{position:fixed;left:50%;bottom:calc(1.2rem + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:60;background:var(--ink);color:#fff;padding:.7rem 1.2rem;
  border-radius:10px;font-size:.88rem;font-weight:600;box-shadow:var(--shadow);max-width:90vw}
.state{color:var(--mut);text-align:center;padding:3rem 1rem}
.pautan{color:var(--biru);font-weight:700;text-decoration:underline}