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

body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Pattern for Light & Dark Mode */
.hero-pattern-light {
    background-color: #f8fafc;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e2e8f0' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-pattern-dark {
    background-color: #0f172a;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231e293b' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

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

/* Glassmorphism utility */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.dark .glass {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}


/* --- ANIMASI KAIN SINEMATIK & PINTAR (SMART SEASON CLOTH) --- */
:root {
    --season-color-1: #fbbf24;
    --season-color-2: #0ea5e9;
    --season-color-3: #1e3a8a;
    --season-color-4: #4b5563;
    --speed-color: 25s;
    --speed-texture: 37.5s;
    --speed-folds: 10s;
    
    /* Vektor Hexagon untuk Cahaya */
    --hex-shine: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.6'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.65V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    
    /* 3 Vektor Gelombang Bawah (Seamless & Nyambung Sempurna) */
    --wave-svg-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.15' d='M0,160 Q180,260 360,160 T720,160 T1080,160 T1440,160 L1440,320 L0,320 Z'/%3E%3C/svg%3E");
    --wave-svg-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.25' d='M0,200 Q180,80 360,200 T720,200 T1080,200 T1440,200 L1440,320 L0,320 Z'/%3E%3C/svg%3E");
    --wave-svg-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.2' d='M0,180 Q180,280 360,180 T720,180 T1080,180 T1440,180 L1440,320 L0,320 Z'/%3E%3C/svg%3E");
}

.wiska-cloth-bg {
    background-color: var(--season-color-3); 
    position: relative;
    overflow: hidden;
    z-index: 0; 
    transition: background-color 1.5s ease;
    perspective: 1000px;
}

/* 1. Warna Dasar Mengalun */
.cloth-color-layer {
    position: absolute; inset: -30%; 
    background-image: 
        radial-gradient(circle at 20% 30%, var(--season-color-1) 0%, transparent 55%),
        radial-gradient(circle at 80% 70%, var(--season-color-2) 0%, transparent 55%),
        radial-gradient(circle at 50% 50%, var(--season-color-3) 0%, var(--season-color-4) 100%);
    filter: blur(60px); opacity: 0.85;
    animation: cloth-color-breathe var(--speed-color) infinite alternate ease-in-out;
    z-index: 1;
}

/* 2. Tekstur Dasar Hexagon (Statis) */
.cloth-texture-layer {
    position: absolute; inset: -20%; 
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.65V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 20px 35px; z-index: 2;
    mix-blend-mode: overlay;
    animation: fabric-texture-sway var(--speed-texture) ease-in-out infinite alternate;
    pointer-events: none;
}

/* =========================================================
   LAPISAN CAHAYA & ZOOM (SCALE ON SHINE)
   ========================================================= */

/* CAHAYA 1: DIAGONAL (Zoom 1.4x) - 14 Detik */
.cloth-texture-layer::before {
    content: ''; position: absolute; inset: 0;
    background-image: var(--hex-shine); background-size: 20px 35px; 
    mix-blend-mode: color-dodge; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.4));
    -webkit-mask-image: linear-gradient(105deg, transparent 40%, black 50%, transparent 60%);
    mask-image: linear-gradient(105deg, transparent 40%, black 50%, transparent 60%);
    -webkit-mask-size: 300% 300%; mask-size: 300% 300%;
    animation: wave-diagonal 14s infinite alternate ease-in-out;
}

/* CAHAYA 2: VERTIKAL (Zoom Ekstrem 2.0x) - 19 Detik */
.cloth-texture-layer::after {
    content: ''; position: absolute; inset: 0;
    background-image: var(--hex-shine); background-size: 20px 35px; 
    mix-blend-mode: color-dodge; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
    -webkit-mask-image: linear-gradient(90deg, transparent 45%, black 50%, transparent 55%);
    mask-image: linear-gradient(90deg, transparent 45%, black 50%, transparent 55%);
    -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
    animation: wave-vertical 19s infinite alternate ease-in-out;
}

