/* ===================================================
   PT PSAKO TANEAK DJANG — Design System
   Palette: forest green / leaf / mint / amber
   Display: Fraunces | Body: Inter
=================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --forest: #16382B;
  --leaf: #4F9D69;
  --leaf-light: #8FC9A0;
  --mint: #F3FAF5;
  --amber: #D9A441;
  --paper: #FFFFFF;
  --ink: #16241D;
  --ink-soft: #4A5A52;
  --line: #DCEAE0;
  --radius: 14px;
  --maxw: 1140px;
  --shadow: 0 10px 30px -12px rgba(22,56,43,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Fraunces',serif;
  color:var(--forest);
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:600;
}
h1{font-size:clamp(2.2rem,4vw,3.4rem); font-weight:700;}
h2{font-size:clamp(1.7rem,3vw,2.4rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em; color:var(--ink-soft);}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--leaf); margin-bottom:14px;
}
.eyebrow::before{content:""; width:18px; height:2px; background:var(--amber); display:inline-block;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:999px; font-weight:600; font-size:.95rem;
  border:1.5px solid transparent; cursor:pointer; transition:.2s ease;
}
.btn-primary{background:var(--forest); color:#fff;}
.btn-primary:hover{background:var(--leaf);}
.btn-outline{border-color:var(--forest); color:var(--forest); background:transparent;}
.btn-outline:hover{background:var(--forest); color:#fff;}
.btn-amber{background:var(--amber); color:var(--forest);}
.btn-amber:hover{filter:brightness(1.08);}

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:var(--maxw); margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-weight:700; color:var(--forest); font-size:1.05rem;}
.brand small{display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:.65rem; color:var(--ink-soft); letter-spacing:.04em;}
nav.main-nav{display:flex; gap:28px; align-items:center;}
nav.main-nav a{font-size:.92rem; font-weight:500; color:var(--ink); position:relative; padding:4px 0;}
nav.main-nav a.active, nav.main-nav a:hover{color:var(--forest);}
nav.main-nav a.active::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--amber);}
.nav-actions{display:flex; align-items:center; gap:14px;}
.lang-toggle{
  display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; font-size:.78rem; font-weight:700;
}
.lang-toggle button{padding:6px 12px; background:transparent; border:none; cursor:pointer; color:var(--ink-soft);}
.lang-toggle button.active{background:var(--forest); color:#fff;}
.menu-btn{display:none; background:none; border:none; cursor:pointer;}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--mint) 0%, #fff 100%);
  padding:84px 0 70px;
}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;}
.hero p.lead{font-size:1.08rem; max-width:46ch;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px;}
.hero-art{position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;}
.stat-row{display:flex; gap:34px; margin-top:40px; flex-wrap:wrap;}
.stat-row .stat b{display:block; font-family:'Fraunces',serif; font-size:1.8rem; color:var(--forest);}
.stat-row .stat span{font-size:.82rem; color:var(--ink-soft);}

/* ---------- Sections ---------- */
section{padding:74px 0;}
section.alt{background:var(--mint);}
.section-head{max-width:640px; margin:0 0 42px;}
.section-head.center{margin:0 auto 50px; text-align:center;}

/* ---------- Cards ---------- */
.grid{display:grid; gap:26px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; transition:.25s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent;}
.card .icon{width:44px; height:44px; border-radius:10px; background:var(--mint); display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--leaf);}
.tag{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:999px;}
.tag-amber{background:#FBF0DC; color:#8A6113;}
.tag-leaf{background:#E4F3E8; color:#2E6B45;}

/* ---------- Program / training cards ---------- */
.prog-card{display:flex; flex-direction:column; gap:14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; height:100%;}
.prog-card .meta{display:flex; gap:8px; flex-wrap:wrap; font-size:.78rem; color:var(--ink-soft);}
.prog-card .meta span{background:var(--mint); padding:4px 10px; border-radius:999px;}

/* ---------- Timeline (alur layanan) ---------- */
.flow{list-style:none; padding:0; margin:0; counter-reset:flow;}
.flow li{
  counter-increment:flow; position:relative; padding:0 0 38px 56px; border-left:2px solid var(--line); margin-left:18px;
}
.flow li:last-child{border-color:transparent; padding-bottom:0;}
.flow li::before{
  content:counter(flow); position:absolute; left:-19px; top:0; width:36px; height:36px; border-radius:50%;
  background:var(--forest); color:#fff; font-family:'Fraunces',serif; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.flow h4{margin-bottom:4px;}

/* ---------- Table ---------- */
table.clean{width:100%; border-collapse:collapse;}
table.clean th, table.clean td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); font-size:.92rem;}
table.clean th{color:var(--forest); font-family:'Fraunces',serif; font-weight:600;}

/* ---------- Org chart ---------- */
.org-box{background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 18px; text-align:center; font-size:.85rem;}
.org-box b{display:block; color:var(--forest); font-family:'Fraunces',serif;}

/* ---------- Partners ---------- */
.partner-strip{display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:center;}
.partner-pill{padding:12px 22px; border:1px solid var(--line); border-radius:999px; font-size:.85rem; font-weight:600; color:var(--ink-soft); background:#fff;}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--forest); color:#fff; border-radius:24px; padding:56px; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;
}
.cta-banner h2{color:#fff;}
.cta-banner p{color:#CFE3D6;}

/* ---------- Form ---------- */
.form-box{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:34px;}
.form-row{margin-bottom:18px;}
.form-row label{display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; color:var(--forest);}
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px; font-family:inherit; font-size:.95rem; background:var(--mint);
}
.form-row textarea{min-height:110px; resize:vertical;}
.ai-hint{display:flex; gap:10px; align-items:flex-start; background:var(--mint); border:1px dashed var(--leaf-light); border-radius:12px; padding:14px 16px; font-size:.85rem; color:var(--ink-soft); margin-bottom:20px;}

/* ---------- Footer ---------- */
footer.site{background:var(--forest); color:#CFE3D6; padding:60px 0 26px; margin-top:60px;}
footer.site a{color:#fff;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px;}
footer.site h4{color:#fff; font-size:.95rem; margin-bottom:16px;}
footer.site ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:.88rem;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15); margin-top:40px; padding-top:20px; font-size:.8rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:#9FBBA9;}

/* ---------- Breadcrumb / page hero (subpages) ---------- */
.page-hero{background:var(--mint); padding:54px 0 50px; border-bottom:1px solid var(--line);}
.page-hero .eyebrow{margin-bottom:10px;}

/* ---------- i18n ---------- */
/* Teks dwibahasa ditangani lewat JS (main.js) dengan mengganti textContent
   berdasarkan attribute data-id / data-en, jadi tidak perlu CSS hide di sini. */

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  nav.main-nav{
    position:fixed; inset:64px 0 0 0; background:#fff; flex-direction:column; padding:30px 24px; gap:22px;
    transform:translateY(-110%); transition:.3s ease; border-top:1px solid var(--line);
  }
  nav.main-nav.open{transform:translateY(0);}
  .menu-btn{display:block;}
}
@media (max-width:620px){
  .grid-3, .grid-2{grid-template-columns:1fr;}
  .cta-banner{flex-direction:column; text-align:center; padding:40px 26px;}
}