@charset "UTF-8";
/* ==========================================================================
   The Patriots Store: laman awam
   Hala tuju: DESIGN.md. Warna diukur dari fail logo Patriots.
   Motif: garis dua nada (3px merah + 3px kuning) di bawah tajuk.
   ========================================================================== */

:root {
    /* Warna jenama (diukur dari emblem-merah.png: #c02028) */
    --merah: #c02028;
    --merah-gelap: #9c1a21;
    --merah-cerah: #d8393f;
    --kuning: #f2c200;
    --kuning-gelap: #cba300;

    /* Dakwat dan kertas */
    --hitam: #0b0b0c;
    --hitam-lembut: #151517;
    --hitam-garis: #28282b;
    --kertas: #f7f6f3;
    --putih: #ffffff;

    /* Teks */
    --teks: #17171a;
    --teks-lembut: #55555c;
    --teks-samar: #6f6f78;
    --teks-atas-gelap: #f4f4f5;
    --teks-atas-gelap-lembut: #a8a8b0;

    /* Garis dan permukaan */
    --garis: #e2e0da;
    --garis-tegas: #c9c7c0;
    --garis-gelap: #2c2c30;

    /* Bentuk */
    --r-kecil: 4px;
    --r-sederhana: 8px;
    --r-besar: 12px;

    /* Tipografi */
    --fon-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --fon-buku: 'Playfair Display', 'Iowan Old Style', Georgia, serif;

    /* Saiz struktur */
    --lebar: 1240px;
    --lebar-baca: 760px;

    /* Bayang: satu tahap sahaja, untuk elemen yang benar-benar terapung */
    --naik-1: 0 1px 2px rgba(11, 11, 12, .06), 0 8px 24px rgba(11, 11, 12, .08);
    --naik-2: 0 18px 50px rgba(11, 11, 12, .28);

    --peralihan: 150ms ease;
}

/* --------------------------------------------------------------------------
   Asas
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--kertas);
    color: var(--teks);
    font-family: var(--fon-ui);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--merah); text-decoration: none; transition: color var(--peralihan); }
a:hover { color: var(--merah-gelap); }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }

p { margin: 0 0 1rem; }

button { font-family: inherit; font-size: inherit; cursor: pointer; }

/* Fokus papan kekunci yang kelihatan (R-32) */
:focus-visible {
    outline: 3px solid var(--merah);
    outline-offset: 2px;
    border-radius: var(--r-kecil);
}

.hero :focus-visible,
.featured-slider :focus-visible,
.bestsellers :focus-visible,
.footer :focus-visible { outline-color: var(--kuning); }

/* Teks untuk pembaca skrin */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.container,
.page-container,
.section-inner {
    width: 100%;
    max-width: var(--lebar);
    margin: 0 auto;
    padding: 0 24px;
}

.section { padding: 64px 0; }

.breadcrumb {
    max-width: var(--lebar);
    margin: 0 auto;
    padding: 20px 24px 0;
    font-size: .875rem;
    color: var(--teks-samar);
}

.breadcrumb nav { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.breadcrumb a { color: var(--teks-lembut); font-weight: 500; }
.breadcrumb a:hover { color: var(--merah); }
.breadcrumb span { color: var(--teks-samar); }

/* Halaman buku: header dan .book-hero dua-dua gelap, jadi jalur kertas breadcrumb
   di antaranya nampak seperti sisa yang tertinggal - bukan reka bentuk. Breadcrumb
   masuk ke jalur gelap yang sama dengan hero: teks cerah malap, pemisah lebih malap,
   hover kuning penanda. Halaman lain (hero cerah) kekal seperti sedia ada. */
.breadcrumb-gelap {
    background: var(--hitam);
    color: rgba(255, 255, 255, .55);
    padding: 16px 24px 0;
}

.breadcrumb-gelap a { color: rgba(255, 255, 255, .74); }
.breadcrumb-gelap a:hover { color: var(--kuning); }
.breadcrumb-gelap .bc-pemisah { color: rgba(255, 255, 255, .5); }   /* >=4.5:1 pada #0b0b0c */

/* Butang utama: satu sahaja gaya, merah pejal */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: 0 24px;
    background: var(--merah);
    color: var(--putih);
    border: 1px solid var(--merah);
    border-radius: var(--r-kecil);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .01em;
    transition: background var(--peralihan), border-color var(--peralihan);
}

.btn-primary:hover,
.btn-primary:focus-visible { background: var(--merah-gelap); border-color: var(--merah-gelap); color: var(--putih); }

/* --------------------------------------------------------------------------
   Pengepala
   -------------------------------------------------------------------------- */

.header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--hitam);
    border-bottom: 1px solid var(--hitam-garis);
}

.nav-container {
    width: 100%;
    max-width: var(--lebar);
    margin: 0 auto;
    padding: 0 24px;
    height: 68px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.logo { flex: 0 0 auto; }
.logo a { display: inline-flex; align-items: center; min-height: 44px; }
.logo img { height: 34px; width: auto; }

.nav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: auto;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    color: var(--teks-atas-gelap-lembut);
    font-size: .9375rem;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    transition: color var(--peralihan), border-color var(--peralihan);
}

.nav-link:hover { color: var(--putih); border-bottom-color: var(--merah); }

.nav-right { display: flex; align-items: center; gap: 8px; }

.search-btn,
.mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--hitam-garis);
    border-radius: var(--r-kecil);
    color: var(--teks-atas-gelap);
    transition: border-color var(--peralihan), color var(--peralihan), background var(--peralihan);
}

.search-btn:hover,
.mobile-menu-btn:hover { border-color: var(--merah); color: var(--putih); }
.mobile-menu-btn { display: none; }

.search-box {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--hitam-lembut);
    border-bottom: 1px solid var(--hitam-garis);
    padding: 16px 24px;
}

.search-box.active, .search-box.open { display: block; }

.search-form {
    max-width: var(--lebar);
    margin: 0 auto;
    display: flex;
    gap: 8px;
}

.search-input {
    flex: 1;
    min-height: 48px;
    padding: 0 16px;
    background: var(--kertas);
    border: 1px solid var(--hitam-garis);
    border-radius: var(--r-kecil);
    color: var(--teks);
    font-size: 1rem;
}

.search-input::placeholder { color: var(--teks-samar); }

.search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    background: var(--merah);
    color: var(--putih);
    border: 1px solid var(--merah);
    border-radius: var(--r-kecil);
}

.search-submit:hover { background: var(--merah-gelap); }
.search-icon { pointer-events: none; }

/* --------------------------------------------------------------------------
   Slaid pilihan (hero)
   -------------------------------------------------------------------------- */

.featured-slider {
    background: var(--hitam);
    color: var(--teks-atas-gelap);
    padding: 0 0 56px;
}

.slider-container { position: relative; max-width: var(--lebar); margin: 0 auto; }
.slider-wrapper { overflow: hidden; }

.slider-track {
    display: flex;
    transition: transform 400ms ease;
}

.slide {
    flex: 0 0 100%;
    min-width: 100%;
    padding: 48px 24px 16px;
}

.slide-content {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 48px;
    align-items: center;
}

.slide-image { position: relative; }
.slide-image .book-cover,
.slide-image img {
    width: 100%;
    max-width: 300px;
    border-radius: var(--r-kecil);
    border: 1px solid var(--hitam-garis);
}

