/*
  style.css — Landing Page LKPNPT Juli 2026
  Seluruh gaya halaman: variabel tema (navy, ungu, biru neon, putih),
  reset dasar, gradient latar, glassmorphism, glow, animasi, dan media queries.
  Font utama: Poppins (dimuat dari Google Fonts di index.html).
  Catatan: gaya detail (Hero, Main Video, kartu, dsb.) ditambahkan pada tugas berikutnya.
*/
/* ==========================================================================
   Variabel Tema (CSS Custom Properties)
   Didefinisikan pada :root agar konsisten dan mudah diubah di satu tempat.
   ========================================================================== */
:root {
  /* Palet warna utama */
  --c-navy: #0a0e2a;          /* navy gelap (latar utama) */
  --c-navy-2: #131a45;        /* navy sekunder (variasi gradient) */
  --c-purple: #6c3ce0;        /* ungu (aksen) */
  --c-neon: #22d3ee;          /* biru neon (aksen & glow) */
  --c-white: #f5f7ff;         /* putih kebiruan (teks) */

  /* Gradient latar halaman */
  --grad-bg: linear-gradient(135deg, var(--c-navy) 0%, #1a1350 50%, var(--c-navy-2) 100%);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.06);      /* latar kaca transparan */
  --glass-border: rgba(255, 255, 255, 0.15);  /* garis tepi kaca */

  /* Efek glow (biru neon) */
  --glow-neon: 0 0 12px rgba(34, 211, 238, 0.6);

  /* Bentuk & waktu */
  --radius: 16px;   /* radius sudut standar */
  --dur: 0.5s;      /* durasi animasi/transisi standar */
}

/* ==========================================================================
   Reset dasar & box-sizing
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Aturan global elemen html: cegah scroll horizontal & atur penyesuaian ukuran teks */
html {
  overflow-x: hidden;            /* cegah scroll horizontal tak sengaja */
  -webkit-text-size-adjust: 100%;
}

/* Media (gambar, video, animasi Lottie) tidak boleh melebihi lebar kontainer */
img, video, dotlottie-wc {
  max-width: 100%;
}

/* ==========================================================================
   Gaya global body: font Poppins & latar gradient
   ========================================================================== */
body {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--c-white);
  background: var(--grad-bg);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Latar Mengambang (.bg-shapes / .bg-shape)
   Elemen dekoratif berupa bentuk lingkaran blur yang mengambang di latar.
   Diposisikan fixed di belakang seluruh konten (z-index negatif) agar tidak
   mengganggu interaksi. Animasi `float` didefinisikan pada tugas 8.1.
   ========================================================================== */
.bg-shapes {
  position: fixed;
  inset: 0;                 /* menutupi seluruh viewport */
  z-index: -1;              /* di belakang konten */
  overflow: hidden;         /* cegah scrollbar akibat bentuk yang meluber */
  pointer-events: none;     /* dekoratif; tidak menerima klik */
}

/* Bentuk dasar: lingkaran lembut dengan blur dan opasitas rendah */
.bg-shape {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(60px);       /* efek lembut/menyebar */
  opacity: 0.5;
  /* Animasi mengambang; keyframes `float` ada di tugas 8.1 */
  animation: float 12s ease-in-out infinite;
}

/* Bentuk 1: ungu, kiri-atas, besar */
.bg-shape--1 {
  width: 420px;
  height: 420px;
  top: -120px;
  left: -100px;
  background: var(--c-purple);
  animation-delay: 0s;
}

/* Bentuk 2: biru neon, kanan-tengah, sedang */
.bg-shape--2 {
  width: 320px;
  height: 320px;
  top: 30%;
  right: -120px;
  background: var(--c-neon);
  opacity: 0.35;
  animation-delay: -4s;      /* offset agar tidak seragam */
}

/* Bentuk 3: navy sekunder, kiri-bawah, sedang */
.bg-shape--3 {
  width: 360px;
  height: 360px;
  bottom: -140px;
  left: 20%;
  background: var(--c-navy-2);
  opacity: 0.6;
  animation-delay: -8s;
}

/* ==========================================================================
   Hero Section (.hero)
   Bagian pembuka full-height dengan konten terpusat, latar gradient lembut,
   glassmorphism, dan glow.
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;      /* fallback */
  min-height: 100dvh;     /* tinggi viewport dinamis (mobile address bar aware) */
  display: flex;
  flex-direction: column;
  align-items: center;        /* pusatkan horizontal */
  justify-content: center;    /* pusatkan vertikal */
  text-align: center;
  gap: 1.5rem;
  padding: 2rem 1.5rem;
  /* Lapisan gradient radial lembut untuk memberi kedalaman pada hero */
  background:
    radial-gradient(circle at 50% 30%, rgba(108, 60, 224, 0.25) 0%, transparent 60%),
    var(--glass-bg);
  backdrop-filter: blur(12px);            /* glassmorphism */
  -webkit-backdrop-filter: blur(12px);    /* dukungan Safari */
  border-bottom: 1px solid var(--glass-border);
  overflow: hidden;
}

