/* LuvPlace Custom Styles */

/* COLORS */
:root {
  --color1: #dc088f;
  --badge1: #9900ff;
  --badge2: #00ccff;
  --bg-color: #0a0510;
  --neon-pink: #ff007f;
  --neon-glow: rgba(255, 0, 127, 0.8);
  --icon-color: #ffffff;
  --dim-pink: rgba(255, 0, 127, 0.3);
  --playlist-bg: rgba(10, 5, 16, 0.95);
  
}

body {
  font-size: 18px;
}
.blurred-bg {
    background-color: rgba(2, 0, 22, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* --- Hero Section Container --- */
  /* --- HERO SECTION FULL HEIGHT --- */
.hero-section {
  position: relative;
  width: 100%;
  min-height: 100vh; /* Memastikan tinggi memenuhi 100% layar HP/Desktop */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0; /* Jarak padding disesuaikan */
  overflow: hidden;
  margin-bottom: -260px;
}

/* --- VIDEO BACKGROUND FULL (COVER) --- */
.hero-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Trik kalkulasi matematika agar iframe video menutupi layar seperti background-size: cover */
.hero-video-wrapper iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw; /* Ratio 16:9 (100 * 9 / 16) */
  min-height: 100vh;
  min-width: 177.77vh; /* Ratio 16:9 (100 * 16 / 9) */
  transform: translate(-50%, -50%) scale(1.1); /* Scale 1.1 menghilangkan garis border tipis youtube */
  border: none;
}

/* --- GRADASI DARI HITAM (BAWAH) KE TRANSPARAN (ATAS) --- */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* Gradasi: Hitam pekat di paling bawah (100%), meredup ke tengah (50%), dan transparan di atas (0%) */
  background: linear-gradient(
    to top, 
    rgba(2, 0, 22, 1) 0%,          /* Hitam pekat di bawah */
    rgba(2, 0, 22, 0.7) 40%, /* Dimmed sedang di area tengah */
    rgba(2, 0, 22, 0.2) 80%, /* Sangat halus/hampir transparan di atas */
    rgba(2, 0, 22, 0.4) 100% /* Sedikit gelap di paling atas agar navbar terbaca */
  );
}
    body:has(div.home-page) .fixed-top-margin {
      margin-top: 0;
    }
     
    /* Pembungkus Konten Utama */
    .hero-container {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 0;
      
    }

    /* --- Area Kiri (Judul & Tombol) --- */
    .hero-left {
      flex: 1;
      max-width: 50%;
      display: flex;
      flex-direction: column;
      gap: 20px;
      z-index: 5;
    }

    /* Gambar Judul / Title */
    .hero-title img {
      width: 100%;
      max-width: 420px;
      height: auto;
      display: block;
    }

    /* Area Tombol */
    .hero-buttons {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    /* Baris 1: Tombol Register & Trailer */
    .cta-row {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
    }

    .cta-row .btn-link img {
      height: 48px;
      width: auto;
    }
    
    /* Baris 2: Tombol Google Play, Apple App Store, & PC Client */
    .store-row {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }

    .store-row .btn-link img {
      height: 40px;
      width: auto;
    }

    /* Efek Interaktif Tombol */
    .btn-link {
      display: inline-block;
      text-decoration: none;
      transition: transform 0.2s ease, filter 0.2s ease;
    }

    .btn-link:hover {
      transform: translateY(-3px) scale(1.02);
      filter: brightness(1.1);
    }

    .btn-link:active {
      transform: translateY(0) scale(0.98);
    }

    /* Sisi Kiri (Teks / Title / CTA) */
    .hero-left {
      position: relative;
      z-index: 2; /* Menentukan posisi tumpukan di atas/bawah */
      flex: 1 1 50%;
      max-width: 550px;
      /* Atur jarak overlap dengan margin negatif ke arah kanan */
      margin-right: -200px; 
    }

    /* Sisi Kanan (Karakter / Logo / Gambar) */
    .hero-right {
      position: relative;
      z-index: 1; /* Berada di bawah hero-left, ubah ke 3 jika ingin di atas */
      flex: 1 1 50%;
      /* max-width: 600px; */
      display: flex;
      justify-content: center;
      align-items: center;
    }
    /* --- Area Kanan (Karakter & Logo) --- */
    /* .hero-right {
      flex: 1;
      position: relative;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      min-height: 480px;
    } */

    /* Gambar Karakter Utama */
    .hero-char {
      /* max-width: 480px; */
      width: 100%;
      height: auto;
      z-index: 3;
      position: relative;
      pointer-events: none;
    }

    /* Logo Game di Pojok Kanan Bawah */
    .hero-logo {
      position: absolute;
      bottom: 5%;
      right: 0;
      max-width: 220px;
      width: 40%;
      height: auto;
      z-index: 4;
      pointer-events: none;
      animation: floatUpDown 3s ease-in-out infinite alternate;
    }
    @keyframes floatUpDown {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-20px); /* Adjust distance as needed */
      }
    }
    /* --- Responsif (HP & Tablet) --- */
    @media (max-width: 1536px) {
      .hero-section {
        margin-bottom: -110px;
      }
    }
    @media (max-width: 1366px) {
      /* Masukkan aturan CSS khusus layar laptop di sini */
      .hero-section {
        margin-bottom: -110px;
      }
    }
    @media (max-width: 1280px) {
      .hero-section {
          margin-bottom: -250px;
      }
  .btn-explore {
    padding: 18px 30px!important;
  }
  .latest-news-item {
    padding: 8px 6px 9px!important;
  }
  .latest-news-content .badge {
    padding: 6px!important;
    font-size: 0.65rem;
  }
    }
    @media (max-width: 900px) {
      .hero-section {
        min-height: auto;
        /* padding: 60px 20px; */
        margin-bottom: -120px;
      }
      
      .hero-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
        padding: 80px 20px 60px;
        
      }

      /* .hero-left {
        align-items: center;
        max-width: 100%;
      } */

      .cta-row, .store-row {
        justify-content: center;
      }

      /* .hero-right {
        width: 100%;
        min-height: auto;
        justify-content: center;
      } */

      .hero-char {
        max-width: 360px;
      }

      .hero-logo {
        max-width: 160px;
        right: 10%;
      }
    }
    @media (max-width: 768px) {
      .hero-left {
        margin-right: auto;
      }
    }
    @media (max-width: 480px) {
      .cta-row .btn-link img {
        height: 40px;
      }

      .store-row .btn-link img {
        height: 34px;
      }

      .hero-logo {
        max-width: 130px;
        right: 0;
      }
    }

