/*
Theme Name: MangaReader Lite
Theme URI: https://local.komikhwa.com
Author: Komikhwa Dev
Author URI: https://komikhwa.com
Description: Tema manga lokal yang ringan dan kompatibel dengan LocalWP. Tampilan mirip MangaReader (grid komik, daftar chapter, reader halaman, dark mode). Tanpa ionCube.
Version: 1.1.0
Text Domain: mangareader-lite
*/

:root {
    --bg: #0d0d12;
    --bg-card: #1a1a22;
    --bg-input: #14141a;
    --border: #2a2a35;
    --text: #b8b8b8;
    --text-light: #ddd;
    --text-white: #fff;
    --accent: #ff6b00;
    --accent-hover: #e65c00;
    --accent-light: rgba(255, 107, 0, 0.2);
    --accent-border: rgba(255, 107, 0, 0.4);
    --yellow: #ff6b00;
    --radius: 3px;
    --grid-line: rgba(255, 255, 255, 0.03);

    /* ===== FLOATING ACTION BUTTONS (AUTOPOSITION) ===== */
    /* Bottom offset dinamis untuk tombol Setting & Live Chat KHWA.
       Di-update via JS (main.js) setiap kali floating footer tampil. */
    --fab-bottom: 20px;
    --fab-gap: 12px;
    --fab-chat-z: 900;
    --fab-setting-z: 901;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img { max-width: 100%; height: auto; }
a { color: var(--text-light); text-decoration: none; transition: color .1s; }
a:hover { color: var(--accent); }

/* ===== HEADER ===== */
.site-header {
    background: #12121a;
    border-bottom: 1px solid var(--border);
    padding: 15px 20px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    max-width: 1220px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.site-title { font-size: 22px; font-weight: 700; color: var(--text-white); }
.site-title a { color: var(--text-white); }

.main-nav ul { display: flex; list-style: none; gap: 15px; flex-wrap: wrap; }
.main-nav a { color: var(--text); font-weight: 500; }
.main-nav a:hover { color: var(--accent); }

.header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.search-form { display: flex; }
.search-form input[type="search"] {
    background: var(--bg-input);
    border: 0;
    border-radius: 50px;
    color: var(--text-white);
    padding: 8px 15px;
    outline: none;
    width: 180px;
}
.search-form button {
    background: var(--accent);
    border: 0;
    color: #fff;
    border-radius: 50px;
    padding: 8px 12px;
    margin-left: 5px;
    cursor: pointer;
}

.theme-toggle {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-light);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.theme-toggle:hover { background: var(--accent); color: #fff; }

.login-btn {
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius);
    padding: 8px 14px;
    font-weight: 500;
    font-size: 13px;
}
.login-btn:hover { background: var(--accent-hover); color: #fff; }

/* ===== MODE TERANG (Light Mode) ===== */
body.light-mode {
    --bg: #f5f5f5;
    --bg-card: #ffffff;
    --bg-input: #e8e8e8;
    --border: #d0d0d0;
    --text: #333333;
    --text-light: #555555;
    --text-white: #111111;
    --accent: #ff6b00;
    --accent-hover: #e65c00;
    --accent-light: rgba(255, 107, 0, 0.15);
    --accent-border: rgba(255, 107, 0, 0.3);
    --grid-line: rgba(0, 0, 0, 0.03);
}
body.light-mode .site-header { background: #ffffff; }
body.light-mode .site-footer { background: #ffffff; }
body.light-mode .manga-item { box-shadow: 0 1px 3px rgba(0,0,0,.1); }

/* ===== MAIN ===== */
.site-main {
    flex: 1;
    max-width: 1220px;
    margin: 25px auto;
    padding: 0 20px;
    width: 100%;
}

/* ===== HOME SECTION ===== */
.home-section { margin-bottom: 40px; }

.section-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent);
    flex-wrap: wrap;
}

.section-title {
    color: var(--text-white);
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.section-subtitle {
    color: #777;
    font-size: 12px;
}

/* ===== VIEW DROPDOWN ===== */
.view-dropdown {
    position: relative;
    display: inline-block;
}

.view-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 14px;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
}

.view-dropdown-toggle:hover {
    border-color: var(--accent);
    color: var(--text-white);
}

.view-toggle-icon {
    font-size: 16px;
    line-height: 1;
}

.view-toggle-arrow {
    font-size: 12px;
    margin-left: 4px;
    transition: transform .2s;
}

.view-dropdown.open .view-toggle-arrow {
    transform: rotate(180deg);
}

.view-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    z-index: 1000;
    min-width: 170px;
    padding: 6px;
}

.view-dropdown.open .view-dropdown-menu {
    display: block;
}

.view-group-label {
    color: #777;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 8px 3px;
}

.view-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: all .15s;
    white-space: nowrap;
}

.view-option:hover {
    background: var(--bg-input);
    color: var(--text-white);
}

.view-option.active {
    background: var(--accent-light);
    color: var(--accent);
    font-weight: 500;
}

/* ===== CONTENT GRID VIEW MODES ===== */
.content-grid {
    transition: all .3s ease;
}

/* Grid view (default 5 columns) */
.content-grid.view-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

.content-grid.view-grid .content-card .card-body .card-excerpt {
    display: none;
}

/* Large icon view - 4 columns */
.content-grid.view-large {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.content-grid.view-large .content-card .card-body .card-excerpt {
    display: none;
}

/* Medium icon view - 6 columns */
.content-grid.view-medium {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.content-grid.view-medium .content-card .card-body h3 {
    font-size: 11px;
}

.content-grid.view-medium .content-card .card-body .card-excerpt {
    display: none;
}

/* Small icon view - 8 columns */
.content-grid.view-small {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
}

.content-grid.view-small .content-card .card-body h3 {
    font-size: 10px;
    min-height: auto;
    padding: 4px 6px;
}

.content-grid.view-small .content-card .card-body h3 a {
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.content-grid.view-small .content-card .card-body .card-excerpt {
    display: none;
}

/* Small Icon view: tampilkan daftar chapter (bukan badge) */
.content-grid.view-small .content-card .card-body .project-chapters,
.content-grid.view-small .content-card .card-body .latest-chapters,
.content-grid.view-small .content-card .card-body .manga-chapters {
    display: block;
    padding: 0 6px 6px;
    margin: 0;
}

.content-grid.view-small .content-card .card-body .project-chapters li,
.content-grid.view-small .content-card .card-body .latest-chapters li,
.content-grid.view-small .content-card .card-body .manga-chapters li {
    border-top: none;
    padding: 0;
}

.content-grid.view-small .content-card .card-body .project-chapters li a,
.content-grid.view-small .content-card .card-body .latest-chapters li a,
.content-grid.view-small .content-card .card-body .manga-chapters li a {
    display: block;
    font-size: 9px;
    line-height: 1.4;
    padding: 1px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.content-grid.view-small .content-card .card-body .project-chapters .ch-date,
.content-grid.view-small .content-card .card-body .latest-chapters .ch-date,
.content-grid.view-small .content-card .card-body .manga-chapters .ch-date {
    display: none;
}

/* Sembunyikan badge chapter di thumbnail saat Small Icon view */
.content-grid.view-small .project-chapter-badge,
.content-grid.view-small .manga-thumb .chapter-badge {
    display: none !important;
}

/* List view - horizontal list */
.content-grid.view-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.content-grid.view-list .content-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 6px;
}

.content-grid.view-list .content-card .project-cover-wrap {
    padding: 0;
    width: 40px;
    flex-shrink: 0;
}

.content-grid.view-list .content-card .project-cover,
.content-grid.view-list .content-card .latest-cover {
    width: 40px;
    height: 56px;
    aspect-ratio: auto;
    flex-shrink: 0;
}

.content-grid.view-list .content-card .card-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.content-grid.view-list .content-card .card-body h3 {
    min-height: auto;
    margin: 0;
    font-size: 13px;
    flex: 0 0 200px;
}

.content-grid.view-list .content-card .card-body h3 a {
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.content-grid.view-list .content-card .card-excerpt {
    display: none;
}

.content-grid.view-list .content-card .project-chapters,
.content-grid.view-list .content-card .latest-chapters {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.content-grid.view-list .content-card .project-chapters li,
.content-grid.view-list .content-card .latest-chapters li {
    border: none;
    padding: 0;
}

.content-grid.view-list .content-card .project-chapters li a,
.content-grid.view-list .content-card .latest-chapters li a {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--bg-input);
    border-radius: 3px;
    gap: 6px;
}

/* Detail view - horizontal with more info */
.content-grid.view-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.content-grid.view-detail .content-card {
    display: flex;
    gap: 15px;
    padding: 15px;
    border-radius: 8px;
}

.content-grid.view-detail .content-card .project-cover-wrap {
    padding: 0;
}

.content-grid.view-detail .content-card .project-cover,
.content-grid.view-detail .content-card .latest-cover {
    width: 120px;
    height: 160px;
    aspect-ratio: auto;
    flex-shrink: 0;
}

.content-grid.view-detail .content-card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-grid.view-detail .content-card .card-body h3 {
    min-height: auto;
    font-size: 15px;
    margin-bottom: 6px;
}

.content-grid.view-detail .content-card .card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    color: var(--text);
    margin-bottom: 8px;
}

/* Tiles view - square tiles */
.content-grid.view-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.content-grid.view-tiles .content-card {
    border-radius: 4px;
    overflow: hidden;
}

.content-grid.view-tiles .content-card .project-cover-wrap {
    padding: 0;
}

.content-grid.view-tiles .content-card .project-cover,
.content-grid.view-tiles .content-card .latest-cover {
    aspect-ratio: 3/4;
    border-radius: 0;
}

.content-grid.view-tiles .content-card .card-body {
    padding: 8px 10px;
}

.content-grid.view-tiles .content-card .card-body h3 {
    font-size: 13px;
    padding: 0;
    min-height: 34px;
    line-height: 1.3;
    margin-bottom: 6px;
}

.content-grid.view-tiles .content-card .card-body h3 a {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.content-grid.view-tiles .content-card .card-body .card-excerpt {
    display: none;
}

/* Tiles view: tampilkan 3 chapter terbaru (seperti /manga/) */
.content-grid.view-tiles .content-card .card-body .project-chapters,
.content-grid.view-tiles .content-card .card-body .latest-chapters {
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
}

.content-grid.view-tiles .content-card .card-body .project-chapters li,
.content-grid.view-tiles .content-card .card-body .latest-chapters li {
    border-top: 1px solid var(--border);
    padding: 0;
}

.content-grid.view-tiles .content-card .card-body .project-chapters li a,
.content-grid.view-tiles .content-card .card-body .latest-chapters li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    line-height: 1.3;
    padding: 5px 0;
    color: var(--text);
}

.content-grid.view-tiles .content-card .card-body .project-chapters li a:hover,
.content-grid.view-tiles .content-card .card-body .latest-chapters li a:hover {
    color: var(--accent);
}

.content-grid.view-tiles .content-card .card-body .project-chapters .ch-date,
.content-grid.view-tiles .content-card .card-body .latest-chapters .ch-date {
    display: block;
    color: #666;
    font-size: 10px;
    flex-shrink: 0;
}

/* Sembunyikan badge chapter di thumbnail saat Tiles view */
.content-grid.view-tiles .project-chapter-badge,
.content-grid.view-tiles .latest-cover .project-chapter-badge {
    display: none;
}

/* Content view - compact list */
.content-grid.view-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.content-grid.view-content .content-card {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
}

.content-grid.view-content .content-card:last-child {
    border-bottom: none;
}

.content-grid.view-content .content-card .project-cover-wrap {
    padding: 0;
}

.content-grid.view-content .content-card .project-cover,
.content-grid.view-content .content-card .latest-cover {
    width: 40px;
    height: 55px;
    aspect-ratio: auto;
    flex-shrink: 0;
}

.content-grid.view-content .content-card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-grid.view-content .content-card .card-body h3 {
    font-size: 13px;
    min-height: auto;
    margin: 0 0 4px;
    padding: 0;
}

.content-grid.view-content .content-card .card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
}

.content-grid.view-content .content-card .project-chapters,
.content-grid.view-content .content-card .latest-chapters {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.content-grid.view-content .content-card .project-chapters li,
.content-grid.view-content .content-card .latest-chapters li {
    border: none;
    padding: 0;
}

.content-grid.view-content .content-card .project-chapters li a,
.content-grid.view-content .content-card .latest-chapters li a {
    font-size: 10px;
    padding: 2px 6px;
    background: var(--bg-input);
    border-radius: 2px;
    color: var(--text);
}

.content-grid.view-content .content-card .project-chapters li a:hover,
.content-grid.view-content .content-card .latest-chapters li a:hover {
    color: var(--accent);
}

/* Card body excerpt */
.card-body h3 {
    transition: font-size .2s;
}

.card-excerpt {
    display: none;
    font-size: 12px;
    color: var(--text);
    margin-bottom: 8px;
}

.card-excerpt.visible {
    display: block;
}

/* ===== UKURAN BADGE PROPOSIONAL DENGAN THUMBNAIL =====
   Referensi: view Large Icon = 100% (thumbnail 280px)
   - Large:  project 17px | mirror 25px | rating 17px
   - Grid:   80%  -> project 13.6px | mirror 20px | rating 13.6px
   - Medium: 66.7% -> project 11.3px | mirror 16.7px | rating 11.3px
   - Small:  49.6% -> project 8.4px | mirror 12.4px | rating 8.4px
   - Tiles:  50%  -> project 8.5px | mirror 12.5px | rating 8.5px
   - Detail: 42.9% -> project 7.3px | mirror 10.7px | rating 7.3px
   - List:   14.3% -> project 2.4px | mirror 3.6px | rating 2.4px
   - Content:14.3% -> project 2.4px | mirror 3.6px | rating 2.4px
*/
.content-grid.view-large .project-type-badge {
    font-size: 17px;
    padding: 4px 8px;
}
.content-grid.view-large .latest-card .mirror-badge {
    font-size: 25px;
    padding: 6px 12px;
}
.content-grid.view-large .rating-badge {
    font-size: 17px;
    padding: 3px 8px;
}

.content-grid.view-grid .project-type-badge {
    font-size: 13.6px;
    padding: 3px 6px;
}
.content-grid.view-grid .latest-card .mirror-badge {
    font-size: 20px;
    padding: 5px 10px;
}
.content-grid.view-grid .rating-badge {
    font-size: 13.6px;
    padding: 3px 6px;
}

.content-grid.view-medium .project-type-badge {
    font-size: 11.3px;
    padding: 2px 5px;
}
.content-grid.view-medium .latest-card .mirror-badge {
    font-size: 16.7px;
    padding: 4px 8px;
}
.content-grid.view-medium .rating-badge {
    font-size: 11.3px;
    padding: 2px 6px;
}

.content-grid.view-small .project-type-badge {
    font-size: 8.4px;
    padding: 2px 4px;
}
.content-grid.view-small .latest-card .mirror-badge {
    font-size: 12.4px;
    padding: 3px 6px;
}
.content-grid.view-small .rating-badge {
    font-size: 8.4px;
    padding: 2px 4px;
}
.content-grid.view-small .project-chapter-badge {
    display: none;
}

/* Tiles view: thumbnail 140px vs Large 280px = 50% */
.content-grid.view-tiles .project-type-badge {
    font-size: 8.5px;
    padding: 2px 4px;
}
.content-grid.view-tiles .latest-card .mirror-badge {
    font-size: 12.5px;
    padding: 3px 6px;
}
.content-grid.view-tiles .rating-badge {
    font-size: 8.5px;
    padding: 2px 4px;
}

/* Detail view: thumbnail 120px vs Large 280px = 42.9% */
.content-grid.view-detail .project-type-badge {
    font-size: 7.3px;
    padding: 2px 4px;
}
.content-grid.view-detail .latest-card .mirror-badge {
    font-size: 10.7px;
    padding: 2px 5px;
}
.content-grid.view-detail .rating-badge {
    font-size: 7.3px;
    padding: 2px 4px;
}

/* List view: thumbnail 40px vs Large 280px = 14.3% */
.content-grid.view-list .project-type-badge {
    font-size: 2.4px;
    padding: 0px 1px;
}
.content-grid.view-list .latest-card .mirror-badge {
    font-size: 3.6px;
    padding: 0px 2px;
}
.content-grid.view-list .rating-badge {
    font-size: 2.4px;
    padding: 0px 1px;
}

/* Content view: thumbnail 40px vs Large 280px = 14.3% */
.content-grid.view-content .project-type-badge {
    font-size: 2.4px;
    padding: 0px 1px;
}
.content-grid.view-content .latest-card .mirror-badge {
    font-size: 3.6px;
    padding: 0px 2px;
}
.content-grid.view-content .rating-badge {
    font-size: 2.4px;
    padding: 0px 1px;
}

/* ===== MANGA-GRID BADGES PROPOSIONAL DENGAN THUMBNAIL =====
   Referensi: view Large Icon = 100% (thumbnail 280px)
   Manga-grid menggunakan .project-badge/.mirror-badge/.rating-badge
   yang default-nya 8px/8px/11px (fixed).
   Berikut skala per view mode agar konsisten dengan badge lain:
   - Large:  project 17px | mirror 25px | rating 17px | chapter 17px
   - Grid:   80%  -> project 13.6px | mirror 20px | rating 13.6px | chapter 13.6px
   - Medium: 66.7% -> project 11.3px | mirror 16.7px | rating 11.3px | chapter 11.3px
   - Small:  49.6% -> project 8.4px | mirror 12.4px | rating 8.4px | chapter 8.4px
   - Tiles:  50%  -> project 8.5px | mirror 12.5px | rating 8.5px | chapter 8.5px
   - Detail: 42.9% -> project 7.3px | mirror 10.7px | rating 7.3px | chapter 7.3px
   - List:   14.3% -> project 2.4px | mirror 3.6px | rating 2.4px | chapter 2.4px
   - Content:14.3% -> project 2.4px | mirror 3.6px | rating 2.4px | chapter 2.4px
*/
.content-grid.view-large.manga-grid .manga-thumb .project-badge {
    font-size: 17px;
    padding: 4px 8px;
}
.content-grid.view-large.manga-grid .manga-thumb .mirror-badge {
    font-size: 25px;
    padding: 6px 12px;
}
.content-grid.view-large.manga-grid .manga-thumb .rating-badge {
    font-size: 17px;
    padding: 3px 8px;
}
.content-grid.view-large.manga-grid .manga-thumb .chapter-badge {
    font-size: 17px;
    padding: 3px 8px;
}

.content-grid.view-grid.manga-grid .manga-thumb .project-badge {
    font-size: 13.6px;
    padding: 3px 6px;
}
.content-grid.view-grid.manga-grid .manga-thumb .mirror-badge {
    font-size: 20px;
    padding: 5px 10px;
}
.content-grid.view-grid.manga-grid .manga-thumb .rating-badge {
    font-size: 13.6px;
    padding: 3px 6px;
}
.content-grid.view-grid.manga-grid .manga-thumb .chapter-badge {
    font-size: 14px;
    padding: 3px 6px;
}

.content-grid.view-medium.manga-grid .manga-thumb .project-badge {
    font-size: 11.3px;
    padding: 2px 5px;
}
.content-grid.view-medium.manga-grid .manga-thumb .mirror-badge {
    font-size: 16.7px;
    padding: 4px 8px;
}
.content-grid.view-medium.manga-grid .manga-thumb .rating-badge {
    font-size: 11.3px;
    padding: 2px 6px;
}
.content-grid.view-medium.manga-grid .manga-thumb .chapter-badge {
    font-size: 11px;
    padding: 2px 5px;
}

.content-grid.view-small.manga-grid .manga-thumb .project-badge {
    font-size: 8.4px;
    padding: 2px 4px;
}
.content-grid.view-small.manga-grid .manga-thumb .mirror-badge {
    font-size: 12.4px;
    padding: 3px 6px;
}
.content-grid.view-small.manga-grid .manga-thumb .rating-badge {
    font-size: 8.4px;
    padding: 2px 4px;
}
.content-grid.view-small.manga-grid .manga-thumb .chapter-badge {
    font-size: 8px;
    padding: 2px 4px;
}

/* Tiles view: thumbnail 140px vs Large 280px = 50% */
.content-grid.view-tiles.manga-grid .manga-thumb .project-badge {
    font-size: 8.5px;
    padding: 2px 4px;
}
.content-grid.view-tiles.manga-grid .manga-thumb .mirror-badge {
    font-size: 12.5px;
    padding: 3px 6px;
}
.content-grid.view-tiles.manga-grid .manga-thumb .rating-badge {
    font-size: 8.5px;
    padding: 2px 4px;
}
.content-grid.view-tiles.manga-grid .manga-thumb .chapter-badge {
    font-size: 9px;
    padding: 2px 4px;
}

/* Detail view: thumbnail 120px vs Large 280px = 42.9% */
.content-grid.view-detail.manga-grid .manga-thumb .project-badge {
    font-size: 7.3px;
    padding: 2px 4px;
}
.content-grid.view-detail.manga-grid .manga-thumb .mirror-badge {
    font-size: 10.7px;
    padding: 2px 5px;
}
.content-grid.view-detail.manga-grid .manga-thumb .rating-badge {
    font-size: 7.3px;
    padding: 2px 4px;
}
.content-grid.view-detail.manga-grid .manga-thumb .chapter-badge {
    font-size: 7px;
    padding: 2px 4px;
}

/* List view: thumbnail 40px vs Large 280px = 14.3% */
.content-grid.view-list.manga-grid .manga-thumb .project-badge {
    font-size: 2.4px;
    padding: 0px 1px;
}
.content-grid.view-list.manga-grid .manga-thumb .mirror-badge {
    font-size: 3.6px;
    padding: 0px 2px;
}
.content-grid.view-list.manga-grid .manga-thumb .rating-badge {
    font-size: 2.4px;
    padding: 0px 1px;
}
.content-grid.view-list.manga-grid .manga-thumb .chapter-badge {
    font-size: 2px;
    padding: 0px 1px;
}

/* Content view: thumbnail 40px vs Large 280px = 14.3% */
.content-grid.view-content.manga-grid .manga-thumb .project-badge {
    font-size: 2.4px;
    padding: 0px 1px;
}
.content-grid.view-content.manga-grid .manga-thumb .mirror-badge {
    font-size: 3.6px;
    padding: 0px 2px;
}
.content-grid.view-content.manga-grid .manga-thumb .rating-badge {
    font-size: 2.4px;
    padding: 0px 1px;
}
.content-grid.view-content.manga-grid .manga-thumb .chapter-badge {
    font-size: 2px;
    padding: 0px 1px;
}

/* ===== VIEW ALL BUTTON ===== */
.view-all-btn {
    margin-left: auto;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    transition: all .2s;
    white-space: nowrap;
}
.view-all-btn:hover {
    background: var(--accent-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(255, 107, 0, 0.3);
}

/* ===== HERO CAROUSEL (FULL WIDTH) ===== */
.hero-carousel {
    position: relative;
    overflow: hidden;
    margin-bottom: 40px;
    /* Tinggi = 55% dari tinggi layar (55vh).
       Menggunakan 55vh dengan fallback 55svh untuk mobile browser
       agar konsisten di semua perangkat. */
    height: 55vh;
    height: 55svh;
    min-height: 360px;
    max-height: 55vh;
    max-height: 55svh;
    background: #12121a;
    border: none;
    border-radius: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.hero-slides {
    position: relative;
    height: 100%;
    width: 100%;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility .6s ease;
    display: flex;
    align-items: center;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
}

/* Gambar HD (img + srcset) - posisi center 10% (geser fokus 10% ke atas) */
.hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 10%; /* PENTING: geser fokus 10% ke atas, potong lebih banyak area bawah */
    opacity: 1;
    transform: none;
    z-index: 0;
}

/* Fallback background (jika img gagal dimuat) */
.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 10%; /* PENTING: geser fokus 10% ke atas, potong lebih banyak area bawah */
    opacity: 1;
    transform: none;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    /* Overlay hitam pekat */
    background: #000000db;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
    padding: 40px;
}

.hero-badge {
    display: inline-block;
    background: var(--yellow);
    color: #000;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 2px;
    margin-bottom: 15px;
}

.hero-title {
    color: var(--text-white);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 12px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.hero-synopsis {
    color: #ccc;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 15px;
    max-width: 550px;
}

.hero-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.hero-genre {
    background: var(--accent-light);
    border: 1px solid var(--accent-border);
    color: #ff8c33;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.hero-btn-read {
    display: inline-block;
    background: var(--yellow);
    color: #000;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 24px;
    border-radius: 4px;
    transition: all .2s;
}

.hero-btn-read:hover {
    background: #ff8c33;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.3);
}

.hero-views {
    color: #aaa;
    font-size: 12px;
}

.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    font-size: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}

.hero-arrow:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.hero-arrow-prev { left: 15px; }
.hero-arrow-next { right: 15px; }

.hero-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: all .2s;
}

.hero-dot.active {
    background: var(--yellow);
    width: 24px;
    border-radius: 4px;
}

/* ===== PROJECT SECTION ===== */
.project-card {
    background: var(--bg-card);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: transform .2s, box-shadow .2s;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.project-cover-wrap {
    position: relative;
    padding: 10px 10px 0;
}

.project-cover {
    position: relative;
    aspect-ratio: 3/4;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-input);
}

.project-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a22 0%, #2a2a35 100%);
    padding: 20px;
    text-align: center;
}

.cover-placeholder span {
    color: #666;
    font-size: 12px;
    line-height: 1.4;
}

.rating-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: linear-gradient(135deg, #FFD700 0%, #F5A623 50%, #E8910B 100%);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 2;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Project type badge di kanan atas */
.project-type-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--yellow);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 2;
    white-space: nowrap;
    max-width: calc(100% - 10px);
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Chapter badge - hanya tampil di Small Icon view (karena daftar chapter disembunyikan) */
.project-chapter-badge {
    display: none;
    position: absolute;
    bottom: 5px;
    left: 5px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 2px;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    white-space: nowrap;
}

.komikhwa-logo {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.7);
    color: var(--yellow);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 2px;
    z-index: 2;
}

.project-title {
    padding: 10px 12px 5px;
    font-size: 13px;
    line-height: 1.3;
    min-height: 40px;
}

.project-title a {
    color: var(--text-white);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-title a:hover { color: var(--accent); }

.project-chapters {
    list-style: none;
    padding: 0 12px 12px;
}

.project-chapters li {
    border-top: 1px solid var(--border);
}

.project-chapters li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 11px;
    color: var(--text);
}

.project-chapters li a:hover { color: var(--accent); }

.ch-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70%;
}

.ch-date {
    color: #666;
    font-size: 10px;
    flex-shrink: 0;
}

/* ===== LATEST SECTION (MIRROR UPDATE) ===== */
.latest-card {
    background: var(--bg-card);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: transform .2s, box-shadow .2s;
}

.latest-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.latest-cover {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--bg-input);
}

.latest-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mirror-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--accent);
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 6px 12px;
    border-radius: 4px;
    z-index: 2;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.latest-title {
    padding: 10px 12px 5px;
    font-size: 13px;
    line-height: 1.3;
    min-height: 40px;
}

.latest-title a {
    color: var(--text-white);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.latest-title a:hover { color: var(--accent); }

.latest-chapters {
    list-style: none;
    padding: 0 12px 12px;
}

.latest-chapters li {
    border-top: 1px solid var(--border);
}

.latest-chapters li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 11px;
    color: var(--text);
}

.latest-chapters li a:hover { color: var(--accent); }

/* ===== RECOMMEND SECTION BADGES =====
   Thumbnail rekomendasi = 160px vs Large 280px = 57.1%
   - project: 17px * 57.1% = 9.7px
   - mirror: 25px * 57.1% = 14.3px
   - rating: 17px * 57.1% = 9.7px
   - chapter: 17px * 57.1% = 9.7px
*/
.recommend-project-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--yellow);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 2px 5px;
    border-radius: 3px;
    z-index: 3;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.recommend-mirror-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 3px 7px;
    border-radius: 3px;
    z-index: 3;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.recommend-card .chapter-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 3px;
    z-index: 3;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    white-space: nowrap;
}

/* Container untuk 1 chapter terbaru di rekomendasi */
.recommend-chapter-badges {
    position: absolute;
    bottom: 4px;
    left: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 3;
}

.recommend-chapter-badges .chapter-badge {
    position: static;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Rating badge di rekomendasi: kanan bawah */
.recommend-card .rating-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    top: auto;
    left: auto;
    font-size: 10px;
    padding: 2px 5px;
}

/* ===== RECOMMEND SECTION ===== */
.recommend-section .slider-wrapper {
    position: relative;
    overflow: hidden;
}

.recommend-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 5px 0 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--bg-card);
}

.recommend-track::-webkit-scrollbar { height: 6px; }
.recommend-track::-webkit-scrollbar-track { background: var(--bg-card); }
.recommend-track::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }

.recommend-card {
    flex: 0 0 160px;
    background: var(--bg-card);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: transform .2s, box-shadow .2s;
}

