/* =========================================================
   assets/css/style.css
   Yayasan Tunas Harapan Pertiwi — Design System
   ========================================================= */

/* ── Material Symbols ── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    user-select: none;
}

/* ── Base Body ── */
body {
    background-color: #faf8ff;
    color: #131b2e;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Custom Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #faf8ff; }
::-webkit-scrollbar-thumb { background: #c5c5d3; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4059aa; }

/* ── Hero Gradient ── */
.hero-gradient {
    background: linear-gradient(to right, rgba(0, 35, 111, 0.88) 0%, rgba(0, 35, 111, 0.35) 100%);
}

/* ── Card Shadow ── */
.card-shadow {
    box-shadow: 0 4px 20px -2px rgba(0, 35, 111, 0.12);
}

/* ── Glass Card ── */
.glass-card {
    background: rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.70);
}

/* ── Mobile Nav Animation ── */
#mobile-nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
#mobile-nav.open {
    max-height: 520px;
}

/* ── Hamburger Icon Animation ── */
#hamburger-icon .bar {
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform-origin: center;
}
#hamburger-icon.open .bar-top    { transform: translateY(10px) rotate(45deg); }
#hamburger-icon.open .bar-mid    { opacity: 0; transform: scaleX(0); }
#hamburger-icon.open .bar-bottom { transform: translateY(-10px) rotate(-45deg); }

/* ── Hero Slider ── */
.slide { transition: opacity 0.9s ease; }
.slide.active { opacity: 1 !important; z-index: 10; pointer-events: auto; }
.slide.inactive { opacity: 0 !important; z-index: 0; pointer-events: none; }

/* ── Progress Bar Glow ── */
.progress-bar-glow {
    box-shadow: 0 0 12px rgba(0, 108, 73, 0.25);
}

/* ── Smooth Line-Clamp ── */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── No-Scrollbar ── */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ── Donation Amount Buttons ── */
.amount-btn.selected {
    background-color: #00236f;
    color: #ffffff;
    border-color: #00236f;
}

/* ── Animate Fade-in-up ── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fadeInUp 0.7s ease forwards;
}

/* ── Testimonial Carousel ── */
.testimonial-slide {
    display: none;
}
.testimonial-slide.active {
    display: flex;
}

/* ── Responsive Hero Height ── */
@media (max-width: 767px) {
    #hero-slider { height: 620px !important; }
}
@media (max-width: 400px) {
    #hero-slider { height: 560px !important; }
}

/* ── Sticky Donation Panel ── */
.donation-sticky { top: 100px; }

/* ── Artikel Content ── */
.article-content h2 { font-size: 1.5rem; font-weight: 700; margin: 1.5rem 0 0.75rem; color: #00236f; }
.article-content h3 { font-size: 1.25rem; font-weight: 600; margin: 1.25rem 0 0.5rem; color: #131b2e; }
.article-content p  { margin-bottom: 1rem; line-height: 1.75; color: #444651; }
.article-content ul, .article-content ol { margin: 0.75rem 0 1rem 1.5rem; color: #444651; }
.article-content li { margin-bottom: 0.4rem; line-height: 1.6; }
.article-content blockquote {
    border-left: 4px solid #006c49;
    padding: 0.75rem 1rem;
    background: #f2f3ff;
    margin: 1.5rem 0;
    border-radius: 0 0.5rem 0.5rem 0;
    font-style: italic;
    color: #444651;
}
.article-content img {
    width: 100%;
    border-radius: 0.75rem;
    margin: 1.5rem 0;
}

/* ── Admin Sidebar Layout (fallback if admin.css missing) ── */
.admin-sidebar {
    width: 260px;
    flex-shrink: 0;
}