/* Prompt Motion (KolamDigital): gaya "Studio Stiker".
   Fitur gabungan MotionPrompt + prompt-motion.com, identitas visual KolamDigital:
   - kanvas kertas terang dengan banner bergrid (kanvas video @zonamerah dan /template-desain-md/);
   - kartu stiker: garis hitam 2 px + bayangan solid tanpa blur (beranda kolamdigital.com);
   - judul Antonio, teks Plus Jakarta Sans, prompt JetBrains Mono;
   - satu aksen: stabilo oranye di judul (seperti /template-desain-md/).
   Mode terang bawaan; mode malam lewat :root[data-theme="dark"] (skrip kecil di <head> + tombol tema). */

:root {
  --canvas: #f6f6ff;
  --paper: #ffffff;
  --ink: #14142b;
  --ink-soft: #4a4a62; /* WCAG AAA: 7,36:1 di banner, 7,99:1 di kanvas, 8,58:1 di kertas */
  --hairline: #e3e3f0;

  /* Brand: --brand untuk garis/fokus/isian, --brand-text untuk tautan, --brand-tint untuk latar lembut */
  --brand: #5b61f6;
  --brand-text: #3d3dc8;
  --brand-tint: #ececff;
  --stabilo: #ff8a00;
  /* Aksen teks oranye (tanda baca judul, pemisah breadcrumb). #FF8A00 hanya 2,03:1 di banner terang,
     jadi mode terang memakai oranye tua: 4,94:1 di #ECECFF (AAA teks besar) */
  --accent-text: #a84a00;
  --grid-line: rgba(91, 97, 246, 0.12);

  /* Stiker: garis tepi dan bayangan solid mengikuti tanda KD (cobalt #6666FF, sisi timbul warna sama),
     bukan hitam pekat (permintaan Bung Andy). Garis 4,4:1 di atas putih (komponen non-teks min 3:1). */
  --sticker-line: #6666ff;
  --sticker-shadow: #6666ff;
  /* Pemisah antar-section: tipis dan lembut, supaya garis tebal 2 px hanya milik kartu stiker dan tombol */
  --section-line: #d6d6ea;
  --soft-fill: #e9e9f6; /* latar pil lembut: tombol jeda, hover urutkan */
  --zebra: #ececff; /* baris genap FAQ: tinta 15,46:1, ikon +/− 6,67:1, cincin fokus 4,01:1 */
  /* Halaman baca (detail gaya): kartu dan isinya memakai garis 1 px lembut + bayangan menyebar halus,
     bukan garis stiker 2 px + bayangan blok (permintaan Bung Andy: batas antar kartu terlalu tebal).
     Garis ini dekoratif; status terpilih tetap blok gelap kontras tinggi. */
  --card-line: #dcdcf0;
  /* Tanpa bayangan: bayangan menyebar dinilai Bung Andy terlalu tebal dan norak. Kartu cukup garis 1 px. */
  --card-shadow: none;
  --btn-bg: #14142b;
  --btn-fg: #ffffff;
  --btn-shadow: #6666ff;

  /* Label kategori pastel (palet stiker DESIGN.md KolamDigital); teksnya selalu tinta gelap */
  --cat-ink: #14142b;
  --cat-kuliner: #ffe2c4;
  --cat-promo: #ffd6cf;
  --cat-produk: #d6ebff;
  --cat-teks: #ead6ff;
  --cat-lokal: #d3f5e4;
  --cat-ilustrasi: #fff0b3;
  --cat-info: #e0e2ff;
  --cat-foto: #ebebeb;

  --font-display: "Antonio", "Arial Narrow", sans-serif;
  --font: "Plus Jakarta Sans Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, Consolas, monospace;
  /* Sudut mengikuti tanda KD (persegi membulat sedang, bukan kapsul): kontrol 10 px, label 6 px,
     kartu 16 px. Kapsul 999px tidak dipakai (permintaan Bung Andy). */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-ctl: 10px;
  --radius-badge: 6px;
  --header-h: 64px;
  --wrap: 1240px;
  color-scheme: light;
}

/* Mode malam: navy dari halaman /template-desain-md/, garis stiker putih (seperti potongan stiker) */
:root[data-theme="dark"] {
  --canvas: #12123a;
  --paper: #1e1e52;
  --ink: #f2f2fa;
  --ink-soft: #c4c4dc;
  --hairline: #34347a;
  --brand: #8c90ff;
  --brand-text: #c9c9ff;
  --brand-tint: #26265e;
  --stabilo: #ff8a00; /* oranye cerah yang sama dengan mode terang; teks di atasnya dibuat gelap (lihat .stabilo) */
  --accent-text: #ff8a00; /* 5,84:1 di banner malam #26265E, 7,57:1 di kanvas */
  --grid-line: rgba(201, 201, 255, 0.08);
  --sticker-line: #8c90ff;
  --sticker-shadow: #5b61f6;
  --section-line: #34347a;
  --soft-fill: #2a2a66;
  --zebra: #2a2a66; /* baris genap FAQ: tinta 11,63:1, ikon +/− 8,19:1, cincin fokus 4,66:1 */
  --card-line: #3a3a80;
  --card-shadow: none;
  --btn-bg: #f2f2fa;
  --btn-fg: #12123a;
  --btn-shadow: #8c90ff;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--canvas);
  color: var(--ink);
  font: 500 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; color: var(--ink); }

