/* =========================================================================
   SAKURA LISTA — Lembaga Pelatihan Khusus Bahasa Jepang
   Sistem desain: washi terang + navy + hinomaru red (diturunkan dari logo)
   ========================================================================= */

/* ---------- FONT (self-host, hanya wajah yang benar-benar dipakai) ------- */
@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/BebasNeue.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Shippori Mincho";
  src: url("fonts/ShipporiMincho.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

/* Cadangan dengan metrik disamakan — mencegah CLS saat font asli tiba.
   Angka diukur lewat measureText, bukan dikira-kira. */
@font-face {
  font-family: "Cadangan Bebas";
  src: local("Arial Narrow"), local("Impact"), local("Haettenschweiler"),
    local("Arial");
  size-adjust: 78%;
  ascent-override: 88%;
  descent-override: 12%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Cadangan Archivo";
  src: local("Arial"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 97%;
  ascent-override: 79%;
  descent-override: 21%;
  line-gap-override: 0%;
}

/* ---------- TOKEN ------------------------------------------------------- */
:root {
  /* Palet diturunkan dari logo Shouraino Hikari: navy #093375 + emas #C99F3B
     (diukur dari berkas avatar, bukan dikira-kira).

     Emas asli hanya 2,29:1 di atas latar terang -> GAGAL AA untuk teks.
     Karena itu emas cerah dipakai HANYA untuk bidang dan aksen di atas navy
     (di sana 5,95:1), sedangkan teks emas memakai varian tua #8A6410
     (4,97:1). Ini kebalikan Sakura Lista yang berpalet merah hinomaru. */
  --washi: #f6f5f1;
  --washi-2: #eceae3;
  --washi-3: #ddd9cd;
  --kertas: #fffefb;
  --navy: #092658;
  --navy-2: #0e3572;
  --navy-3: #1b4fa0;
  --fuji: #4a6080;

  /* Nama variabel --hinomaru dipertahankan supaya seluruh komponen tidak perlu
     diubah, tapi nilainya kini emas tua yang aman untuk teks kecil. */
  --hinomaru: #8a6410;
  --hinomaru-2: #6d4e08;
  --hinomaru-soft: #f5edd9;
  --emas: #c99f3b;
  --emas-cerah: #e3bd5e;
  --sakura: #e3bd5e;
  --wa: #11823f;

  --teks: var(--navy);
  --teks-2: #42506b;
  --teks-3: #5a6480;
  --garis: rgba(9, 38, 88, 0.14);
  --garis-kuat: rgba(9, 38, 88, 0.26);

  --display: "Bebas Neue", "Cadangan Bebas", "Arial Narrow", sans-serif;
  --body: "Archivo", "Cadangan Archivo", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --jp: "Shippori Mincho", "Yu Mincho", serif;

  --r-card: 18px;
  --r-pill: 999px;
  --maks: 1200px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);

  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-io: cubic-bezier(0.4, 0, 0.2, 1);

  --bayang-1: 0 1px 2px rgba(9, 38, 88, 0.06), 0 4px 14px rgba(9, 38, 88, 0.05);
  --bayang-2: 0 2px 6px rgba(9, 38, 88, 0.08), 0 18px 44px rgba(9, 38, 88, 0.1);
  --bayang-3: 0 30px 70px rgba(9, 38, 88, 0.18);
}

/* ---------- RESET ------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}
body {
  margin: 0;
  background: var(--washi);
  color: var(--teks);
  font-family: var(--body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
:focus-visible {
  outline: 3px solid var(--hinomaru);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Grain kertas washi — sangat halus, menahan kesan "flat digital" */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- TIPOGRAFI --------------------------------------------------- */
.mega {
  font-family: var(--display);
  font-size: clamp(2.9rem, 8.2vw, 6.4rem);
  line-height: 0.92;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  font-weight: 400;
}
.h1 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  line-height: 0.98;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}
.h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.8vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}
.h3 {
  font-family: var(--body);
  font-size: clamp(1.07rem, 1.6vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.008em;
}
.lead {
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  line-height: 1.75;
  color: var(--teks-2);
}
.kecil {
  font-size: 0.925rem;
  line-height: 1.6;
  color: var(--teks-2);
}
.jp {
  font-family: var(--jp);
  font-weight: 400;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* #D2232A hanya 4.36:1 di atas washi — gagal AA untuk teks 11px.
     Teksnya dipakai varian gelap; garisnya tetap merah penuh. */
  color: var(--hinomaru-2);
  font-weight: 400;
}
.eyebrow::before {
  content: "";
  width: 2.2rem;
  height: 2px;
  background: var(--hinomaru);
  flex: none;
}
.eyebrow.terang {
  color: var(--sakura);
}
.eyebrow.terang::before {
  background: var(--sakura);
}
em.aksen {
  font-style: normal;
  color: var(--hinomaru);
}
.no-sec {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--teks-3);
}

