:root {
  color-scheme: light;
  --bg: #fbf6ed;
  --bg-soft: #fffaf1;
  --surface: rgba(255, 252, 244, 0.84);
  --surface-strong: #ffffff;
  --ink: #211c1a;
  --muted: #70655d;
  --line: rgba(54, 42, 29, 0.14);
  --gold: #f6c43a;
  --gold-strong: #d99a13;
  --purple: #7b6fc5;
  --purple-strong: #524695;
  --brown: #6a3b22;
  --shadow: 0 24px 70px rgba(80, 54, 25, 0.14);
  --shadow-soft: 0 14px 38px rgba(80, 54, 25, 0.1);
  --radius-lg: 30px;
  --radius-md: 22px;
  --radius-sm: 14px;
  --header-h: 74px;
  --container: 1120px;

  /* Global section spacing */
  --section-y: clamp(1.6rem, 3.4vw, 2.8rem);
  --section-x: clamp(1rem, 3vw, 2.4rem);

  /* Home page layout spacing */
  --home-section-gap: clamp(1.2rem, 2.6vw, 2.35rem);
  --card-padding: clamp(1.35rem, 4vw, 2.35rem);
}

body.app-page {
  color-scheme: dark;
  --bg: #151017;
  --bg-soft: #211722;
  --surface: rgba(37, 26, 36, 0.86);
  --surface-strong: #2a1b28;
  --ink: #fff9f1;
  --muted: #d7c7ba;
  --line: rgba(255, 244, 230, 0.13);
  --gold: #f2b04d;
  --gold-strong: #d67c2f;
  --purple: #cfb8ff;
  --purple-strong: #9c70c8;
  --brown: #9b4a28;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 16px 44px rgba(0, 0, 0, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 12%, rgba(246, 196, 58, 0.2), transparent 30rem),
    radial-gradient(circle at 88% 4%, rgba(123, 111, 197, 0.16), transparent 28rem),
    linear-gradient(180deg, var(--bg-soft), var(--bg));
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.18vw, 1.1rem);
  line-height: 1.65;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

body.app-page {
  background:
    radial-gradient(circle at 12% 8%, rgba(242, 176, 77, 0.22), transparent 25rem),
    radial-gradient(circle at 85% 0%, rgba(158, 112, 200, 0.22), transparent 30rem),
    linear-gradient(180deg, #211420 0%, #151017 48%, #100d11 100%);
}

body.nav-open {
  overflow: hidden;
}

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

main,
section,
.site-header,
.site-footer,
.section,
.hero,
.home-hero,
.catalog-card,
.product-card,
.product-link,
.product-body,
.feature-card,
.studio-card,
.contact-section,
.contact-card,
.legal-card,
.error-card {
  min-width: 0;
  max-width: 100%;
}

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

a:focus-visible,
button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--purple) 70%, white);
  outline-offset: 4px;
}

button {
  font: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.75rem clamp(1rem, 3vw, 2.4rem);
  border: 1px solid var(--line);
  border-top: 0;
  border-inline: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 14px 44px rgba(46, 31, 18, 0.1);
  backdrop-filter: blur(18px);
}

body.app-page .site-header {
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.32);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.brand-logo {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  object-fit: cover;
  background: #f6f0e6;
  box-shadow: inset 0 0 0 1px rgba(32, 26, 20, 0.08), 0 10px 28px rgba(217, 154, 19, 0.16);
}

.brand-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.18rem);
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
}

.main-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0.58rem 0.92rem;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.96rem;
  font-weight: 720;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.main-nav a:hover {
  color: var(--ink);
  background: rgba(123, 111, 197, 0.11);
  transform: translateY(-1px);
}

body.app-page .main-nav a:hover {
  background: rgba(242, 176, 77, 0.13);
}

.nav-toggle,
.nav-backdrop {
  display: none;
}

.section {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-block: var(--section-y);
  padding-inline: var(--section-x);
}

.home-hero,
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h) - 1rem);
  display: grid;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.home-hero {
  isolation: isolate;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  .home-hero {
    overflow-x: clip;
  }
}

.home-hero.section {
  margin-top: 0;
  padding-block: 0 clamp(1.15rem, 3vw, 2.25rem);
}

.home-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.home-hero::before {
  inset: 0;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 clamp(32px, 5vw, 56px) clamp(32px, 5vw, 56px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 250, 241, 0.42)),
    radial-gradient(circle at 82% 24%, rgba(246, 196, 58, 0.22), transparent 22rem),
    radial-gradient(circle at 92% 76%, rgba(123, 111, 197, 0.14), transparent 22rem);
  box-shadow: var(--shadow);
}

.hero-copy {
  max-width: 720px;
  padding-inline: clamp(0rem, 4vw, 3rem);
}

.home-hero .hero-copy {
  max-width: min(100%, 1040px);
  padding-block: clamp(1.2rem, 3vw, 2rem);
}

.home-hero h1 {
  max-width: 18ch;
  line-height: 1.16;
  letter-spacing: -0.020em;
  text-wrap: balance;
}

.eyebrow {
  margin: 0 0 0.85rem;
  color: var(--purple-strong);
  font-size: clamp(0.76rem, 0.72rem + 0.18vw, 0.88rem);
  font-weight: 850;
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-transform: uppercase;
}

body.app-page .eyebrow {
  color: var(--gold);
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.05;
  letter-spacing: -0.055em;
}

h1 {
  max-width: 12ch;
  font-size: clamp(2.45rem, 6vw, 4.55rem);
}

h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
}

h3 {
  font-size: clamp(1.15rem, 1.4vw, 1.4rem);
}

/* Desktop: kecilkan judul khusus halaman beranda */
@media (min-width: 981px) {
  .home-page h1 {
    font-size: clamp(2.2rem, 4.4vw, 3.65rem);
  }

  .home-page h2 {
    font-size: clamp(1.65rem, 2.8vw, 2.45rem);
  }
}

.lead {
  max-width: 64ch;
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: clamp(1.06rem, 1rem + 0.35vw, 1.3rem);
  line-height: 1.72;
}

.hero-actions,
.legal-actions,
.support-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.82rem 1.18rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 820;
  line-height: 1.2;
  box-shadow: 0 12px 30px rgba(34, 27, 20, 0.1);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(34, 27, 20, 0.16);
}

.button-primary {
  color: #201914;
  background: linear-gradient(135deg, var(--gold), #ffda68);
}

body.app-page .button-primary {
  color: #21110b;
  background: linear-gradient(135deg, var(--gold), #ffd186);
}

.button-secondary {
  color: var(--ink);
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
}

.section-heading {
  max-width: 760px;
  margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
}

.section-heading p:not(.eyebrow),
.contact-section p,
.legal-heading .lead {
  color: var(--muted);
}

.product-grid,
.feature-grid,
.studio-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.3vw, 1.4rem);
}

.catalog-card,
.product-card,
.feature-card,
.studio-card,
.contact-section,
.legal-card,
.error-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.product-card {
  min-height: 100%;
}

.product-card:hover {
  transform: none;
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}

.product-link {
  display: grid;
  grid-template-rows: 96px 1fr;
  justify-items: center;
  align-items: start;
  gap: 1.15rem;
  min-height: 100%;
  padding: 1rem;
  text-align: center;
}

.product-body {
  width: 100%;
}

.product-link .button {
  width: fit-content;
  min-height: 38px;
  margin-top: 0.15rem;
  padding: 0.56rem 0.86rem;
  font-size: 0.84rem;
  font-weight: 820;
  box-shadow: 0 8px 20px rgba(34, 27, 20, 0.1);
}

.product-link .button:hover {
  box-shadow: 0 12px 28px rgba(34, 27, 20, 0.14);
}

.product-disabled {
  opacity: 0.74;
}

.product-icon,
.product-icon-image {
  width: 96px;
  height: 96px;
  border-radius: 22px;
}

.product-icon {
  display: grid;
  place-items: center;
  color: var(--purple-strong);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.7), transparent 50%),
    linear-gradient(135deg, rgba(246, 196, 58, 0.23), rgba(123, 111, 197, 0.18));
  font-size: 2rem;
  font-weight: 900;
}

.product-icon-image {
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.product-icon-image img {
  width: 100%;
  height: 100%;
  border-radius: 22px;
  object-fit: cover;
  display: block;
}

.product-body {
  display: grid;
  justify-items: center;
  width: 100%;
  padding: 0 0.35rem 0.35rem;
}

.product-badge {
  display: inline-flex;
  margin-bottom: 0.75rem;
  padding: 0.34rem 0.62rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--purple-strong);
  background: rgba(123, 111, 197, 0.09);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.product-body h3 {
  display: -webkit-box;
  min-height: 2.1em;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-body p,
.feature-card p,
.studio-card p,
.step p {
  margin: 0.75rem 0 0;
  color: var(--muted);
}

.product-card .product-body p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catalog-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.2rem, 2.6vw, 1.8rem);
  width: 100%;
  padding: clamp(1.35rem, 4vw, 2.35rem);
}

.catalog-card .section-heading {
  max-width: 760px;
  margin-bottom: 0;
}

.catalog-card .eyebrow {
  margin-bottom: clamp(1.05rem, 2vw, 1.35rem);
}

.catalog-search {
  display: grid;
  gap: 0.7rem;
  max-width: 680px;
}

.catalog-search-label {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 850;
}

.catalog-search-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  min-height: 52px;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 84%, transparent);
  box-shadow: 0 12px 30px rgba(80, 54, 25, 0.08);
}

.catalog-search-icon {
  color: var(--purple-strong);
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
}

.catalog-search-input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-weight: 700;
}

.catalog-search-input::placeholder {
  color: var(--muted);
  font-weight: 650;
}

.catalog-search-result {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.product-card.is-hidden {
  display: none;
}

.catalog-empty-state {
  margin: 0;
  padding: 1rem;
  border: 1px dashed var(--line);
  border-radius: 22px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.48);
  font-weight: 750;
  text-align: center;
}

@media (max-width: 760px) {
  .catalog-search {
    max-width: none;
  }

  .catalog-search-box {
    min-height: 48px;
    border-radius: 20px;
  }

  .catalog-search-input {
    font-size: 0.92rem;
  }
}

.studio-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.2rem, 2.6vw, 1.8rem);
  padding: clamp(1.35rem, 4vw, 2.35rem);
}

.studio-card > div:first-child {
  max-width: 760px;
}

.studio-card .eyebrow {
  margin-bottom: clamp(1.05rem, 2vw, 1.35rem);
}

.studio-points {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.studio-points > div,
.feature-card,
.step {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.38);
  padding: clamp(1rem, 2vw, 1.35rem);
}

body.app-page .studio-points > div,
body.app-page .feature-card,
body.app-page .step {
  background: rgba(255, 255, 255, 0.04);
}

.contact-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.3rem, 4vw, 2.5rem);
  padding: clamp(1.35rem, 4vw, 2.35rem);
}

.contact-card {
  display: grid;
  gap: 0.2rem;
  min-width: min(100%, 340px);
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(246, 196, 58, 0.16), rgba(123, 111, 197, 0.12));
}

.contact-card span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 760;
}

.contact-card strong {
  font-size: clamp(0.92rem, 1.5vw, 1.05rem);
}

.app-hero {
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.78fr);
  align-items: start;
}

.app-hero .hero-copy {
  padding-inline: 0;
}

body.app-page .app-hero.section {
  min-height: auto;
  padding-top: clamp(0.9rem, 2vw, 1.6rem);
  padding-bottom: clamp(2rem, 4.5vw, 3.8rem);
}

body.app-page main > .section:not(.app-hero):not(.legal-hero):not(.legal-section) {
  padding-block: clamp(2.2rem, 4.8vw, 4rem);
}

body.app-page .steps-section {
  padding-top: clamp(1.8rem, 4vw, 3.2rem);
}

.phone-showcase {
  position: relative;
  justify-self: center;
  width: min(100%, 410px);
  transform: scale(0.86);
  transform-origin: top center;
}

.screenshot-carousel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 36px;
  background:
    radial-gradient(circle at 50% 0%, rgba(242, 176, 77, 0.2), transparent 42%),
    rgba(255, 255, 255, 0.05);
  box-shadow: var(--shadow);
}

.carousel-viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.carousel-viewport::-webkit-scrollbar {
  display: none;
}

.carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
  margin: 0;
  padding: clamp(1rem, 2.8vw, 1.4rem);
  scroll-snap-align: center;
}

.phone-frame {
  overflow: hidden;
  border: 10px solid #0b0a0d;
  border-radius: 34px;
  background: #0b0a0d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 22px 60px rgba(0, 0, 0, 0.38);
}

.phone-frame-screenshot {
  aspect-ratio: 9 / 16;
}

.phone-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.carousel-button {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #fff9f1;
  background: rgba(15, 12, 16, 0.62);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform 180ms ease, background 180ms ease;
}

.carousel-button:hover {
  background: rgba(15, 12, 16, 0.82);
  transform: translateY(-50%) scale(1.04);
}

.carousel-button-prev {
  left: 0.75rem;
}

.carousel-button-next {
  right: 0.75rem;
}

.carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  transition: width 180ms ease, background 180ms ease;
}

.carousel-dot.is-active {
  width: 28px;
  background: var(--gold);
}

.carousel-slide img,
.edu-carousel-slide img {
  cursor: zoom-in;
}

body.image-zoom-open {
  overflow: hidden;
}

.image-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: clamp(1rem, 3vw, 2rem);
  background:
    radial-gradient(circle at 50% 12%, rgba(242, 176, 77, 0.18), transparent 34%),
    rgba(7, 7, 10, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.image-zoom-overlay[hidden] {
  display: none;
}

.image-zoom-content {
  width: min(100%, 1440px);
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 0.85rem;
}

.image-zoom-image {
  display: block;
  width: auto;
  max-width: min(96vw, 1440px);
  max-height: calc(100dvh - 7rem);
  object-fit: contain;
  border-radius: clamp(16px, 2vw, 28px);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
}

.image-zoom-caption {
  max-width: min(92vw, 920px);
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  line-height: 1.5;
  text-align: center;
}

.image-zoom-close,
.image-zoom-nav {
  position: fixed;
  z-index: 10000;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #fff9f1;
  background: rgba(20, 18, 24, 0.72);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}

.image-zoom-close:hover,
.image-zoom-nav:hover {
  background: rgba(20, 18, 24, 0.92);
  transform: scale(1.05);
}

.image-zoom-close {
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  width: 46px;
  height: 46px;
  font-size: 2rem;
  line-height: 1;
}

.image-zoom-nav {
  top: 50%;
  width: 52px;
  height: 52px;
  font-size: 2.6rem;
  line-height: 1;
  transform: translateY(-50%);
}

.image-zoom-nav:hover {
  transform: translateY(-50%) scale(1.05);
}

.image-zoom-nav-prev {
  left: max(1rem, env(safe-area-inset-left));
}

.image-zoom-nav-next {
  right: max(1rem, env(safe-area-inset-right));
}

.image-zoom-nav[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .image-zoom-overlay {
    padding: 1rem;
  }

  .image-zoom-image {
    max-width: 94vw;
    max-height: calc(100dvh - 6.5rem);
    border-radius: 18px;
  }

  .image-zoom-close {
    width: 42px;
    height: 42px;
    font-size: 1.8rem;
  }

  .image-zoom-nav {
    width: 42px;
    height: 42px;
    font-size: 2.2rem;
  }

  .image-zoom-nav-prev {
    left: 0.55rem;
  }

  .image-zoom-nav-next {
    right: 0.55rem;
  }
}

.feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.3vw, 1.4rem);
}

.step span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1rem;
  border-radius: 999px;
  color: #21110b;
  background: linear-gradient(135deg, var(--gold), #ffd186);
  font-weight: 900;
}

.legal-page .section {
  padding-block: clamp(2.2rem, 4vw, 3.6rem);
}

.legal-hero {
  padding-top: clamp(1.8rem, 3.5vw, 2.8rem);
  padding-bottom: 0.25rem;
}

.legal-heading {
  max-width: 840px;
}

.legal-heading h1 {
  max-width: 14ch;
}

.legal-updated {
  display: inline-flex;
  margin-top: 1.35rem;
  padding: 0.45rem 0.72rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-size: 0.92rem;
  font-weight: 760;
}

.legal-section {
  padding-top: 0;
  padding-bottom: clamp(2rem, 4vw, 3.4rem);
}

.legal-card {
  padding: clamp(1.35rem, 4vw, 2.8rem);
}

.legal-content {
  max-width: 1200px;
  margin-inline: auto;
}

.legal-content h2 {
  margin-top: 2rem;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  letter-spacing: -0.035em;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p,
.legal-content li {
  color: var(--muted);
}

.legal-content a {
  color: var(--purple-strong);
  font-weight: 760;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

body.app-page .legal-content a {
  color: var(--gold);
}

.legal-content .button {
  text-decoration: none;
}

body.app-page .legal-content .button-primary {
  color: #21110b;
}

body.app-page .legal-content .button-secondary {
  color: var(--ink);
}

.legal-content ul {
  padding-left: 1.3rem;
}

.error-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
}

.error-card {
  max-width: 620px;
  padding: clamp(1.5rem, 4vw, 2.6rem);
  text-align: center;
}

.error-card h1 {
  max-width: none;
  margin-inline: auto;
}

.error-card p:not(.eyebrow) {
  color: var(--muted);
}

.site-footer {
  width: min(var(--container), calc(100% - 2rem));
  margin: 0 auto 1.25rem;
  padding: 1.25rem 0.2rem 1.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.94rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.85rem;
}

.footer-links a {
  font-weight: 760;
}

.footer-links a:hover {
  color: var(--ink);
}

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms ease, transform 520ms ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

@media (max-width: 980px) {
  .product-grid,
  .feature-grid,
  .studio-points,
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-card,
  .contact-section,
  .app-hero {
    grid-template-columns: 1fr;
  }

  .phone-showcase {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  :root {
  --header-h: 64px;
  --mobile-header-h: calc(var(--header-h) + env(safe-area-inset-top, 0px));
}

body {
  padding-top: var(--mobile-header-h);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  width: 100%;
  max-width: none;
  min-height: var(--mobile-header-h);
  margin: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 0.55rem) 0.85rem 0.55rem;
  border-inline: 0;
  border-top: 0;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: color-mix(in srgb, var(--surface-strong) 98%, transparent);
  box-shadow: 0 10px 34px rgba(46, 31, 18, 0.12);
}
  .brand-logo {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .brand-name {
    max-width: 58vw;
  }

  .nav-toggle {
    position: relative;
    z-index: 1400;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
    cursor: pointer;
  }

  .nav-toggle span {
    grid-area: 1 / 1;
    width: 19px;
    height: 2px;
    border-radius: 999px;
    background: var(--ink);
    transition: transform 220ms ease, opacity 180ms ease;
  }

  .nav-toggle span:nth-child(1) {
    transform: translateY(-6px);
  }

  .nav-toggle span:nth-child(3) {
    transform: translateY(6px);
  }

  .nav-toggle.is-active span:nth-child(1) {
    transform: rotate(45deg);
  }

  .nav-toggle.is-active span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.is-active span:nth-child(3) {
    transform: rotate(-45deg);
  }

  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 1300;
    width: min(74dvw, 300px);
    max-width: calc(100dvw - 2.5rem);
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    gap: 0.42rem;
    padding: calc(env(safe-area-inset-top, 0px) + 5.25rem) 0.8rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
    border-left: 1px solid var(--line);
    border-radius: 24px 0 0 24px;
    background: var(--surface-strong);
    box-shadow: -18px 0 58px rgba(20, 14, 10, 0.2);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translate3d(105%, 0, 0);
    visibility: hidden;
    will-change: transform;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), visibility 260ms ease;
  }

  body.app-page .main-nav {
    background: #241823;
    box-shadow: -26px 0 90px rgba(0, 0, 0, 0.5);
  }

  .main-nav a {
    justify-content: space-between;
    min-height: 48px;
    padding: 0.72rem 0.78rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 64%, transparent);
    font-size: 0.96rem;
  }

  .main-nav a::after {
    content: "›";
    color: var(--muted);
    font-size: 1.2rem;
  }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1190;
  display: block;
  width: 100dvw;
  height: 100dvh;
  border: 0;
  background: rgba(20, 14, 10, 0.52);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

  body.app-page .nav-backdrop {
    background: rgba(0, 0, 0, 0.66);
  }

  body.nav-open .main-nav {
  transform: translate3d(0, 0, 0);
  visibility: visible;
}

  body.nav-open .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

body.nav-open .site-header {
  z-index: 1200;
}

body.nav-open .brand {
  position: relative;
  z-index: 1;
}

body.nav-open .nav-toggle {
  position: relative;
  z-index: 1400;
}

.section {
  width: 100%;
  max-width: none;
  padding-block: clamp(1.15rem, 5vw, 1.8rem);
  padding-inline: 0.6rem;
}

  .home-hero,
  .hero {
    min-height: auto;
  }

  .home-hero::before {
    inset: 0;
  }

.home-hero.section {
  margin-top: 0;
  padding-block: clamp(1.25rem, 5vw, 2rem);
}

.home-hero .hero-copy {
  padding-block: 0;
}

