/*
  =============================================
  STYLE.CSS - File pengaturan tampilan website
  =============================================
  CSS = Cascading Style Sheets
  Fungsinya: mengatur warna, ukuran, posisi, dan tampilan elemen HTML
*/

/* ===== CSS VARIABLES (Variabel warna & font) =====
   Kita simpan warna utama di sini supaya mudah diubah.
   Cukup ganti di sini, semua halaman otomatis berubah!
*/
:root {
  --blue-dark:    #0f2d5e;   /* Biru tua - warna utama */
  --blue-mid:     #1a4a8a;   /* Biru sedang */
  --blue-light:   #2563b0;   /* Biru terang */
  --accent:       #c8a94f;   /* Emas/gold - warna aksen */
  --accent-light: #e8c97a;   /* Emas terang */
  --bg:           #f0f4fc;   /* Latar belakang utama (biru sangat muda) */
  --bg-card:      #ffffff;   /* Latar kartu (putih) */
  --text-dark:    #0f1f3d;   /* Teks gelap */
  --text-mid:     #3a5080;   /* Teks sedang */
  --text-light:   #7a90b8;   /* Teks abu-abu */
  --shadow:       0 8px 32px rgba(15, 45, 94, 0.12);  /* Bayangan halus */
  --shadow-hover: 0 16px 48px rgba(15, 45, 94, 0.20); /* Bayangan saat hover */
  --radius:       16px;      /* Sudut melengkung kartu */
  --font-display: 'Playfair Display', Georgia, serif; /* Font judul elegan */
  --font-body:    'DM Sans', sans-serif;               /* Font isi teks */
}

/* ===== RESET & BASE =====
   Menghapus margin/padding bawaan browser supaya tampilan konsisten
*/
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Ukuran elemen sudah termasuk padding & border */
}

html {
  scroll-behavior: smooth; /* Scroll halus saat klik link antar section */
}

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text-dark);
  line-height: 1.7; /* Jarak antar baris teks */
  overflow-x: hidden; /* Sembunyikan scroll horizontal */
}

/* Kelas .container = pembatas lebar konten supaya tidak terlalu lebar */
.container {
  max-width: 1100px;
  margin: 0 auto;     /* Tengahkan secara horizontal */
  padding: 0 24px;
}

/* Warna aksen emas untuk teks penting */
.accent { color: var(--accent); }

/* ===== NAVBAR ===== */
.navbar {
  position: fixed;         /* Navbar selalu di atas meski di-scroll */
  top: 0;
  width: 100%;
  z-index: 1000;           /* Pastikan navbar di atas semua elemen */
  padding: 16px 0;
  transition: all 0.4s ease; /* Animasi perubahan saat scroll */
  background: transparent;
}

/* Saat halaman di-scroll, navbar berubah jadi berwarna */
.navbar.scrolled {
  background: rgba(15, 45, 94, 0.97);
  backdrop-filter: blur(12px); /* Efek blur kaca */
  padding: 10px 0;
  box-shadow: 0 4px 24px rgba(15,45,94,0.2);
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;           /* Susun elemen secara horizontal */
  align-items: center;     /* Rata tengah vertikal */
  justify-content: space-between; /* Jarak antar elemen merata */
}

/* Logo di navbar */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.nav-logo-img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(200,169,79,0.4));
  /* Animasi navbar lebih lambat (4s) dan lebih kecil (1.1x) supaya tidak mengganggu */
  animation: navLogoPulse 4s ease-in-out infinite;
}

@keyframes navLogoPulse {
  0%   { transform: scale(1);    filter: drop-shadow(0 2px 8px  rgba(200,169,79,0.4)); }
  50%  { transform: scale(1.1);  filter: drop-shadow(0 4px 16px rgba(200,169,79,0.75)); }
  100% { transform: scale(1);    filter: drop-shadow(0 2px 8px  rgba(200,169,79,0.4)); }
}

.nav-logo-text {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: white;
  font-weight: 600;
}

/* Menu navigasi */
.nav-menu {
  display: flex;
  list-style: none;   /* Hilangkan bullet point */
  gap: 8px;
}

.nav-link {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 50px;
  transition: all 0.3s ease; /* Animasi hover */
  letter-spacing: 0.3px;
}

.nav-link:hover,
.nav-link.active {
  background: var(--accent);
  color: var(--blue-dark);
  font-weight: 600;
}