/* Kulit dalam hero mesti memenuhi bekasnya. Bekas (.book-cover-wrapper) yang
   menentukan saiz - ia mengisi kolum grid 320px - tetapi had 300px di atas
   mengecilkan imej itu, dan kerana imej itu position:absolute inset:0 (left,
   right dan width semuanya ditetapkan), pelayar membuang `right`: imej lekat
   ke kiri dan tinggal jalur kosong 19px di kanan bingkai pada desktop.
   Diukur sebelum: bekas 320x479, imej 300x477, jurang kanan 19px.
   Selepas: imej 318x477, jurang kanan 1px (border bingkai sahaja).
   Telefon tidak terjejas: di situ bekasnya max-width 190px < had. */
.hero .slide-image .book-cover { max-width: none; }

.slide-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--r-kecil);
    border: 1px solid var(--hitam-garis);
    background: #000;
}

.slide-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.slide-info { max-width: 620px; }

.slide-synopsis {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--teks-atas-gelap-lembut);
    margin-bottom: 1rem;
}

.slide-title {
    font-family: var(--fon-buku);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--putih);
    margin-bottom: 1rem;
}

.slide-info-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
}

.slide-author {
    margin: 0;
    font-size: .9375rem;
    color: var(--teks-atas-gelap-lembut);
    letter-spacing: .02em;
}

.slide-btn {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 26px;
    background: var(--kuning);
    color: var(--hitam);
    border: 1px solid var(--kuning);
    border-radius: var(--r-kecil);
    font-weight: 700;
    font-size: .9375rem;
    letter-spacing: .01em;
}

.slide-btn:hover { background: var(--kuning-gelap); border-color: var(--kuning-gelap); color: var(--hitam); }

.slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
    padding: 0 24px;
}

.slider-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--hitam-garis);
    border-radius: var(--r-kecil);
    color: var(--teks-atas-gelap);
    transition: border-color var(--peralihan), background var(--peralihan);
}

.slider-btn:hover { border-color: var(--merah); background: rgba(192, 32, 40, .14); }

.slider-dots { display: flex; align-items: center; gap: 0; padding: 0; }

.dot {
    width: 44px; height: 44px;
    padding: 16px;
    border: 0;
    border-radius: 50%;
    background-color: var(--hitam-garis);
    background-clip: content-box;
    cursor: pointer;
    transition: background-color var(--peralihan);
}

/* Titik ialah butang sebenar, jadi ia boleh dicapai papan kekunci */
.dot:hover { background-color: var(--teks-atas-gelap-lembut); }
.dot:focus-visible { outline: 3px solid var(--kuning); outline-offset: 3px; }

.dot.active { background-color: var(--kuning); padding: 16px 11px; border-radius: 6px; }

.pause-icon, .play-icon { display: inline-flex; }

/* --------------------------------------------------------------------------
   Tajuk seksyen + motif garis dua nada
   -------------------------------------------------------------------------- */

.section-header { margin-bottom: 32px; }

.section-title {
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--teks);
}

.section-title span { display: inline-block; position: relative; padding-bottom: 14px; }

.section-title span::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 64px; height: 3px;
    background: linear-gradient(to bottom, var(--merah) 0 50%, var(--kuning) 50% 100%);
}

.section-subtitle {
    margin: .75rem 0 0;
    color: var(--teks-lembut);
    font-size: 1rem;
    max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Kad buku
   -------------------------------------------------------------------------- */

.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 32px 24px;
}

.home-book-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

.book-card { position: relative; }

.book-card > a { display: block; color: inherit; }

.book-cover-wrapper {
    position: relative;
    margin-bottom: 14px;
    background: #ecebe6;
    border: 1px solid var(--garis);
    border-radius: var(--r-kecil);
    overflow: hidden;
    transition: border-color var(--peralihan), transform var(--peralihan);
}

.book-cover-wrapper::after {
    content: "";
    display: block;
    padding-bottom: 150%;
}

.book-cover,
.book-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-card:hover .book-cover-wrapper,
.book-card:focus-within .book-cover-wrapper {
    border-color: var(--merah);
    transform: translateY(-2px);
}

.book-info { padding: 0 2px; }

.book-title {
    font-family: var(--fon-buku);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--teks);
    margin-bottom: .35rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.book-card:hover .book-title { color: var(--merah); }

.book-author {
    margin: 0;
    font-size: .8125rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--teks-samar);
}

/* Jalur gelap: Paling Laris. Satu sahaja per halaman. */
.bestsellers {
    background: var(--hitam);
    color: var(--teks-atas-gelap);
    border-top: 3px solid var(--kuning);
}

.bestsellers .section-title { color: var(--putih); }
.bestsellers .book-title { color: var(--putih); }
.bestsellers .book-author { color: var(--teks-atas-gelap-lembut); }
.bestsellers .book-cover-wrapper { background: var(--hitam-lembut); border-color: var(--hitam-garis); }
.bestsellers .book-card:hover .book-cover-wrapper { border-color: var(--kuning); }
.bestsellers .book-card:hover .book-title { color: var(--kuning); }

/* Jalur kertas: Akan Datang */
.coming-soon { background: #efece5; }
.coming-soon .book-cover-wrapper { background: var(--putih); }

/* --------------------------------------------------------------------------
   Video
   -------------------------------------------------------------------------- */

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px 24px;
}

.video-card { display: flex; flex-direction: column; }

.video-placeholder {
    position: relative;
    cursor: pointer;
    border: 1px solid var(--garis);
    border-radius: var(--r-kecil);
    overflow: hidden;
    background: #ecebe6;
    transition: border-color var(--peralihan);
}

.video-placeholder::after { content: ""; display: block; padding-bottom: 56.25%; }
.video-placeholder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-placeholder:hover { border-color: var(--merah); }

.play-button {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 56px; height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 11, 12, .82);
    color: var(--kuning);
    border-radius: 50%;
    font-size: 1.1rem;
    pointer-events: none;
}

.video-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 14px 0 .35rem;
    color: var(--teks);
}

.video-description { font-size: .875rem; color: var(--teks-lembut); margin: 0; }

.video-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(6, 6, 7, .9);
    padding: 24px;
    overflow-y: auto;
}

.video-modal.active, .video-modal.open { display: flex; align-items: center; justify-content: center; }

.video-modal-content {
    position: relative;
    width: 100%;
    max-width: 900px;
    background: var(--hitam-lembut);
    border: 1px solid var(--hitam-garis);
    border-radius: var(--r-sederhana);
    padding: 20px;
}

.video-modal-close {
    position: absolute;
    top: -48px; right: 0;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--hitam-garis);
    border-radius: var(--r-kecil);
    color: var(--teks-atas-gelap);
    font-size: 1.4rem;
    line-height: 1;
}

.video-modal-close:hover { border-color: var(--merah); }

.video-modal-iframe-container { position: relative; padding-bottom: 56.25%; height: 0; }
.video-modal-iframe-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-modal h3 { color: var(--teks-atas-gelap); font-size: 1rem; margin-top: 14px; }

/* --------------------------------------------------------------------------
   Halaman senarai buku (genres)
   -------------------------------------------------------------------------- */

.genres-section { padding: 40px 0 64px; }

.genres-header { margin-bottom: 28px; }

.genres-header-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.genres-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    padding-bottom: 14px;
    position: relative;
}

.genres-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 72px; height: 3px;
    background: linear-gradient(to bottom, var(--merah) 0 50%, var(--kuning) 50% 100%);
}

.genres-results { display: flex; align-items: baseline; gap: 16px; }
.genres-results-mobile { display: none; }

.results-count { font-size: .875rem; color: var(--teks-lembut); }
.books-available { font-size: .875rem; color: var(--teks-samar); }
.books-available-mobile { display: none; font-size: .875rem; color: var(--teks-samar); margin-top: 8px; }

