/* =========================================================
   FONT · sama dengan app Google Project: Google Sans (judul + UI) + Roboto (teks badan)
   Keduanya SIL OFL 1.1 (src/fonts/LICENSE-*.txt), variable font subset latin, di-host sendiri.
   ========================================================= */
@font-face { font-family: "Google Sans"; src: url("/aset/fonts/GoogleSans-VF.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/aset/fonts/Roboto-VF.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

/* =========================================================
   TOKEN
   ========================================================= */
:root {
  --indigo: #30285E;
  --indigo-tua: #241D4A;
  --indigo-50: #F3F2F8;
  --indigo-100: #E4E2EF;
  --indigo-teks-lembut: #D9D6EA;
  --oranye: #F57F4F;
  --oranye-tinta: #BF420E;
  --oranye-judul: #F2581A;
  --indigo-tinta: #1B1538;    /* teks di atas bidang oranye, 6.63:1 */
  --amber: #E88B23;
  --amber-lembut: #EDB55E;   /* bunga gemuk; juga warna tombol utama, teks indigo 7.15:1 */
  --amber-lembut-hover: #E6A23A; /* hover tombol, teks indigo 6.03:1 */
  --mint: #63D9C0;
  --mint-50: #E8F9F5;
  --abu: #D6D3E0;            /* kelas Kelinci, teks indigo 8.96:1 */
  --putih: #FFFFFF;
  --teks: #2A2540;
  --teks-lembut: #565170;
  --garis-di-gelap: rgba(255, 255, 255, .16); /* pemisah tipis di latar indigo */

  /* SKALA TIPOGRAFI (rasio ~1,33). Semua ukuran teks wajib dari sini. */
  --fs-kecil: 14px;      /* label kaki, copyright */
  --fs-ui: 15px;         /* nav, tab, tautan kartu, tombol header */
  --fs-tombol: 16px;     /* tombol utama/sekunder */
  --fs-menu-hp: 19px;    /* item menu layar HP */
  --fs-badan: 17px;
  --fs-lead: clamp(17px, 1.4vw, 20px);
  --fs-sub-hero: clamp(17px, 1.4vw, 19px); /* subjudul hero, weight 400 */
  --fs-h3: clamp(20px, 1.8vw, 24px);
  --fs-h2: clamp(32px, 3.8vw, 52px);
  --fs-sorot: clamp(32px, 4.2vw, 56px);   /* slogan pita, judul penutup; selalu >= h2 */
  --fs-display: clamp(40px, min(5vw, 9vh), 72px); /* hanya h1 hero; ikut tinggi layar */
  --tinggi-kepala: 87px;
  --font-judul: "Google Sans", "Roboto", system-ui, sans-serif;  /* judul + UI (nav, tombol, tab, label) */
  --font-badan: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;  /* teks badan */

  --wadah: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(72px, 10vw, 128px);

  --garis: 3px;
  --radius-kartu: 20px;
  --radius-media: 16px;
  --radius-tombol: 16px;
  --stiker: 6px 6px 0 var(--indigo);
  --stiker-hover: 10px 10px 0 var(--indigo);

  --durasi-cepat: 160ms;
  --durasi: 240ms;
  --durasi-lambat: 700ms;
  --ease-keluar: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pegas: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =========================================================
   DASAR
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--putih); color: var(--teks); font: 400 var(--fs-badan)/1.65 var(--font-badan); overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-judul); font-weight: 500; color: var(--indigo); margin: 0; line-height: 1.1; letter-spacing: -0.015em; }
h1 em, h2 em, h3 em { font-style: normal; }
h2, h3 { font-weight: 600; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; }
.wadah { width: min(var(--wadah), 100% - 2 * var(--gutter)); margin-inline: auto; position: relative; z-index: 1; }
.section { padding-block: var(--section); position: relative; overflow: clip; }
.section--mint { background: var(--mint-50); }
.lead { font-size: var(--fs-badan); line-height: 1.7; color: var(--teks-lembut); max-width: 58ch; }
.kepala-section { display: grid; gap: 20px; margin-bottom: clamp(36px, 5vw, 60px); max-width: 760px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--oranye-tinta); outline-offset: 3px; border-radius: 8px; }
.ikon { width: 1em; height: 1em; flex-shrink: 0; }

/* =========================================================
   MOTIF (digambar ulang dari aset asli RD)
   ========================================================= */
.motif { position: absolute; z-index: 2; pointer-events: none; --uk: min(var(--w, 120px), var(--maks, 16vw)); width: var(--uk); }
.motif svg { display: block; width: 100%; height: 100%; overflow: visible; }
.motif { aspect-ratio: 1; }
.motif[data-m="dandelion-besar"] { aspect-ratio: 412 / 449; }
.motif[data-m="dandelion-sedang"] { aspect-ratio: 239 / 256; }
.motif[data-m="dandelion-kecil"] { aspect-ratio: 188 / 304; }
.motif[data-m="bunga-7"] { aspect-ratio: 423 / 414; }
.motif[data-m="bintang-medis"] { aspect-ratio: 135 / 134; }
.motif[data-m="bunga-gemuk"] { aspect-ratio: 372 / 377; }
.motif[data-m="bintang-tipis"] { aspect-ratio: 330 / 330; }
.motif[data-m="bintang-besar"] { aspect-ratio: 427 / 425; }
.m-indigo { color: var(--indigo); }
.m-oranye { color: var(--oranye); }
.m-mint { color: var(--mint); }
.m-amber { color: var(--amber-lembut); }
.m-putih { color: var(--putih); }
/* TIGA CARA PENEMPATAN (selain ini tidak boleh):
   1. tumbuh  : dandelion tumbuh dari tepi BAWAH section; hanya pangkal tangkai yang terpotong
   2. hias    : kelompok motif utuh di ruang kosong kanan judul section (desktop saja)
   3. stiker  : motif utuh menempel di sudut foto/video, di depan bingkai
   Motif selalu utuh (kecuali pangkal tangkai), tidak terpotong tepi atas, tidak menyeberang section, zona bebas teks dijaga. */
.tumbuh { bottom: calc(var(--pb, 0px) * -1 - var(--uk) * 0.08); }
.kepala-section { position: relative; max-width: none; }
.kepala-section > h2, .kepala-section > p { max-width: 760px; }
.hias { top: 50%; margin-top: calc(var(--uk) * -0.5); }
.stiker { z-index: 3; --o: min(calc(var(--uk) * .4), var(--o-maks, 48px)); }
.stiker[data-sudut~="atas"] { top: calc(var(--o) * -1); }
.stiker[data-sudut~="bawah"] { bottom: calc(var(--o) * -1); }
.stiker[data-sudut~="kiri"] { left: calc(var(--o) * -1); }
.stiker[data-sudut~="kanan"] { right: calc(var(--o) * -1); }
@media (max-width: 920px) {
  .stiker { --o-maks: 24px; }
  /* satu kolom: stiker hero pindah ke bawah agar jauh dari tombol di atas foto */
  .hero__media .stiker[data-sudut="atas kanan"] { top: auto; bottom: calc(var(--o) * -1); }
}
.berstiker { position: relative; }
.hero__media .stiker { --o-maks: 22px; } /* stiker hero tidak boleh melewati padding hero */
.cermin { transform: scaleX(-1); }
.pengajar__media { position: relative; }
@media (max-width: 1100px) { .hias, .desktop-saja { display: none; } }
@media (max-width: 640px) {
  .motif { --maks: 22vw; }
  .stiker { --o-maks: 10px; --maks: 15vw; }
  /* inline --maks per motif dikalahkan khusus di HP */
  .hero .tumbuh { --maks: 30vw !important; }
  .penutup .tumbuh { --maks: 15vw !important; }
  .motif.sembunyi-hp { display: none; }
}
/* gerak terus-menerus: halus, lambat, tidak mengganggu baca */
.ayun svg { transform-origin: 8% 96%; animation: ayun 6s ease-in-out infinite; }
.putar svg { animation: putar 60s linear infinite; }
.pantul svg { animation: pantul 3.6s var(--ease-pegas) infinite; }
.motif:nth-of-type(2n) svg { animation-delay: -1.8s; }
.motif:nth-of-type(3n) svg { animation-delay: -3.1s; }
@keyframes ayun { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
@keyframes putar { to { transform: rotate(360deg); } }
@keyframes pantul { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-8deg); } }
/* muncul saat section masuk layar */
.js .motif[data-reveal] { opacity: 0; scale: .3; rotate: -40deg; transition: opacity 500ms ease, scale 900ms var(--ease-pegas), rotate 900ms var(--ease-pegas); transition-delay: calc(var(--urutan, 0) * 120ms + 150ms); }
.js .motif[data-reveal].tampak { opacity: 1; scale: 1; rotate: 0deg; }

/* =========================================================
   TOMBOL (gaya stiker)
   ========================================================= */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: var(--radius-tombol);
  font: 500 var(--fs-tombol)/1 var(--font-judul); text-decoration: none; white-space: nowrap; cursor: pointer;
  background: var(--amber-lembut); color: var(--indigo); border: var(--garis) solid var(--indigo); box-shadow: 4px 4px 0 var(--indigo);
  transition: transform var(--durasi) var(--ease-keluar), box-shadow var(--durasi) var(--ease-keluar), background var(--durasi) ease;
}
.tombol .ikon { width: 20px; height: 20px; transition: transform var(--durasi) var(--ease-keluar); }
.tombol:hover { background: var(--amber-lembut-hover); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--indigo); }
.tombol:hover .ikon--panah { transform: translateX(4px); }
.tombol:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--indigo); transition-duration: 80ms; }
.tombol--putih { background: var(--putih); color: var(--indigo); }
.tombol--putih:hover { background: var(--mint); }
/* di latar indigo bayangan indigo tidak terlihat: warna bayangan saja yang diganti, gerakannya sama */
.di-gelap .tombol { box-shadow: 4px 4px 0 var(--oranye); border-color: var(--indigo-tua); }
.di-gelap .tombol:hover { box-shadow: 6px 6px 0 var(--oranye); }
.di-gelap .tombol:active { box-shadow: 0 0 0 var(--oranye); }

/* =========================================================
   KEPALA (sticky)
   ========================================================= */
