/* ============================================================
   PROJECTORIZ - pengabdian masyarakat BEM FST UAI
   identitas: biru institusional UAI + emas, gaya editorial elegan
   ============================================================ */

:root{
  --navy0:#081120;
  --navy1:#0C1B31;
  --navy2:#122845;
  --blue:#2456A6;
  --blue2:#4A7BC7;
  --gold:#C9A227;
  --gold2:#E3C15A;
  --paper:#F4F0E4;
  --paper2:#EAE4D3;
  --ink:#10182B;
  --ink2:#3A4657;
  --muted:#7A8392;
  --line:rgba(16,24,43,.14);
  --line-d:rgba(244,240,228,.16);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --grot:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono","Courier New",monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--grot);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--navy0)}
img{display:block;max-width:100%}
a{color:inherit}
button{font-family:inherit}

/* ---------- util ---------- */
.wrap{width:min(1180px,92vw);margin:0 auto}
.caps{font-family:var(--grot);letter-spacing:.22em;text-transform:uppercase;font-size:.68rem;font-weight:500}
.hair{width:44px;height:2px;background:var(--gold);display:block}
.dot{color:var(--gold)}
.num{font-family:var(--serif);font-variant-numeric:lining-nums}
.icon{width:1em;height:1em;display:inline-block;vertical-align:-.12em}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.rv.on{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 2rem;
  background:rgba(8,17,32,.82);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-d);
  color:var(--paper);
}
.nav a{text-decoration:none}
.nav .mark{display:flex;align-items:baseline;gap:.6rem}
.nav .mark b{font-family:var(--serif);font-weight:600;font-size:1.02rem;letter-spacing:.06em}
.nav .mark .sq{width:9px;height:9px;background:var(--gold);display:inline-block;transform:translateY(.5px)}
.nav .links{display:flex;gap:1.5rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,240,228,.72)}
.nav .links a{position:relative;padding:.2rem 0;transition:color .25s}
.nav .links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--gold);transition:right .3s}
.nav .links a:hover{color:var(--gold2)}
.nav .links a:hover::after{right:0}
.nav .chip{border:1px solid rgba(201,162,39,.55);color:var(--gold2);padding:.34rem .7rem;border-radius:999px;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase}
@media (max-width:860px){.nav .links{display:none}}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(1200px 520px at 78% -10%,rgba(36,86,166,.55),transparent 60%),
    radial-gradient(900px 600px at -10% 110%,rgba(201,162,39,.10),transparent 55%),
    var(--navy0);
  color:var(--paper);
  overflow:hidden;
  border-bottom:1px solid var(--line-d);
}
.hero .grain{position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/></svg>")}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center;min-height:100vh;padding:120px 0 96px}
.eyebrow{display:flex;align-items:center;gap:.8rem;color:var(--gold2)}
.eyebrow .hair{width:34px}
.hero h1{
  font-family:var(--serif);font-weight:520;letter-spacing:-.01em;
  font-size:clamp(3rem,7.2vw,6.4rem);line-height:.98;margin:1.1rem 0 1.3rem;
}
.hero h1 .o{position:relative;display:inline-block;color:var(--gold2)}
.hero h1 em{font-style:italic;font-weight:560;color:var(--paper)}
.hero .tag{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,1.9vw,1.4rem);color:rgba(244,240,228,.85);max-width:34ch}
.hero .meta{
  margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;
  color:rgba(244,240,228,.66);font-size:.8rem;letter-spacing:.06em
}
.hero .meta b{color:var(--paper);font-weight:600}
.hero .meta span{display:flex;align-items:center;gap:.45rem}
.hero .cta{margin-top:2.4rem;display:flex;gap:.9rem;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  border:1px solid var(--gold);color:var(--navy0);background:var(--gold);
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  padding:.85rem 1.3rem;transition:.25s;border-radius:2px
}
.btn:hover{background:var(--gold2);border-color:var(--gold2);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--paper);border-color:rgba(244,240,228,.3)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold2);transform:translateY(-2px)}
.btn.dark{border-color:var(--navy1);color:var(--navy0);background:var(--navy1);color:var(--paper)}
.btn.dark:hover{background:var(--blue)}
.stage{position:relative}
.stage .frame{position:relative;aspect-ratio:4/3.4;border:1px solid var(--line-d);background:linear-gradient(180deg,rgba(18,40,69,.5),rgba(12,27,49,.15));border-radius:8px;overflow:hidden}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage .fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:6%}
.stage.no3d .fallback{display:flex}
.stage.no3d canvas{display:none}
.stage .legend{
  display:flex;gap:1.4rem;justify-content:center;margin-top:.9rem;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,240,228,.6)
}
.stage .legend i{width:9px;height:9px;border-radius:50%;background:var(--gold);display:inline-block;margin-right:.5rem;transform:translateY(-1px)}
.stage .legend i.b{background:var(--blue2)}
.stage .legend i.g{background:#7BA05B}
.stage .corner{position:absolute;width:14px;height:14px;border-color:var(--gold);border-style:solid;opacity:.9}
.stage .corner.tl{top:-1px;left:-1px;border-width:2px 0 0 2px}
.stage .corner.tr{top:-1px;right:-1px;border-width:2px 2px 0 0}
.stage .corner.bl{bottom:-1px;left:-1px;border-width:0 0 2px 2px}
.stage .corner.br{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
.scrollhint{position:absolute;left:0;right:0;bottom:1.4rem;display:flex;justify-content:center;color:rgba(244,240,228,.45);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase}
.scrollhint span{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr;min-height:auto;padding:120px 0 72px}
  .stage{max-width:560px}
}

/* ---------- marquee ---------- */
.marq{background:var(--gold);color:var(--navy0);border-block:1px solid var(--navy0);overflow:hidden}
.marq .inner{display:flex;width:max-content;animation:marq 26s linear infinite}
.marq span{display:flex;align-items:center;gap:1.6rem;padding:.55rem 0;white-space:nowrap;font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;padding-inline:1rem}
.marq i{font-style:normal;font-size:.9em}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq .inner{animation:none}}