.section-title h2::before,
.section-title h2::after {
    content: none;
}
.dark .list-group-item {
    border-color: #fff;
}
.section-container {
    border: 1px solid #fff;
    padding: 50px;
    border-radius: 25px;
}
/* Container Utama Guides */
.guides {
  background: radial-gradient(
      circle at 10% 10%,
      rgba(30, 60, 220, 0.55) 0%,
      rgba(15, 30, 120, 0.3) 25%,
      transparent 50%
    ),
    linear-gradient(
      135deg,
      #0b1350 0%,
      #060b2e 30%,
      #030614 60%,
      #000000 100%
    );
    background-color: #000000;
    background: #020016 url('../images/guide-background.webp') center center no-repeat;
    background-size: cover;
    box-sizing: border-box;
}
  .tutorial-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px 48px;
    background: #060a14;
    border: 2px solid transparent;
    border-radius: 14px;
    background-image:
      linear-gradient(#060a14, #060a14),
      linear-gradient(90deg, #1e63ff, #35e0c9);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow:
      0 0 12px rgba(53, 224, 201, 0.35),
      0 0 24px rgba(30, 99, 255, 0.15);
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
 
  .tutorial-btn:hover {
    transform: translateY(-2px);
    box-shadow:
      0 0 18px rgba(53, 224, 201, 0.55),
      0 0 32px rgba(30, 99, 255, 0.25);
  }
 
  .tutorial-btn .arrow {
    font-size: 26px;
    line-height: 1;
    transition: transform 0.2s ease;
  }
 
  .tutorial-btn:hover .arrow {
    transform: translateX(6px);
  }
.section-title {
    font-style: italic;
}
.guides .section-title h2::after {
    content: '';
    background: url('../images/guide-section-title.webp') no-repeat;
    background-size: contain;
    width: 300px;
    height: 100%;
    margin-left: -100px;
    top: -20px;
    
}
/* Layout Flexbox (Menggantikan CSS Grid) */
.guides-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Mengetengahkan item di baris terakhir yang tidak full */
  gap: 20px;
}

/* Kartu Guide (5 Kolom di Desktop) */
.guide-card {
  /* Rumus: 5 kolom dengan gap 20px (total 4 gap = 80px) */
  flex: 0 0 calc((100% - 80px) / 5);
  box-sizing: border-box;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.guide-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* Gambar Thumbnail */
.guide-thumb {
  width: 100%;
}

.guide-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Breakpoint Responsif */
@media (max-width: 992px) {
  /* 3 Kolom di Tablet */
  .guide-card {
    flex: 0 0 calc((100% - 40px) / 3);
  }
  section {
      padding-left: 10px;
      padding-right: 10px;
  }
}

@media (max-width: 600px) {
  /* Gap disesuaikan menjadi 12px */
  .guides-grid {
    gap: 12px;
  }
  
  /* 2 Kolom di HP */
  .guide-card {
    flex: 0 0 calc((100% - 12px) / 2);
  }
}

@media (max-width: 400px) {
  /* 1 Kolom Penuh */
  .guide-card {
    flex: 0 0 100%;
  }
}

.badge {
    font-family: Barlow, Roboto, sans-serif;
    text-transform: uppercase;
    padding: 8px 10px!important;
}
.badge-news {
    background-color: var(--badge1)!important;
    border-color: var(--badge1)!important
}

.badge-events {
    background-color: var(--badge2)!important;
    border-color: var(--badge2)!important
}
#preloader:before {
    border-color: var(--color1);
}
.back-to-top {
    background-color: var(--color1)!important;
}
@font-face {
    font-family: 'moonlight';
    src: url('../fonts/moon/moon_light-webfont.woff2') format('woff2'),
         url('../fonts/moon/moon_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'moonbold';
    src: url('../fonts/moon/moon_bold-webfont.woff2') format('woff2'),
         url('../fonts/moon/moon_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
.dark #preloader {
    background: #020016;
}
body.dark{
    background: #020016 url('../images/background.webp') top center no-repeat;
    background-size: 100%;
    background-attachment: fixed;
    color: #fff;
}
body:has(div.home-page) {
  /* background: #020016 url('../images/home-background.webp') top center no-repeat; */
      background-size: 100%;
      background: #020016
    
}


.dark .section-bg, .dark .testimonials .testimonial-item {
    background-color: transparent;
}
.dark #footer, #footer,
.dark #footer .footer-bottom, #footer .footer-bottom {
    background-color: #000000;
}
.counts .count-box p, body, h1, h2, h3, h4, h5, h6 {
    font-family: Barlow, Roboto, sans-serif;
}


#header {
    top: 0px;
}

.navbar>ul>li {
    padding: 8px 0 23px 5px!important;
}

.navbar a, .navbar a:focus, .header-dropdown .btn {
    color: #fff!important;
    text-shadow: 0px 0px 10px #1f013c;
    font-weight: bolder;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 8px;
    letter-spacing: 1px;
    font-family: moonbold, Roboto,sans-serif;
}
.navbar .active, .navbar a:hover, .navbar .active:focus {
    color: #fff !important;
    padding: 5px 10px;
    border-radius: 8px;
    
background: linear-gradient(
    135deg,
    #ffb088 0%,    /* Top-left soft peach */
    #ff007f 35%,   /* Vibrant pink */
    #7b2cbf 70%,   /* Deep purple */
    #3b82f6 100%   /* Bright blue */
  );
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;

}

.navbar a:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.navbar .active:focus {
    transform: translateY(1px);
}

.navbar-mobile {
  background: #08060C;
}
.dark .navbar-mobile > ul > li {
    padding: 10px 15px !important;
}
/* 
.navbar-mobile .mobile-nav-toggle {
  top: 36px;
  right: 30px;
}
 */
/* BUTTONS */

.dark .btn-theme, .dark #footer .footer-newsletter form button, .btn-green-gradient {/* Ukuran & Tata Letak */
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  border: none!important;
  border-radius: 12px;
  cursor: pointer;
  color: #1a1a1a!important; /* Warna teks gelap agar kontras dengan warna cerah */

  /* Gradasi Warna (Hijau Neon -> Kuning Neon) */
  background: linear-gradient(90deg, #00FF00 0%, #CCFF00 50%, #E6FF00 100%);
  background-size: 200% auto; /* Untuk efek transisi gradasi yang mulus */

  /* Transisi & Bayangan */
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 12px rgba(0, 255, 0, 0.2);
  font-weight: 900!important;
  text-transform: uppercase;
}

/* Efek Hover (Saat Diarahkan kursor) */

.btn-green-gradient:hover,
.dark .btn-theme:hover, .dark #footer .footer-newsletter form button:hover {/* Menggeser posisi gradasi dan sedikit menaikkan tombol */
  
  background: linear-gradient(90deg, #00FF00 0%, #CCFF00 50%, #E6FF00 100%);
  background-size: 200% auto; /* Untuk efek transisi gradasi yang mulus */
  border: none!important;
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(204, 255, 0, 0.4);
}

/* Style saat Diklik (Active) */
.btn-green-gradient:active,
.dark .btn-theme:active, .dark #footer .footer-newsletter form button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 255, 0, 0.3);
}
/* ==========================================================
   NEWS & EVENTS SECTION STYLES (LuvPlace Theme Adjusted)
   ========================================================== */