p { margin: 0; color: var(--ink-soft); }

a { color: var(--brand-text); }

img { max-width: 100%; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 720px) {
  .wrap { padding: 0 28px; }
}

:where(a, button, pre, summary, input):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Kontrol yang butuh JavaScript (cari, filter, urutkan, pengaturan, tombol Salin) disembunyikan
   bila JS mati, supaya tidak ada tombol yang tidak bekerja (R-26). Kelas "js" dipasang skrip tema
   di <head> sebelum halaman tampil, jadi tata letak tidak melompat. */
:root:not(.js) .needs-js { display: none; }

/* Lewati header langsung ke daftar gaya (WCAG 2.4.1); tampil saat difokus keyboard */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 50;
  padding: 10px 16px;
  border: 2px solid var(--sticker-line);
  border-radius: var(--radius-ctl);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  transform: translateY(-160%);
}

.skip-link:focus { transform: none; }

/* ── Header ─────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--section-line);
  background: var(--paper);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}

/* Header memakai tanda KD saja (kecil); logo wordmark lengkap ada di footer */
.brand-mark { display: block; width: 36px; height: 36px; }

.brand-name {
  padding-left: 12px;
  border-left: 1px solid var(--section-line);
  font: 700 1.3rem/1 var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Tombol tema: menampilkan ikon mode tujuan (bulan saat terang, matahari saat malam) */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--sticker-line);
  border-radius: var(--radius-ctl);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

.theme-toggle svg { width: 20px; height: 20px; }

.theme-toggle .icon-sun,
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* Ajakan kelas di header; label pendek di layar sempit agar header tidak meluber */
.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid var(--btn-bg); /* tombol berisi tidak diberi bingkai cobalt; bayangannya cobalt logo */
  border-radius: var(--radius-ctl);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: 3px 3px 0 var(--btn-shadow);
  font: 700 0.9rem var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.nav-cta .short { display: none; }

/* HP: label pendek dan header lebih rapat agar tanda KD, nama, tombol tema, dan ajakan muat di 320 px */
@media (max-width: 420px) {
  .nav-cta { padding: 0 12px; }
  .nav-cta .long { display: none; }
  .nav-cta .short { display: inline; }
  .brand { gap: 8px; }
  .brand-name { padding-left: 8px; font-size: 1.05rem; }
  .site-nav { gap: 8px; }
}

/* ── Hero: banner bergrid + stiker Andy yang menunjuk ke daftar gaya ── */
.stage { position: relative; flex: 1; }

.hero {
  border-bottom: 1px solid var(--section-line);
  background-color: var(--brand-tint);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  overflow: hidden;
}

/* Teks di tengah secara vertikal dengan ruang atas-bawah seimbang; karakter tetap berdiri di tepi bawah */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 24px;
  padding-top: 24px;
}

.hero-text { padding: 12px 0 36px; }

@media (min-width: 720px) {
  .hero-text { padding: 28px 0 48px; }
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--ink);
}

.crumbs li { display: inline-flex; align-items: center; min-height: 44px; } /* target sentuh AAA 2.5.5 */
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--accent-text); font-weight: 800; }

/* Aksen warna di judul: hanya tanda baca, tanpa stabilo (permintaan Bung Andy untuk judul halaman gaya) */
.accent { color: var(--accent-text); }
.crumbs a { color: var(--ink); }
.crumbs [aria-current] { font-weight: 700; }

.hero h1 {
  max-width: 13em;
  font: 700 clamp(2.4rem, 6.4vw, 4.6rem)/0.98 var(--font-display);
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

/* Stabilo: satu penekanan di judul, sama seperti /template-desain-md/ */
.stabilo {
  background: linear-gradient(transparent 60%, var(--stabilo) 60%, var(--stabilo) 92%, transparent 92%);
  padding-inline: 0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Mode malam: posisi pita sama persis dengan mode terang, oranye cerah #FF8A00, huruf putih
   (keputusan Bung Andy 05-11-2026). Catatan kontras: bagian bawah huruf putih yang menimpa pita
   hanya 2,1:1; bagian atas di atas navy ±16:1. */

.lead {
  max-width: 38em;
  margin-top: 16px;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* Tiga manfaat nyata (contoh video, pengaturan prompt, lisensi), bertanda kotak oranye kecil */
.hero-benefits {
  display: grid;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink);
  font-weight: 600;
}

.hero-benefits li,
.kelas-options li {
  position: relative;
  padding-left: 22px;
}

.hero-benefits li::before,
.kelas-options li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 10px;
  height: 10px;
  border: 2px solid var(--sticker-line);
  border-radius: 3px;
  background: var(--stabilo);
}

/* Karakter setengah badan pose "dapat ide" (pilihan Bung Andy), tanpa bayangan, berdiri di tepi bawah banner */
.hero-andy {
  display: block;
  align-self: end;
  width: clamp(130px, 25vw, 290px);
  height: auto;
}

/* HP: satu kolom. Judul, deskripsi, dan manfaat memakai lebar penuh; karakter berdiri di tengah bawah
   banner (permintaan Bung Andy: judul tidak boleh terjepit karakter). Teks dikecilkan ke skala HP. */
@media (max-width: 719px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 16px;
  }

  .hero-text { padding: 8px 0 24px; }
  .hero h1 { max-width: none; font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .lead { margin-top: 14px; font-size: 0.94rem; line-height: 1.6; }
  .hero-benefits { margin-top: 14px; gap: 4px; font-size: 0.9rem; }
  .hero-benefits li::before { top: 0.45em; }
  .hero-andy { justify-self: center; width: min(210px, 56vw); }
}

/* ── Toolbar (pola prompt-motion.com): baris atas = cari + urutkan + jeda pratinjau,
   baris bawah = chip kategori satu baris yang bisa digeser. Chip ringan (garis tipis, tanpa
   bayangan stiker) supaya kartu tetap jadi fokus. Toolbar ikut tergulir di semua ukuran: hanya
   header yang menempel (header + toolbar menempel bersama terlalu menutupi kartu, kata Bung Andy). ── */
.toolbar {
  position: static;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 -16px;
  padding: 16px 16px 12px;
  background: var(--canvas);
}

@media (min-width: 720px) {
  .toolbar { margin: 0 -28px; padding: 18px 28px 12px; }
}

.toolbar-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 100%;
}

