/* ==========================================================================
   Buku Tamu Digital — Kemenag Kota Palembang
   dasar.css: token warna & huruf, normalisasi, latar cahaya, tombol, isian,
   notifikasi, dialog, lambang 3D, running text.
   Tema "Cahaya Madani": putih bersih, hijau & emas Kementerian Agama sebagai
   warna utama, ditemani tujuh warna menyala yang bernapas pelan di latar.
   Huruf: satu keluarga, Plus Jakarta Sans (Tokotype, Indonesia) untuk judul dan teks.
   ========================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* permukaan */
  --latar: #F4FAF6;
  --permukaan: #FFFFFF;
  --permukaan-2: #F7FBF8;
  --permukaan-3: #EDF6F0;

  /* tinta (teks) — kontras terhadap putih: 15,3 / 7,6 / 4,8 */
  --tinta: #0F2A1E;
  --tinta-2: #3D5A4C;
  --tinta-3: #5E786C;

  /* warna utama Kementerian Agama */
  --hijau: #00A651;
  --hijau-tua: #007A3D;
  --hijau-terang: #2FE38C;
  --emas: #F2B300;
  --emas-tua: #9A6700;
  --emas-terang: #FFD84D;

  /* tujuh warna menyala */
  --w-hijau: #00C364;
  --w-emas: #FFC400;
  --w-tosca: #00C2B2;
  --w-langit: #1EA4FF;
  --w-ungu: #8B6CFF;
  --w-mawar: #FF4F8E;
  --w-jingga: #FF8A1F;

  /* warna fungsi */
  --biru: #1D63D8;
  --mawar: #D6336C;
  --mawar-tua: #B4234F;
  --jingga: #E8590C;
  --tosca: #00A99C;
  --ungu: #6E50E8;

  /* garis & kaca */
  --garis: rgba(15, 42, 30, .09);
  --garis-2: rgba(15, 42, 30, .16);
  --garis-3: rgba(15, 42, 30, .26);
  --kaca: rgba(255, 255, 255, .72);
  --kaca-tebal: rgba(255, 255, 255, .9);

  /* nama lama (dipertahankan agar gaya lama tetap berwarna terang) */
  --malam: var(--latar);
  --malam-2: var(--permukaan);
  --malam-3: var(--permukaan-2);
  --malam-4: var(--permukaan-3);
  --gading: var(--tinta);
  --kabut: var(--tinta-2);
  --kabut-2: var(--tinta-3);
  --zamrud: var(--hijau);
  --zamrud-tua: var(--hijau-tua);
  --safir: var(--biru);
  --bara: var(--jingga);

  /* huruf */
  /* judul memakai keluarga yang sama dengan teks (bobot 800, jarak huruf rapat), tanpa huruf hias */
  --font-judul: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-tampil: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-teks: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-1: .8125rem;
  --fs-2: .9375rem;
  --fs-3: 1.0625rem;
  --fs-4: 1.3125rem;
  --fs-5: 1.625rem;
  --fs-6: 2.0625rem;
  --fs-7: 2.5625rem;
  --fs-8: 3.25rem;
  --fs-9: 4.125rem;

  /* bentuk, bayang, gerak */
  --r-kecil: 10px;
  --r-sedang: 16px;
  --r-besar: 24px;
  --bayang: 0 22px 50px -12px rgba(12, 70, 42, .22), 0 2px 6px rgba(12, 70, 42, .06);
  --bayang-kecil: 0 8px 22px -8px rgba(12, 70, 42, .2), 0 1px 3px rgba(12, 70, 42, .06);
  --pendar-hijau: 0 12px 30px -8px rgba(0, 166, 81, .55);
  --pendar-emas: 0 12px 30px -8px rgba(242, 179, 0, .6);
  --t-cepat: 160ms;
  --t: 280ms;
  --kurva: cubic-bezier(.2, .7, .2, 1);
  --aman-bawah: env(safe-area-inset-bottom, 0px);
  --aman-atas: env(safe-area-inset-top, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--latar);
  color: var(--tinta);
  font: 400 1rem/1.6 var(--font-teks);
  scroll-behavior: smooth;
}
body {
  isolation: isolate;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--latar);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 700; text-wrap: balance; color: var(--tinta); }