.news-events .section-header,
.features .section-header {
  display: flex;
  justify-content: space-between; /* Menempatkan judul di kiri dan tombol di kanan */
  align-items: center;            /* Menyelaraskan posisi secara vertikal */
  margin-bottom: 20px;            /* Jarak ke konten di bawahnya */
}

/* Latar Belakang Section */
.news-events.section-bg {
  padding: 60px 0;
}

/* Judul Section */
.news-events .section-title,
.features .section-title {
  /* --- PENYESUAIAN PENTING UNTUK VERTICAL CENTER --- */
  margin: 0 !important;           /* Menghapus margin bawaan <h2> (seperti margin-top/bottom) */
  padding: 0 !important;          /* Menghapus padding bawaan jika ada */
  line-height: 1.2;               /* Menstabilkan tinggi baris teks */
  
  align-items: center;
  text-transform: uppercase;
}

h2.section-title span {
    color: var(--color1);
}
/* Container Utama Carousel */
.custom-carousel {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 
        0 0 5px rgba(0, 240, 255, 0.4),
        0 0 10px rgba(176, 38, 255, 0.4),
        0 0 15px rgba(255, 0, 127, 0.2);
}

.custom-carousel .carousel-item {
  position: relative;
  max-height: 380px;
  overflow: hidden;
}

.carousel-item img {
  object-fit: cover;
  filter: brightness(0.92);
  transition: transform 0.4s ease, filter 0.4s ease;
}

.carousel-item:hover img {
  transform: scale(1.03);
  filter: brightness(1);
}

/* 1. Tombol Kiri Bawah (Di dalam tiap slide) */
.carousel-bottom-bar {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 5;
}

/* Paginasi Bulat & Align Right */
.custom-indicators {
  display: flex !important;
  gap: 8px;
  justify-content: flex-end !important;
  margin-left: 20px;
  margin-right: 20px;
}

