/* ==========================================================================
   formora — sistem desain
   ==========================================================================
   Ditulis tangan, tanpa framework. Satu berkas kecil yang dimuat sekali jauh
   lebih cepat di koneksi mobile daripada bundel framework, dan nol dependensi
   npm berarti nol permukaan serangan rantai pasok.

   PALET — warnanya menceritakan produknya, bukan sekadar dekorasi:
     amber  = teks yang ter-highlight Turnitin (masalah yang dibawa pelanggan)
     teal   = yang sudah digarap dan beres (hasil yang mereka bayar)
   Dipakai konsisten: di ilustrasi beranda, badge status, sampai tombol aksi.
   Sengaja menghindari gradasi ungu-di-atas-putih yang jadi ciri khas
   halaman buatan-cepat — pelanggan menitipkan skripsi bertahun-tahun ke sini,
   tampilannya harus terasa dikerjakan, bukan ditempel dari template.
   ========================================================================== */

:root {
  /* Netral — bernada biru-tinta, bukan abu-abu netral, supaya teks terasa
     lebih pekat dan permukaan terasa lebih bersih. */
  --bg:            #ffffff;
  --bg-tint:       #f7f8fa;
  --surface:       #ffffff;
  --surface-2:     #f2f4f7;
  --border:        #e4e7ec;
  --border-strong: #cfd4dd;

  --text:        #0d1420;
  --text-muted:  #58616f;
  /* Dipakai untuk label kecil (Layanan, Segera menyusul, catatan kaki). Nada
     abunya dipilih supaya tepat lolos ambang kontras WCAG AA 4,5:1 di atas
     latar putih -- nada sebelumnya (#858e9c) hanya 3,3:1, yang membuat label
     berukuran 12px sulit dibaca di layar HP yang terkena cahaya matahari. */
  --text-faint:  #666e7c;

  /* Merek — teal tua. Tenang, kompeten, dan jelas bukan biru korporat. */
  --brand:        #0d5f56;
  --brand-hover:  #0a4a43;
  --brand-soft:   #e3f2ef;
  --brand-border: #b6ddd6;

  /* Highlight — amber. Warna "yang ditandai Turnitin". */
  --flag:        #b45309;
  --flag-soft:   #fef4e2;
  --flag-border: #f5d9a8;

  --danger:      #c0392f;
  --danger-soft: #fdf0ee;
  --success:     #0d5f56;
  --success-soft:#e3f2ef;

  --radius:    14px;
  --radius-sm: 9px;
  --radius-xs: 6px;

  --shadow-sm: 0 1px 2px rgba(13, 20, 32, 0.05);
  --shadow:    0 1px 3px rgba(13, 20, 32, 0.06), 0 8px 24px -12px rgba(13, 20, 32, 0.14);
  --shadow-lg: 0 2px 8px rgba(13, 20, 32, 0.06), 0 24px 48px -20px rgba(13, 20, 32, 0.22);

  --max-width: 1120px;

  /* Tumpukan font sistem yang memilih muka huruf terbaik yang tersedia di tiap
     platform sebelum jatuh ke sans-serif generik. Karakter tipografinya
     dibangun dari skala, tracking, dan kontras berat -- bukan dari muka huruf
     khusus, supaya tidak perlu mengunduh font dan CSP tetap bisa dikunci. */
  --font: "Segoe UI Variable Display", "Segoe UI", -apple-system,
          BlinkMacSystemFont, "Inter", system-ui, Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, "Cascadia Code", SFMono-Regular, "SF Mono", Menlo,
          Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #0a0f16;
    --bg-tint:       #0e141d;
    --surface:       #131a24;
    --surface-2:     #1a222e;
    --border:        #242d3a;
    --border-strong: #35404f;

    --text:       #eef1f5;
    --text-muted: #9aa5b4;
    /* Alasan sama seperti mode terang: #6b7686 hanya 4,17:1 di atas latar
       gelap. Dicerahkan sampai lolos 4,5:1, tapi tetap jelas lebih redup
       daripada --text-muted supaya jenjang tiga tingkatnya tidak hilang. */
    --text-faint: #7a8496;

    --brand:        #3fb8a6;
    --brand-hover:  #5ccfbd;
    --brand-soft:   #0e2b28;
    --brand-border: #1c4a44;

    --flag:        #e0a336;
    --flag-soft:   #2a2113;
    --flag-border: #4a3a1c;

    --danger:      #ef7a6d;
    --danger-soft: #2b1613;
    --success:     #3fb8a6;
    --success-soft:#0e2b28;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow:    0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.5), 0 24px 48px -20px rgba(0, 0, 0, 0.7);
  }
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: var(--brand); text-decoration: none; }
/* Garis bawah hanya untuk perangkat yang benar-benar punya kursor.

   Di layar sentuh tidak ada "menjauhkan kursor", jadi keadaan :hover nyangkut
   setelah sebuah tautan disentuh dan garis bawahnya tertinggal di layar sampai
   pengguna menyentuh tempat lain -- terlihat seperti cacat tampilan, bukan
   petunjuk. @media (hover: hover) menyaring perangkat sentuh, sementara di
   desktop garis bawahnya tetap ada sebagai penanda bahwa itu tautan. */
