/* alvici.id | config/style.css | build 2026-10-26 */
/* ========================================================
   alvici.id - Custom Stylesheet (config/style.css)
   --------------------------------------------------------
   Dimuat otomatis oleh header.php di SEMUA halaman:
   index.php, post.php, page.php, category.php, search.php

   CATATAN: berkas ini dibaca LANGSUNG oleh browser (bukan lewat
   proses build). Jadi hanya tulis CSS standar. Jangan menuliskan
   direktif build Tailwind (penyertaan "tailwindcss", pembungkus
   "layer base", perintah "apply") karena tidak dikenali browser
   dan membuat seluruh isi berkas gagal diterapkan.
   ======================================================== */

/* ---------- Dasar ---------- */
html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[id] {
  scroll-margin-top: 90px;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.3);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.5);
}

/* ========================================================
   alvici.id Article & Post Formatting CSS
   Support Blogger (Median UI / Jagodesain) imported classes
   ======================================================== */

/* 1. Table of Content (details.sp.toc) */
details.sp, details.sp.toc {
  font-size: 0.92rem;
  padding: 18px 22px;
  margin: 1.75rem 0 2rem;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(51, 65, 85, 0.85);
  border-radius: 14px;
  line-height: 1.7em;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
}
details.sp summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  color: #f8fafc;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: 0.95rem;
}
details.sp summary::-webkit-details-marker {
  display: none;
}
details.sp summary::after {
  content: 'Daftar Isi ▾';
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  padding: 4px 12px;
  background: #4f46e5;
  color: #ffffff;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.2s;
}
details.sp summary:hover::after {
  background: #6366f1;
}
details.sp[open] summary::after {
  content: 'Tutup ▴';
  background: #3730a3;
}
details.sp .toC {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(100, 116, 139, 0.4);
}
details.sp .toC ol, details.sp .toC ul {
  list-style-type: decimal;
  margin-left: 1.5rem;
  padding-left: 0;
  margin-top: 0.5rem;
}
details.sp .toC li {
  margin-bottom: 0.5rem;
  color: #cbd5e1;
  line-height: 1.6;
}
details.sp .toC li ol, details.sp .toC li ul {
  list-style-type: lower-alpha;
  margin-top: 0.35rem;
  margin-left: 1.25rem;
}
details.sp .toC a {
  color: #818cf8;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}
details.sp .toC a:hover {
  color: #c7d2fe;
  text-decoration: underline;
}

/* 2. Lightbox & Gambar Artikel (.lbx, .full, .c, .sz) */
.lbx {
  display: block;
  margin: 1.5rem 0;
  position: relative;
  text-align: center;
}
.lbx img, img.full, img.sz, img.c {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(51, 65, 85, 0.6);
  margin: 1.25rem auto;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.lbx img:hover {
  transform: scale(1.015);
}

/* 3. Pembatas Titik 3 di Tengah (hr.solid) */
.prose hr.solid, hr.solid {
  border: none !important;
  border-top: none !important;
  height: auto;
  text-align: center;
  margin: 2.5rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  overflow: visible;
}
.prose hr.solid::after, hr.solid::after {
  content: '• • •';
  display: inline-block;
  color: #64748b;
  font-size: 1.4rem;
  letter-spacing: 0.8em;
  padding-left: 0.8em;
  line-height: 1;
  opacity: 0.85;
}

/* 4. Kutipan Catatan (Blockquote) */
blockquote {
  border-left: 4px solid #f59e0b;
  background: rgba(245, 158, 11, 0.08);
  padding: 1.1rem 1.35rem;
  border-radius: 0 12px 12px 0;
  margin: 1.75rem 0;
  color: #fde68a;
  font-size: 0.95rem;
  line-height: 1.7;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 5. Hero Spec Box (.hero-specs) */
.hero-specs {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(51, 65, 85, 0.7);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 1rem 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9rem;
  line-height: 1.6;
}
.hero-specs b {
  color: #93c5fd;
}

/* 6. Perataan Judul & Heading */
.prose h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: #ffffff;
  margin-top: 2rem;
  margin-bottom: 0.85rem;
  letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(51, 65, 85, 0.5);
  padding-bottom: 0.5rem;
}
.prose h4 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #f8fafc;
  margin-top: 1.5rem;
  margin-bottom: 0.6rem;
}
.prose ul {
  list-style-type: disc;
  margin-left: 2.5rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.prose ul li {
  margin-bottom: 0.4rem;
  line-height: 1.65;
}

/* ========================================================
   LENGKAPAN TIPOGRAFI KONTEN
   --------------------------------------------------------
   Ditambahkan agar isi berkas post/*.html & page/*.html
   tampil utuh. Tailwind Preflight me-reset elemen-elemen di
   bawah ini (heading, ol, tabel, dll) sehingga tanpa aturan
   ini artikel terlihat polos.
   ======================================================== */
.prose {
  line-height: 1.8;
  max-width: none;
  overflow-wrap: anywhere;
}

/* Paragraf */
.prose p {
  margin: 0 0 1.15rem;
  line-height: 1.85;
  color: #cbd5e1;
}

/* Heading yang belum diatur di atas */
.prose h1 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.05rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-top: 0;
  margin-bottom: 1rem;
}
.prose h2 {
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.55rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
  margin-top: 2rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(51, 65, 85, 0.5);
}
.prose h5, .prose h6 {
  font-size: 1rem;
  font-weight: 700;
  color: #e2e8f0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.prose h2:first-child,
.prose h3:first-child,
.prose h4:first-child {
  margin-top: 0;
}

/* List bernomor (dipakai artikel & daftar isi) */
.prose ol {
  list-style-type: decimal;
  margin-left: 2.5rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.prose ol li {
  margin-bottom: 0.4rem;
  line-height: 1.65;
}
.prose ol ol {
  list-style-type: lower-alpha;
}
.prose li::marker {
  color: #818cf8;
  font-weight: 700;
}
.prose li > ul,
.prose li > ol {
  margin-top: 0.4rem;
}

.prose strong, .prose b {
  color: #ffffff;
  font-weight: 700;
}

/* Tautan di dalam konten */
.prose a {
  color: #818cf8;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose a:hover {
  color: #c7d2fe;
}

/* Kode */
.prose code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875em;
  padding: 0.15em 0.4em;
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
}
.prose pre {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
  line-height: 1.7;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: #020617;
  border: 1px solid rgba(51, 65, 85, 0.7);
  color: #e2e8f0;
  overflow-x: auto;
  margin: 1.25rem 0;
}
.prose pre code {
  background: none;
  color: inherit;
  padding: 0;
}

/* Tabel */
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  display: block;
  overflow-x: auto;
  margin: 1.25rem 0;
}
.prose th, .prose td {
  border: 1px solid rgba(51, 65, 85, 0.7);
  padding: 0.6rem 0.8rem;
  text-align: left;
  vertical-align: top;
}
.prose thead th {
  background: rgba(30, 41, 59, 0.6);
  color: #ffffff;
  font-weight: 700;
}

/* Gambar umum di dalam konten */
.prose img {
  max-width: 100%;
  height: auto;
}
.prose figure {
  margin: 1.25rem 0;
}
.prose figcaption {
  margin-top: 0.6rem;
  text-align: center;
  font-size: 0.8rem;
  color: #94a3b8;
}

/* Jaga agar media tidak melebar keluar layar */
img, video, iframe, embed, object {
  max-width: 100%;
}

/* ========================================================
   LEBAR MAKSIMUM HALAMAN
   --------------------------------------------------------
   Bawaan Tailwind: "max-w-7xl" = 80rem (1280px).
   Di sini dikecilkan menjadi 65rem (1040px) agar lebar blog
   lebih rapat. Selector "html .max-w-7xl" dipakai supaya
   tetap menang atas utilitas Tailwind CDN.
   ======================================================== */
html .max-w-7xl {
  max-width: 65rem;
}

/* Halaman artikel (post.php) & kategori memakai lebar 65rem yang sama */
body.page-post .max-w-7xl {
  max-width: 65rem;
}

/* ========================================================
   KOLOM GAMBAR FEATURED (lg:w-1/2)
   --------------------------------------------------------
   Bawaan Tailwind: lg:w-1/2 = 50% pada layar >= 1024px.
   Diubah menjadi 42% agar teks di sebelah kanan lebih lega.
   Selector "html .lg\:w-1\/2" dipakai supaya menang atas
   utilitas Tailwind CDN tanpa perlu !important.
   ======================================================== */
@media (min-width: 1024px) {
  html .lg\:w-1\/2 {
    width: 42%;
  }
}

/* ========================================================
   TITIK INDIKATOR KATEGORI (widget "Kategori Konten")
   --------------------------------------------------------
   Tanpa latar/border, tepat di tengah, dan berkedip
   redup - nyala. Warna diambil dari kelas teks Tailwind
   (text-pink-500, text-cyan-400, dst) lewat "currentColor".
   ======================================================== */
.dot-blink {
  display: inline-block;
  background-color: currentColor;
  border-radius: 9999px;
  animation: alvici-dot-blink 1.8s ease-in-out infinite;
  will-change: opacity;
}

@keyframes alvici-dot-blink {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 7px 1px currentColor;
  }
  50% {
    opacity: 0.22;
    box-shadow: 0 0 0 0 transparent;
  }
}