/* CAHAYA 3: HORIZONTAL (Zoom 1.6x) - 23 Detik */
.wiska-cloth-bg::before {
    content: ''; position: absolute; inset: -20%;
    background-image: var(--hex-shine); background-size: 20px 35px; z-index: 2;
    mix-blend-mode: color-dodge; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.4)); pointer-events: none;
    -webkit-mask-image: linear-gradient(0deg, transparent 45%, black 50%, transparent 55%);
    mask-image: linear-gradient(0deg, transparent 45%, black 50%, transparent 55%);
    -webkit-mask-size: 100% 300%; mask-size: 100% 300%;
    animation: wave-horizontal 23s infinite alternate ease-in-out;
}

/* =========================================================
   LAPISAN 3: BAYANGAN ORGANIK & GULUNGAN OMBAK BAWAH
   ========================================================= */

.cloth-folds-layer {
    position: absolute; inset: -20%;
    background-image: 
        radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.15) 0%, transparent 45%),   
        radial-gradient(ellipse at 70% 80%, rgba(0,0,0,0.3) 0%, transparent 55%),         
        linear-gradient(105deg, transparent 15%, rgba(0,0,0,0.2) 30%, rgba(255,255,255,0.08) 45%, transparent 60%),  
        linear-gradient(-75deg, transparent 30%, rgba(0,0,0,0.15) 45%, rgba(255,255,255,0.05) 60%, transparent 75%); 
    background-size: 150% 150%, 150% 150%, 200% 200%, 200% 200%;
    z-index: 3; mix-blend-mode: overlay;
    animation: fabric-billow var(--speed-folds) ease-in-out infinite alternate; pointer-events: none;
}

/* GULUNGAN OMBAK 1 (Sinkron dengan Ombak Diagonal - 14 Detik) */
/* (KODE ANDA UTUH 100% TIDAK DIUBAH) */
.cloth-folds-layer::before {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; 
    height: 400px; /* Ditinggikan agar gradien punya ruang memudar */
    background-image: 
        radial-gradient(ellipse at center 100%, rgba(255,255,255,0.2) 0%, transparent 60%),
        var(--wave-svg-1);
    background-size: 100% 100%, 200% 100%;
    background-position: center bottom, 0% 100%;
    background-repeat: no-repeat, repeat-x;
    mix-blend-mode: overlay; transform-origin: bottom;
    
    /* MASKING: Gradien natural agar ujung atas ombak memudar lembut ke background */
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
    
    animation: wave-bottom-diag 14s infinite alternate ease-in-out;
}

/* GULUNGAN OMBAK 2 (Sinkron dengan Ombak Vertikal - 19 Detik) */
/* (KODE ANDA UTUH 100% TIDAK DIUBAH) */
.cloth-folds-layer::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; 
    height: 450px; /* Ditinggikan agar gradien punya ruang memudar */
    background-image: 
        radial-gradient(ellipse at center 100%, rgba(255,255,255,0.35) 0%, transparent 60%),
        var(--wave-svg-2);
    background-size: 100% 100%, 200% 100%;
    background-position: center bottom, 0% 100%;
    background-repeat: no-repeat, repeat-x;
    mix-blend-mode: overlay; transform-origin: bottom;
    
    /* MASKING: Gradien natural agar ujung atas ombak memudar lembut ke background */
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
    
    animation: wave-bottom-vert 19s infinite alternate ease-in-out;
}

/* GULUNGAN OMBAK 3 (DIPERBAIKI AGAR TIDAK TABRAKAN) */
/* Menggunakan .wiska-cloth-bg::after sebagai tempat baru */
.wiska-cloth-bg::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; 
    height: 500px; /* Ditinggikan agar gradien punya ruang memudar */
    background-image: 
        radial-gradient(ellipse at center 100%, rgba(255,255,255,0.2) 0%, transparent 60%),
        var(--wave-svg-3);
    background-size: 100% 200%, 200% 100%;
    background-position: center bottom, 0% 100%;
    /* Diperbaiki: Ditambahkan 'no-repeat' untuk gradien cahaya, dan 'repeat-x' untuk ombaknya */
    background-repeat: no-repeat, repeat-x;
    mix-blend-mode: overlay; transform-origin: bottom;
    z-index: 3; pointer-events: none;
    
    /* MASKING: Gradien natural agar ujung atas ombak memudar lembut ke background */
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
    
    /* DIPERBAIKI: Animasi memanggil wave-bottom-horz, bukan wave-bottom-diag */
    animation: wave-bottom-horz 23s infinite alternate ease-in-out;
}