/* Tombol hamburger (untuk tampilan HP - disembunyikan di desktop) */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: all 0.3s;
}

/* ===== HERO SECTION ===== */
.hero {
  min-height: 100vh; /* Tinggi minimal = tinggi layar penuh */
  display: flex;
  align-items: center;
  position: relative;
  padding: 120px 24px 80px;
  max-width: 1100px;
  margin: 0 auto;
  gap: 48px;
}

/* Background gradasi biru di belakang hero */
.hero-bg {
  position: fixed;
  inset: 0;
  background: linear-gradient(
    -45deg,
    #0f2d5e,
    #1a4a8a,
    #0d3b6e,
    #1e3a6e,
    #0f2d5e,
    #2a5298,
    #0a2550
  );
  background-size: 400% 400%; /* Latar dibuat 4x lebih besar supaya bisa bergerak */
  animation: gradientFlow 12s ease infinite; /* Animasi berjalan terus tanpa henti */
  z-index: -1;
}

/*
  @keyframes = mendefinisikan gerakan animasi
  gradientFlow = nama animasi ini
  background-position = posisi latar yang bergerak dari sudut ke sudut
  Efeknya seperti air mengalir karena posisi warna terus berpindah!
*/
@keyframes gradientFlow {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 100% 50%; }
  50%  { background-position: 100% 0%; }
  75%  { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}

/* Konten teks hero */
.hero-content {
  flex: 1;
  animation: fadeInUp 0.9s ease both; /* Animasi muncul dari bawah */
}

/* Badge kecil di atas judul */
.hero-badge {
  display: inline-block;
  background: rgba(200,169,79,0.2);
  border: 1px solid var(--accent);
  color: var(--accent-light);
  padding: 6px 18px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* Judul besar hero */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  color: white;
  line-height: 1.2;
  margin-bottom: 20px;
}

/*
  Efek BERKILAU pada teks putih hero-title
  background-clip: text = gradasi diterapkan ke teks, bukan kotak
  -webkit-text-fill-color: transparent = warna asli teks disembunyikan, diganti gradasi
  animation: shimmer = gradasi bergeser kiri-kanan sehingga terlihat berkilau!
*/
.hero-title {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ffffff 30%,
    #ffe88a 45%,    /* warna emas kilau */
    #ffffff 55%,
    #c8e6ff 70%,    /* warna biru muda kilau */
    #ffffff 85%,
    #ffffff 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerText 4s linear infinite;
}