/* Judul Hero */
.hero__title {
  font-size: clamp(2.2rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  max-width: 18ch;
}

/* Subjudul Hero */
.hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 300;
  color: rgba(245, 247, 255, 0.82);
  max-width: 48ch;
}

/* ==========================================================================
   Efek Glow pada judul (.glow)
   Memberi cahaya biru neon lembut pada teks (judul & elemen ber-kelas .glow).
   ========================================================================== */
.glow {
  text-shadow:
    0 0 10px rgba(34, 211, 238, 0.55),
    0 0 24px rgba(108, 60, 224, 0.45);
}

/* ==========================================================================
   Tombol (.btn) & CTA_Button (.btn--cta)
   Tombol dengan latar gradient, sudut membulat, dan glow biru neon.
   ========================================================================== */
.btn {
  display: inline-block;
  padding: 0.9rem 2.2rem;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--c-white);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--glass-border);
  border-radius: 999px;                  /* pill/kapsul */
  background: linear-gradient(135deg, var(--c-purple) 0%, var(--c-neon) 100%);
  transition:
    transform var(--dur) ease,
    box-shadow var(--dur) ease,
    filter var(--dur) ease;
}

/* Varian CTA: tambahkan glow neon agar menonjol */
.btn--cta {
  box-shadow: var(--glow-neon);
}

/* Interaksi hover/fokus: naik sedikit dan perkuat glow */
.btn--cta:hover,
.btn--cta:focus-visible {
  transform: translateY(-3px);
  filter: brightness(1.08);
  box-shadow:
    0 0 20px rgba(34, 211, 238, 0.75),
    0 0 40px rgba(108, 60, 224, 0.55);
}

/* Fokus keyboard yang jelas untuk aksesibilitas */
.btn--cta:focus-visible {
  outline: 2px solid var(--c-neon);
  outline-offset: 3px;
}

/* ==========================================================================
   Judul Bagian (.section__title)
   Judul untuk tiap section (Main Video, Video List) dengan bobot tebal dan
   spasi bawah. Efek glow ditangani kelas .glow terpisah.
   ========================================================================== */