.home-hero .hero-actions {
  margin-top: 1.45rem;
}

  h1 {
    max-width: 11ch;
  }

  .hero-actions,
  .legal-actions,
  .support-links {
    align-items: stretch;
    flex-direction: column;
  }

  .button,
  .support-links .button {
    width: 100%;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .feature-grid,
  .studio-points,
  .steps {
    grid-template-columns: 1fr;
  }

  .product-link {
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: start;
    gap: 0.8rem;
    padding: 0.85rem;
    text-align: center;
  }

.product-icon,
.product-icon-image {
  width: 68px;
  height: 68px;
  margin-inline: auto;
  border-radius: 18px;
}

.product-icon {
  font-size: 1.65rem;
}

.product-link {
  grid-template-rows: 68px 1fr;
}

  .contact-section {
    padding: 1.2rem;
  }

.phone-showcase {
  width: min(100%, 360px);
  justify-self: center;
  transform: none;
}

  .carousel-button {
    width: 38px;
    height: 38px;
  }

  .legal-card {
    border-radius: 24px;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 430px) {
  .brand-name {
    max-width: 50vw;
  }

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
  }

  .product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.product-link {
  grid-template-columns: 1fr;
  padding: 0.75rem 0.65rem;
}

.product-icon,
.product-icon-image {
  width: 60px;
  height: 60px;
  border-radius: 16px;
}

.product-icon {
  font-size: 1.45rem;
}

.product-link {
  grid-template-rows: 60px 1fr;
}

.product-badge {
  margin-bottom: 0.55rem;
  padding: 0.26rem 0.46rem;
  font-size: 0.64rem;
  letter-spacing: 0.04em;
}

.product-body p {
  font-size: 0.86rem;
  line-height: 1.5;
}

  .carousel-slide {
    padding: 0.75rem;
  }

  .phone-frame {
    border-width: 7px;
    border-radius: 28px;
  }
}

/* Legal page tighter spacing */
.legal-page .legal-hero.section {
  padding-bottom: 0;
}

.legal-page .legal-section.section {
  margin-top: 1.8rem;
  padding-top: 0;
}

/* Mobile: force legal hero and legal section to stay close */
@media (max-width: 760px) {
  .legal-page .legal-hero.section {
    padding-top: 1.4rem;
    padding-bottom: 0;
  }

  .legal-page .legal-section.section {
    margin-top: 1.4rem;
    padding-top: 0;
  }
}

.catalog-card,
.product-grid,
.feature-grid,
.studio-card,
.contact-section,
.legal-card {
  width: 100%;
}

.product-link {
  padding: clamp(1.15rem, 2.4vw, 1.6rem);
}

/* Full-width catalog and studio blocks with soft corners */
.home-page .catalog-section,
.home-page .studio-section {
  padding-inline: 0;
}

.home-page .catalog-card,
.home-page .studio-card {
  width: 100%;
  border-radius: clamp(24px, 4vw, 42px);
}

@media (max-width: 760px) {
  .home-page .catalog-card,
  .home-page .studio-card {
    border-radius: 24px;
  }
}

/* Dropdown navigasi Produk */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 42px;
  padding: 0.58rem 0.92rem;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 0.96rem;
  font-weight: 720;
  line-height: 1;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.nav-dropdown-toggle:hover,
.nav-dropdown.is-open .nav-dropdown-toggle {
  color: var(--ink);
  background: rgba(123, 111, 197, 0.11);
  transform: translateY(-1px);
}

.nav-dropdown-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 1.05rem;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.05rem;
  font-size: 0;
  line-height: 1;
}

.nav-dropdown-icon::before {
  content: "";
  width: 0.48rem;
  height: 0.48rem;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 180ms ease;
}

.nav-dropdown.is-open .nav-dropdown-icon {
  transform: none;
}

.nav-dropdown.is-open .nav-dropdown-icon::before {
  transform: rotate(225deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  z-index: 1500;
  display: grid;
  gap: 0.35rem;
  min-width: 220px;
  padding: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

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

.nav-dropdown-menu a {
  justify-content: flex-start;
  width: 100%;
  min-height: 42px;
  border-radius: 14px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .main-nav a::after {
    content: none;
  }

  .nav-dropdown {
    display: grid;
    width: 100%;
  }

  .nav-dropdown-toggle {
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 0.72rem 0.78rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 64%, transparent);
    font-size: 0.96rem;
  }

  .nav-dropdown-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 1.2rem;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0;
    color: var(--muted);
  }

  .nav-dropdown-icon::before {
    content: "";
    width: 0.48rem;
    height: 0.48rem;
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: rotate(-45deg);
    transform-origin: center;
    transition: transform 180ms ease;
  }

  .nav-dropdown.is-open .nav-dropdown-icon::before {
    transform: rotate(45deg);
  }

  .nav-dropdown-menu {
    position: static;
    min-width: 0;
    max-height: 0;
    margin-left: 0.65rem;
    padding: 0 0.35rem;
    border-color: transparent;
    border-radius: 16px;
    background: rgba(123, 111, 197, 0.07);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    overflow: hidden;
    transform: none;
    transition: max-height 220ms ease, padding 220ms ease, border-color 220ms ease;
  }

  .nav-dropdown.is-open .nav-dropdown-menu {
    max-height: 240px;
    margin-top: 0.35rem;
    padding: 0.35rem;
    border-color: var(--line);
  }

  .nav-dropdown-menu a {
    min-height: 44px;
    padding: 0.62rem 0.72rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-strong) 74%, transparent);
  }
}

.category-action {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.3rem, 3vw, 2.2rem);
}

.category-action .button {
  min-width: min(100%, 280px);
}

@media (max-width: 520px) {
  .category-action .button {
    width: 100%;
  }
}

/* Heading letter spacing: versi lebih lega */
h1,
h2 {
  letter-spacing: -0.015em;
}

h3 {
  letter-spacing: -0.008em;
  line-height: 1.18;
}

.home-hero h1,
.legal-content h2 {
  letter-spacing: -0.015em;
}

/* Sundanese Gamelan Kontakt Library page */
body.sgkl-page {
  color-scheme: dark;
  --bg: #121017;
  --bg-soft: #17131d;
  --surface: rgba(30, 26, 36, 0.88);
  --surface-strong: #1e1a24;
  --ink: #f7f3fa;
  --muted: #d2c9d8;
  --line: rgba(239, 228, 235, 0.16);
  --gold: #b56f89;
  --gold-strong: #f0b9cc;
  --purple: #5f88b1;
  --purple-strong: #d9dce2;
  --brown: #6f4a69;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
  --shadow-soft: 0 16px 44px rgba(0, 0, 0, 0.26);
  background:
    radial-gradient(circle at 12% 8%, rgba(181, 111, 137, 0.22), transparent 25rem),
    radial-gradient(circle at 86% 2%, rgba(95, 136, 177, 0.18), transparent 30rem),
    linear-gradient(180deg, #17131d 0%, #121017 46%, #0f0d13 100%);
}

body.sgkl-page .site-header {
  background: rgba(30, 26, 36, 0.9);
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.36);
}

body.sgkl-page .brand-logo {
  background: #2d2a31;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 10px 28px rgba(181, 111, 137, 0.18);
}

.sgkl-page .sgkl-hero {
  position: relative;
  min-height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.64fr);
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items: stretch;
  overflow: hidden;
  padding-top: clamp(2rem, 5vw, 4.4rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

.sgkl-page .sgkl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 clamp(32px, 5vw, 56px) clamp(32px, 5vw, 56px);
  background:
    radial-gradient(circle at 86% 18%, rgba(255, 255, 255, 0.11), transparent 18rem),
    radial-gradient(circle at 12% 84%, rgba(95, 136, 177, 0.18), transparent 18rem),
    linear-gradient(135deg, #15121a 0%, #241f2c 24%, #6f4a69 54%, #4a3a49 78%, #17141b 100%);
  box-shadow: var(--shadow);
}

.sgkl-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  max-width: 760px;
  padding: clamp(1.35rem, 4vw, 2.4rem);
  border: 1px solid rgba(239, 228, 235, 0.16);
  border-radius: var(--radius-lg);
  background: rgba(30, 26, 36, 0.72);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.sgkl-page .sgkl-hero h1 {
  max-width: 14ch;
  color: #ffffff;
  font-size: clamp(2.25rem, 4.6vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.sgkl-page .lead {
  color: #eadfea;
}

.sgkl-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.5rem;
}

.sgkl-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.64rem 0.85rem;
  border: 1px solid rgba(239, 228, 235, 0.16);
  border-radius: 999px;
  color: #eee7f2;
  background: rgba(247, 243, 250, 0.09);
  font-size: 0.85rem;
  font-weight: 820;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

.sgkl-price-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(220px, 1fr);
  gap: 1rem;
  align-items: stretch;
  margin-top: 1.35rem;
}

.sgkl-price-box {
  border: 1px solid rgba(239, 228, 235, 0.16);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(39, 33, 46, 0.96), rgba(30, 26, 36, 0.96));
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.22);
  padding: 1rem;
}

.sgkl-price-label {
  margin: 0 0 0.35rem;
  color: #a99db0;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.sgkl-price-old {
  margin: 0 0 0.35rem;
  color: #a99db0;
  font-size: 0.92rem;
  font-weight: 740;
  line-height: 1.3;
  text-decoration: line-through;
}

.sgkl-price-new {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 5vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
}

.sgkl-price-note {
  display: flex;
  align-items: center;
}

.sgkl-price-note p {
  margin: 0;
  color: #eadfea;
  font-weight: 760;
  line-height: 1.55;
}

.sgkl-page .button-primary {
  color: #ffffff;
  background: linear-gradient(135deg, #b56f89, #d98fa7);
  box-shadow: 0 14px 28px rgba(181, 111, 137, 0.28);
}

.sgkl-page .button-secondary {
  color: #f7f3fa;
  border-color: rgba(239, 228, 235, 0.18);
  background: rgba(247, 243, 250, 0.08);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.sgkl-showcase {
  display: grid;
  gap: 1rem;
  align-self: stretch;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.25rem);
  border: 1px solid rgba(239, 228, 235, 0.16);
  border-radius: var(--radius-lg);
  background: rgba(30, 26, 36, 0.74);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.sgkl-product-visual {
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: clamp(1rem, 3vw, 1.35rem);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.1), transparent 42%),
    linear-gradient(180deg, #2f2d31 0%, #514750 26%, #8b5f7b 72%, #6d4a69 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 16px 28px rgba(47, 45, 49, 0.14);
}

.sgkl-product-visual img {
  width: min(100%, 340px);
  height: auto;
  border-radius: 20px;
  object-fit: contain;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
}

.sgkl-screenshot-panel {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(360px, 620px);
  justify-content: center;
  gap: clamp(1rem, 3vw, 1.35rem);
  align-items: center;
  max-width: 980px;
  margin: clamp(1.4rem, 4vw, 2rem) auto;
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 1px solid rgba(239, 228, 235, 0.16);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 12%, rgba(181, 111, 137, 0.18), transparent 18rem),
    linear-gradient(135deg, rgba(39, 33, 46, 0.92), rgba(30, 26, 36, 0.92));
  box-shadow: var(--shadow-soft);
}

.sgkl-screenshot-copy {
  min-width: 0;
}

.sgkl-screenshot-copy h3 {
  margin: 0 0 0.7rem;
  color: #ffffff;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.sgkl-screenshot-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.sgkl-screen-carousel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  justify-self: center;
  width: min(100%, 620px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(239, 228, 235, 0.16);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.11), transparent 42%),
    rgba(15, 13, 19, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 18px 46px rgba(0, 0, 0, 0.28);
}

.sgkl-screen-carousel .carousel-viewport {
  width: 100%;
  min-width: 0;
}

.sgkl-screen-carousel .carousel-slide {
  display: grid;
  gap: 0.8rem;
  padding: clamp(0.75rem, 2vw, 1rem);
}

.sgkl-screen-frame {
  overflow: hidden;
  border-radius: 20px;
  background: #111018;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.28);
}

.sgkl-screen-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 430px;
  aspect-ratio: 993 / 815;
  object-fit: contain;
  object-position: center;
}

.sgkl-screen-carousel figcaption {
  margin: 0;
  padding-inline: 0.25rem;
  color: #eadfea;
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.45;
  text-align: center;
}

.sgkl-screen-carousel .sgkl-screen-dots {
  position: static !important;
  inset: auto !important;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.25rem 0 1rem;
}

.sgkl-screen-carousel .carousel-button {
  width: 40px;
  height: 40px;
}

.sgkl-screen-carousel .carousel-button-prev {
  left: 1rem;
}

.sgkl-screen-carousel .carousel-button-next {
  right: 1rem;
}

.sgkl-screen-carousel:focus-visible {
  outline: 3px solid rgba(240, 185, 204, 0.7);
  outline-offset: 4px;
}

@media (max-width: 980px) {
  .sgkl-screenshot-panel {
    grid-template-columns: 1fr;
    max-width: 720px;
  }

  .sgkl-screenshot-copy {
    max-width: 620px;
  }

  .sgkl-screen-carousel {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .sgkl-screenshot-panel {
    padding: 0.85rem;
    border-radius: 24px;
  }

  .sgkl-screen-carousel {
    border-radius: 22px;
  }

  .sgkl-screen-carousel .carousel-slide {
    padding: 0.65rem;
  }

  .sgkl-screen-frame {
    border-radius: 16px;
  }

  .sgkl-screen-frame img {
    max-height: none;
  }

  .sgkl-screen-carousel .carousel-button {
    width: 36px;
    height: 36px;
  }

  .sgkl-screen-carousel .carousel-button-prev {
    left: 0.65rem;
  }

  .sgkl-screen-carousel .carousel-button-next {
    right: 0.65rem;
  }
}

.sgkl-product-meta {
  padding: clamp(1.1rem, 3vw, 1.5rem);
  border-radius: 24px;
  background: linear-gradient(180deg, #2f2d31 0%, #4f4650 28%, #815873 72%, #6f4a69 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.sgkl-product-meta h2 {
  margin-bottom: 1rem;
  color: #ffffff;
  font-size: clamp(1.55rem, 3vw, 2.05rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.sgkl-list {
  list-style: none;
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
}

.sgkl-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: #f4f2f6;
  font-size: 0.96rem;
  line-height: 1.55;
}

.sgkl-list li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 0.05rem;
  border-radius: 999px;
  color: #dceaf7;
  background: rgba(95, 136, 177, 0.24);
  font-size: 0.75rem;
  font-weight: 900;
}

.sgkl-page .catalog-card,
.sgkl-page .studio-card,
.sgkl-page .contact-section {
  background: rgba(30, 26, 36, 0.86);
}

.sgkl-page .product-card,
.sgkl-page .studio-points > div,
.sgkl-faq-item {
  background: rgba(39, 33, 46, 0.78);
  border-color: rgba(239, 228, 235, 0.16);
}

.sgkl-page .product-card:hover {
  border-color: rgba(181, 111, 137, 0.55);
}

.sgkl-page .product-icon {
  color: #dceaf7;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.18), transparent 50%),
    linear-gradient(135deg, rgba(181, 111, 137, 0.28), rgba(95, 136, 177, 0.22));
}

.sgkl-page .product-badge {
  color: #f0d8e4;
  background: rgba(181, 111, 137, 0.14);
  border-color: rgba(240, 216, 228, 0.16);
}

.sgkl-faq {
  display: grid;
  gap: 0.9rem;
  max-width: 980px;
}

.sgkl-faq-item {
  padding: clamp(1rem, 3vw, 1.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.sgkl-faq-item h3 {
  margin: 0 0 0.45rem;
  color: #f7f3fa;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.35;
}

.sgkl-faq-item p {
  margin: 0;
  color: var(--muted);
}

.sgkl-page .contact-card {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(181, 111, 137, 0.24), rgba(95, 136, 177, 0.18));
}

@media (max-width: 980px) {
  .sgkl-page .sgkl-hero {
    grid-template-columns: 1fr;
  }

  .sgkl-hero-copy {
    max-width: none;
  }

  .sgkl-showcase {
    max-width: 680px;
  }

  .sgkl-price-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .sgkl-page .sgkl-hero {
    padding-top: 0;
    padding-bottom: 1.15rem;
  }

  .sgkl-hero-copy,
  .sgkl-showcase {
    padding: 1rem;
    border-radius: 24px;
  }

  .sgkl-chip-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sgkl-chip {
    width: 100%;
  }

  .sgkl-product-visual {
    min-height: auto;
  }

  .sgkl-product-visual img {
    width: min(100%, 260px);
  }
}

/* Fix reveal animation karena main.js memakai class js-ready */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms ease, transform 520ms ease;
}

.js-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Administrasi Wali Kelas product page */
body.awk-page {
  --bg: #f8f3ea;
  --bg-soft: #fffaf1;
  --surface: rgba(255, 252, 244, 0.88);
  --surface-strong: #ffffff;
  --ink: #23201d;
  --muted: #746b61;
  --line: rgba(60, 47, 31, 0.14);
  --gold: #f4b83a;
  --gold-strong: #d88c16;
  --purple: #8a7aca;
  --purple-strong: #5a4e9d;
  --brown: #725037;
  background:
    radial-gradient(circle at 10% 8%, rgba(244, 184, 58, 0.22), transparent 26rem),
    radial-gradient(circle at 86% 4%, rgba(138, 122, 202, 0.17), transparent 28rem),
    radial-gradient(circle at 84% 82%, rgba(116, 180, 169, 0.14), transparent 30rem),
    linear-gradient(180deg, #fffaf1 0%, #f8f3ea 46%, #f6efe4 100%);
}

body.awk-page .site-header {
  background: rgba(255, 252, 244, 0.9);
}

.awk-page .awk-hero {
  position: relative;
  min-height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.64fr);
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items: stretch;
  overflow: hidden;
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.awk-page .awk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 clamp(32px, 5vw, 56px) clamp(32px, 5vw, 56px);
  background:
    radial-gradient(circle at 86% 18%, rgba(255, 255, 255, 0.52), transparent 18rem),
    radial-gradient(circle at 12% 84%, rgba(116, 180, 169, 0.18), transparent 18rem),
    linear-gradient(135deg, #fff7e7 0%, #f7ebd9 30%, #e4dcf1 64%, #eef7f5 100%);
  box-shadow: var(--shadow-soft);
}

.awk-hero-copy,
.awk-showcase,
.awk-sample-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 252, 244, 0.78);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.awk-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  max-width: 780px;
  padding: clamp(1.35rem, 4vw, 2.4rem);
}

.awk-page .awk-hero h1 {
  max-width: 15ch;
  font-size: clamp(2.25rem, 4.6vw, 4.05rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.awk-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.5rem;
}

.awk-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.64rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--purple-strong);
  background: rgba(138, 122, 202, 0.1);
  font-size: 0.85rem;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
}

.awk-price-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(220px, 1fr);
  gap: 1rem;
  align-items: stretch;
  margin-top: 1.35rem;
}

.awk-price-box {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 235, 0.92));
  box-shadow: 0 12px 24px rgba(80, 54, 25, 0.1);
  padding: 1rem;
}

.awk-price-label {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.awk-price-new {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2rem, 5vw, 2.65rem);
  font-weight: 930;
  line-height: 1;
  letter-spacing: -0.035em;
}

.awk-price-note {
  display: flex;
  align-items: center;
}

.awk-price-note p {
  margin: 0;
  color: var(--muted);
  font-weight: 760;
  line-height: 1.55;
}

.awk-showcase {
  display: grid;
  gap: 1rem;
  align-self: stretch;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.25rem);
}

.awk-product-carousel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.72), transparent 42%),
    linear-gradient(180deg, rgba(251, 246, 237, 0.92), rgba(236, 229, 244, 0.86));
  box-shadow: var(--shadow-soft);
}

.awk-product-carousel .carousel-slide {
  display: grid;
  gap: 0.8rem;
  padding: clamp(0.85rem, 2vw, 1rem);
}

.awk-product-frame {
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(45, 37, 28, 0.08),
    0 16px 34px rgba(80, 54, 25, 0.12);
}

.awk-product-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

.awk-product-carousel figcaption {
  margin: 0;
  padding-inline: 0.25rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.45;
  text-align: center;
}

.awk-product-carousel .awk-screen-dots {
  position: static !important;
  inset: auto !important;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.25rem 0 1rem;
}

.awk-product-meta,
.awk-template-card,
.awk-spec-card,
.awk-faq-item {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: 0 10px 24px rgba(80, 54, 25, 0.08);
}

.awk-product-meta {
  padding: clamp(1.1rem, 3vw, 1.5rem);
  background:
    radial-gradient(circle at 92% 6%, rgba(244, 184, 58, 0.18), transparent 14rem),
    rgba(255, 255, 255, 0.56);
}

.awk-product-meta h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.awk-check-list {
  list-style: none;
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
}

.awk-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.58;
}

.awk-check-list li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 0.05rem;
  border-radius: 999px;
  color: #1f3f37;
  background: rgba(116, 180, 169, 0.24);
  font-size: 0.75rem;
  font-weight: 900;
}

.awk-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.3vw, 1.4rem);
}

.awk-template-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.35rem);
}

.awk-template-card h3 {
  margin-bottom: 0.9rem;
}

.awk-template-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  color: var(--purple-strong);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.7), transparent 50%),
    linear-gradient(135deg, rgba(244, 184, 58, 0.24), rgba(138, 122, 202, 0.2));
  font-size: 1.55rem;
  font-weight: 900;
}

.awk-page .product-card:hover {
  border-color: rgba(116, 180, 169, 0.55);
}

.awk-sample-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.3rem, 4vw, 2.5rem);
  padding: clamp(1.35rem, 4vw, 2.35rem);
}

.awk-sample-card p:not(.eyebrow) {
  color: var(--muted);
}

.awk-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.3vw, 1.4rem);
}

.awk-spec-card {
  padding: clamp(1rem, 3vw, 1.25rem);
}

.awk-spec-card span {
  display: inline-flex;
  margin-bottom: 0.55rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1.35;
  text-transform: uppercase;
}

.awk-spec-card strong {
  display: block;
  color: var(--ink);
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  line-height: 1.35;
}

.awk-spec-card p {
  margin: 0.75rem 0 0;
  color: var(--muted);
}

.awk-faq {
  display: grid;
  gap: 0.9rem;
  max-width: 980px;
}

.awk-faq-item {
  padding: clamp(1rem, 3vw, 1.25rem);
}

