/* eksternal css */
/* ================= RESET ================= */
*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,sans-serif}
body{background:#0f1a13;color:#fff;overflow-x:hidden}
a{text-decoration:none;color:inherit}

/* ================= NAVBAR ================= */

.nav-menu{display:flex;gap:32px}

/* ================= HERO ================= */
.hero{
    min-height:100vh;
    position:relative;
    padding:120px 64px 160px;
    display:flex;
    align-items:center
}

.hero-bg{
    position:absolute;
    inset:0;
    background:url('/Assets/image/hero.png') right center / contain no-repeat;
    background-color:#0f1a13;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(0,0,0,.45),
        rgba(0,0,0,.15)
    );
    z-index:2;
    pointer-events:none;
}

.hero-content{position:relative;z-index:2;max-width:760px}
.hero h1{
    font-size:clamp(28px, 4vw, 50px);
    font-weight:800;
    line-height:1.15;
}

.hero p{
    font-size:clamp(14px, 1.4vw, 16px);
    line-height:1.8;
}
.compare-inline-img{
    width:120px;        /* INI YANG BIKIN KECIL */
    max-width:25%;
    height:auto;
    flex-shrink:0;
}


/* ================= UNDERLINE ================= */
.title-underline{
    position:relative;
    display:inline-block;
    padding-bottom:10px
}
.title-underline::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:55%;
    height:6px;
    background:#f39c12;
    border-radius:4px
}

/* ===== UNDERLINE TENGAH KHUSUS ===== */
.underline-center::after{
    left:50%;
    transform:translateX(-50%);
}

/* ================= LOGIC BRIDGE ================= */
.logic-bridge{
    position:absolute;
    left:50%;
    bottom:-28px;
    transform:translateX(-50%);
    display:flex;
    gap:16px;
    z-index:5
}
.logic-item{
    background:#f6f8f6;
    color:#0f1a13;
    padding:14px 22px;
    border-radius:14px;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 12px 28px rgba(0,0,0,.35);
    transition:.25s
}
.logic-item:hover{transform:translateY(-4px)}
.logic-item.active{
    background:#2f8f5f;
    color:#fff;
    transform:translateY(-8px)
}
.logic-item{
    display:flex;
    align-items:center;
    gap:12px;
}

/* DEFAULT: gambar HILANG */
.logic-img{
    width:0;
    height:36px;
    border-radius:8px;
    background-size:cover;
    background-position:center;
    opacity:0;
    overflow:hidden;
    transition:.25s ease;
}

/* ACTIVE: gambar MUNCUL */
.logic-item.active .logic-img{
    width:36px;
    opacity:1;
}

/* ================= PERBANDINGAN ================= */
.compare{
    background:#ffffff;
    color:#0f1a13;
    padding:60px 64px
}
.compare h2{font-size:36px;margin-bottom:32px}
.compare-card{
    max-width:980px;
    background:#fff;
    border-radius:20px;
    display:grid;
    grid-template-columns:1fr 1.2fr;
    overflow:hidden;
    box-shadow:0 30px 60px rgba(0,0,0,.15)
}
.compare-img{min-height:260px;background-size:cover;background-position:center}
.compare-content{padding:36px}
.compare-content h3{font-size:24px;margin-bottom:14px}
.compare-content p{line-height:1.8;font-size:15px}

