/**
 * SOLARakyat Design System — sr-design-system.css
 *
 * Fondasi baru, berdampingan dengan CSS lama (tidak menggantikan apa pun).
 * Semua kelas memakai prefix "sr-" khusus untuk sistem ini supaya tidak
 * bertabrakan dengan nama kelas yang sudah dipakai halaman lama
 * (mis. .nav-logo, .btn-primary lama punya arti/style berbeda).
 *
 * Sumber warna oranye identitas: diambil langsung dari piksel dominan
 * public/images/logo.png dan public/images/favicon.png (lihat laporan),
 * BUKAN dari angka usulan di brief.
 */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* --- Warna: permukaan --- */
  --sr-color-bg: #FFFFFF;
  --sr-color-bg-secondary: #F7F6F2;
  --sr-color-bg-inverse: #20231F;

  /* --- Warna: teks --- */
  --sr-color-text: #20231F;
  --sr-color-text-secondary: #60665F;
  --sr-color-text-inverse: #FFFFFF;
  --sr-color-text-on-orange: #20231F; /* teks gelap di atas oranye identitas -- lihat laporan kontras */

  /* --- Warna: border --- */
  --sr-color-border: #E3E5DF;         /* pembatas dekoratif ringan (divider, kartu) */
  --sr-color-border-strong: #939490;  /* batas elemen interaktif: field, tombol outline -- lolos 3:1 */

  /* --- Warna: identitas oranye (dari aset logo resmi, lihat laporan) --- */
  --sr-color-orange: #F48C14;         /* identitas / permukaan tombol utama */
  --sr-color-orange-dark: #AE6108;    /* teks/link oranye di atas putih -- lolos AA 4.5:1 */
  --sr-color-orange-tint: #FDF2E5;    /* latar lembut beraksen oranye (badge, highlight) */

  /* --- Warna semantik (status) --- */
  --sr-color-success: #2E7D46;
  --sr-color-success-tint: #EAF5EE;
  --sr-color-warning: #9A6400;
  --sr-color-warning-tint: #FBF2E3;
  --sr-color-error: #C22B2B;
  --sr-color-error-tint: #FBEAEA;
  --sr-color-warning-ink: #FFFFFF;  /* teks di atas --sr-color-warning -- 5,03:1, lolos AA */
  --sr-color-error-ink: #FFFFFF;    /* teks di atas --sr-color-error   -- 5,73:1, lolos AA */

  /* --- Tipografi --- */
  --sr-font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sr-font-weight-regular: 400;
  --sr-font-weight-medium: 500;
  --sr-font-weight-semibold: 600;
  --sr-font-weight-bold: 700;

  --sr-text-hero: clamp(2.125rem, 1.6rem + 2.2vw, 4rem);   /* ~34px mobile -> 64px desktop */
  --sr-text-h1: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
  --sr-text-h2: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --sr-text-h3: 1.25rem;
  --sr-text-body-lg: 1.125rem;  /* 18px */
  --sr-text-body: 1rem;         /* 16px */
  --sr-text-sm: 0.875rem;
  --sr-text-xs: 0.75rem;
  --sr-line-height-heading: 1.15;
  --sr-line-height-body: 1.6;

  /* --- Spacing (skala 8px) --- */
  --sr-space-1: 0.25rem;  /* 4px  - setengah unit, dipakai jarang */
  --sr-space-2: 0.5rem;   /* 8px  */
  --sr-space-3: 0.75rem;  /* 12px */
  --sr-space-4: 1rem;     /* 16px */
  --sr-space-5: 1.5rem;   /* 24px */
  --sr-space-6: 2rem;     /* 32px */
  --sr-space-7: 3rem;     /* 48px */
  --sr-space-8: 4rem;     /* 64px */
  --sr-space-9: 6rem;     /* 96px */

  /* --- Radius --- */
  --sr-radius-sm: 6px;   /* tombol kecil */
  --sr-radius-md: 8px;   /* tombol standar, field */
  --sr-radius-lg: 12px;  /* kartu */
  --sr-radius-pill: 999px; /* filter pendek, badge */

  /* --- Border width --- */
  --sr-border-width: 1px;

  /* --- Shadow: HANYA untuk elemen mengambang (dropdown/modal), bukan kartu --- */
  --sr-shadow-elevated: 0 8px 24px -4px rgba(32, 35, 31, 0.16), 0 2px 8px -2px rgba(32, 35, 31, 0.08);

  /* --- Lebar konten --- */
  --sr-container-max: 1280px;
  --sr-container-article-max: 760px;

  /* --- Transisi --- */
  --sr-transition-fast: 120ms ease;
  --sr-transition-base: 200ms ease;

  /* --- Ikon --- */
  --sr-icon-size: 1.25rem;
  --sr-icon-stroke: 1.75;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sr-transition-fast: 0ms;
    --sr-transition-base: 0ms;
  }
}

/* ==========================================================================
   2. RESET RINGAN (dilingkupi .sr-scope supaya tidak bocor ke halaman lama)
   ========================================================================== */

.sr-scope {
  font-family: var(--sr-font-family);
  color: var(--sr-color-text);
  background: var(--sr-color-bg);
  line-height: var(--sr-line-height-body);
  -webkit-font-smoothing: antialiased;
  /* Jaring pengaman: cegah scroll horizontal kalau ada elemen nakal,
     di atas perbaikan akar penyebabnya masing-masing (bukan pengganti). */
  overflow-x: hidden;
}
/* Browser default <body> margin (biasanya 8px) adalah bug, bukan spasi
   yang disengaja -- halaman lain (mis. yang sudah punya class tambahan
   seperti sr-public-page) sudah kebetulan menang lawan margin ini,
   sementara beranda/artikel/video tidak, membuat posisi header
   berbeda-beda antar halaman. Nolkan di sini supaya konsisten di semua
   halaman yang memakai design system. */
body.sr-scope {
  margin: 0;
}

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

.sr-scope img,
.sr-scope svg {
  max-width: 100%;
  display: block;
}

/* Form control (button/input/select/textarea) TIDAK mewarisi font dari body
   di UA stylesheet browser manapun -- tanpa baris ini semuanya jatuh ke
   font default browser (sering "Arial") walau .sr-scope sudah set Manrope. */
.sr-scope button,
.sr-scope input,
.sr-scope select,
.sr-scope textarea {
  font-family: inherit;
}