.recommend-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.recommend-cover-link {
    display: block;
}

.recommend-cover {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--bg-input);
}

.recommend-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

.recommend-card:hover .recommend-cover img {
    transform: scale(1.05);
}

.recommend-title {
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.3;
    min-height: 40px;
}

.recommend-title a {
    color: var(--text-white);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.recommend-title a:hover { color: var(--accent); }

/* ===== SLIDER (legacy) ===== */
.slider-wrapper {
    position: relative;
    overflow: hidden;
}
.slider-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 5px 0 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--bg-card);
}
.slider-track::-webkit-scrollbar { height: 6px; }
.slider-track::-webkit-scrollbar-track { background: var(--bg-card); }
.slider-track::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }

.slider-item {
    flex: 0 0 160px;
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .15s;
}
.slider-item:hover { transform: translateY(-3px); }

.slider-thumb {
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--bg-input);
}
.slider-thumb img { width: 100%; height: 100%; object-fit: cover; }

.slider-title {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text-white);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.6);
    border: 0;
    color: #fff;
    font-size: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.slider-btn:hover { background: var(--accent); }
.slider-btn.prev { left: 5px; }
.slider-btn.next { right: 5px; }

/* ===== PAGE TITLE ===== */
.page-title {
    color: var(--text-white);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.page-subtitle {
    color: #777;
    font-size: 14px;
    margin-bottom: 20px;
}

/* ===== PAGE STATIC (DMCA, TOS, Disclaimer, Privacy Policy) ===== */
.page-static {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px 20px;
}

.page-static .page-title {
    color: var(--text-white);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--accent);
}

.page-static .page-content {
    color: var(--text);
    font-size: 15px;
    line-height: 1.8;
}

.page-static .page-content h2 {
    color: var(--text-white);
    font-size: 20px;
    font-weight: 600;
    margin: 25px 0 10px;
}

.page-static .page-content h3 {
    color: var(--text-white);
    font-size: 17px;
    font-weight: 600;
    margin: 20px 0 8px;
}

.page-static .page-content p {
    margin-bottom: 12px;
}

.page-static .page-content a {
    color: var(--accent);
}

.page-static .page-content a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.page-project {
    margin-bottom: 40px;
}

/* ===== GRID MANGA (Home/Archive) ===== */
.manga-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
    list-style: none;
    padding: 0;
}

.manga-item {
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .15s;
}

.manga-item:hover { transform: translateY(-3px); }

.manga-thumb {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--bg-input);
}

.manga-thumb img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; }

.manga-thumb .chapter-badge {
    position: absolute;
    bottom: 5px;
    left: 5px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 2px;
}

.manga-info { padding: 10px; }

.manga-info h2 { font-size: 13px; color: var(--text-white); line-height: 1.3; }

.manga-info h2 a { color: var(--text-white); }
.manga-info h2 a:hover { color: var(--accent); }

.manga-meta { font-size: 11px; color: #888; margin-top: 5px; }

/* ===== SINGLE MANGA ===== */
.manga-header {
    display: flex;
    gap: 20px;
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.manga-header-thumb { width: 180px; flex-shrink: 0; position: relative; }
.manga-header-thumb img { border-radius: var(--radius); width: 100%; }

/* Badge di thumbnail box judul */
.manga-header-thumb .project-badge,
.manga-header-thumb .mirror-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: block;
    width: calc(100% - 16px);
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 4px 0;
    border-radius: 4px;
    z-index: 3;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.manga-header-thumb .project-badge {
    background: var(--accent);
    color: #fff;
}

.manga-header-thumb .mirror-badge {
    background: var(--accent);
    color: #fff;
}

.manga-header-info { flex: 1; min-width: 200px; }
.manga-header-info h1 { color: var(--text-white); font-size: 22px; margin-bottom: 10px; }

.manga-desc { color: var(--text); margin-top: 12px; }

.genre-list { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; }
.genre-tag {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 2px;
    font-size: 11px;
    padding: 3px 8px;
    color: var(--text);
}

/* ===== CHAPTER LIST ===== */
.chapter-box {
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
}

.chapter-heading {
    background: var(--accent);
    color: var(--text-white);
    font-size: 15px;
    font-weight: 600;
    padding: 10px 15px;
}

.chapter-list { list-style: none; }
.chapter-list li { border-top: 1px solid var(--border); }
.chapter-list li a { display: block; padding: 12px 15px; color: var(--text); }
.chapter-list li a:hover { background: var(--bg-input); color: var(--text-white); }
.chapter-list li .chapter-date { font-size: 11px; color: #777; float: right; }

/* ===== FOOTER ===== */
.site-footer {
    background: #12121a;
    border-top: 1px solid var(--border);
    padding: 20px;
    text-align: center;
    color: #777;
    font-size: 13px;
}

/* ===== BOOKMARK BUTTON ===== */
.mrlite-bookmark-btn {
    background: var(--bg-input);
    border: 1px solid var(--accent);
    color: var(--text-light);
    border-radius: var(--radius);
    padding: 8px 15px;
    cursor: pointer;
    font-size: 13px;
    margin: 8px 0;
    transition: all .15s;
}
.mrlite-bookmark-btn:hover { background: var(--accent); color: #fff; }
.mrlite-bookmark-btn.active { background: var(--accent); color: #fff; }

/* ===== KOMENTAR (Modern Layout) ===== */
.comments-area {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    margin-top: 20px;
}
.comments-title { color: var(--text-white); font-size: 16px; margin-bottom: 15px; }
.comment-list { list-style: none; }
.comment-list li { border-top: 1px solid var(--border); padding: 12px 0; }
.comment-author { color: var(--text-white); font-weight: 600; }
.comment-metadata { font-size: 11px; color: #777; }
.comment-content { color: var(--text); margin-top: 5px; }
.comment-form label { display: block; color: var(--text-light); margin: 8px 0 3px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-white);
    padding: 8px 12px;
    outline: none;
}
.comment-form .submit {
    background: var(--accent);
    border: 0;
    color: #fff;
    border-radius: var(--radius);
    padding: 10px 20px;
    cursor: pointer;
    margin-top: 10px;
}
.comment-form .submit:hover { background: var(--accent-hover); }

/* ===== KOMENTAR DISKUSI (setelah Related Manga) ===== */
.manga-comments-box {
    margin-top: 30px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.manga-comments-box .comments-title {
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}
.manga-comments-box .comment-respond {
    margin-top: 20px;
}
.manga-comments-box .comment-reply-title {
    color: var(--text-white);
    font-size: 15px;
    margin-bottom: 10px;
}
.manga-comments-box .comment-form textarea {
    min-height: 100px;
    resize: vertical;
}
.manga-comments-box .comment-form .form-submit {
    margin-top: 10px;
}
.manga-comments-box .comment-form .submit {
    background: var(--accent);
    border: 0;
    color: #fff;
    border-radius: var(--radius);
    padding: 10px 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background .15s;
}
.manga-comments-box .comment-form .submit:hover { background: var(--accent-hover); }
.manga-comments-box .comment-notes {
    color: #777;
    font-size: 12px;
    margin-bottom: 10px;
}
.manga-comments-box .logged-in-as {
    color: #777;
    font-size: 12px;
    margin-bottom: 10px;
}
.manga-comments-box .comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    color: var(--text-light);
    font-size: 13px;
}
.manga-comments-box .comment-form-cookies-consent input[type="checkbox"] {
    width: auto;
}
.manga-comments-box .comment-list {
    margin-top: 15px;
}
.manga-comments-box .comment-list .children {
    list-style: none;
    margin-left: 20px;
    padding-left: 15px;
    border-left: 2px solid var(--border);
}
.manga-comments-box .comment-body {
    padding: 10px 0;
}
.manga-comments-box .comment-author .avatar {
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}
.manga-comments-box .comment-reply-link {
    color: var(--accent);
    font-size: 12px;
    margin-top: 5px;
    display: inline-block;
}
.manga-comments-box .comment-reply-link:hover { color: var(--accent-hover); }
.manga-comments-box .comment-awaiting-moderation {
    color: var(--accent);
    font-size: 12px;
    font-style: italic;
    margin-top: 5px;
}
.manga-comments-box .no-comments {
    color: #777;
    font-style: italic;
    padding: 10px 0;
}
.manga-comments-box .comment-navigation {
    margin: 15px 0;
    font-size: 13px;
}
.manga-comments-box .comment-navigation .nav-links {
    display: flex;
    justify-content: space-between;
}
.manga-comments-box .comment-navigation a {
    color: var(--accent);
}
.manga-comments-box .comment-navigation a:hover { color: var(--accent-hover); }

/* ===== FORM KOMENTAR AJAX (posisi di ATAS) ===== */
.mrlite-comment-form-wrap {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.mrlite-comment-form-wrap .comment-reply-title {
    color: var(--text-white);
    font-size: 15px;
    margin-bottom: 10px;
}
.mrlite-comment-form .comment-form-author {
    margin-bottom: 10px;
}
.mrlite-comment-form .comment-form-author label {
    display: block;
    color: var(--text-light);
    margin: 8px 0 3px;
    font-size: 13px;
}
.mrlite-comment-form .comment-form-author .optional {
    color: #777;
    font-size: 11px;
    font-weight: 400;
}
.mrlite-comment-form .comment-form-comment {
    margin-bottom: 10px;
}
.mrlite-comment-form .comment-form-comment label {
    display: block;
    color: var(--text-light);
    margin: 8px 0 3px;
    font-size: 13px;
}
.mrlite-comment-form input[type="text"],
.mrlite-comment-form textarea {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-white);
    padding: 8px 12px;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    transition: border-color .15s;
}
.mrlite-comment-form input[type="text"]:focus,
.mrlite-comment-form textarea:focus {
    border-color: var(--accent-border);
}
.mrlite-comment-form textarea {
    min-height: 100px;
    resize: vertical;
}
.mrlite-comment-form input.mrlite-input-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.mrlite-comment-form .comment-form-anon {
    margin: 10px 0;
}
.mrlite-anon-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-light);
    font-size: 13px;
    user-select: none;
}
.mrlite-anon-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}
.mrlite-anon-toggle-label {
    transition: color .15s;
}
.mrlite-anon-toggle:hover .mrlite-anon-toggle-label {
    color: var(--accent);
}
.mrlite-comment-form .form-submit {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mrlite-comment-form .submit {
    background: var(--accent);
    border: 0;
    color: #fff;
    border-radius: var(--radius);
    padding: 10px 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background .15s;
}
.mrlite-comment-form .submit:hover { background: var(--accent-hover); }
.mrlite-comment-form .submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.mrlite-comment-loading {
    color: var(--text-light);
    font-size: 13px;
}

/* ===== KOMENTAR MODERN (Avatar + Header + Konten + Reply) ===== */
.manga-comments-box .comment-list {
    margin-top: 0;
}

.manga-comments-box .comment-list > li {
    border-top: 1px solid var(--border);
    padding: 15px 0;
}

.manga-comments-box .comment-list > li:first-child {
    border-top: none;
}

.manga-comments-box .comment-body {
    display: flex;
    gap: 12px;
    padding: 0;
}

/* Avatar */
.manga-comments-box .comment-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

.manga-comments-box .comment-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-border);
    background: var(--bg-input);
}

.manga-comments-box .comment-avatar-default {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border: 2px solid var(--accent-border);
}

/* Main content area */
.manga-comments-box .comment-main {
    flex: 1;
    min-width: 0;
}

/* Header: nama + tanggal */
.manga-comments-box .comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.manga-comments-box .comment-author-name {
    color: var(--text-white);
    font-weight: 600;
    font-size: 14px;
}

.manga-comments-box .comment-author-name a {
    color: var(--text-white);
}

.manga-comments-box .comment-author-name a:hover {
    color: var(--accent);
}

.manga-comments-box .comment-date {
    color: #777;
    font-size: 11px;
}

.manga-comments-box .comment-date time {
    color: #777;
}

/* Konten komentar */
.manga-comments-box .comment-content {
    color: var(--text);
    font-size: 13px;
    line-height: 1.6;
    margin-top: 0;
    word-wrap: break-word;
}

.manga-comments-box .comment-content p {
    margin: 0 0 8px;
}

.manga-comments-box .comment-content p:last-child {
    margin-bottom: 0;
}

/* Tombol balas */
.manga-comments-box .comment-reply {
    margin-top: 6px;
}

.manga-comments-box .comment-reply .comment-reply-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border: 1px solid var(--accent-border);
    border-radius: 20px;
    transition: all .15s;
}

.manga-comments-box .comment-reply .comment-reply-link:hover {
    background: var(--accent);
    color: #fff;
}

/* Children (balasan) */
.manga-comments-box .comment-list .children {
    list-style: none;
    margin-left: 60px;
    padding-left: 15px;
    border-left: 2px solid var(--border);
}

.manga-comments-box .comment-list .children .comment-body {
    padding: 10px 0;
}

/* Responsive */
@media (max-width: 600px) {
    .manga-comments-box .comment-avatar,
    .manga-comments-box .comment-avatar img,
    .manga-comments-box .comment-avatar-default {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    .manga-comments-box .comment-list .children {
        margin-left: 30px;
        padding-left: 10px;
    }
}

/* ===== TOAST NOTIFICATION ===== */
.mrlite-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    color: var(--text-white);
    padding: 12px 20px;
    border-radius: var(--radius);
    font-size: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .3s, transform .3s;
    max-width: 350px;
}
.mrlite-toast.show {
    opacity: 1;
    transform: translateY(0);
}
.mrlite-toast-success {
    border-left-color: #4caf50;
}
.mrlite-toast-error {
    border-left-color: #f44336;
}

/* ===== SEARCH WRAPPER & SUGGESTIONS ===== */
.search-wrapper {
    position: relative;
}

.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-top: 5px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    z-index: 1000;
    display: none;
    max-height: 400px;
    overflow-y: auto;
}

.search-suggestions.active {
    display: block;
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background .15s;
    border-bottom: 1px solid var(--border);
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background: var(--bg-input);
}

.suggestion-thumb {
    width: 40px;
    height: 53px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}

.suggestion-info {
    flex: 1;
    min-width: 0;
}

.suggestion-title {
    color: var(--text-white);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-type {
    color: #888;
    font-size: 11px;
}

.suggestion-item.no-thumb {
    justify-content: flex-start;
    color: var(--text-light);
    font-size: 13px;
}

/* ===== SEARCH PAGE ===== */
.page-search {
    margin-bottom: 40px;
}

.page-search .page-title {
    color: var(--text-white);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

.search-page-form {
    margin-bottom: 20px;
}

.search-page-search {
    display: flex;
    max-width: 600px;
}

.search-page-search input[type="search"] {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px 0 0 8px;
    color: var(--text-white);
    padding: 12px 16px;
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
}

.search-page-search input[type="search"]:focus {
    border-color: var(--accent);
}

.search-page-search button {
    background: var(--accent);
    border: 0;
    color: #fff;
    border-radius: 0 8px 8px 0;
    padding: 12px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background .2s;
}

.search-page-search button:hover {
    background: var(--accent-hover);
}

.search-results-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.search-results-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.search-term-info {
    color: var(--text);
    font-size: 14px;
}

.search-term-info strong {
    color: var(--accent);
}

.search-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.search-no-results-icon {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.search-no-results h2 {
    color: var(--text-white);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.search-no-results p {
    color: var(--text);
    font-size: 14px;
}

/* ===== TAHTA READER PAGE (PAPAN PERINGKAT) ===== */
.page-tahta-reader {
    margin-bottom: 40px;
}

/* ===== TOMBOL SWITCH: READER / GRANDMASTER ===== */
.tahta-switch {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    background: var(--bg-card, #22202b);
    border: 1px solid var(--border, #333);
    border-radius: 12px;
    padding: 6px;
    max-width: 400px;
}

.tahta-switch-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted, #aaa);
    text-decoration: none;
    transition: all .2s;
    border: 1px solid transparent;
}

.tahta-switch-btn:hover {
    color: var(--text, #fff);
    background: rgba(255,255,255,0.05);
    text-decoration: none;
}

.tahta-switch-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #ff6b00, #ffc107);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(255,107,0,0.3);
}

.reader-rank {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reader-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 15px 20px;
    transition: transform .2s, box-shadow .2s;
}

.reader-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.reader-item.gold {
    border-color: #ffd700;
    background: linear-gradient(135deg, rgba(255,215,0,0.1) 0%, var(--bg-card) 100%);
}

.reader-item.silver {
    border-color: #c0c0c0;
    background: linear-gradient(135deg, rgba(192,192,192,0.1) 0%, var(--bg-card) 100%);
}

.reader-item.bronze {
    border-color: #cd7f32;
    background: linear-gradient(135deg, rgba(205,127,50,0.1) 0%, var(--bg-card) 100%);
}

.reader-rank-num {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    text-align: center;
}

.rank-medal {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 3px;
}

.rank-number {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
}

.reader-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--accent);
}

.reader-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
}

.reader-info {
    flex: 1;
    min-width: 0;
}

.reader-name {
    color: var(--text-white);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.reader-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--accent-light);
    border: 1px solid var(--accent-border);
    color: var(--level-color, var(--accent));
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    margin-bottom: 6px;
}

.reader-level-icon {
    font-size: 12px;
    line-height: 1;
}

.reader-level-text {
    line-height: 1;
}

.reader-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #888;
    font-size: 12px;
    margin-bottom: 6px;
}

.reader-chapters {
    color: var(--text-light);
}

.reader-total-xp {
    color: var(--level-color, var(--accent));
    font-weight: 600;
}

.reader-guest-badge {
    display: inline-block;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: #888;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reader-xp-bar {
    position: relative;
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
    max-width: 300px;
}

.reader-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--level-color, var(--accent)) 0%, #ff8c33 100%);
    border-radius: 4px;
    transition: width .3s;
}

.reader-xp-label {
    position: absolute;
    top: -2px;
    right: 5px;
    font-size: 9px;
    color: var(--text-white);
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.reader-profile-link {
    background: var(--accent-light);
    border: 1px solid var(--accent-border);
    color: var(--accent);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 20px;
    white-space: nowrap;
    transition: all .2s;
}

.reader-profile-link:hover {
    background: var(--accent);
    color: #fff;
}

/* ===== KONTAK PAGE (HUBUNGI KAMI) ===== */
.page-kontak {
    margin-bottom: 40px;
}

/* ===== Hero Section ===== */
.kontak-hero {
    text-align: center;
    padding: 40px 20px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, rgba(255,107,0,0.08) 0%, rgba(255,193,7,0.05) 100%);
    border: 1px solid rgba(255,107,0,0.2);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.kontak-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255,107,0,0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.kontak-hero-icon {
    font-size: 56px;
    line-height: 1;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 15px rgba(255,107,0,0.4));
    animation: kontak-pulse 2s ease-in-out infinite;
}

@keyframes kontak-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.kontak-hero-title {
    color: var(--text-white);
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 10px;
}

.kontak-hero-desc {
    color: var(--text);
    font-size: 14px;
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 20px;
}

.kontak-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.4);
    color: #4caf50;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
}

.kontak-hero-badge-dot {
    width: 8px;
    height: 8px;
    background: #4caf50;
    border-radius: 50%;
    animation: kontak-dot-pulse 1.5s ease-in-out infinite;
}

@keyframes kontak-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(76, 175, 80, 0); }
}

/* ===== Contact Grid ===== */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
    max-width: 900px;
    margin: 0 auto 30px;
}

.contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 25px 20px;
    text-align: center;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    text-decoration: none;
    position: relative;
}

.contact-card-active:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(255,107,0,0.15);
    border-color: var(--accent);
}

.contact-card-icon {
    font-size: 44px;
    margin-bottom: 12px;
    transition: transform .2s;
    filter: drop-shadow(0 0 8px rgba(255,107,0,0.2));
}

.contact-card-active:hover .contact-card-icon {
    transform: scale(1.1);
}

.contact-card-info {
    margin-bottom: 15px;
}

.contact-name {
    color: var(--text-white);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 5px;
}

.contact-label {
    color: #888;
    font-size: 12px;
}

.contact-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 20px;
    transition: all .2s;
}

.contact-card-active:hover .contact-action-btn {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(255,107,0,0.3);
}

/* ===== Contact Coming Soon ===== */
.contact-card-soon {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(30%);
}

.contact-card-soon:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
}

.contact-card-soon-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: #888;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-card-soon .contact-card-icon {
    filter: none;
    opacity: 0.7;
}

.contact-action-disabled {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: #888;
    font-weight: 500;
}

/* ===== Info Box ===== */
.kontak-info-box {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.kontak-info-icon {
    font-size: 28px;
    flex-shrink: 0;
    line-height: 1.2;
}

.kontak-info-content {
    flex: 1;
}

.kontak-info-title {
    color: var(--text-white);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.kontak-info-desc {
    color: #888;
    font-size: 13px;
    line-height: 1.7;
}

.kontak-info-desc a {
    color: var(--accent);
    font-weight: 600;
}

.kontak-info-desc a:hover {
    text-decoration: underline;
}

/* ===== DONASI PAGE (DUKUNG BABU) ===== */
.page-donasi {
    margin-bottom: 40px;
}

/* ===== Hero Section ===== */
.donasi-hero {
    text-align: center;
    padding: 40px 20px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, rgba(255,107,0,0.08) 0%, rgba(255,193,7,0.05) 100%);
    border: 1px solid rgba(255,107,0,0.2);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.donasi-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255,107,0,0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.donasi-hero-icon {
    font-size: 56px;
    line-height: 1;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 15px rgba(255,107,0,0.4));
    animation: donasi-pulse 2s ease-in-out infinite;
}

@keyframes donasi-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.donasi-hero-title {
    color: var(--text-white);
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 10px;
}

.donasi-hero-desc {
    color: var(--text);
    font-size: 14px;
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 20px;
}

.donasi-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,193,7,0.15);
    border: 1px solid rgba(255,193,7,0.4);
    color: #ffc107;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
}

.donasi-hero-badge-dot {
    width: 8px;
    height: 8px;
    background: #ffc107;
    border-radius: 50%;
    animation: donasi-dot-pulse 1.5s ease-in-out infinite;
}

@keyframes donasi-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,193,7,0.5); }
    50% { box-shadow: 0 0 0 6px rgba(255,193,7,0); }
}

/* ===== Donasi Grid ===== */
.donasi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 700px;
    margin: 0 auto 30px;
}

.donasi-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 30px 20px;
    text-align: center;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    text-decoration: none;
    position: relative;
}

.donasi-card-active:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(255,107,0,0.15);
    border-color: var(--accent);
}

.donasi-card-icon {
    font-size: 52px;
    margin-bottom: 12px;
    transition: transform .2s;
    filter: drop-shadow(0 0 10px rgba(255,107,0,0.3));
}

.donasi-card-active:hover .donasi-card-icon {
    transform: scale(1.1);
}

.donasi-card-info {
    margin-bottom: 15px;
}

.donasi-name {
    color: var(--text-white);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.donasi-label {
    color: #888;
    font-size: 13px;
}

.donasi-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #ff6b00, #ff8c00);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 24px;
    transition: all .2s;
    box-shadow: 0 3px 10px rgba(255,107,0,0.3);
}

.donasi-card-active:hover .donasi-btn {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255,107,0,0.4);
}

/* ===== Donasi Coming Soon ===== */
.donasi-card-soon {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(30%);
}

.donasi-card-soon:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
}

.donasi-card-soon-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: #888;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.donasi-card-soon .donasi-card-icon {
    filter: none;
    opacity: 0.7;
}

.donasi-btn-disabled {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: #888;
    font-weight: 600;
    box-shadow: none;
}

/* ===== QRIS Section ===== */
.donasi-qr-section {
    text-align: center;
    margin-bottom: 30px;
}

.donasi-qr-box {
    display: inline-block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 30px;
    max-width: 400px;
    width: 100%;
    position: relative;
}

.donasi-qr-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.donasi-qr-icon {
    font-size: 24px;
}

.donasi-qr-title {
    color: var(--text-white);
    font-size: 20px;
    font-weight: 700;
}

.donasi-qr-badge {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: #888;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.qr-placeholder {
    width: 200px;
    height: 200px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.qr-placeholder span {
    color: #333;
    font-size: 48px;
    font-weight: 700;
}

.donasi-qr-note {
    color: var(--text-light);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 15px;
}

.donasi-qr-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    text-align: left;
}

.donasi-qr-step {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #888;
    font-size: 12px;
    line-height: 1.5;
}

.donasi-qr-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--accent-light);
    border: 1px solid var(--accent-border);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ===== Info Box ===== */
.donasi-info-box {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    max-width: 700px;
    margin: 0 auto;
}

.donasi-info-icon {
    font-size: 28px;
    flex-shrink: 0;
    line-height: 1.2;
}

.donasi-info-content {
    flex: 1;
}

.donasi-info-title {
    color: var(--text-white);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.donasi-info-desc {
    color: #888;
    font-size: 13px;
    line-height: 1.7;
}

/* ===== Light Mode ===== */
body.light-mode .kontak-hero,
body.light-mode .donasi-hero {
    background: linear-gradient(135deg, rgba(255,107,0,0.1) 0%, rgba(255,193,7,0.05) 100%);
    border-color: rgba(255,107,0,0.3);
}

body.light-mode .kontak-info-box,
body.light-mode .donasi-info-box,
body.light-mode .contact-card,
body.light-mode .donasi-card,
body.light-mode .donasi-qr-box {
    background: #fff;
    border-color: #e0e0e0;
}

body.light-mode .contact-card-soon,
body.light-mode .donasi-card-soon {
    background: #f8f8fa;
    border-color: #e0e0e0;
}

body.light-mode .contact-card-soon-badge,
body.light-mode .donasi-card-soon-badge,
body.light-mode .donasi-qr-badge {
    background: #f0f0f2;
    border-color: #ddd;
    color: #888;
}

body.light-mode .contact-action-disabled,
body.light-mode .donasi-btn-disabled {
    background: #f0f0f2;
    border-color: #ddd;
    color: #888;
}

body.light-mode .contact-label,
body.light-mode .donasi-label {
    color: #666;
}

body.light-mode .donasi-qr-step-num {
    background: rgba(255,107,0,0.1);
    border-color: rgba(255,107,0,0.3);
}

body.light-mode .donasi-qr-placeholder {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
    .kontak-hero, .donasi-hero {
        padding: 30px 15px;
    }

    .kontak-hero-title, .donasi-hero-title {
        font-size: 22px;
    }

    .donasi-grid {
        grid-template-columns: 1fr;
    }

    .kontak-info-box, .donasi-info-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ===== PROFILE PAGE ===== */
.page-profile {
    margin-bottom: 40px;
}

.profile-banner-wrap {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    background: var(--bg-card);
}

.profile-banner {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.profile-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid var(--accent);
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info {
    flex: 1;
    min-width: 0;
}

.profile-name {
    color: var(--text-white);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 5px;
}

.profile-email {
    display: block;
    color: #888;
    font-size: 13px;
    margin-bottom: 8px;
}

.profile-level-badge {
    display: inline-block;
    background: var(--accent-light);
    border: 1px solid var(--accent-border);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.profile-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.stat-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.stat-value {
    color: var(--text-white);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 3px;
}

.stat-label {
    color: #888;
    font-size: 12px;
}

.profile-xp-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.profile-xp-title {
    color: var(--text-white);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
}

.profile-xp-bar {
    position: relative;
    height: 12px;
    background: var(--bg-input);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.profile-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, #ff8c33 100%);
    border-radius: 6px;
    transition: width .3s;
}

.profile-xp-label {
    position: absolute;
    top: -2px;
    right: 8px;
    font-size: 10px;
    color: var(--text-white);
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.profile-xp-note {
    color: #888;
    font-size: 12px;
}

.profile-actions {
    display: flex;
    gap: 10px;
}

.profile-action-btn {
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all .2s;
}

.profile-action-btn:hover {
    background: var(--accent-hover);
    color: #fff;
    transform: translateY(-1px);
}

.profile-action-btn.logout {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-light);
}

.profile-action-btn.logout:hover {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

/* ============================================================
 * USER LEVEL & XP SYSTEM (GAMIFICATION)
 * ============================================================ */

/* ===== Badge Level di Header Profil ===== */
.profile-level-badge-wrap {
    margin-bottom: 14px;
}

.profile-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.15) 0%, rgba(255, 107, 0, 0.05) 100%);
    border: 1px solid var(--level-color, var(--accent-border));
    color: var(--level-color, var(--accent));
    font-size: 13px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 24px;
    box-shadow: 0 0 12px rgba(255, 107, 0, 0.15);
    letter-spacing: 0.3px;
}

.profile-level-icon {
    font-size: 16px;
    line-height: 1;
}

.profile-level-text {
    line-height: 1.2;
}

/* ===== Progress Bar XP di Header Profil ===== */
.profile-xp-progress-wrap {
    max-width: 420px;
}

.profile-xp-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.profile-xp-progress-label {
    color: #888;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-xp-progress-value {
    color: var(--text-light);
    font-size: 11px;
    font-weight: 600;
}

.profile-xp-progress-bar {
    position: relative;
    height: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.profile-xp-progress-fill {
    position: relative;
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, #ff8c33 50%, #ffc107 100%);
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    box-shadow: 0 0 8px rgba(255, 107, 0, 0.5);
}

.profile-xp-progress-shine {
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    animation: mrlite-xp-shine 2.5s infinite;
}

@keyframes mrlite-xp-shine {
    0% { left: -30%; }
    60% { left: 110%; }
    100% { left: 110%; }
}

.profile-xp-progress-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
}

.profile-xp-progress-pct {
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
}

.profile-xp-progress-total {
    color: #888;
    font-size: 11px;
}

/* ===== Tab Navigasi Profil ===== */
.profile-tabs-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.profile-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.2);
}

