:root {
  /* SMKN 1 — biru royal + liquid glass */
  --logo-blue: #163f9c;
  --logo-blue-deep: #0c275f;
  --logo-blue-soft: #2a5bbd;
  --logo-gold: #d4a017;
  --bg: #e8edf6;
  --bg-wash: #dfe6f2;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-solid: #ffffff;
  --surface-2: rgba(247, 248, 252, 0.78);
  --ink: #121c33;
  --ink-soft: #4a5570;
  --muted: #6b7589;
  --line: rgba(12, 39, 95, 0.1);
  --line-soft: rgba(12, 39, 95, 0.08);
  --shadow: 0 10px 30px rgba(12, 39, 95, 0.08);
  --shadow-lg: 0 18px 48px rgba(12, 39, 95, 0.12);
  --radius: 1.25rem;
  --font: "Plus Jakarta Sans", system-ui, sans-serif;
  --display: "Fraunces", Georgia, serif;
  --topbar-h: 72px;
  --topbar-inset: .55rem;
  --topbar-pad-x: 1.35rem;
  --brand-logo-size: 3.4rem;
  --brand-gap: .9rem;
  --brand-left: 1.15rem;
  --glass:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(255, 255, 255, 0.42) 45%,
      rgba(230, 238, 255, 0.38) 100%
    );
  --glass-edge:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 -1px 0 rgba(12, 39, 95, 0.04) inset,
    0 12px 36px rgba(12, 39, 95, 0.1);
}

/* Ampersand swash fix — ensure ampersands in titles render in clean sans-serif */
h1, h2, h3, h4, h5, h6, .majors__title, .ip__title, .life__title, .ach__title {
  font-feature-settings: "cv01" 0, "swsh" 0, "dlig" 0;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  color: var(--ink);
  position: relative;
  /* Default: background portrait mobile; desktop override di bawah */
  background-color: #ffffff;
  background-image: var(--site-bg-mobile, url("../img/background-mobile.png"));
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
@media (min-width: 768px) {
  body {
    background-image: var(--site-bg, url("../img/background.png"));
  }
}
@media (min-width: 900px) {
  body {
    background-attachment: fixed;
  }
}

/* Soft wash tipis di atas bg agar konten tetap legible */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% -8%, rgba(22, 63, 156, 0.045), transparent 55%);
}

/* Ornament pojok lama diganti — background.png sudah berisi corner motif */
.deco-batik {
  display: none !important;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* —— Custom Scrollbar Global & Panel — Premium Modern Design System —— */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(22, 63, 156, 0.4) rgba(12, 39, 95, 0.05);
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: rgba(12, 39, 95, 0.04);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #163f9c 0%, #0c275f 100%);
  border-radius: 999px;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(12, 39, 95, 0.2);
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #1d4ed8 0%, #163f9c 100%);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* —— Loader: buku ketutup → terbuka → logo pop —— */
.page-loader {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 40%, #1a4aab 0%, transparent 55%),
    linear-gradient(165deg, #0c275f 0%, #163f9c 48%, #0a1f4a 100%);
  overflow: visible; /* cover buka ke kiri jangan kepotong */
  transition: opacity .55s ease, visibility .55s ease;
}
.page-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* pastikan tidak ever nge-block scroll/tap */
  z-index: -1;
}

.book-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  perspective: 1600px;
  /* ruang untuk cover yang terbuka ke samping */
  width: min(92vw, 28rem);
  min-height: min(70vh, 26rem);
  justify-content: center;
  overflow: visible;
  padding: 2rem 3.5rem;
  box-sizing: border-box;
}

.book-scene__label {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: 0;
  animation: labelIn .5s ease .15s forwards;
}
@keyframes labelIn { to { opacity: 1; } }

.book {
  position: relative;
  width: clamp(200px, 42vw, 280px);
  height: clamp(260px, 54vw, 360px);
  transform-style: preserve-3d;
  transform: rotateY(-12deg) rotateX(5deg);
  filter: drop-shadow(0 28px 48px rgba(0,0,0,.4));
}
.page-loader.is-opening .book { animation: none; transform: rotateY(-8deg) rotateX(4deg); }

.book__back {
  position: absolute; inset: 0;
  background: linear-gradient(145deg, #0a1f4a, #163f9c);
  border-radius: 6px 14px 14px 6px;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
}
.book__back::after {
  content: "";
  position: absolute;
  top: 8px; bottom: 8px; left: 6px; right: 6px;
  background: linear-gradient(180deg, #fdfcfa 0%, #f4eede 100%);
  border-radius: 6px;
  z-index: 1;
}

.book__page {
  position: absolute;
  top: 8px; bottom: 8px;
  width: calc(50% - 6px);
  background: linear-gradient(180deg, #fdfcfa, #f0ebe3);
  border: none;
}
.book__page--left {
  left: 6px;
  border-radius: 6px 0 0 6px;
  box-shadow: none;
  border-right: none !important;
}
.book__page--right {
  right: 6px;
  border-radius: 0 6px 6px 0;
  transform-origin: left center;
  transform: rotateY(0deg);
  box-shadow: none;
  border-left: none !important;
}

.book__cover {
  position: absolute; inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  border-radius: 6px 14px 14px 6px;
  background: linear-gradient(145deg, #0c275f 0%, #1e4dab 50%, #163f9c 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 32px rgba(0,0,0,.3);
  transform: rotateY(0deg);
  z-index: 5;
}
.book__cover-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  backface-visibility: hidden;
}
.book__spine-title {
  font-family: var(--display);
  font-size: clamp(.85rem, 2.5vw, 1.05rem);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: #fff;
  letter-spacing: .06em;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* Cover buka — sekuens ~1s agar nyaman dilihat */
.page-loader.is-opening .book__cover {
  animation: coverOpen 1s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes coverOpen {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(-148deg); }
}
.page-loader.is-opening .book__page--right {
  animation: pageFlutter 1s ease forwards;
}
@keyframes pageFlutter {
  0% { transform: rotateY(0deg); }
  40% { transform: rotateY(-10deg); }
  100% { transform: rotateY(-5deg); }
}

.book__logo-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8;
  width: clamp(110px, 28vw, 150px);
  height: clamp(110px, 28vw, 150px);
  margin: 0;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  pointer-events: none;
}
.page-loader.is-logo-pop .book__logo-wrap {
  animation: logoPop .7s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
@keyframes logoPop {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(0.2); }
  55% { opacity: 1; transform: translate(-50%, -55%) scale(1.14); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.book__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.35));
}

.page-loader.is-exit .book-scene {
  animation: sceneOut .55s ease forwards;
}
@keyframes sceneOut {
  to { opacity: 0; transform: scale(1.06); filter: blur(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .book, .page-loader.is-opening .book__cover,
  .page-loader.is-logo-pop .book__logo-wrap {
    animation: none !important;
  }
  .page-loader.is-opening .book__cover { transform: rotateY(-148deg); }
  .page-loader.is-logo-pop .book__logo-wrap {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* —— Bita chatbot (GIF + layout zoom-safe) —— */
.chatbot {
  --chat-fab: clamp(4.35rem, 12vw, 5.25rem);
  --chat-gap: .75rem;
  --chat-bottom: max(5.5rem, calc(env(safe-area-inset-bottom, 0px) + 4.85rem));
  --chat-side: max(.55rem, env(safe-area-inset-right, 0px));
  position: fixed;
  z-index: 140;
  right: var(--chat-side);
  bottom: var(--chat-bottom);
  width: min(26rem, calc(100vw - 1rem));
  max-width: calc(100vw - 1rem);
  max-height: calc(100dvh - var(--chat-bottom) - .35rem);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--chat-gap);
  font-family: var(--font);
  pointer-events: none;
  box-sizing: border-box;
}
.chatbot > * { pointer-events: auto; max-width: 100%; box-sizing: border-box; }
@media (min-width: 800px) {
  .chatbot {
    --chat-bottom: max(1.15rem, calc(env(safe-area-inset-bottom, 0px) + 1rem));
    --chat-side: max(1rem, env(safe-area-inset-right, 0px));
  }
}
.chatbot.is-compact { --chat-bottom: max(.55rem, env(safe-area-inset-bottom, 0px)); }

.chatbot__bubble {
  position: relative;
  order: 1;
  width: 100%;
  padding: 1.05rem 1.15rem 1.15rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.25rem 1.25rem .5rem 1.25rem;
  box-shadow: 0 16px 40px rgba(12, 39, 95, 0.2);
  opacity: 0;
  transform: translateY(10px) scale(.97);
  pointer-events: none;
  transition: opacity .4s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
  z-index: 2;
}
.chatbot__bubble.is-show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  animation: bitaPop .55s cubic-bezier(.22, 1, .36, 1);
}
.chatbot__bubble[hidden] { display: none !important; }
.chatbot__bubble-face {
  width: 4.25rem; height: 4.25rem; margin: 0 0 .65rem;
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 6px 16px rgba(12, 39, 95, 0.18);
  background: #e8eefc;
  border: 2px solid rgba(22, 63, 156, 0.12);
}
.chatbot__bubble-face img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block;
}
@keyframes bitaPop {
  0% { opacity: 0; transform: translateY(12px) scale(.94) rotate(-1deg); }
  60% { opacity: 1; transform: translateY(-2px) scale(1.02) rotate(.4deg); }
  100% { opacity: 1; transform: none; }
}
/* bubble-x removed: auto-close popup */
.chatbot__bubble-hi {
  margin: 0; font-weight: 800; font-size: 1.18rem;
  color: var(--logo-blue-deep, #0c275f); padding-right: 0;
}
.chatbot__bubble-text {
  margin: .4rem 0 .85rem; font-size: .95rem; line-height: 1.55; color: var(--ink, #1e293b);
}
.chatbot__bubble-cta {
  border: 0; border-radius: 999px; padding: .62rem 1.2rem; font: inherit; font-size: .9rem;
  font-weight: 700; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, var(--logo-blue), var(--logo-blue-deep));
}
.chatbot__bubble-cta:hover { filter: brightness(1.06); }

.chatbot__panel {
  position: relative; order: 2; width: 100%;
  height: min(32rem, calc(100dvh - var(--chat-bottom) - var(--chat-fab) - 2.25rem));
  max-height: calc(100dvh - var(--chat-bottom) - var(--chat-fab) - 1.5rem);
  min-height: 16rem;
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: 1.25rem;
  box-shadow: 0 22px 52px rgba(12, 39, 95, 0.22);
  overflow: hidden; animation: chatIn .28s cubic-bezier(.22, 1, .36, 1);
}
.chatbot.is-compact .chatbot__panel {
  height: min(22rem, calc(100dvh - var(--chat-bottom) - var(--chat-fab) - 1.25rem));
  min-height: 12rem;
}
@keyframes chatIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.chatbot__panel[hidden] { display: none !important; }

.chatbot__fab {
  position: relative; order: 3; flex: 0 0 auto;
  width: var(--chat-fab); height: var(--chat-fab);
  border: 0; border-radius: 50%; padding: 0; background: #fff; cursor: pointer;
  box-shadow: 0 8px 22px rgba(12, 39, 95, 0.18), 0 0 0 2px rgba(22, 63, 156, 0.12);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  align-self: flex-end;
}
body.is-home .chatbot {
  --chat-fab: 6.65rem;
}
body.is-home.is-header-ready .chatbot {
  --chat-fab: 4.55rem;
}
@media (max-width: 799px) {
  body.is-home .chatbot { --chat-fab: 5.85rem; }
  body.is-home.is-header-ready .chatbot { --chat-fab: 4.35rem; }
}
.chatbot__fab-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  pointer-events: none;
  /* anim WebP ringan — layer GPU sederhana, hemat HP kentang */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .chatbot__fab-pulse {
    animation: none !important;
  }
}
.chatbot__fab:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 26px rgba(12, 39, 95, 0.22), 0 0 0 2px rgba(212, 160, 23, 0.35);
}
.chatbot__fab.is-talking {
  box-shadow: 0 10px 26px rgba(22, 63, 156, 0.28), 0 0 0 3px rgba(212, 160, 23, 0.45);
  transform: scale(1.04);
}
.chatbot__fab-pulse {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid rgba(22, 63, 156, 0.28);
  animation: fabPulse 2.4s ease-out infinite; pointer-events: none;
}
@keyframes fabPulse {
  0% { transform: scale(0.9); opacity: .8; }
  100% { transform: scale(1.35); opacity: 0; }
}
.chatbot.is-mobile .chatbot__fab-pulse { display: none; }
@media (max-width: 820px), (prefers-reduced-motion: reduce) {
  .chatbot__fab-pulse { display: none !important; }
  .chatbot__bubble.is-show { animation: none; }
  .liquid-topbar,
  .liquid-nav__dock,
  .panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
.home-cv {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}
.ig-fallback__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10rem;
  padding: 1.25rem;
  border-radius: 1rem;
  border: 1px dashed var(--line);
  background: #f4f7fc;
  color: var(--logo-blue);
  font-weight: 650;
  text-align: center;
  text-decoration: none;
}
.chatbot__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .75rem .9rem;
  background: linear-gradient(135deg, var(--logo-blue-deep), var(--logo-blue));
  color: #fff;
  flex-shrink: 0;
}
.chatbot__avatar--bita {
  width: 2.65rem;
  height: 2.65rem;
  min-width: 2.65rem;
  max-width: 2.65rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
  padding: 0;
  font-size: 0;
}
.chatbot__avatar--bita img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  border-radius: 50%;
}
.chatbot.is-talking .chatbot__avatar--bita {
  box-shadow: 0 0 0 2px rgba(255, 210, 100, 0.75), 0 0 14px rgba(212, 160, 23, 0.4);
}
.chatbot__head-meta { min-width: 0; flex: 1; }
.chatbot__head strong {
  display: block;
  font-size: 1rem;
  line-height: 1.2;
}
.chatbot__head span {
  display: block;
  font-size: .75rem;
  opacity: .9;
  margin-top: .12rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chatbot__close {
  margin-left: auto;
  border: 0;
  background: rgba(255,255,255,.18);
  color: #fff;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  font-size: 0 !important;
  line-height: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  user-select: none;
  transition: all 0.18s ease;
}
.chatbot__close svg {
  display: block;
  pointer-events: none;
  transition: transform 0.18s ease;
}
.chatbot__close:hover {
  background: rgba(255,255,255,.32);
}
.chatbot__close:hover svg {
  transform: rotate(90deg) scale(1.1);
}
.chatbot__messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .85rem .9rem;
  background: #f0f4fb;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  -webkit-overflow-scrolling: touch;
}
.chatbot__msg {
  max-width: 88%;
  padding: .65rem .85rem;
  border-radius: 1rem;
  font-size: .9rem;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.chatbot__msg--bot {
  align-self: flex-start;
  background: #fff;
  border: 1px solid rgba(12, 39, 95, 0.08);
  color: var(--ink);
  border-bottom-left-radius: .28rem;
  box-shadow: 0 2px 8px rgba(12, 39, 95, 0.04);
}
.chatbot__msg--user {
  align-self: flex-end;
  background: var(--logo-blue);
  color: #fff;
  border-bottom-right-radius: .28rem;
}
.chatbot__typing.is-live {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .55rem .35rem .35rem;
  max-width: 92%;
}
.chatbot__typing-face {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #e8eefc;
}
.chatbot__typing-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
.chatbot__typing-dots { display: inline-flex; gap: .28rem; align-items: center; }
.chatbot__typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--logo-blue);
  animation: typingDot 1s infinite ease-in-out;
}
.chatbot__typing-dots span:nth-child(2) { animation-delay: .15s; }
.chatbot__typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes typingDot {
  0%, 80%, 100% { opacity: .35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
.chatbot__form {
  display: flex;
  gap: .45rem;
  padding: .7rem .75rem;
  border-top: 1px solid rgba(12, 39, 95, 0.08);
  background: #fff;
  flex-shrink: 0;
}
.chatbot__form input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(22, 63, 156, 0.2);
  border-radius: 999px;
  padding: .65rem 1rem;
  font: inherit;
  font-size: .9rem;
  background: #f8fafc;
}
.chatbot__form input:focus {
  outline: none;
  border-color: var(--logo-blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(22, 63, 156, 0.12);
}
.chatbot__form button {
  width: 2.65rem;
  height: 2.65rem;
  border: 0;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--logo-blue), var(--logo-blue-deep));
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  display: grid;
  place-items: center;
}
.chatbot__form button:hover { filter: brightness(1.06); }
.chatbot.is-free .chatbot__fab {
  box-shadow: 0 8px 22px rgba(12, 39, 95, 0.2), 0 0 0 2px rgba(212, 160, 23, 0.4);
}

/* Nav bottom */
.liquid-nav { bottom: .75rem; }

/* —— Topbar liquid glass (selaras bottom nav) —— */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
  padding:
    calc(env(safe-area-inset-top, 0px) + var(--topbar-inset))
    var(--topbar-inset)
    0;
}
.topbar__shell {
  position: relative;
  min-height: var(--topbar-h);
  width: 100%;
  max-width: min(96rem, 100%);
  margin: 0 auto;
}

.topbar__row {
  display: flex;
  align-items: center;
  min-height: var(--topbar-h);
  padding:
    .45rem
    var(--topbar-pad-x)
    .45rem
    calc(var(--brand-left) + var(--brand-logo-size) + var(--brand-gap));
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-top-color: rgba(255, 255, 255, 0.8);
  box-shadow: var(--glass-edge);
  backdrop-filter: blur(18px) saturate(1.65);
  -webkit-backdrop-filter: blur(18px) saturate(1.65);
  opacity: 0;
  transform: translateY(-10px) scale(.98);
  transition: opacity .32s ease, transform .32s ease;
  pointer-events: none;
}
body.is-header-ready .topbar__row,
body.is-inner .topbar__row {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Language switcher segmented control (mobile tweak) */
@media (max-width: 767.98px) {
  .lang-switcher {
    padding: 2px;
    margin-left: 0.2rem;
  }
  .lang-switcher__btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    gap: 0.2rem;
  }
  .lang-switcher__flag {
    font-size: 0.8rem;
  }
}