/* Hormati pengguna yang menonaktifkan animasi */
@media (prefers-reduced-motion: reduce) {
  .dot-blink {
    animation: none;
    opacity: 1;
  }
}

/* ========================================================
   7. ACCORDION DAFTAR FONT (details.ac)
   --------------------------------------------------------
   Blok lipat ringkas untuk daftar font di dalam artikel.
   Berbeda dari details.sp (daftar isi), versi ini tanpa
   kotak besar dan memakai penanda + / − di kanan.
   ======================================================== */
details.ac {
  margin: 1rem 0 1.5rem;
  background: rgba(30, 41, 59, 0.55);
  border: 1px solid rgba(51, 65, 85, 0.85);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}
details.ac[open] {
  border-color: rgba(99, 102, 241, 0.55);
}
details.ac summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #e2e8f0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
details.ac summary::-webkit-details-marker {
  display: none;
}
details.ac summary::after {
  content: '';
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background-color: rgba(99, 102, 241, 0.18);
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: center center, center center;
  background-size: 10px 1.6px, 1.6px 10px;
  color: #a5b4fc;
  transition: background-color 0.2s ease, color 0.2s ease;
}
details.ac summary:hover::after {
  background-color: rgba(99, 102, 241, 0.32);
}
details.ac[open] summary::after {
  background-color: #4f46e5;
  color: #ffffff;
  background-size: 10px 1.6px, 0 0; /* sembunyikan garis vertikal -> jadi tanda minus */
}
details.ac > div {
  padding: 0.35rem 1.1rem 0.9rem;
  border-top: 1px dashed rgba(100, 116, 139, 0.35);
}
details.ac p {
  margin: 0.4rem 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #cbd5e1;
}
details.ac p strong,
details.ac p b {
  color: #ffffff;
}

