:root {
  --night-1: #f6f7f9;
  --night-2: #f1f2f5;
  --night-3: #ecedf1;
  --night-4: #e6e8ed;
  --night-5: #e0e3e9;
  --px-ink: #14163a;
  --cream: #ffffff;
  --yellow: #ffd23f;
  --green: #38b764;
  --soil: #7a4a2b;
  --text-soft: #262a36;
  --muted: #4a4f78;
  --pixel: 4px;
  --max-width: 1120px;
  --font-heading: 'Press Start 2P', 'Courier New', monospace;
  --font-body: 'Pixelify Sans', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--px-ink);
  background: var(--night-1);
  line-height: 1.55;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 0.6em;
}

p { margin: 0 0 1em; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== Latar langit piksel ===== */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    var(--night-1) 0 18%,
    var(--night-2) 18% 36%,
    var(--night-3) 36% 54%,
    var(--night-4) 54% 74%,
    var(--night-5) 74% 100%
  );
}

.cloud {
  position: absolute;
  left: -240px;
  height: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 4' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffffff' d='M3 0h4v1H3zM2 1h7v1H2zM8 1h2v1H8zM1 2h10v1H1zM0 3h12v1H0z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  opacity: 0.5;
  filter: grayscale(1);
}

/* Awan: ukuran, tinggi, kecepatan, arah, dan waktu mulai dibuat berbeda-beda */
.c1 { top: 6%;  width: 168px; height: 56px;  opacity: 0.42; }
.c2 { top: 27%; width: 120px; height: 40px;  opacity: 0.30; }
.c3 { top: 38%; width: 264px; height: 88px;  opacity: 0.50; }
.c4 { top: 58%; width: 96px;  height: 29px;  opacity: 0.34; }
.c5 { top: 69%; width: 204px; height: 68px;  opacity: 0.26; }
.c6 { top: 87%; width: 144px; height: 43px;  opacity: 0.46; }

/* Bentuk kedua supaya awan tidak kembar */
.cloud.alt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 3' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffffff' d='M4 0h3v1H4zM1 1h8v1H1zM0 2h10v1H0z'/%3E%3C/svg%3E");
}

/* c4 dan c6 melintas dari kanan ke kiri */
.c4, .c6 { left: auto; right: -300px; }

@media (prefers-reduced-motion: no-preference) {
  .cloud { animation: drift linear infinite; }
  .c4, .c6 { animation-name: drift-rev; }
  .c1 { animation-duration: 74s;  animation-delay: -31s; }
  .c2 { animation-duration: 138s; animation-delay: 12s; }
  .c3 { animation-duration: 97s;  animation-delay: 41s; }
  .c4 { animation-duration: 61s;  animation-delay: -9s; }
  .c5 { animation-duration: 156s; animation-delay: -88s; }
  .c6 { animation-duration: 118s; animation-delay: 27s; }
}

@keyframes drift-rev {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100vw - 600px)); }
}

@keyframes drift {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw + 480px)); }
}

/* ===== Tombol ===== */
.btn {
  display: inline-block;
  padding: 14px 24px;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  line-height: 1.6;
  text-decoration: none;
  color: var(--px-ink);
  background: var(--cream);
  border: var(--pixel) solid var(--px-ink);
  box-shadow: 6px 6px 0 rgba(20, 22, 58, 0.2);
  transition: transform 0.08s steps(2), box-shadow 0.08s steps(2), background 0.1s steps(2);
}

.btn-primary { background: var(--yellow); }

.btn-large { padding: 18px 28px; font-size: 0.78rem; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 rgba(20, 22, 58, 0.2);
    background: #fff;
  }
  .btn-primary:hover { background: #ffe27a; }
}

.btn:active {
  transform: translate(6px, 6px);
  box-shadow: 0 0 0 rgba(20, 22, 58, 0.2);
}

/* ===== Hero ===== */
.hero { position: relative; padding: 120px 0 72px; }

.hero-inner { max-width: 920px; margin: 0 auto; text-align: center; position: relative; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: clamp(0.7rem, 1.6vw, 1rem);
  color: #3a3f5c;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 22px;
  text-shadow: none;
}

.hero h1 {
  font-size: clamp(1.05rem, 2.7vw, 1.9rem);
  color: var(--px-ink);
  text-shadow: 2px 2px 0 #e8eaef;
  margin-bottom: 26px;
}

.hero-sub {
  font-size: 1.15rem;
  color: var(--text-soft);
  margin-bottom: 36px;
  text-align: justify;
  text-align-last: center;
  text-wrap: pretty;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero-stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 18px 8px;
  background: var(--cream);
  border: var(--pixel) solid var(--px-ink);
  box-shadow: 6px 6px 0 rgba(20, 22, 58, 0.2);
}

.hero-stats strong {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(0.95rem, 2.2vw, 1.5rem);
  color: var(--px-ink);
  font-variant-numeric: tabular-nums;
}

.hero-stats span { font-size: 0.95rem; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .hero-inner > * {
    opacity: 0;
    animation: pop-in 0.6s steps(6, end) forwards;
  }
  .hero-inner .eyebrow { animation-delay: 0.05s; }
  .hero-inner h1 { animation-delay: 0.2s; }
  .hero-inner .hero-sub { animation-delay: 0.35s; }
  .hero-inner .hero-stats { animation-delay: 0.5s; }
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Section ===== */
.section { padding: 80px 0; position: relative; }

.section-title {
  font-size: clamp(1rem, 2.4vw, 1.6rem);
  color: var(--px-ink);
  text-align: center;
  text-shadow: 2px 2px 0 #e8eaef;
  margin-bottom: 44px;
}

.section-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 8px;
  margin: 18px auto 0;
  background: repeating-linear-gradient(90deg, var(--yellow) 0 8px, transparent 8px 16px);
}

.section-sub {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 48px;
  color: var(--text-soft);
  font-size: 1.15rem;
}

.grid { display: grid; gap: 28px; }

