@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

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

body{
    font-family:'Poppins',sans-serif;
    background:#fff;
    color:#111;
    overflow-x:hidden;
}

a{
    text-decoration:none;
}

.container{
    width:90%;
    max-width:1300px;
    margin:auto;
}

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

.main-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    padding:16px 0;
    transition:.35s ease;
    background:transparent;
}

.nav-wrapper{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.navbar ul{
    display:flex;
    gap:22px;
    list-style:none;
    align-items:center;
}

.navbar ul li{
    position:relative;
}

.navbar ul li a{
    color:#fff;
    font-size:15px;
    font-weight:500;
    padding:10px 14px;
    border-radius:10px;
    display:inline-block;
    position:relative;
    border:1px solid transparent;
    transition:all .25s ease;
}

.navbar ul li a:hover{
    background:rgba(231,25,31,0.12);
    border:1px solid rgba(231,25,31,0.45);
    box-shadow:0 8px 20px rgba(231,25,31,0.18);
    transform:translateY(-2px);
    color:#fff;
}

.navbar ul li a.active{
    background:#111;
    border:1px solid #e7191f;
    box-shadow:0 0 14px rgba(231,25,31,0.25);
    color:#fff;
}

.navbar ul li a::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:10px;
    background:transparent;
    transition:.3s ease;
    z-index:-1;
}

.navbar ul li a:hover::after{
    background:linear-gradient(135deg, rgba(231,25,31,0.12), transparent);
}

/* DROPDOWN */
.dropdown-menu{
    position:absolute;
    top:38px;
    background:#111;
    width:220px;
    padding:12px;
    opacity:0;
    visibility:hidden;
    transition:.3s;
    border-radius:10px;
}

.dropdown:hover .dropdown-menu{
    opacity:1;
    visibility:visible;
}

.dropdown-menu li{
    margin-bottom:10px;
}

/* MENU TOGGLE */
.menu-toggle{
    display:none;
    color:#fff;
    font-size:28px;
    cursor:pointer;
}

/* SCROLL HEADER */
.main-header.header-scrolled{
    background:rgba(0,0,0,.92);
    backdrop-filter:blur(10px);
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    padding:12px 0;
}

/* LOGO */
.logo-wrap{
    display:flex;
    align-items:center;
    gap:12px;
}

.logo-wrap img{
    width:45px;
    height:45px;
    object-fit:contain;
    display:block;
}

.logo-wrap h2{
    color:#fff;
    font-size:15px;
    letter-spacing:2px;
    margin:0;
    line-height:1;
}

/* HERO */
.hero-section{
    width:100%;
    padding:0;
    margin:0;
    overflow:hidden;
    position:relative;
}

.hero-slider{
    display:flex;
    align-items:flex-start;
    width:100%;
    transition:transform .7s cubic-bezier(.77,0,.18,1);
    will-change:transform;
}

.hero-slide{
    min-width:100%;
    width:100%;
    flex-shrink:0;
    position:relative;
}

.hero-slide img{
    width:100%;
    height:auto;
    display:block;
}

/* PREV / NEXT BUTTONS */
.hero-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:10;
    background:rgba(0,0,0,.45);
    color:#fff;
    border:2px solid rgba(255,255,255,.35);
    border-radius:50%;
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:300;
    cursor:pointer;
    transition:background .25s ease, border-color .25s ease, transform .25s ease;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    user-select:none;
    line-height:1;
}

.hero-btn:hover{
    background:rgba(231,25,31,.75);
    border-color:rgba(231,25,31,.9);
    transform:translateY(-50%) scale(1.1);
}

.hero-btn:active{
    transform:translateY(-50%) scale(0.95);
    transition:transform .08s ease;
}

.hero-btn-prev{ left:20px; }
.hero-btn-next{ right:20px; }

/* DOTS */
.hero-dots{
    position:absolute;
    bottom:16px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
    z-index:10;
}

.hero-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(255,255,255,.45);
    cursor:pointer;
    transition:background .3s ease, transform .3s ease, width .3s ease;
    border:none;
    padding:0;
}

.hero-dot.active{
    background:#e7191f;
    width:24px;
    border-radius:4px;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to right,rgba(0,0,0,.8),rgba(0,0,0,.2));
}

.hero-content{
    position:absolute;
    top:50%;
    left:8%;
    transform:translateY(-50%);
    color:#fff;
    max-width:650px;
}

.hero-badge{
    background:#e7191f;
    padding:10px 18px;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
}

.hero-content h1{
    font-size:70px;
    line-height:1.1;
    margin:25px 0;
}

.hero-content p{
    font-size:17px;
    line-height:1.8;
    color:#ddd;
}

.hero-buttons{
    display:flex;
    gap:15px;
    margin-top:35px;
}

.btn-primary{
    background:#ef0008;
    color:#fff;
    padding:14px 30px;
    border-radius:8px;
    transition:.3s;
    font-family:'Poppins',sans-serif;
    font-weight:700;
}

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

.btn-outline{
    border:1px solid #fff;
    color:#fff;
    padding:14px 30px;
    border-radius:8px;
}

/* SECTION */
section{
    padding:60px 0;
    position:relative;
    z-index:1;
    overflow:hidden;
    backface-visibility:hidden;
    transform:translateZ(0);
    margin-top:-2px;
}

.section-title{
    text-align:center;
    margin-bottom:30px;
}

.section-title span{
    color:#e7191f;
    font-weight:600;
    letter-spacing:2px;
}

.section-title h2{
    font-size:42px;
    margin-top:15px;
}

/* STATS */
.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.stat-box{
    background:#fff;
    padding:45px;
    border-radius:18px;
    text-align:center;
    box-shadow:0 10px 40px rgba(0,0,0,.07);
}

.stat-box h2{
    font-size:50px;
    color:#e7191f;
}

/* WHY */
.why-section{
    background:linear-gradient(145deg, #fffefd 0%, #898989 40%, #3d3d3d 80%, #000000 100%);
    padding-top:120px;
    margin-top:-2px;
    position:relative;
    z-index:2;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.why-card{
    background:#fff;
    padding:40px;
    border-radius:20px;
    transition:.3s;
}

.why-card:hover{
    transform:translateY(-8px);
}

/* ==============================================
   SOCIAL SECTION
   ============================================== */
.social-section{
    background:#000;
    color:#fff;
}

.social-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:44px;
    max-width:960px;
    margin:0 auto;
}

.social-group.fb-full{
    max-width:480px;
    margin:0 auto;
    width:100%;
}

.social-group h3{
    color:#fff;
    font-size:13px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:14px;
    padding-left:2px;
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
}

.social-group h3::after{
    content:'';
    flex:1;
    height:1px;
    background:rgba(255,255,255,.12);
}

.social-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.social-cards.cards-2{
    grid-template-columns:repeat(2,1fr);
    max-width:calc((960px / 3) * 2 + 10px);
    margin:0 auto;
}

.social-cards.cards-1{
    grid-template-columns:1fr;
    max-width:calc(960px / 3);
    margin:0 auto;
}

.social-card{
    display:block;
    position:relative;
    background:#111;
    border-radius:14px;
    overflow:hidden;
    text-decoration:none;
    color:#fff;
    border:1px solid rgba(255,255,255,.06);
    aspect-ratio:2/1;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    will-change:transform;
}

.social-card:hover{
    transform:translateY(-6px) scale(1.02);
    box-shadow:0 18px 40px rgba(231,25,31,.22);
    border-color:rgba(231,25,31,.45);
}

.social-card.img-card{
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-color:#0a0a0a;
}

.social-card.img-card::before{
    display:none;
}

.social-card.img-card::after{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(231,25,31,0);
    z-index:2;
    transition:background .35s ease;
    border-radius:14px;
}

.social-card.img-card:hover::after{
    background:rgba(231,25,31,.14);
}

.social-row-center{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    max-width:calc((960px / 3) * 2 + 10px);
    margin:30px auto 0;
}

.social-row-center .social-card{
    aspect-ratio:2/1;
    min-width:0;
    max-width:none;
    flex:none;
}

/* ==============================================
   WHATSAPP CTA BUTTONS
   ============================================== */
.wa-cta{
    display:flex;
    justify-content:center;
    gap:16px;
    margin-top:50px;
    flex-wrap:nowrap;
}

.wa-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px 20px;
    background:#25D366;
    color:#fff;
    border-radius:12px;
    font-weight:600;
    font-size:15px;
    gap:10px;
    flex:1;
    max-width:260px;
    min-width:0;
    white-space:nowrap;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
    text-decoration:none;
}

.wa-btn:hover{
    transform:translateY(-4px);
    background:#1ebe5d;
    box-shadow:0 12px 28px rgba(37,211,102,.35);
}

.wa-btn img{
    width:22px;
    height:22px;
    object-fit:contain;
    flex-shrink:0;
}

/* ==============================================
   WHATSAPP FLOATING POPUP
   ============================================== */
.wa-float-wrap{
    position:fixed;
    bottom:28px;
    right:28px;
    z-index:9999;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    width:58px;
    pointer-events:none; /* default: tidak menghalangi apapun */
}

.wa-float-btn{
    position:relative;
    width:58px;
    height:58px;
    border-radius:50%;
    flex-shrink:0;
    background:#25D366;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 6px 24px rgba(37,211,102,.45);
    transition:transform .3s ease, box-shadow .3s ease;
    border:none;
    outline:none;
    pointer-events:auto; /* tombol utama selalu bisa diklik */
}

.wa-float-btn:hover{
    transform:scale(1.1);
    box-shadow:0 10px 32px rgba(37,211,102,.6);
}

.wa-float-btn img{
    width:32px;
    height:32px;
    object-fit:contain;
}

.wa-float-btn::before{
    content:'';
    position:absolute;
    width:58px;
    height:58px;
    border-radius:50%;
    background:rgba(37,211,102,.35);
    animation:waPulse 2s ease-out infinite;
    pointer-events:none;
}

@keyframes waPulse{
    0%  { transform:scale(1);   opacity:.7; }
    100%{ transform:scale(1.9); opacity:0;  }
}

/* Panel dilepas dari flow: absolute, tidak makan ruang saat tertutup */
.wa-float-panel{
    position:absolute;
    bottom:70px;
    right:0;
    width:max-content;   /* ← kunci fix: lebar mengikuti konten terlebar */
    max-width:260px;
    display:flex;
    flex-direction:column;
    gap:8px;
    opacity:0;
    transform:translateY(12px) scale(0.95);
    pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
    transform-origin:bottom right;
}

.wa-float-panel.open{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto; /* hanya aktif saat terbuka */
}

.wa-float-item{
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    color:#111;
    text-decoration:none;
    padding:12px 16px;
    border-radius:14px;
    font-size:13px;
    font-weight:600;
    box-shadow:0 4px 20px rgba(0,0,0,.18);
    white-space:nowrap;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
    animation:waSlideIn .3s ease both;
    pointer-events:none; /* default: tidak bisa diklik */
}

.wa-float-panel.open .wa-float-item{
    pointer-events:auto; /* hanya aktif saat panel benar-benar terbuka */
}

.wa-float-item:nth-child(2){ animation-delay:.06s; }

@keyframes waSlideIn{
    from{ opacity:0; transform:translateX(16px); }
    to  { opacity:1; transform:translateX(0);    }
}

.wa-float-item:hover{
    transform:translateX(-5px) scale(1.03);
    background:#FFD600;
    color:#111;
    box-shadow:0 8px 28px rgba(255,214,0,.45);
}

