/* ==========================================================================
   Ciptasa (Cipta Asa Digital)

   Arah desain mengikuti onvaya.id: hero rata tengah, judul besar dengan baris
   kedua bergradien, tombol pill, mockup browser sebagai bukti, kartu berbayang,
   pola grid di latar, dan mode gelap.

   Yang tidak ikut: palet indigo dan cyan milik mereka. Aksen tetap merah bata
   Ciptasa supaya logonya nyambung, dengan gradien hangat ke arah kuning tembaga.
   Basisnya digeser dari krem ke putih supaya bayangan dan gradien punya ruang.
   ========================================================================== */

@import url("font/fonts.css");

:root {
  --bg:        #FFFFFF;
  --bg-alt:    #F8FAFC;
  --surface:   #FFFFFF;
  --ink:       #0F172A;
  --ink-2:     #475569;
  --ink-3:     #64748B;
  --line:      #E2E8F0;
  --line-2:    #CBD5E1;

  --brand:      #C4441C;
  --brand-deep: #9A3414;
  --brand-2:    #E0912F;
  --brand-soft: #FDF1EB;
  --grad:       linear-gradient(135deg, #C4441C 0%, #E0912F 100%);
  --grad-soft:  linear-gradient(135deg, rgba(196,68,28,.10), rgba(224,145,47,.10));

  --ok: #16A34A;

  /* Panel CTA selalu gelap, di tema mana pun. Kalau memakai --ink, di mode gelap
     nilainya ikut terbalik jadi terang dan teks putihnya hilang. */
  --cta-bg: #0F172A;

  --r-pill: 999px;
  --r-xl:   24px;
  --r-lg:   16px;
  --r:      12px;
  --r-sm:   8px;

  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.10);
  --shadow-md: 0 4px 6px -1px rgba(15,23,42,.07), 0 10px 20px -5px rgba(15,23,42,.10);
  --shadow-lg: 0 10px 15px -3px rgba(15,23,42,.08), 0 25px 50px -12px rgba(15,23,42,.16);
  --shadow-brand: 0 10px 30px -10px rgba(196,68,28,.45);

  --wrap: 1200px;

  --sans:    'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: 'Outfit', var(--sans);
  --mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --bg:      #0F172A;
  --bg-alt:  #020617;
  --surface: #1E293B;
  --ink:     #F1F5F9;
  --ink-2:   #CBD5E1;
  --ink-3:   #94A3B8;
  --line:    #1E293B;
  --line-2:  #334155;

  --brand:      #F0713F;
  --brand-deep: #C4441C;
  --brand-2:    #F0B45C;
  --brand-soft: #2A1810;
  --grad:       linear-gradient(135deg, #F0713F 0%, #F0B45C 100%);
  --grad-soft:  linear-gradient(135deg, rgba(240,113,63,.14), rgba(240,180,92,.14));

  /* Lebih gelap dari latar halaman supaya panelnya tetap terbaca sebagai panel */
  --cta-bg: #020617;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.4), 0 10px 20px -5px rgba(0,0,0,.45);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.45), 0 25px 50px -12px rgba(0,0,0,.6);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
p { margin: 0; }

::selection { background: var(--brand); color: #fff; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.skip-link {
  position: absolute; top: -60px; left: 16px; z-index: 200;
  background: var(--ink); color: var(--bg); text-decoration: none;
  padding: 10px 18px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600;
}
.skip-link:focus-visible { top: 12px; }

/* ---------- Layout ---------- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 380px) { .wrap { padding-inline: 16px; } }

section { padding-block: clamp(64px, 8vw, 96px); }

.band-alt { background: var(--bg-alt); }

.section-head { max-width: 680px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.section-head.is-left { margin-inline: 0; text-align: left; }

.eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}

.section-head h2 { font-size: clamp(30px, 4vw, 48px); }

.section-head .lede {
  margin-top: 18px;
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.62;
}

/* Teks bergradien, dipakai hemat: satu di hero, satu di CTA penutup */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- Tombol ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 16px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--ink); color: var(--bg); box-shadow: var(--shadow-md); }
.btn-primary:hover { box-shadow: var(--shadow-lg); }

