.background {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /* background: linear-gradient(to right, #fd81d6, #80dfff); */
  background: radial-gradient(#80dfff, #ffaee5);
  display: flex;
  flex-grow: 1;
  z-index: -1;
  opacity: 0.35;
}
/* ══════════════════════════════════════════════════════
   home.css — Perpustakaan SMK
   Lokasi : public/assets/css/home.css
   Fonts  : di-load via <link> di home_layout.php
   ══════════════════════════════════════════════════════ */

/* ── Variabel Warna & Ukuran ── */
:root {
  --navy:         #0d1b3e;
  --biru-aksen:   #1e3a8a;
  --emas:         #c9a84c;
  --putih:        #ffffff;
  --latar:        #f5f7fc;
  --latar-hangat: #f0ede8;
  --teks:         #1a2340;
  --teks-redup:   #6b7a9d;
  --batas:        #e2e8f5;
  --bayangan-kartu:       0 4px 24px rgba(13,27,62,0.08);
  --bayangan-kartu-hover: 0 12px 40px rgba(13,27,62,0.18);
}

/* ── Reset Dasar ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  background: var(--latar);
  color: var(--teks);
}

/* ════════════════════════════════════════
   NAVBAR — Transparan + Scroll Effect
   Ganti blok NAVBAR lama di home.css
   ════════════════════════════════════════ */

.bilah-navigasi {
  position: fixed;
  top: 0; left: 0; width: 100%;
  z-index: 1000;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  padding: 0 2.5rem;
  display: flex; align-items: center; justify-content: space-between;
  height: 70px;
  transition: background 0.35s ease, border-color 0.35s ease,
              backdrop-filter 0.35s ease, height 0.35s ease,
              box-shadow 0.35s ease;
}

/* Saat sudah di-scroll — navbar jadi solid */
.bilah-navigasi.menggulir {
  background: rgba(10, 20, 50, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  height: 64px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

/* Brand / logo */
.merek-perpus {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--putih);
  font-weight: 700; font-size: 1rem;
}
/* Container teks brand */
.teks-merek{
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

/* teks atas */
.teks-atas{
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.5px;
}

/* teks bawah */
.teks-bawah{
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--putih);
  letter-spacing: 0.3px;
}
/* Logo gambar SMK */
.logo-smk-nav {
  height: 38px;
  object-fit: contain;
  border-radius: 90px;
  flex-shrink: 0;
  filter: none;                   
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
  transition: filter 0.3s;
}

.bilah-navigasi.menggulir .logo-smk-nav {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2));
}

/* Menu links */
.daftar-menu {
  display: flex; gap: 2rem;
  list-style: none; margin: 0; padding: 0;
}

.daftar-menu a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none; font-size: 0.9rem; font-weight: 500;
  position: relative; padding-bottom: 3px;
  transition: color 0.2s;
}

/* Garis bawah animasi saat hover */
.daftar-menu a::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--emas);
  border-radius: 2px;
  transition: width 0.25s ease;
}

.daftar-menu a:hover        { color: var(--putih); }
.daftar-menu a:hover::after { width: 100%; }

.daftar-menu a.aktif {
  color: var(--putih);
  font-weight: 600;
}
.daftar-menu a.aktif::after { width: 100%; }

/* Tombol login */
.tombol-masuk {
  background: rgba(255, 255, 255, 0.12);
  color: var(--putih);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  padding: 8px 22px; border-radius: 6px;
  font-size: 0.875rem; font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.tombol-masuk:hover {
  background: var(--putih);
  color: var(--navy);
  border-color: var(--putih);
}

/* Saat navbar solid — tombol login ganti jadi biru */
.bilah-navigasi.menggulir .tombol-masuk {
  background: var(--putih);
  border-color: var(--biru-aksen);
  color: var(--biru-aksen);
}

.bilah-navigasi.menggulir .tombol-masuk:hover {
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

/* ── Burger Button ── */
.tombol-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  margin-left: 12px;
}

.tombol-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--putih);
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

/* Animasi burger → X saat aktif */
.tombol-burger.aktif span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.tombol-burger.aktif span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.tombol-burger.aktif span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ════════════════════════════════════════
   RESPONSIVE NAVBAR
   ════════════════════════════════════════ */

.kanan-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Burger Button ── */
.tombol-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.tombol-burger:hover {
  background: rgba(255, 255, 255, 0.1);
}

.tombol-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--putih);
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

/* Animasi burger → X */
.tombol-burger.aktif span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.tombol-burger.aktif span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.tombol-burger.aktif span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Login mobile - hidden di desktop */
.menu-login-mobile {
  display: none !important;
}

/* ── Tablet (max 992px) ── */
@media (max-width: 992px) {
  .bilah-navigasi {
    padding: 0 1.5rem;
  }

  .daftar-menu {
    gap: 1.2rem;
  }

  .daftar-menu a {
    font-size: 0.85rem;
  }
}

/* ── Mobile (max 768px) ── */
@media (max-width: 768px) {
  .bilah-navigasi {
    padding: 0 1.25rem;
    height: 64px;
  }

  .bilah-navigasi.menggulir {
    height: 60px;
  }

  /* Sembunyikan tombol login desktop */
  .tombol-masuk {
    display: none !important;
  }

  /* Tampilkan burger */
  .tombol-burger {
    display: flex;
  }

  /* Menu dropdown */
  .daftar-menu {
    display: none;
    flex-direction: column;
    gap: 0;
    position: fixed;
    top: 64px;
    left: 0;
    width: 100%;
    background: rgba(10, 20, 50, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(201, 168, 76, 0.2);
    padding: 0.5rem 0 1rem;
    z-index: 999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  }

  .bilah-navigasi.menggulir ~ * .daftar-menu,
  .daftar-menu {
    top: 64px;
  }

  .bilah-navigasi.menggulir .daftar-menu {
    top: 60px;
  }

  .daftar-menu.terbuka {
    display: flex;
  }

  .daftar-menu li {
    width: 100%;
  }

  .daftar-menu a {
    display: block;
    padding: 0.85rem 1.75rem;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85) !important;
  }

  .daftar-menu a::after {
    display: none !important;
  }

  .daftar-menu a:hover,
  .daftar-menu a.aktif {
    background: rgba(255, 255, 255, 0.08);
    color: var(--putih) !important;
    padding-left: 2rem;
  }

  /* Tampilkan login di dalam menu */
  .menu-login-mobile {
    display: block !important;
    border-top: 1px solid rgba(201, 168, 76, 0.25) !important;
    margin-top: 0.5rem;
    padding-top: 0.25rem;
  }

  .menu-login-mobile a {
    color: var(--emas) !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
  }

  .menu-login-mobile a:hover {
    background: rgba(201, 168, 76, 0.1) !important;
    color: var(--emas) !important;
  }

  /* Brand teks lebih kecil */
  .teks-atas {
    font-size: 0.8rem;
  }

  .teks-bawah {
    font-size: 0.82rem;
  }

  .logo-smk-nav {
    height: 34px;
  }
}

/* ── Small Mobile (max 480px) ── */
@media (max-width: 480px) {
  .bilah-navigasi {
    padding: 0 1rem;
  }

  .teks-merek {
    display: none;
  }

  .logo-smk-nav {
    height: 32px;
  }
}

/* ════════════════════════════════════════
   HERO (Halaman Beranda)
   ════════════════════════════════════════ */
.seksi-hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; text-align: center;
}

.latar-hero {
  position: absolute; inset: 0;
  background-image: url('https://images.unsplash.com/photo-1521587760476-6c12a4b040da?w=1600&q=80');
  background-size: cover; background-position: center 30%;
  filter: brightness(0.28) saturate(0.5);
}

.lapisan-hero {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(10,18,50,0.45) 0%,
    rgba(6,12,30,0.88) 100%
  );
}

.konten-hero {
  position: relative; z-index: 2;
  max-width: 720px; padding: 0 2rem;
}

.konten-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800; color: var(--putih);
  line-height: 1.15; margin-bottom: 1.1rem; letter-spacing: -0.5px;
}

.konten-hero p {
  color: rgba(255,255,255,0.72);
  font-size: 1.05rem; line-height: 1.75;
  margin: 0 auto 2.4rem; max-width: 560px;
}

/* Kotak Pencarian Hero */
.kotak-cari-hero {
  display: flex;
  background: var(--putih); border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 36px rgba(0,0,0,0.35);
  max-width: 600px; margin: 0 auto 2.5rem;
}