/* ---------- LAYOUT ------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--maks);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.sec {
  position: relative;
  padding: clamp(4rem, 9vw, 7.5rem) 0;
  z-index: 2;
}
.sec-soft {
  background: var(--washi-2);
}
.sec-alt {
  background: var(--navy);
  color: var(--kertas);
}
.sec-alt .lead,
.sec-alt .kecil {
  color: rgba(255, 253, 249, 0.72);
}
.sec-alt .no-sec {
  color: rgba(255, 253, 249, 0.55);
}
.kepala {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
  max-width: 60ch;
}

/* ---------- TOMBOL ------------------------------------------------------ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0 1.6rem;
  border-radius: var(--r-pill);
  font-family: var(--body);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  transition: transform 0.4s var(--e-out), box-shadow 0.4s var(--e-out),
    background-color 0.3s var(--e-io), color 0.3s var(--e-io);
}
.btn svg {
  flex: none;
  transition: transform 0.4s var(--e-out);
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}
.btn-solid {
  /* Teks navy di atas emas cerah = 9,1:1. Putih di atas emas hanya 2,47:1. */
  background: var(--emas);
  color: var(--navy);
  box-shadow: 0 2px 10px rgba(201, 159, 59, 0.32);
}
.btn-solid:hover {
  background: var(--emas-cerah);
  box-shadow: 0 12px 30px rgba(201, 159, 59, 0.44);
}
.btn-solid:hover svg {
  transform: translateX(4px);
}
.btn-ghost {
  background: var(--kertas);
  color: var(--navy);
  border: 1.5px solid var(--garis-kuat);
}
.btn-ghost:hover {
  border-color: var(--navy);
  box-shadow: var(--bayang-1);
}
.sec-alt .btn-ghost {
  background: transparent;
  color: var(--kertas);
  border-color: rgba(255, 253, 249, 0.38);
}
.sec-alt .btn-ghost:hover {
  border-color: var(--kertas);
  background: rgba(255, 253, 249, 0.08);
}
.btn-wa {
  background: var(--wa);
  color: #fff;
}
.btn-wa:hover {
  background: #0d6b33;
  box-shadow: 0 12px 30px rgba(17, 130, 63, 0.32);
}
.btn-kecil {
  min-height: 42px;
  padding: 0 1.15rem;
  font-size: 0.75rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.9rem;
  border-radius: var(--r-pill);
  /* 14% putih di atas foto tidak menjamin kontras apa pun. Dipakai navy
     pekat supaya teks chip punya latar yang pasti di foto mana pun. */
  background: rgba(6, 22, 52, 0.72);
  border: 1px solid rgba(227, 189, 94, 0.42);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kertas);
  backdrop-filter: blur(6px);
}
.chip-merah {
  /* Latar WAJIB opaque: .chip dasar memakai rgba(...,.14) dan kalau itu yang
     menang, latar efektifnya jadi foto hero -> terukur hanya 1,16:1. */
  background: var(--emas);
  border-color: var(--emas);
  color: var(--navy);
  backdrop-filter: none;
  font-weight: 600;
}
.chip-putih {
  background: var(--hinomaru-soft);
  border-color: rgba(201, 159, 59, 0.4);
  color: var(--hinomaru-2);
  backdrop-filter: none;
}

/* ---------- SPLASH ------------------------------------------------------ */
/* Splash disembunyikan SECARA DEFAULT dan hanya dihidupkan oleh html.motion-ok
   (dipasang skrip di <head>). Tanpa JS, atau dengan reduced-motion, pengunjung
   langsung melihat konten — splash tidak pernah menutupi apa pun. */
#splash {
  display: none;
}
html.motion-ok #splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--navy);
  transition: opacity 0.7s var(--e-out), visibility 0.7s;
  /* Hilang sendiri lewat CSS: tanpa JS atau saat JS gagal, splash TIDAK boleh
     mengunci halaman selamanya. JS hanya mempercepat & melewatinya per sesi. */
  animation: splashKeluar 0.7s var(--e-out) 1.25s forwards;
}
#splash.pergi {
  opacity: 0;
  visibility: hidden;
}
@keyframes splashKeluar {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.splash-in {
  text-align: center;
  color: var(--kertas);
}
.splash-kanji {
  font-family: var(--jp);
  font-size: clamp(3.2rem, 11vw, 5.6rem);
  color: var(--sakura);
  line-height: 1;
  animation: splashMuncul 0.9s var(--e-out) both;
}
.splash-nama {
  font-family: var(--display);
  font-size: clamp(1.5rem, 5vw, 2.3rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-top: 1rem;
  animation: splashMuncul 0.9s var(--e-out) 0.12s both;
}
.splash-sub {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 253, 249, 0.6);
  margin-top: 0.7rem;
  animation: splashMuncul 0.9s var(--e-out) 0.24s both;
}
@keyframes splashMuncul {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* ---------- PROGRESS + HEADER ------------------------------------------- */
#progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 120;
  background: linear-gradient(90deg, var(--emas), var(--emas-cerah));
  transition: width 0.1s linear;
}
#hdr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  transition: background-color 0.45s var(--e-io), box-shadow 0.45s var(--e-io),
    backdrop-filter 0.45s var(--e-io);
}
/* Di scroll 0 header melayang di atas hero GELAP. Teks navy di sana hanya
   1,10:1 — tidak terbaca. Selama belum .turun, header memakai teks terang
   plus scrim gradien tipis supaya tetap terbaca di foto mana pun. */
#hdr::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(6, 26, 61, 0.84) 0%,
    rgba(6, 26, 61, 0.54) 62%,
    rgba(6, 26, 61, 0) 100%
  );
  opacity: 1;
  transition: opacity 0.45s var(--e-io);
}
#hdr.turun::before {
  opacity: 0;
}
#hdr:not(.turun) .brand-tx strong {
  color: var(--kertas);
}
#hdr:not(.turun) .brand-tx span {
  color: rgba(255, 253, 249, 0.76);
}
#hdr:not(.turun) .nav a {
  color: rgba(255, 253, 249, 0.86);
}
#hdr:not(.turun) .nav a:hover,
#hdr:not(.turun) .nav a[aria-current="true"] {
  color: var(--kertas);
}
#hdr:not(.turun) .nav a::after {
  background: var(--sakura);
}
#hdr:not(.turun) .burger {
  background: rgba(255, 253, 249, 0.12);
  border-color: rgba(255, 253, 249, 0.42);
  backdrop-filter: blur(6px);
}
#hdr:not(.turun) .burger span {
  background: var(--kertas);
}
#hdr.turun {
  background: rgba(247, 244, 238, 0.9);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 var(--garis), 0 10px 30px rgba(9, 38, 88, 0.06);
}
.hdr-in {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 74px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
}
.brand img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: none;
}
.brand-tx strong {
  display: block;
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--navy);
  transition: color 0.45s var(--e-io);
}
.brand-tx strong em {
  font-style: normal;
  color: var(--hinomaru);
  transition: color 0.45s var(--e-io);
}
#hdr:not(.turun) .brand-tx strong em {
  color: var(--sakura);
}
.brand-tx span {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--teks-2);
  margin-top: 5px;
  transition: color 0.45s var(--e-io);
}
.brand-tx span::before {
  content: "";
  width: 14px;
  height: 1px;
  background: currentColor;
  opacity: 0.65;
  flex: none;
}
.brand img {
  transition: transform 0.5s var(--e-out);
}
.brand:hover img {
  transform: rotate(-7deg) scale(1.06);
}
.nav {
  display: none;
  gap: 1.5rem;
}
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--teks-2);
  padding: 0.35rem 0;
  transition: color 0.3s var(--e-io);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--hinomaru);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--e-out);
}
.nav a:hover,
.nav a[aria-current="true"] {
  color: var(--navy);
}
.nav a:hover::after,
.nav a[aria-current="true"]::after {
  transform: scaleX(1);
}
.hdr-cta {
  display: none;
}
.burger {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1.5px solid var(--garis-kuat);
  background: var(--kertas);
}
.burger span {
  display: block;
  width: 19px;
  height: 2px;
  background: var(--navy);
  transition: transform 0.4s var(--e-out), opacity 0.3s;
}
.burger span + span {
  margin-top: 4px;
}
@media (min-width: 980px) {
  .nav,
  .hdr-cta {
    display: flex;
  }
  .burger {
    display: none;
  }
}

