/* =================================================================
   Ragam Digital - Main Stylesheet (Tahap 1)
   Sesuai PRD V1.0 - Mobile First, Tanpa Framework
   ================================================================ */

/* --- 1. Variabel Global (:root) & Warna PRD --- */
:root {
  --color-primary: #0B2A5B;       /* Biru tua (dominan di hero & teks) */
  --color-accent: #F28C28;        /* Oranye (aksen garis & centang) */
  --color-bg-main: #FFFFFF;       /* Putih (latar utama) */
  --color-bg-section-1: #F5F7FB;  /* Abu-biru muda latar bagian */
  --color-bg-section-2: #EAF0FA;  /* Abu-biru muda (placeholder & variasi) */
  --color-border: #D5DCE8;        /* Garis */
  --color-text-main: #33425F;     /* Teks isi */
  --color-text-muted: #5B6B88;    /* Teks pendukung */
  --color-hover-bg: #FDEBD3;      /* Oranye muda (hover & lencana) */
  --color-bg-hero: #EAF1FC;       /* Putih kebiruan (header, hero, footer) */
  --color-bg-hero-soft: #F7FAFE;  /* Ujung bawah gradien hero */
  --color-indigo: #4F46E5;        /* Indigo (aksen hero) */
  --color-violet: #9333EA;        /* Ungu (aksen hero) */
  --grad-brand: linear-gradient(120deg, #4F46E5 0%, #7C3AED 62%, #A24BD6 100%);
  
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 4px rgba(11, 42, 91, 0.04);
  --shadow-md: 0 4px 12px rgba(11, 42, 91, 0.08);
  --transition-fast: 0.2s ease;
}

/* --- 2. Reset & Box Sizing --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg-main);
  color: var(--color-text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

svg {
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Focus-visible accessibility rule */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* --- 3. Tipografi & Material Symbols --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-weight: 700;
  line-height: 1.25;
}

h1 {
  font-size: 2.25rem; /* ~36px */
}

h2 {
  font-size: 1.875rem; /* ~30px */
}

h3 {
  font-size: 1.375rem; /* ~22px */
}

p {
  color: var(--color-text-main);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-primary {
  color: var(--color-primary);
}

.material-symbols-outlined {
  display: inline-flex;
  font-size: 1.25rem;
  vertical-align: middle;
}

/* --- 4. Container & Layout Dasar (Mobile First) --- */
.container {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

.section {
  padding: 3rem 0;
}

.section-alt {
  background-color: var(--color-bg-section-1);
}

/* --- Kelas .on-dark (Hero & Footer Biru Tua) --- */
.on-dark {
  background-color: var(--color-primary);
  color: #FFFFFF;
}

.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4,
.on-dark h5,
.on-dark h6,
.on-dark p {
  color: #FFFFFF;
}

.on-dark .text-muted {
  color: #C3D2EE;
}

/* --- 5. Gaya Tombol (Sesuai Aturan PRD & Area Sentuh Min 44px) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  text-align: center;
  white-space: normal;
}

/* Tombol WhatsApp (Aturan PRD: latar putih, garis oranye 1.5px, teks biru tua, hover oranye muda) */
.btn-whatsapp {
  background-color: var(--color-bg-main);
  border: 1.5px solid var(--color-accent);
  color: var(--color-primary);
}

.btn-whatsapp svg {
  width: 20px;
  height: 20px;
  color: #25D366;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus {
  background-color: var(--color-hover-bg);
}

/* Tombol Utama Biru Tua */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-bg-main);
  border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #071d3f;
  border-color: #071d3f;
}

/* Tombol Garis (Outline) Standar */
.btn-outline {
  background-color: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-primary);
}

.btn-outline:hover,
.btn-outline:focus {
  border-color: var(--color-primary);
  background-color: var(--color-bg-section-1);
}

/* --- 6. Kartu & Lencana (Card & Badge) --- */
.card {
  background-color: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--font-heading);
  background-color: var(--color-hover-bg);
  color: #8A4300;
  border-radius: 50px;
}

/* --- 7. Chip Filter (Portofolio) --- */
.filter-group {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  background-color: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.filter-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.filter-chip.active {
  background-color: var(--color-bg-main);
  border: 1.5px solid var(--color-accent);
  color: var(--color-primary);
  font-weight: 500;
}

/* --- 8. Placeholder Gambar Portofolio CSS --- */
.portfolio-placeholder {
  width: 100%;
  aspect-ratio: 16/10;
  background-color: var(--color-bg-section-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

/* --- 9. Tombol WhatsApp melayang: dipindah ke js/wa-widget.js (gayanya ada di dalam skrip itu) --- */

/* --- 10. Breakpoints & Media Queries (Tablet & Desktop) --- */
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
  
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  h1 {
    font-size: 2.75rem; /* ~44px */
  }

  h2 {
    font-size: 2.25rem; /* ~36px */
  }

  .section {
    padding: 4.5rem 0;
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 3.25rem; /* ~52px */
  }
  
  .section {
    padding: 6rem 0;
  }
}

/* --- 11. Prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* =================================================================
   12. Header, Hero, Footer (Tahap 1 lanjutan)
   Kelas baru dari index.html. Bagian 1-11 di atas tidak diubah.
   ================================================================ */

/* Supaya judul bagian tidak tertutup header saat tautan jangkar diklik */
html {
  scroll-padding-top: 72px;
}

/* --- 12a. Header & Navigasi (Mobile First) --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background-color: var(--color-bg-hero);
  border-bottom: 1px solid rgba(11, 42, 91, 0.08);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-primary);
}

.menu-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: transparent;
  border: 1.5px solid rgba(11, 42, 91, 0.25);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.menu-toggle-btn:hover {
  border-color: var(--color-accent);
  background-color: rgba(11, 42, 91, 0.06);
}

/* Di HP, menu tersembunyi dan muncul sebagai panel saat diberi kelas is-open oleh JS */
.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 0.75rem 1rem 1rem;
  background-color: var(--color-bg-main);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.site-nav.is-open {
  display: block;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.75rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  color: var(--color-primary);
  transition: background-color var(--transition-fast);
}

.nav-link:hover {
  background-color: var(--color-bg-section-1);
}

.nav-list .btn {
  width: 100%;
  margin-top: 0.5rem;
}

/* --- 12b. Hero (terang; dua kolom di layar lebar) --- */
.hero-section {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 0;
  background: linear-gradient(180deg, var(--color-bg-hero) 0%, var(--color-bg-hero-soft) 100%);
}

/* Pendar warna lembut di dua sudut hero */
.hero-section::before,
.hero-section::after {
  content: "";
  position: absolute;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  pointer-events: none;
}

.hero-section::before {
  top: -9rem;
  right: -9rem;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.10) 0%, transparent 68%);
}

.hero-section::after {
  bottom: -10rem;
  left: -9rem;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.09) 0%, transparent 68%);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.hero-copy > * {
  max-width: 40rem;
}