.category-toggle-btn {
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 16px;
    padding: 0 16px;
    background: var(--putih);
    border: 1px solid var(--garis-tegas);
    border-radius: var(--r-kecil);
    color: var(--teks);
    font-weight: 500;
}

.genres-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 48px;
    align-items: start;
}

.genres-sidebar { position: sticky; top: 92px; }

.sidebar-title {
    font-size: .8125rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--teks-samar);
    font-weight: 600;
    margin-bottom: 14px;
}

.sidebar-header { display: block; }
.sidebar-title-mobile { display: none; }
.sidebar-close-btn, .sidebar-overlay { display: none; }

.category-list { list-style: none; margin: 0; padding: 0; }
.category-list li { border-bottom: 1px solid var(--garis); }

.category-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 8px 0;
    color: var(--teks-lembut);
    font-size: .9375rem;
    border-left: 3px solid transparent;
    padding-left: 12px;
}

.category-link:hover { color: var(--merah); }

.category-link.active {
    color: var(--teks);
    font-weight: 600;
    border-left-color: var(--merah);
    background: #f0eee8;
}

.category-count { color: var(--teks-samar); font-size: .8125rem; }

.genres-content { min-width: 0; }
.genres-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* Penomboran */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 48px;
    flex-wrap: wrap;
}

.pagination-link,
.pagination-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    background: var(--putih);
    border: 1px solid var(--garis-tegas);
    border-radius: var(--r-kecil);
    color: var(--teks);
    font-size: .9375rem;
    font-weight: 500;
}

.pagination-link:hover,
.pagination-number:hover { border-color: var(--merah); color: var(--merah); }

.pagination-number.active,
.pagination-link.active { background: var(--merah); border-color: var(--merah); color: var(--putih); }

.pagination-link.disabled,
.pagination-number.disabled {
    color: var(--teks-samar);
    border-color: var(--garis);
    background: transparent;
    pointer-events: none;
}

.pagination-numbers { display: flex; align-items: center; gap: 8px; }
.pagination-ellipsis { color: var(--teks-samar); padding: 0 4px; }

/* --------------------------------------------------------------------------
   Kategori
   -------------------------------------------------------------------------- */

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.category-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 132px;
    padding: 20px;
    background: var(--putih);
    border: 1px solid var(--garis);
    border-radius: var(--r-kecil);
    color: var(--teks);
    transition: border-color var(--peralihan), background var(--peralihan);
}

.category-card:hover { border-color: var(--merah); background: #fdf7f7; color: var(--teks); }

.category-card-icon {
    font-size: 1.1rem;
    color: var(--merah);
    margin-bottom: 4px;
}

.category-card-name {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.category-card-count { margin: 0; font-size: .8125rem; color: var(--teks-samar); }

.category-page, .categories-page { padding: 40px 0 64px; }

/* --------------------------------------------------------------------------
   Penulis
   -------------------------------------------------------------------------- */

.authors-page { padding: 40px 0 64px; }
.authors-header { margin-bottom: 24px; }

.authors-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    position: relative;
    padding-bottom: 14px;
}

.authors-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 72px; height: 3px;
    background: linear-gradient(to bottom, var(--merah) 0 50%, var(--kuning) 50% 100%);
}

.authors-search-results { margin-top: 8px; color: var(--teks-lembut); font-size: .9375rem; }

.authors-alphabet-filter { margin: 28px 0 32px; }

.alphabet-label {
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--teks-samar);
    margin-bottom: 10px;
    font-weight: 600;
}

.alphabet-buttons { display: flex; flex-wrap: wrap; gap: 6px; }

.alphabet-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 10px;
    background: var(--putih);
    border: 1px solid var(--garis-tegas);
    border-radius: var(--r-kecil);
    color: var(--teks);
    font-size: .875rem;
    font-weight: 600;
}

.alphabet-btn:hover { border-color: var(--merah); color: var(--merah); }
.alphabet-btn.active { background: var(--hitam); border-color: var(--hitam); color: var(--kuning); }

.authors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}

.author-card {
    background: var(--putih);
    border: 1px solid var(--garis);
    border-radius: var(--r-kecil);
    overflow: hidden;
    transition: border-color var(--peralihan);
}

.author-card:hover { border-color: var(--merah); }
.author-card > a { display: block; color: inherit; }

.author-image-wrapper {
    position: relative;
    background: #ecebe6;
    border-bottom: 1px solid var(--garis);
}

.author-image-wrapper::after { content: ""; display: block; padding-bottom: 100%; }

.author-image-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

.author-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fon-buku);
    font-size: 3rem;
    font-weight: 700;
    color: var(--merah);
    background: #efece5;
}

.author-card-info { padding: 18px; }

.author-card-name {
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.author-card-bio { margin: 0; font-size: .875rem; color: var(--teks-lembut); line-height: 1.55; }

/* Halaman penulis */
.author-hero { padding: 40px 0 16px; }

.author-hero-content {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: start;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--garis);
}

.author-image-large {
    position: relative;
    background: #ecebe6;
    border: 1px solid var(--garis);
    border-radius: var(--r-kecil);
    overflow: hidden;
}

.author-image-large::after { content: ""; display: block; padding-bottom: 100%; }
.author-image-large img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.author-image-placeholder-large {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fon-buku);
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--merah);
    background: #efece5;
}

.author-name-main {
    font-family: var(--fon-buku);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: 16px;
}

.author-bio-full { color: var(--teks-lembut); font-size: 1.0625rem; line-height: 1.75; max-width: 68ch; }
.author-bio-full a, .author-text a { color: var(--merah); text-decoration: underline; text-underline-offset: 2px; }

.author-books-section { padding: 32px 0 64px; }

.author-books-title { font-size: 1.35rem; margin-bottom: 24px; position: relative; }
.author-books-title span { padding-bottom: 12px; display: inline-block; position: relative; }

.author-books-title span::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 56px; height: 3px;
    background: linear-gradient(to bottom, var(--merah) 0 50%, var(--kuning) 50% 100%);
}

.author-books-slider { position: relative; display: flex; align-items: center; gap: 12px; }
.author-books-slider-wrapper { overflow: hidden; flex: 1; min-width: 0; }

.author-books-slider-track { display: flex; gap: 24px; transition: transform 350ms ease; }

.author-books-slide { flex: 0 0 190px; }

.author-book-card { display: block; color: inherit; }
.author-book-card .book-title { font-size: 1rem; margin-top: 12px; }

.author-books-slider-btn {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    background: var(--putih);
    border: 1px solid var(--garis-tegas);
    border-radius: var(--r-kecil);
    color: var(--teks);
}

.author-books-slider-btn:hover { border-color: var(--merah); color: var(--merah); }

/* --------------------------------------------------------------------------
   Halaman buku
   -------------------------------------------------------------------------- */

/* Offset jalur gelap di atas hero = tinggi header + breadcrumb. Diukur pada live
   (55 + 56 = 111px telefon, 69 + 38 = 107px desktop), bukan diagak. */
.book-page { --atas-gelap: 111px; }

.book-hero {
    background: var(--hitam);
    color: var(--teks-atas-gelap);
    padding: 48px 0 56px;
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--atas-gelap, 111px));
    min-height: calc(100svh - var(--atas-gelap, 111px));
}

/* Flex item perlu lebar penuh supaya 'margin: 0 auto' masih menengahkan lajur. */
.book-hero > .page-container { width: 100%; }

