html, body {
    /* 1. Paksa lebar maksimal 100% dari layar */
    max-width: 100%;
    width: 100%;
    
    /* 2. POTONG apapun yang keluar dari sisi kanan/kiri */
    overflow-x: hidden !important;
    
    /* 3. Pastikan posisi relatif agar absolute children patuh */
    position: relative;
    
    /* 4. Fix tambahan untuk mobile browser bandel */
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch; /* Smooth scroll vertikal tetap jalan */
}

.navbar, nav {
    overflow: visible !important;
}

/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   1.  VARIABLES & RESET
   2.  UTILITIES & ANIMATIONS (Keyframes)
   3.  TYPOGRAPHY (Headings, Section Titles)
   4.  CUSTOM CURSOR
   5.  COMPONENTS (Buttons, Dividers, Badges)
   6.  NAVIGATION (Navbar & Mobile Menu)
   7.  HERO SECTION (Mascot & Layout)
   8.  POP CARDS SECTION (Intro/Features)
   9.  PROCESS SECTION (Ice Cream Swirl)
   10. PORTFOLIO SECTION (Polaroids & Sticky Notes)
   11. ABOUT SECTION (Profile Frame, Skills)
   12. PRICING SECTION (Menu Board & Golden Ticket)
   13. CONTACT SECTION (Order Pad)
   14. FOOTER (Chocolate Pool)
   15. FLOATING ELEMENTS (WhatsApp)
   ========================================================================== */

/* =========================================
   1. VARIABLES & RESET
   ========================================= */
:root {
    /* Palette: Vanilla, Cream, and Vibrant Toppings */
    --bg-body: #FFFBF5; /* Soft Vanilla */
    --bg-alt: #F2EBE5;  /* Darker Cream */
    --text-main: #2D2D2D; /* Dark Grey */
    --text-light: #666666;
    
    --primary: #FF6B9D; /* Melting Pink */
    --secondary: #4CC9F0; /* Cyan Blue */
    --accent: #F7B731; /* Waffle Gold */
    --purple: #7048E8; /* Deep Purple */

    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.9);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    
    --font-head: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none; /* Custom cursor active */
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

ul { list-style: none; }
a { text-decoration: none; color: inherit; }

/* =========================================
   2. UTILITIES & ANIMATIONS
   ========================================= */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-padding {
    padding: 100px 0;
    position: relative;
}

/* --- KEYFRAMES --- */
@keyframes floatMascot {
    0%, 100% { transform: translateY(-50%) rotate(0deg); }
    50% { transform: translateY(calc(-50% - 20px)) rotate(2deg); }
}

@keyframes floatMascotMobile {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
}

@keyframes floatSprinkle {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        /* Geser ke atas dan kanan dikit */
        transform: translateY(-50px) translateX(20px) rotate(180deg);
    }
    100% {
        /* Terus ke atas */
        transform: translateY(-100px) translateX(0px) rotate(360deg);
    }
}

@keyframes pulseBlob {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes creamyFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes badgeBounce {
    0%, 100% { transform: rotate(5deg) translateY(0); }
    50% { transform: rotate(5deg) translateY(-10px); }
}

@keyframes goldShimmer {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}

@keyframes floatSticker {
    0%, 100% { transform: translateY(0) rotate(-10deg); }
    50% { transform: translateY(-15px) rotate(-5deg); }
}

@keyframes shadowScale {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.3; }
    50% { transform: translateX(-50%) scale(0.7); opacity: 0.1; }
}