/* Logo: fixed — animasi home → nest di kiri glass bar */
.brand-logo {
  position: fixed;
  z-index: 120;
  left: 50%;
  top: 16vh;
  width: 160px;
  height: 160px;
  transform: translateX(-50%);
  pointer-events: auto;
  text-decoration: none;
  opacity: 1 !important;
  visibility: visible !important;
  display: grid;
  place-items: center;
}
.brand-logo__ring {
  display: none;
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.45));
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 6px 14px rgba(12, 39, 95, 0.1);
  z-index: -1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.is-scrolled .brand-logo__ring,
body.is-inner .brand-logo__ring {
  display: block;
}
.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  background: transparent !important;
  padding: 0;
  box-shadow: none;
  filter: drop-shadow(0 10px 22px rgba(12, 39, 95, 0.22));
  display: block;
  position: relative;
  z-index: 1;
}
body.is-scrolled .brand-logo img,
body.is-inner .brand-logo img {
  filter: drop-shadow(0 2px 6px rgba(12, 39, 95, 0.1));
  padding: 2px;
}
@media (max-width: 640px) {
  .brand-logo {
    width: 118px;
    height: 118px;
    top: 12vh;
  }
  .hero__spacer {
    width: 118px;
    height: 118px;
  }
}
body.is-home:not(.is-scrolled) .brand-logo img {
  /* float dihapus — hemat GPU saat idle */
}

.topbar__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity .28s ease;
}
body.is-header-ready .topbar__meta,
body.is-inner .topbar__meta { opacity: 1; }

.topbar__name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.12rem;
  text-decoration: none;
  color: inherit;
  pointer-events: auto;
}
.topbar__name strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.02rem, 2.1vw, 1.22rem);
  font-weight: 700;
  color: var(--logo-blue-deep);
  line-height: 1.15;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.topbar__tagline {
  display: block;
  font-family: var(--font);
  font-size: clamp(0.68rem, 1.35vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(22rem, 52vw);
}

@media (max-width: 640px) {
  :root {
    --topbar-h: 64px;
    --topbar-inset: .45rem;
    --topbar-pad-x: 1rem;
    --brand-logo-size: 3rem;
    --brand-left: .9rem;
    --brand-gap: .65rem;
  }
  .topbar__name strong {
    font-size: .92rem;
  }
  .topbar__tagline {
    font-size: .65rem;
    max-width: min(11.5rem, 48vw);
  }
}
@media (max-width: 380px) {
  .topbar__name strong {
    font-size: .8rem;
  }
  .topbar__tagline {
    font-size: .6rem;
    max-width: 9.5rem;
  }
}

/* —— Hero —— */
.hero {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1.25rem 7.5rem;
  text-align: center;
  overflow: clip;
}
.hero__glow {
  position: absolute;
  width: min(32rem, 90vw);
  height: min(32rem, 90vw);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, transparent 55%),
    radial-gradient(circle, rgba(22, 63, 156, 0.14), transparent 68%);
  pointer-events: none;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(2px);
  opacity: .95;
}
.hero__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(28px);
  opacity: .45;
}
.hero__orb--a {
  width: 11rem;
  height: 11rem;
  top: 18%;
  left: 8%;
  background: rgba(90, 140, 220, 0.28);
}
.hero__orb--b {
  width: 9rem;
  height: 9rem;
  bottom: 22%;
  right: 10%;
  background: rgba(212, 160, 23, 0.16);
}

.hero__stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(36rem, 100%);
  gap: .15rem;
}
.hero__logo-slot {
  display: grid;
  place-items: center;
  margin-bottom: .15rem;
}
.hero__spacer {
  width: 168px;
  height: 168px;
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
}
.hero__text {
  position: relative;
  z-index: 1;
  margin-top: .15rem;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kicker {
  margin: 0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--logo-blue);
}
.hero h1 {
  margin: .55rem 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 5.2vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--logo-blue-deep);
}

/* Liquid glass tagline — float naik + shimmer */
.hero__tagline {
  position: relative;
  isolation: isolate;
  margin: 1.1rem auto 0;
  max-width: 22rem;
  color: var(--logo-blue-deep);
  font-size: clamp(.88rem, 2.4vw, .98rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .01em;
  padding: .72rem 1.35rem;
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.28));
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 10px 28px rgba(12, 39, 95, 0.12),
    0 2px 8px rgba(12, 39, 95, 0.06);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  overflow: hidden;
}
.hero__tagline-txt {
  position: relative;
  z-index: 1;
}
.hero__tagline-shine {
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 65%
  );
  transform: translateX(-40%);
  animation: glassShine 7s ease-in-out 1.5s 2;
  pointer-events: none;
  z-index: 0;
}
@keyframes glassShine {
  0%, 35% { transform: translateX(-55%) skewX(-12deg); opacity: 0; }
  45% { opacity: .85; }
  65%, 100% { transform: translateX(55%) skewX(-12deg); opacity: 0; }
}

.hero__hint {
  position: absolute;
  bottom: 7.25rem;
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--logo-blue-deep, #0c275f);
  opacity: .78;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* Entrance after loader: kicker → title → glass → hint */
.hero [data-hero-in] {
  opacity: 0;
  transform: translateY(18px);
}
.hero.is-enter .kicker {
  animation: heroIn .7s cubic-bezier(.22, 1, .36, 1) .12s both;
}
.hero.is-enter h1 {
  animation: heroIn .75s cubic-bezier(.22, 1, .36, 1) .28s both;
}
.hero.is-enter .hero__tagline {
  animation: heroIn .75s cubic-bezier(.22, 1, .36, 1) .48s both;
}
.hero.is-enter .hero__hint {
  animation: heroIn .65s ease .7s both;
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .hero__spacer {
    width: 118px;
    height: 118px;
  }
  .hero {
    padding-bottom: 8.5rem;
  }
  .hero__tagline {
    padding: .62rem 1.1rem;
    font-size: .86rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__glow,
  .hero__orb,
  .hero__tagline,
  .hero__tagline-shine,
  body.is-home:not(.is-scrolled) .brand-logo img,
  .hero.is-enter [data-hero-in] {
    animation: none !important;
  }
  .hero [data-hero-in] {
    opacity: 1;
    transform: none;
  }
  .hero__tagline { transform: none; }
}

.inner-spacer {
  height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + var(--topbar-inset) + 1.1rem);
}

/* —— Main content —— */
.main {
  position: relative;
  z-index: 2;
  padding: 1.75rem 1.15rem 1.5rem;
  max-width: 64rem;
  margin: 0 auto;
}
.home-stack .section { margin-bottom: 2.75rem; }
.home-guest {
  scroll-margin-top: calc(var(--topbar-h, 72px) + 0.9rem);
}
.home-guest__head { margin-bottom: 1.15rem; }
.guest-form {
  max-width: 42rem;
}
.guest-form.is-sending {
  opacity: 0.72;
  pointer-events: none;
}
.guest-form__alert {
  max-width: 42rem;
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.55rem;
  background: #fdecec;
  color: #8a1f1f;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.45;
}
.guest-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.35rem 1.85rem;
}
@media (max-width: 640px) {
  .guest-form__grid { grid-template-columns: 1fr; gap: 1.15rem; }
}
.guest-field {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}
.guest-field--full { grid-column: 1 / -1; }
.guest-field span {
  font-size: 0.84rem;
  font-weight: 600;
  color: #3d4660;
}
.guest-field i {
  font-style: normal;
  color: #c0392b;
  font-weight: 700;
}
.guest-field input,
.guest-field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid #c5ccd8;
  border-radius: 0;
  background: transparent;
  padding: 0.4rem 0 0.55rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  resize: vertical;
}
.guest-field input::placeholder,
.guest-field textarea::placeholder {
  color: #9aa3b5;
  font-weight: 400;
}
.guest-field input:focus,
.guest-field textarea:focus {
  outline: none;
  border-bottom-color: var(--logo-blue);
}
.guest-form__captcha {
  margin: 1.35rem 0 1.15rem;
  min-height: 78px;
  padding: 0.15rem;
  width: fit-content;
  max-width: 100%;
}
.guest-form__captcha.is-warn {
  outline: 2px solid #c0392b;
  outline-offset: 6px;
  border-radius: 0.35rem;
}
.guest-form__hint {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #8a1f1f;
}
.guest-form__acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  max-width: 18rem;
}
.guest-form__btn {
  appearance: none;
  background: #fff;
  border: 1px solid #2a3144;
  border-radius: 0.2rem;
  padding: 0.55rem 1rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1c2333;
  cursor: pointer;
}
.guest-form__btn:hover:not(:disabled) {
  background: #f4f6fb;
}
.guest-form__btn:focus-visible {
  outline: 2px solid var(--logo-blue);
  outline-offset: 2px;
}
.guest-form__btn--send:not(:disabled) {
  background: var(--logo-blue);
  border-color: var(--logo-blue);
  color: #fff;
}
.guest-form__btn--send:not(:disabled):hover {
  background: var(--logo-blue-deep);
  border-color: var(--logo-blue-deep);
}
.guest-form__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #e8ecf3;
  border-color: #c5ccd8;
  color: #6b7589;
}

.guest-done {
  max-width: 26rem;
  padding: 1.6rem 1.35rem 1.5rem;
  border-radius: 1.1rem;
  background: #fff;
  border: 1px solid rgba(12, 39, 95, 0.1);
  box-shadow: 0 16px 40px rgba(12, 39, 95, 0.08);
  text-align: center;
}
.guest-done__mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  background: #e8f6ee;
  color: #166534;
  font-size: 1.35rem;
  font-weight: 800;
}
.guest-done__kicker {
  margin: 0 0 0.25rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #166534;
}
.guest-done__title {
  margin: 0 0 0.45rem;
  font-family: var(--display);
  font-size: 1.55rem;
  color: var(--logo-blue-deep);
}
.guest-done__text {
  margin: 0 0 1.1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.guest-done__again {
  display: inline-flex;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--logo-blue);
  text-decoration: none;
}
.guest-done__again:hover { text-decoration: underline; }
.section { margin-bottom: 3.25rem; }

/* —— Tema per section beranda —— */
.sec-theme {
  position: relative;
  border-radius: calc(var(--radius) + 0.15rem);
  padding: 0.15rem 0 0.35rem;
}
.sec-theme--ig {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
  background:
    radial-gradient(circle at 90% 10%, rgba(225, 48, 108, 0.1), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(131, 58, 180, 0.08), transparent 40%),
    rgba(255, 255, 255, 0.6);
}

/* —— Kehidupan kampus: fasilitas mosaik + jalur ekskul —— */
.life {
  margin-bottom: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.life__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.25rem;
}
.life__intro {
  max-width: 36rem;
}
.life__kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--logo-blue);
}
.life__title {
  margin: 0.35rem 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.55rem, 3.2vw, 2.05rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--logo-blue-deep);
}
.life__lead {
  margin: 0.55rem 0 0;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.life__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.life__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--logo-blue), var(--logo-blue-deep));
  box-shadow: 0 8px 20px rgba(22, 63, 156, 0.22);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.life__link:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.life__link--soft {
  color: var(--logo-blue-deep);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(12, 39, 95, 0.12);
  box-shadow: none;
}
.life__link--soft:hover {
  filter: none;
  background: #fff;
  border-color: rgba(22, 63, 156, 0.28);
}

.life__fasilitas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (min-width: 860px) {
  .life__fasilitas {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
  }
}
.life-spot {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 11.5rem;
  padding: 1.05rem 1rem 1rem;
  border-radius: 1.2rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.88), rgba(236, 242, 252, 0.62));
  border: 1px solid rgba(12, 39, 95, 0.1);
  box-shadow: 0 12px 28px rgba(12, 39, 95, 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.life-spot::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--logo-gold), rgba(212, 160, 23, 0.15));
  opacity: 0.85;
}
.life-spot:hover {
  transform: translateY(-3px);
  border-color: rgba(22, 63, 156, 0.22);
  box-shadow: 0 18px 36px rgba(12, 39, 95, 0.12);
}
.life-spot__watermark {
  position: absolute;
  right: 0.55rem;
  bottom: -0.25rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 4.2rem;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(22, 63, 156, 0.07);
  pointer-events: none;
  user-select: none;
}
.life-spot__meta {
  position: relative;
  z-index: 1;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--logo-blue);
}
.life-spot__name {
  position: relative;
  z-index: 1;
  margin-top: 0.55rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--logo-blue-deep);
}
.life-spot__desc {
  position: relative;
  z-index: 1;
  margin-top: 0.45rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 14rem;
}
.life-spot__cta {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--logo-blue);
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.life-spot:hover .life-spot__cta {
  opacity: 1;
}

.life__ekskul {
  margin-top: 0.85rem;
  padding: clamp(1rem, 2.2vw, 1.35rem);
  border-radius: 1.3rem;
  background:
    linear-gradient(
      145deg,
      rgba(12, 39, 95, 0.98) 0%,
      rgba(22, 63, 156, 0.94) 60%,
      rgba(30, 74, 170, 0.92) 100%
    );
  box-shadow: 0 18px 40px rgba(12, 39, 95, 0.18);
}
.life__ekskul-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.45rem 1rem;
  margin-bottom: 0.85rem;
}
.life__ekskul-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: #fff;
}
.life__ekskul-hint {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 230, 160, 0.92);
}
.life-path {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}
@media (min-width: 780px) {
  .life-path {
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 1.25rem;
  }
}
.life-path__item {
  display: grid;
  grid-template-columns: 1rem 1fr auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem 0.55rem;
  border-radius: 0.85rem;
  text-decoration: none;
  color: #fff;
  transition: background 0.15s ease;
}
.life-path__item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.life-path__dot {
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.4rem;
  border-radius: 50%;
  background: var(--logo-gold);
  box-shadow: 0 0 0 4px rgba(212, 160, 23, 0.18);
}
.life-path__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.life-path__name {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.life-path__desc {
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}
.life-path__go {
  opacity: 0.4;
  transition: opacity 0.15s ease, transform 0.15s ease;
  margin-top: 0.15rem;
}
.life-path__item:hover .life-path__go {
  opacity: 1;
  transform: translateX(3px);
}

/* —— Prestasi: timeline per tahun (multi-item digabung) —— */
.ach {
  margin-bottom: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.ach__head {
  margin-bottom: 1.35rem;
  max-width: 38rem;
}
.ach__kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--logo-blue);
}
.ach__title {
  margin: 0.35rem 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.55rem, 3.2vw, 2.05rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--logo-blue-deep);
}
.ach__lead {
  margin: 0.55rem 0 0;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.ach__empty {
  margin: 0;
  padding: 1.1rem 1.15rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(12, 39, 95, 0.08);
  color: var(--muted);
}
.ach-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ach-year {
  display: grid;
  grid-template-columns: 3.75rem 1.15rem 1fr;
  gap: 0 0.75rem;
  align-items: stretch;
}
@media (min-width: 640px) {
  .ach-year {
    grid-template-columns: 5.25rem 1.25rem 1fr;
    gap: 0 1.05rem;
  }
}
.ach-year__label {
  padding-top: 0.15rem;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.28rem;
}
.ach-year__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.02em;
  color: var(--logo-blue);
  line-height: 1.15;
}
.ach-year__count {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a6a12;
  background: rgba(212, 160, 23, 0.14);
  border: 1px solid rgba(212, 160, 23, 0.28);
  padding: 0.18rem 0.4rem;
  border-radius: 999px;
  white-space: nowrap;
}
.ach-year__rail {
  position: relative;
  display: flex;
  justify-content: center;
}
.ach-year__rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    rgba(212, 160, 23, 0.18),
    rgba(22, 63, 156, 0.22) 45%,
    rgba(22, 63, 156, 0.1)
  );
}
.ach-year:first-child .ach-year__rail::before {
  top: 0.55rem;
}
.ach-year:last-child .ach-year__rail::before {
  bottom: calc(100% - 1.15rem);
}
.ach-year__node {
  position: relative;
  z-index: 1;
  width: 0.78rem;
  height: 0.78rem;
  margin-top: 0.38rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--logo-gold);
  box-shadow:
    0 0 0 4px rgba(212, 160, 23, 0.18),
    0 0 0 1px rgba(12, 39, 95, 0.08);
}
.ach-year--multi .ach-year__node {
  width: 0.9rem;
  height: 0.9rem;
  background: linear-gradient(145deg, #f0c84a, var(--logo-gold));
  box-shadow:
    0 0 0 5px rgba(212, 160, 23, 0.22),
    0 0 0 1px rgba(12, 39, 95, 0.08);
}

.ach-year__stack {
  min-width: 0;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.55rem;
  border-radius: 1.15rem;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.72), rgba(236, 242, 252, 0.48));
  border: 1px solid rgba(12, 39, 95, 0.08);
  box-shadow: 0 10px 26px rgba(12, 39, 95, 0.05);
}
.ach-year:last-child .ach-year__stack {
  margin-bottom: 0;
}
.ach-year--multi .ach-year__stack {
  border-color: rgba(212, 160, 23, 0.22);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.88), rgba(252, 246, 230, 0.42));
}

.ach-card {
  padding: 0.85rem 0.95rem 0.9rem;
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(12, 39, 95, 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ach-card:hover {
  border-color: rgba(22, 63, 156, 0.14);
  box-shadow: 0 8px 20px rgba(12, 39, 95, 0.06);
}
.ach-year--multi .ach-card {
  position: relative;
  padding-left: 1.05rem;
}
.ach-year--multi .ach-card::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 0.95rem;
  bottom: 0.95rem;
  width: 2px;
  border-radius: 99px;
  background: rgba(22, 63, 156, 0.16);
}
.ach-card__kat {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a6a12;
}
.ach-card__title {
  margin: 0.3rem 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1rem, 1.9vw, 1.15rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--logo-blue-deep);
}
.ach-card__desc {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.ach-card__detail {
  margin: 0.5rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(12, 39, 95, 0.1);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
}
.ach-year--multi .ach-card__detail {
  display: none;
}
@media (min-width: 720px) {
  .ach-year--multi .ach-year__stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
  }
  .ach-year--multi .ach-card__detail {
    display: block;
  }
}