.sr-scope :focus-visible {
  outline: 2px solid var(--sr-color-orange-dark);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .sr-scope *,
  .sr-scope *::before,
  .sr-scope *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   3. TIPOGRAFI
   ========================================================================== */

.sr-h1, .sr-h2, .sr-h3 {
  font-weight: var(--sr-font-weight-bold);
  line-height: var(--sr-line-height-heading);
  color: var(--sr-color-text);
  margin: 0 0 var(--sr-space-4);
}
.sr-intro-title { font-size: var(--sr-text-hero); font-weight: var(--sr-font-weight-bold); line-height: 1.08; color: var(--sr-color-text); margin: 0 0 var(--sr-space-4); }
.sr-h1 { font-size: var(--sr-text-h1); }
.sr-h2 { font-size: var(--sr-text-h2); }
.sr-h3 { font-size: var(--sr-text-h3); font-weight: var(--sr-font-weight-semibold); }
.sr-text-body-lg { font-size: var(--sr-text-body-lg); }
.sr-text-body { font-size: var(--sr-text-body); }
.sr-text-sm { font-size: var(--sr-text-sm); }
.sr-text-secondary { color: var(--sr-color-text-secondary); }
.sr-text-orange { color: var(--sr-color-orange-dark); } /* pakai varian gelap -- yang terang gagal kontras */

/* ==========================================================================
   4. LAYOUT / CONTAINER
   ========================================================================== */

.sr-wrap,
.sr-container {
  width: 100%;
  max-width: var(--sr-container-max);
  margin-inline: auto;
  padding-inline: var(--sr-space-5);
}
.sr-wrap--article,
.sr-container--article {
  max-width: var(--sr-container-article-max);
}
.sr-block {
  padding-block: var(--sr-space-8);
}

/* ==========================================================================
   5. IKON — satu gaya garis konsisten, tanpa emoji
   ========================================================================== */

.sr-icon {
  width: var(--sr-icon-size);
  height: var(--sr-icon-size);
  stroke: currentColor;
  stroke-width: var(--sr-icon-stroke);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ==========================================================================
   6. NAVBAR
   ========================================================================== */

/* Breakpoint tunggal untuk mode navbar mobile/hamburger.
   768px (lebar tablet potret) masuk mode hamburger juga -- 6 item menu teks
   + dropdown + CTA empiris tidak muat di 768px tanpa terasa sesak, jadi
   ambang dinaikkan ke 1024px, bukan 900px. */
:root { --sr-navbar-mobile-breakpoint: 1024px; }

.sr-navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--sr-color-bg);
  border-bottom: var(--sr-border-width) solid var(--sr-color-border);
}
.sr-navbar__inner {
  max-width: var(--sr-container-max);
  margin-inline: auto;
  padding-inline: var(--sr-space-5);
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sr-space-5);
}
.sr-navbar__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* Wordmark penuh (lebar, rasio ~7:1) -- dipakai di desktop saja. */
/* Selector img.sr-navbar__logo-full (bukan cuma .sr-navbar__logo-full) supaya
   spesifisitasnya menang lawan reset ".sr-scope img{display:block}" di atas
   -- ini akar bug pertama: .sr-scope img (0,1,1) mengalahkan kelas tunggal
   .sr-navbar__logo-mark{display:none} (0,1,0), jadi kedua logo sempat tampil
   bersamaan di semua lebar layar. */
.sr-navbar__logo img.sr-navbar__logo-full { height: 32px; width: auto; }
/* Lambang huruf tipografis "S" (Tahap 3, poin B1) -- BUKAN favicon.png lagi.
   Favicon adalah ikon tab, bukan logo, dan logo.png wordmark-nya tidak
   punya mark kompak terpisah untuk dipotong (murni teks bergaya, sudah
   dicek visual). Elemen <span>, bukan <img>, jadi tidak butuh trik
   spesifisitas img.* di atas -- reset ".sr-scope img" tidak menyentuhnya.
   44x44 (bukan 36x36) supaya jadi target sentuh yang layak (B4). */
.sr-navbar__logo-mark {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sr-color-orange);
  color: var(--sr-color-text-on-orange);
  align-items: center;
  justify-content: center;
  font-family: var(--sr-font-family);
  font-weight: var(--sr-font-weight-bold);
  font-size: 1.125rem;
  flex-shrink: 0;
}

.sr-navbar__nav { display: flex; }
.sr-navbar__links {
  display: flex;
  align-items: center;
  gap: var(--sr-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sr-navbar__link {
  /* Reset browser bawaan <button> -- tanpa baris ini tombol "Belajar"
     tampil sebagai kotak abu berbingkai UA, bukan tautan navigasi. */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin: 0;
  cursor: pointer;

  font-size: var(--sr-text-body);
  font-family: inherit;
  font-weight: var(--sr-font-weight-medium);
  color: var(--sr-color-text);
  text-decoration: none;
  padding-block: var(--sr-space-2);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--sr-space-1);
  transition: color var(--sr-transition-fast), border-color var(--sr-transition-fast);
}
.sr-navbar__link:hover,
.sr-navbar__link:focus-visible,
.sr-navbar__link[aria-current="page"],
.sr-navbar__link[aria-expanded="true"] {
  color: var(--sr-color-orange-dark);
  border-color: var(--sr-color-orange);
}
.sr-navbar__link:active { color: var(--sr-color-orange); }

.sr-navbar__dropdown { position: relative; }
.sr-navbar__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--sr-color-bg);
  border: var(--sr-border-width) solid var(--sr-color-border);
  border-radius: var(--sr-radius-md);
  box-shadow: var(--sr-shadow-elevated);
  padding: var(--sr-space-2);
  display: none;
  flex-direction: column;
  gap: 2px;
}
.sr-navbar__dropdown-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
/* Terbuka lewat hover (mouse), focus-within (Tab), ATAU data-open (JS,
   klik/Enter/Space -- lihat script sr-navbar.blade.php) supaya benar-benar
   bisa dibuka/ditutup/dioperasikan dari keyboard, bukan cuma hover. */
.sr-navbar__dropdown:hover .sr-navbar__dropdown-menu,
.sr-navbar__dropdown:focus-within .sr-navbar__dropdown-menu,
.sr-navbar__dropdown[data-open="true"] .sr-navbar__dropdown-menu {
  display: flex;
}
.sr-navbar__dropdown-item {
  display: block;
  padding: var(--sr-space-2) var(--sr-space-3);
  border-radius: var(--sr-radius-sm);
  color: var(--sr-color-text);
  text-decoration: none;
  font-size: var(--sr-text-sm);
  font-weight: var(--sr-font-weight-medium);
}
.sr-navbar__dropdown-item:hover { background: var(--sr-color-bg-secondary); color: var(--sr-color-orange-dark); }
.sr-navbar__dropdown-form { margin: 0; }
.sr-navbar__dropdown-button {
  display: block;
  width: 100%;
  padding: var(--sr-space-2) var(--sr-space-3);
  border: 0;
  border-radius: var(--sr-radius-sm);
  background: transparent;
  color: var(--sr-color-text);
  font: inherit;
  font-size: var(--sr-text-sm);
  font-weight: var(--sr-font-weight-medium);
  text-align: left;
  cursor: pointer;
}
.sr-navbar__dropdown-button:hover,
.sr-navbar__dropdown-button:focus-visible { background: var(--sr-color-bg-secondary); color: var(--sr-color-orange-dark); }

.sr-navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--sr-space-3);
  flex-shrink: 0;
}
.sr-navbar__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--sr-radius-md);
  color: var(--sr-color-text);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--sr-transition-fast);
}
.sr-navbar__icon-btn:hover { background: var(--sr-color-bg-secondary); }

/* Ikon khusus mobile (keranjang, akun) -- di desktop "Akun" sudah ada
   sebagai teks di .sr-navbar__links, jadi ikon ini disembunyikan di sana
   supaya tidak dobel. */
.sr-navbar__icon-btn--mobile-only { display: none; }

/* CTA di dalam bar navbar: HANYA tampil desktop. Di mobile, CTA yang sama
   dipindah ke dalam panel menu (lihat .sr-navbar__mobile-cta) sebagai
   tombol lebar penuh, bukan dipaksa muat di bar. */
/* .sr-navbar__actions .sr-navbar__cta--bar (dua kelas) supaya menang lawan
   .sr-btn{display:inline-flex} di komponen Button -- bug sama seperti logo:
   selector kelas tunggal kalah spesifisitas/urutan lawan rule komponen. */

.sr-navbar__hamburger { display: none; }

@media (max-width: 1024px) {
  .sr-navbar__logo img.sr-navbar__logo-full { display: none; }
  .sr-navbar__logo-mark { display: flex; }
  .sr-navbar__nav { display: none; }
  .sr-navbar__actions .sr-navbar__cta--bar { display: none; }
  .sr-navbar__icon-btn--mobile-only { display: inline-flex; }
  .sr-navbar__hamburger { display: inline-flex; }
}

/* ==========================================================================
   6b. MENU MOBILE (panel yang dibuka lewat hamburger)
   ========================================================================== */

