/* ===== THEME ===== */
:root{
  --bg:#f7fbfa; --card:#ffffff; --ink:#0f2f2a; --muted:#4a6a62;
  --brand:#0c5a4b; --brand2:#23d199; --line:#e2eee9; --soft:#edf7f4;
  --shadow:0 14px 36px rgba(3,20,17,.10); --blur:16px;
}
:root.dark{
  --bg:#0d1513; --card:#0c1412; --ink:#dff8ef; --muted:#9bd1c1;
  --brand:#8cfdbf; --brand2:#59f0c0; --line:#1b2622; --soft:#121c1a;
  --shadow:0 18px 42px rgba(0,0,0,.46); --blur:18px;
}

/* ===== BASE ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Rubik",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.preload *{transition:none !important}
.bk-container{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}

/* ===== NAVBAR (nav-shell glass radius) ===== */
.bk-nav{ position:sticky; top:0; z-index:50 }
.nav-shell{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid rgba(12,90,75,.14);
  box-shadow:var(--shadow);
  white-space:nowrap; /* cegah turun ke 2 baris */
}
:root.dark .nav-shell{ background:rgba(12,20,18,.55); border-color:rgba(255,255,255,.08) }

.brand{display:flex; align-items:center; gap:8px; font-weight:800; font-size:15px}
.brand i{color:var(--brand)}

.nav-links{display:flex; gap:12px; font-size:14px; align-items:center}
.nav-links a{padding:6px 10px; border-radius:999px; color:var(--muted)}
.nav-links a.active,.nav-links a:hover{background:var(--soft); color:var(--ink)}

.nav-cta{display:flex; align-items:center; gap:8px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; font-weight:700; border:1px solid transparent; font-size:14px}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{filter:brightness(.97)}
.btn-outline{background:transparent; border-color:var(--brand); color:var(--brand)}
.btn-outline:hover{background:var(--brand); color:#fff}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{background:var(--soft)}
.dark-toggle{border:none; background:var(--soft); padding:6px 8px; border-radius:10px; cursor:pointer}

/* Hamburger (mobile) */
.hamburger{display:none; flex-direction:column; gap:3px; border:none; background:transparent}
.hamburger span{width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.2s}
.hamburger.active span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* Mobile Menu */
.mobile-menu{display:none; position:fixed; inset:64px 10px auto 10px; background:rgba(255,255,255,.96);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  padding:16px 18px; z-index:49; border:1px solid rgba(12,90,75,.12); border-radius:18px; box-shadow:var(--shadow)}
:root.dark .mobile-menu{ background:rgba(12,20,18,.96); border-color:rgba(255,255,255,.08) }
.mobile-menu a{display:block; padding:10px; border-bottom:1px solid var(--line)}
.mobile-menu.open{display:block}
.w-100{width:100%}

/* ===== ORNAMENT ===== */
.bg-ornament{position:absolute; inset:0 0 auto 0; height:320px; z-index:-1; pointer-events:none}
.blob{position:absolute; right:-60px; top:-90px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(35,209,153,.22), transparent 72%); filter:blur(6px)}
.pattern{
  height:100%;
  background:
    linear-gradient(90deg, rgba(205,235,227,.45) 1px, transparent 1px) 0 0/80px 80px,
    linear-gradient(0deg,  rgba(205,235,227,.45) 1px, transparent 1px) 0 0/80px 80px;
  opacity:.5;
}
:root.dark .pattern{
  background:
    linear-gradient(90deg, rgba(20,44,39,.9) 1px, transparent 1px) 0 0/80px 80px,
    linear-gradient(0deg,  rgba(20,44,39,.9) 1px, transparent 1px) 0 0/80px 80px;
  opacity:.9;
}

/* ===== HERO ===== */
.hero{position:relative; padding:40px 0 26px}
.hero-inner{display:grid; grid-template-columns:1.12fr .88fr; gap:26px; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-weight:700; margin-bottom:6px; font-size:14px}
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--brand)}
.hero-title{font-size:clamp(26px,3.1vw,44px); line-height:1.12; margin:4px 0 10px 0; font-weight:900}
.hero-title .accent{color:var(--brand)}
.hero-subtitle{color:var(--muted); max-width:58ch; margin-bottom:14px}
.hero-cta{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.hero-badges{display:flex; flex-wrap:wrap; gap:8px; color:var(--muted)}
.hero-badges span{background:var(--soft); border:1px solid var(--line); padding:6px 10px; border-radius:999px; font-size:.92rem}

/* ===== GLASS CARDS ===== */
.glass-stack{display:grid; gap:12px; position:relative}
.glass-card{
  display:grid; grid-template-columns:46px 1fr; gap:10px; align-items:start;
  background:linear-gradient(180deg, rgba(255,255,255,.54), rgba(255,255,255,.36));
  border:1px solid rgba(12,90,75,.14); padding:14px;
  box-shadow:0 10px 30px rgba(3,20,17,.10);
  backdrop-filter:blur(calc(var(--blur) - 3px)); -webkit-backdrop-filter:blur(calc(var(--blur) - 3px));
}
:root.dark .glass-card{background:linear-gradient(180deg, rgba(12,20,18,.58), rgba(12,20,18,.36)); border-color:rgba(255,255,255,.08); box-shadow:0 12px 32px rgba(0,0,0,.45)}
.glass-radius{border-radius:22px}
.big-icon{font-size:28px; color:var(--brand)}
.lift-1{transform:translateY(0)} .lift-2{transform:translateY(-6px)} .lift-3{transform:translateY(-12px)}

/* ===== MARQUEE ===== */
.marquee{overflow:hidden; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); margin-top:14px}
.marquee .track{display:flex; gap:24px; padding:10px 0; min-width:200%; animation:marq 22s linear infinite; color:var(--muted)}
.marquee span{white-space:nowrap}
@keyframes marq{to{transform:translateX(-50%)}}