@keyframes pulseText {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes bounceArrow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

@keyframes wiggle {
    0%, 90% { transform: rotate(0); }
    92% { transform: rotate(-10deg); }
    94% { transform: rotate(10deg); }
    96% { transform: rotate(-10deg); }
    98% { transform: rotate(10deg); }
    100% { transform: rotate(0); }
}

@keyframes floatUp {
    from { transform: translateY(100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* =========================================
   3. TYPOGRAPHY
   ========================================= */
h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-main);
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    display: inline-block; 
    font-family: 'Titan One', cursive; 
    
    /* 1. KUNCI UTAMA: Matikan Fake Bold di HP */
    /* Ini yang bikin font di HP terlihat beda/jelek sebelumnya */
    font-weight: 400 !important; 
    
    font-size: 4rem; 
    color: #FF5588; 
    
    /* Stroke Coklat */
    -webkit-text-stroke: 4px #422016; 
    paint-order: stroke fill;
    
    /* Shadow Desktop (Asli Pilihanmu) */
    text-shadow: 
        6px 6px 0px #422016, 
        0px 0px 30px rgba(255, 85, 136, 0.4);
        
    margin-bottom: 25px;
    position: relative;
    z-index: 10;
    transform: rotate(-2deg);
    letter-spacing: 2px;
    line-height: 1.2;
    
    /* Animasi (Opsional jika ingin shine, perlu teknik khusus background-clip) */
    /* Untuk saat ini kita matikan dulu agar style solid-nya kembali sempurna */
    /* animation: fadeInUp 0.8s ease-out 0.3s forwards; */
opacity: 0;
animation:
fadeInUp 0.8s ease-out 0.3s forwards,
shineFlow 4s linear infinite;
}

.section-title::after {
    /* 1. KOSONGKAN TEXT (Hapus emoji bintang lama) */
    content: ''; 
    
    display: inline-block;
    position: relative;
    
    /* 2. MASUKKAN GAMBAR PNG */
    background-image: url('assets/bintang.png');
    background-size: contain; /* Agar gambar pas di dalam kotak */
    background-repeat: no-repeat;
    background-position: center;
    
    /* 3. ATUR UKURAN GAMBAR (Sesuaikan besarnya di sini) */
    width: 60px;  /* Lebar Bintang */
    height: 60px; /* Tinggi Bintang */
    
    /* 4. ATUR POSISI */
    top: -35px;       /* Naikkan ke atas */
    margin-left: -20px; /* Tarik ke kiri biar nempel huruf terakhir */
    
    /* 5. RESET STYLE FONT LAMA */
    text-shadow: none;
    -webkit-text-stroke: 0;
    
    /* Tambahkan bayangan pada gambar (opsional, biar pop-up) */
    filter: drop-shadow(3px 3px 0px rgba(66, 32, 22, 0.2));
    
    /* 6. ANIMASI GERAK (Tetap Sama) */
    animation: starFloat 3s ease-in-out infinite alternate;
}

@keyframes starFloat {
    0% {
        /* Posisi Awal: Miring dikit */
        transform: rotate(10deg) scale(1) translate(0, 0);
        opacity: 0.8; /* Sedikit redup */
    }
    100% {
        /* Posisi Akhir: Muter ke kanan, membesar dikit, geser ke atas */
        transform: rotate(30deg) scale(1.2) translate(5px, -10px);
        opacity: 1; /* Terang penuh */
    }
}

.section-desc {
    font-size: 1.3rem;
    font-weight: 600;
    color: #422016;
    max-width: 600px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 20px;
    border-radius: 20px;
    border: 2px solid #422016;
    box-shadow: 4px 4px 0 rgba(66, 32, 22, 0.1);
}

/* =========================================
   4. CUSTOM CURSOR
   ========================================= */
   
   body, a, button, input, textarea {
    cursor: none !important;
}

.cursor-dot,
.cursor-outline {
    position: fixed;
    top: 0; left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
}

.cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 10px; height: 10px;
    background-color: #FF5588; /* Pink Strawberry */
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(255, 85, 136, 0.5); /* Glow */
}

.cursor-outline {
    position: fixed;
    top: 0; left: 0;
    width: 40px; height: 40px;
    
    /* Border Pink Tipis */
    border: 2px solid rgba(255, 85, 136, 0.5);
    border-radius: 50%;
    
    /* Efek Kaca Buram (Blurry Glass) */
    background: rgba(255, 85, 136, 0.05);
    backdrop-filter: blur(2px);
    
    z-index: 9998; /* Di bawah dot */
    pointer-events: none;
    
    /* Posisi awal di tengah */
    transform: translate(-50%, -50%);
    
    /* Transisi Halus untuk ukuran & warna (Bukan untuk gerak) */
    transition: width 0.2s, height 0.2s, background-color 0.2s, border-color 0.2s;
}

body.hovering .cursor-outline {
    width: 70px; height: 70px; /* Membesar */
    background: rgba(255, 85, 136, 0.15); /* Lebih pink */
    border-color: transparent; /* Border hilang */
    backdrop-filter: blur(0px); /* Clear */
}
body.clicking .cursor-outline {
    width: 30px; height: 30px;
    background: rgba(255, 85, 136, 0.4);
    transition: 0.1s;
}

@media (max-width: 968px) {
    .cursor-dot, .cursor-outline { display: none !important; }
    body, a, button { cursor: auto !important; }
}

/* =========================================
   5. COMPONENTS (Buttons, Dividers)
   ========================================= */
/* --- Buttons Global --- */
.btn {
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    transition: var(--transition);
    display: inline-block;
    border: none;
}

.btn-primary, 
.btn-secondary {
    height: 60px !important; 
    min-height: 60px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    font-size: 1.2rem !important;
    box-sizing: border-box !important; 
}

/* Primary Button (Strawberry Pink) */
.btn-primary {
    position: relative;
    background: #FF5588; 
    font-family: 'Titan One', cursive;
    color: #FFFFFF;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2); 
    padding: 0 40px !important;
    border-radius: 50px;
    box-shadow: 0 6px 0 #422016, 0 15px 20px rgba(0,0,0,0.2);
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
    cursor: pointer;
    overflow: hidden;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 8px; left: 15px;
    width: 35px; height: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(-20deg);
    pointer-events: none;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 15px; left: 55px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

.btn-primary:hover {
    background: #FF6B99; 
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #422016, 0 20px 30px rgba(0,0,0,0.3);
}

.btn-primary:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #422016, 0 0 0 rgba(0,0,0,0);
}

/* Secondary Button (See Flavors) */
.btn-secondary {
    position: relative;
    background-color: #FFFFFF;
    color: #422016; 
    border: 3px solid #422016; 
    font-family: 'Titan One', cursive; 
    letter-spacing: 0.5px;
    padding: 0 35px !important;
    border-radius: 50px;
    box-shadow: 0 6px 0 #422016, 0 15px 20px rgba(0,0,0,0.1);
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
    cursor: pointer;
    overflow: hidden;
    gap: 10px;
    text-decoration: none;
}

.btn-secondary:hover {
    background-color: #FFF9C4;
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #422016, 0 20px 30px rgba(0,0,0,0.2);
}

.btn-secondary:hover i { transform: translateX(5px); }
.btn-secondary:active { transform: translateY(6px); box-shadow: 0 0 0 #422016, 0 0 0 rgba(0,0,0,0); }

/* Nav Button (Mint) */
.btn-nav {
    position: relative;
    border: none;
    background: linear-gradient(to bottom, #4CC9F0 0%, #4361EE 100%);
    font-family: 'Titan One', cursive;
    color: #FFFFFF;
    font-size: 1rem;
    letter-spacing: 1px;
    text-shadow: 1.5px 1.5px 0 #3F37C9;
    padding: 10px 30px;
    border-radius: 50px;
    box-shadow: 0 5px 0 #3F37C9, 0 10px 20px rgba(67, 97, 238, 0.3);
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 10;
    cursor: pointer;
    overflow: hidden;
}

.btn-nav::after {
    content: '';
    position: absolute;
    top: 5px; left: 10px;
    width: 20px; height: 10px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    transform: rotate(-20deg);
}

.btn-nav:hover {
    transform: translateY(-2px);
    background: linear-gradient(to bottom, #5AD2F4 0%, #4895EF 100%);
    box-shadow: 0 7px 0 #3F37C9, 0 15px 25px rgba(67, 97, 238, 0.4);
}
.btn-nav:active { transform: translateY(5px); box-shadow: 0 0 0 #3F37C9, 0 0 0 rgba(0,0,0,0); }

/* Outline Button */
.btn-outline {
    background: transparent;
    border: 2px solid var(--purple);
    color: var(--purple);
    width: 100%;
    margin-top: 20px;
}
.btn-outline:hover { background: var(--purple); color: white; }

/* Giant Button (Pricing) */
.btn-giant {
    font-size: 1.5rem !important; 
    padding: 18px 50px !important;
    white-space: nowrap; 
    width: auto !important; 
    min-width: 300px; 
    max-width: 90%; 
    box-shadow: 0 10px 0 #422016, 0 20px 20px rgba(0,0,0,0.1) !important;
    display: inline-block; 
}
.btn-giant:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 0 #422016, 0 25px 30px rgba(0,0,0,0.2) !important;
}
.btn-giant:active { transform: translateY(10px); box-shadow: 0 0 0 #422016 !important; }

/* --- Dividers --- */
.section-divider, .wave-divider, .drip-divider {
    position: absolute;
    left: 0; width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 2;
    pointer-events: none;
}

/* Specific positioning for standard dividers */
.section-divider { top: 0; transform: translateY(-99%); }
.wave-divider, .drip-divider { bottom: -1px; z-index: 1; }

.section-divider svg, .wave-divider svg, .drip-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
}

.section-divider svg { height: 120px; }
.wave-divider svg, .drip-divider svg { height: 100px; }

/* Divider Colors */
.wave-divider path { fill: var(--bg-body); }
.top-curve svg { height: 150px; fill: #FFFFFF; }
.top-paper svg { height: 50px; fill: #FFFBF0; filter: drop-shadow(0 -5px 3px rgba(66, 32, 22, 0.1)); }

#portfolio .drip-divider svg path { fill: var(--bg-body); }
#process .drip-divider svg path { fill: var(--bg-alt); }
#pricing .drip-divider svg path { fill: var(--bg-body); }

/* --- Tags & Badges --- */
/* =========================================
   UPGRADED BADGE: ZERO RISK
   ========================================= */
.pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Jarak icon dan teks */
    
    /* Warna Gradient Pink Soft */
    background: linear-gradient(135deg, #FFE0EB 0%, #FFC1D6 100%);
    color: #FF5588; /* Teks Pink Tua */
    
    /* Border & Shape */
    border: 2px solid #FF5588;
    padding: 8px 20px;
    border-radius: 50px;
    
    /* Typography */
    font-family: 'Titan One', cursive; /* Font Kartun */
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    
    /* Shadow & Glow */
    box-shadow: 0 5px 15px rgba(255, 85, 136, 0.2);
    
    /* Spacing Bawah */
    margin-bottom: 25px;
    
    /* Animasi Halus */
    transition: transform 0.3s;
}

.pill-tag:hover {
    transform: scale(1.05) rotate(-2deg);
    cursor: default;
}

.price-tag {
    background-color: var(--accent);
    color: var(--text-main);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 1.1em;
    box-shadow: 2px 2px 0px var(--text-main);
    display: inline-block;
    transform: rotate(-3deg);
    margin: 0 4px;
}

/* =========================================
   6. NAVIGATION
   ========================================= */
.navbar {
    position: fixed;
    top: 25px; /* Jarak aman dari atas */
    left: 50%;
    transform: translateX(-50%);
    width: 92%; /* Lebih lebar dikit biar aman di HP */
    max-width: 1100px;
    padding: 12px 25px;
    
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Support Safari/iPhone */
    
    border: 3px solid #422016; /* Sedikit ditipiskan biar ga berat */
    border-radius: 60px;
    
    box-shadow: 
        0 8px 0 rgba(66, 32, 22, 0.1), 
        0 20px 30px rgba(0,0,0,0.05);
        
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.navbar.scrolled {
    top: 10px; /* Jangan terlalu mepet atas (biar ga kepotong poni) */
    padding: 10px 20px;
    width: 95%; /* Melebar */
    border-width: 2px; /* Border menipis saat scroll */
    box-shadow: 
        0 4px 0 rgba(66, 32, 22, 0.2), 
        0 10px 20px rgba(0,0,0,0.1);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    z-index: 1002;
}
.logo img {
    height: 60px; /* Ukuran tinggi logo di navbar (sesuaikan jika perlu) */
    width: auto;  /* Lebar menyesuaikan proporsi */
    display: block;
    transition: transform 0.3s;
}
/* Update Bagian Logo Hover */
.logo:hover img {
    /* Animasi Jelly yang Kenyal */
    animation: jellyPop 0.8s both; 
    
    /* Tambah Shadow biar makin pop-up */
    filter: drop-shadow(0 10px 10px rgba(255, 85, 136, 0.4));
}

/* --- KEYFRAMES BARU: JELLY POP --- */
@keyframes jellyPop {
    0% { transform: scale(1, 1); }
    30% { transform: scale(1.25, 0.75); } /* Gepeng Lebar */
    40% { transform: scale(0.75, 1.25); } /* Lonjong Tinggi */
    50% { transform: scale(1.15, 0.85); } /* Gepeng Dikit */
    65% { transform: scale(0.95, 1.05); } /* Lonjong Dikit */
    75% { transform: scale(1.05, 0.95); } /* Normalisasi */
    100% { transform: scale(1, 1); }      /* Kembali Semula */
}

.logo .dot {
    color: #FF5588;
    font-size: 2rem;
    line-height: 0;
    margin-left: 2px;
    animation: pulseBlob 2s infinite;
}

/* Nav Links */
.nav-links {
    display: flex;
    gap: 5px; /* Rapatkan sedikit */
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-link {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    color: #5D4037;
    font-size: 1.1rem;
    padding: 8px 16px;
    border-radius: 30px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    text-decoration: none;
}

.nav-link:hover {
    background-color: #FFDEE9;
    color: #FF5588;
    border-color: #FF5588;
}

/* Style khusus untuk Container Tombol di dalam List */
.mobile-btn-container {
    margin-left: 10px; /* Jarak dari menu lain di desktop */
}

/* Navbar Button Specific */
.navbar .btn-primary {
    padding: 12px 25px;
    font-size: 0.9rem;
    box-shadow: 0 4px 0 #422016 !important;
}
.navbar .btn-primary:active { box-shadow: 0 0 0 #422016 !important; }

/* Hamburger Menu */
.hamburger {
    display: none;
    cursor: pointer;
    background: #FFF0F5;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #422016;
}

.bar {
    width: 25px; height: 3px;
    background: #422016;
    margin: 4px 0;
    transition: 0.3s;
    border-radius: 5px;
}

/* --- Mobile Nav Styles --- */
@media (max-width: 968px) {
    #pricing {
        /* Sebelumnya 100px, kita pangkas habis jadi 40px */
        padding-top: 40px !important; 
        padding-bottom: 40px !important; 
    }
    #pricing .section-header {
        margin-bottom: 30px !important; /* Kurangi jarak antara Judul ke Kartu */
    }
    .navbar {
        width: 92%; 
        top: 15px; 
        padding: 10px 20px;
        border-width: 3px;
    }
    .navbar.scrolled {
        top: 5px; /* Jarak aman scroll */
    }

    .nav-links {
        z-index: 9999 !important; 
        position: fixed;
        background: #FFFFFF;
        
        /* Ukuran & Posisi */
        width: 100%;
        left: 0;
        top: 75px; /* Muncul di bawah navbar persis */
        
        flex-direction: column;
        align-items: center;
        padding: 30px 20px;
        border-radius: 25px;
        border: 3px solid #422016;
        box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        
        /* Animasi Sembunyi */
        transform: scaleY(0);
        transform-origin: top center;
        opacity: 0;
        visibility: hidden;
        transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    
    .nav-links.active {
        opacity: 1; 
        visibility: visible;
        transform: scaleY(1);
    }
    
    .nav-links li { width: 100%; text-align: center; margin-bottom: 10px; }
    .nav-links li a { font-size: 1.2rem; display: block; width: 100%; padding: 15px; }
    
    .nav-link {
        display: block;
        width: 100%;
        padding: 15px;
        font-size: 1.2rem;
        border: 1px solid #EEE; /* Garis pemisah tipis */
    }
    .mobile-btn-container {
        margin-left: 0;
        margin-top: 15px; /* Jarak dari menu terakhir */
        width: 100%;
    }
    
    .mobile-btn-container .btn-nav {
        width: 100%; /* Full width biar gampang dipencet */
        display: flex;
        justify-content: center;
        font-size: 1.2rem;
        padding: 15px;
    }

    .hamburger { 
        display: block; 
        z-index: 1002;
        cursor: pointer;
        padding: 5px;
    }
    
    .bar {
        width: 28px; height: 3px;
        background: #422016;
        margin: 5px 0;
        transition: 0.3s;
        border-radius: 5px;
    }
    
    /* Animasi Hamburger X */
    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* =========================================
   7. HERO SECTION
   ========================================= */
.hero-section {
    height: 100vh;      
    min-height: 700px;  
    overflow: hidden;   
    position: relative;
    padding-top: 80px;
    display: flex;
    align-items: center;
}

.hero-container {
    display: grid;
    grid-template-columns: 1.6fr 1fr; 
    align-items: center;
    width: 95%; 
    max-width: 1400px; 
    margin: 0 auto;
    height: 100%; 
    position: relative; 
}

.hero-content {
    position: relative;
    z-index: 10; 
    padding-top: 30px; 
    padding-left: 80px; 
    padding-right: 20px;
}

.hero-steps-container {
    display: flex;
    flex-direction: column; /* Susun ke bawah */
    gap: 15px; /* Jarak antar stiker */
    margin-bottom: 30px;
    align-items: flex-start; /* Rata kiri di desktop */
}

/* Base Style Stiker */
.label-sticker {
    display: inline-flex;
    align-items: center;
    gap: 15px; /* Jarak antara bulatan nomor dan teks */
    
    padding: 8px 25px 8px 8px; /* Padding kiri kecil karena ada bulatan */
    border: 3px solid #422016; 
    border-radius: 50px; /* Lebih bulat (Capsule shape) */
    
    font-family: 'Titan One', cursive;
    font-size: 2.2rem; 
    color: #422016; 
    line-height: 1.1;
    
    box-shadow: 6px 6px 0 rgba(66, 32, 22, 0.2);
    
    opacity: 0;
    animation: stickerPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    white-space: nowrap; 
    transition: transform 0.3s;
}

/* Efek Hover */
.label-sticker:hover {
    transform: scale(1.05) rotate(0deg) !important; /* Lurus & Membesar saat hover */
    z-index: 5;
    cursor: default;
}

/* --- WARNA & ROTASI --- */

/* Step 1: Kuning */
.sticker-yellow {
    background-color: #F7B731; /* Warna Waffle */
    transform: rotate(-2deg); /* Miring kiri dikit */
    animation-delay: 0.1s;
}

/* Step 2: Pink (Maju dikit) */
.sticker-pink {
    background-color: #FF85B3; /* Warna Strawberry */
    transform: rotate(1deg) translateX(30px); /* Miring kanan & geser kanan */
    animation-delay: 0.3s;
}

/* Step 3: Biru (Highlight) */
.sticker-blue {
    /* FIX: Paksa muncul (Override opacity 0 bawaan) */
    opacity: 1 !important; 
    
    /* Background Gradient Segar */
    background: linear-gradient(135deg, #4CC9F0 0%, #4361EE 100%);
    
    /* Double Border Effect (Putih Tebal + Coklat Tipis) */
    border: 3px solid #FFF; 
    outline: 3px solid #422016; /* Ini trik bikin 2 garis tepi */
    
    /* Posisi & Rotasi */
    transform: rotate(-2deg) translateX(10px) scale(1.05); 
    
    /* Shadow lebih dalam */
    box-shadow: 
        8px 8px 0 rgba(66, 32, 22, 0.2), 
        inset 0 0 20px rgba(255,255,255,0.3);
        
    color: #FFF; /* Teks Putih */
    z-index: 5;
    
    /* Animasi Denyut (Memanggil perhatian) */
    animation: specialPulse 2s infinite ease-in-out;
}

/* 2. PERBAIKAN ANGKA "03" (AGAR TERBACA JELAS) */
.sticker-blue .sticker-num {
    /* Warna Background Putih Bersih */
    background: #FFF;
    
    /* Warna Angka Biru (Bukan Coklat) */
    color: #4361EE;
    
    /* HAPUS EFEK TEBAL YANG BIKIN RUSAK */
    -webkit-text-stroke: 0 !important; /* Hapus garis tepi huruf */
    text-shadow: none !important;      /* Hapus bayangan huruf */
    
    /* Border lingkaran tetap coklat */
    border: 3px solid #422016;
    
    /* Font size pas */
    font-size: 1.3rem; 
    
    /* Pastikan opacity 1 juga */
    opacity: 1 !important;
    transform: scale(1) !important;
    
    /* Animasi Muter Dikit (Wiggle) */
    animation: wiggle 3s infinite ease-in-out;
}

/* 3. TEKS "Pay If You Love It" */
.sticker-blue {
    /* Beri outline coklat pada teks putihnya biar kontras */
    text-shadow: 2px 2px 0 #422016;
}

@keyframes specialPulse {
    0% { transform: rotate(-2deg) translateX(10px) scale(1.05); }
    50% { transform: rotate(-2deg) translateX(10px) scale(1.1); box-shadow: 12px 12px 0 rgba(66, 32, 22, 0.1); }
    100% { transform: rotate(-2deg) translateX(10px) scale(1.05); }
}

/* Nomor Urut (01, 02, 03) */
.sticker-num {
    /* 1. BENTUK LINGKARAN PUTIH */
    background: #FFF;
    color: #422016;
    
    /* 2. UKURAN TETAP (FIXED) */
    width: 50px;
    height: 50px;
    
    /* 3. CENTER TEXT */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 4. STYLE BORDER & SHADOW */
    border: 3px solid #422016;
    border-radius: 50%;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.15); /* Shadow kecil biar timbul */
    
    /* 5. TYPOGRAPHY NOMOR */
    font-size: 1.2rem; /* Ukuran angka pas */
    font-weight: 900;
    letter-spacing: -1px; /* Rapatkan dikit */
    
    /* 6. ANIMASI NOMOR MUTER */
    /* Nomor akan berputar masuk saat loading */
    animation: numSpin 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: 0.5s; /* Tunggu stiker muncul dulu */
    opacity: 0; /* Awalnya sembunyi */
    transform: scale(0) rotate(-180deg);
}

/* Keyframes Animasi Nomor */
@keyframes numSpin {
    to { 
        opacity: 1; 
        transform: scale(1) rotate(0deg); 
    }
}

/* --- HOVER EFFECT --- */
.label-sticker:hover .sticker-num {
    background: #422016; /* Warna terbalik saat hover */
    color: #FFF;
    transform: rotate(15deg) scale(1.1); /* Muter dikit */
    transition: 0.3s;
    border-color: #FFF;
}

/* Keyframes Pop In */
@keyframes stickerPop {
    from { opacity: 0; transform: scale(0.5) translateX(-50px); }
    to { opacity: 1; /* Transform rotasi di-handle oleh class masing-masing */ }
}

/* --- MOBILE RESPONSIVE FIX (HP) --- */
@media (max-width: 968px) {
    .hero-steps-container {
        align-items: center; /* Rata Tengah di HP */
        gap: 12px;
        width: 100%;
    }
    
    .label-sticker {
        font-size: clamp(1.4rem, 6vw, 1.8rem);
        padding: 6px 20px 6px 6px;
        width: auto;
        border-radius: 40px;
        /* Biarkan teks panjang turun baris di HP */
        white-space: normal;
        text-align: left;
    }
    .sticker-num {
        /* Kecilkan bulatan nomor di HP */
        width: 40px;
        height: 40px;
        min-width: 40px; /* Supaya gak gepeng */
        font-size: 1rem;
        border-width: 2px;
    }
    
    /* Variasi miring dikit di HP biar tetep lucu (tapi gak ekstrim) */
    .sticker-yellow { transform: rotate(-2deg) !important; }
    .sticker-pink { transform: rotate(2deg) !important; }
    .sticker-blue {
        /* Reset posisi aneh di HP */
        transform: rotate(-1deg) !important;
        margin-top: 15px !important; /* Beri jarak lebih */
        outline: 2px solid #422016; /* Perkecil outline di HP */
        
        width: fit-content;
        max-width: 95%;
        
        /* Matikan animasi denyut di HP biar gak pusing bacanya */
        animation: none; 
    }
    
    /* Pastikan angka tetep bersih di HP */
    .sticker-blue .sticker-num {
        width: 45px; height: 45px;
        min-width: 45px;
        font-size: 1.1rem;
    }
}

.hero-title .highlight-pink {
    display: inline-block;
    
    /* GANTI WARNA: Biru Es (Cyan) Gradient */
    /* Teknik ini membuat teks bisa "mengkilap" */
    background: linear-gradient(
        110deg, 
        #4CC9F0 20%,   /* Biru Awal */
        #AEEAF8 40%,   /* Putih/Biru Terang (Kilauan) */
        #4CC9F0 60%    /* Biru Akhir */
    );
    
    /* Ukuran Background dibesarkan untuk animasi gerak */
    background-size: 200% auto;
    
    /* Memotong background sesuai bentuk huruf */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* Membuat teks transparan agar background terlihat */
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback */
    
    /* PENTING: Gunakan Drop Shadow (bukan Text Shadow) */
    /* Drop shadow bekerja di luar potongan huruf transparan */
    filter: drop-shadow(2px 2px 0px #422016);
    
    /* Hapus Dekorasi Garis Bawah yang bikin ramai */
    text-decoration: none;
    
    /* Animasi Kilau Bergerak (Shimmer) */
    animation: shineFlow 4s linear infinite;
    
    /* Animasi Masuk */
    opacity: 0;
    /* Kita timpa animasi fadeInUp dengan delay */
    animation: 
        fadeInUp 0.8s ease-out 0.3s forwards, 
        shineFlow 4s linear infinite; /* Jalan terus selamanya */
}

.hero-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: #5D4037; /* Coklat Kopi Susu */
    margin-bottom: 40px;
    max-width: 550px;
    line-height: 1.6;
    
    /* Animasi Masuk (Delay lagi) */
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.6s forwards;
}
.hero-subtitle .price-tag {
    background-color: #F7B731;
    color: #422016;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 800;
    font-family: 'Titan One', cursive;
    box-shadow: 2px 2px 0 #422016;
    display: inline-block;
    transform: rotate(-3deg);
    margin: 0 4px;
    vertical-align: middle;
    animation: wiggle 3s infinite ease-in-out;
}
/* Keyframes: Efek Kilauan Mengalir */
@keyframes shineFlow {
    to {
        background-position: 200% center;
    }
}

/* Keyframes: Muncul dari bawah (Standar) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-subtitle strong { color: var(--text-main); font-weight: 700; }

.hero-buttons {
    display: flex !important;
    flex-direction: row !important; 
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important; 
    margin-top: 40px;
    width: 100%;
}

.hero-buttons .btn-primary { margin-right: 20px !important; }

/* Visual / Mascot */
.hero-visual {
    position: relative; 
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; 
}

.blob-bg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 400px; height: 400px;
    background: linear-gradient(120deg, #F0F4FF, #FFE0EB);
    border-radius: 50%;
    filter: blur(60px);
    z-index: -1;
    pointer-events: none;
    animation: pulseBlob 6s infinite alternate;
}

.floating-mascot {
    position: absolute; 
    width: 210%; 
    max-width: unset; 
    height: auto;
    right: -65%;  
    top: 64%;     
    transform: translateY(-50%); 
    animation: floatMascot 4s ease-in-out infinite;
    z-index: 1; 
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.1));
}

.sprinkles-container {
    position: absolute; /* Anak */
    top: 0; left: 0;
    width: 100%; 
    height: 100%; /* Mengikuti tinggi Hero, bukan tinggi layar HP */
    z-index: 0; 
    pointer-events: none;
    overflow: hidden;
}

.sprinkle {
    position: absolute;
    top: 0; 
    left: 0;
    /* Opacity & Transform akan dihandle JS secara real-time */
    opacity: 0; 
    
    /* Hardware Acceleration */
    will-change: transform, opacity;
    
    /* Style Dasar */
    border-radius: 50px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
}
/* KEYFRAMES: MUNCUL -> GERAK -> HILANG */
@keyframes hardDrift {
    /* 0%: Mulai (Transparan) */
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(0deg);
    }
    
    /* 5%: LANGSUNG MUNCUL (Cepat Sekali) */
    5% {
        opacity: 1; 
    }
    
    /* 95%: TETAP MUNCUL (Lama Sekali) */
    /* Ini rahasianya: Selama durasi animasi, dia tetap opacity 1 */
    95% {
        opacity: 1;
    }
    
    /* 100%: Fade Out & Sampai Tujuan */
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
    }
}

/* Mobile Adjustments */
@media (max-width: 968px) {
    .sprinkle {
        opacity: 0.7 !important; 
    }
}

/* Responsive Hero */
@media (max-width: 1024px) {
    .hero-title { font-size: 2.8rem; }
}

@media (max-width: 968px) {
    section, footer, nav, header {
        max-width: 100vw; /* Viewport Width */
        overflow-x: clip; /* Potong yang keluar */
    }
    .hero-section {
        /* 1. Tinggi menyesuaikan konten */
        height: auto; 
        min-height: auto;
        
        /* 2. PENTING: Beri ruang kosong besar di bawah untuk tempat maskot */
        /* Supaya teks tidak tertutup gambar */
        padding-bottom: 380px; 
        
        /* Biarkan nembus ke section bawah */
        overflow: visible; 
        position: relative;
        display: block; /* Reset flex */
    }

    .hero-container {
        width: 100%;
        padding: 0 15px; /* Beri jarak aman dari pinggir layar */
        display: flex;
        flex-direction: column;
        align-items: center; /* KUNCI RATA TENGAH */
        justify-content: flex-start;
    }
    
    .hero-content {
        width: 100%;
        text-align: center;
        padding-left: 0; 
        padding-right: 0;
        
        /* Jarak dari atas */
        padding-top: 40px; 
        
        display: flex;
        flex-direction: column;
        align-items: center; /* KUNCI RATA TENGAH */
        position: relative;
        z-index: 10;
    }

    .hero-title {
        display: flex;
        flex-direction: column;
        align-items: center; /* Pastikan anak-anaknya di tengah */
        gap: 8px; /* Jarak antar baris diperpadat */
        margin-bottom: 25px;
        width: 100%;
    }

    /* Teks Coklat (Share Your Vision...) */
    .line-text {
        display: block;
        width: 100%;
        text-align: center;
        
        /* Ukuran Font Dinamis (Aman untuk HP kecil) */
        font-size: clamp(2rem, 7.5vw, 2.5rem); 
        
        line-height: 1.1;
        white-space: nowrap; /* Jangan turun baris */
        color: #422016;
        text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
    }

    /* Teks Biru (Pay If You Love It) */
    .hero-title .highlight-pink {
        display: block;
        width: 100%;
        text-align: center;
        
        /* Font sedikit lebih besar untuk penekanan */
        font-size: clamp(2.2rem, 8.5vw, 2.8rem); 
        
        line-height: 1.2;
        margin-top: 5px;
        white-space: nowrap;
        
        /* --- PERBAIKAN WARNA HILANG DISINI --- */
        /* Perbesar ukuran background agar gradient menutupi semua teks */
        background-size: 300% auto; 
        
        /* Pastikan shadow tetap ada */
        filter: drop-shadow(2px 2px 0px #422016);
    }
    
    /* 3. SUBTITLE & TOMBOL */
    .hero-subtitle {
        /* 1. BATASI LEBAR (Agar teks fokus di tengah, tidak melebar ke pinggir) */
        width: 100%;
        max-width: 320px; /* Ukuran ideal baca di HP */
        margin: 0 auto 30px auto; /* Rata tengah horizontal */
        margin-bottom: 10px !important;
        
        /* 2. TYPOGRAPHY YANG NYAMAN */
        font-size: 1rem; /* Ukuran pas (16px) */
        line-height: 1.6; /* Jarak antar baris lega */
        color: #6D4C41; /* Coklat medium (enak di mata) */
        font-weight: 500;
        
        /* 3. HAPUS PADDING BERLEBIH */
        padding: 0; 
    }
    
    .hero-subtitle .price-tag {
        display: inline-block;
        vertical-align: middle; /* Sejajar garis teks */
        transform: rotate(-3deg) scale(0.9); /* Kecilkan dikit biar tidak dominan */
        margin: 0 4px;
        position: relative;
        top: -2px; /* Naikkan dikit biar pas */
    }
    
    .hero-buttons {
        justify-content: center !important; /* Tombol rata tengah */
        width: 100%;
        margin-top: 8px !important;
    }

    .hero-visual { 
        height: 0; 
        width: 100%;
        position: static; 
    }

    .floating-mascot {
        position: absolute;
        
        /* 4. UKURAN BESAR */
        width: 240%; 
        max-width: 570px; 
        
        /* 5. POSISI DI BAWAH (Di area padding-bottom tadi) */
        bottom: -517px; /* Menabrak sedikit ke section bawah */
        left: 50%;
        
        /* Reset posisi desktop */
        top: auto; 
        right: auto;
        
        z-index: 1;
        
        /* Animasi Naik Turun + Center Horizontal */
        transform: translateX(-50%);
        animation: floatMascotMobile 4s ease-in-out infinite;
    }
    /* Animasi Mobile (Pastikan translateX -50% tetap ada) */
    @keyframes floatMascotMobile {
        0%, 100% { transform: translateX(-50%) translateY(0); }
        50% { transform: translateX(-50%) translateY(-20px); }
    }
    
    /* Blob Background */
    .blob-bg {
        width: 300px; height: 300px;
        top: auto; 
        bottom: 50px; /* Di belakang maskot */
        left: 50%; 
        transform: translateX(-50%);
    }
}


@media (max-width: 768px) {
    .sprinkle {
        opacity: 0.6; /* Sedikit lebih transparan di HP biar tulisan kebaca */
    }
    .hero-title { font-size: 2.2rem; }

    .hero-buttons {
        flex-direction: column !important; 
        align-items: center !important;
        gap: 20px !important; 
    }
    
    .hero-buttons .btn-primary {
        margin-right: 0 !important; 
        width: 100%; max-width: 300px;
    }
    
    .hero-buttons .btn-secondary {
        width: 100%; max-width: 300px;
    }

    .hero-buttons .btn { width: 100%; justify-content: center; }
}

/* =========================================
   8. POP CARDS SECTION (Intro)
   ========================================= */
.pop-card {
    background: #FFFFFF; 
    border: 3px solid #422016; 
    border-radius: 25px;
    position: relative;
    box-shadow: 8px 8px 0 #422016, 0 20px 25px rgba(0,0,0,0.1);
    transition: all 0.3s cubic-bezier(0.25, 1.5, 0.5, 1);
    overflow: hidden;
    z-index: 1;
    margin-bottom: 20px;
}

.card-header-sauce {
    background: #FF85B3; 
    height: 80px; width: 100%;
    border-bottom: 3px solid #422016;
    position: absolute;
    top: 0; left: 0;
    z-index: 0;
}

.card-header-sauce::after {
    content: '';
    position: absolute;
    bottom: -10px; left: 0;
    width: 100%; height: 10px;
    background: 
        radial-gradient(circle, #FF85B3 60%, transparent 65%),
        radial-gradient(circle, #FF85B3 60%, transparent 65%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 0;
}

.card-content {
    padding: 40px 30px 30px; 
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 20px; 
}

.icon-scoop {
    width: 80px; height: 80px;
    background: #FFF; 
    border: 3px solid #422016;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    font-size: 2rem;
    color: #FF5588; 
    box-shadow: 4px 4px 0 #422016; 
}

.step-title {
    font-weight: 800;
    font-size: 1.5rem;
    color: #422016; 
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pop-card p {
    color: #422016; 
    font-weight: 500; /* Kita turunkan sedikit agar huruf biasa lebih tipis */
    font-size: 1.05rem;
    line-height: 1.6;
    margin-top: 10px;
}
.pop-card p strong {
    font-weight: 900 !important; /* Super Tebal */
    color: #FF5588; /* Warna Pink Strawberry agar kontras */
    
    /* Opsional: Beri highlight background tipis */
    background: rgba(255, 85, 136, 0.1);
    padding: 0 4px;
    border-radius: 4px;
}

.step-badge {
    position: absolute;
    
    /* Posisi lebih menonjol keluar */
    top: -25px; 
    left: 15px; 
    right: auto;
    
    /* UKURAN DIPERBESAR */
    width: 70px;  /* Sebelumnya 50px */
    height: 70px; /* Sebelumnya 50px */
    
    background: #FFF;
    border: 4px solid #422016; /* Border lebih tebal */
    border-radius: 12px;
    box-shadow: 6px 6px 0 rgba(66, 32, 22, 0.2);
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Font Angka Besar */
    font-family: 'Titan One', cursive;
    font-size: 2rem; /* Sebelumnya 1.4rem */
    color: #422016;
    padding-top: 8px; /* Adjustment vertikal */
    
    transform: rotate(-5deg);
    z-index: 10;
}

.step-badge::after {
    content: '';
    position: absolute;
    top: -10px; /* Naik dikit */
    left: 50%;
    transform: translateX(-50%);
    width: 18px; /* Lebih besar */
    height: 18px;
    background: #FF5588;
    border: 3px solid #422016;
    border-radius: 50%;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}

/* 4. VARIASI ROTASI BADGE (BIAR NATURAL) */
.pop-card:nth-child(1) .step-badge { transform: rotate(-8deg); background: #FFF9C4; }
.pop-card:nth-child(2) .step-badge { transform: rotate(6deg); background: #E1F5FE; }
.pop-card:nth-child(3) .step-badge { transform: rotate(-4deg); background: #FFEBEE; }


/* Efek Hover pada Badge */
.pop-card:hover .step-badge {
    transform: scale(1.15) rotate(0deg); 
    box-shadow: 8px 8px 0 rgba(66, 32, 22, 0.2);
}

/* Hover Effects */
.pop-card:hover {
    transform: translateY(-10px) rotate(-1deg); 
    box-shadow: 12px 12px 0 #422016, 0 30px 40px rgba(0,0,0,0.1);
}

.pop-card:hover .icon-scoop {
    transform: scale(1.1) rotate(10deg); 
    background: #FFF0F5; 
    transition: 0.3s;
}

/* =========================================
   9. PROCESS SECTION
   ========================================= */
#process {
    position: relative;
    background: linear-gradient(-45deg, #FFFBF0, #FFD1DC, #FFFBF0, #FFE5B4);
    background-size: 400% 400%; 
    animation: creamyFlow 15s ease infinite;
    z-index: 1;
    overflow: hidden;
    padding-top: 120px; 
    padding-bottom: 100px;
}

#process::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 50px; 
    background: #422016;
    border-radius: 0 0 50% 50% / 0 0 20px 20px;
    transform: scaleX(1.1); 
    box-shadow: 0 10px 20px rgba(66, 32, 22, 0.4), inset 0 -5px 10px rgba(255, 255, 255, 0.1);
    z-index: 2;
}

#process::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.4; 
    z-index: 1;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.step-number {
    font-size: 4rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.05);
    position: absolute;
    top: 20px; right: 20px;
}

.icon-box {
    width: 60px; height: 60px;
    background: #FFF0F5;
    color: var(--primary);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

/* =========================================
   10. PORTFOLIO SECTION
   ========================================= */
#portfolio {
    position: relative;
    background-color: #FDF0D5; 
    background-image: 
        linear-gradient(#E8D7B8 2px, transparent 2px),
        linear-gradient(90deg, #E8D7B8 2px, transparent 2px);
    background-size: 40px 40px;
    padding-top: 80px;
    padding-bottom: 120px;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 60px;
    padding: 20px;
}

.polaroid-wrapper {
    position: relative;
    perspective: 1000px;
}

/* Polaroid Card */
.polaroid-card {
    background: #FFF;
    padding: 15px 15px 50px 15px; 
    border: 3px solid #422016; 
    border-radius: 4px; 
    box-shadow: 6px 6px 0 rgba(66, 32, 22, 0.2), 0 10px 20px rgba(0,0,0,0.05);
    transform: rotate(-1deg); 
    transition: transform 0.3s ease;
    z-index: 1;
    position: relative;
}

.polaroid-img {
    width: 100%; height: 280px;
    overflow: hidden;
    border: 2px solid #422016;
    background: #000;
    position: relative;
}

.polaroid-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    filter: grayscale(20%); 
}

.polaroid-tag {
    position: absolute;
    top: 10px; left: 10px;
    background: #FF5588;
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 10px;
    border: 2px solid #422016;
    border-radius: 20px;
    text-transform: uppercase;
    box-shadow: 2px 2px 0 #422016;
}
.tag-blue { background: #4CC9F0; }
.tag-green { background: #20C997; }
.tag-gold { background: #F7B731; color: #422016; }

.polaroid-caption {
    text-align: center;
    margin-top: 20px;
}

.polaroid-caption h3 {
    font-family: 'Titan One', cursive; 
    font-size: 1.6rem;
    color: #422016;
    letter-spacing: 1px;
}

/* Sticky Note */
.sticky-note {
    position: absolute;
    bottom: -30px; 
    right: -15px;  
    width: 180px;
    padding: 35px 15px 15px 15px; 
    background-color: #FFEB3B; 
    border: 2px solid #422016;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
    transform: rotate(4deg); 
    z-index: 2; 
    transition: transform 0.3s ease;
}

.tape-strip {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    width: 80px; height: 25px;
    background-color: rgba(255, 255, 255, 0.4); 
    border-left: 1px dashed rgba(0,0,0,0.1);
    border-right: 1px dashed rgba(0,0,0,0.1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.note-text {
    /* Ganti font aneh/latin dengan font utama yang bersih */
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    
    /* Style agar tetap terlihat seperti catatan */
    font-weight: 700 !important; /* Tebal */
    font-style: italic !important; /* Miring */
    color: #422016 !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
}

.note-author {
    font-size: 0.8rem;
    font-weight: 700;
    text-align: right;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}
.note-author i { color: #FF5588; }

/* Note Colors */
.note-yellow { background-color: #FFF59D; }
.note-pink { background-color: #FFCCBC; transform: rotate(-3deg); right: auto; left: -10px; bottom: -40px;}
.note-blue { background-color: #B3E5FC; transform: rotate(5deg); bottom: -25px;}
.note-purple { background-color: #E1BEE7; transform: rotate(-3deg); bottom: -35px; right: -10px; }
.note-mint { 
    background-color: #B9F6CA; /* Hijau Mint */
    transform: rotate(3deg); 
    bottom: -25px; 
    right: -10px; 
}

/* 2. Note Peach (Oranye Lembut) - Posisi Kiri */
.note-peach { 
    background-color: #FFCC80; /* Oranye Peach */
    transform: rotate(-4deg); 
    right: auto; /* Reset kanan */
    left: -10px; /* Pindah Kiri */
    bottom: -35px; 
}

.caption-left {
    text-align: left !important;
    padding-left: 15px;
    padding-right: 60px; /* Beri ruang kosong di kanan untuk note */
}

/* Jika Note di KIRI -> Judul geser ke KANAN */
.caption-right {
    text-align: right !important;
    padding-right: 15px;
    padding-left: 60px; /* Beri ruang kosong di kiri untuk note */
}

/* View Button */
.view-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0); 
    width: 80px; height: 80px;
    background: #FF5588; 
    border: 3px solid #FFF;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #FFF;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    z-index: 10;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    opacity: 0;
}

.view-btn:hover {
    background: #4CC9F0; 
    transform: translate(-50%, -50%) scale(1.1) rotate(10deg) !important;
}

/* Hover Interactivity */
.polaroid-wrapper:hover .polaroid-card {
    transform: rotate(0deg) translateY(-5px); 
    border-color: #FF5588;
    z-index: 5;
}
.polaroid-wrapper:hover .polaroid-img img {
    transform: scale(1.1); 
    filter: grayscale(0%); 
}
.polaroid-wrapper:hover .sticky-note {
    transform: scale(1.1) rotate(0deg) !important; 
    box-shadow: 8px 8px 0 rgba(66, 32, 22, 0.2);
    z-index: 10;
}
.polaroid-wrapper:hover .view-btn {
    transform: translate(-50%, -50%) scale(1); 
    opacity: 1;
}

/* Future Project / Empty Slot */
.empty-slot {
    background: #FFFBF0 !important; 
    display: flex; align-items: center; justify-content: center;
    border: 3px dashed #422016 !important; 
}
.empty-slot i { font-size: 4rem; color: #E0E0E0; transition: 0.3s; }
.polaroid-wrapper:hover .empty-slot {
    background: #FFF59D !important; 
    border-color: #FF5588 !important;
}
.polaroid-wrapper:hover .empty-slot i {
    color: #FF5588; 
    transform: rotate(90deg) scale(1.2); 
}
.polaroid-link { display: block; text-decoration: none; color: inherit; }

/* =========================================
   MOBILE FIX: PORTFOLIO (ALIVE SCRAPBOOK)
   ========================================= */

@media (max-width: 968px) {

    /* 1. GRID YANG LEBIH COMPACT */
    .portfolio-grid {
        grid-template-columns: 1fr; /* 1 Kolom */
        gap: 70px; /* Jarak pas untuk sticky note */
        padding: 0 10px; /* Sedikit padding samping */
    }

    /* 2. POLAROID CARD (LEBIH RAPI) */
    .polaroid-wrapper {
        margin-bottom: 20px;
    }

    .polaroid-card {
        transform: rotate(0) !important; /* Luruskan kartu di HP */
        margin: 0 auto;
        max-width: 360px; /* Batasi lebar agar manis */
        padding-bottom: 20px; /* Kurangi padding bawah */
    }

    /* 3. GAMBAR BERNYAVA (AUTO ZOOM) */
    .polaroid-img img {
        /* Gambar otomatis nge-zoom pelan (Breathing effect) */
        animation: photoBreathe 6s ease-in-out infinite;
        filter: grayscale(0%) !important; /* Selalu berwarna */
    }

    @keyframes photoBreathe {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.1); }
    }

    /* 4. TOMBOL VISIT (SELALU MUNCUL & BERDENYUT) */
    .view-btn {
        opacity: 1 !important; /* Selalu muncul */
        transform: translate(-50%, -50%) scale(0.9) !important;
        background: rgba(255, 85, 136, 0.9); /* Sedikit transparan */
        
        /* Animasi Denyut Jantung */
        animation: btnPulse 2s infinite;
    }

    @keyframes btnPulse {
        0% { box-shadow: 0 0 0 0 rgba(255, 85, 136, 0.7); transform: translate(-50%, -50%) scale(0.9); }
        70% { box-shadow: 0 0 0 15px rgba(255, 85, 136, 0); transform: translate(-50%, -50%) scale(1); }
        100% { box-shadow: 0 0 0 0 rgba(255, 85, 136, 0); transform: translate(-50%, -50%) scale(0.9); }
    }

    /* 5. STICKY NOTE (SELALU NEMPEL & GOYANG) */
    .sticky-note {
        position: absolute;
        /* Paksa posisi nempel di pojok kanan bawah */
        bottom: -25px !important;
        right: 10px !important;
        left: auto !important; /* Reset left jika ada */
        
        /* Ukuran Compact */
        width: 150px;
        padding: 25px 10px 10px 10px;
        font-size: 0.8rem;
        
        /* Selalu Miring & Terlihat */
        transform: rotate(3deg) !important;
        opacity: 1 !important;
        z-index: 10;
        
        /* Animasi Goyang Kena Angin */
        animation: noteSwing 3s ease-in-out infinite alternate;
    }
    
    /* Sticky Note Khusus (Kiri/Kanan variasi) */
    .note-pink { right: auto !important; left: 10px !important; transform: rotate(-3deg) !important; animation-delay: 0.5s; }
    .note-blue { right: 10px !important; transform: rotate(2deg) !important; animation-delay: 1s; }
    .note-purple { right: auto !important; left: 5px !important; bottom: -40px !important; }

    @keyframes noteSwing {
        from { transform: rotate(2deg); }
        to { transform: rotate(5deg); }
    }
    
    /* Text di Note */
    .note-text { font-size: 0.85rem; margin-bottom: 5px; }
    .note-author { font-size: 0.7rem; }

    /* 6. EMPTY SLOT (CARD MASA DEPAN) */
    .empty-slot i {
        animation: spinPlus 4s linear infinite; /* Icon plus muter terus */
        color: #FF5588;
    }
}

/* =========================================
   11. ABOUT SECTION
   ========================================= */
#about {
    background-color: #FFF;
    position: relative;
    padding-top: 100px;
    padding-bottom: 100px;
}

.about-wrapper {
    display: grid;
    grid-template-columns: 0.4fr 0.6fr; 
    gap: 60px;
    align-items: center; 
}

/* Profile Image Area */
.about-image {
    position: relative;
    width: 100%; height: 100%;
    display: flex; justify-content: center;
    z-index: 1; 
}

/* Ice Cream Stick */
.about-image::before {
    content: '';
    position: absolute;
    bottom: -60px; 
    left: 50%;
    transform: translateX(-50%) rotate(-2deg); 
    width: 80px; height: 300px;
    background: #E6C288; 
    border: 5px solid #422016;
    border-radius: 0 0 50px 50px; 
    box-shadow: inset 5px 0 15px rgba(0,0,0,0.15);
    z-index: -1; 
}

.image-frame {
    width: 100%;
    height: 800px; 
    min-height: 0; 
    display: flex;
    border-radius: 180px 180px 40px 40px; 
    overflow: hidden;
    position: relative;
    border: 5px solid #422016;
    box-shadow: 15px 15px 0 rgba(66, 32, 22, 0.2);
    transform: rotate(-2deg);
    background: #000;
    z-index: 2; 
}

.image-frame img {
    width: 100%; height: 100%;
    object-fit: cover; 
}

.frame-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 30%;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}

/* Floating Badge */
.floating-badge {
    position: absolute;
    bottom: 140px; right: -25px; 
    transform: rotate(5deg);
    background: #FFF;
    border: 4px solid #422016;
    padding: 12px 30px;
    border-radius: 60px;
    box-shadow: 8px 8px 0 #422016, 0 20px 30px rgba(0,0,0,0.2);
    display: flex; align-items: center; gap: 15px;
    z-index: 10;
    animation: badgeBounce 3s ease-in-out infinite;
}

.badge-icon { font-size: 2.2rem; }
.badge-text strong { 
    display: block; 
    font-family: 'Titan One', cursive; 
    font-size: 1.6rem; 
    color: #FF5588; 
    text-shadow: 1px 1px 0 #422016; 
}
.badge-text span { 
    font-size: 1rem; font-weight: 800; 
    color: #422016; text-transform: uppercase;
}

/* About Content */
.about-content { padding-left: 20px; }

.action-label {
    font-family: 'Titan One', cursive;
    color: #422016;
    font-size: 1.4rem;
    margin-bottom: 25px; margin-top: 10px;
    text-decoration: underline wavy #FF5588;
    text-underline-offset: 8px;
}

.chef-intro {
    font-size: 1.15rem;
    color: #555;
    margin-bottom: 40px;
    line-height: 1.8;
}
.chef-intro strong { color: #FF5588; font-weight: 800; }

/* Skills */
.skills-container {
    display: flex; flex-direction: column;
    gap: 25px; margin-bottom: 50px;
}
.skill-info {
    display: flex; justify-content: space-between;
    margin-bottom: 8px; font-weight: 700; color: #422016;
}
.skill-tube {
    width: 100%; height: 28px;
    background: #F4F4F4;
    border: 3px solid #422016;
    border-radius: 20px;
    position: relative; overflow: hidden;
}
.skill-fill {
    height: 100%; width: 0; 
    border-radius: 0 15px 15px 0;
    position: relative;
    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.fill-pink { background: linear-gradient(90deg, #FF85B3, #FF5588); }
.fill-blue { background: linear-gradient(90deg, #4CC9F0, #00B4D8); }
.fill-gold { background: linear-gradient(90deg, #FFE066, #F7B731); }

.tube-glare {
    position: absolute;
    top: 4px; left: 5px; right: 5px; height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    pointer-events: none;
}

/* Social Tray */
.chef-actions {
    border-top: 2px dashed #DDD;
    padding-top: 30px;
}
.social-tray {
    display: flex; gap: 15px; margin-bottom: 25px;
}
.social-donut {
    width: 55px; height: 55px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #FFF;
    border: 2px solid #422016;
    box-shadow: 4px 4px 0 #422016;
    transition: transform 0.2s;
}
.discord { 
    background: #5865F2; 
    color: #FFF; 
}
.instagram { 
    background: #E1306C; 
    color: #FFF; 
}
.linkedin  { background: #0077B5; }
.whatsapp  { background: #25D366; }
.social-donut:hover { transform: translateY(-5px); }

.btn-personal {
    display: inline-flex; align-items: center; gap: 15px;
    background: #422016; color: #FFF;
    padding: 16px 35px; border-radius: 50px;
    text-decoration: none; transition: 0.3s;
    border: 3px solid #F7B731;
    box-shadow: 0 10px 20px rgba(66, 32, 22, 0.2);
}
.btn-personal:hover { transform: scale(1.02); background: #5D3A3A; }
.btn-text { font-family: 'Titan One', cursive; color: #F7B731; }

/* Responsive About */
/* =========================================
   MOBILE FIX: ABOUT SECTION (POPSICLE CENTER)
   ========================================= */

@media (max-width: 968px) {
    
    #about {
        /* Sebelumnya 100px, kita kurangi drastis biar foto naik */
        padding-top: 40px !important; 
        padding-bottom: 80px !important;
    }
    
    .top-curve svg {
        height: 60px !important; /* Sesuaikan tinggi gelombang di HP */
        transform: scale(1.1); /* Sedikit diperbesar biar nutup gap */
    }
    
    /* 1. UBAH LAYOUT JADI 1 KOLOM (TUMPUK) */
    .about-wrapper {
        display: flex;
        flex-direction: column; /* Atas Bawah */
        gap: 100px; /* Jarak antara Foto dan Teks */
        align-items: center;
        padding: 0 10px; /* Sedikit padding kiri kanan */
    }

    /* 2. ATUR ULANG POSISI FOTO (POPSICLE) */
    .about-image {
        margin-top: 0 !important;
        margin-bottom: 30px !important;
        width: 100%;
        display: flex;
        justify-content: center; /* Pastikan di tengah */
        animation: mobileIceCreamFloat 4s ease-in-out infinite;
    }

    /* Frame Foto (Badan Es Krim) */
    .image-frame {
        width: 100%;
        max-width: 340px; /* Batasi lebar agar proporsional di HP */
        height: 420px;    /* Tinggi fix agar terlihat chunky */
        min-height: 0;    /* Reset min-height desktop */
        
        transform: rotate(0deg); /* Tegakkan (jangan miring) */
        margin: 0 auto;
        border-width: 4px;
    }
    .image-frame::after {
        transform-origin: top center;
        animation: mobileSauceDrip 3s ease-in-out infinite;
    }

    /* Stik Es Krim */
    .about-image::before {
        bottom: -100px; /* Posisi stik */
        left: 50%;
        transform: translateX(-50%) rotate(0deg); /* Luruskan stik */
        width: 70px;
        height: 200px;
        z-index: -1;
    }

    /* Badge "5+ Years" */
    .floating-badge {
        /* Pindahkan ke Tengah Bawah Frame */
        bottom: -25px; 
        right: auto;
        left: 50%;
        transform: translateX(-50%) !important; /* Paksa tengah, hapus rotasi */
        
        width: max-content;
        padding: 10px 25px;
        
        /* Hapus animasi bouncing desktop yang mungkin aneh di HP */
        animation: mobileBadgePulse 2s ease-in-out infinite;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

    /* 3. ATUR ULANG KONTEN TEKS */
    .about-content {
        padding-left: 0; /* Hapus padding desktop */
        text-align: center; /* Rata tengah semua teks */
        width: 100%;
    }

    .section-title {
        /* 1. Kecilkan Ukuran Font */
        font-size: 3rem; 
        
        /* 2. Kecilkan Ketebalan Stroke (Agar proporsional) */
        /* Kalau tetap 4px di HP, hurufnya bakal ketutup garis coklat */
        -webkit-text-stroke: 2px #422016; 
        
        /* 3. Kecilkan Shadow & Glow (Agar tidak luntur/berlebihan) */
        /* Desktop: 6px shadow, 30px glow */
        /* Mobile:  3px shadow, 5px glow (Cukup segini di layar kecil) */
        text-shadow: 
            3px 3px 0px #422016, 
            0px 0px 5px rgba(255, 85, 136, 0.4); 
    }
    
    .section-title::after {
        /* Kecilkan ukuran bintang di HP */
        width: 40px;
        height: 40px;
        
        /* Sesuaikan posisi di HP */
        top: -20px;
        margin-left: -10px;
    }

    .chef-intro {
        text-align: center;
        margin-bottom: 40px;
    }

    /* Skill Bars */
    .skills-container {
        width: 100%; 
        max-width: 100%;
    }
    
    /* Social Media Tray */
    .chef-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .social-tray {
        justify-content: center;
    }
    
    /* Tombol Personal */
    .btn-personal {
        width: 100%; /* Tombol lebar penuh */
        justify-content: center;
    }
}

@keyframes mobileIceCreamFloat {
    0%, 100% { 
        transform: translateY(0); 
    }
    50% { 
        transform: translateY(-15px); /* Naik 15px */
    }
}

/* Badge Membesar Kecil (Pop) */
@keyframes mobileBadgePulse {
    0%, 100% { 
        transform: translateX(-50%) scale(1) rotate(0deg);
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }
    50% { 
        transform: translateX(-50%) scale(1.1) rotate(2deg); /* Membesar & Miring dikit */
        box-shadow: 0 20px 40px rgba(0,0,0,0.3); /* Shadow menebal */
    }
}

/* Saus Melar (Efek Leleh) */
@keyframes mobileSauceDrip {
    0%, 100% { 
        transform: scaleY(1); 
    }
    50% { 
        transform: scaleY(1.05); /* Memanjang ke bawah sedikit */
    }
}

/* =========================================
   12. PRICING SECTION
   ========================================= */
#pricing {
    position: relative;
    background-color: #FFF0F5; 
    background-image: repeating-linear-gradient(45deg, #FFDEE9 0, #FFDEE9 1px, transparent 0, transparent 50%);
    background-size: 20px 20px;
    padding-top: 100px;
    padding-bottom: 120px;
}

.pricing-equation {
    display: flex;
    align-items: flex-start; 
    justify-content: center;
    gap: 20px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

/* Cards */
.equation-card {
    flex: 1;
    min-width: 300px; max-width: 450px;
    border-radius: 30px;
    padding: 40px 30px;
    position: relative;
    border: 4px solid #422016;
    box-shadow: 10px 10px 0 rgba(66, 32, 22, 0.15);
    transition: transform 0.3s;
}
.equation-card:hover { transform: translateY(-5px); }

.card-label {
    display: inline-block;
    background: #FF5588;
    color: white;
    font-weight: 800;
    font-size: 0.8rem;
    padding: 5px 15px;
    border-radius: 20px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid #422016;
}
.label-dark { background: #F7B731; color: #422016; }

.equation-card h3 {
    font-family: 'Titan One', cursive;
    font-size: 1.8rem; color: #422016;
    margin-bottom: 5px; line-height: 1.2;
}
.card-sub {
    font-size: 0.95rem; color: #666;
    margin-bottom: 25px; font-weight: 500;
}

/* Price Display */
.price-display {
    background: #E0F7FA;
    border: 3px dashed #4CC9F0;
    padding: 20px;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 25px;
}
.price-display.dark-mode { background: rgba(0,0,0,0.2); border-color: #F7B731; }

.currency { display: block; font-size: 0.9rem; font-weight: 700; color: #4CC9F0; text-transform: uppercase; }
.dark-mode .currency { color: #F7B731; }

.big-price {
    font-family: 'Titan One', cursive;
    font-size: 4rem; color: #422016;
    line-height: 1; display: block;
    text-shadow: 2px 2px 0 #FFF;
}
.dark-mode .big-price { color: #F7B731; text-shadow: 2px 2px 0 #422016; }

.freq { font-size: 0.9rem; color: #888; font-weight: 600; }
.dark-mode .freq { color: #CCC; }

/* Lists & Addons */
.check-list li {
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 10px;
    font-size: 1rem; color: #422016;
}
.check-list i { color: #FF5588; font-size: 1.2rem; }

.addons-box {
    background: #FFF0F5;
    border: 2px dashed #FF5588;
    padding: 15px;
    border-radius: 15px;
    font-size: 0.9rem; color: #422016;
    margin-top: 20px;
}
.addons-box strong { color: #FF5588; display: block; margin-bottom: 5px; }

/* Card Variations */
.build-card { background: #FFF; z-index: 2; }
.power-card { background: #422016; color: #FFF; z-index: 2; border-color: #F7B731; }
.power-card h3 { color: #FFF; }
.power-card .card-sub { color: #CCC; }
.dark-list li { color: #FFF; }
.dark-list i { color: #F7B731; }
.small-disclaimer {
    font-size: 0.75rem; color: #AAA; margin-top: 15px;
    font-style: italic; text-align: center; 
    border-top: 1px solid rgba(255,255,255,0.1); padding-top: 10px;
}

.plus-sign {
    font-size: 2rem; color: #422016;
    display: flex; align-items: center; justify-content: center;
    margin-top: 100px; 
}

/* --- Golden Ticket & Connector --- */
.pricing-conclusion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -20px; 
    position: relative;
    z-index: 5;
}

.connector-arrow {
    display: flex; flex-direction: column; align-items: center;
    color: #422016; margin-bottom: -5px; z-index: 1;
}
.dashed-line {
    height: 40px; width: 4px;
    background-image: linear-gradient(to bottom, #422016 50%, transparent 50%);
    background-size: 100% 10px;
    margin-bottom: 5px;
}
.connector-arrow i { font-size: 2rem; animation: bounceArrow 1.5s infinite; }

/* Final Offer Card (Golden) */
.final-offer-card {
    background: #F7B731; 
    width: 100%; max-width: 600px;
    padding: 40px;
    border-radius: 40px;
    border: 5px solid #422016;
    box-shadow: 0 15px 0 #422016, 0 30px 50px rgba(0,0,0,0.15);
    text-align: center;
    position: relative;
    transform: rotate(0deg);
    transition: transform 0.3s;
}
.final-offer-card:hover { transform: translateY(-5px); }
.final-offer-card h3 {
    font-family: 'Titan One', cursive;
    font-size: 2rem; color: #422016; margin-bottom: 25px;
}

.price-comparison {
    display: flex; align-items: center; justify-content: center; gap: 30px;
    background: rgba(255,255,255,0.4); 
    padding: 20px; border-radius: 20px; border: 2px dashed #422016;
    margin-bottom: 25px;
}

.label {
    font-size: 0.8rem; font-weight: 800;
    text-transform: uppercase; color: #5D4037; margin-bottom: 5px;
}
.strikethrough {
    font-size: 2rem; font-weight: 700; color: #888;
    text-decoration: line-through; opacity: 0.7;
}
.price-arrow {
    font-size: 2rem; color: #422016; animation: pulseBlob 2s infinite;
}
.huge-text {
    font-family: 'Titan One', cursive;
    font-size: 4.5rem; color: #FF5588; 
    line-height: 1; text-shadow: 3px 3px 0 #FFF; 
    animation: pulseText 2s infinite;
}
.offer-desc {
    font-size: 1.1rem; color: #422016; margin-bottom: 30px; line-height: 1.5;
}

/* Ticket Style (Old/Backup Styles preserved) */
.golden-ticket {
    background: radial-gradient(circle at top left, #FFD54F, #F7B731);
    width: 100%; max-width: 800px;
    border-radius: 30px; border: 5px solid #422016;
    box-shadow: 0 20px 0 #422016, 0 40px 60px rgba(0,0,0,0.2);
    position: relative; overflow: hidden; padding: 0;
}
.golden-ticket::after {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg); animation: goldShimmer 4s infinite linear; pointer-events: none;
}
.ticket-notch {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; background: #FFF0F5; 
    border-radius: 50%; border: 5px solid #422016; z-index: 2;
}
.ticket-notch.left { left: -25px; border-color: transparent transparent transparent; transform: translateY(-50%) rotate(45deg); }
.ticket-notch.right { right: -25px; border-color: transparent transparent transparent; transform: translateY(-50%) rotate(-45deg); }

.ticket-grid {
    display: grid; grid-template-columns: 1.2fr 50px 1.8fr; align-items: center;
}
.ticket-price-side {
    background: transparent; padding: 20px;
    display: flex; justify-content: center; align-items: center;
    position: relative; overflow: visible;
}
.price-sticker-wrapper {
    position: relative; width: 200px; height: 200px; margin: 0 auto;
}
.price-sticker {
    background: #FF5588; width: 100%; height: 100%;
    border-radius: 50%; display: flex; flex-direction: column; 
    align-items: center; justify-content: center; color: #FFF;
    border: 6px solid #FFF; 
    animation: floatSticker 3s ease-in-out infinite;
    transform: rotate(-10deg); position: relative; z-index: 5;
    box-shadow: 0 10px 0 rgba(0,0,0,0.1);
}
.sticker-label {
    font-size: 1.2rem; font-weight: 900; letter-spacing: 1px;
    background: #422016; padding: 4px 15px; border-radius: 20px;
    transform: translateY(5px) rotate(-5deg); box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}
.sticker-value {
    font-family: 'Titan One', cursive; font-size: 7.5rem; line-height: 0.9;
    text-shadow: 5px 5px 0 #422016; margin: -5px 0;
}
.sticker-sub { 
    font-size: 0.9rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 2px; margin-top: 5px;
}
.sticker-shadow {
    position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);
    width: 120px; height: 25px; background: rgba(66, 32, 22, 0.3);
    border-radius: 50%; animation: shadowScale 3s ease-in-out infinite;
}

.ticket-divider {
    height: 100%; display: flex; flex-direction: column; 
    align-items: center; justify-content: center; position: relative;
}
.dashed-line-vert {
    height: 100%; width: 4px;
    background-image: linear-gradient(to bottom, #422016 50%, transparent 50%);
    background-size: 100% 15px; opacity: 0.3;
}
.cut-icon {
    background: #F7B731; color: #422016;
    padding: 5px; font-size: 1.2rem; position: absolute; top: 10%;
}
.ticket-info-side { padding: 40px; text-align: left; }
.ticket-info-side h3 {
    font-family: 'Titan One', cursive; font-size: 2rem; color: #422016;
    margin-bottom: 20px; text-shadow: 2px 2px 0 rgba(255,255,255,0.4);
}
.ticket-steps li {
    font-size: 1.1rem; color: #5D4037; margin-bottom: 8px; 
    font-weight: 600; display: flex; gap: 10px;
}
.ticket-steps li span { color: #FF5588; font-weight: 800; }
.ticket-footer {
    padding: 0 40px 40px 40px; text-align: center;
    border-top: 2px dashed rgba(66, 32, 22, 0.1);
    margin-top: -20px; padding-top: 30px;
}

.negotiate-area {
    text-align: center; margin-top: 50px;
    font-size: 1.1rem; color: #666;
}
.negotiate-area a {
    color: #25D366; font-weight: 800; text-decoration: none;
    border-bottom: 2px solid #25D366; transition: 0.3s;
}
.negotiate-area a:hover { background: #25D366; color: #FFF; padding: 2px 5px; border-radius: 5px; }

.money-back { margin-top: 15px; font-weight: 600; color: #5D4037; font-size: 0.9rem; }

.price-break {
    display: inline; /* Tetap satu baris di laptop */
    margin-left: 8px; /* Jarak dikit dari teks */
}

/* Responsive Pricing */

/* =========================================
   MOBILE FIX: PRICING & TICKET (FINAL POLISH)
   ========================================= */

@media (max-width: 968px) {

    /* --- 1. HARGA ATAS (THE EQUATION) --- */
    .pricing-equation {
        flex-direction: column; 
        gap: 0; 
        align-items: center;
    }

    .equation-card {
        width: 100%;
        max-width: 100%; 
        margin-bottom: 20px;
        transform: rotate(0) !important; 
        padding: 30px 20px; 
    }

    /* Icon Plus (+) - DIPERBAIKI JARAKNYA */
    .plus-sign {
        /* Hapus kotak putih & border */
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        
        /* Perbesar Iconnya saja */
        font-size: 4rem; 
        color: #422016;
        
        /* Atur Jarak */
        margin: -0px auto 10px auto; 
        
        /* Animasi tetap ada */
        animation: plusBounce 2s infinite ease-in-out;
        
        /* Tambah shadow pada text/icon nya langsung biar timbul */
        text-shadow: 2px 2px 0 rgba(255,255,255,0.5); 
    }
    
    @keyframes plusBounce {
        0%, 100% { transform: scale(0.9) translateY(0); }
        50% { transform: scale(1) translateY(-10px); }
    }

    .big-price { font-size: 3.5rem; }
    .addons-box { text-align: center; font-size: 0.85rem; }

    /* --- 2. GOLDEN TICKET (LAYOUT FIX) --- */
    .pricing-conclusion {
        margin-top: 40px; /* Jarak dari section atas */
        padding: 0;
    }

    .golden-ticket {
        display: flex;
        flex-direction: column;
        overflow: visible;
        
        /* TAMBAH MARGIN ATAS (Supaya stiker besar muat & gak kepotong) */
        margin-top: 80px !important; 
        
        width: 100%;
        
        /* TAMBAH PADDING DALAM (Supaya judul turun ke bawah) */
        padding-top: 100px !important; 
    }

    .ticket-grid {
        display: flex;
        flex-direction: column;
    }

    /* --- STIKER $2 (POSISI DIPERBAIKI) --- */
    .ticket-price-side {
        padding: 0;
        height: 0; /* Hilangkan tinggi container */
    }

    .price-sticker-wrapper {
        position: absolute;
        
        /* TARIK LEBIH KE ATAS (Jauhi Gunting) */
        top: -230px !important; 
        
        left: 50%;
        transform: translateX(-50%);
        z-index: 20;
        
        /* UKURAN JUMBO (Diperbesar) */
        width: 210px !important; 
        height: 210px !important;
    }

    /* Ukuran Font Stiker HP */
    .sticker-value { 
        font-size: 7.5rem !important; /* Angka $2 Makin Besar */
        line-height: 0.9 !important;
    }
    
    .sticker-label { 
        font-size: 1.2rem !important; /* Label JUST lebih jelas */
        padding: 4px 15px !important; 
    }
    
    .sticker-sub {
        font-size: 1rem !important;
        letter-spacing: 2px !important;
    }

    /* Bayangan Stiker di Lantai */
    .sticker-shadow { 
        bottom: -25px !important; 
        width: 140px !important; 
        opacity: 0.4 !important; 
    }
    
    /* Pastikan Judul Tiket Punya Jarak */
    .ticket-info-side h3 {
        margin-top: 20px !important; /* Jarak tambahan dari stiker */
    }

    /* --- GARIS SOBEKAN --- */
    .ticket-divider {
        width: 100%; height: 40px; 
        flex-direction: row; 
        
        /* Jarak dari atas (Stiker) */
        margin-top: 20px !important; 
        
        /* Jarak ke bawah (Judul Start Now) DIPERDEKAT */
        margin-bottom: 0 !important; 
    }
    .dashed-line-vert {
        width: 100%; height: 4px;
        background-image: linear-gradient(to right, #422016 50%, transparent 50%);
        background-size: 15px 4px;
    }
    .cut-icon {
        top: -12px; left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }

    /* --- KONTEN TIKET --- */
    .ticket-info-side {
        /* Hilangkan padding atas agar naik mendekati garis gunting */
        padding-top: 30px !important; 
        padding-bottom: 30px !important;
        text-align: center;
        margin-top: 5px !important; /* Jarak minim dari garis */
    }

    .ticket-info-side h3 {
        font-size: 1.8rem;
        margin-top: 0 !important; /* Hapus margin bawaan */
        margin-bottom: 15px !important;
        line-height: 1.3;
    }

    .ticket-steps li {
        justify-content: center;
        font-size: 1rem;
    }

    /* --- FOOTER TIKET (TOMBOL 2 BARIS) --- */
    .ticket-footer {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        
        /* INI KUNCINYA: Padding atas besar untuk mendorong tombol ke bawah */
        padding-top: 20px !important; 
        
        /* Padding bawah ditambah agar tiket terlihat lebih panjang */
        padding-bottom: 30px !important; 
    }

    .btn-giant {
        width: auto !important; 
        min-width: 200px !important; 
        max-width: 220px !important; 
        margin: 0 auto !important;
        transform: none !important; 
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 10px 0 !important;
        height: auto !important;
    }
    
    .price-break {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 5px !important;
    }

    /* --- BAGIAN NEGOSIASI (DIBUAT RAPI) --- */
    .negotiate-area {
        background: #FFF;
        padding: 25px 20px;
        border-radius: 20px;
        border: 2px dashed #422016;
        margin-top: 40px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
    
    .negotiate-area p {
        font-size: 1rem;
        margin: 0;
        line-height: 1.6;
    }
    
    .negotiate-area a {
        display: inline-block;
        margin-top: 10px;
        background: #25D366;
        color: #FFF !important;
        padding: 8px 20px;
        border-radius: 50px;
        text-decoration: none;
        border: none;
        font-weight: 700;
        box-shadow: 0 4px 0 #075E54;
    }
    
    .negotiate-area a:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 0 #075E54;
    }
    
    .money-back {
        display: block !important;
        width: 78% !important;
        text-align: center !important;
        
        /* Beri jarak dari tombol di atasnya */
        margin-top: 20px !important; 
        
        /* Pastikan tidak miring ke samping */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 768px) {
    .golden-ticket { width: 95%; }
    .ticket-grid { grid-template-columns: 1fr; }
    .ticket-price-side { padding-bottom: 10px; }
    .ticket-divider { 
        height: 4px; width: 100%; flex-direction: row; margin: 10px 0; 
    }
    .dashed-line-vert { width: 100%; height: 4px; background-image: linear-gradient(to right, #422016 50%, transparent 50%); background-size: 15px 100%; }
    .ticket-info-side { padding: 20px; text-align: center; }
    .ticket-steps li { justify-content: center; }
    .sticker-value { font-size: 4rem; }
    
    .price-comparison { gap: 15px; }
    .strikethrough { font-size: 1.5rem; }
    .huge-text { font-size: 3.5rem; }
    .final-offer-card { padding: 30px 20px; }
}
@media (max-width: 480px) {
    .btn-giant { font-size: 1.2rem !important; padding: 15px 30px !important; }
}

/* =========================================
   13. CONTACT SECTION
   ========================================= */
#contact {
    position: relative;
    background-color: #FFFBF0;
    background-image: 
        linear-gradient(rgba(66, 32, 22, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(66, 32, 22, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    padding-top: 100px;
    padding-bottom: 120px;
    overflow: hidden;
}

#contact::before {
    content: '';
    position: absolute; bottom: -100px; right: -100px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255, 85, 136, 0.15) 0%, transparent 70%);
    pointer-events: none; z-index: 1;
}
#contact::after {
    content: '';
    position: absolute; top: -100px; left: -100px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(76, 201, 240, 0.15) 0%, transparent 70%);
    pointer-events: none; z-index: 1;
}

.contact-wrapper {
    position: relative; z-index: 5; 
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 80px; align-items: flex-start;
}

.contact-desc {
    font-size: 1.15rem; color: #5D4037; 
    margin-bottom: 40px; line-height: 1.6; font-weight: 500;
}
.contact-details { display: flex; flex-direction: column; gap: 30px; }

.detail-item {
    display: flex; align-items: center; gap: 20px;
    text-decoration: none; transition: transform 0.3s;
    background: #FFF; padding: 15px;
    border-radius: 20px; border: 3px solid transparent;
}
.detail-item:hover {
    transform: translateX(10px);
    border-color: #F7B731; background: #FFFDE7;
    box-shadow: 5px 5px 0 rgba(0,0,0,0.1);
}

.icon-bubble {
    width: 60px; height: 60px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #FFF;
    border: 3px solid #422016; box-shadow: 3px 3px 0 #422016;
}
.email-icon { background: #FF5588; }
.wa-icon { background: #25D366; }

.detail-text { display: flex; flex-direction: column; }
.detail-text .label { font-size: 0.8rem; font-weight: 800; color: #AAA; text-transform: uppercase; }
.detail-text .value { font-family: 'Titan One', cursive; font-size: 1.2rem; color: #422016; }

.wa-badge {
    display: inline-block; font-size: 0.75rem; font-weight: 700;
    color: #D32F2F; background: #FFEBEE;
    padding: 3px 8px; border-radius: 5px; margin-top: 5px;
    width: fit-content; border: 1px dashed #D32F2F;
}

/* Contact Form */
.form-wrapper { position: relative; padding-top: 20px; }
.paper-clip {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 120px; height: 40px; background: #422016;
    border-radius: 20px; z-index: 5; box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.paper-clip::after {
    content: ''; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px;
    border: 2px dashed #7D5A50; border-radius: 10px;
}

.contact-form {
    background: #FFF; padding: 50px 40px 40px 40px;
    border-radius: 30px; border: 4px solid #422016;
    box-shadow: 15px 15px 0 rgba(66, 32, 22, 0.15); 
    position: relative;
}
.form-header {
    font-family: 'Titan One', cursive; color: #422016;
    font-size: 1.5rem; text-align: center;
    margin-bottom: 30px; padding-bottom: 20px;
    border-bottom: 2px dashed #DDD; letter-spacing: 1px;
}
.form-group { margin-bottom: 25px; }

label {
    font-family: 'Titan One', cursive; color: #555;
    font-size: 1rem; margin-bottom: 10px; display: block;
}
input, textarea, select {
    width: 100%; padding: 15px 20px;
    border-radius: 20px; border: 3px solid #EEE;
    background: #FAFAFA; font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem; color: #422016; transition: all 0.3s;
}
input:focus, textarea:focus, select:focus {
    outline: none; border-color: #FF5588; 
    background: #FFF; box-shadow: 0 5px 15px rgba(255, 85, 136, 0.15);
}
.select-wrapper { position: relative; }
.select-wrapper::after {
    content: '▼'; position: absolute; right: 20px; top: 50%;
    transform: translateY(-50%); color: #FF5588; 
    pointer-events: none; font-size: 0.8rem;
}
select { appearance: none; cursor: pointer; }
textarea { resize: vertical; min-height: 120px; border-radius: 20px; }

.contact-text { position: relative; }
.contact-text::before {
    content: ''; position: absolute;
    top: -20px; left: -20px; right: -20px; bottom: -20px;
    background: radial-gradient(rgba(255,255,255,0.8), transparent 70%);
    z-index: -1; pointer-events: none;
}

/* =========================================
   MOBILE FIX: CONTACT (ORDER PAD DESK)
   ========================================= */

@media (max-width: 968px) {

    #contact {
        padding-top: 60px;
        padding-bottom: 80px;
        /* Background tetap pattern notebook yang tenang */
    }

    /* 1. LAYOUT UMUM */
    .contact-wrapper {
        grid-template-columns: 1fr; /* Tumpuk Vertical */
        gap: 50px;
        padding: 0 10px;
    }

    /* 2. AREA TEKS & KONTAK */
    .contact-text {
        text-align: center;
        order: 1; /* Teks di atas */
    }

    .contact-desc {
        font-size: 1rem;
        margin-bottom: 30px;
    }

    /* Kartu Kontak (Disusun Rapi) */
    .contact-details {
        gap: 15px;
    }

    .detail-item {
        /* Ubah jadi Column (Icon di atas, Teks di bawah) */
        flex-direction: column; 
        align-items: center;
        text-align: center;
        padding: 20px;
        
        /* Style Kartu Putih Tebal */
        background: #FFF;
        border: 3px solid #422016;
        box-shadow: 5px 5px 0 rgba(66, 32, 22, 0.1);
    }
    
    /* Animasi Pencet saat disentuh */
    .detail-item:active {
        transform: scale(0.98);
        box-shadow: 2px 2px 0 rgba(66, 32, 22, 0.1);
    }

    .icon-bubble {
        margin-bottom: 10px;
        width: 50px; height: 50px; /* Kecilkan dikit */
        font-size: 1.3rem;
    }

    .detail-text .value {
        font-size: 1.1rem; /* Ukuran pas di HP */
        word-break: break-all; /* Agar email panjang turun baris */
    }

    /* 3. FORMULIR (ORDER PAD) */
    .form-wrapper {
        order: 2; /* Form di bawah */
        margin-top: 10px;
        /* Miring sedikit biar organik */
        transform: rotate(-1deg);
        width: 100%;
        max-width: 100%;
    }

    .contact-form {
        padding: 40px 20px 30px 20px; /* Padding dalam disesuaikan */
        border-width: 3px;
        border-radius: 20px;
    }

    /* Paper Clip Dikecilkan */
    .paper-clip {
        width: 80px; 
        height: 30px;
        border-radius: 10px;
    }
    .paper-clip::after {
        top: 6px; bottom: 6px; left: 6px; right: 6px;
    }

    .form-header {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }

    /* 4. INPUT FIELD (ANTI ZOOM & NYAMAN) */
    input, select, textarea {
        font-size: 16px !important; /* PENTING: Mencegah zoom di iPhone */
        padding: 12px 15px;
        border-width: 2px;
    }

    /* Tombol Kirim */
    .btn-block {
        width: 100%;
        padding: 15px;
        font-size: 1.1rem;
    }
    
    /* Sembunyikan dekorasi blob jika mengganggu teks */
    #contact::before, #contact::after {
        opacity: 0.3; /* Lebih transparan lagi */
    }
}

/* =========================================
   14. FOOTER: THE CHOCOLATE POOL (FIXED)
   ========================================= */

.footer {
    position: relative;
    background-color: #422016;
    color: #FFF;
    padding-bottom: 30px;
    margin-top: 0 !important; /* Wajib 0 agar tidak ada gap fisik */
    z-index: 10; /* Pastikan di atas contact */
}

/* --- GELOMBANG LELEHAN (THE WAVE) --- */
.footer-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px; /* Tinggi Gelombang Desktop */
    
    /* LOGIKA GAP FIX: */
    /* Tarik ke atas 100% dari tingginya, TAPI... */
    /* Kita kurangi sedikit jadi 99% supaya ada overlap 1% ke bawah */
    /* Ini menutup celah putih di perbatasan */
    transform: translateY(-99%); 
    
    line-height: 0;
    z-index: 1;
    pointer-events: none;
}

.footer-wave-top svg {
    height: 120px; /* Tinggi Desktop */
    width: calc(100% + 1.3px); /* Melar agar tidak ada celah pixel */
    display: block;
    
    /* Warna path sudah diatur di HTML, tapi kita kunci di sini juga biar aman */
    fill: #422016; 
}

.footer-wave svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: #422016; /* Harus sama persis dengan bg footer */
}

/* --- KONTEN FOOTER --- */
.footer-container {
    position: relative;
    z-index: 2; 
    padding-top: 20px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    border-bottom: 2px dashed rgba(255,255,255,0.1); /* Garis putus-putus halus */
    padding-bottom: 40px;
}

/* Brand */
.footer-logo-img {
    height: 70px; /* Lebih besar daripada di navbar */
    width: auto;
    display: block;
    margin-bottom: 15px; /* Jarak ke slogan */
    
    /* Agar rata kiri di desktop, atau rata tengah tergantung flex parent */
}

/* Hapus style font h2 lama di footer brand karena sudah diganti gambar */
.footer-brand h2 {
    display: none; 
}
.footer-brand .dot { color: #F7B731; }

.footer-brand p {
    color: #E0E0E0;
    font-size: 1.1rem;
    font-weight: 500;
    max-width: 300px; /* Batasi lebar teks biar rapi */
}

/* Social Icons */
.footer-candy-socials {
    display: flex;
    gap: 15px;
}

.candy-btn {
    width: 50px; height: 50px;
    background: #FFF;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    transition: transform 0.3s;
    border: 3px solid #FFF; 
    box-shadow: 0 5px 0 rgba(0,0,0,0.3);
}
.discord { 
    background: #5865F2; 
    color: #FFF; 
}
.twitter { background: #1DA1F2; color: #FFF; }
.instagram { background: #E1306C; color: #FFF; }
.linkedin { background: #0077B5; color: #FFF; }

.candy-btn:hover {
    transform: translateY(-5px) scale(1.1);
    border-color: #F7B731; 
}

/* Copyright */
.footer-bottom {
    text-align: center;
    font-size: 0.9rem;
    color: #AAA;
    font-weight: 600;
}

/* --- MOBILE RESPONSIVE FOOTER --- */
@media (max-width: 968px) {
    
    .footer {
        margin-top: 0 !important;
        padding-bottom: 100px;
        
        /* Pastikan Z-Index Footer LEBIH TINGGI dari Section Contact */
        position: relative !important;
        z-index: 20 !important; 
    }
    
    .logo img {
    height: 40px; /* Ukuran tinggi logo di navbar (sesuaikan jika perlu) */
    width: auto;  /* Lebar menyesuaikan proporsi */
    display: block;
    transition: transform 0.3s;
}
    
    .footer-logo-img {
        margin: 0 auto 15px auto; /* Rata tengah di HP */
    }

    /* FIX GELOMBANG DI HP */
    .footer-wave {
        /* Kita set tinggi pasti */
        height: 60px !important; 
        width: 100% !important;
        
        /* HAPUS TRANSFORM (Penyebab Masalah di HP) */
        transform: none !important;
        
        /* GANTI DENGAN 'TOP' NEGATIF */
        /* Naikkan seharga tingginya (60px) dikurangi 1px biar overlap */
        top: -59px !important; 
        
        left: 0 !important;
        position: absolute !important;
        
        /* Paksa tampil paling atas */
        z-index: 21 !important; 
        
        /* Pastikan tidak ada background yang menutupi */
        background: transparent !important;
        overflow: visible !important;
    }
    
    .footer-wave-top svg {
        height: 60px !important; 
    }
    
    .footer-wave svg {
        height: 100% !important;
        width: 100% !important;
        display: block !important;
        
        /* Warna harus sama persis dengan footer */
        fill: #422016 !important; 
        
        /* Matikan shadow atau filter jika ada, biar ringan */
        filter: none !important;
    }

    /* FIX LAYOUT KONTEN */
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        padding-top: 10px; /* Tambah padding dikit biar ga nempel wave */
    }

    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-brand p {
        font-size: 1rem;
        margin: 0 auto; /* Tengah */
    }

    .footer-candy-socials {
        justify-content: center; /* Icon rata tengah */
        margin-bottom: 10px;
    }
    
    .footer-bottom p {
        font-size: 0.8rem;
        padding: 0 20px;
        line-height: 1.6;
    }
}

/* =========================================
   15. FLOATING ELEMENTS
   ========================================= */
.whatsapp-float {
    position: fixed; bottom: 30px; right: 30px; 
    z-index: 1000;
    display: flex; align-items: center;
    flex-direction: row-reverse; 
    gap: 15px; text-decoration: none;
    animation: floatUp 1s ease-out;
}

.float-icon {
    width: 65px; height: 65px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #FFF; font-size: 2.2rem;
    border: 3px solid #FFF;
    box-shadow: 0 8px 0 #075E54, 0 15px 20px rgba(0,0,0,0.2);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative; z-index: 2; 
    animation: wiggle 5s ease-in-out infinite;
}

.float-icon::after {
    content: ''; position: absolute;
    top: 5px; left: 10px; width: 20px; height: 10px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%; transform: rotate(-45deg);
}

.float-text {
    background: #FFF; color: #422016;
    padding: 10px 20px; border-radius: 20px;
    font-weight: 800; font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.95rem; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: 2px solid #25D366;
    opacity: 0; transform: translateX(20px); 
    transition: all 0.4s ease; pointer-events: none;
    white-space: nowrap; 
}

.whatsapp-float:hover .float-icon {
    transform: scale(1.1); 
    box-shadow: 0 12px 0 #075E54, 0 20px 30px rgba(0,0,0,0.3);
}
.whatsapp-float:hover .float-text {
    opacity: 1; transform: translateX(0); 
}