.sr-navbar__mobile-menu {
  display: none;
  border-top: var(--sr-border-width) solid var(--sr-color-border);
  background: var(--sr-color-bg);
}
.sr-navbar__mobile-menu.is-open { display: block; }

.sr-navbar__mobile-menu-inner {
  padding: var(--sr-space-4) var(--sr-space-5) var(--sr-space-5);
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.sr-navbar__mobile-link {
  display: block;
  padding: var(--sr-space-3) var(--sr-space-2);
  font-size: var(--sr-text-body);
  font-weight: var(--sr-font-weight-medium);
  color: var(--sr-color-text);
  text-decoration: none;
  border-radius: var(--sr-radius-sm);
}
.sr-navbar__mobile-link:hover,
.sr-navbar__mobile-link:focus-visible {
  background: var(--sr-color-bg-secondary);
  color: var(--sr-color-orange-dark);
}
.sr-navbar__mobile-group-label {
  padding: var(--sr-space-3) var(--sr-space-2) var(--sr-space-1);
  font-size: var(--sr-text-sm);
  font-weight: var(--sr-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sr-color-text-secondary);
}
.sr-navbar__mobile-sublink { padding-inline-start: var(--sr-space-5); }
.sr-navbar__mobile-logout-form { margin: 0; }
.sr-navbar__mobile-button {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Selector dua-kelas (.sr-navbar__mobile-menu-inner .sr-navbar__mobile-cta)
   supaya menang lawan .sr-btn{display:inline-flex} -- pola bug yang sama
   dengan logo & CTA bar. Dalam praktiknya panel ini cuma bisa dibuka lewat
   hamburger yang sendirinya cuma tampil di mobile, jadi ini jaring pengaman
   konsistensi, bukan bug yang kelihatan di layar. */
.sr-navbar__mobile-menu-inner .sr-navbar__mobile-cta {
  display: none;
  width: 100%;
  margin-top: var(--sr-space-3);
  text-align: center;
}
@media (max-width: 1024px) {
  .sr-navbar__mobile-menu-inner .sr-navbar__mobile-cta { display: inline-flex; }
}

/* ==========================================================================
   7. FOOTER
   ========================================================================== */

.sr-footer {
  background: var(--sr-color-bg-secondary);
  border-top: var(--sr-border-width) solid var(--sr-color-border);
  margin-top: var(--sr-space-9);
}
.sr-footer__inner {
  max-width: var(--sr-container-max);
  margin-inline: auto;
  padding: var(--sr-space-8) var(--sr-space-5) var(--sr-space-6);
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--sr-space-6);
}
@media (max-width: 768px) {
  .sr-footer__inner { grid-template-columns: 1fr 1fr; }
}
.sr-footer__col-title {
  font-size: var(--sr-text-sm);
  font-weight: var(--sr-font-weight-semibold);
  color: var(--sr-color-text);
  margin-bottom: var(--sr-space-3);
}
.sr-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sr-footer__links a {
  color: var(--sr-color-text-secondary);
  text-decoration: none;
  font-size: var(--sr-text-sm);
  /* Target sentuh >=44px lewat padding (Tahap 4, poin A2), bukan
     memperbesar teks -- margin negatif kompensasi biar posisi visual
     kolom tidak ikut melebar, pola sama dengan .sr-see-all/.sr-journey__link. */
  display: inline-flex;
  align-items: center;
  padding: 12px 4px;
  margin: -12px -4px;
}
.sr-footer__links a:hover { color: var(--sr-color-orange-dark); }
/* Logo footer (Tahap 4, A2): dulu cuma <img height:28px> tanpa padding,
   area sentuhnya sama dengan tinggi gambar. */
.sr-footer__brand-link {
  display: inline-flex;
  align-items: center;
  padding-block: 8px;
  margin-block: -8px;
  min-height: 44px;
}
.sr-footer__bottom {
  max-width: var(--sr-container-max);
  margin-inline: auto;
  padding: var(--sr-space-5);
  border-top: var(--sr-border-width) solid var(--sr-color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sr-space-3);
  font-size: var(--sr-text-sm);
  color: var(--sr-color-text-secondary);
}

/* ==========================================================================
   8. BUTTON
   ========================================================================== */

.sr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sr-space-2);
  font-family: var(--sr-font-family);
  font-size: var(--sr-text-body);
  font-weight: var(--sr-font-weight-semibold);
  line-height: 1;
  padding: 0.75rem 1.25rem;
  min-height: 44px; /* target sentuh minimal 44px CSS -- line-height:1 di atas bikin tinggi asli cuma ~40px */
  border-radius: var(--sr-radius-md);
  border: var(--sr-border-width) solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--sr-transition-fast), border-color var(--sr-transition-fast), color var(--sr-transition-fast);
  white-space: nowrap;
}
.sr-btn:disabled, .sr-btn.is-disabled { opacity: 0.5; cursor: not-allowed; }

/* primary: latar oranye identitas, TEKS GELAP -- putih gagal kontras (2.44:1), gelap lolos (6.51:1) */
.sr-btn--primary {
  background: var(--sr-color-orange);
  color: var(--sr-color-text-on-orange);
}
.sr-btn--primary:hover:not(:disabled) { background: var(--sr-color-orange-dark); color: var(--sr-color-text-inverse); }

.sr-btn--outline {
  background: transparent;
  color: var(--sr-color-text);
  border-color: var(--sr-color-border-strong);
}
.sr-btn--outline:hover:not(:disabled) { border-color: var(--sr-color-orange-dark); color: var(--sr-color-orange-dark); }

.sr-btn--ghost {
  background: transparent;
  color: var(--sr-color-text);
}
.sr-btn--ghost:hover:not(:disabled) { background: var(--sr-color-bg-secondary); }

/* Varian outline untuk dipakai DI ATAS latar gelap (mis. .sr-calc-result) --
   .sr-btn--outline biasa pakai teks gelap, tidak terbaca di latar gelap. */
.sr-btn--outline-inverse {
  background: transparent;
  color: var(--sr-color-text-inverse);
  border-color: rgba(255, 255, 255, 0.35);
}
.sr-btn--outline-inverse:hover:not(:disabled) { border-color: var(--sr-color-orange); color: var(--sr-color-orange); }

.sr-btn--sm { padding: 0.5rem 0.875rem; min-height: 44px; font-size: var(--sr-text-sm); border-radius: var(--sr-radius-sm); }

/* ==========================================================================
   9. FORM FIELD
   ========================================================================== */

.sr-field { display: flex; flex-direction: column; gap: var(--sr-space-2); margin-bottom: var(--sr-space-4); }
.sr-field__label { font-size: var(--sr-text-sm); font-weight: var(--sr-font-weight-semibold); color: var(--sr-color-text); }
.sr-field__hint { font-size: var(--sr-text-sm); color: var(--sr-color-text-secondary); }
.sr-input, .sr-select, .sr-textarea {
  font-family: var(--sr-font-family);
  font-size: var(--sr-text-body);
  color: var(--sr-color-text);
  background: var(--sr-color-bg);
  border: var(--sr-border-width) solid var(--sr-color-border-strong);
  border-radius: var(--sr-radius-md);
  padding: 0.75rem 1rem;
  width: 100%;
  transition: border-color var(--sr-transition-fast), box-shadow var(--sr-transition-fast);
}
.sr-input:focus, .sr-select:focus, .sr-textarea:focus {
  outline: none;
  border-color: var(--sr-color-orange-dark);
  box-shadow: 0 0 0 3px var(--sr-color-orange-tint);
}
.sr-textarea { min-height: 120px; resize: vertical; }
.sr-field--error .sr-input,
.sr-field--error .sr-select,
.sr-field--error .sr-textarea { border-color: var(--sr-color-error); }
.sr-field__error { font-size: var(--sr-text-sm); color: var(--sr-color-error); }

