/* --- SIMDEK MODERN UI V2 - PERFORMANCE OPTIMIZED --- */
:root {
    --primary-blue: #0d6efd;
    --slate-dark: #1e293b;
    --bg-light: #f8fafc;
    --card-radius: 20px;
    --paper-radius: 12px;
}

/* --- Global Reset --- */
body {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    background-color: var(--bg-light);
    color: var(--slate-dark);
    line-height: 1.6;
}

.bg-headeratas {
     background:
        linear-gradient(
            135deg,
            #0F172A 0%,
            #1D4ED8 52%,
            #3B82F6 100%
        );
    background-blend-mode: overlay;
}
.bg-headeratas::before{
    content:'';
    position:absolute;
    top:-120px;
    right:-120px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(96,165,250,.35) 0%,
            transparent 72%
        );
}


.box-menu-floating {
    position: relative;
    z-index: 10;
    margin-top: -10em; /* Mengangkat setengah box ke atas banner */
}

/* Optimasi responsif agar di layar HP box-nya tidak terlalu menabrak teks hero */
@media (max-width: 576px) {
    .box-menu-floating {
        margin-top: -4em; 
    }
} 




/* --- Action Card System (The "Paper Stack" Layout) --- */
.simdek-action-card {
    background: #E2E8F0;
    border-radius: 24px;
    padding: 40px 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(0,0,0,0.05);
    /* Pastikan overflow visible agar efek kertas terlihat */
    overflow: visible !important; 
    z-index: 5; 
    box-shadow:
        0 10px 30px rgba(15,23,42,.06),
        0 0 0 1px rgba(255,255,255,.5);
}

.simdek-action-card:hover {
    /* transform: translateY(-12px); */
    /* box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important; */
    transform:translateY(-10px);

    box-shadow:
        0 25px 50px rgba(37,99,235,.15),
        0 0 0 1px rgba(191,219,254,.7);
}

/* Kunci Konten Seragam */
.card-content-wrapper {
    flex-grow: 1;
    position: relative;
    z-index: 10; /* Pastikan di depan kertas */
}

.description-text {
    min-height: 80px; /* Menjaga tinggi teks agar tombol tetap sejajar */
    margin-bottom: 30px;
    color: #64748b;
}

/* Footer Selalu di Bawah */
.card-action-footer {
    margin-top: auto;
    position: relative;
    z-index: 10;
}

/* --- Efek Tumpukan Kertas --- */
.paper-stack-1, .paper-stack-2 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f1f5f9;
    border-radius: 24px;
    left: 0;
    top: 0;
    z-index: -1; /* Wajib minus agar di belakang teks */
    transition: all 0.4s ease;
    border: 1px solid rgba(0,0,0,0.03);
}

.paper-stack-1 { transform: rotate(2deg); opacity: 0.6; }
.paper-stack-2 { transform: rotate(4deg); opacity: 0.3; }

.simdek-action-card:hover .paper-stack-1 { transform: rotate(5deg) translate(5px, -5px); }
.simdek-action-card:hover .paper-stack-2 { transform: rotate(10deg) translate(10px, -10px); }

