/* ============================================================
   PORTAL BERITA MODERN — MASTER STYLESHEET
   Arsitektur: ITCSS (Tokens → Base → Layout → Components → Utilities → Responsive)
   Versi     : 2.0 — Consolidated (single source of truth)

   STRUKTUR:
   01. DESIGN TOKENS (CSS Variables)
   02. RESET & BASE
   03. TOPBAR
   04. SITE HEADER
   05. LOGO (Penerbit + Portal)
   06. NAV LINKS (desktop)
   07. HEADER SEARCH
   08. HAMBURGER BUTTON
   09. TICKER
   10. MOBILE DRAWER
   11. PAGE LAYOUT (wrapper, grid)
   12. SECTION LABEL & FILTER BAR
   13. NEWS CARD
   14. DETAIL BERITA
   15. KOMENTAR
   16. IKLAN — INLINE BANNER (buku)
   17. IKLAN — SLIDE BANNER (slidehome)
   18. IKLAN — SIDEBAR
   19. IKLAN — DETAIL PAGE
   20. SIDEBAR (box, news, popular, tags, categories)
   21. PAGINATION
   22. FOOTER
   23. UTILITIES
   24. RESPONSIVE — TABLET (≤960px)
   25. RESPONSIVE — MOBILE (≤640px)
============================================================ */


/* ============================================================
   01. DESIGN TOKENS
============================================================ */
:root {
    /* Fixed Header Stack Heights — semua dikunci eksplisit
       Topbar : 23px  (font 11px × line-height 1 + padding 6px×2)
       Header : 80px  (padding 11px×2 + logo-bar 58px)
       Ticker : 36px
       Total  : 139px desktop | 92px mobile (no topbar, header ~56px)
    */
    --h-topbar:  23px;
    --h-header:  80px;
    --h-ticker:  36px;
    --h-stack:   calc(var(--h-topbar) + var(--h-header) + var(--h-ticker)); /* 139px */
    --h-stack-mobile: calc(var(--h-header) + var(--h-ticker));              /*  92px */

    /* Warna Utama */
    --ink:          #1a1714;
    --ink-muted:    #5c5751;
    --ink-faint:    #9c9690;
    --cream:        #faf8f4;
    --cream-mid:    #f0ede6;
    --cream-dark:   #e4dfd5;

    /* Aksen */
    --accent:       #c0392b;
    --accent-soft:  #f9eeec;
    --accent-mid:   #e8c4be;

    /* Gold */
    --gold:         #b8860b;
    --gold-light:   #f7f0dc;
    --gold-mid:     #e8d5a0;

    /* Green */
    --green:        #2d6a4f;
    --green-light:  #e8f5ef;

    /* Border & Shadow */
    --border:       rgba(26,23,20,0.12);
    --border-mid:   rgba(26,23,20,0.22);
    --shadow-sm:    0 1px 4px rgba(26,23,20,0.08);
    --shadow-md:    0 4px 20px rgba(26,23,20,0.10);
    --shadow-lg:    0 12px 40px rgba(26,23,20,0.14);

    /* Radius */
    --radius-sm:    6px;
    --radius-md:    12px;
    --radius-lg:    20px;

    /* Typography */
    --ff-display:   Arial, sans-serif;
    --ff-body:      'DM Sans', sans-serif;
}


/* ============================================================
   02. RESET & BASE
============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

html {
    overflow-x: hidden;
}

body {
    font-family:             var(--ff-body);
    background-color:        var(--cream);
    color:                   var(--ink);
    min-height:              100vh;
    overflow-x:              hidden;
    width:                   100%;
    -webkit-font-smoothing:  antialiased;
}

a {
    text-decoration: none;
    color:           inherit;
}


/* ============================================================
   03. TOPBAR
============================================================ */
.topbar {
    background:      var(--ink);
    color:           rgba(250,248,244,.4);
    font-size:       11px;
    line-height:     1;
    padding:         6px 28px;
    height:          var(--h-topbar); /* 23px — dikunci eksplisit */
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    letter-spacing:  .02em;
    position:        fixed;
    top:             0;
    left:            0;
    right:           0;
    z-index:         102;
    width:           100%;
    overflow:        hidden;
}


/* ============================================================
   04. SITE HEADER
============================================================ */
.site-header {
    background:    var(--ink);
    border-bottom: 1px solid rgba(250,248,244,.08);
    position:      fixed;
    top:           var(--h-topbar); /* tepat di bawah topbar, no gap */
    z-index:       100;
    width:         100%;
    height:        var(--h-header); /* dikunci 80px */
}

.header-inner {
    max-width:      1550px;
    margin:         0 auto;
    padding:        0 40px;          /* hapus padding vertical — height sudah dikunci */
    height:         var(--h-header);
    display:        flex;
    flex-direction: row;
    align-items:    center;
    gap:            16px;
    width:          100%;
}


/* ============================================================
   05. LOGO — PENERBIT & PORTAL
============================================================ */
/* Logo Penerbit */
.logo-penerbit {
    display:         flex;
    align-items:     center;
    flex-shrink:     0;
    text-decoration: none;
}

.lp-main,
.lp-dot {
    font-family:    var(--ff-body);
    font-size:      26px;
    font-weight:    700;
    color:          rgba(250,248,244,0.92);
    letter-spacing: -.4px;
}

.lp-tld {
    font-family:    var(--ff-body);
    font-size:      26px;
    font-weight:    700;
    color:          var(--accent);
    letter-spacing: -.3px;
}

/* Divider vertikal antara logo penerbit & portal */
.logo-divider {
    width:      1px;
    height:     52px;
    background: rgba(250,248,244,.13);
    flex-shrink: 0;
    margin:     0 4px;
}

/* Logo Portal */
.logo-portal {
    display:         flex;
    align-items:     center;
    gap:             10px;
    flex-shrink:     0;
    text-decoration: none;
}

.logo-bar {
    width:        3px;
    height:       58px;
    background:   var(--accent);
    border-radius: 2px;
    flex-shrink:  0;
}

.logo-text-wrap h1 {
    font-family:    var(--ff-display);
    font-size:      28px;
    color:          var(--cream);
    letter-spacing: -1px;
    line-height:    1;
}

.logo-text-wrap p {
    font-size:      9px;
    color:          rgba(250,248,244,.32);
    letter-spacing: .32em;
    text-transform: uppercase;
    margin-top:     3px;
}


/* ============================================================
   06. NAV LINKS — desktop only
============================================================ */
.nav-links {
    display:     flex;
    align-items: center;
    gap:         2px;
    list-style:  none;
    margin-left: 8px;
    flex:        1;
}

.nav-links li a {
    display:         block;
    padding:         7px 13px;
    font-family:     var(--ff-body);
    font-size:       13px;
    font-weight:     500;
    color:           rgba(250,248,244,.72);
    text-decoration: none;
    border-radius:   6px;
    white-space:     nowrap;
    letter-spacing:  .01em;
    transition:      background .18s, color .18s;
}