/* ================= PRODUK ================= */
.product{
    background:#ffffff;
    padding:60px 64px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:32px
}
.product h2{font-size:34px;text-align:center;color:#0f1a13}

.product-card{
    position:relative;
    width:233px;
    height:280px;
    background:#fff;
    color:#0f1a13;
    border-radius:18px;
    padding:18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    box-shadow:0 20px 40px rgba(0,0,0,.15);
    transition:.3s;
    overflow:hidden
}
.product-card::before{
    content:"";
    position:absolute;inset:0;
    background:#0f1a13;
    opacity:0;
    transition:.3s
}
.product-card:hover::before{opacity:.10}
.product-card:hover{
    transform:translateY(-8px) scale(1.02);
    box-shadow:0 35px 70px rgba(0,0,0,.25)
}
.product-card > *{position:relative;z-index:1}
.product-img{
    width:100%;
    height:100%;
    background:url('/Assets/image/forta.png') center/contain no-repeat;
    transition:.3s
}
.product-actions{
    margin-top:auto;
    display:flex;
    gap:8px;
    opacity:0;
    transition:.3s
}
.product-card:hover .product-img{transform:scale(.88)}
.product-card:hover .product-actions{opacity:1}

.product-actions button{
    padding:9px 14px;
    border-radius:8px;
    font-weight:600;
    font-size:12px;
    background:#fff;
    color:#2f8f5f;
    border:2px solid #2f8f5f;
    cursor:pointer;
    transition:.25s
}
.product-actions button:hover{
    background:#2f8f5f;
    color:#fff
}

/* ================= LAYANAN ================= */
.service{
    background:#ffffff;
    padding:60px 64px;
    color:#0f1a13
}
.service-title{text-align:center;margin-bottom:36px}
.service-title .title-underline{margin:0 auto}
.service-title .title-underline::after{left:50%;transform:translateX(-50%)}
.service-cards{
    display:flex;
    justify-content:center;
    gap:24px;
    flex-wrap:wrap
}
.service-card{
    width:260px;
    background:#fff;
    border-radius:18px;
    padding:24px;
    box-shadow:0 18px 36px rgba(0,0,0,.12);
    transition:.3s
}
.service-card:hover{
    transform:translateY(-6px);
    box-shadow:0 32px 60px rgba(0,0,0,.2)
}
.service-img{
    width:100%;
    height:140px;
    background-size:cover;
    background-position:center;
    border-radius:12px;
    margin-bottom:16px
}
.service-card h3{font-size:18px;margin-bottom:12px}
.service-card p{font-size:14px;line-height:1.7}

/* ================= KENAPA POKMAG HADIR ================= */
.reason{
    background:#ffffff;
    padding:60px 64px 100px;
    color:#0f1a13
}
.reason-card{
    max-width:1040px;
    margin:0 auto;
    background:#ffffff;
    border-radius:22px;
    padding:48px;
    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:40px;
    box-shadow:0 30px 60px rgba(0,0,0,.15);
    align-items:center
}
.product-title{
    font-size:14px;
    font-weight:700;
    color:#2f8f5f;
    margin-bottom:8px;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.reason-text p{font-size:15px;line-height:1.9;margin-bottom:16px}
.reason-image{
    width:100%;
    height:320px;
    border-radius:16px;
    background:url('KENAPA-POKMAG.jpg') center/cover no-repeat
}

/* ================= CTA PROGRAM UJI ================= */
.cta{
    background:#0f1a13;
    padding:80px 64px;
    text-align:center
}
.cta h2{font-size:36px;margin-bottom:20px}
.cta p{
    max-width:720px;
    margin:0 auto 32px;
    line-height:1.8;
    color:#d5e3da
}
.cta-note{
    font-size:14px;
    color:#9fb6aa;
    margin-top:16px
}
.cta-btn{
    display:inline-block;
    padding:14px 28px;
    border-radius:10px;
    background:#2f8f5f;
    color:#fff;
    font-weight:700;
    transition:.25s
}
.cta-btn:hover{background:#3aa870}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){
    .nav-menu{display:none}
   .hero-bg{
    position:absolute;
    inset:0;
    background:url('/Assets/image/hero_mobile.png') right center / contain no-repeat;
    background-color:#0f1a13;
}
    .hero h1{font-size:36px}
    .compare,.product,.service,.reason,.cta{padding:40px 24px}
    .compare-card{grid-template-columns:1fr}
    .reason-card{grid-template-columns:1fr;padding:32px}
    .reason-image{height:240px}
}
/* === GREEN TOP EFFECT UNTUK SEMUA CARD === */
.product-card,
.service-card,
.reason-card{
    position:relative;
    overflow:hidden;
}

.product-card::before,
.service-card::before,
.reason-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
    background:linear-gradient(
        90deg,
        rgba(47,143,95,0),
        rgba(0, 0, 0, 0.85),
        rgba(47,143,95,0)
    );
    opacity:.6;
    transition:.3s;
}

.product-card:hover::before,
.service-card:hover::before,
.reason-card:hover::before{
    opacity:1;
}
/* ================= FOOTER ================= */
.footer{
    position:relative;
    background:url('FOOTER-BG.jpg') center/cover no-repeat;
    padding:120px 64px 80px;
    color:#fff;
    overflow:hidden;
}

.footer-overlay{
    position:absolute;
    inset:0;
    background:rgba(15,40,30,.88);
    z-index:1;
}

/* diagonal accent */
.footer-accent{
    position:absolute;
    top:0;
    left:0;
    width:280px;
    height:60px;
    background:linear-gradient(90deg,#2f8f5f,#f39c12);
    clip-path:polygon(0 0,100% 0,85% 100%,0 100%);
    z-index:2;
}

.footer-container{
    position:relative;
    z-index:3;
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}

.footer h4{
    font-size:16px;
    margin-bottom:16px;
    font-weight:700;
}

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

.footer ul{
    list-style:none;
}
.footer ul li{
    font-size:14px;
    margin-bottom:10px;
    color:#dbe8e1;
}

.footer-social span{
    display:block;
    font-size:14px;
    margin-top:8px;
    color:#dbe8e1;
}

.footer-map iframe{
    width:100%;
    height:220px;
    border-radius:12px;
    border:none;
    margin-top:12px;
}

/* ================= RESPONSIVE FOOTER ================= */
@media(max-width:900px){
    .footer{
        padding:80px 24px;
    }
    .footer-container{
        grid-template-columns:1fr;
    }
}
/* ================= LOGIC BRIDGE RESPONSIVE ================= */
@media (max-width: 900px){
    .logic-bridge{
        bottom:-22px;
        gap:10px;
    }

    .logic-item{
        padding:10px 14px;
        font-size:12px;
        border-radius:12px;
    }
}
/* ================= TRANSISI PRODUK KE LAYANAN ================= */

/* pastikan section produk & layanan konsisten */



/* GRADIENT TRANSISI HALUS DARI ATAS */
.service::before{
    content:"";
    position:absolute;
    top:-80px;
    left:0;
    width:100%;
    height:80px;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,0.10),
        rgba(0,0,0,0)
    );
    pointer-events:none;
}