/* Desktop: jangan biarkan skrin tinggi dapat tembok hitam kosong - hadkan. */
@media (min-width: 769px) {
    .book-page { --atas-gelap: 107px; }
    /* Had 820px: tanpa ini skrin 1200px tinggi dapat tembok hitam 1093px.
       min() dipakai pada min-height sebab min-height MENANG atas max-height. */
    .book-hero {
        min-height: min(calc(100vh - var(--atas-gelap, 107px)), 820px);
        min-height: min(calc(100svh - var(--atas-gelap, 107px)), 820px);
    }
}

/* Telefon: hero mengisi skrin pertama, jadi tabbar bawah duduk di atas jalur hitam
   dan JS menukar bar ke resipi kaca gelap. */
@media (max-width: 768px) {
    .book-hero { padding: 36px 0 48px; }
}

.book-hero-content {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 48px;
    align-items: start;
}

.book-cover-large-wrapper {
    position: relative;
    background: var(--hitam-lembut);
    border: 1px solid var(--hitam-garis);
    border-radius: var(--r-kecil);
    overflow: hidden;
}

.book-cover-large-wrapper::after { content: ""; display: block; padding-bottom: 150%; }

/* .book-cover-large ialah KOTAK (item grid), bukan imej. Imejnya
   .book-cover-img dan ia yang perlu absolute (lihat peraturan di atas).
   Sebelum ini .book-cover-large dijadikan absolute + inset:0, jadi kotak itu
   terlepas keluar grid dan menutup seluruh halaman (imej 1263x1895px pada
   desktop). */
.book-cover-large { position: relative; min-width: 0; }

.book-title-main {
    font-family: var(--fon-buku);
    font-size: clamp(1.9rem, 4.2vw, 3rem);
    color: var(--putih);
    margin-bottom: 12px;
}

.book-authors-main {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kuning);
    margin-bottom: 28px;
}

.book-purchase-group { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }

.format-dropdown-wrapper,
.buy-dropdown-wrapper { position: relative; }

.format-dropdown-btn,
.format-stat,
.buy-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 20px;
}

.format-dropdown-btn,
.format-stat {
    background: transparent;
    border: 1px solid var(--hitam-garis);
    border-radius: var(--r-kecil);
    color: var(--teks-atas-gelap);
    font-weight: 500;
}

.format-dropdown-btn:hover { border-color: var(--kuning); color: var(--kuning); }

/* Label format (satu-satunya format): rupa sama dengan butang format, tanpa anak panah. */
.format-stat { cursor: default; }
.dropdown-arrow { font-size: .7rem; opacity: .8; }

.format-dropdown-menu,
.buy-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 40;
    min-width: 220px;
    padding: 8px;
    background: var(--hitam-lembut);
    border: 1px solid var(--hitam-garis);
    border-radius: var(--r-kecil);
    box-shadow: var(--naik-2);
}

/* Dibuka ke atas bila ruang di bawah butang tidak cukup (script.js yang menanda). */
.buy-dropdown-menu.buka-atas {
    top: auto;
    bottom: calc(100% + 8px);
}

.format-dropdown-wrapper.active .format-dropdown-menu,
.format-dropdown-menu.active,
.format-dropdown-menu.open,
.buy-dropdown-wrapper.active .buy-dropdown-menu,
.buy-dropdown-menu.active,
.buy-dropdown-menu.open { display: block; }

.format-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: var(--r-kecil);
    color: var(--teks-atas-gelap);
}

.format-option:hover { background: rgba(255, 255, 255, .06); }
.format-option.active { background: var(--merah); color: var(--putih); }

.store-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--r-kecil);
    color: var(--teks-atas-gelap);
}

.store-link:hover { background: rgba(255, 255, 255, .06); color: var(--kuning); }
/* Ikon pautan kedai = campuran glyph FontAwesome (store, TikTok) dengan SVG logo
   Shopee. Setiap satu dibungkus dalam kotak 20px supaya ketiga-tiganya sejajar
   menegak dan tidak mengubah tinggi baris. */
.store-icon {
    display: grid;
    place-items: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: inherit;
}

.store-icon i { font-size: .9375rem; line-height: 1; }
.store-icon svg { display: block; width: 17px; height: 17px; }

.store-empty {
    margin: 0;
    padding: 12px 16px;
    background: rgba(255, 255, 255, .05);
    border: 1px dashed var(--hitam-garis);
    border-radius: var(--r-kecil);
    color: var(--teks-atas-gelap-lembut);
    font-size: .9375rem;
}
.store-name { font-size: .9375rem; font-weight: 500; }

.book-details-desktop-date,
.book-details-desktop-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--hitam-garis);
    margin-top: 20px;
}

.book-detail-item { display: flex; flex-direction: column; gap: 4px; font-size: .875rem; }

.book-detail-item > span:first-child {
    color: var(--teks-atas-gelap-lembut);
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.book-detail-text { color: var(--teks-atas-gelap); }
.book-detail-text b { font-weight: 600; }

.book-content { padding: 56px 0 64px; }

.book-content-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 56px;
    align-items: start;
}

.book-main-content { min-width: 0; }

.synopsis .section-header,
.about-author .section-header,
.book-details-mobile .section-header { margin-bottom: 20px; }

.quote-highlight {
    margin: 0 0 28px;
    padding: 24px 28px;
    background: #efece5;
    border-left: 4px solid var(--merah);
    border-radius: var(--r-kecil);
}

.quote-highlight p { margin: 0; }
.quote-highlight p:first-child { font-family: var(--fon-buku); font-size: 1.25rem; line-height: 1.5; color: var(--teks); }
.quote-highlight p:last-child { margin-top: 10px; font-size: .875rem; color: var(--teks-samar); letter-spacing: .04em; }

.synopsis-text { font-size: 1.0625rem; line-height: 1.8; color: var(--teks-lembut); max-width: 70ch; }
.synopsis-text p { margin: 0 0 1.1rem; }
.synopsis-text h2, .synopsis-text h3 { margin: 2rem 0 .8rem; color: var(--teks); }
.synopsis-text ul, .synopsis-text ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.synopsis-text li { margin-bottom: .5rem; }
.synopsis-text a { color: var(--merah); text-decoration: underline; text-underline-offset: 2px; }
.synopsis-text blockquote { margin: 1.5rem 0; padding-left: 1rem; border-left: 3px solid var(--kuning); color: var(--teks); }

.book-details-mobile { margin-top: 40px; }

.book-details-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    padding: 24px;
    background: var(--putih);
    border: 1px solid var(--garis);
    border-radius: var(--r-kecil);
}

.book-details-list .book-detail-item > span:first-child { color: var(--teks-samar); }
.book-details-list .book-detail-text { color: var(--teks); }

.about-author { margin-top: 40px; }
.author-text { font-size: 1.0625rem; line-height: 1.75; color: var(--teks-lembut); max-width: 70ch; }

.related-books { margin-top: 48px; }
.book-grid-related { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* --------------------------------------------------------------------------
   Carian
   -------------------------------------------------------------------------- */

.search-page { padding: 40px 0 64px; }
.search-header { margin-bottom: 28px; }

.search-title {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    margin-bottom: 12px;
    position: relative;
    padding-bottom: 14px;
}

.search-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 72px; height: 3px;
    background: linear-gradient(to bottom, var(--merah) 0 50%, var(--kuning) 50% 100%);
}

.search-results-count { color: var(--teks-lembut); font-size: .9375rem; margin: 0 0 4px; }

.search-section { margin-bottom: 48px; }
.search-section-title {
    font-size: 1.25rem;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--garis);
}

/* --------------------------------------------------------------------------
   Keadaan kosong
   -------------------------------------------------------------------------- */

.empty-state {
    padding: 56px 32px;
    text-align: center;
    background: var(--putih);
    border: 1px solid var(--garis);
    border-radius: var(--r-kecil);
}

