/* =========================
           RESET & GLOBAL
        ========================== */

        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
            font-family:'Poppins',sans-serif;
        }

        html{
            scroll-behavior:smooth;
        }

        body{
            background:
            linear-gradient(
                rgba(7,15,35,0.78),
                rgba(20,45,120,0.82)
            ),
            url('../background/rutancrb.jpg');

            background-size:cover;
            background-position:center;
            background-repeat:no-repeat;
            background-attachment:fixed;

            min-height:100vh;
            color:white;
            overflow-x:hidden;
            position:relative;
        }

        /* =========================
           GLOW BACKGROUND
        ========================== */

        body::before{
            content:'';
            position:fixed;
            width:500px;
            height:500px;
            background:rgba(59,130,246,0.12);
            filter:blur(120px);
            top:-150px;
            left:-150px;
            z-index:-1;
        }

        body::after{
            content:'';
            position:fixed;
            width:450px;
            height:450px;
            background:rgba(37,99,235,0.16);
            filter:blur(120px);
            bottom:-150px;
            right:-100px;
            z-index:-1;
        }

        /* =========================
           HEADER
        ========================== */

        .top-header{
            width:100%;
            padding:20px 40px;
            display:grid;
            grid-template-columns:auto 1fr auto;
            align-items:center;
            background:rgba(15,23,42,0.78);
            backdrop-filter:blur(18px);
            -webkit-backdrop-filter:blur(18px);
            border-bottom:1px solid rgba(255,255,255,0.08);
            box-shadow:
            0 10px 30px rgba(0,0,0,0.25);
            position:sticky;
            top:0;
            z-index:9999;
        }

        .top-header::after{
            content:'';
            position:absolute;
            left:0;
            bottom:0;
            width:100%;
            height:1px;

            background:linear-gradient(
                to right,
                transparent,
                rgba(255,255,255,0.25),
                transparent
            );
        }

        /* =========================
           LOGO
        ========================== */

        .logo-left{
            display:flex;
            align-items:center;
            gap:15px;
        }

        .logo-right{
            display:flex;
            justify-content:flex-end;
        }

        .logo-box img{
            width:72px;
            height:72px;
            object-fit:contain;

            filter:
            drop-shadow(0 0 10px rgba(255,255,255,0.2));
        }

        /* =========================
           TITLE
        ========================== */

        .title-box{
            text-align:center;
            position:relative;
            left:-35px;
        }

        .title-box h1{
            font-size:40px;
            font-weight:700;
            letter-spacing:2px;

            background:linear-gradient(to right,#ffffff,#8be9ff);
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
        }

        .title-box h2{
            margin-top:5px;
            font-size:18px;
            font-weight:400;
            color:#dbeafe;
        }

        /* =========================
           SECTION TITLE
        ========================== */

        .section-title{
            text-align:center;
            margin-top:40px;
        }

        .section-title h2{
            font-size:34px;
            font-weight:700;

            background:linear-gradient(to right,#ffffff,#93c5fd);
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
        }

        .section-title p{
            margin-top:8px;
            color:#dbeafe;
            font-size:15px;
        }

        /* =========================
           MENU LAYOUT
        ========================== */

        .menu-layout{
            width:90%;
            max-width:1400px;
            margin:40px auto;

            display:grid;
            grid-template-columns:380px 1fr;
            gap:35px;
            align-items:center;
        }

        .character-box{
            display:flex;
            justify-content:center;
            align-items:center;
        }

        .character-box img{
            width:100%;
            max-width:350px;
            object-fit:contain;

            filter:drop-shadow(0 15px 35px rgba(0,0,0,0.35));
        }

        .container{
            width:100%;

            display:grid;
            grid-template-columns:repeat(2, minmax(220px,1fr));

            gap:25px;
        }

        /* =========================
           MENU BOX
        ========================== */

        .menu-box{
            text-decoration:none;
            color:white;

            background:rgba(255,255,255,0.10);

            border:1px solid rgba(255,255,255,0.12);

            backdrop-filter:blur(15px);

            border-radius:28px;

            padding:40px 20px;

            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;

            position:relative;
            overflow:hidden;

            transition:0.35s ease;

            box-shadow:
            0 10px 30px rgba(0,0,0,0.25);
        }

        .menu-box::before{
            content:'';
            position:absolute;
            width:180px;
            height:180px;
            background:rgba(255,255,255,0.10);
            border-radius:50%;
            top:-70px;
            right:-70px;
            transition:0.4s;
            pointer-events:none;
        }

        .menu-box:hover{
            transform:translateY(-10px) scale(1.03);

            background:linear-gradient(
                135deg,
                rgba(59,130,246,0.35),
                rgba(14,165,233,0.25)
            );

            box-shadow:
            0 20px 45px rgba(0,0,0,0.35),
            0 0 30px rgba(56,189,248,0.35);
        }

        .menu-box:hover::before{
            transform:scale(1.5);
        }

        .menu-box img{
            width:72px;
            margin-bottom:18px;

            filter:brightness(0) invert(1);
        }

        .menu-box span{
            font-size:18px;
            font-weight:600;
            text-align:center;
            z-index:2;
        }

        /* =========================
           SLIDESHOW
        ========================== */

        .slideshow-wrapper{
            width:100%;
            display:flex;
            justify-content:center;
            margin-top:40px;
            margin-bottom:70px;
        }

        .slideshow-container{
            width:92%;
            max-width:1150px;

            position:relative;

            border-radius:35px;
            overflow:hidden;

            border:1px solid rgba(255,255,255,0.12);

            background:rgba(255,255,255,0.06);

            backdrop-filter:blur(18px);

            box-shadow:
            0 25px 70px rgba(0,0,0,0.40),
            0 0 40px rgba(59,130,246,0.20);

            transition:0.4s ease;
        }

        .slide{
            display:none;
            position:relative;
        }

        .slide img{
            width:100%;
            height:580px;

            object-fit:cover;
            display:block;

            transform:scale(1);
            transition:transform 8s ease;
        }

        .slide.active img{
            transform:scale(1.08);
        }

        .caption{
            position:absolute;
            bottom:0;

            width:100%;

            padding:28px;

            background:linear-gradient(
                to top,
                rgba(0,0,0,0.88),
                transparent
            );

            font-size:21px;
            font-weight:500;
        }

        /* =========================
           SLIDE BUTTON
        ========================== */

        .prev,
        .next{
            cursor:pointer;

            position:absolute;
            top:50%;
            transform:translateY(-50%);

            width:60px;
            height:60px;

            display:flex;
            align-items:center;
            justify-content:center;

            font-size:28px;
            font-weight:bold;

            color:white;

            border-radius:50%;

            background:rgba(255,255,255,0.12);

            backdrop-filter:blur(10px);

            border:1px solid rgba(255,255,255,0.15);

            transition:0.35s;

            z-index:10;
        }

        .prev:hover,
        .next:hover{
            background:#3b82f6;

            box-shadow:
            0 0 20px rgba(59,130,246,0.7);
        }

        .prev{
            left:18px;
        }

        .next{
            right:18px;
        }

        /* =========================
           DOTS
        ========================== */

        .dots{
            position:absolute;
            bottom:18px;
            left:50%;
            transform:translateX(-50%);

            display:flex;
            gap:10px;

            z-index:15;
        }

        .dot{
            width:12px;
            height:12px;

            border-radius:50%;

            background:rgba(255,255,255,0.4);

            transition:0.3s;
        }

        .dot.active{
            width:35px;
            border-radius:20px;
            background:white;
        }

        /* =========================
           FLOATING WHATSAPP
        ========================== */

        .floating-wa{
            position:fixed;

            width:75px;
            height:75px;

            bottom:25px;
            right:25px;

            z-index:999;

            border-radius:50%;

            box-shadow:
            0 0 25px rgba(34,197,94,0.65);

            animation:float 2s infinite ease-in-out;
        }

        .floating-wa img{
            width:100%;
            height:100%;
            object-fit:contain;
        }

        /* =========================
           FOOTER
        ========================== */

        .footer-section{
            width:100%;

            padding:40px 20px;

            text-align:center;

            background:rgba(255,255,255,0.06);

            backdrop-filter:blur(15px);

            border-top:1px solid rgba(255,255,255,0.12);
        }

        .footer-icons{
            display:flex;
            justify-content:center;
            align-items:center;
            gap:20px;

            margin-bottom:20px;
        }

        .footer-icons img{
            width:48px;

            transition:0.3s;
        }

        .footer-icons img:hover{
            transform:translateY(-6px) scale(1.08);

            filter:
            drop-shadow(0 0 10px rgba(255,255,255,0.5));
        }

        .footer-address{
            font-size:14px;
            color:#dbeafe;
            line-height:1.8;
        }

        /* =========================
           ANIMATION
        ========================== */

        @keyframes fade{
            from{
                opacity:.4
            }
            to{
                opacity:1
            }
        }

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

        @keyframes captionUp{
            from{
                opacity:0;
                transform:translateY(25px);
            }
            to{
                opacity:1;
                transform:translateY(0);
            }
        }

        .fade{
            animation:fade 1s;
        }

        /* =========================
           TABLET
        ========================== */

        @media(max-width:900px){

            .menu-layout{
                grid-template-columns:1fr;
            }

            .character-box img{
                max-width:240px;
            }

            .container{
                grid-template-columns:1fr;
            }
        }

        /* =========================
           MOBILE
        ========================== */

        @media(max-width:768px){

            .top-header{
                padding:12px 15px;
                gap:8px;

                grid-template-columns:65px 1fr 65px;
            }

            .logo-left{
                gap:8px;
            }

            .logo-box img{
                width:42px;
                height:42px;
            }

            .title-box{
                left:0;
            }

            .title-box h1{
                font-size:20px;
                letter-spacing:1px;
                line-height:1.2;
            }

            .title-box h2{
                margin-top:4px;
                font-size:11px;
                line-height:1.4;
            }

            .section-title{
                margin-top:18px;
            }

            .section-title h2{
                font-size:22px;
            }

            .section-title p{
                font-size:13px;
                padding:0 15px;
            }

            .menu-layout{
                width:95%;
                margin:20px auto;

                grid-template-columns:1fr;
                gap:5px;
            }

            .character-box img{
                max-width:180px;
                margin-right:0;
            }

            .container{
                grid-template-columns:repeat(2,1fr);
                gap:12px;
            }

            .menu-box{
                min-height:160px;
                padding:18px 10px;
                border-radius:20px;
            }

            .menu-box img{
                width:42px;
                margin-bottom:10px;
            }

            .menu-box span{
                font-size:14px;
                line-height:1.4;
            }

            .slideshow-wrapper{
                margin-top:25px;
                margin-bottom:40px;
            }

            .slide img{
                height:220px;
            }

            .caption{
                font-size:13px;
                padding:14px;
            }

            .prev,
            .next{
                width:42px;
                height:42px;
                font-size:20px;
            }

            .floating-wa{
                width:58px;
                height:58px;
                right:15px;
                bottom:15px;
            }

            .footer-section{
                padding:25px 15px;
            }

            .footer-icons{
                gap:14px;
            }

            .footer-icons img{
                width:38px;
            }

            .footer-address{
                font-size:12px;
                line-height:1.6;
            }
        }
        /* --- ANIMASI MODERNIASI --- */

        /* Efek Melayang untuk Siruben */
        .character-box img {
            animation: floating 3s ease-in-out infinite;
            transition: transform 0.3s ease;
        }

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

        /* Upgrade Hover Menu (Lebih smooth & halus) */
        .menu-box {
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
        }

        .menu-box:hover {
            transform: translateY(-10px) scale(1.02);
            border: 1px solid rgba(255,255,255,0.3); /* Border lebih terang saat hover */
        }

        /* Animasi Fade In (Untuk mengganti marquee) */
        .section-title {
            animation: fadeInUp 1s ease-out;
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Animasi Scroll Reveal (Kelas tambahan untuk JS) */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* =========================
   SOCIAL MEDIA FEED SLIDER
========================= */

.social-feed-wrapper {
    width: 92%;
    max-width: 1150px;
    margin: 30px auto 60px;
}

.social-feed-container {
    display: flex;
    gap: 25px;
    overflow-x: auto; /* Mengaktifkan slide geser kiri-kanan */
    padding: 15px 5px 25px 5px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* Slide super mulus di HP / iOS */
}

/* Kustomisasi Scrollbar Agar Terlihat Modern dan Tipis */
.social-feed-container::-webkit-scrollbar {
    height: 7px;
}
.social-feed-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}
.social-feed-container::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.4);
    border-radius: 10px;
}
.social-feed-container::-webkit-scrollbar-thumb:hover {
    background: #3b82f6;
}

