/* =========================================
   1. GLOBAL & VARIABEL WARNA
   ========================================= */
   @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600&family=Poppins:wght@300;400;600&display=swap');

   :root {
       --warna-merah: #ffadad;
       --warna-hijau: #caffbf;
       --warna-biru: #a0c4ff;
       --warna-ungu: #bdb2ff;
       --warna-pink: #ffc6ff;
   }
   
   body {
       font-family: 'Poppins', sans-serif;
       background-color: #F5E6D3;
       color: #444;
   }
   
   h1, h2, h3, h4, h5, .navbar-brand {
       font-family: 'Fredoka', sans-serif;
       color: #333;
   }
   
   /* =========================================
      2. KHUSUS ADMIN (DASHBOARD & LOGIN)
      ========================================= */
   
   /* Sidebar Admin */
   .sidebar {
       min-height: 100vh;
       background: #F5E6D3;
       box-shadow: 2px 0 5px rgba(0,0,0,0.05);
   }
   
   .sidebar .nav-link { color: #555; margin-bottom: 5px; }
   .sidebar .nav-link.active { background-color: #0d6efd; color: white; border-radius: 5px; }
   .sidebar .nav-link:hover:not(.active) { background-color: #f8f9fa; }
   
   /* Halaman Login Admin */
   .login-card {
       border: none; 
       border-radius: 15px;
       box-shadow: 0 10px 30px rgba(0,0,0,0.1);
       background: white;
   }
   
   /* =========================================
      3. KHUSUS BERANDA / FRONTEND (MODERN)
      ========================================= */
   
   /* Header Kontak (Atas) */
   .header-contact {
       background: white;
       border-radius: 15px;
       box-shadow: 0 5px 15px rgba(0,0,0,0.05);
       padding: 15px 25px;
       margin-bottom: 30px;
       border-bottom: 3px solid #eee;
   }
   
   /* Menu Navigasi Tombol Warna-Warni */
   .nav-box .btn {
       border: none;
       border-radius: 12px;
       font-weight: 600;
       color: #444;
       padding: 15px 10px;
       transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efek membal modern */
       box-shadow: 0 4px 6px rgba(0,0,0,0.05);
   }
   
   .nav-box .btn:hover {
       transform: translateY(-5px);
       color: #000;
       box-shadow: 0 8px 15px rgba(0,0,0,0.1);
   }
   
   /* Warna Spesifik Menu */
   .btn-beranda { background-color: var(--warna-merah); }
   .btn-fasilitas { background-color: var(--warna-hijau); }
   .btn-pengumuman { background-color: var(--warna-biru); }
   .btn-kontak { background-color: var(--warna-ungu); }
   .btn-galeri { background-color: var(--warna-pink); }
   
   /* Hero Section (Foto Utama) */
   .hero-wrapper {
       background: white;
       border: 3px dashed #d1d1d1; /* Tetap dashed tapi abu halus biar modern */
       border-radius: 20px;
       padding: 10px;
       margin-bottom: 40px;
   }
   
   .hero-img {
       width: 100%;
       height: 400px;
       object-fit: cover;
       border-radius: 15px;
   }
   
   /* Box Tentang Kami */
   .section-box {
       background: white;
       border-radius: 20px;
       padding: 30px;
       box-shadow: 0 10px 30px rgba(0,0,0,0.05);
       border: 1px solid #f0f0f0;
   }
   
   .img-about {
       border-radius: 15px;
       box-shadow: 10px 10px 0px var(--warna-biru); /* Efek bayangan kotak unik */
   }
   
   /* Footer */
   footer {
       margin-top: 50px;
       padding: 20px;
       border-top: 1px solid #eee;
   }