@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* Custom CSS for SRAI Qhalif - Premium Overhaul */
body {
    background-color: #FAF7F0; /* Rich cream */
    color: #2D3748;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.font-display {
    font-family: 'Cinzel', serif;
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    letter-spacing: -0.025em;
}

body, p, span, a, li, .font-body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.625;
}

/* Base Colors */
.bg-primary { background-color: #072B20; }
.bg-primary-dark { background-color: #051F17; }
.text-gold { color: #C59B27; }
.bg-gold { background-color: #C59B27; }
.border-gold { border-color: #C59B27; }

/* Enhanced Color Palette (Jewel Tones & Gold Glow) */
.bg-emerald-gradient { background: linear-gradient(135deg, #072B20 0%, #0F4C3A 50%, #155E49 100%); }
.bg-gold-gradient { background: linear-gradient(135deg, #F59E0B, #D97706, #B45309); }
.text-gold-gradient { background: linear-gradient(135deg, #F59E0B, #D97706, #B45309); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.bg-soft-mint { background-color: #F0FDF4; }
.bg-soft-gold { background-color: #FEFCE8; }
.bg-rich-cream { background-color: #FAF7F0; }

/* Badges & Pills */
.badge-emerald { background-color: #D1FAE5; color: #065F46; border: 1px solid #34D399; }
.badge-amber { background-color: #FEF3C7; color: #92400E; border: 1px solid #FBBF24; }
.badge-indigo { background-color: #E0E7FF; color: #3730A3; border: 1px solid #818CF8; }
.badge-ruby { background-color: #FCE7F3; color: #9D174D; border: 1px solid #F472B6; }

/* Elevated Card Design */
.card-institusi {
    background-color: #ffffff;
    border: 1px solid rgba(15, 76, 58, 0.08);
    border-radius: 12px;
    box-shadow: 0 10px 30px -5px rgba(7, 43, 32, 0.08), 0 4px 6px -2px rgba(7, 43, 32, 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-institusi:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px -5px rgba(197, 155, 39, 0.2);
    border-color: rgba(197, 155, 39, 0.3);
}

.card-border-top-gold { border-top: 4px solid #C59B27; }
.card-border-top-emerald { border-top: 4px solid #0F4C3A; }

.arch-card {
    border-radius: 1rem;
    border-top-left-radius: 4rem;
    border-top-right-radius: 4rem;
    overflow: hidden;
}

/* Islamic Geometric Pattern Background (Girih/Arabesque) */
.bg-islamic-pattern {
    background-color: #072B20;
    background-image: linear-gradient(rgba(7, 43, 32, 0.93), rgba(7, 43, 32, 0.93)), url("../images/background/arabic-geometric-pattern-background.jpg");
    background-size: 500px;
    background-repeat: repeat;
    background-attachment: fixed;
}
.bg-islamic-pattern-light {
    background-color: #FAF7F0;
    background-image: linear-gradient(rgba(250, 247, 240, 0.96), rgba(250, 247, 240, 0.96)), url("../images/background/arabic-geometric-pattern-background.jpg");
    background-size: 500px;
    background-repeat: repeat;
    background-attachment: fixed;
}

/* High Contrast Image Frames */
.img-frame-premium {
    padding: 8px;
    background-color: #ffffff;
    border: 1px solid rgba(197, 155, 39, 0.2);
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px #C59B27, 0 10px 25px -5px rgba(7, 43, 32, 0.1);
}

/* Animations & Effects */
.fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pulse-badge {
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(197, 155, 39, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(197, 155, 39, 0); }
    100% { box-shadow: 0 0 0 0 rgba(197, 155, 39, 0); }
}

.shimmer-effect {
    position: relative;
    overflow: hidden;
}

.shimmer-effect::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(30deg);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) rotate(30deg); }
    100% { transform: translateX(100%) rotate(30deg); }
}

/* Accordion */
.accordion-icon { transition: transform 0.3s ease; }
.accordion-header.active .accordion-icon { transform: rotate(45deg); }
.accordion-content-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}


/* Shimmer Text Effect for Preloader */
.shimmer-effect-text {
    background: linear-gradient(90deg, rgba(197, 155, 39, 0.5) 0%, rgba(255, 230, 150, 1) 50%, rgba(197, 155, 39, 0.5) 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmer 2s linear infinite;
}
@keyframes shimmer {
    to { background-position: 200% center; }
}

/* Hero Specific Styles */
.hero-gradient {
    background: linear-gradient(180deg, rgba(7, 43, 32, 0.88) 0%, rgba(7, 43, 32, 0.82) 50%, rgba(7, 43, 32, 0.96) 100%);
}

@keyframes slowZoom {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1.0); }
}

.animate-slow-zoom {
    animation: slowZoom 30s ease-in-out infinite;
}