.profile-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    padding: 14px 20px;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}

.profile-tab:hover {
    color: var(--text-white);
}

.profile-tab.active {
    color: var(--accent);
}

.profile-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
}

.profile-tab-content {
    display: none;
    padding: 20px;
}

.profile-tab-content.active {
    display: block;
    animation: mrlite-tab-fade 0.3s ease;
}

/* ===== Stat Card Klikable ===== */
.profile-stat-card.clickable {
    cursor: pointer;
    border: 1px solid var(--border);
    transition: all 0.2s;
    font-family: inherit;
    text-align: center;
    width: 100%;
}

.profile-stat-card.clickable:hover {
    border-color: var(--accent);
    background: var(--accent-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.15);
}

.profile-stat-card.clickable:active {
    transform: translateY(0);
}

.stat-hint {
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    margin-top: 6px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.profile-stat-card.clickable:hover .stat-hint {
    opacity: 1;
}

/* ===== History Section (Profil) ===== */
.history-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.history-section-count {
    color: #888;
    font-size: 12px;
    font-weight: 600;
    background: var(--bg-input);
    border: 1px solid var(--border);
    padding: 4px 12px;
    border-radius: 20px;
}

.profile-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-history-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 15px;
    transition: border-color 0.2s;
}

.profile-history-item:hover {
    border-color: var(--accent);
}

.profile-history-item-icon {
    font-size: 20px;
    line-height: 1.4;
    flex-shrink: 0;
}

.profile-history-item-info {
    flex: 1;
    min-width: 0;
}

.profile-history-item-title {
    display: block;
    color: var(--text-white);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 2px;
    transition: color 0.2s;
}

.profile-history-item-title:hover {
    color: var(--accent);
}

.profile-history-item-manga {
    display: block;
    color: var(--accent);
    font-size: 12px;
    text-decoration: none;
    margin-bottom: 4px;
    transition: opacity 0.2s;
}

.profile-history-item-manga:hover {
    opacity: 0.8;
}

.profile-history-item-content {
    color: #888;
    font-size: 12px;
    line-height: 1.5;
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.profile-history-item-date {
    color: #666;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 2px;
}

.history-empty {
    text-align: center;
    padding: 40px 20px;
    color: #888;
}

.history-empty-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.history-empty p {
    font-size: 14px;
    margin-bottom: 15px;
}

.history-empty-link {
    display: inline-block;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 20px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    transition: all 0.2s;
}

.history-empty-link:hover {
    background: var(--accent);
    color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .profile-history-item {
        flex-wrap: wrap;
    }

    .profile-history-item-date {
        width: 100%;
        padding-top: 0;
        margin-top: 4px;
    }
}

@keyframes mrlite-tab-fade {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Kartu Hero Level (Tab Level & Pangkat) ===== */
.level-hero-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.08) 0%, rgba(255, 107, 0, 0.02) 60%, var(--bg-card) 100%);
    border: 1px solid rgba(255, 107, 0, 0.2);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
}

.level-hero-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--level-color, var(--accent)) 0%, transparent 70%);
    opacity: 0.08;
    border-radius: 50%;
    pointer-events: none;
}

.level-hero-icon {
    font-size: 48px;
    line-height: 1;
    filter: drop-shadow(0 0 12px rgba(255, 107, 0, 0.4));
    flex-shrink: 0;
}

.level-hero-info {
    flex: 1;
    min-width: 0;
}

.level-hero-level {
    display: block;
    color: var(--level-color, var(--accent));
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3px;
}

.level-hero-title {
    display: block;
    color: var(--text-white);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
}

.level-hero-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.level-hero-progress-bar {
    flex: 1;
    height: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.level-hero-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--level-color, var(--accent)) 0%, #ffc107 100%);
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 0 10px rgba(255, 107, 0, 0.4);
}

.level-hero-progress-text {
    color: var(--text-light);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.level-hero-total {
    color: #888;
    font-size: 12px;
}

.level-up-demo-btn {
    display: inline-block;
    background: var(--accent-light);
    border: 1px solid var(--accent-border);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.2s;
    font-family: inherit;
}

.level-up-demo-btn:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(255, 107, 0, 0.3);
}

/* ===== Kartu Info Level ===== */
.level-info-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.level-info-title {
    color: var(--text-white);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
}

.level-info-subtitle {
    color: #888;
    font-size: 13px;
    margin-bottom: 15px;
}

/* ===== Daftar XP per Aktivitas ===== */
.level-xp-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.level-xp-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    transition: border-color 0.2s, transform 0.2s;
}

.level-xp-item:hover {
    border-color: var(--accent-border);
    transform: translateX(3px);
}

.level-xp-item-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.level-xp-item-info {
    flex: 1;
    min-width: 0;
}

.level-xp-item-name {
    display: block;
    color: var(--text-light);
    font-size: 14px;
    font-weight: 600;
}

.level-xp-item-desc {
    display: block;
    color: #888;
    font-size: 12px;
}

.level-xp-item-value {
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

/* ===== Statistik XP per Aktivitas ===== */
.level-xp-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.level-xp-stat {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 15px;
    text-align: center;
}

.level-xp-stat-label {
    display: block;
    color: #888;
    font-size: 12px;
    margin-bottom: 6px;
}

.level-xp-stat-value {
    display: block;
    color: var(--text-white);
    font-size: 18px;
    font-weight: 700;
}

/* ===== Daftar Tingkatan Pangkat (Tier List) ===== */
.level-tier-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.level-tier-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 13px 16px;
    transition: border-color 0.2s, opacity 0.2s;
    opacity: 0.75;
}

.level-tier-item:hover {
    border-color: var(--tier-color, var(--accent-border));
    opacity: 1;
}

.level-tier-item.current {
    border-color: var(--tier-color, var(--accent));
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.08) 0%, var(--bg-input) 100%);
    opacity: 1;
    box-shadow: 0 0 12px rgba(255, 107, 0, 0.08);
}

.level-tier-icon {
    font-size: 28px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
}

.level-tier-info {
    flex: 1;
    min-width: 0;
}

.level-tier-title {
    display: block;
    color: var(--text-light);
    font-size: 14px;
    font-weight: 700;
}

.level-tier-range {
    display: block;
    color: #888;
    font-size: 12px;
}

.level-tier-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--tier-color, var(--accent));
    background: rgba(255, 107, 0, 0.08);
    border: 1px solid rgba(255, 107, 0, 0.2);
    padding: 4px 10px;
    border-radius: 16px;
    white-space: nowrap;
}

/* ===== DARK MODE OVERRIDES ===== */
body.light-mode .profile-xp-progress-bar,
body.light-mode .level-hero-progress-bar {
    background: #eee;
    border-color: #ddd;
}

body.light-mode .level-xp-item,
body.light-mode .level-xp-stat,
body.light-mode .level-tier-item {
    background: #f8f8fa;
    border-color: #e5e5ea;
}

body.light-mode .profile-tabs {
    background: #f8f8fa;
    border-color: #e5e5ea;
}

/* ===== Animasi Level Up ===== */
.mrlite-level-up-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    backdrop-filter: blur(4px);
}

.mrlite-level-up-overlay.show {
    opacity: 1;
    visibility: visible;
}

.mrlite-level-up-card {
    background: linear-gradient(160deg, #1a1a22 0%, #22202b 50%, #2a2230 100%);
    border: 2px solid rgba(255, 107, 0, 0.5);
    border-radius: 20px;
    padding: 40px 50px;
    text-align: center;
    box-shadow: 0 0 60px rgba(255, 107, 0, 0.3), inset 0 0 30px rgba(255, 107, 0, 0.05);
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: 90%;
}

.mrlite-level-up-overlay.show .mrlite-level-up-card {
    transform: scale(1);
}

.mrlite-level-up-icon {
    font-size: 64px;
    margin-bottom: 15px;
    animation: mrlite-level-up-bounce 1s ease infinite;
}

@keyframes mrlite-level-up-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-12px) scale(1.08); }
}

.mrlite-level-up-label {
    display: block;
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.mrlite-level-up-level {
    display: block;
    color: var(--text-white);
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 8px;
    text-shadow: 0 0 20px rgba(255, 107, 0, 0.5);
}

.mrlite-level-up-title {
    display: block;
    color: var(--text-light);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}

.mrlite-level-up-xp {
    display: block;
    color: #888;
    font-size: 13px;
}

/* Partikel level up */
.mrlite-level-up-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(255, 107, 0, 0.8);
    pointer-events: none;
    animation: mrlite-particle-float 2.5s ease-out forwards;
}

@keyframes mrlite-particle-float {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-120px) scale(0.3); }
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
    .profile-level-badge {
        font-size: 12px;
        padding: 5px 12px;
    }

    .profile-xp-progress-wrap {
        max-width: 100%;
    }

    .profile-tab {
        font-size: 12px;
        padding: 12px 14px;
    }

    .level-hero-card {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 20px;
    }

    .level-hero-progress {
        flex-direction: column;
        gap: 6px;
    }

    .level-xp-stats {
        grid-template-columns: 1fr;
    }

    .level-hero-title {
        font-size: 18px;
    }

    .level-tier-item {
        flex-wrap: wrap;
        gap: 10px;
    }

    .level-tier-badge {
        width: 100%;
        text-align: center;
    }
}

/* ===== READER WEBTOON STYLE (MAX WIDTH) ===== */
.reader-heading {
    padding: 15px;
    border-bottom: 1px solid var(--border);
}

.reader-heading h1 {
    color: var(--text-white);
    font-size: 18px;
    text-align: center;
}

.reader-heading .back-link {
    display: inline-block;
    margin-top: 5px;
    font-size: 13px;
}

.reader-nav {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 15px;
    border-top: 1px solid var(--border);
    max-width: 800px;
    margin: 0 auto;
}

.reader-nav a {
    background: var(--accent);
    color: #fff;
    padding: 10px 18px;
    border-radius: var(--radius);
    font-weight: 500;
}

.reader-nav a:hover {
    background: var(--accent-hover);
    color: #fff;
}

.reader-nav .next {
    margin-left: auto;
}

/* ===== SORTING & FILTER (DAFTAR MANHWA) ===== */
.manga-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 15px;
}

.manga-sort-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.manga-sort-form label {
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
}

.manga-sort-form select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-light);
    padding: 7px 12px;
    font-size: 13px;
    outline: none;
    cursor: pointer;
}

.manga-sort-form select:focus {
    border-color: var(--accent);
}

.manga-sort-form button {
    background: var(--accent);
    border: 0;
    color: #fff;
    border-radius: 6px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s;
}

.manga-sort-form button:hover {
    background: var(--accent-hover);
}

.manga-count {
    color: #888;
    font-size: 13px;
}

/* ===== PAGINATION NUMBERED (1, 2, 3...) ===== */
.pagination-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
}

.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination li {
    margin: 0;
}

.pagination a,
.pagination span {
    background: var(--bg-card);
    border-radius: 6px;
    color: var(--text);
    padding: 8px 14px;
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 500;
    min-width: 36px;
    text-align: center;
    transition: all .2s;
    display: inline-block;
}

.pagination a:hover {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
}

.pagination .current,
.pagination .pagination-current .current {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    cursor: default;
}

.pagination .disabled span {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination .pagination-ellipsis span {
    background: transparent;
    border-color: transparent;
    color: var(--text);
    cursor: default;
    min-width: 24px;
    padding: 8px 6px;
}

.pagination .pagination-prev a,
.pagination .pagination-next a {
    font-weight: 600;
}

.pagination-info {
    display: inline-block;
    color: var(--text);
    font-size: 13px;
    opacity: 0.8;
    text-align: center;
}

/* PAGINATION VERTIKAL - sudah diperbaiki untuk horizontal */
.pagination-vertical {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 25px;
    list-style: none;
}

.pagination-vertical a,
.pagination-vertical span {
    background: var(--bg-card);
    border-radius: 6px;
    color: var(--text);
    padding: 8px 14px;
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 500;
    min-width: 36px;
    text-align: center;
    transition: all .2s;
}

.pagination-vertical a:hover {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
}

.pagination-vertical .current {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ===== CONTACT COMING SOON ===== */
.contact-card.coming-soon {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    position: relative;
}

.contact-card.coming-soon:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
}

.contact-card.coming-soon .contact-icon {
    filter: grayscale(1);
}

.contact-card.coming-soon .contact-label {
    color: #999;
}

.contact-card.coming-soon .coming-soon-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
}

/* ===== PROJECT BADGE (KOMIKHWA.COM) ===== */
.project-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--accent);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.manga-thumb .project-badge,
.project-cover .project-badge {
    position: absolute;
    top: 8px;
    left: 8px;
}

/* ===== MULTI GENRE FILTER ===== */
.manga-sort-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.manga-sort-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.manga-genre-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.manga-genre-label {
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
}

.manga-genre-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.manga-genre-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--text-light);
    cursor: pointer;
    transition: all .2s;
    user-select: none;
}

.manga-genre-checkbox:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.manga-genre-checkbox input[type="checkbox"] {
    accent-color: var(--accent);
    cursor: pointer;
}

.manga-genre-checkbox:has(input:checked) {
    background: var(--accent-light);
    border-color: var(--accent-border);
    color: var(--accent);
}

/* ===== THUMBNAIL OPTIMIZATION ===== */
.manga-thumb img,
.project-cover img,
.latest-cover img,
.recommend-cover img,
.slider-thumb img {
    background: var(--bg-input);
    transition: opacity .3s ease;
}

.manga-thumb img.lazy-loading,
.project-cover img.lazy-loading,
.latest-cover img.lazy-loading,
.recommend-cover img.lazy-loading,
.slider-thumb img.lazy-loading {
    opacity: 0.3;
}

.manga-thumb img.lazy-loaded,
.project-cover img.lazy-loaded,
.latest-cover img.lazy-loaded,
.recommend-cover img.lazy-loaded,
.slider-thumb img.lazy-loaded {
    opacity: 1;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .project-row { grid-template-columns: repeat(3, 1fr); }
    .latest-row { grid-template-columns: repeat(3, 1fr); }
    .contact-grid { grid-template-columns: repeat(2, 1fr); }
    .donasi-grid { grid-template-columns: repeat(2, 1fr); }
    .view-dropdown { display: none; }
}

@media (max-width: 768px) {
    .project-row { grid-template-columns: repeat(2, 1fr); }
    .latest-row { grid-template-columns: repeat(2, 1fr); }
    .hero-content { padding: 25px; }
    .hero-title { font-size: 22px; }
    /* 40% dari tinggi penuh gambar 16:9 = 22.5vw */
    .hero-carousel { aspect-ratio: 16 / 3.6; min-height: 0; }
    .hero-slides { aspect-ratio: 16 / 3.6; min-height: 0; }
    .search-form input[type="search"] { width: 140px; }
    .main-nav ul { gap: 10px; }
    .view-dropdown { display: none; }
}

@media (max-width: 480px) {
    /* 40% dari tinggi penuh gambar 16:9 = 22.5vw */
    .hero-carousel { aspect-ratio: 16 / 3.6; min-height: 0; }
    .hero-slides { aspect-ratio: 16 / 3.6; min-height: 0; }
    .hero-content { padding: 15px; }
    .hero-title { font-size: 18px; }
    .hero-synopsis { font-size: 12px; }
    .hero-btn-read { font-size: 12px; padding: 8px 18px; }
    .hero-dots { bottom: 10px; }
}

@media (max-width: 600px) {
    .contact-grid { grid-template-columns: 1fr; }
    .donasi-grid { grid-template-columns: 1fr; }
    .reader-item { flex-wrap: wrap; }
    .reader-profile-link { width: 100%; text-align: center; margin-top: 5px; }
    .qr-placeholder { width: 150px; height: 150px; }
    .qr-placeholder span { font-size: 36px; }
    .search-form input[type="search"] { width: 120px; }
    .manga-header { flex-direction: column; }
    .manga-header-thumb { width: 100%; }
    .website-name { font-size: 18px; }
    .project-row { grid-template-columns: 1fr; }
    .latest-row { grid-template-columns: 1fr; }
    .manga-grid { grid-template-columns: 1fr; }
    .hero-arrow { display: none; }
    .header-inner { flex-direction: column; }
    .header-actions { width: 100%; justify-content: center; }
    .view-dropdown { display: none; }
}

/* ===== HALAMAN LOGIN ===== */
.page-login {
    max-width: 480px;
    margin: 40px auto;
    padding: 0 20px;
    flex: 1;
    width: 100%;
}

.page-login .page-title {
    color: var(--text-white);
    font-size: 24px;
    text-align: center;
    margin-bottom: 8px;
}

.page-login .page-subtitle {
    text-align: center;
    color: var(--text);
    margin-bottom: 24px;
}

.login-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px;
}

.login-social-buttons {
    margin-bottom: 20px;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--text);
    font-size: 13px;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.login-form .login-username label,
.login-form .login-password label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-light);
    font-size: 14px;
}

.login-form .login-username input,
.login-form .login-password input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-light);
    font-size: 14px;
    margin-bottom: 14px;
}

.login-form .login-username input:focus,
.login-form .login-password input:focus {
    outline: none;
    border-color: var(--accent);
}

.login-form .login-remember {
    margin-bottom: 14px;
    color: var(--text);
    font-size: 13px;
}

.login-form .login-remember input {
    margin-right: 6px;
}

.login-form .login-submit {
    margin-bottom: 14px;
}

.login-form .login-submit input[type="submit"] {
    width: 100%;
    padding: 12px;
    background: var(--accent);
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.login-form .login-submit input[type="submit"]:hover {
    background: var(--accent-hover);
}

.login-register-link {
    text-align: center;
    color: var(--text);
    font-size: 13px;
}

.login-register-link a {
    color: var(--accent);
    font-weight: 600;
}

.login-register-link a:hover {
    text-decoration: underline;
}

.login-error-message {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.4);
    color: #ff6b6b;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
    margin-bottom: 20px;
}

.login-plugin-warning {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
}

/* ===== REGISTER FORM ===== */
.register-form .login-username,
.register-form .login-password {
    margin-bottom: 14px;
}

.register-form input[type="text"],
.register-form input[type="email"],
.register-form input[type="password"] {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-light);
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: 14px;
    transition: border-color .2s;
}

.register-form input[type="text"]:focus,
.register-form input[type="email"]:focus,
.register-form input[type="password"]:focus {
    outline: none;
    border-color: var(--accent-border);
}

/* ===== LINKED ACCOUNTS (PROFIL) ===== */
.profile-linked-accounts {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.linked-accounts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.linked-account-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 16px;
}

.linked-account-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.linked-account-item:nth-child(1) .linked-account-icon {
    background: #4285F4;
}

.linked-account-item:nth-child(2) .linked-account-icon {
    background: #5865F2;
}

.linked-account-name {
    flex: 1;
    font-weight: 600;
    color: var(--text-light);
}

.linked-account-status {
    font-size: 13px;
    font-weight: 600;
}

.linked-account-status.linked {
    color: #4caf50;
}

.linked-account-status.link-btn {
    color: var(--accent);
    text-decoration: none;
    padding: 6px 14px;
    border: 1px solid var(--accent-border);
    border-radius: 20px;
    transition: all .2s;
}

.linked-account-status.link-btn:hover {
    background: var(--accent-light);
    color: var(--accent);
}

/* ===== GOALS TRAKTEER WIDGET ===== */
/* Optimized: z-index sengaja dibuat lebih rendah dari header (100),
   chat widget (9999), dan tombol navigasi lainnya, sehingga tidak
   menutupi/memblokir elemen penting di web.
   pointer-events: none pada container, hanya iframe yang bisa diklik.
   Ukuran disesuaikan agar konten embed tetap utuh (tidak terpotong). */
.trakteer-goals-widget {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 90;
    width: 300px;
    height: 130px;
    max-width: 90vw;
    border-radius: 12px;
    overflow: visible;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    background: transparent;
    transition: all .2s;
    pointer-events: none;
}

.trakteer-goals-widget.closed {
    display: none;
}

.trakteer-goals-widget iframe {
    transform: scale(0.825);
    transform-origin: top left;
    width: 500%;
    height: 500%;
    border: none;
    display: block;
    pointer-events: auto;
    border-radius: 12px;
}

/* Tombol tutup (X) untuk widget Trakteer */
.trakteer-goals-close {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 95;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: background .2s, transform .2s;
    pointer-events: auto;
}

.trakteer-goals-close:hover {
    background: rgba(255, 60, 60, 0.9);
    transform: scale(1.1);
}

.trakteer-goals-widget:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Geser goals trakteer ke kiri saat tombol setting ada (halaman chapter) */
.reader-setting-btn + .khwa-chat-widget ~ .trakteer-goals-widget {
    left: 20px;
}

/* ===== LIVE CHAT WIDGET (KHWA) ===== */
.khwa-chat-widget {
    position: fixed;
    bottom: var(--fab-bottom, 20px);
    right: 20px;
    z-index: 9999;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    transition: bottom .3s cubic-bezier(.4,0,.2,1);
}

.khwa-chat-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.4);
    transition: all .2s;
    position: relative;
}

.khwa-chat-toggle:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 0, 0.5);
}

.khwa-chat-icon { font-size: 18px; }
.khwa-chat-label { letter-spacing: 0.5px; }

/* Badge unread */
.khwa-chat-unread {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff3b30;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.4);
}

/* ===== SETTING BUTTON (Chapter Only) ===== */
.reader-setting-btn {
    position: fixed;
    bottom: var(--fab-bottom, 20px);
    right: 20px;
    z-index: 9998;
    transition: bottom .3s cubic-bezier(.4,0,.2,1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    color: var(--text-light);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.2s;
}

.reader-setting-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 0, 0.4);
}

.reader-setting-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Geser tombol chat ke kiri agar tidak menimpa tombol setting */
.reader-setting-btn + .khwa-chat-widget {
    right: 80px;
}

/* Geser chat box ke kiri saat tombol setting ada */
.reader-setting-btn + .khwa-chat-widget .khwa-chat-box {
    right: 80px;
}

body.light-mode .reader-setting-btn {
    background: #ffffff;
    border-color: #d0d0d0;
    color: #555555;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

body.light-mode .reader-setting-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

@media (max-width: 480px) {
    .reader-setting-btn {
        width: 44px;
        height: 44px;
        bottom: var(--fab-bottom, 15px);
        right: 15px;
    }
    .reader-setting-btn + .khwa-chat-widget {
        right: 70px;
    }
    .reader-setting-btn + .khwa-chat-widget .khwa-chat-box {
        right: 70px;
    }
}

.khwa-chat-box {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 340px;
    max-height: 480px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 9999;
}

.khwa-chat-box.active { display: flex; }

.khwa-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--accent);
    color: #fff;
    padding: 12px 15px;
    font-weight: 600;
    font-size: 14px;
    gap: 8px;
}

.khwa-chat-title { flex: 1; }

.khwa-chat-online {
    font-size: 10px;
    font-weight: 400;
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.5px;
}

.khwa-chat-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

.khwa-chat-close:hover { opacity: 0.8; }

.khwa-chat-body {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 250px;
    max-height: 320px;
    background: var(--bg);
}

/* ===== WELCOME MESSAGE ===== */
.khwa-chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 20px;
    color: var(--text-light);
    opacity: 0.7;
    gap: 8px;
}

.khwa-chat-welcome-icon { font-size: 36px; }
.khwa-chat-welcome-text { font-size: 13px; line-height: 1.5; }

/* ===== LOGIN OVERLAY (Guest) ===== */
.khwa-chat-login-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 20px;
    gap: 12px;
    height: 100%;
    min-height: 250px;
}

.khwa-chat-login-icon {
    font-size: 40px;
    background: var(--bg-input);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border);
}

.khwa-chat-login-text {
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.5;
    max-width: 250px;
    margin: 0;
}

.khwa-chat-login-btn {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    padding: 10px 24px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.3);
}

.khwa-chat-login-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 0, 0.4);
    color: #fff;
}

/* ===== CHAT MESSAGE ITEM ===== */
.khwa-chat-msg {
    display: flex;
    gap: 8px;
    max-width: 100%;
}

.khwa-chat-msg-self {
    flex-direction: row-reverse;
}

.khwa-chat-msg-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border);
}

.khwa-chat-msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.khwa-chat-avatar-default {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-light);
}

/* Frame avatar berdasarkan tier */
.khwa-chat-avatar-frame-manhwa {
    border-color: #17a2b8;
    box-shadow: 0 0 8px rgba(23, 162, 184, 0.4);
}

.khwa-chat-avatar-frame-master {
    border-color: #ffc107;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}

.khwa-chat-avatar-frame-dewa {
    border-color: #ff6b00;
    box-shadow: 0 0 12px rgba(255, 107, 0, 0.6);
    animation: khwa-chat-frame-glow 2s ease-in-out infinite;
}

@keyframes khwa-chat-frame-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 107, 0, 0.4); }
    50% { box-shadow: 0 0 16px rgba(255, 107, 0, 0.8); }
}

.khwa-chat-msg-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: 75%;
}

.khwa-chat-msg-self .khwa-chat-msg-content {
    align-items: flex-end;
}

.khwa-chat-msg-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    flex-wrap: wrap;
}

.khwa-chat-msg-self .khwa-chat-msg-meta {
    justify-content: flex-end;
}

.khwa-chat-msg-name {
    font-weight: 600;
    color: var(--text-light);
    font-size: 12px;
}

.khwa-chat-level-badge {
    font-size: 10px;
    font-weight: 700;
    background: var(--bg-input);
    padding: 1px 6px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.khwa-chat-tier-badge {
    font-size: 10px;
    font-weight: 600;
    background: var(--bg-input);
    padding: 1px 6px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.khwa-chat-msg-time {
    font-size: 10px;
    color: var(--text-muted, #888);
    opacity: 0.8;
}

.khwa-chat-msg-bubble {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.4;
    word-wrap: break-word;
    background: var(--bg-input);
    color: var(--text-light);
    border-bottom-left-radius: 2px;
}

.khwa-chat-msg-self .khwa-chat-msg-bubble {
    background: var(--accent);
    color: #fff;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 2px;
}

/* ===== INPUT ROW ===== */
.khwa-chat-input-row {
    position: relative;
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}

.khwa-chat-input-row input {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-light);
    padding: 8px 14px;
    font-size: 13px;
    outline: none;
    transition: border-color .2s;
}

.khwa-chat-input-row input:focus { border-color: var(--accent); }
.khwa-chat-input-row input:disabled { opacity: 0.6; cursor: not-allowed; }

.khwa-chat-input-row button {
    background: var(--accent);
    border: none;
    color: #fff;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    flex-shrink: 0;
}

.khwa-chat-input-row button:hover { background: var(--accent-hover); }
.khwa-chat-input-row button:disabled { opacity: 0.6; cursor: not-allowed; }

/* ===== CHAR COUNT ===== */
.khwa-chat-char-count {
    font-size: 10px;
    color: var(--text-muted, #888);
    text-align: right;
    padding: 4px 12px 8px;
    background: var(--bg-card);
    border-top: none;
}

.khwa-chat-char-count.over {
    color: #ff3b30;
    font-weight: 600;
}

/* ===== TOAST ===== */
.khwa-chat-toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-card);
    color: var(--text-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 13px;
    z-index: 10000;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    opacity: 0;
    transition: all .3s;
    pointer-events: none;
    max-width: 90vw;
    text-align: center;
}

.khwa-chat-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.khwa-chat-toast-error {
    border-color: #ff3b30;
    color: #ff6b6b;
}

.khwa-chat-toast-success {
    border-color: #28a745;
    color: #5cb85c;
}

/* ============================================================
 * FITUR BARU: POP-UP SEARCH MODAL
 * ============================================================ */
.search-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s;
}
.search-trigger:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: scale(1.05);
}