.empty-state h2 { font-size: 1.25rem; margin-bottom: 10px; }
.empty-state p { color: var(--teks-lembut); max-width: 46ch; margin: 0 auto 20px; }

/* --------------------------------------------------------------------------
   Halaman kandungan (Terma, Privasi, Tentang, Hubungi, Cadangan)
   -------------------------------------------------------------------------- */

.page-content { padding: 40px 0 64px; }

.page-wrapper { max-width: var(--lebar-baca); margin: 0 auto; }

.page-title-main {
    font-family: var(--fon-buku);
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    margin-bottom: 28px;
    position: relative;
    padding-bottom: 16px;
}

.page-title-main::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 72px; height: 3px;
    background: linear-gradient(to bottom, var(--merah) 0 50%, var(--kuning) 50% 100%);
}

.page-body { font-size: 1.0625rem; line-height: 1.8; color: var(--teks-lembut); }
.page-body p { margin: 0 0 1.15rem; }

.page-body h2 {
    font-size: 1.3rem;
    letter-spacing: -0.015em;
    color: var(--teks);
    margin: 2.5rem 0 .9rem;
}

.page-body h3 { font-size: 1.1rem; color: var(--teks); margin: 1.8rem 0 .7rem; }

.page-body ul, .page-body ol { margin: 0 0 1.3rem; padding-left: 1.3rem; }
.page-body ul { list-style: disc; }
.page-body ol { list-style: decimal; }
.page-body li { margin-bottom: .55rem; padding-left: .15rem; }
.page-body li:last-child { margin-bottom: 0; }

.page-body a { color: var(--merah); text-decoration: underline; text-underline-offset: 2px; }
.page-body a:hover { color: var(--merah-gelap); }
.page-body strong { color: var(--teks); }

.page-body .dokumen-meta {
    font-size: .875rem;
    color: var(--teks-samar);
    background: #efece5;
    border-left: 4px solid var(--merah);
    border-radius: var(--r-kecil);
    padding: .7rem 1rem;
    margin-bottom: 2rem;
}

.page-body .ringkasan {
    background: var(--putih);
    border: 1px solid var(--garis);
    border-radius: var(--r-sederhana);
    padding: 1.4rem 1.5rem;
    margin: 0 0 2.2rem;
}

.page-body .ringkasan h2 { margin: 0 0 .8rem; font-size: 1.05rem; }
.page-body .ringkasan ul { margin-bottom: 0; }
.page-body .ringkasan a { font-weight: 500; }

/* --------------------------------------------------------------------------
   Pengaki
   -------------------------------------------------------------------------- */

.footer {
    background: var(--hitam);
    color: var(--teks-atas-gelap-lembut);
    border-top: 3px solid var(--merah);
    padding: 28px 0;
}

.footer-simple {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .875rem;
}

.footer-copyright { color: var(--teks-atas-gelap-lembut); }
.footer-separator { color: var(--hitam-garis); }

.footer-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--teks-atas-gelap-lembut);
}

.footer-link:hover { color: var(--kuning); }

/* --------------------------------------------------------------------------
   Skrin kecil
   -------------------------------------------------------------------------- */

@media (max-width: 969px) {
    .slide-content { grid-template-columns: 220px 1fr; gap: 32px; }
    .book-content-wrapper { grid-template-columns: 1fr; gap: 36px; }
    .author-hero-content { grid-template-columns: 200px 1fr; gap: 28px; }
    .genres-layout { grid-template-columns: 200px 1fr; gap: 32px; }
}

@media (max-width: 768px) {
    :root { --lebar: 100%; }

    body { font-size: 16px; }

    .container, .page-container, .section-inner { padding: 0 18px; }
    .breadcrumb { padding: 16px 18px 0; }
    .breadcrumb-gelap { padding: 12px 18px 0; }

    /* Sasaran sentuh: pautan breadcrumb hanya 22px tinggi. Di telefon ia
       dijadikan 44px tanpa mengubah saiz teks. */
    .breadcrumb a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 5px;   /* 'Utama' = 43.6px lebar; padding buat ia >=44px */
    }
    .section { padding: 44px 0; }

    .nav-container { height: 54px; gap: 12px; padding: 0 18px; }
    .logo img { height: 28px; }

    /* Telefon: tiada nav atas, tiada burger. Navigasi ada pada tabbar bawah. */
    .nav-menu,
    .mobile-menu-btn,
    .search-btn,
    .search-box { display: none !important; }

    .featured-slider { padding-bottom: 40px; }
    .slide { padding: 28px 18px 8px; }
    .slide-content { grid-template-columns: 1fr; gap: 24px; }
    .slide-image img, .slide-image .book-cover { max-width: 200px; margin: 0 auto; }
    .slide-title { font-size: 1.6rem; }

    .slider-controls { margin-top: 20px; padding: 0 18px; gap: 8px; }
    .slider-dots { gap: 6px; }

    .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
    .home-book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
    .genres-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .book-grid-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .video-grid { grid-template-columns: 1fr; gap: 24px; }

    .book-title { font-size: .9375rem; }
    .book-author { font-size: .6875rem; }

    .genres-header-top { flex-direction: column; align-items: stretch; gap: 12px; }
    .genres-results { display: none; }
    .genres-results-mobile { display: flex; justify-content: space-between; gap: 12px; }
    .books-available-mobile { display: block; }
    /* Butang "Kategori" tiada jarak bawah: kandungan di bawahnya bermula tepat
       pada tepi bawah butang (0px). Beri jarak supaya tidak melekat. */
    .category-toggle-btn { display: inline-flex; margin-bottom: 24px; }

    .genres-layout { grid-template-columns: 1fr; gap: 0; }

    .genres-sidebar {
        position: fixed;
        top: 0; left: 0;
        z-index: 120;
        width: min(320px, 86vw);
        height: 100vh;
        overflow-y: auto;
        padding: 20px;
        background: var(--putih);
        border-right: 1px solid var(--garis);
        transform: translateX(-100%);
        transition: transform 220ms ease;
    }

    .genres-sidebar.active, .genres-sidebar.open { transform: translateX(0); }
    .sidebar-title { display: none; }
    .sidebar-title-mobile { display: block; font-size: 1.1rem; margin: 0; }

    .sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--garis);
    }

    .sidebar-close-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px; height: 44px;
        background: transparent;
        border: 1px solid var(--garis-tegas);
        border-radius: var(--r-kecil);
        color: var(--teks);
    }

    .sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 110; background: rgba(11, 11, 12, .5); }
    .sidebar-overlay.active, .sidebar-overlay.open { display: block; }

    .categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .category-card { min-height: 116px; padding: 16px; }
    .category-card-name { font-size: 1rem; }

    .authors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .author-card-info { padding: 14px; }
    .author-card-name { font-size: .9375rem; }
    .author-card-bio { display: none; }
    .alphabet-btn { min-width: 36px; min-height: 36px; font-size: .8125rem; }

    .author-hero-content { grid-template-columns: 1fr; gap: 24px; }
    .author-image-large { max-width: 180px; }
    .author-name-main { font-size: 1.7rem; }
    .author-books-slide { flex: 0 0 140px; }

    .book-hero { padding: 32px 0 40px; }
    .book-hero-content { grid-template-columns: 1fr; gap: 28px; }
    .book-cover-large-wrapper { max-width: 200px; margin: 0 auto; }
    .book-title-main { font-size: 1.7rem; }
    .book-authors-main { font-size: .875rem; margin-bottom: 20px; }
    .book-purchase-group { flex-direction: column; align-items: stretch; }
    .format-dropdown-wrapper, .buy-dropdown-wrapper { width: 100%; }
    .format-dropdown-btn, .format-stat, .buy-dropdown-btn { width: 100%; justify-content: space-between; }
    .format-dropdown-menu, .buy-dropdown-menu { width: 100%; min-width: 0; }
    .book-details-desktop-date { display: none; }
    .book-details-desktop-pages { display: none; }

    .book-content { padding: 36px 0 48px; }
    .quote-highlight { padding: 18px 20px; }
    .quote-highlight p:first-child { font-size: 1.1rem; }
    .synopsis-text, .author-text { font-size: 1rem; }
    .book-details-list { grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px; }

    .page-content { padding: 28px 0 48px; }
    .page-body { font-size: 1rem; line-height: 1.75; }
    .page-body h2 { font-size: 1.18rem; }

    .empty-state { padding: 36px 20px; }

    .footer-simple { flex-direction: column; gap: 4px; }
    .footer-separator { display: none; }
}