.nav-links li a:hover {
    background: rgba(250,248,244,.08);
    color:      var(--cream);
}

.nav-links li a.active {
    background: rgba(192,57,43,.15);
    color:      #e87b6e;
}


/* ============================================================
   07. HEADER SEARCH
============================================================ */
.header-search {
    display:     flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}

.header-search-input {
    height:        38px;
    padding:       0 13px;
    background:    rgba(250,248,244,.09);
    border:        1px solid rgba(250,248,244,.14);
    border-right:  none;
    border-radius: 6px 0 0 6px;
    color:         var(--cream);
    font-family:   var(--ff-body);
    font-size:     13px;
    outline:       none;
    width:         200px;
    transition:    background .2s, border-color .2s, width .3s ease;
}

.header-search-input::placeholder {
    color: rgba(250,248,244,.28);
}

.header-search-input:focus {
    background:   rgba(250,248,244,.14);
    border-color: rgba(250,248,244,.28);
    width:        240px;
}

.header-search-btn {
    height:          38px;
    width:           38px;
    background:      var(--accent);
    border:          none;
    border-radius:   0 6px 6px 0;
    color:           #fff;
    font-size:       14px;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    transition:      background .18s;
}

.header-search-btn:hover {
    background: #a93226;
}


/* ============================================================
   08. HAMBURGER BUTTON
============================================================ */
.hamburger-btn {
    display:         none;
    width:           36px;
    height:          36px;
    border-radius:   6px;
    background:      rgba(250,248,244,.08);
    border:          1px solid rgba(250,248,244,.12);
    cursor:          pointer;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    transition:      background .18s;
}

.hamburger-btn:hover {
    background: rgba(250,248,244,.14);
}

.ham-icon {
    display:       block;
    width:         18px;
    height:        2px;
    background:    rgba(250,248,244,.85);
    border-radius: 2px;
    position:      relative;
    transition:    background .25s;
}

.ham-icon::before,
.ham-icon::after {
    content:       '';
    position:      absolute;
    left:          0;
    width:         18px;
    height:        2px;
    background:    rgba(250,248,244,.85);
    border-radius: 2px;
    transition:    transform .28s cubic-bezier(.4,0,.2,1),
                   top      .28s cubic-bezier(.4,0,.2,1);
}

.ham-icon::before { top: -6px; }
.ham-icon::after  { top:  6px; }

/* Animasi ≡ → ✕ */
body.nav-open .ham-icon {
    background: transparent;
}

body.nav-open .ham-icon::before {
    top:        0;
    transform:  rotate(45deg);
    background: rgba(250,248,244,.85);
    transition: top .3s, transform .3s .3s;
}

body.nav-open .ham-icon::after {
    top:        0;
    transform:  rotate(-45deg);
    background: rgba(250,248,244,.85);
    transition: top .3s, transform .3s .3s;
}


/* ============================================================
   09. TICKER
============================================================ */
.ticker-row {
    background:  var(--ink);
    display:     flex;
    align-items: stretch;
    border-top:  1px solid rgba(250,248,244,.06);
    overflow:    hidden;
    width:       100%;
    height:      var(--h-ticker); /* dikunci 36px */
    position:    fixed;
    top:         calc(var(--h-topbar) + var(--h-header)); /* 23px + 80px = 103px */
    z-index:     100;
}

.ticker-label {
    background:      var(--accent);
    color:           #fff;
    font-size:       10px;
    font-weight:     700;
    letter-spacing:  .12em;
    text-transform:  uppercase;
    padding:         0 18px;
    display:         flex;
    align-items:     center;
    white-space:     nowrap;
    flex-shrink:     0;
}

.ticker-box {
    overflow:    hidden;
    flex:        1;
    height:      36px;
    display:     flex;
    align-items: center;
    padding:     0 16px;
    min-width:   0;
}

.running-text-inner {
    display:      inline-block;
    white-space:  nowrap;
    animation:    ticker 55s linear infinite;
    padding-left: 100%;
    font-size:    12px;
    font-weight:  400;
    color:        rgba(250,248,244,.45);
    will-change:  transform;
}

@keyframes ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.running-text-inner.paused {
    animation-play-state: paused;
}


/* ============================================================
   10. MOBILE DRAWER
============================================================ */
.mobile-drawer {
    position:       fixed;
    top:            0;
    left:           0;
    right:          0;
    bottom:         0;
    z-index:        99;
    pointer-events: none;
    visibility:     hidden;
}

.drawer-panel {
    position:       absolute;
    top:            var(--drawer-top, 130px);
    left:           0;
    right:          0;
    bottom:         0;
    background:     #ffffff;
    display:        flex;
    flex-direction: column;
    transform:      translateY(-100%);
    transition:     transform .38s cubic-bezier(.4,0,.2,1);
}

.drawer-dim {
    position:          absolute;
    inset:             0;
    background:        rgba(26,23,20,.45);
    backdrop-filter:   blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity:           0;
    transition:        opacity .3s ease;
    cursor:            pointer;
}

/* Open state */
body.nav-open .mobile-drawer {
    pointer-events: auto;
    visibility:     visible;
}

body.nav-open .drawer-panel {
    transform: translateY(0);
}

body.nav-open .drawer-dim {
    opacity: 1;
}

body.nav-open {
    overflow:     hidden;
    position:     fixed;
    width:        100%;
    touch-action: none;
}

/* Drawer nav links */
.drawer-nav {
    list-style:      none;
    flex:            1;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    padding:         0 28px 32px;
    gap:             4px;
}

.drawer-nav li {
    opacity:    0;
    transform:  translateY(-14px);
    transition: opacity .3s ease, transform .3s ease;
}

/* Sequential entrance */
body.nav-open .drawer-nav li               { opacity: 1; transform: translateY(0); }
body.nav-open .drawer-nav li:nth-child(1)  { transition-delay: .18s; }
body.nav-open .drawer-nav li:nth-child(2)  { transition-delay: .25s; }
body.nav-open .drawer-nav li:nth-child(3)  { transition-delay: .32s; }
body.nav-open .drawer-nav li:nth-child(4)  { transition-delay: .39s; }
body.nav-open .drawer-nav li:nth-child(5)  { transition-delay: .46s; }

/* Quick exit */
.drawer-nav li:nth-child(1) { transition-delay: 0s; }
.drawer-nav li:nth-child(2) { transition-delay: .03s; }
.drawer-nav li:nth-child(3) { transition-delay: .06s; }
.drawer-nav li:nth-child(4) { transition-delay: .09s; }
.drawer-nav li:nth-child(5) { transition-delay: .12s; }

