/* =====================================================================
   CVATS — Landing Page
   Palet dan skala diambil langsung dari tema aplikasi Flutter
   (lib/core/theme/app_colors.dart dan app_dimens.dart) supaya situs dan
   aplikasi terasa satu keluarga.

   Berkas ini memuat seluruh gaya komponen sebagai CSS biasa, bukan hanya
   pelengkap Tailwind. Tailwind dimuat lewat CDN yang menyusun kelasnya di
   sisi peramban, jadi ada jeda singkat sebelum utilitasnya aktif. Dengan
   komponen ditulis di sini, halaman sudah tampil utuh sejak render pertama.
   ===================================================================== */

/* --- Token ---------------------------------------------------------- */

:root {
  /* Skala maroon */
  --maroon-50: #fdf5f6;
  --maroon-100: #f7e4e8;
  --maroon-200: #edc3cb;
  --maroon-300: #dc93a2;
  --maroon-400: #c15a70;
  --maroon-500: #a02d45;

  --primary: #7e1c2e;
  --primary-dark: #5c1220;
  --primary-deep: #4a0e1a;
  --primary-light: #a8394d;

  /* Netral */
  --ink: #14161a;
  --ink-muted: #5a6069;
  --ink-faint: #8a9099;
  --border: #e3e6ea;
  --border-strong: #ced3da;
  --surface: #ffffff;
  --surface-muted: #f3f4f7;
  --bg: #f6f7f9;

  /* Semantik */
  --success: #1b7f4b;
  --success-surface: #e7f5ed;
  --warning: #9a6700;
  --warning-surface: #fff6e0;
  --danger: #b3261e;

  /* Radius, mengikuti AppRadius */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.06);
  --shadow-md: 0 4px 16px rgba(20, 22, 26, 0.07);
  --shadow-lg: 0 18px 44px rgba(20, 22, 26, 0.13);
  --shadow-maroon: 0 12px 30px rgba(126, 28, 46, 0.28);

  --header-h: 68px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Tinos", "Times New Roman", Times, serif;
}

/* --- Dasar ---------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Anchor tidak tertutup header yang menempel di atas. */
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  color: var(--primary-dark);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.22;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 3px solid var(--maroon-400);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection {
  background: var(--maroon-200);
  color: var(--primary-dark);
}

/* Lompat ke konten, tersembunyi sampai difokus lewat keyboard. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  transition: top 0.18s var(--ease);
}

.skip-link:focus {
  top: 12px;
  color: #fff;
}

/* --- Tata letak ----------------------------------------------------- */

.shell {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 768px) {
  .shell {
    padding-inline: 32px;
  }
}

.section {
  padding-block: 72px;
}

@media (min-width: 768px) {
  .section {
    padding-block: 104px;
  }
}

.section--tight {
  padding-block: 56px;
}

.section--alt {
  background: var(--surface);
  border-block: 1px solid var(--border);
}

.section-head {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 44px;
}

.section-head--left {
  margin-inline: 0;
  text-align: left;
}

.section-head h2 {
  font-size: clamp(1.65rem, 1.15rem + 2.2vw, 2.5rem);
  margin-bottom: 14px;
}

/* Badge dikecualikan di sini. Tanpa :not(), selektor ini lebih kuat
   daripada .eyebrow dan diam-diam membesarkan kembali setiap badge yang
   berada di dalam .section-head. */
.section-head p:not(.eyebrow) {
  color: var(--ink-muted);
  font-size: 1.0625rem;
}

/* --- Eyebrow / label kecil ------------------------------------------ */

