/* Komikita Web — arah A · Rak Rapi (kanvas "Komikita Web · Pola · Arah visual").
   Nilai mentah HANYA di blok :root; komponen memakai var(--token).
   Pengecualian yang tak terhindarkan: titik henti @media (CSS tidak menerima var()).
   Cermin "Komikita Web · Design System" (tokens.json). */
:root {
  /* Warna — palet bawaan app (lib/core/theme/app_palette.dart). */
  --base: #f4f4f6; --surface: #ffffff; --surface2: #eeeef2; --surface3: #e3e3e9;
  --border: rgba(16, 16, 28, .08); --text: #16161c; --text2: #54545e; --text3: #6b6b75;
  --primary: #4a4ed0; --soft: rgba(74, 78, 208, .10); --on-primary: #ffffff; --rating: #c9921c;
  --dot: rgba(74, 78, 208, .22);

  /* Ruang */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --edge: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --content-max: 1120px; --aside-w: 340px;

  /* Radius */
  --r-xs: 7px; --r-sm: 8px; --r-control-sm: 10px; --r-md: 12px; --r-control: 14px; --r-lg: 18px; --r-full: 50%;

  /* Ukuran kontrol & benda */
  --control: 48px; --control-sm: 36px; --control-nav: 44px; --pager: 40px; --top-h: 56px;
  --cover-sm: 112px; --cover-lg: 240px; --avatar: 36px; --icon-lg: 30px; --icon-md: 28px; --logo-dock: 40px;
  --tile-min: 150px; --page-max: 720px; --focus: 2px; --badge-pad: 2px;
  --line: 1px; --dot-size: 1.6px; --dot-fade: 1.8px; --dot-pitch: 9px;

  /* Tipografi */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-page: 22px; --fs-page-lg: 34px; --fs-section: 18px; --fs-brand: 18px; --fs-body: 16px; --fs-lead: 15px;
  --fs-button: 15px; --fs-button-sm: 14px; --fs-small: 14px; --fs-card: 13px; --fs-caption: 13px; --fs-meta: 12px; --fs-badge: 11px;
  --lh-tight: 1.2; --lh-title: 1.25; --lh-card: 1.35; --lh-body: 1.55;
  --fw-regular: 400; --fw-semi: 600; --fw-bold: 700; --fw-heavy: 800;
  --track-tight: -.01em;
  --measure: 68ch;

  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --base: #0f0f13; --surface: #18181d; --surface2: #202026; --surface3: #2a2a31;
    --border: rgba(255, 255, 255, .07); --text: #f2f2f5; --text2: #a9a9b4; --text3: #878790;
    --primary: #8b8ff5; --soft: rgba(139, 143, 245, .14); --on-primary: #0b0b14; --rating: #e8b23a;
    --dot: rgba(139, 143, 245, .20);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--base); color: var(--text);
  font: var(--fs-body) / var(--lh-body) var(--font-sans);
  /* Ruang untuk bilah download yang menempel di bawah. */
  padding-bottom: calc(var(--logo-dock) + var(--space-8) + env(safe-area-inset-bottom, 0px));
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, .btn:focus-visible { outline: var(--focus) solid var(--primary); outline-offset: var(--focus); }
h1, h2, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
svg { width: 1em; height: 1em; flex: none; }
.wrap { width: 100%; max-width: var(--content-max); margin: 0 auto; padding-inline: max(var(--edge), env(safe-area-inset-left, 0px)) max(var(--edge), env(safe-area-inset-right, 0px)); }
/* minmax(0, 1fr): kolom grid `auto` ikut melebar ke lebar minimum isinya
   (blok halaman 720px, label nowrap) → halaman bisa digeser menyamping di HP. */
main.wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-block: var(--space-3) var(--space-10); }
h1 { font-size: var(--fs-page); line-height: var(--lh-title); font-weight: var(--fw-heavy); letter-spacing: var(--track-tight); text-wrap: balance; }
h2 { font-size: var(--fs-section); line-height: var(--lh-title); font-weight: var(--fw-bold); }

/* Kepala situs */
.top { background: var(--surface); border-bottom: var(--line) solid var(--border); }
.top-row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--top-h); }
.brand { font-weight: var(--fw-heavy); font-size: var(--fs-brand); color: var(--text); letter-spacing: var(--track-tight); margin-right: auto; }
.brand:hover { text-decoration: none; }
.nav { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-3); scrollbar-width: none; }
.nav a, .seg a { flex: none; display: inline-flex; align-items: center; min-height: var(--control-sm); padding: 0 var(--space-3); border-radius: var(--r-control-sm); background: var(--surface); border: var(--line) solid var(--border); color: var(--text2); font-size: var(--fs-caption); }
.nav a:hover, .seg a:hover { text-decoration: none; }
.nav [aria-current], .seg [aria-current] { background: var(--text); color: var(--surface); border-color: transparent; }
.seg { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Tombol */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control); padding: 0 var(--space-5); border-radius: var(--r-control); background: var(--primary); color: var(--on-primary); font-weight: var(--fw-bold); font-size: var(--fs-button); border: 0; }
.btn:hover { text-decoration: none; filter: brightness(1.06); }
.btn-sm { min-height: var(--control-sm); padding: 0 var(--space-3); border-radius: var(--r-control-sm); font-size: var(--fs-button-sm); }
.btn-ghost { background: var(--soft); color: var(--primary); }
.btn-block { width: 100%; }