/* 4. Kaca Overlay */
.cloth-glass-layer {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0.7) 100%);
    z-index: 4; pointer-events: none;
}

/* --- Kumpulan Keyframes Gerakan Natural --- */

@keyframes cloth-color-breathe {
    0% { transform: scale(1) translate(0, 0); }
    50% { transform: scale(1.05) translate(2%, 3%); }
    100% { transform: scale(1.02) translate(-2%, 2%); }
}

@keyframes fabric-texture-sway {
    0% { transform: scale(1) translate(0, 0) rotate(0deg); }
    50% { transform: scale(1.03) translate(1%, 2%) rotate(0.5deg); }
    100% { transform: scale(0.98) translate(-1%, -1%) rotate(-0.5deg); }
}

@keyframes fabric-billow {
    0% { background-position: 0% 0%, 100% 100%, 0% 0%, 100% 0%; transform: scale(1) rotate(0deg); }
    33% { background-position: 30% 20%, 70% 80%, 20% 30%, 80% 20%; transform: scale(1.02) rotate(1deg); }
    66% { background-position: 60% 80%, 40% 20%, 60% 70%, 40% 80%; transform: scale(1.04) rotate(-0.5deg); }
    100% { background-position: 100% 100%, 0% 0%, 100% 100%, 0% 100%; transform: scale(1) rotate(0deg); }
}

/* --- KEYFRAMES SCALE ON SHINE --- */
@keyframes wave-diagonal {
    0% { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; transform: scale(1.0); opacity: 0; }
    20% { opacity: 1; transform: scale(1.1); }
    50% { -webkit-mask-position: 50% 50%; mask-position: 50% 50%; transform: scale(1.4) rotate(1deg); opacity: 1; }
    80% { opacity: 0.5; }
    100% { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; transform: scale(1.0); opacity: 0; }
}

@keyframes wave-vertical {
    0% { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; transform: scale(1.0); opacity: 0; }
    35% { opacity: 0; transform: scale(1.0); } 
    45% { opacity: 1; transform: scale(1.2); }
    60% { -webkit-mask-position: 60% 0%; mask-position: 60% 0%; transform: scale(2.0); opacity: 1; } 
    80% { opacity: 0; transform: scale(1.1); }
    100% { -webkit-mask-position: 100% 0%; mask-position: 100% 0%; transform: scale(1.0); opacity: 0; }
}

@keyframes wave-horizontal {
    0% { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; transform: scale(1.0); opacity: 0; }
    15% { opacity: 0.8; transform: scale(1.1); }
    40% { -webkit-mask-position: 0% 40%; mask-position: 0% 40%; transform: scale(1.6) rotate(-1deg); opacity: 1; }
    75% { opacity: 0; transform: scale(1.2); }
    100% { -webkit-mask-position: 0% 100%; mask-position: 0% 100%; transform: scale(1.0); opacity: 0; }
}

/* --- KEYFRAMES GULUNGAN OMBAK BAWAH (Sinkronisasi Sempurna) --- */
@keyframes wave-bottom-diag {
    0% { transform: scaleY(0.7); background-position: center bottom, 0% 100%; opacity: 0; }
    20% { opacity: 0.5; }
    50% { transform: scaleY(1.3); background-position: center bottom, 50% 100%; opacity: 0.9; } /* MEMBESAR saat ombak Diagonal di 50% */
    80% { opacity: 0.5; }
    100% { transform: scaleY(0.7); background-position: center bottom, 100% 100%; opacity: 0; }
}