.grid-3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 920px;
  margin: 0 auto;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--cream);
  border: var(--pixel) solid var(--px-ink);
  box-shadow: 8px 8px 0 rgba(20, 22, 58, 0.2);
  padding: 26px;
  transition: transform 0.1s steps(2), box-shadow 0.1s steps(2);
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 11px 11px 0 rgba(20, 22, 58, 0.2);
  }
}

.card h3 {
  font-size: 0.78rem;
  color: var(--px-ink);
  margin-bottom: 14px;
}

.card h3::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 10px;
  background: var(--green);
  box-shadow: 3px 3px 0 var(--px-ink);
}

.card p { margin: 0; font-size: 1.05rem; color: var(--muted); text-align: justify; }

/* ===== Portofolio ===== */
.porto-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  max-width: 920px;
  margin: 0 auto;
}

.porto-item {
  display: block;
  background: var(--cream);
  border: var(--pixel) solid var(--px-ink);
  box-shadow: 8px 8px 0 rgba(20, 22, 58, 0.2);
  padding: 8px;
  transition: transform 0.1s steps(2), box-shadow 0.1s steps(2);
}

.porto-item img { display: block; width: 100%; height: auto; }

@media (hover: hover) and (pointer: fine) {
  .porto-item:hover {
    transform: translate(-3px, -3px);
    box-shadow: 11px 11px 0 rgba(20, 22, 58, 0.2);
  }
}

