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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:#040506;
    color:white;
    overflow-x:hidden;
}

/* BACKGROUND */

body::before{
    content:"";
    position:fixed;
    inset:0;

    background:
    radial-gradient(circle at top left, rgba(66,255,158,.12), transparent 25%),
    radial-gradient(circle at bottom right, rgba(66,255,158,.06), transparent 35%),
    linear-gradient(135deg,#050607,#0b1012,#0f1418);

    z-index:-2;
}

body::after{
    content:"";
    position:fixed;
    inset:0;

    background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);

    background-size:60px 60px;

    opacity:.22;

    z-index:-1;
}

/* CONTAINER */

.container{
    width:92%;
    max-width:1480px;
    margin:auto;
}

/* NAVBAR */

.navbar{
    position:fixed;
    top:18px;
    left:50%;
    transform:translateX(-50%);

    width:92%;
    max-width:1480px;

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

    padding:18px 28px;

    border-radius:26px;

    background:rgba(10,12,14,.72);

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

    backdrop-filter:blur(18px);

    z-index:999;
}

.logo{
    font-size:36px;
    font-weight:900;
    letter-spacing:-2px;
}

.logo span{
    color:#42ff9e;
}

.nav-links{
    display:flex;
    gap:42px;
}

.nav-links a{
    text-decoration:none;
    color:#d8e1e8;
    font-size:15px;
    transition:.3s;
}

.nav-links a:hover{
    color:#42ff9e;
}

.nav-btn{
    position:relative;

    border:none;

    padding:16px 32px;

    border-radius:18px;

    font-weight:800;
    letter-spacing:1px;

    cursor:pointer;

    overflow:hidden;

    color:#04110a;

    background:
        linear-gradient(
            135deg,
            #00ff88 0%,
            #42ff9e 35%,
            #7dffbf 65%,
            #c4ffe2 100%
        );

    box-shadow:
        0 0 12px rgba(66,255,158,.45),
        0 0 30px rgba(66,255,158,.28),
        0 0 55px rgba(0,255,140,.18);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}

/* glossy effect */
.nav-btn::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.45),
            rgba(255,255,255,.08),
            transparent
        );

    opacity:.8;

    pointer-events:none;
}

/* hover */
.nav-btn:hover{

    transform:
        translateY(-3px)
        scale(1.03);

    filter:brightness(1.08);

    box-shadow:
        0 0 18px rgba(66,255,158,.7),
        0 0 40px rgba(66,255,158,.45),
        0 0 80px rgba(0,255,140,.28);
}

/* klik */
.nav-btn:active{
    transform:scale(.98);
}

/* RUNNING TEXT */

.running-text{
    position:relative;

    width:100%;

    height:84px;

    overflow:hidden;

    display:flex;
    align-items:center;

    padding:0 34px;

    border-radius:28px;

    background:rgba(10,12,14,.62);

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

    backdrop-filter:blur(18px);

    margin-top:120px;
    margin-bottom:26px;

    box-shadow:
    0 0 40px rgba(66,255,158,.04);
}

.running-text::before{
    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(66,255,158,.05),
        transparent 25%,
        transparent 75%,
        rgba(66,255,158,.05)
    );

    pointer-events:none;
}

.running-track{
    display:flex;
    align-items:center;

    gap:90px;

    white-space:nowrap;

    padding:14px 0;

    animation:runningText 26s linear infinite;

    border-top:1px solid rgba(66,255,158,.18);
    border-bottom:1px solid rgba(66,255,158,.18);

    background:
        linear-gradient(
            to right,
            rgba(0,255,140,.05),
            rgba(66,255,158,.10),
            rgba(0,255,140,.05)
        );

    box-shadow:
        inset 0 0 30px rgba(66,255,158,.06),
        0 0 25px rgba(66,255,158,.05);
}

.running-track span{
    display:flex;
    align-items:center;

    font-size:15px;
    font-weight:800;

    letter-spacing:2px;
    text-transform:uppercase;

    font-family:'Audiowide', sans-serif;

    color:#42ff9e;

    text-shadow:
        0 0 6px rgba(66,255,158,.9),
        0 0 12px rgba(66,255,158,.7),
        0 0 22px rgba(0,255,140,.45);

    margin-right:70px;
}