/* --- Ikon & Animasi --- */
.simdek-icon-box {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

/* Warna Icon RGBA (Mewah) */
.icon-blue-soft { background: rgba(13, 110, 253, 0.1); color: var(--primary-blue); }
.icon-cyan-soft { background: rgba(3, 169, 244, 0.1); color: #03a9f4; }
.icon-red-soft { background: rgba(220, 53, 69, 0.1); color: #dc3545; }

/* Animasi Ikon */
.animate-bounce { animation: bounceIcon 2s infinite; }
@keyframes bounceIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.animate-spin-slow { animation: spinSlow 10s linear infinite; }
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.animate-pulse { animation: pulseIcon 2s infinite; }
@keyframes pulseIcon {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
    100% { transform: scale(1); }
}

/* --- Tombol Modern --- */
.btn-primary-modern, .btn-danger-modern {
    border-radius: 14px;
    padding: 14px;
    font-weight: 700;
    border: none;
    transition: all 0.3s ease;
}

.btn-primary-modern { background: var(--primary-blue); color: #fff; }
.btn-danger-modern { background: #dc3545; color: #fff; }

.btn-primary-modern:hover, .btn-danger-modern:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* --- Global Reset & Typography --- */
body {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    background-color: var(--bg-light);
    color: var(--slate-dark);
    overflow-x: hidden;
    line-height: 1.6; /* Tambahan agar teks lebih enak dibaca */
} 

/* Wrapper Utama Konten agar tidak tertutup Navbar */
.main-content-wrapper {
    min-height: 70vh; /* Menjaga footer tetap di bawah pada halaman pendek */
    display: block; 
    background:
        linear-gradient(
            180deg,
            #F8FAFC 0%,
            #F1F5F9 100%
        ); 
        
    position: relative;
    overflow: hidden; 
}

/* DOTS LEFT */
.main-content-wrapper::before{
    content:'';
    position:absolute;
    left:-40px;
    top:1580px; 
    width:220px;
    height:220px;
    background-image: radial-gradient(
        #2563EB 2px,
        transparent 2px
    );
    background-size:18px 18px;
    opacity:.98;
    z-index:0; 
}

/* DOTS RIGHT */
.main-content-wrapper::after{
    content:'';
    position:absolute;
    right:-60px;
    top:800px;
    width:240px;
    height:240px;
    background-image: radial-gradient(
        #0471ee 2px,
        transparent 2px 
    );
    background-size:18px 18px;
    opacity:.98;
    z-index:0;
}

/* Jika halaman search/detail tertutup header, gunakan ini */
.section-gray-bg, .result-page-wrapper {
    padding-top: 140px !important;
}

/* Navbar & Header */
.header-modern {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.brand-divider {
    border-color: #e2e8f0 !important;
    border-width: 2px !important;
}

.brand-subtext {
    font-size: 0.7rem;
    letter-spacing: 1px;
}

.nav-link-modern {
    color: var(--slate-muted) !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.nav-link-modern:hover, .nav-link-modern.active {
    color: var(--primary-blue) !important;
}

/* Professional Search Box */
.search-container {
    background-color: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 50px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.search-container:focus-within {
    border-color: var(--primary-blue) !important;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15) !important;
}

.search-icon {
    color: var(--slate-muted) !important;
    padding-left: 18px;
}

.search-input {
    color: var(--slate-dark) !important;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 12px 15px 12px 5px !important;
}

.search-input::placeholder {
    color: #94a3b8 !important;
    opacity: 1;
}


/* Container Kartu Modern */
.modern-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    padding: 30px;
    position: relative;
    overflow: hidden;
}

.modern-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
    border-color: var(--primary-blue);
}

/* Header/Body Kartu */
.card-body-custom {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Icon Lingkaran */
.icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.modern-card:hover .icon-circle {
    transform: rotate(-10deg) scale(1.1);
}


/* Tombol Modern */
.btn-modern {
    border-radius: 12px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.border-top-danger {
    border-top: 4px solid #dc3545 !important;
} 

.icon-box {
    width: 64px;
    height: 64px;
    background: #f0f9ff;
    color: var(--primary-blue);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 25px;
}

/* Image Decorations */
.img-decoration-frame {
    border: 2px solid #dc3545;
    border-radius: 1.5rem;
    top: -20px;
    right: -20px;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.img-main-rounded {
    border-radius: 1.5rem;
    z-index: 2;
}


/* Hero & Layout */
.hero-wrapper {
    padding: 120px 0 160px 0;
    background: #0f172a;
}

.hero-bg-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            rgba(15,23,42,.58) 0%,
            rgba(37,99,235,.72) 45%,
            rgba(59,130,246,.60) 100%
        ), 
        url('/frontweb/assets/images/slider-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    z-index: 1;
    transition: all .5s ease;
}

.hero-bg-overlay::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(96,165,250,0.32) 0%,
            rgba(96,165,250,0.12) 40%,
            transparent 72%
        );

    z-index: 2;
    pointer-events: none;
}
.hero-bg-overlay::after{
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            to right,
            rgba(15,23,42,.45),
            rgba(15,23,42,.12),
            rgba(15,23,42,.35)
        );
    z-index:1;
}
.hero-content {
    position: relative;
    z-index: 3;
}
.hero-bg-overlay::after {
    content: '';

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to right,
            rgba(15,23,42,0.75),
            rgba(15,23,42,0.25),
            rgba(15,23,42,0.75)
        );

    z-index: 1;
}


.floating-container {
    margin-top: -120px; /* Tarik lebih ke atas menabrak hero */
    perspective: 1000px;
}

/* Card Variations */
.card-border-danger {
    border-top: 4px solid #dc3545 !important;
}



/* --- Landing Section Styling --- */

.icon-logo-img {
    height: 40px;
}

.title-divider {
    width: 60px; 
    height: 4px;
    background-color: var(--primary-blue); /* Tambahkan default warna */
}

.text-justify-custom {
    text-align: justify; 
    font-size: 1.05rem; 
    line-height: 1.8;
}

.image-decoration-wrapper {
    z-index: 1;
}

.hr-soft {
    opacity: 0.1;
}

.z-index-2 {
    z-index: 2;
}

/* Section & General */
.section-gray-bg {
    background-color: #f8fafc;
}

.icon-wrapper-white {
    background-color: #ffffff;
}

/* Image Handling */
.img-zoomable {
    cursor: zoom-in;
}

/* Sticky Handling */
.sticky-side-content {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
    z-index: 5;
}

/* Text & Box */
.info-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-justify-custom-small {
    font-size: 0.95rem; 
    line-height: 1.7; 
    text-align: justify;
}


/* --- Footer Professional Styling - STABILIZED --- */

#footer {
    background-color: #0f172a !important; /* Warna Deep Slate agar senada dengan Hero */
    color: rgba(255, 255, 255, 0.7) !important;
}

.footer-logo-img {
    height: 55px;
    width: auto !important;     /* Mencegah logo melebar paksa */
    max-width: 100%;           /* Aman untuk mobile */
    filter: brightness(0) invert(1); /* Logo jadi putih murni */
    display: block;
    margin-bottom: 20px;
}

.footer-description {
    font-size: 0.9rem; 
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Memperbaiki Link & Icon di Footer */
#footer a {
    transition: all 0.3s ease;
}

#footer i {
    width: 20px; /* Menjaga icon sejajar sempurna */
    text-align: center;
}

.contact-title {
    color: #ffffff !important;
    letter-spacing: 1px;
}

.contact-title-line {
    width: 40px; 
    height: 3px;
    display: block; /* Memastikan garis pemanis muncul */
}

.social-icon {
    width: 38px;
    height: 38px;
    display: inline-flex; /* Agar icon sejajar horizontal */
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.social-icon:hover {
    background-color: var(--primary-blue) !important;
    border-color: var(--primary-blue) !important;
    transform: translateY(-3px);
}

.footer-hr {
    opacity: 0.1;
    border-top: 1px solid #ffffff;
}

/* Mencegah footer menempel di halaman konten pendek */
footer#footer {
    margin-top: 10px;
} 


/* --- Result Page Styling --- */

.result-page-wrapper {
    padding: 180px 0 100px 0; /* Padding atas besar untuk menampung floating header */
    min-height: 80vh;
}

.result-card {
    overflow: hidden;
    padding: 0 !important; /* Reset padding modern-card default */
}

.status-icon-box {
    width: 120px; 
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    background-color: #e9f7ef; /* Hijau soft */
    margin-bottom: 15px;
}

.status-icon-box img {
    max-width: 90%;
    height: auto;
    object-fit: contain;
}

.status-icon-box:hover {
    transform: scale(1.05);
} 

.bg-success-soft { background: #e9f7ef; }
.bg-warning-soft { background: #fff8eb; }
.text-warning-dark { color: #856404; }

.info-bullet {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.border-end-md {
    border-right: 1px solid #f1f5f9;
}

@media (max-width: 767px) {
    .border-end-md {
        border-right: none;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 30px;
        padding-top: 30px;
    }
}


/* --- Detail Page Specific --- */

.bg-danger-soft {
    background-color: #fff5f5;
}

.icon-circle.bg-danger {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border-radius: 18px;
}

.info-group label {
    letter-spacing: 0.5px;
}

.italic-style {
    font-style: italic;
    line-height: 1.6;
}

.rounded-end-3 {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
} 

/* Mempercantik alur responsif */
@media (max-width: 576px) {
    .result-page-wrapper {
        padding-top: 120px;
    }
} 

/* --- Header & Search Styling --- */
.nav-logo-img {
    height: 50px;
    width: auto;
}

.brand-subtext {
    font-size: 0.7rem;
    letter-spacing: 1px;
    display: block;
}

.search-icon-bg {
    background-color: #f8fafc !important;
    border: none !important;
    border-radius: 12px 0 0 12px !important;
}

.search-input-field {
    background-color: #f8fafc !important;
    border: none !important;
    border-radius: 0 12px 12px 0 !important;
    min-width: 200px;
    font-size: 0.9rem;
    padding: 10px 15px !important;
}

.search-input-field:focus {
    box-shadow: none !important;
    background-color: #f1f5f9 !important;
}


/* Dekorasi Latar Belakang Gambar */
.img-bg-decoration {
    opacity: 0.1;
    transform: translate(-15px, -15px) rotate(3deg); /* Gabungkan transform */
    z-index: 1;
} 

.img-landing-custom {
    object-fit: cover; 
    width: 100%; 
    min-height: 350px;
    transition: transform 0.3s ease;
}

.img-landing-custom:hover {
    transform: translateY(-5px);
}


/* --- Report Section Styles --- */
.icon-logo-small {
    height: 40px;
    width: auto;
}
.title-divider-danger {
    width: 60px;
    height: 4px;
    background-color: #dc3545;
}
.image-accent-border {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.bg-gradient-dark-transparent {
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
}
.transform-hover:hover {
    transform: scale(1.05);
}


/* Styling konten dari Database */
.alur-content h4 {
    color: var(--slate-dark);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 15px;
}
.alur-content p.lead {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--slate-muted);
}

/* Styling tambahan jika di database menggunakan class message-box */
.message-box {
    /* background: #f1f5f9; */
    padding: 15px;
    border-radius: 12px;
    /* border-left: 4px solid var(--primary-blue); */
    margin-bottom: 20px;
}

/* Memperbaiki Sticky Positioning */
.sticky-side-content {
    position: -webkit-sticky;
    position: sticky;
    top: 120px; /* Jarak dari navbar saat di-scroll */
    z-index: 10;
}

/*button hero*/
.btn-modern-primary{
    position:relative;
    border:none;
    border-radius:18px;
    background:
        linear-gradient(
            135deg,
            #EFF6FF 0%,
            #DBEAFE 100%
        );
    color:#2563EB;
    font-weight:700;
    letter-spacing:.2px;
    overflow:hidden;
    transition:all .35s ease;
    box-shadow:
        0 4px 14px rgba(37,99,235,.08);
}

/* SHINE EFFECT */
.btn-modern-primary::before{
    content:'';
    position:absolute;
    top:0;
    left:-120%;
    width:100%;
    height:100%;
    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.45),
            transparent
        );
    transition:all .6s ease;
}

/* HOVER */
.btn-modern-primary:hover{
    transform:translateY(-4px);
    background:
        linear-gradient(
            135deg,
            #2563EB 0%,
            #1D4ED8 100%
        );
    color:#FFFFFF;
    box-shadow:
        0 14px 30px rgba(37,99,235,.22);
}

/* SHINE MOVE */
.btn-modern-primary:hover::before{
    left:120%;
}

/* ICON */
.btn-modern-primary i{
    transition:transform .3s ease;
}

/* ICON MOVE */
.btn-modern-primary:hover i{
    transform:translateX(2px);
}

/* ACTIVE */
.btn-modern-primary:active{
    transform:scale(.98);
}
.bg-primary-soft{
    background:
        linear-gradient(
            135deg,
            #EFF6FF 0%,
            #DBEAFE 100%
        );
    color:#2563EB;
    border:1px solid rgba(37,99,235,.08);
    box-shadow:
        0 8px 20px rgba(37,99,235,.08);
    position:relative;
    overflow:hidden;
}

/* GLOW EFFECT */
.bg-primary-soft::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at top right,
            rgba(255,255,255,.55),
            transparent 55%
        );
    pointer-events:none;
}

.bg-primary-soft i{
    color:#2563EB;
}

.icon-circle:hover{
    transform:translateY(-4px);
    box-shadow:
        0 14px 28px rgba(37,99,235,.18);
    transition:all .35s ease;
}

/* ==========================================================================
   11. DOKUMENTASI PENINDAKAN VIDEO GALLERY (DUAL-TRACK PREMIUM LAYOUT)
   ========================================================================== */
/* ==========================================================================
   MODERN GALLERY SECTION
   ========================================================================== */
.bg-white-gallery {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbff 45%,
            #eef4ff 100%
        );

    isolation: isolate;
}

