:root{
  --bg:#f6f7f9;
  --text:#1a1a1a;
  --muted:#6b7280;
  --brand:#8b5e34; /* coklat */
  --brand-soft:#e8d5c2;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Arial,sans-serif}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.container{max-width:1100px;margin:auto;padding:0 20px}
/* Header */
.site-header{position:sticky;top:0;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.06);z-index:10}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.brand__logo{width:40px;height:40px;border-radius:50%;object-fit:cover}
.brand__name{font-weight:700;letter-spacing:.2px}
/* Nav */
.nav a{margin-left:18px;text-decoration:none;color:var(--muted);font-weight:600}
.nav a.active{color:var(--brand);border-bottom:2px solid var(--brand)}
/* DESKTOP baseline */


/* MOBILE */
@media (max-width:820px){
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid rgba(0,0,0,.12);background:var(--sand);
    border-radius:12px;padding:8px 10px;cursor:pointer
  }
  .nav{
    position:absolute;right:0;top:calc(100% + 8px);
    background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;
    box-shadow:var(--shadow);padding:10px;display:none;
    flex-direction:column;gap:6px;min-width:200px;margin-left:0
  }
  .nav.open{display:flex}
}

/* Sections */
.section{padding:64px 0}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.hero .badge{font-size:.8rem;letter-spacing:.1em;color:var(--brand)}
.hero h1{font-family:Playfair Display,serif;font-size:2.6rem;margin:.4rem 0 1rem}
.hero p{color:var(--muted)}
.cta{display:inline-block;background:var(--brand);color:#fff;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:700}
.grid{display:grid;gap:20px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:18px}
.card h3{margin-top:0}
.badge{display:inline-block;background:var(--brand-soft);color:var(--brand);font-weight:700;padding:4px 10px;border-radius:999px}
.kicker{letter-spacing:.12em;font-size:.8rem;color:var(--brand);text-transform:uppercase}
/* Footer */
.site-footer{border-top:1px solid rgba(0,0,0,.06);background:#fff}
.site-footer .container{padding:24px 20px}
/* Utilities */
.mt-2{margin-top:.5rem}
.mt-3{margin-top:1rem}
.mt-4{margin-top:1.5rem}
.mt-6{margin-top:2rem}
ul.clean{padding-left:1rem}
ul.clean li{margin:.4rem 0;color:var(--muted)}
/* Responsive */
@media (max-width: 820px){
  .hero{grid-template-columns:1fr}
  .grid.cols-3{grid-template-columns:1fr}
  .nav{display:none}
}

/* default (desktop) */
.nav { display:flex; align-items:center; }
.nav__toggle { display:none; }

/* mobile */
@media (max-width:820px){
  .nav__toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border:1px solid rgba(0,0,0,.1);
    border-radius:10px; background:#fff; font-size:20px; cursor:pointer;
  }
  .nav{
    display:none;              /* hidden default */
    position:absolute; right:20px; top:64px;
    background:#fff; border:1px solid rgba(0,0,0,.06);
    border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.08);
    padding:10px; z-index:20; flex-direction:column; gap:8px;
    min-width:180px;
  }
  .nav.is-open{ display:flex; }
  .nav a{ margin:0; padding:8px 10px; border-radius:8px; }
  .nav a:hover{ background:#f6f7f9; }
}
/* logos / credibility strip */
.logos__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px;              /* jarak antar logo */
  padding: 24px 0;
}

.logo {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
}

.logo img {
  max-height: 32px;       /* tinggi logo */
  width: auto;
  opacity: 0.9;           /* biar lebih soft */
  transition: opacity .2s;
}
.logo img:hover {
  opacity: 1;
}
.devices{
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  gap:24px;
}
.device{ margin:0; }
.device .bezel{
  background:#111; border-radius:14px; padding:12px; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}

/* Laptop */
.device.laptop{ width:min(640px, 100%); }
.device.laptop .bezel{ border-radius:14px 14px 10px 10px; }
.device.laptop .foot{
  display:block; height:10px; width:92%;
  margin:0 auto; border-radius:0 0 12px 12px;
  background:#cfcfcf; box-shadow:0 6px 20px rgba(0,0,0,.15) inset;
}
.device.laptop img{ width:100%; height:auto; display:block }

/* Phone */
.device.phone{
  width:180px; transform:translateY(18%);
}
.device.phone .bezel{ padding:10px; border-radius:28px }
.device.phone img{ width:100%; height:auto; display:block; border-radius:12px }

/* Responsive */
@media (max-width:820px){
  .devices{ gap:14px }
  .device.laptop{ width:100% }
  .device.phone{ width:140px; transform:translateY(12%) }
}

/* logo dan sertif*/
.certs h2{ margin:0 0 14px; font-family:Playfair Display,serif; }
.cert{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:14px 16px; border-radius:14px; text-decoration:none; color:inherit;
  box-shadow:0 6px 20px rgba(0,0,0,.04);
}
.cert:hover{ box-shadow:0 10px 28px rgba(0,0,0,.06); transform:translateY(-1px) }
.cert__logo{ display:inline-flex; align-items:center; justify-content:center }
.cert__text strong{ display:block; font-weight:700 }
.cert__text span{ color:#6b7280; font-size:.9rem }

/* Logo strip */
.tech-logos{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:20px;
  margin-top:24px;
}
.tech-logos svg{
  width:40px; height:40px;
  display:block;
  opacity:.9;
  transition:.2s;
}
.tech-logos svg:hover{
  opacity:1;
  transform: translateY(-2px);
}

/* Certificates */
.certs{
  margin-top:40px;
}
.cert{
  display:flex; align-items:center; gap:14px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:16px 18px;
  text-decoration:none; color:inherit;
  transition:.2s;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
}
.cert:hover{ box-shadow:0 8px 20px rgba(0,0,0,.06); transform:translateY(-2px); }
.cert__logo svg{ width:28px; height:28px; }
.cert__text strong{ font-weight:700; display:block }
.cert__text span{ color:#6b7280; font-size:.9rem }

.certs h2 {
  margin: 0 0 14px;
  font-family: Playfair Display, serif;
}

.cert {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  transition: .2s;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}

.cert:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  transform: translateY(-2px);
}

.cert__logo svg {
  width: 28px;
  height: 28px;
}

.cert__text strong {
  display: block;
  font-weight: 700;
}

.cert__text span {
  color: #6b7280;
  font-size: .9rem;
}


.section { padding: 72px 0; }              /* dari 64 → 72 */
.tech-logos { margin-top: 28px; }
.certs     { margin-top: 36px; }

.tech-logos svg { width:40px; height:40px; }
@media (max-width:640px){ .tech-logos svg{ width:32px; height:32px; } }

section.certs .cert{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:14px; padding:16px 18px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  text-decoration:none; color:inherit; transition:.2s;
}
section.certs .cert:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.08); }

