/* ==========================================================================
   Komiku: tata letak mengikuti desain di docs/layout/layout1.png.
   Satu berkas, tanpa build step (project ini tidak memakai Tailwind/Vite).

   Ukuran diturunkan dari desain: kolom konten 900px, kartu ~204px,
   sampul landscape ~3:2.
   ========================================================================== */

:root{
  --bg:#eef0f4;        --putih:#fff;
  --garis:#e3e6ea;     --garis2:#d7dbe1;
  --ink:#1f2430;       --ink2:#5b6270;     --ink3:#8b93a1;
  --biru:#3f5ba4;      --biru-t:#5673b8;   --biru-gelap:#33497f;
  --judul:#24306a;     --genre:#b8503a;
  --radius:4px;
  /* Lebar kolom isi di seluruh halaman. Halaman Daftar Komik nanti
     dibuat selebar layar tersendiri saat desainnya selesai. */
  --lebar-konten:1006px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);line-height:1.5;font-size:13px;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select{font:inherit}
.wrap{max-width:1500px;margin:0 auto;padding:0 24px}

/* Header baris 1 */
.atas{background:var(--putih)}
.atas-utama{background:var(--putih);border-bottom:1px solid var(--garis)}
.atas-isi{display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:20px;height:64px;
  /* Baris header melebar penuh, tidak ikut batas 1500px milik .wrap:
     logo menempel 65px dari tepi kiri, kotak cari 65px dari tepi kanan. */
  max-width:none;padding:0 65px}