/* neon bullet */
.running-track span::before{
    content:"";

    width:10px;
    height:10px;

    border-radius:50%;

    background:#42ff9e;

    margin-right:14px;

    flex-shrink:0;

    box-shadow:
        0 0 8px #42ff9e,
        0 0 18px #42ff9e,
        0 0 28px rgba(66,255,158,.7);
}

@keyframes runningText{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }

}

/* HERO */

.hero{
    display:grid;
    grid-template-columns:48% 52%;

    gap:32px;

    align-items:center;

    padding:0 0 40px;
}

/* LEFT */

.hero-left{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* BANNER */

.main-banner{
    position:relative;
    height:590px;
    overflow:hidden;

    border-radius:34px;

    border:1px solid rgba(66,255,158,.18);

    background:#091010;

    box-shadow:
    0 0 25px rgba(66,255,158,.10),
    0 0 80px rgba(66,255,158,.06);
}

/* glow atas */
.main-banner::before{
    content:"";
    position:absolute;
    top:-80px;
    left:50%;
    transform:translateX(-50%);

    width:85%;
    height:180px;

    background:
        radial-gradient(
            circle,
            rgba(66,255,158,.28) 0%,
            rgba(66,255,158,.10) 45%,
            transparent 75%
        );

    filter:blur(45px);
    z-index:2;
    pointer-events:none;
}

/* overlay supaya gambar gak gelap */
.main-banner::after{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.06),
            rgba(0,0,0,.08)
        );

    z-index:1;
    pointer-events:none;
}

.main-banner img{
    width:100%;
    height:100%;

    /* ini penting */
  object-fit:contain;
background:#000;

    /* bikin lebih hidup */
    filter:
        brightness(1.28)
        contrast(1.08)
        saturate(1.15);

    transform:scale(1.03);

    display:block;
}
.banner-content{
    position:absolute;

    left:46px;
    top:50%;

    transform:translateY(-50%);

    max-width:340px;

    z-index:3;
}

.banner-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:12px 18px;

    border-radius:999px;

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

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

    margin-bottom:28px;

    color:#42ff9e;

    font-size:14px;
}

.banner-content h2{
    font-size:72px;
    line-height:.92;

    font-weight:800;

    letter-spacing:-3px;

    margin-bottom:24px;
}

.banner-content p{
    color:#c8d1d8;

    line-height:1.9;

    font-size:18px;

    margin-bottom:36px;
}

.banner-info{
    display:flex;
    gap:26px;
    flex-wrap:wrap;
}

.banner-info-box span{
    display:block;
    color:#91a0aa;
    margin-bottom:6px;
    font-size:13px;
}

.banner-info-box strong{
    font-size:15px;
}

/* TESTIMONIAL */

.testimonial-card{
    padding:24px;

    border-radius:24px;

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

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

    backdrop-filter:blur(12px);

    transition:.3s;
}

.testimonial-card:hover{
    transform:translateY(-6px);

    border-color:
        rgba(66,255,158,.18);

    box-shadow:
        0 0 40px rgba(66,255,158,.06);
}

.testimonial-top{
    display:flex;
    align-items:center;
    gap:16px;

    margin-bottom:18px;
}

.avatar{
    width:60px;
    height:60px;

    border-radius:50%;

    overflow:hidden;

    flex-shrink:0;

    border:2px solid rgba(66,255,158,.25);

    box-shadow:
        0 0 18px rgba(66,255,158,.15);

    background:#111;
}

.avatar img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

.testimonial-user{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.testimonial-name{
    font-size:18px;
    font-weight:700;

    color:#42ff9e;

    margin-bottom:4px;
}

.testimonial-role{
    font-size:13px;

    color:#93a3ad;
}

.testimonial-card p{
    margin-top:12px;

    color:#c4cdd4;

    line-height:1.8;

    font-size:15px;
}

.stars{
    margin-top:14px;

    color:#42ff9e;

    letter-spacing:2px;
}

/* RIGHT */

.hero-right{
    display:flex;
    flex-direction:column;
}

/* TITLE */

.hero-title{
    font-size:50px;

    line-height:.9;

    font-weight:900;

    letter-spacing:-3px;

    margin-bottom:34px;
}

.hero-title span{
    color:#42ff9e;
}

.hero-desc{
    color:#c6d0d7;

    font-size:21px;

    line-height:1.9;

    margin-bottom:42px;
}

/* BUTTON */

.hero-buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;

    margin-bottom:40px;
}