p { margin: 0; }
p, li { text-wrap: pretty; }
a { color: var(--hijau-tua); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--hijau); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code, kbd { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em; background: var(--permukaan-3); color: var(--tinta); padding: .1em .4em; border-radius: 6px; }
::selection { background: rgba(0, 166, 81, .2); color: var(--tinta); }

:focus-visible { outline: 2px solid var(--hijau); outline-offset: 3px; border-radius: 6px; }

.ikon { width: 1.25em; height: 1.25em; flex: none; }
.angka { font-variant-numeric: tabular-nums; }
.tampil { font-family: var(--font-tampil); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lewati {
  position: fixed; left: 12px; top: -60px; z-index: 1000;
  background: var(--hijau-tua); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700;
  transition: top var(--t-cepat) var(--kurva);
}
.lewati:focus { top: 12px; color: #fff; }

/* ---------------------------------------------------------------- latar cahaya: tujuh warna yang bernapas pelan */
.aurora {
  position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, #FFFFFF 0%, rgba(255, 255, 255, 0) 60%),
    var(--latar);
  contain: strict;
}
.aurora i {
  position: absolute; width: 58vmax; height: 58vmax; border-radius: 50%;
  background: radial-gradient(closest-side, var(--c) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: var(--o, .32);
  will-change: transform;
  animation: aurora-gerak var(--d, 34s) ease-in-out infinite alternate;
}
.aurora i:nth-child(1) { --c: rgba(0, 195, 100, .55); --d: 38s; left: -18vmax; top: -22vmax; }
.aurora i:nth-child(2) { --c: rgba(255, 196, 0, .55); --d: 31s; right: -20vmax; top: -16vmax; animation-delay: -8s; }
.aurora i:nth-child(3) { --c: rgba(0, 194, 178, .5); --d: 42s; left: 18vw; top: 26vh; --o: .26; animation-delay: -14s; }
.aurora i:nth-child(4) { --c: rgba(30, 164, 255, .45); --d: 36s; right: -12vmax; bottom: -24vmax; --o: .24; animation-delay: -5s; }
.aurora i:nth-child(5) { --c: rgba(139, 108, 255, .4); --d: 44s; left: -16vmax; bottom: -26vmax; --o: .2; animation-delay: -20s; }
.aurora i:nth-child(6) { --c: rgba(255, 79, 142, .32); --d: 40s; left: 52vw; top: -30vmax; --o: .16; animation-delay: -11s; }
.aurora i:nth-child(7) { --c: rgba(255, 138, 31, .36); --d: 33s; right: 22vw; bottom: -34vmax; --o: .18; animation-delay: -17s; }
.aurora::after {
  content: ""; position: absolute; inset: 0;
  background: url("../img/songket.svg") 0 0 / 64px 64px;
  opacity: .04;
}
@keyframes aurora-gerak {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); }
  100% { transform: translate3d(-4vmax, 7vmax, 0) scale(.94); }
}
.hemat-grafis .aurora i { animation: none; }
.hemat-grafis .aurora { display: none; }
.hemat-grafis .tombol--kilau::after { animation: none; }

/* ---------------------------------------------------------------- tombol */
.tombol {
  --tb-bg: var(--permukaan);
  --tb-fg: var(--tinta);
  --tb-garis: var(--garis-2);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 44px; padding: .65em 1.15em;
  border: 1px solid var(--tb-garis); border-radius: 12px;
  background: var(--tb-bg); color: var(--tb-fg);
  font-weight: 650; font-size: var(--fs-2); line-height: 1.2; letter-spacing: .005em;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--t-cepat) var(--kurva), box-shadow var(--t) var(--kurva), background var(--t) var(--kurva), border-color var(--t) var(--kurva), color var(--t);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.tombol:hover { color: var(--tb-fg); border-color: var(--hijau); }
.tombol:active { transform: translateY(1px) scale(.99); }
.tombol[disabled], .tombol[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.tombol .ikon { width: 1.15em; height: 1.15em; }

/* tombol utama: hijau Kemenag bercahaya dengan garis emas tipis */
.tombol--emas {
  --tb-fg: #FFFFFF;
  --tb-garis: rgba(0, 122, 61, .9);
  background: linear-gradient(180deg, #19C26D 0%, #00A651 52%, #008C44 100%);
  box-shadow: inset 0 1px 0 rgba(255, 233, 160, .75), inset 0 -2px 0 rgba(0, 70, 35, .25), var(--pendar-hijau);
  text-shadow: 0 1px 0 rgba(0, 70, 35, .3);
}
.tombol--emas:hover { --tb-fg: #fff; border-color: #00602F; box-shadow: inset 0 1px 0 rgba(255, 233, 160, .85), inset 0 -2px 0 rgba(0, 70, 35, .25), 0 16px 34px -8px rgba(0, 166, 81, .7), 0 0 0 4px rgba(242, 179, 0, .18); }
.tombol--zamrud {
  --tb-fg: #FFFFFF;
  --tb-garis: rgba(0, 128, 118, .9);
  background: linear-gradient(180deg, #1FD3C2 0%, #00B3A4 55%, #00968A 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 12px 26px -8px rgba(0, 179, 164, .6);
  text-shadow: 0 1px 0 rgba(0, 60, 55, .3);
}
.tombol--zamrud:hover { --tb-fg: #fff; border-color: #00776E; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 16px 32px -8px rgba(0, 179, 164, .75); }
.tombol--garis { --tb-bg: var(--permukaan); --tb-fg: var(--hijau-tua); --tb-garis: rgba(0, 166, 81, .45); box-shadow: 0 1px 2px rgba(12, 70, 42, .06); }
.tombol--garis:hover { --tb-bg: #F0FBF4; border-color: var(--hijau); box-shadow: 0 10px 24px -10px rgba(0, 166, 81, .5); }
.tombol--hantu { --tb-bg: transparent; --tb-garis: transparent; --tb-fg: var(--tinta-2); }
.tombol--hantu:hover { --tb-bg: rgba(0, 166, 81, .08); --tb-fg: var(--hijau-tua); border-color: transparent; }
.tombol--bahaya { --tb-bg: #FFF1F5; --tb-fg: var(--mawar-tua); --tb-garis: rgba(214, 51, 108, .45); }
.tombol--bahaya:hover { --tb-bg: #FFE3EC; border-color: var(--mawar); box-shadow: 0 10px 24px -12px rgba(214, 51, 108, .6); }
.tombol--kaca {
  --tb-bg: rgba(255, 255, 255, .78); --tb-fg: var(--hijau-tua); --tb-garis: rgba(0, 166, 81, .35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 #fff, 0 10px 26px -12px rgba(12, 70, 42, .35);
}
.tombol--kaca:hover { --tb-bg: #fff; border-color: var(--hijau); box-shadow: inset 0 1px 0 #fff, 0 14px 30px -12px rgba(0, 166, 81, .55); }
.tombol--kilau { position: relative; overflow: hidden; isolation: isolate; }
.tombol--kilau::after {
  content: ""; position: absolute; z-index: -1; top: -30%; bottom: -30%; left: -45%; width: 32%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 246, 204, .75), rgba(255, 255, 255, 0));
  transform: translateX(0) skewX(-18deg); animation: kilau-tombol 5.5s 3s ease-in-out infinite;
}
@keyframes kilau-tombol { 0% { transform: translateX(0) skewX(-18deg); } 22%, 100% { transform: translateX(520%) skewX(-18deg); } }
.tombol--besar { min-height: 56px; padding: .8em 1.6em; font-size: var(--fs-3); border-radius: 16px; }
.tombol--kecil { min-height: 34px; padding: .4em .8em; font-size: var(--fs-1); border-radius: 9px; }
.tombol--ikon { padding: 0; width: 40px; min-height: 40px; }
.tombol--ikon.tombol--kecil { width: 34px; }
.tombol--blok { width: 100%; }

/* ---------------------------------------------------------------- isian formulir */
.isian { display: grid; gap: 6px; min-width: 0; align-content: start; }
.isian > span:first-child, .isian__label {
  font-size: var(--fs-2); font-weight: 650; color: var(--tinta);
}
.isian small, .isian__bantu { font-size: var(--fs-1); color: var(--tinta-3); line-height: 1.45; }
.isian__wajib { color: var(--mawar); margin-left: 2px; }
.isian__opsional { color: var(--tinta-3); font-weight: 500; font-size: var(--fs-1); margin-left: 6px; }

.input, .isian input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), .isian select, .isian textarea {
  width: 100%; min-height: 48px;
  padding: .7em .95em;
  background: var(--permukaan);
  border: 1px solid var(--garis-2);
  border-radius: 12px;
  color: var(--tinta);
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: inset 0 1px 2px rgba(12, 70, 42, .05);
  transition: border-color var(--t-cepat), box-shadow var(--t), background var(--t);
  -webkit-appearance: none; appearance: none;
}
.isian textarea { min-height: 110px; resize: vertical; }
.isian select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007A3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  padding-right: 40px;
}
.isian select option { background: #fff; color: var(--tinta); }
.input::placeholder, .isian input::placeholder, .isian textarea::placeholder { color: #8FA49A; }
.input:hover, .isian input:hover, .isian select:hover, .isian textarea:hover { border-color: rgba(0, 166, 81, .45); }
.input:focus, .isian input:focus, .isian select:focus, .isian textarea:focus {
  outline: none; border-color: var(--hijau);
  box-shadow: 0 0 0 4px rgba(0, 166, 81, .15), 0 8px 22px -12px rgba(0, 166, 81, .5);
  background: #fff;
}
.isian--galat input, .isian--galat select, .isian--galat textarea { border-color: var(--mawar); box-shadow: 0 0 0 4px rgba(214, 51, 108, .12); }
.isian__galat { display: flex; gap: 6px; align-items: flex-start; color: var(--mawar-tua); font-size: var(--fs-1); font-weight: 650; }
.isian__galat .ikon { width: 16px; height: 16px; margin-top: 2px; }
input[type="date"], input[type="time"] { color-scheme: light; }

/* kotak centang & radio */
.centang { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: var(--fs-2); line-height: 1.5; color: var(--tinta-2); }
.centang input {
  -webkit-appearance: none; appearance: none; flex: none;
  width: 22px; height: 22px; margin: 1px 0 0;
  border: 1.5px solid var(--garis-3); border-radius: 7px; background: #fff;
  display: grid; place-content: center; transition: background var(--t-cepat), border-color var(--t-cepat), box-shadow var(--t-cepat);
}
.centang input::before {
  content: ""; width: 12px; height: 12px; transform: scale(0); transition: transform var(--t-cepat) var(--kurva);
  background: #fff; clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%);
}
.centang input:checked { background: var(--hijau); border-color: var(--hijau); box-shadow: 0 6px 14px -6px rgba(0, 166, 81, .8); }
.centang input:checked::before { transform: scale(1); }

/* sakelar */
.sakelar { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 600; }
.sakelar input { position: absolute; opacity: 0; pointer-events: none; }
.sakelar__jalur { width: 46px; height: 26px; border-radius: 99px; background: #DCE7E0; border: 1px solid var(--garis-2); position: relative; transition: background var(--t), border-color var(--t); flex: none; }
.sakelar__jalur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(12, 70, 42, .3); transition: transform var(--t) var(--kurva); }
.sakelar input:checked + .sakelar__jalur { background: var(--hijau); border-color: var(--hijau-tua); box-shadow: 0 6px 16px -6px rgba(0, 166, 81, .8); }
.sakelar input:checked + .sakelar__jalur::after { transform: translateX(20px); }
.sakelar input:focus-visible + .sakelar__jalur { outline: 2px solid var(--hijau); outline-offset: 3px; }

/* pilihan cip (radio bergaya tombol) */
.cip-grup { display: flex; flex-wrap: wrap; gap: 8px; }
.cip { position: relative; }
.cip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cip span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: .55em 1em;
  border: 1px solid var(--garis-2); border-radius: 12px; background: #fff;
  font-size: var(--fs-2); font-weight: 600; color: var(--tinta-2);
  box-shadow: 0 1px 2px rgba(12, 70, 42, .05);
  transition: all var(--t-cepat) var(--kurva);
}
.cip input:hover + span { border-color: rgba(0, 166, 81, .5); color: var(--tinta); }
.cip input:checked + span { background: #EAFBF1; border-color: var(--hijau); color: var(--hijau-tua); box-shadow: 0 0 0 1px var(--hijau), 0 8px 20px -10px rgba(0, 166, 81, .7); }
.cip input:focus-visible + span { outline: 2px solid var(--hijau); outline-offset: 3px; }

/* ---------------------------------------------------------------- pesan kilat & toast */
.kilat-wadah { display: grid; gap: 10px; margin-bottom: 18px; }
.kilat {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 14px; border: 1px solid var(--garis-2);
  background: #fff; font-size: var(--fs-2); color: var(--tinta);
  box-shadow: var(--bayang-kecil);
}
.kilat > .ikon { margin-top: 2px; }
.kilat p { flex: 1; }
.kilat--sukses { border-color: rgba(0, 166, 81, .4); background: linear-gradient(90deg, #E9FAF0, #fff 70%); }
.kilat--sukses > .ikon { color: var(--hijau); }
.kilat--galat { border-color: rgba(214, 51, 108, .4); background: linear-gradient(90deg, #FFEEF3, #fff 70%); }
.kilat--galat > .ikon { color: var(--mawar); }
.kilat--info { border-color: rgba(29, 99, 216, .3); background: linear-gradient(90deg, #EEF4FF, #fff 70%); }
.kilat--info > .ikon { color: var(--biru); }
.kilat--peringatan { border-color: rgba(242, 179, 0, .5); background: linear-gradient(90deg, #FFF7DD, #fff 70%); }
.kilat--peringatan > .ikon { color: var(--emas-tua); }
.kilat__tutup { background: none; border: 0; padding: 2px; color: var(--tinta-3); border-radius: 8px; }
.kilat__tutup:hover { color: var(--tinta); }

.toast-wadah {
  position: fixed; z-index: 900; right: 16px; bottom: calc(16px + var(--aman-bawah));
  display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 14px; background: #fff; color: var(--tinta);
  border: 1px solid var(--garis-2); box-shadow: var(--bayang);
  animation: toast-masuk .32s var(--kurva) both;
}
.toast.keluar { animation: toast-keluar .24s ease-in both; }
.toast--sukses { border-color: rgba(0, 166, 81, .45); }
.toast--sukses .ikon { color: var(--hijau); }
.toast--galat { border-color: rgba(214, 51, 108, .45); }
.toast--galat .ikon { color: var(--mawar); }
.toast--info .ikon { color: var(--biru); }
.toast b { display: block; font-size: var(--fs-2); }
.toast p { font-size: var(--fs-1); color: var(--tinta-2); }
@keyframes toast-masuk { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes toast-keluar { to { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- lencana status */
.status {
  --st: var(--tinta-2);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: .28em .75em .28em .6em; border-radius: 99px;
  font-size: var(--fs-1); font-weight: 700; letter-spacing: .01em;
  color: var(--st);
  background: rgba(15, 42, 30, .05); border: 1px solid rgba(15, 42, 30, .14);
  background: color-mix(in srgb, var(--st) 10%, #fff);
  border-color: color-mix(in srgb, var(--st) 35%, transparent);
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--st); box-shadow: 0 0 8px var(--st); }
.status--emas { --st: #A16A00; }
.status--safir { --st: var(--biru); }
.status--zamrud { --st: var(--hijau-tua); }
.status--bara { --st: #C2410C; }
.status--kabut { --st: #5B6B64; }

/* ---------------------------------------------------------------- dialog */
.dialog {
  border: 1px solid var(--garis-2); border-radius: 20px; padding: 0;
  background: #fff; color: var(--tinta); width: min(460px, calc(100vw - 32px));
  box-shadow: 0 30px 80px -20px rgba(12, 70, 42, .45), 0 0 0 4px rgba(0, 166, 81, .06);
}
.dialog::backdrop { background: rgba(15, 42, 30, .32); backdrop-filter: blur(4px); }
.dialog[open] { animation: dialog-masuk .26s var(--kurva); }
@keyframes dialog-masuk { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.dialog__isi { padding: 24px; display: grid; gap: 12px; }
.dialog__isi h2 { font-size: var(--fs-4); }
.dialog__isi p { color: var(--tinta-2); }
.dialog__aksi { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* ---------------------------------------------------------------- lambang Kemenag 3D (koin emas berlapis) */
.lambang {
  position: relative; width: 120px; aspect-ratio: 330 / 296;
  transform-style: preserve-3d;
  pointer-events: none;
}
.lambang__koin { position: absolute; inset: 0; transform-style: preserve-3d; animation: koin-goyang 11s ease-in-out infinite; }
.lambang__tebal i {
  position: absolute; inset: 0;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  background: linear-gradient(140deg, #8a5a08 0%, #f2b300 38%, #fff3c4 50%, #c98f12 62%, #6d4605 100%);
  transform: translateZ(calc(var(--i) * -1.15px));
  filter: brightness(calc(1 - var(--i) * .045));
}
.lambang__muka { position: absolute; inset: 0; transform: translateZ(.6px); }
.lambang__muka img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 1px rgba(255, 216, 77, .9)) drop-shadow(0 10px 14px rgba(0, 90, 45, .25)); }
.lambang__kilau {
  position: absolute; inset: 0;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 38%, rgba(255, 252, 235, .8) 50%, rgba(255, 255, 255, 0) 62%) 0 0 / 300% 100%;
  mix-blend-mode: soft-light;
  animation: kilau-lambang 6.5s ease-in-out infinite;
}
.lambang__pendar {
  position: absolute; inset: -70%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 195, 100, .32), rgba(255, 196, 0, .2) 48%, rgba(255, 255, 255, 0) 72%);
  transform: translateZ(-40px);
  animation: napas 4.6s ease-in-out infinite;
}
.lambang__cincin {
  position: absolute; left: 50%; top: 52%; width: 185%; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid rgba(242, 179, 0, .55);
  box-shadow: 0 0 14px rgba(242, 179, 0, .25), inset 0 0 14px rgba(242, 179, 0, .15);
  transform: translate(-50%, -50%) rotateX(76deg) rotateZ(0deg);
  transform-style: preserve-3d;
  animation: orbit 16s linear infinite;
}
.lambang__cincin--b { width: 150%; border-color: rgba(0, 166, 81, .5); animation-duration: 11s; animation-direction: reverse; transform: translate(-50%, -50%) rotateX(70deg) rotateY(-16deg); }
.lambang__cincin i {
  position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: #FFD84D; box-shadow: 0 0 10px 3px rgba(255, 196, 0, .8);
}
.lambang__cincin--b i { background: #2FE38C; box-shadow: 0 0 10px 3px rgba(0, 195, 100, .75); }
@keyframes koin-goyang {
  0%, 100% { transform: rotateY(-24deg) rotateX(7deg) translateY(0); }
  50% { transform: rotateY(24deg) rotateX(-5deg) translateY(-6px); }
}
@keyframes kilau-lambang { 0%, 15% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }
@keyframes orbit { to { transform: translate(-50%, -50%) rotateX(76deg) rotateZ(360deg); } }
.lambang__cincin--b { animation-name: orbit-b; }
@keyframes orbit-b { from { transform: translate(-50%, -50%) rotateX(70deg) rotateY(-16deg) rotateZ(0deg); } to { transform: translate(-50%, -50%) rotateX(70deg) rotateY(-16deg) rotateZ(360deg); } }

@keyframes napas { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* logo datar di kepala halaman, kartu, kop, dan poster: kotak tetap berasio lambang Kemenag;
   logo unggahan dengan bentuk lain (persegi, tegak, melebar) tetap utuh di tengah kotaknya */
.rel__merek img, .bilah__merek img, .kepala-isi__merek img, .tiket__kepala img, .layar__merek img,
.kc-kepala img, .kop img, .poster__kop img { aspect-ratio: 330 / 296; height: auto; object-fit: contain; }

/* ---------------------------------------------------------------- lambang polos (dahulu medali)
   Lambang resmi tampil apa adanya di tengah kotak perseginya, tanpa cakram, cincin, atau pendar.
   Bayangan lembut menjaga keterbacaan di atas video. */
.medali {
  position: relative; width: 120px; aspect-ratio: 1; flex: none;
  display: grid; place-items: center;
  pointer-events: none;
}
.medali__logo {
  width: 86%; height: auto; aspect-ratio: 330 / 296; object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(6, 30, 20, .22)) drop-shadow(0 16px 26px rgba(6, 30, 20, .3));
}

/* ---------------------------------------------------------------- kop layar
   Susunan kop surat resmi: lambang + nama induk (kapital kecil, seperti kop laporan cetak) + nama kantor,
   lalu garis kop ganda tebal-tipis. Garis ini satu-satunya ornamen identitas di layar. */
.kop-layar { display: grid; gap: 14px; }
.kop-layar__baris { display: flex; align-items: center; gap: 14px; }
.kop-layar__lambang { flex: none; width: 58px; height: auto; aspect-ratio: 330 / 296; object-fit: contain; }
.kop-layar__nama { display: grid; gap: 3px; margin: 0; line-height: 1.18; }
.kop-layar__induk { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3); }
.kop-layar__kantor { font-size: 1.04rem; font-weight: 800; letter-spacing: -.012em; color: var(--hijau-tua); }
.kop-layar--gelap .kop-layar__induk { color: rgba(255, 255, 255, .74); }
.kop-layar--gelap .kop-layar__kantor { color: #fff; }
.garis-kop {
  display: block; height: 6px; width: 100%;
  border-top: 3px solid currentColor; border-bottom: 1px solid currentColor;
  color: var(--hijau-tua);
}
.kop-layar--gelap .garis-kop { color: #E9B91F; }

@media (prefers-reduced-motion: reduce) {
  .lambang__koin { animation: none; transform: rotateY(-14deg); }
}
/* perangkat berdaya rendah: lambang & medali diam, tanpa lapisan tebal dan kilau berjalan */
.hemat-grafis .lambang__koin, .hemat-grafis .lambang__cincin, .hemat-grafis .lambang__kilau, .hemat-grafis .lambang__pendar { animation: none; }
.hemat-grafis .lambang__tebal, .hemat-grafis .lambang__cincin, .hemat-grafis .lambang__kilau { display: none; }

/* ---------------------------------------------------------------- ornamen */
.bintang8 { width: 14px; height: 14px; color: var(--emas); flex: none; filter: drop-shadow(0 0 4px rgba(242, 179, 0, .55)); }

/* layar sentuh: hindari zoom otomatis iOS */
@media (max-width: 900px) {
  .input, .isian input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), .isian select, .isian textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- tombol mata kata sandi */
.mata-sandi { position: relative; display: block; }
.mata-sandi input { padding-right: 48px !important; }
.mata-sandi__tombol {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 10px; color: var(--tinta-3);
}
.mata-sandi__tombol:hover, .mata-sandi__tombol.aktif { color: var(--hijau-tua); background: rgba(0, 166, 81, .08); }

/* ---------------------------------------------------------------- pita running text (dipakai beranda & layar) */
.pita-jalur { position: relative; overflow: hidden; min-width: 0; }
.pita {
  display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none;
  animation: pita-jalan var(--durasi, 40s) linear infinite;
  will-change: transform;
}
.pita-jalur:hover .pita { animation-play-state: paused; }
.pita-jalur--diam .pita { animation: none; width: auto; }
.pita-jalur--diam .pita__item { animation: pita-muncul .5s var(--kurva) both; white-space: normal; line-height: 1.3; }
/* mode diam (gerak dikurangi): pesan panjang dipotong rapi menjadi dua baris, tidak terpotong di tengah baris */
.pita-jalur--diam .pita__item > span:last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.pita-jalur--diam .pita__pisah { display: none; }
@keyframes pita-jalan { to { transform: translate3d(-50%, 0, 0); } }
@keyframes pita-muncul { from { opacity: 0; transform: translateY(6px); } }
.pita__item { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 0 4px; }
.pita__pisah { display: inline-flex; padding: 0 22px; }
.pita__label {
  font-size: .72em; font-weight: 800; letter-spacing: .04em; padding: .2em .6em; border-radius: 6px;
  background: #FFEDE4; color: #B23A06; border: 1px solid rgba(232, 89, 12, .4);
}
.pita__label--agenda { background: #E3F8EC; color: var(--hijau-tua); border-color: rgba(0, 166, 81, .4); }

/* pengukur kekuatan kata sandi (masuk, atur ulang, profil) */
.ukur-sandi { display: grid; gap: 6px; }
.ukur-sandi__jalur { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ukur-sandi__jalur i { height: 4px; border-radius: 4px; background: rgba(15, 42, 30, .1); transition: background var(--t); }
.ukur-sandi[data-tingkat="1"] i:nth-child(-n+1) { background: var(--mawar); }
.ukur-sandi[data-tingkat="2"] i:nth-child(-n+2) { background: var(--jingga); }
.ukur-sandi[data-tingkat="3"] i:nth-child(-n+3) { background: var(--emas); }
.ukur-sandi[data-tingkat="4"] i:nth-child(-n+4) { background: var(--hijau); }
.ukur-sandi small { color: var(--tinta-3); font-size: var(--fs-1); }