/* Label kecil di atas judul tiap section ("Fitur", "Cara kerja", dan
   seterusnya). Kesepuluh badge di halaman memakai kelas ini, jadi ukurannya
   cukup disetel di satu tempat. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  margin-bottom: 14px;
  border: 1px solid var(--maroon-200);
  border-radius: var(--r-pill);
  background: var(--maroon-50);
  color: var(--primary);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-transform: uppercase;
}

.eyebrow--onDark {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  backdrop-filter: blur(6px);
}

.eyebrow svg {
  width: 12px;
  height: 12px;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
    background-color 0.18s var(--ease), border-color 0.18s var(--ease),
    color 0.18s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.btn--primary {
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-maroon);
}

.btn--primary:hover {
  background: var(--primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(126, 28, 46, 0.34);
}

.btn--ghost {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--maroon-50);
}

.btn--onDark {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  backdrop-filter: blur(6px);
}

.btn--onDark:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.btn--white {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.btn--white:hover {
  background: var(--maroon-50);
  color: var(--primary-dark);
  transform: translateY(-2px);
}

.btn--block {
  width: 100%;
}

/* Tombol Google Play dengan dua baris teks. */
.btn--store {
  gap: 12px;
  padding: 0 24px;
  min-height: 58px;
  text-align: left;
}

.btn--store svg {
  width: 26px;
  height: 26px;
}

.btn--store .btn__lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
}

.btn--store .btn__top {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.82;
}

.btn--store .btn__bottom {
  font-size: 1rem;
  font-weight: 700;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
    background-color 0.2s var(--ease);
}

.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 1px 14px rgba(20, 22, 26, 0.06);
  background: rgba(255, 255, 255, 0.95);
}

.site-header .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.brand:hover {
  color: var(--ink);
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
}

.brand__sub {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  line-height: 1;
  margin-top: 2px;
}

.nav {
  display: none;
  align-items: center;
  gap: 4px;
}

@media (min-width: 1024px) {
  .nav {
    display: flex;
  }
}

.nav a {
  position: relative;
  padding: 8px 13px;
  border-radius: var(--r-sm);
  color: var(--ink-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color 0.16s var(--ease), background-color 0.16s var(--ease);
}

.nav a:hover {
  color: var(--primary);
  background: var(--maroon-50);
}

.nav a.is-active {
  color: var(--primary);
  font-weight: 600;
}

.nav a.is-active::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
}

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

.header-actions .btn {
  display: none;
  min-height: 42px;
  padding-inline: 18px;
  font-size: 0.875rem;
  box-shadow: none;
}

@media (min-width: 640px) {
  .header-actions .btn {
    display: inline-flex;
  }
}

/* Tombol menu, hanya tampil di bawah 1024px. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }
}

.nav-toggle__bars {
  position: relative;
  width: 18px;
  height: 12px;
}

.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.22s var(--ease), opacity 0.16s var(--ease);
}

.nav-toggle__bars span:nth-child(1) {
  top: 0;
}
.nav-toggle__bars span:nth-child(2) {
  top: 5px;
}
.nav-toggle__bars span:nth-child(3) {
  top: 10px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* Panel menu seluler. */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  z-index: 99;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  padding: 18px 20px 26px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.24s var(--ease), opacity 0.2s var(--ease),
    visibility 0.24s;
}

.mobile-nav.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

@media (min-width: 1024px) {
  .mobile-nav {
    display: none;
  }
}

.mobile-nav a:not(.btn) {
  display: block;
  padding: 13px 14px;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
}

.mobile-nav a:not(.btn):hover,
.mobile-nav a.is-active {
  background: var(--maroon-50);
  color: var(--primary);
}

.mobile-nav .btn {
  margin-top: 14px;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(20, 22, 26, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s var(--ease), visibility 0.24s;
}

.nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

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

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 64px 72px;
  background: linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 58%, var(--primary-deep) 100%);
  color: #fff;
  isolation: isolate;
}

@media (min-width: 900px) {
  .hero {
    padding-block: 88px 96px;
  }
}

/* Busur dekoratif, meniru latar feature graphic di Play Store. */
.hero__arcs {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
}

.hero__glow {
  position: absolute;
  z-index: -1;
  width: 620px;
  height: 620px;
  right: -180px;
  top: -220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193, 90, 112, 0.55) 0%, rgba(193, 90, 112, 0) 68%);
  pointer-events: none;
}

.hero__grid {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 56px;
  }
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 1.35rem + 3.3vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}

.hero h1 em {
  font-style: normal;
  color: var(--maroon-200);
}

.hero__lead {
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  margin-bottom: 30px;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 30px;
}

.hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.9375rem;
  font-weight: 500;
}

.hero__points li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero__points svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--maroon-200);
}

