/* ============================================== */
/* ---        STYLE GLOBAL & DASAR            --- */
/* ============================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root {
    --primary-color: #3498db;
    --secondary-color: #f1c40f;
    --light-bg: #f4f6f9;
    --text-color: #2c3e50;
    --white-color: #ffffff;
    --header-height: 60px;
    --nav-height: 65px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--light-bg);
    color: var(--text-color);
    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom));
}

/* ============================================== */
/* --- HEADER & NAVIGASI (DIPERBARUI)         --- */
/* ============================================== */

.app-header {
    background: linear-gradient(135deg, var(--primary-color), #85c1e9);
    color: var(--white-color);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    padding-top: env(safe-area-inset-top);
    height: calc(var(--header-height) + env(safe-area-inset-top));
}
.header-text-container { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.header-title { font-size: 1.4rem; font-weight: 700; }
.header-subtitle { font-size: 0.8rem; font-weight: 400; opacity: 0.9; }
.app-header .back-button { position: absolute; left: 15px; font-size: 1.8rem; color: var(--white-color); text-decoration: none; top: 50%; transform: translateY(-50%); padding-top: env(safe-area-inset-top); }

/* ==== BAGIAN NAVIGASI BAWAH DIPERBARUI DI SINI ==== */
.bottom-nav {
    background: linear-gradient(135deg, #85c1e9, var(--primary-color)); /* Warna gradien seperti header */
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.15); /* Shadow lebih terlihat */
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--nav-height) + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Garis batas atas */
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7); /* Teks & Ikon tidak aktif: putih transparan */
    flex-grow: 1;
    padding: 8px 0;
    transition: color 0.3s ease;
}
.nav-item .nav-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    /* Mengubah ikon (asumsi dari hitam) menjadi putih transparan */
    filter: brightness(0) invert(1) opacity(0.7);
    transition: filter 0.3s ease;
}
.nav-item span { font-size: 0.75rem; }

/* Style untuk item yang aktif */
.nav-item.active {
    color: var(--white-color); /* Teks aktif: putih solid */
}
.nav-item.active .nav-icon {
    filter: brightness(0) invert(1) opacity(1); /* Ikon aktif: putih solid */
}
/* ==== AKHIR DARI BAGIAN YANG DIPERBARUI ==== */


/* ============================================== */
/* --- LAYOUT KONTEN UTAMA & HALAMAN          --- */
/* ============================================== */

.main-content {
    padding-top: calc(var(--header-height) + env(safe-area-inset-top));
}

body:not(.page-beranda) .main-content {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-top: calc(var(--header-height) + env(safe-area-inset-top) + 20px);
    text-align: center;
}

.comic-list, .comic-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; text-align: left; }
.comic-card { background-color: var(--white-color); border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.07); overflow: hidden; text-decoration: none; color: var(--text-color); }
.comic-card img { width: 100%; height: 160px; object-fit: cover; }
.comic-card-title { padding: 10px; font-weight: 600; font-size: 0.9rem; }
.comic-reader img { max-width: 100%; height: auto; margin-bottom: 5px; border-radius: 8px; }

/* ============================================== */
/* --- STYLE KHUSUS HALAMAN BERANDA           --- */
/* ============================================== */
body.page-beranda .main-content { padding-top: calc(var(--header-height) + env(safe-area-inset-top)); }
body.page-beranda .beranda-container { padding-bottom: 20px; }

.hero-swiper { width: 100%; height: 250px; margin-bottom: 30px; }
.swiper-slide { background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 25px; color: white; }
.slide-content { text-align: left; max-width: 90%; }
.slide-content .badge { background-color: var(--secondary-color); color: var(--text-color); padding: 5px 12px; border-radius: 15px; font-size: 0.8rem; font-weight: 700; margin-bottom: 8px; display: inline-block; }
.slide-content h2 { font-size: 1.8rem; line-height: 1.2; text-shadow: 2px 2px 4px rgba(0,0,0,0.6); margin: 0 0 15px 0; }
.slide-content .btn-baca { background-color: var(--white-color); color: var(--primary-color); padding: 10px 20px; border-radius: 20px; text-decoration: none; font-weight: 700; }
.swiper-pagination-bullet { background-color: rgba(255, 255, 255, 0.6); width: 8px; height: 8px; }
.swiper-pagination-bullet-active { background-color: var(--white-color); width: 20px; border-radius: 5px; }

.comic-section { padding: 0 20px; margin-bottom: 30px; }
.section-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 15px; text-align: left; }
.horizontal-scroll-container { display: flex; overflow-x: auto; gap: 15px; padding-bottom: 15px; -webkit-overflow-scrolling: touch; }
.horizontal-scroll-container::-webkit-scrollbar { display: none; }
.horizontal-scroll-container { -ms-overflow-style: none; scrollbar-width: none; }
.comic-card-horizontal { flex: 0 0 140px; width: 140px; text-decoration: none; color: var(--text-color); }
.comic-card-horizontal img { width: 100%; height: 190px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.07); }
.card-title-horizontal { font-size: 0.9rem; font-weight: 600; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }