/* 
 * TEMA MARITIM & GAYA VISUAL MODERN MEDIA PEMBELAJARAN NKPI
 * SMK NEGERI 1 MUNDU CIREBON
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --primary-deep: #071325;
  --primary-ocean: #032b56;
  --accent-cyan: #06b6d4;
  --accent-sky: #38bdf8;
  --accent-amber: #f59e0b;
  --accent-emerald: #10b981;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: #070d18;
  color: #f1f5f9;
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #091322;
}
::-webkit-scrollbar-thumb {
  background: #1e3a5f;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0284c7;
}

/* Maritime Wave Animation in Background */
.ocean-ambient {
  background: radial-gradient(circle at 50% -20%, rgba(2, 132, 199, 0.25), transparent 70%),
              radial-gradient(circle at 10% 60%, rgba(6, 182, 212, 0.15), transparent 50%),
              radial-gradient(circle at 90% 80%, rgba(14, 165, 233, 0.12), transparent 50%);
}

/* Card Glassmorphism */
.glass-card {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-nav {
  background: rgba(7, 13, 24, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(56, 189, 248, 0.15);
}

/* Maritime Glow Effects */
.glow-sky {
  box-shadow: 0 0 25px -5px rgba(56, 189, 248, 0.3);
}

.glow-emerald {
  box-shadow: 0 0 25px -5px rgba(16, 185, 129, 0.3);
}

/* Canvas styling */
canvas {
  touch-action: none;
  border-radius: 0.75rem;
}

/* Animation keyframes */
@keyframes pulseSubtle {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.02); opacity: 0.95; }
}

.animate-pulse-subtle {
  animation: pulseSubtle 3s ease-in-out infinite;
}

/* Print Stylesheet untuk Sertifikat & Lembar Refleksi Murid */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 11pt;
  }

  header, nav, footer, #audio-toggle-btn, .no-print, button, .filter-btn {
    display: none !important;
  }

  .app-page {
    display: block !important;
  }

  #page-beranda, #page-materi, #page-simulasi, #page-kuis {
    display: none !important;
  }

  .glass-card {
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
    color: #000000 !important;
    box-shadow: none !important;
  }

  .print-certificate-container {
    display: block !important;
    border: 4px double #0f172a !important;
    padding: 30px !important;
    page-break-after: always;
  }

  .text-white, .text-slate-200, .text-slate-300, .text-slate-400 {
    color: #111827 !important;
  }

  .text-sky-400, .text-sky-300, .text-cyan-400 {
    color: #0369a1 !important;
  }
}