/* ============================================================
   KlikNovel — Single Novel (Redesign)
   File: /novel/css/single-novel.css

   Konsisten dengan variabel front-page.css,
   single-post.css, dan single-chapter-new.css
   ============================================================ */

/* ── VARIABLES ────────────────────────────────────────────── */
:root {
    --kn-cream:         #faf8f3;
    --kn-cream-dark:    #f0ece0;
    --kn-ink:           #1a1208;
    --kn-ink-light:     #4a3f2f;
    --kn-accent:        #8b4513;
    --kn-accent-light:  #c47a3a;
    --kn-border:        #ddd5c0;
    --kn-gold:          #ffcc00;
    --kn-serif:         'Georgia', 'Times New Roman', serif;
    --kn-sans:          'Segoe UI', system-ui, sans-serif;
}

/* ── BASE ─────────────────────────────────────────────────── */
.novel-container {
    max-width:   100%;
    margin:      0;
    padding:     0;
    font-family: var(--kn-sans);
    background:  var(--kn-cream);
}

.novel-wrapper {
    background: var(--kn-cream);
}

/* ── HERO SECTION ─────────────────────────────────────────── */
.novel-hero-section {
    position:       relative;
    width:          100%;
    background: var(--kn-cream-dark);
    min-height:     440px;
    padding-bottom: 48px;
}

/* Garis dekoratif bawah hero */
.novel-hero-section::after {
    content:    '';
    display:    block;
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    height:     2px;
    background: var(--kn-gold);
    opacity:    .4;
}

.novel-hero-container {
    position:   relative;
    max-width:  1050px;
    margin:     0 auto;
    padding:    56px 1.5rem 0;
    display:    flex;
    align-items: flex-start;
    min-height: 460px;
}

/* ── COVER ────────────────────────────────────────────────── */
.novel-cover-wrapper {
    position: absolute;
    bottom:   -15px;
    left:     1.5rem;
    width:    280px;
    z-index:  10;
}

.novel-cover-wrapper img.novel-cover {
    width:         100%;
    height:        auto;
    border-radius: 3px;
    box-shadow:    0 8px 32px rgba(0,0,0,.4);
    display:       block;
}

/* Ribbon */
.novel-ribbon {
    position:              absolute;
    top:                   0;
    right:                 0;
    padding:               6px 14px;
    font-family:           var(--kn-sans);
    font-size:             0.7rem;
    font-weight:           500;
    text-transform:        uppercase;
    letter-spacing:        0.06em;
    text-decoration:       none;
    border-top-right-radius:    3px;
    border-bottom-left-radius:  10px;
    z-index:               11;
    background:     var(--kn-gold);
    color:          var(--kn-ink);
    vertical-align: middle;
}

/* ── META INFO ────────────────────────────────────────────── */
.novel-hero-content {
    flex:           1;
    padding-left:   316px;
    display:        flex;
    flex-direction: column;
    justify-content: center;
    min-height:     380px;
    color:          var(--kn-ink);
}

.novel-title-large {
    font-family:  var(--kn-serif);
    color: var(--kn-ink);
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    font-weight:  700;
    line-height:  1.15;
    margin:       0 0 12px;
    text-align:   left;
}

/* Genre & Views */
.novel-genre-views {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         6px;
    font-size:   0.88rem;
    margin:      0 0 16px;
    color: var(--kn-ink-light);
}

.novel-genre-views a {
    color: var(--kn-ink);
    text-decoration: none;
    transition:      color .2s;
}

.novel-genre-views a:hover { color: var(--kn-accent); }

.novel-genre-views .novel-views {
    font-size:   0.85rem;
    font-weight: 400;
    margin-left: 8px;
    color: #888;
}

/* Author & Translator */
.novel-author-translator {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         .8rem;
    margin:      0 0 20px;
}

.novel-author-translator .author-block {
    font-size:   1rem;
    font-weight: 600;
    color: var(--kn-ink);
}

.novel-author-translator .author-block .author-name a {
    color: var(--kn-ink);
    text-decoration: none;
    border-bottom:   1px solid transparent;
    transition:      border-color .2s;
}

.novel-author-translator .author-block .author-name a:hover {
    border-bottom-color: var(--kn-gold);
}