.wa-float-item:hover .wa-float-item-label{ color:#7a6500; }
.wa-float-item:hover .wa-float-item-name{ color:#111; }

.wa-float-item:active{
    transform:translateX(-2px) scale(0.97);
    background:#FFC107;
    box-shadow:0 4px 16px rgba(255,193,7,.5);
    transition:transform .08s ease, background .08s ease;
}

.wa-float-item img{
    width:28px;
    height:28px;
    object-fit:contain;
    flex-shrink:0;
}

.wa-float-item-info{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.wa-float-item-label{
    font-size:11px;
    color:#888;
    font-weight:500;
}

.wa-float-item-name{
    font-size:13px;
    color:#111;
    font-weight:700;
}

.wa-float-close{
    position:absolute;
    top:-8px;
    right:-8px;
    width:22px;
    height:22px;
    background:#e7191f;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:12px;
    color:#fff;
    font-weight:700;
    box-shadow:0 2px 8px rgba(0,0,0,.2);
    transition:transform .2s;
}

.wa-float-close:hover{ transform:scale(1.15); }

/* =====================
GALLERY SECTION
===================== */
.gallery-section{
    background:linear-gradient(160deg, #0f0f0f 0%, #1a0000 50%, #2a0000 100%);
    position:relative;
    overflow:hidden;
}

.gallery-section::before{
    content:'';
    position:absolute;
    inset:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' fill='rgba(255,255,255,0.02)'/%3E%3C/svg%3E");
    pointer-events:none;
    z-index:0;
}

.gallery-section .container{
    position:relative;
    z-index:1;
}

.gallery-section .section-title span{
    color:rgba(255,255,255,.5) !important;
    letter-spacing:4px;
}

.gallery-section .section-title h2{
    color:#fff;
}

/* YOUTUBE SLIDER */
.yt-slider{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
    max-width:1000px;
    margin:0 auto;
}

.yt-card{
    position:relative;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 16px 48px rgba(0,0,0,.5);
    background:#111;
    border:1px solid rgba(255,255,255,.06);
    transition:transform .35s cubic-bezier(.25,.8,.25,1), box-shadow .35s ease;
}

.yt-card:hover{
    transform:translateY(-8px);
    box-shadow:0 28px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(231,25,31,.3);
}

.yt-thumb-wrap{
    position:relative;
    width:100%;
    padding-top:56.25%;
}

.yt-thumb-wrap iframe{
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    border:0;
    border-radius:20px 20px 0 0;
}

.yt-card-footer{
    padding:16px 20px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:rgba(255,255,255,.03);
    border-top:1px solid rgba(255,255,255,.06);
}

.yt-card-label{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:600;
    color:rgba(255,255,255,.7);
    letter-spacing:1px;
    text-transform:uppercase;
}

.yt-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#e7191f;
    display:inline-block;
    box-shadow:0 0 8px rgba(231,25,31,.8);
    animation:ytPulse 1.8s ease-in-out infinite;
}

@keyframes ytPulse{
    0%,100%{ opacity:1; transform:scale(1); }
    50%    { opacity:.5; transform:scale(1.3); }
}

.yt-watch-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 16px;
    background:rgba(231,25,31,.15);
    border:1px solid rgba(231,25,31,.4);
    color:#ff6b6b;
    border-radius:50px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
    text-decoration:none;
    transition:background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
    white-space:nowrap;
}

.yt-watch-btn:hover{
    background:rgba(231,25,31,.9);
    border-color:#e7191f;
    color:#fff;
    transform:translateX(2px);
}

.center-btn{
    text-align:center;
    margin-top:52px;
    position:relative;
    z-index:1;
}

.btn-gallery-more{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 40px;
    border:2px solid #fff;
    color:#fff;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
    text-decoration:none;
    transition:background .28s ease, color .28s ease, transform .28s ease, box-shadow .28s ease;
    position:relative;
    overflow:hidden;
}

.btn-gallery-more::before{
    content:'';
    position:absolute;
    inset:0;
    background:#fff;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .28s ease;
    z-index:0;
}

.btn-gallery-more:hover::before{ transform:scaleX(1); }

.btn-gallery-more span,
.btn-gallery-more svg{
    position:relative;
    z-index:1;
    transition:color .28s ease;
}

.btn-gallery-more:hover span{ color:#111; }
.btn-gallery-more:hover svg{ stroke:#111; }

.btn-gallery-more:hover{
    box-shadow:0 10px 30px rgba(255,255,255,.2);
    transform:translateY(-3px);
}

/* YT SHORTS */
.yt-shorts-label{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    font-weight:700;
    color:rgba(255,255,255,.6);
    letter-spacing:1.5px;
    text-transform:uppercase;
    max-width:1000px;
    margin:32px auto 14px;
}

.yt-shorts-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
    max-width:1040px;
    margin:0 auto;
}

.yt-short-card{
    width:100%;
    max-width:210px;
    margin:0 auto;
    border-radius:16px;
    overflow:hidden;
    background:#111;
    border:1px solid rgba(255,255,255,.06);
    box-shadow:0 8px 28px rgba(0,0,0,.4);
    transition:transform .32s cubic-bezier(.25,.8,.25,1), box-shadow .32s ease;
}

.yt-short-card:hover{
    transform:translateY(-7px);
    box-shadow:0 20px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(231,25,31,.3);
}

/* 9:16 ratio — padding-top obeys !important to win over older rule */
.yt-short-wrap{
    position:relative;
    width:100%;
    padding-top:177.78%;
    overflow:hidden;
    background:#000;
}

.yt-short-wrap iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
    border-radius:16px 16px 0 0;
}

.yt-short-play{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:46px;
    height:46px;
    border-radius:50%;
    background:rgba(231,25,31,.9);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    z-index:2;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
}

.yt-short-footer{
    padding:10px 14px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    background:rgba(255,255,255,.03);
    border-top:1px solid rgba(255,255,255,.06);
}

.yt-short-title{
    font-size:11px;
    font-weight:600;
    color:rgba(255,255,255,.65);
    letter-spacing:.5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* =====================
TESTIMONIAL
===================== */
.testimonial-section{
    background:#0d0d0d;
    position:relative;
    overflow:hidden;
}

.testimonial-section::before{
    content:'';
    position:absolute;
    top:-120px;
    left:50%;
    transform:translateX(-50%);
    width:600px;
    height:300px;
    background:radial-gradient(ellipse, rgba(231,25,31,.12) 0%, transparent 70%);
    pointer-events:none;
    z-index:0;
}

.testimonial-section .container{
    position:relative;
    z-index:1;
}

.testimonial-section .section-title span{ color:#e7191f; }
.testimonial-section .section-title h2{ color:#fff; }

.testimonial-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.testimonial-card{
    background:#161616;
    border:1px solid rgba(255,255,255,.06);
    border-radius:18px;
    padding:28px 26px 24px;
    display:flex;
    flex-direction:column;
    gap:14px;
    position:relative;
    transition:transform .32s ease, box-shadow .32s ease, border-color .32s ease;
}

.testimonial-card:hover{
    transform:translateY(-7px);
    box-shadow:0 20px 48px rgba(0,0,0,.35), 0 0 0 1px rgba(231,25,31,.25);
    border-color:rgba(231,25,31,.3);
}

.testi-quote{
    font-size:52px;
    line-height:1;
    color:#e7191f;
    font-family:Georgia, serif;
    opacity:.7;
    margin-bottom:-30px;
}

.testi-text{
    font-size:13px;
    color:rgba(255,255,255,.72);
    line-height:1.75;
    flex:1;
    margin:0;
}

.testi-stars{
    color:#f59e0b;
    font-size:14px;
    letter-spacing:2px;
}

.testimonial-card::after{
    content:'';
    display:block;
    width:100%;
    height:1px;
    background:rgba(255,255,255,.07);
    margin:2px 0;
}

.testi-profile{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:4px;
}

.testi-profile img{
    width:44px;
    height:44px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(231,25,31,.4);
    flex-shrink:0;
}

.testi-info h4{
    font-size:13px;
    font-weight:700;
    color:#fff;
    margin:0 0 2px;
    line-height:1.3;
}

.testi-info span{
    font-size:11px;
    color:rgba(255,255,255,.4);
    letter-spacing:.4px;
}

/* =====================
ARTICLE
===================== */
.article-section{
    background:#f4f4f6;
}

.article-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.article-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 4px 20px rgba(0,0,0,.06);
    border:1px solid rgba(0,0,0,.055);
    display:flex;
    flex-direction:column;
    transition:transform .32s cubic-bezier(.25,.8,.25,1), box-shadow .32s ease;
}

.article-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 44px rgba(0,0,0,.12), 0 4px 12px rgba(231,25,31,.07);
}

.article-img-wrap{
    position:relative;
    overflow:hidden;
    flex-shrink:0;
}

.article-img-wrap img{
    width:100%;
    height:170px;
    object-fit:cover;
    display:block;
    transition:transform .45s ease;
}

.article-card:hover .article-img-wrap img{ transform:scale(1.07); }

.article-tag{
    position:absolute;
    top:12px;
    left:12px;
    background:#e7191f;
    color:#fff;
    font-size:10px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    padding:4px 10px;
    border-radius:50px;
    z-index:2;
}

.article-content{
    padding:18px 20px 22px;
    display:flex;
    flex-direction:column;
    flex:1;
    gap:8px;
}

.article-date{
    font-size:11px;
    color:#aaa;
    font-weight:500;
    letter-spacing:.5px;
}

.article-content h3{
    font-size:14px;
    font-weight:700;
    color:#111;
    line-height:1.45;
    margin:0;
}

.article-content p{
    font-size:12px;
    color:#777;
    line-height:1.65;
    margin:0;
    flex:1;
}

.article-read-more{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    font-weight:700;
    color:#e7191f;
    letter-spacing:.4px;
    text-decoration:none;
    margin-top:4px;
    transition:gap .22s ease, opacity .22s ease;
}

.article-read-more:hover{
    gap:10px;
    opacity:.8;
}

/* =====================
FOOTER
===================== */
.main-footer{
    background:#080808;
    color:#fff;
}

.footer-top-line{
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(231,25,31,.7), transparent);
}

.main-footer .footer-inner{
    display:grid !important;
    grid-template-columns:1.3fr 1fr 1.2fr 1.2fr !important;
    gap:34px !important;
    padding:44px 0 36px !important;
    align-items:start !important;
}

.footer-logo-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:0px;
}

.main-footer .footer-logo-img{
    width:60px !important;
    height:60px !important;
    object-fit:contain !important;
}

.footer-logo-text{
    display:flex;
    flex-direction:column;
    line-height:1.2;
}

.footer-logo-title{
    font-size:13px;
    font-weight:800;
    letter-spacing:1.5px;
    color:#fff;
}

.footer-logo-sub{
    font-size:11px;
    color:rgba(255,255,255,.45);
}

.footer-desc{
    font-size:13px;
    line-height:1.7;
    text-align:justify;
    color:rgba(255,255,255,.55);
    max-width:270px;
    margin-bottom:16px;
}

.footer-col-title{
    font-size:12px;
    font-weight:700;
    color:#fff;
    letter-spacing:1.6px;
    text-transform:uppercase;
    margin-bottom:16px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.main-footer ul{
    list-style:none !important;
    padding:0 !important;
    margin:0 !important;
}

.main-footer a{
    text-decoration:none !important;
    color:inherit;
}

.main-footer .footer-links{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
}

.main-footer .footer-links li a{
    font-size:13px !important;
    color:rgba(255,255,255,.55) !important;
    transition:.25s ease;
}

.main-footer .footer-links li a:hover{
    color:#fff;
    padding-left:4px;
}

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

.footer-social-icon{
    width:30px;
    height:30px;
    border-radius:8px;
    background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.6);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.25s ease;
}

.footer-social-icon:hover{
    background:#e7191f;
    color:#fff;
    transform:translateY(-3px);
}

.main-footer .footer-contact-list{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
}

.main-footer .footer-contact-item{
    display:flex !important;
    align-items:flex-start !important;
    gap:10px !important;
    color:rgba(255,255,255,.6) !important;
}

.footer-contact-icon{
    width:28px;
    height:28px;
    border-radius:8px;
    background:rgba(37,211,102,.12);
    color:#25D366;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.footer-contact-text{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.footer-contact-label{
    font-size:12px;
    color:#fff;
    font-weight:600;
}

.footer-contact-val{
    font-size:12px;
    color:rgba(255,255,255,.5);
    word-break:break-word;
}

.footer-service-box{
    display:flex;
    gap:12px;
    padding:14px;
    border-radius:14px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.07);
    margin-bottom:16px;
}

.footer-service-icon{
    width:34px;
    height:34px;
    border-radius:10px;
    background:rgba(231,25,31,.12);
    color:#e7191f;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    overflow:hidden;
}

.footer-service-icon img{
    width:18px;
    height:18px;
    object-fit:contain;
    display:block;
}

.footer-service-title,
.footer-service-desc,
.footer-service-cta{ display:block; }

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

.footer-service-desc{
    font-size:12px;
    color:rgba(255,255,255,.5);
    margin:3px 0;
    line-height:1.5;
}

.footer-service-cta{
    font-size:12px;
    color:#e7191f;
    font-weight:600;
}

.footer-hours-title{
    font-size:12px;
    color:#fff;
    margin-bottom:8px;
}

.footer-hours-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    font-size:12px;
    color:rgba(255,255,255,.5);
    margin-bottom:5px;
}

.footer-hours-closed{ color:#e7191f; }

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.07);
    padding:14px 0;
}

.footer-bottom-inner{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    font-size:12px;
    color:rgba(255,255,255,.35);
    text-align:center;
}

/* =====================
REVEAL ANIMATION
===================== */
.reveal{
    opacity:0;
    transform:translateY(35px);
    transition:all .8s ease;
}

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

/* =====================
PRODUCT
===================== */
.product-section{
    background:#fff;
    position:relative;
}

.product-section::before{
    content:'';
    display:block;
    width:60px;
    height:3px;
    background:#e7191f;
    margin:0 auto 48px;
    border-radius:2px;
}

.product-slider{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
}

.product-card{
    background:#fff;
    border-radius:24px;
    overflow:visible;
    box-shadow:0 8px 32px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
    transition:transform .35s cubic-bezier(.25,.8,.25,1), box-shadow .35s ease;
    display:flex;
    flex-direction:column;
    position:relative;
    border:1px solid rgba(0,0,0,.055);
}

.product-card:hover{
    transform:translateY(-10px);
    box-shadow:0 24px 56px rgba(0,0,0,.13), 0 4px 12px rgba(231,25,31,.08);
}

.product-card-img-wrap{
    position:relative;
    overflow:hidden;
    border-radius:24px 24px 0 0;
    clip-path:inset(0 0 0 0 round 24px 24px 0 0);
}

.product-card img{
    width:100%;
    height:280px;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
}

.product-card:hover img{ transform:scale(1.05); }

.product-badge{
    position:absolute;
    top:24px;
    text-align:center;
    right:-72px;
    background:#e7191f;
    color:#fff;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    padding:7px 64px;
    transform:rotate(45deg);
    box-shadow:0 4px 14px rgba(231,25,31,.4);
    z-index:10;
    white-space:nowrap;
    pointer-events:none;
}