/* Rangka ponsel di kolom kanan hero. */
.phone {
  position: relative;
  width: min(268px, 74vw);
  margin-inline: auto;
  padding: 10px;
  border-radius: 34px;
  background: linear-gradient(160deg, #2a2d33 0%, #16181c 100%);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(150, 156, 166, 0.5);
}

.phone::after {
  /* Tombol daya di sisi kanan. */
  content: "";
  position: absolute;
  right: -2px;
  top: 25%;
  width: 3px;
  height: 56px;
  border-radius: 3px;
  background: #2f3238;
}

.phone img {
  width: 100%;
  height: auto;
  border-radius: 26px;
  background: var(--bg);
}

.phone--lg {
  width: min(300px, 78vw);
}

.hero .phone {
  transform: rotate(-1.6deg);
}

/* Kartu kecil yang mengambang di sisi mockup hero. */
.hero__badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.97);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.hero__badge svg {
  width: 22px;
  height: 22px;
  flex: none;
}

.hero__badge span small {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-faint);
}

.hero__badge--pdf {
  left: -14px;
  top: 16%;
  color: var(--success);
}

.hero__badge--ats {
  right: -18px;
  bottom: 14%;
  color: var(--primary);
}

@media (max-width: 899px) {
  .hero__badge--pdf {
    left: max(-6px, calc(50% - 210px));
  }
  .hero__badge--ats {
    right: max(-6px, calc(50% - 210px));
  }
}

.hero__media {
  position: relative;
}

/* --- Deret statistik ------------------------------------------------ */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stats li {
  padding: 26px 20px;
  background: var(--surface);
  text-align: center;
}

.stats dl {
  /* Markup memakai urutan dt lalu dd sesuai spesifikasi HTML; urutan
     tampilnya dibalik di sini agar angka tampil di atas keterangannya. */
  display: flex;
  flex-direction: column-reverse;
  margin: 0;
}

.stats dt {
  color: var(--ink-muted);
  font-size: 0.875rem;
  font-weight: 500;
}

.stats dd {
  margin: 0 0 4px;
  color: var(--primary);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

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

.card {
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
    border-color 0.22s var(--ease);
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--maroon-200);
  box-shadow: var(--shadow-md);
}

.card h3 {
  font-size: 1.0625rem;
  margin-bottom: 8px;
}

.card p {
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: var(--r-md);
  background: var(--maroon-50);
  border: 1px solid var(--maroon-100);
  color: var(--primary);
}

.card__icon svg {
  width: 23px;
  height: 23px;
}

.grid-cards {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
}

/* --- Penjelasan ATS ------------------------------------------------- */

.split {
  display: grid;
  gap: 44px;
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
  }
}

.prose p + p {
  margin-top: 16px;
}