.awk-faq-item h3 {
  margin: 0 0 0.45rem;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.35;
}

.awk-faq-item p {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 980px) {
  .awk-page .awk-hero,
  .awk-template-grid,
  .awk-spec-grid,
  .awk-sample-card {
    grid-template-columns: 1fr;
  }

  .awk-hero-copy,
  .awk-showcase {
    max-width: none;
  }

  .awk-price-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .awk-page .awk-hero {
    padding-top: 0;
    padding-bottom: clamp(1.15rem, 5vw, 1.8rem);
  }

  .awk-hero-copy,
  .awk-showcase,
  .awk-sample-card {
    padding: 1rem;
    border-radius: 24px;
  }

  .awk-chip-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .awk-chip {
    width: 100%;
  }

  .awk-template-card {
    grid-template-columns: 1fr;
  }

  .awk-product-carousel .carousel-button {
    width: 36px;
    height: 36px;
  }

  .awk-product-carousel .carousel-button-prev {
    left: 0.65rem;
  }

  .awk-product-carousel .carousel-button-next {
    right: 0.65rem;
  }
}

/* Attendance Tracker Pro product page */
body.attendance-page {
  --bg: #fbf8f3;
  --bg-soft: #fffdfa;
  --surface: rgba(255, 255, 255, 0.74);
  --surface-strong: #ffffff;
  --ink: #1f1e1d;
  --muted: #645f59;
  --line: rgba(90, 86, 79, 0.12);
  --gold: #b7802e;
  --gold-strong: #8f621f;
  --purple: #d7e1dd;
  --purple-strong: #4d6259;
  --brown: #6a5e4e;
  --attendance-cream: #e8dcc0;
  --attendance-pink: #f3dfdf;
  --attendance-sage: #d7e1dd;
  --attendance-paper: #fbf8f3;
  --attendance-paper-strong: #fffdfa;
  --shadow: 0 24px 70px rgba(70, 70, 60, 0.12);
  --shadow-soft: 0 14px 36px rgba(70, 70, 60, 0.06);
  background:
    radial-gradient(circle at 12% 10%, rgba(232, 220, 192, 0.55), transparent 28rem),
    radial-gradient(circle at 88% 8%, rgba(243, 223, 223, 0.48), transparent 30rem),
    radial-gradient(circle at 82% 82%, rgba(215, 225, 221, 0.55), transparent 32rem),
    linear-gradient(180deg, #fffdfa 0%, #fbf8f3 48%, #f7f3ee 100%);
}

body.attendance-page .site-header {
  background: rgba(255, 253, 250, 0.92);
  box-shadow: 0 14px 44px rgba(70, 70, 60, 0.08);
}

.attendance-page .eyebrow {
  color: var(--brown);
}

.attendance-page .button-primary {
  color: #ffffff;
  background: #b7802e;
  box-shadow: 0 12px 24px rgba(183, 128, 46, 0.22);
}

.attendance-page .button-primary:hover {
  background: #9f6e28;
  box-shadow: 0 16px 32px rgba(183, 128, 46, 0.28);
}

.attendance-page .button-secondary {
  color: #3f403f;
  border-color: rgba(90, 86, 79, 0.14);
  background: rgba(255, 255, 255, 0.72);
}

.attendance-page .product-card:hover {
  border-color: rgba(183, 128, 46, 0.32);
}

.attendance-page .product-badge {
  color: #755d38;
  background: rgba(232, 220, 192, 0.45);
  border-color: rgba(117, 93, 56, 0.12);
}

.attendance-page .product-icon {
  color: #6a5e4e;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.82), transparent 50%),
    linear-gradient(135deg, rgba(232, 220, 192, 0.72), rgba(215, 225, 221, 0.68));
}

/* Hero */
.attendance-page .attendance-hero {
  position: relative;
  min-height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.62fr);
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items: stretch;
  overflow: hidden;
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.attendance-page .attendance-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 clamp(32px, 5vw, 56px) clamp(32px, 5vw, 56px);
  background:
    linear-gradient(
      135deg,
      #e8dcc0 0%,
      #e8dcc0 34%,
      #f3dfdf 34%,
      #f3dfdf 67%,
      #d7e1dd 67%,
      #d7e1dd 100%
    );
  box-shadow: 0 18px 44px rgba(70, 70, 60, 0.10);
}

.attendance-hero-copy,
.attendance-showcase,
.attendance-product-meta {
  border: 1px solid rgba(90, 86, 79, 0.10);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
}

.attendance-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  max-width: 790px;
  padding: clamp(1.35rem, 4vw, 2.4rem);
}

.attendance-page .attendance-hero h1 {
  max-width: 14ch;
  color: #111111;
  font-size: clamp(2.35rem, 4.9vw, 4.15rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.attendance-page .lead {
  color: #5f5a54;
}

.attendance-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.attendance-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.72rem 1rem;
  border: 1px solid rgba(90, 86, 79, 0.10);
  border-radius: 16px;
  color: #494641;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 18px rgba(70, 70, 60, 0.05);
  font-size: 0.88rem;
  font-weight: 780;
  line-height: 1.35;
  text-align: center;
}

.attendance-price-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(220px, 1fr);
  gap: 1rem;
  align-items: stretch;
  margin-top: 1.35rem;
}

.attendance-price-box {
  border: 1px solid rgba(90, 86, 79, 0.10);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 18px rgba(70, 70, 60, 0.05);
  padding: 1rem;
}

.attendance-price-label {
  margin: 0 0 0.35rem;
  color: #7b746b;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.attendance-price-new {
  margin: 0;
  color: #1c1b1a;
  font-size: clamp(2rem, 5vw, 2.65rem);
  font-weight: 930;
  line-height: 1;
  letter-spacing: -0.02em;
}

.attendance-price-note {
  display: flex;
  align-items: center;
}

.attendance-price-note p {
  margin: 0;
  color: #5f5a54;
  font-weight: 760;
  line-height: 1.55;
}

/* Hero visual */
.attendance-showcase {
  display: grid;
  gap: 1rem;
  align-self: stretch;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.25rem);
}

.attendance-product-visual {
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 1px solid rgba(90, 86, 79, 0.08);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 18px 30px rgba(70, 70, 60, 0.12);
}

.attendance-product-visual img {
  width: min(100%, 360px);
  height: auto;
  border-radius: 22px;
  object-fit: contain;
  box-shadow: 0 18px 38px rgba(70, 70, 60, 0.14);
}

.attendance-product-meta {
  padding: clamp(1.1rem, 3vw, 1.5rem);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 6%, rgba(232, 220, 192, 0.52), transparent 14rem),
    #f8f4ee;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03), var(--shadow-soft);
}

.attendance-product-meta h2 {
  margin-bottom: 1rem;
  color: #1c1b1a;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

/* Lists */
.attendance-check-list {
  list-style: none;
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
}

.attendance-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: #5f5a54;
  font-size: 0.96rem;
  line-height: 1.58;
}

.attendance-check-list li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 0.05rem;
  border-radius: 999px;
  color: #4d6259;
  background: #d7e1dd;
  font-size: 0.75rem;
  font-weight: 900;
}

/* Screenshot carousel */
.attendance-screenshot-panel {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(360px, 680px);
  justify-content: center;
  gap: clamp(1rem, 3vw, 1.35rem);
  align-items: center;
  max-width: 1040px;
  margin: clamp(1.3rem, 4vw, 2rem) auto 0;
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 1px solid rgba(90, 86, 79, 0.10);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 12%, rgba(215, 225, 221, 0.65), transparent 18rem),
    radial-gradient(circle at 88% 88%, rgba(243, 223, 223, 0.58), transparent 18rem),
    rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 28px rgba(70, 70, 60, 0.06);
}

.attendance-screenshot-copy {
  min-width: 0;
}

.attendance-screenshot-copy h3 {
  margin: 0 0 0.7rem;
  color: #2b2927;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.attendance-screenshot-copy p {
  margin: 0;
  color: #68625c;
  line-height: 1.7;
}

.attendance-screen-carousel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  justify-self: center;
  width: min(100%, 680px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(90, 86, 79, 0.10);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.8), transparent 42%),
    #f8f4ee;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.46),
    0 18px 42px rgba(70, 70, 60, 0.10);
}

.attendance-screen-carousel .carousel-viewport {
  width: 100%;
  min-width: 0;
}

.attendance-screen-carousel .carousel-slide {
  display: grid;
  gap: 0.8rem;
  padding: clamp(0.75rem, 2vw, 1rem);
}

.attendance-screen-frame {
  overflow: hidden;
  border-radius: 20px;
  background: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(90, 86, 79, 0.08),
    0 16px 34px rgba(70, 70, 60, 0.10);
}

.attendance-screen-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 440px;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  object-position: center;
}

.attendance-screen-carousel figcaption {
  margin: 0;
  padding-inline: 0.25rem;
  color: #5f5a54;
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.45;
  text-align: center;
}

.attendance-screen-carousel .attendance-screen-dots {
  position: static !important;
  inset: auto !important;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.25rem 0 1rem;
}

.attendance-screen-carousel .carousel-dot {
  background: rgba(90, 86, 79, 0.26);
}

.attendance-screen-carousel .carousel-dot.is-active {
  background: #b7802e;
}

.attendance-screen-carousel .carousel-button {
  width: 40px;
  height: 40px;
  color: #ffffff;
  background: rgba(43, 41, 39, 0.62);
}

.attendance-screen-carousel .carousel-button-prev {
  left: 1rem;
}

.attendance-screen-carousel .carousel-button-next {
  right: 1rem;
}

.attendance-screen-carousel:focus-visible {
  outline: 3px solid rgba(183, 128, 46, 0.45);
  outline-offset: 4px;
}

/* Package, benefits, specs, FAQ */
.attendance-package-grid,
.attendance-benefit-grid,
.attendance-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.3vw, 1.4rem);
}

.attendance-package-card,
.attendance-benefit-card,
.attendance-spec-card,
.attendance-faq-item {
  border: 1px solid rgba(90, 86, 79, 0.10);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 24px rgba(70, 70, 60, 0.05);
}

.attendance-package-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.35rem);
}

.attendance-package-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  color: #6a5e4e;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.8), transparent 50%),
    linear-gradient(135deg, #e8dcc0, #d7e1dd);
  font-size: 1.55rem;
  font-weight: 900;
}

.attendance-package-card h3 {
  margin-bottom: 0.6rem;
}

.attendance-package-card p {
  margin: 0;
  color: #665c5c;
}

.attendance-benefit-card,
.attendance-spec-card,
.attendance-faq-item {
  padding: clamp(1rem, 3vw, 1.25rem);
}

.attendance-benefit-card span,
.attendance-spec-card span {
  display: inline-flex;
  margin-bottom: 0.55rem;
  color: #755d38;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1.35;
  text-transform: uppercase;
}

.attendance-benefit-card h3,
.attendance-faq-item h3 {
  margin: 0 0 0.45rem;
  color: #2b2927;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.35;
}

.attendance-benefit-card p,
.attendance-spec-card p,
.attendance-faq-item p {
  margin: 0;
  color: #68625c;
}

.attendance-spec-card strong {
  display: block;
  color: #2b2927;
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  line-height: 1.35;
}

.attendance-spec-card p {
  margin-top: 0.75rem;
}

.attendance-faq {
  display: grid;
  gap: 0.9rem;
  max-width: 980px;
}

/* Section color rhythm */
.attendance-page .studio-section .studio-card {
  background: #fbf8f3;
  border-color: #eee5d8;
}

.attendance-page .catalog-section:nth-of-type(3) .catalog-card {
  background: linear-gradient(180deg, #f4ece2 0%, #f8f3ea 100%);
}

.attendance-page .catalog-section:nth-of-type(5) .catalog-card {
  background: linear-gradient(180deg, #f3dfdf 0%, #f8ecec 100%);
}

.attendance-page .catalog-section:nth-of-type(6) .catalog-card {
  background: #f9f7f2;
}

.attendance-page .contact-section {
  background:
    linear-gradient(135deg, #d7e1dd 0%, #e8dcc0 52%, #f3dfdf 100%);
}

.attendance-page .contact-card {
  background: rgba(255, 255, 255, 0.70);
  border-color: rgba(95, 90, 84, 0.10);
  box-shadow: 0 8px 18px rgba(70, 70, 60, 0.04);
}

/* Responsive */
@media (max-width: 980px) {
  .attendance-page .attendance-hero,
  .attendance-screenshot-panel,
  .attendance-package-grid,
  .attendance-benefit-grid,
  .attendance-spec-grid {
    grid-template-columns: 1fr;
  }

  .attendance-hero-copy,
  .attendance-showcase {
    max-width: none;
  }

  .attendance-price-panel {
    grid-template-columns: 1fr;
  }

  .attendance-screen-carousel {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .attendance-page .attendance-hero {
    padding-top: 0;
    padding-bottom: clamp(1.15rem, 5vw, 1.8rem);
  }

  .attendance-hero-copy,
  .attendance-showcase {
    padding: 1rem;
    border-radius: 24px;
  }

  .attendance-chip-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .attendance-chip {
    width: 100%;
  }

  .attendance-product-visual {
    min-height: auto;
  }

  .attendance-product-visual img {
    width: min(100%, 290px);
  }

  .attendance-screenshot-panel {
    padding: 0.85rem;
    border-radius: 24px;
  }

  .attendance-screen-carousel {
    border-radius: 22px;
  }

  .attendance-screen-carousel .carousel-slide {
    padding: 0.65rem;
  }

  .attendance-screen-frame {
    border-radius: 16px;
  }

  .attendance-screen-frame img {
    max-height: none;
  }

  .attendance-screen-carousel .carousel-button {
    width: 36px;
    height: 36px;
  }

  .attendance-screen-carousel .carousel-button-prev {
    left: 0.65rem;
  }

  .attendance-screen-carousel .carousel-button-next {
    right: 0.65rem;
  }

  .attendance-package-card {
    grid-template-columns: 1fr;
  }
}

/* Teacher Workbook v2 product page */
body.teacher-workbook-page {
  --bg: #f7f3ee;
  --bg-soft: #fbfaf7;
  --surface: rgba(255, 255, 255, 0.78);
  --surface-strong: #ffffff;
  --ink: #242322;
  --muted: #60605e;
  --line: rgba(83, 83, 80, 0.14);
  --gold: #cf650f;
  --gold-strong: #b95404;
  --purple: #b65d50;
  --purple-strong: #b65d50;
  --brown: #5a5a58;
  --teacher-terracotta: #b65d50;
  --teacher-orange: #cf650f;
  --teacher-green: #22a86b;
  --teacher-blue: #2d8bdc;
  --teacher-yellow: #f2c238;
  --teacher-paper: #f7f3ee;
  --teacher-charcoal: #555553;
  --shadow: 0 24px 70px rgba(62, 62, 58, 0.14);
  --shadow-soft: 0 14px 36px rgba(62, 62, 58, 0.08);
  background:
    radial-gradient(circle at 12% 10%, rgba(182, 93, 80, 0.16), transparent 28rem),
    radial-gradient(circle at 88% 8%, rgba(34, 168, 107, 0.14), transparent 30rem),
    radial-gradient(circle at 80% 84%, rgba(207, 101, 15, 0.14), transparent 30rem),
    linear-gradient(180deg, #fbfaf7 0%, #f7f3ee 48%, #f0ede8 100%);
}

body.teacher-workbook-page .site-header {
  background: rgba(251, 250, 247, 0.94);
  box-shadow: 0 14px 44px rgba(62, 62, 58, 0.10);
}

.teacher-workbook-page .eyebrow {
  color: var(--teacher-terracotta);
}

.teacher-workbook-page .button-primary {
  color: #ffffff;
  background: #b65d50;
  box-shadow: 0 12px 26px rgba(182, 93, 80, 0.24);
}

.teacher-workbook-page .button-primary:hover {
  background: #9e4e43;
  box-shadow: 0 16px 34px rgba(182, 93, 80, 0.30);
}

.teacher-workbook-page .button-secondary {
  color: #3f403f;
  border-color: rgba(83, 83, 80, 0.14);
  background: rgba(255, 255, 255, 0.76);
}

.teacher-workbook-page .product-badge {
  color: #a34f16;
  background: rgba(207, 101, 15, 0.10);
  border-color: rgba(207, 101, 15, 0.16);
}

.teacher-workbook-page .product-card:hover {
  border-color: rgba(182, 93, 80, 0.45);
}

.teacher-workbook-page .product-icon {
  color: var(--teacher-terracotta);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.82), transparent 50%),
    linear-gradient(135deg, rgba(182, 93, 80, 0.16), rgba(34, 168, 107, 0.13));
}

/* Hero */
.teacher-workbook-page .teacher-workbook-hero {
  position: relative;
  min-height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.62fr);
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items: stretch;
  overflow: hidden;
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.teacher-workbook-page .teacher-workbook-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 clamp(32px, 5vw, 56px) clamp(32px, 5vw, 56px);
  background:
    radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.76), transparent 18rem),
    linear-gradient(135deg, #fbfaf7 0%, #f7f3ee 42%, #f3e6e0 72%, #e8efe9 100%);
  box-shadow: 0 18px 44px rgba(62, 62, 58, 0.10);
}

.teacher-workbook-hero-copy,
.teacher-workbook-showcase,
.teacher-workbook-product-meta {
  border: 1px solid rgba(83, 83, 80, 0.12);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
}

.teacher-workbook-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  max-width: 820px;
  padding: clamp(1.35rem, 4vw, 2.4rem);
}

.teacher-workbook-page .teacher-workbook-hero h1 {
  max-width: 15ch;
  color: #242322;
  font-size: clamp(2.35rem, 4.9vw, 4.15rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.teacher-workbook-page .lead {
  color: #5a5a58;
}

.teacher-workbook-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.teacher-workbook-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.72rem 1rem;
  border: 1px solid rgba(83, 83, 80, 0.12);
  border-radius: 16px;
  color: #4f4f4d;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 18px rgba(62, 62, 58, 0.05);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.teacher-workbook-price-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(220px, 1fr);
  gap: 1rem;
  align-items: stretch;
  margin-top: 1.35rem;
}

.teacher-workbook-price-box {
  border: 1px solid rgba(83, 83, 80, 0.12);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 18px rgba(62, 62, 58, 0.05);
  padding: 1rem;
}

.teacher-workbook-price-label {
  margin: 0 0 0.35rem;
  color: #6d6d69;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.teacher-workbook-price-old {
  margin: 0 0 0.35rem;
  color: #8a8985;
  font-size: 0.95rem;
  font-weight: 760;
  line-height: 1.25;
  text-decoration: line-through;
}

.teacher-workbook-price-new {
  margin: 0;
  color: #242322;
  font-size: clamp(2rem, 5vw, 2.65rem);
  font-weight: 930;
  line-height: 1;
  letter-spacing: -0.02em;
}

.teacher-workbook-price-note {
  display: flex;
  align-items: center;
}

.teacher-workbook-price-note p {
  margin: 0;
  color: #5a5a58;
  font-weight: 760;
  line-height: 1.55;
}

/* Hero visual */
.teacher-workbook-showcase {
  display: grid;
  gap: 1rem;
  align-self: stretch;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.25rem);
}

.teacher-workbook-product-visual {
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 1px solid rgba(83, 83, 80, 0.10);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.85), transparent 42%),
    linear-gradient(180deg, #fbfaf7, #f2efea);
  box-shadow: 0 18px 30px rgba(62, 62, 58, 0.12);
}

.teacher-workbook-product-visual img {
  width: min(100%, 380px);
  height: auto;
  border-radius: 22px;
  object-fit: contain;
  box-shadow: 0 18px 38px rgba(62, 62, 58, 0.14);
}

.teacher-workbook-product-meta {
  padding: clamp(1.1rem, 3vw, 1.5rem);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 6%, rgba(182, 93, 80, 0.12), transparent 14rem),
    #fbfaf7;
}

.teacher-workbook-product-meta h2 {
  margin-bottom: 1rem;
  color: #242322;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.teacher-workbook-check-list {
  list-style: none;
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
}

.teacher-workbook-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: #5a5a58;
  font-size: 0.96rem;
  line-height: 1.58;
}

.teacher-workbook-check-list li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 0.05rem;
  border-radius: 999px;
  color: #ffffff;
  background: #22a86b;
  font-size: 0.75rem;
  font-weight: 900;
}

/* Preview */
.teacher-workbook-preview-panel {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(360px, 680px);
  justify-content: center;
  gap: clamp(1rem, 3vw, 1.35rem);
  align-items: center;
  max-width: 1040px;
  margin: clamp(1.3rem, 4vw, 2rem) auto 0;
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 1px solid rgba(83, 83, 80, 0.12);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 12%, rgba(34, 168, 107, 0.12), transparent 18rem),
    radial-gradient(circle at 88% 88%, rgba(182, 93, 80, 0.12), transparent 18rem),
    rgba(255, 255, 255, 0.76);
  box-shadow: var(--shadow-soft);
}

.teacher-workbook-preview-copy h3 {
  margin: 0 0 0.7rem;
  color: #242322;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.teacher-workbook-preview-copy p {
  margin: 0;
  color: #60605e;
  line-height: 1.7;
}

.teacher-workbook-preview-frame {
  overflow: hidden;
  border-radius: 24px;
  background: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(83, 83, 80, 0.08),
    0 18px 42px rgba(62, 62, 58, 0.12);
}

.teacher-workbook-preview-frame img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Module, spec, FAQ */
.teacher-workbook-module-grid,
.teacher-workbook-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.3vw, 1.4rem);
}

.teacher-workbook-module-card,
.teacher-workbook-spec-card,
.teacher-workbook-faq-item {
  border: 1px solid rgba(83, 83, 80, 0.12);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 24px rgba(62, 62, 58, 0.06);
  padding: clamp(1rem, 3vw, 1.25rem);
}