@media (max-width: 480px){
    .logic-bridge{
        bottom:-18px;
        gap:8px;
    }

    .logic-item{
        padding:8px 12px;
        font-size:11px;
        border-radius:10px;
    }
}

.hero .navbar{
    height:80px;        /* naikin dikit biar lega */
}

.hero .navbar b{
    font-size:24px;
    font-weight:800;
    letter-spacing:1px;
}

.hero .navbar a{
    font-size:18px;
    font-weight:600;
}

/* ===== FIX LOGIC BRIDGE ONE-LINE ===== */
.logic-item{
    white-space:nowrap;        /* PAKSA 1 BARIS */
    display:flex;
    align-items:center;        /* VERTIKAL SELEVEL */
    justify-content:center;
    line-height:1;
}

/* RESPONSIVE SCALE (BUKAN WRAP) */
@media (max-width: 900px){
    .logic-item{
        padding:10px 14px;
        font-size:12px;
    }
}
@media (max-width: 900px){
    .hero{
        min-height:auto;
        padding:100px 20px 120px;
    }

    .hero-bg{
        background-size:cover;
        background-position:center;
    }

    .hero-content{
        max-width:100%;
    }

    .hero h1{
        font-size:clamp(16px, 7vw, 32px);
    }

    .hero p{
        font-size:10px;
    }
}