.novel-author-translator .translator-block {
    font-size:  0.85rem;
    font-style: italic;
    color: var(--kn-ink-light);
}

/* Statistik */
.novel-stats-row {
    display:        flex;
    flex-direction: column;
    gap:            .8rem;
    margin-bottom:  20px;
}

.stat-group {
    display:     flex;
    align-items: center;
    gap:         1.5rem;
    flex-wrap:   wrap;
}

.stat-item {
    display:     flex;
    align-items: center;
    gap:         .4rem;
}

.stat-number {
    font-family: var(--kn-serif);
    font-size:   2rem;
    font-weight: 700;
    color: var(--kn-ink);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--kn-ink);
}

.stat-finished,
.stat-update {
    font-size:  0.83rem;
    font-style: italic;
    color: var(--kn-ink-light);
}

.stat-update .update-value {
    color: var(--kn-ink);
}

/* Rating & Support */
.rating-item,
.support-item {
    display:     flex;
    align-items: center;
    gap:         .4rem;
}

.rating-number,
.support-count {
    font-family: var(--kn-serif);
    font-size:   2rem;
    font-weight: 700;
    color: var(--kn-ink);
}

.rating-count,
.supporters-count {
    font-size: 0.8rem;
    color: #888;
}

.heart-wrap {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
}

/* Tombol Aksi */
.novel-action-buttons {
    display:     flex;
    align-items: center;
    gap:         12px;
    margin:      20px 0 16px;
    flex-wrap:   wrap;
}

.read-novel-btn {
    background:    var(--kn-accent);
    color:         #fff;
    font-family:   var(--kn-sans);
    font-size:     0.88rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding:       11px 28px;
    border:        none;
    border-radius: 3px;
    cursor:        pointer;
    transition:    background .2s, transform .2s;
}

.read-novel-btn:hover {
    background: var(--kn-accent-light);
    transform:  translateY(-1px);
}

.read-novel-btn:disabled {
    background: rgba(255,255,255,.2);
    cursor:     not-allowed;
    transform:  none;
}

.bookmark-btn {
    font-family:     var(--kn-sans);
    font-size:       0.85rem;
    font-weight:     600;
    color:           rgba(255,255,255,.7);
    text-decoration: none;
    padding:         10px 20px;
    border:          1px solid rgba(255,255,255,.25);
    border-radius:   3px;
    transition:      all .2s;
    cursor:          pointer;
}

.bookmark-btn:hover {
    border-color: var(--kn-gold);
    color:        var(--kn-gold);
}

/* Social Share */
.novel-social-section { padding: 8px 0 0; }

.novel-share-buttons {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
}

