:root { --pink: #ffacdf; --pink-light: #ffd7ef; --white: #ffffff; --paper: #f7f5f2; --black: #000000; --ink-muted: #5c5b5b; --line: rgba(0, 0, 0, 0.14); /* Dipakai cuma buat penanda "Tidak Tersedia" di kartu paket harga (lihat .plan-save-unavailable) -- satu-satunya tempat di situs ini yang butuh warna merah/status, jadi sengaja dipisah dari palet pink/hitam/putih di atas. */ --red: #e5484d; --display: "Syne", "Arial Black", sans-serif; --body: "DM Sans", Arial, sans-serif; --mono: "DM Mono", "Courier New", monospace; /* Kurva easing khas situs ini, tadinya diulang sebagai literal cubic-bezier di 7+ tempat berbeda (kartu, reveal, gap-chart). Dipusatkan jadi satu token supaya semua animasi/hover terasa satu keluarga gerakan, dan dipakai juga buat menggantikan transition polos "ease" bawaan browser di elemen interaktif (tombol, nav, link) yang sebelumnya beda rasa dari hover kartu. */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Font dasar dipasang di akar, bukan cuma di . Times New Roman yang sempat muncul di halaman admin berasal dari sini: apa pun yang lolos dari aturan body (mis. isian form yang memang tidak mewarisi font) jatuh ke font bawaan browser. Dipasang di , tidak ada lagi jalan keluar ke font sistem. */ font-family: var(--body); } body { margin: 0; min-width: 320px; color: var(--black); background: var(--white); font-family: var(--body); -webkit-font-smoothing: antialiased; } body.menu-open { overflow: hidden; } a { color: inherit; text-decoration: none; } button, a { -webkit-tap-highlight-color: transparent; } /* ============================================================ FONT UNTUK ELEMEN FORM DAN KODE ============================================================ Elemen form TIDAK mewarisi font dari halaman: browser memberi input/select/textarea/button font sistemnya sendiri (Arial di Windows, dan serif untuk beberapa jenis input). Akibatnya satu isian yang belum disetel fontnya secara khusus akan tampil beda sendiri di tengah halaman, dan itu langsung terbaca sebagai halaman yang tidak digarap. Ditaruh sebagai aturan DASAR di sini, bukan diketik ulang di tiap selector, supaya isian baru yang ditambahkan nanti otomatis ikut benar tanpa harus diingat satu per satu. Aturan yang lebih spesifik di kelas.css/admin.css/daftar.css tetap menang atas ini. Font-size sengaja TIDAK ikut diwariskan di sini -- ukuran tiap isian diatur masing-masing, dan mewariskannya dari induk akan membuat isian di dalam teks kecil ikut mengecil sampai susah disentuh di HP. */ input, select, textarea, button { font-family: inherit; } /* Elemen kode dipakai di halaman admin buat menyebut nama env var dan kata kunci seperti "done". Tanpa ini, browser memakai font monospace bawaan sistem yang bentuknya jauh berbeda dari DM Mono di sekitarnya. */ code, kbd, samp, pre { font-family: var(--mono); font-size: 0.92em; } img { display: block; max-width: 100%; } .skip-link { position: fixed; z-index: 100; top: -50px; left: 1rem; padding: 0.75rem 1rem; color: var(--black); background: var(--pink); border-radius: 999px; font-weight: 700; transition: top 180ms var(--ease-out); } .skip-link:focus { top: 1rem; } .page-shell { width: min(1180px, calc(100% - 3rem)); margin: 0 auto; } .site-header { position: fixed; z-index: 20; top: 0; left: 0; width: 100%; color: var(--white); transition: background 260ms var(--ease-out), box-shadow 260ms var(--ease-out); } .site-header.is-stuck { background: rgba(0, 0, 0, 0.92); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); } /* backdrop-filter menjadikan header containing block untuk descendant position:fixed, yang akan merusak menu mobile fullscreen. Jadi blur hanya dipakai di lebar layar tempat .main-nav tidak fixed. */ @media (min-width: 671px) { .site-header.is-stuck { background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(14px); } } .site-header.is-stuck .header-inner { min-height: 72px; } .header-inner { display: flex; align-items: center; justify-content: space-between; width: min(1320px, calc(100% - 4rem)); min-height: 96px; margin: 0 auto; } .brand { display: flex; align-items: center; gap: 0.6rem; } .brand img { width: 100px; height: auto; } .brand > span { padding-left: 0.7rem; border-left: 1px solid rgba(255, 255, 255, 0.55); font-family: var(--mono); font-size: 0.67rem; letter-spacing: 0.08em; text-transform: uppercase; } .main-nav { display: flex; align-items: center; gap: 1.85rem; font-size: 0.85rem; font-weight: 600; } .main-nav > a:not(.nav-cta) { position: relative; opacity: 0.88; } .main-nav > a:not(.nav-cta)::after { position: absolute; bottom: -0.45rem; left: 0; width: 100%; height: 1px; background: var(--pink); content: ""; transform: scaleX(0); transform-origin: right; transition: transform 180ms var(--ease-out); } .main-nav > a:not(.nav-cta):hover::after, .main-nav > a:not(.nav-cta):focus-visible::after { transform: scaleX(1); transform-origin: left; } .nav-cta { padding: 0.72rem 1rem; color: var(--black); background: var(--white); border-radius: 999px; transition: background 180ms var(--ease-out), transform 180ms var(--ease-out); } .nav-cta:hover, .nav-cta:focus-visible { background: var(--pink); transform: translateY(-2px); } .nav-toggle { display: none; width: 44px; height: 44px; padding: 0; color: var(--white); background: transparent; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 50%; cursor: pointer; } .nav-toggle span { display: block; width: 17px; height: 1.5px; margin: 4px auto; background: currentColor; transition: transform 180ms var(--ease-out); } .hero { position: relative; overflow: hidden; min-height: 760px; padding: 162px 0 74px; color: var(--white); background: var(--black); } .hero::before { position: absolute; right: 0; bottom: 0; left: 0; height: 210px; background: linear-gradient(to top, rgba(255, 172, 223, 0.12), transparent); content: ""; pointer-events: none; } .hero-glow { position: absolute; border-radius: 999px; filter: blur(1px); pointer-events: none; } .hero-glow-one { top: 14%; right: -10rem; width: 44rem; height: 44rem; background: radial-gradient(circle, rgba(255, 172, 223, 0.34), rgba(255, 172, 223, 0) 68%); } .hero-glow-two { bottom: -21rem; left: 8%; width: 38rem; height: 38rem; background: radial-gradient(circle, rgba(255, 172, 223, 0.22), rgba(255, 172, 223, 0) 70%); } /* WebGL radial-gradient di belakang hero. Kalau WebGL tidak tersedia, canvas tetap kosong dan .hero-glow di atas berperan sebagai fallback. */ .hero-shader { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; } /* Scrim menjaga teks hero yang berwarna putih tetap terbaca, berapa pun terangnya keluaran shader. Tanpa ini kontras bergantung pada noise. */ .hero-scrim { position: absolute; z-index: 0; inset: 0; background: linear-gradient( 103deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.88) 34%, rgba(0, 0, 0, 0.66) 66%, rgba(0, 0, 0, 0.44) 100% ); pointer-events: none; } .hero.has-shader .hero-glow { opacity: 0; } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.06fr 0.94fr; align-items: center; gap: 2.5rem; } .eyebrow, .section-kicker { margin: 0; font-family: var(--mono); font-size: 0.69rem; font-weight: 500; letter-spacing: 0.1em; line-height: 1.25; } .eyebrow { display: flex; align-items: center; gap: 0.6rem; color: var(--pink); } .eyebrow span { width: 0.6rem; height: 0.6rem; background: var(--pink); border-radius: 50%; } h1, h2, h3, p { margin-top: 0; } h1, h2, h3 { font-family: var(--display); font-weight: 700; } h1 { max-width: 650px; margin: 1.45rem 0 1.4rem; font-size: clamp(3.1rem, 5vw, 5.3rem); letter-spacing: -0.07em; line-height: 0.98; } h1 em, h2 em { color: var(--pink); font-style: normal; } .hero-description { max-width: 490px; margin-bottom: 2rem; color: rgba(255, 255, 255, 0.73); font-size: 1.02rem; line-height: 1.6; } .hero-actions { display: flex; align-items: center; gap: 1.3rem; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; padding: 0.94rem 1.28rem; border: 1px solid transparent; border-radius: 999px; font-size: 0.87rem; font-weight: 700; transition: transform 180ms var(--ease-out), background 180ms var(--ease-out), color 180ms var(--ease-out), border 180ms var(--ease-out); } .button span { font-size: 1.2rem; line-height: 0; } .button:hover, .button:focus-visible { transform: translateY(-3px); } .button-pink { color: var(--black); background: var(--pink); } .button-pink:hover, .button-pink:focus-visible { background: var(--white); } .text-link, .arrow-link { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.88rem; font-weight: 700; } .text-link { color: var(--white); } .text-link span, .arrow-link span { font-size: 1.2rem; transition: transform 180ms var(--ease-out); } .text-link:hover span, .text-link:focus-visible span, .arrow-link:hover span, .arrow-link:focus-visible span { transform: translateY(3px); } /* Kedua kelas di atas ditulis dengan asumsi elemennya , yang memang polos. Tapi keduanya juga dipakai di