@media (max-width: 480px){
    .logic-item{
        padding:8px 10px;
        font-size:11px;
    }
}
/* ===== NAVBAR MENYATU HERO ===== */

/* ===== HARD OVERRIDE NAVBAR ===== */
.navbar{
    background:transparent !important;
    box-shadow:none !important;
}

.hero .navbar{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:72px;
    padding:0 48px;

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

    background:transparent;
    z-index:3;
}

.hero .navbar b,
.hero .navbar a{
    color:#ffffff;
    font-weight:600;
}
.hero .navbar a,
.hero .navbar b{
    color:#ffffff !important;
    text-decoration:none;
}
.hero .navbar{
    color:#ffffff;   /* INI KUNCI UTAMA */
}
.hero-content h1,
.hero-content p{
    color:#ffffff;
}
.hero-content h1{
    text-shadow:0 6px 20px rgba(0,0,0,.45);
}
.hero .navbar a{
    padding:8px 16px;
    border-radius:12px;
    transition:all .25s ease;
}

.hero .navbar a:hover{
    background:linear-gradient(
        135deg,
        #ffd37a,
        #f39c12
    );
    color:#0f1a13 !important;
    box-shadow:0 8px 20px rgba(243,156,18,.35);
}
/* ================= COMPARE SLIDER (STEP 1) ================= */

.compare-slider {
    width: 100%;
    overflow: hidden; /* KUNCI PENTING */
}

.compare-slider {
  position: relative;
  overflow: hidden;
}

.compare-track {
  position: relative;
  min-height: 360px; /* sesuaikan tinggi konten */
}

.compare-slide{
  position:absolute;
  top:0;
  left:0;
  width:75%;
  opacity:0;
  transform:translateX(0);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}




.compare-slide.active{
  opacity:1;
  transform:translateX(0);
  z-index:2;
  pointer-events:auto;
}

.compare-slide{
  display:grid;
  grid-template-columns:1.1fr 1.4fr; /* kiri gambar, kanan teks */
  background:#ffffff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.15);
}



.compare-slide.preview{
  opacity:.35;
  transform:translateX(100%);
  z-index:1;
}
/* ================= MOBILE: MATIKAN TEASER ================= */
@media (max-width: 768px) {

    /* 🔴 MATIKAN TEASER */
    .compare-slide.preview {
        display: none !important;
    }

    .compare-track {
        justify-content: flex-start;
    }

    .compare-slide {
        min-width: 100%;
        display: flex;
        flex-direction: column;   /* ⬅️ GAMBAR DI ATAS */
    }

    .compare-img {
        width: 100%;
        min-height: 180px;        /* atur selera */
        border-radius: 16px 16px 0 0;
    }

    .compare-content {
        padding: 18px 20px;
    }
}

/* ===== HERO EXTRA TERANG (FINAL) ===== */
.hero-overlay{
    background:linear-gradient(
        90deg,
        rgba(0,0,0,.45) 0%,
        rgba(0,0,0,.30) 40%,
        rgba(0,0,0,.12) 70%,
        rgba(0,0,0,0) 100%
    ) !important;
}

.hero-content h1,
.hero-content p{
    color:#ffffff !important;
}

.hero-content h1{
    text-shadow:
        0 2px 8px rgba(0,0,0,.45),
        0 0 18px rgba(255,255,255,.35);
}

.hero-content p{
    text-shadow:
        0 1px 6px rgba(0,0,0,.35);
    opacity:1;
}
/* ================= MASALAH KERUGIAN PETANI ================= */

.loss-problem{
    background:#ffffff;
    color:#0f1a13;
    padding:160px 64px;
}

.loss-inner{
    max-width:920px;
    margin:0 auto;
}

