/* ==========================================================================
   DAFTAR ISI (TABLE OF CONTENTS) - BARA CREATION
   ==========================================================================
   01. VARIABEL WARNA & DASAR
   02. HEADER & NAVIGATION
   03. BERANDA (HERO SECTION) & TOMBOL LAYANAN (TERMASUK RESPONSIF HP)
   04. TRANSISI & BUNGKUS KONTEN
   05. SECTION: COMIC BOOK
   06. SECTION: ILUSTRASI SINGLE
   07. SECTION: MASCOT
   08. SECTION: LOGO (3D CAROUSEL)
   09. SECTION: POSTER
   10. SECTION: INFOGRAFIS 
   11. SECTION PICTOGRAM
   12. SECTION PPT ILUSTRASI 
   13. SECTION DESAIN BROSUR
   14. SECTION MOCK UP PRODUCT
   15. SECTION KONTAK
   16. FOOTER
   17. MEDIA QUERIES (SISA RESPONSIF HEADER DLL)
   ========================================================================== */


/* ==========================================================================
   00. LOADING SCREEN (PRELOADER)
   ========================================================================== */

body.no-scroll {
    overflow: hidden;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--bg-hitam);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Mencegah Lag saat animasi jalan */
    will-change: clip-path, opacity; 
    
    clip-path: circle(150% at 50% 50%);
    -webkit-clip-path: circle(150% at 50% 50%);
    
    transition: clip-path 1s cubic-bezier(0.77, 0, 0.175, 1), 
                -webkit-clip-path 1s cubic-bezier(0.77, 0, 0.175, 1), 
                opacity 1s ease;
}
/* Saat class .hilang ditambahkan oleh JavaScript */
#preloader.hilang {
    /* Lingkaran menyusut jadi 0% (hilang di tengah) */
    clip-path: circle(0% at 50% 50%); 
    -webkit-clip-path: circle(0% at 50% 50%);
    opacity: 0;
    pointer-events: none;
}

/* --- ISI KONTEN LOADING --- */
.loader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loader-logo {
    font-size: 2.5rem;
    color: var(--text-light);
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 20px;
    animation: pulseLogo 1.5s infinite alternate;
}

.loader-logo span {
    color: var(--accent-yellow); 
}

/* Kotak & Garis loading berjalan */
.loading-bar-container {
    width: 250px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.loading-bar {
    width: 0%;
    height: 100%;
    /* INI BIANG KEROKNYA: Kita ganti jadi Kuning Bara agar senada dengan angkanya */
    background-color: var(--accent-yellow); 
    border-radius: 10px;
    transition: width 0.2s ease-out; 
}

/* Style untuk Angka Persentase yang baru */
.loading-number {
    color: var(--accent-yellow);
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 5px;
    letter-spacing: 2px;
}

.loading-text {
    color: #000000;
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: blinkText 1.5s infinite;
}
/* Style untuk Gambar Logo di Loading Screen */
.loading-image-logo {
    width: 120px; /* Atur seberapa besar gambar logonya di sini */
    height: auto;
    margin-bottom: 15px; /* Jarak antara gambar dengan tulisan BARA CREATION */
    
    /* Animasi efek detak jantung/glowing */
    animation: pulseImage 1.5s infinite alternate; 
}

/* Animasi khusus untuk gambar logo */
@keyframes pulseImage {
    0% { 
        transform: scale(0.9); 
        opacity: 0.8; 
    }
    100% { 
        transform: scale(1.05); 
        opacity: 1; 
        filter: drop-shadow(0 0 15px rgba(255, 176, 0, 0.6)); /* Glowing warna kuning */
    }
}
/* --- EFEK KEDIP & JALAN --- */
@keyframes pulseLogo {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.05); opacity: 1; text-shadow: 0 0 15px rgba(255, 176, 0, 0.4); }
}

@keyframes fillBar {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

@keyframes blinkText {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
/* ==========================================================================
   01. VARIABEL WARNA & DASAR
   ========================================================================== */
/* --- ANIMASI MELUNCUR SAAT TOMBOL DIKLIK --- */
html {
    /* 💡 MANTRA SAKTI: Bikin perpindahan jadi meluncur halus */
    scroll-behavior: smooth;
    
    /* 💡 KUNCI PENTING: Kasih "rem" 80px dari atas. 
       Karena header Mbak pakai 'position: sticky', tanpa kode ini 
       judul section-nya bakal bablas sembunyi di balik menu header. */
    scroll-padding-top: 80px; 
}

:root {
    --bg-hitam: #d0a300; 
    --accent-yellow: #7f5700;
    --kuning-terang: #ffea00;
    --text-light: #ffffff;  
    --text-dark: #111111;
    --merah-maroon: #990000;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    -webkit-tap-highlight-color: transparent; /* ← tambahkan ini */
    outline: none; /* ← tambahkan ini */
}
body {
    background-color: var(--bg-hitam);
    color: var(--text-light);
    overflow-x: hidden;
}


/* ==========================================================================
   02. HEADER & NAVIGATION
   ========================================================================== */

.content-wrapper section {
    position: relative;
    z-index: 2; /* ← section selalu di atas ikon melayang */
}
header {
    background-color: var(--bg-hitam);
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.btn-back {
    color: var(--text-light);
    text-decoration: none;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s ease;
}

.btn-back:hover { 
    color: var(--accent-yellow); 
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav ul li a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

nav ul li a:hover { 
    color: var(--accent-yellow); 
}

/* --- TOMBOL HAMBURGER (Sembunyi di Laptop) --- */
.mobile-menu-btn {
    display: none; /* Sembunyi kalau di layar besar */
    background: transparent;
    border: none;
    color: var(--text-light);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.3s;
}

.mobile-menu-btn:hover {
    color: var(--accent-yellow);
}


@media (max-width: 768px) {
    header { 
        padding: 15px 5%; 
        display: flex;
        flex-direction: row; 
        justify-content: space-between; 
        align-items: center;
        
        /* 💡 FIX 1: Balikin jadi STICKY biar selalu nempel di atas pas discroll */
        position: sticky; 
        top: 0;
        z-index: 1000;
        background-color: var(--bg-hitam); /* Pastikan solid biar konten bawah gak nembus */
    }
    
    .btn-back { 
        font-size: 0.85rem; 
        width: auto; 
    }
    
    /* Tombol Garis 3 / X */
    .mobile-menu-btn { 
        display: block; 
        z-index: 1100; /* KUNCI: Harus lebih tinggi dari menu biar tombol X tetap bisa diklik */
        position: relative;
    }

    /* 💡 FIX 2: SULAP JADI MENU SAMPING (SIDEBAR) */
    nav#main-nav {
        position: fixed; /* Mengambang terlepas dari halaman */
        top: 0;
        right: -100%; /* Sembunyi jauh di luar layar sebelah kanan */
        width: 250px; /* Lebar menu sampingnya */
        height: 100vh; /* Tinggi full mentok atas-bawah */
        background-color: #b48d00; /* Warna latar gelap elegan */
        border-left: 1px solid rgba(131, 124, 0, 0.05);
        
        /* Matikan sistem max-height yang lama */
        max-height: none; 
        overflow-y: auto;
        
        /* Animasi meluncur mulus dari kanan ke kiri */
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -15px 0 30px rgba(0,0,0,0.8);
        z-index: 1050; /* Posisi di bawah tombol X */
        
        padding-top: 80px; /* Kasih ruang kosong di atas biar gak ketutupan tombol X */
    }

    /* Saat tombol diklik, tarik menu ke dalam layar */
    nav#main-nav.active { 
        right: 0; 
    }

    nav#main-nav ul { 
        display: flex; 
        flex-direction: column;
        padding: 0 20px;
        gap: 10px;
        text-align: left; /* Rata kiri biar rapi ala sidebar */
    }
    
    /* Desain teks menu di dalam sidebar */
    nav#main-nav ul li a {
        display: block;
        padding: 15px 10px;
        font-size: 1.1rem;
        font-weight: 700;
        background: transparent;
        border: none;
        border-bottom: 1px dashed rgb(0, 0, 0);
        border-radius: 0;
        color: var(--text-light);
        transition: color 0.3s, padding-left 0.3s;
    }

    /* Efek pas menu disentuh */
    nav#main-nav ul li a:hover {
        background-color: transparent;
        color: #000000;
        padding-left: 20px; /* Teksnya geser dikit ke kanan pas disentuh, cakep! */
    }
}
/* ==========================================================================
   03. BERANDA (HERO SECTION) & TOMBOL LAYANAN
   ========================================================================== */
.hero {
    background-color: var(--bg-hitam);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    position: relative; 
    overflow: hidden;
}

.hero-bg-animate {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    z-index: 1; 
}

.hero-bg-animate img {
    width: 100%; 
    height: 100%;
    object-fit: cover; 
    object-position: center 30%; 
    opacity: 1; 
}

.hero-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.hero-logo {
    max-width: 250px;
    width: 100%;      
    height: auto;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)); 
}

.hero p {
    font-size: 1.3rem;
    font-weight: bold;
    color:  rgb(255, 255, 255);
    max-width: 600px;
    margin: 15px auto 1px auto; 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

.hero-services-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    max-width: 900px;
    margin-top: 20px;
}

.hero-service-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 12px 20px;
    border-radius: 8px;
    color: var(--text-light);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.hero-service-btn i {
    font-size: 1.2rem;
    color: var(--kuning-terang); 
    transition: color 0.3s ease;
    text-shadow: 0 0 8px rgba(255, 234, 0, 0.5); 
}

.hero-service-btn span {
    font-size: 0.95rem;
    font-weight: 500;
}

.hero-service-btn:hover {
    background-color: var(--accent-yellow);
    color: #111;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 176, 0, 0.4);
    border-color: var(--accent-yellow);
}

.hero-service-btn:hover i { 
    color: #111; 
    text-shadow: none;
}

/* 📱 RESPONSIF HP: KHUSUS BERANDA (HERO) */
@media (max-width: 768px) {
    .hero { 
        height: auto; 
        min-height: 100vh; 
        padding: 120px 20px 60px 20px; 
    }
    .hero-logo { 
        max-width: 180px; 
        margin-bottom: 10px; 
    }
    .hero p { 
        font-size: 0.95rem; 
        margin: 10px auto 20px auto; 
    }
    .hero-services-grid { 
        gap: 8px; 
    }
    .hero-service-btn {
        padding: 8px 12px;
        gap: 6px;
        flex-direction: row; 
        width: auto;
    }
    .hero-service-btn i { 
        font-size: 0.9rem; 
        width: auto; 
    }
    .hero-service-btn span { 
        font-size: 0.75rem; 
    }
}


/* ==========================================================================
   04. TRANSISI & BUNGKUS KONTEN
   ========================================================================== */
/* ==================================================
   JARAK ANTAR SECTION (BIAR LEGA & GAK SUMPEK)
   ================================================== */

.content-wrapper section {
    /* 💡 KUNCI JARAK: Angka 180px ini yang mengatur jauhnya jarak.
       Kalau dirasa kurang jauh, jadikan 200px. Kalau kejauhan, jadikan 120px. */
    margin-bottom: 280px !important; 
}

/* 💡 KECUALI section paling bawah (Mock Up), biar gak terlalu jauh sama Footer */
#kontak {
    margin-bottom: 80px !important;
}

/* --- RESPONSIF HP (Jarak di HP agak dirapatkan biar gak pegel scroll) --- */
@media (max-width: 768px) {
    .content-wrapper section {
        margin-bottom: 150px !important; /* Jarak di HP lebih pendek */
    }
    #mock-up {
        margin-bottom: 50px !important;
    }
}
/* ==================================================
   EFEK ANIMASI SCROLL REVEAL (FADE & SLIDE UP)
   ================================================== */
   