.kepala { position: sticky; top: 0; z-index: 50; background: var(--putih); border-bottom: var(--garis) solid transparent; transition: border-color var(--durasi) ease; }
.kepala--gulir { border-bottom-color: var(--indigo); }
.kepala__isi { display: flex; align-items: center; gap: 24px; min-height: 84px; transition: min-height var(--durasi) var(--ease-keluar); }
.kepala--gulir .kepala__isi { min-height: 68px; }
.logo { display: block; flex-shrink: 0; border-radius: 6px; }
.logo img { height: 46px; width: auto; transition: height var(--durasi) var(--ease-keluar); }
.kepala--gulir .logo img { height: 40px; }
.nav { margin-left: auto; }
.nav > ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav a, .nav button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px;
  font: 500 var(--fs-ui)/1 var(--font-judul); color: var(--indigo); text-decoration: none;
  background: none; border: 0; border-radius: 12px; cursor: pointer;
  transition: background var(--durasi-cepat) ease, box-shadow var(--durasi-cepat) ease;
}
.nav > ul > li > :is(a, button):hover { background: var(--mint); }
.nav [aria-current="page"], .nav [aria-current="page"]:hover { background: var(--indigo); color: var(--putih); }
.nav button .ikon { width: 16px; height: 16px; transition: transform var(--durasi) var(--ease-keluar); }
.nav button[aria-expanded="true"] .ikon { transform: rotate(180deg); }
.nav__grup { position: relative; }
.nav__sub {
  position: absolute; top: calc(100% + 12px); left: 0; min-width: 280px; list-style: none; margin: 0; padding: 8px;
  background: var(--putih); border-radius: 16px; box-shadow: 0 0 0 var(--garis) var(--indigo), 6px 6px 0 var(--garis) var(--indigo);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--durasi) ease, transform var(--durasi) var(--ease-pegas), visibility 0s linear var(--durasi);
}
.nav__sub.buka { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__sub a { display: flex; width: 100%; min-height: 44px; font-weight: 500; }
.nav__sub a:hover { background: var(--mint-50); }
.nav__sub li:last-child { border-top: 2px solid var(--indigo-100); margin-top: 6px; padding-top: 6px; }
.kepala__cta { min-height: 46px; padding: 0 20px; font-size: var(--fs-ui); }
.burger { display: none; margin-left: auto; width: 48px; height: 48px; border-radius: 14px; border: var(--garis) solid var(--indigo); background: var(--indigo); color: var(--putih); cursor: pointer; align-items: center; justify-content: center; box-shadow: 3px 3px 0 var(--amber-lembut); }
.burger .ikon { width: 24px; height: 24px; }
.nav__cta-mobile { display: none !important; }

@media (max-width: 1080px) {
  .kepala__cta { display: none; }
  /* dengan JS: tombol menu membuka panel penuh layar */
  .js .burger { display: inline-flex; }
  .js .nav {
    position: fixed; inset: 68px 0 0 0; background: var(--putih); border-top: var(--garis) solid var(--indigo); padding: 16px var(--gutter) 40px; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--durasi) ease, transform var(--durasi) var(--ease-keluar), visibility 0s linear var(--durasi);
  }
  .js .nav.buka { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .js .nav > ul { flex-direction: column; align-items: stretch; gap: 4px; }
  .js .nav > ul > li > :is(a, button) { width: 100%; justify-content: space-between; min-height: 56px; font-size: var(--fs-menu-hp); padding: 0 16px; }
  .nav__sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; padding: 0 0 8px 12px; background: transparent; }
  .nav__sub.buka { display: block; }
  .js .nav__cta-mobile { display: flex !important; margin-top: 20px; }
  .nav__cta-mobile .tombol { width: 100%; }
  /* tanpa JS: menu tampil sebagai deretan tautan di bawah logo */
  html:not(.js) .kepala { position: static; }
  html:not(.js) .kepala__isi { flex-wrap: wrap; padding-block: 12px; }
  html:not(.js) .nav { margin-left: 0; width: 100%; }
  html:not(.js) .nav > ul { flex-wrap: wrap; gap: 4px; }
  html:not(.js) .nav__grup { display: contents; }
  html:not(.js) .nav__grup > button { display: none; }
  html:not(.js) .nav__sub { display: contents; }
  html:not(.js) .nav__sub li:last-child { border: 0; margin: 0; padding: 0; }
}
/* tanpa JS (desktop): submenu terbuka saat disentuh mouse atau difokus keyboard */
html:not(.js) .nav__grup:is(:hover, :focus-within) .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  /* muat satu layar: tinggi layar - header - 36px (pita mint mengintip di bawah sebagai ajakan gulir) */
  --pad: clamp(28px, 6vh, 72px);
  min-height: calc(100svh - var(--tinggi-kepala) - 36px); display: flex; align-items: center;
  position: relative; overflow: clip; background: var(--indigo); color: var(--putih); padding-block: var(--pad);
}
.hero__isi { display: grid; grid-template-columns: 11fr 9fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero h1 { color: var(--putih); font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.02em; font-weight: 500; }
.hero h1 .baris-2 { display: block; color: var(--amber); white-space: nowrap; }
.hero__sub { margin-top: clamp(16px, 2.6vh, 24px); font-size: var(--fs-sub-hero); font-weight: 400; line-height: 1.65; color: var(--indigo-teks-lembut); max-width: 42ch; }
.hero__aksi { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(20px, 4vh, 36px); }
.hero__media { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--tinggi-kepala) - 36px - 2 * var(--pad) - 16px); justify-self: end; width: 100%; }
.hero__media figure { margin: 0; overflow: hidden; border-radius: var(--radius-media); border: var(--garis) solid var(--putih); box-shadow: 8px 8px 0 var(--oranye); position: relative; z-index: 1; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media .f1 { grid-row: 1 / 3; }
.hero__media .f2 { transform: rotate(3deg); box-shadow: 8px 8px 0 var(--mint); }
.hero__media .f3 { transform: rotate(-2deg); box-shadow: 8px 8px 0 var(--amber); }
/* Masuk hero: foto "ditempel" satu per satu seperti stiker, lalu stiker motif. Sekali saat halaman dibuka.
   Mulai setelah gambar siap didekode (maks 1,5 dtk), bukan langsung jadi. Pakai properti translate/scale/rotate
   supaya tidak menimpa transform rotasi miring foto. */
.js .hero__media figure, .js .hero__media .stiker { opacity: 0; }
.hero__media.siap figure { animation: tempel 780ms var(--ease-pegas) both; animation-delay: calc(250ms + var(--i) * 150ms); }
.hero__media.siap .stiker { animation: tempel-stiker 640ms var(--ease-pegas) both; animation-delay: calc(820ms + var(--i) * 160ms); }
@keyframes tempel { from { opacity: 0; translate: 0 28px; scale: .9; rotate: -5deg; } 55% { opacity: 1; } to { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; } }
@keyframes tempel-stiker { from { opacity: 0; scale: .2; rotate: -90deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }

/* =========================================================
   PITA SLOGAN
   ========================================================= */
.pita { --pb: clamp(48px, 7vw, 88px); background: var(--mint); color: var(--indigo); padding-block: var(--pb); position: relative; overflow: clip; border-block: var(--garis) solid var(--indigo); }
.pita p .baris { display: block; }
.pita p { font: 500 var(--fs-sorot)/1.15 var(--font-judul); letter-spacing: -0.02em; text-align: center; max-width: none; margin-inline: auto; position: relative; z-index: 1; }

/* =========================================================
   VIDEO (facade)
   ========================================================= */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-media); overflow: hidden; background: var(--indigo); border: var(--garis) solid var(--indigo); box-shadow: var(--stiker); }
.video button { all: unset; position: absolute; inset: 0; cursor: pointer; display: grid; place-items: center; }
.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--durasi-lambat) var(--ease-keluar), filter var(--durasi) ease; }
.video__main { position: relative; z-index: 1; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: var(--amber-lembut); color: var(--indigo); border: var(--garis) solid var(--indigo); box-shadow: 4px 4px 0 var(--indigo); transition: transform var(--durasi) var(--ease-pegas), background var(--durasi) ease; }
.video__main .ikon { width: 32px; height: 32px; margin-left: 4px; }
.video button:hover img { transform: scale(1.04); filter: brightness(.88); }
.video button:hover .video__main { transform: scale(1.1); background: var(--amber-lembut-hover); }
.video button:focus-visible { outline: 4px solid var(--amber); outline-offset: -8px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kenalan { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.kenalan h2 { font-size: var(--fs-sorot); }
.kenalan h2 em { color: var(--oranye-judul); }

/* =========================================================
   KARTU
   ========================================================= */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 36px); }
.kartu { background: var(--putih); border-radius: var(--radius-kartu); overflow: hidden; border: var(--garis) solid var(--indigo); box-shadow: var(--stiker); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform var(--durasi) var(--ease-keluar), box-shadow var(--durasi) var(--ease-keluar); }
.kartu__media { overflow: hidden; aspect-ratio: 16 / 10; border-bottom: var(--garis) solid var(--indigo); }
.kartu__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--durasi-lambat) var(--ease-keluar); }
.kartu__isi { padding: clamp(22px, 2.4vw, 32px); display: grid; gap: 10px; align-content: start; }
.kartu__isi p { color: var(--teks-lembut); }
a.kartu:hover { transform: translate(-4px, -4px) rotate(-0.6deg); box-shadow: var(--stiker-hover); }
a.kartu:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--indigo); transition-duration: 80ms; }
a.kartu:hover .kartu__media img, .kartu--statis:hover .kartu__media img { transform: scale(1.05); }

/* ---------- Kurikulum: tab ---------- */
.tab-daftar { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; margin-bottom: 30px; background: var(--putih); border: var(--garis) solid var(--indigo); border-radius: 18px; }
.tab-daftar button { min-height: 46px; padding: 0 20px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; font: 500 var(--fs-ui)/1 var(--font-judul); color: var(--indigo); transition: background var(--durasi) var(--ease-keluar); }
.tab-daftar button:hover { background: var(--mint-50); }
.tab-daftar button[aria-selected="true"] { background: var(--indigo); color: var(--putih); }
.tab-panel { background: var(--putih); border-radius: var(--radius-kartu); padding: clamp(12px, 2vw, 24px); border: var(--garis) solid var(--indigo); box-shadow: var(--stiker); }
.tab-panel[hidden] { display: none; }
/* tanpa JS: tab tidak bisa dipakai, jadi semua infografis tampil berurutan */
html:not(.js) .tab-daftar { display: none; }
html:not(.js) .tab-panel[hidden] { display: block; margin-top: 24px; }
.tab-panel img { margin-inline: auto; max-height: 620px; width: auto; animation: muncul var(--durasi-lambat) var(--ease-keluar); }
@keyframes muncul { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* ---------- Pengajar ---------- */
.pengajar { display: grid; gap: clamp(56px, 8vw, 104px); }
.pengajar__baris { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.pengajar__baris:nth-child(2) { grid-template-columns: 1.25fr 0.75fr; }
.pengajar__baris:nth-child(2) .pengajar__teks { order: 2; }
.pengajar__teks { display: grid; gap: 16px; }
.pengajar__media { background: var(--putih); border-radius: var(--radius-kartu); padding: clamp(10px, 1.5vw, 20px); border: var(--garis) solid var(--indigo); box-shadow: var(--stiker); }

/* ---------- Program ---------- */
.grid-program { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(20px, 2.6vw, 32px); }
.grid-program .kartu { grid-column: span 2; }
.grid-program .kartu:nth-child(-n+2) { grid-column: span 3; }
.kartu__tautan { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--fs-ui)/1 var(--font-judul); color: var(--oranye-tinta); margin-top: 6px; }
.kartu__tautan .ikon { width: 18px; height: 18px; transition: transform var(--durasi) var(--ease-keluar); }
a.kartu:hover .kartu__tautan .ikon { transform: translateX(5px); }
.kartu__media--motif { display: grid; place-items: center; background: var(--mint); position: relative; }
.kartu__media--motif .motif { position: static; width: 34%; }

/* ---------- Tur virtual ---------- */
.tur { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.tur__teks { display: grid; gap: 18px; }
.tur__teks a:not(.tombol) { color: var(--oranye-tinta); font-weight: 400; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.tur__teks a:not(.tombol):hover { text-decoration-thickness: 4px; }

/* ---------- Penutup ---------- */
.penutup { --pb: clamp(110px, 12vw, 160px); background: var(--oranye); text-align: center; padding-block: clamp(80px, 11vw, 150px) var(--pb); position: relative; overflow: clip; border-top: var(--garis) solid var(--indigo); }
.penutup h2 .baris { display: block; }
.penutup h2 { font-size: var(--fs-sorot); max-width: none; margin-inline: auto; color: var(--indigo-tinta); }
.penutup h2 em { color: inherit; } /* di bidang oranye tidak ada warna aksen yang lolos kontras: satu warna saja */

/* =========================================================
   KAKI
   ========================================================= */
.kaki { background: var(--indigo); color: var(--indigo-teks-lembut); padding-block: clamp(64px, 8vw, 96px) 32px; position: relative; overflow: clip; border-top: var(--garis) solid var(--indigo-tua); }
.kaki__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.kaki__logo { background: var(--putih); border-radius: 18px; padding: 18px 22px; display: inline-block; border: var(--garis) solid var(--putih); box-shadow: 6px 6px 0 var(--amber); }
.kaki__logo img { height: 54px; width: auto; }
.kaki h3 { color: var(--putih); font: 500 var(--fs-kecil)/1.3 var(--font-judul); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; }
.kaki ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kaki ul a { display: inline-flex; min-height: 36px; align-items: center; text-decoration: none; color: var(--indigo-teks-lembut); transition: color var(--durasi-cepat) ease, transform var(--durasi) var(--ease-keluar); }
.kaki ul a:hover { color: var(--amber); transform: translateX(4px); }
.sosial { display: flex; gap: 12px; }
.sosial a { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--putih); color: var(--indigo); border: var(--garis) solid var(--putih); box-shadow: 4px 4px 0 var(--mint); transition: transform var(--durasi) var(--ease-pegas), box-shadow var(--durasi) ease, background var(--durasi) ease; }
.sosial a:hover { background: var(--amber); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--mint); }
.sosial .ikon { width: 22px; height: 22px; }
.kaki__bawah { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--garis-di-gelap); font-size: var(--fs-kecil); }
.kaki :focus-visible { outline-color: var(--amber); }