.drawer-nav li a {
    display:         block;
    padding:         16px 20px;
    font-family:     var(--ff-body);
    font-size:       22px;
    font-weight:     700;
    color:           #2563eb;
    text-align:      center;
    letter-spacing:  -.3px;
    border-radius:   14px;
    text-decoration: none;
    transition:      background .15s, color .15s, transform .15s;
}

.drawer-nav li a:hover {
    background: #eff6ff;
    color:      #1d4ed8;
    transform:  scale(1.03);
}

.drawer-nav li a.active {
    background: #eff6ff;
    color:      #1d4ed8;
}


/* ============================================================
   11. PAGE LAYOUT
============================================================ */
.page-wrapper {
    max-width:   1600px;
    margin:      0 auto;
    padding:     32px 24px 80px;
    padding-top: calc(var(--h-stack) + 12px); /* 145px + 12px breathing */
}

.page-grid {
    display:               grid;
    grid-template-columns: 1fr 300px;
    gap:                   32px;
    align-items:           start;
}


/* ============================================================
   12. SECTION LABEL & FILTER BAR
============================================================ */
.section-label {
    font-family:    var(--ff-display);
    font-size:      22px;
    color:          var(--ink);
    margin-bottom:  18px;
    letter-spacing: -.3px;
    display:        flex;
    align-items:    center;
    gap:            10px;
}

.section-label::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: var(--border);
}

.filter-bar {
    display:       flex;
    align-items:   center;
    gap:           10px;
    margin-bottom: 20px;
    padding:       10px 14px;
    background:    var(--gold-light);
    border:        1px solid rgba(184,134,11,.25);
    border-radius: var(--radius-sm);
    font-size:     13px;
    color:         var(--gold);
    font-weight:   500;
}

.filter-bar a {
    margin-left: auto;
    font-size:   12px;
    color:       var(--gold);
    opacity:     .7;
    font-weight: 400;
    transition:  opacity .2s;
}

.filter-bar a:hover { opacity: 1; }


/* ============================================================
   13. NEWS CARD
============================================================ */
.news-grid {
    display:               grid;
    /*grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));*/
    /*grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));*/
     grid-template-columns: repeat(4, 1fr);
    gap:                   20px;
}

/* Base card */
.news-card {
    background:     #fff;
    border:         1px solid var(--border);
    border-radius:  var(--radius-md);
    overflow:       hidden;
    transition:     all .25s ease;
    cursor:         pointer;
    display:        flex;
    flex-direction: column;
}

.news-card:hover {
    box-shadow:  var(--shadow-md);
    border-color: var(--border-mid);
    transform:   translateY(-4px);
}

/* Featured card */
.news-card.featured,
a.news-card.featured {
    grid-column:           1 / -1;
    display:               grid;
    /*grid-template-columns: 360px 1fr;*/
    grid-template-columns: 360px 1fr;  /* ← fixed 360px kiri */
    min-height:            240px;
}

/* Anchor reset */
a.news-card {
    display:        flex;
    flex-direction: column;
}

/* Image area */
.news-card-img {
    position:     relative;
    overflow:     hidden;
    background:   var(--cream-mid);
    aspect-ratio: 16/9;
}

.news-card.featured .news-card-img {
    aspect-ratio: unset;
    height:       100%;
    min-height:   240px;
}

.news-card-img img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
    transition:  transform .4s ease;
}

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

.news-card-img-ph {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       36px;
    color:           var(--ink-faint);
    background:      var(--cream-mid);
}

/* Badges */
.cat-badge {
    position:       absolute;
    top:            10px;
    left:           10px;
    background:     var(--accent);
    color:          #fff;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding:        4px 10px;
    border-radius:  3px;
}

.views-badge {
    position:    absolute;
    bottom:      10px;
    right:       10px;
    background:  rgba(26,23,20,.55);
    color:       rgba(250,248,244,.85);
    font-size:   11px;
    padding:     3px 8px;
    border-radius: 4px;
    display:     flex;
    align-items: center;
    gap:         4px;
}

/* Card body */
.news-card-body {
    padding:        14px 16px 16px;
    display:        flex;
    flex-direction: column;
    gap:            8px;
    flex:           1;
}

.news-card-meta {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
}

.cat-pill {
    background:     var(--accent-soft);
    color:          var(--accent);
    font-size:      10px;
    font-weight:    600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding:        3px 8px;
    border-radius:  3px;
    flex-shrink:    0;
}

.meta-sep {
    color:     var(--ink-faint);
    font-size: 10px;
}

.news-date {
    font-size:   12px;
    color:       var(--ink-faint);
    display:     flex;
    align-items: center;
    gap:         4px;
}

.news-title {
    font-family:            var(--ff-display);
    font-weight:            350;
    font-size:              15px;
    color:                  var(--ink);
    line-height:            1.4;
    letter-spacing:         -.1px;
    display:                -webkit-box;
    -webkit-line-clamp:     3;
    -webkit-box-orient:     vertical;
    overflow:               hidden;
    transition:             color .2s;
}

.news-card.featured .news-title {
    font-size:          22px;
    -webkit-line-clamp: 4;
}

.news-card:hover .news-title {
    color: var(--accent);
}

.news-excerpt {
    font-size:          13px;
    color:              var(--ink-muted);
    line-height:        1.65;
    display:            -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

.read-more-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    margin-top:     auto;
    padding:        8px 14px;
    background:     var(--cream-mid);
    border:         1px solid var(--border-mid);
    border-radius:  var(--radius-sm);
    font-family:    var(--ff-body);
    font-size:      12px;
    font-weight:    500;
    color:          var(--ink);
    cursor:         pointer;
    transition:     background .2s, border-color .2s, color .2s;
    align-self:     flex-start;
}

.read-more-btn:hover {
    background:   var(--ink);
    border-color: var(--ink);
    color:        var(--cream);
}

/* Not found */
.not-found-wrap {
    grid-column: 1 / -1;
    text-align:  center;
    padding:     60px 20px;
    color:       var(--ink-muted);
}

.not-found-wrap i {
    font-size:     48px;
    color:         var(--ink-faint);
    margin-bottom: 16px;
    display:       block;
}


/* ============================================================
   14. DETAIL BERITA
============================================================ */
.detail-wrap {
    background:    #fff;
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow:      hidden;
    box-shadow:    var(--shadow-lg);
}

.detail-img-wrap {
    overflow: hidden;
    height:   440px;
}

.detail-img-wrap img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
    transition:  transform .6s ease;
}

.detail-img-wrap:hover img {
    transform: scale(1.03);
}

.detail-body {
    padding: 40px 44px;
}

/* Breadcrumb */
.breadcrumb {
    display:       flex;
    align-items:   center;
    gap:           6px;
    font-size:     12px;
    color:         var(--ink-faint);
    margin-bottom: 24px;
    flex-wrap:     wrap;
}