/* ==========================================================================
   10. CARD
   ========================================================================== */

.sr-tile {
  background: var(--sr-color-bg);
  border: var(--sr-border-width) solid var(--sr-color-border);
  border-radius: var(--sr-radius-lg);
  padding: var(--sr-space-5);
  /* tanpa shadow -- sesuai brief, shadow hanya untuk dropdown/modal */
}
/* Dipakai lewat class (bukan style="" inline lagi, Tahap 3) -- inline
   style di HTML sebelumnya punya spesifisitas lebih tinggi dari
   .sr-hide-mobile-extra{display:none}, jadi kartu yang seharusnya
   disembunyikan di mobile (B6) tetap tampil. */
a.sr-tile {
  display: block;
  color: inherit;
  text-decoration: none;
}
.sr-tile__media { border-radius: var(--sr-radius-md); overflow: hidden; margin-bottom: var(--sr-space-4); aspect-ratio: 4/3; background: var(--sr-color-bg-secondary); }
.sr-tile__title { font-size: var(--sr-text-h3); font-weight: var(--sr-font-weight-semibold); margin: 0 0 var(--sr-space-2); }
.sr-tile__meta { font-size: var(--sr-text-sm); color: var(--sr-color-text-secondary); }

/* ==========================================================================
   11. BADGE
   ========================================================================== */

.sr-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sr-space-1);
  font-size: var(--sr-text-sm);
  font-weight: var(--sr-font-weight-semibold);
  padding: 0.25rem 0.625rem;
  border-radius: var(--sr-radius-pill);
  background: var(--sr-color-bg-secondary);
  color: var(--sr-color-text-secondary);
}
.sr-pill--orange { background: var(--sr-color-orange-tint); color: var(--sr-color-orange-dark); }
.sr-pill--success { background: var(--sr-color-success-tint); color: var(--sr-color-success); }
.sr-pill--warning { background: var(--sr-color-warning-tint); color: var(--sr-color-warning); }
.sr-pill--error { background: var(--sr-color-error-tint); color: var(--sr-color-error); }

/* ==========================================================================
   12. TABEL
   ========================================================================== */

/* Bungkus <table> dengan .sr-table-wrapper -- tabel lebar (banyak kolom)
   akan scroll horizontal di dalam kotaknya sendiri, bukan meluberkan
   seluruh halaman. */
.sr-table-wrapper { width: 100%; overflow-x: auto; }
.sr-table { width: 100%; border-collapse: collapse; font-size: var(--sr-text-sm); }
.sr-table th {
  text-align: left;
  font-weight: var(--sr-font-weight-semibold);
  color: var(--sr-color-text-secondary);
  padding: var(--sr-space-3) var(--sr-space-3);
  border-bottom: 2px solid var(--sr-color-border);
}
.sr-table td { padding: var(--sr-space-3); border-bottom: var(--sr-border-width) solid var(--sr-color-border); color: var(--sr-color-text); }
.sr-table tr:last-child td { border-bottom: none; }

/* ==========================================================================
   13. PAGINATION
   ========================================================================== */

.sr-pager { display: flex; align-items: center; gap: var(--sr-space-2); list-style: none; margin: 0; padding: 0; }
.sr-pager__item {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sr-radius-md);
  color: var(--sr-color-text);
  text-decoration: none;
  font-size: var(--sr-text-sm);
  font-weight: var(--sr-font-weight-medium);
  border: var(--sr-border-width) solid transparent;
}
.sr-pager__item:hover { border-color: var(--sr-color-border-strong); }
.sr-pager__item[aria-current="page"] { background: var(--sr-color-orange); color: var(--sr-color-text-on-orange); }
.sr-pager__item.is-disabled { color: var(--sr-color-text-secondary); opacity: 0.5; pointer-events: none; }

/* ==========================================================================
   14. EMPTY / LOADING / ERROR STATE
   ========================================================================== */

.sr-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sr-space-3);
  padding: var(--sr-space-8) var(--sr-space-5);
  color: var(--sr-color-text-secondary);
}
.sr-state__icon { width: 40px; height: 40px; color: var(--sr-color-text-secondary); }
.sr-state__title { font-size: var(--sr-text-body-lg); font-weight: var(--sr-font-weight-semibold); color: var(--sr-color-text); }
.sr-state--error .sr-state__icon { color: var(--sr-color-error); }

.sr-skeleton {
  background: linear-gradient(90deg, var(--sr-color-bg-secondary) 25%, #EFEEE9 37%, var(--sr-color-bg-secondary) 63%);
  background-size: 400% 100%;
  border-radius: var(--sr-radius-md);
  animation: sr-skeleton-shimmer 1.4s ease infinite;
}
@keyframes sr-skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .sr-skeleton { animation: none; background: var(--sr-color-bg-secondary); }
}

/* ==========================================================================
   15. MODAL / DROPDOWN — satu-satunya tempat shadow dipakai
   ========================================================================== */

.sr-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(32, 35, 31, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sr-space-5);
  z-index: 100;
}
.sr-modal {
  background: var(--sr-color-bg);
  border-radius: var(--sr-radius-lg);
  box-shadow: var(--sr-shadow-elevated);
  max-width: 480px;
  width: 100%;
  padding: var(--sr-space-6);
}

/* ==========================================================================
   16. BERANDA (home) -- dipakai pertama kali oleh resources/views/public/home.blade.php
   ========================================================================== */

/* --- Grid 3 kolom umum: produk / artikel / video, 1 kolom di mobile --- */
.sr-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sr-space-5);
}
@media (max-width: 860px) {
  .sr-grid-3 { grid-template-columns: 1fr; }
}

/* --- Kartu produk/artikel: media + footer harga+tombol yang tidak tumpang tindih --- */
.sr-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.sr-tile__media-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--sr-color-text-secondary);
  font-size: 1.5rem;
}
/* Tahap 4, poin A1: dulu row (space-between) meluber di kartu sempit
   (grid 2 kolom /shop di 390px, konten cuma ~109px) karena harga+tombol
   dipaksa satu baris. Ditumpuk vertikal supaya TIDAK PERNAH overflow
   horizontal berapa pun sempit kartunya, bukan cuma di breakpoint tertentu. */
.sr-tile__footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sr-space-2);
  margin-top: var(--sr-space-3);
}
.sr-tile__footer .sr-btn { width: 100%; }
.sr-tile__price {
  font-weight: var(--sr-font-weight-bold);
  font-size: var(--sr-text-body);
}

/* --- Section header umum: judul + link "lihat semua" --- */
.sr-block-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sr-space-4);
  margin-bottom: var(--sr-space-6);
  flex-wrap: wrap;
}
.sr-block-header .sr-see-all {
  font-size: var(--sr-text-sm);
  font-weight: var(--sr-font-weight-semibold);
  color: var(--sr-color-orange-dark);
  text-decoration: none;
  white-space: nowrap;
  /* Target sentuh >=44px lewat padding, bukan memperbesar teks (B4,
     Tahap 3) -- margin negatif menyeimbangkan supaya layout di sekitarnya
     tidak ikut bergeser secara visual. */
  display: inline-flex;
  align-items: center;
  padding: 12px 4px;
  margin: -12px -4px;
}
.sr-block-header .sr-see-all:hover { text-decoration: underline; }
/* Judul seksi tidak boleh terpotong batas seksi di mobile -- overflow-wrap
   jaga-jaga untuk judul panjang, dan section header boleh pindah baris
   (flex-wrap di atas) alih-alih dipaksa satu baris. */
.sr-block-header .sr-h2 { overflow-wrap: break-word; max-width: 100%; }