/* Breadcrumb */
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); font-size: var(--fs-caption); color: var(--text3); }
.crumbs li + li::before { content: "›"; margin-right: var(--space-1); }
.crumbs a { color: var(--text2); }
main > .crumbs { margin-bottom: calc(var(--space-8) * -1 + var(--space-3)); }

/* Raster halftone — satu-satunya hiasan; titik indigo memudar ke kiri.
   #000 di mask = kanal alfa topeng, bukan warna yang tampil. */
.halftone { position: relative; isolation: isolate; overflow: hidden; }
.halftone::after { content: ""; position: absolute; inset: 0 0 0 40%; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--dot) var(--dot-size), transparent var(--dot-fade)); background-size: var(--dot-pitch) var(--dot-pitch);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); }

/* Beranda */
.hero { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--r-lg); background: var(--surface); border: var(--line) solid var(--border); }
.hero h1 { max-width: 20ch; }
.hero p { color: var(--text2); font-size: var(--fs-lead); max-width: var(--measure); }
.hero .btn { justify-self: start; }
.sec { display: grid; gap: var(--space-3); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.sec-head a { font-size: var(--fs-small); font-weight: var(--fw-semi); white-space: nowrap; }
.lead { color: var(--text2); font-size: var(--fs-lead); max-width: var(--measure); }
.page-head { display: grid; gap: var(--space-2); }

/* Rak petak komik */
.shelf { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--edge) var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) { .shelf { grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr)); } }
.tile { display: grid; gap: var(--space-1); align-content: start; color: var(--text); }
.tile:hover { text-decoration: none; }
.tile:hover .tile-title { text-decoration: underline; }
.tile-cover { position: relative; }
.tile-cover img { width: 100%; aspect-ratio: 12 / 17; object-fit: cover; border-radius: var(--r-md); background: var(--surface2); }
.tile-badge { position: absolute; left: var(--space-1); bottom: var(--space-1); padding: var(--badge-pad) var(--space-2); border-radius: var(--r-xs); background: var(--surface); color: var(--text); font-size: var(--fs-badge); font-weight: var(--fw-bold); }
.tile-title { font-size: var(--fs-card); line-height: var(--lh-card); font-weight: var(--fw-semi); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: var(--space-1); }
.tile-meta { font-size: var(--fs-meta); color: var(--text3); }

/* Chip genre */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-sm); padding: 0 var(--space-3); border-radius: var(--r-control-sm); background: var(--surface); border: var(--line) solid var(--border); color: var(--text2); font-size: var(--fs-caption); }
.chips a span { color: var(--text3); font-size: var(--fs-meta); }

/* Paginasi & A–Z */
.pager { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pager a, .pager span { min-width: var(--pager); height: var(--pager); display: inline-grid; place-items: center; padding: 0 var(--space-2); border-radius: var(--r-md); background: var(--surface); border: var(--line) solid var(--border); color: var(--text2); font-weight: var(--fw-semi); font-size: var(--fs-small); }
.pager .cur { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.pager .gap { background: none; border: 0; }

/* Detail komik */
.comic { display: grid; gap: var(--space-6); }
.head { display: grid; grid-template-columns: var(--cover-sm) minmax(0, 1fr); gap: var(--space-3) var(--edge); align-items: start; }
.cover { width: 100%; aspect-ratio: 12 / 17; object-fit: cover; border-radius: var(--r-md); background: var(--surface2); }
.head-info { display: grid; gap: var(--space-2); min-width: 0; }
.head-info h1 { line-height: var(--lh-tight); }
.facts { display: grid; gap: var(--space-1); font-size: var(--fs-small); color: var(--text2); }
.facts b { color: var(--text); font-weight: var(--fw-semi); }
.score { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text); font-weight: var(--fw-bold); }
.score svg { color: var(--rating); }
.score small { color: var(--text3); font-weight: var(--fw-regular); font-size: inherit; }
.head-more { grid-column: 1 / -1; display: grid; gap: var(--space-3); }
.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.prose { display: grid; gap: var(--space-3); color: var(--text2); font-size: var(--fs-lead); max-width: var(--measure); }
.syn { display: grid; gap: var(--space-2); }

/* Ajakan download */
.cta { display: grid; gap: var(--space-3); padding: var(--edge); border-radius: var(--r-lg); background: var(--soft); align-content: start; }
.cta-row { display: flex; gap: var(--space-3); align-items: flex-start; }
.cta-row svg { width: var(--icon-md); height: var(--icon-md); color: var(--primary); }
.cta-title { font-weight: var(--fw-bold); color: var(--text); }
.cta-text { color: var(--text2); font-size: var(--fs-small); }

/* Daftar chapter */
.rows { list-style: none; margin: 0; padding: 0; border-radius: var(--r-md); background: var(--surface); border: var(--line) solid var(--border); overflow: hidden; }
.rows li + li { border-top: var(--line) solid var(--border); }
.rows a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--edge); color: var(--text); font-size: var(--fs-lead); }
.rows time { color: var(--text3); font-size: var(--fs-caption); white-space: nowrap; }