.ach__more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}
.ach__more-btn {
  appearance: none;
  border: 1px solid rgba(22, 63, 156, 0.22);
  background: rgba(255, 255, 255, 0.75);
  color: var(--logo-blue-deep);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.ach__more-btn:hover {
  background: #fff;
  border-color: rgba(22, 63, 156, 0.4);
  transform: translateY(-1px);
}
.ach-track--extra {
  margin-top: 1.15rem;
  animation: lifeFade .35s ease;
}
.ach-track--extra[hidden] {
  display: none !important;
}
@keyframes lifeFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* —— Program keahlian: roster —— */
.majors {
  margin-bottom: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.majors__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
}
.majors__kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--logo-blue);
}
.majors__title {
  margin: 0.35rem 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.55rem, 3.2vw, 2.05rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--logo-blue-deep);
}
.majors__lead {
  margin: 0.5rem 0 0;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 32rem;
}
.majors__all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--logo-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 0.35rem 0;
}
.majors__all:hover {
  color: var(--logo-blue-deep);
  border-bottom-color: rgba(22, 63, 156, 0.35);
}
.majors-roster {
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  border-radius: 1.35rem;
  border: 1px solid rgba(12, 39, 95, 0.1);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.86), rgba(236, 242, 252, 0.55));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 16px 40px rgba(12, 39, 95, 0.08);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
.majors-roster > li + li {
  border-top: 1px solid rgba(12, 39, 95, 0.07);
}
.majors-row {
  display: grid;
  grid-template-columns: 2.75rem 1fr auto;
  gap: 0.85rem 1rem;
  align-items: center;
  padding: 1rem 0.9rem;
  border-radius: 1rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.majors-row:hover {
  background: rgba(22, 63, 156, 0.055);
}
.majors-row__n {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
  color: rgba(22, 63, 156, 0.28);
  line-height: 1;
}
.majors-row:hover .majors-row__n {
  color: var(--logo-gold);
}
.majors-row__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}
.majors-row__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.02em;
  color: var(--logo-blue-deep);
  line-height: 1.25;
}
.majors-row__brief {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.majors-row__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--logo-blue);
  white-space: nowrap;
  opacity: 0.7;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.majors-row:hover .majors-row__cta {
  opacity: 1;
  transform: translateX(3px);
}

@media (max-width: 520px) {
  .life__fasilitas {
    grid-template-columns: 1fr;
  }
  .life-spot {
    min-height: 9.5rem;
  }
  .majors-row {
    grid-template-columns: 2.2rem 1fr;
  }
  .majors-row__cta {
    grid-column: 2;
    justify-self: start;
  }
}

/* —— Site footer: identitas + copyright (tanpa menu dobel nav) —— */
.site-footer {
  position: relative;
  z-index: 2;
  margin: 1.25rem 0 4rem;
  padding: 0 0.85rem;
}
.site-footer__shell {
  max-width: 64rem;
  margin: 0 auto;
  border-radius: 1rem;
  overflow: hidden;
  background:
    linear-gradient(
      155deg,
      rgba(12, 39, 95, 0.97) 0%,
      rgba(22, 63, 156, 0.94) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 12px 28px rgba(12, 39, 95, 0.16);
}
.site-footer__shell::before {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, var(--logo-gold) 50%, transparent 95%);
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nl-form {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem 1.5rem;
  align-items: center;
  padding: 1.15rem 1.25rem 1.05rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nl-form__kicker {
  margin: 0 0 0.18rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f5d76e;
}
.nl-form__title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.2;
}
.nl-form__lead {
  margin: 0.28rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}
.nl-form__row {
  display: flex;
  gap: 0.4rem;
  min-width: min(100%, 20rem);
  align-items: stretch;
  padding: 0.28rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.nl-form__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #fff;
  padding: 0.55rem 0.85rem;
  font: inherit;
  font-size: 0.9rem;
}
.nl-form__input::placeholder { color: rgba(255, 255, 255, 0.42); }
.nl-form__input:focus { outline: none; }
.nl-form__row:focus-within {
  border-color: rgba(245, 215, 110, 0.5);
  box-shadow: 0 0 0 3px rgba(245, 215, 110, 0.12);
}
.nl-form__btn {
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 1.05rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  color: #1a1200;
  background: linear-gradient(135deg, #d4a017, #e8c45a);
}
.nl-form__btn:hover { filter: brightness(1.06); }
.nl-form__btn:disabled { opacity: 0.7; cursor: wait; }
.nl-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.nl-form__msg {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
}
.nl-form__msg.is-ok { color: #86efac; }
.nl-form__msg.is-err { color: #fca5a5; }
.nl-form__lead a {
  color: #f5d76e;
  font-weight: 700;
  text-decoration: none;
}
.nl-form__lead a:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .nl-form {
    grid-template-columns: 1fr;
    padding: 1rem 1rem 0.9rem;
  }
  .nl-form__row { width: 100%; }
}

/* Halaman newsletter */
.nl {
  padding: 0.35rem 0 2.75rem;
  max-width: 64rem;
  margin: 0 auto;
}
.nl--narrow { max-width: 34rem; }
.nl__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.5rem 2rem;
  align-items: start;
}
.nl__kicker {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--logo-blue);
}
.nl__title {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.8vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--logo-blue-deep);
}
.nl__lead {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft, #3a4a66);
  max-width: 34rem;
}
.nl__points {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.nl__points li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--logo-blue-deep);
}
.nl__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--logo-gold, #d4a017);
}
.nl-card {
  display: grid;
  gap: 0.55rem;
  padding: 1.45rem 1.35rem 1.4rem;
  border-radius: 1.35rem;
  border: 1px solid rgba(12, 39, 95, 0.1);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(236, 242, 252, 0.62));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 18px 40px rgba(12, 39, 95, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nl-card__kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--logo-gold, #d4a017);
}
.nl-card__title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--logo-blue-deep);
}
.nl-card__hint {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft, #3a4a66);
}
.nl-card__field {
  display: grid;
  gap: 0.32rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.nl-card__field input {
  width: 100%;
  padding: 0.78rem 0.95rem;
  border-radius: 0.85rem;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink, #121c2e);
}
.nl-card__field input:focus {
  outline: none;
  border-color: rgba(22, 63, 156, 0.42);
  box-shadow: 0 0 0 3px rgba(22, 63, 156, 0.12);
}
.nl-card__btn {
  margin-top: 0.25rem;
  width: 100%;
  border: 0;
  border-radius: 0.9rem;
  padding: 0.82rem 1.1rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--logo-blue), var(--logo-blue-deep));
}
.nl-card__btn:hover { filter: brightness(1.06); }
.nl-card__btn:disabled { opacity: 0.7; cursor: wait; }
.nl-card .nl-form__msg {
  color: var(--ink-soft, #3a4a66);
}
.nl-card .nl-form__msg.is-ok { color: #15803d; }
.nl-card .nl-form__msg.is-err { color: #b91c1c; }
.nl-list {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(12, 39, 95, 0.08);
}
.nl-list__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.nl-list__title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.45rem;
  letter-spacing: -0.03em;
  color: var(--logo-blue-deep);
}
.nl-list__count {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  background: rgba(212, 160, 23, 0.12);
  color: #9a6700;
  border: 1px solid rgba(212, 160, 23, 0.28);
}
.nl-list__empty {
  margin: 0;
  padding: 1.1rem 1.15rem;
  border-radius: 1rem;
  border: 1px dashed var(--line);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.5);
}
.nl-roster {
  list-style: none;
  margin: 0;
  padding: 0.3rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(12, 39, 95, 0.1);
  background: linear-gradient(160deg, rgba(255,255,255,0.9), rgba(236,242,252,0.55));
  box-shadow: 0 12px 32px rgba(12, 39, 95, 0.06);
}
.nl-roster__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 1rem;
  padding: 0.85rem 0.95rem;
}
.nl-roster > li + li { border-top: 1px solid rgba(12, 39, 95, 0.07); }
.nl-roster__mail {
  font-weight: 700;
  color: var(--logo-blue-deep);
  word-break: break-word;
}
.nl-roster__meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.nl-pill {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: #eef2f8;
  color: var(--muted);
}
.nl-pill.is-on {
  background: rgba(21, 128, 61, 0.12);
  color: #15803d;
}
.nl-done {
  padding: 1.75rem 1.5rem;
  border-radius: 1.3rem;
  border: 1px solid rgba(12, 39, 95, 0.1);
  background: linear-gradient(160deg, rgba(255,255,255,0.94), rgba(236,242,252,0.6));
  box-shadow: 0 16px 40px rgba(12, 39, 95, 0.08);
}
.nl-done__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.15rem;
}
@media (max-width: 800px) {
  .nl__grid { grid-template-columns: 1fr; gap: 1.25rem; }
}
.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.5rem;
  padding: 0.95rem 1.15rem 1rem;
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}
.site-footer__brand img {
  width: 2.35rem;
  height: 2.35rem;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
.site-footer__brand-text {
  min-width: 0;
}
.site-footer__brand strong {
  display: block;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.25;
}
.site-footer__brand span {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.7rem;
  font-weight: 600;
  font-style: italic;
  color: rgba(255, 230, 160, 0.85);
}
.site-footer__legal {
  text-align: right;
  min-width: 0;
}
.site-footer__copy {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.35;
}
.site-footer__copy-mark {
  color: var(--logo-gold);
  font-weight: 700;
}
.site-footer__addr {
  margin: 0.25rem 0 0;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.35;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  margin: 0.55rem 0 0;
}
.site-footer__links a {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}
.site-footer__links a:hover {
  color: #f5d76e;
}
@media (min-width: 800px) {
  .site-footer {
    margin-bottom: 4.15rem;
  }
}
@media (min-width: 900px) {
  .site-footer__shell {
    max-width: 72rem;
  }
}
@media (max-width: 640px) {
  .site-footer {
    margin-bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px));
  }
  .site-footer__row {
    flex-direction: column;
    align-items: flex-start;
  }
  .site-footer__legal {
    text-align: left;
  }
  .site-footer__copy {
    justify-content: flex-start;
  }
}
.section-title {
  margin: .35rem 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  color: var(--logo-blue-deep);
  letter-spacing: -.02em;
}
.section-lead {
  margin: .55rem 0 0;
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.55;
  max-width: 34rem;
}

.panel {
  background: var(--glass);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-top-color: rgba(255, 255, 255, 0.75);
  border-radius: var(--radius);
  box-shadow: var(--glass-edge);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

.grid-2, .grid-3 { display: grid; gap: 1rem; }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* —— Sambutan Kepala Sekolah (editorial + liquid glass) —— */
.home-stack .sambutan.section {
  margin-bottom: 2.75rem;
}
.sambutan {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.sambutan__shell {
  display: grid;
  gap: clamp(1.35rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.1rem, 2.5vw, 1.65rem);
  border-radius: 1.5rem;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.52) 48%,
      rgba(236, 242, 252, 0.55) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 18px 48px rgba(12, 39, 95, 0.1);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
}
@media (min-width: 860px) {
  .sambutan__shell {
    grid-template-columns: minmax(15rem, 0.88fr) 1.22fr;
    padding: clamp(1.35rem, 2.4vw, 1.85rem) clamp(1.35rem, 2.6vw, 2.1rem);
  }
}

.sambutan__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  text-align: center;
}
.sambutan__frame {
  position: relative;
  margin: 0;
  width: min(18rem, 82vw);
  aspect-ratio: 3 / 4;
  border-radius: 1.25rem;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(12, 39, 95, 0.12),
    0 16px 36px rgba(12, 39, 95, 0.14);
}
.sambutan__slides {
  position: absolute;
  inset: 0;
}
.sambutan__frame-edge {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
.sambutan__frame::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.85rem;
  z-index: 2;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--logo-gold), transparent);
  opacity: 0.85;
  pointer-events: none;
}
.sambutan__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  opacity: 1;
}
.sambutan__img.is-prev {
  opacity: 0;
  transform: translateX(-10%);
}
.sambutan__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.15rem;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}
.sambutan__dot {
  width: 0.45rem;
  height: 0.45rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(12, 39, 95, 0.2);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}
.sambutan__dot.is-on {
  width: 1.15rem;
  background: var(--logo-gold);
}
@media (prefers-reduced-motion: reduce) {
  .sambutan__img {
    transition: opacity 0.2s ease;
    transform: none;
  }
  .sambutan__img.is-prev { transform: none; }
}
.sambutan__id {
  max-width: 18rem;
}
.sambutan__nama {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--logo-blue-deep);
  letter-spacing: -0.01em;
}
.sambutan__jabatan {
  margin: 0.28rem 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--logo-blue);
}
.sambutan__school {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

.sambutan__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.15rem 0.15rem 0.25rem;
}
@media (min-width: 860px) {
  .sambutan__copy {
    padding: 0.35rem 0.35rem 0.35rem 0.5rem;
    border-left: 1px solid rgba(12, 39, 95, 0.1);
    padding-left: clamp(1.25rem, 2.5vw, 1.85rem);
  }
}

.sambutan__kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--logo-blue);
}
.sambutan__title {
  margin: 0.4rem 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.65rem, 3.4vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--logo-blue-deep);
}
.sambutan__lead {
  margin: 0.55rem 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  font-style: italic;
  color: #8a6a12;
  letter-spacing: 0.01em;
}

.sambutan__text {
  position: relative;
  margin-top: 1.15rem;
  max-width: 36rem;
  padding-top: 0.6rem;
}
.sambutan__mark {
  position: absolute;
  top: -1.25rem;
  left: -0.6rem;
  font-family: var(--display);
  font-size: 3.6rem;
  line-height: 1;
  color: rgba(22, 63, 156, 0.08);
  pointer-events: none;
  user-select: none;
}
.sambutan__text p {
  margin: 0 0 0.85rem;
  font-size: clamp(0.94rem, 1.7vw, 1.02rem);
  line-height: 1.72;
  color: var(--ink-soft);
}
.sambutan__text p:last-child {
  margin-bottom: 0;
}

.sambutan__actions {
  margin-top: 1.35rem;
}
.sambutan__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.86rem;
  color: #fff;
  background: linear-gradient(135deg, var(--logo-blue), var(--logo-blue-deep));
  box-shadow: 0 10px 24px rgba(22, 63, 156, 0.28);
  transition: transform 0.18s ease, filter 0.18s ease;
}
.sambutan__cta span {
  transition: transform 0.18s ease;
}
.sambutan__cta:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.sambutan__cta:hover span {
  transform: translateX(3px);
}

@media (max-width: 859px) {
  .sambutan__shell {
    text-align: center;
  }
  .sambutan__copy {
    align-items: center;
  }
  .sambutan__text {
    text-align: left;
  }
  .sambutan__mark {
    left: 0;
  }
}

/* Profil kepsek — foto full-body, TANPA zoom/crop aneh */
.profil-kepsek {
  display: grid;
  grid-template-columns: minmax(14rem, 19rem) 1fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
  margin-top: 1.35rem;
  padding: clamp(1.15rem, 2.5vw, 1.85rem);
  overflow: hidden;
}
.profil-kepsek__photo {
  margin: 0;
  width: 100%;
  max-width: 19rem;
  aspect-ratio: 3 / 4;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 14px 32px rgba(15, 40, 95, 0.12);
  background:
    radial-gradient(ellipse 80% 70% at 50% 20%, rgba(255, 255, 255, 0.28), transparent 55%),
    linear-gradient(165deg, #1a3f9a 0%, #0c275f 55%, #081a42 100%);
}
.profil-kepsek__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
}
.profil-kepsek__body {
  min-width: 0;
  padding: 0.15rem 0.25rem 0.15rem 0;
}
.profil-kepsek__name {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem) !important;
  line-height: 1.25;
  margin: 0.15rem 0 0;
}
.profil-kepsek__role {
  margin: 0.45rem 0 0.85rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--logo-blue-deep, #163f9c);
  opacity: 0.9;
}
.profil-kepsek .section-lead {
  margin: 0;
  font-size: 1rem;
  max-width: 36rem;
  line-height: 1.65;
}
@media (max-width: 640px) {
  .profil-kepsek {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .profil-kepsek__photo {
    max-width: min(16.5rem, 78vw);
  }
  .profil-kepsek__body {
    padding: 0;
  }
  .profil-kepsek .section-lead {
    margin-inline: auto;
  }
  .sambutan__figure { width: min(14rem, 72%); }
}
/* —— Visi / Misi / Tujuan (halaman profil) —— */
.vmt-page-head {
  margin-bottom: 0.35rem;
}
.vmt-block {
  margin-top: 1.5rem;
}
.vmt-block.panel {
  padding: 1.25rem 1.3rem 1.35rem;
}
.vmt-block__head {
  margin-bottom: 1rem;
  max-width: 40rem;
}
.vmt-block__title {
  margin: 0.35rem 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  letter-spacing: -0.025em;
  color: var(--logo-blue-deep);
  line-height: 1.2;
}
.vmt-block__lead {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.vmt-prose {
  margin-top: 0.75rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.7;
}
.vmt-prose p {
  margin: 0 0 0.75rem;
}
.vmt-prose p:last-child {
  margin-bottom: 0;
}

.vmt-pillars {
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 720px) {
  .vmt-pillars {
    grid-template-columns: repeat(3, 1fr);
  }
}
.vmt-pillar {
  padding: 1.1rem 1.1rem 1.15rem;
  border-radius: 1.1rem;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(236, 242, 252, 0.65));
  border: 1px solid rgba(12, 39, 95, 0.1);
  box-shadow: 0 10px 28px rgba(12, 39, 95, 0.06);
  border-top: 3px solid var(--logo-gold);
}
.vmt-pillar__name {
  margin: 0;
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--logo-blue-deep);
  letter-spacing: -0.02em;
}
.vmt-pillar__text {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.vmt-mission {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  counter-reset: misi;
}
.vmt-mission__item {
  counter-increment: misi;
  padding: 1.1rem 1.15rem 1.15rem;
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(12, 39, 95, 0.09);
  box-shadow: 0 10px 26px rgba(12, 39, 95, 0.05);
  position: relative;
  padding-left: 3.4rem;
}
.vmt-mission__item::before {
  content: counter(misi, decimal-leading-zero);
  position: absolute;
  left: 1rem;
  top: 1.15rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--logo-gold);
  letter-spacing: -0.03em;
}
.vmt-mission__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--logo-blue-deep);
}
.vmt-list {
  margin: 0.65rem 0 0;
  padding: 0 0 0 1.1rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.55;
}
.vmt-list li {
  margin: 0.3rem 0;
}
.vmt-list li::marker {
  color: var(--logo-blue);
}