/* ========================================================
   8. TOMBOL DOWNLOAD ARTIKEL (.btnF .button .icon.dl)
   --------------------------------------------------------
   .btnF  = pembungkus (meratakan tombol ke tengah)
   .button = tombol gradasi indigo
   .icon.dl = ikon panah-download (mask SVG, ikut warna teks)
   ======================================================== */
.btnF {
  display: flex;
  justify-content: center;
  margin: 1.15rem 0 2rem;
}
.btnF .button,
.prose .btnF .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 2rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #a855f7 100%);
  color: #ffffff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  border: 1px solid rgba(165, 180, 252, 0.35);
  box-shadow: 0 12px 28px -10px rgba(79, 70, 229, 0.85);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.btnF .button:hover,
.prose .btnF .button:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 16px 32px -10px rgba(99, 102, 241, 0.95);
}
.btnF .button:active,
.prose .btnF .button:active {
  transform: translateY(0);
}
.icon.dl {
  display: inline-block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%204v12'/%3E%3Cpath%20d='m7%2012%205%205%205-5'/%3E%3Cpath%20d='M5%2021h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%204v12'/%3E%3Cpath%20d='m7%2012%205%205%205-5'/%3E%3Cpath%20d='M5%2021h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ========================================================
   8b. ELEMEN ARTIKEL TAMBAHAN
   --------------------------------------------------------
   .lead  = paragraf pembuka yang lebih menonjol
   .showH = pembungkus kumpulan accordion (details.ac)
   .extL  = tautan download eksternal (gaya tombol pil)
   .pRef  = kotak sumber/referensi di akhir artikel
   ======================================================== */
.prose p.lead {
  font-size: 1.06em;
  line-height: 1.8;
  color: #e2e8f0;
  border-left: 3px solid #6366f1;
  padding-left: 1rem;
  margin-bottom: 1.5rem;
}
html:not(.dark) .prose p.lead {
  color: #1e293b;
  border-left-color: #4f46e5;
}

.showH {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1.1rem 0 1.75rem;
}
.showH > details.ac {
  margin: 0;
}

.prose a.extL {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  border-radius: 9999px;
  border: 1px solid rgba(99, 102, 241, 0.4);
  background: rgba(99, 102, 241, 0.14);
  color: #c7d2fe;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.prose a.extL::before {
  content: '⬇';
  font-size: 0.85em;
  line-height: 1;
}
.prose a.extL:hover {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
}
html:not(.dark) .prose a.extL {
  color: #4338ca;
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.28);
}
html:not(.dark) .prose a.extL:hover {
  color: #ffffff;
  background: #4f46e5;
}