/* Mulai tablet kotak cari mengisi ruang sampai tombol Urutkan (permintaan Bung Andy) */
@media (min-width: 720px) {
  .search { flex: 1 1 280px; }
}

.search svg {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--ink-soft);
  pointer-events: none;
}

.search input {
  width: 100%;
  height: 44px;
  padding: 0 16px 0 42px;
  border: 1px solid var(--section-line);
  border-radius: var(--radius-ctl);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* 16px stops iOS from zooming in on focus */
}

.search input:hover { border-color: var(--ink-soft); }
.search input::placeholder { color: var(--ink-soft); }

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Urutkan: dropdown buatan sendiri (pola listbox WAI-ARIA), karena daftar <select> bawaan
   tampil dengan gaya sistem operasi dan tidak bisa diselaraskan dengan desain. */
.sort { position: relative; }

.sort-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-ctl);
  background: transparent;
  color: var(--ink);
  font: 600 0.9rem var(--font);
  white-space: nowrap;
  cursor: pointer;
}

.sort-button:hover,
.sort-button[aria-expanded="true"] { background: var(--soft-fill); }

.sort-icon { width: 16px; height: 16px; color: var(--ink-soft); }
.sort-chevron { width: 14px; height: 14px; }
.sort-button[aria-expanded="true"] .sort-chevron { transform: rotate(180deg); }

/* Menu: kartu stiker ramping, muncul tepat di bawah tombol, rata kiri tombol dan membuka ke kanan
   (rata kanan terpotong di tepi kiri layar HP karena tombol Urutkan ada di sisi kiri baris). */
.sort-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  isolation: isolate; /* sorotan pilihan (z-index -1) tetap di atas latar menu */
  min-width: 176px;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1.5px solid var(--sticker-line);
  border-radius: var(--radius-ctl);
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--sticker-shadow);
}

.sort-list[hidden] { display: none; }

/* Fokus ada di daftar; penanda posisinya adalah pilihan yang disorot (.active), bukan outline daftar */
.sort-list:focus { outline: none; }

/* Baris tetap 44 px (target sentuh AAA 2.5.5); sorotannya pil 36 px agar tampak ringkas dan tidak mepet */
.sort-list [role="option"] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  color: var(--ink);
  font: 600 0.85rem var(--font);
  white-space: nowrap;
  cursor: pointer;
}

.sort-list [role="option"]::before {
  content: "";
  position: absolute;
  inset: 4px 0;
  z-index: -1;
  border-radius: 6px;
}

.sort-list [role="option"] svg { width: 14px; height: 14px; flex: none; color: var(--brand); visibility: hidden; }
.sort-list [aria-selected="true"] svg { visibility: visible; }
.sort-list [aria-selected="true"] { font-weight: 700; }
.sort-list .active::before { background: var(--soft-fill); }
.sort-list:focus-visible .active::before { box-shadow: inset 0 0 0 2px var(--brand); }

/* Jeda pratinjau: pil lembut; ikon berganti jeda/putar, status dibaca dari aria-pressed (WCAG 2.2.2) */
.pause-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-ctl);
  background: var(--soft-fill);
  color: var(--ink);
  font: 600 0.9rem var(--font);
  white-space: nowrap;
  cursor: pointer;
}

.pause-toggle svg { width: 14px; height: 14px; }
.pause-toggle .icon-play,
.pause-toggle[aria-pressed="true"] .icon-pause { display: none; }
.pause-toggle[aria-pressed="true"] .icon-play { display: block; }
.pause-toggle[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); }

/* Chip kategori: satu baris, digeser bila tidak muat (chip yang terpotong di tepi jadi tandanya) */
.filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 4px 16px;
  scroll-padding-inline: 16px;
}

.filters::-webkit-scrollbar { display: none; }

@media (min-width: 720px) {
  .filters { margin: 0 -28px; padding: 4px 28px; scroll-padding-inline: 28px; }
}