/* --- Hero: satu pesan, satu CTA dominan, tanpa dekorasi matahari/orb --- */
.sr-intro {
  padding-block: var(--sr-space-6) var(--sr-space-5);
}
.sr-intro__inner { max-width: 760px; }
.sr-intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sr-space-3);
  margin-top: var(--sr-space-5);
}

/* Anchor CTA beranda berhenti di bawah navbar, bukan tertutup olehnya. */
#section-kalkulator { scroll-margin-top: 84px; }

/* --- Alur produk: langkah berurutan, bukan kartu setara --- */
/* Mobile (default): tetap berurutan (satu kolom), tapi lebih ringkas dari
   versi pertama -- padding & jarak dikurangi, bukan cuma dikecilkan sedikit.
   Desktop (>=900px): grid 4 kolom sejajar supaya blok ini tidak makan
   beberapa layar sebelum kalkulator terlihat. */
.sr-journey {
  counter-reset: sr-step;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 900px) {
  .sr-journey {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sr-space-5);
  }
}
.sr-journey__step {
  display: flex;
  gap: var(--sr-space-3);
  padding-block: var(--sr-space-3);
  border-top: var(--sr-border-width) solid var(--sr-color-border);
}
@media (min-width: 900px) {
  .sr-journey__step {
    flex-direction: column;
    gap: var(--sr-space-2);
    padding-block: 0;
    border-top: none;
  }
}
.sr-journey__step:last-child { padding-bottom: 0; }
.sr-journey__num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sr-color-bg-secondary);
  color: var(--sr-color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--sr-font-weight-bold);
  font-size: var(--sr-text-sm);
}
.sr-journey__body { flex: 1; min-width: 0; }
.sr-journey__title { font-size: var(--sr-text-body-lg); font-weight: var(--sr-font-weight-semibold); margin: var(--sr-space-2) 0 var(--sr-space-1); }
@media (min-width: 900px) {
  .sr-journey__step { flex-direction: row; align-items: flex-start; }
  .sr-journey__title { margin-top: 0; }
}
.sr-journey__link {
  font-size: var(--sr-text-sm);
  font-weight: var(--sr-font-weight-semibold);
  color: var(--sr-color-orange-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  /* Target sentuh >=44px lewat padding (B4, Tahap 3), margin negatif
     kompensasi supaya posisi visual sama seperti sebelumnya. */
  padding: 12px 4px;
  margin: calc(var(--sr-space-2) - 12px) -4px -12px;
}
.sr-journey__link:hover { text-decoration: underline; }

/* --- Pratinjau kalkulator: 2 kolom desktop, 1 kolom penuh di bawah 900px --- */
.sr-calc-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sr-space-6);
  align-items: start;
}
@media (max-width: 900px) {
  .sr-calc-preview { grid-template-columns: 1fr; }
}
.sr-calc-preview__panel {
  background: var(--sr-color-bg);
  border: var(--sr-border-width) solid var(--sr-color-border);
  border-radius: var(--sr-radius-lg);
  padding: var(--sr-space-6);
}
.sr-calc-result {
  background: var(--sr-color-bg-inverse);
  color: var(--sr-color-text-inverse);
  border-radius: var(--sr-radius-lg);
  padding: var(--sr-space-6);
}
.sr-calc-result__row { padding-block: var(--sr-space-3); border-bottom: 1px solid rgba(255,255,255,0.12); }
.sr-calc-result__row:last-of-type { border-bottom: none; }
.sr-calc-result__label { font-size: var(--sr-text-sm); color: rgba(255,255,255,0.6); margin-bottom: var(--sr-space-1); }
.sr-calc-result__value { font-size: var(--sr-text-h3); font-weight: var(--sr-font-weight-bold); }
.sr-calc-placeholder {
  background: var(--sr-color-bg-secondary);
  border: 1.5px dashed var(--sr-color-border-strong);
  border-radius: var(--sr-radius-lg);
  padding: var(--sr-space-7) var(--sr-space-5);
  text-align: center;
  color: var(--sr-color-text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}

/* --- Video: thumbnail rasio 16:9, tombol putar --- */
.sr-video-card__thumb {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--sr-radius-md);
  overflow: hidden;
  background: var(--sr-color-bg-inverse);
  cursor: pointer;
  margin-bottom: var(--sr-space-3);
}
.sr-video-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-video-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(32,35,31,0.25);
}
.sr-video-card__play-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  color: var(--sr-color-text);
}
.sr-video-card__thumb iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- Penutup CTA --- */
.sr-closing-cta {
  text-align: center;
  padding-block: var(--sr-space-8);
  border-top: var(--sr-border-width) solid var(--sr-color-border);
}
.sr-closing-cta__actions {
  display: flex;
  justify-content: center;
  gap: var(--sr-space-3);
  flex-wrap: wrap;
  margin-top: var(--sr-space-5);
}