/* =========================================================
   GERAK GULIR (reveal konten)
   ========================================================= */
/* reveal memakai properti translate/scale (bukan transform) supaya tidak bentrok dengan efek hover;
   atribut data-reveal dilepas JS setelah animasi selesai agar transisi hover kembali normal */
.js [data-reveal]:not(.motif) { opacity: 0; translate: 0 32px; scale: .97; transition: opacity var(--durasi-lambat) var(--ease-keluar), translate var(--durasi-lambat) var(--ease-pegas), scale var(--durasi-lambat) var(--ease-pegas); transition-delay: calc(var(--urutan, 0) * 90ms); }
.js [data-reveal]:not(.motif).tampak { opacity: 1; translate: 0 0; scale: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .js .hero__media figure, .js .hero__media .stiker { opacity: 1 !important; }
}

/* =========================================================
   RESPONSIF
   ========================================================= */
@media (max-width: 920px) {
  .hero__isi, .kenalan, .tur, .pengajar__baris, .pengajar__baris:nth-child(2), .kaki__grid { grid-template-columns: 1fr; }
  .pengajar__baris:nth-child(2) .pengajar__teks { order: 0; }
  .hero { min-height: 0; padding-block: 48px 64px; }
  .hero__media { aspect-ratio: 4 / 3; max-height: none; }
  .hero h1 .baris-2 { white-space: normal; }
  .grid-program .kartu, .grid-program .kartu:nth-child(-n+2) { grid-column: span 3; }
}
@media (max-width: 640px) {
  :root { --fs-badan: 16px; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-program .kartu, .grid-program .kartu:nth-child(-n+2) { grid-column: 1 / -1; }
  .hero__aksi .tombol { width: 100%; }
  .tab-daftar { display: flex; }
  .tab-daftar button { flex: 1 1 auto; }
  .logo img { height: 40px; }
  .motif.sembunyi-hp { display: none; }
}

/* Cadangan bila JS gagal di tengah jalan (kelas .js terpasang tapi .js-ok tidak): isi tetap tampil setelah 3 dtk */
@keyframes jaga-tampil { to { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; } }
.js:not(.js-ok) [data-reveal], .js:not(.js-ok) .hero__media figure, .js:not(.js-ok) .hero__media .stiker { animation: jaga-tampil 1ms 3s forwards; }

/* =========================================================
   HALAMAN DALAM (design system §5.8-§5.14). Hanya token; tanpa warna/ukuran literal.
   ========================================================= */
.kepala-halaman { --pb: clamp(56px, 7vw, 96px); position: relative; overflow: clip; background: var(--indigo); color: var(--indigo-teks-lembut); padding-block: clamp(48px, 7vw, 88px) var(--pb); }
.kepala-halaman h1 { color: var(--putih); font-size: var(--fs-sorot); max-width: 20ch; }
.kepala-halaman__pembuka { margin-top: 16px; font-size: var(--fs-sub-hero); max-width: 60ch; }
.kepala-halaman .wadah { position: relative; }

.tengah { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 32px); }
.kartu__media--persegi { aspect-ratio: 1 / 1; }

/* Mosaik foto */
.mosaik { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(120px, 14vw, 190px); gap: 16px; }
.mosaik__item { margin: 0; border-radius: var(--radius-media); border: var(--garis) solid var(--indigo); overflow: hidden; }
.mosaik__item img { width: 100%; height: 100%; object-fit: cover; }
.mosaik__item--1 { grid-column: span 2; grid-row: span 2; }
.mosaik__item--2 { grid-column: span 4; grid-row: span 2; }
.mosaik__item--3, .mosaik__item--4, .mosaik__item--5, .mosaik__item--6 { grid-column: span 3; grid-row: span 2; }
/* satu gambar saja (mis. infografis): tampil utuh, tidak dipotong */
.mosaik:has(> :only-child) { grid-template-columns: 1fr; grid-auto-rows: auto; max-width: 960px; margin-inline: auto; }
.mosaik:has(> :only-child) .mosaik__item { grid-column: auto; grid-row: auto; box-shadow: var(--stiker); background: var(--putih); }
.mosaik:has(> :only-child) .mosaik__item img { height: auto; object-fit: contain; }

/* Poster + teks (Holiday Program) */
.poster-daftar { display: grid; gap: clamp(40px, 6vw, 72px); }
.poster-baris { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.poster-baris__media { display: grid; gap: 16px; }
.poster-baris__media--2 { grid-template-columns: 1fr 1fr; }
.poster { margin: 0; border-radius: var(--radius-media); border: var(--garis) solid var(--indigo); box-shadow: var(--stiker); overflow: hidden; }
.poster img { width: 100%; height: auto; }
.poster-baris__teks { display: grid; gap: 16px; align-content: start; }
.poster-baris__teks p { color: var(--teks-lembut); }
.poster-baris__teks a:not(.tombol), .kontak a:not(.tombol), .teks-media a:not(.tombol), .form__alternatif a { color: var(--oranye-tinta); text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* Chip mata pelajaran */
.chip-daftar { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; }
.chip-daftar li { padding: 12px 22px; border-radius: 999px; border: var(--garis) solid var(--indigo); background: var(--putih); font: 500 var(--fs-tombol)/1 var(--font-judul); color: var(--indigo); box-shadow: 3px 3px 0 var(--indigo); }

/* Ikon kegiatan */
.ikon-kegiatan { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); list-style: none; margin: 0; padding: 0; text-align: center; }
.ikon-kegiatan__item { display: grid; justify-items: center; gap: 10px; }
.ikon-kegiatan__ikon { width: clamp(80px, 8vw, 108px); height: auto; }  /* sumber asli 108px */
.ikon-kegiatan__label { font: 500 var(--fs-h3)/1.25 var(--font-judul); color: var(--indigo); }
.ikon-kegiatan__ket { color: var(--teks-lembut); font-size: var(--fs-ui); }

/* Formulir */
.form { display: grid; gap: 20px; max-width: 760px; margin-inline: auto; }
.form--poster { grid-template-columns: 5fr 7fr; max-width: none; align-items: start; }
.form__bingkai { border-radius: var(--radius-kartu); border: var(--garis) solid var(--indigo); box-shadow: var(--stiker); overflow: hidden; background: var(--putih); }
.form__bingkai iframe { display: block; width: 100%; height: min(1400px, 160vh); border: 0; }
.form__alternatif { font-size: var(--fs-ui); }
.form--poster .form__alternatif { grid-column: 2; }

/* Kontak + peta */
.kontak { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.kontak__teks { display: grid; gap: 12px; }
.kontak__teks h2 { font-size: var(--fs-h3); }
.kontak__daftar { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.kontak__peta iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: var(--garis) solid var(--indigo); border-radius: var(--radius-media); box-shadow: var(--stiker); }

/* Teks + media */
.teks-media { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.teks-media--balik .teks-media__media { order: 2; }
.teks-media__media { position: relative; }
.teks-media__media img { width: 100%; height: auto; border-radius: var(--radius-media); border: var(--garis) solid var(--indigo); box-shadow: var(--stiker); }
.teks-media__teks { display: grid; gap: 16px; }

/* Still cooking */
.still-cooking { position: relative; overflow: clip; background: var(--mint-50); min-height: calc(100svh - var(--tinggi-kepala)); display: flex; align-items: center; padding-block: var(--section); }
.still-cooking__isi { position: relative; text-align: center; display: grid; justify-items: center; gap: 16px; }
.still-cooking__label { font: 500 var(--fs-kecil)/1 var(--font-judul); letter-spacing: .14em; text-transform: uppercase; color: var(--oranye-tinta); }
.still-cooking h1 { font-size: var(--fs-sorot); max-width: 18ch; }
.still-cooking__teks { color: var(--teks-lembut); max-width: 46ch; }
.still-cooking__aksi { justify-content: center; }

@media (max-width: 920px) {
  .grid-3, .poster-baris, .form--poster, .kontak, .teks-media { grid-template-columns: 1fr; }
  .teks-media--balik .teks-media__media { order: 0; }
  .form--poster .form__alternatif { grid-column: 1; }
  .mosaik { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
  .mosaik__item--1, .mosaik__item--2 { grid-column: span 2; grid-row: span 2; }
  .mosaik__item--3, .mosaik__item--4, .mosaik__item--5, .mosaik__item--6 { grid-column: span 1; grid-row: span 1; }
}
@media (max-width: 640px) {
  .ikon-kegiatan { grid-template-columns: 1fr; }
  .form__bingkai iframe { height: 1600px; }
}

.ikon--teks { width: 1.1em; height: 1.1em; vertical-align: -0.18em; color: var(--indigo); }

/* =========================================================
   REVISI 2 (design system v1.2)
   ========================================================= */
/* Warna kelas (dipakai tabel, jadwal, tema). Semua pasangan lolos WCAG AA. */
.warna-mint { background: var(--mint); color: var(--indigo); }
.warna-amber { background: var(--amber-lembut); color: var(--indigo); }
.warna-oranye { background: var(--oranye); color: var(--indigo-tinta); }
.warna-indigo { background: var(--indigo); color: var(--putih); }
.warna-indigo-tua { background: var(--indigo-tua); color: var(--putih); }
.warna-abu { background: var(--abu); color: var(--indigo); }

/* Kepala halaman: label + varian berfoto */
.kepala-halaman__label { font: 500 var(--fs-kecil)/1 var(--font-judul); letter-spacing: .14em; text-transform: uppercase; color: var(--amber-lembut); margin-bottom: 14px; }
.kepala-halaman__teks { position: relative; z-index: 1; max-width: 760px; }
.kepala-halaman--foto { --pb: clamp(48px, 7vw, 88px); }
.kepala-halaman__isi { display: grid; grid-template-columns: 11fr 9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.kepala-halaman__foto { position: relative; margin: 0; }
.kepala-halaman__foto img { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radius-media); border: var(--garis) solid var(--putih); box-shadow: 8px 8px 0 var(--oranye); }
.kepala-halaman__foto .stiker { --o-maks: 22px; }

/* Galeri akordeon (pola Material 3 carousel) */
.akordeon-bungkus { position: relative; }
.akordeon { display: flex; gap: 12px; height: clamp(300px, 38vw, 460px); }
.akordeon__panel { position: relative; flex: 1 1 0; min-width: 0; margin: 0; overflow: hidden; cursor: pointer; background: var(--indigo); border-radius: var(--radius-media); border: var(--garis) solid var(--indigo); transition: flex-grow 650ms var(--ease-keluar), box-shadow var(--durasi) ease; }
.akordeon__panel img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--durasi-lambat) var(--ease-keluar); }
.akordeon__panel.aktif, .akordeon__panel:hover, .akordeon__panel:focus-visible { flex-grow: 5; box-shadow: var(--stiker); }
.akordeon:has(.akordeon__panel:hover) .akordeon__panel.aktif:not(:hover) { flex-grow: 1; box-shadow: none; }
.akordeon__panel:hover img { scale: 1.04; }
.akordeon__panel:focus-visible { outline: 3px solid var(--oranye-tinta); outline-offset: 3px; }
.akordeon__panel figcaption { position: absolute; left: 14px; bottom: 14px; padding: 8px 14px; border-radius: 999px; background: var(--putih); color: var(--indigo); font: 500 var(--fs-ui)/1.2 var(--font-judul); white-space: nowrap; opacity: 0; translate: 0 8px; transition: opacity var(--durasi) ease, translate var(--durasi) var(--ease-keluar); }
.akordeon__panel.aktif figcaption, .akordeon__panel:hover figcaption, .akordeon__panel:focus-visible figcaption { opacity: 1; translate: 0 0; transition-delay: 200ms; }
.akordeon:has(.akordeon__panel:hover) .akordeon__panel.aktif:not(:hover) figcaption { opacity: 0; }

/* Logo rekanan berjalan (pola website GK) */
.logo-jalan { overflow: hidden; padding-block: 8px 24px; -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); }
.logo-jalan__trek { display: flex; width: max-content; animation: logo-jalan 50s linear infinite; }
.logo-jalan:hover .logo-jalan__trek, .logo-jalan:focus-within .logo-jalan__trek { animation-play-state: paused; }
.logo-jalan__daftar { display: flex; gap: 20px; padding: 0 20px 0 0; margin: 0; list-style: none; }
.logo-jalan__kotak { width: clamp(118px, 12vw, 156px); aspect-ratio: 1; display: grid; place-items: center; background: var(--putih); border: var(--garis) solid var(--indigo); border-radius: var(--radius-kartu); box-shadow: 4px 4px 0 var(--indigo); transition: filter var(--durasi-lambat) ease, opacity var(--durasi-lambat) ease, transform var(--durasi) var(--ease-keluar), box-shadow var(--durasi) var(--ease-keluar); }
.logo-jalan__kotak img { width: 74%; height: 74%; object-fit: contain; }
.logo-jalan__trek:has(.logo-jalan__kotak:hover) .logo-jalan__kotak:not(:hover) { filter: blur(2px); opacity: .5; }
.logo-jalan__kotak:hover { transform: translate(-3px, -3px) scale(1.04); box-shadow: 7px 7px 0 var(--indigo); }
@keyframes logo-jalan { to { transform: translateX(-50%); } }

/* Kurikulum (tab berisi HTML) */
.tab-panel--konten { padding: clamp(24px, 4vw, 48px); }
.kurikulum__judul { font-size: var(--fs-h3); }
.kurikulum__ket { margin-top: 8px; color: var(--teks-lembut); max-width: 62ch; }
.aspek { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.aspek__item { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 20px 12px; border-radius: var(--radius-kartu); background: var(--indigo-50); }
.aspek__ikon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; border: var(--garis) solid var(--indigo); }
.aspek__ikon .ikon { width: 32px; height: 32px; }
.aspek__label { font: 500 var(--fs-tombol)/1.3 var(--font-judul); color: var(--indigo); }
.aspek__item--0 .aspek__ikon { background: var(--indigo); color: var(--putih); }
.aspek__item--1 .aspek__ikon { background: var(--oranye); color: var(--indigo-tinta); }
.aspek__item--2 .aspek__ikon { background: var(--mint); color: var(--indigo); }
.aspek__item--3 .aspek__ikon { background: var(--amber-lembut); color: var(--indigo); }
.aspek__item--4 .aspek__ikon { background: var(--indigo-tua); color: var(--putih); }
.aspek--siklus .aspek__item { border: var(--garis) solid var(--indigo); background: var(--putih); }
.aspek--kecil { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; }
.aspek--kecil .aspek__item { grid-template-columns: auto auto; align-items: center; padding: 8px 18px 8px 8px; border-radius: 999px; gap: 10px; }
.aspek--kecil .aspek__ikon { width: 44px; height: 44px; border-width: 2px; }
.aspek--kecil .aspek__ikon .ikon { width: 22px; height: 22px; }
.piramida { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.piramida__lv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: center; }
.piramida__label { justify-self: center; width: var(--lebar); min-height: 64px; display: grid; place-items: center; padding: 10px 24px; text-align: center; font: 500 var(--fs-ui)/1.3 var(--font-judul); letter-spacing: .04em; clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%); border-radius: 12px; }
.piramida__lv:nth-child(1) .piramida__label { background: var(--oranye); color: var(--indigo-tinta); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); padding-inline: 18%; }
.piramida__lv:nth-child(2) .piramida__label { background: var(--mint); color: var(--indigo); }
.piramida__lv:nth-child(3) .piramida__label { background: var(--indigo); color: var(--putih); }
.piramida__lv:nth-child(4) .piramida__label { background: var(--oranye); color: var(--indigo-tinta); }
.piramida__lv p { color: var(--teks-lembut); }