.primary-btn{
    padding:20px 40px;

    border:none;
    border-radius:20px;

    background:
    linear-gradient(135deg,#42ff9e,#8effcb);

    color:#05110a;

    font-weight:700;

    cursor:pointer;

    font-size:16px;
}

.secondary-btn{
    padding:20px 40px;

    border-radius:20px;

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

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

    color:white;

    cursor:pointer;

    font-size:16px;
}

/* FAQ */

.mini-faq{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.mini-faq-item{
    background:rgba(255,255,255,.04);

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

    border-radius:24px;

    overflow:hidden;

    backdrop-filter:blur(10px);
}

.mini-faq-question{
    padding:22px 24px;

    font-size:20px;
    font-weight:700;

    cursor:pointer;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.mini-faq-question::after{
    content:"+";

    color:#42ff9e;

    font-size:28px;
}

.mini-faq-item.active .mini-faq-question::after{
    content:"−";
}

.mini-faq-answer{
    max-height:0;
    overflow:hidden;

    transition:.35s ease;

    color:#b8c1c8;

    line-height:1.9;

    padding:0 24px;
}

.mini-faq-item.active .mini-faq-answer{
    max-height:220px;
    padding:0 24px 24px;
}

/* ARTICLE */

.article-section{
    padding:10px 0 50px;
}

.article-container{
    position:relative;

    padding:70px;

    border-radius:34px;

    overflow:hidden;

    background:
    linear-gradient(180deg,#0b1012,#0d1316);

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

    box-shadow:
    0 0 80px rgba(66,255,158,.04);

    backdrop-filter:blur(14px);

    text-align:center;
}

.article-container::before{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

    background:
    radial-gradient(circle, rgba(66,255,158,.08), transparent 70%);

    top:-200px;
    right:-180px;
}

.article-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:12px 20px;

    border-radius:999px;

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

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

    color:#42ff9e;

    margin-bottom:28px;
}

.article-title{
    font-size:45px;

    line-height:.95;

    letter-spacing:-3px;

    margin-bottom:34px;

    max-width:900px;

    margin-left:auto;
    margin-right:auto;
}

.article-text{
    color:#c4cdd4;

    line-height:2;

    font-size:18px;

    margin-bottom:26px;

    max-width:1000px;

    margin-left:auto;
    margin-right:auto;
}

.article-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin-top:50px;
}

.article-card{
    position:relative;

    padding:38px 32px;

    border-radius:28px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.025)
        );

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

    backdrop-filter:blur(18px);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

    text-align:center;
}

/* glow layer */
.article-card::before{
    content:"";

    position:absolute;

    top:-80px;
    left:50%;

    transform:translateX(-50%);

    width:220px;
    height:220px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(66,255,158,.14),
            transparent 70%
        );

    filter:blur(35px);

    opacity:.7;

    pointer-events:none;
}

/* hover */
.article-card:hover{

    transform:
        translateY(-10px)
        scale(1.02);

    border-color:
        rgba(66,255,158,.28);

    box-shadow:
        0 0 25px rgba(66,255,158,.08),
        0 0 60px rgba(66,255,158,.05);
}

/* title */
.article-card h3{
    position:relative;

    font-size:28px;

    margin-bottom:18px;

    color:#ffffff;

    letter-spacing:-1px;

    z-index:2;
}

/* text */
.article-card p{
    position:relative;

    color:#b9c5ce;

    line-height:1.9;

    font-size:16px;

    z-index:2;
}

.card-icon{
    width:72px;
    height:72px;

    margin:auto auto 24px;

    border-radius:22px;

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

    font-size:30px;

    color:#42ff9e;

    background:
        linear-gradient(
            135deg,
            rgba(66,255,158,.14),
            rgba(66,255,158,.04)
        );

    border:
        1px solid rgba(66,255,158,.18);

    box-shadow:
        0 0 25px rgba(66,255,158,.08);

    backdrop-filter:blur(12px);
}

/* FOOTER */