.teacher-workbook-module-card span,
.teacher-workbook-spec-card span {
  display: inline-flex;
  margin-bottom: 0.55rem;
  color: #b65d50;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1.35;
  text-transform: uppercase;
}

.teacher-workbook-module-card h3,
.teacher-workbook-faq-item h3 {
  margin: 0 0 0.45rem;
  color: #242322;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.35;
}

.teacher-workbook-module-card p,
.teacher-workbook-spec-card p,
.teacher-workbook-faq-item p {
  margin: 0;
  color: #60605e;
}

.teacher-workbook-spec-card strong {
  display: block;
  color: #242322;
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  line-height: 1.35;
}

.teacher-workbook-spec-card p {
  margin-top: 0.75rem;
}

.teacher-workbook-faq {
  display: grid;
  gap: 0.9rem;
  max-width: 980px;
}

.teacher-workbook-page .catalog-section:nth-of-type(3) .catalog-card {
  background: linear-gradient(180deg, #fbfaf7 0%, #f4efe9 100%);
}

.teacher-workbook-page .catalog-section:nth-of-type(5) .catalog-card {
  background: linear-gradient(180deg, #f7ede9 0%, #fbfaf7 100%);
}

.teacher-workbook-page .catalog-section:nth-of-type(6) .catalog-card {
  background: linear-gradient(180deg, #edf6f0 0%, #fbfaf7 100%);
}

.teacher-workbook-page .contact-section {
  background:
    linear-gradient(135deg, #f7f3ee 0%, #f3e6e0 52%, #e8efe9 100%);
}

.teacher-workbook-page .contact-card {
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(83, 83, 80, 0.12);
  box-shadow: 0 8px 18px rgba(62, 62, 58, 0.06);
}

/* Responsive */
@media (max-width: 980px) {
  .teacher-workbook-page .teacher-workbook-hero,
  .teacher-workbook-preview-panel,
  .teacher-workbook-module-grid,
  .teacher-workbook-spec-grid {
    grid-template-columns: 1fr;
  }

  .teacher-workbook-hero-copy,
  .teacher-workbook-showcase {
    max-width: none;
  }

  .teacher-workbook-price-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .teacher-workbook-page .teacher-workbook-hero {
    padding-top: 0;
    padding-bottom: clamp(1.15rem, 5vw, 1.8rem);
  }

  .teacher-workbook-hero-copy,
  .teacher-workbook-showcase {
    padding: 1rem;
    border-radius: 24px;
  }

  .teacher-workbook-chip-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .teacher-workbook-chip {
    width: 100%;
  }

  .teacher-workbook-product-visual {
    min-height: auto;
  }

  .teacher-workbook-product-visual img {
    width: min(100%, 300px);
  }

  .teacher-workbook-preview-panel {
    padding: 0.85rem;
    border-radius: 24px;
  }
}

/* Product detail pages: make feature grids visually different from catalog cards */
.product-detail-page .product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.15rem);
}

.product-detail-page .product-grid > .product-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.product-detail-page .product-card {
  position: relative;
  overflow: hidden;
  min-height: auto;
  border-radius: 24px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--surface-strong) 86%, transparent),
      color-mix(in srgb, var(--surface) 76%, transparent)
    );
  box-shadow: 0 12px 30px rgba(80, 54, 25, 0.08);
}

body.app-page.product-detail-page .product-card {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.035)
    );
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.product-detail-page .product-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--gold), var(--purple));
  opacity: 0.9;
}

.product-detail-page .product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

.product-detail-page .product-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: none;
  align-items: start;
  justify-items: stretch;
  gap: 0.95rem;
  padding: clamp(1rem, 2.4vw, 1.35rem);
  text-align: left;
}

.product-detail-page .product-icon,
.product-detail-page .product-icon-image {
  width: 52px;
  height: 52px;
  border-radius: 16px;
}

.product-detail-page .product-icon {
  font-size: 1.45rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
}

.product-detail-page .product-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  padding: 0;
  text-align: left;
}

.product-detail-page .product-badge {
  margin-bottom: 0.45rem;
  padding: 0.28rem 0.55rem;
  font-size: 0.68rem;
  letter-spacing: 0.055em;
}

.product-detail-page .product-body h3 {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  overflow: visible;
  text-align: left;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.product-detail-page .product-badge {
  align-self: flex-start;
}

.product-detail-page .product-card .product-body p {
  width: 100%;
  text-align: left;
}

.product-detail-page .product-card .product-body p {
  display: block;
  margin-top: 0.45rem;
  overflow: visible;
  color: var(--muted);
  text-overflow: clip;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

@media (max-width: 760px) {
  .product-detail-page .product-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .product-detail-page .product-grid > .product-card:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .product-detail-page .product-link {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.9rem;
  }

  .product-detail-page .product-icon,
  .product-detail-page .product-icon-image {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .product-detail-page .product-icon {
    font-size: 1.25rem;
  }
}

/* Tata Tertib Siswa product page */
body.tata-tertib-page {
  --bg: #f7eeee;
  --bg-soft: #fff8f6;
  --surface: rgba(255, 250, 247, 0.88);
  --surface-strong: #ffffff;
  --ink: #262321;
  --muted: #746866;
  --line: rgba(78, 55, 51, 0.14);
  --gold: #d9a441;
  --gold-strong: #a97b22;
  --purple: #e0a4a4;
  --purple-strong: #8c5a55;
  --brown: #6d4a32;
  --tata-green: #148d69;
  --tata-green-soft: #d9f0e8;
  background:
    radial-gradient(circle at 9% 9%, rgba(217, 164, 65, 0.2), transparent 28rem),
    radial-gradient(circle at 90% 4%, rgba(224, 164, 164, 0.24), transparent 30rem),
    radial-gradient(circle at 86% 86%, rgba(20, 141, 105, 0.13), transparent 30rem),
    linear-gradient(180deg, #fff8f6 0%, #f7eeee 48%, #f1dfdd 100%);
}

body.tata-tertib-page .site-header {
  background: rgba(255, 250, 247, 0.9);
}

.tata-tertib-page .eyebrow {
  color: var(--tata-green);
}

.tata-tertib-page .button-primary {
  color: #201914;
  background: linear-gradient(135deg, #e9b652, #ffe0a0);
}

.tata-tertib-page .button-primary:hover {
  box-shadow: 0 18px 44px rgba(169, 123, 34, 0.18);
}

.tata-tertib-page .button-secondary {
  background: rgba(255, 255, 255, 0.72);
}

.tata-tertib-page .product-card:hover {
  border-color: rgba(20, 141, 105, 0.32);
}

.tata-tertib-page .product-badge {
  color: var(--tata-green);
  background: rgba(20, 141, 105, 0.09);
}

.tata-tertib-page .product-icon {
  color: var(--tata-green);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.8), transparent 50%),
    linear-gradient(135deg, rgba(217, 164, 65, 0.22), rgba(20, 141, 105, 0.14));
}

.tata-tertib-page .tata-hero {
  position: relative;
  min-height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.66fr);
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items: stretch;
  overflow: hidden;
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.tata-tertib-page .tata-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 clamp(32px, 5vw, 56px) clamp(32px, 5vw, 56px);
  background:
    radial-gradient(circle at 86% 18%, rgba(255, 255, 255, 0.56), transparent 18rem),
    radial-gradient(circle at 10% 84%, rgba(20, 141, 105, 0.13), transparent 19rem),
    linear-gradient(135deg, #fff7f5 0%, #f5dfdd 38%, #f6e8df 68%, #eaf5f1 100%);
  box-shadow: var(--shadow-soft);
}

.tata-hero-copy,
.tata-showcase,
.tata-product-meta,
.tata-preview-panel,
.tata-package-card,
.tata-benefit-card,
.tata-faq-item {
  border: 1px solid var(--line);
  background: rgba(255, 250, 247, 0.82);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.tata-hero-copy,
.tata-showcase,
.tata-product-meta,
.tata-preview-panel {
  border-radius: var(--radius-lg);
}

.tata-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  max-width: 790px;
  padding: clamp(1.35rem, 4vw, 2.4rem);
}

.tata-tertib-page .tata-hero h1 {
  max-width: 14.5ch;
  font-size: clamp(2.25rem, 4.7vw, 4.1rem);
  line-height: 1.07;
  letter-spacing: -0.04em;
}

.tata-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.5rem;
}

.tata-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.64rem 0.85rem;
  border: 1px solid rgba(20, 141, 105, 0.18);
  border-radius: 999px;
  color: var(--tata-green);
  background: rgba(217, 240, 232, 0.76);
  font-size: 0.85rem;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
}

.tata-price-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(220px, 1fr);
  gap: 1rem;
  align-items: stretch;
  margin-top: 1.35rem;
}

.tata-price-box {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 246, 241, 0.92));
  box-shadow: 0 12px 24px rgba(102, 65, 45, 0.08);
  padding: 1rem;
}

.tata-price-label {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.tata-price-new {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2rem, 5vw, 2.65rem);
  font-weight: 930;
  line-height: 1;
  letter-spacing: -0.035em;
}

.tata-price-note {
  display: flex;
  align-items: center;
}

.tata-price-note p {
  margin: 0;
  color: var(--muted);
  font-weight: 760;
  line-height: 1.55;
}

.tata-showcase {
  display: grid;
  gap: 1rem;
  align-self: stretch;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.25rem);
}

.tata-product-carousel,
.tata-screen-carousel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.75), transparent 42%),
    linear-gradient(180deg, rgba(255, 241, 239, 0.94), rgba(238, 211, 208, 0.82));
}

.tata-product-carousel .carousel-slide,
.tata-screen-carousel .carousel-slide {
  display: grid;
  min-width: 100%;
  gap: 0.8rem;
  padding: clamp(0.8rem, 2vw, 1rem);
}

.tata-product-frame,
.tata-screen-frame {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(78, 55, 51, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 30px rgba(78, 55, 51, 0.08);
}

.tata-product-frame img,
.tata-screen-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  background: #f4dedd;
}

.tata-product-carousel figcaption,
.tata-screen-carousel figcaption {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 760;
  line-height: 1.45;
  text-align: center;
}

.tata-product-carousel .tata-screen-dots,
.tata-screen-carousel .tata-screen-dots {
  position: static;
  padding: 0 0 1rem;
}

.tata-product-meta {
  border-radius: 24px;
  padding: clamp(1rem, 2.4vw, 1.25rem);
}

.tata-product-meta h2 {
  margin-bottom: 0.9rem;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
}

.tata-check-list {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tata-check-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  color: var(--muted);
  font-weight: 680;
  line-height: 1.55;
}

.tata-check-list li span {
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  color: #fff;
  background: var(--tata-green);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.tata-benefit-grid,
.tata-package-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.15rem);
}

.tata-benefit-card,
.tata-faq-item {
  border-radius: 24px;
  padding: clamp(1rem, 3vw, 1.25rem);
}

.tata-benefit-card span {
  display: inline-flex;
  margin-bottom: 0.55rem;
  color: var(--tata-green);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1.35;
  text-transform: uppercase;
}

.tata-benefit-card h3,
.tata-faq-item h3 {
  margin: 0 0 0.45rem;
  color: var(--ink);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.35;
}

.tata-benefit-card p,
.tata-faq-item p {
  margin: 0;
  color: var(--muted);
}

.tata-preview-panel {
  display: grid;
  grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.4vw, 1.35rem);
  align-items: center;
  padding: clamp(1rem, 3vw, 1.4rem);
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.72), transparent 18rem),
    linear-gradient(135deg, rgba(245, 224, 223, 0.9), rgba(234, 246, 241, 0.88));
}

.tata-preview-copy h2 {
  margin-bottom: 0.8rem;
}

.tata-preview-copy p:not(.eyebrow) {
  color: var(--muted);
}

.tata-screen-carousel .carousel-slide {
  padding: clamp(0.8rem, 2vw, 1rem);
}

.tata-screen-frame img {
  max-height: 620px;
}

.tata-package-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  border-radius: 24px;
  padding: clamp(1rem, 3vw, 1.35rem);
}

.tata-package-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  color: var(--tata-green);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.82), transparent 50%),
    linear-gradient(135deg, #f5e0df, #d9f0e8);
  font-size: 1.35rem;
  font-weight: 900;
}

.tata-package-card h3 {
  margin: 0 0 0.45rem;
}

.tata-package-card p {
  margin: 0;
  color: var(--muted);
}

.tata-faq {
  display: grid;
  gap: 0.9rem;
  max-width: 980px;
}

.tata-tertib-page .studio-section .studio-card {
  background: rgba(255, 250, 247, 0.86);
}

.tata-tertib-page .catalog-section:nth-of-type(3) .catalog-card {
  background: linear-gradient(180deg, #fff8f6 0%, #f8e8e7 100%);
}

.tata-tertib-page .catalog-section:nth-of-type(5) .catalog-card {
  background: linear-gradient(180deg, #eaf6f1 0%, #fff8f6 100%);
}

.tata-tertib-page .contact-section {
  background:
    linear-gradient(135deg, #d9f0e8 0%, #f5e0df 52%, #f4e3c9 100%);
}

.tata-tertib-page .contact-card {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(78, 55, 51, 0.1);
}

@media (max-width: 980px) {
  .tata-tertib-page .tata-hero,
  .tata-preview-panel,
  .tata-benefit-grid,
  .tata-package-grid {
    grid-template-columns: 1fr;
  }

  .tata-hero-copy,
  .tata-showcase {
    max-width: none;
  }

  .tata-price-panel {
    grid-template-columns: 1fr;
  }

  .tata-screen-carousel {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .tata-tertib-page .tata-hero {
    padding-top: 0;
    padding-bottom: clamp(1.15rem, 5vw, 1.8rem);
  }

  .tata-hero-copy,
  .tata-showcase,
  .tata-preview-panel {
    padding: 1rem;
    border-radius: 24px;
  }

  .tata-tertib-page .tata-hero h1 {
    max-width: 100%;
  }

  .tata-chip-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .tata-chip {
    width: 100%;
  }

  .tata-product-carousel,
  .tata-screen-carousel {
    border-radius: 22px;
  }

  .tata-product-carousel .carousel-slide,
  .tata-screen-carousel .carousel-slide {
    padding: 0.65rem;
  }

  .tata-product-frame,
  .tata-screen-frame {
    border-radius: 16px;
  }

  .tata-product-frame img,
  .tata-screen-frame img {
    max-height: none;
  }

  .tata-product-carousel .carousel-button,
  .tata-screen-carousel .carousel-button {
    width: 36px;
    height: 36px;
  }

  .tata-product-carousel .carousel-button-prev,
  .tata-screen-carousel .carousel-button-prev {
    left: 0.65rem;
  }

  .tata-product-carousel .carousel-button-next,
  .tata-screen-carousel .carousel-button-next {
    right: 0.65rem;
  }

  .tata-package-card {
    grid-template-columns: 1fr;
  }
}



/* Generic landing page untuk produk edukasi Gurudigitools */
body.edu-product-page {
  --edu-accent: #118a54;
  --edu-accent-2: #f2c238;
  --edu-soft: #f8f3ea;
  --edu-wash: #e9f6ef;
  --edu-dark: #224238;
  --bg: var(--edu-soft);
  --bg-soft: #fffdfa;
  --surface: rgba(255, 255, 255, 0.76);
  --surface-strong: #ffffff;
  --ink: #211f1d;
  --muted: #67615c;
  --line: rgba(52, 44, 34, 0.13);
  --gold: var(--edu-accent-2);
  --gold-strong: color-mix(in srgb, var(--edu-accent-2) 76%, #7a4b06);
  --purple: var(--edu-accent);
  --purple-strong: var(--edu-dark);
  --brown: color-mix(in srgb, var(--edu-dark) 72%, #7b4b24);
  --shadow: 0 24px 70px rgba(44, 38, 30, 0.13);
  --shadow-soft: 0 14px 36px rgba(44, 38, 30, 0.08);
  background:
    radial-gradient(circle at 10% 8%, color-mix(in srgb, var(--edu-accent-2) 24%, transparent), transparent 27rem),
    radial-gradient(circle at 88% 6%, color-mix(in srgb, var(--edu-accent) 18%, transparent), transparent 30rem),
    radial-gradient(circle at 84% 84%, color-mix(in srgb, var(--edu-accent) 12%, white), transparent 30rem),
    linear-gradient(180deg, #fffdfa 0%, var(--edu-soft) 48%, color-mix(in srgb, var(--edu-wash) 55%, var(--edu-soft)) 100%);
}

body.edu-product-page .site-header {
  background: color-mix(in srgb, var(--surface-strong) 91%, transparent);
  box-shadow: 0 14px 44px rgba(44, 38, 30, 0.09);
}

.edu-product-page .eyebrow,
.edu-product-page .product-badge {
  color: var(--purple-strong);
}

.edu-product-page .button-primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--edu-accent), color-mix(in srgb, var(--edu-accent) 76%, #111111));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--edu-accent) 24%, transparent);
}

.edu-product-page .button-primary:hover {
  box-shadow: 0 18px 38px color-mix(in srgb, var(--edu-accent) 32%, transparent);
}

.edu-product-page .button-secondary {
  background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
}

.edu-hero {
  position: relative;
  min-height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 0.62fr);
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items: stretch;
  overflow: hidden;
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.edu-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 clamp(32px, 5vw, 56px) clamp(32px, 5vw, 56px);
  background:
    radial-gradient(circle at 86% 17%, rgba(255, 255, 255, 0.70), transparent 19rem),
    radial-gradient(circle at 14% 84%, color-mix(in srgb, var(--edu-accent-2) 16%, transparent), transparent 18rem),
    linear-gradient(135deg, #fffdfa 0%, color-mix(in srgb, var(--edu-soft) 78%, #ffffff) 36%, color-mix(in srgb, var(--edu-wash) 70%, #ffffff) 70%, color-mix(in srgb, var(--edu-accent) 13%, #ffffff) 100%);
  box-shadow: var(--shadow-soft);
}

.edu-hero-copy,
.edu-showcase,
.edu-meta,
.edu-card,
.edu-step-card,
.edu-faq-item,
.edu-offer-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
}

.edu-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  max-width: 820px;
  padding: clamp(1.35rem, 4vw, 2.4rem);
}

.edu-hero h1 {
  max-width: 16ch;
  font-size: clamp(2.25rem, 4.8vw, 4.1rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.edu-hero .lead {
  color: var(--muted);
}

.edu-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.72rem;
  margin-top: 1.45rem;
}

.edu-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.68rem 0.92rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--purple-strong);
  background: color-mix(in srgb, var(--edu-accent) 10%, #ffffff);
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
}

.edu-price-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(220px, 1fr);
  gap: 1rem;
  align-items: stretch;
  margin-top: 1.35rem;
}

.edu-price-box {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
  box-shadow: 0 12px 24px rgba(44, 38, 30, 0.08);
  padding: 1rem;
}

.edu-price-label {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.edu-price-new {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2rem, 5vw, 2.65rem);
  font-weight: 930;
  line-height: 1;
  letter-spacing: -0.035em;
}

.edu-price-old {
  display: block;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.96rem;
  font-weight: 760;
  text-decoration: line-through;
}

.edu-price-note {
  display: flex;
  align-items: center;
}

.edu-price-note p {
  margin: 0;
  color: var(--muted);
  font-weight: 760;
  line-height: 1.55;
}

.edu-showcase {
  display: grid;
  gap: 1rem;
  align-self: stretch;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.25rem);
}

.edu-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.75), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--edu-accent-2) 22%, #ffffff), color-mix(in srgb, var(--edu-accent) 16%, #ffffff));
  box-shadow: 0 18px 34px rgba(44, 38, 30, 0.10);
}

.edu-visual img {
  position: relative;
  z-index: 2;
  width: min(100%, 420px);
  height: auto;
  max-height: 430px;
  border-radius: 22px;
  object-fit: contain;
  box-shadow: 0 18px 42px rgba(44, 38, 30, 0.16);
}

.edu-cover-fallback {
  position: absolute;
  inset: clamp(1rem, 4vw, 1.5rem);
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 1.4rem;
  border: 1px solid color-mix(in srgb, var(--edu-accent) 18%, transparent);
  border-radius: 24px;
  color: var(--purple-strong);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.78), rgba(255,255,255,0.46)),
    radial-gradient(circle at 25% 22%, color-mix(in srgb, var(--edu-accent-2) 22%, transparent), transparent 14rem);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
  letter-spacing: -0.04em;
}

.edu-meta {
  padding: clamp(1.1rem, 3vw, 1.5rem);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 6%, color-mix(in srgb, var(--edu-accent-2) 18%, transparent), transparent 14rem),
    color-mix(in srgb, var(--surface-strong) 78%, transparent);
}

.edu-meta h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.edu-check-list {
  list-style: none;
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
}

.edu-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.58;
}

.edu-check-list li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 0.05rem;
  border-radius: 999px;
  color: #ffffff;
  background: var(--edu-accent);
  font-size: 0.75rem;
  font-weight: 900;
}

.edu-card-grid,
.edu-step-grid,
.edu-spec-grid,
.edu-offer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.3vw, 1.4rem);
}

.edu-card,
.edu-step-card,
.edu-offer-card {
  padding: clamp(1rem, 3vw, 1.28rem);
  border-radius: 24px;
}

.edu-card span,
.edu-step-card span,
.edu-offer-card span {
  display: inline-flex;
  margin-bottom: 0.55rem;
  color: var(--purple-strong);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1.35;
  text-transform: uppercase;
}

.edu-card h3,
.edu-step-card h3,
.edu-faq-item h3,
.edu-offer-card h3 {
  margin: 0 0 0.45rem;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.35;
}

.edu-card p,
.edu-step-card p,
.edu-faq-item p,
.edu-offer-card p {
  margin: 0;
  color: var(--muted);
}

