/* Listing page CSS (genre/status/country/type/tag/author).
   PERF: diekstrak dari inline <style> ~10KB genre.php (dulu uncacheable, dikirim tiap klik chip)
   → file eksternal cacheable. Enqueue guard di cores/scripts.php (query-var listing). */
html{font:400 .9375rem Open Sans,sans-serif;line-height:1.5}body{padding:0;margin:0;background:#f2f3f4}header a{color:#fff}.head-container{width:100%;max-width:1300px;margin:0 auto;position:relative}a{text-decoration:none}.clear{clear:both}.m-title h2{color:#fff}.head-r{width:calc(100% - 161px);box-sizing:border-box;padding:0 15px;float:right}.s{display:inline-block;width:20px;height:30px;background:url("https://www.mtlnovel.net/themes/mtlnovel/images/s.svg") 0 6px no-repeat;background-size:20px;position:absolute;top:50%}#s-form{position:relative}.s-input:active{border:none}input:focus{outline:none}svg{width:16px;height:16px;fill:currentColor}.nav{text-align:right}::placeholder{color:#fff}:-ms-input-placeholder{color:#fff}::-ms-input-placeholder{color:#fff}.container-alt{display:none}.screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;width:1px}button.hamburger,button.s-alt{align-self:center;border:0;cursor:pointer;display:block;height:36px;margin:2px 10px 0 0;padding:0;width:36px;background-size:32px;z-index:30;margin-right:12px 10px 0 0;border-radius:18px;overflow:hidden}button.hamburger{float:left;margin-left:6px}button.s-alt{background:url("https://www.mtlnovel.net/themes/mtlnovel/images/s.svg") no-repeat center/30px 30px transparent;float:right;margin-left:10px}a.m-title{display:block;width:calc(100% - 80px);padding-left:10px}a.m-title h2{margin:0;line-height:40px}.site-:root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .no-padding--important{padding:0}.site-footer .container{padding:1.5em}.container{max-width:1090px}.container{max-width:1020px;margin:0 auto}a{color:var(--dn-brand);text-decoration:none;-webkit-transition:all .35s ease;-o-transition:all .35s ease;transition:all .35s ease}[class*=" col--"],[class^=col--]{float:left;margin-bottom:0;margin-left:3%}.copyright a{color:#333;padding:0 5px}main.container{margin:96px auto 16px;min-height:300px;width:100%;max-width:var(--dn-page-w);box-sizing:border-box}article{width:100%;max-width:var(--dn-content-w);box-sizing:border-box;float:left;margin-right:18px}.sidebar-container{width:100%;max-width:var(--dn-sidebar-w);float:right;box-sizing:border-box}/* .m-card+.box -> dn-design.css (Fase 2) */.w-0{width:0%}.w-5{width:5%}.w-10{width:10%}.w-15{width:15%}.w-20{width:20%}.w-25{width:25%}.w-30{width:30%}.w-35{width:35%}.w-40{width:40%}.w-45{width:45%}.w-50{width:50%}.w-55{width:55%}.w-60{width:60%}.w-65{width:65%}.w-70{width:70%}.w-75{width:75%}.w-80{width:80%}.w-85{width:85%}.w-90{width:90%}.w-95{width:95%}.w-100{width:100%}article.post{position:relative}.post-content{color:#333;font-size:16px;line-height:26px;clear:both;position:relative}.post-content .caption{line-height:1.5}#pagination{margin:12px 0 8px;width:100%;padding:0 10px;box-sizing:border-box;text-align:center;white-space:normal;clear:both}#pagination a:hover,#pagination span,span.current{border:1px solid var(--dn-brand);background:var(--dn-brand);padding:2px 6px;color:#fff;margin:1px;font-size:14px;display:inline-block}#pagination a{border:1px solid var(--dn-brand);padding:2px 6px;color:var(--dn-brand);margin:1px;white-space:nowrap;font-size:14px;display:inline-block;width:auto;background:none;border-radius:0}amp-sidebar .close-button{background:url("../images/cc.svg") no-repeat center/18px transparent;border:0;height:58px;position:absolute;right:13px;top:0;width:68px;cursor:pointer}.ava{display:block;width:80px;height:80px;border-radius:80px;overflow:hidden}.cp{padding:8px 0 12px;border-bottom:1px solid #dfdfdf}.cp b{float:left;font-size:15px;font-weight:normal;line-height:1.5}.cp a{float:right;text-transform:none}#search{position:fixed;top:0;overflow:hidden;height:auto;width:100%;box-sizing:border-box;background:var(--dn-brand);z-index:26;padding:5px 0;transition:all .8s ease;color:#fff}input.sf-alt{width:calc(100% - 60px);height:36px;background:var(--dn-brand);outline:none;color:#fff;border:1px solid #fff;padding:0 10px;box-sizing:border-box;border-radius:3px;margin-top:3px;font-size:1.1em}.back{background:var(--dn-brand);border:0;color:#fff;display:block;float:left;margin:6px 8px 0}.back svg{width:24px;height:24px}.main-title{margin:0 0 10px;border-bottom:1px solid #dfdfdf;padding-bottom:5px}amp-selector h2{margin:10px 0;font-size:16px}.box:hover{background:#fafafa}amp-img.list-img{height:152px;display:block;margin:0 auto 8px;max-width:120px}amp-img.list-img img{transition:transform .4s}amp-img.list-img img:hover{transform:scale(1.1)}a.list-title,strong.list-title{max-height:40px;display:block;overflow:hidden;color:#333;font-size:14px;font-weight:700}strong.list-title{margin-bottom:5px;height:40px}.next{color:#333;padding:5px 10px;border-radius:5px;display:block}.archive-pagination .next{width:auto;float:inherit;background:inherit;border-radius:0}.next{float:right;width:32px;background:url("https://www.mtlnovel.net/themes/mtlnovel/images/next-b.svg") 46px 8px no-repeat;padding-right:24px;background-size:20px}#lang-btn,#m-lang-btn{border:1px solid #fff;border-radius:3px;cursor:pointer}span#m-lang-btn{float:right;padding:4px 4px 4px 22px;margin-top:6px;background-position:4px -38px}.dashboard-icon{background:url("https://www.mtlnovel.net/themes/mtlnovel/images/dashboard.svg") 0 0 no-repeat}.plus-thick-icon{background:url("https://www.mtlnovel.net/themes/mtlnovel/images/plus-thick.svg") 0 0 no-repeat}.icon{padding-left:44px;background-size:24px;height:28px;display:block}.pma-icon{background:url("https://www.mtlnovel.net/themes/mtlnovel/images/pma.svg") -14px 0 no-repeat;background-size:40px}.top-ava .ava{width:36px;height:36px}.nav .top-ava{position:relative;margin-left:32px;cursor:pointer;display:inline}.nav .top-ava:hover{background:var(--dn-brand)}.top-ava .ava{position:absolute;top:-10px;right:-5px}.caption{color:#888}.no-sidebar{margin:0 auto;float:none}.no-top-border{padding-top:0;margin-top:0;border-top:none}.hidden{display:none}ul.lang-list{padding:6px 0 6px 10px}ul.lang-list li{list-style-type:none;padding:10px 0 10px 24px}.lang-icon{padding-left:28px;background:url("https://www.mtlnovel.net/themes/mtlnovel/images/flags.png");background-repeat:no-repeat;background-size:14px;display:inline-block;height:18px}.es{background-position:0 0}.fr{background-position:0 -63px}.id{background-position:0 -21px}.en{background-position:0 -41px}@keyframes placeholder{0%{background-position:-468px 0}to{background-position:468px 0}}.nav span.lang-icon.en{height:auto;background-position:5px -51px;background-size:18px;cursor:pointer;padding-left:28px}.nav span.lang-icon.en:hover{background:#fff url("https://www.mtlnovel.net/themes/mtlnovel/images/flags.png") 5px -51px no-repeat;background-size:18px}#lang-list{position:fixed;top:0;overflow:hidden;padding-top:50px;background:#fff;right:54px;z-index:20;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);border-radius:3px}.lang-list{display:block;width:200px;padding:16px 16px 0;z-index:30}#lang-list a,#lang-list strong{color:#333;margin:20px 0;width:100%;display:block}#lang-list strong,#lang-list a:hover{color:var(--dn-brand)}svg.chev-up{display:none}.active svg.chev-up{display:inline-block}.active svg.chev-down{display:none}.sug-list{clear:both}.sug-list a{display:block;width:100%;padding:3px 5px;height:48px;color:#999}.sug-list a strong{color:#333}.sug-tmb{float:left;padding-right:5px}.sug-list a span{display:block;height:26px;overflow:hidden;color:#000;font-size:1.2em}#as-box{position:fixed;top:0;overflow:hidden;padding:72px 5px 5px;width:100%}.wrap{width:100%;max-width:1300px;display:block;padding-left:160px;margin:0 auto;box-sizing:border-box}.m-hamburger{background:url("https://www.mtlnovel.net/themes/mtlnovel/images/menu.svg")}amp-img.img-logo{display:inline-block;width:28px;margin-right:4px;margin-bottom:-6px}#toolbar{display:inline-block}amp-sidebar ul svg{margin-right:16px;width:24px;height:24px;margin-bottom:-3px}amp-sidebar ul svg.nl{width:28px;height:28px;margin-left:-3px}.post-content amp-selector svg{width:22px;height:22px;margin-bottom:-4px}.ads{text-align:center;font-style:italic;color:#aaa;margin:30px auto;width:100%;box-sizing:border-box}.ads small{margin-bottom:8px;display:inline-block;width:100%}.inarticle-ads{max-width:728px;display:block;width:100%;box-sizing:border-box;height:320px}.sticky-ads{max-width:728px;display:block;width:100%;box-sizing:border-box;height:100px;margin:0 auto}:root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .inarticle-ads{margin-left:0px}body.nightmode-on{background:black}body.nightmode-on .m-card,body.nightmode-on footer{background:#1f2129}body.nightmode-on .post-content,body.nightmode-on .copyright{color:#999}body.nightmode-on main a,body.nightmode-on footer a{color:#aaa}body.nightmode-on h1,body.nightmode-on h2,body.nightmode-on header a,body.nightmode-on a.logo,body.nightmode-on .s-input{color:#ccc}body.nightmode-on header{background:#1f2129}body.nightmode-on header,body.nightmode-on .main-title{border-bottom:1px solid #5f6169}.req{display:block;width:calc(100% - 34px);box-sizing:border-box;color:#666;text-align:center;border:1px solid #eaeaea;margin:16px;padding:12px;border-radius:4px}svg#i-hd{width:80px;height:80px}svg path.bg{fill:#ddd}svg path.ppl{fill:#f5f6fd}.top-ava .ava,.top-ava svg#i-hd{width:36px;height:36px}.container-alt svg#i-hd{width:36px;height:36px}@media only screen and (max-width:1112px){#lang-list{right:0;padding-top:26px}article,.sidebar-container{float:none;margin:0 auto}.sidebar-container{max-width:760px}header{height:50px;box-sizing:border-box;position:fixed;top:0;z-index:25;padding:5px 0}.head-container{display:none}.wrap{padding-left:0}.container-alt{display:block}#as-box{padding:50px 0 5px}button.hamburger{display:inline-block}main.container{margin-top:60px}}@media only screen and (max-width:760px){.m-card{margin-top:10px}.post-content{padding:0 10px}.ads,.inarticle-ads{width:100%}.ads{margin-left:0}}@media only screen and (max-width:690px){.sticky-ads{height:80px}}@media only screen and (max-width:464px){.m-card{padding:10px}.ads{margin-left:0}}

/* ============================================================
   GENRE / LISTING COLLECTION REDESIGN (.nid-genre) — 2026-07-01
   Header koleksi (eyebrow + judul Fraunces + count) → grid kartu
   universal (nid_novel_card_grid) → pager pill → discovery.
   Semua nilai lewat token var(--dn-*). Legacy .box/#pagination di
   atas tak dipakai lagi (markup baru = .dn-card + .ng-pager).
   ============================================================ */
.nid-genre.container { max-width: var(--dn-page-narrow); }
.nid-genre .ng-card { padding: var(--dn-space-xl); }
.nid-genre .ng-head { margin-bottom: var(--dn-space-lg); }
.nid-genre .ng-title { margin: 2px 0 0; }
.nid-genre .ng-lede { margin-top: var(--dn-space-xs); }

/* Pager: pakai primitive .dn-pagination (dn-design.css) — tak ada CSS pager di sini lagi. */

/* Empty state */
.nid-genre .ng-empty { text-align: center; padding: var(--dn-space-2xl) var(--dn-space-md); }
.nid-genre .ng-empty-title { font-family: var(--dn-font-display); font-size: var(--dn-fs-h2); color: var(--dn-text); margin: 0 0 var(--dn-space-xs); }
.nid-genre .ng-empty-sub { color: var(--dn-text-muted); margin: 0 auto var(--dn-space-lg); max-width: 42ch; }

@media (max-width: 575px) {
	.nid-genre .ng-card { padding: var(--dn-space-lg) var(--dn-space-md); }
}