.vmt-goals {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.vmt-goal {
  padding: 1.05rem 1.15rem 1.15rem;
  border-radius: 1.05rem;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.88), rgba(242, 246, 252, 0.7));
  border: 1px solid rgba(12, 39, 95, 0.08);
  box-shadow: 0 8px 22px rgba(12, 39, 95, 0.05);
}
.vmt-goal__title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--logo-blue-deep);
}
.vmt-goal__label {
  margin: 0.65rem 0 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a6a12;
}

.vmt-block--hebat .vmt-block__title {
  letter-spacing: 0.12em;
}
.vmt-hebat {
  display: grid;
  gap: 0.65rem;
}
@media (min-width: 720px) {
  .vmt-hebat {
    grid-template-columns: repeat(2, 1fr);
  }
  .vmt-hebat__card:last-child {
    grid-column: 1 / -1;
  }
}
@media (min-width: 960px) {
  .vmt-hebat {
    grid-template-columns: repeat(3, 1fr);
  }
  .vmt-hebat__card:last-child {
    grid-column: auto;
  }
}
.vmt-hebat__card {
  padding: 1rem 1.05rem;
  border-radius: 1rem;
  background: linear-gradient(155deg, rgba(12, 39, 95, 0.96), rgba(22, 63, 156, 0.92));
  color: #fff;
  box-shadow: 0 12px 28px rgba(12, 39, 95, 0.14);
}
.vmt-hebat__card h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  color: #f0c84a;
}
.vmt-hebat__card p {
  margin: 0.45rem 0 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.vmt-slogan-grid {
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 720px) {
  .vmt-slogan-grid {
    grid-template-columns: 1fr 1.1fr;
    align-items: stretch;
  }
}
.vmt-slogan-card {
  padding: 1.2rem 1.2rem 1.25rem;
  border-radius: 1.15rem;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(236, 242, 252, 0.7));
  border: 1px solid rgba(12, 39, 95, 0.1);
  box-shadow: 0 10px 26px rgba(12, 39, 95, 0.06);
}
.vmt-slogan-card__label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--logo-blue);
}
.vmt-slogan-card__quote {
  margin: 0.55rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--logo-blue-deep);
  line-height: 1.25;
}
.vmt-slogan-card__note {
  margin: 0.55rem 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.vmt-yel {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.vmt-yel li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--logo-gold);
}
.vmt-yel strong {
  font-size: 0.95rem;
  color: var(--logo-blue-deep);
}
.vmt-yel span {
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

@media (min-width: 960px) {
  .main { max-width: 72rem; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; padding: .65rem 1.2rem;
  font: inherit; font-size: .78rem; font-weight: 650; cursor: pointer;
  text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
  background: linear-gradient(135deg, var(--logo-blue), var(--logo-blue-deep));
  color: #fff;
  box-shadow: 0 8px 20px rgba(22, 63, 156, 0.28);
}
.btn--primary:hover { filter: brightness(1.05); }
.btn--accent {
  background: rgba(255, 255, 255, 0.7);
  color: var(--logo-blue-deep);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
}
.btn--outline {
  background: rgba(255, 255, 255, 0.35);
  color: var(--logo-blue-deep);
  border: 1px solid rgba(22, 63, 156, 0.18);
  font-weight: 600;
  backdrop-filter: blur(8px);
}
.btn--outline:hover {
  background: var(--logo-blue);
  color: #fff;
  border-color: var(--logo-blue);
}
.btn--on-dark {
  background: rgba(255,255,255,.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  backdrop-filter: blur(8px);
}
.btn--on-dark:hover {
  background: #fff;
  color: var(--logo-blue-deep);
  border-color: #fff;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* —— Berita homepage (magazine board, no carousel) —— */
.home-news {
  margin-bottom: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.home-news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
  flex-wrap: wrap;
}
.home-news__kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--logo-blue);
}
.home-news__title {
  margin: 0.35rem 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.55rem, 3.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--logo-blue-deep);
}
.home-news__archive {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--logo-blue);
  text-decoration: none;
  padding: 0.45rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.home-news__archive:hover {
  color: var(--logo-blue-deep);
  border-bottom-color: rgba(22, 63, 156, 0.35);
}
.home-news__empty {
  margin: 0;
  padding: 1.35rem 1.2rem;
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(12, 39, 95, 0.08);
  color: var(--muted);
}

.home-news__board {
  display: grid;
  gap: 0.85rem;
}
@media (min-width: 900px) {
  .home-news__board {
    grid-template-columns: 1.15fr 0.92fr;
    gap: 1rem;
    align-items: stretch;
  }
}

.hn-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(1.25rem, 2.8vw, 1.85rem);
  border-radius: 1.35rem;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  background:
    linear-gradient(
      155deg,
      rgba(12, 39, 95, 0.96) 0%,
      rgba(22, 63, 156, 0.92) 48%,
      rgba(36, 84, 178, 0.9) 100%
    );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 18px 40px rgba(12, 39, 95, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hn-feature::before {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 160, 23, 0.22), transparent 68%);
  pointer-events: none;
}
.hn-feature::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--logo-gold), transparent 85%);
  opacity: 0.95;
}
.hn-feature:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 22px 48px rgba(12, 39, 95, 0.28);
}
.hn-feature__badge {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin: 0 0 0.85rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a1405;
  background: linear-gradient(135deg, #f0c84a, var(--logo-gold));
}
.hn-feature__date {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 230, 160, 0.92);
}
.hn-feature__title {
  position: relative;
  z-index: 1;
  margin: 0.55rem 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.28rem, 2.8vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fff;
}
.hn-feature__excerpt {
  position: relative;
  z-index: 1;
  margin: 0.75rem 0 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 36rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.hn-feature__cta {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: #fff;
}
.hn-feature__cta span {
  transition: transform 0.18s ease;
}
.hn-feature:hover .hn-feature__cta span {
  transform: translateX(4px);
}

.hn-rail {
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border-radius: 1.35rem;
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.82) 0%,
      rgba(255, 255, 255, 0.58) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 14px 36px rgba(12, 39, 95, 0.08);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
}
.hn-row {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem 0.9rem;
  border-radius: 1rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease, transform 0.15s ease;
}
.hn-row:hover {
  background: rgba(22, 63, 156, 0.06);
  transform: translateX(2px);
}
.hn-row__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  color: rgba(22, 63, 156, 0.28);
  letter-spacing: -0.02em;
  padding-top: 0.1rem;
}
.hn-row:hover .hn-row__num {
  color: var(--logo-blue);
}
.hn-row__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}
.hn-row__date {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.hn-row__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--logo-blue-deep);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.hn-row__excerpt {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.hn-row__go {
  align-self: center;
  font-size: 1rem;
  color: var(--logo-blue);
  opacity: 0.45;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.hn-row:hover .hn-row__go {
  opacity: 1;
  transform: translateX(3px);
}

@media (max-width: 899px) {
  .hn-feature {
    min-height: 14rem;
  }
}

/* Cards + hover popup */
.card {
  padding: 1.2rem 1.25rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  text-decoration: none; color: inherit; display: block; height: 100%;
  background: transparent;
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-edge), 0 16px 40px rgba(12, 39, 95, 0.08);
}
.card h3 {
  margin: .35rem 0 0;
  font-family: var(--display);
  font-size: 1.12rem;
  color: var(--logo-blue-deep);
}
.card p { margin: .45rem 0 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.55; }
.card .year {
  font-size: .65rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--logo-blue);
}
.card-cta {
  margin-top: .85rem !important;
  font-size: .78rem !important;
  font-weight: 600;
  color: var(--primary, var(--logo-blue));
}
.program-card { position: relative; padding-left: 1.3rem; }
.program-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--accent-line, var(--logo-blue));
}

.prestasi-card {
  position: relative;
  overflow: visible;
  cursor: default;
}
a.prestasi-card { cursor: pointer; }
.prestasi-popup {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px);
  width: min(18rem, calc(100vw - 2.5rem));
  padding: .9rem 1rem;
  background: #0c275f;
  color: #fff;
  border-radius: .85rem;
  box-shadow: 0 14px 36px rgba(12, 39, 95, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 30;
  text-align: left;
}
.prestasi-popup::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #0c275f;
}
.prestasi-popup strong {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: .35rem;
  line-height: 1.35;
}
.prestasi-popup p {
  margin: 0 !important;
  font-size: .78rem !important;
  line-height: 1.5 !important;
  color: rgba(255,255,255,.82) !important;
}
.prestasi-card:hover .prestasi-popup,
.prestasi-card:focus-within .prestasi-popup {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.prestasi-card:hover,
.prestasi-card:focus-within {
  z-index: 5;
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.prestasi-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 1.35rem;
}
.prestasi-grid--extra {
  margin-top: 1.15rem;
  animation: fadeUp .35s ease;
}
.prestasi-grid--extra[hidden] { display: none !important; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (hover: none) {
  .prestasi-card:focus-within .prestasi-popup {
    opacity: 1;
    visibility: visible;
  }
}

/* Instagram feed */
.ig-feed {
  padding: 1.75rem 1.5rem 2rem;
}
.ig-feed__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  margin-bottom: 1.35rem;
}
.ig-feed__head .section-lead {
  margin: .45rem 0 0;
  max-width: 36rem;
}
.btn--ig {
  background: linear-gradient(135deg, #f58529, #dd2a7b 45%, #8134af 75%, #515bd4);
  color: #fff;
  border: 0;
  box-shadow: 0 8px 22px rgba(221, 42, 123, 0.28);
  gap: .4rem;
}
.btn--ig:hover {
  filter: brightness(1.05);
  color: #fff;
}
.btn__ig-icon {
  font-size: 1rem;
  line-height: 1;
}
.ig-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
@media (min-width: 700px) {
  .ig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}
.ig-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(12, 39, 95, 0.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ig-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(12, 39, 95, 0.12);
}
.ig-card__media {
  position: relative;
  aspect-ratio: 1;
  background: linear-gradient(145deg, #1a1a2e, #3d1a4a);
  overflow: hidden;
}
.ig-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ig-card__ph {
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.4);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: .1em;
}
.ig-card__badge {
  position: absolute;
  top: .5rem;
  right: .5rem;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ig-card__cap {
  margin: 0;
  padding: .7rem .8rem .85rem;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ig-feed__hint {
  margin: 1rem 0 0;
  font-size: .72rem;
  color: var(--muted);
  text-align: center;
}
.ig-feed__hint--loading {
  letter-spacing: .02em;
}
.ig-skel {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(12, 39, 95, 0.05);
}
.ig-skel__media {
  aspect-ratio: 1;
  background: linear-gradient(110deg, #e8eef8 18%, #f6f8fc 38%, #e8eef8 58%);
  background-size: 200% 100%;
  animation: igShimmer 1.15s ease-in-out infinite;
}
.ig-skel__lines {
  padding: .75rem .8rem .9rem;
  display: grid;
  gap: .4rem;
}
.ig-skel__line {
  display: block;
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(110deg, #e6ecf6 18%, #f4f7fc 40%, #e6ecf6 58%);
  background-size: 200% 100%;
  animation: igShimmer 1.15s ease-in-out infinite;
}
.ig-skel__line--short {
  width: 62%;
}
@keyframes igShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-skel__media,
  .ig-skel__line {
    animation: none;
  }
}
.ig-grid.is-loaded .ig-card {
  animation: igCardIn .35s ease both;
}
.ig-grid.is-loaded .ig-card:nth-child(2) { animation-delay: .04s; }
.ig-grid.is-loaded .ig-card:nth-child(3) { animation-delay: .08s; }
.ig-grid.is-loaded .ig-card:nth-child(4) { animation-delay: .12s; }
.ig-grid.is-loaded .ig-card:nth-child(5) { animation-delay: .16s; }
.ig-grid.is-loaded .ig-card:nth-child(6) { animation-delay: .2s; }
@keyframes igCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.ig-fallback {
  display: grid;
  gap: 1.25rem;
}
.ig-fallback--embed .ig-fallback__embed {
  min-height: 28rem;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fafafa;
  box-shadow: 0 8px 24px rgba(12, 39, 95, 0.08);
}
.ig-official-embed {
  display: block;
  width: 100%;
  min-height: 28rem;
  height: 32rem;
  max-height: 70vh;
  border: 0;
  background: #fff;
}
@media (min-width: 820px) {
  .ig-fallback {
    grid-template-columns: 1fr 1.1fr;
    align-items: stretch;
  }
  .ig-fallback--embed {
    grid-template-columns: minmax(14rem, 0.9fr) 1.2fr;
  }
  .ig-official-embed {
    min-height: 36rem;
    height: 100%;
  }
}
.ig-profile {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1rem;
}
.ig-profile__avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  border: 2px solid transparent;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(135deg, #f58529, #dd2a7b, #8134af);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  padding: 2px;
}
.ig-profile strong {
  display: block;
  font-size: 1.05rem;
  color: var(--logo-blue-deep);
}
.ig-profile span {
  display: block;
  font-size: .82rem;
  color: var(--muted);
  margin-top: .15rem;
}
.ig-fallback__copy {
  padding: 1.25rem;
  border-radius: 1rem;
  background: rgba(22, 63, 156, 0.05);
  border: 1px solid var(--line);
}
.ig-fallback__copy p {
  margin: 0 0 1rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.ig-fallback__copy code {
  font-size: .78rem;
  background: rgba(12, 39, 95, 0.06);
  padding: .1rem .35rem;
  border-radius: .3rem;
}
.ig-fallback__embed {
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 380px;
  background: #fafafa;
}
.ig-fallback__embed iframe {
  width: 100%;
  height: 480px;
  border: 0;
  display: block;
  background: #fff;
}

/* Forms */
.form-card { max-width: 26rem; margin: 0 auto; padding: 1.5rem; background: var(--surface); }
.form-card label {
  display: block; font-size: .85rem; font-weight: 600;
  color: var(--logo-blue-deep); margin: .75rem 0 .35rem;
}
.form-card input, .form-card select, .form-card textarea {
  width: 100%; padding: .65rem .8rem; border-radius: .75rem;
  border: 1px solid var(--line); background: var(--surface-2);
  font: inherit; font-size: .9rem;
}
.form-card textarea { min-height: 7rem; resize: vertical; }
.role-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-bottom: .5rem; }
.role-tabs button {
  border: 0; border-radius: 999px; padding: .5rem;
  font: inherit; font-size: .7rem; font-weight: 600;
  background: var(--surface-2); color: var(--logo-blue); cursor: pointer;
}
.role-tabs button.is-on { background: var(--logo-blue); color: #fff; }

/* Login — Minimalis, Elegan, dan Bersih (Polos) */
.login {
  min-height: calc(100vh - 160px);
  min-height: calc(100dvh - 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 5vh, 4rem) 1.25rem 5rem;
  background: radial-gradient(circle at 50% 35%, rgba(22, 63, 156, 0.05) 0%, transparent 65%);
  position: relative;
  box-sizing: border-box;
}

.login__box {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 2.75rem) clamp(1.6rem, 3.5vw, 2.4rem);
  border-radius: 1.75rem;
  border: 1.5px solid rgba(12, 39, 95, 0.1);
  background: #ffffff;
  box-shadow:
    0 1px 3px rgba(12, 39, 95, 0.04),
    0 24px 64px -12px rgba(12, 39, 95, 0.12);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.login__brand {
  display: flex;
  justify-content: center;
  margin-bottom: 1.1rem;
}

.login__logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(12, 39, 95, 0.15);
  border: 2px solid #ffffff;
  background: #ffffff;
}

.login__kicker {
  margin: 0 0 0.35rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--logo-gold, #c48f10);
}

.login__title {
  margin: 0 0 0.35rem;
  font-family: var(--display);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--logo-blue-deep, #0c275f);
  text-align: center;
  line-height: 1.25;
}

.login__subtitle {
  margin: 0 0 1.5rem;
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft, #475569);
}

body.is-login .chatbot {
  display: none !important;
}

.login__err {
  margin: 0 0 1.2rem;
  padding: 0.75rem 1rem;
  border-radius: 0.85rem;
  font-size: 0.86rem;
  line-height: 1.45;
  background: #fef2f2;
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #991b1b;
  text-align: center;
}

.login__field-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1.15rem;
}

.login__label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--logo-blue-deep, #0c275f);
  letter-spacing: 0.01em;
}

.login__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.login__input {
  width: 100%;
  padding: 0.84rem 1.05rem;
  border-radius: 0.95rem;
  border: 1.5px solid rgba(12, 39, 95, 0.14);
  background: #f8fafc;
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink, #0f172a);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.login__input:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--logo-blue, #163f9c);
  box-shadow: 0 0 0 3.5px rgba(22, 63, 156, 0.12);
}

.login__pw-toggle {
  position: absolute;
  right: 0.85rem;
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
  transition: color 0.15s ease;
}

.login__pw-toggle:hover {
  color: var(--logo-blue-deep, #0c275f);
}

.login__submit {
  margin-top: 0.5rem;
  width: 100%;
  padding: 0.92rem 1.4rem;
  border-radius: 0.95rem;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(135deg, #0c275f 0%, #163f9c 100%);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.96rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(12, 39, 95, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.login__submit:hover {
  background: linear-gradient(135deg, #103277 0%, #1c4bb5 100%);
  box-shadow: 0 14px 32px rgba(12, 39, 95, 0.3);
  transform: translateY(-2px);
}

.login__links {
  margin-top: 1.35rem;
  text-align: center;
}

.login__back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: #475569;
  text-decoration: none;
  transition: color 0.15s ease;
}

.login__back-link:hover {
  color: var(--logo-blue, #163f9c);
  text-decoration: none;
}

.login__security {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(12, 39, 95, 0.08);
  text-align: center;
  font-size: 0.76rem;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.02em;
}

.alert { padding: .75rem 1rem; border-radius: .75rem; margin-bottom: 1rem; font-size: .88rem; }
.alert--ok { background: #e8f6ee; color: #166534; }
.alert--err { background: #fdecec; color: #991b1b; }

.prose { color: var(--ink-soft); line-height: 1.7; font-size: .95rem; }
.prose h2 {
  font-family: var(--display); color: var(--logo-blue-deep);
  font-size: 1.2rem; margin: 1.5rem 0 .5rem;
}
.prose p { margin: 0 0 .85rem; }

/* Nav bawah — desktop pill / HP dock + sheet */
.liquid-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: .65rem;
  z-index: 130;
  padding: 0 .5rem;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.liquid-nav.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
body.is-inner .liquid-nav {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
body.nav-sheet-open {
  overflow: hidden;
}

/* Desktop panel */
.liquid-nav__panel--desk {
  width: max-content;
  max-width: min(98vw, 58rem);
  margin: 0 auto;
  display: none;
  align-items: center;
  border-radius: 999px;
  padding: .3rem .35rem;
}
.liquid-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: .12rem;
}
.liquid-nav__list a {
  display: block;
  text-align: center;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.95);
  font-size: .84rem;
  font-weight: 650;
  padding: .52rem .82rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.liquid-nav__list a:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.liquid-nav__list a.is-active {
  background: rgba(255, 255, 255, 0.95);
  color: var(--logo-blue-deep);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 4px 12px rgba(12, 39, 95, 0.16);
  text-shadow: none;
}

/* Mobile dock */
.liquid-nav__dock {
  display: none;
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  border-radius: 1.35rem;
  padding: .2rem .45rem .45rem;
  touch-action: pan-y;
}
.liquid-nav__handle {
  display: flex;
  justify-content: center;
  padding: .28rem 0 .15rem;
  cursor: grab;
}
.liquid-nav__handle span,
.liquid-nav__sheet-grab span {
  display: block;
  width: 2.2rem;
  height: .28rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
}
.liquid-nav__tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .15rem;
}
.liquid-nav__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .12rem;
  min-height: 3.05rem;
  padding: .35rem .2rem;
  border: 0;
  border-radius: 1rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font: inherit;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -webkit-tap-highlight-color: transparent;
}
.liquid-nav__tab-ico {
  font-size: 1rem;
  line-height: 1;
  opacity: .95;
}
.liquid-nav__tab.is-active {
  background: rgba(255, 255, 255, 0.95);
  color: var(--logo-blue-deep);
  text-shadow: none;
  box-shadow: 0 4px 12px rgba(12, 39, 95, 0.14);
}
.liquid-nav__tab--more.is-on {
  background: rgba(255, 255, 255, 0.22);
}

/* Bottom sheet full menu */
.liquid-nav__sheet {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}
.liquid-nav__sheet:not([hidden]) {
  pointer-events: auto;
}
.liquid-nav__sheet[hidden] {
  display: none !important;
}
.liquid-nav__sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 36, 0.42);
  opacity: 0;
  transition: opacity .28s ease;
}
.liquid-nav__sheet.is-open .liquid-nav__sheet-backdrop {
  opacity: 1;
}
.liquid-nav__sheet-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
  max-height: min(78vh, 36rem);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 1.35rem 1.35rem 0 0;
  background: #f7f8fc;
  border: 1px solid rgba(12, 39, 95, 0.08);
  border-bottom: 0;
  box-shadow: 0 -12px 40px rgba(8, 20, 50, 0.22);
  padding: .35rem 1rem calc(1.1rem + env(safe-area-inset-bottom));
  transform: translateY(108%);
  transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.liquid-nav__sheet.is-open .liquid-nav__sheet-panel {
  transform: translateY(0);
}
.liquid-nav__sheet-grab {
  display: flex;
  justify-content: center;
  padding: .55rem 0 .35rem;
  cursor: grab;
}
.liquid-nav__sheet-grab span {
  background: rgba(12, 39, 95, 0.22);
}
.liquid-nav__sheet-title {
  margin: 0 0 .65rem;
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--logo-blue-deep);
  text-align: center;
}
.liquid-nav__sheet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
}
.liquid-nav__sheet-list a {
  display: block;
  padding: .85rem 1rem;
  border-radius: .9rem;
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(12, 39, 95, 0.08);
}
.liquid-nav__sheet-list a.is-active {
  background: linear-gradient(135deg, var(--logo-blue), var(--logo-blue-deep));
  color: #fff;
  border-color: transparent;
}
.liquid-nav__sheet-close {
  display: block;
  width: 100%;
  margin-top: .85rem;
  padding: .75rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  background: rgba(12, 39, 95, 0.08);
  color: var(--logo-blue-deep);
}

@media (min-width: 800px) {
  .liquid-nav__panel--desk {
    display: flex;
  }
  .liquid-nav__dock,
  .liquid-nav__sheet {
    display: none !important;
  }
  .liquid-nav__panel--desk {
    background:
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.1) 42%,
        rgba(14, 36, 88, 0.32) 100%
      ),
      rgba(16, 38, 90, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-top-color: rgba(255, 255, 255, 0.5);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.28) inset,
      0 10px 32px rgba(8, 20, 50, 0.24);
    backdrop-filter: blur(18px) saturate(1.7);
    -webkit-backdrop-filter: blur(18px) saturate(1.7);
  }
}
@media (max-width: 799px) {
  .liquid-nav {
    padding: 0 .55rem;
    bottom: max(.45rem, env(safe-area-inset-bottom));
  }
  .liquid-nav__dock {
    display: block;
    background:
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.1) 42%,
        rgba(14, 36, 88, 0.32) 100%
      ),
      rgba(16, 38, 90, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-top-color: rgba(255, 255, 255, 0.5);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.28) inset,
      0 10px 32px rgba(8, 20, 50, 0.28);
    backdrop-filter: blur(18px) saturate(1.7);
    -webkit-backdrop-filter: blur(18px) saturate(1.7);
  }
  .main {
    padding-bottom: 1.15rem;
  }
}