/* --- Toast notifikasi ringan (dipakai tombol tambah keranjang) --- */
.sr-toast-container {
  position: fixed;
  bottom: var(--sr-space-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--sr-space-2);
  width: min(360px, calc(100vw - 2 * var(--sr-space-5)));
}
.sr-toast {
  background: var(--sr-color-bg-inverse);
  color: var(--sr-color-text-inverse);
  border-radius: var(--sr-radius-md);
  padding: var(--sr-space-3) var(--sr-space-4);
  font-size: var(--sr-text-sm);
  box-shadow: var(--sr-shadow-elevated);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sr-space-3);
}
.sr-toast__action {
  color: var(--sr-color-orange);
  font-weight: var(--sr-font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.sr-toast__action:hover { text-decoration: underline; }

/* ==========================================================================
   17. TAHAP 2 -- catatan konteks, asumsi kalkulator, deskripsi kartu
   ========================================================================== */

/* Baris kecil di dekat tombol yang menuju halaman ber-login, menjelaskan
   kenapa perlu akun (B2) -- bukan tombol, cuma teks penjelas tenang. */
.sr-inline-note {
  /* Tahap 4, poin A3: ini kalimat penjelas yang harus dibaca (kenapa perlu
     akun), bukan label/eyebrow/tanggal -- jadi ukurannya ikut aturan teks
     isi (>=16px), bukan --sr-text-sm lagi. */
  font-size: var(--sr-text-body);
  color: var(--sr-color-text-secondary);
  margin-top: var(--sr-space-2);
}

/* Ajakan simpan hasil setelah kalkulator dihitung (B2) */
.sr-save-prompt {
  margin-top: var(--sr-space-4);
  padding-top: var(--sr-space-4);
  border-top: 1px solid rgba(255,255,255,0.14);
}
.sr-save-prompt p { color: rgba(255,255,255,0.75); margin-bottom: var(--sr-space-3); }

/* Daftar asumsi perhitungan kalkulator (B5) */
.sr-assumptions {
  margin-top: var(--sr-space-4);
  padding-top: var(--sr-space-4);
  border-top: 1px solid var(--sr-color-border);
}
.sr-assumptions__title {
  font-size: var(--sr-text-sm);
  font-weight: var(--sr-font-weight-semibold);
  margin-bottom: var(--sr-space-2);
}
.sr-assumptions ul {
  list-style: disc;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: var(--sr-space-1);
}
.sr-assumptions li { font-size: var(--sr-text-sm); color: var(--sr-color-text-secondary); }

/* Pesan error inline form kalkulator (bukan alert() browser) */
.sr-calc-error {
  display: none;
  background: var(--sr-color-error-tint);
  color: var(--sr-color-error);
  border-radius: var(--sr-radius-md);
  padding: var(--sr-space-3) var(--sr-space-4);
  font-size: var(--sr-text-sm);
  margin-top: var(--sr-space-3);
}
.sr-calc-error.is-visible { display: block; }

/* Deskripsi singkat di kartu produk (B10). Tahap 4 poin A3: deskripsi ini
   bukan eyebrow/badge/tanggal/label -- teks yang harus dibaca untuk paham
   produknya, jadi dinaikkan ke ukuran isi (>=16px), tetap diklem 2 baris
   supaya kartu tidak melar. */
.sr-tile__desc {
  font-size: var(--sr-text-body);
  color: var(--sr-color-text-secondary);
  margin: var(--sr-space-2) 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Grid 4 kolom (dipakai blok "Mulai dari sini", B6) -- 1 kolom mobile,
   2 kolom tablet, 4 kolom desktop supaya tidak ada kartu menggantung. */
.sr-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sr-space-5);
}
@media (max-width: 900px) {
  .sr-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sr-grid-4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   18. TAHAP 3 -- kepadatan mobile, target sentuh tambahan
   ========================================================================== */

/* Sembunyikan 2 kartu terakhir di mobile pada blok yang memakai .sr-grid-4
   (dipakai "Mulai dari sini", B6) supaya beranda tidak makin panjang --
   tetap ada di markup (bukan dihapus) untuk desktop & SEO/aksesibilitas. */
@media (max-width: 560px) {
  /* a.sr-hide-mobile-extra (bukan cuma .sr-hide-mobile-extra) supaya
     spesifisitasnya menang lawan "a.sr-tile{display:block}" -- pola bug
     yang sama seperti kasus logo navbar dulu (kelas tunggal kalah lawan
     selector tag+kelas). */
  a.sr-hide-mobile-extra { display: none; }
}

/* ==========================================================================
   19. TAHAP 3 -- /shop (katalog)
   ========================================================================== */

.sr-product-tile__eyebrow { text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.sr-product-tile__badge {
  position: absolute;
  top: var(--sr-space-2);
  left: var(--sr-space-2);
}
.sr-tile__media { position: relative; }

/* Tahap 4, poin B1 + B4: dulu gambar cuma ~80px tinggi di kartu sempit
   (2 kolom /shop, 390px) sementara judul sampai 5 baris -- proporsi
   terbalik. Rasio kotak (1:1, lebih besar dari 4:3 sebelumnya) menjadikan
   gambar elemen utama, judul diklem maksimal 2 baris (nama lengkap tetap
   ada di atribut title + halaman detail, database tidak disentuh).

   Sekaligus poin B4: 13/13 foto produk punya bingkai oranye + watermark
   yang menyatu di file gambarnya (tidak diedit, dilaporkan terpisah di
   docs/aset-gambar-produk.md). object-fit:contain (bukan cover) di atas
   latar putih + border netral supaya SELURUH isi file terlihat apa adanya
   di dalam bingkai netral kami sendiri -- bingkai oranye bawaan file jadi
   terlihat sebagai bagian foto yang perlu diganti, bukan aksen desain kartu. */
.sr-product-tile .sr-tile__media {
  aspect-ratio: 1 / 1;
  background: #ffffff;
  border: var(--sr-border-width) solid var(--sr-color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sr-space-3);
}
.sr-product-tile .sr-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sr-product-tile .sr-tile__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Layout: sidebar filter (desktop) + konten --- */
.sr-shop-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--sr-space-6);
  align-items: start;
}
@media (max-width: 900px) {
  .sr-shop-layout {
    grid-template-columns: minmax(0, 1fr);
    /* Tahap 4, poin B3: di mobile <aside> filter yang tertutup tidak
       berisi apa-apa secara visual, tapi grid-gap (32px) tetap ditambahkan
       di antara baris grid-nya -- jarak kosong yang tidak perlu. Dipersempit
       supaya produk pertama lebih dekat ke judul halaman. */
    gap: var(--sr-space-3);
  }
}

/* --- Tombol buka panel filter, cuma tampil di mobile --- */
.sr-shop-filter-toggle {
  display: none;
  width: 100%;
  justify-content: space-between;
  margin-bottom: var(--sr-space-4);
}
@media (max-width: 900px) {
  .sr-shop-filter-toggle { display: inline-flex; }
}

/* --- Panel filter: selalu tampil desktop, panel collapsible di mobile --- */
.sr-shop-filter {
  display: flex;
  flex-direction: column;
  gap: var(--sr-space-5);
}
@media (max-width: 900px) {
  .sr-shop-filter { display: none; }
  .sr-shop-filter.is-open { display: flex; }
}
.sr-shop-filter__group {
  border: var(--sr-border-width) solid var(--sr-color-border);
  border-radius: var(--sr-radius-lg);
  padding: var(--sr-space-4);
}
.sr-shop-filter__title { font-size: var(--sr-text-body); font-weight: var(--sr-font-weight-semibold); margin-bottom: var(--sr-space-3); }
.sr-shop-filter__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sr-space-2);
  padding: var(--sr-space-2) 0;
  font-size: var(--sr-text-body);
  cursor: pointer;
  min-height: 44px;
}
.sr-shop-filter__option input { width: 18px; height: 18px; flex-shrink: 0; }
.sr-shop-filter__option small { color: var(--sr-color-text-secondary); font-size: var(--sr-text-sm); }
.sr-shop-filter__badges { display: flex; flex-wrap: wrap; gap: var(--sr-space-2); }
.sr-shop-filter__badge-option {
  border: var(--sr-border-width) solid var(--sr-color-border-strong);
  border-radius: var(--sr-radius-pill);
  padding: var(--sr-space-2) var(--sr-space-4);
  font-size: var(--sr-text-sm);
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.sr-shop-filter__badge-option input { display: none; }
.sr-shop-filter__badge-option.is-active { border-color: var(--sr-color-orange); background: var(--sr-color-orange-tint); color: var(--sr-color-orange-dark); }

/* --- Toolbar hasil + urutkan --- */
.sr-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sr-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--sr-space-5);
}

/* --- Grid produk: 2 kolom di bawah 768px (C6), lebih banyak di atasnya --- */
.sr-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sr-space-5);
}
@media (max-width: 900px) {
  .sr-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .sr-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sr-space-3); }
}

/* ==========================================================================
   20. TAHAP 4 -- utilitas target sentuh, header halaman ringkas,
   filter kategori scroll, badan artikel, modal video, halaman kontak
   ========================================================================== */

/* --- Tautan teks kecil yang perlu jadi target sentuh >=44px tanpa
   memperbesar teksnya (A2) -- pola sama seperti .sr-see-all/.sr-journey__link,
   dipakai untuk tautan tunggal di luar konteks itu (mis. "Buka kalkulator
   lengkap" di pratinjau kalkulator beranda). */
.sr-tap-link {
  display: inline-flex;
  align-items: center;
  padding: 12px 4px;
  margin: -12px -4px;
}

/* --- Header halaman ringkas (katalog/listing) -- padding jauh lebih
   sempit dari .sr-intro (yang memang didesain untuk hero beranda), supaya
   jarak ke konten pertama tidak melebar tanpa alasan (B3, dipakai juga
   oleh /artikel, /video, /kontak lewat C1). Tetap pakai .sr-intro-title /
   .sr-intro__inner untuk tipografi supaya konsisten dengan beranda. */
.sr-intro--compact { padding-block: var(--sr-space-6) var(--sr-space-4); }

/* --- Baris filter kategori yang bisa lebih panjang dari layar (C3):
   scroll horizontal di dalam wadahnya sendiri (bukan meluber ke halaman),
   dengan scrollbar tipis yang selalu terlihat + fade di tepi kanan sebagai
   indikasi ada lanjutannya. */
