/* =====================================================================
   Portal Alumni ANTERA — Sistem reka bentuk v3
   Biru diraja + emas cerah + teal; Outfit (tajuk) + Plus Jakarta Sans (teks)
   ===================================================================== */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../vendor/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face { font-family: "Inter"; src: url("../vendor/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../vendor/fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../vendor/fonts/fraunces-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../vendor/fonts/lora-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 400 700; font-display: swap; }
@font-face {
  font-family: "Outfit";
  src: url("../vendor/fonts/outfit-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --dakwat: #0b2559;      /* biru tua diraja: permukaan gelap, teks tajuk */
  --dakwat-2: #12337a;
  --dakwat-3: #1d4fd8;    /* biru diraja: tindakan utama, pautan */
  --langit: #38bdf8;      /* aksen sejuk */
  --emas: #f5b301;        /* aksen hangat: CTA, sorotan */
  --emas-soft: #fff4d1;
  --emas-ink: #3d2c00;
  --pucuk: #0d9488;
  --pucuk-ink: color-mix(in srgb, var(--pucuk) 74%, #000);
  --link: var(--dakwat-3);  /* teks pautan/aksen di atas permukaan */
  --ink: var(--dakwat);     /* teks tajuk berjenama di atas permukaan */
  --primary-rgb: 29,79,216; --dark-rgb: 11,37,89; --accent-rgb: 245,179,1; --sky-rgb: 56,189,248; --secondary-rgb: 13,148,136; --overlay-rgb: 6,18,46;
  --primary-hover: #1741b5; --emas-hover: #ffc21a; --emas-text: #9a6b00; --footer-bg: #061433; --hero-overlay: .7;
  --card-from: #0b2559; --card-mid: #1741b5; --card-to: #1d4fd8; --btn-radius: 999px;
  --merah: #c2261b;
  --amber: #b45309;
  --bg: #f6f8fc;
  --surface: #ffffff;
  --surface-2: #eef3fb;
  --tint: #eaf1ff;
  --text: #16213a;
  --muted: #5a6680;
  --line: #e2e8f2;
  --radius-lg: 22px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(var(--dark-rgb), .04), 0 8px 24px rgba(var(--dark-rgb), .07);
  --shadow-hover: 0 2px 4px rgba(var(--dark-rgb), .05), 0 18px 40px rgba(var(--dark-rgb), .13);
  --shadow-lg: 0 30px 70px rgba(var(--overlay-rgb), .32);
  --serif: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;   /* nama kekal untuk serasi; kini fon paparan sans */
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --bs-body-font-family: var(--sans);
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--line);
  --bs-primary: var(--dakwat-3);
  --bs-primary-rgb: 29, 79, 216;
  --bs-link-color: var(--dakwat-3);
  --bs-link-color-rgb: 29, 79, 216;
  --bs-link-hover-color: var(--dakwat);
}
@media (prefers-color-scheme: dark) { html.auto-dark {
    --bg: #070f22; --surface: #0e1a33; --surface-2: #15244a; --tint: #15244a; --text: #e8eefb; --muted: #9aa8c4; --line: #22335c;
    --emas-soft: #3a2f0a; --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-border-color: var(--line);
    --bs-secondary-color: var(--muted); --bs-tertiary-bg: var(--surface-2); --bs-link-color: #8fb4ff; --bs-link-hover-color: #c3d6ff;
    --link: color-mix(in srgb, var(--dakwat-3) 40%, #fff); --ink: var(--text); --bs-link-color-rgb: 143,180,255; --bs-body-color-rgb: 232,238,251;
    --bs-emphasis-color: #fff; --bs-emphasis-color-rgb: 255,255,255; --bs-secondary-color-rgb: 154,168,196; --bs-tertiary-bg-rgb: 21,36,74; --bs-body-bg-rgb: 7,15,34; --bs-secondary-bg: var(--surface-2);
    --bs-heading-color: var(--text); --bs-border-color-translucent: rgba(255,255,255,.12); color-scheme: dark;
  } html.auto-dark .form-control,html.auto-dark .form-select { background-color: #0a1530; color: var(--text); border-color: var(--line); } html.auto-dark .form-control::placeholder { color: #6c7a96; } html.auto-dark .table { --bs-table-color: var(--text); --bs-table-bg: transparent; --bs-table-hover-bg: rgba(255,255,255,.03); } html.auto-dark .btn-outline-primary { --bs-btn-color: #c3d6ff; --bs-btn-border-color: rgba(var(--primary-rgb),.6); --bs-btn-hover-bg: var(--dakwat-3); } html.auto-dark .btn-light { --bs-btn-bg: var(--surface-2); --bs-btn-color: var(--text); --bs-btn-border-color: var(--line); } html.auto-dark .input-group-text { background: var(--surface-2); color: var(--muted); border-color: var(--line); } html.auto-dark .dropdown-menu { --bs-dropdown-bg: var(--surface); --bs-dropdown-color: var(--text); --bs-dropdown-link-color: var(--text); --bs-dropdown-border-color: var(--line); } html.auto-dark .modal-content { background: var(--surface); }
}

/* ---------- Asas ---------- */
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, .display-serif { font-family: var(--serif); letter-spacing: -.02em; }
h1, h2 { font-weight: 700; }
h3, h4, h5, h6 { font-weight: 600; }
.h-sans { font-family: var(--sans); letter-spacing: 0; }
a { text-underline-offset: 3px; }
.text-muted, .form-text { color: var(--muted) !important; }
.tabular { font-variant-numeric: tabular-nums; }
.lead-text { font-size: 1.075rem; line-height: 1.7; color: var(--muted); max-width: 62ch; }
.measure { max-width: 68ch; }
.prose { font-size: 1.05rem; line-height: 1.8; max-width: 70ch; }
.prose p { margin-bottom: 1.15em; }
.req { color: var(--merah); }
:focus-visible { outline: 3px solid var(--langit); outline-offset: 2px; }
::selection { background: var(--emas-soft); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Butang & borang ---------- */
.btn { border-radius: var(--btn-radius); font-weight: 600; padding: .62rem 1.3rem; transition: transform .15s, box-shadow .15s, background .15s; }
.btn-sm { padding: .38rem .85rem; border-radius: var(--btn-radius); }
.btn-lg { padding: .9rem 1.75rem; border-radius: var(--btn-radius); }
.btn-primary { --bs-btn-bg: var(--dakwat-3); --bs-btn-border-color: var(--dakwat-3); --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover); --bs-btn-active-bg: var(--dakwat-2); --bs-btn-disabled-bg: var(--dakwat-3); --bs-btn-disabled-border-color: var(--dakwat-3); }
.btn-outline-primary { --bs-btn-color: var(--dakwat-3); --bs-btn-border-color: var(--dakwat-3); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--dakwat-3); --bs-btn-hover-border-color: var(--dakwat-3); --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover); --bs-btn-active-color: #fff; }
.btn-primary:hover, .btn-gold:hover { box-shadow: 0 10px 22px rgba(var(--primary-rgb),.22); }
.btn-gold { background: var(--emas); color: var(--emas-ink); border: 0; }
.btn-gold:hover, .btn-gold:focus-visible { background: var(--emas-hover); color: var(--emas-ink); }
.btn-light { --bs-btn-bg: var(--surface); --bs-btn-color: var(--text); --bs-btn-border-color: var(--line); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: #cfd8e6; --bs-btn-active-bg: var(--surface-2); }
.btn-ghost-light { color: #fff; border: 1.5px solid rgba(255,255,255,.45); }
.btn-ghost-light:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
.form-control, .form-select { border-radius: 12px; padding: .66rem .9rem; min-height: 46px; border-color: var(--line); }
textarea.form-control { min-height: auto; }
.form-control:focus, .form-select:focus { border-color: var(--dakwat-3); box-shadow: 0 0 0 .22rem rgba(var(--primary-rgb), .14); }
.form-label { font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.form-check-input:checked { background-color: var(--dakwat-3); border-color: var(--dakwat-3); }
.invalid-feedback { font-size: .82rem; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Permukaan ---------- */
.card-ant { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.panel-head h2, .panel-head h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; margin: 0; letter-spacing: 0; }
.panel-body { padding: 1.25rem; }
.empty-state { text-align: center; padding: 2.75rem 1rem; color: var(--muted); }
.empty-state .ti { font-size: 2.4rem; display: block; margin-bottom: .5rem; opacity: .45; }
.empty-state p { max-width: 42ch; margin: .25rem auto 1rem; }

/* Pill status */
.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.pill-success { background: rgba(var(--secondary-rgb),.12); color: #0f766e; color: var(--pucuk-ink); }
.pill-warning { background: rgba(180,83,9,.12); color: #92400e; }
.pill-danger { background: rgba(180,35,24,.11); color: var(--merah); }
.pill-neutral { background: var(--surface-2); color: var(--muted); }
.pill-gold { background: var(--emas-soft); color: var(--emas-ink); }
@media (prefers-color-scheme: dark) { html.auto-dark .pill-success { color: #5eead4; } html.auto-dark .pill-warning { color: #fbbf24; } html.auto-dark .pill-danger { color: #fca5a5; } html.auto-dark .pill-gold { color: #f3d48a; } }

/* ---------- Motif pucuk rebung (jalur segitiga emas) ---------- */
.rebung {
  height: 18px;
  background:
    linear-gradient(135deg, transparent 50%, var(--bg) 50%) 0 0 / 18px 18px repeat-x,
    linear-gradient(225deg, transparent 50%, var(--bg) 50%) 0 0 / 18px 18px repeat-x,
    linear-gradient(var(--emas), var(--emas)) 0 0 / 100% 4px no-repeat;
  background-color: transparent;
}
.rebung-line { height: 10px; background: repeating-linear-gradient(90deg, var(--emas) 0 10px, transparent 10px 14px); opacity: .85; mask: linear-gradient(135deg, #000 50%, transparent 50%) 0 0 / 14px 10px, linear-gradient(225deg, #000 50%, transparent 50%) 0 0 / 14px 10px; }

/* ---------- Bar atas + pengepala awam ---------- */
.topbar { background: var(--dakwat); color: rgba(255,255,255,.78); font-size: .84rem; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 40px; }
.topbar a { color: rgba(255,255,255,.85); text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar .ti { color: var(--emas); margin-right: .3rem; }
.topbar .social a { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 50%; }
.topbar .social a:hover { background: rgba(255,255,255,.1); }
.topbar .social .ti { color: inherit; margin: 0; }

.site-header { position: sticky; top: 0; z-index: 1030; background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: box-shadow .25s, border-color .25s; }
.site-header.solid { box-shadow: 0 8px 30px rgba(var(--dark-rgb),.08); border-bottom-color: var(--line); }
.site-header .navbar { min-height: 76px; }
.site-header .brand { display: flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; }
.site-header .brand-name { font-family: var(--serif); font-weight: 800; font-size: 1.35rem; line-height: 1; letter-spacing: -.01em; }
.site-header .brand-sub { display: block; font-family: var(--sans); font-size: .72rem; color: var(--muted); font-weight: 500; margin-top: .25rem; }
.site-header .nav-link { color: var(--text); font-weight: 600; font-size: .95rem; padding: .55rem .85rem !important; position: relative; }
.site-header .nav-link::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .2rem; height: 2px; border-radius: 2px; background: var(--dakwat-3); transform: scaleX(0); transition: transform .2s; }
.site-header .nav-link:hover { color: var(--link); }
.site-header .nav-link:hover::after, .site-header .nav-link.active::after { transform: scaleX(1); }
.site-header .nav-link.active { color: var(--link); }
.site-header .navbar-toggler { color: var(--ink); border: 1px solid var(--line); border-radius: 12px; font-size: 1.4rem; padding: .3rem .55rem; }
.site-header .btn-login { color: var(--ink); font-weight: 600; }
.site-header .btn-login:hover { color: var(--link); }
@media (prefers-color-scheme: dark) { html.auto-dark .site-header { background: rgba(9,18,40,.94); } html.auto-dark .site-header .brand { color: #fff; } html.auto-dark .site-header .nav-link,html.auto-dark .site-header .btn-login { color: var(--text); } html.auto-dark .site-header .navbar-toggler { color: #fff; }
}
@media (max-width: 991.98px) {
  .site-header .navbar-collapse { padding: .5rem 0 1.25rem; }
  .site-header .nav-link::after { display: none; }
}
.brand-mark { width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg, var(--dakwat-3), var(--dakwat)); color: #fff; display: inline-grid; place-items: center; font-family: var(--serif); font-weight: 800; font-size: 1.05rem; flex-shrink: 0; position: relative; overflow: hidden; box-shadow: 0 6px 16px rgba(var(--primary-rgb),.28); }
.brand-mark::after { content: ""; position: absolute; inset: auto 0 0; height: 6px; background: linear-gradient(135deg, transparent 50%, var(--emas) 50%) 0 0 / 6px 6px repeat-x; }
.brand-mark.sm { width: 34px; height: 34px; font-size: .88rem; border-radius: 10px; }

/* ---------- Hero bergambar (slaid) ---------- */
.hero { position: relative; color: #fff; overflow: hidden; background: var(--dakwat); isolation: isolate; }
.hero .carousel, .hero .carousel-inner, .hero .carousel-item { height: 100%; }
.hero-slides { position: absolute; inset: 0; z-index: -2; }
.hero-slides img { width: 100%; height: 100%; object-fit: cover; }
.hero-slides .carousel-item { transition: opacity 1.2s ease; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--overlay-rgb), calc(var(--hero-overlay) + .18)) 0%, rgba(var(--overlay-rgb), var(--hero-overlay)) 48%, rgba(var(--overlay-rgb), calc(var(--hero-overlay) * .35)) 100%); }
.hero-inner { padding: 6.5rem 0 9rem; min-height: min(86vh, 760px); display: flex; align-items: center; }
.hero-kicker { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem .4rem .45rem; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); font-size: .85rem; font-weight: 600; backdrop-filter: blur(6px); }
.hero-kicker b { background: var(--emas); color: var(--emas-ink); border-radius: 999px; padding: .12rem .55rem; font-size: .75rem; }
.hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.4rem); line-height: 1.02; font-weight: 800; letter-spacing: -.035em; max-width: 13ch; margin: 1.25rem 0 1.1rem; }
.hero h1 span { color: var(--emas); }
.hero .lead-text { color: rgba(255,255,255,.82); font-size: 1.15rem; max-width: 52ch; }
.hero-proof { display: flex; align-items: center; gap: .9rem; margin-top: 2.2rem; color: rgba(255,255,255,.8); font-size: .9rem; }
.hero-proof .faces { display: flex; }
.hero-proof .faces span { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--dakwat-2); margin-left: -8px; display: grid; place-items: center; font-weight: 800; font-size: .72rem; color: var(--dakwat); letter-spacing: -.02em; }
.hero-proof .faces span:first-child { margin-left: 0; }
.hero-proof b { color: #fff; }
.hero-dots { position: absolute; left: 0; right: 0; bottom: 6.6rem; z-index: 2; }
.hero-dots .carousel-indicators { position: static; margin: 0; justify-content: flex-start; gap: .4rem; }
.hero-dots .carousel-indicators [data-bs-target] { width: 28px; height: 4px; border-radius: 4px; border: 0; margin: 0; background: #fff; opacity: .35; transition: width .3s, opacity .3s; }
.hero-dots .carousel-indicators .active { width: 48px; opacity: 1; background: var(--emas); }

/* Kad terapung dalam hero */
.hero-card-wrap { perspective: 1400px; display: flex; justify-content: center; position: relative; }
.hero-card { transform: rotateY(-14deg) rotateX(6deg) rotateZ(-3deg); animation: cardIn 1.1s cubic-bezier(.2,.8,.2,1) both .15s; width: 100%; max-width: 420px; position: relative; }
@keyframes cardIn { from { opacity: 0; transform: translateY(40px) rotateY(-30deg) rotateX(14deg) rotateZ(-8deg); } }
.hero-card .member-card { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.08); }
.hero-qr-chip { position: absolute; right: -18px; bottom: -26px; background: #fff; border-radius: 16px; padding: 10px; box-shadow: var(--shadow-lg); width: 106px; transform: rotateZ(4deg); }
.hero-qr-chip svg { display: block; width: 100%; height: auto; }
.hero-float { position: absolute; left: -26px; top: -62px; z-index: 3; background: #fff; color: var(--text); border-radius: 16px; padding: .65rem .9rem; box-shadow: var(--shadow-lg); display: flex; gap: .6rem; align-items: center; font-size: .82rem; transform: translateZ(60px) rotateZ(-3deg); }
.hero-float .ti { width: 34px; height: 34px; border-radius: 10px; background: rgba(var(--secondary-rgb),.12); color: var(--pucuk); display: grid; place-items: center; font-size: 1.2rem; }
.hero-float b { display: block; font-size: .9rem; }

/* Fakta pantas (bertindih di bawah hero) */
.facts { position: relative; z-index: 3; margin-top: -4.5rem; }
.facts .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.fact { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.35rem 1.4rem; display: flex; gap: 1rem; align-items: center; border: 1px solid var(--line); }
.fact .ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; flex-shrink: 0; }
.fact .num { font-family: var(--serif); font-size: 2rem; font-weight: 800; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fact .lbl { color: var(--muted); font-size: .88rem; margin-top: .3rem; }
@media (prefers-color-scheme: dark) { html.auto-dark .fact .num { color: #fff; } }
@media (max-width: 991.98px) { .facts .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .fact { padding: 1rem; gap: .7rem; } .fact .ico { width: 42px; height: 42px; font-size: 1.25rem; border-radius: 12px; } .fact .num { font-size: 1.55rem; } }
.tone-blue { background: var(--tint); color: var(--link); }
.tone-gold { background: var(--emas-soft); color: var(--emas-text); }
.tone-teal { background: rgba(var(--secondary-rgb),.12); color: #0f766e; color: var(--pucuk-ink); }
.tone-rose { background: rgba(225,29,72,.1); color: #be123c; }
.tone-violet { background: rgba(124,58,237,.1); color: #6d28d9; }
.tone-sky { background: rgba(var(--sky-rgb),.14); color: #0369a1; }
@media (prefers-color-scheme: dark) { html.auto-dark .tone-blue { color: #8fb4ff; } html.auto-dark .tone-gold { color: #fcd34d; } html.auto-dark .tone-teal { color: #5eead4; } html.auto-dark .tone-rose { color: #fda4af; } html.auto-dark .tone-violet { color: #c4b5fd; } html.auto-dark .tone-sky { color: #7dd3fc; } }

/* ---------- Seksyen ---------- */
.section { padding: 5rem 0; }
.section-tight { padding: 3.5rem 0; }
.section-alt { background: var(--surface); }
.section-tint { background: linear-gradient(180deg, var(--tint), var(--bg)); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.section-head.center { flex-direction: column; align-items: center; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); margin: 0; font-weight: 800; letter-spacing: -.03em; }
.section-head p { color: var(--muted); margin: .6rem 0 0; max-width: 60ch; font-size: 1.04rem; }
.kicker { display: inline-flex; align-items: center; gap: .45rem; color: var(--link); font-weight: 700; font-size: .9rem; margin-bottom: .6rem; }
.kicker::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--emas); }
@media (prefers-color-scheme: dark) { html.auto-dark .kicker { color: #8fb4ff; } }
.link-more { font-weight: 700; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; }
.link-more .ti { transition: transform .15s; }
.link-more:hover .ti { transform: translateX(3px); }

/* Tentang: kolaj imej */
.collage { position: relative; padding: 0 3rem 3rem 0; }
.collage .big { border-radius: 28px; overflow: hidden; aspect-ratio: 5 / 6; position: relative; box-shadow: var(--shadow); }
.collage .big img, .collage .small img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collage .small { position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; border: 8px solid var(--bg); box-shadow: var(--shadow-hover); }
.collage .art-icon { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.92); font-size: 5.5rem; }
.collage .small .art-icon { font-size: 3rem; }
.collage .badge-float { position: absolute; left: -1rem; top: 2rem; background: var(--emas); color: var(--emas-ink); border-radius: 18px; padding: 1rem 1.2rem; box-shadow: var(--shadow-hover); text-align: center; }
.collage .badge-float b { display: block; font-family: var(--serif); font-size: 2.2rem; line-height: 1; font-weight: 800; }
.collage .badge-float small { font-weight: 600; font-size: .8rem; }
@media (max-width: 575.98px) { .collage { padding: 0 1.5rem 2rem 0; } .collage .big { aspect-ratio: 4 / 3.4; } .collage .badge-float { left: .5rem; top: 1rem; padding: .7rem .9rem; } .collage .badge-float b { font-size: 1.7rem; } }
.mv-tabs { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: .3rem; gap: .2rem; margin: 1.5rem 0 1rem; }
.mv-tabs button { border: 0; background: transparent; border-radius: 999px; padding: .5rem 1.2rem; font-weight: 600; color: var(--muted); }
.mv-tabs button.active { background: var(--surface); color: var(--link); box-shadow: var(--shadow); }
.mv-pane { display: none; } .mv-pane.active { display: block; animation: fadeUp .25s ease; }
.checks { list-style: none; padding: 0; margin: 1.25rem 0 1.75rem; display: grid; gap: .6rem; }
.checks li { display: flex; gap: .6rem; align-items: start; }
.checks .ti { color: var(--pucuk); font-size: 1.2rem; margin-top: .1rem; }

/* Kad perkhidmatan */
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.9rem 1.7rem; height: 100%; transition: transform .2s, box-shadow .2s, border-color .2s; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: transparent; color: inherit; }
.feature .ico { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; font-size: 1.75rem; margin-bottom: 1.25rem; }
.feature h3 { font-size: 1.2rem; font-weight: 700; margin: 0 0 .5rem; }
.feature p { color: var(--muted); margin: 0 0 1rem; font-size: .95rem; }
.feature .more { margin-top: auto; font-weight: 700; color: var(--link); font-size: .9rem; display: inline-flex; gap: .3rem; align-items: center; }

/* Pameran kad digital */
.card-showcase { background: var(--dakwat); color: #fff; border-radius: 32px; padding: clamp(2rem, 5vw, 4rem); position: relative; overflow: hidden; isolation: isolate; }
.card-showcase::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px 400px at 90% 10%, rgba(var(--sky-rgb),.28), transparent 60%), radial-gradient(500px 400px at 0% 100%, rgba(var(--accent-rgb),.18), transparent 60%); }
.card-showcase h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 800; letter-spacing: -.03em; }
.card-showcase p { color: rgba(255,255,255,.78); }
.card-showcase .checks .ti { color: var(--emas); }
.card-showcase .kicker { color: var(--langit); }
.card-stack { position: relative; max-width: 440px; margin: 0 auto; padding: 2rem 0 3rem; }
.card-stack .back { position: absolute; inset: 0 auto auto 8%; width: 86%; transform: rotate(-8deg) translateY(10px); opacity: .55; filter: blur(.3px); }

/* Chapter bergambar */
.campus-card { display: block; position: relative; background: linear-gradient(135deg, var(--dakwat), var(--dakwat-3, var(--dakwat))); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; color: #fff; text-decoration: none; isolation: isolate; box-shadow: var(--shadow); }
.campus-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s; }
.campus-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--overlay-rgb),0) 30%, rgba(var(--overlay-rgb),.85) 100%); }
.campus-card:hover img { transform: scale(1.06); }
.campus-card:hover { color: #fff; }
.campus-card .code { position: absolute; top: 1rem; left: 1rem; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: .2rem .7rem; font-size: .75rem; font-weight: 700; }
.campus-card .glyph { position: absolute; top: .8rem; right: 1rem; font-size: 2.2rem; opacity: .55; }
.campus-card .body { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.1rem; display: flex; justify-content: space-between; align-items: end; gap: .5rem; }
.campus-card h3 { font-size: 1.35rem; font-weight: 700; margin: 0; }
.campus-card .state { font-size: .86rem; opacity: .8; }
.campus-card .members { background: #fff; color: var(--dakwat); border-radius: 999px; padding: .25rem .7rem; font-size: .8rem; font-weight: 700; white-space: nowrap; }
/* Kad chapter ringkas (halaman lain) */
.chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; }

/* Kad acara bergambar */
.event-card { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
.event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); color: inherit; }
.event-card .cover { aspect-ratio: 16 / 10; position: relative; overflow: hidden; background: var(--surface-2); }
.event-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.event-card .date { position: absolute; top: 1rem; left: 1rem; background: #fff; color: var(--dakwat); border-radius: 14px; text-align: center; padding: .45rem .7rem; line-height: 1; box-shadow: var(--shadow); min-width: 58px; }
.event-card .date b { display: block; font-family: var(--serif); font-size: 1.6rem; font-weight: 800; }
.event-card .date small { font-size: .74rem; font-weight: 700; color: var(--dakwat-3); }
.event-card .fee { position: absolute; top: 1rem; right: 1rem; }
.event-card .body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.event-card h3 { font-size: 1.15rem; font-weight: 700; margin: 0; line-height: 1.35; }
.event-card .event-meta { margin-top: auto; }

/* Acara: senarai dengan blok tarikh (halaman senarai & portal) */
.event-row { display: grid; grid-template-columns: 76px 1fr auto; gap: 1.1rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.event-row:last-child { border-bottom: 0; }
.event-row:hover h3 { color: var(--link); }
.date-block { width: 76px; text-align: center; border-radius: 16px; background: linear-gradient(160deg, var(--dakwat-3), var(--dakwat)); color: #fff; padding: .6rem 0 .55rem; line-height: 1; }
.date-block .d { font-family: var(--serif); font-size: 1.9rem; font-weight: 800; }
.date-block .m { font-size: .78rem; margin-top: .3rem; color: var(--emas); font-weight: 700; }
.event-row h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; margin: 0 0 .25rem; letter-spacing: 0; }
.event-meta { color: var(--muted); font-size: .88rem; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.event-meta .ti { margin-right: .2rem; }
@media (max-width: 575.98px) { .event-row { grid-template-columns: 62px 1fr; } .event-row .event-cta { grid-column: 2; } .date-block { width: 62px; } .date-block .d { font-size: 1.5rem; } }

/* Kad kandungan dengan imej */
.tile { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
.tile:hover { color: inherit; transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.tile:hover .tile-title { color: var(--link); }
.tile-cover { aspect-ratio: 16 / 10; background: var(--surface-2); position: relative; overflow: hidden; }
.tile-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.tile:hover .tile-cover img { transform: scale(1.05); }
.tile-body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.tile-kicker { font-size: .82rem; color: var(--muted); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.tile-title { font-family: var(--serif); font-size: 1.22rem; line-height: 1.3; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.tile-text { color: var(--muted); font-size: .93rem; margin: 0; }
.tile-more { margin-top: auto; padding-top: .4rem; font-weight: 700; font-size: .88rem; color: var(--link); }
/* Sampul ganti tanpa foto: seni latar + ikon */
.cover-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.92); font-size: 2.8rem;
  background: radial-gradient(70% 90% at 15% 100%, rgba(var(--primary-rgb),.85), transparent 70%), radial-gradient(50% 60% at 90% 10%, rgba(var(--sky-rgb),.45), transparent 70%), linear-gradient(135deg, var(--dakwat), var(--dakwat-2)); }
.cover-fallback.v2 { background: radial-gradient(70% 90% at 85% 20%, rgba(var(--secondary-rgb),.8), transparent 70%), radial-gradient(60% 70% at 10% 100%, rgba(var(--primary-rgb),.6), transparent 70%), linear-gradient(135deg, var(--dakwat), var(--dakwat-2)); }
.cover-fallback.v3 { background: radial-gradient(60% 80% at 85% 85%, rgba(var(--accent-rgb),.55), transparent 70%), radial-gradient(70% 80% at 15% 15%, rgba(var(--primary-rgb),.7), transparent 70%), linear-gradient(135deg, var(--dakwat), var(--dakwat-2)); }

/* Testimoni */
.quote-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; height: 100%; display: flex; flex-direction: column; position: relative; box-shadow: var(--shadow); }
.quote-card blockquote { font-size: 1.05rem; line-height: 1.65; margin: 0 0 1.5rem; flex: 1; color: var(--text); }
.quote-card .qmark { width: 46px; height: 46px; border-radius: 14px; background: var(--emas); color: var(--emas-ink); display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 1.1rem; }
.quote-card .who { display: flex; align-items: center; gap: .8rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.quote-card .who small { color: var(--muted); display: block; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--tint); color: var(--link); display: inline-grid; place-items: center; font-weight: 700; flex-shrink: 0; overflow: hidden; font-size: .95rem; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 96px; height: 96px; font-size: 1.8rem; font-family: var(--serif); }
.avatar.md { width: 56px; height: 56px; font-size: 1.1rem; }

/* Kemajuan kempen */
.progress-ant { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.progress-ant span { display: block; height: 100%; background: linear-gradient(90deg, var(--dakwat-3), var(--langit)); border-radius: 999px; }
.money-lg { font-family: var(--serif); font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }

/* CTA bergambar */
.cta-band { background: var(--dakwat) center / cover no-repeat; color: #fff; border-radius: 32px; padding: clamp(2rem, 5vw, 3.75rem); position: relative; overflow: hidden; }
.cta-band h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); max-width: 20ch; font-weight: 800; letter-spacing: -.03em; }
.cta-band p { color: rgba(255,255,255,.8); max-width: 52ch; }

/* Pengepala halaman dalaman (bergambar) */
.page-hero { background: var(--dakwat) center / cover no-repeat; color: #fff; padding: 4.5rem 0 4rem; position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--overlay-rgb),.6), rgba(var(--overlay-rgb),.15)); }
.page-hero h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); margin: .6rem 0 .5rem; max-width: 24ch; font-weight: 800; letter-spacing: -.03em; }
.page-hero p { color: rgba(255,255,255,.8); max-width: 60ch; margin: 0; font-size: 1.05rem; }
.page-hero .crumbs { display: inline-flex; flex-wrap: wrap; gap: .35rem; font-size: .85rem; color: rgba(255,255,255,.7); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: .3rem .9rem; backdrop-filter: blur(6px); }
.page-hero .crumbs a { color: #fff; text-decoration: none; }
.page-hero .crumbs a:hover { text-decoration: underline; }

/* Penapis */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .95rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; font-size: .88rem; font-weight: 600; }
.chip:hover { border-color: var(--dakwat-3); color: var(--link); }
.chip.active { background: var(--dakwat-3); border-color: var(--dakwat-3); color: #fff; }

/* Paginasi */
.pager { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-top: 2.5rem; }
.pager-item { min-width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--text); font-weight: 600; padding: 0 .6rem; }
.pager-item:hover { border-color: var(--dakwat-3); color: var(--link); }
.pager-item.active { background: var(--dakwat-3); color: #fff; border-color: var(--dakwat-3); }
.pager-gap { padding: 0 .3rem; align-self: center; color: var(--muted); }

/* Senarai jawatan ringkas */
.job-mini { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; min-width: 0; }
.job-mini:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); color: inherit; }
.job-mini .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; }
.min-w-0 { min-width: 0; }
@media (min-width: 768px) { .tile.flex-md-row .campaign-cover { width: 40%; aspect-ratio: auto; min-height: 220px; flex-shrink: 0; } }
/* Galeri imej admin */
.img-slot { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface-2); }
.img-slot img { width: 100%; height: 100%; object-fit: cover; }
.img-slot .pill { position: absolute; top: .5rem; left: .5rem; }

/* Footer */
.site-footer { background: var(--footer-bg); color: rgba(255,255,255,.7); padding: 4.5rem 0 2rem; margin-top: 0; position: relative; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--dakwat-3), var(--langit), var(--emas)); }
.site-footer .brand-name { font-family: var(--serif); font-weight: 800; color: #fff; font-size: 1.35rem; }
.site-footer h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 1.1rem; letter-spacing: 0; }
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; font-size: .94rem; }
.site-footer ul .ti { color: var(--emas); }
.site-footer .social a { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.07); display: inline-grid; place-items: center; font-size: 1.15rem; }
.site-footer .social a:hover { background: var(--dakwat-3); }
.site-footer .legal { border-top: 1px solid rgba(255,255,255,.1); margin-top: 3rem; padding-top: 1.5rem; font-size: .85rem; }
.main-pad { padding-bottom: 6rem; }

/* ---------- Auth (skrin terbahagi) ---------- */
.auth-split { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.auth-aside { background: var(--dakwat) center / cover no-repeat; color: #fff; padding: 2.5rem 3rem; display: flex; flex-direction: column; position: relative; overflow: hidden; isolation: isolate; margin: 1rem; border-radius: 28px; }
.auth-aside::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--overlay-rgb),.25), rgba(var(--overlay-rgb),.75)); }
.auth-aside h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.1; max-width: 16ch; margin: 0 0 1rem; font-weight: 800; letter-spacing: -.03em; }
.auth-card-art { margin: auto 0 2.5rem; perspective: 1200px; }
.auth-card-art .member-card { margin: 0; max-width: 360px; transform: rotateY(-12deg) rotateX(5deg) rotateZ(-3deg); box-shadow: var(--shadow-lg); }
.auth-card-art .mc-photo .ti { font-size: 1.6rem; }
.auth-points { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .75rem; }
.auth-points li { display: flex; gap: .7rem; align-items: start; color: rgba(255,255,255,.88); }
.auth-points .ti { color: var(--emas); font-size: 1.25rem; }
.auth-main { display: flex; flex-direction: column; padding: 2rem 1.25rem; }
.auth-main .auth-box { width: 100%; max-width: 520px; margin: auto; }
.auth-top-mobile { display: none; }
@media (max-width: 991.98px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-top-mobile { display: flex; background: linear-gradient(135deg, var(--dakwat), var(--dakwat-3)); color: #fff; padding: .85rem 1.25rem; align-items: center; justify-content: space-between; }
  .auth-main { padding: 1.5rem 1rem 3rem; }
}
.auth-card { max-width: 560px; margin: 0 auto; }

/* ---------- Wizard ---------- */
.stepper { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.stepper .step { flex: 1; }
.stepper .bar { height: 5px; border-radius: 3px; background: var(--line); transition: background .25s; }
.stepper .step.active .bar, .stepper .step.done .bar { background: var(--emas); }
.stepper .lbl { font-size: .78rem; font-weight: 600; color: var(--muted); margin-top: .4rem; }
.stepper .step.active .lbl { color: var(--text); }
.wizard-pane { display: none; }
.wizard-pane.active { display: block; animation: fadeUp .22s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wizard-actions { position: sticky; bottom: 0; background: var(--surface); padding: 1rem 0 .25rem; margin-top: 1.25rem; border-top: 1px solid var(--line); z-index: 2; }
.pw-meter { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: .5rem; }
.pw-meter span { display: block; height: 100%; width: 0; transition: width .2s, background .2s; }
.summary-row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.summary-row span:first-child { color: var(--muted); }
.summary-row span:last-child { font-weight: 600; text-align: right; }
.pdpa-box { background: var(--emas-soft); border-radius: 10px; padding: .9rem 1rem; font-size: .88rem; }
.otp-input { font-size: 1.8rem; letter-spacing: .6em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.text-uppercase::placeholder { text-transform: none; }

/* ---------- Kad Keahlian Digital ---------- */
.member-card { position: relative; max-width: 420px; margin: 0 auto; aspect-ratio: 1.586 / 1; border-radius: 22px; overflow: hidden; color: #fff; padding: 1.25rem 1.4rem; display: flex; flex-direction: column;
  background:
    radial-gradient(420px 220px at 105% -10%, rgba(var(--accent-rgb),.55), transparent 60%),
    radial-gradient(380px 260px at -15% 115%, rgba(var(--sky-rgb),.55), transparent 60%),
    linear-gradient(135deg, var(--card-from) 0%, var(--card-mid) 60%, var(--card-to) 100%);
  box-shadow: 0 18px 40px rgba(var(--overlay-rgb),.35), inset 0 0 0 1px rgba(255,255,255,.14); }
.member-card::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: linear-gradient(135deg, transparent 50%, rgba(var(--accent-rgb),.75) 50%) 0 0 / 12px 12px repeat-x; }
.member-card::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px); pointer-events: none; }
.member-card .mc-top { display: flex; justify-content: space-between; align-items: start; position: relative; z-index: 1; }
.member-card .mc-org { font-size: .66rem; letter-spacing: .06em; opacity: .78; }
.member-card .mc-title { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
.member-card .mc-chip { width: 40px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, #ecd387, #b38a22); position: relative; }
.member-card .mc-chip::after { content: ""; position: absolute; inset: 7px 9px; border: 1px solid rgba(58,42,5,.35); border-radius: 3px; }
.member-card .mc-body { margin-top: auto; display: flex; align-items: flex-end; gap: .9rem; position: relative; z-index: 1; padding-bottom: .4rem; }
.member-card .mc-photo { width: 64px; height: 64px; border-radius: 12px; background: rgba(255,255,255,.12); display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 1.35rem; border: 2px solid rgba(var(--accent-rgb),.85); flex-shrink: 0; overflow: hidden; }
.member-card .mc-photo img { width: 100%; height: 100%; object-fit: cover; }
.member-card .mc-name { font-weight: 700; font-size: 1rem; line-height: 1.2; text-transform: uppercase; }
.member-card .mc-meta { font-size: .74rem; opacity: .82; margin-top: .15rem; }
.member-card .mc-no { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .84rem; letter-spacing: .06em; color: var(--emas); margin-top: .35rem; }
.card-page { max-width: 460px; margin: 0 auto; }
.card-tilt { perspective: 1200px; }
.card-tilt .member-card { animation: cardIn .9s cubic-bezier(.2,.8,.2,1) both; }
.qr-panel { max-width: 460px; margin: 1.25rem auto 0; text-align: center; }
.qr-sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow); text-align: center; }
.qr-sheet .ti-qrcode { color: var(--link); }
.qr-frame { display: inline-block; background: #fff; padding: 14px; border-radius: 16px; border: 1px solid var(--line); transition: opacity .3s; }
.qr-frame svg, .qr-frame img { display: block; width: 220px; height: 220px; }
.qr-ring { height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; margin: .9rem auto 0; max-width: 248px; }
.qr-ring span { display: block; height: 100%; background: linear-gradient(90deg, var(--dakwat-3), var(--langit)); transition: width 1s linear; }
.card-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.25rem; }
/* Kad mini di papan pemuka */
.dash-card { display: block; text-decoration: none; perspective: 1000px; }
.dash-card .member-card { max-width: none; transition: transform .3s; transform: rotateY(-6deg) rotateX(3deg); }
.dash-card:hover .member-card { transform: none; }
.member-card.placeholder { filter: grayscale(.85); opacity: .7; }
.verify-badge { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1rem; font-size: 2.6rem; }
.verify-ok { background: rgba(var(--secondary-rgb),.12); color: #0f766e; color: var(--pucuk-ink); }
.verify-bad { background: rgba(180,35,24,.12); color: var(--merah); }

/* Tiket acara */
.ticket { max-width: 400px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.ticket-head { background: var(--dakwat); color: #fff; padding: 1.4rem 1.5rem 1.6rem; }
.ticket-head h1 { font-size: 1.45rem; margin: .25rem 0 .4rem; }
.ticket-cut { height: 24px; position: relative; background: radial-gradient(circle at 0 50%, var(--bg) 12px, transparent 13px), radial-gradient(circle at 100% 50%, var(--bg) 12px, transparent 13px); border-top: 2px dashed var(--line); margin-top: -12px; }
.ticket-body { padding: .5rem 1.5rem 1.5rem; text-align: center; }

/* ---------- Portal (aplikasi) ---------- */
.app { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100dvh; }
.app-side { background: var(--surface); border-right: 1px solid var(--line); padding: 1.15rem .85rem; position: sticky; top: 0; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; }
.app-side .brand { display: flex; gap: .6rem; align-items: center; text-decoration: none; color: var(--text); padding: 0 .4rem 1.1rem; }
.app-side .brand b { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; }
.side-group { font-size: .74rem; font-weight: 600; color: var(--muted); padding: 1rem .75rem .35rem; }
.side-link { display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: 9px; color: var(--text); text-decoration: none; font-weight: 500; font-size: .94rem; }
.side-link .ti { font-size: 1.15rem; color: var(--muted); }
.side-link:hover { background: var(--surface-2); color: var(--text); }
.side-link.active { background: rgba(var(--dark-rgb),.07); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--emas); }
.side-link.active .ti { color: var(--ink); }
@media (prefers-color-scheme: dark) { html.auto-dark .side-link.active { background: rgba(var(--accent-rgb),.12); color: #f3d48a; } html.auto-dark .side-link.active .ti { color: #f3d48a; } }
.side-link .count { margin-left: auto; background: var(--merah); color: #fff; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .05rem .45rem; }
.app-main { min-width: 0; display: flex; flex-direction: column; }
.app-top { display: flex; align-items: center; gap: .75rem; padding: .85rem 1.75rem; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 20; }
.app-top .title { font-weight: 700; font-size: 1rem; }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; display: inline-grid; place-items: center; color: var(--text); position: relative; border: 1px solid var(--line); background: var(--surface); text-decoration: none; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn .dot { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--merah); border: 2px solid var(--surface); }
.app-content { padding: 1.75rem; flex: 1; }
.page-title { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.page-title h1 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0; }
.page-title p { color: var(--muted); margin: .3rem 0 0; }
.bottom-nav { display: none; }
@media (max-width: 991.98px) {
  .app { grid-template-columns: 1fr; }
  .app-side { position: fixed; z-index: 1045; left: 0; top: 0; width: 280px; transform: translateX(-105%); transition: transform .22s; box-shadow: var(--shadow-lg); }
  .app-side.open { transform: none; }
  .app-top { padding: .7rem 1rem; }
  .app-content { padding: 1.1rem 1rem 6rem; }
  .bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040; background: var(--surface); border-top: 1px solid var(--line); padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); }
  .bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: .1rem; font-size: .7rem; color: var(--muted); text-decoration: none; padding: .3rem 0; font-weight: 500; }
  .bottom-nav a .ti { font-size: 1.35rem; }
  .bottom-nav a.active { color: var(--ink); font-weight: 700; }
  .bottom-nav a.primary .ti { background: var(--emas); color: var(--dakwat); border-radius: 12px; width: 44px; height: 32px; display: grid; place-items: center; }
}
.side-backdrop { position: fixed; inset: 0; background: rgba(var(--overlay-rgb),.45); z-index: 1044; display: none; }
.side-backdrop.show { display: block; }

/* Kad salam portal */
.welcome { background: var(--dakwat) center / cover no-repeat; color: #fff; border-radius: var(--radius-lg); padding: 1.75rem 1.9rem; position: relative; overflow: hidden; min-height: 200px; }
.welcome h1 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin: .2rem 0 .3rem; font-weight: 800; letter-spacing: -.03em; }
.welcome p { color: rgba(255,255,255,.76); margin: 0; }

.ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--emas) calc(var(--p) * 1%), rgba(255,255,255,.15) 0); display: grid; place-items: center; flex-shrink: 0; }
.ring::before { content: ""; width: 50px; height: 50px; border-radius: 50%; background: var(--dakwat-2); grid-area: 1 / 1; }
.ring b { grid-area: 1 / 1; z-index: 1; font-size: .95rem; }
.quick { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; height: 100%; }
.quick:hover { border-color: var(--emas); color: inherit; }
.quick .ti { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: var(--surface-2); font-size: 1.3rem; color: var(--ink); flex-shrink: 0; }
@media (prefers-color-scheme: dark) { html.auto-dark .quick .ti { color: #f3d48a; } }
.quick b { display: block; font-size: .95rem; }
.quick small { color: var(--muted); }
@media (max-width: 575.98px) { .quick { flex-direction: column; align-items: flex-start; gap: .6rem; padding: .9rem; } .quick small { display: block; line-height: 1.35; } }
.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain > li { padding: .85rem 0; border-bottom: 1px solid var(--line); }
.list-plain > li:last-child { border-bottom: 0; }
.notif-item { display: flex; gap: .75rem; text-decoration: none; color: inherit; padding: .85rem 1.25rem; border-bottom: 1px solid var(--line); }
.notif-item:hover { background: var(--surface-2); color: inherit; }
.notif-item.unread { background: rgba(var(--accent-rgb),.07); }
.notif-item .ico { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; flex-shrink: 0; color: var(--link); }
.person { display: flex; gap: .85rem; align-items: start; padding: 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); height: 100%; text-decoration: none; color: inherit; }
.person:hover { border-color: #c6d0db; color: inherit; }
.person h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; margin: 0; letter-spacing: 0; }
.person .sub { font-size: .85rem; color: var(--muted); }
.score { font-weight: 800; font-family: var(--serif); font-size: 1.3rem; color: var(--pucuk); line-height: 1; }
.thread { display: grid; gap: .9rem; }
.msg { max-width: 82%; padding: .85rem 1rem; border-radius: 14px; background: var(--surface-2); }
.msg.mine { margin-left: auto; background: rgba(var(--dark-rgb),.08); }
.msg.internal { background: var(--emas-soft); border: 1px dashed var(--emas); }
.msg .meta { font-size: .78rem; color: var(--muted); margin-bottom: .3rem; }
.dl { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: .55rem 1rem; margin: 0; }
.dl dt { color: var(--muted); font-weight: 500; }
.dl > * { min-width: 0; }
.dl dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 420px) { .dl { grid-template-columns: 1fr; gap: .1rem; } .dl dd { margin-bottom: .55rem; } }

/* ---------- Admin ---------- */
.admin-shell { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100dvh; }
.admin-side { background: var(--dakwat); color: #fff; padding: 1.15rem .8rem; position: sticky; top: 0; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; }
.admin-side .side-group { color: rgba(255,255,255,.62); }
.admin-side .nav-link { color: rgba(255,255,255,.78); border-radius: 9px; padding: .52rem .75rem; display: flex; align-items: center; gap: .6rem; font-weight: 500; font-size: .93rem; }
.admin-side .nav-link .ti { font-size: 1.12rem; opacity: .8; }
.admin-side .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.admin-side .nav-link.active { background: rgba(var(--accent-rgb),.18); color: #fff; box-shadow: inset 3px 0 0 var(--emas); }
.admin-side .nav-link .count { margin-left: auto; background: var(--emas); color: var(--dakwat); font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .05rem .45rem; }
.admin-main { min-width: 0; padding: 1.75rem; }
@media (max-width: 991.98px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { position: fixed; z-index: 1045; left: 0; top: 0; width: 270px; transform: translateX(-105%); transition: transform .22s; }
  .admin-side.open { transform: none; }
  .admin-main { padding: 1rem; }
}
.kpi { padding: 1.15rem 1.25rem; }
.kpi .kpi-label { font-size: .84rem; color: var(--muted); font-weight: 600; }
.kpi .kpi-value { font-family: var(--serif); font-size: 2rem; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi .kpi-sub { font-size: .8rem; color: var(--muted); }
.queue { display: flex; align-items: center; gap: .8rem; padding: .8rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.queue:last-child { border-bottom: 0; }
.queue .ti { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--link); flex-shrink: 0; }
.queue b { margin-left: auto; font-family: var(--serif); font-size: 1.25rem; }
.queue.zero b { color: var(--muted); font-weight: 400; }
.hbar { display: grid; grid-template-columns: minmax(110px, 36%) 1fr auto; align-items: center; gap: .75rem; padding: .35rem 0; font-size: .88rem; }
.hbar .track { height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.hbar .fill { height: 100%; background: var(--dakwat-3); border-radius: 5px; }
.vbars { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 1rem; }
.vbars .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.vbars .b { width: 100%; max-width: 34px; background: var(--dakwat-3); border-radius: 6px 6px 2px 2px; min-height: 2px; }
.vbars .b.now { background: var(--emas); }
.vbars .y { font-size: .7rem; color: var(--muted); margin-top: .3rem; }
.vbars .v { font-size: .7rem; font-weight: 700; margin-bottom: .2rem; }
.donut { --p: 0; width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(var(--pucuk) calc(var(--p) * 1%), var(--surface-2) 0); display: grid; place-items: center; }
.donut::before { content: ""; width: 86px; height: 86px; border-radius: 50%; background: var(--surface); grid-area: 1 / 1; }
.donut b { grid-area: 1 / 1; font-size: 1.35rem; font-weight: 800; z-index: 1; }
.table-ant { --bs-table-bg: transparent; margin: 0; }
.table-ant th { font-size: .8rem; color: var(--muted); font-weight: 600; border-bottom-width: 1px; white-space: nowrap; }
.table-ant td { vertical-align: middle; }
.table-ant tbody tr:hover { background: rgba(var(--dark-rgb),.025); }
.match-ok { color: #0f766e; color: var(--pucuk-ink); font-weight: 600; }
.match-warn { color: var(--amber); font-weight: 600; }
.sla-late { color: var(--merah); font-weight: 600; }

/* Pengimbas QR */
.scanner { position: relative; max-width: 460px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #000; aspect-ratio: 1; }
.scanner video { width: 100%; height: 100%; object-fit: cover; }
.scanner .frame { position: absolute; inset: 18%; border: 3px solid var(--emas); border-radius: 18px; box-shadow: 0 0 0 9999px rgba(0,0,0,.35); }
.scan-result { border-radius: 14px; padding: 1rem 1.2rem; margin-top: 1rem; display: none; }
.scan-result.ok { display: block; background: rgba(var(--secondary-rgb),.12); border: 1px solid var(--pucuk); }
.scan-result.warn { display: block; background: rgba(180,83,9,.1); border: 1px solid var(--amber); }
.scan-result.bad { display: block; background: rgba(180,35,24,.1); border: 1px solid var(--merah); }

/* Cetak (resit, tiket) */
@media print {
  .no-print, .site-header, .site-footer, .app-side, .app-top, .bottom-nav, .admin-side { display: none !important; }
  body { background: #fff; }
}
.flash-float { position: fixed; top: 84px; right: 16px; left: 16px; z-index: 1050; display: flex; justify-content: flex-end; pointer-events: none; }
.flash-float .alert { pointer-events: auto; max-width: 440px; box-shadow: var(--shadow-lg); animation: fadeUp .25s ease; }
.fw-800 { font-weight: 800; }
.form-select.w-auto { padding-right: 2.6rem; min-width: 11rem; }
.fact-ico { width: 56px; height: 56px; border-radius: 16px; display: inline-grid; place-items: center; font-size: 1.6rem; }
.recovery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.recovery-grid code { display: block; text-align: center; padding: .55rem; border-radius: 10px; background: var(--surface-2); color: var(--text); font-size: .95rem; letter-spacing: .04em; }

/* =====================================================================
   Varian susun atur (dikawal Admin > Penampilan melalui kelas <body>)
   ===================================================================== */
.brand-logo { height: 44px; width: auto; max-width: 220px; object-fit: contain; display: block; }
.brand-logo.sm { height: 34px; max-width: 160px; }
.mc-logo { height: 30px; max-width: 110px; object-fit: contain; }
/* Pengepala gelap / warna utama */
.hdr-dark .site-header { background: var(--dakwat); }
.hdr-primary .site-header { background: var(--dakwat-3); }
.hdr-dark .site-header .brand, .hdr-primary .site-header .brand,
.hdr-dark .site-header .nav-link, .hdr-primary .site-header .nav-link,
.hdr-dark .site-header .btn-login, .hdr-primary .site-header .btn-login { color: #fff; }
.hdr-dark .site-header .brand-sub, .hdr-primary .site-header .brand-sub { color: rgba(255,255,255,.7); }
.hdr-dark .site-header .nav-link::after, .hdr-primary .site-header .nav-link::after { background: var(--emas); }
.hdr-dark .site-header .nav-link.active, .hdr-primary .site-header .nav-link.active,
.hdr-dark .site-header .nav-link:hover, .hdr-primary .site-header .nav-link:hover { color: #fff; }
.hdr-dark .site-header .navbar-toggler, .hdr-primary .site-header .navbar-toggler { color: #fff; border-color: rgba(255,255,255,.3); }
.hdr-dark .site-header .btn-primary, .hdr-primary .site-header .btn-primary { --bs-btn-bg: var(--emas); --bs-btn-border-color: var(--emas); --bs-btn-color: var(--emas-ink); --bs-btn-hover-bg: var(--emas-hover); --bs-btn-hover-border-color: var(--emas-hover); --bs-btn-hover-color: var(--emas-ink); }
.hdr-dark .site-header.solid, .hdr-primary .site-header.solid { border-bottom-color: rgba(255,255,255,.08); }
.hdr-dark .topbar { background: var(--footer-bg); }
.no-topbar .topbar { display: none !important; }
/* Hero */
.hero-plain .hero-slides, .hero-plain .hero-dots { display: none; }
.hero-plain .hero { background: radial-gradient(900px 500px at 85% 10%, rgba(var(--sky-rgb),.35), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(var(--accent-rgb),.22), transparent 60%), linear-gradient(135deg, var(--dakwat), var(--dakwat-2)); }
.hero-plain .hero::before { display: none; }
.hero-static .hero-dots { display: none; }
.hero-align-center .hero-inner { text-align: center; }
.hero-align-center .hero h1, .hero-align-center .hero .lead-text { margin-left: auto; margin-right: auto; }
.hero-align-center .hero h1 { max-width: 18ch; }
.hero-align-center .hero .d-flex.flex-wrap, .hero-align-center .hero-proof { justify-content: center; }
.hero-align-center .hero-card-col { display: none !important; }
.hero-align-center .hero-text-col { flex: 0 0 100%; max-width: 860px; margin: 0 auto; }
.hero-align-center .hero::before { background: rgba(var(--overlay-rgb), var(--hero-overlay)); }
.hero-align-center .hero-dots .carousel-indicators { justify-content: center; }
.hero-h-tall .hero-inner { min-height: calc(100vh - 116px); }
.no-topbar.hero-h-tall .hero-inner { min-height: calc(100vh - 76px); }
.hero-h-compact .hero-inner { min-height: 0; padding: 4.5rem 0 8rem; }
.hero-h-compact .hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
/* Kepadatan */
.density-compact .section { padding: 3.5rem 0; }
.density-airy .section { padding: 7rem 0; }
/* Latar halaman log masuk & tajuk dalaman boleh ditukar admin melalui gaya sebaris */
.brand-text { display: inline-flex; flex-direction: column; line-height: 1; }
.brand-text .brand-name { font-family: var(--serif); font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em; }
.brand-text .brand-sub { font-family: var(--sans); font-size: .72rem; font-weight: 500; margin-top: .25rem; opacity: .75; }
.app-side .brand .brand-name, .admin-side .brand-name { font-size: 1.12rem; }
.admin-side .brand-logo { filter: none; }
.section-band { padding-top: 2rem; }

/* ---------- Admin > Penampilan ---------- */
.appearance-tabs { gap: .35rem; flex-wrap: wrap; }
.appearance-tabs .nav-link { border-radius: var(--btn-radius); color: var(--text); background: var(--surface); border: 1px solid var(--line); font-weight: 600; display: inline-flex; gap: .4rem; align-items: center; }
.appearance-tabs .nav-link.active { background: var(--dakwat-3); border-color: var(--dakwat-3); color: #fff; }
.opt-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.opt-card { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: .55rem .9rem; cursor: pointer; font-size: .9rem; font-weight: 500; background: var(--surface); transition: border-color .15s, background .15s; }
.opt-card:hover { border-color: rgba(var(--primary-rgb),.5); }
.btn-check:checked + .opt-card { border-color: var(--dakwat-3); background: var(--tint); color: var(--link); font-weight: 700; }
.btn-check:focus-visible + .opt-card { outline: 3px solid var(--langit); outline-offset: 2px; }
.color-field { display: flex; gap: .5rem; align-items: center; }
.color-field input[type=color] { width: 52px; height: 46px; border: 1px solid var(--line); border-radius: 12px; padding: 4px; background: var(--surface); cursor: pointer; flex-shrink: 0; }
.color-field .form-control { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: lowercase; }
.color-field.is-invalid .form-control { border-color: var(--merah); }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.preset { display: flex; flex-direction: column; gap: .45rem; align-items: flex-start; border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); padding: .7rem; font-size: .85rem; font-weight: 600; color: var(--text); text-align: left; }
.preset:hover, .preset.active { border-color: var(--dakwat-3); }
.preset .sw { display: flex; width: 100%; height: 26px; border-radius: 8px; overflow: hidden; }
.preset .sw i { flex: 1; }
.logo-stage { height: 96px; border-radius: 14px; border: 1px dashed var(--line); background: #fff; display: grid; place-items: center; padding: 1rem; }
.logo-stage.dark { background: var(--dakwat); border-color: transparent; }
.logo-stage img { max-height: 56px; max-width: 100%; object-fit: contain; }
.fav-preview { display: grid; gap: .6rem; }
.fav-tab { display: flex; align-items: center; gap: .5rem; background: var(--surface-2); border-radius: 10px 10px 0 0; padding: .45rem .8rem; font-size: .8rem; max-width: 240px; }
.fav-tab img { width: 16px; height: 16px; object-fit: cover; }
.fav-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-app { display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 76px; }
.fav-app img { width: 60px; height: 60px; border-radius: 15px; object-fit: cover; box-shadow: var(--shadow); }
.section-list { list-style: none; margin: 0; padding: 0; }
.section-row { padding: .75rem 1.25rem; border-bottom: 1px solid var(--line); transition: background .4s; }
.section-row:last-child { border-bottom: 0; }
.section-row.moved { background: var(--tint); }
.section-row .btn-group-vertical .btn { line-height: 1; }
.svc-row { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 0; border-bottom: 1px dashed var(--line); }
.svc-row:last-child { border-bottom: 0; }
.svc-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0; }
.code-area { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; line-height: 1.5; }
.preview-sticky { position: sticky; top: 1rem; }
.theme-preview { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--bg); font-family: var(--sans); box-shadow: var(--shadow); }
.theme-preview h1, .theme-preview .tp-title, .theme-preview .num { font-family: var(--serif); }
.tp-header { display: flex; justify-content: space-between; align-items: center; padding: .6rem .8rem; background: #fff; border-bottom: 1px solid var(--line); }
.tp-header .brand-name { font-size: 1rem; color: var(--ink); }
.tp-header .brand-sub { display: none; }
.tp-header .brand-logo { height: 30px; }
.tp-hero { padding: 1.4rem 1rem; color: #fff; background: radial-gradient(300px 160px at 90% 0%, rgba(var(--sky-rgb),.4), transparent 60%), linear-gradient(135deg, var(--dakwat), var(--dakwat-2)); }
.tp-kicker { font-size: .7rem; font-weight: 700; color: var(--emas); }
.tp-title { font-size: 1.25rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; margin-top: .3rem; }
.tp-body { padding: 1rem; }
.tp-card { max-width: none; padding: .8rem .9rem; border-radius: calc(var(--radius-lg) * .7); }
.tp-card .mc-org { font-size: .5rem; }
.tp-card .mc-title { font-size: .85rem; }
.tp-card .mc-chip { width: 28px; height: 20px; }
.tp-card .mc-logo { height: 20px; }
.save-bar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; align-items: center; gap: 1rem; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-top: 1px solid var(--line); padding: .8rem 0; margin-top: 1.5rem; }
@media (prefers-color-scheme: dark) { html.auto-dark .save-bar { background: rgba(14,26,51,.92); } html.auto-dark .tp-header { background: var(--surface); } html.auto-dark .logo-stage:not(.dark) { background: #fff; } }

.site-header .btn { white-space: nowrap; }
@media (max-width: 1199.98px) { .site-header .brand-sub { display: none; } .site-header .nav-link { padding: .55rem .6rem !important; } }
/* Foto potongan (latar lutsinar) pada kad ahli */
.member-card .mc-photo.cutout { background: radial-gradient(120% 90% at 50% 15%, rgba(255,255,255,.55), rgba(255,255,255,.12) 70%); align-items: end; }
.member-card .mc-photo.cutout img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.member-card.sample .mc-photo { width: 76px; height: 76px; }
.hero-card .member-card.sample .mc-photo, .card-stack .member-card.sample .mc-photo { width: 84px; height: 84px; }
.member-card .mc-body > .min-w-0 { flex: 1; min-width: 0; }
.member-card .mc-meta { overflow-wrap: anywhere; }
.hero-card .member-card .mc-body { padding-right: 64px; }

/* ---------- v3.1.3: teks panjang & kontras ---------- */
.panel, .tile, .person, .event-card, .job-mini, .notif-item, .quick, .fact, .feature { min-width: 0; overflow-wrap: anywhere; }
.panel .table td, .panel .table th { overflow-wrap: normal; }
code { color: inherit; }
.bg-body-tertiary { color: var(--bs-body-color); }
@media (prefers-color-scheme: dark) { html.auto-dark { --pucuk-ink: color-mix(in srgb, var(--pucuk) 55%, #fff); } html.auto-dark .pill-warning { color: #fbbf24; } }
.btn-outline-danger { --bs-btn-color: #b02a37; --bs-btn-border-color: #b02a37; }
@media (prefers-color-scheme: dark) { html.auto-dark .btn-outline-danger { --bs-btn-color: #f1aeb5; --bs-btn-border-color: #f1aeb5; } }
.pill-solid { background: #fff; }
.pill-success.pill-solid { color: #0f766e; }
@media (prefers-color-scheme: dark) { html.auto-dark { --bs-link-hover-color-rgb: 195,214,255; } html.auto-dark .pill-success.pill-solid { color: #0f766e; } }
/* Pratonton tema sentiasa mod cerah (menunjukkan rupa laman sebenar) */
@media (prefers-color-scheme: dark) { html.auto-dark .theme-preview { --text: #16213a; --muted: #5a6680; --line: #e2e8f2; --surface: #fff; --link: var(--dakwat-3); --ink: var(--dakwat); --bs-body-color: #16213a; color: var(--text); color-scheme: light; }
  html.auto-dark .theme-preview .tp-header { background: #fff; } html.auto-dark .theme-preview .btn-outline-primary { --bs-btn-color: var(--dakwat-3); --bs-btn-border-color: var(--dakwat-3); }
  html.auto-dark .theme-preview .pill-gold { color: var(--emas-text); } html.auto-dark .theme-preview .pill-success { color: #0f766e; } }
/* Warna "subtle" Bootstrap untuk mod gelap (amaran, lencana, teks status) */
@media (prefers-color-scheme: dark) { html.auto-dark {
    --bs-primary-text-emphasis: #9ec5fe; --bs-success-text-emphasis: #75b798; --bs-danger-text-emphasis: #ea868f; --bs-warning-text-emphasis: #ffda6a; --bs-info-text-emphasis: #6edff6; --bs-light-text-emphasis: #e8eefb; --bs-dark-text-emphasis: #e8eefb; --bs-secondary-text-emphasis: #c4cbd8;
    --bs-primary-bg-subtle: #0b1d45; --bs-success-bg-subtle: #062a1c; --bs-danger-bg-subtle: #2c0b0e; --bs-warning-bg-subtle: #332701; --bs-info-bg-subtle: #032830; --bs-light-bg-subtle: #15244a; --bs-dark-bg-subtle: #0a1530; --bs-secondary-bg-subtle: #15244a;
    --bs-primary-border-subtle: #1e3a8a; --bs-success-border-subtle: #0f5132; --bs-danger-border-subtle: #842029; --bs-warning-border-subtle: #997404; --bs-info-border-subtle: #087990; --bs-light-border-subtle: #22335c; --bs-dark-border-subtle: #22335c; --bs-secondary-border-subtle: #22335c; }
  html.auto-dark .text-danger { color: #f1aeb5 !important; } html.auto-dark .text-success { color: #75b798 !important; } html.auto-dark .text-warning { color: #ffda6a !important; } html.auto-dark .text-primary { color: var(--link) !important; }
  html.auto-dark .bg-white, html.auto-dark .bg-light { background-color: var(--surface-2) !important; color: var(--text); } html.auto-dark .text-dark { color: var(--text) !important; } html.auto-dark .border { border-color: var(--line) !important; } }
@media (prefers-color-scheme: dark) { html.auto-dark .logo-stage:not(.dark) .text-muted { color: #5a6680 !important; }
  html.auto-dark .theme-preview .fact .num { color: var(--dakwat); } html.auto-dark .theme-preview .pill-gold { color: var(--emas-ink); } html.auto-dark .theme-preview .pill-success { color: #0b5e57; } }
/* v3.2: kumpulan institusi (KPM / KM) */
.campus-group-head { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; }
.campus-group-head h3 { font-size: 1.15rem; margin: 0; }
.inst-tag { display: inline-flex; align-items: center; padding: .05rem .45rem; border-radius: 6px; font-size: .7rem; font-weight: 700; letter-spacing: .02em; background: var(--surface-2); color: var(--muted); vertical-align: middle; }
.inst-tag.km { background: rgba(var(--accent-rgb),.16); color: var(--emas-ink); }
@media (prefers-color-scheme: dark) { html.auto-dark .inst-tag.km { color: #f3d48a; } }
/* Admin › Kampus & program */
.campus-admin { border-top: 1px solid var(--line); }
.campus-admin:first-child { border-top: 0; }
.campus-admin > summary { display: flex; align-items: center; gap: .85rem; padding: .85rem 1.25rem; cursor: pointer; list-style: none; }
.campus-admin > summary::-webkit-details-marker { display: none; }
.campus-admin > summary:hover { background: var(--surface-2); }
.campus-admin > summary:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.campus-admin .chev { color: var(--muted); transition: transform .2s; }
.campus-admin[open] .chev { transform: rotate(180deg); }
.campus-admin[open] > summary { background: var(--surface-2); }
.campus-admin-body { padding: 1.1rem 1.25rem 1.4rem; border-top: 1px dashed var(--line); }
.code-chip { flex-shrink: 0; min-width: 64px; text-align: center; font-weight: 700; font-size: .78rem; letter-spacing: .03em; padding: .3rem .5rem; border-radius: 8px; background: var(--tint); color: var(--link); }
.prog-checks { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .75rem 1rem .5rem; margin-top: .75rem; }
.prog-checks legend { float: none; width: auto; font-size: .82rem; font-weight: 700; color: var(--muted); padding: 0 .35rem; margin: 0; }
.prog-checks .form-check-label { font-size: .88rem; }
.prog-other { margin-top: .75rem; } .prog-other > summary { cursor: pointer; font-size: .85rem; color: var(--link); font-weight: 600; }
@media (max-width: 575.98px) { .campus-card { aspect-ratio: 16 / 9; } }