/* —— Halaman Berita: baris kiri–kanan per item —— */
.news-head { margin-bottom: 1.35rem; }
.news-page { max-width: 52rem; }
.page-empty,
.news-empty {
  margin-top: 0.35rem;
  padding: 1.45rem 1.3rem 1.5rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(12, 39, 95, 0.1);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(236, 242, 252, 0.6));
  box-shadow: 0 12px 32px rgba(12, 39, 95, 0.06);
  max-width: 32rem;
}
.page-empty__kicker {
  margin: 0 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--logo-blue);
}
.page-empty__title {
  margin: 0 0 0.45rem;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--logo-blue-deep);
}
.page-empty__text {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.news-rows {
  display: grid;
  gap: 0.85rem;
}
.news-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.95rem 1.1rem;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  padding: 0.75rem;
  border-radius: 1rem;
  border: 1px solid rgba(12, 39, 95, 0.1);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 22px rgba(12, 39, 95, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.news-row:hover {
  transform: translateY(-2px);
  border-color: rgba(22, 63, 156, 0.22);
  box-shadow: 0 14px 30px rgba(12, 39, 95, 0.1);
}
.news-row.is-latest {
  border-color: rgba(22, 63, 156, 0.2);
  background:
    linear-gradient(120deg, rgba(22, 63, 156, 0.05), rgba(255, 255, 255, 0.9));
}
@media (min-width: 640px) {
  .news-row {
    grid-template-columns: 11.5rem minmax(0, 1fr);
    gap: 1rem 1.25rem;
    padding: 0.9rem;
  }
}
.news-row__media {
  display: block;
  border-radius: 0.75rem;
  overflow: hidden;
  background: linear-gradient(145deg, #0c275f, #163f9c);
  aspect-ratio: 4 / 3;
  min-height: 0;
}
.news-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.news-row__media--empty {
  display: grid;
  place-items: center;
}
.news-row__ph {
  font-family: var(--display);
  font-size: 1.8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
}
.news-row__body {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
  padding: 0.1rem 0.15rem 0.15rem 0;
}
.news-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}
.news-row__badge {
  display: inline-flex;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--logo-blue);
}
.news-row__title {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--logo-blue-deep);
}
.news-row__excerpt {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-row__cta {
  margin-top: auto;
  padding-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--logo-blue);
}
.news-row:hover .news-row__cta { color: var(--logo-blue-deep); }

@media (max-width: 420px) {
  .news-row {
    grid-template-columns: 1fr;
  }
  .news-row__media {
    aspect-ratio: 16 / 9;
  }
}
.news-article {
  max-width: 42rem;
  margin: 0 auto;
}
.news-article__crumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 1rem;
}
.news-article__crumb a {
  color: var(--logo-blue);
  text-decoration: none;
}
.news-article__crumb a:hover { text-decoration: underline; }
.news-article__date {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
}
.news-article__title {
  margin: .45rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.55rem, 4.5vw, 2.15rem);
  line-height: 1.18;
  letter-spacing: -.025em;
  color: var(--logo-blue-deep);
}
.news-article__lead {
  margin: .85rem 0 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.news-article__body {
  margin-top: 1.5rem;
  padding: 1.25rem 1.2rem;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--glass-edge);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.news-article__body p:last-child { margin-bottom: 0; }

.news-share {
  margin-top: 1.25rem;
  padding: 1.1rem 1.15rem;
  border-radius: var(--radius);
  background: rgba(22, 63, 156, 0.04);
  border: 1px solid var(--line);
}
.news-share__label {
  margin: 0;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.news-share__row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .7rem;
}
.news-share__btn {
  display: inline-flex;
  align-items: center;
  padding: .5rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(22, 63, 156, 0.18);
  background: #fff;
  color: var(--logo-blue-deep);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.news-nl {
  margin-top: 1.75rem;
  padding: 1.25rem 1.2rem 1.3rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(12, 39, 95, 0.1);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(236, 242, 252, 0.62));
  box-shadow: 0 12px 32px rgba(12, 39, 95, 0.06);
}
.news-nl__kicker {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--logo-gold);
}
.news-nl__title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--logo-blue-deep);
}
.news-nl__lead {
  margin: 0.4rem 0 0.95rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.news-nl__form {
  display: grid;
  gap: 0.45rem;
}
.news-nl__form input[type="email"] {
  width: 100%;
  padding: 0.72rem 0.9rem;
  border-radius: 0.8rem;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  font: inherit;
  font-size: 0.95rem;
}
.news-nl__form input[type="email"]:focus {
  outline: none;
  border-color: rgba(22, 63, 156, 0.42);
  box-shadow: 0 0 0 3px rgba(22, 63, 156, 0.12);
}
.news-nl__form button {
  border: 0;
  border-radius: 0.85rem;
  padding: 0.72rem 1rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--logo-blue), var(--logo-blue-deep));
}
.news-nl__form button:hover { filter: brightness(1.06); }
.news-nl__form .nl-form__msg {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.news-nl__form .nl-form__msg.is-ok { color: #15803d; }
.news-nl__form .nl-form__msg.is-err { color: #b91c1c; }
@media (min-width: 640px) {
  .news-nl__form {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  .news-nl__form .nl-form__msg,
  .news-nl__form .nl-form__hp {
    grid-column: 1 / -1;
  }
}

.news-share__btn:hover {
  border-color: var(--logo-blue);
  background: rgba(22, 63, 156, 0.06);
}

@media (max-width: 799px) {
  .news-article__body { padding: 1.05rem .95rem; }
}

.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th, .table td { text-align: left; padding: .55rem .4rem; border-bottom: 1px solid var(--line); }
.table th { color: var(--muted); font-weight: 600; }

/* —— Galeri: editorial grid + lightbox —— */
.gallery {
  margin: 0 0 2rem;
}
.gallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.15rem;
}
.gallery__kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--logo-blue);
}
.gallery__title {
  margin: 0.35rem 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.55rem, 3.2vw, 2.1rem);
  letter-spacing: -0.03em;
  color: var(--logo-blue-deep);
  line-height: 1.12;
}
.gallery__lead {
  margin: 0.5rem 0 0;
  max-width: 34rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.gallery__count {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
}
.gallery__count strong {
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--logo-blue-deep);
  font-weight: 700;
  margin-right: 0.25rem;
}
.gallery__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.15rem;
}
.gallery__chip {
  appearance: none;
  border: 1px solid rgba(12, 39, 95, 0.12);
  background: rgba(255, 255, 255, 0.72);
  color: var(--logo-blue-deep);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gallery__chip:hover {
  border-color: rgba(22, 63, 156, 0.28);
  background: #fff;
}
.gallery__chip.is-on {
  background: linear-gradient(135deg, var(--logo-blue), var(--logo-blue-deep));
  border-color: transparent;
  color: #fff;
}
.gallery__empty {
  margin: 1rem 0 0;
  padding: 1.15rem 1.2rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(12, 39, 95, 0.08);
  color: var(--muted);
  font-size: 0.92rem;
}

.gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.95rem;
}
@media (min-width: 720px) {
  .gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1.15rem;
  }
}

.gallery-skel {
  aspect-ratio: 16 / 11;
  border-radius: 1.15rem;
  background: linear-gradient(110deg, #d5e0f2 16%, #eef3fb 40%, #d5e0f2 62%);
  background-size: 200% 100%;
  animation: igShimmer 1.15s ease-in-out infinite;
  box-shadow: 0 14px 32px rgba(12, 39, 95, 0.1);
}
.gallery-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 1.15rem;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: #fff;
  background: #0c275f;
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 14px 32px rgba(12, 39, 95, 0.12);
  transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.25s ease;
}
.gallery-card:not(.is-ready) img {
  opacity: 0;
}
.gallery-card.is-ready img {
  opacity: 1;
}
.gallery-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 20px 40px rgba(12, 39, 95, 0.18);
}
.gallery__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 1.35rem 0 0.25rem;
}
.gallery__page {
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.7rem;
  border: 1px solid rgba(12, 39, 95, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--logo-blue-deep);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}
.gallery__page:hover:not(:disabled) {
  border-color: rgba(22, 63, 156, 0.28);
  background: #fff;
}
.gallery__page.is-on {
  background: linear-gradient(135deg, var(--logo-blue), var(--logo-blue-deep));
  border-color: transparent;
  color: #fff;
}
.gallery__page:disabled {
  opacity: 0.45;
  cursor: default;
}
.gallery__page.is-gap {
  border-color: transparent;
  background: transparent;
  opacity: 0.7;
}
.gallery-card:focus-visible {
  outline: 2px solid var(--logo-gold);
  outline-offset: 3px;
}
.gallery-card[hidden] {
  display: none !important;
}

.gallery-card__media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}
.gallery-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.45s cubic-bezier(.22, 1, .36, 1), opacity 0.28s ease;
}
.gallery-card:hover .gallery-card__media img {
  transform: scale(1.06);
}
.gallery-card__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  background:
    linear-gradient(145deg, #0c275f, #163f9c 55%, #2a5bbd);
}
.gallery-card__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 42%,
      rgba(8, 20, 48, 0.55) 72%,
      rgba(8, 20, 48, 0.9) 100%
    );
  pointer-events: none;
}
.gallery-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1.15rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  pointer-events: none;
}
.gallery-card__kat {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d4a017;
}
.gallery-card__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: #fff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.gallery-card__desc {
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