.prose p.pRef {
  font-size: 0.75rem;
  line-height: 1.7;
  color: #94a3b8;
  background: rgba(30, 41, 59, 0.55);
  border: 1px dashed rgba(100, 116, 139, 0.45);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  overflow-wrap: anywhere;
}
html:not(.dark) .prose p.pRef {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.12);
  color: #64748b;
}

/* ========================================================
   PEMUTAR VIDEO YOUTUBE (.lazyYt)
   --------------------------------------------------------
   Gaya tombol play mengikuti tema APMODY (Blogger):
   hanya garis (stroke), lingkaran "menggambar" saat hover
   lalu berubah merah + segitiga bergoyang (nudge).
   Thumbnail diberi efek blur.
   ======================================================== */
.lazyYt {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 1.5rem 0;
  border-radius: 14px;
  overflow: hidden;
  background-color: #0f172a;
  border: 1px solid rgba(51, 65, 85, 0.75);
  box-shadow: 0 12px 34px -20px rgba(0, 0, 0, 0.9);
  cursor: pointer;
  outline: none;
  isolation: isolate;
}
.lazyYt:focus-visible {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.55);
}

/* Thumbnail video (diblur) */
.lazyYt::before {
  content: '';
  position: absolute;
  inset: -10px;
  background-image: var(--yt-thumb, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(7px) brightness(0.8) saturate(1.05);
  transform: scale(1.05);
  z-index: 0;
  pointer-events: none;
  transition: filter 0.35s ease;
}
/* Lapisan gelap tipis agar tombol play kontras */
.lazyYt::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(2, 6, 23, 0.08) 0%, rgba(2, 6, 23, 0.55) 100%);
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.lazyYt:hover::before {
  filter: blur(5px) brightness(0.72) saturate(1.1);
}

/* Tombol play: hanya stroke, tanpa isi */
.lazyYt .play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 70px;
  height: 70px;
  z-index: 2;
  cursor: pointer;
  transition: all 0.5s ease;
}
.lazyYt .play svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-width: 8;
  overflow: visible;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45));
}
.lazyYt .play .c {
  stroke: rgba(255, 255, 255, 0.85);
  stroke-dasharray: 650;
  stroke-dashoffset: 650;
  opacity: 0.35;
  transition: all 0.4s ease-in-out;
}
.lazyYt .play .t {
  stroke: rgba(255, 255, 255, 0.85);
  stroke-dasharray: 240;
  stroke-dashoffset: 480;
  transition: all 0.6s ease-in-out;
}
.lazyYt .play:hover .t {
  animation: yt-nudge 0.6s ease-in-out;
}

