/* ===== GLOBAL ===== */
* {
    box-sizing:border-box;
    margin:0;
    padding:0
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:82px
}
body {
    font-family:Inter,Arial,sans-serif;
    color:#17352a;
    background:#fff;
    line-height:1.7
}
a {
    text-decoration:none;
    color:inherit
}
.container {
    width:min(1160px,92%);
    margin:auto
}
/* ===== NAVBAR ===== */
.navbar {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(0,0,0,.06);
    transition:.3s
}
.nav-wrap {
    height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.brand {
    display:flex;
    align-items:center;
    gap:11px
}
.brand-logo {
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 52px
}
.brand-logo img {
    width:100%;
    height:100%;
    object-fit:contain;
    display:block
}
.brand strong {
    display:block;
    font-family:Poppins;
    font-size:15px;
    letter-spacing:.4px
}
.brand span {
    display:block;
    font-size:10px;
    color:#718077
}
.nav-menu {
    display:flex;
    align-items:center;
    gap:25px;
    font-size:13px;
    font-weight:600
}
.nav-menu a {
    transition:.2s
}
.nav-menu a:hover {
    color:#0d6b45
}
.nav-cta {
    background:#0d6b45!important;
    color:#fff!important;
    padding:10px 17px;
    border-radius:9px
}
.menu-toggle {
    display:none;
    border:0;
    background:none;
    width:38px
}
.menu-toggle span {
    display:block;
    height:2px;
    background:#17352a;
    margin:6px 0
}
/* ===== HERO ===== */
.hero {
    min-height: 720px;
    margin-top: 78px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.hero-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    z-index: 0;
}
.hero:after {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 80% 30%,rgba(255,255,255,.16),transparent 28%)
}
.hero-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(5, 35, 24, 0.68) 0%,
        rgba(5, 35, 24, 0.40) 45%,
        rgba(5, 35, 24, 0.12) 100%
    );

    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;

    color: #fff;
    padding: 70px 0;
}
.eyebrow {
    font-size:11px;
    font-weight:800;
    letter-spacing:2px;
    color:#dcefe4
}
.eyebrow.dark {
    color:#0d6b45
}
.hero h1 {
    font-family:Poppins;
    font-size:clamp(40px,6vw,70px);
    line-height:1.1;
    margin:17px 0 22px;
    letter-spacing:-2px
}
.hero h1 span {
    color:#d6f0df
}
.hero p {
    font-size:18px;
    max-width:620px;
    color:#eaf5ef
}
.hero-actions {
    display:flex;
    gap:12px;
    margin-top:30px
}
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:13px 21px;
    border-radius:10px;
    font-weight:700;
    font-size:13px;
    transition:.25s;
    border:1px solid transparent
}
.btn-primary {
    background:#0d6b45;
    color:#fff
}
.hero .btn-primary {
    background:#fff;
    color:#0d6b45
}
.btn-light {
    background:#fff;
    color:#17352a
}
.btn:hover {
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,0,0,.12)
}
.hero-info {
    display:flex;
    gap:35px;
    margin-top:45px
}
.hero-info div {
    padding-left:15px;
    border-left:2px solid rgba(255,255,255,.4)
}
.hero-info b,.hero-info span {
    display:block
}
.hero-info b {
    font-size:13px
}
.hero-info span {
    font-size:11px;
    opacity:.75
}
.scroll-down {
    position:absolute;
    bottom:25px;
    left:50%;
    color:#fff;
    font-size:30px;
    z-index:2
}
/* ===== SECTIONS ===== */
.section {
    padding:90px 0
}
.section-sm {
    padding:30px 0
}
.soft {
    background:#f5f8f6
}
/* ===== STATISTICS ===== */
.stats-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px
}
.stat-card {
    background:#fff;
    border:1px solid #e7eee9;
    border-radius:15px;
    padding:25px;
    display:grid;
    grid-template-columns:45px 1fr;
    align-items:center;
    box-shadow:0 8px 25px rgba(20,60,40,.05)
}
.stat-icon {
    grid-row:span 2;
    font-size:25px
}
.stat-card strong {
    font-family:Poppins;
    font-size:24px;
    color:#0d6b45
}
.stat-card span:last-child {
    font-size:12px;
    color:#7a8780
}
/* ===== PROFILE ===== */
.split {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:75px;
    align-items:center
}
.section-image {
    position: relative;
    width: 100%;
}