/* Ulasan */
.reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.review { display: grid; grid-template-columns: var(--avatar) minmax(0, 1fr); gap: var(--space-3); }
.avatar { width: var(--avatar); height: var(--avatar); border-radius: var(--r-full); display: grid; place-items: center; background: var(--soft); color: var(--primary); font-weight: var(--fw-bold); }
.review p { font-size: var(--fs-small); color: var(--text2); overflow-wrap: anywhere; }
.review .who { color: var(--text); font-weight: var(--fw-semi); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.review time { color: var(--text3); font-weight: var(--fw-regular); font-size: var(--fs-meta); }
.panel { display: grid; gap: var(--space-3); padding: var(--edge); border-radius: var(--r-lg); background: var(--surface); border: var(--line) solid var(--border); align-content: start; }

/* Detail komik di layar lebar: kolom isi + kolom samping. */
@media (min-width: 960px) {
  .comic { grid-template-columns: minmax(0, 1fr) var(--aside-w); column-gap: var(--space-8); align-items: start; }
  .comic > .head, .comic > .wide { grid-column: 1 / -1; }
  .comic > .side { grid-column: 2; }
  .comic > .main { grid-column: 1; }
  .head { grid-template-columns: var(--cover-lg) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--space-8); }
  .head .cover { grid-row: 1 / span 2; }
  .head-more { align-content: start; }
  .head-info h1 { font-size: var(--fs-page-lg); }
  .head-more { grid-column: 2; }
  .actions { display: flex; flex-wrap: wrap; }
  .comic .rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comic .rows li + li { border-top: 0; }
  .comic .rows li { border-bottom: var(--line) solid var(--border); }
}

/* Halaman chapter terkunci: satu blok seukuran tiap halaman asli. */
.chapter { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--edge); }
.chapnav { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--space-2); }
.chapnav a { min-width: 0; min-height: var(--control-nav); display: flex; align-items: center; justify-content: center; padding: 0 var(--space-2); border-radius: var(--r-control-sm); background: var(--surface); border: var(--line) solid var(--border); font-weight: var(--fw-semi); font-size: var(--fs-small); line-height: var(--lh-tight); text-align: center; }
.pages { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: var(--page-max); display: grid; gap: var(--space-1); }
/* Label gembok diam di tengah tiap blok (place-items), tidak ikut menempel saat digulir. */
.page-lock { position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; max-width: 100%; border-radius: var(--r-md); background: var(--surface); border: var(--line) solid var(--border); }
.page-lock::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background-image: radial-gradient(var(--dot) var(--dot-size), transparent var(--dot-fade)); background-size: var(--dot-pitch) var(--dot-pitch); }
.lock-badge { display: grid; justify-items: center; gap: var(--space-2); color: var(--text2); font-size: var(--fs-caption); }
.lock-badge svg { width: var(--icon-lg); height: var(--icon-lg); color: var(--primary); }

.empty { display: grid; justify-items: center; gap: var(--space-3); text-align: center; padding: var(--space-10) 0; }
.empty p { color: var(--text2); }

/* Bilah download yang menempel di bawah layar. */
.dock { position: fixed; inset: auto 0 0; z-index: 20; background: var(--surface); border-top: var(--line) solid var(--border); padding-block: var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); }
.dock-row { display: flex; align-items: center; gap: var(--space-3); }
.dock img { width: var(--logo-dock); height: var(--logo-dock); border-radius: var(--r-control-sm); }
.dock-text { min-width: 0; display: grid; }
.dock-title { font-weight: var(--fw-bold); font-size: var(--fs-small); line-height: var(--lh-card); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-sub { font-size: var(--fs-meta); color: var(--text2); }
.dock .btn { margin-left: auto; min-height: var(--control-nav); }

/* Kaki situs */
.foot { border-top: var(--line) solid var(--border); background: var(--surface); padding-block: var(--space-6) var(--space-8); color: var(--text2); font-size: var(--fs-small); }
.foot .wrap { display: grid; gap: var(--space-3); }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.foot nav a { color: var(--text2); }