@media (max-width: 480px) {
    .book-grid, .home-book-grid, .genres-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
    .video-modal { padding: 12px; }
    .video-modal-close { top: -46px; }
}

@media (max-width: 390px) {
    .categories-grid { grid-template-columns: 1fr; }
    .authors-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
    html { scroll-behavior: auto; }
}


/* --------------------------------------------------------------------------
   Pelengkap: kelas pembalut dan keadaan yang dipacu JavaScript
   -------------------------------------------------------------------------- */

.nav { display: block; }
.new-releases { background: var(--kertas); }
.latest-videos { background: var(--putih); border-top: 1px solid var(--garis); }
.book-page { padding-bottom: 8px; }

.author-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-info { min-width: 0; }

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

.slider-btn-prev, .slider-btn-next { font-size: .875rem; }
.slider-btn-pause { border-color: var(--kuning); color: var(--kuning); }
.slider-btn-pause:hover { background: rgba(242, 194, 0, .16); border-color: var(--kuning); }


.empty-state i {
    display: block;
    font-size: 2.5rem;
    color: var(--garis-tegas);
    margin-bottom: 1rem;
}


/* ==========================================================================
   Laman utama: hero poster, pengumuman/blog, rel buku, blok Akan Datang
   Dial laman ini: ENERGY 3 / RHYTHM 3 / MOTION 2 (laman utama sahaja, dalam
   lingkungan dial projek yang sama supaya ia benar-benar nampak seperti
   muka depan kedai, bukan grid yang sama berulang).
   ========================================================================== */

.hero {
    background: var(--hitam);
    color: var(--teks-atas-gelap);
    padding: 0 0 40px;
    border-bottom: 3px solid var(--merah);
}

.hero-label {
    display: inline-block;
    margin: 0 0 14px;
    font-size: .6875rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--kuning);
}

.hero .slide-content {
    grid-template-columns: 1fr 320px;
    gap: 56px;
    align-items: center;
    padding: 56px 24px 8px;
    max-width: var(--lebar);
    margin: 0 auto;
}

.hero .slide-title { font-size: clamp(2rem, 4.6vw, 3.4rem); margin-bottom: 10px; }
.hero .slide-author { color: var(--kuning); text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; margin-bottom: 16px; }
.hero .slide-synopsis { font-size: 1.0625rem; max-width: 54ch; margin-bottom: 26px; }
.hero .slide-info-bottom { margin-top: 0; padding: 0; border: 0; }

.hero .book-cover-wrapper {
    background: var(--hitam-lembut);
    border: 1px solid var(--hitam-garis);
    box-shadow: none;
}

.hero .book-cover-wrapper::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 26px; height: 6px;
    background: var(--kuning);
    z-index: 2;
}

.slide-pautan {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 4px;
    color: var(--teks-atas-gelap-lembut);
    font-size: .9375rem;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.slide-pautan:hover { color: var(--kuning); }

/* Pita katalog: fakta sebenar + cip kategori */

.cip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    background: var(--kertas);
    border: 1px solid var(--garis);
    border-radius: var(--r-kecil);
    color: var(--teks-lembut);
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
}

.cip:hover { border-color: var(--merah); color: var(--merah); background: var(--putih); }
.cip-kiraan { color: var(--teks-samar); font-variant-numeric: tabular-nums; }

/* Tajuk seksyen dengan pautan "Semua buku" */
.section-header.dengan-pautan {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.pautan-semua {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--merah);
    border-bottom: 2px solid transparent;
}

.pautan-semua:hover { border-bottom-color: var(--merah); }
.pautan-atas-gelap { color: var(--kuning); }
.pautan-atas-gelap:hover { border-bottom-color: var(--kuning); }

/* Rel: grid di desktop, rel leret ber-snap di telefon */
.rail-track { display: grid; }

.baharu { background: var(--kertas); }
.baharu .rail-track { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 32px 22px; }

/* Akan Datang: satu buku utama + senarai, bukan grid yang sama lagi */
.adat { background: #efece5; }

.adat-layout {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: start;
}

.adat-utama-pautan { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; color: inherit; }

.adat-utama-kulit {
    position: relative;
    background: var(--putih);
    border: 1px solid var(--garis);
    border-radius: var(--r-kecil);
    overflow: hidden;
}

.adat-utama-kulit::after { content: ""; display: block; padding-bottom: 150%; }
.adat-utama-kulit img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.adat-label {
    margin: 0 0 10px;
    font-size: .6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--merah);
}

.adat-tajuk { font-family: var(--fon-buku); font-size: 1.75rem; line-height: 1.2; margin-bottom: 8px; }
.adat-utama-pautan:hover .adat-tajuk { color: var(--merah); }
.adat-huraian { margin: 12px 0 0; color: var(--teks-lembut); font-size: .9375rem; line-height: 1.7; }

.adat-senarai { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--garis-tegas); }

.adat-senarai li { border-bottom: 1px solid var(--garis-tegas); }

.adat-senarai a {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    align-items: center;
    padding: 14px 4px;
    color: inherit;
}

.adat-senarai a:hover .adat-senarai-tajuk { color: var(--merah); }

.adat-senarai-kulit { position: relative; background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r-kecil); overflow: hidden; }
.adat-senarai-kulit::after { content: ""; display: block; padding-bottom: 150%; }
.adat-senarai-kulit img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.adat-senarai-teks { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.adat-senarai-tajuk { font-family: var(--fon-buku); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.adat-senarai-penulis { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--teks-samar); }

/* Video: yang pertama lebih besar, jadi seksyen ini tidak sama dengan grid buku */
.video-terbaru { background: var(--putih); border-top: 1px solid var(--garis); }

@media (min-width: 769px) {
    .video-grid > .video-card:first-child { grid-column: span 2; }
    .video-grid > .video-card:first-child .video-title { font-size: 1.25rem; }
}

/* Pengaki dengan navigasi penuh (telefon tidak lagi ada menu atas) */
.footer-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 20px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--hitam-garis);
}

.footer-nav .footer-link { font-weight: 500; }

/* ==========================================================================
   UI mudah alih (peraturan pemilik): tabbar bawah berkaca, lembar carian
   Tiada burger, tiada nav atas. Label kekal kelihatan. Kaca tanpa bayang.
   ========================================================================== */

.tabbar {
    display: none;
    position: fixed;
    top: auto;
    bottom: 14px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    z-index: 150;
    width: max-content;
    min-width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    flex-wrap: nowrap;
    gap: 4px;
    border-radius: 26px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .62);
    border: 1px solid rgba(0, 0, 0, .08);
    backdrop-filter: blur(40px) saturate(200%) brightness(1.05);
    -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.05);
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .22s ease, border-color .22s ease;
}


