/*
 * craft.css — diterapkan dari skill desain:
 *   - jakubkrehel/skills (better-ui, better-layout, better-colors, better-typography, better-accessibility)
 *   - nutlope/hallmark (tokens semantik, eight states, anti-slop)
 * Identitas anoboy dipertahankan: --color-accent = biru #2e51a2, --color-pop = pink #f7949e.
 */

:root {
  /* Semantic tokens (hallmark: nama per peran, bukan nilai) */
  --color-paper:    #f4f5f7;   /* bg utama */
  --color-paper-2:  #ffffff;   /* surface kartu */
  --color-ink:      #2b2b2b;   /* teks */
  --color-ink-2:    #6b7280;   /* muted */
  --color-rule:     #e2e5ea;   /* border/divider */
  --color-accent:   #2e51a2;   /* biru anoBoy */
  --color-accent-2: #244086;
  --color-pop:      #f7949e;   /* pink anoBoy */
  --color-pop-ink:  #141b2b;   /* teks di atas pop */

  /* Radius konsentris (better-ui #1) */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  /* Spacing scale (4px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;

  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
}

/* better-layout #1: grouping dengan space, bukan garis berlebih */
.entry-content > * + * { margin-top: var(--sp-4); }

/* better-typography: skala & kenyamanan bacaan */
body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--color-accent);
}

/* ===== Interaktif: eight states (hallmark) ===== */
/* Default sudah di-style masing-masing; kita lengkapi state lain */
.bm-ep-card,
.bm-btn,
.bm-watch,
.bm-nav-item a,
.nav-links a,
.bm-widget a {
  /* better-ui #11: jangan transition: all */
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  /* better-ui #9: scale on press */
  will-change: transform;
}
.bm-ep-card:active,
.bm-btn:active,
.bm-watch:active { transform: scale(0.96); }

/* better-accessibility #focus-visible */
.bm-ep-card:focus-visible,
.bm-btn:focus-visible,
.bm-watch:focus-visible,
.bm-nav-item a:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-pop);
  outline-offset: 2px;
  border-radius: inherit;
}

/* better-ui #3: shadow for elevation, border for structure.
   Kartu pakai shadow halus, bukan border tebal. */
.blog .post,
.archive .post,
.home .post,
.bm-ep-card,
.bm-widget,
.bm-single-main,
.bm-player-inner {
  box-shadow: 0 1px 2px rgba(20,27,43,0.06), 0 2px 8px rgba(20,27,43,0.04);
  border: 1px solid var(--color-rule);
}

/* better-ui #8: image outline halus (pure black low-opacity) */
.entry-content img,
.post-thumbnail img,
.wp-block-post-featured-image img {
  outline: 1px solid rgba(0,0,0,0.1);
  outline-offset: -1px;
}

/* ===== Tombol konsisten (hallmark CTA) ===== */
.bm-btn,
.bm-watch,
.bm-ep-card {
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.bm-btn { background: var(--color-pop); color: var(--color-pop-ink); }
.bm-btn:hover { background: #ec5c6a; }

/* better-layout #7: inset buttons from edges */
.bm-player-note, .bm-postdetails { padding-inline: var(--sp-3); }

/* ===== Navigasi: align to shared edge, space not lines ===== */
.bm-nav { gap: var(--sp-1); }
.bm-nav-item a { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); }
.bm-nav-item a:hover { background: rgba(255,255,255,0.10); color: var(--color-pop) !important; }

/* ===== Grid: grouping jelas, inter-group >= 2x intra ===== */
.bm-episodes { gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-5); }
.blog .site-main, .archive .site-main, .home .site-main { gap: var(--sp-4); padding: var(--sp-5) var(--sp-4); }

/* ===== Tabel: hairline rules, tabular feel ===== */
.entry-content table { border-collapse: collapse; }
.entry-content th, .entry-content td {
  border: 1px solid var(--color-rule);
  padding: var(--sp-2) var(--sp-3);
}
.entry-content tbody tr:nth-child(even) { background: rgba(46,81,162,0.03); }

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

/* ===== Anti-slop: jangan terlihat seperti template kosong ===== */
.bm-header { box-shadow: 0 1px 0 rgba(0,0,0,0.06); }
.bm-post-title { color: var(--color-accent); }
.bm-widget-title { color: var(--color-accent); border-bottom: 2px solid var(--color-pop); }