/* ArsipBelajar palette: navy carries hierarchy, sky blue marks focus, yellow marks important states. */
:root {
  color-scheme: light;
  --font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bg: #f1f5f9;
  --bg-gradient: none;
  --surface: #ffffff;
  --surface-hover: #f1f5f9;
  --text: #0c4a6e;
  --text-muted: #0369a1;
  --border: #cbd5e1;

  --primary: #0369a1;
  --primary-hover: #0c4a6e;
  --accent: #38bdf8;
  --sky-dark: #0284c7;
  --primary-light: #e0f2fe;
  --primary-border: var(--accent);

  --pastel-sky: #e0f2fe;
  --pastel-sky-text: #0c4a6e;
  --pastel-sky-border: #7dd3fc;
  --pastel-pink: #fef2f2;
  --pastel-pink-text: #991b1b;
  --pastel-pink-border: #fecaca;
  --pastel-mint: #f0f9ff;
  --pastel-mint-text: #0c4a6e;
  --pastel-mint-border: #bae6fd;
  --pastel-sand: #fef3c7;
  --pastel-sand-text: #78350f;
  --pastel-sand-border: #fbbf24;
  --pastel-lavender: #e0f2fe;
  --pastel-lavender-text: #0c4a6e;
  --pastel-lavender-border: #7dd3fc;

  --danger: #b91c1c;
  --danger-light: #fef2f2;
  --success: #166534;
  --success-light: #f0fdf4;
  --warning: #92400e;
  --warning-light: #fffbeb;

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 22px;

  --shadow-sm: 0 2px 8px rgba(12, 74, 110, 0.08);
  --shadow: 0 12px 32px -6px rgba(12, 74, 110, 0.12);
  --shadow-lg: 0 20px 42px -8px rgba(12, 74, 110, 0.18);
  --min-touch-target: 48px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #081b2a;
  --bg-gradient: none;
  --surface: #102a3a;
  --surface-hover: #15384b;
  --text: #f8fafc;
  --text-muted: #bae6fd;
  --border: rgba(125, 211, 252, 0.25);
  --primary: #7dd3fc;
  --primary-hover: #bae6fd;
  --accent: #38bdf8;
  --sky-dark: #0284c7;
  --primary-light: rgba(56, 189, 248, 0.16);
  --primary-border: #0284c7;
  --pastel-sky: #12384d; --pastel-sky-text: #bae6fd; --pastel-sky-border: #0284c7;
  --pastel-pink: #451a1a; --pastel-pink-text: #fecaca; --pastel-pink-border: #b91c1c;
  --pastel-mint: #12384d; --pastel-mint-text: #bae6fd; --pastel-mint-border: #0284c7;
  --pastel-sand: #422006; --pastel-sand-text: #fde68a; --pastel-sand-border: #a16207;
  --pastel-lavender: #12384d; --pastel-lavender-text: #bae6fd; --pastel-lavender-border: #0284c7;
  --danger: #f87171;
  --danger-light: #451a1a;
  --success: #86efac;
  --success-light: #12351f;
  --warning: #fbbf24;
  --warning-light: #422006;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 42px rgba(0, 0, 0, 0.65);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  min-height: 100vh;
  background-color: var(--bg);
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--primary); text-decoration: none; transition: color 0.15s ease; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; min-height: var(--min-touch-target); }
:focus-visible { outline: 2.5px solid var(--primary); outline-offset: 2.5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* --- Anime Pastel Seaside Background Scenery --- */
.seaside-bg { display: none; }
#app { position: relative; z-index: 1; }

/* Seaside Warm Sun & Halo */
.seaside-sun {
  position: absolute; top: -30px; right: 6%; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, #fffbeb 0%, #fef08a 35%, rgba(253, 224, 71, 0.35) 60%, transparent 80%);
  filter: blur(14px);
}
:root[data-theme="dark"] .seaside-sun {
  background: radial-gradient(circle, #e0f2fe 0%, #38bdf8 40%, rgba(14, 165, 233, 0.2) 65%, transparent 80%);
  filter: blur(18px);
}

/* Fluffy Anime Clouds */
.seaside-cloud {
  position: absolute; border-radius: 9999px; background: rgba(255, 255, 255, 0.65); filter: blur(3px);
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.7);
}
.cloud-1 { top: 7%; left: 8%; width: 160px; height: 42px; animation: floatCloud 28s ease-in-out infinite alternate; }
.cloud-2 { top: 16%; right: 20%; width: 220px; height: 54px; animation: floatCloud 36s ease-in-out infinite alternate-reverse; }
@keyframes floatCloud { 0% { transform: translateX(0); } 100% { transform: translateX(45px); } }

/* Seaside Seagulls */
.seaside-gull { position: absolute; color: rgba(2, 132, 199, 0.55); filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.8)); }
.gull-1 { top: 11%; left: 32%; width: 34px; height: 18px; animation: floatGull 9s ease-in-out infinite alternate; }
.gull-2 { top: 14%; left: 36%; width: 24px; height: 13px; animation: floatGull 11s ease-in-out infinite alternate-reverse; }
@keyframes floatGull { 0% { transform: translate(0, 0) rotate(-2deg); } 100% { transform: translate(25px, -12px) rotate(3deg); } }