/* Class utama untuk elemen yang akan disembunyikan awalnya */
.reveal-on-scroll {
    opacity: 0; /* Awalnya transparan */
    transform: translateY(60px); /* Awalnya posisinya agak ke bawah */
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); /* Efek transisi mulus */
}

/* Class yang akan ditambahkan oleh JavaScript saat elemen masuk layar */
.reveal-on-scroll.is-visible {
    opacity: 1; /* Muncul penuh */
    transform: translateY(0); /* Kembali ke posisi asli */
}

/* (Opsional) Delay agar elemen muncul bergantian (Cascade Effect) */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }

.gradient-transition {
    height: 150px;
    background: linear-gradient(to bottom, var(--bg-hitam) 0%, var(--accent-yellow) 100%);
    margin-top: -1px;
    margin-bottom: -2px; 
}

/* Area utama warna kuning */
.content-wrapper {
    background-color: var(--accent-yellow);
    padding: 50px 5% 100px 5%;
    min-height: 100vh;
    position: relative; 
    overflow: hidden;  
}

/* --- STYLING IKON MELAYANG --- */
/* SESUDAH */
.bg-icon {
    position: absolute;
    color: #ffffff; 
    opacity: 1;
    pointer-events: none; 
    transition: all ease-in-out;
    z-index: 0; /* ← turunkan ke 0 */
}

/* Judul Section di Area Kuning */
.section-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--text-dark);
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    z-index: 10; 
}

.section-title::after {
    content: '';
    display: block;
    width: 80px; 
    height: 5px;
    background-color: var(--merah-maroon);
    margin: 10px auto 0 auto;
    border-radius: 5px;
}


/* ==========================================================================
   05. SECTION: COMIC BOOK
   ========================================================================== */
#comic .section-title {
    color: var(--kuning-terang); 
    font-size: 3rem; /* 💡 Ukuran digedein (sebelumnya kisaran 2.2rem) */
    margin-bottom: 10px; /* Jarak ke label bawahnya dipersempit biar pas */
    letter-spacing: 5px; /* Kasih jarak antar huruf biar lebih premium */
}

/* 💡 Sesuaikan juga garis bawahnya biar pas sama judul yang makin gede */
#comic .section-title::after {
    background-color: var(--kuning-terang); 
    box-shadow: 0 0 10px rgba(255, 234, 0, 0.6); 
    width: 200px; /* Garisnya dipanjangin dikit biar seimbang */
    height: 5px;
}
#comic {
    max-width: 1200px;
    margin: 0 auto 80px auto;
    position: relative;
    z-index: 10;
}

.comic-container {
    display: grid;
    grid-template-columns: 350px 1fr; /* Kiri 350px, Kanan sisanya */
    gap: 30px;
    align-items: stretch;
}
/* ==================================
   KIRI: KOLOM (POSTER + INFO)
   ================================== */
.comic-left-column {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Jarak antara poster dan kotak info */
}

.comic-left-poster {
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease;
    background-color: transparent; 
}

.comic-left-poster:hover {
    transform: translateY(-5px);
    border-color: var(--kuning-terang);
}

.comic-left-poster img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* KOTAK INFO DI BAWAH POSTER (Efek Kaca) */
.comic-info-box {
    background: rgba(0, 0, 0, 0.25); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 234, 0, 0.3);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    text-align: center;
    transition: all 0.3s ease;
}

.comic-info-box:hover {
    transform: translateY(-3px);
    border-color: var(--kuning-terang);
    background: rgba(0, 0, 0, 0.35); /* Agak gelap dikit saat disentuh */
}

.comic-info-title {
    color: var(--kuning-terang);
    font-size: 1.1rem;
    font-weight: 900;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.comic-info-desc {
    color: #cccccc;
    font-size: 0.9rem;
    line-height: 1.5;
}
/* KANAN: KONTEN (FOTO & HARGA) */
.comic-right-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* GRID Baru: 3 Foto Memanjang ke Bawah (1 Baris Samping) */
.comic-photo-grid.triple {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    align-items: start; /* Biar kalau tinggi foto beda, tetap nempel di atas */
}

.comic-photo.potrait {
    border-radius: 12px;
    overflow: hidden;
    /* aspect-ratio dihapus agar kotaknya tidak memaksa bentuk foto */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    background-color: transparent; 
}

.comic-photo img {
    width: 100%;
    height: auto; /* 💡 KUNCI 1: Menyesuaikan tinggi asli gambar komik */
    object-fit: contain; /* 💡 KUNCI 2: Dijamin tidak ada panel komik yang kepotong */
    display: block;
    transition: transform 0.4s ease;
}

.comic-photo:hover img {
    transform: scale(1.08); /* Efek zoom tipis saat disentuh kursor */
}

/* ... (CSS Pricelist & Tombol Pesan tetap sama seperti sebelumnya) ... */
.comic-pricing-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
/* ==========================================================================
   05. SECTION: COMIC BOOK - KARTU HARGA (VERSI KUNING GRADASI MEWAH)
   ========================================================================== */

/* --- STYLING DASAR KARTU (Ubah jadi Kuning Gradasi) --- */
.comic-price-card {
    /* 💡 KUNCI: Gradasi Kuning Mewah/Emas */
    background: linear-gradient(145deg, var(--kuning-terang), #e6c300); 
    
    /* 💡 KUNCI: Warna teks utama di dalam kartu jadi gelap biar kebaca */
    color: var(--text-dark); 
    
    border: 1px solid var(--accent-yellow); /* Border coklat kuning */
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* Bayangan disesuaikan */
    transition: all 0.3s ease;
    
    /* Reset efek blur kaca jika sebelumnya Mbak pakai */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.comic-price-card:hover {
    transform: translateY(-5px);
    border-color: #ffffff; /* Border putih saat di-hover biar kontras */
    background: linear-gradient(145deg,var(--kuning-terang)); /* Efek menyala putih kuning */
    box-shadow: 0 10px 30px rgba(255, 234, 0, 0.4);
}

/* --- Highlight khusus Paket Oke (Tengah) --- */
.comic-price-card.highlight {
    /* Gradasi sedikit lebih terang/putih biar "nyala" */
    background: linear-gradient(145deg,var(--kuning-terang)); 
    border: 3px solid var(--accent-yellow); /* Border lebih tebal biar tegas */
    transform: scale(1.03);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 15px rgba(255, 234, 0, 0.2);
}

.comic-price-card.highlight:hover {
    transform: scale(1.03) translateY(-5px);
    background: linear-gradient(145deg);
}

/* --- Penyesuaian Warna Konten di Dalam Kartu Kuning --- */
.comic-card-header {
    border-bottom: 1px dashed rgba(0, 0, 0, 0.2); /* Garis putus-putus jadi gelap */
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.comic-card-header h4 {
    /* 💡 Judul Paket diubah jadi Merah Maroon biar galak & senada sama web */
    color: #000000; 
    font-size: 1.1rem;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.comic-price {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--text-dark); /* Harga jadi hitam */
}

.comic-price span {
    font-size: 0.8rem;
    font-weight: normal;
    color: #555555; /* Abu-abu gelap */
}

.comic-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comic-features li {
    font-size: 0.85rem;
    color: var(--text-dark); /* Teks fitur jadi hitam */
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Icon Ceklist tetap hijau, Icon Gembok jadi abu-abu gelap */
.comic-features li i.fa-check {
    color: #00800b; /* Hijau tua biar kontras di kuning */
}

.comic-features li i.fa-lock {
    color: #555555;
}

/* Fitur yang dikunci diubah warna abu-abunya */
.comic-features li.locked {
    opacity: 0.6;
    color: #666666;
}

.comic-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comic-features li {
    font-size: 0.85rem;
    color: #000000;
    display: flex;
    align-items: center;
    gap: 8px;
}

.comic-features li i.fa-check {
    color: #00ff15;
}

.comic-features li.locked {
    opacity: 0.5;
    color: #000000;
}

.comic-features li.locked i.fa-lock {
    color: #888;
}

.comic-btn-order {
    display: block;
    text-align: center;
    background-color: var(--kuning-terang);
    color: #111;
    font-weight: 900;
    font-size: 1.1rem;
    padding: 15px;
    border-radius: 10px;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(255, 234, 0, 0.3);
    transition: all 0.3s ease;
    letter-spacing: 1px;
    /* 💡 KUNCI: Tambahkan margin-top agar tidak mepet ke atas */
    margin-top: 30px; 
}

.comic-btn-order:hover {
    background-color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.4);
}


#ilustrasi {
    max-width: 1200px;
    margin: 0 auto 80px auto;
    position: relative;
    z-index: 10;
}

#ilustrasi .section-title {
    color: var(--kuning-terang); 
}

#ilustrasi .section-title::after {
    background-color: var(--kuning-terang); 
    box-shadow: 0 0 8px rgba(255, 234, 0, 0.5); 
}

/* GRID Baru: 4 Foto (2x2) khusus untuk Ilustrasi */
.comic-photo-grid.quad {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 2 Kolom menyamping */
    gap: 15px;
    
    /* 💡 KUNCI SAKTI: Batasi lebar keseluruhan grid agar fotonya mengecil */
    max-width: 900px; /* Mbak bisa ubah angka ini. Makin kecil ang  kanya, makin kecil fotonya */
    margin: 0 auto; /* Biar posisinya rapi di tengah */
}

/* Bikin foto strip lebih proporsional (kotak) */
.comic-photo-grid.quad .comic-photo {
    aspect-ratio: 1 / 1; /* 💡 Tetap kotak 1:1 sesuai permintaan Mbak */
    border-radius: 8px; 
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    background-color: transparent; 
}

/* --- Label Kecil Jenis Komik (Versi Fading Bar Storyboard) --- */
.comic-sub-label {
    display: block;              /* Agar bar memanjang full ke kanan-kiri */
    width: 100%;                 /* Memastikan pita memenuhi layar */
    text-align: center;          /* Teks tetap di tengah pita */
    
    /* 💡 KUNCI SAKTI: Pita transparan yang memudar di ujung */
    /* Kita pakai putih (255,255,255) dengan transparansi rendah (0.1) */
    background: linear-gradient(to right, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 100%);
    
    padding: 12px 0;             /* Ruang atas-bawah pita */
    margin: 20px 0 40px 0;       /* Jarak antar elemen */
    
    /* Styling Teks */
    color: #ffffff;              /* Putih bersih biar tegas di atas pita */
    font-size: 1.2rem;           /* Ukuran pas, tidak terlalu raksasa */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 5px;         /* Jarak antar huruf biar estetik */
    opacity: 1;                  /* Teks tetap tajam */
    
    /* Agar tidak nabrak elemen lain */
    position: relative;
    z-index: 5;
}


/* --- Pembatas / Jarak antar section komik --- */
.comic-section-divider {
    border: none;
    border-top: 1px dashed rgba(255, 234, 0, 0.25);
    margin: 60px 0 40px 0;
}

#comic .comic-container:last-of-type .comic-left-poster img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Override grid kolom untuk Comic Strip */
#comic .comic-container:last-of-type {
    grid-template-columns: 390px 1fr;
}

/* Responsif HP: reset grid comic strip */
@media (max-width: 768px) {
    #comic .comic-container:last-of-type {
        grid-template-columns: 1fr;
    }
    #comic .comic-container:last-of-type .comic-left-column {
        flex: unset;
    }
}
/* ==========================================================================
   📱 RESPONSIF HP: COMIC BOOK
   ========================================================================== */