/* Garis oranye di bawah frasa kunci (oranye hanya sebagai garis) */
.hero-underline {
  white-space: nowrap;
  padding-bottom: 0.25rem;
  background-image: var(--grad-brand);
  background-repeat: no-repeat;
  background-size: 100% 0.25rem;
  background-position: 0 100%;
}

.hero-section .hero-desc {
  font-size: 1.125rem;
  line-height: 1.6;
}

.hero-price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.625rem;
  padding: 0.625rem 1rem;
  background-color: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.hero-price-label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.hero-price-value {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-indigo);
  background-image: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-price-note {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.hero-points {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem 1rem;
}

@media (min-width: 640px) {
  .hero-points {
    grid-template-columns: 1fr 1fr;
  }
}

.hero-points li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-primary);
}

.hero-points .material-symbols-outlined {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  font-size: 1.25rem;
}

.hero-points li:nth-child(1) .material-symbols-outlined { background-color: #E0E7FF; color: #4F46E5; }
.hero-points li:nth-child(2) .material-symbols-outlined { background-color: #EDE9FE; color: #7C3AED; }
.hero-points li:nth-child(3) .material-symbols-outlined { background-color: #F3E8FF; color: #9333EA; }
.hero-points li:nth-child(4) .material-symbols-outlined { background-color: #E0F2FE; color: #0284C7; }

.hero-point-text {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.hero-point-text strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-primary);
}

.hero-point-text small {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 0.25rem;
}

/* Dua tombol hero bergradasi: satu terisi, satu garis. Saat hover keduanya bertukar. */
.btn-solid,
.btn-ghost {
  position: relative;
  border: 2px solid var(--color-indigo);
}

.btn-solid {
  background-image: var(--grad-brand);
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.28);
}

.btn-solid:hover,
.btn-solid:focus-visible {
  background-image: none;
  color: var(--color-indigo);
  box-shadow: none;
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-indigo);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background-image: var(--grad-brand);
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.28);
}

/* Tulisan bergradasi saat tombol dalam keadaan garis */
.btn-ghost .btn-label,
.btn-solid:hover .btn-label,
.btn-solid:focus-visible .btn-label {
  background-image: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-ghost:hover .btn-label,
.btn-ghost:focus-visible .btn-label {
  background-image: none;
  -webkit-text-fill-color: #FFFFFF;
}

.btn-solid .material-symbols-outlined {
  transition: transform var(--transition-fast);
}

.btn-solid:hover .material-symbols-outlined {
  transform: translateX(4px);
}

/* Garis tombol bergradasi (hanya di browser yang mendukung; selain itu garis indigo polos) */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .btn-solid,
  .btn-ghost {
    border-color: transparent;
  }

  .btn-solid::before,
  .btn-ghost::before {
    content: "";
    position: absolute;
    inset: -2px;
    padding: 2px;
    border-radius: inherit;
    background-image: var(--grad-brand);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }
}

/* Sketsa website di hero: tampil di semua ukuran layar (di HP muncul di bawah tombol) */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin: 0;
  padding: 0.5rem 0 1.5rem;
}

.mock-window {
  background-color: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(11, 42, 91, 0.14);
  overflow: hidden;
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.625rem 0.875rem;
  background-color: var(--color-bg-section-2);
  border-bottom: 1px solid var(--color-border);
}

/* Tiga bulatan gaya macOS: merah, kuning-oranye, hijau */
.mock-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}

.mock-dot:nth-child(1) { background-color: #FF5F57; }
.mock-dot:nth-child(2) { background-color: #FEBC2E; }
.mock-dot:nth-child(3) { background-color: #28C840; }

.mock-url {
  flex: 1;
  margin-left: 0.5rem;
  padding: 0.2rem 0.75rem;
  background-color: var(--color-bg-main);
  border-radius: 50px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.mock-body {
  position: relative;
  padding: 1rem 1.125rem 1.125rem;
}

.mock-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mock-logo {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-primary);
}

.mock-links {
  display: flex;
  gap: 0.375rem;
}

.mock-links i {
  display: block;
  width: 1.5rem;
  height: 0.3rem;
  border-radius: 50px;
  background-color: var(--color-border);
}

.mock-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0.75rem;
  align-items: center;
  margin: 0.875rem 0;
}

.mock-title {
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-primary);
}

.mock-line {
  display: block;
  height: 0.4rem;
  margin-bottom: 0.375rem;
  border-radius: 50px;
  background-color: var(--color-border);
}

.mock-line--short {
  width: 60%;
}

.mock-cta {
  display: inline-block;
  margin-top: 0.375rem;
  padding: 0.35rem 0.8rem;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  color: #FFFFFF;
  background-image: var(--grad-brand);
  border-radius: var(--radius-sm);
}

.mock-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6.5rem;
  color: #FFFFFF;
  background-image: var(--grad-brand);
  border-radius: var(--radius-md);
}

.mock-image .material-symbols-outlined {
  font-size: 2.25rem;
}

.mock-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.mock-cards span {
  display: block;
  height: 3.25rem;
  background-color: var(--color-bg-hero-soft);
  border-radius: var(--radius-sm);
}