.filter {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--section-line);
  border-radius: var(--radius-ctl);
  background: var(--paper);
  color: var(--ink);
  font: 600 0.88rem var(--font);
  white-space: nowrap;
  cursor: pointer;
}

.filter::after { content: ""; position: absolute; inset: -3px 0; } /* area sentuh 44 px */
.filter:hover { border-color: var(--ink-soft); }
.filter-count { color: var(--ink-soft); font-size: 0.8rem; font-weight: 600; }
.filter[aria-pressed="true"] { border-color: var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); }
.filter[aria-pressed="true"] .filter-count { color: inherit; }

.count {
  margin: 6px 0 16px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 700;
}

/* ── Grid kartu stiker ─────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding-bottom: 40px;
}

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
}

/* "Tampilkan N gaya lagi" di bawah grid (gallery.js). Tanpa JS semua kartu tampil, jadi tombolnya
   tersembunyi; tombol di luar kartu memakai gaya stiker (PLANNING bagian 7). */
.more-wrap { display: flex; justify-content: center; margin: -8px 0 40px; }
.more-wrap[hidden] { display: none; }

.empty {
  grid-column: 1 / -1;
  padding: 32px 0;
  color: var(--ink-soft);
  text-align: center;
}

/* Pencarian tanpa hasil: kartun Andy berpikir */
.empty img {
  display: block;
  width: 110px;
  height: auto;
  margin: 0 auto 14px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border: 2px solid var(--sticker-line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--sticker-shadow);
  color: inherit;
  text-decoration: none;
}

.tile:hover { box-shadow: 6px 6px 0 var(--sticker-shadow); }

/* Kartu yang tidak lolos filter atau pencarian (display flex di atas mengalahkan atribut hidden) */
.tile[hidden] { display: none; }

.thumb {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
}

.thumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

/* The still shows at once; the clip fades in over it once it is playing. */
.thumb img,
.thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb video { opacity: 0; transition: opacity 0.3s; }
.thumb video.ready { opacity: 1; }

/* Angka views di pojok kiri atas kartu galeri (views.js). Pil kecil gelap transparan supaya terbaca di
   atas klip apa pun tanpa menutupi isinya, dan tidak menangkap klik. Putih di atasnya minimal 9,7:1
   (di atas bagian klip yang putih). z-index menjaganya di atas video yang dipasang belakangan. */
.tile-views {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  background: rgba(20, 20, 43, 0.8);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  pointer-events: none;
}

.tile-views svg { width: 14px; height: 14px; flex: none; }

.tile-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 4px 2px;
  min-width: 0;
}

.tile-name {
  overflow: hidden;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Label alat (seperti label tipe di prompt-motion.com) dan label kategori pastel */
.badge-tool,
.badge-new,
.cat-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--radius-badge);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.6;
}

.badge-tool {
  border: 1.5px solid var(--sticker-line);
  background: var(--paper);
  color: var(--ink);
}

/* Badge "Baru" (umur gaya 14 hari atau kurang): tinta di atas oranye stabilo, 7,63:1 di kedua tema */
.badge-new { background: var(--stabilo); color: #14142b; font-weight: 800; }
/* Gaya terjadwal, hanya di pratinjau lokal: tinta di atas kertas supaya jelas beda dari "Baru" */
.badge-new.badge-scheduled { background: var(--ink); color: var(--paper); }

.cat-chip { background: var(--cat-info); color: var(--cat-ink); }
.cat-chip[data-cat="kuliner"] { background: var(--cat-kuliner); }
.cat-chip[data-cat="promo"] { background: var(--cat-promo); }
.cat-chip[data-cat="produk"] { background: var(--cat-produk); }
.cat-chip[data-cat="teks"] { background: var(--cat-teks); }
.cat-chip[data-cat="lokal"] { background: var(--cat-lokal); }
.cat-chip[data-cat="ilustrasi"] { background: var(--cat-ilustrasi); }
.cat-chip[data-cat="info"] { background: var(--cat-info); }
.cat-chip[data-cat="foto"] { background: var(--cat-foto); }

/* ── Tombol ─────────────────────────────────────────── */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 22px;
  border: 2px solid var(--btn-bg);
  border-radius: var(--radius-ctl);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: 4px 4px 0 var(--btn-shadow);
  font: 700 1rem var(--font);
  text-decoration: none;
  cursor: pointer;
}

.button.secondary {
  border-color: var(--sticker-line);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--sticker-shadow);
}

/* ── Cara pakai galeri: tiga langkah nyata (pilih, salin, tempel) dalam satu kartu stiker.
   Nomor Antonio berwarna tautan, tanpa ikon bulat, supaya tidak jadi pola "3 langkah" template. ── */
.howto {
  margin: 8px 0 32px;
  padding: 26px 20px;
  scroll-margin-top: 88px;
  border: 1px solid var(--card-line); /* tenang seperti kartu FAQ (permintaan Bung Andy: konsisten) */
  border-radius: var(--radius);
  background: var(--paper);
}

.howto h2 {
  margin-bottom: 8px;
  font: 700 clamp(1.7rem, 4vw, 2.4rem)/1 var(--font-display);
  text-transform: uppercase;
}