.breadcrumb a { transition: color .2s; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { color: var(--border-mid); }

/* Meta bar — 1 baris: [byline kiri] [meta kanan] */
.detail-meta-bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       nowrap;
    gap:             12px;
    margin-bottom:   16px;
    padding-bottom:  20px;
    border-bottom:   1px solid var(--border);
}

/* Byline (penulis + tanggal) — kiri */
.detail-byline {
    display:     flex;
    align-items: center;
    gap:         16px;
    flex-wrap:   wrap;
    flex-shrink: 0;
}

/* Meta (kategori + views) — kanan */
.detail-meta {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
    flex-shrink: 0;
}

.author-chip {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   13px;
    color:       var(--ink-muted);
}

.author-avatar {
    width:           32px;
    height:          32px;
    border-radius:   50%;
    background:      var(--accent-soft);
    color:           var(--accent);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       12px;
    font-weight:     600;
    flex-shrink:     0;
}

.date-chip {
    display:     flex;
    align-items: center;
    gap:         5px;
    font-size:   13px;
    color:       var(--ink-faint);
}

.views-info {
    display:     flex;
    align-items: center;
    gap:         4px;
    font-size:   13px;
    color:       var(--ink-faint);
}

/* Judul */
.detail-title {
    font-family:    var(--ff-display);
    font-size:      34px;
    color:          var(--accent);
    line-height:    1.25;
    letter-spacing: -.5px;
    margin-bottom:  35px;
    text-align:     center;
}

.detail-subtitle {
    font-size:     16px;
    font-weight:   400;
    color:         var(--ink-muted);
    line-height:   1.6;
    font-style:    italic;
    border-left:   3px solid var(--accent);
    padding:       6px 0 6px 14px;
    margin:        16px 0 24px;
}

/* Konten prose */
.prose-content {
    font-size:   16px;
    line-height: 1.85;
    color:       var(--ink-muted);
}

.prose-content p { margin-bottom: 1.4rem; }

.prose-content h1,
.prose-content h2,
.prose-content h3,
.prose-content h4 {
    font-family:   var(--ff-display);
    color:         var(--ink);
    margin-top:    2rem;
    margin-bottom: .75rem;
    line-height:   1.3;
}

.prose-content h1 { font-size: 2rem; }
.prose-content h2 { font-size: 1.6rem; }
.prose-content h3 { font-size: 1.3rem; }
.prose-content h4 { font-size: 1.1rem; }
.prose-content h6 {
    font-size:   16px;
    font-weight: 400;
    color:       var(--ink-muted);
    line-height: 1.85;
    margin-top:  0;
    margin-bottom: 1.4rem;
}

.prose-content strong,
.prose-content b   { font-weight: 600; color: var(--ink); }
.prose-content em,
.prose-content i   { font-style: italic; }

.prose-content ul  { list-style: disc;    padding-left: 1.5rem; margin-bottom: 1.2rem; }
.prose-content ol  { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1.2rem; }
.prose-content li  { margin-bottom: .4rem; line-height: 1.75; }

.prose-content blockquote {
    border-left:   3px solid var(--accent);
    padding:       .75rem 1.25rem;
    margin:        1.5rem 0;
    background:    var(--accent-soft);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style:    italic;
    color:         var(--ink-muted);
}

.prose-content pre,
.prose-content code {
    background:    var(--cream-mid);
    border-radius: var(--radius-sm);
    font-size:     .85rem;
    padding:       .2em .5em;
}

.prose-content pre { padding: 1rem; overflow-x: auto; margin-bottom: 1.2rem; }

.prose-content img {
    border-radius: var(--radius-md);
    margin:        1.5rem 0;
    width:         100%;
}

.prose-content table {
    width:           100%;
    border-collapse: collapse;
    margin-bottom:   1.5rem;
    font-size:       .9rem;
}

.prose-content th {
    background: var(--ink);
    color:      var(--cream);
    padding:    10px 14px;
    text-align: left;
}

.prose-content td {
    padding:       10px 14px;
    border-bottom: 1px solid var(--border);
}

.prose-content tr:nth-child(even) td {
    background: var(--cream);
}

.prose-content hr {
    border:     none;
    border-top: 1px solid var(--border);
    margin:     2rem 0;
}

.prose-content a {
    color:                var(--accent);
    text-decoration:      underline;
    text-decoration-color: var(--accent-mid);
    text-underline-offset: 3px;
    transition:           text-decoration-color .2s;
}

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

/* Footer detail */
.detail-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-top:      36px;
    padding-top:     24px;
    border-top:      1px solid var(--border);
    flex-wrap:       wrap;
    gap:             12px;
}

.btn-back {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        10px 18px;
    background:     var(--cream-mid);
    border:         1px solid var(--border-mid);
    border-radius:  var(--radius-sm);
    font-family:    var(--ff-body);
    font-size:      13px;
    font-weight:    500;
    color:          var(--ink);
    cursor:         pointer;
    transition:     all .2s;
}

.btn-back:hover {
    background:   var(--cream-dark);
    border-color: var(--border);
}


/* ============================================================
   15. KOMENTAR
============================================================ */
.komentar-wrap {
    margin-top:    24px;
    background:    #fff;
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow:      hidden;
    box-shadow:    var(--shadow-md);
}

.komentar-body {
    padding: 32px 44px;
}

.divider-ornament {
    display:     flex;
    align-items: center;
    gap:         12px;
    margin:      0 0 24px;
}

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

.divider-ornament span {
    font-family:  var(--ff-display);
    font-size:    20px;
    color:        var(--ink);
    white-space:  nowrap;
}

/* Comment item */
.comment-item {
    display:       flex;
    gap:           14px;
    padding:       16px 0;
    border-bottom: 1px solid var(--border);
}

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

.comment-avatar {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      var(--accent-soft);
    color:           var(--accent);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       13px;
    font-weight:     600;
    flex-shrink:     0;
}

.comment-content { flex: 1; }

.comment-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   6px;
    flex-wrap:       wrap;
    gap:             6px;
}

.comment-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.comment-date { font-size: 11px; color: var(--ink-faint); }
.comment-text { font-size: 14px; color: var(--ink-muted); line-height: 1.7; }

/* Form komentar */
.comment-form-wrap { margin-top: 28px; }

.form-section-title {
    font-family:   var(--ff-display);
    font-size:     18px;
    color:         var(--ink);
    margin-bottom: 18px;
}

.field-group { margin-bottom: 16px; }

.field-label {
    display:        block;
    font-size:      11px;
    font-weight:    600;
    color:          var(--ink-muted);
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom:  6px;
}

.field-label .req { color: var(--accent); margin-left: 2px; }

.field-input {
    width:         100%;
    padding:       10px 14px;
    border:        1px solid var(--border-mid);
    border-radius: var(--radius-sm);
    font-family:   var(--ff-body);
    font-size:     14px;
    color:         var(--ink);
    background:    var(--cream);
    transition:    border-color .2s, box-shadow .2s;
    outline:       none;
}

