:root{
  --bg:#0f1115; --card:#171a21; --muted:#8b93a7; --text:#e8ecf3;
  --brand:#4ad77b; --accent:#3aa1ff; --line:#242a33;
  --radius:14px; --shadow:0 10px 24px rgba(0,0,0,.35); --focus:#ffd166;
}

/* RESET & BASE */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{display:block}

/* WRAPPER */
.container{max-width:1180px;margin-inline:auto;padding-inline:16px}

/* HEADER */
header{background:#0d0f13;box-shadow:0 1px 0 var(--line);position:sticky;top:0;z-index:100}
.nav{display:flex;justify-content:space-between;align-items:center;padding-block:12px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{width:34px;height:34px;display:grid;place-items:center;background:#11151c;border:1px solid var(--line);border-radius:8px;font-weight:800;color:var(--brand)}
.menu{display:flex;gap:16px;align-items:center}
.menu a{padding:8px 10px;border-radius:8px;white-space:nowrap}
.menu a[aria-current="page"]{background:#161b22;border:1px solid var(--line)}

/* right group: Menu + CTAs */
.nav-right{display:flex;align-items:center;gap:8px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:10px; line-height:1;
  background:#1a1f27; border:1px solid var(--line); color:var(--text); font-weight:600;
}
.btn:hover{background:#1f2530}
.btn.primary{background:var(--brand);color:#0a0f0a;border:none}
.btn .i{width:18px;height:18px;flex:0 0 18px}
.hamb{display:none}

/* HERO */
.hero{background:#0f141b;border-bottom:1px solid var(--line)}
.hero .container{padding-block:18px}
.hero-svg{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);margin-top:8px}
.badges{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.badge{padding:6px 10px;background:#11151c;border:1px solid var(--line);border-radius:999px;font-size:14px}

/* BREADCRUMB */
.breadcrumbs{display:flex;background:#0d1016;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.breadcrumbs nav{padding:10px 0}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs span{color:#fff}

/* SECTION */
.section{padding-block:28px}
.section h1{margin:0 0 14px;text-align:center;}

/* GRID & CARD (default 4 kolom) */
.grid{display:grid;gap:16px;grid-template-columns:repeat(4,1fr);align-items:stretch}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease;height:100%}
.card:hover{transform:translateY(-2px)}
.thumb{width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;background:#10141b}
.pad{padding:12px;display:flex;flex-direction:column;gap:6px;flex:1}
.pad h2{margin:0;font-size:16px}
.pad p{margin:0;color:var(--muted);font-size:14px}

/* === SIMETRIS: Visi–Misi & Kontak === */
.grid--vm{grid-template-columns:1fr 1fr}
.grid--vm .card{min-height:480px}
.grid--contact{grid-template-columns:1fr 1fr}
.grid--contact .card{min-height:520px}
@media(max-width:980px){
  .grid--vm,.grid--contact{grid-template-columns:1fr}
  .grid--vm .card,.grid--contact .card{min-height:unset}
}

/* FORM */
.input, .textarea{
  width:100%;padding:10px;border-radius:8px;border:1px solid var(--line);
  background:#0f141b;color:#e8ecf3;display:block;
}

/* FOOTER */
footer{background:#0b0e12;border-top:1px solid var(--line);margin-top:32px}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;padding-block:24px}
.copy{border-top:1px solid var(--line);color:var(--muted);padding-block:14px;text-align:center}

/* ==== Drawer (mobile) ==== */
@media (max-width:900px){ .menu{ display:none; } .hamb{ display:inline-flex; } }

.drawer{
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:saturate(120%) blur(2px);
  display:none; z-index:9999;
}
.drawer[aria-hidden="false"]{ display:block; }
.drawer__panel{
  position:absolute; top:0; right:0; height:100%; width:min(86vw, 360px);
  background:#11151c; border-left:1px solid var(--line);
  display:flex; flex-direction:column; gap:12px;
  transform:translateX(100%); transition:transform .25s ease-out;
  box-shadow:-20px 0 40px rgba(0,0,0,.4);
}
.drawer[aria-hidden="false"] .drawer__panel{ transform:translateX(0); }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); }
.drawer__close{ background:#1a1f27; border:1px solid var(--line); color:var(--text); padding:8px 10px; border-radius:8px; cursor:pointer; }
.drawer__close:hover{ background:#1f2530; }
.drawer__nav{ display:flex; flex-direction:column; padding:8px 16px; gap:8px; }
.drawer__nav a{ padding:10px 12px; border-radius:10px; background:#0f141b; border:1px solid var(--line); }
.drawer__nav a[aria-current="page"]{ background:#161b22; }
.drawer__actions{ margin-top:auto; padding:16px; display:flex; gap:10px; border-top:1px solid var(--line); }

/* ACCESSIBILITY */
:focus-visible{outline:3px dashed var(--focus);outline-offset:2px}

/* RESPONSIVE umum */
@media(max-width:980px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .foot{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .grid{grid-template-columns:1fr}
  .btn{padding:8px 12px}
  .btn .i{width:16px;height:16px}
}
.hero-carousel-section { position: relative; overflow: hidden; }
.carousel { position: relative; width: 100%; height: 400px; border-radius: 14px; overflow: hidden; }
.carousel-slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease;
  display: flex; align-items: center; justify-content: center;
}
.carousel-slide.active { opacity: 1; z-index: 1; }
.hero-img { width: 100%; height: 100%; object-fit: cover; }
.carousel-caption {
  position: absolute; bottom: 20px; left: 20px; background: rgba(0,0,0,.7); padding: 14px 20px; border-radius: 12px; max-width: 60%;
  backdrop-filter: blur(4px); text-align: left;
}
.carousel-caption h2 { margin: 0; font-size: 24px; color: var(--brand); }
.carousel-caption p { margin: 6px 0; font-size: 14px; }
.carousel-dots {
  display: flex; justify-content: center; gap: 10px; margin: 16px 0;
}
.dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--line); cursor: pointer; transition: .3s;
}
.dot.active, .dot:hover { background: var(--brand); transform: scale(1.2); }

/* === PROMO SCROLL === */
.promo-scroll {
  display: flex; gap: 20px; overflow-x: auto; padding: 10px 0; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.promo-scroll::-webkit-scrollbar { display: none; }
.promo-card {
  flex: 0 0 320px; scroll-snap-align: start; background: var(--card); border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow); transition: .3s; position: relative;
}
.promo-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(74,215,123,.3); }
.promo-img { width: 100%; height: 200px; object-fit: cover; }
.promo-content { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.promo-content h3 { margin: 0; font-size: 18px; color: var(--brand); }
.promo-content p { margin: 0; font-size: 14px; color: var(--muted); }
.btn.small { padding: 8px 16px; font-size: 14px; }

/* Responsive */
@media (max-width: 640px) {
  .carousel { height: 300px; }
  .carousel-caption { left: 10px; bottom: 10px; max-width: 80%; }
  .carousel-caption h2 { font-size: 18px; }
  .promo-card { flex: 0 0 280px; }
}
.card-slider { overflow: hidden; position: relative; }
.mini-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1; /* EXACT 1200:400 */
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  background: #10141b; /* fallback kalau gambar lambat load */
}
.mini-slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .6s ease;
  display: flex; align-items: center; justify-content: center;
}
.mini-slide.active { opacity: 1; z-index: 1; }
.mini-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Biar fill tanpa stretch */
  object-position: center;
}