.product-badge.badge-popular{
    background:linear-gradient(135deg,#f59e0b,#d97706);
    box-shadow:0 4px 14px rgba(245,158,11,.4);
}

.product-badge.badge-best{
    background:linear-gradient(135deg,#6366f1,#4f46e5);
    box-shadow:0 4px 14px rgba(99,102,241,.4);
}

.product-content{
    padding:28px 28px 24px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    flex:1;
}

.product-content::before{
    content:'';
    display:block;
    width:40px;
    height:2px;
    background:linear-gradient(90deg,#e7191f,#ff6b6b);
    border-radius:2px;
    margin-bottom:4px;
}

.product-title{
    font-size:18px;
    font-weight:700;
    color:#111;
    letter-spacing:.3px;
    line-height:1.3;
}

.product-subtitle{
    font-size:13px;
    color:#888;
    line-height:1.6;
    max-width:88%;
}

.btn-buy{
    margin-top:12px;
    padding:11px 30px;
    background:linear-gradient(135deg,#e7191f,#c9151a);
    color:#fff;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
    letter-spacing:.5px;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
    text-decoration:none;
    box-shadow:0 6px 20px rgba(231,25,31,.25);
}

.btn-buy:hover{
    transform:translateY(-3px);
    background:linear-gradient(135deg,#ff2d34,#e7191f);
    box-shadow:0 10px 28px rgba(231,25,31,.4);
}

.btn-buy:active{
    transform:translateY(0);
    box-shadow:0 4px 12px rgba(231,25,31,.3);
}

.product-view-more{
    text-align:center;
    margin-top:52px;
}

.btn-view-more{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 40px;
    border:2px solid #e7191f;
    color:#e7191f;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
    text-decoration:none;
    transition:background .28s ease, color .28s ease, transform .28s ease, box-shadow .28s ease;
    position:relative;
    overflow:hidden;
}

.btn-view-more::before{
    content:'';
    position:absolute;
    inset:0;
    background:#e7191f;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .28s ease;
    z-index:0;
}

.btn-view-more:hover::before{ transform:scaleX(1); }

.btn-view-more span,
.btn-view-more svg{
    position:relative;
    z-index:1;
    transition:color .28s ease, stroke .28s ease;
}

.btn-view-more:hover span,
.btn-view-more:hover svg{
    color:#fff;
    stroke:#fff;
}

.btn-view-more:hover{
    box-shadow:0 10px 30px rgba(231,25,31,.3);
    transform:translateY(-3px);
}

/* =====================
PREMIUM HEADER DROPDOWN
===================== */
.nav-dropdown{ position:relative; }

.nav-drop-link span{
    font-size:11px;
    margin-left:6px;
    transition:.3s ease;
}

.nav-dropdown:hover .nav-drop-link span{ transform:rotate(180deg); }

.nav-mega-dropdown,
.nav-simple-dropdown{
    position:absolute;
    top:48px;
    left:50%;
    transform:translateX(-50%) translateY(14px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    background:rgba(8,8,8,.96);
    border:1px solid rgba(231,25,31,.25);
    box-shadow:0 24px 60px rgba(0,0,0,.45);
    backdrop-filter:blur(14px);
    border-radius:18px;
    transition:.32s cubic-bezier(.16,1,.3,1);
    z-index:99999;
}

.nav-dropdown:hover .nav-mega-dropdown,
.nav-dropdown:hover .nav-simple-dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}

.nav-mega-dropdown{
    width:520px;
    padding:22px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.nav-simple-dropdown{
    width:180px;
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.mega-col{
    padding:14px;
    border-radius:14px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.06);
}

.mega-col h4{
    color:#e7191f;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.mega-col a,
.nav-simple-dropdown a{
    width:100%;
    display:block;
    color:rgba(255,255,255,.68);
    font-size:13px;
    padding:9px 10px;
    border-radius:10px;
    transition:.25s ease;
}

.mega-col a:hover,
.nav-simple-dropdown a:hover{
    color:#fff;
    background:rgba(231,25,31,.14);
    padding-left:15px;
}

/* =====================================================
   CONTACT PAGE
   ===================================================== */
.contact-hero{
    position:relative;
    min-height:520px;
    background:linear-gradient(135deg,#0a0a0a 0%,#1a0000 50%,#2a0000 100%);
    display:flex;
    align-items:center;
    overflow:hidden;
}

.contact-hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 30% 60%,rgba(231,25,31,.18) 0%,transparent 65%);
    pointer-events:none;
}

.contact-hero-overlay{
    position:absolute;
    inset:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' fill='rgba(255,255,255,0.015)'/%3E%3C/svg%3E");
    pointer-events:none;
    z-index:0;
}

.contact-hero-inner{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:120px;
    padding-bottom:80px;
    gap:40px;
    overflow:visible;
}

.contact-hero-content{
    flex:0 0 55%;
    max-width:55%;
}

.contact-hero-badge{
    display:inline-block;
    background:rgba(231,25,31,.15);
    border:1px solid rgba(231,25,31,.4);
    color:#ff6b6b;
    font-size:12px;
    font-weight:700;
    letter-spacing:3px;
    padding:8px 20px;
    border-radius:50px;
    margin-bottom:24px;
}

.contact-hero-content h1{
    font-size:60px;
    font-weight:700;
    color:#fff;
    line-height:1.1;
    margin-bottom:20px;
}

.contact-hero-accent{ color:#e7191f; }

.contact-hero-content p{
    font-size:16px;
    text-align:left;
    color:rgba(255,255,255,.6);
    max-width:470px;
    line-height:1.8;
}

.contact-hero-img-circle{
    width:650px;
    height:650px;
    border-radius:50%;
    overflow:hidden;
    border:3px solid rgba(231,25,31,.35);
    box-shadow:0 0 60px rgba(231,25,31,.2), inset 0 0 40px rgba(0,0,0,.4);
}

.contact-hero-img-wrap{
    flex:0 0 auto;
    position:absolute;
    right:-222px;
    top:50%;
    transform:translateY(-50%);
}

.contact-hero-img-circle img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
}

.contact-main-section{
    background:#fff;
    padding:80px 0;
}

.contact-wa-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin-top:20px;
}

.contact-wa-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:18px;
    background:#fff;
    border:1px solid rgba(0,0,0,.07);
    border-radius:20px;
    padding:28px 24px;
    text-decoration:none;
    overflow:hidden;
    box-shadow:0 8px 32px rgba(0,0,0,.06);
    transition:transform .32s ease, box-shadow .32s ease, border-color .32s ease;
}

.contact-wa-card::before{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:3px;
    background:linear-gradient(90deg,#25D366,#1ebe5d);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .32s ease;
}

.contact-wa-card:hover{
    transform:translateY(-8px);
    box-shadow:0 24px 56px rgba(37,211,102,.15);
    border-color:rgba(37,211,102,.35);
}

.contact-wa-card:hover::before{ transform:scaleX(1); }

.contact-email-card::before{
    background:linear-gradient(90deg,#e7191f,#ff6b6b);
}

.contact-email-card:hover{
    box-shadow:0 24px 56px rgba(231,25,31,.12);
    border-color:rgba(231,25,31,.3);
}

.contact-wa-icon{
    width:58px;
    height:58px;
    border-radius:16px;
    background:rgba(37,211,102,.1);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.contact-wa-icon img{
    width:32px;
    height:32px;
    object-fit:contain;
}

.contact-email-icon{
    background:rgba(231,25,31,.08);
    color:#e7191f;
}

.contact-wa-info{ flex:1; min-width:0; }

.contact-wa-role{
    font-size:11px;
    color:#aaa;
    font-weight:500;
    letter-spacing:.8px;
    text-transform:uppercase;
    display:block;
    margin-bottom:4px;
}

.contact-wa-name{
    font-size:17px;
    font-weight:700;
    color:#111;
    margin:0 0 4px;
    line-height:1.3;
}

.contact-wa-number{
    font-size:13px;
    color:#666;
    display:block;
}

.contact-wa-arrow{
    color:#ccc;
    flex-shrink:0;
    transition:color .25s ease, transform .25s ease;
}

.contact-wa-card:hover .contact-wa-arrow{
    color:#25D366;
    transform:translateX(4px);
}

.contact-email-card:hover .contact-wa-arrow{ color:#e7191f; }

.contact-wa-badge{
    position:absolute;
    top:16px;
    right:16px;
    background:rgba(37,211,102,.1);
    color:#1ebe5d;
    font-size:10px;
    font-weight:700;
    letter-spacing:1px;
    padding:4px 10px;
    border-radius:50px;
    border:1px solid rgba(37,211,102,.2);
}

.contact-wa-badge-email{
    background:rgba(231,25,31,.08);
    color:#e7191f;
    border-color:rgba(231,25,31,.2);
}

.contact-social-section{
    background:#000;
    padding:80px 0;
    color:#fff;
}

.contact-social-section .section-title span{
    color:rgba(255,255,255,.45);
    letter-spacing:4px;
}

.contact-social-section .section-title h2{ color:#fff; }

.contact-social-group{ margin-bottom:44px; }

.contact-social-platform-label{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    font-weight:700;
    color:rgba(255,255,255,.5);
    letter-spacing:2.5px;
    text-transform:uppercase;
    margin-bottom:14px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.contact-social-platform-label svg{ color:rgba(255,255,255,.6); }

.contact-social-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    max-width:960px;
    margin:0 auto;
}

.contact-social-cards-2{
    grid-template-columns:repeat(2,1fr);
    max-width:calc((960px / 3) * 2 + 12px);
}

.contact-social-cards-1{
    grid-template-columns:1fr;
    max-width:calc(960px / 3);
}

.contact-social-card{
    display:block;
    position:relative;
    background:#111;
    border-radius:16px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.06);
    aspect-ratio:2/1;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.contact-social-card:hover{
    transform:translateY(-6px) scale(1.02);
    box-shadow:0 18px 40px rgba(231,25,31,.22);
    border-color:rgba(231,25,31,.45);
}

.contact-social-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0);
    display:flex;
    align-items:flex-end;
    padding:14px 16px;
    transition:background .3s ease;
    border-radius:16px;
}

.contact-social-card:hover .contact-social-overlay{ background:rgba(0,0,0,.55); }

.contact-social-overlay span{
    font-size:12px;
    font-weight:600;
    color:#fff;
    opacity:0;
    transform:translateY(6px);
    transition:opacity .25s ease, transform .25s ease;
    letter-spacing:.5px;
}

.contact-social-card:hover .contact-social-overlay span{
    opacity:1;
    transform:translateY(0);
}

.contact-info-section{
    background:linear-gradient(145deg,#0f0f0f 0%,#1a0000 60%,#2a0000 100%);
    padding:80px 0;
}

.contact-info-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.contact-info-card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.07);
    border-radius:20px;
    padding:36px 32px;
    text-align:center;
    transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.contact-info-card:hover{
    transform:translateY(-6px);
    border-color:rgba(231,25,31,.3);
    box-shadow:0 20px 48px rgba(0,0,0,.3);
}

.contact-info-icon{
    width:64px;
    height:64px;
    border-radius:18px;
    background:rgba(231,25,31,.1);
    border:1px solid rgba(231,25,31,.2);
    color:#e7191f;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
}

.contact-info-card h3{
    font-size:16px;
    font-weight:700;
    color:#fff;
    margin-bottom:8px;
}

.contact-info-card p{
    font-size:13px;
    color:rgba(255,255,255,.5);
    margin-bottom:6px;
    line-height:1.6;
}

.contact-info-card strong{
    font-size:14px;
    color:#e7191f;
    font-weight:600;
}

/* =====================================================
   MEDIA PAGE
   ===================================================== */
.media-hero{
    position:relative;
    min-height:480px;
    background:linear-gradient(135deg,#0a0a0a 0%,#1a0000 50%,#2a0000 100%);
    display:flex;
    align-items:center;
    overflow:hidden;
}

.media-hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 20% 60%,rgba(231,25,31,.16) 0%,transparent 65%);
    pointer-events:none;
}

.media-hero-overlay{
    position:absolute;
    inset:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' fill='rgba(255,255,255,0.015)'/%3E%3C/svg%3E");
    pointer-events:none;
    z-index:0;
}

.media-hero-content{
    position:relative;
    z-index:2;
    padding-top:130px;
    padding-bottom:80px;
}

.media-hero-badge{
    display:inline-block;
    background:rgba(231,25,31,.15);
    border:1px solid rgba(231,25,31,.4);
    color:#ff6b6b;
    font-size:12px;
    font-weight:700;
    letter-spacing:3px;
    padding:8px 20px;
    border-radius:50px;
    margin-bottom:24px;
}

.media-hero-content h1{
    font-size:60px;
    font-weight:700;
    color:#fff;
    line-height:1.1;
    margin-bottom:16px;
}

.media-hero-accent{ color:#e7191f; }

.media-hero-content p{
    font-size:16px;
    color:rgba(255,255,255,.6);
    max-width:520px;
    line-height:1.8;
    margin-bottom:36px;
}

.media-anchor-nav{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.media-anchor-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 24px;
    border:1px solid rgba(255,255,255,.2);
    color:rgba(255,255,255,.7);
    border-radius:50px;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    transition:all .25s ease;
    background:rgba(255,255,255,.04);
}

.media-anchor-btn:hover,
.media-anchor-btn.active-anchor{
    background:rgba(231,25,31,.15);
    border-color:rgba(231,25,31,.5);
    color:#fff;
    box-shadow:0 8px 24px rgba(231,25,31,.18);
}

.media-gallery-section{
    background:#fff;
    padding:80px 0;
}

.media-filter-tabs{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:36px;
}

.media-filter-btn{
    padding:9px 22px;
    border:1px solid rgba(0,0,0,.12);
    background:#fff;
    color:#666;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    font-family:'Poppins',sans-serif;
    transition:all .22s ease;
}

.media-filter-btn:hover,
.media-filter-btn.active-filter{
    background:#e7191f;
    border-color:#e7191f;
    color:#fff;
    box-shadow:0 6px 18px rgba(231,25,31,.28);
}

.media-photo-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.media-photo-item{
    border-radius:14px;
    overflow:hidden;
    cursor:pointer;
}

.media-photo-wrap{
    position:relative;
    overflow:hidden;
    border-radius:14px;
    aspect-ratio:3/4;
}

.media-photo-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .45s ease;
}

.media-photo-item:hover .media-photo-wrap img{ transform:scale(1.08); }

.media-photo-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0);
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    padding:14px 16px;
    transition:background .3s ease;
    border-radius:14px;
}

.media-photo-item:hover .media-photo-overlay{ background:rgba(0,0,0,.5); }

.media-photo-tag{
    font-size:11px;
    font-weight:700;
    color:#fff;
    background:#e7191f;
    padding:4px 10px;
    border-radius:50px;
    opacity:0;
    transform:translateY(6px);
    transition:opacity .25s ease, transform .25s ease;
    letter-spacing:.6px;
}

.media-photo-zoom{
    width:36px;
    height:36px;
    border-radius:50%;
    background:rgba(231,25,31,.85);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transform:scale(.8);
    transition:opacity .25s ease, transform .25s ease;
}

.media-photo-item:hover .media-photo-tag,
.media-photo-item:hover .media-photo-zoom{
    opacity:1;
    transform:translateY(0) scale(1);
}

.media-lightbox{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
}

.media-lightbox.open{
    opacity:1;
    pointer-events:all;
}

.media-lightbox-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.88);
}

.media-lightbox-content{
    position:relative;
    z-index:1;
    max-width:90vw;
    max-height:88vh;
}

.media-lightbox-content img{
    max-width:100%;
    max-height:88vh;
    border-radius:12px;
    display:block;
    box-shadow:0 30px 80px rgba(0,0,0,.6);
}

.media-lightbox-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(6px);
    color: #fff;
    border: 1px solid rgba(255,255,255,.25);
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background .2s ease;
    z-index: 10002;
}

.media-lightbox-close:hover {
    background: rgba(255,255,255,.28);
    transform: none;
}

.media-video-section{
    background:linear-gradient(160deg,#0f0f0f 0%,#1a0000 50%,#2a0000 100%) !important;
}

.media-artikel-section{ background:#f4f4f6; }

.media-filter-light{ margin-bottom:32px; }

.media-filter-btn-light{
    padding:9px 22px;
    border:1px solid rgba(0,0,0,.12);
    background:#fff;
    color:#666;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    font-family:'Poppins',sans-serif;
    transition:all .22s ease;
}

.media-filter-btn-light:hover,
.media-filter-btn-light.active-filter-light{
    background:#111;
    border-color:#111;
    color:#fff;
}

.media-article-grid{
    grid-template-columns:repeat(4,1fr) !important;
}

/* =====================================================
   ABOUT PAGE
   ===================================================== */
.about-hero{
    position:relative;
    min-height:580px;
    background:linear-gradient(135deg,#0a0a0a 0%,#1a0000 55%,#2a0000 100%);
    display:flex;
    align-items:center;
    overflow:hidden;
    margin-bottom:-50px;
    margin-top:-50px;
}

.about-hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 25% 65%,rgba(231,25,31,.16) 0%,transparent 65%);
    pointer-events:none;
}

.about-hero-overlay{
    position:absolute;
    inset:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' fill='rgba(255,255,255,0.015)'/%3E%3C/svg%3E");
    pointer-events:none;
}

.about-hero-inner{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:130px;
    padding-bottom:80px;
    gap:40px;
    overflow:visible;
}

.about-hero-content{
    flex:0 0 55%;
    max-width:55%;
}

.about-hero-badge{
    display:inline-block;
    background:rgba(231,25,31,.15);
    border:1px solid rgba(231,25,31,.4);
    color:#ff6b6b;
    font-size:12px;
    font-weight:700;
    letter-spacing:3px;
    padding:8px 20px;
    border-radius:50px;
    margin-bottom:24px;
}

.about-hero-content h1{
    font-size:60px;
    font-weight:700;
    color:#fff;
    line-height:1.1;
    margin-bottom:20px;
}

.about-hero-accent{ color:#e7191f; }

.about-hero-content p{
    font-size:16px;
    color:rgba(255,255,255,.6);
    max-width:500px;
    line-height:1.8;
    margin-bottom:36px;
}

.about-hero-stats{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.about-hero-stat strong{
    display:block;
    font-size:32px;
    font-weight:700;
    color:#e7191f;
    line-height:1;
}

.about-hero-stat span{
    font-size:12px;
    color:rgba(255,255,255,.5);
    font-weight:500;
    letter-spacing:.5px;
    margin-top:4px;
    display:block;
}

.about-hero-stat-divider{
    width:1px;
    height:44px;
    background:rgba(255,255,255,.15);
}

.about-hero-img-wrap{
    flex:0 0 auto;
    position:absolute;
    right:-80px;
    top:50%;
    transform:translateY(-50%);
}

.about-hero-img-circle{
    width:480px;
    height:480px;
    border-radius:50%;
    overflow:hidden;
    border:3px solid rgba(231,25,31,.35);
    box-shadow:0 0 60px rgba(231,25,31,.2);
}

.about-hero-img-circle img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
}

.about-hero-img-badge{
    position:absolute;
    bottom:40px;
    left:-20px;
    background:#fff;
    color:#111;
    font-size:13px;
    font-weight:700;
    padding:12px 18px;
    border-radius:50px;
    display:flex;
    align-items:center;
    gap:8px;
    box-shadow:0 12px 32px rgba(0,0,0,.25);
    white-space:nowrap;
}

.about-hero-img-badge svg{ color:#e7191f; flex-shrink:0; }

.about-story-section{
    background:#fff;
    padding:100px 0;
}

.about-story-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:center;
}

.about-story-imgs{
    position:relative;
    height:480px;
}

.about-story-img-main{
    position:absolute;
    top:0;
    left:0;
    width:75%;
    height:85%;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 20px 56px rgba(0,0,0,.12);
}

.about-story-img-main img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.about-story-img-sub{
    position:absolute;
    bottom:0;
    right:0;
    width:52%;
    height:55%;
    border-radius:20px;
    overflow:hidden;
    border:4px solid #fff;
    box-shadow:0 16px 40px rgba(0,0,0,.14);
}

.about-story-img-sub img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.about-story-img-label{
    position:absolute;
    bottom:16px;
    left:16px;
    background:rgba(0,0,0,.7);
    backdrop-filter:blur(8px);
    border-radius:10px;
    padding:8px 14px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.about-story-img-label span{
    font-size:10px;
    color:rgba(255,255,255,.6);
    font-weight:500;
    letter-spacing:1px;
}

.about-story-img-label strong{
    font-size:22px;
    font-weight:700;
    color:#e7191f;
    line-height:1;
}

.about-story-text{
    font-size:14px;
    color:#555;
    text-align:justify;
    line-height:1.85;
    margin-bottom:16px;
}

.about-story-highlights{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-top:28px;
}

.about-story-highlight-item{
    display:flex;
    align-items:flex-start;
    gap:16px;
}

.about-highlight-icon{
    width:44px;
    height:44px;
    border-radius:12px;
    background:rgba(231,25,31,.08);
    color:#e7191f;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    border:1px solid rgba(231,25,31,.15);
}

.about-story-highlight-item h4{
    font-size:14px;
    font-weight:700;
    color:#111;
    margin:0 0 4px;
}

.about-story-highlight-item p{
    font-size:13px;
    color:#777;
    margin:0;
    line-height:1.6;
}

.about-visi-section{
    background:linear-gradient(145deg,#0f0f0f 0%,#1a0000 60%,#2a0000 100%);
    padding:100px 0;
}

.about-visi-section .section-title span{ color:rgba(255,255,255,.45); letter-spacing:4px; }
.about-visi-section .section-title h2{ color:#fff; }

.about-visi-grid{
    display:grid;
    grid-template-columns:1fr 1.6fr;
    gap:40px;
    align-items:start;
    margin-top:20px;
}

.about-visi-card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:40px 36px;
    height:100%;
}

.about-visi-main{
    border-color:rgba(231,25,31,.3);
    background:rgba(231,25,31,.06);
    position:relative;
    overflow:hidden;
}

.about-visi-main::before{
    content:'';
    position:absolute;
    top:-40px;
    right:-40px;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(231,25,31,.08);
    pointer-events:none;
}

.about-visi-icon{
    width:64px;
    height:64px;
    border-radius:18px;
    background:rgba(231,25,31,.12);
    border:1px solid rgba(231,25,31,.25);
    color:#e7191f;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:24px;
}

.about-visi-card h3{
    font-size:22px;
    font-weight:700;
    color:#fff;
    margin-bottom:16px;
}

.about-visi-card p{
    font-size:14px;
    color:rgba(255,255,255,.6);
    line-height:1.85;
}

.about-misi-wrap{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:40px 36px;
}

.about-misi-title{
    font-size:22px;
    font-weight:700;
    color:#fff;
    margin-bottom:28px;
}

.about-misi-list{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.about-misi-item{
    display:flex;
    align-items:flex-start;
    gap:20px;
}

.about-misi-num{
    font-size:28px;
    font-weight:700;
    color:rgba(231,25,31,.3);
    line-height:1;
    min-width:36px;
    flex-shrink:0;
}

.about-misi-item h4{
    font-size:14px;
    font-weight:700;
    color:#fff;
    margin:0 0 6px;
}

.about-misi-item p{
    font-size:13px;
    color:rgba(255,255,255,.55);
    line-height:1.7;
    margin:0;
}

.about-values-section{
    background:#f4f4f6;
    padding:100px 0;
}

.about-values-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin-top:20px;
}

.about-value-card{
    background:#fff;
    border-radius:20px;
    padding:36px 28px;
    text-align:center;
    border:1px solid rgba(0,0,0,.055);
    box-shadow:0 4px 20px rgba(0,0,0,.05);
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.about-value-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 48px rgba(0,0,0,.1);
    border-color:rgba(231,25,31,.2);
}

.about-value-icon{
    width:64px;
    height:64px;
    border-radius:18px;
    background:rgba(231,25,31,.08);
    color:#e7191f;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
    border:1px solid rgba(231,25,31,.15);
    transition:background .3s ease;
}

.about-value-card:hover .about-value-icon{
    background:#e7191f;
    color:#fff;
}

.about-value-card h3{
    font-size:16px;
    font-weight:700;
    color:#111;
    margin-bottom:12px;
}

.about-value-card p{
    font-size:13px;
    color:#777;
    line-height:1.7;
}

.about-team-section{
    background:#fff;
    padding:100px 0;
}

.about-team-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:32px;
    max-width:800px;
    margin:20px auto 0;
}

.about-team-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.07);
    box-shadow:0 8px 32px rgba(0,0,0,.07);
    transition:transform .3s ease, box-shadow .3s ease;
}

.about-team-card:hover{
    transform:translateY(-8px);
    box-shadow:0 24px 56px rgba(0,0,0,.12);
}

.about-team-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
}

.about-team-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}