/* ===== SECTIONS ===== */
.section{padding:56px 0}
.soft-bg{background:var(--soft)}
.section-head{text-align:center; margin-bottom:16px}
.section-head h2{margin:0 0 8px 0; font-size:clamp(20px,2.2vw,32px)}
.section-head p{color:var(--muted)}

/* ===== GRID & CARDS ===== */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px; box-shadow:var(--shadow)}
.radius-xl{border-radius:22px}
.icon-card i{font-size:26px; color:var(--brand)}
.card-link .arrow{display:inline-block; margin-top:6px; color:var(--brand); transition:transform .2s}
.card-link:hover .arrow{transform:translateX(4px)}
.hover-lift{transform:translateY(0); transition:transform .25s}
.hover-lift:hover{transform:translateY(-4px)}
.glass-outline{background:var(--card); border:1px solid rgba(12,90,75,.14)}

/* ===== FILOSOFI ===== */
.filo-hero{position:relative; border-radius:24px; overflow:hidden}
.filo-bg{
  position:absolute; inset:-2px; z-index:0;
  background:
    radial-gradient(700px 260px at 18% -4%, rgba(35,209,153,.22), transparent 60%),
    linear-gradient(120deg, rgba(12,90,75,.08), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.52));
  border:1px solid rgba(12,90,75,.14); border-radius:24px;
}
:root.dark .filo-bg{
  background:
    radial-gradient(700px 260px at 18% -4%, rgba(89,240,192,.18), transparent 60%),
    linear-gradient(120deg, rgba(255,255,255,.06), transparent 40%),
    linear-gradient(180deg, rgba(12,20,18,.62), rgba(12,20,18,.40));
  border-color:rgba(255,255,255,.08);
}
.filo-card{position:relative; z-index:1; padding:24px 22px; border-radius:24px; box-shadow:var(--shadow)}
.glass-strong{
  background:linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.54));
  border:1px solid rgba(12,90,75,.14);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
}
:root.dark .glass-strong{background:linear-gradient(180deg, rgba(12,20,18,.62), rgba(12,20,18,.40)); border-color:rgba(255,255,255,.08)}
.filo-chip{display:inline-flex; align-items:center; gap:8px; background:var(--soft); border:1px solid var(--line); padding:6px 10px; border-radius:999px; font-weight:800; margin-bottom:8px}
.filo-title{margin:4px 0 10px 0; font-size:clamp(20px,2.2vw,32px)}