.novel-share-buttons b {
    font-size: 0.78rem;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.share-button img {
    width:      22px;
    height:     22px;
    opacity:    .7;
    transition: opacity .2s, transform .2s;
    filter: none; opacity: .7;
}

.share-button:hover img {
    opacity:   1;
    transform: scale(1.15);
}

/* Bookmark Notification */
.bookmark-notification {
    position:      fixed;
    top:           20px;
    right:         20px;
    background:    var(--kn-accent);
    color:         #fff;
    padding:       14px 20px;
    border-radius: 3px;
    box-shadow:    0 4px 16px rgba(0,0,0,.2);
    z-index:       10000;
    font-family:   var(--kn-sans);
    font-size:     0.88rem;
    transform:     translateX(400px);
    opacity:       0;
    transition:    all .3s ease;
}

.bookmark-notification.show    { transform: translateX(0); opacity: 1; }
.bookmark-notification.error   { background: #c0392b; }

.bookmark-btn {
    color:        var(--kn-ink-light);
    border-color: var(--kn-border);
}
.bookmark-btn:hover { color: var(--kn-accent); border-color: var(--kn-accent); }

/* ── PUBLIC DOMAIN DISCLAIMER ─────────────────────────────── */
.public-domain-disclaimer {
    width: 100%;
    background:  var(--kn-ink);
    border-top:  none;
    padding:     12px 0;
}

.public-domain-disclaimer .disclaimer-content {
    max-width:   1000px;
    margin:      0 auto;
    padding:     0;
    font-family: var(--kn-sans);
    font-size:   0.78rem;
    color: rgba(255,255,255,.4);
    line-height: 1.5;
}

.public-domain-disclaimer .disclaimer-content p { margin: .4rem 0; }

.public-domain-disclaimer .disclaimer-content a {
    color: rgba(255,255,255,.5);
    text-decoration: none;
    transition:      color .2s;
}

.public-domain-disclaimer .disclaimer-content a:hover {
    color: var(--kn-gold);
}

/* ── MAIN CONTENT ─────────────────────────────────────────── */
.novel-main-content {
    max-width:  1050px;
    margin:     0 auto;
    padding:    32px 1.5rem 40px;
    background: var(--kn-cream);
}

/* Sinopsis */
.novel-excerpt-section { padding: 0 0 32px; }

.synopsis-text {
    font-family: var(--kn-serif);
    font-size:   1.05rem;
    line-height: 1.8;
    color:       var(--kn-ink-light);
    max-width:   100%;
}

.synopsis-text p { margin-bottom: 0.6em; }

.load-more-chapters {
    display:        block;
    margin:         12px 0 0;
    padding:        8px 0;
    background:     transparent;
    color:          var(--kn-accent);
    border:         none;
    font-family:    var(--kn-sans);
    font-size:      0.85rem;
    font-weight:    600;
    cursor:         pointer;
    text-decoration: underline;
    transition:     color .2s;
}

.load-more-chapters:hover { color: var(--kn-accent-light); }

/* ── DONATION BOX ─────────────────────────────────────────── */
.kn-donation-box {
    margin:        0 0 32px;
    padding:       20px 24px;
    background:    var(--kn-cream-dark);
    border:        1px solid var(--kn-border);
    border-radius: 3px;
    max-width:     720px;
}

.kn-donation-text {
    font-family: var(--kn-sans);
    font-size:   0.9rem;
    line-height: 1.65;
    color:       var(--kn-ink-light);
    margin:      0 0 14px;
}

.kn-donate-button {
    display:         inline-block;
    padding:         9px 22px;
    background:      var(--kn-accent);
    color:           #fff;
    font-family:     var(--kn-sans);
    font-size:       0.85rem;
    font-weight:     600;
    border-radius:   3px;
    text-decoration: none;
    transition:      background .2s;
}

.kn-donate-button:hover { background: var(--kn-accent-light); }

.kn-login-notice {
    font-size: 0.83rem;
    color:     #888;
    margin-top: 8px;
}

.kn-login-notice a {
    color:           var(--kn-accent);
    text-decoration: underline;
}

/* ── DAFTAR BAB ───────────────────────────────────────────── */
.novel-chapters-section {
    padding:    16px 0 0;
}

.novel-chapters-section h3 {
    font-family:   var(--kn-serif);
    font-size:     1.4rem;
    font-weight:   700;
    color:         var(--kn-ink);
    margin:        0 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--kn-border);
}

.chapters-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap:                   8px;
    margin-bottom:         20px;
}

.chapter-item {
    padding:         10px 14px;
    background:      var(--kn-cream-dark);
    border:          1px solid var(--kn-border);
    border-left:     2px solid transparent;
    border-radius:   3px;
    text-decoration: none;
    font-family:     var(--kn-sans);
    font-size:       0.85rem;
    color:           var(--kn-ink-light);
    transition:      all .15s;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
}

.chapter-item:hover {
    background:   var(--kn-cream);
    border-left:  2px solid var(--kn-accent);
    color:        var(--kn-ink);
}

.chapter-item.locked {
    opacity: .5;
    cursor:  default;
}

.chapter-item.locked:hover {
    background:  var(--kn-cream-dark);
    border-left: 2px solid transparent;
    color:       var(--kn-ink-light);
}

.hidden-chapter { display: none; }

#loadMoreChapters {
    display:      block;
    margin:       8px 0 0;
    padding:      10px 24px;
    background:   transparent;
    color:        var(--kn-accent);
    border:       1px solid var(--kn-border);
    border-radius: 3px;
    font-family:  var(--kn-sans);
    font-size:    0.85rem;
    font-weight:  600;
    cursor:       pointer;
    transition:   all .2s;
}

