:root{
    --ink:#132018;
    --green-900:#153B24;
    --green-700:#1E5C36;
    --green-500:#2B7A47;
    --green-100:#E7F0E8;
    --green-050:#F3F8F3;
    --orange-600:#DE5C13;
    --orange-500:#F17B1F;
    --orange-400:#F79143;
    --orange-100:#FDECDA;
    --coral:#E1533D;
    --teal:#2C6E8E;
    --paper:#F9F7F2;
    --white:#FFFFFF;
    --line: rgba(21,59,36,0.12);
    --shadow: 0 20px 50px -25px rgba(21,59,36,0.35);
    --ease: cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    margin:0;
    font-family:'Plus Jakarta Sans', sans-serif;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
    font-family:'Sora', sans-serif;
    margin:0;
    color:var(--green-900);
    letter-spacing:-0.01em;
}
p{margin:0;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}

.eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--orange-600);
    display:inline-flex;
    align-items:center;
    gap:10px;
}
.eyebrow::before{
    content:"";
    width:18px; height:2px;
    background:var(--orange-500);
    display:inline-block;
}

.wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 40px;   /* dari 32px -> 40px: sedikit lebih lega di kiri-kanan */
}

section{ position:relative; }

/* ===== Petal / pinwheel signature system ===== */
.petal{
    position:absolute;
    border-radius:0 46% 46% 46%;
}
.mark{
    position:relative;
    width:38px; height:38px;
    flex-shrink:0;
}
.mark .petal{ width:19px; height:19px; background:var(--orange-500); top:9px; left:9px; }
.mark .petal:nth-child(1){ transform:rotate(0deg) translate(0,-9px); }
.mark .petal:nth-child(2){ transform:rotate(90deg) translate(0,-9px); background:var(--orange-400);}
.mark .petal:nth-child(3){ transform:rotate(180deg) translate(0,-9px); }
.mark .petal:nth-child(4){ transform:rotate(270deg) translate(0,-9px); background:var(--orange-400);}

.logo-lockup{ display:flex; align-items:center; gap:10px; }
.logo-lockup .wordmark{ font-family:'Sora', sans-serif; font-weight:800; font-size:20px; color:var(--green-900); line-height:1;}
.logo-lockup .wordmark span{ display:block; font-family:'JetBrains Mono', monospace; font-weight:600; font-size:9px; letter-spacing:0.24em; color:var(--orange-600); margin-top:3px;}

/* ===== Actual logo image (replaces petal+wordmark mark) ===== */
.logo-lockup img.logo-img{ height:44px; width:auto; display:block; flex-shrink:0; }
header .logo-lockup img.logo-img{ height:46px; }
.bloom-center .logo-lockup img.logo-img{ width:100%; height:auto; }
/* Logo card — logo saja, tanpa background, hitam putih */
.foot-logo-card{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:none;      /* no card/background at all */
    border:none;
    border-radius:0;
    padding:0;
    max-width:260px;      /* bigger container */
}
.foot-logo-card img.logo-img{
    height:auto;
    max-height:100%;      /* bigger logo, up from 40px */
    width:100%;
    object-fit:contain;
    filter:brightness(0) invert(1);   /* solid white, no gray tones */
}

/* ===== Header ===== */
header{
    position:sticky; top:0; z-index:100;
    background:rgba(249,247,242,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
}
header .wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:78px;
}
nav ul{
    display:flex;
    align-items:center;   /* baru: samakan perataan vertikal semua item nav */
    gap:34px;
}
nav a{
    display:inline-flex;
    align-items:center;
    font-size:14.5px; font-weight:600; color:var(--green-900);
    position:relative; padding:6px 0;
}
nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
    background:var(--orange-500); transform:scaleX(0); transform-origin:left;
    transition:transform .3s var(--ease);
}
nav a:hover::after{ transform:scaleX(1); }
.header-actions{ display:flex; align-items:center; gap:18px; }
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-weight:700; font-size:14.5px;
    padding:13px 26px;
    border-radius:999px;
    border:1.5px solid transparent;
    transition:all .25s var(--ease);
    white-space:nowrap;
}
.btn-primary{ background:var(--orange-500); color:var(--white); box-shadow:0 12px 24px -12px rgba(241,123,31,0.55);}
.btn-primary:hover{ background:var(--orange-600); transform:translateY(-2px); box-shadow:0 16px 28px -12px rgba(241,123,31,0.6);}
.btn-outline{ border-color:var(--green-900); color:var(--green-900); }
.btn-outline:hover{ background:var(--green-900); color:var(--white); }
.btn-ghost{ color:var(--green-900); font-weight:700; font-size:14.5px; }