.mrlite-search-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 20px 20px;
}
.mrlite-search-modal.active {
    display: flex;
    animation: mrlite-search-fade-in 0.2s ease;
}
@keyframes mrlite-search-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.mrlite-search-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}
.mrlite-search-modal-box {
    position: relative;
    width: 100%;
    max-width: 600px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: mrlite-search-slide-down 0.3s ease;
}
@keyframes mrlite-search-slide-down {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.mrlite-search-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 107, 0, 0.05);
}
.mrlite-search-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
}
.mrlite-search-modal-close {
    background: none;
    border: none;
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}
.mrlite-search-modal-close:hover {
    color: #ff3b30;
    background: rgba(255, 59, 48, 0.1);
}
.mrlite-search-modal-body {
    padding: 20px;
}
.mrlite-search-input-wrap {
    position: relative;
    margin-bottom: 16px;
}
.mrlite-search-input-wrap input {
    width: 100%;
    padding: 12px 40px 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
}
.mrlite-search-input-wrap input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}
.mrlite-search-input-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text);
    pointer-events: none;
}
.mrlite-search-results {
    max-height: 400px;
    overflow-y: auto;
}
.mrlite-search-placeholder,
.mrlite-search-loading,
.mrlite-search-no-results {
    text-align: center;
    padding: 30px 20px;
    color: var(--text);
    font-size: 14px;
}
.mrlite-search-loading {
    color: var(--accent);
}
.mrlite-search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    transition: background 0.2s;
    text-decoration: none;
}
.mrlite-search-result-item:hover {
    background: rgba(255, 107, 0, 0.08);
}
.mrlite-search-result-thumb {
    width: 48px;
    height: 64px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mrlite-search-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mrlite-search-result-thumb.no-thumb {
    font-size: 20px;
}
.mrlite-search-result-info {
    flex: 1;
    min-width: 0;
}
.mrlite-search-result-title {
    font-weight: 600;
    color: var(--text-light);
    font-size: 14px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mrlite-search-result-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
}
.mrlite-search-result-type {
    background: rgba(255, 107, 0, 0.15);
    color: var(--accent);
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
}
.mrlite-search-result-status {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
    padding: 2px 8px;
    border-radius: 20px;
}
.mrlite-search-result-chapter {
    background: rgba(23, 162, 184, 0.15);
    color: #17a2b8;
    padding: 2px 8px;
    border-radius: 20px;
}
.mrlite-search-result-score {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    padding: 2px 8px;
    border-radius: 20px;
}

/* ============================================================
 * FITUR BARU: HERO CAROUSEL STYLING (100% height, center 10%)
 * ============================================================ */
.hero-bg {
    background-size: cover !important;
    background-position: center 10% !important; /* PENTING: geser fokus 10% ke atas */
    background-repeat: no-repeat !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}
.hero-bg-img {
    object-fit: cover !important;
    object-position: center 10% !important; /* PENTING: geser fokus 10% ke atas */
}
.hero-overlay {
    /* Overlay hitam pekat */
    background: #000000db !important;
}

/* ============================================================
 * FITUR BARU: LIVE CHAT REDESIGN (Modern)
 * ============================================================ */
.khwa-chat-widget {
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.khwa-chat-toggle {
    border-radius: 50px;
    background: linear-gradient(135deg, var(--accent), #ff8c42);
    box-shadow: 0 4px 16px rgba(255, 107, 0, 0.3);
}
.khwa-chat-box {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.khwa-chat-header {
    background: linear-gradient(135deg, var(--accent), #ff8c42);
    color: #fff;
}
.khwa-chat-msg-bubble {
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.khwa-chat-msg-self .khwa-chat-msg-bubble {
    background: linear-gradient(135deg, var(--accent), #ff8c42);
    color: #fff;
}
.khwa-chat-msg-other .khwa-chat-msg-bubble {
    background: var(--bg-input);
    border: 1px solid var(--border);
}
.khwa-chat-input-row {
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}
.khwa-chat-input-row input {
    border-radius: 20px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    padding: 10px 16px;
}
.khwa-chat-input-row button {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent), #ff8c42);
}

/* ============================================================
 * FITUR BARU: VIEW MODE STANDARDIZATION
 * ============================================================ */
.content-grid.view-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.content-grid.view-large { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.content-grid.view-medium { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.content-grid.view-small { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.content-grid.view-list { display: flex; flex-direction: column; gap: 10px; }
.content-grid.view-detail { display: flex; flex-direction: column; gap: 12px; }
.content-grid.view-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.content-grid.view-content { display: flex; flex-direction: column; gap: 16px; }

/* ============================================================
 * FITUR BARU: EMOJI PICKER (LIVE CHAT)
 * ============================================================ */
.khwa-chat-emoji-btn {
    position: relative;
    background: var(--bg-input) !important;
    border: 1px solid var(--border) !important;
    border-radius: 50% !important;
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    min-height: 35px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    flex-shrink: 0 !important;
    z-index: 10;
}
.khwa-chat-emoji-btn:hover {
    background: var(--accent-light) !important;
    border-color: var(--accent) !important;
}
.khwa-chat-emoji-btn i, .khwa-chat-emoji-btn span {
    pointer-events: none;
}
.khwa-chat-emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 12px;
    right: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4);
    padding: 12px;
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}
.khwa-chat-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}
.khwa-chat-emoji-item {
    background: transparent;
    border: none;
    font-size: 20px;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
}
.khwa-chat-emoji-item:hover {
    background: var(--accent-light);
    transform: scale(1.15);
}
@media (max-width: 480px) {
    .khwa-chat-emoji-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* ===== LIGHT MODE ===== */
body.light-mode .khwa-chat-box {
    background: #ffffff;
    border-color: #e0e0e0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

body.light-mode .khwa-chat-body {
    background: #f8f8f8;
}

body.light-mode .khwa-chat-msg-bubble {
    background: #f0f0f0;
    color: #444;
}

body.light-mode .khwa-chat-msg-self .khwa-chat-msg-bubble {
    background: var(--accent);
    color: #fff;
}

body.light-mode .khwa-chat-input-row {
    background: #ffffff;
    border-top-color: #e0e0e0;
}

body.light-mode .khwa-chat-char-count {
    background: #ffffff;
}

body.light-mode .khwa-chat-login-icon {
    background: #f0f0f0;
    border-color: #e0e0e0;
}

body.light-mode .khwa-chat-toast {
    background: #ffffff;
    color: #444;
    border-color: #e0e0e0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
    .khwa-chat-box {
        width: calc(100vw - 40px);
        right: 20px;
        left: 20px;
        max-height: 70vh;
    }
    /* Saat tombol setting ada, geser chat box agar tidak menimpa */
    .reader-setting-btn + .khwa-chat-widget .khwa-chat-box {
        right: 70px;
        left: 20px;
        width: calc(100vw - 90px);
    }
    .khwa-chat-msg-content {
        max-width: 70%;
    }
}

/* ===== FOOTER LINKS ===== */
.footer-inner {
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--text);
    font-size: 13px;
    transition: color .2s;
}

.footer-links a:hover {
    color: var(--accent);
}

/* ===== GENRE DROPDOWN (Daftar Manhwa) ===== */
.genre-dropdown {
    position: relative;
    display: inline-block;
}

.genre-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 14px;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
}

.genre-dropdown-toggle:hover {
    border-color: var(--accent);
    color: var(--text-white);
}

.genre-dropdown-count {
    color: var(--accent);
    font-size: 12px;
}

.genre-dropdown-arrow {
    font-size: 12px;
    transition: transform .2s;
}

.genre-dropdown.open .genre-dropdown-arrow {
    transform: rotate(180deg);
}

.genre-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    z-index: 1000;
    min-width: 220px;
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
}

.genre-dropdown-menu.open {
    display: block;
}

.genre-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    transition: background .15s;
}

.genre-dropdown-item:hover {
    background: var(--bg-input);
}

.genre-dropdown-item input[type="checkbox"] {
    accent-color: var(--accent);
    cursor: pointer;
}

.genre-dropdown-actions {
    padding: 8px 0 0;
    border-top: 1px solid var(--border);
    margin-top: 8px;
    text-align: center;
}

.genre-apply-btn {
    background: var(--accent);
    border: none;
    color: #fff;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s;
    font-family: inherit;
}

.genre-apply-btn:hover {
    background: var(--accent-hover);
}

/* ===== KSL SOCIAL LOGIN BUTTONS ===== */
.ksl-social-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ksl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all .2s;
    border: 1px solid var(--border);
}

.ksl-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    text-decoration: none;
}

.ksl-btn-google {
    background: #fff;
    color: #333 !important;
    border-color: #ddd;
}

.ksl-btn-google:hover {
    background: #f5f5f5;
}

.ksl-btn-discord {
    background: #5865F2;
    color: #fff !important;
    border-color: #5865F2;
}

.ksl-btn-discord:hover {
    background: #404EED;
    border-color: #404EED;
}

.ksl-btn svg {
    flex-shrink: 0;
}

.ksl-warning {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
    margin-bottom: 10px;
}

.ksl-logged-in {
    background: rgba(0, 200, 83, 0.1);
    border: 1px solid rgba(0, 200, 83, 0.3);
    color: #4caf50;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
}

/* ===== MANGA VIEW SECTION ===== */
.manga-view-section {
    margin-bottom: 40px;
}

/* ===== MANGA VIEW HEADER ===== */
.manga-view-header {
    margin-bottom: 15px;
    justify-content: flex-end;
}

/* ===================================================
   1. FONDASI GRID & KARTU KOMIK (JANGAN DIHAPUS)
   =================================================== */
.manga-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    list-style: none;
    padding: 0;
}

.manga-grid .manga-item {
    background: var(--bg-card);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: transform .2s, box-shadow .2s;
}

.manga-grid .manga-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.manga-grid .manga-thumb {
    position: relative; /* Penting agar badge melayang pas di atas gambar */
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--bg-input);
}

.manga-header-thumb {
    position: relative;
    width: 180px;
    height: 275px;
    overflow: hidden;
    background: var(--bg-input);
}

.manga-grid .manga-thumb img,
.manga-header-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===================================================
   2. ATURAN BADGE (SUPPORT KELAS GRID MAUPUN HEADER)
   =================================================== */
.manga-header-thumb .mirror-badge,
.manga-header-thumb .project-badge,
.manga-grid .manga-thumb .mirror-badge,
.manga-grid .manga-thumb .project-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    right: auto;
    width: auto;
    max-width: max-content;
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    padding: 4px 8px;
    font-weight: 700;
    letter-spacing: 0.4px;
    border-radius: 4px;
    z-index: 3;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.manga-grid .card-body {
    padding: 8px 10px;
}

.manga-info-title {
    font-size: 13px;
    line-height: 1.3;
    min-height: 34px;
    margin-bottom: 6px;
}

.manga-info-title a {
    color: var(--text-white);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.manga-info-title a:hover { color: var(--accent); }

.manga-chapters {
    list-style: none;
    padding: 0;
}

.manga-chapters li {
    border-top: 1px solid var(--border);
}

.manga-chapters li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 11px;
    color: var(--text);
}

.manga-chapters li a:hover { color: var(--accent); }

/* View mode adjustments for manga grid */
.content-grid.view-large.manga-grid { grid-template-columns: repeat(4, 1fr); }
.content-grid.view-medium.manga-grid { grid-template-columns: repeat(6, 1fr); }
.content-grid.view-small.manga-grid { grid-template-columns: repeat(8, 1fr); }
.content-grid.view-tiles.manga-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

.content-grid.view-list.manga-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.content-grid.view-list.manga-grid .manga-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
}

.content-grid.view-list.manga-grid .manga-thumb {
    width: 40px;
    height: 56px;
    aspect-ratio: auto;
    flex-shrink: 0;
}

.content-grid.view-list.manga-grid .card-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    flex: 1;
    padding: 0;
}

.content-grid.view-list.manga-grid .manga-info-title {
    min-height: auto;
    margin: 0;
    font-size: 13px;
    flex: 0 0 200px;
}

.content-grid.view-list.manga-grid .manga-info-title a {
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.content-grid.view-list.manga-grid .manga-chapters {
    display: flex;
    gap: 8px;
    margin: 0;
}

.content-grid.view-list.manga-grid .manga-chapters li {
    border: none;
    padding: 0;
}

.content-grid.view-list.manga-grid .manga-chapters li a {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--bg-input);
    border-radius: 3px;
    gap: 6px;
}

.content-grid.view-detail.manga-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.content-grid.view-detail.manga-grid .manga-item {
    display: flex;
    gap: 15px;
    padding: 15px;
}

.content-grid.view-detail.manga-grid .manga-thumb {
    width: 120px;
    height: 160px;
    aspect-ratio: auto;
    flex-shrink: 0;
}

.content-grid.view-detail.manga-grid .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}

.content-grid.view-detail.manga-grid .manga-info-title {
    min-height: auto;
    font-size: 15px;
    margin-bottom: 6px;
}

.content-grid.view-detail.manga-grid .manga-chapters {
    display: flex;
    gap: 6px;
    margin: 0;
}

.content-grid.view-detail.manga-grid .manga-chapters li {
    border: none;
    padding: 0;
}

.content-grid.view-detail.manga-grid .manga-chapters li a {
    font-size: 10px;
    padding: 2px 6px;
    background: var(--bg-input);
    border-radius: 2px;
}

.content-grid.view-content.manga-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.content-grid.view-content.manga-grid .manga-item {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
}

.content-grid.view-content.manga-grid .manga-item:last-child {
    border-bottom: none;
}

.content-grid.view-content.manga-grid .manga-thumb {
    width: 40px;
    height: 55px;
    aspect-ratio: auto;
    flex-shrink: 0;
}

.content-grid.view-content.manga-grid .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}

.content-grid.view-content.manga-grid .manga-info-title {
    font-size: 13px;
    min-height: auto;
    margin: 0 0 4px;
    padding: 0;
}

.content-grid.view-content.manga-grid .manga-chapters {
    display: flex;
    gap: 6px;
    margin: 0;
}

.content-grid.view-content.manga-grid .manga-chapters li {
    border: none;
    padding: 0;
}

.content-grid.view-content.manga-grid .manga-chapters li a {
    font-size: 10px;
    padding: 2px 6px;
    background: var(--bg-input);
    border-radius: 2px;
}

/* ===== READER PODIUM (TAHTA READER) ===== */
.reader-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 30px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
    border-radius: 10px;
    min-width: 120px;
}

.podium-item.first {
    background: linear-gradient(135deg, rgba(255,215,0,0.15) 0%, var(--bg-card) 100%);
    border: 2px solid #ffd700;
    order: 2;
    padding: 25px 15px;
}

.podium-item.second {
    background: linear-gradient(135deg, rgba(192,192,192,0.1) 0%, var(--bg-card) 100%);
    border: 2px solid #c0c0c0;
    order: 1;
}

.podium-item.third {
    background: linear-gradient(135deg, rgba(205,127,50,0.1) 0%, var(--bg-card) 100%);
    border: 2px solid #cd7f32;
    order: 3;
}

.podium-medal {
    font-size: 32px;
    margin-bottom: 8px;
}

.podium-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--accent);
    margin-bottom: 10px;
}

.podium-item.first .podium-avatar {
    width: 100px;
    height: 100px;
}

.podium-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.podium-name {
    color: var(--text-white);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.podium-level {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--accent-light);
    border: 1px solid var(--accent-border);
    color: var(--level-color, var(--accent));
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    margin-bottom: 4px;
}

.podium-level-icon {
    font-size: 11px;
    line-height: 1;
}

.podium-level-text {
    line-height: 1;
}

.podium-stats {
    color: #888;
    font-size: 12px;
    margin-bottom: 4px;
}

.podium-rank {
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
}

.podium-profile-link {
    display: inline-block;
    margin-top: 6px;
    color: var(--accent, #ff6b00);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    padding: 4px 12px;
    border: 1px solid var(--accent, #ff6b00);
    border-radius: 20px;
    transition: background 0.2s, color 0.2s;
}
.podium-profile-link:hover {
    background: var(--accent, #ff6b00);
    color: #fff;
}

/* ===== MANGA META INFO (SINGLE MANGA) ===== */
.manga-meta-info {
    margin: 10px 0;
}

.manga-meta-row {
    display: flex;
    gap: 8px;
    padding: 3px 0;
    font-size: 13px;
}

.meta-label {
    color: #888;
    font-weight: 500;
    min-width: 80px;
}

.meta-value {
    color: var(--text-light);
}

/* ===== MANGA SYNOPSIS ===== */
.manga-synopsis {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
}

.manga-section-title {
    color: var(--text-white);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent);
}

/* ===== RELATED MANGA ===== */
.related-manga {
    margin-top: 20px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.related-card {
    background: var(--bg-card);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: transform .2s, box-shadow .2s;
}

.related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.related-thumb {
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--bg-input);
    position: relative;
}

.related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-title {
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.3;
    min-height: 36px;
}

/* Chapter badge di thumbnail related manga */
.chapter-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 2;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Badge di thumbnail related manga */
.related-thumb .project-badge,
.related-thumb .mirror-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    right: auto;
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 4px 4px;
    border-radius: 3px;
    z-index: 3;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.related-thumb .project-badge {
    background: var(--accent);
    color: #fff;
}

.related-thumb .mirror-badge {
    background: var(--accent);
    color: #fff;
}

.related-thumb .rating-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    font-size: 10px;
    padding: 2px 6px;
}

.related-title a {
    color: var(--text-white);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-title a:hover { color: var(--accent); }

/* ===== READER BREADCRUMB ===== */
.reader-breadcrumb {
    padding: 10px 15px;
    font-size: 13px;
    color: #999;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}

.reader-breadcrumb a {
    color: var(--accent);
}

.reader-breadcrumb a:hover {
    text-decoration: underline;
}

/* ===== CHAPTER NAV (chnav) ===== */
.chnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.chnav.cbot {
    border-top: 1px solid var(--border);
    border-bottom: none;
}

.chnav select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-light);
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    max-width: 250px;
}

.chnav select:focus {
    border-color: var(--accent);
}

.nextprev {
    display: flex;
    gap: 8px;
}

.nextprev a {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    transition: all .2s;
}

.nextprev a:hover {
    background: var(--accent-hover);
    color: #fff;
}

.nextprev a.disabled {
    background: var(--bg-input);
    color: #666;
    cursor: default;
    pointer-events: none;
}

.reader-heading .allc {
    font-size: 13px;
    color: #999;
    margin-top: 5px;
}

.reader-heading .allc a {
    color: var(--accent);
}

/* ===== FLOATING READER HEADER ===== */
.reader-float-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(18, 18, 26, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.reader-float-header.visible {
    transform: translateY(0);
}

.reader-float-header-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.reader-float-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.reader-float-manga {
    color: var(--text-light);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.reader-float-manga:hover {
    color: var(--accent);
}

.reader-float-sep {
    color: #666;
    font-size: 14px;
}

.reader-float-chapter {
    color: var(--accent);
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reader-float-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.reader-auto-scroll-btn {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-light);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.reader-auto-scroll-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.reader-auto-scroll-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Back to top button in floating footer */
.reader-back-top-btn {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-light);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.reader-back-top-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ===== FLOATING READER FOOTER ===== */
.reader-float-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(18, 18, 26, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

.reader-float-footer.visible {
    transform: translateY(0);
}

.reader-float-footer-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 10px 15px;
}

.reader-float-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.reader-float-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--accent);
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}

.reader-float-btn:hover {
    background: var(--accent-hover);
    color: #fff;
}

.reader-float-btn.disabled {
    background: var(--bg-input);
    color: #666;
    cursor: default;
    pointer-events: none;
}

.reader-float-selector {
    flex: 1;
    min-width: 0;
    max-width: 250px;
}

.reader-float-selector select {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-light);
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
}

.reader-float-selector select:focus {
    border-color: var(--accent);
}

/* ===== AUTO-SCROLL PANEL ===== */
.reader-auto-scroll-panel {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    z-index: 998;
    background: rgba(18, 18, 26, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.reader-auto-scroll-panel.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.reader-auto-scroll-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reader-auto-scroll-label {
    color: var(--text-light);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.reader-auto-scroll-speed {
    -webkit-appearance: none;
    appearance: none;
    width: 120px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.reader-auto-scroll-speed::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
}

.reader-auto-scroll-speed::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
}

.reader-auto-scroll-value {
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    min-width: 16px;
    text-align: center;
}

.reader-auto-scroll-stop {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-light);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.reader-auto-scroll-stop:hover {
    background: #e74c3c;
    border-color: #e74c3c;
    color: #fff;
}

/* ===== READER IMAGES - GAPLESS VERTICAL STACK ===== */
.reader-images {
    padding: 0;
    text-align: center;
    background: var(--bg);
    line-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reader-images img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    height: auto;
    max-height: none;
    image-rendering: auto;
    -webkit-user-select: none;
    user-select: none;
    /* Gapless: no margin/padding between images */
    margin-bottom: 0;
    padding-bottom: 0;
    border: none;
    outline: none;
}

/* Handle images wrapped in <a> tags (lightbox links) - force full width */
.reader-images a {
    display: block;
    width: 100%;
    max-width: 100%;
    line-height: 0;
    text-align: center;
    /* Override inline style padding: 1em 0 from Blogger */
    padding: 0 !important;
    margin: 0 !important;
}

.reader-images a img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Handle images wrapped in div.separator (WordPress) - force full width */
.reader-images div.separator {
    width: 100%;
    max-width: 100%;
    line-height: 0;
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
}

.reader-images div.separator img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Handle any other wrapper element (figure, div, etc.) containing images */
.reader-images figure,
.reader-images div,
.reader-images p {
    width: 100%;
    max-width: 100%;
    line-height: 0;
    text-align: center;
    margin: 0 !important;
    padding: 0 !important;
}

.reader-images figure img,
.reader-images div img,
.reader-images p img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Ensure no gaps between consecutive images */
.reader-images img + img,
.reader-images a + a,
.reader-images div.separator + div.separator,
.reader-images figure + figure,
.reader-images div + div {
    margin-top: 0;
}

/* Lazy loading placeholder */
.reader-images img[loading="lazy"] {
    background: var(--bg-card);
    min-height: 50px;
}

/* ===== READER BOX - FULL WIDTH ON MOBILE ===== */
.reader-box {
    max-width: 800px;
    margin: 0 auto;
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .related-grid { grid-template-columns: repeat(4, 1fr); }
    .manga-grid { grid-template-columns: repeat(3, 1fr); }
    .content-grid.view-large.manga-grid { grid-template-columns: repeat(3, 1fr); }
    .content-grid.view-medium.manga-grid { grid-template-columns: repeat(4, 1fr); }
    .content-grid.view-small.manga-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 768px) {
    .related-grid { grid-template-columns: repeat(3, 1fr); }
    .manga-grid { grid-template-columns: repeat(2, 1fr); }
    .content-grid.view-large.manga-grid { grid-template-columns: repeat(2, 1fr); }
    .content-grid.view-medium.manga-grid { grid-template-columns: repeat(3, 1fr); }
    .content-grid.view-small.manga-grid { grid-template-columns: repeat(4, 1fr); }
    .reader-podium { flex-wrap: wrap; }
    .podium-item { min-width: 100px; }
    .reader-float-header-inner { padding: 8px 12px; }
    .reader-float-footer-inner { padding: 8px 12px; }
    .reader-float-manga { max-width: 120px; }
    .reader-float-selector { max-width: 180px; }
    .reader-auto-scroll-panel { top: 55px; padding: 10px 12px; }
    .reader-auto-scroll-speed { width: 80px; }
}

@media (max-width: 480px) {
    .related-grid { grid-template-columns: repeat(2, 1fr); }
    .content-grid.view-large.manga-grid,
    .content-grid.view-medium.manga-grid,
    .content-grid.view-small.manga-grid { grid-template-columns: repeat(2, 1fr); }
    .reader-podium { gap: 10px; padding: 10px; }
    .podium-item { min-width: 80px; padding: 10px; }
    .podium-avatar { width: 60px; height: 60px; }
    .podium-item.first .podium-avatar { width: 80px; height: 80px; }
    .chnav { flex-direction: column; align-items: stretch; }
    .chnav select { max-width: 100%; width: 100%; }
    .nextprev { justify-content: center; }
    .reader-float-manga { max-width: 80px; font-size: 13px; }
    .reader-float-chapter { font-size: 13px; }
    .reader-float-btn { padding: 6px 10px; font-size: 12px; }
    .reader-float-selector { max-width: 140px; }
    .reader-float-selector select { padding: 6px 8px; font-size: 12px; }
    .reader-auto-scroll-label { display: none; }
    .reader-auto-scroll-speed { width: 60px; }
    .reader-auto-scroll-panel { top: 50px; }
}

/* ===== BOOKMARK READER COUNT ===== */
.bookmark-reader-count {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-size: 12px;
    margin: 6px 0;
    padding: 4px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: fit-content;
}

.bookmark-reader-icon {
    font-size: 14px;
}

/* ===== CHAPTER HEADING ===== */
.chapter-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* ===== HISTORY MEMBACA ===== */
.manga-history {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
}

.history-list {
    list-style: none;
}

.history-list li {
    border-top: 1px solid var(--border);
}

.history-list li:first-child {
    border-top: none;
}

.history-list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    color: var(--text);
}

.history-list li a:hover {
    color: var(--accent);
}

.history-list li .chapter-date {
    font-size: 11px;
    color: #777;
}

/* ===== READER MANGA THUMB (Chapter Page) ===== */
.reader-heading {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}

.reader-heading-text {
    flex: 1;
    min-width: 0;
}

.reader-heading h1 {
    color: var(--text-white);
    font-size: 18px;
    margin: 0;
}

.reader-manga-thumb-wrap {
    flex-shrink: 0;
}

.reader-manga-thumb {
    position: relative;
    width: 80px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}

.reader-manga-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
}

.reader-manga-thumb .project-badge,
.reader-manga-thumb .mirror-badge {
    position: absolute;
    top: 3px;
    left: 3px;
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 2px 4px;
    border-radius: 2px;
    z-index: 3;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.reader-manga-thumb .project-badge {
    background: var(--accent);
    color: #fff;
}

.reader-manga-thumb .mirror-badge {
    background: var(--accent);
    color: #fff;
}

/* ===== BOOKMARK TOOLS (Import/Export) ===== */
.bookmark-tools {
    margin-top: 30px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}

.bookmark-tools-title {
    color: var(--text-white);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--accent);
}

.bookmark-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}

.bookmark-tool-card {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 15px;
}

.bookmark-tool-name {
    color: var(--text-white);
    font-size: 14px;
    margin-bottom: 6px;
}

.bookmark-tool-desc {
    color: var(--text);
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.bookmark-tool-btn {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
    text-align: center;
}

.bookmark-tool-btn:hover {
    background: var(--accent-hover);
    color: #fff;
    transform: translateY(-1px);
}

.bookmark-import-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.bookmark-file-input {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-light);
    padding: 8px;
    font-size: 12px;
    cursor: pointer;
}

.bookmark-file-input::-webkit-file-upload-button {
    background: var(--bg-card);
    color: var(--text-light);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 5px 12px;
    margin-right: 10px;
    cursor: pointer;
}

.bookmark-notice {
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    margin-bottom: 15px;
}

.bookmark-notice.success {
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.4);
    color: #4caf50;
}

.bookmark-notice.error {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.4);
    color: #ff6b6b;
}

/* ===== SINGLE MANGA: NAMA ALTERNATIF ===== */
.manga-alt-names {
    display: flex;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.manga-alt-names .meta-label {
    min-width: auto;
}

/* ===== SINGLE MANGA: RATING ===== */
.manga-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.manga-rating .rating-star {
    color: var(--accent);
    font-size: 18px;
}

.manga-rating .rating-value {
    color: var(--text-white);
    font-size: 16px;
    font-weight: 600;
}

/* ===== SINGLE MANGA: TIPE & STATUS ===== */
.manga-type-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.manga-type-tag,
.manga-status-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.manga-type-tag {
    background: var(--accent-light);
    border: 1px solid var(--accent-border);
    color: var(--accent);
}

.manga-status-tag {
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.4);
    color: #4caf50;
}

/* ===== SINGLE MANGA: META INLINE (1 BARIS) ===== */
.manga-meta-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 8px 0;
    font-size: 13px;
}

.manga-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-light);
}

.manga-meta-item .meta-label {
    min-width: auto;
    color: #888;
    font-weight: 500;
}