.premium-footer{
    margin-top:40px;

    padding:80px 0 30px;

    background:
    linear-gradient(180deg,#171c22,#1c2129);

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

.footer-grid{
    width:92%;
    max-width:1480px;

    margin:auto;

    display:grid;
    grid-template-columns:
    1fr
    1fr
    1fr
    1.4fr;

    gap:60px;
}

.footer-column{
    display:flex;
    flex-direction:column;
}

.footer-column h3{
    margin-bottom:26px;

    font-size:22px;

    color:white;
}

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

    color:#c7d0d8;

    margin-bottom:18px;

    transition:.3s;

    font-size:16px;
}

.footer-column a:hover{
    color:#42ff9e;

    transform:translateX(4px);
}

.footer-contact{
    font-family:'Orbitron', sans-serif;
}

.contact-item span{
    display:block;

    font-size:13px;
    font-weight:600;

    letter-spacing:1px;
    text-transform:uppercase;

    color:#7dffbf;

    margin-bottom:4px;

    text-shadow:
        0 0 8px rgba(66,255,158,.35);
}

.contact-item strong{
    font-size:17px;
    font-weight:800;

    letter-spacing:1px;

    color:#ffffff;

    text-shadow:
        0 0 10px rgba(255,255,255,.15),
        0 0 18px rgba(66,255,158,.18);
}

.contact-icon{
    font-size:22px;

    color:#42ff9e;
}

.contact-item span{
    display:block;

    color:#c7d0d8;

    margin-bottom:6px;
}

.contact-item strong{
    font-size:16px;

    color:white;
}

.footer-bottom{
    width:92%;
    max-width:1480px;

    margin:60px auto 0;

    padding-top:26px;

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

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

    color:#97a6b1;
}

.footer-socials{
    display:flex;
    gap:24px;
}

.footer-socials a{
    color:white;

    text-decoration:none;

    font-size:20px;

    transition:.3s;
}

.footer-socials{
    display:flex;
    gap:24px;
}

.footer-socials a{
    width:58px;
    height:58px;

    border-radius:50%;

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

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

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

    color:white;

    transition:.35s;

    backdrop-filter:blur(10px);

    text-decoration:none;
}

.footer-socials a:hover{
    transform:translateY(-6px);

    color:#42ff9e;

    border-color:rgba(66,255,158,.4);

    box-shadow:
    0 0 30px rgba(66,255,158,.2);
}

.footer-socials svg{
    width:24px;
    height:24px;
}

/* SCROLL */

#scrollTopBtn{
    position:fixed;

    right:28px;
    bottom:28px;

    width:62px;
    height:62px;

    border:none;
    border-radius:50%;

    cursor:pointer;

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

    color:#05110a;

    background:
    linear-gradient(135deg,#42ff9e,#8effcb);

    box-shadow:
    0 0 40px rgba(66,255,158,.25);

    z-index:999;

    opacity:0;
    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;
}

#scrollTopBtn.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* MOBILE */

@media(max-width:1200px){

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

.hero-title{
    font-size:74px;
}

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

}

@media(max-width:768px){

.nav-links{
    display:none;
}

.hero-title{
    font-size:52px;
}

.testimonial-grid,
.footer-grid,
.article-grid{
    grid-template-columns:1fr;
}

.footer-bottom{
    flex-direction:column;
    gap:20px;
}

.article-title{
    font-size:44px;
}

.article-container{
    padding:40px 24px;
}

}
@media(max-width:768px){

/* navbar mobile */
.navbar{
    padding:14px 18px;

    border-radius:22px;

    gap:12px;
}

/* logo mobile */
.logo img{
    height:46px;
    width:auto;
}

/* tombol mobile */
.nav-btn{
    padding:12px 18px;

    font-size:12px;

    border-radius:16px;

    min-width:115px;

    white-space:nowrap;
}

/* hamburger */
.hamburger{
    display:flex;

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

    width:48px;
    height:48px;

    border-radius:14px;

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

    border:
        1px solid rgba(66,255,158,.18);

    color:#42ff9e;

    font-size:26px;

    cursor:pointer;

    box-shadow:
        0 0 20px rgba(66,255,158,.08);
}

/* menu mobile */
.nav-links{
    position:absolute;

    top:92px;
    left:0;
    right:0;

    display:flex;
    flex-direction:column;

    gap:18px;

    padding:24px;

    border-radius:24px;

    background:
        rgba(10,12,14,.96);

    border:
        1px solid rgba(66,255,158,.15);

    backdrop-filter:blur(20px);

    opacity:0;
    visibility:hidden;

    transform:translateY(-10px);

    transition:.35s;

    z-index:999;
}

/* menu aktif */
.nav-links.active{
    opacity:1;
    visibility:visible;

    transform:translateY(0);
}

.nav-links a{
    font-size:15px;

    padding-bottom:12px;

    border-bottom:
        1px solid rgba(255,255,255,.05);
}
}

 .toto-jitu-footer {
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    position: fixed;
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: 20px;
                    width: 90%;
                    height: 70px;
                    background: rgba(0, 0, 0, 0.85);
                    backdrop-filter: blur(15px);
                    border-radius: 20px;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4),
                        0 0 25px rgba(255, 215, 0, 0.3),
                        inset 0 0 15px rgba(255, 255, 255, 0.05);
                    z-index: 9999;
                    animation: floatUp 0.8s ease-out;
                    overflow: hidden;
                    border: 1.5px solid rgba(255, 215, 0, 0.5);
                }

                .toto-jitu-footer::before {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 100%;
                    /* SUPER BESAR */
                    height: 150%;
                    background:
                        url('') center/cover no-repeat,
                        rgb(0, 0, 0);
                    border-radius: 20px;
                    z-index: 0;
                }

                /* Border gradient tetep ada */
                .toto-jitu-footer::after {
                    content: "";
                    position: absolute;
                    inset: 0;
                    border-radius: 20px;
                    padding: 2px;
                    background: linear-gradient(120deg,
                            #00ff74, #ffd700, #00ff2a, #00ffff, #0000ff, #ff00ff, #00ff74);
                    background-size: 400%;
                    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                    -webkit-mask-composite: xor;
                    mask-composite: exclude;
                    animation: ledRotate 8s linear infinite;
                    z-index: 1;
                }

                /* Shine effect di atas */
                .dragon-shine {
                    content: "";
                    position: absolute;
                    top: -50%;
                    left: 0;
                    width: 100%;
                    height: 200%;
                    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.15), transparent 70%);
                    animation: shinePass 6s ease-in-out infinite;
                    z-index: 1;
                }

                @keyframes ledRotate {
                    0% {
                        background-position: 0% 50%;
                    }

                    100% {
                        background-position: 400% 50%;
                    }
                }

                @keyframes shinePass {

                    0%,
                    100% {
                        opacity: 0.3;
                    }

                    50% {
                        opacity: 0.7;
                    }
                }

                .toto-jitu-footer a {
                    flex: 1;
                    text-decoration: none;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    color: #ffffffff;
                    font-size: 12px;
                    font-weight: 700;
                    text-transform: uppercase;
                    transition: all 0.3s ease;
                    max-width: 70px;
                    position: relative;
                    padding: 8px 0;
                    z-index: 2;
                    /* Pastikan di atas naga */
                }

                .toto-jitu-footer a img {
                    width: 26px;
                    height: 26px;
                    margin-bottom: 5px;
                    transition: transform 0.3s ease, filter 0.3s ease;
                    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
                    animation: floatBtn 3s ease-in-out infinite;
                }

                @keyframes floatBtn {

                    0%,
                    100% {
                        transform: translateY(0);
                    }

                    50% {
                        transform: translateY(-3px);
                    }
                }

                .toto-jitu-footer a::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 0;
                    height: 3px;
                    background: linear-gradient(90deg, #ffd900, #ff8c00);
                    border-radius: 0 0 3px 3px;
                    transition: width 0.3s ease;
                    z-index: 1;
                }

                .toto-jitu-footer a:hover {
                    color: #fff;
                    transform: translateY(-3px);
                    text-shadow: 0 0 10px #fff, 0 0 20px #ffd700;
                }

                .toto-jitu-footer a:hover::before {
                    width: 70%;
                }

                .toto-jitu-footer a:hover img {
                    transform: scale(1.3) rotate(8deg);
                    filter: drop-shadow(0 0 12px #fff);
                }

                .toto-jitu-footer .tada {
                    background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
                    border-radius: 15px;
                    padding: 8px 12px;
                    transform: scale(1.1);
                    box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
                    transition: all 0.4s ease;
                    position: relative;
                    overflow: hidden;
                    animation: pulseEnergy 2s infinite;
                    z-index: 2;
                }

                @keyframes pulseEnergy {

                    0%,
                    100% {
                        box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
                    }

                    50% {
                        box-shadow: 0 0 30px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 215, 0, 0.6);
                    }
                }

                .toto-jitu-footer .tada::before {
                    content: '';
                    position: absolute;
                    top: -50%;
                    left: -50%;
                    width: 200%;
                    height: 200%;
                    background: linear-gradient(to bottom right,
                            rgba(255, 255, 255, 0.4),
                            rgba(255, 255, 255, 0));
                    transform: rotate(30deg);
                    transition: all 0.5s ease;
                }

                .toto-jitu-footer .tada:hover::before {
                    transform: rotate(30deg) translate(10%, 10%);
                }

                .toto-jitu-footer .tada img {
                    width: 28px;
                    height: 28px;
                    margin-bottom: 4px;
                    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
                    position: relative;
                    z-index: 1;
                }

                .toto-jitu-footer .tada:hover {
                    transform: scale(1.2);
                    box-shadow: 0 0 25px rgba(255, 215, 0, 0.9), 0 0 35px rgba(255, 215, 0, 0.7);
                    background: linear-gradient(135deg, #fff8dc, #ffd700);
                    color: #333;
                }

                .toto-jitu-footer .tada:hover img {
                    filter: drop-shadow(0 0 15px #fff);
                }

                @keyframes floatUp {
                    0% {
                        opacity: 0;
                        transform: translate(-50%, 50px);
                    }

                    100% {
                        opacity: 1;
                        transform: translate(-50%, 0);
                    }
                }

                /* Responsif untuk mobile */
                @media (max-width: 480px) {
                    .toto-jitu-footer {
                        width: 95%;
                        height: 65px;
                    }

                    .toto-jitu-footer::before {
                        background-size: 350px auto;
                        /* Perkecil naga di mobile */
                    }

                    .toto-jitu-footer a {
                        font-size: 11px;
                        padding: 6px 0;
                    }

                    .toto-jitu-footer a img {
                        width: 22px;
                        height: 22px;
                    }

                    .toto-jitu-footer .tada img {
                        width: 24px;
                        height: 24px;
                    }
                }
                
                /* LATEST BLOG */

/* LATEST BLOG */

.latest-blog-section{
padding:30px 0 70px;
}

.latest-blog-header{
text-align:center;
margin-bottom:40px;
}

.latest-blog-header h2{
font-size:58px;
letter-spacing:-2px;
}

.latest-blog-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;

max-width:1250px;
margin:auto;
}

.latest-blog-card{
display:block;

text-decoration:none;

border-radius:24px;

overflow:hidden;

background:
linear-gradient(
180deg,
rgba(255,255,255,.03),
rgba(255,255,255,.015)
);

border:1px solid rgba(66,255,158,.12);

transition:.35s;
}

.latest-blog-card:hover{

transform:
translateY(-6px);

border-color:
rgba(66,255,158,.28);

box-shadow:
0 0 30px rgba(66,255,158,.08);
}

.latest-blog-image{
height:170px;
overflow:hidden;

background:
linear-gradient(
135deg,
rgba(66,255,158,.18),
rgba(66,255,158,.04)
);
}

.latest-blog-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.latest-blog-content{
padding:22px;
}

.latest-blog-badge{
display:inline-block;

padding:7px 12px;

border-radius:999px;

background:rgba(66,255,158,.08);

border:1px solid rgba(66,255,158,.14);

color:#42ff9e;

font-size:11px;
font-weight:700;

margin-bottom:14px;
}

.latest-blog-content h3{
font-size:28px;
line-height:1.25;

margin-bottom:14px;

color:#fff;
}

.latest-blog-content p{
font-size:14px;

line-height:1.7;

color:#aeb7bf;

margin-bottom:18px;
}

.latest-blog-read{
color:#42ff9e;

font-size:14px;
font-weight:700;

letter-spacing:.5px;
}

@media(max-width:900px){

.latest-blog-grid{
grid-template-columns:1fr;
}

.latest-blog-header h2{
font-size:42px;
}

}

.latest-blog-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.latest-blog-button{
text-align:center;
margin-top:45px;
}

.view-all-blog-btn{
display:inline-flex;
align-items:center;
justify-content:center;

padding:18px 34px;

border-radius:999px;

text-decoration:none;

background:
linear-gradient(
135deg,
rgba(66,255,158,.14),
rgba(66,255,158,.06)
);

border:1px solid rgba(66,255,158,.24);

color:#42ff9e;

font-size:14px;
font-weight:700;

letter-spacing:1px;

transition:.35s;
}

.view-all-blog-btn:hover{

transform:
translateY(-4px);

border-color:
rgba(66,255,158,.45);

box-shadow:
0 0 30px rgba(66,255,158,.12);

background:
linear-gradient(
135deg,
rgba(66,255,158,.22),
rgba(66,255,158,.08)
);
}

/* LATEST BLOG SLIDER */

.latest-blog-section{
padding:40px 0 80px;
overflow:hidden;
}

.latest-blog-header{
text-align:center;
margin-bottom:40px;
}

.latest-blog-header h2{
font-size:72px;
letter-spacing:-3px;
}

.latest-blog-slider-wrapper{
position:relative;
display:flex;
align-items:center;
gap:20px;
}

.latest-blog-slider{
display:flex;
gap:22px;
overflow-x:auto;
scroll-behavior:smooth;

padding-bottom:10px;

scrollbar-width:none;
}

.latest-blog-slider::-webkit-scrollbar{
display:none;
}

.latest-blog-card{
min-width:340px;
max-width:340px;

flex-shrink:0;

display:block;

text-decoration:none;

border-radius:26px;

overflow:hidden;

background:
linear-gradient(
180deg,
rgba(255,255,255,.03),
rgba(255,255,255,.015)
);

border:1px solid rgba(66,255,158,.12);

transition:.35s;
}

.latest-blog-card:hover{

transform:
translateY(-8px);

border-color:
rgba(66,255,158,.28);

box-shadow:
0 0 30px rgba(66,255,158,.08);
}

.latest-blog-image{
height:180px;
overflow:hidden;
}

.latest-blog-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.latest-blog-content{
padding:24px;
}

.latest-blog-badge{
display:inline-block;

padding:8px 14px;

border-radius:999px;

background:rgba(66,255,158,.08);

border:1px solid rgba(66,255,158,.14);

color:#42ff9e;

font-size:11px;
font-weight:700;

margin-bottom:16px;
}

.latest-blog-content h3{
font-size:34px;
line-height:1.2;

margin-bottom:18px;

color:#fff;
}

.latest-blog-read{
color:#42ff9e;

font-size:15px;
font-weight:700;
}

.blog-nav{
width:60px;
height:60px;

border:none;

border-radius:50%;

cursor:pointer;

background:
rgba(66,255,158,.08);

border:1px solid rgba(66,255,158,.18);

color:#42ff9e;

font-size:34px;

transition:.35s;

flex-shrink:0;
}

.blog-nav:hover{

transform:scale(1.08);

background:
rgba(66,255,158,.16);

border-color:
rgba(66,255,158,.35);
}

.latest-blog-button{
text-align:center;
margin-top:40px;
}

.view-all-blog-btn{
display:inline-flex;
align-items:center;
justify-content:center;

padding:18px 34px;

border-radius:999px;

text-decoration:none;

background:
linear-gradient(
135deg,
rgba(66,255,158,.14),
rgba(66,255,158,.06)
);

border:1px solid rgba(66,255,158,.24);

color:#42ff9e;

font-size:14px;
font-weight:700;

letter-spacing:1px;

transition:.35s;
}

.view-all-blog-btn:hover{

transform:
translateY(-4px);

border-color:
rgba(66,255,158,.45);

box-shadow:
0 0 30px rgba(66,255,158,.12);
}

@media(max-width:768px){

.latest-blog-header h2{
font-size:48px;
}

.latest-blog-card{
min-width:280px;
max-width:280px;
}

.blog-nav{
display:none;
}

}
      
      /* BREADCRUMB */

.breadcrumb{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;

margin-bottom:26px;
}

.breadcrumb a{
color:#42ff9e;

text-decoration:none;

font-size:14px;
font-weight:600;

transition:.3s;
}

.breadcrumb a:hover{
opacity:.7;
}

.breadcrumb span{
color:#7f8a93;
font-size:14px;
}

.breadcrumb-current{
color:#c4cdd4 !important;
}