body.has-gallery-lb {
  overflow: hidden;
}
.gallery-lb {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.gallery-lb[hidden] {
  display: none !important;
}
.gallery-lb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 18, 42, 0.82);
}
.gallery-lb__dialog {
  position: relative;
  z-index: 1;
  width: min(56rem, 100%);
  max-height: min(92dvh, 52rem);
  display: grid;
  grid-template-rows: 1fr auto;
  border-radius: 1.2rem;
  overflow: hidden;
  background: #0a1836;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.gallery-lb__frame {
  min-height: 0;
  background: #050d1f;
  display: grid;
  place-items: center;
}
.gallery-lb__frame img {
  max-width: 100%;
  max-height: min(62dvh, 36rem);
  width: auto;
  height: auto;
  object-fit: contain;
}
.gallery-lb__meta {
  padding: 1rem 1.15rem 1.2rem;
  color: #fff;
  background: linear-gradient(180deg, rgba(12, 39, 95, 0.25), rgba(8, 18, 42, 0.98));
}
.gallery-lb__kat {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 230, 160, 0.95);
}
.gallery-lb__title {
  margin: 0.35rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.gallery-lb__desc {
  margin: 0.45rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}
.gallery-lb__date {
  margin: 0.55rem 0 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}
.gallery-lb__close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 3;
  width: 2.35rem;
  height: 2.35rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.gallery-lb__close:hover {
  background: rgba(255, 255, 255, 0.24);
}
.gallery-lb__nav {
  position: absolute;
  top: 42%;
  z-index: 3;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}
.gallery-lb__nav:hover {
  background: rgba(255, 255, 255, 0.28);
}
.gallery-lb__nav--prev { left: 0.55rem; }
.gallery-lb__nav--next { right: 0.55rem; }

@media (max-width: 639px) {
  .gallery-lb__nav { top: 36%; }
}

/* legacy hooks (halaman lama / kompat) */
.galeri-grid { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.is-home:not(.is-scrolled) .brand-logo img {
    animation: none !important;
  }
  .gallery-card,
  .gallery-card__media img {
    transition: none !important;
  }
  .gallery-skel {
    animation: none;
  }
}

/* —— Clean Text Language Switcher (ID / EN) —— */
.lang-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  background: rgba(12, 39, 95, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  user-select: none;
  margin-left: auto;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.lang-nav:hover {
  background: rgba(12, 39, 95, 0.85);
  border-color: rgba(255, 255, 255, 0.35);
}

.lang-nav__item {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s ease;
  line-height: 1;
  padding: 0.1rem 0.2rem;
}

.lang-nav__item:hover {
  color: #ffffff;
}

.lang-nav__item.is-active {
  color: #ffffff !important;
  font-weight: 800;
  border-bottom: 2px solid var(--logo-gold, #d4a017);
}

.lang-nav__sep {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.72rem;
  line-height: 1;
}

/* —— Popup Prestasi: Clean, Human-Crafted Professional Modal —— */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body.has-ach-modal {
  overflow: hidden;
}

.ach-modal {
  position: fixed;
  inset: 0;
  z-index: 280;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(0.8rem, env(safe-area-inset-top)) 0.85rem max(1rem, env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.ach-modal[hidden] { display: none !important; }
.ach-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.ach-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 20, 50, 0.65);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  cursor: pointer;
}

.ach-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(26.5rem, 100%);
  max-height: min(92dvh, 48rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.5rem;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 30px 80px rgba(8, 24, 64, 0.35);
  transform: translateY(18px) scale(0.97);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.38s ease;
}

.ach-modal.is-open .ach-modal__dialog {
  transform: translateY(0) scale(1);
}

.ach-modal__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 10;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(12, 39, 95, 0.12);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: #163f9c;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(12, 39, 95, 0.08);
  transition: all 0.22s ease;
}
.ach-modal__close:hover {
  background: #163f9c;
  color: #ffffff;
  transform: rotate(90deg) scale(1.05);
}

/* Header Light Theme */
.ach-modal__head {
  padding: 1.25rem 1.35rem 0.85rem;
  background: linear-gradient(180deg, #f4f7fd 0%, #ffffff 100%);
  border-bottom: 1px solid rgba(12, 39, 95, 0.06);
}

.ach-modal__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #926900;
  background: rgba(212, 160, 23, 0.12);
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(212, 160, 23, 0.28);
  margin-bottom: 0.45rem;
  text-transform: uppercase;
}

.ach-modal__title {
  margin: 0 0 0.2rem;
  font-family: var(--display, "Fraunces", Georgia, serif);
  font-size: 1.22rem;
  font-weight: 700;
  color: #0c275f;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.ach-modal__subtitle {
  margin: 0;
  font-size: 0.78rem;
  color: #4a5570;
  font-weight: 600;
}

/* Poster Frame */
.ach-modal__poster {
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f4fa;
  padding: 0.65rem;
}

.ach-modal__poster img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(52dvh, 27rem);
  object-fit: contain;
  object-position: center;
  border-radius: 0.85rem;
  box-shadow: 0 10px 24px rgba(12, 39, 95, 0.12);
  transition: transform 0.3s ease;
}
.ach-modal__poster img:hover {
  transform: scale(1.015);
}

/* Action Bar Light Theme */
.ach-modal__bar {
  flex: 0 0 auto;
  padding: 0.85rem 1.25rem 0.95rem;
  background: #ffffff;
  border-top: 1px solid rgba(12, 39, 95, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ach-modal__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ach-modal__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #163f9c 0%, #0c275f 100%);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(22, 63, 156, 0.28);
  transition: all 0.22s ease;
}

.ach-modal__btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #163f9c 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(22, 63, 156, 0.38);
}

.ach-modal__opt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.73rem;
  font-weight: 600;
  color: #4a5570;
  cursor: pointer;
  user-select: none;
  transition: color 0.18s ease;
}
.ach-modal__opt:hover {
  color: #0c275f;
}

.ach-modal__opt input {
  accent-color: #163f9c;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 4px;
}

.ach-modal__timer-info {
  margin: 0;
  font-size: 0.68rem;
  color: #6b7589;
  font-weight: 600;
}

.ach-modal__timer-info strong {
  color: #163f9c;
  font-weight: 800;
}

.ach-modal__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: #eef2fa;
  overflow: hidden;
  pointer-events: none;
}

.ach-modal__progress-fill {
  height: 100%;
  width: 100%;
  transform: scaleX(1);
  transform-origin: left center;
  background: linear-gradient(90deg, #d4a017 0%, #163f9c 100%);
}

@media (max-width: 440px) {
  .ach-modal__actions { flex-direction: column; align-items: stretch; gap: 0.4rem; }
  .ach-modal__btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ach-modal,
  .ach-modal__dialog {
    transition: none !important;
  }
}

/* —— Kontak page (cp) + call —— */
.cp {
  padding: 0.5rem 0 2.5rem;
  max-width: 68rem;
  margin: 0 auto;
}
.cp__head {
  max-width: 40rem;
  margin-bottom: 1.75rem;
}
.cp__kicker,
.ip__kicker {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--logo-blue);
}
.cp__title,
.ip__title {
  margin: 0 0 0.55rem;
  font-family: var(--display);
  font-size: clamp(1.85rem, 3.6vw, 2.55rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--logo-blue-deep);
}
.cp__lead,
.ip__lead {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft, #3a4a66);
  max-width: 38rem;
}
.cp__layout {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 1.25rem 1.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .cp__layout { grid-template-columns: 1fr; }
}
.cp__main {
  display: grid;
  gap: 1.1rem;
}
.cp-hero {
  position: relative;
  padding: 1.5rem 1.45rem 1.4rem;
  border-radius: 1.35rem;
  overflow: hidden;
  color: #f3f7ff;
  background:
    radial-gradient(ellipse 80% 90% at 100% 0%, rgba(212, 160, 23, 0.28), transparent 55%),
    linear-gradient(145deg, #0c275f 0%, #163f9c 52%, #1a4aab 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 18px 42px rgba(12, 39, 95, 0.22);
}
.cp-hero::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% 40%;
  height: 70%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 65%);
  pointer-events: none;
}
.cp-hero__label {
  margin: 0 0 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 220, 140, 0.95);
}
.cp-hero__addr {
  position: relative;
  z-index: 1;
  margin: 0 0 1.15rem;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.4;
  max-width: 28rem;
}
.cp-hero__acts {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.62rem 1.05rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
  font-family: inherit;
}
.cp-btn:hover { transform: translateY(-1px); }
.cp-btn--sm {
  padding: 0.38rem 0.8rem;
  font-size: 0.78rem;
}
.cp-btn--primary {
  background: linear-gradient(135deg, #d4a017, #e0b33a);
  color: #1a1200;
  border-color: rgba(255, 255, 255, 0.2);
}
.cp-btn--primary:hover {
  background: linear-gradient(135deg, #e0b33a, #f0c85a);
}
.cp-hero .cp-btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}
.cp-hero .cp-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
}
.cp-btn--ghost {
  background: rgba(22, 63, 156, 0.06);
  color: var(--logo-blue-deep);
  border-color: rgba(12, 39, 95, 0.14);
}
.cp-btn--ghost:hover {
  background: rgba(22, 63, 156, 0.1);
  border-color: rgba(12, 39, 95, 0.22);
}
.cp-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 520px) {
  .cp-tiles { grid-template-columns: 1fr; }
}
.cp-tile {
  display: grid;
  gap: 0.28rem;
  padding: 1rem 1.05rem;
  border-radius: 1.1rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(12, 39, 95, 0.1);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.9), rgba(236, 242, 252, 0.6));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 10px 28px rgba(12, 39, 95, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
a.cp-tile:hover {
  border-color: rgba(22, 63, 156, 0.28);
  transform: translateY(-2px);
}
.cp-tile__k {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.cp-tile__v {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--logo-blue-deep);
  line-height: 1.35;
  word-break: break-word;
}
.cp-tile__v--stack {
  display: grid;
  gap: 0.25rem;
}
.cp-tile__v--stack a {
  color: var(--logo-blue);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.88rem;
}
.cp-tile__v--stack a:hover { text-decoration: underline; }
.cp-tile__hint {
  font-size: 0.78rem;
  color: var(--muted);
}
.cp-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.cp-call {
  padding: 1.6rem 1.5rem 1.6rem;
  border-radius: 1.5rem;
  border: 1.5px solid rgba(12, 39, 95, 0.12);
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(12, 39, 95, 0.07);
}
.cp-call__head { margin-bottom: 1.15rem; }
.cp-call__kicker {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--logo-gold, #c48f10);
}
.cp-call__title {
  margin: 0 0 0.45rem;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--logo-blue-deep);
}
.cp-call__lead {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft, #3a4a66);
}
.guru-online-list {
  display: grid;
  gap: .6rem;
}
.kontak-call-lead {
  margin: .45rem 0 1.1rem;
  font-size: .92rem;
}
.kontak-call-listhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .6rem;
}
.kontak-call-listhead label {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--logo-blue-deep);
}
.call-offline-box {
  padding: 1.1rem 1.25rem;
  border-radius: 1.1rem;
  background: #f8fafc;
  border: 1px solid rgba(12, 39, 95, 0.08);
  margin-bottom: 0.5rem;
}
.call-offline-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 0.35rem;
}
.call-offline-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
}
.call-offline-desc {
  font-size: 0.84rem;
  line-height: 1.55;
  color: #64748b;
  margin: 0;
}
.kontak-call-main {
  width: 100%;
  justify-content: center;
  padding: 0.92rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 1rem;
  background: linear-gradient(135deg, #0c275f 0%, #163f9c 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 24px rgba(12, 39, 95, 0.22);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: 0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.kontak-call-main:hover {
  background: linear-gradient(135deg, #103277 0%, #1c4bb5 100%) !important;
  box-shadow: 0 12px 32px rgba(12, 39, 95, 0.32);
  transform: translateY(-2px);
  color: #ffffff !important;
}
.kontak-call-note {
  font-size: 0.8rem;
  line-height: 1.55;
  color: #64748b;
  margin: 0.85rem 0 0;
  text-align: center;
}

/* —— Info pages (Humas / Kesiswaan / Kurikulum / Program / Buku Tamu) —— */
.ip {
  padding: 0.5rem 0 2.5rem;
  max-width: 56rem;
  margin: 0 auto;
}
.ip__head {
  max-width: 40rem;
  margin-bottom: 1.65rem;
}
.ip-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 780px) {
  .ip-cards { grid-template-columns: 1fr; }
}
.ip-card {
  padding: 1.2rem 1.15rem 1.25rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(12, 39, 95, 0.1);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(236, 242, 252, 0.55));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 12px 32px rgba(12, 39, 95, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ip-card__title {
  margin: 0 0 0.45rem;
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--logo-blue-deep);
}
.ip-card__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft, #3a4a66);
}
.ip-cta {
  padding: 1.25rem 1.3rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(12, 39, 95, 0.1);
  background:
    linear-gradient(120deg, rgba(12, 39, 95, 0.04), rgba(22, 63, 156, 0.06));
}
.ip-cta p {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft, #3a4a66);
  max-width: 36rem;
}
.ip-cta__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.ip-cta__acts--after {
  margin-top: 1.25rem;
}
.majors-roster--page {
  margin-top: 0.25rem;
}

/* Program keahlian — kartu + detail ala poster jurusan */
.pk {
  padding: 0.35rem 0 2.5rem;
  max-width: 68rem;
  margin: 0 auto;
}
.pk__head {
  max-width: 40rem;
  margin-bottom: 1.5rem;
}
.pk__kicker {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--logo-blue);
}
.pk__title {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-size: clamp(1.85rem, 3.6vw, 2.55rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--logo-blue-deep);
}
.pk__lead {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.pk-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 720px) {
  .pk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }
}
.pk-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(12, 39, 95, 0.1);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(236, 242, 252, 0.62));
  box-shadow: 0 14px 36px rgba(12, 39, 95, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pk-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(12, 39, 95, 0.14);
}
.pk-card__media {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  aspect-ratio: 16 / 10;
  background: linear-gradient(160deg, #0c275f, #163f9c);
  overflow: hidden;
}
.pk-card__media--duo {
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 16 / 11;
  gap: 0.22rem;
  background: #0c275f;
}
.pk-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 0;
}
.pk-card__n {
  position: absolute;
  left: 0.85rem;
  bottom: 0.75rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  background: rgba(8, 18, 42, 0.72);
  box-shadow: 0 0 0 2px var(--pk-accent, var(--logo-gold));
  padding: 0.22rem 0.55rem;
  border-radius: 0.5rem;
  letter-spacing: 0.04em;
  z-index: 1;
}
.pk-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.05rem 1.1rem 1.15rem;
  min-height: 0;
}
.pk-card__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -0.02em;
  color: var(--logo-blue-deep);
}
.pk-card__brief {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.pk-card__acts {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.28rem;
}
.pk-card__acts li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--logo-blue-deep);
}
.pk-card__acts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--pk-accent, var(--logo-gold));
}
.pk-card__cta {
  margin-top: 0.55rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--logo-blue);
}
.pk-card:hover .pk-card__cta { color: var(--logo-blue-deep); }

.pk-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.15rem 0 0.35rem;
}
.pk-stats--card { margin: 0.2rem 0 0; }
.pk-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.38rem 0.72rem;
  border-radius: 0.7rem;
  background: #fff;
  border: 1px solid rgba(12, 39, 95, 0.1);
  box-shadow: 0 6px 16px rgba(12, 39, 95, 0.06);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--logo-blue-deep);
}
.pk-stat b {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--pk-accent, var(--logo-blue));
}

.pk-back {
  display: inline-flex;
  margin-bottom: 0.85rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--logo-blue);
  text-decoration: none;
}
.pk-back:hover { text-decoration: underline; }

.pk--detail { max-width: 68rem; }
.pk-sheet {
  display: grid;
  grid-template-areas:
    "head"
    "photos"
    "body";
  gap: 1rem;
}
.pk-sheet__head { grid-area: head; }
.pk-sheet__photos { grid-area: photos; }
.pk-sheet__body { grid-area: body; }
.pk-sheet__sekilas {
  margin: 0.15rem 0 0;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--logo-blue-deep);
}
.pk-sheet__photos {
  display: grid;
  gap: 0.7rem;
}
.pk-sheet__photos figure {
  margin: 0;
  border-radius: 1.1rem;
  overflow: hidden;
  background: #0c275f;
  border: 3px solid #fff;
  box-shadow: 0 16px 40px rgba(12, 39, 95, 0.14);
}
.pk-sheet__photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 4 / 5;
}
.pk-sheet__photos figure:nth-child(2) img {
  aspect-ratio: 16 / 11;
}
@media (min-width: 860px) {
  .pk-sheet {
    grid-template-columns: minmax(0, 1.12fr) minmax(17rem, 0.88fr);
    grid-template-areas:
      "head photos"
      "body photos";
    column-gap: 1.55rem;
    row-gap: 0.85rem;
    align-items: start;
  }
  .pk-sheet__photos {
    position: sticky;
    top: calc(var(--topbar-h, 72px) + 0.85rem);
  }
  .pk-sheet__photos img { aspect-ratio: 4 / 5; }
  .pk-sheet__photos figure:nth-child(2) img { aspect-ratio: 4 / 5; }
}