/* ===== SINGLE MANGA: SINopsis INLINE (DI BOX JUDUL) ===== */
.manga-synopsis-inline {
    margin: 12px 0;
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.manga-synopsis-inline .manga-desc {
    margin-top: 0;
    font-size: 13px;
    line-height: 1.6;
}

.manga-synopsis-inline .synopsis-content {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all .3s ease;
}

.manga-synopsis-inline .synopsis-content.expanded {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

.synopsis-toggle {
    display: inline-block;
    background: transparent;
    border: none;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 0 0;
    font-family: inherit;
    transition: color .15s;
}

.synopsis-toggle:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* ===== SINGLE MANGA: HISTORY INLINE (DI BOX JUDUL) ===== */
.manga-history-inline {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.manga-history-title {
    color: var(--text-white);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

.manga-history-inline .history-list {
    list-style: none;
    max-height: 200px;
    overflow-y: auto;
}

.manga-history-inline .history-list li {
    border-top: 1px solid var(--border);
}

.manga-history-inline .history-list li:first-child {
    border-top: none;
}

.manga-history-inline .history-list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    color: var(--text);
    font-size: 13px;
    border-radius: var(--radius);
    transition: all .15s;
}

.manga-history-inline .history-list li a:hover {
    background: var(--bg-input);
    color: var(--text-white);
}

.manga-history-inline .history-list li .chapter-date {
    font-size: 11px;
    color: #777;
    white-space: nowrap;
}

/* ===== SINGLE MANGA: HEADER ACTIONS (Mulai Membaca + Bookmark) ===== */
.manga-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    flex-wrap: wrap;
}

.mrlite-read-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
}

.mrlite-read-btn:hover {
    background: var(--accent-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(255, 107, 0, 0.3);
}

/* ===== SINGLE MANGA: TABS ===== */
.manga-tabs-box {
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 20px;
}

.manga-tabs {
    display: flex;
    flex-wrap: wrap;
    background: var(--bg-input);
    border-bottom: 2px solid var(--accent);
}

.manga-tab {
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    padding: 12px 20px;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
}

.manga-tab:hover {
    color: var(--text-white);
    background: rgba(255, 107, 0, 0.1);
}

.manga-tab.active {
    color: var(--accent);
    font-weight: 600;
}

.manga-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
}

.manga-tab-content {
    display: none;
    padding: 20px;
}

.manga-tab-content.active {
    display: block;
}

/* ===== SINGLE MANGA: CHAPTER SEARCH ===== */
.chapter-search-box {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-input);
}

.chapter-search-box input {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-white);
    padding: 10px 14px;
    font-size: 13px;
    outline: none;
    transition: border-color .2s;
}

.chapter-search-box input:focus {
    border-color: var(--accent);
}

.chapter-search-box input::placeholder {
    color: #777;
}

/* ===== SINGLE MANGA: REAKSI BOX ===== */
.manga-reaction-box {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

/* Reaksi box di halaman chapter (single-post) - samakan lebar dengan reader-box */
body.single-post .manga-reaction-box {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.manga-reaction-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 15px;
    text-align: center;
}

.manga-reaction-emotes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.manga-reaction-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
    min-width: 60px;
}

.manga-reaction-btn:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.manga-reaction-btn.active {
    border-color: var(--accent);
    background: rgba(255, 107, 0, 0.15);
    box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.2);
}

.manga-reaction-emoji {
    font-size: 24px;
    line-height: 1;
}

.manga-reaction-count {
    font-size: 12px;
    color: var(--text);
    font-weight: 500;
}

.manga-reaction-btn.active .manga-reaction-count {
    color: var(--accent);
}

/* ===== SINGLE MANGA: UPVOTE ===== */
.manga-upvote-section {
    display: flex;
    justify-content: center;
    padding: 20px 0 5px;
}

.mrlite-upvote-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 50px;
    color: var(--text);
    padding: 10px 24px;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
}

.mrlite-upvote-btn:hover {
    border-color: var(--accent);
    color: var(--text-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.2);
}

.mrlite-upvote-btn.active {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
}

.mrlite-upvote-btn .upvote-icon {
    font-size: 18px;
}

.mrlite-upvote-btn .upvote-count {
    font-weight: 700;
    font-size: 15px;
}

.mrlite-upvote-btn .upvote-label {
    font-size: 12px;
    opacity: 0.8;
}

/* ===== SINGLE MANGA: TAB INFO ===== */
.manga-info-panel {
    padding: 0;
}

.manga-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.manga-info-item {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 15px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.manga-info-item .info-label {
    color: #888;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.manga-info-item .info-value {
    color: var(--text-light);
    font-size: 13px;
    word-break: break-word;
}

.manga-info-item.manga-info-genres .info-value {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.manga-info-synopsis {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 15px;
}

.manga-info-synopsis h4 {
    color: var(--text-white);
    font-size: 14px;
    margin-bottom: 8px;
}

/* ===== SINGLE MANGA: TAB HISTORY ===== */
.manga-history-panel {
    padding: 0;
}

.tab-empty {
    color: #777;
    font-size: 14px;
    font-weight: 500;
    padding: 30px 20px;
    text-align: center;
    background: var(--bg-input);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

/* ===== SINGLE MANGA: TAB INFO UPDATES (PENGUMUMAN) ===== */
.manga-info-updates {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.manga-info-update-item {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 12px 15px;
}

.manga-info-update-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.manga-info-update-title {
    color: var(--text-white);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.manga-info-update-date {
    color: #888;
    font-size: 11px;
    white-space: nowrap;
}

.manga-info-update-content {
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.manga-info-update-content p {
    margin: 0 0 8px;
}

.manga-info-update-content p:last-child {
    margin-bottom: 0;
}

.manga-info-update-content ul,
.manga-info-update-content ol {
    margin: 0 0 8px;
    padding-left: 20px;
}

.manga-info-update-content li {
    margin-bottom: 4px;
}

.manga-info-update-content a {
    color: var(--accent);
    text-decoration: underline;
}

.manga-info-update-content a:hover {
    color: var(--accent-hover, var(--accent));
}

/* ===== SINGLE MANGA: BOX PENGUMUMAN / ANNOUNCEMENT NOTICE ===== */
.manga-announcement-box {
    margin-bottom: 25px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.manga-announcement-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 15px;
    background: var(--accent-light);
    border-bottom: 1px solid var(--border);
}

.manga-announcement-icon {
    font-size: 18px;
    line-height: 1;
}

.manga-announcement-header .manga-section-title {
    margin: 0;
    padding: 0;
    font-size: 15px;
    color: var(--accent);
    border: none;
    background: none;
}

.manga-announcement-body {
    padding: 15px;
}

.manga-announcement-body .manga-info-updates {
    margin-bottom: 0;
}

.manga-announcement-empty {
    text-align: center;
    padding: 25px 15px;
}

.manga-announcement-empty .announcement-empty-title {
    color: var(--text-white);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 5px;
}

.manga-announcement-empty .announcement-empty-desc {
    color: #777;
    font-size: 13px;
    margin: 0;
}

/* ===== SINGLE MANGA: TAB KARAKTER ===== */
.manga-karakter-panel {
    padding: 0;
}

.manga-karakter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    padding: 15px;
}

.manga-karakter-card {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .2s;
}

.manga-karakter-card:hover {
    border-color: var(--accent-border);
}

.manga-karakter-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--bg);
}

.manga-karakter-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.manga-karakter-info {
    padding: 12px;
}

.manga-karakter-name {
    color: var(--text-white);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.manga-karakter-role {
    display: inline-block;
    color: var(--accent);
    font-size: 12px;
    font-weight: 500;
    background: var(--accent-light);
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 8px;
}

.manga-karakter-desc {
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .manga-karakter-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
        padding: 10px;
    }
}

/* ===== SINGLE MANGA: PAGINATION CHAPTER ===== */
.manga-tab-content .pagination-wrap {
    padding: 15px;
    border-top: 1px solid var(--border);
}

.manga-tab-content .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    list-style: none;
    flex-wrap: wrap;
}

.manga-tab-content .pagination li a,
.manga-tab-content .pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 12px;
    transition: all .15s;
}

.manga-tab-content .pagination li a:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.manga-tab-content .pagination li.pagination-current span {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}

.manga-tab-content .pagination li.disabled span {
    opacity: 0.4;
    cursor: not-allowed;
}

.manga-tab-content .pagination li.pagination-ellipsis span {
    background: transparent;
    border: none;
    min-width: auto;
    padding: 0 4px;
}

/* ===== RESPONSIVE: TABS ===== */
@media (max-width: 600px) {
    .manga-tab {
        padding: 10px 14px;
        font-size: 13px;
    }

    .manga-tab-content {
        padding: 15px;
    }

    .manga-info-grid {
        grid-template-columns: 1fr;
    }

    .manga-header-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .mrlite-read-btn,
    .mrlite-bookmark-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* ============================================================
 * SISTEM BENEFIT LEVELING (USER LEVEL BENEFITS)
 * ============================================================ */

/* ===== EARLY ACCESS LOCKED BOX ===== */
.early-access-locked-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(255,107,0,0.08), rgba(255,193,7,0.05));
    border: 2px dashed rgba(255,107,0,0.4);
    border-radius: 12px;
    margin: 20px 0;
    min-height: 400px;
}

.early-access-lock-icon {
    font-size: 64px;
    margin-bottom: 20px;
    animation: early-access-pulse 2s infinite;
}

@keyframes early-access-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.early-access-lock-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-white, #fff);
    margin-bottom: 12px;
}

.early-access-lock-desc {
    font-size: 15px;
    color: var(--text-muted, #aaa);
    line-height: 1.6;
    margin-bottom: 24px;
}

.early-access-dewa-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ff6b00, #ffc107);
    color: #fff;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 13px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ===== COUNTDOWN TIMER ===== */
.early-access-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}

.early-access-time-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-card, #22202b);
    border: 1px solid rgba(255,107,0,0.3);
    border-radius: 10px;
    padding: 12px 16px;
    min-width: 70px;
}

.early-access-num {
    font-size: 32px;
    font-weight: 800;
    color: #ff6b00;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.early-access-unit {
    font-size: 11px;
    color: var(--text-muted, #aaa);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.early-access-time-sep {
    font-size: 28px;
    font-weight: 700;
    color: #ff6b00;
}

.early-access-login-btn {
    display: inline-block;
    background: linear-gradient(135deg, #ff6b00, #ff8c00);
    color: #fff;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 15px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(255,107,0,0.3);
}

.early-access-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,107,0,0.4);
    color: #fff;
}

.early-access-note {
    font-size: 13px;
    color: var(--text-muted, #aaa);
    margin-top: 16px;
    max-width: 400px;
}

/* ===== FILTER KOMENTAR KUSTOM ===== */
.comment-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--bg-card, #22202b);
    border: 1px solid var(--accent-border, rgba(255,107,0,0.2));
    border-radius: 8px;
    padding: 10px 16px;
    margin: 12px 0;
}

.comment-filter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-white, #fff);
}

.comment-filter-option {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-muted, #aaa);
}

.comment-filter-option input[type="checkbox"] {
    accent-color: #ff6b00;
    cursor: pointer;
}

/* ===== COMMENT BADGES ===== */
.mrlite-comment-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 6px;
    vertical-align: middle;
    color: #fff;
    background: var(--badge-color, #28a745);
    border: 1px solid rgba(255,255,255,0.2);
}

.mrlite-badge-setia { background: #28a745; }
.mrlite-badge-manhwa { background: #17a2b8; }
.mrlite-badge-master { background: #ffc107; color: #222; }

.mrlite-badge-dewa {
    background: linear-gradient(135deg, #ff6b00, #ffc107);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    animation: mrlite-badge-glow 2s infinite;
}

@keyframes mrlite-badge-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(255,107,0,0.5); }
    50% { box-shadow: 0 0 15px rgba(255,107,0,0.8); }
}

/* ===== KOMENTAR SEPUH BADGE ===== */
.mrlite-comment-sepuh-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 6px;
    vertical-align: middle;
    background: linear-gradient(135deg, #ffc107, #ff6b00);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ===== COMMENT AVATAR FRAMES ===== */
.comment-avatar-frame-manhwa img,
.comment-avatar-frame-manhwa .comment-avatar-default {
    border: 3px solid #17a2b8;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(23,162,184,0.5);
}

.comment-avatar-frame-master img,
.comment-avatar-frame-master .comment-avatar-default {
    border: 3px solid #ffc107;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255,193,7,0.6);
}

.comment-avatar-frame-dewa img,
.comment-avatar-frame-dewa .comment-avatar-default {
    border: 3px solid #ff6b00;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255,107,0,0.7);
    animation: mrlite-avatar-glow 2s infinite;
}

@keyframes mrlite-avatar-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(255,107,0,0.5); }
    50% { box-shadow: 0 0 20px rgba(255,107,0,0.9); }
}

/* ============================================================
 * TOGGLE KONTEN SMUT / 18+ (SWITCH)
 * ============================================================ */
.profile-smut-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(255, 107, 0, 0.05);
    border: 1px solid rgba(255, 107, 0, 0.2);
    border-radius: 10px;
    max-width: 420px;
}

.profile-smut-toggle-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.profile-smut-toggle-icon {
    font-size: 20px;
    line-height: 1.2;
    flex-shrink: 0;
}

.profile-smut-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.profile-smut-toggle-label {
    color: var(--text-light);
    font-size: 13px;
    font-weight: 600;
}

.profile-smut-toggle-desc {
    color: #888;
    font-size: 11px;
    line-height: 1.4;
}

/* ===== SWITCH TOGGLE ===== */
.mrlite-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
    cursor: pointer;
}

.mrlite-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mrlite-switch-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 26px;
    transition: all 0.3s ease;
}

.mrlite-switch-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 2px;
    bottom: 2px;
    background: #888;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.mrlite-switch input:checked + .mrlite-switch-slider {
    background: linear-gradient(135deg, #ff6b00, #ffc107);
    border-color: #ff6b00;
    box-shadow: 0 0 12px rgba(255, 107, 0, 0.4);
}

.mrlite-switch input:checked + .mrlite-switch-slider::before {
    transform: translateX(22px);
    background: #fff;
}

.mrlite-switch input:focus + .mrlite-switch-slider {
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.2);
}

/* ============================================================
 * GAMIFIKASI UI - MANHWA SYSTEM INTERFACE (SOLO LEVELING)
 * ============================================================ */

/* ===== FRAME AVATAR NEON & HOLOGRAPHIC GLOW ===== */
.profile-avatar {
    position: relative;
    border-radius: 50%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-avatar:hover {
    transform: scale(1.05);
}

/* Neon & Holographic Glow untuk semua frame */
.profile-avatar.comment-avatar-frame-manhwa {
    box-shadow: 0 0 15px rgba(23, 162, 184, 0.4), 0 0 30px rgba(23, 162, 184, 0.15);
    animation: mrlite-neon-pulse-cyan 3s ease-in-out infinite;
}

.profile-avatar.comment-avatar-frame-master {
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.4), 0 0 30px rgba(255, 193, 7, 0.15);
    animation: mrlite-neon-pulse-gold 3s ease-in-out infinite;
}

.profile-avatar.comment-avatar-frame-dewa {
    box-shadow: 0 0 20px rgba(255, 107, 0, 0.5), 0 0 40px rgba(255, 107, 0, 0.2);
    animation: mrlite-neon-pulse-orange 2.5s ease-in-out infinite;
}

@keyframes mrlite-neon-pulse-cyan {
    0%, 100% { box-shadow: 0 0 10px rgba(23, 162, 184, 0.3), 0 0 20px rgba(23, 162, 184, 0.1); }
    50% { box-shadow: 0 0 20px rgba(23, 162, 184, 0.6), 0 0 40px rgba(23, 162, 184, 0.25); }
}

@keyframes mrlite-neon-pulse-gold {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 193, 7, 0.3), 0 0 20px rgba(255, 193, 7, 0.1); }
    50% { box-shadow: 0 0 20px rgba(255, 193, 7, 0.6), 0 0 40px rgba(255, 193, 7, 0.25); }
}

@keyframes mrlite-neon-pulse-orange {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 107, 0, 0.4), 0 0 25px rgba(255, 107, 0, 0.15); }
    50% { box-shadow: 0 0 25px rgba(255, 107, 0, 0.7), 0 0 50px rgba(255, 107, 0, 0.3); }
}

/* ===== PARTIKEL AURA UNTUK LEVEL TINGGI (Rank S / Level 50+) ===== */
.profile-avatar.comment-avatar-frame-dewa::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.3) 0%, transparent 70%);
    animation: mrlite-aura-particles 3s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes mrlite-aura-particles {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.15); }
}

/* ===== ANIMATED NAME EFFECTS (RAINBOW / CYBER WAVE) ===== */
.profile-name {
    background: linear-gradient(90deg, #ff6b00, #ffc107, #17a2b8, #28a745, #ff6b00);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: mrlite-rainbow-wave 4s linear infinite;
    display: inline-block;
}

@keyframes mrlite-rainbow-wave {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* ===== SHIMMER / GLINT EFFECT (DISCORD NITRO STYLE) ===== */
.profile-name {
    position: relative;
}

.profile-name::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: mrlite-shimmer-glint 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes mrlite-shimmer-glint {
    0% { left: -100%; }
    50% { left: 200%; }
    100% { left: 200%; }
}

/* ===== FIRE / BURNING TEXT (UNTUK KASTA TERTENTU) ===== */
.profile-name[data-tier="5"] {
    text-shadow: 0 0 10px rgba(255, 107, 0, 0.8), 0 0 20px rgba(255, 107, 0, 0.5), 0 0 30px rgba(255, 107, 0, 0.3);
    animation: mrlite-fire-text 1.5s ease-in-out infinite;
}

@keyframes mrlite-fire-text {
    0%, 100% { text-shadow: 0 0 8px rgba(255, 107, 0, 0.6), 0 0 16px rgba(255, 107, 0, 0.4); }
    50% { text-shadow: 0 0 15px rgba(255, 107, 0, 0.9), 0 0 30px rgba(255, 107, 0, 0.6), 0 0 45px rgba(255, 107, 0, 0.3); }
}

/* ===== BADGE TOOLTIP (DISCORD STYLE) ===== */
.profile-level-badge {
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.profile-level-badge:hover {
    transform: scale(1.05) rotate(-2deg);
}

.profile-level-badge::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: #1a1a22;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-light);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    pointer-events: none;
}

.profile-level-badge:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ===== GLASSMORPHISM STATUS WINDOW (PROFILE CARD) ===== */
.profile-card {
    position: relative;
    background: rgba(26, 26, 34, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.profile-card:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) scale(1.01);
    box-shadow: 0 10px 40px rgba(56, 189, 248, 0.1), 0 0 20px rgba(56, 189, 248, 0.05);
}

/* ============================================================
 * KOMENTAR RPG & DISCORD THEME
 * ============================================================ */

/* ===== KARTU KOMENTAR DENGAN BORDER GLOW ===== */
.comment-body {
    position: relative;
    background: rgba(26, 26, 34, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Border glow berdasarkan level user */
.comment[data-comment-level="50"] .comment-body,
.comment[data-comment-level="51"] .comment-body,
.comment[data-comment-level="52"] .comment-body,
.comment[data-comment-level="53"] .comment-body,
.comment[data-comment-level="54"] .comment-body,
.comment[data-comment-level="55"] .comment-body,
.comment[data-comment-level="56"] .comment-body,
.comment[data-comment-level="57"] .comment-body,
.comment[data-comment-level="58"] .comment-body,
.comment[data-comment-level="59"] .comment-body,
.comment[data-comment-level="60"] .comment-body,
.comment[data-comment-level="61"] .comment-body,
.comment[data-comment-level="62"] .comment-body,
.comment[data-comment-level="63"] .comment-body,
.comment[data-comment-level="64"] .comment-body,
.comment[data-comment-level="65"] .comment-body,
.comment[data-comment-level="66"] .comment-body,
.comment[data-comment-level="67"] .comment-body,
.comment[data-comment-level="68"] .comment-body,
.comment[data-comment-level="69"] .comment-body,
.comment[data-comment-level="70"] .comment-body,
.comment[data-comment-level="71"] .comment-body,
.comment[data-comment-level="72"] .comment-body,
.comment[data-comment-level="73"] .comment-body,
.comment[data-comment-level="74"] .comment-body,
.comment[data-comment-level="75"] .comment-body,
.comment[data-comment-level="76"] .comment-body,
.comment[data-comment-level="77"] .comment-body,
.comment[data-comment-level="78"] .comment-body,
.comment[data-comment-level="79"] .comment-body,
.comment[data-comment-level="80"] .comment-body,
.comment[data-comment-level="81"] .comment-body,
.comment[data-comment-level="82"] .comment-body,
.comment[data-comment-level="83"] .comment-body,
.comment[data-comment-level="84"] .comment-body,
.comment[data-comment-level="85"] .comment-body,
.comment[data-comment-level="86"] .comment-body,
.comment[data-comment-level="87"] .comment-body,
.comment[data-comment-level="88"] .comment-body,
.comment[data-comment-level="89"] .comment-body,
.comment[data-comment-level="90"] .comment-body,
.comment[data-comment-level="91"] .comment-body,
.comment[data-comment-level="92"] .comment-body,
.comment[data-comment-level="93"] .comment-body,
.comment[data-comment-level="94"] .comment-body,
.comment[data-comment-level="95"] .comment-body,
.comment[data-comment-level="96"] .comment-body,
.comment[data-comment-level="97"] .comment-body,
.comment[data-comment-level="98"] .comment-body,
.comment[data-comment-level="99"] .comment-body {
    border-color: rgba(255, 107, 0, 0.4);
    box-shadow: 0 0 15px rgba(255, 107, 0, 0.15), inset 0 0 20px rgba(255, 107, 0, 0.03);
}

/* Level 31-49 (Master/Sepuh) */
.comment[data-comment-level="31"] .comment-body,
.comment[data-comment-level="32"] .comment-body,
.comment[data-comment-level="33"] .comment-body,
.comment[data-comment-level="34"] .comment-body,
.comment[data-comment-level="35"] .comment-body,
.comment[data-comment-level="36"] .comment-body,
.comment[data-comment-level="37"] .comment-body,
.comment[data-comment-level="38"] .comment-body,
.comment[data-comment-level="39"] .comment-body,
.comment[data-comment-level="40"] .comment-body,
.comment[data-comment-level="41"] .comment-body,
.comment[data-comment-level="42"] .comment-body,
.comment[data-comment-level="43"] .comment-body,
.comment[data-comment-level="44"] .comment-body,
.comment[data-comment-level="45"] .comment-body,
.comment[data-comment-level="46"] .comment-body,
.comment[data-comment-level="47"] .comment-body,
.comment[data-comment-level="48"] .comment-body,
.comment[data-comment-level="49"] .comment-body {
    border-color: rgba(255, 193, 7, 0.4);
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.12), inset 0 0 20px rgba(255, 193, 7, 0.02);
}

/* Level 16-30 (Penikmat Manhwa) */
.comment[data-comment-level="16"] .comment-body,
.comment[data-comment-level="17"] .comment-body,
.comment[data-comment-level="18"] .comment-body,
.comment[data-comment-level="19"] .comment-body,
.comment[data-comment-level="20"] .comment-body,
.comment[data-comment-level="21"] .comment-body,
.comment[data-comment-level="22"] .comment-body,
.comment[data-comment-level="23"] .comment-body,
.comment[data-comment-level="24"] .comment-body,
.comment[data-comment-level="25"] .comment-body,
.comment[data-comment-level="26"] .comment-body,
.comment[data-comment-level="27"] .comment-body,
.comment[data-comment-level="28"] .comment-body,
.comment[data-comment-level="29"] .comment-body,
.comment[data-comment-level="30"] .comment-body {
    border-color: rgba(23, 162, 184, 0.4);
    box-shadow: 0 0 10px rgba(23, 162, 184, 0.1);
}

/* ===== LEVEL BADGE & PROGRESS BAR XP DI KOMENTAR ===== */
.comment-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.comment-author-name {
    font-weight: 600;
    font-size: 14px;
}

/* ===== PENANDA KHUSUS ADMIN / MODERATOR / TOP LEVEL ===== */
.mrlite-comment-sepuh-badge {
    position: relative;
    animation: mrlite-sepuh-aura 2s ease-in-out infinite;
}

@keyframes mrlite-sepuh-aura {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 193, 7, 0.4); }
    50% { box-shadow: 0 0 15px rgba(255, 193, 7, 0.8), 0 0 25px rgba(255, 107, 0, 0.4); }
}

/* ===== BADGE ICON BOUNCE / ROTATE SAAT HOVER ===== */
.mrlite-comment-badge {
    transition: transform 0.2s ease;
}

.mrlite-comment-badge:hover {
    transform: scale(1.1) rotate(-5deg);
    animation: mrlite-badge-bounce 0.5s ease;
}

@keyframes mrlite-badge-bounce {
    0%, 100% { transform: scale(1.1) rotate(-5deg); }
    50% { transform: scale(1.2) rotate(5deg); }
}

/* ===== LEVEL BADGE & XP PROGRESS BAR DI KOMENTAR ===== */
.mrlite-comment-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
    background: rgba(255, 107, 0, 0.1);
    border: 1px solid var(--level-color, rgba(255, 107, 0, 0.4));
    color: var(--level-color, var(--accent));
    letter-spacing: 0.3px;
}

.mrlite-comment-xp-bar-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
    margin-left: 6px;
}

.mrlite-comment-xp-bar {
    width: 50px;
    height: 5px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.mrlite-comment-xp-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, #ffc107 100%);
    border-radius: 3px;
    transition: width 0.6s ease;
}

.mrlite-comment-xp-text {
    font-size: 9px;
    color: #888;
    font-weight: 600;
    white-space: nowrap;
}

/* ===== BENEFIT SECTION (PROFIL) ===== */
.benefit-section {
    background: var(--bg-card, #22202b);
    border: 1px solid var(--accent-border, rgba(255,107,0,0.2));
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.benefit-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.benefit-section-icon { font-size: 36px; line-height: 1; }
.benefit-section-info { flex: 1; }

.benefit-section-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-white, #fff);
    margin: 0 0 4px 0;
}

.benefit-section-subtitle {
    font-size: 13px;
    color: var(--text-muted, #aaa);
}

.benefit-section-subtitle strong { color: var(--tier-color, #ff6b00); }

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 12px;
    transition: border-color 0.2s;
}

.benefit-item:hover { border-color: var(--tier-color, #ff6b00); }
.benefit-item.locked { opacity: 0.7; background: rgba(255,255,255,0.02); }

.benefit-check {
    font-size: 16px;
    font-weight: 700;
    color: #4caf50;
    flex-shrink: 0;
    margin-top: 2px;
}

.benefit-item.locked .benefit-check { color: #ff9800; }
.benefit-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }

.benefit-info { flex: 1; display: flex; flex-direction: column; }

.benefit-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-white, #fff);
}

.benefit-desc {
    font-size: 12px;
    color: var(--text-muted, #aaa);
    margin-top: 2px;
}

.benefit-unlock-note {
    font-size: 13px;
    color: var(--text-muted, #aaa);
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(255,107,0,0.08);
    border-radius: 8px;
    border-left: 3px solid #ff6b00;
}

.benefit-next { border-color: rgba(255,193,7,0.3); }

/* ===== RESPONSIVE: BENEFIT & EARLY ACCESS ===== */
@media (max-width: 600px) {
    .early-access-locked-box { padding: 40px 15px; min-height: 300px; }
    .early-access-lock-title { font-size: 20px; }
    .early-access-countdown { gap: 4px; }
    .early-access-time-unit { padding: 8px 10px; min-width: 55px; }
    .early-access-num { font-size: 24px; }
    .benefit-grid { grid-template-columns: 1fr; }
    .comment-filter-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============================================================
 * EDIT PROFIL PENGGUNA (Avatar, Banner, Identitas, Password)
 * ============================================================ */

/* ===== Breadcrumb / Navigasi ===== */
.edit-profile-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
}

.edit-profile-nav-link {
    color: var(--text);
    transition: color .2s;
}

.edit-profile-nav-link:hover {
    color: var(--accent);
}

.edit-profile-nav-sep {
    color: #555;
}

.edit-profile-nav-current {
    color: var(--accent);
    font-weight: 600;
}

/* ===== Header Halaman ===== */
.edit-profile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.edit-profile-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-light);
    font-size: 13px;
    font-weight: 500;
    padding: 9px 16px;
    border-radius: 8px;
    transition: all .2s;
}

.edit-profile-back-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateX(-2px);
}

/* ===== Notice OAuth ===== */
.edit-profile-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(23, 162, 184, 0.1);
    border: 1px solid rgba(23, 162, 184, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--text-light);
}

.edit-profile-notice-icon {
    font-size: 18px;
    flex-shrink: 0;
}

/* ===== Panel / Seksi ===== */
.edit-profile-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}

.edit-profile-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.edit-profile-panel-icon {
    font-size: 26px;
    flex-shrink: 0;
    line-height: 1;
}

.edit-profile-panel-title {
    color: var(--text-white);
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 4px;
}

.edit-profile-panel-desc {
    color: #888;
    font-size: 13px;
}

/* ===== Media Grid (Banner + Avatar) ===== */
.edit-profile-media-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
}

.edit-profile-media-col {
    min-width: 0;
}

.edit-profile-label {
    display: block;
    color: var(--text-light);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* ===== Banner ===== */
.edit-profile-banner-wrap {
    position: relative;
    height: 160px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px dashed var(--border);
    background: var(--bg-input);
    cursor: pointer;
    transition: border-color .2s;
}

.edit-profile-banner-wrap:hover {
    border-color: var(--accent);
}

.edit-profile-banner-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.edit-profile-banner-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #666;
    text-align: center;
    font-size: 13px;
}

.edit-profile-banner-placeholder span {
    font-size: 32px;
}

.edit-profile-banner-placeholder small {
    color: #555;
    font-size: 11px;
}

.edit-profile-drop-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 107, 0, 0.2);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.edit-profile-drop-overlay.active {
    opacity: 1;
}