.field-input:focus {
    border-color: var(--ink);
    background:   #fff;
    box-shadow:   0 0 0 3px rgba(26,23,20,.06);
}

.field-input::placeholder { color: var(--ink-faint); }

.field-input.textarea {
    resize:     vertical;
    min-height: 100px;
    line-height: 1.6;
}

.btn-submit {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        10px 22px;
    background:     var(--ink);
    border:         1px solid var(--ink);
    border-radius:  var(--radius-sm);
    font-family:    var(--ff-body);
    font-size:      13px;
    font-weight:    500;
    color:          var(--cream);
    cursor:         pointer;
    transition:     all .2s;
}

.btn-submit:hover {
    background:   var(--accent);
    border-color: var(--accent);
}


/* ============================================================
   16. IKLAN — INLINE BANNER (buku)
============================================================ */
.ad-inline-wrap {
    grid-column: 1 / -1;
}

.ad-banner {
    display:       block;
    border:        1.5px solid var(--gold-mid);
    border-radius: var(--radius-md);
    overflow:      hidden;
    background:    var(--gold-light);
    min-height:    160px;
}

/* Inner layout banner (pakai ad-detail-inner) */
.ad-detail-inner {
    display:        flex;
    align-items:    center;
    flex-direction: column;
    gap:            20px;
    padding:        16px 20px;
}

.ad-detail-top {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 20px;
    background:      var(--gold-light);
    border-bottom:   1px solid var(--gold-mid);
}

.ad-detail-eyebrow {
    display:        flex;
    align-items:    center;
    gap:            6px;
    font-size:      10px;
    font-weight:    700;
    color:          var(--gold);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ad-detail-tag {
    font-size:      9px;
    font-weight:    700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--gold);
    border:         1px solid var(--gold-mid);
    border-radius:  3px;
    padding:        2px 6px;
}

.ad-detail-text-col {
    min-width:  130px;
    flex-shrink: 0;
}

.ad-detail-heading {
    font-family:    var(--ff-display);
    font-size:      16px;
    color:          var(--ink);
    margin-bottom:  4px;
    line-height:    1.3;
    letter-spacing: -.1px;
}

.ad-detail-sub {
    font-size:   12px;
    color:       var(--ink-muted);
    line-height: 1.5;
}

.ad-detail-books-row {
    display: flex;
    gap:     10px;
    flex:    1;
}

.ad-detail-book {
    flex:          1;
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       10px 12px;
    background:    rgba(255,255,255,.6);
    border:        1px solid var(--gold-mid);
    border-radius: var(--radius-sm);
    cursor:        pointer;
    transition:    background .15s;
    min-width:     0;
}

.ad-detail-book:hover { background: rgba(184,134,11,.07); }

.ad-detail-book-cover {
    width:           36px;
    height:          48px;
    flex-shrink:     0;
    border-radius:   3px;
    overflow:        hidden;
    background:      var(--cream-dark);
    border:          1px solid var(--gold-mid);
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.ad-detail-book-cover img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.ad-detail-book-cover-ph {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       14px;
    color:           var(--gold);
}

.ad-detail-book-info .t {
    font-size:          13px;
    font-weight:        500;
    color:              var(--ink);
    line-height:        1.4;
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
    margin-bottom:      2px;
}

.ad-detail-book-info .p {
    font-family: var(--ff-display);
    font-size:   14px;
    color:       var(--gold);
}

.ad-detail-cta-col {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            8px;
    flex-shrink:    0;
    min-width:      120px;
}

.ad-detail-shop-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    width:           100%;
    padding:         10px 14px;
    background:      var(--ink);
    border-radius:   var(--radius-sm);
    font-size:       12px;
    font-weight:     600;
    color:           var(--cream);
    cursor:          pointer;
    transition:      background .15s;
    text-align:      center;
}

.ad-detail-shop-btn:hover { background: var(--gold); }

.ad-detail-sponsor {
    font-size:      9px;
    font-weight:    700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--gold);
    opacity:        .6;
    text-align:     center;
}

/* Book item di banner inline */
.ad-book-item {
    flex:           1;
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            8px;
    padding:        16px 14px;
    border-left:    1px solid var(--gold-mid);
    cursor:         pointer;
    transition:     background .15s;
    min-width:      0;
}

.ad-book-item:hover { background: rgba(184,134,11,.07); }