.about-team-card:hover .about-team-img-wrap img{ transform:scale(1.06); }

.about-team-social{
    position:absolute;
    bottom:16px;
    right:16px;
    display:flex;
    gap:8px;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .3s ease, transform .3s ease;
}

.about-team-card:hover .about-team-social{
    opacity:1;
    transform:translateY(0);
}

.about-team-social-btn{
    width:36px;
    height:36px;
    border-radius:50%;
    background:rgba(0,0,0,.7);
    backdrop-filter:blur(6px);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .25s ease;
}

.about-team-social-btn:hover{ background:#e7191f; }

.about-team-info{ padding:24px 24px 28px; }

.about-team-info h3{
    font-size:18px;
    font-weight:700;
    color:#111;
    margin-bottom:4px;
}

.about-team-info span{
    font-size:12px;
    color:#e7191f;
    font-weight:600;
    letter-spacing:.5px;
    text-transform:uppercase;
    display:block;
    margin-bottom:12px;
}

.about-team-info p{
    font-size:13px;
    color:#777;
    line-height:1.7;
}

.about-branch-section{
    background:#0d0d0d;
    padding:100px 0;
}

.about-branch-section .section-title span{ color:#e7191f; }
.about-branch-section .section-title h2{ color:#fff; }

.about-branch-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
    max-width:900px;
    margin:20px auto 0;
}

.about-branch-card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:40px 36px;
    position:relative;
    transition:border-color .3s ease, box-shadow .3s ease;
}

.about-branch-card:hover{
    border-color:rgba(231,25,31,.35);
    box-shadow:0 20px 48px rgba(0,0,0,.3);
}

.about-branch-badge{
    position:absolute;
    top:20px;
    right:20px;
    background:#e7191f;
    color:#fff;
    font-size:10px;
    font-weight:700;
    letter-spacing:1.5px;
    padding:4px 12px;
    border-radius:50px;
    text-transform:uppercase;
}

.about-branch-badge-jateng{
    background:rgba(255,255,255,.12);
    color:rgba(255,255,255,.7);
}

.about-branch-icon{
    width:56px;
    height:56px;
    border-radius:16px;
    background:rgba(231,25,31,.1);
    border:1px solid rgba(231,25,31,.2);
    color:#e7191f;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
}

.about-branch-card h3{
    font-size:20px;
    font-weight:700;
    color:#fff;
    margin-bottom:12px;
}

.about-branch-card p{
    font-size:13px;
    color:rgba(255,255,255,.55);
    line-height:1.75;
    margin-bottom:20px;
}

.about-branch-detail{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:24px;
}

.about-branch-detail span{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:rgba(255,255,255,.5);
}

.about-branch-detail svg{ color:#e7191f; flex-shrink:0; }

.about-branch-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 22px;
    background:#25D366;
    color:#fff;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    transition:transform .25s ease, box-shadow .25s ease;
}

.about-branch-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 28px rgba(37,211,102,.35);
}

.about-branch-btn-jateng{
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.2);
    color:#fff;
}

.about-branch-btn-jateng:hover{
    background:rgba(255,255,255,.18);
    box-shadow:0 10px 28px rgba(255,255,255,.1);
}

.about-cta-section{
    background:linear-gradient(135deg,#3a0002 0%,#a01015 100%);
    padding:80px 0;
}

.about-cta-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    flex-wrap:wrap;
}

.about-cta-content h2{
    font-size:32px;
    font-weight:700;
    color:#fff;
    margin-bottom:10px;
}

.about-cta-content p{
    font-size:15px;
    color:rgba(255,255,255,.75);
    max-width:480px;
    line-height:1.7;
}

.about-cta-btns{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.about-cta-btn-primary{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 28px;
    background:#fff;
    color:#111;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
    transition:transform .25s ease, box-shadow .25s ease;
    white-space:nowrap;
}

.about-cta-btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 32px rgba(0,0,0,.2);
}

.about-cta-btn-outline{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 28px;
    border:2px solid rgba(255,255,255,.5);
    color:#fff;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
    transition:all .25s ease;
    white-space:nowrap;
}

.about-cta-btn-outline:hover{
    background:rgba(255,255,255,.15);
    border-color:#fff;
    transform:translateY(-3px);
}

/* =======================================================
   KATALOG
   ======================================================= */
:root {
    --red:       #DD0000;
    --red-dark:  #AA0000;
    --red-light: #FFF0F0;
    --black:     #111111;
    --white:     #FFFFFF;
    --gray-bg:   #F5F5F5;
    --gray-lt:   #EBEBEB;
    --gray-mid:  #C8C8C8;
    --gray-txt:  #666666;
    --border:    #E0E0E0;
    --sw:        228px;
    --rad:       8px;
    --radlg:     12px;
}

.k-topbar {
    position: fixed;          /* sticky → fixed */
    top: 0;
    left: 0;                  /* tambah ini */
    width: 100%;              /* tambah ini */
    z-index: 200;
    background: var(--black);
    border-bottom: 3px solid var(--red);
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 28px;
    gap: 20px;
}

.k-home-btn{
    display:inline-flex;
    align-items:center;
    gap:7px;
    text-decoration:none;
    color:var(--white);
    font-size:13px;
    font-weight:600;
    padding:6px 14px 6px 10px;
    border-radius:6px;
    border:1px solid #333;
    transition:all .15s;
    white-space:nowrap;
    flex-shrink:0;
}

.k-home-btn:hover{ background:#222; border-color:#555; }

.k-home-btn svg{
    width:15px;
    height:15px;
    stroke:var(--red);
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.k-logo-text{
    font-size:14px;
    font-weight:700;
    color:var(--white);
    letter-spacing:0.04em;
    white-space:nowrap;
}

.k-logo-text span{ color:var(--red); }

.k-search-form{
    flex:1;
    max-width:320px;
    display:flex;
    margin-left:auto;
}

.k-search-form input{
    flex:1;
    height:38px;
    width: 15px;
    border:none;
    border-radius:6px 0 0 6px;
    padding:0 16px;
    font-family:'Poppins',sans-serif;
    font-size:13.5px;
    outline:none;
    background:var(--white);
    color:var(--black);
}

.k-search-form button{
    width:46px;
    height:38px;
    background:var(--red);
    border:none;
    border-radius:0 6px 6px 0;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:background .15s;
}

.k-search-form button:hover{ background:var(--red-dark); }

.k-search-form button svg{
    width:16px;
    height:16px;
    stroke:var(--white);
    fill:none;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.k-tabs{
    display:flex;
    gap:4px;
    flex-shrink:0;
}

.k-tab{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 14px;
    border-radius:6px;
    font-size:12.5px;
    font-weight:600;
    text-decoration:none;
    color:#999;
    border:1.5px solid transparent;
    transition:all .15s;
    white-space:nowrap;
}

.k-tab:hover{ color:var(--white); border-color:#444; }
.k-tab.active{ color:var(--white); background:var(--red); border-color:var(--red); }

.k-tab svg{
    width:13px;
    height:13px;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.k-page-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.k-wrap {
    display: flex;
    padding: 20px 28px;
    gap: 20px;
    align-items: flex-start;
    margin-left: var(--sw);
    margin-top: 56px;
    flex: 1;                /* ← ambil sisa ruang, dorong footer ke bawah */
}

.k-sidebar {
    width: var(--sw);
    flex-shrink: 0;
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;             /* ← ganti height dengan bottom:0 */
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--white);
    border-right: 1px solid var(--border);
    z-index: 99;
}

/* scrollbar tipis biar rapi */
.k-sidebar::-webkit-scrollbar { width: 3px; }
.k-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.k-sidebar::-webkit-scrollbar-track { background: transparent; }

/* Override section padding untuk katalog */
.k-main section {
    padding: 0;
    margin: 0;
    overflow: visible;
    transform: none;
    backface-visibility: unset;
}

.sb-block{
    background:var(--white);
    border-radius:var(--radlg);
    border:1px solid var(--border);
    overflow:hidden;
    margin-bottom:12px;
}

.sb-title{
    padding:10px 14px;
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--gray-txt);
    background:var(--gray-bg);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    gap:7px;
}

.sb-title svg{
    width:12px;
    height:12px;
    stroke:var(--red);
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.sb-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:9px 14px;
    font-size:13px;
    font-weight:500;
    color:var(--black);
    text-decoration:none;
    border-bottom:1px solid var(--gray-lt);
    transition:background .12s;
    cursor:pointer;
}

.sb-item:last-child{ border-bottom:none; }
.sb-item:hover{ background:var(--gray-bg); }

.sb-item.active{
    background:var(--red-light);
    color:var(--red);
    font-weight:600;
}

.sb-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--gray-mid);
    flex-shrink:0;
    transition:background .12s;
}

.sb-item.active .sb-dot{ background:var(--red); }

.merk-chips{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding:12px 14px;
}

.merk-chip{
    padding:4px 11px;
    border-radius:20px;
    border:1px solid var(--border);
    font-size:12px;
    font-weight:500;
    text-decoration:none;
    color:var(--black);
    transition:all .12s;
    background:var(--white);
}

.merk-chip:hover,
.merk-chip.active{
    background:var(--red);
    color:var(--white);
    border-color:var(--red);
}

.k-main{ flex:1; min-width:0;  padding-bottom:40px;}

.sec-bar{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    padding:12px 16px;
    background:var(--white);
    border-radius:var(--radlg);
    border:1px solid var(--border);
    border-left:4px solid var(--red);
    margin-bottom:14px;
}

.sec-bar h2{
    font-size:15px;
    font-weight:700;
    color:var(--black);
    flex:1;
    min-width:120px;
}

.pill{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:3px 10px;
    border-radius:20px;
    font-size:11.5px;
    font-weight:600;
    background:var(--gray-lt);
    color:var(--gray-txt);
}

.sort-sel{
    padding:5px 10px;
    border-radius:6px;
    border:1px solid var(--border);
    font-family:'Poppins',sans-serif;
    font-size:12.5px;
    background:var(--gray-bg);
    color:var(--black);
    cursor:pointer;
    outline:none;
}

.prod-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
    gap:12px;
    margin-bottom:20px;
}