@media (hover: hover) {
  a:hover { text-decoration: underline; text-underline-offset: 3px; }
}

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

/* --- Tata letak --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 24px;
}
.container-narrow { max-width: 480px; }
.container-mid    { max-width: 760px; }

main { flex: 1; padding-block: 48px 88px; }

/* --- Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  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 var(--border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.03em;
  color: var(--text);
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  font-size: 0.85rem; font-weight: 700;
  letter-spacing: -0.04em;
  flex-shrink: 0;
}
/* Di mode gelap --brand justru dicerahkan agar terbaca sebagai teks di atas
   latar gelap, jadi huruf putih di atasnya tinggal 2,4:1. Hurufnya dibalik
   jadi gelap, perlakuan yang sama seperti .btn-primary. */
@media (prefers-color-scheme: dark) { .brand-mark { color: #06211e; } }

.nav { display: flex; align-items: center; gap: 4px; }
/* :not(.btn) penting: selektor kelas+elemen ini lebih spesifik daripada
   .btn-primary, jadi tanpa pengecualian ini tombol ajakan di header akan
   tertimpa jadi tautan biasa. */
.nav a:not(.btn), .nav button:not(.btn) {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.nav a:not(.btn):hover, .nav button:not(.btn):hover {
  color: var(--text);
  background: var(--surface-2);
  text-decoration: none;
}
.nav form { display: inline; }

/* --- Tipografi --- */
h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.15rem);
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 1.08;
}
h2 { font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.65rem); font-weight: 660; letter-spacing: -0.025em; line-height: 1.25; }
h3 { font-size: 1.02rem; font-weight: 640; letter-spacing: -0.012em; }
h4 { font-size: 0.9rem; font-weight: 620; }

.lead {
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem);
  color: var(--text-muted);
  line-height: 1.62;
}
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); font-size: 0.85rem; }
.mono  { font-family: var(--mono); font-size: 0.88em; letter-spacing: -0.01em; }

.page-head { margin-bottom: 34px; }
.page-head p { color: var(--text-muted); margin-top: 8px; }

/* Tautan kembali di atas halaman. Diberi padding, bukan sekadar teks kecil:
   ini kontrol berdiri sendiri (bukan tautan di tengah kalimat), jadi di HP ia
   butuh area sentuh yang layak -- tanpa padding tingginya hanya setinggi
   hurufnya sendiri, sekitar 21px. */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 10px 0;
  margin-bottom: 4px;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.back-link:hover { color: var(--text); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  padding: 5px 12px;
  border-radius: 999px;
}

.section-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  font-weight: 640;
  margin-bottom: 12px;
}