.howto > p { color: var(--ink); }

.howto-steps {
  display: grid;
  gap: 18px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: langkah;
}

.howto-steps li {
  display: grid;
  gap: 4px;
  align-content: start;
  padding-top: 14px;
  border-top: 2px solid var(--sticker-line);
  color: var(--ink);
  counter-increment: langkah;
}

.howto-steps li::before {
  content: counter(langkah, decimal-leading-zero);
  color: var(--brand-text); /* 7,78:1 di kertas terang, 9,75:1 di kertas malam */
  font: 700 2.4rem/1 var(--font-display);
}

.howto-steps strong { font-size: 1.05rem; font-weight: 800; }
.howto-steps span { color: var(--ink-soft); }

/* Video demo di bawah tiga langkah (permintaan Bung Andy). Awalnya hanya thumbnail lokal; pemutar
   YouTube dipasang gallery.js setelah diklik, jadi beranda tetap ringan dan tanpa cookie YouTube. */
.howto-video { margin: 28px 0 0; } /* selebar kartu, sejajar tiga langkah (permintaan Bung Andy) */

.howto-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-ctl);
  background: #0b0b10;
}

.yt-lite,
.howto-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.yt-lite img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yt-lite:focus-visible { outline-offset: -5px; } /* bingkai memotong tepi luar, jadi cincin fokus di dalam */

/* Tombol putar: lingkaran tinta dengan tepi putih supaya terbaca di atas bagian thumbnail mana pun.
   Putih di atas #3d3dc8 saat disorot: 7,5:1 di kedua tema. */
.yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(20, 20, 43, 0.82);
  color: #fff;
  transition: background-color 0.2s ease;
}

.yt-play svg { width: 30px; height: 30px; margin-left: 4px; }
.yt-lite:hover .yt-play,
.yt-lite:focus-visible .yt-play { background: #3d3dc8; }
.howto-video figcaption { margin-top: 10px; color: var(--ink-soft); font-size: 0.9rem; }

@media (min-width: 720px) {
  .howto { padding: 32px 36px; }
  .howto-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}

/* FAQ galeri memakai kartu .block .faq yang sama dengan halaman detail, dengan judul lebih besar */
.faq-galeri { margin: 0 0 56px; }
.faq-galeri h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); }

/* ── Blok kelas: stiker besar, kartun Andy melambai keluar dari tepi atas ── */
.kelas {
  position: relative;
  display: grid;
  gap: 8px;
  align-items: end;
  margin: 24px 0 48px;
  padding: 26px 20px 0;
  scroll-margin-top: 88px; /* header yang menempel tidak menutupi judul */
  border: 1px solid var(--card-line); /* tenang seperti kartu lain di halaman (permintaan Bung Andy) */
  border-radius: var(--radius);
  overflow: hidden; /* lingkaran oranye di belakang karakter terpotong rapi oleh tepi kartu */
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Tombol di blok kelas tanpa bayangan blok, sama dengan tombol di kartu halaman gaya */
.kelas .button { box-shadow: none; }
.kelas .button.secondary { border: 1px solid var(--sticker-line); }

@media (min-width: 720px) {
  .kelas {
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 28px;
    padding: 36px 36px 0;
  }
}

.kelas-text { padding-bottom: 28px; }

.kelas h2 {
  margin-bottom: 10px;
  font: 700 clamp(1.9rem, 4.6vw, 2.8rem)/1 var(--font-display);
  text-transform: uppercase;
}

.kelas h2:focus { outline: none; }

.kelas p { max-width: 60ch; color: var(--ink); }

/* Daftar kelas memakai penanda kotak oranye yang sama dengan poin manfaat di hero */
.kelas-options {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink);
}

.kelas-options strong { font-weight: 800; }

.kelas-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

/* Lingkaran oranye di belakang karakter, terbit dari tepi bawah kartu (permintaan Bung Andy:
   sentuhan oranye agar hidup). Dekoratif; terpotong rapi oleh tepi kartu (overflow hidden). */
.kelas-figure {
  position: relative;
  isolation: isolate;
  justify-self: center;
  margin: 0;
}

.kelas-figure::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: -1;
  width: 92%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--stabilo);
  transform: translate(-50%, 22%);
}

/* Karakter melambai setengah badan, berdiri di tepi bawah kartu (permintaan Bung Andy) */
.kelas-figure img {
  display: block;
  width: min(250px, 64vw);
  height: auto;
}

/* ── Halaman detail gaya (Fase 3, pola /template-desain-md/): banner + strip keterangan,
   konten di kiri, sidebar menempel di kanan (kartu prompt + kotak penulis), gaya serupa di bawah ── */
.detail-hero .hero-inner { grid-template-columns: minmax(0, 1fr); }
.detail-hero .hero-text { padding-bottom: 28px; }
.detail-hero h1 { max-width: 22em; font-size: clamp(2.1rem, 5.2vw, 3.6rem); }

.meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.meta-strip li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-badge);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
}

.meta-strip b { color: var(--ink-soft); font-weight: 600; }

.details-row {
  display: grid;
  gap: 32px;
  padding-top: 32px;
  padding-bottom: 48px;
}