/* Hover: garis "menggambar" + berubah merah */
.lazyYt:hover .play .c,
.lazyYt:hover .play .t,
.lazyYt:focus-visible .play .c,
.lazyYt:focus-visible .play .t {
  stroke-dashoffset: 0;
  opacity: 1;
  stroke: #ff0000;
}

@keyframes yt-nudge {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(-5px); }
  50%  { transform: translateX(5px); }
  70%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

/* Saat video sudah diputar */
.lazyYt.is-playing .play,
.lazyYt.is-playing::before,
.lazyYt.is-playing::after {
  display: none;
}
.lazyYt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .lazyYt .play .c,
  .lazyYt .play .t,
  .lazyYt .play svg,
  .lazyYt::before { transition: none; }
  .lazyYt .play:hover .t { animation: none; }
}

html:not(.dark) .lazyYt {
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 12px 30px -18px rgba(15, 23, 42, 0.45);
}

/* ========================================================
   9. SAFELINK: VERIFIKASI BOT & TOMBOL "GO TO LINK"
   --------------------------------------------------------
   Dipakai oleh s.php (/s/{kode}).
   ======================================================== */

/* Kotak verifikasi "I'm not a robot" (desain custom, bukan tiruan captcha) */
.robot-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.09), rgba(168, 85, 247, 0.05));
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.robot-check:hover {
  border-color: rgba(129, 140, 248, 0.65);
  box-shadow: 0 12px 30px -16px rgba(99, 102, 241, 0.95);
  transform: translateY(-1px);
}
html.dark .robot-check {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(168, 85, 247, 0.08));
  border-color: rgba(99, 102, 241, 0.32);
}
.robot-check:has(input:checked) {
  border-color: rgba(16, 185, 129, 0.55);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.05));
}
.robot-check input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.robot-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  box-shadow: 0 8px 18px -9px rgba(79, 70, 229, 0.95);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.robot-icon svg {
  width: 20px;
  height: 20px;
}
.robot-check input:checked ~ .robot-icon {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 8px 18px -9px rgba(16, 185, 129, 0.95);
}
.robot-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.robot-text {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f172a;
}
html.dark .robot-text {
  color: #f1f5f9;
}
.robot-sub {
  font-size: 0.7rem;
  font-weight: 500;
  color: #64748b;
}
html.dark .robot-sub {
  color: #94a3b8;
}
.robot-box {
  position: relative;
  margin-left: auto;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(148, 163, 184, 0.6);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.9);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
html.dark .robot-box {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(148, 163, 184, 0.45);
}
.robot-box::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid #ffffff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.robot-check input:checked ~ .robot-box {
  background: #10b981;
  border-color: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
}
.robot-check input:checked ~ .robot-box::after {
  transform: rotate(45deg) scale(1);
}
.robot-check input:focus-visible ~ .robot-box {
  outline: 3px solid rgba(99, 102, 241, 0.35);
  outline-offset: 2px;
}