.porto-download {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

/* ===== Benefit ===== */
.benefit-section { padding-bottom: 24px; }
.benefit-section .section-title { margin-bottom: 36px; }

.benefit-text {
  max-width: 700px;
  margin: 0 auto;
  padding: 26px;
  background: var(--cream);
  border: var(--pixel) solid var(--px-ink);
  box-shadow: 8px 8px 0 rgba(20, 22, 58, 0.2);
  color: var(--muted);
  font-size: 1.05rem;
  text-align: justify;
  text-align-last: center;
  text-wrap: pretty;
}

/* ===== Kontak ===== */
#kontak { position: relative; padding-bottom: 176px; }

.kontak-inner { text-align: center; }

.kontak-actions {
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== Scroll reveal ===== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s steps(5, end), transform 0.5s steps(5, end);
  }

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

:focus-visible { outline: 4px solid var(--px-ink); outline-offset: 3px; }

::selection { background: var(--yellow); color: var(--px-ink); }

/* ===== Responsif ===== */
@media (max-width: 720px) {
  .grid-3 { grid-template-columns: 1fr; }
  .porto-gallery { grid-template-columns: 1fr; }
  .container { padding: 0 16px; }
  .hero { padding: 80px 0 48px; }
  .section { padding: 56px 0; }
  .card { padding: 20px 16px; }
  .card h3 { font-size: 0.68rem; }
  .card p { font-size: 1rem; }
  .hero-stats { gap: 10px; }
  .hero-stats li { padding: 14px 4px; }
  .hero-stats span { font-size: 0.8rem; }
  .btn-large { width: 100%; text-align: center; }
  .kontak-actions { flex-direction: column; }
  #kontak { padding-bottom: 160px; }
}

/* ===== Sentuhan akademis: topi toga, penggaris, kartu buku catatan, rak buku ===== */
:root { --maroon: #8c2f39; }

.btn-primary { background: var(--px-ink); color: #fff; }
.btn-primary:hover { background: var(--maroon); color: #fff; }

::selection { background: var(--px-ink); color: #fff; }

/* Topi toga piksel di atas label hero */
.hero-inner::before {
  content: "";
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%233a4a8a' d='M4 8h8v4H4zM5 12h6v1H5z'/%3E%3Cpath fill='%2314163a' d='M7 2h2v1H7zM5 3h6v1H5zM3 4h10v1H3zM1 5h14v1H1zM3 6h10v1H3zM5 7h6v1H5z'/%3E%3Cpath fill='%23c9a227' d='M14 6h1v4h-1zM13 10h3v2h-3z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  image-rendering: pixelated;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-inner::before { animation: cap-bob 2.4s steps(1, end) infinite; }
}

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

.eyebrow { border-bottom: 4px solid var(--maroon); padding-bottom: 10px; }

/* Judul seksi: garis bawah berupa penggaris dengan skala */
.section-title::after {
  width: 192px;
  height: 16px;
  margin: 18px auto 0;
  background:
    linear-gradient(var(--px-ink), var(--px-ink)) left bottom / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, var(--px-ink) 0 4px, transparent 4px 16px) left bottom 4px / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 32px, var(--maroon) 32px 36px, transparent 36px 48px) left bottom 4px / 100% 16px no-repeat;
}

/* Kartu layanan seperti halaman buku catatan: garis margin merah di kiri */
.card {
  padding-left: 46px;
  background-image: linear-gradient(90deg, transparent 0 24px, #e6b9bd 24px 26px, transparent 26px);
}

.card h3::before { background: var(--maroon); }

/* Rak buku piksel di dasar halaman */
#kontak::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background:
    linear-gradient(var(--px-ink), var(--px-ink)) left bottom / 100% 8px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12' shape-rendering='crispEdges'%3E%3Cpath fill='%2314163a' d='M0 2h4v10H0zM18 5h3v7h-3zM28 2h4v10h-4z'/%3E%3Cpath fill='%238c2f39' d='M4 4h3v8H4zM14 2h4v10h-4z'/%3E%3Cpath fill='%235b6b8f' d='M7 1h4v11H7zM25 3h3v9h-3z'/%3E%3Cpath fill='%23c9a227' d='M11 3h3v9h-3zM21 1h4v11h-4z'/%3E%3Cpath fill='%23fff' fill-opacity='.55' d='M1 4h2v1H1zM5 6h1v1H5zM8 3h2v1H8zM15 4h2v1h-2zM22 3h2v1h-2zM29 4h2v1h-2z'/%3E%3C/svg%3E") left bottom 8px / 128px 48px repeat-x;
  image-rendering: pixelated;
}

@media (max-width: 720px) {
  .card { padding-left: 38px; background-image: linear-gradient(90deg, transparent 0 18px, #e6b9bd 18px 20px, transparent 20px); }
  .hero-inner::before { width: 72px; height: 72px; }
  #kontak { padding-bottom: 160px; }
}

/* ===== Portofolio: halaman putih diberi alas gelap dan garis tepi supaya tidak menyatu ===== */
.porto-item {
  padding: 18px;
  background: #8e96ac;
}

.porto-item img {
  box-shadow: 0 0 0 3px var(--px-ink), 6px 6px 0 rgba(20, 22, 58, 0.35);
}

@media (max-width: 720px) {
  .porto-item { padding: 14px; }
}

/* Garis bawah judul seksi: bar tebal sederhana (menggantikan penggaris bergerigi) */
.section-title::after {
  width: 112px;
  height: 8px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, var(--px-ink) 0 75%, var(--maroon) 75% 100%);
}

/* ===== Awan lebih samar + animasi halus saat scroll ===== */
.cloud { filter: none; will-change: transform; }
.c1 { opacity: 0.20; }
.c2 { opacity: 0.14; }
.c3 { opacity: 0.24; }
.c4 { opacity: 0.16; }
.c5 { opacity: 0.12; }
.c6 { opacity: 0.22; }

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    transition: opacity 0.75s cubic-bezier(.16, 1, .3, 1), transform 0.75s cubic-bezier(.16, 1, .3, 1);
  }
  .hero-inner > * {
    animation-duration: 0.85s;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  }
}

/* ===== Huruf lebih nyaman dibaca: judul tetap bergaya piksel (Pixelify Sans), isi memakai Inter ===== */
:root {
  --font-heading: 'Pixelify Sans', 'Courier New', monospace;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

body { font-size: 1rem; line-height: 1.7; }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; }

.eyebrow { font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 600; letter-spacing: 0.08em; }
.hero h1 { font-size: clamp(1.8rem, 4.4vw, 3rem); }
.hero-sub { font-size: 1.1rem; }
.hero-stats strong { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 700; }
.hero-stats span { font-size: 0.92rem; }

.section-title { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
.section-sub { font-size: 1.08rem; }

.card h3 { font-size: 1.2rem; margin-bottom: 12px; }
.card p { font-size: 0.97rem; line-height: 1.7; text-align: left; }
.benefit-text { font-size: 1rem; line-height: 1.75; }

.btn { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.02em; }
.btn-large { font-size: 1.12rem; }

@media (max-width: 720px) {
  .hero h1 { font-size: 1.75rem; }
  .section-title { font-size: 1.5rem; }
  .card h3 { font-size: 1.1rem; }
  .card p { font-size: 0.93rem; }
  .hero-stats strong { font-size: 1.5rem; }
  .hero-stats span { font-size: 0.78rem; }
  .btn-large { font-size: 1.05rem; }
}


/* Teks isi bergaya piksel (Pixelify Sans), ukuran sedikit dinaikkan agar tetap nyaman dibaca */
:root { --font-body: 'Pixelify Sans', 'Courier New', monospace; }

body { font-weight: 500; letter-spacing: 0.01em; line-height: 1.6; }

.hero-sub { font-size: 1.2rem; }
.section-sub { font-size: 1.18rem; }
.card p { font-size: 1.08rem; line-height: 1.55; }
.benefit-text { font-size: 1.1rem; line-height: 1.6; }
.hero-stats span { font-size: 1rem; }

@media (max-width: 720px) {
  .card p { font-size: 1rem; }
  .hero-sub { font-size: 1.1rem; }
  .hero-stats span { font-size: 0.85rem; }
}

/* Angka statistik pakai Inter karena "5" di Pixelify Sans terbaca seperti "S" */
.hero-stats strong { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 700; }

/* Latar sedikit lebih gelap dan awan lebih jelas */
:root {
  --night-1: #e3e8f0;
  --night-2: #dce2ec;
  --night-3: #d5dce8;
  --night-4: #cdd5e3;
  --night-5: #c5cedf;
}

.c1 { opacity: 0.75; }
.c2 { opacity: 0.55; }
.c3 { opacity: 0.8; }
.c4 { opacity: 0.6; }
.c5 { opacity: 0.5; }
.c6 { opacity: 0.7; }

/* Latar abu-abu netral */
:root {
  --night-1: #e6e6e8;
  --night-2: #dfdfe1;
  --night-3: #d8d8db;
  --night-4: #d0d0d3;
  --night-5: #c8c8cc;
}

/* Latar gradasi halus (tanpa garis pembatas) */
.sky {
  background: linear-gradient(to bottom, var(--night-1), var(--night-5));
}

/* Animasi scroll lebih halus */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    transform: translateY(14px);
    transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
  }
  .reveal.is-visible { transform: translateY(0); }
  .card, .porto-item, .btn { transition-timing-function: cubic-bezier(.22, 1, .36, 1); transition-duration: 0.25s; }
}


/* Awan langsung bergerak sejak halaman dibuka (jeda negatif, bukan menunggu di tepi layar) */
@media (prefers-reduced-motion: no-preference) {
  .c2 { animation-delay: -60s; }
  .c3 { animation-delay: -45s; }
  .c6 { animation-delay: -80s; }
}

/* Awan tersebar di titik perjalanan berbeda-beda, jadi muncul bergantian dan tidak serempak */
@media (prefers-reduced-motion: no-preference) {
  .c1 { animation-duration: 74s;  animation-delay: -7s; }
  .c2 { animation-duration: 138s; animation-delay: -108s; }
  .c3 { animation-duration: 97s;  animation-delay: -32s; }
  .c4 { animation-duration: 61s;  animation-delay: -38s; }
  .c5 { animation-duration: 156s; animation-delay: -140s; }
  .c6 { animation-duration: 118s; animation-delay: -30s; }
}

/* Satu awan di celah kiri antara statistik dan judul Layanan; ikut halaman, bergoyang pelan */
.cloud-here {
  left: 3%;
  top: auto;
  bottom: -36px;
  width: 150px;
  height: 50px;
  opacity: 0.8;
  z-index: -1;
  animation: none;
}

@media (prefers-reduced-motion: no-preference) {
  .cloud-here { animation: sway 9s ease-in-out infinite alternate; }
}

@keyframes sway {
  from { transform: translateX(0); }
  to { transform: translateX(36px); }
}

@media (max-width: 720px) {
  .cloud-here { width: 108px; height: 36px; bottom: -28px; left: 2%; }
}

/* Awan di celah statistik/Layanan melintas penuh dari kiri ke kanan */
.hero { overflow-x: clip; }

.cloud-here { left: -200px; }

@media (prefers-reduced-motion: no-preference) {
  .cloud-here { animation: drift 70s linear infinite; animation-delay: -12s; }
}

@media (max-width: 720px) {
  .cloud-here { left: -140px; }
}

/* Tanpa bayangan di kotak-kotak */
.btn,
.hero-stats li,
.card,
.porto-item,
.benefit-text { box-shadow: none; }

.porto-item img { box-shadow: 0 0 0 3px var(--px-ink); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover,
  .card:hover,
  .porto-item:hover { box-shadow: none; }
}

.btn:active { box-shadow: none; }

/* Kartu layanan: tetap piksel, tapi lebih besar, lebih kontras, dan lega */
.card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--px-ink);
  margin-bottom: 12px;
}