/* Teks aksen emas (MAN 1 Bukittinggi) juga berkilau dengan warna emas */
.hero-title .accent {
  background: linear-gradient(
    90deg,
    #c8a94f 0%,
    #c8a94f 20%,
    #fff5b0 38%,    /* kilau putih keemasan */
    #ffe066 50%,
    #fff5b0 62%,
    #c8a94f 80%,
    #c8a94f 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerText 3s linear infinite;
}

/* Badge "Penguatan Projek Riset 2026" juga berkilau */
.hero-badge {
  display: inline-block;
  background: rgba(200,169,79,0.2);
  border: 1px solid var(--accent);
  padding: 6px 18px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 24px;
  /* Teks badge berkilau emas */
  color: transparent;
  background: linear-gradient(
    90deg,
    #e8c97a 0%,
    #e8c97a 20%,
    #ffffff 40%,
    #ffe88a 55%,
    #ffffff 70%,
    #e8c97a 90%,
    #e8c97a 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerText 2.5s linear infinite;
  /* Tetap ada border & background box-nya */
  box-shadow: inset 0 0 0 1px rgba(200,169,79,0.4);
}

/* Motto di hero card juga berkilau */
.hero-card-motto {
  background: linear-gradient(
    90deg,
    #e8c97a 0%,
    #fff5b0 35%,
    #ffe066 50%,
    #fff5b0 65%,
    #e8c97a 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 1px;
  animation: shimmerText 3.5s linear infinite;
}

/*
  @keyframes shimmerText
  Cara kerja: background-position bergeser dari kiri ke kanan terus-menerus
  Karena background-size: 250%, ada area ekstra yang terlihat bergerak
  Hasilnya = kilau berjalan dari kiri ke kanan seperti cahaya menyapu teks!
*/
@keyframes shimmerText {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.hero-subtitle {
  color: rgba(255,255,255,0.72);
  font-size: 1.05rem;
  margin-bottom: 36px;
  max-width: 480px;
  font-weight: 300;
}

/* Tombol-tombol di hero */
.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Tombol utama (emas) */
.btn {
  padding: 14px 32px;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
}

.btn-primary {
  background: var(--accent);
  color: var(--blue-dark);
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(200,169,79,0.35);
}

.btn-primary:hover {
  background: var(--accent-light);
  transform: translateY(-2px); /* Tombol naik sedikit saat hover */
  box-shadow: 0 8px 24px rgba(200,169,79,0.45);
}

/* Tombol outline (transparan dengan border) */
.btn-outline {
  border: 1.5px solid rgba(255,255,255,0.4);
  color: white;
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(200,169,79,0.1);
}

/* Visual/kartu di sisi kanan hero */
.hero-visual {
  flex: 0 0 320px;
  animation: fadeInRight 1s ease 0.3s both;
}

.hero-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 24px;
  padding: 48px 32px;
  text-align: center;
  backdrop-filter: blur(16px); /* Efek kaca buram */
}

.hero-logo {
  width: 240px;
  height: 240px;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(200,169,79,0.3));
  margin-bottom: 20px;
  /*
    logoPulse = animasi mengembang & mengecil seperti bernapas
    3s = satu siklus 3 detik
    ease-in-out = gerakan halus, tidak tiba-tiba
    infinite = terus berjalan selamanya
  */
  animation: logoPulse 3s ease-in-out infinite;
}

/*
  scale(1) = ukuran normal
  scale(1.09) = mengembang 9% lebih besar di tengah siklus
  drop-shadow makin besar & terang saat mengembang = efek cahaya emas berdenyut!
*/
@keyframes logoPulse {
  0%   { transform: scale(1);    filter: drop-shadow(0 8px 24px  rgba(200,169,79,0.3)); }
  50%  { transform: scale(1.09); filter: drop-shadow(0 14px 36px rgba(200,169,79,0.65)); }
  100% { transform: scale(1);    filter: drop-shadow(0 8px 24px  rgba(200,169,79,0.3)); }
}

.hero-card-motto {
  color: var(--accent-light);
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 1px;
}

/* ===== STATS SECTION ===== */
.stats-section {
  background: var(--bg);
  padding: 64px 0;
  position: relative;
  z-index: 1;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 kolom sama rata */
  gap: 24px;
}

.stat-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 32px 20px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-top: 3px solid var(--accent);
}

.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.stat-icon {
  font-size: 1.8rem;
  color: var(--blue-light);
  margin-bottom: 12px;
}

.stat-number {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--blue-dark);
  font-weight: 700;
}

.stat-label {
  color: var(--text-light);
  font-size: 0.9rem;
  margin-top: 4px;
}

/* ===== ABOUT SINGKAT SECTION ===== */
.about-section {
  padding: 80px 0;
  background: var(--bg);
}

/* Header section dengan tag dan judul */
.section-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-tag {
  display: inline-block;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--blue-dark);
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 kolom */
  gap: 24px;
}

.about-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 36px 28px;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
}

.about-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-bottom-color: var(--accent);
}

.about-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue-light));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.about-icon i {
  color: var(--accent-light);
  font-size: 1.3rem;
}

.about-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--blue-dark);
  margin-bottom: 12px;
}

.about-card p {
  color: var(--text-mid);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ===== FOOTER ===== */
.footer {
  background: var(--blue-dark);
  color: rgba(255,255,255,0.75);
  padding: 64px 0 0;
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 12px;
  filter: brightness(1.2);
}

.footer-brand p {
  color: white;
  font-weight: 500;
  font-size: 1rem;
}

.footer-brand small {
  color: var(--accent);
  font-size: 0.8rem;
  letter-spacing: 1px;
}

.footer-links h4,
.footer-contact h4 {
  color: white;
  font-family: var(--font-display);
  margin-bottom: 16px;
  font-size: 1rem;
}

.footer-links ul {
  list-style: none;
}

.footer-links ul li {
  margin-bottom: 10px;
}

.footer-links ul li a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s;
}

.footer-links ul li a:hover {
  color: var(--accent-light);
}

.footer-contact p {
  font-size: 0.9rem;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-contact i {
  color: var(--accent);
  width: 16px;
}

.footer-bottom {
  text-align: center;
  padding: 20px 0;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.4);
}

