:root{
    --hijau: #1B7A4B;
    --biru: #0D6EFD;
    --emas: #D4AF37;
    --abu: #F4F6F9;
    --dark: #1f2937;
    --putih:#ffffff;

    /* tambahan premium */
    --shadow-sm: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-md: 0 10px 25px rgba(0,0,0,0.12);
    --shadow-lg: 0 18px 45px rgba(0,0,0,0.18);

    /* tambahan modern */
    --radius-sm:12px;
    --radius-md:18px;
    --radius-lg:24px;

    --transition:.35s ease;

    --gradient-primary:
        linear-gradient(
            135deg,
            var(--hijau),
            var(--biru)
        );
}

/* =========================
   GLOBAL
========================= */
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html{
    scroll-behavior:smooth;
    overflow-x:hidden;
}

body{
    font-family:"Segoe UI",sans-serif;
    background:var(--abu);
    color:var(--dark);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    transition:
        background .4s ease,
        color .4s ease;
    overflow-x:hidden;
}

/* SCROLLBAR */
::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#e5e7eb;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(
        180deg,
        var(--biru),
        var(--hijau)
    );
    border-radius:20px;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

iframe{
    width:100%;
    border:none;
}

a{
    transition:var(--transition);
    text-decoration:none;
}

.container{
    width:100%;
    max-width:1200px;
}

/* =========================
   TOPBAR
========================= */
.topbar{
    background:linear-gradient(
        90deg,
        var(--hijau),
        var(--biru)
    );

    color:#fff;

    font-size:13px;

    padding:10px 0;

    box-shadow:var(--shadow-sm);

    position:relative;
    z-index:1000;
}

.topbar a{
    color:#fff;
    opacity:.9;
    font-weight:500;
}

.topbar a:hover{
    opacity:1;
    color:#fff;
}

/* =========================
   NAVBAR (GLASS PREMIUM UPGRADE)
========================= */
.navbar{
    background:rgba(255,255,255,.72) !important;

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    border-bottom:3px solid var(--emas);

    box-shadow:var(--shadow-md);

    padding:12px 0;

    transition:var(--transition);
}

.navbar:hover{
    box-shadow:var(--shadow-lg);
    transform:translateY(-1px);
}

.navbar-brand{
    font-weight:800;
    color:var(--dark) !important;

    display:flex;
    align-items:center;
    gap:10px;
}

.navbar-brand img{
    width:50px;
    height:50px;
    object-fit:contain;
}

.navbar-brand span{
    color:var(--hijau);
}

.navbar-toggler{
    border:none;
    box-shadow:none !important;
}

/* NAV LINK */
.navbar-nav{
    gap:4px;
}

.navbar-nav .nav-link{
    font-weight:600;
    color:var(--dark);

    padding:10px 14px;

    position:relative;

    border-radius:12px;
}

.navbar-nav .nav-link:hover{
    color:var(--biru);
    background:rgba(13,110,253,.06);
}

.navbar-nav .nav-link::after{
    content:"";

    position:absolute;

    left:10px;
    bottom:6px;

    width:0;
    height:2px;

    background:var(--biru);

    transition:.35s ease;
}

.navbar-nav .nav-link:hover::after{
    width:75%;
}

/* =========================
   DROPDOWN
========================= */
.dropdown-menu{
    border:none;

    border-radius:14px;

    box-shadow:var(--shadow-lg);

    padding:10px;

    animation:fadeDown .25s ease;

    backdrop-filter:blur(10px);

    overflow:hidden;
}

.dropdown-item{
    border-radius:10px;

    font-weight:600;

    padding:10px 12px;

    transition:.3s;
}

.dropdown-item:hover{
    background:var(--abu);

    color:var(--biru);

    transform:translateX(6px);
}

@keyframes fadeDown{
    from{
        opacity:0;
        transform:translateY(-10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* =========================
   SLIDER
========================= */
.hero-slider{
    position:relative;
}

.carousel-item{
    position:relative;
}

.carousel-item::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.65),
            rgba(0,0,0,.15)
        );

    z-index:1;
}

.carousel-item img{
    height:520px;

    width:100%;

    object-fit:cover;

    filter:brightness(.72) contrast(1.05);

    transition:.6s ease;
}

.carousel-caption{
    background:rgba(0,0,0,.52);

    border-radius:18px;

    padding:24px;

    backdrop-filter:blur(10px);

    animation:fadeUp .8s ease;

    box-shadow:var(--shadow-md);

    z-index:2;

    max-width:720px;

    margin:auto;
}

