/* ===================================================== HERO & SLIDER OVERRIDE - Baso Aci28 Tambahkan di bagian setelah style.css: ===================================================== */ /* ---- Background hero lebih kaya ---- */ .header-carousel { position: relative; overflow: hidden; } .header-carousel-item { position: relative; min-height: 620px !important; display: flex; align-items: center; background: #cc5200 !important; overflow: hidden; } /* Layer diagonal gelap di kanan */ .header-carousel-item::before { content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: #18080a; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%); z-index: 0; } /* Dot pattern di atas layer */ .header-carousel-item::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 24px 24px; z-index: 1; pointer-events: none; } /* Pastikan konten di atas layer */ .header-carousel-item .carousel-caption { position: relative; z-index: 2; top: unset; left: unset; right: unset; bottom: unset; padding: 80px 0 100px; } /* ---- Judul slide lebih bold ---- */ .header-carousel-item h1 { font-family: 'DM Sans', 'Segoe UI', sans-serif !important; font-size: clamp(2.2rem, 5vw, 3.8rem) !important; font-weight: 900 !important; color: #fff !important; line-height: 1.08 !important; letter-spacing: -1px !important; text-shadow: 0 4px 24px rgba(0,0,0,.25) !important; animation: heroTitleIn .7s ease both; } @keyframes heroTitleIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* ---- Gambar produk di slider ---- */ .slider-image-card { position: relative; } .image-container { border-radius: 50% !important; border: 3px solid rgba(255,255,255,.2) !important; box-shadow: 0 0 0 16px rgba(255,255,255,.06), 0 0 0 32px rgba(255,255,255,.03), 0 30px 60px rgba(0,0,0,.35) !important; overflow: hidden !important; animation: imgFloat 4.5s ease-in-out infinite; } @keyframes imgFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* Cincin berputar di belakang gambar */ .slider-image-card::before { content: ''; position: absolute; top: 50%; left: 50%; width: 105%; aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(255,255,255,.22); transform: translate(-50%, -50%); animation: spinRing 18s linear infinite; pointer-events: none; z-index: 0; } .slider-image-card::after { content: ''; position: absolute; top: 50%; left: 50%; width: 88%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,106,0,.45); transform: translate(-50%, -50%); animation: spinRing 12s linear infinite reverse; pointer-events: none; z-index: 0; } @keyframes spinRing { to { transform: translate(-50%,-50%) rotate(360deg); } } .slider-image { border-radius: 50% !important; object-fit: contain !important; filter: drop-shadow(0 12px 30px rgba(0,0,0,.3)) !important; } /* ---- Owl Carousel dots custom ---- */ .header-carousel .owl-dots { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 10; } .header-carousel .owl-dot span { width: 28px !important; height: 5px !important; border-radius: 3px !important; background: rgba(255,255,255,.35) !important; margin: 0 4px !important; transition: .35s !important; } .header-carousel .owl-dot.active span { width: 50px !important; background: #fff !important; } /* ---- Owl nav arrows custom ---- */ .header-carousel .owl-nav { position: absolute; bottom: 20px; right: 40px; z-index: 10; display: flex; gap: 8px; } .header-carousel .owl-nav button { width: 44px !important; height: 44px !important; border-radius: 50% !important; background: rgba(255,255,255,.15) !important; border: 1.5px solid rgba(255,255,255,.3) !important; color: #fff !important; font-size: 1.1rem !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: .25s !important; margin: 0 !important; } .header-carousel .owl-nav button:hover { background: #fff !important; color: #cc5200 !important; border-color: #fff !important; } /* ---- Gelombang bawah ---- */ .header-carousel::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 64px; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,32 C360,64 1080,0 1440,32 L1440,64 L0,64 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat bottom / cover; z-index: 5; pointer-events: none; } /* ---- Ticker strip di bawah carousel ---- */ .header-carousel-ticker { background: #18080a; overflow: hidden; padding: 13px 0; } .ticker-track { display: flex; white-space: nowrap; animation: tickerScroll 24s linear infinite; } @keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .ticker-item { display: inline-flex; align-items: center; gap: 10px; padding: 0 32px; color: rgba(255,255,255,.45); font-size: .72rem; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; } .ticker-dot { width: 5px; height: 5px; border-radius: 50%; background: #cc5200; flex-shrink: 0; } /* ---- Responsive ---- */ @media (max-width: 991px) { .header-carousel-item::before { display: none; } .header-carousel-item { min-height: 480px !important; } .image-container { width: 220px !important; } } @media (max-width: 576px) { .header-carousel-item { min-height: auto !important; } .header-carousel-item h1 { font-size: 1.9rem !important; } .header-carousel .owl-nav { display: none !important; } }