.section__title {
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.3px;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* ==========================================================================
   Main Video Section (.main-video)
   Blok konten terpusat dengan lebar maksimum dan nuansa panel glassmorphism.
   ========================================================================== */
.main-video {
  max-width: 900px;               /* batasi lebar konten agar mudah dibaca */
  margin: 4rem auto;              /* pusatkan blok secara horizontal + jarak antar bagian */
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;            /* pusatkan konten di dalam panel */
  /* Panel kaca (glassmorphism) */
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
}

/* Pemutar video responsif berorientasi POTRAIT (rasio 9:16).
   Tinggi mengikuti tinggi layar (dengan batas maksimum) agar selalu muat
   pada satu layar; lebar mengikuti rasio potrait dan pemutar dipusatkan. */
.main-video__player {
  width: auto;                    /* lebar mengikuti rasio potrait */
  max-width: 100%;                /* jangan melebihi lebar panel */
  height: min(80vh, 640px);       /* fallback: tinggi ikut layar, dibatasi */
  height: min(80dvh, 640px);      /* tinggi viewport dinamis (mobile aware) */
  aspect-ratio: 9 / 16;           /* orientasi potrait */
  object-fit: contain;            /* jaga proporsi video tanpa terdistorsi */
  display: block;
  margin: 0 auto;                 /* pusatkan pemutar secara horizontal */
  border-radius: var(--radius);   /* sudut membulat */
  background: #000;               /* latar hitam saat video belum dimuat */
  box-shadow: var(--glow-neon);   /* glow biru neon lembut */
}

/* Deskripsi di bawah pemutar video */
.main-video__desc {
  margin-top: 1.25rem;
  font-size: 1rem;
  font-weight: 300;
  color: rgba(245, 247, 255, 0.82);
  text-align: center;
  max-width: 60ch;
}

/* ==========================================================================
   Footer Section (.footer)
   Bagian penutup: teks terpusat, warna redup, dengan garis pemisah di atas.
   ========================================================================== */
.footer {
  margin-top: 4rem;
  padding: 2rem 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(245, 247, 255, 0.6);        /* teks redup */
  border-top: 1px solid var(--glass-border); /* garis pemisah di atas footer */
}

/* Jarak antar baris teks footer */
.footer p + p {
  margin-top: 0.4rem;
}

/* ==========================================================================
   Video List Section (.video-list)
   Pembungkus bagian daftar video: lebar maksimum, terpusat, dan padding
   agar konten daftar rapi dan mudah dibaca pada layar lebar.
   ========================================================================== */
.video-list {
  max-width: 1100px;          /* batasi lebar agar grid tidak terlalu melebar */
  margin: 4rem auto;          /* pusatkan blok + jarak antar bagian */
  padding: 2rem 1.5rem;       /* ruang di sekeliling konten */
}

/* ==========================================================================
   Grid Daftar Kartu (.video-list__grid)
   Menggunakan CSS Grid responsif: kolom terisi otomatis (auto-fill) dengan
   lebar minimum ~220px dan membagi sisa ruang secara merata (1fr).
   ========================================================================== */
.video-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;                /* jarak antar kartu (baris & kolom) */
  /* Perspektif untuk memberi kedalaman pada efek 3D saat hover kartu */
  perspective: 1000px;
}

/* ==========================================================================
   Kartu Video (.video-card)
   Panel glassmorphism dengan sudut membulat, padding, dan transisi halus.
   Struktur anak: .video-card__icon, .video-card__date, .video-card__title,
   dan .video-card__badge (dibangkitkan oleh script.js).
   ========================================================================== */
.video-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;        /* pusatkan konten kartu secara horizontal */
  text-align: center;
  gap: 0.5rem;
  padding: 1.75rem 1.25rem;
  cursor: pointer;
  /* Panel kaca (glassmorphism) */
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(10, 14, 42, 0.35);
  /* Transisi halus untuk animasi hover 3D/scale & glow */
  transition:
    transform var(--dur) ease,
    box-shadow var(--dur) ease,
    border-color var(--dur) ease;
  transform-style: preserve-3d;   /* dukung transformasi 3D pada hover */
}

/* Animasi hover: naik + membesar sedikit dengan sentuhan 3D (rotateX),
   disertai bayangan lebih kuat dan glow biru neon agar terasa "hidup". */
.video-card:hover,
.video-card:focus-within {
  transform: translateY(-6px) scale(1.03) rotateX(4deg);
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow:
    0 16px 40px rgba(10, 14, 42, 0.55),
    0 0 24px rgba(34, 211, 238, 0.35),
    0 0 48px rgba(108, 60, 224, 0.25);
}

/* Ikon video: ukuran besar sebagai penanda visual utama kartu */
.video-card__icon {
  font-size: 2.75rem;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.45));
}

/* Tanggal dummy: teks kecil dan redup */
.video-card__date {
  font-size: 0.85rem;
  font-weight: 300;
  color: rgba(245, 247, 255, 0.6);
}

/* Judul kartu: nama hari tugas */
.video-card__title {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-white);
}

/* ==========================================================================
   Badge Status (.video-card__badge)
   Label berbentuk pil (pill). Warna dibedakan berdasarkan atribut
   data-status pada kartu induk menggunakan attribute selector.
   ========================================================================== */