/* --- Kartu --- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 20px; }
.card-title { margin-bottom: 5px; }
.card-sub { color: var(--text-muted); font-size: 0.925rem; margin-bottom: 22px; line-height: 1.6; }

/* --- Hero --- */
.hero {
  position: relative;
  padding-block: 56px 44px;
  text-align: center;
}
/* Cahaya lembut di belakang hero — memberi kedalaman tanpa gambar, tanpa
   permintaan jaringan tambahan.

   Sebelumnya kotaknya dilebarkan -20% ke kiri dan kanan supaya gradasinya
   tidak terlihat berhenti mendadak. Tapi kotak absolut yang melewati tepi
   halaman ikut dihitung sebagai area yang bisa digeser -- halaman jadi punya
   luberan mendatar 118px yang isinya cuma ruang kosong. Kotaknya sekarang
   dipatok di tepi hero, dan ukuran elipsnya diperbesar dengan faktor yang
   sama (60->84%, 40->56%) supaya cahayanya tetap seluas dan selembut semula. */
.hero::before {
  content: "";
  position: absolute;
  inset: -80px 0 auto 0;
  height: 420px;
  background:
    radial-gradient(ellipse 84% 100% at 50% 0%, var(--brand-soft), transparent 70%),
    radial-gradient(ellipse 56% 80% at 92% 10%, var(--flag-soft), transparent 70%);
  opacity: 0.75;
  pointer-events: none;
  z-index: -1;
}
.hero h1 { max-width: 19ch; margin-inline: auto; }
.hero .lead { max-width: 54ch; margin: 20px auto 30px; }
.hero .eyebrow { margin-bottom: 22px; }

/* --- Ilustrasi dokumen (hero) ---------------------------------------------
   Peragaan produk dalam satu pandang: baris ter-highlight Turnitin (amber)
   berubah jadi baris yang sudah digarap (teal). Digambar murni dengan CSS —
   tidak ada gambar yang diunduh, jadi tidak menambah waktu muat sama sekali. */
.doc-demo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  max-width: 720px;
  margin: 8px auto 0;
}
.doc-sheet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 16px 20px;
  text-align: left;
}
.doc-sheet-label {
  font-size: 0.76rem;
  font-weight: 640;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.doc-sheet-label::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
.doc-sheet.is-before .doc-sheet-label { color: var(--flag); }
.doc-sheet.is-after  .doc-sheet-label { color: var(--brand); }

.doc-line {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-2);
  margin-bottom: 9px;
}
.doc-line:last-child { margin-bottom: 0; }
.doc-line.w-90 { width: 90%; }
.doc-line.w-75 { width: 75%; }
.doc-line.w-60 { width: 60%; }
.doc-line.is-flagged { background: var(--flag-soft); box-shadow: inset 0 0 0 1px var(--flag-border); }
.doc-line.is-fixed   { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-border); }