/* ==========================================================================
   EFFECT BULAT BESAR ATAS KANAN
   ========================================================================== */
.bg-white-gallery::before {
    content: '';
    position: absolute;
    top: -180px;
    right: -180px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(37,99,235,.16) 0%,
            rgba(59,130,246,.10) 40%,
            rgba(96,165,250,.04) 65%,
            transparent 75%
        );
    animation:
        floatingCircle 10s ease-in-out infinite;

    z-index: 0;
}

/* ==========================================================================
   EFFECT SETENGAH LINGKARAN BAWAH KIRI
   ========================================================================== */
.bg-white-gallery::after {
    content: '';
    position: absolute;
    bottom: -140px;
    left: -140px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(220,38,38,.10) 0%,
            rgba(239,68,68,.05) 45%,
            transparent 72%
        );
    animation:
        floatingCircleReverse 12s ease-in-out infinite;
    z-index: 0;
}

/* ==========================================================================
   DOT PATTERN MODERN
   ========================================================================== */
.bg-white-gallery .container {
    position: relative;
    z-index: 2;
}

.bg-white-gallery .container::before {
    content: '';
    position: absolute;
    top: 80px;
    left: -60px;
    width: 140px;
    height: 140px;
    opacity: .35;
    background-image:
        radial-gradient(
            #2563eb 1.6px,
            transparent 1.6px
        );
    background-size: 18px 18px;
    animation:
        floatingDots 9s linear infinite;
}