@media (max-width: 768px) {
    /* Batasi lebar kolom kiri di HP biar rapi di tengah */
    .comic-left-column {
        max-width: 320px; 
        margin: 0 auto;
    }
    /* 1. Layout utama dibikin numpuk ke bawah (Poster di atas, rincian di bawah) */
    .comic-container {
        grid-template-columns: 1fr; 
        gap: 25px;
        padding: 0 10px;
    }

    /* 2. Poster utama dikecilkan sedikit biar pas di layar HP */
    .comic-left-poster {
        max-width: 320px; 
        margin: 0 auto;
    }

    /* 3. Tiga foto tetap 1 baris menyamping, tapi jaraknya dirapatkan */
    .comic-photo-grid.triple {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px; 
    }
/* 4. Kartu harga dipaksa 1 baris menyamping (3 Kolom) */
    .comic-pricing-row {
        grid-template-columns: repeat(3, 1fr); /* 💡 Kembali jadi 3 kolom */
        gap: 5px; /* Jarak antar kartu sangat dirapatkan */
    }

    /* Penyesuaian isi kartu agar muat di layar sempit HP */
    .comic-price-card {
        padding: 10px 5px; /* Ruang dalam kartu diperkecil drastis */
        border-radius: 8px;
    }

    /* 5. Reset efek zoom di "Paket Oke" biar tidak saling tabrak */
    .comic-price-card.highlight {
        transform: scale(1);
    }
    
    .comic-price-card.highlight:hover {
        transform: translateY(-3px); 
    }

    /* 6. Penyesuaian ukuran teks super kecil untuk HP */
    .comic-card-header {
        padding-bottom: 8px;
        margin-bottom: 8px;
    }

    .comic-card-header h4 {
        font-size: 0.7rem; /* Judul paket dikecilkan */
        margin-bottom: 4px;
    }

    .comic-price {
        font-size: 0.85rem; /* Harga dikecilkan */
    }

    .comic-price span {
        font-size: 0.6rem;
    }

    .comic-features li {
        font-size: 0.6rem; /* Teks daftar fitur dibuat mikro */
        gap: 4px;
    }
    
    .comic-features li i {
        font-size: 0.6rem; /* Ukuran ikon ceklist/gembok disesuaikan */
    }
}
/* ==========================================================================
   06. SECTION: ILUSTRASI SINGLE (FOKUS 3D SLIDER BENTUK POSTER)
   ========================================================================== */

/* --- JUDUL SECTION --- */
#ilustrasi .section-title {
    color: var(--kuning-terang); 
    font-size: 3rem;      
    font-weight: 900;
    letter-spacing: 5px;    
    margin-bottom: 10px;
    position: relative;
    z-index: 15;            
}

#ilustrasi .section-title::after {
    content: '';
    display: block;
    background-color: var(--kuning-terang); 
    width: 200px;           
    height: 6px;            
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 234, 0, 0.6); 
    margin: 10px auto 0 auto;
}

/* Label Sub-Judul */
.comic-sub-label {
    text-align: center;
    color: #fff;
    font-size: 1.2rem;
    letter-spacing: 3px;
    margin-bottom: 40px;
}

/* --- KONTAINER UTAMA --- */
.ilustrasi-main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==================================================
   SLIDER 3D ILUSTRASI (BENTUK POSTER / POTRET)
   ================================================== */
.ilustrasi-slider-wrapper {
    position: relative;
    width: 100%;
    height: 300px; /* 💡 MAKIN TINGGI: Sebelumnya 480px, aku jadikan 600px */
    margin: 0 auto 10px auto; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.ilustrasi-slider {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 100%;
}

/* 💡 KUNCI BENTUK GAMBAR: Tinggi & Lebar Diperbesar */
.ilustrasi-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;  /* 💡 LEBAR DIPERBESAR: Awalnya 300px, sekarang 380px */
    height: 530px; /* 💡 TINGGI DIPERBESAR: Awalnya 420px, sekarang 530px */
    background: transparent; 
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ilustrasi-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 💡 KUNCI SAKTI: Gambar TIDAK AKAN terpotong */
    border-radius: 10px; /* Ujung gambar sedikit membulat */
    /* Shadow diletakkan di gambar karena background-nya transparan */
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.6)); 
}

/* --- LOGIKA POSISI 3D MENGELILINGI --- */
.ilustrasi-slide.active { transform: translate(-50%, -50%) scale(1.05); z-index: 10; opacity: 1; }
.ilustrasi-slide.next { transform: translate(20%, -50%) scale(0.8); z-index: 5; opacity: 0.5; filter: blur(2px); } 
.ilustrasi-slide.prev { transform: translate(-120%, -50%) scale(0.8); z-index: 5; opacity: 0.5; filter: blur(2px); }
.ilustrasi-slide.hidden { transform: translate(-50%, -50%) scale(0.5); z-index: 1; opacity: 0; pointer-events: none; }

/* --- TOMBOL GESER --- */
.ilustrasi-nav-btn {
    position: absolute;
    top: 50%;
    background: transparent;
    border: none;
    width: 60px;
    cursor: pointer;
    z-index: 20;
    padding: 0;
}
.ilustrasi-nav-btn img {
    width: 100%; height: auto; object-fit: contain;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.6));
    animation: arrowIdle 1.5s ease-in-out infinite;
    transition: filter 0.3s ease;
}
.ilustrasi-nav-btn:hover img { filter: drop-shadow(0 0 10px rgba(255, 234, 0, 0.8)) drop-shadow(0 0 25px rgba(255, 234, 0, 0.6)); }

.ilustrasi-nav-btn.next-btn { right: calc(50% - 300px); transform: translateY(-50%); }
.ilustrasi-nav-btn.prev-btn { left: calc(50% - 300px); transform: translateY(-50%) scaleX(-1); }

/* ==================================================
   KARTU DETAIL HARGA ILUSTRASI
   ================================================== */
.ilustrasi-detail-card-wrapper {
    width: 100%;
    max-width: 850px; 
}

.ilustrasi-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 20px;
    margin-bottom: 25px;
    text-align: left;
}

.ilustrasi-addons {
    margin-top: 0; padding-top: 0; border-top: none; 
}

.addon-item { font-size: 0.85rem; color: #333; margin-bottom: 8px; font-weight: 600; }
.addon-item span { color: #cc0000; font-weight: 900; margin-right: 5px; }

.comic-btn-order.inside-btn {
    margin-top: 10px; width: 100%; background-color: #000; color: var(--kuning-terang);
}
.comic-btn-order.inside-btn:hover { background-color: #fff; color: #000; }

#ilustrasi .comic-card-header {
    display: flex; justify-content: space-between; align-items: center;
}
#ilustrasi .comic-card-header h4 { margin-bottom: 0; font-size: 1.4rem; }
#ilustrasi .comic-price { text-align: right; font-size: 1.3rem; }

/* ==================================================
   RESPONSIF HP (KHUSUS ILUSTRASI)
   ================================================== */
@media (max-width: 768px) {
    #ilustrasi .section-title { font-size: 2.8rem; letter-spacing: 3px; }
    #ilustrasi .section-title::after { width: 150px; }
    
    /* Ukuran Slider di HP */
    .ilustrasi-slider-wrapper { height: 130px; }
    .ilustrasi-slide { width: 210px; height: 310px; }
    
    /* Tombol Slider HP */
    .ilustrasi-nav-btn { width: 45px; }
    .ilustrasi-nav-btn.next-btn { right: calc(50% - 150px); }
    .ilustrasi-nav-btn.prev-btn { left: calc(50% - 150px); }

    /* Kartu Detail HP */
    .ilustrasi-card-grid { grid-template-columns: 1fr; gap: 20px; }
    #ilustrasi .comic-features li, .addon-item { font-size: 1rem; line-height: 1.4; }
    
    #ilustrasi .comic-card-header { flex-direction: column; align-items: flex-start; gap: 5px; }
    #ilustrasi .comic-card-header h4 { font-size: 1.3rem; }
    #ilustrasi .comic-price { text-align: left; }
}

/* ==========================================================================
   07. SECTION: MASCOT
   ========================================================================== */    

#mascot {

    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 100px auto;
    padding: 0 20px;
}

/* Judul Mascot (Sama persis dengan Ilustrasi & Comic) */
#mascot .section-title {
    color: var(--kuning-terang);
    font-size: 3.5rem;
    font-weight: 900;
    letter-spacing: 5px;
    margin-bottom: 40px;
}

#mascot .section-title::after {
    background-color: var(--kuning-terang);
    width: 200px;
    height: 6px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 234, 0, 0.6);
    margin: 10px auto 0 auto;
}

/* Layout Grid Mascot (Kiri Foto 400px, Kanan Konten) */
.mascot-container {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 40px;
    align-items: center; /* Sejajar tengah vertikal */
}

/* Frame Foto Maskot Kiri */
.mascot-left-poster {
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid rgba(255, 234, 0, 0.2);
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mascot-left-poster img {
    width: 100%;
    height: auto;
    object-fit: contain; /* Anti kepotong */
    display: block;
    transition: transform 0.4s ease;
}

.mascot-left-poster:hover img {
    transform: scale(1.05);
}

/* Header Kartu Maskot (Biar Harga di Kanan Atas) */
#mascot .comic-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#mascot .comic-card-header h4 {
    margin-bottom: 0;
    font-size: 1.3rem;
}

#mascot .comic-price {
    text-align: right;
    font-size: 1.3rem;
}

/* Garis pembatas untuk Add-on Mascot */
.mascot-addons {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed rgba(0, 0, 0, 0.2);
}

/* ==================================
   📱 RESPONSIF HP: MASCOT
   ================================== */
@media (max-width: 768px) {

    #mascot {
        margin-top: 20px; /* kurangi jarak atas section */
    }

    #mascot .section-title {
        margin-bottom: 15px; /* kurangi jarak judul ke gambar */
    }
    #mascot .section-title {
        font-size: 2.8rem;
    }
    
    #mascot .section-title::after {
        width: 150px;
    }

    .mascot-container {
        grid-template-columns: 1fr; /* Jadi atas-bawah */
        gap: 25px;
    }

    .mascot-left-poster {
        max-width: 350px;
        margin: 0 auto;
    }

    /* Memisahkan Judul & Harga di HP */
    #mascot .comic-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    #mascot .comic-card-header h4 {
        font-size: 1.4rem;
    }

    #mascot .comic-price {
        text-align: left;
    }

    /* Samakan ukuran teks fitur & tambahan di HP */
    #mascot .comic-features li,
    #mascot .addon-item {
        font-size: 1rem;
        line-height: 1.4;
    }

    #mascot .comic-features li i,
    #mascot .addon-item span {
        font-size: 1rem;
        width: 20px;
        display: inline-block;
    }
}

/* ==========================================================================
   08. SECTION: LOGO (3D CAROUSEL)
   ========================================================================== */
#logo {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 100px auto;
    padding: 0 20px;
    text-align: center; /* Memastikan semuanya berada di tengah */
}

/* Judul Logo (Sama persis dengan section sebelumnya) */
#logo .section-title {
    color: var(--kuning-terang);
    font-size: 3.5rem;
    font-weight: 900;
    letter-spacing: 5px;
    margin-bottom: 30px;
}
#logo .section-title::after {
    background-color: var(--kuning-terang);
    width: 200px; height: 6px; border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 234, 0, 0.6); margin: 10px auto 0 auto;
}