.edu-faq {
  display: grid;
  gap: 0.9rem;
  max-width: 980px;
}

.edu-faq-item {
  padding: clamp(1rem, 3vw, 1.25rem);
  border-radius: 24px;
}

.edu-product-page .catalog-card:nth-child(1),
.edu-product-page .studio-card {
  background:
    radial-gradient(circle at 95% 7%, color-mix(in srgb, var(--edu-accent) 8%, transparent), transparent 16rem),
    color-mix(in srgb, var(--surface-strong) 72%, transparent);
}

.edu-product-page .contact-section {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--edu-accent) 18%, #ffffff), color-mix(in srgb, var(--edu-accent-2) 20%, #ffffff));
}

.edu-product-page .contact-card {
  background: rgba(255, 255, 255, 0.70);
}

.product-icon-letter {
  font-size: 1.55rem;
  letter-spacing: -0.05em;
}

@media (max-width: 980px) {
  .edu-hero,
  .edu-card-grid,
  .edu-step-grid,
  .edu-spec-grid,
  .edu-offer-grid {
    grid-template-columns: 1fr;
  }

  .edu-price-panel {
    grid-template-columns: 1fr;
  }

  .edu-hero-copy,
  .edu-showcase {
    max-width: none;
  }
}

@media (max-width: 760px) {
  .edu-hero {
    padding-top: 0;
    padding-bottom: clamp(1.15rem, 5vw, 1.8rem);
  }

  .edu-hero-copy,
  .edu-showcase {
    padding: 1rem;
    border-radius: 24px;
  }

  .edu-chip-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .edu-chip {
    width: 100%;
  }

  .edu-visual {
    min-height: 230px;
  }

  .edu-visual img {
    width: min(100%, 310px);
  }
}

/* Product screenshot carousel */
.edu-screenshot-carousel {
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(31, 95, 66, 0.16);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(236, 247, 239, 0.9));
  box-shadow: 0 24px 70px rgba(31, 95, 66, 0.14);
}

.edu-carousel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 22px 14px;
}

.edu-carousel-header h2 {
  margin: 4px 0 0;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.2;
}

.edu-carousel-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(20, 149, 93, 0.1);
  color: var(--edu-dark, #1f5f42);
  font-size: 0.86rem;
  font-weight: 800;
}

.edu-carousel-frame {
  position: relative;
  overflow: hidden;
  margin: 0 18px 18px;
  border-radius: 22px;
  background: #f7f7f2;
}

.edu-carousel-track {
  display: flex;
  transition: transform 420ms ease;
  will-change: transform;
}

.edu-carousel-slide {
  min-width: 100%;
  margin: 0;
  padding: 0;
}

.edu-carousel-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: #f7f7f2;
}

.edu-carousel-button {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--edu-dark, #1f5f42);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}

.edu-carousel-button:hover {
  background: #ffffff;
}

.edu-carousel-button-prev {
  left: 14px;
}

.edu-carousel-button-next {
  right: 14px;
}

.edu-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 18px 20px;
}

.edu-carousel-dot {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(31, 95, 66, 0.25);
  cursor: pointer;
  transition: width 220ms ease, background 220ms ease;
}

.edu-carousel-dot.is-active {
  width: 28px;
  background: var(--edu-accent, #14955d);
}

@media (max-width: 640px) {
  .edu-carousel-header {
    padding: 18px 18px 12px;
  }

  .edu-carousel-frame {
    margin: 0 14px 14px;
    border-radius: 18px;
  }

  .edu-carousel-button {
    width: 36px;
    height: 36px;
    font-size: 1.7rem;
  }

  .edu-carousel-slide img {
    aspect-ratio: 4 / 3;
  }
}

/* =========================================================
   Tambahan khusus halaman Generator Modul Ajar SD/MI
   File halaman: /product/edukasi/modul-sd/
   ========================================================= */

.modul-sd-page .edu-hero h1 {
  max-width: 18ch;
}

.modul-sd-page .edu-visual-cover {
  min-height: 360px;
}

.modul-sd-page .edu-visual-cover img {
  width: min(100%, 460px);
  max-height: 520px;
}

.modul-sd-screen-panel {
  display: grid;
  grid-template-columns: minmax(240px, 330px) minmax(360px, 720px);
  justify-content: center;
  gap: clamp(1rem, 3vw, 1.45rem);
  align-items: center;
  max-width: 1120px;
  margin: clamp(1.35rem, 4vw, 2rem) auto 0;
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--edu-accent-2) 24%, transparent), transparent 17rem),
    radial-gradient(circle at 88% 88%, color-mix(in srgb, var(--edu-accent) 13%, transparent), transparent 18rem),
    color-mix(in srgb, var(--surface-strong) 78%, transparent);
  box-shadow: var(--shadow-soft);
}

.modul-sd-screen-copy {
  min-width: 0;
}

.modul-sd-screen-copy h3 {
  margin: 0 0 0.7rem;
  color: var(--ink);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
}

.modul-sd-screen-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.modul-sd-screen-carousel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  justify-self: center;
  width: min(100%, 720px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.86), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--edu-soft) 78%, #ffffff), color-mix(in srgb, var(--edu-wash) 82%, #ffffff));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 18px 42px rgba(44, 38, 30, 0.11);
}

.modul-sd-screen-carousel .carousel-viewport {
  width: 100%;
  min-width: 0;
}

.modul-sd-screen-carousel .carousel-slide {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: clamp(0.75rem, 2vw, 1rem);
}

.modul-sd-screen-frame {
  overflow: hidden;
  border-radius: 20px;
  background: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(44, 38, 30, 0.08),
    0 16px 34px rgba(44, 38, 30, 0.10);
}

.modul-sd-screen-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  aspect-ratio: 800 / 415;
  object-fit: contain;
  object-position: center;
}

.modul-sd-screen-carousel figcaption {
  margin: 0;
  padding-inline: 0.25rem;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 760;
  line-height: 1.45;
  text-align: center;
}

.modul-sd-screen-carousel .modul-sd-screen-dots {
  position: static !important;
  inset: auto !important;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.25rem 0 1rem;
}

.modul-sd-screen-carousel .carousel-dot {
  background: color-mix(in srgb, var(--edu-accent) 22%, transparent);
}

.modul-sd-screen-carousel .carousel-dot.is-active {
  background: var(--edu-accent);
}

.modul-sd-screen-carousel .carousel-button {
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: color-mix(in srgb, var(--edu-dark) 76%, transparent);
}

.modul-sd-screen-carousel .carousel-button:hover {
  background: color-mix(in srgb, var(--edu-dark) 88%, transparent);
}

.modul-sd-screen-carousel .carousel-button-prev {
  left: 1rem;
}

.modul-sd-screen-carousel .carousel-button-next {
  right: 1rem;
}

.modul-sd-screen-carousel:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--edu-accent) 42%, transparent);
  outline-offset: 4px;
}

.modul-sd-dashboard-split {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(320px, 1.18fr);
  gap: clamp(1rem, 3vw, 1.75rem);
  align-items: center;
}

.modul-sd-dashboard-copy h2 {
  max-width: 13ch;
  margin-bottom: 0.9rem;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.modul-sd-dashboard-copy p {
  color: var(--muted);
}

.modul-sd-dashboard-media {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.78), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--edu-accent-2) 16%, #ffffff), color-mix(in srgb, var(--edu-accent) 12%, #ffffff));
  box-shadow: 0 18px 38px rgba(44, 38, 30, 0.13);
}

.modul-sd-dashboard-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 415;
  object-fit: contain;
  object-position: center;
}

.modul-sd-mini-list {
  list-style: none;
  display: grid;
  gap: 0.72rem;
  margin: 1.15rem 0 0;
  padding: 0;
}

.modul-sd-mini-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--muted);
  font-weight: 760;
  line-height: 1.55;
}

.modul-sd-mini-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 0.05rem;
  border-radius: 999px;
  color: #ffffff;
  background: var(--edu-accent);
  font-size: 0.75rem;
  font-weight: 900;
}

@media (max-width: 980px) {
  .modul-sd-screen-panel,
  .modul-sd-dashboard-split {
    grid-template-columns: 1fr;
  }

  .modul-sd-dashboard-copy h2 {
    max-width: 16ch;
  }
}

@media (max-width: 760px) {
  .modul-sd-page .edu-visual-cover {
    min-height: 260px;
  }

  .modul-sd-page .edu-visual-cover img {
    width: min(100%, 330px);
  }

  .modul-sd-screen-panel {
    padding: 0.85rem;
    border-radius: 24px;
  }

  .modul-sd-screen-carousel,
  .modul-sd-dashboard-media {
    border-radius: 22px;
  }

  .modul-sd-screen-carousel .carousel-button {
    width: 36px;
    height: 36px;
  }

  .modul-sd-screen-carousel .carousel-button-prev {
    left: 0.55rem;
  }

  .modul-sd-screen-carousel .carousel-button-next {
    right: 0.55rem;
  }

  .modul-sd-screen-carousel figcaption {
    font-size: 0.86rem;
  }
}

/* =========================================================
   Tambahan khusus halaman Generator Modul Ajar SMP/MTs
   File halaman: /product/edukasi/modul-smp/
   ========================================================= */

.modul-smp-page .edu-hero h1 {
  max-width: 18ch;
}

.modul-smp-page .edu-visual-cover {
  min-height: 360px;
}

.modul-smp-page .edu-visual-cover img {
  width: min(100%, 460px);
  max-height: 520px;
}

.modul-smp-screen-panel {
  display: grid;
  grid-template-columns: minmax(240px, 330px) minmax(360px, 720px);
  justify-content: center;
  gap: clamp(1rem, 3vw, 1.45rem);
  align-items: center;
  max-width: 1120px;
  margin: clamp(1.35rem, 4vw, 2rem) auto 0;
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--edu-accent-2) 24%, transparent), transparent 17rem),
    radial-gradient(circle at 88% 88%, color-mix(in srgb, var(--edu-accent) 13%, transparent), transparent 18rem),
    color-mix(in srgb, var(--surface-strong) 78%, transparent);
  box-shadow: var(--shadow-soft);
}

.modul-smp-screen-copy {
  min-width: 0;
}

.modul-smp-screen-copy h3 {
  margin: 0 0 0.7rem;
  color: var(--ink);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
}

.modul-smp-screen-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.modul-smp-screen-carousel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  justify-self: center;
  width: min(100%, 720px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.86), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--edu-soft) 78%, #ffffff), color-mix(in srgb, var(--edu-wash) 82%, #ffffff));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 18px 42px rgba(44, 38, 30, 0.11);
}

.modul-smp-screen-carousel .carousel-viewport {
  width: 100%;
  min-width: 0;
}

.modul-smp-screen-carousel .carousel-slide {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: clamp(0.75rem, 2vw, 1rem);
}

.modul-smp-screen-frame {
  overflow: hidden;
  border-radius: 20px;
  background: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(44, 38, 30, 0.08),
    0 16px 34px rgba(44, 38, 30, 0.10);
}

.modul-smp-screen-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  aspect-ratio: 800 / 415;
  object-fit: contain;
  object-position: center;
}

.modul-smp-screen-carousel figcaption {
  margin: 0;
  padding-inline: 0.25rem;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 760;
  line-height: 1.45;
  text-align: center;
}

.modul-smp-screen-carousel .modul-smp-screen-dots {
  position: static !important;
  inset: auto !important;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.25rem 0 1rem;
}

.modul-smp-screen-carousel .carousel-dot {
  background: color-mix(in srgb, var(--edu-accent) 22%, transparent);
}

.modul-smp-screen-carousel .carousel-dot.is-active {
  background: var(--edu-accent);
}

.modul-smp-screen-carousel .carousel-button {
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: color-mix(in srgb, var(--edu-dark) 76%, transparent);
}

.modul-smp-screen-carousel .carousel-button:hover {
  background: color-mix(in srgb, var(--edu-dark) 88%, transparent);
}

.modul-smp-screen-carousel .carousel-button-prev {
  left: 1rem;
}

.modul-smp-screen-carousel .carousel-button-next {
  right: 1rem;
}

.modul-smp-screen-carousel:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--edu-accent) 42%, transparent);
  outline-offset: 4px;
}

.modul-smp-dashboard-split {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(320px, 1.18fr);
  gap: clamp(1rem, 3vw, 1.75rem);
  align-items: center;
}

.modul-smp-dashboard-copy h2 {
  max-width: 13ch;
  margin-bottom: 0.9rem;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.modul-smp-dashboard-copy p {
  color: var(--muted);
}

.modul-smp-dashboard-media {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.78), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--edu-accent-2) 16%, #ffffff), color-mix(in srgb, var(--edu-accent) 12%, #ffffff));
  box-shadow: 0 18px 38px rgba(44, 38, 30, 0.13);
}

.modul-smp-dashboard-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 415;
  object-fit: contain;
  object-position: center;
}

.modul-smp-mini-list {
  list-style: none;
  display: grid;
  gap: 0.72rem;
  margin: 1.15rem 0 0;
  padding: 0;
}

.modul-smp-mini-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--muted);
  font-weight: 760;
  line-height: 1.55;
}

.modul-smp-mini-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 0.05rem;
  border-radius: 999px;
  color: #ffffff;
  background: var(--edu-accent);
  font-size: 0.75rem;
  font-weight: 900;
}

@media (max-width: 980px) {
  .modul-smp-screen-panel,
  .modul-smp-dashboard-split {
    grid-template-columns: 1fr;
  }

  .modul-smp-dashboard-copy h2 {
    max-width: 16ch;
  }
}

@media (max-width: 760px) {
  .modul-smp-page .edu-visual-cover {
    min-height: 260px;
  }

  .modul-smp-page .edu-visual-cover img {
    width: min(100%, 330px);
  }

  .modul-smp-screen-panel {
    padding: 0.85rem;
    border-radius: 24px;
  }

  .modul-smp-screen-carousel,
  .modul-smp-dashboard-media {
    border-radius: 22px;
  }

  .modul-smp-screen-carousel .carousel-button {
    width: 36px;
    height: 36px;
  }

  .modul-smp-screen-carousel .carousel-button-prev {
    left: 0.55rem;
  }

  .modul-smp-screen-carousel .carousel-button-next {
    right: 0.55rem;
  }

  .modul-smp-screen-carousel figcaption {
    font-size: 0.86rem;
  }
}

/* =========================================================
   Tambahan khusus halaman Generator Modul Ajar SMA/MA
   File halaman: /product/edukasi/modul-sma/
   ========================================================= */

.modul-sma-page .edu-hero h1 {
  max-width: 18ch;
}

.modul-sma-page .edu-visual-cover {
  min-height: 360px;
}

.modul-sma-page .edu-visual-cover img {
  width: min(100%, 460px);
  max-height: 520px;
}

.modul-sma-screen-panel {
  display: grid;
  grid-template-columns: minmax(240px, 330px) minmax(360px, 720px);
  justify-content: center;
  gap: clamp(1rem, 3vw, 1.45rem);
  align-items: center;
  max-width: 1120px;
  margin: clamp(1.35rem, 4vw, 2rem) auto 0;
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--edu-accent-2) 24%, transparent), transparent 17rem),
    radial-gradient(circle at 88% 88%, color-mix(in srgb, var(--edu-accent) 13%, transparent), transparent 18rem),
    color-mix(in srgb, var(--surface-strong) 78%, transparent);
  box-shadow: var(--shadow-soft);
}

.modul-sma-screen-copy {
  min-width: 0;
}

.modul-sma-screen-copy h3 {
  margin: 0 0 0.7rem;
  color: var(--ink);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
}

.modul-sma-screen-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.modul-sma-screen-carousel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  justify-self: center;
  width: min(100%, 720px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.86), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--edu-soft) 78%, #ffffff), color-mix(in srgb, var(--edu-wash) 82%, #ffffff));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 18px 42px rgba(44, 38, 30, 0.11);
}

.modul-sma-screen-carousel .carousel-viewport {
  width: 100%;
  min-width: 0;
}

.modul-sma-screen-carousel .carousel-slide {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: clamp(0.75rem, 2vw, 1rem);
}

.modul-sma-screen-frame {
  overflow: hidden;
  border-radius: 20px;
  background: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(44, 38, 30, 0.08),
    0 16px 34px rgba(44, 38, 30, 0.10);
}

.modul-sma-screen-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  aspect-ratio: 800 / 415;
  object-fit: contain;
  object-position: center;
}

.modul-sma-screen-carousel figcaption {
  margin: 0;
  padding-inline: 0.25rem;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 760;
  line-height: 1.45;
  text-align: center;
}

.modul-sma-screen-carousel .modul-sma-screen-dots {
  position: static !important;
  inset: auto !important;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.25rem 0 1rem;
}

.modul-sma-screen-carousel .carousel-dot {
  background: color-mix(in srgb, var(--edu-accent) 22%, transparent);
}

.modul-sma-screen-carousel .carousel-dot.is-active {
  background: var(--edu-accent);
}

.modul-sma-screen-carousel .carousel-button {
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: color-mix(in srgb, var(--edu-dark) 76%, transparent);
}

.modul-sma-screen-carousel .carousel-button:hover {
  background: color-mix(in srgb, var(--edu-dark) 88%, transparent);
}

.modul-sma-screen-carousel .carousel-button-prev {
  left: 1rem;
}

.modul-sma-screen-carousel .carousel-button-next {
  right: 1rem;
}

.modul-sma-screen-carousel:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--edu-accent) 42%, transparent);
  outline-offset: 4px;
}

.modul-sma-dashboard-split {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(320px, 1.18fr);
  gap: clamp(1rem, 3vw, 1.75rem);
  align-items: center;
}

.modul-sma-dashboard-copy h2 {
  max-width: 13ch;
  margin-bottom: 0.9rem;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.modul-sma-dashboard-copy p {
  color: var(--muted);
}

.modul-sma-dashboard-media {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.78), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--edu-accent-2) 16%, #ffffff), color-mix(in srgb, var(--edu-accent) 12%, #ffffff));
  box-shadow: 0 18px 38px rgba(44, 38, 30, 0.13);
}

.modul-sma-dashboard-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 415;
  object-fit: contain;
  object-position: center;
}

.modul-sma-mini-list {
  list-style: none;
  display: grid;
  gap: 0.72rem;
  margin: 1.15rem 0 0;
  padding: 0;
}

.modul-sma-mini-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--muted);
  font-weight: 760;
  line-height: 1.55;
}

.modul-sma-mini-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 0.05rem;
  border-radius: 999px;
  color: #ffffff;
  background: var(--edu-accent);
  font-size: 0.75rem;
  font-weight: 900;
}

@media (max-width: 980px) {
  .modul-sma-screen-panel,
  .modul-sma-dashboard-split {
    grid-template-columns: 1fr;
  }

  .modul-sma-dashboard-copy h2 {
    max-width: 16ch;
  }
}

@media (max-width: 760px) {
  .modul-sma-page .edu-visual-cover {
    min-height: 260px;
  }

  .modul-sma-page .edu-visual-cover img {
    width: min(100%, 330px);
  }

  .modul-sma-screen-panel {
    padding: 0.85rem;
    border-radius: 24px;
  }

  .modul-sma-screen-carousel,
  .modul-sma-dashboard-media {
    border-radius: 22px;
  }

  .modul-sma-screen-carousel .carousel-button {
    width: 36px;
    height: 36px;
  }

  .modul-sma-screen-carousel .carousel-button-prev {
    left: 0.55rem;
  }

  .modul-sma-screen-carousel .carousel-button-next {
    right: 0.55rem;
  }

  .modul-sma-screen-carousel figcaption {
    font-size: 0.86rem;
  }
}

/* =========================================================
   Tambahan khusus halaman Generator Modul Ajar SMK/MAK
   File halaman: /product/edukasi/modul-smk/
   ========================================================= */

.modul-smk-page .edu-hero h1 {
  max-width: 18ch;
}

.modul-smk-page .edu-visual-cover {
  min-height: 360px;
}

.modul-smk-page .edu-visual-cover img {
  width: min(100%, 460px);
  max-height: 520px;
}

.modul-smk-screen-panel {
  display: grid;
  grid-template-columns: minmax(240px, 330px) minmax(360px, 720px);
  justify-content: center;
  gap: clamp(1rem, 3vw, 1.45rem);
  align-items: center;
  max-width: 1120px;
  margin: clamp(1.35rem, 4vw, 2rem) auto 0;
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--edu-accent-2) 24%, transparent), transparent 17rem),
    radial-gradient(circle at 88% 88%, color-mix(in srgb, var(--edu-accent) 13%, transparent), transparent 18rem),
    color-mix(in srgb, var(--surface-strong) 78%, transparent);
  box-shadow: var(--shadow-soft);
}

.modul-smk-screen-copy {
  min-width: 0;
}

.modul-smk-screen-copy h3 {
  margin: 0 0 0.7rem;
  color: var(--ink);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
}

.modul-smk-screen-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.modul-smk-screen-carousel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  justify-self: center;
  width: min(100%, 720px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.86), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--edu-soft) 78%, #ffffff), color-mix(in srgb, var(--edu-wash) 82%, #ffffff));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 18px 42px rgba(44, 38, 30, 0.11);
}

.modul-smk-screen-carousel .carousel-viewport {
  width: 100%;
  min-width: 0;
}

.modul-smk-screen-carousel .carousel-slide {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: clamp(0.75rem, 2vw, 1rem);
}

.modul-smk-screen-frame {
  overflow: hidden;
  border-radius: 20px;
  background: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(44, 38, 30, 0.08),
    0 16px 34px rgba(44, 38, 30, 0.10);
}

.modul-smk-screen-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  aspect-ratio: 1919 / 1199;
  object-fit: contain;
  object-position: center;
}

.modul-smk-screen-carousel figcaption {
  margin: 0;
  padding-inline: 0.25rem;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 760;
  line-height: 1.45;
  text-align: center;
}