.doc-arrow {
  color: var(--text-faint);
  font-size: 1.15rem;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* --- Katalog layanan ---
   formora menampung beberapa layanan; kartu-kartu ini yang membedakan mana
   yang sudah bisa dipesan dan mana yang belum. Yang belum sengaja TIDAK dibuat
   sebagai tautan -- kartu yang bisa diklik tapi tidak ke mana-mana lebih
   mengecewakan daripada kartu yang jelas-jelas menandai dirinya belum siap. */
/* --- Layanan yang siap dipakai: satu kartu lebar dan menonjol ---
   Diukur pada versi sebelumnya: enam kartu berukuran sama (345x279), padahal
   hanya satu yang bisa dipesan. Sekitar 85% ruang katalog terpakai untuk hal
   yang tidak bisa dibeli, dan katalognya sendiri memakan 898px di layar HP.
   Hierarki yang rata membuat pengunjung harus memindai enam pilihan untuk
   menemukan satu-satunya yang berfungsi. */
.service-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.service-hero:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  /* Wajib ada. Seluruh kartu ini satu <a>, dan garis bawah pada <a> ditarik
     menembus semua isinya -- nama layanan, tagline, deskripsi, sampai tulisan
     di tombol -- serta tidak bisa dibatalkan dari elemen anaknya. Tanpa baris
     ini kartunya bergaris bawah semua begitu disentuh. */
  text-decoration: none;
}
.service-hero-icon {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand);
}
.service-hero-body { flex: 1; min-width: 0; display: block; }
.service-hero-name {
  display: block;
  font-size: 1.15rem;
  font-weight: 660;
  letter-spacing: -0.02em;
  color: var(--text);
}
.service-hero-desc {
  display: block;
  margin-top: 7px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.service-hero-cta { flex: none; white-space: nowrap; }

@media (max-width: 640px) {
  /* Di layar sempit tombol dipindah ke bawah dan dilebarkan penuh -- tombol
     sesempit isinya di samping teks panjang jadi terlalu kecil untuk jari. */
  .service-hero { flex-wrap: wrap; gap: 14px; padding: 20px; }
  .service-hero-body { flex-basis: 100%; order: 2; }
  .service-hero-cta { order: 3; width: 100%; justify-content: center; }
}

/* --- Yang belum tersedia: daftar ringkas, bukan kartu penuh ---
   Tetap ditampilkan supaya pengunjung tahu layanan lain akan menyusul, tapi
   tanpa menyaingi satu-satunya layanan yang benar-benar bisa dipesan. */
.soon-head {
  margin: 26px 0 12px;
  font-size: 0.78rem;
  font-weight: 620;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.soon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 10px;
}
.soon-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.soon-icon { flex: none; display: grid; place-items: center; color: var(--text-faint); }
.soon-name { display: block; font-size: 0.9rem; font-weight: 560; color: var(--text-muted); }
.soon-tagline { display: block; font-size: 0.78rem; color: var(--text-faint); margin-top: 1px; }

.step-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  color: var(--brand);
  margin-bottom: 13px;
}

/* Ikon sebaris teks: ikut turun sedikit supaya duduk di garis pandang huruf,
   bukan menggantung di garis atas. */
.icon { display: inline-block; vertical-align: -0.18em; flex-shrink: 0; }
.btn .icon { vertical-align: -0.2em; }
.service-tagline {
  display: block;
  font-size: 0.815rem;
  font-weight: 560;
  color: var(--brand);
  margin-top: 3px;
}

/* --- Langkah --- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 18px;
}
.step {
  padding: 24px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.step:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow); }
.step-num {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  color: var(--brand);
  font-size: 0.8rem; font-weight: 700;
  margin-bottom: 14px;
}
.step h3 { margin-bottom: 6px; }
.step p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; }

/* --- Tombol --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 0.94rem;
  font-weight: 570;
  letter-spacing: -0.008em;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-hover); box-shadow: var(--shadow); }
@media (prefers-color-scheme: dark) { .btn-primary { color: #06211e; } }

.btn-secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--text-faint); }

.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

.btn-danger { background: var(--danger); color: #fff; }

.btn-block { width: 100%; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-sm { padding: 8px 14px; font-size: 0.86rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-row { display: flex; gap: 11px; flex-wrap: wrap; }

/* Tombol masuk lewat penyedia luar (Google) — netral, bukan warna merek kita,
   supaya terbaca sebagai "identitas dari sana" bukan aksi utama kita. */
.btn-provider {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-weight: 540;
}
.btn-provider:hover { background: var(--surface-2); }
.btn-provider svg { width: 18px; height: 18px; flex-shrink: 0; }

.divider-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block: 22px;
  color: var(--text-faint);
  font-size: 0.8rem;
}
.divider-or::before, .divider-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* --- Form --- */
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 560;
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.field .hint { font-size: 0.8rem; color: var(--text-faint); margin-top: 7px; line-height: 1.5; }

input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], select, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}
textarea { resize: vertical; min-height: 96px; line-height: 1.6; }

