/* static/css/custom_style.css */

/* --- Gaya Global & Font --- */
html, body { /* Pastikan html dan body memiliki tinggi penuh */
    height: 100%; 
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff; /* Sedikit abu-abu agar tidak terlalu putih */
    display: flex; /* Aktifkan Flexbox */
    flex-direction: column; /* Susun item secara vertikal */
}

/* --- Pastikan main content mengambil semua ruang yang tersedia --- */
main {
    flex-grow: 1; /* Ini yang membuat main content 'mendorong' footer ke bawah */
}


/* --- Kustomisasi Navbar --- */
.navbar.bg-success {
    /* Mengganti warna hijau default Bootstrap menjadi warna yang lebih khas */
    background-color: #1a7431 !important; 
}

.navbar-brand {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

.nav-link {
    transition: color 0.3s ease-in-out;
}

.nav-link:hover, .nav-link:focus {
    color: #c8e6c9 !important; /* Warna link saat di-hover */
}


/* --- Kustomisasi Tombol Utama --- */
.btn-success {
    background-color: #2e8540;
    border-color: #2e8540;
    border-radius: 25px; /* Membuat tombol lebih rounded */
    padding: 10px 25px;
    font-weight: 500;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.btn-success:hover {
    background-color: #1a7431;
    border-color: #1a7431;
    transform: translateY(-2px); /* Efek sedikit terangkat saat di-hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}


/* --- Kustomisasi Card (untuk Berita & Info) --- */
.card {
    border: none; /* Menghilangkan border default */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Memberi bayangan halus */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px); /* Efek terangkat saat di-hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.card-header.bg-success {
    background-color: #1a7431 !important;
}


/* --- Kustomisasi Halaman Utama (Hero Section) --- */
.hero-section {
  position: relative; /* Diperlukan untuk overlay */
  background-image: url('../images/gedung_sekolah.jpg'); /* Path ke gambar Anda */
  background-size: cover;
  background-position: center;
  padding: 6rem 2rem; /* Padding lebih besar untuk efek dramatis */
  color: white; /* Mengubah warna teks default menjadi putih */
  border-radius: 15px;
}

/* Membuat lapisan overlay gelap di atas gambar */
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Hitam dengan 50% transparansi */
  border-radius: 15px; /* Samakan dengan parent */
  z-index: 1; /* Pastikan overlay di bawah konten */
}

/* Pastikan konten (teks dan tombol) berada di atas overlay */
.hero-section .container-fluid {
  position: relative;
  z-index: 2;
}

/* Memberi efek bayangan pada teks agar lebih terbaca */
.hero-section h1, .hero-section p {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

  /* style.css footer */
  html, body {
    height: 100%; /* biar body penuh tinggi layar */
  }
  
  body {
    display: flex;
    flex-direction: column; /* tata letak vertikal */
  }
  
  main {
    flex: 1; /* isi konten utama mengisi ruang yang ada */
  }
  
/* --- Kustomisasi Ukuran Gambar di Card --- */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.7s ease forwards;
  }
  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .card-img-fit {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    background-color: #f8f9fa;
  }
  .title-decor {
    position: relative;
    display: inline-block;
    z-index: 2; /* teks selalu di atas shapes */
    padding: 0.5rem 1rem;
  }
  
  /* Oval timbul dengan efek shadow */
.title-decor::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 120%;
  background: rgba(25, 135, 84, 0.15); /* hijau transparan */
  border-radius: 50px; /* bentuk oval */
  transform: translate(-50%, -50%);
  z-index: -1; /* tepat di belakang teks */

  /* Efek timbul */
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.2),   /* bayangan bawah */
    inset 0 4px 6px rgba(255, 255, 255, 0.4), /* cahaya dalam */
    inset 0 -3px 5px rgba(0, 0, 0, 0.15);     /* bayangan dalam */
}

/* Efek "pop" pada ikon sukses */
.card .bi-check-lg {
  animation: pop 0.6s ease forwards;
}

@keyframes pop {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); }
}