.prose p {
  color: var(--ink-muted);
  font-size: 1.0625rem;
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

.checklist {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.checklist svg {
  width: 21px;
  height: 21px;
  flex: none;
  margin-top: 2px;
}

.checklist .ok {
  color: var(--success);
}

.checklist .no {
  color: var(--danger);
}

.checklist b {
  color: var(--ink);
  font-weight: 600;
}

/* Kartu perbandingan "hindari / lakukan". */
.compare {
  display: grid;
  gap: 16px;
}

@media (min-width: 560px) {
  .compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.compare__col {
  padding: 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}

.compare__col h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9375rem;
  margin-bottom: 14px;
}

.compare__col h3 svg {
  width: 19px;
  height: 19px;
}

.compare__col--bad {
  background: #fcebea;
  border-color: #f3ced0;
}

.compare__col--bad h3 {
  color: var(--danger);
}

.compare__col--good {
  background: var(--success-surface);
  border-color: #c9e5d5;
}

.compare__col--good h3 {
  color: var(--success);
}

.compare__col li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.compare__col li + li {
  margin-top: 9px;
}

.compare__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}

/* --- Langkah -------------------------------------------------------- */

.steps {
  position: relative;
  display: grid;
  gap: 12px;
}

.step {
  display: flex;
  gap: 18px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.step:hover {
  border-color: var(--maroon-200);
  box-shadow: var(--shadow-md);
  transform: translateX(3px);
}

.step__no {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: var(--primary);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
}

.step h3 {
  font-size: 1rem;
  margin-bottom: 5px;
}

.step p {
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.step--optional .step__no {
  background: var(--maroon-100);
  color: var(--primary);
}

/* --- Template ------------------------------------------------------- */

.templates {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.tpl {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
    border-color 0.22s var(--ease);
}

.tpl:hover {
  transform: translateY(-4px);
  border-color: var(--maroon-200);
  box-shadow: var(--shadow-md);
}

.tpl__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.tpl h3 {
  font-size: 1.0625rem;
}

.tpl__tagline {
  color: var(--primary);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 12px;
}

.tpl p:last-child {
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.tpl__badge {
  flex: none;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tpl__badge--free {
  background: var(--success-surface);
  color: var(--success);
}

.tpl__badge--pro {
  background: var(--warning-surface);
  color: var(--warning);
}

/* Pratinjau kertas CV, digambar dengan CSS supaya ringan. */
.tpl__preview {
  --line: #d3d7dd;
  aspect-ratio: 3 / 4;
  margin-bottom: 16px;
  padding: 14px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: #fff;
  overflow: hidden;
}

.tpl__preview i {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  margin-bottom: 5px;
}

.tpl__preview .t-name {
  height: 8px;
  width: 58%;
  margin-bottom: 8px;
  background: var(--primary);
}

.tpl__preview .t-head {
  width: 32%;
  height: 5px;
  margin-top: 11px;
  background: var(--primary);
}

.tpl__preview .t-rule {
  height: 1px;
  margin: 6px 0 7px;
  background: var(--maroon-200);
}

.tpl__preview .w90 {
  width: 90%;
}
.tpl__preview .w75 {
  width: 75%;
}
.tpl__preview .w60 {
  width: 60%;
}
.tpl__preview .w45 {
  width: 45%;
}

/* Varian per template: klasik dan ringkas memakai aksen hitam. */
.tpl__preview--classic {
  text-align: center;
}

.tpl__preview--classic .t-name,
.tpl__preview--classic .t-head {
  background: var(--ink);
  margin-inline: auto;
}

.tpl__preview--classic .t-rule {
  background: var(--ink);
}

.tpl__preview--classic i:not(.t-name):not(.t-head):not(.t-rule) {
  margin-inline: auto;
}

.tpl__preview--compact i {
  height: 3px;
  margin-bottom: 3px;
}

.tpl__preview--compact .t-name,
.tpl__preview--compact .t-head {
  background: var(--ink);
}

.tpl__preview--compact .t-rule {
  background: var(--border-strong);
  margin: 4px 0 5px;
}

.tpl__preview--elegant .t-rule {
  height: 2px;
  background: var(--primary);
}

/* --- Privasi -------------------------------------------------------- */

.privacy {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
}

.privacy h2 {
  color: #fff;
}

/* Sama seperti di atas: badge punya warnanya sendiri lewat .eyebrow--onDark. */
.privacy .section-head p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.85);
}

.privacy__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.privacy__item {
  padding: 24px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
}

.privacy__item h3 {
  color: #fff;
  font-size: 1.0625rem;
  margin-bottom: 8px;
}

.privacy__item p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9375rem;
}

.privacy__item svg {
  width: 26px;
  height: 26px;
  margin-bottom: 14px;
  color: var(--maroon-200);
}

/* --- Galeri tangkapan layar ----------------------------------------- */

.gallery {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  align-items: start;
}

.gallery figure {
  margin: 0;
  text-align: center;
}

.gallery figcaption {
  margin-top: 16px;
  color: var(--ink-muted);
  font-size: 0.875rem;
}

.gallery figcaption b {
  display: block;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.gallery .phone {
  width: 100%;
  max-width: 240px;
}

/* --- Gratis vs Premium ---------------------------------------------- */

.plans {
  display: grid;
  gap: 20px;
  align-items: start;
}

@media (min-width: 860px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--surface);
}

.plan--pro {
  position: relative;
  border-color: var(--primary);
  box-shadow: 0 18px 44px rgba(126, 28, 46, 0.16);
}

.plan__ribbon {
  position: absolute;
  top: -13px;
  right: 26px;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.plan h3 {
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.plan__price {
  color: var(--ink-muted);
  font-size: 0.9375rem;
  margin-bottom: 22px;
}

.plan__price b {
  display: block;
  color: var(--ink);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.plan ul {
  display: grid;
  gap: 11px;
  margin-bottom: 26px;
}

.plan li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.plan li svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  color: var(--success);
}

.plan li.is-off {
  color: var(--ink-faint);
}

.plan li.is-off svg {
  color: var(--ink-faint);
}

.plan .btn {
  margin-top: auto;
}

.plan__note {
  margin-top: 14px;
  color: var(--ink-faint);
  font-size: 0.8125rem;
  text-align: center;
}

/* --- FAQ ------------------------------------------------------------ */

.faq {
  max-width: 820px;
  margin-inline: auto;
  display: grid;
  gap: 10px;
}

.faq__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.faq__item.is-open {
  border-color: var(--maroon-200);
  box-shadow: var(--shadow-md);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 19px 22px;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.faq__q:hover {
  color: var(--primary);
}

.faq__q svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--primary);
  transition: transform 0.24s var(--ease);
}

.faq__item.is-open .faq__q svg {
  transform: rotate(45deg);
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s var(--ease);
}

.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}

.faq__a > div {
  overflow: hidden;
}

.faq__a p {
  padding: 0 22px 20px;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.faq__a p + p {
  padding-top: 12px;
  margin-top: -8px;
}

/* --- Pita ajakan ---------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  padding-block: 76px;
  background: linear-gradient(140deg, var(--primary) 0%, var(--primary-deep) 100%);
  color: #fff;
  text-align: center;
}

.cta h2 {
  color: #fff;
  font-size: clamp(1.7rem, 1.2rem + 2.3vw, 2.6rem);
  margin-bottom: 16px;
}

.cta p {
  max-width: 40rem;
  margin: 0 auto 32px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.0625rem;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* --- Kontak --------------------------------------------------------- */

.contact {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.contact a {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--ink);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.contact a:hover {
  transform: translateY(-3px);
  border-color: var(--maroon-200);
  box-shadow: var(--shadow-md);
  color: var(--ink);
}

.contact__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--maroon-50);
  border: 1px solid var(--maroon-100);
  color: var(--primary);
}

.contact__icon svg {
  width: 22px;
  height: 22px;
}

.contact dt {
  color: var(--ink-faint);
  font-size: 0.8125rem;
  font-weight: 500;
}

.contact dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  word-break: break-word;
}

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

.site-footer {
  padding-block: 56px 32px;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.9375rem;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.68);
  transition: color 0.16s var(--ease);
}

.site-footer a:hover {
  color: #fff;
}

.footer__grid {
  display: grid;
  gap: 36px;
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
    gap: 48px;
  }
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
}