/* ---------- DRAWER ------------------------------------------------------ */
#scrim {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(9, 38, 88, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--e-io), visibility 0.4s;
}
#scrim.on {
  opacity: 1;
  visibility: visible;
}
#drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 140;
  width: min(340px, 86vw);
  background: var(--kertas);
  padding: 1.3rem var(--pad) 2rem;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.5s var(--e-out);
  overflow-y: auto;
}
#drawer.on {
  transform: none;
}
.drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}
.drawer-top .no-sec {
  letter-spacing: 0.18em;
}
.x {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1.5px solid var(--garis-kuat);
}
#drawer nav {
  display: grid;
  gap: 0.1rem;
  margin-bottom: 1.6rem;
}
#drawer nav a {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--garis);
  font-family: var(--display);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.3s var(--e-io), padding-left 0.4s var(--e-out);
}
#drawer nav a i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--hinomaru);
}
#drawer nav a:hover {
  color: var(--hinomaru);
  padding-left: 0.4rem;
}
.drawer-bawah {
  margin-top: auto;
  display: grid;
  gap: 0.8rem;
}

/* ---------- HERO -------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: 110px;
  padding-bottom: 0;
  background: var(--navy);
  overflow: hidden;
  z-index: 2;
}
.hero-foto {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-foto figure {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.5s var(--e-io);
}
.hero-foto figure.on {
  opacity: 1;
}
.hero-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.hero-foto figure.on img {
  animation: kenburns 9s linear both;
}
@keyframes kenburns {
  from {
    transform: scale(1.015);
  }
  to {
    transform: scale(1.09);
  }
}
.hero-tirai {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
      180deg,
      rgba(9, 38, 88, 0.84) 0%,
      rgba(9, 38, 88, 0.52) 32%,
      rgba(9, 38, 88, 0.74) 68%,
      rgba(9, 38, 88, 0.96) 100%
    ),
    linear-gradient(94deg, rgba(9, 38, 88, 0.9) 0%, rgba(9, 38, 88, 0.1) 72%);
}
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.16;
  background-image: linear-gradient(
      to right,
      rgba(255, 253, 249, 0.5) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(255, 253, 249, 0.3) 1px, transparent 1px);
  background-size: 25% 100%, 100% 160px;
}
.hero-kanji {
  position: absolute;
  right: -2vw;
  top: 14vh;
  z-index: 2;
  font-family: var(--jp);
  font-size: clamp(7rem, 23vw, 20rem);
  line-height: 0.8;
  color: rgba(255, 253, 249, 0.055);
  pointer-events: none;
  user-select: none;
  writing-mode: vertical-rl;
}
.hero-in {
  position: relative;
  z-index: 4;
  width: 100%;
  color: var(--kertas);
}
.hero-atas {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.2rem, 4vw, 3.2rem);
  align-items: end;
}
@media (min-width: 1060px) {
  .hero-atas {
    grid-template-columns: 1.08fr 0.92fr;
  }
}
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}
.hero h1 {
  margin-bottom: 1.3rem;
  text-wrap: balance;
}
.hero h1 em.aksen {
  color: var(--sakura);
}
.hero .lead {
  color: rgba(255, 253, 249, 0.82);
  max-width: 48ch;
  margin-bottom: 1.8rem;
}
.hero-tombol {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 560px) {
  .hero-tombol {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* hero reveal per karakter — CSS, bukan JS (LCP)
   Pembungkus .kata memakai nowrap: tanpa itu browser memutus baris di antara
   dua huruf inline-block dan judulnya terbelah ("Je / pang"). */
.pecah .kata {
  display: inline-block;
  white-space: nowrap;
}
.pecah .hr {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em) rotate(2.5deg);
  filter: blur(5px);
}
html.motion-ok .pecah .hr {
  animation: charMuncul 0.78s var(--e-out) both;
  animation-delay: calc(var(--i) * 26ms + 120ms);
}
@keyframes charMuncul {
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}
html:not(.motion-ok) .pecah .hr {
  opacity: 1;
  transform: none;
  filter: none;
}

/* kartu dokumentasi di hero */
.hero-dok {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: rgba(255, 253, 249, 0.07);
  border: 1px solid rgba(255, 253, 249, 0.17);
  box-shadow: var(--bayang-3);
}
.hero-dok-bingkai {
  position: relative;
  aspect-ratio: 4 / 3;
}
.hero-dok-bingkai figure {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.85s var(--e-io), transform 0.85s var(--e-out);
}
.hero-dok-bingkai figure.on {
  opacity: 1;
  transform: none;
}
.hero-dok-bingkai img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-dok-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: rgba(9, 38, 88, 0.88);
}
.hero-dok-cap {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  color: rgba(255, 253, 249, 0.88);
  line-height: 1.4;
}
.hero-dok-no {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--sakura);
  flex: none;
}
.nav-bulat {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 253, 249, 0.3);
  color: var(--kertas);
  flex: none;
  transition: background-color 0.3s var(--e-io), transform 0.3s var(--e-out);
}
.nav-bulat:hover {
  background: var(--emas);
  border-color: var(--emas);
  color: var(--navy);
  transform: scale(1.08);
}

/* strip statistik bawah hero */
.hero-bawah {
  border-top: 1px solid rgba(255, 253, 249, 0.17);
  background: rgba(9, 38, 88, 0.5);
  backdrop-filter: blur(8px);
}
.hero-stat {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) {
  .hero-stat {
    grid-template-columns: repeat(4, 1fr);
  }
}
.hero-stat > div {
  padding: 1.1rem 0.4rem 1.2rem;
  border-right: 1px solid rgba(255, 253, 249, 0.12);
}
.hero-stat > div:last-child {
  border-right: 0;
}
@media (max-width: 759px) {
  .hero-stat > div:nth-child(2n) {
    border-right: 0;
  }
  .hero-stat > div:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 253, 249, 0.12);
  }
}
.hero-stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1;
  color: var(--kertas);
  letter-spacing: 0.01em;
}
.hero-stat span {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 253, 249, 0.66);
  margin-top: 0.4rem;
}
.hero-dots {
  position: absolute;
  left: var(--pad);
  bottom: calc(100% + 1.1rem);
  display: flex;
  gap: 0.45rem;
  z-index: 5;
}
.hero-dots button {
  /* Garisnya tipis secara visual, tapi area sentuhnya wajib >=24px.
     Tinggi dibawa padding transparan + background-clip: content-box. */
  width: 26px;
  height: 24px;
  padding: 10.5px 0;
  border-radius: 2px;
  background: rgba(255, 253, 249, 0.34);
  background-clip: content-box;
  transition: background-color 0.4s var(--e-io), width 0.4s var(--e-out);
}
.hero-dots button[aria-selected="true"] {
  background: var(--sakura);
  background-clip: content-box;
  width: 44px;
}