#loadMoreChapters:hover {
    background:   var(--kn-cream-dark);
    border-color: var(--kn-accent);
}

/* ── RELATED NOVELS CAROUSEL ──────────────────────────────── */
.carousel-section {
    padding:    32px 0 0;
    max-width:  100%;
}

.carousel-section h3 {
    font-family:    var(--kn-serif);
    font-size:      1.2rem;
    font-weight:    700;
    color:          var(--kn-ink);
    margin:         0 0 16px;
    padding-bottom: 8px;
    border-bottom:  1px solid var(--kn-border);
}

.carousel-wrapper { position: relative; }

.carousel-track {
    display:    flex;
    gap:        12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

.carousel-track::-webkit-scrollbar { display: none; }

.carousel-item {
    flex:          0 0 auto;
    width:         120px;
    border-radius: 3px;
    overflow:      hidden;
    transition:    transform .2s;
}

.carousel-item:hover {
    transform: translateY(-3px);
    cursor:    pointer;
}

.carousel-item img {
    width:   100%;
    height:  auto;
    display: block;
}

.carousel-nav {
    position:      absolute;
    top:           35%;
    transform:     translateY(-50%);
    background:    var(--kn-accent);
    color:         #fff;
    border:        none;
    font-size:     16px;
    padding:       6px 10px;
    cursor:        pointer;
    z-index:       2;
    border-radius: 2px;
    opacity:       .85;
    transition:    opacity .2s;
}

.carousel-nav:hover { opacity: 1; }
.carousel-nav.prev  { left: 0; }
.carousel-nav.next  { right: 0; }

/* ── IKLAN INLINE ─────────────────────────────────────────── */
.novel-main-content .kn-ad-wrap {
    margin: 24px 0;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media ( max-width: 768px ) {

    .novel-hero-section    { min-height: auto; padding-bottom: 24px; margin-bottom:100px; }
    .novel-hero-container  { display: block; padding: 0 16px; min-height: auto; }

    .novel-cover-wrapper {
        position:   relative !important;
        bottom:     auto !important;
        left:       auto !important;
        width:      55% !important;
        max-width:  200px !important;
        margin:     20px auto 16px !important;
        display:    block;
    }

    .novel-hero-content {
        padding-left: 0;
        min-height:   auto;
        align-items:  center;
        text-align:   center;
        padding-bottom: 24px;
    }

    .novel-title-large  { font-size: 1.6rem; text-align: center; }
    .novel-genre-views  { justify-content: center; }

    .novel-author-translator {
        flex-direction: column;
        align-items:    center;
        gap:            4px;
    }

    .novel-stats-row    { align-items: center; }
    .stat-group         { justify-content: center; }
    .stat-number,
    .rating-number,
    .support-count      { font-size: 1.5rem; }

    .novel-action-buttons {
        flex-direction: column;
        align-items:    stretch;
        width:          100%;
        max-width:      320px;
        margin-left:    auto;
        margin-right:   auto;
    }

    .read-novel-btn,
    .bookmark-btn {
        width:      100%;
        text-align: center;
    }

    .novel-share-buttons { justify-content: center; }
    
    .public-domain-disclaimer { margin-top: -95px; }
    .public-domain-disclaimer .disclaimer-content p { margin: .4rem .8rem; }

    .novel-main-content { padding: 40px 16px 60px; }

    .chapters-grid {
        grid-template-columns: repeat(2, 1fr);
        gap:                   8px;
    }

    .chapter-item { font-size: 0.8rem; padding: 9px 10px; }

    .carousel-item  { width: 100px; }
    .carousel-nav   { display: none; }
}

@media ( max-width: 480px ) {

    .novel-cover-wrapper { max-width: 160px !important; }
    .novel-title-large   { font-size: 1.3rem; }
    .stat-number,
    .rating-number,
    .support-count       { font-size: 1.2rem; }
    .carousel-item       { width: 85px; }
}

@media ( min-width: 769px ) and ( max-width: 1024px ) {

    .novel-cover-wrapper  { width: 240px; }
    .novel-hero-content   { padding-left: 276px; }
    .novel-title-large    { font-size: 2rem; }
    .carousel-item        { width: 110px; }
}