/* ════════════════════════════════════════════════════
   HALAMAN KONVEKSI CUSTOM — style-konveksi.css
════════════════════════════════════════════════════ */

/* ── Self-contained base classes ─────────────────── */
.sk-container { width:100%; max-width:1200px; margin-inline:auto; padding-inline:24px; box-sizing:border-box; }
.sk-container--narrow { max-width:800px; margin-inline:auto; padding-inline:24px; }
.sk-section { padding-block:80px; }
.sk-section--dark { background:#0F172A; }
.sk-section--dark .sk-section-header h2 { color:#fff; }
.sk-section--dark .sk-section-header p { color:rgba(255,255,255,.6); }
.sk-section-header { text-align:center; max-width:640px; margin:0 auto 56px; }
.sk-section-header h2 { font-size:clamp(1.6rem,3vw,2.4rem); margin-bottom:12px; line-height:1.2; }
.sk-section-header p { color:#666; font-size:1rem; }
.sk-eyebrow { display:inline-block; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:#F97316; margin-bottom:10px; }
.sk-btn { display:inline-flex; align-items:center; gap:8px; padding:12px 28px; border-radius:50px; font-weight:700; font-size:.9rem; text-decoration:none; cursor:pointer; border:2px solid transparent; transition:all .2s; white-space:nowrap; font-family:inherit; }
.sk-btn:hover { transform:translateY(-2px); }
.sk-btn-primary { background:#F97316; color:#fff; border-color:#F97316; }
.sk-btn-primary:hover { background:#ea6a0a; color:#fff; }
.sk-btn-outline { background:transparent; color:#F97316; border-color:#F97316; }
.sk-btn-outline:hover { background:#F97316; color:#fff; }
.sk-btn-sm { padding:8px 18px; font-size:.8rem; }
.sk-btn-full { width:100%; justify-content:center; }
.sk-breadcrumb ol { display:flex; align-items:center; gap:8px; list-style:none; padding:0; margin:0; font-size:.8rem; color:rgba(255,255,255,.5); }
.sk-breadcrumb ol li+li::before { content:'/'; margin-right:8px; }
.sk-breadcrumb a { color:rgba(255,255,255,.6); text-decoration:none; }
.sk-faq-item { border-bottom:1px solid #e5e7eb; }
.sk-faq-question { width:100%; background:none; border:none; text-align:left; padding:18px 0; font-size:.95rem; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; color:#0F172A; font-family:inherit; }
.sk-faq-question:hover { color:#F97316; }
.sk-faq-answer { max-height:0; overflow:hidden; transition:max-height .35s ease, padding-bottom .35s ease; }
.sk-faq-answer p { color:#555; line-height:1.7; font-size:.9rem; margin:0; padding-bottom:4px; }
.sk-faq-item.active .sk-faq-answer { max-height:300px; padding-bottom:20px; }
.sk-faq-icon i { transition:transform .3s; display:inline-block; color:#F97316; }
.sk-faq-item.active .sk-faq-icon i { transform:rotate(45deg); }
/* AOS */
.js [data-aos] { opacity:0; transform:translateY(28px); transition:opacity .6s ease,transform .6s ease; }
.js [data-aos].aos-animate { opacity:1; transform:translateY(0); }
.js [data-aos="fade-right"] { opacity:0; transform:translateX(-28px); }
.js [data-aos="fade-right"].aos-animate { opacity:1; transform:translateX(0); }
.js [data-aos="fade-left"] { opacity:0; transform:translateX(28px); }
.js [data-aos="fade-left"].aos-animate { opacity:1; transform:translateX(0); }

/* ════ 1. HERO ════════════════════════════════════ */
.knv-hero {
  min-height:100vh; padding:120px 0 60px;
  background:#0F172A; background-size:cover; background-position:center;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.knv-hero__overlay {
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(135deg,rgba(15,23,42,.96) 0%,rgba(15,23,42,.78) 60%,rgba(249,115,22,.12) 100%);
}
.knv-hero__pattern {
  position:absolute; inset:0; z-index:0; opacity:.035;
  background-image:repeating-linear-gradient(0deg,#fff 0,#fff 1px,transparent 0,transparent 40px),
                   repeating-linear-gradient(90deg,#fff 0,#fff 1px,transparent 0,transparent 40px);
}
.knv-hero__inner {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 400px; gap:60px; align-items:center;
}
.knv-hero__content h1 {
  font-size:clamp(2.4rem,5vw,3.8rem); color:#fff; line-height:1.05;
  margin:16px 0 20px; font-weight:800;
  font-family:'Barlow Condensed',sans-serif;
}
.knv-hero__content h1 em { font-style:italic; color:#F97316; }
.knv-hero__lead { color:rgba(255,255,255,.78); font-size:1.05rem; line-height:1.7; margin-bottom:28px; max-width:520px; }
.knv-hero__badges { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.knv-pill { display:inline-flex; align-items:center; gap:6px; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; padding:6px 14px; border-radius:30px; }
.knv-pill--gold { background:#FBBF24; color:#0F172A; }
.knv-pill--outline { border:1.5px solid rgba(255,255,255,.3); color:rgba(255,255,255,.7); }
.knv-hero__actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.knv-btn-hero { font-size:1rem; padding:14px 28px; }
.knv-btn-outline-hero { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:50px; border:2px solid rgba(255,255,255,.3); color:rgba(255,255,255,.8); font-size:1rem; font-weight:700; text-decoration:none; transition:all .2s; }
.knv-btn-outline-hero:hover { border-color:rgba(255,255,255,.7); color:#fff; background:rgba(255,255,255,.08); }
.knv-hero__trust { display:flex; gap:20px; flex-wrap:wrap; }
.knv-hero__trust span { font-size:.8rem; color:rgba(255,255,255,.5); display:flex; align-items:center; gap:6px; }
.knv-hero__trust i { color:#F97316; }
.knv-hero__cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.knv-hero__card {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:16px; display:flex; align-items:center; gap:12px;
  backdrop-filter:blur(6px); transition:border-color .2s,background .2s;
}
.knv-hero__card:hover { border-color:rgba(249,115,22,.4); background:rgba(249,115,22,.08); }
.knv-hero__card > i { font-size:1.4rem; color:#F97316; flex-shrink:0; width:32px; text-align:center; }
.knv-hero__card strong { display:block; font-size:.8rem; color:#fff; margin-bottom:2px; line-height:1.3; }
.knv-hero__card span { font-size:.72rem; color:rgba(255,255,255,.5); }

/* ════ 2. STATS ═══════════════════════════════════ */
.knv-stats { background:#fff; border-bottom:2px solid #f0f0f0; padding:40px 0; }
.knv-stats__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.knv-stat {
  display:flex; align-items:center; gap:16px; padding:20px 24px;
  border-right:1px solid #f0f0f0;
}
.knv-stat:last-child { border-right:none; }
.knv-stat__icon {
  width:52px; height:52px; flex-shrink:0;
  background:rgba(249,115,22,.1); border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:#F97316; font-size:1.3rem;
}
.knv-stat__num { display:block; font-size:clamp(1.5rem,2.5vw,2rem); font-weight:900; color:#0F172A; font-family:'Barlow Condensed',sans-serif; line-height:1; }
.knv-stat p { font-size:.8rem; color:#888; margin:4px 0 0; }

/* ════ 3. PRODUK GRID ════════════════════════════ */
.knv-produk__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.knv-produk__card {
  background:#fff; border-radius:18px;
  box-shadow:0 4px 24px rgba(15,23,42,.08);
  overflow:hidden; transition:transform .3s,box-shadow .3s;
  border:2px solid transparent;
}
.knv-produk__card:hover {
  transform:translateY(-6px);
  box-shadow:0 16px 48px rgba(15,23,42,.14);
  border-color:rgba(249,115,22,.2);
}
.knv-produk__img { height:200px; overflow:hidden; position:relative; }
.knv-produk__img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; display:block; }
.knv-produk__card:hover .knv-produk__img img { transform:scale(1.07); }
.knv-img-ph {
  width:100%; height:100%;
  background:linear-gradient(135deg,#f8fafc,#f1f5f9);
  display:flex; align-items:center; justify-content:center;
  font-size:3rem;
}
.knv-produk__badge {
  position:absolute; top:12px; right:12px;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.9rem;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.knv-produk__hover-cta {
  position:absolute; inset:0; background:rgba(15,23,42,.7);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s;
}
.knv-produk__card:hover .knv-produk__hover-cta { opacity:1; }
.knv-produk__body { padding:22px; }
.knv-produk__body h3 { font-size:1rem; margin-bottom:8px; color:#0F172A; }
.knv-produk__body p { font-size:.82rem; color:#666; line-height:1.6; margin-bottom:14px; }
.knv-produk__specs { list-style:none; padding:0; margin:0 0 16px; }
.knv-produk__specs li {
  font-size:.78rem; padding:3px 0; color:#555;
  display:flex; align-items:center; gap:6px;
}
.knv-produk__specs li i { color:var(--knv-accent,#F97316); font-size:.65rem; flex-shrink:0; }
.knv-produk__cta {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.82rem; font-weight:700; color:var(--knv-accent,#F97316);
  text-decoration:none; transition:gap .2s;
}
.knv-produk__cta:hover { gap:10px; }

/* ════ 4. KEUNGGULAN ═════════════════════════════ */
.knv-unggulan__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:48px; }
.knv-unggulan__card {
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:28px;
  transition:border-color .2s,background .2s,transform .2s;
}
.knv-unggulan__card:hover {
  border-color:rgba(249,115,22,.3);
  background:rgba(249,115,22,.07);
  transform:translateY(-4px);
}
.knv-unggulan__icon {
  width:52px; height:52px; background:rgba(249,115,22,.15);
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:#F97316; font-size:1.3rem; margin-bottom:16px;
}
.knv-unggulan__card h3 { color:#fff; font-size:.95rem; margin-bottom:8px; }
.knv-unggulan__card p { color:rgba(255,255,255,.6); font-size:.82rem; line-height:1.6; margin:0; }

/* ════ 5. KAPASITAS ══════════════════════════════ */
.knv-kapasitas__grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.knv-kapasitas__img { position:relative; }
.knv-kapasitas__img img { width:100%; border-radius:20px; box-shadow:0 16px 48px rgba(15,23,42,.15); display:block; }
.knv-img-ph--lg {
  width:100%; aspect-ratio:4/3; background:linear-gradient(135deg,#f1f5f9,#e2e8f0);
  border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; color:#94a3b8;
}
.knv-img-ph--lg i { font-size:4rem; }
.knv-img-ph--lg span { font-size:.875rem; }
.knv-kapasitas__badge {
  position:absolute; bottom:-16px; right:-16px;
  background:#F97316; color:#fff; border-radius:14px; padding:14px 20px;
  display:flex; align-items:center; gap:12px;
  box-shadow:0 8px 24px rgba(249,115,22,.4);
}
.knv-kapasitas__badge i { font-size:1.4rem; flex-shrink:0; }
.knv-kapasitas__badge strong { display:block; font-size:1.3rem; font-weight:900; font-family:'Barlow Condensed',sans-serif; line-height:1; }
.knv-kapasitas__badge small { font-size:.72rem; opacity:.85; }
.knv-kapasitas__content h2 { font-size:clamp(1.6rem,3vw,2.4rem); margin-bottom:14px; line-height:1.2; }
.knv-kapasitas__content p { color:#555; line-height:1.7; margin-bottom:24px; }
.knv-kap__grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:28px; }
.knv-kap__item {
  display:flex; align-items:center; gap:10px;
  background:#FFFBF5; border-radius:10px; padding:12px;
  border:1px solid rgba(249,115,22,.15);
}
.knv-kap__icon {
  width:38px; height:38px; flex-shrink:0;
  background:rgba(249,115,22,.1); border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:#F97316;
}
.knv-kap__item strong { display:block; font-size:.82rem; color:#0F172A; margin-bottom:1px; }
.knv-kap__item small { font-size:.72rem; color:#888; }

/* ════ 6. SPESIFIKASI ════════════════════════════ */
.knv-spek__grid { display:grid; grid-template-columns:1fr 360px; gap:48px; align-items:start; margin-top:40px; }
.knv-spek__table { width:100%; border-collapse:collapse; border-radius:16px; overflow:hidden; box-shadow:0 4px 24px rgba(15,23,42,.08); }
.knv-spek__table thead th { background:#0F172A; color:#fff; padding:14px 20px; text-align:left; font-size:.8rem; text-transform:uppercase; letter-spacing:.5px; }
.knv-spek__table tbody tr { border-bottom:1px solid #f0f0f0; }
.knv-spek__table tbody tr:last-child { border-bottom:none; }
.knv-spek__table tbody tr:nth-child(even) { background:#fafafa; }
.knv-spek__table tbody td { padding:11px 20px; font-size:.85rem; }
.knv-spek__table tbody td:first-child { font-weight:600; color:#0F172A; width:40%; }
.knv-spek__info { display:flex; flex-direction:column; gap:14px; }
.knv-spek__tip {
  background:#fff; border-radius:12px; padding:18px;
  border-left:3px solid #F97316;
  display:flex; gap:14px;
  box-shadow:0 2px 12px rgba(15,23,42,.06);
}
.knv-spek__tip-icon {
  width:36px; height:36px; flex-shrink:0;
  background:rgba(249,115,22,.1); border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:#F97316; font-size:.9rem;
}
.knv-spek__tip strong { display:block; font-size:.875rem; margin-bottom:4px; }
.knv-spek__tip p { font-size:.79rem; color:#666; margin:0; line-height:1.5; }

/* ════ 7. ALUR PESAN ════════════════════════════ */
.knv-alur__steps {
  display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:48px; position:relative;
}
.knv-alur__steps::before {
  content:''; position:absolute; top:48px; left:8%; right:8%;
  height:2px; background:rgba(249,115,22,.2); z-index:0;
}
.knv-alur__step { text-align:center; position:relative; z-index:1; }
.knv-alur__num { font-size:.65rem; font-weight:700; color:#F97316; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.knv-alur__icon {
  width:60px; height:60px; border:2px solid rgba(249,115,22,.3);
  background:rgba(255,255,255,.07); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 12px; font-size:1.2rem; color:#F97316;
  transition:background .2s,border-color .2s;
}
.knv-alur__step:hover .knv-alur__icon { background:rgba(249,115,22,.15); border-color:#F97316; }
.knv-alur__step h3 { color:#fff; font-size:.88rem; margin-bottom:6px; }
.knv-alur__step p { color:rgba(255,255,255,.55); font-size:.76rem; line-height:1.5; }

/* ════ 8. GALERI ════════════════════════════════ */
.knv-galeri__grid { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:220px; gap:12px; margin-top:40px; }
.knv-galeri__item:nth-child(1) { grid-column:span 2; }
.knv-galeri__item { border-radius:12px; overflow:hidden; position:relative; cursor:pointer; }
.knv-galeri__item a { display:block; width:100%; height:100%; }
.knv-galeri__item img { width:100%; height:100%; object-fit:cover; transition:transform .4s; display:block; }
.knv-galeri__item:hover img { transform:scale(1.08); }
.knv-galeri__overlay {
  position:absolute; inset:0; background:rgba(15,23,42,.6);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.5rem; opacity:0; transition:opacity .3s;
}
.knv-galeri__item:hover .knv-galeri__overlay { opacity:1; }
.knv-gal-ph-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.knv-gal-ph { height:200px; border-radius:12px; background:#f8fafc; border:2px dashed #e2e8f0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#94a3b8; }
.knv-gal-ph i { font-size:2rem; }
.knv-gal-ph span { font-size:.75rem; }

/* ════ 9. HARGA ══════════════════════════════════ */
.knv-harga__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.knv-harga__card { border-radius:20px; padding:36px 28px; position:relative; transition:transform .25s,box-shadow .25s; }
.knv-harga__card:hover { transform:translateY(-6px); box-shadow:0 20px 48px rgba(15,23,42,.12); }
.knv-harga__card--outline { border:2px solid #e5e7eb; background:#fff; }
.knv-harga__card--primary { background:#0F172A; color:#fff; border:2px solid #0F172A; }
.knv-harga__badge {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:#F97316; color:#fff; font-size:.72rem; font-weight:700;
  text-transform:uppercase; padding:4px 16px; border-radius:20px;
  letter-spacing:.5px; white-space:nowrap;
}
.knv-harga__card h3 { font-size:1.2rem; margin-bottom:6px; }
.knv-harga__card--primary h3 { color:#fff; }
.knv-harga__range {
  display:inline-block; background:rgba(249,115,22,.12);
  color:#F97316; font-weight:700; font-size:.9rem;
  padding:4px 12px; border-radius:20px; margin-bottom:20px;
}
.knv-harga__fitur { list-style:none; padding:0; margin:0 0 24px; }
.knv-harga__fitur li {
  padding:8px 0; border-bottom:1px solid rgba(0,0,0,.06);
  display:flex; align-items:center; gap:8px; font-size:.875rem;
}
.knv-harga__card--primary .knv-harga__fitur li { border-bottom-color:rgba(255,255,255,.1); color:rgba(255,255,255,.85); }
.knv-harga__fitur li:last-child { border-bottom:none; }
.knv-harga__fitur li i { color:#F97316; font-size:.75rem; flex-shrink:0; }

/* ════ 10. FAQ ═══════════════════════════════════ */
.knv-faq { background:#fff; }

/* ════ 11. CTA FINAL ════════════════════════════ */
.knv-cta-final { background:#0F172A; padding:100px 0; text-align:center; position:relative; overflow:hidden; }
.knv-cta-final__bg {
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 25% 50%,rgba(249,115,22,.18) 0%,transparent 50%),
                   radial-gradient(circle at 75% 50%,rgba(251,191,36,.08) 0%,transparent 50%);
}
.knv-cta-final__inner { position:relative; z-index:2; max-width:680px; margin:0 auto; }
.knv-cta-final__icon {
  width:80px; height:80px; background:rgba(249,115,22,.15); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 24px; font-size:2rem; color:#F97316;
}
.knv-cta-final__inner h2 { color:#fff; font-size:clamp(2rem,4vw,3rem); line-height:1.15; margin-bottom:20px; }
.knv-cta-final__inner h2 em { font-style:italic; color:#F97316; }
.knv-cta-final__inner p { color:rgba(255,255,255,.7); font-size:1.05rem; margin-bottom:36px; line-height:1.7; }
.knv-btn-white { background:#fff; color:#F97316; border:2px solid #fff; border-radius:50px; display:inline-flex; align-items:center; gap:8px; padding:16px 36px; font-weight:700; font-size:1.05rem; text-decoration:none; transition:all .2s; }
.knv-btn-white:hover { background:#F97316; color:#fff; border-color:#F97316; transform:translateY(-2px); }
.knv-btn-xl { font-size:1.05rem; padding:16px 36px; }
.knv-cta-final__actions { display:flex; flex-direction:column; align-items:center; gap:16px; }
.knv-cta-final__note { display:flex; justify-content:center; gap:24px; flex-wrap:wrap; }
.knv-cta-final__note span { font-size:.8rem; color:rgba(255,255,255,.45); display:flex; align-items:center; gap:6px; }

/* ════ RESPONSIVE ════════════════════════════════ */
@media (max-width:1024px) {
  .knv-hero__inner { grid-template-columns:1fr; }
  .knv-hero__right { display:none; }
  .knv-unggulan__grid { grid-template-columns:repeat(2,1fr); }
  .knv-produk__grid { grid-template-columns:repeat(2,1fr); }
  .knv-kapasitas__grid { grid-template-columns:1fr; }
  .knv-kapasitas__img { order:-1; }
  .knv-kapasitas__badge { position:static; display:inline-flex; margin-bottom:16px; }
  .knv-spek__grid { grid-template-columns:1fr; }
  .knv-alur__steps { grid-template-columns:repeat(3,1fr); }
  .knv-alur__steps::before { display:none; }
  .knv-stats__grid { grid-template-columns:repeat(2,1fr); }
  .knv-harga__grid { grid-template-columns:repeat(2,1fr); }
  .knv-galeri__grid { grid-template-columns:repeat(2,1fr); }
  .knv-galeri__item:nth-child(1) { grid-column:span 1; }
}
@media (max-width:768px) {
  .knv-hero { padding:100px 0 48px; }
  .knv-hero__content h1 { font-size:2.2rem; }
  .knv-unggulan__grid { grid-template-columns:1fr; }
  .knv-produk__grid { grid-template-columns:1fr; }
  .knv-alur__steps { grid-template-columns:repeat(2,1fr); }
  .knv-harga__grid { grid-template-columns:1fr; }
  .knv-kap__grid { grid-template-columns:1fr; }
  .knv-stat { border-right:none; border-bottom:1px solid #f0f0f0; }
  .knv-galeri__grid { grid-template-columns:1fr; grid-auto-rows:200px; }
  .knv-cta-final { padding:72px 0; }
  .knv-cta-final__note { flex-direction:column; align-items:center; gap:10px; }
}
@media (max-width:480px) {
  .knv-hero__actions { flex-direction:column; }
  .knv-alur__steps { grid-template-columns:1fr; }
  .knv-stats__grid { grid-template-columns:1fr 1fr; }
  .knv-spek__table tbody td,
  .knv-spek__table thead th { padding:10px 12px; font-size:.79rem; }
}