/*
Theme Name: LK21
Theme URI: https://lk21.zeydhan.me
Author: Zeydhan
Description: Tema streaming film ala LK21/Dunia21 — dark, aksen magenta, grid poster responsif, player multi-server, SEO-ready (schema Movie + Yoast).
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: lk21
*/

:root{
  --bg:#0f0f13; --bg2:#16161d; --card:#1b1b24; --line:#2a2a36;
  --text:#e8e8ee; --muted:#9a9aac;
  --pink:#e5148c; --pink2:#ff2d9c; --gold:#ffb400; --green:#16a34a;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;-webkit-tap-highlight-color:transparent}
a{color:var(--pink2);text-decoration:none}
a:hover{color:#fff}
img{max-width:100%;height:auto}
h1,h2,h3{letter-spacing:-.01em}

/* ===== header ===== */
.site-head{position:sticky;top:0;z-index:60;background:#111;border-bottom:2px solid var(--pink)}
.head-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 14px}
.logo{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:800;color:#fff;white-space:nowrap}
.logo b{color:var(--pink2)}
.logo .lg-ic{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--pink);border-radius:8px;font-size:18px}
.searchbar{flex:1;display:flex;max-width:560px}
.searchbar input{flex:1;min-width:0;background:#fff;border:none;border-radius:6px 0 0 6px;padding:9px 13px;font-size:14px;color:#111}
.searchbar button{background:var(--pink);border:none;border-radius:0 6px 6px 0;color:#fff;padding:0 16px;font-size:16px;cursor:pointer}
.head-links{display:flex;gap:14px;font-size:13.5px;font-weight:600}
.head-links a{color:#ddd}
.head-links a:hover{color:var(--pink2)}

/* nav genre chips */
.gnav{background:var(--bg2);border-bottom:1px solid var(--line)}
.gnav-in{max-width:1200px;margin:0 auto;display:flex;gap:8px;overflow-x:auto;padding:9px 14px;scrollbar-width:none}
.gnav-in::-webkit-scrollbar{display:none}
.gnav a{flex:none;font-size:12.5px;font-weight:600;color:#cfcfdd;background:#23232e;border:1px solid var(--line);border-radius:18px;padding:5px 13px}
.gnav a:hover,.gnav a.on{background:var(--pink);border-color:var(--pink);color:#fff}

/* ===== layout ===== */
.wrap{max-width:1200px;margin:0 auto;padding:18px 14px 40px}
.sec-head{display:flex;align-items:center;gap:10px;margin:6px 0 14px}
.sec-head h1,.sec-head h2{margin:0;font-size:20px;border-left:4px solid var(--pink);padding-left:10px}
.sec-head .more{margin-left:auto;font-size:12px;font-weight:700;background:var(--pink);color:#fff;border-radius:4px;padding:4px 10px}

/* ===== movie grid ===== */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.mcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:transform .15s,border-color .15s;display:flex;flex-direction:column}
.mcard:hover{transform:translateY(-3px);border-color:var(--pink)}
.mposter{position:relative;aspect-ratio:2/3;background:#000;display:block;overflow:hidden}
.mposter img{width:100%;height:100%;object-fit:cover;display:block}
.mposter .noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:40px;color:#333}
.badge-q{position:absolute;top:8px;right:8px;background:var(--green);color:#fff;font-size:11px;font-weight:800;border-radius:4px;padding:2px 7px;letter-spacing:.03em}
.badge-r{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.75);color:var(--gold);font-size:11.5px;font-weight:700;border-radius:4px;padding:2px 7px}
.mmeta-strip{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;background:linear-gradient(transparent,rgba(0,0,0,.9));color:#eee;font-size:11.5px;font-weight:600;padding:16px 9px 6px}
.mbody{padding:9px 11px 11px}
.mgenre{font-size:10.8px;color:var(--muted);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtitle{margin:2px 0 0;font-size:13.5px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mtitle a{color:var(--text)}
.mtitle a:hover{color:var(--pink2)}

/* pagination */
.pagi{display:flex;gap:6px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.pagi .page-numbers{background:var(--card);border:1px solid var(--line);color:#ccc;border-radius:6px;padding:7px 13px;font-size:13px;font-weight:600}
.pagi .page-numbers.current,.pagi .page-numbers:hover{background:var(--pink);border-color:var(--pink);color:#fff}

/* ===== single ===== */
.player-zone{background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.player-frame{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:#000}
.player-frame iframe,.player-frame video{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-poster{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.45)}
.player-cta{position:relative;z-index:2;text-align:center;color:#eee;padding:20px}
.player-cta .play{width:74px;height:74px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;background:rgba(229,20,140,.9);border-radius:50%;font-size:30px;color:#fff}
.player-cta p{margin:0;font-size:13.5px;color:#ddd}
.server-bar{display:flex;gap:8px;align-items:center;background:#15151c;padding:10px 14px;border-top:1px solid var(--line);overflow-x:auto}
.server-bar .lbl{font-size:12px;color:var(--muted);font-weight:700;white-space:nowrap}
.server-bar button{flex:none;background:#23232e;border:1px solid var(--line);color:#ddd;border-radius:6px;padding:6px 14px;font-size:12.5px;font-weight:600;cursor:pointer}
.server-bar button.on,.server-bar button:hover{background:var(--pink);border-color:var(--pink);color:#fff}

.movie-head{margin:18px 0 4px}
.movie-head h1{margin:0 0 8px;font-size:22px;line-height:1.3}
.movie-stats{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:14px;font-weight:700;color:#ddd}
.movie-stats .rate{color:var(--pink2);font-size:16px}
.movie-stats .sep{color:#444}
.tag-chips{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.tag-chips a{font-size:12px;font-weight:600;background:var(--card);border:1px solid var(--line);color:#f0a8d3;border-radius:5px;padding:4px 11px}
.tag-chips a:hover{background:var(--pink);color:#fff;border-color:var(--pink)}
.act-btns{display:flex;gap:9px;margin:14px 0}
.act-btns a,.act-btns button{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:7px;padding:10px 18px;font-size:13.5px;font-weight:700;cursor:pointer}
.btn-dl{background:var(--pink);color:#fff}
.btn-gray{background:#3a3a46;color:#fff}
.synopsis{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:14.5px;line-height:1.75;color:#d6d6e0}
.synopsis h2{font-size:15px;margin:0 0 8px;color:#fff}
.movie-info-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:14px;font-size:13.5px}
.movie-info-table td{padding:9px 15px;border-bottom:1px solid #23232e;vertical-align:top}
.movie-info-table tr:last-child td{border-bottom:none}
.movie-info-table td:first-child{color:var(--muted);width:130px;font-weight:600}

/* related */
.related{margin-top:28px}

/* ===== comments ===== */
.comments-area{margin-top:30px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
.comments-area h2,.comments-area h3{font-size:16px;margin:0 0 14px}
.comment-list{list-style:none;margin:0;padding:0}
.comment-list .comment{border-top:1px solid #23232e;padding:13px 0}
.comment-list .children{list-style:none;padding-left:24px}
.comment-meta{display:flex;gap:10px;align-items:center;margin-bottom:4px}
.comment-meta img{border-radius:50%}
.comment-meta b{font-size:13.5px}
.comment-meta time{font-size:11.5px;color:var(--muted)}
.comment-body-text{font-size:14px;color:#d8d8e2}
.comment-body-text p{margin:4px 0}
.comment-reply-link{font-size:12px;font-weight:700;color:var(--pink2)}
.comment-form label{display:block;font-size:12.5px;color:var(--muted);margin:10px 0 4px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;background:#101018;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:10px 12px;font-size:14px}
.comment-form textarea{min-height:110px}
.comment-form .submit{margin-top:12px;background:var(--pink);border:none;color:#fff;font-weight:700;border-radius:8px;padding:11px 22px;font-size:14px;cursor:pointer}
.comment-notes{font-size:12px;color:var(--muted)}
.comment-awaiting-moderation{font-size:12px;color:var(--gold)}

/* warning box ala lk21 */
.warn-box{background:#fff8e6;border-left:5px solid var(--gold);color:#5c4a00;border-radius:8px;padding:12px 15px;font-size:13.5px;margin:16px 0}
.warn-box b{color:#8a2be2}

/* ===== footer ===== */
.site-foot{background:#111;border-top:2px solid var(--pink);margin-top:30px}
.foot-in{max-width:1200px;margin:0 auto;padding:22px 14px;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.8}
.foot-in a{color:#ccc}

/* archive title */
.arch-desc{font-size:13px;color:var(--muted);margin:-6px 0 14px}

/* ===== responsive ===== */
@media(max-width:760px){
  .head-in{flex-wrap:wrap;gap:8px;padding:9px 10px}
  .logo{font-size:19px}
  .logo .lg-ic{width:29px;height:29px;font-size:15px}
  .searchbar{order:3;flex-basis:100%;max-width:none}
  .head-links{margin-left:auto;gap:10px;font-size:12.5px}
  .wrap{padding:13px 10px 34px}
  .mgrid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:9px}
  .mbody{padding:7px 8px 9px}
  .mtitle{font-size:12px}
  .mgenre{font-size:10px}
  .badge-q{font-size:10px;top:6px;right:6px}
  .badge-r{font-size:10.5px;top:6px;left:6px}
  .movie-head h1{font-size:18px}
  .sec-head h1,.sec-head h2{font-size:17px}
  .act-btns a,.act-btns button{padding:9px 13px;font-size:12.5px}
}

/* ---- Halaman Semua Kategori ---- */
.cat-sec-title{font-size:19px;margin:26px 0 12px;padding-left:10px;border-left:4px solid #e5148c}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.cat-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:96px;padding:12px;border-radius:12px;background:#1a1e2b center/cover no-repeat;color:#fff;text-decoration:none;border:1px solid #262c3d;transition:transform .12s,border-color .12s;overflow:hidden}
.cat-card:hover{transform:translateY(-3px);border-color:#e5148c}
.cat-card.cat-sm{min-height:64px}
.cat-name{font-weight:700;font-size:15px}
.cat-count{font-size:12px;color:#b9c0d0;margin-top:2px}