.btn-brand { background: var(--grad); color: #fff; box-shadow: var(--shadow-brand); }
.btn-brand:hover { box-shadow: 0 16px 40px -12px rgba(196,68,28,.6); }

.btn-outline {
  background: var(--surface); color: var(--ink);
  border-color: var(--line-2); box-shadow: var(--shadow-sm);
}
.btn-outline:hover { border-color: var(--ink); box-shadow: var(--shadow-md); }

.btn-sm { padding: 11px 22px; font-size: 14px; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); }

.nav { display: flex; align-items: center; gap: 16px; height: 76px; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand-mark { width: 40px; height: 40px; border-radius: var(--r); flex: none; box-shadow: var(--shadow-sm); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.brand-sub { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }

.nav-links { display: flex; gap: 4px; flex: none; }
.nav-links a {
  text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-2);
  padding: 9px 14px; border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.nav-links a:hover { color: var(--ink); background: var(--bg-alt); }

.icon-btn {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.icon-btn:hover { color: var(--brand); border-color: var(--line-2); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn-teks { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .04em; }

/* Isi disembunyikan sebentar saat teks sedang ditukar ke bahasa Inggris,
   supaya tidak terlihat berkedip dari Indonesia ke Inggris. */
.menerjemahkan body { visibility: hidden; }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }
.icon-sun { display: none; }

.nav-toggle { display: none; }

@media (max-width: 1020px) {
  .nav-links { display: none; }
  .nav-toggle { display: grid; }
  .nav .btn-sm { display: none; }
}

/* Panel navigasi di layar kecil. Dibuka tombol hamburger, bukan disembunyikan
   begitu saja seperti sebelumnya. */
.nav-panel {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 16px 0 24px;
}
.nav-panel.is-open { display: block; }
.nav-panel nav { display: grid; gap: 2px; }
.nav-panel nav a {
  text-decoration: none; font-size: 17px; font-weight: 500; color: var(--ink-2);
  padding: 13px 14px; border-radius: var(--r-sm);
}
.nav-panel nav a:hover { background: var(--bg-alt); color: var(--ink); }
.nav-panel .btn { margin-top: 14px; }
@media (min-width: 1021px) { .nav-panel { display: none !important; } }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 104px) clamp(64px, 8vw, 96px);
  overflow: hidden;
  text-align: center;
}

/* Pola grid tipis, meniru latar hero onvaya.id */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 62% at 50% 32%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 62% at 50% 32%, #000 25%, transparent 78%);
}
/* Cahaya lembut di belakang judul */
.hero::after {
  content: ""; position: absolute; z-index: 0;
  left: 50%; top: -10%; translate: -50% 0;
  width: min(900px, 110%); aspect-ratio: 1.6;
  background: radial-gradient(ellipse at center, rgba(196,68,28,.13), transparent 62%);
  pointer-events: none;
}
[data-theme="dark"] .hero::after { background: radial-gradient(ellipse at center, rgba(240,113,63,.16), transparent 62%); }

.hero .wrap { position: relative; z-index: 1; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  padding: 8px 18px 8px 14px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  box-shadow: var(--shadow-sm);
  margin-bottom: 28px;
}
.dot-live {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}
.hero-badge .sep { width: 1px; height: 15px; background: var(--line-2); }
.hero-badge b { color: var(--brand); font-weight: 700; }
/* Di layar sempit badge-nya jadi dua baris dan terlihat berantakan.
   Bagian keduanya dibuang saja, informasinya sudah ada di bawah tombol. */
@media (max-width: 520px) {
  .hero-badge .sep, .hero-badge b { display: none; }
  .hero-badge { font-size: 13px; }
}

.hero h1 {
  font-size: clamp(38px, 6.4vw, 78px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 22ch;
  margin-inline: auto;
}
.hero h1 .line-2 { display: block; }

.hero-lede {
  margin: 26px auto 0; max-width: 60ch;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ink-2); line-height: 1.62;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 38px; }
.hero-note { margin-top: 20px; font-size: 14px; color: var(--ink-3); }