.video-card__badge {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-radius: 999px;                 /* bentuk pil/kapsul */
  border: 1px solid var(--glass-border);
}

/* Status "Tersedia": aksen hijau/neon terang untuk menandakan aktif */
.video-card[data-status="Tersedia"] .video-card__badge {
  color: #eafff6;
  background: rgba(34, 211, 238, 0.18);
  border-color: rgba(34, 211, 238, 0.55);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.4);
}

/* Status "Menyusul": aksen ungu redup untuk menandakan belum tersedia */
.video-card[data-status="Menyusul"] .video-card__badge {
  color: rgba(245, 247, 255, 0.7);
  background: rgba(108, 60, 224, 0.15);
  border-color: rgba(108, 60, 224, 0.4);
}

/* Kartu aktif: tugas yang sedang ditampilkan pada Video Utama */
.video-card.is-active {
  border-color: rgba(34, 211, 238, 0.7);
  box-shadow:
    0 0 20px rgba(34, 211, 238, 0.45),
    0 0 40px rgba(108, 60, 224, 0.3);
}

/* ==========================================================================
   ANIMASI & SCROLL REVEAL (Tugas 8.1)
   Bagian ini mendefinisikan keyframes animasi, animasi masuk (entrance) pada
   Hero, gaya Toast_Notifikasi, mekanisme scroll reveal (.reveal/.is-visible),
   serta penyesuaian untuk prefers-reduced-motion. Ditambahkan (append) tanpa
   mengubah gaya yang sudah ada di atas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   @keyframes fadeInUp
   Animasi masuk: elemen memudar muncul (opacity 0 -> 1) sambil bergeser naik
   dari bawah (translateY 24px -> 0). Dipakai untuk konten Hero & entrance.
   -------------------------------------------------------------------------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   @keyframes float
   Gerakan mengambang lembut untuk .bg-shape (dipakai: float 12s ease-in-out
   infinite). Kombinasi geser (translate) dan sedikit rotasi (rotate) agar
   bentuk latar terasa hidup dan tidak statis.
   -------------------------------------------------------------------------- */
@keyframes float {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(30px, -40px) rotate(8deg);
  }
  66% {
    transform: translate(-20px, 25px) rotate(-6deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* --------------------------------------------------------------------------
   @keyframes glowPulse
   Denyut cahaya biru neon: box-shadow membesar-mengecil secara halus.
   Dipakai sebagai aksen hidup pada CTA_Button.
   -------------------------------------------------------------------------- */
@keyframes glowPulse {
  0%,
  100% {
    box-shadow:
      0 0 12px rgba(34, 211, 238, 0.55),
      0 0 24px rgba(108, 60, 224, 0.35);
  }
  50% {
    box-shadow:
      0 0 22px rgba(34, 211, 238, 0.85),
      0 0 44px rgba(108, 60, 224, 0.55);
  }
}

/* --------------------------------------------------------------------------
   Animasi Masuk (Entrance) pada Hero
   Judul, subjudul, dan tombol muncul berurutan (staggered) dengan fadeInUp
   saat halaman selesai dimuat, memberi kesan pembuka yang halus.
   -------------------------------------------------------------------------- */
.hero__title {
  animation: fadeInUp 0.8s ease-out both;
}

.hero__subtitle {
  animation: fadeInUp 0.8s ease-out 0.15s both; /* jeda 0.15s setelah judul */
}

.hero .btn {
  animation: fadeInUp 0.8s ease-out 0.3s both; /* jeda 0.3s setelah subjudul */
}

/* --------------------------------------------------------------------------
   Denyut glow pada CTA_Button
   Aksen halus agar tombol utama menarik perhatian tanpa berlebihan.
   -------------------------------------------------------------------------- */
.btn--cta {
  animation: glowPulse 3s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Scroll Reveal (.reveal & .is-visible)
   .reveal    : keadaan awal tersembunyi (opacity 0, sedikit tergeser ke bawah).
   .is-visible: keadaan terlihat (opacity 1, kembali ke posisi semula) yang
                ditambahkan oleh script.js saat elemen memasuki viewport.
   Transisi didefinisikan pada .reveal agar perpindahan ke .is-visible mulus.
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.7s ease-out,
    transform 0.7s ease-out;
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Toast_Notifikasi (.toast)
   Notifikasi kecil di kanan-bawah layar. Default tersembunyi (opacity 0,
   tergeser ke bawah, tanpa interaksi pointer). Saat kelas .is-visible
   ditambahkan oleh script.js, toast muncul dengan transisi halus.
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1000;
  max-width: 320px;
  padding: 0.9rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--c-white);
  /* Panel kaca (glassmorphism) agar selaras dengan tema */
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(34, 211, 238, 0.5);
  border-radius: var(--radius);
  box-shadow:
    0 8px 24px rgba(10, 14, 42, 0.55),
    var(--glow-neon);
  /* Keadaan awal: tersembunyi & tidak menerima klik */
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition:
    opacity var(--dur) ease,
    transform var(--dur) ease;
}

/* Keadaan terlihat: muncul ke posisi semula & dapat terlihat penuh */
.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Preferensi Gerakan Berkurang (prefers-reduced-motion)
   Menghormati pengguna yang meminimalkan animasi: matikan/perpendek animasi
   mengambang, denyut glow, dan animasi masuk; tampilkan elemen reveal langsung.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Nonaktifkan animasi berulang (mengambang & denyut) */
  .bg-shape,
  .btn--cta {
    animation: none;
  }

  /* Perpendek animasi masuk Hero menjadi nyaris seketika */
  .hero__title,
  .hero__subtitle,
  .hero .btn {
    animation-duration: 0.001s;
    animation-delay: 0s;
  }

  /* Tampilkan konten reveal tanpa transisi/gerakan */
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Kurangi transisi toast agar minim gerakan */
  .toast {
    transition-duration: 0.001s;
  }

  /* Hentikan animasi kilau pada teks brand di layar loading */
  .loader__brand {
    animation: none;
  }
}

