/* =====================================================================
   CLAYMORPHISM — situs publik + halaman Daftar Online (3.43.0)

   Hanya mengubah GAYA PERMUKAAN: radius besar, bayangan dalam (sorot kiri-atas,
   gelap kanan-bawah) + bayangan luar lembut, kanvas abu hangat. Struktur HTML, tata letak,
   isi, efek hero, dan JavaScript tidak disentuh. Palet tetap hitam-putih (lambang Yayasan).

   Dimuat SETELAH styles.css (dan daftar.css). Untuk kembali ke tampilan lama: hapus
   baris <link> clay.css di setiap halaman HTML.
   ===================================================================== */

:root {
  /* 3.81.0 — kanvas abu kebiruan diganti krem hangat; semua turunan mengikuti token styles.css */
  --cl-canvas: var(--kertas);          /* #f4f7fa */
  --cl-band: var(--kertas-dalam);      /* #e8eef4 */
  --cl-surface: var(--kartu);          /* #fcfdff */
  --cl-surface-hi: #ffffff;
  --cl-well: #dde6ee;
  --cl-ink-shadow: 24, 48, 72;         /* bayangan cokelat hangat, bukan biru-ungu */

  --r-s: 12px;
  --r-m: 20px;
  --r-clay: 20px;

  --clay-timbul:
    inset 3px 3px 6px rgba(255, 255, 255, 0.95),
    inset -4px -6px 12px rgba(var(--cl-ink-shadow), 0.1),
    10px 14px 26px -14px rgba(var(--cl-ink-shadow), 0.4),
    -6px -6px 14px rgba(255, 255, 255, 0.85);
  --clay-lekuk:
    inset 4px 4px 9px rgba(var(--cl-ink-shadow), 0.17),
    inset -4px -4px 9px rgba(255, 255, 255, 0.95);
  --clay-tekan:
    inset 4px 5px 10px rgba(var(--cl-ink-shadow), 0.3),
    inset -3px -3px 8px rgba(255, 255, 255, 0.5);
  --clay-gelap:
    inset 3px 3px 6px rgba(255, 255, 255, 0.26),
    inset -5px -7px 14px rgba(8, 24, 40, 0.6),
    10px 14px 24px -12px rgba(8, 24, 40, 0.6);
  --clay-putih:
    inset 3px 3px 6px #fff,
    inset -4px -6px 12px rgba(8, 24, 40, 0.12),
    10px 14px 24px -12px rgba(8, 24, 40, 0.7);
}