.content-col { display: grid; gap: 24px; align-content: start; min-width: 0; }

/* Demo mengikuti rasio format yang dipilih (--ar dari detail.js). Tingginya dibatasi agar di HP
   demo vertikal tidak memenuhi seluruh layar. */
.sample { margin: 0; }

.video-frame {
  --ar: 0.5625;
  position: relative;
  width: min(100%, calc(var(--ar) * min(600px, 64vh)));
  aspect-ratio: var(--ar);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  background: #0b0b10;
  box-shadow: var(--card-shadow);
}

/* --ar didaftarkan sebagai angka supaya ukuran bingkai beranimasi halus saat Format diganti
   (kelas .animated dipasang detail.js setelah frame pertama, jadi format tersimpan tidak beranimasi). */
@property --ar {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.5625;
}

.video-frame.animated { transition: --ar 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }

@media (prefers-reduced-motion: reduce) {
  .video-frame.animated { transition: none; }
}

/* Gambar diam selalu ada di HTML (terbaca tanpa JS, tampil saat demo dijeda); demo live menimpanya */
.video-frame .demo-still,
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Demo hanya tontonan: klik tidak diteruskan ke dalamnya, jadi demo tidak bereaksi atau berbunyi tanpa diminta. */
.video-frame iframe { z-index: 1; pointer-events: none; }

/* Still ikut Format (tiles.mjs); format tanpa still khusus menampilkan still sampel utuh di atas latar gelap.
   Saat Format diganti (.switching), still format tujuan menutupi demo yang sedang menyusun ulang dirinya,
   lalu memudar (.revealing). */
.video-frame .demo-still {
  z-index: 0;
  object-fit: contain;
  transition: opacity 0.25s ease;
}

.video-frame.switching .demo-still { z-index: 2; }
.video-frame.switching.revealing .demo-still { opacity: 0; }

/* Di bawah demo: pilihan Format (HP dan tablet) lalu tombol "Jeda demo" (gaya tombol "Jeda pratinjau").
   Di bawah 960 px kartu prompt ada jauh di bawah, jadi Format dipindah ke dekat demo supaya mudah
   dicoba (permintaan Bung Andy); Format di kartu prompt disembunyikan agar tidak muncul dua kali.
   Mulai 960 px kartu prompt menempel di samping demo, jadi Format kembali hanya di sana. */
.demo-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.demo-bar .demo-format { width: min(100%, 440px); }

@media (min-width: 960px) {
  .demo-bar .demo-format { display: none; }
}

@media (max-width: 959px) {
  .settings .setting-format { display: none; }
}

.sample-note { margin-top: 12px; color: var(--ink-soft); font-size: 0.84rem; text-align: center; }

.answer { max-width: 65ch; color: var(--ink); font-size: 1.08rem; line-height: 1.7; }

.fit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fit-label { margin-right: 4px; color: var(--ink); font-weight: 800; }
.fit .cat-chip { padding: 2px 10px; font-size: 0.84rem; }

/* Kartu isi: stiker yang sama dengan kartu galeri */
.block {
  padding: 24px;
  scroll-margin-top: 88px;
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--card-shadow);
}

.block h2 {
  margin-bottom: 12px;
  font: 700 clamp(1.5rem, 3.4vw, 2rem)/1.05 var(--font-display);
  text-transform: uppercase;
}

.block p,
.block li { color: var(--ink); }

.example-text {
  margin: 0 0 14px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  color: var(--ink);
  font: 0.84rem/1.7 var(--font-mono);
  white-space: pre-wrap;
}

.steps,
.tips { display: grid; gap: 10px; margin: 0; padding-left: 1.3em; }

/* FAQ: <details> dengan penanda +/− sendiri (penanda bawaan hilang saat summary memakai flex).
   Baris selang-seling: baris genap berlatar tint lembut agar mudah dibaca (permintaan Bung Andy),
   menggantikan garis pemisah antarbaris. */
.faq details {
  padding: 0 14px;
  border-radius: var(--radius-sm);
}

.faq details:nth-of-type(even) { background: var(--zebra); }

/* Tautan di jawaban FAQ memakai warna tinta + garis bawah: warna tautan biasa hanya 6,67:1 di baris tint */
.faq a { color: var(--ink); text-underline-offset: 3px; }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 6px 0;
  color: var(--ink);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

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

.faq summary::after {
  content: "+";
  flex: none;
  color: var(--brand-text);
  font: 700 1.5rem/1 var(--font-display);
}

.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding-bottom: 14px; }

/* Sidebar menempel di kanan mulai 960 px, tanpa gulir internal (permintaan Bung Andy 09-11-2026).
   Isinya (sekitar 1130 px) lebih tinggi dari layar desktop pada umumnya, jadi detail.js menggeser
   --sidebar-top ke nilai negatif: sidebar ikut bergerak bersama halaman, lalu menempel saat tepi
   bawahnya menyentuh tepi bawah layar, sehingga tombol Salin dan kotak penulis selalu terjangkau.
   Tanpa JS prompt tampil penuh dan sidebar jauh lebih tinggi, jadi dibiarkan ikut alur halaman. */
.sidebar { display: grid; gap: 22px; align-content: start; min-width: 0; }

