/* smp/public/assets/css/awam.css — halaman awam & akaun (spec 2026-10-03-halaman-awam).
   Token disalin dari login.css. Asas + rangka bacaan; seksyen halaman ditambah tugas seterusnya. */
:root{
  --ink:#0f172a; --slate:#1e293b; --muted:#334155; --line:rgba(15,23,42,.12);
  --white:#ffffff; --peach:#fdba74;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --pri:#c2410c; --pri-d:#9a3412; --wa:#15803d; --teal:#0f766e; --teal-d:#115e59; --biru:#2563eb; --biru-d:#1d4ed8;
}
*,*::before,*::after{box-sizing:border-box}
body.aw-body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:#eef1f5;color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.aw-body button,.aw-body input{font:inherit}
/* Atribut hidden mesti menang ke atas display:flex/grid komponen (tab, langkah,
   set borang, butang, FAQ) yg ditogol JS; satu peraturan global ganti tiap-tiap satu. */
[hidden]{display:none!important}
.aw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.aw-skip{position:absolute;left:16px;top:-60px;z-index:20;padding:10px 16px;border-radius:999px;background:var(--white);color:var(--ink);font-weight:700;text-decoration:none;transition:top .15s}
.aw-skip:focus{top:16px;outline:2px solid var(--pri-d);outline-offset:2px}

/* ── Pengepala kaca ── */
.aw-hero{position:relative;overflow:hidden;color:#fff;padding-bottom:120px}
.aw-hero-foto{position:absolute;inset:-24px;background:#334155 url('../img/bg-login-1280.webp') center/cover no-repeat;filter:blur(10px) saturate(120%)}
@media (min-width:1300px){.aw-hero-foto{background-image:url('../img/bg-login-1920.webp')}}
.aw-hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(15,23,42,.62),rgba(15,23,42,.72) 60%,rgba(15,23,42,.82))}
.aw-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(70% 90% at 0% 0%,rgba(255,255,255,.16),rgba(255,255,255,0) 60%)}
.aw-hero-garis{position:absolute;left:0;right:0;bottom:56px;width:100%;height:90px;z-index:1}

