/*
Theme Name: Tema Custom Saya
Author: Dinda MA
Description: Desain HTML/CSS lokal yang diubah ke WordPress
Version: 1.0
*/

/* EFEK SMOOTH SCROLL */
html {
  scroll-behavior: smooth;
}

/* Agar saat scroll, judul bagian tidak tertutup Navbar yang Sticky */
section,
footer,
#jurusan,
#kontak {
  scroll-margin-top: 100px; /* Jarak aman dari atas */
}

:root {
  --primary-blue: #0056b3; /* Biru Muhammadiyah */
  --secondary-blue: #0088ff;
  --light-bg: #f8f9fa;
}

body {
  font-family: "Poppins", sans-serif;
  overflow-x: hidden;
}

/* Navbar Styling */
.navbar {
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.navbar-brand img {
  height: 50px;
}
.nav-link {
  color: #333;
  font-weight: 500;
}
.nav-link:hover {
  color: var(--primary-blue);
}

/* Dropdown Hover Logic (Desktop) */
@media all and (min-width: 992px) {
  .navbar .nav-item .dropdown-menu {
    display: none;
  }
  .navbar .nav-item:hover .nav-link {
    color: var(--primary-blue);
  }
  .navbar .nav-item:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

/* Hero Section */
.hero-section {
  position: relative;
  background: url("img/hero.jpg") no-repeat center center/cover;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 48, 105, 0.7); /* Overlay Biru Gelap */
}
.hero-content {
  position: relative;
  z-index: 2;
}
.btn-primary-custom {
  background-color: var(--secondary-blue);
  border: none;
  padding: 12px 30px;
  font-weight: 600;
  transition: 0.3s;
}
.btn-primary-custom:hover {
  background-color: #004494;
  color: white;
}

/* Section Titles */
.section-title {
  color: var(--primary-blue);
  font-weight: 700;
  margin-bottom: 30px;
  text-align: center;
  position: relative;
}
.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--primary-blue);
  margin: 10px auto;
}

/* Cards Program */
.program-card {
  cursor: pointer;
  transition: transform 0.3s;
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  height: 100%;
}
.program-card:hover {
  transform: translateY(-5px);
  background-color: var(--primary-blue);
  color: white;
}
.program-card:hover .text-muted {
  color: #e0e0e0 !important;
}

/* Footer */
footer {
  background-color: #002855;
  color: white;
  padding: 40px 0;
}
footer a {
  color: #ccc;
  text-decoration: none;
}
footer a:hover {
  color: white;
}

/* Styling Khusus Foto Guru */
.guru-photo {
  width: 200px; /* Atur lebar yang diinginkan (bisa diperkecil misal 150px) */
  height: 200px; /* Harus sama dengan width agar bulat sempurna */
  object-fit: cover; /* WAJIB: Agar wajah tidak gepeng/lonjong */
  object-position: top; /* Agar fokus foto diambil dari bagian atas (wajah), bukan dada/perut */
  border: 3px solid var(--primary-blue); /* Opsional: Memberi bingkai biru */
  padding: 3px; /* Jarak antara foto dan bingkai */
}

/* Styling untuk List Mata Pelajaran */
.custom-arrow-list li {
  position: relative;
  padding-left: 20px; /* Jarak teks dari panah */
  margin-bottom: 5px; /* Jarak antar baris */
}

/* Membuat ikon panah biru menggunakan CSS */
.custom-arrow-list li::before {
  content: "\f0da"; /* Kode ikon panah FontAwesome */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  color: #0056b3; /* Warna biru panah */
}

/* =========================================
   ANIMASI FADE IN (MUNCUL PERLAHAN)
   ========================================= */

/* 1. Membuat Definisi Gerakan (Keyframes) */
@keyframes munculPelan {
  0% {
    opacity: 0; /* Mulai dari transparan (hilang) */
    transform: translateY(30px); /* Mulai dari posisi sedikit di bawah */
  }
  100% {
    opacity: 1; /* Menjadi jelas terlihat */
    transform: translateY(0); /* Kembali ke posisi normal */
  }
}

/* 2. Menerapkan Animasi ke Bagian Utama Halaman */
/* Kita targetkan Header, Section, dan Footer agar Navbar tetap diam (stabil) */
header,
section,
footer {
  animation: munculPelan 0.8s ease-out forwards; /* Durasi 0.8 detik */
}

/* Opsional: Agar kartu-kartu (seperti di galeri/jurusan) muncul lebih cantik saat di-hover */
.card {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px); /* Naik sedikit saat disentuh mouse */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Bayangan lebih tebal */
}