:root{
  --bg:#0b1220;
  --bg2:#0f1b2e;
  --text:#eaf1ff;
  --muted:rgba(234,241,255,.75);
  --line:rgba(255,255,255,.12);
  --primary:#6d7cff;
  --primary2:#22d3ee;
  --shadow:0 18px 55px rgba(0,0,0,.35);
  --radius:18px;
}

[data-theme="light"]{
  --bg:#f7f8fb;
  --bg2:#ffffff;
  --text:#0d1320;
  --muted:rgba(13,19,32,.70);
  --line:rgba(13,19,32,.12);
  --primary:#4f46e5;
  --primary2:#06b6d4;
  --shadow:0 16px 40px rgba(13,19,32,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(109,124,255,.25), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(34,211,238,.18), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
    
}

.container{width:min(1100px, 92vw); margin:0 auto}
.muted{color:var(--muted)}
.link{color:inherit; text-decoration:none; opacity:.92}
.link:hover{opacity:1; text-decoration:underline}
.dot{width:9px;height:9px;border-radius:999px;background:#22c55e;display:inline-block;box-shadow:0 0 0 6px rgba(34,197,94,.15)}

.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background:rgba(10,16,28,.55);
  border-bottom:1px solid var(--line);
}
[data-theme="light"] .topbar{background:rgba(255,255,255,.7)}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.topbar__left{display:flex;gap:10px;align-items:center}
.topbar__right{display:flex;gap:16px;align-items:center}

header{
  position: sticky;
  top: 0px;
  z-index: 80;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(10,16,28,.5);
  border-bottom: 1px solid var(--line);
}
[data-theme="light"] .header{background:rgba(255,255,255,.55)}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}

.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit}
/* ===== LOGO MAI SPACE ===== */
.brand__logo{
  height:70px;        /* atur tinggi logo */
  width:auto;
  display:block;
}

@media (max-width: 768px){
  .brand__logo{
    height:36px;
  }
}
.brand__mark{
  width:36px;height:36px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(109,124,255,.95), rgba(34,211,238,.85));
  box-shadow:var(--shadow);
  font-weight:800;
}
.brand__name{font-weight:700;letter-spacing:.2px}

.nav{display:flex;gap:18px;align-items:center}
.nav a{color:inherit;text-decoration:none;opacity:.88}
.nav a:hover{opacity:1}

.header__cta{display:flex;gap:10px;align-items:center}

.hamburger{
  display:none;
  width:44px;height:44px;border:1px solid var(--line);
  border-radius:14px;background:transparent;color:inherit;
}
.hamburger span{display:block;width:18px;height:2px;background:currentColor;margin:5px auto;border-radius:2px;opacity:.9}

.mobileNav{display:none;border-bottom:1px solid var(--line)}
.mobileNav__inner{padding:14px 0;display:grid;gap:10px}
.mobileNav__inner a{text-decoration:none;color:inherit;opacity:.9}
.mobileNav__inner a:hover{opacity:1}

.btn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:inherit;
  padding:12px 14px;
  border-radius:14px;
  text-decoration:none;
  font-weight:600;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.btn:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.20)}