.mock-cards span:nth-child(1) { box-shadow: inset 0 3px 0 #4F46E5; }
.mock-cards span:nth-child(2) { box-shadow: inset 0 3px 0 #DB2777; }
.mock-cards span:nth-child(3) { box-shadow: inset 0 3px 0 #9333EA; }

/* Foto opsional di dalam jendela (img/hero/hero.jpg). Kalau file belum ada, sketsa tetap tampil. */
.hero-shot {
  position: absolute;
  inset: 0;
  background-image: url("../img/hero/hero.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

/* Kartu melayang: hanya di layar yang cukup lebar */
.float-card {
  position: absolute;
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background-color: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-primary);
}

.float-card .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.4rem;
  font-size: 1.125rem;
}

.float-card--a .material-symbols-outlined { background-color: #E0E7FF; color: #4F46E5; }
.float-card--b .material-symbols-outlined { background-color: #EDE9FE; color: #7C3AED; }
.float-card--c .material-symbols-outlined { background-color: #F3E8FF; color: #9333EA; }

.float-card--a {
  top: 0;
  right: 0;
  animation: heroFloatA 4s ease-in-out infinite;
}

.float-card--b {
  top: 46%;
  right: 0;
  animation: heroFloatB 4.5s ease-in-out infinite;
}

.float-card--c {
  bottom: 0;
  left: 0;
  animation: heroFloatA 4.2s ease-in-out infinite;
}

@media (min-width: 640px) {
  .float-card {
    display: inline-flex;
  }
}

@keyframes heroFloatA {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes heroFloatB {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 3rem;
  }

  .hero-section h1 {
    font-size: 3rem;
  }

  .hero-visual {
    max-width: none;
    margin: 0;
    padding: 1.5rem 1.5rem 2rem 1rem;
  }
}

/* --- 12c. Footer / Kontak --- */
/* Padding bawah ekstra supaya tautan terakhir tidak tertutup tombol WhatsApp melayang */
.site-footer {
  padding: 3.5rem 0 5rem;
  background-color: var(--color-bg-hero);
  border-top: 1px solid var(--color-border);
}

.footer-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.footer-container > h2 {
  max-width: 28rem;
}

.footer-action {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(11, 42, 91, 0.12);
}

.site-footer .brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-primary);
}

.site-footer .domain-name,
.site-footer .copyright {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.footer-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin-top: 0.5rem;
}

.footer-nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.footer-nav-list a:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 4px;
}

/* --- 12d. Tablet & Desktop untuk Header, Hero, Footer --- */
@media (min-width: 768px) {
  .hero-section {
    padding: 5rem 0;
  }

  .hero-section .hero-desc {
    font-size: 1.25rem;
  }

  .site-footer {
    padding: 4.5rem 0 5rem;
  }
}

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

  .site-nav {
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    background-color: transparent;
    border-bottom: 0;
    box-shadow: none;
  }

  .nav-list {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
  }

  .nav-link {
    padding: 0 0.75rem;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    color: var(--color-primary);
  }

  .nav-link:hover {
    background-color: transparent;
    border-bottom-color: var(--color-accent);
  }

  .nav-list .btn {
    width: auto;
    margin-top: 0;
    margin-left: 0.75rem;
  }

  .hero-section {
    padding: 5rem 0;
  }

  .site-footer {
    padding: 6rem 0 5rem;
  }
}

/* =================================================================
   13. Bagian Paket (Tahap 2) - mengikuti gambaran yang disetujui
   ================================================================ */

/* Kepala bagian: dipakai ulang di bagian lain */
.section-header {
  max-width: 40rem;
  margin: 0 auto 2rem;
  text-align: center;
}

.section-header p {
  margin-top: 0.5rem;
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  max-width: 72rem;
  margin: 1.25rem auto 0;
  padding: 1rem 1.25rem;
  background-color: #EEF2FF;
  border: 1px solid #C7D2FE;
  border-radius: var(--radius-lg);
}

.notice .material-symbols-outlined {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: #4F46E5;
  color: #FFFFFF;
  font-size: 1.375rem;
}

.notice-text {
  padding-top: 0.4rem; /* baris pertama sejajar dengan tengah ikon */
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-main);
}

.notice-text strong {
  font-weight: 700;
  color: var(--color-primary);
}


/* =================================================================
   14. Strip ringkasan angka & lencana hero (sesuai gambaran awal)
   ================================================================ */

/* Lencana di hero berwarna biru, bukan oranye muda */
.hero-section .badge {
  background-color: var(--color-bg-main);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
}

/* Bulatan hijau berpendar, seperti indikator "aktif" */
.hero-section .badge::before {
  content: "";
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background-color: #22C55E;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55), 0 0 8px 2px rgba(34, 197, 94, 0.55);
  animation: badgeGlow 2s ease-out infinite;
}

@keyframes badgeGlow {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55), 0 0 8px 2px rgba(34, 197, 94, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0), 0 0 8px 2px rgba(34, 197, 94, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0), 0 0 8px 2px rgba(34, 197, 94, 0.55); }
}

/* Strip jenis usaha di bawah hero: judul bergaris di tengah, empat kotak sejajar */
.usage-strip {
  background-color: var(--color-bg-section-1);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 1.5rem 0 1.75rem;
}