/* Tabel program kelas */
.tabel-kelas { background: var(--putih); border: var(--garis) solid var(--indigo); border-radius: var(--radius-kartu); box-shadow: var(--stiker); padding: clamp(16px, 2.4vw, 28px); }
.tabel-kelas__gulir { overflow-x: auto; }
.tabel-kelas__gulir:focus-visible, .jadwal__gulir:focus-visible { outline: 3px solid var(--oranye-tinta); outline-offset: 4px; }
.tabel-kelas table { width: 100%; min-width: 860px; table-layout: fixed; border-collapse: separate; border-spacing: 6px; }
.tabel-kelas__sudut { width: 170px; }
.tabel-kelas thead th { vertical-align: bottom; padding: 0 0 6px; }
.tabel-kelas__nama { display: grid; padding: 8px 6px; border-radius: 12px; font: 500 var(--fs-ui)/1.2 var(--font-judul); }
.tabel-kelas__nama small, .jadwal__kelas small, .tema__kelas small { font: 400 var(--fs-kecil)/1.3 var(--font-badan); }
.tabel-kelas tbody th { position: sticky; left: 0; z-index: 1; width: 170px; padding: 12px; border-radius: 12px; background: var(--indigo); color: var(--putih); font: 500 var(--fs-ui)/1.3 var(--font-judul); text-align: left; }
.tabel-kelas tbody td { padding: 14px 10px; border-radius: 12px; background: var(--indigo-50); color: var(--indigo); text-align: center; font-size: var(--fs-ui); }
.stimulasi { margin-top: 24px; text-align: center; }
.stimulasi h3 { font-size: var(--fs-tombol); }