.image-placeholder.large {
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 20px;
}

.image-placeholder.large img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}
.floating-card {
    position:absolute;
    right:-25px;
    bottom:28px;
    background:#fff;
    border-radius:14px;
    padding:18px 20px;
    box-shadow:0 15px 40px rgba(20,50,35,.16);
    max-width:230px
}
.floating-card strong,.floating-card span {
    display:block
}
.floating-card strong {
    font-family:Poppins
}
.floating-card span {
    font-size:11px;
    color:#718078
}
.section-copy h2,.section-heading h2,.map-copy h2,.contact-copy h2,.complaint h2 {
    font-family:Poppins;
    font-size:clamp(30px,4vw,44px);
    line-height:1.2;
    margin:10px 0 18px;
    color:#153c2c
}
.section-copy p {
    color:#66746d;
    margin-bottom:14px
}
.vision-box {
    display:grid;
    gap:12px;
    margin-top:25px
}
.vision-box div {
    background:#f4f8f5;
    padding:16px;
    border-left:3px solid #0d6b45
}
.vision-box b {
    display:block;
    font-family:Poppins;
    color:#0d6b45;
    font-size:13px
}
.vision-box span {
    font-size:12px;
    color:#67756d
}
.section-heading {
    margin-bottom:40px
}
.centered {
    text-align:center
}
.section-heading p {
    color:#728078
}
/* ===== SERVICES ===== */
.service-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.service-card {
    background:#fff;
    border:1px solid #e5ece8;
    border-radius:16px;
    padding:27px;
    transition:.25s
}
.service-card:hover {
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(20,70,45,.09);
    border-color:#b9d7c4
}
.service-card>span {
    font-size:30px
}
.service-card h3 {
    font-family:Poppins;
    margin:12px 0 5px;
    font-size:17px
}
.service-card p {
    font-size:12px;
    color:#728078;
    min-height:45px
}
.service-card b {
    font-size:11px;
    color:#0d6b45
}
.row-heading {
    display:flex;
    justify-content:space-between;
    align-items:end
}
.text-link {
    font-size:12px;
    font-weight:700;
    color:#0d6b45
}
/* ===== NEWS ===== */
.news-grid {
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:20px
}
.news-card {
    overflow: hidden;
    border: 1px solid #e1e8e4;
    border-radius: 18px;
    background: #ffffff;
}
.news-image {
    width: 100%;
    height: 260px;
    overflow: hidden;
    background: #f1f4f2;
}
.news-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}
@media (max-width: 700px) {

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

    .news-image {
        height: 230px;
    }

}
@media (min-width: 701px) and (max-width: 1000px) {

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

}
.featured .news-image {
    height:260px
}
.news-body {
    padding:20px
}
.news-body>span {
    font-size:9px;
    font-weight:800;
    color:#0d6b45;
    letter-spacing:1px
}
.news-body h3 {
    font-family:Poppins;
    font-size:17px;
    line-height:1.4;
    margin:8px 0
}
.news-body p {
    font-size:12px;
    color:#728078
}
.news-body small {
    display:block;
    margin-top:12px;
    color:#9aa59f;
    font-size:10px
}
/* ===== POTENTIAL ===== */
.potential-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px
}
.potential-card {
    background:#fff;
    border:1px solid #e5ece8;
    padding:30px 22px;
    border-radius:16px;
    text-align:center
}
.potential-card span {
    font-size:34px
}
.potential-card h3 {
    font-family:Poppins;
    margin:10px 0 4px
}
.potential-card p {
    font-size:12px;
    color:#738078
}
/* ===== GALLERY ===== */
.gallery-grid {
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr;
    grid-auto-rows:190px;
    gap:14px
}
.gallery-item {
    border-radius:15px
}
.gallery-item.tall {
    grid-row:span 2
}
.gallery-item.wide {
    grid-column:2/4
}
/* ===== MAP ===== */
.map-section {
    padding:80px 0;
    background:#edf4ef
}
.map-wrap {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:55px;
    align-items:center
}
.map-copy p {
    color:#69766f;
    margin-bottom:25px
}
.map-placeholder {
    height:400px;
    border-radius:22px;
    position:relative;
    overflow:hidden;
    background:#dbe8df
}
.map-grid {
    position:absolute;
    inset:0;
    opacity:.55;
    background:linear-gradient(25deg,transparent 48%,#9ebaa6 49%,transparent 50%),linear-gradient(90deg,transparent 48%,#aac2b0 49%,transparent 50%),linear-gradient(145deg,transparent 60%,#b4c9ba 61%,transparent 62%);
    background-size:120px 90px,110px 120px,170px 150px
}
.map-pin {
    position:absolute;
    left:50%;
    top:48%;
    font-size:45px;
    transform:translate(-50%,-50%);
    filter:drop-shadow(0 4px 5px rgba(0,0,0,.2))
}
.map-label {
    position:absolute;
    left:50%;
    top:62%;
    transform:translateX(-50%);
    background:#fff;
    padding:9px 15px;
    border-radius:8px;
    font-size:11px;
    font-weight:700;
    text-align:center;
    box-shadow:0 7px 20px rgba(0,0,0,.1)
}
/* ===== COMPLAINT ===== */
.complaint {
    background:#0d6b45;
    color:#fff
}
.complaint-wrap {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px
}
.complaint h2 {
    color:#fff;
    margin-bottom:10px
}
.complaint p {
    max-width:680px;
    color:#dcece2;
    font-size:13px
}
.complaint .btn {
    white-space:nowrap
}
/* ===== CONTACT ===== */
.contact-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px
}
.contact-copy p {
    color:#6e7b74;
    max-width:500px
}
.contact-list {
    display:grid;
    gap:20px
}
.contact-list>div {
    display:flex;
    gap:17px
}
.contact-list>div>span {
    width:42px;
    height:42px;
    background:#edf6f0;
    border-radius:11px;
    display:grid;
    place-items:center
}
.contact-list b {
    font-family:Poppins;
    font-size:13px
}
.contact-list p {
    font-size:12px;
    color:#758078
}
/* ===== FOOTER ===== */
footer {
    background:#102c20;
    color:#d7e5dd;
    padding-top:55px
}
.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:60px;
    padding-bottom:45px
}
.footer-brand strong {
    color:#fff
}
.footer-brand span {
    color:#9db0a5
}
.footer-grid>div>p {
    font-size:12px;
    color:#9fb1a7;
    max-width:360px;
    margin-top:15px
}
.footer-grid h4 {
    font-family:Poppins;
    color:#fff;
    margin-bottom:12px
}
.footer-grid a {
    display:block;
    font-size:12px;
    color:#aebfb6;
    margin:7px 0
}
.footer-bottom {
    border-top:1px solid rgba(255,255,255,.08);
    padding:18px 0;
    font-size:10px;
    color:#84988d
}
.floating-wa,.back-top {
    position:fixed;
    right:22px;
    z-index:900;
    width:48px;
    height:48px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,.18);
    border:0
}
.floating-wa {
    bottom:22px;
    background:#1da66b;
    font-size:23px
}
.back-top {
    bottom:80px;
    background:#173f2e;
    opacity:0;
    pointer-events:none;
    transition:.25s
}
.back-top.show {
    opacity:1;
    pointer-events:auto
}
@media (max-width: 900px) {
    .nav-menu {
        gap:13px
    }
    /* ===== PROFILE ===== */
.split {
        gap:35px
    }
    /* ===== SERVICES ===== */
.service-grid {
        grid-template-columns:repeat(2,1fr)
    }
    /* ===== NEWS ===== */
.news-grid {
        grid-template-columns:1fr 1fr
    }
    .featured {
        grid-column:1/-1
    }
    /* ===== POTENTIAL ===== */
.potential-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .map-wrap {
        grid-template-columns:1fr
    }
    /* ===== CONTACT ===== */
.contact-grid {
        gap:40px
    }
}
@media (max-width: 700px) {
    html {
        scroll-padding-top:70px
    }
    .nav-wrap {
        height:70px
    }
    .menu-toggle {
        display:block
    }
    .nav-menu {
        position:absolute;
        top:70px;
        left:0;
        width:100%;
        background:#fff;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:10px 5%;
        box-shadow:0 15px 25px rgba(0,0,0,.08)
    }
    .nav-menu.open {
        display:flex
    }
    .nav-menu a {
        padding:11px 5px
    }
    .nav-cta {
        text-align:center;
        margin:5px 0 10px
    }
    /* ===== HERO ===== */
.hero {
        margin-top:70px;
        min-height:650px
    }
    .hero h1 {
        font-size:42px
    }
    .hero p {
        font-size:15px
    }
    .hero-info {
        gap:20px
    }
    /* ===== STATISTICS ===== */
.stats-grid {
        grid-template-columns:1fr 1fr
    }
    .stat-card {
        padding:18px
    }
    .stat-card strong {
        font-size:20px
    }
    /* ===== SECTIONS ===== */
.section {
        padding:65px 0
    }
    .split,/* ===== CONTACT ===== */
.contact-grid {
        grid-template-columns:1fr
    }
    .image-placeholder.large {
        height:320px
    }
    .floating-card {
        right:10px
    }
    .service-grid,/* ===== NEWS ===== */
.news-grid {
        grid-template-columns:1fr
    }
    .featured {
        grid-column:auto
    }
    /* ===== POTENTIAL ===== */
.potential-grid {
        grid-template-columns:1fr 1fr
    }
    /* ===== GALLERY ===== */
.gallery-grid {
        grid-template-columns:1fr 1fr;
        grid-auto-rows:150px
    }
    .gallery-item.tall {
        grid-row:span 2
    }
    .gallery-item.wide {
        grid-column:1/-1
    }
    .complaint-wrap {
        display:block
    }
    .complaint .btn {
        margin-top:22px
    }
    .footer-grid {
        grid-template-columns:1fr 1fr;
        gap:30px
    }
    .footer-grid>div:first-child {
        grid-column:1/-1
    }
    .row-heading {
        align-items:start;
        gap:15px
    }
    .map-placeholder {
        height:300px
    }
}
@media (max-width: 420px) {
    .hero-actions {
        flex-direction:column;
        align-items:stretch
    }
    .hero-actions .btn {
        width:100%
    }
    .stats-grid,/* ===== POTENTIAL ===== */
.potential-grid {
        grid-template-columns:1fr
    }
    .footer-grid {
        grid-template-columns:1fr
    }
    .footer-grid>div:first-child {
        grid-column:auto
    }
}