/* --- KUNCI SAKTI: EFEK 3D SLIDER --- */
.logo-slider-wrapper {
    position: relative;
    width: 100%;
    height: 380px;
    margin: 0 auto 50px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.logo-slider {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 100%;
}
/* Posisi dasar slide logo */
.logo-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    
    /* PERUBAHAN UTAMA DI SINI */
    background: transparent; /* Menghilangkan background hitam */
    border: none; /* Menghilangkan garis kuning agar tidak terbentuk kotak */
    box-shadow: none; /* Menghilangkan bayangan kotak */
    
    /* overflow: hidden; Dihapus agar shadow logo tidak kepotong di ujung */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-slide img {
    width: 100%; 
    height: 100%; 
    object-fit: contain; /* Ini kuncinya agar gambar MURNI PAS dan TIDAK TERPOTONG */
    
    /* Efek bayangan (shadow) 3D yang akan mengikuti bentuk asli logonya, bukan bentuk kotak */
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.6));
}

/* Posisi 3D: Tengah (Active) */
.logo-slide.active {
    transform: translate(-50%, -50%) scale(1);
    z-index: 10;
    opacity: 1;
}

/* Posisi 3D: Kiri (Prev) */
.logo-slide.prev {
    transform: translate(-120%, -50%) scale(0.75);
    z-index: 5;
    opacity: 0.4; /* Redup sesuai permintaan */
}

/* Posisi 3D: Kanan (Next) */
.logo-slide.next {
    transform: translate(20%, -50%) scale(0.75);
    z-index: 5;
    opacity: 0.4; /* Redup sesuai permintaan */
}

/* Posisi 3D: Sembunyi (Di belakang) */
.logo-slide.hidden {
    transform: translate(-50%, -50%) scale(0.5);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

/* Tombol Geser (Kanan Kiri) */
.logo-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent; /* Hilangkan background bulat kuning */
    border: none;
    width: 60px; /* Atur besarnya tombol di sini, bisa dibesarkan/dikecilkan */
    height: auto;
    cursor: pointer;
    z-index: 20;
    box-shadow: none; /* Hilangkan bayangan kotak bawaan tombol */
    transition: all 0.3s ease;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Memastikan gambar full mengisi area tombol */
.logo-nav-btn img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.6)); /* Tambahkan shadow keren ke bentuk panahnya */
}

/* Efek saat kursor diarahkan ke tombol Next (Kanan) */
.logo-nav-btn.next-btn { 
    right: 10px; 
}
.logo-nav-btn.next-btn:hover { 
    transform: translateY(-50%) scale(1.15); /* Membesar sedikit */
}

/* Efek dan Posisi untuk tombol Prev (Kiri) */
.logo-nav-btn.prev-btn { 
    left: 10px; 
    transform: translateY(-50%) scaleX(-1); /* KUNCI: Membalik gambar (flip horizontal) agar menghadap kiri */
}
.logo-nav-btn.prev-btn:hover { 
    transform: translateY(-50%) scaleX(-1) scale(1.15); /* Tetap terbalik dan membesar sedikit saat dihover */
}
/* --- KARTU HARGA LOGO --- */
.logo-card-container {
    width: 100%;
    max-width: 850px; /* 💡 Samakan lebarnya dengan Ilustrasi Single agar seragam */
    margin: 0 auto;
}
.logo-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Membagi dua kolom rata */
    gap: 20px;
    margin-top: 20px;
}
.logo-addons-box {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed rgba(0, 0, 0, 0.15);
    text-align: left;
}
/* Garis pembatas tipis antar kolom centang */
.logo-features-grid ul:first-child {
    border-right: 1px dashed rgba(0, 0, 0, 0.1);
    padding-right: 10px;
}

#logo .comic-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#logo .comic-card-header h4 { margin-bottom: 0; font-size: 1.3rem; }
#logo .comic-price { text-align: right; font-size: 1.3rem; }
/* --- KEYFRAME ANIMASI IDLE BERLAWANAN --- */
@keyframes arrowIdle {
    0% { transform: translateX(0); }
    50% { transform: translateX(8px); } /* Bergerak sedikit memaju ke arah luar */
    100% { transform: translateX(0); }
}

/* --- STYLE BUNGKUS TOMBOL --- */
.logo-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    width: 60px; /* Ukuran tombol */
    height: auto;
    cursor: pointer;
    z-index: 20;
    box-shadow: none;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Posisi Kanan & Kiri */
.logo-nav-btn.next-btn { 
    right: calc(50% - 300px); 
}
.logo-nav-btn.prev-btn { 
    left: calc(50% - 300px); 
    transform: translateY(-50%) scaleX(-1); /* Efek Cermin untuk membalik gambar */
}

/* --- STYLE GAMBAR & ANIMASI --- */
.logo-nav-btn img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.6)); /* Bayangan default */
    
    /* Animasi idle berjalan terus-menerus */
    animation: arrowIdle 1.5s ease-in-out infinite; 
    
    /* Transisi halus saat warna glow muncul */
    transition: filter 0.3s ease; 
}

/* --- EFEK HOVER (HANYA GLOW, ANIMASI TETAP JALAN) --- */
.logo-nav-btn:hover img {
    /* Glow berlapis warna kuning/emas agar menyala terang */
    filter: drop-shadow(0 0 10px rgba(255, 234, 0, 0.8)) drop-shadow(0 0 25px rgba(255, 234, 0, 0.6));
}
/* Responsif HP */
/* Responsif HP */
@media (max-width: 768px) {
    #logo .section-title { font-size: 2.8rem; }
    #logo .section-title::after { width: 150px; }
    .logo-slider-wrapper { 
        height: 120px;
        overflow: visible; /* biar slide kiri kanan tidak terpotong */
    }
    .logo-slide { 
        width: 260px; 
        height: 160px; 
    }
    
    /* Di HP Kartu Balik Atas-Bawah */
    #logo .comic-card-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    #logo .comic-card-header h4 { font-size: 1.4rem; }
    #logo .comic-price { text-align: left; }
    
    /* Tombol geser HP dikecilin dan Didekatkan */
    .logo-nav-btn { width: 40px; height: 40px; font-size: 1.2rem; }
    .logo-nav-btn.next-btn { right: calc(50% - 150px); } /* Posisi di HP */   
    .logo-nav-btn.prev-btn { left: calc(50% - 150px); } /* Posisi di HP */
}

/* ==========================================================================
   09. SECTION: POSTER (GLASSMORPHISM EFFECT)
   ========================================================================== */

#poster {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 100px auto;
    padding: 0 20px;
}

/* Judul (Format sama dengan section lain) */
#poster .section-title {
    color: var(--kuning-terang);
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 5px;
    margin-bottom: 50px; /* Jarak yang pas */
    text-align: center;
}
#poster .section-title::after {
    content: '';
    display: block;
    background-color: var(--kuning-terang);
    width: 200px;
    height: 6px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 234, 0, 0.6);
    margin: 10px auto 0 auto;
}

/* --- KONTAINER UTAMA POSTER --- */
.poster-container {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Agar tinggi kotak mengikuti gambar */
    gap: 50px; /* Jarak antara gambar dan teks */
    max-width: 1000px;
    margin: 0 auto;
}

/* --- BAGIAN KIRI: GAMBAR --- */
.poster-image-wrapper {
    flex: 1; /* Mengambil setengah ruang */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
}

.poster-img-main {
    width: 100%;
    
    /* 💡 PERUBAHAN: Lebar maksimal diperbesar, dan diberi batas tinggi maksimal */
    max-width: 440px; 
    max-height: 600px; 
    
    height: auto;
    border-radius: 15px;
    
    /* 💡 KUNCI: Pastikan gambar tetap proporsional (potret) tanpa terpotong */
    object-fit: contain; 
    
    z-index: 2;
    transition: transform 0.4s ease;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.7));
}

.poster-image-wrapper:hover .poster-img-main {
    transform: translateY(-20px) scale(1.02);
}

/* Cahaya kuning di belakang gambar */
.poster-glow-bg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; height: 80%;
    background: radial-gradient(circle, rgba(255,234,0,0.2) 0%, rgba(0,0,0,0) 70%);
    z-index: 1;
    filter: blur(20px);
}