.card p {
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.03em;
  word-spacing: 0.08em;
  color: #2a2e52;
}

@media (max-width: 720px) {
  .card h3 { font-size: 1.2rem; }
  .card p { font-size: 1.08rem; }
}

/* Isi kartu layanan pakai Inter supaya enak dibaca; judul kartu tetap piksel */
.card p {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  word-spacing: 0;
  color: #2f3350;
}

@media (max-width: 720px) {
  .card p { font-size: 0.95rem; }
}

/* Judul kartu: DotGothic16 (piksel, huruf C terbuka jelas; di Pixelify Sans "Cek" terbaca "Oek") */
.card h3 {
  font-family: 'DotGothic16', 'Pixelify Sans', 'Courier New', monospace;
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}

@media (max-width: 720px) {
  .card h3 { font-size: 1.2rem; }
}

/* Border abu-abu portofolio diperkecil */
.porto-item { padding: 8px; }

@media (max-width: 720px) {
  .porto-item { padding: 6px; }
}

/* Judul kartu: VT323 (piksel bergaya terminal, huruf C jelas) */
.card h3 {
  font-family: 'VT323', 'Pixelify Sans', 'Courier New', monospace;
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

@media (max-width: 720px) {
  .card h3 { font-size: 1.5rem; }
}

/* Angka statistik pakai VT323 seperti judul kartu (angka 5 jelas) */
.hero-stats strong {
  font-family: 'VT323', 'Pixelify Sans', 'Courier New', monospace;
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1;
}

@media (max-width: 720px) {
  .hero-stats strong { font-size: 2rem; }
}

/* Isi kartu layanan pakai VT323 (piksel, ramping, jelas); ukuran dinaikkan karena font ini tampak kecil */
.card p {
  font-family: 'VT323', 'Pixelify Sans', 'Courier New', monospace;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: #232748;
}

@media (max-width: 720px) {
  .card p { font-size: 1.3rem; }
}

/* ===== Semua teks memakai VT323 ===== */
:root {
  --font-heading: 'VT323', 'Courier New', monospace;
  --font-body: 'VT323', 'Courier New', monospace;
}

body { font-size: 1.4rem; font-weight: 400; line-height: 1.35; letter-spacing: 0.02em; }

h1, h2, h3, h4 { font-weight: 400; line-height: 1.1; }

.eyebrow { font-size: clamp(1.4rem, 2.6vw, 1.8rem); font-weight: 400; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4rem); }
.hero-sub { font-size: 1.5rem; line-height: 1.35; }
.hero-stats span { font-size: 1.25rem; }

.section-title { font-size: clamp(2.4rem, 4.6vw, 3.2rem); }
.section-sub { font-size: 1.5rem; }
.benefit-text { font-size: 1.45rem; line-height: 1.4; }

.btn { font-size: 1.5rem; font-weight: 400; letter-spacing: 0.04em; }
.btn-large { font-size: 1.6rem; }

@media (max-width: 720px) {
  .eyebrow { font-size: 1.3rem; }
  .hero h1 { font-size: 2.4rem; }
  .hero-sub { font-size: 1.3rem; }
  .hero-stats span { font-size: 1.05rem; }
  .section-title { font-size: 2.2rem; }
  .section-sub { font-size: 1.3rem; }
  .benefit-text { font-size: 1.3rem; }
  .btn-large { font-size: 1.45rem; }
}