/* Kolom kata sandi dengan tombol lihat/sembunyikan. Ini yang menggantikan
   kolom "ulangi kata sandi": mengetik ulang tidak membuktikan apa pun kalau
   kedua ketikan sama-sama salah, sedangkan melihat langsung apa yang diketik
   benar-benar menangkap salah ketik. */
.input-reveal { position: relative; display: flex; }
.input-reveal input { padding-right: 74px; }
.reveal-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  /* Padding tegaknya dinaikkan supaya tombolnya setinggi 40px, bukan 33px --
     ini tombol yang ditekan pakai ibu jari saat mengetik sandi di HP. Lebar
     kotaknya tidak berubah, jadi padding-right input di atas tetap pas. */
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--radius-xs);
  font-size: 0.82rem;
  font-weight: 560;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.reveal-btn:hover { background: var(--surface-2); color: var(--text); }
.reveal-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Tautan bantuan yang duduk di baris label, misalnya "Lupa kata sandi?".
   Sebagai teks biasa tinggi sentuhnya cuma 19px; min-height menaikkannya ke
   44px, dan margin negatif menarik balik tambahan tingginya supaya baris
   labelnya tidak ikut melar dan jarak ke kolom isian tetap seperti semula. */
.label-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -13px;
  padding-left: 16px;
  font-weight: 400;
  font-size: 0.82rem;
}

/* --- Pilihan berbentuk kartu --- */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 11px;
}
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label {
  display: block;
  margin: 0;
  padding: 16px 12px;
  text-align: center;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  background: var(--surface);
}
.choice label:hover { border-color: var(--brand); background: var(--brand-soft); }
.choice input:checked + label {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}
/* Input aslinya disembunyikan, jadi penanda fokus keyboard dipindah ke label. */
.choice input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; }
.choice .choice-main { display: block; font-size: 1.08rem; font-weight: 660; letter-spacing: -0.02em; }
.choice .choice-sub  { display: block; font-size: 0.78rem; color: var(--text-faint); margin-top: 3px; }
.choice input:checked + label .choice-sub { color: var(--brand); opacity: 0.85; }

