/* Dasar tampilan "Langit Dongeng": langit malam, krem hangat, tombol empuk dengan bayangan keras.
   Dipakai semua halaman. */
@font-face {
  font-family: "Fredoka";
  src: url("/assets/fonts/fredoka-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700; font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 1000; font-display: swap;
}
@font-face {
  font-family: "Gochi Hand";
  src: url("/assets/fonts/gochi-hand-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}

:root {
  /* langit */
  --malam: #141E42;
  --malam-2: #1E2C5E;
  --malam-3: #26356E;
  --dalam: #0D1533;
  /* hangat */
  --krem: #FFF3D6;
  --kertas: #FFF7E6;
  --bulan: #FBEAB8;
  --matahari: #FFD45C;
  --koral: #FF6B57;
  --pipi: #FF8C7A;
  --mint: #8FE3C8;
  --ungu: #8C6BFF;
  --ungu-tua: #6B4EE6;
  --tinta: #1B2346;
  --kabut: #A9B0D6;          /* teks redup di atas langit (kontras 7.7:1) */
  /* bentuk */
  --bayang: 6px 8px 0 rgba(3,5,18,.45);
  --bayang-kecil: 3px 4px 0 rgba(3,5,18,.45);
  --bayang-besar: 9px 12px 0 rgba(3,5,18,.5);
  --radius: 20px;
  --pop: cubic-bezier(.34,1.56,.64,1);
  /* huruf */
  --font-judul: "Fredoka", "Baloo 2", system-ui, sans-serif;
  --font-teks: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-tangan: "Gochi Hand", "Comic Sans MS", cursive;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #141E42; }   /* tidak ada kilatan putih saat pindah halaman */
body {
  margin: 0;
  color: var(--krem);
  font: 600 16px/1.6 var(--font-teks);
  background: var(--malam);
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,243,214,.7), transparent),
    radial-gradient(1px 1px at 78% 12%, rgba(255,243,214,.6), transparent),
    radial-gradient(1.5px 1.5px at 62% 44%, rgba(255,243,214,.45), transparent),
    radial-gradient(1px 1px at 28% 72%, rgba(255,243,214,.5), transparent),
    radial-gradient(1.5px 1.5px at 90% 80%, rgba(255,243,214,.5), transparent),
    radial-gradient(1px 1px at 45% 92%, rgba(255,243,214,.4), transparent),
    radial-gradient(120% 70% at 50% 0%, var(--malam-3) 0%, var(--malam) 48%, var(--dalam) 100%);
  background-attachment: fixed;
}
h1, h2, h3 { font-family: var(--font-judul); font-weight: 600; line-height: 1.15; margin: 0; }
a { color: var(--matahari); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--matahari); outline-offset: 3px; border-radius: 12px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tangan { font-family: var(--font-tangan); font-weight: 400; }
.stabilo { background: linear-gradient(transparent 52%, var(--matahari) 52%, var(--matahari) 92%, transparent 92%); color: inherit; padding: 0 .15em; }

.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-solid { fill: currentColor; stroke: none; }

/* Tombol empuk: ditekan = turun ke arah bayangannya */
.btn {
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0;
  font: 600 17px var(--font-judul); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--bayang);
  transition: transform .2s var(--pop), box-shadow .2s var(--pop), background-color .2s ease;
}
.btn:hover { transform: translate(-1px, -2px); box-shadow: 8px 10px 0 rgba(3,5,18,.45); }
.btn:active { transform: translate(4px, 6px); box-shadow: 1px 1px 0 rgba(3,5,18,.45); transition-duration: .06s; }
.btn-matahari { background: var(--matahari); color: var(--tinta); }
.btn-krem { background: var(--krem); color: var(--tinta); }
.btn-garis { background: transparent; color: var(--krem); box-shadow: inset 0 0 0 2.5px var(--krem); }
.btn-garis:hover, .btn-garis:active { box-shadow: inset 0 0 0 2.5px var(--matahari); color: var(--matahari); transform: none; }

.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; flex: none; text-decoration: none; cursor: pointer;
  display: inline-grid; place-items: center;
  background: var(--malam-2); color: var(--krem); box-shadow: var(--bayang-kecil);
  transition: transform .2s var(--pop), box-shadow .2s var(--pop), background-color .2s ease, color .2s ease;
}
.icon-btn:hover { transform: translate(-1px, -2px) rotate(-6deg); }
.icon-btn:active { transform: translate(3px, 4px); box-shadow: 0 0 0 rgba(3,5,18,.45); transition-duration: .06s; }
.icon-btn[aria-pressed="true"] { background: var(--matahari); color: var(--tinta); }
.icon-btn[aria-pressed="false"] { color: var(--kabut); }
.icon-btn:disabled { opacity: .45; cursor: default; transform: none; }

/* Bintang berkelip & bintang jatuh (dekorasi) */
.langit { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.kilau { position: absolute; width: var(--u, 16px); height: var(--u, 16px); color: var(--bulan); animation: kelip var(--d, 3.2s) ease-in-out infinite; animation-delay: var(--t, 0s); }
@keyframes kelip { 0%, 100% { opacity: .25; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.bintang-jatuh { position: absolute; top: 12%; left: -10%; width: 120px; height: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,243,214,.9)); transform: rotate(18deg);
  animation: jatuh 11s ease-in 4s infinite; }
@keyframes jatuh { 0% { opacity: 0; transform: translate(0, 0) rotate(18deg); } 3% { opacity: 1; } 9% { opacity: 0; transform: translate(70vw, 23vw) rotate(18deg); } 100% { opacity: 0; } }

@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.skeleton {
  background: linear-gradient(100deg, var(--malam-2) 30%, var(--malam-3) 50%, var(--malam-2) 70%);
  background-size: 300% 100%; animation: shimmer 1.6s infinite linear;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .bintang-jatuh { display: none; }
}