.kotak-cari-hero input {
  flex: 1; border: none; outline: none;
  padding: 17px 22px;
  font-size: 0.95rem; font-family: 'DM Sans', sans-serif;
  color: var(--teks); background: transparent;
}
.kotak-cari-hero input::placeholder { color: #a0aec0; }

.kotak-cari-hero button {
  background: var(--biru-aksen); color: var(--putih);
  border: none; padding: 0 28px;
  font-size: 0.95rem; font-weight: 600; font-family: 'DM Sans', sans-serif;
  cursor: pointer; transition: background 0.2s; white-space: nowrap;
}
.kotak-cari-hero button:hover { background: #2450b5; }

/* Statistik Hero */
.statistik-hero {
  display: flex; gap: 2rem;
  justify-content: center; flex-wrap: wrap;
}

.item-statistik { display: flex; align-items: center; gap: 10px; color: var(--putih); }

.item-statistik .ikon-statistik {
  width: 38px; height: 38px;
  border: 1.5px solid rgba(255,255,255,0.25); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}

.item-statistik .angka-statistik  { font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.item-statistik .label-statistik  { font-size: 0.78rem; color: rgba(255,255,255,0.55); font-weight: 500; }

/* Petunjuk Gulir */
.petunjuk-gulir {
  position: absolute; bottom: 2rem; left: 50%;
  transform: translateX(-50%); z-index: 2;
  color: rgba(255,255,255,0.35); font-size: 1.2rem;
  animation: pantul 2s infinite;
}

@keyframes pantul {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(9px); }
}

/* ════════════════════════════════════════
   JUDUL SEKSI (dipakai di semua seksi)
   ════════════════════════════════════════ */
.judul-seksi { text-align: center; margin-bottom: 2.2rem; }

.judul-seksi h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700; color: var(--teks); margin: 0 0 0.5rem;
}

.judul-seksi p { color: var(--teks-redup); font-size: 0.95rem; margin: 0; }

/* ════════════════════════════════════════
   SEKSI KOLEKSI POPULER
   ════════════════════════════════════════ */
.seksi-populer { background: var(--putih); padding: 5rem 0; }
.dalam-populer { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

/* Pil Kategori */
.pil-kategori {
  display: flex; gap: 0.5rem;
  justify-content: center; flex-wrap: wrap; margin-bottom: 2.5rem;
}

.pil {
  padding: 7px 20px; border-radius: 999px;
  font-size: 0.875rem; font-weight: 500;
  border: 1.5px solid var(--batas);
  background: var(--putih); color: var(--teks-redup);
  cursor: pointer; transition: all 0.18s; text-decoration: none;
}
.pil:hover  { border-color: var(--navy); color: var(--navy); background: var(--latar); }
.pil.aktif  { background: var(--navy); color: var(--putih); border-color: var(--navy); }

/* Grid Kartu Populer */
.grid-populer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.5rem;
}

@keyframes muncul-naik {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.kartu-populer {
  background: var(--putih);
  border: 1px solid var(--batas); border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(13,27,62,0.07);
  transition: transform 0.25s, box-shadow 0.25s;
  text-decoration: none; color: inherit; display: block;
  animation: muncul-naik 0.45s ease both;
}
.kartu-populer:hover {
  transform: translateY(-6px);
  box-shadow: var(--bayangan-kartu-hover);
  color: inherit; text-decoration: none;
}

.bungkus-sampul-populer { position: relative; overflow: hidden; }

.sampul-populer {
  width: 100%; height: 260px;
  background-size: cover; background-position: top center;
  background-color: #dde4f4; transition: transform 0.35s;
}
.kartu-populer:hover .sampul-populer { transform: scale(1.04); }

.lencana-baru {
  position: absolute; top: 12px; right: 12px;
  background: var(--emas); color: #fff;
  font-size: 0.72rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.isi-kartu-populer { padding: 1rem 1.1rem 1.25rem; }

.label-kategori {
  display: inline-block;
  font-size: 0.75rem; font-weight: 600;
  color: var(--teks-redup); background: var(--latar);
  border: 1px solid var(--batas); border-radius: 6px;
  padding: 2px 10px; margin-bottom: 0.6rem;
}

.judul-kartu {
  font-size: 1rem; font-weight: 700;
  color: var(--teks); margin: 0 0 0.3rem; line-height: 1.35;
}

.penulis-kartu { font-size: 0.82rem; color: var(--teks-redup); margin: 0 0 0.6rem; }

.rating-kartu {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.85rem; font-weight: 600; color: var(--teks);
}
.rating-kartu .bintang { color: #f5a623; }

/* Tombol Lihat Semua */
.ajakan-populer { text-align: center; margin-top: 3rem; }

.tombol-lihat-semua {
  display: inline-block;
  padding: 13px 36px; border-radius: 10px;
  background: var(--navy); color: var(--putih);
  font-size: 0.95rem; font-weight: 600;
  text-decoration: none; transition: background 0.2s, transform 0.2s;
}
.tombol-lihat-semua:hover { background: var(--biru-aksen); color: var(--putih); transform: translateY(-2px); }

/* ── Fix Card Koleksi agar seragam ── */
.grid-populer .kartu-populer {
  display: flex;
  flex-direction: column;
}

.grid-populer .isi-kartu-populer {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.grid-populer .judul-kartu {
  flex: 1;
  min-height: 2.7rem;
}

.grid-populer .tombol-detail-koleksi {
  margin-top: auto;
  padding-top: 0.6rem;
}

/* ── Fix Card Koleksi ── */
.grid-populer .label-kategori {
  display: inline-block !important;
  width: auto !important;
  align-self: flex-start;
}

.grid-populer .judul-kartu {
  flex: 1;
  min-height: auto;
  margin-bottom: 0 !important;
}

.grid-populer .penulis-kartu {
  margin-bottom: 0 !important;
}

.grid-populer .isi-kartu-populer {
  gap: 0.3rem;
}

.grid-populer .tombol-detail-koleksi {
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--batas);
}
/* ════════════════════════════════════════
   RESPONSIVE HERO & BERANDA
   ════════════════════════════════════════ */

/* ── Tablet (max 992px) ── */
@media (max-width: 992px) {
  .konten-hero {
    max-width: 600px;
    padding: 0 1.5rem;
  }

  .kotak-cari-hero {
    max-width: 100%;
  }

  .grid-populer {
    grid-template-columns: repeat(2, 1fr);
  }

  .dalam-populer {
    padding: 0 1.5rem;
  }

  .seksi-populer {
    padding: 4rem 0;
  }
}

/* ── Mobile (max 768px) ── */
@media (max-width: 768px) {
  /* Hero */
  .seksi-hero {
    min-height: 100svh;
    align-items: center;
  }

  .konten-hero {
    padding: 5rem 1.25rem 2rem;
  }

  .konten-hero p {
    font-size: 0.95rem;
    margin-bottom: 1.8rem;
  }

  .kotak-cari-hero {
    flex-direction: row;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 2rem;
  }

  .kotak-cari-hero input {
    padding: 13px 14px;
    font-size: 0.9875rem;
    border-bottom: none;
  }

  .kotak-cari-hero button {
    padding: 14px 20px;
    font-size: 0.9rem;
    width: auto;
    white-space: nowrap;
  }

  .statistik-hero {
    gap: 1.2rem;
  }

  .item-statistik .angka-statistik {
    font-size: 1.1rem;
  }

  .item-statistik .label-statistik {
    font-size: 0.72rem;
  }

  /* Koleksi Populer */
  .seksi-populer {
    padding: 3rem 0;
  }

  .dalam-populer {
    padding: 0 1rem;
  }

  .grid-populer {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .sampul-populer {
    height: 200px;
  }

  .isi-kartu-populer {
    padding: 0.75rem 0.85rem 1rem;
  }

  .judul-kartu {
    font-size: 0.9rem;
  }

  .penulis-kartu {
    font-size: 0.78rem;
  }

  .pil-kategori {
    gap: 0.4rem;
    margin-bottom: 1.8rem;
  }

  .pil {
    padding: 6px 14px;
    font-size: 0.8rem;
  }

  .tombol-lihat-semua {
    padding: 11px 28px;
    font-size: 0.875rem;
  }
}

/* ── Small Mobile (max 480px) ── */
@media (max-width: 480px) {
  .konten-hero {
    padding: 4.5rem 1rem 2rem;
  }

  .konten-hero h1 {
    font-size: 1.9rem;
    margin-bottom: 0.9rem;
  }

  .konten-hero p {
    font-size: 0.875rem;
    line-height: 1.65;
  }

  .statistik-hero {
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;
  }

  .grid-populer {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .sampul-populer {
    height: 160px;
  }

  .judul-kartu {
    font-size: 0.82rem;
  }

  .label-kategori {
    font-size: 0.68rem;
  }

  .rating-kartu {
    font-size: 0.78rem;
  }

  .ajakan-populer {
    margin-top: 2rem;
  }
}

/* ════════════════════════════════════════
   SEKSI LAYANAN
   ════════════════════════════════════════ */
.seksi-layanan { background: var(--latar-hangat); padding: 5rem 0; }
.dalam-layanan { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }

.grid-layanan {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.kartu-layanan {
  background: var(--putih);
  border: 1px solid #e8e4dc; border-radius: 14px;
  padding: 1.75rem 1.75rem 1.5rem;
  transition: transform 0.22s, box-shadow 0.22s;
  animation: muncul-naik 0.45s ease both;
}
.kartu-layanan:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(13,27,62,0.1);
}

.ikon-layanan {
  width: 52px; height: 52px;
  background: #eef1f8; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
}
.ikon-layanan svg {
  width: 26px; height: 26px;
  stroke: var(--navy); fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

.kartu-layanan h3 { font-size: 1rem; font-weight: 700; color: var(--teks); margin: 0 0 0.5rem; }
.kartu-layanan p  { font-size: 0.875rem; color: var(--teks-redup); line-height: 1.6; margin: 0; }

/* ════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════ */
.kaki-halaman { background: var(--navy); color: rgba(255,255,255,0.75); padding: 4rem 0 0; }

.dalam-kaki {
  max-width: 1200px; margin: 0 auto; padding: 0 2rem;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 3rem;
}

.nama-merek-kaki { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; }
.nama-merek-kaki .ikon-merek {
  width: 36px; height: 36px;
  background: var(--emas); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.nama-merek-kaki span { font-size: 1rem; font-weight: 700; color: var(--putih); }

.deskripsi-kaki {
  font-size: 0.875rem; line-height: 1.7;
  margin: 0 0 1.5rem; color: rgba(255,255,255,0.55);
}

.kontak-kaki {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: rgba(255,255,255,0.6); margin-bottom: 0.5rem;
}

.kolom-kaki h4 {
  font-size: 0.8rem; font-weight: 700;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase; letter-spacing: 1px; margin: 0 0 1.1rem;
}
.kolom-kaki ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.kolom-kaki ul li a {
  color: rgba(255,255,255,0.65);
  text-decoration: none; font-size: 0.875rem; transition: color 0.2s;
}
.kolom-kaki ul li a:hover { color: var(--putih); }

.jam-operasional { font-size: 0.85rem; color: rgba(255,255,255,0.6); line-height: 1.8; }
.jam-operasional span { display: block; color: rgba(255,255,255,0.35); font-size: 0.78rem; margin-top: 0.2rem; }

.bawah-kaki {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.25rem 2rem; margin-top: 3.5rem;
  max-width: 1200px; margin-left: auto; margin-right: auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem;
}
.bawah-kaki p { font-size: 0.8rem; color: rgba(255,255,255,0.35); margin: 0; }
.teks-emas { color: var(--emas); }

/* ════════════════════════════════════════
   RESPONSIVE FOOTER
   ════════════════════════════════════════ */

/* ── Tablet (max 992px) ── */
@media (max-width: 992px) {
  .dalam-kaki {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 2rem;
  }

  /* Kolom jam operasional pindah ke bawah */
  .dalam-kaki > div:last-child {
    grid-column: 1 / -1;
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
  }

  .dalam-kaki > div:last-child h4 {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* ── Mobile (max 768px) ── */
@media (max-width: 768px) {
  .kaki-halaman {
    padding: 3rem 0 0;
  }

  .dalam-kaki {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 0 1.25rem;
  }

  /* Kolom brand full width */
  .dalam-kaki > div:first-child {
    grid-column: 1 / -1;
  }

  .nama-merek-kaki span {
    font-size: 0.9rem;
  }

  .deskripsi-kaki {
    font-size: 0.825rem;
  }

  /* Kolom jam operasional full width */
  .dalam-kaki > div:last-child {
    grid-column: 1 / -1;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 1.5rem;
  }

  .bawah-kaki {
    padding: 1.25rem;
    margin-top: 2.5rem;
    flex-direction: column;
    text-align: center;
    gap: 0.4rem;
  }
}

/* ── Small Mobile (max 480px) ── */
@media (max-width: 480px) {
  .kaki-halaman {
    padding: 2.5rem 0 0;
  }

  .dalam-kaki {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding: 0 1rem;
  }

  /* Semua kolom full width */
  .dalam-kaki > div:first-child,
  .dalam-kaki > div:last-child {
    grid-column: 1;
  }

  .dalam-kaki > div:last-child {
    flex-direction: column;
    gap: 0.5rem;
  }

  .nama-merek-kaki {
    gap: 8px;
  }

  .nama-merek-kaki span {
    font-size: 0.875rem;
  }

  .kolom-kaki h4 {
    margin-bottom: 0.75rem;
  }

  .bawah-kaki {
    padding: 1rem;
    margin-top: 2rem;
  }

  .bawah-kaki p {
    font-size: 0.75rem;
  }
}

/* ════════════════════════════════════════
   HALAMAN KOLEKSI (book.php)
   ════════════════════════════════════════ */

/* Header halaman koleksi */
.header-halaman {
  background: linear-gradient(135deg, var(--navy) 0%, #1a2f6a 100%);
  padding: 5rem 0 3rem; text-align: center;
  position: relative; overflow: hidden;
}
.header-halaman::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
.header-halaman h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--putih); margin: 0 0 0.5rem; position: relative;
}
.header-halaman p { color: rgba(255,255,255,0.6); font-size: 0.95rem; margin: 0; position: relative; }

.garis-emas {
  width: 48px; height: 3px; background: var(--emas);
  margin: 1rem auto; border-radius: 2px; position: relative;
}

/* Area konten buku */
.bungkus-halaman-buku { max-width: 1280px; margin: 0 auto; padding: 2.5rem 2rem 4rem; }

/* Bilah alat (search + count) */
.bilah-alat-buku {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap;
}

.jumlah-buku { font-size: 0.9rem; color: var(--teks-redup); font-weight: 500; }
.jumlah-buku span { color: var(--navy); font-weight: 700; }

/* Form pencarian */
.form-cari {
  display: flex;
  background: var(--putih); border-radius: 10px; overflow: hidden;
  border: 1.5px solid var(--batas);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-cari:focus-within {
  border-color: var(--biru-aksen);
  box-shadow: 0 2px 16px rgba(30,58,138,0.12);
}
.form-cari input {
  border: none; outline: none; padding: 11px 18px;
  font-size: 0.9rem; font-family: 'DM Sans', sans-serif;
  color: var(--teks); width: 260px; background: transparent;
}
.form-cari input::placeholder { color: #a0aec0; }
.form-cari button {
  background: var(--navy); color: var(--putih);
  border: none; padding: 0 20px;
  font-size: 0.875rem; font-weight: 600; font-family: 'DM Sans', sans-serif;
  cursor: pointer; transition: background 0.2s;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.form-cari button:hover { background: var(--biru-aksen); }

/* Grid buku */
.grid-buku {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.75rem;
}

/* Kartu buku */
.kartu-buku {
  background: var(--putih); border-radius: 14px; overflow: hidden;
  box-shadow: var(--bayangan-kartu);
  border: 1px solid var(--batas);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex; flex-direction: column;
  animation: muncul-naik 0.4s ease both;
}
.kartu-buku:hover { transform: translateY(-6px); box-shadow: var(--bayangan-kartu-hover); }

.tautan-sampul { display: block; position: relative; overflow: hidden; }

.sampul-buku {
  width: 100%; height: 240px;
  background-size: cover; background-position: top center;
  background-repeat: no-repeat; background-color: #dde4f4;
  transition: transform 0.35s ease;
}
.tautan-sampul:hover .sampul-buku { transform: scale(1.04); }

.info-buku {
  padding: 1rem 1.1rem 1.2rem;
  flex: 1; display: flex; flex-direction: column; gap: 0.5rem;
}

.judul-buku {
  font-size: 0.9rem; font-weight: 600; color: var(--teks); line-height: 1.45; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.tahun-buku { font-size: 0.78rem; color: var(--teks-redup); font-weight: 500; margin: 0; }

.tombol-detail {
  margin-top: auto; display: inline-block; padding: 7px 0;
  font-size: 0.8rem; font-weight: 600; color: var(--biru-aksen);
  text-decoration: none; border-top: 1px solid var(--batas); transition: color 0.2s;
}
.tombol-detail:hover { color: var(--navy); }
.tombol-detail::after { content: ' →'; }

/* Kondisi kosong */
.kondisi-kosong { grid-column: 1/-1; text-align: center; padding: 5rem 2rem; color: var(--teks-redup); }
.kondisi-kosong .ikon-kosong { font-size: 3.5rem; margin-bottom: 1rem; opacity: 0.5; }
.kondisi-kosong h3 { font-size: 1.2rem; color: var(--teks); margin-bottom: 0.5rem; }
.kondisi-kosong p  { font-size: 0.9rem; }

/* Paginasi */
.bungkus-pager { margin-top: 3rem; display: flex; justify-content: center; }
.bungkus-pager nav ul { display: flex; list-style: none; gap: 6px; margin: 0; padding: 0; }
.bungkus-pager nav ul li a,
.bungkus-pager nav ul li span {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 8px;
  font-size: 0.875rem; font-weight: 600; text-decoration: none;
  border: 1.5px solid var(--batas); color: var(--teks);
  background: var(--putih); transition: all 0.2s;
}
.bungkus-pager nav ul li a:hover     { background: var(--navy); color: var(--putih); border-color: var(--navy); }
.bungkus-pager nav ul li.active a    { background: var(--navy); color: var(--putih); border-color: var(--navy); }

/* ════════════════════════════════════════
   RESPONSIVE KOLEKSI BUKU
   ════════════════════════════════════════ */

/* ── Tablet (max 992px) ── */
@media (max-width: 992px) {
  .bungkus-halaman-buku {
    padding: 2rem 1.5rem 3rem;
  }

  .grid-buku {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1.25rem;
  }

  .sampul-buku {
    height: 220px;
  }

  .form-cari input {
    width: 200px;
  }

  /* Layanan */
  .grid-layanan {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer */
  .dalam-kaki {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

/* ── Mobile (max 768px) ── */
@media (max-width: 768px) {
  /* Header halaman */
  .header-halaman {
    padding: 4.5rem 1.25rem 2.5rem;
  }

  /* Bilah alat */
  .bilah-alat-buku {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .jumlah-buku {
    text-align: center;
  }

  /* Form cari */
  .form-cari {
    width: 100%;
  }

  .form-cari input {
    width: 100%;
    flex: 1;
    padding: 12px 14px;
  }

  .form-cari button {
    padding: 0 16px;
    font-size: 0.85rem;
  }

  /* Grid buku */
  .bungkus-halaman-buku {
    padding: 1.5rem 1rem 3rem;
  }

  .grid-buku {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .sampul-buku {
    height: 200px;
  }

  .info-buku {
    padding: 0.75rem 0.85rem 1rem;
  }

  .judul-buku {
    font-size: 0.85rem;
  }

  .tahun-buku {
    font-size: 0.75rem;
  }

  .tombol-detail {
    font-size: 0.78rem;
    padding: 6px 0;
  }

  /* Pagination */
  .bungkus-pager {
    margin-top: 2rem;
  }

  .bungkus-pager nav ul li a,
  .bungkus-pager nav ul li span {
    width: 34px;
    height: 34px;
    font-size: 0.8rem;
  }

  /* Layanan */
  .grid-layanan {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* Footer */
  .dalam-kaki {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    padding: 0 1.25rem;
  }

  .dalam-kaki > div:first-child {
    grid-column: 1 / -1;
  }

  .dalam-kaki > div:last-child {
    grid-column: 1 / -1;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 1.5rem;
  }

  .bawah-kaki {
    flex-direction: column;
    text-align: center;
    padding: 1.25rem;
    margin-top: 2rem;
    gap: 0.4rem;
  }
}

/* ── Small Mobile (max 480px) ── */
@media (max-width: 480px) {
  .header-halaman {
    padding: 4rem 1rem 2rem;
  }

  .header-halaman h1 {
    font-size: 1.7rem;
  }

  .header-halaman p {
    font-size: 0.775rem;
  }

  .bungkus-halaman-buku {
    padding: 1.25rem 0.75rem 2.5rem;
  }

  .grid-buku {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .sampul-buku {
    height: 170px;
  }

  .info-buku {
    padding: 0.65rem 0.75rem 0.85rem;
    gap: 0.35rem;
  }

  .judul-buku {
    font-size: 0.8rem;
  }

  .kondisi-kosong {
    padding: 3rem 1rem;
  }

  .kondisi-kosong .ikon-kosong {
    font-size: 2.5rem;
  }

  /* Layanan */
  .grid-layanan {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .dalam-kaki {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 1rem;
  }

  .dalam-kaki > div:last-child {
    flex-direction: column;
    gap: 0.5rem;
  }

  .bawah-kaki {
    padding: 1rem;
    margin-top: 1.5rem;
  }

  .bawah-kaki p {
    font-size: 0.72rem;
  }
}
/* ════════════════════════════════════════
   HALAMAN LOGIN
   ════════════════════════════════════════ */

/* Pembungkus halaman — tengah layar */
.halaman-masuk {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: #dde3f0;
}

/* Kartu login */
.kartu-masuk {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 36px rgba(13,27,62,0.15);
  width: 340px;
  padding: 1.6rem 1.8rem 1.4rem;
}

.kepala-masuk {
  display: flex;
  flex-direction: column;
  align-items: center; 
  text-align: center;
  margin-bottom: 1.2rem; 
}

.logo-masuk {
  width: 200px;         
  height: auto;         
  max-height: 75px;     
  margin-bottom: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-masuk img {
  width: 100%;         
  height: auto;         
  object-fit: contain; 
  display: block;
}

.nama-sekolah  { font-size: 0.88rem; font-weight: 700; color: var(--teks); }
.tagline-masuk { 
  font-size: 0.76rem; 
  color: var(--teks-redup); 
  margin-top: 4px;
}

/* Garis pemisah */
.pemisah-masuk {
  height: 1px;
  background: var(--batas);
  margin: 0.85rem 0;
}

/* Judul "Login" */
.judul-masuk {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem; font-weight: 700;
  color: var(--teks); text-align: center;
  margin-bottom: 0.9rem;
}

/* Pesan error / sukses */
.pesan-masuk {
  border-radius: 7px;
  padding: 7px 11px;
  font-size: 0.78rem;
  margin-bottom: 0.75rem;
  line-height: 1.45;
}

.pesan-error  { background: #fff0f0; border: 1px solid #f5c2c2; color: #c0392b; }
.pesan-sukses { background: #f0fff6; border: 1px solid #a8e6c3; color: #1a7a4a; }

/* Grup input (label + field) */
.grup-input { margin-bottom: 0.6rem; }

.grup-input label {
  display: block;
  font-size: 0.75rem; font-weight: 600;
  color: var(--teks); margin-bottom: 0.28rem;
}

.grup-input input {
  width: 100%;
  padding: 8px 11px;
  background: #f3f5fb;
  border: 1.5px solid var(--batas);
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--teks); outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

.grup-input input:focus {
  border-color: #3b5bdb;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(59,91,219,.1);
}

.grup-input input::placeholder { color: #b8c3d8; }

/* Baris "ingat saya" */
.baris-ingat {
  display: flex; align-items: center; gap: 6px;
  margin: 0.45rem 0 0.9rem;
}

.baris-ingat input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: #3b5bdb; cursor: pointer;
}

.baris-ingat label {
  font-size: 0.78rem;
  color: var(--teks-redup); cursor: pointer;
}

/* Tombol submit */
.tombol-submit-masuk {
  width: 100%; padding: 10px;
  background: #3b5bdb; color: #ffffff;
  border: none; border-radius: 8px;
  font-size: 0.88rem; font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background .18s, transform .13s;
}
.tombol-submit-masuk:hover  { background: #2f4ec0; transform: translateY(-1px); }
.tombol-submit-masuk:active { transform: translateY(0); }

/* Tautan tambahan (lupa password, dll) */
.tautan-ekstra {
  text-align: center;
  font-size: 0.78rem;
  color: var(--teks-redup);
  margin-top: 0.55rem;
}

.tautan-ekstra a {
  color: #3b5bdb; text-decoration: none; font-weight: 600;
  transition: color .18s;
}
.tautan-ekstra a:hover { color: #2f4ec0; }

/* Tautan kembali ke beranda */
.tautan-kembali {
  display: block; text-align: center;
  margin-top: 0.85rem;
  font-size: 0.78rem; font-weight: 500;
  color: #3b5bdb; text-decoration: none;
  transition: color .18s;
}
.tautan-kembali:hover { color: #2f4ec0; }

/* ════════════════════════════════════════
   DETAIL BUKU
   ════════════════════════════════════════ */
.bungkus-detail-buku {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 2rem 5rem;
}

.tombol-kembali {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--biru-aksen);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 2rem;
  transition: color 0.2s;
}
.tombol-kembali:hover { color: var(--navy); }

.layout-detail-buku {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3rem;
  align-items: start;
}

/* Kolom Cover */
.kolom-cover-buku {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cover-detail {
  width: 100%;
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center;
  background-color: #dde4f4;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(13,27,62,0.18);
}

.badge-stok-detail {
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
}
.badge-stok-detail.tersedia {
  background: rgba(16,185,129,0.1);
  color: #059669;
  border: 1.5px solid rgba(16,185,129,0.25);
}
.badge-stok-detail.habis {
  background: rgba(239,68,68,0.1);
  color: #dc2626;
  border: 1.5px solid rgba(239,68,68,0.25);
}

.tombol-pinjam {
  display: block;
  text-align: center;
  padding: 13px;
  background: var(--navy);
  color: var(--putih);
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.tombol-pinjam:hover {
  background: var(--biru-aksen);
  transform: translateY(-2px);
  color: var(--putih);
}

.kotak-ebook {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--latar);
  border: 1.5px solid var(--batas);
  border-radius: 10px;
}
.ikon-ebook { font-size: 1.5rem; flex-shrink: 0; }
.label-ebook { font-size: 0.85rem; font-weight: 700; color: var(--teks); }
.sub-ebook { font-size: 0.75rem; color: var(--teks-redup); margin-top: 2px; }
.tombol-ebook {
  margin-left: auto;
  padding: 6px 14px;
  background: var(--biru-aksen);
  color: var(--putih);
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
}
.tombol-ebook:hover { background: var(--navy); color: var(--putih); }

/* Kolom Info */
.kolom-info-buku { display: flex; flex-direction: column; gap: 1rem; }

.judul-detail {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--teks);
  line-height: 1.25;
  margin: 0.5rem 0 0;
}

.penulis-detail {
  font-size: 1rem;
  color: var(--teks-redup);
  margin: 0;
}

.garis-detail {
  height: 1px;
  background: var(--batas);
  margin: 0.5rem 0;
}

.deskripsi-detail h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--teks);
  margin: 0 0 0.75rem;
}
.deskripsi-detail p {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--teks-redup);
  margin: 0 0 0.75rem;
}

/* Tabel Info */
.tabel-info-buku {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1.5px solid var(--batas);
  border-radius: 12px;
  overflow: hidden;
}
.baris-info {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--batas);
  gap: 1rem;
}
.baris-info:last-child { border-bottom: none; }
.label-info {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--teks-redup);
  width: 130px;
  flex-shrink: 0;
}
.nilai-info {
  font-size: 0.875rem;
  color: var(--teks);
  font-weight: 500;
}
.teks-hijau { color: #059669 !important; font-weight: 600 !important; }
.teks-merah { color: #dc2626 !important; font-weight: 600 !important; }

/* ── Responsive Detail Buku ── */
@media (max-width: 768px) {
  .bungkus-detail-buku {
    padding: 1.5rem 1rem 3rem;
  }

  .layout-detail-buku {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .kolom-cover-buku {
    position: static;
    max-width: 260px;
    margin: 0 auto;
    width: 100%;
  }

  .judul-detail {
    font-size: 1.4rem;
  }
}

@media (max-width: 480px) {
  .kolom-cover-buku {
    max-width: 220px;
  }

  .baris-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 14px;
  }

  .label-info {
    width: auto;
    font-size: 0.75rem;
  }
}
.kolom-info-buku .label-kategori {
  display: inline-block !important;
  width: auto !important;
  align-self: flex-start;
}

/* ════════════════════════════════════════
   HALAMAN LAYANAN
   ════════════════════════════════════════ */

/* Pembungkus konten layanan */
.bungkus-layanan {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
}

/* Grid kartu layanan besar (2 kolom) */
.grid-layanan-besar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

/* Kartu layanan individual */
.kartu-layanan-besar {
  background: var(--putih);
  border: 1px solid var(--batas);
  border-radius: 16px;
  padding: 1.75rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  box-shadow: 0 2px 16px rgba(13,27,62,0.06);
  transition: transform 0.22s, box-shadow 0.22s;
  animation: muncul-naik 0.45s ease both;
}

.kartu-layanan-besar:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 36px rgba(13,27,62,0.12);
}

/* Ikon layanan besar */
.ikon-layanan-besar {
  width: 56px; height: 56px;
  background: #eef1f8;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.ikon-layanan-besar svg {
  width: 28px; height: 28px;
  stroke: var(--navy); fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* Isi teks kartu layanan */
.isi-layanan-besar { flex: 1; }

.isi-layanan-besar h3 {
  font-size: 1rem; font-weight: 700;
  color: var(--teks); margin: 0 0 0.4rem;
}

.isi-layanan-besar p {
  font-size: 0.85rem; color: var(--teks-redup);
  line-height: 1.6; margin: 0 0 0.85rem;
}

/* Daftar fitur layanan */
.daftar-fitur {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: flex; flex-direction: column; gap: 0.35rem;
}

.daftar-fitur li {
  font-size: 0.82rem; color: var(--teks);
  display: flex; align-items: flex-start; gap: 6px;
}

.daftar-fitur li::before {
  content: '✓';
  color: var(--biru-aksen);
  font-weight: 700; font-size: 0.8rem;
  flex-shrink: 0; margin-top: 1px;
}

/* Daftar jam operasional */
.daftar-jam {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
}

.daftar-jam li {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.82rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--batas);
}

.daftar-jam li:last-child { border-bottom: none; padding-bottom: 0; }

.daftar-jam .hari  { color: var(--teks); font-weight: 600; }
.daftar-jam .waktu { color: var(--teks-redup); }
.daftar-jam .tutup { color: #e53e3e; font-weight: 600; }

/* Label status */
.label-status {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700;
  padding: 3px 12px; border-radius: 999px;
  letter-spacing: 0.3px;
}

.label-status.tersedia {
  background: #f0fff4;
  color: #1a7a4a;
  border: 1px solid #a8e6c3;
}

.label-status.segera {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fcd34d;
}

/* Banner kontak */
.banner-kontak {
  background: linear-gradient(135deg, var(--navy) 0%, #1a2f6a 100%);
  border-radius: 20px;
  padding: 3rem 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.banner-kontak::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}

.isi-banner-kontak { position: relative; z-index: 1; }

.banner-kontak h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem; font-weight: 700;
  color: var(--putih); margin: 0 0 0.75rem;
}

.banner-kontak p {
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem; margin: 0 0 1.5rem;
  max-width: 480px; margin-left: auto; margin-right: auto;
}

.daftar-kontak-banner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}

.item-kontak-banner {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.8);
}

/* ── Responsif ── */
@media (max-width: 768px) {
  .grid-layanan-besar    { grid-template-columns: 1fr; }
  .kartu-layanan-besar   { flex-direction: column; }
  .ikon-layanan-besar    { width: 48px; height: 48px; }
  .banner-kontak         { padding: 2rem 1.5rem; }
  .daftar-kontak-banner  { flex-direction: column; gap: 0.5rem; }
}
/* ════════════════════════════════════════
   HALAMAN LEADERBOARD
   Paste di bagian paling bawah home.css
   ════════════════════════════════════════ */

/* Pembungkus utama */
.bungkus-leaderboard {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 2rem 5rem;
}

/* ── Baris atas: periode + panduan poin ── */
.baris-atas-leaderboard {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
  align-items: stretch;
}

/* Kotak periode */
.kotak-periode {
  background: var(--navy);
  border-radius: 16px;
  padding: 1.25rem 1.75rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: var(--putih);
  min-width: 320px;
}

.ikon-periode { font-size: 2rem; }

.label-periode {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}

.nilai-periode {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--putih);
}

.nilai-periode.hitung-mundur { color: var(--emas); }

.pemisah-vertikal {
  width: 1px;
  background: rgba(255,255,255,0.15);
  align-self: stretch;
}

/* Kotak panduan poin */
.kotak-panduan-poin {
  background: var(--putih);
  border: 1px solid var(--batas);
  border-radius: 16px;
  padding: 1.1rem 1.5rem;
}

.judul-panduan {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--teks-redup);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.75rem;
}

.daftar-panduan {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.item-panduan {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid;
}

.item-panduan.positif {
  background: #f0fff4;
  border-color: #a8e6c3;
  color: #1a7a4a;
}

.item-panduan.negatif {
  background: #fff0f0;
  border-color: #f5c2c2;
  color: #c0392b;
}

.ikon-panduan  { font-size: 0.9rem; }
.nama-panduan  { color: inherit; }
.nilai-panduan { font-weight: 700; margin-left: 2px; }

/* ── Area podium ── */
.area-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  margin-bottom: 3rem;
  background: linear-gradient(180deg, #f0ede8 0%, var(--latar) 100%);
  border-radius: 20px;
  padding: 2.5rem 2rem 0;
  overflow: hidden;
}

.podium-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 220px;
}

.mahkota-juara {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  animation: goyang 1.5s ease-in-out infinite;
}

@keyframes goyang {
  0%,100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}

/* Avatar podium */
.avatar-podium { position: relative; margin-bottom: 0.6rem; }

.foto-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 800; color: var(--putih);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  border: 3px solid var(--putih);
}

.foto-juara {
  width: 88px; height: 88px;
  font-size: 1.6rem;
  box-shadow: 0 6px 24px rgba(201,168,76,0.45);
  border-color: var(--emas);
}

.lencana-podium {
  position: absolute;
  bottom: -4px; right: -4px;
  width: 24px; height: 24px;
  background: var(--navy);
  color: var(--putih);
  border-radius: 50%;
  font-size: 0.72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--putih);
}

.lencana-juara {
  width: 28px; height: 28px;
  background: var(--emas);
  font-size: 0.8rem;
}

.lencana-tiga { background: #cd7f32; }

/* Teks podium */
.nama-podium  { font-size: 0.9rem; font-weight: 700; color: var(--teks); margin-bottom: 2px; text-align: center; }
.kelas-podium { font-size: 0.75rem; color: var(--teks-redup); margin-bottom: 0.4rem; }
.poin-podium  { font-size: 0.85rem; font-weight: 600; color: var(--teks); margin-bottom: 0.75rem; }
.poin-juara   { color: var(--emas); font-size: 1rem; }

/* Tiang podium */
.tiang-podium {
  width: 100%;
  border-radius: 8px 8px 0 0;
  display: flex; align-items: center; justify-content: center;
}

.tiang-satu { background: linear-gradient(180deg, #c9a84c, #e8c76a); height: 110px; }
.tiang-dua  { background: linear-gradient(180deg, #9da8b7, #bec5d0); height: 80px; }
.tiang-tiga { background: linear-gradient(180deg, #cd7f32, #e8a87c); height: 60px; }

/* ── Tabel peringkat ── */
.kotak-tabel-peringkat {
  background: var(--putih);
  border: 1px solid var(--batas);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(13,27,62,0.06);
}

.kepala-tabel-peringkat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--batas);
}

.kepala-tabel-peringkat h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem; font-weight: 700;
  color: var(--teks); margin: 0;
}

.pilih-bulan {
  padding: 7px 14px;
  border: 1.5px solid var(--batas);
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--teks);
  background: var(--latar);
  cursor: pointer; outline: none;
  transition: border-color 0.2s;
}
.pilih-bulan:focus { border-color: var(--biru-aksen); }

/* Tabel */
.bungkus-tabel { overflow-x: auto; }

.tabel-peringkat {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.tabel-peringkat thead tr {
  background: var(--latar);
  border-bottom: 2px solid var(--batas);
}

.tabel-peringkat th {
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--teks-redup);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.tabel-peringkat td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--batas);
  vertical-align: middle;
}

.tabel-peringkat tbody tr:last-child td { border-bottom: none; }

/* Warna baris top 3 */
.baris-juara { background: #fffbeb; }
.baris-dua   { background: #f8f9fb; }
.baris-tiga  { background: #fdf6f0; }

.tabel-peringkat tbody tr:hover { background: var(--latar); transition: background 0.15s; }
.baris-juara:hover { background: #fff3cc !important; }

/* Kolom peringkat */
.kolom-peringkat { text-align: center; width: 60px; }
.ikon-peringkat  { font-size: 1.4rem; }
.nomor-peringkat {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--latar);
  border: 1.5px solid var(--batas);
  border-radius: 50%;
  font-size: 0.8rem; font-weight: 700; color: var(--teks-redup);
}

/* Kolom anggota */
.kolom-anggota { min-width: 180px; }

.sel-anggota {
  display: flex; align-items: center; gap: 10px;
}

.avatar-kecil {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 800;
  color: var(--putih); flex-shrink: 0;
}

.nama-anggota  { font-size: 0.875rem; font-weight: 600; color: var(--teks); }
.kelas-anggota { font-size: 0.75rem; color: var(--teks-redup); margin-top: 1px; }

/* Kolom poin detail */
.kolom-poin-detail { text-align: center; }

.pil-poin {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem; font-weight: 700;
}

.pil-poin.positif {
  background: #f0fff4; color: #1a7a4a;
  border: 1px solid #a8e6c3;
}

.pil-poin.negatif {
  background: #fff0f0; color: #c0392b;
  border: 1px solid #f5c2c2;
}

.pil-poin.nol {
  background: var(--latar); color: var(--teks-redup);
  border: 1px solid var(--batas);
}

/* Kolom total */
.kolom-total { text-align: right; padding-right: 1.5rem !important; }

.angka-total {
  font-size: 1rem; font-weight: 800;
  color: var(--navy);
}

.satuan-total {
  font-size: 0.72rem; color: var(--teks-redup);
  margin-left: 3px;
}

/* ── Responsif ── */
@media (max-width: 900px) {
  .baris-atas-leaderboard { grid-template-columns: 1fr; }
  .kotak-periode          { min-width: unset; }
  .kolom-poin-detail      { display: none; } /* sembunyikan detail di mobile */
}

@media (max-width: 640px) {
  .area-podium   { padding: 1.5rem 0.5rem 0; }
  .foto-juara    { width: 72px; height: 72px; font-size: 1.3rem; }
  .tiang-satu    { height: 80px; }
  .tiang-dua     { height: 60px; }
  .tiang-tiga    { height: 45px; }
  .nama-podium   { font-size: 0.78rem; }
  .daftar-panduan{ flex-direction: column; }
}

/* ════════════════════════════════════════
   HALAMAN KONTAK
   Paste di bagian paling bawah home.css
   ════════════════════════════════════════ */

/* Pembungkus utama */
.bungkus-kontak {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

/* ── Grid utama: info kiri + form kanan ── */
.grid-kontak-utama {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 2rem;
  align-items: start;
}

/* Judul & deskripsi kolom */
.judul-kolom-kontak {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem; font-weight: 700;
  color: var(--teks); margin: 0 0 0.4rem;
}

.deskripsi-kolom-kontak {
  font-size: 0.875rem; color: var(--teks-redup);
  line-height: 1.65; margin: 0 0 1.5rem;
}

/* ── Kartu info kontak ── */
.daftar-info-kontak {
  display: flex; flex-direction: column; gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.kartu-info-kontak {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--putih);
  border: 1px solid var(--batas);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  transition: box-shadow 0.2s, transform 0.2s;
}

.kartu-info-kontak:hover {
  box-shadow: 0 4px 20px rgba(13,27,62,0.08);
  transform: translateX(4px);
}

.ikon-info-kontak {
  width: 40px; height: 40px;
  background: #eef1f8; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.ikon-info-kontak svg {
  width: 20px; height: 20px;
  stroke: var(--navy); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.label-info-kontak {
  font-size: 0.72rem; font-weight: 700;
  color: var(--teks-redup);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 3px;
}

.nilai-info-kontak {
  font-size: 0.875rem; color: var(--teks);
  line-height: 1.6;
}

.teks-tutup { color: #e53e3e; font-weight: 600; }

/* ── Sosial media ── */
.area-sosmed { }

.label-sosmed {
  font-size: 0.72rem; font-weight: 700;
  color: var(--teks-redup);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 0.75rem;
}

.daftar-sosmed {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
}

.tombol-sosmed {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 16px;
  background: var(--putih);
  border: 1.5px solid var(--batas);
  border-radius: 8px;
  font-size: 0.82rem; font-weight: 600;
  color: var(--teks); text-decoration: none;
  transition: all 0.2s;
}

.tombol-sosmed svg {
  width: 16px; height: 16px;
  stroke: var(--teks-redup);
  transition: stroke 0.2s;
}

.tombol-sosmed:hover {
  background: var(--navy); color: var(--putih);
  border-color: var(--navy);
}

.tombol-sosmed:hover svg { stroke: var(--putih); }

/* ── Form kontak ── */
.kolom-form-kontak {
  background: var(--putih);
  border: 1px solid var(--batas);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 2px 16px rgba(13,27,62,0.06);
}

.pesan-form {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.pesan-form.sukses { background: #f0fff6; border: 1px solid #a8e6c3; color: #1a7a4a; }
.pesan-form.gagal  { background: #fff0f0; border: 1px solid #f5c2c2; color: #c0392b; }

.form-kontak { display: flex; flex-direction: column; gap: 1rem; }

.baris-form-kontak {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.grup-form-kontak { display: flex; flex-direction: column; gap: 0.3rem; }

.grup-form-kontak label {
  font-size: 0.78rem; font-weight: 600;
  color: var(--teks);
}

.wajib { color: #e53e3e; }

.grup-form-kontak input,
.grup-form-kontak select,
.grup-form-kontak textarea {
  width: 100%;
  padding: 9px 13px;
  background: #f3f5fb;
  border: 1.5px solid var(--batas);
  border-radius: 8px;
  font-size: 0.875rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--teks); outline: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  resize: vertical;
}

.grup-form-kontak input:focus,
.grup-form-kontak select:focus,
.grup-form-kontak textarea:focus {
  border-color: var(--biru-aksen);
  background: var(--putih);
  box-shadow: 0 0 0 3px rgba(30,58,138,0.08);
}

.grup-form-kontak input::placeholder,
.grup-form-kontak textarea::placeholder { color: #b8c3d8; }

/* Tombol kirim */
.tombol-kirim-kontak {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px;
  background: var(--navy); color: var(--putih);
  border: none; border-radius: 10px;
  font-size: 0.95rem; font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.tombol-kirim-kontak:hover  { background: var(--biru-aksen); transform: translateY(-2px); }
.tombol-kirim-kontak:active { transform: translateY(0); }

.catatan-form {
  font-size: 0.75rem; color: var(--teks-redup);
  margin: 0; line-height: 1.5; text-align: center;
}

/* ── Peta lokasi ── */
.area-peta { }

.kepala-area-peta {
  text-align: center; margin-bottom: 1.25rem;
}

.kepala-area-peta h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem; font-weight: 700;
  color: var(--teks); margin: 0 0 0.3rem;
}

.kepala-area-peta p {
  font-size: 0.875rem; color: var(--teks-redup); margin: 0;
}

.bingkai-peta {
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--batas);
  box-shadow: 0 2px 16px rgba(13,27,62,0.07);
  height: 380px;
}

.bingkai-peta iframe {
  width: 100%; height: 100%; border: 0; display: block;
}

/* Placeholder peta (sebelum embed diisi) */
.placeholder-peta {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #eef1f8, #dde3f0);
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; flex-direction: column; text-align: center;
  padding: 2rem;
}

.ikon-peta { font-size: 3rem; opacity: 0.5; }

.teks-placeholder-peta {
  display: flex; flex-direction: column; gap: 0.4rem;
}

.teks-placeholder-peta strong { font-size: 1rem; color: var(--teks); }
.teks-placeholder-peta span   { font-size: 0.85rem; color: var(--teks-redup); }
.teks-placeholder-peta code   {
  font-size: 0.78rem; background: rgba(255,255,255,0.7);
  padding: 4px 10px; border-radius: 6px; color: var(--biru-aksen);
}

/* ── FAQ ── */
.area-faq { }

.judul-faq {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem; font-weight: 700;
  color: var(--teks); margin: 0 0 1.5rem; text-align: center;
}

.grid-faq {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}

.kartu-faq {
  background: var(--putih);
  border: 1px solid var(--batas);
  border-radius: 12px;
  padding: 1.25rem 1.25rem 1.1rem;
  transition: transform 0.2s, box-shadow 0.2s;
  border-left: 3px solid var(--emas);
}

.kartu-faq:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(13,27,62,0.09);
}

.pertanyaan-faq {
  font-size: 0.9rem; font-weight: 700;
  color: var(--teks); margin-bottom: 0.6rem;
  line-height: 1.4;
}

.jawaban-faq {
  font-size: 0.82rem; color: var(--teks-redup);
  line-height: 1.65;
}

/* ── Responsif ── */
@media (max-width: 900px) {
  .grid-kontak-utama { grid-template-columns: 1fr; }
  .grid-faq          { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .baris-form-kontak { grid-template-columns: 1fr; }
  .grid-faq          { grid-template-columns: 1fr; }
  .bingkai-peta      { height: 260px; }
  .daftar-sosmed     { flex-direction: column; }
}
/* ════════════════════════════════════════
   REGISTER PAGE
   Paste di bagian paling bawah home.css
   ════════════════════════════════════════ */

.register-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: #dde3f0;
}

.register-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 36px rgba(13,27,62,0.15);
  width: 380px;
  padding: 1.6rem 1.8rem 1.4rem;
}

/* Head */
.register-head {
  text-align: center;
  margin-bottom: 0.9rem;
}

.register-logo {
  width: 72px; height: 72px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 0.55rem;
  box-shadow: 0 3px 14px rgba(13,27,62,0.25);
  border: 2px solid var(--batas);
  background: var(--putih);
  display: flex; align-items: center; justify-content: center;
  padding: 4px;
}

.register-logo img {
  width: 100%; height: 100%;
  object-fit: contain; display: block;
}

.register-school  { font-size: 0.88rem; font-weight: 700; color: var(--teks); }
.register-tagline { font-size: 0.74rem; color: var(--teks-redup); margin-top: 2px; }

/* Divider */
.register-divider {
  height: 1px;
  background: var(--batas);
  margin: 0.85rem 0;
}

/* Title */
.register-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem; font-weight: 700;
  color: var(--teks); text-align: center;
  margin-bottom: 0.9rem;
}

/* Alert */
.register-alert {
  border-radius: 7px;
  padding: 7px 11px;
  font-size: 0.78rem;
  margin-bottom: 0.75rem;
  line-height: 1.45;
}

.register-alert-error {
  background: #fff0f0;
  border: 1px solid #f5c2c2;
  color: #c0392b;
}

/* Field */
.register-field {
  margin-bottom: 0.6rem;
}

.register-field label {
  display: block;
  font-size: 0.75rem; font-weight: 600;
  color: var(--teks); margin-bottom: 0.28rem;
}

.register-field input {
  width: 100%;
  padding: 8px 11px;
  background: #f3f5fb;
  border: 1.5px solid var(--batas);
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--teks); outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

.register-field input:focus {
  border-color: #3b5bdb;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(59,91,219,.1);
}

.register-field input::placeholder { color: #b8c3d8; }

/* Submit button */
.register-btn {
  width: 100%; padding: 10px;
  background: #3b5bdb; color: #ffffff;
  border: none; border-radius: 8px;
  font-size: 0.88rem; font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer; margin-top: 0.4rem;
  transition: background .18s, transform .13s;
}

.register-btn:hover  { background: #2f4ec0; transform: translateY(-1px); }
.register-btn:active { transform: translateY(0); }

/* Extra link */
.register-extra {
  text-align: center;
  font-size: 0.78rem;
  color: var(--teks-redup);
  margin-top: 0.55rem;
}

.register-extra a {
  color: #3b5bdb; text-decoration: none; font-weight: 600;
}

.register-extra a:hover { color: #2f4ec0; }

/* Back link */
.register-back {
  display: block; text-align: center;
  margin-top: 0.85rem;
  font-size: 0.78rem; font-weight: 500;
  color: #3b5bdb; text-decoration: none;
  transition: color .18s;
}

.register-back:hover { color: #2f4ec0; }

/* ════════════════════════════════════════════
   LEADERBOARD LANDING PAGE
════════════════════════════════════════════ */

/* ── Hitung mundur ── */
.lb-countdown-section {
  text-align: center;
  margin-bottom: 0;
}
.lb-countdown-label {
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}
.lb-countdown-inner {
  display: inline-flex;
  gap: .75rem;
  align-items: center;
}
.lb-cd-unit {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: .60rem 1.10rem;
  min-width: 64px;
  text-align: center;
  backdrop-filter: blur(4px);
}
.lb-cd-num {
  font-size: 1.75rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lb-cd-label {
  font-size: .6rem;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 4px;
}
.lb-cd-sep {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255,255,255,.3);
}
.lb-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(22,163,74,.2);
  border: 1px solid rgba(22,163,74,.4);
  color: #4ade80;
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  margin-top: .75rem;
}
.lb-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: pulse-dot 1.5s infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ── Podium ── */
.lb-podium-section {
  background: var(--latar);
  padding: 2.5rem 1rem 0;
}
.lb-podium-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1.5rem;
  max-width: 560px;
  margin: 0 auto;
}
.lb-podium-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 160px;
}
.lb-podium-avatar-wrap { position: relative; margin-bottom: .6rem; }
.lb-podium-avatar {
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff;
  overflow: hidden; border: 3px solid;
}
.lb-podium-avatar img { width:100%; height:100%; object-fit:cover; }
.lb-podium-avatar.rank-1 {
  width: 76px; height: 76px; font-size: 1rem;
  border-color: #fbbf24;
  background: linear-gradient(135deg,#92400e,#d97706);
  animation: glow-gold 2.5s ease-in-out infinite;
}
@keyframes glow-gold {
  0%,100% { box-shadow: 0 0 0 4px rgba(251,191,36,.2), 0 0 20px rgba(251,191,36,.3); }
  50%      { box-shadow: 0 0 0 6px rgba(251,191,36,.35), 0 0 32px rgba(251,191,36,.5); }
}
.lb-podium-avatar.rank-2 {
  width: 62px; height: 62px; font-size: .9rem;
  border-color: #94a3b8;
  background: linear-gradient(135deg,#475569,#94a3b8);
}
.lb-podium-avatar.rank-3 {
  width: 58px; height: 58px; font-size: .85rem;
  border-color: #b45309;
  background: linear-gradient(135deg,#78350f,#c2410c);
}
.lb-podium-badge {
  position: absolute; bottom: -3px; right: -3px;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 800; border: 2px solid #fff;
}
.lb-podium-badge.rank-1 { background: #d97706; color: #fff; }
.lb-podium-badge.rank-2 { background: #64748b; color: #fff; }
.lb-podium-badge.rank-3 { background: #b45309; color: #fff; }
.lb-mahkota { font-size: 1.4rem; margin-bottom: .2rem; line-height: 1; }
.lb-spacer  { height: 1.6rem; }
.lb-podium-nama {
  font-size: .8rem; font-weight: 700; color: #1e293b;
  text-align: center; margin-bottom: 1px;
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-podium-nama.rank-1 { font-size: .88rem; }
.lb-podium-tipe { font-size: .67rem; color: #94a3b8; margin-bottom: .3rem; }
.lb-podium-poin { font-size: .82rem; font-weight: 700; margin-bottom: .6rem; }
.lb-podium-poin.rank-1 { font-size: .9rem; color: #d97706; }
.lb-podium-poin.rank-2 { color: #64748b; }
.lb-podium-poin.rank-3 { color: #b45309; }
.lb-btn-hadiah {
  display: inline-flex; align-items: center; gap: 4px;
  margin-bottom: .6rem; padding: 4px 11px;
  border-radius: 20px; border: 1.5px solid;
  font-size: .67rem; font-weight: 600;
  cursor: pointer; background: transparent;
  transition: all .15s; letter-spacing: .2px;
}
.lb-btn-hadiah.rank-1 { border-color: #fbbf24; color: #d97706; }
.lb-btn-hadiah.rank-2 { border-color: #94a3b8; color: #64748b; }
.lb-btn-hadiah.rank-3 { border-color: #fb923c; color: #b45309; }
.lb-btn-hadiah:hover { transform: scale(1.05); }
.lb-btn-hadiah.rank-1:hover { background: #fef9c3; }
.lb-btn-hadiah.rank-2:hover { background: #f1f5f9; }
.lb-btn-hadiah.rank-3:hover { background: #ffedd5; }
.lb-tiang {
  width: 100%; border-radius: 8px 8px 0 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 900;
  color: rgba(255,255,255,.8);
  box-shadow: 0 -4px 12px rgba(0,0,0,.1);
}
.lb-tiang.rank-1 { height: 110px; background: linear-gradient(180deg,#fde68a,#f59e0b,#d97706); }
.lb-tiang.rank-2 { height: 80px;  background: linear-gradient(180deg,#e2e8f0,#94a3b8,#64748b); }
.lb-tiang.rank-3 { height: 60px;  background: linear-gradient(180deg,#fed7aa,#fb923c,#c2410c); }

/* ── Filter + tabel ── */
.lb-tabel-section { padding: 2rem 6rem 3rem; background: var(--latar); }
.lb-tabel-toolbar {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 1rem;
  gap: 1rem; flex-wrap: wrap;
}
.lb-search-wrap { position: relative; flex: 1; max-width: 280px; }
.lb-search-wrap svg {
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%); width: 15px; height: 15px; stroke: #94a3b8;
}
.lb-search-input {
  width: 100%; padding: 7px 12px 7px 32px;
  border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: .82rem; background: #fff; color: #334155; outline: none;
}
.lb-search-input:focus { border-color: #94a3b8; }
.lb-filter-right { display: flex; align-items: center; gap: 8px; }
.lb-filter-label { font-size: .8rem; color: #64748b; font-weight: 500; }
.lb-select {
  font-size: .82rem; padding: 7px 12px;
  border: 1px solid #e2e8f0; border-radius: 8px;
  background: #fff; color: #334155; cursor: pointer; outline: none;
}
.lb-select:focus { border-color: #94a3b8; }

/* Tabel */
.lb-tabel-wrap {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 14px; overflow: hidden; margin-bottom: 1rem;
}
.lb-tabel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.25rem; border-bottom: 1px solid #f1f5f9;
}
.lb-tabel-header h2 { font-size: .92rem; font-weight: 700; color: #0f172a; margin: 0; }
.lb-tabel-header span { font-size: .75rem; color: #94a3b8; }
.lb-tabel { width: 100%; border-collapse: collapse; }
.lb-tabel thead th {
  padding: .65rem .875rem;
  font-size: .68rem; font-weight: 600; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .4px;
  background: #f8fafc; border-bottom: 1px solid #f1f5f9;
  text-align: left; white-space: nowrap;
}
.lb-tabel thead th.center { text-align: center; }
.lb-tabel tbody tr { border-bottom: 1px solid #f8fafc; transition: background .1s; }
.lb-tabel tbody tr:last-child { border-bottom: none; }
.lb-tabel tbody tr:hover { background: #f8fafc !important; }
.lb-tabel tbody tr.row-top-1 { background: #fffbeb; }
.lb-tabel tbody tr.row-top-2 { background: #f8fafc; }
.lb-tabel tbody tr.row-top-3 { background: #fff7ed; }
.lb-tabel tbody td {
  padding: .65rem .875rem; font-size: .81rem;
  color: #1e293b; vertical-align: middle;
}
.lb-tabel tbody td.center { text-align: center; }

/* Rank badge */
.lb-rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  font-size: .7rem; font-weight: 800;
}
.lb-rank-badge.gold   { background: #1c1917; color: #fbbf24; }
.lb-rank-badge.silver { background: #334155; color: #cbd5e1; }
.lb-rank-badge.bronze { background: #431407; color: #fb923c; }
.lb-rank-num { font-size: .78rem; color: #94a3b8; font-weight: 500; }

/* Member cell */
.lb-member-cell { display: flex; align-items: center; gap: 10px; }
.lb-avatar-sm {
  width: 34px; height: 34px; border-radius: 50%;
  background: #e2e8f0; display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; color: #64748b;
  overflow: hidden; flex-shrink: 0; border: 2px solid #f1f5f9;
}
.lb-avatar-sm img { width:100%; height:100%; object-fit:cover; }
.lb-member-nama { font-size: .82rem; font-weight: 600; color: #1e293b; }
.lb-member-sub  { font-size: .7rem; color: #94a3b8; margin-top: 1px; }
.lb-tipe-badge  {
  display: inline-block; font-size: .63rem;
  padding: 1px 5px; border-radius: 4px;
  background: #f1f5f9; color: #475569;
  font-weight: 500; margin-left: 4px;
}

/* Poin total */
.lb-poin-val { font-size: .88rem; font-weight: 700; }
.lb-poin-val.pos { color: #16a34a; }
.lb-poin-val.neg { color: #dc2626; }

/* Chip poin per aktivitas */
.lb-chip {
  display: inline-block;
  font-size: .71rem; font-weight: 600;
  padding: 2px 7px; border-radius: 5px;
}
.lb-chip.pos { background: #f0fdf4; color: #16a34a; }
.lb-chip.neg { background: #fef2f2; color: #dc2626; }
.lb-dash { font-size: .8rem; color: #e2e8f0; }

/* Divider kolom breakdown */
.lb-tabel thead th.divider-l,
.lb-tabel tbody td.divider-l {
  border-left: 1px solid #f1f5f9;
}

/* Kosong */
.lb-kosong { text-align: center; padding: 3rem 1rem; color: #94a3b8; font-size: .85rem; }
.lb-kosong svg { width:40px; height:40px; stroke:#cbd5e1; margin: 0 auto .75rem; display:block; }

/* CTA */
.lb-cta {
  text-align: center; padding: 1.25rem 1rem;
  background: linear-gradient(135deg, #eff4ff, #e0e7ff);
  border: 1px solid #c7d7fe; border-radius: 10px;
  font-size: .85rem; color: #3730a3; margin-top: .75rem;
}
.lb-cta a { font-weight: 700; color: #1e3a8a; text-decoration: underline; margin-left: 4px; }

/* ── Modal hadiah ── */
.lb-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
  z-index: 9999; align-items: center; justify-content: center; padding: 1rem;
}
.lb-modal-overlay.tampil { display: flex; }
@keyframes lb-modal-in {
  from { transform: scale(.8) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0);     opacity: 1; }
}
.lb-modal {
  background: #fff; border-radius: 20px;
  max-width: 360px; width: 100%;
  overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.25);
  animation: lb-modal-in .3s cubic-bezier(.34,1.56,.64,1);
}
.lb-modal-header {
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: center; position: relative;
}
.lb-modal-header.rank-1 { background: linear-gradient(135deg,#78350f,#d97706,#fbbf24); }
.lb-modal-header.rank-2 { background: linear-gradient(135deg,#1e293b,#475569,#94a3b8); }
.lb-modal-header.rank-3 { background: linear-gradient(135deg,#431407,#b45309,#fb923c); }
.lb-modal-close {
  position: absolute; top: 12px; right: 14px;
  background: rgba(255,255,255,.2); border: none; color: #fff;
  width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.lb-modal-close:hover { background: rgba(255,255,255,.35); }
.lb-modal-emoji      { font-size: 2rem; margin-bottom: .25rem; line-height: 1; }
.lb-modal-rank-label { font-size: .68rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: .35rem; }
.lb-modal-rank-title { font-size: 1.1rem; font-weight: 800; color: #fff; }
.lb-modal-body { padding: 1.5rem; }
.lb-modal-foto-wrap { text-align: center; margin-bottom: 1.25rem; }
.lb-modal-foto {
  width: 100px; height: 100px; border-radius: 16px;
  object-fit: cover; border: 3px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.lb-modal-foto-placeholder {
  width: 100px; height: 100px; border-radius: 16px;
  background: #f1f5f9; display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 2.75rem; border: 3px solid #e2e8f0;
}
.lb-modal-nama { font-size: 1.05rem; font-weight: 800; color: #0f172a; text-align: center; margin-bottom: .5rem; }
.lb-modal-desc { font-size: .82rem; color: #64748b; text-align: center; line-height: 1.65; margin-bottom: 1.25rem; }
.lb-modal-info {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 10px; padding: .65rem 1rem;
  font-size: .75rem; color: #475569;
}
.lb-modal-btn-tutup {
  display: block; width: 100%; margin-top: .875rem;
  padding: .65rem; border-radius: 10px;
  border: 1px solid #e2e8f0; background: #f8fafc;
  color: #475569; font-size: .85rem; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.lb-modal-btn-tutup:hover { background: #e2e8f0; }

/* ── Responsif mobile ── */
@media (max-width: 768px) {
  .lb-tabel-section { padding: 1.5rem 1rem 2rem; }
  .lb-tabel-wrap { border-radius: 10px; }
  .lb-podium-wrap { gap: .5rem; }
  .lb-podium-item { max-width: 100px; }
  .lb-podium-avatar.rank-1 { width: 58px; height: 58px; }
  .lb-podium-avatar.rank-2 { width: 50px; height: 50px; }
  .lb-podium-avatar.rank-3 { width: 46px; height: 46px; }
  .lb-tiang.rank-1 { height: 80px; }
  .lb-tiang.rank-2 { height: 60px; }
  .lb-tiang.rank-3 { height: 44px; }
  .lb-countdown-inner { gap: .4rem; }
  .lb-cd-unit { min-width: 52px; padding: .6rem .75rem; }
  .lb-cd-num { font-size: 1.4rem; }
  .lb-search-wrap { max-width: 100%; }
}

.lb-tabel-scroll .lb-tabel-wrap {
  min-width: 850px;
  width: max-content;
  max-width: none;
}
.lb-tabel-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  cursor: grab;
}

.lb-tabel-scroll:active {
  cursor: grabbing;
}