@media (min-width: 960px) {
  .details-row { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 44px; align-items: start; }

  :root.js .sidebar {
    position: sticky;
    top: var(--sidebar-top, calc(var(--header-h) + 20px));
  }
}

.widget {
  padding: 22px;
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--card-shadow);
}

/* Tombol di dalam kartu baca tanpa bayangan blok: kartu sudah jadi wadahnya, jadi tombol cukup
   isi solid (hitam/terang 17:1 lebih) atau garis 1 px untuk tombol sekunder. */
.block .button,
.widget .button { box-shadow: none; }
.block .button.secondary { border: 1px solid var(--sticker-line); } /* cobalt 4,4:1 agar tetap terbaca sebagai tombol */

.widget-title { margin-bottom: 12px; font: 700 1.5rem/1 var(--font-display); text-transform: uppercase; }

/* Pengaturan video: format, ukuran, durasi, suara (diisi assets/js/settings.js) */
.settings { display: flex; flex-direction: column; gap: 12px; }

.setting {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.setting[hidden] { display: none; }

.setting-label { color: var(--ink); font-size: 0.84rem; font-weight: 700; }

.segmented {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--card-line);
  border-radius: 12px;
  background: var(--canvas);
}

.segment {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  padding: 4px 2px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: 700 0.84rem var(--font);
  line-height: 1.2;
  cursor: pointer;
}

.segment small {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.64rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.segment[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); }
.segment[aria-pressed="true"] small { color: inherit; opacity: 0.8; }

.prompt-preview {
  max-height: 200px;
  margin: 14px 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-sm);
  background: var(--canvas);
  color: var(--ink);
  font: 0.78rem/1.65 var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Tanpa JS pengaturan dan tombol Salin disembunyikan, jadi prompt dibaca penuh tanpa batas tinggi */
:root:not(.js) .prompt-preview { max-height: none; }

.btn-block { width: 100%; }

.button.done { border-color: #166534; background: #166534; color: #ffffff; } /* hijau 7,13:1 dengan teks putih (AAA) */

.paste-tip,
.license-note { margin-top: 10px; color: var(--ink-soft); font-size: 0.86rem; }

/* Kotak penulis ringkas agar sidebar menempel tetap muat di layar laptop */
.author-widget { scroll-margin-top: 88px; }

.author-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.author-head img {
  display: block;
  width: 64px;
  height: 64px;
  border: 2px solid var(--sticker-line);
  border-radius: var(--radius-ctl); /* kotak membulat sedang seperti tanda KD, bukan lingkaran (permintaan Bung Andy) */
  object-fit: cover;
}

.author-widget h2 { font-size: 1.05rem; font-weight: 800; line-height: 1.3; }
.author-widget p { margin-top: 4px; font-size: 0.88rem; line-height: 1.5; }

/* Email, Instagram, YouTube sebagai tiga tombol ikon sejajar (permintaan Bung Andy).
   Nama tautan ada di aria-label + title. Garis cobalt 4,4:1 / 5,5:1 (komponen non-teks min 3:1),
   ikon warna tinta, target 48 px. */
.author-icons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.author-icons a {
  display: grid;
  place-items: center;
  height: 48px;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-ctl);
  background: var(--paper);
  color: var(--ink);
}

.author-icons a:hover { background: var(--brand-tint); }
.author-icons svg { width: 22px; height: 22px; }

/* Kartu "Versi Claude Code + Remotion" (halaman gaya dari paket desain.md Episode 3) */
.remotion > p { margin-bottom: 16px; }
.remotion-sample { margin: 0 0 16px; }

.remotion-sample video {
  display: block;
  width: min(100%, 260px);
  aspect-ratio: 9 / 16;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-sm);
  background: #0b0b10;
}

.remotion-sample figcaption { margin-top: 8px; color: var(--ink-soft); font-size: 0.84rem; }
.remotion-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.similar { padding-bottom: 56px; }
.similar h2 { margin-bottom: 16px; font: 700 clamp(1.6rem, 4vw, 2.2rem)/1 var(--font-display); text-transform: uppercase; }
.similar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* Kartu gaya serupa tetap bergaya stiker seperti kartu grid galeri (keputusan Bung Andy) */

@media (min-width: 720px) {
  .similar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
}

/* HP dan tablet: tombol Salin menempel di bawah layar, di kiri tombol melayang (WA dan ke atas),
   lalu disembunyikan detail.js saat tombol Salin di kartu prompt sudah terlihat. */
.copy-dock {
  position: fixed;
  left: 12px;
  right: 68px; /* 12 px tepi + 44 px tombol melayang + 12 px jarak */
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
}

.copy-dock[hidden] { display: none; }
.copy-dock .button { flex: 1; min-height: 44px; padding: 8px 16px; }

@media (min-width: 720px) {
  .copy-dock { left: 28px; right: 84px; bottom: 20px; }
}

@media (min-width: 960px) {
  .copy-dock { display: none; }
}

/* ── Halaman lisensi ── */
.page-body { padding-top: 32px; padding-bottom: 56px; }

