/* ---------- Hero ---------- */
.hero{
  background:var(--hejo);color:var(--daluang);
  position:relative;overflow:hidden;
}
.hero::before{
  content:"ᮞᮥᮔ᮪ᮓ";
  font-family:var(--font-sunda);
  position:absolute;right:-40px;bottom:-90px;
  font-size:clamp(14rem,30vw,26rem);
  color:rgba(239,231,211,.06);
  line-height:1;pointer-events:none;user-select:none;
}
.hero-inner{
  max-width:1080px;margin:0 auto;padding:96px 24px 110px;
  position:relative;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--emas);font-weight:600;margin-bottom:22px;
}
.hero-eyebrow::before{content:"";width:34px;height:1px;background:var(--emas)}
.hero h1{
  font-family:var(--font-display);font-weight:500;letter-spacing:-.015em;
  font-size:clamp(2.2rem,5.4vw,3.9rem);
  line-height:1.12;max-width:16ch;margin-bottom:10px;
}
.hero .aksara-sub{
  font-family:var(--font-sunda);font-size:clamp(1.1rem,2.4vw,1.5rem);
  color:var(--emas);margin-bottom:26px;
}
.hero p{max-width:56ch;color:rgba(239,231,211,.82);margin-bottom:36px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:.92rem;
  padding:13px 26px;border-radius:4px;transition:transform .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-emas{background:var(--emas);color:var(--hejo)}
.btn-emas:hover{background:#cf9c39}
.btn-garis{border:1px solid rgba(239,231,211,.45);color:var(--daluang)}
.btn-garis:hover{border-color:var(--daluang)}
.btn-outline{border:1px solid rgba(239,231,211,.45);color:rgba(239,231,211,.85)}
.btn-outline:hover{border-color:rgba(239,231,211,.85);color:var(--daluang)}

/* ---------- Sejarah / timeline ---------- */
.sejarah{background:var(--bodas)}
.sejarah-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start}
.timeline{list-style:none;margin-top:8px;border-left:2px solid var(--daluang-kolot)}
.timeline li{position:relative;padding:0 0 30px 28px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:-7px;top:6px;
  width:12px;height:12px;border-radius:50%;
  background:var(--emas);border:2px solid var(--bodas);
}
.timeline .taun{
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--hejo);
  display:block;margin-bottom:2px;
}
.timeline p{font-size:.93rem;color:rgba(36,31,23,.78)}

/* ---------- Visi Misi ---------- */
.visimisi{background:var(--hejo);color:var(--daluang)}
.visimisi h2{color:var(--daluang)}
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:8px}
.vm-card{
  border:1px solid rgba(239,231,211,.2);border-radius:6px;
  padding:34px 32px;background:rgba(239,231,211,.04);
}
.vm-card h3{
  font-family:var(--font-display);font-size:1.35rem;font-weight:600;
  color:var(--emas);margin-bottom:14px;
}
.vm-card p, .vm-card li{color:rgba(239,231,211,.85);font-size:.95rem}
.vm-card ul{list-style:none;margin-top:4px}
.vm-card li{
  padding:10px 0 10px 26px;position:relative;
  border-bottom:1px solid rgba(239,231,211,.12);
}
.vm-card li:last-child{border-bottom:none}
.vm-card li::before{
  content:"ᮾ";font-family:var(--font-sunda);
  position:absolute;left:0;color:var(--emas);
}
.vm-card li strong{color:var(--daluang)}

/* ---------- Program ---------- */
.program{background:var(--daluang)}
.prog-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:36px;
}
.prog-card{
  background:var(--bodas);border:1px solid rgba(36,31,23,.1);
  border-radius:6px;padding:30px 28px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.prog-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(22,52,42,.12)}
.prog-aksara{
  font-family:var(--font-sunda);font-size:1.7rem;color:var(--emas);
  margin-bottom:14px;line-height:1;
}
.prog-card h3{
  font-family:var(--font-display);font-size:1.15rem;font-weight:600;
  color:var(--hejo);margin-bottom:8px;
}
.prog-card p{font-size:.92rem;color:rgba(36,31,23,.75)}

/* ---------- Perpustakaan ---------- */
.perpus{background:var(--bodas)}
.perpus-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.stat-row{display:flex;gap:36px;margin-top:30px;flex-wrap:wrap}
.stat .angka{
  font-family:var(--font-display);font-weight:700;
  font-size:2.1rem;color:var(--emas);line-height:1;
}
.stat .label{font-size:.82rem;color:rgba(36,31,23,.65);margin-top:6px;max-width:16ch}
.perpus-panel{
  background:var(--hejo);color:var(--daluang);border-radius:6px;
  padding:36px 32px;
}
.perpus-panel .aksara{
  font-family:var(--font-sunda);font-size:2rem;color:var(--emas);margin-bottom:16px;
}
.perpus-panel h3{
  font-family:var(--font-display);font-size:1.3rem;font-weight:600;margin-bottom:12px;
}
.perpus-panel p{font-size:.93rem;color:rgba(239,231,211,.82);margin-bottom:20px}
.perpus-buttons{display:flex;gap:14px;flex-wrap:wrap}
.perpus-panel a.btn{padding:11px 22px}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .sejarah-grid,.vm-grid,.perpus-grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width:720px){
  .hero-inner{padding:72px 24px 88px}
  .prog-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .stat-row{gap:24px}
}