.carousel-caption h5{
    font-size:34px;
    font-weight:800;
    line-height:1.3;
}

.carousel-caption p{
    font-size:16px;
    line-height:1.8;
}

.carousel-indicators button{
    width:12px !important;
    height:12px !important;

    border-radius:50%;
}

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

/* =========================
   SECTION
========================= */
.section{
    padding:85px 0;
    position:relative;
}

.section-title{
    font-weight:900;
    margin-bottom:25px;
    letter-spacing:.5px;
    font-size:clamp(28px,4vw,42px);
}

.section-title span{
    color:var(--hijau);
}

/* =========================
   CARD
========================= */
.card-custom{
    border:none;

    border-radius:22px;

    box-shadow:var(--shadow-md);

    transition:.35s ease;

    overflow:hidden;

    background:var(--putih);
}

.card-custom:hover{
    transform:translateY(-10px) scale(1.02);

    box-shadow:var(--shadow-lg);
}

.card-custom img{
    transition:.5s ease;
}

.card-custom:hover img{
    transform:scale(1.1);
}

/* =========================
   BUTTON
========================= */
.btn-custom{
    background:linear-gradient(
        90deg,
        var(--hijau),
        var(--biru)
    );

    color:#fff;

    border:none;

    font-weight:700;

    border-radius:14px;

    padding:12px 24px;

    transition:.3s ease;

    box-shadow:var(--shadow-sm);

    position:relative;

    overflow:hidden;
}

.btn-custom::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.2),
            transparent
        );

    transform:translateX(-100%);
    transition:.5s;
}

.btn-custom:hover::before{
    transform:translateX(100%);
}

.btn-custom:hover{
    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

    color:white;
}

/* =========================
   INFO BAR
========================= */
.info-bar-modern{
    background:
        linear-gradient(
            135deg,
            var(--biru),
            var(--hijau)
        );

    padding:14px 0;

    border-bottom:4px solid var(--emas);

    color:white;

    box-shadow:var(--shadow-md);
}

.info-grid{
    display:grid;

    grid-template-columns:1fr 2fr 1fr;

    gap:12px;

    align-items:center;
}

.info-item{
    display:flex;

    align-items:center;

    gap:12px;
}

.left{
    justify-content:flex-start;
}

.center{
    justify-content:center;
}

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

.badge-icon{
    width:44px;
    height:44px;

    background:rgba(255,255,255,.15);

    border-radius:14px;

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

    font-size:18px;

    backdrop-filter:blur(10px);
}

.label{
    font-size:12px;
    opacity:.85;
}

.value{
    font-size:14px;
    font-weight:700;
}

/* =========================
   RUNNING TEXT
========================= */
.marquee-box{
    width:100%;

    overflow:hidden;

    background:rgba(255,255,255,.12);

    padding:8px 14px;

    border-radius:30px;

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.2);
}

.marquee-text{
    display:inline-block;

    white-space:nowrap;

    padding-left:100%;

    animation:marquee 22s linear infinite;

    font-weight:600;

    font-size:14px;
}

@keyframes marquee{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-100%);
    }
}

/* =========================
   FOOTER
========================= */
.footer{
    background:var(--dark);

    color:#fff;

    padding:70px 0 20px;
}

.footer h5{
    color:var(--emas);
    font-weight:800;
}

.footer a{
    color:#ddd;
    transition:.3s;
}

.footer a:hover{
    color:var(--emas);
    transform:translateX(4px);
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.12);

    margin-top:30px;

    padding-top:15px;

    font-size:13px;

    color:#bbb;
}

/* =========================
   GALERI
========================= */
.tab-content img{
    transition:.3s ease;
}

.tab-content img:hover{
    transform:scale(1.07);
}

.nav-pills{
    gap:10px;
}

.nav-pills .nav-link{
    border-radius:50px;
    padding:10px 18px;
    font-weight:700;
}

.nav-pills .nav-link.active{
    background:var(--gradient-primary);
}

/* =========================
   SAMBUTAN
========================= */
.sambutan-text{
    text-align:justify;

    line-height:1.8;

    font-size:14px;

    display:-webkit-box;

    -webkit-line-clamp:6;
    -webkit-box-orient:vertical;

    overflow:hidden;
}