.prod-card{
    background:var(--white);
    border-radius:var(--radlg);
    border:1px solid var(--border);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:transform .14s, box-shadow .14s, border-color .14s;
}

.prod-card:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 24px rgba(0,0,0,0.09);
    border-color:var(--red);
}

.prod-img{
    aspect-ratio:1/1;
    background:var(--gray-lt);
    overflow:hidden;
    position:relative;
}

.prod-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s;
}

.prod-card:hover .prod-img img{ transform:scale(1.06); }

.prod-no-img{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.prod-no-img svg{
    width:36px;
    height:36px;
    stroke:var(--gray-mid);
    fill:none;
    stroke-width:1.5;
}

.prod-badge{
    position:absolute;
    bottom:7px;
    left:7px;
    background:rgba(17,17,17,0.75);
    color:var(--white);
    font-size:9px;
    font-weight:700;
    padding:2px 8px;
    border-radius:20px;
    text-transform:uppercase;
    letter-spacing:0.06em;
}

.prod-body{
    padding:10px 12px 0;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.prod-merk{
    font-size:9.5px;
    font-weight:700;
    color:var(--red);
    text-transform:uppercase;
    letter-spacing:0.09em;
}

.prod-nama{
    font-size:13px;
    font-weight:600;
    line-height:1.4;
    color:var(--black);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.prod-model{ font-size:11px; color:var(--gray-txt); }

.prod-foot{
    display:flex;
    gap:6px;
    padding:10px 12px 12px;
    margin-top:auto;
}

.btn-det{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:7px 6px;
    border-radius:6px;
    font-size:12px;
    font-weight:600;
    text-decoration:none;
    border:1.5px solid var(--border);
    color:var(--black);
    background:var(--white);
    transition:all .12s;
}

.btn-det:hover{ border-color:var(--black); background:var(--gray-bg); }

.btn-wa{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:7px 10px;
    border-radius:6px;
    font-size:12px;
    font-weight:600;
    text-decoration:none;
    background:#25D366;
    color:var(--white);
    transition:background .12s;
    white-space:nowrap;
}

.btn-wa:hover{ background:#1DAB55; }
.btn-wa svg{ width:13px; height:13px; fill:var(--white); flex-shrink:0; }

.paket-sep{
    display:flex;
    align-items:center;
    gap:14px;
    margin:32px 0 20px;
}

.paket-sep::before,
.paket-sep::after{
    content:'';
    flex:1;
    height:1px;
    background:var(--border);
}

.paket-sep-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 18px;
    background:var(--black);
    color:var(--white);
    border-radius:20px;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.1em;
    text-transform:uppercase;
    white-space:nowrap;
    border:2px solid var(--red);
}

.paket-sep-label svg{
    width:12px;
    height:12px;
    stroke:var(--red);
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.paket-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(275px, 1fr));
    gap:14px;
    margin-bottom:20px;
}

.paket-card{
    background:var(--white);
    border-radius:var(--radlg);
    border:1px solid var(--border);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:transform .14s, box-shadow .14s;
}

.paket-card:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 28px rgba(0,0,0,0.09);
}

.paket-img {
    aspect-ratio: 1/1;    /* ← jadi kotak */
    overflow: hidden;
    background: var(--gray-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.paket-img img{
    width:100%; height:100%;
    object-fit:cover; display:block;
    transition:transform .35s ease;
}

.paket-card:hover .paket-img img{ transform:scale(1.05); }

.paket-no-img{
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    background:#f2f2f2;
}

.paket-no-img svg{
    width:38px; height:38px;
    stroke:#bbb; fill:none;
    stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}

.paket-top{
    background:var(--black);
    padding:20px 20px 18px;
    border-bottom:3px solid var(--red);
}

.paket-badge{
    display:inline-block;
    padding:3px 10px;
    border-radius:20px;
    font-size:9.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.1em;
    margin-bottom:10px;
    background:var(--red);
    color:var(--white);
}

.paket-badge.mm{ background:#1155BB; }

.paket-nama{
    font-size:17px;
    font-weight:700;
    color:var(--white);
    line-height:1.3;
}

.paket-body{
    padding:16px 18px 14px;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.paket-desc{
    font-size:12.5px;
    color:var(--gray-txt);
    line-height:1.65;
    flex:1;
}

.harga-box{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    background:var(--red-light);
    border-radius:var(--rad);
    border:1px solid #F5CCCC;
}

.harga-label{
    font-size:10.5px;
    font-weight:600;
    color:var(--red);
    white-space:nowrap;
}

.harga-val{
    font-size:19px;
    font-weight:700;
    color:var(--red);
    line-height:1;
}

.harga-val small{
    font-size:11px;
    font-weight:400;
    color:#AA5555;
}

.paket-foot{
    display:flex;
    gap:8px;
    padding:0 18px 16px;
}

.btn-paket{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:9px;
    background:var(--black);
    color:var(--white);
    border-radius:7px;
    font-size:12.5px;
    font-weight:600;
    text-decoration:none;
    transition:background .12s;
}

.btn-paket:hover{ background:#2A2A2A; }

.btn-paket-wa{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:9px 14px;
    background:#25D366;
    color:var(--white);
    border-radius:7px;
    font-size:12.5px;
    font-weight:600;
    text-decoration:none;
    transition:background .12s;
}

.btn-paket-wa:hover{ background:#1DAB55; }
.btn-paket-wa svg{ width:14px; height:14px; fill:var(--white); }

.empty{
    text-align:center;
    padding:52px 24px;
    background:var(--white);
    border-radius:var(--radlg);
    border:1.5px dashed var(--border);
}

.empty svg{
    width:44px;
    height:44px;
    stroke:var(--gray-mid);
    fill:none;
    stroke-width:1.5;
    display:block;
    margin:0 auto 14px;
}

.empty h3{ font-size:15px; font-weight:600; margin-bottom:6px; }
.empty p { font-size:13px; color:var(--gray-txt); }

.pag-wrap{ display:flex; justify-content:center; padding:8px 0 24px; }
.pag-wrap ul.pagination{ list-style:none; display:flex; gap:4px; }

.pag-wrap .page-item a.page-link,
.pag-wrap .page-item.active a.page-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    height:36px;
    border-radius:7px;
    font-size:13px;
    font-weight:500;
    text-decoration:none;
    border:1px solid var(--border);
    background:var(--white);
    color:var(--black);
    transition:all .12s;
    padding:0 8px;
}

.pag-wrap .page-item a.page-link:hover{ background:var(--red-light); border-color:var(--red); color:var(--red); }
.pag-wrap .page-item.active a.page-link{ background:var(--red); border-color:var(--red); color:var(--white); }

/* =======================================================
   DETAIL PRODUK
   ======================================================= */
.det-breadcrumb-bar{
    background:var(--dark2, #141414);
    border-bottom:1px solid var(--border, rgba(201,168,76,.18));
    padding:12px 0;
}

.det-breadcrumb{
    display:flex;
    gap:8px;
    align-items:center;
    list-style:none;
    margin:0;
    padding:0;
    font-size:.82rem;
    color:var(--muted, #888);
    flex-wrap:wrap;
}

.det-breadcrumb a{ color:var(--muted, #888); text-decoration:none; transition:color .2s; }
.det-breadcrumb a:hover{ color:var(--red, #c9a84c); }
.det-sep  { opacity:.4; }
.det-active{ color:var(--text, #e8e4dc); }

.det-section{
    padding:44px 0 60px;
    background:var(--dark, #0d0d0d);
}

.det-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:start;
}

.det-gallery-wrap{
    position:sticky;
    top:80px;
}

.det-gallery-main{
    aspect-ratio:1;
    background:var(--dark2, #141414);
    border:1px solid var(--border, rgba(201,168,76,.18));
    border-radius:var(--radius, 10px);
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:12px;
    position:relative;
    cursor:zoom-in;
}

.det-gallery-main img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:16px;
    transition:opacity .2s, transform .25s ease;
}

.det-gallery-main img:hover{ transform:scale(1.015); }

.det-no-photo{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:#333;
    font-size:.8rem;
}

.det-zoom-hint{
    position:absolute;
    bottom:10px;
    right:10px;
    background:rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
    border-radius:6px;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    backdrop-filter:blur(6px);
    transition:background .2s, transform .15s;
    padding:0;
    z-index:2;
    pointer-events:auto;
}

.det-zoom-hint:hover{
    background:rgba(231,25,31,.75);
    transform:scale(1.1);
}

.det-thumb-scroller-wrap{
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:10px;
    position:relative;
}

.det-thumb-track-outer{
    flex:1;
    overflow:hidden;
    position:relative;
}

.det-gallery-thumbs{
    display:flex;
    gap:8px;
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    will-change:transform;
    flex-wrap:nowrap;
    padding:3px 2px;
}

.det-thumb-btn{
    flex-shrink:0;
    width:72px;
    height:72px;
    border-radius:8px;
    overflow:hidden;
    border:2px solid transparent;
    cursor:pointer;
    background:var(--dark2, #141414);
    transition:border-color .2s, transform .2s, box-shadow .2s;
    padding:0;
    outline:none;
}

.det-thumb-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(0,0,0,.4);
}

.det-thumb-btn img{ width:100%; height:100%; object-fit:cover; display:block; }

.det-thumb-btn.active{ border-color:#e7191f; box-shadow:0 0 0 3px rgba(231,25,31,.25); }
.det-thumb-btn:hover:not(.active){ border-color:rgba(255,255,255,.25); }

.det-thumb-arrow{
    flex-shrink:0;
    width:34px;
    height:72px;
    background:var(--dark3, #1c1c1c);
    border:1px solid rgba(255,255,255,.1);
    border-radius:8px;
    color:#ccc;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s, color .2s, border-color .2s, transform .15s;
    padding:0;
}

.det-thumb-arrow:hover{
    background:#e7191f;
    border-color:#e7191f;
    color:#fff;
    transform:scale(1.05);
}

.det-thumb-arrow:active{ transform:scale(.95); }

.det-thumb-arrow:disabled{ opacity:.3; cursor:default; }
.det-thumb-arrow:disabled:hover{
    background:var(--dark3, #1c1c1c);
    border-color:rgba(255,255,255,.1);
    color:#ccc;
    transform:none;
}

.det-thumb-counter{
    text-align:center;
    font-size:.74rem;
    color:var(--muted, #888);
    margin-top:7px;
    letter-spacing:.03em;
}

.det-thumb-counter span{ color:var(--text, #e8e4dc); font-weight:600; }

.det-lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.92);
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    backdrop-filter:blur(12px);
}

.det-lightbox.det-lb-open{
    display:flex;
    animation:det-lb-fadein .2s ease;
}

@keyframes det-lb-fadein{
    from{ opacity:0; }
    to  { opacity:1; }
}

.det-lightbox.det-lb-hiding{
    animation:det-lb-fadeout .18s ease forwards;
}

@keyframes det-lb-fadeout{
    from{ opacity:1; }
    to  { opacity:0; }
}

.det-lb-img-wrap{
    max-width:90vw;
    max-height:88vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.det-lb-img-wrap img{
    max-width:90vw;
    max-height:88vh;
    object-fit:contain;
    border-radius:8px;
    box-shadow:0 24px 64px rgba(0,0,0,.7);
    display:block;
    transition:opacity .2s;
    user-select:none;
}

.det-lb-close{
    position:absolute;
    top:18px;
    right:20px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.2);
    color:#fff;
    border-radius:50%;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .2s, transform .15s;
    padding:0;
    z-index:2;
}

.det-lb-close:hover{
    background:#e7191f;
    border-color:#e7191f;
    transform:scale(1.1) rotate(90deg);
}

.det-lb-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    color:#fff;
    border-radius:10px;
    width:48px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .2s, transform .15s;
    padding:0;
    backdrop-filter:blur(6px);
    z-index:2;
}

.det-lb-nav:hover{
    background:rgba(231,25,31,.75);
    border-color:#e7191f;
    transform:translateY(-50%) scale(1.08);
}

.det-lb-prev{ left:18px; }
.det-lb-next{ right:18px; }

.det-lb-counter{
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    background:rgba(0,0,0,.5);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    font-size:.78rem;
    font-weight:600;
    padding:5px 14px;
    border-radius:20px;
    letter-spacing:.05em;
    backdrop-filter:blur(6px);
}

.det-merk{
    font-size:.75rem;
    font-weight:700;
    color:var(--red, #c9a84c);
    text-transform:uppercase;
    letter-spacing:.1em;
    margin-bottom:4px;
}

.det-nama{
    font-size:clamp(1.4rem, 2.5vw, 2rem);
    font-weight:700;
    color:var(--text, #e8e4dc);
    line-height:1.2;
    margin:0 0 8px;
}

.det-model{
    font-family:'Courier New', monospace;
    font-size:.85rem;
    color:var(--muted, #888);
    background:var(--dark3, #1c1c1c);
    display:inline-block;
    padding:3px 10px;
    border-radius:4px;
    margin-bottom:20px;
    letter-spacing:.04em;
}

.det-badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:24px;
}

.det-badge{
    font-size:.75rem;
    font-weight:600;
    padding:4px 12px;
    border-radius:20px;
    border:1px solid var(--border, rgba(201,168,76,.18));
    color:var(--red, #c9a84c);
    background:rgba(201,168,76,.08);
    text-transform:capitalize;
}

.det-divider{
    height:1px;
    background:var(--border, rgba(201,168,76,.18));
    margin:20px 0;
}

.det-desc-title{
    font-size:.8rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--muted, #888);
    margin-bottom:10px;
}

.det-desc{
    color:#bbb;
    font-size:.92rem;
    line-height:1.7;
    white-space:pre-line;
}

.det-spec-table{
    width:100%;
    border-collapse:collapse;
    font-size:.88rem;
    margin-top:10px;
}

.det-spec-table tr{ border-bottom:1px solid rgba(255,255,255,.05); }
.det-spec-table tr:last-child{ border-bottom:none; }

.det-spec-table td{
    padding:9px 4px;
    color:var(--muted, #888);
    vertical-align:top;
}

.det-spec-table td:first-child{
    color:var(--text, #e8e4dc);
    font-weight:500;
    width:40%;
    padding-right:12px;
}

.det-stok-ada  { color:#4caf50; font-weight:600; }
.det-stok-habis{ color:#f44336; font-weight:600; }

.det-cta-box{
    background:var(--dark3, #1c1c1c);
    border:1px solid var(--border, rgba(201,168,76,.18));
    border-radius:var(--radius, 10px);
    padding:20px;
    margin-top:28px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.det-cta-label{
    font-size:.8rem;
    color:var(--muted, #888);
}

.det-cta-label strong{
    color:var(--text, #e8e4dc);
    font-size:.92rem;
    display:block;
    margin-top:2px;
}

.det-btn-wa{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:#25D366;
    color:#fff;
    font-weight:700;
    font-size:.95rem;
    padding:13px 24px;
    border-radius:8px;
    text-decoration:none;
    transition:background .2s, transform .1s;
}

.det-btn-wa:hover { background:#1ebe5a; }
.det-btn-wa:active{ transform:scale(.98); }

.det-related-section{
    padding:0 0 60px;
    background:var(--dark, #0d0d0d);
}

.det-related-title{
    font-size:1rem;
    font-weight:700;
    color:var(--text, #e8e4dc);
    margin:0 0 20px;
    padding-top:32px;
    border-top:1px solid var(--border, rgba(201,168,76,.18));
}

.det-related-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:16px;
}

.det-related-card{
    background:var(--dark2, #141414);
    border:1px solid var(--border, rgba(201,168,76,.18));
    border-radius:var(--radius, 10px);
    overflow:hidden;
    text-decoration:none;
    transition:transform .2s, border-color .2s;
}

.det-related-card:hover{
    transform:translateY(-4px);
    border-color:var(--red, #c9a84c);
}

.det-rc-img{ aspect-ratio:4/3; background:#111; overflow:hidden; }
.det-rc-img img{ width:100%; height:100%; object-fit:cover; }

.det-rc-no-img{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#111;
}

.det-rc-body  { padding:10px 12px 12px; }
.det-rc-merk  { font-size:.68rem; color:var(--red, #c9a84c); font-weight:700; text-transform:uppercase; }
.det-rc-nama  {
    font-size:.83rem;
    color:var(--text, #e8e4dc);
    font-weight:600;
    margin:2px 0 0;
    line-height:1.3;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

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

/* ---- Hero mobile ---- */
@media(max-width:600px){
    .hero-btn{ width:38px; height:38px; font-size:16px; }
    .hero-btn-prev{ left:10px; }
    .hero-btn-next{ right:10px; }
}

/* ---- Social tablet ---- */
@media(max-width:900px){
    .social-grid{ max-width:100%; }
    .social-group.fb-full{ max-width:480px; }
    .social-cards{ grid-template-columns:repeat(3,1fr); gap:10px; }
    .social-cards.cards-2{ grid-template-columns:repeat(2,1fr); max-width:66%; margin:0 auto; }
    .social-cards.cards-1{ grid-template-columns:1fr; max-width:33%; margin:0 auto; }
    .social-row-center{ max-width:66%; margin:30px auto 0; }
}

/* ---- Social mobile ---- */
@media(max-width:600px){
    .social-grid{ max-width:360px; margin:0 auto; gap:24px; }
    .social-group.fb-full{ max-width:360px; margin:0 auto; }
    .social-cards,
    .social-cards.cards-2,
    .social-cards.cards-1{ grid-template-columns:1fr; max-width:360px; margin:0 auto; gap:10px; }
    .social-card{ aspect-ratio:2/1; max-width:360px; margin:0 auto; width:100%; }
    .social-row-center{ grid-template-columns:1fr; max-width:360px; margin:30px auto 0; gap:10px; }
    .social-row-center .social-card{ max-width:360px; }
    .wa-btn{ font-size:12px; padding:10px 12px; gap:6px; }
    .wa-btn img{ width:18px; height:18px; }
    .wa-float-wrap{ bottom:18px; right:16px; }
    .wa-float-btn{ width:52px; height:52px; }
    .wa-float-btn::before{ width:52px; height:52px; }
}

/* ---- Gallery / YT ---- */
@media(max-width:900px){
    .yt-slider{ grid-template-columns:1fr; max-width:520px; }
    .yt-shorts-grid{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:600px){
    .yt-slider{ max-width:100%; }
    .yt-shorts-grid{ grid-template-columns:repeat(2,1fr); max-width:100%; gap:12px; }
    .yt-short-card{ max-width:170px; }
}

/* ---- Testimonial ---- */
@media(max-width:992px){ .testimonial-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .testimonial-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; } }

/* ---- Article ---- */
@media(max-width:1100px){ .article-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){
    .article-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
    .article-img-wrap img{ height:200px; }
}

/* ---- Footer ---- */
@media(max-width:900px){ .main-footer .footer-inner{ grid-template-columns:repeat(2,1fr) !important; } }
@media(max-width:600px){
    .main-footer .footer-inner{ grid-template-columns:1fr !important; }
    .footer-bottom-inner{ flex-direction:column; gap:4px; }
    .footer-bottom-divider{ display:none; }
}
@media(max-width:480px){
    .main-footer .footer-inner{
        margin-left:0;
        padding-left:18px !important;
        padding-right:18px !important;
        width:100%;
    }
    .footer-desc{ max-width:350px; text-align:justify; }
    .footer-logo-title{ text-align:justify; }
}

/* ---- Product ---- */
@media(max-width:992px){ .product-slider{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:768px){
    .product-slider{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
    .product-card img{ height:240px; }
}

/* ---- Global tablet / mobile ---- */
@media(max-width:992px){
    .hero-content h1{ font-size:48px; }
    .stats-grid,
    .why-grid,
    .product-slider,
    .social-grid,
    .gallery-grid,
    .testimonial-grid,
    .article-grid{ grid-template-columns:1fr 1fr; }
}

@media(max-width:768px){
    .navbar.active{ right:0; }
    .navbar ul{ flex-direction:column; }
    .menu-toggle{ display:block; }
    .hero-content h1{ font-size:38px; }
    .hero-buttons{ flex-direction:column; }
    .stats-grid,
    .why-grid,
    .product-slider,
    .social-grid,
    .gallery-grid,
    .testimonial-grid,
    .article-grid{ grid-template-columns:1fr; }
    .section-title h2{ font-size:30px; }
}

/* ---- Header tablet + mobile ---- */
@media(max-width:1024px){
    .main-header{ padding:12px 0; background:transparent; }
    .container{ width:100%; max-width:100%; padding-left:18px; padding-right:18px; }
    .menu-toggle{ display:block; margin-left:auto; }
    .navbar{
        position:fixed;
        top:76px;
        right:-100%;
        width:100%;
        max-width:220px;
        height:calc(516px);
        background:#434343;
        padding:35px 25px;
        transition:.4s ease;
        z-index:9999;
        border-radius:20px;
    }
    .navbar.active{ right:0; }
    .navbar ul{ flex-direction:column; align-items:center; gap:22px; }
    .navbar ul li a{ font-size:17px; white-space:nowrap; text-align:center; }
}

@media(max-width:480px){
    .container{ padding-left:14px; padding-right:14px; }
    .logo-wrap{ gap:8px; }
    .logo-wrap img{ width:38px; height:38px; }
    .logo-wrap h2{ font-size:13px; letter-spacing:1.5px; }
    .navbar{ top:70px; max-width:220px; height:calc(510px); border-radius:20px; }
}

/* ---- Contact ---- */
@media(max-width:768px){
    .contact-hero{ min-height:auto; overflow:hidden; }
    .contact-hero-inner{ flex-direction:column-reverse; padding-top:0; padding-bottom:50px; gap:0; overflow:visible; }
    .contact-hero-content{ flex:none; max-width:100%; text-align:center; padding:0 20px 40px; }
    .contact-hero-content p{ max-width:100%; margin:0 auto; text-align:center; margin-bottom:-90px; }
    .contact-hero-content h1{ font-size:36px; margin-bottom:10px; }
    .contact-hero-img-wrap{ position:relative; right:auto; top:auto; transform:none; width:100%; display:flex; justify-content:center; margin-bottom:24px; overflow:visible; }
    .contact-hero-img-circle{ width:480px; height:480px; border-radius:50%; clip-path:none; margin-top:-172px; flex-shrink:0; }
    .contact-social-cards,
    .contact-social-cards-2,
    .contact-social-cards-1{ grid-template-columns:1fr; max-width:360px; margin:0 auto; }
    .contact-info-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
}

@media(max-width:992px){
    .contact-wa-grid{ grid-template-columns:1fr; max-width:520px; margin:0 auto; }
    .contact-info-grid{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:600px){
    .contact-hero-content h1{ font-size:32px; }
    .contact-wa-grid{ max-width:100%; }
    .contact-wa-card{ padding:20px 16px; gap:14px; }
}

/* ---- Media page ---- */
@media(max-width:1100px){
    .media-photo-grid{ grid-template-columns:repeat(3,1fr); }
    .media-article-grid{ grid-template-columns:repeat(2,1fr) !important; }
}

@media(max-width:900px){
    .media-hero-content h1{ font-size:44px; }
    .media-photo-grid{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:600px){
    .media-hero-content h1{ font-size:32px; }
    .media-anchor-nav{ gap:8px; }
    .media-anchor-btn{ padding:10px 16px; font-size:13px; }
    .media-photo-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
    .media-article-grid{ grid-template-columns:1fr !important; max-width:420px; margin:0 auto; }
}

/* ---- About page ---- */
@media(max-width:1024px){
    .about-hero-img-circle{ width:380px; height:380px; }
    .about-hero-img-wrap{ right:-60px; }
    .about-hero-content{ flex:0 0 58%; max-width:58%; }
    .about-values-grid{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:900px){
    .about-hero-inner{ flex-direction:column-reverse; padding-top:30px; margin-bottom: -60px; }
    .about-hero-content{ flex:none; max-width:100%; text-align:center; }
    .about-hero-content > p{ max-width:100%; margin:0 auto 32px; }
    .about-hero-stats{ justify-content:center; }
    .about-hero-img-wrap{ position:relative; right:auto; top:auto; transform:none; margin-bottom:32px; }
    .about-hero-img-circle{
        width:360px;
        height:360px;
        max-width:90vw;
        max-height:90vw;
        margin-bottom: -30px;
    }
    .about-story-grid{ grid-template-columns:1fr; }
    .about-story-imgs{ height:340px; }
    .about-visi-grid{ grid-template-columns:1fr; }
    .about-branch-grid{ grid-template-columns:1fr; max-width:480px; }
    .about-cta-inner{ flex-direction:column; text-align:center; }
    .about-cta-btns{ justify-content:center; }
}

@media(max-width:600px){
    .about-hero-content h1{ font-size:36px; }
    .about-values-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
    .about-team-grid{ grid-template-columns:1fr; max-width:380px; }
    .about-story-imgs{ height:280px; }
}

/* ---- Katalog ---- */
@media(max-width:960px){
    .k-wrap{ padding:14px 16px; }
    .k-sidebar{ display:none; }
    .k-topbar{ padding:0 16px; gap:12px; }
    .k-tabs{ display:none; }
    .prod-grid{ grid-template-columns:repeat(auto-fill, minmax(148px, 1fr)); gap:10px; }
    .paket-grid{ grid-template-columns:1fr; }
}

@media(max-width:540px){
    .prod-grid{ grid-template-columns:repeat(2,1fr); gap:8px; }
    .k-logo-text{ display:none; }
    .k-search-form{ max-width:100%; }
}

/* ---- Detail produk ---- */
@media(max-width:768px){ .det-grid{ grid-template-columns:1fr; gap:28px; } }
@media(max-width:540px){
    .det-thumb-btn{ width:60px; height:60px; }
    .det-thumb-arrow{ height:60px; width:30px; }
    .det-lb-nav{ width:38px; height:52px; }
    .det-lb-prev{ left:6px; }
    .det-lb-next{ right:6px; }
}

/* =====================================================
   ARTIKEL DETAIL — Audio Mobil Jakarta
   Tambahkan ke style.css atau load terpisah
   ===================================================== */

/* ─── HERO ─────────────────────────────────────────── */
.art-hero {
    position: relative;
    min-height: 520px;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a0000 50%, #2a0000 100%);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.art-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 0;
}

.art-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.35) 0%,
        rgba(0,0,0,.6)  50%,
        rgba(0,0,0,.88) 100%
    );
    z-index: 1;
}

.art-hero-content {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    padding: 140px 0 60px;
}

/* Breadcrumb */
.art-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.art-breadcrumb li {
    font-size: 12px;
    color: rgba(255,255,255,.5);
    font-weight: 500;
}

.art-breadcrumb li a {
    color: rgba(255,255,255,.6);
    text-decoration: none;
    transition: color .2s;
}

.art-breadcrumb li a:hover { color: #e7191f; }
.art-breadcrumb .sep { color: rgba(255,255,255,.3); }

/* Tag kategori */
.art-hero-tag {
    display: inline-block;
    background: rgba(231,25,31,.2);
    border: 1px solid rgba(231,25,31,.5);
    color: #ff6b6b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 18px;
}

/* Judul artikel */
.art-hero-title {
    font-size: 42px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 24px;
    max-width: 820px;
}

/* Meta info */
.art-hero-meta {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.art-meta-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: rgba(255,255,255,.6);
    font-weight: 500;
}

.art-meta-item svg {
    stroke: rgba(231,25,31,.8);
    flex-shrink: 0;
}


/* ─── BODY SECTION ──────────────────────────────────── */
.art-body-section {
    overflow: visible;
    background: #f4f4f6;
    padding: 60px 0 80px;
}

.art-body-inner {
    width: 90%;
    max-width: 1800px;
    margin: 0 auto;
    text-align: justify;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: flex-start;
}


/* ─── KONTEN ARTIKEL ────────────────────────────────── */
.art-content-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
    border: 1px solid rgba(0,0,0,.055);
    padding: 40px 44px;
}

/* Excerpt / intro block */
.art-excerpt-block {
    background: linear-gradient(135deg, rgba(231,25,31,.06), rgba(231,25,31,.02));
    border-left: 4px solid #e7191f;
    border-radius: 0 12px 12px 0;
    padding: 18px 22px;
    margin-bottom: 32px;
}

.art-excerpt-block p {
    font-size: 15px;
    color: #444;
    line-height: 1.75;
    font-style: italic;
    margin: 0;
}

/* Konten HTML dari database */
.art-konten {
    font-size: 15px;
    color: #333;
    line-height: 1.85;
}

.art-konten h2 {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    margin: 36px 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(231,25,31,.15);
}

.art-konten h3 {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin: 28px 0 10px;
}

.art-konten p {
    margin-bottom: 18px;
}

.art-konten ul,
.art-konten ol {
    padding-left: 22px;
    margin-bottom: 18px;
}

.art-konten li {
    margin-bottom: 8px;
    line-height: 1.75;
}

.art-konten strong { color: #111; font-weight: 700; }

.art-konten a {
    color: #e7191f;
    text-decoration: underline;
    transition: opacity .2s;
}

.art-konten a:hover { opacity: .75; }

.art-konten img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 20px 0;
    display: block;
    box-shadow: 0 8px 32px rgba(0,0,0,.1);
}

.art-konten blockquote {
    border-left: 4px solid #e7191f;
    background: #fafafa;
    padding: 16px 22px;
    border-radius: 0 10px 10px 0;
    margin: 24px 0;
    font-style: italic;
    color: #555;
}

.art-konten table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 14px;
}

.art-konten table th,
.art-konten table td {
    border: 1px solid #e5e5e5;
    padding: 10px 14px;
    text-align: left;
}

.art-konten table th {
    background: #f4f4f6;
    font-weight: 700;
    color: #111;
}

.art-konten table tr:hover td { background: #fafafa; }


/* ─── FOOTER BAR (tags + share) ─────────────────────── */
.art-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #eee;
}

.art-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.art-tags-label {
    font-size: 12px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.art-tag-chip {
    display: inline-block;
    padding: 5px 14px;
    background: #f0f0f3;
    border: 1px solid #e0e0e5;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    text-decoration: none;
    transition: all .2s;
}

.art-tag-chip:hover {
    background: rgba(231,25,31,.08);
    border-color: rgba(231,25,31,.3);
    color: #e7191f;
}

.art-share {
    display: flex;
    align-items: center;
    gap: 10px;
}

.art-share-label {
    font-size: 12px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.art-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-decoration: none;
    transition: transform .22s, box-shadow .22s;
}

.art-share-btn:hover { transform: translateY(-3px); }

.art-share-btn.wa  { background: #25D366; color: #fff; box-shadow: 0 4px 14px rgba(37,211,102,.35); }
.art-share-btn.fb  { background: #1877F2; color: #fff; box-shadow: 0 4px 14px rgba(24,119,242,.35); }

.art-share-btn.wa:hover  { box-shadow: 0 8px 22px rgba(37,211,102,.5); }
.art-share-btn.fb:hover  { box-shadow: 0 8px 22px rgba(24,119,242,.5); }


/* ─── NAVIGASI PREV / NEXT ──────────────────────────── */
.art-nav-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
}

.art-nav-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eee;
    text-decoration: none;
    transition: all .25s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
}

.art-nav-card:hover {
    border-color: rgba(231,25,31,.3);
    box-shadow: 0 8px 28px rgba(231,25,31,.1);
    transform: translateY(-3px);
}

.art-nav-card.next { flex-direction: row-reverse; text-align: right; }

.art-nav-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(231,25,31,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s;
}

.art-nav-card:hover .art-nav-arrow {
    background: #e7191f;
}

.art-nav-card:hover .art-nav-arrow svg {
    stroke: #fff;
}

.art-nav-arrow svg { stroke: #e7191f; }

.art-nav-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 4px;
}

.art-nav-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #111;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ─── SIDEBAR ───────────────────────────────────────── */
.art-sidebar {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.art-sidebar-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
    padding: 22px;
}

.art-sidebar-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(231,25,31,.12);
}

/* Kategori chips */
.art-cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.art-cat-chip {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    background: #f0f0f3;
    border: 1px solid #e0e0e5;
    color: #555;
    text-decoration: none;
    transition: all .2s;
}

.art-cat-chip:hover,
.art-cat-chip.active {
    background: #e7191f;
    border-color: #e7191f;
    color: #fff;
}

/* Artikel terpopuler */
.art-related-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f3;
    text-decoration: none;
    transition: opacity .2s;
}

.art-related-item:last-child { border-bottom: none; padding-bottom: 0; }
.art-related-item:first-child { padding-top: 0; }
.art-related-item:hover { opacity: .75; }

.art-related-thumb {
    width: 64px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f3;
    flex-shrink: 0;
}

.art-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.art-related-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.art-related-cat {
    font-size: 10px;
    font-weight: 700;
    color: #e7191f;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.art-related-name {
    font-size: 12px;
    font-weight: 600;
    color: #222;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* CTA WhatsApp sidebar */
.art-wa-sidebar {
    background: linear-gradient(135deg, #0a0a0a, #1a0000);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    border: 1px solid rgba(231,25,31,.2);
}

.art-wa-sidebar-emoji {
    font-size: 32px;
    display: block;
    margin-bottom: 12px;
}

.art-wa-sidebar h4 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.4;
}

.art-wa-sidebar p {
    font-size: 12px;
    color: rgba(255,255,255,.55);
    line-height: 1.65;
    margin-bottom: 18px;
}

.art-wa-sidebar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: #25D366;
    color: #fff;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .25s, transform .25s, box-shadow .25s;
    box-shadow: 0 4px 16px rgba(37,211,102,.3);
}

.art-wa-sidebar-btn:hover {
    background: #1ebe5d;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37,211,102,.45);
}


/* ─── ARTIKEL LAINNYA (bottom) ──────────────────────── */
.art-more-section {
    overflow: visible;
    background: #fff;
    padding: 60px 0 80px;
    border-top: 1px solid #eee;
}

.art-more-inner {
    width: 90%;
    max-width: 1800px;
    margin: 0 auto;
}

.art-more-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.art-more-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: #111;
}

.art-more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #e7191f;
    text-decoration: none;
    transition: gap .2s;
}

.art-more-link:hover { gap: 10px; }

.art-more-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}


/* ─── RESPONSIVE ────────────────────────────────────── */
@media (max-width: 1100px) {
    .art-more-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
    .art-body-inner {
        grid-template-columns: 1fr;
    }
    .art-sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .art-wa-sidebar { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .art-hero-title { font-size: 28px; }
    .art-hero-content { padding: 120px 0 48px; }
    .art-content-card { padding: 24px 20px; }
    .art-nav-grid { grid-template-columns: 1fr; }
    .art-nav-card.next { flex-direction: row; text-align: left; }
    .art-footer-bar { flex-direction: column; align-items: flex-start; }
    .art-more-grid { grid-template-columns: 1fr; max-width: 420px; }
}

@media (max-width: 600px) {
    .art-sidebar {
        grid-template-columns: 1fr;
    }
    .art-hero-title { font-size: 24px; }
    .art-konten h2 { font-size: 18px; }
    .art-hero-meta { gap: 12px; }
    .art-more-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}

html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

img, iframe, video{
  max-width:100%;
}

@media(max-width:1024px){
  .navbar{
    right:0;
    transform:translateX(120%);
    width:220px;
    max-width:80vw;
  }

  .navbar.active{
    transform:translateX(0);
  }
}

@media(max-width:480px){
    .contact-info-section{
        padding:55px 0;
    }

    .contact-info-grid{
        grid-template-columns:1fr !important;
        gap:16px;
    }

    .contact-info-card{
        padding:26px 20px;
    }
}

@media(max-width:1024px){

    .menu-toggle{ display:block; }

    .navbar{
        position:fixed;
        top:76px;
        right:0;
        transform:translateX(120%);
        width:280px;
        max-width:85vw;
        height:auto;
        max-height:calc(100vh - 95px);
        overflow-y:auto !important;
        overflow-x:hidden !important;
        background:#434343;
        padding:25px 18px;
        transition:.4s ease;
        z-index:9999;
        border-radius:20px 0 0 20px;
    }

    .navbar.active{ transform:translateX(0); }

    .navbar ul{
        flex-direction:column;
        align-items:stretch;
        gap:4px;
    }

    .navbar ul li{
        width:100%;
        position:relative;
    }

    .navbar ul li a{
        width:100%;
        text-align:center;
    }

    .navbar .nav-dropdown{
        position:relative !important;
    }

    .navbar .nav-mega-dropdown,
    .navbar .nav-simple-dropdown{
        display:none !important;
        position:absolute !important;
        top:100% !important;
        left:0 !important;
        right:0 !important;
        transform:none !important;
        width:100% !important;
        max-width:none !important;
        max-height:60vh !important;
        overflow-y:auto !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        margin:4px 0 0 !important;
        padding:10px 8px !important;
        background:#2a2a2a !important;
        border:1px solid rgba(231,25,31,.35) !important;
        border-radius:12px !important;
        box-shadow:0 12px 32px rgba(0,0,0,.5) !important;
        z-index:99999 !important;
    }

    .navbar .nav-dropdown.open .nav-mega-dropdown,
    .navbar .nav-dropdown.open .nav-simple-dropdown{
        display:block !important;
    }

    .navbar .nav-mega-dropdown{
        display:none !important;
        grid-template-columns:1fr !important;
        gap:0 !important;
    }

    .navbar .nav-dropdown.open .nav-mega-dropdown{
        display:grid !important;
    }

    .navbar .nav-mega-dropdown a,
    .navbar .nav-simple-dropdown a{
        text-align:center !important;
        padding:10px 8px !important;
        font-size:13px !important;
        border-radius:8px !important;
        color:rgba(255,255,255,.8) !important;
    }

    .navbar .nav-mega-dropdown a:hover,
    .navbar .nav-simple-dropdown a:hover{
        background:rgba(231,25,31,.2) !important;
        color:#fff !important;
        padding-left:8px !important;
    }

    .navbar .mega-col{
        background:transparent !important;
        border:none !important;
        padding:4px 0 !important;
    }

    .navbar .mega-col h4{
        text-align:center !important;
        font-size:11px !important;
        padding:8px 0 6px !important;
        margin-bottom:4px !important;
        border-bottom:1px solid rgba(255,255,255,.1) !important;
    }
}

.mobile-dropdown-backdrop{ display:none !important; }

/* ── KATALOG MOBILE ── */
@media(max-width:960px){

    .k-topbar{
        padding:0 14px;
        gap:10px;
        flex-wrap:nowrap;
    }

    .k-logo-text{ display:none; }

    .k-search-form{
        flex:1;
        max-width:none;
    }

    /* Tombol filter mobile */
    .k-filter-toggle{
        display:flex !important;
        align-items:center;
        justify-content:center;
        gap:6px;
        padding:7px 12px;
        background:#e7191f;
        color:#fff;
        border:none;
        border-radius:8px;
        font-size:13px;
        font-weight:600;
        cursor:pointer;
        white-space:nowrap;
        flex-shrink:0;
        font-family:'Poppins',sans-serif;
    }

    .k-filter-toggle svg{
        width:16px;
        height:16px;
        stroke:#fff;
        fill:none;
        stroke-width:2;
        stroke-linecap:round;
    }

    /* Backdrop */
    .k-sidebar-backdrop{
        display:none;
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.6);
        z-index:10000;
    }

    .k-sidebar-backdrop.active{ display:block; }

    /* Sidebar drawer */
    .k-sidebar{
        display:flex !important;
        flex-direction:column;
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        width:280px !important;
        max-width:85vw !important;
        height:100vh !important;
        max-height:100vh !important;
        overflow-y:auto !important;
        background:#fff;
        z-index:10001;
        padding:16px;
        transform:translateX(-110%);
        transition:transform .35s ease;
        border-radius:0 20px 20px 0;
        box-shadow:8px 0 32px rgba(0,0,0,.2);
    }

    .k-sidebar.active{
        transform:translateX(0);
    }

    /* Header drawer */
    .k-sidebar-header{
        display:flex !important;
        align-items:center;
        justify-content:space-between;
        margin-bottom:16px;
        padding-bottom:12px;
        border-bottom:2px solid rgba(221,0,0,.15);
    }

    .k-sidebar-header-title{
        font-size:15px;
        font-weight:700;
        color:#111;
    }

    .k-sidebar-close{
        width:32px;
        height:32px;
        border-radius:50%;
        background:#f0f0f3;
        border:none;
        cursor:pointer;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:18px;
        color:#555;
        transition:background .2s;
    }

    .k-sidebar-close:hover{
        background:#e7191f;
        color:#fff;
    }

    .k-wrap{
        padding:14px 14px;
    }
}

@media(max-width:768px){
    .wa-float-wrap{
        bottom: 55px;
        right: 32px;
    }
}

/* =====================
   FIX DETAIL PRODUK MOBILE
   ===================== */

/* Background gelap agar teks putih kelihatan */
.det-section {
    background: #0d0d0d;
}

.det-breadcrumb-bar {
    background: #141414;
    padding: 12px 0;
}

.det-related-section {
    background: #0d0d0d;
}

/* Grid 1 kolom di mobile */
@media (max-width: 768px) {
    .det-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Lepas sticky di mobile */
    .det-gallery-wrap {
        position: static;
        top: auto;
    }

    /* Gambar utama lebih kecil */
    .det-gallery-main {
        max-height: 320px;
    }

    /* Thumbnail lebih kecil */
    .det-thumb-btn {
        width: 56px;
        height: 56px;
    }

    .det-thumb-arrow {
        height: 56px;
        width: 28px;
    }

    /* Nama produk lebih kecil */
    .det-nama {
        font-size: 1.4rem;
    }

    /* CTA padding lebih compact */
    .det-cta-box {
        padding: 16px;
    }

    /* Produk terkait 2 kolom */
    .det-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 420px) {
    .det-nama {
        font-size: 1.2rem;
    }

    .det-related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

.contact-social-cards-4 {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1320px;
    gap: 4px;
    margin-left: -5%;
    margin-right: -5%;
}

/* Team grid 3 kolom */
.about-team-grid-3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 960px;
    margin: 20px auto 0;
}

/* Divider role */
.about-role-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 640px;
    margin: 52px auto 32px;
}

.about-role-divider::before,
.about-role-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, .09);
}

.about-role-divider-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 20px;
    background: #111;
    color: #fff;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
    border: 2px solid #e7191f;
}

/* Staff grid (marketing/admin) */
.about-staff-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 640px;
    margin: 0 auto;
}

.about-staff-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 16px;
    padding: 16px 18px;
    border: 1px solid rgba(0, 0, 0, .07);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.about-staff-card:hover {
    transform: translateY(-4px);
    border-color: rgba(231, 25, 31, .2);
    box-shadow: 0 12px 32px rgba(231, 25, 31, .08);
}

.about-staff-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.about-staff-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-staff-info { flex: 1; min-width: 0; }

.about-staff-badge {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #e7191f;
    background: rgba(231, 25, 31, .07);
    border: 1px solid rgba(231, 25, 31, .15);
    padding: 2px 9px;
    border-radius: 10px;
    margin-bottom: 4px;
}

.about-staff-info h4 {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    margin: 0 0 2px;
}

.about-staff-info p {
    font-size: 11.5px;
    color: #888;
    margin: 0;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =============================================
   SECTION TEKNISI
   ============================================= */
.about-teknisi-section {
    background: #0d0d0d;
    padding: 100px 0;
}

.about-teknisi-section .section-title span { color: rgba(255,255,255,.45); }
.about-teknisi-section .section-title h2 { color: #fff; }

.about-teknisi-grid {
display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1060px;
    margin: 32px auto 0;
}

.about-teknisi-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.about-teknisi-card:hover {
    transform: translateY(-8px);
    border-color: rgba(231,25,31,.4);
    box-shadow: 0 20px 52px rgba(0,0,0,.45);
}

.about-teknisi-img-wrap {
    position: relative;
    overflow: hidden;
}

.about-teknisi-img-wrap img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    transition: transform .45s ease, filter .45s ease;
    filter: brightness(.88);
}

.about-teknisi-card:hover .about-teknisi-img-wrap img {
    transform: scale(1.06);
    filter: brightness(1);
}

.about-teknisi-num {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #e7191f;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.about-teknisi-info { padding: 20px 20px 22px; }

.about-teknisi-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.about-teknisi-specs span {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,.6);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    padding: 3px 10px;
    border-radius: 10px;
}

.about-teknisi-info h3 {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
}

.about-teknisi-role {
    display: block;
    font-size: 11px;
    color: #e7191f;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.about-teknisi-exp {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,.45);
}

.about-teknisi-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e7191f;
    flex-shrink: 0;
}

/* Responsive */
@media(max-width: 768px) {
    .about-team-grid-3 { grid-template-columns: 1fr; max-width: 380px; }
    .about-staff-grid { grid-template-columns: 1fr; max-width: 380px; }
    .about-teknisi-grid { grid-template-columns: 1fr; max-width: 380px; }
}

@media(max-width: 992px) {
    .about-team-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================
   TEKNISI CARD — hover hint
   ============================================= */
.about-teknisi-hover {
    position: absolute;
    inset: 0;
    background: rgba(231,25,31,0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease, background .25s ease;
}

.about-teknisi-card:hover .about-teknisi-hover {
    opacity: 1;
    transform: translateY(0);
    background: rgba(231,25,31,.2);
}

.about-teknisi-card { cursor: pointer; flex: 0 0 calc(25% - 21px);
    max-width: 480px;
    min-width: 320px; }

/* =============================================
   MODAL PROFIL TEKNISI
   ============================================= */
.teknisi-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.88);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(6px);
}

.teknisi-modal-backdrop.open {
    display: flex;
}

.teknisi-modal {
    background: #111;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    width: 100%;
    max-width: 580px;
    max-height: 88vh;
    overflow-y: auto;
    position: relative;
    animation: tmSlideIn .3s cubic-bezier(.25,.8,.25,1);
}

@keyframes tmSlideIn {
    from { opacity: 0; transform: translateY(24px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.teknisi-modal::-webkit-scrollbar { width: 4px; }
.teknisi-modal::-webkit-scrollbar-thumb { background: rgba(231,25,31,.4); border-radius: 4px; }

.teknisi-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
    z-index: 2;
}

.teknisi-modal-close:hover { background: #e7191f; border-color: #e7191f; }

.teknisi-modal-hero {
    display: flex;
    gap: 20px;
    padding: 28px 24px 20px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.teknisi-modal-photo {
    width: 90px;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: #1a0000;
}

.teknisi-modal-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.teknisi-modal-identity { flex: 1; min-width: 0; padding-top: 4px; }

.teknisi-modal-num {
    display: inline-block;
    background: #e7191f;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.teknisi-modal-name {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    line-height: 1.2;
}

.teknisi-modal-role {
    display: block;
    font-size: 11px;
    color: #e7191f;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.teknisi-modal-exp {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,.4);
}

.teknisi-modal-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #e7191f;
    flex-shrink: 0;
}

.teknisi-modal-body { padding: 20px 24px 28px; }

.teknisi-modal-section { margin-bottom: 22px; }
.teknisi-modal-section:last-child { margin-bottom: 0; }

.teknisi-modal-sec-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.3);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.teknisi-spec-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.teknisi-spec-tags span {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,.65);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    padding: 5px 12px;
    border-radius: 20px;
}

.teknisi-spec-tags span.utama {
    color: #ff6b6b;
    background: rgba(231,25,31,.1);
    border-color: rgba(231,25,31,.25);
}

.teknisi-cert-list { display: flex; flex-direction: column; gap: 8px; }

.teknisi-cert-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,.04);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.06);
}

.teknisi-cert-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(231,25,31,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.teknisi-cert-icon svg {
    width: 14px;
    height: 14px;
    stroke: #e7191f;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.teknisi-cert-name {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.teknisi-cert-year {
    font-size: 11px;
    color: rgba(255,255,255,.3);
}

.teknisi-porto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.teknisi-porto-grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    border: 1px solid rgba(255,255,255,.07);
    transition: transform .25s ease;
    cursor: pointer;
}

.teknisi-porto-grid img:hover { transform: scale(1.04); }


/* Responsive modal */
@media(max-width: 600px) {
    .teknisi-modal-hero { flex-direction: column; align-items: center; text-align: center; }
    .teknisi-modal-exp { justify-content: center; }
    .teknisi-modal-photo { width: 100px; height: 133px; }
    .teknisi-porto-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── KATALOG MOBILE FIX ── */
@media(max-width:960px){

    /* Hapus margin-left dari sidebar yang sudah hidden */
    .k-wrap{
        margin-left: 0 !important;
        padding: 14px 14px;
        width: 100%;
    }

    /* Main konten full width */
    .k-main{
        width: 100%;
        min-width: 0;
    }

    /* sec-bar full width */
    .sec-bar{
        width: 100%;
        box-sizing: border-box;
    }

    /* Grid 2 kolom yang seimbang */
    .prod-grid{
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Paket 1 kolom */
    .paket-grid{
        grid-template-columns: 1fr;
    }
}

@media(max-width:540px){
    .prod-grid{
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* Logo disembunyikan, search full */
    .k-logo-text{ display: none; }
    .k-search-form{ max-width: 100%; }

    /* Topbar lebih compact */
    .k-topbar{
        padding: 0 10px;
        gap: 8px;
    }
}

@media(max-width: 768px) {
    .about-team-grid-3 {
        grid-template-columns: 1fr !important;
        max-width: 320px;
        margin: 20px auto 0;
    }
}

@media(max-width: 1024px) {
    /* Navbar di atas WA float saat mobile */
    .navbar {
        z-index: 10000 !important;
    }
    
    /* Kecilkan WA float button di mobile tanpa ubah tampilan */
    .wa-float-btn {
        width: 48px;
        height: 48px;
    }
    
    .wa-float-btn::before {
        width: 48px;
        height: 48px;
    }
    
    .wa-float-btn img {
        width: 26px;
        height: 26px;
    }
    
    .wa-float-wrap {
        bottom: 18px;
        right: 16px;
    }
}

@media(max-width: 600px) {
    .main-footer .footer-inner {
        text-align: center !important;
    }

    /* Brand / logo rata tengah */
    .footer-logo-wrap {
        justify-content: center;
    }

    .footer-desc {
        text-align: center !important;
        max-width: 100%;
    }

    .footer-socials {
        justify-content: center;
    }

    /* Links rata tengah */
    .main-footer .footer-links {
        align-items: center !important;
    }

    /* Contact list rata tengah */
    .main-footer .footer-contact-list {
        align-items: center !important;
    }

    .main-footer .footer-contact-item {
        justify-content: center !important;
    }

    /* Service box rata tengah */
    .footer-service-box {
        justify-content: center;
        text-align: left; /* teks di dalam box tetap kiri agar mudah dibaca */
    }

    /* Jam operasional rata tengah */
    .footer-hours-title {
        text-align: center;
    }

    .footer-hours-row {
        justify-content: center;
        gap: 20px;
    }
}

@media(max-width: 600px) {
    /* Sembunyikan kolom Menu dan Hubungi Kami */
    .main-footer .footer-inner > div:nth-child(2),
    .main-footer .footer-inner > div:nth-child(3) {
        display: none !important;
    }
    .main-footer .footer-inner > div:nth-child(4) .footer-col-title {
        display: none !important;
    }

    .main-footer .footer-inner {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 28px 0 20px !important;
    }
    .footer-service-box {
        max-width: 320px;
        margin: 0 auto;
    }
}

/* =====================
HEADER LOGIN ICON
===================== */

.header-login-btn{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:.25s ease;
    flex-shrink:0;
}

.header-login-btn:hover{
    background:rgba(231,25,31,.18);
    border-color:rgba(231,25,31,.65);
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(231,25,31,.22);
}

.header-login-btn svg{
    display:block;
}

/* Mobile */
@media (max-width: 768px){
    .nav-wrapper{
        gap:12px;
    }

    .header-login-btn{
        width:40px;
        height:40px;
        margin-left:auto;
    }

    .menu-toggle{
        display:block;
    }
}

.header-account{
    position:relative;
    flex-shrink:0;
}

.account-toggle{
    cursor:pointer;
}

.account-dropdown{
    position:absolute;
    right:0;
    top:52px;
    width:160px;
    background:rgba(8,8,8,.96);
    border:1px solid rgba(231,25,31,.25);
    border-radius:14px;
    padding:10px;
    box-shadow:0 18px 45px rgba(0,0,0,.35);
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:.25s ease;
    z-index:99999;
}

.header-account:hover .account-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.account-dropdown a{
    display:block;
    color:rgba(255,255,255,.75);
    font-size:13px;
    padding:10px 12px;
    border-radius:10px;
}

.account-dropdown a:hover{
    background:rgba(231,25,31,.14);
    color:#fff;
}

.account-menu-mobile{
    display:none;
}

@media (max-width:991px){

    .header-account{
        display:none;
    }

    .account-menu-mobile{
        display:block;
    }

}

/* Akun di hamburger: default desktop disembunyikan */
.account-menu-mobile{
    display:none;
}

/* Mobile */
@media (max-width:991px){

    /* Hilangkan ikon profil bulat di header */
    .header-account{
        display:none !important;
    }

    /* Tampilkan Login / Profil / Logout di dropdown hamburger */
    .navbar ul li.account-menu-mobile{
        display:block !important;
    }

}

@media(max-width:768px){

    section.hero-section{
        height:auto !important;
        min-height:auto !important;
        overflow:hidden !important;
        background:#000;
    }

    .hero-slider{
        height:auto !important;
    }

    .hero-slide{
        height:auto !important;
    }

    .hero-slide img{
        width:100% !important;
        height:auto !important;
        object-fit:contain !important;
        object-position:center center !important;
        background:#000;
        display:block !important;
    }

}

.hero-slider{
    display:flex;
    align-items:flex-start;
    width:100%;
    transition:transform .7s cubic-bezier(.77,0,.18,1);
    will-change:transform;
}

/* FIX: Paket card — bagian hitam sama tinggi semua */
.paket-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
    align-items: stretch; /* card sama tinggi */
}

.paket-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.paket-top {
    background: var(--black);
    padding: 20px 20px 18px;
    border-bottom: 3px solid var(--red);
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* ← badge atas, judul bawah */
    align-items: flex-start;
    min-height: 140px; /* ← tetap sama tinggi */
}

.paket-badge {
    display: inline-block;
    align-self: flex-start; /* ← badge ikut lebar teks saja */
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    background: var(--red);
    color: var(--white);
    width: auto; /* ← pastikan tidak full width */
}

.paket-body {
    padding: 16px 18px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.paket-desc {
    font-size: 12.5px;
    color: var(--gray-txt);
    line-height: 1.65;
    flex: 1;
}

.harga-box {
    margin-top: auto;
}

.testimoni-form-wrap {
  max-width: 500px;
  margin: 0 auto;
  padding: 24px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.form-group input[type="text"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.req { color: red; }

/* Rating bintang, urutan dibalik biar hover kiri-ke-kanan */
.rating-input {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.rating-input input { display: none; }
.rating-input label {
  font-size: 28px;
  color: #ddd;
  cursor: pointer;
  margin: 0 2px;
}
.rating-input input:checked ~ label,
.rating-input label:hover,
.rating-input label:hover ~ label {
  color: #f5a623;
}

/* Honeypot: sembunyikan dari user, tapi tetap ada di DOM untuk bot */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.btn-submit {
  background: #25D366;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}
.btn-submit:hover { background: #1ebc59; }
/* TESTI CTA BUTTON */
.testi-cta{
  text-align: center;
  margin-top: 40px;
}

.btn-testi-open{
  background: #e7191f;
  color: #fff;
  border: none;
  padding: 14px 32px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
}
.btn-testi-open:hover{ background: #c4141a; }

/* TESTI MODAL */
.testi-modal-overlay{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.testi-modal-overlay.active{
  display: flex;
}
.testi-modal{
  background: #fff;
  border-radius: 12px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  padding: 12px;
}
.testi-modal-close{
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
  color: #999;
  z-index: 2;
}

/* TESTI REVIEW LIST — gaya berbeda dari card grid */
.testi-review-list{
  max-width: 800px;
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.testi-review-item{
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.testi-review-item:last-child{
  border-bottom: none;
}

.testi-review-photo{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(231,25,31,.35);
}

.testi-review-avatar{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(231,25,31,.15);
  color: #ff6b6b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.testi-review-content{
  flex: 1;
  min-width: 0;
}

.testi-review-name{
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}

.testi-review-message{
  font-size: 13px;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
  margin: 0;
}

@media(max-width: 600px){
  .testi-review-item{
    gap: 12px;
  }
}

/* TESTI TICKER — full width, tanpa card, center */
.testi-ticker-wrap{
  width: 100%;
  margin-top: 40px;
  padding: 0 20px;
}

.testi-ticker-box{
  width: 100%;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  opacity: 0;
  transition: opacity .4s ease;
}

.testi-ticker-box.show{
  opacity: 1;
}

.testi-ticker-photo{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(231,25,31,.35);
}

.testi-ticker-avatar{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(231,25,31,.15);
  color: #ff6b6b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
}

.testi-ticker-top{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.testi-ticker-name{
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.testi-ticker-stars{
  color: #f59e0b;
  font-size: 13px;
  letter-spacing: 1px;
}

.testi-ticker-message{
  font-size: 13.5px;
  color: rgba(255,255,255,.65);
  line-height: 1.6;
  margin: 0;
  max-width: 700px;
}

@media(max-width: 600px){
  .testi-ticker-top{
    flex-direction: column;
    gap: 4px;
  }
  .testi-ticker-message{
    max-width: 90%;
  }
}

/* =====================
PROMO BANNER
===================== */
.promo-banner-section{
    background:linear-gradient(90deg,#1a0000 0%,#a01015 100%);
    padding:14px 0;
}

.promo-banner-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}

.promo-banner-text{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    flex:1;
    min-width:0;
}

.promo-banner-badge{
    flex-shrink:0;
    background:#fff;
    color:#a01015;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
    padding:5px 12px;
    border-radius:50px;
}

.promo-banner-title{
    font-size:13.5px;
    font-weight:600;
    color:#fff;
    line-height:1.5;
    margin:0;
}

.promo-banner-title span:not(.promo-banner-desc){
    color:#FFD600;
    font-weight:800;
}

.promo-banner-desc{
    display:inline;
    font-size:12px;
    font-weight:400;
    color:rgba(255,255,255,.65);
}

.promo-banner-btn{
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#25D366;
    color:#fff;
    font-weight:700;
    font-size:13px;
    padding:10px 20px;
    border-radius:50px;
    text-decoration:none;
    white-space:nowrap;
    box-shadow:0 6px 18px rgba(37,211,102,.3);
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.promo-banner-btn:hover{
    transform:translateY(-2px);
    background:#1ebe5d;
    box-shadow:0 10px 24px rgba(37,211,102,.45);
}

@media(max-width:768px){
    .promo-banner-box{ flex-direction:column; align-items:flex-start; gap:12px; }
    .promo-banner-desc{ display:block; margin-top:2px; }
    .promo-banner-btn{ align-self:stretch; justify-content:center; }
}