.cta{ box-shadow:0 6px 14px rgba(139,94,52,.25); }
.cta:hover{ transform:translateY(-1px); }

.certs {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* Fallback CSS fade (untuk browser tanpa View Transitions) */
body.vt-fade-in { animation: vtFadeIn .35s ease both; }
body.vt-fade-out{ animation: vtFadeOut .35s ease both; }

@keyframes vtFadeIn  { from {opacity:0} to {opacity:1} }
@keyframes vtFadeOut { from {opacity:1} to {opacity:0} }

/* Halusin View Transitions (Chrome/Edge/Samsung ≥111) */
::view-transition-group(*){ animation-duration:.38s; }
::view-transition-old(*), ::view-transition-new(*){ animation-timing-function:ease; }

.site-footer {
  text-align: center;
  padding: 20px 10px;
  font-size: 14px;
  color: #aaa;
  border-top: 1px solid #222;
}

.legal-links {
  margin-top: 8px;
}

.legal-links a {
  font-size: 12px; /* lebih kecil */
  color: #888;
  margin: 0 8px;
  text-decoration: none;
}

.legal-links a:hover {
  color: #fff;
  text-decoration: underline;
}

.legal-header {
  max-width: 900px;
  margin: 20px auto;
  padding: 0 20px;
}

.home-btn {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--brand, #c49a6c); /* aksen coklat muda */
  text-decoration: none;
  border: 1px solid var(--brand, #c49a6c);
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.home-btn:hover {
  background: var(--brand, #c49a6c);
  color: #2b1d17; /* coklat tua */
}

.projects{display:grid;gap:18px}
@media(min-width:720px){.projects{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}}

.project-card{
  background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:20px;padding:16px;
  box-shadow:var(--shadow)
}
.project-card header h3{margin:0 0 6px;color:var(--cocoa-dark)}
.project-card p{margin:0 0 10px;color:rgba(0,0,0,.75)}

.slider{position:relative;border-radius:16px;overflow:hidden;background:var(--sand-light)}
/* Rasio 16:9; ubah ke 4:3 jika perlu */
.slider::before{content:"";display:block;padding-top:56%}
.slides{
  position:absolute;inset:0;display:flex;transition:transform .5s ease-in-out
}
.slides img{width:100%;object-fit:cover;flex:0 0 100%}

.slider > .nav{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.4);color:#fff;border:none;border-radius:10px;
  padding:6px 10px;cursor:pointer
}
.slider > .nav:hover{background:rgba(0,0,0,.55)}
.slider > .nav.prev{left:8px}
.slider > .nav.next{right:8px}

.dots{
  position:absolute;left:50%;transform:translateX(-50%);bottom:8px;
  display:flex;gap:6px;background:rgba(255,255,255,.7);
  padding:4px 6px;border-radius:999px
}
.dots button{
  width:8px;height:8px;border-radius:999px;border:none;background:rgba(0,0,0,.25);
  cursor:pointer
}
.dots button.active{background:var(--accent)}

.project-card .actions{display:flex;gap:10px;margin-top:12px}

.slider::before{ padding-top:75%; } /* 4:3 */

.pricing { text-align:center; padding:2rem; border:1px solid #eee; border-radius:14px; transition:.2s; }
.pricing:hover { transform: translateY(-6px); box-shadow:0 10px 24px rgba(0,0,0,.08); }
.pricing-head h3 { margin:0; color: var(--brand); }
.pricing .sub { display:block; font-size:.9rem; color:var(--muted); margin-top:.25rem; }
.price { font-size:1.9rem; font-weight:700; margin:.8rem 0 1rem; }
.price .currency { font-size:1rem; vertical-align: super; margin-right:.15rem; }
.features { list-style:none; padding:0; margin:0 0 1.2rem; text-align:left; }
.features li { padding:.35rem 0; border-bottom:1px dashed #eee; }
.features li:last-child { border-bottom:0; }
.btn.w-100 { display:block; width:100%; }
.featured { background: var(--brand-soft); border:2px solid var(--brand); transform: scale(1.03); }
.ribbon {
  position:absolute; top:12px; right:-8px; background: var(--brand);
  color:#fff; padding:.3rem .6rem; font-size:.8rem; border-radius:6px;
}
.tiny { font-size:.8rem; }

.price-sm { font-weight:600; margin-top:.4rem; }

.lead { font-size: 1.05rem; line-height: 1.8; }
.text-center { text-align: center; }