/* Pendaftaran + tema + jadwal */
.pendaftaran { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.pendaftaran__teks { display: grid; gap: 16px; }
.pendaftaran__info { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pendaftaran__info li { padding: 8px 14px; border-radius: 999px; border: 2px solid var(--indigo); background: var(--putih); font: 500 var(--fs-kecil)/1.2 var(--font-judul); color: var(--indigo); }
.pendaftaran__foto { position: relative; margin: 0; }
.pendaftaran__foto img { width: 100%; border-radius: var(--radius-media); border: var(--garis) solid var(--indigo); box-shadow: var(--stiker); }
.tema { background: var(--putih); border: var(--garis) solid var(--indigo); border-radius: var(--radius-kartu); box-shadow: var(--stiker); padding: clamp(18px, 2.4vw, 28px); }
.tema h3 { font-size: var(--fs-tombol); margin-bottom: 14px; }
.tema ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jadwal { margin-top: clamp(32px, 5vw, 56px); background: var(--putih); border: var(--garis) solid var(--indigo); border-radius: var(--radius-kartu); box-shadow: var(--stiker); padding: clamp(18px, 2.6vw, 32px); }
.jadwal h3 { display: flex; align-items: center; gap: 10px; font-size: var(--fs-h3); margin-bottom: 18px; }
.jadwal h3 .ikon { width: 28px; height: 28px; color: var(--oranye-tinta); }
.jadwal__gulir { overflow-x: auto; }
.jadwal__tabel { width: 100%; min-width: 760px; table-layout: fixed; border-collapse: separate; border-spacing: 6px; }
.jadwal__tabel thead th:first-child { width: 150px; }
.jadwal__tabel thead th { padding: 8px; border-radius: 12px; background: var(--indigo-100); color: var(--indigo); font: 500 var(--fs-ui)/1 var(--font-judul); }
.jadwal__tabel tbody th { position: sticky; left: 0; z-index: 1; width: 150px; background: var(--putih); text-align: left; vertical-align: top; }
.jadwal__kelas { display: grid; padding: 10px 12px; border-radius: 12px; font: 500 var(--fs-ui)/1.2 var(--font-judul); }
.jadwal__catatan { display: block; margin-top: 4px; font-size: var(--fs-kecil); color: var(--teks-lembut); font-weight: 400; }
.jadwal__tabel td { min-width: 76px; padding: 4px; border-radius: 12px; background: var(--indigo-50); vertical-align: middle; text-align: center; }
.jadwal__jam { display: block; margin: 3px 0; padding: 8px 4px; border-radius: 10px; font: 500 var(--fs-ui)/1 var(--font-judul); }
.jadwal__daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.jadwal__daftar li { display: grid; grid-template-columns: 90px 1fr auto; gap: 16px; align-items: center; padding: 14px 20px; border-radius: 16px; font: 500 var(--fs-tombol)/1.3 var(--font-judul); }

/* Lowongan kerja */
.lowongan { background: var(--putih); border: var(--garis) solid var(--indigo); border-radius: 28px; box-shadow: var(--stiker); overflow: hidden; }
.lowongan__kepala { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; padding: clamp(24px, 4vw, 48px); border-bottom: var(--garis) solid var(--indigo); }
.lowongan__foto { position: relative; margin: 0; width: clamp(120px, 14vw, 180px); aspect-ratio: 1; }
.lowongan__label { font: 500 var(--fs-kecil)/1 var(--font-judul); letter-spacing: .14em; text-transform: uppercase; color: var(--oranye-tinta); margin-bottom: 8px; }
.lowongan__kepala h2 { font-size: var(--fs-sorot); }
.lowongan__meta { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.lowongan__meta li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--indigo-50); color: var(--indigo); font: 500 var(--fs-kecil)/1.3 var(--font-judul); }
.lowongan__meta .ikon { width: 18px; height: 18px; }
.lowongan__isi { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 4vw, 48px); }
.lowongan__daftar h3 { font-size: var(--fs-h3); margin-bottom: 16px; }
.lowongan__daftar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lowongan__daftar li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; color: var(--teks); }
.lowongan__daftar .ikon { width: 24px; height: 24px; color: var(--indigo); background: var(--mint); border-radius: 50%; padding: 2px; }
.lowongan__lamar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(24px, 4vw, 40px) clamp(24px, 4vw, 48px); background: var(--indigo); color: var(--indigo-teks-lembut); }
.lowongan__lamar h3 { color: var(--putih); font-size: var(--fs-h3); margin-bottom: 8px; }
.lowongan__lamar a:not(.tombol) { color: var(--amber-lembut); }
.lowongan__subjek { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.lowongan__subjek .ikon { width: 18px; height: 18px; }
.kode { font-family: var(--font-badan); font-size: var(--fs-ui); padding: 2px 8px; border-radius: 8px; background: var(--indigo-tua); color: var(--putih); font-weight: 500; }
.lowongan__lamar .tombol { box-shadow: 4px 4px 0 var(--oranye); border-color: var(--indigo-tua); }

/* Formulir lebar penuh */
.form--penuh { max-width: none; }

@media (max-width: 920px) {
  .kepala-halaman__isi, .pendaftaran, .lowongan__isi { grid-template-columns: 1fr; }
  .aspek { grid-template-columns: repeat(3, 1fr); }
  .kartu-foto-daftar--3 { grid-template-columns: repeat(3, 1fr); }
  .piramida__lv { grid-template-columns: 1fr; gap: 8px; }
  .piramida__label { width: 100% !important; justify-self: stretch; }
}
@media (max-width: 640px) {
  .akordeon { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .akordeon__panel, .akordeon__panel.aktif { flex: 0 0 78%; aspect-ratio: 4 / 5; scroll-snap-align: center; box-shadow: none; }
  .akordeon__panel figcaption { opacity: 1; translate: 0 0; }
  .aspek { grid-template-columns: repeat(2, 1fr); }
  .kartu-foto-daftar--2, .kartu-foto-daftar--3 { grid-template-columns: 1fr; }
  .lowongan__kepala { grid-template-columns: 1fr; justify-items: start; }
  .jadwal__daftar li { grid-template-columns: 1fr; gap: 4px; }
  }
@media (prefers-reduced-motion: reduce) {
  .logo-jalan { -webkit-mask-image: none; mask-image: none; }
  .logo-jalan__trek { width: auto; justify-content: center; }
  .logo-jalan__daftar { flex-wrap: wrap; justify-content: center; padding: 0; }
  .logo-jalan__daftar[aria-hidden] { display: none; }
}

/* =========================================================
   REVISI 3: susunan asli RD dipertahankan, bentuk foto MD3 (design system v1.3)
   ========================================================= */
/* Foto berbentuk Material 3 Expressive (src/css/bentuk.css) */
.foto-bentuk { display: inline-block; width: 100%; filter: drop-shadow(4px 4px 0 var(--indigo)); }
.foto-bentuk__isi { display: block; aspect-ratio: 1; padding: 3px; background: var(--indigo); }
.foto-bentuk__isi img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-bentuk--besar { width: clamp(150px, 15vw, 210px); }
.tabel-kelas__foto { display: block; width: 84px; margin: 0 auto 10px; }
.lowongan__foto .foto-bentuk { width: 100%; }

/* Kepala kurikulum: judul bermotif di tengah, seperti infografis asli */
.kurikulum__kepala { text-align: center; display: grid; justify-items: center; gap: 10px; }
.kurikulum__judul { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-h2); }
.kurikulum__hias { width: .8em; height: .8em; color: var(--mint); flex-shrink: 0; }
.kurikulum__ket { color: var(--indigo); font-weight: 500; max-width: 52ch; margin: 0; }
.kurikulum__bar { margin: 0; padding: 12px 28px; border-radius: 18px; background: var(--indigo); color: var(--putih); font-weight: 500; max-width: 70ch; }

/* Donat tahapan perkembangan */
.donat, .siklus { position: relative; container-type: inline-size; margin: 12px auto 0; max-width: 900px; }
.donat { aspect-ratio: 1000 / 660; }
.siklus { aspect-ratio: 1000 / 620; }
.donat__svg, .siklus__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.donat__segmen { stroke: var(--putih); stroke-width: 4; }
.donat__segmen--0, .donat__label--0, .siklus__segmen--2, .siklus__label--2 { fill: var(--oranye); background: var(--oranye); color: var(--indigo-tinta); }
.donat__segmen--1, .donat__label--1, .siklus__segmen--1, .siklus__label--1 { fill: var(--amber-lembut); background: var(--amber-lembut); color: var(--indigo); }
.donat__segmen--2, .donat__label--2, .siklus__segmen--0, .siklus__label--0 { fill: var(--mint); background: var(--mint); color: var(--indigo); }
.donat__segmen--3, .donat__label--3, .siklus__segmen--4, .siklus__label--4 { fill: var(--indigo); background: var(--indigo); color: var(--putih); }
.donat__segmen--4, .donat__label--4 { fill: var(--indigo-tua); background: var(--indigo-tua); color: var(--putih); }
.siklus__segmen--3, .siklus__label--3 { fill: var(--oranye-judul); background: var(--oranye-judul); color: var(--indigo-tinta); }
.donat__tengah { fill: var(--putih); }
.donat__anak { color: var(--mint); }
.donat__label, .siklus__label { position: absolute; transform: translate(-50%, -50%); padding: .55em 1.1em; font: 500 clamp(12px, 2.3cqw, 21px)/1.2 var(--font-judul); text-align: center; box-shadow: 3px 3px 0 var(--indigo); }
.donat__label { border-radius: 10px; max-width: 22%; }
.siklus__label { border-radius: 999px; width: 22%; }
.siklus__label--3 { width: 30%; }
.siklus__garis line { stroke: var(--indigo); stroke-width: 4; }
.siklus__garis circle { fill: var(--indigo); }
.siklus__garis .siklus__ujung { fill: var(--putih); stroke: var(--indigo); stroke-width: 4; }

/* Kompetensi pengajar: foto besar di tengah, label menempel di sekelilingnya */
.pengajar__media--html { background: none; border: 0; box-shadow: none; padding: 0; }
.kompetensi-grup { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.kompetensi { margin: 0; padding: 24px 16px 28px; text-align: center; background: var(--putih); border: var(--garis) solid var(--indigo); border-radius: var(--radius-kartu); box-shadow: var(--stiker); }
.kompetensi h3 { font-size: var(--fs-h3); }
.kompetensi__panggung { position: relative; display: grid; place-items: center; margin-top: 14px; padding: 4px 0 64px; }
.kompetensi__panggung ul { list-style: none; margin: 0; padding: 0; }
.kompetensi__tag { position: absolute; max-width: 38%; padding: 7px 10px; border-radius: 8px; background: var(--amber-lembut); color: var(--indigo); font: 500 var(--fs-kecil)/1.25 var(--font-judul); box-shadow: 2px 2px 0 var(--indigo); }
.kompetensi:nth-child(2) .kompetensi__tag { background: var(--oranye); color: var(--indigo-tinta); }
.kompetensi__tag--0 { top: 4%; left: 0; }
.kompetensi__tag--1 { top: 14%; right: 0; }
.kompetensi__tag--2 { top: 50%; left: 0; }
.kompetensi__tag--3 { top: 64%; right: 0; }
.kompetensi__tag--4 { bottom: 4px; left: 50%; transform: translateX(-50%); white-space: nowrap; max-width: none; }

/* Layanan support system: foto besar, pita label bertumpuk, poin di bawah */
.layanan { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.layanan__foto { position: relative; display: grid; justify-items: center; padding-bottom: 22px; }
.layanan__pita { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); padding: 8px 18px 8px 30px; border-radius: 8px; background: var(--indigo); color: var(--putih); font: 500 var(--fs-tombol)/1.2 var(--font-judul); white-space: nowrap; }
.layanan__bunga { position: absolute; left: -16px; top: -12px; width: 34px; height: 34px; color: var(--oranye); }
.layanan__poin { margin: 18px 0 0; padding-left: 1.2em; color: var(--indigo); font: 500 var(--fs-ui)/1.45 var(--font-badan); display: grid; gap: 4px; }

/* Pendaftaran: hierarki label -> judul -> term -> info -> kalimat -> tombol */
.pendaftaran__teks { gap: 14px; align-content: start; }
.pendaftaran__label { margin: 0; font: 500 var(--fs-kecil)/1 var(--font-judul); letter-spacing: .14em; text-transform: uppercase; color: var(--oranye-tinta); }
.pendaftaran__term { justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 10px 18px; border-radius: 999px; background: var(--amber-lembut); color: var(--indigo); font: 500 var(--fs-h3)/1.2 var(--font-judul); box-shadow: 3px 3px 0 var(--indigo); }
.pendaftaran__term .ikon { width: 22px; height: 22px; }
.pendaftaran__info li { background: transparent; }
.pendaftaran .hero__aksi { margin-top: 8px; }

/* Formulir Google: bingkai pas selebar formulir (isi formulir dibatasi Google, tidak bisa dilebarkan) */
.form--pas { max-width: 760px; margin-inline: auto; }

@media (max-width: 920px) {
  .kompetensi-grup { grid-template-columns: 1fr; }
  .layanan { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .donat, .siklus { aspect-ratio: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .donat__svg, .siklus__svg { position: static; width: 100%; height: auto; }
  .siklus__garis { display: none; }
  .donat__label, .siklus__label { position: static; transform: none; width: auto; max-width: none; font-size: var(--fs-kecil); }
  .kompetensi__panggung { padding-bottom: 0; }
  .kompetensi__panggung ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
  .kompetensi__tag { position: static; transform: none; max-width: none; white-space: normal; }
  .layanan { grid-template-columns: 1fr; }
}
.kompetensi .foto-bentuk--besar { width: min(58%, 230px); }
.layanan .foto-bentuk--besar { width: min(100%, 220px); }

/* Daftar kelas & tema: susunan poster RD (baris berwarna kelas + pill putih tema) */
.tema__baris { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 10px; align-items: center; padding: 6px 6px 6px 16px; border-radius: 14px; }
.tema__kelas { font: 500 var(--fs-ui)/1.25 var(--font-judul); }
.tema__kelas small { display: block; font: 400 var(--fs-kecil)/1.3 var(--font-badan); }
.tema__nama { position: relative; padding: 10px 14px 10px 24px; border-radius: 10px; background: var(--putih); color: var(--indigo); font: 500 var(--fs-ui)/1.2 var(--font-judul); }
.tema__nama::before { content: ":"; position: absolute; left: 11px; color: var(--indigo); }
@media (max-width: 640px) { .tema__baris { grid-template-columns: 1fr; padding: 10px; } }

/* =========================================================
   GERAK v1.4: efek masuk bertahap + hover playful (sekali saat tampil, mati di reduced-motion)
   Masuk memakai properti scale/rotate/opacity (keyframes); hover memakai translate. Tidak saling menimpa.
   ========================================================= */
@keyframes muncul-pop { from { opacity: 0; scale: .6; } 70% { opacity: 1; } to { opacity: 1; scale: 1; } }
@keyframes muncul-putar { from { opacity: 0; scale: .7; rotate: -25deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes muncul-geser { from { opacity: 0; translate: -24px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes muncul-naik { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes tumbuh { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }

/* urutan: --k dari posisi anak */
:is(.kompetensi__tag, .donat__label, .siklus__label, .tema__baris, .mapel__item, .layanan__item, .piramida__lv, .stimulasi .aspek__item, .tabel-kelas thead th, .jadwal__daftar li):nth-child(1) { --k: 0; }
:is(.kompetensi__tag, .donat__label, .siklus__label, .tema__baris, .mapel__item, .layanan__item, .piramida__lv, .stimulasi .aspek__item, .tabel-kelas thead th, .jadwal__daftar li):nth-child(2) { --k: 1; }
:is(.kompetensi__tag, .donat__label, .siklus__label, .tema__baris, .mapel__item, .layanan__item, .piramida__lv, .stimulasi .aspek__item, .tabel-kelas thead th, .jadwal__daftar li):nth-child(3) { --k: 2; }
:is(.kompetensi__tag, .donat__label, .siklus__label, .tema__baris, .mapel__item, .layanan__item, .piramida__lv, .stimulasi .aspek__item, .tabel-kelas thead th, .jadwal__daftar li):nth-child(4) { --k: 3; }
:is(.kompetensi__tag, .donat__label, .siklus__label, .tema__baris, .mapel__item, .layanan__item, .piramida__lv, .stimulasi .aspek__item, .tabel-kelas thead th, .jadwal__daftar li):nth-child(5) { --k: 4; }
:is(.kompetensi__tag, .donat__label, .siklus__label, .tema__baris, .mapel__item, .layanan__item, .piramida__lv, .stimulasi .aspek__item, .tabel-kelas thead th, .jadwal__daftar li):nth-child(6) { --k: 5; }
:is(.kompetensi__tag, .donat__label, .siklus__label, .tema__baris, .mapel__item, .layanan__item, .piramida__lv, .stimulasi .aspek__item, .tabel-kelas thead th, .jadwal__daftar li):nth-child(7) { --k: 6; }

/* Foto berbentuk: masuk berputar, hover berayun (bentuk berputar, foto tetap tegak) */
.tampak .foto-bentuk__isi { animation: muncul-putar 800ms var(--ease-pegas) backwards; animation-delay: 150ms; }
.foto-bentuk__isi, .foto-bentuk__isi img { transition: rotate 500ms var(--ease-pegas), scale 500ms var(--ease-pegas); }
.foto-bentuk:hover .foto-bentuk__isi { rotate: 10deg; scale: 1.04; }
.foto-bentuk:hover .foto-bentuk__isi img { rotate: -10deg; scale: 1.12; }

/* Kompetensi: label menempel satu per satu, hover terangkat */
.tampak .kompetensi__tag { animation: muncul-pop 520ms var(--ease-pegas) backwards; animation-delay: calc(450ms + var(--k, 0) * 110ms); }
.kompetensi__tag { transition: translate var(--durasi) var(--ease-pegas), box-shadow var(--durasi) ease; cursor: default; }
.kompetensi__tag:hover { translate: -2px -3px; box-shadow: 4px 5px 0 var(--indigo); }

/* Layanan: kartu naik bergiliran, pita terangkat saat hover */
.tampak .layanan__item { animation: muncul-naik 650ms var(--ease-keluar) backwards; animation-delay: calc(var(--k, 0) * 140ms); }
.layanan__pita { transition: translate var(--durasi) var(--ease-pegas); }
.layanan__item:hover .layanan__pita { translate: 0 -4px; }
.layanan__bunga { transition: rotate 600ms var(--ease-pegas); }
.layanan__item:hover .layanan__bunga { rotate: 90deg; }

/* Donat: segmen tumbuh dari tengah bergiliran, label menyusul; hover segmen menonjolkan labelnya */
.donat__segmen, .siklus__segmen { transform-box: view-box; transform-origin: 50% 47%; transition: scale var(--durasi) var(--ease-pegas), filter var(--durasi) ease; }
.siklus__segmen { transform-origin: 50% 47%; }
.tampak .donat__segmen { animation: tumbuh 700ms var(--ease-pegas) backwards; }
.tampak .donat__segmen--1 { animation-delay: 90ms; } .tampak .donat__segmen--2 { animation-delay: 180ms; }
.tampak .donat__segmen--3 { animation-delay: 270ms; } .tampak .donat__segmen--4 { animation-delay: 360ms; }
.tampak .donat__label, .tampak .siklus__label { animation: muncul-pop 520ms var(--ease-pegas) backwards; animation-delay: calc(500ms + var(--k, 0) * 100ms); }
.tampak .donat__anak { animation: muncul-pop 700ms var(--ease-pegas) backwards; animation-delay: 900ms; transform-box: fill-box; transform-origin: center; }
.donat__label, .siklus__label { transition: translate var(--durasi) var(--ease-pegas), box-shadow var(--durasi) ease; }
.donat__segmen:hover, .siklus__segmen:hover { scale: 1.04; }
.donat:has(.donat__segmen--0:hover) .donat__label--0, .donat:has(.donat__segmen--1:hover) .donat__label--1,
.donat:has(.donat__segmen--2:hover) .donat__label--2, .donat:has(.donat__segmen--3:hover) .donat__label--3,
.donat:has(.donat__segmen--4:hover) .donat__label--4,
.siklus:has(.siklus__segmen--0:hover) .siklus__label--0, .siklus:has(.siklus__segmen--1:hover) .siklus__label--1,
.siklus:has(.siklus__segmen--2:hover) .siklus__label--2, .siklus:has(.siklus__segmen--3:hover) .siklus__label--3,
.siklus:has(.siklus__segmen--4:hover) .siklus__label--4,
.donat__label:hover, .siklus__label:hover { translate: -3px -3px; box-shadow: 6px 6px 0 var(--indigo); }
/* Siklus: roda berputar masuk */
.tampak .siklus__svg { animation: muncul-putar 1000ms var(--ease-pegas) backwards; }

/* Piramida: tingkat masuk dari kiri bergiliran, hover terangkat */
.tampak .piramida__lv { animation: muncul-geser 600ms var(--ease-keluar) backwards; animation-delay: calc(var(--k, 0) * 120ms); }
.piramida__label { transition: translate var(--durasi) var(--ease-pegas); }
.piramida__lv:hover .piramida__label { translate: 0 -4px; }

/* Tabel kelas & stimulasi */
.tampak .tabel-kelas thead th { animation: muncul-pop 560ms var(--ease-pegas) backwards; animation-delay: calc(var(--k, 0) * 80ms); }
.tampak .stimulasi .aspek__item { animation: muncul-naik 500ms var(--ease-keluar) backwards; animation-delay: calc(600ms + var(--k, 0) * 90ms); }
.tabel-kelas tbody td { transition: background var(--durasi-cepat) ease; }
.tabel-kelas tbody tr:hover td { background: var(--indigo-100); }
.aspek__ikon { transition: rotate 500ms var(--ease-pegas); }
.aspek__item:hover .aspek__ikon { rotate: -12deg; }

/* Tema & jadwal */
.tampak .tema__baris { animation: muncul-geser 550ms var(--ease-keluar) backwards; animation-delay: calc(var(--k, 0) * 90ms); }
.tema__baris { transition: translate var(--durasi) var(--ease-pegas), box-shadow var(--durasi) ease; }
.tema__baris:hover { translate: 4px 0; box-shadow: -4px 0 0 var(--indigo); }
.tampak .jadwal__daftar li { animation: muncul-geser 550ms var(--ease-keluar) backwards; animation-delay: calc(var(--k, 0) * 90ms); }
.tampak .jadwal__jam { animation: muncul-pop 450ms var(--ease-pegas) backwards; animation-delay: 300ms; }
.jadwal__jam, .jadwal__daftar li { transition: translate var(--durasi) var(--ease-pegas); }
.jadwal__jam:hover, .jadwal__daftar li:hover { translate: 0 -2px; }

/* 5 mata pelajaran (susunan poster RD) */
.mapel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 3vw, 40px); }
.mapel__item { display: grid; justify-items: center; gap: 14px; text-align: center; }
.mapel__bentuk { position: relative; width: clamp(96px, 11vw, 150px); aspect-ratio: 1; display: grid; place-items: center; background: var(--oranye); transition: rotate 600ms var(--ease-pegas), scale 600ms var(--ease-pegas), background var(--durasi) ease; }
.mapel__ikon { display: grid; grid-template-columns: repeat(var(--kol, 1), auto); gap: 4px; color: var(--putih); transition: rotate 600ms var(--ease-pegas); }
.mapel__ikon .ikon { width: clamp(44px, 5vw, 64px); height: clamp(44px, 5vw, 64px); }
.mapel__ikon--2 { --kol: 2; } .mapel__ikon--2 .ikon { width: clamp(34px, 3.6vw, 46px); height: clamp(34px, 3.6vw, 46px); }
.mapel__ikon--4 { --kol: 2; } .mapel__ikon--4 .ikon { width: clamp(26px, 2.8vw, 36px); height: clamp(26px, 2.8vw, 36px); }
.mapel__label { font: 500 var(--fs-h3)/1.2 var(--font-judul); color: var(--indigo); }
.tampak .mapel__item { animation: muncul-putar 700ms var(--ease-pegas) backwards; animation-delay: calc(var(--k, 0) * 120ms); }
.mapel__item:hover .mapel__bentuk { rotate: 14deg; scale: 1.08; background: var(--oranye-judul); }
.mapel__item:hover .mapel__ikon { rotate: -14deg; }
@media (max-width: 640px) { .mapel { grid-template-columns: repeat(3, 1fr); row-gap: 24px; } }

/* Dihasilkan tools/bentuk_md3.py dari MaterialShapes.kt (Material 3 Expressive). Jangan edit manual. */
.bentuk-cookie6 { clip-path: polygon(79.10% 82.72%, 77.39% 83.25%, 75.72% 83.86%, 74.10% 84.54%, 72.52% 85.30%, 70.98% 86.14%, 69.49% 87.05%, 68.04% 88.03%, 66.63% 89.09%, 65.27% 90.23%, 63.95% 91.44%, 60.15% 95.11%, 58.12% 96.87%, 56.09% 98.24%, 54.06% 99.22%, 52.03% 99.81%, 50.00% 100.00%, 47.98% 99.80%, 45.95% 99.21%, 43.92% 98.23%, 41.90% 96.86%, 39.87% 95.10%, 36.21% 91.56%, 34.90% 90.34%, 33.54% 89.20%, 32.13% 88.14%, 30.69% 87.15%, 29.20% 86.24%, 27.66% 85.40%, 26.08% 84.64%, 24.46% 83.95%, 22.80% 83.34%, 21.09% 82.81%, 16.00% 81.34%, 13.46% 80.47%, 11.26% 79.39%, 9.40% 78.13%, 7.88% 76.66%, 6.70% 75.00%, 5.86% 73.15%, 5.36% 71.10%, 5.19% 68.85%, 5.37% 66.41%, 5.88% 63.78%, 7.12% 58.84%, 7.51% 57.09%, 7.82% 55.34%, 8.04% 53.60%, 8.17% 51.85%, 8.21% 50.10%, 8.17% 48.35%, 8.04% 46.61%, 7.83% 44.86%, 7.52% 43.11%, 7.13% 41.36%, 5.86% 36.23%, 5.35% 33.59%, 5.18% 31.15%, 5.34% 28.91%, 5.85% 26.86%, 6.70% 25.00%, 7.88% 23.35%, 9.41% 21.89%, 11.27% 20.62%, 13.47% 19.55%, 16.01% 18.68%, 20.90% 17.28%, 22.61% 16.75%, 24.28% 16.14%, 25.90% 15.46%, 27.48% 14.70%, 29.02% 13.86%, 30.51% 12.95%, 31.96% 11.97%, 33.37% 10.91%, 34.73% 9.77%, 36.05% 8.56%, 39.85% 4.89%, 41.88% 3.13%, 43.91% 1.76%, 45.94% 0.78%, 47.97% 0.19%, 50.00% 0.00%, 52.02% 0.20%, 54.05% 0.79%, 56.08% 1.77%, 58.10% 3.14%, 60.13% 4.90%, 63.79% 8.44%, 65.10% 9.66%, 66.46% 10.80%, 67.87% 11.86%, 69.31% 12.85%, 70.80% 13.76%, 72.34% 14.60%, 73.92% 15.36%, 75.54% 16.05%, 77.20% 16.66%, 78.91% 17.19%, 84.00% 18.66%, 86.54% 19.53%, 88.74% 20.61%, 90.60% 21.87%, 92.12% 23.34%, 93.30% 25.00%, 94.14% 26.85%, 94.64% 28.90%, 94.81% 31.15%, 94.63% 33.59%, 94.12% 36.22%, 92.88% 41.16%, 92.49% 42.91%, 92.18% 44.66%, 91.96% 46.40%, 91.83% 48.15%, 91.79% 49.90%, 91.83% 51.65%, 91.96% 53.39%, 92.17% 55.14%, 92.48% 56.89%, 92.87% 58.64%, 94.14% 63.77%, 94.65% 66.41%, 94.82% 68.85%, 94.66% 71.09%, 94.15% 73.14%, 93.30% 75.00%, 92.12% 76.65%, 90.59% 78.11%, 88.73% 79.38%, 86.53% 80.45%, 83.99% 81.32%); }
.bentuk-cookie7 { clip-path: polygon(40.96% 5.52%, 42.77% 3.90%, 44.58% 2.64%, 46.38% 1.74%, 48.19% 1.19%, 50.00% 1.01%, 51.81% 1.19%, 53.62% 1.74%, 55.42% 2.64%, 57.23% 3.90%, 59.04% 5.52%, 61.23% 7.70%, 62.63% 9.01%, 64.08% 10.20%, 65.59% 11.28%, 67.15% 12.25%, 68.77% 13.10%, 70.44% 13.83%, 72.17% 14.45%, 73.95% 14.96%, 75.79% 15.35%, 77.68% 15.63%, 80.76% 15.98%, 83.15% 16.38%, 85.27% 17.01%, 87.10% 17.86%, 88.65% 18.94%, 89.92% 20.24%, 90.90% 21.76%, 91.61% 23.51%, 92.03% 25.49%, 92.17% 27.69%, 92.03% 30.11%, 91.69% 33.19%, 91.54% 35.10%, 91.51% 36.98%, 91.61% 38.83%, 91.83% 40.65%, 92.17% 42.44%, 92.64% 44.21%, 93.23% 45.95%, 93.95% 47.66%, 94.79% 49.34%, 95.75% 50.99%, 97.39% 53.61%, 98.57% 55.74%, 99.40% 57.78%, 99.88% 59.74%, 100.00% 61.63%, 99.77% 63.43%, 99.20% 65.15%, 98.27% 66.79%, 96.99% 68.36%, 95.35% 69.84%, 93.37% 71.24%, 90.75% 72.89%, 89.17% 73.96%, 87.68% 75.11%, 86.29% 76.34%, 85.01% 77.65%, 83.82% 79.04%, 82.73% 80.50%, 81.74% 82.05%, 80.85% 83.68%, 80.06% 85.38%, 79.37% 87.17%, 78.34% 90.09%, 77.42% 92.33%, 76.33% 94.25%, 75.10% 95.85%, 73.70% 97.12%, 72.15% 98.07%, 70.44% 98.69%, 68.58% 98.99%, 66.56% 98.96%, 64.39% 98.61%, 62.05% 97.93%, 59.13% 96.91%, 57.30% 96.34%, 55.48% 95.90%, 53.65% 95.58%, 51.83% 95.39%, 50.00% 95.32%, 48.17% 95.39%, 46.35% 95.58%, 44.52% 95.90%, 42.70% 96.34%, 40.87% 96.91%, 37.95% 97.93%, 35.61% 98.61%, 33.44% 98.96%, 31.42% 98.99%, 29.56% 98.69%, 27.85% 98.07%, 26.30% 97.12%, 24.90% 95.85%, 23.67% 94.25%, 22.58% 92.33%, 21.66% 90.09%, 20.63% 87.17%, 19.94% 85.38%, 19.15% 83.68%, 18.26% 82.05%, 17.27% 80.50%, 16.18% 79.04%, 14.99% 77.65%, 13.71% 76.34%, 12.32% 75.11%, 10.83% 73.96%, 9.25% 72.89%, 6.63% 71.24%, 4.65% 69.84%, 3.01% 68.36%, 1.73% 66.79%, 0.80% 65.15%, 0.23% 63.43%, 0.00% 61.63%, 0.12% 59.74%, 0.60% 57.78%, 1.43% 55.74%, 2.61% 53.61%, 4.25% 50.99%, 5.21% 49.34%, 6.05% 47.66%, 6.77% 45.95%, 7.36% 44.21%, 7.83% 42.44%, 8.17% 40.65%, 8.39% 38.83%, 8.49% 36.98%, 8.46% 35.10%, 8.31% 33.19%, 7.97% 30.11%, 7.83% 27.69%, 7.97% 25.49%, 8.39% 23.51%, 9.10% 21.76%, 10.08% 20.24%, 11.35% 18.94%, 12.90% 17.86%, 14.73% 17.01%, 16.85% 16.38%, 19.24% 15.98%, 22.32% 15.63%, 24.21% 15.35%, 26.05% 14.96%, 27.83% 14.45%, 29.56% 13.83%, 31.23% 13.10%, 32.85% 12.25%, 34.41% 11.28%, 35.92% 10.20%, 37.37% 9.01%, 38.77% 7.70%); }
.bentuk-cookie9 { clip-path: polygon(42.61% 3.98%, 44.09% 2.77%, 45.57% 1.84%, 47.05% 1.17%, 48.52% 0.76%, 50.00% 0.63%, 51.48% 0.76%, 52.95% 1.17%, 54.43% 1.84%, 55.91% 2.77%, 57.39% 3.98%, 57.39% 3.98%, 58.89% 5.25%, 60.45% 6.38%, 62.05% 7.36%, 63.71% 8.21%, 65.42% 8.91%, 67.18% 9.47%, 68.99% 9.89%, 70.86% 10.17%, 72.77% 10.30%, 74.74% 10.30%, 74.74% 10.30%, 76.65% 10.32%, 78.38% 10.55%, 79.95% 10.99%, 81.34% 11.63%, 82.55% 12.48%, 83.60% 13.53%, 84.47% 14.79%, 85.17% 16.25%, 85.70% 17.92%, 86.06% 19.79%, 86.06% 19.79%, 86.39% 21.73%, 86.86% 23.60%, 87.46% 25.38%, 88.18% 27.10%, 89.04% 28.73%, 90.03% 30.29%, 91.15% 31.78%, 92.40% 33.19%, 93.78% 34.53%, 95.29% 35.79%, 95.29% 35.79%, 96.74% 37.03%, 97.92% 38.32%, 98.83% 39.66%, 99.49% 41.05%, 99.88% 42.48%, 100.00% 43.96%, 99.86% 45.48%, 99.46% 47.05%, 98.79% 48.67%, 97.86% 50.34%, 97.86% 50.34%, 96.87% 52.04%, 96.03% 53.76%, 95.34% 55.52%, 94.79% 57.30%, 94.40% 59.10%, 94.15% 60.93%, 94.05% 62.79%, 94.10% 64.68%, 94.30% 66.59%, 94.65% 68.52%, 94.65% 68.52%, 94.96% 70.41%, 95.03% 72.15%, 94.87% 73.77%, 94.48% 75.25%, 93.86% 76.60%, 93.00% 77.81%, 91.92% 78.89%, 90.60% 79.83%, 89.05% 80.64%, 87.26% 81.32%, 87.26% 81.32%, 85.41% 81.99%, 83.66% 82.77%, 82.00% 83.67%, 80.44% 84.68%, 78.98% 85.81%, 77.61% 87.05%, 76.34% 88.41%, 75.17% 89.89%, 74.10% 91.48%, 73.12% 93.19%, 73.12% 93.19%, 72.14% 94.83%, 71.07% 96.21%, 69.91% 97.35%, 68.66% 98.23%, 67.32% 98.86%, 65.89% 99.24%, 64.36% 99.37%, 62.74% 99.25%, 61.03% 98.87%, 59.23% 98.24%, 59.23% 98.24%, 57.39% 97.56%, 55.54% 97.04%, 53.69% 96.66%, 51.85% 96.43%, 50.00% 96.36%, 48.15% 96.43%, 46.31% 96.66%, 44.46% 97.04%, 42.61% 97.56%, 40.77% 98.24%, 40.77% 98.24%, 38.97% 98.87%, 37.26% 99.25%, 35.64% 99.37%, 34.11% 99.24%, 32.68% 98.86%, 31.34% 98.23%, 30.09% 97.35%, 28.93% 96.21%, 27.86% 94.83%, 26.88% 93.19%, 26.88% 93.19%, 25.90% 91.48%, 24.83% 89.89%, 23.66% 88.41%, 22.39% 87.05%, 21.02% 85.81%, 19.56% 84.68%, 18.00% 83.67%, 16.34% 82.77%, 14.59% 81.99%, 12.74% 81.32%, 12.74% 81.32%, 10.95% 80.64%, 9.40% 79.83%, 8.08% 78.89%, 7.00% 77.81%, 6.14% 76.60%, 5.52% 75.25%, 5.13% 73.77%, 4.97% 72.15%, 5.04% 70.41%, 5.35% 68.52%, 5.35% 68.52%, 5.70% 66.59%, 5.90% 64.68%, 5.95% 62.79%, 5.85% 60.93%, 5.60% 59.10%, 5.21% 57.30%, 4.66% 55.52%, 3.97% 53.76%, 3.13% 52.04%, 2.14% 50.34%, 2.14% 50.34%, 1.21% 48.67%, 0.54% 47.05%, 0.14% 45.48%, 0.00% 43.96%, 0.12% 42.48%, 0.51% 41.05%, 1.17% 39.66%, 2.08% 38.32%, 3.26% 37.03%, 4.71% 35.79%, 4.71% 35.79%, 6.22% 34.53%, 7.60% 33.19%, 8.85% 31.78%, 9.97% 30.29%, 10.96% 28.73%, 11.82% 27.10%, 12.54% 25.38%, 13.14% 23.60%, 13.61% 21.73%, 13.94% 19.79%, 13.94% 19.79%, 14.30% 17.92%, 14.83% 16.25%, 15.53% 14.79%, 16.40% 13.53%, 17.45% 12.48%, 18.66% 11.63%, 20.05% 10.99%, 21.62% 10.55%, 23.35% 10.32%, 25.26% 10.30%, 25.26% 10.30%, 27.23% 10.30%, 29.14% 10.17%, 31.01% 9.89%, 32.82% 9.47%, 34.58% 8.91%, 36.29% 8.21%, 37.95% 7.36%, 39.55% 6.38%, 41.11% 5.25%, 42.61% 3.98%); }
.bentuk-sunny { clip-path: polygon(97.84% 44.92%, 98.62% 45.94%, 99.22% 46.95%, 99.65% 47.97%, 99.91% 48.98%, 100.00% 50.00%, 99.91% 51.02%, 99.65% 52.03%, 99.22% 53.05%, 98.62% 54.06%, 97.84% 55.08%, 90.20% 64.04%, 89.88% 64.43%, 89.60% 64.84%, 89.34% 65.25%, 89.11% 65.68%, 88.91% 66.12%, 88.74% 66.57%, 88.60% 67.03%, 88.49% 67.51%, 88.41% 68.00%, 88.35% 68.49%, 87.41% 80.24%, 87.25% 81.51%, 86.96% 82.65%, 86.55% 83.68%, 86.01% 84.58%, 85.36% 85.36%, 84.58% 86.01%, 83.68% 86.55%, 82.65% 86.96%, 81.51% 87.25%, 80.24% 87.41%, 68.49% 88.35%, 68.00% 88.41%, 67.51% 88.49%, 67.03% 88.60%, 66.57% 88.74%, 66.12% 88.91%, 65.68% 89.11%, 65.25% 89.34%, 64.84% 89.60%, 64.43% 89.88%, 64.04% 90.20%, 55.08% 97.84%, 54.06% 98.62%, 53.05% 99.22%, 52.03% 99.65%, 51.02% 99.91%, 50.00% 100.00%, 48.98% 99.91%, 47.97% 99.65%, 46.95% 99.22%, 45.94% 98.62%, 44.92% 97.84%, 35.96% 90.20%, 35.57% 89.88%, 35.16% 89.60%, 34.75% 89.34%, 34.32% 89.11%, 33.88% 88.91%, 33.43% 88.74%, 32.97% 88.60%, 32.49% 88.49%, 32.00% 88.41%, 31.51% 88.35%, 19.76% 87.41%, 18.49% 87.25%, 17.35% 86.96%, 16.32% 86.55%, 15.42% 86.01%, 14.64% 85.36%, 13.99% 84.58%, 13.45% 83.68%, 13.04% 82.65%, 12.75% 81.51%, 12.59% 80.24%, 11.65% 68.49%, 11.59% 68.00%, 11.51% 67.51%, 11.40% 67.03%, 11.26% 66.57%, 11.09% 66.12%, 10.89% 65.68%, 10.66% 65.25%, 10.40% 64.84%, 10.12% 64.43%, 9.80% 64.04%, 2.16% 55.08%, 1.38% 54.06%, 0.78% 53.05%, 0.35% 52.03%, 0.09% 51.02%, 0.00% 50.00%, 0.09% 48.98%, 0.35% 47.97%, 0.78% 46.95%, 1.38% 45.94%, 2.16% 44.92%, 9.80% 35.96%, 10.12% 35.57%, 10.40% 35.16%, 10.66% 34.75%, 10.89% 34.32%, 11.09% 33.88%, 11.26% 33.43%, 11.40% 32.97%, 11.51% 32.49%, 11.59% 32.00%, 11.65% 31.51%, 12.59% 19.76%, 12.75% 18.49%, 13.04% 17.35%, 13.45% 16.32%, 13.99% 15.42%, 14.64% 14.64%, 15.42% 13.99%, 16.32% 13.45%, 17.35% 13.04%, 18.49% 12.75%, 19.76% 12.59%, 31.51% 11.65%, 32.00% 11.59%, 32.49% 11.51%, 32.97% 11.40%, 33.43% 11.26%, 33.88% 11.09%, 34.32% 10.89%, 34.75% 10.66%, 35.16% 10.40%, 35.57% 10.12%, 35.96% 9.80%, 44.92% 2.16%, 45.94% 1.38%, 46.95% 0.78%, 47.97% 0.35%, 48.98% 0.09%, 50.00% 0.00%, 51.02% 0.09%, 52.03% 0.35%, 53.05% 0.78%, 54.06% 1.38%, 55.08% 2.16%, 64.04% 9.80%, 64.43% 10.12%, 64.84% 10.40%, 65.25% 10.66%, 65.68% 10.89%, 66.12% 11.09%, 66.57% 11.26%, 67.03% 11.40%, 67.51% 11.51%, 68.00% 11.59%, 68.49% 11.65%, 80.24% 12.59%, 81.51% 12.75%, 82.65% 13.04%, 83.68% 13.45%, 84.58% 13.99%, 85.36% 14.64%, 86.01% 15.42%, 86.55% 16.32%, 86.96% 17.35%, 87.25% 18.49%, 87.41% 19.76%, 88.35% 31.51%, 88.41% 32.00%, 88.49% 32.49%, 88.60% 32.97%, 88.74% 33.43%, 88.91% 33.88%, 89.11% 34.32%, 89.34% 34.75%, 89.60% 35.16%, 89.88% 35.57%, 90.20% 35.96%); }
.bentuk-clover4 { clip-path: polygon(50.00% 11.43%, 60.18% 3.60%, 62.21% 2.21%, 64.21% 1.15%, 66.20% 0.43%, 68.16% 0.04%, 70.09% 0.00%, 72.01% 0.29%, 73.90% 0.93%, 75.78% 1.90%, 77.63% 3.21%, 79.45% 4.86%, 95.14% 20.55%, 96.79% 22.37%, 98.10% 24.22%, 99.07% 26.10%, 99.71% 27.99%, 100.00% 29.91%, 99.96% 31.84%, 99.57% 33.80%, 98.85% 35.79%, 97.79% 37.79%, 96.40% 39.82%, 88.57% 50.00%, 96.40% 60.18%, 97.79% 62.21%, 98.85% 64.21%, 99.57% 66.20%, 99.96% 68.16%, 100.00% 70.09%, 99.71% 72.01%, 99.07% 73.90%, 98.10% 75.78%, 96.79% 77.63%, 95.14% 79.45%, 79.45% 95.14%, 77.63% 96.79%, 75.78% 98.10%, 73.90% 99.07%, 72.01% 99.71%, 70.09% 100.00%, 68.16% 99.96%, 66.20% 99.57%, 64.21% 98.85%, 62.21% 97.79%, 60.18% 96.40%, 50.00% 88.57%, 39.82% 96.40%, 37.79% 97.79%, 35.79% 98.85%, 33.80% 99.57%, 31.84% 99.96%, 29.91% 100.00%, 27.99% 99.71%, 26.10% 99.07%, 24.22% 98.10%, 22.37% 96.79%, 20.55% 95.14%, 4.86% 79.45%, 3.21% 77.63%, 1.90% 75.78%, 0.93% 73.90%, 0.29% 72.01%, 0.00% 70.09%, 0.04% 68.16%, 0.43% 66.20%, 1.15% 64.21%, 2.21% 62.21%, 3.60% 60.18%, 11.43% 50.00%, 3.60% 39.82%, 2.21% 37.79%, 1.15% 35.79%, 0.43% 33.80%, 0.04% 31.84%, 0.00% 29.91%, 0.29% 27.99%, 0.93% 26.10%, 1.90% 24.22%, 3.21% 22.37%, 4.86% 20.55%, 20.55% 4.86%, 22.37% 3.21%, 24.22% 1.90%, 26.10% 0.93%, 27.99% 0.29%, 29.91% 0.00%, 31.84% 0.04%, 33.80% 0.43%, 35.79% 1.15%, 37.79% 2.21%, 39.82% 3.60%); }
.bentuk-clover8 { clip-path: polygon(50.00% 8.58%, 61.92% 2.25%, 64.06% 1.25%, 66.05% 0.62%, 67.87% 0.34%, 69.53% 0.43%, 71.04% 0.87%, 72.38% 1.68%, 73.56% 2.85%, 74.59% 4.38%, 75.45% 6.28%, 76.16% 8.53%, 79.29% 20.71%, 92.19% 24.67%, 94.41% 25.48%, 96.27% 26.43%, 97.75% 27.52%, 98.87% 28.76%, 99.61% 30.14%, 99.99% 31.66%, 100.00% 33.32%, 99.64% 35.13%, 98.91% 37.08%, 97.82% 39.18%, 91.42% 50.00%, 97.75% 61.92%, 98.75% 64.06%, 99.38% 66.05%, 99.66% 67.87%, 99.57% 69.53%, 99.13% 71.04%, 98.32% 72.38%, 97.15% 73.56%, 95.62% 74.59%, 93.72% 75.45%, 91.47% 76.16%, 79.29% 79.29%, 75.33% 92.19%, 74.52% 94.41%, 73.57% 96.27%, 72.48% 97.75%, 71.24% 98.87%, 69.86% 99.61%, 68.34% 99.99%, 66.68% 100.00%, 64.87% 99.64%, 62.92% 98.91%, 60.82% 97.82%, 50.00% 91.42%, 38.08% 97.75%, 35.94% 98.75%, 33.95% 99.38%, 32.13% 99.66%, 30.47% 99.57%, 28.96% 99.13%, 27.62% 98.32%, 26.44% 97.15%, 25.41% 95.62%, 24.55% 93.72%, 23.84% 91.47%, 20.71% 79.29%, 7.81% 75.33%, 5.59% 74.52%, 3.73% 73.57%, 2.25% 72.48%, 1.13% 71.24%, 0.39% 69.86%, 0.01% 68.34%, 0.00% 66.68%, 0.36% 64.87%, 1.09% 62.92%, 2.18% 60.82%, 8.58% 50.00%, 2.25% 38.08%, 1.25% 35.94%, 0.62% 33.95%, 0.34% 32.13%, 0.43% 30.47%, 0.87% 28.96%, 1.68% 27.62%, 2.85% 26.44%, 4.38% 25.41%, 6.28% 24.55%, 8.53% 23.84%, 20.71% 20.71%, 24.67% 7.81%, 25.48% 5.59%, 26.43% 3.73%, 27.52% 2.25%, 28.76% 1.13%, 30.14% 0.39%, 31.66% 0.01%, 33.32% 0.00%, 35.13% 0.36%, 37.08% 1.09%, 39.18% 2.18%); }
.bentuk-pentagon { clip-path: polygon(40.12% 6.48%, 42.10% 5.23%, 44.07% 4.25%, 46.05% 3.56%, 48.02% 3.14%, 50.00% 3.00%, 51.98% 3.14%, 53.95% 3.56%, 55.93% 4.25%, 57.90% 5.23%, 59.88% 6.48%, 92.86% 29.76%, 94.70% 31.20%, 96.27% 32.74%, 97.57% 34.36%, 98.59% 36.08%, 99.34% 37.89%, 99.81% 39.78%, 100.00% 41.77%, 99.92% 43.85%, 99.56% 46.01%, 98.93% 48.27%, 86.50% 85.50%, 85.65% 87.69%, 84.63% 89.64%, 83.45% 91.37%, 82.10% 92.86%, 80.59% 94.13%, 78.91% 95.16%, 77.07% 95.97%, 75.06% 96.54%, 72.88% 96.89%, 70.54% 97.00%, 29.46% 97.00%, 27.12% 96.89%, 24.94% 96.54%, 22.93% 95.97%, 21.09% 95.16%, 19.41% 94.13%, 17.90% 92.86%, 16.55% 91.37%, 15.37% 89.64%, 14.35% 87.69%, 13.50% 85.50%, 1.07% 48.27%, 0.44% 46.01%, 0.08% 43.85%, 0.00% 41.77%, 0.19% 39.78%, 0.66% 37.89%, 1.41% 36.08%, 2.43% 34.36%, 3.73% 32.74%, 5.30% 31.20%, 7.14% 29.76%); }
.bentuk-gem { clip-path: polygon(59.94% 97.74%, 57.94% 98.56%, 55.94% 99.19%, 53.94% 99.64%, 51.94% 99.91%, 49.94% 100.00%, 47.94% 99.90%, 45.94% 99.63%, 43.94% 99.17%, 41.94% 98.53%, 39.94% 97.70%, 13.70% 85.67%, 11.03% 84.29%, 8.69% 82.72%, 6.68% 80.98%, 5.00% 79.05%, 3.64% 76.95%, 2.61% 74.67%, 1.91% 72.21%, 1.54% 69.57%, 1.50% 66.76%, 1.79% 63.76%, 5.93% 35.38%, 6.28% 33.50%, 6.75% 31.70%, 7.36% 29.98%, 8.09% 28.33%, 8.95% 26.77%, 9.95% 25.29%, 11.07% 23.88%, 12.32% 22.56%, 13.70% 21.31%, 15.21% 20.14%, 37.81% 3.95%, 38.93% 3.19%, 40.07% 2.52%, 41.24% 1.93%, 42.43% 1.41%, 43.65% 0.98%, 44.90% 0.63%, 46.17% 0.35%, 47.46% 0.15%, 48.78% 0.04%, 50.13% 0.00%, 50.13% 0.00%, 51.47% 0.04%, 52.79% 0.16%, 54.09% 0.36%, 55.36% 0.65%, 56.60% 1.00%, 57.82% 1.44%, 59.01% 1.96%, 60.18% 2.56%, 61.32% 3.24%, 62.43% 3.99%, 84.97% 20.27%, 86.47% 21.45%, 87.85% 22.70%, 89.09% 24.03%, 90.21% 25.44%, 91.20% 26.93%, 92.06% 28.49%, 92.78% 30.14%, 93.38% 31.86%, 93.85% 33.66%, 94.19% 35.54%, 98.22% 63.95%, 98.50% 66.94%, 98.45% 69.76%, 98.06% 72.39%, 97.36% 74.85%, 96.32% 77.13%, 94.96% 79.22%, 93.27% 81.14%, 91.25% 82.88%, 88.90% 84.44%, 86.23% 85.81%); }