.sr-chip-row {
  display: flex;
  gap: var(--sr-space-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-block: var(--sr-space-1) var(--sr-space-3);
  scrollbar-width: thin;
  scrollbar-color: var(--sr-color-border-strong) transparent;
  mask-image: linear-gradient(to right, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 94%, transparent 100%);
}
.sr-chip-row::-webkit-scrollbar { height: 6px; }
.sr-chip-row::-webkit-scrollbar-thumb { background: var(--sr-color-border-strong); border-radius: var(--sr-radius-pill); }
.sr-chip-row::-webkit-scrollbar-track { background: transparent; }
.sr-chip {
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sr-space-4);
  border: var(--sr-border-width) solid var(--sr-color-border-strong);
  border-radius: var(--sr-radius-pill);
  font-size: var(--sr-text-sm);
  font-weight: var(--sr-font-weight-medium);
  color: var(--sr-color-text);
  text-decoration: none;
  background: var(--sr-color-bg);
}
.sr-chip:hover { border-color: var(--sr-color-orange); }
.sr-chip.is-active {
  border-color: var(--sr-color-orange);
  background: var(--sr-color-orange-tint);
  color: var(--sr-color-orange-dark);
  font-weight: var(--sr-font-weight-semibold);
}

/* --- Layout konten + sidebar generik (artikel), sidebar pindah ke bawah
   di mobile (bukan panel collapsible -- ini konten pelengkap, bukan filter,
   jadi selalu tampil, tidak perlu disembunyikan seperti .sr-shop-layout). --*/
.sr-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sr-space-6);
  align-items: start;
}
@media (max-width: 900px) {
  .sr-content-layout { grid-template-columns: minmax(0, 1fr); }
}
.sr-sidebar-card {
  border: var(--sr-border-width) solid var(--sr-color-border);
  border-radius: var(--sr-radius-lg);
  padding: var(--sr-space-5);
  margin-bottom: var(--sr-space-5);
}
.sr-sidebar-card__title { font-weight: var(--sr-font-weight-semibold); margin-bottom: var(--sr-space-4); }
.sr-popular-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sr-space-3);
  padding-block: var(--sr-space-3);
  border-bottom: var(--sr-border-width) solid var(--sr-color-border);
  text-decoration: none;
  color: inherit;
}
.sr-popular-item:last-child { border-bottom: 0; }
.sr-popular-item__num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sr-color-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sr-text-sm);
  font-weight: var(--sr-font-weight-semibold);
}
.sr-popular-item__title { font-weight: var(--sr-font-weight-medium); display: block; }
.sr-tag-cloud { display: flex; flex-wrap: wrap; gap: var(--sr-space-2); }
.sr-tag-cloud a {
  padding: var(--sr-space-2) var(--sr-space-3);
  border-radius: var(--sr-radius-pill);
  background: var(--sr-color-bg-secondary);
  color: var(--sr-color-text);
  font-size: var(--sr-text-sm);
  text-decoration: none;
}
.sr-tag-cloud a:hover { color: var(--sr-color-orange-dark); }

/* --- Featured article (index /artikel) -- kartu lebih besar di atas grid --- */
.sr-featured-article { margin-bottom: var(--sr-space-6); }
.sr-featured-article .sr-tile__media { aspect-ratio: 21 / 9; }
@media (min-width: 768px) {
  .sr-featured-article .sr-tile__title { font-size: var(--sr-text-h2); }
}

/* --- Kotak pencarian generik (artikel/video), konsisten dgn .sr-input --- */
.sr-search-box {
  display: flex;
  align-items: center;
  gap: var(--sr-space-2);
  border: var(--sr-border-width) solid var(--sr-color-border-strong);
  border-radius: var(--sr-radius-md);
  padding-inline: var(--sr-space-4);
  background: var(--sr-color-bg);
}
.sr-search-box input {
  border: 0;
  background: transparent;
  padding-block: 0.75rem;
  font-family: var(--sr-font-family);
  font-size: var(--sr-text-body);
  color: var(--sr-color-text);
  width: 100%;
  min-width: 0;
}
.sr-search-box input:focus { outline: none; }
.sr-search-box svg { flex-shrink: 0; color: var(--sr-color-text-secondary); }

/* --- Badan artikel (C4): font sans (ikut sistem, bukan serif lagi),
   lebar baca ~70ch, >=16px mobile / >=18px desktop. */
.sr-article-body {
  font-size: var(--sr-text-body);
  line-height: 1.75;
  max-width: 70ch;
  color: var(--sr-color-text);
}
@media (min-width: 768px) {
  .sr-article-body { font-size: var(--sr-text-body-lg); }
}
.sr-article-body p { margin: 0 0 1.2em; }
.sr-article-body h2, .sr-article-body h3, .sr-article-body h4 {
  font-weight: var(--sr-font-weight-bold);
  line-height: var(--sr-line-height-heading);
  margin: 1.6em 0 0.6em;
}
.sr-article-body h2 { font-size: var(--sr-text-h3); }
.sr-article-body h3 { font-size: 1.0625rem; }
.sr-article-body h4 { font-size: var(--sr-text-body); }
.sr-article-body ul, .sr-article-body ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.sr-article-body li { margin: 0.4em 0; }
.sr-article-body blockquote {
  margin: 1.5em 0;
  padding: var(--sr-space-4) var(--sr-space-5);
  border-left: 3px solid var(--sr-color-orange);
  background: var(--sr-color-orange-tint);
  border-radius: 0 var(--sr-radius-md) var(--sr-radius-md) 0;
}
.sr-article-body img { border-radius: var(--sr-radius-md); margin: var(--sr-space-5) auto; }
.sr-article-body a { color: var(--sr-color-orange-dark); text-decoration: underline; text-underline-offset: 3px; }
.sr-article-body table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; margin: var(--sr-space-5) 0; }
.sr-article-body th, .sr-article-body td { padding: var(--sr-space-2) var(--sr-space-3); border: var(--sr-border-width) solid var(--sr-color-border); text-align: left; }

/* --- Modal video (dipakai /video, JS lama solarakyat-video.js -- lihat
   catatan header videos/index.blade.php: hanya ID/kelas berikut yang
   dipegang JS, sisanya bebas ditata ulang). --*/
