/* ===== Base ===== */
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.muted{color:var(--muted)}
.wrap{max-width:1180px;margin:0 auto;padding:18px}

/* ===== Top Navbar ===== */
.navbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.82);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.navbar-inner{
  max-width:1180px;margin:0 auto;padding:10px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.brand{
  display:flex;align-items:center;gap:10px;min-width:220px;
}
.brand img{width:34px;height:34px;object-fit:contain}
.brand .t{display:flex;flex-direction:column;line-height:1.1}
.brand .t strong{font-size:14px}
.brand .t span{font-size:12px;color:var(--muted)}

.navmenu{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.navitem{font-size:13px;color:#111;padding:8px 10px;border-radius:12px}
.navitem:hover{background:rgba(2,6,23,.05)}
.navright{display:flex;gap:10px;align-items:center}

.btn-pill{
  border:1px solid var(--line);
  background:#fff;
  padding:10px 12px;border-radius:999px;
  font-size:13px;display:inline-flex;gap:8px;align-items:center;
  cursor:pointer;
}
.btn-pill.primary{background:var(--primary);color:#fff;border-color:transparent}
.btn-pill:hover{box-shadow:0 14px 26px rgba(2,6,23,.10);transform:translateY(-1px);transition:.12s}

/* Mobile menu */
.burger{display:none;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 12px;cursor:pointer}
.drawerOverlay{display:none;position:fixed;inset:0;background:rgba(2,6,23,.45);z-index:60}
.drawer{
  position:fixed;top:0;right:-320px;width:320px;max-width:88vw;height:100%;
  background:#fff;z-index:70;border-left:1px solid var(--line);
  padding:16px;transition:.25s ease;
}
.drawer.show{right:0}
.drawerOverlay.show{display:block}
.drawer a{display:block;padding:12px;border-radius:12px}
.drawer a:hover{background:rgba(2,6,23,.05)}
@media(max-width:900px){
  .navmenu{display:none}
  .burger{display:inline-flex}
}

/* ===== Hero + Slider ===== */
.hero{
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:linear-gradient(135deg, rgba(31,143,58,.10), rgba(242,196,0,.10));
}

/* Slider Container */
.slider{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:#000;
}

.slides {
  display:flex;
  transition:transform 0.5s ease-in-out;
  width:100%;
}

.slide {
  min-width:100%;
  position:relative;
}

.slide-img{
  width:100%;
  height:420px;
  object-fit:cover;
  display:block;
}

.slide-empty {
  width:100%;
  height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#e5e7eb;
  color:#64748b;
  font-size:14px;
}

.slide-caption {
  position:absolute;
  left:18px;
  bottom:18px;
  right:18px;
  max-width:560px;
  background:linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.35));
  padding:20px;
  border-radius:12px;
}

.slide-title {
  font-size:24px;
  font-weight:900;
  color:#fff;
  margin-bottom:8px;
  text-shadow:0 2px 4px rgba(0,0,0,0.3);
}

.slide-sub {
  font-size:14px;
  color:rgba(255,255,255,0.95);
  text-shadow:0 1px 2px rgba(0,0,0,0.3);
}

/* Slide Navigation Buttons */
.slide-btn {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,0.9);
  border:1px solid rgba(0,0,0,0.1);
  width:44px;
  height:44px;
  border-radius:50%;
  font-size:24px;
  cursor:pointer;
  z-index:10;
  transition:all 0.2s;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#0f172a;
}

.slide-btn:hover {
  background:#fff;
  transform:translateY(-50%) scale(1.1);
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

.slide-btn.prev {
  left:18px;
}

.slide-btn.next {
  right:18px;
}

/* Dots Navigation */
.dots {
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:10;
}

.dot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,0.5);
  border:1px solid rgba(255,255,255,0.3);
  cursor:pointer;
  transition:all 0.3s;
  padding:0;
}

.dot:hover {
  background:rgba(255,255,255,0.8);
  transform:scale(1.2);
}

.dot.active {
  background:#fff;
  width:28px;
  border-radius:5px;
}

/* Slider Responsive */
@media(max-width:900px){
  .slide-img{height:260px}
  .slide-empty{height:260px}
  .slide-title{font-size:20px}
  .slide-sub{font-size:13px}
  .slide-btn{width:36px;height:36px;font-size:20px}
}

@media(max-width:520px){
  .slide-img{height:200px}
  .slide-empty{height:200px}
  .slide-title{font-size:16px}
  .slide-caption{padding:12px}
  .slide-btn{width:32px;height:32px;font-size:18px}
  .slide-btn.prev{left:10px}
  .slide-btn.next{right:10px}
  .dots{bottom:12px}
}