.nav-toggle{
    display:none;
    background:none; border:none; padding:8px;
    position:relative;
    z-index:130;
}
.nav-toggle span{
    display:block;
    width:22px; height:2px;
    background:var(--green-900);
    margin:5px 0;
    transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ===== Hero ===== */
.hero{
    padding:56px 0 30px;   /* dari 96px -> 56px: jarak ke header lebih rapat */
    position:relative;
    overflow:hidden;
    background:var(--white);
}
.hero-bloom{
    display:none;
    /*position:absolute; top:-120px; right:-160px;   !* dari -160px -> -120px, ikut menyesuaikan padding baru *!*/
    /*width:640px; height:640px;*/
    /*pointer-events:none;*/
    /*opacity:.16;*/
}
.hero-bloom .petal{ width:320px; height:320px; background:var(--green-700); }
.hero-bloom .petal:nth-child(1){ top:160px; left:160px; transform:rotate(0deg) translate(0,-160px);}
.hero-bloom .petal:nth-child(2){ top:160px; left:160px; transform:rotate(90deg) translate(0,-160px); background:var(--orange-500);}
.hero-bloom .petal:nth-child(3){ top:160px; left:160px; transform:rotate(180deg) translate(0,-160px);}
.hero-bloom .petal:nth-child(4){ top:160px; left:160px; transform:rotate(270deg) translate(0,-160px); background:var(--orange-500);}

.hero .wrap{ position:relative; z-index:2; }
.hero-grid{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;   /* dari 1fr 1fr: kolom teks sedikit lebih lebar, kolom visual sedikit lebih ramping */
    gap:56px;                                /* dari 40px: jarak kiri-kanan lebih lega, tidak berhimpitan */
    align-items:center;
}
.hero-grid > div:first-child{
    max-width:500px;
    margin-left:12%;   /* baru: geser teks sedikit ke tengah, tidak mepet ke tepi kiri */
}
@media (max-width:960px){
    .hero-grid > div:first-child{
        max-width:none;
        margin-left:0;   /* reset di mobile, supaya tidak kepotong/kepepet */
    }
}
.hero h1{
    font-size:clamp(36px, 5vw, 58px);
    line-height:1.06;
    margin:22px 0 26px;
    font-weight:800;
}
.hero h1 em{
    font-style:normal;
    color:var(--orange-500);
}
.hero p.lead{
    font-size:18px;
    line-height:1.7;
    color:#3B4A40;
    max-width:520px;
    margin-bottom:38px;
}
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:40px; }
.hero-trust{
    display:flex; gap:28px; flex-wrap:wrap;
    padding-top:28px; border-top:1px solid var(--line);
}
.hero-trust div{ display:flex; flex-direction:column; gap:2px; }
.hero-trust .num{ font-family:'Sora',sans-serif; font-weight:800; font-size:22px; color:var(--green-900); }
.hero-trust .lbl{ font-size:12.5px; color:#5C6C60; }

.hero-visual{
    position:relative;
    aspect-ratio:1/1.05;
    margin-top:-100px;   /* baru: geser bloom ke atas */
    display:flex; align-items:center; justify-content:center;
}
.bloom-big{ position:relative; width:100%; height:100%; }
.bloom-big .petal{
    width:46%; height:46%;
    top:27%; left:27%;
    box-shadow:var(--shadow);
}
.bloom-big .petal:nth-child(1){ background:var(--orange-500); transform:rotate(0deg) translate(0,-27%);}
.bloom-big .petal:nth-child(2){ background:var(--green-700); transform:rotate(90deg) translate(0,-27%);}
.bloom-big .petal:nth-child(3){ background:var(--coral); transform:rotate(180deg) translate(0,-27%);}
.bloom-big .petal:nth-child(4){ background:var(--teal); transform:rotate(270deg) translate(0,-27%);}
.bloom-center{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:34%; aspect-ratio:1;
    background:var(--paper);
    border-radius:70%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 0 10px var(--paper);
}
.bloom-center .logo-lockup .wordmark{ font-size:15px; }
.bloom-center .mark{ width:26px; height:26px; }
.bloom-center .mark .petal{ width:13px; height:13px; top:6.5px; left:6.5px;}
.bloom-center .mark .petal:nth-child(1),.bloom-center .mark .petal:nth-child(3){ transform:rotate(var(--r,0)) translate(0,-6.5px);}

@media (prefers-reduced-motion:no-preference){
    .bloom-big{ animation:spin 60s linear infinite; }
}
@keyframes spin{ to{ transform:rotate(360deg);} }

/* ===== Header — transisi lebar sedang, sebelum masuk mode mobile ===== */
nav a{
    white-space:nowrap;   /* cegah teks nav (mis. "Kalkulator Zakat") pecah jadi 2 baris */
}

@media (max-width:1300px){
    header .wrap{
        gap:12px;
    }
    nav ul{
        gap:22px;   /* dari 34px -> lebih rapat */
    }
    nav a{
        font-size:13.5px;
    }
    .header-actions{
        gap:10px;
    }
    .header-actions .btn{
        padding:11px 18px;
        font-size:13px;
    }
    .logo-lockup img.logo-img{
        height:38px;
    }
    header .logo-lockup img.logo-img{
        height:38px;
    }
}

@media (max-width:1150px){
    nav ul{
        gap:14px;
    }
    nav a{
        font-size:12.5px;
    }
    .header-actions .btn-outline{
        padding:10px 14px;
        font-size:12px;
    }
    .header-actions .btn-primary{
        padding:10px 16px;
        font-size:12.5px;
    }
}

@media (max-width:640px){
    .hero{ padding:0 0 40px; }
    .hero .wrap{ padding:0 24px; }

    .hero-grid > div:first-child{
        text-align:center;
        display:flex;
        flex-direction:column;
        align-items:center;
        background:var(--green-050);
        border-radius:24px;
        padding:32px 20px;
        margin-top:8px;
    }

    .eyebrow{
        font-size:10.5px;
        letter-spacing:0.08em;
        white-space:nowrap;
        gap:8px;
    }

    .eyebrow::before{
        width:14px;
    }

    .hero .eyebrow{
        justify-content:center;
    }

    .hero h1{
        font-size:40px;
        line-height:1.2;
        margin:18px 0 16px;
    }

    .hero p.lead{
        font-size:15.5px;
        line-height:1.65;
        max-width:340px;
        margin:0 auto 28px;
    }

    .hero-ctas{
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
        justify-content:center;
        gap:8px;
        margin-top:20px;
        margin-bottom:0;
        width:100%;
    }
    .hero-ctas .btn{
        flex:1 1 0;
        min-width:0;
        width:auto;
        white-space:nowrap !important;
        overflow:hidden;
        text-overflow:ellipsis;
        display:inline-flex;
        padding:12px 6px !important;
        font-size:13px !important;
    }
}

@media (max-width:400px){
    .hero h1{ font-size:38px; }
    .hero p.lead{ font-size:14.5px; }
}
@media (max-width:380px){
    .hero-ctas .btn{
        padding:11px 14px;
        font-size:12px;
    }
}

/* ===== Section headers ===== */
.sec-head{ max-width:640px; margin-bottom:56px; }
.sec-head h2{ font-size:clamp(28px,3.4vw,40px); margin-top:16px; line-height:1.15; }
.sec-head p{ margin-top:16px; font-size:16.5px; line-height:1.7; color:#4A5A4F; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* ===== About ===== */
.about{ padding:70px 0 70px; background:var(--white); }
.about-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:72px;
    align-items:center;
}
.about-card{
    position:relative;
    background:var(--green-900);
    border-radius:28px;
    padding:44px;
    color:var(--white);
    overflow:hidden;
    min-height:380px;
    display:flex; flex-direction:column; justify-content:flex-end;
}
.about-card-logo{
    position:relative;
    z-index:2;
    height:auto;
    width:auto;
    margin-bottom:24px;
    filter:brightness(0) invert(1); /* logo jadi putih supaya kontras di background hijau tua */
}
.about-card .petal{ position:absolute; opacity:.14; }
.about-card .petal.p1{ width:220px;height:220px; background:var(--orange-400); top:-60px; left:-60px; transform:rotate(20deg);}
.about-card .petal.p2{ width:160px;height:160px; background:var(--white); bottom:-40px; right:-40px; transform:rotate(200deg);}
.about-card .tag{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-400); font-weight:600;}
.about-card h3{ color:var(--white); font-size:26px; margin-top:14px; line-height:1.3;}
.about-text p{ font-size:16.5px; line-height:1.85; color:#3B4A40; margin-bottom:18px; max-width:640px; }
.about-text strong{ color:var(--green-900); }
.about-badges{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.badge{
    display:flex; align-items:center; gap:8px;
    font-size:13px; font-weight:600; color:var(--green-900);
    background:var(--green-050); border:1px solid var(--line);
    padding:9px 16px; border-radius:999px;
}
.badge .dot{ width:7px;height:7px; border-radius:50%; background:var(--orange-500); }
.about-page-hero{
    padding:64px 0 20px;
    background:var(--paper);
    overflow:hidden;
    position:relative;
}
.aph-petal{
    width:360px; height:360px;
    background:var(--orange-100);
    opacity:.5;
    top:-140px; right:-100px;
    transform:rotate(25deg);
}
.about-page-hero .sec-head-center h1{
    font-family:'Sora', sans-serif;
    font-weight:800;
    font-size:clamp(30px,4vw,44px);
    line-height:1.15;
    margin-top:16px;
    color:var(--green-900);
}
.about-page-hero .sec-head-center p{
    margin-top:16px;
    font-size:16.5px;
    line-height:1.7;
    color:#4A5A4F;
}

@media (max-width:640px){
    .about{ padding:20px 0 56px; }
    .about-grid{ gap:28px; }

    .about-card{
        padding:28px;
        border-radius:22px;
        min-height:0;
        text-align:center;
        align-items:center;
    }
    .about-card-logo{
        height:75px;
        margin:0 auto 18px;
    }
    .about-card .tag{ font-size:11px; }
    .about-card h3{
        font-size:19px;
        line-height:1.4;
        margin-top:10px;
    }

    .about-text{ text-align:center; }
    .about-text .eyebrow{ justify-content:center; }
    .about-text h2{ font-size:23px !important; line-height:1.3; }
    .about-text p{
        font-size:14.5px;
        line-height:1.75;
        margin-bottom:14px;
        max-width:100%;
    }
    .about-badges{
        justify-content:center;
        gap:10px;
    }
    .badge{ font-size:12px; padding:8px 14px; }
    .reveal{
        opacity:0;
        transform:translateY(28px) scale(.98);
        transition:opacity .6s var(--ease), transform .6s var(--ease);
    }
    .reveal.in{
        opacity:1;
        transform:translateY(0) scale(1);
    }

    /* Stagger children inside a section so they don't all pop in at once */
    .about-grid .reveal:nth-child(1){ transition-delay:0s; }
    .about-grid .reveal:nth-child(2){ transition-delay:.1s; }

    .legal .reveal{ transition-delay:.05s; }
}

/* ===== Visi Misi ===== */
.visi-misi{ padding:70px 0 50px; background:var(--green-050); }
.vm-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; }
.visi-block{
    position:relative;
    background:var(--white); border-radius:24px; padding:44px;
    border:1px solid var(--line);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    height:100%;
}
.visi-block .vb-petal{
    width:220px; height:220px;
    background:var(--orange-100);
    opacity:.6;
    top:-70px; right:-70px;
    transform:rotate(30deg);
}
.visi-quote-icon{
    position:relative;
    font-size:30px;
    color:var(--orange-400);
    opacity:.5;
    margin-bottom:18px;
}
.visi-block .eyebrow{ margin-bottom:18px; position:relative; }
.visi-block blockquote{
    position:relative;
    font-family:'Sora',sans-serif; font-weight:600; font-size:23px;
    line-height:1.5; color:var(--green-900); margin:0;
}
.visi-foot{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:auto;
    padding-top:28px;
}
.visi-foot .mark{ width:28px; height:28px; }
.visi-foot .mark .petal{ width:14px; height:14px; top:7px; left:7px; }
.visi-foot span{
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--green-700);
}
.misi-list{ display:flex; flex-direction:column; gap:12px; }
.misi-item{
    display:flex; align-items:center; gap:18px;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:16px;
    padding:18px 20px;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.misi-item:hover{
    transform:translateX(4px);
    box-shadow:var(--shadow);
}
.misi-num{
    font-family:'Sora',sans-serif; font-weight:800; font-size:14px;
    color:var(--white);
    width:36px; height:36px;
    border-radius:11px;
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
}
.misi-item[data-accent="orange"] .misi-num{ background:linear-gradient(135deg, var(--orange-500), var(--orange-600)); }
.misi-item[data-accent="green"] .misi-num{ background:linear-gradient(135deg, var(--green-500), var(--green-700)); }
.misi-item[data-accent="coral"] .misi-num{ background:linear-gradient(135deg, var(--coral), #B84130); }
.misi-item[data-accent="teal"] .misi-num{ background:linear-gradient(135deg, var(--teal), #1F5068); }
.misi-item p{ font-size:15px; line-height:1.6; color:#324139; }

@media (max-width:640px){
    .visi-misi{ padding:48px 0 40px; }
    .vm-grid{ gap:28px; }

    .visi-block{
        padding:28px;
        border-radius:20px;
    }
    .visi-quote-icon{ font-size:24px; margin-bottom:14px; }
    .visi-block blockquote{
        font-size:17px;
        line-height:1.55;
    }
    .visi-foot{ padding-top:20px; gap:10px; }
    .visi-foot .mark{ width:24px; height:24px; }
    .visi-foot .mark .petal{ width:12px; height:12px; top:6px; left:6px; }
    .visi-foot span{ font-size:11px; }

    .misi-list{ gap:10px; }
    .misi-item{
        padding:14px 16px;
        border-radius:14px;
        gap:14px;
    }
    .misi-num{
        width:30px;
        height:30px;
        font-size:12px;
        border-radius:9px;
    }
    .misi-item p{ font-size:13.5px; line-height:1.55; }
}

/* ===== Pilar Program (signature) ===== */
.pilar{ padding:70px 0 70px; background:var(--white); overflow:hidden; }
.pilar-layout{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:20px;
    align-items:center;
}
.pilar-wheel{
    position:relative;
    width:100%;
    max-width:440px;
    aspect-ratio:1;
    margin:0 auto;
}
.sec-head h2 em{
    font-style:normal;
    color:var(--orange-500);
}
.pilar .sec-head{
    max-width:100%;
}
@media (max-width:640px){
    .pilar .sec-head{
        text-align:center;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:20px;
    }
    .pilar .sec-head .eyebrow{
        justify-content:center;
    }
    .sec-head h2{
        font-size:28px;
        line-height:1.2;
    }
}
/* Lingkaran tengah + logo */
.pilar-wheel .core{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:30%; aspect-ratio:1; border-radius:50%;
    background:var(--green-900);
    display:flex; align-items:center; justify-content:center;
    z-index:3;
    box-shadow:0 20px 40px -18px rgba(21,59,36,0.5);
}
.pilar-wheel .core .core-logo{
    width:62%;
    height:auto;
    filter:brightness(0) invert(1);
}

/* Bentuk petal — hanya visual, tidak berisi teks */
.pilar-petal{
    position:absolute;
    width:52%; height:52%;
    top:24%; left:24%;
    z-index:1;
    border:none;
    padding:0;
    cursor:pointer;
    transition:transform .4s var(--ease), opacity .4s var(--ease), z-index 0s .1s;
}
.pilar-petal:focus-visible{ outline:3px solid var(--orange-400); outline-offset:4px; }

.petal-pendidikan{ background:var(--orange-500); border-radius:0 46% 46% 46%; transform:translate(0,-24%); }
.petal-kesehatan { background:var(--green-700);  border-radius:46% 0 46% 46%; transform:translate(24%,0); }
.petal-ekonomi   { background:var(--coral);      border-radius:46% 46% 0 46%; transform:translate(0,24%); }
.petal-dakwah    { background:var(--teal);       border-radius:46% 46% 46% 0; transform:translate(-24%,0); }

.petal-pendidikan:hover{ transform:translate(0,-24%) scale(1.06); z-index:4; }
.petal-kesehatan:hover { transform:translate(24%,0) scale(1.06); z-index:4; }
.petal-ekonomi:hover   { transform:translate(0,24%) scale(1.06); z-index:4; }
.petal-dakwah:hover    { transform:translate(-24%,0) scale(1.06); z-index:4; }

.pilar-wheel.has-active .petal-pendidikan:not(.is-active){ transform:translate(0,-24%) scale(.85); opacity:.35; }
.pilar-wheel.has-active .petal-kesehatan:not(.is-active) { transform:translate(24%,0) scale(.85); opacity:.35; }
.pilar-wheel.has-active .petal-ekonomi:not(.is-active)   { transform:translate(0,24%) scale(.85); opacity:.35; }
.pilar-wheel.has-active .petal-dakwah:not(.is-active)    { transform:translate(-24%,0) scale(.85); opacity:.35; }

.pilar-petal.is-active{
    transform:translate(0,0) scale(1.6) !important;
    z-index:10;
    opacity:1;
}
.pilar-petal.is-active .pl-label{
    top:50%; left:50%; right:auto; bottom:auto;
    transform:translate(-50%,-50%);
    font-size:19px;
    max-width:64%;
    text-align:center;
}

/* Label teks — terpisah dari petal, selalu paling atas supaya tidak pernah tertutup */
.pl-label{
    position:absolute;
    z-index:6;
    color:var(--white);
    font-family:'Sora', sans-serif;
    font-weight:700;
    font-size:15px;
    line-height:1.25;
    max-width:78%;
    pointer-events:none;
    text-shadow:0 1px 6px rgba(0,0,0,0.35);
    transition:all .35s var(--ease);
}
.label-top{    top:10%;    left:30%; transform:translateX(-50%); text-align:center; }
.label-bottom{ bottom:10%; left:70%; transform:translateX(-50%); text-align:center; }
.label-right{  top:20%;    right:10%; transform:translateY(-50%); text-align:right; }
.label-left{   top:85%;    left:10%;  transform:translateY(-50%); text-align:left; }

@media (max-width:480px){
    .pl-label{ font-size:13px; max-width:88px; }
}

.pilar-list{ display:flex; flex-direction:column; gap:14px; }
.pilar-row{
    display:flex; gap:18px; align-items:flex-start;
    padding:22px;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:18px;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.pilar-row:hover{
    transform:translateX(4px);
    box-shadow:var(--shadow);
    border-color:transparent;
}
.pilar-icon{
    width:44px; height:44px;
    border-radius:13px;
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:18px;
    color:var(--white);
}
.pilar-row[data-accent="orange"] .pilar-icon{ background:linear-gradient(135deg, var(--orange-500), var(--orange-600)); }
.pilar-row[data-accent="green"] .pilar-icon{ background:linear-gradient(135deg, var(--green-500), var(--green-700)); }
.pilar-row[data-accent="coral"] .pilar-icon{ background:linear-gradient(135deg, var(--coral), #B84130); }
.pilar-row[data-accent="teal"] .pilar-icon{ background:linear-gradient(135deg, var(--teal), #1F5068); }
.pilar-row h4{ font-size:17px; margin-bottom:6px; }
.pilar-row p{ font-size:14.5px; line-height:1.65; color:#4A5A4F; }
.pilar-row:last-child{ border-bottom:none; }
.pilar-chip{
    width:12px; height:12px; border-radius:3px;
    margin-top:7px; flex-shrink:0;
}
.pilar-row h4{ font-size:18px; margin-bottom:6px; }
.pilar-row p{ font-size:15px; line-height:1.65; color:#4A5A4F; }
@media (max-width:640px){
    .pilar{ padding:56px 0 60px; }

    /* Heading */
    .pilar .sec-head{
        max-width:100%;
        text-align:center;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:20px;
    }
    .pilar .sec-head .eyebrow{ justify-content:center; }
    .pilar .sec-head h2{ font-size:26px; line-height:1.25; }
    .pilar .sec-head p{ font-size:15px; }

    /* Wheel */
    .pilar-layout{ gap:24px; }
    .pilar-wheel{ max-width:280px; }
    .pl-label{ font-size:13px; }
    .pilar-wheel .core .core-logo{ width:56%; }

    /* Card list */
    .pilar-list{ gap:12px; }
    .pilar-row{
        padding:18px;
        gap:14px;
        border-radius:16px;
    }
    .pilar-row:hover{ transform:none; } /* hover lift feels odd on touch */
    .pilar-icon{
        width:38px; height:38px;
        border-radius:11px;
        font-size:15px;
    }
    .pilar-row h4{ font-size:16px; margin-bottom:4px; }
    .pilar-row p{ font-size:14px; line-height:1.6; }
}

@media (max-width:400px){
    .pilar-wheel{ max-width:240px; }
    .pl-label{ font-size:12px; max-width:80px; }
}
/* ===== IKHLAS ===== */
.ikhlas{ padding:70px 0; background:var(--green-900); color:var(--white); position:relative; overflow:hidden;}
.ikhlas .petal{ position:absolute; opacity:.08; }
.ikhlas .petal.i1{ width:420px;height:420px; background:var(--orange-500); top:-140px; left:-140px;}
.ikhlas .petal.i2{ width:300px;height:300px; background:var(--white); bottom:-100px; right:-60px; transform:rotate(160deg);}
.ikhlas .wrap{ position:relative; z-index:2; }
.ikhlas .sec-head h2{ color:var(--white); }
.ikhlas .sec-head p{ color:rgba(255,255,255,0.72); }

.sec-head-center{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
.sec-head-center .eyebrow{ justify-content:center; }
.ikhlas .eyebrow{ color:var(--orange-400); }
.ikhlas .eyebrow::before{ background:var(--orange-400); }

.ikhlas-detail-badge[data-accent="orange"]{ background:linear-gradient(135deg, var(--orange-500), var(--orange-600)); }
.ikhlas-detail-badge[data-accent="green"]{ background:linear-gradient(135deg, var(--green-500), var(--green-700)); }
.ikhlas-detail-badge[data-accent="coral"]{ background:linear-gradient(135deg, var(--coral), #B84130); }
.ikhlas-detail-badge[data-accent="teal"]{ background:linear-gradient(135deg, var(--teal), #1F5068); }

.letters-row{
    display:flex;
    justify-content:center;
    gap:16px;
    max-width:640px;
    margin:0 auto 32px;
    flex-wrap:wrap;
}
.letter-dot{
    width:64px; height:64px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,0.18);
    background:rgba(255,255,255,0.05);
    display:flex; align-items:center; justify-content:center;
    font-family:'Sora',sans-serif; font-weight:800; font-size:24px;
    color:var(--white);
    transition:all .25s var(--ease);
}
.letter-dot:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,0.35); }
.letter-dot.active[data-accent="orange"]{ background:linear-gradient(135deg, var(--orange-500), var(--orange-600)); border-color:transparent; }
.letter-dot.active[data-accent="green"]{ background:linear-gradient(135deg, var(--green-500), var(--green-700)); border-color:transparent; }
.letter-dot.active[data-accent="coral"]{ background:linear-gradient(135deg, var(--coral), #B84130); border-color:transparent; }
.letter-dot.active[data-accent="teal"]{ background:linear-gradient(135deg, var(--teal), #1F5068); border-color:transparent; }
.letter-dot.active{ transform:translateY(-4px) scale(1.06); }

.ikhlas-detail{
    max-width:640px;
    margin:0 auto;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:18px;
    padding:0;
    max-height:0;
    overflow:hidden;
    opacity:0;
    display:flex;
    align-items:center;
    transition:max-height .35s var(--ease), opacity .3s var(--ease), padding .35s var(--ease);
}
.ikhlas-detail:not(.is-empty){
    max-height:200px;
    opacity:1;
    padding:28px 32px;
}
.ikhlas-detail-content{
    display:flex;
    align-items:flex-start;
    gap:16px;
    width:100%;
}
.ikhlas-detail-badge{
    width:44px; height:44px;
    border-radius:13px;
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-family:'Sora',sans-serif; font-weight:800; font-size:19px;
    color:var(--white);
}
.ikhlas-detail-body .word{ font-family:'Sora',sans-serif; font-weight:700; font-size:17px; color:var(--white); }
.ikhlas-detail-body .desc{ font-size:14px; line-height:1.6; color:rgba(255,255,255,0.7); margin-top:4px; }
.ikhlas-desc{
    max-width:640px;
    margin:24px auto 0;
    text-align:center;
    font-size:15px;
    line-height:1.7;
    color:rgba(255,255,255,0.65);
}

@media (max-width:768px){
    .letters-row{
        display:flex;
        flex-wrap:nowrap;
        justify-content:center;
        gap:10px;
        max-width:520px;
        margin:0 auto 28px;
    }
    .letter-dot{
        width:52px;
        height:52px;
        font-size:18px;
        flex-shrink:0;
    }
}

@media (max-width:640px){
    .ikhlas{ padding:56px 0 60px; }

    .ikhlas .sec-head-center h2{ font-size:26px; line-height:1.3; }
    .ikhlas .sec-head-center p{ font-size:14.5px; }

    .letters-row{
        gap:8px;
        max-width:100%;
    }
    .letter-dot{
        width:44px;
        height:44px;
        font-size:16px;
    }

    .ikhlas-detail{ padding:20px; }
    .ikhlas-detail-content{ gap:12px; }
    .ikhlas-detail-badge{ width:38px; height:38px; font-size:16px; }
    .ikhlas-detail-body .word{ font-size:16px; }
    .ikhlas-detail-body .desc{ font-size:13.5px; }

    .ikhlas-desc{ font-size:14px; margin-top:20px; }
}

@media (max-width:380px){
    .letter-dot{ width:38px; height:38px; font-size:14px; }
    .letters-row{ gap:6px; }
}

/* ===== Legal (card container) ===== */
.legal{ padding:20px 0; background:var(--paper); }
.legal-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:28px;
    padding:48px;
    box-shadow:var(--shadow);
}
.legal-inner{
    display:grid;
    grid-template-columns:0.8fr 1.2fr;
    gap:48px;
    align-items:center;
}
.legal-copy{ max-width:360px; }
.legal-copy .eyebrow{ margin-bottom:14px; }
.legal-copy p{ font-size:15px; line-height:1.7; color:#4A5A4F; margin-top:12px; }

.legal-items{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}
.legal-item{
    background:var(--green-050);
    border:1px solid var(--line);
    border-radius:16px;
    padding:20px;
    height:100%;
    display:flex;
    align-items:flex-start;
    gap:14px;
}
.legal-item .li-icon{
    width:34px; height:34px; border-radius:10px; background:var(--white);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    margin-top:2px;
}
.legal-item .li-icon .petal{ width:8px; height:8px; background:var(--green-700); position:static; }
.legal-item h4{ font-size:14.5px; line-height:1.4; }

@media (max-width:900px){
    .legal-inner{ grid-template-columns:1fr; gap:32px; }
    .legal-copy{ max-width:none; }
    .legal-items{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
    .legal{ padding:0 0 16px; }
    .legal-card{
        padding:24px;
        border-radius:20px;
    }
    .legal-copy{ text-align:center; margin-bottom:24px; }
    .legal-copy .eyebrow{ justify-content:center; }
    .legal-copy p{ font-size:14px; }

    .legal-item{
        padding:16px;
        border-radius:14px;
        gap:12px;
    }
    .legal-item .li-icon{ width:30px; height:30px; }
    .legal-item h4{ font-size:13.5px; line-height:1.5; }
    .legal-items{
        grid-template-columns:1fr;
        gap:12px;
    }
    .legal-item{
        align-items:center;
        gap:14px;
    }
    .legal-item .li-icon{
        width:34px;
        height:34px;
    }
    .legal-item h4{
        font-size:14px;
        line-height:1.55;
    }
}
/* ===== Kinan Group cross-promo ===== */
.group{ padding:100px 0; background:var(--white); }
.group-card{
    background:linear-gradient(120deg, var(--green-050) 0%, var(--orange-100) 100%);
    border-radius:28px;
    padding:56px;
    display:grid;
    grid-template-columns:1.3fr 0.7fr;
    gap:40px;
    align-items:center;
    border:1px solid var(--line);
}
.group-card h3{ font-size:26px; line-height:1.35; margin-top:14px; }
.group-card p{ font-size:15.5px; line-height:1.7; color:#4A5A4F; margin-top:14px; max-width:480px;}
.group-visual{
    display:flex; justify-content:center;
}
.group-pill{
    background:var(--white); border-radius:20px; padding:30px;
    border:1px solid var(--line);
    text-align:center;
    width:100%; max-width:260px;
    box-shadow:var(--shadow);
}
.group-pill .mark{ margin:0 auto 14px; }
.group-pill .site{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--green-700); font-weight:600; margin-top:6px;}
.group-pill .tagline{ font-size:12.5px; color:#5C6C60; margin-top:10px; line-height:1.5;}

.group-pill .logo-lockup img.logo-img{
    width:78%;   /* dari 62% -> 78%: logo lebih besar di dalam lingkaran */
    height:auto;
    margin:0 auto 22px;
}
.group-pill .site{
    display:inline-block;
    transition:color .2s;
}
.group-pill .site:hover{
    color:var(--orange-600);
}
.group-pill .tagline{
    margin-top:10px;
}
@media (max-width:640px){
    .group-card > div:first-child{
        text-align:center;
    }
    .group-card .eyebrow{
        justify-content:center;
    }
    .group-card h3{
        font-size:20px;
        line-height:1.35;
        margin-top:10px;
    }
    .group-card p{
        font-size:14px;
        line-height:1.75;
        margin-top:12px;
    }

    .group-card .btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        width:auto;
        max-width:none;
        margin:22px auto 0 !important;
        background:linear-gradient(135deg, var(--green-700), var(--green-900));
        color:var(--white);
        border:none;
        font-weight:700;
        font-size:13.5px;
        padding:14px 26px;
        border-radius:999px;
        box-shadow:0 10px 22px -10px rgba(21,59,36,0.5);
        transition:all .25s var(--ease);
    }
    .group-card .btn:hover{
        transform:translateY(-2px);
        box-shadow:0 14px 26px -10px rgba(21,59,36,0.55);
    }
    .group-card .btn::after{
        content:"→";
        font-size:15px;
    }
}
/* ===== CTA ===== */
.cta{
    padding:70px 0;
    background:var(--orange-500);
    position:relative;
    overflow:hidden;
    text-align:center;
}
.cta .petal{ position:absolute; opacity:.15; background:var(--white); }
.cta .petal.c1{ width:380px;height:380px; top:-140px; right:-100px; }
.cta .petal.c2{ width:260px;height:260px; bottom:-120px; left:-60px; transform:rotate(140deg);}
.cta .wrap{ position:relative; z-index:2; }
.cta .eyebrow{ color:var(--green-900); }
.cta .eyebrow::before{ background:var(--green-900); }
.cta h2{ color:var(--white); font-size:clamp(30px,4vw,46px); margin-top:18px; max-width:680px; margin-left:auto; margin-right:auto; line-height:1.2;}
.cta p{ color:rgba(21,59,36,0.85); font-size:17px; margin-top:18px; max-width:520px; margin-left:auto; margin-right:auto; line-height:1.7; font-weight:500;}
.cta-ctas{ display:flex; gap:16px; justify-content:center; margin-top:36px; flex-wrap:wrap;}
.cta .btn-primary{ background:var(--green-900); box-shadow:0 12px 24px -10px rgba(21,59,36,0.5); }
.cta .btn-primary:hover{ background:var(--ink); }
.cta .btn-outline{ border-color:var(--green-900); color:var(--green-900); }
.cta .btn-outline:hover{ background:var(--green-900); color:var(--white); }
@media (max-width:640px){
    .cta{ padding:56px 0 60px; }
    .cta h2{
        font-size:26px;
        line-height:1.3;
        margin-top:14px;
    }
    .cta p{
        font-size:14.5px;
        line-height:1.7;
        margin-top:14px;
    }
    .cta .eyebrow{ justify-content:center; }
}

@media (max-width:400px){
    .cta h2{ font-size:23px; }
    .cta p{ font-size:14px; }
}
/* ===== Footer ===== */
footer{ background:var(--green-900); color:rgba(255,255,255,0.75); padding:80px 0 32px; }
.foot-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;   /* baru: kelompok kolom di-center sebagai satu blok */
    gap:64px;
}
.foot-grid > div{
    flex:0 0 auto;
}
.foot-brand{
    flex:0 1 300px;
    max-width:300px;
}
.foot-divider{
    max-width:1100px;      /* lebih pendek dari .wrap (1180px), menyesuaikan lebar konten di atasnya */
    margin:56px auto 0;   /* center + jarak dari konten di atas */
    border:none;
    border-top:3px solid rgba(255,255,255,0.16);   /* dari 1px -> 1.5px: sedikit lebih tebal */
}

/* Logo card — dipastikan logo tidak terpotong dengan padding memadai */
.foot-logo-card{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    border-radius:0;
    padding:0;
    max-width:260px;
}
.foot-logo-card img.logo-img{
    height:auto;
    max-height:80px;
    width:100%;
    object-fit:contain;
    filter:brightness(0) invert(1);
}

.foot-brand p{ font-size:14.5px; line-height:1.7; margin-top:20px; max-width:280px; color:rgba(255,255,255,0.65);}

/* Ikon sosial media — lebih besar & lebih tebal (outline, bukan solid tipis) */
.foot-social{ display:flex; gap:12px; margin-top:24px; }
.foot-social a{
    width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,0.08);
    border:1.5px solid rgba(255,255,255,0.18);
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,0.85);
    font-size:17px;   /* baru: ukuran ikon Font Awesome */
    transition:.25s;
}
.foot-social a:hover{
    background:var(--orange-500);
    border-color:var(--orange-500);
    color:var(--white);
    transform:translateY(-2px);
}

footer h5{
    font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.1em;
    text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:22px; font-weight:600;
}
footer ul li{ margin-bottom:15px; }
footer ul a{ font-size:14.5px; color:rgba(255,255,255,0.8); transition:.2s; }
footer ul a:hover{ color:var(--orange-400); }

/* Kontak — tiap baris punya ikon di depan, sejajar rapi seperti referensi */
.foot-contact{ display:flex; flex-direction:column; gap:16px; }
.foot-contact li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:0;
    font-size:14px;
    line-height:1.6;
    color:rgba(255,255,255,0.75);
}
.foot-contact .fc-icon{
    flex-shrink:0;
    margin-top:2px;
    color:var(--orange-400);
}

.foot-bottom{
    display:flex; justify-content:space-between; align-items:center;
    padding-top:28px; flex-wrap:wrap; gap:12px;
    font-size:13px; color:rgba(255,255,255,0.45);
    max-width:1100px;   /* baru: sejajarkan lebar dengan .foot-divider di atasnya */
    margin:0 auto;
}

.desktop-only{
    display:inline;
}
@media (max-width:640px){
    .foot-logo-card{
        max-width:180px;
    }
    .foot-logo-card img.logo-img{
        max-height:48px;
    }
}
/* ===== reveal ===== */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

.about-text.reveal{ transition-delay:.12s; }

/* ===== Responsive ===== */
@media (max-width:1200px){
    nav, .header-actions .btn-outline{ display:none; }
    .nav-toggle{ display:block; }
    .hero-grid, .about-grid, .vm-grid, .pilar-layout, .group-card{ grid-template-columns:1fr; }
    .hero-visual{ display:none; }
    .hero-visual{ display:none !important; }
    .hero-bloom{ display:none !important; }
    .letters{ grid-template-columns:repeat(3,1fr); }
    .foot-grid{ gap:40px; }
    .foot-brand{ flex-basis:100%; max-width:100%; }

    /* baru: rapikan urutan & jarak section "Tentang Kami" saat stack */
    .about-grid{ gap:40px; }
    .about-card{ order:2; min-height:280px; }
    .about-text{ order:1; padding:0 4px; }
}
@media (max-width:640px){
    .foot-grid{ grid-template-columns:1fr; }
    /* baru: footer bottom jadi tumpuk vertikal & lebih lega di mobile */
    .foot-divider{ margin-top:40px; }
    .foot-bottom{
        justify-content:center;
        text-align:center;
    }

    .desktop-only{
        display:none;
    }

    .foot-bottom{
        display:block;
    }

    .foot-copyright{
        display:block;
        font-size:13px;
        line-height:1.6;
    }
    .about, .visi-misi, .pilar, .ikhlas, .group, .cta{ padding:70px 0; }
    .hero-ctas, .cta-ctas{
        flex-direction:row;
        flex-wrap:wrap;
        align-items:stretch;
        gap:12px;
    }
    .hero-ctas .btn, .cta-ctas .btn{
        flex:1 1 0;
        min-width:0;
        width:auto;
        white-space:normal;
        text-align:center;
        padding:13px 16px;
        font-size:13.5px;
        line-height:1.3;
    }
    /* baru: logo Kinan Cahaya Dialis mengecil di mobile */
    .group-pill .logo-lockup img.logo-img{
        height:100px;
        margin:0 auto 16px;
    }
    .group-pill{
        max-width:320px;
        margin:0 auto;
    }
}
@media (max-width:400px){
    .hero-ctas .btn, .cta-ctas .btn{
        font-size:12.5px;
        padding:12px 12px;
    }
}
@media (max-width:480px){
    .wrap{ padding:0 16px; }
    header .wrap{ height:64px; }
    .about-card, .visi-block, .group-card{ padding:26px; border-radius:20px; }
    .group-card{ gap:28px; }
    .legal-item{ min-width:100%; max-width:100%; }
    .letter-card{ padding:20px 12px; }

    .logo-lockup img.logo-img{ height:34px; }
    header .logo-lockup img.logo-img{ height:34px; }

    .header-actions{ gap:8px; }
    .header-actions .btn-primary{
        padding:9px 14px;
        font-size:12.5px;
        white-space:nowrap;
    }
    .nav-toggle{ padding:6px; }
}

@media (max-width:360px){
    .header-actions .btn-primary{ padding:8px 12px; font-size:12px; }
}
/* safety net: nothing is ever allowed to force horizontal scroll */
img, svg, video, iframe, table{ max-width:100%; height:auto; }
.wrap, section{ max-width:100vw; }

/* ===== Nav Dropdown ===== */
.has-dropdown{ position:relative; }
.has-dropdown > a{ display:inline-flex; align-items:center; gap:5px; }
.has-dropdown .chev{
    transition:transform .25s var(--ease);
    position:relative;
    top:1px;
}
.dropdown li{ list-style:none; }
.dropdown a{
    display:block;
    padding:11px 14px;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
    color:var(--green-900);
    transition:background .2s;
}

/* Perilaku dropdown khusus DESKTOP (hover) — tidak pernah aktif di bawah 961px,
   supaya tidak bentrok dengan versi mobile (klik/tap) di bawahnya. */
@media (min-width:1201px){
    .has-dropdown:hover .chev{ transform:rotate(180deg); }
    .dropdown{
        position:absolute;
        top:calc(100% + 14px);
        left:50%;
        transform:translateX(-50%) translateY(8px);
        background:var(--white);
        border:1px solid var(--line);
        border-radius:14px;
        box-shadow:var(--shadow);
        min-width:220px;
        padding:8px;
        opacity:0;
        visibility:hidden;
        transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
        z-index:150;
        white-space:nowrap;
    }
    .has-dropdown:hover .dropdown,
    .has-dropdown:focus-within .dropdown{
        opacity:1;
        visibility:visible;
        transform:translateX(-50%) translateY(0);
    }
    .dropdown a:hover{ background:var(--green-050); color:var(--orange-600); }
}

body.nav-locked{ overflow:hidden; }

@media (max-width:1200px){
    nav{
        display:none;
        position:absolute;
        top:100%; left:0; right:0;
        background:var(--paper);
        border-bottom:1px solid var(--line);
        padding:20px 24px 28px;
        max-height:calc(100vh - 78px);
        overflow-y:auto;
        overflow-x:hidden;   /* baru: cegah dropdown meluber ke samping */
        z-index:120;
        box-shadow:0 20px 40px -10px rgba(21,59,36,0.25);
    }
    nav.nav-open{ display:block; }

    nav ul{
        flex-direction:column;
        align-items:stretch;
        gap:0;
    }
    nav ul > li{
        width:100%;
        border-bottom:1px solid var(--line);
    }
    nav ul > li:last-child{ border-bottom:none; }

    nav a{
        width:100%;
        padding:15px 2px;
        font-size:15px;
    }
    /*.has-dropdown > a{ justify-content:space-between; }*/

    .has-dropdown.open .chev{
        transform:rotate(180deg);
    }

    .dropdown{
        position:static;
        transform:none;
        opacity:1; visibility:visible;
        box-shadow:none; border:none;
        background:transparent;
        display:none;
        padding:2px 0 6px 16px;
        min-width:0;
    }
    .has-dropdown.open .dropdown{ display:block; }
    .dropdown a{
        padding:11px 4px;
        font-size:13.5px;
        color:var(--green-700);
        white-space:normal;   /* baru: override nowrap dari desktop, boleh membungkus */
        width:100%;           /* baru: pastikan tidak melebihi lebar nav */
    }
}

/* ===== Modal Donasi ===== */
.donate-modal-overlay{
    position:fixed; inset:0;
    background:rgba(21,32,24,0.55);
    backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
    padding:24px;
    z-index:200;
    opacity:0;
    visibility:hidden;
    transition:opacity .25s var(--ease), visibility .25s;
}
.donate-modal-overlay.open{ opacity:1; visibility:visible; }
.donate-modal{
    background:var(--paper);
    border-radius:24px;
    padding:36px;
    max-width:440px;
    width:100%;
    max-height:88vh;
    overflow-y:auto;
    position:relative;
    box-shadow:0 30px 60px -20px rgba(21,59,36,0.4);
    transform:translateY(16px) scale(.98);
    transition:transform .25s var(--ease);
}
.donate-modal-overlay.open .donate-modal{ transform:translateY(0) scale(1); }
.donate-modal-close{
    position:absolute; top:18px; right:18px;
    width:34px; height:34px; border-radius:50%;
    background:var(--green-050); border:none;
    font-size:20px; line-height:1; color:var(--green-900);
    display:flex; align-items:center; justify-content:center;
    transition:background .2s;
}
.donate-modal-close:hover{ background:var(--orange-100); color:var(--orange-600); }
.donate-modal h3{ font-size:22px; margin-top:12px; line-height:1.3; margin-bottom:26px; }
/* ===== Donate Steps Indicator ===== */
.donate-steps{ display:flex; align-items:center; justify-content:center; gap:8px; margin:24px 0 28px; }
.donate-step-dot{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.donate-step-dot span{
    width:30px; height:30px; border-radius:50%;
    background:var(--green-050); border:1.5px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    font-family:'Sora',sans-serif; font-weight:700; font-size:13px;
    color:#7C8B7F; transition:all .25s var(--ease);
}
.donate-step-dot label{ font-size:10.5px; font-weight:600; color:#7C8B7F; text-transform:uppercase; letter-spacing:.04em; }
.donate-step-dot.active span{ background:var(--orange-500); border-color:var(--orange-500); color:var(--white); }
.donate-step-dot.active label{ color:var(--green-900); }
.donate-step-dot.done span{ background:var(--green-700); border-color:var(--green-700); color:var(--white); }
.donate-step-line{ width:32px; height:1.5px; background:var(--line); margin-bottom:18px; }

/* ===== Donate Panels ===== */
.donate-panel{ display:none; }
.donate-panel.active{ display:block; animation:fadeInUp .3s var(--ease); }
.donate-step-actions{ display:flex; gap:12px; margin-top:26px; }
.donate-step-actions .btn{ flex:1; }
.donate-step-actions .donate-submit{ margin-top:0; }

/* ===== Payment Methods ===== */
.pay-methods{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.pay-method-btn{
    display:flex; align-items:center; gap:10px;
    padding:13px 14px; border-radius:12px;
    border:1.5px solid var(--line); background:var(--white);
    font-weight:700; font-size:13.5px; color:var(--green-900);
    transition:all .2s var(--ease);
}
.pay-method-btn:hover{ border-color:var(--orange-400); }
.pay-method-btn.active{ background:var(--green-900); border-color:var(--green-900); color:var(--white); }
.pm-icon{
    width:28px; height:28px; border-radius:8px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    background:var(--green-050); color:var(--green-700); font-size:13px; font-weight:800;
}
.pay-method-btn.active .pm-icon{ background:rgba(255,255,255,0.14); color:var(--white); }
.pm-icon-dana{ color:#118EEA; }
.pm-icon-bsi{ color:#00A650; font-size:10px; }
.pay-method-btn.active .pm-icon-dana, .pay-method-btn.active .pm-icon-bsi{ color:var(--white); }

.pay-detail{ margin-top:22px; }
/*.pay-qr-placeholder{*/
/*    width:100%; max-width:220px; aspect-ratio:1; margin:0 auto;*/
/*    border-radius:16px; border:1.5px dashed var(--line); background:var(--green-050);*/
/*    display:flex; flex-direction:column; align-items:center; justify-content:center;*/
/*    gap:10px; color:#7C8B7F; text-align:center; padding:16px;*/
/*}*/
/*.pay-qr-placeholder i{ font-size:36px; color:var(--green-500); opacity:.6; }*/
/*.pay-qr-placeholder span{ font-size:12px; line-height:1.5; }*/
.pay-detail-note{ text-align:center; font-size:13px; line-height:1.6; color:#5C6C60; margin-top:14px; }
.pay-account-card{
    display:flex; flex-direction:column; gap:6px;
    background:var(--green-050); border:1px solid var(--line);
    border-radius:14px; padding:20px; text-align:center;
}
/* 2 metode saja -> grid tetap rapi jadi 1 baris */
.pay-methods-duo{
    grid-template-columns:1fr 1fr;
}

.pay-qr-image{
    width:100%; max-width:240px;
    aspect-ratio:1;
    margin:0 auto;
    border-radius:16px;
    overflow:hidden;
    border:1.5px solid var(--line);
    background:var(--white);
    box-shadow:var(--shadow);
}
.pay-qr-image img{
    width:100%; height:100%;
    object-fit:contain;
    display:block;
}

@media (max-width:480px){
    .pay-qr-image{ max-width:200px; }
}

.pac-label{ font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--orange-600); }
.pac-number{ font-family:'Sora',sans-serif; font-weight:800; font-size:20px; color:var(--green-900); letter-spacing:.02em; }
.pac-name{ font-size:12.5px; color:#5C6C60; }

@media (max-width:480px){
    .donate-steps{ gap:6px; margin:18px 0 22px; }
    .donate-step-dot span{ width:26px; height:26px; font-size:12px; }
    .donate-step-dot label{ font-size:9.5px; }
    .donate-step-line{ width:20px; }
    .pay-methods{ gap:8px; }
    .pay-method-btn{ padding:11px 10px; font-size:12.5px; }
    .pay-qr-placeholder{ max-width:180px; }
    .pac-number{ font-size:17px; }
    .donate-step-actions{ gap:10px; }
}
.donate-label{
    display:block;
    font-family:'JetBrains Mono',monospace;
    font-size:11.5px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase;
    color:var(--green-700);
    margin:20px 0 10px;
}
.donate-label:first-of-type{ margin-top:0; }

.donate-type-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:10px;
}
.type-tab{
    padding:13px 12px;
    border-radius:12px;
    border:1.5px solid var(--line);
    background:var(--white);
    font-weight:700;
    font-size:13.5px;
    color:var(--green-900);
    transition:all .2s var(--ease);
    text-align:center;
}
.type-tab:hover{ border-color:var(--orange-400); }
.type-tab.active{
    background:var(--green-900);
    border-color:var(--green-900);
    color:var(--white);
}

.donate-amounts{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}
.amount-btn{
    padding:13px 10px;
    border-radius:12px;
    border:1.5px solid var(--line);
    background:var(--white);
    font-weight:700; font-size:14px;
    color:var(--green-900);
    transition:all .2s var(--ease);
}
.amount-btn:hover{ border-color:var(--orange-400); }
.amount-btn.active{
    background:var(--green-900);
    border-color:var(--green-900);
    color:var(--white);
}
.amount-btn-custom{ grid-column:span 2; }

.donate-input, .donate-select{
    width:100%;
    padding:13px 16px;
    border-radius:12px;
    border:1.5px solid var(--line);
    background:var(--white);
    font-family:inherit;
    font-size:14.5px;
    color:var(--ink);
    margin-top:10px;
    resize:vertical;
}
.donate-input:focus, .donate-select:focus{ outline:none; border-color:var(--orange-500); }

.donate-submit{ width:100%; margin-top:26px; }
.donate-success{
    display:none;
    margin-top:16px;
    padding:14px 16px;
    border-radius:12px;
    background:var(--green-050);
    color:var(--green-900);
    font-size:14px; line-height:1.6;
    text-align:center;
}
.donate-success.show{ display:block; }

body.modal-open{ overflow:hidden; }

@media (max-width:640px){
    .donate-modal-overlay{ padding:16px; }
    .donate-modal{
        padding:24px;
        border-radius:20px;
        max-height:90vh;
    }
    .donate-modal-close{
        top:14px; right:14px;
        width:30px; height:30px;
        font-size:18px;
    }
    .donate-modal .eyebrow{ font-size:10.5px; }
    .donate-modal h3{
        font-size:18px;
        line-height:1.35;
        margin-top:10px;
        margin-bottom:0;
    }

    /* Steps */
    .donate-steps{ margin:20px 0 24px; }

    /* Labels & inputs */
    .donate-label{
        font-size:10.5px;
        margin:16px 0 8px;
    }
    .donate-input, .donate-select{
        padding:12px 14px;
        font-size:14px;
    }

    /* Jenis donasi tabs */
    .donate-type-tabs{ gap:8px; }
    .type-tab{
        padding:11px 10px;
        font-size:12.5px;
    }

    /* Nominal donasi */
    .donate-amounts{ gap:8px; }
    .amount-btn{
        padding:11px 8px;
        font-size:13px;
    }

    /* Payment methods */
    .pay-methods{ gap:8px; }
    .pay-method-btn{
        padding:11px 12px;
        font-size:12.5px;
    }
    .pm-icon{ width:24px; height:24px; font-size:11px; }
    .pay-detail{ margin-top:18px; }
    .pay-qr-placeholder{
        max-width:180px;
        padding:14px;
        border-radius:14px;
    }
    .pay-qr-placeholder i{ font-size:30px; }
    .pay-qr-placeholder span{ font-size:11px; }
    .pay-detail-note{ font-size:12px; margin-top:12px; }
    .pay-account-card{ padding:16px; }
    .pac-label{ font-size:10px; }
    .pac-number{ font-size:17px; }
    .pac-name{ font-size:11.5px; }

    /* Step actions & buttons */
    .donate-step-actions{ gap:8px; margin-top:20px; }
    .donate-step-actions .btn{
        padding:12px 14px;
        font-size:13px;
    }
    .donate-submit{
        padding:13px 16px;
        font-size:13.5px;
        margin-top:20px;
    }

    /* Upload bukti transfer (step 3) */
    .file-drop{
        padding:12px 14px;
        font-size:12.5px;
    }
    .file-drop i{ font-size:14px; }

    .donate-success{ font-size:13px; padding:12px 14px; }
}

@media (max-width:400px){
    .donate-modal{ padding:20px; }
    .donate-modal h3{ font-size:16.5px; }
    .donate-steps{ gap:6px; margin:16px 0 20px; }
    .donate-step-dot span{ width:24px; height:24px; font-size:11px; }
    .donate-step-dot label{ font-size:9px; }
    .donate-step-line{ width:16px; }
    .pay-methods{ grid-template-columns:1fr 1fr; }
    .pay-method-btn{ padding:10px 8px; font-size:12px; }
    .amount-btn{ font-size:12.5px; }
}
/* ===== Struktur Organisasi ===== */
.struktur-page{ padding:90px 0; background:var(--green-050); }
.struktur-frame{
    background:var(--white);
    border-radius:24px;
    border:1px solid var(--line);
    padding:24px;
    box-shadow:var(--shadow);
    overflow-x:auto;   /* kalau gambar sangat lebar, bisa di-scroll horizontal daripada terpotong */
}
.struktur-frame img{
    width:100%;
    height:auto;
    border-radius:12px;
    display:block;
}

@media (max-width:640px){
    .struktur-page{ padding:48px 0 70px; }
    .struktur-frame{ padding:14px; border-radius:18px; }
}

/* ===== Bermitra Form ===== */
.bermitra-page{ padding:64px 0 110px; }

.form-alert{
    margin:0 auto 32px;
    padding:16px 20px;
    border-radius:14px;
    font-size:14.5px;
    line-height:1.6;
}
.form-alert-success{
    background:var(--green-050);
    border:1px solid var(--green-500);
    color:var(--green-900);
}
.form-alert-error{
    background:#FDECEC;
    border:1px solid var(--coral);
    color:#7A2020;
}
.form-alert-error ul{ margin:8px 0 0 18px; list-style:disc; }
.form-alert-error li{ margin-bottom:4px; }

.bermitra-form{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:24px;
    padding:40px 48px;
    box-shadow:var(--shadow);
}
.form-section{ margin-bottom:32px; }
.form-section:last-of-type{ margin-bottom:0; }
.form-section h4{
    font-size:15px;
    color:var(--green-900);
    margin-bottom:18px;
    padding-bottom:10px;
    border-bottom:1px solid var(--line);
}
.form-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
}
@media (max-width:900px){
    .form-grid{ grid-template-columns:1fr 1fr; }
}
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field-full{ grid-column:1 / -1; }
.form-field label{
    font-size:13.5px;
    font-weight:600;
    color:var(--green-900);
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="date"],
.form-field textarea,
.form-field select.form-select,
.form-field input[type="file"]{
    padding:12px 14px;
    border-radius:12px;
    border:1.5px solid var(--line);
    font-family:inherit;
    font-size:14.5px;
    color:var(--ink);
    background:var(--paper);
    resize:vertical;
    height:47px;
    box-sizing:border-box;
}
.form-field select.form-select{
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23153B24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:16px;
    padding-right:38px;
    cursor:pointer;
}
.field-hint{
    font-size:12px;
    color:#7C8B7F;
    margin-top:-2px;
}
.tag-input-wrap{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-radius:12px;
    border:1.5px solid var(--line);
    background:var(--paper);
    min-height:47px;
}
.tag-input-wrap:focus-within{
    border-color:var(--orange-500);
    background:var(--white);
}
.tag-input-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.tag-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 10px;
    border-radius:999px;
    background:var(--green-050);
    border:1px solid var(--line);
    font-size:13px;
    font-weight:600;
    color:var(--green-900);
}
.tag-chip button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:16px; height:16px;
    border-radius:50%;
    background:rgba(21,59,36,0.12);
    color:var(--green-900);
    font-size:10px;
    line-height:1;
    border:none;
}
.tag-chip button:hover{ background:var(--coral); color:var(--white); }
.tag-input-field{
    flex:1;
    min-width:140px;
    border:none;
    outline:none;
    background:transparent;
    font-family:inherit;
    font-size:14.5px;
    color:var(--ink);
    padding:4px 2px;
}

/* Styling khusus date picker, biar konsisten sama input lain */
.form-field input[type="date"]{
    appearance:none;
    -webkit-appearance:none;
    line-height:1.4;
    cursor:pointer;
}
.form-field input[type="date"]::-webkit-calendar-picker-indicator{
    filter:invert(24%) sepia(53%) saturate(638%) hue-rotate(103deg) brightness(94%) contrast(92%);
    cursor:pointer;
    padding:4px;
    border-radius:6px;
    transition:background .2s;
}
.form-field input[type="date"]::-webkit-calendar-picker-indicator:hover{
    background:var(--green-050);
}
.form-field input:focus, .form-field textarea:focus{
    outline:none;
    border-color:var(--orange-500);
    background:var(--white);
}
.form-field input[type="file"]{
    padding:10px 14px;
    cursor:pointer;
}
.form-submit{
    display:block;
    width:fit-content;
    margin:28px auto 0;
}
@media (max-width:640px){
    .bermitra-form{ padding:24px; border-radius:18px; }
    .form-grid{ grid-template-columns:1fr; }
}
.form-field-date{
    justify-self:start;
    width:200px;
}
.form-field-date input[type="date"]{
    width:100%;
}

/* Kartu upload custom, menggantikan tampilan default input file */
.file-input-hidden{
    position:absolute;
    width:1px; height:1px;
    opacity:0;
    overflow:hidden;
    pointer-events:none;
}
.file-drop{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 16px;
    border-radius:12px;
    border:1.5px dashed var(--line);
    background:var(--paper);
    font-size:14px;
    color:#5C6C60;
    cursor:pointer;
    transition:all .2s var(--ease);
}
.file-drop i{
    font-size:16px;
    color:var(--orange-500);
    flex-shrink:0;
}
.file-drop:hover{
    border-color:var(--orange-400);
    background:var(--orange-100);
}
.file-drop.has-file{
    border-style:solid;
    border-color:var(--green-500);
    background:var(--green-050);
    color:var(--green-900);
    font-weight:600;
}
.file-drop-text{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.file-multi-wrap{ display:flex; flex-direction:column; gap:10px; }
.file-multi-row{ display:flex; align-items:center; gap:8px; }
.file-multi-row .file-drop{ flex:1; }

.file-remove-btn{
    flex-shrink:0;
    width:38px; height:38px;
    border-radius:10px;
    border:1.5px solid var(--line);
    background:var(--white);
    color:#B0403A;
    display:flex; align-items:center; justify-content:center;
    font-size:13px;
    transition:all .2s var(--ease);
}
.file-remove-btn:hover{
    background:#FDECEC;
    border-color:var(--coral);
}

.file-add-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:10px;
    padding:9px 16px;
    border-radius:999px;
    border:1.5px dashed var(--green-500);
    background:transparent;
    color:var(--green-700);
    font-size:13px;
    font-weight:700;
    transition:all .2s var(--ease);
}
.file-add-btn i{ font-size:12px; }
.file-add-btn:hover{
    background:var(--green-050);
    border-style:solid;
}
@media (max-width:640px){
    /* Hero */
    .bermitra-page{ padding:48px 0 70px; }
    .bermitra-page .sec-head-center h1,
    .bermitra-page .sec-head-center h2{
        font-size:24px;
        line-height:1.3;
    }
    .bermitra-page .sec-head-center p{
        font-size:14.5px;
        line-height:1.7;
    }
    .bermitra-page .eyebrow{ justify-content:center; }

    /* Form container */
    .form-section{ margin-bottom:26px; }
    .form-section h4{
        font-size:14px;
        margin-bottom:14px;
        padding-bottom:8px;
    }
    .form-field label{ font-size:13px; }
    .form-field input,
    .form-field textarea,
    .form-field select.form-select{
        font-size:14px;
        padding:11px 13px;
    }
    .field-hint{ font-size:11.5px; }

    /* Placeholder text */
    .form-field textarea::placeholder,
    .form-field input::placeholder,
    .tag-input-field::placeholder{
        font-size:13px;
        line-height:1.5;
    }

    /* Tag input */
    .tag-input-wrap{
        padding:8px 10px;
        flex-wrap:wrap;
    }
    .tag-chip{ font-size:12px; padding:4px 9px; }
    .tag-input-field{
        font-size:14px;
        width:100%;
        min-width:100%;
    }

    /* File upload cards */
    .file-drop{
        padding:12px 14px;
        font-size:13px;
    }
    .file-add-btn{
        font-size:12px;
        padding:8px 14px;
    }
    .file-remove-btn{
        width:34px;
        height:34px;
    }

    /* Submit button */
    .form-submit{
        display:flex !important;
        width:100% !important;
        max-width:none;
        justify-content:center;
    }
    .form-submit.btn,
    button.form-submit{
        width:fit-content !important;
        max-width:100%;
        margin-top:24px !important;
        font-size:14px;
        padding:10px 20px;
        white-space:normal;
        line-height:1.3;
        gap:10px;
    }
}

@media (max-width:400px){
    .bermitra-page .sec-head-center h1,
    .bermitra-page .sec-head-center h2{ font-size:21px; }

    .form-field textarea::placeholder,
    .form-field input::placeholder,
    .tag-input-field::placeholder{
        font-size:12px;
    }
}
@media (max-width:380px){
    .hero-ctas .btn{
        padding:11px 14px;
        font-size:12px;
    }
}

/* ===== Program Page ===== */
.program-hero{
    padding:64px 0 10px;
    background:var(--paper);
    overflow:hidden;
    position:relative;
}
.ph-petal{
    width:340px; height:340px;
    background:var(--orange-100);
    opacity:.5;
    top:-130px; right:-90px;
    transform:rotate(20deg);
}
.program-hero h1{
    font-size:clamp(30px,4vw,44px);
    line-height:1.15;
    margin-top:16px;
    color:var(--green-900);
}
.program-hero p{
    margin-top:16px;
    font-size:16.5px;
    line-height:1.7;
    color:#4A5A4F;
    max-width:640px;
    margin-left:auto;
    margin-right:auto;
}

.program-page{ padding:0 0 90px; background:var(--paper); }

.program-tabs{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:48px;
}
.ptab{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 22px;
    border-radius:999px;
    border:1.5px solid var(--line);
    background:var(--white);
    font-weight:700;
    font-size:14px;
    color:var(--green-900);
    transition:all .25s var(--ease);
}
.ptab i{ font-size:13px; color:var(--green-700); transition:color .25s; }
.ptab:hover{ border-color:var(--orange-400); }
.ptab.active{
    background:var(--green-900);
    border-color:var(--green-900);
    color:var(--white);
}
.ptab.active i{ color:var(--orange-400); }

.program-panel{
    display:none;
    animation:fadeInUp .4s var(--ease);
}
.program-panel.active{ display:block; }
@keyframes fadeInUp{
    from{ opacity:0; transform:translateY(12px); }
    to{ opacity:1; transform:translateY(0); }
}

.program-panel-head{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:16px;
    margin-bottom:40px;
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
}
.pp-badge{
    flex-shrink:0;
    width:52px; height:52px;
    border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    color:var(--white);
    font-size:22px;
    box-shadow:var(--shadow);
    margin:0 auto;
}
.pp-badge[data-accent="orange"]{ background:linear-gradient(135deg, var(--orange-500), var(--orange-600)); }
.pp-badge[data-accent="green"]{ background:linear-gradient(135deg, var(--green-500), var(--green-700)); }
.pp-badge[data-accent="coral"]{ background:linear-gradient(135deg, var(--coral), #B84130); }
.pp-badge[data-accent="teal"]{ background:linear-gradient(135deg, var(--teal), #1F5068); }
.program-panel-head h2{
    font-size:clamp(22px,2.6vw,28px);
    line-height:1.25;
    margin-bottom:8px;
}
.program-panel-head p{
    font-size:15px;
    line-height:1.7;
    color:#4A5A4F;
}

.program-subhead{
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--green-700);
    margin:36px 0 18px;
    padding-bottom:10px;
    border-bottom:1px solid var(--line);
}
.program-subhead:first-of-type{ margin-top:0; }

.program-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:20px;
}
.program-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:20px;
    padding:26px;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.program-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow);
}
.pc-icon{
    width:44px; height:44px;
    border-radius:13px;
    display:flex; align-items:center; justify-content:center;
    font-size:18px;
    color:var(--white);
    margin-bottom:16px;
}
.program-card[data-accent="orange"] .pc-icon{ background:linear-gradient(135deg, var(--orange-500), var(--orange-600)); }
.program-card[data-accent="green"] .pc-icon{ background:linear-gradient(135deg, var(--green-500), var(--green-700)); }
.program-card[data-accent="coral"] .pc-icon{ background:linear-gradient(135deg, var(--coral), #B84130); }
.program-card[data-accent="teal"] .pc-icon{ background:linear-gradient(135deg, var(--teal), #1F5068); }
.program-card h4{
    font-size:16.5px;
    margin-bottom:8px;
    line-height:1.35;
}
.program-card p{
    font-size:14px;
    line-height:1.65;
    color:#4A5A4F;
}
.pc-list{
    margin-top:12px;
    padding-top:12px;
    border-top:1px dashed var(--line);
    list-style:none;
}
.pc-list li{
    font-size:13.5px;
    color:var(--green-900);
    font-weight:600;
    padding:4px 0 4px 18px;
    position:relative;
}
.pc-list li::before{
    content:"";
    position:absolute;
    left:0; top:11px;
    width:6px; height:6px;
    border-radius:50%;
    background:var(--orange-500);
}

@media (max-width:640px){
    /* Hero */
    .program-hero{ padding:48px 0 8px; }
    .program-hero h1{ font-size:26px; line-height:1.25; }
    .program-hero p{ font-size:14.5px; line-height:1.7; }

    .program-page{ padding:0 0 60px; }

    /* Tabs -> single scrollable row instead of wrapping */
    .program-tabs{
        flex-wrap:nowrap;
        justify-content:flex-start;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        gap:8px;
        margin:0 -20px 32px;   /* bleed to screen edge so it scrolls edge-to-edge */
        padding:0 20px 4px;
    }
    .program-tabs::-webkit-scrollbar{ display:none; }
    .ptab{
        flex:0 0 auto;
        padding:10px 16px;
        font-size:13px;
        white-space:nowrap;
    }

    /* Panel head */
    .program-panel-head{
        flex-direction:column;
        gap:12px;
        margin-bottom:28px;
    }
    .pp-badge{ width:44px; height:44px; font-size:18px; border-radius:14px; }
    .program-panel-head h2{ font-size:20px; line-height:1.3; }
    .program-panel-head p{ font-size:14px; line-height:1.65; }

    .program-subhead{ font-size:11px; margin:28px 0 14px; }

    /* Cards */
    .program-grid{ grid-template-columns:1fr; gap:14px; }
    .program-card{ padding:20px; border-radius:16px; }
    .pc-icon{ width:38px; height:38px; font-size:15px; border-radius:11px; margin-bottom:12px; }
    .program-card h4{ font-size:15.5px; }
    .program-card p{ font-size:13.5px; line-height:1.6; }
    .pc-list li{ font-size:13px; }
}

/* ===== Popup Ayat ===== */
.ayat-modal-overlay{
    position:fixed; inset:0;
    background:rgba(21,32,24,0.6);
    backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
    padding:24px;
    z-index:300;
    opacity:0;
    visibility:hidden;
    transition:opacity .3s var(--ease), visibility .3s;
}
.ayat-modal-overlay.open{ opacity:1; visibility:visible; }

.ayat-modal{
    position:relative;
    background:var(--paper);
    border-radius:26px;
    padding:44px 40px;
    max-width:520px;
    width:100%;
    max-height:88vh;
    overflow-y:auto;
    text-align:center;
    box-shadow:0 30px 60px -20px rgba(21,59,36,0.45);
    transform:translateY(16px) scale(.97);
    transition:transform .3s var(--ease);
}
.ayat-modal-overlay.open .ayat-modal{ transform:translateY(0) scale(1); }

.ayat-modal-close{
    position:absolute; top:16px; right:16px;
    width:34px; height:34px; border-radius:50%;
    background:var(--green-050); border:none;
    font-size:20px; line-height:1; color:var(--green-900);
    display:flex; align-items:center; justify-content:center;
    transition:background .2s;
}
.ayat-modal-close:hover{ background:var(--orange-100); color:var(--orange-600); }

.ayat-modal-icon{
    display:flex;
    justify-content:center;
    margin-bottom:18px;
}
.ayat-modal-icon .mark{ width:44px; height:44px; }
.ayat-modal-icon .mark .petal{ width:22px; height:22px; top:11px; left:11px; }

.ayat-eyebrow{
    justify-content:center;
    margin-bottom:20px;
}

.ayat-arabic{
    font-size:24px;
    line-height:2.1;
    color:var(--green-900);
    font-weight:600;
    margin:0 0 24px;
    direction:rtl;
}

.ayat-translation{
    font-size:15px;
    line-height:1.8;
    color:#3B4A40;
    font-style:italic;
    margin:0 0 12px;
}

.ayat-source{
    display:block;
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    font-weight:600;
    letter-spacing:.06em;
    color:var(--orange-600);
    margin-bottom:28px;
}

.ayat-modal-btn{
    width:100%;
}

body.ayat-modal-open{ overflow:hidden; }

@media (max-width:640px){
    .ayat-modal-overlay{ padding:16px; }
    .ayat-modal{
        padding:36px 24px 28px;
        border-radius:22px;
        max-height:85vh;
    }
    .ayat-modal-close{
        top:14px; right:14px;
        width:30px; height:30px;
        font-size:18px;
    }
    .ayat-eyebrow{ font-size:11px; margin-bottom:16px; }
    .ayat-arabic{
        font-size:20px;
        line-height:1.95;
        margin-bottom:20px;
    }
    .ayat-translation{
        font-size:13.5px;
        line-height:1.75;
        margin-bottom:10px;
    }
    .ayat-source{
        font-size:11px;
        margin-bottom:22px;
    }
    .ayat-modal-btn{
        padding:12px 16px;
        font-size:13.5px;
    }
}

@media (max-width:400px){
    .ayat-modal{ padding:32px 20px 24px; }
    .ayat-arabic{ font-size:18px; line-height:1.9; }
    .ayat-translation{ font-size:13px; }
}

/* ===== Proposal Kegiatan ===== */
.proposal-hero{
    padding:64px 0 16px;
    background:var(--paper);
    overflow:hidden;
    position:relative;
}
.prh-petal{
    width:340px; height:340px;
    background:var(--green-100);
    opacity:.6;
    top:-130px; right:-90px;
    transform:rotate(20deg);
}
.proposal-hero h1{
    font-size:clamp(30px,4vw,44px);
    line-height:1.15;
    margin-top:16px;
    color:var(--green-900);
}
.proposal-hero p{
    margin-top:16px;
    font-size:16.5px;
    line-height:1.7;
    color:#4A5A4F;
    max-width:640px;
    margin-left:auto;
    margin-right:auto;
}

.proposal-page{ padding:20px 0 90px; background:var(--paper); }

.proposal-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    gap:28px;
}
.proposal-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:22px;
    overflow:hidden;
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
}
.proposal-preview-frame{
    position:relative;
    width:100%;
    aspect-ratio:4/3;
    background:var(--green-050);
    border-bottom:1px solid var(--line);
}
.proposal-preview-frame iframe{
    width:100%;
    height:100%;
    border:none;
    display:block;
}
.proposal-info{
    padding:28px 24px 24px;
    display:flex;
    flex-direction:column;
    flex:1;
}
.proposal-period{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    font-weight:600;
    color:var(--orange-600);
    margin-bottom:12px;
}
.proposal-info h4{
    font-size:18px;
    line-height:1.35;
    margin-bottom:10px;
}
.proposal-info p{
    font-size:14px;
    line-height:1.65;
    color:#4A5A4F;
    margin-bottom:20px;
    flex:1;
}
.proposal-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}
.proposal-actions .btn{
    flex:0 0 auto;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:14px;
    font-weight:600;
    line-height:1;
    padding:12px 18px;
    border-radius:999px;
    white-space:nowrap;
    text-align:center;
    transition:all .25s ease;
}
/* icon */
.proposal-actions .btn i{
    font-size:14px;
}
/* hover */
.proposal-actions .btn:hover{
    transform:translateY(-2px);
}
/* mobile */
@media(max-width:640px){
    .proposal-actions{
        display:flex;
        flex-direction:row; /* keep side by side */
        flex-wrap:wrap;
        gap:10px;
        align-items:center;
    }
    .proposal-actions .btn{
        flex:1 1 45%; /* share space but allow wrapping */
        min-width:0;
        white-space:normal; /* allow text wrap */
        text-align:center;
        padding:12px 10px;
        line-height:1.3;
    }
}

.proposal-empty{
    text-align:center;
    padding:80px 20px;
    max-width:420px;
    margin:0 auto;
}
.proposal-empty i{
    font-size:44px;
    color:var(--green-500);
    opacity:.5;
    margin-bottom:20px;
    display:block;
}
.proposal-empty h3{
    font-size:20px;
    margin-bottom:10px;
}
.proposal-empty p{
    font-size:14.5px;
    line-height:1.7;
    color:#4A5A4F;
}

/* ===== Kalkulator Zakat ===== */
.zakat-hero{
    padding:64px 0 16px;
    background:var(--paper);
    overflow:hidden;
    position:relative;
}
.zakat-hero .sec-head-center{
    max-width:760px;   /* lebar di desktop agar h1 muat satu baris */
}
.zakat-hero h1{
    font-size:clamp(28px, 4.2vw, 42px);
    line-height:1.15;
    margin-top:16px;
    color:var(--green-900);
}
.zh-petal{
    width:340px; height:340px;
    background:var(--green-100);
    opacity:.6;
    top:-130px; right:-90px;
    transform:rotate(20deg);
}
.zakat-hero h1{
    font-size:clamp(30px,4vw,44px);
    line-height:1.15;
    margin-top:16px;
    color:var(--green-900);
}
.zakat-hero p{
    margin-top:16px;
    font-size:16.5px;
    line-height:1.7;
    color:#4A5A4F;
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
}

.zakat-page{ padding:20px 0 100px; background:var(--paper); }

.zakat-layout{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:32px;
    align-items:start;
}

.zakat-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:24px;
    padding:36px;
    box-shadow:var(--shadow);
}
.zakat-card-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:18px;
    margin-bottom:28px;
}
.zakat-card-title i{ color:var(--orange-500); font-size:17px; }

.zf-group{ margin-bottom:22px; }
.zf-group label{
    display:block;
    font-size:14px;
    font-weight:600;
    color:var(--green-900);
    margin-bottom:8px;
}
.zf-optional{ font-weight:400; color:#7C8B7F; font-size:12.5px; }
.zf-hint{ font-size:12.5px; color:#7C8B7F; margin-top:6px; }

.zf-input-prefix{
    display:flex;
    align-items:center;
    border:1.5px solid var(--line);
    border-radius:12px;
    background:var(--paper);
    overflow:hidden;
    transition:border-color .2s;
}
.zf-input-prefix:focus-within{ border-color:var(--orange-500); background:var(--white); }
.zf-input-prefix span{
    padding:0 14px;
    font-weight:700;
    color:var(--green-700);
    font-size:14.5px;
    border-right:1px solid var(--line);
    align-self:stretch;
    display:flex;
    align-items:center;
}
.zf-input{
    flex:1;
    border:none;
    background:transparent;
    outline:none;
    padding:13px 14px;
    font-family:inherit;
    font-size:15px;
    color:var(--ink);
}

.zf-submit{ width:100%; margin-top:8px; }

.zakat-side{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.zakat-result-card{
    background:var(--green-900);
    border-radius:24px;
    padding:36px;
    color:var(--white);
    min-height:280px;
    display:flex;
    align-items:center;
}
.zr-empty{
    text-align:center;
    width:100%;
}
.zr-empty i{
    font-size:32px;
    color:rgba(255,255,255,0.4);
    margin-bottom:16px;
    display:block;
}
.zr-empty p{
    font-size:14px;
    line-height:1.7;
    color:rgba(255,255,255,0.65);
}

.zr-content{ width:100%; }
.zr-status{
    display:inline-block;
    padding:6px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    margin-bottom:20px;
}
.zr-status-wajib{ background:var(--orange-500); color:var(--white); }
.zr-status-belum{ background:rgba(255,255,255,0.12); color:rgba(255,255,255,0.75); }

.zr-amount-label{
    font-size:13px;
    color:rgba(255,255,255,0.6);
    margin-bottom:6px;
}
.zr-amount{
    font-family:'Sora',sans-serif;
    font-weight:800;
    font-size:36px;
    color:var(--white);
    margin-bottom:24px;
    word-break:break-all;
}
.zr-breakdown{
    border-top:1px solid rgba(255,255,255,0.14);
    border-bottom:1px solid rgba(255,255,255,0.14);
    padding:18px 0;
    margin-bottom:24px;
}
.zr-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:13.5px;
    padding:6px 0;
    color:rgba(255,255,255,0.75);
}
.zr-row strong{ color:var(--white); }
.zr-donate-btn{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.zakat-info-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:20px;
    padding:26px;
}
.zakat-info-card h4{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    margin-bottom:14px;
}
.zakat-info-card h4 i{ color:var(--green-500); }
.zakat-info-card p{
    font-size:13.5px;
    line-height:1.7;
    color:#4A5A4F;
    margin-bottom:10px;
}
.zic-note{
    font-size:12px !important;
    color:#7C8B7F !important;
    font-style:italic;
}
.pac-number-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}
.pac-copy-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px; height:32px;
    border-radius:10px;
    border:1.5px solid var(--line);
    background:var(--white);
    color:var(--green-700);
    font-size:12.5px;
    flex-shrink:0;
    transition:all .2s var(--ease);
}
.pac-copy-btn:hover{
    border-color:var(--orange-400);
    background:var(--orange-100);
    color:var(--orange-600);
}
.pac-copy-btn.copied{
    background:var(--green-700);
    border-color:var(--green-700);
    color:var(--white);
}

@media (max-width:960px){
    .zakat-layout{ grid-template-columns:1fr; }
}
@media (max-width:640px){
    .zakat-page{ padding:16px 0 60px; }
    .zakat-card, .zakat-info-card{ padding:24px; border-radius:18px; }
    .zakat-result-card{ padding:28px; border-radius:18px; min-height:0; }
    .zr-amount{ font-size:28px; }
    .zakat-hero{ padding:48px 0 12px; }
    .zakat-hero .sec-head-center{
        max-width:100%;
    }
    .zakat-hero h1{
        font-size:26px;
        line-height:1.3;
        white-space:normal;   /* pastikan boleh wrap di layar sempit */
    }
    .zakat-hero p{
        font-size:14.5px;
        line-height:1.7;
    }
}
@media (max-width:400px){
    .zakat-hero h1{ font-size:23px; }
}

/* ===== Berita ===== */
.berita-hero{
    padding:64px 0 16px;
    background:var(--paper);
    overflow:hidden;
    position:relative;
}
.bh-petal{
    width:340px; height:340px;
    background:var(--orange-100);
    opacity:.5;
    top:-130px; right:-90px;
    transform:rotate(20deg);
}
.berita-hero h1{
    font-size:clamp(30px,4vw,44px);
    line-height:1.15;
    margin-top:16px;
    color:var(--green-900);
}
.berita-hero p{
    margin-top:16px;
    font-size:16.5px;
    line-height:1.7;
    color:#4A5A4F;
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
}

.berita-page{ padding:20px 0 100px; background:var(--paper); }

.berita-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 320px));
    justify-content:center;
    gap:24px;
}
/*.berita-grid{*/
/*    display:grid;*/
/*    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));*/
/*    gap:28px;*/
/*}*/
.berita-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:22px;
    overflow:hidden;
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.berita-card:hover{
    transform:translateY(-4px);
}
.berita-thumb{
    width:100%;
    aspect-ratio:16/10;
    background:var(--green-050);
    overflow:hidden;
}
.berita-thumb img{
    width:100%; height:100%;
    object-fit:cover;
}
.berita-body{
    padding:24px;
    display:flex;
    flex-direction:column;
    flex:1;
}
.berita-date{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    font-weight:600;
    color:var(--orange-600);
    margin-bottom:12px;
}
.berita-body h4{
    font-size:17px;
    line-height:1.4;
    margin-bottom:10px;
}
.berita-body p{
    font-size:14px;
    line-height:1.65;
    color:#4A5A4F;
    margin-bottom:20px;
    flex:1;
}
.berita-readmore{
    align-self:flex-start;
}

.berita-empty{
    text-align:center;
    padding:80px 20px;
    max-width:420px;
    margin:0 auto;
}
.berita-empty i{
    font-size:44px;
    color:var(--green-500);
    opacity:.5;
    margin-bottom:20px;
    display:block;
}
.berita-empty h3{
    font-size:20px;
    margin-bottom:10px;
}
.berita-empty p{
    font-size:14.5px;
    line-height:1.7;
    color:#4A5A4F;
}

@media (max-width:640px){
    .berita-hero{ padding:48px 0 12px; }
    .berita-hero h1{ font-size:26px; line-height:1.3; }
    .berita-hero p{ font-size:14.5px; line-height:1.7; }
    .berita-page{ padding:16px 0 60px; }
    .berita-grid{ gap:16px; }
    .berita-body{ padding:18px; }
    .berita-empty{ padding:56px 16px; }
}
@media (max-width:400px){
    .berita-hero h1{ font-size:23px; }
}

/* ===== Berita Detail ===== */
.berita-detail-hero{
    padding:56px 0 40px;
    background:var(--paper);
    overflow:hidden;
    position:relative;
}
.berita-detail-hero .bh-petal{
    width:320px; height:320px;
    background:var(--orange-100);
    opacity:.5;
    top:-120px; right:-90px;
    transform:rotate(20deg);
}
.berita-detail-hero .wrap{ position:relative; z-index:2; max-width:800px; }
/* fix: petal dekoratif jangan menutupi teks di hero-hero halaman ini */
.berita-hero .wrap,
.about-page-hero .wrap,
.program-hero .wrap,
.proposal-hero .wrap,
.zakat-hero .wrap{
    position:relative;
    z-index:2;
}
.bdh-back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13.5px;
    font-weight:700;
    color:var(--green-700);
    margin-bottom:24px;
    transition:color .2s, gap .2s;
}
.bdh-back:hover{ color:var(--orange-600); gap:11px; }

.bdh-meta{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:16px;
}
.bdh-dot{ color:#9CAA9E; }
.bdh-category{
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    font-weight:600;
    letter-spacing:.04em;
    color:var(--green-700);
    background:var(--green-100);
    padding:4px 12px;
    border-radius:999px;
}
.bdh-title{
    font-family:'Sora', sans-serif;
    font-weight:800;
    font-size:clamp(26px, 3.6vw, 40px);
    line-height:1.22;
    color:var(--green-900);
}
.bdh-excerpt{
    margin-top:18px;
    font-size:16.5px;
    line-height:1.7;
    color:#4A5A4F;
}

.berita-detail-page{ padding:0 0 100px; background:var(--paper); }

.berita-detail-layout{
    display:grid;
    grid-template-columns:1fr 300px;
    gap:32px;
    align-items:start;
    max-width:1000px;
    margin:0 auto;
}

.berita-detail-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:24px;
    padding:32px;
    box-shadow:var(--shadow);
}
.bdc-cover{
    width:100%;
    border-radius:16px;
    overflow:hidden;
    margin-bottom:32px;
    background:var(--green-050);
}
.bdc-cover img{
    width:100%;
    height:auto;
    display:block;
}

/* Typography untuk konten artikel (rich text dari CMS/editor) */
.berita-content{
    font-size:15.5px;
    line-height:1.85;
    color:#3B4A40;
}
.berita-content > *:first-child{ margin-top:0; }
.berita-content p{ margin:0 0 20px; }
.berita-content h2, .berita-content h3, .berita-content h4{
    color:var(--green-900);
    line-height:1.35;
    margin:36px 0 14px;
}
.berita-content h2{ font-size:22px; }
.berita-content h3{ font-size:19px; }
.berita-content h4{ font-size:16.5px; }
.berita-content img{
    width:100%;
    height:auto;
    border-radius:14px;
    margin:24px 0;
}
.berita-content a{
    color:var(--orange-600);
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:2px;
}
.berita-content ul, .berita-content ol{
    margin:0 0 20px;
    padding-left:22px;
}
.berita-content ul{ list-style:disc; }
.berita-content ol{ list-style:decimal; }
.berita-content li{ margin-bottom:8px; }
.berita-content blockquote{
    margin:24px 0;
    padding:18px 22px;
    border-left:3px solid var(--orange-500);
    background:var(--green-050);
    border-radius:0 14px 14px 0;
    font-style:italic;
    color:var(--green-900);
}
.berita-content strong{ color:var(--green-900); }
.berita-content table{
    width:100%;
    border-collapse:collapse;
    margin:20px 0;
    font-size:14px;
}
.berita-content table th, .berita-content table td{
    border:1px solid var(--line);
    padding:10px 12px;
    text-align:left;
}
.berita-content table th{ background:var(--green-050); }

.bdc-share{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:36px;
    padding-top:24px;
    border-top:1px solid var(--line);
}
.bdc-share-label{
    font-size:13px;
    font-weight:700;
    color:var(--green-900);
}
.bdc-share-links{ display:flex; gap:10px; }
.bdc-share-links a, .bdc-share-links button{
    width:38px; height:38px;
    border-radius:50%;
    background:var(--green-050);
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    color:var(--green-900);
    font-size:14px;
    transition:.2s;
}
.bdc-share-links a:hover, .bdc-share-links button:hover{
    background:var(--orange-500);
    border-color:var(--orange-500);
    color:var(--white);
}

.bdc-back-bottom{ margin-top:32px; }

.berita-detail-side{ position:sticky; top:96px; }
.bds-card{
    background:var(--green-900);
    border-radius:22px;
    padding:28px;
    color:var(--white);
}
.bds-card .mark{ margin-bottom:16px; }
.bds-card h4{ color:var(--white); font-size:17px; line-height:1.35; }
.bds-card p{
    margin-top:10px;
    font-size:13.5px;
    line-height:1.65;
    color:rgba(255,255,255,0.7);
}

@media (max-width:900px){
    .berita-detail-layout{ grid-template-columns:1fr; }
    .berita-detail-side{ position:static; }
}

@media (max-width:640px){
    .berita-detail-hero{ padding:40px 0 28px; }
    .bdh-back{ margin-bottom:18px; font-size:13px; }
    .bdh-title{ font-size:24px; line-height:1.3; }
    .bdh-excerpt{ font-size:14.5px; margin-top:14px; }

    .berita-detail-page{ padding:0 0 60px; }
    .berita-detail-layout{ gap:20px; }
    .berita-detail-card{ padding:20px; border-radius:18px; }
    .bdc-cover{ border-radius:12px; margin-bottom:22px; }
    .berita-content{ font-size:14.5px; }
    .berita-content h2{ font-size:19px; }
    .berita-content h3{ font-size:17px; }

    .bdc-share{ gap:10px; margin-top:26px; padding-top:18px; }
    .bds-card{ padding:22px; border-radius:18px; }
}

/*language toggle*/
.lang-switcher{
    position:relative;
    display:inline-flex;
    align-items:center;
    background:var(--green-050);
    border:1px solid var(--line);
    border-radius:999px;
    padding:2px;
    font-family:'JetBrains Mono', monospace;
    font-weight:600;
    width:fit-content;
    font-size:clamp(10.5px, 3vw, 12px);
}
.lang-switcher a{
    position:relative;
    z-index:2;
    flex:1 1 0;
    text-align:center;
    padding:clamp(4px,1.4vw,6px) clamp(9px,3vw,12px);
    border-radius:999px;
    color:var(--green-900);
    transition:color .25s var(--ease);
    white-space:nowrap;
}
.lang-switcher a.active{ color:var(--white); }

.lang-thumb{
    position:absolute;
    top:2px; left:2px;
    height:calc(100% - 4px);
    width:calc(50% - 2px);
    background:var(--green-900);
    border-radius:999px;
    transition:transform .3s var(--ease);
    z-index:1;
}
.lang-switcher[data-active="en"] .lang-thumb{
    transform:translateX(100%);
}

/* ===== Desktop ===== */
.lang-switcher-desktop{ display:none; }
@media (min-width:1201px){
    .lang-switcher-desktop{ display:inline-flex; }
}

/* ===== Mobile: baris rata kanan di atas daftar nav ===== */
.nav-mobile-top{ display:none; }

@media (max-width:1200px){
    .lang-switcher-desktop{ display:none !important; }

    .nav-mobile-top{
        display:flex;
        justify-content:flex-end;
        padding:0 2px 14px;
        margin-bottom:6px;
        border-bottom:1px solid var(--line);
    }
    .lang-switcher-mobile{
        font-size:12px;
    }
    .lang-switcher-mobile a{
        padding:6px 14px;
    }
}

@media (max-width:400px){
    .lang-switcher-mobile{ font-size:11px; }
    .lang-switcher-mobile a{ padding:5px 11px; }
}