/* style.css */

body {
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    background-image: 
        /* UBAH ANGKA TERAKHIR DI SINI */
        linear-gradient(to top, rgba(15, 23, 42, 0.3), rgba(15, 23, 42, 0.2)),
        url('https://i.pinimg.com/originals/ff/8f/91/ff8f91cab4db245aaed01ab2b7bec368.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

body.is-loading #app-container {
    opacity: 0;
    transform: scale(0.95);
}

#app-container {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.125);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.link-button {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    background-color: rgba(51, 65, 85, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

.link-button:hover {
    transform: translateY(-5px) scale(1.03);
    background-color: rgba(71, 85, 105, 0.8);
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.6), 0 5px 15px rgba(0,0,0,0.3);
    border-color: #06b6d4;
}

@keyframes fadeInSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-on-load {
    opacity: 0;
    animation: fadeInSlideUp 0.5s ease-out forwards;
}

/* PERBAIKAN FINAL: Animasi Dropdown menggunakan max-height agar rapat sempurna */
.submenu-container {
    max-height: 0;
    overflow: hidden;
    /* Transisi yang lebih kompatibel dan anti-bug */
    transition: max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.submenu-container.expanded {
    /* Nilai besar yang dijamin cukup untuk semua konten sub-menu */
    max-height: 40rem; /* 640px */
}


/* --- ANIMASI LINTASAN CAHAYA (VERSI JEJAK PANJANG) --- */
@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes rotate-border-long {
  to { --angle: 360deg; }
}

.glow-orbit {
  --angle: 0deg;
  --glow-color: #34d399; 
  border: 4px solid transparent; 
  border-image: conic-gradient(
      from var(--angle),
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.1) 5%,
      var(--glow-color) 20%,
      rgba(255, 255, 255, 0.1) 35%,
      rgba(255, 255, 255, 0.1) 100%
    ) 1;
  animation: rotate-border-long 2.5s linear infinite;
}

.glow-orbit.glow-green { --glow-color: #34d399; }
.glow-orbit.glow-gold { --glow-color: #f59e0b; }

/* --- NEW: FLOATING BUTTON ANIMATION --- */
@keyframes shake-slow {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(-10deg); }
    20% { transform: rotate(10deg); }
    30% { transform: rotate(-10deg); }
    40% { transform: rotate(10deg); }
    50% { transform: rotate(0deg); }
}

.animate-shake-slow {
    animation: shake-slow 4s ease-in-out infinite;
    /* Jeda di antara shake */
}

/* --- NEW: MODAL TRANSITIONS --- */
.modal-enter {
    opacity: 1 !important;
}
.modal-enter-panel {
    opacity: 1 !important;
    transform: scale(100%) !important;
}