.modul-smk-screen-carousel .modul-smk-screen-dots {
  position: static !important;
  inset: auto !important;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.25rem 0 1rem;
}

.modul-smk-screen-carousel .carousel-dot {
  background: color-mix(in srgb, var(--edu-accent) 22%, transparent);
}

.modul-smk-screen-carousel .carousel-dot.is-active {
  background: var(--edu-accent);
}

.modul-smk-screen-carousel .carousel-button {
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: color-mix(in srgb, var(--edu-dark) 76%, transparent);
}

.modul-smk-screen-carousel .carousel-button:hover {
  background: color-mix(in srgb, var(--edu-dark) 88%, transparent);
}

.modul-smk-screen-carousel .carousel-button-prev {
  left: 1rem;
}

.modul-smk-screen-carousel .carousel-button-next {
  right: 1rem;
}

.modul-smk-screen-carousel:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--edu-accent) 42%, transparent);
  outline-offset: 4px;
}

@media (max-width: 980px) {
  .modul-smk-screen-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .modul-smk-page .edu-visual-cover {
    min-height: 260px;
  }

  .modul-smk-page .edu-visual-cover img {
    width: min(100%, 330px);
  }

  .modul-smk-screen-panel {
    padding: 0.85rem;
    border-radius: 24px;
  }

  .modul-smk-screen-carousel {
    border-radius: 22px;
  }

  .modul-smk-screen-carousel .carousel-button {
    width: 36px;
    height: 36px;
  }

  .modul-smk-screen-carousel .carousel-button-prev {
    left: 0.55rem;
  }

  .modul-smk-screen-carousel .carousel-button-next {
    right: 0.55rem;
  }

  .modul-smk-screen-carousel figcaption {
    font-size: 0.86rem;
  }
}

/* =========================================================
   Tambahan khusus halaman Analisis Hasil Ulangan
   File halaman: /product/edukasi/analisis-ulangan/
   Gambar cover 1024x1024, screenshot rata-rata 1919x1128
   ========================================================= */

.analisis-ulangan-page .edu-hero h1 {
  max-width: 18ch;
}

.analisis-ulangan-page .edu-visual-cover {
  min-height: 360px;
}

.analisis-ulangan-page .edu-visual-cover img {
  width: min(100%, 460px);
  max-height: 520px;
}

.analisis-ulangan-screen-panel {
  display: grid;
  grid-template-columns: minmax(240px, 330px) minmax(360px, 760px);
  justify-content: center;
  gap: clamp(1rem, 3vw, 1.45rem);
  align-items: center;
  max-width: 1160px;
  margin: clamp(1.35rem, 4vw, 2rem) auto 0;
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--edu-accent-2) 38%, transparent), transparent 17rem),
    radial-gradient(circle at 88% 88%, color-mix(in srgb, var(--edu-accent) 13%, transparent), transparent 18rem),
    color-mix(in srgb, var(--surface-strong) 78%, transparent);
  box-shadow: var(--shadow-soft);
}

.analisis-ulangan-screen-copy {
  min-width: 0;
}

.analisis-ulangan-screen-copy h3 {
  margin: 0 0 0.7rem;
  color: var(--ink);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
}

.analisis-ulangan-screen-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.analisis-ulangan-screen-carousel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  justify-self: center;
  width: min(100%, 760px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.86), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--edu-soft) 78%, #ffffff), color-mix(in srgb, var(--edu-wash) 82%, #ffffff));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 18px 42px rgba(44, 38, 30, 0.11);
}

.analisis-ulangan-screen-carousel .carousel-viewport {
  width: 100%;
  min-width: 0;
}

.analisis-ulangan-screen-carousel .carousel-slide {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: clamp(0.75rem, 2vw, 1rem);
}

.analisis-ulangan-screen-frame {
  overflow: hidden;
  border-radius: 20px;
  background: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(44, 38, 30, 0.08),
    0 16px 34px rgba(44, 38, 30, 0.10);
}

.analisis-ulangan-screen-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 500px;
  aspect-ratio: 1919 / 1128;
  object-fit: contain;
  object-position: center;
  background: #ffffff;
}

.analisis-ulangan-screen-carousel figcaption {
  margin: 0;
  padding-inline: 0.25rem;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 760;
  line-height: 1.45;
  text-align: center;
}

.analisis-ulangan-screen-carousel .analisis-ulangan-screen-dots {
  position: static !important;
  inset: auto !important;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.25rem 0 1rem;
}

.analisis-ulangan-screen-carousel .carousel-dot {
  background: color-mix(in srgb, var(--edu-accent) 22%, transparent);
}

.analisis-ulangan-screen-carousel .carousel-dot.is-active {
  background: var(--edu-accent);
}

.analisis-ulangan-screen-carousel .carousel-button {
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: color-mix(in srgb, var(--edu-dark) 76%, transparent);
}

.analisis-ulangan-screen-carousel .carousel-button:hover {
  background: color-mix(in srgb, var(--edu-dark) 88%, transparent);
}

.analisis-ulangan-screen-carousel .carousel-button-prev {
  left: 1rem;
}

.analisis-ulangan-screen-carousel .carousel-button-next {
  right: 1rem;
}

.analisis-ulangan-screen-carousel:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--edu-accent) 42%, transparent);
  outline-offset: 4px;
}

.analisis-ulangan-dashboard-split {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(320px, 1.18fr);
  gap: clamp(1rem, 3vw, 1.75rem);
  align-items: center;
}

.analisis-ulangan-dashboard-copy h2 {
  max-width: 13ch;
  margin-bottom: 0.9rem;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.analisis-ulangan-dashboard-copy p {
  color: var(--muted);
}

.analisis-ulangan-dashboard-media {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.78), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--edu-accent-2) 26%, #ffffff), color-mix(in srgb, var(--edu-accent) 12%, #ffffff));
  box-shadow: 0 18px 38px rgba(44, 38, 30, 0.13);
}

.analisis-ulangan-dashboard-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  aspect-ratio: 1919 / 1121;
  object-fit: contain;
  object-position: center;
  background: #ffffff;
}

.analisis-ulangan-mini-list {
  list-style: none;
  display: grid;
  gap: 0.72rem;
  margin: 1.15rem 0 0;
  padding: 0;
}

.analisis-ulangan-mini-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--muted);
  font-weight: 760;
  line-height: 1.55;
}

.analisis-ulangan-mini-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 0.05rem;
  border-radius: 999px;
  color: #ffffff;
  background: var(--edu-accent);
  font-size: 0.75rem;
  font-weight: 900;
}

@media (max-width: 980px) {
  .analisis-ulangan-screen-panel,
  .analisis-ulangan-dashboard-split {
    grid-template-columns: 1fr;
  }

  .analisis-ulangan-dashboard-copy h2 {
    max-width: 16ch;
  }
}

@media (max-width: 760px) {
  .analisis-ulangan-page .edu-visual-cover {
    min-height: 260px;
  }

  .analisis-ulangan-page .edu-visual-cover img {
    width: min(100%, 330px);
  }

  .analisis-ulangan-screen-panel {
    padding: 0.85rem;
    border-radius: 24px;
  }

  .analisis-ulangan-screen-carousel,
  .analisis-ulangan-dashboard-media {
    border-radius: 22px;
  }

  .analisis-ulangan-screen-carousel .carousel-button {
    width: 36px;
    height: 36px;
  }

  .analisis-ulangan-screen-carousel .carousel-button-prev {
    left: 0.55rem;
  }

  .analisis-ulangan-screen-carousel .carousel-button-next {
    right: 0.55rem;
  }

  .analisis-ulangan-screen-carousel figcaption {
    font-size: 0.86rem;
  }
}

/* =========================================================
   Global CTA akhir untuk semua halaman product detail
   Target: section.contact-section + a.contact-card
   ========================================================= */

.product-detail-page .contact-section {
  position: relative;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  border-color: color-mix(in srgb, var(--gold) 38%, var(--line));
  background:
    radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--gold) 26%, transparent), transparent 18rem),
    radial-gradient(circle at 8% 88%, color-mix(in srgb, var(--purple) 18%, transparent), transparent 18rem),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--surface-strong) 86%, var(--gold) 14%),
      color-mix(in srgb, var(--surface) 78%, var(--purple) 14%)
    );
}

.product-detail-page .contact-section::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.38), transparent 42%);
}

.product-detail-page .contact-section > * {
  position: relative;
  z-index: 1;
}

.product-detail-page .contact-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  min-width: min(100%, 360px);
  padding: clamp(1.15rem, 2.8vw, 1.45rem) clamp(1.25rem, 3vw, 1.65rem);
  border: 0;
  border-radius: 999px;
  color: #201914;
  background: linear-gradient(135deg, var(--gold), #ffdf7b);
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--gold-strong) 26%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  text-align: center;
  transform: translateY(0);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.product-detail-page .contact-card:hover {
  transform: translateY(-3px);
  filter: saturate(1.05);
  box-shadow:
    0 22px 46px color-mix(in srgb, var(--gold-strong) 34%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.product-detail-page .contact-card span {
  color: color-mix(in srgb, #201914 72%, var(--brown));
  font-size: clamp(0.78rem, 1.2vw, 0.9rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.product-detail-page .contact-card strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: #201914;
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.product-detail-page .contact-card strong::after {
  content: "→";
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.55em;
  height: 1.55em;
  border-radius: 999px;
  color: #ffffff;
  background: color-mix(in srgb, var(--brown) 78%, #201914);
  font-size: 0.82em;
  line-height: 1;
  transition: transform 180ms ease;
}

.product-detail-page .contact-card:hover strong::after {
  transform: translateX(3px);
}

@media (max-width: 760px) {
  .product-detail-page .contact-section {
    grid-template-columns: 1fr;
  }

  .product-detail-page .contact-card {
    width: 100%;
    min-width: 0;
    border-radius: 22px;
  }

  .product-detail-page .contact-card strong {
    font-size: clamp(1.05rem, 5vw, 1.25rem);
  }
}

/* Contact page */
.contact-page .site-header {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.contact-hero {
  padding-top: clamp(1.4rem, 4vw, 3rem);
  padding-bottom: clamp(1.2rem, 3vw, 2rem);
}

.contact-hero-card,
.contact-panel,
.contact-closing-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.contact-hero-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 1.1rem;
  width: min(var(--container), 100%);
  margin-inline: auto;
  padding: clamp(1.55rem, 5vw, 3.4rem);
}

.contact-hero-card::before {
  content: "";
  position: absolute;
  inset: auto -8rem -12rem auto;
  width: 24rem;
  height: 24rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(246, 196, 58, 0.24), transparent 68%);
  pointer-events: none;
}

.contact-page h1 {
  max-width: 820px;
  margin-bottom: 0;
}

.contact-hero-card .lead {
  max-width: 760px;
}

.contact-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.35rem;
}

.contact-main-section {
  padding-top: clamp(1rem, 2.4vw, 1.8rem);
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.72fr);
  gap: clamp(1rem, 2.6vw, 1.5rem);
  width: min(var(--container), 100%);
  margin-inline: auto;
}

.contact-panel {
  padding: clamp(1.25rem, 3vw, 2rem);
}

.contact-panel .section-heading {
  margin-bottom: clamp(1.2rem, 2.6vw, 1.8rem);
}

.wa-options {
  display: grid;
  gap: 0.85rem;
}

.wa-option,
.contact-info-card,
.social-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-strong) 74%, transparent);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.wa-option {
  padding: 1rem;
}

.wa-option:hover,
.wa-option:focus-visible,
.contact-info-card:hover,
.contact-info-card:focus-visible,
.social-card:hover,
.social-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(246, 196, 58, 0.55);
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
}

.wa-option::after,
.contact-info-card::after,
.social-card::after {
  content: "→";
  margin-left: auto;
  color: var(--purple-strong);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.2;
}

.wa-option-icon,
.contact-info-icon,
.social-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
}

.wa-option-icon {
  color: #ffffff;
  background: #25d366;
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.24);
}

.wa-option-icon svg,
.contact-info-icon svg,
.social-icon svg {
  display: block;
  width: 25px;
  height: 25px;
  color: currentColor;
  fill: currentColor;
}

.social-icon svg [fill="none"] {
  fill: none;
}

.youtube-icon svg {
  width: 32px;
  height: 23px;
}

.youtube-icon {
  background: transparent;
  box-shadow: none;
}

.wa-option span:last-child,
.contact-info-card span:last-child,
.social-card span:last-child {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.wa-option strong,
.contact-info-card strong,
.social-card strong {
  color: var(--ink);
  line-height: 1.25;
}

.wa-option small,
.contact-info-card small,
.social-card small {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.45;
}

.contact-info-card {
  padding: 1rem;
}

.contact-info-icon.is-email {
  color: var(--purple-strong);
  background: rgba(123, 111, 197, 0.12);
}

.contact-note {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: rgba(246, 196, 58, 0.1);
  font-size: 0.94rem;
}

.contact-note strong {
  color: var(--ink);
}

.social-section {
  padding-top: clamp(1rem, 2.4vw, 1.8rem);
}

.social-section .catalog-card {
  width: min(var(--container), 100%);
  margin-inline: auto;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.85rem, 2vw, 1.15rem);
}

.social-card {
  min-height: 100%;
  padding: 1.05rem;
}

.social-card::after {
  align-self: center;
}

.social-icon {
  color: #ffffff;
}

.social-card.is-instagram .social-icon {
  background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af);
  box-shadow: 0 12px 28px rgba(221, 42, 123, 0.2);
}

.social-card.is-tiktok .social-icon {
  background: #111111;
  box-shadow: 0 12px 28px rgba(17, 17, 17, 0.16);
}

.social-card.is-youtube .social-icon {
  background: #ff0033;
  box-shadow: 0 12px 28px rgba(255, 0, 51, 0.2);
}

.social-card.is-facebook .social-icon {
  background: #1877f2;
  box-shadow: 0 12px 28px rgba(24, 119, 242, 0.2);
}

.contact-closing-section {
  padding-top: clamp(1rem, 2.4vw, 1.8rem);
}

.contact-closing-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.6rem);
  width: min(var(--container), 100%);
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.contact-closing-card h2 {
  max-width: 760px;
}

.contact-closing-card p {
  max-width: 760px;
  color: var(--muted);
}

@media (max-width: 980px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-closing-card {
    grid-template-columns: 1fr;
  }

  .contact-closing-card .button {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .contact-page h1 {
    max-width: 100%;
  }

  .contact-hero {
    padding-top: 1rem;
  }

  .contact-hero-card,
  .contact-panel,
  .contact-closing-card {
    border-radius: 24px;
  }

  .contact-hero-actions {
    flex-direction: column;
  }

  .contact-hero-actions .button,
  .contact-closing-card .button {
    width: 100%;
  }

  .wa-option,
  .contact-info-card,
  .social-card {
    gap: 0.75rem;
  }

  .wa-option-icon,
  .contact-info-icon,
  .social-icon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }

  .wa-option-icon svg,
  .contact-info-icon svg,
  .social-icon svg {
    width: 23px;
    height: 23px;
  }
}

@media (max-width: 520px) {
  .social-grid {
    grid-template-columns: 1fr;
  }

  .wa-option::after,
  .contact-info-card::after,
  .social-card::after {
    display: none;
  }
}

/* Contact page: social media grouped by niche */
.social-account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.4rem);
}

.social-account-card {
  display: grid;
  gap: 1.1rem;
  min-width: 0;
  padding: clamp(1.05rem, 2.8vw, 1.45rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 92% 8%, rgba(246, 196, 58, 0.12), transparent 14rem),
    color-mix(in srgb, var(--surface-strong) 74%, transparent);
  box-shadow: 0 12px 30px rgba(80, 54, 25, 0.08);
}

.social-account-header {
  min-width: 0;
}

.social-account-header h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.social-account-header p:not(.eyebrow) {
  margin: 0.75rem 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.social-grid-niche {
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.social-grid-niche .social-card {
  min-height: auto;
  padding: 0.9rem;
}

.social-grid-niche .social-card small {
  font-size: 0.86rem;
}

@media (max-width: 980px) {
  .social-account-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .social-account-card {
    border-radius: 24px;
  }

  .social-grid-niche .social-card {
    padding: 0.85rem;
  }
}

/* Contact page: samakan lebar semua section */
.contact-page .contact-hero-card,
.contact-page .contact-layout,
.contact-page .social-section .catalog-card,
.contact-page .contact-closing-card {
  width: min(var(--container), 100%);
  max-width: var(--container);
  margin-inline: auto;
}

/* Kontak utama dan email tetap vertikal, tapi tidak lebih sempit */
.contact-page .contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.6vw, 1.5rem);
}

/* Beranda: samakan lebar section dengan home hero dan konsistenkan jarak antar section */
.home-page main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--home-section-gap);
  padding-bottom: var(--home-section-gap);
}

.home-page .section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-block: 0;
  padding-inline: 0;
}

.home-page .home-hero.section {
  min-height: clamp(430px, 58svh, 620px);
  padding-block: clamp(2.2rem, 5vw, 4.2rem);
  padding-inline: 0;
}

.home-page .home-hero .hero-copy {
  padding-block: 0;
  padding-inline: var(--section-x);
}

.home-page .catalog-card,
.home-page .studio-card,
.home-page .contact-section {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: var(--card-padding);
  border-radius: clamp(24px, 4vw, 42px);
}

/* Pastikan panel kontak dan email memenuhi lebar container */
.contact-page .contact-primary-panel,
.contact-page .contact-info-panel {
  width: 100%;
}

/* Rapikan jarak section kontak utama */
.contact-page .contact-main-section {
  padding-top: clamp(1rem, 2.4vw, 1.8rem);
  padding-bottom: clamp(1rem, 2.4vw, 1.8rem);
}

/* Email card jangan terlihat terlalu kecil di desktop */
.contact-page .contact-info-card {
  width: 100%;
}

/* Catatan email juga ikut lebar penuh */
.contact-page .contact-note {
  width: 100%;
}

/* =========================================================
   FINAL GLOBAL LAYOUT + TYPOGRAPHY NORMALIZATION
   Diletakkan di akhir file untuk mengalahkan aturan lama
   yang terlalu sering mengatur h1/h2/h3 per halaman.
   ========================================================= */

:root {
  --font-body: clamp(0.98rem, 0.94rem + 0.18vw, 1.08rem);
  --font-small: clamp(0.84rem, 0.8rem + 0.12vw, 0.92rem);
  --font-lead: clamp(1.04rem, 0.98rem + 0.28vw, 1.22rem);
  --font-h1: clamp(2rem, 4.2vw, 3.45rem);
  --font-h2: clamp(1.55rem, 3vw, 2.35rem);
  --font-h3: clamp(1.08rem, 1.35vw, 1.32rem);

  --body-line-height: 1.68;
  --lead-line-height: 1.7;
  --heading-line-height: 1.14;
  --heading-letter-spacing: -0.015em;
  --heading-max-width: 18ch;
  --copy-max-width: 68ch;
}

body {
  font-size: var(--font-body);
  line-height: var(--body-line-height);
}

p,
li,
small {
  line-height: var(--body-line-height);
}

p {
  max-width: var(--copy-max-width);
}

h1,
h2,
h3 {
  margin: 0;
  line-height: var(--heading-line-height) !important;
  letter-spacing: var(--heading-letter-spacing) !important;
  text-wrap: balance;
}

h1 {
  max-width: var(--heading-max-width) !important;
  font-size: var(--font-h1) !important;
}

h2 {
  font-size: var(--font-h2) !important;
}

h3 {
  font-size: var(--font-h3) !important;
}

.lead {
  max-width: var(--copy-max-width);
  font-size: var(--font-lead);
  line-height: var(--lead-line-height);
}

.eyebrow {
  line-height: 1.35;
}

/* Section dan card utama dibuat konsisten */
.section {
  padding-block: var(--section-y);
  padding-inline: var(--section-x);
}

.catalog-card,
.studio-card,
.contact-section,
.legal-card,
.error-card,
.contact-hero-card,
.contact-panel,
.contact-closing-card {
  border-radius: var(--radius-lg);
}

.catalog-card,
.studio-card,
.contact-hero-card,
.contact-layout,
.social-section .catalog-card,
.contact-closing-card,
.legal-card {
  width: min(var(--container), 100%);
  max-width: var(--container);
  margin-inline: auto;
}

.section-heading,
.studio-card > div:first-child,
.catalog-card .section-heading,
.contact-panel .section-heading {
  max-width: 760px;
}

/* Halaman kontak: semua section memakai lebar yang sama */
.contact-page .contact-hero-card,
.contact-page .contact-layout,
.contact-page .social-section .catalog-card,
.contact-page .contact-closing-card {
  width: min(var(--container), 100%);
  max-width: var(--container);
  margin-inline: auto;
}

.contact-page .contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.6vw, 1.5rem);
}

.contact-page .contact-primary-panel,
.contact-page .contact-info-panel,
.contact-page .contact-info-card,
.contact-page .contact-note {
  width: 100%;
}

/* Heading hero/page khusus: ukuran tetap global, warna khusus halaman tetap boleh dari selector lama */
.home-hero h1,
.contact-page h1,
.legal-heading h1,
.error-card h1,
.sgkl-page .sgkl-hero h1,
.awk-page .awk-hero h1,
.attendance-page .attendance-hero h1,
.teacher-workbook-page .teacher-workbook-hero h1,
.tata-tertib-page .tata-hero h1,
.edu-hero h1,
.modul-sd-page .edu-hero h1,
.modul-smp-page .edu-hero h1,
.modul-sma-page .edu-hero h1,
.modul-smk-page .edu-hero h1,
.modul-paud-page .edu-hero h1,
.analisis-page .edu-hero h1,
.buku-induk-page .edu-hero h1,
.tabungan-page .edu-hero h1,
.keuangan-page .edu-hero h1 {
  max-width: var(--heading-max-width) !important;
  font-size: var(--font-h1) !important;
  line-height: var(--heading-line-height) !important;
  letter-spacing: var(--heading-letter-spacing) !important;
}