@media (max-width: 768px) {
    .tabbar { display: flex; }
    body { padding-bottom: 108px; }
}

.tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 54px;
    padding: 6px 2px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: var(--teks-lembut);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
    position: relative;
    transition: background-color .18s ease, color .18s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}

.tabbar-ikon { display: block; line-height: 1; }
.tabbar-ikon i { font-size: 18px; line-height: 1; }

/* Hover hanya pada peranti bertunjuk - telefon jangan 'terlekat' merah. */
@media (hover: hover) {
    .tabbar-item:hover { color: var(--merah); background: rgba(192, 32, 40, .06); }
}

.tabbar-item:active { transform: scale(.95); }

/* Keadaan semasa: SATU isyarat sahaja - pil merah pejal, ikon + label putih
   (kontras 6.04:1). Tanda kuning lama dibuang: dua penunjuk serentak = bising. */
.tabbar-item.aktif,
.tabbar-item[aria-expanded="true"] {
    color: var(--putih);
    background: var(--merah);
}

.tabbar-label { font-size: .6875rem; line-height: 1.1; }

/* Bar ini melayang di atas dua jenis permukaan: kandungan cerah (kertas) dan
   jalur gelap (hero, footer, jalur CTA). Kaca putih di atas hitam nampak kotor;
   jadi JS menanda `.tabbar-gelap` bila permukaan di belakang bar gelap, dan bar
   bertukar ke resipi kaca gelap (peralihan ada pada blok `.tabbar` di atas). */
.tabbar-gelap {
    background: rgba(11, 11, 12, .66);
    border-color: rgba(255, 255, 255, .14);
}

.tabbar-gelap .tabbar-item { color: rgba(255, 255, 255, .74); }

@media (hover: hover) {
    .tabbar-gelap .tabbar-item:hover { color: var(--kuning); background: rgba(255, 255, 255, .08); }
}

.tabbar-gelap .tabbar-item.aktif,
.tabbar-gelap .tabbar-item[aria-expanded="true"] {
    color: var(--putih);
    background: var(--merah);
}

/* Lembar carian penuh */
.cari-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(11, 11, 12, .5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 14px 14px;
}

.cari-overlay[hidden] { display: none !important; }

.cari-sheet {
    width: 100%;
    max-width: 560px;
    padding: 18px;
    border-radius: 28px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.05);
    backdrop-filter: blur(40px) saturate(200%) brightness(1.05);
    box-shadow: none;
}

.cari-kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cari-tajuk { font-weight: 700; letter-spacing: -0.015em; }

.cari-tutup {
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--garis-tegas);
    border-radius: 50%;
    color: var(--teks);
}

.cari-borang { display: flex; gap: 8px; }

.cari-input {
    flex: 1;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--garis-tegas);
    border-radius: var(--r-kecil);
    background: var(--putih);
    font-size: 1rem;
    min-width: 0;
}

.cari-hantar {
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid var(--merah);
    border-radius: var(--r-kecil);
    background: var(--merah);
    color: var(--putih);
    font-weight: 600;
}

.cari-nota { margin: 16px 0 8px; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teks-samar); font-weight: 600; }
.cari-cip { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 768px) {
    .hero { padding-bottom: 24px; }
    .hero .slide-content {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px 18px 4px;
    }
    .hero .slide-image { order: -1; }
    .hero .slide-image .book-cover-wrapper { max-width: 190px; margin: 0; }
    .hero .slide-title { font-size: clamp(1.7rem, 7.5vw, 2.3rem); }
    .hero .slide-author { margin-bottom: 10px; }
    .hero .slide-synopsis { font-size: .9375rem; margin-bottom: 18px; }
    .hero .slide-info-bottom { display: flex; align-items: center; gap: 14px; }
    .slider-controls { margin-top: 12px; }

        
    .rail { position: relative; }
    .rail-track {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin: 0 -18px;
        padding: 4px 18px 10px;
        /* `scroll-padding` mesti sama dengan padding kiri/kanan. Tanpa ini Chrome
           menyeleraskan kad pertama dengan tepi bekas, jadi rel auto-leret 18px
           dan buku pertama terlekat pada tepi skrin - tiada padding kiri. */
        scroll-padding-left: 18px;
        scroll-padding-right: 18px;
        -webkit-overflow-scrolling: touch;
    }
    .rail-track > * { flex: 0 0 46%; scroll-snap-align: start; }
    /* `.baharu .rail-track` (2 kelas) menang atas `.rail-track` (1 kelas), jadi
       gap desktop 22px masih terpakai di telefon: buku ketiga hanya kelihatan
       2px sedangkan pada rel Paling Laris 18px. Samakan kedua-duanya. */
    .baharu .rail-track { gap: 14px; }
    .baharu .rail-track > *:last-child { margin-right: 4px; }

    .adat-layout { grid-template-columns: 1fr; gap: 24px; }
    .adat-utama-pautan { grid-template-columns: 130px 1fr; gap: 18px; }
    .adat-tajuk { font-size: 1.35rem; }
    .adat-huraian { font-size: .875rem; }

    .footer-nav { gap: 2px 16px; }
}

@media (max-width: 768px) {
    /* Cip kategori boleh ditekan dengan jari: 44px minimum */
    .cip { min-height: 44px; padding: 0 14px; font-size: .875rem; }
    .cari-cip { gap: 10px; }
    .cari-sheet { padding: 16px; }
    .cari-nota { margin-top: 14px; }
}

/* --------------------------------------------------------------------------
   Kawalan slider hero di telefon.
   6 titik (294px) + 3 butang (44px) + jarak = ~450px dalam kotak kandungan 324px
   pada 390px. Dulu butang mengecut jadi 23px dan baris itu MASIH terkeluar 14px
   ke kanan (laman boleh leret ke tepi, anak panah "sebelum" terpotong separuh).
   Titik diberi barisnya sendiri supaya butang kembali 44px penuh.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .slider-controls { flex-wrap: wrap; gap: 10px 12px; }
    .slider-dots { order: 3; flex: 1 0 100%; justify-content: center; }
}

@media (max-width: 375px) {
    /* 6 x 44px = 294px lebih lebar daripada kotak kandungan 320px (284px). */
    .dot { width: 36px; height: 36px; padding: 12px; }
    .dot.active { padding: 12px 8px; }
}

/* ==========================================================================
   Blog + Pengumuman
   Kad: tarikh, tajuk, ringkasan, pautan "Baca". Grid 3 lajur di desktop;
   di telefon seksyen laman utama memakai rel leret (.rail/.rail-track yang
   sama dengan rel buku) manakala halaman senarai jadi satu lajur.
   ========================================================================== */

/* auto-fill + lebar minimum: satu catatan sahaja tidak meregang selebar 1192px.
   `display: grid` WAJIB di sini - tanpanya grid-template-columns diabaikan dan
   kad menjadi selebar bekas (1192px). */
/* Latar berselang-seli: bestsellers (hitam) -> pengumuman (putih) -> blog (kertas)
   -> video (putih). Tanpa ini tiga seksyen putih berturut-turut nampak rata. */
.pengumuman { background: var(--putih); }
.blog { background: var(--kertas); border-top: 1px solid var(--garis); }

/* Pengumuman = PAPAN NOTIS: satu panel berbingkai, baris bertarikh dipisah garis
   halus. Sengaja bukan kad, supaya tidak sama dengan kad blog atau kad video. */
.notis-panel {
    background: var(--kertas);
    border: 1px solid var(--garis);
    border-radius: var(--r-kecil);
    overflow: hidden;
}