/* --- BAGIAN KANAN: KARTU GLASSMORPHISM --- */
.poster-content-wrapper {
    flex: 1; /* Mengambil setengah ruang */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* BEDA DARI YANG LAIN: Efek Kaca Transparan */
.glass-price-card {
    background: rgba(30, 30, 30, 0.6); /* Hitam transparan */
    backdrop-filter: blur(12px);       /* Efek blur kaca */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 234, 0, 0.3); /* Border tipis kuning */
    border-radius: 20px;
    padding: 35px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.glass-price-card:hover {
    border-color: rgba(255, 234, 0, 0.8);
    box-shadow: 0 15px 40px rgba(255, 234, 0, 0.15);
}

.glass-header {
    border-bottom: 2px dashed rgba(255, 255, 255, 0.2);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.glass-header h4 {
    color: var(--kuning-terang);
    font-size: 1.6rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.glass-price {
    font-size: 1.8rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* List Fitur dengan Icon Petir */
.glass-features {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.glass-features li {
    font-size: 1.1rem;
    color: #ddd; /* Abu-abu terang */
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.glass-features li i {
    color: var(--kuning-terang);
    margin-right: 15px;
    font-size: 1.2rem;
    text-shadow: 0 0 5px rgba(255,234,0,0.5);
}

/* Add-ons Poster */
.glass-addons {
    background: rgba(0, 0, 0, 0.4); /* Background lebih gelap untuk add-on */
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 25px;
}

.glass-addon-item {
    font-size: 0.95rem;
    color: #ccc;
    margin-bottom: 8px;
}
.glass-addon-item:last-child { margin-bottom: 0; }

.glass-addon-item span {
    color: #00ff00; /* Warna hijau neon untuk plus */
    font-weight: 900;
    margin-right: 8px;
    font-size: 1.1rem;
}

/* Tombol Order Beda Style */
.glass-btn-order {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 15px;
    background: linear-gradient(45deg, #000, #222); /* Gradasi hitam */
    color: var(--kuning-terang);
    font-weight: 800;
    font-size: 1.1rem;
    text-decoration: none;
    border-radius: 10px;
    border: 1px solid var(--kuning-terang);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.glass-btn-order i { margin-right: 10px; font-size: 1.3rem; }

.glass-btn-order:hover {
    background: var(--kuning-terang);
    color: #000;
    box-shadow: 0 0 20px rgba(255, 234, 0, 0.5);
    transform: translateY(-3px);
}
@media (max-width: 768px) {

    #poster .section-title {
        font-size: 2.8rem;
        margin-bottom: 15px; /* kurangi jarak judul ke gambar */
    }

    .poster-container {
        gap: 15px; /* kurangi jarak antara gambar dan kartu harga */
    }

    .poster-image-wrapper {
        min-height: unset; /* hapus minimum tinggi biar gak ada ruang kosong */
    }
    /* --- Responsif Poster HP --- */
    .poster-container {
        flex-direction: column; /* Gambar di atas, Teks di bawah */
        gap: 30px;
    }
    
    .poster-img-main {
        max-width: 380px; /* Gambar agak dikecilkan di HP */
    }
    
    .glass-price-card {
        padding: 25px 20px; /* Padding dikurangi agar pas di layar kecil */
    }
    
    .glass-header h4 { font-size: 1.4rem; }
    .glass-price { font-size: 1.5rem; }
}

/* ==========================================================================
   10. SECTION: INFOGRAFIS 
   ========================================================================== */

#infografis {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 100px auto;
    padding: 0 20px;
    text-align: center;
}

#infografis .section-title {
    color: var(--kuning-terang);
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 5px;
    margin-bottom: 40px;
}
#infografis .section-title::after {
    content: '';
    display: block;
    background-color: var(--kuning-terang);
    width: 200px; height: 6px; border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 234, 0, 0.6);
    margin: 10px auto 0 auto;
}

/* --- GAMBAR HEADER INFOGRAFIS --- */
.infografis-header-image {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 50px auto;
    border-radius: 15px;
    overflow: hidden;
    /* Memberi bingkai kuning halus pada gambar utama */
    border: 2px solid rgba(255, 234, 0, 0.3);
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}

.infografis-header-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.infografis-header-image:hover img {
    transform: scale(1.03); /* Efek zoom tipis saat dihover */
}
/* --- DESAIN KARTU FULL GOLD PREMIUM --- */
.pricing-grid-premium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: center; 
}

.pricing-card-gold {
    font-family: 'Times New Roman', Times, serif;
    border-radius: 15px;
    padding: 40px 25px 0 25px; /* Padding bawah 0 karena ada pita addon */
    text-align: left;
    position: relative;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Biar pita bawah rapi */
    
    /* Warna Emas Mewah (Sama untuk semua) */
    background: linear-gradient(135deg, #ffd700 0%, #daa520 25%, #b8860b 50%, #daa520 75%, #ffd700 100%);
    box-shadow: 0 15px 35px rgba(0,0,0,0.5), inset 0 0 10px rgba(255,255,255,0.4);
    border: 1px solid #b8860b;
}

/* Efek Khusus Kartu Tengah (Tetap dibuat menonjol secara ukuran) */
.pricing-card-gold.pro-card {
    transform: scale(1.08); 
    z-index: 2;
    overflow: visible; /* Supaya badge pita merah di atas tidak terpotong */
    box-shadow: 0 25px 50px rgba(0,0,0,0.7), inset 0 0 15px rgba(255,255,255,0.5);
}

.pricing-card-gold:hover {
    transform: translateY(-8px);
}
.pricing-card-gold.pro-card:hover {
    transform: scale(1.08) translateY(-8px);
}

/* --- TIPOGRAFI & WARNA TEKS --- */
.pkg-name {
    font-size: 1.2rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
    font-weight: 800;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.pkg-price {
    font-size: 2.8rem; 
    font-weight: 400;
    color: #fff;
    margin-bottom: 20px;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}
.pkg-price span { font-size: 1.2rem; color: #eee; font-weight: bold; }

/* Garis Pembatas Putih Transparan */
.pkg-divider { border: none; border-top: 1px solid rgba(255,255,255,0.3); margin-bottom: 25px; }

/* Fitur List */
.pkg-features { list-style: none; padding: 0; margin-bottom: 30px; flex-grow: 1; }
.pkg-features li { margin-bottom: 12px; font-size: 1.1rem; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); }

.pkg-minus { color: rgba(255,255,255,0.6) !important; font-weight: normal; }
.pkg-plus { font-weight: bold; }
.pkg-plus i { color: #ff3333; margin-right: 10px; font-size: 1rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }

/* Pita Add-on Bawah (Warna Merah Gelap agar Kontras dengan Emas) */
/* Pita Add-on Bawah */
.pkg-addon {
    background: linear-gradient(to right, #800000, #b30000, #800000);
    color: #ffd700;
    padding: 15px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 900;
    margin: auto -25px 0 -25px; /* Margin bawah 0 agar mepet ke bawah */
    border-top: 1px solid #ffd700;
    
    /* 💡 KUNCINYA DI SINI: */
    /* Kita kasih border radius bawah supaya tetap bulat meski overflow: visible */
    border-radius: 0 0 15px 15px; 
}

/* Khusus kartu tengah (pro-card) agar pitanya benar-benar pas di bawah */
.pro-card .pkg-addon {
    margin-bottom: 0;
    /* Pastikan lekukannya sama dengan lekukan kartu (15px) */
    border-radius: 0 0 15px 15px;
}

/* Badge Rekomendasi (Pita Beludru Merah) */
.pkg-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, #b30000, #800000);
    color: #ffd700;
    padding: 8px 25px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.85rem;
    letter-spacing: 2px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    border: 1px solid #ffd700;
    z-index: 10;
}

/* 💡 TOMBOL UTAMA */
.infografis-action-area { margin-top: 60px; text-align: center; }

.global-btn-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #111; 
    color: var(--kuning-terang);
    padding: 18px 45px;
    font-size: 1.2rem;
    font-weight: 900;
    border-radius: 50px; 
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}
.global-btn-order i { margin-right: 12px; font-size: 1.5rem; }
.global-btn-order:hover {
    background: var(--kuning-terang);
    color: #000;
    transform: translateY(-5px); 
    box-shadow: 0 15px 30px rgba(255, 234, 0, 0.4); 
}
@media (max-width: 768px) {
    .infografis-header-image {
    margin: 0 auto 30px auto; /* kurangi jarak bawah ke kartu paket */
    }

    #infografis .section-title {
        font-size: 2.2rem;
        margin-bottom: 15px; /* kurangi jarak bawah judul ke gambar */
    }

    .pricing-grid-premium {
        grid-template-columns: repeat(3, 1fr); /* Paksa 3 kolom */
        gap: 8px; /* Jarak antar kartu sangat tipis */
        padding: 0 5px;
    }

    .pricing-card-gold {
        padding: 25px 8px 0 8px; /* Padding dalam dipersempit */
        border-radius: 10px;
    }

    /* Kecilin Nama Paket */
    .pkg-name {
        font-size: 0.7rem;
        letter-spacing: 0.5px;
        margin-bottom: 5px;
    }

    /* Kecilin Harga agar muat sebaris */
    .pkg-price {
        font-size: 1.1rem; /* Sangat kecil agar muat */
        margin-bottom: 10px;
    }
    .pkg-price span {
        font-size: 0.6rem;
    }

    /* Kecilin List Fitur */
    .pkg-features {
        margin-bottom: 15px;
    }
    .pkg-features li {
        font-size: 0.65rem; /* Teks fitur diperkecil */
        margin-bottom: 5px;
        line-height: 1.2;
    }
    .pkg-plus i {
        margin-right: 4px;
        font-size: 0.7rem;
    }

    /* Kecilin Pita Merah Bawah */
    .pkg-addon {
        padding: 8px 4px;
        font-size: 0.6rem;
        margin: 0 -8px 0 -8px;
    }

    /* Kecilin Pita Rekomendasi di Atas */
    .pkg-badge {
        padding: 4px 10px;
        font-size: 0.55rem;
        top: -10px;
        white-space: nowrap; /* Biar tulisan gak turun ke bawah */
    }

    /* Kecilin Tombol Order Utama */
    .global-btn-order {
        padding: 12px 25px;
        font-size: 0.9rem;
        letter-spacing: 1px;
    }
    .global-btn-order i {
        font-size: 1.1rem;
    }
}

/* ==================================================
   11. SECTION PICTOGRAM (GOLD STYLE)
   ================================================== */
/* --- JUDUL SECTION PICTOGRAM (KUNING & GARIS BAWAH) --- */
#pictogram .section-title {
    color: var(--kuning-terang); 
    font-size: 3rem;         /* Ukuran besar raksasa */
    font-weight: 900;
    letter-spacing: 5px;    /* Jarak huruf biar elegan */
    margin-bottom: 40px;    /* Jarak ke gambar slider di bawahnya */
    text-align: center;
    position: relative;
    z-index: 15;
}

/* Garis Bawah Kuning Glow */
#pictogram .section-title::after {
    content: '';
    display: block;
    background-color: var(--kuning-terang); 
    width: 200px;           /* Panjang garis */
    height: 6px;            /* Tebal garis */
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 234, 0, 0.7); /* Efek cahaya kuning */
    margin: 10px auto 0 auto; /* Tengah secara otomatis */
}

#pictogram {
    max-width: 1200px;
    margin: 100px auto;
    padding: 0 20px;
    text-align: center;
}

/* --- SLIDER PICTOGRAM --- */
.picto-slider-wrapper {
    position: relative;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
}
.picto-slider { position: relative; width: 100%; max-width: 600px; height: 100%; }
.picto-slide {
    position: absolute; top: 50%; left: 50%; width: 400px; height: 400px;
    background: transparent; display: flex; justify-content: center; align-items: center;
    transition: all 0.5s ease;
}
.picto-slide img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5)); }

/* Logika 3D Slider */
.picto-slide.active { transform: translate(-50%, -50%) scale(1.1); z-index: 10; opacity: 1; }
.picto-slide.next { transform: translate(15%, -50%) scale(0.8); z-index: 5; opacity: 0.4; }
.picto-slide.prev { transform: translate(-115%, -50%) scale(0.8); z-index: 5; opacity: 0.4; }
.picto-slide.hidden { transform: translate(-50%, -50%) scale(0.5); z-index: 1; opacity: 0; }

/* Tombol Geser Panah Api */
.picto-nav-btn {
    position: absolute; top: 50%; background: transparent; border: none;
    width: 55px; cursor: pointer; z-index: 20;
}
.picto-nav-btn img { 
    width: 100%; animation: arrowIdle 1.5s infinite; transition: 0.3s; 
}
.picto-nav-btn:hover img { filter: drop-shadow(0 0 15px var(--kuning-terang)); }
.picto-nav-btn.next-btn { right: calc(50% - 280px); transform: translateY(-50%); }
.picto-nav-btn.prev-btn { left: calc(50% - 280px); transform: translateY(-50%) scaleX(-1); }

/* --- KARTU PICTOGRAM --- */
.picto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}
.picto-card {
    background: linear-gradient(135deg, #ffd700, #daa520);
    border-radius: 15px; padding: 30px 15px;
    color: #000; transition: 0.3s;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.picto-card.highlight { transform: scale(1.05); border: 2px solid #fff; z-index: 2; }

.picto-card-header h4 { font-size: 1.1rem; margin-bottom: 10px; font-weight: 900; }
.picto-price-tag { font-size: 1.8rem; font-weight: 900; color: #cc0000; }
.picto-price-tag span { font-size: 1rem; }
.picto-unit { font-weight: bold; margin-bottom: 15px; opacity: 0.8; }

.picto-list { list-style: none; padding: 0; text-align: left; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 15px; }
.picto-list li { font-size: 0.9rem; font-weight: 700; margin-bottom: 8px; }
.picto-list li i { color: #cc0000; margin-right: 5px; }

/* --- TAMBAHAN / EXTRA --- */
.picto-extra-box {
    background: rgba(0,0,0,0.3);
    border: 2px dashed var(--kuning-terang);
    border-radius: 15px; padding: 25px; margin-bottom: 50px;
}
.extra-title { color: var(--kuning-terang); font-size: 1.3rem; font-weight: 900; margin-bottom: 15px; }
.extra-grid { display: flex; justify-content: center; gap: 30px; color: #fff; font-weight: bold; margin-bottom: 15px; }
.extra-grid i { color: var(--kuning-terang); margin-right: 5px; }
.extra-revisi { color: #ff3333; font-weight: 800; font-style: italic; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 10px; }

/* --- RESPONSIP HP (3 KOLOM KECIL) --- */
@media (max-width: 768px) {
    .picto-slider-wrapper { height: 110px; }
    .picto-slide { width: 185px; height: 260px; }
    .picto-nav-btn { width: 40px; }
    .picto-nav-btn.next-btn { right: 5px; }
    .picto-nav-btn.prev-btn { left: 5px; }

    .picto-grid { grid-template-columns: repeat(3, 1fr); gap: 5px; }
    .picto-card { padding: 15px 5px; }
    .picto-card-header h4 { font-size: 0.65rem; }
    .picto-price-tag { font-size: 0.9rem; }
    .picto-unit, .picto-list li { font-size: 0.55rem; }
    .extra-grid { flex-direction: column; gap: 10px; font-size: 0.8rem; }
        #pictogram .section-title {
        font-size: 2.2rem;
        letter-spacing: 2px;
    }
    #pictogram .section-title::after {
        width: 120px;
        height: 4px;
    }
}

/* ==================================================
  12. SECTION PPT ILUSTRASI (GOLD & BOLD)
   ================================================== */
#ppt-ilustrasi {
    max-width: 1200px;
    margin: 100px auto;
    padding: 0 20px;
    text-align: center;
}

/* Judul Kuning Glow */
#ppt-ilustrasi .section-title {
    color: var(--kuning-terang);
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 5px;
    margin-bottom: 30px;
}
#ppt-ilustrasi .section-title::after {
    content: ''; display: block; background-color: var(--kuning-terang);
    width: 200px; height: 6px; border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 234, 0, 0.7);
    margin: 10px auto 0 auto;
}

