/* ===================================================== ARSAVA KONSTRUKSI - Tema publik Di-port persis dari website live (GAS) + ekstensi halaman Lacak/Estimasi/Booking dengan bahasa desain yang sama. ===================================================== */ /* --------------------------------------------------------------------------- DUA TEMA (catatan klien 5 Agu 2026 poin 4): terang untuk siang, gelap untuk malam. Pemilihannya di skrip inline `` layouts/public.blade.php — pilihan manual menang, kalau belum pernah memilih ikut jam setempat. Tema gelap sengaja BIRU DONGKER, bukan hitam, sesuai permintaan klien. --shade-rgb = warna dasar untuk lapisan gelap DI ATAS FOTO (hero, kartu bento, kartu IG). Nilainya sengaja tetap gelap di kedua tema: teksnya putih, jadi kalau ikut menerang di tema terang tulisannya langsung hilang. --------------------------------------------------------------------------- */ :root{ --bg:#0c1020; /* navy sangat gelap, bukan hitam */ --bg2:#111629; --bg3:#181e33; --line:rgba(255,255,255,.10); --text:#f2f0ec; --muted:#a7abb1; --accent:#263ba6; /* navy, tombol */ --accent-hi:#9ea7d7; /* navy terang, teks/garis */ --ok:#3f9e6e; --nav-rgb:12,16,32; /* = --bg, untuk nav semi-transparan */ --shade-rgb:8,10,20; /* lapisan di atas foto */ --scroll-thumb:#2c3350; --btn-hov:#384bad; --ghost-line:rgba(255,255,255,.28); --ghost-line-hi:rgba(255,255,255,.5); --ghost-bg:rgba(255,255,255,.07); --map-filter:grayscale(.35) contrast(.92) brightness(.88); --drop-shadow:rgba(0,0,0,.55); --radius:0px; --font-display:'Space Grotesk',sans-serif; --font-body:'Outfit',sans-serif; } [data-theme="light"]{ --bg:#f4f2ed; /* krem hangat, sekeluarga dengan tema terang dashboard */ --bg2:#ffffff; --bg3:#eae7e1; --line:rgba(0,24,150,.15); --text:#141821; --muted:#5b6170; --accent:#001896; /* navy dongker, sama dgn kop PDF laporan */ --accent-hi:#001896; --ok:#1f7a4d; --nav-rgb:244,242,237; --scroll-thumb:#c3c0b8; --btn-hov:#001375; --ghost-line:rgba(0,24,150,.30); --ghost-line-hi:rgba(0,24,150,.6); --ghost-bg:rgba(0,24,150,.06); /* Peta tidak perlu diredupkan di tema terang — halamannya sudah terang */ --map-filter:grayscale(.2) contrast(.98); --drop-shadow:rgba(0,24,150,.16); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--text); font-family:var(--font-body); font-weight:300; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ::selection{background:var(--accent);color:#fff} /* Scrollbar bertema (bukan default browser) */ *{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border:2px solid var(--bg)} ::-webkit-scrollbar-thumb:hover{background:var(--accent-hi)} .porto-track::-webkit-scrollbar{height:8px} .porto-track::-webkit-scrollbar-thumb{background:var(--accent);border-color:var(--bg2)} .wrap{max-width:1280px;margin:0 auto;padding:0 20px} @media(min-width:768px){.wrap{padding:0 40px}} h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.1} /* ============ NAV ============ */ .nav{ position:fixed;top:0;left:0;right:0;z-index:50; height:68px;display:flex;align-items:center; transition:background .35s ease,border-color .35s ease; border-bottom:1px solid transparent; } .nav.scrolled{background:rgba(var(--nav-rgb),.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line)} .nav.solid{background:rgba(var(--nav-rgb),.97);border-bottom-color:var(--line)} .nav-inner{width:100%;max-width:1280px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between} @media(min-width:768px){.nav-inner{padding:0 40px}} .brand{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:.02em;display:flex;align-items:center;gap:10px} .brand-mark{width:26px;height:26px;background:var(--accent);display:grid;place-items:center;font-size:14px;color:#fff;font-weight:700} .brand span{color:var(--muted);font-weight:400} .nav-links{display:none;gap:30px;align-items:center} .nav-links a{font-size:14px;font-weight:400;color:var(--muted);transition:color .2s} .nav-links a:hover,.nav-links a.active{color:var(--text)} @media(min-width:900px){.nav-links{display:flex}} .btn{ display:inline-flex;align-items:center;gap:10px; background:var(--accent);color:#fff; font-family:var(--font-display);font-weight:600;font-size:15px; padding:14px 26px;border:none;cursor:pointer; transition:transform .2s cubic-bezier(.16,1,.3,1),background .2s; white-space:nowrap; } .btn:hover{background:var(--btn-hov);transform:translateY(-2px)} .btn:active{transform:translateY(0) scale(.98)} .btn-ghost{ background:transparent;color:var(--text); border:1px solid var(--ghost-line); } .btn-ghost:hover{background:var(--ghost-bg);border-color:var(--ghost-line-hi)} .nav .btn{padding:11px 20px;font-size:14px;display:none} @media(min-width:900px){.nav .btn{display:inline-flex}} .burger{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px} .burger i{display:block;width:24px;height:2px;background:var(--text);transition:transform .3s,opacity .3s} @media(min-width:900px){.burger{display:none}} .menu-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-open .burger i:nth-child(2){opacity:0} .menu-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* Menu mobile: sheet dropdown di bawah nav */ .mobile-menu{ position:fixed;top:68px;left:0;right:0;z-index:49; background:rgba(var(--nav-rgb),.98); border-bottom:1px solid var(--line); padding:6px 24px 26px; opacity:0;pointer-events:none;transform:translateY(-10px); transition:opacity .25s ease,transform .25s ease; } .menu-open .mobile-menu{opacity:1;pointer-events:auto;transform:none} .menu-open .nav{background:rgba(var(--nav-rgb),.98);border-bottom-color:var(--line)} .mobile-menu a{ display:block;font-family:var(--font-display);font-size:19px;font-weight:600; padding:13px 0;border-bottom:1px solid var(--line); } .mobile-menu .btn{margin-top:22px;justify-content:center;display:flex;border-bottom:none;font-size:16px} /* ============ HERO ============ */ .hero{ position:relative; min-height:600px; min-height:clamp(560px,100svh,880px); display:flex;align-items:flex-end; overflow:hidden; padding:0; } .hero-bg{position:absolute;inset:0;z-index:0} .hero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1)} @media(prefers-reduced-motion:no-preference){ .hero-bg img{animation:heroZoom 18s ease-out forwards} @keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}} } .hero-bg::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(var(--shade-rgb),.45) 0%,rgba(var(--shade-rgb),.15) 40%,rgba(var(--shade-rgb),.92) 100%); } /* padding-top = clearance nav: kalaupun konten memanjang (font fallback/zoom), tidak pernah menabrak navbar transparan */ .hero-inner{position:relative;z-index:1;width:100%;padding-top:100px;padding-bottom:64px} .hero-eyebrow{ font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--accent-hi);font-weight:500;margin-bottom:20px;font-family:var(--font-display); } @media(min-width:768px){.hero-eyebrow{font-size:12px;letter-spacing:.18em}} /* Netralkan max-width 46ch warisan `.hero p` untuk eyebrow (specificity lebih tinggi): tanpa ini eyebrow bisa wrap 2 baris di zoom/DPR tertentu dan mendorong konten ke atas */ .hero p.hero-eyebrow{max-width:none} .hero h1{ font-size:clamp(38px,7.5vw,84px); max-width:13ch;margin-bottom:22px;font-weight:700; } .hero h1 em{font-style:italic;color:var(--accent-hi);line-height:1.1;display:inline-block;padding-bottom:4px} .hero p{font-size:clamp(16px,2vw,19px);color:#d5d3ce;max-width:46ch;margin-bottom:34px} .hero-ctas{display:flex;gap:14px;flex-wrap:wrap} @media(prefers-reduced-motion:no-preference){ .hero .rise{opacity:0;transform:translateY(26px);animation:rise .9s cubic-bezier(.16,1,.3,1) forwards} .hero .rise:nth-child(2){animation-delay:.12s} .hero .rise:nth-child(3){animation-delay:.24s} .hero .rise:nth-child(4){animation-delay:.36s} @keyframes rise{to{opacity:1;transform:translateY(0)}} } /* ============ REVEAL ON SCROLL ============ */ @media(prefers-reduced-motion:no-preference){ html.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)} html.js .reveal.in{opacity:1;transform:translateY(0)} } /* ============ STATS ============ */ .stats{border-bottom:1px solid var(--line);background:var(--bg)} .stats-grid{display:grid;grid-template-columns:1fr 1fr} @media(min-width:768px){.stats-grid{grid-template-columns:repeat(4,1fr)}} .stat{padding:38px 20px;border-top:1px solid var(--line)} .stat:nth-child(even){border-left:1px solid var(--line)} @media(min-width:768px){ .stat{padding:52px 36px} .stat + .stat{border-left:1px solid var(--line)} } .stat b{font-family:var(--font-display);font-size:clamp(30px,4vw,46px);font-weight:700;display:block;line-height:1} .stat b i{font-style:normal;color:var(--accent-hi)} .stat span{font-size:14px;color:var(--muted);margin-top:10px;display:block} /* ============ SECTION BASE ============ */ section{padding:96px 0} @media(min-width:768px){section{padding:130px 0}} .sec-head{margin-bottom:56px} .sec-head h2{font-size:clamp(30px,4.6vw,54px);max-width:20ch} .sec-head p{color:var(--muted);max-width:52ch;margin-top:16px;font-size:16px} /* ============ TENTANG (split) ============ */ .about{background:var(--bg2);border-bottom:1px solid var(--line)} .about-grid{display:grid;gap:44px} @media(min-width:900px){.about-grid{grid-template-columns:5fr 4fr;gap:80px;align-items:center}} .about h2{font-size:clamp(30px,4.2vw,50px);margin-bottom:24px} .about h2 em{font-style:italic;color:var(--accent-hi)} .about p{color:var(--muted);margin-bottom:18px;max-width:58ch} .about-img{position:relative} .about-img img{width:100%;aspect-ratio:4/5;object-fit:cover} .about-img::after{ content:"";position:absolute;top:22px;left:-22px;right:22px;bottom:-22px; border:1px solid var(--accent);z-index:-1; } /* ============ VISI & MISI ============ */ /* Visi dibuat besar & tenang, misi jadi daftar bernomor di sebelahnya — supaya keduanya terbaca sebagai satu pernyataan, bukan dua blok teks yang sama beratnya. */ .vm{border-bottom:1px solid var(--line)} .vm-grid{display:grid;gap:48px} @media(min-width:900px){.vm-grid{grid-template-columns:4fr 5fr;gap:80px}} .vm-tag{ display:inline-block;margin-bottom:20px; font-family:var(--font-display);font-size:12px;font-weight:600; letter-spacing:.22em;text-transform:uppercase;color:var(--accent-hi); } .vm-tag::after{ content:"";display:block;width:34px;height:2px;background:var(--accent);margin-top:12px; } .vm-visi p{ font-family:var(--font-display);font-weight:300; font-size:clamp(23px,3vw,34px);line-height:1.35;max-width:22ch; } .vm-visi em{font-style:italic;color:var(--accent-hi)} .vm-list{list-style:none;counter-reset:misi;display:grid;gap:22px;margin:0;padding:0} .vm-list li{ counter-increment:misi;position:relative;padding-left:46px; color:var(--muted);font-size:15.5px;line-height:1.65;max-width:56ch; } .vm-list li::before{ content:counter(misi,decimal-leading-zero); position:absolute;left:0;top:1px; font-family:var(--font-display);font-size:13px;font-weight:600; letter-spacing:.06em;color:var(--accent-hi); } .vm-list li::after{ content:"";position:absolute;left:31px;top:9px;bottom:2px;width:1px;background:var(--line); } /* ============ LAYANAN (bento) ============ */ .bento{display:grid;gap:14px;grid-template-columns:1fr} @media(min-width:768px){ .bento{grid-template-columns:repeat(6,1fr);grid-auto-rows:220px} /* 6 layanan (catatan klien 5 Agu 2026): a besar 4x2 di kiri, b & c menumpuk di kanannya, lalu d-e-f sebaris bertiga. Total kolom tiap baris pas 6. */ .cell-a{grid-column:span 4;grid-row:span 2} .cell-b{grid-column:span 2;grid-row:span 1} .cell-c{grid-column:span 2;grid-row:span 1} .cell-d{grid-column:span 2;grid-row:span 1} .cell-e{grid-column:span 2;grid-row:span 1} .cell-f{grid-column:span 2;grid-row:span 1} } .cell{ position:relative;overflow:hidden;background:var(--bg3); border:1px solid var(--line); padding:28px;display:flex;flex-direction:column;justify-content:flex-end; min-height:230px; transition:border-color .3s; } .cell:hover{border-color:rgba(158,167,215,.55)} /* .cell-plain sudah tidak dipakai sejak 6 layanan semuanya berfoto (5 Agu 2026); aturannya dibiarkan supaya sel tanpa foto tetap rapi kalau nanti dipakai lagi. */ @media(max-width:767px){.cell-plain{min-height:0}} .cell-img img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .7s cubic-bezier(.16,1,.3,1); } .cell-img:hover img{transform:scale(1.05)} .cell-img::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(var(--shade-rgb),.05) 30%,rgba(var(--shade-rgb),.88) 100%); } .cell h3{position:relative;z-index:1;font-size:21px;margin-bottom:6px} .cell p{position:relative;z-index:1;font-size:14px;color:#c9c7c2;max-width:40ch} .cell-plain p{color:var(--muted)} .cell-plain h3::before{ content:"";display:block;width:34px;height:3px;background:var(--accent);margin-bottom:16px; } /* ============ PORTOFOLIO (scroll-snap) ============ */ .porto{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .porto-track{ display:flex;gap:16px;overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 20px 26px; margin:0 -20px; -webkit-overflow-scrolling:touch; scrollbar-width:thin;scrollbar-color:var(--accent) transparent; } @media(min-width:768px){.porto-track{padding:4px 40px 30px;margin:0 -40px}} .porto-card{flex:0 0 82%;scroll-snap-align:center;position:relative;overflow:hidden} @media(min-width:640px){.porto-card{flex:0 0 430px;scroll-snap-align:start}} .porto-card img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)} .porto-card:hover img{transform:scale(1.05)} .porto-meta{padding:18px 2px 0} .porto-meta h3{font-size:19px} .porto-meta span{font-size:13.5px;color:var(--muted)} /* ============ PROSES ============ */ .steps{display:grid;gap:0;border-top:1px solid var(--line)} .step{ display:grid;grid-template-columns:56px 1fr;gap:8px 18px; padding:34px 0;border-bottom:1px solid var(--line); align-items:start; } .step-num{ font-family:var(--font-display);font-size:clamp(26px,3vw,38px);font-weight:700; color:transparent;-webkit-text-stroke:1px var(--accent-hi);line-height:1; } .step h3{font-size:clamp(20px,2.4vw,27px);align-self:center} .step p{grid-column:2/-1;color:var(--muted);font-size:15.5px;max-width:56ch} @media(max-width:479px){.step p{grid-column:1/-1}} @media(min-width:900px){ .step{grid-template-columns:120px 1fr 1.4fr;gap:40px;padding:44px 0} .step h3{align-self:start} .step p{grid-column:auto} } /* ============ DUA STUDIO ============ */ .duo{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .duo-grid{display:grid;gap:16px} @media(min-width:820px){.duo-grid{grid-template-columns:1fr 1fr}} .duo-card{position:relative;overflow:hidden;min-height:420px;display:flex;align-items:flex-end;border:1px solid var(--line)} .duo-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)} .duo-card:hover img{transform:scale(1.04)} .duo-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--shade-rgb),.1) 25%,rgba(var(--shade-rgb),.93) 100%)} .duo-body{position:relative;z-index:1;padding:30px} .duo-body .ig{font-size:13px;color:var(--accent-hi);font-family:var(--font-display);font-weight:500;letter-spacing:.04em} .duo-body h3{font-size:clamp(24px,3vw,32px);margin:8px 0 10px} .duo-body p{color:#cfcdc8;font-size:15px;max-width:46ch} /* ============ TESTIMONI ============ */ .quote-wrap{max-width:860px;margin:0 auto;text-align:center} .quote-mark{font-family:var(--font-display);font-size:80px;line-height:1;color:var(--accent);height:44px;overflow:hidden} blockquote{ font-family:var(--font-display);font-weight:500; font-size:clamp(21px,3vw,32px);line-height:1.35;letter-spacing:-.01em; } .quote-who{margin-top:26px;color:var(--muted);font-size:15px} .quote-who b{color:var(--text);font-weight:500;display:block} /* ============ KONTAK ============ */ .contact{background:var(--bg2);border-top:1px solid var(--line)} .contact-grid{display:grid;gap:52px} @media(min-width:900px){.contact-grid{grid-template-columns:1.2fr 1fr;gap:90px}} .contact h2{font-size:clamp(34px,5vw,60px);margin-bottom:20px} .contact h2 em{font-style:italic;color:var(--accent-hi);display:inline-block;line-height:1.1;padding-bottom:5px} .contact .lead{color:var(--muted);max-width:46ch;margin-bottom:34px} .c-list{display:grid;gap:0;border-top:1px solid var(--line)} .c-item{padding:22px 0;border-bottom:1px solid var(--line)} .c-item span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-family:var(--font-display)} .c-item a,.c-item p{font-size:17px;font-weight:400;transition:color .2s} .c-item a:hover{color:var(--accent-hi)} /* ============ FOOTER ============ */ footer{border-top:1px solid var(--line);padding:34px 0;background:var(--bg)} .foot{display:flex;flex-direction:column;gap:14px;align-items:flex-start} @media(min-width:768px){.foot{flex-direction:row;justify-content:space-between;align-items:center}} .foot small{color:var(--muted);font-size:13.5px} .foot-links{display:flex;gap:24px;flex-wrap:wrap} .foot-links a{font-size:13.5px;color:var(--muted);transition:color .2s} .foot-links a:hover{color:var(--text)} /* ============ SCROLL CONTROL (atas / bagian berikutnya) ============ */ .scroll-ctl{ position:fixed;right:18px;bottom:82px;z-index:44; display:flex;flex-direction:column;gap:9px; } .scroll-ctl button{ width:44px;height:44px;display:grid;place-items:center; /* Melayang di atas ISI HALAMAN (bukan foto), jadi ikut latar tema — dulu dipatok gelap sehingga di tema terang tampak kotak hitam nyempil. */ background:rgba(var(--nav-rgb),.94);border:1px solid var(--line);color:var(--text); border-radius:50%;cursor:pointer; opacity:0;transform:translateY(10px) scale(.9);pointer-events:none; transition:opacity .28s ease,transform .3s cubic-bezier(.16,1,.3,1),background .2s,border-color .2s; } .scroll-ctl button.show{opacity:1;transform:none;pointer-events:auto} .scroll-ctl button:hover{background:var(--accent);border-color:var(--accent)} .scroll-ctl button:active{transform:scale(.94)} .scroll-ctl svg{width:18px;height:18px} @media(max-width:520px){ .scroll-ctl{bottom:80px;right:20px;gap:8px} .scroll-ctl button{width:40px;height:40px} .scroll-ctl svg{width:16px;height:16px} } /* ============ WA FLOAT ============ */ .wa-float{ position:fixed;right:18px;bottom:18px;z-index:45; width:54px;height:54px;background:#25d366; display:grid;place-items:center;border-radius:50%; box-shadow:0 8px 24px rgba(0,0,0,.4); transition:transform .2s cubic-bezier(.16,1,.3,1); } .wa-float:hover{transform:translateY(-3px) scale(1.05)} .wa-float svg{width:28px;height:28px;fill:#fff} /* ===================================================== EKSTENSI: halaman sub (Lacak, Estimasi, Booking, Login) ===================================================== */ .page-hero{ padding:132px 0 56px; background:var(--bg2); border-bottom:1px solid var(--line); } @media(min-width:768px){.page-hero{padding:158px 0 70px}} .page-hero .hero-eyebrow{margin-bottom:14px} .page-hero h1{font-size:clamp(32px,5.6vw,58px);max-width:18ch} .page-hero h1 em{font-style:italic;color:var(--accent-hi)} .page-hero p{color:var(--muted);max-width:52ch;margin-top:16px;font-size:16px} .page-body{padding:56px 0 96px} @media(min-width:768px){.page-body{padding:72px 0 130px}} /* Form publik */ .form-card{max-width:660px} .field{margin-bottom:22px} .field label{ display:block;font-family:var(--font-display);font-size:12px;font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:9px; } .field input,.field select,.field textarea{ width:100%;background:var(--bg3);border:1px solid var(--line); color:var(--text);font-family:var(--font-body);font-weight:300;font-size:16px; padding:14px 16px;outline:none;transition:border-color .2s; appearance:none;-webkit-appearance:none;border-radius:0; } .field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a7abb1' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center; } .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent-hi);box-shadow:0 0 0 3px rgba(158,167,215,.14)} .field textarea{min-height:120px;resize:vertical} .field .err{color:#e58a75;font-size:13.5px;margin-top:7px;display:block} .field-hint{color:var(--muted);font-size:13.5px;margin-top:7px} .field-row{display:grid;gap:0 18px} @media(min-width:560px){.field-row{grid-template-columns:1fr 1fr}} .form-ok{ border:1px solid rgba(63,158,110,.5);background:rgba(63,158,110,.08); padding:18px 20px;margin-bottom:28px;font-size:15px; } .form-ok b{font-family:var(--font-display);display:block;margin-bottom:4px;color:#7fd0a5} /* Custom dropdown publik (pengganti popup native select) */ .dd{position:relative;display:block;width:100%} .dd-native{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none;margin:0;padding:0;border:0} .dd-btn{ display:flex;align-items:center;justify-content:space-between;gap:12px; width:100%;text-align:left;cursor:pointer; background:var(--bg3);border:1px solid var(--line);color:var(--text); font-family:var(--font-body);font-weight:300;font-size:16px; padding:14px 16px;border-radius:var(--r-sm,9px); transition:border-color .2s,box-shadow .2s; } .dd-btn:hover{border-color:var(--muted)} .dd.open .dd-btn,.dd-btn:focus-visible{outline:none;border-color:var(--accent-hi);box-shadow:0 0 0 3px rgba(158,167,215,.14)} .dd-btn::after{ content:"";width:12px;height:8px;flex:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a7abb1' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain; transition:transform .25s cubic-bezier(.16,1,.3,1); } .dd.open .dd-btn::after{transform:rotate(180deg)} .dd-menu{ position:absolute;top:calc(100% + 6px);left:0;min-width:100%;z-index:75; background:var(--bg2);border:1px solid var(--line);border-radius:var(--r,12px); box-shadow:0 16px 44px rgba(0,0,0,.5);padding:6px; opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none; transition:opacity .18s ease,transform .22s cubic-bezier(.16,1,.3,1); } .dd.open .dd-menu{opacity:1;transform:none;pointer-events:auto} .dd-item{ padding:10px 13px;border-radius:7px;cursor:pointer; display:flex;align-items:center;justify-content:space-between;gap:12px; font-size:14.5px;color:#d5d3ce; } .dd-item:hover{background:rgba(38,59,166,.12);color:var(--text)} .dd-item.on{color:var(--accent-hi);font-weight:500} .dd-item.on::after{content:"\2713";font-size:12px} /* Hasil estimasi */ .est-result{ border:1px solid var(--accent);background:var(--bg3); padding:30px 26px;margin-top:8px; } .est-result .lbl{font-family:var(--font-display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .est-result .num{ font-family:var(--font-display);font-weight:700;line-height:1.15; font-size:clamp(24px,4.4vw,40px);margin:10px 0 6px; } .est-result .num i{font-style:normal;color:var(--accent-hi)} .est-result .note{color:var(--muted);font-size:13.5px;margin-bottom:22px;max-width:52ch} /* Lacak: kartu progres */ .track-head{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:baseline;margin-bottom:8px} .track-head h1{font-size:clamp(28px,4.6vw,46px)} .badge{ display:inline-block;font-family:var(--font-display);font-size:12px;font-weight:600; letter-spacing:.08em;text-transform:uppercase;padding:6px 12px; border:1px solid var(--line);color:var(--muted); } .badge.on{border-color:rgba(158,167,215,.6);color:var(--accent-hi)} .badge.ok{border-color:rgba(63,158,110,.6);color:#7fd0a5} .track-meta{color:var(--muted);font-size:14.5px;margin-bottom:34px} .progress-bar{ height:10px;background:var(--bg3);border:1px solid var(--line); position:relative;overflow:hidden;margin:10px 0 6px; } .progress-bar i{ position:absolute;inset:0;right:auto;background:var(--accent); transition:width 1s cubic-bezier(.16,1,.3,1); } .progress-lbl{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted)} .progress-lbl b{font-family:var(--font-display);color:var(--accent-hi);font-size:16px} /* Timeline milestone */ .tl-steps{border-left:2px solid var(--line);margin:34px 0 0 7px;display:grid;gap:0} .tl-step{position:relative;padding:0 0 30px 26px} .tl-step:last-child{padding-bottom:4px} .tl-step::before{ content:"";position:absolute;left:-8px;top:5px;width:12px;height:12px; background:var(--bg3);border:2px solid var(--muted); } .tl-step.done::before{background:var(--accent);border-color:var(--accent)} .tl-step.now::before{background:var(--bg);border-color:var(--accent-hi);box-shadow:0 0 0 4px rgba(158,167,215,.2)} .tl-step h3{font-size:17.5px} .tl-step .st{font-size:13px;color:var(--muted);margin-top:2px} .tl-step.now .st{color:var(--accent-hi)} .tl-step.done .st{color:#7fd0a5} /* Catatan lapangan publik */ .upd{border:1px solid var(--line);background:var(--bg2);padding:22px;margin-bottom:14px} .upd time{font-family:var(--font-display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-hi)} .upd p{margin-top:8px;font-size:15px;color:#d5d3ce} .upd-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:14px} .upd-photos img{aspect-ratio:4/3;object-fit:cover;width:100%;border:1px solid var(--line)} .split-2{display:grid;gap:44px} @media(min-width:900px){.split-2{grid-template-columns:1.1fr .9fr;gap:70px;align-items:start}} .side-block h2{font-size:clamp(21px,3vw,28px);margin-bottom:18px} /* ===================================================== GIMMICK (interaksi saja, UI tidak berubah) ===================================================== */ /* Scroll progress bar tipis di atas (CSS scroll-driven, tanpa JS) */ @media(prefers-reduced-motion:no-preference){ @supports(animation-timeline:scroll()){ .scroll-prog{ position:fixed;top:0;left:0;right:0;height:3px;z-index:60; background:linear-gradient(90deg,var(--accent),var(--accent-hi)); transform-origin:0 50%;transform:scaleX(0); animation:sp linear forwards;animation-timeline:scroll(); pointer-events:none; } @keyframes sp{to{transform:scaleX(1)}} } } /* Hirarki nav: menu utama pakai font display + lebih terang, jangan kalah dari submenu */ .nav-links > a,.nav-drop-btn,.nav-acc{ font-family:var(--font-display); font-weight:500; font-size:14.5px; color:#ddd9d3; letter-spacing:.005em; text-shadow:0 1px 10px rgba(0,0,0,.35); /* keterbacaan di atas foto hero */ } .nav-links > a:hover,.nav-links > a.active, .nav-drop:hover .nav-drop-btn,.nav-drop-btn.active, .nav-acc:hover{color:var(--text)} /* Chevron ikut cerah biar seirama teksnya */ .nav-drop-btn .cv{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ddd9d3' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); } /* Underline nav meluncur saat hover */ .nav-links > a,.nav-drop-btn{position:relative;padding-bottom:4px} .nav-links > a::after,.nav-drop-btn::after{ content:"";position:absolute;left:0;bottom:0;height:2px;width:0; background:var(--accent-hi);transition:width .28s cubic-bezier(.16,1,.3,1); } .nav-links > a:hover::after,.nav-links > a.active::after, .nav-drop:hover .nav-drop-btn::after,.nav-drop-btn.active::after{width:100%} /* Logo hover main-main dikit */ .brand-mark{transition:transform .3s cubic-bezier(.16,1,.3,1)} .brand:hover .brand-mark{transform:rotate(8deg) scale(1.1)} /* ===================================================== NAV GROUPING: dropdown "Untuk Klien" (desktop) ===================================================== */ .nav-right{display:flex;align-items:center;gap:16px} .nav-acc{ display:none;align-items:center;gap:7px; font-size:14px;color:var(--muted);transition:color .2s; } .nav-acc:hover{color:var(--text)} .nav-acc svg{width:16px;height:16px} @media(min-width:900px){.nav-acc{display:inline-flex}} .nav-drop{position:relative} .nav-drop-btn{ display:inline-flex;align-items:center;gap:7px; background:none;border:none;cursor:pointer; font-family:var(--font-body);font-size:14px;font-weight:400; color:var(--muted);transition:color .2s; } .nav-drop:hover .nav-drop-btn,.nav-drop-btn.active{color:var(--text)} .nav-drop-btn .cv{ width:10px;height:7px;flex:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a7abb1' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain; transition:transform .25s cubic-bezier(.16,1,.3,1); } .nav-drop:hover .nav-drop-btn .cv{transform:rotate(180deg)} .nav-drop-menu{ position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(-8px); width:320px;z-index:70; /* solid (bukan backdrop-filter): lebih terbaca di atas foto hero & aman di GPU lemah. Ikut tema — teks di dalamnya memakai var(--text)/var(--muted), jadi kalau latarnya dipatok gelap, di tema terang tulisannya jadi hitam di atas panel hitam. */ background:var(--bg2); border:1px solid var(--line);border-radius:var(--r-lg,16px); box-shadow:0 22px 60px var(--drop-shadow);padding:8px; opacity:0;pointer-events:none; transition:opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1); } /* jembatan hover biar tak putus saat kursor turun ke menu */ .nav-drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:18px} .nav-drop:hover .nav-drop-menu,.nav-drop.open .nav-drop-menu{ opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0); } .nav-drop-menu a{ display:flex;align-items:flex-start;gap:13px; padding:12px 13px;border-radius:11px;transition:background .2s; } .nav-drop-menu a:hover{background:rgba(38,59,166,.14)} .nav-drop-menu .ic{ width:34px;height:34px;flex:none;display:grid;place-items:center; border:1px solid rgba(158,167,215,.35);border-radius:10px;color:var(--accent-hi); } .nav-drop-menu .ic svg{width:17px;height:17px} .nav-drop-menu b{display:block;font-family:var(--font-display);font-weight:600;font-size:14.5px;color:var(--text)} .nav-drop-menu span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4} /* ===================================================== MENU MOBILE: dikelompokkan + ikon ===================================================== */ .mm-sec{ display:block;font-family:var(--font-display);font-size:10px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--accent-hi); padding:18px 0 8px; } .mm-sec:first-child{padding-top:8px} .mobile-menu a{ display:flex;align-items:center;gap:13px; font-family:var(--font-display);font-size:16.5px;font-weight:600; padding:12px 0;border-bottom:1px solid var(--line); } .mobile-menu a .ic{ width:34px;height:34px;flex:none;display:grid;place-items:center; border:1px solid rgba(158,167,215,.3);border-radius:10px;color:var(--accent-hi); } .mobile-menu a .ic svg{width:17px;height:17px} .mobile-menu a small{display:block;font-family:var(--font-body);font-weight:300;font-size:12.5px;color:var(--muted);margin-top:1px} .mobile-menu{max-height:calc(100svh - 68px);overflow-y:auto;padding-bottom:32px} /* CTA di menu mobile: kembalikan bentuk tombol (bukan baris menu) */ .mobile-menu .btn{padding:15px 26px;margin-top:20px;justify-content:center;border-bottom:none;font-size:15.5px} /* Tilt 3D halus (nilai diset JS; transisi di sini) */ .tiltable{transition:transform .35s cubic-bezier(.16,1,.3,1);will-change:transform;transform-style:preserve-3d} /* Tombol magnetik (JS set --mx/--my) */ .magnet{transition:transform .25s cubic-bezier(.16,1,.3,1)} /* Bentuk arsitektural melayang samar di hero */ .hero-shapes{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .hero-shapes i{ position:absolute;display:block;border:1.5px solid rgba(158,167,215,.35); opacity:0; } .hero-shapes .sq{width:26px;height:26px} .hero-shapes .sq2{width:14px;height:14px;background:rgba(38,59,166,.28);border:none} .hero-shapes .ring{width:34px;height:34px;border-radius:50%} .hero-shapes .ln{width:60px;height:1.5px;background:rgba(158,167,215,.3);border:none} /* ===================================================== ROUNDED MODERN (permintaan 28 Jul 2026 - publik ikut rounded) ===================================================== */ :root{--r-lg:16px;--r:12px;--r-sm:9px} .btn{border-radius:var(--r-sm)} .brand-mark{border-radius:7px} .badge{border-radius:999px} .cell{border-radius:var(--r-lg)} .porto-card{border-radius:var(--r-lg) var(--r-lg) 0 0} .porto-card img{border-radius:var(--r-lg)} .duo-card{border-radius:var(--r-lg)} .about-img img{border-radius:var(--r-lg)} .about-img::after{border-radius:var(--r-lg)} .field input,.field select,.field textarea{border-radius:var(--r-sm)} .form-ok,.upd,.est-result{border-radius:var(--r)} .upd-photos img{border-radius:var(--r-sm)} .progress-bar,.progress-bar i{border-radius:999px} .tl-step::before{border-radius:50%} .mobile-menu{border-radius:0 0 var(--r-lg) var(--r-lg)} .hero-shapes .sq,.hero-shapes .sq2{border-radius:5px} ::-webkit-scrollbar-thumb{border-radius:999px} .porto-track{scrollbar-color:var(--accent) transparent} @media(prefers-reduced-motion:no-preference){ .hero-shapes i{animation:floaty 11s ease-in-out infinite} .hero-shapes i:nth-child(1){left:12%;top:24%;animation-delay:0s} .hero-shapes i:nth-child(2){left:78%;top:18%;animation-delay:-2.5s;animation-duration:13s} .hero-shapes i:nth-child(3){left:64%;top:38%;animation-delay:-5s;animation-duration:9s} .hero-shapes i:nth-child(4){left:28%;top:15%;animation-delay:-7s;animation-duration:14s} .hero-shapes i:nth-child(5){left:88%;top:52%;animation-delay:-3.8s;animation-duration:12s} @keyframes floaty{ 0%,100%{transform:translateY(0) rotate(8deg);opacity:0} 12%,85%{opacity:.55} 50%{transform:translateY(-34px) rotate(-10deg);opacity:.75} } } /* ===================================================== PETA LOKASI KANTOR (bagian Kontak) Google Maps embed "output=embed" — gratis, tanpa API key. ===================================================== */ .map-wrap{ position:relative;margin-top:56px; border:1px solid var(--line);border-radius:16px;overflow:hidden; background:var(--bg2); } .map-wrap iframe{ display:block;width:100%;height:420px;border:0; /* Peta Google selalu terang; diredam mengikuti tema halaman */ filter:var(--map-filter); } .map-card{ position:absolute;left:20px;bottom:20px;right:20px;max-width:340px; /* Melayang di atas PETA Google yang selalu terang — tapi kartunya tetap ikut tema halaman (di tema gelap sengaja kontras dgn petanya). Dulu dipatok gelap sehingga di tema terang jadi kotak hitam sendirian. */ background:rgba(var(--nav-rgb),.96);border:1px solid var(--line); border-radius:12px;padding:18px 20px; } .map-card span{ display:block;font-family:var(--font-display);font-size:11px;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--accent-hi);margin-bottom:6px; } .map-card b{display:block;font-family:var(--font-display);font-size:16px;font-weight:600} .map-card p{color:var(--muted);font-size:13.5px;line-height:1.6;margin:6px 0 14px} .map-card .btn{padding:10px 18px;font-size:13px} .c-map-link{ display:inline-block;margin-top:6px;color:var(--accent-hi); font-size:13.5px;border-bottom:1px solid transparent; } .c-map-link:hover{border-bottom-color:var(--accent-hi)} @media(max-width:767px){ .map-wrap{margin-top:40px} .map-wrap iframe{height:320px} /* Di HP kartu ditaruh di bawah peta (menutupi peta kalau melayang) */ .map-card{position:static;max-width:none;border:none;border-top:1px solid var(--line); border-radius:0;background:var(--bg2)} } @media(prefers-reduced-motion:reduce){.map-wrap iframe{filter:none}} /* ---------- Dropdown bertema: kotak pencarian ---------- (implementasi JS di public/js/dd.js, dipakai bersama dashboard) */ .dd-menu{display:flex;flex-direction:column;overflow:hidden} .dd-list{overflow-y:auto;overscroll-behavior:contain;min-height:0} .dd-search{padding:8px 8px 6px;border-bottom:1px solid var(--line);flex:none;background:var(--bg2)} .dd-input{ width:100%;background:var(--bg3);border:1px solid var(--line);color:var(--text); border-radius:9px;padding:9px 11px; font-family:var(--font-body);font-size:16px; /* >=16px: cegah iOS auto-zoom */ } .dd-input:focus{outline:none;border-color:var(--accent-hi);box-shadow:0 0 0 3px rgba(158,167,215,.14)} .dd-input::placeholder{color:var(--muted)} .dd-empty{padding:14px 12px;color:var(--muted);font-size:14px;text-align:center} .dd-item.hl{background:rgba(38,59,166,.12);color:var(--text)} .dd-item.is-disabled{opacity:.45;cursor:not-allowed} /* ---------- Tombol mata pada isian kata sandi (JS di public/js/dd.js) ---------- */ .pw-wrap{position:relative;display:block} .field .pw-wrap input{padding-right:46px} .pw-eye{ position:absolute;top:50%;right:8px;transform:translateY(-50%); display:grid;place-items:center;width:36px;height:36px; background:none;border:none;cursor:pointer;color:var(--muted); border-radius:9px;padding:0; } .pw-eye svg{width:20px;height:20px;display:block} .pw-eye:hover{color:var(--text);background:var(--ghost-bg)} .pw-eye.on{color:var(--accent-hi)} .pw-eye:focus-visible{outline:2px solid var(--accent-hi);outline-offset:1px} /* ---------- Sakelar (checkbox) untuk halaman publik ---------- GOTCHA: `.field input` di atas memberi `appearance:none` + lebar penuh + padding ke SEMUA input, termasuk `type=checkbox`. Akibatnya checkbox "Ingat saya" di halaman login tampil sebagai kotak polos tanpa centang — diklik statusnya berubah di DOM tapi TIDAK ADA perubahan visual sama sekali (terlihat seperti tombol mati). Komponen ini menyalin pola `.switch` milik dashboard supaya kedua sisi konsisten. Ditaruh di akhir berkas: `.field .switch input` sengaja lebih spesifik dari `.field input` agar reset di atas tidak menang. */ .field .switch,.switch{ display:flex;align-items:center;gap:11px;cursor:pointer; text-transform:none;letter-spacing:0;font-size:15px;color:var(--text); font-family:var(--font-body);font-weight:300;margin:0; } .field .switch input,.switch input{ position:absolute;opacity:0;width:0;height:0;padding:0;margin:0;border:none; } .switch .tr{ position:relative;flex:none;width:42px;height:24px;border-radius:999px; background:var(--bg3);border:1px solid var(--line);transition:background .2s,border-color .2s; } .switch .tr::after{ content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%; background:var(--muted);transition:transform .2s,background .2s; } .switch input:checked + .tr{background:var(--accent);border-color:var(--accent)} .switch input:checked + .tr::after{transform:translateX(18px);background:#fff} .switch input:focus-visible + .tr{box-shadow:0 0 0 3px rgba(158,167,215,.28)} /* ---------- Logo asli di nav publik (menggantikan kotak "A" + teks ARSAVA) ---------- Halaman publik selalu bertema gelap, jadi cukup satu berkas versi putih. Efek hover-nya mengikuti yang dulu dipakai `.brand-mark` supaya nuansanya tak hilang. */ .brand-logo{ height:38px;width:auto;flex:none;transition:transform .3s cubic-bezier(.16,1,.3,1); /* Sepadan dgn `text-shadow` pada menu nav: di beranda navnya transparan di atas foto hero yang terang, logo terang polos bisa tenggelam. Bayangan halus, BUKAN plat/kotak (plat putih sempat dicoba & ditolak user — tampak seperti tombol). */ filter:drop-shadow(0 1px 4px rgba(0,0,0,.6)); } .brand:hover .brand-logo{transform:scale(1.04)} @media(max-width:520px){.brand-logo{height:32px}} /* ===================================================================== TEMA TERANG — koreksi (catatan klien 5 Agu 2026, poin 4) Ditaruh di AKHIR berkas supaya menang tanpa perlu menaikkan specificity di puluhan aturan tema gelap yang sudah ada. ===================================================================== */ /* --- 1. Teks DI ATAS FOTO tetap terang di kedua tema --- Hero, sel layanan, kartu IG, dan kartu peta semuanya berlatar foto/lapisan --shade-rgb yang memang gelap. Tanpa ini, tema terang membuat var(--text) jadi hitam dan tulisannya lenyap di atas foto. */ /* .map-card TIDAK ikut daftar ini: latarnya bukan foto melainkan kartu bertema (`--nav-rgb`), jadi teksnya harus ikut var(--text)/var(--muted) seperti biasa — kalau dipaksa terang, di tema terang tulisannya putih di atas kartu putih. */ .hero,.cell,.duo-card{color:#f2f0ec} .hero .hero-eyebrow, .hero h1 em, .duo-body .ig{color:#9ea7d7} [data-theme="light"] .cell p{color:#dbd9d4} /* --- 2. Nav di tema terang selalu padat --- Di beranda navnya transparan di atas foto hero yang gelap. Kalau tema terang ikut transparan, logo warna + teks gelap jadi tak terbaca di atas foto itu. Membuatnya padat sejak awal jauh lebih aman daripada menukar warna teks, logo, dan garis burger bolak-balik mengikuti posisi gulir. */ [data-theme="light"] .nav{ background:rgba(var(--nav-rgb),.97); border-bottom-color:var(--line); } [data-theme="light"] .nav-links > a, [data-theme="light"] .nav-drop-btn, [data-theme="light"] .nav-acc{color:var(--muted);text-shadow:none} [data-theme="light"] .nav-links > a:hover, [data-theme="light"] .nav-links > a.active, [data-theme="light"] .nav-drop-btn:hover, [data-theme="light"] .nav-drop-btn.active, [data-theme="light"] .nav-acc:hover{color:var(--text)} [data-theme="light"] .brand-logo{filter:none} /* Logo: putih untuk tema gelap, warna untuk tema terang */ .brand-logo-light{display:none} [data-theme="light"] .brand-logo-light{display:block} [data-theme="light"] .brand-logo-dark{display:none} /* --- 3. Tombol tema --- */ /* .theme-btn DIHAPUS 5 Agu 2026 (user): tema situs publik murni ikut jam, tanpa tombol. Aturan `.nav-right` di bawah dipertahankan — di layar <900px isi .nav-right memang tinggal kosong, tapi kalau nanti ada tombol lain di sana penempatannya sudah benar. */ /* --- 4. Elemen yang latarnya berubah drastis --- */ [data-theme="light"] .burger i{background:var(--text)} [data-theme="light"] .field input, [data-theme="light"] .field select, [data-theme="light"] .field textarea, [data-theme="light"] .dd-btn{background:var(--bg2)} [data-theme="light"] .porto-track::-webkit-scrollbar-thumb{border-color:var(--bg)} /* Di layar <900px isi .nav-right tinggal tombol tema saja, sementara .nav-inner memakai space-between dengan 3 anak — akibatnya tombolnya terdampar di tengah. Didorong ke kanan supaya berdampingan dengan burger. */ @media(max-width:899px){ .nav-right{margin-left:auto;margin-right:4px} } /* Eyebrow hero duduk di bagian foto yang paling TERANG (gradien hero cuma 15% di ketinggian itu), jadi teks navy-terang mudah tenggelam. Bayangan tipis, sama pendekatannya dengan menu nav di atas foto. */ .hero .hero-eyebrow{text-shadow:0 1px 12px rgba(0,0,0,.65)} /* Pergantian tema siang/malam terjadi saat halaman sedang dibaca (dipantau tiap 30 detik), jadi peralihannya dibuat melunak — kalau mendadak, terbaca seperti halaman berkedip rusak. Hanya warna yang ditransisikan; jangan `transition:all` karena ikut memperlambat animasi hover & transform yang sudah ada. Dihormati `prefers-reduced-motion` untuk yang sensitif terhadap gerak. */ @media (prefers-reduced-motion: no-preference){ body,.nav,.mobile-menu,.nav-drop-menu,.card,.cell,.duo-card,.map-card, .scroll-ctl button,.field input,.field select,.field textarea,.dd-btn{ transition-property:background-color,border-color,color; transition-duration:.35s; transition-timing-function:ease; } }