/* Multi-layered Shoreline Waves & Beach Sand */
.seaside-waves { position: absolute; bottom: 0; left: 0; width: 100%; height: 44vh; min-height: 260px; max-height: 480px; }
.wave-layer { transition: fill 0.3s ease; }
.wave-ocean { fill: #7dd3fc; opacity: 0.6; animation: waveFlow 12s ease-in-out infinite alternate; }
.wave-tide { fill: #99f6e4; opacity: 0.65; animation: waveFlowAlt 9s ease-in-out infinite alternate; }
.wave-foam { fill: #ffffff; opacity: 0.8; animation: waveFlow 7s ease-in-out infinite alternate-reverse; }
.wave-sand { fill: #fde68a; opacity: 0.7; }

@keyframes waveFlow {
  0% { transform: translateY(0) scaleY(1); }
  100% { transform: translateY(-12px) scaleY(1.06); }
}
@keyframes waveFlowAlt {
  0% { transform: translateY(0) scaleX(1); }
  100% { transform: translateY(-16px) scaleX(1.03); }
}

/* Petals echo the reference image while transform-only motion stays lightweight. */
.sakura-drift { position: absolute; inset: 0; overflow: hidden; }
.sakura-petal {
  position: absolute; top: -8vh; left: var(--petal-left); width: var(--petal-size); height: var(--petal-size);
  color: var(--petal-color); opacity: 0.78;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.6));
  animation: sakuraFall var(--fall-duration) linear var(--fall-delay) infinite;
}
.sakura-petal path:first-child { fill: currentColor; }
.sakura-petal:nth-child(1) { --petal-left: 4%; --petal-size: 15px; --petal-color: #ef9dbb; --fall-duration: 22s; --fall-delay: -15s; --drift: 24px; --spin: 390deg; }
.sakura-petal:nth-child(2) { --petal-left: 13%; --petal-size: 19px; --petal-color: #f5b5cd; --fall-duration: 27s; --fall-delay: -4s; --drift: -32px; --spin: 470deg; }
.sakura-petal:nth-child(3) { --petal-left: 22%; --petal-size: 13px; --petal-color: #f8c7d7; --fall-duration: 19s; --fall-delay: -11s; --drift: 30px; --spin: 320deg; }
.sakura-petal:nth-child(4) { --petal-left: 31%; --petal-size: 18px; --petal-color: #ec91b4; --fall-duration: 25s; --fall-delay: -20s; --drift: -24px; --spin: 430deg; }
.sakura-petal:nth-child(5) { --petal-left: 40%; --petal-size: 14px; --petal-color: #f5b5cd; --fall-duration: 21s; --fall-delay: -7s; --drift: 36px; --spin: 500deg; }
.sakura-petal:nth-child(6) { --petal-left: 49%; --petal-size: 20px; --petal-color: #ef9dbb; --fall-duration: 29s; --fall-delay: -17s; --drift: -28px; --spin: 350deg; }
.sakura-petal:nth-child(7) { --petal-left: 58%; --petal-size: 13px; --petal-color: #f8c7d7; --fall-duration: 18s; --fall-delay: -2s; --drift: 22px; --spin: 460deg; }
.sakura-petal:nth-child(8) { --petal-left: 67%; --petal-size: 17px; --petal-color: #ec91b4; --fall-duration: 24s; --fall-delay: -13s; --drift: -34px; --spin: 380deg; }
.sakura-petal:nth-child(9) { --petal-left: 76%; --petal-size: 14px; --petal-color: #f5b5cd; --fall-duration: 20s; --fall-delay: -18s; --drift: 26px; --spin: 490deg; }
.sakura-petal:nth-child(10) { --petal-left: 85%; --petal-size: 19px; --petal-color: #ef9dbb; --fall-duration: 28s; --fall-delay: -9s; --drift: -22px; --spin: 340deg; }
.sakura-petal:nth-child(11) { --petal-left: 94%; --petal-size: 15px; --petal-color: #f8c7d7; --fall-duration: 23s; --fall-delay: -21s; --drift: 32px; --spin: 440deg; }
.sakura-petal:nth-child(12) { --petal-left: 54%; --petal-size: 12px; --petal-color: #ec91b4; --fall-duration: 26s; --fall-delay: -6s; --drift: -26px; --spin: 510deg; }

@keyframes sakuraFall {
  0% { transform: translate3d(0, -8vh, 0) rotate(0); }
  25% { transform: translate3d(18px, 22vh, 0) rotate(95deg); }
  50% { transform: translate3d(-12px, 52vh, 0) rotate(205deg); }
  75% { transform: translate3d(16px, 81vh, 0) rotate(290deg); }
  100% { transform: translate3d(var(--drift), 112vh, 0) rotate(var(--spin)); }
}

:root[data-theme="dark"] .seaside-cloud { background: rgba(30, 41, 59, 0.4); box-shadow: none; }
:root[data-theme="dark"] .seaside-gull { color: rgba(56, 189, 248, 0.4); filter: none; }
:root[data-theme="dark"] .wave-ocean { fill: #075985; opacity: 0.5; }
:root[data-theme="dark"] .wave-tide { fill: #0f766e; opacity: 0.45; }
:root[data-theme="dark"] .wave-foam { fill: #1e293b; opacity: 0.6; }
:root[data-theme="dark"] .wave-sand { fill: #1e1b4b; opacity: 0.75; }
:root[data-theme="dark"] .sakura-petal { opacity: 0.58; }

/* Floating Study & Campus Decorative Badges */
.study-decor {
  position: absolute; pointer-events: none; z-index: 0; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(186, 230, 253, 0.95); border-radius: 9999px; box-shadow: 0 8px 20px rgba(2, 132, 199, 0.16);
  font-size: 0.78rem; font-weight: 700; color: var(--text); opacity: 0.9;
}
.study-decor svg { width: 20px; height: 20px; flex-shrink: 0; }
.decor-cap { top: 7%; right: 4%; color: #4338ca; animation: floatCap 9s ease-in-out infinite alternate; }
.decor-book { top: 18%; right: 16%; color: #0284c7; animation: floatBook 11s ease-in-out infinite alternate; }
.decor-pencil { top: 34%; right: 2%; color: #d97706; animation: floatPencil 8s ease-in-out infinite alternate; }
.decor-campus { top: 22%; left: 265px; color: #0d9488; animation: floatCampus 12s ease-in-out infinite alternate; }
.decor-diploma { top: 48%; left: 275px; color: #db2777; animation: floatCap 10s ease-in-out infinite alternate-reverse; }

@keyframes floatCap { 0% { transform: translateY(0); } 100% { transform: translateY(-12px); } }
@keyframes floatBook { 0% { transform: translateY(0); } 100% { transform: translateY(-15px); } }
@keyframes floatPencil { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } }
@keyframes floatCampus { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(-8px) scale(1.04); } }

@media (max-width: 767px) {
  .sakura-petal { width: max(11px, calc(var(--petal-size) - 3px)); height: max(11px, calc(var(--petal-size) - 3px)); }
  .decor-campus { left: 4%; top: 46%; font-size: 0.72rem; padding: 4px 10px; }
  .decor-diploma { left: auto; right: 4%; top: 60%; font-size: 0.72rem; padding: 4px 10px; }
  .decor-book { right: 4%; top: 13%; font-size: 0.72rem; padding: 4px 10px; }
  .decor-cap { top: 5%; right: 4%; font-size: 0.72rem; padding: 4px 10px; }
  .decor-pencil { display: none; }
}

:root[data-theme="dark"] .study-decor { background: rgba(15, 23, 42, 0.88); border-color: rgba(56, 189, 248, 0.35); color: #f8fafc; }

@media (prefers-reduced-motion: reduce) {
  .seaside-cloud, .seaside-gull, .wave-layer, .study-decor, .sakura-petal { animation: none; }
  .sakura-petal { display: none; }
}