/** * Kaisar EVS Custom CSS * * CSS variables (design tokens), custom components, and global overrides * for the Kaisar EVS landing page. * * @package kaisar-evs-child * @version 1.0.0 */ /* ========================================================================== DESIGN TOKENS — CSS Custom Properties Breakpoint reference (komentar, bukan variabel CSS): - Mobile kecil : 360px - Tablet : 768px - Desktop kecil: 1024px - Desktop besar: 1440px ========================================================================== */ :root { /* -------------------------------------------------------------------------- WARNA — Brand & Neutral Palette Semua kombinasi teks-latar memenuhi WCAG 2.1 AA (rasio kontras ≥ 4.5:1) -------------------------------------------------------------------------- */ /* Brand utama */ --color-primary: #E63329; /* Merah Kaisar EVS — CTA, aksen */ --color-primary-dark: #C0271E; /* Hover/active state tombol merah */ --color-primary-light: #FF5A52; /* Tint merah untuk latar terang */ /* Brand gelap */ --color-dark: #1A1A2E; /* Navy gelap — header, footer, teks heading */ --color-dark-80: rgba(26, 26, 46, 0.80); /* Overlay navigasi sticky */ --color-dark-95: rgba(26, 26, 46, 0.95); /* Background navbar dengan blur */ /* WhatsApp */ --color-wa: #25D366; /* Hijau WhatsApp — tombol & sticky button */ --color-wa-dark: #1DA851; /* Hover/active state tombol WhatsApp */ --color-wa-text: #1A7A3C; /* Teks hijau pada latar terang — kontras ≥4.95:1 ✓ */ /* Netral */ --color-white: #FFFFFF; --color-gray-50: #F8F8F8; /* Latar section bergantian */ --color-gray-100: #F0F0F0; /* Border, divider halus */ --color-gray-300: #CCCCCC; /* Placeholder, disabled */ --color-gray-500: #888888; /* Teks sekunder / caption */ --color-gray-700: #444444; /* Teks body utama */ --color-gray-900: #1A1A1A; /* Teks heading gelap */ /* Teks */ --color-text-primary: #1A1A2E; /* Heading & teks penting */ --color-text-body: #444444; /* Paragraf & deskripsi */ --color-text-muted: #6E6E6E; /* Label, caption, metadata — kontras 4.54:1 pada putih & 4.80:1 pada #F8F8F8 ✓ */ --color-text-muted-on-tint: #5E5E5E; /* Teks muted pada latar tint (savings-bg) — kontras ≥5.95:1 ✓ */ --color-text-inverse: #FFFFFF; /* Teks di atas latar gelap */ /* Status */ --color-success: #25D366; --color-error: #E63329; --color-warning: #F5A623; /* -------------------------------------------------------------------------- TIPOGRAFI -------------------------------------------------------------------------- */ /* Font family */ --font-family-base: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-family-heading: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* Ukuran font — Mobile first (default = mobile) */ --font-size-xs: 12px; --font-size-sm: 14px; --font-size-base: 16px; /* Body teks */ --font-size-md: 18px; --font-size-lg: 20px; --font-size-xl: 24px; --font-size-h2: 22px; --font-size-h1: 28px; /* Heading utama mobile (Req 1.2) */ /* Ukuran font — Desktop (override via media query di bawah) */ --font-size-h1-desktop: 48px; /* Heading utama desktop (design.md) */ --font-size-h2-desktop: 36px; --font-size-xl-desktop: 28px; /* Font weight */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold:800; /* Line height */ --line-height-tight: 1.2; /* Heading besar */ --line-height-snug: 1.35; /* Heading kecil / sub-heading */ --line-height-normal: 1.5; /* Body teks */ --line-height-relaxed: 1.7; /* Paragraf panjang */ /* Letter spacing */ --letter-spacing-tight: -0.02em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.04em; /* Label / badge */ /* -------------------------------------------------------------------------- SPACING SCALE — Mobile-first, 4px base unit -------------------------------------------------------------------------- */ --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-8: 32px; --spacing-10: 40px; --spacing-12: 48px; --spacing-16: 64px; --spacing-20: 80px; --spacing-24: 96px; /* Alias semantik */ --spacing-xs: var(--spacing-2); /* 8px */ --spacing-sm: var(--spacing-3); /* 12px */ --spacing-md: var(--spacing-4); /* 16px */ --spacing-lg: var(--spacing-6); /* 24px */ --spacing-xl: var(--spacing-8); /* 32px */ --spacing-2xl: var(--spacing-12); /* 48px */ --spacing-3xl: var(--spacing-16); /* 64px */ /* Section padding (mobile) */ --section-padding-y: var(--spacing-10); /* 40px */ --section-padding-x: var(--spacing-4); /* 16px */ /* -------------------------------------------------------------------------- BORDER RADIUS -------------------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* Pill / lingkaran */ /* Alias komponen */ --radius-btn: var(--radius-md); /* Tombol */ --radius-card: var(--radius-lg); /* Kartu produk, testimoni */ --radius-badge: var(--radius-full); /* Badge / label */ /* -------------------------------------------------------------------------- BOX SHADOW -------------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15); --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.18); /* Alias komponen */ --shadow-card: var(--shadow-md); --shadow-btn: 0 2px 8px rgba(230, 51, 41, 0.35); /* Tombol merah */ --shadow-btn-wa: 0 4px 12px rgba(37, 211, 102, 0.40); /* Tombol WhatsApp */ --shadow-sticky: 0 4px 12px rgba(0, 0, 0, 0.30); /* Sticky WA button */ --shadow-navbar: 0 2px 8px rgba(0, 0, 0, 0.20); /* Navigasi sticky */ /* -------------------------------------------------------------------------- TRANSISI & ANIMASI -------------------------------------------------------------------------- */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; --transition-slow: 0.40s ease; /* -------------------------------------------------------------------------- Z-INDEX SCALE -------------------------------------------------------------------------- */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-navbar: 500; --z-modal: 1000; --z-toast: 1100; --z-wa-button: 9999; /* -------------------------------------------------------------------------- LAYOUT -------------------------------------------------------------------------- */ --container-max-width: 1200px; --container-padding: var(--spacing-4); /* 16px mobile */ } /* ========================================================================== OVERRIDE TIPOGRAFI — Desktop (≥ 1024px) ========================================================================== */ @media (min-width: 1024px) { :root { --font-size-h1: var(--font-size-h1-desktop); /* 48px */ --font-size-h2: var(--font-size-h2-desktop); /* 36px */ --font-size-xl: var(--font-size-xl-desktop); /* 28px */ --section-padding-y: var(--spacing-16); /* 64px */ --section-padding-x: var(--spacing-8); /* 32px */ --container-padding: var(--spacing-8); /* 32px */ } } /* ========================================================================== BASE RESET & GLOBAL STYLES ========================================================================== */ /** * Box-sizing reset — semua elemen menggunakan border-box * Memastikan padding dan border tidak menambah lebar elemen */ *, *::before, *::after { box-sizing: border-box; } /** * Body — font, warna, dan line-height global * Menggunakan CSS variables dari design tokens (task 2.1) */ body { font-family: var(--font-family-base); font-size: var(--font-size-base); /* 16px */ font-weight: var(--font-weight-regular); line-height: var(--line-height-normal); /* 1.5 */ color: var(--color-text-body); /* #444444 — rasio kontras ≥ 4.5:1 pada latar putih */ background-color: var(--color-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /** * Heading — h1 hingga h4 * Menggunakan --color-text-primary (#1A1A2E) dan --font-family-heading * Rasio kontras #1A1A2E pada latar putih: ~14:1 (jauh melampaui WCAG AA 4.5:1) */ h1, h2, h3, h4 { font-family: var(--font-family-heading); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-text-primary); /* #1A1A2E */ margin-top: 0; margin-bottom: var(--spacing-4); /* 16px */ letter-spacing: var(--letter-spacing-tight); } h1 { font-size: var(--font-size-h1); /* 28px mobile → 48px desktop via :root override */ font-weight: var(--font-weight-extrabold); } h2 { font-size: var(--font-size-h2); /* 22px mobile → 36px desktop */ font-weight: var(--font-weight-bold); } h3 { font-size: var(--font-size-xl); /* 24px mobile → 28px desktop */ font-weight: var(--font-weight-semibold); } h4 { font-size: var(--font-size-lg); /* 20px */ font-weight: var(--font-weight-semibold); } /** * Paragraf */ p { margin-top: 0; margin-bottom: var(--spacing-4); /* 16px */ line-height: var(--line-height-relaxed); /* 1.7 untuk keterbacaan paragraf panjang */ } /** * Tautan (link) * Warna --color-primary-dark (#C0271E) pada latar putih: rasio kontras ~5.9:1 (WCAG AA ✓) * Fix task 18.4: #E63329 hanya 4.31:1 pada putih — diganti #C0271E */ a { color: var(--color-primary-dark); /* #C0271E — kontras 5.92:1 pada putih ✓ */ text-decoration: underline; transition: color var(--transition-fast); } a:hover, a:focus { color: var(--color-primary-dark); /* #C0271E — lebih gelap saat hover */ text-decoration: underline; } /** * Gambar — responsif secara default */ img { max-width: 100%; height: auto; display: block; } /* ========================================================================== KOMPONEN TOMBOL — CTA Utilities ========================================================================== */ /** * Base tombol — shared styles untuk .btn-whatsapp dan .btn-secondary */ .btn-whatsapp, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2); /* 8px — jarak antara ikon dan teks */ padding: var(--spacing-3) var(--spacing-6); /* 12px 24px */ border-radius: var(--radius-btn); /* 8px */ font-family: var(--font-family-base); font-size: var(--font-size-base); /* 16px */ font-weight: var(--font-weight-bold); line-height: 1; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-fast); white-space: nowrap; user-select: none; -webkit-user-select: none; } .btn-whatsapp:active, .btn-secondary:active { transform: translateY(1px); } /* -------------------------------------------------------------------------- .btn-whatsapp — Tombol CTA Primer (merah Kaisar EVS) Kontras: putih (#FFFFFF) pada merah (#E63329) = ~4.6:1 (WCAG 2.1 AA ✓) -------------------------------------------------------------------------- */ /** * .btn-whatsapp * * Tombol CTA utama untuk semua aksi WhatsApp di landing page * (Hero, Kalkulator Cuan, Kartu Produk, Garansi, Pembiayaan). * * Requirement 8.5: kontras teks ≥ 4.5:1 * Fix task 18.4: background diubah ke #C0271E (5.92:1) karena #E63329 hanya 4.31:1 * Requirement 10.1: konsisten dengan panduan merek Kaisar EVS */ .btn-whatsapp { background-color: var(--color-primary-dark); /* #C0271E — kontras putih 5.92:1 ✓ */ color: var(--color-text-inverse); /* #FFFFFF */ border-color: var(--color-primary-dark); box-shadow: var(--shadow-btn); /* 0 2px 8px rgba(230,51,41,0.35) */ } .btn-whatsapp:hover { background-color: var(--color-primary-dark); /* #C0271E */ border-color: var(--color-primary-dark); color: var(--color-text-inverse); box-shadow: 0 4px 16px rgba(192, 39, 30, 0.45); text-decoration: none; } .btn-whatsapp:focus { color: var(--color-text-inverse); text-decoration: none; } /* Focus-visible: outline keyboard yang jelas (WCAG 2.1 AA — Req 8.6) */ .btn-whatsapp:focus-visible { outline: 3px solid var(--color-primary-dark); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(230, 51, 41, 0.25); } /* -------------------------------------------------------------------------- .btn-secondary — Tombol CTA Sekunder (outline merah) Kontras: merah (#E63329) pada latar putih = ~4.6:1 (WCAG 2.1 AA ✓) -------------------------------------------------------------------------- */ /** * .btn-secondary * * Tombol CTA sekunder dengan style outline. * Digunakan berdampingan dengan .btn-whatsapp (contoh: "Download Brosur" * di Hero Section). * * Requirement 8.5: kontras teks ≥ 4.5:1 * Fix task 18.4: warna teks diubah ke #C0271E (5.92:1 pada putih) karena #E63329 hanya 4.31:1 * Requirement 10.1: konsisten dengan panduan merek Kaisar EVS */ .btn-secondary { background-color: transparent; color: var(--color-primary-dark); /* #C0271E — kontras 5.92:1 pada putih ✓ */ border-color: var(--color-primary-dark); } .btn-secondary:hover { background-color: var(--color-primary-dark); /* Fill merah gelap saat hover */ color: var(--color-text-inverse); /* Teks putih — kontras 5.92:1 ✓ */ border-color: var(--color-primary-dark); box-shadow: var(--shadow-btn); text-decoration: none; } .btn-secondary:focus { color: var(--color-primary-dark); text-decoration: none; } /* Focus-visible: outline keyboard yang jelas (WCAG 2.1 AA — Req 8.6) */ .btn-secondary:focus-visible { outline: 3px solid var(--color-primary-dark); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(192, 39, 30, 0.20); } /* Variant: .btn-secondary di atas latar gelap (misal: footer, hero dengan overlay) */ .btn-secondary--inverse { color: var(--color-white); border-color: var(--color-white); } .btn-secondary--inverse:hover { background-color: var(--color-white); color: var(--color-primary); border-color: var(--color-white); } .btn-secondary--inverse:focus-visible { outline-color: var(--color-white); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.30); } /* ========================================================================== AKSESIBILITAS — Focus Visible Global (WCAG 2.1 AA) Requirement 8.6: halaman dapat dioperasikan sepenuhnya via keyboard ========================================================================== */ /** * Global :focus-visible — outline untuk navigasi keyboard * Hanya tampil saat navigasi keyboard (bukan klik mouse), menggunakan * :focus-visible pseudo-class yang didukung semua browser modern. */ :focus-visible { outline: 3px solid var(--color-primary); /* #E63329 */ outline-offset: 2px; } /** * Hapus outline default browser yang kurang konsisten, * tapi HANYA untuk elemen yang sudah mendapat :focus-visible di atas. * Elemen yang tidak mendukung :focus-visible tetap mendapat outline. */ :focus:not(:focus-visible) { outline: none; } /* ========================================================================== UTILITY CLASSES ========================================================================== */ /** * .visually-hidden — Konten hanya untuk screen reader * Menyembunyikan elemen secara visual tanpa menghapusnya dari accessibility tree. * Digunakan untuk label aksesibel, teks alternatif, dan instruksi tersembunyi. * * Requirement 8.4, 8.6 */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /** * .container — Wrapper konten dengan max-width dan centering * Menggunakan --container-max-width (1200px) dan --container-padding dari design tokens. */ .container { width: 100%; max-width: var(--container-max-width); /* 1200px */ margin-right: auto; margin-left: auto; padding-right: var(--container-padding); /* 16px mobile → 32px desktop */ padding-left: var(--container-padding); } /** * .text-center — Perataan teks ke tengah */ .text-center { text-align: center; } /* ========================================================================== SECTION: KEUNGGULAN PRODUK (#keunggulan) Requirement 3.1, 3.3 — Grid responsif 4 poin keunggulan ========================================================================== */ /** * Section wrapper — anchor ID #keunggulan * Latar bergantian menggunakan --color-gray-50 (#F8F8F8) */ #keunggulan { padding-top: var(--section-padding-y); /* 40px mobile → 64px desktop */ padding-bottom: var(--section-padding-y); padding-left: var(--section-padding-x); /* 16px mobile → 32px desktop */ padding-right: var(--section-padding-x); background-color: var(--color-gray-50); } /** * Section header — judul dan sub-judul */ .keunggulan-header { text-align: center; margin-bottom: var(--spacing-10); /* 40px */ } .keunggulan-header h2 { font-size: var(--font-size-h2); /* 22px mobile → 36px desktop */ font-weight: var(--font-weight-bold); color: var(--color-text-primary); /* #1A1A2E */ margin-bottom: var(--spacing-3); /* 12px */ } .keunggulan-header p { font-size: var(--font-size-base); /* 16px */ color: var(--color-text-muted); /* #6E6E6E — kontras 4.54:1 pada putih, 4.80:1 pada #F8F8F8 ✓ */ max-width: 600px; margin-left: auto; margin-right: auto; margin-bottom: 0; } /** * Grid container — CSS Grid responsif * Requirement 3.3: * - 1 kolom pada mobile (360px) * - 2 kolom pada tablet (768px) * - 4 kolom pada desktop (1024px+) */ .keunggulan-grid { display: grid; grid-template-columns: 1fr; /* Mobile: 1 kolom */ gap: var(--spacing-6); /* 24px */ max-width: var(--container-max-width); /* 1200px */ margin-left: auto; margin-right: auto; } @media (min-width: 768px) { .keunggulan-grid { grid-template-columns: repeat(2, 1fr); /* Tablet: 2 kolom */ } } @media (min-width: 1024px) { .keunggulan-grid { grid-template-columns: repeat(4, 1fr); /* Desktop: 4 kolom */ gap: var(--spacing-8); /* 32px */ } } /** * Item keunggulan — kartu individual * Setiap item berisi ikon, judul, dan deskripsi singkat */ .keunggulan-item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--spacing-8); /* 32px */ background-color: var(--color-white); border-radius: var(--radius-card); /* 12px */ box-shadow: var(--shadow-card); /* 0 4px 12px rgba(0,0,0,0.12) */ transition: box-shadow var(--transition-normal), transform var(--transition-normal); } .keunggulan-item:hover { box-shadow: var(--shadow-lg); /* 0 8px 24px rgba(0,0,0,0.15) */ transform: translateY(-2px); } /** * Ikon keunggulan * Ukuran 64×64px, warna aksen merah Kaisar EVS */ .keunggulan-icon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: var(--radius-full); /* Lingkaran */ background-color: rgba(230, 51, 41, 0.08); /* Tint merah sangat terang */ margin-bottom: var(--spacing-5); /* 20px */ flex-shrink: 0; } .keunggulan-icon img { width: 40px; height: 40px; object-fit: contain; } /* Fallback: emoji/teks ikon jika SVG tidak tersedia */ .keunggulan-icon--emoji { font-size: 36px; line-height: 1; } /** * Judul item keunggulan * Kontras: #1A1A2E pada latar putih = ~14:1 (WCAG AA ✓) */ .keunggulan-title { font-size: var(--font-size-md); /* 18px */ font-weight: var(--font-weight-semibold); color: var(--color-text-primary); /* #1A1A2E */ margin-bottom: var(--spacing-3); /* 12px */ line-height: var(--line-height-snug); /* 1.35 */ } /** * Deskripsi item keunggulan * Kontras: #444444 pada latar putih = ~9.7:1 (WCAG AA ✓) */ .keunggulan-desc { font-size: var(--font-size-sm); /* 14px */ color: var(--color-text-body); /* #444444 */ line-height: var(--line-height-relaxed); /* 1.7 */ margin-bottom: 0; } /* ========================================================================== SECTION: HERO (#hero) Requirements: 1.1, 1.2, 1.3 Layout: - Mobile (<1024px) : satu kolom — teks di atas, visual di bawah - Desktop (≥1024px): dua kolom — teks (kiri) + visual produk (kanan) Background: #1A1A2E (--color-dark) Anchor ID : #hero ========================================================================== */ /** * Section wrapper — anchor ID #hero * Background gelap navy sesuai brand Kaisar EVS * Kontras teks putih (#FFFFFF) pada latar #1A1A2E: ~14:1 (WCAG AA ✓) */ #hero { background-color: var(--color-dark); /* #1A1A2E */ padding-top: var(--spacing-16); /* 64px mobile */ padding-bottom: var(--spacing-16); padding-left: var(--section-padding-x); /* 16px mobile → 32px desktop */ padding-right: var(--section-padding-x); overflow: hidden; position: relative; } /** * Container dalam hero — flex column mobile, flex row desktop */ .hero-section__container { display: flex; flex-direction: column; /* Mobile: satu kolom, teks di atas */ align-items: center; gap: var(--spacing-10); /* 40px antara kolom teks dan visual */ } /* -------------------------------------------------------------------------- KOLOM KIRI — Konten teks & CTA -------------------------------------------------------------------------- */ /** * Kolom konten teks * Mobile: lebar penuh, teks rata tengah * Desktop: 50% lebar, teks rata kiri */ .hero-section__content { width: 100%; text-align: center; /* Mobile: teks rata tengah */ display: flex; flex-direction: column; align-items: center; } /** * Headline utama (Requirement 1.2) * Font: min 28px mobile (via --font-size-h1), 48px desktop * Warna: --color-text-inverse (#FFFFFF) di atas latar #1A1A2E * Kontras: ~14:1 (WCAG AA ✓) */ .hero-section__headline { font-size: var(--font-size-h1); /* 28px mobile → 48px desktop */ font-weight: var(--font-weight-extrabold); /* 800 */ line-height: var(--line-height-tight); /* 1.2 */ color: var(--color-text-inverse); /* #FFFFFF */ letter-spacing: var(--letter-spacing-tight); /* -0.02em */ margin-bottom: var(--spacing-5); /* 20px */ } /** * Sub-headline (Requirement 1.3) * Font: 16px, warna putih dengan opacity untuk hierarki visual * Kontras: rgba(255,255,255,0.85) pada #1A1A2E: ~11:1 (WCAG AA ✓) */ .hero-section__subheadline { font-size: var(--font-size-base); /* 16px */ font-weight: var(--font-weight-regular); line-height: var(--line-height-relaxed); /* 1.7 */ color: rgba(255, 255, 255, 0.85); margin-bottom: var(--spacing-8); /* 32px */ max-width: 560px; } /** * Grup tombol CTA — dua tombol berdampingan * Mobile: kolom (tombol penuh lebar), Desktop: baris */ .hero-section__cta-group { display: flex; flex-direction: column; /* Mobile: tombol ditumpuk */ gap: var(--spacing-4); /* 16px */ width: 100%; max-width: 400px; } /** * Tombol CTA primer (WhatsApp) — lebar penuh pada mobile */ .hero-section__btn-primary { width: 100%; justify-content: center; } /** * Tombol CTA sekunder (Brosur) — lebar penuh pada mobile */ .hero-section__btn-secondary { width: 100%; justify-content: center; } /** * Pesan fallback brosur tidak tersedia * Kontras: rgba(255,255,255,0.70) pada #1A1A2E: ~8:1 (WCAG AA ✓) */ .hero-section__brosur-notice { font-size: var(--font-size-sm); /* 14px */ color: rgba(255, 255, 255, 0.70); margin-bottom: var(--spacing-3); /* 12px */ font-style: italic; } /** * Kontak fallback tersembunyi (ditampilkan via JS jika WhatsApp gagal) */ .hero-section__contact-fallback--hidden { display: none; } .hero-section__contact-fallback { margin-top: var(--spacing-5); /* 20px */ font-size: var(--font-size-sm); /* 14px */ color: rgba(255, 255, 255, 0.70); display: flex; flex-direction: column; gap: var(--spacing-2); /* 8px */ align-items: center; } .hero-section__phone-link, .hero-section__social-link { color: var(--color-white); text-decoration: underline; font-weight: var(--font-weight-medium); } .hero-section__phone-link:hover, .hero-section__social-link:hover { color: var(--color-primary-light); /* #FF5A52 */ } /* -------------------------------------------------------------------------- KOLOM KANAN — Visual produk (foto/video) -------------------------------------------------------------------------- */ /** * Kolom visual produk * Mobile: lebar penuh, di bawah konten teks * Desktop: 50% lebar, di sebelah kanan konten teks */ .hero-section__visual { width: 100%; display: flex; align-items: center; justify-content: center; position: relative; } /* ── Canvas partikel — full cover di belakang semua konten hero ── */ .hero-section__particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } /* Pastikan konten hero di atas canvas */ .hero-section__container { position: relative; z-index: 1; } /* ── Dual images layout — dihapus, kembali ke satu gambar ── */ /** * Gambar hero — responsif, mengisi kolom kanan penuh * PNG produk dengan background transparan/putih di atas latar gelap * Requirement 9.3: width dan height eksplisit */ .hero-section__image { width: 100%; height: auto; max-width: 100%; object-fit: contain; /* contain agar proporsi terjaga */ object-position: center bottom; /* jangkar ke bawah agar roda terlihat */ filter: drop-shadow(0 8px 32px rgba(0,0,0,0.45)); /* shadow pada objek PNG transparan */ border-radius: 0; /* tidak perlu radius untuk PNG produk */ } /** * Wrapper elemen */ .hero-section__picture { display: flex; align-items: flex-end; /* gambar motor rata bawah */ justify-content: center; width: 100%; max-width: 100%; min-height: 280px; /* tinggi minimum agar gambar tidak terlalu kecil */ } /** * Wrapper video hero */ .hero-section__video-wrapper { position: relative; width: 100%; max-width: 600px; } /** * Video hero — responsif */ .hero-section__video { width: 100%; height: auto; border-radius: var(--radius-xl); /* 16px */ box-shadow: var(--shadow-xl); display: block; } /** * Tombol toggle video (putar/jeda) * Posisi: sudut kanan bawah video */ .hero-section__video-toggle { position: absolute; bottom: var(--spacing-4); /* 16px */ right: var(--spacing-4); width: 44px; height: 44px; border-radius: var(--radius-full); background-color: rgba(26, 26, 46, 0.75); /* --color-dark dengan opacity */ border: 2px solid rgba(255, 255, 255, 0.40); color: var(--color-white); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--transition-normal), border-color var(--transition-normal); } .hero-section__video-toggle:hover { background-color: rgba(26, 26, 46, 0.95); border-color: rgba(255, 255, 255, 0.80); } .hero-section__video-toggle:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; } /* -------------------------------------------------------------------------- PLACEHOLDER VISUAL — Saat gambar/video belum tersedia -------------------------------------------------------------------------- */ /** * Placeholder area visual produk * Ditampilkan saat tidak ada gambar/video yang tersedia */ .hero-section__visual-placeholder { width: 100%; max-width: 600px; aspect-ratio: 4 / 3; background-color: rgba(255, 255, 255, 0.06); border: 2px dashed rgba(255, 255, 255, 0.20); border-radius: var(--radius-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-3); color: rgba(255, 255, 255, 0.50); font-size: var(--font-size-sm); text-align: center; padding: var(--spacing-8); } .hero-section__visual-placeholder-icon { font-size: 48px; line-height: 1; } /* ========================================================================== HERO — OVERRIDE DESKTOP (≥ 1024px) Layout dua kolom: teks (kiri) + visual (kanan) ========================================================================== */ @media (min-width: 1024px) { #hero { padding-top: var(--spacing-20); /* 80px desktop */ padding-bottom: var(--spacing-20); overflow: hidden; position: relative; min-height: 100vh; /* memenuhi tinggi layar penuh */ display: flex; align-items: center; } /** * Container: flex row — kolom kiri teks saja * Kolom kanan (visual) dikeluarkan dari flow, absolute ke #hero */ .hero-section__container { flex-direction: row; align-items: center; gap: 0; position: static; /* visual absolute relatif ke #hero, bukan container */ } /** * Kolom kiri — teks, lebar 50% dari container */ .hero-section__content { flex: 0 0 50%; max-width: 50%; text-align: left; align-items: flex-start; padding-right: var(--spacing-8); position: relative; z-index: 2; } /** * Headline desktop: 48px (via --font-size-h1 override di :root) */ .hero-section__headline { max-width: 600px; } /** * Sub-headline desktop */ .hero-section__subheadline { font-size: var(--font-size-md); /* 18px desktop */ } /** * Grup CTA desktop: tombol berdampingan (baris) */ .hero-section__cta-group { flex-direction: row; width: auto; max-width: none; } /** * Tombol CTA desktop: lebar otomatis (tidak penuh) */ .hero-section__btn-primary, .hero-section__btn-secondary { width: auto; } /** * Kontak fallback desktop: baris */ .hero-section__contact-fallback { flex-direction: row; gap: var(--spacing-4); } /** * Kolom kanan — absolute ke #hero, dari 50% lebar viewport sampai tepi kanan * Mengisi penuh tinggi section tanpa terikat padding container */ .hero-section__visual { position: absolute; top: 0; right: 0; bottom: 0; /* Mulai dari titik tengah section (50% lebar viewport) */ left: 50%; max-width: unset; width: auto; display: flex; align-items: stretch; overflow: hidden; z-index: 1; min-height: 500px; /* fallback saat gambar belum load */ } .hero-section__picture { width: 100%; height: 100%; min-height: unset; display: flex; align-items: center; justify-content: center; } .hero-section__image { width: 100%; height: 100%; object-fit: contain; object-position: center center; max-width: unset; filter: drop-shadow(-12px 0 48px rgba(0,0,0,0.60)); mix-blend-mode: lighten; /* hilangkan background gelap dari PNG */ } } /* ========================================================================== HERO — TABLET (768px – 1023px) Satu kolom, teks lebih besar dari mobile ========================================================================== */ @media (min-width: 768px) and (max-width: 1023px) { #hero { padding-top: var(--spacing-16); /* 64px */ padding-bottom: var(--spacing-16); } .hero-section__headline { font-size: 36px; /* Antara mobile (28px) dan desktop (48px) */ } .hero-section__subheadline { font-size: var(--font-size-md); /* 18px */ } .hero-section__cta-group { flex-direction: row; /* Tablet: tombol berdampingan */ width: auto; max-width: none; justify-content: center; } .hero-section__btn-primary, .hero-section__btn-secondary { width: auto; } } /* ========================================================================== SECTION: KALKULATOR CUAN (#kalkulator) Requirements: 2.1, 2.2, 2.3, 2.4, 2.5, 2.8, 2.9, 2.10, 2.12 ========================================================================== */ /** * Section wrapper — anchor ID #kalkulator * Latar putih (bergantian dengan #keunggulan yang abu-abu) */ #kalkulator { padding-top: var(--section-padding-y); /* 40px mobile → 64px desktop */ padding-bottom: var(--section-padding-y); padding-left: var(--section-padding-x); /* 16px mobile → 32px desktop */ padding-right: var(--section-padding-x); background-color: var(--color-white); } /** * Container utama — max-width dan centering */ .kalkulator-section__container { max-width: 800px; margin-left: auto; margin-right: auto; } /** * Header section — judul dan sub-judul */ .kalkulator-section__header { text-align: center; margin-bottom: var(--spacing-10); /* 40px */ } .kalkulator-section__title { font-size: var(--font-size-h2); /* 22px mobile → 36px desktop */ font-weight: var(--font-weight-bold); color: var(--color-text-primary); /* #1A1A2E */ margin-bottom: var(--spacing-3); /* 12px */ } .kalkulator-section__subtitle { font-size: var(--font-size-base); /* 16px */ color: var(--color-text-muted); /* #6E6E6E — kontras 4.54:1 pada putih ✓ */ max-width: 560px; margin-left: auto; margin-right: auto; margin-bottom: 0; } /* -------------------------------------------------------------------------- SLIDER JARAK HARIAN Requirement 2.4 — rentang 30–200km, interval 5km, default 50km -------------------------------------------------------------------------- */ .kalkulator-section__slider-wrapper { margin-bottom: var(--spacing-8); /* 32px */ } .kalkulator-section__slider-label { text-align: center; margin-bottom: var(--spacing-4); /* 16px */ font-size: var(--font-size-md); /* 18px */ color: var(--color-text-primary); } .kalkulator-section__slider-label-text { display: block; font-weight: var(--font-weight-medium); cursor: default; } .kalkulator-section__slider-label-text strong { color: var(--color-primary-dark); /* #C0271E — kontras 5.92:1 pada putih ✓ (fix task 18.4) */ font-size: var(--font-size-xl); /* 24px */ } /** * Input range slider — custom styling * Kontras: thumb merah (#E63329) pada track abu-abu (#CCCCCC) */ .kalkulator-section__slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: var(--radius-full); background: var(--color-gray-100); /* #F0F0F0 */ outline: none; cursor: pointer; transition: background var(--transition-fast); } /* Track — WebKit (Chrome, Safari, Edge) */ .kalkulator-section__slider::-webkit-slider-runnable-track { height: 8px; border-radius: var(--radius-full); background: var(--color-gray-100); } /* Thumb — WebKit */ .kalkulator-section__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--color-primary); /* #E63329 */ border: 3px solid var(--color-white); box-shadow: var(--shadow-btn); cursor: pointer; margin-top: -10px; /* Centering pada track */ transition: background var(--transition-fast), transform var(--transition-fast); } .kalkulator-section__slider::-webkit-slider-thumb:hover { background: var(--color-primary-dark); /* #C0271E */ transform: scale(1.15); } /* Track — Firefox */ .kalkulator-section__slider::-moz-range-track { height: 8px; border-radius: var(--radius-full); background: var(--color-gray-100); border: none; } /* Thumb — Firefox */ .kalkulator-section__slider::-moz-range-thumb { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--color-primary); border: 3px solid var(--color-white); box-shadow: var(--shadow-btn); cursor: pointer; } /* Focus-visible: outline keyboard (WCAG 2.1 AA — Req 8.6) */ .kalkulator-section__slider:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; } /** * Label batas slider (30km / 200km) */ .kalkulator-section__slider-range { display: flex; justify-content: space-between; margin-top: var(--spacing-2); /* 8px */ font-size: var(--font-size-sm); /* 14px */ color: var(--color-text-muted); /* #6E6E6E — kontras 4.54:1 pada putih ✓ */ } /* -------------------------------------------------------------------------- TABEL PERBANDINGAN BIAYA Requirements: 2.2, 2.3, 2.12 -------------------------------------------------------------------------- */ .kalkulator-section__table-wrapper { overflow-x: hidden; /* Tidak ada scroll horizontal di mobile */ margin-bottom: var(--spacing-6); /* 24px */ border-radius: var(--radius-card); /* 12px */ box-shadow: var(--shadow-card); } .kalkulator-section__table { width: 100%; table-layout: fixed; /* Kolom mengikuti width yang ditentukan, tidak overflow */ border-collapse: collapse; font-size: var(--font-size-base); /* 16px */ background-color: var(--color-white); border-radius: var(--radius-card); overflow: hidden; } /** * Header tabel * Kontras: putih (#FFFFFF) pada navy (#1A1A2E) = ~14:1 (WCAG AA ✓) */ .kalkulator-section__th { padding: var(--spacing-4) var(--spacing-5); /* 16px 20px */ text-align: center; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); /* 14px */ letter-spacing: var(--letter-spacing-wide); /* 0.04em */ text-transform: uppercase; } .kalkulator-section__th--label { background-color: var(--color-dark); /* #1A1A2E */ color: var(--color-text-inverse); /* #FFFFFF */ text-align: left; width: 40%; } .kalkulator-section__th--bensin { background-color: var(--color-gray-700); /* #444444 */ color: var(--color-text-inverse); /* #FFFFFF */ width: 30%; } .kalkulator-section__th--listrik { background-color: var(--color-primary-dark); /* #C0271E — kontras putih 5.92:1 ✓ (fix task 18.4) */ color: var(--color-text-inverse); /* #FFFFFF */ width: 30%; } /** * Sel tabel * Kontras: #444444 pada latar putih = ~9.7:1 (WCAG AA ✓) */ .kalkulator-section__td { padding: var(--spacing-4) var(--spacing-5); /* 16px 20px */ text-align: center; color: var(--color-text-body); /* #444444 */ border-bottom: 1px solid var(--color-gray-100); vertical-align: middle; } .kalkulator-section__td--label { text-align: left; font-weight: var(--font-weight-medium); color: var(--color-text-primary); /* #1A1A2E */ background-color: var(--color-gray-50); /* #F8F8F8 */ } .kalkulator-section__td--bensin { background-color: var(--color-white); } .kalkulator-section__td--listrik { background-color: rgba(230, 51, 41, 0.04); /* Tint merah sangat terang */ } /** * Baris total — lebih menonjol */ .kalkulator-section__tr--total .kalkulator-section__td { border-bottom: none; padding-top: var(--spacing-5); /* 20px */ padding-bottom: var(--spacing-5); } .kalkulator-section__td--total-label { font-size: var(--font-size-md); /* 18px */ } .kalkulator-section__td--total { font-size: var(--font-size-md); /* 18px */ } .kalkulator-section__td--total.kalkulator-section__td--listrik { color: var(--color-primary-dark); /* #C0271E — kontras 5.44:1 pada rgba(230,51,41,0.06) ✓ (fix task 18.4) */ background-color: rgba(230, 51, 41, 0.06); } /* -------------------------------------------------------------------------- DISPLAY PENGHEMATAN Requirements: 2.3, 2.12 -------------------------------------------------------------------------- */ .kalkulator-section__savings { text-align: center; padding: var(--spacing-6) var(--spacing-8); /* 24px 32px */ background: linear-gradient(135deg, rgba(37, 211, 102, 0.08), rgba(37, 211, 102, 0.15)); border: 2px solid var(--color-wa); /* #25D366 */ border-radius: var(--radius-xl); /* 16px */ margin-bottom: var(--spacing-8); /* 32px */ } .kalkulator-section__savings-text { font-size: var(--font-size-xl); /* 24px */ color: var(--color-text-primary); /* #1A1A2E */ margin-bottom: var(--spacing-2); /* 8px */ line-height: var(--line-height-snug); } .kalkulator-section__savings-text strong { color: var(--color-wa-text); /* #1A7A3C — kontras 4.95:1 pada savings-bg ✓ (fix task 18.4) */ font-size: var(--font-size-h2); /* 22px mobile → 36px desktop */ font-weight: var(--font-weight-extrabold); } .kalkulator-section__savings-note { font-size: var(--font-size-sm); /* 14px */ color: var(--color-text-muted-on-tint); /* #5E5E5E — kontras 5.95:1 pada savings-bg ✓ (fix task 18.4) */ margin-bottom: 0; } /* -------------------------------------------------------------------------- TOMBOL CTA WHATSAPP Requirements: 2.9, 2.10 -------------------------------------------------------------------------- */ .kalkulator-section__cta { text-align: center; } .kalkulator-section__cta-btn { padding: var(--spacing-4) var(--spacing-10); /* 16px 40px */ font-size: var(--font-size-md); /* 18px */ min-width: 280px; justify-content: center; } /* -------------------------------------------------------------------------- PESAN VALIDASI SLIDER (dibuat dinamis oleh kalkulator-cuan.js) Requirement 2.11 -------------------------------------------------------------------------- */ .kalkulator-validasi { color: var(--color-error); /* #E63329 */ font-size: var(--font-size-sm); /* 14px */ margin-top: var(--spacing-2); /* 8px */ text-align: center; } /* -------------------------------------------------------------------------- OVERRIDE DESKTOP (≥ 1024px) -------------------------------------------------------------------------- */ @media (min-width: 1024px) { .kalkulator-section__savings-text { font-size: var(--font-size-h2); /* 36px desktop */ } .kalkulator-section__savings-text strong { font-size: var(--font-size-h1); /* 48px desktop */ } .kalkulator-section__cta-btn { font-size: var(--font-size-lg); /* 20px desktop */ padding: var(--spacing-5) var(--spacing-12); /* 20px 48px */ } } /* ========================================================================== === Section Produk (#produk) === Requirements: 4.3, 4.4, 4.5, 4.6, 4.7, 8.4 Layout: - Mobile (360px+) : CSS scroll-snap carousel — 1 kartu + peek kartu berikutnya - Tablet (768px+) : Grid 2 kolom - Desktop (1024px+): Grid 4 kolom ========================================================================== */ /** * Section wrapper — anchor ID #produk * Latar abu-abu terang (bergantian dengan #kalkulator yang putih) */ #produk { padding-top: var(--section-padding-y); /* 40px mobile → 64px desktop */ padding-bottom: var(--section-padding-y); background-color: var(--color-gray-50); /* #F8F8F8 */ overflow: hidden; /* Mencegah scroll horizontal bocor ke luar section */ } /** * Section title — judul utama section produk * Kontras: #1A1A2E pada latar #F8F8F8 = ~13:1 (WCAG AA ✓) */ #produk .section-title { font-size: 28px; font-weight: 700; color: var(--color-dark); /* #1A1A2E */ text-align: center; margin-bottom: 8px; } /** * Section subtitle — sub-judul section produk * Kontras: #666666 pada latar #F8F8F8 = ~5.7:1 (WCAG AA ✓) */ #produk .section-subtitle { text-align: center; color: #666; margin-bottom: 32px; font-size: var(--font-size-base); /* 16px */ max-width: 600px; margin-left: auto; margin-right: auto; } /* -------------------------------------------------------------------------- PRODUK GRID — Mobile default (360px+) CSS scroll-snap carousel: 1 kartu terlihat + peek kartu berikutnya -------------------------------------------------------------------------- */ /** * .produk-grid — Scroll-snap container (mobile) * Menampilkan 1 kartu penuh + sedikit kartu berikutnya sebagai "peek" */ .produk-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding: 0 24px 16px; /* Sembunyikan scrollbar secara visual, tetap fungsional */ -ms-overflow-style: none; /* IE dan Edge lama */ scrollbar-width: none; /* Firefox */ } /* Sembunyikan scrollbar — WebKit (Chrome, Safari) */ .produk-grid::-webkit-scrollbar { display: none; } /* -------------------------------------------------------------------------- KARTU PRODUK — Mobile default -------------------------------------------------------------------------- */ /** * .kartu-produk — Kartu individual produk * Mobile: lebar 85% (menampilkan peek kartu berikutnya), max 320px */ .kartu-produk { scroll-snap-align: start; flex: 0 0 85%; max-width: 320px; /* Card styles */ background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); transition: box-shadow var(--transition-normal), transform var(--transition-normal); } .kartu-produk:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14); transform: translateY(-2px); } /** * Gambar produk — wrapper */ .kartu-produk__gambar { overflow: hidden; background-color: var(--color-gray-100); /* Placeholder latar saat gambar dimuat */ } /** * Gambar produk — elemen * Requirement 4.7: onerror fallback ke placeholder * Requirement 9.3: width/height eksplisit mencegah CLS */ .kartu-produk__gambar img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform var(--transition-slow); } .kartu-produk:hover .kartu-produk__gambar img { transform: scale(1.03); } /** * Konten kartu — padding area teks dan CTA */ .kartu-produk__konten { padding: 16px; } /** * Nama varian produk * Kontras: #1A1A2E pada latar putih = ~14:1 (WCAG AA ✓) */ .kartu-produk__nama { font-size: 18px; font-weight: 700; color: var(--color-dark); /* #1A1A2E */ margin-bottom: 4px; line-height: var(--line-height-snug); /* 1.35 */ } /** * Tipe bak/box produk * Kontras: #666666 pada latar putih = ~5.7:1 (WCAG AA ✓) */ .kartu-produk__tipe { font-size: 14px; color: #666; margin-bottom: 8px; font-weight: var(--font-weight-medium); } /** * Daftar spesifikasi produk * Kontras: #444444 pada latar putih = ~9.7:1 (WCAG AA ✓) */ .kartu-produk__spek { list-style: none; padding: 0; font-size: 13px; color: #444; margin-bottom: 16px; margin-top: 0; } .kartu-produk__spek li { padding: 2px 0; line-height: var(--line-height-normal); /* 1.5 */ } /** * Tombol WhatsApp — menggunakan class .btn-whatsapp yang sudah ada * Override: lebar penuh pada kartu produk */ .kartu-produk__konten .btn-whatsapp { width: 100%; justify-content: center; font-size: var(--font-size-sm); /* 14px — lebih kompak di kartu */ padding: var(--spacing-3) var(--spacing-4); /* 12px 16px */ white-space: normal; /* Teks boleh wrap agar tidak terpotong */ text-align: center; line-height: 1.3; } /* -------------------------------------------------------------------------- PRODUK GRID — Tablet (768px+) Grid 2 kolom, nonaktifkan scroll-snap -------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) { .produk-grid { display: grid; grid-template-columns: repeat(2, 1fr); overflow-x: unset; scroll-snap-type: unset; padding: 0; gap: 24px; } .kartu-produk { flex: unset; max-width: unset; scroll-snap-align: unset; } .kartu-produk__konten .btn-whatsapp { font-size: var(--font-size-base); } } /* -------------------------------------------------------------------------- PRODUK CAROUSEL — Wrapper & Tombol Navigasi Requirements: 8.6 — tombol navigasi dengan aria-label -------------------------------------------------------------------------- */ /** * .produk-carousel-wrapper * Mobile : flex column — grid di atas, tombol nav di bawah * Desktop : posisi relative dengan padding kiri-kanan untuk ruang arrow */ .produk-carousel-wrapper { position: relative; } /* Sembunyikan nav row di tablet+ secara default */ /* (nav-row sudah tidak digunakan, tombol langsung di dalam wrapper) */ /* Sembunyikan tombol nav individual secara default */ .produk-carousel__nav { display: none; } /* -------------------------------------------------------------------------- MOBILE (<768px): Arrow di bawah carousel, berdampingan di tengah -------------------------------------------------------------------------- */ @media (max-width: 767px) { /* Wrapper: grid 2 area — carousel penuh atas, tombol berdampingan di bawah */ .produk-carousel-wrapper { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 16px 12px; } /* Grid carousel: span 2 kolom penuh */ .produk-grid { grid-column: 1 / -1; } /* Tombol prev: kolom kanan dari tengah */ .produk-carousel__nav--prev { grid-column: 1; justify-self: end; } /* Tombol next: kolom kiri dari tengah */ .produk-carousel__nav--next { grid-column: 2; justify-self: start; } .produk-carousel__nav { display: flex; align-items: center; justify-content: center; position: static; transform: none; width: 44px; height: 44px; border-radius: 50%; background-color: var(--color-white); border: 2px solid var(--color-primary); color: var(--color-primary); cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .produk-carousel__nav:hover { background-color: var(--color-primary); color: var(--color-white); box-shadow: 0 4px 12px rgba(230, 51, 41, 0.3); } .produk-carousel__nav:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } .produk-carousel__nav:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } } /* -------------------------------------------------------------------------- DESKTOP (1024px+): - Carousel horizontal scroll-snap, tampilkan 3 kartu sekaligus - Arrow di kiri dan kanan, di LUAR area kartu (tidak menutupi) - Wrapper diberi padding horizontal 60px untuk ruang arrow -------------------------------------------------------------------------- */ @media (min-width: 1024px) { /* Wrapper: padding kiri-kanan untuk ruang arrow, overflow visible */ .produk-carousel-wrapper { display: block; position: relative; padding: 0 60px; /* ruang untuk arrow kiri dan kanan */ } /* Grid: flex scroll-snap horizontal, 3 kartu terlihat */ .produk-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 24px; padding: 8px 0 16px; /* sedikit padding atas untuk shadow kartu */ -ms-overflow-style: none; scrollbar-width: none; } .produk-grid::-webkit-scrollbar { display: none; } /* Setiap kartu: lebar 1/3 dari grid (3 kartu terlihat) */ .kartu-produk { flex: 0 0 calc(33.333% - 16px); max-width: calc(33.333% - 16px); scroll-snap-align: start; } .kartu-produk__gambar img { height: 200px; } /* Arrow: posisi absolute di luar grid, vertikal tengah */ .produk-carousel__nav { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background-color: var(--color-white); border: 2px solid var(--color-gray-300, #ccc); color: var(--color-dark); cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; z-index: 2; } .produk-carousel__nav:hover { background-color: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); box-shadow: 0 4px 12px rgba(230, 51, 41, 0.35); } .produk-carousel__nav:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } .produk-carousel__nav:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; } /* Posisi arrow: di dalam padding area, tidak overlap kartu */ .produk-carousel__nav--prev { left: 4px; } .produk-carousel__nav--next { right: 4px; } /* Sembunyikan nav-row (tidak dipakai di desktop) */ .produk-carousel__nav-row { display: none; } } /* ========================================================================== === Section Garansi (#garansi) === Requirements: 5.1, 5.2, 5.3, 5.4 Layout: - Mobile (360px+) : 1 kolom — item ditumpuk vertikal - Tablet (768px+) : 2 kolom — grid 2 item per baris - Desktop (1024px+): 4 kolom — semua item dalam satu baris ========================================================================== */ /** * Section wrapper — anchor ID #garansi * Latar putih (bergantian dengan #produk yang abu-abu) */ #garansi { padding-top: var(--section-padding-y); /* 40px mobile → 64px desktop */ padding-bottom: var(--section-padding-y); padding-left: var(--section-padding-x); /* 16px mobile → 32px desktop */ padding-right: var(--section-padding-x); background-color: var(--color-white); } /* -------------------------------------------------------------------------- SECTION HEADER -------------------------------------------------------------------------- */ /** * Header section — judul dan sub-judul */ .garansi-header { text-align: center; margin-bottom: var(--spacing-10); /* 40px */ } /** * Judul section garansi * Kontras: #1A1A2E pada latar putih = ~14:1 (WCAG AA ✓) */ .garansi-header h2 { font-size: var(--font-size-h2); /* 22px mobile → 36px desktop */ font-weight: var(--font-weight-bold); color: var(--color-text-primary); /* #1A1A2E */ margin-bottom: var(--spacing-3); /* 12px */ } /** * Sub-judul section garansi * Kontras: #888888 pada latar putih = ~4.6:1 (WCAG AA ✓) */ .garansi-header p { font-size: var(--font-size-base); /* 16px */ color: var(--color-text-muted); /* #6E6E6E — kontras 4.54:1 pada putih ✓ */ max-width: 600px; margin-left: auto; margin-right: auto; margin-bottom: 0; } /* -------------------------------------------------------------------------- GARANSI LIST — Mobile default (360px+) 1 kolom, item ditumpuk vertikal -------------------------------------------------------------------------- */ /** * .garansi-list — Container daftar item garansi * Reset list styles, gunakan grid responsif */ .garansi-list { list-style: none; padding: 0; margin: 0 0 var(--spacing-10) 0; /* 40px bawah sebelum CTA */ display: grid; grid-template-columns: 1fr; /* Mobile: 1 kolom */ gap: var(--spacing-6); /* 24px */ max-width: var(--container-max-width); /* 1200px */ margin-left: auto; margin-right: auto; } /* -------------------------------------------------------------------------- GARANSI ITEM — Kartu individual -------------------------------------------------------------------------- */ /** * .garansi-item — Satu item garansi (ikon + teks) * Layout: flex row — ikon di kiri, teks di kanan */ .garansi-item { display: flex; flex-direction: row; align-items: flex-start; gap: var(--spacing-5); /* 20px antara ikon dan teks */ padding: var(--spacing-6); /* 24px */ background-color: var(--color-white); border: 1px solid var(--color-gray-100); /* #F0F0F0 */ border-radius: var(--radius-card); /* 12px */ box-shadow: var(--shadow-sm); /* 0 2px 4px rgba(0,0,0,0.08) */ transition: box-shadow var(--transition-normal), transform var(--transition-normal); } .garansi-item:hover { box-shadow: var(--shadow-md); /* 0 4px 12px rgba(0,0,0,0.12) */ transform: translateY(-2px); } /* -------------------------------------------------------------------------- GARANSI ICON — Wrapper ikon SVG -------------------------------------------------------------------------- */ /** * .garansi-icon — Lingkaran latar dengan ikon SVG di dalamnya * Ukuran tetap 64×64px, tidak menyusut saat teks panjang */ .garansi-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; min-width: 64px; /* Mencegah ikon menyusut */ border-radius: var(--radius-full); /* Lingkaran */ background-color: rgba(230, 51, 41, 0.08); /* Tint merah sangat terang */ flex-shrink: 0; } /** * Gambar ikon SVG di dalam .garansi-icon * Ukuran tampilan 36×36px (lebih kecil dari container 64px) */ .garansi-icon img { width: 36px; height: 36px; object-fit: contain; } /* -------------------------------------------------------------------------- GARANSI TEXT — Teks judul dan deskripsi -------------------------------------------------------------------------- */ /** * .garansi-text — Wrapper teks item garansi * Flex column: judul di atas, deskripsi di bawah */ .garansi-text { display: flex; flex-direction: column; gap: var(--spacing-2); /* 8px antara judul dan deskripsi */ flex: 1; } /** * Judul item garansi (elemen ) * Kontras: #1A1A2E pada latar putih = ~14:1 (WCAG AA ✓) */ .garansi-text strong { display: block; font-size: var(--font-size-md); /* 18px */ font-weight: var(--font-weight-semibold); /* 600 */ color: var(--color-text-primary); /* #1A1A2E */ line-height: var(--line-height-snug); /* 1.35 */ } /** * Deskripsi item garansi (elemen ) * Kontras: #444444 pada latar putih = ~9.7:1 (WCAG AA ✓) */ .garansi-text span { display: block; font-size: var(--font-size-sm); /* 14px */ color: var(--color-text-body); /* #444444 */ line-height: var(--line-height-relaxed); /* 1.7 */ } /* -------------------------------------------------------------------------- GARANSI CTA — Tombol WhatsApp Requirement 5.4 -------------------------------------------------------------------------- */ /** * .garansi-cta — Wrapper tombol CTA, rata tengah */ .garansi-cta { text-align: center; } /** * Tombol WhatsApp di section garansi * Menggunakan class .btn-whatsapp yang sudah ada di design tokens * Override: padding lebih besar untuk CTA yang lebih menonjol */ .garansi-cta .btn-whatsapp { padding: var(--spacing-4) var(--spacing-10); /* 16px 40px */ font-size: var(--font-size-md); /* 18px */ min-width: 260px; justify-content: center; } /* -------------------------------------------------------------------------- GARANSI LIST — Tablet (768px+) Grid 2 kolom -------------------------------------------------------------------------- */ @media (min-width: 768px) { .garansi-list { grid-template-columns: repeat(2, 1fr); /* Tablet: 2 kolom */ gap: var(--spacing-6); /* 24px */ margin-bottom: var(--spacing-10); } } /* -------------------------------------------------------------------------- GARANSI LIST — Desktop (1024px+) Grid 4 kolom — semua item dalam satu baris -------------------------------------------------------------------------- */ @media (min-width: 1024px) { .garansi-list { grid-template-columns: repeat(4, 1fr); /* Desktop: 4 kolom */ gap: var(--spacing-8); /* 32px */ margin-bottom: var(--spacing-12); /* 48px */ } /** * Item desktop: flex column — ikon di atas, teks di bawah (seperti kartu) * Memberikan tampilan yang lebih simetris pada grid 4 kolom */ .garansi-item { flex-direction: column; align-items: center; text-align: center; padding: var(--spacing-8); /* 32px */ } .garansi-icon { width: 80px; height: 80px; min-width: 80px; margin-bottom: var(--spacing-2); /* 8px */ } .garansi-icon img { width: 40px; height: 40px; } .garansi-text { align-items: center; } .garansi-cta .btn-whatsapp { font-size: var(--font-size-lg); /* 20px desktop */ padding: var(--spacing-5) var(--spacing-12); /* 20px 48px */ } } /* ========================================================================== === Section Testimoni (#testimoni) === Requirements: 6.1, 6.2, 6.3, 6.4, 6.5, 6.6 Layout: - Mobile (360px+) : CSS scroll-snap carousel — 1 item + dots navigasi - Tablet (768px+) : Grid 2 kolom - Desktop (1024px+): Grid 3 kolom ========================================================================== */ /** * Section wrapper — anchor ID #testimoni * Latar abu-abu terang (bergantian dengan section sebelumnya) */ #testimoni { padding-top: var(--section-padding-y); /* 40px mobile → 64px desktop */ padding-bottom: var(--section-padding-y); padding-left: var(--section-padding-x); /* 16px mobile → 32px desktop */ padding-right: var(--section-padding-x); background-color: var(--color-gray-50); /* #F8F8F8 */ overflow: hidden; /* Mencegah scroll horizontal bocor */ } /* -------------------------------------------------------------------------- SECTION HEADER -------------------------------------------------------------------------- */ /** * Header section — judul dan sub-judul */ .section-testimoni__header { margin-bottom: var(--spacing-10); /* 40px */ } /** * Judul section testimoni * Kontras: #1A1A2E pada latar #F8F8F8 = ~13:1 (WCAG AA ✓) */ .section-testimoni__title { font-size: var(--font-size-h2); /* 22px mobile → 36px desktop */ font-weight: var(--font-weight-bold); color: var(--color-text-primary); /* #1A1A2E */ margin-bottom: var(--spacing-3); /* 12px */ } /** * Sub-judul section testimoni * Kontras: #888888 pada latar #F8F8F8 = ~4.6:1 (WCAG AA ✓) */ .section-testimoni__subtitle { font-size: var(--font-size-base); /* 16px */ color: var(--color-text-muted); /* #6E6E6E — kontras 4.54:1 pada putih, 4.80:1 pada #F8F8F8 ✓ */ max-width: 600px; margin-left: auto; margin-right: auto; margin-bottom: 0; } /* -------------------------------------------------------------------------- TESTIMONI CAROUSEL — Mobile default (360px+) CSS scroll-snap: 1 item terlihat penuh + peek item berikutnya Requirement 6.5 -------------------------------------------------------------------------- */ /** * .testimoni-carousel — Wrapper region carousel */ .testimoni-carousel { position: relative; } /** * .testimoni-carousel__track — Scroll-snap container * Menampilkan 1 item penuh + sedikit item berikutnya sebagai "peek" */ .testimoni-carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--spacing-4); /* 16px */ padding-bottom: var(--spacing-4); /* 16px — ruang untuk scrollbar tersembunyi */ /* Sembunyikan scrollbar secara visual, tetap fungsional */ -ms-overflow-style: none; /* IE dan Edge lama */ scrollbar-width: none; /* Firefox */ } /* Sembunyikan scrollbar — WebKit (Chrome, Safari) */ .testimoni-carousel__track::-webkit-scrollbar { display: none; } /* -------------------------------------------------------------------------- TESTIMONI ITEM — Kartu individual Requirements: 6.2, 6.6 -------------------------------------------------------------------------- */ /** * .testimoni-item — Kartu testimoni individual * Mobile: lebar 88% (menampilkan peek kartu berikutnya) */ .testimoni-item { scroll-snap-align: start; flex: 0 0 88%; max-width: 360px; /* Card styles */ background-color: var(--color-white); border-radius: var(--radius-card); /* 12px */ box-shadow: var(--shadow-card); /* 0 4px 12px rgba(0,0,0,0.12) */ overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--transition-normal), transform var(--transition-normal); } .testimoni-item:hover { box-shadow: var(--shadow-lg); /* 0 8px 24px rgba(0,0,0,0.15) */ transform: translateY(-2px); } /* -------------------------------------------------------------------------- FOTO PELANGGAN — Text-only items (Requirement 6.6) -------------------------------------------------------------------------- */ /** * .testimoni-item__foto — Wrapper foto pelanggan (text-only items) * Foto bulat, ukuran 80×80px */ .testimoni-item__foto { padding: var(--spacing-6) var(--spacing-6) 0; /* 24px atas, 0 bawah */ display: flex; justify-content: center; } /** * Gambar foto pelanggan — bulat * Requirement 6.2: foto pelanggan */ .testimoni-item__foto img { width: 80px; height: 80px; border-radius: var(--radius-full); /* Lingkaran */ object-fit: cover; border: 3px solid var(--color-gray-100); /* #F0F0F0 */ flex-shrink: 0; } /* -------------------------------------------------------------------------- THUMBNAIL VIDEO — Video items (Requirements 6.3, 6.4) -------------------------------------------------------------------------- */ /** * .testimoni-item__video-thumb — Wrapper thumbnail video * Posisi relative untuk menempatkan .play-button di atasnya */ .testimoni-item__video-thumb { position: relative; overflow: hidden; cursor: pointer; background-color: var(--color-dark); /* #1A1A2E — latar saat gambar dimuat */ aspect-ratio: 16 / 9; /* Rasio video standar */ } /** * Gambar thumbnail video * Requirement 6.3: thumbnail video */ .testimoni-item__video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-slow), opacity var(--transition-normal); } .testimoni-item__video-thumb:hover img { transform: scale(1.04); opacity: 0.85; } /** * .play-button — Tombol putar video * Posisi: tengah thumbnail, hanya muncul pada item video (Requirement 6.3) * Video TIDAK autoplay sebelum diklik (Requirement 6.4) * * Kontras: ikon putih pada latar merah (#E63329) = ~4.6:1 (WCAG AA ✓) */ .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform var(--transition-normal), opacity var(--transition-normal); z-index: var(--z-base); } .play-button:hover { transform: translate(-50%, -50%) scale(1.12); opacity: 0.92; } /* Focus-visible: outline keyboard (WCAG 2.1 AA — Req 8.6) */ .play-button:focus-visible { outline: 3px solid var(--color-white); outline-offset: 4px; border-radius: var(--radius-full); } /** * .play-button__icon — Pure CSS play button * Lingkaran merah + segitiga putih via CSS border trick * Lebih reliable dari SVG inline yang kadang gagal render */ .play-button__icon { display: block; width: 56px; height: 56px; border-radius: 50%; background-color: rgba(230, 51, 41, 0.92); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); position: relative; transition: background-color var(--transition-fast), transform var(--transition-fast); } /* Segitiga play via CSS border trick */ .play-button__icon::after { content: ''; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%); width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 16px; border-color: transparent transparent transparent #ffffff; } .play-button:hover .play-button__icon { background-color: rgba(192, 39, 30, 0.98); transform: scale(1.08); } .play-button:focus-visible .play-button__icon { outline: 3px solid var(--color-white); outline-offset: 4px; } /* -------------------------------------------------------------------------- KONTEN TEKS TESTIMONI -------------------------------------------------------------------------- */ /** * .testimoni-item__konten — Wrapper konten teks (rating, kutipan, identitas) */ .testimoni-item__konten { padding: var(--spacing-5) var(--spacing-6) var(--spacing-6); /* 20px 24px 24px */ display: flex; flex-direction: column; flex: 1; } /** * .testimoni-item__bintang — Rating bintang * Kontras: #F5A623 (kuning) pada latar putih = ~2.9:1 * Fix task 18.4: diubah ke #7A5C00 — kontras 4.52:1 pada putih ✓ */ .testimoni-item__bintang { font-size: var(--font-size-lg); /* 20px */ color: #7A5C00; /* Kuning gelap — kontras 4.52:1 pada putih ✓ (fix task 18.4) */ margin-bottom: var(--spacing-3); /* 12px */ line-height: 1; } /** * .testimoni-item__kutipan — Blockquote kutipan pelanggan * Requirement 6.2: kutipan dalam
* Kontras: #444444 pada latar putih = ~9.7:1 (WCAG AA ✓) */ .testimoni-item__kutipan { margin: 0 0 var(--spacing-4) 0; /* 16px bawah */ padding: 0; border: none; flex: 1; } .testimoni-item__kutipan p { font-size: var(--font-size-sm); /* 14px */ color: var(--color-text-body); /* #444444 */ line-height: var(--line-height-relaxed); /* 1.7 */ font-style: italic; margin-bottom: 0; } /** * .testimoni-item__identitas — Nama dan jenis usaha pelanggan * Requirement 6.2: nama dan jenis usaha * tidak italic secara default di sini */ .testimoni-item__identitas { display: flex; flex-direction: column; gap: var(--spacing-1); /* 4px */ font-style: normal; border-top: 1px solid var(--color-gray-100); /* #F0F0F0 */ padding-top: var(--spacing-4); /* 16px */ margin-top: auto; } /** * Nama pelanggan * Kontras: #1A1A2E pada latar putih = ~14:1 (WCAG AA ✓) */ .testimoni-item__nama { display: block; font-size: var(--font-size-base); /* 16px */ font-weight: var(--font-weight-semibold); /* 600 */ color: var(--color-text-primary); /* #1A1A2E */ line-height: var(--line-height-snug); /* 1.35 */ } /** * Jenis usaha pelanggan * Kontras: #6E6E6E pada latar putih = 4.54:1 (WCAG AA ✓) */ .testimoni-item__usaha { display: block; font-size: var(--font-size-xs); /* 12px */ color: var(--color-text-muted); /* #6E6E6E — kontras 4.54:1 pada putih ✓ */ line-height: var(--line-height-normal); /* 1.5 */ } /* -------------------------------------------------------------------------- DOTS NAVIGASI — Mobile only (Requirement 6.5) -------------------------------------------------------------------------- */ /** * .testimoni-carousel__dots — Container dots navigasi * Ditampilkan di bawah carousel, rata tengah */ .testimoni-carousel__dots { display: flex; justify-content: center; align-items: center; gap: var(--spacing-2); /* 8px */ margin-top: var(--spacing-5); /* 20px */ } /** * .testimoni-dot — Satu dot navigasi * Ukuran 10px, bulat, warna abu-abu default * Kontras: #CCCCCC pada latar #F8F8F8 = ~1.5:1 (dekoratif, bukan teks) */ .testimoni-dot { width: 10px; height: 10px; border-radius: var(--radius-full); /* Lingkaran */ background-color: var(--color-gray-300); /* #CCCCCC */ border: none; padding: 0; cursor: pointer; transition: background-color var(--transition-normal), transform var(--transition-normal); } /** * .testimoni-dot--active — Dot aktif * Warna merah Kaisar EVS, sedikit lebih besar */ .testimoni-dot--active { background-color: var(--color-primary); /* #E63329 */ transform: scale(1.3); } .testimoni-dot:hover:not(.testimoni-dot--active) { background-color: var(--color-gray-500); /* #888888 */ } /* Focus-visible: outline keyboard (WCAG 2.1 AA) */ .testimoni-dot:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; } /* -------------------------------------------------------------------------- TESTIMONI CAROUSEL — Tablet (768px+) Grid 2 kolom, nonaktifkan scroll-snap -------------------------------------------------------------------------- */ @media (min-width: 768px) { .testimoni-carousel__track { display: grid; grid-template-columns: repeat(2, 1fr); overflow-x: unset; scroll-snap-type: unset; gap: var(--spacing-6); /* 24px */ padding-bottom: 0; } .testimoni-item { flex: unset; max-width: unset; scroll-snap-align: unset; } /* Sembunyikan dots pada tablet+ — tidak diperlukan untuk grid */ .testimoni-carousel__dots { display: none; } } /* -------------------------------------------------------------------------- TESTIMONI CAROUSEL — Desktop (1024px+) Grid 3 kolom (Requirement 6.5) -------------------------------------------------------------------------- */ @media (min-width: 1024px) { .testimoni-carousel__track { grid-template-columns: repeat(3, 1fr); /* Desktop: 3 kolom */ gap: var(--spacing-8); /* 32px */ } } /* ========================================================================== VIDEO MODAL OVERLAY Requirements: 6.3, 6.4 ========================================================================== */ /** * .video-modal — Modal overlay container * Default: tersembunyi (display none via aria-hidden + class) * Aktif: .video-modal--open */ .video-modal { display: none; position: fixed; inset: 0; z-index: var(--z-modal); /* 1000 */ align-items: center; justify-content: center; padding: var(--spacing-4); /* 16px */ } /** * Modal terbuka — tampilkan sebagai flex */ .video-modal--open { display: flex; } /** * .video-modal__overlay — Latar gelap semi-transparan * Klik overlay → tutup modal */ .video-modal__overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.80); cursor: pointer; } /** * .video-modal__box — Kotak konten modal * Posisi relative agar tombol close bisa diposisikan absolut */ .video-modal__box { position: relative; width: 100%; max-width: 800px; background-color: var(--color-dark); /* #1A1A2E */ border-radius: var(--radius-xl); /* 16px */ overflow: hidden; box-shadow: var(--shadow-xl); /* 0 16px 40px rgba(0,0,0,0.18) */ z-index: 1; /* Di atas overlay */ } /** * .video-modal__close — Tombol tutup modal (×) * Posisi: sudut kanan atas box modal * Kontras: putih (#FFFFFF) pada latar gelap (#1A1A2E) = ~14:1 (WCAG AA ✓) */ .video-modal__close { position: absolute; top: var(--spacing-3); /* 12px */ right: var(--spacing-3); z-index: 2; width: 40px; height: 40px; border-radius: var(--radius-full); background-color: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.30); color: var(--color-white); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--transition-normal), border-color var(--transition-normal); } .video-modal__close:hover { background-color: rgba(255, 255, 255, 0.30); border-color: rgba(255, 255, 255, 0.60); } /* Focus-visible: outline keyboard (WCAG 2.1 AA) */ .video-modal__close:focus-visible { outline: 3px solid var(--color-white); outline-offset: 3px; } /** * .video-modal__video-wrapper — Wrapper responsif untuk iframe video * Rasio aspek 16:9 menggunakan padding-bottom trick */ .video-modal__video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; } /** * .video-modal__iframe — Iframe video * Mengisi seluruh wrapper secara absolut */ .video-modal__iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; display: block; } /** * Mencegah scroll body saat modal terbuka * Class .modal-open ditambahkan ke oleh testimoni.js */ body.modal-open { overflow: hidden; } /* ========================================================================== SECTION: SKEMA PEMBIAYAAN (#pembiayaan) Requirements: 7.1, 7.2, 7.3, 7.4, 7.5, 7.6 Layout: - Mobile (360px+) : 1 kolom — kartu ditumpuk vertikal - Tablet (768px+) : 2 kolom - Desktop (1024px+): 3 kolom — semua kartu dalam satu baris Background: putih (bergantian dengan #testimoni yang abu-abu) Anchor ID : #pembiayaan ========================================================================== */ /** * Section wrapper — anchor ID #pembiayaan * Latar putih (bergantian dengan section sebelumnya) */ .section-pembiayaan, #pembiayaan { padding-top: var(--section-padding-y); /* 40px mobile → 64px desktop */ padding-bottom: var(--section-padding-y); padding-left: var(--section-padding-x); /* 16px mobile → 32px desktop */ padding-right: var(--section-padding-x); background-color: var(--color-white); } /* -------------------------------------------------------------------------- SECTION HEADER -------------------------------------------------------------------------- */ /** * .pembiayaan-header — Wrapper judul, sub-judul, dan promo banner */ .pembiayaan-header { margin-bottom: var(--spacing-10); /* 40px */ } /** * Judul section pembiayaan * Kontras: #1A1A2E pada latar putih = ~14:1 (WCAG AA ✓) */ .pembiayaan-title { font-size: var(--font-size-h2); /* 22px mobile → 36px desktop */ font-weight: var(--font-weight-bold); color: var(--color-text-primary); /* #1A1A2E */ margin-bottom: var(--spacing-3); /* 12px */ } /** * Sub-judul section pembiayaan * Kontras: #888888 pada latar putih = ~4.6:1 (WCAG AA ✓) */ .pembiayaan-subtitle { font-size: var(--font-size-base); /* 16px */ color: var(--color-text-muted); /* #6E6E6E — kontras 4.54:1 pada putih ✓ */ max-width: 600px; margin-left: auto; margin-right: auto; margin-bottom: var(--spacing-6); /* 24px */ } /* -------------------------------------------------------------------------- PROMO BANNER — Requirement 7.3 "🎁 Gratis Pengiriman Jabodetabek + Subsidi DP" -------------------------------------------------------------------------- */ /** * .pembiayaan-promo — Banner promo aktif * Latar hijau WhatsApp terang, border hijau * Kontras: #1A1A2E pada rgba(37,211,102,0.12) ≈ latar #E0F9EC = ~12:1 (WCAG AA ✓) */ .pembiayaan-promo { display: inline-flex; align-items: center; gap: var(--spacing-2); /* 8px */ padding: var(--spacing-3) var(--spacing-5); /* 12px 20px */ background-color: rgba(37, 211, 102, 0.10); /* Tint hijau WhatsApp */ border: 1.5px solid var(--color-wa); /* #25D366 */ border-radius: var(--radius-full); /* Pill */ font-size: var(--font-size-sm); /* 14px */ color: var(--color-text-primary); /* #1A1A2E */ line-height: var(--line-height-snug); /* 1.35 */ } .pembiayaan-promo__icon { font-size: var(--font-size-md); /* 18px */ line-height: 1; flex-shrink: 0; } .pembiayaan-promo__text strong { font-weight: var(--font-weight-semibold); /* 600 */ } /* -------------------------------------------------------------------------- PRICING GRID — Requirements 7.1, 7.2 Mobile: 1 kolom | Tablet: 2 kolom | Desktop: 3 kolom -------------------------------------------------------------------------- */ /** * .pembiayaan-grid — CSS Grid container untuk 3 kartu skema */ .pembiayaan-grid { display: grid; grid-template-columns: 1fr; /* Mobile: 1 kolom */ gap: var(--spacing-6); /* 24px */ margin-bottom: var(--spacing-12); /* 48px */ } /* -------------------------------------------------------------------------- KARTU SKEMA PEMBIAYAAN — Requirements 7.1, 7.2 -------------------------------------------------------------------------- */ /** * .pembiayaan-card — Kartu individual skema pembiayaan * Layout: flex column — header, body, footer (CTA di bawah) */ .pembiayaan-card { display: flex; flex-direction: column; background-color: var(--color-white); border: 2px solid var(--color-gray-100); /* #F0F0F0 */ border-radius: var(--radius-xl); /* 16px */ box-shadow: var(--shadow-card); /* 0 4px 12px rgba(0,0,0,0.12) */ overflow: hidden; transition: box-shadow var(--transition-normal), transform var(--transition-normal), border-color var(--transition-normal); position: relative; } .pembiayaan-card:hover { box-shadow: var(--shadow-lg); /* 0 8px 24px rgba(0,0,0,0.15) */ transform: translateY(-4px); border-color: var(--color-gray-300); /* #CCCCCC */ } /** * Kartu unggulan (Paling Populer) — Sewa Kepemilikan / UOP * Border merah, sedikit lebih menonjol */ .pembiayaan-card--featured { border-color: var(--color-primary); /* #E63329 */ box-shadow: 0 4px 20px rgba(230, 51, 41, 0.15); } .pembiayaan-card--featured:hover { box-shadow: 0 8px 32px rgba(230, 51, 41, 0.25); border-color: var(--color-primary-dark); /* #C0271E */ } /* -------------------------------------------------------------------------- BADGE — Label tipe skema -------------------------------------------------------------------------- */ /** * .pembiayaan-card__badge — Label di atas kartu (tipe skema) * Kontras: #6E6E6E pada latar #F8F8F8 = 4.80:1 (WCAG AA ✓) */ .pembiayaan-card__badge { padding: var(--spacing-2) var(--spacing-4); /* 8px 16px */ background-color: var(--color-gray-50); /* #F8F8F8 */ font-size: var(--font-size-xs); /* 12px */ font-weight: var(--font-weight-semibold); /* 600 */ color: var(--color-text-muted); /* #6E6E6E — kontras 4.80:1 pada #F8F8F8 ✓ */ letter-spacing: var(--letter-spacing-wide); /* 0.04em */ text-transform: uppercase; text-align: center; border-bottom: 1px solid var(--color-gray-100); /* #F0F0F0 */ } /** * Badge kartu unggulan — latar merah gelap, teks putih * Fix task 18.4: diubah ke #C0271E (5.92:1) karena #E63329 hanya 4.31:1 pada putih */ .pembiayaan-card__badge--featured { background-color: var(--color-primary-dark); /* #C0271E — kontras putih 5.92:1 ✓ */ color: var(--color-text-inverse); /* #FFFFFF */ border-bottom-color: #A01E16; /* Lebih gelap dari #C0271E */ } /* -------------------------------------------------------------------------- CARD HEADER — Ikon, judul, tagline -------------------------------------------------------------------------- */ /** * .pembiayaan-card__header — Area ikon + judul + tagline */ .pembiayaan-card__header { padding: var(--spacing-6) var(--spacing-6) var(--spacing-4); /* 24px 24px 16px */ text-align: center; } /** * Ikon emoji kartu */ .pembiayaan-card__icon { font-size: 40px; line-height: 1; margin-bottom: var(--spacing-3); /* 12px */ display: block; } /** * Judul skema pembiayaan * Kontras: #1A1A2E pada latar putih = ~14:1 (WCAG AA ✓) */ .pembiayaan-card__title { font-size: var(--font-size-xl); /* 24px */ font-weight: var(--font-weight-bold); /* 700 */ color: var(--color-text-primary); /* #1A1A2E */ margin-bottom: var(--spacing-2); /* 8px */ line-height: var(--line-height-snug); /* 1.35 */ } /** * Tagline (misal: "Cicilan s/d 42 Bulan") * Fix task 18.4: diubah ke #C0271E (5.92:1) karena #E63329 hanya 4.31:1 pada putih */ .pembiayaan-card__tagline { font-size: var(--font-size-sm); /* 14px */ font-weight: var(--font-weight-semibold); /* 600 */ color: var(--color-primary-dark); /* #C0271E — kontras 5.92:1 pada putih ✓ */ margin-bottom: 0; } /* -------------------------------------------------------------------------- CARD BODY — Deskripsi dan fitur -------------------------------------------------------------------------- */ /** * .pembiayaan-card__body — Area deskripsi dan daftar fitur * flex: 1 agar footer selalu di bawah (equal height cards) */ .pembiayaan-card__body { padding: 0 var(--spacing-6) var(--spacing-4); /* 0 24px 16px */ flex: 1; } /** * Deskripsi singkat skema * Kontras: #444444 pada latar putih = ~9.7:1 (WCAG AA ✓) */ .pembiayaan-card__desc { font-size: var(--font-size-sm); /* 14px */ color: var(--color-text-body); /* #444444 */ line-height: var(--line-height-relaxed); /* 1.7 */ margin-bottom: var(--spacing-4); /* 16px */ } /** * Daftar fitur/keunggulan skema */ .pembiayaan-card__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--spacing-2); /* 8px */ } .pembiayaan-card__features li { display: flex; align-items: flex-start; gap: var(--spacing-2); /* 8px */ font-size: var(--font-size-sm); /* 14px */ color: var(--color-text-body); /* #444444 */ line-height: var(--line-height-normal); /* 1.5 */ } /** * Centang ✓ di depan setiap fitur * Fix task 18.4: diubah ke #C0271E (5.92:1) karena #E63329 hanya 4.31:1 pada putih */ .pembiayaan-card__check { color: var(--color-primary-dark); /* #C0271E — kontras 5.92:1 pada putih ✓ */ font-weight: var(--font-weight-bold); /* 700 */ flex-shrink: 0; line-height: var(--line-height-normal); /* Sejajar dengan teks */ } /* -------------------------------------------------------------------------- CARD FOOTER — Tombol CTA WhatsApp Requirements: 7.4, 7.5 -------------------------------------------------------------------------- */ /** * .pembiayaan-card__footer — Area tombol CTA */ .pembiayaan-card__footer { padding: var(--spacing-4) var(--spacing-6) var(--spacing-6); /* 16px 24px 24px */ } /** * Tombol CTA WhatsApp per kartu — lebar penuh * Menggunakan .btn-whatsapp yang sudah ada */ .pembiayaan-card__cta { width: 100%; justify-content: center; font-size: var(--font-size-sm); /* 14px */ padding: var(--spacing-3) var(--spacing-4); /* 12px 16px */ } /* -------------------------------------------------------------------------- CTA FINAL BANNER — Requirement 7.6 "Siap Pangkas Biaya Operasional?" -------------------------------------------------------------------------- */ /** * .pembiayaan-cta-banner — Banner penutup halaman * Background gelap navy, teks putih * Kontras: #FFFFFF pada #1A1A2E = ~14:1 (WCAG AA ✓) */ .pembiayaan-cta-banner { background-color: var(--color-dark); /* #1A1A2E */ border-radius: var(--radius-2xl); /* 24px */ padding: var(--spacing-10) var(--spacing-6); /* 40px 24px */ text-align: center; box-shadow: var(--shadow-xl); /* 0 16px 40px rgba(0,0,0,0.18) */ overflow: hidden; position: relative; } /* Dekorasi latar — lingkaran merah samar di sudut */ .pembiayaan-cta-banner::before { content: ''; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; border-radius: var(--radius-full); background-color: rgba(230, 51, 41, 0.12); /* Tint merah sangat terang */ pointer-events: none; } .pembiayaan-cta-banner::after { content: ''; position: absolute; bottom: -40px; left: -40px; width: 160px; height: 160px; border-radius: var(--radius-full); background-color: rgba(230, 51, 41, 0.08); pointer-events: none; } /** * .pembiayaan-cta-banner__content — Konten banner (di atas dekorasi) */ .pembiayaan-cta-banner__content { position: relative; z-index: var(--z-base); } /** * Judul CTA banner * Kontras: #FFFFFF pada #1A1A2E = ~14:1 (WCAG AA ✓) */ .pembiayaan-cta-banner__title { font-size: var(--font-size-h2); /* 22px mobile → 36px desktop */ font-weight: var(--font-weight-extrabold); /* 800 */ color: var(--color-text-inverse); /* #FFFFFF */ margin-bottom: var(--spacing-3); /* 12px */ line-height: var(--line-height-tight); /* 1.2 */ } /** * Deskripsi CTA banner * Kontras: rgba(255,255,255,0.85) pada #1A1A2E = ~11:1 (WCAG AA ✓) */ .pembiayaan-cta-banner__desc { font-size: var(--font-size-base); /* 16px */ color: rgba(255, 255, 255, 0.85); margin-bottom: var(--spacing-8); /* 32px */ max-width: 480px; margin-left: auto; margin-right: auto; } /** * .pembiayaan-cta-banner__actions — Wrapper tombol + nomor telepon * Mobile: flex column (ditumpuk), Desktop: flex row (berdampingan) */ .pembiayaan-cta-banner__actions { display: flex; flex-direction: column; /* Mobile: ditumpuk */ align-items: center; gap: var(--spacing-4); /* 16px */ } /** * Tombol WhatsApp utama di CTA banner * Override: padding lebih besar untuk CTA yang lebih menonjol */ .pembiayaan-cta-banner__btn { padding: var(--spacing-4) var(--spacing-10); /* 16px 40px */ font-size: var(--font-size-md); /* 18px */ min-width: 240px; justify-content: center; } /** * Nomor telepon yang dapat diklik (tel: link) * Kontras: rgba(255,255,255,0.90) pada #1A1A2E = ~12:1 (WCAG AA ✓) */ .pembiayaan-cta-banner__phone { display: inline-flex; align-items: center; gap: var(--spacing-2); /* 8px */ font-size: var(--font-size-base); /* 16px */ font-weight: var(--font-weight-medium); /* 500 */ color: rgba(255, 255, 255, 0.90); text-decoration: none; transition: color var(--transition-fast); } .pembiayaan-cta-banner__phone:hover { color: var(--color-white); text-decoration: underline; } .pembiayaan-cta-banner__phone:focus-visible { outline: 3px solid var(--color-white); outline-offset: 3px; border-radius: var(--radius-sm); } /* -------------------------------------------------------------------------- PEMBIAYAAN GRID — Tablet (768px+) 2 kolom -------------------------------------------------------------------------- */ @media (min-width: 768px) { .pembiayaan-grid { grid-template-columns: repeat(2, 1fr); /* Tablet: 2 kolom */ gap: var(--spacing-6); /* 24px */ } .pembiayaan-cta-banner { padding: var(--spacing-12) var(--spacing-10); /* 48px 40px */ } .pembiayaan-cta-banner__actions { flex-direction: row; /* Tablet: berdampingan */ justify-content: center; } } /* -------------------------------------------------------------------------- PEMBIAYAAN GRID — Desktop (1024px+) 3 kolom — semua kartu dalam satu baris -------------------------------------------------------------------------- */ @media (min-width: 1024px) { .pembiayaan-grid { grid-template-columns: repeat(3, 1fr); /* Desktop: 3 kolom */ gap: var(--spacing-8); /* 32px */ margin-bottom: var(--spacing-16); /* 64px */ } .pembiayaan-card__title { font-size: var(--font-size-xl); /* 24px */ } .pembiayaan-card__cta { font-size: var(--font-size-base); /* 16px desktop */ padding: var(--spacing-3) var(--spacing-5); /* 12px 20px */ } .pembiayaan-cta-banner { padding: var(--spacing-16) var(--spacing-20); /* 64px 80px */ } .pembiayaan-cta-banner__title { /* --font-size-h2 sudah di-override ke 36px di media query :root */ font-size: var(--font-size-h2); /* 36px desktop */ } .pembiayaan-cta-banner__desc { font-size: var(--font-size-md); /* 18px desktop */ } .pembiayaan-cta-banner__btn { font-size: var(--font-size-lg); /* 20px desktop */ padding: var(--spacing-5) var(--spacing-12); /* 20px 48px */ } .pembiayaan-cta-banner__phone { font-size: var(--font-size-md); /* 18px desktop */ } } /* ========================================================================== STICKY NAVIGATION BAR (.kaisar-sticky-nav) Requirements: 8.3 Task 14.2 Muncul setelah pengguna scroll melewati Hero Section. Dikendalikan oleh IntersectionObserver di sticky-nav.html. ========================================================================== */ /** * .kaisar-sticky-nav — Wrapper navigasi sticky * Posisi: fixed di atas, lebar penuh * Default: tersembunyi (translateY(-100%)) * Aktif: .kaisar-sticky-nav--visible (translateY(0)) * * Background: #1A1A2E opacity 0.95 + backdrop-filter blur (Req 8.3) * Z-index: --z-navbar (500) — di atas semua konten, di bawah modal */ .kaisar-sticky-nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-navbar); /* 500 */ background-color: var(--color-dark-95); /* rgba(26, 26, 46, 0.95) */ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* Safari */ box-shadow: var(--shadow-navbar); /* 0 2px 8px rgba(0,0,0,0.20) */ /* Tersembunyi saat halaman dimuat */ transform: translateY(-100%); transition: transform var(--transition-normal); /* 0.25s ease */ /* Aksesibilitas: sembunyikan dari screen reader saat tidak terlihat */ visibility: hidden; } /** * Nav selalu terlihat di halaman non-landing (blog, archive, single post) * Di halaman ini tidak ada #hero sehingga IntersectionObserver tidak trigger. */ body.blog .kaisar-sticky-nav, body.archive .kaisar-sticky-nav, body.single .kaisar-sticky-nav, body.single-post .kaisar-sticky-nav { transform: translateY(0); visibility: visible; background-color: #1A1A2E; } body.blog #kaisar-blog, body.archive #kaisar-blog { padding-top: 64px; } /** * .kaisar-sticky-nav--visible — State aktif setelah scroll melewati Hero * Ditambahkan oleh IntersectionObserver di sticky-nav.html */ .kaisar-sticky-nav--visible { transform: translateY(0); visibility: visible; } /** * .kaisar-sticky-nav__inner — Container dalam nav * Flex row: logo (kiri) | links (tengah) | WA button (kanan) * Max-width dan centering menggunakan --container-max-width */ .kaisar-sticky-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); /* 16px */ max-width: var(--container-max-width); /* 1200px */ margin-left: auto; margin-right: auto; padding: var(--spacing-3) var(--spacing-4); /* 12px 16px */ height: 60px; } /* -------------------------------------------------------------------------- LOGO — Kiri -------------------------------------------------------------------------- */ /** * .kaisar-sticky-nav__logo — Tautan logo ke #hero * Kontras: #FFFFFF pada rgba(26,26,46,0.95) ≈ #1A1A2E = ~14:1 (WCAG AA ✓) */ .kaisar-sticky-nav__logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .kaisar-sticky-nav__logo:hover, .kaisar-sticky-nav__logo:focus { text-decoration: none; opacity: 0.85; } .kaisar-sticky-nav__logo:focus-visible { outline: 3px solid var(--color-primary); /* #E63329 */ outline-offset: 3px; border-radius: var(--radius-sm); } /** * Logo gambar — tampilkan saat file tersedia */ .kaisar-sticky-nav__logo img { height: 36px; width: auto; display: block; } /** * .kaisar-sticky-nav__logo-text — Fallback teks logo * Ditampilkan saat file gambar logo belum tersedia * Kontras: #FFFFFF pada latar gelap = ~14:1 (WCAG AA ✓) */ .kaisar-sticky-nav__logo-text { font-family: var(--font-family-heading); font-size: var(--font-size-lg); /* 20px */ font-weight: var(--font-weight-bold); color: var(--color-text-inverse); /* #FFFFFF */ letter-spacing: var(--letter-spacing-tight); line-height: 1; } .kaisar-sticky-nav__logo-text strong { color: var(--color-primary-light); /* #FF5A52 — kontras 4.54:1 pada #1A1A2E ✓ (fix task 18.4) */ } /* -------------------------------------------------------------------------- ANCHOR LINKS — Tengah (desktop only) -------------------------------------------------------------------------- */ /** * .kaisar-sticky-nav__links — Daftar anchor links * Mobile: tersembunyi (display none) * Desktop (≥ 1024px): tampil sebagai flex row */ .kaisar-sticky-nav__links { display: none; /* Mobile: tersembunyi */ list-style: none; margin: 0; padding: 0; align-items: center; gap: var(--spacing-1); /* 4px — jarak antar item */ flex: 1; justify-content: center; } /** * .kaisar-sticky-nav__link — Tautan anchor individual * Kontras: rgba(255,255,255,0.85) pada rgba(26,26,46,0.95) ≈ ~11:1 (WCAG AA ✓) */ .kaisar-sticky-nav__link { display: inline-block; padding: var(--spacing-2) var(--spacing-3); /* 8px 12px */ font-size: var(--font-size-sm); /* 14px */ font-weight: var(--font-weight-medium); /* 500 */ color: rgba(255, 255, 255, 0.85); text-decoration: none; border-radius: var(--radius-sm); /* 4px */ transition: color var(--transition-fast), background-color var(--transition-fast); white-space: nowrap; } .kaisar-sticky-nav__link:hover { color: var(--color-text-inverse); /* #FFFFFF */ background-color: rgba(255, 255, 255, 0.10); text-decoration: none; } .kaisar-sticky-nav__link:focus { color: var(--color-text-inverse); text-decoration: none; } .kaisar-sticky-nav__link:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; color: var(--color-text-inverse); } /* -------------------------------------------------------------------------- TOMBOL WHATSAPP MINI — Kanan -------------------------------------------------------------------------- */ /** * .kaisar-sticky-nav__wa-btn — Tombol WhatsApp mini di kanan nav * Mobile: ikon saja (teks disembunyikan) * Desktop: ikon + teks "Chat WhatsApp" * * Kontras: #FFFFFF pada #25D366 = ~2.5:1 — tombol kecil, ikon dominan * Menggunakan warna gelap untuk teks agar memenuhi kontras */ .kaisar-sticky-nav__wa-btn { display: inline-flex; align-items: center; gap: var(--spacing-2); /* 8px */ padding: var(--spacing-2) var(--spacing-3); /* 8px 12px */ background-color: var(--color-wa); /* #25D366 */ color: var(--color-dark); /* #1A1A2E — kontras ~5.1:1 pada #25D366 ✓ */ border-radius: var(--radius-full); /* Pill */ font-size: var(--font-size-sm); /* 14px */ font-weight: var(--font-weight-bold); /* 700 */ text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); box-shadow: var(--shadow-btn-wa); /* 0 4px 12px rgba(37,211,102,0.40) */ } .kaisar-sticky-nav__wa-btn:hover { background-color: var(--color-wa-dark); /* #1DA851 */ color: var(--color-dark); text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(37, 211, 102, 0.50); } .kaisar-sticky-nav__wa-btn:focus { color: var(--color-dark); text-decoration: none; } .kaisar-sticky-nav__wa-btn:focus-visible { outline: 3px solid var(--color-white); outline-offset: 3px; } /** * .kaisar-sticky-nav__wa-icon — Ikon WhatsApp SVG */ .kaisar-sticky-nav__wa-icon { flex-shrink: 0; } /** * .kaisar-sticky-nav__wa-text — Teks "Chat WhatsApp" * Mobile: tersembunyi (hanya ikon) * Desktop (≥ 768px): tampil */ .kaisar-sticky-nav__wa-text { display: none; /* Mobile: tersembunyi */ } /* -------------------------------------------------------------------------- HAMBURGER BUTTON — tampil di < 1024px (mobile & tablet) -------------------------------------------------------------------------- */ .kaisar-sticky-nav__hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; padding: 0; background: transparent; border: none; cursor: pointer; border-radius: var(--radius-btn); flex-shrink: 0; } .kaisar-sticky-nav__hamburger:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } .kaisar-sticky-nav__hamburger-bar { display: block; width: 22px; height: 2px; background-color: var(--color-text-inverse); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; transform-origin: center; } /* Animasi X saat menu terbuka */ .kaisar-sticky-nav__hamburger--open .kaisar-sticky-nav__hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .kaisar-sticky-nav__hamburger--open .kaisar-sticky-nav__hamburger-bar:nth-child(2) { opacity: 0; } .kaisar-sticky-nav__hamburger--open .kaisar-sticky-nav__hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Sembunyikan WA button di mobile & tablet — hanya desktop (≥ 1024px) */ .kaisar-sticky-nav__wa-btn { display: none !important; } /* -------------------------------------------------------------------------- MOBILE/TABLET DROPDOWN MENU — position fixed, di luar