/* Mockup browser berisi karya nyata. Ini bukti visual pertama di halaman. */
.mockup {
  position: relative; z-index: 1;
  margin: clamp(48px, 6vw, 76px) auto 0;
  max-width: 1040px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mockup-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.mockup-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.mockup-url {
  margin-inline: auto;
  font-size: 12px; color: var(--ink-3);
  background: var(--surface); border: 1px solid var(--line);
  padding: 4px 18px; border-radius: var(--r-pill);
}
.mockup img { width: 100%; height: auto; }

/* ---------- Strip teknologi ---------- */

.strip { border-block: 1px solid var(--line); padding-block: 30px; background: var(--bg); }
.strip-label {
  text-align: center; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 18px;
}
.strip ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px;
}
.strip li {
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 8px 18px; background: var(--surface);
}

/* ---------- Kartu layanan ---------- */

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1040px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .card-grid { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(26px, 3vw, 38px);
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }

.card-icon {
  width: 52px; height: 52px; border-radius: var(--r-lg);
  display: grid; place-items: center;
  background: var(--grad); color: #fff;
  box-shadow: var(--shadow-brand);
  margin-bottom: 22px;
}
.card-icon svg { width: 24px; height: 24px; }

.card-num {
  position: absolute; top: 26px; right: 30px;
  font-family: var(--display); font-size: 42px; font-weight: 700;
  color: var(--line); line-height: 1;
}
.card h3 { font-size: clamp(20px, 2vw, 24px); margin-bottom: 12px; }
.card-desc { color: var(--ink-2); font-size: 16px; line-height: 1.62; }

.checklist { list-style: none; margin: 22px 0 0; padding: 22px 0 0; display: grid; gap: 12px; border-top: 1px solid var(--line); }
.checklist li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  font-size: 15px; color: var(--ink-2); line-height: 1.5;
}
.checklist li::before {
  content: ""; width: 20px; height: 20px; border-radius: 50%; margin-top: 2px;
  background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4441C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---------- Kecocokan ---------- */

.fit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .fit { grid-template-columns: 1fr; } }

.fit li {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px 28px;
  box-shadow: var(--shadow-sm);
}
.fit h3 { font-size: 20px; margin-bottom: 12px; }
.fit p { color: var(--ink-2); font-size: 15px; line-height: 1.62; }

/* ---------- Karya ---------- */

.work-featured { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 780px) { .work-featured { grid-template-columns: 1fr; } }

.work {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
}
.work:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.work-shot { aspect-ratio: 16 / 10; background: var(--bg-alt); border-bottom: 1px solid var(--line); overflow: hidden; }
.work-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.work:hover .work-shot img { transform: scale(1.03); }

.work-body { padding: 26px 28px 30px; }
.work-kicker {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brand-deep);
  background: var(--brand-soft); border-radius: var(--r-pill); padding: 5px 12px;
  margin-bottom: 14px;
}
[data-theme="dark"] .work-kicker { color: var(--brand-2); }
.work h3 { font-size: 24px; margin-bottom: 10px; }
.work h3 a { text-decoration: none; }
.work h3 a:hover { color: var(--brand); }
.work h3 a span { font-size: .75em; }
.work p { font-size: 15px; color: var(--ink-2); line-height: 1.6; }

.work-more { margin-top: clamp(32px, 4vw, 48px); }
.work-more ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.work-more li {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 24px; background: var(--surface);
}
.work-more h3 { font-size: 18px; margin: 12px 0 8px; }
.work-more p { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 900px) { .work-more ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .work-more ul { grid-template-columns: 1fr; } }

/* ---------- Proses ---------- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }

.steps li {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px 26px 28px;
  box-shadow: var(--shadow-sm);
}
.step-n {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--r-pill);
  background: var(--grad); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 17px;
  box-shadow: var(--shadow-brand);
  margin-bottom: 20px;
}
.steps h3 { font-size: 19px; margin-bottom: 10px; }
.steps p { font-size: 15px; color: var(--ink-2); line-height: 1.6; }

/* ---------- Panel janji ---------- */

.promises {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 56px; max-width: 960px; margin-inline: auto;
}
@media (max-width: 760px) { .promises { grid-template-columns: 1fr; gap: 28px; } }
.promises h3 { font-size: 19px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; }
.promises h3 svg { width: 22px; height: 22px; color: var(--brand); flex: none; }
.promises p { color: var(--ink-2); font-size: 15px; line-height: 1.6; padding-left: 34px; }

/* ---------- Tanya jawab ---------- */