/* ===== Avatar ===== */
.edit-profile-avatar-flex {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.edit-profile-avatar-preview-wrap {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: visible;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: 3px solid var(--border);
}

.edit-profile-avatar-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.edit-profile-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 700;
    color: var(--accent);
    border-radius: 50%;
    background: var(--bg-input);
}

.edit-profile-level-pill {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: var(--bg-card);
    border: 1px solid var(--level-color, var(--accent-border));
    color: var(--level-color, var(--accent));
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    z-index: 2;
}

/* ===== Avatar Frame berdasarkan Tier ===== */
.edit-profile-avatar-frame-manhwa {
    border: 3px solid #17a2b8;
    box-shadow: 0 0 12px rgba(23, 162, 184, 0.4);
}

.edit-profile-avatar-frame-master {
    border: 3px solid #ffc107;
    box-shadow: 0 0 16px rgba(255, 193, 7, 0.5);
}

.edit-profile-avatar-frame-dewa {
    border: 3px solid #ff6b00;
    box-shadow: 0 0 20px rgba(255, 107, 0, 0.6);
    animation: edit-profile-frame-glow 2s ease-in-out infinite;
}

@keyframes edit-profile-frame-glow {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 107, 0, 0.4); }
    50% { box-shadow: 0 0 24px rgba(255, 107, 0, 0.8); }
}

/* ===== Upload Zone Avatar ===== */
.edit-profile-avatar-upload-zone {
    flex: 1;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 2px dashed var(--border);
    border-radius: 10px;
    background: var(--bg-input);
    color: #666;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    padding: 12px;
    transition: all .2s;
}

.edit-profile-avatar-upload-zone:hover,
.edit-profile-avatar-upload-zone.dragover {
    border-color: var(--accent);
    background: rgba(255, 107, 0, 0.05);
    color: var(--text-light);
}

.edit-profile-upload-icon {
    font-size: 24px;
}

.edit-profile-avatar-upload-zone small {
    color: #555;
    font-size: 10px;
}

/* ===== Media Actions ===== */
.edit-profile-media-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.edit-profile-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-light);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s;
}

.edit-profile-btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.edit-profile-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #dc3545;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s;
}

.edit-profile-btn-danger:hover {
    background: #dc3545;
    color: #fff;
}

/* ===== Default Avatars ===== */
.edit-profile-default-avatars {
    margin-top: 4px;
}

.edit-profile-default-title {
    color: #888;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}

.edit-profile-default-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.edit-profile-default-avatar {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--da-bg, #1a1a2e);
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 22px;
    cursor: pointer;
    transition: all .2s;
}

.edit-profile-default-avatar:hover {
    transform: scale(1.08);
    border-color: var(--accent);
}

.edit-profile-default-avatar.selected {
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(255, 107, 0, 0.4);
}

/* ===== Form Grid ===== */
.edit-profile-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.edit-profile-form-group {
    min-width: 0;
}

.edit-profile-input,
.edit-profile-textarea {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-white);
    font-size: 14px;
    font-family: inherit;
    padding: 10px 14px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.edit-profile-input:focus,
.edit-profile-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15);
}

.edit-profile-input::placeholder,
.edit-profile-textarea::placeholder {
    color: #555;
}

.edit-profile-textarea {
    resize: vertical;
    min-height: 80px;
}

.edit-profile-input-locked {
    background: rgba(255, 255, 255, 0.03);
    color: #888;
    cursor: not-allowed;
}

.edit-profile-hint {
    display: block;
    color: #666;
    font-size: 11px;
    margin-top: 6px;
}

.edit-profile-hint.locked-hint {
    color: #888;
}

.edit-profile-char-counter {
    text-align: right;
    color: #666;
    font-size: 11px;
    margin-top: 4px;
}

/* ===== Password ===== */
.edit-profile-password-wrap {
    position: relative;
}

.edit-profile-password-wrap .edit-profile-input {
    padding-right: 44px;
}

.edit-profile-eye-btn {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .2s;
}

.edit-profile-eye-btn:hover {
    color: var(--accent);
}

.edit-profile-eye-icon {
    width: 18px;
    height: 18px;
}

.edit-profile-eye-closed {
    display: none;
}

.edit-profile-eye-btn.active .edit-profile-eye-open {
    display: none;
}

.edit-profile-eye-btn.active .edit-profile-eye-closed {
    display: block;
}

/* ===== Password Strength ===== */
.edit-profile-pass-strength {
    margin-top: 8px;
}

.edit-profile-strength-bar {
    height: 4px;
    background: var(--bg-input);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}

.edit-profile-strength-bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: width .3s, background .3s;
}

.edit-profile-strength-label {
    color: #888;
    font-size: 11px;
}

/* ===== Form Actions ===== */
.edit-profile-form-actions {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* ===== Sticky Actions ===== */
.edit-profile-sticky-actions {
    position: sticky;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(26, 26, 34, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 20px;
    margin-top: 24px;
    z-index: 50;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.edit-profile-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s;
}

.edit-profile-save-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.edit-profile-save-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.edit-profile-save-btn.loading {
    background: var(--accent-hover);
}

.edit-profile-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: edit-profile-spin .6s linear infinite;
}

@keyframes edit-profile-spin {
    to { transform: rotate(360deg); }
}

/* ===== Toast Notifications ===== */
.edit-profile-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
}

.edit-profile-toast {
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    animation: edit-profile-toast-in .3s ease;
    border-left: 4px solid;
}

.edit-profile-toast.toast-success {
    background: #1a3a2a;
    border-left-color: #28a745;
}

.edit-profile-toast.toast-error {
    background: #3a1a1a;
    border-left-color: #dc3545;
}

.edit-profile-toast.toast-hide {
    animation: edit-profile-toast-out .3s ease forwards;
}

@keyframes edit-profile-toast-in {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes edit-profile-toast-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(30px); }
}

/* ===== Light Mode ===== */
body.light-mode .edit-profile-panel {
    background: #fff;
    border-color: #e0e0e0;
}

body.light-mode .edit-profile-nav {
    background: #fff;
    border-color: #e0e0e0;
}

body.light-mode .edit-profile-input,
body.light-mode .edit-profile-textarea {
    background: #f8f8fa;
    border-color: #ddd;
    color: #222;
}

body.light-mode .edit-profile-input-locked {
    background: #f0f0f2;
    color: #888;
}

body.light-mode .edit-profile-btn-secondary {
    background: #f8f8fa;
    border-color: #ddd;
    color: #333;
}

body.light-mode .edit-profile-avatar-upload-zone,
body.light-mode .edit-profile-banner-wrap {
    background: #f8f8fa;
    border-color: #ddd;
}

body.light-mode .edit-profile-sticky-actions {
    background: rgba(255, 255, 255, 0.95);
    border-color: #e0e0e0;
}

body.light-mode .edit-profile-avatar-preview-wrap {
    background: #f0f0f2;
    border-color: #ddd;
}

body.light-mode .edit-profile-level-pill {
    background: #fff;
}

/* ===== Responsive ===== */

/* ===== KUSTOMISASI TAMPILAN (EDIT PROFIL) ===== */
.edit-profile-customize-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.edit-profile-customize-item {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
}

.edit-profile-customize-desc {
    color: #888;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.edit-profile-customize-locked {
    background: rgba(255, 193, 7, 0.08);
    border: 1px dashed rgba(255, 193, 7, 0.3);
    border-radius: 8px;
    padding: 12px;
    color: #ffc107;
    font-size: 13px;
    line-height: 1.5;
}

/* ===== Frame Options ===== */
.edit-profile-frame-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.edit-profile-frame-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all .2s;
}

.edit-profile-frame-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.edit-profile-frame-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 45px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
    background: var(--bg-card);
    border: 2px solid transparent;
    transition: all .2s;
}