/* Kartu layanan: kertas binder, garis margin merah diganti lubang binder di kiri */
.card {
  padding-left: 52px;
  background-color: var(--cream);
  background-image:
    radial-gradient(circle at 24px 20%, #cfcfd3 0 6px, var(--px-ink) 6px 8px, transparent 8.5px),
    radial-gradient(circle at 24px 50%, #cfcfd3 0 6px, var(--px-ink) 6px 8px, transparent 8.5px),
    radial-gradient(circle at 24px 80%, #cfcfd3 0 6px, var(--px-ink) 6px 8px, transparent 8.5px);
}

@media (max-width: 720px) {
  .card {
    padding-left: 44px;
    background-image:
      radial-gradient(circle at 20px 20%, #cfcfd3 0 5px, var(--px-ink) 5px 7px, transparent 7.5px),
      radial-gradient(circle at 20px 50%, #cfcfd3 0 5px, var(--px-ink) 5px 7px, transparent 7.5px),
      radial-gradient(circle at 20px 80%, #cfcfd3 0 5px, var(--px-ink) 5px 7px, transparent 7.5px);
  }
}

/* Tombol kontak: tinggi kembali seperti versi awal (sekitar 64px), tetap selebar layar di HP */
.btn { font-size: 1.3rem; }
.btn-large { padding: 14px 28px; font-size: 1.3rem; }

@media (max-width: 720px) {
  .btn-large { font-size: 1.3rem; }
}

/* Layout tombol kontak di HP: bertumpuk vertikal, rata tengah, lebar mengikuti teks */
@media (max-width: 720px) {
  .kontak-actions { flex-direction: column; align-items: center; gap: 14px; }
  .btn-large { width: auto; padding: 12px 28px; }
}

/* Portofolio: tanpa alas abu dan bingkai ganda, cukup garis hitam di tepi gambar */
.porto-item {
  padding: 0;
  background: none;
  border: 0;
}

.porto-item img { box-shadow: none; border: var(--pixel) solid #000; }

/* Tombol WhatsApp: garis tepi maroon */
.btn-primary { border-color: var(--maroon); }

/* Garis bawah judul seksi: selebar teks judul, bagian maroon dikecilkan sedikit */
.section-title { display: table; margin-left: auto; margin-right: auto; }
.section-title::after {
  width: 100%;
  background: linear-gradient(90deg, var(--px-ink) 0 88%, var(--maroon) 88% 100%);
}

/* Garis bawah label hero: sama dengan garis judul seksi (navy, ujung maroon kecil) */
.eyebrow {
  border-bottom: 0;
  padding-bottom: 26px;
  background: linear-gradient(90deg, var(--px-ink) 0 88%, var(--maroon) 88% 100%) left bottom / 100% 8px no-repeat;
}

/* Hero: judul dikecilkan sedikit, label "Konsultan Penelitian" dibesarkan sedikit */
.hero h1 { font-size: clamp(2.4rem, 5.5vw, 3.6rem); }
.eyebrow { font-size: clamp(1.6rem, 3vw, 2.1rem); }

@media (max-width: 720px) {
  .hero h1 { font-size: 2.2rem; }
  .eyebrow { font-size: 1.5rem; }
}

/* Garis bawah judul seksi dan label hero: dipertipis */
.section-title::after {
  height: 5px;
  margin-top: 14px;
}
.eyebrow {
  padding-bottom: 20px;
  background-size: 100% 5px;
}

/* Garis bawah judul seksi dan label hero: 5% lebih panjang dari teks (rata tengah) */
.section-title::after { width: 105%; margin-left: -2.5%; }

.eyebrow { position: relative; background: none; }
.eyebrow::after {
  content: "";
  position: absolute;
  left: -2.5%;
  right: -2.5%;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--px-ink) 0 88%, var(--maroon) 88% 100%);
}

/* Garis bawah judul seksi dan label hero: tebal 6px */
.section-title::after,
.eyebrow::after { height: 6px; }

/* Judul hero: selalu tepat 3 baris di semua layar, ukuran huruf menyesuaikan lebar layar */
.hero h1 .h1-line { display: block; white-space: nowrap; }
.hero h1 { font-size: min(3.6rem, calc((100vw - 40px) / 15)); }

@media (max-width: 720px) {
  .hero h1 { font-size: calc((100vw - 40px) / 15); }
}

/* Portofolio: gambar hanya pratinjau, tidak bisa diklik (lihat lengkap lewat tombol Unduh) */
.porto-item { pointer-events: none; user-select: none; -webkit-touch-callout: none; }
.porto-item:hover { transform: none; }

/* Uraian kartu layanan: satu ukuran huruf di semua layar, pas 3 baris sampai layar HP 360px */
.card p { font-size: 15px; letter-spacing: 0; }

@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .card { padding-left: 36px; padding-right: 12px; }
}

/* Kartu layanan: lubang binder dihapus, ruang kiri dipakai untuk huruf uraian yang lebih besar */
.card { padding-left: 26px; background-image: none; }
.card p { font-size: 16.5px; }

@media (max-width: 720px) {
  .card { padding-left: 14px; padding-right: 14px; background-image: none; }
}

/* Uraian kartu layanan rata kiri-kanan */
.card p { text-align: justify; }

/* Teks kecil (uraian, paragraf, keterangan) hitam pekat */
.hero-sub,
.hero-stats span,
.section-sub,
.card p,
.benefit-text { color: #000; }

/* Uraian kartu layanan: huruf dibesarkan 2x 5% (16.5px -> 18.2px) */
.card p { font-size: 18.2px; }

/* Label "Konsultan Penelitian": tampilan huruf sama dengan judul hero (warna pekat + bayangan tebal) */
.eyebrow { color: var(--px-ink); text-shadow: 2px 2px 0 #e8eaef; }
.eyebrow { text-shadow: 1px 0 0 var(--px-ink), 0.5px 0 0 var(--px-ink), 2px 2px 0 #e8eaef; }

/* ===== Tombol melayang FAQ + panel ===== */
.faq-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--px-ink);
  border: var(--pixel) solid var(--maroon);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(.22, 1, .36, 1), background 0.15s steps(2);
}

.faq-ico { width: 21px; height: 21px; }

@media (hover: hover) and (pointer: fine) {
  .faq-fab:hover { transform: translate(-2px, -2px); background: var(--maroon); }
}

.faq-fab[aria-expanded="true"] { background: var(--maroon); }

.faq-panel {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 110px);
  background: #fff;
  border: var(--pixel) solid var(--px-ink);
}

.faq-panel[hidden] { display: none; }

.faq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--px-ink);
  border-bottom: var(--pixel) solid var(--maroon);
}

.faq-title { margin: 0; font-size: 1.6rem; line-height: 1; color: #fff; }

.faq-close {
  padding: 0 4px;
  font-family: var(--font-heading);
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
}

.faq-body { overflow-y: auto; padding: 6px 16px; }

.faq-body details { border-bottom: 2px dashed #cfd2da; }
.faq-body details:last-child { border-bottom: 0; }

.faq-body summary {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--px-ink);
  cursor: pointer;
  list-style: none;
}

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

.faq-body summary::before {
  content: "+";
  flex: none;
  width: 14px;
  color: var(--maroon);
}

.faq-body details[open] summary::before { content: "-"; }

.faq-body details p {
  margin: 0 0 14px 24px;
  font-size: 1.2rem;
  line-height: 1.3;
  color: #000;
}

.faq-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px 16px;
}

.faq-cta {
  padding: 10px 8px;
  text-align: center;
  font-size: 1.3rem;
}

@media (max-width: 720px) {
  .faq-fab { right: 16px; bottom: 16px; font-size: 1.35rem; padding: 8px 16px; }
  .faq-panel { right: 16px; bottom: 72px; max-height: calc(100vh - 96px); }
  .faq-cta { width: auto; }
}

/* Isi panel FAQ: pertanyaan ditebalkan ala piksel */
.faq-body summary {
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0;
  text-shadow: 0.6px 0 0 currentColor, 0.3px 0 0 currentColor;
}

.faq-body details p {
  font-size: 13.5px;
  line-height: 1.7;
  letter-spacing: 0;
}

/* Judul hero di HP: boleh lebih dari 3 baris supaya huruf tetap lebih besar dari paragraf di bawahnya */
@media (max-width: 720px) {
  .hero h1 .h1-line { display: inline; white-space: normal; }
  .hero h1 { font-size: clamp(1.9rem, 8.6vw, 2.5rem); line-height: 1.12; text-wrap: balance; }
}

/* Isi FAQ pakai KBS Grotesk: turunan Terminal Grotesque (SIL OFL), celah kaki huruf m dilebarkan; wajib ganti nama karena Reserved Font Name */
@font-face {
  font-family: 'KBS Grotesk';
  src: url("assets/kbs-grotesk.woff") format("woff");
  font-display: swap;
}

.faq-body summary,
.faq-body details p { font-family: 'KBS Grotesk', 'VT323', monospace; }
.faq-body summary { font-size: 18px; line-height: 1.35; }
.faq-body details p { font-size: 16.5px; line-height: 1.55; }

/* Teks uraian halaman utama pakai KBS VT: turunan VT323 (SIL OFL) dengan celah kaki huruf m dilebarkan */
@font-face {
  font-family: 'KBS VT';
  src: url("assets/kbs-vt.woff") format("woff");
  font-display: swap;
}

.hero-sub,
.hero-stats span,
.section-sub,
.card p,
.benefit-text { font-family: 'KBS VT', 'VT323', monospace; }

/* Label "Konsultan Penelitian": huruf sama persis dengan judul hero (VT323, warna & bayangan judul),
   huruf kapital semua, ukuran sama dengan judul di bawahnya di semua layar */
.eyebrow {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--px-ink);
  text-shadow: 2px 2px 0 #e8eaef;
  text-transform: uppercase;
  line-height: 1.12;
  text-wrap: balance;
  /* = ukuran judul hero; di layar sempit boleh dua baris seperti judulnya */
  font-size: min(3.6rem, calc((100vw - 40px) / 15));
}

/* HP: judul hero kembali tepat 3 baris seperti di laptop (ukuran mengikuti lebar layar),
   label "Konsultan Penelitian" ikut ukuran yang sama */
@media (max-width: 720px) {
  .hero h1 .h1-line { display: block; white-space: nowrap; }
  .hero h1,
  .eyebrow { font-size: calc((100vw - 40px) / 15); }
}

/* Judul hero: "selesai" pindah ke baris 3, baris terpanjang kini ±27 huruf -> huruf boleh lebih besar
   (pembagi 15 -> 11.8, tetap maks 3.6rem); label "Konsultan Penelitian" ikut */
.hero h1,
.eyebrow { font-size: min(3.6rem, calc((100vw - 40px) / 11.8)); }

@media (max-width: 720px) {
  .hero h1,
  .eyebrow { font-size: calc((100vw - 40px) / 11.8); }
}

/* Judul seksi & label hero: blok terbalik (tulisan putih di atas kotak navy), tanpa garis/siku/bayangan.
   "Konsultasi Sekarang" (#kontak) tetap memakai garis bawah lama. */
.eyebrow::after,
#layanan .section-title::after,
#portofolio .section-title::after,
#benefit .section-title::after { display: none; }

.eyebrow,
#layanan .section-title,
#portofolio .section-title,
#benefit .section-title {
  padding: 2px 18px 4px;
  color: #fff;
  background: var(--px-ink);
  text-shadow: none;
}