/* ---------- Kanvas ---------- */
body { background: var(--cl-canvas); }
.seksi.kertas {
  background: var(--cl-band);
  box-shadow: inset 0 10px 16px -12px rgba(var(--cl-ink-shadow), 0.22), inset 0 -10px 16px -12px rgba(255, 255, 255, 0.95);
}
::selection { background: #0b1d2e; color: #fff; }

/* ---------- Header + menu ---------- */
.site-header::before { background: var(--cl-canvas); box-shadow: inset 0 -3px 5px rgba(255, 255, 255, 0.9); }
.site-header.is-stuck::before { background: rgba(247, 245, 240, 0.94); }
.site-header.is-stuck { border-bottom-color: transparent; box-shadow: 0 12px 24px -16px rgba(var(--cl-ink-shadow), 0.38); }
.menu-toggle { background: var(--cl-surface); border-radius: 16px; box-shadow: var(--clay-timbul); }
.menu-toggle:active { box-shadow: var(--clay-tekan); }
.brand img { filter: drop-shadow(3px 5px 5px rgba(var(--cl-ink-shadow), 0.28)); }

.nav-sheet { background: var(--cl-canvas); }
.nav-sheet .link {
  margin: 0 0 12px; padding: 16px 20px; border: 0; border-radius: 22px;
  background: var(--cl-surface); box-shadow: var(--clay-timbul);
}
.nav-sheet .link[aria-current="page"] { background: var(--cl-well); box-shadow: var(--clay-lekuk); }
.nav-sheet .link:active { box-shadow: var(--clay-tekan); }
.nav-sheet-foot .btn-emas { box-shadow: var(--clay-gelap); }

@media (min-width: 820px) {
  .nav-desktop a { border-radius: 14px; }
  .nav-desktop a:hover { background: var(--cl-surface); box-shadow: var(--clay-timbul); }
  .nav-desktop a[aria-current="page"] { background: var(--cl-well); box-shadow: var(--clay-lekuk); }
  .nav-desktop a.nav-kontak { border: 0; background: var(--cl-surface); box-shadow: var(--clay-timbul); }
  .nav-desktop a.nav-kontak:hover { background: #0b1d2e; color: #fff; box-shadow: var(--clay-gelap); }
  .nav-desktop a.nav-kontak[aria-current="page"] { background: #0b1d2e; color: #fff; box-shadow: var(--clay-gelap); }
}
.nav-sub {
  background: var(--cl-surface); border: 0; border-radius: 24px; padding: 10px;
  box-shadow: var(--clay-timbul), 0 26px 44px -20px rgba(var(--cl-ink-shadow), 0.5);
}
.nav-desktop .nav-sub a { border-radius: 16px; }
.nav-desktop .nav-sub a:hover, .nav-desktop .nav-sub a:focus-visible { background: var(--cl-well); box-shadow: var(--clay-lekuk); }
.akun-menu {
  background: var(--cl-surface); border: 0; border-radius: 22px; padding: 8px;
  box-shadow: var(--clay-timbul), 0 22px 40px -18px rgba(var(--cl-ink-shadow), 0.5);
}
.akun-menu-item { border-radius: 14px; }
.akun-menu-item:hover, .akun-menu-item:focus { background: var(--cl-well); box-shadow: var(--clay-lekuk); }

/* ---------- Pita hitam penuh jadi lempeng clay gelap ---------- */
.cta, .angka-band, .video-band {
  margin-inline: 14px; border-radius: 34px; overflow: hidden; isolation: isolate;
  box-shadow: var(--clay-gelap);
}
.cta { margin-bottom: 18px; }
.site-footer {
  border-radius: 38px 38px 0 0; overflow: hidden;
  box-shadow: inset 3px 4px 8px rgba(255, 255, 255, 0.18), inset 0 -10px 24px rgba(8, 24, 40, 0.5), 0 -10px 24px -16px rgba(var(--cl-ink-shadow), 0.4);
}
.osis-lambang { border-radius: var(--r-clay); box-shadow: var(--clay-gelap); }
.hero-kicker { border: 0; background: var(--cl-surface); box-shadow: var(--clay-timbul); }

/* ---------- Kartu timbul ---------- */
.fakta, .pimpinan, .baris, .post, .faq details, .jalan-langkah, .apl-kartu, .testi-kartu,
.eks-kartu, .guru-kartu, .ag-item, .ed-info, .ed-lain, .bd-lain, .bd-bagikan, .acara-kartu,
.struktur li, .data-pokok, .tabel-bungkus, .kartu-form, .daftar-status, .df-intro, .df-form,
.ed-sampul, .kontak-info li {
  background: var(--cl-surface); border: 0; border-radius: var(--r-clay);
  box-shadow: var(--clay-timbul);
}
.fakta { background: var(--cl-surface-hi); box-shadow: var(--clay-timbul), 0 28px 44px -26px rgba(var(--cl-ink-shadow), 0.5); }
.fakta .item, .data-pokok dl > div { border-color: rgba(var(--cl-ink-shadow), 0.09); }
.baris .icon, .ed-baris .icon { background: var(--cl-surface-hi); box-shadow: var(--clay-timbul); }
.eks-kartu:hover, .guru-kartu:hover, .bd-lain:hover, .ed-lain:hover, .apl-kartu:hover {
  border-color: transparent; box-shadow: var(--clay-timbul), 0 24px 38px -22px rgba(var(--cl-ink-shadow), 0.5);
}
.faq details { margin-bottom: 14px; }
.faq details[open] { background: var(--cl-surface-hi); }
.kontak-info li { margin-bottom: 12px; padding: 18px 20px; }
.kontak-info li:first-child { padding-top: 18px; }
.struktur li { padding: 18px 20px; }
.struktur li::before { box-shadow: 0 0 0 4px var(--cl-canvas), 2px 3px 5px rgba(8, 24, 40, 0.35); }
.tabel-bungkus .tabel td { border-color: rgba(var(--cl-ink-shadow), 0.08); }
.kutipan {
  border: 0; border-radius: var(--r-clay); padding: 26px 26px 24px;
  background: var(--cl-well); box-shadow: var(--clay-lekuk);
}
.kosong { background: var(--cl-well); border: 0; box-shadow: var(--clay-lekuk); }
.agenda-tgl { border: 0; border-radius: 16px; background: var(--cl-surface-hi); box-shadow: var(--clay-timbul); }
.ag-tgl { border-radius: 16px; box-shadow: var(--clay-gelap); }
.jalan-no { box-shadow: var(--clay-gelap); }
.eks-ikon { border: 0; background: rgba(255, 255, 255, 0.14); box-shadow: inset 2px 3px 5px rgba(255, 255, 255, 0.3), inset -3px -5px 10px rgba(8, 24, 40, 0.45); }
.guru-foto { box-shadow: 0 0 0 5px var(--cl-surface-hi), 6px 8px 14px -4px rgba(var(--cl-ink-shadow), 0.45), inset -3px -4px 8px rgba(8, 24, 40, 0.12); }
.foto, .post-foto img, .bd-sampul img, .ed-sampul img { border-radius: 22px; }
.foto { box-shadow: 10px 14px 24px -12px rgba(var(--cl-ink-shadow), 0.55), -5px -5px 12px rgba(255, 255, 255, 0.8), inset 0 0 0 3px rgba(255, 255, 255, 0.55); }
.peta, .lokasi-peta { border-radius: var(--r-clay); overflow: hidden; box-shadow: var(--clay-timbul); }
.video-bingkai { border-radius: 28px; box-shadow: var(--clay-gelap); }

/* ---------- Tombol, chip, pil ---------- */
.btn-garis { background: var(--cl-surface); }
.btn-garis:hover { background: var(--cl-surface-hi); }
.chip, .salin {
  background: var(--cl-surface); border: 0; box-shadow: var(--clay-timbul);
}
.chip:hover, .salin:hover { background: var(--cl-surface-hi); border-color: transparent; }
.chip:active, .salin:active { box-shadow: var(--clay-tekan); }
.chip[aria-pressed="true"] { background: #0b1d2e; color: #fff; box-shadow: var(--clay-gelap); }
.subnav { background: rgba(247, 245, 240, 0.94); border-bottom-color: transparent; box-shadow: 0 10px 20px -16px rgba(var(--cl-ink-shadow), 0.4); }
.subnav a:hover { background: var(--cl-surface); box-shadow: var(--clay-timbul); }
.subnav a[aria-current="true"] { background: #0b1d2e; color: #fff; box-shadow: var(--clay-gelap); }
.testi-geser button { border: 0; background: var(--cl-surface); box-shadow: var(--clay-timbul); }
.testi-geser button:hover { background: #0b1d2e; color: #fff; box-shadow: var(--clay-gelap); }
.testi-geser button:active { box-shadow: var(--clay-tekan); }
.melayang-wa { border: 0; background: var(--cl-surface-hi); box-shadow: var(--clay-timbul), 0 14px 24px -10px rgba(8, 24, 40, 0.5); }
.melayang-daftar { box-shadow: var(--clay-gelap); }
.sosial a { border: 0; background: rgba(255, 255, 255, 0.08); box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.2), inset -3px -4px 8px rgba(8, 24, 40, 0.5); }
.lb-btn { border: 0; background: rgba(255, 255, 255, 0.1); box-shadow: inset 2px 3px 5px rgba(255, 255, 255, 0.28), inset -3px -5px 10px rgba(8, 24, 40, 0.5), 8px 10px 18px -8px #0b1d2e; }
.toast { background: #0b1d2e; border-radius: 999px; box-shadow: var(--clay-gelap); }

/* ---------- Isian: lekuk ke dalam ---------- */
.field input, .field textarea, .field select, .cari input,
.fl input, .fl textarea, .fl select, .login-panel .input {
  background-color: var(--cl-well); border: 1px solid transparent; border-radius: 16px; box-shadow: var(--clay-lekuk);
}
.field input:hover, .field textarea:hover, .field select:hover, .cari input:hover { background-color: #d8d8df; }
.field input:focus, .field textarea:focus, .field select:focus, .cari input:focus,
.fl input:focus, .fl textarea:focus, .fl select:focus, .login-panel .input:focus {
  background-color: var(--cl-surface-hi); border-color: #0b1d2e; box-shadow: var(--clay-lekuk), 0 0 0 3px rgba(8, 24, 40, 0.16);
}
.is-invalid input, .is-invalid textarea, .is-invalid select { background-color: var(--df-salah-latar, #fbefee); border-color: var(--df-salah, #b3261e); }
.login-eye { border: 0; background: var(--cl-surface); border-radius: 14px; box-shadow: var(--clay-timbul); }

/* ---------- Dialog ---------- */
.login-dlg, dialog.artikel {
  background: var(--cl-surface); border-radius: 32px;
  box-shadow: var(--clay-timbul), 0 34px 70px -24px rgba(8, 24, 40, 0.55);
}
.login-tabs { margin: 14px 18px 0; padding: 6px; border: 0; border-radius: 20px; background: var(--cl-well); box-shadow: var(--clay-lekuk); }
.login-tab { border: 0; border-radius: 15px; }
.login-tab.is-active { background: var(--cl-surface-hi); color: var(--tinta); box-shadow: var(--clay-timbul); }
.login-dlg-x { background: var(--cl-surface); box-shadow: var(--clay-timbul); border-radius: 50%; }
.login-dlg-x:active { box-shadow: var(--clay-tekan); }
.artikel-tutup { border-radius: 50%; box-shadow: var(--clay-timbul); }
.kartu-status { background: var(--cl-surface); }
.kartu-status-catatan { background: var(--cl-well); }
.kartu-status-tutup { border-radius: 14px; }

/* ---------- Halaman Daftar Online ---------- */
.df-intro, .daftar-status { border-left: 0; }
.daftar-status.gagal { background: #fbefee; }
.df-form { padding: 26px 20px 22px; }
.df-steps::before { height: 6px; top: 14px; border-radius: 6px; background: var(--cl-well); box-shadow: var(--clay-lekuk); }
.df-steps::after { height: 6px; top: 14px; border-radius: 6px; background: #0b1d2e; }
.df-dot { border: 0; background: var(--cl-surface); box-shadow: var(--clay-timbul); }
.df-steps li.is-current .df-dot { background: #0b1d2e; color: #fff; box-shadow: var(--clay-gelap); }
.df-steps li.is-done .df-dot { background: var(--cl-surface-hi); color: #0b1d2e; box-shadow: var(--clay-timbul); }
.langkah li::before { box-shadow: var(--clay-gelap); }
.daftar-tahun { border: 0; background: var(--cl-surface); box-shadow: var(--clay-timbul); }

/* ---------- Tanpa efek biru saat disentuh/ditekan (semua halaman) ---------- */
html, body, *, *::before, *::after { -webkit-tap-highlight-color: rgba(8, 24, 40, 0); }
button, a, summary, label, select, [role="button"], [role="tab"], .btn, .tab, .chip, .seg, .nav-btn {
  -webkit-tap-highlight-color: rgba(8, 24, 40, 0); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
button:focus:not(:focus-visible), a:focus:not(:focus-visible), summary:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible) { outline: none; }
::selection { background: #0b1d2e; color: #fff; }
input, textarea, select, [contenteditable] { -webkit-user-select: text; user-select: text; }