/* ===================================================================== NAYAKITA — Light Glassmorphism Design System Palet terbatas: netral slate + satu keluarga aksen (cyan → sky). Latar berlapis dipasang tetap (fixed) di agar antar-section tidak pernah terlihat terputus. ===================================================================== */ /* ───────────────────────── 1. TOKEN ───────────────────────── */ :root{ /* netral: putihnya sengaja diturunkan sedikit ke arah biru abu supaya tidak menyilaukan saat dipakai lama di layar terang */ --n-0:#fdfefe; --n-25:#f7fafc; --n-50:#eef3f8; --n-100:#e3eaf2; --n-200:#d2dce8; --n-300:#b9c5d4; --n-400:#8d9bad; --n-500:#65748a; --n-600:#4a5768; --n-700:#33404f; --n-800:#1e2937; --n-900:#0e1622; /* aksen — satu keluarga saja */ --a-300:#67e8f9; --a-400:#22d3ee; --a-500:#06b6d4; --a-600:#0891b2; --a-700:#0e7490; --a-ink:#0b6478; /* peran */ --bg:var(--n-50); --ink:var(--n-900); --ink-2:var(--n-600); --ink-3:var(--n-400); --line:rgba(14,22,34,.09); --line-2:rgba(14,22,34,.055); /* kaca: mendekati material Apple, blur tinggi + saturasi + rim cahaya. Nilai putihnya diredam agar permukaan terasa lembut, bukan menyilaukan. */ --glass:rgba(252,253,255,.50); --glass-2:rgba(252,253,255,.32); --glass-3:rgba(253,254,255,.68); --glass-brd:rgba(255,255,255,.88); --glass-brd-2:rgba(14,22,34,.065); --glass-tint:rgba(252,253,255,.28); --glass-spec:rgba(255,255,255,.72); --blur:34px; --blur-sm:20px; --sat:190%; --sh-1:0 1px 2px rgba(11,18,32,.04), 0 4px 14px rgba(11,18,32,.05); --sh-2:0 2px 6px rgba(11,18,32,.05), 0 14px 38px rgba(11,18,32,.08); --sh-3:0 4px 12px rgba(11,18,32,.06), 0 28px 70px rgba(11,18,32,.11); --sh-a:0 10px 30px rgba(6,182,212,.28); --r-xs:10px; --r-sm:14px; --r:20px; --r-lg:28px; --r-xl:36px; --r-2xl:48px; --r-full:999px; /* Tipografi — nama font & metrik diisi dari Pengaturan → Tipografi */ --font-display:"Space Grotesk"; --font-body:"Inter"; --font-mono:"JetBrains Mono"; --f-display:var(--font-display),ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --f-body:var(--font-body),ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --f-mono:var(--font-mono),ui-monospace,SFMono-Regular,Menlo,monospace; --h-weight:700; --h-track:-.03em; --b-size:16.5px; --b-line:1.62; --b-track:-.005em; --wrap:1200px; --ease:cubic-bezier(.22,.75,.26,1); --ease-out:cubic-bezier(.16,1,.3,1); --mesh-1:rgba(6,182,212,.15); --mesh-2:rgba(56,116,182,.12); --mesh-3:rgba(250,252,255,.72); --grain:.04; } :root[data-theme="dark"]{ --bg:#080c13; --ink:#eef3f9; --ink-2:#a7b4c5; --ink-3:#6b7a8e; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06); --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.032); --glass-3:rgba(255,255,255,.09); --glass-brd:rgba(255,255,255,.18); --glass-brd-2:rgba(255,255,255,.06); --glass-tint:rgba(255,255,255,.03); --glass-spec:rgba(255,255,255,.22); --sh-1:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.34); --sh-2:0 2px 8px rgba(0,0,0,.45), 0 16px 44px rgba(0,0,0,.42); --sh-3:0 6px 16px rgba(0,0,0,.5), 0 34px 80px rgba(0,0,0,.5); --sh-a:0 10px 34px rgba(34,211,238,.24); --a-ink:#7fe6f8; --mesh-1:rgba(6,182,212,.20); --mesh-2:rgba(46,92,150,.22); --mesh-3:rgba(255,255,255,.04); --grain:.05; } /* ───────────────────────── 2. DASAR ───────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px;overflow-x:hidden} @supports (overflow:clip){html,body{overflow-x:clip}} body{ margin:0;font-family:var(--f-body);font-size:var(--b-size);line-height:var(--b-line); letter-spacing:var(--b-track); color:var(--ink);background:var(--bg); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden;font-feature-settings:"ss01","cv01"; } /* Latar berlapis, fixed, jadi tidak ada jahitan antar section. Lapisannya: jaring grid, tiga orb yang mengorbit pelan, sorotan mengikuti kursor, lalu butiran halus di paling atas. Semuanya tampil di SEMUA halaman. */ .bg-field{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden; background:radial-gradient(120% 90% at 50% -10%,var(--mesh-3) 0%,transparent 60%)} /* jaring grid menyeluruh, memudar di tepi supaya tidak terasa kaku */ .bg-field .grid-net{position:absolute;inset:-2px; background-image:linear-gradient(var(--line-2) 1px,transparent 1px), linear-gradient(90deg,var(--line-2) 1px,transparent 1px); background-size:74px 74px;background-position:center; -webkit-mask:radial-gradient(115% 85% at 50% 12%,#000 0%,rgba(0,0,0,.55) 48%,transparent 88%); mask:radial-gradient(115% 85% at 50% 12%,#000 0%,rgba(0,0,0,.55) 48%,transparent 88%); opacity:.85} /* orb: blur besar + opacity rendah supaya gradasinya halus, tanpa banding */ .bg-field i{position:absolute;display:block;border-radius:50%; filter:blur(96px);will-change:transform;opacity:.9; transform:translateZ(0);backface-visibility:hidden} .bg-field .o1{width:58vmax;height:58vmax;left:-14vmax;top:-18vmax; background:radial-gradient(circle at 42% 42%,var(--mesh-1) 0%,var(--mesh-1) 22%,transparent 72%); animation:orb1 54s cubic-bezier(.45,.05,.55,.95) infinite} .bg-field .o2{width:50vmax;height:50vmax;right:-12vmax;top:4vmax; background:radial-gradient(circle at 58% 44%,var(--mesh-2) 0%,var(--mesh-2) 20%,transparent 72%); animation:orb2 68s cubic-bezier(.45,.05,.55,.95) infinite} .bg-field .o3{width:66vmax;height:66vmax;left:10vmax;bottom:-30vmax; background:radial-gradient(circle at 50% 50%,var(--mesh-1) 0%,var(--mesh-1) 18%,transparent 74%); animation:orb3 86s cubic-bezier(.45,.05,.55,.95) infinite} /* sorotan cahaya mengikuti kursor, berlaku di seluruh halaman */ .bg-field .spot-g{position:absolute;width:640px;height:640px;border-radius:50%; left:var(--mx,50%);top:var(--my,38%);transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(6,182,212,.13) 0%,rgba(6,182,212,.05) 38%,transparent 68%); filter:blur(26px);opacity:0;transition:opacity .8s var(--ease)} .bg-field.awake .spot-g{opacity:1} :root[data-theme="dark"] .bg-field .spot-g{ background:radial-gradient(circle,rgba(34,211,238,.14) 0%,rgba(34,211,238,.05) 38%,transparent 68%)} .bg-field .grain{position:absolute;inset:0;opacity:var(--grain);mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); filter:none} /* orbit halus: berputar mengelilingi layar sambil naik turun perlahan */ @keyframes orb1{ 0% {transform:translate3d(0,0,0) scale(1)} 25% {transform:translate3d(9vmax,4vmax,0) scale(1.07)} 50% {transform:translate3d(4vmax,11vmax,0) scale(1.13)} 75% {transform:translate3d(-5vmax,6vmax,0) scale(1.05)} 100%{transform:translate3d(0,0,0) scale(1)} } @keyframes orb2{ 0% {transform:translate3d(0,0,0) scale(1.05)} 25% {transform:translate3d(-7vmax,7vmax,0) scale(.96)} 50% {transform:translate3d(-11vmax,-3vmax,0) scale(1.1)} 75% {transform:translate3d(-3vmax,-8vmax,0) scale(1)} 100%{transform:translate3d(0,0,0) scale(1.05)} } @keyframes orb3{ 0% {transform:translate3d(0,0,0) scale(.97)} 25% {transform:translate3d(7vmax,-6vmax,0) scale(1.06)} 50% {transform:translate3d(-4vmax,-10vmax,0) scale(1.12)} 75% {transform:translate3d(-8vmax,-2vmax,0) scale(1.02)} 100%{transform:translate3d(0,0,0) scale(.97)} } img,svg,video{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} ul,ol{margin:0 0 1em;padding-left:1.15em} p{margin:0 0 1em} ::selection{background:var(--a-500);color:#fff} :focus-visible{outline:2px solid var(--a-500);outline-offset:3px;border-radius:8px} /* ───────────────────── 3. TIPOGRAFI ───────────────────── */ h1,h2,h3,h4,h5{ font-family:var(--f-display);margin:0 0 .5em; font-weight:var(--h-weight);line-height:1.05;letter-spacing:var(--h-track); } h1{font-size:clamp(2.35rem,5.4vw,4.4rem);letter-spacing:calc(var(--h-track) - .008em);line-height:1.01} h2{font-size:clamp(1.82rem,3.6vw,2.9rem)} h3{font-size:clamp(1.14rem,1.85vw,1.46rem);font-weight:calc(var(--h-weight) - 100)} h4{font-size:1.02rem;letter-spacing:-.015em} .display{font-family:var(--f-display);font-weight:var(--h-weight);letter-spacing:var(--h-track);line-height:.98} .grad{ background-image:linear-gradient(104deg,var(--a-600) 6%,var(--a-400) 52%,var(--a-600) 96%); -webkit-background-clip:text;background-clip:text;color:transparent; } :root[data-theme="dark"] .grad{ background-image:linear-gradient(104deg,var(--a-300),var(--a-500) 60%,var(--a-300)); -webkit-background-clip:text;background-clip:text;color:transparent; } .italic-accent{font-style:normal;font-weight:calc(var(--h-weight) - 300);opacity:.82} .lead{font-size:clamp(1.02rem,1.35vw,1.17rem);color:var(--ink-2);line-height:1.66;max-width:60ch} .mono{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500} .muted{color:var(--ink-3)} /* ───────────────────── 4. LAYOUT ───────────────────── */ .wrap{width:min(var(--wrap),100% - 2.6rem);margin-inline:auto} .wrap-lg{width:min(1360px,100% - 2.6rem);margin-inline:auto} .section{padding:clamp(3.4rem,6.2vw,6rem) 0;position:relative} .section--sm{padding:clamp(2.5rem,5vw,4.5rem) 0} .grid{display:grid;gap:1.4rem} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .flex{display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .between{justify-content:space-between} .center{text-align:center} .stack{display:grid;gap:.75rem} @media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}} @media(max-width:660px){.g2,.g3,.g4{grid-template-columns:1fr}} /* garis pemisah lembut — bukan batas keras */ .hairline{height:1px;border:0;margin:0; background:linear-gradient(90deg,transparent,var(--line),transparent)} /* ───────────────────── 5. KACA ───────────────────── Materialnya dibangun berlapis, seperti panel kaca Apple: 1) blur + saturasi tinggi pada latar di belakangnya 2) tint putih tipis supaya tidak transparan mentah 3) rim dalam: garis cahaya di tepi atas, bayangan halus di tepi bawah 4) kilau spekular tipis pada sisi atas ----------------------------------------------------------------- */ .glass,.card,.stage-main,.cta-box,.acc,.nav,.tabs,.logo-cell,.float,.eyebrow,.pill,.iconbtn,.stats{ -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat)); backdrop-filter:blur(var(--blur)) saturate(var(--sat)); } .glass{ position:relative;background:var(--glass); border:.5px solid var(--glass-brd-2); border-radius:var(--r-lg); box-shadow:var(--sh-2), inset 0 1px 0 var(--glass-spec), inset 0 -1px 0 rgba(14,22,34,.04); } .glass::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:.5px;pointer-events:none; background:linear-gradient(150deg,var(--glass-brd) 0%,transparent 34%,transparent 66%,rgba(14,22,34,.07) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; } .glass-2{background:var(--glass-2);box-shadow:var(--sh-1),inset 0 1px 0 var(--glass-spec)} .glass-3{background:var(--glass-3);box-shadow:var(--sh-3),inset 0 1px 0 var(--glass-spec)} .glass-flat{box-shadow:var(--sh-1),inset 0 1px 0 var(--glass-spec)} .card{ position:relative;padding:1.9rem;border-radius:var(--r-lg); background:var(--glass); border:.5px solid var(--glass-brd-2); box-shadow:var(--sh-1), inset 0 1px 0 var(--glass-spec), inset 0 -1px 0 rgba(14,22,34,.035); transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out),background .45s; overflow:hidden; } /* rim cahaya */ .card::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:.5px;pointer-events:none;z-index:1; background:linear-gradient(150deg,var(--glass-brd),transparent 38%,transparent 64%,rgba(14,22,34,.06)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; } /* sorotan mengikuti kursor */ .card::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.55),transparent 55%), radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(6,182,212,.13),transparent 62%); opacity:0;transition:opacity .5s var(--ease); } :root[data-theme="dark"] .card::after{ background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.09),transparent 55%), radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(34,211,238,.16),transparent 62%); } .card:hover{transform:translateY(-5px);box-shadow:var(--sh-3),inset 0 1px 0 var(--glass-spec)} .card:hover::after{opacity:1} .card--static:hover{transform:none;box-shadow:var(--sh-1),inset 0 1px 0 var(--glass-spec)} /* penanda "penting": aksen di tepi kiri + latar bersinar */ .card--hi{ background:linear-gradient(160deg,rgba(6,182,212,.10),var(--glass) 42%); box-shadow:var(--sh-2),inset 0 1px 0 var(--glass-spec),0 0 0 1px rgba(6,182,212,.14); } .card--hi::before{background:linear-gradient(150deg,rgba(255,255,255,.95),transparent 34%,transparent 62%,rgba(6,182,212,.4))} :root[data-theme="dark"] .card--hi{background:linear-gradient(160deg,rgba(34,211,238,.12),var(--glass) 44%)} /* ───────────────────── 6. TOMBOL ───────────────────── */ /* ───────────── TOMBOL ───────────── Bentuk pil dengan lencana ikon bundar di kanan. Tombol utama memakai gradien aksen; tombol sekunder memakai kaca gelap transparan. Varian .btn--glow menambah cincin cahaya yang berputar pelan. */ @property --btn-ang{syntax:'';initial-value:0deg;inherits:false} .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem; padding:.62rem .72rem .62rem 1.5rem;border:1px solid var(--glass-brd-2);cursor:pointer; font-family:var(--f-body);font-weight:600;font-size:.92rem;letter-spacing:-.012em; border-radius:var(--r-full);color:var(--ink); background:var(--glass-3); -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%); box-shadow:var(--sh-1),inset 0 1px 0 var(--glass-spec); transition:transform .32s var(--ease-out),box-shadow .32s var(--ease-out),background .28s,color .28s; white-space:nowrap;isolation:isolate;border-width:.5px; } /* tombol tanpa ikon tetap punya padding kanan yang wajar */ .btn:not(:has(.ico)){padding-right:1.5rem} .btn:not(:has(svg)){padding-right:1.5rem} /* lencana bundar hanya untuk ikon yang benar-benar berada setelah teks */ .btn > .ico:last-child:not(:first-child){ width:30px;height:30px;flex:none;padding:7px;border-radius:50%; background:var(--n-900);color:var(--n-0); transition:transform .32s var(--ease-out),background .28s; } :root[data-theme="dark"] .btn > .ico:last-child:not(:first-child){background:rgba(255,255,255,.14);color:#fff} /* ikon tunggal atau ikon di depan teks tetap polos */ .btn > .ico:first-child{width:17px;height:17px;padding:0;background:none;border-radius:0;color:inherit} .btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2),inset 0 1px 0 var(--glass-spec)} .btn:hover > .ico:last-child:not(:first-child){transform:translateX(2px) rotate(-8deg)} .btn:active{transform:translateY(0) scale(.985)} /* ---- utama: gradien aksen ---- */ .btn--primary{ color:#fff;border-color:transparent; background:linear-gradient(135deg,var(--a-400),var(--a-600) 55%,var(--a-700)); box-shadow:0 2px 4px rgba(6,132,158,.24),0 12px 28px -10px rgba(6,132,158,.55), inset 0 1px 0 rgba(255,255,255,.36); } .btn--primary > .ico:last-child:not(:first-child){background:rgba(255,255,255,.92);color:var(--a-700)} .btn--primary:hover{ background:linear-gradient(135deg,var(--a-300),var(--a-500) 55%,var(--a-600)); box-shadow:0 3px 6px rgba(6,132,158,.28),0 18px 38px -12px rgba(6,132,158,.62), inset 0 1px 0 rgba(255,255,255,.45)} /* ---- terang: pil putih dengan lencana gelap, seperti referensi ---- */ .btn--light{ color:var(--n-900);background:#fff;border-color:transparent; box-shadow:0 2px 5px rgba(11,18,32,.10),0 14px 30px -12px rgba(11,18,32,.28), inset 0 1px 0 rgba(255,255,255,.9)} .btn--light > .ico:last-child:not(:first-child){background:var(--n-900);color:#fff} /* ---- sekunder gelap transparan ---- */ .btn--ink{color:var(--n-0);background:var(--n-900);border-color:transparent} :root[data-theme="dark"] .btn--ink{color:var(--n-900);background:var(--n-0)} .btn--quiet{background:transparent;box-shadow:none;border-color:var(--line)} .btn--quiet:hover{background:var(--glass);box-shadow:var(--sh-1)} /* ---- cincin cahaya berputar untuk CTA penting ---- Cincin digambar HANYA pada pita tepi (memakai mask content-box), jadi cahayanya tidak pernah lewat di atas tulisan. Bayangannya dibuat bertingkat supaya tombol terasa timbul seperti tombol putih di sebelahnya, dan putarannya diperlambat agar terasa halus. */ .btn--glow{ z-index:0; box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(3,42,54,.22), 0 1px 2px rgba(6,132,158,.30), 0 4px 8px -2px rgba(6,132,158,.34), 0 12px 24px -8px rgba(6,132,158,.46), 0 22px 40px -18px rgba(9,22,38,.55); } .btn--glow:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.52), inset 0 -1px 0 rgba(3,42,54,.20), 0 2px 3px rgba(6,132,158,.32), 0 8px 16px -4px rgba(6,132,158,.40), 0 18px 34px -10px rgba(6,132,158,.52), 0 30px 52px -20px rgba(9,22,38,.58); } .btn--glow:active{ box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 1px 2px rgba(6,132,158,.28), 0 4px 10px -4px rgba(6,132,158,.38); } .btn--glow::after{ content:"";position:absolute;inset:-2px;border-radius:var(--r-full);z-index:1;pointer-events:none; padding:1.6px; /* tebal cincin */ background:conic-gradient(from var(--btn-ang), rgba(103,232,249,0) 0deg, rgba(103,232,249,0) 170deg, rgba(103,232,249,.45) 232deg, rgba(165,243,252,.95) 276deg, rgba(255,255,255,1) 296deg, rgba(103,232,249,.45) 330deg, rgba(103,232,249,0) 360deg); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; animation:btnring 6.5s linear infinite; } /* halo lembut di luar tombol, ikut berputar tapi jauh lebih samar */ .btn--glow::before{ content:"";position:absolute;inset:-7px;border-radius:var(--r-full);z-index:1;pointer-events:none; padding:7px; background:conic-gradient(from var(--btn-ang), rgba(34,211,238,0) 0deg,rgba(34,211,238,0) 180deg, rgba(34,211,238,.55) 290deg,rgba(34,211,238,0) 360deg); opacity:.5;filter:blur(7px); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; animation:btnring 6.5s linear infinite; } @keyframes btnring{to{--btn-ang:360deg}} @supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){ .btn--glow::after,.btn--glow::before{display:none} } @media(prefers-reduced-motion:reduce){ .btn--glow::after,.btn--glow::before{animation:none} } .btn--sm{padding:.6rem 1.15rem;font-size:.845rem} .btn--lg{padding:1.05rem 2rem;font-size:1rem} /* tombol selebar wadah: teksnya boleh turun baris supaya lencana ikon tidak pernah terdorong keluar dari kartu di layar sempit */ .btn--block{width:100%;white-space:normal;text-align:center} @media(max-width:480px){ .btn{white-space:normal;max-width:100%} } .btn--icon{padding:0;width:44px;height:44px;flex:none} /* ───────────────────── 7. PIL & LENCANA ───────────────────── */ .eyebrow{ display:inline-flex;align-items:center;gap:.55rem; font-family:var(--f-mono);font-size:.685rem;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--a-ink); padding:.5rem 1rem .5rem .75rem;border-radius:var(--r-full); background:var(--glass);border:1px solid var(--glass-brd-2); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); } .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--a-500);flex:none; box-shadow:0 0 0 3px rgba(6,182,212,.18);animation:pulse 2.6s var(--ease) infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.82)}} .eyebrow .ico{width:14px;height:14px} .pill{ display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .9rem; border-radius:var(--r-full);background:var(--glass);border:1px solid var(--glass-brd-2); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); font-size:.815rem;font-weight:500;color:var(--ink-2); } .pill .ico{width:15px;height:15px;color:var(--a-500)} .pill--accent{color:var(--a-ink);background:rgba(6,182,212,.09);border-color:rgba(6,182,212,.18)} :root[data-theme="dark"] .pill--accent{background:rgba(34,211,238,.11);border-color:rgba(34,211,238,.2)} .badge{display:inline-block;padding:.28rem .7rem;border-radius:var(--r-full); font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase} .badge--ok{background:rgba(16,185,129,.13);color:#0d8f6b} .badge--warn{background:rgba(217,119,6,.14);color:#a35c06} .badge--red{background:rgba(220,38,38,.12);color:#c22a2a} .badge--off{background:var(--glass);color:var(--ink-3);border:1px solid var(--line)} :root[data-theme="dark"] .badge--ok{color:#34d399} :root[data-theme="dark"] .badge--warn{color:#fbbf24} :root[data-theme="dark"] .badge--red{color:#f87171} /* ───────────────────── 8. IKON ───────────────────── */ .ico{display:block;flex:none} .ibox{ width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:16px; background:var(--glass);border:1px solid var(--glass-brd-2);color:var(--a-600); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); box-shadow:var(--sh-1);transition:transform .45s var(--ease-out),color .3s,box-shadow .45s; } .ibox .ico{width:23px;height:23px} .ibox--lg{width:60px;height:60px;border-radius:19px} .ibox--lg .ico{width:26px;height:26px} .ibox--sm{width:38px;height:38px;border-radius:12px} .ibox--sm .ico{width:17px;height:17px} .ibox--solid{background:linear-gradient(140deg,var(--a-500),var(--a-700));color:#fff;border-color:transparent;box-shadow:var(--sh-a)} .card:hover .ibox{transform:translateY(-2px) rotate(-3deg);color:var(--a-500)} :root[data-theme="dark"] .ibox{color:var(--a-400)} /* daftar bercentang */ .ticks{list-style:none;padding:0;margin:1.15rem 0 0;display:grid;gap:.6rem} .ticks li{display:flex;gap:.65rem;align-items:flex-start;font-size:.895rem;color:var(--ink-2);line-height:1.5} .ticks .ico{width:17px;height:17px;margin-top:2px;color:var(--a-500);stroke-width:2.2} /* ───────────────────── 9. HEADER ───────────────────── */ .hdr{position:fixed;top:0;left:0;right:0;z-index:80;padding:1.1rem 0;transition:padding .45s var(--ease),background .45s} .hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1rem} .hdr.stuck{padding:.6rem 0} .hdr.stuck .hdr-in::before{ content:"";position:absolute;inset:-.6rem -1.2rem;border-radius:var(--r-full);z-index:-1; background:var(--glass-3);border:1px solid var(--glass-brd-2); -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%); box-shadow:var(--sh-2); } .hdr-in{position:relative} body{padding-top:88px} .brand{display:flex;align-items:center;gap:.7rem} .brand-mark{ width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center; background:linear-gradient(28deg,#252a7a 0%,#136f97 52%,#19c6b4 100%);color:#fff; box-shadow:0 6px 18px -6px rgba(19,111,151,.55),inset 0 1px 0 rgba(255,255,255,.28); overflow:hidden; } .brand-mark img{width:26px;height:26px;object-fit:contain} .brand-mark svg{width:23px;height:23px} .brand b{display:block;font-family:var(--f-display);font-size:1.02rem;font-weight:600;letter-spacing:-.03em;line-height:1.1} .brand span span{display:block;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.15em; text-transform:uppercase;color:var(--ink-3);margin-top:1px} .nav{display:flex;align-items:center;gap:.15rem;padding:.3rem;border-radius:var(--r-full); background:var(--glass);border:1px solid var(--glass-brd-2); -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%); box-shadow:var(--sh-1);position:relative} .nav a{position:relative;padding:.55rem 1.05rem;border-radius:var(--r-full); font-size:.885rem;font-weight:500;color:var(--ink-2);transition:color .3s var(--ease);z-index:1} .nav a:hover{color:var(--ink)} .nav a.on{color:var(--ink)} .nav .glider{position:absolute;top:.3rem;bottom:.3rem;border-radius:var(--r-full); background:var(--glass-3);box-shadow:var(--sh-1);z-index:0; transition:transform .5s var(--ease-out),width .5s var(--ease-out),opacity .3s;opacity:0} .nav.ready .glider{opacity:1} .hdr-act{display:flex;align-items:center;gap:.5rem;flex:none} .brand{min-width:0} .brand > span:last-child{min-width:0;overflow:hidden} .brand b,.brand span span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .iconbtn{ width:42px;height:42px;flex:none;display:grid;place-items:center;cursor:pointer; border-radius:13px;color:var(--ink-2);background:var(--glass);border:1px solid var(--glass-brd-2); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--sh-1); transition:transform .3s var(--ease-out),color .3s,box-shadow .3s; } .iconbtn:hover{transform:translateY(-2px);color:var(--a-600);box-shadow:var(--sh-2)} .iconbtn .ico{width:19px;height:19px} .langbtn{width:auto;padding:0 .85rem;gap:.4rem;font-family:var(--f-mono);font-size:.7rem; letter-spacing:.1em;text-transform:uppercase;font-weight:500;display:flex;align-items:center} .burger{display:none} @media(max-width:1080px){ .nav{position:fixed;left:1rem;right:1rem;top:calc(100% + .6rem);flex-direction:column;align-items:stretch; padding:.8rem;border-radius:var(--r-lg);opacity:0;visibility:hidden;transform:translateY(-12px) scale(.98); transition:.45s var(--ease-out);box-shadow:var(--sh-3);background:var(--glass-3)} .nav.open{opacity:1;visibility:visible;transform:none} .nav a{padding:.8rem 1.1rem;font-size:.95rem} .nav .glider{display:none} .burger{display:grid} .hdr-act .btn--cta{display:none} } @media(max-width:460px){ .langbtn span{display:none} .langbtn{width:42px;padding:0} .brand span span{display:none} .hdr-act{gap:.35rem} } /* ───────────────────── 10. HERO — 4 VARIAN ───────────────────── */ .hero{position:relative;overflow:hidden;padding:clamp(2rem,4vw,3.5rem) 0 clamp(3.5rem,7vw,6rem)} /* sorotan hero lama digantikan lapisan global di .bg-field */ .hero .spot{display:none} /* garis grid kini digambar sekali di .bg-field untuk seluruh halaman */ .gridlines{display:none} /* --- a. SPLIT: tipografi besar kiri, panel kaca bertingkat kanan --- */ .hero--split .hgrid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2rem,4vw,4rem);align-items:center} .hero--split h1{margin:1.4rem 0 1.3rem} .hero--split .lead{max-width:46ch} .stage{position:relative;min-height:440px;display:grid;place-items:center} .stage-main{ position:relative;width:100%;border-radius:var(--r-xl);overflow:hidden; background:var(--glass-3);border:1px solid var(--glass-brd-2); -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%); box-shadow:var(--sh-3);padding:1.3rem; } .stage-main::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px; background:linear-gradient(150deg,var(--glass-brd),transparent 45%,transparent 60%,var(--glass-brd-2)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .stage-bar{display:flex;gap:.35rem;margin-bottom:1rem;padding-left:.15rem} .stage-bar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block} .stage-bar i:first-child{background:rgba(6,182,212,.5)} .float{ position:absolute;display:flex;align-items:center;gap:.7rem;padding:.75rem 1rem; border-radius:var(--r);background:var(--glass-3);border:1px solid var(--glass-brd-2); -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%); box-shadow:var(--sh-2);font-size:.8rem;font-weight:600;letter-spacing:-.01em; animation:bob 6.5s var(--ease) infinite;z-index:2; } .float small{display:block;font-weight:400;font-size:.685rem;color:var(--ink-3);margin-top:1px;letter-spacing:0} .float--tl{top:-26px;left:5%} .float--br{bottom:-26px;right:4%;animation-delay:-3.2s} .float--bl{top:44%;left:-13%;animation-delay:-1.6s} .stage{padding-block:30px} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}} /* --- b. CENTER: judul tengah + bento pratinjau di bawah --- */ .hero--center{text-align:center;padding-top:clamp(2.5rem,5vw,4.5rem)} .hero--center h1{margin:1.5rem auto 1.3rem;max-width:16ch} .hero--center .lead{margin-inline:auto;text-align:center} .hero--center .hero-cta{justify-content:center} .hero--center .chips{justify-content:center} .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;margin-top:clamp(2.5rem,5vw,4rem)} .bento > *{border-radius:var(--r-lg);padding:1.5rem;text-align:left; background:var(--glass);border:1px solid var(--glass-brd-2); -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));backdrop-filter:blur(var(--blur)) saturate(var(--sat)); box-shadow:var(--sh-1);position:relative;overflow:hidden} .bento .b-lg{grid-column:span 3} .bento .b-md{grid-column:span 2} .bento .b-sm{grid-column:span 1} @media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}.bento .b-lg,.bento .b-md,.bento .b-sm{grid-column:span 1}} /* --- c. BENTO HERO: judul jadi salah satu sel --- */ .hero--bento .hb{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(94px,auto);gap:1rem} .hero--bento .hb > *{ border-radius:var(--r-lg);padding:1.6rem;position:relative;overflow:hidden; background:var(--glass);border:1px solid var(--glass-brd-2); -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));backdrop-filter:blur(var(--blur)) saturate(var(--sat)); box-shadow:var(--sh-1); } .hero--bento .hb-title{grid-column:span 7;grid-row:span 3;display:flex;flex-direction:column;justify-content:center;padding:clamp(1.8rem,3vw,2.8rem)} .hero--bento .hb-art{grid-column:span 5;grid-row:span 2;display:grid;place-items:center;padding:1.2rem} .hero--bento .hb-a{grid-column:span 2;grid-row:span 1} .hero--bento .hb-b{grid-column:span 3;grid-row:span 1} .hero--bento .hb-cta{grid-column:span 5;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap} @media(max-width:960px){ .hero--bento .hb{grid-template-columns:repeat(4,1fr)} .hero--bento .hb-title,.hero--bento .hb-art,.hero--bento .hb-cta{grid-column:span 4;grid-row:auto} .hero--bento .hb-a,.hero--bento .hb-b{grid-column:span 2} } /* --- d. MINIMAL: untuk halaman dalam --- */ .hero--minimal{padding:clamp(2.5rem,5vw,4rem) 0 clamp(1.5rem,3vw,2.5rem);text-align:center} .hero--minimal h1{margin:1.2rem auto .9rem;max-width:20ch} .hero--minimal .lead{margin-inline:auto;text-align:center} .hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2rem} .chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.6rem} @media(max-width:920px){ .hero--split .hgrid{grid-template-columns:1fr} /* teks selalu lebih dulu di layar kecil, visual menyusul di bawahnya */ .hero--split .hcopy{order:1} .stage{order:2;min-height:0;margin-top:.6rem;padding-block:14px} .stage{display:flex;flex-direction:column;align-items:stretch;gap:.65rem} .float{position:static;margin:0;animation:none;align-self:center;width:max-content;max-width:100%} .float--bl{display:none} } @media(max-width:560px){ .float--br{display:none} } /* remah roti */ .crumbs{display:flex;gap:.45rem;align-items:center;justify-content:center;flex-wrap:wrap; font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} .crumbs a:hover{color:var(--a-600)} .crumbs .ico{width:12px;height:12px;opacity:.5} /* ───────────────────── 11. KEPALA SECTION ───────────────────── */ .shead{max-width:660px;margin:0 auto clamp(2.2rem,4vw,3.4rem);text-align:center} .shead h2{margin:1.1rem 0 .8rem} .shead p{color:var(--ink-2);font-size:1.03rem;margin:0} .shead--left{margin-inline:0;text-align:left} .shead--row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;max-width:none;text-align:left} .shead--row > div{max-width:620px} @media(max-width:780px){.shead--row{flex-direction:column;align-items:flex-start}} /* ───────────────────── 12. STATISTIK ───────────────────── */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border-radius:var(--r-lg);overflow:hidden; background:var(--line-2);border:1px solid var(--glass-brd-2);box-shadow:var(--sh-1)} .stat{padding:1.9rem 1.6rem;background:var(--glass); -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur)); transition:background .4s var(--ease)} .stat:hover{background:var(--glass-3)} .stat b{display:block;font-family:var(--f-display);font-size:clamp(2rem,3.6vw,2.9rem); font-weight:500;letter-spacing:-.045em;line-height:1;color:var(--ink)} .stat b em{font-style:normal;color:var(--a-500)} .stat b{color:var(--ink)} .stat span{display:block;font-size:.88rem;font-weight:600;margin-top:.6rem;letter-spacing:-.01em} .stat small{display:block;font-size:.775rem;color:var(--ink-3);margin-top:.2rem} @media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}} /* ───────────────────── 13. KARTU LAYANAN ───────────────────── */ .svc{display:flex;flex-direction:column;height:100%} .svc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.3rem} .svc h3{margin-bottom:.55rem} .svc h3 a{transition:color .3s} .svc:hover h3 a{color:var(--a-600)} .svc p{color:var(--ink-2);font-size:.905rem;margin:0} .svc-foot{margin-top:auto;padding-top:1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem} .svc-more{display:inline-flex;align-items:center;gap:.4rem;font-size:.855rem;font-weight:600;color:var(--a-ink)} .svc-more .ico{width:16px;height:16px;transition:transform .35s var(--ease-out)} .svc:hover .svc-more .ico{transform:translate(3px,-3px)} :root[data-theme="dark"] .svc-more{color:var(--a-400)} /* nomor besar di latar kartu */ .ghost-num{position:absolute;right:1.1rem;top:.2rem;font-family:var(--f-display); font-size:5.2rem;font-weight:500;line-height:1;letter-spacing:-.06em; color:var(--ink);opacity:.045;pointer-events:none;user-select:none} /* ───────────────────── 14. LANGKAH / PROSES ───────────────────── */ .steps{display:grid;gap:1.2rem;grid-template-columns:repeat(3,1fr)} .step{position:relative;height:100%} .step .kicker{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.11em; text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:.5rem} .step h3{font-size:1.14rem;margin-bottom:.55rem} .step p{font-size:.885rem;color:var(--ink-2);margin:0} .step-n{display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1.1rem} .step-n b{font-family:var(--f-mono);font-size:.78rem;font-weight:500;color:var(--a-600);letter-spacing:.05em} .step-n .bar{height:1px;width:34px;background:linear-gradient(90deg,var(--a-500),transparent)} @media(max-width:960px){.steps{grid-template-columns:1fr}} /* ───────────────────── 15. HARGA ───────────────────── */ .price{display:flex;flex-direction:column;height:100%} .price .amt{font-family:var(--f-display);font-size:2.1rem;font-weight:500;letter-spacing:-.04em; line-height:1;margin:.7rem 0 .9rem} .price--hi{background:var(--glass-3);box-shadow:var(--sh-3)} .price--hi::before{background:linear-gradient(150deg,rgba(6,182,212,.5),transparent 40%,transparent 60%,rgba(6,182,212,.22))} .price-note{font-size:.74rem;color:var(--ink-3);margin-top:1rem;display:block} /* ───────────────────── 16. TAB & FILTER ───────────────────── */ .tabs{display:flex;gap:.25rem;flex-wrap:wrap;padding:.3rem;border-radius:var(--r-full); background:var(--glass);border:1px solid var(--glass-brd-2); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); box-shadow:var(--sh-1);width:max-content;max-width:100%;margin:0 auto 2.6rem} .tabs a,.tabs button{padding:.58rem 1.15rem;border:0;cursor:pointer;background:transparent; border-radius:var(--r-full);font-size:.85rem;font-weight:600;color:var(--ink-2); transition:.35s var(--ease);font-family:inherit} .tabs a.on,.tabs button.on{background:var(--glass-3);box-shadow:var(--sh-1);color:var(--ink)} /* ───────────────────── 17. PORTOFOLIO & GALERI ───────────────────── */ /* .shot dipakai pada elemen ; tanpa display:block, aspect-ratio diabaikan sehingga gambar memanjang ke bawah dan teks kartu terdorong keluar. */ .shot{display:block;position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10; background:var(--glass-2);border:1px solid var(--glass-brd-2)} .shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)} .card:hover .shot img{transform:scale(1.055)} .shot .veil{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease); background:linear-gradient(to top,rgba(8,16,26,.62),transparent 58%);display:flex;align-items:flex-end;padding:1.1rem} .card:hover .shot .veil{opacity:1} .gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem} .gal a{display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:1; border:1px solid var(--glass-brd-2);box-shadow:var(--sh-1);position:relative} .gal img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)} .gal a:hover img{transform:scale(1.06)} /* ───────────────────── 18. TESTIMONI ───────────────────── */ .quote-ico{color:var(--a-500);opacity:.45;margin-bottom:.9rem} .quote{font-size:1.02rem;color:var(--ink-2);line-height:1.62;letter-spacing:-.012em} .who{display:flex;align-items:center;gap:.85rem;margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--line-2)} .who img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid var(--glass-brd-2)} .who b{display:block;font-size:.895rem;letter-spacing:-.01em} .who span{font-size:.775rem;color:var(--ink-3)} .rate{display:flex;gap:2px;color:var(--a-500)} .rate .ico{width:14px;height:14px;fill:currentColor;stroke:none} /* ───────────────────── 19. LOGO MARQUEE ───────────────────── */ .marquee{position:relative;overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .marquee-track{display:flex;gap:1rem;width:max-content;animation:slide 42s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} @keyframes slide{to{transform:translateX(-50%)}} .logo-cell{display:grid;place-items:center;min-width:172px;height:82px;padding:1rem 1.6rem; border-radius:var(--r);background:var(--glass);border:1px solid var(--glass-brd-2); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} .logo-cell img{max-height:36px;width:auto;object-fit:contain;opacity:.6;filter:grayscale(1);transition:.4s} .logo-cell:hover img{opacity:1;filter:none} .logo-cell span{font-family:var(--f-display);font-weight:600;font-size:.94rem;color:var(--ink-3);letter-spacing:-.02em} /* ───────────────────── 20. AKORDEON ───────────────────── */ .acc{border-radius:var(--r);margin-bottom:.7rem;overflow:hidden; background:var(--glass);border:1px solid var(--glass-brd-2); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); box-shadow:var(--sh-1);transition:box-shadow .4s var(--ease)} .acc[open]{box-shadow:var(--sh-2);background:var(--glass-3)} .acc summary{padding:1.2rem 1.5rem;cursor:pointer;font-weight:600;font-size:.98rem; letter-spacing:-.014em;list-style:none;display:flex;justify-content:space-between;gap:1.2rem;align-items:center} .acc summary::-webkit-details-marker{display:none} .acc summary .ico{width:19px;height:19px;color:var(--a-600);transition:transform .4s var(--ease-out);flex:none} .acc[open] summary .ico{transform:rotate(45deg)} .acc .body{padding:0 1.5rem 1.4rem;color:var(--ink-2);font-size:.92rem;max-width:72ch} /* ───────────────────── 21. CTA ───────────────────── */ .cta-box{position:relative;padding:clamp(2.6rem,5.5vw,4.5rem);border-radius:var(--r-2xl);overflow:hidden; background:var(--glass-3);border:1px solid var(--glass-brd-2); -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%); box-shadow:var(--sh-3);text-align:center} .cta-box::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px; background:linear-gradient(150deg,var(--glass-brd),transparent 40%,transparent 62%,rgba(6,182,212,.28)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .cta-box .orb{position:absolute;width:420px;height:420px;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(6,182,212,.2),transparent 68%);filter:blur(18px)} .cta-box .orb-a{top:-190px;right:-110px} .cta-box .orb-b{bottom:-220px;left:-140px;background:radial-gradient(circle,rgba(56,116,182,.17),transparent 68%)} .cta-box h2{position:relative;margin:1.2rem auto .9rem;max-width:17ch} .cta-box .lead{margin-inline:auto;position:relative} /* ───────────────────── 22. FORM ───────────────────── */ .field{margin-bottom:1.1rem} .field label,.lbl{display:block;font-size:.79rem;font-weight:600;color:var(--ink-2); margin-bottom:.45rem;letter-spacing:-.005em} .inp,input[type=text],input[type=email],input[type=password],input[type=number], input[type=date],input[type=tel],input[type=url],input[type=search],select,textarea{ width:100%;padding:.85rem 1.05rem;border-radius:var(--r-sm);color:var(--ink); background:var(--glass-2);border:1px solid var(--line); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); transition:border-color .3s,box-shadow .3s,background .3s;font-size:.94rem; } input::placeholder,textarea::placeholder{color:var(--ink-3)} select{appearance:none;padding-right:2.6rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d9bad' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 1rem center;background-size:15px} textarea{resize:vertical;min-height:130px;line-height:1.6} /* background-color, bukan shorthand: shorthand mereset background-repeat sehingga ikon panah pada