/* JUDUL */
.loss-title{
    font-size:clamp(40px,6vw,64px);
    font-weight:900;
    line-height:1.15;
    letter-spacing:-0.5px;
    margin-bottom:48px;
}

/* GARIS STRUKTURAL */
.loss-divider{
    width:100%;
    height:2px;
    background:#0f1a13;
    opacity:.15;
    margin-bottom:40px;
}

/* LEAD */
.loss-lead{
    font-size:20px;
    line-height:1.9;
    color:#2b3a32;
    max-width:640px;
    margin-bottom:28px;
}

/* TEKS UTAMA */
.loss-text{
    font-size:15px;
    line-height:1.9;
    color:#4a5b52;
    max-width:720px;
}

/* RESPONSIVE */
@media(max-width:900px){
    .loss-problem{
        padding:110px 24px;
    }

    .loss-title{
        font-size:clamp(32px,9vw,48px);
        margin-bottom:36px;
    }

    .loss-lead{
        font-size:17px;
    }
}
/* ================= LOSS SECTION MEPEP HERO ================= */

/* tarik section ke atas */
.loss-problem{
    margin-top:0px;          /* ⬅️ INI KUNCINYA */
    padding-top:50px;          /* kompensasi biar isi tetap aman */
    position:relative;
    z-index:3;
}

/* bikin hero tetap jadi layer bawah */

/* ================= HARGA NAIK, NUTRISI TIDAK CUKUP ================= */

.nutrition-gap{
    background:#ffffff;
    color:#0f1a13;
    padding:50px 64px;
}

.ng-inner{
    max-width:960px;
    margin:0 auto;
}

/* JUDUL */
.ng-title{
    font-size:clamp(36px,5vw,56px);
    font-weight:900;
    line-height:1.15;
    letter-spacing:-0.5px;
    margin-bottom:32px;
}

/* LEAD */
.ng-lead{
    font-size:19px;
    line-height:1.9;
    color:#2b3a32;
    max-width:720px;
    margin-bottom:64px;
}

/* GRID LOGIKA */
.ng-grid{
    display:grid;
    grid-template-columns:1fr 40px 1fr;
    gap:32px;
    align-items:flex-start;
    margin-bottom:48px;
}

/* ITEM */
.ng-item h4{
    font-size:18px;
    font-weight:800;
    margin-bottom:14px;
}

.ng-item p{
    font-size:15px;
    line-height:1.9;
    color:#4a5b52;
}

/* GARIS PEMISAH */
.ng-line{
    width:100%;
    display:flex;
    justify-content:center;
}

.ng-line::before{
    content:"";
    width:2px;
    height:100%;
    background:#0f1a13;
    opacity:.15;
}

/* FOOTNOTE */
.ng-footnote{
    font-size:14px;
    color:#6a7d73;
    max-width:520px;
}

/* RESPONSIVE */
@media(max-width:900px){
    .nutrition-gap{
        padding:100px 24px;
    }

    .ng-title{
        font-size:clamp(30px,8vw,44px);
    }

    .ng-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .ng-line{
        height:40px;
    }

    .ng-line::before{
        width:64px;
        height:2px;
    }
}
/* ================= PRODUK x LAYANAN SPLIT PUTIH–HITAM ================= */

.product-service-split{
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:100vh;
}

/* ================= KIRI : PUTIH ================= */

.pss-left{
    background:#ffffff;
    color:#0f1a13;
    display:flex;
    align-items:center;
    padding:80px 80px;
}

.pss-left .pss-desc{
    color:#2b3a32;
}

/* ================= KANAN : HITAM ================= */

.pss-right{
    background:#0f1a13;
    color:#ffffff;
    display:flex;
    align-items:center;
    padding:120px 80px;
}

/* ================= KONTEN DALAM ================= */

.pss-inner{
    max-width:440px;
}

