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

:root {
  --color-pku-red: #D91A2A;
  --color-pku-red-dark: #B91522;
  --color-pku-red-light: #EF4444;
  --color-pku-red-soft: rgba(217, 26, 42, 0.08);
  --color-pku-navy: #0A1931;
  --color-pku-navy-dark: #050D1C;
  --color-pku-navy-card: #0F2242;
  --color-pku-blue: #152C5B;
  --color-pku-gold: #F59E0B;
}

* {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #0A1931;
}
::-webkit-scrollbar-thumb {
  background: #D91A2A;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #B91522;
}

/* Selection */
::selection {
  background-color: #D91A2A;
  color: #ffffff;
}

/* Background Gradients & Glows */
.bg-pku-gradient {
  background: linear-gradient(135deg, #0A1931 0%, #152C5B 100%);
}

.bg-pku-hero {
  background: linear-gradient(135deg, rgba(10, 25, 49, 0.94) 0%, rgba(5, 13, 28, 0.88) 100%);
}

.text-gradient-red {
  background: linear-gradient(135deg, #FF4D58 0%, #D91A2A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-gold {
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.red-glow {
  box-shadow: 0 10px 25px -5px rgba(217, 26, 42, 0.35);
}

.blue-glow {
  box-shadow: 0 10px 25px -5px rgba(10, 25, 49, 0.4);
}

/* Glassmorphism */
.glass-nav {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.glass-nav.scrolled {
  box-shadow: 0 4px 20px -2px rgba(10, 25, 49, 0.08);
}

.glass-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.glass-card-dark {
  background: rgba(15, 34, 66, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Animations */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.animate-float {
  animation: floatSlow 4s ease-in-out infinite;
}

@keyframes pulseBorder {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 26, 42, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(217, 26, 42, 0); }
}

.pulse-red-glow {
  animation: pulseBorder 2.5s infinite;
}

/* Pattern Overlays */
.bg-grid-pattern {
  background-size: 30px 30px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

.bg-dots-pattern {
  background-image: radial-gradient(rgba(10, 25, 49, 0.1) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}

/* Custom transitions */
.transition-card {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.transition-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 30px -10px rgba(10, 25, 49, 0.12);
}

/* Modal styling */
.modal-overlay {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.hidden-modal,
.modal-overlay.hidden-modal {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.modal-overlay.active-modal {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Preloader & Slider Extras */
#pkuPreloader {
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
#gallerySliderModal img {
  user-select: none;
  -webkit-user-drag: none;
}

/* Efek Cenat-Cenut (Heartbeat Pulse) untuk Logo */
@keyframes cenatCenut {
  0% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.12);
  }
  30% {
    transform: scale(0.96);
  }
  45% {
    transform: scale(1.09);
  }
  65% {
    transform: scale(0.98);
  }
  80% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}

.animate-cenat-cenut {
  animation: cenatCenut 0.85s ease-in-out infinite;
  transform-origin: center center;
}

/* Efek Cenat-Cenut Khusus Indikator Hijau Top Bar */
@keyframes dotCenatCenut {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 4px rgba(52, 211, 153, 0.6);
  }
  18% {
    transform: scale(1.5);
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.95);
  }
  35% {
    transform: scale(0.92);
    box-shadow: 0 0 3px rgba(52, 211, 153, 0.4);
  }
  52% {
    transform: scale(1.35);
    box-shadow: 0 0 9px rgba(52, 211, 153, 0.85);
  }
  70% {
    transform: scale(0.98);
    box-shadow: 0 0 4px rgba(52, 211, 153, 0.5);
  }
}

.animate-dot-pulse {
  animation: dotCenatCenut 1s ease-in-out infinite;
}

/* ========================================================================= */
/* macOS-Style Window & Modal Transitions + Smooth Zoom In/Out               */
/* ========================================================================= */
.macos-overlay {
  background-color: rgba(3, 7, 18, 0.82) !important;
  backdrop-filter: blur(28px) saturate(190%) contrast(105%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) contrast(105%) !important;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.macos-overlay.macos-enter {
  animation: macosOverlayFadeIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.macos-overlay.macos-exit {
  animation: macosOverlayFadeOut 0.24s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

.macos-window {
  transform-origin: center center;
}
.macos-window.macos-enter {
  animation: smoothZoomIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.macos-window.macos-exit {
  animation: smoothZoomOut 0.24s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

@keyframes smoothZoomIn {
  0% {
    opacity: 0;
    transform: scale(0.68) translateY(-10px);
    filter: blur(10px);
  }
  70% {
    opacity: 1;
    transform: scale(1.02) translateY(0);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

@keyframes smoothZoomOut {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.68) translateY(12px);
    filter: blur(10px);
  }
}

@keyframes macosOverlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes macosOverlayFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ========================================================================= */
/* Border Menyala Berjalan Mengelilingi Kotak (Animated Glow Border Beam)    */
/* ========================================================================= */
.glow-border-beam {
  position: relative;
  border-radius: 36px !important;
  padding: 3px !important; /* Ketebalan garis border neon */
  background: transparent;
  overflow: hidden;
  box-shadow: 0 25px 70px -10px rgba(0, 0, 0, 0.9),
              0 0 45px rgba(239, 68, 68, 0.45),
              0 0 70px rgba(6, 182, 212, 0.25) !important;
}

.glow-border-beam::before {
  content: '';
  position: absolute;
  top: -65%;
  left: -65%;
  width: 230%;
  height: 230%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 45deg,
    #ff0055 75deg,
    #ff3366 90deg,
    #ffffff 105deg,
    #00e5ff 125deg,
    #00b4d8 145deg,
    transparent 180deg,
    transparent 225deg,
    #ff0055 255deg,
    #ff3366 270deg,
    #ffffff 285deg,
    #00e5ff 305deg,
    #00b4d8 325deg,
    transparent 360deg
  );
  animation: runGlowBorder 3s linear infinite;
  border-radius: 50%;
  pointer-events: none;
}

@keyframes runGlowBorder {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.glow-inner-box {
  position: relative;
  border-radius: 33px !important;
  background: rgba(10, 18, 34, 0.96) !important;
  backdrop-filter: blur(30px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
  z-index: 1;
}

/* Efek Cenat-Cenut Khusus Judul Tulisan "Mau Login Kemana?" */
@keyframes textCenatCenut {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.35));
  }
  15% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 20px rgba(239, 68, 68, 0.95)) drop-shadow(0 0 35px rgba(255, 100, 100, 0.6));
  }
  30% {
    transform: scale(0.97);
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.45));
  }
  45% {
    transform: scale(1.06);
    filter: drop-shadow(0 0 16px rgba(239, 68, 68, 0.85));
  }
  65% {
    transform: scale(0.98);
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.35));
  }
  80% {
    transform: scale(1.03);
    filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.65));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.35));
  }
}

.animate-cenat-cenut-text {
  display: inline-block;
  animation: textCenatCenut 1.25s ease-in-out infinite;
  transform-origin: center center;
}

/* macOS Traffic Light Buttons */
.macos-dot {
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
}
.macos-dot-close {
  background-color: #ff5f56;
  border: 0.5px solid #e0443e;
}
.macos-dot-minimize {
  background-color: #ffbd2e;
  border: 0.5px solid #dea123;
}
.macos-dot-zoom {
  background-color: #27c93f;
  border: 0.5px solid #1aab29;
}
.macos-dot-close:hover {
  background-color: #ff3b30;
  transform: scale(1.08);
}
.macos-dot-minimize:hover {
  background-color: #ff9500;
  transform: scale(1.08);
}
.macos-dot-zoom:hover {
  background-color: #34c759;
  transform: scale(1.08);
}