/* =========================================================================
   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 {
  /* Warna diturunkan dari logo: merah #F00018 diturunkan ke #D2232A supaya
     bisa dipakai di bidang besar tanpa menyala; biru-abu dari Gunung Fuji. */
  --washi: #f7f4ee;
  --washi-2: #efeae0;
  --washi-3: #e4ddd0;
  --kertas: #fffdf9;
  --navy: #101a33;
  --navy-2: #1b2745;
  --navy-3: #2b3a5e;
  --fuji: #4a6080;
  --hinomaru: #d2232a;
  --hinomaru-2: #b01b22;
  --hinomaru-soft: #f3e2e2;
  --sakura: #e8a0ac;
  --wa: #11823f;

  --teks: var(--navy);
  --teks-2: #46516b;
  --teks-3: #5c6682;
  --garis: rgba(16, 26, 51, 0.14);
  --garis-kuat: rgba(16, 26, 51, 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(16, 26, 51, 0.06),
    0 4px 14px rgba(16, 26, 51, 0.05);
  --bayang-2: 0 2px 6px rgba(16, 26, 51, 0.08),
    0 18px 44px rgba(16, 26, 51, 0.1);
  --bayang-3: 0 30px 70px rgba(16, 26, 51, 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 {
  background: var(--hinomaru);
  color: #fff;
  box-shadow: 0 2px 10px rgba(210, 35, 42, 0.26);
}
.btn-solid:hover {
  background: var(--hinomaru-2);
  box-shadow: 0 12px 30px rgba(210, 35, 42, 0.32);
}
.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);
  background: rgba(255, 253, 249, 0.14);
  border: 1px solid rgba(255, 253, 249, 0.3);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kertas);
  backdrop-filter: blur(6px);
}
.chip-merah {
  background: var(--hinomaru);
  border-color: var(--hinomaru);
}
.chip-putih {
  background: var(--hinomaru-soft);
  border-color: rgba(210, 35, 42, 0.3);
  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(--hinomaru), var(--sakura));
  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(10, 16, 33, 0.82) 0%,
    rgba(10, 16, 33, 0.52) 62%,
    rgba(10, 16, 33, 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(16, 26, 51, 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(16, 26, 51, 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(16, 26, 51, 0.82) 0%,
      rgba(16, 26, 51, 0.5) 32%,
      rgba(16, 26, 51, 0.72) 68%,
      rgba(16, 26, 51, 0.95) 100%
    ),
    linear-gradient(94deg, rgba(16, 26, 51, 0.9) 0%, rgba(16, 26, 51, 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(16, 26, 51, 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(--hinomaru);
  border-color: var(--hinomaru);
  transform: scale(1.08);
}

/* strip statistik bawah hero */
.hero-bawah {
  border-top: 1px solid rgba(255, 253, 249, 0.17);
  background: rgba(16, 26, 51, 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(--hinomaru);
  color: #fff;
  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: #101a33;
  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(16, 26, 51, 0) 38%,
    rgba(16, 26, 51, 0.92) 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(--hinomaru);
  border-color: var(--hinomaru);
  color: #fff;
  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(--hinomaru), var(--sakura));
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform 0.65s var(--e-out);
}
.alum-kartu:hover {
  transform: translateY(-6px);
  border-color: rgba(210, 35, 42, 0.38);
  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(--hinomaru);
  color: #fff;
  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(16, 26, 51, 0.22);
  transition: background-color 0.4s var(--e-io), transform 0.5s var(--e-out);
}
.alum-kartu:hover .alum-av {
  background: var(--hinomaru);
  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(16, 26, 51, 0.88) 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(16, 26, 51, 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(210, 35, 42, 0.4);
  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(--hinomaru);
  color: #fff;
  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(--hinomaru);
  border-color: var(--hinomaru);
  transform: rotate(135deg);
}
.faq details[open] summary .plus::before,
.faq details[open] summary .plus::after {
  background: #fff;
}
.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(16, 26, 51, 0.9),
    rgba(16, 26, 51, 0.78)
  );
}
.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: #0b1327;
  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;
}