.prose { max-width: 78ch; }
.prose h2 { margin: 28px 0 10px; font-size: clamp(1.4rem, 3vw, 1.8rem); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 12px 0; }
.prose ul { display: grid; gap: 8px; margin: 12px 0; padding-left: 1.3em; }
.prose a { overflow-wrap: anywhere; }

/* ── Halaman 404: kartun Andy terkejut setengah badan (permintaan Bung Andy) ──
   Banner mengisi seluruh tinggi di antara header dan footer, jadi tidak ada area kosong di bawahnya:
   teks di tengah secara vertikal, karakter berdiri di tepi bawah banner seperti hero galeri. */
.stage-notfound { display: flex; flex-direction: column; }
.notfound { display: flex; flex: 1; border-bottom: 0; }
.notfound .hero-inner { flex: 1; }
.notfound .hero-andy { width: clamp(170px, 24vw, 300px); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

/* ── Footer: tiga kolom seperti /template-desain-md/ ── */
.site-footer {
  border-top: 1px solid var(--section-line);
  background: var(--paper);
  font-size: 0.92rem;
}

.footer-grid {
  display: grid;
  gap: 24px;
  padding-top: 32px;
  padding-bottom: 24px;
}

@media (min-width: 720px) {
  /* Dua kolom 6:4 (logo + kurator | Ikuti Andy); kontak kelas sudah ada di kartu kelas */
  .footer-grid { grid-template-columns: 6fr 4fr; gap: 32px; padding-top: 44px; }
  /* Kolom "Ikuti Andy" dirapatkan ke tepi kanan konten agar tidak menyisakan area kosong */
  .footer-grid > nav { justify-self: end; }
}

.footer-about img.footer-logo { display: block; width: 170px; height: auto; margin-bottom: 14px; }

.author {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.author img {
  flex: none;
  width: 44px;
  height: 44px;
  border: 2px solid var(--sticker-line);
  border-radius: 8px; /* sama dengan foto di kotak penulis, disesuaikan untuk ukuran kecil */
  object-fit: cover;
}

.author span {
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.25;
}

.author small { color: var(--ink-soft); font-size: 0.76rem; font-weight: 600; }

.footer-title { margin-bottom: 4px; color: var(--ink); font-weight: 800; }

.footer-links {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.footer-links a:hover { color: var(--brand-text); text-decoration: underline; }

.footer-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
  padding-top: 16px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  font-size: 0.84rem;
}

/* Total views semua halaman (views.js), di kanan baris hak cipta; turun ke baris berikutnya bila sempit */
.footer-views { white-space: nowrap; }
.footer-views[hidden],
.meta-strip li[hidden] { display: none; }

/* HP: tombol melayang (ke atas + WA) hanya menempati sisi kanan, jadi teks hak cipta cukup diberi
   jarak kanan selebar tombol (12 + 44 + 8 = 64 px), bukan ruang kosong 120 px di bawah
   (permintaan Bung Andy: area bawah terlalu panjang). */
@media (max-width: 719px) {
  .footer-note { padding-right: 64px; }

  /* HP: tautan "Ikuti Andy" berdampingan dua kolom dengan teks lebih kecil (permintaan Bung Andy).
     Tinggi baris tetap 44 px (target sentuh AAA); di layar sangat sempit teksnya turun ke baris kedua. */
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .footer-links a { font-size: 0.84rem; overflow-wrap: anywhere; }
}

/* Halaman gaya: di bawah 960 px tombol "Salin prompt" menempel di kiri bawah layar (tinggi 44 px +
   jarak 20 px), jadi footer diberi ruang bawah setinggi itu agar teks terakhir tidak tertutup. */
@media (max-width: 959px) {
  body[data-style] .footer-note { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ── Tombol melayang: kembali ke atas + chat WhatsApp, sama besar dan ringkas ──
   44 px adalah batas minimum target sentuh AAA (2.5.5), jadi ukurannya tidak dikecilkan lagi. */
.float-actions {
  position: fixed;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

@media (min-width: 720px) {
  .float-actions { right: 20px; bottom: 20px; }
}

.to-top,
.float-wa {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-ctl);
  box-shadow: 2px 2px 0 var(--sticker-shadow);
  cursor: pointer;
}

.to-top {
  border: 1.5px solid var(--sticker-line);
  background: var(--paper);
  color: var(--ink);
}

.to-top[hidden] { display: none; }
.to-top svg { width: 18px; height: 18px; }

/* Hijau WhatsApp gelap #128C7E: ikon putih 4,14:1 (grafik min 3:1); hijau terang #25D366 hanya 1,98:1 */
.float-wa {
  border: 1.5px solid #128c7e;
  background: #128c7e;
  color: #ffffff;
}

.float-wa svg { width: 22px; height: 22px; }

/* ── Gerak (mati bila pengunjung meminta reduced motion) ── */
@media (prefers-reduced-motion: no-preference) {
  .tile, .button, .nav-cta, .filter, .pause-toggle, .to-top, .float-wa { transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease; }
  .tile:hover { transform: translate(-2px, -2px); }
  .button:hover, .nav-cta:hover, .to-top:hover, .float-wa:hover { transform: translate(-1px, -1px); }
  .tile:active, .button:active, .nav-cta:active, .filter:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--sticker-shadow); }
}