/* =========================================
   1. GLOBAL & RESET (Pengaturan Dasar)
   ========================================= */
body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  background-color: black;
  color: white;
}
main {
  /* Ganti <br><br> tadi dengan ini: */
  padding-top: 120px; /* Jarak agar konten tidak ketutup header */
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
h1{
  color: white;
  text-align: center;
  font-size: 50px; /* Coba naikkan jadi 60px kalau kurang gede */
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: 30; /* Biar tebal dan tegas */
}

/* Sub-judul atau Text Biasa */

.w {
  text-align: center; 
  margin-bottom: 40px;
  color: white;
}

/* =========================================
   2. HEADER & NAVBAR (Menu Atas)
   ========================================= */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed; /* Nempel terus */
  top: 0;
  left: 0;
  width: 100%;     /* Lebar full layar */
  z-index: 1000;   /* Di atas segalanya */
  transition: all 0.3s ease; /* Animasi halus */
  background-color: transparent; /* Awal bening */
  padding: 15px 0;
}

/* Saat discroll (Javascript nambahin class ini) */

header.scrolled {
  background-color: black; /* Jadi hitam */
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  padding: 10px 0; /* Sedikit mengecil biar manis */
}

/* --- 2. SETTING CONTAINER (PAGAR TENGAH) --- */

.container {
  width: 90%;          /* Kasih jarak kiri kanan */
  max-width: 1200px;   /* Batas maksimal lebar konten */
  margin: 0 auto;      /* MANTRA AJAIB: Posisi Tengah */
  display: flex;       /* Biar logo & menu sejajar */
  justify-content: space-between; /* Logo kiri, Menu kanan */
  align-items: center; /* Rata tengah vertikal */
}

/* Logo */

.header-icon {
    position: absolute;
    margin-left: 50px;
      width: 60px; /* Atur ukuran logo biar pas */
  height: auto;
}
.header-info a{
    padding: 0;
    text-decoration: none;
}
.header-info a:hover{
    background-color: transparent;
}

/* Link Menu */

.a{
    text-decoration: none;
    color: white;
    display: inline-block;
    margin-left: 20px;
    margin-right: 50px;
    margin-top: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 20px
}

/* Tombol WA & Menu Scroll */

/* Awalnya tombol WA sembunyi */
.menu-scroll {
  display: none;
}
.pertanyaan {
  font-size: 14px;
  margin-right: 10px;
  color: white;
}
.btn-wa {
  background-color: #25D366;
  color: white;
  padding: 8px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  margin-left: 10px;
}

/* Saat Scrolled: Menu Awal Hilang, Menu WA Muncul */
header.scrolled .menu-awal { display: none; }
header.scrolled .menu-scroll { display: flex; align-items: center; }

/* =========================================
   3. HERO SECTION (Judul & Gambar Utama)
   ========================================= */