.pk-do {
  margin: 0 0 1.15rem;
  padding: 1.1rem 1.15rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(12, 39, 95, 0.1);
  background: rgba(255, 255, 255, 0.78);
}
.pk-do__kicker {
  margin: 0 0 0.65rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--logo-gold);
}
.pk-do__list {
  margin: 0;
  padding: 0 0 0 1.15rem;
  display: grid;
  gap: 0.4rem;
  color: var(--logo-blue-deep);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.45;
}
.pk-copy {
  padding: 1.15rem 1.2rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(12, 39, 95, 0.1);
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.65;
}
.pk-copy p { margin: 0; }
.pk-copy p + p { margin-top: 0.85rem; }
.ip-form {
  padding: 1.35rem 1.3rem 1.45rem;
  border-radius: 1.25rem;
  max-width: 32rem;
}
.ip-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 0.85rem;
}
@media (max-width: 520px) {
  .ip-form__grid { grid-template-columns: 1fr; }
}
.ip-field {
  display: grid;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.ip-field--full { grid-column: 1 / -1; }
.ip-field input,
.ip-field textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 0.8rem;
  border: 1px solid var(--line);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink, #121c2e);
  background: rgba(255, 255, 255, 0.85);
  resize: vertical;
}
.ip-field input:focus,
.ip-field textarea:focus {
  outline: none;
  border-color: rgba(22, 63, 156, 0.4);
  box-shadow: 0 0 0 3px rgba(22, 63, 156, 0.12);
}
.ip-form__submit {
  grid-column: 1 / -1;
  margin-top: 0.25rem;
}
.ip-form__submit .cp-btn { width: 100%; padding: 0.75rem 1.1rem; }
.ip-done {
  max-width: 28rem;
  padding: 1.75rem 1.5rem;
  border-radius: 1.3rem;
  text-align: center;
  border: 1px solid rgba(12, 39, 95, 0.1);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(236, 242, 252, 0.6));
  box-shadow: 0 16px 40px rgba(12, 39, 95, 0.08);
}
.ip-done__kicker {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--logo-gold, #d4a017);
}
.ip-done__title {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-size: 1.65rem;
  color: var(--logo-blue-deep);
}
.ip-done__text {
  margin: 0 0 1.15rem;
  color: var(--ink-soft, #3a4a66);
  line-height: 1.55;
}
.ip-done .ip-cta__acts { justify-content: center; }
.ip-detail__tagline {
  margin: 0.15rem 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--logo-blue);
  line-height: 1.45;
  max-width: 36rem;
}
.ip-detail {
  padding: 1.4rem 1.35rem;
  border-radius: 1.2rem;
  max-width: 40rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft, #3a4a66);
}
.ip-detail p { margin: 0; }
.guru-online-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem .9rem;
  border-radius: .95rem;
  border: 1px solid var(--line);
  background: linear-gradient(120deg, #f4f8ff 0%, #f8fafc 55%);
  box-shadow: 0 4px 14px rgba(22, 63, 156, 0.05);
}
.guru-online-item strong { display: block; font-size: .92rem; }
.guru-online-item .muted { font-size: .8rem; }
.guru-online-item::before {
  content: '';
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  flex-shrink: 0;
  order: -1;
.call-item-btn {
  padding: 0.45rem 1rem;
  border-radius: 99px;
  background: var(--logo-blue-deep, #0c275f);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.call-item-btn:hover {
  background: var(--logo-blue, #163f9c);
  transform: translateY(-1px);
}
.btn--sm {
  padding: .4rem .75rem;
  font-size: .82rem;
}

/* ========== Call UI (phone shell) ========== */
.call-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem max(0.75rem, env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(36, 90, 200, 0.45), transparent 55%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(16, 110, 80, 0.22), transparent 50%),
    #070d1c;
  animation: callFadeIn 0.28s ease;
}
/* Saat call: hide chrome situs (sinkron dgn call-ui.css) */
body.call-active #liquid-nav,
body.call-active .liquid-nav,
body.call-active .chatbot,
body.call-active .site-footer,
body.call-active .nl-form {
  display: none !important;
}
body.call-active .call-overlay {
  z-index: 9999 !important;
}
@keyframes callFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.call-shell {
  position: relative;
  width: min(24rem, 100%);
  min-height: min(36rem, 92dvh);
  max-height: 96dvh;
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.15rem 1.25rem;
  border-radius: 1.75rem;
  overflow: hidden;
  background:
    linear-gradient(165deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 40%, rgba(8,16,36,0.55) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #eef3ff;
}
.call-shell__glow {
  position: absolute;
  inset: -20% -10% auto;
  height: 55%;
  background: radial-gradient(circle at 50% 30%, rgba(70, 130, 255, 0.35), transparent 65%);
  pointer-events: none;
}
.call-shell__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.call-shell__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.call-shell__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #64748b;
  box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.25);
  flex-shrink: 0;
  transition: background 0.2s, box-shadow 0.2s;
}
.call-overlay.is-ringing .call-shell__dot,
.call-overlay.is-connecting .call-shell__dot {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.28);
  animation: callDotPulse 1.1s ease-in-out infinite;
}
.call-overlay.is-live .call-shell__dot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
  animation: callDotPulse 1.6s ease-in-out infinite;
}
@keyframes callDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.85; }
}
.call-shell__label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(236, 242, 255, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.call-shell__timer {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: #fff;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 4.25rem;
  text-align: center;
}
.call-overlay.is-live .call-shell__timer {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.35);
  color: #bbf7d0;
}

.call-shell__hero {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem 0 1rem;
  min-height: 12rem;
}
.call-shell__pulse {
  position: relative;
  width: 7.5rem;
  height: 7.5rem;
  margin: 0 auto 1.15rem;
  display: grid;
  place-items: center;
}
.call-shell__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(120, 170, 255, 0.35);
  opacity: 0;
}
.call-overlay.is-ringing .call-shell__ring,
.call-overlay.is-connecting .call-shell__ring {
  animation: callRings 1.6s ease-out infinite;
}
.call-overlay.is-ringing .call-shell__ring--delay,
.call-overlay.is-connecting .call-shell__ring--delay {
  animation-delay: 0.55s;
}
.call-overlay.is-live .call-shell__ring {
  animation: none;
  inset: -6px;
  border-color: rgba(34, 197, 94, 0.45);
  opacity: 0.65;
}
@keyframes callRings {
  0% { transform: scale(0.72); opacity: 0.7; }
  100% { transform: scale(1.28); opacity: 0; }
}
.call-shell__avatar {
  width: 5.75rem;
  height: 5.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #3b77e0, #1a3f9c);
  box-shadow:
    0 16px 36px rgba(22, 63, 156, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  position: relative;
  z-index: 1;
}
.call-overlay.is-live .call-shell__avatar {
  background: linear-gradient(145deg, #34d399, #15803d);
  box-shadow: 0 16px 36px rgba(21, 128, 61, 0.4);
}
.call-shell__peer {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.2rem, 4vw, 1.45rem);
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.25;
  max-width: 18rem;
  word-break: break-word;
}
.call-shell__status {
  margin: 0.45rem 0 0;
  font-size: 0.92rem;
  color: rgba(220, 230, 255, 0.68);
  min-height: 1.35em;
  font-weight: 500;
  max-width: 18rem;
}
.call-overlay.is-live .call-shell__status {
  color: #86efac;
  font-weight: 600;
}
.call-shell__dots {
  display: none;
  justify-content: center;
  gap: 6px;
  margin: 0.75rem 0 0;
}
.call-overlay.is-connecting .call-shell__dots,
.call-overlay.is-ringing .call-shell__dots {
  display: flex;
}
.call-shell__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8eb4ff;
  opacity: 0.35;
  animation: callDot 1s infinite ease-in-out;
}
.call-shell__dots i:nth-child(2) { animation-delay: 0.15s; }
.call-shell__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes callDot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

/* Live stats HUD — ping / KB */
.call-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin: 0 0 1rem;
  padding: 0.65rem;
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
}
.call-stats[hidden] { display: none !important; }
.call-stats__item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.45rem 0.55rem;
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.04);
  min-width: 0;
}
.call-stats__item--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.call-stats__k {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 214, 255, 0.55);
}
.call-stats__v {
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  font-size: 0.98rem;
  color: #f1f5ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.call-stats__v--sm { font-size: 0.82rem; font-weight: 650; }
#call-ping[data-quality="good"],
#call-quality[data-quality="good"] { color: #4ade80; }
#call-ping[data-quality="ok"],
#call-quality[data-quality="ok"] { color: #fbbf24; }
#call-ping[data-quality="bad"],
#call-quality[data-quality="bad"] { color: #f87171; }

.call-shell__ctrls {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.35rem;
}
.call-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 4.5rem;
  padding: 0.2rem;
  border: 0;
  border-radius: 1.1rem;
  background: transparent;
  font: inherit;
  font-weight: 600;
  font-size: 0.72rem;
  cursor: pointer;
  color: rgba(236, 242, 255, 0.85);
  transition: transform 0.15s, opacity 0.15s;
}
.call-btn__ico {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: background 0.15s, transform 0.15s;
}
.call-btn:hover { transform: translateY(-2px); }
.call-btn:hover .call-btn__ico { background: rgba(255, 255, 255, 0.16); }
.call-btn:active .call-btn__ico { transform: scale(0.96); }
.call-btn.is-off { opacity: 0.7; }
.call-btn.is-off .call-btn__ico {
  background: rgba(248, 113, 113, 0.22);
  border-color: rgba(248, 113, 113, 0.45);
  color: #fecaca;
}
.call-btn--speaker .call-btn__ico {
  background: rgba(59, 130, 246, 0.22);
  border-color: rgba(96, 165, 250, 0.35);
}
.call-btn--hang .call-btn__ico {
  width: 3.85rem;
  height: 3.85rem;
  background: linear-gradient(145deg, #f43f5e, #be123c);
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(225, 29, 72, 0.45);
}
.call-btn--hang .call-btn__txt { color: #fda4af; font-weight: 700; }
.call-btn--hang:hover .call-btn__ico { filter: brightness(1.08); }

.call-shell__play {
  position: relative;
  z-index: 1;
  margin-top: 0.9rem;
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 0.8rem 1rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  color: #0b1224;
  background: linear-gradient(135deg, #93c5fd, #60a5fa);
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.35);
}
.call-shell__play[hidden] { display: none !important; }

/* legacy aliases (jaga-jaga) */
.call-overlay__card { /* no-op kept if any leftover */ }
.call-overlay__play { /* superseded by .call-shell__play */ }

/* Consent rekaman call */
.consent-modal {
  position: fixed;
  inset: 0;
  z-index: 230;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.consent-modal[hidden] { display: none !important; }
.consent-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 36, 0.55);
  backdrop-filter: blur(6px);
}
.consent-modal__card {
  position: relative;
  z-index: 1;
  width: min(24rem, 100%);
  background: #fff;
  border-radius: 1.25rem;
  padding: 1.35rem 1.35rem 1.2rem;
  box-shadow: 0 24px 60px rgba(12, 39, 95, 0.28);
  border: 1px solid var(--line);
}
.consent-modal__kicker {
  margin: 0 0 .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--logo-blue);
}
.consent-modal__card h2 {
  margin: 0 0 .65rem;
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--logo-blue-deep);
}
.consent-modal__text {
  margin: 0 0 1rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ink-soft, #4a5570);
}
.consent-modal__check {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  padding: .75rem .85rem;
  border-radius: .85rem;
  border: 1px solid var(--line);
  background: #f8fafc;
  font-size: .88rem;
  cursor: pointer;
  line-height: 1.4;
}
.consent-modal__check input {
  margin-top: .2rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--logo-blue);
  flex-shrink: 0;
}
.consent-modal__err {
  margin: .55rem 0 0;
  font-size: .82rem;
  color: #c02626;
  font-weight: 600;
}
.consent-modal__acts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
  margin-top: 1.1rem;
}
.cp-call__field-group,
.cp-call .field,
.kontak-card .field {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
  margin-bottom: 1.15rem !important;
}

.cp-call__label,
.cp-call .field label,
.kontak-card .field label {
  display: block !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--logo-blue-deep, #0c275f) !important;
  letter-spacing: 0.01em !important;
  margin: 0 !important;
}

.cp-call__input,
.cp-call .field input,
.cp-call input[type="text"],
.kontak-card .field input {
  display: block !important;
  width: 100% !important;
  padding: 0.85rem 1.15rem !important;
  border-radius: 0.95rem !important;
  border: 1.5px solid rgba(12, 39, 95, 0.14) !important;
  background: #f8fafc !important;
  font-family: inherit !important;
  font-size: 0.94rem !important;
  font-weight: 500 !important;
  color: var(--ink, #0f172a) !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.cp-call__input:focus,
.cp-call .field input:focus,
.cp-call input[type="text"]:focus,
.kontak-card .field input:focus {
  outline: none !important;
  background: #ffffff !important;
  border-color: var(--logo-blue, #163f9c) !important;
  box-shadow: 0 0 0 3.5px rgba(22, 63, 156, 0.12) !important;
}

/* —— 404 —— */
.err404 {
  max-width: 32rem;
  padding: 1.5rem 0 3rem;
  text-align: left;
}
.err404__code {
  margin: 0 0 0.35rem;
  font-family: var(--display);
  font-size: clamp(4.5rem, 14vw, 6.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--logo-blue);
  opacity: 0.18;
}
.err404__kicker {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--logo-gold);
}
.err404__title {
  margin: 0 0 0.55rem;
  font-family: var(--display);
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--logo-blue-deep);
}
.err404__lead {
  margin: 0 0 1.35rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 28rem;
}
.err404__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

/* ========== Aksesibilitas ========== */
:root {
  --a11y-text-scale: 1;
}
html {
  font-size: calc(16px * var(--a11y-text-scale, 1));
}

.skip-link {
  position: fixed !important;
  top: -9999px !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  z-index: 999999 !important;
}
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed !important;
  top: 1rem !important;
  left: 1rem !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  overflow: visible !important;
  padding: 0.65rem 1.25rem !important;
  border-radius: 999px !important;
  background: #0c275f !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(12, 39, 95, 0.4) !important;
  outline: 3px solid var(--logo-gold, #d4a017) !important;
  outline-offset: 2px !important;
}

.main:focus {
  outline: none;
}
.main:focus-visible {
  outline: 2px solid var(--logo-blue);
  outline-offset: 4px;
}

/* Fokus keyboard global */
:focus-visible {
  outline: 2px solid var(--logo-blue);
  outline-offset: 3px;
}
.a11y-contrast :focus-visible {
  outline-color: #ffe566;
}

.a11y {
  position: fixed;
  left: max(0.85rem, env(safe-area-inset-left));
  bottom: calc(5.4rem + env(safe-area-inset-bottom));
  z-index: 9400;
  font-family: var(--font, "Plus Jakarta Sans", system-ui, sans-serif);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(0.95);
  transition: opacity 0.45s ease, visibility 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.a11y.is-ready {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.a11y__fab {
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: linear-gradient(135deg, #163f9c 0%, #0c275f 100%);
  color: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(12, 39, 95, 0.35);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  user-select: none;
}
.a11y__fab:hover {
  transform: scale(1.06);
  box-shadow: 0 12px 30px rgba(12, 39, 95, 0.45);
  filter: brightness(1.1);
}
.a11y__fab:focus-visible {
  outline: 3px solid var(--logo-gold, #d4a017);
  outline-offset: 3px;
}
.a11y.is-open .a11y__fab {
  background: #0055ff;
  box-shadow: 0 0 0 4px rgba(0, 85, 255, 0.3);
}

/* Panel Drawer — Constrained to stay inside viewport */
.a11y__panel {
  position: fixed;
  top: max(0.85rem, env(safe-area-inset-top));
  bottom: calc(5.4rem + 3.2rem + 0.65rem);
  left: max(0.85rem, env(safe-area-inset-left));
  width: min(23.5rem, calc(100vw - 1.8rem));
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(4, 12, 34, 0.28);
  border: 1px solid rgba(12, 39, 95, 0.12);
  animation: a11yPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--ink);
}
.a11y__panel[hidden] {
  display: none !important;
}

@keyframes a11yPop {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header Topbar Biru */
.a11y__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.15rem;
  background: linear-gradient(135deg, #0055ff 0%, #163f9c 100%);
  color: #ffffff;
}
.a11y__topbar-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.a11y__topbar-ico {
  flex-shrink: 0;
}
.a11y__topbar-title {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.a11y__close-btn {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 0 !important;
  line-height: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  transition: all 0.18s ease;
}
.a11y__close-btn svg {
  display: block;
  pointer-events: none;
  transition: transform 0.18s ease;
}
.a11y__close-btn:hover {
  background: #ffffff;
  color: #163f9c;
}
.a11y__close-btn:hover svg {
  transform: rotate(90deg) scale(1.1);
}

/* Body Scrollable Area */
.a11y__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.95rem 1.1rem;
}
.a11y__meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.a11y__lang-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #4a5570;
  background: #f0f4fa;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}
.a11y__profile-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: #163f9c;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 8 Profiles Grid (2 Columns) */
.a11y__profiles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem;
}
.a11y__profile-card {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(12, 39, 95, 0.1);
  border-radius: 0.75rem;
  background: #f8fafc;
  color: #121c33;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: all 0.18s ease;
}
.a11y__profile-card:hover {
  background: #edf2fc;
  border-color: rgba(22, 63, 156, 0.3);
}
.a11y__profile-card.is-active {
  background: #0055ff !important;
  color: #ffffff !important;
  border-color: #0055ff !important;
  box-shadow: 0 4px 12px rgba(0, 85, 255, 0.3);
}
.a11y__card-ico,
.a11y__feat-ico,
.a11y__reset-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  color: #163f9c;
}
.a11y__profile-card.is-active .a11y__card-ico,
.a11y__feat-card.is-active .a11y__feat-ico {
  color: #ffffff !important;
}
.a11y__card-ico svg,
.a11y__feat-ico svg,
.a11y__reset-ico svg {
  display: block;
  transition: transform 0.18s ease;
}
.a11y__profile-card:hover .a11y__card-ico svg,
.a11y__feat-card:hover .a11y__feat-ico svg {
  transform: scale(1.1);
}
.a11y__card-txt {
  line-height: 1.25;
}

.a11y__divider {
  height: 1px;
  background: rgba(12, 39, 95, 0.08);
  margin: 0.85rem 0;
}

/* 12 Features Grid (2 Columns) */
.a11y__features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem;
}
.a11y__feat-card {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(12, 39, 95, 0.08);
  border-radius: 0.75rem;
  background: #ffffff;
  color: #121c33;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all 0.18s ease;
}
.a11y__feat-card:hover {
  border-color: rgba(22, 63, 156, 0.25);
  background: #f5f8fe;
}
.a11y__feat-card.is-active {
  background: #163f9c !important;
  color: #ffffff !important;
  border-color: #163f9c !important;
}
.a11y__feat-ico {
  font-size: 1.05rem;
  flex-shrink: 0;
}
.a11y__feat-txt {
  line-height: 1.2;
}

/* Action Footer Bar */
.a11y__foot {
  padding: 0.8rem 1.1rem 0.9rem;
  background: #f8fafc;
  border-top: 1px solid rgba(12, 39, 95, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.a11y__reset-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.65rem 1rem;
  border: 0;
  border-radius: 999px;
  background: #0055ff;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 85, 255, 0.35);
  transition: all 0.18s ease;
}
.a11y__reset-btn:hover {
  background: #0044cc;
  transform: translateY(-1px);
}
.a11y__ver-text {
  margin: 0;
  text-align: center;
  font-size: 0.68rem;
  color: #6b7589;
  font-weight: 600;
}

/* Mobile Adjustments for A11y Panel */
@media (max-width: 480px) {
  .a11y {
    left: 0.85rem;
    bottom: calc(4.8rem + env(safe-area-inset-bottom));
  }
  .a11y__panel {
    position: fixed;
    top: max(0.65rem, env(safe-area-inset-top));
    bottom: calc(4.8rem + 3.2rem + 0.5rem);
    left: 0.85rem;
    right: 0.85rem;
    width: auto;
  }
}

/* —— Global Accessibility Feature Class Overrides —— */
html.a11y-contrast {
  filter: contrast(135%);
  background-color: #000000 !important;
  color: #ffffff !important;
}
html.a11y-grayscale {
  filter: grayscale(100%);
}
html.a11y-pause-anim *,
html.a11y-pause-anim *::before,
html.a11y-pause-anim *::after {
  animation: none !important;
  transition: none !important;
}
html.a11y-underline a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
}
html.a11y-dyslexic-font {
  font-family: "OpenDyslexic", "Comic Sans MS", system-ui, sans-serif !important;
}
html.a11y-large-cursor, html.a11y-large-cursor * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="%230055ff" stroke="%23ffffff" stroke-width="2"><path d="M3 3l7 18 3-7 7-3L3 3z"/></svg>'), auto !important;
}
html.a11y-line-height p, html.a11y-line-height li {
  line-height: 2 !important;
}
html.a11y-letter-spacing p, html.a11y-letter-spacing span {
  letter-spacing: 0.08em !important;
}
html.a11y-highlight h1, html.a11y-highlight h2, html.a11y-highlight h3, html.a11y-highlight a {
  outline: 2px solid #0055ff !important;
  outline-offset: 2px !important;
}
html.a11y-align-left body { text-align: left !important; }
html.a11y-align-center body { text-align: center !important; }
html.a11y-align-justify body { text-align: justify !important; }

/* ==========================================================================
   Program Detail Showcase — High-End Editorial Design System
   ========================================================================== */

.pk-detail-wrap {
  padding-bottom: 5rem;
  background: linear-gradient(180deg, rgba(238, 244, 255, 0.7) 0%, rgba(255, 255, 255, 1) 420px);
}

/* Floating Navigation Header */
.pk-top-bar {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(12, 39, 95, 0.08);
  padding: 0.85rem 0;
  position: sticky;
  top: var(--topbar-h, 0px);
  z-index: 25;
}

.pk-top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.pk-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border-radius: 99px;
  background: #ffffff;
  border: 1.5px solid rgba(12, 39, 95, 0.15);
  box-shadow: 0 4px 14px rgba(12, 39, 95, 0.06);
  color: var(--logo-blue-deep);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.22s ease;
}