/* --- SLIDER 3D JUMBO --- */
.ppt-slider-wrapper {
    position: relative;
    width: 100%;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.ppt-slider { position: relative; width: 100%; max-width: 800px; height: 100%; }
/* --- SLIDER PPT ANTI-KOSONG & ANTI-POTONG --- */
.ppt-slide {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    
    /* 💡 UKURAN DISESUAIKAN: Rasio 16:9 (Standar PPT) */
    width: 500px;  /* Lebar */
    height: 281px; /* Tinggi (Hasil dari 500 / 1.77) */
    
    background: transparent; 
    border-radius: 10px; 
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* SESUDAH */
.ppt-slide img {
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
}
/* --- EFEK GLOW SAAT HOVER PANAH PPT --- */

/* State awal (biar transisinya mulus) */
.ppt-nav-btn img {
    transition: all 0.3s ease;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.6)); /* Shadow normal */
}

/* Saat di-Hover (Disorot) */
.ppt-nav-btn:hover img {
    /* 💡 KUNCI GLOW: Double drop-shadow biar kuningnya nyala banget */
    filter: drop-shadow(0 0 10px rgba(255, 234, 0, 0.9)) 
            drop-shadow(0 0 20px rgba(255, 234, 0, 0.5));
    
    /* Bikin tombol sedikit membesar biar kerasa interaktif */
    transform: scale(1.15); 
    

}

/* Efek saat diklik (ditekan) */
.ppt-nav-btn:active img {
    transform: scale(0.95);
}
/* Biar tombol navigasi tetep rapi, kita jauhin sedikit sesuai lebar baru */
.ppt-nav-btn.next-btn { right: calc(50% - 350px); }
.ppt-nav-btn.prev-btn { left: calc(50% - 350px); }

/* Logika Berputar */
.ppt-slide.active { transform: translate(-50%, -50%) scale(1.1); z-index: 10; opacity: 1; border: 2px solid var(--kuning-terang); }
.ppt-slide.next { transform: translate(15%, -50%) scale(0.8); z-index: 5; opacity: 0.4; filter: blur(2px); }
.ppt-slide.prev { transform: translate(-115%, -50%) scale(0.8); z-index: 5; opacity: 0.4; filter: blur(2px); }
.ppt-slide.hidden { transform: translate(-50%, -50%) scale(0.5); z-index: 1; opacity: 0; }

/* Tombol Geser Didekatkan */
.ppt-nav-btn { position: absolute; top: 50%; background: transparent; border: none; width: 60px; z-index: 20; cursor: pointer; }
.ppt-nav-btn img { width: 100%; animation: arrowIdle 1.5s infinite; }
.ppt-nav-btn.next-btn { right: calc(50% - 350px); transform: translateY(-50%); }
.ppt-nav-btn.prev-btn { left: calc(50% - 350px); transform: translateY(-50%) scaleX(-1); }

/* --- KARTU HARGA 2 KOLOM --- */
.ppt-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Kolom Sejajar */
    gap: 30px;
    max-width: 900px;
    margin: 0 auto 40px auto;
}
/* --- KARTU HARGA 2 KOLOM (VERSI TANPA BLOK HITAM) --- */
.ppt-card {
    /* Gradasi Emas Full dari atas ke bawah */
    background: linear-gradient(135deg, #ffd700, #daa520);
    border-radius: 20px; 
    overflow: hidden; 
    color: #000; /* Teks jadi Hitam agar terbaca di atas kuning */
    box-shadow: 0 15px 35px rgba(0,0,0,0.4); 
    transition: 0.4s;
    border: 1px solid #b8860b;
}

/* Header Kartu (Dibuat Transparan / Menyatu dengan Emas) */
.ppt-card-header {
    background: transparent; /* 💡 HAPUS HITAM: Sekarang mengikuti warna kartu */
    padding: 30px 20px 15px 20px;
    text-align: center;
    border-bottom: 2px dashed rgba(0, 0, 0, 0.15); /* Garis pembatas tipis */
}

.ppt-card-header h4 {
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 10px;
    color: #000; /* Judul Paket jadi Hitam */
    text-transform: uppercase;
}

/* Harga Dibuat Merah Mencolok agar Profesional */
.ppt-price {
    font-size: 2.2rem;
    font-weight: 900;
    color: #196900; /* 💡 MERAH PEKAT: Biar harganya langsung kelihatan */
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

.ppt-price span {
    font-size: 1.1rem;
    color: #196900;
}

.ppt-subtitle {
    color: #333;
    font-weight: 800;
    margin-top: 5px;
    background: rgba(255, 255, 255, 0.4); /* Efek badge transparan putih */
    display: inline-block;
    padding: 2px 12px;
    border-radius: 20px;
}

/* --- ISI KARTU --- */
.ppt-body {
    padding: 25px;
}

.ppt-features li {
    font-size: 1rem;
    font-weight: 700;
    color: #000; /* Semua teks fitur jadi Hitam */
}

/* Fitur yang terkunci dibuat abu-abu gelap agar tetap kontras tapi beda */
.ppt-features li.locked {
    color: rgba(0, 0, 0, 0.45);
}

.ppt-features li.locked i {
    color: #444;
}
.ppt-card.highlight { border: 3px solid #000000; transform: scale(1.03); }


.ppt-body { padding: 30px; text-align: left; }
.ppt-features { list-style: none; padding: 0; margin-bottom: 20px; }
.ppt-features li { font-size: 1rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; }
.ppt-features li i { color: #cc0000; margin-right: 12px; width: 20px; }

/* Style Khusus Fitur yang Dikunci (Gembok) */
.ppt-features li.locked { color: rgba(0,0,0,0.5); font-weight: 500; }
.ppt-features li.locked i { color: #555; }

.ppt-footer-info { border-top: 2px dashed rgba(0,0,0,0.15); padding-top: 15px; }
.ppt-footer-info p { font-weight: 800; margin-bottom: 5px; }
.addon-text { color: #cc0000; font-style: italic; font-size: 0.9rem; }

/* Responsif HP */
/* Responsif HP - VERSI 2 KOLOM BERJAJAR */
@media (max-width: 768px) {
    /* 1. Judul Section */
    #ppt-ilustrasi .section-title {
        font-size: 1.8rem;
        letter-spacing: 2px;
        margin-bottom: 15px;
    }
    #ppt-ilustrasi .section-title::after { width: 100px; height: 4px; }

    /* 2. Grid Paksa 2 Kolom */
    .ppt-grid {
        grid-template-columns: repeat(2, 1fr); /* TETAP 2 KOLOM */
        gap: 5px; /* Jarak antar kotak sangat tipis */
        max-width: 100%; /* Pakai seluruh lebar layar */
        padding: 0 5px;
        margin-bottom: 25px;
    }

    /* 3. Kecilin Kotak Card */
    .ppt-card {
        border-radius: 10px;
        border-width: 1px;
    }
    .ppt-card.highlight {
        transform: scale(1.02); /* Kurangi skala biar gak nabrak tetangga */
    }

    /* 4. Kecilin Header & Nama Paket */
    .ppt-card-header {
        padding: 10px 5px;
    }
    .ppt-card-header h4 {
        font-size: 0.75rem; /* Sangat kecil */
        letter-spacing: 0.5px;
        margin-bottom: 5px;
    }

    /* 5. Kecilin Harga (Tetap 1 Baris) */
    .ppt-price {
        font-size: 0.85rem; /* Disesuaikan agar muat sebaris */
        white-space: nowrap;
        letter-spacing: -0.5px;
    }
    .ppt-price span { font-size: 0.55rem; }

    .ppt-subtitle {
        font-size: 0.55rem;
        padding: 1px 6px;
    }

    /* 6. Kecilin Isi & Fitur List */
    .ppt-body {
        padding: 10px 8px;
    }
    .ppt-features li {
        font-size: 0.58rem; /* Ukuran teks fitur paling kecil tapi tetap terbaca */
        margin-bottom: 5px;
    }
    .ppt-features li i {
        margin-right: 4px;
        width: 10px;
        font-size: 0.6rem;
    }

    .ppt-footer-info {
        padding-top: 8px;
    }
    .ppt-footer-info p { font-size: 0.55rem; }
    .addon-text { font-size: 0.5rem; }

    /* 7. Settingan Slider PPT di HP */
    .ppt-slider-wrapper { height: 140px; }
    .ppt-slide { width: 205px; height: 120px; }
    .ppt-nav-btn { width: 35px; }
    .ppt-nav-btn.next-btn { right: 0px; }
    .ppt-nav-btn.prev-btn { left: 0px; }

    /* 8. Tombol Pesan Bawah */
    .global-btn-order {
        padding: 10px 20px;
        font-size: 0.8rem;
    }
}

/* ==================================================
   13. SECTION DESAIN BROSUR
   ================================================== */
#desain-brosur {
    max-width: 1200px;
    margin: 100px auto;
    padding: 0 20px;
    text-align: center;
}

/* Judul Kuning Glow */
#desain-brosur .section-title {
    color: var(--kuning-terang);
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 5px;
    margin-bottom: 30px;
    text-shadow: 0 0 10px rgba(255, 234, 0, 0.3);
}
#desain-brosur .section-title::after {
    content: ''; display: block; background-color: var(--kuning-terang);
    width: 200px; height: 6px; border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 234, 0, 0.7);
    margin: 10px auto 0 auto;
}

/* --- SLIDER 3D BROSUR --- */
.brosur-slider-wrapper {
    position: relative;
    width: 100%;
    height: 430px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
/* --- SLIDER BROSUR: VERSI LEBAR (BIAR GAK GEPENG) --- */
.brosur-slide {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    
    /* 💡 UBAH UKURAN: Brosur lipat/mockup biasanya lebih lebar atau kotak */
    width: 450px;  /* Kita buat lebih lebar */
    height: 350px; /* Tingginya disesuaikan */
    
    background: transparent; 
    border-radius: 12px; 
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.brosur-slide img {
    width: 100% !important; 
    height: 100% !important; 
    
    /* 💡 KUNCI SAKTI: Ganti 'fill' jadi 'contain' agar rasio asli foto terjaga */
    /* 'contain' memastikan foto gak ditarik paksa, jadi gak bakal GEPENG */
    object-fit: contain !important; 
    
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
}



.brosur-slide.active { transform: translate(-50%, -50%) scale(1.1); z-index: 10; opacity: 1; border: 2px solid var(--kuning-terang); border-radius: 12px; }
.brosur-slide.next { transform: translate(25%, -50%) scale(0.8); z-index: 5; opacity: 0.4; filter: blur(2px); }
.brosur-slide.prev { transform: translate(-125%, -50%) scale(0.8); z-index: 5; opacity: 0.4; filter: blur(2px); }
.brosur-slide.hidden { transform: translate(-50%, -50%) scale(0.5); z-index: 1; opacity: 0; }
/* ==================================================
   TOMBOL GESER (GLOW + ANIMASI IDLE ANTI BENTROK)
   ================================================== */

.brosur-nav-btn { 
    position: absolute; 
    top: 50%; 
    background: transparent; 
    border: none; 
    width: 65px; 
    z-index: 20; 
    cursor: pointer; 
    outline: none;
}

/* 1. Atur Arah Gambar (Img) */
.brosur-nav-btn.next-btn img { 
    width: 100%; 
    transition: 0.3s; 
}
.brosur-nav-btn.prev-btn img { 
    width: 100%; 
    transition: 0.3s; 
    transform: scaleX(-1); /* KUNCI 1: Panah kiri FIX hadap kiri */
}

/* 2. Berikan Animasi Gerak di Tombol (Button) */
.brosur-nav-btn.next-btn { 
    right: calc(50% - 350px); 
    animation: idleKanan 2s infinite ease-in-out; 
}
.brosur-nav-btn.prev-btn { 
    left: calc(50% - 350px); 
    animation: idleKiri 2s infinite ease-in-out; 
}

/* 3. Logika Animasi (Tetap simpan translateY agar tetap di tengah) */
@keyframes idleKanan {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(12px); } /* Nendang ke Kanan */
}
@keyframes idleKiri {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(-12px); } /* Nendang ke Kiri */
}

/* 4. Efek Hover Glow & Membesar (Anti Lupa Arah) */
.brosur-nav-btn:hover img {
    filter: drop-shadow(0 0 10px rgba(255, 234, 0, 0.9)) 
            drop-shadow(0 0 20px rgba(255, 234, 0, 0.5));
}
.brosur-nav-btn.next-btn:hover img {
    transform: scale(1.15); /* Kanan membesar normal */
}
.brosur-nav-btn.prev-btn:hover img {
    transform: scaleX(-1) scale(1.15); /* KUNCI 2: Kiri membesar tapi TETAP hadap kiri */
}



/* --- KARTU HARGA BROSUR --- */
.brosur-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto 40px auto;
}
/* --- KARTU HARGA BROSUR --- */
.brosur-card {
    background: linear-gradient(135deg, #ffd700, #daa520);
    border-radius: 20px; 
    /* overflow: hidden;  <-- 💡 HAPUS/KOMENTAR BAGIAN INI */
    color: #000;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4); 
    border: 1px solid #b8860b;
    position: relative; /* Wajib ada buat patokan badge */
    transition: 0.4s;
    display: flex;
    flex-direction: column;
}

.brosur-card.highlight { 
    border: 3px solid #000; 
    transform: scale(1.03); 
    z-index: 5; /* Biar nggak ketutup kartu sebelah */
    overflow: visible !important; /* 💡 KUNCI: Biar badge PREMIUM kelihatan melayang */
}

/* 💡 TAMBAHKAN CSS BADGE PREMIUM (Jika belum ada) */
.pkg-badge {
    position: absolute;
    top: -15px; /* Melayang ke atas */
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, #b30000, #800000); /* Merah Beludru */
    color: #ffd700;
    padding: 6px 20px;
    border-radius: 5px;
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: 1px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    border: 1px solid #ffd700;
    white-space: nowrap;
    z-index: 10;
}
.brosur-card-header { padding: 25px 15px; border-bottom: 2px dashed rgba(0,0,0,0.1); }
.brosur-card-header h4 { font-size: 1.4rem; font-weight: 900; margin-bottom: 10px; }
.brosur-price { font-size: 2rem; font-weight: 900; color: #cc0000; }
.brosur-price span { font-size: 1rem; }

.brosur-body { padding: 25px; text-align: left; }
.brosur-features { list-style: none; padding: 0; }
.brosur-features li { font-size: 1rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; }
.brosur-features li i { color: #cc0000; margin-right: 12px; }
.brosur-features li.locked { color: rgba(0,0,0,0.4); }

/* Responsif HP (Tetap 2 Kolom) */
@media (max-width: 768px) {
    #desain-brosur .section-title { font-size: 1.6rem; }
    
    .brosur-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 8px; 
        padding: 20px 5px 0 5px; /* Tambah padding atas buat ruang badge */
    }

    /* Kecilin Header Kartu */
    .brosur-card-header { padding: 15px 5px; }
    .brosur-card-header h4 { font-size: 0.7rem; }
    
    /* Harga tetap 1 baris */
    .brosur-price { font-size: 0.85rem; white-space: nowrap; }
    .brosur-price span { font-size: 0.5rem; }

    /* List Fitur (Dibuat sangat kecil agar muat) */
    .brosur-body { padding: 10px 5px; }
    .brosur-features li { 
        font-size: 0.55rem; 
        margin-bottom: 5px; 
        line-height: 1.2;
    }
    .brosur-features li i { margin-right: 3px; font-size: 0.6rem; }

    /* Kecilin Badge Premium di HP */
    .pkg-badge {
        font-size: 0.55rem;
        padding: 4px 10px;
        top: -10px;
    }

    /* Slider Brosur di HP */
    .brosur-slider-wrapper { height: 140px; }
    .brosur-slide { width: 185px; height: 140px; } /* Sesuaikan rasio agar tidak kepotong */

/* 💡 KUNCI BIAR TOMBOL MUNCUL LAGI DI HP */
    .brosur-nav-btn { 
        width: 40px;          /* Kecilin ukuran panah di HP */
        z-index: 100;         /* Pastikan dia berada di paling depan */
        display: block;       /* Paksa muncul */
    }

    /* Kita paksa posisinya mepet ke pinggir layar (5px dari tepi) */
    .brosur-nav-btn.next-btn { 
        right: 5px !important; 
        left: auto; 
        transform: translateY(-50%); 
    }
    
    .brosur-nav-btn.prev-btn { 
        left: 5px !important; 
        right: auto; 
        transform: translateY(-50%) scaleX(-1); 
    }

    /* Naikin z-index slide-nya biar nggak nutupin tombol */
    .brosur-slide {
        z-index: 1;
    }
    .brosur-slide.active {
        z-index: 10;
    }
}

/* ==================================================
   14. SECTION MOCK UP PRODUCT
   ================================================== */
#mock-up {
    max-width: 1200px;
    margin: 100px auto;
    padding: 0 20px;
    text-align: center;
}

/* Judul */
#mock-up .section-title {
    color: var(--kuning-terang);
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 5px;
    margin-bottom: 30px;
    text-shadow: 0 0 10px rgba(255, 234, 0, 0.3);
}
#mock-up .section-title::after {
    content: ''; display: block; background-color: var(--kuning-terang);
    width: 250px; height: 6px; border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 234, 0, 0.7);
    margin: 10px auto 0 auto;
}