.eyebrow { margin-bottom: 30px; }

/* Pengganti topi toga: buku skripsi membalik halaman, lalu stempel ACC jatuh ke halaman kanan */
:root { --merah: #c0262d; --biru: #2f4bb0; }
.hero-inner::before { display: none; }
.hero-buku { height: 104px; margin: 0 auto 18px; display: flex; align-items: flex-end; justify-content: center; }
.hero-buku .buku { position: relative; display: flex; perspective: 420px; border-bottom: 6px solid var(--px-ink); }
.hero-buku .hal, .hero-buku .lembar { width: 64px; height: 76px; background: #fff; border: 4px solid var(--px-ink); }
.hero-buku .hal { padding: 12px 8px; display: grid; gap: 7px; align-content: start; }
.hero-buku .kiri { border-right-width: 2px; }
.hero-buku .kanan { border-left-width: 2px; }
.hero-buku .hal i { display: block; height: 4px; background: #c5c8d6; }
.hero-buku .hal i:nth-child(3) { width: 60%; }
.hero-buku .lembar { position: absolute; left: 50%; top: 0; border-left-width: 2px; transform-origin: left center;
  background: linear-gradient(#c5c8d6, #c5c8d6) 8px 12px / calc(100% - 16px) 4px no-repeat, linear-gradient(#c5c8d6, #c5c8d6) 8px 23px / calc(100% - 16px) 4px no-repeat,
    linear-gradient(#c5c8d6, #c5c8d6) 8px 34px / 60% 4px no-repeat, #fff; }
/* pita pembatas buku, mencuat di atas halaman */
.hero-buku .pita { position: absolute; top: -12px; width: 8px; height: 22px; z-index: -1; }
.hero-buku .p1 { left: 16px; background: var(--yellow); }
.hero-buku .p2 { left: 28px; height: 16px; top: -8px; background: var(--green); }
.hero-buku .p3 { right: 20px; background: var(--maroon); }
.hero-buku .cap { position: absolute; left: 75%; top: 46%; z-index: 100; opacity: 0; font-weight: 400; font-size: 2.1rem; line-height: 1;
  color: var(--merah); border: 4px solid var(--merah); padding: 0 7px 2px; background: rgba(255, 255, 255, 0.7);
  transform: translate(-50%, -50%) rotate(-14deg); }

.hero-buku .cap { width: max-content; white-space: nowrap; }
.hero-buku .acc1 { font-size: 2.1rem; }
.hero-buku .acc2 { left: 66%; top: 58%; font-size: 1.35rem; }
.hero-buku .acc3 { left: 80%; top: 38%; font-size: 2.7rem; }
.hero-buku .acc4 { left: 70%; top: 52%; font-size: 1.7rem; }
.hero-buku .acc5 { left: 31%; top: 49%; font-size: 2.3rem; }
@media (max-width: 720px) { .hero-buku { scale: .85; margin-bottom: 10px; } }

/* Semua gerak buku dibuat halus (bukan patah-patah): muncul pelan, halaman berbalik dengan percepatan alami,
   stempel jatuh lalu memantul kecil, buku sedikit tertekan saat distempel */
.hero-buku .lembar, .hero-buku .cap, .hero-buku .buku { will-change: transform; }
.hero-buku .lembar { backface-visibility: visible; }
.hero-buku .buku { perspective: none; }

@media (prefers-reduced-motion: no-preference) {
  .hero-inner .hero-buku { animation: buku-muncul 0.7s cubic-bezier(.2, .7, .3, 1) forwards; }
  .hero-buku .l1 { animation: buku-b1 9.6s linear infinite; }
  .hero-buku .l2 { animation: buku-b2 9.6s linear infinite; }
  .hero-buku .l3 { animation: buku-b3 9.6s linear infinite; }
  .hero-buku .l4 { animation: buku-b4 9.6s linear infinite; }
  .hero-buku .acc1 { animation: buku-acc1 9.6s linear infinite; }
  .hero-buku .acc2 { animation: buku-acc2 9.6s linear infinite; }
  .hero-buku .acc3 { animation: buku-acc3 9.6s linear infinite; }
  .hero-buku .acc4 { animation: buku-acc4 9.6s linear infinite; }
  .hero-buku .acc5 { animation: buku-acc5 9.6s linear infinite; }
  .hero-buku .buku { animation: buku-guncang 9.6s linear infinite; }
}

@keyframes buku-muncul {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* halaman: dibalik datar di engsel tengah (lebar menyusut ke garis tengah lalu terbuka ke kiri);
   tanpa perspektif 3D jadi halaman tidak menembus garis buku. Kembali ke kanan satu per satu. */
/* stempel: turun mempercepat, menekan sedikit, memantul, diam, lalu memudar */

@keyframes buku-b1 {
  0%, 4.167% { transform: scaleX(1); z-index: 9; animation-timing-function: cubic-bezier(.5, 0, .75, .4); }
  6.406% { transform: scaleX(0.02); z-index: 9; animation-timing-function: step-end; }
  6.51% { transform: scaleX(0); z-index: 21; animation-timing-function: cubic-bezier(.25, .6, .5, 1); }
  8.854%, 75.625% { transform: scaleX(-1); z-index: 21; animation-timing-function: cubic-bezier(.5, 0, .75, .4); }
  76.667% { transform: scaleX(-0.02); z-index: 21; animation-timing-function: step-end; }
  76.771% { transform: scaleX(0); z-index: 9; animation-timing-function: cubic-bezier(.25, .6, .5, 1); }
  77.917%, 100% { transform: scaleX(1); z-index: 9; } }
@keyframes buku-b2 {
  0%, 20.313% { transform: scaleX(1); z-index: 8; animation-timing-function: cubic-bezier(.5, 0, .75, .4); }
  22.552% { transform: scaleX(0.02); z-index: 8; animation-timing-function: step-end; }
  22.656% { transform: scaleX(0); z-index: 22; animation-timing-function: cubic-bezier(.25, .6, .5, 1); }
  25.0%, 74.896% { transform: scaleX(-1); z-index: 22; animation-timing-function: cubic-bezier(.5, 0, .75, .4); }
  75.938% { transform: scaleX(-0.02); z-index: 22; animation-timing-function: step-end; }
  76.042% { transform: scaleX(0); z-index: 8; animation-timing-function: cubic-bezier(.25, .6, .5, 1); }
  77.188%, 100% { transform: scaleX(1); z-index: 8; } }
@keyframes buku-b3 {
  0%, 36.458% { transform: scaleX(1); z-index: 7; animation-timing-function: cubic-bezier(.5, 0, .75, .4); }
  38.698% { transform: scaleX(0.02); z-index: 7; animation-timing-function: step-end; }
  38.802% { transform: scaleX(0); z-index: 23; animation-timing-function: cubic-bezier(.25, .6, .5, 1); }
  41.146%, 74.167% { transform: scaleX(-1); z-index: 23; animation-timing-function: cubic-bezier(.5, 0, .75, .4); }
  75.208% { transform: scaleX(-0.02); z-index: 23; animation-timing-function: step-end; }
  75.312% { transform: scaleX(0); z-index: 7; animation-timing-function: cubic-bezier(.25, .6, .5, 1); }
  76.458%, 100% { transform: scaleX(1); z-index: 7; } }
@keyframes buku-b4 {
  0%, 52.604% { transform: scaleX(1); z-index: 6; animation-timing-function: cubic-bezier(.5, 0, .75, .4); }
  54.844% { transform: scaleX(0.02); z-index: 6; animation-timing-function: step-end; }
  54.948% { transform: scaleX(0); z-index: 24; animation-timing-function: cubic-bezier(.25, .6, .5, 1); }
  57.292%, 73.438% { transform: scaleX(-1); z-index: 24; animation-timing-function: cubic-bezier(.5, 0, .75, .4); }
  74.479% { transform: scaleX(-0.02); z-index: 24; animation-timing-function: step-end; }
  74.583% { transform: scaleX(0); z-index: 6; animation-timing-function: cubic-bezier(.25, .6, .5, 1); }
  75.729%, 100% { transform: scaleX(1); z-index: 6; } }
@keyframes buku-acc1 {
  0%, 9.375% { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(2.4); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  13.542% { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(0.92); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  15.104% { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1.04); animation-timing-function: ease-in-out; }
  16.146%, 17.188% { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1); animation-timing-function: ease-in; }
  19.271%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(1); } }
@keyframes buku-acc2 {
  0%, 25.521% { opacity: 0; transform: translate(-50%, -50%) rotate(-80deg) scale(3); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  29.688% { opacity: 1; transform: translate(-50%, -50%) rotate(8deg) scale(0.9); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  31.25% { opacity: 1; transform: translate(-50%, -50%) rotate(8deg) scale(1.06); animation-timing-function: ease-in-out; }
  32.292%, 33.333% { opacity: 1; transform: translate(-50%, -50%) rotate(8deg) scale(1); animation-timing-function: ease-in; }
  35.417%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(8deg) scale(1); } }
@keyframes buku-acc3 {
  0%, 41.667% { opacity: 0; transform: translate(-50%, calc(-50% - 70px)) rotate(-6deg) scale(1.3); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  45.833% { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) scale(0.95); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  47.396% { opacity: 1; transform: translate(-50%, calc(-50% - 9px)) rotate(-6deg) scale(1.02); animation-timing-function: ease-in-out; }
  48.437%, 49.479% { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) scale(1); animation-timing-function: ease-in; }
  51.562%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-6deg) scale(1); } }
@keyframes buku-acc4 {
  0%, 57.813% { opacity: 0; transform: translate(calc(-50% + 70px), -50%) rotate(-34deg) scale(0.8); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  61.979% { opacity: 1; transform: translate(-50%, -50%) rotate(-20deg) scale(0.93); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  63.542% { opacity: 1; transform: translate(-50%, -50%) rotate(-20deg) scale(1.05); animation-timing-function: ease-in-out; }
  64.583%, 68.75% { opacity: 1; transform: translate(-50%, -50%) rotate(-20deg) scale(1); animation-timing-function: ease-in; }
  70.833%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-20deg) scale(1); } }
@keyframes buku-acc5 {
  0%, 79.167% { opacity: 0; transform: translate(calc(-50% - 70px), calc(-50% - 50px)) rotate(40deg) scale(3.2); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  83.333% { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(0.88); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  84.896% { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(1.08); animation-timing-function: ease-in-out; }
  85.938%, 91.667% { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(1); animation-timing-function: ease-in; }
  93.75%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg) scale(1); } }
@keyframes buku-guncang {
  0% { transform: translateY(0); animation-timing-function: ease-out; }
  13.021% { transform: translateY(0); animation-timing-function: ease-out; }
  14.583% { transform: translateY(3px); animation-timing-function: ease-in-out; }
  16.146% { transform: translateY(-1px); animation-timing-function: ease-in-out; }
  17.708% { transform: translateY(0); animation-timing-function: ease-out; }
  29.167% { transform: translateY(0); animation-timing-function: ease-out; }
  30.729% { transform: translateY(3px); animation-timing-function: ease-in-out; }
  32.292% { transform: translateY(-1px); animation-timing-function: ease-in-out; }
  33.854% { transform: translateY(0); animation-timing-function: ease-out; }
  45.313% { transform: translateY(0); animation-timing-function: ease-out; }
  46.875% { transform: translateY(3px); animation-timing-function: ease-in-out; }
  48.438% { transform: translateY(-1px); animation-timing-function: ease-in-out; }
  50.0% { transform: translateY(0); animation-timing-function: ease-out; }
  61.458% { transform: translateY(0); animation-timing-function: ease-out; }
  63.021% { transform: translateY(3px); animation-timing-function: ease-in-out; }
  64.583% { transform: translateY(-1px); animation-timing-function: ease-in-out; }
  66.146% { transform: translateY(0); animation-timing-function: ease-out; }
  82.812% { transform: translateY(0); animation-timing-function: ease-out; }
  84.375% { transform: translateY(3px); animation-timing-function: ease-in-out; }
  85.938% { transform: translateY(-1px); animation-timing-function: ease-in-out; }
  87.5% { transform: translateY(0); animation-timing-function: ease-out; }
  100% { transform: translateY(0); } }

/* Tombol FAQ + panelnya dinaikkan sekitar 5% tinggi layar */
.faq-fab { bottom: calc(20px + 5vh); }
.faq-panel { bottom: calc(84px + 5vh); max-height: calc(100vh - 110px - 5vh); }

@media (max-width: 720px) {
  .faq-fab { bottom: calc(16px + 5vh); }
  .faq-panel { bottom: calc(72px + 5vh); max-height: calc(100vh - 96px - 5vh); }
}

/* HP: ketuk dua kali tidak lagi memperbesar halaman (cubit dua jari tetap bisa), sekaligus menghapus jeda ketukan di tombol FAQ */
html, body, * { touch-action: manipulation; }
/* sorotan biru bawaan HP saat tombol diketuk dihilangkan */
a, button, summary { -webkit-tap-highlight-color: transparent; }

/* Judul kartu layanan: kotak marun diganti lencana huruf pertama (huruf putih di kotak marun) */
.card h3::before { display: none; }
.card h3::first-letter { background: var(--maroon); color: #fff; padding: 0 5px; margin-right: 3px; }