/* h2/h3 yang pernah dibuat terlalu besar oleh section khusus */
.legal-content h2,
.sgkl-product-meta h2,
.awk-product-meta h2,
.awk-spec-card strong,
.attendance-product-meta h2,
.attendance-spec-card strong,
.teacher-workbook-product-meta h2,
.teacher-workbook-spec-card strong,
.tata-product-meta h2,
.tata-preview-copy h2,
.edu-meta h2,
.modul-sd-dashboard-copy h2,
.modul-smp-dashboard-copy h2,
.modul-sma-dashboard-copy h2,
.modul-smk-dashboard-copy h2,
.social-account-header h3 {
  line-height: var(--heading-line-height) !important;
  letter-spacing: var(--heading-letter-spacing) !important;
}

/* Kartu katalog: teks tetap rapi dan konsisten */
.product-body h3 {
  line-height: 1.22 !important;
}

.product-body p,
.feature-card p,
.studio-card p,
.step p,
.edu-card p,
.edu-step-card p,
.edu-faq-item p,
.edu-offer-card p {
  line-height: 1.6;
}

@media (max-width: 980px) {
  :root {
    --font-h1: clamp(1.95rem, 5.8vw, 3rem);
    --font-h2: clamp(1.45rem, 4.2vw, 2.15rem);
    --font-h3: clamp(1.05rem, 2.6vw, 1.26rem);
  }
}

@media (max-width: 760px) {
  :root {
    --font-body: clamp(0.96rem, 3.8vw, 1.04rem);
    --font-lead: clamp(1rem, 4.2vw, 1.14rem);
    --font-h1: clamp(1.82rem, 7.5vw, 2.55rem);
    --font-h2: clamp(1.34rem, 5.9vw, 1.9rem);
    --font-h3: clamp(1rem, 4.6vw, 1.18rem);
    --heading-max-width: 100%;
    --section-y: clamp(1.15rem, 5vw, 1.8rem);
    --section-x: 0.75rem;
    --home-section-gap: clamp(0.85rem, 4vw, 1.35rem);
    --card-padding: clamp(1.05rem, 5vw, 1.5rem);
  }

  h1,
  .home-hero h1,
  .contact-page h1,
  .legal-heading h1,
  .error-card h1,
  .sgkl-page .sgkl-hero h1,
  .awk-page .awk-hero h1,
  .attendance-page .attendance-hero h1,
  .teacher-workbook-page .teacher-workbook-hero h1,
  .tata-tertib-page .tata-hero h1,
  .edu-hero h1 {
    max-width: 100% !important;
  }

  p,
  .lead,
  .section-heading {
    max-width: 100%;
  }

  .catalog-card,
  .studio-card,
  .contact-section,
  .legal-card,
  .error-card,
  .contact-hero-card,
  .contact-panel,
  .contact-closing-card {
    border-radius: 24px;
  }
}

@media (max-width: 430px) {
  :root {
    --font-h1: clamp(1.72rem, 8vw, 2.25rem);
    --font-h2: clamp(1.26rem, 6vw, 1.7rem);
    --font-h3: clamp(0.98rem, 4.5vw, 1.12rem);
  }

  .section {
    padding-inline: 0.6rem;
  }
}
/* Mobile only: kunci ukuran h3 khusus product card */
@media (max-width: 760px) {
  .product-grid .product-card .product-link .product-body h3,
  .catalog-section .product-card .product-link .product-body h3,
  .studio-section .product-card .product-link .product-body h3,
  .product-detail-page .product-grid .product-card .product-link .product-body h3 {
    font-size: 0.76rem !important;
    line-height: 1.22 !important;
    letter-spacing: -0.002em !important;
    font-weight: 780 !important;
    min-height: 1.9em;
  }
}

/* HP kecil: lebih kecil lagi agar kartu 2 kolom tetap lega */
@media (max-width: 430px) {
  .product-grid .product-card .product-link .product-body h3,
  .catalog-section .product-card .product-link .product-body h3,
  .studio-section .product-card .product-link .product-body h3,
  .product-detail-page .product-grid .product-card .product-link .product-body h3 {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    font-weight: 760 !important;
    min-height: 1.75em;
  }
  .product-link .button {
  min-height: 32px;
  padding: 0.42rem 0.58rem;
  font-size: 0.7rem;
}
}

/* =========================================================
   ABOUT PAGE
   Halaman Tentang AH Digital Studio
   ========================================================= */

.about-page .site-header {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.about-hero {
  padding-top: clamp(1.4rem, 4vw, 3rem);
  padding-bottom: clamp(1.2rem, 3vw, 2rem);
}

.about-hero-card,
.about-panel,
.about-values-card,
.about-cta-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.about-hero-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  align-items: center;
  gap: clamp(1.4rem, 4vw, 3rem);
  width: min(var(--container), 100%);
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(1.55rem, 5vw, 3.4rem);
}

.about-hero-card::before {
  content: "";
  position: absolute;
  inset: auto -8rem -12rem auto;
  width: 26rem;
  height: 26rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(246, 196, 58, 0.24), transparent 68%);
  pointer-events: none;
}

.about-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.about-hero-copy h1 {
  margin-bottom: 0;
}

.about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.35rem;
}

.about-identity-card {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 1rem;
  min-width: 0;
  padding: clamp(1.2rem, 3vw, 1.7rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 20% 12%, rgba(123, 111, 197, 0.16), transparent 12rem),
    color-mix(in srgb, var(--surface-strong) 78%, transparent);
  box-shadow: 0 18px 48px rgba(80, 54, 25, 0.1);
  text-align: center;
}

.about-identity-card img {
  width: min(180px, 62vw);
  height: auto;
  border-radius: 34px;
  box-shadow: 0 22px 52px rgba(80, 54, 25, 0.16);
}

.about-identity-card span {
  display: block;
  color: var(--muted);
  font-size: var(--font-small);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-identity-card strong {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.2;
}

.about-identity-card p {
  margin: 0.75rem auto 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.6;
}

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(1rem, 2.6vw, 1.5rem);
  width: min(var(--container), 100%);
  max-width: var(--container);
  margin-inline: auto;
}

.about-panel {
  padding: clamp(1.25rem, 3vw, 2rem);
}

.about-story-panel {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.about-story-panel p,
.about-profile-card p {
  color: var(--muted);
}

.about-profile-card {
  background:
    radial-gradient(circle at 90% 10%, rgba(246, 196, 58, 0.14), transparent 13rem),
    var(--surface);
}

.about-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.2rem;
}

.about-profile-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.42rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 76%, transparent);
  color: var(--brown);
  font-size: 0.86rem;
  font-weight: 800;
}

.about-services-section,
.about-values-section,
.about-cta-section {
  padding-top: clamp(1rem, 2.4vw, 1.8rem);
}

.about-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.85rem, 2vw, 1.15rem);
}

.about-service-card {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  min-width: 0;
  min-height: 100%;
  padding: clamp(1rem, 2.6vw, 1.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 82%, transparent), color-mix(in srgb, var(--surface) 92%, transparent));
  box-shadow: 0 12px 30px rgba(80, 54, 25, 0.07);
}

.about-service-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(246, 196, 58, 0.18);
  font-size: 1.35rem;
}

.about-service-card h3 {
  margin: 0;
}

.about-service-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.about-values-card {
  width: min(var(--container), 100%);
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.15rem);
  margin-top: clamp(1rem, 2vw, 1.4rem);
}

.about-values-grid article {
  min-width: 0;
  padding: clamp(1rem, 2.6vw, 1.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-strong) 74%, transparent);
}

.about-values-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.about-page .social-section {
  padding-top: clamp(1rem, 2.4vw, 1.8rem);
}

.about-page .social-section .catalog-card {
  width: min(var(--container), 100%);
  max-width: var(--container);
  margin-inline: auto;
}

.about-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.6rem);
  width: min(var(--container), 100%);
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.about-cta-card h2 {
  max-width: 760px;
}

.about-cta-card p {
  color: var(--muted);
}

