/*
 * File: assets/css/style.css
 * Info: Kumpulan style kustom untuk Tugu Cerita.
 * Dibuat: 25-10-2025
 * Update: 26-10-2025 (Mengubah rasio aspek 2:3 untuk cover portrait)
 * Versi: 1.2 (Rasio Portrait)
 */

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8f9fa; /* Warna latar belakang netral */
}

/* Mendorong footer ke bagian bawah halaman (Sticky Footer) */
/* (Kita akan membiarkan main diatur per-halaman) */


/* ===== Hero Section (di index.php) ===== */
.hero-section {
    /*
     * Kita gunakan gradien biru primer Bootstrap, tapi sedikit lebih gelap
     * untuk kontras yang lebih baik dengan teks putih.
     */
    background: linear-gradient(90deg, rgba(13,110,253,1) 0%, rgba(50,130,255,1) 100%);
    padding: 5rem 0;
}

/* [DIPERBARUI] Bayangan teks dibuat lebih kuat agar lebih jelas */
.hero-section h1.display-4,
.hero-section p.lead {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); /* Bayangan hitam transparan (lebih kuat) */
}


/* ===== Card (Kartu) Buku ===== */
.card {
    border-radius: 0.75rem; /* Sudut lebih bulat (rounded-4) */
    border: none;
    transition: all 0.2s ease-in-out;
}

.card-hover:hover {
    transform: translateY(-5px); /* Efek mengangkat saat di-hover */
    box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
}

/* [DIPERBARUI] Mengatur rasio aspek 2:3 (Portrait) untuk cover buku */
.card-img-container {
    overflow: hidden; /* Memastikan gambar tidak keluar dari sudut bulat */
    background-color: #eee; /* Tetap ada untuk placeholder */
    aspect-ratio: 2 / 3; /* L:T = 2:3 (Portrait/Tegak) (WAJIB) */
}

.card-img-container img {
    width: 100%;
    height: 100%; /* (WAJIB) Memenuhi container */
    object-fit: cover; /* (WAJIB) Memotong gambar agar pas tanpa distorsi */
}

.card-title {
    /* Kita gunakan class text-primary di HTML saja agar lebih fleksibel */
    /* color: #0d6efd; */ 
}

/* Placeholder untuk avatar penulis (di kartu buku) */
.avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #0d6efd; /* Biru primer */
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
}


.navbar-brand {
    font-size: 1.5rem;
}

.app-navbar-logo {
    object-fit: cover;
    flex-shrink: 0;
}

.btn-primary {
    background-color: #0d6efd;
    border: none;
}

/* [DIPERBARUI] Style untuk Mode Baca (baca_bab.php) */
/* * Wrapper ini memastikan konten baca tidak terlalu lebar di layar besar,
 * dan memberikan latar belakang putih yang bersih.
 */
.reading-container-wrapper {
    background-color: #ffffff;
    width: 100%;
}

/* * Container utama untuk teks bab. 
 * Kita gunakan .container standar bootstrap, 
 * tapi juga pastikan dia ada di tengah. 
 */
.reading-container {
    max-width: 768px; /* Lebar optimal untuk membaca (mirip Medium.com) */
    margin-left: auto;
    margin-right: auto;
}

.chapter-header h1 {
    font-weight: 700; /* Judul bab lebih tebal */
    line-height: 1.3;
}

/* * Style untuk konten bab itu sendiri (output dari TinyMCE)
 */
.chapter-content {
    font-size: 1.1rem; /* Ukuran font lebih besar agar nyaman dibaca */
    line-height: 1.7;  /* Jarak antar baris lebih lega */
    color: #212529; /* Warna teks hitam standar */
}

.chapter-content p {
    margin-bottom: 1.25rem; /* Jarak antar paragraf */
}

.chapter-content img {
    max-width: 100%; /* Pastikan gambar responsif */
    height: auto;
    border-radius: 0.5rem; /* Sudut bulat untuk gambar */
    margin-top: 1rem;
    margin-bottom: 1.25rem;
    display: block; /* Agar margin auto berfungsi */
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Bayangan halus */
}

.chapter-content blockquote {
    border-left: 4px solid #0d6efd; /* Garis kutipan biru primer */
    padding-left: 1.5rem;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    color: #495057; /* Warna kutipan sedikit abu-abu */
}

.chapter-content h1,
.chapter-content h2,
.chapter-content h3,
.chapter-content h4,
.chapter-content h5,
.chapter-content h6 {
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1.25rem;
}