/* Notifikasi "Please wait / Generating your link" di bawah featured image */
.gen-notice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem 0.85rem;
  border-radius: 16px;
  border: 1px solid rgba(129, 140, 248, 0.6);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.24), rgba(168, 85, 247, 0.16));
  color: #e0e7ff;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.03em;
  overflow: hidden;
  animation: gen-glow 2.2s ease-in-out infinite;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.gen-notice::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(224, 231, 255, 0.22) 50%, transparent 70%);
  transform: translateX(-130%);
  animation: gen-shine 2.8s ease-in-out infinite;
  pointer-events: none;
}
.gen-notice.is-done::before {
  animation: none;
}
@keyframes gen-glow {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.18), 0 10px 30px -16px rgba(99, 102, 241, 0.9);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.4), 0 14px 44px -10px rgba(129, 140, 248, 1);
  }
}
@keyframes gen-shine {
  0%        { transform: translateX(-130%); }
  55%, 100% { transform: translateX(130%); }
}
.gen-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}
.gen-count {
  position: absolute;
  right: 0.15rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 800;
  color: #a5b4fc;
  min-width: 1.1em;
  text-align: center;
}
html:not(.dark) .gen-count {
  color: #4f46e5;
}
.gen-track {
  display: none;
  height: 5px;
  border-radius: 9999px;
  background: rgba(129, 140, 248, 0.18);
  overflow: hidden;
}
.gen-notice.is-counting .gen-track {
  display: block;
}
.gen-fill {
  height: 100%;
  width: 0%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  transition: width 0.1s linear;
}
html:not(.dark) .gen-notice {
  color: #3730a3;
  border-color: rgba(79, 70, 229, 0.45);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(168, 85, 247, 0.1));
}
.gen-notice.is-done {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
.gen-spinner {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  border: 2px solid rgba(165, 180, 252, 0.35);
  border-top-color: #c7d2fe;
  box-shadow: 0 0 10px rgba(129, 140, 248, 0.7);
  animation: gen-spin 0.7s linear infinite;
}
@keyframes gen-spin {
  to { transform: rotate(360deg); }
}

/* Badge robot di halaman verifikasi: glow redup-nyala + gerak mengambang */
.verify-logo {
  animation: verify-glow 2.6s ease-in-out infinite;
}
.verify-logo > svg {
  animation: verify-bob 3s ease-in-out infinite;
}
@keyframes verify-glow {
  0%, 100% {
    box-shadow: 0 8px 22px -12px rgba(79, 70, 229, 0.8), 0 0 0 0 rgba(129, 140, 248, 0.35);
  }
  50% {
    box-shadow: 0 12px 34px -6px rgba(129, 140, 248, 1), 0 0 0 9px rgba(129, 140, 248, 0);
  }
}
@keyframes verify-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2.5px) scale(1.04); }
}

/* Panel melayang bawah */
body.page-safelink {
  padding-bottom: 9rem;
}
.safelink-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(2, 6, 23, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(51, 65, 85, 0.85);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
.safelink-bar.is-hidden {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .safelink-bar { transition: none; }
  .gen-spinner { animation: none; }
  .verify-logo,
  .verify-logo > svg { animation: none; }
}
html:not(.dark) .safelink-bar {
  background: rgba(255, 255, 255, 0.96);
  border-top-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 -12px 30px rgba(15, 23, 42, 0.1);
}
.safelink-inner {
  max-width: 26rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.safelink-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.58rem 1rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.25s ease;
}
.safelink-btn.is-locked {
  background: #1e293b;
  color: #94a3b8;
  border: 1px dashed rgba(148, 163, 184, 0.45);
  cursor: not-allowed;
  box-shadow: none;
}
html:not(.dark) .safelink-btn.is-locked {
  background: #f1f5f9;
  color: #64748b;
  border-color: rgba(100, 116, 139, 0.35);
}
.safelink-btn.is-ready {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 12px 28px -10px rgba(16, 185, 129, 0.85);
  animation: safelink-pulse 1.8s ease-in-out infinite;
}
.safelink-btn.is-ready:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  color: #ffffff;
}
.safelink-hint {
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
  color: #94a3b8;
}
html:not(.dark) .safelink-hint {
  color: #64748b;
}

