/* =============================================================
   lk21new — lembar gaya tema.
   Palet & bentuk diambil dari render situs target (bukan tebakan):
   dasar hitam, aksen merah-magenta #e50a4a, bintang kuning #fcbb23,
   tombol sekunder hijau #5cb85c, grid 3 kolom di ponsel.
   ============================================================= */

:root {
    --lkn-bg:     #0b0b0b;
    --lkn-panel:  #161616;
    --lkn-panel2: #1e1e1e;
    --lkn-garis:  #2a2a2a;
    --lkn-merah:  #e50a4a;
    --lkn-merah2: #b80839;
    --lkn-hijau:  #5cb85c;
    --lkn-kuning: #fcbb23;
    --lkn-teks:   #ffffff;
    --lkn-redup:  #9a9a9a;
    --lkn-lebar:  1100px;
}

* { box-sizing: border-box; }

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

body.lkn-body {
    margin: 0;
    background: var(--lkn-bg);
    color: var(--lkn-teks);
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    /* ⚠️ jarak bawah TIDAK ditaruh di body: global-styles WordPress dicetak
       sesudah CSS tema dan selalu menang untuk body{padding-*}. */
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--lkn-merah); }

.lkn-wrap, .lkn-main { max-width: var(--lkn-lebar); margin: 0 auto; padding: 0 10px; }

/* ------------------------------------------------------------- kepala */