/* JUDUL BESAR */
.pss-title{
    font-size:clamp(40px,5vw,64px);
    font-weight:900;
    line-height:1.05;
    margin-bottom:12px;
}

/* PARAGRAF */
.pss-desc{
    font-size:16px;
    line-height:1.9;
    margin-bottom:32px;
}

/* LIST */
.pss-list{
    list-style:none;
    padding:0;
    margin:0;
}

.pss-list li{
    font-size:15px;
    line-height:1.8;
    margin-bottom:16px;
    padding-left:22px;
    position:relative;
}

/* BULLET CUSTOM */
.pss-list li::before{
    content:"•";
    position:absolute;
    left:0;
    top:0;
    font-size:22px;
    line-height:1;
}

/* WARNA BULLET SESUAI BACKGROUND */
.pss-left .pss-list li::before{
    color:#0f1a13;
}

.pss-right .pss-list li::before{
    color:#ffffff;
}

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

@media(max-width:900px){
    .product-service-split{
        grid-template-columns:1fr;
        min-height:auto;
    }

    .pss-left,
    .pss-right{
        padding:80px 24px;
    }

    .pss-inner{
        max-width:100%;
    }
}
/* ================= PRODUK & LAYANAN SPLIT PUTIH ================= */

.product-service-white{
    display:grid;
    grid-template-columns:1fr 1fr;
    background:#ffffff;
}

/* KIRI & KANAN */
.psw-left,
.psw-right{
    padding:140px 80px;
    display:flex;
    align-items:flex-start;
}

.psw-inner{
    max-width:420px;
}

/* JUDUL */
.psw-title{
    font-size:clamp(36px,4vw,48px);
    font-weight:900;
    margin-bottom:48px;
    color:#0f1a13;
}

/* ================= PRODUCT CARD ================= */

.product-card{
    position:relative;
    width:100%;
    height:360px;
    background:#ffffff;
    border-radius:20px;
    box-shadow:0 30px 60px rgba(0,0,0,.15);
    padding:24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    transition:.35s ease;
    overflow:hidden;
}

.product-img{
    width:100%;
    height:270px;
    background:url('/Assets/image/forta.png') center/contain no-repeat;
    transition:.35s ease;
}

.product-info h3{
    font-size:20px;
    font-weight:800;
    margin:20px 0 12px;
    color:#0f1a13;
}

.product-info p{
    font-size:14px;
    line-height:1.7;
    color:#4a5b52;
}

/* ACTIONS */
.product-actions{
    position:absolute;
    bottom:24px;
    display:flex;
    gap:12px;
    opacity:0;
    transform:translateY(20px);
    transition:.35s ease;
}

/* BUTTONS */
.btn-outline,
.btn-solid{
    padding:10px 14px;
    font-size:12px;
    font-weight:700;
    border-radius:8px;
    transition:.25s;
}

.btn-outline{
    border:2px solid #2f8f5f;
    color:#2f8f5f;
    background:#ffffff;
}

.btn-outline:hover{
    background:#2f8f5f;
    color:#ffffff;
}

.btn-solid{
    background:#2f8f5f;
    color:#ffffff;
    border:2px solid #2f8f5f;
}

.btn-solid:hover{
    background:#26764f;
}

/* HOVER */
.product-card:hover .product-img{
    transform:scale(.85);
}

.product-card:hover .product-actions{
    opacity:1;
    transform:translateY(0);
}

/* ================= LAYANAN ================= */

.service-item{
    margin-bottom:48px;
}

.service-item h4{
    font-size:20px;
    font-weight:800;
    margin-bottom:14px;
    color:#0f1a13;
}

.service-item p{
    font-size:15px;
    line-height:1.9;
    color:#4a5b52;
}

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

@media(max-width:900px){
    .product-service-white{
        grid-template-columns:1fr;
    }

    .psw-left,
    .psw-right{
        padding:100px 24px;
    }

    .psw-inner{
        max-width:100%;
    }
}

