/* Adaptasi nama token antarmuka lama ke sumber tunggal brand guideline. */
:root {
  color-scheme: light;
  --green: var(--af-color-brand-primary); --deep: var(--af-color-brand-deep);
  --ink: var(--af-color-text-primary); --ivory: var(--af-color-surface-canvas);
  --lime: var(--af-color-brand-highlight); --pink: var(--af-color-brand-accent);
  --focus: var(--af-color-focus-ring); --muted: var(--af-color-text-secondary);
  --line: var(--af-color-border-divider); --control: var(--af-color-border-control);
  --radius: var(--af-radius-control); --margin: var(--af-layout-margin);
  --max: var(--af-layout-max); --motion: var(--af-duration-control);
  --ground: var(--ivory); --surface: var(--af-color-surface-panel);
  --surface-2: var(--ivory); --faint: var(--muted);
  --iuran: var(--green); --iuran-bg: var(--af-color-success-background);
  --amber: var(--af-color-warning-foreground); --amber-bg: var(--af-color-warning-background);
  --invest: var(--af-color-info-foreground); --invest-bg: var(--af-color-info-background);
}
body { font-family: var(--af-font-ui); }
body.member {
  --ground: var(--ivory); --surface: var(--ivory);
  --iuran: var(--green); --iuran-bg: var(--af-color-success-background);
  --amber: var(--af-color-warning-foreground); --amber-bg: var(--af-color-warning-background);
  --invest: var(--af-color-info-foreground); --invest-bg: var(--af-color-info-background);
  --faint: var(--muted);
}
/* Cukil menjadi elemen editorial; angka, formulir, dan status tetap di bidang polos. */
.hero-grid { grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr); gap:32px; }
.hero-copy { padding-right:0; }
.hero-art { margin:0; align-self:center; aspect-ratio:3/2; clip-path:polygon(4% 0,100% 0,100% 100%,0 100%); }
.hero-art>img { position:static; display:block; width:100%; height:auto; object-fit:contain; }
.hero-art:after { display:none; }
.member .illustration { min-height:0; height:auto; aspect-ratio:3/2; align-self:center; }
.member .illustration img { object-fit:contain; object-position:center; clip-path:polygon(4% 0,100% 0,100% 100%,0 100%); }
.member .illustration:before { display:none; }
.welcome-art { flex:none; min-height:0; aspect-ratio:3/2; clip-path:polygon(4% 0,100% 0,100% 100%,0 100%); }
.welcome-art img { position:static; height:auto; object-fit:contain; }
.khidmah-fields { margin-top:32px; padding-top:24px; border-top:1px solid var(--line); }
.khidmah-fields h3 { font:700 20px/28px var(--af-font-display); }
.khidmah-fields ul { list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; }
.khidmah-fields li { display:flex; align-items:start; gap:12px; font-size:14px; line-height:20px; }
.khidmah-fields .field-icons { display:flex; flex:none; gap:4px; color:var(--green); }
.khidmah-fields .ikon { width:20px; height:20px; }
@media(max-width:767px) {
  .hero-grid { grid-template-columns:1fr; gap:0; }
  .hero-art { height:auto; margin:0 -16px; clip-path:none; }
  .member .illustration { width:100%; margin:0; }
  .member .illustration img { clip-path:none; }
  .khidmah-fields ul { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}
/* Audit pascaintegrasi: tautan tindakan tetap terjangkau pada semua peran. */
.member .prototype a{min-height:44px}
.member main a:not([class]){display:inline-flex;align-items:center;min-height:44px;min-width:44px;max-width:100%;overflow-wrap:anywhere}
.member .filter-form .tautan{min-width:44px;justify-content:center}
.member .service-tabs a{min-height:48px;display:inline-flex;align-items:center}
.member .scope-line a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:767px){.member .service-row>.plain{grid-column:2;justify-self:start;min-width:44px;min-height:48px}}
/* Reflow: judul panjang dan header tidak memaksa kolom melebar pada zoom teks. */
.member .header-inner{flex-wrap:wrap;gap:16px;padding-block:16px}
.member .header-inner>*{min-width:0}
.member .header-right{flex-wrap:wrap}
.member main,.member .footer{overflow-wrap:anywhere}
.member .brand{max-width:100%}
.member .brand img{max-width:100%;height:auto}
/* Setelah header membungkus, dropdown akun tetap di dalam tepi layar. */
@media(max-width:767px){
 .member .header{position:relative}
 .member .header .account-menu{position:static}
 .member .header .account-menu nav{right:16px;top:100%;max-width:calc(100vw - 32px)}
}
/* Status dan galat operasional memakai skala keterangan serta token semantik. */
.member .status,.member .pil{font:600 14px/20px Source,system-ui,sans-serif}
.member .record .ref,.member .queue-row .sub,.member .ledger td:before{font-size:14px;line-height:20px}
.member .form-alert,.member .form-errors{background:var(--af-color-error-background);color:var(--af-color-error-foreground);border-color:var(--af-color-error-foreground)}
.member .field-error{color:var(--af-color-error-foreground)}
/* Konsep gabungan ruang anggota: lima tujuan yang sama, posisi sesuai perangkat. */
.member .nav-anggota-gabungan{border-top:0;border-bottom:1px solid var(--control)}
.member .nav-anggota-gabungan .wrap{display:flex;gap:0}
.member .nav-anggota-gabungan a{display:flex;flex:1;align-items:center;justify-content:center;gap:12px;min-width:0;min-height:64px;margin:0;padding:12px 8px;border-bottom:3px solid transparent;font:600 14px/20px Source,system-ui,sans-serif;text-decoration:none}
.member .nav-anggota-gabungan a>.nav-label{display:block;font:inherit;color:inherit;overflow-wrap:anywhere}
.member .nav-anggota-gabungan a>.ikon{display:block;width:24px;height:24px;flex:0 0 24px}
.member .nav-anggota-gabungan a.kini{background:transparent;color:var(--focus);border-bottom:3px solid var(--focus);box-shadow:none}
.member .nav-anggota-gabungan a[aria-current=page]:after{display:none}
@media(max-width:767px){
 .member:not(.pengurus){padding-bottom:var(--anggota-nav-height,calc(10em + env(safe-area-inset-bottom)))}
 .member .nav-anggota-gabungan{position:fixed;top:auto;bottom:0;left:0;right:0;z-index:6;background:var(--ivory);border-top:1px solid var(--control);border-bottom:0;padding:6px 0 max(8px,env(safe-area-inset-bottom))}
 .member .nav-anggota-gabungan .wrap{width:calc(100% - 16px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
 .member .nav-anggota-gabungan a{flex-direction:column;gap:2px;min-height:64px;padding:6px 2px;border:0;border-radius:4px;line-height:20px}
 .member .nav-anggota-gabungan a:first-child{padding-left:2px}
 .member .nav-anggota-gabungan a.kini{background:var(--green);color:var(--ivory);border:0;box-shadow:none}
 .member:not(.pengurus) [id]{scroll-margin-top:16px;scroll-margin-bottom:calc(var(--anggota-nav-height,88px) + 16px)}
 html:has(.nav-anggota-gabungan){scroll-padding-top:16px;scroll-padding-bottom:var(--anggota-nav-height,88px)}
}
@media print{.member:not(.pengurus){padding-bottom:0}.member .nav-anggota-gabungan{display:none}}
/* Audit anggota: dokumen program tetap disclosure native dengan target sentuh utuh. */
.member:not(.pengurus) .service-docs details{padding:0}
.member:not(.pengurus) .service-docs summary{min-height:48px;padding:14px 4px;font:600 14px/20px Source,system-ui,sans-serif}
.member:not(.pengurus) .service-docs p{margin:12px 0;font:400 14px/20px Source,system-ui,sans-serif}
.member:not(.pengurus) .band-name{font-size:24px;line-height:32px}
.member:not(.pengurus) :is(.service-program,.service-detail,.service-intro,.service-checkout,.transaction-head) h3{font:700 24px/32px Bitter,Georgia,serif}
.member:not(.pengurus) .transaction-timeline span,.member:not(.pengurus) .qris-demo small{font:400 14px/20px Source,system-ui,sans-serif}
.member:not(.pengurus) .form-alert{padding:16px 20px;border:1px solid var(--af-color-error-foreground);border-left-width:4px;border-radius:4px;margin:16px 0;font:400 14px/20px Source,system-ui,sans-serif}
.member:not(.pengurus) .form-alert:focus{outline:3px solid var(--focus);outline-offset:3px}
.member:not(.pengurus) .band-iuran .form-alert:focus{outline-color:var(--ivory)}
@media(max-width:767px){
 .member:not(.pengurus) .band-name{font-size:22px;line-height:28px}
 .member:not(.pengurus) :is(.service-program,.service-detail,.service-intro,.service-checkout,.transaction-head) h3{font:700 22px/28px Bitter,Georgia,serif}
}
/* Label isian kontribusi sejajar kiri seperti formulir anggota lainnya. */
.member:not(.pengurus) .contribution-form>label:not(.consent){align-items:stretch;text-align:left;font:600 14px/20px Source,system-ui,sans-serif}
.member:not(.pengurus) .contribution-form>label:not(.consent)>:is(input,select){font:400 16px/24px Source,system-ui,sans-serif}

.identity-footer-menu{display:flex;flex-wrap:wrap;gap:12px;min-width:0}.identity-footer-menu a{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;font-size:14px;overflow-wrap:anywhere}.identity-footer-menu a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* Password account forms share the same controls in public and private shells. */
.password-form{max-width:760px;min-width:0}
.password-form form{display:grid;gap:16px;max-width:100%;margin-block:20px}
.password-form .registration-field{display:grid;gap:8px;min-width:0}
.password-form label{display:block;text-align:left;font:600 14px/20px var(--af-font-ui);margin:0}
.password-form input:not([type=hidden]){display:block;width:100%;max-width:100%;min-width:0;min-height:48px;padding:11px 12px;border:1px solid var(--control);border-radius:4px;background:#fff;color:var(--ink);font:400 16px/24px var(--af-font-ui);box-sizing:border-box}
.password-form .button{display:inline-flex;align-items:center;justify-content:center;justify-self:start;min-height:48px;min-width:44px;padding:12px 20px;background:var(--green);color:var(--ivory);border:1px solid var(--green);border-radius:4px;font:600 14px/20px var(--af-font-ui);text-decoration:none}
.password-form>p>a,.password-form>a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;margin-right:12px}
.password-form input:focus-visible,.password-form button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(max-width:767px){.password-form .button{justify-self:stretch;width:100%}}