.ad-book-cover {
    width:           52px;
    height:          70px;
    flex-shrink:     0;
    border-radius:   4px;
    overflow:        hidden;
    background:      var(--cream-dark);
    border:          1px solid var(--gold-mid);
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.ad-book-cover img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.ad-book-cover-ph {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       18px;
    color:           var(--gold);
}

.ad-book-info {
    flex:      1;
    min-width: 0;
    display:   flex;
    flex-direction: column;
    gap:       4px;
}

.ad-book-title {
    font-size:          11px;
    font-weight:        500;
    color:              var(--ink);
    line-height:        1.4;
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

.ad-book-price {
    font-family: var(--ff-display);
    font-size:   12px;
    color:       var(--gold);
}

.ad-book-cta {
    display:        inline-flex;
    align-items:    center;
    gap:            4px;
    margin-top:     2px;
    padding:        4px 10px;
    background:     var(--gold);
    border-radius:  4px;
    font-size:      10px;
    font-weight:    700;
    color:          #fff;
    letter-spacing: .04em;
    text-transform: uppercase;
    align-self:     flex-start;
    transition:     background .15s, transform .1s;
}

.ad-book-cta:hover {
    background: #9a700a;
    transform:  translateY(-1px);
}

.ad-cta-col {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         16px 20px;
    background:      rgba(184,134,11,.07);
    border-left:     1px solid var(--gold-mid);
    flex-shrink:     0;
    min-width:       96px;
    cursor:          pointer;
    transition:      background .15s;
}

.ad-cta-col:hover { background: rgba(184,134,11,.13); }

.ad-cta-icon {
    width:           34px;
    height:          34px;
    border-radius:   50%;
    background:      var(--gold);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #fff;
    font-size:       15px;
}

.ad-cta-text {
    font-size:      10px;
    font-weight:    700;
    color:          var(--gold);
    text-align:     center;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height:    1.4;
}

.ad-banner-label {
    display:        none;
    flex-direction: column;
    justify-content: center;
    gap:            8px;
    padding:        20px 18px;
    background:     #f0e4b8;
    border-right:   1.5px solid var(--gold-mid);
    flex-shrink:    0;
}

.ad-banner-label .ad-icon  { font-size: 20px; color: var(--gold); line-height: 1; }

.ad-banner-label .ad-tag {
    font-size:      9px;
    font-weight:    700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          var(--gold);
    border:         1px solid var(--gold-mid);
    border-radius:  20px;
    padding:        2px 8px;
    display:        inline-block;
    width:          fit-content;
}

.ad-banner-label .ad-title {
    font-family:    var(--ff-display);
    font-size:      16px;
    color:          var(--ink);
    line-height:    1.3;
    letter-spacing: -.1px;
}

.ad-banner-books {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
}

.ad-footer-mobile { display: none; }


/* ============================================================
   17. IKLAN — SLIDE BANNER (slidehome)
============================================================ */
.ad-slide-wrap {
    grid-column:   1 / -1;
    position:      relative;
    border-radius: var(--radius-md);
    overflow:      hidden;
    border:        1.5px solid var(--gold-mid);
    background:    var(--ink);
    box-shadow:    var(--shadow-md);
}

.ad-slide-label {
    position:         absolute;
    top:              10px;
    left:             10px;
    z-index:          10;
    background:       rgba(26,23,20,.65);
    color:            rgba(250,248,244,.6);
    font-size:        9px;
    font-weight:      700;
    letter-spacing:   .12em;
    text-transform:   uppercase;
    padding:          3px 8px;
    border-radius:    3px;
    pointer-events:   none;
}

.ad-slide-track {
    position:     relative;
    width:        100%;
    aspect-ratio: 1920 / 700;
    overflow:     hidden;
}

.ad-slide-item {
    position:   absolute;
    inset:      0;
    opacity:    0;
    transition: opacity .8s ease;
    cursor:     pointer;
}

.ad-slide-item.active { opacity: 1; }

.ad-slide-item::before {
    content:    '';
    position:   absolute;
    inset:      -10px;
    background: var(--bg-url) center / cover no-repeat;
    filter:     blur(14px) brightness(.65) saturate(1.1);
    z-index:    0;
}

.ad-slide-item img {
    position:        relative;
    z-index:         1;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    display:         block;
}

.ad-slide-item::after {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     linear-gradient(to top, rgba(26,23,20,.5) 0%, transparent 60%);
    z-index:        2;
    pointer-events: none;
}

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

.ad-slide-dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    rgba(250,248,244,.4);
    border:        none;
    padding:       0;
    cursor:        pointer;
    transition:    all .3s;
}

.ad-slide-dot.active {
    width:         20px;
    border-radius: 3px;
    background:    #faf8f4;
}

.ad-slide-prev,
.ad-slide-next {
    position:          absolute;
    top:               50%;
    transform:         translateY(-50%);
    z-index:           10;
    width:             32px;
    height:            32px;
    border-radius:     50%;
    background:        rgba(250,248,244,.18);
    backdrop-filter:   blur(4px);
    border:            1px solid rgba(250,248,244,.25);
    color:             #faf8f4;
    font-size:         12px;
    cursor:            pointer;
    display:           flex;
    align-items:       center;
    justify-content:   center;
    transition:        background .2s;
}

.ad-slide-prev { left:  10px; }
.ad-slide-next { right: 10px; }

.ad-slide-prev:hover,
.ad-slide-next:hover { background: rgba(250,248,244,.32); }

.ad-slide-cta {
    position:       absolute;
    bottom:         10px;
    right:          10px;
    z-index:        10;
    background:     var(--gold);
    color:          #fff;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding:        5px 12px;
    border-radius:  4px;
    transition:     background .15s;
}

.ad-slide-cta:hover { background: #9a700a; }


/* ============================================================
   18. IKLAN — SIDEBAR
============================================================ */
.side-box-ad {
    border:        1px solid var(--gold-mid);
    border-radius: var(--radius-md);
    overflow:      hidden;
    background:    var(--gold-light);
}

.side-ad-head {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       12px 14px;
    background:    var(--gold-light);
    border-bottom: 1px solid var(--gold-mid);
}

.side-ad-icon {
    width:           26px;
    height:          26px;
    border-radius:   6px;
    background:      var(--gold);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    color:           #fff;
    font-size:       13px;
}

.side-ad-title {
    font-family: var(--ff-display);
    font-size:   14px;
    color:       var(--ink);
    flex:        1;
    line-height: 1.2;
}

.side-ad-subtitle { display: none; }

.side-ad-sponsor-tag {
    font-size:      9px;
    font-weight:    700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--gold);
    border:         1px solid var(--gold-mid);
    border-radius:  3px;
    padding:        2px 5px;
}

.side-ad-book {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       10px 14px;
    border-bottom: 1px solid var(--gold-mid);
    cursor:        pointer;
    transition:    background .15s;
}

.side-ad-book:last-of-type { border-bottom: none; }
.side-ad-book:hover        { background: rgba(184,134,11,.07); }

.side-ad-book-cover {
    width:           34px;
    height:          46px;
    flex-shrink:     0;
    border-radius:   3px;
    overflow:        hidden;
    background:      var(--cream-dark);
    border:          1px solid var(--gold-mid);
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.side-ad-book-cover img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.side-ad-book-cover-ph {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       12px;
    color:           var(--gold);
}

.side-ad-book-info { flex: 1; min-width: 0; }

.side-ad-book-title {
    font-size:          13px;
    font-weight:        500;
    color:              var(--ink);
    line-height:        1.4;
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
    margin-bottom:      2px;
}

.side-ad-book-price {
    font-family: var(--ff-display);
    font-size:   11px;
    color:       var(--gold);
}

.side-ad-footer { padding: 10px 14px; }

.side-ad-cta-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    width:           100%;
    padding:         8px;
    background:      var(--ink);
    border-radius:   var(--radius-sm);
    font-size:       11px;
    font-weight:     600;
    color:           var(--cream);
    letter-spacing:  .04em;
    text-transform:  uppercase;
    cursor:          pointer;
    transition:      background .15s;
}

.side-ad-cta-btn:hover { background: var(--gold); }


/* ============================================================
   19. IKLAN — DETAIL PAGE (wrap & top bar)
============================================================ */
.ad-detail-wrap {
    margin-top:    24px;
    border:        1px solid var(--gold-mid);
    border-radius: var(--radius-md);
    overflow:      hidden;
    background:    var(--gold-light);
}

.ad-detail-top {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 20px;
    background:      var(--gold-light);
    border-bottom:   1px solid var(--gold-mid);
}


/* ============================================================
   20. SIDEBAR
============================================================ */
.sidebar {
    display:        flex;
    flex-direction: column;
    gap:            20px;
}

.side-box {
    background:    #fff;
    border:        1px solid var(--border);
    border-radius: var(--radius-md);
    overflow:      hidden;
    box-shadow:    var(--shadow-sm);
}

.side-head {
    padding:       14px 18px;
    border-bottom: 1px solid var(--border);
    display:       flex;
    align-items:   center;
    gap:           10px;
}

.side-accent-bar {
    width:         3px;
    height:        18px;
    border-radius: 2px;
    background:    var(--accent);
    flex-shrink:   0;
}

.side-accent-bar.gold { background: var(--gold); }

.side-title {
    font-family:    var(--ff-display);
    font-size:      16px;
    color:          var(--ink);
    letter-spacing: -.1px;
}

/* Sidebar — berita terbaru */
.side-news-item {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    padding:       12px 16px;
    border-bottom: 1px solid var(--border);
    transition:    background .15s;
    cursor:        pointer;
}

.side-news-item:last-child { border-bottom: none; }
.side-news-item:hover      { background: var(--cream); }

.side-dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    var(--accent);
    opacity:       .4;
    flex-shrink:   0;
    margin-top:    6px;
    transition:    opacity .15s;
}