.text-gradasi {
  /* 1. Atur Warna Gradasi (Biru Muda ke Biru Tua - Mirip Screenshot) */
  background: linear-gradient(90deg,  #f0ff1a, #fff8d5);

  /* 2. Potong background sesuai bentuk huruf */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* 3. Bikin warna teks asli transparan biar background-nya nongol */
  -webkit-text-fill-color: transparent;
  color: transparent;
  
  /* Opsional: Biar lebih tebal */
  font-weight: 700;
}

/* Wadah Tombol "Belajar Sekarang" */
.tengah{
  text-align: center;
  margin-top: 30px;
  margin-bottom: 0px;
  /* TAMBAHAN PENTING: Biar tombolnya ada di DEPAN gambar (ga ketutupan) */
  position: relative;
  z-index: 10;
}
/* tombol utama */
.btn-glowing {
  display: inline-flex;  /* Pakai flex biar Icon & Teks sejajar rapi */
  align-items: center;
  gap: 10px;             /* Jarak spasi antara Icon Panah dan Tulisan */
  
  padding: 15px 40px;
  margin: 0 auto;
  border-radius: 20px;
  text-decoration: none; /* Hilangkan garis bawah link biru standar */
  
  /* 3. Font (Huruf) */
  color: rgb(0, 0, 0);          /* Warna teks putih */
  font-weight: 600;      /* Agak tebal biar tegas */
  font-family: 'Poppins', sans-serif;
  font-size: 18px;

  /* 4. MANTRA GLOWING (Gradasi & Bayangan) */
  /* Gradasi Biru Tua ke Biru Muda (Kiri ke Kanan) */
  background: linear-gradient(90deg, #f0ff1a, #ffffff); 
  /* 5. Animasi */
  transition: all 0.3s ease; /* Biar pas disentuh geraknya halus */
}
.btn-glowing:hover {
   transform: scale(1.02);
}

/* Wadah Gambar Utama */
.gambar-tengah {
  text-align: center; /* Gambar otomatis ke tengah */
  margin-top: -70px;
}
/* Mengatur Gambarnya */
.img-responsive {
  max-width: 100%; /* PENTING: Biar gambar ga lebih lebar dari layar HP */
  height: auto;    /* Biar gambarnya ga gepeng */
  width: 1000px;    /* Batas maksimal lebar di Laptop (sesuaikan seleramu) */
  
  /* Opsional: Efek animasi halus saat hover */
  transition: transform 0.3s ease;
}

/* =========================================
   4. VIDEO GRID (Biar Rapi Berjajar)
   ========================================= */

.video-grid {
  display: grid;
  /* Otomatis 3 kolom di PC, 1 kolom di HP */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  gap: 30px;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}
.video-item {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  /* dibawah buat border sayy */
  background: #222;
  padding: 10px;
  border-radius: 10px;
}
.video-item iframe {
  width: 100%;
  height: 200px;
  border-radius: 10px;
  transition: transform 0.3s;
}
.video-item iframe:hover {
  transform: scale(1.03);
}
.video-item p {
  text-align: center;
  margin-top: 10px;
  font-weight: 600;
  color: white;
  font-size: 16px;
}

/* =========================================
   5. BANNER KOMUNITAS (REVISI TOTAL: PENDEK, LEBAR, POP-OUT EKSTREM)
   ========================================= */

/* Wadah Luar */
.banner-section-luar {
  width: 90%; /* UBAH JADI 95% BIAR LEBIH LEBAR */
  max-width: 1250px; /* Max width ditambah dikit */
  margin: 100px auto; 
}

/* KOTAK BIRU UTAMA (DIPENDEKIN) */
.kotak-biru-banner {
  background: linear-gradient(to right, #ffffff37, #ecff1c);
  border-radius: 15px;
  
  /* PADDING DIKURANGI BIAR TERASA LEBIH LEBAR ISINYA */
  padding: 0 40px;  
  
  display: flex;
  align-items: center; 
  justify-content: space-between;
  position: relative;
  
  /* KUNCI TINGGI BARU (LEBIH PENDEK) */
  height: 320px; 
  max-height: 320px;
  
  text-align: left !important;
}

/* BAGIAN KIRI (Teks & Tombol) */
.banner-kiri-teks {
  flex: 1;
  max-width: 550px;
  color: white;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* RATA KIRI */
  justify-content: center;
  /* Geser sedikit ke kiri biar seimbang */
  margin-left: 20px; 
}

.banner-kiri-teks h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 38px; /* Ukuran font disesuaikan sedikit sama kotak pendek */
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 25px;
  text-align: left;
}

.teks-tebal-putih {
  font-weight: 800;
}

/* BAGIAN KANAN (Wadah Gambar) */
.banner-kanan-gambar {
  flex: 1;
  display: flex;
  justify-content: flex-end; /* Mentok Kanan */
  align-items: flex-end;     /* MENTOK BAWAH (KUNCI POP OUT) */
  height: 100%;
  position: relative;
  z-index: 1;
}

/* GAMBAR POP-OUT (UKURAN RAKSASA) */
.gambar-pop-out {
  /* TINGGI 170% dari kotak yang cuma 320px. JADI GEDE BANGET. */
  height: 250%; 
  width: auto;
  
  /* MANTRA POP-OUT EKSTREM */
  /* Tarik ke bawah secara agresif */
  margin-bottom: -60px; 
  /* Geser ke kanan sedikit */
  margin-right: -20px;
  /* Margin atas 0 aja karena kita main dari bawah */
  margin-top: 0; 

  position: relative;
  z-index: 10;
}

/* Tombol Putih */
.btn-gabung-putih {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(to bottom, #ffffff, #dcebff);
  color: #000000;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  padding: 15px 35px; /* Padding tombol disesuaikan */
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 54, 194, 0.3);
  transition: transform 0.3s ease;
}

.btn-gabung-putih:hover {
  transform: translateY(-5px);
}

.icon-miring {
    transform: rotate(-45deg);
}


@media (max-width: 768px) {

  /* 1. KUNCI TINGGI WADAH UTAMA */
  .kotak-biru-banner {
    flex-direction: column; /* Susun atas-bawah */
    
    /* PENTING: Jangan 'height: auto' polos, nanti melar ngikutin gambar */
    height: 400px; /* Kunci tinggi total di HP (sesuaikan jika perlu) */
    
    padding: 40px 20px 0 20px; /* Padding bawah 0 biar gambar nempel dasar */
    text-align: center;
    overflow: hidden; /* Potong apapun yang lewat batas */
    justify-content: flex-start; /* Isi mulai dari atas */
  }

  /* 2. ATUR TEKS AGAR TIDAK MAKAN TEMPAT */
  .banner-kiri-teks {
    width: 100%;
    margin: 0 0 20px 0; /* Jarak ke gambar diperkecil */
    flex: 0 0 auto; /* Jangan melar */
  }

  .banner-kiri-teks h2 {
    font-size: 20px; /* Font judul dikecilkan sedikit */
    margin-bottom: 15px;
  }

  /* 3. KUNCI AREA GAMBAR (PENYEBAB UTAMA KEPANJANGAN) */
  .banner-kanan-gambar {
    position: relative;
    width: 100%;
    
    /* PENTING: Sisa ruang dipakai buat gambar, tapi jangan lebih */
    height: 100%; 
    flex: 1; 
    
    display: flex;
    align-items: flex-end; /* Gambar nempel bawah */
    justify-content: center; /* Gambar rata tengah */
  }

  /* 4. GAMBAR POP-OUT */
  .gambar-pop-out {
    position: relative;
    right: auto ;
    bottom: 130px; /* Turun dikit biar seolah keluar */
    /* KUNCI: Batasi tinggi gambar agar tidak bikin banner melar */
    height: 350px; /* Tinggi gambar fix di HP */
    width: auto;
    max-width: none;
    margin: 0 auto;
    transform: none;
  }
  .adoh{
   margin: 0%;
  }
}

/* =========================================
   7. UTILITAS BACKGROUND (JANGAN DIHAPUS)
   ========================================= */

.bg{
    background: transparent;

}
.bb{
  background-image: url('assets/BG.png');
  /* 2. Agar gambar menutupi seluruh area (tidak gepeng/stretch) */
  background-size: cover;
  /* 3. Agar gambar selalu rata tengah */
  background-position: center;
  /* 4. Mencegah gambar berulang-ulang jika ukurannya kecil */
  background-repeat: no-repeat;
  /* 5. (Opsional) Agar background tetap diam saat di-scroll (Parallax effect) */
  background-attachment: fixed;
}
.ril {
  width: 100%;
  height: 100vh;
  
  /* Syntax: radial-gradient(bentuk, warna1 posisi1, warna2 posisi2) */
  background: 
    radial-gradient(
      circle, /* Bentuk bulat */
      #f6fa02 0%, /* Mulai dari Putih penuh di tengah (0%) */
      rgb(0, 0, 0) 70% /* Berakhir di Putih transparan di 70% */
    );
}
.coba {
  box-shadow: 
    0 0 
    100px 
    0 
    #f6fa02; /* Contoh warna putih, 80% opacity */
}

@media (max-width: 900px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   8. KEREN INI TEXT BERJALAN
   ========================================= */

/* 1. WADAHNYA (Bar Hijau) */
.running-text-container {
  background-color: #fcff2f;
  height: 50px;/* Tinggi bar */
  overflow: hidden;/* PENTING: Sembunyikan teks pas lagi di luar layar */
  white-space: nowrap;/* PENTING: Biar teks memanjang ke samping (gak turun ke bawah) */
  display: flex;
  align-items: center;

  /* --- MANTRA JEBOL TEMBOK CONTAINER --- */
  width: 100vw;         /* Paksa lebar 100% dari Layar Monitor (Viewport Width) */
  position: relative;   /* Wajib relative */
  left: 50%;            /* Geser titik tengahnya ke tengah layar */
  right: 50%;
  margin-left: -50vw;   /* Tarik ke kiri separuh layar */
  margin-right: -50vw;  /* Tarik ke kanan separuh layar */
}

/* 2. TEKS YANG JALAN */
.text-jalan {
  font-family: 'Inter', sans-serif; /* Font keren */
  font-weight: 800;                 /* Tebal */
  font-size: 24px;                  /* Ukuran Besar */
  color: black;                     /* Warna Teks */
  text-transform: uppercase;        /* Huruf Kapital Semua */
  
  /* MANTRA ANIMASI */
  /* Nama animasi: gerak-kiri | Durasi: 15 detik | Tipe: Linear (rata) | Ulang: Selamanya */
  animation: gerak-kiri 15s linear infinite;
  
  /* Biar mulainya dari luar layar kanan */
  padding-left: 100%; 
  display: inline-block;
}

/* 3. DEFINISI GERAKAN (KEYFRAMES) */
@keyframes gerak-kiri {
  0% {
    /* Mulai dari posisi normal (di luar kanan karena padding 100%) */
    transform: translateX(0); 
  }
  100% {
    /* Berakhir dengan geser ke kiri sejauh -100% (keluar layar kiri) */
    transform: translateX(-100%); 
  }
}

/* =========================================
   9. ANGKA2 demi koko hans akwowaokowa
   ========================================= */

.social-stats {
  padding: 60px 0;
  text-align: center;
  /* SOLUSI 1: Ubah background jadi transparan biar gak kotak hitam */
  background-color: transparent; 
  position: relative;
  z-index: 5;
}

.judul-stats {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 36px;
  color: white;
  margin-bottom: 60px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* CONTAINER GRID */
.stats-container {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* PENTING: Biar rata atas */
  gap: 60px; 
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}

.stat-card {
  text-align: center;
  width: 200px; /* Kita kunci lebarnya biar rapi */
  position: relative;
}

/* --- AREA ICON (DIPERBAIKI) --- */
/* Kita kasih tinggi tetap biar angkanya sejajar walau icon beda */
.icon-wrapper, .icon-group {
  height: 80px; /* SOLUSI 3: Kunci tinggi area icon */
  display: flex;
  align-items: center; /* Icon rata tengah vertikal */
  justify-content: center;
  margin-bottom: 20px;
}

/* Ukuran Icon Diperbesar (SOLUSI 2) */
.icon-wrapper i {
  font-size: 70px; /* Gedein icon IG */
  color: white;
}

.icon-item {
  font-size: 50px; /* Gedein icon Tiktok/X */
  color: white;
  margin: 0 5px;
}

.custom-logo-stat {
  width: 70px; /* Gedein Logo BlockNews */
  height: auto;
}

/* --- ANGKA & LABEL --- */
.counter-box {
  display: flex;
  justify-content: center;
  align-items: baseline; /* Biar angka dan K+ sejajar kaki */
  margin-bottom: 5px;
}

.counter, .suffix {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 50px; /* Angka diperbesar */
  color: #f0ff1a; /* Kuning Neon */
  line-height: 1;
}

.label {
  color: white;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin-top: 5px;
}

/* --- EFEK GLOW --- */
.glow-ig { filter: drop-shadow(0 0 20px rgba(225, 48, 108, 0.6)); }
.glow-tiktok { filter: drop-shadow(0 0 15px rgba(0, 242, 234, 0.5)); }
.glow-white { filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.4)); }

/* RESPONSIVE HP */
@media (max-width: 768px) {
  .stats-container {
    gap: 40px;
  }
  .stat-card {
    width: 100%; /* Di HP jadi lebar */
    margin-bottom: 30px;
  }
}
@media (max-width: 768px) {

  /* --- 1. PERBAIKAN STATISTIK (Angka) --- */
  /* Masalah: 3 item aneh kalau 2 kolom. Solusi: 1 Kolom ke bawah biar gagah */
  .stats-container {
    display: flex;
    flex-direction: column; /* Susun ke bawah */
    gap: 40px; /* Jarak antar angka */
    padding: 0 20px;
    align-items: center; /* Rata tengah */
  }

  .stat-card {
    width: 100%; /* Lebar full */
    border-bottom: 1px solid #333; /* Garis pemisah tipis biar keren */
    padding-bottom: 30px;
  }
  
  .stat-card:last-child {
    border-bottom: none; /* Yang terakhir ga usah garis */
  }
  /* Ukuran Font & Icon di HP */
  .icon-wrapper i, .icon-item {
    font-size: 50px; 
  }
  .counter, .suffix {
    font-size: 45px; /* Angka diperbesar biar jelas */
  }
}
/* =========================================
   10.TESTIMONI GRID SECTION
   ========================================= */

.testimoni-section {
  padding: 80px 0;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* CONTAINER UTAMA (3 Kolom) */
.testi-grid-container {
  display: grid;
  /* Membagi layar jadi 3 bagian sama besar */
  grid-template-columns: 1fr 1fr 1fr; 
  gap: 20px; /* Jarak antar kolom */
  align-items: center; /* Biar rata tengah secara vertikal */
}

/* KOLOM TENGAH (Khusus buat numpuk 2 gambar) */
.tengah-stack {
  display: flex;
  flex-direction: column; /* Susun ke bawah */
  gap: 20px; /* Jarak antar gambar atas & bawah */
}

/* GAYA GAMBAR (Biar cakep) */
.testi-img {
  width: 100%; /* Gambar ngikutin lebar kolom */
  height: auto;
  border-radius: 15px; /* Sudut melengkung */
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Bayangan gelap */
  transition: transform 0.3s ease;
  
  /* Opsional: Biar agak transparan dikit kayak kaca */
  opacity: 0.9; 
}

/* EFEK HOVER (Pas mouse nempel, gambar naik dikit) */
.testi-img:hover {
  transform: translateY(-10px); /* Naik ke atas */
  opacity: 1; /* Jadi jelas banget */
  z-index: 2;
}

/* ANIMASI FLOAT (Goyang-goyang santai biar kayak melayang) */
@keyframes float-santai {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* Pasang animasi ke gambar (Opsional) */
.hover-float {
  /* Hapus baris ini kalau gamau gerak-gerak sendiri */
  animation: float-santai 4s ease-in-out infinite;
}

/* Biar geraknya gak barengan (Variasi) */
.testi-col:nth-child(2) .testi-img {
  animation-delay: 1s; /* Kolom tengah telat 1 detik */
} 
.testi-col:nth-child(3) .testi-img {
  animation-delay: 2s; /* Kolom kanan telat 2 detik */
}

   /* =========================================
   FINAL FIX: LAYOUT RAPI JAYA DI HP
   ========================================= */
@media (max-width: 768px) {

  /* --- 1. PERBAIKAN STATISTIK (Angka Jadi 1 Kolom Vertikal) --- */
  /* Biar gagah dan jelas dibaca di layar kecil */
  .stats-container {
    display: flex;
    flex-direction: column; /* Susun ke bawah */
    gap: 30px; /* Jarak antar blok statistik */
    padding: 0 20px;
    align-items: center; /* Rata tengah */
  }

  .stat-card {
    width: 100%; /* Lebar penuh */
    /* Optional: kasih garis pemisah tipis di bawahnya */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
  }
  
  .stat-card:last-child {
    border-bottom: none; /* Yang terakhir ga usah garis */
  }

  /* Ukuran Font & Icon di HP biar pas */
  .icon-wrapper i, .icon-item { font-size: 50px; }
  .counter, .suffix { font-size: 42px; }
  .label { font-size: 16px; }


  /* --- 2. PERBAIKAN TESTIMONI (Swipe Samping RAPI) --- */
  /* KUNCI KERAPIHAN: Fix height dan object-fit */
  .testi-grid-container {
    display: flex;            /* Berjejer ke samping */
    flex-wrap: nowrap;        /* Jangan turun ke bawah */
    overflow-x: auto;         /* Aktifkan scroll samping */
    gap: 20px;                /* Jarak antar kartu */
    padding: 20px 5%;         /* Padding biar ada ruang napas samping & bayangan */
    align-items: center;      /* PENTING: Biar semua rata tengah secara vertikal */
    
    /* Scroll Snap (Biar berhenti pas di tengah) */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* Smooth scroll iPhone */
    
    /* Sembunyikan scrollbar jelek */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
  }
  .testi-grid-container::-webkit-scrollbar { display: none; /* Chrome/Safari */ }

  /* WADAH KARTU TESTIMONI */
  .testi-col {
    min-width: 80vw;  /* Lebar 80% layar HP */
    height: 400px;    /* KUNCI TINGGI FIX: Semua kolom tingginya SAMA */
    flex-shrink: 0;   /* Jangan menciut */
    scroll-snap-align: center; /* Posisi stop di tengah */
    
    display: flex;
    flex-direction: column;
    justify-content: center; /* Gambar di dalam rata tengah vertikal */
  }

  /* GAMBAR TESTIMONI */
  .testi-img {
    width: 100%;
    height: 100%;        /* Mengisi penuh wadahnya (400px tadi) */
    object-fit: cover;   /* KUNCI: Gambar dipotong rapi memenuhi kotak, TANPA GEPENG */
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3); /* Bayangan biar pop-up */
  }

  /* KHUSUS KOLOM TENGAH (YG ISI 2 GAMBAR) */
  /* Kita harus bagi tingginya biar totalnya tetap 400px */
  .tengah-stack {
    justify-content: space-between; /* Jarak atas bawah diatur otomatis */
  }
  .tengah-stack .testi-img {
    /* Tinggi = (Total Tinggi / 2) dikurangi setengah jarak gap */
    height: calc(50% - 10px); 
    margin: 0; /* Reset margin */
  }


  /* --- 3. PERBAIKAN CAROUSEL GESER (Biar Fokus di Tengah) --- */
  .carousel-window {
     padding: 40px 0; /* Tambah ruang atas bawah biar ga sumpek */
  }

  .carousel-card {
    width: 65vw;        /* Lebar di HP agak dikecilin dikit biar fokus */
    max-width: 280px;
    opacity: 0.5;       /* Gambar pinggir lebih redup */
    transform: scale(0.85); /* Gambar pinggir lebih kecil */
    transition: all 0.4s ease; /* Animasi halus */
  }

  /* Gambar yang Aktif di Tengah */
  .carousel-card.active-slide {
    opacity: 1;         /* Terang penuh */
    transform: scale(1.1); /* Lebih besar menonjol */
    z-index: 10;
    /* Tambah efek glowing/bayangan pas di tengah */
    filter: drop-shadow(0 10px 15px rgba(240, 255, 26, 0.3));
  }
  
  .carousel-card img {
      border-radius: 12px; /* Ujung tumpul */
      /* Pastikan gambar mengisi kartu dengan rapi */
      width: 100%;
      height: auto;
      display: block;
  }

  .carousel-dots {
      margin-top: 30px; /* Jarak dots dari gambar */
  }
}
/* =========================================
   11. gambar geser (dilakukan demi koko hans haha)
   ========================================= */
/* --- SECTION UTAMA --- */
.chart-slider-section {
  padding: 60px 0;
  background-color: transparent;
  text-align: center;
  overflow: hidden; /* Sembunyikan yang keluar layar */
}

/* --- JENDELA (WINDOW) --- */
.carousel-window {
  width: 100%;
  max-width: 1200px; 
  margin: 0 auto;
  position: relative;
  /* Biar gambar kiri kanan bisa kelihatan sedikit tapi gak bocor ke section lain */
  overflow: hidden; 
  padding: 20px 0; /* Ruang buat bayangan */
}

/* --- REL (TRACK) --- */
.carousel-track {
  display: flex;
  gap: 20px; /* Jarak antar gambar */
  width: max-content; /* Lebar menyesuaikan jumlah gambar */
  /* Posisi awal akan diatur JS biar pas tengah */
}

/* --- KARTU GAMBAR (KUNCI TAMPILAN 3 GAMBAR) --- */
.carousel-card {
  /* SEBELUMNYA: 55vw (Kegedean) */
  
  /* REVISI BARU: 30vw */
  /* Logikanya: 30% (Kiri) + 30% (Tengah) + 30% (Kanan) = 90% (Muat 3 Gambar!) */
  width: 30vw; 
  max-width: 400px; 
  flex-shrink: 0;   
  display: flex;
  justify-content: center;
  align-items: center;
  
  transition: transform 0.5s ease; 
  opacity: 0.3; /* Gambar pinggir lebih redup biar fokus tengah */
  transform: scale(0.85); /* Gambar pinggir lebih kecil */

  /* --- TAMBAHAN PENTING (ANTI LAG) --- */
  will-change: transform, opacity; /* Paksa pakai GPU */
  backface-visibility: hidden;     /* Cegah kedip-kedip */
}

/* Gambar yang lagi Aktif (Di Tengah) */
.carousel-card.active-slide {
  opacity: 1;          /* Terang */
  transform: scale(1.1); /* Membesar menonjol */
  z-index: 2;
}

.carousel-card img {
  width: 100%; 
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  border: 1px solid #333; 
}

/* --- TITIK INDIKATOR --- */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.dot {
  width: 12px;
  height: 12px;
  background-color: #333;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
}

.dot.active {
  background-color: #eaff4b; /* Hijau Neon */
  transform: scale(1.3);
  box-shadow: 0 0 10px rgba(236, 255, 21, 0.5);
}

/* --- RESPONSIVE HP --- */
@media (max-width: 768px) {
  .carousel-card {
    /* Kalau di HP layar kecil, jangan 30vw (kekecilan). 
       Kita balikin jadi agak gede biar enak dilihat di HP */
    width: 70vw; 
    max-width: 300px;
  }
}
/* =========================================
   12. FOOTER (dilakukan demi koko hans haha)
   ========================================= */


footer {
  background-color: black;
  color: white;
  padding-top: 80px;
  padding-bottom: 50px;
  margin-top: 100px; /* Jarak dari konten atas */
  border-top: 1px solid #222; /* Garis tipis samar di atas */
}

.footer-wrapper {
  display: block; /* Reset flex container lama */
}

/* --- BAGIAN ATAS (3 KOLOM) --- */
.footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* Biar aman di layar kecil */
  gap: 40px;
  margin-bottom: 80px; /* Jarak ke disclaimer bawah */
}

.footer-col {
  flex: 1; /* Bagi rata kolom */
  min-width: 200px;
  text-align: left; /* Paksa rata kiri */
}

/* Kolom 1: Brand */
.brand-area {
  flex: 1.5; /* Kolom pertama lebih lebar dikit */
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 20px;
}

.f-logo {
  width: 40px; /* Ukuran Logo Footer */
  height: auto;
}

.footer-desc {
  color: #ccc;
  font-size: 14px;
  line-height: 1.6;
  max-width: 300px;
  text-align: left;
}

/* Judul Kolom (Social Media & Contact) */
.footer-col h4 {
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: 600;
}

/* Icons Social Media */
.social-icons {
  display: flex;
  gap: 15px;
}

.social-icons a {
  color: white;
  font-size: 24px;
  transition: 0.3s;
}

.social-icons a:hover {
  color: #3b82f6; /* Warna biru pas hover */
}

/* Contact Items */
.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  font-size: 14px;
  color: #ddd;
}

.contact-item i {
  font-size: 18px;
}

/* --- BAGIAN BAWAH (DISCLAIMER) --- */
.footer-bottom {
  border-top: 1px solid #222; /* Garis pemisah tipis */
  padding-top: 30px;
}

.footer-bottom p {
  color: #666; /* Warna abu-abu gelap */
  font-size: 12px;
  line-height: 1.6;
  text-align: justify; /* Rata kiri-kanan biar rapi blok */
}

/* --- RESPONSIVE FOOTER (HP) --- */
@media (max-width: 768px) {
  .footer-top {
    flex-direction: column; /* Susun ke bawah */
    gap: 50px;
  }
  
  .footer-desc {
    max-width: 100%;
  }
  
  .footer-bottom p {
    text-align: left; /* Di HP rata kiri aja biar gampang baca */
  }
}
/* =========================================
   FLOATING DISCORD BUTTON (POJOK BAWAH)
   ========================================= */

.floating-discord {
  /* 1. Posisi Mengambang (Fixed) */
  position: fixed;
  bottom: 30px;  /* Jarak dari bawah */
  right: 30px;   /* Jarak dari kanan */
  z-index: 9999; /* Paling atas, di depan semua elemen */
  
  /* 2. Tampilan Tombol (Putih Silver) */
  background: linear-gradient(90deg,  #faffb8, #ffffff);
  padding: 10px 20px 10px 10px; /* Padding kiri lebih kecil krn ada icon */
  border-radius: 20px; /* Bentuk Kapsul */
  
  /* 3. Susunan Isi (Flexbox) */
  display: flex;
  align-items: center;
  gap: 12px;
  
  /* 4. Hiasan & Font */
  text-decoration: none;
  box-shadow: 0 5px 20px rgba(0,0,0,0.4); /* Bayangan biar ngangkat */
  border: 1px solid #ddd; /* Garis tipis halus */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Teks Tombol */
.floating-discord span {
  font-family: 'Inter', sans-serif;
  font-weight: 700; /* Tebal */
  font-size: 16px;
  color: #000; /* Warna Teks Hitam */
}

/* Kotak Icon Discord (Biru) */
.icon-box {
  background-color: #5865F2; /* Warna Asli Discord */
  width: 40px;
  height: 40px;
  border-radius: 12px; /* Kotak tumpul (Squircle) */
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-box i {
  color: white;
  font-size: 20px;
}

/* --- EFEK HOVER (Pas Mouse Nempel) --- */
.floating-discord:hover {
  transform: translateY(-5px); /* Naik dikit */
  box-shadow: 0 10px 25px rgba(88, 101, 242, 0.4); /* Bayangan jadi biru */
}

/* --- RESPONSIVE HP --- */
@media (max-width: 768px) {
  .floating-discord {
    bottom: 20px;
    right: 20px;
    padding: 8px 15px 8px 8px;
  }
  
  .floating-discord span {
    font-size: 14px; /* Kecilin dikit di HP */
  }
  
  .icon-box {
    width: 35px;
    height: 35px;
  }
}

/* =========================================
   SISTEM HYBRID: DESKTOP vs MOBILE
   ========================================= */

/* A. LOGIKA SAKLAR (TAMPIL/SEMBUNYI) */
.view-desktop { display: block; }
.view-mobile  { display: none; } /* Awalnya HP sembunyi */

/* Saat Layar Kecil (HP), Balik Keadaannya */
@media (max-width: 768px) {
  .view-desktop { display: none; }
  .view-mobile  { display: block; }
}

/* =========================================
   B. STYLE KHUSUS MOBILE (SLIDER KAYAK EVENT)
   ========================================= */

/* Container Slider HP */
.t-window {
  width: 100%;
  overflow: hidden; 
  padding: 40px 0;
  position: relative;
}

.t-track {
  display: flex;
  gap: 20px;
  width: max-content;
  /* Posisi diatur Javascript */
}

/* Kartu Slider HP (Style Event Team) */
.t-card {
  width: 60vw;       /* Lebar pas di HP */
  max-width: 260px;
  flex-shrink: 0;
  opacity: 0.4;      /* Pinggir Redup */
  transform: scale(0.85); /* Pinggir Kecil */
  transition: all 0.5s ease;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Gambar Aktif (Tengah) */
.t-card.active-slide {
  opacity: 1;            /* Terang */
  transform: scale(1.1); /* Besar */
  z-index: 10;
  filter: drop-shadow(0 10px 15px rgba(240, 255, 26, 0.25));
}

.t-card img {
  width: 100%;
  height: auto;
  border-radius: 15px;
  border: 1px solid #333;
}

/* Dots Indikator */
.t-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.t-dot {
  width: 10px; height: 10px;
  background: #333;
  border-radius: 50%;
  transition: 0.3s;
}
.t-dot.active {
  background: #eaff4b;
  transform: scale(1.3);
}


/* =================================================================
   CSS KHUSUS TAMPILAN HP (FIX FINAL - DITAMBAHKAN PALING BAWAH)
   ================================================================= */

@media (max-width: 768px) {

  /* --- 1. PERBAIKAN STATS / ANGKA (Agar Rapi 1 Kolom ke Bawah) --- */
  .stats-container {
    display: flex;
    flex-direction: column; /* Susun vertikal */
    gap: 40px; /* Jarak antar item */
    padding: 0 30px;
    align-items: center;
    margin-top: 30px;
  }

  .stat-card {
    width: 100%; /* Lebar penuh */
    /* Garis pemisah tipis biar rapi */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 30px;
  }
  
  .stat-card:last-child {
    border-bottom: none; /* Hapus garis di item terakhir */
    padding-bottom: 0;
  }

  /* Ukuran Icon & Font Stats di HP */
  .icon-wrapper i, .icon-item { font-size: 50px; }
  .custom-logo-stat { width: 50px; }
  .counter, .suffix { font-size: 42px; }


  /* --- 2. PERBAIKAN HERO SECTION (Tombol vs Gambar Laptop) --- */
  /* Masalah: Tombol "Belajar Sekarang" mepet sama Laptop */
  
  /* Wadah Tombol */
  .tengah {
    margin-bottom: 50px !important; /* Dorong gambar ke bawah (Jarak Aman) */
    position: relative;
    z-index: 20; /* Pastikan tombol bisa diklik (di atas gambar) */
  }

  /* Wadah Gambar Laptop */
  .gambar-tengah {
    margin-top: 0px !important; /* Hapus margin negatif desktop (-70px) */
    padding-bottom: 40px;
  }

  /* Gambar Laptopnya */
  .img-responsive {
    width: 90%; 
    max-width: 350px; /* Batasi lebar biar ga kegedean */
    height: auto;
  }
}

/* KO HANSSSSSSSSSSSS */
/* =========================================
   3. SECTION 3D (PROFILE HANS)
   ========================================= */
.zoom-section {
    min-height: 80vh; /* Tinggi minimal biar enak discroll */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 50px 0;
}

/* WADAH UTAMA KIRI-KANAN */
.container-3d {
    display: flex;
    width: 90%;
    max-width: 1200px;
    align-items: center;
    justify-content: space-between;
    gap: 50px; /* Jarak antara gambar dan teks */
}

/* AREA GAMBAR (KIRI) */
.image-wrapper {
    flex: 1; /* Lebar 50% */
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px; /* WAJIB: Biar efek 3D muncul */
}

.gambar-target {
    width: 100%;
    max-width: 450px;
    border-radius: 15px;
    box-shadow: 0 0 40px rgba(236, 255, 28, 0.2);
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

/* AREA TEKS (KANAN) */
.text-content { 
    flex: 1; /* Lebar 50% */
    z-index: 2; 
    text-align: left; 
}

.text-content h1 {
    color: #ecff1c; /* Kuning Hans */
    font-size: 60px; 
    line-height: 1; 
    text-transform: uppercase; 
    margin-bottom: 20px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 800;
}

.text-content p { 
    color: white; 
    font-size: 18px; 
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

/* RESPONSIVE HP (LAYAR KECIL) */
@media (max-width: 768px) {
    .container-3d { 
        flex-direction: column; /* Gambar di atas, Teks di bawah */
        text-align: center; 
        margin-top: 100px;
    }
    
    .text-content {
        text-align: center;
        width: 100%;
    }
    
    .image-wrapper { 
        height: auto; 
        perspective: 800px; 
        margin-bottom: 30px;
    }
}
 /* --- 2. QUOTE SECTION --- */
        .quote-section {
            padding: 100px 0;
            text-align: center;
            background: #000;
            border-top: 1px solid rgba(255,255,255,0.1);
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .quote-text {
            font-size: 32px;
            font-family: 'Space Grotesk';
            font-style: italic;
            max-width: 900px;
            margin: 0 auto;
            line-height: 1.4;
        }
        .quote-author {
            margin-top: 20px;
            color: yellow;
            font-weight: 700;
            letter-spacing: 1px;
        }

/* =========================================
   PREMIUM SOCIAL MEDIA SECTION
   ========================================= */
/* Kita timpa settingan container khusus di section sosmed */
.sosmed-section .container {
    display: flex;
    flex-direction: column; /* KUNCI: Paksa susun ke bawah (Vertikal) */
    align-items: center;    /* Rata tengah */
    justify-content: center;
    gap: 40px;              /* Jarak antara Judul dan Tombol */
}

/* Pastikan judul rata tengah */
.sosmed-header {
    width: 100%;
    text-align: center;
    margin-bottom: 0; /* Margin diatur lewat gap container aja biar rapi */
}

/* Biar Grid tombolnya gak kegencet */
.sosmed-grid {
    width: 100%; 
}

.sosmed-section {
    padding: 50px 0;
    position: relative;
    z-index: 5;
}

.sosmed-header {
    text-align: center;
    margin-bottom: 60px;
}

.judul-kuning {
    color: #ecff1c;
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 10px;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.deskripsi-putih {
    color: #888;
    font-size: 18px;
    font-family: 'Poppins', sans-serif;
}

/* --- GRID LAYOUT --- */
.sosmed-grid {
    display: grid;
    /* Otomatis bagi 2 kolom, kalau di HP jadi 1 kolom */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}

/* --- KARTU SOSMED (CARD) --- */
.sosmed-card {
    background-color: #111; /* Hitam pekat */
    border: 1px solid #333; /* Garis tepi abu samar */
    padding: 25px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Animasi membal */
    position: relative;
    overflow: hidden;
}

/* TEXT INFO */
.card-info h3 {
    color: white;
    font-size: 20px;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}

.card-info span {
    color: #666;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    transition: 0.3s;
}

/* ICON LINGKARAN */
.icon-circle {
    width: 60px;
    height: 60px;
    background-color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    border: 1px solid #333;
    transition: 0.3s;
}

/* PANAH KANAN */
.arrow-icon {
    margin-left: auto; /* Dorong ke paling kanan */
    color: #333;
    font-size: 20px;
    transition: 0.3s;
    transform: translateX(-10px);
    opacity: 0; /* Sembunyi dulu */
}

/* --- EFEK HOVER (SAAT DISENTUH) --- */
.sosmed-card:hover {
    transform: translateY(-10px); /* Naik ke atas */
    border-color: #ecff1c; /* Border jadi kuning */
    box-shadow: 0 10px 30px rgba(236, 255, 28, 0.15); /* Glow kuning halus */
}

.sosmed-card:hover .icon-circle {
    background-color: #ecff1c;
    color: black;
    border-color: #ecff1c;
    transform: rotate(-10deg) scale(1.1); /* Miring & Besar dikit */
}

.sosmed-card:hover .card-info span {
    color: #ecff1c; /* Username jadi kuning */
}

.sosmed-card:hover .arrow-icon {
    opacity: 1; /* Muncul */
    transform: translateX(0); /* Geser ke posisi normal */
    color: #ecff1c;
}

/* --- RESPONSIF HP --- */
@media (max-width: 768px) {
    .judul-kuning { font-size: 36px; }
    .sosmed-grid { grid-template-columns: 1fr; } /* 1 Baris ke bawah */
    .sosmed-card { padding: 20px; }
}
/* LANJT */
.rainbow-section {
                background: rgba(0, 0, 0, 0);
                padding: 50px 0;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 600px;
                position: relative;
            }

            .rainbow-wrapper {
                width: 100%;
                height: 350px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 20px;
                position: relative;
                /* Hapus masking kalau bikin error di HP tertentu */
            }

            .rainbow-container {
                width: 100%;
                height: 100%;
                position: relative;
                cursor: grab;
                touch-action: none; /* Wajib buat HP */
            }
            .rainbow-container:active { cursor: grabbing; }

            .rainbow-card {
                position: absolute;
                width: 160px;
                height: 160px;
                background: #000000;
                border: 2px solid #333;
                border-radius: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                
                /* TITIK TENGAH LAYAR */
                left: 50%;
                top: 30%; /* Posisi Puncak Gunung */
                margin-left: -80px; /* Setengah lebar kartu */
                
                will-change: transform;
                transition: border-color 0.2s, box-shadow 0.2s; /* Animasi ringan */
            }

            /* GAMBAR */
            .rainbow-card img {
                width: 70%;
                height: auto;
                filter: grayscale(100%);
                transition: 0.3s;
                pointer-events: none;
            }

            /* EFEK AKTIF */
            .rainbow-card.active {
                border-color: #e2ff4f;
                box-shadow: 0 0 40px rgba(255, 255, 0, 0.2);
                z-index: 1000 !important;
            }
            .rainbow-card.active img {
                filter: grayscale(0%);
                transform: scale(1.1);
            }

            /* TEKS DI BAWAH */
            .partner-name-display {
                height: 40px;
                margin-top: 10px;
                text-align: center;
                width: 100%;
            }
            .partner-name-display h3 {
                color: white;
                font-family: 'Inter', sans-serif;
                font-size: 24px;
                font-weight: 700;
                margin: 0;
                opacity: 0;
                transform: translateY(10px);
                transition: all 0.3s ease;
            }
            .partner-name-display h3.show {
                opacity: 1;
                transform: translateY(0);
            }

            /* APA,MUKA ISI TENTANG */
            /* FONT IMPORT (Inter & Playfair Display untuk kesan mewah) */
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Playfair+Display:ital,wght@0,600;1,600&family=Dancing+Script:wght@600&display=swap');

  :root {
    --bg-color: #f8f9fa; /* Abu-abu sangat muda (bersih) */
    --text-dark: #ffffff;
    --text-grey: #bebebe;
    --accent: #f0f807; /* Navy Blue tua yang elegan */
  }

  body {
    background-color: var(--bg-color);
    margin: 0;
    font-family: 'Inter', sans-serif;
  }

  .founder-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 20px;
    min-height: 80vh;
  }

  .founder-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1100px;
    align-items: center;
  }

  /* --- IMAGE STYLE --- */
  .founder-image-wrapper {
    position: relative;
  }

  .founder-img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 20px 20px 0px rgba(0,0,0,0.05); /* Shadow kotak solid biar estetik */
    transition: transform 0.5s ease;
    filter: grayscale(20%); /* Sedikit desaturate biar classy */
  }

  .founder-image-wrapper:hover .founder-img {
    filter: grayscale(0%);
    transform: translateY(-5px);
  }

  .floating-badge {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: white;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-left: 4px solid var(--accent);
  }

  .badge-label {
    display: block;
    font-size: 12px;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .badge-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: black;
  }

  /* --- TEXT STYLE --- */
  .founder-content {
    padding-right: 20px;
  }

  .overline {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--text-grey);
    text-transform: uppercase;
    margin-bottom: 20px;
    display: inline-block;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
  }

  .headline {
    font-family: 'Playfair Display', serif; /* Font Serif biar kayak majalah */
    font-size: 42px;
    line-height: 1.2;
    color: var(--text-dark);
    margin: 0 0 30px 0;
  }

  .headline .highlight {
    font-style: italic;
    color: var(--accent);
  }

  .bio-text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-grey);
    margin-bottom: 40px;
  }

  /* Buttons */
  .cta-group {
    display: flex;
    gap: 20px;
  }

  .btn-primary {
    padding: 15px 35px;
    background-color: rgb(30, 30, 30);
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    transition: 0.3s;
  }

  .btn-primary:hover {
    background-color: rgb(57, 57, 57);
    transform: translateY(-2px);
  }

  .btn-secondary {
    padding: 15px 35px;
    background-color: transparent;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 600;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: 0.3s;
  }

  .btn-secondary:hover {
    border-color: var(--text-dark);
  }

  /* Responsive Mobile */
  @media (max-width: 768px) {
    .founder-container {
      grid-template-columns: 1fr; /* Jadi 1 kolom di HP */
      gap: 40px;
    }
    
    .founder-image-wrapper {
      order: -1; /* Gambar di atas */
    }

    .headline {
      font-size: 32px;
    }
  }
  /* =========================================
   HERO SECTION (FULL SCREEN)
   ========================================= */

.consume {
    /* 1. AGAR FULL 1 HALAMAN */
    /* min-height: 100vh artinya minimal setinggi layar perangkat */
    /* Kita kurangi dikit (-80px) buat kompensasi navbar biar pas */
    min-height: calc(100vh - 80px); 
    
    /* 2. AGAR TEKS PAS DI TENGAH (CENTERING) */
    display: flex;
    flex-direction: column; /* Susun ke bawah */
    justify-content: center; /* Rata tengah secara vertikal (Atas-Bawah) */
    align-items: center;     /* Rata tengah secara horizontal (Kiri-Kanan) */
    
    /* 3. PENGATURAN LEBAR */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    
    /* 4. JARAK KE GARIS KUNING */
    /* Padding bawah ditambah biar ga nempel sama running text */
    padding-bottom: 80px; 
    padding-top: 0; /* Reset padding atas lama */
}

/* PERCANTIK JUDUL BIAR GAGAH */
.consume h1 {
    font-size: 64px; /* Huruf lebih besar */
    line-height: 1.1;
    margin-bottom: 30px; /* Jarak antara Judul Besar & Sub-judul */
    max-width: 900px; /* Batasi lebar biar ga kepanjangan kesamping */
}

.consume h2 {
    font-size: 24px;
    font-weight: 300; /* Tipis elegan */
    color: #cccccc;   /* Abu terang */
    font-style: italic;
}

/* RESPONSIVE HP (BIAR GA KEGEDEAN DI HP) */
@media (max-width: 768px) {
    .consume {
        min-height: 80vh; /* Di HP jangan terlalu tinggi */
        padding-bottom: 40px;
    }
    .consume h1 {
        font-size: 36px; /* Kecilin font di HP */
    }
    .consume h2 {
        font-size: 16px;
    }
}


/* /////////////////////
QUIZZZZZZZZZZZ
//////////////////////// */
/* --- QUIZ CTA SECTION --- */
        .quiz-cta-section {
            padding: 100px 0;
            position: relative;
            overflow: hidden;
        }
        .quiz-box {
            background: linear-gradient(145deg, #0a0a0a, #000);
            border: 1px solid #333;
            border-radius: 30px;
            
            /* --- SETTING LEBAR & TENGAH (LAPTOP) --- */
            width: 100%;          /* Memenuhi lebar container */
            max-width: 1100px;    /* Batas maksimal biar ga terlalu panjang */
            margin: 0 auto;       /* MANTRA: Biar posisinya pas di TENGAH */
            
            /* Padding diatur biar lebih gepeng (Lebar) */
            padding: 70px 50px;   
            
            text-align: center;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 50px rgba(0,0,0,0.5);
        }

        /* Efek Glow Berputar di Belakang */
        .quiz-box::before {
            content: '';
            position: absolute;
            top: -50%; left: -50%; width: 200%; height: 200%;
            background: conic-gradient(transparent, transparent, transparent, var(--primary-yellow));
            animation: rotate-border 4s linear infinite;
            opacity: 0.3;
            z-index: 0;
        }
        
        /* Lapisan Hitam Penutup (Biar tulisan kebaca) */
        .quiz-box::after {
            content: '';
            position: absolute;
            inset: 2px; /* Jarak border */
            background: #050505;
            border-radius: 30px;
            z-index: 0;
        }

        .quiz-content-inner {
            position: relative;
            z-index: 1; /* Di atas background */
        }

        .quiz-title {
            font-size: 56px;
            font-weight: 800;
            line-height: 1;
            margin-bottom: 20px;
            text-transform: uppercase;
        }

        .quiz-badge {
            background: #222;
            color: var(--primary-yellow);
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 700;
            display: inline-block;
            margin-bottom: 20px;
            border: 1px solid #444;
        }

        @keyframes rotate-border {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Responsive HP */
        /* --- KHUSUS HP (BIAR KOTAK KECIL PAS) --- */
        @media (max-width: 768px) {
            .quiz-box {
                width: 90%;       /* Kasih sisa dikit kiri kanan biar ga nempel layar */
                margin: 0 auto;   /* Tengah */
                padding: 40px 20px; /* Padding kecil biar compact */
                border-radius: 20px;
            }
            
            .quiz-title { 
                font-size: 32px; /* Judul dikecilin dikit biar muat */
                line-height: 1.2;
            }
            
            .quiz-content-inner p {
                font-size: 14px !important; /* Teks deskripsi kecil */
                margin-bottom: 30px !important;
            }
            
            .btn-primary {
                width: 100%; /* Tombol jadi full width di HP */
                justify-content: center;
            }
        }

.akuu{color: #cdcdcd;}

        
        /* Tambahan dikit buat tombol login di navbar kamu */
        .btn-login-nav {
            background-color: #eaff00; color: black; padding: 8px 20px; 
            border-radius: 20px; text-decoration: none; font-weight: bold; font-size: 14px;
        }
        .btn-logout-nav {
            background-color: #ff3b3b; color: white; padding: 8px 20px; 
            border-radius: 20px; text-decoration: none; font-weight: bold; font-size: 14px;
        }



/* --- MOBILE RESPONSIVE FIX --- */
@media (max-width: 768px) {
    /* 1. Header & Navbar */
    .container { padding-left: 20px; padding-right: 20px; }
    #navbar h3, #navbar h4 { font-size: 1.2rem; } /* Kecilin Logo */
    
    /* Sembunyikan menu tengah di HP (Ganti jadi tombol menu kalau mau ribet, tapi sementara kita hide dulu biar rapi) */
    .menu-awal { display: none !important; } 
    
    /* 2. Tombol-tombol di Header */
    .btn-login-nav, .btn-logout-nav { padding: 5px 10px; font-size: 12px; }
    .input-cari-header { width: 100px !important; } /* Kecilin kolom cari */

    /* 3. Kartu Video & Berita */
    .card-module, .card { margin-bottom: 20px; }
    .row { margin-left: 0; margin-right: 0; }
    .col-lg-8, .col-lg-4, .col-md-6 { width: 100%; padding: 0; }
    
    /* 4. Kuis di Video */
    .kuis-box { margin-top: 0; border-radius: 0 0 15px 15px; }
    
    /* 5. Teks Judul Besar */
    h1 { font-size: 1.8rem !important; }
    h2 { font-size: 1.5rem !important; }
}






















/* =================================================================
   FIX RESPONSIF KHUSUS HOME (INDEX.PHP)
   Tempel ini di baris paling bawah style.css
   ================================================================= */

@media (max-width: 768px) {

    /* 1. HERO SECTION (Judul Besar) */
    .consume {
        min-height: 60vh; /* Kurangi tinggi biar gak kepanjangan */
        padding-top: 50px;
    }
    .consume h1 {
        font-size: 32px !important; /* Kecilin font judul */
        line-height: 1.3;
        padding: 0 10px;
    }
    .consume h2 {
        font-size: 16px !important; /* Kecilin sub-judul */
        margin-top: 10px;
        padding: 0 20px;
    }

    /* 2. STATS (Angka-angka) */
    .stats-container {
        flex-direction: column; /* Susun ke bawah */
        gap: 40px;
        align-items: center;
    }
    .stat-card {
        width: 100%;
        border-bottom: 1px solid #333; /* Garis pemisah */
        padding-bottom: 20px;
    }
    .stat-card:last-child {
        border-bottom: none;
    }

    /* 3. TESTIMONI (Switch ke Mode Mobile) */
    .view-desktop { display: none !important; }
    .view-mobile  { display: block !important; }
    
    .t-card {
        width: 70vw; /* Lebar kartu di HP */
    }

    /* 4. EVENT SLIDER */
    .carousel-card {
        width: 250px; /* Kecilin dikit gambar event */
    }

    /* 5. RAINBOW PARTNERS (Roda Putar) */
    .rainbow-section {
        height: 450px; /* Kurangi tinggi section */
        overflow: hidden;
    }
    .rainbow-wrapper {
        transform: scale(0.6); /* MANTRA: Kecilin roda jadi 60% biar muat di HP */
        margin-top: -50px; /* Tarik ke atas dikit */
    }
    .partner-name-display h3 {
        font-size: 18px; /* Kecilin nama partner */
    }

    /* 6. FOUNDER SECTION */
    .founder-container {
        grid-template-columns: 1fr; /* Jadi 1 kolom */
        text-align: center;
        gap: 30px;
    }
    .founder-image-wrapper {
        order: -1; /* Gambar pindah ke atas */
        margin-bottom: 20px;
    }
    .headline {
        font-size: 32px !important;
    }
    .bio-text {
        font-size: 14px;
        text-align: justify; /* Rata kanan kiri biar rapi */
    }
    .cta-group {
        justify-content: center; /* Tombol rata tengah */
        flex-direction: column; /* Tombol susun ke bawah */
    }
    .btn-secondary {
        margin-left: 0;
        margin-top: 10px;
    }

    /* 7. QUIZ SECTION */
    .quiz-box {
        padding: 40px 20px !important;
    }
    .quiz-title {
        font-size: 32px !important;
    }

    /* 8. FOOTER */
    .footer-top {
        flex-direction: column; /* Susun ke bawah */
        gap: 40px;
        text-align: center;
    }
    .footer-col {
        text-align: center; /* Teks footer rata tengah */
    }
    .social-icons {
        justify-content: center; /* Icon sosmed rata tengah */
    }
    .contact-item {
        justify-content: center; /* Kontak rata tengah */
    }
    
    /* 9. RUNNING TEXT (Tulisan Jalan) */
    .text-jalan {
        font-size: 16px; /* Kecilin dikit */
        animation-duration: 10s; /* Jalan lebih cepat dikit di HP */
    }
}