.custom-indicators button {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 1) !important;
  border: none !important;
  padding: 0;
  transition: all 0.3s ease;
  opacity: 1!important;
}

.custom-indicators button:hover {
  background-color: #ffffff !important;
}

.custom-indicators button.active {
  background-color: var(--color1) !important; /* Warna aksen utama LuvPlace */
  opacity: 1;
  transform: scale(1.25);
  box-shadow: 0 0 6px rgba(233, 75, 199, 0.8);
}

/* --- Latest News List (Sisi Kanan) --- */

.latest-news-box {
  border: 1px solid #222;
  border-radius: 20px;
  padding: 8px 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.latest-news-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 6px 16px;
  gap: 12px;
  border-bottom: 1px solid #222;
  transition: all 0.25s ease;
}

.latest-news-item:last-child {
  border-bottom: none;
}

.latest-news-item:hover {
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 6px;
}

/* Bagian Kiri (Badge + Judul) */
.latest-news-content {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.latest-news-content .badge {
  font-size: 0.725rem;
  font-weight: 600;
  padding: 5px 0; /* Padding atas-bawah 5px, kiri-kanan disesuaikan width */
  border-radius: 4px;
  flex-shrink: 0;
  
  /* --- Penyesuaian agar sama panjang --- */
  width: 65px;              /* Menentukan lebar tetap badge */
  text-align: center;       /* Memposisikan teks badge tepat di tengah */
  display: inline-block;    /* Memastikan properti width berfungsi optimal */
}

/* Judul Berita */
.latest-news-title {
  color: #2e3e4e;
  font-size: 0.925rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;       /* Mencegah teks berpindah ke baris baru */
  overflow: hidden;          /* Menyembunyikan teks yang meluap/keluar */
  text-overflow: ellipsis;   /* Menambahkan titik-titik (...) jika terpotong */
  display: block;            /* Memastikan elemen berperilaku sebagai block/inline-block */
}
.latest-news-title:hover {
  color: var(--color1); /* Berubah ke warna aksen LuvPlace saat hover */
}

/* Bagian Kanan (Tanggal) */
.latest-news-date {
  font-size: 0.8rem;
  color: #8c98a4;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Link Lihat Semua */
.news-events .read-more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s ease;
  border: 1px solid var(--color1);
  text-transform: uppercase;
  border-radius: 25px;
}

/* Efek Hover Tombol */
.news-events .read-more-link:hover {
  filter: brightness(1.1);
  color: #ffffff;
  text-decoration: none;
}

/* ==========================================
   OPSI 2: SINGLE LINE UNTUK MOBILE
   ========================================== */
@media (max-width: 768px) {
  .latest-news-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 4px !important;
  }

  /* Menjaga kontainer teks agar tahu batas lebarnya */
  .latest-news-content {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    min-width: 0 !important; /* KUNCI UTAMA agar ellipsis berfungsi di flexbox */
    gap: 8px !important;
  }

  .latest-news-content .badge {
    flex-shrink: 0 !important;
    width: 58px !important;
    font-size: 0.68rem !important;
    padding: 3px 0 !important;
    text-align: center;
  }

  /* Judul berita terpotong rapi di tengah */
  .latest-news-title {
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Tanggal tetap utuh di ujung kanan */
  .latest-news-date {
    font-size: 0.725rem !important;
    flex-shrink: 0 !important;
  }
}

/* Responsive Handling */
@media (max-width: 576px) {
  .tutorial-btn {
    padding: 15px 20px!important;
    font-size: 18px!important;
  }

  .news-events .section-header {
    flex-direction: row;          /* Tetap sejajar atau disesuaikan jika teks panjang */
  }
  .news-events .section-title {
    font-size: 18px;
  }
  
  .news-events .read-more-link {
    font-size: 12px;
    padding: 6px 12px;
  }

  .latest-news-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  
  .latest-news-date {
    margin-left: auto;
    font-size: 0.75rem;
  }

  .carousel-bottom-bar {
    bottom: 12px;
    left: 12px;
    right: 12px;
  }

  .btn-green-gradient {
    padding: 6px 14px;
    font-size: 0.8rem;
  }
}

@media (max-width: 991px) {
  .latest-news-wrapper {
    margin-top: 1.5rem;
  }
}

.dark #footer .footer-bottom, .dark .section-border-top {
    border-top: none;
}

.gradient-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

.footer-container {
    max-width: 1200px;
    margin: 50px auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    background: url('../images/footer-deco.webp') bottom right no-repeat;
    background-size: 75px;
}
#footer .footer-top .footer-links ul a:hover, #footer a:hover, #footer a:active {
    color: var(--color1);
}
/* --- KOLOM 1: LOGO & DESKRIPSI --- */
.footer-about {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1.5;
  align-self: center;
}

.footer-logo img {
  width: 110px;
  height: auto;
  display: block;
}

.footer-about-text {
  font-size: 13px;
  line-height: 1.5;
  color: #cccccc;
}

.footer-about-text p {
  margin-bottom: 8px;
}

.footer-about-text .copyright {
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0;
}

/* --- KOLOM 2: QUICK LINKS --- */
.footer-links {
  flex: 1;
}

.footer-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ffffff;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.links-wrapper {
  display: flex;
  gap: 40px;
}

.links-wrapper ul {
  list-style: none;
  padding-left: inherit;
}

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