.usage-heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.usage-line {
  flex: 1;
  height: 1px;
  background-image: linear-gradient(90deg, transparent 0%, #B8C4DA 100%);
}

.usage-line:last-child {
  background-image: linear-gradient(270deg, transparent 0%, #B8C4DA 100%);
}

.usage-label {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  color: var(--color-primary);
}

.usage-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.usage-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 0.75rem;
  text-align: center;
  background-color: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-primary);
  cursor: default;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.usage-item .material-symbols-outlined {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background-color: var(--soft);
  color: var(--dot);
  font-size: 1.5rem;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.usage-item:hover {
  transform: translateY(-4px);
  border-color: var(--dot);
  background-color: var(--tint);
  box-shadow: 0 12px 26px rgba(11, 42, 91, 0.12);
}

.usage-item:hover .material-symbols-outlined {
  background-color: var(--dot);
  color: #FFFFFF;
  transform: scale(1.08);
}

.usage-item:nth-child(1) { --dot: #4F46E5; --soft: #E0E7FF; --tint: #F5F7FF; }
.usage-item:nth-child(2) { --dot: #DB2777; --soft: #FCE7F3; --tint: #FFF5FA; }
.usage-item:nth-child(3) { --dot: #9333EA; --soft: #F3E8FF; --tint: #FBF7FF; }
.usage-item:nth-child(4) { --dot: #0284C7; --soft: #E0F2FE; --tint: #F4FAFF; }

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

  .usage-item {
    flex-direction: row;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    text-align: left;
    font-size: 0.9375rem;
  }
}

/* =================================================================
   15. Bagian Alur kerja (Tahap 2)
   ================================================================ */

/* HP dan tablet: empat langkah bertumpuk, lingkaran nomor di kiri */
.workflow-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 50rem;
  margin: 0 auto;
}

.workflow-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

/* Garis pendek dari bawah lingkaran ke lingkaran langkah berikutnya */
.workflow-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 42px;
  bottom: -2rem;
  left: 20px;
  width: 2px;
  background-color: var(--color-border);
}

.workflow-number-wrap {
  flex-shrink: 0;
}

/* Oranye hanya untuk garis lingkaran */
.workflow-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--color-bg-main);
  border: 2px solid var(--color-accent);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
}

.workflow-content {
  flex: 1;
  min-width: 0;
  padding: 1.25rem;
  background-color: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.workflow-content h3 {
  font-size: 1.125rem;
  margin-bottom: 0.35rem;
}

.workflow-content p {
  font-size: 0.95rem;
}

/* Layar lebar: empat kolom sejajar, garis penghubung mendatar */
@media (min-width: 1024px) {
  .workflow-list {
    flex-direction: row;
    gap: 1.5rem;
    max-width: none;
  }

  .workflow-item {
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
  }

  .workflow-item:not(:last-child)::before {
    top: 23px;
    bottom: auto;
    left: calc(50% + 24px + 0.5rem);
    width: calc(100% + 1.5rem - 48px - 1rem);
    height: 2px;
  }

  .workflow-number-wrap {
    margin-bottom: 1rem;
  }

  .workflow-number {
    width: 48px;
    height: 48px;
  }

  .workflow-content {
    width: 100%;
  }
}

/* =================================================================
   16. Bagian Portofolio
   ================================================================ */

.portfolio-header {
  text-align: center;
  margin-bottom: 2rem;
}

.portfolio-header h2 {
  margin-bottom: 0.5rem;
}

.portfolio-filter {
  flex-wrap: wrap;
  overflow: visible;
  margin-bottom: 1.25rem;
  justify-content: center;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.portfolio-card {
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  overflow: hidden;
}

.portfolio-card[hidden] {
  display: none;
}

.portfolio-card .portfolio-placeholder {
  border: none;
  border-radius: 0;
  margin: -0.75rem -0.75rem 0.75rem -0.75rem;
  width: calc(100% + 1.5rem);
  aspect-ratio: 16/10;
}

.portfolio-icon {
  font-size: 2rem;
  color: var(--color-primary);
}

.portfolio-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 0.75rem;
}

.portfolio-card h3 {
  font-size: 0.9375rem;
  margin-bottom: 0.2rem;
  color: var(--color-primary);
}

.portfolio-url {
  font-size: 0.75rem;
  margin-bottom: 0.4rem;
}

.portfolio-desc {
  font-size: 0.8125rem;
  color: var(--color-text-main);
  line-height: 1.4;
}

.portfolio-footer {
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

.portfolio-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

.portfolio-link:hover,
.portfolio-link:focus {
  color: #8A4300;
}

.portfolio-link .material-symbols-outlined {
  font-size: 1rem;
}

@media (min-width: 768px) {
  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .portfolio-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =================================================================
   17. Bagian FAQ
   ================================================================ */

.faq-header {
  text-align: center;
  margin-bottom: 2rem;
}

.faq-header h2 {
  margin-bottom: 0.5rem;
}

.faq-list {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  padding: 0;
  overflow: hidden;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 1rem 1.25rem;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  list-style: none;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.faq-icon {
  flex-shrink: 0;
  color: var(--color-primary);
  transition: transform var(--transition-fast);
}

.faq-item[open] .faq-icon {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 1.25rem 1.25rem 1.25rem;
  border-top: 1px solid var(--color-border);
}

.faq-answer p {
  padding-top: 1rem;
  color: var(--color-text-main);
  font-size: 0.95rem;
}

/* =================================================================
   18. Bagian Testimoni dan Tentang
   ================================================================ */

.testimonial-header {
  text-align: center;
  margin-bottom: 2rem;
}

.testimonial-header h2 {
  margin-bottom: 0.5rem;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Kartu penanda (keadaan kosong): satu kartu di tengah */
.testimonial-placeholder {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 24rem;
  text-align: center;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* Ringkasan rating: tampil hanya kalau ada testimoni.
   HP: baris tengah di atas kartu. Desktop: panel kiri (lihat blok @media 1024px). */
.testimonial-layout {
  display: block;
}

.testimonial-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 2rem;
  text-align: center;
}

.testimonial-summary[hidden] {
  display: none;
}

.testimonial-source {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.testimonial-score {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-primary);
}

.testimonial-stars {
  font-size: 1rem;
  letter-spacing: 0.125rem;
  color: var(--color-accent);
}

.testimonial-summary-text {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* Kartu testimoni */
.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
}

.testimonial-text {
  flex: 1;
  font-size: 0.9375rem;
  line-height: 1.6;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.testimonial-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 600;
  color: #FFFFFF;
}

.testimonial-author-info {
  min-width: 0;
}

.testimonial-name {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-primary);
}

.testimonial-meta {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.testimonial-origin {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.testimonial-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.testimonial-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  margin-left: 0.375rem;
  padding: 0.0625rem 0.375rem;
  background-color: var(--color-bg-section-2);
  border-radius: 50px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-primary);
}

.testimonial-verified .material-symbols-outlined {
  font-size: 0.75rem;
}

.testimonial-quote-icon {
  font-size: 2.5rem;
  color: var(--color-accent);
}

.about-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.about-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

.about-photo {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  background-color: var(--color-bg-section-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

.about-person-icon {
  font-size: 5rem;
  color: var(--color-primary);
}

.about-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.about-body h3 {
  font-size: 1.25rem;
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 3rem;
  }

  .about-photo {
    flex: 1;
    max-width: none;
    margin: 0;
  }

  .about-body {
    flex: 2;
  }
}

/* =================================================================
   19. Pemilih paket (Susun paketmu) - 3 kontener paket
   ================================================================ */

.config {
  max-width: 72rem;
  margin: 0 auto;
}

.config-head {
  margin-bottom: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, #EAF1FC 0%, #E7F8F1 100%);
  border: 1px solid #D3E3F8;
  border-radius: var(--radius-lg);
}

.config-head h2 {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-primary);
  background-image: linear-gradient(90deg, #0B2A5B 0%, #2563EB 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.config-head p {
  margin-top: 0.375rem;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .config-head {
    padding: 1.5rem 1.75rem;
  }

  .config-head h2 {
    font-size: 2.125rem;
  }
}

.pkg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .pkg-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pkg {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  position: relative;
}

.pkg.is-featured {
  border: 2px solid var(--color-accent);
}

.pkg-top {
  padding: 1rem 1rem 0.5rem;
}

.pkg-top .badge {
  margin-bottom: 0.375rem;
}

.pkg-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-primary);
}

.pkg-desc {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.pkg-price {
  margin-top: 0.5rem;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

.config-block {
  padding: 0.75rem 1rem 0.25rem;
}

.config-title {
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-primary);
}

.config-note {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.config-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  margin-bottom: 0.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Aturan jumlah halaman */
.config-pages-label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-primary);
}

.config-rule-note {
  margin: -0.25rem 0 0.625rem;
}

.config-stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.config-count {
  min-width: 1.75rem;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
}

.config-step {
  width: 44px;
  height: 44px;
  padding: 0;
  background-color: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 1.25rem;
  color: var(--color-primary);
  cursor: pointer;
}

.config-step--plus {
  border-color: var(--color-accent);
}

.config-step:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Sudah termasuk */
.config-included {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--color-text-main);
}

.config-included li {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.config-included .material-symbols-outlined {
  font-size: 1rem;
  color: var(--color-accent);
}

/* Tambahan */
.config-addon {
  align-items: flex-start;
  justify-content: flex-start;
  cursor: pointer;
}

.config-addon input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-accent);
}

.config-addon-text {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-primary);
}

.config-addon-text .config-note {
  display: inline-block;
  margin-top: 0;
}

.config-addon-price {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-primary);
  white-space: nowrap;
}

/* Total */
.config-total {
  margin-top: auto;
  padding: 0.875rem 1rem;
  background-color: var(--color-bg-section-1);
  border-top: 1px solid var(--color-border);
}

.config-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.config-total-row .config-note {
  margin-top: 0;
  font-size: 0.8125rem;
}

.config-total-once {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--color-primary);
}

.config-total-month {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-primary);
}

.config-hint {
  margin-top: 0.5rem;
  padding: 0.5rem 0.625rem;
  background-color: var(--color-hover-bg);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  line-height: 1.5;
  color: #8A4300;
}

.config-hint[hidden] {
  display: none;
}

.config-msg-label {
  margin-top: 0.625rem;
}

.config-msg {
  margin: 0.25rem 0 0.75rem;
  padding: 0.5rem 0.625rem;
  background-color: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  line-height: 1.5;
}

.config-send {
  width: 100%;
}

/* =================================================================
   20. Foto di dalam bagian (diambil dari folder img/)
   Foto menutupi ikon sementara. Kalau file belum ada, ikon tetap terlihat.
   Nama file dan ukuran: lihat img/PETUNJUK.txt
   ================================================================ */
.portfolio-placeholder,
.about-photo {
  position: relative;
  overflow: hidden;
}