.aw-top{position:relative;z-index:2;display:flex;align-items:center;gap:28px;max-width:1200px;margin:0 auto;padding:24px 32px 0}
.aw-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.aw-brand b{font-size:20px;font-weight:800;letter-spacing:.08em}
.aw-tile{width:44px;height:44px;border-radius:12px;background:#ea580c;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 6px 18px rgba(234,88,12,.35)}
.aw-nav{display:flex;gap:24px;margin-left:24px}
.aw-nav a{padding:4px 0;font-size:14px;font-weight:600;color:rgba(255,255,255,.86);text-decoration:none;border-bottom:2px solid transparent}
.aw-nav a:hover{color:#fff}
.aw-nav a[aria-current]{color:#fff;border-bottom-color:var(--peach)}
.aw-top-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.aw-lang{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.6)}
.aw-lang a{min-width:44px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted);text-decoration:none}
.aw-lang a[aria-current]{background:var(--slate);color:var(--white)}
.aw-masuk{height:40px;padding:0 18px;border-radius:999px;background:#fff;color:var(--ink);display:inline-flex;align-items:center;font-size:14px;font-weight:700;text-decoration:none}

.aw-hero-isi{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:72px 32px 0}
.aw-eyebrow{margin:0;font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--peach);text-transform:uppercase}
.aw-hero-isi h1{margin:14px 0 0;font-size:clamp(34px,4.2vw,60px);line-height:1.05;font-weight:800;letter-spacing:-.022em;max-width:820px}
.aw-sub{margin:20px 0 0;font-size:clamp(16px,1.4vw,20px);line-height:1.5;color:rgba(255,255,255,.88);max-width:680px}

/* ── Helaian ── */
.aw-main{flex:1;padding:0 32px 72px;outline:none}
.aw-sheet{position:relative;z-index:3;max-width:1200px;margin:-72px auto 0;background:#fff;border-radius:24px;box-shadow:0 24px 60px rgba(15,23,42,.18);padding:56px 64px 64px}

/* ── Kaki ── */
.aw-foot{background:#0f172a;font-size:13px;text-align:center;padding:24px 16px;color:#94a3b8}
.aw-foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px}
.aw-foot nav a{color:#fff;text-decoration:none;font-weight:600}
.aw-foot nav a:hover,.aw-foot nav a[aria-current]{text-decoration:underline}
.aw-foot p,.aw-foot span{margin:10px 0 0;color:#94a3b8}
.aw-foot nav span{margin:0}

/* ── Butang ── */
.aw-btn,.aw-btn-putih,.aw-btn-wa{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;text-decoration:none;border:0;border-radius:999px;cursor:pointer;transition:background .15s,box-shadow .15s}
.aw-btn{height:50px;padding:0 24px;background:var(--pri);color:#fff;box-shadow:0 8px 20px rgba(234,88,12,.3)}
.aw-btn:hover{background:var(--pri-d)}
.aw-btn-putih{height:52px;padding:0 24px;background:#fff;color:var(--ink);box-shadow:0 10px 24px rgba(15,23,42,.25)}
.aw-btn-wa{height:50px;padding:0 24px;background:var(--wa);color:#fff}

/* ── Fokus ── */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--pri-d);outline-offset:2px}
.aw-hero a:focus-visible,.aw-hero input:focus-visible,.aw-hero button:focus-visible,.aw-foot a:focus-visible{outline-color:#fff}
.aw-lang a:focus-visible{outline-color:var(--ink)}

/* ── Telefon ── */
@media (max-width:991.98px){
  .aw-hero{padding-bottom:116px}
  .aw-nav{display:none}
  .aw-top{padding:16px;gap:10px;flex-wrap:wrap}
  .aw-brand b{font-size:17px}
  .aw-top-r{gap:6px}
  .aw-lang a{min-width:36px}
  .aw-masuk{padding:0 14px}
  .aw-hero-isi{padding:28px 16px 0}
  .aw-main{padding:0 12px 56px}
  .aw-sheet{margin-top:-56px;padding:24px 20px;border-radius:22px}
}

/* ── Ciri (panduan) ── */
.aw-peach{color:var(--peach)}
.aw-hero-cta{margin-top:32px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.aw-lnk-peach{color:var(--peach);font-size:16px;font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.aw-lnk-peach:hover{text-decoration:underline}
.aw-hero-tawaran{margin:18px 0 0;font-size:15px;color:rgba(255,255,255,.78)}
.aw-hero-tawaran em,.aw-cta-band em{font-style:normal;font-weight:800;color:var(--peach)}
.aw-lnk{min-height:44px;display:inline-flex;align-items:center;font-size:16px;font-weight:600;color:var(--pri);text-decoration:none}
.aw-lnk:hover{color:var(--pri-d);text-decoration:underline}

.aw-tiang{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.aw-tiang>div{display:flex;flex-direction:column;gap:10px}
.aw-tiang h2{margin:6px 0 0;font-size:20px;font-weight:800}
.aw-tiang p{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}
.aw-ikon{width:48px;height:48px;border-radius:14px;background:#fff7ed;color:var(--pri);display:flex;align-items:center;justify-content:center;font-size:24px}
.aw-ikon-teal{background:#f0fdfa;color:var(--teal)}

.aw-seksyen{margin-top:72px;display:flex;flex-direction:column;gap:28px}
.aw-seksyen-kepala{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.aw-h2-besar{margin:0;font-size:36px;font-weight:800;letter-spacing:-.015em;line-height:1.15}
.aw-h2-sedang{margin:0;font-size:28px;font-weight:800;line-height:1.2}
.aw-seksyen-sub{margin:10px 0 0;font-size:17px;color:var(--muted)}

.aw-kump{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.aw-kad{border:1px solid #e2e8f0;border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:16px}
.aw-kad-kepala{display:flex;align-items:center;justify-content:space-between;gap:12px}
.aw-kad h3{margin:0;font-size:18px;font-weight:800}
.aw-kad ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.45;color:var(--muted)}
.aw-kad li b{color:var(--ink)}
.aw-chip{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.aw-chip-percuma{background:#ecfdf5;color:#166534}
.aw-chip-pro{background:#fff7ed;color:var(--pri-d)}

.aw-ai{border-radius:20px;background:var(--ink);color:#fff;padding:28px 32px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.aw-ai>div{flex:1 1 420px}
.aw-ai h3{margin:0;font-size:22px;font-weight:800}
.aw-ai p{margin:8px 0 0;font-size:16px;line-height:1.55;color:rgba(255,255,255,.86)}
.aw-ai .aw-ai-nota{font-weight:700;color:var(--peach)}
.aw-ikon-ai{width:56px;height:56px;border-radius:16px;background:rgba(253,186,116,.16);color:var(--peach);display:flex;align-items:center;justify-content:center;flex:none;font-size:28px}

.aw-peranan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.aw-peranan>div{border-radius:16px;padding:20px}
.aw-peranan p{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--muted)}
.aw-peranan .aw-r-label{margin:0;font-size:13px;font-weight:800;letter-spacing:.06em}
.aw-r-staf{background:#fff7ed}.aw-r-staf .aw-r-label{color:var(--pri-d)}
.aw-r-penjaga{background:#f0fdfa}.aw-r-penjaga .aw-r-label{color:var(--teal-d)}
.aw-r-pelajar{background:#eff6ff}.aw-r-pelajar .aw-r-label{color:var(--biru-d)}

.aw-harga{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.aw-pakej{position:relative;border:1px solid #e2e8f0;border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:12px}
.aw-pakej-pop{border:2px solid var(--pri);padding:27px}
.aw-pakej h3{margin:0;font-size:18px;font-weight:800}
.aw-harga-no{margin:0}
.aw-harga-no span{font-size:44px;font-weight:800;letter-spacing:-.02em}
.aw-harga-no small{font-size:15px;color:var(--muted)}
.aw-pakej-d,.aw-pakej-nota{margin:0;font-size:16px;line-height:1.5;color:var(--muted)}
.aw-pakej-nota{margin-top:4px;color:var(--ink)}
.aw-pita{position:absolute;top:-13px;left:24px;font-size:12px;font-weight:800;padding:4px 12px;border-radius:999px;background:var(--pri);color:#fff}
.aw-nota-kecil{margin:0;font-size:16px;color:#475569}

.aw-soalan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.aw-qa{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border:1px solid #e2e8f0;border-radius:14px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;background:#fff;transition:border-color .15s,color .15s}
.aw-qa:hover{border-color:var(--pri);color:var(--pri-d)}

.aw-cta-band{position:relative;overflow:hidden;margin-top:72px;border-radius:24px;color:#fff;padding:48px 56px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;background:linear-gradient(90deg,rgba(15,23,42,.9),rgba(15,23,42,.6)),#334155 url('../img/bg-login-1280.webp') center/cover no-repeat}
@media (min-width:1300px){.aw-cta-band{background-image:linear-gradient(90deg,rgba(15,23,42,.9),rgba(15,23,42,.6)),url('../img/bg-login-1920.webp')}}
.aw-cta-band p{margin:0;font-size:26px;line-height:1.3;font-weight:700;max-width:560px}
.aw-cta-btns{display:flex;gap:14px;flex-wrap:wrap}
.aw-btn-garis{height:52px;padding:0 22px;border-radius:999px;border:1px solid rgba(255,255,255,.5);color:#fff;display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:600;text-decoration:none}
.aw-btn-garis:hover{background:rgba(255,255,255,.12)}
.aw-cta-band a:focus-visible{outline-color:#fff}

.aw-hub-utama{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin-top:8px}
.aw-hub-wa{grid-column:span 3;border-radius:22px;background:var(--wa);color:#fff;padding:32px;text-decoration:none;display:flex;flex-direction:column;gap:14px}
.aw-hub-emel{grid-column:span 2;padding:32px;border-radius:22px;gap:14px;color:var(--ink);text-decoration:none}
.aw-hub-emel:hover{border-color:var(--pri)}
.aw-hub-label{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700;color:rgba(255,255,255,.92)}
.aw-hub-label i{font-size:24px}
.aw-hub-label-gelap{color:var(--muted)}
.aw-hub-no{font-size:40px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.aw-hub-alamat{font-size:22px;font-weight:800;color:var(--pri-d);overflow-wrap:anywhere}
.aw-hub-d{font-size:16px;line-height:1.5;color:rgba(255,255,255,.92)}
.aw-hub-d-gelap{color:var(--muted)}
.aw-hub-btn{margin-top:6px;align-self:flex-start;min-height:48px;padding:0 22px;border-radius:999px;background:#fff;color:#14532d;display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:700}
.aw-hub-wa:hover .aw-hub-btn{box-shadow:0 6px 18px rgba(0,0,0,.2)}
.aw-hub-wa:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.aw-hub-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.aw-hub-kotak{border-radius:18px;background:#f8fafc;padding:24px}
.aw-hub-kotak-teal{background:#f0fdfa}
.aw-hub-kotak h2{margin:0;font-size:18px;font-weight:800;display:flex;align-items:center;gap:10px}
.aw-hub-kotak-teal h2{color:var(--teal-d)}
.aw-hub-kotak p{margin:12px 0 0;font-size:16px;line-height:1.55;color:var(--muted)}
.aw-hub-kotak ol{margin:12px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:6px;font-size:16px;line-height:1.5;color:var(--muted)}
.aw-waktu{margin:14px 0 0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:16px}
.aw-waktu dt{color:var(--muted)}
.aw-waktu dd{margin:0;font-weight:700;white-space:nowrap}
@media (max-width:400px){.aw-waktu dd{white-space:normal}}
.aw-waktu .aw-tutup{color:#475569;font-weight:600}
.aw-hub-identiti{margin-top:40px;padding-top:24px;border-top:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.aw-hub-identiti p{margin:0;font-size:16px;line-height:1.6;color:#475569}
.aw-hub-identiti b{color:var(--ink)}
.aw-hub-pautan{display:flex;gap:18px;flex-wrap:wrap}

.aw-bar{display:none}
@media (max-width:991.98px){
  .aw-hub-utama,.aw-hub-panel{grid-template-columns:1fr}
  .aw-hub-wa,.aw-hub-emel{grid-column:auto;padding:24px}
  .aw-hub-no{font-size:32px}
  .aw-hub-panel,.aw-hub-identiti{margin-top:28px}
  .aw-tiang,.aw-kump,.aw-peranan,.aw-harga,.aw-soalan{grid-template-columns:1fr}
  .aw-seksyen,.aw-cta-band{margin-top:48px}
  .aw-h2-besar{font-size:28px}
  .aw-cta-band{padding:32px 24px}
  .aw-cta-band p{font-size:22px}
  .aw-bar{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid #e2e8f0;display:flex;gap:10px;align-items:center;z-index:5}
  .aw-bar p{margin:0;flex:1;font-size:14px;font-weight:600;line-height:1.3;color:var(--muted)}
  .aw-bar .aw-btn{height:44px;padding:0 18px;white-space:nowrap}
  .aw-ada-bar .aw-foot{padding-bottom:calc(24px + 68px + env(safe-area-inset-bottom))}
  /* WCAG 2.4.11: fokus papan kekunci tidak tertutup bar melekit (12+44+12 + sempadan 1px) */
  html:has(body.aw-ada-bar){scroll-padding-bottom:calc(69px + env(safe-area-inset-bottom) + 16px)}
}

/* ── Kandungan CMS (.aw-prose) ── */
.aw-prose{overflow-wrap:anywhere;color:#1e293b}
.aw-prose h3{margin:40px 0 12px;font-size:22px;font-weight:800;line-height:1.3;color:var(--ink);scroll-margin-top:24px}
.aw-prose>h3:first-child,.aw-prose>.content-card:first-child>h3:first-child{margin-top:0}
.aw-prose h4,.aw-prose h5{margin:24px 0 8px;font-size:17px;font-weight:700;color:var(--ink)}
.aw-prose p,.aw-prose li{font-size:16.5px;line-height:1.7;color:#1e293b}
.aw-prose p{margin:0 0 14px}
.aw-prose ul,.aw-prose ol{margin:0 0 16px;padding-left:24px}
.aw-prose li{margin:4px 0}
.aw-prose a{color:#c2410c;text-decoration:underline;text-underline-offset:2px}
.aw-prose a:hover{color:#9a3412}
.aw-prose table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:15px}
.aw-prose td,.aw-prose th{border:1px solid #e2e8f0;padding:8px 12px;text-align:left;vertical-align:top}
.aw-prose img{max-width:100%;height:auto}
.aw-prose .content-card{margin:0 0 32px}
.aw-prose .fw-semibold{font-weight:600}
.aw-prose .text-muted{color:#475569}
.aw-prose .text-decoration-none{text-decoration:none}
.aw-prose .text-center{text-align:center}
.aw-prose .text-primary,.aw-prose .text-success,.aw-prose .text-info{color:inherit}
.aw-prose .me-1{margin-right:.25rem}
.aw-prose .me-2{margin-right:.5rem}
.aw-prose .mt-1{margin-top:.25rem}
.aw-prose .mt-2{margin-top:.5rem}
.aw-prose .mb-0{margin-bottom:0}
.aw-prose .mb-1{margin-bottom:.25rem}
.aw-prose .mb-3{margin-bottom:1rem}
.aw-prose .table{width:100%}
.aw-prose .table-sm td,.aw-prose .table-sm th{padding:6px 10px}
.aw-prose .btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;background:#c2410c;color:#fff;font-weight:700;text-decoration:none}
.aw-prose .btn:hover{background:#9a3412;color:#fff}
.aw-prose .btn-sm{height:40px}
.aw-promo{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:#b91c1c;color:#fff;font-size:12px;font-weight:700;vertical-align:middle}
.aw-nota{margin:0 0 20px;padding:12px 16px;border-radius:12px;background:#f1f5f9;font-size:16px;color:var(--muted)}
.aw-edit-baris{margin:0 0 16px;text-align:right}
.aw-edit{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 18px;border-radius:999px;border:1px solid #cbd5e1;color:var(--ink);font-weight:600;text-decoration:none}
.aw-edit:hover{border-color:var(--pri);color:var(--pri-d)}

/* ── FAQ ── */
.aw-cari{position:relative;max-width:640px;margin-top:28px}
.aw-cari i{position:absolute;left:20px;top:50%;transform:translateY(-50%);font-size:18px;color:#64748b;pointer-events:none}
.aw-cari input{width:100%;height:52px;padding:0 20px 0 52px;border-radius:999px;border:1px solid rgba(255,255,255,.6);background:#fff;color:var(--ink);font-size:16px}
.aw-cari input::placeholder{color:#64748b}
.aw-faq-chips{display:flex;flex-wrap:wrap;gap:10px}
.aw-faq-chips .aw-chip{min-height:44px;padding:0 18px;border:1px solid #cbd5e1;background:#fff;color:var(--muted);font-size:16px;font-weight:600;cursor:pointer}
.aw-faq-chips .aw-chip:hover{border-color:var(--ink);color:var(--ink)}
.aw-faq-chips .aw-chip[aria-pressed="true"]{background:var(--slate);border-color:var(--slate);color:#fff}
.aw-faq-n{margin:16px 0 0;min-height:24px;font-size:16px;color:#475569}
.aw-faq{margin-top:8px}
.aw-faq.js .faq-q .bi-question-circle{display:none}
.aw-faq .faq-q{border-bottom:1px solid #e2e8f0;font-size:17px;font-weight:700;color:var(--ink);padding:16px 4px}
.aw-faq.js .faq-q{padding:0}
.aw-faq .faq-a a,.aw-faq .faq-a a:visited{color:var(--pri-d);text-decoration:underline;text-underline-offset:2px}
.aw-faq .faq-a{padding:0 max(4px,calc(100% - 760px)) 18px 4px;font-size:16.5px;line-height:1.7;color:#1e293b}
.aw-faq .faq-a:not([hidden]){border-bottom:1px solid #e2e8f0}
.aw-faq .faq-q:has(+.faq-a:not([hidden])){border-bottom:0}
.aw-faq-h{margin:0;font-size:inherit}
.aw-faq-btn{width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 4px;border:0;background:transparent;text-align:left;font-size:17px;font-weight:700;line-height:1.4;color:var(--ink);cursor:pointer}
.aw-faq-btn:hover{color:var(--pri-d)}
.aw-faq-btn::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid #64748b;border-bottom:2px solid #64748b;transform:rotate(45deg);margin-top:-4px;transition:transform .15s}
.aw-faq-btn[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:4px;border-color:var(--pri)}
.aw-takjumpa{margin-top:48px;border-radius:20px;background:#f0fdf4;padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.aw-takjumpa h2{margin:0;font-size:20px;font-weight:800}
.aw-takjumpa p{margin:6px 0 0;font-size:16px;color:var(--muted)}

/* ── Terma / Privasi ── */
.aw-doktab{margin-top:28px;display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.78)}
.aw-doktab a{min-height:44px;padding:0 20px;border-radius:999px;display:flex;align-items:center;font-size:15px;font-weight:700;color:var(--muted);text-decoration:none}
.aw-doktab a[aria-current]{background:var(--slate);color:#fff}
.aw-hero .aw-doktab a:focus-visible{outline-color:var(--ink)}
.aw-kemaskini{margin:16px 0 0;font-size:15px;color:rgba(255,255,255,.86)}
.aw-kemaskini b{color:#fff}
.aw-legal{display:flex;flex-wrap:wrap;gap:56px}
.aw-toc{flex:1 1 230px;max-width:260px}
.aw-toc-h{margin:0 0 12px;font-size:13px;font-weight:800;letter-spacing:.14em;color:#475569}
.aw-toc-m summary{min-height:44px;display:flex;align-items:center;font-size:16px;font-weight:700;cursor:pointer}
.aw-toc-i{display:block;padding:8px 0 8px 14px;border-left:2px solid #e2e8f0;font-size:16px;line-height:1.4;color:var(--muted);text-decoration:none}
.aw-toc-i:hover{color:var(--ink);border-left-color:#94a3b8}
.aw-toc-i.on{color:#c2410c;border-left-color:#c2410c;font-weight:700}
.aw-cetak{margin-top:16px;min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 18px;border-radius:999px;border:1px solid #cbd5e1;background:#fff;color:var(--ink);font-size:15px;font-weight:600;cursor:pointer}
.aw-cetak:hover{border-color:var(--pri);color:var(--pri-d)}
article.aw-prose{flex:999 1 560px;min-width:0;max-width:720px}
@media (min-width:992px){
  .aw-toc{position:sticky;top:24px;align-self:flex-start;max-height:calc(100vh - 48px);overflow:auto;overscroll-behavior:contain}
  .aw-toc a:focus-visible,.aw-toc button:focus-visible{outline-offset:-2px} /* overflow:auto memotong cincin fokus di luar kotak */
  .aw-toc-m>summary{display:none}
}
@media (max-width:991.98px){
  .aw-legal{gap:20px}
  .aw-toc{flex-basis:100%;max-width:none}
  .aw-toc-h{display:none}
  .aw-toc-m{border:1px solid #e2e8f0;border-radius:14px;padding:0 16px}
  .aw-toc-m[open]{padding-bottom:8px}
  .aw-faq-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .aw-faq-chips .aw-chip{flex:none}
  .aw-cari{margin-top:20px}
  .aw-takjumpa{padding:24px 20px}
  .aw-prose h3{font-size:20px}
}

/* ── OTP ── */
.aw-otp{--box:52px;--gap:8px;position:relative;margin:0 auto;width:100%;max-width:100%}
.aw-otp-in{width:100%;height:58px;box-sizing:border-box;border-radius:14px;border:1px solid #94a3b8;background:#ffffff;color:var(--ink);text-align:center;font-size:28px;font-weight:700;letter-spacing:.5em;padding-left:.5em;font-variant-numeric:tabular-nums}
.aw-otp-in:focus{outline:2px solid var(--otp-c,#9a3412);outline-offset:1px;border-color:var(--otp-c,#9a3412)}
.aw-otp-kotak{display:none}
.aw-otp.js{position:relative;margin:0 auto;width:100%;max-width:calc(6 * var(--box) + 5 * var(--gap));height:56px}
.aw-otp.js .aw-otp-kotak{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap);pointer-events:none}
.aw-otp-kotak span{height:56px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:#ffffff;border:1px solid #94a3b8;border-radius:12px;font:700 24px/1 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);font-variant-numeric:tabular-nums}
.aw-otp-kotak span.on{border:2px solid var(--otp-c,#9a3412)}
.aw-otp-kotak span.on:empty::after{content:"";width:2px;height:26px;background:var(--otp-c,#9a3412);animation:awBlink 1s steps(1) infinite}
@keyframes awBlink{50%{opacity:0}}
.aw-otp.js .aw-otp-in{position:absolute;inset:0;width:100%;height:56px;padding:0;background:transparent;border:0;border-radius:0;outline:none;color:transparent;caret-color:transparent;text-shadow:none}
.aw-otp.js .aw-otp-in::selection{background:transparent}

/* ── Daftar sekolah: rangka (foto/kaca/kad/kaki) = log masuk (login.css, kelas lg-*); di sini hanya bahagian khusus Daftar ── */
body.aw-lg{line-height:1.6}
.aw-lg a.lg-brand{text-decoration:none}
.aw-lg a.lg-brand:focus-visible{outline:2px solid #fff;outline-offset:3px}
.aw-lg .lg-main:focus,.aw-lg .lg-card h1[tabindex="-1"]:focus{outline:none}
.aw-lg .lg-av i{display:block;animation:lgPop .35s cubic-bezier(.16,1,.3,1)}
.aw-lg .lg-card a:focus-visible,.aw-lg .lg-card button:focus-visible{outline-color:var(--role-dark)}
.aw-ds-kepala{text-align:center}
.aw-ds-kepala h1{margin:0;font-size:26px;line-height:1.2;font-weight:800;color:var(--ink)}
.aw-ds-langkah-t{margin:6px 0 0;font-size:15px;color:var(--muted)}
.aw-langkah{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.aw-langkah li{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;font-size:14px;font-weight:700;color:#475569}
.aw-langkah li>span{width:100%;height:6px;border-radius:999px;background:rgba(15,23,42,.14)}
.aw-langkah li.siap{color:var(--pri-d)}
.aw-langkah li.siap>span{background:var(--pri)}

.aw-alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;font-size:15px;line-height:1.45;text-align:left}
.aw-alert>i{margin-top:2px}
.aw-alert ul{margin:6px 0 0;padding-left:18px}
.aw-alert.err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.aw-alert.err a{color:#991b1b;text-decoration:underline}
.aw-alert li{margin:2px 0}
.aw-alert.ok{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.aw-alert:focus{outline:2px solid #991b1b;outline-offset:2px}

.aw-ds-form{display:flex;flex-direction:column;gap:18px;margin:0}
.aw-ds-set{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:14px}
.aw-fld label,.aw-lbl{display:block;margin-bottom:6px;font-size:15px;font-weight:600;color:var(--slate)}
.aw-lbl-x{font-weight:500;color:#334155}
.aw-lbl-w{color:#991b1b}
.aw-in{display:block;width:100%;height:48px;padding:0 18px;border-radius:999px;border:1px solid #6b7a90;background:rgba(255,255,255,.72);color:var(--ink);font:16px var(--font)}
.aw-in:hover{background-color:rgba(255,255,255,.85)}
.aw-in::placeholder{color:#64748b}
.aw-in:focus{outline:2px solid var(--pri-d);outline-offset:1px;border-color:var(--pri-d)}
.aw-in.bad{border:2px solid #b91c1c;background-color:#fff}
select.aw-in{appearance:none;-webkit-appearance:none;padding-right:48px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;background-size:16px 16px}
select.aw-in::-ms-expand{display:none}
@supports (appearance:base-select){
  select.aw-in,select.aw-in::picker(select){appearance:base-select}
  select.aw-in{display:flex;align-items:center}
  select.aw-in::picker(select){border:1px solid rgba(255,255,255,.7);border-radius:16px;padding:6px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 18px 40px rgba(15,23,42,.25);margin-top:6px}
  select.aw-in option{padding:10px 14px;border-radius:10px;font:16px/1.3 var(--font);color:var(--ink)}
  select.aw-in option:hover,select.aw-in option:focus-visible{background:#fff7ed;color:#9a3412}
  select.aw-in option:checked{font-weight:700}
  select.aw-in option::checkmark{color:var(--role-dark,#9a3412)}
  select.aw-in::picker-icon{display:none}
}
textarea.aw-in{height:auto;min-height:76px;padding:12px 18px;border-radius:20px;resize:vertical;line-height:1.4}
.aw-pw{position:relative}
.aw-pw .aw-in{padding-right:54px}
.aw-mata{position:absolute;right:2px;top:2px;width:44px;height:44px;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:19px}
.aw-mata:hover{background:#f1f5f9;color:var(--ink)}
.aw-hint{display:block;margin-top:6px;font-size:14px;color:#334155}
.aw-err{display:block;margin-top:6px;font-size:14px;font-weight:600;color:#991b1b}
.aw-chk{display:flex;gap:12px;align-items:flex-start}
.aw-chk input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:var(--pri)}
.aw-chk label{margin:0;font-size:15px;font-weight:400;line-height:1.5;color:var(--slate)}
/* warna pautan dlm kad: eksplisit utk SEMUA keadaan (link/visited/hover) — elak ungu :visited */
.aw-chk label a,.aw-chk label a:visited,.aw-lg .lg-card a,.aw-lg .lg-card a:link,.aw-lg .lg-card a:visited,.aw-lg .lg-card a:hover{color:var(--aw-teks-role,var(--role-dark));font-weight:600}
.aw-lg .lg-card a.aw-btn,.aw-lg .lg-card a.aw-btn:visited,.aw-lg .lg-card a.aw-btn:hover{color:#fff;text-decoration:none}
.aw-lg .lg-card .aw-alert.err a,.aw-lg .lg-card .aw-alert.err a:visited{color:#991b1b}
.aw-lg .lg-card .aw-bantu-teal a,.aw-lg .lg-card .aw-bantu-teal a:visited{color:var(--teal-d)}
.aw-ds-aksi{display:flex;gap:10px}
.aw-ds-aksi .lg-btn{flex:1}
.aw-btn-garis.aw-btn-gelap{border:1px solid #cbd5e1;color:var(--ink);height:50px;padding:0 20px;background:transparent;cursor:pointer;font-weight:600}
.aw-btn-garis.aw-btn-gelap:hover{background:rgba(15,23,42,.06)}
.aw-ds-otp{display:flex;flex-direction:column;gap:14px;text-align:center}
.aw-ds-otp p{margin:0;font-size:16px;line-height:1.55;color:var(--muted)}
.aw-ds-otp p b{color:var(--ink);overflow-wrap:anywhere}
.aw-ds-otp small{font-size:14px;color:#475569}
.aw-ds-otp .aw-lbl{margin:0}
.aw-ds-otp-in{--otp-c:#9a3412}
.aw-lnkbtn{border:0;background:none;padding:0 4px;min-height:44px;font:600 15px var(--font);color:var(--pri-d);cursor:pointer}
.aw-lnkbtn:hover:not(:disabled){text-decoration:underline}
.aw-lnkbtn:disabled{color:#475569;font-weight:400;cursor:default}
.aw-ds-linkbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:15px}
.aw-ds-linkbar a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.aw-ds-linkbar a+a{color:#475569;font-weight:400}
.aw-ds-resend{margin:0;text-align:center}
.aw-ds-bantu{margin:0;font-size:14px;color:var(--muted)}
.aw-ds-bantu a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
/* ikon utama dlm medan — meniru .lg-inp log masuk */
.aw-inp{position:relative}
.aw-inp>i,.aw-pw>i{position:absolute;left:18px;top:13px;color:#64748b;font-size:17px;pointer-events:none}
.aw-inp .aw-in,.aw-pw .aw-in{padding-left:48px}

@media (max-width:360px){.aw-lg .lg-card{padding:44px 14px 20px}.aw-langkah li{font-size:13px}}

/* ── Kad akaun (lupa / tetap semula / kod sekolah) ── */
/* ── Isi kad halaman akaun (rangka = log masuk, kelas lg-*) ── */
.aw-lg input:focus-visible{outline:2px solid var(--role-dark);outline-offset:2px}
.aw-kad-tajuk{text-align:center}
.aw-kad-tajuk h1{margin:0;font-size:26px;line-height:1.2;font-weight:800}
.aw-kad-ket{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--muted)}
.aw-kad-form{display:flex;flex-direction:column;gap:16px;margin:0}
.aw-kad-nota{margin:0;font-size:16px;line-height:1.5;color:var(--muted);text-align:center}
.lg-card .aw-btn{background:var(--role);box-shadow:0 8px 20px var(--role-glow);font-size:16px;letter-spacing:.02em}
.lg-card .aw-btn:hover{background:var(--role-dark)}
.aw-btn-blok{width:100%}
.lg-card .aw-fld a,.aw-bantu-teal a,.aw-kad-linkbar a{color:var(--role-dark);font-weight:600}
.aw-kod{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.aw-kod::placeholder{letter-spacing:.18em}
.aw-bantu-teal{border-radius:16px;background:#f0fdfa;padding:14px 16px;font-size:16px;line-height:1.55;color:var(--muted)}
.aw-bantu-teal b{color:var(--teal-d)}
.aw-bantu-teal a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--teal-d);font-weight:700;text-decoration:none}
.aw-bantu-teal a:hover{text-decoration:underline}

/* ── Aktifkan akaun: tab peranan (spt .lg-tabs log masuk) + langkah ── */
/* tab peranan = .lg-tabs/.lg-thumb/.lg-tab log masuk; di sini hanya pembetulan utk <a> (warna pautan, garis bawah, aria-current) */
.aw-lg .lg-card a.lg-tab,.aw-lg .lg-card a.lg-tab:visited{color:var(--muted);font-weight:600;text-decoration:none}
.aw-lg .lg-card a.lg-tab:not([aria-current="page"]):hover{color:var(--ink);text-decoration:none}
.aw-lg .lg-card a.lg-tab[aria-current="page"],.aw-lg .lg-card a.lg-tab[aria-current="page"]:visited{color:var(--white)}
.aw-langkah-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.lg-page .aw-langkah li.siap{color:var(--role-dark)}
.lg-page .aw-langkah li.siap>span{background:var(--role)}
.lg-page .aw-otp{--otp-c:var(--role-dark)}
.lg-page .aw-in:focus{border-color:var(--role-dark);outline-color:var(--role-dark)}
.aw-da-otp-lbl,.aw-da-otp-hint{text-align:center}
.aw-semak{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:16px;color:#475569}
.aw-semak li{display:flex;align-items:center;gap:8px}
.aw-semak li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:2px solid #94a3b8;background:transparent}
.aw-semak li.ok{color:#166534}
.aw-semak li.ok::before{border-color:#166534;background:#166534 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center/12px no-repeat}
.aw-kad-linkbar{display:flex;justify-content:space-between;align-items:center;gap:4px 16px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line);font-size:16px}
.aw-kad-linkbar a{display:inline-flex;align-items:center;gap:6px;min-height:44px;text-decoration:none}
.aw-kad-linkbar a:hover{text-decoration:underline}
@media (max-width:480px){.aw-kad-tajuk h1{font-size:24px}}

/* ── Kontras atas kad kaca (latar sebenar ~rgb(160-207) selepas kabur): token digelapkan HANYA dlm .lg-card ──
   #475569 -> #334155, #9a3412 -> #7c2d12, #991b1b -> #7f1d1d. Pautan kad ikut --aw-teks-role (lalai --role-dark). */
.aw-lg .lg-card{--aw-teks-role:var(--role-dark)}
.aw-lg .lg-page[data-role="kakitangan"] .lg-card{--aw-teks-role:#7c2d12}
.aw-lg .lg-card .aw-langkah li{color:#334155}
.aw-lg .lg-card .aw-langkah li.siap{color:var(--aw-teks-role)}
.aw-lg .lg-card .aw-lnkbtn{color:#7c2d12}
.aw-lg .lg-card .aw-lnkbtn:disabled{color:#334155}
.aw-lg .lg-card .aw-ds-linkbar a+a{color:#334155}
.aw-lg .lg-card .aw-ds-otp small{color:#334155}
.aw-lg .lg-card .aw-semak{color:#334155}
.aw-lg .lg-card .aw-err,.aw-lg .lg-card .aw-lbl-w{color:#7f1d1d}

/* ── Cetak ── */
@media print{
  .aw-hero-foto,.aw-hero-garis,.aw-top,.aw-toc,.aw-foot,.aw-bar,.aw-skip,.aw-faq-chips,.aw-cari,.aw-faq-n,.aw-doktab,.aw-edit-baris{display:none!important}
  body.aw-body{background:#fff}
  .aw-hero{padding:0;color:#000}
  .aw-hero::before,.aw-hero::after{display:none}
  .aw-hero-isi{padding:0}
  .aw-hero-isi h1,.aw-eyebrow,.aw-sub,.aw-kemaskini,.aw-kemaskini b{color:#000}
  .aw-main{padding:0}
  .aw-sheet{margin:0;padding:0;box-shadow:none;border-radius:0}
  .aw-legal{display:block}
  article.aw-prose{max-width:none}
  .aw-prose a[href^="http"]::after{content:" (" attr(href) ")"}
  /* Cetak FAQ penuh tanpa mengira tapisan/lipatan (elak jawapan yatim tanpa soalan) */
  .aw-faq .faq-q[hidden],.aw-faq .faq-a[hidden],.aw-faq .content-card[hidden]{display:block!important}
  .aw-sheet::after{content:attr(data-url);display:block;margin-top:24px;font-size:12px;color:#334155;overflow-wrap:anywhere}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Bahagian bertajuk dlm borang awam panjang (pendaftaran anak) */
.aw-seksyen-awam{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:15px;line-height:22px;font-weight:700;color:var(--pri-d)}

/* ── Dialog pengesahan awam (G9-207 Batal pendaftaran) ── */
.aw-dlg{border:0;border-radius:18px;padding:24px;max-width:min(420px,calc(100vw - 32px));box-shadow:0 24px 60px rgba(15,23,42,.35);color:#0f172a;background:#fff}
.aw-dlg[hidden]{display:none}
.aw-dlg::backdrop{background:rgba(15,23,42,.55)}
.aw-dlg h2{margin:0 0 8px;font-size:20px}
.aw-dlg p{margin:0 0 20px;font-size:15px;line-height:1.5;color:#334155}
.aw-dlg-aksi{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.aw-btn-sek{background:#fff;color:#9a3412;border:2px solid #9a3412;box-shadow:none}
.aw-btn-sek:hover{background:#fff7ed}
.aw-btn-bahaya{background:#b91c1c;box-shadow:none}
.aw-btn-bahaya:hover{background:#991b1b}