.sr-modal-overlay.sr-video-modal { display: none; }
.sr-modal-overlay.sr-video-modal.is-open { display: flex; }
.sr-video-modal .sr-modal { max-width: 860px; padding: var(--sr-space-5); position: relative; }
.sr-video-modal__close {
  position: absolute;
  top: var(--sr-space-3);
  right: var(--sr-space-3);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--sr-color-bg-secondary);
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.sr-video-modal__embed { aspect-ratio: 16 / 9; background: #000; border-radius: var(--sr-radius-md); overflow: hidden; }
.sr-video-modal__embed iframe { width: 100%; height: 100%; border: 0; }
.sr-video-modal__meta { margin-top: var(--sr-space-3); color: var(--sr-color-text-secondary); font-size: var(--sr-text-sm); display: flex; gap: var(--sr-space-2); flex-wrap: wrap; }
.sr-video-modal__meta span:not(:last-child)::after { content: '·'; margin-left: var(--sr-space-2); }

/* --- Kartu video (grid /video + featured), pakai .sr-tile sbg dasar --- */
.sr-video-tile { cursor: pointer; border: 0; text-align: left; width: 100%; font-family: inherit; background: var(--sr-color-bg); }
.sr-video-tile .sr-tile__media { display: flex; align-items: center; justify-content: center; }
.sr-video-tile .sr-tile__media img { object-fit: cover; }
.sr-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(32, 35, 31, 0.15);
}
.sr-video-play span {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--sr-color-orange-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sr-video-duration {
  position: absolute;
  bottom: var(--sr-space-2);
  right: var(--sr-space-2);
  background: rgba(32, 35, 31, 0.75);
  color: #fff;
  font-size: var(--sr-text-xs);
  padding: 2px 8px;
  border-radius: var(--sr-radius-sm);
}
.sr-video-featured { grid-column: 1 / -1; }
.sr-video-featured .sr-tile__media { aspect-ratio: 16 / 8; }

/* --- Halaman /kontak: kartu channel, form, info, FAQ --- */
.sr-contact-channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sr-space-5);
}
@media (max-width: 860px) {
  .sr-contact-channels { grid-template-columns: 1fr; }
}
.sr-contact-main {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--sr-space-6);
  align-items: start;
}
@media (max-width: 900px) {
  .sr-contact-main { grid-template-columns: 1fr; }
}
.sr-contact-info-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sr-space-3);
  padding-block: var(--sr-space-3);
  border-bottom: var(--sr-border-width) solid var(--sr-color-border);
}
.sr-contact-info-row:last-child { border-bottom: 0; }
.sr-contact-hours-row {
  display: flex;
  justify-content: space-between;
  padding-block: var(--sr-space-2);
  font-size: var(--sr-text-body);
}
.sr-alert {
  border-radius: var(--sr-radius-md);
  padding: var(--sr-space-4);
  margin-bottom: var(--sr-space-5);
  font-size: var(--sr-text-body);
}
.sr-alert--error { background: var(--sr-color-error-tint); color: var(--sr-color-error); }
.sr-alert--success { background: var(--sr-color-success-tint); color: var(--sr-color-success); }
.sr-alert ul { margin: var(--sr-space-2) 0 0; padding-left: 1.2em; }
.sr-faq-item { border-bottom: var(--sr-border-width) solid var(--sr-color-border); }
.sr-faq-item:last-child { border-bottom: 0; }
.sr-faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sr-space-3);
  background: none;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-size: var(--sr-text-body);
  font-weight: var(--sr-font-weight-semibold);
  color: var(--sr-color-text);
  padding-block: var(--sr-space-4);
  min-height: 44px;
  cursor: pointer;
}
.sr-faq-chevron { transition: transform var(--sr-transition-fast); flex-shrink: 0; }
.sr-faq-question[aria-expanded="true"] .sr-faq-chevron { transform: rotate(180deg); }
.sr-faq-answer { padding-bottom: var(--sr-space-4); color: var(--sr-color-text-secondary); }

/* Public detail pages migrated from the legacy public layout. Keep the
   existing product data/JS hooks, but use the shared design tokens. */
.sr-product-tile a.sr-product-tile,
a.sr-product-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: var(--sr-space-4);
}
.sr-product-tile .sr-tile__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sr-space-2);
  margin-top: auto;
  padding-top: var(--sr-space-4);
}
.sr-product-tile .sr-tile__footer .sr-btn { width: auto; min-width: 44px; }
@media (max-width: 560px) {
  a.sr-product-tile { padding: var(--sr-space-3); }
  .sr-product-tile .sr-tile__media {
    width: calc(100% + (2 * var(--sr-space-3)));
    margin: calc(-1 * var(--sr-space-3)) calc(-1 * var(--sr-space-3)) var(--sr-space-3);
  }
}
.sr-pagination-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sr-space-4);
  padding: var(--sr-space-4);
  border: var(--sr-border-width) solid var(--sr-color-border);
  border-radius: var(--sr-radius-lg);
  background: var(--sr-color-bg);
}
.sr-pagination-summary { color: var(--sr-color-text-secondary); font-size: var(--sr-text-sm); }
.sr-pagination-list { display: flex; align-items: center; justify-content: flex-end; gap: var(--sr-space-2); flex-wrap: wrap; }
.sr-page-link {
  display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
  padding: 0 var(--sr-space-3); border: var(--sr-border-width) solid var(--sr-color-border);
  border-radius: var(--sr-radius-md); color: var(--sr-color-text); font-size: var(--sr-text-sm);
  font-weight: var(--sr-font-weight-semibold); text-decoration: none;
}
.sr-page-link.is-current { border-color: var(--sr-color-orange); background: var(--sr-color-orange); color: var(--sr-color-text-on-orange); }
.sr-page-link.is-disabled { color: var(--sr-color-text-secondary); opacity: .55; }
.sr-page-link.is-gap { min-width: 24px; border-color: transparent; padding-inline: 0; }
@media (max-width: 640px) {
  .sr-pagination-shell { align-items: stretch; flex-direction: column; }
  .sr-pagination-summary { text-align: center; }
  .sr-pagination-list { justify-content: center; }
}
.sr-contact-form-name-phone { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sr-space-4); }
@media (max-width: 560px) { .sr-contact-form-name-phone { grid-template-columns: 1fr; } }
.sr-product-detail-page .product-info-panel,
.sr-product-detail-page .product-tabs,
.sr-product-detail-page .product-related-section { font-family: var(--sr-font-family); }
.sr-product-detail-page .product-info-panel h1,
.sr-product-detail-page .product-tab-panel h2,
.sr-product-detail-page .product-related-heading h2 { font-family: var(--sr-font-family); color: var(--sr-color-text); }
.sr-product-detail-page .product-price-main {
  background: none;
  color: var(--sr-color-orange-dark);
  -webkit-text-fill-color: currentColor;
}
.sr-product-detail-page .product-button-buy,
.sr-product-detail-page .product-mobile-buy button {
  background: var(--sr-color-orange);
  color: var(--sr-color-text-on-orange);
  box-shadow: none;
  border: var(--sr-border-width) solid var(--sr-color-orange);
}
.sr-product-detail-page .product-button-buy:hover,
.sr-product-detail-page .product-mobile-buy button:hover { background: var(--sr-color-orange-dark); color: var(--sr-color-text-inverse); }
.sr-product-detail-page .product-button-cart { border-color: var(--sr-color-border-strong); color: var(--sr-color-orange-dark); }
.sr-product-detail-page .product-button-cart:hover { border-color: var(--sr-color-orange-dark); background: var(--sr-color-orange-tint); }

/* ==========================================================================
   PAKET B (2026-09-19) -- TANDA STATUS HASIL PERHITUNGAN
   Badge status SELALU memakai TEKS + warna, tidak pernah warna saja, supaya
   tetap terbaca oleh pembaca yang tidak bisa membedakan warna dan oleh
   pembaca layar. Nilai hex diambil dari token semantik yang sudah ada di
   :root (--sr-color-warning #9A6400, --sr-color-error #C22B2B); keduanya
   dipasangkan dengan teks putih.
   Kontras terukur (rasio WCAG, ambang AA teks normal 4,5:1):
     putih di atas #9A6400  = 5,03:1  LULUS
     putih di atas #C22B2B  = 5,73:1  LULUS
     #20231F di atas #F48C14 = 6,77:1 LULUS  (status "dalam batas"/netral)
   #20231F di atas #9A6400 hanya 3,27:1 dan di atas #C22B2B hanya 2,87:1,
   karena itu ink-nya putih, bukan teks gelap.
   ========================================================================== */
.sr-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--sr-font-family);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}
.sr-status-badge--ok {
  background: var(--sr-color-bg-inverse);
  color: var(--sr-color-text-inverse);
}
.sr-status-badge--warning {
  background: var(--sr-color-warning);
  color: var(--sr-color-warning-ink);
}
.sr-status-badge--danger {
  background: var(--sr-color-error);
  color: var(--sr-color-error-ink);
}
.sr-status-badge--neutral {
  background: var(--sr-color-bg-secondary);
  color: var(--sr-color-text-secondary);
  border-color: var(--sr-color-border);
}
/* Teks status di dalam kalimat (bukan badge) -- tetap lolos AA di atas putih. */
.sr-status-text--warning { color: var(--sr-color-warning); font-weight: 700; }
.sr-status-text--danger { color: var(--sr-color-error); font-weight: 700; }