.portfolio-card {
  overflow: hidden;
}

.portfolio-shot,
.about-shot {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

.portfolio-shot--katabix { background-image: url("../img/portofolio/katabix.jpg"); }
.portfolio-shot--mumtaz-consulting { background-image: url("../img/portofolio/mumtaz-consulting.jpg"); }
.portfolio-shot--mumtaz-academy { background-image: url("../img/portofolio/mumtaz-academy.jpg"); }
.portfolio-shot--aplikasi-akuntansi { background-image: url("../img/portofolio/aplikasi-akuntansi.jpg"); }
.portfolio-shot--pasirbatu { background-image: url("../img/portofolio/pasirbatu.jpg"); }
.portfolio-shot--maduku { background-image: url("../img/portofolio/maduku.jpg"); }
.portfolio-shot--ahli-baja { background-image: url("../img/portofolio/ahli-baja.jpg"); }
.portfolio-shot--ahli-fiberglass { background-image: url("../img/portofolio/ahli-fiberglass.jpg"); }

.about-shot { background-image: url("../img/tentang/profil.png"), url("../img/tentang/foto-pemilik.jpg"); }

/* =================================================================
   21. Warna tiga kotak paket (Susun paketmu)
   Rintis = hijau, Tumbuh = biru, Khusus = ungu-indigo.
   Ganti warna cukup lewat tiga variabel per paket di bawah ini.
   ================================================================ */
.pkg[data-i="0"] { --pkg-a: #059669; --pkg-b: #065F46; --pkg-soft: #D1FAE5; --pkg-tint: #ECFDF5; --pkg-glow: rgba(5, 150, 105, 0.3); }
.pkg[data-i="1"] { --pkg-a: #2563EB; --pkg-b: #1E40AF; --pkg-soft: #DBEAFE; --pkg-tint: #EFF6FF; --pkg-glow: rgba(37, 99, 235, 0.3); }
.pkg[data-i="2"] { --pkg-a: #7C3AED; --pkg-b: #4338CA; --pkg-soft: #EDE9FE; --pkg-tint: #F5F3FF; --pkg-glow: rgba(124, 58, 237, 0.3); }

.pkg {
  border-color: var(--pkg-soft);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.pkg.is-featured {
  border: 2px solid var(--pkg-a);
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.2);
}

/* Hover: kotak terangkat, bayangan berwarna sesuai paket, garis tepi menyala */
.pkg:hover,
.pkg.is-featured:hover {
  transform: translateY(-6px);
  border-color: var(--pkg-a);
  box-shadow: 0 20px 44px var(--pkg-glow);
}

.pkg-top {
  position: relative;
  overflow: hidden;
  padding: 1.25rem 1.25rem 1.5rem;
  background-image: linear-gradient(135deg, var(--pkg-a) 0%, var(--pkg-b) 100%);
  background-size: 160% 160%;
  background-position: 0% 0%;
  transition: background-position 0.5s ease;
}

.pkg:hover .pkg-top {
  background-position: 100% 100%;
}

/* Lingkaran transparan sebagai hiasan di sudut kanan atas */
.pkg-top::after {
  content: "";
  position: absolute;
  top: -2.5rem;
  right: -2.5rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.14);
  pointer-events: none;
  transition: transform 0.5s ease;
}

.pkg:hover .pkg-top::after {
  transform: scale(1.3);
}

.pkg-top > * {
  position: relative;
  z-index: 1;
}

.pkg-top .badge {
  margin-bottom: 0.5rem;
  background-color: #FFFFFF;
  color: var(--pkg-b);
}

.pkg-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: #FFFFFF;
}

.pkg-desc {
  margin-top: 0.25rem;
  color: #FFFFFF;
}

.pkg-price {
  margin-top: 0.75rem;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  color: #FFFFFF;
}

.config-included .material-symbols-outlined {
  color: var(--pkg-a);
}

.config-step--plus {
  border-color: var(--pkg-a);
  color: var(--pkg-a);
}

.config-addon input {
  accent-color: var(--pkg-a);
}

.config-total {
  background-color: var(--pkg-tint);
  border-top: 1px solid var(--pkg-soft);
}

.config-total-once {
  font-weight: 700;
  color: var(--pkg-b);
}

.config-included-note {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

/* =================================================================
   22. Label "Paling dicari" di pojok kiri atas kartu + baris tambahan
   Label berada di luar kepala kartu, jadi judul Rintis, Tumbuh, dan
   Khusus sejajar. Kartu tidak lagi memotong isinya (overflow), sehingga
   sudut kepala dan bagian total dibulatkan sendiri di bawah ini.
   ================================================================= */
.pkg-grid {
  padding-top: 0.875rem;
}

.pkg-top {
  border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;
}

.config-total {
  border-radius: 0 0 calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px);
}

.pkg-flag {
  position: absolute;
  top: -12px;
  left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.25rem 0.6875rem 0.25rem 0.5rem;
  overflow: hidden;
  border-radius: 3px;
  background-image: linear-gradient(135deg, #D4610A 0%, #F28C28 100%);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  box-shadow: 0 3px 8px rgba(242, 140, 40, 0.35);
}

.pkg-flag svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  fill: #FFFFFF;
}

/* Kilau halus yang lewat sesekali */
.pkg-flag::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background-image: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  animation: pkgFlagShine 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pkgFlagShine {
  0%, 60% { left: -60%; }
  100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .pkg-flag::after {
    animation: none;
    display: none;
  }
}

/* Baris tambahan: judul dan harga sebaris, catatan memanjang di bawah judul */
.config-addon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 0.625rem;
  row-gap: 0.125rem;
  align-items: start;
  justify-content: normal;
}

.config-addon-title {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-primary);
}

.config-addon-note {
  grid-column: 2 / 4;
  margin-top: 0;
}

@media (min-width: 1024px) {
  /* Ada ringkasan: panel di kiri, kartu 2 kolom di kanan */
  .testimonial-layout.has-summary {
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: 1.5rem;
    align-items: start;
  }

  .testimonial-layout.has-summary .testimonial-summary {
    align-items: flex-start;
    margin-bottom: 0;
    padding: 1.5rem;
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-align: left;
  }

  .testimonial-layout.has-summary .testimonial-score {
    font-size: 3rem;
  }

  .testimonial-layout.has-summary .testimonial-stars {
    font-size: 1.25rem;
  }

  .testimonial-layout.has-summary .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Tanpa ringkasan (keadaan kosong): tetap satu kartu di tengah */
  .testimonial-layout:not(.has-summary) .testimonial-grid {
    grid-template-columns: 1fr;
  }
}


/* =================================================================
   23. Portofolio: efek kartu dan panel pratinjau "masuk botol"
   Dipakai bersama js/portfolio.js. Warna kategori dipasang per kartu
   lewat data-category: --c (utama), --t (tint), --g (bayangan).
   ================================================================= */
.portfolio-card[data-category="jasa"] {
  --c: #4F46E5;
  --t: #E0E7FF;
  --g: rgba(79, 70, 229, 0.3);
}