/* ---------- sections generic ---------- */
section{position:relative}
section.paper{background:var(--paper);color:var(--ink)}
section.dark{background:var(--navy1);color:var(--paper)}
.sec-pad{padding:96px 0}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:3rem;flex-wrap:wrap}
.head h2{font-family:var(--serif);font-weight:550;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.04;letter-spacing:-.01em;max-width:22ch}
.head h2 em{font-style:italic;color:var(--blue)}
.dark .head h2 em{color:var(--gold2)}
.head .idx{font-family:var(--serif);font-size:.9rem;color:var(--muted);letter-spacing:.1em;padding-bottom:.5rem}
.head .idx b{font-size:2.6rem;font-weight:560;color:transparent;-webkit-text-stroke:1px currentColor;display:block;line-height:1}
.head .idx{color:var(--gold)}
.rule{height:1px;background:var(--line);margin:0 0 2.4rem}
.dark .rule{background:var(--line-d)}

/* ---------- tentang ---------- */
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:start}
.about-grid .lead{font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.55;font-weight:420}
.about-grid .lead b{box-shadow:inset 0 -.5em 0 rgba(36,86,166,.18)}
.about-grid p+p{margin-top:1.1rem;color:var(--ink2)}
.facts{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
.facts>div{padding:1.2rem 1.25rem;border:1px solid var(--line);margin:-.5px}
.facts .lab{font-size:.62rem;letter-spacing:.15em;word-break:keep-all;hyphens:none;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.facts .val{font-family:var(--serif);font-size:1.25rem;font-weight:560;line-height:1.15}
.facts .val small{display:block;font-family:var(--grot);font-size:.72rem;color:var(--ink2);font-weight:400;margin-top:.3rem;line-height:1.45}
.orbit{position:relative;border:1px solid var(--line);border-radius:6px;background:var(--paper2);padding:1.6rem;margin-top:3rem}
.orbit .t{font-family:var(--serif);font-weight:560;font-size:1.05rem;margin-bottom:1.1rem;display:flex;gap:.7rem;align-items:center}
.orbit .t::before{content:"";width:10px;height:10px;background:var(--gold);flex:0 0 auto}
.hub{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;position:relative}
.hub .cell{background:var(--paper);border:1px solid var(--line);padding:1rem;position:relative;z-index:1}
.hub .cell:first-child{background:var(--navy1);color:var(--paper)}
.hub .cell:first-child .sub{color:rgba(244,240,228,.65)}
.hub .name{font-family:var(--serif);font-weight:560;font-size:1.02rem;line-height:1.2}
.hub .sub{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:.4rem;line-height:1.5}
.hub .cell .pin{position:absolute;top:.8rem;right:.8rem;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.hub .cell:nth-child(3) .pin{background:var(--blue)}
.hub .cell:nth-child(4) .pin{background:#7BA05B}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}.hub{grid-template-columns:1fr 1fr}}

/* ---------- dossier studi kasus ---------- */
.case{border-top:1px solid var(--line);padding:64px 0 72px;position:relative}
.case:last-of-type{padding-bottom:96px}
.case .ghost{
  position:absolute;top:26px;right:-.02em;font-family:var(--serif);font-weight:600;
  font-size:clamp(7rem,16vw,15rem);line-height:.8;color:transparent;
  -webkit-text-stroke:1.5px rgba(36,86,166,.28);user-select:none;pointer-events:none
}
.case .grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:3rem;align-items:start}
.caseL{position:relative;z-index:1}
.caseL .studio{display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--line);padding:.32rem .8rem;border-radius:999px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);background:#fff}
.caseL .studio i{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.case.blue .caseL .studio i{background:var(--blue)}
.case.green .caseL .studio i{background:#7BA05B}
.caseL h3{font-family:var(--serif);font-weight:560;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.05;margin:.9rem 0 .4rem}
.caseL .nick{font-family:var(--serif);font-style:italic;color:var(--blue);font-size:clamp(1rem,1.6vw,1.2rem)}
.case.green .caseL .nick{color:#5f7f45}
.caseL .where{margin-top:1.1rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;gap:1.1rem;flex-wrap:wrap}
.caseL .where b{color:var(--ink)}
.caseL .desc{margin-top:1.3rem;color:var(--ink2);max-width:52ch}
.caseL .team{margin-top:1.4rem;border-left:2px solid var(--gold);padding-left:1rem;font-size:.85rem;color:var(--ink2)}
.caseL .team b{color:var(--ink)}
.case .figual{position:relative;z-index:1}
.fig{position:relative;overflow:hidden;border-radius:4px;border:1px solid var(--line);background:var(--navy1)}
.fig img{width:100%;height:auto;filter:grayscale(.9) contrast(1.06) brightness(.92);transition:filter .6s ease,transform 1.2s cubic-bezier(.22,1,.36,1)}
.fig::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(36,86,166,.35),rgba(8,17,32,.55));mix-blend-mode:multiply;transition:opacity .6s}
.fig:hover img{filter:none;transform:scale(1.015)}
.fig:hover::after{opacity:0}
.fig .tagcap{
  position:absolute;left:.9rem;bottom:.9rem;z-index:2;background:rgba(8,17,32,.82);color:var(--paper);
  font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;padding:.42rem .7rem;border-radius:2px;backdrop-filter:blur(6px)
}
.blocks{display:grid;gap:1.2rem;margin-top:1.6rem}
.blk{border:1px solid var(--line);background:#fff;padding:1.15rem 1.2rem 1.2rem}
.blk h4{font-family:var(--grot);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin-bottom:.7rem;display:flex;align-items:center;gap:.55rem}
.blk h4::before{content:"";position:static;width:16px;height:2px;background:var(--gold)}
.case.gold .blk h4::before{background:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips span{border:1px solid var(--line);border-radius:999px;padding:.34rem .75rem;font-size:.76rem;color:var(--ink2);background:var(--paper)}
.chips span.g{border-color:rgba(201,162,39,.5);color:#8C701B;background:rgba(201,162,39,.1)}
.blk ul{list-style:none;display:grid;gap:.5rem}
.blk li{font-size:.88rem;color:var(--ink2);display:flex;gap:.6rem;line-height:1.5}
.blk li::before{content:"";flex:0 0 7px;height:7px;background:var(--paper2);outline:1px solid var(--line);border-radius:50%;margin-top:.45rem}
.blk li b{color:var(--ink)}
.mini-rundown{margin-top:1.6rem;border:1px solid var(--line);background:#fff}
.mini-rundown .mr-h{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.1rem;border-bottom:1px solid var(--line);background:var(--paper)}
.mini-rundown .mr-h b{font-family:var(--serif);font-weight:560;font-size:.95rem}
.mini-rundown .mr-h span{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.mr-row{display:grid;grid-template-columns:64px 1fr;gap:.9rem;padding:.62rem 1.1rem;border-bottom:1px solid var(--line-d);align-items:baseline}
.mr-row:last-child{border-bottom:0}
.mr-row time{font-family:var(--mono);font-size:.74rem;color:var(--blue);font-weight:600;white-space:nowrap}
.mr-row p{font-size:.85rem;color:var(--ink2)}
.mr-row p b{color:var(--ink)}
.mr-row.paused{background:rgba(201,162,39,.08)}
@media (max-width:960px){.case .grid{grid-template-columns:1fr}.case .ghost{display:none}}

/* ---------- rundown har-H ---------- */
.shed{border:1px solid var(--line-d);background:rgba(244,240,228,.04);border-radius:6px;overflow:hidden}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line-d);flex-wrap:wrap}
.tabs button{
  flex:1;min-width:140px;background:transparent;border:0;border-right:1px solid var(--line-d);
  color:rgba(244,240,228,.62);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  padding:1rem .8rem;cursor:pointer;transition:.25s;position:relative
}
.tabs button:last-child{border-right:0}
.tabs button .t{display:block;font-family:var(--serif);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--paper);margin-top:.15rem;font-weight:560}
.tabs button::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:transparent;transition:.25s}
.tabs button.on{color:var(--gold2)}
.tabs button.on::before{background:var(--gold)}
.pane{display:none;padding:2rem 1.6rem 2.2rem}
.pane.on{display:block;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
.dayline{position:relative;margin-left:12px;padding-left:26px;border-left:1px solid rgba(244,240,228,.22)}
.dl-row{position:relative;padding:.55rem 0 1rem}
.dl-row::before{content:"";position:absolute;left:-31px;top:.85rem;width:9px;height:9px;border-radius:50%;background:var(--navy2);outline:1.5px solid var(--gold)}
.dl-row.key::before{background:var(--gold)}
.dl-row time{display:block;font-family:var(--mono);font-size:.9rem;color:var(--gold2);font-weight:600}
.dl-row h5{font-family:var(--serif);font-weight:560;font-size:1.06rem;margin:.15rem 0 .2rem}
.dl-row p{font-size:.86rem;color:rgba(244,240,228,.72);max-width:72ch}
.dl-row .loc{display:inline-flex;gap:.4rem;align-items:center;margin-top:.35rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,240,228,.5)}
.col2{display:grid;grid-template-columns:1fr 1fr;gap:0 3rem}
@media (max-width:760px){.col2{grid-template-columns:1fr}}
.note{margin-top:1.2rem;border:1px dashed rgba(201,162,39,.5);color:rgba(244,240,228,.75);font-size:.8rem;padding:.7rem .95rem;border-radius:4px}

/* ---------- survei ringkas ---------- */
.counters{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:#fff}
.counters>div{padding:1.6rem 1.4rem;border:1px solid var(--line);margin:-.5px}
.counters .num2{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.4rem);font-weight:600;color:var(--navy1);line-height:1}
.counters .num2 i{font-style:normal;color:var(--gold);font-size:.6em;vertical-align:.18em;margin-left:.1em}
.counters .lab{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:.5rem;line-height:1.5}
@media (max-width:900px){.counters{grid-template-columns:1fr 1fr}}
.hilo{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.4rem}
.hilo .card{border:1px solid var(--line);background:#fff;padding:1.3rem 1.25rem;position:relative}
.hilo .card::before{content:attr(data-n);position:absolute;top:.9rem;right:1rem;font-family:var(--serif);font-weight:600;font-size:1.5rem;color:transparent;-webkit-text-stroke:1px rgba(36,86,166,.4)}
.hilo .card h5{font-family:var(--serif);font-weight:560;font-size:1.06rem;max-width:85%;line-height:1.3}
.hilo .card p{font-size:.84rem;color:var(--ink2);margin-top:.6rem}
.hilo .card .linkcause{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-top:.9rem;display:block}
@media (max-width:900px){.hilo{grid-template-columns:1fr}}
.filmwrap{margin-top:2.6rem}
.filmwrap .bar{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.8rem}
.film{display:flex;gap:.8rem;overflow-x:auto;padding-bottom:.8rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;cursor:grab}
.film.dragging{cursor:grabbing}
.film figure{flex:0 0 min(320px,74vw);scroll-snap-align:start;position:relative;border:1px solid var(--line);background:var(--navy1);overflow:hidden;border-radius:3px;user-select:none}
.film img{width:100%;height:200px;object-fit:cover;filter:grayscale(.65) contrast(1.05);transition:filter .5s}
.film figure:hover img{filter:none}
.film figcaption{font-size:.7rem;color:rgba(244,240,228,.85);background:var(--navy1);padding:.55rem .75rem;letter-spacing:.06em}
.survey-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2.2rem}
.btn.l{border-color:var(--blue);background:var(--blue);color:#fff}
.btn.l:hover{background:#1C468C}
.btn.o{border-color:var(--line);background:transparent;color:var(--ink)}
.btn.o:hover{border-color:var(--blue);color:var(--blue)}
.brief{margin-top:2.6rem;border:1px solid var(--line);background:#fff}
.brief summary{list-style:none;cursor:pointer;padding:1rem 1.3rem;display:flex;justify-content:space-between;align-items:center;font-family:var(--serif);font-weight:560;font-size:1.05rem}
.brief summary::-webkit-details-marker{display:none}
.brief summary .st{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.brief[open] summary .st::before{content:"TUTUP ~ "}
.brief:not([open]) summary .st::before{content:"BUKA ~ "}
.brief .body{padding:0 1.3rem 1.4rem;color:var(--ink2);font-size:.9rem;columns:2;column-gap:2.4rem}
.brief .body p{break-inside:avoid;margin-bottom:.8rem;text-align:justify}
@media (max-width:760px){.brief .body{columns:1}}

/* ---------- dana ---------- */
.dana{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:start}
@media (max-width:900px){.dana{grid-template-columns:1fr}}
.dana .total{border:1px solid var(--line);background:var(--navy1);color:var(--paper);padding:1.8rem 1.7rem;position:relative;overflow:hidden}
.dana .total::after{content:"";position:absolute;top:-40px;right:-40px;width:140px;height:140px;border-radius:50%;border:1.5px solid rgba(201,162,39,.4)}
.dana .total .lab{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,240,228,.6)}
.dana .total .amt{font-family:var(--serif);font-weight:600;font-size:clamp(2.6rem,5vw,4rem);color:var(--gold2);line-height:1.1;margin:.2rem 0 .6rem}
.dana .total p{font-size:.84rem;color:rgba(244,240,228,.75)}
.dana .total .row2{display:flex;justify-content:space-between;border-top:1px solid var(--line-d);margin-top:1.2rem;padding-top:1rem;font-size:.86rem}
.dana .total .row2 b{color:var(--paper);font-family:var(--serif);font-size:1.1rem}
.alloc{display:grid;gap:1.05rem}
.alloc .a{display:grid;grid-template-columns:150px 1fr auto;gap:1rem;align-items:center}
.alloc .a .nm{font-family:var(--serif);font-weight:560;font-size:1rem}
.alloc .a .track{height:14px;background:#fff;border:1px solid var(--line);position:relative;border-radius:2px;overflow:hidden}
.alloc .a .fill{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--navy2),var(--blue));transition:width 1.4s cubic-bezier(.22,1,.36,1)}
.alloc .a:nth-child(1) .fill{background:linear-gradient(90deg,#4E7A3A,#7BA05B)}
.alloc .a:nth-child(3) .fill{background:linear-gradient(90deg,#8C701B,var(--gold))}
.alloc .a .rp{font-family:var(--mono);font-size:.82rem;color:var(--ink2);white-space:nowrap}
.alloc .src{display:flex;justify-content:space-between;gap:.5rem 1.2rem;flex-wrap:wrap;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);padding-top:.8rem;margin-top:.4rem}
@media (max-width:640px){.alloc .a{grid-template-columns:1fr;gap:.4rem}}

/* ---------- tim ---------- */
.roles{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-d)}
.roles>div{border:1px solid var(--line-d);margin:-.5px;padding:1.3rem 1.35rem;background:rgba(244,240,228,.03)}
.roles .who{font-family:var(--serif);font-weight:560;font-size:1.12rem}
.roles .job{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2);margin-top:.35rem}
.roles .ext{font-size:.78rem;color:rgba(244,240,228,.65);margin-top:.4rem}
.roles .ext a{color:var(--gold2)}
@media (max-width:800px){.roles{grid-template-columns:1fr}}
.legal{margin-top:2.6rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.legal .lg{border:1px dashed rgba(201,162,39,.5);padding:1.2rem 1.3rem}
.legal .lab{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,240,228,.55);margin-bottom:.4rem}
.legal .nm{font-family:var(--serif);font-weight:560;font-size:1.06rem}
@media (max-width:640px){.legal{grid-template-columns:1fr}}
.crew{margin-top:2.6rem;border-top:1px solid var(--line-d);padding-top:1rem;overflow:hidden}
.crew .inner{display:flex;width:max-content;animation:marq 46s linear infinite;gap:0}
.crew span{padding:.5rem 1rem;white-space:nowrap;font-size:.78rem;color:rgba(244,240,228,.68);letter-spacing:.04em}
.crew i{color:var(--gold);font-style:normal}
@media (prefers-reduced-motion:reduce){.crew .inner{animation:none;flex-wrap:wrap;width:auto}}

/* ---------- arsip ---------- */
.arch{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.arch a{
  display:flex;gap:1.1rem;align-items:flex-start;text-decoration:none;border:1px solid var(--line);
  background:#fff;padding:1.4rem 1.4rem;transition:.25s;position:relative;overflow:hidden
}
.arch a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.arch a:hover::after{transform:scaleX(1)}
.arch a:hover{transform:translateY(-2px);box-shadow:0 12px 30px -18px rgba(16,24,43,.35)}
.arch .gl{font-family:var(--serif);font-weight:600;font-size:1.7rem;color:transparent;-webkit-text-stroke:1px var(--blue);line-height:1.1;min-width:46px}
.arch .t h5{font-family:var(--serif);font-weight:560;font-size:1.12rem}
.arch .t p{font-size:.82rem;color:var(--ink2);margin-top:.35rem;line-height:1.5}
.arch .t .go{margin-top:.7rem;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);display:inline-flex;gap:.4rem;align-items:center}
@media (max-width:760px){.arch{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{background:var(--navy0);color:var(--paper);border-top:1px solid var(--line-d)}
.footer-pad{padding:72px 0 40px}
.footgrid{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:end}
@media (max-width:820px){.footgrid{grid-template-columns:1fr}}
footer .verse{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.4;color:var(--paper);max-width:26ch}
footer .verse b{font-style:normal;color:var(--gold2)}
footer .meta2{font-size:.8rem;color:rgba(244,240,228,.6);line-height:2}
footer .meta2 b{color:var(--paper)}
.footrule{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line-d);margin-top:3rem;padding-top:1.2rem;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,240,228,.45);flex-wrap:wrap;gap:.6rem}
.up{background:none;border:1px solid var(--line-d);color:var(--gold2);width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:1rem;transition:.25s}
.up:hover{border-color:var(--gold);transform:translateY(-2px)}

/* accessibility & mobile */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

/* ---------- hero lanjutan: kata kunci + sub ---------- */
.tag .kw{color:var(--gold2);font-style:normal;font-weight:700;letter-spacing:.02em}
.tagsub{margin-top:.7rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,240,228,.55)}

/* ---------- kutipan sinergi ---------- */
.quote{margin-top:1.6rem;border-left:3px solid var(--gold);background:#fff;padding:1.2rem 1.4rem;font-family:var(--serif);font-style:italic;font-size:1.12rem;line-height:1.5}
.quote b{color:var(--blue);letter-spacing:.01em}
.quote .qwho{display:block;margin-top:.6rem;font-family:var(--grot);font-style:normal;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- sindang terang ---------- */
.stgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:2.6rem;align-items:start;margin-bottom:2.6rem}
@media (max-width:960px){.stgrid{grid-template-columns:1fr}}
.stcards{display:grid;gap:.9rem;margin-top:1.6rem}
.stc{border:1px solid var(--line);background:#fff;padding:1.1rem 1.2rem;position:relative;transition:.25s}
.stc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue)}
.stc.opt::before{background:var(--gold)}
.stc .lab{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.stc .b{font-family:var(--serif);font-weight:560;font-size:1.05rem;margin:.3rem 0 .4rem}
.stc p{font-size:.84rem;color:var(--ink2)}
.gcard{display:block;border:1px solid var(--line);background:var(--navy1);text-decoration:none;overflow:hidden;border-radius:4px;transition:.25s}
.gcard img{width:100%;height:auto;display:block;filter:saturate(.95);transition:transform 1s cubic-bezier(.22,1,.36,1)}
.gcard:hover img{transform:scale(1.012)}
.gcard:hover{border-color:var(--gold)}
.gc-cap{display:block;color:rgba(244,240,228,.8);font-size:.7rem;letter-spacing:.08em;padding:.6rem .8rem;border-top:1px solid var(--line-d);background:var(--navy1)}
.geohead{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.6rem;margin-bottom:.9rem}
.geohead b{font-family:var(--serif);font-weight:560;font-size:1.15rem}
.geo{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
@media (max-width:900px){.geo{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.geo{grid-template-columns:1fr}}
.geo .g{border:1px solid var(--line);background:#fff;padding:1.05rem 1.1rem;position:relative;transition:.25s}
.geo .g:hover{transform:translateY(-2px);border-color:var(--blue)}
.geo .g.hard{background:var(--navy1);color:var(--paper);border-color:var(--navy1)}
.geo .g.hard p{color:rgba(244,240,228,.72)}
.geo .gk{font-family:var(--serif);font-weight:600;color:transparent;-webkit-text-stroke:1.2px var(--gold);font-size:1.5rem;line-height:1}
.geo .gn{font-family:var(--serif);font-weight:560;font-size:.98rem;margin:.5rem 0 .3rem;line-height:1.3}
.geo p{font-size:.78rem;color:var(--ink2)}
.geo .gu{margin-top:.5rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);border-top:1px dashed var(--line);padding-top:.5rem}
.geo .g.hard .gu{color:var(--gold2);border-color:var(--line-d)}
.row2imgs{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.2rem}
@media (max-width:820px){.row2imgs{grid-template-columns:1fr}}
.rabwrap{display:grid;grid-template-columns:1.15fr .85fr;gap:1rem;margin-top:2rem;align-items:stretch}
@media (max-width:820px){.rabwrap{grid-template-columns:1fr}}
.rab{border:1px solid var(--line);background:#fff}
.rab-h{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.5rem;background:var(--paper);border-bottom:1px solid var(--line);padding:.85rem 1.15rem}
.rab-h b{font-family:var(--serif);font-weight:560;font-size:1.02rem}
.rab table{width:100%;border-collapse:collapse}
.rab th,.rab td{text-align:left;padding:.75rem 1.15rem;border-bottom:1px solid var(--line-d);font-size:.86rem}
.rab th{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500;border-bottom:1px solid var(--line)}
.rab td.num{font-family:var(--serif);font-weight:560;color:var(--navy1)}
.rab-note{padding:.8rem 1.15rem;font-size:.78rem;color:var(--ink2)}
.stc.note{display:block}