.lkn-hd { background: #000; border-bottom: 2px solid var(--lkn-merah); }

.lkn-hd-in {
    max-width: var(--lkn-lebar);
    margin: 0 auto;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    /* kotak cari WAJIB sebaris dengan logo & tombol menu, jangan turun sendiri */
    flex-wrap: nowrap;
}

/* 🔴 Wordmark BOLEH MENYUSUT (flex: 0 1 auto + min-width:0).
   Merek situs ini dua kata ("LK21 Layarkaca21"), jauh lebih panjang daripada
   merek satu kata. Kalau logonya dikunci `flex: 0 0 auto`, bilah atas jadi lebih
   lebar dari layar di ponsel 320–360 px, dokumen tergeser, dan latar body terlihat
   sebagai PITA PUTIH di tepi kanan — gejala yang sudah pernah menggigit di lk21.
   Ukuran hurufnya juga diturunkan bertahap, bukan dibiarkan memaksa. */
.lkn-logo { flex: 0 1 auto; min-width: 0; display: block; line-height: 1; }
.lkn-logo-t {
    display: block;
    font-size: 16px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Di bawah 360 px wordmark dua kata memakan 192 px dari 320 px, menyisakan kotak
   cari cuma ±60 px — masih muat, tapi tak bisa dipakai. Hurufnya dikecilkan supaya
   kotak cari tetap dapat jatah yang wajar. */
@media (max-width: 359px) { .lkn-logo-t { font-size: 13px; letter-spacing: -0.7px; } }
@media (min-width: 400px) { .lkn-logo-t { font-size: 18px; } }
@media (min-width: 600px) { .lkn-logo-t { font-size: 22px; } }
.lkn-logo-s {
    display: block;
    font-size: 8px;
    letter-spacing: 3px;
    color: var(--lkn-redup);
    margin-top: 2px;
}

.lkn-cari { position: relative; flex: 1 1 auto; min-width: 0; }
.lkn-cari-f { display: flex; align-items: stretch; }
.lkn-cari-in {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--lkn-panel2);
    border: 1px solid var(--lkn-garis);
    border-right: 0;
    color: #fff;
    padding: 7px 10px;
    font-size: 13px;
    border-radius: 3px 0 0 3px;
    outline: none;
}
.lkn-cari-in::placeholder { color: #6b6b6b; }
.lkn-cari-in:focus { border-color: var(--lkn-merah); }
.lkn-cari-b {
    flex: 0 0 auto;
    background: var(--lkn-merah);
    border: 0;
    color: #fff;
    padding: 0 11px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 0 3px 3px 0;
}

.lkn-burger {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
}

.lkn-nav {
    background: var(--lkn-panel);
    border-top: 1px solid var(--lkn-garis);
    display: flex;
    flex-wrap: wrap;
}
.lkn-nav[hidden] { display: none; }
.lkn-nav-a {
    flex: 1 0 33.333%;
    padding: 11px 8px;
    font-size: 13px;
    text-align: center;
    border-bottom: 1px solid var(--lkn-garis);
    border-right: 1px solid var(--lkn-garis);
}
.lkn-nav-a:hover { background: var(--lkn-merah); color: #fff; }

/* saran pencarian AJAX */
.lkn-saran {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--lkn-panel);
    border: 1px solid var(--lkn-garis);
    border-top: 0;
    max-height: 68vh;
    overflow-y: auto;
}
.lkn-saran[hidden] { display: none; }
.lkn-saran-a {
    display: flex;
    gap: 8px;
    padding: 7px 8px;
    border-bottom: 1px solid var(--lkn-garis);
    align-items: center;
}
.lkn-saran-a:hover, .lkn-saran-a.lkn-saran-pilih { background: var(--lkn-merah2); }
.lkn-saran-a img { width: 34px; height: 51px; object-fit: cover; flex: 0 0 auto; border-radius: 2px; }
.lkn-saran-t { flex: 1 1 auto; min-width: 0; }
.lkn-saran-j { font-size: 13px; font-weight: 600; display: block; }
.lkn-saran-m { font-size: 11px; color: var(--lkn-redup); display: block; }
.lkn-saran-b {
    flex: 0 0 auto;
    font-size: 10px;
    background: var(--lkn-merah);
    color: #fff;
    padding: 2px 6px;
    border-radius: 2px;
}
.lkn-saran-semua { display: block; padding: 9px; text-align: center; font-size: 12px; color: var(--lkn-kuning); }

/* --------------------------------------------------------- bagi & notis */

.lkn-share {
    max-width: var(--lkn-lebar);
    margin: 8px auto 0;
    padding: 0 10px;
    display: flex;
    gap: 4px;
}
.lkn-sh {
    flex: 0 0 auto;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 2px;
}
.lkn-sh-fb { background: #3b5998; }
.lkn-sh-tw { background: #55acee; }
.lkn-sh-wa { background: #25d366; }
.lkn-sh-tg { background: #2ca5e0; }

.lkn-notis {
    max-width: var(--lkn-lebar);
    margin: 8px auto;
    padding: 7px 10px;
    background: #d7f5d4;
    color: #1d5b1a;
    font-size: 12px;
    text-align: center;
    border-radius: 2px;
}

/* ------------------------------------------------------------ bilah seksi */

.lkn-bar {
    background: var(--lkn-merah);
    margin: 14px 0 0;
    padding: 6px 10px;
    border-radius: 2px;
}
.lkn-bar-jd {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
}
.lkn-bar-aksi { margin: 6px 0 0; }
.lkn-more {
    display: inline-block;
    background: var(--lkn-hijau);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 3px 9px;
    border-radius: 2px;
}
.lkn-more:hover { background: #4a9c4a; color: #fff; }

.lkn-seksi { margin-bottom: 6px; }

/* ------------------------------------------------------------------ grid */

.lkn-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 8px 0 14px;
}

.lkn-k { display: block; }
.lkn-k-pos { position: relative; background: var(--lkn-panel); border-radius: 2px; overflow: hidden; }
.lkn-k-pos img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.lkn-k-jd {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 16px 5px 5px;
    font-size: 11px;
    line-height: 1.25;
    color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,.92) 40%, rgba(0,0,0,0));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* badge kartu — posisinya ditiru dari target */
.lkn-bd {
    position: absolute;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 2px;
    line-height: 1.5;
}
.lkn-bd-rt { top: 4px; left: 4px; background: rgba(0,0,0,.75); color: var(--lkn-kuning); }
.lkn-bd-hd { top: 4px; right: 4px; background: var(--lkn-merah); color: #fff; }
.lkn-bd-ep { top: 4px; right: 4px; background: var(--lkn-hijau); color: #fff; }
.lkn-bd-dr { bottom: 4px; right: 4px; background: rgba(0,0,0,.75); color: #fff; }

/* kartu gaya B — info di bawah poster */
.lkn-kb { background: var(--lkn-panel); border-radius: 2px; overflow: hidden; padding-bottom: 6px; }
.lkn-kb-pos { position: relative; display: block; }
.lkn-kb-pos img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.lkn-kb-jd {
    display: block;
    padding: 6px 6px 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--lkn-merah);
    line-height: 1.25;
}
.lkn-kb-gn { padding: 2px 6px 0; font-size: 10px; color: var(--lkn-redup); }
.lkn-kb-aksi { padding: 6px 6px 0; }
.lkn-pil-m { background: var(--lkn-merah); color: #fff; font-size: 10px; padding: 3px 10px; }

.lkn-kosong {
    background: var(--lkn-panel);
    border: 1px dashed var(--lkn-garis);
    padding: 14px;
    text-align: center;
    color: var(--lkn-redup);
    font-size: 13px;
    border-radius: 3px;
    margin: 10px 0;
}

/* ----------------------------------------------------------------- korsel */

.lkn-kor-bung { position: relative; margin: 8px 0 14px; }
.lkn-kor {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.lkn-kor::-webkit-scrollbar { display: none; }
.lkn-kor-it { position: relative; flex: 0 0 30%; max-width: 150px; }
.lkn-kor-it img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px; }
.lkn-kor-jd {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.2;
    color: #ddd;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lkn-kor-nav {
    position: absolute;
    top: 32%;
    z-index: 5;
    background: rgba(0,0,0,.65);
    border: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    width: 28px;
    height: 42px;
    cursor: pointer;
    border-radius: 2px;
}
.lkn-kor-kiri { left: 0; }
.lkn-kor-kanan { right: 0; }

/* ------------------------------------------------------------- remah roti */

.lkn-rm { font-size: 11px; color: var(--lkn-redup); padding: 9px 0 4px; }
.lkn-rm a { color: #cfcfcf; }
.lkn-rm a:hover { color: var(--lkn-merah); }
.lkn-rm-s { margin: 0 4px; }
.lkn-rm-k { color: var(--lkn-merah); }

/* ---------------------------------------------------------------- pemutar */

.lkn-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 3px solid var(--lkn-merah);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}
.lkn-player-f { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lkn-player-x {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--lkn-redup);
    font-size: 13px;
    text-align: center;
    padding: 12px;
}

.lkn-aksi { display: flex; background: var(--lkn-merah); border-radius: 0 0 3px 3px; }
.lkn-aksi-b {
    flex: 1 1 0;
    min-width: 0;
    background: transparent;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.25);
    color: #fff;
    font-size: 11px;
    padding: 7px 4px;
    cursor: pointer;
    text-align: center;
}
.lkn-aksi-b:last-child { border-right: 0; }
.lkn-aksi-b:hover { background: var(--lkn-merah2); color: #fff; }

.lkn-server { margin: 8px 0; }
.lkn-server-b {
    display: block;
    background: var(--lkn-merah);
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    padding: 9px;
    border-radius: 3px;
    margin-bottom: 5px;
}
.lkn-server-b:hover { background: var(--lkn-merah2); color: #fff; }

/* layar redup saat tombol "Lampu" ditekan */
body.lkn-gelap { background: #000; }
body.lkn-gelap .lkn-hd,
body.lkn-gelap .lkn-share,
body.lkn-gelap .lkn-notis,
body.lkn-gelap .lkn-ft,
body.lkn-gelap .lkn-seksi { opacity: .18; transition: opacity .2s; }

/* --------------------------------------------------------------- judul & info */

.lkn-h1 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    margin: 12px 0 4px;
}
.lkn-h1-film { color: var(--lkn-merah); }

.lkn-intro-p { color: var(--lkn-redup); font-size: 13px; margin: 0 0 10px; }
.lkn-intro { color: #c9c9c9; font-size: 13px; }
.lkn-kepala { padding-top: 6px; }

.lkn-rt { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.lkn-rt-b { color: var(--lkn-kuning); font-size: 14px; letter-spacing: 1px; }
.lkn-rt-t { font-size: 11px; color: var(--lkn-redup); }

.lkn-sin {
    background: var(--lkn-panel);
    border-left: 3px solid var(--lkn-merah);
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #d5d5d5;
    border-radius: 0 3px 3px 0;
    margin: 10px 0;
}

.lkn-info { margin: 10px 0; }
.lkn-info-r { font-size: 12.5px; padding: 3px 0; border-bottom: 1px dotted var(--lkn-garis); }
.lkn-info-l { color: var(--lkn-redup); }
.lkn-info-v { color: #e8e8e8; }
.lkn-info-v a { color: var(--lkn-merah); }

.lkn-detail { display: flex; gap: 12px; margin: 10px 0; align-items: flex-start; }
.lkn-detail-ps { flex: 0 0 120px; width: 120px; border-radius: 3px; }
.lkn-detail-in { flex: 1 1 auto; min-width: 0; }

/* -------------------------------------------------------------- episode */

.lkn-se { background: var(--lkn-panel); border-radius: 3px; margin: 8px 0; }
.lkn-se-jd {
    cursor: pointer;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    list-style: none;
}
.lkn-se-jd::-webkit-details-marker { display: none; }
.lkn-se-jd::before { content: "▸ "; color: var(--lkn-merah); }
.lkn-se[open] > .lkn-se-jd::before { content: "▾ "; }

.lkn-eps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 0 8px 10px;
}
.lkn-eps-a {
    background: var(--lkn-panel2);
    border: 1px solid var(--lkn-garis);
    border-radius: 2px;
    padding: 7px 4px;
    text-align: center;
    font-size: 11.5px;
}
.lkn-eps-a:hover { background: var(--lkn-merah); color: #fff; border-color: var(--lkn-merah); }
.lkn-eps-kini { background: var(--lkn-merah); color: #fff; border-color: var(--lkn-merah); }
.lkn-eps-n { display: block; }

.lkn-navep { display: flex; gap: 5px; align-items: center; margin: 8px 0; }
.lkn-navep-a {
    flex: 1 1 0;
    min-width: 0;
    background: var(--lkn-panel2);
    border: 1px solid var(--lkn-garis);
    border-radius: 2px;
    padding: 8px 6px;
    text-align: center;
    font-size: 11.5px;
}
.lkn-navep-a:hover { background: var(--lkn-merah); color: #fff; }
.lkn-navep-t { background: var(--lkn-merah); border-color: var(--lkn-merah); color: #fff; }

/* ---------------------------------------------------------------- filter */

.lkn-filter { display: grid; gap: 5px; margin: 8px 0 14px; }
.lkn-filter select,
.lkn-filter input[type="search"] {
    width: 100%;
    background: var(--lkn-panel2);
    border: 1px solid var(--lkn-garis);
    color: #ddd;
    padding: 8px 9px;
    font-size: 13px;
    border-radius: 2px;
    outline: none;
}
.lkn-filter select:focus,
.lkn-filter input[type="search"]:focus { border-color: var(--lkn-merah); }
.lkn-filter button {
    background: var(--lkn-merah);
    border: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 9px;
    border-radius: 2px;
    cursor: pointer;
}
.lkn-filter button:hover { background: var(--lkn-merah2); }

/* ------------------------------------------------------------- pil & blok */

.lkn-blok { margin: 14px 0; }
.lkn-blok-jd {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 8px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--lkn-merah);
}
.lkn-pils { display: flex; flex-wrap: wrap; gap: 4px; }
.lkn-pils-besar { margin: 10px 0 16px; }
.lkn-pil {
    display: inline-block;
    background: var(--lkn-merah);
    color: #fff;
    font-size: 11px;
    padding: 4px 9px;
    border-radius: 2px;
}
.lkn-pil:hover { background: var(--lkn-merah2); color: #fff; }
.lkn-pil-n { opacity: .7; font-size: 10px; }

/* ------------------------------------------------------------- paginasi */

.lkn-pagi { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 14px 0; }
.lkn-pg {
    min-width: 32px;
    text-align: center;
    background: var(--lkn-panel2);
    border: 1px solid var(--lkn-garis);
    padding: 6px 8px;
    font-size: 13px;
    border-radius: 2px;
}
.lkn-pg:hover { background: var(--lkn-merah); color: #fff; }
.lkn-pg-kini { background: var(--lkn-merah); border-color: var(--lkn-merah); color: #fff; }

/* ------------------------------------------------------------------ kaki */

.lkn-ft {
    background: #000;
    border-top: 2px solid var(--lkn-merah);
    margin-top: 20px;
    /* jarak bawah ditaruh DI SINI, bukan di body */
    padding-bottom: 20px;
}
.lkn-ft-in { max-width: var(--lkn-lebar); margin: 0 auto; padding: 14px 10px 0; }
.lkn-ft-ket { font-size: 11.5px; color: var(--lkn-redup); line-height: 1.6; margin: 14px 0 6px; }
.lkn-ft-cr { font-size: 11px; color: #6e6e6e; margin: 0; }

.lkn-halaman { font-size: 14px; line-height: 1.7; }
.lkn-halaman h2 { font-size: 16px; margin: 16px 0 6px; }

/* ------------------------------------------------------------- layar lebar */

@media (min-width: 700px) {
    .lkn-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
    .lkn-eps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lkn-kor-it { flex: 0 0 16%; }
    .lkn-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lkn-filter button { grid-column: span 3; }
    .lkn-nav-a { flex: 0 0 auto; }
    .lkn-h1 { font-size: 25px; }
    .lkn-k-jd { font-size: 12px; }
    .lkn-detail-ps { flex: 0 0 180px; width: 180px; }
}

@media (min-width: 1000px) {
    .lkn-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ================== KOMENTAR (kelas `ai-*` dari comments.php) =====================
   🔴 comments.php memakai prefix `ai-` yang TETAP di semua tema, sedangkan CSS tiap
   tema ditulis memakai prefixnya sendiri (gm-/sh-/na-/ab-). Akibatnya bagian komentar
   berkali-kali lahir TANPA gaya sama sekali.
   Lembar ini sengaja NETRAL TEMA: memakai rgba/currentColor, bukan variabel tema,
   supaya bisa ditempel apa adanya ke tema mana pun — terang maupun gelap.        */

.ai-comments{margin:16px 0}
.ai-panel{background:rgba(127,127,127,.08);border:1px solid rgba(127,127,127,.22);
  border-radius:8px;padding:14px;margin:0 0 14px}
.ai-head{font-size:16px;font-weight:800;margin:0 0 12px;
  padding:0 0 10px;border-bottom:1px solid rgba(127,127,127,.22)}
.ai-head .dot{opacity:.55;margin:0 6px}

/* daftar komentar */
.ai-clist{list-style:none;margin:0;padding:0}
.ai-clist li{padding:12px 0;border-bottom:1px solid rgba(127,127,127,.18)}
.ai-clist li:last-child{border-bottom:0}
.ai-clist .comment-author,.ai-clist .fn{font-weight:700;font-size:14px}
.ai-clist .comment-meta,.ai-clist time{display:block;font-size:12px;opacity:.65;margin:2px 0 6px}
.ai-clist p{margin:0 0 8px;font-size:14px;line-height:1.6}
.ai-clist .children{list-style:none;margin:10px 0 0 16px;padding:0 0 0 12px;
  border-left:2px solid rgba(127,127,127,.25)}

/* tombol balas */
.ai-creply a,.comment-reply-link{display:inline-block;font-size:12px;font-weight:600;
  padding:4px 10px;border:1px solid rgba(127,127,127,.35);border-radius:999px;opacity:.9}
.ai-creply a:hover,.comment-reply-link:hover{opacity:1;border-color:currentColor}

/* formulir */
.ai-cnote{font-size:12px;opacity:.7;margin:0 0 10px}
.comment-form{margin:0}
.comment-form p{margin:0 0 10px}
.comment-form label{display:block;font-size:12.5px;font-weight:600;margin:0 0 4px;opacity:.85}
.comment-form input[type=text],.comment-form input[type=email],
.comment-form input[type=url],.comment-form textarea{
  width:100%;max-width:100%;box-sizing:border-box;
  background:rgba(127,127,127,.10);border:1px solid rgba(127,127,127,.28);
  border-radius:6px;padding:9px 11px;font:inherit;font-size:14px;color:inherit;outline:none}
.comment-form input:focus,.comment-form textarea:focus{border-color:currentColor}
.comment-form textarea{min-height:110px;resize:vertical}
.comment-form .submit,.comment-form input[type=submit]{
  background:currentColor;border:0;border-radius:6px;padding:10px 20px;
  font-weight:700;font-size:14px;cursor:pointer;
  /* teks tombol dibalik supaya kontras di tema terang MAUPUN gelap */
  color:transparent;text-shadow:0 0 0 rgba(0,0,0,.85)}
.comment-form .submit:hover{filter:brightness(.92)}

/* navigasi halaman komentar */
.ai-pagi{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:12px 0 0}
.ai-pagi a,.ai-pagi span{padding:6px 12px;border-radius:6px;font-size:13px;
  border:1px solid rgba(127,127,127,.3)}
.ai-pagi .current{border-color:currentColor;font-weight:700}

/* 🔴 HONEYPOT — WAJIB tersembunyi. Kalau terlihat, pengunjung asli ikut mengisinya
   dan komentarnya ditolak diam-diam. Pernah kejadian. */
.ai-hp{position:absolute!important;left:-9999px!important;width:1px!important;
  height:1px!important;overflow:hidden!important}

@media(max-width:520px){
  .ai-panel{padding:12px}
  .ai-clist .children{margin-left:8px;padding-left:10px}
}

/* 🔴 TOMBOL KIRIM — kelas dari comments.php: comment_form(['class_submit'=>'ai-cbtn']).
   Ditemukan 24 Agu 2026 (animesail): lembar ini hanya menata `.comment-form .submit`,
   padahal `class_submit` MENGGANTI kelas itu jadi `ai-cbtn`. Tiga tema terbaru
   (sail/kura/awsu) karena itu punya tombol kirim polos. Aturan di bawah menutup lubangnya. */
.ai-cbtn{display:inline-flex;align-items:center;justify-content:center;
  background:currentColor;border:0;border-radius:6px;padding:10px 20px;
  font-weight:700;font-size:14px;cursor:pointer;
  color:transparent;text-shadow:0 0 0 rgba(0,0,0,.85)}
.ai-cbtn:hover{filter:brightness(.92)}

/* ================== KOMENTAR (kelas `ai-*` dari comments.php) =====================
   🔴 comments.php memakai prefix `ai-` yang TETAP di semua tema, sedangkan CSS tiap
   tema ditulis memakai prefixnya sendiri (gm-/sh-/na-/ab-). Akibatnya bagian komentar
   berkali-kali lahir TANPA gaya sama sekali.
   Lembar ini sengaja NETRAL TEMA: memakai rgba/currentColor, bukan variabel tema,
   supaya bisa ditempel apa adanya ke tema mana pun — terang maupun gelap.        */

.ai-comments{margin:16px 0}
.ai-panel{background:rgba(127,127,127,.08);border:1px solid rgba(127,127,127,.22);
  border-radius:8px;padding:14px;margin:0 0 14px}
.ai-head{font-size:16px;font-weight:800;margin:0 0 12px;
  padding:0 0 10px;border-bottom:1px solid rgba(127,127,127,.22)}
.ai-head .dot{opacity:.55;margin:0 6px}

/* daftar komentar */
.ai-clist{list-style:none;margin:0;padding:0}
.ai-clist li{padding:12px 0;border-bottom:1px solid rgba(127,127,127,.18)}
.ai-clist li:last-child{border-bottom:0}
.ai-clist .comment-author,.ai-clist .fn{font-weight:700;font-size:14px}
.ai-clist .comment-meta,.ai-clist time{display:block;font-size:12px;opacity:.65;margin:2px 0 6px}
.ai-clist p{margin:0 0 8px;font-size:14px;line-height:1.6}
.ai-clist .children{list-style:none;margin:10px 0 0 16px;padding:0 0 0 12px;
  border-left:2px solid rgba(127,127,127,.25)}

/* tombol balas */
.ai-creply a,.comment-reply-link{display:inline-block;font-size:12px;font-weight:600;
  padding:4px 10px;border:1px solid rgba(127,127,127,.35);border-radius:999px;opacity:.9}
.ai-creply a:hover,.comment-reply-link:hover{opacity:1;border-color:currentColor}

/* formulir */
.ai-cnote{font-size:12px;opacity:.7;margin:0 0 10px}
.comment-form{margin:0}
.comment-form p{margin:0 0 10px}
.comment-form label{display:block;font-size:12.5px;font-weight:600;margin:0 0 4px;opacity:.85}
.comment-form input[type=text],.comment-form input[type=email],
.comment-form input[type=url],.comment-form textarea{
  width:100%;max-width:100%;box-sizing:border-box;
  background:rgba(127,127,127,.10);border:1px solid rgba(127,127,127,.28);
  border-radius:6px;padding:9px 11px;font:inherit;font-size:14px;color:inherit;outline:none}
.comment-form input:focus,.comment-form textarea:focus{border-color:currentColor}
.comment-form textarea{min-height:110px;resize:vertical}
.comment-form .submit,.comment-form input[type=submit]{
  background:currentColor;border:0;border-radius:6px;padding:10px 20px;
  font-weight:700;font-size:14px;cursor:pointer;
  /* teks tombol dibalik supaya kontras di tema terang MAUPUN gelap */
  color:transparent;text-shadow:0 0 0 rgba(0,0,0,.85)}
.comment-form .submit:hover{filter:brightness(.92)}

/* navigasi halaman komentar */
.ai-pagi{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:12px 0 0}
.ai-pagi a,.ai-pagi span{padding:6px 12px;border-radius:6px;font-size:13px;
  border:1px solid rgba(127,127,127,.3)}
.ai-pagi .current{border-color:currentColor;font-weight:700}

/* 🔴 HONEYPOT — WAJIB tersembunyi. Kalau terlihat, pengunjung asli ikut mengisinya
   dan komentarnya ditolak diam-diam. Pernah kejadian. */
.ai-hp{position:absolute!important;left:-9999px!important;width:1px!important;
  height:1px!important;overflow:hidden!important}

@media(max-width:520px){
  .ai-panel{padding:12px}
  .ai-clist .children{margin-left:8px;padding-left:10px}
}

/* 🔴 TOMBOL KIRIM — kelas dari comments.php: comment_form(['class_submit'=>'ai-cbtn']).
   Ditemukan 24 Agu 2026 (animesail): lembar ini hanya menata `.comment-form .submit`,
   padahal `class_submit` MENGGANTI kelas itu jadi `ai-cbtn`. Tiga tema terbaru
   (sail/kura/awsu) karena itu punya tombol kirim polos. Aturan di bawah menutup lubangnya. */
.ai-cbtn{display:inline-flex;align-items:center;justify-content:center;
  background:currentColor;border:0;border-radius:6px;padding:10px 20px;
  font-weight:700;font-size:14px;cursor:pointer;
  color:transparent;text-shadow:0 0 0 rgba(0,0,0,.85)}
.ai-cbtn:hover{filter:brightness(.92)}

/* .ai-cform: kelas ini dikirim lewat comment_form(['class_form' => …]),
   bukan ditulis sebagai atribut di comments.php — gampang terlewat saat audit. */
.ai-cform { margin: 0; }
.ai-cform p { margin: 0 0 9px; }
.ai-cform label { display: block; font-size: 12px; margin-bottom: 3px; color: rgba(255,255,255,.75); }
.ai-cform input[type="text"],
.ai-cform input[type="email"],
.ai-cform input[type="url"],
.ai-cform textarea {
    width: 100%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.16);
    color: currentColor;
    padding: 8px 9px;
    font: inherit;
    font-size: 13px;
    border-radius: 3px;
    outline: none;
}
.ai-cform input:focus, .ai-cform textarea:focus { border-color: #e50a4a; }

/* penunjuk halaman + elipsis paginasi (gaya acuan yang dikirim Master 28 Agu 2026) */
.lkn-hal { text-align: center; font-size: 13px; color: #9aa3b2; margin: 16px 0 8px; }
.lkn-sela { background: none; border: 0; cursor: default; pointer-events: none; }
.lkn-sela:hover { background: none; color: inherit; }