.portfolio-card[data-category="dagang"] {
  --c: #DB2777;
  --t: #FCE7F3;
  --g: rgba(219, 39, 119, 0.3);
}

.portfolio-card[data-category="produksi"] {
  --c: #0284C7;
  --t: #E0F2FE;
  --g: rgba(2, 132, 199, 0.3);
}

.portfolio-shot--pasir-keranggan {
  background-image: url("../img/portofolio/pasir-keranggan.jpg");
}

/* --- Kartu: garis atas, naik, bayangan berwarna --- */
.portfolio-card {
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.portfolio-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--c);
  z-index: 3;
  pointer-events: none;
}

.portfolio-card:hover,
.portfolio-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px var(--g);
  border-color: var(--c);
}

/* --- Foto kartu (sekarang tombol) --- */
.portfolio-media {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.portfolio-media:focus-visible {
  outline: 2px solid var(--c, var(--color-accent));
  outline-offset: -4px;
}

.portfolio-media .portfolio-shot {
  transition: transform 0.5s ease;
}

.portfolio-card:hover .portfolio-shot,
.portfolio-card:focus-within .portfolio-shot {
  transform: scale(1.05);
}

/* Layer hitam transparan di atas foto */
.portfolio-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 1;
  transition: opacity 0.35s ease;
  z-index: 1;
  pointer-events: none;
}

.portfolio-card:hover .portfolio-media::after,
.portfolio-card:focus-within .portfolio-media::after {
  opacity: 0;
}

/* Label kategori di pojok kiri atas foto */
.portfolio-media::before {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 3;
  padding: 0.2rem 0.5rem;
  background: var(--c);
  color: #FFFFFF;
  border-radius: 3px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  pointer-events: none;
}

.portfolio-card[data-category="jasa"] .portfolio-media::before { content: "Jasa"; }
.portfolio-card[data-category="dagang"] .portfolio-media::before { content: "Dagang"; }
.portfolio-card[data-category="produksi"] .portfolio-media::before { content: "Konstruksi"; }

/* Teks kecil "Lihat tampilan" di tengah foto */
.portfolio-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  padding: 0.3rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 3px;
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.portfolio-card:hover .portfolio-hint,
.portfolio-card:focus-within .portfolio-hint {
  opacity: 0;
}

/* --- Tautan dan chip filter mengikuti warna kategori --- */
.portfolio-card .portfolio-link {
  color: var(--c);
}

.portfolio-card .portfolio-link:hover,
.portfolio-card .portfolio-link:focus {
  color: #8A4300;
}

