:root{--latar:#e9edf2;--tinta:#252d39;--redup:#5c6574;--garis:#cfd6df;--sorot:#dde3eb;
  --staff:#dbe2f2;--staff-sorot:#cdd7ee;--staff-tx:#22336f;--biru:#3a55b5;--foto:brightness(.96) saturate(.92);
  --sans:'Onest',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace}
@media(prefers-color-scheme:dark){
  :root{--latar:#161b23;--tinta:#d6dbe3;--redup:#949dab;--garis:#2b323d;--sorot:#1f2630;
    --staff:#1f2840;--staff-sorot:#26314f;--staff-tx:#c3cff2;--biru:#8ea4ee;--foto:brightness(.72) saturate(.85)}
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--latar);color:var(--tinta);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}

.layar{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);min-height:100vh}

.gedung{margin:0;position:relative;overflow:hidden;color:#fff;background:#1b2333}
.gedung::before{content:'';position:absolute;inset:0;background:url('/image/background.jpg') center/cover no-repeat;filter:var(--foto)}
.gedung::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,26,36,0) 45%,rgba(20,26,36,.7))}
.gedung .logo,.gedung figcaption{position:absolute;z-index:1}
.gedung .logo{top:clamp(1.25rem,3vw,2.25rem);left:clamp(1.25rem,3vw,2.25rem);height:46px;width:auto;background:#fff;padding:6px 10px;border-radius:8px}
.gedung figcaption{left:clamp(1.25rem,3vw,2.25rem);right:clamp(1.25rem,3vw,2.25rem);bottom:clamp(1.25rem,3vw,2.25rem);display:flex;flex-direction:column;gap:.25rem}
.gedung .kode{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;opacity:.8}
.gedung strong{font-size:clamp(1.25rem,2.1vw,1.65rem);font-weight:600;letter-spacing:-.015em;line-height:1.2}
.gedung figcaption>span:last-child{font-size:.9rem;opacity:.85}

.arah{display:flex;flex-direction:column;justify-content:center;gap:2.2rem;width:100%;max-width:620px;padding:clamp(2rem,6vw,5rem) clamp(1.25rem,5vw,4.5rem)}
.sambut{display:flex;flex-direction:column;gap:.4rem}
.judul-kecil{margin:0;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--redup)}
h1{margin:0;font-size:clamp(2.2rem,4vw,3.3rem);font-weight:600;letter-spacing:-.035em;line-height:1.05}
.sub{margin:0;color:var(--redup);font-size:1rem}

.lajur{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--tinta)}
.lajur h2{margin:0;font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.lajur span{font-family:var(--mono);font-size:.74rem;color:var(--redup)}

.tujuan{display:grid;grid-template-columns:1fr auto;grid-template-areas:"nama panah" "ket panah";column-gap:1rem;row-gap:.15rem;align-items:center;
  margin:0 -1rem;padding:1rem;border-bottom:1px solid var(--garis);border-radius:10px;color:inherit;text-decoration:none;
  transition:background-color .2s,border-color .2s}
.tujuan .nama{grid-area:nama;font-size:clamp(1.1rem,1.6vw,1.3rem);font-weight:600;letter-spacing:-.01em}
.tujuan .ket{grid-area:ket;font-size:.9rem;color:var(--redup)}
.tujuan .panah{grid-area:panah;font-size:1.4rem;line-height:1;color:var(--redup);transition:transform .25s,color .2s}
.tujuan:focus-visible{outline:2px solid var(--biru);outline-offset:2px}
.tujuan:active{background:var(--sorot)}
@media(hover:hover){
  .tujuan:hover{background:var(--sorot);border-bottom-color:transparent}
  .tujuan:hover .panah{color:var(--biru);transform:translateX(5px)}
  .tujuan.staff:hover{background:var(--staff-sorot)}
}

.tujuan.staff{margin:.8rem 0 0;padding:1.1rem 1.2rem;border:0;background:var(--staff);color:var(--staff-tx)}
.tujuan.staff .ket,.tujuan.staff .panah{color:inherit;opacity:.8}

.arah footer{font-family:var(--mono);font-size:.72rem;color:var(--redup)}

.sambut,section{animation:muncul .5s cubic-bezier(.2,.7,.2,1) both}
section:nth-of-type(1){animation-delay:.06s}
section:nth-of-type(2){animation-delay:.12s}
@keyframes muncul{from{opacity:0;transform:translateY(8px)}}

@media(max-width:860px){
  .layar{grid-template-columns:1fr;min-height:0}
  .gedung{min-height:clamp(200px,34vh,320px)}
  .gedung .logo{height:38px}
  .arah{max-width:none;gap:1.8rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}