/* ==========================================================================
   GLOW LIGHT EFFECT
   ========================================================================== */
.bg-white-gallery .container::after {
    content: '';
    position: absolute;
    top: 120px;
    right: 10%;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.85) 0%,
            rgba(255,255,255,.18) 40%,
            transparent 72%
        );
    filter: blur(25px);
    opacity: .8;
    animation:
        pulseGlow 6s ease-in-out infinite;
}

/* ==========================================================================
   ANIMATION
   ========================================================================== */
@keyframes floatingCircle {
    0%{
        transform:
            translateY(0px)
            translateX(0px)
            rotate(0deg);
    }
    50%{
        transform:
            translateY(18px)
            translateX(-12px)
            rotate(4deg);
    }
    100%{
        transform:
            translateY(0px)
            translateX(0px)
            rotate(0deg);
    }
}

@keyframes floatingCircleReverse {
    0%{
        transform:
            translateY(0px)
            translateX(0px);
    }
    50%{
        transform:
            translateY(-18px)
            translateX(12px);
    }
    100%{
        transform:
            translateY(0px)
            translateX(0px);
    }
}

@keyframes floatingDots {
    0%{
        transform: translateY(0px);
    }
    50%{
        transform: translateY(-12px);
    }
    100%{
        transform: translateY(0px);
    }
}

@keyframes pulseGlow {
    0%{
        opacity: .45;
        transform: scale(1);
    }
    50%{
        opacity: .9;
        transform: scale(1.08);
    }
    100%{
        opacity: .45;
        transform: scale(1);
    }
}