@keyframes wave-bottom-vert {
    0% { transform: scaleY(0.5); background-position: center bottom, 0% 100%; opacity: 0; }
    35% { opacity: 0; }
    45% { opacity: 0.7; }
    60% { transform: scaleY(1.8); background-position: center bottom, 60% 100%; opacity: 1; } /* NAIK TAJAM saat ombak Vertikal di 60% */
    80% { opacity: 0; }
    100% { transform: scaleY(0.5); background-position: center bottom, 100% 100%; opacity: 0; }
}

@keyframes wave-bottom-horz {
    0% { transform: scaleY(0.5); background-position: center bottom, 50% 50%; opacity: 1; }
    15% { opacity: 0.5; }
    40% { transform: scaleY(0.5); background-position: center bottom, 40% 80%; opacity: 0.5; }
    75% { transform: scaleY(1.2); background-position: center bottom, 80% 50%; opacity: 0.75; }
    100% { transform: scaleY(0.8); background-position: center bottom, 50% 50%; opacity: 0.4; }
}
/* =========================================================
   OPTIMASI KHUSUS MOBILE UNTUK PERFORMA SUPER RINGAN 
   (Tampilan Desktop Tetap Utuh dan Sempurna)
   ========================================================= */
@media (max-width: 768px) {
    
    /* --- 1. MENGHILANGKAN GULUNGAN OMBAK BAWAH DI HP --- */
    /* Menggunakan display: none akan menghapus elemen dari proses render HP sepenuhnya.
       Beban grafis akan turun drastis seketika! */
    .cloth-folds-layer::before,
    .cloth-folds-layer::after,
    .wiska-cloth-bg::after {
        display: none !important;
        animation: none !important;
    }

    /* --- 2. OPTIMASI ANIMASI CAHAYA YANG TERSISA (ANTI-LAG) --- */
    /* Menurunkan blur background agar memori grafis tidak terkuras */
    .cloth-color-layer {
        filter: blur(30px) !important; 
        transform: translateZ(0); /* Trik Hardware Acceleration */
        will-change: transform;
    }
    
    /* Mematikan drop-shadow dan memaksa Akselerasi GPU untuk efek Scale on Shine */
    .cloth-texture-layer::before,
    .cloth-texture-layer::after,
    .wiska-cloth-bg::before {
        filter: none !important; /* Mematikan drop-shadow yang berat */
        backface-visibility: hidden; 
        perspective: 1000px; 
        transform: translateZ(0); /* Memaksa HP menggunakan Kartu Grafis (GPU) */
        /* Memberitahu browser atribut apa saja yang akan bergerak agar disiapkan dari awal */
        will-change: transform, opacity, mask-position, -webkit-mask-position;
    }
}



/* --- Custom Scrollbar for Read More Text Area --- */
.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05); 
    border-radius: 10px;
}
.dark .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05); 
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(245, 158, 11, 0.4); /* Warna amber-500 transparan */
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(245, 158, 11, 0.8);
}


/* --- Infinite Horizontal Scroll (Partners Section) --- */
@keyframes scrollX {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Bergeser 50% karena kita memiliki 2 set kartu yang identik */
}

.animate-scrollX {
    animation: scrollX 25s linear infinite; /* 25s adalah kecepatan. Semakin besar semakin lambat */
    width: max-content;
}

/* Animasi akan berhenti saat kursor diarahkan ke area pergerakan */
.animate-scrollX:hover {
    animation-play-state: paused;
}



/* --- Gallery Scroll Animasi --- */
@keyframes galleryScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-100% / 2)); } /* Bergeser sejauh panjang separuh grup */
}

/* Hanya aktifkan infinite scroll di desktop (min-width: 768px). 
   Di mobile, kita biarkan user menggeser (swipe) secara manual pakai jari. */
@media (min-width: 768px) {
    .animate-galleryScroll {
        animation: galleryScroll 40s linear infinite; 
    }
}

/* Sembunyikan scrollbar bawaan browser pada gallery mobile */
.hide-scrollbar-mobile::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar-mobile {
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}

/* Animasi untuk transisi gambar di Lightbox */
.lightbox-scale-in {
    transform: scale(1) !important;
    opacity: 1 !important;
}