/* ---------- MARQUEE ----------------------------------------------------- */
.ribbon {
  background: var(--navy);
  color: var(--emas-cerah);
  padding: 0.95rem 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.ribbon-track {
  display: flex;
  width: max-content;
  gap: 0;
}
html.motion-ok .ribbon-track {
  animation: geser 38s linear infinite;
}
.ribbon:hover .ribbon-track {
  animation-play-state: paused;
}
@keyframes geser {
  to {
    transform: translateX(-50%);
  }
}
.ribbon-track > div {
  display: flex;
  flex: none;
}
.ribbon-track span {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  padding: 0 1.4rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ribbon-track span::after {
  content: "✦";
  font-size: 0.6rem;
  opacity: 0.6;
}

/* ---------- GARANSI / VALUE PROP ---------------------------------------- */
.garansi {
  display: grid;
  gap: 1px;
  background: var(--garis);
  border: 1px solid var(--garis);
  border-radius: var(--r-card);
  overflow: hidden;
}
@media (min-width: 720px) {
  .garansi {
    grid-template-columns: repeat(3, 1fr);
  }
}
.garansi > div {
  background: var(--kertas);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  transition: background-color 0.4s var(--e-io);
}
.garansi > div:hover {
  background: var(--hinomaru-soft);
}
.garansi .ikon {
  color: var(--hinomaru);
  margin-bottom: 0.9rem;
}
.garansi h3 {
  margin-bottom: 0.45rem;
}

/* ---------- REVEAL ------------------------------------------------------ */
html.motion-ok .rv {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition: opacity 0.85s var(--e-out), transform 0.85s var(--e-out),
    filter 0.85s var(--e-out);
  transition-delay: var(--d, 0ms);
}
html.motion-ok .rv.tampil {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ---------- TENTANG ----------------------------------------------------- */
.tentang {
  display: grid;
  gap: clamp(2rem, 4vw, 3.6rem);
  align-items: start;
}
@media (min-width: 940px) {
  .tentang {
    grid-template-columns: 1fr 1fr;
  }
}
.tentang-foto {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--bayang-2);
}
.tentang-foto img {
  width: 100%;
  aspect-ratio: 4 / 3.3;
  object-fit: cover;
  transition: transform 1.1s var(--e-out);
}
.tentang-foto:hover img {
  transform: scale(1.045);
}
.tentang-foto .stempel {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  /* Opaque, bukan alpha .9: teks di atas foto harus punya latar yang pasti,
     bukan bergantung pada piksel foto di belakangnya. */
  background: #092658;
  color: var(--kertas);
  padding: 0.75rem 1rem;
  border-radius: 12px;
  backdrop-filter: blur(6px);
}
.tentang-foto .stempel b {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
}
.tentang-foto .stempel span {
  font-family: var(--mono);
  font-size: 0.57rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 253, 249, 0.82);
}
.unggul {
  display: grid;
  gap: 0.1rem;
  margin-top: 1.8rem;
}
.unggul li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1.05rem 0;
  border-top: 1px solid var(--garis);
}
.unggul li:last-child {
  border-bottom: 1px solid var(--garis);
}
.unggul i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--hinomaru);
  padding-top: 0.32rem;
}
.unggul b {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

/* ---------- PROGRAM KARTU ---------------------------------------------- */
.grid-prog {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 255px), 1fr));
}
.kartu-prog {
  position: relative;
  display: block;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--navy);
  box-shadow: var(--bayang-1);
  transition: transform 0.5s var(--e-out), box-shadow 0.5s var(--e-out);
}
.kartu-prog:hover {
  transform: translateY(-6px);
  box-shadow: var(--bayang-2);
}
.kartu-prog-foto {
  position: relative;
  aspect-ratio: 4 / 3.2;
  overflow: hidden;
}
.kartu-prog-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--e-out), filter 0.6s var(--e-io);
}
.kartu-prog:hover .kartu-prog-foto img {
  transform: scale(1.07);
}
.kartu-prog-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(9, 38, 88, 0) 38%,
    rgba(9, 38, 88, 0.94) 100%
  );
}
.kartu-prog-tx {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.1rem 1.15rem 1.2rem;
  color: var(--kertas);
  z-index: 2;
}
.kartu-prog-tx .jpkecil {
  font-family: var(--jp);
  font-size: 0.78rem;
  color: var(--sakura);
  display: block;
  margin-bottom: 0.25rem;
}
.kartu-prog-tx b {
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  line-height: 1.04;
  display: block;
}
.kartu-prog-tx p {
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 253, 249, 0.74);
  margin-top: 0.4rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.55s var(--e-out), opacity 0.4s var(--e-io),
    margin-top 0.55s var(--e-out);
}
.kartu-prog:hover .kartu-prog-tx p,
.kartu-prog:focus-visible .kartu-prog-tx p {
  max-height: 5.2rem;
  opacity: 1;
}
@media (hover: none) {
  .kartu-prog-tx p {
    max-height: 5.2rem;
    opacity: 1;
  }
}