.faq { max-width: 820px; margin-inline: auto; display: grid; gap: 14px; }
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: border-color .2s ease;
}
.faq details[open] { border-color: var(--line-2); }
.faq summary {
  cursor: pointer; list-style: none; padding: 22px 60px 22px 26px;
  font-family: var(--display); font-size: 17px; font-weight: 600;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; margin-top: -15px;
  width: 30px; height: 30px; border-radius: var(--r-pill);
  background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4441C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p { padding: 0 26px 24px; color: var(--ink-2); font-size: 15px; line-height: 1.68; }

/* ---------- Ajakan penutup ---------- */

.cta-box {
  position: relative; overflow: hidden;
  background: var(--cta-bg); color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(44px, 6vw, 80px); text-align: center;
  box-shadow: var(--shadow-lg);
}
.cta-box::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 130%;
  background: radial-gradient(ellipse at 30% 0%, rgba(196,68,28,.42), transparent 58%);
  pointer-events: none;
}
.cta-box::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000, transparent 72%);
  pointer-events: none;
}
.cta-box > * { position: relative; z-index: 1; }
.cta-box h2 { font-size: clamp(30px, 4.4vw, 52px); max-width: 18ch; margin-inline: auto; }
.cta-box p { margin: 20px auto 0; max-width: 54ch; color: rgba(255,255,255,.76); font-size: 17px; line-height: 1.62; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px; }
.cta-note { margin-top: 26px; font-size: 14px; color: rgba(255,255,255,.6); }
.cta-box .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); box-shadow: none; }
.cta-box .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* ---------- Footer ---------- */

.site-footer { background: var(--bg-alt); border-top: 1px solid var(--line); padding-block: 64px 32px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1.3fr; gap: 44px 32px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-about { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-about p { margin-top: 18px; font-size: 15px; color: var(--ink-2); line-height: 1.62; max-width: 42ch; }
.footer-col h2 { font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-bottom: 18px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer-col a { font-size: 15px; color: var(--ink-2); text-decoration: none; transition: color .15s ease; }
.footer-col a:hover { color: var(--brand); }
.footer-contact li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.footer-contact svg { width: 18px; height: 18px; color: var(--brand); margin-top: 3px; }
.footer-bottom { padding-top: 26px; font-size: 14px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* ---------- Tombol WhatsApp mengambang ---------- */

.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 58px; height: 58px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 10px 30px -8px rgba(37,211,102,.6);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover { transform: scale(1.06); box-shadow: 0 14px 36px -8px rgba(37,211,102,.75); }
.wa-float svg { width: 30px; height: 30px; }
@media (max-width: 520px) { .wa-float { right: 16px; bottom: 16px; width: 54px; height: 54px; } }

/* ---------- Modal konsultasi ---------- */

.modal {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.modal[hidden] { display: none; }
.modal-card {
  position: relative;
  width: 100%; max-width: 440px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 34px 30px 30px;
  box-shadow: var(--shadow-lg);
}
.modal-card h2 { font-size: 24px; margin-bottom: 10px; }
.modal-card > p { font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.modal-rows { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.modal-rows li { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--ink-2); border-bottom: 1px dashed var(--line); padding-bottom: 12px; }
.modal-rows b { color: var(--ink); font-weight: 600; }
.modal-actions { display: grid; gap: 10px; margin-top: 26px; }
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--bg-alt); color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.modal-close:hover { color: var(--brand); border-color: var(--line-2); }
.modal-close svg { width: 16px; height: 16px; }

/* ---------- Preferensi gerak ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .btn:hover, .card:hover, .work:hover, .wa-float:hover { transform: none; }
  .work:hover .work-shot img { transform: none; }
}

/* ---------- Cetak ---------- */

@media print {
  .site-header, .skip-link, .wa-float, .modal, .hero-cta, .cta-actions, .nav-panel { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  section { padding-block: 18pt; }
  .card, .work, .fit li, .steps li, .faq details, .work-more li { break-inside: avoid; box-shadow: none; }
  .hero::before, .hero::after, .cta-box::before, .cta-box::after { display: none; }
  .cta-box { background: #fff !important; color: #000 !important; border: 1px solid #ccc; box-shadow: none; }
  .cta-box p, .cta-note { color: #333 !important; }
  .grad-text { color: #C4441C !important; -webkit-text-fill-color: #C4441C; }
}