.notis-baris {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 18px;
    align-items: baseline;
    padding: 18px 22px;
    border-top: 1px solid var(--garis);
    color: inherit;
    text-decoration: none;
    transition: background-color .18s ease;
}

.notis-baris:first-child { border-top: 0; }

.notis-tarikh {
    color: var(--merah);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.notis-teks { display: block; }

.notis-tajuk {
    display: block;
    color: var(--teks);
    font-family: var(--fon-buku);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.015em;
    transition: color .18s ease;
}

.notis-ringkasan {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 3px;
    color: var(--teks-lembut);
    font-size: .875rem;
    line-height: 1.55;
}

@media (hover: hover) {
    .notis-baris:hover { background: var(--putih); }
    .notis-baris:hover .notis-tajuk { color: var(--merah); }
}

/* Blog = KOLUM EDITORIAL: tiada kad, tiada bingkai - hanya garis atas hitam yang
   jadi merah bila hover. Berbeza daripada papan notis dan kad video. */
.blog .artikel-kad {
    height: auto;
    padding: 18px 0 0;
    background: transparent;
    border: 0;
    border-top: 2px solid var(--hitam);
    border-radius: 0;
}

.blog .artikel-tajuk { font-size: 1.125rem; }
.blog .artikel-baca { padding-top: 14px; }

@media (hover: hover) {
    .blog .artikel-kad:hover { border-top-color: var(--merah); }
}

.artikel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 22px;
}

.artikel-kad {
    display: flex;
    flex-direction: column;
    gap: 7px;
    height: 100%;
    padding: 20px 22px;
    background: var(--putih);
    border: 1px solid var(--garis);
    border-radius: var(--r-kecil);
    color: inherit;
    text-decoration: none;
    transition: border-color .18s ease;
}

.artikel-tarikh {
    color: var(--teks-samar);
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.artikel-tajuk {
    font-family: var(--fon-buku);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: var(--teks);
    transition: color .18s ease;
}

/* Ringkasan dipotong 3 baris supaya semua kad sama tinggi (teks penuh ada di
   halaman catatan). Tanpa ini kad di telefon menjadi 370px tinggi. */
.artikel-ringkasan {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--teks-lembut);
    font-size: .875rem;
    line-height: 1.6;
}

.artikel-baca {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 12px;
    color: var(--merah);
    font-size: .8125rem;
    font-weight: 600;
}

.artikel-baca i { font-size: .7rem; transition: transform .18s ease; }

@media (hover: hover) {
    .artikel-kad:hover { border-color: var(--merah); }
    .artikel-kad:hover .artikel-tajuk { color: var(--merah); }
    .artikel-kad:hover .artikel-baca i { transform: translateX(3px); }
}

.artikel-kad:focus-visible { outline: 2px solid var(--merah); outline-offset: 2px; }

.artikel-kosong { color: var(--teks-lembut); }

/* Satu catatan */
.page-wrapper > .artikel-tarikh { display: block; margin-bottom: 10px; }

.artikel-balik { margin: 44px 0 0; padding-top: 22px; border-top: 1px solid var(--garis); }
.artikel-balik a { color: var(--merah); font-weight: 600; }

/* Halaman senarai: paging bawah */
.paging {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--garis);
}

.paging-pautan {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--garis-tegas);
    border-radius: var(--r-kecil);
    color: var(--teks);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.paging-pautan:hover { border-color: var(--merah); color: var(--merah); }
.paging-mati { color: var(--teks-samar); border-color: var(--garis); }
.paging-kiraan { color: var(--teks-samar); font-size: .875rem; font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
    .artikel-grid { grid-template-columns: 1fr; gap: 14px; }
    /* Seksyen di laman utama ialah rel leret (.rail-track) - peraturan di atas
       menukarnya jadi grid, jadi ini mengembalikannya kepada rel. */
    .rail-track.artikel-grid { display: flex; }

    /* Papan notis: tarikh dapat barisnya sendiri. */
    .notis-baris { grid-template-columns: 1fr; gap: 5px; padding: 15px 18px; }
    .blog .artikel-kad { padding: 14px 0 0; }
    .artikel-kad { padding: 16px 18px; }
    .artikel-tajuk { font-size: 1rem; }
    .paging { justify-content: center; }
}

/* ==========================================================================
   Rel buku di desktop: tingkahnya disamakan dengan telefon.
   Sebelum ini `.rail-track` ialah grid di desktop, jadi kad membalut ke baris
   kedua (Paling Laris: 5 kad + 1 kad bersendirian).

   Percubaan pertama (kad 190px + gap 22px + snap `mandatory`) GAGAL: julat
   boleh lera hanya 1250 - 1192 = 58px, sedangkan satu pitch kad = 212px. Snap
   `mandatory` sentiasa melompat ke kedudukan snap terdekat, dan satu-satunya
   kedudukan snap dalam julat itu ialah 0 - jadi setiap leretan kecil terus
   dipulangkan ke 0: rel nampak tersekat dan bergegar, bukan meleret.
   (Diukur: set `scrollLeft` 20 -> dibaca 0; 30 -> 58.)

   Sekarang: kad 260px + gap 24px -> julat lera 488px (1.72 pitch), 4 kad penuh
   kelihatan + 80px kad ke-5 "mengintai", dan snap `proximity` (bukan
   `mandatory`) supaya leretan kecil tidak dipaksa balik. Telefon tidak diubah
   (blok @media max-width 768px di atas kekal) dan halaman senarai
   (.artikel-grid di /blog dan /pengumuman) tidak terjejas: hanya `.rail-track`
   di laman utama yang ditukar.
   ========================================================================== */

@media (min-width: 769px) {
    .rail-track {
        display: flex;
        gap: 24px;
        overflow-x: auto;
        overflow-y: hidden;
        /* `proximity`, bukan `mandatory`: dengan julat lera yang pendek,
           `mandatory` memulangkan setiap leretan kecil ke kedudukan snap
           terdekat dan rel nampak tersekat. */
        scroll-snap-type: x proximity;
        /* padding atas: kad naik 2px bila hover, jadi ruang perlu ada kalau
           tidak tepi atasnya terpotong oleh bekas yang menatal. */
        padding: 4px 0 6px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        cursor: grab;
    }

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

    .rail-track > * { flex: 0 0 260px; scroll-snap-align: start; }

    /* Kad artikel lebih lebar (3 kad), sama seperti grid asalnya. */
    .rail-track.artikel-grid > * { flex: 0 0 380px; }

    /* Semasa drag: snap dimatikan supaya rel ikut tetikus, bukan melompat. */
    .rail-track.leret-aktif { cursor: grabbing; scroll-snap-type: none; }

    .rail-track:focus-visible { outline: 3px solid var(--merah); outline-offset: 4px; }
}

/* ==========================================================================
   Gambar tidak boleh ditarik keluar dari laman.
   Kulit buku berada di dalam <a>, dan <a> memang draggable secara lalai, jadi
   tekan-tarik di atas kulit memulakan drag imej ASLI pelayar: penunjuk dirampas
   (rel leret berhenti selepas satu langkah, lasak) dan pelawat boleh menyeret
   fail itu ke desktop. Pemblokiran sebenar berlaku dalam `script.js`
   (`dragstart` -> preventDefault); peraturan ini mematikannya di peringkat
   penuding untuk pelayar WebKit dan menghilangkan kursor "seret gambar".
   NOTA: peraturan `-webkit-user-drag: none` SAHAJA tidak mencukupi - diukur,
   `dragstart` masih tercetus pada <img> kerana elemen draggable ialah <a>.
   ========================================================================== */

img { -webkit-user-drag: none; }