.wrapper-icon-logo img { width: 42px; height: auto; }
.text-title-gallery { font-weight: 800 !important; letter-spacing: -1px; color: #0f172a !important; font-size: 32px; }
.sub-title-gallery { font-size: 15px; color: #64748b !important; line-height: 1.6; max-width: 800px; margin: 0 auto; }
.title-divider-danger { width: 50px; height: 5px; background: linear-gradient(90deg, #dc3545 0%, #ff6b6b 100%); margin-top: 15px; }

/* --- STYLE UNTUK TRACK DESKTOP --- */
.container-carousel-video { position: relative; padding: 20px 45px !important; }

.bg-modern-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.03) !important;
}

.secure-video-wrapper {
    position: relative;
    display: block;
    width: 100%;
    min-height: 480px; 
    background: #000000;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.secure-video-wrapper:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
}
.secure-video-wrapper iframe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border: none !important; background: #000000; border-radius: 16px !important;
}

/* Navigasi Desktop */
.btn-nav-video-prev, .btn-nav-video-next {
    width: 44px !important; height: 44px !important; background: #ffffff !important; border-radius: 50% !important;
    top: 50% !important; transform: translateY(-50%) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    opacity: 1 !important; z-index: 10 !important; border: 1px solid #e2e8f0 !important; transition: all 0.3s ease;
}
.btn-nav-video-prev:hover, .btn-nav-video-next:hover { background: #0f172a !important; border-color: #0f172a !important; }
.btn-nav-video-prev:hover .icon-nav-custom i, .btn-nav-video-next:hover .icon-nav-custom i { color: #ffffff !important; }
.btn-nav-video-prev { left: -5px !important; }
.btn-nav-video-next { right: -5px !important; }
.icon-nav-custom { display: flex; align-items: center; justify-content: center; font-size: 15px; height: 100%; }

.carousel-indicators-custom { bottom: -40px !important; }
.carousel-indicators-custom button {
    width: 20px !important; height: 5px !important; border-radius: 10px !important;
    background-color: #cbd5e1 !important; border: none !important; margin: 0 5px !important; transition: all 0.3s ease; opacity: 0.5;
}
.carousel-indicators-custom button.active { background: linear-gradient(90deg, #dc3545 0%, #ff6b6b 100%) !important; width: 32px !important; opacity: 1; }





/* ==========================================================================
   13. FLOATING BACK TO TOP BUTTON (PREMIUM & ESTETIS REALIGNMENT)
   ========================================================================== */
.custom-floating-dmtop {
    position: fixed !important;
    bottom: 35px !important;
    right: 35px !important; /* Kita kunci di pojok kanan bawah agar presisi dan seimbang */
    width: 48px !important;
    height: 48px !important;
    background: linear-gradient(135deg, #1302f4 0%, #0687f1 100%) !important; /* Gradasi merah tegas identitas Dishub */
    color: #ffffff !important;
    border-radius: 50% !important; /* Membuat lingkaran bulat sempurna */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; 
    font-size: 16px !important;
    /* Bayangan premium menyebar yang sangat lembut (tidak kaku hitam) */
    box-shadow: 0 10px 25px -5px rgba(220, 53, 69, 0.4), 0 8px 10px -6px rgba(220, 53, 69, 0.2) !important;
    z-index: 9999 !important; /* Memaksa tombol selalu mengapung di lapisan paling atas footer */
    text-decoration: none !important;
    
    /* DEFAULT STATE: Tersembunyi sempurna di awal halaman */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(30px) scale(0.8) !important; /* Efek mengecil di bawah */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* STATE AKTIF: Muncul memantul naik secara anggun saat di-scroll ke bawah */
.custom-floating-dmtop.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}

/* Efek Interaktif Eksklusif Saat Kursor Mouse Mendekat (Desktop) */
.custom-floating-dmtop:hover {
    background: #0f172a !important; /* Berubah warna gelap solid premium */
    color: #ffffff !important;
    transform: translateY(-5px) scale(1.08) !important; /* Terangkat naik sedikit */
    box-shadow: 0 15px 30px -5px rgba(15, 23, 42, 0.35) !important;
}

/* Penyesuaian Dimensi Responsif di Layar Smartphone HP */
@media (max-width: 768px) {
    .custom-floating-dmtop {
        bottom: 25px !important;
        right: 25px !important;
        width: 42px !important;
        height: 42px !important;
        font-size: 14px !important;
    }
} 


/* ==========================================================================
   14. BRAND COLOR SOCIAL BUTTONS (PREMIUM LOOK)
   ========================================================================== */
/* Pengaturan dimensi dasar lingkaran agar seragam */
.social-icon {
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important; /* Hapus border bawaan btn-outline agar warna solidnya mewah */
    padding: 0 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

/* Efek angkat ke atas saat tombol didekati kursor mouse */
.social-icon:hover {
    transform: translateY(-4px) scale(1.08) !important;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25) !important;
}
 
/* 1. YouTube Merah Solid */
.icon-youtube {
    background: #ff0000 !important;
}
.icon-youtube:hover {
    background: #cc0000 !important; /* Merah sedikit lebih gelap saat hover */
}

/* 2. Instagram Ungu Gradasi Eksklusif */
.icon-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
}
.icon-instagram:hover {
    filter: brightness(1.1) !important; /* Memberikan efek kilau saat hover */
}

/* 3. Email Biru Cerah */
.icon-mail {
    background: #0077b6 !important; /* Biru premium formal */
}
.icon-mail:hover {
    background: #0096c7 !important; /* Biru sedikit lebih terang saat hover */
}
 

/* ==========================================================================
   15. AMBIENT GLOW FLUID LAYOUT (MURNI TANPA CARD & SHADOW)
   ========================================================================== */
.section-laporkan-ambient {
    background: #ffffff !important;
    position: relative;
    overflow: hidden;
}

/* Tag Minimalis Atas */
.badge-tag-red-minimalis {
    background: rgba(220, 53, 69, 0.07) !important;
    color: #dc3545 !important;
    padding: 6px 16px;
    font-weight: 700;
    font-size: 13px;
    border-radius: 30px;
    letter-spacing: 0.3px;
}

/* Kotak Kutipan Informasi (Hanya Garis Kiri) */
.accent-quote-box {
    background-color: #f8fafc !important; /* Warna abu-abu pudar tipis */
    /* border-left: 4px solid #0077b6 !important;  */
    border-radius: 4px 16px 16px 4px !important;
}

.small-title-card-custom {
    font-size: 14px;
    letter-spacing: 0.5px;
    color: #334155 !important;
}

.content-text-fluid {
    font-size: 14.5px !important;
    line-height: 1.75 !important;
    color: #475569 !important;
}

/* Tombol Aksi Gradasi Premium Khas Aplikasi Modern */
.btn-gradient-orange-red {
    background: linear-gradient(135deg, #e056fd 0%, #ff7675 100%) !important; /* Gradasi oranye kemerahan seperti gambar rekomendasi */
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 10px 20px rgba(255, 118, 117, 0.25) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-gradient-orange-red:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(255, 118, 117, 0.4) !important;
    color: #ffffff !important;
}

/* Footer Catatan */
.secure-info-footer-clean {
    padding: 8px 0;
    border-top: 1px dashed #e2e8f0;
    margin-top: 15px;
}

/* --- BACKDROP GLOW ENGINE SISI KANAN --- */
.ambient-illustration-container {
    position: relative;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* SUNTIKAN GLOW AMBIENT: Bulatan warna pudar (Biru & Hijau) menyatu di latar belakang */
.glow-fluid-backdrop {
    position: absolute;
    width: 425px;
    height: 425px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Pola gradasi lingkaran super lembut seperti mockup visual Chrome */
    background: radial-gradient(circle, rgba(14, 165, 233, 0.18) 0%, rgba(34, 197, 94, 0.08) 45%, rgba(255, 255, 255, 0) 70%);
    filter: blur(45px);
    z-index: 1;
    pointer-events: none;
}

/* Frame Gambar Murni Plong Tanpa Kotak & Tanpa Shadow Kaku */
.image-wrapper-borderless {
    position: relative;
    z-index: 2;
    width: 100%;
    border: none !important;
    box-shadow: none !important; /* Hapus total sisa shadow hitam */
}

.img-ambient-hover {
    width: 100%;
    height: auto;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ambient-illustration-container:hover .img-ambient-hover {
    transform: scale(1.025); /* Efek zoom mikro elegan saat dihover */
}

/* Overlay teks transparan bawah gambar */
.caption-overlay-ambient {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.7) 100%) !important;
    z-index: 3;
}

/* RESPONSIVE BREAKPOINT UNTUK HP */
@media (max-width: 768px) {
    .ambient-illustration-container {
        padding: 0;
        margin-top: 20px;
    }
    .glow-fluid-backdrop {
        width: 280px;
        height: 280px;
    }
}

/* ==========================================================================
   16. LIGHTBOX MODAL FULLSCREEN IMAGE PREVIEW (CSP COMPLIANT)
   ========================================================================== */
/* Indikator bahwa gambar bisa diklik untuk memperbesar */
.cursor-pointer-zoom {
    cursor: zoom-in !important;
}

/* Modifikasi Latar Belakang Modal Menjadi Gelap Premium */
.modal-fullscreen-custom {
    background-color: rgba(15, 23, 42, 0.95) !important; /* Latar belakang gelap kabur premium */
    backdrop-filter: blur(10px) !important;
    z-index: 10000 !important;
}

/* Penata Letak Box Dialog */
.modal-dialog-custom-layout {
    max-width: 80vw !important;
    margin: 30px auto !important;
}
.img-preview-fullscreen-src {
    max-height: 85vh !important;
    width: auto !important;
    border-radius: 16px !important;
}


/* Tombol Close Melayang Kanan Atas */
.btn-close-preview-custom {
    position: fixed !important;
    top: 25px !important;
    right: 25px !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10060 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-close-preview-custom:hover {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    transform: rotate(90deg) !important;
}

/* Penyesuaian Responsif di Layar HP Smartphone */
@media (max-width: 768px) {
    .modal-dialog-custom-layout {
        max-width: 95vw !important;
        margin: 0 auto !important;
    }
    .img-preview-fullscreen-src {
        max-height: 75vh !important;
        border-radius: 12px !important;
    }
    .btn-close-preview-custom {
        top: 15px !important;
        right: 15px !important;
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
    }
}

#wrapper-alur-eksklusif {
    cursor: zoom-in; 
    position: relative;
} 

/* ==========================================================================
   HIDE ILLUSTRATION ON MOBILE VERSION (DESKTOP ONLY)
   ========================================================================== */
@media (max-width: 768px) { 
    /* Ketika layar di bawah 992px (batas col-lg), sembunyikan kontainer ini */
    .ambient-illustration-container {
        display: none !important;
    }

    .simdek-action-card { 
        /* Mengecilkan lekukan sudut agar tidak terlalu bulat di layar kecil */
        border-radius: 0 35%;
        
        /* Mengecilkan padding: Atas-Bawah 24px, Kiri-Kanan 20px */
        padding: 50px 20px !important; 
        
        /* Mengurangi skala shadow bawaan agar tidak terlalu kotor di HP */
        /* box-shadow: 0 8px 20px rgba(9, 72, 220, 0.04) !important; */
    }

    .simdek-action-card:hover {
        display: none !important;
    }

    /* --- SINKRONISASI EFEK TUMPUKAN KERTAS DI MOBILE --- */
    .paper-stack-1, .paper-stack-2 {
       display: none !important;
    }

    /* Perkecil sudut putaran (*rotation degree*) di HP agar kertas tidak terlalu luber keluar layar */
    .paper-stack-1 { 
        display: none !important;
    }
    .paper-stack-2 { 
       display: none !important;
    }

    /* Jinakkan juga transilasi geser kertas saat dihover di layar sentuh HP */
    .simdek-action-card:hover .paper-stack-1 { 
        display: none !important;
    }
    .simdek-action-card:hover .paper-stack-2 { 
        display: none !important; 
    } 
    .simdek-icon-box {
        display: none !important; 
    }
    .btn-modern-primary{
        position:relative;
        border:none;
        /* border-radius: 30% 70%;  */
        background: 
            linear-gradient(
                135deg,
                #EFF6FF 0%,
                #DBEAFE 100%
            ); 
        color:#2563EB;
        font-weight:200;
        letter-spacing:.1px;
        overflow:hidden;
        transition:all .35s ease;
        /* box-shadow:
            0 4px 14px rgba(37,99,235,.08); */
    }
    .btn-modern-primary::before{
         display: none !important; 
    }

    /* HOVER */
    .btn-modern-primary:hover{
         display: none !important; 
    }

    /* SHINE MOVE */
    .btn-modern-primary:hover::before{
         display: none !important; 
    }

    /* ICON */
    .btn-modern-primary i{
        transition:transform .3s ease; 
    }

    /* 1. Jika ilustrasi sengaja disembunyikan, pastikan display mati total dan z-index dinolkan */
    .ambient-illustration-container,
    .glow-fluid-backdrop {
        display: none !important;
        z-index: -100 !important;
        pointer-events: none !important; /* Matikan sensitivitas sentuhan agar tidak menghalangi klik */
    }

    /* 2. Kunci area footer card agar posisinya berada di lapisan paling depan layar HP */
    .card-action-footer {
        position: relative !important;
        z-index: 999 !important; /* Naikkan pangkatnya agar berada di atas layer mana pun */
    }

    .trigger-smart-modal {
        position: relative !important;
        z-index: 1000 !important; /* Memastikan tombol mutlak menerima ketukan jari pertama */
    } 

    #btn-3, #btn-2 {
        display: none !important; 
    }

    .simdek-action-card {
        border-radius: 16px !important;
        padding: 24px 20px !important; 
        overflow: visible !important;
    } 

    


}



/* Container Utama Banner */
.dishub-banner-container {
    position: relative;
    width: 100%;
    max-width: 650px; /* Menyesuaikan ukuran ideal dashboard */
    height: 400px;
    border-radius: 16px;
    overflow: hidden; /* Memotong mobil agar tidak keluar dari box saat animasi berjalan */
    margin: 20px auto;
}

/* ==========================================
   URUTAN LAYER & ANIMASI
   ========================================== */

/* 1. Layer Bayangan Putih Paling Belakang */
.layer-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    transform: skewX(-2deg) scale(0.98);
    opacity: 0;
    animation: munculFade 0.6s ease-out forwards;
}

/* 2. Layer Background Utama (Biru Tua) */
.layer-bg-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1a237e; /* Warna biru dongker tua sesuai gambar */
    border-radius: 16px;
    opacity: 0;
    transform: scale(0.95);
    /* Muncul sedikit terlambat setelah shadow */
    animation: munculUtama 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s forwards;
}

/* 3. Layer Backdrop Kotak di Belakang Logo */
.layer-logo-backdrop {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 260px;
    height: 220px;
    background: linear-gradient(
        180deg,
        #f1f2f5 0%,
        #b2c1eb 52%,
        #3B82F6 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px); /* Efek blur kaca modern */
    border-radius: 0 0 12px 12px;
    z-index: 2;
    animation: zoomInPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s forwards;
}

/* 4. Layer Logo DISHUB Kota Bandung */
.layer-logo-dishub {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50px);
    width: 220px;
    text-align: center;
    z-index: 3;
    opacity: 0;
    /* Efek drop jatuh dari atas ke bawah */
    animation: logoJatuh 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1.4s forwards;
}

.layer-logo-dishub img {
    width: 100%;
    height: auto;
    object-fit: contain;
    color: white;
}

/* 5. Layer Mobil Derek Berjalan (Disesuaikan dari Kanan) */
.layer-mobil-derek {
    position: absolute;
    bottom: 20px;
    right: -150px; /* Mulai dari luar layar sebelah KANAN */
    width: 160px;
    z-index: 4;
    
    /* Gabungan animasi tanpa typo v4, dipisahkan tanda koma dengan benar */
    animation: mobilMasukDariKanan 1.5s cubic-bezier(0.25, 1, 0.5, 1) 2.2s forwards, 
               mobilBergoyang 0.4s ease-in-out infinite alternate 3.7s;
}

.layer-mobil-derek img {
    width: 100%;
    height: auto;
}

/* ==========================================
   KEYFRAMES TIMELINE (ENGINE ANIMASI)
   ========================================== */

/* Animasi Muncul Bayangan */
@keyframes munculFade {
    to { opacity: 1; }
}

/* Animasi Background Utama Melebar */
@keyframes munculUtama {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animasi Backdrop Logo Membesar */
@keyframes zoomInPop {
    to { transform: translateX(-50%) scale(1); }
}

/* Animasi Logo Drop Down */
@keyframes logoJatuh {
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Animasi Mobil Masuk dari Kanan ke Kiri (Berhenti di Tengah) */
@keyframes mobilMasukDariKanan {
    from {
        right: -150px;
        /* transform: scaleY(-1);  */
        /* Menghadap kiri */
    }
    to { 
        right: 38%; /* Berhenti di area tengah-bawah */
        /* transform: scaleX(-1);  */
        /* Tetap menghadap kiri */
    } 
}

/* Efek Tambahan: Mobil bergoyang naik-turun halus (Tetap mengunci scaleX agar tidak terbalik kasar) */
@keyframes mobilBergoyang {
    from { 
        transform: scaleX(-1) translateY(0); 
    }
    to { 
        transform: scaleX(-1) translateY(-4px); 
    }
}

/* ==========================================================================
   1. BLOK TAB SLIDER (YOUTUBE & INSTAGRAM) - SUDAH VALID & BAGUS
   ========================================================================== */
.gallery-tab-container {
    display: inline-flex;
    background-color: #f1f3f5;
    padding: 6px;
    border-radius: 30px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.btn-gallery-tab {
    background: transparent;
    border: none;
    outline: none;
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 600;
    color: #4a5568;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-gallery-tab:hover:not(.active-tab) {
    color: #1a202c;
    background-color: rgba(0, 0, 0, 0.03);
}

.btn-gallery-tab.active-tab {
    background-color: #ffffff;
    color: #000000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.btn-gallery-tab i {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.btn-gallery-tab:hover i {
    transform: scale(1.1);
}

.trigger-gallery {
    position: relative !important;
    z-index: 10000 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* ==========================================================================
   2. GRID & KONTEN CAROUSEL - VALID
   ========================================================================== */
.gallery-content-panel:not(.d-none) .container-mobile-ig-stack {
    display: block !important;
}

#panel-youtube.d-none {
    display: none !important;
}

.container-grid-video {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* ==========================================================================
   3. KARTU PLAYABLE BOX & OVERLAY (PERBAIKAN UTAMA)
   ========================================================================== */
.ig-playable-box {
    position: relative;
    width: 100%;
    max-width: 260px; /* Menjaga agar tidak melar di desktop */
    height: 420px;    /* Mengunci tinggi rasio HP vertikal */
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    background-color: #000; /* Dasar hitam jika loading video/gambar */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);    
}

.ig-card-wrapper {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
    position: relative;
    transition: transform 0.3s ease;
}

.ig-card-wrapper:hover {
    transform: scale(1.02);
}

/* KUNCI PERBAIKAN: Mengubah dari gradien padat menjadi overlay transparan tembus pandang */
.ig-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Menggunakan gradien hitam transparan tipis agar gambar asli di belakangnya terlihat jelas */
    /* background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%); */
    background: radial-gradient(
    circle at top right,
    rgba(255, 255, 255, 0.2),
    transparent 40%
  );
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2; /* Berada di atas iframe video asli */
    transition: background 0.3s ease;
}

/* Sembunyikan ikon Instagram bawaan agar tidak merusak pemandangan video asli */
.ig-placeholder i.fa-brands.fa-instagram {
    display: none !important; 
}

/* Pengaturan untuk Iframe Dinamis bawaan Instagram Anda agar posisinya berada di latar belakang */
.ig-dynamic-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    z-index: 1; /* Berada di belakang overlay tombol */
}

/* Desain tombol putar melayang */
.ig-placeholder .btn-light {
    font-weight: 600;
    font-size: 14px;
    padding: 10px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: none;
    transition: transform 0.2s ease;
}

/* Efek Interaktif Saat Kartu Di-hover */
.ig-card-wrapper:hover .btn-light {
    transform: scale(1.05);
}

.ig-card-wrapper:hover .ig-placeholder {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%); /* Sedikit menggelap pas di-hover */
}
 


/* ==========================================================================
   12. ENGINE UTAMA KHUSUS MOBILE LAYOUT (FIX STACK CENTERING)
   ========================================================================== */
@media (max-width: 768px) {
    #panel-youtube.gallery-content-panel {
        display: block !important;
    }
    
    /* Pastikan container mobile YouTube muncul */
    .container-mobile-youtube-stack {
        display: block !important;
    }
    .container-mobile-ig-stack {
        width: 100%;
        padding: 20px 10px;
        position: relative;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* WADAH UTAMA: Mengunci batas suci area tumpukan */
    .stack-cards-container-ig {
        position: relative !important;
        width: 290px !important; /* Lebar pas proporsional layar HP */
        height: 480px !important; /* Tinggi tegak lurus rasio 9:16 */
        margin: 0 auto !important;
    }

    /* KARTU INDIVIDUAL: Wajib di-absolute penuh ke pojok kiri atas container */
    .item-card-stack {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 16px !important;
        background-color: #000000 !important;
        display: block !important;
        /* Transisi lembut efek geser/gosok */ 
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, z-index 0.1s !important;
    }

    .mobile-stack-shorts {
        width: 100% !important;
        height: 100% !important;
        min-height: auto !important;
        border-radius: 16px !important;
        border: 2px solid #ffffff !important; /* Pemisah tumpukan */
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    }

    .mobile-stack-shorts iframe {
        border-radius: 14px !important;
    }

    /* MODEL DEKORASI TUMPUKAN 3D KARTU (CSS STATIS KOKOH) */
    /* Kartu Teratas (Paling Depan) */
    .card-layer-5 { z-index: 50 !important; transform: translateY(0px) scale(1) rotate(0deg); }
    /* Kartu Kedua */
    .card-layer-4 { z-index: 40 !important; transform: translateY(-6px) scale(0.97) rotate(1.5deg); }
    /* Kartu Ketiga */
    .card-layer-3 { z-index: 30 !important; transform: translateY(-12px) scale(0.94) rotate(-1.5deg); }
    /* Kartu Keempat dst (Disembunyikan di belakang agar enteng) */
    .card-layer-2 { z-index: 20 !important; transform: translateY(-18px) scale(0.91) rotate(0deg); opacity: 0.8; }
    .card-layer-1 { z-index: 10 !important; transform: translateY(-18px) scale(0.91) rotate(0deg); opacity: 0; }
    .card-layer-0 { z-index: 5 !important; transform: translateY(-18px) scale(0.91) rotate(0deg); opacity: 0; }

    /* Penangkap Usapan Jempol */
    .swipe-overlay-detector {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        z-index: 10;
        pointer-events: auto;
        /* KUNCI: Z-Index detector harus di atas iframe agar bisa swipe, 
           TAPI kita akan gunakan pointer-events agar klik bisa menembus */
        /* z-index: 100 !important; 
        background: transparent !important;
        cursor: pointer !important; */
        
        /* Teknik ini mengizinkan swipe, tapi mengabaikan klik */
        /* touch-action: pan-x pan-y;  */
        /* Jangan gunakan pointer-events: none; di sini secara permanen, 
           karena nanti swipe-nya tidak akan terdeteksi */
    }

    /* Efek Saat Kartu Digosok Keluar Layar */
    .item-card-stack.swiped-out {
        transform: translateX(130%) rotate(25deg) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    /* Trik Utama: Saat diketuk jari, kelas ini aktif dan membuat kaca pelindung mendadak tembus pandang */
    .swipe-overlay-detector.click-through {
        pointer-events: none !important; /* Klik langsung menembus masuk ke tombol Play Iframe */
        
    }

    .stack-container-ig {
        /* Memberikan ruang agar tumpukan tidak terpotong */
        /* padding-bottom: 50px; */
        /* pointer-events: none; */
        /* touch-action: pan-y; */
        position: relative !important;
        display: block !important;
    }

    /* Memastikan tombol klik tetap berada di atas */

    .btn-trigger-play-ig:active {
        transform: scale(0.98);
    }

    .ig-card-stack {
        pointer-events: auto; /* Kartu menangkap klik */
    }

    .btn-trigger-play-ig {
        pointer-events: auto !important;
        position: relative;
        z-index: 1000 !important;
    }
}