/* ===== PAGE HEADER (untuk halaman selain Home) ===== */
.page-header {
  background: linear-gradient(135deg, var(--blue-dark), var(--blue-mid));
  padding: 140px 24px 60px;
  text-align: center;
}

.page-header-tag {
  display: inline-block;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.page-header h1 {
  font-family: var(--font-display);
  color: white;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 12px;
}

.page-header p {
  color: rgba(255,255,255,0.7);
  max-width: 500px;
  margin: 0 auto;
}

/* ===== LOADING SCREEN =====
   Muncul pertama kali saat halaman dibuka
   Menampilkan logo MAN 1 + animasi sebelum konten muncul
*/
.loading-screen {
  position: fixed;
  inset: 0;
  background: linear-gradient(-45deg, #0a1f45, #0f2d5e, #1a4a8a, #0d3b6e);
  background-size: 400% 400%;
  animation: gradientFlow 6s ease infinite;
  z-index: 9999; /* Paling atas dari semua elemen */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  /* transition = efek menghilang halus saat loading selesai */
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* Saat class 'hidden' ditambahkan JS, loading screen menghilang */
.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* Tidak bisa diklik saat menghilang */
}

/* Logo MAN 1 di loading screen */
.loading-logo {
  width: 130px;
  height: 130px;
  object-fit: contain;
  /*
    Animasi logoBounce = logo muncul dari bawah lalu memantul
    Diikuti logoPulse = logo bernapas terus selama loading
  */
  animation: logoBounceIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             loadingPulse 2s ease-in-out 0.8s infinite;
  filter: drop-shadow(0 0 30px rgba(200,169,79,0.6));
}

@keyframes logoBounceIn {
  from { opacity: 0; transform: scale(0.3) translateY(60px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

@keyframes loadingPulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 24px rgba(200,169,79,0.5)); }
  50%       { transform: scale(1.08); filter: drop-shadow(0 0 48px rgba(200,169,79,0.9)); }
}

/* Teks nama sekolah di loading screen */
.loading-title {
  font-family: var(--font-display);
  color: white;
  font-size: 1.5rem;
  margin-top: 24px;
  animation: fadeInUp 0.6s ease 0.5s both;
  letter-spacing: 1px;
}

.loading-title span { color: var(--accent-light); }

.loading-subtitle {
  color: rgba(255,255,255,0.55);
  font-size: 0.8rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 6px;
  animation: fadeInUp 0.6s ease 0.7s both;
}

/* Bar loading yang berjalan dari kiri ke kanan */
.loading-bar-wrap {
  width: 180px;
  height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
  margin-top: 32px;
  overflow: hidden;
  animation: fadeInUp 0.6s ease 0.9s both;
}

.loading-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light), white);
  border-radius: 3px;
  /*
    loadingBar = animasi bar memanjang dari 0% ke 100%
    2s ease-in-out = selesai dalam 2 detik
    forwards = berhenti di posisi akhir (100%)
  */
  animation: loadingBar 2s ease-in-out 0.3s forwards;
}

@keyframes loadingBar {
  0%   { width: 0%; }
  60%  { width: 75%; }
  100% { width: 100%; }
}

/* ===== ANIMASI ===== */
/* Animasi muncul dari bawah ke atas */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Animasi muncul dari kanan */
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ===== RESPONSIVE (Tampilan HP) =====
   @media = aturan yang hanya berlaku jika lebar layar <= 768px (ukuran HP)
*/
@media (max-width: 768px) {
  /* Sembunyikan menu, tampilkan tombol hamburger */
  .hamburger { display: flex; }

  .nav-menu {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: var(--blue-dark);
    flex-direction: column; /* Menu jadi vertikal */
    padding: 16px;
    gap: 4px;
  }

  /* Saat hamburger diklik (class 'open' ditambahkan), tampilkan menu */
  .nav-menu.open { display: flex; }

  /* Hero jadi satu kolom di HP */
  .hero {
    flex-direction: column;
    text-align: center;
    padding-top: 100px;
  }

  .hero-subtitle { margin: 0 auto 36px; }
  .hero-buttons  { justify-content: center; }
  .hero-visual   { flex: none; width: 100%; max-width: 280px; margin: 0 auto; }

  /* Grid jadi 2 kolom di HP */
  .stats-grid  { grid-template-columns: repeat(2, 1fr); }
  .about-grid  { grid-template-columns: 1fr; }

  /* Footer jadi 1 kolom di HP */
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
}