/* ================= GARIS PEMISAH (TIDAK FULL TINGGI) ================= */

.product-service-white{
    display:grid;
    grid-template-columns:1fr 14px 1fr;
    background:#ffffff;
}

.psw-divider{
    position:relative;
}

/* GARIS UTAMA */
.psw-divider::before{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:4px;
    background:#000000;          /* HITAM PEKAT */

    /* ⬇️ INI KUNCI UTAMA */
    top:60px;                    /* JEDA DARI ATAS SECTION */
    bottom:60px;                 /* JEDA DARI BAWAH SECTION */
}
@media(max-width:900px){
    .product-service-white{
        grid-template-columns:1fr;
    }

    .psw-divider{
        height:40px;
    }

    .psw-divider::before{
        left:0;
        right:0;
        top:50%;
        bottom:auto;
        height:4px;
        width:auto;
        transform:translateY(-50%);
    }
}
/* ================= PERBANDINGAN BIAYA PEMUPUKAN ================= */

.cost-compare{
    background:#0f1a13;
    color:#f1e8c9;
    min-height:100vh;
    padding:140px 64px;
    display:flex;
    align-items:center;
}

.cc-inner{
    max-width:1000px;
    margin:0 auto;
}

/* JUDUL */
.cc-title{
    font-size:clamp(36px,5vw,56px);
    font-weight:900;
    line-height:1.1;
    margin-bottom:24px;
}

.cc-title span{
    font-weight:700;
    opacity:.9;
}

/* SUB */
.cc-sub{
    font-size:18px;
    margin-bottom:28px;
    color:#e6d9a3;
}

/* TARGET */
.cc-target{
    font-size:14px;
    color:#d8cfa8;
    margin-bottom:48px;
}

/* TABLE */
.cc-table{
    border-top:1px solid rgba(241,232,201,.4);
    border-bottom:1px solid rgba(241,232,201,.4);
    margin-bottom:40px;
}

.cc-row{
    display:grid;
    grid-template-columns:2fr 2fr 2fr;
    padding:18px 0;
    border-bottom:1px solid rgba(241,232,201,.2);
    font-size:14px;
}

.cc-row:last-child{
    border-bottom:none;
}

/* HEADER */
.cc-head{
    font-weight:800;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:1px;
}

/* HIGHLIGHT */
.cc-highlight{
    font-weight:800;
    color:#ffd86b;
}

/* FOOTNOTE */
.cc-foot{
    font-size:14px;
    line-height:1.9;
    color:#d8cfa8;
    max-width:720px;
}

/* RESPONSIVE */
@media(max-width:900px){
    .cost-compare{
        padding:100px 24px;
    }

    .cc-row{
        grid-template-columns:1fr;
        gap:6px;
        font-size:13px;
    }

    .cc-head{
        display:none;
    }
}
/* ================= PERBANDINGAN BIAYA PEMUPUKAN ================= */

.cost-compare{
    background:#0f1a13;
    color:#f1e8c9;
    min-height:100vh;
    padding:140px 64px;
    display:flex;
    align-items:center;
}

.cc-inner{
    max-width:1000px;
    margin:0 auto;
}

/* JUDUL */
.cc-title{
    font-size:clamp(36px,5vw,56px);
    font-weight:900;
    line-height:1.1;
    margin-bottom:24px;
}

.cc-title span{
    font-weight:700;
    opacity:.9;
}

/* SUB */
.cc-sub{
    font-size:18px;
    margin-bottom:28px;
    color:#e6d9a3;
}

/* TARGET */
.cc-target{
    font-size:14px;
    color:#d8cfa8;
    margin-bottom:48px;
}

/* TABLE */
.cc-table{
    border-top:1px solid rgba(241,232,201,.4);
    border-bottom:1px solid rgba(241,232,201,.4);
    margin-bottom:40px;
}