/* ==========================================================================
   RESPONSIVITAS — MEDIA QUERIES (Tugas 10)
   Tata letak desktop (gaya di atas) menjadi baseline. Blok di bawah ini
   HANYA menyesuaikan tata letak untuk tablet dan mobile tanpa mengubah
   aturan desktop. Menyentuh: Hero, grid kartu, pemutar video, section,
   dan Toast_Notifikasi. Ditambahkan (append) di akhir berkas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breakpoint Tablet (<= 900px)
   Kurangi padding/margin bagian, perkecil sedikit tipografi judul, rapatkan
   grid kartu (kolom lebih kecil), dan buat lebar pemutar video lebih cair.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Hero: kurangi jarak & padding agar proporsional di layar sedang */
  .hero {
    gap: 1.25rem;
    padding: 1.5rem 1.25rem;
  }

  /* Judul Hero sedikit lebih ringkas agar tidak mendominasi layar */
  .hero__title {
    max-width: 20ch;
  }

  /* Main Video: kurangi jarak antar bagian; lebar mengikuti kontainer */
  .main-video {
    max-width: 100%;
    margin: 3rem 1.25rem;
    padding: 1.75rem 1.25rem;
  }

  /* Video List: kurangi jarak antar bagian & padding samping */
  .video-list {
    margin: 3rem auto;
    padding: 1.75rem 1.25rem;
  }

  /* Grid kartu: kolom lebih kecil agar tetap muat 2–3 kolom di tablet */
  .video-list__grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.25rem;
  }

  /* Footer: kurangi jarak atas agar ringkas */
  .footer {
    margin-top: 3rem;
  }
}