.pk-back-btn:hover {
  background: var(--logo-blue-deep);
  color: #ffffff;
  border-color: var(--logo-blue-deep);
  box-shadow: 0 8px 20px rgba(12, 39, 95, 0.2);
  transform: translateX(-3px);
}

.pk-bc-nav {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.pk-bc-nav li:not(:last-child)::after {
  content: "/";
  margin-left: 0.55rem;
  opacity: 0.35;
}

.pk-bc-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}

.pk-bc-nav a:hover {
  color: var(--logo-blue-deep);
}

.pk-bc-nav li[aria-current="page"] {
  font-weight: 800;
  color: var(--logo-blue-deep);
}

/* Hero Showcase Banner */
.pk-hero-banner {
  padding: 2.25rem 0 1.75rem;
}

.pk-hero-box {
  position: relative;
  border-radius: 2rem;
  background: linear-gradient(135deg, #0c275f 0%, #163f9c 60%, #0d2a6b 100%);
  color: #ffffff;
  padding: 2.5rem;
  box-shadow: 0 24px 60px rgba(12, 39, 95, 0.22);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.pk-hero-box__bg-aura {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: var(--pk-accent, var(--logo-gold));
  filter: blur(100px);
  opacity: 0.35;
  pointer-events: none;
}

.pk-hero-box__content {
  position: relative;
  z-index: 2;
}

.pk-hero-box__tag-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.15rem;
  flex-wrap: wrap;
}

.pk-tag-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.85rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--logo-gold, #f5c842);
  text-transform: uppercase;
}

.pk-tag-code {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.85rem;
  border-radius: 99px;
  background: var(--pk-accent, var(--logo-gold));
  color: #ffffff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.pk-hero-box__title {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin: 0 0 0.85rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.pk-hero-box__lead {
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  max-width: 52rem;
  margin: 0 0 2.25rem;
}

/* Quick Stats Row */
.pk-hero-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.pk-stat-card {
  display: flex;
  flex-direction: column;
  padding: 0.9rem 1.15rem;
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: transform 0.2s ease, background 0.2s ease;
}

.pk-stat-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.22);
}

.pk-stat-card__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.pk-stat-card__lbl {
  font-size: 0.76rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 0.15rem;
}

/* Main Body Layout */
.pk-body-section {
  padding-top: 1rem;
}

.pk-body-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 960px) {
  .pk-body-grid {
    grid-template-columns: minmax(0, 1fr) 350px;
    align-items: start;
  }
}

.pk-body-main {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.pk-body-side {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* Content Card Blocks */
.pk-card-block {
  background: #ffffff;
  border: 1px solid rgba(12, 39, 95, 0.1);
  border-radius: 1.6rem;
  padding: 2rem;
  box-shadow: 0 12px 36px rgba(12, 39, 95, 0.05);
}

.pk-card-block__head {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1.35rem;
}

.pk-card-block__badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--logo-gold, #c48f10);
  text-transform: uppercase;
}

.pk-card-block__title {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--logo-blue-deep);
  margin: 0;
}

.pk-card-block__desc {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
}

.pk-text-body p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-body, #2c3545);
  margin-bottom: 1.15rem;
}

.pk-text-body p:last-child {
  margin-bottom: 0;
}

/* Competency Grid */
.pk-competency-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.9rem;
}

.pk-competency-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  border-radius: 1.15rem;
  background: rgba(244, 248, 255, 0.85);
  border: 1px solid rgba(12, 39, 95, 0.08);
  transition: all 0.22s ease;
}

.pk-competency-card:hover {
  transform: translateY(-3px);
  background: #ffffff;
  border-color: rgba(12, 39, 95, 0.18);
  box-shadow: 0 10px 24px rgba(12, 39, 95, 0.08);
}

.pk-competency-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pk-accent, var(--logo-blue));
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(12, 39, 95, 0.18);
}

.pk-competency-card__text {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--logo-blue-deep);
}

/* Career Grid */
.pk-career-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.pk-career-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 99px;
  background: rgba(12, 39, 95, 0.05);
  border: 1px solid rgba(12, 39, 95, 0.1);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--logo-blue-deep);
  transition: all 0.22s ease;
}

.pk-career-item:hover {
  background: var(--logo-blue-deep);
  color: #ffffff;
  border-color: var(--logo-blue-deep);
  transform: translateY(-2px);
}

.pk-career-item__check {
  color: var(--pk-accent, var(--logo-blue));
}

.pk-career-item:hover .pk-career-item__check {
  color: var(--logo-gold);
}

.pk-bottom-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Sidebar Photo Stack & Program Switcher */
.pk-photo-stack {
  background: #ffffff;
  border: 1px solid rgba(12, 39, 95, 0.1);
  border-radius: 1.6rem;
  padding: 1.5rem;
  box-shadow: 0 12px 36px rgba(12, 39, 95, 0.05);
}

.pk-photo-stack__lbl {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--logo-gold);
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: block;
}

.pk-photo-stack__grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pk-photo-frame {
  position: relative;
  margin: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--logo-blue-deep);
  border: 3px solid #ffffff;
  box-shadow: 0 12px 28px rgba(12, 39, 95, 0.12);
  aspect-ratio: 16 / 11;
}

.pk-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.pk-photo-frame:hover img {
  transform: scale(1.06);
}

.pk-photo-frame__badge {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 0.5rem;
  background: rgba(8, 22, 54, 0.85);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
}

.pk-side-box {
  background: #ffffff;
  border: 1px solid rgba(12, 39, 95, 0.1);
  border-radius: 1.6rem;
  padding: 1.5rem;
  box-shadow: 0 12px 36px rgba(12, 39, 95, 0.05);
}

.pk-side-box__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--logo-blue-deep);
  margin: 0 0 1.15rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(12, 39, 95, 0.08);
}

.pk-side-programs-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pk-side-prog-card {
  display: block;
  padding: 0.95rem 1.2rem;
  border-radius: 1.15rem;
  text-decoration: none;
  background: rgba(244, 248, 255, 0.75);
  border: 1px solid rgba(12, 39, 95, 0.08);
  border-left: 4px solid var(--item-accent, var(--logo-blue));
  transition: all 0.22s ease;
}

.pk-side-prog-card:hover {
  background: #ffffff;
  border-color: rgba(12, 39, 95, 0.18);
  border-left-color: var(--item-accent, var(--logo-blue));
  box-shadow: 0 8px 24px rgba(12, 39, 95, 0.1);
  transform: translateX(4px);
}

.pk-side-prog-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.pk-side-prog-card__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--logo-blue-deep);
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
}

.pk-side-prog-card__sub {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.pk-side-banner {
  background: linear-gradient(145deg, #0c275f 0%, #163f9c 100%);
  border-radius: 1.6rem;
  padding: 1.75rem 1.5rem;
  color: #ffffff;
  box-shadow: 0 16px 40px rgba(12, 39, 95, 0.2);
}

.pk-side-banner__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.2rem;
  color: #ffffff;
  margin: 0 0 0.6rem;
}

.pk-side-banner__text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 1.25rem;
}

/* ==========================================================================
   Accessibility (a11y) Floating Widget & Modal Panel System
   ========================================================================== */

.a11y {
  position: fixed !important;
  bottom: 1.5rem !important;
  left: 1.5rem !important;
  z-index: 100000 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.a11y.is-ready {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* FAB Button */
.a11y__fab {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  background: var(--logo-blue-deep, #0c275f) !important;
  color: #ffffff !important;
  border: 2.5px solid #ffffff !important;
  box-shadow: 0 8px 24px rgba(12, 39, 95, 0.35) !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
}

.a11y__fab:hover {
  transform: scale(1.1) !important;
  background: var(--logo-blue, #163f9c) !important;
  box-shadow: 0 12px 32px rgba(12, 39, 95, 0.45) !important;
}

.a11y__fab:focus-visible {
  outline: 3px solid var(--logo-gold, #f5c842) !important;
  outline-offset: 3px !important;
}

.a11y__fab-ico {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Panel Container */
.a11y__panel {
  position: fixed !important;
  bottom: 5.5rem !important;
  left: 1.5rem !important;
  width: min(420px, calc(100vw - 3rem)) !important;
  max-height: min(640px, calc(100vh - 7rem)) !important;
  background: #ffffff !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 24px 70px rgba(12, 39, 95, 0.28), 0 0 0 1px rgba(12, 39, 95, 0.12) !important;
  overflow: hidden !important;
  display: none !important;
  flex-direction: column !important;
  z-index: 100001 !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
  transform: translateY(12px) scale(0.96) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* OPEN STATE: Explicitly force display flex when root or panel has is-open, or not hidden */
.a11y.is-open .a11y__panel,
.a11y__panel.is-open,
.a11y__panel:not([hidden]) {
  display: flex !important;
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (max-width: 480px) {
  .a11y__panel {
    bottom: 0;
    left: 0;
    width: 100vw;
    max-height: 85vh;
    border-radius: 1.5rem 1.5rem 0 0;
  }
}

/* Panel Header Topbar */
.a11y__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 1.25rem;
  background: linear-gradient(135deg, #0c275f 0%, #163f9c 100%);
  color: #ffffff;
  flex-shrink: 0;
}

.a11y__topbar-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.a11y__topbar-ico {
  color: var(--logo-gold, #f5c842);
}

.a11y__topbar-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.a11y__close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.a11y__close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Panel Body & Scrollable Area */
.a11y__body {
  padding: 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  max-height: 480px;
}

.a11y__meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.a11y__lang-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem;
  border-radius: 99px;
  background: rgba(12, 39, 95, 0.06);
  border: 1px solid rgba(12, 39, 95, 0.1);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--logo-blue-deep);
}

.a11y__profile-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--logo-gold, #c48f10);
}

/* Profiles Grid */
.a11y__profiles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}

.a11y__profile-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.9rem;
  background: rgba(244, 248, 255, 0.8);
  border: 1.5px solid rgba(12, 39, 95, 0.1);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  outline: none;
}

.a11y__profile-card:hover {
  background: #ffffff;
  border-color: var(--logo-blue);
  box-shadow: 0 6px 16px rgba(12, 39, 95, 0.08);
  transform: translateY(-1px);
}

.a11y__profile-card.is-active {
  background: var(--logo-blue-deep, #0c275f);
  color: #ffffff;
  border-color: var(--logo-blue-deep);
  box-shadow: 0 6px 18px rgba(12, 39, 95, 0.2);
}

.a11y__profile-card.is-active .a11y__card-ico {
  color: var(--logo-gold, #f5c842);
}

.a11y__card-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--logo-blue);
  flex-shrink: 0;
}

.a11y__card-txt {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
}

.a11y__divider {
  height: 1px;
  background: rgba(12, 39, 95, 0.1);
  margin: 0.25rem 0;
}

/* Features Grid */
.a11y__features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}

.a11y__feat-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.8rem;
  background: #ffffff;
  border: 1.5px solid rgba(12, 39, 95, 0.1);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  outline: none;
}

.a11y__feat-card:hover {
  border-color: var(--logo-blue);
  background: rgba(244, 248, 255, 0.9);
  box-shadow: 0 4px 12px rgba(12, 39, 95, 0.06);
}

.a11y__feat-card.is-active {
  background: var(--logo-blue, #163f9c);
  color: #ffffff;
  border-color: var(--logo-blue);
}

.a11y__feat-card.is-active .a11y__feat-ico {
  color: #ffffff;
}

.a11y__feat-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--logo-blue);
  flex-shrink: 0;
}

.a11y__feat-txt {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
}

/* Footer Reset */
.a11y__foot {
  padding: 1rem 1.25rem;
  background: rgba(244, 248, 255, 0.6);
  border-top: 1px solid rgba(12, 39, 95, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.a11y__reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.15rem;
  border-radius: 99px;
  background: #ffffff;
  border: 1.5px solid rgba(220, 53, 69, 0.3);
  color: #dc3545;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.a11y__reset-btn:hover {
  background: #dc3545;
  color: #ffffff;
  border-color: #dc3545;
  box-shadow: 0 4px 14px rgba(220, 53, 69, 0.25);
}

.a11y__reset-ico {
  display: flex;
  align-items: center;
}

.a11y__ver-text {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0;
}

/* ======================================================
   GLOBAL SCROLL REVEAL & CARD MICRO-INTERACTION STYLES
   ====================================================== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s cubic-bezier(0.25, 1, 0.5, 1), transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger reveals for card grids */
.org-grid > article,
.pk-grid > a,
.life__cards-grid > a,
.ip-cards > article,
.vmt-pillars > article {
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

.org-grid > article:hover,
.pk-grid > a:hover,
.life__cards-grid > a:hover,
.ip-cards > article:hover,
.vmt-pillars > article:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 42px rgba(12, 39, 95, 0.12);
}

/* Table row interactive transition */
.interactive-tr {
  transition: background 0.18s ease, transform 0.15s ease;
}
.interactive-tr:hover {
  background: rgba(22, 63, 156, 0.045) !important;
}

/* Filter chip hover */
.ekskul-chip:hover {
  border-color: #0c275f !important;
  color: #0c275f !important;
  transform: translateY(-1px);
}
.ekskul-chip.is-active:hover {
  color: #ffffff !important;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Universal Custom Modal & Alert (Ganti bawaan browser alert/confirm) */
.ska-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.25rem !important;
  background: rgba(7, 13, 28, 0.65) !important;
  backdrop-filter: blur(10px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s !important;
}
.ska-modal-overlay.is-active {
  opacity: 1 !important;
  visibility: visible !important;
}
.ska-modal-dialog {
  width: 100% !important;
  max-width: 25rem !important;
  background: #ffffff !important;
  border-radius: 1.6rem !important;
  padding: 2rem 1.75rem 1.65rem !important;
  text-align: center !important;
  box-shadow:
    0 4px 6px -1px rgba(12, 39, 95, 0.05),
    0 24px 60px -12px rgba(12, 39, 95, 0.25) !important;
  border: 1.5px solid rgba(12, 39, 95, 0.1) !important;
  transform: scale(0.92) translateY(10px) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}
.ska-modal-overlay.is-active .ska-modal-dialog {
  transform: scale(1) translateY(0) !important;
}
.ska-modal-badge {
  width: 54px !important;
  height: 54px !important;
  margin: 0 auto 1.1rem !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(22, 63, 156, 0.12), rgba(212, 160, 23, 0.18)) !important;
  color: var(--logo-blue, #163f9c) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(22, 63, 156, 0.1) !important;
}
.ska-modal-title {
  margin: 0 0 0.5rem !important;
  font-family: var(--display, inherit) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--logo-blue-deep, #0c275f) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.3 !important;
}
.ska-modal-text {
  margin: 0 0 1.5rem !important;
  font-size: 0.93rem !important;
  line-height: 1.55 !important;
  color: #475569 !important;
}
.ska-modal-btn {
  width: 100% !important;
  padding: 0.88rem 1.4rem !important;
  border-radius: 0.95rem !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  background: linear-gradient(135deg, #0c275f 0%, #163f9c 100%) !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 22px rgba(12, 39, 95, 0.22) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
}
.ska-modal-btn:hover {
  background: linear-gradient(135deg, #103277 0%, #1c4bb5 100%) !important;
  box-shadow: 0 12px 28px rgba(12, 39, 95, 0.3) !important;
  transform: translateY(-1px) !important;
}
.ska-modal-btn:active {
  transform: translateY(0) !important;
}

/* Input error shake animation */
@keyframes skaInputShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.input-error-shake {
  animation: skaInputShake 0.45s ease-in-out !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3.5px rgba(239, 68, 68, 0.22) !important;
}