/* --- Area unggah berkas --- */
.filedrop {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 26px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.16s;
  background: var(--bg-tint);
}
.filedrop:hover, .filedrop.is-dragover {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.filedrop.has-file {
  border-style: solid;
  border-color: var(--brand);
  background: var(--brand-soft);
}
.filedrop input[type="file"] { display: none; }
.filedrop-icon { margin-bottom: 9px; }
.filedrop-label { font-weight: 560; font-size: 0.95rem; }
.filedrop-name { font-size: 0.84rem; color: var(--text-muted); margin-top: 5px; word-break: break-all; }
.filedrop.has-file .filedrop-name { color: var(--brand); font-weight: 540; }

/* --- Baris unggah ringkas (formulir pesanan) ---
   Versi satu baris dari .filedrop di atas. Kotak jatuh-berkas setinggi 140px
   masuk akal di panel admin, yang cuma punya satu unggahan per halaman; di
   formulir pesanan ada dua, dan keduanya mendorong harga -- hal yang paling
   ingin dilihat pelanggan -- turun sampai ke luar layar. Baris ini tetap
   menerima drag-and-drop lewat JS yang sama, hanya memakai sepertiga ruang. */
.filerow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-tint);
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s;
}
.filerow + .filerow { margin-top: 10px; }
.filerow:hover, .filerow.is-dragover, .filerow.has-file {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.filerow input[type="file"] { display: none; }
.filerow-icon { flex: none; display: grid; place-items: center; color: var(--text-faint); }
.filerow:hover .filerow-icon,
.filerow.is-dragover .filerow-icon,
.filerow.has-file .filerow-icon { color: var(--brand); }
/* min-width:0 wajib: tanpa itu anak flex menolak menyusut dan nama berkas
   yang panjang melebarkan barisnya alih-alih dipotong elipsis. */
.filerow-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.filerow-label { font-weight: 560; font-size: 0.925rem; line-height: 1.3; }
.filerow-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 0.06em;
}
.filerow-tag.is-optional { background: var(--surface-2); color: var(--text-faint); }
.filerow-name {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filerow.has-file .filerow-name { color: var(--brand); font-weight: 540; }
.filerow-btn {
  flex: none;
  font-size: 0.85rem;
  font-weight: 580;
  padding: 8px 15px;
  border-radius: var(--radius-xs);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.filerow:hover .filerow-btn { border-color: var(--brand); color: var(--brand); }

/* --- Kartu & blok pilihan yang dipadatkan --- */
.card-tight { padding: 18px; }
.card-tight + .card-tight { margin-top: 14px; }
.opt { margin-bottom: 18px; }
.opt-label {
  font-size: 0.78rem;
  font-weight: 620;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 9px;
}

/* --- Keterangan ringkas: ikon "i" dengan gelembung penjelasan ---
   Menggantikan baris keterangan yang selalu tampil. Keterangannya penting tapi
   tidak dibaca berulang kali, jadi memakan ruang tetap di formulir yang sedang
   dijaga tetap sepadat mungkin bukan pertukaran yang baik.

   Tanpa JavaScript, dan sengaja memakai tiga pemicu karena satu saja tidak
   pernah cukup: :hover untuk kursor, :focus untuk ketukan layar sentuh dan
   navigasi keyboard. Peramban iOS juga memunculkan keadaan :hover pada ketukan
   pertama untuk elemen yang memilikinya, jadi jalur sentuh tertutup dua kali. */
.tip-wrap { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; }
.info-tip {
  width: 17px;
  height: 17px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: help;
}
.info-tip:hover, .info-tip:focus { border-color: var(--brand); color: var(--brand); outline: none; }
.info-tip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.info-bubble {
  position: absolute;
  top: calc(100% + 8px);
  left: -8px;
  z-index: 40;
  width: max-content;
  max-width: min(290px, 74vw);
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  /* Gelembung ini bersarang di dalam .opt-label yang huruf besar semua dan
     berjarak lebar; keduanya harus dinetralkan atau teksnya jadi tidak terbaca. */
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.13s;
}
/* Tiga pemicu, bukan satu. :focus-within ditambahkan karena lebih tahan
   banting daripada :focus pada tombolnya saja -- ia tetap bekerja bila fokus
   berpindah ke dalam gelembung, dan tidak bergantung pada elemen mana persis
   yang menerima fokus saat layar disentuh. */
.tip-wrap:hover .info-bubble,
.tip-wrap:focus-within .info-bubble,
.info-tip:focus + .info-bubble { opacity: 1; visibility: visible; }

/* --- Bagian yang bisa dilipat --- */
.foldable {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.foldable > summary {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 550;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.foldable > summary::-webkit-details-marker { display: none; }
.foldable > summary::after { content: "+"; color: var(--text-faint); font-size: 1.05rem; }
.foldable[open] > summary::after { content: "\2212"; }
.foldable > textarea { display: block; width: calc(100% - 32px); margin: 0 16px 16px; }

/* --- Palang harga ---
   Menempel di bawah layar supaya angkanya tidak pernah keluar dari pandangan
   saat pelanggan menggulir dan mengganti pilihan. Inilah yang sebelumnya
   hilang: harga baru muncul di halaman terpisah SETELAH formulir dikirim. */
.paybar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding: 13px 18px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.paybar-info { min-width: 0; }
.paybar-label { font-size: 0.78rem; color: var(--text-muted); line-height: 1.35; }
.paybar-value {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-top: 1px;
}
.paybar .btn { flex: none; }
.paybar.is-loading .paybar-value { opacity: 0.45; }

@media (max-width: 480px) {
  .paybar { padding: 11px 13px; gap: 10px; }
  .paybar-value { font-size: 1.15rem; }
  .paybar .btn { padding-inline: 15px; font-size: 0.9rem; }
}

/* --- Badge status --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.775rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
  letter-spacing: -0.005em;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-amber   { background: var(--flag-soft);    color: var(--flag);       border-color: var(--flag-border); }
.badge-sky     { background: var(--surface-2);    color: var(--text-muted); border-color: var(--border); }
.badge-violet  { background: var(--brand-soft);   color: var(--brand);      border-color: var(--brand-border); }
.badge-emerald { background: var(--success-soft); color: var(--success);    border-color: var(--brand-border); }
.badge-rose    { background: var(--danger-soft);  color: var(--danger); }
.badge-slate   { background: var(--surface-2);    color: var(--text-faint); border-color: var(--border); }

/* --- Pesan --- */
.alert {
  padding: 14px 17px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  margin-bottom: 22px;
  font-size: 0.9rem;
  line-height: 1.6;
}
.alert ul { margin: 0; padding-left: 19px; }
.alert strong { display: block; margin-bottom: 4px; font-weight: 620; }
.alert-error   { background: var(--danger-soft);  border-color: color-mix(in srgb, var(--danger) 28%, transparent);  color: var(--danger); }
.alert-warning { background: var(--flag-soft);    border-color: var(--flag-border);  color: var(--flag); }
.alert-success { background: var(--success-soft); border-color: var(--brand-border); color: var(--success); }
.alert-info    { background: var(--brand-soft);   border-color: var(--brand-border); color: var(--brand); }

/* --- Baris data --- */
.datalist {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.datalist > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 12px 15px;
  background: var(--surface);
  font-size: 0.9rem;
}
.datalist dt, .datalist .dt { color: var(--text-muted); }
.datalist dd, .datalist .dd { margin: 0; font-weight: 560; text-align: right; word-break: break-word; }

/* --- Harga --- */
.price-box {
  background: linear-gradient(180deg, var(--brand-soft), color-mix(in srgb, var(--brand-soft) 40%, var(--surface)));
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  padding: 26px 24px;
  text-align: center;
}
.price-box .price-label { font-size: 0.82rem; color: var(--text-muted); font-weight: 540; }
.price-box .price-value {
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.04em;
  line-height: 1.15;
  margin-top: 2px;
}

/* --- Daftar order --- */
.order-list { display: grid; gap: 13px; }
.order-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s;
}
.order-item:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  text-decoration: none;
}
.order-item .oi-main { flex: 1; min-width: 0; }
.order-item .oi-code {
  font-family: var(--mono);
  font-size: 0.755rem;
  color: var(--text-faint);
  letter-spacing: 0.01em;
}
.order-item .oi-title {
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.012em;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-item .oi-meta { font-size: 0.82rem; color: var(--text-muted); margin-top: 3px; }
.order-item .oi-side { text-align: right; flex-shrink: 0; }

/* --- Tenggat --- */
.deadline { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.85rem; }
.deadline-urgent { color: var(--danger); }
.deadline-soon   { color: var(--flag); }
.deadline-ok     { color: var(--text-muted); }

/* --- Pratinjau berdampingan (layar konfirmasi kirim) --- */
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.preview-pane {
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
}
.preview-pane h4 {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 9px;
}
.preview-pane p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.62; }

/* --- Tabel --- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th {
  color: var(--text-faint);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.12s; }
tbody tr:hover { background: var(--bg-tint); }

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 28px;
  font-size: 0.85rem;
  color: var(--text-faint);
  background: var(--bg-tint);
}
.site-footer .container { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; }
/* Tautan kebijakan tingginya hanya setinggi hurufnya sendiri (22px) -- di
   bawah ambang 44px yang nyaman disentuh jari, padahal justru di sinilah
   pelanggan mencari Syarat & Ketentuan dan Pengembalian Dana. Tingginya
   dinaikkan lewat min-height, dan margin negatif menjaga jarak visual footer
   tetap seperti semula. */
.footer-links { display: flex; gap: 0 18px; flex-wrap: wrap; margin: -11px 0; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-muted);
  text-decoration: none;
}
.footer-links a:hover { color: var(--brand); }
@media (hover: hover) { .footer-links a:hover { text-decoration: underline; } }
.footer-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

/* --- Prosa dokumen kebijakan ---
   Halaman Syarat & Ketentuan, Pengembalian Dana, dan Privasi dibaca berurutan
   dari atas ke bawah, bukan dipindai seperti halaman produk. Barisnya dibuat
   lebih renggang dan jenjang judulnya lebih tegas supaya pasal-pasalnya mudah
   dirujuk saat ada pertanyaan dari pelanggan atau peninjau. */
.legal { line-height: 1.75; }
.legal h2 {
  font-size: 1.02rem;
  margin-top: 30px;
  margin-bottom: 9px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { font-size: 0.94rem; margin-top: 20px; margin-bottom: 7px; color: var(--text-muted); }
.legal p { margin-bottom: 13px; }
.legal ul { margin: 0 0 13px; padding-left: 22px; }
.legal li { margin-bottom: 7px; }
.legal > *:last-child { margin-bottom: 0; }

/* --- Utilitas --- */
.stack > * + * { margin-top: 18px; }
.stack-sm > * + * { margin-top: 9px; }
.center { text-align: center; }
.divider { height: 1px; background: var(--border); margin-block: 44px; }
.empty { text-align: center; padding: 56px 22px; }
/* Ikon keadaan-kosong dalam lingkaran lembut. Sebelumnya emoji berukuran
   2,2rem; ikon garis dengan ukuran sebesar itu akan terlihat kurus dan
   melayang, jadi ia diberi wadah yang memberinya bobot. */
.empty-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-faint);
}
.filedrop-icon { color: var(--text-faint); display: grid; place-items: center; }
.filedrop:hover .filedrop-icon,
.filedrop.is-dragover .filedrop-icon,
.filedrop.has-file .filedrop-icon { color: var(--brand); }