/* Tambahkan style untuk service card yang lebih baik */
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.service-card {
    background: var(--white, #fff);
    border: 1px solid var(--gray-light, #e5ece8);
    border-radius: var(--radius, 16px);
    padding: 27px;
    transition: all var(--transition, 0.3s ease);
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(20, 70, 45, 0.09);
    border-color: #b9d7c4;
}

.service-card > span {
    font-size: 30px;
    margin-bottom: 8px;
}

.service-card h3 {
    font-family: Poppins, sans-serif;
    margin: 8px 0 5px;
    font-size: 17px;
    color: var(--secondary, #17352a);
}

.service-card p {
    font-size: 12px;
    color: var(--gray, #728078);
    min-height: 45px;
    flex: 1;
}

.service-card b {
    font-size: 11px;
    color: var(--primary, #0d6b45);
    margin-top: 10px;
}

/* Responsive untuk service */
@media (max-width: 900px) {
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .service-grid {
        grid-template-columns: 1fr;
    }
    
    .service-card {
        padding: 20px;
    }
    
    .service-card p {
        min-height: auto;
    }
}

/* ===== POTENTIAL GRID ===== */
.potential-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.potential-card {
    background: #fff;
    border: 1px solid #e5ece8;
    padding: 30px 22px;
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.potential-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(13, 107, 69, 0.08);
    border-color: #0d6b45;
}

.potential-card span {
    font-size: 34px;
    display: block;
    margin-bottom: 8px;
}

.potential-card h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    margin: 10px 0 4px;
    color: #17352a;
}

.potential-card p {
    font-size: 13px;
    color: #728078;
    margin: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .potential-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .potential-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
    
    .potential-card {
        padding: 20px 15px;
    }
    
    .potential-card span {
        font-size: 28px;
    }
    
    .potential-card h3 {
        font-size: 15px;
    }
    
    .potential-card p {
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .potential-grid {
        grid-template-columns: 1fr;
    }
}