/* =========================
   DARK MODE
========================= */
body.dark-mode{
    --abu:#0b1220;
    --dark:#e5e7eb;

    background:#0b1220;
    color:#e5e7eb;
}

body.dark-mode .navbar,
body.dark-mode .card-custom,
body.dark-mode .dropdown-menu,
body.dark-mode .footer,
body.dark-mode .instagram-card{
    background:#111827 !important;
    color:#e5e7eb;
}

body.dark-mode .navbar-nav .nav-link{
    color:#fff;
}

body.dark-mode .topbar{
    background:
        linear-gradient(
            90deg,
            #0f172a,
            #1e293b
        );
}

/* =========================
   DARK TOGGLE
========================= */
.dark-toggle{
    position:fixed;

    bottom:20px;
    right:20px;

    width:52px;
    height:52px;

    border-radius:50%;

    border:none;

    background:
        linear-gradient(
            135deg,
            #0d6efd,
            #1b7a4b
        );

    color:white;

    font-size:20px;

    box-shadow:var(--shadow-lg);

    cursor:pointer;

    z-index:9999;

    transition:.3s;
}

.dark-toggle:hover{
    transform:scale(1.08) rotate(10deg);
}

/* =========================
   SCROLL ANIMATION
========================= */
.reveal{
    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

/* =========================
   FOOTER PREMIUM
========================= */
.footer-premium{
    background:
        linear-gradient(
            135deg,
            #0b1220,
            #111b33
        );

    padding:70px 0 30px;

    color:rgba(255,255,255,.85);

    position:relative;

    overflow:hidden;
}

.footer-premium::before{
    content:"";

    position:absolute;

    top:-150px;
    right:-150px;

    width:400px;
    height:400px;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.35),
            transparent 70%
        );

    border-radius:50%;
}

.footer-premium::after{
    content:"";

    position:absolute;

    bottom:-150px;
    left:-150px;

    width:400px;
    height:400px;

    background:
        radial-gradient(
            circle,
            rgba(16,185,129,.35),
            transparent 70%
        );

    border-radius:50%;
}

.footer-premium .container{
    position:relative;
    z-index:2;
}

.footer-brand{
    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    padding:15px 18px;

    border-radius:16px;

    backdrop-filter:blur(10px);
}

.footer-logo{
    width:60px;
    height:60px;

    border-radius:14px;

    background:rgba(255,255,255,.1);

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

    overflow:hidden;

    flex-shrink:0;
}

.footer-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.footer-logo.fallback i{
    font-size:28px;
    color:#38bdf8;
}

.footer-title{
    font-weight:700;
    color:#fff;
    font-size:18px;
}

.footer-tagline{
    font-size:13px;
    opacity:.8;
}

.footer-desc p{
    font-size:14px;
    line-height:1.7;
    opacity:.8;
}

.footer-heading{
    font-weight:700;

    color:#fff;

    margin-bottom:15px;

    font-size:16px;

    position:relative;
}

.footer-heading::after{
    content:"";

    display:block;

    width:60px;
    height:3px;

    margin-top:8px;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            #3b82f6,
            #22c55e
        );
}

.footer-links{
    list-style:none;

    padding:0;
    margin:0;
}

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

.footer-links a{
    text-decoration:none;

    color:rgba(255,255,255,.75);

    font-size:14px;

    transition:.3s;

    display:flex;
    align-items:center;

    gap:8px;
}

.footer-links a i{
    color:#38bdf8;
    font-size:12px;
}

.footer-links a:hover{
    color:#fff;
    transform:translateX(4px);
}

.footer-social{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.social-btn{
    flex:1;

    min-width:150px;

    display:flex;
    align-items:center;

    gap:10px;

    padding:12px 14px;

    border-radius:14px;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    color:#fff;

    transition:.3s;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.06);
}

.social-btn i{
    font-size:18px;
}

.social-btn:hover{
    transform:translateY(-4px);

    background:rgba(255,255,255,.12);
}

.social-btn.fb i{
    color:#3b82f6;
}

.social-btn.ig i{
    color:#f472b6;
}

.social-btn.yt i{
    color:#ef4444;
}

.social-btn.tt i{
    color:#ffffff;
}

.footer-contact{
    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    padding:15px 18px;

    border-radius:16px;
}

.footer-contact p{
    font-size:14px;

    opacity:.85;

    display:flex;

    gap:8px;

    align-items:center;
}