/* --- SLIDER MOCK UP (ANTI GEPENG) --- */
.mockup-slider-wrapper {
    position: relative;
    width: 100%;
    height: 420px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
}
.mockup-slider { position: relative; width: 100%; max-width: 800px; height: 100%; }

/* --- SLIDER MOCK UP (ANTI GEPENG & ANTI CELAH) --- */
.mockup-slide {
    position: absolute; 
    top: 50%; left: 50%; 
    
    /* 💡 KUNCI FIX CELAH: Kita pakai ukuran pas (Rasio 3:2 Landscape) */
    width: 450px; 
    height: 300px; 
    
    background: transparent; 
    border-radius: 12px; 
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.mockup-slide img {
    width: 100% !important; 
    height: 100% !important; 
    
    /* 'cover' bakal narik gambar sampai memenuhi kotak 450x300 tanpa sisa */
    object-fit: cover !important; 
    
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.5));
}
/* Logika Putar 2 Gambar */
/* Logika Putar Gambar */
.mockup-slide.active { transform: translate(-50%, -50%) scale(1.1); z-index: 10; opacity: 1; border: 2px solid var(--kuning-terang); }
.mockup-slide.next { transform: translate(15%, -50%) scale(0.8); z-index: 5; opacity: 0.3; filter: blur(3px); }
.mockup-slide.prev { transform: translate(-115%, -50%) scale(0.8); z-index: 5; opacity: 0.3; filter: blur(3px); }

/* 💡 TAMBAHKAN BARIS INI: Biar gambar sisanya ngumpet rapi di tengah belakang */
.mockup-slide.hidden { transform: translate(-50%, -50%) scale(0.5); z-index: 1; opacity: 0; }
.mockup-slide.active { transform: translate(-50%, -50%) scale(1.1); z-index: 10; opacity: 1; border: 2px solid var(--kuning-terang); }
.mockup-slide.next { transform: translate(15%, -50%) scale(0.8); z-index: 5; opacity: 0.3; filter: blur(3px); }
.mockup-slide.prev { transform: translate(-115%, -50%) scale(0.8); z-index: 5; opacity: 0.3; filter: blur(3px); }

/* --- TOMBOL NAVIGASI MOCKUP (ANTI BENTROK) --- */
.mockup-nav-btn { position: absolute; top: 50%; background: transparent; border: none; width: 85px; z-index: 20; cursor: pointer; outline: none; }
.mockup-nav-btn.next-btn img { width: 100%; transition: 0.3s; }
.mockup-nav-btn.prev-btn img { width: 100%; transition: 0.3s; transform: scaleX(-1); } /* Kiri hadap kiri */

.mockup-nav-btn.next-btn { right: calc(50% - 400px); animation: idleKanan 2s infinite ease-in-out; }
.mockup-nav-btn.prev-btn { left: calc(50% - 400px); animation: idleKiri 2s infinite ease-in-out; }

.mockup-nav-btn:hover img { filter: drop-shadow(0 0 15px rgba(255, 234, 0, 0.9)) drop-shadow(0 0 30px rgba(255, 234, 0, 0.6)); }
.mockup-nav-btn.next-btn:hover img { transform: scale(1.15); }
.mockup-nav-btn.prev-btn:hover img { transform: scaleX(-1) scale(1.15); }