/* ===== VISI MISI ===== */
.vm-head{text-align:center; margin-bottom:14px}
.vm-badge{display:inline-block; background:var(--soft); border:1px solid var(--line); padding:6px 12px; border-radius:999px; font-weight:800; margin-bottom:6px}
.vm-title{margin:0 0 6px 0}
.vm-sub{color:var(--muted); margin:0}
.vm-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:16px; margin-top:8px}
.vm-panel{border-radius:22px; padding:18px; box-shadow:var(--shadow)}
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.50));
  border:1px solid rgba(12,90,75,.14);
  backdrop-filter:blur(calc(var(--blur) - 2px)); -webkit-backdrop-filter:blur(calc(var(--blur) - 2px));
}
.vm-chip{display:inline-block; padding:6px 10px; border-radius:999px; background:var(--soft); border:1px solid var(--line); font-weight:800; margin-bottom:8px}
.misi-timeline{list-style:none; margin:6px 0 0 0; padding:0; display:grid; gap:12px}
.misi-timeline li{display:grid; grid-template-columns:18px 1fr; gap:8px; align-items:start}
.misi-timeline .dot{width:12px; height:12px; border-radius:50%; background:var(--brand2); box-shadow:0 0 0 3px rgba(35,209,153,.18)}
.misi-timeline .bubble{background:var(--card); border:1px dashed var(--line); border-radius:14px; padding:10px}
:root.dark .misi-timeline .bubble{background:#0e1816}

/* ===== TESTIMONI ===== */
.testimonial{position:relative; overflow:hidden}
.ts-track{display:flex; transition:transform .35s ease}
.ts-card{min-width:100%; padding:16px; border:1px solid var(--line); border-radius:22px; background:var(--card); box-shadow:var(--shadow); text-align:center}
.ts-card h4{margin:4px 0 8px 0}
.ts-btn{position:absolute; top:50%; transform:translateY(-50%); border:none; background:var(--card); border:1px solid var(--line); padding:8px 12px; border-radius:10px; cursor:pointer}
.ts-btn.prev{left:6px} .ts-btn.next{right:6px}

/* ===== CTA ===== */
.cta{background:linear-gradient(135deg, var(--brand), var(--brand2)); color:#fff; border:1px solid rgba(255,255,255,.35)}
.cta-radius{border-radius:22px; margin:0 10px}
.cta-inner{text-align:center}
.cta .btn-primary{background:#fff; color:#0f3a33}
.cta .btn-ghost{border-color:#fff; color:#fff}
.cta .btn-ghost:hover{background:rgba(255,255,255,.12)}
.cta-actions{display:flex; justify-content:center; gap:10px; margin-top:10px; flex-wrap:wrap}

/* ===== FOOTER ===== */
.footer{background:var(--card); border-top:1px solid var(--line)}
.footer-inner{display:grid; grid-template-columns:2fr 1fr 1.2fr; gap:16px; padding:20px 0}
.footer .brand{font-weight:800}
.footer a{color:var(--muted)} .footer a:hover{color:var(--ink)}
.f-bottom{text-align:center; border-top:1px solid var(--line); padding:10px; color:var(--muted); font-size:.95rem}

/* ===== RESPONSIVE ===== */
@media (max-width:1100px){
  .nav-links{font-size:13px; gap:10px}
  .btn{font-size:13px; padding:7px 10px}
}
@media (max-width:1000px){
  /* shell tetap radius, tapi warnanya hijau solid translucent */
  .nav-shell{
    background: linear-gradient(180deg, rgba(12,90,75,.96), rgba(12,90,75,.88)) !important;
    border: 1px solid rgba(140,253,191,.35) !important; /* aksen hijau muda */
    box-shadow: 0 10px 26px rgba(12,90,75,.30);
    border-radius: 999px; /* pastikan tetap bulat */
  }

  /* warna brand di hijau -> putih */
  .nav-shell .brand i{ color:#fff !important; }
  .nav-shell .brand span, 
  .nav-shell .brand b{ color:#fff !important; }

  /* tombol */
  .nav-shell .btn-primary{ background:#fff; color:#0c5a4b; }
  .nav-shell .btn-ghost{
    border-color: rgba(255,255,255,.38);
    color:#fff;
    background: transparent;
  }
  .nav-shell .btn-ghost:hover{ background: rgba(255,255,255,.12); }

  /* dark-toggle & hamburger */
  .nav-shell .dark-toggle{
    background: rgba(255,255,255,.14);
    color:#fff;
  }
  .hamburger span{ background:#fff; }
  .nav-links{display:none}
  .hamburger{display:flex}
  .hero-inner{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .vm-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .grid-3{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
}


/* === NAVBAR MOBILE: hijau solid + radius === */
@media (max-width:1000px){
  /* ruang kiri-kanan agar radius terlihat */
  .bk-nav .bk-container{padding-left:14px!important; padding-right:14px!important;}

  /* paksa shell nav jadi hijau (cover dua varian: .nav-shell & .nav-inner.glass-nav) */
  .nav-shell,
  .nav-inner.glass-nav{
    background: linear-gradient(180deg, rgba(12,90,75,.98), rgba(12,90,75,.92)) !important;
    border: 1px solid rgba(140,253,191,.35) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px rgba(12,90,75,.32) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  /* brand & ikon jadi putih */
  .nav-shell .brand i,
  .nav-inner.glass-nav .brand i,
  .nav-shell .brand span,
  .nav-shell .brand b,
  .nav-inner.glass-nav .brand span,
  .nav-inner.glass-nav .brand b{color:#fff !important;}

  /* tombol */
  .nav-shell .btn-primary,
  .nav-inner.glass-nav .btn-primary{background:#fff !important; color:#0c5a4b !important;}
  .nav-shell .btn-ghost,
  .nav-inner.glass-nav .btn-ghost{
    background:transparent !important; border-color:rgba(255,255,255,.4) !important; color:#fff !important;
  }
  .nav-shell .btn-ghost:hover,
  .nav-inner.glass-nav .btn-ghost:hover{background:rgba(255,255,255,.12) !important;}

  /* ikon menu & toggle */
  .hamburger{display:flex !important;}
  .hamburger span{background:#fff !important;}
  .nav-shell .dark-toggle,
  .nav-inner.glass-nav .dark-toggle{background:rgba(255,255,255,.16) !important; color:#fff !important;}

  /* link panjang disembunyikan di mobile */
  .nav-links{display:none !important;}
}