/* Progres posisi scroll */
.safelink-progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.safelink-progress-track {
  position: relative;
  width: 100%;
  height: 5px;
  border-radius: 9999px;
  background: rgba(148, 163, 184, 0.22);
  overflow: hidden;
}
html:not(.dark) .safelink-progress-track {
  background: rgba(100, 116, 139, 0.18);
}
.safelink-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #6366f1 0%, #a855f7 100%);
  transition: width 0.12s linear;
}
.safelink-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #64748b;
}
html:not(.dark) .safelink-progress-meta {
  color: #94a3b8;
}
#scrollPos {
  font-family: 'JetBrains Mono', monospace;
  color: #818cf8;
}
@keyframes safelink-pulse {
  0%, 100% { box-shadow: 0 12px 28px -10px rgba(16, 185, 129, 0.85); }
  50%      { box-shadow: 0 12px 34px -6px rgba(16, 185, 129, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .safelink-btn.is-ready { animation: none; }
}

/* Judul tiap paket font (h4.pack-title) */
.prose h4.pack-title {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffffff;
}

/* ========================================================
   PENYESUAIAN MODE TERANG (Light Mode)
   --------------------------------------------------------
   Aturan di atas dirancang untuk tampilan gelap. Blok ini
   hanya menyesuaikan warna saat tema terang aktif, supaya
   teks tetap terbaca. Tampilan gelap tidak diubah.
   ======================================================== */
html:not(.dark) details.sp,
html:not(.dark) details.sp.toc {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
}
html:not(.dark) details.sp summary {
  color: #0f172a;
}
html:not(.dark) details.sp .toC li {
  color: #475569;
}
html:not(.dark) details.sp .toC a {
  color: #4f46e5;
}
html:not(.dark) details.sp .toC a:hover {
  color: #3730a3;
}
html:not(.dark) .lbx img,
html:not(.dark) img.full,
html:not(.dark) img.sz,
html:not(.dark) img.c {
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.16);
  border-color: rgba(15, 23, 42, 0.1);
}
html:not(.dark) blockquote {
  color: #92400e;
}
html:not(.dark) .hero-specs {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.12);
}
html:not(.dark) .hero-specs b {
  color: #2563eb;
}
html:not(.dark) .prose h1,
html:not(.dark) .prose h2,
html:not(.dark) .prose h3,
html:not(.dark) .prose h4 {
  color: #0f172a;
}
html:not(.dark) .prose h2,
html:not(.dark) .prose h3 {
  border-bottom-color: rgba(15, 23, 42, 0.12);
}
html:not(.dark) .prose h5,
html:not(.dark) .prose h6 {
  color: #334155;
}
html:not(.dark) .prose p {
  color: #334155;
}
html:not(.dark) .prose strong,
html:not(.dark) .prose b {
  color: #0f172a;
}
html:not(.dark) .prose a {
  color: #4f46e5;
}
html:not(.dark) .prose a:hover {
  color: #3730a3;
}
html:not(.dark) .prose code {
  background: rgba(99, 102, 241, 0.12);
  color: #4338ca;
}
html:not(.dark) .prose pre {
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, 0.12);
  color: #1e293b;
}
html:not(.dark) .prose th,
html:not(.dark) .prose td {
  border-color: rgba(15, 23, 42, 0.12);
}
html:not(.dark) .prose thead th {
  background: #f1f5f9;
  color: #0f172a;
}

/* Accordion daftar font & tombol download di mode terang */
html:not(.dark) details.ac {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
}
html:not(.dark) details.ac[open] {
  border-color: rgba(79, 70, 229, 0.4);
}
html:not(.dark) details.ac summary {
  color: #0f172a;
}
html:not(.dark) details.ac summary::after {
  background-color: rgba(79, 70, 229, 0.1);
  color: #4f46e5;
}
html:not(.dark) details.ac[open] summary::after {
  background-color: #4f46e5;
  color: #ffffff;
}
html:not(.dark) details.ac > div {
  border-top-color: rgba(15, 23, 42, 0.1);
}
html:not(.dark) details.ac p {
  color: #334155;
}
html:not(.dark) details.ac p strong,
html:not(.dark) details.ac p b {
  color: #0f172a;
}
html:not(.dark) .prose h4.pack-title {
  color: #0f172a;
}
/* ========================================================
   KARTU IKLAN BERANDA (.ad-card-item)
   --------------------------------------------------------
   Border putus-putus dibuat "berjalan" (marching dashes)
   memakai pseudo-element + mask. Warna mengikuti tema
   (--theme-400) sehingga lebih tegas & animatif.
   ======================================================== */
.ad-card-item {
  position: relative;
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .ad-card-item {
    border-color: transparent !important;
  }
  .ad-card-item::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: repeating-linear-gradient(
      90deg,
      var(--theme-400, #818cf8) 0 10px,
      transparent 10px 20px
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: ad-dash-move 1.1s linear infinite;
  }
}

@keyframes ad-dash-move {
  to { background-position: 20px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ad-card-item::after { animation: none; }
}