/* ---------- STEPPER ALUR ------------------------------------------------ */
.alur {
  position: relative;
  display: grid;
  gap: 1px;
  counter-reset: s;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 900px) {
  .alur {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .alur::before {
    content: "";
    position: absolute;
    top: 34px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: repeating-linear-gradient(
      90deg,
      rgba(255, 253, 249, 0.3) 0 7px,
      transparent 7px 14px
    );
  }
}
.alur li {
  position: relative;
  padding: 1.6rem clamp(0.8rem, 1.6vw, 1.4rem);
  text-align: center;
  counter-increment: s;
}
.alur .lingkar {
  position: relative;
  z-index: 2;
  width: 68px;
  height: 68px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy);
  border: 2px solid rgba(255, 253, 249, 0.28);
  font-family: var(--display);
  font-size: 1.6rem;
  color: var(--sakura);
  transition: background-color 0.45s var(--e-io),
    border-color 0.45s var(--e-io), transform 0.5s var(--e-out);
}
.alur li:hover .lingkar {
  background: var(--emas);
  border-color: var(--emas);
  color: var(--navy);
  transform: scale(1.07) rotate(-4deg);
}
.alur .lingkar::after {
  content: counter(s, decimal-leading-zero);
}
.alur b {
  display: block;
  font-family: var(--display);
  font-size: 1.22rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.alur p {
  font-size: 0.84rem;
  line-height: 1.55;
  color: rgba(255, 253, 249, 0.68);
}

/* ---------- ALUMNI: KARTU PENGUMUMAN -----------------------------------
   Keputusan sadar: TIDAK memakai foto wajah hasil AI. Model yang tersedia
   gagal pada wajah dan tangan, dan foto orang palsu di halaman kredibilitas
   justru merusak kepercayaan. Kartu ini meniru pengumuman LOLOS MENSETSU
   di Instagram mereka — tipografi dan kanji yang memimpin, bukan stok wajah. */
.alum-wrap {
  position: relative;
}
.alum-rel {
  overflow: hidden;
  margin: 0 calc(var(--pad) * -1);
  padding: 0 var(--pad);
}
.alum-track {
  display: flex;
  gap: clamp(0.85rem, 1.8vw, 1.35rem);
  /* Tanpa transition: posisi digerakkan rAF tiap frame. Transition hanya
     dipasang sementara oleh JS saat tombol prev/next ditekan. */
  will-change: transform;
  touch-action: pan-y;
  cursor: grab;
}
.alum-track:active {
  cursor: grabbing;
}
/* Tepi gulungan dibuat memudar supaya kartu tidak terpotong mentah. */
.alum-rel {
  -webkit-mask-image: linear-gradient(
    90deg, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
  mask-image: linear-gradient(
    90deg, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
}
@media (max-width: 640px) {
  .alum-rel {
    -webkit-mask-image: none;
    mask-image: none;
  }
}
.alum-kartu {
  position: relative;
  flex: 0 0 auto;
  width: clamp(240px, 76vw, 296px);
  min-height: 310px;
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.25rem 1.3rem;
  background:
    linear-gradient(180deg, var(--kertas) 0%, var(--washi) 100%);
  border: 1px solid var(--garis);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--bayang-1);
  transition: transform 0.55s var(--e-out), box-shadow 0.55s var(--e-out),
    border-color 0.4s var(--e-io);
}
.alum-kartu::before {
  /* pita merah tipis di tepi atas — penanda "pengumuman" */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--emas), var(--emas-cerah));
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform 0.65s var(--e-out);
}
.alum-kartu:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 159, 59, 0.48);
  box-shadow: var(--bayang-2);
}
.alum-kartu:hover::before {
  transform: scaleX(1);
}
.alum-atas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.alum-lolos {
  display: inline-flex;
  align-items: center;
  background: var(--navy);
  color: var(--emas-cerah);
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.36rem 0.65rem;
  border-radius: var(--r-pill);
}
.alum-no {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--teks-3);
}
.alum-kanji {
  font-size: clamp(3.3rem, 8vw, 4.3rem);
  line-height: 1;
  color: var(--navy);
  opacity: 0.1;
  margin: 0.2rem 0 auto;
  letter-spacing: -0.04em;
  transition: opacity 0.6s var(--e-io), transform 0.7s var(--e-out);
  transform-origin: left center;
}
.alum-kartu:hover .alum-kanji {
  opacity: 0.2;
  transform: scale(1.05);
}
.alum-tx {
  position: relative;
  padding-top: 1rem;
  border-top: 1px solid var(--garis);
}
.alum-av {
  position: absolute;
  top: -22px;
  right: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--kertas);
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 14px rgba(9, 38, 88, 0.24);
  transition: background-color 0.4s var(--e-io), transform 0.5s var(--e-out);
}
.alum-kartu:hover .alum-av {
  background: var(--navy-3);
  transform: scale(1.08) rotate(-5deg);
}
.alum-tx b {
  display: block;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 0.5rem;
  padding-right: 3rem;
}
.alum-meta {
  display: grid;
  gap: 0.3rem;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teks-2);
}
.alum-omede {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--hinomaru);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s var(--e-io), transform 0.5s var(--e-out);
}
.alum-kartu:hover .alum-omede {
  opacity: 1;
  transform: none;
}
@media (hover: none) {
  .alum-omede {
    opacity: 1;
    transform: none;
  }
}
.alum-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
}
.alum-garis {
  flex: 1;
  height: 3px;
  background: var(--garis);
  border-radius: 2px;
  overflow: hidden;
}
.alum-garis i {
  display: block;
  height: 100%;
  background: var(--hinomaru);
  border-radius: 2px;
  transition: transform 0.6s var(--e-out);
  transform-origin: left;
}
.nav-bulat.gelap {
  border-color: var(--garis-kuat);
  color: var(--navy);
}
.nav-bulat.gelap:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--kertas);
}

/* ---------- GALERI ------------------------------------------------------ */
.galeri {
  display: grid;
  gap: clamp(0.6rem, 1.3vw, 1rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) {
  .galeri {
    grid-template-columns: repeat(4, 1fr);
  }
}
.gal-item {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--washi-3);
  aspect-ratio: 1;
  display: block;
  width: 100%;
  padding: 0;
}
.gal-item.lebar {
  grid-column: span 2;
  aspect-ratio: 2 / 1;
}
@media (min-width: 760px) {
  .gal-item.tinggi {
    grid-row: span 2;
    aspect-ratio: 1 / 2.06;
  }
}
.gal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.85s var(--e-out), filter 0.5s var(--e-io);
}
.gal-item:hover img {
  transform: scale(1.07);
}
.gal-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 45%,
    rgba(9, 38, 88, 0.9) 100%
  );
  opacity: 0;
  transition: opacity 0.45s var(--e-io);
}
.gal-item:hover::after,
.gal-item:focus-visible::after {
  opacity: 1;
}
.gal-cap {
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.8rem;
  z-index: 2;
  color: var(--kertas);
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--e-io), transform 0.45s var(--e-out);
}
.gal-item:hover .gal-cap,
.gal-item:focus-visible .gal-cap {
  opacity: 1;
  transform: none;
}