.merek{display:flex;align-items:center;gap:10px;justify-self:start}
.merek-tanda{width:30px;height:30px;border-radius:6px;background:var(--biru);
  color:#fff;display:grid;place-items:center;font-weight:800;font-size:17px;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif}
.merek-nama{font-size:21px;font-weight:800;letter-spacing:-.3px;
  padding-left:10px;border-left:1px solid var(--garis2)}

/* Tiga tab tipe komik di tengah: bendera di atas, label di bawah. */
.tipe-tab{display:flex;gap:26px;justify-self:center}
.tipe-tab a{display:flex;flex-direction:column;align-items:center;gap:1px;
  font-size:17px;font-weight:600;color:var(--ink);padding:2px 4px;
  border-bottom:2px solid transparent}
.tipe-tab a:hover{color:var(--biru)}
.tipe-tab a.aktif{color:var(--biru);border-bottom-color:var(--biru)}
.bendera{display:block}   /* tanpa bingkai: hanya benderanya saja */

.cari-atas{display:flex;justify-self:end}
.cari-atas input{width:210px;background:#f1f3f5;border:1px solid var(--garis);
  border-right:0;border-radius:3px 0 0 3px;padding:6px 11px;outline:none;
  color:var(--ink);font-size:12px}
.cari-atas input::placeholder{color:var(--ink3)}
.cari-atas input:focus{border-color:var(--biru)}
.cari-atas button{background:#3c4049;border:1px solid #3c4049;color:#fff;
  padding:0 15px;border-radius:0 3px 3px 0;cursor:pointer;font-size:12px}
.cari-atas button:hover{background:var(--biru);border-color:var(--biru)}

.buka-menu{display:none;background:#f1f3f5;border:1px solid var(--garis);
  color:var(--ink);width:34px;height:32px;border-radius:4px;cursor:pointer;font-size:15px}

/* Header baris 2: pil menu */
.atas-menu{background:var(--bg);border-bottom:1px solid var(--garis);padding:9px 0}
.atas-menu ul{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;list-style:none}
.atas-menu a{display:block;background:var(--putih);border:1px solid var(--garis);
  color:var(--ink2);padding:5px 13px;border-radius:4px;font-size:12.5px;font-weight:600}
.atas-menu a:hover{border-color:var(--biru);color:var(--biru)}
.atas-menu a.aktif{background:var(--biru);border-color:var(--biru);color:#fff}

/* Kolom isi */
.beranda,
.konten{max-width:var(--lebar-konten);margin:0 auto;padding:14px 12px 30px}

.online{display:flex;align-items:center;justify-content:center;gap:6px;
  width:fit-content;margin:0 auto 14px;background:var(--putih);
  border:1px solid var(--garis);border-radius:4px;padding:5px 16px;
  font-size:12px;color:var(--ink2)}
.online b{color:var(--biru);font-size:13px}
.online-titik{width:7px;height:7px;border-radius:50%;background:var(--biru)}

.panel{background:var(--putih);border:1px solid var(--garis);
  border-radius:var(--radius);margin-bottom:14px;overflow:hidden}
.panel-isi{padding:14px}
.panel-kepala{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding-bottom:0}

.judul-garis{font-size:17px;font-weight:700;color:var(--ink);
  border-bottom:2px solid var(--biru);padding-bottom:5px;margin-bottom:9px}
.judul-panel{font-size:15px;font-weight:700;color:var(--ink)}
.judul-tengah{font-size:19px;font-weight:700;text-align:center;margin-bottom:14px}
.lencana{background:var(--biru);color:#fff;border-radius:4px;padding:1px 9px;
  font-size:17px;font-weight:700}

.intro{font-size:12.5px;color:var(--ink2)}
.intro b{color:var(--ink)}
.sub{font-size:12px;color:var(--ink2);margin:3px 0 11px}
.sub b{color:var(--genre)}

/* Tab (Harian/Mingguan, Semua/Manga/…) */
.tab-baris{display:grid;border-top:1px solid var(--garis);border-bottom:1px solid var(--garis)}
.tab-2{grid-template-columns:repeat(2,1fr)}
.tab-4{grid-template-columns:repeat(4,1fr)}
.tab{text-align:center;padding:8px 6px;font-size:13px;font-weight:700;
  color:var(--ink);background:var(--putih);border-right:1px solid var(--garis)}
.tab:last-child{border-right:0}
.tab:hover{background:#f6f7f9;color:var(--biru)}
.tab.aktif{background:var(--biru);color:#fff}

/* Peringkat */
.peringkat-kisi{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;padding:12px}
.pr{display:flex;gap:10px;border:1px solid var(--garis);border-radius:var(--radius);
  padding:8px;background:var(--putih)}
.pr:hover{border-color:var(--biru-t)}
.pr-sampul{position:relative;flex:0 0 84px;height:64px;border-radius:3px;
  overflow:hidden;background:#e9ebef}
.pr-sampul img{width:100%;height:100%;object-fit:cover}
.pr-no{position:absolute;top:0;left:0;background:var(--biru-t);color:#fff;
  font-size:11px;font-weight:700;padding:1px 6px;border-bottom-right-radius:4px}
.pr-teks{min-width:0;display:flex;flex-direction:column;gap:3px}
.pr-judul{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.pr-judul:hover{color:var(--biru)}
.pr-meta{font-size:11px;color:var(--ink3)}
.pr-genre{color:var(--genre)}
.pr-chapter{align-self:flex-start;margin-top:auto;background:#f3f4f6;
  border:1px solid var(--garis);border-radius:3px;padding:3px 11px;
  font-size:11.5px;color:var(--ink2)}
.pr-chapter:hover{border-color:var(--biru);color:var(--biru)}

.tombol-lebar{display:block;background:var(--biru);color:#fff;text-align:center;
  padding:9px;font-size:13px;font-weight:700}
.tombol-lebar:hover{background:var(--biru-gelap)}

/* Saringan perpustakaan */
.saring{display:flex;flex-wrap:wrap;gap:7px}
.saring select{flex:1 1 130px;min-width:0;background:var(--putih);
  border:1px solid var(--garis2);border-radius:3px;padding:6px 9px;
  font-size:12px;color:var(--ink);outline:none;cursor:pointer}
.saring select:focus{border-color:var(--biru)}
.tombol-cari{background:var(--biru);border:1px solid var(--biru);color:#fff;
  padding:6px 16px;border-radius:3px;cursor:pointer;font-size:12px;font-weight:600}
.tombol-cari:hover{background:var(--biru-gelap)}

/* Kartu komik */
.kisi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}

.kk{display:flex;flex-direction:column;min-width:0}
.kk-tautan{display:block;min-width:0}
.kk-sampul{position:relative;aspect-ratio:3/2;border-radius:3px;overflow:hidden;
  background:#e9ebef}
.kk-sampul img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.kk:hover .kk-sampul img{transform:scale(1.05)}
.kk-bendera{position:absolute;top:5px;right:5px;line-height:0}
.kk-judul{font-size:12.5px;font-weight:700;color:var(--judul);line-height:1.3;
  margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kk:hover .kk-judul{color:var(--biru)}
.kk-meta{font-size:11px;color:var(--ink3);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kk-genre{color:var(--genre)}
.kk-titik{color:var(--garis2)}
.kk-chapter{display:block;margin-top:6px;background:#f3f4f6;
  border:1px solid var(--garis);border-radius:3px;padding:4px 6px;
  font-size:11.5px;color:var(--ink2);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kk-chapter:hover{border-color:var(--biru);color:var(--biru);background:#fff}
.kk-chapter-mati{color:var(--ink3)}

/* Baris geser */
.geser{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);
  gap:14px;overflow-x:auto;padding-bottom:10px;
  scrollbar-width:thin;scrollbar-color:var(--garis2) transparent}
.geser::-webkit-scrollbar{height:9px}
.geser::-webkit-scrollbar-track{background:#f1f3f5;border-radius:5px}
.geser::-webkit-scrollbar-thumb{background:var(--garis2);border-radius:5px}
.geser::-webkit-scrollbar-thumb:hover{background:var(--ink3)}
/* Empat kartu terlihat sekaligus, sisanya digeser; sama seperti desain. */
@media(min-width:700px){.geser{grid-auto-columns:calc((100% - 42px)/4)}}

.selengkapnya{text-align:center;font-size:12px;color:var(--ink2);margin-top:10px}
.pil{display:inline-block;background:#f3f4f6;border:1px solid var(--garis);
  border-radius:3px;padding:3px 11px;font-size:11.5px;font-weight:600;color:var(--ink2)}
.pil:hover{border-color:var(--biru);color:var(--biru);background:#fff}

/* Pintasan bulat */
.pintasan{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:14px}
.pintasan-item{display:flex;flex-direction:column;align-items:center;gap:6px;
  border-right:1px solid var(--garis);padding:0 4px}
.pintasan-item:last-child{border-right:0}
.pintasan-bulat{width:78px;height:78px;border-radius:50%;display:grid;
  place-items:center;text-align:center;color:#fff;font-weight:700;font-size:13px;
  transition:transform .18s}
.pintasan-bulat:hover{transform:scale(1.06)}
.pintasan-label{font-size:11.5px;color:var(--ink)}

/* Footer */
.bawah{background:var(--putih);border-top:1px solid var(--garis);
  padding:26px 0 30px;margin-top:6px}
.bawah .wrap{display:flex;flex-direction:column;align-items:center;gap:9px}
.bawah-tanda{width:38px;height:38px;font-size:21px}
.bawah-hak{font-size:12px;color:var(--ink2)}
.bawah-tautan{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 0;
  font-size:12px;color:var(--ink2)}
.bawah-tautan a{padding:0 9px;border-right:1px solid var(--garis2)}
.bawah-tautan a:last-child{border-right:0}
.bawah-tautan a:hover{color:var(--biru)}

/* Halaman katalog lain (dipakai ulang sampai desainnya menyusul) */
.isi{max-width:var(--lebar-konten);margin:0 auto;padding:14px 12px 30px}
.kosong{text-align:center;color:var(--ink2);padding:44px 16px}
.kosong .ikon{font-size:30px;margin-bottom:6px}
.pg{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin:18px 0}
.pg a,.pg span{padding:6px 11px;border-radius:3px;background:var(--putih);
  border:1px solid var(--garis);font-size:12px;color:var(--ink2)}
.pg a:hover{border-color:var(--biru);color:var(--biru)}
.pg .kini{background:var(--biru);border-color:var(--biru);color:#fff;font-weight:700}
.pg .mati{opacity:.4}

/* Responsif */
@media(max-width:1200px){
  .atas-isi{padding:0 24px}
}
@media(max-width:980px){
  .tipe-tab{gap:16px}
  .cari-atas input{width:150px}
}
@media(max-width:760px){
  .atas-isi{height:auto;padding:10px 16px;
    grid-template-columns:1fr auto;gap:10px}
  .merek{grid-column:1}
  .buka-menu{grid-column:2;display:block;justify-self:end}
  .cari-atas{grid-column:1/-1;justify-self:stretch}
  .cari-atas input{width:100%;flex:1}
  .tipe-tab{grid-column:1/-1;justify-self:center}
  .atas-menu ul{display:none;flex-direction:column;align-items:stretch}
  .atas-menu ul.tampil{display:flex}
  .kisi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .peringkat-kisi{grid-template-columns:1fr}
  .geser{grid-auto-columns:46%}
  .pintasan{grid-template-columns:repeat(3,1fr);gap:14px 6px}
  .pintasan-item:nth-child(3n){border-right:0}
  .judul-tengah,.lencana{font-size:16px}
}
@media(max-width:420px){
  .pintasan-bulat{width:64px;height:64px;font-size:11px}
  .geser{grid-auto-columns:62%}
}

/* ==========================================================================
   Halaman selain beranda.
   Desain Figma yang ada baru mencakup beranda; bagian ini menjaga halaman
   lain tetap rapi dan terpakai sampai desainnya menyusul.
   ========================================================================== */

.isi{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:16px;align-items:start;
  max-width:var(--lebar-konten)}
.isi.penuh{grid-template-columns:minmax(0,1fr)}
.samping{display:flex;flex-direction:column;gap:14px;position:sticky;top:14px}

.panel .kepala{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;border-bottom:1px solid var(--garis);background:#fafbfc}
.panel .kepala h1,.panel .kepala h2{font-size:14px;font-weight:700;
  display:flex;align-items:center;gap:8px}
.panel .kepala h1::before,.panel .kepala h2::before{content:"";width:4px;height:15px;
  border-radius:2px;background:var(--biru)}
.panel .kepala .lainnya{font-size:11.5px;color:var(--biru);font-weight:600}
.panel .badan{padding:14px}
.lead{color:var(--ink2);font-size:12px;margin-top:2px}

.filter{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.filter select,.filter input[type=text]{background:var(--putih);border:1px solid var(--garis2);
  border-radius:3px;padding:6px 10px;font-size:12px;color:var(--ink);outline:none}
.filter select:focus,.filter input:focus{border-color:var(--biru)}
.tombol{display:inline-flex;align-items:center;gap:6px;background:var(--biru);color:#fff;
  border:1px solid var(--biru);border-radius:3px;padding:6px 14px;font-size:12px;
  font-weight:600;cursor:pointer}
.tombol:hover{background:var(--biru-gelap)}
.tombol.hantu{background:var(--putih);color:var(--ink2);border-color:var(--garis2)}
.tombol.hantu:hover{border-color:var(--biru);color:var(--biru)}
.tombol.aktif{background:#0ca678;border-color:#0ca678}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-block;background:#f3f4f6;border:1px solid var(--garis);
  color:var(--ink2);font-size:11.5px;padding:4px 10px;border-radius:3px}
.chip:hover{border-color:var(--biru);color:var(--biru);background:#fff}
.chip.aktif{background:var(--biru);border-color:var(--biru);color:#fff}
.chip .n{opacity:.6;font-size:10.5px;margin-left:3px}

.peringkat{list-style:none}
.peringkat li{border-bottom:1px solid var(--garis)}
.peringkat li:last-child{border-bottom:0}
.peringkat li>a{display:flex;gap:9px;align-items:center;padding:8px 14px}
.peringkat li>a:hover{background:#fafbfc}
.peringkat .no{width:22px;height:22px;flex:0 0 auto;border-radius:3px;display:grid;
  place-items:center;font-size:11px;font-weight:700;background:#eceef2;color:var(--ink2)}
.peringkat li:nth-child(1) .no{background:var(--biru);color:#fff}
.peringkat li:nth-child(2) .no{background:var(--biru-t);color:#fff}
.peringkat li:nth-child(3) .no{background:#adb5bd;color:#fff}
.peringkat .mini{width:46px;height:34px;flex:0 0 auto;border-radius:3px;
  overflow:hidden;background:#e9ebef}
.peringkat .mini img{width:100%;height:100%;object-fit:cover}
.peringkat .teks{min-width:0}
.peringkat .teks b{font-size:12px;font-weight:700;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.peringkat .teks small{color:var(--ink3);font-size:11px}

.daftar-update{list-style:none}
.daftar-update li{border-bottom:1px solid var(--garis)}
.daftar-update li:last-child{border-bottom:0}
.daftar-update li>a{display:flex;gap:10px;padding:9px 14px}
.daftar-update li>a:hover{background:#fafbfc}
.daftar-update .mini{width:58px;height:42px;flex:0 0 auto;border-radius:3px;
  overflow:hidden;background:#e9ebef}
.daftar-update .mini img{width:100%;height:100%;object-fit:cover}
.daftar-update .teks{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center}
.daftar-update .teks b{font-size:12.5px;font-weight:700;display:-webkit-box;
  -webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.daftar-update .teks span{font-size:11.5px;color:var(--ink2)}
.daftar-update .teks .tgl{font-size:11px;color:var(--ink3)}

/* Detail komik */
.kepala-komik{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;padding:14px}
.kepala-komik .sampul{border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;
  background:#e9ebef;box-shadow:0 4px 14px rgba(20,25,40,.14)}
.kepala-komik .sampul img{width:100%;height:100%;object-fit:cover}
.kepala-komik h1{font-size:21px;line-height:1.2;margin-bottom:2px}
.kepala-komik .alt{color:var(--ink3);font-size:12px;margin-bottom:10px}
.fakta{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px;margin:11px 0}
.fakta div{background:#f8f9fa;border:1px solid var(--garis);border-radius:3px;padding:6px 10px}
.fakta dt{font-size:10px;color:var(--ink3);text-transform:uppercase;letter-spacing:.4px}
.fakta dd{font-size:12px;font-weight:700;margin-top:1px}
.sinopsis{color:var(--ink2);font-size:12.5px;white-space:pre-line}
.aksi-komik{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.gulir-chapter{max-height:470px;overflow-y:auto}
.daftar-chapter{list-style:none}
.daftar-chapter li a{display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:8px 14px;border-bottom:1px solid var(--garis);font-size:12.5px}
.daftar-chapter li a:hover{background:#f6f7f9;color:var(--biru)}
.daftar-chapter .tgl{color:var(--ink3);font-size:11px;white-space:nowrap}
.daftar-chapter li a.dibaca b{color:var(--ink3);font-weight:500}

/* Pembaca chapter: gelap supaya gambar jadi pusat perhatian. */

@media(max-width:940px){
  .isi{grid-template-columns:minmax(0,1fr)}
  .samping{position:static}
  .kepala-komik{grid-template-columns:120px minmax(0,1fr);gap:12px}
}
@media(max-width:620px){
  .kepala-komik{grid-template-columns:1fr}
  .kepala-komik .sampul{max-width:160px}
}

/* ==========================================================================
   Halaman Terbaru & Peringkat, dan navbar bawah.
   Mengikuti docs/layout/"halaman terbaru.png" dan "Halaman Peringkat.png".
   ========================================================================== */

.judul-besar{font-size:22px;font-weight:700;color:var(--ink)}

/* Pil "Popular: Harian | Mingguan | Semua" di bawah saringan. */
.populer-pil{display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:11px;font-size:12px;color:var(--ink2)}
.populer-pil>span{font-weight:600}

/* Daftar update (halaman Terbaru) */
.daftar-baru{list-style:none;border-top:1px solid var(--garis)}
.daftar-baru li{display:flex;gap:16px;padding:14px;border-bottom:1px solid var(--garis)}
.daftar-baru li:last-child{border-bottom:0}
.daftar-baru li:hover{background:#fcfcfd}

.db-sampul{position:relative;flex:0 0 34%;max-width:350px;aspect-ratio:19/10;
  border-radius:4px;overflow:hidden;background:#e9ebef}
.db-sampul img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.daftar-baru li:hover .db-sampul img{transform:scale(1.04)}

.db-up{position:absolute;top:7px;left:7px;background:var(--biru);color:#fff;
  font-size:10.5px;font-weight:600;letter-spacing:.4px;padding:2px 8px;border-radius:3px}
.db-up b{font-weight:800}

/* Keterangan tipe + genre di sudut sampul, seperti di desain. */
.db-label{position:absolute;right:6px;bottom:5px;font-size:11px;font-weight:700;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85);letter-spacing:.2px}
.db-label i{font-style:normal;opacity:.92}

.db-teks{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.db-judul{font-size:17px;font-weight:700;color:var(--judul);line-height:1.25}
.db-judul:hover{color:var(--biru)}
.db-meta{font-size:12px;color:var(--ink2)}
.db-genre{color:var(--genre)}
.db-pisah{color:var(--garis2);margin:0 2px}
.db-sinopsis{font-size:11.5px;color:var(--ink3);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.db-tombol{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.db-tombol a{background:#f3f4f6;border:1px solid var(--garis);border-radius:3px;
  padding:5px 12px;font-size:11px;color:var(--ink3)}
.db-tombol a b{font-size:12.5px;font-weight:700;color:var(--ink)}
.db-tombol a:hover{border-color:var(--biru);background:#fff}
.db-tombol a:hover b{color:var(--biru)}

.batas-daftar{padding:13px 14px;font-size:11.5px;color:var(--ink3);text-align:center;
  border-top:1px solid var(--garis);background:#fafbfc}
.batas-daftar a{color:var(--biru);font-weight:600}

/* Navbar bawah */
body{padding-bottom:62px}          /* ruang agar isi tidak tertutup navbar */
body.mode-baca{padding-bottom:46px}   /* ruang untuk bilah mengambang saja */

.navbar-bawah{position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:var(--putih);border-top:1px solid var(--garis);
  box-shadow:0 -2px 10px rgba(20,25,40,.07);
  /* Latar tetap selebar layar, tapi keempat menunya berkelompok di tengah:
     kolomnya diberi lebar tetap lalu dipusatkan, bukan dibagi rata 1fr
     yang membuat menu terlempar sampai ke tepi layar. */
  display:grid;grid-template-columns:repeat(4,minmax(0,170px));
  justify-content:center}
body.mode-baca .navbar-bawah{display:none}

.navbar-bawah a{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 4px 9px;font-size:11px;color:var(--ink3)}
.navbar-bawah a:hover{color:var(--biru)}
.navbar-bawah a.aktif{color:var(--biru);font-weight:600}
.navbar-bawah svg{display:block}

/* Footer digambar DI ATAS navbar: begitu pengunjung sampai ke dasar halaman,
   footer menutupi navbar tanpa perlu JavaScript. Latarnya wajib padat. */
footer.bawah{position:relative;z-index:21;background:var(--putih)}

@media(max-width:620px){
  .daftar-baru li{gap:11px;padding:11px}
  .db-sampul{flex:0 0 40%}
  .db-judul{font-size:14px}
  .db-sinopsis{display:none}
  .db-tombol a{padding:4px 9px}
  .judul-besar{font-size:18px}
}

/* ==========================================================================
   Halaman Trending: docs/layout/"halaman trending.png".
   ========================================================================== */

/* Judul halaman berupa lencana biru di tengah, seperti di desain. */
.lencana-tengah{display:block;width:fit-content;margin:0 auto;background:var(--biru);
  color:#fff;border-radius:5px;padding:5px 16px;font-size:19px;font-weight:700}

.tren-kisi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;padding:14px}

.tren{border:1px solid var(--garis);border-radius:4px;overflow:hidden;
  background:var(--putih);display:flex;flex-direction:column;
  transition:transform .15s,box-shadow .15s}
.tren:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(20,25,40,.13)}
.tren-sampul{display:block;aspect-ratio:3/2;overflow:hidden;background:#e9ebef}
.tren-sampul img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.tren:hover .tren-sampul img{transform:scale(1.05)}
.tren-info{padding:8px 10px 10px;display:flex;flex-direction:column;gap:3px}
.tren-judul{font-size:12.5px;font-weight:600;color:var(--biru);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tren-judul:hover{text-decoration:underline}
.tren-online{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink2)}
.tren-titik{width:7px;height:7px;border-radius:50%;background:#e03131;flex:0 0 auto}

@media(max-width:760px){.tren-kisi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.tren-kisi{grid-template-columns:1fr}}

/* ==========================================================================
   Daftar Komik (layar penuh), Daftar Genre, dan halaman per-genre.
   Mengikuti docs/layout/"halaman daftar komik.png" dan "halaman daftar genre.png".
   ========================================================================== */

/* Satu-satunya halaman yang melebar penuh; sisanya tetap --lebar-konten. */
.penuh{padding:0 0 30px}

/* Tab tipe di tengah */
.tab-tipe{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:4px 14px 14px}
.tab-tipe a{background:var(--putih);border:1px solid var(--garis);color:var(--ink2);
  padding:6px 18px;border-radius:18px;font-size:13px;font-weight:600}
.tab-tipe a:hover{border-color:var(--biru);color:var(--biru)}
.tab-tipe a.aktif{background:var(--biru);border-color:var(--biru);color:#fff}

/* Bilah indeks huruf: melebar penuh, menempel tepi layar seperti desain. */
.indeks{display:flex;flex-wrap:wrap;background:var(--putih);
  border-top:1px solid var(--garis);border-bottom:1px solid var(--garis)}
.indeks a{flex:1 1 auto;min-width:58px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;padding:9px 4px;
  border-right:1px solid var(--garis);color:var(--ink)}
.indeks a:last-child{border-right:0}
.indeks a:hover{background:#f6f7f9;color:var(--biru)}
.indeks a b{font-size:13px;font-weight:700}
.indeks a span{font-size:10.5px;color:var(--ink3)}
.indeks a.aktif{background:var(--biru);color:#fff}
.indeks a.aktif span{color:rgba(255,255,255,.8)}

.jumlah-komik{text-align:center;font-size:12px;color:var(--ink3);padding:11px 14px}

/* Kartu daftar: sampul kecil di kiri, keterangan di kanan. */
.dk-kisi{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:0 14px}
.dk{display:flex;gap:10px;background:var(--putih);border:1px solid var(--garis);
  border-radius:5px;padding:10px;align-items:flex-start;
  transition:border-color .15s,box-shadow .15s}
.dk:hover{border-color:var(--biru);box-shadow:0 4px 14px rgba(20,25,40,.1)}
.dk-sampul{flex:0 0 52px;width:52px;aspect-ratio:3/4;border-radius:3px;
  overflow:hidden;background:#e9ebef;display:block}
.dk-sampul img{width:100%;height:100%;object-fit:cover}
.dk-teks{min-width:0;display:flex;flex-direction:column;gap:3px}
.dk-judul{font-size:12.5px;font-weight:700;color:var(--judul);line-height:1.3}
.dk:hover .dk-judul{color:var(--biru)}
.dk-meta{font-size:11px;color:var(--genre)}
.dk-titik{color:var(--garis2)}
.dk-status{font-size:11px;color:var(--ink3)}

/* Daftar Genre */
.judul-sisi{font-size:19px;font-weight:700;color:var(--ink);
  border-left:4px solid var(--biru);padding-left:11px;margin-bottom:12px}

.kotak-info{background:#f6f8fd;border:1px solid #dbe3f5;border-left:4px solid var(--biru);
  border-radius:5px;padding:11px 14px;margin-bottom:12px}
.kotak-info b{display:block;color:var(--biru);font-size:13px;margin-bottom:2px}
.kotak-info p{font-size:11.5px;color:var(--ink2)}

.cari-genre{width:100%;background:var(--putih);border:1px solid var(--garis2);
  border-radius:18px;padding:8px 16px;font-size:12.5px;color:var(--ink);outline:none}
.cari-genre:focus{border-color:var(--biru)}

.lompat-huruf{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 4px}
.lompat-huruf a{background:#eef2fb;border:1px solid #dbe3f5;color:var(--biru);
  min-width:24px;text-align:center;border-radius:4px;padding:2px 7px;
  font-size:11.5px;font-weight:700}
.lompat-huruf a:hover{background:var(--biru);color:#fff}

.genre-blok{margin-top:14px}
.genre-huruf{font-size:12.5px;font-weight:700;color:var(--biru);
  padding-bottom:5px;border-bottom:1px solid var(--garis);margin-bottom:10px}
.genre-kisi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.genre-pil{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--putih);border:1px solid var(--garis);border-radius:5px;
  padding:8px 12px;font-size:12px;font-weight:600;color:var(--ink)}
.genre-pil:hover{border-color:var(--biru);color:var(--biru);
  box-shadow:0 3px 10px rgba(20,25,40,.08)}
.genre-pil b{background:#eef2fb;color:var(--biru);border-radius:9px;
  padding:1px 8px;font-size:10.5px;font-weight:700;flex:0 0 auto}

/* Halaman per-genre */
.genre-lead{font-size:11.5px;color:var(--ink2);margin-top:10px}

/* Responsif */
@media(max-width:1400px){.dk-kisi{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1000px){
  .dk-kisi{grid-template-columns:repeat(3,minmax(0,1fr))}
  .genre-kisi{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .dk-kisi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .genre-kisi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .indeks a{min-width:44px;padding:7px 3px}
}
@media(max-width:480px){
  .dk-kisi{grid-template-columns:1fr}
  .genre-kisi{grid-template-columns:1fr}
}

/* ==========================================================================
   Halaman detail komik: docs/layout/"halaman saat milih komik.png".
   ========================================================================== */

.remah{font-size:11.5px;color:var(--ink3);padding:2px 2px 10px}
.remah a{color:var(--biru)}
.remah span{margin:0 5px}
.remah b{color:var(--ink2);font-weight:600}

.kk-kepala{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.judul-komik{font-size:19px;font-weight:700;color:var(--biru);line-height:1.25}
.tombol-share{flex:0 0 auto;background:var(--putih);border:1px solid var(--garis2);
  color:var(--ink2);border-radius:5px;padding:5px 13px;font-size:11.5px;
  font-weight:600;cursor:pointer}
.tombol-share:hover{border-color:var(--biru);color:var(--biru)}

.judul-alt{font-size:12px;color:var(--ink3);border-left:3px solid var(--garis2);
  padding-left:8px;margin:6px 0 8px}
.komik-lead{font-size:11.5px;color:var(--ink2);margin-bottom:14px}
.komik-lead b{color:var(--ink)}

.kk-atas{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px}
.kk-sampul-besar{aspect-ratio:3/4;border-radius:5px;overflow:hidden;background:#e9ebef;
  box-shadow:0 4px 14px rgba(20,25,40,.14)}
.kk-sampul-besar img{width:100%;height:100%;object-fit:cover}
.judul-kecil{font-size:13px;font-weight:700;margin-bottom:5px}

.aksi-simpan{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.aksi-simpan .pil{cursor:pointer;font-size:11.5px;padding:5px 13px}
.aksi-simpan .pil.aktif{background:var(--biru);border-color:var(--biru);color:#fff}

/* Tabel info + kotak statistik berdampingan */
.kk-bawah{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:16px;
  padding:14px;border-top:1px solid var(--garis)}

.info-komik{font-size:12px}
.info-komik>div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;
  padding:5px 0;border-bottom:1px dotted var(--garis)}
.info-komik>div:last-child{border-bottom:0}
.info-komik dt{color:var(--ink3)}
.info-komik dd{text-align:right;font-weight:600}
.info-genre dd{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}

.kotak-statistik{background:#fafbfc;border:1px solid var(--garis);border-radius:5px;
  padding:13px;text-align:center;align-self:start}
.st-peringkat{font-size:12px;color:var(--ink2)}
.st-peringkat b{color:#e03131;font-size:13px}
.st-total{font-size:27px;font-weight:700;color:var(--biru);line-height:1.2;margin-top:4px}
.st-ket{font-size:10.5px;color:var(--ink3);margin-bottom:10px}
.st-rinci{border-top:1px solid var(--garis);font-size:11.5px}
.st-rinci>div{display:flex;justify-content:space-between;padding:5px 2px;
  border-bottom:1px dotted var(--garis)}
.st-rinci>div:last-child{border-bottom:0}
.st-rinci dt{color:var(--ink3)}
.st-rinci dd{font-weight:700}

/* Tab berbentuk tombol (halaman detail memakai <button>, bukan <a>) */
button.tab{border:0;border-right:1px solid var(--garis);width:100%;cursor:pointer;
  font-family:inherit}

/* Rentang chapter */
.rentang{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.rentang .pil{cursor:pointer}
.rentang .pil.aktif{background:var(--biru);border-color:var(--biru);color:#fff}
.rentang select{background:var(--putih);border:1px solid var(--garis2);border-radius:3px;
  padding:3px 9px;font-size:11.5px;color:var(--ink2);cursor:pointer;outline:none}

/* Tabel daftar chapter */
.tabel-chapter{border-top:1px solid var(--garis)}
.tc-kepala{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 14px;background:#fafbfc;border-bottom:1px solid var(--garis)}
.tc-kepala input{flex:1;max-width:320px;background:var(--putih);
  border:1px solid var(--garis2);border-radius:3px;padding:5px 10px;
  font-size:11.5px;color:var(--ink);outline:none}
.tc-kepala input:focus{border-color:var(--biru)}
.tc-kepala span{font-size:11.5px;font-weight:700;color:var(--ink2)}

.tc-isi{max-height:430px;overflow-y:auto}
.tc-baris{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 14px;border-bottom:1px solid var(--garis);font-size:12.5px}
.tc-baris:last-child{border-bottom:0}
.tc-baris:hover{background:#f6f7f9;color:var(--biru)}
.tc-baris b{font-weight:700}
.tc-baris span{font-size:11px;color:var(--ink3);white-space:nowrap}
.tc-baris.dibaca b{color:var(--ink3);font-weight:500}

/* Komik serupa */
.serupa-kisi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:11px}
.sr{display:flex;flex-direction:column;background:var(--putih);border:1px solid var(--garis);
  border-radius:5px;overflow:hidden;transition:transform .15s,box-shadow .15s}
.sr:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(20,25,40,.13)}
.sr-sampul{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#e9ebef}
.sr-sampul img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.sr:hover .sr-sampul img{transform:scale(1.05)}
.sr-views{position:absolute;top:5px;left:5px;background:rgba(0,0,0,.66);color:#fff;
  font-size:10px;font-weight:600;padding:2px 7px;border-radius:3px}
.sr-judul{font-size:12.5px;font-weight:700;color:var(--judul);padding:8px 10px 0;line-height:1.3}
.sr:hover .sr-judul{color:var(--biru)}
.sr-ket{font-size:11px;color:var(--ink3);padding:3px 10px 10px;line-height:1.45}

/* Lingkaran kategori di beranda memakai gambar dari public/img/kategori/. */
.pintasan-bulat{background-size:cover;background-position:center}
/* Gambar lingkaran tampil polos: tanpa lapisan gelap dan tanpa tulisan
   di atasnya, supaya gambarnya sendiri yang jadi sorotan. Keterangannya
   ada di bawah lingkaran. */

@media(max-width:860px){
  .kk-bawah{grid-template-columns:1fr}
  .serupa-kisi{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .kk-atas{grid-template-columns:1fr}
  .kk-sampul-besar{max-width:150px}
  .serupa-kisi{grid-template-columns:1fr}
  .info-komik>div{grid-template-columns:110px minmax(0,1fr)}
}

/* ==========================================================================
   Halaman pembaca chapter: docs/layout/"halaman saat membaca komik.png".
   Halamannya terang seperti halaman lain; hanya jalur gambar yang hitam.
   ========================================================================== */

.bar-alat{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:11px 14px}
.ba-kanan{display:flex;gap:8px}
.ba-tombol{display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:32px;padding:0 11px;background:var(--putih);
  border:1px solid var(--garis2);border-radius:5px;color:var(--ink2);
  font-size:15px;cursor:pointer;font-family:inherit}
.ba-tombol:hover{border-color:var(--biru);color:var(--biru)}
.ba-sembunyi{visibility:hidden}

/* Jalur gambar: hitam selebar layar, gambar dipusatkan. */
.lembar{width:100%;max-width:none;margin:0;background:#000;padding:0}
.lembar img{display:block;width:100%;max-width:800px;height:auto;margin:0 auto}

/* Bilah mengambang, duduk tepat di atas navbar bawah. */
.bar-ambang{position:fixed;left:0;right:0;bottom:0;z-index:19;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 14px;background:rgba(255,255,255,.96);
  border-top:1px solid var(--garis);box-shadow:0 -2px 10px rgba(20,25,40,.08)}
.bar-ambang a,
.bar-ambang button{background:none;border:0;color:var(--ink);font-size:12.5px;
  font-weight:600;cursor:pointer;font-family:inherit;padding:4px 6px}
.bar-ambang a:hover,
.bar-ambang button:hover{color:var(--biru)}
.ba-atas{font-size:17px!important}

/* Empat kartu trending di bawah pembaca */
.tren-4{grid-template-columns:repeat(4,minmax(0,1fr))}

@media(max-width:760px){
  .tren-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==========================================================================
   "Lanjut Baca" di beranda dan halaman History.
   docs/layout/"tambahan di beranda.png" dan "halama history.png".
   ========================================================================== */

.judul-tengah-kecil{font-size:15px;font-weight:700;text-align:center;margin-bottom:12px}

.kisi-lanjut{display:grid;gap:13px;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}

.lb{background:var(--putih);border:1px solid var(--garis);border-radius:5px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .15s,box-shadow .15s}
.lb:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(20,25,40,.13)}
.lb-sampul{display:block;aspect-ratio:3/2;overflow:hidden;background:#e9ebef}
.lb-sampul img{width:100%;height:100%;object-fit:cover}
.lb-isi{padding:8px 10px 10px;display:flex;flex-direction:column;gap:3px}
.lb-judul{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb:hover .lb-judul{color:var(--biru)}
.lb-chapter{font-size:11.5px;color:var(--biru)}
.lb-chapter:hover{text-decoration:underline}

/* Bilah kemajuan baca: seberapa jauh pengunjung menggulir di chapter itu. */
.lb-bar{display:block;height:3px;border-radius:2px;background:#e6e9ef;margin-top:4px}
.lb-bar i{display:block;height:100%;border-radius:2px;background:var(--biru)}
.lb-progres{display:block;margin-top:5px;background:#f3f4f6;
  border:1px solid var(--garis);border-radius:3px;padding:4px 6px;
  font-size:11px;color:var(--ink2);text-align:center}

/* Dua kotak tautan di bawah section beranda */
.lb-tautan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.lb-tautan a{background:#f5f6f8;border:1px solid var(--garis);border-radius:5px;padding:12px 14px}
.lb-tautan a:hover{border-color:var(--biru);background:var(--putih)}
.lb-tautan b{display:block;color:var(--biru);font-size:13px;margin-bottom:4px}
.lb-tautan span{font-size:11.5px;color:var(--ink2)}

@media(max-width:560px){
  .lb-tautan{grid-template-columns:1fr}
  .kisi-lanjut{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==========================================================================
   Halaman Bookmark dan Koleksi.
   ========================================================================== */

.lb-judul-biru{color:var(--biru)}
.lb-judul-biru:hover{text-decoration:underline}

.ds-hapus{margin:0 10px 10px;background:#f3f4f6;border:1px solid var(--garis);
  border-radius:3px;padding:5px 6px;font-size:11px;color:var(--ink2);
  cursor:pointer;font-family:inherit}
.ds-hapus:hover{border-color:#e03131;color:#e03131;background:var(--putih)}

.kol-blok{margin-top:16px}
.kol-blok:first-child{margin-top:4px}
.kol-kepala{display:flex;align-items:center;gap:10px;padding-bottom:7px;
  margin-bottom:11px;border-bottom:1px solid var(--garis)}
.kol-kepala b{font-size:13.5px}
.kol-kepala span{font-size:11.5px;color:var(--ink3);margin-right:auto}
.kol-hapus{cursor:pointer;font-family:inherit}
.kol-hapus:hover{border-color:#e03131;color:#e03131}

/* ==========================================================================
   Halaman informasi: DMCA, Terms of Usage, Privacy Policy, Contact Us.
   ========================================================================== */

.artikel{font-size:12.5px;color:var(--ink2);line-height:1.65}
.artikel h2{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:4px}
.artikel h3{font-size:14px;font-weight:700;color:var(--ink);
  margin-top:18px;padding-top:14px;border-top:1px solid var(--garis)}
.artikel p{margin-top:8px}
.artikel b{color:var(--ink)}
.artikel a{color:var(--biru)}
.artikel a:hover{text-decoration:underline}
.artikel ul,
.artikel ol{margin:8px 0 0 22px}
.artikel li{margin-top:5px}
.art-tanggal{font-weight:700;color:var(--ink);font-size:12px}

/* ==========================================================================
   Panel admin dan halaman masuknya.
   ========================================================================== */

/* Halaman masuk */
.halaman-masuk{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:var(--bg)}
.kartu-masuk{width:100%;max-width:360px;background:var(--putih);
  border:1px solid var(--garis);border-radius:8px;padding:22px;
  box-shadow:0 8px 28px rgba(20,25,40,.1)}
.km-kepala{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.km-kepala b{font-size:16px}
.km-label{display:block;font-size:12px;color:var(--ink2);margin:11px 0 4px}
.km-isian{width:100%;background:var(--putih);border:1px solid var(--garis2);
  border-radius:5px;padding:8px 11px;font-size:13px;color:var(--ink);outline:none}
.km-isian:focus{border-color:var(--biru)}
.km-ingat{display:flex;align-items:center;gap:7px;font-size:12px;
  color:var(--ink2);margin:12px 0}
.km-tombol{width:100%;background:var(--biru);border:0;color:#fff;border-radius:5px;
  padding:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.km-tombol:hover{background:var(--biru-gelap)}
.km-galat{background:#fff0f0;border:1px solid #f3c2c2;color:#b02a2a;
  border-radius:5px;padding:9px 11px;font-size:12px}
.km-balik{display:block;text-align:center;margin-top:14px;font-size:12px;color:var(--ink3)}
.km-balik:hover{color:var(--biru)}

/* Kerangka panel */
body.mode-admin{background:var(--bg);padding-bottom:40px}
.adm-wrap{max-width:1060px;margin:0 auto;padding:0 16px}
.adm-atas{background:var(--putih);border-bottom:1px solid var(--garis);margin-bottom:20px}
.adm-atas .adm-wrap{display:flex;align-items:center;gap:18px;height:58px}
.adm-merek{display:flex;align-items:center;gap:9px;font-weight:800;font-size:15px}
.adm-menu{display:flex;gap:6px;margin-right:auto}
.adm-menu a{padding:6px 12px;border-radius:5px;font-size:12.5px;
  font-weight:600;color:var(--ink2)}
.adm-menu a:hover{background:#f1f3f5;color:var(--biru)}
.adm-menu a.aktif{background:var(--biru);color:#fff}
.adm-keluar{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--ink3)}
.adm-keluar button{background:none;border:1px solid var(--garis2);border-radius:5px;
  padding:5px 11px;font-size:11.5px;color:var(--ink2);cursor:pointer;font-family:inherit}
.adm-keluar button:hover{border-color:#e03131;color:#e03131}

.adm-judul{font-size:20px;font-weight:700;margin-bottom:4px}
.adm-lead{font-size:12.5px;color:var(--ink2);margin-bottom:16px}
.adm-redup{color:var(--ink3)}

.adm-pesan{border-radius:5px;padding:10px 13px;font-size:12.5px;margin-bottom:16px}
.adm-sukses{background:#eefbf3;border:1px solid #b7e4c7;color:#1b7a43}
.adm-galat{background:#fff0f0;border:1px solid #f3c2c2;color:#b02a2a}

.adm-kisi{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.adm-kartu{display:flex;flex-direction:column;gap:5px;background:var(--putih);
  border:1px solid var(--garis);border-radius:7px;padding:16px}
.adm-kartu:hover{border-color:var(--biru);box-shadow:0 5px 16px rgba(20,25,40,.09)}
.adm-kartu b{font-size:14px}
.adm-kartu span{font-size:12px;color:var(--ink2)}
.adm-kartu i{font-style:normal;font-size:11.5px;color:var(--biru);margin-top:3px}

.adm-tab{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.adm-tab a{background:var(--putih);border:1px solid var(--garis);border-radius:5px;
  padding:6px 12px;font-size:12px;font-weight:600;color:var(--ink2)}
.adm-tab a:hover{border-color:var(--biru);color:var(--biru)}
.adm-tab a.aktif{background:var(--biru);border-color:var(--biru);color:#fff}

.adm-panel{background:var(--putih);border:1px solid var(--garis);border-radius:7px;
  padding:16px;margin-bottom:14px}
.adm-panel-kepala{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--garis)}
.adm-panel-kepala b{font-size:13.5px}
.adm-panel-kepala span{font-size:11.5px;color:var(--ink3)}
.adm-penuh{font-size:12px}

/* Daftar banner terpasang */
.adm-banner-kisi{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:12px;margin-bottom:14px}
.adm-banner{border:1px solid var(--garis);border-radius:5px;padding:9px;
  display:flex;flex-direction:column;gap:7px}
.adm-banner img{max-width:100%;height:auto;border-radius:3px;background:#f1f3f5}
.adm-banner-info{display:flex;flex-wrap:wrap;gap:9px;font-size:11px;color:var(--ink2)}
.adm-banner-info a{color:var(--biru)}
.adm-banner button{align-self:flex-start;background:none;border:1px solid var(--garis2);
  border-radius:4px;padding:4px 10px;font-size:11px;color:var(--ink2);
  cursor:pointer;font-family:inherit}
.adm-banner button:hover{border-color:#e03131;color:#e03131}

.adm-unggah{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.adm-unggah input[type=file]{flex:1 1 220px;font-size:12px}
.adm-unggah input[type=url]{flex:1 1 200px}
.adm-unggah input[type=number]{width:80px}
.adm-unggah input[type=url],
.adm-unggah input[type=number]{background:var(--putih);border:1px solid var(--garis2);
  border-radius:5px;padding:7px 10px;font-size:12px;color:var(--ink);outline:none}
.adm-unggah button{background:var(--biru);border:0;color:#fff;border-radius:5px;
  padding:8px 16px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.adm-unggah button:hover{background:var(--biru-gelap)}

/* Formulir pengaturan */
.adm-baris{padding:12px 0;border-bottom:1px solid var(--garis)}
.adm-baris:last-of-type{border-bottom:0}
.adm-baris label{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  font-size:12.5px;font-weight:600;margin-bottom:6px}
.adm-baris code{font-size:10.5px;font-weight:400;color:var(--ink3);
  background:#f1f3f5;border-radius:3px;padding:1px 6px}
.adm-baris input[type=text],
.adm-baris textarea{width:100%;background:var(--putih);border:1px solid var(--garis2);
  border-radius:5px;padding:8px 11px;font-size:12.5px;color:var(--ink);outline:none;
  font-family:inherit;line-height:1.6}
.adm-baris input[type=text]:focus,
.adm-baris textarea:focus{border-color:var(--biru)}
.adm-baris input[type=file]{margin-top:7px;font-size:12px}
.adm-pratinjau{display:block;max-width:220px;max-height:70px;width:auto;
  border:1px solid var(--garis);border-radius:4px;padding:5px;background:#f8f9fa}

.adm-aksi{padding-top:14px;margin-top:6px;border-top:1px solid var(--garis)}
.adm-aksi button{background:var(--biru);border:0;color:#fff;border-radius:5px;
  padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.adm-aksi button:hover{background:var(--biru-gelap)}

@media(max-width:620px){
  .adm-atas .adm-wrap{height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
  .adm-menu{order:3;width:100%}
}

/* ==========================================================================
   Sela banner antar-section.
   Dua kolom sejajar, sampai lima baris; slot kosong tidak pernah dirender
   sehingga tidak menyisakan ruang apa pun.
   ========================================================================== */

.banner-sela{display:grid;grid-template-columns:repeat(2,minmax(0,360px));
  gap:8px;justify-content:center;margin:14px 0}
/* Tiap slot adalah kotak 4:1 tetap. Banner berukuran berapa pun dimuat
   di dalamnya dengan object-fit:contain, jadi proporsinya terjaga dan
   tidak pernah gepeng; yang bukan 4:1 hanya menyisakan ruang di tepi. */
.banner-slot{display:block;line-height:0;border-radius:4px;overflow:hidden;
  background:#eceef2;aspect-ratio:4 / 1}
.banner-slot img{display:block;width:100%;height:100%;object-fit:contain}
a.banner-slot:hover{outline:2px solid var(--biru);outline-offset:-2px}

/* Di halaman baca, selanya menempel pada jalur gambar. */
.lembar+.banner-sela,
.banner-sela+.lembar{margin-top:0}

@media(max-width:1020px){
  .banner-sela{grid-template-columns:minmax(0,360px)}
}

/* Logo yang diunggah lewat panel admin, dipakai bila ada. */
.merek-gambar{display:block;height:34px;width:auto;max-width:190px;object-fit:contain}
.bawah-gambar{display:block;line-height:0}
.bawah-gambar img{height:38px;width:auto;max-width:200px;object-fit:contain}
.bawah-catatan{font-size:11.5px;color:var(--ink3);text-align:center;max-width:560px}

/* Kolom kata sandi di halaman profil admin. */
.adm-baris input[type=password]{width:100%;max-width:340px;background:var(--putih);
  border:1px solid var(--garis2);border-radius:5px;padding:8px 11px;
  font-size:12.5px;color:var(--ink);outline:none;font-family:inherit}
.adm-baris input[type=password]:focus{border-color:var(--biru)}
.adm-keluar a{color:var(--ink3)}
.adm-keluar a:hover{color:var(--biru)}

/* Bilah pengumuman (diatur di panel admin) */
.pengumuman{background:#fff6d6;border-bottom:1px solid #f1df9a;font-size:12.5px;color:#6b5300}
.pengumuman .wrap{padding-top:8px;padding-bottom:8px;text-align:center}
.pengumuman a{color:#6b5300;font-weight:600;text-decoration:underline}

/* Kontak dan media sosial di footer */
.bawah-sosial{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:10px;font-size:12px}
.bawah-sosial a{opacity:.85}
.bawah-sosial a:hover{opacity:1;text-decoration:underline}