.edit-profile-frame-option:hover .edit-profile-frame-preview {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.edit-profile-frame-option.selected .edit-profile-frame-preview,
.edit-profile-frame-option input[type="radio"]:checked + .edit-profile-frame-preview {
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(255, 107, 0, 0.3);
}

.edit-profile-frame-preview.edit-profile-avatar-frame-none {
    border: 2px solid var(--border);
}

.edit-profile-frame-preview.edit-profile-avatar-frame-manhwa {
    border: 3px solid #17a2b8;
    box-shadow: 0 0 8px rgba(23, 162, 184, 0.5);
}

.edit-profile-frame-preview.edit-profile-avatar-frame-master {
    border: 3px solid #ffc107;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.6);
}

.edit-profile-frame-preview.edit-profile-avatar-frame-dewa {
    border: 3px solid #ff6b00;
    box-shadow: 0 0 15px rgba(255, 107, 0, 0.7);
    animation: edit-profile-frame-glow 2s infinite;
}

.edit-profile-badge-none {
    border: 2px solid var(--border);
}

.edit-profile-badge-dewa {
    background: linear-gradient(135deg, #ff6b00, #ffc107);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    animation: edit-profile-frame-glow 2s infinite;
}

/* ===== Color Options ===== */
.edit-profile-color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.edit-profile-color-option {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
}

.edit-profile-color-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.edit-profile-color-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    border: 2px solid transparent;
    transition: all .2s;
}

.edit-profile-color-option:hover .edit-profile-color-swatch {
    transform: scale(1.1);
}

.edit-profile-color-option input[type="radio"]:checked + .edit-profile-color-swatch {
    border-color: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.edit-profile-color-swatch.edit-profile-color-auto {
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border: 2px solid var(--border);
}

/* Light mode */
body.light-mode .edit-profile-customize-item {
    background: #f8f8fa;
    border-color: #dddddd;
}

body.light-mode .edit-profile-customize-locked {
    background: rgba(255, 193, 7, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .edit-profile-customize-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .edit-profile-frame-preview {
        width: 72px;
        height: 38px;
        font-size: 11px;
    }
}

@media (max-width: 900px) {
    .edit-profile-media-grid {
        grid-template-columns: 1fr;
    }

    .edit-profile-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .edit-profile-panel {
        padding: 16px;
    }

    .edit-profile-avatar-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    .edit-profile-avatar-upload-zone {
        width: 100%;
    }

    .edit-profile-default-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .edit-profile-sticky-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .edit-profile-save-btn {
        justify-content: center;
    }

    .edit-profile-toast-container {
        left: 16px;
        right: 16px;
        max-width: none;
    }
}

/* Hamburger menu: tersembunyi di desktop, tampil di mobile */
.hamburger-menu {
    display: none;
}

/* ============================================================
 * MOBILE RESPONSIVE FIXES (dari versi lokal)
 * Hanya mempengaruhi layar mobile (max-width)
 * ============================================================ */

@media (max-width: 600px) {
    .manga-comments-box .comment-avatar,
    .manga-comments-box .comment-avatar img,
    .manga-comments-box .comment-avatar-default {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    .manga-comments-box .comment-list .children {
        margin-left: 30px;
        padding-left: 10px;
    }
}

@media (max-width: 600px) {
    .profile-level-badge {
        font-size: 12px;
        padding: 5px 12px;
    }

    .profile-xp-progress-wrap {
        max-width: 100%;
    }

    .profile-tab {
        font-size: 12px;
        padding: 12px 14px;
    }

    .level-hero-card {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 20px;
    }

    .level-hero-progress {
        flex-direction: column;
        gap: 6px;
    }

    .level-xp-stats {
        grid-template-columns: 1fr;
    }

    .level-hero-title {
        font-size: 18px;
    }

    .level-tier-item {
        flex-wrap: wrap;
        gap: 10px;
    }

    .level-tier-badge {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 1024px) {
    .project-row { grid-template-columns: repeat(3, 1fr); }
    .latest-row { grid-template-columns: repeat(3, 1fr); }
    .contact-grid { grid-template-columns: repeat(2, 1fr); }
    .donasi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .project-row { grid-template-columns: repeat(2, 1fr); }
    .latest-row { grid-template-columns: repeat(2, 1fr); }
    .hero-content { padding: 25px; }
    .hero-title { font-size: 22px; }
    .hero-carousel { aspect-ratio: 16 / 3.6; min-height: 0; }
    .hero-slides { aspect-ratio: 16 / 3.6; min-height: 0; }
    .search-form input[type="search"] { width: 140px; }
    .main-nav ul { gap: 10px; }
}

@media (max-width: 480px) {
    .hero-carousel { aspect-ratio: 16 / 3.6; min-height: 0; }
    .hero-slides { aspect-ratio: 16 / 3.6; min-height: 0; }
    .hero-content { padding: 15px; }
    .hero-title { font-size: 18px; }
    .hero-synopsis { font-size: 12px; }
    .hero-btn-read { font-size: 12px; padding: 8px 18px; }
    .hero-dots { bottom: 10px; }
}

@media (max-width: 600px) {
    .contact-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .donasi-grid { grid-template-columns: 1fr; }
    .reader-item { flex-wrap: wrap; }
    .reader-profile-link { width: 100%; text-align: center; margin-top: 5px; }
    .qr-placeholder { width: 150px; height: 150px; }
    .qr-placeholder span { font-size: 36px; }
    .search-form input[type="search"] { width: clamp(100px, 30vw, 140px); }
    .manga-header { flex-direction: column; }
    .manga-header-thumb { width: 100%; }
    .website-name { font-size: 18px; }
    /* Pertahankan banyak kolom: auto-fill agar kartu tetap berjajar seperti desktop */
    .project-row { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .latest-row { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .manga-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .hero-arrow { display: none; }
    .header-inner { flex-wrap: wrap; }
    .header-actions { width: 100%; justify-content: center; }
    .view-dropdown { display: inline-block; }
    .view-dropdown-menu {
        left: auto;
        right: 0;
        min-width: 150px;
    }
}

@media (max-width: 480px) {
    .reader-setting-btn {
        width: 44px;
        height: 44px;
        bottom: 15px;
        right: 15px;
    }
    .reader-setting-btn + .khwa-chat-widget {
        right: 70px;
    }
    .reader-setting-btn + .khwa-chat-widget .khwa-chat-box {
        right: 70px;
    }
}

@media (max-width: 480px) {
    .khwa-chat-box {
        width: calc(100vw - 40px);
        right: 20px;
        left: 20px;
        max-height: 70vh;
    }
    /* Saat tombol setting ada, geser chat box agar tidak menimpa */
    .reader-setting-btn + .khwa-chat-widget .khwa-chat-box {
        right: 70px;
        left: 20px;
        width: calc(100vw - 90px);
    }
    .khwa-chat-msg-content {
        max-width: 70%;
    }
}

@media (max-width: 1024px) {
    .related-grid { grid-template-columns: repeat(4, 1fr); }
    .manga-grid { grid-template-columns: repeat(3, 1fr); }
    .content-grid.view-large.manga-grid { grid-template-columns: repeat(3, 1fr); }
    .content-grid.view-medium.manga-grid { grid-template-columns: repeat(4, 1fr); }
    .content-grid.view-small.manga-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 768px) {
    .related-grid { grid-template-columns: repeat(3, 1fr); }
    .manga-grid { grid-template-columns: repeat(2, 1fr); }
    .content-grid.view-large.manga-grid { grid-template-columns: repeat(2, 1fr); }
    .content-grid.view-medium.manga-grid { grid-template-columns: repeat(3, 1fr); }
    .content-grid.view-small.manga-grid { grid-template-columns: repeat(4, 1fr); }
    .reader-podium { flex-wrap: wrap; }
    .podium-item { min-width: 100px; }
    .reader-float-header-inner { padding: 8px 12px; }
    .reader-float-footer-inner { padding: 8px 12px; }
    .reader-float-manga { max-width: 120px; }
    .reader-float-selector { max-width: 180px; }
    .reader-auto-scroll-panel { top: 55px; padding: 10px 12px; }
    .reader-auto-scroll-speed { width: 80px; }
}

@media (max-width: 480px) {
    .related-grid { grid-template-columns: repeat(2, 1fr); }
    .content-grid.view-large.manga-grid,
    .content-grid.view-medium.manga-grid,
    .content-grid.view-small.manga-grid { grid-template-columns: repeat(2, 1fr); }
    .reader-podium { gap: 10px; padding: 10px; }
    .podium-item { min-width: 80px; padding: 10px; }
    .podium-avatar { width: 60px; height: 60px; }
    .podium-item.first .podium-avatar { width: 80px; height: 80px; }
    .chnav { flex-direction: column; align-items: stretch; }
    .chnav select { max-width: 100%; width: 100%; }
    .nextprev { justify-content: center; }
    .reader-float-manga { max-width: 80px; font-size: 13px; }
    .reader-float-chapter { font-size: 13px; }
    .reader-float-btn { padding: 6px 10px; font-size: 12px; }
    .reader-float-selector { max-width: 140px; }
    .reader-float-selector select { padding: 6px 8px; font-size: 12px; }
    .reader-auto-scroll-label { display: none; }
    .reader-auto-scroll-speed { width: 60px; }
    .reader-auto-scroll-panel { top: 50px; }
}

@media (max-width: 600px) {
    .manga-karakter-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
        padding: 10px;
    }
}

@media (max-width: 600px) {
    .manga-tab {
        padding: 10px 14px;
        font-size: 13px;
    }

    .manga-tab-content {
        padding: 15px;
    }

    .manga-info-grid {
        grid-template-columns: 1fr;
    }

    .manga-header-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .mrlite-read-btn,
    .mrlite-bookmark-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 600px) {
    .early-access-locked-box { padding: 40px 15px; min-height: 300px; }
    .early-access-lock-title { font-size: 20px; }
    .early-access-countdown { gap: 4px; }
    .early-access-time-unit { padding: 8px 10px; min-width: 55px; }
    .early-access-num { font-size: 24px; }
    .benefit-grid { grid-template-columns: 1fr; }
    .comment-filter-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 900px) {
    .edit-profile-media-grid {
        grid-template-columns: 1fr;
    }

    .edit-profile-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .edit-profile-panel {
        padding: 16px;
    }

    .edit-profile-avatar-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    .edit-profile-avatar-upload-zone {
        width: 100%;
    }

    .edit-profile-default-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .edit-profile-sticky-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .edit-profile-save-btn {
        justify-content: center;
    }

    .edit-profile-toast-container {
        left: 16px;
        right: 16px;
        max-width: none;
    }
}

@media (max-width: 768px) {
    /* Pertahankan kolom berjajar di mobile (jangan 1 kolom tumpuk) */
    .manga-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
    .project-row { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    .latest-row { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    .related-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }

    .content-grid.view-large.manga-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
    .content-grid.view-medium.manga-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
    .content-grid.view-small.manga-grid { grid-template-columns: repeat(auto-fill, minmax(65px, 1fr)); }
    .content-grid.view-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
    .content-grid.view-tiles { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }

    .content-grid.view-list .content-card .card-body h3 {
        flex: 0 0 clamp(120px, 20vw, 200px);
    }

    .content-grid.view-detail .content-card .project-cover,
    .content-grid.view-detail .content-card .latest-cover,
    .content-grid.view-detail.manga-grid .manga-thumb {
        width: clamp(80px, 15vw, 120px);
        height: clamp(107px, 20vw, 160px);
    }
}

@media (max-width: 480px) {
    .manga-grid,
    .project-row,
    .latest-row { grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); }

    .related-grid { grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); }

    .content-grid.view-large.manga-grid,
    .content-grid.view-medium.manga-grid,
    .content-grid.view-small.manga-grid {
        grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
    }

    .content-grid.view-grid,
    .content-grid.view-tiles {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    }
}

@media (max-width: 480px) {
    .khwa-chat-toggle {
        padding: clamp(8px, 3vw, 12px) clamp(14px, 5vw, 20px);
        font-size: clamp(11px, 3vw, 14px);
        transform: scale(0.92);
        transform-origin: bottom right;
    }
    .khwa-chat-toggle:hover {
        transform: scale(0.92) translateY(-2px);
    }
    .khwa-chat-icon { font-size: clamp(14px, 4vw, 18px); }
    .khwa-chat-box {
        width: min(calc(100vw - 30px), 340px);
        max-height: 60vh;
        bottom: calc(clamp(60px, 15vw, 80px));
    }
}

@media (max-width: 768px) {
    /* Susunan 3 kolom dengan CSS Grid */
    .manga-grid,
    .project-row,
    .latest-row,
    .related-grid,
    .content-grid.view-grid,
    .content-grid.view-large,
    .content-grid.view-medium,
    .content-grid.view-small,
    .content-grid.view-tiles,
    .content-grid.view-large.manga-grid,
    .content-grid.view-medium.manga-grid,
    .content-grid.view-small.manga-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    /* Ukuran Gambar Cover: width 100%, aspect-ratio 3/4 */
    .manga-thumb,
    .project-cover-wrap,
    .latest-cover-wrap,
    .content-card .project-cover-wrap,
    .content-card .latest-cover-wrap {
        width: 100%;
    }

    .manga-thumb img,
    .project-cover,
    .latest-cover,
    .content-card .project-cover,
    .content-card .latest-cover,
    .content-card .manga-thumb img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3/4 !important;
        object-fit: cover;
        display: block;
    }

    /* List & Detail view: tetap horizontal di mobile */
    .content-grid.view-list,
    .content-grid.view-detail,
    .content-grid.view-content {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .content-grid.view-list .content-card,
    .content-grid.view-detail .content-card,
    .content-grid.view-content .content-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
    }

    .content-grid.view-list .content-card .project-cover,
    .content-grid.view-list .content-card .latest-cover,
    .content-grid.view-content .content-card .project-cover,
    .content-grid.view-content .content-card .latest-cover {
        width: 48px !important;
        height: 64px !important;
        aspect-ratio: 3/4 !important;
        flex-shrink: 0;
    }

    .content-grid.view-detail .content-card .project-cover,
    .content-grid.view-detail .content-card .latest-cover,
    .content-grid.view-detail.manga-grid .manga-thumb {
        width: 80px !important;
        height: 107px !important;
        aspect-ratio: 3/4 !important;
        flex-shrink: 0;
    }

    .content-grid.view-list .content-card .card-body h3,
    .content-grid.view-content .content-card .card-body h3 {
        flex: 1;
        font-size: clamp(13px, 3.5vw, 15px) !important;
    }

    /* ===== 3. PROPORSI ELEMEN INTERAKTIF (Touch Targets & Padding) ===== */
    /* Padding Container Utama: 12px - 16px */
    .site-main {
        padding-left: clamp(12px, 3.5vw, 16px) !important;
        padding-right: clamp(12px, 3.5vw, 16px) !important;
        margin: 12px auto;
    }

    .site-header {
        padding-left: clamp(12px, 3.5vw, 16px) !important;
        padding-right: clamp(12px, 3.5vw, 16px) !important;
    }

    /* Tombol & Menu (Touch-Friendly): tinggi min 36px - 42px */
    .view-all-btn,
    .login-btn,
    .search-form button,
    .view-dropdown-toggle,
    .hero-btn-read,
    .btn,
    .button,
    .read-btn,
    .chapter-btn,
    .submit-btn,
    .comment-submit,
    .edit-profile-save-btn,
    .edit-profile-btn-secondary,
    .khwa-chat-toggle {
        min-height: 36px !important;
        padding: 8px 16px !important;
        font-size: clamp(12px, 3.2vw, 14px) !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Icon & Badge: perkecil ikon ke 16px - 20px */
    .theme-toggle {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }

    .view-toggle-icon,
    .khwa-chat-icon,
    .icon,
    .fa,
    .dashicons {
        font-size: clamp(16px, 4.5vw, 20px) !important;
    }

    /* Badge level/tier: font 10px */
    .level-badge,
    .tier-badge,
    .user-level,
    .level-pill,
    .edit-profile-level-pill {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }

    /* Search form: full width di mobile */
    .search-form {
        width: 100%;
    }

    .search-form input[type="search"] {
        flex: 1;
        width: auto;
        min-width: 0;
    }

    /* Header: compact di mobile */
    .header-inner {
        gap: 6px;
    }

    .main-nav ul {
        gap: 8px;
    }

    .main-nav a {
        font-size: clamp(12px, 3.2vw, 14px);
    }
}

@media (max-width: 400px) {
    .manga-grid,
    .project-row,
    .latest-row,
    .related-grid,
    .content-grid.view-grid,
    .content-grid.view-large,
    .content-grid.view-medium,
    .content-grid.view-small,
    .content-grid.view-tiles,
    .content-grid.view-large.manga-grid,
    .content-grid.view-medium.manga-grid,
    .content-grid.view-small.manga-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Judul komik tetap 13px - 15px di layar kecil */
    .manga-info-title,
    .manga-info h2,
    .project-title,
    .latest-title,
    .related-title,
    .content-card .card-body h3 {
        font-size: 13px !important;
    }

    /* Meta tetap 10px - 11px */
    .manga-meta,
    .ch-date,
    .chapter-date,
    .post-date,
    .entry-meta,
    .meta-info,
    .badge,
    .chapter-badge,
    .project-chapter-badge,
    .rating-badge,
    .mirror-badge,
    .project-type-badge {
        font-size: 10px !important;
    }

    /* Tombol tetap touch-friendly */
    .view-all-btn,
    .login-btn,
    .search-form button,
    .view-dropdown-toggle,
    .hero-btn-read,
    .btn,
    .button,
    .read-btn,
    .chapter-btn,
    .submit-btn,
    .comment-submit {
        min-height: 36px !important;
        padding: 8px 12px !important;
    }
}

@media (max-width: 768px) and (max-height: 500px) {
    .hero-carousel,
    .hero-slides {
        aspect-ratio: 16 / 7 !important;
        min-height: 0 !important;
    }

    .hero-content {
        padding: 12px 16px !important;
    }

    .hero-title {
        font-size: 18px !important;
    }

    .hero-synopsis {
        font-size: 12px !important;
    }
}

@media (max-width: 768px) {
    .manga-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px 10px !important;
        width: 100% !important;
    }

    .project-row,
    .latest-row,
    .related-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px 10px !important;
        width: 100% !important;
    }

    /* View mode override: semua mode paksa grid 3 kolom */
    .content-grid.view-grid,
    .content-grid.view-large,
    .content-grid.view-medium,
    .content-grid.view-small,
    .content-grid.view-tiles,
    .content-grid.view-large.manga-grid,
    .content-grid.view-medium.manga-grid,
    .content-grid.view-small.manga-grid,
    .content-grid.view-tiles.manga-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px 10px !important;
        width: 100% !important;
    }

    /* Kartu komik lebarkan penuh dalam grid */
    .manga-item,
    .content-card,
    .project-card,
    .latest-card,
    .related-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Judul komik line-clamp 2 baris */
    .manga-title,
    .manga-info-title,
    .manga-info h2,
    .project-title,
    .latest-title,
    .related-title,
    .content-card .card-body h3,
    .content-grid .content-card .card-body h3,
    .manga-grid .manga-info-title {
        font-size: 13px !important;
        line-height: 1.3 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 34px;
        max-height: 34px;
        padding-bottom: 0;
    }

    /* Body kartu */
    .manga-item .card-body,
    .content-card .card-body {
        padding: 6px 8px !important;
        overflow: hidden;
    }

    /* Meta info */
    .manga-meta,
    .ch-date,
    .chapter-date,
    .rating-badge,
    .mirror-badge {
        font-size: 10px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 480px) {
    .manga-grid,
    .project-row,
    .latest-row,
    .related-grid,
    .content-grid.view-grid,
    .content-grid.view-large,
    .content-grid.view-medium,
    .content-grid.view-small,
    .content-grid.view-tiles,
    .content-grid.view-large.manga-grid,
    .content-grid.view-medium.manga-grid,
    .content-grid.view-small.manga-grid,
    .content-grid.view-tiles.manga-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .manga-title,
    .manga-info-title,
    .manga-info h2,
    .project-title,
    .latest-title,
    .related-title,
    .content-card .card-body h3 {
        font-size: 12px !important;
        min-height: 32px;
        max-height: 32px;
    }
}

@media (max-width: 768px) {
    h1,
    .entry-title,
    .page-title,
    .single-title,
    .manga-header-info h1,
    .reader-heading h1 {
        font-size: 20px !important;
        line-height: 1.25 !important;
    }

    h2,
    .section-title {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 16px !important;
    }

    /* Teks Paragraf / Komentar: 13-14px */
    body,
    p,
    .description,
    .synopsis,
    .comment-body,
    .comment-content,
    .entry-content,
    .manga-description,
    .post-content,
    .card-excerpt {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* Badge / Meta info: 10-11px */
    .manga-meta,
    .ch-date,
    .chapter-date,
    .post-date,
    .entry-meta,
    .meta-info,
    .badge,
    .chapter-badge,
    .project-chapter-badge,
    .rating-badge,
    .mirror-badge,
    .project-type-badge,
    .manga-grid .manga-thumb .project-badge,
    .manga-grid .manga-thumb .mirror-badge,
    .manga-grid .manga-thumb .rating-badge,
    .manga-grid .manga-thumb .chapter-badge {
        font-size: 10px !important;
    }

    /* Tombol touch-friendly: min-height 38-42px */
    .view-all-btn,
    .login-btn,
    .search-form button,
    .view-dropdown-toggle,
    .hero-btn-read,
    .btn,
    .button,
    .read-btn,
    .chapter-btn,
    .submit-btn,
    .comment-submit,
    .edit-profile-save-btn,
    .edit-profile-btn-secondary,
    .edit-profile-btn-danger,
    .khwa-chat-toggle,
    .mrlite-bookmark-btn,
    .mrlite-upvote-btn,
    .manga-reaction-btn,
    .pagination .page-numbers,
    .nav-links a,
    .nav-links .page-numbers,
    .comment-reply-link,
    .comment-edit-link,
    .wp-block-button__link,
    a.wp-block-button__link {
        min-height: 42px !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        cursor: pointer;
    }

    /* Link umum jangan terlalu kecil */
    a {
        -webkit-tap-highlight-color: rgba(255, 107, 0, 0.3);
    }

    /* Input juga touch-friendly */
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="number"],
    textarea,
    select {
        min-height: 42px !important;
        font-size: 14px !important;
        padding: 8px 12px !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .site-header {
        padding: 10px 12px !important;
        position: sticky;
        top: 0;
        z-index: 1000;
        background: #12121a;
    }

    .header-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .site-title {
        font-size: 18px !important;
        flex: 0 0 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 45%;
    }

    /* ===== HAMBURGER MENU ===== */
    .hamburger-menu {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 42px;
        height: 42px;
        background: var(--bg-input);
        border: 1px solid var(--border);
        border-radius: 8px;
        cursor: pointer;
        padding: 0;
        gap: 5px;
        flex: 0 0 auto;
        order: 2;
        z-index: 1001;
    }

    .hamburger-menu span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--text-light);
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    .hamburger-menu.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger-menu.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Sembunyikan nav desktop di mobile */
    .main-nav {
        display: none !important;
    }

    /* Nav mobile: dropdown penuh */
    .main-nav.open {
        display: block !important;
        position: fixed;
        top: 62px;
        left: 0;
        right: 0;
        background: #12121a;
        border-bottom: 1px solid var(--border);
        padding: 12px;
        z-index: 999;
        max-height: calc(100vh - 62px);
        overflow-y: auto;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
        width: 100% !important;
    }

    body.light-mode .main-nav.open {
        background: #ffffff;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }

    .main-nav.open ul {
        display: flex;
        flex-direction: column;
        gap: 4px;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .main-nav.open li {
        width: 100%;
    }

    .main-nav.open li a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 14px;
        border-radius: 6px;
        font-size: 14px !important;
        color: var(--text-light);
        width: 100%;
        box-sizing: border-box;
    }

    .main-nav.open li a:hover {
        background: var(--accent-light);
        color: var(--accent);
    }

    /* ===== HEADER ACTIONS MOBILE ===== */
    .header-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 1;
        justify-content: flex-end;
        min-width: 0;
        order: 3;
    }

    /* Search: full width baris kedua */
    .search-wrapper {
        flex: 1;
        min-width: 0;
    }

    .search-form {
        display: flex;
        width: 100%;
        gap: 4px;
    }

    .search-form input[type="search"] {
        flex: 1;
        min-width: 0;
        width: auto;
        padding: 8px 12px;
        font-size: 13px;
    }

    .search-form button {
        flex: 0 0 auto;
        width: 42px;
        min-height: 42px !important;
        padding: 0 !important;
    }

    .theme-toggle {
        width: 42px;
        height: 42px;
        font-size: 18px;
        flex: 0 0 auto;
    }

    .login-btn {
        min-height: 42px !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    /* Search suggestions mobile */
    .search-suggestions {
        position: absolute;
        left: 12px;
        right: 12px;
        top: 100%;
        max-width: calc(100vw - 24px);
        z-index: 9999;
    }

    .search-suggestions .suggestion-item {
        width: 100%;
        box-sizing: border-box;
    }

    /* ===== FLOATINGS WIDGETS MOBILE ===== */
    /* Live Chat Widget: kompak & tidak menutupi konten */
    .khwa-chat-widget {
        bottom: 12px !important;
        right: 12px !important;
        z-index: 999 !important;
    }

    .khwa-chat-toggle {
        width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        justify-content: center !important;
        font-size: 20px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    .khwa-chat-toggle .khwa-chat-label {
        display: none !important;
    }

    .khwa-chat-toggle .khwa-chat-icon {
        font-size: 22px !important;
    }

    .khwa-chat-unread {
        position: absolute;
        top: -2px;
        right: -2px;
        min-width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #ff3b30;
        color: #fff;
        font-size: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
    }

    .khwa-chat-box {
        width: min(calc(100vw - 24px), 340px) !important;
        max-height: 55vh !important;
        bottom: 68px !important;
        right: 12px !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    }

    .khwa-chat-header {
        padding: 10px 12px !important;
    }

    .khwa-chat-body {
        max-height: 40vh !important;
    }

    .khwa-chat-input-row {
        padding: 8px !important;
    }

    .khwa-chat-input-row input {
        min-height: 40px !important;
        font-size: 13px !important;
    }

    .khwa-chat-input-row button {
        min-width: 40px !important;
        min-height: 40px !important;
    }

    /* Reader Setting Button */
    .reader-setting-btn {
        bottom: 12px !important;
        right: 68px !important;
        width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        z-index: 999 !important;
        border-radius: 50% !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    .reader-setting-btn + .khwa-chat-widget {
        right: 12px !important;
    }

    .reader-setting-btn + .khwa-chat-widget .khwa-chat-box {
        right: 12px !important;
    }

    /* Back to Top */
    .back-to-top,
    .scroll-top-btn,
    #back-to-top,
    #scroll-top {
        bottom: 12px !important;
        right: 12px !important;
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        z-index: 999 !important;
    }
}

@media (max-width: 768px) {
    .site-main {
        margin: 12px auto !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Footer mobile */
    .site-footer {
        padding: 16px 12px !important;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 14px;
    }

    .footer-links a {
        font-size: 12px !important;
    }

    .footer-inner p {
        font-size: 11px !important;
        text-align: center;
    }

    /* Section header */
    .section-header {
        gap: 6px;
        padding-bottom: 6px;
        margin-bottom: 12px;
    }

    /* Hero carousel mobile */
    .hero-carousel,
    .hero-slides {
        aspect-ratio: 16 / 3.6 !important;
        min-height: 0 !important;
    }

    .hero-title {
        font-size: 18px !important;
    }

    .hero-synopsis {
        font-size: 13px !important;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hero-content {
        padding: 15px !important;
    }

    .hero-btn-read {
        min-height: 40px !important;
        padding: 8px 18px !important;
    }

    /* Chapter list */
    .chapter-list li a {
        padding: 12px 10px !important;
        font-size: 13px !important;
    }

    /* Komentar */
    .comment-body,
    .comment-content {
        font-size: 13px !important;
    }

    .comment-list li {
        padding: 10px !important;
    }

    /* Tabel dan konten lebar */
    .entry-content table,
    .post-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Pagination */
    .pagination,
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    .pagination .page-numbers,
    .nav-links .page-numbers {
        min-width: 40px;
        min-height: 40px !important;
        padding: 8px 12px !important;
    }
}

@media (max-width: 768px) {
    /* Manga grid default: 3 kolom di tablet, 2 kolom di HP */
    .manga-grid,
    .project-row,
    .latest-row,
    .related-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* View mode: hormati pilihan user dengan kolom yang proporsional */
    .content-grid.view-grid,
    .content-grid.view-grid.manga-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }

    .content-grid.view-large,
    .content-grid.view-large.manga-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .content-grid.view-medium,
    .content-grid.view-medium.manga-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .content-grid.view-small,
    .content-grid.view-small.manga-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
    }

    .content-grid.view-tiles,
    .content-grid.view-tiles.manga-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    /* List, Detail, Content: tetap horizontal di mobile */
    .content-grid.view-list,
    .content-grid.view-detail,
    .content-grid.view-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .content-grid.view-list .content-card,
    .content-grid.view-detail .content-card,
    .content-grid.view-content .content-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 10px !important;
        width: 100% !important;
    }

    /* Ukuran cover untuk list/detail/content */
    .content-grid.view-list .content-card .project-cover,
    .content-grid.view-list .content-card .latest-cover,
    .content-grid.view-content .content-card .project-cover,
    .content-grid.view-content .content-card .latest-cover {
        width: 48px !important;
        height: 64px !important;
        aspect-ratio: 3/4 !important;
        flex-shrink: 0 !important;
    }

    .content-grid.view-detail .content-card .project-cover,
    .content-grid.view-detail .content-card .latest-cover,
    .content-grid.view-detail.manga-grid .manga-thumb {
        width: 80px !important;
        height: 107px !important;
        aspect-ratio: 3/4 !important;
        flex-shrink: 0 !important;
    }

    /* Judul di list/detail/content */
    .content-grid.view-list .content-card .card-body h3,
    .content-grid.view-detail .content-card .card-body h3,
    .content-grid.view-content .content-card .card-body h3 {
        flex: 1 !important;
        font-size: 13px !important;
        min-height: auto !important;
        max-height: none !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }

    /* Kartu komik: lebar penuh dalam grid */
    .manga-item,
    .content-card,
    .project-card,
    .latest-card,
    .related-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Cover gambar: aspect-ratio 3/4 */
    .manga-thumb,
    .project-cover-wrap,
    .latest-cover-wrap,
    .content-card .project-cover-wrap,
    .content-card .latest-cover-wrap {
        width: 100% !important;
    }

    .manga-thumb img,
    .project-cover,
    .latest-cover,
    .content-card .project-cover,
    .content-card .latest-cover,
    .content-card .manga-thumb img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3/4 !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Judul komik: 2 baris max, tidak terpotong */
    .manga-info-title,
    .manga-info h2,
    .project-title,
    .latest-title,
    .related-title,
    .content-card .card-body h3,
    .content-grid .content-card .card-body h3,
    .manga-grid .manga-info-title {
        font-size: 12px !important;
        line-height: 1.3 !important;
        min-height: auto !important;
        max-height: none !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        padding-bottom: 2px !important;
    }

    /* Body kartu */
    .manga-item .card-body,
    .content-card .card-body {
        padding: 6px 8px !important;
        overflow: hidden !important;
    }

    /* Meta info: compact */
    .manga-meta,
    .ch-date,
    .chapter-date,
    .rating-badge,
    .mirror-badge,
    .project-type-badge,
    .manga-grid .manga-thumb .project-badge,
    .manga-grid .manga-thumb .mirror-badge,
    .manga-grid .manga-thumb .rating-badge,
    .manga-grid .manga-thumb .chapter-badge {
        font-size: 9px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Badge chapter di thumbnail */
    .project-chapter-badge,
    .manga-thumb .chapter-badge {
        font-size: 9px !important;
        padding: 2px 5px !important;
    }
}

@media (max-width: 480px) {
    .manga-grid,
    .project-row,
    .latest-row,
    .related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .content-grid.view-grid,
    .content-grid.view-grid.manga-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .content-grid.view-large,
    .content-grid.view-large.manga-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .content-grid.view-medium,
    .content-grid.view-medium.manga-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .content-grid.view-small,
    .content-grid.view-small.manga-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    .content-grid.view-tiles,
    .content-grid.view-tiles.manga-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Judul komik tetap terbaca */
    .manga-info-title,
    .manga-info h2,
    .project-title,
    .latest-title,
    .related-title,
    .content-card .card-body h3 {
        font-size: 11px !important;
    }
}

@media (max-width: 360px) {
    .manga-grid,
    .project-row,
    .latest-row,
    .related-grid,
    .content-grid.view-grid,
    .content-grid.view-large,
    .content-grid.view-medium,
    .content-grid.view-tiles {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .content-grid.view-small {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 5px !important;
    }

    .manga-info-title,
    .manga-info h2,
    .project-title,
    .latest-title,
    .related-title,
    .content-card .card-body h3 {
        font-size: 10px !important;
    }
}

@media (max-width: 768px) {
    .site-header {
        padding: 8px 12px !important;
    }

    .header-inner {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .site-title {
        font-size: 16px !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: 50% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .hamburger-menu {
        display: flex !important;
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 auto !important;
        order: 2 !important;
    }

    .header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        flex: 1 !important;
        justify-content: flex-end !important;
        min-width: 0 !important;
        order: 3 !important;
    }

    .search-wrapper {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .search-form {
        display: flex !important;
        width: 100% !important;
        gap: 4px !important;
    }

    .search-form input[type="search"] {
        flex: 1 !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        min-height: 36px !important;
    }

    .search-form button {
        flex: 0 0 auto !important;
        width: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        font-size: 14px !important;
    }

    .theme-toggle {
        width: 36px !important;
        height: 36px !important;
        font-size: 15px !important;
        flex: 0 0 auto !important;
    }

    .login-btn {
        min-height: 36px !important;
        padding: 6px 10px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }

    /* Nav mobile */
    .main-nav {
        display: none !important;
    }

    .main-nav.open {
        display: block !important;
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        background: #12121a !important;
        border-bottom: 1px solid var(--border) !important;
        padding: 10px !important;
        z-index: 999 !important;
        max-height: calc(100vh - 56px) !important;
        overflow-y: auto !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
        width: 100% !important;
    }

    body.light-mode .main-nav.open {
        background: #ffffff !important;
    }

    .main-nav.open ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .main-nav.open li {
        width: 100% !important;
    }

    .main-nav.open li a {
        display: flex !important;
        align-items: center !important;
        min-height: 40px !important;
        padding: 8px 12px !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        color: var(--text-light) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .main-nav.open li a:hover {
        background: var(--accent-light) !important;
        color: var(--accent) !important;
    }
}

@media (max-width: 768px) {
    .site-main {
        margin: 10px auto !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .section-header {
        gap: 6px !important;
        padding-bottom: 6px !important;
        margin-bottom: 10px !important;
    }

    .section-title {
        font-size: 15px !important;
    }

    .view-all-btn {
        min-height: 32px !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
    }

    /* View dropdown */
    .view-dropdown-toggle {
        min-height: 32px !important;
        padding: 4px 10px !important;
        font-size: 12px !important;
    }

    .view-dropdown-menu {
        min-width: 150px !important;
    }

    /* Hero carousel */
    .hero-carousel,
    .hero-slides {
        aspect-ratio: 16 / 3.6 !important;
        min-height: 0 !important;
    }

    .hero-title {
        font-size: 18px !important;
    }

    .hero-synopsis {
        font-size: 12px !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
    }

    .hero-content {
        padding: 12px !important;
    }

    .hero-btn-read {
        min-height: 36px !important;
        padding: 6px 14px !important;
        font-size: 12px !important;
    }

    /* Footer */
    .site-footer {
        padding: 12px 10px !important;
    }

    .footer-links {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px 12px !important;
    }

    .footer-links a {
        font-size: 11px !important;
    }

    .footer-inner p {
        font-size: 10px !important;
        text-align: center !important;
    }
}

@media (max-width: 768px) {
    .view-all-btn,
    .login-btn,
    .search-form button,
    .view-dropdown-toggle,
    .hero-btn-read,
    .btn,
    .button,
    .read-btn,
    .chapter-btn,
    .submit-btn,
    .comment-submit,
    .edit-profile-save-btn,
    .edit-profile-btn-secondary,
    .edit-profile-btn-danger,
    .pagination .page-numbers,
    .nav-links a,
    .nav-links .page-numbers,
    .comment-reply-link,
    .comment-edit-link {
        min-height: 36px !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 4px !important;
    }

    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="number"],
    textarea,
    select {
        min-height: 36px !important;
        font-size: 13px !important;
        padding: 6px 10px !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .chapter-list li a {
        padding: 10px 8px !important;
        font-size: 12px !important;
    }

    .comment-body,
    .comment-content {
        font-size: 12px !important;
    }

    .comment-list li {
        padding: 8px !important;
    }

    .pagination,
    .nav-links {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    .pagination .page-numbers,
    .nav-links .page-numbers {
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 6px 10px !important;
    }
}

@media (max-width: 768px) {
    .khwa-chat-widget {
        bottom: var(--fab-bottom, 10px) !important;
        right: 10px !important;
        z-index: 999 !important;
    }

    .khwa-chat-toggle {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        justify-content: center !important;
        font-size: 18px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    }

    .khwa-chat-toggle .khwa-chat-label {
        display: none !important;
    }

    .khwa-chat-toggle .khwa-chat-icon {
        font-size: 20px !important;
    }

    .khwa-chat-box {
        width: min(calc(100vw - 20px), 340px) !important;
        max-height: 55vh !important;
        bottom: 60px !important;
        right: 10px !important;
        border-radius: 10px !important;
    }

    .khwa-chat-header {
        padding: 8px 10px !important;
    }

    .khwa-chat-body {
        max-height: 40vh !important;
    }

    .khwa-chat-input-row {
        padding: 6px !important;
    }

    .khwa-chat-input-row input {
        min-height: 36px !important;
        font-size: 12px !important;
    }

    .khwa-chat-input-row button {
        min-width: 36px !important;
        min-height: 36px !important;
    }

    .reader-setting-btn {
        bottom: var(--fab-bottom, 10px) !important;
        right: 60px !important;
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        z-index: 999 !important;
        border-radius: 50% !important;
        padding: 0 !important;
        transition: bottom .3s cubic-bezier(.4,0,.2,1) !important;
    }

    .back-to-top,
    .scroll-top-btn,
    #back-to-top,
    #scroll-top {
        bottom: 10px !important;
        right: 10px !important;
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        z-index: 999 !important;
    }
}

@media (max-width: 768px) {
    .manga-header-info h1 {
        font-size: 18px !important;
    }

    .reader-heading h1 {
        font-size: 15px !important;
    }

    .manga-synopsis-inline .synopsis-content {
        font-size: 12px !important;
    }

    .manga-tab {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    .manga-tab-content {
        padding: 10px !important;
    }

    .manga-info-table td,
    .manga-info-table th {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 768px) {
    .reader-container {
        padding: 0 !important;
    }

    .reader-page img {
        max-width: 100% !important;
        height: auto !important;
    }

    .reader-nav {
        padding: 8px !important;
    }

    .reader-nav a {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
}

@media (max-width: 768px) {
    .profile-header {
        padding: 12px !important;
    }

    .profile-avatar {
        width: 60px !important;
        height: 60px !important;
    }

    .profile-name {
        font-size: 16px !important;
    }

    .profile-stats {
        gap: 8px !important;
    }

    .profile-stat-value {
        font-size: 14px !important;
    }

    .profile-stat-label {
        font-size: 10px !important;
    }

    .bookmark-item,
    .history-item {
        padding: 8px !important;
        gap: 8px !important;
    }

    .bookmark-cover,
    .history-cover {
        width: 40px !important;
        height: 54px !important;
    }

    .bookmark-title,
    .history-title {
        font-size: 12px !important;
    }
}

@media (max-width: 768px) {
    .entry-content table,
    .post-content table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }

    pre,
    code,
    blockquote,
    .wp-block-quote,
    .wp-block-table,
    .wp-block-preformatted {
        max-width: 100% !important;
        overflow-x: auto !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .content-grid.view-grid { grid-template-columns: repeat(4, 1fr) !important; }
    .content-grid.view-large { grid-template-columns: repeat(3, 1fr) !important; }
    .content-grid.view-medium { grid-template-columns: repeat(4, 1fr) !important; }
    .content-grid.view-small { grid-template-columns: repeat(5, 1fr) !important; }
    .content-grid.view-tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; }
    .manga-grid { grid-template-columns: repeat(4, 1fr) !important; }
    .project-row { grid-template-columns: repeat(4, 1fr) !important; }
    .latest-row { grid-template-columns: repeat(4, 1fr) !important; }
    .related-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

@media (max-width: 768px) {
    /* Grid konsisten: 3 kolom di tablet-mobile, 2 kolom di HP kecil */
    .content-grid.view-grid,
    .content-grid.view-large,
    .content-grid.view-medium,
    .content-grid.view-small,
    .content-grid.view-tiles,
    .content-grid.view-large.manga-grid,
    .content-grid.view-medium.manga-grid,
    .content-grid.view-small.manga-grid,
    .manga-grid,
    .project-row,
    .latest-row,
    .related-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }

    /* Header mobile: layout 2 baris yang rapi */
    .site-header {
        padding: 8px 10px !important;
    }

    .header-inner {
        display: grid !important;
        grid-template-columns: 1fr auto auto !important;
        grid-template-areas: "title hamburger actions" "search search search" !important;
        gap: 6px !important;
        align-items: center !important;
    }

    .site-title {
        grid-area: title !important;
        font-size: 16px !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .hamburger-menu {
        grid-area: hamburger !important;
        order: 0 !important;
    }

    .header-actions {
        grid-area: actions !important;
        order: 0 !important;
        justify-content: flex-end !important;
        flex: none !important;
        min-width: 0 !important;
    }

    .search-wrapper {
        grid-area: search !important;
        width: 100% !important;
        flex: none !important;
    }

    .search-form {
        width: 100% !important;
    }

    .search-form input[type="search"] {
        flex: 1 !important;
        min-width: 0 !important;
        width: auto !important;
    }

    /* Nav mobile dropdown */
    .main-nav.open {
        top: 56px !important;
        max-height: calc(100vh - 56px) !important;
    }

    /* Login button: compact di mobile */
    .login-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    .theme-toggle {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
    }

    /* Kartu manga: pastikan gambar tidak overflow */
    .manga-thumb,
    .project-cover-wrap,
    .latest-cover-wrap,
    .content-card .project-cover-wrap,
    .content-card .latest-cover-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .manga-thumb img,
    .project-cover,
    .latest-cover,
    .content-card .project-cover,
    .content-card .latest-cover,
    .content-card .manga-thumb img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3/4 !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Judul kartu: jangan overflow */
    .manga-info-title,
    .project-title,
    .latest-title,
    .related-title,
    .content-card .card-body h3 {
        font-size: 12px !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        min-height: auto !important;
    }

    /* Section header: jangan overflow */
    .section-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .section-title {
        font-size: 16px !important;
    }

    /* Konten utama: padding lebih kecil di mobile */
    .site-main {
        padding: 0 10px !important;
        margin: 15px auto !important;
    }

    /* Footer: rapi di mobile */
    .footer-links {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .footer-links a {
        font-size: 12px !important;
    }

    .footer-inner p {
        font-size: 11px !important;
        word-wrap: break-word !important;
    }
}

@media (max-width: 480px) {
    /* 2 kolom di HP kecil agar kartu tetap terbaca */
    .content-grid.view-grid,
    .content-grid.view-large,
    .content-grid.view-medium,
    .content-grid.view-small,
    .content-grid.view-tiles,
    .content-grid.view-large.manga-grid,
    .content-grid.view-medium.manga-grid,
    .content-grid.view-small.manga-grid,
    .manga-grid,
    .project-row,
    .latest-row,
    .related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Header: lebih compact */
    .header-inner {
        grid-template-columns: 1fr auto auto !important;
        gap: 4px !important;
    }

    .site-title {
        font-size: 14px !important;
    }

    .login-btn {
        padding: 5px 8px !important;
        font-size: 11px !important;
    }

    .theme-toggle {
        width: 32px !important;
        height: 32px !important;
    }

    .hamburger-menu {
        width: 38px !important;
        height: 38px !important;
    }

    /* Judul kartu lebih kecil */
    .manga-info-title,
    .project-title,
    .latest-title,
    .related-title,
    .content-card .card-body h3 {
        font-size: 11px !important;
    }

    /* Hero carousel: jangan terlalu tinggi */
    .hero-carousel,
    .hero-slides {
        aspect-ratio: 16 / 3.6 !important;
        min-height: 0 !important;
    }

    .hero-title {
        font-size: 16px !important;
    }

    .hero-synopsis {
        font-size: 11px !important;
    }
}

@media (max-width: 360px) {
    .content-grid.view-grid,
    .content-grid.view-large,
    .content-grid.view-medium,
    .content-grid.view-small,
    .content-grid.view-tiles,
    .manga-grid,
    .project-row,
    .latest-row,
    .related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .site-title {
        font-size: 13px !important;
    }

    .login-btn {
        display: none !important;
    }

    .search-form input[type="search"] {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
}

@media (max-width: 768px) {
    .content-grid.view-list,
    .content-grid.view-detail,
    .content-grid.view-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .content-grid.view-list .content-card,
    .content-grid.view-detail .content-card,
    .content-grid.view-content .content-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .content-grid.view-list .content-card .project-cover,
    .content-grid.view-list .content-card .latest-cover,
    .content-grid.view-content .content-card .project-cover,
    .content-grid.view-content .content-card .latest-cover {
        width: 60px !important;
        height: 80px !important;
        flex: 0 0 60px !important;
        object-fit: cover !important;
    }

    .content-grid.view-detail .content-card .project-cover,
    .content-grid.view-detail .content-card .latest-cover,
    .content-grid.view-detail.manga-grid .manga-thumb {
        width: 80px !important;
        height: 107px !important;
        flex: 0 0 80px !important;
        object-fit: cover !important;
    }

    .content-grid.view-list .content-card .card-body,
    .content-grid.view-detail .content-card .card-body,
    .content-grid.view-content .content-card .card-body {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .content-grid.view-list .content-card .card-body h3,
    .content-grid.view-detail .content-card .card-body h3,
    .content-grid.view-content .content-card .card-body h3 {
        font-size: 13px !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (max-width: 768px) {
    .reader-box {
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .reader-images img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .chapter-list {
        padding: 0 10px !important;
    }

    .chapter-list li {
        padding: 8px 0 !important;
    }

    .chapter-list li .chapter-date {
        float: none !important;
        display: block !important;
        margin-top: 2px !important;
        font-size: 10px !important;
    }

    /* Manga header (single manga page) */
    .manga-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 12px !important;
    }

    .manga-header-thumb {
        width: 100% !important;
        max-width: 200px !important;
        margin: 0 auto !important;
    }

    .manga-header-thumb img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3/4 !important;
        object-fit: cover !important;
    }

    .manga-header-info {
        width: 100% !important;
        min-width: 0 !important;
    }

    .manga-header-info h1 {
        font-size: 18px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .manga-meta-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .manga-meta-item {
        padding: 8px !important;
    }

    .manga-meta-label {
        font-size: 10px !important;
    }

    .manga-meta-value {
        font-size: 12px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Chapter navigation */
    .chnav {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .chnav select {
        width: 100% !important;
        max-width: 100% !important;
    }

    .nextprev {
        justify-content: center !important;
        gap: 8px !important;
    }

    .nextprev a {
        padding: 8px 12px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 768px) {
    .khwa-chat-widget {
        z-index: 9999 !important;
    }

    .khwa-chat-toggle {
        bottom: 15px !important;
        right: 15px !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
    }

    .khwa-chat-box {
        width: min(calc(100vw - 20px), 340px) !important;
        max-height: 60vh !important;
        bottom: 70px !important;
        right: 10px !important;
        left: auto !important;
    }
}

@media (max-width: 768px) {
    .view-dropdown-menu {
        position: fixed !important;
        top: auto !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        width: auto !important;
        min-width: 0 !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
        z-index: 9999 !important;
    }
}

@media (max-width: 768px) {
    .search-suggestions {
        position: fixed !important;
        top: auto !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        width: auto !important;
        max-height: 50vh !important;
        overflow-y: auto !important;
        z-index: 9999 !important;
    }
}

@media (max-width: 768px) {
    .pagination,
    .nav-links,
    .page-numbers {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    .page-numbers {
        padding: 6px 10px !important;
        font-size: 12px !important;
        min-width: 32px !important;
        text-align: center !important;
    }
}

@media (max-width: 768px) {
    .widget-area,
    .sidebar {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }

    .widget {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .widget ul,
    .widget ol {
        padding-left: 15px !important;
    }

    .widget img {
        max-width: 100% !important;
        height: auto !important;
    }
}

@media (max-width: 768px) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="number"],
    textarea,
    select {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    form {
        max-width: 100% !important;
    }

    .wp-block-search,
    .wp-block-search__inside-wrapper {
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    iframe,
    embed,
    object,
    video {
        max-width: 100% !important;
        height: auto !important;
    }

    .wp-block-embed,
    .wp-block-video,
    .wp-block-cover {
        max-width: 100% !important;
        overflow: hidden !important;
    }
}

@media (max-width: 768px) {
    .flex-row,
    .flex-container,
    .d-flex,
    .row {
        flex-wrap: wrap !important;
        max-width: 100% !important;
    }

    .flex-row > *,
    .flex-container > *,
    .d-flex > *,
    .row > * {
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 768px) {
    [class*="grid"] {
        max-width: 100% !important;
    }

    [class*="grid"] > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    h1, h2, h3, h4, h5, h6,
    p, a, span, div, li, td, th {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    a {
        max-width: 100% !important;
    }
}

/* ============================================================
 * HERO CAROUSEL FINAL OVERRIDE (55% height, center 10%)
 * Menimpa semua media query lama yang masih memakai aspect-ratio
 * agar konsisten dengan spesifikasi tinggi 55vh/55svh.
 * ============================================================ */
.hero-carousel,
.hero-carousel.hero-slides,
.hero-carousel .hero-slides,
.hero-slides {
    height: 55vh !important;
    height: 55svh !important;
    min-height: 360px !important;
    max-height: 55vh !important;
    max-height: 55svh !important;
    aspect-ratio: auto !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
}

/* Gambar hero: object-position center 10% (geser fokus ke atas) */
.hero-bg-img,
.hero-carousel .hero-bg-img,
.hero-slides .hero-bg-img {
    object-fit: cover !important;
    object-position: center 10% !important;
}

.hero-bg,
.hero-carousel .hero-bg,
.hero-slides .hero-bg {
    background-size: cover !important;
    background-position: center 10% !important;
}

/* ============================================================
 * POSTER MANHWA (Scrapbook / Grunge Ink Splash) - SISI KANAN
 * Tinggi poster = 85% dari tinggi layout container (h-[85%])
 * Lebar menyesuaikan tinggi (aspect-ratio 2:3)
 * ============================================================ */
.hero-poster {
    position: absolute;
    right: 6%;
    top: 50%;
    transform: translateY(-50%) rotate(-2deg);
    /* Tinggi = 85% dari tinggi layout container (jarak kartu atas-bawah) */
    height: 85%;
    width: auto;
    aspect-ratio: 2 / 3;
    z-index: 3;
    /* Drop-shadow pekat agar poster menyatu dengan efek kertas seni robek */
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.7))
            drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5))
            drop-shadow(0 0 6px rgba(0, 0, 0, 0.6));
    animation: hero-poster-float 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes hero-poster-float {
    0%, 100% { transform: translateY(-50%) rotate(-2deg); }
    50% { transform: translateY(calc(-50% - 6px)) rotate(0deg); }
}

.hero-poster-frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #f6f0e3;
    /* Torn paper edges - robekan kertas bergaya underground */
    clip-path: polygon(
        0% 0%, 100% 0%, 100% 8%, 96% 12%, 100% 20%, 94% 26%, 100% 34%,
        97% 42%, 100% 50%, 95% 56%, 100% 64%, 96% 72%, 100% 80%,
        93% 86%, 100% 92%, 95% 100%, 0% 100%, 4% 94%, 0% 88%,
        5% 82%, 0% 74%, 3% 66%, 0% 58%, 5% 50%, 0% 42%, 4% 34%,
        0% 26%, 3% 18%, 0% 10%, 4% 5%
    );
    /* Torn paper edges sudah ditangani oleh clip-path di atas.
       Mask-image SVG feTurbulence dihapus karena stitchTiles='stitch'
       menyebabkan efek grid (kotak-kotak) terlihat di poster. */
    border: none;
}

/* ===== Ink Splash / Brush Border Overlay (pinggiran) ===== */
.hero-poster-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    /* Cipratan tinta hitam kasar di sekeliling pinggiran */
    background-image:
        /* Cipratan besar kiri atas */
        radial-gradient(ellipse at 5% 8%, rgba(0, 0, 0, 0.55) 0%, transparent 32%),
        radial-gradient(ellipse at 2% 20%, rgba(0, 0, 0, 0.35) 0%, transparent 25%),
        radial-gradient(ellipse at 12% 3%, rgba(0, 0, 0, 0.45) 0%, transparent 28%),
        /* Cipratan besar kanan atas */
        radial-gradient(ellipse at 95% 6%, rgba(0, 0, 0, 0.5) 0%, transparent 30%),
        radial-gradient(ellipse at 88% 2%, rgba(0, 0, 0, 0.4) 0%, transparent 24%),
        /* Cipratan kiri bawah */
        radial-gradient(ellipse at 4% 92%, rgba(0, 0, 0, 0.5) 0%, transparent 30%),
        radial-gradient(ellipse at 10% 85%, rgba(0, 0, 0, 0.3) 0%, transparent 22%),
        radial-gradient(ellipse at 1% 75%, rgba(0, 0, 0, 0.35) 0%, transparent 20%),
    /* Cipratan kanan bawah */
    radial-gradient(ellipse at 95% 90%, rgba(0, 0, 0, 0.55) 0%, transparent 32%),
    radial-gradient(ellipse at 88% 96%, rgba(0, 0, 0, 0.35) 0%, transparent 22%),
    /* Noda tinta acak - tanpa repeating-linear-gradient
       yang menyebabkan efek grid (kotak-kotak) */
        radial-gradient(circle at 18% 12%, rgba(0, 0, 0, 0.25) 0%, transparent 15%),
        radial-gradient(circle at 82% 88%, rgba(0, 0, 0, 0.28) 0%, transparent 18%),
        radial-gradient(circle at 70% 18%, rgba(0, 0, 0, 0.2) 0%, transparent 14%),
        radial-gradient(circle at 25% 80%, rgba(0, 0, 0, 0.22) 0%, transparent 16%);
}

/* ===== Paint stains + tire tracks interior (grunge) ===== */
.hero-poster-frame > .hero-poster-grunge {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse at 15% 25%, rgba(0, 0, 0, 0.15) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 75%, rgba(0, 0, 0, 0.12) 0%, transparent 40%);
    mix-blend-mode: multiply;
}

.hero-poster-img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    z-index: 0;
}


/* Landscape mobile (max-height 500px): tetap 55% tapi lebih pendek */
@media (max-width: 768px) and (max-height: 500px) {
    .hero-carousel,
    .hero-slides {
        height: 55vh !important;
        height: 55svh !important;
        min-height: 280px !important;
        max-height: 55vh !important;
        max-height: 55svh !important;
        aspect-ratio: auto !important;
    }
}

/* Responsive: sembunyikan poster di layar kecil */
@media (max-width: 768px) {
    .hero-poster {
        display: none;
    }
}

/* ===== GOALS TRAKTEER RESPONSIVE ===== */
/* Widget tetap tampil di mobile namun bisa ditutup dengan tombol X.
   Ukuran tetap memadai agar konten embed tidak terpotong,
   namun z-index tetap rendah agar tidak menutupi elemen lain. */
@media (max-width: 768px) {
    .trakteer-goals-widget {
        position: fixed !important;
        bottom: 15px !important;
        left: 15px !important;
        width: min(340px, calc(100vw - 30px)) !important;
        height: 140px !important;
        z-index: 90 !important;
        border-radius: 12px !important;
        overflow: visible !important;
        background: transparent !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
        pointer-events: auto !important;
    }

    .trakteer-goals-widget iframe {
        width: 100% !important;
        height: 100% !important;
        border: none !important;
        display: block !important;
        border-radius: 12px !important;
        pointer-events: auto !important;
    }

    .trakteer-goals-close {
        top: -10px !important;
        right: -10px !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 17px !important;
        z-index: 96 !important;
        background: rgba(0, 0, 0, 0.85) !important;
    }

    .trakteer-goals-close:hover {
        background: #ff3b30 !important;
    }

    /* Tombol kecil untuk menampilkan kembali widget yang sudah ditutup */
    .trakteer-goals-reopen {
        position: fixed;
        bottom: 15px;
        left: 15px;
        z-index: 90;
        display: none;
        align-items: center;
        gap: 6px;
        background: var(--accent);
        color: #fff;
        border: none;
        border-radius: 20px;
        padding: 8px 16px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(255, 107, 0, 0.4);
        transition: all .2s;
        font-family: inherit;
        pointer-events: auto;
    }

    .trakteer-goals-reopen:hover {
        background: var(--accent-hover);
        transform: translateY(-2px);
    }

    .trakteer-goals-reopen.show {
        display: inline-flex;
    }
}

/* Di layar sangat kecil, widget tetap tampil namun bisa ditutup */
@media (max-width: 480px) {
    .trakteer-goals-widget {
        width: calc(100vw - 30px) !important;
        left: 15px !important;
    }

    .trakteer-goals-close {
        width: 28px !important;
        height: 28px !important;
        font-size: 15px !important;
    }
}

/* ============================================================
   FIX MOBILE LAYOUT — Z-INDEX & CARD STANDARDIZATION
   (Ditambahkan untuk memperbaiki overlap & menyamakan card)
   ============================================================ */

/* ===== 1. Z-INDEX HIERARCHY (Halaman Chapter) =====
   Hierarki jelas untuk floating UI:
   - Konten dasar: auto
   - Live Chat widget (tertutup): 900
   - Floating reader header/footer: 1000
   - Tombol Setting: 1001
   - Chat box (terbuka): 1002
   - Preview banner: 200
*/

/* Live Chat widget: di bawah footer & tombol setting */
.khwa-chat-widget {
    z-index: 900 !important;
}

/* Chat box saat terbuka: di atas semua elemen */
.khwa-chat-box {
    z-index: 1002 !important;
}

/* Floating reader header & footer: di atas chat widget */
.reader-float-header,
.reader-float-footer {
    z-index: 1000 !important;
}

/* Tombol Setting: di atas footer */
.reader-setting-btn {
    z-index: 1001 !important;
}

/* ===== 2. POSISI MOBILE (Setting & Chat tidak overlap) ===== */
@media (max-width: 768px) {
    /* Live Chat: sudut kanan bawah */
    .khwa-chat-widget {
        bottom: var(--fab-bottom, 12px) !important;
        right: 12px !important;
    }

    /* Tombol Setting: terpisah di kiri chat */
    .reader-setting-btn {
        bottom: var(--fab-bottom, 12px) !important;
        right: 68px !important;
        transition: bottom .3s cubic-bezier(.4,0,.2,1) !important;
    }

    /* Saat setting aktif (footer tampil), tombol melayang otomatis terangkat
       via CSS variable --fab-bottom yang di-update JS (main.js).
       Chat widget tetap terlihat namun di atas footer, bukan disembunyikan. */
    body.reader-bars-visible .khwa-chat-widget {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
    }
}

/* ===== 3. FLOATING HEADER & FOOTER: height & overflow handling =====
   Pastikan Header & Footer menu Setting tampil utuh tanpa terpotong */
.reader-float-header,
.reader-float-footer {
    max-height: 90vh;
    overflow-y: auto;
}

.reader-float-header-inner,
.reader-float-footer-inner {
    padding: 10px 15px;
}

/* ===== 4. CARD STANDARDIZATION MOBILE (Benchmark: Mirror Update) =====
   Hanya diterapkan di tampilan mobile agar sama persis dengan
   section Mirror Update (desktop tetap mempertahankan desain asli). */
@media (max-width: 768px) {
    /* Project section & halaman: hapus padding wrapper agar cover full-bleed
       (sama persis dengan .latest-cover pada Mirror Update) */
    .project-cover-wrap {
        padding: 0 !important;
    }

    .project-cover {
        border-radius: 0 !important;
    }

    /* Daftar Manhwa & Bookmark: samakan dengan Mirror Update
       (.latest-title: padding 10px 12px 5px, min-height 40px)
       (.latest-chapters: padding 0 12px 12px, li a padding 6px 0) */
    .manga-grid .card-body {
        padding: 0 !important;
    }

    .manga-grid .manga-info-title {
        padding: 10px 12px 5px !important;
        margin-bottom: 0 !important;
        min-height: 40px !important;
    }

    .manga-grid .manga-chapters {
        padding: 0 12px 12px !important;
    }

    .manga-grid .manga-chapters li a {
        padding: 6px 0 !important;
    }
}

/* ============================================================
 * FINAL OVERRIDE: PENYAMARAN VIEW MODE MOBILE DENGAN MIRROR UPDATE
 * ============================================================
 * Acuan struktur HTML Mirror Update (index.php):
 *   .content-grid.latest-row.view-grid
 *   └── .content-card.latest-card
 *       ├── .latest-cover      (aspect-ratio 3/4, full-bleed, overflow hidden)
 *       │   ├── .mirror-badge  (top-left)
 *       │   ├── .rating-badge  (bottom-left)
 *       │   └── .project-chapter-badge (bottom-right)
 *       └── .card-body
 *           ├── .latest-title  (padding 10px 12px 5px, min-height 40px, clamp 2)
 *           ├── .card-excerpt  (clamp 2, padding 0 12px 5px)
 *           └── .latest-chapters (padding 0 12px 12px, li a padding 6px 0)
 * ============================================================ */

/* Semua view mode grid/icon di mobile: auto-fill agar proporsional */
@media (max-width: 768px) {
    .content-grid.view-grid,
    .content-grid.view-grid.manga-grid,
    .content-grid.view-large,
    .content-grid.view-large.manga-grid,
    .content-grid.view-medium,
    .content-grid.view-medium.manga-grid,
    .content-grid.view-small,
    .content-grid.view-small.manga-grid,
    .content-grid.view-tiles,
    .content-grid.view-tiles.manga-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .content-grid.view-medium,
    .content-grid.view-medium.manga-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
        gap: 10px !important;
    }

    .content-grid.view-small,
    .content-grid.view-small.manga-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
        gap: 8px !important;
    }

    .content-grid.view-tiles,
    .content-grid.view-tiles.manga-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
        gap: 8px !important;
    }

    /* Kartu: lebar penuh, tidak overflow */
    .content-grid .content-card,
    .content-grid .project-card,
    .content-grid .latest-card,
    .content-grid .manga-item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        background: var(--bg-card) !important;
        border: 1px solid var(--border) !important;
        border-radius: 6px !important;
        overflow: hidden !important;
    }
}

/* Cover images disamakan dengan .latest-cover (full-bleed, aspect 3/4) */
.content-card .project-cover-wrap {
    padding: 0 !important;
}

.content-card .project-cover,
.content-card .latest-cover,
.content-card .manga-thumb {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 3/4 !important;
    height: auto !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: var(--bg-input) !important;
}

.content-card .project-cover img,
.content-card .latest-cover img,
.content-card .manga-thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 3/4 !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Badge: posisi & ukuran disamakan dengan Mirror Update */
.content-card .project-type-badge,
.content-card .mirror-badge,
.content-card .project-badge {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    right: auto !important;
    bottom: auto !important;
    background: var(--accent) !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    z-index: 3 !important;
    white-space: nowrap !important;
    max-width: calc(100% - 12px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
}

.content-card .rating-badge {
    position: absolute !important;
    bottom: 6px !important;
    left: 6px !important;
    top: auto !important;
    right: auto !important;
    background: linear-gradient(135deg, #FFD700, #F5A623) !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    z-index: 3 !important;
    line-height: 1.2 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
    white-space: nowrap !important;
}

.content-card .project-chapter-badge,
.content-card .chapter-badge {
    position: absolute !important;
    bottom: 6px !important;
    right: 6px !important;
    top: auto !important;
    left: auto !important;
    background: var(--accent) !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    z-index: 3 !important;
    line-height: 1.2 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
    white-space: nowrap !important;
    display: block !important;
}

/* Card body & judul disamakan dengan Mirror Update */
.content-card .card-body {
    padding: 0 !important;
    overflow: hidden !important;
}

.content-card .project-title,
.content-card .latest-title,
.content-card .manga-info-title,
.content-card .manga-info h2 {
    display: block !important;
    padding: 10px 12px 5px !important;
    margin: 0 !important;
    min-height: 40px !important;
    max-height: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--text-white) !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.content-card .project-title a,
.content-card .latest-title a,
.content-card .manga-info-title a,
.content-card .manga-info h2 a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: var(--text-white) !important;
    font-size: inherit !important;
}

/* Excerpt disamakan dengan Mirror Update (clamp 2) */
.content-card .card-excerpt {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 0 12px 5px !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
    color: var(--text) !important;
}

/* Daftar chapter disamakan dengan .latest-chapters */
.content-card .project-chapters,
.content-card .latest-chapters,
.content-card .manga-chapters {
    display: block !important;
    list-style: none !important;
    padding: 0 12px 12px !important;
    margin: 0 !important;
}

.content-card .project-chapters li,
.content-card .latest-chapters li,
.content-card .manga-chapters li {
    display: block !important;
    border-top: 1px solid var(--border) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.content-card .project-chapters li a,
.content-card .latest-chapters li a,
.content-card .manga-chapters li a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    color: var(--text) !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.content-card .project-chapters li a .ch-name,
.content-card .latest-chapters li a .ch-name,
.content-card .manga-chapters li a span:first-child {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.content-card .project-chapters li a .ch-date,
.content-card .latest-chapters li a .ch-date,
.content-card .manga-chapters li a .ch-date {
    flex-shrink: 0 !important;
    color: #666 !important;
    font-size: 9px !important;
}

/* ===== LIST / DETAIL / CONTENT VIEW: horizontal & rapi di mobile ===== */
@media (max-width: 768px) {
    .content-grid.view-list,
    .content-grid.view-list.manga-grid,
    .content-grid.view-detail,
    .content-grid.view-detail.manga-grid,
    .content-grid.view-content,
    .content-grid.view-content.manga-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .content-grid.view-list .content-card,
    .content-grid.view-detail .content-card,
    .content-grid.view-content .content-card,
    .content-grid.view-list.manga-grid .manga-item,
    .content-grid.view-detail.manga-grid .manga-item,
    .content-grid.view-content.manga-grid .manga-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Thumbnail kecil di list/content (60x80) */
    .content-grid.view-list .content-card .project-cover,
    .content-grid.view-list .content-card .latest-cover,
    .content-grid.view-list .content-card .manga-thumb,
    .content-grid.view-content .content-card .project-cover,
    .content-grid.view-content .content-card .latest-cover,
    .content-grid.view-content .content-card .manga-thumb,
    .content-grid.view-list.manga-grid .manga-thumb,
    .content-grid.view-content.manga-grid .manga-thumb {
        width: 60px !important;
        max-width: 60px !important;
        height: 80px !important;
        min-height: 80px !important;
        aspect-ratio: 3/4 !important;
        flex: 0 0 60px !important;
        overflow: hidden !important;
    }

    .content-grid.view-list .content-card .project-cover img,
    .content-grid.view-list .content-card .latest-cover img,
    .content-grid.view-list .content-card .manga-thumb img,
    .content-grid.view-content .content-card .project-cover img,
    .content-grid.view-content .content-card .latest-cover img,
    .content-grid.view-content .content-card .manga-thumb img,
    .content-grid.view-list.manga-grid .manga-thumb img,
    .content-grid.view-content.manga-grid .manga-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Detail view: thumbnail 90x120 */
    .content-grid.view-detail .content-card .project-cover,
    .content-grid.view-detail .content-card .latest-cover,
    .content-grid.view-detail .content-card .manga-thumb,
    .content-grid.view-detail.manga-grid .manga-thumb {
        width: 90px !important;
        max-width: 90px !important;
        height: 120px !important;
        min-height: 120px !important;
        aspect-ratio: 3/4 !important;
        flex: 0 0 90px !important;
    }

    .content-grid.view-detail .content-card .project-cover img,
    .content-grid.view-detail .content-card .latest-cover img,
    .content-grid.view-detail .content-card .manga-thumb img,
    .content-grid.view-detail.manga-grid .manga-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Badge di list/content/detail: mini tapi tetap tampil */
    .content-grid.view-list .content-card .project-type-badge,
    .content-grid.view-list .content-card .mirror-badge,
    .content-grid.view-list .content-card .project-badge,
    .content-grid.view-content .content-card .project-type-badge,
    .content-grid.view-content .content-card .mirror-badge,
    .content-grid.view-content .content-card .project-badge,
    .content-grid.view-detail .content-card .project-type-badge,
    .content-grid.view-detail .content-card .mirror-badge,
    .content-grid.view-detail .content-card .project-badge {
        font-size: 6px !important;
        padding: 1px 4px !important;
        top: 2px !important;
        left: 2px !important;
    }

    .content-grid.view-list .content-card .rating-badge,
    .content-grid.view-content .content-card .rating-badge,
    .content-grid.view-detail .content-card .rating-badge {
        font-size: 6px !important;
        padding: 1px 4px !important;
        bottom: 2px !important;
        left: 2px !important;
    }

    .content-grid.view-list .content-card .project-chapter-badge,
    .content-grid.view-list .content-card .chapter-badge,
    .content-grid.view-content .content-card .project-chapter-badge,
    .content-grid.view-content .content-card .chapter-badge,
    .content-grid.view-detail .content-card .project-chapter-badge,
    .content-grid.view-detail .content-card .chapter-badge {
        font-size: 6px !important;
        padding: 1px 4px !important;
        bottom: 2px !important;
        right: 2px !important;
    }

    /* Body di list/content/detail: flex 1, judul kompak */
    .content-grid.view-list .content-card .card-body,
    .content-grid.view-detail .content-card .card-body,
    .content-grid.view-content .content-card .card-body,
    .content-grid.view-list.manga-grid .card-body,
    .content-grid.view-detail.manga-grid .card-body,
    .content-grid.view-content.manga-grid .card-body {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .content-grid.view-list .content-card .project-title,
    .content-grid.view-list .content-card .latest-title,
    .content-grid.view-list .content-card .manga-info-title,
    .content-grid.view-content .content-card .project-title,
    .content-grid.view-content .content-card .latest-title,
    .content-grid.view-content .content-card .manga-info-title,
    .content-grid.view-detail .content-card .project-title,
    .content-grid.view-detail .content-card .latest-title,
    .content-grid.view-detail .content-card .manga-info-title,
    .content-grid.view-list.manga-grid .manga-info-title,
    .content-grid.view-content.manga-grid .manga-info-title,
    .content-grid.view-detail.manga-grid .manga-info-title {
        padding: 0 0 3px !important;
        min-height: auto !important;
        max-height: none !important;
        font-size: 13px !important;
    }

    /* Sembunyikan excerpt & chapters di list/content agar tidak menumpuk;
       tetap tampil di detail view */
    .content-grid.view-list .content-card .card-excerpt,
    .content-grid.view-content .content-card .card-excerpt,
    .content-grid.view-list .content-card .project-chapters,
    .content-grid.view-list .content-card .latest-chapters,
    .content-grid.view-list .content-card .manga-chapters,
    .content-grid.view-content .content-card .project-chapters,
    .content-grid.view-content .content-card .latest-chapters,
    .content-grid.view-content .content-card .manga-chapters,
    .content-grid.view-list.manga-grid .manga-chapters,
    .content-grid.view-content.manga-grid .manga-chapters {
        display: none !important;
    }

    .content-grid.view-detail .content-card .card-excerpt,
    .content-grid.view-detail.manga-grid .card-excerpt {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        padding: 0 0 4px !important;
    }
}



/* ============================================================
 * FIX MOBILE: SEMUA SECTION TAMPILKAN NAMA + CHAPTER + TANGGAL
 * ============================================================
 * Hanya berlaku di layar mobile (max-width: 768px).
 * Desktop TIDAK diubah.
 * Acuan: section Mirror Update yang sudah benar.
 * 
 * Struktur yang ditangani:
 * 1. .content-card project-card / latest-card
 *    - .project-chapters / .latest-chapters
 * 2. .content-card manga-item (manga-grid)
 *    - .manga-chapters
 * ============================================================ */
@media (max-width: 768px) {

    /* ===== 1. SEMUA CHAPTER LIST: TAMPIL di semua view mode ===== */
    .content-grid .content-card .project-chapters,
    .content-grid .content-card .latest-chapters,
    .content-grid .content-card .manga-chapters,
    .content-grid.view-list .content-card .project-chapters,
    .content-grid.view-list .content-card .latest-chapters,
    .content-grid.view-list .content-card .manga-chapters,
    .content-grid.view-list.manga-grid .manga-chapters,
    .content-grid.view-content .content-card .project-chapters,
    .content-grid.view-content .content-card .latest-chapters,
    .content-grid.view-content .content-card .manga-chapters,
    .content-grid.view-content.manga-grid .manga-chapters,
    .content-grid.view-detail .content-card .project-chapters,
    .content-grid.view-detail .content-card .latest-chapters,
    .content-grid.view-detail .content-card .manga-chapters,
    .content-grid.view-detail.manga-grid .manga-chapters {
        display: block !important;
        list-style: none !important;
        width: 100% !important;
        padding: 0 12px 12px !important;
        margin: 0 !important;
    }

    /* ===== 2. ITEM CHAPTER: border + flex space-between ===== */
    .content-grid .content-card .project-chapters li,
    .content-grid .content-card .latest-chapters li,
    .content-grid .content-card .manga-chapters li {
        display: block !important;
        border-top: 1px solid var(--border) !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .content-grid .content-card .project-chapters li a,
    .content-grid .content-card .latest-chapters li a,
    .content-grid .content-card .manga-chapters li a {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 6px 0 !important;
        margin: 0 !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        color: var(--text) !important;
        gap: 8px !important;
        min-width: 0 !important;
        width: 100% !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    /* Nama chapter (kiri) */
    .content-grid .content-card .project-chapters li a .ch-name,
    .content-grid .content-card .latest-chapters li a .ch-name,
    .content-grid .content-card .manga-chapters li a .ch-name,
    .content-grid .content-card .manga-chapters li a span:first-child {
        flex: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 11px !important;
    }

    /* Tanggal chapter (kanan) */
    .content-grid .content-card .project-chapters li a .ch-date,
    .content-grid .content-card .latest-chapters li a .ch-date,
    .content-grid .content-card .manga-chapters li a .ch-date {
        flex-shrink: 0 !important;
        color: #666 !important;
        font-size: 10px !important;
        display: block !important;
    }

    /* ===== 3. LIST VIEW: card-body jadi column, chapter di bawah judul ===== */
    .content-grid.view-list .content-card .card-body,
    .content-grid.view-list.manga-grid .card-body {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 0 !important;
        flex: 1 !important;
        min-width: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .content-grid.view-list .content-card .card-body h3,
    .content-grid.view-list .content-card .card-body .project-title,
    .content-grid.view-list .content-card .card-body .latest-title,
    .content-grid.view-list .content-card .card-body .manga-info-title,
    .content-grid.view-list.manga-grid .manga-info-title {
        flex: none !important;
        width: 100% !important;
        min-height: auto !important;
        max-height: none !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
        padding: 0 0 4px !important;
        margin: 0 !important;
        white-space: normal !important;
    }

    .content-grid.view-list .content-card .card-body h3 a,
    .content-grid.view-list .content-card .card-body .project-title a,
    .content-grid.view-list .content-card .card-body .latest-title a,
    .content-grid.view-list .content-card .card-body .manga-info-title a,
    .content-grid.view-list.manga-grid .manga-info-title a {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    /* ===== 4. CONTENT VIEW: card-body column ===== */
    .content-grid.view-content .content-card .card-body,
    .content-grid.view-content.manga-grid .card-body {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 0 !important;
        flex: 1 !important;
        min-width: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .content-grid.view-content .content-card .card-body h3,
    .content-grid.view-content .content-card .card-body .project-title,
    .content-grid.view-content .content-card .card-body .latest-title,
    .content-grid.view-content .content-card .card-body .manga-info-title,
    .content-grid.view-content.manga-grid .manga-info-title {
        width: 100% !important;
        min-height: auto !important;
        max-height: none !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
        padding: 0 0 4px !important;
        margin: 0 !important;
    }

    .content-grid.view-content .content-card .card-body h3 a,
    .content-grid.view-content .content-card .card-body .project-title a,
    .content-grid.view-content .content-card .card-body .latest-title a,
    .content-grid.view-content .content-card .card-body .manga-info-title a,
    .content-grid.view-content.manga-grid .manga-info-title a {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: break-word !important;
    }

    /* ===== 5. DETAIL VIEW: pastikan chapter list tampil ===== */
    .content-grid.view-detail .content-card .card-body,
    .content-grid.view-detail.manga-grid .card-body {
        overflow: visible !important;
    }

    .content-grid.view-detail .content-card .card-body .project-chapters,
    .content-grid.view-detail .content-card .card-body .latest-chapters,
    .content-grid.view-detail .content-card .card-body .manga-chapters {
        padding: 0 0 8px !important;
    }

    .content-grid.view-detail .content-card .card-body .project-chapters li a,
    .content-grid.view-detail .content-card .card-body .latest-chapters li a,
    .content-grid.view-detail .content-card .card-body .manga-chapters li a {
        font-size: 11px !important;
        padding: 5px 0 !important;
    }

    /* ===== 6. SMALL ICON VIEW: chapter tanpa tanggal (ruang terbatas) ===== */
    .content-grid.view-small .content-card .card-body .project-chapters,
    .content-grid.view-small .content-card .card-body .latest-chapters,
    .content-grid.view-small .content-card .card-body .manga-chapters {
        padding: 0 6px 6px !important;
    }

    .content-grid.view-small .content-card .card-body .project-chapters li a,
    .content-grid.view-small .content-card .card-body .latest-chapters li a,
    .content-grid.view-small .content-card .card-body .manga-chapters li a {
        font-size: 9px !important;
        padding: 2px 0 !important;
    }

    .content-grid.view-small .content-card .card-body .project-chapters li a .ch-date,
    .content-grid.view-small .content-card .card-body .latest-chapters li a .ch-date,
    .content-grid.view-small .content-card .card-body .manga-chapters li a .ch-date {
        display: none !important;
    }

    /* ===== 7. SEMBUNYIKAN BADGE CHAPTER (ganti dengan daftar chapter) ===== */
    .content-grid .project-chapter-badge,
    .content-grid .chapter-badge {
        display: none !important;
    }
}