/* ===== Quick Nav ===== */
.quick{
  margin-top:14px;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:14px;box-shadow:var(--shadow);
}
.quick h3{margin:0 0 10px;font-size:14px}
.quick-grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
}
.qcard{
  border:1px solid rgba(31,143,58,.25);
  border-radius:14px;padding:12px;
  display:flex;gap:10px;align-items:center;
  background:linear-gradient(180deg, rgba(31,143,58,.06), rgba(255,255,255,1));
  transition:all 0.2s;
}
.qcard:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(31,143,58,0.15);
}
.qicon{width:34px;height:34px;border-radius:12px;background:rgba(31,143,58,.12);display:flex;align-items:center;justify-content:center}
.qicon img{width:18px;height:18px}
.qcard strong{font-size:13px}
@media(max-width:1100px){.quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Sections ===== */
.section{margin-top:16px}
.section-title{display:flex;justify-content:space-between;align-items:end;margin:0 0 10px}
.section-title h2{margin:0;font-size:16px}
.section-title a{font-size:13px;color:var(--primary)}
.section-title a:hover{text-decoration:underline}

/* General Card */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  box-shadow:var(--shadow);
}

/* Program + Principal grid */
.two-col{display:grid;grid-template-columns:2fr 1fr;gap:14px}
@media(max-width:900px){.two-col{grid-template-columns:1fr}}

.pcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:520px){.pcards{grid-template-columns:1fr}}

.pcard{
  background:linear-gradient(180deg, rgba(16,120,62,.95), rgba(12,100,52,.95));
  color:#fff;border-radius:18px;padding:16px;
  display:flex;gap:12px;align-items:flex-start;
  transition:all 0.2s;
}
.pcard:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(16,120,62,0.3);
}
.pcard .ic{width:40px;height:40px;border-radius:14px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.pcard .ic img{width:20px;height:20px}
.pcard .desc{opacity:.9;font-size:13px;margin-top:6px;line-height:1.4}

.principal{
  border:1px solid rgba(31,143,58,.22);
  border-radius:18px;
  background:linear-gradient(135deg, rgba(31,143,58,.10), rgba(255,255,255,1));
  box-shadow:var(--shadow);
  padding:16px;
}
.principal .photo{width:64px;height:64px;border-radius:999px;object-fit:cover;border:3px solid rgba(31,143,58,.25)}
.principal .name{font-weight:900;margin-top:10px;font-size:15px}
.principal .role{color:var(--muted);font-size:13px;margin-top:2px}
.principal .text{margin-top:10px;color:#334155;font-size:13px;line-height:1.45}
.principal .btns{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}

/* Stats cards */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{
  background:#fff;border:1px solid rgba(31,143,58,.25);
  border-radius:18px;padding:16px;box-shadow:var(--shadow);
  text-align:center;
  transition:all 0.2s;
}
.stat:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(31,143,58,0.15);
}
.stat .num{font-weight:900;font-size:26px;color:var(--primary)}
.stat .lbl{font-size:12px;color:var(--muted);margin-top:6px;text-transform:capitalize}

/* Achievement / Prestasi & News Cards */
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:900px){.cards3{grid-template-columns:1fr}}

.acard{
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow);
  transition:all 0.2s;
  cursor:pointer;
}
.acard:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(2,6,23,0.15);
}
.acard img{
  width:100%;
  height:160px;
  object-fit:cover;
  background:#e5e7eb;
  display:block;
}
.acard .b{
  padding:14px;
  background:linear-gradient(180deg, rgba(16,120,62,.92), rgba(12,100,52,.92));
  color:#fff;
}
.acard .tag{
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-size:12px;
  opacity:.9;
}
.acard .title{
  margin-top:6px;
  font-weight:900;
  font-size:15px;
  line-height:1.3;
}

/* Footer */
.footer{
  margin-top:20px;
  background:#f8fafc;
  border-top:1px solid var(--line);
}
.footer-inner{
  max-width:1180px;
  margin:0 auto;
  padding:22px 18px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:14px;
}
@media(max-width:900px){.footer-inner{grid-template-columns:1fr}}
.footer h4{margin:0 0 10px;font-size:14px}
.footer a{display:inline-block;margin:6px 10px 0 0;color:#0f172a;font-size:13px}
.footer a:hover{color:var(--primary)}
.footer .muted{font-size:12px;margin-top:8px}