.cc-row{
    display:grid;
    grid-template-columns:2fr 2fr 2fr;
    padding:18px 0;
    border-bottom:1px solid rgba(241,232,201,.2);
    font-size:14px;
}

.cc-row:last-child{
    border-bottom:none;
}

/* HEADER */
.cc-head{
    font-weight:800;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:1px;
}

/* HIGHLIGHT */
.cc-highlight{
    font-weight:800;
    color:#ffd86b;
}

/* ================= STATEMENT HEMAT ================= */

.cc-saving{
    margin:60px 0 48px;
    background:linear-gradient(135deg,#f5d77a,#e6c35a);
    border-radius:6px;
}

.cc-saving-inner{
    padding:48px 32px;
    text-align:center;
}

.cc-saving-label{
    display:block;
    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
    color:#4a3b00;
    margin-bottom:12px;
}

.cc-saving-value{
    font-size:clamp(36px,6vw,64px);
    font-weight:900;
    line-height:1.05;
    color:#2b2100;
}

.cc-saving-value small{
    display:block;
    font-size:14px;
    font-weight:600;
    margin-top:12px;
    color:#4a3b00;
}

/* FOOTNOTE */
.cc-foot{
    font-size:14px;
    line-height:1.9;
    color:#d8cfa8;
    max-width:720px;
}

/* RESPONSIVE */
@media(max-width:900px){
    .cost-compare{
        padding:100px 24px;
    }

    .cc-row{
        grid-template-columns:1fr;
        gap:6px;
        font-size:13px;
    }

    .cc-head{
        display:none;
    }

    .cc-saving-inner{
        padding:36px 20px;
    }
}
/* ================= MOBILE CENTER LOCK (FINAL) ================= */
@media (max-width: 900px) {

    /* pastikan split benar-benar satu kolom */
    .product-service-white {
        grid-template-columns: 1fr;
        justify-items: center;      /* ⬅️ KUNCI UTAMA */
    }

    /* blok produk */
    .psw-left {
        width: 100%;
        display: flex;
        justify-content: center;    /* ⬅️ KUNCI */
    }

    /* wrapper produk */
    .psw-left .psw-inner {
        width: 100%;
        max-width: 360px;           /* simetri visual */
        margin: 0 auto;
        text-align: center;
    }

    /* judul */
    .psw-left .psw-title {
        text-align: center;
        width: 100%;
    }

    /* card */
    .psw-left .product-card {
        margin: 0 auto;
    }
}
/* ================= PRODUCT CARD DARK ================= */

.product-card{
    background:#ffffff;                 /* HITAM */
    color:#0f1a13;
    box-shadow:0 30px 60px rgba(0,0,0,.35);
}

/* JUDUL PRODUK */
.product-info h3{
    color:#ffffff;
}

/* DESKRIPSI */
.product-info p{
    color:#d0d9d4;
}

/* GAMBAR */
.product-img{
    filter: drop-shadow(0 12px 24px rgba(0,0,0,.6));
}
/* ================= BUTTON ORANGE ================= */

/* ================= BUTTON OUTLINE (DEFAULT PUTIH) ================= */

.btn-outline{
    border:2px solid #0f1a13;   /* garis hitam */
    color:#0f1a13;              /* teks hitam */
    background:#ffffff;         /* isi putih */
}

.btn-outline:hover{
    background:#0f1a13;         /* isi hitam */
    color:#ffffff;              /* teks putih */
}

/* ================= BUTTON SOLID (ORANGE TETAP) ================= */

.btn-solid{
    background:#ff8a00;
    color:#0f1a13;
    border:2px solid #ff8a00;
}

.btn-solid:hover{
    background:#e67600;
    border-color:#e67600;
}
.footer{
    position:relative;
}

.footer-overlay{
    position:absolute;
    inset:0;
    z-index:1;
}

.footer-container{
    position:relative;
    z-index:2; /* ⬅️ KUNCI */
}