/* ============================================================
   Indonesiaku — gaya dasar di atas Tailwind (Play CDN)
   Token warna/font ada di assets/tailwind-config.js.
   Berkas ini hanya untuk hal yang tidak praktis ditulis inline:
   dasar tipografi, token kode, prose markdown, dan editor playground.
   ============================================================ */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

::selection {
  background: rgba(180, 35, 47, 0.18);
}

/* Alpine: sembunyikan elemen sebelum inisialisasi selesai. */
[x-cloak] {
  display: none !important;
}

/* Fokus keyboard yang jelas, tanpa mengganggu klik mouse. */
:focus-visible {
  outline: 2px solid #b4232f;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   Token kode untuk snippet yang ditulis manual (bukan markdown)
   Kartu kode selalu gelap di kedua tema, jadi warnanya tetap.
   ------------------------------------------------------------ */
.code-card {
  background: #0d0f16;
  color: #e7e7f2;
}
.code-card .tok-k { color: #ff8a95; }   /* kata kunci */
.code-card .tok-f { color: #ffd479; }   /* nama fungsi */
.code-card .tok-s { color: #9ee6a8; }   /* string */
.code-card .tok-n { color: #9ec1ff; }   /* angka */
.code-card .tok-c { color: #6d7391; font-style: italic; } /* komentar */
.code-card .tok-p { color: #a9aec9; }   /* tanda baca */
.code-card {
  max-width: 100%;
  min-width: 0;
}
.code-card pre {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.7;
  tab-size: 4;
  max-width: 100%;
  overscroll-behavior-x: contain;
}

@media (max-width: 639px) {
  .code-card pre {
    font-size: 0.75rem;
    line-height: 1.6;
    padding: 1rem !important;
  }
}

/* ------------------------------------------------------------
   Animasi masuk — satu gelombang, bukan efek di mana-mana
   ------------------------------------------------------------ */
.reveal {
  animation: indk-rise 0.7s cubic-bezier(0.2, 0, 0, 1) both;
}
.reveal-1 { animation-delay: 0.06s; }
.reveal-2 { animation-delay: 0.12s; }
.reveal-3 { animation-delay: 0.18s; }
.reveal-4 { animation-delay: 0.24s; }

@keyframes indk-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,
  .reveal-1, .reveal-2, .reveal-3, .reveal-4 {
    animation: none !important;
  }
  * { transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------
   Reader dokumentasi (markdown via marked + typography plugin)
   ------------------------------------------------------------ */
.doc-body :where(code)::before,
.doc-body :where(code)::after {
  content: none;
}

.doc-body :where(pre) {
  background: #0d0f16;
  color: #e7e7f2;
  border-radius: 0.9rem;
  padding: 1.1rem 1.25rem;
  font-size: 0.85rem;
  line-height: 1.7;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.doc-body :where(pre code) {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.doc-body :where(h1, h2, h3) {
  scroll-margin-top: 6rem;
}

.doc-body :where(table) {
  display: block;
  overflow-x: auto;
  width: 100%;
  font-size: 0.9rem;
}

.doc-body :where(th) {
  white-space: nowrap;
}

.doc-body :where(img) {
  border-radius: 0.75rem;
}

.doc-body :where(hr) {
  border-color: currentColor;
  opacity: 0.12;
}

.doc-body :where(blockquote) {
  font-style: normal;
}

/* Blok embed {{embed:examples/...}} */
.embed-example {
  margin: 1.4rem 0;
  border-radius: 0.9rem;
  overflow: hidden;
  border: 1px solid rgba(148, 155, 180, 0.25);
}
.embed-example .embed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #171a24;
  color: #b9bed6;
  padding: 0.45rem 0.9rem;
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: 0.75rem;
}
.embed-example .embed-head a { color: #8fb4ff; text-decoration: none; }
.embed-example .embed-head a:hover { text-decoration: underline; }
.embed-example pre {
  margin: 0;
  border-radius: 0;
  border: 0;
}

/* ------------------------------------------------------------
   Playground: editor & panel keluaran
   ------------------------------------------------------------ */
.pg-editor {
  background: #0d0f16;
  color: #e7e7f2;
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.7;
  tab-size: 4;
  caret-color: #ff8a95;
}
.pg-editor::placeholder { color: #5d6480; }

.pg-output {
  background: #0d0f16;
  color: #e7e7f2;
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Tombol salin: label "salin" ↔ "tersalin" tanpa mengubah lebar tombol. */
.copy-btn .copy-label {
  display: inline-block;
  min-width: 3.6rem;
  text-align: right;
  transition: color 0.15s ease;
}

/* Scrollbar tipis, konsisten dengan tema gelap panel kode. */
.pg-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.pg-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 155, 180, 0.35);
  border-radius: 999px;
}
.pg-scroll::-webkit-scrollbar-track { background: transparent; }