.filter-chip.active[data-filter="all"] { border-color: #0B2A5B; }
.filter-chip.active[data-filter="jasa"] { border-color: #4F46E5; }
.filter-chip.active[data-filter="dagang"] { border-color: #DB2777; }
.filter-chip.active[data-filter="produksi"] { border-color: #0284C7; }

.filter-chip.active[data-filter="jasa"]::before,
.filter-chip.active[data-filter="dagang"]::before,
.filter-chip.active[data-filter="produksi"]::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.filter-chip.active[data-filter="jasa"]::before { background: #4F46E5; }
.filter-chip.active[data-filter="dagang"]::before { background: #DB2777; }
.filter-chip.active[data-filter="produksi"]::before { background: #0284C7; }

/* --- Panel pratinjau: satu panel dipakai bersama semua kartu --- */
.pf-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pf-backdrop[hidden] {
  display: none;
}

.pf-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 42, 91, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pf-backdrop.pf-visible::before {
  opacity: 1;
}

.pf-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(92vw, 480px);
  height: min(86vh, 760px);
  background: var(--color-bg-main);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(11, 42, 91, 0.35);
  overflow: hidden;
  outline: none;
  will-change: transform, clip-path, opacity;
}

.pf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  background: var(--color-bg-main);
  border-bottom: 1px solid var(--color-border);
}

.pf-title-wrap {
  flex: 1;
  min-width: 0;
}

.pf-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-url {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-url:hover,
.pf-url:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

.pf-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.pf-visit {
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.pf-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.pf-close:hover {
  background: rgba(11, 42, 91, 0.08);
}

.pf-close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.pf-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--color-bg-section-1);
}

.pf-shot-full {
  display: block;
  width: 100%;
  height: auto;
}

.pf-loading,
.pf-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  padding: 1.5rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.pf-loading[hidden],
.pf-error[hidden] {
  display: none;
}

.pf-shot-full:not([src]) {
  display: none;
}

/* Fokus bekas klik tidak membuat kartu terus menyala */
.portfolio-card:focus-within:not(:hover):not(:has(:focus-visible)) {
  transform: none;
  box-shadow: none;
  border-color: var(--color-border);
}

.portfolio-card:focus-within:not(:hover):not(:has(:focus-visible)) .portfolio-media::after,
.portfolio-card:focus-within:not(:hover):not(:has(:focus-visible)) .portfolio-hint {
  opacity: 1;
}

.portfolio-card:focus-within:not(:hover):not(:has(:focus-visible)) .portfolio-shot {
  transform: none;
}

/* Layar sentuh: layer lebih tipis dan tidak ada efek naik */
@media (hover: none) {
  .portfolio-media::after {
    background: rgba(0, 0, 0, 0.28);
  }

  .portfolio-card:hover,
  .portfolio-card:focus-within {
    transform: none;
    box-shadow: var(--shadow-sm);
    border-color: var(--color-border);
  }

  .portfolio-card:hover .portfolio-shot,
  .portfolio-card:focus-within .portfolio-shot {
    transform: none;
  }

  .portfolio-card:hover .portfolio-media::after,
  .portfolio-card:focus-within .portfolio-media::after,
  .portfolio-card:hover .portfolio-hint,
  .portfolio-card:focus-within .portfolio-hint {
    opacity: 1;
  }
}

@media (max-width: 420px) {
  .pf-visit {
    padding: 0.5rem 0.75rem;
  }
}

/* Kurangi gerak: tanpa transisi dan tanpa efek naik, hanya fade singkat */
@media (prefers-reduced-motion: reduce) {
  .portfolio-card,
  .portfolio-media .portfolio-shot,
  .portfolio-media::after,
  .portfolio-hint {
    transition: none;
  }

  .portfolio-card:hover,
  .portfolio-card:focus-within {
    transform: none;
  }

  .portfolio-card:hover .portfolio-shot,
  .portfolio-card:focus-within .portfolio-shot {
    transform: none;
  }

  .pf-backdrop::before {
    transition: opacity 0.15s ease;
  }

  .pf-panel {
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .pf-backdrop.pf-visible .pf-panel {
    opacity: 1;
  }
}


/* =================================================================
   24. Alur kerja: lingkaran berwarna dan efek hover
   Tiap langkah punya warna sendiri: --wc (utama), --wc2 (pasangan
   gradasi), --wt (tint untuk cincin), --wg (bayangan), --wn (warna
   langkah berikutnya, untuk garis penghubung).
   ================================================================= */
.workflow-item:nth-child(1) {
  --wc: #4F46E5;
  --wc2: #7C3AED;
  --wt: #E0E7FF;
  --wg: rgba(79, 70, 229, 0.3);
  --wn: #9333EA;
}

.workflow-item:nth-child(2) {
  --wc: #9333EA;
  --wc2: #C026D3;
  --wt: #F3E8FF;
  --wg: rgba(147, 51, 234, 0.3);
  --wn: #DB2777;
}

.workflow-item:nth-child(3) {
  --wc: #DB2777;
  --wc2: #F43F5E;
  --wt: #FCE7F3;
  --wg: rgba(219, 39, 119, 0.3);
  --wn: #0284C7;
}

.workflow-item:nth-child(4) {
  --wc: #0284C7;
  --wc2: #06B6D4;
  --wt: #E0F2FE;
  --wg: rgba(2, 132, 199, 0.3);
  --wn: #0284C7;
}

/* Lingkaran angka: gradasi penuh, angka putih, cincin tint */
.workflow-number {
  background: linear-gradient(135deg, var(--wc), var(--wc2));
  border: 0;
  color: #FFFFFF;
  box-shadow: 0 0 0 4px var(--wt), 0 6px 14px var(--wg);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

/* Garis penghubung: gradasi dari warna langkah ini ke langkah berikutnya */
.workflow-item:not(:last-child)::before {
  background: linear-gradient(180deg, var(--wc), var(--wn));
  border-radius: 2px;
}

/* Kartu isi: garis atas berwarna, bayangan lembut saat hover */
.workflow-content {
  border-top: 3px solid var(--wc);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.workflow-content h3 {
  transition: color 0.3s ease;
}

.workflow-item:hover .workflow-content {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px var(--wg);
  border-color: var(--wc);
}

.workflow-item:hover .workflow-content h3 {
  color: var(--wc);
}

.workflow-item:hover .workflow-number {
  transform: scale(1.14) rotate(-6deg);
  box-shadow: 0 0 0 7px var(--wt), 0 10px 20px var(--wg);
}

@media (min-width: 1024px) {
  .workflow-item:not(:last-child)::before {
    background: linear-gradient(90deg, var(--wc), var(--wn));
  }
}

/* Layar sentuh: tanpa efek naik */
@media (hover: none) {
  .workflow-item:hover .workflow-content {
    transform: none;
    box-shadow: var(--shadow-sm);
  }

  .workflow-item:hover .workflow-number {
    transform: none;
    box-shadow: 0 0 0 4px var(--wt), 0 6px 14px var(--wg);
  }
}

/* Kurangi gerak: tanpa transisi dan tanpa efek naik */
@media (prefers-reduced-motion: reduce) {
  .workflow-number,
  .workflow-content,
  .workflow-content h3 {
    transition: none;
  }

  .workflow-item:hover .workflow-content,
  .workflow-item:hover .workflow-number {
    transform: none;
  }
}


/* =================================================================
   25. Formulir testimoni (kirim-testimoni.html)
   ================================================================= */
.tf-wrap {
  max-width: 36rem;
  margin: 0 auto;
}

.tf-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.tf-header h1 {
  margin-bottom: 0.5rem;
}

.tf-card,
.tf-sukses {
  padding: 1.5rem;
}

.tf-card[hidden],
.tf-sukses[hidden],
.tf-pesan[hidden] {
  display: none;
}

.tf-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0 0 1.125rem;
  padding: 0;
  border: 0;
  min-width: 0;
}

.tf-field label,
.tf-field legend {
  padding: 0;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-primary);
}

.tf-opsional {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.tf-field input[type="text"],
.tf-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.625rem 0.75rem;
  background-color: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem; /* 16px: mencegah layar HP memperbesar sendiri saat mengetik */
  color: var(--color-text-main);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tf-field textarea {
  resize: vertical;
  line-height: 1.5;
}

.tf-field input[type="text"]:focus,
.tf-field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-hover-bg);
}

.tf-hitung {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* Pilihan bintang: urutan di HTML 5 sampai 1, ditampilkan 1 sampai 5 */
.tf-stars {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.125rem;
}

.tf-stars input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.tf-stars label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  font-size: 2rem;
  line-height: 1;
  color: var(--color-border);
  cursor: pointer;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.tf-stars input:checked ~ label,
.tf-stars label:hover,
.tf-stars label:hover ~ label {
  color: var(--color-accent);
}

.tf-stars label:hover {
  transform: scale(1.1);
}

.tf-stars input:focus-visible + label {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.tf-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Kolom jebakan anti-bot: di luar layar, bukan display:none */
.tf-jebakan {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.tf-catatan {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.tf-pesan {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background-color: #FDE2E2;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  color: #8A1C1C;
}

.tf-kirim {
  width: 100%;
}

.tf-kirim:disabled {
  opacity: 0.7;
  cursor: wait;
}

.tf-sukses {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  outline: none;
}

.tf-sukses[hidden] {
  display: none;
}

.tf-sukses h2 {
  margin: 0;
}

.tf-sukses p {
  margin: 0 0 0.5rem;
}

.tf-sukses-ikon {
  font-size: 3rem;
  color: #16A34A;
}

@media (prefers-reduced-motion: reduce) {
  .tf-stars label,
  .tf-field input[type="text"],
  .tf-field textarea {
    transition: none;
  }

  .tf-stars label:hover {
    transform: none;
  }
}


/* =================================================================
   26. FAQ: kartu judul di kiri, daftar pertanyaan di kanan
   (menggantikan tampilan .faq-* lama; kelas lama tidak dipakai lagi)
   ================================================================= */
.fq-layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 2rem;
  align-items: start;
}

.fq-side {
  position: sticky;
  top: 6rem;
  padding: 2.5rem 2rem;
  background-color: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(11, 42, 91, 0.06);
}

.fq-tag {
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: 0.375rem 0.875rem;
  background-color: #E0E7FF;
  border: 1px solid #C7D2FE;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.71875rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #4F46E5;
}

.fq-title {
  margin-bottom: 0.875rem;
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  line-height: 1.22;
  letter-spacing: -0.5px;
  color: var(--color-primary);
}

.fq-sub {
  margin-bottom: 2rem;
  line-height: 1.7;
}

.fq-cta {
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border);
}

.fq-cta p {
  margin-bottom: 1rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary);
}

/* Daftar pertanyaan */
.fq-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.fq-item {
  background-color: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.fq-item:hover {
  border-color: #C7D2FE;
}

.fq-item[open] {
  border-color: #C7D2FE;
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.1);
}

.fq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 44px;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-primary);
  cursor: pointer;
  list-style: none;
}

.fq-question::-webkit-details-marker {
  display: none;
}

.fq-question:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.fq-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #E0E7FF;
  transition: transform 0.25s ease, background 0.25s ease;
}

.fq-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #4F46E5;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.fq-item[open] .fq-icon {
  transform: rotate(45deg);
  background: linear-gradient(135deg, #4F46E5, #9333EA);
}

.fq-item[open] .fq-icon svg {
  stroke: #FFFFFF;
}

.fq-answer {
  padding: 0 1.5rem 1.5rem;
  line-height: 1.75;
  color: var(--color-text-muted);
}

@media (max-width: 960px) {
  .fq-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .fq-side {
    position: static;
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .fq-question {
    padding: 1.125rem 1.125rem;
    font-size: 0.9375rem;
  }

  .fq-answer {
    padding: 0 1.125rem 1.25rem;
    font-size: 0.9375rem;
  }

  .fq-cta .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fq-item,
  .fq-icon {
    transition: none;
  }
}


/* =================================================================
   27. Footer gelap: ajakan, merek, navigasi, kontak
   (menggantikan tampilan .site-footer lama; kelas lama tidak dipakai lagi)
   ================================================================= */
.ft {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-primary);
  color: #C9D6EE;
}

/* Garis cahaya di tepi atas dan dua bercak warna di latar */
.ft-glow {
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #4F46E5, #9333EA, #DB2777, #0284C7, transparent);
}

.ft-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.ft-blob-1 {
  top: -120px;
  left: -80px;
  width: 400px;
  height: 400px;
  background: rgba(79, 70, 229, 0.28);
}

.ft-blob-2 {
  right: -60px;
  bottom: 0;
  width: 320px;
  height: 320px;
  background: rgba(219, 39, 119, 0.16);
}

.ft-inner {
  position: relative;
  z-index: 1;
}

.ft a {
  text-decoration: none;
}

/* Ajakan penutup */
.ft-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 4vw, 2.75rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ft-cta h2 {
  max-width: 28rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.25;
  color: #FFFFFF;
}

/* Merek dan kolom */
.ft-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.3fr 1.5fr;
  gap: 2rem clamp(2rem, 4vw, 3.5rem);
  padding: clamp(2rem, 4vw, 2.75rem) 0;
}

.ft-top--tanpa-ajakan {
  padding-top: clamp(2.5rem, 6vw, 3.5rem);
}

.ft-brand {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.ft-logo {
  width: fit-content;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}

.ft-logo::after {
  content: "";
  display: block;
  width: 2rem;
  height: 3px;
  margin-top: 0.4rem;
  border-radius: 2px;
  background: var(--color-accent);
}

.ft-tagline {
  max-width: 20rem;
  line-height: 1.7;
  color: #C9D6EE;
}

.ft-col {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ft-title {
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #FFFFFF;
}

.ft-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 36px;
  color: #C9D6EE;
  transition: color 0.18s ease;
}

.ft-link:hover {
  color: var(--color-accent);
}

.ft a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.ft-note {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: #9FB1D1;
}

.ft-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
  min-height: 44px;
  padding: 0.6875rem 1.125rem 0.6875rem 0.875rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ft-pill:hover {
  background: rgba(242, 140, 40, 0.12);
  border-color: rgba(242, 140, 40, 0.5);
  transform: translateY(-1px);
}

.ft-pill-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(37, 211, 102, 0.16);
  color: #25D366;
}

.ft-pill-ic svg {
  width: 18px;
  height: 18px;
}

.ft-pill-t {
  display: flex;
  flex-direction: column;
}

.ft-pill-l {
  font-size: 0.65625rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
  color: #9FB1D1;
}

.ft-pill-v {
  margin-top: 0.25rem;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #FFFFFF;
}

/* Baris bawah */
.ft-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem 1.5rem;
  padding: 1.25rem 0 5rem; /* ruang bawah agar tombol WhatsApp melayang tidak menutupi teks */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ft-copy {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #9FB1D1;
}

.ft-slogan {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  background: linear-gradient(135deg, #FDBA74, #F9A8D4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@media (max-width: 768px) {
  .ft-top {
    grid-template-columns: 1fr 1fr;
  }

  .ft-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .ft-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .ft-cta .btn {
    width: 100%;
    justify-content: center;
  }

  .ft-top {
    grid-template-columns: 1fr;
  }

  .ft-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ft-link,
  .ft-pill {
    transition: none;
  }

  .ft-pill:hover {
    transform: none;
  }
}

/* =================================================================
   28. Tombol WhatsApp seragam dengan "Lihat portofolio" (garis dan tulisan gradasi,
       saat disentuh terisi gradasi). Teks tombol dibungkus <span class="btn-label">.
   ================================================================= */
.btn-whatsapp {
  position: relative;
  background-color: transparent;
  border: 2px solid var(--color-indigo);
  color: var(--color-indigo);
}

.btn-whatsapp:hover,
.btn-whatsapp:focus-visible {
  background-color: transparent;
  background-image: var(--grad-brand);
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.28);
}

.btn-whatsapp .btn-label {
  background-image: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-whatsapp:hover .btn-label,
.btn-whatsapp:focus-visible .btn-label {
  background-image: none;
  -webkit-text-fill-color: #FFFFFF;
}

.btn-whatsapp:hover svg,
.btn-whatsapp:focus-visible svg {
  color: #FFFFFF;
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .btn-whatsapp {
    border-color: transparent;
  }

  .btn-whatsapp::before {
    content: "";
    position: absolute;
    inset: -2px;
    padding: 2px;
    border-radius: inherit;
    background-image: var(--grad-brand);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }
}

/* =================================================================
   29. Garis batas gradasi di tepi atas setiap bagian (seperti garis di atas footer)
   ================================================================= */
main > section + section {
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent 0%, #4F46E5 20%, #7C3AED 50%, #0284C7 80%, transparent 100%) 1;
}

/* =================================================================
   30. Harga di tablet: tetap dalam kotak, tidak selebar layar
   ================================================================= */
@media (min-width: 640px) and (max-width: 1023px) {
  .config,
  .notice {
    max-width: 38rem;
  }
}

/* =================================================================
   31. Bagian Tentang berwarna (selaras dengan bagian lain)
   ================================================================= */
#tentang {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #F7FAFE 0%, #EEF2FF 100%);
}

#tentang::before,
#tentang::after {
  content: "";
  position: absolute;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  pointer-events: none;
}

#tentang::before {
  top: -10rem;
  left: -9rem;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.10) 0%, transparent 68%);
}

#tentang::after {
  bottom: -11rem;
  right: -9rem;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.09) 0%, transparent 68%);
}

#tentang .container {
  position: relative;
  z-index: 1;
}

#tentang .about-photo {
  background: linear-gradient(135deg, #E0E7FF 0%, #EDE9FE 100%);
  border: 4px solid #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 30px rgba(79, 70, 229, 0.18);
}

#tentang .about-person-icon {
  color: var(--color-indigo);
}

#tentang .about-body {
  padding: 1.5rem;
  background-color: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-indigo);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(11, 42, 91, 0.06);
}

#tentang .about-body h3 {
  background-image: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =================================================================
   32. Footer bersama: alamat dan peta
   ================================================================= */
.ft-address {
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.65;
  color: #9FB1D1;
}

.ft-maplink {
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.ft-maplink .material-symbols-outlined {
  font-size: 1.125rem;
}

.ft-map iframe {
  display: block;
  width: 100%;
  height: 10rem;
  margin-top: 0.75rem;
  border: 0;
  border-radius: var(--radius-md);
}