/* --------------------------------------------------------------------------
   Breakpoint Mobile (<= 600px)
   Grid kartu menjadi satu kolom, tipografi judul diperkecil, padding/margin
   dirapatkan, dan Toast melebar mengikuti lebar layar (dengan margin kiri/kanan).
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* Hero: tetap penuh satu layar; padding lebih ringkas untuk mobile */
  .hero {
    min-height: 100vh;
    min-height: 100dvh;
    gap: 1rem;
    padding: 1.25rem 1rem;
  }

  /* Judul Hero lebih kecil agar nyaman dibaca di layar sempit */
  .hero__title {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    max-width: 100%;
  }

  /* Subjudul mengisi lebar penuh */
  .hero__subtitle {
    max-width: 100%;
  }

  /* Judul bagian lebih ringkas */
  .section__title {
    font-size: clamp(1.4rem, 6vw, 1.9rem);
    margin-bottom: 1rem;
  }

  /* Main Video: rapatkan margin/padding untuk layar kecil */
  .main-video {
    margin: 2rem 0.75rem;
    padding: 1.25rem 1rem;
  }

  /* Pemutar potrait sedikit lebih pendek agar pas di layar ponsel */
  .main-video__player {
    height: min(70dvh, 520px);
  }

  /* Deskripsi video utama: tetap satu baris agar terlihat rapi */
  .main-video__desc {
    white-space: nowrap;
    font-size: clamp(0.62rem, 3.2vw, 0.85rem);
    max-width: 100%;
  }

  /* Video List: rapatkan margin/padding */
  .video-list {
    margin: 2rem auto;
    padding: 1.25rem 1rem;
  }

  /* Grid kartu: satu kolom penuh agar setiap kartu terbaca jelas */
  .video-list__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Kartu: sedikit kurangi padding dalam */
  .video-card {
    padding: 1.5rem 1.1rem;
  }

  /* Footer: rapatkan jarak atas & padding */
  .footer {
    margin-top: 2rem;
    padding: 1.5rem 1rem;
  }

  /* Toast: melebar mengikuti layar dengan margin kiri/kanan agar mudah dibaca */
  .toast {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-width: none;
    text-align: center;
  }

  /* Perkecil bentuk dekoratif mengambang agar tidak mendominasi/meluber di layar kecil */
  .bg-shape--1 { width: 260px; height: 260px; }
  .bg-shape--2 { width: 220px; height: 220px; }
  .bg-shape--3 { width: 240px; height: 240px; }
}

/* ==========================================================================
   LAYAR LOADING (.loader)
   Overlay penuh layar berisi animasi Lottie dan teks "LKPNPT" dengan efek
   cahaya mengalir (gradient bergerak) serta glow. Tampil ~3 detik lalu
   memudar (kelas .is-hidden ditambahkan oleh script.js). Saat loading,
   scroll body dikunci melalui kelas body.is-loading.
   ========================================================================== */

/* Kunci scroll selama layar loading tampil */
body.is-loading {
  overflow: hidden;
}

/* Kontainer overlay loading: menutupi seluruh viewport di lapisan teratas */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: var(--grad-bg);
  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;
}

/* Keadaan tersembunyi: memudar keluar & non-interaktif */
.loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Ukuran animasi Lottie dengan batas responsif */
.loader__lottie {
  width: 300px;
  height: 300px;
  max-width: 70vw;
  max-height: 70vw;
}

/* Teks brand "LKPNPT": cahaya mengalir via gradient bergerak + glow */
.loader__brand {
  font-size: clamp(2.5rem, 10vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.4rem;
  margin: 0;
  /* Cahaya mengalir: gradient di-clip ke teks, lalu digeser via animasi */
  background: linear-gradient(90deg, #22d3ee 0%, #6c3ce0 25%, #f5f7ff 50%, #22d3ee 75%, #6c3ce0 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Glow biru neon & ungu di sekeliling teks */
  filter:
    drop-shadow(0 0 12px rgba(34, 211, 238, 0.7))
    drop-shadow(0 0 24px rgba(108, 60, 224, 0.5));
  animation: brandShine 3s linear infinite;
}

/* Animasi geser gradient agar cahaya terlihat mengalir sepanjang teks */
@keyframes brandShine {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* ==========================================================================
   Breakpoint Ponsel Sangat Kecil (<= 380px)
   Penyesuaian akhir agar tetap nyaman dibaca pada layar sangat sempit.
   ========================================================================== */
@media (max-width: 380px) {
  .hero__title { font-size: clamp(1.6rem, 9vw, 2rem); }
  .btn { padding: 0.8rem 1.6rem; font-size: 0.95rem; }
  .loader__brand { letter-spacing: 0.25rem; }
}