/* ========================================================== MEP CENTER — V6 SHARED DESIGN SYSTEM Navy + Gold · 50 animasi · background hidup Dipakai bersama oleh SEMUA halaman. ---------------------------------------------------------- >>> MAU GANTI WARNA AKSEN? UBAH 2 BARIS DI BAWAH INI SAJA <<< Cari "--gold:" di blok :root (mode gelap) dan di blok body.light-mode (mode terang). Wajib diubah bertiga supaya konsisten: --gold warna utama --gold-lt versi lebih terang (hover/gradient) --gold-dk versi lebih gelap (gradient/tombol) --gold-rgb angka R,G,B dari --gold <-- JANGAN LUPA (dipakai untuk transparansi: shadow, glow) Sedang aktif: GOLD --------------------------------------------------------- STEEL BLUE: :root --gold:#3b82f6; --gold-lt:#60a5fa; --gold-dk:#1d4ed8; --gold-rgb:59,130,246; --on-gold:#070b14; .light-mode --gold:#1d4ed8; --gold-lt:#3b82f6; --gold-dk:#1e3a8a; --gold-rgb:29,78,216; --on-gold:#ffffff; LIME GREEN: :root --gold:#a3e635; --gold-lt:#bef264; --gold-dk:#65a30d; --gold-rgb:163,230,53; --on-gold:#0b1206; .light-mode --gold:#3f6212; --gold-lt:#4d7c0f; --gold-dk:#365314; --gold-rgb:63,98,18; --on-gold:#ffffff; PLATINUM (perak-abu): :root --gold:#e2e8f0; --gold-lt:#f8fafc; --gold-dk:#94a3b8; --gold-rgb:226,232,240; --on-gold:#070b14; .light-mode --gold:#475569; --gold-lt:#64748b; --gold-dk:#334155; --gold-rgb:71,85,105; --on-gold:#ffffff; COPPER: :root --gold:#cf8f4f; --gold-lt:#e0ac74; --gold-dk:#8f5322; --gold-rgb:207,143,79; --on-gold:#070b14; .light-mode --gold:#8f5322; --gold-lt:#cf8f4f; --gold-dk:#6f3f19; --gold-rgb:143,83,34; --on-gold:#ffffff; EMERALD: :root --gold:#10b981; --gold-lt:#34d399; --gold-dk:#047857; --gold-rgb:16,185,129; --on-gold:#070b14; .light-mode --gold:#047857; --gold-lt:#10b981; --gold-dk:#065f46; --gold-rgb:4,120,87; --on-gold:#ffffff; Catatan: --on-gold = warna teks yang duduk DI ATAS aksen. Aksen terang -> teks gelap. Aksen gelap -> teks putih. Seluruh situs (9 halaman, termasuk animasi canvas logo) otomatis ikut. Tidak ada warna yang di-hardcode lagi. ========================================================== */ /* ========================================================== MEP CENTER V6 — SPECTACULAR EDITION Navy + Gold · 30+ animations · living background ========================================================== */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --bg:#070b14; --bg2:#0e1524; --card:#111b2e; --card-hi:#162236; --line:rgba(255,255,255,0.07); --line-hi:rgba(var(--gold-rgb),0.28); --gold:#c9a84c; --gold-lt:#e8d28a; --gold-dk:#a8892e; --gold-rgb:201,168,76; --on-gold:#070b14; --ink:#f0f4ff; --text:#a8b6d4; --muted:#6a7b9e; --green:#00e676; --orange:#ff6b35; --fd:'Space Grotesk',sans-serif; --fb:'Inter',sans-serif; --fm:'JetBrains Mono',monospace; --r-sm:10px; --r:16px; --r-lg:24px; --ease:cubic-bezier(.22,1,.36,1); --bounce:cubic-bezier(.34,1.56,.64,1); --nav-h:68px; } body.light-mode{ --bg:#f4f6fb; --bg2:#e9edf5; --card:#ffffff; --card-hi:#f7f9fc; --line:#dce3ee; --line-hi:rgba(150,115,20,0.35); --gold:#8a6b16; --gold-lt:#a8892e; --gold-dk:#6b5310; --gold-rgb:138,107,22; --on-gold:#ffffff; --ink:#0b1120; --text:#35435c; --muted:#64748b; } html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)} /* halaman dengan sub-navbar punya dua bar sticky menumpuk */ html:has(.sub-navbar){scroll-padding-top:calc(var(--nav-h) + 84px)} body{background:var(--bg);color:var(--text);font-family:var(--fb);font-size:15.5px;line-height:1.75;overflow-x:hidden;-webkit-font-smoothing:antialiased} h1,h2,h3,h4,h5,h6{font-family:var(--fd);color:var(--ink);letter-spacing:-.5px} a{text-decoration:none} img{max-width:100%} ::selection{background:var(--gold);color:var(--on-gold)} /* ===== 1-6 · SCROLL REVEALS ===== */ [data-rv]{opacity:0;will-change:transform,opacity;transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)} [data-rv="up"]{transform:translateY(46px)} [data-rv="down"]{transform:translateY(-40px)} [data-rv="left"]{transform:translateX(-52px)} [data-rv="right"]{transform:translateX(52px)} [data-rv="scale"]{transform:scale(.9)} [data-rv="blur"]{filter:blur(14px);transform:translateY(24px)} [data-rv="flip"]{transform:perspective(900px) rotateX(-24deg);transform-origin:top} [data-rv="rot"]{transform:rotate(-6deg) scale(.94)} [data-rv="clip"]{clip-path:inset(0 0 100% 0);transform:none} [data-rv].in{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)} /* ===== 7 · GOLD GRADIENT SWEEP TEXT ===== */ @keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} .grad-text{background:linear-gradient(100deg,var(--gold-dk),var(--gold-lt),var(--gold),var(--gold-lt),var(--gold-dk));background-size:280% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradShift 7s ease-in-out infinite} /* ===== 8 · SHIMMER SWEEP ===== */ @keyframes shimmer{0%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}} .shimmer{position:relative;overflow:hidden} .shimmer::after{content:'';position:absolute;inset:0;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:shimmer 4.5s ease-in-out infinite;pointer-events:none} /* ===== 9 · PULSE DOT ===== */ @keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(0,230,118,.55);opacity:1}70%{box-shadow:0 0 0 9px rgba(0,230,118,0);opacity:.75}} .dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;animation:pulseDot 2.1s infinite} /* ===== 10 · GOLD GLOW BREATH ===== */ @keyframes glowBreath{0%,100%{box-shadow:0 0 22px rgba(var(--gold-rgb),.10),inset 0 0 0 1px var(--line)}50%{box-shadow:0 0 44px rgba(var(--gold-rgb),.24),inset 0 0 0 1px var(--line-hi)}} .glow-breath{animation:glowBreath 4.6s ease-in-out infinite} /* ===== 11-13 · FLOAT / DRIFT / ORBIT ===== */ @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}} @keyframes drift{0%{transform:translate(0,0) scale(1)}33%{transform:translate(38px,-26px) scale(1.09)}66%{transform:translate(-24px,20px) scale(.95)}100%{transform:translate(0,0) scale(1)}} @keyframes orbit{from{transform:rotate(0) translateX(var(--orb,120px)) rotate(0)}to{transform:rotate(360deg) translateX(var(--orb,120px)) rotate(-360deg)}} .floaty{animation:floatY 6s ease-in-out infinite} /* ===== 14 · SPIN SLOW / CONIC RING ===== */ @keyframes spin{to{transform:rotate(360deg)}} @keyframes spinRev{to{transform:rotate(-360deg)}} /* ===== 15 · TYPEWRITER CARET ===== */ @keyframes caret{0%,100%{opacity:1}50%{opacity:0}} .caret::after{content:'|';color:var(--gold);animation:caret 1s steps(1) infinite;margin-left:2px} /* ===== 16 · COUNT-UP POP ===== */ @keyframes numPop{0%{transform:scale(.86);opacity:.4}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}} .num-pop{animation:numPop .7s var(--bounce) both} /* ===== 17 · MARQUEE ===== */ @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ===== 18 · BORDER TRACE ===== */ @keyframes traceX{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}} .trace{position:relative;overflow:hidden} .trace::before{content:'';position:absolute;top:0;left:0;height:1px;width:100%;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .3s} .trace:hover::before{opacity:1} @media (hover:hover) and (pointer:fine){ .trace:hover::before{animation:traceX 1.5s linear infinite} } /* ===== 19 · MAGNETIC LIFT ===== */ .lift{transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .35s ease,background .35s ease} .lift:hover{transform:translateY(-9px);box-shadow:0 26px 60px rgba(0,0,0,.46),0 0 0 1px var(--line-hi)} /* ===== 20 · TILT 3D ===== */ .tilt{transform-style:preserve-3d;transition:transform .3s var(--ease)} /* ===== 21 · RIPPLE ===== */ @keyframes ripple{to{transform:scale(3.6);opacity:0}} .rip{position:relative;overflow:hidden} .rip>span.r{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:ripple .65s ease-out;pointer-events:none} /* ===== 22 · ICON BOUNCE ===== */ @keyframes iconPop{0%{transform:scale(1) rotate(0)}45%{transform:scale(1.22) rotate(-9deg)}100%{transform:scale(1) rotate(0)}} /* ===== 23 · UNDERLINE GROW ===== */ .ul-grow{position:relative} .ul-grow::after{content:'';position:absolute;left:0;bottom:-3px;width:0;height:1.5px;background:var(--gold);transition:width .35s var(--ease)} .ul-grow:hover::after{width:100%} /* ===== 24 · FADE-SLIDE STAGGER CHILDREN ===== */ @keyframes stagIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} /* ===== 25 · SCANLINE ===== */ @keyframes scan{0%{top:-10%}100%{top:110%}} /* ===== 26 · GRID PAN ===== */ @keyframes gridPan{from{background-position:0 0,0 0}to{background-position:70px 70px,70px 70px}} /* ===== 27 · SPOTLIGHT FOLLOW ===== */ @keyframes spotFade{from{opacity:0}to{opacity:1}} /* ===== 28 · BADGE FLASH ===== */ @keyframes flash{0%,100%{opacity:1}50%{opacity:.45}} /* ===== 29 · FIRE FLICKER ===== */ @keyframes flick{0%,100%{transform:scale(1) rotate(-3deg);filter:brightness(1)}50%{transform:scale(1.15) rotate(4deg);filter:brightness(1.3)}} /* ===== 30 · MODAL POP ===== */ @keyframes modalIn{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} /* ===== 31 · SKELETON SHEEN ===== */ @keyframes sheen{to{background-position:200% 0}} /* ===== 32 · ARROW NUDGE ===== */ @keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}} @media (hover:hover) and (pointer:fine){ .nudge:hover i.arw{animation:nudge .7s ease-in-out infinite} } /* ===== 33 · LOGO RING PULSE ===== */ @keyframes ringPulse{0%{transform:scale(.82);opacity:.75}100%{transform:scale(1.55);opacity:0}} /* ===== 34 · TEXT CLIP RISE ===== */ @keyframes clipRise{from{clip-path:inset(100% 0 0 0);transform:translateY(24px)}to{clip-path:inset(0 0 0 0);transform:none}} .clip-rise>span{display:inline-block;animation:clipRise .95s var(--ease) both} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} [data-rv]{opacity:1 !important;transform:none !important;filter:none !important;clip-path:none !important} } /* ========================================================== LIVING BACKGROUND — layered, parallax, mouse-reactive ========================================================== */ #bgFx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} /* grid pan layer */ #bgFx .grid{position:absolute;inset:-70px;background-image: linear-gradient(rgba(var(--gold-rgb),.045) 1px,transparent 1px), linear-gradient(90deg,rgba(var(--gold-rgb),.045) 1px,transparent 1px); background-size:70px 70px;animation:gridPan 18s linear infinite} body.light-mode #bgFx .grid{background-image: linear-gradient(rgba(11,17,32,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(11,17,32,.05) 1px,transparent 1px)} /* drifting glow orbs */ #bgFx .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:drift linear infinite} #bgFx .orb.o1{width:520px;height:520px;top:-140px;left:-90px;background:radial-gradient(circle,rgba(var(--gold-rgb),.20),transparent 70%);animation-duration:26s} #bgFx .orb.o2{width:420px;height:420px;top:38%;right:-120px;background:radial-gradient(circle,rgba(0,136,255,.16),transparent 70%);animation-duration:34s;animation-direction:reverse} #bgFx .orb.o3{width:360px;height:360px;bottom:-100px;left:32%;background:radial-gradient(circle,rgba(255,107,53,.12),transparent 70%);animation-duration:30s} #bgFx .orb.o4{width:300px;height:300px;top:62%;left:8%;background:radial-gradient(circle,rgba(0,230,118,.10),transparent 70%);animation-duration:38s;animation-direction:reverse} /* particle field */ #bgFx .pt{position:absolute;border-radius:50%;background:var(--gold);animation:ptRise linear infinite} @keyframes ptRise{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.7}90%{opacity:.5}100%{transform:translateY(-105vh) translateX(var(--dx,20px));opacity:0}} /* scanline */ #bgFx .scan{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.35),transparent);animation:scan 9s linear infinite} /* mouse spotlight */ #spot{position:fixed;width:620px;height:620px;border-radius:50%;pointer-events:none;z-index:1; background:radial-gradient(circle,rgba(var(--gold-rgb),.075),transparent 62%); transform:translate(-50%,-50%);opacity:0;transition:opacity .5s;will-change:transform} body.spot-on #spot{opacity:1} /* noise */ #bgFx .noise{position:absolute;inset:0;opacity:.028;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")} /* scroll progress */ #prog{position:fixed;top:0;left:0;height:2.5px;width:0;z-index:200;background:linear-gradient(90deg,var(--gold-dk),var(--gold-lt),var(--gold));box-shadow:0 0 10px rgba(var(--gold-rgb),.6);transition:width .1s linear} main,nav,footer,section,.stats-bar{position:relative;z-index:2} /* ========================================================== NAVBAR — LIQUID GLASS BUBBLE (iOS style) ========================================================== */ .navbar{ position:sticky; top:12px; z-index:100; width:calc(100% - 22px); max-width:1210px; margin:12px auto 0; height:var(--nav-h); padding:0 8px 0 6px; border-radius:999px; background:rgba(20,30,48,.55); -webkit-backdrop-filter:blur(26px) saturate(190%); backdrop-filter:blur(26px) saturate(190%); border:1px solid rgba(255,255,255,.10); box-shadow:0 10px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.13), inset 0 -1px 0 rgba(0,0,0,.18); transition:background .4s, box-shadow .4s, border-color .4s, top .3s; } body.light-mode .navbar{ background:rgba(255,255,255,.62); border-color:rgba(11,17,32,.09); box-shadow:0 10px 30px rgba(11,17,32,.10), inset 0 1px 0 rgba(255,255,255,.9); } .navbar.scrolled{ background:rgba(14,22,38,.78); border-color:rgba(var(--gold-rgb),.22); box-shadow:0 14px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14); } body.light-mode .navbar.scrolled{ background:rgba(255,255,255,.85); border-color:rgba(var(--gold-rgb),.30); box-shadow:0 12px 34px rgba(11,17,32,.13), inset 0 1px 0 rgba(255,255,255,.95); } /* specular highlight across the top of the bubble */ .navbar::before{ content:''; position:absolute; inset:1px 1px auto 1px; height:46%; border-radius:999px 999px 40% 40%/999px 999px 100% 100%; background:linear-gradient(180deg,rgba(255,255,255,.10),transparent); pointer-events:none; } body.light-mode .navbar::before{background:linear-gradient(180deg,rgba(255,255,255,.75),transparent)} .navbar>.container{max-width:100%;padding:0 10px 0 14px} .navbar-brand{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-weight:700;font-size:19px;color:var(--ink)!important;letter-spacing:-.6px;padding:0} .navbar-brand span{color:var(--gold)} .brand-logo{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(var(--gold-rgb),.45));transition:transform .5s var(--bounce)} .navbar-brand:hover .brand-logo{transform:rotate(-12deg) scale(1.12)} .navbar-nav{gap:1px} .navbar-nav .nav-link{ font-family:var(--fb);font-size:12.8px;font-weight:500;color:var(--text)!important; padding:7px 12px!important;border-radius:999px;position:relative; transition:color .22s, background .22s, box-shadow .22s; } .navbar-nav .nav-link:hover{color:var(--gold)!important;background:rgba(var(--gold-rgb),.10)} .navbar-nav .nav-link.active{ color:var(--gold)!important; background:rgba(var(--gold-rgb),.13); box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.26); } .navbar-nav .nav-link.active::after{display:none} /* NEW · Calculation Engineer — konsisten gold di semua halaman */ .nav-link-new,.navbar-nav .nav-link-new{color:var(--gold)!important;display:inline-flex;align-items:center;gap:7px} .nav-link-new:hover,.navbar-nav .nav-link-new:hover{background:rgba(var(--gold-rgb),.14)} .nav-new-badge{ font-family:var(--fm);font-size:8.5px;font-weight:700;letter-spacing:1.1px; padding:2px 7px;border-radius:999px; background:linear-gradient(135deg,var(--gold),var(--gold-dk)); color:var(--on-gold);border:none;box-shadow:0 2px 8px rgba(var(--gold-rgb),.34); animation:flash 2.6s ease-in-out infinite; } .nav-fire{display:inline-block;animation:flick 1.5s ease-in-out infinite} #theme-toggle{ width:34px;height:34px;border-radius:50%;flex-shrink:0; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06);color:var(--gold);cursor:pointer; display:grid;place-items:center;transition:all .3s var(--bounce); } body.light-mode #theme-toggle{border-color:rgba(11,17,32,.10);background:rgba(11,17,32,.04)} #theme-toggle:hover{background:rgba(var(--gold-rgb),.18);transform:rotate(20deg) scale(1.1)} /* ---- HAMBURGER (visible, gold bars) ---- */ .navbar-toggler{ width:42px;height:38px;padding:0;border-radius:13px;flex-shrink:0; border:1px solid rgba(var(--gold-rgb),.30)!important; background:rgba(var(--gold-rgb),.10)!important; display:grid;place-items:center;gap:0; transition:all .3s; } .navbar-toggler:focus,.navbar-toggler:focus-visible{box-shadow:0 0 0 3px rgba(var(--gold-rgb),.22)!important;outline:none} .navbar-toggler:hover{background:rgba(var(--gold-rgb),.2)!important} /* 3 garis gold — tidak butuh elemen tambahan di HTML */ .navbar-toggler .navbar-toggler-icon{ background-image:none!important;filter:none!important; width:20px;height:14px;position:relative;display:block; background:linear-gradient(var(--gold),var(--gold)) center/100% 2px no-repeat!important; transition:background-size .25s; } .navbar-toggler .navbar-toggler-icon::before, .navbar-toggler .navbar-toggler-icon::after{ content:'';position:absolute;left:0;right:0;height:2px;border-radius:2px; background:var(--gold);transition:transform .35s var(--ease); } .navbar-toggler .navbar-toggler-icon::before{top:0} .navbar-toggler .navbar-toggler-icon::after{bottom:0} .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{background-size:0 2px!important} .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before{transform:translateY(6px) rotate(45deg)} .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after{transform:translateY(-6px) rotate(-45deg)} /* ---- MOBILE: glass bubble dropdown panel ---- */ @media (max-width:991.98px){ .navbar{border-radius:26px;height:auto;min-height:58px;padding:8px 10px} .navbar::before{border-radius:26px 26px 40% 40%/26px 26px 100% 100%} .navbar>.container{padding:0 6px 0 10px;flex-wrap:nowrap} .navbar-collapse{ margin-top:10px;border-radius:22px;overflow:hidden; background:rgba(16,24,40,.72); -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%); border:1px solid rgba(255,255,255,.10); box-shadow:0 16px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10); } body.light-mode .navbar-collapse{ background:rgba(255,255,255,.86);border-color:rgba(11,17,32,.09); box-shadow:0 16px 36px rgba(11,17,32,.12), inset 0 1px 0 #fff; } .navbar-nav{padding:10px;gap:3px} .navbar-nav .nav-item{width:100%} .navbar-nav .nav-link{ width:100%;padding:11px 15px!important;border-radius:14px;font-size:14px; display:flex;align-items:center; } .navbar-nav .nav-link.active{box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.26)} .navbar-nav .nav-item.ms-lg-2{margin-top:6px;padding:0 15px 4px} #theme-toggle{width:38px;height:38px} } /* ========================================================== HERO ========================================================== */ .hero{min-height:100vh;display:flex;align-items:center;padding:calc(var(--nav-h) + 40px) 0 60px;position:relative;overflow:hidden; background:radial-gradient(ellipse 78% 62% at 50% 0%,rgba(0,136,255,.11) 0%,transparent 62%), radial-gradient(ellipse 46% 44% at 88% 82%,rgba(var(--gold-rgb),.10) 0%,transparent 55%),transparent} .hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-hi),transparent)} .hero-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--fm);font-size:10px;letter-spacing:2.8px;text-transform:uppercase;color:var(--gold);border:1px solid var(--line-hi);background:rgba(var(--gold-rgb),.05);padding:7px 17px;border-radius:999px;margin-bottom:26px} .hero h1{font-size:clamp(34px,5.4vw,62px);font-weight:700;line-height:1.06;letter-spacing:-2px;color:var(--ink);margin-bottom:8px} .hero .kicker{font-family:var(--fm);font-size:clamp(10px,1.3vw,12.5px);letter-spacing:4px;text-transform:uppercase;color:var(--muted);margin-bottom:14px;display:block} .hero .tagline{font-size:17.5px;color:var(--muted);max-width:480px;margin:18px 0 34px;line-height:1.8} .hero .tagline b{color:var(--text);font-weight:600} .hero-cta{display:flex;gap:13px;flex-wrap:wrap} /* LOGO STAGE */ .logo-stage{position:relative;width:100%;max-width:430px;aspect-ratio:1;margin-inline:auto;display:grid;place-items:center;overflow:visible} #logoCanvas{position:absolute;inset:0;width:100%;height:100%} .logo-core{position:relative;z-index:3;width:46%;display:grid;place-items:center} .logo-core img{width:100%;filter:drop-shadow(0 0 26px rgba(var(--gold-rgb),.5));animation:floatY 7s ease-in-out infinite} .logo-ring{position:absolute;border-radius:50%;border:1px solid var(--line-hi);pointer-events:none} .logo-ring.r1{inset:14%;animation:spin 26s linear infinite} .logo-ring.r2{inset:5%;border-style:dashed;border-color:rgba(var(--gold-rgb),.20);animation:spinRev 40s linear infinite} .logo-ring.r3{inset:24%;border-color:rgba(0,136,255,.20);animation:spin 18s linear infinite} .logo-pulse{position:absolute;inset:26%;border-radius:50%;border:1px solid var(--gold);animation:ringPulse 3.4s ease-out infinite} .logo-pulse.d2{animation-delay:1.1s} .logo-pulse.d3{animation-delay:2.2s} .logo-chip{position:absolute;font-family:var(--fm);font-size:8.5px;letter-spacing:1.1px;max-width:46%;overflow:hidden;text-overflow:ellipsis;color:var(--gold);background:rgba(17,27,46,.9);border:1px solid var(--line-hi);padding:4px 10px;border-radius:999px;white-space:nowrap;backdrop-filter:blur(6px);animation:floatY 5s ease-in-out infinite} body.light-mode .logo-chip{background:rgba(255,255,255,.92)} .logo-chip.c1{top:6%;left:50%;transform:translateX(-50%)} .logo-chip.c2{top:43%;right:1%;animation-delay:.7s} .logo-chip.c3{bottom:8%;left:50%;transform:translateX(-50%);animation-delay:1.4s} .logo-chip.c4{top:43%;left:1%;animation-delay:2.1s} /* ========================================================== BUTTONS ========================================================== */ .btn-gold,.btn-ghost{display:inline-flex;align-items:center;gap:9px;font-family:var(--fb);font-size:14px;font-weight:600;padding:13px 27px;border-radius:999px;cursor:pointer;transition:all .3s var(--ease);border:1px solid transparent} .btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-dk));color:var(--on-gold);box-shadow:0 6px 22px rgba(var(--gold-rgb),.26)} .btn-gold:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(var(--gold-rgb),.42);color:var(--on-gold)} .btn-ghost{background:transparent;color:var(--text);border-color:var(--line)} .btn-ghost:hover{color:var(--gold);border-color:var(--line-hi);background:rgba(var(--gold-rgb),.07);transform:translateY(-3px)} /* ========================================================== STATS BAR ========================================================== */ .stats-bar{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .stats-bar .container{display:grid;grid-template-columns:repeat(4,1fr)} .stat-item{padding:34px 22px;text-align:center;border-right:1px solid var(--line);position:relative;transition:background .3s} .stat-item:last-child{border-right:none} .stat-item::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .35s} .stat-item:hover{background:rgba(var(--gold-rgb),.04)} .stat-item:hover::before{opacity:1} .stat-num{font-family:var(--fd);font-size:34px;font-weight:700;color:var(--gold);line-height:1;display:block} .stat-label{font-family:var(--fm);font-size:10px;letter-spacing:1.7px;text-transform:uppercase;color:var(--muted);margin-top:7px;display:block} /* ========================================================== SECTIONS ========================================================== */ section{padding:96px 0;border-bottom:1px solid var(--line)} .sec-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:13px} .sec-title{font-size:clamp(27px,3.9vw,43px);font-weight:700;letter-spacing:-1.2px;line-height:1.12;color:var(--ink);margin-bottom:15px} .sec-sub{font-size:16.5px;color:var(--muted);max-width:660px;line-height:1.8;margin-bottom:52px} /* ========================================================== ABOUT ========================================================== */ .about-p{font-size:15.5px;color:var(--text);line-height:1.85;margin-bottom:18px;padding-left:20px;border-left:1px solid var(--line);transition:border-color .3s,padding-left .3s} .about-p:hover{border-left-color:var(--gold);padding-left:25px} .about-p b{color:var(--ink);font-weight:600} .mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:14px;margin-top:30px} .mini-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:18px 14px;text-align:center;transition:all .35s var(--ease)} .mini-card:hover{border-color:var(--line-hi);transform:translateY(-5px);background:var(--card-hi)} .mini-card .n{font-family:var(--fd);font-size:21px;font-weight:700;color:var(--gold);display:block;line-height:1} .mini-card .l{font-family:var(--fm);font-size:9px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin-top:6px;display:block} .disc-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 30px;position:relative;overflow:hidden} .disc-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)} .disc-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)} .disc-row:last-child{border-bottom:none} .disc-ico{width:40px;height:40px;border-radius:11px;background:rgba(var(--gold-rgb),.09);border:1px solid var(--line-hi);display:grid;place-items:center;color:var(--gold);font-size:16px;flex-shrink:0;transition:all .35s var(--bounce)} .disc-row:hover .disc-ico{transform:scale(1.13) rotate(-8deg);background:rgba(var(--gold-rgb),.18)} .disc-txt strong{display:block;font-family:var(--fd);font-size:14.5px;color:var(--ink);font-weight:600} .disc-txt span{font-size:12.5px;color:var(--muted)} /* SOFTWARE MARQUEE */ /* Marquee — dulu memakai mask-image + :hover polos. Di layar sentuh :hover "nyangkut" sehingga animasi berhenti permanen, dan mask-image pada layer selebar ini kadang gagal dikomposit (isi hilang). Sekarang: fade pakai pseudo-element, pause hanya di perangkat ber-hover. */ .mq-wrap{--mq-fade:var(--bg);position:relative;overflow:hidden;margin-top:34px;padding:6px 0} .mq-wrap::before,.mq-wrap::after{content:"";position:absolute;top:0;bottom:0;width:9%; z-index:2;pointer-events:none} .mq-wrap::before{left:0;background:linear-gradient(90deg,var(--mq-fade),transparent)} .mq-wrap::after{right:0;background:linear-gradient(270deg,var(--mq-fade),transparent)} /* marquee di dalam kartu profil: fade ikut warna kartu */ .pf-sec .mq-wrap{--mq-fade:var(--card)} /* animasi TIDAK langsung jalan — baru start setelah isi track ada (.mq-go). Dulu animasi mulai saat track masih kosong (lebar 0), sehingga translateX(-50%) = 0 dan marquee diam. Di HP timingnya beda-beda, makanya kadang jalan kadang tidak. */ .mq-track{display:flex;gap:12px;width:max-content; will-change:transform;transform:translateZ(0);backface-visibility:hidden} .mq-track.mq-go{animation:marquee var(--mq-dur,34s) linear infinite} @media (hover:hover) and (pointer:fine){ .mq-wrap:hover .mq-track.mq-go{animation-play-state:paused} } @media (prefers-reduced-motion:reduce){ .mq-track.mq-go{animation:none} .mq-wrap{overflow-x:auto} } .sw-pill{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 17px;white-space:nowrap;transition:all .3s} .sw-pill:hover{border-color:var(--line-hi);background:var(--card-hi);transform:translateY(-3px)} .sw-pill i{color:var(--gold);font-size:14px} .sw-pill span{font-size:12.5px;font-weight:500;color:var(--text)} /* ========================================================== SERVICES ========================================================== */ .svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px} .svc-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;position:relative;overflow:hidden;height:100%} .svc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .35s} .svc-card::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(var(--gold-rgb),.07),transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none} .svc-card:hover::before,.svc-card:hover::after{opacity:1} .svc-card:hover{border-color:var(--line-hi);background:var(--card-hi)} .svc-ico{width:52px;height:52px;border-radius:14px;background:rgba(var(--gold-rgb),.09);border:1px solid var(--line-hi);display:grid;place-items:center;color:var(--gold);font-size:21px;margin-bottom:19px;transition:all .4s var(--bounce)} .svc-card:hover .svc-ico{transform:scale(1.12) rotate(-9deg);background:rgba(var(--gold-rgb),.2);animation:iconPop .6s var(--bounce)} .svc-card h4{font-size:17.5px;font-weight:600;color:var(--ink);margin-bottom:11px;letter-spacing:-.4px} .svc-card p{font-size:13.8px;color:var(--muted);line-height:1.78} .svc-num{position:absolute;top:20px;right:24px;font-family:var(--fm);font-size:11px;color:var(--line-hi);letter-spacing:1px} .pkg-box{background:var(--card);border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:0 var(--r) var(--r) 0;padding:26px 28px;margin-bottom:26px;transition:all .35s} .pkg-box:hover{background:var(--card-hi);transform:translateX(5px)} .pkg-box h4{font-size:18px;font-weight:600;color:var(--ink);margin-bottom:10px} .pkg-box p{font-size:14.2px;color:var(--muted);line-height:1.8} /* ========================================================== GALLERY ========================================================== */ .gf-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:32px;padding:17px 20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)} .gf-lbl{font-family:var(--fm);font-size:9.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold);margin-right:6px;flex-shrink:0} .gf-tab{padding:9px 17px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);font-family:var(--fb);font-size:12.8px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .28s} .gf-tab:hover{border-color:var(--line-hi);color:var(--gold);background:rgba(var(--gold-rgb),.07);transform:translateY(-2px)} .gf-tab.active{background:linear-gradient(135deg,var(--gold),var(--gold-dk));border-color:transparent;color:var(--on-gold);font-weight:700;box-shadow:0 5px 16px rgba(var(--gold-rgb),.3)} .gf-tab .c{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:5px;font-family:var(--fm);font-size:9.5px;font-weight:700;background:rgba(var(--gold-rgb),.14);color:var(--gold)} .gf-tab.active .c{background:rgba(7,11,20,.22);color:var(--on-gold)} .g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:18px} .g-item{cursor:pointer;animation:stagIn .5s var(--ease) both} .g-box{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--card);transition:all .42s var(--ease)} .g-box img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .45s} .g-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,11,20,.9),rgba(7,11,20,.15) 55%,transparent);opacity:0;transition:opacity .4s;display:grid;place-items:center} .g-zoom{width:46px;height:46px;border-radius:50%;background:rgba(var(--gold-rgb),.16);border:1.5px solid var(--gold);color:var(--gold);display:grid;place-items:center;font-size:15px;transform:scale(.6) rotate(-30deg);transition:transform .45s var(--bounce);backdrop-filter:blur(4px)} .g-item:hover .g-box{border-color:var(--gold);transform:translateY(-7px);box-shadow:0 22px 50px rgba(0,0,0,.5)} .g-item:hover .g-box img{transform:scale(1.1);filter:brightness(.5)} .g-item:hover .g-ov{opacity:1} .g-item:hover .g-zoom{transform:scale(1) rotate(0)} .g-cap{font-family:var(--fm);font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--text);padding:11px 3px 0;transition:color .3s;line-height:1.5} .g-item:hover .g-cap{color:var(--gold)} .g-badge{position:absolute;top:11px;left:11px;font-family:var(--fm);font-size:8.5px;letter-spacing:1.2px;text-transform:uppercase;padding:3px 9px;border-radius:5px;background:rgba(7,11,20,.82);border:1px solid var(--line-hi);color:var(--gold);backdrop-filter:blur(6px);z-index:2} /* MODAL */ #gModal{position:fixed;inset:0;z-index:300;display:none;padding:26px;overflow-y:auto;background:rgba(3,6,12,.9);backdrop-filter:blur(9px);animation:fadeIn .3s ease} #gModal.open{display:block} .gm-box{max-width:1080px;margin:2vh auto;background:var(--card);border:1px solid var(--line-hi);border-radius:var(--r-lg);overflow:hidden;animation:modalIn .5s var(--ease);display:grid;grid-template-columns:1.15fr 1fr} .gm-img{background:#05080f;display:grid;place-items:center;min-height:300px} .gm-img img{width:100%;height:100%;max-height:78vh;object-fit:contain} .gm-body{padding:32px 30px;max-height:78vh;overflow-y:auto} .gm-body h4{font-size:21px;font-weight:700;color:var(--gold);margin-bottom:14px;letter-spacing:-.4px} .gm-body h5{font-family:var(--fm);font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold);margin:20px 0 11px} .gm-body p{font-size:14px;color:var(--text);line-height:1.85;margin-bottom:12px} .gm-body b{color:var(--ink)} .gm-body ul{list-style:none;display:flex;flex-direction:column;gap:9px} .gm-body li{font-size:13.5px;color:var(--text);padding-left:20px;position:relative;line-height:1.7} .gm-body li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:1px;background:var(--gold);transform:rotate(45deg)} .gm-close{position:absolute;top:18px;right:22px;width:40px;height:40px;border-radius:50%;background:rgba(7,11,20,.85);border:1px solid var(--line-hi);color:var(--gold);font-size:17px;cursor:pointer;z-index:5;transition:all .3s} .gm-close:hover{transform:rotate(90deg) scale(1.1);background:var(--gold);color:var(--on-gold)} .gm-tag{display:inline-flex;font-family:var(--fm);font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);border:1px solid var(--line-hi);padding:4px 11px;border-radius:999px;margin-bottom:14px} /* ========================================================== CONTACT + FOOTER (complete) ========================================================== */ #contact{border-bottom:none} .ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start} .ct-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)} .ct-row:last-of-type{border-bottom:none} .ct-ico{width:42px;height:42px;border-radius:12px;background:rgba(var(--gold-rgb),.09);border:1px solid var(--line-hi);display:grid;place-items:center;color:var(--gold);flex-shrink:0;transition:all .35s var(--bounce)} .ct-row:hover .ct-ico{transform:scale(1.12) rotate(-8deg);background:rgba(var(--gold-rgb),.19)} .ct-row .k{font-family:var(--fm);font-size:9px;letter-spacing:1.7px;text-transform:uppercase;color:var(--muted);display:block} .ct-row .v{font-size:14.5px;color:var(--ink);font-weight:500} .ct-form{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 30px} .ct-form h4{font-size:19px;font-weight:600;margin-bottom:20px;color:var(--ink)} .ct-form label{font-family:var(--fm);font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px} .ct-form input,.ct-form textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 15px;color:var(--ink);font-family:var(--fb);font-size:14px;outline:none;transition:all .3s;margin-bottom:15px} body.light-mode .ct-form input,body.light-mode .ct-form textarea{background:#fff} .ct-form input:focus,.ct-form textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.12)} .ct-form textarea{resize:vertical;min-height:110px} .soc-row{display:flex;gap:11px;margin-top:24px} .soc-row a{width:42px;height:42px;border-radius:12px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--text);font-size:16px;transition:all .35s var(--bounce)} .soc-row a:hover{color:var(--on-gold);background:var(--gold);border-color:var(--gold);transform:translateY(-5px) rotate(-8deg)} footer.site-foot{background:var(--bg2);border-top:1px solid var(--line);padding:62px 0 0} .foot-grid{display:grid;grid-template-columns:1.25fr 1fr 1.35fr;gap:44px} .foot-h{font-family:var(--fm);font-size:10px;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold);margin-bottom:18px} .foot-brand{display:flex;align-items:center;gap:11px;margin-bottom:15px} .foot-brand img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 0 9px rgba(var(--gold-rgb),.4))} .foot-brand span{font-family:var(--fd);font-size:19px;font-weight:700;color:var(--ink)} .foot-brand span i{color:var(--gold);font-style:normal} footer.site-foot address{font-style:normal;font-size:13.8px;color:var(--text);line-height:2} footer.site-foot address b{color:var(--ink);font-weight:600} .foot-links{list-style:none;display:flex;flex-direction:column;gap:10px} .foot-links a{font-size:13.8px;color:var(--text);display:inline-flex;align-items:center;gap:9px;transition:all .28s} .foot-links a::before{content:'';width:5px;height:5px;background:var(--gold);border-radius:1px;transform:rotate(45deg);opacity:.5;transition:opacity .28s} .foot-links a:hover{color:var(--gold);transform:translateX(5px)} .foot-links a:hover::before{opacity:1} .foot-seo{font-size:12.8px;color:var(--muted);line-height:1.95} .foot-bot{margin-top:52px;border-top:1px solid var(--line);padding:22px 0;text-align:center;font-size:12.8px;color:var(--muted)} .foot-bot b{color:var(--gold);font-weight:600} #toTop{position:fixed;right:24px;bottom:26px;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--gold),var(--gold-dk));color:var(--on-gold);border:none;cursor:pointer;font-size:16px;z-index:150;opacity:0;transform:translateY(22px) scale(.85);transition:all .4s var(--bounce);box-shadow:0 8px 26px rgba(var(--gold-rgb),.36)} #toTop.show{opacity:1;transform:none} #toTop:hover{transform:translateY(-4px) scale(1.07)} /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width:991px){ .logo-stage{max-width:320px;margin-top:44px} .logo-chip{font-size:8px;letter-spacing:.9px;padding:3px 8px} .ct-grid,.foot-grid{grid-template-columns:1fr;gap:34px} .gm-box{grid-template-columns:1fr} .gm-img img{max-height:44vh} .navbar-nav{padding:14px 0;gap:2px} .navbar-nav .nav-link{padding:9px 12px!important} } @media (max-width:767px){ section{padding:66px 0} .stats-bar .container{grid-template-columns:repeat(2,1fr)} .stat-item:nth-child(2){border-right:none} .stat-item:nth-child(1),.stat-item:nth-child(2){border-bottom:1px solid var(--line)} .stat-num{font-size:28px} .hero{min-height:auto;padding-top:calc(var(--nav-h) + 30px)} .g-grid{grid-template-columns:repeat(2,1fr);gap:13px} .gf-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:13px 15px} .gf-bar::-webkit-scrollbar{display:none} .gf-tab{flex-shrink:0} .gf-lbl{display:none} #spot{display:none} .gm-body{padding:24px 22px} } @media (max-width:480px){ .g-grid{grid-template-columns:1fr} } ::-webkit-scrollbar{width:9px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:rgba(var(--gold-rgb),.3);border-radius:5px} ::-webkit-scrollbar-thumb:hover{background:var(--gold)} /* ========================================================== SUBPAGE / PROFIL COMPONENTS ========================================================== */ .page-hero{padding:calc(var(--nav-h) + 62px) 0 62px;position:relative;overflow:hidden; background:radial-gradient(ellipse 70% 60% at 22% 40%,rgba(var(--gold-rgb),.10) 0%,transparent 62%), radial-gradient(ellipse 50% 50% at 88% 80%,rgba(0,136,255,.08) 0%,transparent 55%),transparent} .page-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-hi),transparent)} .crumb{display:flex;align-items:center;gap:9px;font-family:var(--fm);font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--muted);margin-bottom:22px} .crumb a{color:var(--muted);transition:color .25s} .crumb a:hover{color:var(--gold)} .crumb i{font-size:8px;color:var(--line-hi)} /* IDENTITY */ .pf-id{display:flex;align-items:center;gap:40px;flex-wrap:wrap} .pf-photo{position:relative;flex-shrink:0} /* cincin TIDAK berputar — dulu animasi spin di sini ikut memutar fotonya */ .pf-ring{position:relative;width:184px;height:184px;border-radius:50%;padding:5px; background:linear-gradient(140deg,var(--gold-lt),var(--gold) 42%,var(--gold-dk)); box-shadow:0 10px 34px rgba(0,0,0,.38), 0 0 0 1px rgba(var(--gold-rgb),.22)} /* halo tipis statis di luar cincin */ .pf-ring::before{content:"";position:absolute;inset:-9px;border-radius:50%; border:1px solid rgba(var(--gold-rgb),.22);pointer-events:none} .pf-ring-in{width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--card);border:2px solid var(--bg);display:grid;place-items:center} .pf-ring-in img{width:100%;height:100%;object-fit:cover} .pf-fallback{width:100%;height:100%;display:grid;place-items:center;font-size:56px;color:var(--gold);background:var(--card)} .pf-status{position:absolute;bottom:14px;right:14px;width:20px;height:20px;border-radius:50%;background:var(--green);border:3.5px solid var(--bg);animation:pulseDot 2.2s infinite} .pf-mono{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:10px;letter-spacing:2.8px;text-transform:uppercase;color:var(--gold);border:1px solid var(--line-hi);background:rgba(var(--gold-rgb),.05);padding:6px 16px;border-radius:999px;margin-bottom:16px} .pf-name{font-size:clamp(30px,4.6vw,52px);font-weight:700;letter-spacing:-1.8px;line-height:1.05;color:var(--ink);margin-bottom:8px} .pf-role{font-family:var(--fm);font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-bottom:20px} .pf-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px} .pf-chip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text);background:var(--card);border:1px solid var(--line);padding:7px 15px;border-radius:999px;transition:all .3s} .pf-chip i{color:var(--gold);font-size:12px} .pf-chip:hover{border-color:var(--line-hi);transform:translateY(-2px);background:var(--card-hi)} /* SECTION CARD */ .pf-sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 30px;margin-bottom:24px;position:relative;overflow:hidden} .pf-sec::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .4s} .pf-sec:hover::before{opacity:1} .pf-sec-t{display:flex;align-items:center;gap:11px;font-family:var(--fd);font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.3px;padding-bottom:15px;margin-bottom:20px;border-bottom:1px solid var(--line)} .pf-sec-t i{width:34px;height:34px;border-radius:10px;background:rgba(var(--gold-rgb),.09);border:1px solid var(--line-hi);display:grid;place-items:center;color:var(--gold);font-size:14px;flex-shrink:0;transition:all .35s var(--bounce)} .pf-sec:hover .pf-sec-t i{transform:rotate(-9deg) scale(1.08);background:rgba(var(--gold-rgb),.18)} .pf-txt{font-size:14.5px;color:var(--text);line-height:1.9} .pf-txt strong{color:var(--ink);font-weight:600} .pf-txt em{color:var(--gold);font-style:normal} /* TIMELINE (education + experience) */ .tl{position:relative;padding-left:26px} .tl::before{content:'';position:absolute;left:6px;top:5px;bottom:5px;width:1px;background:linear-gradient(180deg,var(--gold),var(--line),transparent)} .tl-item{position:relative;padding-bottom:24px} .tl-item:last-child{padding-bottom:0} .tl-item::before{content:'';position:absolute;left:-24px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.16);transition:all .3s} .tl-item:hover::before{transform:scale(1.35);box-shadow:0 0 0 5px rgba(var(--gold-rgb),.22)} .tl-year{display:inline-block;font-family:var(--fm);font-size:9.5px;letter-spacing:1.6px;color:var(--gold);background:rgba(var(--gold-rgb),.08);border:1px solid var(--line-hi);padding:3px 10px;border-radius:5px;margin-bottom:8px} .tl-h{font-family:var(--fd);font-size:15.5px;font-weight:600;color:var(--ink);margin-bottom:4px} .tl-sub{font-size:13px;color:var(--muted)} .tl-co{font-size:13.5px;color:var(--gold);font-weight:500;margin-bottom:5px} .tl-loc{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--fm);font-size:10.5px;color:var(--muted);margin-bottom:11px} .tl-loc i{color:var(--gold);margin-right:5px} .tl-proj{list-style:none;display:flex;flex-direction:column;gap:7px} .tl-proj li{font-size:13.2px;color:var(--text);padding-left:18px;position:relative;line-height:1.68} .tl-proj li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;background:var(--gold);border-radius:1px;transform:rotate(45deg);opacity:.65} .tl-proj li strong{color:var(--ink);font-weight:600} /* SKILL LIST */ .sk-list{display:flex;flex-direction:column;gap:10px} .sk-item{font-size:13.5px;color:var(--text);line-height:1.72;background:var(--bg2);border:1px solid var(--line);border-left:2px solid var(--line-hi);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:13px 17px;transition:all .3s} .sk-item:hover{border-left-color:var(--gold);background:var(--card-hi);transform:translateX(5px)} .sk-item strong{color:var(--ink);font-weight:600} .sk-item em{color:var(--gold);font-style:normal;font-family:var(--fm);font-size:11.5px} /* CERT GRID */ .cert-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} @media (max-width:1199px){.cert-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} .cert-card{cursor:pointer;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:all .4s var(--ease);position:relative} .cert-card:hover{border-color:var(--gold);transform:translateY(-7px);box-shadow:0 22px 50px rgba(0,0,0,.45)} .cert-imgw{position:relative;aspect-ratio:4/3;background:#05080f;overflow:hidden} .cert-imgw img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .4s} .cert-card:hover .cert-imgw img{transform:scale(1.09);filter:brightness(.5)} .cert-fb{width:100%;height:100%;display:grid;place-items:center;font-size:42px;color:var(--gold)} .cert-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,11,20,.86),transparent 60%);opacity:0;transition:opacity .4s;display:grid;place-items:center} .cert-card:hover .cert-ov{opacity:1} .cert-zoom{width:44px;height:44px;border-radius:50%;background:rgba(var(--gold-rgb),.18);border:1.5px solid var(--gold);color:var(--gold);display:grid;place-items:center;transform:scale(.6) rotate(-30deg);transition:transform .45s var(--bounce)} .cert-card:hover .cert-zoom{transform:scale(1) rotate(0)} .cert-cap{padding:15px 17px} .cert-lbl{font-family:var(--fm);font-size:9px;letter-spacing:1.7px;text-transform:uppercase;color:var(--gold);margin-bottom:6px} .cert-ttl{font-family:var(--fd);font-size:14px;font-weight:600;color:var(--ink);line-height:1.4;margin-bottom:4px} .cert-iss{font-size:11.5px;color:var(--muted)} /* CERT MODAL */ #certModal{position:fixed;inset:0;z-index:300;display:none;padding:26px;overflow-y:auto;background:rgba(3,6,12,.9);backdrop-filter:blur(9px);animation:fadeIn .3s ease} #certModal.open{display:block} .cm-box{max-width:940px;margin:3vh auto;background:var(--card);border:1px solid var(--line-hi);border-radius:var(--r-lg);overflow:hidden;animation:modalIn .5s var(--ease);position:relative} .cm-img{background:#05080f;display:grid;place-items:center;max-height:66vh} .cm-img img{width:100%;max-height:66vh;object-fit:contain} .cm-body{padding:26px 30px} .cm-body h4{font-size:19px;font-weight:700;color:var(--gold);margin-bottom:9px} .cm-body p{font-size:14px;color:var(--text);line-height:1.85} .cm-iss{display:inline-flex;font-family:var(--fm);font-size:9.5px;letter-spacing:1.7px;text-transform:uppercase;color:var(--gold);border:1px solid var(--line-hi);padding:4px 12px;border-radius:999px;margin-bottom:13px} .cm-close{position:absolute;top:16px;right:18px;width:40px;height:40px;border-radius:50%;background:rgba(7,11,20,.85);border:1px solid var(--line-hi);color:var(--gold);font-size:16px;cursor:pointer;z-index:5;transition:all .3s} .cm-close:hover{transform:rotate(90deg) scale(1.1);background:var(--gold);color:var(--on-gold)} @media (max-width:767px){ .page-hero{padding:calc(var(--nav-h) + 40px) 0 44px} .pf-id{gap:26px;justify-content:center;text-align:center;flex-direction:column} .pf-meta,.pf-cta{justify-content:center} .pf-ring{width:148px;height:148px} .pf-sec{padding:24px 20px} .cert-grid{grid-template-columns:1fr} } /* ========================================================== DISCIPLINE / ARTICLE SUBPAGES (plumbing · pemadam · hvac · elektrikal · elektronik) ========================================================== */ /* --- sub-navbar: glass bubble, sejalan dengan .navbar --------------- Opacity sengaja lebih pekat (.72) daripada navbar (.55): bar ini melintas di atas tabel angka padat, bukan di atas hero. Blur juga lebih rendah (16px vs 26px) karena dua backdrop-filter sticky me-repaint tiap frame scroll. Di mobile glass dimatikan total. */ .sub-navbar{ position:sticky; top:calc(var(--nav-h) + 22px); z-index:90; width:calc(100% - 22px); max-width:1210px; margin:14px auto 0; border-radius:999px; overflow:hidden; background:rgba(20,30,48,.72); -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%); border:1px solid rgba(255,255,255,.10); box-shadow:0 8px 24px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.13), inset 0 -1px 0 rgba(0,0,0,.16); transition:background .4s, border-color .4s, box-shadow .4s; } body.light-mode .sub-navbar{ background:rgba(255,255,255,.74); border-color:rgba(11,17,32,.09); box-shadow:0 8px 22px rgba(11,17,32,.10), inset 0 1px 0 rgba(255,255,255,.9); } /* specular highlight, meniru .navbar::before */ .sub-navbar::before{ content:''; position:absolute; inset:1px 1px auto 1px; height:52%; border-radius:999px 999px 40% 40%/999px 999px 100% 100%; background:linear-gradient(180deg,rgba(255,255,255,.09),transparent); pointer-events:none; z-index:0; } body.light-mode .sub-navbar::before{background:linear-gradient(180deg,rgba(255,255,255,.7),transparent)} .sub-navbar>.container{max-width:100%;padding:0 8px;position:relative;z-index:1} .sub-nav-links{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:7px 0} .sub-nav-links::-webkit-scrollbar{display:none} .sub-nav-link{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;font-family:var(--fb);font-size:12.5px;font-weight:500;color:var(--muted);border:1px solid var(--line);background:transparent;padding:8px 16px;border-radius:999px;transition:all .28s} .sub-nav-link i{font-size:12px;color:var(--gold);opacity:.7;transition:opacity .28s} .sub-nav-link:hover{color:var(--ink);border-color:var(--line-hi);background:rgba(var(--gold-rgb),.06);transform:translateY(-2px)} .sub-nav-link:hover i{opacity:1} .sub-nav-link.active{background:linear-gradient(135deg,var(--gold),var(--gold-dk));border-color:transparent;color:var(--on-gold);font-weight:700;box-shadow:0 5px 16px rgba(var(--gold-rgb),.28)} .sub-nav-link.active i{color:var(--on-gold);opacity:1} /* chip non-aktif dinaikkan dari --muted: di atas latar bergerak #6a7b9e tenggelam, teks kecil 12,5px butuh kontras lebih */ .sub-nav-link{color:#8b9ab5} body.light-mode .sub-nav-link{color:#4d5b73} /* mobile: matikan glass — backdrop-filter sticky mahal saat scroll */ @media (max-width:767.98px){ .sub-navbar{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(16,24,40,.96); box-shadow:0 6px 18px rgba(0,0,0,.34); } body.light-mode .sub-navbar{background:rgba(244,247,251,.97)} .sub-navbar::before{display:none} } @media (prefers-reduced-motion:reduce){ .sub-navbar{transition:none} } /* PAGE HERO (article) */ .page-hero-content{text-align:center;max-width:760px;margin-inline:auto;position:relative;z-index:2} .page-hero-icon{width:78px;height:78px;border-radius:22px;margin:0 auto 22px;display:grid;place-items:center;font-size:32px;color:var(--gold);background:rgba(var(--gold-rgb),.09);border:1px solid var(--line-hi);animation:glowBreath 4.6s ease-in-out infinite} .page-hero h1{font-size:clamp(30px,4.6vw,52px);font-weight:700;letter-spacing:-1.8px;line-height:1.08;color:var(--ink);margin-bottom:16px} .page-hero h1 span{background:linear-gradient(100deg,var(--gold-dk),var(--gold-lt),var(--gold),var(--gold-lt),var(--gold-dk));background-size:280% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradShift 7s ease-in-out infinite} .page-hero p{font-size:16.5px;color:var(--muted);line-height:1.85;max-width:660px;margin-inline:auto} /* CONTENT SECTIONS */ .subpage-content{padding:64px 0 90px} .content-section{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 32px;margin-bottom:26px;position:relative;overflow:hidden} .content-section::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .4s} .content-section:hover::before{opacity:1} .content-section>p{font-size:14.8px;color:var(--text);line-height:1.9;margin-bottom:14px} .content-section>p strong{color:var(--ink);font-weight:600} .section-header-pill{display:inline-flex;align-items:center;gap:11px;font-family:var(--fd);font-size:15.5px;font-weight:600;color:var(--ink);letter-spacing:-.3px;padding-bottom:15px;margin-bottom:20px;border-bottom:1px solid var(--line);width:100%} .section-header-pill i{width:36px;height:36px;border-radius:11px;background:rgba(var(--gold-rgb),.09);border:1px solid var(--line-hi);display:grid;place-items:center;color:var(--gold);font-size:14px;flex-shrink:0;transition:all .35s var(--bounce)} .content-section:hover .section-header-pill i{transform:rotate(-9deg) scale(1.08);background:rgba(var(--gold-rgb),.18)} /* INFO CARDS */ .info-cards-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:18px;margin-top:18px} .info-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;transition:all .35s var(--ease)} .info-card:hover{border-color:var(--line-hi);transform:translateY(-6px);box-shadow:0 18px 44px rgba(0,0,0,.34);background:var(--card-hi)} .info-card-icon,.info-card-icon.green,.info-card-icon.cyan,.info-card-icon.orange,.info-card-icon.yellow,.info-card-icon.purple{ width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:19px;margin-bottom:16px; color:var(--gold);background:rgba(var(--gold-rgb),.09);border:1px solid var(--line-hi);transition:all .35s var(--bounce)} .info-card:hover .info-card-icon{transform:rotate(-9deg) scale(1.1);background:rgba(var(--gold-rgb),.19)} .info-card h5{font-family:var(--fd);font-size:15px;font-weight:600;color:var(--ink);margin-bottom:12px;letter-spacing:-.2px} .info-card ul{list-style:none;display:flex;flex-direction:column;gap:8px} .info-card li{font-size:13px;color:var(--text);padding-left:17px;position:relative;line-height:1.68} .info-card li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;background:var(--gold);border-radius:1px;transform:rotate(45deg);opacity:.6} /* TABLES */ .content-table-wrap{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:18px} .table-title{font-family:var(--fm);font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold);padding:15px 20px;margin:0;border-bottom:1px solid var(--line);background:rgba(var(--gold-rgb),.04)} .content-table{width:100%;border-collapse:collapse;font-size:13.2px;display:block;overflow-x:auto;white-space:normal} .content-table thead th{font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);text-align:left;padding:13px 18px;background:rgba(var(--gold-rgb),.05);border-bottom:1px solid var(--line);white-space:nowrap} .content-table tbody td{padding:13px 18px;color:var(--text);border-bottom:1px solid var(--line);line-height:1.7;vertical-align:top;min-width:130px} .content-table tbody tr:last-child td{border-bottom:none} .content-table tbody tr{transition:background .25s} .content-table tbody tr:hover{background:rgba(var(--gold-rgb),.045)} .content-table td strong{color:var(--ink);font-weight:600} /* HIGHLIGHT BOX */ .highlight-box{background:var(--bg2);border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:0 var(--r) var(--r) 0;padding:24px 26px;margin-top:20px;transition:all .35s} .highlight-box:hover{background:var(--card-hi);transform:translateX(5px)} .highlight-title{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-size:14.5px;font-weight:600;color:var(--gold);margin-bottom:14px} .highlight-box ul{list-style:none;display:flex;flex-direction:column;gap:10px} .highlight-box li{font-size:13.4px;color:var(--text);padding-left:18px;position:relative;line-height:1.75} .highlight-box li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;background:var(--gold);border-radius:1px;transform:rotate(45deg);opacity:.65} .highlight-box li strong{color:var(--ink);font-weight:600} /* STANDARDS */ .standards-box{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)} .standards-title{display:flex;align-items:center;gap:9px;font-family:var(--fm);font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);margin-bottom:12px} .standards-title i{color:var(--gold)} .standards-list{display:flex;gap:8px;flex-wrap:wrap} .std-tag{display:inline-flex;align-items:center;font-family:var(--fm);font-size:10.5px;letter-spacing:.6px;color:var(--gold);background:rgba(var(--gold-rgb),.07);border:1px solid var(--line-hi);padding:5px 12px;border-radius:6px;transition:all .25s} .std-tag:hover{background:rgba(var(--gold-rgb),.16);transform:translateY(-2px)} @media (max-width:767px){ .sub-navbar{top:calc(var(--nav-h) + 20px)} .subpage-content{padding:40px 0 64px} .content-section{padding:24px 19px;border-radius:var(--r)} .page-hero-icon{width:64px;height:64px;font-size:26px;border-radius:18px} .content-table{font-size:12.4px} .content-table thead th,.content-table tbody td{padding:11px 14px} .highlight-box{padding:19px 18px} } /* ========================================================== PRELOADER — sederhana: logo + 1 cincin ========================================================== */ #mepLoader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:var(--bg); transition:opacity .45s ease,visibility .45s} #mepLoader.done{opacity:0;visibility:hidden;pointer-events:none} .ml-stage{position:relative;width:96px;height:96px;display:grid;place-items:center} .ml-logo{width:52px;height:52px;object-fit:contain;z-index:2;opacity:.95} .ml-ring{position:absolute;inset:0;border-radius:50%; border:2px solid rgba(var(--gold-rgb),.16);border-top-color:var(--gold); animation:spin .85s linear infinite} @media (prefers-reduced-motion:reduce){ .ml-ring{animation:none} } /* ========================================================== GALLERY.HTML — grid foto koleksi ========================================================== */ .ph-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:30px;padding:17px 20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)} .ph-count{margin-left:auto;font-family:var(--fm);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);flex-shrink:0} .ph-count b{color:var(--gold);font-size:13px} /* grid rapat, responsif */ .ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px} .ph-grid.dense{grid-auto-flow:dense} .ph-item{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--card); cursor:pointer;aspect-ratio:4/3;transition:all .4s var(--ease);animation:stagIn .5s var(--ease) both} .ph-item.tall{grid-row:span 2;aspect-ratio:3/4} .ph-item.wide{grid-column:span 2;aspect-ratio:16/9} .ph-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .4s} .ph-item:hover{border-color:var(--gold);transform:translateY(-6px);box-shadow:0 22px 50px rgba(0,0,0,.48);z-index:2} .ph-item:hover img{transform:scale(1.08);filter:brightness(.5)} .ph-ov{position:absolute;inset:0;opacity:0;transition:opacity .4s;display:flex;flex-direction:column;justify-content:flex-end; padding:15px;background:linear-gradient(to top,rgba(7,11,20,.92),rgba(7,11,20,.25) 55%,transparent)} .ph-item:hover .ph-ov{opacity:1} .ph-ov .t{font-family:var(--fd);font-size:14px;font-weight:600;color:var(--ink);line-height:1.35;margin-bottom:3px} .ph-ov .s{font-family:var(--fm);font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold)} .ph-zoom{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%; background:rgba(7,11,20,.62);border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;font-size:12px; transform:scale(.5) rotate(-40deg);transition:transform .45s var(--bounce);backdrop-filter:blur(4px)} .ph-item:hover .ph-zoom{transform:scale(1) rotate(0)} .ph-tag{position:absolute;top:12px;left:12px;font-family:var(--fm);font-size:8.5px;letter-spacing:1.2px;text-transform:uppercase; padding:4px 9px;border-radius:5px;background:rgba(7,11,20,.78);border:1px solid var(--line-hi);color:var(--gold); backdrop-filter:blur(6px);z-index:2} /* placeholder saat belum ada foto */ .ph-empty{grid-column:1/-1;text-align:center;padding:70px 24px;background:var(--card);border:1px dashed var(--line-hi);border-radius:var(--r-lg)} .ph-empty i{font-size:46px;color:var(--line-hi);display:block;margin-bottom:18px} .ph-empty h4{font-size:18px;color:var(--ink);margin-bottom:10px} .ph-empty p{font-size:13.5px;color:var(--muted);max-width:440px;margin:0 auto;line-height:1.85} .ph-empty code{font-family:var(--fm);font-size:12px;color:var(--gold);background:rgba(var(--gold-rgb),.09); border:1px solid var(--line-hi);padding:2px 7px;border-radius:5px} /* LIGHTBOX */ #phBox{position:fixed;inset:0;z-index:400;display:none;background:rgba(3,6,12,.95);backdrop-filter:blur(10px);animation:fadeIn .3s ease} #phBox.open{display:grid;grid-template-rows:auto 1fr auto} .phb-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 22px;border-bottom:1px solid var(--line)} .phb-title{font-family:var(--fd);font-size:15px;font-weight:600;color:var(--ink)} .phb-sub{font-family:var(--fm);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);margin-top:2px} .phb-idx{font-family:var(--fm);font-size:11px;color:var(--muted);flex-shrink:0} .phb-x{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--line-hi); color:var(--gold);font-size:16px;cursor:pointer;flex-shrink:0;transition:all .3s} .phb-x:hover{transform:rotate(90deg) scale(1.08);background:var(--gold);color:var(--on-gold)} .phb-stage{position:relative;display:grid;place-items:center;padding:20px;overflow:hidden} .phb-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-sm);animation:modalIn .45s var(--ease)} .phb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%; background:rgba(7,11,20,.7);border:1px solid var(--line-hi);color:var(--gold);font-size:17px;cursor:pointer; display:grid;place-items:center;transition:all .28s;backdrop-filter:blur(6px)} .phb-nav:hover{background:var(--gold);color:var(--on-gold);transform:translateY(-50%) scale(1.1)} .phb-nav.prev{left:18px} .phb-nav.next{right:18px} .phb-strip{display:flex;gap:8px;overflow-x:auto;padding:12px 18px;border-top:1px solid var(--line);scrollbar-width:thin} .phb-strip img{width:62px;height:46px;object-fit:cover;border-radius:6px;border:1px solid var(--line); cursor:pointer;flex-shrink:0;opacity:.5;transition:all .25s} .phb-strip img:hover{opacity:.85} .phb-strip img.on{opacity:1;border-color:var(--gold);transform:translateY(-2px)} @media (max-width:767px){ .ph-grid{grid-template-columns:repeat(2,1fr);gap:11px} .ph-item.wide{grid-column:span 2} .ph-item.tall{grid-row:span 1;aspect-ratio:4/3} .ph-toolbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:13px 15px} .ph-toolbar::-webkit-scrollbar{display:none} .ph-count{display:none} .phb-nav{width:40px;height:40px;font-size:14px} .phb-nav.prev{left:8px} .phb-nav.next{right:8px} .phb-strip img{width:52px;height:40px} } @media (max-width:420px){ .ph-grid{grid-template-columns:1fr} .ph-item.wide{grid-column:span 1} } /* ========================================================== TABEL ACUAN (accordion di dalam calc-card) ========================================================== */ .ref-wrap{margin-top:14px;border-top:1px solid var(--line);padding-top:12px} .ref-tog{display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:none;border:none;padding:6px 0; font-family:var(--fm);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);transition:opacity .2s} .ref-tog:hover{opacity:.75} .ref-tog i{transition:transform .3s var(--ease);font-size:9px} .ref-tog.open i{transform:rotate(90deg)} .ref-body{display:none;margin-top:11px;animation:refIn .3s ease} .ref-body.open{display:block} @keyframes refIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .ref-tbl{width:100%;border-collapse:collapse;font-size:12.2px;background:var(--bg2); border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;display:block;overflow-x:auto} .ref-tbl th{font-family:var(--fm);font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--gold); text-align:left;padding:9px 12px;background:rgba(var(--gold-rgb),.06);border-bottom:1px solid var(--line);white-space:nowrap} .ref-tbl td{padding:8px 12px;color:var(--text);border-bottom:1px solid var(--line);line-height:1.55;vertical-align:top} .ref-tbl tr:last-child td{border-bottom:none} .ref-tbl tbody tr:hover{background:rgba(var(--gold-rgb),.04)} .ref-tbl td b,.ref-tbl td strong{color:var(--ink);font-weight:600} .ref-tbl .num{font-family:var(--fm);color:var(--gold);white-space:nowrap} .ref-note{font-size:11.5px;color:var(--muted);line-height:1.7;margin-top:9px;padding-left:13px;position:relative} .ref-note::before{content:'';position:absolute;left:0;top:7px;width:4px;height:4px;background:var(--gold); border-radius:1px;transform:rotate(45deg);opacity:.7} .ref-sub{font-family:var(--fm);font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:13px 0 7px} /* ========================================================== FIX: dropdown