/* ---------- LIGHTBOX ---------------------------------------------------- */
#lb {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: var(--pad);
  background: rgba(9, 38, 88, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--e-io), visibility 0.4s;
}
#lb.on {
  opacity: 1;
  visibility: visible;
}
#lb img {
  max-width: min(1000px, 92vw);
  max-height: 80vh;
  border-radius: 14px;
  object-fit: contain;
  box-shadow: var(--bayang-3);
}
#lb .cap {
  margin-top: 1rem;
  color: rgba(255, 253, 249, 0.8);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}
#lbx {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 253, 249, 0.3);
  color: var(--kertas);
  transition: background-color 0.3s;
}
#lbx:hover {
  background: var(--hinomaru);
  border-color: var(--hinomaru);
}

/* ---------- KAIWA ------------------------------------------------------- */
.kaiwa-grid {
  display: grid;
  gap: clamp(0.85rem, 1.8vw, 1.3rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.kaiwa {
  position: relative;
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: var(--r-card);
  padding: 1.5rem 1.3rem 1.3rem;
  overflow: hidden;
  transition: transform 0.5s var(--e-out), box-shadow 0.5s var(--e-out),
    border-color 0.4s var(--e-io);
}
.kaiwa:hover {
  transform: translateY(-5px);
  border-color: rgba(201, 159, 59, 0.5);
  box-shadow: var(--bayang-2);
}
.kaiwa::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--hinomaru);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--e-out);
}
.kaiwa:hover::before {
  transform: scaleX(1);
}
.kaiwa .kana {
  font-family: var(--jp);
  font-size: clamp(2rem, 4.4vw, 2.7rem);
  line-height: 1.05;
  color: var(--navy);
  margin-bottom: 0.35rem;
}
.kaiwa .romaji {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hinomaru);
  margin-bottom: 0.9rem;
}
.kaiwa .arti {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.kaiwa .contoh {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--teks-2);
  padding-top: 0.75rem;
  border-top: 1px solid var(--garis);
}
.kaiwa .contoh .jp {
  display: block;
  color: var(--navy);
  margin-bottom: 0.2rem;
}

/* ---------- TESTIMONI --------------------------------------------------- */
.testi-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.testi {
  position: relative;
  background: rgba(255, 253, 249, 0.055);
  border: 1px solid rgba(255, 253, 249, 0.14);
  border-radius: var(--r-card);
  padding: 2rem 1.5rem 1.5rem;
  transition: background-color 0.45s var(--e-io),
    border-color 0.45s var(--e-io), transform 0.5s var(--e-out);
}
.testi:hover {
  background: rgba(255, 253, 249, 0.09);
  border-color: rgba(255, 253, 249, 0.28);
  transform: translateY(-4px);
}
.testi::before {
  content: "\201C";
  position: absolute;
  top: 0.4rem;
  left: 1.1rem;
  font-family: var(--jp);
  font-size: 4rem;
  line-height: 1;
  color: var(--sakura);
  opacity: 0.4;
}
.testi blockquote {
  margin: 0 0 1.2rem;
  font-size: 0.97rem;
  line-height: 1.7;
  color: rgba(255, 253, 249, 0.9);
}
.testi figcaption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 253, 249, 0.14);
}
.testi-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--emas);
  color: var(--navy);
  font-family: var(--display);
  font-size: 1.05rem;
}
.testi figcaption b {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kertas);
}
.testi figcaption span {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 253, 249, 0.6);
}

/* ---------- FAQ --------------------------------------------------------- */
.faq {
  max-width: 820px;
  margin: 0 auto;
  border-top: 1px solid var(--garis);
}
.faq details {
  border-bottom: 1px solid var(--garis);
}
.faq summary {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.01rem;
  font-weight: 600;
  line-height: 1.45;
  transition: color 0.3s var(--e-io);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover {
  color: var(--hinomaru);
}
.faq summary .plus {
  margin-left: auto;
  flex: none;
  width: 26px;
  height: 26px;
  position: relative;
  border-radius: 50%;
  border: 1.5px solid var(--garis-kuat);
  transition: background-color 0.4s var(--e-io), border-color 0.4s var(--e-io),
    transform 0.45s var(--e-out);
}
.faq summary .plus::before,
.faq summary .plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1.8px;
  background: var(--navy);
  transform: translate(-50%, -50%);
  transition: transform 0.45s var(--e-out), background-color 0.3s;
}
.faq summary .plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq details[open] summary .plus {
  background: var(--emas);
  border-color: var(--emas);
  transform: rotate(135deg);
}
.faq details[open] summary .plus::before,
.faq details[open] summary .plus::after {
  background: var(--navy);
}
.faq .isi {
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--e-out);
}
.faq details[open] .isi {
  grid-template-rows: 1fr;
}
.faq .isi > div {
  overflow: hidden;
  padding-bottom: 1.3rem;
  padding-right: 2.6rem;
  color: var(--teks-2);
  font-size: 0.95rem;
  line-height: 1.7;
}
.faq .isi strong {
  color: var(--navy);
}

/* ---------- CTA PENUTUP ------------------------------------------------- */
.cta-tutup {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--kertas);
  z-index: 2;
}
.cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
.cta-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(9, 38, 88, 0.9),
    rgba(9, 38, 88, 0.8)
  );
}
.cta-in {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 740px;
  margin: 0 auto;
}
.cta-in .lead {
  color: rgba(255, 253, 249, 0.82);
  margin: 1.2rem auto 2rem;
}
.cta-tombol {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
}
@media (min-width: 560px) {
  .cta-tombol {
    flex-direction: row;
    justify-content: center;
  }
}
.cta-kanji {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--jp);
  font-size: clamp(9rem, 28vw, 22rem);
  color: rgba(255, 253, 249, 0.045);
  z-index: 1;
  pointer-events: none;
  line-height: 1;
}