.links-wrapper a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.3s ease;
}

.links-wrapper a:hover {
  color: #00cfff;
}

/* --- GARIS PEMISAH (DIVIDER) --- */
.footer-divider {
  width: 2px;
  height: 100px;
  align-self: stretch;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
}

/* --- KOLOM 3: FOLLOW US --- */
.footer-social {
  flex: 1;
}

.social-icons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.social-icons a {
  color: #ffffff;
  font-size: 22px;
  text-decoration: none;
  transition: transform 0.3s ease, color 0.3s ease;
}

.social-icons a:hover {
  color: #00cfff;
  transform: translateY(-3px);
}

/* =================================================== */
/* --- PERBAIKAN RESPONSIVE MOBILE & TABLET --- */
/* =================================================== */

@media (max-width: 992px) {
  body.dark {
    background-size: cover;
  }
  
  body:has(div.home-page) {
    background-size: auto;
  }
  .footer-container {
    flex-direction: column;
    align-items: center; /* Posisikan semua elemen di tengah */
    text-align: center;
    gap: 35px;
  }

  /* Sembunyikan garis pemisah vertikal di layar sedang/kecil */
  .footer-divider {
    display: none;
  }

  /* Kolom 1: Logo & Deskripsi bertumpuk vertikal */
  .footer-about {
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .footer-logo img {
    margin: 0 auto;
  }

  /* Kolom 2: Quick Links tetap simetris di tengah */
  .footer-links {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .links-wrapper {
    justify-content: center;
    gap: 50px;
  }

  .links-wrapper ul {
    text-align: left; /* Teks list tetap rata kiri agar rapi */
  }

  /* Kolom 3: Social Media rata tengah */
  .footer-social {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .social-icons {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .footer {
    padding: 30px 15px;
  }

  /* Di layar HP sangat kecil, jarak kolom link diperkecil */
  .links-wrapper {
    gap: 30px;
  }

  .social-icons {
    gap: 16px;
  }

  .social-icons a {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
    .section-container {
        padding: 20px;
    }
    .section-container .container {
        padding: 0;
    }
}

/* ==========================================
   FEATURES SECTION STYLES
   ========================================== */

/* Main Grid Container (2 Kolom Kiri & Kanan) */
.features-wrapper{
    border: 1px solid #fff;
    border-radius: 22px;
    padding: 25px;
}

.features .col-lg-5.d-flex {
  display: flex;
  flex-direction: column;
}

/* Memastikan gambar banner memiliki jarak dari tombol di bawahnya */
.static-banner-card {
  margin-bottom: 20px;
}

/* Mengatur tombol di posisi paling bawah dan fit sesuai ukuran teks */
.btn-explore {
  margin-top: auto;         /* Mendorong tombol ke posisi paling bawah */
  align-self: flex-start;  /* Menjaga lebar tombol sesuai kontennya (tidak melebar 100%) */
}

/* Penyesuaian Responsif Mobile & Tablet */
@media (max-width: 991px) {
  .btn-explore {
    margin-top: 15px;      /* Memberikan spasi yang pas saat tampilan menumpuk di HP */
  }
}

/* ------------------------------------------
   AREA KIRI: Static Image & Tombol
   ------------------------------------------ */
.static-banner-card {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.static-banner-card .banner-img {
  width: 100%;
  
  
}

/* Gradient Overlay untuk Memperjelas Tombol */
.static-banner-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  pointer-events: none;
}

/* Position Tombol Explore Features */
.banner-overlay {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 10;
}

/* Style Tombol Gradasi Hijau Emerald */

  .btn-explore {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 44px;
    background: #050505;
    border: 2px solid transparent;
    border-radius: 14px;
    background-image:
      linear-gradient(#050505, #050505),
      linear-gradient(90deg, #dc088f, #2522e3);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow:
      0 0 14px rgba(255, 45, 149, 0.35),
      0 0 22px rgba(45, 107, 255, 0.25);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
 
  .btn-explore:hover {
    transform: translateY(-2px);
    box-shadow:
      0 0 20px rgba(255, 45, 149, 0.55),
      0 0 32px rgba(45, 107, 255, 0.4);
  }
 
  .btn-explore .btn-text {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #dc088f, #2522e3);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
 
  .btn-explore .arrow {
    font-size: 22px;
    line-height: 1;
    color: #2522e3;
    transition: transform 0.2s ease;
  }
 
  .btn-explore:hover .arrow {
    transform: translateX(6px);
  }

/* ------------------------------------------
   AREA KANAN: Image Slider
   ------------------------------------------ */
.custom-features-slider {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  border: none;
}

.custom-features-slider .carousel-inner,
.custom-features-slider .carousel-item {
  height: 100%;
}

.custom-features-slider .slider-img {
  width: 100%;
  height: 380px;
  object-fit: contain;
}

/* ------------------------------------------
   RESPONSIVE MOBILE VIEW
   ------------------------------------------ */
@media (max-width: 992px) {
  
  .static-banner-card,
  .custom-features-slider,
  .custom-features-slider .slider-img {
    height: 260px; /* Menyesuaikan tinggi gambar di tablet & mobile */
  }

  .features-section .section-title {
    font-size: 20px;
  }

  .btn-explore {
    font-size: 13px;
    padding: 8px 16px;
  }
}

@media (max-width: 480px) {
  .static-banner-card {
      height: 130px;
  }
  
  .custom-features-slider,
  .custom-features-slider .slider-img {
    height: 220px;
  }
}

/* ==========================================
   COMMUNITY SECTION STYLES
   ========================================== */

/* Layout & Background Section */
.community-section {
  padding: 80px 0;
  /* Menggunakan gradasi latar gelap yang sama dengan Guides */
  background: radial-gradient(
      circle at 10% 10%,
      rgba(30, 60, 220, 0.4) 0%,
      transparent 50%
    ),
    linear-gradient(
      135deg,
      #030614 0%,
      #000000 100%
    );
  color: #ffffff;
  overflow: hidden;
  background: #020016 url('../images/community-background.webp') center center no-repeat;
    background-size: cover;
    box-sizing: border-box;
}

/* ------------------------------------------
   SISI KIRI: Teks Konten
   ------------------------------------------ */
.community-left {
  padding-right: 40px;
}

/* Judul #LUVPLACE COMMUNITY */
.community-title {
  font-family: Arial, Helvetica, sans-serif; /* Sesuaikan dengan font utama */
  font-size: 48px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -1px;
  margin-bottom: 20px;
}

/* Span untuk warna aksen merah muda khas LuvPlace */
.community-title span {
  color: #dc088f;
}

/* Subtitle */
.community-subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: #cccccc;
  margin-bottom: 35px;
  max-width: 480px;
}

/* ------------------------------------------
   STYLE TOMBOL (Sama dengan Guides)
   ------------------------------------------ */
.btn-learn-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 40px;
  background: #060a14;
  border: 2px solid transparent;
  border-radius: 12px;
  
  /* Efek Border Gradient */
  background-image:
    linear-gradient(#060a14, #060a14),
    linear-gradient(90deg, #dc088f, #2522e3);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  
  /* Efek Bayangan Neon */
  box-shadow:
    0 0 12px rgba(255, 45, 149, 0.3),
    0 0 20px rgba(45, 107, 255, 0.2);
  
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-learn-more:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 18px rgba(255, 45, 149, 0.5),
    0 0 28px rgba(45, 107, 255, 0.3);
  color: #ffffff;
}

.btn-learn-more .arrow {
  font-size: 20px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.btn-learn-more:hover .arrow {
  transform: translateX(5px);
}

/* ------------------------------------------
   SISI KANAN: Galeri Grid Thumbnail
   ------------------------------------------ */
.community-gallery {
  display: grid;
  /* Membuat 3 kolom berukuran sama */
  grid-template-columns: repeat(4, 1fr);
  /* Jarak antar item galeri */
  gap: 15px;
  padding: 10px;
}

/* Item Galeri (Thumbnail Kotak) */
  .tutorial-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px 48px;
    background: #060a14;
    border: 2px solid transparent;
    border-radius: 14px;
    background-image:
      linear-gradient(#060a14, #060a14),
      linear-gradient(90deg, #1e63ff, #35e0c9);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow:
      0 0 12px rgba(53, 224, 201, 0.35),
      0 0 24px rgba(30, 99, 255, 0.15);
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
 
.gallery-item {
  position: relative;
  width: 100%;
     border: 2px solid transparent;
    border-radius: 14px;
    background-image:
      linear-gradient(#060a14, #060a14),
      linear-gradient(90deg, #1e63ff, #35e0c9);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow:
      0 0 12px rgba(53, 224, 201, 0.35),
      0 0 24px rgba(30, 99, 255, 0.15);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-item:hover {
  transform: scale(1.02);
  z-index: 2;
    box-shadow:
      0 0 18px rgba(53, 224, 201, 0.55),
      0 0 32px rgba(30, 99, 255, 0.25);
}

/* Gambar di dalam Item */
.gallery-img {
  
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Memastikan gambar memenuhi kotak tanpa distorsi */
  display: block;
}

/* ------------------------------------------
   PERBAIKAN RESPONSIVE (MOBILE & TABLET)
   ------------------------------------------ */

@media (max-width: 991px) {
  .community-section {
    padding: 60px 0;
  }

  /* Mengubah layout menjadi menumpuk vertical */
  .community-left {
    padding-right: 15px;
    text-align: center;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .community-title {
    font-size: 36px;
  }

  .community-subtitle {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 576px) {
  .community-title {
    font-size: 28px;
  }

  /* Mengubah galeri menjadi 2 kolom di HP kecil */
  .community-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .btn-learn-more {
    font-size: 16px;
    padding: 14px 30px;
  }
}


/* PLAYER */
        .main-wrapper {
            position: relative;
        }
        .player-container {
            width: 100%;
            background: var(--bg-color);
            border-radius: 20px;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.7), inset 0 0 10px rgba(255, 0, 127, 0.1);
            border: 1px solid rgba(255, 0, 127, 0.3);
            position: relative;
            z-index: 2;
            overflow: hidden;
        }

        /* Top Progress Bar */
        .progress-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: rgba(255, 255, 255, 0.1);
            cursor: pointer;
            border-radius: 20px 20px 0 0;
            overflow: hidden;
        }

        .progress-bar {
            height: 100%;
            width: 0%;
            background: var(--neon-pink);
            box-shadow: 0 0 10px var(--neon-pink);
            position: relative;
            transition: width 0.1s linear;
        }

        /* Waveform Canvases */
        .waveform-section {
            flex: 1;
            height: 80px;
            display: flex;
            align-items: center;
        }

        canvas {
            width: 100%;
            height: 100%;
        }

        /* Controls Section */
        .controls-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 0 10px;
        }

        .controls-row {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .title-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .control-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--icon-color);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            opacity: 0.7;
        }

        .control-btn:hover {
            opacity: 1;
            transform: scale(1.1);
            filter: drop-shadow(0 0 8px var(--neon-pink));
        }

        .play-pause-btn {
            width: 42px;
            height: 42px;
            border: 2px solid var(--icon-color);
            border-radius: 50%;
            opacity: 1;
        }

        .play-pause-btn:hover {
            border-color: var(--neon-pink);
            box-shadow: 0 0 20px var(--neon-pink);
        }

        .playlist-toggle-btn svg {
            width: 18px;
            height: 18px;
        }

        .playlist-toggle-btn.active {
            color: var(--neon-pink);
            opacity: 1;
            filter: drop-shadow(0 0 8px var(--neon-pink));
        }

        svg {
            fill: currentColor;
            width: 22px;
            height: 22px;
        }

        .play-pause-btn svg {
            width: 30px;
            height: 30px;
        }

        /* Playlist Panel */
        .playlist-panel {
            position: absolute;
            top: auto;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            background: var(--playlist-bg);
            border: 1px solid rgba(255, 0, 127, 0.2);
            border-top: none;
            border-radius: 0 0 15px 15px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s;
            z-index: 1;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        .playlist-panel.show {
            max-height: 300px;
            padding: 20px 0;
        }

        .playlist-header {
            padding: 0 25px 10px 25px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 10px;
            font-size: 0.8rem;
            color: var(--neon-pink);
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .song-list {
            list-style: none;
            padding: 0;
            margin: 0;
            max-height: 220px;
            overflow-y: auto;
        }

        .song-item {
            padding: 12px 25px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background 0.2s;
            border-left: 3px solid transparent;
        }

        .song-item:hover {
            background: rgba(255, 0, 127, 0.1);
        }

        .song-item.active {
            background: rgba(255, 0, 127, 0.15);
            border-left-color: var(--neon-pink);
        }

        .song-info {
            display: flex;
            flex-direction: column;
        }

        .song-title {
            font-weight: 600;
            font-size: 0.9rem;
        }

        .song-artist {
            font-size: 0.75rem;
            opacity: 0.6;
        }

        .song-duration {
            font-size: 0.75rem;
            opacity: 0.5;
        }

        /* Track Info Display */
        .track-info {
            text-align: center;
            line-height: 1.2;
            display: flex;
            gap: 10px;
        }

        .current-title {
            font-size: 0.75rem;
            font-weight: bold;
            color: white;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
            white-space: nowrap;
        }

        .current-artist {
            font-size: 0.75rem;
            font-weight: bold;
            color: var(--neon-pink);
            opacity: 0.8;
        }

        /* Scrollbar */
        .song-list::-webkit-scrollbar {
            width: 5px;
        }
        .song-list::-webkit-scrollbar-track {
            background: transparent;
        }
        .song-list::-webkit-scrollbar-thumb {
            background: var(--dim-pink);
            border-radius: 10px;
        }

        audio {
            display: none;
        }

    
    .glow-card1 {
      position: relative;
      background: #0d0a14; /* Isian dalam card */
      
      /* TEKNIK BORDER GRADASI BERANIMASI */
      border: 2px solid transparent;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      
      /* Gunakan variabel --angle pada conic-gradient */
      --angle: 0deg;
      background-image: 
        linear-gradient(to bottom, #0d0a14, #0d0a14), 
        conic-gradient(
          from var(--angle), 
          #ccff00 0%,    /* Lime/Kuning */
          #00f0ff 25%,   /* Cyan */
          #7f00ff 50%,   /* Ungu */
          #d900ff 75%,   /* Pink/Magenta */
          #ccff00 100%   /* Kembali ke Lime */
        );

      /* Efek Glow Neon */
      
      box-shadow: 
        0 0 5px rgba(0, 240, 255, 0.4),
        0 0 10px rgba(176, 38, 255, 0.4),
        0 0 15px rgba(255, 0, 127, 0.2);

      /* Jalankan Animasi Putar */
      animation: rotate-gradient 8s linear infinite;
    }


    .glow-card2 {
      position: relative;
      background: #080711; /* Isian dalam card gelap */
      
      /* --- BAGIAN 1: BORDER GRADASI --- */
      border: 2px solid transparent; /* Border fisik transparan */
      
      /* Teknik background-clip untuk border melengkung */
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      
      
      
      /* --- BAGIAN 2: ANIMASI PEMUTARAN WARNA --- */
      /* Property kustom CSS untuk merekam sudut gradasi (membutuhkan browser modern) */
      --angle: 15deg;
      background-image: 
        linear-gradient(to bottom, #0d0a14, #0d0a14),
        conic-gradient(from var(--angle), #00f0ff 0%, #d900ff 30%, #ccff00 60%, #00f0ff 100%);
      
      animation: rotate-gradient 6s linear infinite; /* Animasi berputar selama 6 detik */
      
      /* --- BAGIAN 3: GLOW TIPIS (box-shadow) --- */
      
      box-shadow: 
        0 0 5px rgba(0, 240, 255, 0.4),
        0 0 10px rgba(176, 38, 255, 0.4),
        0 0 15px rgba(255, 0, 127, 0.2);
    }

    
    .glow-card3 {
      position: relative;
      background: #080711; /* Latar belakang konten di dalam bingkai */
      
      /* Membuat border gradasi melengkung (rounded) */
      border: 2px solid transparent;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      background-image: 
        linear-gradient(to bottom, #0d0a14, #0d0a14), /* Latar dalam */
        linear-gradient(135deg, #00f0ff, #b026ff 40%, #ff007f 70%, #00f0ff); /* Warna Gradasi */

      /* Efek Cahaya / Glow Neon */
      
      box-shadow: 
        0 0 5px rgba(0, 240, 255, 0.4),
        0 0 10px rgba(176, 38, 255, 0.4),
        0 0 15px rgba(255, 0, 127, 0.2);
    }

    
    .dark .card{
     border: 2px solid transparent;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
       background-image: 
        linear-gradient(to bottom, #0d0a14, #0d0a14), 
        linear-gradient(75deg,#ff3bdf 0%, #aa00ff 50%, #2000ff 100%
        );

      height: 100%;
      /* Efek Cahaya / Glow Neon */
      box-shadow: 
        0 0 5px rgba(0, 240, 255, 0.4),
        0 0 10px rgba(176, 38, 255, 0.4),
        0 0 15px rgba(255, 0, 127, 0.2);

    }
    .neon-card {
      padding: 30px;
      border-radius: 18px;
      position: relative;
      
      
      /* Membuat border gradasi melengkung (rounded) */
      border: 2px solid transparent;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
       background-image: 
        linear-gradient(to bottom, #0d0a14, #0d0a14), 
        linear-gradient(75deg,#ff3bdf 0%, #aa00ff 50%, #2000ff 100%
        );


      /* Efek Cahaya / Glow Neon */
      box-shadow: 
        0 0 5px rgba(0, 240, 255, 0.4),
        0 0 10px rgba(176, 38, 255, 0.4),
        0 0 15px rgba(255, 0, 127, 0.2);

    }
    /* Pseudo-elements Light Spot telah DIHAPUS */
    /* .glow-card::before, .glow-card::after { content: none; } */

    /* --- Definisi Animasi --- */
    /* Kita perlu mendaftarkan property kustom agar bisa dianimasikan */
    @property --angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }

    @keyframes rotate-gradient {
      to {
        --angle: 360deg; /* Memutar 360 derajat */
      }
    }

    .accordion-button {
      background-color: #0d0a14 !important;
      color: #fff;
    }
    .dark .accordion-item {
      border-color: #fff!important;
    }

    nav .pagination {
      justify-content: center;
      gap: 5px;
    }

    li.page-item {
    min-width: 40px;
    text-align: center;
    background: none;
}

.page-link {
    font-size: 20px;
    font-weight: 600;
    background-color: transparent;
    border:2px solid transparent;
    color: #fff!important;
    border-radius: 8px;
}
.active > .page-link, .page-link.active,.page-link:hover,.page-link:focus {
  background-color: transparent !important;
    border-color: transparent !important;
  color: #fff!important;
      border: 2px solid transparent;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
  background-image: 
        linear-gradient(to bottom, #0d0a14, #0d0a14), 
        linear-gradient(75deg,#ff3bdf 0%, #aa00ff 50%, #2000ff 100%
        )!important;


      /* Efek Cahaya / Glow Neon */
      box-shadow: 
        0 0 5px rgba(0, 240, 255, 0.4),
        0 0 10px rgba(176, 38, 255, 0.4),
        0 0 15px rgba(255, 0, 127, 0.2);

  

}
.disabled>.page-link, .page-link.disabled {
    background-color: transparent;
    border-color: transparent;
    opacity: 0.75;
}


.video-overlay {
    position: fixed;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.96);
    opacity: 0;
    transition: all ease 500ms;
}

.video-overlay.open {
    position: fixed;
    z-index: 1000;
    opacity: 1;
}

.video-overlay-close {
    position: absolute;
    z-index: 1000;
    top: 15px;
    right: 20px;
    font-size: 36px;
    line-height: 1;
    font-weight: 400;
    color: var(--color1);
    text-decoration: none;
    cursor: pointer;
    transition: all 200ms;
}

.video-overlay-close:hover {
    color: #3B566E;
}

.video-overlay iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    /* width: 90%; */
    /* height: auto; */
    border: none;
    background: #000;
}

.line-frame.neon-card {
    border: 2px solid transparent!important;
}

.post-gallery.neon-card .row {
  gap: 10px;    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.dark .gallery .gallery-item.neon-card {
    border-color:transparent;
    padding: 0px;
}
.gallery .gallery-item.neon-card {
    border-color:transparent;
}
.gslide-description.description-bottom {
  display: none;
}
article {
    display: flex;
    flex-direction: column;
    height: 100%;
}

article .card-button {
    display: flex;
    margin-top: 15px;
    justify-content: flex-end;
}

article .btn-explore {
  padding: 2px 5px;
  border-radius: 8px;
  font-size: 14px;
}