.footer__brand img {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
}

.footer__about {
  max-width: 34rem;
}

.site-footer h3 {
  margin-bottom: 16px;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer__links {
  display: grid;
  gap: 10px;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.875rem;
}

/* Baris atribusi "CV ATS by Nexadream" di footer. */
.footer__by {
  display: flex;
  align-items: center;
  gap: 7px;
}

.footer__by a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-weight: 600;
}

.footer__by a:hover {
  color: var(--maroon-200);
}

.footer__by img {
  width: 20px;
  height: 20px;
  flex: none;
}

/* --- Kembali ke atas ------------------------------------------------ */

.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-maroon);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease),
    visibility 0.22s, background-color 0.18s var(--ease);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.to-top:hover {
  background: var(--primary-dark);
}

.to-top svg {
  width: 21px;
  height: 21px;
}

/* --- Animasi masuk saat digulir ------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Halaman tetap utuh bila JavaScript dimatikan. */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Hanya untuk pembaca layar. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Cetak: buang elemen navigasi dan latar gelap. */
@media print {
  .site-header,
  .mobile-nav,
  .nav-backdrop,
  .to-top,
  .hero__arcs,
  .hero__glow {
    display: none !important;
  }

  .hero,
  .cta,
  .privacy,
  .site-footer {
    background: #fff !important;
    color: #000 !important;
  }
}