/* --- Responsif --- */
@media (max-width: 720px) {
  .doc-demo { grid-template-columns: 1fr; gap: 12px; }
  .doc-arrow { transform: rotate(90deg); margin-inline: auto; }
  .preview-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  main { padding-block: 30px 56px; }
  .container { padding-inline: 18px; }
  .card { padding: 22px 19px; }
  .hero { padding-block: 34px 30px; }
  .divider { margin-block: 32px; }
  .order-item { flex-direction: column; align-items: stretch; gap: 12px; }
  .order-item .oi-side { text-align: left; display: flex; justify-content: space-between; align-items: center; }
  .site-header .container { height: 58px; }
  .btn-row .btn { width: 100%; }
  .site-footer .container { justify-content: center; text-align: center; }

  /* Target sentuh minimal ~44px. Di desktop tautan setinggi 36px nyaman
     diklik mouse; di HP itu ukuran yang bikin salah tekan, terutama saat
     dipakai satu tangan sambil berjalan. */
  .nav a:not(.btn), .nav button:not(.btn) {
    padding: 12px 10px;
    font-size: 0.86rem;
  }
  .nav .btn-sm { padding: 11px 15px; }
  /* Logo juga tautan (ke beranda), jadi ikut butuh area sentuh yang layak --
     bukan cuma setinggi hurufnya. */
  .brand { padding-block: 9px; }

  /* Di HP daftar "segera menyusul" jadi satu kolom rapat dan taglinenya
     disembunyikan -- pada lebar ini taglinenya membungkus jadi dua baris dan
     membuat daftar sekunder lebih tinggi daripada layanan yang justru bisa
     dipesan. Nama layanannya sendiri sudah cukup menjelaskan. */
  .soon-grid { grid-template-columns: 1fr; gap: 8px; }
  .soon-item { padding: 10px 12px; }
  .soon-tagline { display: none; }
}

/* Hormati preferensi pengguna yang sensitif terhadap gerak. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .step:hover, .order-item:hover { transform: none; }
}