/* ---------- FOOTER ------------------------------------------------------ */
footer {
  position: relative;
  z-index: 2;
  background: #061a3d;
  color: rgba(255, 253, 249, 0.8);
  padding: clamp(3rem, 6vw, 4.5rem) 0 0;
}
.f-grid {
  display: grid;
  gap: 2.2rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 880px) {
  .f-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  }
}
footer .brand-tx strong {
  color: var(--kertas);
}
footer .brand-tx span {
  /* Warna harus menang atas .brand-tx span (#5C6682) yang gagal 4,26:1
     di sini. 0.82 alpha di atas #0B1327 memberi ~11:1. */
  color: rgba(255, 253, 249, 0.82) !important;
}
.f-judul {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--sakura);
  margin-bottom: 1rem;
}
.f-list li {
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}
.f-list a {
  /* Target sentuh minimum 26px — tautan footer sering diketuk di ponsel. */
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0.18rem 0;
  transition: color 0.3s var(--e-io), padding-left 0.3s var(--e-out);
}
.f-list a:hover {
  color: var(--kertas);
  padding-left: 4px;
}
.f-kontak li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
  font-size: 0.9rem;
  line-height: 1.55;
}
.f-kontak svg {
  color: var(--sakura);
  margin-top: 4px;
}
.f-kontak a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-bottom: 1px solid rgba(255, 253, 249, 0.28);
  transition: color 0.3s var(--e-io), border-color 0.3s var(--e-io);
}
.f-kontak a:hover {
  color: var(--kertas);
  border-color: var(--kertas);
}
.f-bawah {
  border-top: 1px solid rgba(255, 253, 249, 0.1);
  padding: 1.3rem 0 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 253, 249, 0.68);
}
.f-bawah .kanan {
  margin-left: auto;
}

/* ---------- FAB WHATSAPP ------------------------------------------------ */
#fab {
  position: fixed;
  right: clamp(0.9rem, 2.4vw, 1.6rem);
  bottom: clamp(0.9rem, 2.4vw, 1.6rem);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 54px;
  padding: 0 1.15rem;
  border-radius: var(--r-pill);
  background: var(--wa);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  box-shadow: 0 8px 26px rgba(17, 130, 63, 0.42);
  opacity: 0;
  transform: translateY(16px) scale(0.92);
  visibility: hidden;
  transition: opacity 0.5s var(--e-out), transform 0.5s var(--e-out),
    visibility 0.5s, box-shadow 0.4s var(--e-io);
}
#fab.on {
  opacity: 1;
  transform: none;
  visibility: visible;
}
#fab:hover {
  box-shadow: 0 14px 36px rgba(17, 130, 63, 0.52);
  transform: translateY(-3px);
}
#fab svg {
  flex: none;
}
#fab span {
  display: none;
}
@media (min-width: 600px) {
  #fab span {
    display: inline;
  }
}
#fab::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: var(--r-pill);
  border: 2px solid var(--wa);
  opacity: 0;
}
html.motion-ok #fab.on::after {
  animation: denyut 2.6s var(--e-io) infinite;
}
@keyframes denyut {
  0% {
    opacity: 0.55;
    transform: scale(0.96);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.16);
  }
}

/* ---------- SKIP LINK --------------------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--navy);
  color: var(--kertas);
  padding: 0.85rem 1.3rem;
  border-radius: 0 0 10px 0;
  font-size: 0.88rem;
}
.skip:focus {
  left: 0;
}

/* ---------- REDUCED MOTION ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- PEMISAHAN KATA -----------------------------------------------
   Tiga masalah nyata yang terukur dan diperbaiki di sini:

   1. Teks Jepang. CSS memperlakukan tiap karakter kana/kanji sebagai titik
      putus baris yang sah, jadi `おめでとう！！` bisa terbelah jadi
      `おめでと` / `う！！`. Frasa Jepang pendek di situs ini selalu satu
      kesatuan makna, jadi diberi `nowrap`.
   2. Kata bertanda hubung (`setengah-setengah`, `check-up`) diputus di tanda
      hubungnya. Di judul dan label itu terlihat seperti salah tulis.
   3. Judul tanpa `text-wrap: balance` menyisakan satu kata sendirian
      (orphan) di baris terakhir.
   ------------------------------------------------------------------------ */

/* 1. Frasa Jepang pendek tidak boleh terbelah antar karakter */
.jp,
.alum-kanji,
.alum-omede,
.kaiwa .kana,
.kaiwa .romaji,
.hero-kanji,
.cta-kanji,
.tentang-foto .stempel b {
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
}
.alum-omede,
.alum-kanji,
.tentang-foto .stempel b {
  white-space: nowrap;
}
/* Caption galeri memuat frasa Jepang panjang: izinkan putus ANTAR frasa
   (spasi) tapi tidak di tengah frasa. */
.gal-cap {
  word-break: keep-all;
  line-break: strict;
}

/* 2. Kata bertanda hubung tetap utuh di teks pendek dan label */
.kaiwa .arti,
.kaiwa .contoh,
.alum-meta,
.hero-stat span,
.eyebrow,
.no-sec,
.chip,
.f-bawah,
.alur b,
.unggul b,
.hero-dok-cap {
  hyphens: none;
  overflow-wrap: break-word;
  word-break: normal;
}

/* 3. Judul dan paragraf pengantar: hindari kata tunggal di baris terakhir */
.mega,
.h1,
.h2,
.h3,
.alur b,
.unggul b,
.kartu-prog-tx b,
.alum-tx b {
  text-wrap: balance;
}
.lead,
.kecil,
.kaiwa .contoh,
.testi blockquote,
.faq .isi > div {
  text-wrap: pretty;
}

/* =========================================================================
   HERO — PAPAN REKLAME SATU LAYAR
   Acuan: fukutomischool.com (foto penuh + slogan besar).

   Empat kesalahan yang diperbaiki di sini, semuanya terukur lebih dulu:

   1. `max-width: 24ch` pada wadah berisi font display raksasa menghasilkan
      lebar 234px dari 1440px — seluruh teks hero terjepit dan judul jadi
      5 baris setinggi 500px. Satuan `ch` dihitung dari font ELEMEN ITU
      SENDIRI, bukan dari font anaknya. Sekarang lebar dibatasi dalam px.
   2. Tinggi hero 1748px pada viewport 900px (1,94x layar) membuat tombol
      CTA jatuh di y=1062 — jauh di bawah lipatan. Sekarang hero dipaksa
      `100svh` dengan grid 3 baris, dan carousel dokumentasi dikeluarkan
      dari hero menjadi section sendiri.
   3. Tirai navy 84% menyisakan rentang dinamis foto hanya 71 dari 255 —
      fotonya mati jadi bidang biru rata. Sekarang tirai tipis di tengah
      dan pekat hanya di tepi, tempat teks benar-benar berada.
   4. Jarak antar blok 14/21/29px untuk font 108px (rasio 0,13) membuat
      blok terlihat bertumpuk. Sekarang jarak diskalakan terhadap judul.
   ========================================================================= */