/* --- KARTU HARGA (3 KOLOM) --- */
.mockup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 💡 3 KOLOM SEJAJAR */
    gap: 20px;
    max-width: 1050px;
    margin: 0 auto 40px auto;
}
.mockup-card {
    background: linear-gradient(135deg, #ffd700, #daa520);
    border-radius: 20px; color: #000;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4); 
    border: 1px solid #b8860b;
    position: relative; 
    display: flex; flex-direction: column;
}
.mockup-card.highlight { border: 3px solid #000; transform: scale(1.03); z-index: 5; overflow: visible !important; }

.mockup-card-header { padding: 25px 15px; border-bottom: 2px dashed rgba(0,0,0,0.1); }
.mockup-card-header h4 { font-size: 1.2rem; font-weight: 900; margin-bottom: 10px; }
.mockup-price { font-size: 1.8rem; font-weight: 900; color: #cc0000; }
.mockup-price span { font-size: 1rem; }
.mockup-subtitle { color: #333; font-weight: 800; margin-top: 5px; background: rgba(255, 255, 255, 0.4); display: inline-block; padding: 2px 12px; border-radius: 20px; font-size: 0.8rem;}

.mockup-body { padding: 25px; text-align: left; }
.mockup-features { list-style: none; padding: 0; }
.mockup-features li { font-size: 0.95rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; }
.mockup-features li i { color: #cc0000; margin-right: 10px; width: 15px;}
.mockup-features li.locked { color: rgba(0,0,0,0.4); }

/* --- RESPONSIF HP --- */
/* --- RESPONSIF HP MOCK UP (PAKSA 3 KOLOM SEJAJAR) --- */
@media (max-width: 768px) {
    #mock-up .section-title { font-size: 1.4rem; }
    
    /* Slider Mockup HP */
    .mockup-slider-wrapper { height: 130px; }
    .mockup-slide { width: 220px; height: 150px; }
    .mockup-nav-btn { width: 45px; z-index: 100;}
    .mockup-nav-btn.next-btn { right: -20px !important; }
    .mockup-nav-btn.prev-btn { left: -20px !important; }

    /* 💡 KUNCI 1: PAKSA 3 KOLOM BERJAJAR DI HP */
    .mockup-grid { 
        grid-template-columns: repeat(3, 1fr); /* Tetap 3 kolom */
        gap: 4px; /* Jarak antar kotak dibikin super tipis */
        padding: 20px 2px 0 2px; 
    }

    /* 💡 KUNCI 2: UKURAN "CEBOL" BIAR SEMUANYA MUAT */
    .mockup-card-header { padding: 8px 2px; }
    .mockup-card-header h4 { 
        font-size: 0.5rem; /* Ukuran mikro untuk judul */
        margin-bottom: 5px; 
        letter-spacing: 0; 
    }
    
    /* Harga dipaksa 1 baris */
    .mockup-price { 
        font-size: 0.65rem; 
        white-space: nowrap; 
        letter-spacing: -0.5px; 
    }
    .mockup-price span { font-size: 0.4rem; }
    
    .mockup-subtitle { 
        font-size: 0.4rem; 
        padding: 2px 4px; 
        margin-top: 3px; 
    }

    /* List Fitur dikecilkan drastis */
    .mockup-body { padding: 8px 4px; }
    .mockup-features li { 
        font-size: 0.45rem; 
        margin-bottom: 3px; 
        line-height: 1.1;
    }
    .mockup-features li i { 
        font-size: 0.45rem; 
        margin-right: 2px; 
        width: 8px; 
    }

    /* Kecilin Badge Melayang */
    .pkg-badge { 
        font-size: 0.4rem; 
        padding: 3px 6px; 
        top: -10px; 
    }
    
    /* Kurangi scale saat highlight biar gak nutupin kotak lain */
    .mockup-card.highlight {
        transform: scale(1.02);
    }
}

/* ==========================================================================
   15. SECTION KONTAK (MARI BEKERJA SAMA)
   ========================================================================== */
/* --- JUDUL KONTAK KUNING GLOW --- */
#kontak .section-title {
    color: var(--kuning-terang);
    font-size: 3rem; /* Biar seimbang gedenya */
    letter-spacing: 3px;
    text-transform: uppercase;
}

#kontak .section-title::after {
    content: ''; 
    display: block; 
    background-color: var(--kuning-terang);
    width: 250px; 
    height: 6px; 
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 234, 0, 0.7);
    margin: 10px auto 0 auto;
}
#kontak {
    background-color: transparent; /* Mengikuti background utama */
    text-align: center;
}

.kontak-konten {
    max-width: 800px;
    margin: 0 auto;
}

.kontak-konten p {
    color: #ccc;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* Container Tombol */
.kontak-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Biar otomatis turun di layar kecil */
}

/* Base Style Tombol Kontak */
.kontak-buttons .btn {
    display: flex;
    align-items: center;
    text-align: left;
    padding: 15px 25px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 280px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.kontak-buttons .btn i {
    font-size: 2.2rem;
    margin-right: 15px;
}

.kontak-buttons .btn span {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.2;
}

.kontak-buttons .btn small {
    display: block;
    font-weight: 400;
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Tombol WhatsApp (Hijau) */
.btn-wa {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-wa:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(37, 211, 102, 0.3);
}

/* Tombol Email (Ubah Jadi Premium Gold) */
.btn-email {
    background: linear-gradient(135deg, #ffd700 0%, #daa520 100%);
    color: #000;
    border: 1px solid #b8860b;
}

.btn-email:hover {
    transform: translateY(-5px);
    border-color: #fff;
    box-shadow: 0 15px 30px rgba(255, 215, 0, 0.4);
}

/* Paksa tulisan jadi hitam biar kontras di atas emas */
.btn-email span {
    color: #000 !important; 
}

/* Kasih ikon amplop warna merah pekat biar elegan */
.btn-email i {
    color: #000000 !important; 
}
/* Responsif HP */
@media (max-width: 600px) {
    /* 💡 KECILKAN JUDUL KONTAK DI HP */
    #kontak .section-title {
        font-size: 1.6rem !important; /* Susutkan dari 3rem */
        letter-spacing: 2px !important;
        margin-bottom: 25px !important; /* Kurangi jarak bawah */
    }

    /* 💡 KECILKAN GARIS KUNING DI BAWAH JUDUL BIAR SEIMBANG */
    #kontak .section-title::after {
        width: 150px !important; /* Susutkan dari 250px */
        height: 4px !important; /* Garis lebih tipis */
        margin-top: 8px !important;
    }
    #kontak {
        padding: 60px 10px; /* Kurangi padding kiri-kanan */
    }
    
    .kontak-konten p {
        font-size: 1rem;
    }

    /* 💡 KUNCI BIAR TETAP SAMPING-SAMPINGAN */
    .kontak-buttons {
        flex-wrap: nowrap; /* Jangan turun ke baris baru */
        gap: 10px; /* Jarak antar tombol didekatkan */
    }

    .kontak-buttons .btn {
        width: 50%; /* Masing-masing ambil setengah layar */
        min-width: unset;
        padding: 12px 10px; /* Kurangi area dalam tombol */
    }

    .kontak-buttons .btn i {
        font-size: 1.5rem; /* Kecilkan ikon */
        margin-right: 8px;
    }

    .kontak-buttons .btn span {
        font-size: 0.8rem; /* Kecilkan teks utama (WhatsApp/Email) */
    }

    .kontak-buttons .btn small {
        font-size: 0.6rem; /* Kecilkan detail (nomor/email) */
        /* Potong teks jika kepanjangan pakai titik-titik (...) */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* ==========================================================================
   16. FOOTER
   ========================================================================== */

.social-links {
    display: flex;
    justify-content: center;
    gap: 20px; /* Jarak antar kotak dikurangi sedikit agar pas */
    margin-bottom: 20px; 
    flex-wrap: wrap; /* Tombol otomatis turun ke bawah jika layar sempit */
}

        /* Pengaturan Kotak/Background Tombol Sosial Media */
.social-links a {
    display: flex;
    align-items: center; 
    gap: 12px; /* Jarak ikon ke teks */
    color: var(--text-light); 
    text-decoration: none;
            
            /* --- KODE BARU UNTUK KOTAK BG --- */
    background-color: #987000; /* Kotak background warna hitam pekat (gelap) */
    padding: 12px 25px; /* Jarak teks ke tepi kotak (atas-bawah, kiri-kanan) */
    border-radius: 50px; /* Siku-siku halus (sudut tumpul) */
    border: 1px solid rgba(240, 236, 29, 0.407); /* Border tipis halus */
    box-shadow: 0 4px 6px rgba(97, 97, 0, 0.3); /* Efek bayangan kotak */
            /* -------------------------------- */

            /* Update Transisi agar halus saat di-hover */
    transition: color 0.3s ease, transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.social-links a i {
    font-size: 1.6rem; /* Ukuran ikon disesuaikan */
}

.social-links a span {
    font-size: 1rem;
    font-weight: 600;
}

        /* Efek saat Kursor Disentuh (Hover) */
.social-links a:hover {
    color: #000000; /* Teks jadi kuning */
    transform: translateY(-5px); /* Kotak melompat ke atas sedikit */
    background-color: #987000; /* Background kotak jadi agak terang */
    border-color: var(--accent-yellow); /* Border kotak ikut jadi kuning */
}
footer {
    background-color: var(--bg-hitam);
    text-align: center;
    padding: 20px;
}

/* ==========================================================================
   PENYESUAIAN FOOTER SOSMED AGAR TETAP 1 BARIS DI HP
   ========================================================================== */
@media (max-width: 768px) {
    .social-links {
        display: flex !important;
        flex-wrap: nowrap !important; /* 💡 KUNCI MUTLAK: Paksa 1 baris, pantang turun! */
        justify-content: center;
        gap: 4px !important; /* Jarak antar kotak super dirapatkan */
        padding: 0 5px;
        width: 100%;
        overflow: hidden; /* Jaga-jaga biar gak bikin layar bisa digeser ke samping */
    }

    .social-links a {
        padding: 6px 4px !important; /* Bantalan kotak dibikin sangat ramping */
        gap: 3px !important; /* Ikon dan teks mepet banget */
        flex: 1; /* Lebar layar dibagi rata berempat */
        justify-content: center;
        min-width: 0; /* 💡 KUNCI: Izinkan kotak mengecil melewati batas normalnya */
        border-radius: 8px !important; /* Lengkungan kotak disesuaikan ukurannya */
    }

    .social-links a i {
        font-size: 0.85rem !important; /* Ikon disusutkan jadi mini */
        margin: 0 !important;
    }

    .social-links a span {
        display: inline-block !important; /* Paksa teks tetap muncul (membatalkan kode hide sebelumnya) */
        font-size: 0.5rem !important; /* Teks dibikin ukuran "semut" biar muat */
        white-space: nowrap !important; /* Teks sama sekali tidak boleh turun baris */
        letter-spacing: -0.3px !important; /* Jarak antar huruf dirapatkan sedikit */
        overflow: hidden;
        text-overflow: clip; /* Kalau layar terlalu ekstrem sempitnya, teks kepotong natural, bukan titik-titik */
    }

    .social-links a:hover {
        transform: none !important; 
    }

    /* 💡 KUNCI: Gunakan efek :active (saat ditekan jari) untuk HP */
    .social-links a:active {
        transform: scale(0.92) !important; /* Tombol mengecil sedikit pas ditekan, ngasih kesan "membal" */
        background-color: var(--accent-yellow) !important; /* Latar langsung kuning */
        color: #111 !important; /* Teks/Ikon jadi hitam biar kontras */
        border-color: var(--accent-yellow) !important;
        transition: transform 0.1s ease !important; /* Transisi dipercepat biar responsif di jari */
    }

    /* ... kode social-links a:active yang tadi ... */
    .social-links a:active {
        transform: scale(0.92) !important; 
        background-color: var(--accent-yellow) !important; 
        color: #111 !important; 
        border-color: var(--accent-yellow) !important;
        transition: transform 0.1s ease !important; 
    }

    /* 💡 KECILKAN TULISAN COPYRIGHT DI HP */
    footer p {
        font-size: 0.65rem !important; 
        opacity: 0.8; 
        margin-top: 15px !important; 
        letter-spacing: 0.5px;
    }
} /* <--- Ini kurung tutupnya @media (max-width: 768px) */


/* ==========================================================================
   17. MEDIA QUERIES (SISA RESPONSIF)
   ========================================================================== */
@media (max-width: 768px) {
    header { 
        padding: 10px 3%; 
    }
    .btn-back { 
        font-size: 0.7rem; 
        gap: 5px; 
    }
    nav ul { 
        display: none; 
    }
}