@media (max-width: 980px) {
  .about-hero-card,
  .about-layout,
  .about-cta-card {
    grid-template-columns: 1fr;
  }

  .about-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-values-grid {
    grid-template-columns: 1fr;
  }

  .about-cta-card .button {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .about-hero {
    padding-top: 1rem;
  }

  .about-hero-card,
  .about-panel,
  .about-values-card,
  .about-cta-card {
    border-radius: 24px;
  }

  .about-hero-actions {
    flex-direction: column;
  }

  .about-hero-actions .button,
  .about-cta-card .button {
    width: 100%;
  }

  .about-identity-card {
    border-radius: 24px;
  }
}

@media (max-width: 520px) {
  .about-service-grid {
    grid-template-columns: 1fr;
  }

  .about-profile-tags span {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   ABOUT PAGE 
   ========================================================= */

.about-page {
  --about-container: 1180px;
  --about-hero-copy: 980px;
  --about-heading: 34ch;
  --about-copy: 82ch;

  text-align: center;
}

/* Semua wrapper utama halaman About dibuat satu lebar konsisten */
.about-page .about-hero-card,
.about-page .about-layout,
.about-page .about-values-card,
.about-page .social-section .catalog-card,
.about-page .about-cta-card,
.about-page .catalog-card {
  width: min(var(--about-container), 100%);
  max-width: var(--about-container);
  margin-inline: auto;
}

/* Hero tetap satu kolom dan berada di tengah */
.about-page .about-hero-card {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

/* Copy hero dilebarkan agar judul tidak terlalu menumpuk */
.about-page .about-hero-copy {
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: var(--about-hero-copy);
  margin-inline: auto;
  text-align: center;
}

/* Logo hero di atas judul */
.about-page .about-hero-logo {
  display: grid;
  place-items: center;
  margin-bottom: clamp(1rem, 3vw, 1.5rem);
}

.about-page .about-hero-logo img {
  width: clamp(112px, 18vw, 160px);
  height: auto;
  border-radius: 32px;
  box-shadow: 0 22px 52px rgba(80, 54, 25, 0.16);
}

/* Override aturan global h1 yang terlalu sempit */
.about-page h1 {
  max-width: min(100%, var(--about-heading)) !important;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Heading lain tetap center, tapi tidak terlalu sempit */
.about-page h2,
.about-page h3 {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Paragraf dibuat lebih lega namun tetap nyaman dibaca */
.about-page p,
.about-page .lead {
  max-width: min(100%, var(--about-copy));
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Section heading dibuat lebih lebar supaya tidak terlihat seperti kolom sempit */
.about-page .section-heading {
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: min(100%, 960px);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.about-page .section-heading p:not(.eyebrow) {
  max-width: min(100%, var(--about-copy));
}

/* Intro/profil dibuat satu kolom dan lebarnya sama dengan section lain */
.about-page .about-layout {
  grid-template-columns: 1fr;
  justify-items: center;
}

/* Hapus efek sempit 900px dari versi sebelumnya */
.about-page .about-panel,
.about-page .about-story-panel,
.about-page .about-profile-card {
  width: 100%;
  max-width: none;
  text-align: center;
}

/* Semua kartu utama tetap center */
.about-page .about-panel,
.about-page .about-values-card,
.about-page .about-cta-card,
.about-page .catalog-card {
  display: grid;
  justify-items: center;
}

/* Grid layanan dan prinsip harus memenuhi lebar kartu */
.about-page .about-service-grid,
.about-page .about-values-grid,
.about-page .social-account-grid {
  width: 100%;
}

/* Kartu layanan tetap center */
.about-page .about-service-card,
.about-page .about-values-grid article,
.about-page .social-account-card {
  display: grid;
  justify-items: center;
  text-align: center;
}

.about-page .about-service-icon {
  margin-inline: auto;
}

.about-page .about-service-card p,
.about-page .about-values-grid p,
.about-page .social-account-header p {
  margin-left: auto;
  margin-right: auto;
}

/* Tag profil tetap rapi di tengah */
.about-page .about-profile-tags {
  justify-content: center;
}

/* CTA akhir dibuat satu kolom agar center konsisten */
.about-page .about-cta-card {
  grid-template-columns: 1fr;
}

.about-page .about-cta-card .button {
  justify-self: center;
}

/* Media sosial dibuat center */
.about-page .social-account-header {
  display: grid;
  justify-items: center;
  text-align: center;
}

.about-page .social-card {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.about-page .social-card::after {
  display: none;
}

.about-page .social-card span:last-child {
  justify-items: center;
}

/* Tablet */
@media (max-width: 980px) {
  .about-page {
    --about-container: 100%;
    --about-hero-copy: 900px;
    --about-heading: 100%;
    --about-copy: 74ch;
  }
}

/* Mobile */
@media (max-width: 760px) {
  .about-page {
    --about-heading: 100%;
    --about-copy: 100%;
  }

  .about-page .about-hero-actions {
    width: 100%;
  }

  .about-page .about-hero-actions .button,
  .about-page .about-cta-card .button {
    width: 100%;
  }

  .about-page .about-panel,
  .about-page .about-values-card,
  .about-page .about-cta-card,
  .about-page .catalog-card {
    border-radius: 24px;
  }
}

/* HP kecil */
@media (max-width: 520px) {
  .about-page .about-profile-tags span {
    width: 100%;
    justify-content: center;
  }
}
/* Final fix: tinggi hero beranda agar tidak terlalu kosong */
.home-page .home-hero.section {
  min-height: clamp(380px, 52svh, 560px);
  padding-block: clamp(1.8rem, 4vw, 3.4rem);
  padding-inline: 0;
}

.home-page .home-hero .hero-copy {
  padding-block: 0;
  padding-inline: var(--section-x);
}

@media (max-width: 760px) {
  .home-page .home-hero.section {
    min-height: auto;
    padding-block: clamp(1.25rem, 5vw, 2rem);
  }

  .home-page .home-hero .hero-copy {
    padding-block: 0;
  }
}
/* =========================================================
   Final fix: konsistensi layout halaman Contact dan About
   Samakan lebar kartu dengan layout beranda, tanpa mengubah center About
   ========================================================= */

.contact-page main,
.about-page main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--home-section-gap, clamp(1.2rem, 2.6vw, 2.35rem));
  padding-bottom: var(--home-section-gap, clamp(1.2rem, 2.6vw, 2.35rem));
}

/* Hilangkan jarak bawaan section agar gap antar section dikontrol oleh main */
.contact-page .section,
.about-page .section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-block: 0;
  padding-inline: 0;
}

/* Hero Contact dan About menempel ke topbar seperti hero beranda */
.contact-page .contact-hero,
.about-page .about-hero {
  padding: 0;
}

/* Kartu hero dibuat full-width dan menempel ke header */
.contact-page .contact-hero-card,
.about-page .about-hero-card {
  width: 100%;
  max-width: none;
  margin: 0;
  border-top: 0;
  border-radius: 0 0 clamp(32px, 5vw, 56px) clamp(32px, 5vw, 56px);
  padding: clamp(2rem, 5vw, 4rem) var(--section-x);
}

/* Semua wrapper utama Contact dibuat selebar layout beranda */
.contact-page .contact-layout,
.contact-page .social-section .catalog-card,
.contact-page .contact-closing-card {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* Semua kartu utama Contact mengikuti padding visual yang sama */
.contact-page .contact-panel,
.contact-page .social-section .catalog-card,
.contact-page .contact-closing-card {
  padding: var(--card-padding, clamp(1.35rem, 4vw, 2.35rem));
  border-radius: clamp(24px, 4vw, 42px);
}

/* Contact layout tetap dua kolom di desktop, tapi lebarnya full */
.contact-page .contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.72fr);
  gap: var(--home-section-gap, clamp(1.2rem, 2.6vw, 2.35rem));
}

/* Semua wrapper utama About dibuat selebar layout beranda */
.about-page .about-hero-card,
.about-page .about-layout,
.about-page .about-values-card,
.about-page .social-section .catalog-card,
.about-page .about-cta-card,
.about-page .catalog-card {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* Semua kartu utama About mengikuti padding visual yang sama */
.about-page .about-panel,
.about-page .about-values-card,
.about-page .social-section .catalog-card,
.about-page .about-cta-card,
.about-page .catalog-card {
  padding: var(--card-padding, clamp(1.35rem, 4vw, 2.35rem));
  border-radius: clamp(24px, 4vw, 42px);
}

/* About tetap center sesuai permintaan */
.about-page,
.about-page .about-hero-card,
.about-page .about-hero-copy,
.about-page .about-layout,
.about-page .about-panel,
.about-page .about-values-card,
.about-page .about-cta-card,
.about-page .catalog-card,
.about-page .section-heading {
  text-align: center;
}

.about-page .about-hero-card,
.about-page .about-hero-copy,
.about-page .about-panel,
.about-page .about-values-card,
.about-page .about-cta-card,
.about-page .catalog-card,
.about-page .section-heading {
  justify-items: center;
}

/* Jaga isi About tetap nyaman dibaca walau kartunya full-width */
.about-page h1,
.about-page h2,
.about-page h3,
.about-page p,
.about-page .lead {
  margin-left: auto;
  margin-right: auto;
}

.about-page .about-hero-copy,
.about-page .section-heading {
  max-width: min(100%, 980px);
}

.about-page p,
.about-page .lead {
  max-width: min(100%, 82ch);
}

/* Responsive */
@media (max-width: 980px) {
  .contact-page .contact-layout,
  .about-page .about-layout,
  .about-page .about-hero-card,
  .about-page .about-cta-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .contact-page main,
  .about-page main {
    gap: var(--home-section-gap, clamp(0.85rem, 4vw, 1.35rem));
    padding-bottom: var(--home-section-gap, clamp(0.85rem, 4vw, 1.35rem));
  }

  .contact-page .contact-hero-card,
  .about-page .about-hero-card {
    padding: clamp(1.35rem, 6vw, 2.2rem) var(--section-x);
    border-radius: 0 0 28px 28px;
  }

  .contact-page .contact-panel,
  .contact-page .social-section .catalog-card,
  .contact-page .contact-closing-card,
  .about-page .about-panel,
  .about-page .about-values-card,
  .about-page .social-section .catalog-card,
  .about-page .about-cta-card,
  .about-page .catalog-card {
    padding: var(--card-padding, clamp(1.05rem, 5vw, 1.5rem));
    border-radius: 24px;
  }
}

@media (max-width: 760px) {
  body:not(.app-page):not(.sgkl-page) .site-header {
    background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg) 100%);
    border-bottom-color: color-mix(in srgb, var(--line) 82%, var(--purple) 18%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body:not(.app-page):not(.sgkl-page) .nav-toggle {
    background: color-mix(in srgb, var(--surface-strong) 82%, var(--bg-soft) 18%);
  }

  body:not(.app-page):not(.sgkl-page) .main-nav {
    background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
  }
  .product-link .button {
  min-height: 34px;
  padding: 0.46rem 0.68rem;
  font-size: 0.74rem;
}
}

/* =========================================================
   Home Hero Background Image
   ========================================================= */

.home-page .home-hero {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}

.home-page .home-hero.section {
  min-height: clamp(430px, 58svh, 640px);
  padding: clamp(3rem, 7vw, 5rem) var(--section-x);
}

.home-page .home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 clamp(32px, 5vw, 56px) clamp(32px, 5vw, 56px);
  background:
    linear-gradient(
      180deg,
      rgba(24, 18, 16, 0.64) 0%,
      rgba(47, 34, 29, 0.48) 48%,
      rgba(31, 24, 35, 0.66) 100%
    ),
    radial-gradient(circle at 50% 42%, rgba(246, 196, 58, 0.14), transparent 24rem),
    radial-gradient(circle at 82% 24%, rgba(123, 111, 197, 0.18), transparent 26rem),
    url("/assets/images/hero-foto2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: var(--shadow);
}

.home-page .home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: 0 0 clamp(32px, 5vw, 56px) clamp(32px, 5vw, 56px);
  background:
    linear-gradient(
      90deg,
      rgba(251, 246, 237, 0.08),
      rgba(255, 255, 255, 0.03),
      rgba(123, 111, 197, 0.08)
    );
}

.home-page .home-hero .hero-copy {
  width: min(100%, 980px);
  max-width: 980px;
  margin-inline: auto;
  padding: 0;
  text-align: center;
}

.home-page .home-hero .eyebrow {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  color: var(--gold);
  text-align: center;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.home-page .home-hero h1 {
  max-width: 16ch;
  margin-inline: auto;
  color: #fffaf1;
  text-wrap: balance;
  text-shadow: 0 12px 36px rgba(0, 0, 0, 0.38);
}

.home-page .home-hero .lead {
  max-width: 72ch;
  margin-inline: auto;
  color: rgba(255, 250, 241, 0.88);
  text-wrap: balance;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
}

@media (max-width: 760px) {
  .home-page .home-hero.section {
    min-height: clamp(420px, 64svh, 560px);
    padding-block: clamp(2.6rem, 12vw, 4rem);
  }

  .home-page .home-hero::before {
    background-position: center;
  }

  .home-page .home-hero h1 {
    max-width: 13ch;
  }

  .home-page .home-hero .lead {
    max-width: 34ch;
  }
}

/* =========================================================
   Home Hero Product Cards
   ========================================================= */

.home-page .home-hero {
  align-content: center;
  gap: clamp(1.35rem, 3vw, 2.35rem);
}

.home-page .hero-products {
  width: min(100%, 1120px);
  margin-inline: auto;
  padding-inline: var(--section-x);
}

.home-page .home-hero .product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.8vw, 1.15rem);
}

.home-page .home-hero .product-card {
  border-color: rgba(255, 250, 241, 0.28);
  background: rgba(255, 250, 241, 0.84);
  box-shadow: 0 18px 44px rgba(20, 14, 10, 0.18);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.home-page .home-hero .product-link {
  grid-template-rows: 72px 1fr auto;
  gap: 0.85rem;
  padding: clamp(0.85rem, 1.8vw, 1.05rem);
}

.home-page .home-hero .product-icon,
.home-page .home-hero .product-icon-image {
  width: 72px;
  height: 72px;
  border-radius: 20px;
}

.home-page .home-hero .product-icon {
  color: var(--purple-strong);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.8), transparent 52%),
    linear-gradient(135deg, rgba(246, 196, 58, 0.32), rgba(123, 111, 197, 0.22));
  font-size: 1.7rem;
}

.home-page .home-hero .product-badge {
  margin-bottom: 0.55rem;
  background: rgba(123, 111, 197, 0.11);
}

.home-page .home-hero .product-body h3 {
  color: var(--ink);
}

.home-page .home-hero .product-body p {
  color: var(--muted);
}

.home-page .home-hero .product-link .button {
  margin-top: 0.25rem;
}

@media (max-width: 980px) {
  .home-page .home-hero .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-page .home-hero .product-link {
    grid-template-rows: 64px 1fr auto;
  }

  .home-page .home-hero .product-icon,
  .home-page .home-hero .product-icon-image {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 760px) {
  .home-page .home-hero {
    gap: 1rem;
  }

  .home-page .home-hero.section {
    padding-block: clamp(1.7rem, 7vw, 2.6rem);
  }

  .home-page .hero-products {
    padding-inline: 0.85rem;
  }

  .home-page .home-hero .product-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .home-page .home-hero .product-link {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
    justify-items: start;
    text-align: left;
    gap: 0.75rem;
    padding: 0.78rem;
  }

  .home-page .home-hero .product-icon,
  .home-page .home-hero .product-icon-image {
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }

  .home-page .home-hero .product-body {
    justify-items: start;
    padding: 0;
  }

  .home-page .home-hero .product-badge {
    margin-bottom: 0.28rem;
    font-size: 0.64rem;
  }

  .home-page .home-hero .product-body h3 {
    min-height: auto;
    margin: 0;
  }

  .home-page .home-hero .product-body p {
    display: none;
  }

  .home-page .home-hero .product-link .button {
    align-self: center;
    margin-top: 0;
    white-space: nowrap;
  }
}

@media (max-width: 430px) {
  .home-page .home-hero .product-link {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .home-page .home-hero .product-link .button {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
  }

  .home-page .home-hero .product-icon,
  .home-page .home-hero .product-icon-image {
    width: 48px;
    height: 48px;
  }
}

.home-page .home-hero,
.home-page .home-hero.section,
.home-page .home-hero::before,
.home-page .home-hero::after {
  border-radius: 0 !important;
}

.contact-page .contact-info-card {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.contact-page .contact-info-card span:last-child {
  min-width: 0;
  max-width: 100%;
}

.contact-page .contact-info-card strong {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}

.contact-page .contact-info-card::after {
  flex: 0 0 auto;
}

/* =========================================================
   Performance Optimization: Disable Scroll Reveal Animation
   ========================================================= */

.js-ready .reveal,
.js .reveal,
.reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* =========================================================
   Performance Optimization: Reduce Expensive Blur Rendering
   ========================================================= */

.site-header,
.catalog-card,
.product-card,
.feature-card,
.studio-card,
.contact-section,
.contact-card,
.legal-card,
.error-card,
.contact-hero-card,
.contact-panel,
.contact-closing-card,
.home-page .home-hero .product-card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.site-header {
  background: color-mix(in srgb, var(--surface-strong) 96%, transparent);
}

.home-page .home-hero .product-card {
  background: rgba(255, 250, 241, 0.92);
}

/* =========================================================
   Product Search: Home Hero + Search Page
   ========================================================= */

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

.home-page .home-hero .hero-search-card {
  width: min(100%, 940px);
  padding: clamp(1.15rem, 3vw, 2.15rem);
  border: 1px solid rgba(255, 250, 241, 0.22);
  border-radius: clamp(24px, 4vw, 36px);
  background: linear-gradient(135deg, rgba(25, 18, 16, 0.54), rgba(40, 31, 47, 0.42));
  box-shadow: 0 24px 70px rgba(14, 10, 8, 0.28);
}

.home-page .home-hero .hero-search-card .lead {
  margin-bottom: clamp(1.1rem, 2.6vw, 1.55rem);
}

.hero-product-search {
  display: grid;
  gap: 0.75rem;
  width: min(100%, 720px);
  margin-inline: auto;
}

.hero-search-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 60px;
  padding: 0.45rem 0.45rem 0.45rem 1rem;
  border: 1px solid rgba(255, 250, 241, 0.28);
  border-radius: 999px;
  background: rgba(255, 250, 241, 0.18);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.hero-search-icon {
  color: rgba(255, 250, 241, 0.84);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
}

.hero-search-input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #fffaf1;
  background: transparent;
  font: inherit;
  font-size: clamp(1rem, 2vw, 1.08rem);
  font-weight: 800;
}

.hero-search-input::placeholder {
  color: rgba(255, 250, 241, 0.74);
  transition: opacity 180ms ease;
}

.hero-search-input.is-placeholder-changing::placeholder {
  opacity: 0.18;
}

.hero-search-button {
  min-height: 48px;
  padding-inline: clamp(1rem, 2.4vw, 1.35rem);
  white-space: nowrap;
}

.hero-search-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: rgba(255, 250, 241, 0.82);
  font-size: 0.88rem;
  font-weight: 750;
}

.hero-search-suggestions a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.36rem 0.72rem;
  border: 1px solid rgba(255, 250, 241, 0.22);
  border-radius: 999px;
  color: #fffaf1;
  background: rgba(255, 255, 255, 0.10);
  text-decoration: none;
}

.hero-search-suggestions a:hover,
.hero-search-suggestions a:focus-visible {
  border-color: rgba(246, 196, 58, 0.58);
  background: rgba(246, 196, 58, 0.16);
}

.home-products-section {
  padding-top: clamp(1.6rem, 4vw, 2.5rem);
}

.home-products-card .section-heading {
  max-width: 820px;
}

.search-page .search-hero.section {
  min-height: auto;
}

.search-page .search-hero h1 {
  max-width: 18ch;
}

.search-results-section {
  padding-top: clamp(1.6rem, 4vw, 2.5rem);
}

.search-results-card {
  width: 100%;
}

.search-result-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 800;
}

.search-product-grid .product-card[hidden] {
  display: none;
}

.search-empty-state {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  margin: 0;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  border: 1px dashed var(--line);
  border-radius: 24px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.52);
  text-align: center;
}

.search-empty-state strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.search-empty-state p {
  max-width: 58ch;
  margin: 0;
}

@media (max-width: 760px) {
  .home-page .home-hero .hero-search-card {
    border-radius: 24px;
    padding: clamp(1rem, 5vw, 1.3rem);
  }

  .hero-search-box {
    min-height: 54px;
    gap: 0.55rem;
    padding: 0.42rem 0.42rem 0.42rem 0.82rem;
    border-radius: 24px;
  }

  .hero-search-icon {
    font-size: 1.15rem;
  }

  .hero-search-input {
    font-size: 0.94rem;
  }

  .hero-search-button {
    min-height: 42px;
    padding-inline: 0.9rem;
    font-size: 0.82rem;
  }

  .hero-search-suggestions {
    gap: 0.36rem;
    font-size: 0.78rem;
  }

  .hero-search-suggestions a {
    min-height: 30px;
    padding: 0.32rem 0.62rem;
  }
}

@media (max-width: 430px) {
  .hero-search-box {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .hero-search-button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* =========================================================
   Search Revision: Breadcrumb, Mobile Search Button, Home Products
   ========================================================= */

.page-breadcrumb.section {
  min-height: auto;
  padding-top: clamp(1rem, 2.6vw, 1.35rem);
  padding-bottom: 0;
}

.page-breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  color: rgba(255, 250, 241, 0.92);
  font-size: clamp(0.96rem, 1.8vw, 1.08rem);
  font-weight: 850;
}

.page-breadcrumb-list a {
  color: #2ea3ff;
  text-decoration: none;
}

.page-breadcrumb-list a:hover,
.page-breadcrumb-list a:focus-visible {
  color: var(--gold);
}

.page-breadcrumb-back {
  display: none;
}

.search-page .search-hero.section {
  padding-top: clamp(1.1rem, 3vw, 2rem);
}

.home-products-section .product-grid {
  grid-template-columns: 1fr;
  width: min(100%, 900px);
  margin-inline: auto;
}

.home-products-section .product-card {
  background: var(--surface);
}

.home-products-section .product-link {
  grid-template-columns: 76px minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  justify-items: start;
  gap: clamp(0.85rem, 2vw, 1.15rem);
  min-height: auto;
  padding: clamp(0.9rem, 2.2vw, 1.15rem);
  text-align: left;
}

.home-products-section .product-icon,
.home-products-section .product-icon-image {
  width: 76px;
  height: 76px;
  border-radius: 20px;
}

.home-products-section .product-body {
  justify-items: start;
  min-width: 0;
  padding: 0;
}

.home-products-section .product-badge {
  margin-bottom: 0.46rem;
}

.home-products-section .product-body h3 {
  min-height: auto;
  margin: 0;
}

.home-products-section .product-body p {
  margin-top: 0.45rem;
}

.home-products-section .product-link .button {
  align-self: center;
  margin-top: 0;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .page-breadcrumb.section {
    padding-top: 0.9rem;
  }

  .page-breadcrumb-list {
    display: none;
  }

  .page-breadcrumb-back {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 38px;
    margin-inline: auto;
    color: #2ea3ff;
    font-size: 0.98rem;
    font-weight: 850;
    text-decoration: none;
  }

  .page-breadcrumb-back:hover,
  .page-breadcrumb-back:focus-visible {
    color: var(--gold);
  }

  .hero-search-box {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.42rem;
    padding: 0.35rem 0.35rem 0.35rem 0.72rem;
    border-radius: 999px;
  }

  .hero-search-button {
    min-height: 40px;
    padding-inline: 0.78rem;
    font-size: 0.8rem;
  }

  .home-products-section .product-grid {
    width: min(100%, 680px);
  }

  .home-products-section .product-link {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 0.72rem;
    padding: 0.78rem;
  }

  .home-products-section .product-icon,
  .home-products-section .product-icon-image {
    width: 58px;
    height: 58px;
    border-radius: 16px;
  }

  .home-products-section .product-badge {
    margin-bottom: 0.26rem;
    font-size: 0.64rem;
  }

  .home-products-section .product-body p {
    display: none;
  }

  .home-products-section .product-link .button {
    min-height: 34px;
    padding: 0.48rem 0.68rem;
    font-size: 0.76rem;
  }
}

@media (max-width: 430px) {
  .hero-search-box {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .hero-search-icon {
    display: none;
  }

  .hero-search-button {
    grid-column: auto;
    width: auto;
    min-width: 58px;
    padding-inline: 0.64rem;
  }

  .home-products-section .product-link {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 0.6rem;
  }

  .home-products-section .product-icon,
  .home-products-section .product-icon-image {
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 360px) {
  .hero-search-button {
    min-width: 50px;
    padding-inline: 0.5rem;
  }

  .home-products-section .product-link {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .home-products-section .product-link .button {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
  }

  .home-products-section .product-icon,
  .home-products-section .product-icon-image {
    width: 48px;
    height: 48px;
  }
}

/* Search Revision Refinement: breadcrumb bar follows the reference layout */
.search-page main {
  gap: 0;
}

.page-breadcrumb.section {
  padding: clamp(0.78rem, 2vw, 1.05rem) var(--section-x);
  background: #05351f;
}

.page-breadcrumb-list,
.page-breadcrumb-back {
  width: min(100%, 1120px);
  margin-inline: auto;
}

.page-breadcrumb-back {
  color: #2ea3ff;
}

@media (max-width: 430px) {
  .hero-search-box {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .hero-search-input {
    min-width: 0;
  }
}

/* =========================================================
   Revisi Breadcrumb Pencarian: transparan di atas hero image
   ========================================================= */

.search-page main {
  position: relative;
  gap: 0;
}

.search-page .page-breadcrumb.section {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  min-height: auto;
  margin: 0;
  padding: clamp(0.9rem, 2vw, 1.15rem) var(--section-x);
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none;
  border: 0;
  pointer-events: none;
}

.search-page .page-breadcrumb-list,
.search-page .page-breadcrumb-back {
  width: min(100%, 1120px);
  margin-inline: auto;
  pointer-events: auto;
}

.search-page .search-hero.section {
  padding-top: clamp(4.9rem, 8vw, 6.2rem);
}

@media (max-width: 760px) {
  .search-page .page-breadcrumb.section {
    padding-top: 0.85rem;
    padding-bottom: 0.55rem;
  }

  .search-page .search-hero.section {
    padding-top: clamp(4rem, 18vw, 5rem);
  }
}

.home-page .home-hero .hero-search-card .lead {
  margin-bottom: 0.85rem;
}

.hero-search-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: fit-content;
  max-width: min(100%, 720px);
  margin: 0 auto 0.85rem;
  padding: 0.48rem 0.8rem;
  border: 1px solid rgba(246, 196, 58, 0.34);
  border-radius: 999px;
  color: #fffaf1;
  background: rgba(246, 196, 58, 0.14);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
  font-size: clamp(0.82rem, 1.8vw, 0.92rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-align: center;
  backdrop-filter: blur(10px);
}

.hero-search-hint-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  color: #2b1f10;
  background: #f6c43a;
  font-size: 0.78rem;
  font-weight: 950;
  font-family: Georgia, serif;
  line-height: 1;
}

@media (max-width: 560px) {
  .hero-search-hint {
    width: 100%;
    padding-inline: 0.72rem;
  }
}

/* =========================================================
   Home Testimonials Section
   ========================================================= */

.home-testimonials-section {
  padding-top: clamp(1.6rem, 4vw, 2.5rem);
}

.home-testimonials-card {
  display: grid;
  gap: clamp(1.2rem, 3vw, 1.8rem);
}

.home-testimonials-card .section-heading {
  max-width: 820px;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.85rem, 2vw, 1.15rem);
}

.testimonial-card {
  display: grid;
  align-content: start;
  gap: 1rem;
  min-height: 100%;
  padding: clamp(1rem, 2.4vw, 1.25rem);
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--gold) 18%);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 0%, rgba(246, 196, 58, 0.16), transparent 12rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 250, 241, 0.72));
  box-shadow: 0 18px 42px rgba(42, 28, 18, 0.08);
}

.testimonial-profile {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
}

.testimonial-profile img {
  width: 72px;
  height: 72px;
  border: 3px solid rgba(246, 196, 58, 0.55);
  border-radius: 999px;
  background: var(--surface-strong);
  box-shadow: 0 12px 28px rgba(42, 28, 18, 0.12);
  object-fit: cover;
  object-position: center;
}

.testimonial-name,
.testimonial-product {
  display: block;
}

.testimonial-name {
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.25;
}

.testimonial-product {
  margin-top: 0.22rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.35;
}

.testimonial-card blockquote {
  position: relative;
  margin: 0;
  padding-top: 0.7rem;
  color: color-mix(in srgb, var(--ink) 82%, var(--muted) 18%);
  font-size: clamp(0.92rem, 1.7vw, 0.98rem);
  font-weight: 650;
  line-height: 1.72;
}

.testimonial-card blockquote::before {
  content: "“";
  position: absolute;
  top: -0.45rem;
  left: -0.12rem;
  color: rgba(246, 196, 58, 0.78);
  font-family: Georgia, serif;
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

@media (max-width: 980px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-card {
    width: min(100%, 820px);
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  .home-testimonials-section {
    padding-top: clamp(1.1rem, 5vw, 1.6rem);
  }

  .testimonial-card {
    border-radius: 24px;
    padding: 1rem;
  }

  .testimonial-profile {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 0.72rem;
  }

  .testimonial-profile img {
    width: 58px;
    height: 58px;
  }

  .testimonial-card blockquote {
    font-size: 0.9rem;
    line-height: 1.68;
  }
}

/* =========================================================
   Home Testimonials: Rating, Avatar, Expand / Collapse
   ========================================================= */

.testimonial-profile img,
.testimonial-avatar {
  width: 72px;
  height: 72px;
  border: 3px solid rgba(246, 196, 58, 0.55);
  border-radius: 999px;
  background: var(--surface-strong);
  box-shadow: 0 12px 28px rgba(42, 28, 18, 0.12);
  object-fit: cover;
  object-position: center;
}

.testimonial-avatar {
  display: grid;
  place-items: center;
  color: #2b1f10;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.86), transparent 46%),
    linear-gradient(135deg, rgba(246, 196, 58, 0.95), rgba(255, 250, 241, 0.92));
  font-size: 1rem;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.testimonial-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  margin-top: -0.2rem;
  padding: 0.26rem 0.56rem;
  border: 1px solid rgba(246, 196, 58, 0.3);
  border-radius: 999px;
  background: rgba(246, 196, 58, 0.12);
  color: #9a6710;
  font-weight: 900;
  line-height: 1;
}

.rating-stars {
  color: #d99a13;
  font-size: 0.98rem;
  letter-spacing: 0.06em;
}

.rating-label {
  color: color-mix(in srgb, var(--ink) 76%, var(--muted) 24%);
  font-size: 0.78rem;
}

.testimonial-card blockquote p {
  margin: 0;
}

.testimonial-more {
  margin-top: 0.72rem;
}

.testimonial-more summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  min-height: 36px;
  margin-top: 0.2rem;
  padding: 0.42rem 0.72rem;
  border: 1px solid rgba(106, 59, 34, 0.14);
  border-radius: 999px;
  color: var(--brown);
  background: rgba(255, 255, 255, 0.66);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.testimonial-more summary::-webkit-details-marker {
  display: none;
}

.testimonial-more summary::after {
  content: "⌄";
  font-size: 1rem;
  line-height: 1;
  transition: transform 180ms ease;
}

.testimonial-more[open] summary {
  margin-bottom: 0.62rem;
  border-color: rgba(246, 196, 58, 0.4);
  background: rgba(246, 196, 58, 0.14);
  box-shadow: 0 10px 24px rgba(42, 28, 18, 0.08);
}

.testimonial-more[open] summary::after {
  transform: rotate(180deg);
}

.testimonial-more summary:hover {
  transform: translateY(-1px);
  border-color: rgba(246, 196, 58, 0.46);
  background: rgba(246, 196, 58, 0.13);
}

.summary-close {
  display: none;
}

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

.testimonial-more[open] .summary-close {
  display: inline;
}

@media (max-width: 560px) {
  .testimonial-profile img,
  .testimonial-avatar {
    width: 58px;
    height: 58px;
  }

  .testimonial-avatar {
    font-size: 0.86rem;
  }

  .testimonial-rating {
    padding: 0.24rem 0.5rem;
  }

  .rating-stars {
    font-size: 0.88rem;
  }

  .testimonial-more summary {
    min-height: 34px;
    padding: 0.4rem 0.66rem;
    font-size: 0.8rem;
  }
}

.testimonial-card blockquote {
  padding-top: 1.35rem;
}

.testimonial-card blockquote::before {
  top: -0.15rem;
  left: 0;
}

.testimonial-card blockquote > p:first-child {
  padding-top: 0.35rem;
}

/* =========================================================
   Testimonial: Consistent line-based expand / collapse
   ========================================================= */

.testimonial-quote {
  display: grid;
  gap: 0.9rem;
}

.testimonial-text {
  --testimonial-lines: 4;

  display: -webkit-box;
  min-height: calc(1em * 1.72 * var(--testimonial-lines));
  max-height: calc(1em * 1.72 * var(--testimonial-lines));
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--testimonial-lines);
  line-clamp: var(--testimonial-lines);
}

.testimonial-card blockquote > .testimonial-text:first-child {
  padding-top: 0;
}

.testimonial-card.is-expanded .testimonial-text {
  display: block;
  min-height: 0;
  max-height: none;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.testimonial-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: fit-content;
  min-height: 36px;
  margin-top: 0.1rem;
  padding: 0.42rem 0.72rem;
  border: 1px solid rgba(106, 59, 34, 0.14);
  border-radius: 999px;
  color: var(--brown);
  background: rgba(255, 255, 255, 0.66);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.testimonial-toggle::after {
  content: "⌄";
  font-size: 1rem;
  line-height: 1;
  transition: transform 180ms ease;
}

.testimonial-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(246, 196, 58, 0.46);
  background: rgba(246, 196, 58, 0.13);
}

.testimonial-card.is-expanded .testimonial-toggle {
  border-color: rgba(246, 196, 58, 0.4);
  background: rgba(246, 196, 58, 0.14);
  box-shadow: 0 10px 24px rgba(42, 28, 18, 0.08);
}

.testimonial-card.is-expanded .testimonial-toggle::after {
  transform: rotate(180deg);
}

.toggle-close {
  display: none;
}

.testimonial-card.is-expanded .toggle-open {
  display: none;
}

.testimonial-card.is-expanded .toggle-close {
  display: inline;
}

.testimonial-card:not(.has-overflow) .testimonial-toggle {
  display: none;
}

@media (max-width: 560px) {
  .testimonial-text {
    --testimonial-lines: 5;
  }

  .testimonial-toggle {
    min-height: 34px;
    padding: 0.4rem 0.66rem;
    font-size: 0.8rem;
  }
}


/* Guide page SEO additions */
.guide-page .guide-list {
  display: grid;
  gap: 0.9rem;
  padding-left: 0;
  list-style: none;
}

.guide-page .guide-list li {
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(255,255,255,0.7);
}

.guide-page .guide-related {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.2rem;
}

.guide-page .guide-related a {
  text-decoration: none;
}