.hero {
  display: grid;
  grid-template-rows: 74px 1fr auto;
  min-height: 100svh;
  height: 100svh;
  max-height: 1020px;
  padding: 0;
  text-align: left;
  align-items: stretch;
}

/* ---- tirai: tipis di tengah, pekat hanya di tepi atas & bawah ---------- */
.hero-tirai {
  background:
    linear-gradient(
      180deg,
      rgba(6, 22, 52, 0.86) 0%,
      rgba(6, 22, 52, 0.24) 26%,
      rgba(6, 22, 52, 0.12) 52%,
      rgba(6, 22, 52, 0.58) 84%,
      rgba(6, 22, 52, 0.93) 100%
    ),
    linear-gradient(
      100deg,
      rgba(6, 22, 52, 0.82) 0%,
      rgba(6, 22, 52, 0.62) 34%,
      rgba(6, 22, 52, 0.12) 64%,
      rgba(6, 22, 52, 0) 82%
    );
}
.hero-grid {
  opacity: 0.08;
  background-size: 33.333% 100%, 100% 200px;
}

/* ---- kanji ornamen: di kanan, tidak menabrak kolom teks --------------- */
.hero-kanji {
  right: -0.05em;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: horizontal-tb;
  font-size: clamp(15rem, 40vw, 38rem);
  line-height: 0.72;
  color: rgba(227, 189, 94, 0.075);
}

/* ---- isi utama: terpusat vertikal, lebar sesungguhnya ----------------- */
.hero-in {
  /* display:contents menghapus elemen ini dari pembentuk tumpukan, sehingga
     z-index:4 miliknya ikut hilang dan .hero-tirai (z-index:1) menimpa teks.
     Karena itu z-index dipasang ulang pada anak-anaknya. */
  display: contents;
}
.hero-atas,
.hero-bawah {
  position: relative;
  z-index: 4;
}
.hero-atas {
  grid-row: 2;
  display: grid !important;
  grid-template-columns: 1fr;
  align-content: center;
  justify-items: start;
  gap: 0;
  width: 100%;
  max-width: var(--maks);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(1rem, 2vw, 1.8rem);
}
.hero-utama {
  /* Lebar dalam px, BUKAN ch — lihat catatan 1 di atas. */
  width: 100%;
  max-width: min(100%, 860px);
}

.hero .hero-chips {
  justify-content: flex-start;
  margin-bottom: clamp(1.1rem, 2.2vw, 1.7rem);
}

/* slogan Jepang kecil di atas judul (pola あなたの夢はここにあります) */
.hero-yume {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--jp);
  font-size: clamp(0.88rem, 1.5vw, 1.18rem);
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--emas-cerah);
  margin-bottom: clamp(0.85rem, 1.6vw, 1.3rem);
  text-shadow: 0 2px 18px rgba(6, 22, 52, 0.85);
}
.hero-yume::before {
  content: "";
  width: clamp(26px, 4vw, 54px);
  height: 2px;
  background: var(--emas);
  flex: none;
}

.hero h1 {
  font-size: clamp(2.5rem, 7.2vw, 5.8rem);
  line-height: 0.94;
  letter-spacing: 0.004em;
  margin-bottom: clamp(1rem, 0.2em, 2.1rem);
  text-shadow: 0 3px 30px rgba(6, 22, 52, 0.72);
  /* 17ch memaksa jeda di tengah frasa ("ubah masa / depan"). Dilebarkan
     supaya pemecahan baris jatuh di batas frasa yang wajar. */
  max-width: 21ch;
}
.hero h1 em.aksen {
  color: var(--emas-cerah);
}

.hero .lead {
  max-width: 50ch;
  margin: 0 0 clamp(1.5rem, 3vw, 2.3rem);
  font-size: clamp(0.99rem, 1.2vw, 1.09rem);
  line-height: 1.7;
  color: rgba(255, 254, 251, 0.89);
  text-shadow: 0 2px 16px rgba(6, 22, 52, 0.82);
}
.hero .hero-tombol {
  justify-content: flex-start;
}

/* ---- baris statistik: menempel di dasar layar ------------------------- */
.hero-bawah {
  grid-row: 3;
  background: rgba(6, 22, 52, 0.64);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(227, 189, 94, 0.28);
}
.hero-stat b {
  color: var(--emas-cerah);
}
.hero-stat > div {
  padding: clamp(0.85rem, 1.7vw, 1.3rem) 0.4rem;
}
.hero-dots {
  left: auto;
  right: var(--pad);
  bottom: calc(100% + 0.9rem);
}

/* =========================================================================
   STRIP DOKUMENTASI — section tersendiri, bukan lagi di dalam hero
   ========================================================================= */
.sec-dok {
  position: relative;
  z-index: 2;
  background: var(--navy);
  padding: clamp(2.6rem, 5vw, 4.2rem) 0;
  overflow: hidden;
}
.sec-dok .kepala {
  margin-bottom: clamp(1.4rem, 2.6vw, 2rem);
}
.sec-dok .h2 {
  color: var(--kertas);
}
.sec-dok .lead {
  color: rgba(255, 254, 251, 0.76);
}
.hero-dok {
  width: 100%;
  max-width: none;
  margin: 0;
  background: rgba(255, 254, 251, 0.05);
  border: 1px solid rgba(227, 189, 94, 0.22);
  box-shadow: var(--bayang-3);
}
.hero-dok-bingkai {
  aspect-ratio: 21 / 9;
}
.hero-dok-cap {
  text-align: left;
}

/* =========================================================================
   MOBILE
   ========================================================================= */
@media (max-width: 760px) {
  .hero {
    height: auto;
    min-height: 100svh;
    max-height: none;
    grid-template-rows: 74px 1fr auto;
  }
  .hero h1 {
    font-size: clamp(2.25rem, 10vw, 3.3rem);
    /* 15ch pada font 33,6px hanya 202px dari kolom 353px — menyisakan
       150px kosong di kanan. Di mobile judul memakai lebar penuh. */
    max-width: 100%;
  }
  .hero .lead {
    font-size: 0.97rem;
    line-height: 1.65;
  }
  .hero-atas {
    padding-bottom: 1.7rem;
  }
  .hero-kanji {
    font-size: 24rem;
  }
  .hero-dok-bingkai {
    aspect-ratio: 4 / 3;
  }
}
@media (max-width: 400px) {
  .hero h1 {
    font-size: 2.1rem;
  }
}