.side-news-item:hover .side-dot { opacity: 1; }

.side-news-title {
    font-size:   14px;
    color:       var(--ink-muted);
    line-height: 1.5;
    transition:  color .15s;
}

.side-news-item:hover .side-news-title { color: var(--ink); }

/* Sidebar — populer */
.side-pop-item {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    padding:       12px 16px;
    border-bottom: 1px solid var(--border);
    transition:    background .15s;
    cursor:        pointer;
}

.side-pop-item:last-child { border-bottom: none; }
.side-pop-item:hover      { background: var(--cream); }

.pop-num {
    font-family: var(--ff-display);
    font-size:   22px;
    color:       var(--border-mid);
    line-height: 1;
    min-width:   28px;
    transition:  color .15s;
}

.side-pop-item:hover .pop-num { color: var(--accent-mid); }

.pop-title {
    font-size:   14px;
    color:       var(--ink-muted);
    line-height: 1.5;
    transition:  color .15s;
}

.side-pop-item:hover .pop-title { color: var(--ink); }

/* Sidebar — tag cloud */
.tag-cloud {
    padding: 14px 16px;
    display: flex;
    flex-wrap: wrap;
    gap:     6px;
}

.tag-chip {
    background:    var(--cream-mid);
    border:        1px solid var(--border);
    border-radius: var(--radius-sm);
    padding:       5px 11px;
    font-size:     11px;
    font-weight:   500;
    color:         var(--ink-muted);
    cursor:        pointer;
    transition:    all .2s ease;
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
}

.tag-chip:hover {
    background:  var(--ink);
    border-color: var(--ink);
    color:        var(--cream);
}

.tag-chip .tag-count {
    font-size: 10px;
    opacity:   .5;
}

/* Sidebar — kategori */
.side-cat-item {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 16px;
    border-bottom:   1px solid var(--border);
    font-size:       13px;
    color:           var(--ink-muted);
    cursor:          pointer;
    transition:      background .15s, color .15s;
}

.side-cat-item:last-child  { border-bottom: none; }
.side-cat-item:hover       { background: var(--cream); color: var(--ink); }
.side-cat-item.active      { color: var(--accent); font-weight: 500; }
.side-cat-count            { font-size: 11px; color: var(--ink-faint); }


/* ============================================================
   21. PAGINATION
============================================================ */
.pagination {
    grid-column:     1 / -1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    margin-top:      28px;
    padding-top:     20px;
    border-top:      1px solid var(--border);
    flex-wrap:       wrap;
}

.page-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-width:       36px;
    height:          36px;
    padding:         0 10px;
    border-radius:   var(--radius-sm);
    border:          1px solid var(--border-mid);
    background:      #fff;
    font-size:       13px;
    font-weight:     500;
    color:           var(--ink-muted);
    transition:      all .2s;
}

.page-btn:hover {
    background:   var(--ink);
    border-color: var(--ink);
    color:        var(--cream);
}

.page-btn.active {
    background:    var(--accent);
    border-color:  var(--accent);
    color:         #fff;
    pointer-events: none;
}

.page-ellipsis {
    font-size:   13px;
    color:       var(--ink-faint);
    padding:     0 4px;
    line-height: 36px;
}

.page-info {
    font-size:   11px;
    color:       var(--ink-faint);
    margin-left: 8px;
    white-space: nowrap;
}


/* ============================================================
   22. FOOTER
============================================================ */
.site-footer {
    background: var(--ink);
    margin-top: 60px;
}

.footer-inner {
    max-width:       100%;
    margin:          0 auto;
    padding:         24px 40px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             12px;
}

.footer-logo {
    font-family:    var(--ff-display);
    font-size:      20px;
    color:          rgba(250,248,244,.55);
    letter-spacing: -.3px;
    display:        flex;
    align-items:    center;
    gap:            8px;
}

.footer-logo-bar {
    width:         2px;
    height:        20px;
    background:    var(--accent);
    border-radius: 2px;
    opacity:       .7;
}

.footer-copy {
    font-size: 12px;
    color:     rgba(250,248,244,.25);
}


/* ============================================================
   23. UTILITIES
============================================================ */
/* Digunakan inline di PHP, dicatat di sini agar trackable */
/* Tidak ada utility class tambahan; semua via CSS vars & components */


/* ============================================================
   24. RESPONSIVE — TABLET (≤960px)
============================================================ */
@media (max-width: 960px) {

    /* Topbar lebih kecil di tablet — padding 5px = height 21px exact */
    :root {
        --h-topbar: 21px; /* font 11px × lh 1 + padding 5px×2 */
    }

    /* Topbar */
    .topbar {
        padding: 5px 16px;
        height:  var(--h-topbar);
    }

    /* Header */
    .header-inner {
        padding: 0 16px; /* vertical dihandle oleh height: var(--h-header) */
        gap:     12px;
    }

    .lp-main,
    .lp-dot,
    .lp-tld { font-size: 22px; }

    .logo-divider  { height: 48px; }
    .logo-bar      { height: 54px; }

    .logo-text-wrap h1 { font-size: 22px; }

    .nav-links li a {
        padding:   7px 9px;
        font-size: 12px;
    }

    .header-search-input       { width: 140px; }
    .header-search-input:focus { width: 170px; }

    /* Layout */
    .page-grid { grid-template-columns: 1fr; }

    .sidebar {
        display:               grid;
        grid-template-columns: 1fr 1fr;
    }

    /* Featured card */
    .news-card.featured,
    a.news-card.featured {
        grid-template-columns: 1fr;
    }

    .news-card.featured .news-card-img {
        height:     220px;
        min-height: unset;
    }

    /* Banner inline */
    .ad-banner            { grid-template-columns: 1fr; }

    .ad-banner-label {
        flex-direction: row;
        align-items:    center;
        padding:        12px 16px;
        border-right:   none;
        border-bottom:  1px solid var(--gold-mid);
        gap:            8px;
    }

    .ad-banner-label .ad-title { font-size: 14px; }
    .ad-banner-books           { flex-wrap: wrap; }

    /* Iklan detail */
    .ad-detail-inner {
        flex-direction: column;
        gap:            14px;
    }

    .ad-detail-cta-col {
        width:        100%;
        flex-direction: row;
        flex-wrap:    wrap;
    }

    .ad-detail-shop-btn { flex: 1; }
}