.footer-contact i{
    color:#22c55e;
}

.footer-bottom{
    padding-top:25px;
    font-size:14px;
    opacity:.85;
}

.footer-bottom .line{
    height:1px;

    background:rgba(255,255,255,.12);

    margin-bottom:18px;
}

/* HIGHLIGHT MENU */
.navbar .nav-link.fw-bold.text-warning{
    background:
        linear-gradient(
            45deg,
            #d4af37,
            #ffcc00
        );

    color:#000 !important;

    padding:8px 15px;

    border-radius:30px;

    box-shadow:
        0 6px 18px rgba(212,175,55,.35);

    transition:.3s;
}

.navbar .nav-link.fw-bold.text-warning:hover{
    transform:translateY(-2px);
}

/* =========================
   INSTAGRAM GRID
========================= */
.instagram-grid{
    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;
}

.instagram-card{
    background:#fff;

    padding:20px;

    border-radius:15px;

    box-shadow:
        0 4px 12px rgba(0,0,0,.08);
}

.instagram-card h5{
    font-weight:bold;

    margin-bottom:15px;

    color:#0d6efd;
}

.instagram-embed-wrap{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:15px;
}

.ig-item{
    width:100%;

    overflow:hidden;

    border-radius:12px;
}

/* =========================
   FIX CLASS grid-instagram
========================= */
.grid-instagram{
    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:15px;
}

/* =========================
   RESPONSIVE
========================= */

/* LAPTOP KECIL */
@media(max-width:1200px){

    .carousel-caption{
        max-width:90%;
    }

}

/* TABLET */
@media(max-width:992px){

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

    .instagram-embed-wrap{
        grid-template-columns:repeat(2,1fr);
    }

    .grid-instagram{
        grid-template-columns:repeat(3,1fr);
    }

    .carousel-item img{
        height:420px;
    }

    .carousel-caption h5{
        font-size:28px;
    }

    .navbar-collapse{
        background:#fff;

        padding:18px;

        border-radius:18px;

        margin-top:15px;

        box-shadow:var(--shadow-md);
    }

    body.dark-mode .navbar-collapse{
        background:#111827;
    }

}

/* MOBILE */
@media(max-width:768px){

    .section{
        padding:55px 0;
    }

    .carousel-item img{
        height:260px;
    }

    .carousel-caption{
        padding:14px;
    }

    .carousel-caption h5{
        font-size:20px;
    }

    .carousel-caption p{
        font-size:13px;
        line-height:1.6;
    }

    .info-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .left,
    .right{
        justify-content:center;
    }

    .topbar{
        text-align:center;
        font-size:12px;
    }

    .topbar .container{
        justify-content:center !important;
        gap:8px;
    }

    .footer{
        text-align:center;
    }

    .footer-links a{
        justify-content:center;
    }

    .footer-contact p{
        justify-content:center;
    }

    .social-btn{
        min-width:100%;
    }

    .navbar-brand{
        max-width:75%;
    }

    .navbar-brand span{
        font-size:15px;
    }

    .dark-toggle{
        width:46px;
        height:46px;
        font-size:18px;
    }

    .info-bar-modern .info-grid{
        display:flex;

        flex-direction:column;

        gap:14px;

        text-align:center;
    }

    .info-bar-modern .info-item{
        width:100%;

        display:flex;

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

        text-align:center;

        padding:10px 14px;
    }

    .info-bar-modern .info-item.left,
    .info-bar-modern .info-item.right,
    .info-bar-modern .info-item.center{
        align-items:center;
        justify-content:center;
    }

    .info-bar-modern .marquee-box{
        width:100%;

        overflow:hidden;

        display:flex;

        align-items:center;
        justify-content:center;
    }

    .info-bar-modern .marquee-text{
        font-size:13px;

        white-space:nowrap;

        display:inline-block;

        animation-duration:18s;
    }

}

/* MOBILE KECIL */
@media(max-width:576px){

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

    .instagram-embed-wrap{
        grid-template-columns:1fr;
    }

    .grid-instagram{
        grid-template-columns:repeat(1,1fr);
    }

    .btn-custom{
        width:100%;
    }

    .carousel-caption{
        display:none !important;
    }

    .tanggal-waktu,
    .tanggal-waktu *{
        text-align:center !important;
        justify-content:center !important;
    }

    .motivasi,
    .motivasi *{
        text-align:center !important;
        justify-content:center !important;
    }

}