:root{
  --bg:#f6f2e9;
  --surface:#fff;
  --ink:#111;
  --muted:#5a574f;
  --accent:#a78bfa;
  --accent-soft:#ece6ff;
  --hl:#ffe14d;
  --ok:#bdf0c8;
  --focus:#5b3fd1;
  --line:2px solid var(--ink);
  --shadow:4px 4px 0 var(--ink);
  --shadow-lg:6px 6px 0 var(--ink);
  --r:10px;
  --gutter:clamp(16px,4vw,32px);
  --hh:64px;
  --f-head:'Bricolage Grotesque','Inter',system-ui,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 16px);-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);font-size:1rem;line-height:1.6;background:var(--bg);color:var(--ink);padding-top:var(--hh);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
img{max-width:100%}
h1,h2,h3{font-family:var(--f-head);line-height:1.1;letter-spacing:-.02em}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.ic{display:inline-block;width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px}
.skip:focus{left:8px}

/* ===== Layout ===== */
.container{width:100%;max-width:1120px;margin:0 auto;padding-inline:var(--gutter)}
main>section{padding-block:clamp(48px,8vw,88px)}
main>section+section{border-top:var(--line)}
.band{background:var(--surface)}
.grid{display:grid;gap:20px}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.cols-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.sec-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-bottom:clamp(24px,4vw,36px)}
.eyebrow{font-family:var(--f-mono);font-weight:700;font-size:.8rem;background:var(--ink);color:#fff;padding:3px 9px;border-radius:6px;flex:none}
.sec-head h2{font-size:clamp(1.6rem,4.5vw,2.4rem);font-weight:800}

/* ===== Header ===== */
.header{position:fixed;inset:0 0 auto 0;height:var(--hh);padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--surface);border-bottom:var(--line);z-index:100}
.brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none}
.logo-img{width:38px;height:38px;border-radius:50%;border:var(--line);object-fit:cover;flex:none}
.logo-text{font-family:var(--f-head);font-weight:800;font-size:1.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-links{display:flex;gap:2px;list-style:none}
.nav-links a{display:block;padding:8px 12px;font-weight:600;font-size:.92rem;text-decoration:none;border:2px solid transparent;border-radius:8px;transition:background .15s,border-color .15s}
.nav-links a:hover{background:var(--accent-soft);border-color:var(--ink)}
.nav-links a.active{background:var(--ink);color:#fff}
.hamburger{display:none;width:44px;height:44px;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:var(--surface);border:var(--line);border-radius:8px;box-shadow:3px 3px 0 var(--ink);cursor:pointer}
.hamburger span{width:20px;height:2px;background:var(--ink);transition:transform .25s,opacity .2s}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:980px){
  .hamburger{display:flex}
  .nav{position:fixed;top:var(--hh);left:0;right:0;max-height:calc(100vh - var(--hh));max-height:calc(100dvh - var(--hh));overflow-y:auto;background:var(--surface);border-bottom:var(--line);padding:6px var(--gutter) 18px;opacity:0;transform:translateY(-8px);visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
  .nav.open{opacity:1;transform:none;visibility:visible}
  .nav-links{flex-direction:column;gap:0}
  .nav-links li+li{border-top:1px solid rgba(17,17,17,.2)}
  .nav-links a{padding:15px 6px;font-size:1.05rem;border:0;border-radius:0}
  .nav-links a:hover{background:transparent;text-decoration:underline}
  .nav-links a.active{background:var(--accent-soft);color:var(--ink)}
}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;font-family:var(--f-body);font-weight:700;font-size:1rem;text-decoration:none;color:var(--ink);background:var(--hl);border:var(--line);border-radius:8px;box-shadow:var(--shadow);cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn.light{background:var(--surface)}
.btn.dark{background:var(--ink);color:#fff;box-shadow:4px 4px 0 var(--accent)}
.btn.dark:hover{box-shadow:6px 6px 0 var(--accent)}
.btn.dark:active{box-shadow:0 0 0 var(--accent)}

/* ===== Hero ===== */
.hero{background:var(--accent);padding-block:clamp(40px,8vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:center}
.hero-tag{display:inline-block;font-family:var(--f-mono);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--surface);border:var(--line);border-radius:6px;padding:4px 10px;margin-bottom:20px}
.hero h1{font-size:clamp(2.4rem,7vw,4.5rem);font-weight:800;letter-spacing:-.035em;margin-bottom:20px}
.hero h1 mark{background:var(--hl);color:inherit;padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero-sub{font-size:clamp(1rem,2.2vw,1.15rem);font-weight:500;max-width:34em;margin-bottom:28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.facts{background:var(--surface);border:var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden}
.fact{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 20px}
.fact+.fact{border-top:var(--line)}
.fact dt{font-family:var(--f-mono);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.fact dd{font-family:var(--f-head);font-weight:800;font-size:1.9rem;line-height:1}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* ===== About ===== */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(24px,5vw,56px);align-items:center}
.about .sec-head{margin-bottom:20px}
.date-badge{display:inline-block;background:var(--hl);border:var(--line);border-radius:8px;padding:8px 16px;font-weight:700;font-size:1.1rem;box-shadow:var(--shadow)}
.chips{display:grid;gap:14px}
.chip{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:72px;padding:14px 18px;text-align:left;font:inherit;color:inherit;background:var(--surface);border:var(--line);border-radius:var(--r);box-shadow:var(--shadow);cursor:pointer;transition:transform .12s,box-shadow .12s}
.chip:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.chip:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.chip-label{display:block;font-family:var(--f-mono);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.chip-num{display:block;font-family:var(--f-mono);font-size:1.5rem;font-weight:700}
@media(max-width:900px){.about{grid-template-columns:1fr}}

/* ===== Cards ===== */
.card{background:var(--surface);border:var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px;min-width:0}
.band .card{background:var(--bg)}
.person{display:flex;gap:16px;align-items:flex-start}
.person-body{min-width:0}
.avatar{width:48px;height:48px;flex:none;display:grid;place-items:center;background:var(--accent);border:var(--line);border-radius:8px;font-family:var(--f-head);font-weight:800;font-size:1.3rem}
.avatar.lg{width:64px;height:64px;font-size:1.8rem}
.person h3{font-size:1.15rem;font-weight:800;margin-bottom:2px}
.person .name{font-family:var(--f-head);font-weight:800;font-size:1.6rem;line-height:1.1}
.person p{font-size:.95rem}
.nick{font-family:var(--f-mono);font-size:.85rem;color:var(--muted);word-break:break-word}
.role{display:inline-block;font-family:var(--f-mono);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border:var(--line);border-radius:6px;background:var(--hl);margin-bottom:8px}
.role.soft{background:var(--accent-soft)}
.division{display:flex;flex-direction:column;gap:6px}
.division h3{font-size:1.25rem;font-weight:800}
.division.soon{background:transparent;border-style:dashed;box-shadow:none;color:var(--muted)}
.band .division.soon{background:transparent}
.status{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-family:var(--f-mono);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 9px;border:var(--line);border-radius:6px;white-space:nowrap}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.status.ok{background:var(--ok)}
.status.now{background:var(--hl)}
.status.up{background:var(--accent-soft)}

/* ===== Events ===== */
.ev-group+.ev-group{margin-top:32px}
.ev-group h3{display:flex;align-items:center;gap:10px;font-size:1.15rem;font-weight:800;margin-bottom:12px}
.count{font-family:var(--f-mono);font-size:.75rem;background:var(--ink);color:#fff;border-radius:6px;padding:1px 8px}
.ev-list{list-style:none;background:var(--surface);border:var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.band .ev-list{background:var(--bg)}
.ev-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto 3.4em;gap:6px 16px;align-items:center;padding:14px 16px}
.ev-item+.ev-item{border-top:var(--line)}
.ev-ic{width:44px;height:44px;display:grid;place-items:center;background:var(--accent-soft);border:var(--line);border-radius:8px}
.ev-name{font-weight:600;min-width:0}
.ev-year{font-family:var(--f-mono);font-size:.85rem;color:var(--muted);text-align:right}
@media(max-width:600px){
  .ev-item{grid-template-columns:44px minmax(0,1fr) auto}
  .ev-ic{grid-row:span 2}
  .ev-name{grid-column:2}
  .ev-year{grid-column:3;grid-row:1}
  .ev-item .status{grid-column:2;grid-row:2}
}

/* ===== Gallery ===== */
.gal-card{padding:0;overflow:hidden}
.gal-img{aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:repeating-linear-gradient(45deg,var(--accent-soft) 0 12px,#f6f2ff 12px 24px);border-bottom:var(--line);font-family:var(--f-mono);font-size:.8rem;font-weight:700}
.gal-img .ic{width:2rem;height:2rem}
.gal-body{padding:14px 16px}
.date{font-family:var(--f-mono);font-size:.75rem;color:var(--muted)}
.desc{font-weight:600;margin-top:2px}

/* ===== Members ===== */
.toolbar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-bottom:16px}
.search{position:relative;flex:1 1 280px;max-width:440px}
.search .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:1.2rem;height:1.2rem;pointer-events:none}
.search-box{width:100%;min-height:48px;padding:10px 14px 10px 44px;font:inherit;font-size:1rem;font-weight:500;background:var(--surface);border:var(--line);border-radius:8px;box-shadow:var(--shadow)}
.search-box:focus{outline:none;box-shadow:4px 4px 0 var(--focus)}
.result-count{font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}
.table-wrap{background:var(--surface);border:var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.band .table-wrap{background:var(--bg)}
.member-table{width:100%;border-collapse:collapse}
.member-table th{background:var(--ink);color:#fff;font-family:var(--f-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:12px 16px}
.member-table td{padding:12px 16px;border-top:1px solid rgba(17,17,17,.2);vertical-align:middle}
.member-table td:first-child{font-weight:700}
.member-table td:nth-child(2){font-family:var(--f-mono);font-size:.85rem;color:var(--muted)}
.member-table tbody tr:hover{background:rgba(167,139,250,.14)}
.tag{display:inline-block;font-size:.8rem;font-weight:600;padding:2px 10px;border:var(--line);border-radius:6px;background:var(--surface)}
tr[data-role="owner"] .tag,tr[data-role="wakil owner"] .tag{background:var(--hl)}
tr[data-role="petinggi"] .tag{background:var(--accent)}
tr[data-role="admin"] .tag{background:var(--accent-soft)}
tr[data-role="member"] .tag{background:transparent;border-color:rgba(17,17,17,.3);font-weight:500}
.empty{padding:28px 16px;text-align:center;font-weight:600}
.empty[hidden]{display:none}
@media(max-width:640px){
  .member-table thead{display:none}
  .member-table,.member-table tbody{display:block}
  .member-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 16px;border-top:1px solid rgba(17,17,17,.2)}
  .member-table tr:first-child{border-top:0}
  .member-table td{display:block;padding:0;border:0}
  .member-table td:nth-child(1){grid-column:1}
  .member-table td:nth-child(2){grid-column:1;grid-row:2;word-break:break-word}
  .member-table td:nth-child(3){grid-column:2;grid-row:1/span 2;align-self:center;text-align:right}
  .tag{max-width:10.5rem}
}

/* ===== Social ===== */
.link-card{display:flex;align-items:center;gap:14px;min-height:72px;padding:14px 18px;text-decoration:none;background:var(--surface);border:var(--line);border-radius:var(--r);box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s}
.band .link-card{background:var(--bg)}
.link-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.link-card:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.link-ic{width:44px;height:44px;flex:none;display:grid;place-items:center;background:var(--accent-soft);border:var(--line);border-radius:8px}
.link-body{min-width:0;flex:1}
.link-body strong{display:block;font-family:var(--f-head);font-size:1.05rem;line-height:1.2}
.link-body span{display:block;font-size:.85rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== CTA & Form ===== */
.cta{background:var(--ink);color:#fff;padding-block:32px}
.cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
.cta p{font-family:var(--f-head);font-weight:800;font-size:clamp(1.2rem,3vw,1.6rem)}
.form-card{max-width:640px;padding:clamp(18px,4vw,28px)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-family:var(--f-mono);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.field input,.field textarea{width:100%;min-height:48px;padding:12px 14px;font:inherit;font-size:1rem;background:#fff;border:var(--line);border-radius:8px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;box-shadow:4px 4px 0 var(--accent)}
.form-card .btn{width:100%}

/* ===== Footer, toast ===== */
footer{background:var(--ink);color:#fff;text-align:center;font-size:.9rem;padding:28px var(--gutter);padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.toast{position:fixed;left:16px;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));margin:0 auto;max-width:420px;padding:12px 18px;background:var(--hl);border:var(--line);border-radius:8px;box-shadow:var(--shadow);font-weight:700;text-align:center;opacity:0;transform:translateY(16px);transition:opacity .3s,transform .3s;z-index:300}
.toast.show{opacity:1;transform:none}

/* ===== Moonveil Motion v3 ===== */
:root{--ease:cubic-bezier(.22,1,.36,1)}

@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}}
@keyframes slideLeft{from{opacity:0;transform:translateX(36px)}}
@keyframes dropIn{from{transform:translateY(-100%)}}
@keyframes wordUp{from{transform:translateY(110%)}}
@keyframes sweep{from{background-size:0 100%}}
@keyframes rowIn{from{opacity:0;transform:translateX(-10px)}}

/* ----- Header ----- */
.header{transition:transform .4s var(--ease)}
.header.hide{transform:translateY(calc(-100% - 6px))}
.progress{position:absolute;left:0;right:0;bottom:-2px;height:4px;pointer-events:none}
.progress span{display:block;height:100%;background:var(--hl);transform:scaleX(0);transform-origin:left;will-change:transform}

/* ----- Hero load ----- */
.js .header{animation:dropIn .7s var(--ease) backwards}
.js .hero-tag{animation:fadeUp .7s var(--ease) .05s backwards}
.js .hero-sub{animation:fadeUp .8s var(--ease) .55s backwards}
.js .hero-actions{animation:fadeUp .8s var(--ease) .7s backwards}
.js .facts{animation:slideLeft .9s var(--ease) .35s backwards}
.js .fact{animation:fadeUp .6s var(--ease) backwards}
.js .fact:nth-child(1){animation-delay:.7s}
.js .fact:nth-child(2){animation-delay:.8s}
.js .fact:nth-child(3){animation-delay:.9s}
.js .fact:nth-child(4){animation-delay:1s}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.w>span{display:inline-block;animation:wordUp .9s var(--ease) backwards;animation-delay:calc(var(--wi,0)*90ms + 150ms)}
.hero h1 mark{background:linear-gradient(var(--hl),var(--hl)) 0 0/100% 100% no-repeat}
.js .hero h1 mark{animation:sweep .8s var(--ease) 1s backwards}
.hero-grid{transform:translate3d(0,var(--py,0px),0)}

/* ----- Reveal saat scroll ----- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease) var(--rd,0ms),transform .8s var(--ease) var(--rd,0ms)}
.js .sec-head.rv{transform:translateX(-24px)}
.js .grid>.rv{transform:translateY(26px) scale(.97)}
.js .rv.in,.js .sec-head.rv.in,.js .grid>.rv.in{opacity:1;transform:none}

/* ----- Hover & feedback ----- */
.btn{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn .ic{transition:transform .3s var(--ease)}
.btn:hover .ic{transform:translate(2px,-2px)}
.chip{transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .3s}
.chip.copied{background:var(--ok)}
.card.person,.card.division,.gal-card{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.card.person:hover,.card.division:not(.soon):hover,.gal-card:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--ink)}
.avatar{transition:transform .35s var(--ease)}
.person:hover .avatar{transform:rotate(-6deg) scale(1.08)}
.gal-img .ic{transition:transform .4s var(--ease)}
.gal-card:hover .gal-img .ic{transform:scale(1.2) rotate(-6deg)}
.link-card{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.link-ic{transition:background-color .25s,transform .35s var(--ease)}
.link-card:hover .link-ic{background:var(--accent);transform:rotate(-6deg)}
.link-card>.ic{transition:transform .3s var(--ease)}
.link-card:hover>.ic{transform:translate(3px,-3px)}
.ev-item{transition:background-color .25s}
.ev-item:hover{background:rgba(167,139,250,.14)}
.ev-ic{transition:background-color .25s,transform .35s var(--ease)}
.ev-item:hover .ev-ic{background:var(--accent);transform:rotate(-6deg)}
.field input,.field textarea,.search-box{transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.field input:focus,.field textarea:focus,.search-box:focus{transform:translate(-2px,-2px)}
.search-item.flash{animation:rowIn .45s var(--ease) backwards;animation-delay:calc(var(--k,0)*25ms)}
.toast{transition:opacity .4s var(--ease),transform .4s var(--ease)}

/* ----- Tombol scroll up ----- */
.to-top{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));width:52px;height:52px;display:grid;place-items:center;background:var(--hl);color:var(--ink);border:var(--line);border-radius:50%;box-shadow:var(--shadow);cursor:pointer;z-index:150;opacity:0;visibility:hidden;transform:translateY(24px) scale(.6);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s,box-shadow .2s var(--ease)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top.show:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.to-top.show:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.to-top .ic{position:relative;width:1.35rem;height:1.35rem;stroke-width:2.6;transition:transform .3s var(--ease)}
.to-top:hover .ic{transform:translateY(-3px)}
.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.ring circle{fill:none;stroke-width:4}
.ring-bg{stroke:rgba(17,17,17,.15)}
.ring-fg{stroke:var(--ink);stroke-linecap:round;stroke-dasharray:131.95;stroke-dashoffset:131.95;transition:stroke-dashoffset .15s linear}

/* ----- Hormati pengaturan "kurangi gerakan" ----- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-grid{transform:none}
}