/* Pembungkus Konten Feed (Kecil & Berwujud Kaca) */
.feed-card {
    flex: 0 0 310px; /* Ukuran lebar kartu kecil sesuai request (310px) */
    height: 440px;   /* Tinggi proporsional */
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(15px);
    border-radius: 24px;
    overflow: hidden;
    scroll-snap-align: start;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feed-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.25);
}

.social-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Label Penanda Platform di Atas Kaca */
.feed-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    color: white;
}
.ig-color { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.tiktok-color { background: #000000; border: 1px solid rgba(255,255,255,0.2); }
.fb-color { background: #1877f2; }

/* Penyesuaian Responsif di Layar HP */
@media(max-width: 768px) {
    .feed-card {
        flex: 0 0 280px; /* Di HP ukuran mengecil sedikit jadi 280px */
        height: 400px;
    }
}

/* =========================
   SOCIAL MEDIA HUB MODERN
========================= */

.social-hub-wrapper {
    width: 90%;
    max-width: 1300px;
    margin: 40px auto 80px;
}

/* Container utama berjejer ke kanan */
.social-hub-carousel {
    display: flex;
    gap: 30px;
    overflow-x: auto; /* Aktifkan geser kanan-kiri */
    padding: 20px 10px 35px 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

/* Kustomisasi Scrollbar Tipis Futuristik */
.social-hub-carousel::-webkit-scrollbar {
    height: 6px;
}
.social-hub-carousel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px;
}
.social-hub-carousel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    transition: background 0.3s;
}
.social-hub-carousel::-webkit-scrollbar-thumb:hover {
    background: #3b82f6;
}

/* Kerangka Kartu Utama (Seragam & Presisi) */
.hub-card {
    flex: 0 0 320px; /* Lebar paten tiap kartu medso */
    height: 480px;   /* Tinggi paten */
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    overflow: hidden;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Bagian Atas Kartu (Identitas Medsos) */
.hub-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.hub-header img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.hub-header-text h3 {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}
.hub-header-text p {
    font-size: 11px;
    color: #94a3b8;
    margin: 2px 0 0 0;
}

/* Wadah Isi Konten / Iframe */
.hub-body {
    flex: 1;
    width: 100%;
    background: #fff; /* Menetralkan background bawaan iframe */
    overflow: hidden;
    position: relative;
}
.hub-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* =====================================
   EFEK INTERAKTIF HOVER & LAMPU NEON
===================================== */

.hub-card:hover {
    transform: translateY(-12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Neon Glow Instagram (Pink/Orange Gradient) */
.ig-card:hover {
    box-shadow: 0 20px 40px rgba(220, 39, 67, 0.25), 0 0 25px rgba(220, 39, 67, 0.2);
}

/* Neon Glow TikTok (Cyan/Magenta Split) */
.tiktok-card:hover {
    box-shadow: 0 20px 40px rgba(0, 242, 234, 0.2), 0 0 25px rgba(254, 44, 85, 0.2);
}

/* Neon Glow YouTube (Merah Solid) */
.yt-card:hover {
    box-shadow: 0 20px 40px rgba(255, 0, 0, 0.25), 0 0 25px rgba(255, 0, 0, 0.2);
}

/* Neon Glow Facebook (Biru Modern) */
.fb-card:hover {
    box-shadow: 0 20px 40px rgba(24, 119, 242, 0.25), 0 0 25px rgba(24, 119, 242, 0.2);
}

/* Optimasi Tampilan Layar Handphone */
@media(max-width: 768px) {
    .social-hub-wrapper {
        width: 95%;
        margin-bottom: 50px;
    }
    .hub-card {
        flex: 0 0 290px;
        height: 430px;
    }
}