.btn--primary{
  border-color:transparent;
  background:linear-gradient(135deg, var(--primary2));
  color:#07101b;
}
[data-theme="light"] .btn--primary{color:#fff}
.btn--ghost{background:transparent}
.btn--block{width:100%}
.btn--sm{padding:9px 12px;border-radius:12px;font-size:.92rem}
.btn--icon{width:44px;height:44px;padding:0;display:grid;place-items:center}

.hero{padding:54px 0 28px; position:relative; overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.2fr .9fr;gap:28px;align-items:center}
.hero__bg{
  position:absolute; inset:-40% -25% auto -25%;
  height:520px; border-radius:999px;
  background: radial-gradient(circle at 40% 30%, rgba(109,124,255,.35), transparent 60%),
              radial-gradient(circle at 70% 60%, rgba(34,211,238,.26), transparent 60%);
  filter: blur(18px);
  opacity:.9;
  z-index:-1;
}

.pill{
  display:inline-flex; gap:10px; align-items:center;
  padding:10px 12px; border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--muted);
}
h1{font-size:clamp(2.0rem, 3.2vw, 3.1rem); line-height:1.05; margin:14px 0 10px}
.grad{
  background:linear-gradient(135deg, rgba(109,124,255,1), rgba(34,211,238,1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{font-size:1.06rem; line-height:1.7; color:var(--muted); margin:0 0 18px}
.hero__actions{display:flex; gap:12px; flex-wrap:wrap}

.stats{display:flex; gap:14px; margin-top:18px; flex-wrap:wrap}
.stat{
  flex: 1 1 140px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  border-radius:16px;
  padding:12px 14px;
}
.stat__num{font-weight:800}
.stat__label{color:var(--muted); font-size:.92rem}

.hero__cardWrap{position:relative}
.glassCard{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.glassCard__top{
  display:flex; align-items:center; gap:12px;
  padding:16px; border-bottom:1px solid var(--line);
}
.avatar{
  width:44px;height:44px;border-radius:16px;
  background:linear-gradient(135deg, rgba(109,124,255,.9), rgba(34,211,238,.75));
}
.glassCard__title{font-weight:800}
.glassCard__sub{font-size:.92rem}
.chip{
  margin-left:auto;
  padding:7px 10px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.08);
  font-size:.82rem;
}
.glassCard__body{padding:16px}
.divider{height:1px;background:var(--line); margin:14px 0}
.timeline{display:grid; gap:10px}
.titem{
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
}
.titem span{
  width:250px;height:28px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.10);
  border:1px solid var(--line);
  font-weight:800;
}
.titem p{
  margin:0;
  flex:1;                 /* <-- INI KUNCINYA */
  min-width:0;            /* <-- SUPAYA TEXT WRAP NORMAL */
}
.titem strong{
  font-size: 1rem;
}

.titem p span{
  font-size: 0.95rem;
}
.floatingTag{
  position:absolute;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--muted);
  backdrop-filter: blur(8px);
  box-shadow:var(--shadow);
  font-weight:600;
  font-size:.92rem;
  animation: floaty 5.6s ease-in-out infinite;
}
.floatingTag--a{top:-14px; left:-10px}
.floatingTag--b{bottom:22px; right:-10px; animation-duration:6.2s}
.floatingTag--c{top:44%; left:-18px; animation-duration:7s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.section{padding:54px 0}
.section--alt{
  background:rgba(255,255,255,.03);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.sectionHead{margin-bottom:18px}
.sectionHead h2{margin:0 0 8px; font-size:clamp(1.4rem, 2.1vw, 2rem)}
.grid3{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px}

.card{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.icon{
  width:44px;height:44px;border-radius:16px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  margin-bottom:10px
}

.pricing{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px}
.priceCard{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
  position:relative;
}
.priceCard--featured{
  background:linear-gradient(180deg, rgba(109,124,255,.18), rgba(34,211,238,.10));
  border-color:rgba(34,211,238,.35);
}
.ribbon{
  position:absolute; top:14px; right:14px;
  padding:7px 10px; border-radius:999px;
  background:rgba(34,211,238,.18);
  border:1px solid rgba(34,211,238,.35);
  font-size:.82rem;
}
.price{font-size:1.25rem; font-weight:800; margin:10px 0 12px}
.priceCard ul{margin:0 0 14px; padding-left:18px; color:var(--muted); line-height:1.7}

.faq details{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:14px 16px;
  box-shadow:var(--shadow);
  margin-bottom:10px;
}
.faq summary{cursor:pointer; font-weight:700}
.faq p{margin:10px 0 0; line-height:1.7; color:var(--muted)}

.section--cta{padding:54px 0 22px}
.ctaBox{
  display:grid; grid-template-columns:1.1fr .9fr; gap:14px; align-items:start;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(109,124,255,.14), rgba(34,211,238,.08));
  border-radius:calc(var(--radius) + 6px);
  padding:18px;
  box-shadow:var(--shadow);
}
.form{display:grid; gap:10px}
label span{display:block; margin-bottom:6px}

input, select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  outline:none;
}
input::placeholder{color:rgba(255,255,255,.45)}
[data-theme="light"] input::placeholder{color:rgba(13,19,32,.45)}
select option{color:#0d1320}

.footer{margin-top:20px}
.footer__grid{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:14px;
  padding-top:8px;
}
.footer__brand{font-size:1.05rem}
.footer__bottom{
  margin-top:12px;
  padding:12px 0 0;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  border-top:1px solid var(--line);
}

.reveal{opacity:0; transform:translateY(10px); transition:opacity .55s ease, transform .55s ease}
.reveal.is-visible{opacity:1; transform:none}

@media (max-width: 920px){
  .nav{display:none}
  .hamburger{display:block}
  .mobileNav{display:none}
  .hero__grid{grid-template-columns:1fr; gap:16px}
  .grid3, .pricing{grid-template-columns:1fr}
  .ctaBox{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
}

/* ===== SLIDER / GALERI FOTO ===== */
.slider{
  position:relative;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  border-radius:calc(var(--radius) + 6px);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.slider__viewport{
  overflow:hidden;
  width:100%;
}

.slider__track{
  display:flex;
  transition: transform .45s ease;
  will-change: transform;
}

.slide{
  min-width:100%;
  aspect-ratio: 16 / 9;
  position:relative;
  background:rgba(0,0,0,.08);
}

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

.slider__btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.25);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  backdrop-filter: blur(8px);
}
[data-theme="light"] .slider__btn{ background:rgba(255,255,255,.35); color:var(--text); }

.slider__btn--prev{ left:12px; }
.slider__btn--next{ right:12px; }

.slider__dots{
  position:absolute;
  left:0; right:0;
  bottom:12px;
  display:flex;
  justify-content:center;
  gap:8px;
  padding:0 12px;
}

.slider__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.18);
  cursor:pointer;
}
[data-theme="light"] .slider__dot{
  border-color:rgba(13,19,32,.35);
  background:rgba(13,19,32,.10);
}
.slider__dot.is-active{
  background:linear-gradient(135deg, var(--primary), var(--primary2));
  border-color:transparent;
}

.small-note{ margin-top:10px; }

.mapWrap{margin-top:14px}
.mapWrap iframe{
  width:100%;
  height:280px;
  border:0;
  border-radius:18px;
}
.quote{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  margin:0;
}
.quote blockquote{
  margin:0 0 10px;
  line-height:1.7;
  color:var(--text);
}
.quote figcaption{
  color:var(--muted);
}
/* ===== TESTIMONI SLIDER ===== */
.slider--testi .slide{
  padding:14px;              /* jarak agar card tidak mepet */
  min-width:100%;            /* default: 1 testimoni per layar */
  aspect-ratio: auto;        /* tidak pakai rasio foto */
  background: transparent;
}

@media (min-width: 900px){
  .slider--testi .slide{
    min-width:50%;           /* desktop: 2 testimoni sekali tampil */
  }
}

.slider--testi .quote{
  height:100%;
  margin:0;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}

.slider--testi blockquote{
  margin:0 0 12px;
  line-height:1.75;
  color:var(--text);
  font-size:1rem;
}

.slider--testi figcaption{
  color:var(--muted);
  font-weight:600;
}

/* rapikan tombol di slider testimoni */
.slider--testi .slider__btn{
  top:50%;
}
.btn--center{
  display: block;
  margin: 0 auto;   /* ini kuncinya */
  text-align: center;
}
.section--bg{
  background:
    linear-gradient(
       rgba(0,0,0,.45),
      rgba(0,0,0,.45)
    ),
    url("images/bgjpeg") center / cover no-repeat;
}
/* ===== HERO BACKGROUND GAMBAR ===== */
.section--bg{
  position: relative;

  background:
    linear-gradient(
      rgba(0,0,0,.100),
      rgba(0,0,0,.100)
    ),
    url("images/bg.jpeg") center / cover no-repeat;

  color:#fff;
}
.section--slide{
  position: relative;

  background:
    linear-gradient(
      rgba(0,0,0,.100),
      rgba(0,0,0,.100)
    ),
    url("images/bg.jpeg") center / cover no-repeat;

  color:#fff;
}