/* ============================================================
   25. RESPONSIVE — MOBILE (≤640px)
============================================================ */
@media (max-width: 640px) {

    /* Override CSS vars untuk mobile:
       topbar hilang (0px), header pendek 56px (padding 10px×2 + logo 36px), ticker 36px */
    :root {
        --h-topbar: 0px;
        --h-header: 56px;
    }

    /* Page layout */
    .page-wrapper {
        padding:     20px 14px 60px;
        padding-top: calc(var(--h-stack-mobile) + 12px); /* 56+36+12 = 104px */
    }

    /* Topbar */
    .topbar { display: none; }

    /* Header — kini top:0 karena topbar hilang */
    .site-header {
        top: 0;
    }

    /* Ticker — kini tepat di bawah header mobile */
    .ticker-row {
        top: var(--h-header); /* 56px */
    }

    /* Header — 1 baris: [Logo] [Search] [≡] */
    .header-inner {
        display:        flex !important;
        flex-direction: row !important;
        align-items:    center !important;
        flex-wrap:      nowrap !important;
        padding:        0 14px; /* vertical = 0, height dikunci via --h-header */
        gap:            8px;
        width:          100%;
        box-sizing:     border-box;
    }

    .logo-penerbit { flex-shrink: 0; order: 1; }

    .lp-main,
    .lp-dot,
    .lp-tld {
        font-size:      17px;
        letter-spacing: -.2px;
    }

    .logo-divider { display: none; }
    .logo-portal  { display: none; }
    .nav-links    { display: none; }

    /* Search */
    .header-search {
        flex:        1 1 auto;
        min-width:   0;
        margin-left: 0;
        order:       2;
    }

    .header-search-input {
        width:        100%;
        min-width:    0;
        height:       36px;
        border-radius: 6px 0 0 6px;
        transition:   none;
        font-size:    13px;
    }

    .header-search-input:focus { width: 100%; }

    .header-search-btn {
        height: 36px;
        width:  36px;
    }

    /* Hamburger */
    .hamburger-btn {
        display:     flex;
        flex-shrink: 0;
        order:       3;
    }

    /* Grid & Sidebar */
    .news-grid { grid-template-columns: 1fr; }
    .sidebar   { grid-template-columns: 1fr; }

    /* Detail body */
    .detail-body,
    .komentar-body { padding: 24px 18px; }

    .detail-title { font-size: 24px; }

    .detail-img-wrap {
        height: 220px;
    }

    .detail-img-wrap img {
        object-fit:      cover;
        object-position: center top;
    }

    /* Meta bar — 1 baris penuh di mobile */
    .detail-meta-bar {
        flex-direction:  row;
        align-items:     center;
        justify-content: space-between;
        flex-wrap:       nowrap;
        gap:             8px;
    }

    .detail-byline {
        flex-direction: row;
        align-items:    center;
        flex-wrap:      nowrap;
        gap:            8px;
        flex-shrink:    1;
        min-width:      0;
        overflow:       hidden;
        border-bottom:  none;
        padding-bottom: 0;
        margin-bottom:  0;
    }

    .author-chip { flex-shrink: 1; min-width: 0; }

    .author-chip span {
        white-space:   nowrap;
        overflow:      hidden;
        text-overflow: ellipsis;
        max-width:     70px;
    }

    .date-chip {
        white-space: nowrap;
        flex-shrink: 0;
        font-size:   11px;
    }

    .detail-meta {
        flex-direction: row;
        align-items:    center;
        flex-wrap:      nowrap;
        flex-shrink:    0;
        gap:            5px;
        border-bottom:  none;
        padding-bottom: 0;
        margin-bottom:  0;
    }

    .cat-pill {
        font-size:  9px;
        padding:    2px 6px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .views-info { display: none !important; }

    /* Banner inline — full bleed */
    .ad-inline-wrap {
        margin-left:  -14px;
        margin-right: -14px;
    }

    .ad-banner {
        display:        flex;
        flex-direction: column;
        border-radius:  0;
        border-left:    none;
        border-right:   none;
        min-height:     unset;
    }

    .ad-banner-label {
        flex-direction: row;
        align-items:    center;
        padding:        8px 14px;
        border-right:   none;
        border-bottom:  1px solid var(--gold-mid);
        gap:            8px;
        border-radius:  0;
    }

    .ad-banner-label .ad-icon  { font-size: 14px; }
    .ad-banner-label .ad-title { font-size: 12px; }

    .ad-banner-books {
        display:               grid;
        grid-template-columns: 1fr 1fr;
    }

    .ad-book-item {
        flex-direction: row;
        align-items:    center;
        gap:            8px;
        padding:        10px 12px;
        border-left:    none;
        border-bottom:  1px solid var(--gold-mid);
    }

    .ad-book-item:nth-child(odd)             { border-right: 1px solid var(--gold-mid); }
    .ad-book-item:nth-last-child(-n+2)       { border-bottom: none; }
    .ad-book-item:last-child:nth-child(odd)  { grid-column: 1 / -1; border-right: none; }

    .ad-book-cover { width: 34px; height: 46px; }
    .ad-book-title { font-size: 10px; }
    .ad-book-price { font-size: 10px; }
    .ad-book-cta   { display: none; }
    .ad-cta-col    { display: none; }

    .ad-footer-mobile {
        display:         flex;
        align-items:     center;
        justify-content: center;
        gap:             8px;
        padding:         9px 14px;
        background:      rgba(184,134,11,.10);
        border-top:      1px solid var(--gold-mid);
        cursor:          pointer;
        transition:      background .15s;
    }

    .ad-footer-mobile:hover { background: rgba(184,134,11,.18); }

    .ad-footer-icon {
        width:           22px;
        height:          22px;
        border-radius:   50%;
        background:      var(--gold);
        display:         flex;
        align-items:     center;
        justify-content: center;
        flex-shrink:     0;
        color:           #fff;
        font-size:       11px;
    }

    .ad-footer-text {
        font-size:      11px;
        font-weight:    700;
        color:          var(--gold);
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    /* Iklan detail */
    .ad-detail-inner     { flex-direction: column; padding: 14px 16px; gap: 12px; }
    .ad-detail-books-row { flex-direction: column; }
    .ad-detail-cta-col   { width: 100%; flex-direction: row; }

    /* Slide banner mobile */
    .ad-slide-wrap {
        margin-left:  0;
        margin-right: 0;
        border-radius: var(--radius-md);
        border:        1.5px solid var(--gold-mid);
    }

    .ad-slide-track {
        aspect-ratio: unset !important;
        height:       180px;
    }

    .ad-slide-item img {
        object-fit:      contain !important;
        object-position: center center;
    }

    .ad-slide-prev,
    .ad-slide-next {
        display:   flex;
        width:     26px;
        height:    26px;
        font-size: 10px;
    }

    .ad-slide-cta {
        font-size: 9px;
        padding:   4px 9px;
    }
}