/* ==============
    IMPORT FONTS
   ============== */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Playfair+Display:wght@700&family=Poppins:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

/* ======================
    ROOT & GLOBAL STYLES
   ====================== */
:root {
    --brand-red: #e60000;
    --brand-dark: #1a1a1a;
    --white: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Poppins', sans-serif !important;
    color: var(--brand-dark);
    overflow-x: hidden;
    background-color: var(--white);
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section { padding: 100px 0; }
.text-center { text-align: center; }
.text-white { color: var(--white); }
.bg-red { background-color: var(--brand-red); }

/* ========================
    TYPOGRAPHY & ANIMATION
   ========================= */
.font-script { font-family: 'Dancing Script', cursive !important; }
.font-display { font-family: 'Poppins', sans-serif !important; }

.section-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 50px;
    text-transform: uppercase;
    color: var(--brand-red);
}

#store h2, 
#contact h2, 
.store-main-title, 
.contact-site h2 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active-scroll {
    opacity: 1;
    transform: translateY(0);
}

body.mode-fokus #home, 
body.mode-fokus .section {
    display: none;
}

body.mode-fokus main section.active-section {
    display: block !important;
    animation: fadeIn 0.5s ease;
}

body.mode-contact #home,
body.mode-contact main {
    display: none;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* ===================================
    MEDIA QUERIES (GLOBAL RESPONSIVE)
   =================================== */
@media (max-width: 1024px) {
    .container { padding: 0 15px; }
    
    .section-title { 
        font-size: 2.8rem; 
        text-align: center;
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .section { padding: 60px 0; }
    
    .section-title, 
    .service-main-title, 
    .store-main-title, 
    .contact-site h2 { 
        font-size: 2.2rem; 
        text-align: center;
    }

    .btn-shop, .btn-send { 
        width: 100%; 
        padding: 15px 20px; 
    }
}

/* ================================
    TAMBAHAN KHUSUS FIX RESPONSIVE
   ================================ */
.container {
    width: 100%;
    max-width: 1200px;
}

.section {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .section-title {
        font-size: 3rem;
    }
    
    .container {
        padding: 0 30px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 20px;
        margin: 0 auto;
    }

    .btn-shop, .btn-send, .btn-book {
        font-size: 1rem;
        display: block;
        text-align: center;
    }
}

@media (max-width: 768px) {
    html, body {
        width: 100%;
        overflow-x: hidden;
        position: relative;
    }
    
    .section {
        padding: 50px 0;
        overflow: hidden;
    }
}