/* ========================================================================== THEME — GLASSMORPHISM GELAP Futuristik minimalis. Dimuat PALING AKHIR supaya menimpa template. Aturan main file ini: 1. Satu warna aksen saja (--accent). Aksen kedua hanya untuk gradasi tombol utama. 2. Radius, blur, border, dan shadow ambil dari token — tidak ada nilai lepas. 3. JANGAN pernah pakai `contain`, `overflow-x:hidden` pada , atau `overscroll-behavior` di sini. Ketiganya merusak scroll di Chrome Android. 4. Latar bergerak memakai transform saja (jalan di compositor, bukan main thread). ========================================================================== */ :root { /* --- Warna: 5 saja --- */ --bg-0: #090C12; /* dasar paling gelap */ --bg-1: #0F141D; /* dasar naik sedikit */ --accent: #00C896; /* SATU aksen */ --accent-2: #0096FF; /* hanya untuk gradasi tombol utama */ --text: #E9EDF3; --text-dim: #8B95A7; /* --- Permukaan kaca --- */ --glass-bg: rgba(255, 255, 255, 0.045); --glass-bg-strong: rgba(255, 255, 255, 0.07); --glass-border: rgba(255, 255, 255, 0.09); --glass-border-hi: rgba(255, 255, 255, 0.16); --glass-blur: blur(18px) saturate(140%); /* --- Skala radius --- */ --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-pill: 999px; /* --- Satu bayangan untuk semua --- */ --shadow: 0 8px 32px rgba(0, 0, 0, 0.36); --shadow-lift: 0 16px 48px rgba(0, 0, 0, 0.46); /* --- Ritme jarak --- */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 40px; --sp-5: 64px; } /* ========================================================================== 1. LATAR SITUS — pengganti 3 canvas Gradasi ambient yang bergeser sangat pelan + grid garis statis. Murni CSS, nol JavaScript, nol WebGL. ========================================================================== */ html, body { background: var(--bg-0); color: var(--text); } .site-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-0) 100%); } /* Dua gumpalan cahaya besar yang hanyut pelan sekali (80 & 110 detik) */ .site-bg__glow { position: absolute; inset: -25%; background: radial-gradient(42% 38% at 22% 28%, rgba(0, 200, 150, 0.16) 0%, transparent 68%), radial-gradient(46% 40% at 78% 68%, rgba(0, 150, 255, 0.13) 0%, transparent 70%), radial-gradient(34% 30% at 62% 12%, rgba(100, 255, 218, 0.07) 0%, transparent 72%); animation: bgDrift 80s ease-in-out infinite alternate; will-change: transform; } .site-bg__glow::after { content: ''; position: absolute; inset: 0; background: radial-gradient(40% 36% at 12% 82%, rgba(0, 150, 255, 0.10) 0%, transparent 70%); animation: bgDriftSlow 110s ease-in-out infinite alternate; will-change: transform; } @keyframes bgDrift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 3%, 0) scale(1.08); } } @keyframes bgDriftSlow { from { transform: translate3d(2%, 3%, 0); } to { transform: translate3d(-3%, -2%, 0); } } /* Grid garis tipis — statis, memudar ke tepi */ .site-bg__grid { position: absolute; inset: 0; background-image: repeating-linear-gradient(to right, rgba(255,255,255,0.030) 0 1px, transparent 1px 72px), repeating-linear-gradient(to bottom, rgba(255,255,255,0.030) 0 1px, transparent 1px 72px); -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 32%, transparent 78%); mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 32%, transparent 78%); } /* Butiran halus supaya gradasi tidak "banding" di layar gelap */ .site-bg__grain { position: absolute; inset: 0; opacity: 0.16; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } @media (max-width: 767px) { .site-bg__grid { background-size: 48px 48px; } .site-bg__grain { display: none; } /* hemat GPU di HP */ } /* ========================================================================== 2. SECTION — dibuat transparan supaya latar situs terlihat menembus ========================================================================== */ .static-hero, .portfoy-skill-section, .portfoy-portfolio-section, .portfoy-service-section, section { background-color: transparent !important; background-image: none !important; } /* Matikan gradasi biru-cyan terang bawaan wave-gradient.css. Inilah sumber "latar mobile jadi cerah" — sekarang dihapus permanen. */ .static-hero { background-image: none !important; animation: none !important; transform: none; /* tidak perlu lagi; tidak ada canvas untuk di-blend */ backface-visibility: visible; } .static-hero::before { background: radial-gradient(ellipse 60% 50% at 28% 34%, rgba(0, 200, 150, 0.10) 0%, transparent 72%) !important; animation: none !important; } /* Garis pemisah tipis antar section — pengganti blok warna */ .portfoy-skill-section, .portfoy-portfolio-section, .portfoy-service-section { border-top: 1px solid rgba(255, 255, 255, 0.055); } /* Video latar section skill: redam supaya tidak berebut perhatian */ video.skill-video-bg { opacity: 0.28; filter: saturate(0.75) contrast(1.05); } /* ========================================================================== 3. TIPOGRAFI — Space Grotesk saja ========================================================================== */ body, p, li, span, a, div, h1, h2, h3, h4, h5, h6, .section-title h2, .section-title h4 { font-family: "Space Grotesk", system-ui, -apple-system, sans-serif; } h1, h2, h3, h4, h5, h6 { letter-spacing: -0.022em; line-height: 1.12; color: var(--text); } p, li { color: var(--text-dim); line-height: 1.68; } /* Label kecil di atas judul — huruf renggang, ciri khas tampilan teknis */ .section-title span, .wpo-section-title span { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-2); } /* Buang efek teks berlebih */ h1, h2, h3, h4, h5, h6, .slide-title, .sud-title { text-shadow: none !important; } /* ========================================================================== 4. HERO — kontras diperbaiki Sebelumnya teks putih di atas gradasi terang: nyaris tak terbaca di HP. ========================================================================== */ .static-hero .content h1, .static-hero .slide-title { color: var(--text) !important; -webkit-text-fill-color: var(--text); background: none !important; } .static-hero .sud-title { color: transparent !important; background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 100%) !important; /* WAJIB !important: shorthand `background` di atas ikut mereset background-clip, jadi longhand tanpa !important akan kalah dan teks tampil sebagai balok warna. */ -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-fill-color: transparent !important; } /* Baris peran di bawah nama */ .static-hero .content h3 { color: var(--text-dim) !important; font-size: clamp(13px, 1.5vw, 16px); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none !important; line-height: 1.7; } .static-hero .content h3 a, .static-hero .content a { text-decoration: none !important; } /* ========================================================================== 5. PERMUKAAN KACA ========================================================================== */ .portfolio-single, .service-single-card, .cloud-item, .modal-content, .modal-portfolio .modal-content, .wpo-service-item, .collage-item { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-md); box-shadow: var(--shadow); transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s ease, box-shadow .35s ease, background-color .35s ease; } .portfolio-single:hover, .service-single-card:hover, .collage-item:hover { transform: translateY(-4px); border-color: var(--glass-border-hi); box-shadow: var(--shadow-lift); background: var(--glass-bg-strong); } /* Ikon skill: kaca bundar kecil */ .cloud-item { border-radius: var(--r-sm); } .cloud-item:hover { border-color: rgba(0, 200, 150, 0.38); } /* Modal */ .modal-content { border-radius: var(--r-lg); background: rgba(14, 18, 26, 0.82); -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%); } .modal-backdrop.show { background: rgba(5, 7, 11, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 1; } /* Header: kaca saat menempel di atas */ .wpo-site-header { background: rgba(9, 12, 18, 0.62); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--glass-border); } .wpo-site-header.sticky-on, .sticky-header.sticky-on { background: rgba(9, 12, 18, 0.86); } /* Panel menu mobile juga kaca */ .wpo-site-header .navigation-holder { background: rgba(12, 16, 24, 0.92) !important; -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); border-right: 1px solid var(--glass-border); } @media (max-width: 991px) { .wpo-site-header #navbar ul a { color: var(--text) !important; } .wpo-site-header #navbar ul a:hover { color: var(--accent) !important; } } /* Cadangan untuk browser tanpa backdrop-filter */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .portfolio-single, .service-single-card, .cloud-item, .collage-item, .modal-content, .wpo-site-header { background: rgba(20, 26, 36, 0.94); } } /* ========================================================================== 6. TOMBOL — satu bentuk, satu aksen ========================================================================== */ .theme-btn, .theme-btn-s2, .btn, button.theme-btn { border-radius: var(--r-pill); font-family: "Space Grotesk", sans-serif; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; box-shadow: none !important; transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, background-color .28s ease, color .28s ease; } /* Tombol utama */ .theme-btn { background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 100%) !important; color: #05070B !important; border: 0 !important; padding: 16px 34px; } .theme-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 200, 150, 0.28) !important; color: #05070B !important; } /* Tombol sekunder: kaca */ .theme-btn-s2 { background: var(--glass-bg) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border-hi) !important; color: var(--text) !important; padding: 15px 32px; } .theme-btn-s2:hover { background: var(--glass-bg-strong) !important; border-color: var(--accent) !important; color: var(--accent) !important; transform: translateY(-2px); } /* Tab portfolio */ .nav-pills .nav-link, .portfolio-tabs .nav-link { border-radius: var(--r-pill) !important; background: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important; color: var(--text-dim) !important; box-shadow: none !important; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; transition: all .28s ease; } .nav-pills .nav-link:hover, .portfolio-tabs .nav-link:hover { border-color: var(--glass-border-hi) !important; color: var(--text) !important; } .nav-pills .nav-link.active, .portfolio-tabs .nav-link.active { background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 100%) !important; border-color: transparent !important; color: #05070B !important; box-shadow: none !important; } /* ========================================================================== 7. PEREDAM — hapus glow & radius liar bawaan template 192 border-radius dan 138 box-shadow diseragamkan di sini. ========================================================================== */ .wpo-site-header .header-right .call, .section-title, .text, .image, .icon, .item-standard { box-shadow: none !important; text-shadow: none !important; } img.img-fluid.rounded, .collage-item img, .portfolio-single .image img, .modal-img { border-radius: var(--r-sm) !important; } /* Nomor telepon di header */ .wpo-site-header .header-right .call span { color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; } .wpo-site-header .header-right .call strong { color: var(--text); font-weight: 500; } /* Garis pemisah tipis, bukan blok */ hr, .separator { border-color: var(--glass-border); opacity: 1; } /* ========================================================================== 8. AKSESIBILITAS & HEMAT DAYA ========================================================================== */ @media (prefers-reduced-motion: reduce) { .site-bg__glow, .site-bg__glow::after { animation: none !important; } .portfolio-single, .service-single-card, .collage-item, .theme-btn, .theme-btn-s2 { transition: none !important; } } /* Fokus keyboard terlihat jelas */ a:focus-visible, button:focus-visible, .nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); } /* ========================================================================== 9. IKON SVG — pengganti font ikon themify (16 KB CSS + 78 KB font -> ~2 KB) ========================================================================== */ .ico { width: 20px; height: 20px; display: inline-block; vertical-align: middle; flex: 0 0 auto; } .menu-close .ico { width: 18px; height: 18px; } /* Tautan sosial: kotak kaca kecil, ukuran sentuh 44px */ .social-links a, .wpo-footer-widget .social a, footer .social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 6px 6px 0; color: var(--text-dim); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-sm); transition: color .28s ease, border-color .28s ease, background-color .28s ease, transform .28s ease; } .social-links a:hover, .wpo-footer-widget .social a:hover, footer .social a:hover { color: var(--accent); border-color: rgba(0, 200, 150, 0.42); background: var(--glass-bg-strong); transform: translateY(-2px); } /* ========================================================================== 10. PEREDAM GLOW TOMBOL HERO download-button-style.css memasang 2 lapis pseudo-element blur 20-30px di belakang tombol. Terlalu ramai untuk gaya minimalis — dijinakkan, tidak dihapus, supaya tombol tetap terasa "hidup" saat disentuh. ========================================================================== */ .static-hero .theme-btn::before, .static-hero .theme-btn::after { opacity: 0 !important; filter: blur(18px) !important; transition: opacity .3s ease !important; } .static-hero .theme-btn:hover::before { opacity: 0.45 !important; } .static-hero .theme-btn:hover::after { opacity: 0.25 !important; } .static-hero .theme-btn { box-shadow: none !important; } .static-hero .theme-btn:hover { box-shadow: 0 10px 30px rgba(0, 200, 150, 0.26) !important; } /* Judul hero: bersihkan glow teks bawaan template */ .static-hero .slide-title, .static-hero .content h1 { filter: none !important; } /* ========================================================================== 11. PENYELARASAN AKHIR — sisa dekorasi template ========================================================================== */ /* 11a. Balok gradasi 117x75px sebelum "PRASETYO" -> garis aksen tipis. Bentuk aslinya blok besar bercahaya, terlalu berat untuk minimalis. */ .static-hero .sud-title::before { width: 56px !important; height: 3px !important; top: auto !important; bottom: 22% !important; transform: none !important; border-radius: var(--r-pill) !important; background: var(--accent) !important; box-shadow: none !important; } .static-hero .sud-title { padding-left: 78px !important; } @media (max-width: 767px) { .static-hero .sud-title { padding-left: 68px !important; } .static-hero .sud-title::before { width: 44px !important; bottom: 24% !important; } } /* 11b. Ikon skill: satu bentuk saja. Sebelumnya lingkaran putih di dalam cincin gradasi biru-hijau — dua wadah bertumpuk. Sekarang satu ubin kaca. */ .skill-cloud-icon { width: 76px !important; height: 76px !important; background: var(--glass-bg-strong) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border) !important; border-radius: var(--r-sm) !important; box-shadow: none !important; padding: 0 !important; transition: border-color .3s ease, transform .3s ease, background-color .3s ease !important; } .skill-cloud-icon img { /* Pelat terang kecil supaya logo gelap tetap terbaca, tanpa lingkaran penuh */ background: rgba(255, 255, 255, 0.92) !important; border-radius: 8px !important; padding: 9px !important; width: calc(100% - 16px) !important; height: calc(100% - 16px) !important; margin: 8px !important; } .cloud-item:hover .skill-cloud-icon { border-color: rgba(0, 200, 150, 0.45) !important; background: var(--glass-bg-strong) !important; transform: translateY(-3px) !important; box-shadow: var(--shadow) !important; } .cloud-item { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; } @media (max-width: 767px) { .skill-cloud-icon { width: 58px !important; height: 58px !important; } .skill-cloud-icon img { padding: 7px !important; margin: 6px !important; width: calc(100% - 12px) !important; height: calc(100% - 12px) !important; } } /* 11c. Tombol portfolio: halo tebal dijinakkan, sama seperti tombol hero */ .portfoy-portfolio-section .theme-btn::before, .portfoy-portfolio-section .theme-btn::after, .portfolio-btn .theme-btn-s2::before, .portfolio-btn .theme-btn-s2::after, .portfolio-btn::before, .portfolio-btn::after { opacity: 0 !important; transition: opacity .3s ease !important; } .portfoy-portfolio-section .theme-btn:hover::before, .portfolio-btn .theme-btn-s2:hover::before, .portfolio-btn:hover::before { opacity: 0.4 !important; } .portfoy-portfolio-section .theme-btn, .portfolio-btn, .portfolio-btn .theme-btn-s2 { box-shadow: none !important; border-width: 1px !important; } .portfoy-portfolio-section .theme-btn:hover, .portfolio-btn .theme-btn-s2:hover, .portfolio-btn:hover { box-shadow: 0 10px 30px rgba(0, 200, 150, 0.26) !important; } /* ========================================================================== 12. HERO — tautan sosial & ukuran judul ========================================================================== */ /* 12a. "PRASETYO" sempat terpotong di kanan pada layar lebar tertentu. Pakai clamp supaya ukurannya selalu menyesuaikan lebar kolom. */ .static-hero .sud-title { font-size: clamp(38px, 6.4vw, 92px) !important; line-height: 1.02 !important; white-space: nowrap; max-width: 100%; } .static-hero .slide-title { font-size: clamp(38px, 6.4vw, 92px) !important; line-height: 1.02 !important; } /* 12b. Ikon sosial hero: ubin kaca, target sentuh 44px */ .hero-icon ul { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0; position: relative; z-index: 3; } .hero-icon ul li { margin: 0 !important; } .hero-icon ul li a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--text-dim); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-sm); transition: color .28s ease, border-color .28s ease, background-color .28s ease, transform .28s ease; } .hero-icon ul li a:hover { color: var(--accent); border-color: rgba(0, 200, 150, 0.45); background: var(--glass-bg-strong); transform: translateY(-2px); } /* 12c. Bentuk dekoratif setengah lingkaran putih di belakang ikon: sisa template, bertabrakan dengan gaya kaca. Disembunyikan. */ .hero-icon .shape, .hero-icon .shape-1 { display: none !important; } /* ========================================================================== 13. DEKORASI TEMPLATE -> GARIS RAMBUT Dua sisa terakhir yang membuat hero terasa "ramai". ========================================================================== */ /* 13a. .line-border-1..5: balok gelap selebar 140px yang membuat pita vertikal di hero. Diubah jadi garis 1px — justru lebih techy. */ .static-hero .line-border-1, .static-hero .line-border-2, .static-hero .line-border-3, .static-hero .line-border-4, .static-hero .line-border-5 { width: 1px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.03) 45%, transparent 100%) !important; opacity: 1 !important; } @media (max-width: 991px) { .static-hero .line-border-3, .static-hero .line-border-4, .static-hero .line-border-5 { display: none !important; /* di HP dua garis sudah cukup */ } } /* 13b. Pembatas gelombang biru (#0D4BEC) di bawah hero dan atas section skill. Bentuk gelombang itu bahasa visual lama. Diganti garis lurus tipis. */ .static-hero::after, .portfoy-skill-section::before { background: none !important; height: 1px !important; bottom: 0 !important; top: auto !important; border-top: 1px solid var(--glass-border) !important; } .portfoy-skill-section::before { top: 0 !important; bottom: auto !important; } /* ========================================================================== 14. HEADER & IKON SOSIAL — pembersihan terakhir ========================================================================== */ /* 14a. .navigation punya background SOLID #1E232D yang menutupi efek kaca header. Dibuat transparan supaya blur benar-benar terlihat. Sekaligus buang glow biru di header sticky. */ .wpo-site-header .navigation, .wpo-site-header .navigation.navbar { background: transparent !important; box-shadow: none !important; border: 0 !important; } .wpo-site-header { box-shadow: none !important; } /* 14b.

ikon sosial berukuran 70x70 bulat dengan hiasan gradasi di salah satu item — bikin ketiganya tampak tidak seragam. */ .hero-icon ul li { width: auto !important; height: auto !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; } .hero-icon ul li::before, .hero-icon ul li::after, .hero-icon ul li a::before, .hero-icon ul li a::after { display: none !important; content: none !important; } .hero-icon { box-shadow: none !important; background: none !important; } /* ========================================================================== 15. LABEL AKSEN — jadikan warna solid Template membuatnya teks bergradasi (background-clip) sehingga warnanya tidak bisa dipastikan. Untuk aturan "satu aksen", dibuat solid. ========================================================================== */ .section-title span, .wpo-section-title span { background: none !important; -webkit-text-fill-color: var(--accent) !important; text-fill-color: var(--accent) !important; color: var(--accent) !important; } /* ========================================================================== 16. SISA DARI wave-gradient.css File itu sudah tidak dimuat lagi (seluruh isinya digantikan tema ini). Hanya satu aturan yang masih dibutuhkan: menaikkan konten hero di atas lapisan dekoratif. ========================================================================== */ .static-hero { position: relative; overflow: hidden; } .static-hero .hero-inner { position: relative; z-index: 2; } /* ========================================================================== 17. IKON SOSIAL — WARNA BRAND Pengecualian yang disengaja dari aturan "satu aksen": ikon platform dikenali orang lewat warnanya, jadi justru mempercepat pengenalan. Ubinnya tetap kaca netral supaya tidak jadi ramai. Biru LinkedIn resmi (#0A66C2) sebenarnya LULUS ambang 3:1 di atas ubin kaca ini (3,16:1) — tapi pas-pasan, dan pada ukuran 20px terlihat kusam. Dipakai versi terangnya #3B9BFF (6,25:1): jauh lebih terbaca dan tetap dikenali sebagai biru LinkedIn. Mau warna resmi? Ganti satu baris di bawah: --brand-linkedin: #0A66C2. ========================================================================== */ :root { --brand-linkedin: #3B9BFF; --brand-linkedin-hi: #5FB0FF; } /* Instagram & Gmail memakai gradasi SVG (lihat di awal ), jadi warnanya diatur di markup, bukan di sini. */ .ico--li { color: var(--brand-linkedin); } .hero-icon ul li a:has(.ico--li):hover, .social-links a:has(.ico--li):hover { color: var(--brand-linkedin-hi); } /* Ikon brand tetap berwarna saat hover — jangan ditimpa aksen hijau */ .hero-icon ul li a:hover .ico--li { color: var(--brand-linkedin-hi); } .hero-icon ul li a:hover .ico--ig, .hero-icon ul li a:hover .ico--gm { opacity: 1; } .ico--ig, .ico--gm, .ico--li { transition: transform .28s cubic-bezier(.2,.7,.3,1), opacity .28s ease; } .hero-icon ul li a:hover .ico, .social-links a:hover .ico, footer .social a:hover .ico { transform: scale(1.08); } /* Border ubin ikut warna brand saat disentuh — pengganti border hijau */ .hero-icon ul li a:has(.ico--ig):hover { border-color: rgba(214, 41, 118, 0.55); } .hero-icon ul li a:has(.ico--li):hover { border-color: rgba(59, 155, 255, 0.55); } .hero-icon ul li a:has(.ico--gm):hover { border-color: rgba(234, 67, 53, 0.50); } /* Cadangan untuk browser tanpa :has() — border netral, ikon tetap berwarna */ @supports not selector(:has(*)) { .hero-icon ul li a:hover { border-color: var(--glass-border-hi); } }