/* ════════════════════════════════════════════════════════════ COMART — Landing Page Styles Tema: paper & ink, playful stationery ════════════════════════════════════════════════════════════ */ :root { --paper: #FFF8EE; --paper-alt: #FFF1DC; --white: #FFFFFF; --ink: #253061; --ink-soft: #5B6285; --navy: #25336F; /* biru logo Comart */ --navy-soft: #E7EBF8; --red: #EE322D; /* merah logo */ --yellow: #EE322D; /* slot aksen utama: merah khas logo (bukan kuning lagi) */ --yellow-soft: #FCE1DF; --accent-text: #FFFFFF; /* warna teks di atas aksen utama */ --accent-glow: rgba(238, 50, 45, .3); --peach: #F5A96B; /* warna kayu pensil logo */ --peach-soft: #FCE9D9; --shopee: #EE4D2D; --tokped: #03AC0E; --wa: #25D366; --footer-bg: #FFFFFF; --footer-muted: #8089A9; --footer-border: rgba(37, 48, 97, .12); --footer-link-hover: #253061; --footer-title: #E2534B; --cta-top: #2E3E85; --nav-glass: rgba(255, 248, 238, .85); --nav-overlay: rgba(255, 248, 238, .98); --radius: 22px; --shadow: 0 10px 30px rgba(37, 48, 97, 0.10); --shadow-lg: 0 18px 50px rgba(37, 48, 97, 0.16); --font-head: 'Baloo 2', cursive; --font-body: 'Nunito', sans-serif; } /* ════════════ TEMA WARNA ════════════ Tema aktif = class pada . Tanpa class = Biru Klasik (desain awal). Menambah tema musiman (Natal, Ramadan, dll.): salin salah satu blok di bawah, ganti nilai warnanya, lalu daftarkan di THEMES (main.js) dan tambahkan tombolnya di modal pemilih tema (index.php). */ html.theme-pink { --paper: #FEF4F2; --paper-alt: #FBE5E6; --ink: #5D3A44; --ink-soft: #A98693; --navy: #F2A8BE; /* struktur: pink lembut */ --navy-soft: #FBE4EB; --yellow: #FFB68E; /* aksen utama: peach */ --yellow-soft: #FFE8D8; --peach: #A5D8E2; /* aksen ketiga: biru pastel */ --peach-soft: #E1F2F6; --footer-bg: #FFFFFF; --footer-muted: #96848B; --footer-border: rgba(93, 58, 68, .12); --footer-link-hover: #5D3A44; --footer-title: #EE8A57; --cta-top: #E8909F; --accent-text: #5D3A44; --accent-glow: rgba(255, 182, 142, .5); --nav-glass: rgba(254, 244, 242, .85); } html.theme-hijau { --paper: #F7F6EC; --paper-alt: #ECEEDD; --ink: #3C5245; --ink-soft: #7C8F82; --navy: #93B29B; /* struktur: hijau sage */ --navy-soft: #E8F0E9; --yellow: #F4CD86; /* aksen utama: butter */ --yellow-soft: #FAF0D4; --peach: #EBAF8C; --peach-soft: #F8E6D6; --footer-bg: #FFFFFF; --footer-muted: #75887B; --footer-border: rgba(60, 82, 69, .12); --footer-link-hover: #3C5245; --footer-title: #C08F35; --cta-top: #7FA88B; --accent-text: #3C5245; --accent-glow: rgba(244, 205, 134, .5); --nav-glass: rgba(247, 246, 236, .85); } html.theme-midnight { --paper: #171E38; --paper-alt: #1E2747; --ink: #F2EFE4; /* teks terang di atas gelap */ --ink-soft: #A9AFC9; --navy: #31408A; --navy-soft: #232C55; --yellow: #F04B43; /* aksen: merah menyala */ --yellow-soft: #3A2030; --peach: #F5A96B; --peach-soft: #3B2F26; --footer-bg: #10162E; --footer-muted: #8B93B8; --footer-border: rgba(255, 255, 255, .1); --footer-link-hover: #FFFFFF; --footer-title: #F04B43; --cta-top: #1E2A5C; --accent-text: #FFFFFF; --accent-glow: rgba(240, 75, 67, .35); --nav-glass: rgba(23, 30, 56, .85); --nav-overlay: rgba(23, 30, 56, .98); } html.theme-merdeka { --paper: #FFF9F7; --paper-alt: #FDECEA; --ink: #4D2323; --ink-soft: #9A7A7A; --navy: #CE3A31; /* struktur: merah bendera */ --navy-soft: #FBE2E0; --yellow: #E0A93C; /* aksen: emas garuda */ --yellow-soft: #FAEFD8; --peach: #E4B87B; --peach-soft: #F8ECDD; --footer-bg: #FFFFFF; --footer-muted: #A08585; --footer-border: rgba(77, 35, 35, .12); --footer-link-hover: #4D2323; --footer-title: #C8332B; --cta-top: #B02A22; --accent-text: #4D2323; --accent-glow: rgba(224, 169, 60, .5); --nav-glass: rgba(255, 249, 247, .85); } /* Midnight Mode: komponen berlatar putih ikut menggelap */ html.theme-midnight .btn-light { color: #25336F; } html.theme-midnight .proof-chip, html.theme-midnight .notebook, html.theme-midnight .hero-chip, html.theme-midnight .stat, html.theme-midnight .product-card, html.theme-midnight .feature-card, html.theme-midnight .step-card, html.theme-midnight .testi-card, html.theme-midnight .faq-item, html.theme-midnight .brand-pill, html.theme-midnight .theme-btn, html.theme-midnight .theme-opt { background: #202A50; } html.theme-midnight .chip-3 { color: #1B2348; } html.theme-midnight .product-price { background: #0F1530; color: var(--peach); } html.theme-midnight .back-top { background: #31408A; } html.theme-midnight .highlight { color: var(--peach); } html.theme-midnight .faq-chevron { color: #8B9AE8; } html.theme-midnight .logo-img { filter: drop-shadow(0 0 7px rgba(255, 255, 255, .5)); } html.theme-midnight .step-card:nth-child(2) .step-num, html.theme-midnight .testi-card:nth-child(2n) .testi-avatar, html.theme-midnight .testi-card:nth-child(3n) .testi-avatar { color: #1B2348; } html.theme-midnight .feature-icon { background: var(--paper-alt); } html.theme-midnight .marquee { color: #F2EFE4; } html.theme-midnight .promo-bar { color: #F2EFE4; } html.theme-midnight .brand-pill { color: #C9D2F2; border-color: #31408A; } html.theme-midnight .stat-suffix { color: #8B9AE8; } /* Transisi lembut saat ganti tema (class sementara dari JS) */ html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: background-color .5s ease, color .5s ease, border-color .5s ease, fill .5s ease, background .5s ease !important; } * { margin: 0; padding: 0; box-sizing: border-box; } /* atribut hidden selalu menang, apa pun display bawaan elemennya */ [hidden] { display: none !important; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--font-body); background: var(--paper); color: var(--ink); overflow-x: hidden; line-height: 1.6; } img, svg { display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } .container { width: min(1160px, 92%); margin-inline: auto; } .container-narrow { max-width: 760px; } /* ════════════ PROGRES SCROLL (pensil) ════════════ */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 5px; z-index: 2000; pointer-events: none; } .sp-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--yellow), var(--peach)); border-radius: 0 4px 4px 0; } .sp-pencil { position: absolute; top: -6px; left: 0; font-size: 1.05rem; transform: translateX(-60%) rotate(-135deg); transition: left .1s linear; } /* ════════════ BAR PROMO ════════════ */ .promo-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1500; height: 38px; /* harus sama persis dengan offset top .navbar */ display: flex; align-items: center; justify-content: center; background: var(--navy); color: var(--paper); font-weight: 800; font-size: .85rem; padding: 0 16px; transition: background .25s; } .promo-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .promo-bar:hover { background: #2E4088; } body.has-promo .navbar { top: 38px; } body.has-promo .hero { padding-top: 178px; } body.has-promo .nav-links.open { padding-top: 38px; } /* ════════════ TOMBOL ════════════ */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 1rem; padding: 14px 28px; border-radius: 999px; border: none; cursor: pointer; position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; } .btn::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: left .6s; } .btn:hover::after { left: 130%; } .btn:hover { transform: translateY(-4px) scale(1.03); } .btn:active { transform: translateY(-1px) scale(.98); } .btn-primary { background: var(--navy); color: #fff; box-shadow: 0 8px 20px rgba(37,51,111,.35); } .btn-shopee { background: #fff; color: var(--shopee); box-shadow: 0 8px 22px rgba(0,0,0,.12); } .btn-tokped { background: #fff; color: var(--tokped); box-shadow: 0 8px 22px rgba(0,0,0,.12); } .btn-light { background: #fff; color: var(--ink); box-shadow: 0 8px 22px rgba(0,0,0,.15); } .btn-dark { background: var(--ink); color: #fff; box-shadow: 0 8px 22px rgba(37,48,97,.35); } .btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.85); } .btn-outline:hover { background: rgba(255,255,255,.14); } .btn-sm { padding: 10px 20px; font-size: .9rem; } /* ════════════ BADGE & JUDUL ════════════ */ .badge { display: inline-block; background: var(--yellow-soft); border: 2px solid var(--yellow); color: var(--ink); font-weight: 800; font-size: .85rem; padding: 6px 16px; border-radius: 999px; margin-bottom: 18px; } .highlight { position: relative; display: inline-block; color: var(--navy); } .highlight::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: .35em; background: var(--yellow); z-index: -1; border-radius: 4px; transform: scaleX(0); transform-origin: left; animation: drawLine 1s .6s cubic-bezier(.6,0,.2,1) forwards; } .reveal.in-view .highlight::after { animation-play-state: running; } @keyframes drawLine { to { transform: scaleX(1); } } .section { padding: 96px 0; } .section-alt { background: var(--paper-alt); } .section-head { text-align: center; max-width: 640px; margin: 0 auto 56px; } .section-title { font-family: var(--font-head); font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.2; margin-bottom: 12px; } .section-sub { color: var(--ink-soft); font-size: 1.05rem; } /* ════════════ PRELOADER ════════════ */ .preloader { position: fixed; inset: 0; background: var(--paper); z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity .6s, visibility .6s; } body.loaded .preloader { opacity: 0; visibility: hidden; } .preloader-inner { text-align: center; } .preloader-pencil { width: 72px; margin-inline: auto; animation: pencilWrite 1s ease-in-out infinite; } @keyframes pencilWrite { 0%, 100% { transform: rotate(-8deg) translateY(0); } 25% { transform: rotate(6deg) translateY(-6px); } 50% { transform: rotate(-4deg) translateY(2px); } 75% { transform: rotate(8deg) translateY(-4px); } } .preloader-text { display: flex; justify-content: center; gap: 2px; margin-top: 10px; font-family: var(--font-head); font-size: 2rem; font-weight: 800; } .preloader-text span { display: inline-block; animation: letterJump 1s calc(var(--i) * .08s) ease-in-out infinite; color: var(--red); } .preloader-text span:nth-child(3) { color: var(--navy); } @keyframes letterJump { 0%, 40%, 100% { transform: translateY(0); } 20% { transform: translateY(-12px); } } /* ════════════ NAVBAR ════════════ */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1600; padding: 18px 0; transition: padding .3s, box-shadow .3s; animation: slideDown .7s .2s cubic-bezier(.34,1.56,.64,1) backwards; } @keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Latar blur ditaruh di pseudo-element, BUKAN di .navbar sendiri — backdrop-filter pada .navbar membuat overlay menu mobile (position fixed di dalamnya) terkunci ke kotak navbar, bukan layar penuh. */ .navbar::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--nav-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; transition: opacity .3s; } .navbar.scrolled { padding: 10px 0; box-shadow: 0 4px 24px rgba(37,48,97,.08); } .navbar.scrolled::before { opacity: 1; } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .logo { display: inline-flex; align-items: center; } .logo-img { height: 44px; width: auto; transition: transform .4s cubic-bezier(.34,1.56,.64,1); } .logo:hover .logo-img { transform: rotate(-4deg) scale(1.06); } .logo-img-lg { height: 54px; } .nav-links { display: flex; align-items: center; gap: 26px; } .nav-link { font-weight: 700; font-size: .95rem; color: var(--ink-soft); position: relative; transition: color .25s; } .nav-link::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 3px; border-radius: 3px; background: var(--navy); transform: scaleX(0); transform-origin: right; transition: transform .3s; } .nav-link:hover, .nav-link.active { color: var(--ink); } .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); transform-origin: left; } /* Tombol nav kuning biar terbaca di atas panel navy hero */ .nav-cta { background: var(--yellow); color: var(--accent-text); box-shadow: 0 8px 20px var(--accent-glow); } /* Tombol ganti tema */ .theme-btn { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--navy-soft); background: #fff; font-size: 1.1rem; cursor: pointer; transition: transform .3s cubic-bezier(.34,1.56,.64,1), border-color .25s; flex-shrink: 0; } .theme-btn:hover { transform: rotate(-15deg) scale(1.12); border-color: var(--yellow); } /* Anotasi "Pilih tema!" dengan panah spiral ke tombol 🎨 */ .theme-hint { position: fixed; top: 118px; right: max(24px, calc((100vw - 1160px) / 2 + 52px)); z-index: 1200; pointer-events: none; display: flex; flex-direction: column; align-items: flex-end; color: var(--red); filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .95)) drop-shadow(0 0 10px rgba(255, 255, 255, .35)); animation: hintBob 3.2s 1.4s ease-in-out infinite, fadeUp .5s ease backwards; transition: opacity .45s ease, visibility .45s; } .theme-hint.hint-faded { opacity: 0; visibility: hidden; } .theme-hint[hidden] { display: none; } body.has-promo .theme-hint { top: 152px; } .theme-hint-arrow { width: 64px; height: 76px; margin-right: 14px; } .hint-path, .hint-head { stroke-dasharray: 420; stroke-dashoffset: 420; animation: hintDraw 1.1s .25s ease forwards; } .hint-head { animation-delay: 1.05s; animation-duration: .3s; } @keyframes hintDraw { to { stroke-dashoffset: 0; } } @keyframes hintBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-2deg); } } .theme-hint-text { font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.5rem; transform: rotate(-8deg); margin-top: 2px; } @media (max-width: 768px) { /* versi mungil di layar sempit, nangkring di bawah tombol 🎨 (tengah) */ .theme-hint { top: 76px; right: auto; left: calc(50% - 48px); align-items: flex-start; } body.has-promo .theme-hint { top: 112px; } .theme-hint-arrow { width: 34px; height: 40px; margin: 0 0 0 14px; } .theme-hint-text { font-size: .95rem; } } /* ════════════ MODAL PEMILIH TEMA ════════════ */ .theme-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 20, 35, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .theme-modal[hidden] { display: none; } .theme-modal-box { background: var(--paper); border-radius: 26px; padding: 34px 30px 26px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, .3); animation: popIn .45s cubic-bezier(.34,1.56,.64,1); } .theme-modal-title { font-family: var(--font-head); font-weight: 800; font-size: 1.45rem; color: var(--ink); } .theme-modal-sub { color: var(--ink-soft); font-size: .9rem; margin: 4px 0 20px; } .theme-options { display: grid; gap: 12px; } .theme-opt { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-radius: 16px; border: 2px solid var(--navy-soft); background: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--ink); cursor: pointer; transition: transform .25s cubic-bezier(.34,1.56,.64,1), border-color .25s, box-shadow .25s; } .theme-opt:hover { transform: translateY(-3px) scale(1.02); border-color: var(--yellow); box-shadow: var(--shadow); } .swatch { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(255, 255, 255, .8); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); } /* Merdeka terkunci di luar Agustus: dicoret + gembok */ .theme-opt-locked { opacity: .82; } .theme-opt-locked .opt-label { text-decoration: line-through; text-decoration-thickness: 2.5px; text-decoration-color: rgba(206, 58, 49, .8); } .theme-opt-locked .opt-label::after { content: '🔒'; display: inline-block; /* biar gemboknya tidak ikut tercoret */ margin-left: 8px; font-size: .85em; } /* Kuis pembuka */ .theme-quiz-q { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: var(--ink); margin-bottom: 14px; line-height: 1.45; } .quiz-options { display: grid; gap: 10px; } .quiz-opt { padding: 11px 16px; border-radius: 13px; border: 2px solid var(--navy-soft); background: #fff; font-family: var(--font-body); font-weight: 700; font-size: .95rem; color: var(--ink); cursor: pointer; transition: transform .2s, border-color .2s; } .quiz-opt:hover { transform: translateY(-2px); border-color: var(--yellow); } .quiz-opt.quiz-salah { border-color: #E23A33; animation: quizShake .4s; } @keyframes quizShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-4px); } } .quiz-feedback { min-height: 1.5em; margin-top: 12px; font-weight: 800; font-size: .92rem; } .quiz-feedback.benar { color: #1B9E4B; } .quiz-feedback.salah { color: #E23A33; } html.theme-midnight .quiz-opt { background: #202A50; } .flag-id { width: 21px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); flex-shrink: 0; } .theme-skip { margin-top: 16px; background: none; border: none; color: var(--ink-soft); font-weight: 700; font-size: .85rem; cursor: pointer; text-decoration: underline; } .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; z-index: 1100; } .hamburger span { width: 26px; height: 3px; background: var(--ink); border-radius: 3px; transition: transform .3s, opacity .3s; } .hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ════════════ HERO ════════════ */ .hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 140px 0 90px; overflow: hidden; } .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; animation: blobFloat 14s ease-in-out infinite; pointer-events: none; } .blob-1 { width: 420px; height: 420px; background: var(--yellow-soft); top: -100px; left: -120px; } .blob-2 { width: 480px; height: 480px; background: var(--peach-soft); bottom: -160px; left: 4%; animation-delay: -5s; } /* Panel navy "alas potong" dengan lekukan organik */ .hero-panel { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hero-panel svg { width: 100%; height: 100%; display: block; } .hero-panel svg path:first-of-type { fill: var(--navy); } @keyframes blobFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.1); } 66% { transform: translate(-30px, 30px) scale(.95); } } .doodle { position: absolute; font-size: var(--size, 2rem); z-index: 2; animation: floaty var(--dur) calc(var(--del) + 1.7s) ease-in-out infinite; pointer-events: none; } .doodle .d-in { display: inline-block; opacity: 0; transform: rotate(var(--rot, 0deg)); animation: doodleIn .8s calc(var(--del) + .9s) cubic-bezier(.34,1.56,.64,1) forwards; filter: drop-shadow(0 8px 12px rgba(16,22,50,.35)); } @keyframes doodleIn { from { opacity: 0; transform: scale(0) rotate(calc(var(--rot, 0deg) - 120deg)); } to { opacity: .95; transform: scale(1) rotate(var(--rot, 0deg)); } } @keyframes floaty { 0%, 100% { margin-top: 0; } 50% { margin-top: -22px; } } .hero-inner { position: relative; z-index: 3; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; } .pop-in { animation: popIn .6s .35s cubic-bezier(.34,1.56,.64,1) backwards; } @keyframes popIn { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } } .hero-script { font-family: 'Caveat', cursive; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; color: var(--red); transform: rotate(-2deg); margin-bottom: 4px; animation: scriptIn .6s .35s cubic-bezier(.34,1.56,.64,1) backwards; } @keyframes scriptIn { from { opacity: 0; transform: rotate(-2deg) scale(.6); } to { opacity: 1; transform: rotate(-2deg) scale(1); } } .hero-title { font-family: var(--font-head); font-size: clamp(2.5rem, 5.8vw, 4.4rem); text-transform: uppercase; line-height: 1.04; margin-bottom: 20px; } .hero-title .title-line:first-child { font-size: .58em; letter-spacing: .04em; } .title-line { display: block; } .title-word { display: inline-block; animation: wordUp .7s cubic-bezier(.34,1.56,.64,1) backwards; } .title-line:nth-child(1) .title-word:nth-child(1) { animation-delay: .45s; } .title-line:nth-child(1) .title-word:nth-child(2) { animation-delay: .55s; } .title-line:nth-child(1) .title-word:nth-child(3) { animation-delay: .65s; } .title-line:nth-child(2) .title-word:nth-child(1) { animation-delay: .75s; } .title-line:nth-child(2) .title-word:nth-child(2) { animation-delay: .85s; } .title-line:nth-child(2) .title-word:nth-child(3) { animation-delay: .95s; } @keyframes wordUp { from { opacity: 0; transform: translateY(40px) rotate(4deg); } to { opacity: 1; transform: translateY(0) rotate(0); } } .hero-title .highlight::after { animation-delay: 1.3s; } .hero-sub { font-size: 1.1rem; color: var(--ink-soft); max-width: 480px; margin-bottom: 30px; animation: fadeUp .8s 1s backwards; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; animation: fadeUp .8s 1.15s backwards; } .hero-proof { display: flex; flex-wrap: wrap; gap: 10px; animation: fadeUp .8s 1.3s backwards; } .proof-chip { background: #fff; border: 2px solid var(--paper-alt); padding: 6px 14px; border-radius: 999px; font-size: .85rem; font-weight: 800; box-shadow: var(--shadow); } @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* Notebook illustration */ .hero-art { position: relative; display: flex; justify-content: center; animation: fadeUp .9s .9s backwards; } .notebook { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 46px 34px 34px; width: min(340px, 100%); position: relative; transform: rotate(2deg); animation: notebookBob 6s ease-in-out infinite; background-image: repeating-linear-gradient( transparent, transparent 34px, var(--paper-alt) 34px, var(--paper-alt) 36px ); } @keyframes notebookBob { 0%, 100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(-14px); } } .notebook-rings { position: absolute; top: -12px; left: 0; right: 0; display: flex; justify-content: space-evenly; } .notebook-rings span { width: 14px; height: 26px; border: 4px solid var(--navy); border-radius: 8px; background: var(--paper); } .notebook-title { font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; margin-bottom: 14px; } .notebook-list li { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink-soft); padding: 7px 0; opacity: 0; animation: fadeUp .5s calc(1.2s + var(--i) * .25s) forwards; } .notebook-list .check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .7rem; flex-shrink: 0; animation: checkPop .4s calc(1.35s + var(--i) * .25s) cubic-bezier(.34,1.56,.64,1) backwards; } @keyframes checkPop { from { transform: scale(0); } to { transform: scale(1); } } .hero-chip { position: absolute; background: #fff; box-shadow: var(--shadow-lg); border-radius: 999px; padding: 10px 18px; font-weight: 800; font-size: .85rem; white-space: nowrap; animation: chipFloat 5s ease-in-out infinite, popIn .6s cubic-bezier(.34,1.56,.64,1) backwards; } .chip-1 { top: -5%; left: -6%; animation-delay: 0s, 1.6s; } .chip-2 { bottom: 10%; left: -10%; animation-delay: -2s, 1.75s; } .chip-3 { top: 38%; right: -6%; animation-delay: -3.5s, 1.9s; background: var(--peach); } @keyframes chipFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* Scroll indicator */ .scroll-down { position: absolute; bottom: 82px; left: 50%; transform: translateX(-50%); z-index: 3; animation: fadeUp 1s 2s backwards; } .mouse { display: block; width: 26px; height: 42px; border: 3px solid rgba(255,255,255,.8); border-radius: 14px; position: relative; } .wheel { position: absolute; top: 7px; left: 50%; width: 4px; height: 8px; margin-left: -2px; background: var(--yellow); border-radius: 4px; animation: wheelScroll 1.6s ease-in-out infinite; } @keyframes wheelScroll { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } } /* ════════════ MARQUEE ════════════ */ .marquee { background: var(--navy); color: var(--paper); padding: 16px 0; overflow: hidden; transform: rotate(-1.2deg) scale(1.02); box-shadow: 0 10px 30px rgba(37, 48, 97, 0.18); position: relative; z-index: 5; /* Tarik ke atas supaya menempel ke tepi bawah hero tanpa celah, termasuk saat ujung strip terangkat karena rotasi. */ margin-top: -44px; } .marquee-track { display: flex; width: max-content; animation: marqueeMove 22s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-group { display: flex; align-items: center; flex-shrink: 0; } .marquee-item { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; padding: 0 18px; white-space: nowrap; } .marquee-dot { color: var(--yellow); } @keyframes marqueeMove { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ════════════ STATISTIK ════════════ */ .stats { padding: 80px 0 10px; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .stat { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; padding: 30px 16px; border-bottom: 5px solid var(--yellow); transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s; } .stat:nth-child(2) { border-color: var(--navy); } .stat:nth-child(3) { border-color: var(--peach); } .stat:nth-child(4) { border-color: var(--navy); } .stat:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: var(--shadow-lg); } .stat-num, .stat-suffix { font-family: var(--font-head); font-size: 2.3rem; font-weight: 800; color: var(--ink); } .stat-suffix { color: var(--navy); } .stat-label { color: var(--ink-soft); font-weight: 700; margin-top: 2px; } /* ════════════ PRODUK ════════════ */ .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .product-card { background: #fff; border-radius: var(--radius); padding: 28px 22px; box-shadow: var(--shadow); text-align: center; transition: box-shadow .35s; transform-style: preserve-3d; will-change: transform; position: relative; } .product-card:hover { box-shadow: var(--shadow-lg); } .product-icon { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 28px; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; transition: transform .4s cubic-bezier(.34,1.56,.64,1); transform: translateZ(30px); } .product-card:hover .product-icon { transform: translateZ(40px) scale(1.15) rotate(-8deg); } .product-icon span { animation: iconWiggle 3.5s ease-in-out infinite; display: inline-block; } @keyframes iconWiggle { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-8deg); } 96% { transform: rotate(8deg); } } .c-navy .product-icon { background: var(--navy-soft); } .c-yellow .product-icon { background: var(--yellow-soft); } .c-peach .product-icon { background: var(--peach-soft); } .product-name { font-family: var(--font-head); font-size: 1.15rem; margin-bottom: 8px; } .product-desc { font-size: .88rem; color: var(--ink-soft); min-height: 3.2em; margin-bottom: 14px; } .product-price { display: inline-block; font-weight: 800; font-size: .85rem; background: var(--ink); color: var(--peach); padding: 5px 14px; border-radius: 999px; margin-bottom: 16px; } .product-links { display: flex; justify-content: center; gap: 8px; } .mini-link { font-size: .78rem; font-weight: 800; padding: 6px 14px; border-radius: 999px; border: 2px solid; transition: transform .25s, background .25s, color .25s; } .mini-link.shopee { color: var(--shopee); border-color: var(--shopee); } .mini-link.shopee:hover { background: var(--shopee); color: #fff; transform: scale(1.08); } .mini-link.tokped { color: var(--tokped); border-color: var(--tokped); } .mini-link.tokped:hover { background: var(--tokped); color: #fff; transform: scale(1.08); } /* ════════════ BADGE & MARQUEE BRAND DI PRODUK ════════════ */ .product-badge { position: absolute; top: 14px; right: -8px; background: var(--yellow); color: var(--accent-text); font-size: .72rem; font-weight: 800; padding: 5px 12px; border-radius: 999px 0 0 999px; box-shadow: var(--shadow); transform: rotate(3deg) translateZ(35px); animation: badgeWiggle 4s ease-in-out infinite; z-index: 1; } @keyframes badgeWiggle { 0%, 86%, 100% { transform: rotate(3deg) translateZ(35px); } 90% { transform: rotate(-3deg) translateZ(35px) scale(1.08); } 95% { transform: rotate(4deg) translateZ(35px); } } /* Produk terlaris */ .laris-head { text-align: center; margin: 70px 0 32px; } .laris-title { font-family: var(--font-head); font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 6px; } .laris-sub { color: var(--ink-soft); font-size: .95rem; } .laris-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .laris-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 16px 20px; text-align: center; transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s; } .laris-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); } .laris-imgwrap { border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 1; background: var(--paper-alt); margin-bottom: 14px; } .laris-imgwrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; } .laris-card:hover .laris-imgwrap img { transform: scale(1.07); } .laris-nama { font-family: var(--font-body); font-weight: 800; font-size: .92rem; line-height: 1.45; min-height: 2.9em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; } .laris-harga { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: var(--navy); margin-bottom: 14px; } .laris-harga s { color: var(--ink-soft); font-size: .8rem; font-weight: 600; margin-left: 7px; } html.theme-midnight .laris-card { background: #202A50; } html.theme-midnight .laris-harga { color: #C9D2F2; } .brand-strip { margin-top: 54px; text-align: center; } .brand-label { font-weight: 800; color: var(--ink-soft); font-size: .9rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 18px; } .brand-marquee { overflow: hidden; /* ruang ekstra atas-bawah supaya pill yang terangkat saat hover/tap tidak terpotong border-nya */ padding: 8px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .brand-track { display: flex; width: max-content; animation: marqueeMove 75s linear infinite reverse; } .brand-marquee:hover .brand-track { animation-play-state: paused; } .brand-group { display: flex; gap: 14px; padding-right: 14px; flex-shrink: 0; } .brand-pill { background: #fff; border: 2px solid var(--navy-soft); color: var(--navy); font-family: var(--font-head); font-weight: 700; font-size: .95rem; padding: 8px 22px; border-radius: 999px; white-space: nowrap; transition: transform .25s, border-color .25s; } .brand-pill:hover { transform: translateY(-3px); border-color: var(--yellow); } .brand-pill { cursor: pointer; } .brand-track.paused { animation-play-state: paused !important; } /* Bubble pencarian brand */ .brand-bubble { position: fixed; z-index: 1300; background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); padding: 12px 16px; animation: popIn .3s cubic-bezier(.34,1.56,.64,1); } .brand-bubble-text { font-size: .88rem; font-weight: 700; color: var(--ink); margin-bottom: 9px; white-space: nowrap; } .brand-bubble-text strong { color: var(--navy); } .brand-bubble-actions { display: flex; gap: 8px; justify-content: center; } .brand-bubble-tail { position: absolute; bottom: -6px; width: 14px; height: 14px; background: inherit; transform: rotate(45deg); border-radius: 3px; } .brand-bubble.below .brand-bubble-tail { bottom: auto; top: -6px; } html.theme-midnight .brand-bubble { background: #202A50; } html.theme-midnight .brand-bubble-text strong { color: #C9D2F2; } /* ════════════ CARA BELANJA ════════════ */ .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; } .steps-grid::before { content: ''; position: absolute; top: 54px; left: 12%; right: 12%; border-top: 3px dashed var(--peach); z-index: 0; } .step-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; padding: 38px 26px 30px; position: relative; z-index: 1; transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s; } .step-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); } .step-num { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: .95rem; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid var(--paper); } .step-card:nth-child(2) .step-num { background: var(--peach); color: var(--ink); } .step-card:nth-child(3) .step-num { background: var(--yellow); color: var(--accent-text); } .step-icon { font-size: 2.6rem; margin-bottom: 12px; display: inline-block; animation: chipFloat 4.5s ease-in-out infinite; } .step-card:nth-child(2) .step-icon { animation-delay: -1.5s; } .step-card:nth-child(3) .step-icon { animation-delay: -3s; } .step-title { font-family: var(--font-head); font-size: 1.15rem; margin-bottom: 8px; } .step-desc { font-size: .92rem; color: var(--ink-soft); } /* ════════════ FAQ ════════════ */ .faq-list { display: grid; gap: 14px; } .faq-item { background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: 4px 22px; border: 2px solid transparent; transition: border-color .25s; } .faq-item[open] { border-color: var(--yellow); } .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 16px 0; font-weight: 800; font-size: 1rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-q { flex: 1; } .faq-chevron { color: var(--navy); font-size: 1.2rem; transition: transform .3s cubic-bezier(.34,1.56,.64,1); flex-shrink: 0; } .faq-item[open] .faq-chevron { transform: rotate(180deg); } .faq-a { color: var(--ink-soft); font-size: .95rem; padding: 0 0 18px; animation: fadeUp .35s ease both; } /* ════════════ KEUNGGULAN ════════════ */ .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .feature-card { background: #fff; border-radius: var(--radius); padding: 34px 24px; text-align: center; box-shadow: var(--shadow); transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s; } .feature-card:hover { transform: translateY(-10px) rotate(1deg); box-shadow: var(--shadow-lg); } .feature-icon { font-size: 2.6rem; width: 90px; height: 90px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--paper); border: 3px dashed var(--navy); transition: transform .5s; } .feature-card:nth-child(2) .feature-icon { border-color: var(--peach); } .feature-card:nth-child(3) .feature-icon { border-color: var(--yellow); } .feature-card:nth-child(4) .feature-icon { border-color: var(--navy); } .feature-card:hover .feature-icon { transform: rotate(360deg); } .feature-title { font-family: var(--font-head); font-size: 1.15rem; margin-bottom: 8px; } .feature-desc { font-size: .9rem; color: var(--ink-soft); } /* ════════════ MARKETPLACE ════════════ */ .market-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .market-card { border-radius: calc(var(--radius) + 6px); padding: 44px 38px; color: #fff; position: relative; overflow: hidden; transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .market-card::before { content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.12); top: -70px; right: -70px; transition: transform .5s; } .market-card::after { content: ''; position: absolute; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.10); bottom: -50px; left: -40px; transition: transform .5s; } .market-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: var(--shadow-lg); } .market-card:hover::before { transform: scale(1.3); } .market-card:hover::after { transform: scale(1.4); } .market-shopee { background: linear-gradient(135deg, #FF7A50, var(--shopee)); } .market-tokped { background: linear-gradient(135deg, #3ECB47, var(--tokped)); } .market-emoji { animation: chipFloat 4s ease-in-out infinite; } .market-emoji svg { width: 54px; height: 54px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.2)); } .market-name { font-family: var(--font-head); font-size: 1.9rem; } .market-desc { opacity: .92; max-width: 340px; position: relative; z-index: 1; } .market-rating { font-weight: 800; letter-spacing: 2px; color: #FFE066; } .market-rating em { font-style: normal; letter-spacing: 0; color: #fff; opacity: .9; font-size: .85rem; } .market-btn { margin-top: 12px; background: #fff; font-family: var(--font-head); font-weight: 700; padding: 12px 26px; border-radius: 999px; transition: transform .3s cubic-bezier(.34,1.56,.64,1), gap .3s; position: relative; z-index: 1; } .market-shopee .market-btn { color: var(--shopee); } .market-tokped .market-btn { color: var(--tokped); } .market-card:hover .market-btn { transform: scale(1.08); } /* ════════════ TESTIMONI ════════════ */ .testi-marquee { overflow: hidden; padding: 10px 0 20px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .testi-track { display: flex; width: max-content; animation: marqueeMove 64s linear infinite; /* 10 kartu, jaga kecepatan tetap santai */ } .testi-marquee:hover .testi-track { animation-play-state: paused; } .testi-group { display: flex; gap: 24px; padding-right: 24px; flex-shrink: 0; } .testi-card { background: #fff; width: 330px; border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; transition: transform .3s; } .testi-card:hover { transform: translateY(-6px) rotate(-.5deg); } .testi-stars { color: #F6B93B; /* bintang selalu emas, apa pun temanya */ font-size: 1.05rem; letter-spacing: 3px; margin-bottom: 10px; } .testi-text { font-size: .95rem; color: var(--ink-soft); font-weight: 600; margin-bottom: 16px; min-height: 4.5em; } .testi-meta { display: flex; align-items: center; gap: 10px; } .testi-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800; } .testi-card:nth-child(2n) .testi-avatar { background: var(--peach); color: var(--ink); } .testi-card:nth-child(3n) .testi-avatar { background: var(--yellow); color: var(--ink); } .testi-name { font-weight: 800; font-size: .92rem; } .testi-platform { margin-left: auto; font-size: .72rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; color: #fff; } .p-shopee { background: var(--shopee); } .p-tokopedia { background: var(--tokped); } /* ════════════ CTA BANNER ════════════ */ .cta-banner { padding: 96px 0; /* gradasi vertikal yang berakhir tepat di warna ombak footer */ background: linear-gradient(180deg, var(--cta-top) 0%, var(--navy) 100%); } .cta-inner { text-align: center; color: #fff; } .cta-emoji { display: inline-block; font-size: 3.4rem; margin-bottom: 12px; animation: cartShake 2.4s ease-in-out infinite; } @keyframes cartShake { 0%, 70%, 100% { transform: rotate(0) translateX(0); } 75% { transform: rotate(-10deg) translateX(-6px); } 80% { transform: rotate(10deg) translateX(6px); } 85% { transform: rotate(-8deg) translateX(-4px); } 90% { transform: rotate(6deg) translateX(3px); } 95% { transform: rotate(0) translateX(0); } } .cta-title { font-family: var(--font-head); font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 10px; text-shadow: 0 3px 14px rgba(37,48,97,.25); } .cta-sub { font-size: 1.1rem; opacity: .95; margin-bottom: 30px; } .cta-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; } /* ════════════ FOOTER ════════════ */ /* Footer terang berombak untuk SEMUA tema — logo tampil warna asli */ .footer { background: var(--footer-bg); color: var(--ink); padding: 104px 0 0; position: relative; } .footer-wave { display: block; position: absolute; top: -1px; left: 0; width: 100%; height: 58px; } .footer-wave path { fill: var(--navy); } /* Penyesuaian kontras per tema */ html.theme-pink .marquee { background: #E890AC; } html.theme-pink .marquee-dot { color: #CEEDED; } html.theme-hijau .marquee { color: #FFFFFF; } html.theme-pink .notebook-list .check { background: #7FC6D7; } html.theme-hijau .notebook-list .check { background: #6F9179; } html.theme-pink .highlight { color: #EE8A57; } html.theme-hijau .highlight { color: #4E7A5F; } html.theme-pink .promo-bar { background: #E890AC; } html.theme-hijau .promo-bar { background: #7FA88B; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; padding-bottom: 46px; } .logo-footer { margin-bottom: 16px; transition: transform .3s cubic-bezier(.34,1.56,.64,1); } .logo-footer:hover { transform: rotate(-2deg) scale(1.04); } .footer-about { color: var(--footer-muted); font-size: .92rem; max-width: 300px; } .footer-title { font-family: var(--font-head); font-size: 1.05rem; margin-bottom: 16px; color: var(--footer-title); } .footer-links li { margin-bottom: 10px; } .footer-links a { color: var(--footer-muted); font-weight: 600; font-size: .92rem; display: inline-flex; align-items: center; gap: 9px; transition: color .25s, padding-left .25s; } .footer-links a:hover { color: var(--footer-link-hover); padding-left: 6px; } .f-ico { width: 17px; height: 17px; flex-shrink: 0; } .i-shopee { color: #FF6A47; } .i-tokped { color: #42D06B; } .i-ig { color: #E175A9; } .i-wa { color: var(--wa); } .i-mail { color: var(--yellow); } .i-maps { color: #7FA7F5; } .footer-bottom { border-top: 1px solid var(--footer-border); padding: 22px 0; text-align: center; font-size: .88rem; color: var(--footer-muted); } /* ════════════ TOMBOL MELAYANG ════════════ */ .wa-float { position: fixed; bottom: 24px; right: 24px; z-index: 900; width: 56px; height: 56px; border-radius: 50%; background: var(--wa); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(37,211,102,.45); transition: transform .3s cubic-bezier(.34,1.56,.64,1); } .wa-float:hover { transform: scale(1.12) rotate(8deg); } .wa-pulse { position: absolute; inset: 0; border-radius: 50%; background: var(--wa); animation: waPulse 1.8s ease-out infinite; z-index: -1; } @keyframes waPulse { from { transform: scale(1); opacity: .6; } to { transform: scale(1.7); opacity: 0; } } .back-top { position: fixed; bottom: 92px; right: 24px; z-index: 900; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--ink); color: #fff; font-size: 1.2rem; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .3s, transform .3s, visibility .3s, background .3s; } .back-top.show { opacity: 1; visibility: visible; transform: translateY(0); } .back-top:hover { background: var(--yellow); color: var(--accent-text); } /* ════════════ REVEAL ON SCROLL ════════════ */ .reveal { opacity: 0; transform: translateY(46px); transition: opacity .8s var(--d, 0s) cubic-bezier(.25,.7,.3,1), transform .8s var(--d, 0s) cubic-bezier(.25,.7,.3,1); } .reveal-left { transform: translateX(-70px); } .reveal-right { transform: translateX(70px); } .reveal.in-view { opacity: 1; transform: translate(0, 0); } /* ════════════ RESPONSIVE ════════════ */ @media (max-width: 1024px) { .product-grid, .feature-grid, .stats-grid { grid-template-columns: repeat(2, 1fr); } .laris-grid { grid-template-columns: repeat(2, 1fr); } .hero-panel, .doodle { display: none; } .hero-inner { grid-template-columns: 1fr; text-align: center; } .hero-script { transform: none; } .hero-text { display: flex; flex-direction: column; align-items: center; } .hero-sub { max-width: 560px; } .hero-art { margin-top: 26px; } .chip-1 { left: 2%; } .chip-2 { left: 0; } .chip-3 { right: 0; } } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid .footer-col:first-child { grid-column: 1 / -1; } } @media (max-width: 768px) { .section { padding: 70px 0; } .hamburger { display: flex; } .nav-links { position: fixed; inset: 0; background: var(--nav-overlay); backdrop-filter: blur(10px); flex-direction: column; justify-content: center; gap: 30px; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; z-index: 1000; } .nav-links.open { opacity: 1; visibility: visible; } .nav-link { font-size: 1.3rem; } .market-grid { grid-template-columns: 1fr; } .hero { min-height: auto; } /* Kategori & Paling Laris: geser horizontal biar halaman tidak kepanjangan */ .product-grid, .laris-grid { display: flex; overflow-x: auto; gap: 16px; padding: 6px 14px 18px 6px; margin-inline: -6px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .product-grid > *, .laris-grid > * { flex: 0 0 76%; max-width: 300px; scroll-snap-align: start; } .steps-grid { grid-template-columns: 1fr; gap: 34px; } .steps-grid::before { display: none; } .promo-bar { font-size: .74rem; padding: 0 12px; } .brand-strip { margin-top: 40px; } .scroll-down { display: none; } } @media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } .stats-grid { gap: 14px; } .stat-num, .stat-suffix { font-size: 1.7rem; } .hero-cta .btn { width: 100%; justify-content: center; } .hero-chip { display: none; } .testi-card { width: 280px; } } /* ════════════ AKSESIBILITAS ════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; } }