/* PIXEL THEME OVERLAY — orange + white/dark. Menimpa style.css. */
:root{
--px-font:'Silkscreen',monospace;
--px-body:'DotGothic16',monospace;
--px-border:3px solid var(--ink);
--px-shadow:4px 4px 0 var(--ink);
--px-shadow-sm:3px 3px 0 var(--ink);
--px-cycle:0;
/* ===== SISTEM GRID & RITME — satu nilai untuk mobile → desktop =====
Semua ukuran fluid: nilai minimum = tampilan mobile, maksimum = desktop.
Ubah di sini saja kalau mau menggeser seluruh tata letak. */
--px-gutter:clamp(14px, 2.2vw, 24px); /* jarak tepi halaman (semua elemen sejajar) */
--px-maxw:1180px; /* lebar maksimal kontainer */
--px-col:700px; /* lebar kolom konten hero */
--px-cta:420px; /* lebar maksimal blok tombol */
--px-fox:min(72vw, 360px); /* ukuran maskot */
--px-sec:clamp(56px, 8vw, 104px); /* ritme vertikal antar section */
--px-head:640px; /* lebar blok judul section */
--px-gap-xs:clamp(12px, 1.8vw, 18px);
--px-gap-md:clamp(18px, 2.2vw, 26px);
--px-gap-lg:clamp(20px, 2.6vw, 28px);
}
/* transisi font halus saat ganti tiap 5 detik (tanpa animasi font = hemat repaint) */
/* ===== PIXEL INTRO LOADER: rubah memutar + loading bar ===== */
.px-loader{
position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center;
background-color:var(--white);
background-image:radial-gradient(var(--gray-200) 15%, transparent 15%), radial-gradient(var(--gray-200) 15%, transparent 15%);
background-size:24px 24px;
background-position:0 0, 12px 12px;
animation:pxBgScroll 3s linear infinite;
transition:opacity .35s steps(5), visibility .35s steps(5); contain:strict;
}
@keyframes pxBgScroll{from{background-position:0 0, 12px 12px;}to{background-position:-24px -24px, -12px -12px;}}
.px-loader.hide{opacity:0; visibility:hidden; pointer-events:none;}
.px-loader-box{display:flex; flex-direction:column; align-items:center; gap:14px; background:var(--white); border:var(--px-border); box-shadow:8px 8px 0 var(--ink); padding:34px 40px; max-width:min(92vw,380px); text-align:center; contain:layout style;}
.px-loader-fox{width:110px; height:110px; image-rendering:pixelated; animation:pxLoaderSpin 1.1s steps(8) infinite; will-change:transform;}
@keyframes pxLoaderSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.px-loader-title{font-family:var(--px-font); font-size:15px; color:var(--ink);}
.px-loader-bar{width:230px; max-width:100%; height:22px; border:var(--px-border); background:var(--gray-100); box-shadow:var(--px-shadow-sm); overflow:hidden;}
.px-loader-bar span{display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left center; background:repeating-linear-gradient(90deg, var(--orange) 0 10px, var(--orange-deep) 10px 20px); will-change:transform;}
.px-loader-text{font-size:22px; color:var(--ink);}
.px-loader-hint{font-family:var(--px-font); font-size:9px; color:var(--orange-deep); animation:blinkDot 1s steps(2) infinite;}
[data-theme="dark"] .px-loader{
background-color:#14110d;
background-image:radial-gradient(#1c1813 15%, transparent 15%), radial-gradient(#1c1813 15%, transparent 15%);
}
[data-theme="dark"] .px-loader-box{background:#14110d;}
[data-theme="dark"] .px-loader-box{box-shadow:8px 8px 0 #000;}
[data-theme="dark"] .px-loader-title,[data-theme="dark"] .px-loader-text{color:#f5efe6;}
[data-theme="dark"] .px-loader-bar{background:#242019;}
@media (prefers-reduced-motion:reduce){.px-loader-fox{animation:none;}}
/* 0: Press Start 2P + VT323 (default, dari aturan di bawah) */
html[data-pxfont] body,
html[data-pxfont] .hero-copy p.sub,
html[data-pxfont] .about-copy p,
html[data-pxfont] .proj-body p,
html[data-pxfont] .t-item p,
html[data-pxfont] .section-head p,
html[data-pxfont] .chip,
html[data-pxfont] .badge,
html[data-pxfont] .nav-links a,
html[data-pxfont] .clink,
html[data-pxfont] .form-row label,
html[data-pxfont] .msg-bubble,
html[data-pxfont] .qr-btn,
html[data-pxfont] .px-dialog,
html[data-pxfont] .proj-links a,
html[data-pxfont] .proj-tags span,
html[data-pxfont] .t-role,
html[data-pxfont] .stat-label,
html[data-pxfont] .contact-copy p,
html[data-pxfont] .footer-inner p,
html[data-pxfont] .chat-setup p,
html[data-pxfont] .chat-setup input,
html[data-pxfont] .chat-setup-btn,
html[data-pxfont] .chat-header-info span,
html[data-pxfont] .float-chip,
html[data-pxfont] .btn,
html[data-pxfont] .nav-cta,
html[data-pxfont] .form-submit,
html[data-pxfont] .lang-btn,
html[data-pxfont] .theme-toggle,
html[data-pxfont] .back-to-top,
html[data-pxfont] .chat-input,
html[data-pxfont] .form-row input,
html[data-pxfont] .form-row textarea,
html[data-pxfont] .chat-setup-btn,
html[data-pxfont] .chat-setup input {
font-size: 19px !important;
line-height: 1.5 !important;
letter-spacing: 0.01em !important;
font-size-adjust: 0.5;
}
html[data-pxfont="1"] h1,html[data-pxfont="1"] h2,html[data-pxfont="1"] h3,html[data-pxfont="1"] .nav-logo,html[data-pxfont="1"] .section-head h2,html[data-pxfont="1"] .stat-num,html[data-pxfont="1"] .t-period,html[data-pxfont="1"] .chat-header-info h4{font-family:'Silkscreen',monospace !important; font-size:inherit !important; line-height:inherit !important; letter-spacing:0 !important;}
html[data-pxfont="1"] body,html[data-pxfont="1"] .hero-copy p.sub,html[data-pxfont="1"] .about-copy p,html[data-pxfont="1"] .proj-body p,html[data-pxfont="1"] .t-item p,html[data-pxfont="1"] .section-head p,html[data-pxfont="1"] .chip,html[data-pxfont="1"] .badge,html[data-pxfont="1"] .nav-links a,html[data-pxfont="1"] .clink,html[data-pxfont="1"] .form-row label,html[data-pxfont="1"] .msg-bubble,html[data-pxfont="1"] .qr-btn,html[data-pxfont="1"] .px-dialog{font-family:'DotGothic16',monospace !important; font-size:19px !important; line-height:1.5 !important; letter-spacing:0.01em !important;}
html[data-pxfont="2"] h1,html[data-pxfont="2"] h2,html[data-pxfont="2"] h3,html[data-pxfont="2"] .nav-logo,html[data-pxfont="2"] .section-head h2,html[data-pxfont="2"] .stat-num,html[data-pxfont="2"] .t-period,html[data-pxfont="2"] .chat-header-info h4{font-family:'Pixelify Sans',monospace !important; font-size:inherit !important; line-height:inherit !important; letter-spacing:0 !important;}
html[data-pxfont="2"] body,html[data-pxfont="2"] .hero-copy p.sub,html[data-pxfont="2"] .about-copy p,html[data-pxfont="2"] .proj-body p,html[data-pxfont="2"] .t-item p,html[data-pxfont="2"] .section-head p,html[data-pxfont="2"] .chip,html[data-pxfont="2"] .badge,html[data-pxfont="2"] .nav-links a,html[data-pxfont="2"] .clink,html[data-pxfont="2"] .form-row label,html[data-pxfont="2"] .msg-bubble,html[data-pxfont="2"] .qr-btn,html[data-pxfont="2"] .px-dialog{font-family:'Handjet',monospace !important; font-size:19px !important; line-height:1.5 !important; letter-spacing:0.01em !important;}
html[data-pxfont="3"] h1,html[data-pxfont="3"] h2,html[data-pxfont="3"] h3,html[data-pxfont="3"] .nav-logo,html[data-pxfont="3"] .section-head h2,html[data-pxfont="3"] .stat-num,html[data-pxfont="3"] .t-period,html[data-pxfont="3"] .chat-header-info h4{font-family:'Tiny5',monospace !important; font-size:inherit !important; line-height:inherit !important; letter-spacing:0 !important;}
html[data-pxfont="3"] body,html[data-pxfont="3"] .hero-copy p.sub,html[data-pxfont="3"] .about-copy p,html[data-pxfont="3"] .proj-body p,html[data-pxfont="3"] .t-item p,html[data-pxfont="3"] .section-head p,html[data-pxfont="3"] .chip,html[data-pxfont="3"] .badge,html[data-pxfont="3"] .nav-links a,html[data-pxfont="3"] .clink,html[data-pxfont="3"] .form-row label,html[data-pxfont="3"] .msg-bubble,html[data-pxfont="3"] .qr-btn,html[data-pxfont="3"] .px-dialog{font-family:'Micro 5',monospace !important; font-size:19px !important; line-height:1.5 !important; letter-spacing:0.01em !important;}
h1,h2,h3,.nav-logo,.section-head h2,.stat-num,.t-period,.chat-header-info h4{font-family:var(--px-font) !important; font-size:inherit !important; line-height:inherit !important; letter-spacing:0 !important;}
body,.hero-copy p.sub,.about-copy p,.proj-body p,.t-item p,.section-head p,.chip,.badge,.nav-links a,.clink,.form-row label,.form-row input,.form-row textarea,.msg-bubble,.chat-input,.qr-btn,.chat-setup p,.chat-setup input,.chat-setup-btn,.chat-header-info span,.float-chip,.btn,.nav-cta,.form-submit,.lang-btn,.theme-toggle,.back-to-top,.footer-inner p,.px-dialog,.px-hit,.proj-links a,.proj-tags span,.t-role,.stat-label,.contact-copy p{font-family:var(--px-body) !important; letter-spacing:.01em;}
.qr-btn{font-size:19px !important;}
.chat-setup p{font-size:19px !important;}
.chat-setup-btn{font-size:21px !important;}
.chat-header-info span{font-size:18px !important;}
.float-chip{font-size:18px !important;}
.lang-btn{font-size:14px !important;}
.footer-inner p{font-size:18px !important;}
.proj-links a{font-size:18px !important;}
.proj-tags span{font-size:15px !important;}
.t-role{font-size:18px !important;}
.stat-label{font-size:18px !important;}
.contact-copy p{font-size:20px !important;}
body{font-size:19px;}
button{font-family:var(--px-body) !important; cursor:pointer;}
input,textarea,select{font-family:var(--px-body) !important;}
.hero-copy h1{line-height:1.5 !important; font-size:clamp(22px,3.2vw,34px) !important; letter-spacing:0 !important;}
.section-head h2{line-height:1.55 !important; font-size:clamp(18px,2.6vw,26px) !important;}
.sk-head h3{font-size:12px !important; line-height:1.6;}
.stat-num{font-size:22px !important;}
.t-item h3{font-size:13px !important; line-height:1.6;}
.proj-body h3{font-size:13px !important; line-height:1.6;}
.contact-copy h2{font-family:var(--px-font) !important; line-height:1.6 !important;}
.eyebrow{font-family:var(--px-font) !important; font-size:10px !important; letter-spacing:.08em !important;}
.eyebrow::before{width:10px; height:10px; border-radius:0; box-shadow:2px 2px 0 var(--ink);}
.nav-logo{font-size:13px !important;}
.chat-header-info h4{font-size:11px !important;}
.cursor-glow,#particle-canvas,.blob,.card-shine{display:none !important;}
.gradient-text{background:none !important; -webkit-text-fill-color:var(--orange) !important; color:var(--orange) !important; animation:none !important;}
.btn::before,.nav-cta::before,.ripple-ring{display:none !important;}
.btn,.nav-cta,.form-submit{overflow:visible !important;}
.magnetic{transition:transform .12s steps(2) !important;}
body::after{content:''; position:fixed; inset:0; z-index:9996; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(21,19,15,0.045) 0 1px, transparent 1px 4px);}
[data-theme="dark"] body::after{background:repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 4px);}
/* ==========================================================================
ENHANCED HERO INTERACTIVE GRID UX
Spotlight mouse tracking, precision dots & smooth radial falloff
========================================================================== */
.hero-grid{
position:absolute !important; inset:0 !important; z-index:1 !important;
pointer-events:none !important; overflow:hidden;
--mouse-x:50%; --mouse-y:40%;
--grid-sz:38px;
--grid-line:rgba(21,19,15,0.08);
--grid-dot:rgba(21,19,15,0.22);
--spot-glow:rgba(249,115,22,0.18);
--spot-line:rgba(249,115,22,0.5);
--spot-dot:rgba(249,115,22,0.9);
background:none !important;
}
[data-theme="dark"] .hero-grid{
--grid-line:rgba(255,255,255,0.065);
--grid-dot:rgba(255,255,255,0.28);
--spot-glow:rgba(249,115,22,0.28);
--spot-line:rgba(249,115,22,0.65);
--spot-dot:rgba(255,160,60,0.95);
}
.hero-about-zone{position:relative !important; width:100% !important;}
.hero-grid-pattern{
position:absolute; inset:0; pointer-events:none;
background-size:var(--grid-sz) var(--grid-sz);
background-image:linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
mask-image:linear-gradient(to bottom, black 0%, black 86%, transparent 100%);
-webkit-mask-image:linear-gradient(to bottom, black 0%, black 86%, transparent 100%);
}
.hero-grid-dots{
position:absolute; inset:0; pointer-events:none;
background-size:var(--grid-sz) var(--grid-sz);
background-image:radial-gradient(circle 1.5px at 1px 1px, var(--grid-dot) 100%, transparent 0);
mask-image:linear-gradient(to bottom, black 0%, black 82%, transparent 98%);
-webkit-mask-image:linear-gradient(to bottom, black 0%, black 82%, transparent 98%);
opacity:0.85;
}
.hero-grid-spotlight{
position:absolute; inset:0; pointer-events:none;
background-image:radial-gradient(circle 480px at var(--mouse-x) var(--mouse-y), var(--spot-glow) 0%, transparent 70%),
linear-gradient(to right, var(--spot-line) 1px, transparent 1px),
linear-gradient(to bottom, var(--spot-line) 1px, transparent 1px);
background-size:100% 100%, var(--grid-sz) var(--grid-sz), var(--grid-sz) var(--grid-sz);
mask-image:radial-gradient(circle 450px at var(--mouse-x) var(--mouse-y), black 15%, rgba(0,0,0,0.4) 50%, transparent 85%);
-webkit-mask-image:radial-gradient(circle 450px at var(--mouse-x) var(--mouse-y), black 15%, rgba(0,0,0,0.4) 50%, transparent 85%);
will-change:mask-image, -webkit-mask-image;
}
.navbar{border:var(--px-border) !important; border-radius:0 !important; box-shadow:var(--px-shadow) !important; background:var(--white) !important; backdrop-filter:none !important;}
.navbar.scrolled{box-shadow:6px 6px 0 var(--ink) !important; transform:translate(-2px,-2px);}
.nav-logo .dot{width:12px; height:12px; border-radius:0; border:2px solid var(--ink); animation:blinkDot 1.1s steps(2) infinite;}
@keyframes blinkDot{0%,100%{opacity:1;}50%{opacity:.35;}}
.nav-links a{border-radius:0 !important; border:2px solid transparent; font-size:19px !important; padding:6px 10px !important;}
.nav-links a:hover{border-color:var(--ink); transform:translate(-1px,-1px) !important; box-shadow:2px 2px 0 var(--ink);}
.nav-links a.active{background:var(--orange) !important; color:#fff !important; border-color:var(--ink); box-shadow:2px 2px 0 var(--ink);}
.lang-switch{border:var(--px-border) !important; border-radius:0 !important; box-shadow:var(--px-shadow-sm);}
.lang-pill{border-radius:0 !important;}
.px-blink{color:var(--orange); animation:blinkDot 1.1s steps(2) infinite;}
.btn{border:var(--px-border) !important; border-radius:0 !important; box-shadow:var(--px-shadow) !important; font-size:20px !important;}
.btn:hover{transform:translate(-2px,-2px) !important; box-shadow:6px 6px 0 var(--ink) !important;}
.btn:active{transform:translate(2px,2px) !important; box-shadow:1px 1px 0 var(--ink) !important;}
.btn-ghost{background:var(--white) !important;}
.badge{border:2px solid var(--ink) !important; border-radius:0 !important; box-shadow:var(--px-shadow-sm); font-size:17px !important;}
.badge .ic{width:8px; height:8px; border-radius:0;}
/* ===== MARQUEE BADGES: jalan ke kanan, muncul lagi dari kiri, berulang ===== */
.hero-badges.px-marquee{display:block !important; overflow:hidden !important; width:100% !important; max-width:100% !important; padding:6px 2px 8px !important; -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);}
.px-marquee-track{display:flex !important; flex-wrap:nowrap !important; align-items:center !important; gap:10px !important; width:max-content !important; max-width:none !important; padding-right:10px !important; margin:0 !important; animation:pxMarqueeRight 16s linear infinite; will-change:transform;}
.px-marquee-track .badge{flex:0 0 auto !important; white-space:nowrap !important; margin:0 !important;}
@keyframes pxMarqueeRight{from{transform:translateX(-50%);}to{transform:translateX(0);}}
.px-marquee:hover .px-marquee-track{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){.px-marquee-track{animation:none !important;}}
.fox-stage{border:none !important; background:none !important; background-color:transparent !important; box-shadow:none !important; image-rendering:pixelated; overflow:visible; cursor:pointer; min-width:0;}
.fox-ring,.fox-glow{display:none !important;}
/* chip Berbasis AI / Responsif dihapus total sesuai permintaan */
.float-chip{display:none !important;}
/* ===== HERO: SATU KOMPOSISI UNTUK SEMUA BREAKPOINT (persis versi mobile) =====
Urutan tetap: maskot (atas, tengah) → eyebrow → judul → deskripsi → tombol → marquee badge.
Tidak ada lagi grid 2 kolom: inilah yang membuat desktop & mobile punya UX yang sama. */
.hero{padding-top:clamp(165px, 16vw, 215px) !important; padding-bottom:clamp(36px, 5vw, 64px) !important;}
.hero-inner{display:flex !important; flex-direction:column !important; align-items:center !important; gap:var(--px-gap-md) !important; text-align:left !important;}
.hero-inner > *{min-width:0 !important; max-width:100% !important;} /* cegah marquee melebarkan grid (grid blowout) */
.hero-visual{order:-1 !important; width:100% !important; display:flex !important; justify-content:center !important; align-items:center !important; margin:0 !important; padding:0 !important; overflow:visible !important;}
.fox-stage{flex:none !important; width:var(--px-fox) !important; max-width:100% !important; margin:0 auto !important; overflow:visible !important; aspect-ratio:48/40 !important; perspective:none !important; touch-action:manipulation !important; -webkit-tap-highlight-color:transparent !important; user-select:none !important; -webkit-user-select:none !important;}
.hero-copy{display:flex !important; flex-direction:column !important; align-items:flex-start !important; width:100% !important; max-width:var(--px-col) !important; text-align:left !important;}
.hero-copy .eyebrow{font-size:clamp(13px, 1.4vw, 15px) !important; margin-bottom:var(--px-gap-xs) !important; justify-content:flex-start !important;}
.hero-copy h1{font-size:clamp(31px, 4.4vw, 36px) !important; line-height:1.35 !important; letter-spacing:0 !important; text-align:left !important; max-width:100% !important;}
.hero-copy p.sub{margin:var(--px-gap-xs) 0 0 !important; max-width:100% !important; text-align:left !important;}
.hero-actions{display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:10px !important; margin-top:var(--px-gap-lg) !important; width:100% !important; max-width:var(--px-cta) !important;}
.hero-actions .btn{flex:none !important; width:100% !important; justify-content:center !important; text-align:center !important; padding:clamp(12px, 1.4vw, 16px) clamp(10px, 1.4vw, 22px) !important;}
.hero-badges{width:100% !important; max-width:100% !important; min-width:0 !important; margin-top:var(--px-gap-lg) !important;}
/* layout tombol hero split: kanan & kiri (desktop), stacked (mobile) — sinkron dengan style.css */
.hero-actions--split{display:flex !important; flex-direction:row !important; align-items:center !important; gap:clamp(10px, 1.4vw, 18px) !important; margin-top:var(--px-gap-lg) !important; width:auto !important; max-width:none !important;}
.hero-actions--split .btn-ghost{margin-left:auto !important;}
.hero-actions--split .btn{flex:none !important; width:auto !important; justify-content:center !important; text-align:center !important; padding:clamp(12px, 1.4vw, 16px) clamp(10px, 1.4vw, 22px) !important;}
@media (max-width:980px){
.hero-actions--split{flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important; gap:clamp(8px, 1.2vw, 12px) !important;}
.hero-actions--split .btn{flex:1 1 auto !important; min-width:120px !important; width:auto !important;}
.hero-actions--split .btn-ghost{margin-left:0 !important;}
}
/* ===== RITME SECTION & JUDUL: nilai sama di semua breakpoint ===== */
section{padding:var(--px-sec) 0 !important;}
.container{max-width:var(--px-maxw) !important; padding:0 var(--px-gutter) !important;}
.section-head{display:flex !important; flex-direction:column !important; align-items:flex-start !important; text-align:left !important; max-width:var(--px-head) !important; margin:0 0 clamp(24px, 3.4vw, 44px) !important;}
.section-head h2{font-size:clamp(22px, 4vw, 30px) !important; line-height:1.4 !important; text-align:left !important; max-width:100% !important;}
.section-head p{max-width:100% !important; margin-left:0 !important; margin-right:0 !important; text-align:left !important;}
#foxChar{transform-box:fill-box; transform-origin:50% 55%;}
.fox-stage:active #foxChar{transform:scale(.93) !important;}
@keyframes floatStep{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.stat-card,.skill-card,.proj-card{border:var(--px-border) !important; border-radius:0 !important; box-shadow:var(--px-shadow) !important; transform:none !important;}
.stat-card:hover,.skill-card:hover,.proj-card:hover{transform:translate(-3px,-3px) !important; box-shadow:7px 7px 0 var(--ink) !important;}
.sk-head .sk-icon{border:2px solid var(--ink); border-radius:0 !important;}
.chip{border:2px solid var(--ink) !important; border-radius:0 !important; font-size:17px !important; background:var(--white);}
.chip:hover{transform:translate(-1px,-1px) !important; box-shadow:3px 3px 0 var(--ink) !important;}
.proj-thumb{border-bottom:var(--px-border);}
.proj-thumb::after{display:none;}
/* ===== THUMB PROJECT FALLBACK: gambar tidak ada / gagal dimuat → placeholder pixel, bukan ikon broken ===== */
.proj-thumb.thumb-missing{background:var(--gray-100) !important;}
.proj-thumb.thumb-missing::before{content:''; position:absolute; inset:0; background-image:linear-gradient(var(--gray-200) 2px, transparent 2px), linear-gradient(90deg, var(--gray-200) 2px, transparent 2px); background-size:18px 18px;}
.proj-thumb.thumb-missing::after{content:attr(data-name) ' — NO PREVIEW'; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:calc(100% - 24px); font-family:var(--px-font); font-size:12px; line-height:1.5; letter-spacing:.06em; text-align:center; color:var(--gray-500); background:var(--white); border:2px solid var(--ink); box-shadow:var(--px-shadow-sm); padding:6px 10px;}
[data-theme="dark"] .proj-thumb.thumb-missing{background:#242019 !important;}
[data-theme="dark"] .proj-thumb.thumb-missing::before{background-image:linear-gradient(#353025 2px, transparent 2px), linear-gradient(90deg, #353025 2px, transparent 2px);}
[data-theme="dark"] .proj-thumb.thumb-missing::after{background:#14110d; color:#f5efe6;}
.proj-tags span{border:2px solid var(--ink); border-radius:0 !important; font-size:15px !important;}
.proj-links{border-top:var(--px-border) !important;}
.timeline::before{width:4px; background:repeating-linear-gradient(0deg, var(--orange) 0 8px, transparent 8px 14px);}
.t-dot{border:var(--px-border) !important; border-radius:0 !important; box-shadow:var(--px-shadow-sm);}
.t-dot::after{border-radius:0 !important;}
.t-period{font-size:11px !important;}
.t-item h3::before{content:'> '; color:var(--orange);}
.contact-wrap{border:var(--px-border); border-radius:0 !important; box-shadow:8px 8px 0 rgba(0,0,0,.45);}
.contact-wrap::before{display:none;}
[data-theme="dark"] .contact-wrap,[data-theme="dark"] .contact-copy h2,[data-theme="dark"] .contact-copy p,[data-theme="dark"] .clink{color:#15130F !important;}
[data-theme="dark"] .contact-copy p{color:rgba(21,19,15,.75) !important;}
.clink{border:2px solid rgba(255,255,255,.35) !important; border-radius:0 !important; font-size:18px !important;}
.clink:hover{transform:translate(-2px,-2px) !important; box-shadow:4px 4px 0 rgba(0,0,0,.5) !important;}
.form-card{border:var(--px-border); border-radius:0 !important; box-shadow:6px 6px 0 rgba(0,0,0,.4);}
.form-row input,.form-row textarea{border:var(--px-border) !important; border-radius:0 !important; font-size:19px !important;}
.form-submit{border:var(--px-border) !important; border-radius:0 !important; box-shadow:var(--px-shadow) !important; font-size:21px !important;}
.form-submit:hover{transform:translate(-2px,-2px) !important; box-shadow:6px 6px 0 var(--ink) !important;}
footer{border-top:var(--px-border);}
.footer-inner p{font-size:18px;}
.back-to-top{border:var(--px-border) !important; border-radius:0 !important; box-shadow:var(--px-shadow-sm) !important;}
.chat-fab{border:var(--px-border) !important; border-radius:0 !important; box-shadow:var(--px-shadow) !important; animation:floatStep 1.6s steps(2) infinite;}
.chat-fab .fab-badge{border:2px solid var(--ink); border-radius:0;}
.chat-panel{border:var(--px-border) !important; border-radius:0 !important; box-shadow:8px 8px 0 var(--ink) !important;}
.chat-header{
background:linear-gradient(135deg, #15130F 0%, #221a12 55%, #342214 100%) !important;
border-bottom:var(--px-border) !important;
}
.chat-header-info h4{color:#ffffff !important; text-shadow:0 1px 3px rgba(0,0,0,0.6) !important;}
.chat-header-info span{color:rgba(255,255,255,0.85) !important;}
[data-theme="dark"] .chat-header{
background:linear-gradient(135deg, #100e0b 0%, #1e160e 55%, #2e1d0e 100%) !important;
border-bottom:3px solid #353025 !important;
}
[data-theme="dark"] .chat-header-info h4{color:#ffffff !important;}
[data-theme="dark"] .chat-header-info span{color:rgba(255,255,255,0.85) !important;}
.chat-close{border:2px solid rgba(255,255,255,.4); border-radius:0 !important; color:#fff !important; background:rgba(255,255,255,0.12) !important;}
.chat-header-info .status-dot{background:#22c55e !important; box-shadow:0 0 6px rgba(34,197,94,0.8) !important;}
.msg-bubble{border:2px solid var(--ink) !important; border-radius:0 !important; font-size:18px !important;}
/* ===== QUICK REPLIES MARQUEE: bergerak ke kanan, muncul lagi dari kiri ===== */
.chat-quick-replies{
display:block !important; overflow:hidden !important; width:100% !important; max-width:100% !important; padding:4px 0 10px !important; position:relative;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
mask-image:linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}
.qr-track{
display:flex !important; flex-wrap:nowrap !important; align-items:center !important; gap:8px !important; width:max-content !important;
will-change:transform; animation:qrMarqueeRight 18s linear infinite;
}
.chat-quick-replies:hover .qr-track,
.chat-quick-replies:active .qr-track{
animation-play-state:paused;
}
@keyframes qrMarqueeRight{from{transform:translateX(-50%);}to{transform:translateX(0);}}
@media (prefers-reduced-motion:reduce){.qr-track{animation:none !important;}}
.qr-track .qr-btn{
flex:0 0 auto !important; white-space:nowrap !important; margin:0 !important; cursor:pointer; user-select:none;
border:2px solid var(--ink) !important; border-radius:0 !important; font-size:16px !important;
background:var(--white) !important; color:var(--orange-deep) !important; padding:5px 11px !important;
transition:transform .12s steps(2), background .2s, color .2s !important;
}
[data-theme="dark"] .qr-track .qr-btn{
background:#242019 !important; border-color:#353025 !important; color:#ff9d42 !important;
}
.qr-track .qr-btn:hover{
background:var(--orange) !important; color:#fff !important; border-color:var(--ink) !important; transform:translateY(-2px) !important;
}
[data-theme="dark"] .qr-track .qr-btn:hover{
background:var(--orange) !important; color:#fff !important; border-color:var(--orange) !important;
}
.chat-input{border:var(--px-border) !important; border-radius:0 !important; font-size:19px !important;}
.chat-send{border:var(--px-border) !important; border-radius:0 !important; box-shadow:var(--px-shadow-sm);}
.chat-setup input{border:var(--px-border) !important; border-radius:0 !important;}
.chat-setup-btn{border:var(--px-border) !important; border-radius:0 !important; box-shadow:var(--px-shadow-sm);}
@media (max-width:890px){
.nav-links{border:var(--px-border) !important; border-radius:0 !important; box-shadow:6px 6px 0 var(--ink) !important; background:var(--white) !important; backdrop-filter:none !important;}
}
@media (max-width:980px){
/* gutter, padding hero, lebar kolom, dan ukuran maskot: token fluid di atas (sama seperti mobile) */
.px-dialog{font-size:15px !important; bottom:35% !important; left:50% !important; right:auto !important; width:max-content !important; max-width:88% !important; transform:translate(-50%,8px) !important; white-space:normal !important; word-break:break-word !important;}
.px-dialog.show{transform:translate(-50%,0) !important;}
/* tipografi & jarak hero: diatur token fluid di atas */
.badge{padding:6px 10px !important; white-space:normal !important;}
/* section & section-head: token fluid di atas */
.about-grid,.contact-grid{grid-template-columns:1fr !important;}
.proj-grid{grid-template-columns:1fr !important; max-width:520px !important; margin:0 auto !important;}
.skills-grid{grid-template-columns:1fr 1fr !important;}
.stat-grid{grid-template-columns:repeat(3,1fr) !important;}
.stat-card{min-width:0 !important;}
.contact-copy{text-align:left !important; align-items:flex-start !important;}
.contact-copy p{margin-left:0 !important; margin-right:0 !important; text-align:left !important;}
.contact-links{align-items:stretch !important;}
.clink{justify-content:flex-start !important; text-align:left !important;}
.chat-panel{max-height:68dvh !important;}
}
/* ===== MARQUEE LOOP: card Keahlian & Project jalan ke kanan lalu muncul lagi dari kiri, berulang ===== */
#skills,#projects{overflow:hidden;}
/* pembungkus pemotong + fade tepi (dibuat script.js begitu marquee aktif, jadi tanpa JS tetap grid biasa) */
.px-marquee-clip{overflow:hidden; width:100%; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
/* isi track 2x (asli + duplikat): gerak -50% -> 0 = jalan ke kanan, duplikat di kiri mengisi celah */
.skills-grid.px-marquee,.proj-grid.px-marquee{display:flex !important; flex-wrap:nowrap !important; align-items:stretch !important; width:max-content !important; max-width:none !important; grid-template-columns:none !important; gap:0 !important; margin:0 !important; padding:10px 0 22px !important; will-change:transform; animation:pxMarqueeLoop var(--marq-dur,32s) linear infinite;}
.skills-grid.px-marquee{--marq-dur:30s;}
.proj-grid.px-marquee{--marq-dur:42s;}
/* ===== DRAG MANUAL (handler pointer di script.js) =====
touch-action:pan-y → gesture horizontal milik kita, scroll vertikal halaman
tetap normal (tanpa ini, browser "mencuri" swipe horizontal dan membatalkan
pointer events kita). user-select / -webkit-user-drag dimatikan supaya teks
dan gambar tidak ikut terseret seperti drag bawaan browser. */
.px-marquee-clip{touch-action:pan-y;}
.skills-grid.px-marquee,.proj-grid.px-marquee{touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none;}
.skills-grid.px-marquee:active,.proj-grid.px-marquee:active{cursor:grabbing;}
.skills-grid.px-marquee img,.proj-grid.px-marquee img{-webkit-user-drag:none; user-select:none; -webkit-user-select:none;}
.skills-grid.px-marquee .skill-card{flex:0 0 250px !important; width:250px !important; max-width:250px !important; margin-right:18px !important;}
.proj-grid.px-marquee .proj-card{flex:0 0 380px !important; width:380px !important; max-width:380px !important; margin-right:28px !important;}
/* card di dalam track selalu tampil (tidak ikut animasi reveal saat scroll) */
.skills-grid.px-marquee .skill-card,.proj-grid.px-marquee .proj-card{opacity:1 !important; content-visibility:visible !important;}
@keyframes pxMarqueeLoop{from{transform:translateX(-50%);}to{transform:translateX(0);}}
/* pause saat disentuh/hover biar card bisa dibaca & diklik */
.skills-grid.px-marquee:hover,.proj-grid.px-marquee:hover{animation-play-state:paused;}
/* hemat CPU: pause saat section di luar layar (class ditambah script.js) */
.skills-grid.px-marquee.marquee-paused,.proj-grid.px-marquee.marquee-paused{animation-play-state:paused;}
@media (max-width:980px){
.skills-grid.px-marquee .skill-card{flex-basis:220px !important; width:220px !important; max-width:220px !important; margin-right:12px !important;}
.proj-grid.px-marquee .proj-card{flex-basis:min(80vw,340px) !important; width:min(80vw,340px) !important; max-width:min(80vw,340px) !important; margin-right:16px !important;}
}
@media (max-width:580px){
.skills-grid.px-marquee .skill-card{flex-basis:200px !important; width:200px !important; max-width:200px !important; margin-right:12px !important;}
.proj-grid.px-marquee .proj-card{flex-basis:min(78vw,300px) !important; width:min(78vw,300px) !important; max-width:min(78vw,300px) !important; margin-right:14px !important;}
.skills-grid.px-marquee{--marq-dur:24s;}
.proj-grid.px-marquee{--marq-dur:32s;}
}
@media (prefers-reduced-motion:reduce){.skills-grid.px-marquee,.proj-grid.px-marquee{animation:none !important; width:100% !important; flex-wrap:wrap !important;}}
@media (max-width:580px){
/* gutter, hero, dan tombol: token fluid di atas (tampilan mobile jadi default) */
/* tetap 3 kolom rapi & simetris — tidak ada baris terakhir yang menggantung sendirian */
.stat-grid{grid-template-columns:repeat(3,1fr) !important;}
.stat-card{padding:clamp(12px, 3vw, 18px) 6px !important;}
.px-loader-box{padding:24px 20px !important;}
}
@media (max-width:580px){.chat-panel{border-left:none !important; border-right:none !important; border-bottom:none !important;} .chat-header{border-radius:0 !important;} .nav-links a{font-size:19px !important;}}
[data-theme="dark"] .navbar{background:#1c1914 !important; box-shadow:4px 4px 0 #000 !important;}
[data-theme="dark"] .theme-toggle,[data-theme="dark"] .nav-toggle,[data-theme="dark"] .lang-switch{background:#242019;}
[data-theme="dark"] .stat-card,[data-theme="dark"] .skill-card,[data-theme="dark"] .proj-card,[data-theme="dark"] .chat-panel,[data-theme="dark"] .form-card,[data-theme="dark"] .contact-wrap{box-shadow:6px 6px 0 #000 !important;}
.reveal{transition:opacity .4s steps(4), transform .4s steps(4) !important;}
/* ===== PIXEL FOX SCENE ===== */
.px-sun,.px-ground,.px-stars{display:none !important;}
.hero{overflow:visible !important;}
.hero-bg{overflow:hidden !important;}
.fox-char-wrap{position:absolute !important; inset:0 !important; z-index:2 !important; transform-origin:50% 65% !important; pointer-events:none !important; overflow:visible !important; will-change:transform;}
.fox-char-svg{width:100% !important; height:100% !important; display:block !important; overflow:visible !important;}
.fox-grass-wrap{position:absolute !important; inset:0 !important; z-index:1 !important; pointer-events:none !important;}
.fox-grass-svg{width:100% !important; height:100% !important; display:block !important;}
.fox-svg{position:relative; z-index:2; width:100% !important; height:100% !important; margin:0 !important; overflow:visible !important; animation:none !important;}
#foxChar{animation:pxIdle 2s steps(2) infinite !important; transition:transform .12s steps(2) !important;}
@keyframes pxIdle{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
@media (hover: hover) and (pointer: fine) {
.fox-stage:hover #foxChar:not(.salto){animation:pxJump .55s steps(4) infinite !important;}
}
@keyframes pxJump{0%,100%{transform:translateY(0) scale(1,1);}30%{transform:translateY(-14px) scale(.96,1.06);}55%{transform:translateY(0) scale(1.06,.92);}75%{transform:translateY(-4px) scale(1,1);}}
/* ===== SALTO ===== */
#foxChar.salto{animation:pxSalto .9s steps(9) 1 !important;}
@keyframes pxSalto{
0%{transform:translateY(0) rotate(0deg) scale(1,1);}
12%{transform:translateY(-6px) rotate(0deg) scale(1.06,.92);}
35%{transform:translateY(-26px) rotate(140deg) scale(.94,1.02);}
55%{transform:translateY(-32px) rotate(260deg) scale(.94,1.02);}
75%{transform:translateY(-12px) rotate(360deg) scale(.96,1.02);}
88%{transform:translateY(1px) rotate(360deg) scale(1.08,.9);}
100%{transform:translateY(0) rotate(360deg) scale(1,1);}
}
.fox-grass{transform-box:fill-box; transform-origin:50% 100%;}
.fox-stage.salto-active .fox-grass{animation:pxGrassPuff .5s steps(5) 1;}
@keyframes pxGrassPuff{0%,100%{transform:scale(1,1);}40%{transform:scale(1.08,.86);}70%{transform:scale(.97,1.03);}}
#foxEyes{transform-box:fill-box; transform-origin:center; animation:pxBlink 4.2s steps(1) infinite;}
@keyframes pxBlink{0%,93%,100%{transform:scaleY(1);}95%,97%{transform:scaleY(.12);}}
.eye-pupil{transition:transform .12s steps(2);}
.px-blush{animation:blinkDot 2s steps(2) infinite;}
.px-hit{position:absolute; top:14px; left:16px; z-index:3; font-family:var(--px-font); font-size:13px; color:var(--orange-deep); opacity:0; pointer-events:none;}
.px-hit.show{animation:pxHit .7s steps(5);}
@keyframes pxHit{0%{opacity:1; transform:translateY(6px);}100%{opacity:0; transform:translateY(-26px);}}
.px-dialog{position:absolute; left:12px; right:12px; bottom:26%; z-index:3; background:var(--white); border:var(--px-border); box-shadow:var(--px-shadow-sm); font-size:20px; padding:8px 10px; text-align:center; opacity:0; transform:translateY(8px); transition:opacity .2s steps(3), transform .2s steps(3); pointer-events:none;}
.px-dialog.show{opacity:1; transform:translateY(0);}
[data-theme="dark"] .px-dialog{background:#242019; color:#f5efe6;}
/* ===== PERBAGUS ANIMASI PIXEL GLOBAL ===== */
.hero-copy .eyebrow{animation:pxSlide .5s steps(5);}
@keyframes pxSlide{from{opacity:0; transform:translateX(-14px);}to{opacity:1; transform:none;}}
.nav-links a{transition:transform .12s steps(2), box-shadow .12s steps(2), background .12s steps(2) !important;}
.chip,.badge,.btn,.nav-cta,.form-submit,.clink,.qr-btn,.chat-send{transition:transform .12s steps(2), box-shadow .12s steps(2) !important;}
.stat-card,.skill-card,.proj-card{transition:transform .15s steps(3), box-shadow .15s steps(3) !important;}
.proj-card:hover .proj-thumb img,.proj-card:hover .proj-thumb video{transform:scale(1.05) !important; image-rendering:pixelated;}
.chat-fab{transition:transform .12s steps(2) !important;}
.back-to-top{transition:transform .12s steps(2), opacity .2s steps(3) !important;}
.msg-bubble{animation:msgSlideIn .25s steps(4) !important;}
.t-item:hover{transform:translateX(6px) !important; transition:transform .15s steps(3) !important;}
.skill-card:hover .sk-icon{transform:scale(1.1) !important;}
@media (prefers-reduced-motion:reduce){#foxChar,.px-sun,.px-stars i,.float-chip,.chat-fab{animation:none !important;}}
.theme-toggle{border:var(--px-border) !important; border-radius:0 !important; box-shadow:var(--px-shadow-sm); background:var(--white);}
.nav-cta{border:var(--px-border) !important; border-radius:0 !important; box-shadow:var(--px-shadow-sm); font-size:18px !important;}
.nav-cta:hover{transform:translate(-2px,-2px) !important; box-shadow:4px 4px 0 var(--ink) !important;}
.nav-toggle{border:var(--px-border); border-radius:0 !important; background:var(--white);}
/* ==========================================================================
HARMONISASI GRID, JARAK, & KONTROL MENGAMBANG
Semua nilai fluid: minimum = tampilan mobile, maksimum = desktop.
Jadi proporsi mobile & desktop identik, hanya skalanya yang tumbuh.
========================================================================== */
/* Grid Skills berisi 5 kartu — kartu AI (paling banyak isinya) melebar 2 kolom
supaya baris terakhir selalu penuh, tidak ada kartu menggantung sendirian
dengan ruang kosong di sampingnya. Hanya berlaku pada grid statis
(fallback reduced-motion / sebelum marquee JS aktif) — mode marquee (flex)
tidak terpengaruh karena grid-column tidak berlaku pada flex item. */
@media (min-width:981px){
.skills-grid:not(.px-marquee) .skill-card:nth-child(4){grid-column:span 2 !important;}
}
@media (max-width:980px) and (min-width:621px){
.skills-grid:not(.px-marquee) .skill-card:nth-child(5){grid-column:span 2 !important;}
}
#about .about-grid{gap:clamp(20px, 3.4vw, 48px) !important;}
.skills-grid:not(.px-marquee){gap:clamp(10px, 1.4vw, 18px) !important;}
.proj-grid:not(.px-marquee){gap:clamp(14px, 1.6vw, 22px) !important;}
.contact-grid{gap:clamp(20px, 3vw, 40px) !important;}
.contact-wrap{padding:clamp(24px, 4.6vw, 64px) clamp(18px, 3.4vw, 48px) !important;}
.form-card{padding:clamp(20px, 2.2vw, 28px) !important;}
.stat-grid{gap:clamp(8px, 1.1vw, 14px) !important;}
.stat-card{padding:clamp(14px, 2vw, 26px) clamp(6px, 1.4vw, 18px) !important;}
.stat-num{font-size:clamp(26px, 2.6vw, 32px) !important; line-height:1.2 !important;}
.stat-label{font-size:clamp(11px, 1.1vw, 13px) !important; line-height:1.4 !important; letter-spacing:.02em !important;}
.skill-card{padding:clamp(16px, 2.2vw, 26px) clamp(10px, 1.8vw, 24px) !important;}
/* timeline: padding kiri selalu cukup untuk dot (sebelumnya dot menimpa teks di mobile) */
.t-item{padding:0 0 clamp(30px, 3.4vw, 44px) clamp(36px, 3.6vw, 44px) !important;}
.t-item:last-child{padding-bottom:0 !important;}
/* marquee keahlian & project: jarak antar kartu ikut ritme yang sama */
.skills-grid.px-marquee .skill-card{margin-right:clamp(12px, 1.4vw, 18px) !important;}
.proj-grid.px-marquee .proj-card{margin-right:clamp(14px, 2vw, 28px) !important;}
/* navbar & kontrol mengambang sejajar dengan gutter halaman */
.navbar-wrap{padding:0 var(--px-gutter) !important; top:clamp(14px, 1.3vw, 18px) !important;}
.chat-fab{right:var(--px-gutter) !important; bottom:var(--px-gutter) !important;}
.back-to-top{right:var(--px-gutter) !important; bottom:calc(var(--px-gutter) + 72px) !important;}
.back-to-top{right:var(--px-gutter) !important; bottom:calc(var(--px-gutter) + 72px) !important;}
/* ==========================================================================
DESKTOP (≥981px): teks di KIRI (sejajar gutter), maskot di KANAN
Mobile & tablet tetap stacked (maskot di atas) — tidak diubah.
minmax(0,1fr) + min-width:0 wajib: tanpa itu marquee badge melebarkan
kolom & maskot terhimpit jadi 0px (bug grid blowout).
========================================================================== */
@media (min-width:981px){
.hero-inner{display:grid !important; grid-template-columns:minmax(0, 1fr) auto !important; align-items:center !important; gap:clamp(32px, 4vw, 64px) !important;}
.hero-visual{order:0 !important; width:auto !important; justify-content:flex-end !important; padding:0 !important; overflow:visible !important;}
.fox-stage{width:clamp(300px, 32vw, 380px) !important; margin:0 0 0 auto !important; aspect-ratio:48/40 !important; overflow:visible !important;}
.hero-copy{max-width:none !important;} /* isi penuh kolom kiri supaya marquee & tombol sejajar gutter */
}
/* ==========================================================================
PERBAIKAN UI/UX — MOBILE, MICRO-INTERACTION, KONSISTENSI VISUAL
Ditambahkan sebagai overlay lanjutan; tidak mengubah struktur di atas.
========================================================================== */
/* ---------- 1. TAP TARGET ≥44px (aksesibilitas sentuh, tanpa mengubah ukuran visual) ----------
Pakai pseudo-element sebagai hit-area transparan yang meluas melewati box visual,
jadi tombol kecil (theme-toggle, lang-btn, nav-toggle) tetap terlihat kompak
tapi area klik sungguhannya memenuhi standar 44x44px. */
.theme-toggle,.nav-toggle,.lang-btn{position:relative;}
.theme-toggle::after,.nav-toggle::after,.lang-btn::after{
content:''; position:absolute; inset:50%; width:44px; height:44px;
transform:translate(-50%,-50%); z-index:1;
}
.back-to-top,.chat-fab{min-width:44px !important; min-height:44px !important;}
/* ---------- 2. FEEDBACK KLIK/TAP KONSISTEN (pixel "press" di semua elemen interaktif) ----------
Menyatukan efek tekan gaya pixel: turun + shadow mengecil, dipakai lewat class
.px-pressed (ditambah script.js saat touchstart) supaya perangkat sentuh juga
dapat feedback yang sama seperti :active di desktop. */
.stat-card.px-pressed,.skill-card.px-pressed,.proj-card.px-pressed{
transform:translate(2px,2px) !important; box-shadow:2px 2px 0 var(--ink) !important;
transition:transform .08s steps(2), box-shadow .08s steps(2) !important;
}
.chip.px-pressed,.badge.px-pressed{
transform:translate(1px,1px) !important; box-shadow:1px 1px 0 var(--ink) !important;
}
.stat-card:active,.skill-card:active,.proj-card:active{transform:translate(2px,2px) !important; box-shadow:2px 2px 0 var(--ink) !important;}
.chip:active,.badge:active{transform:translate(1px,1px) !important; box-shadow:1px 1px 0 var(--ink) !important;}
/* ---------- 3. TRANSISI REVEAL LEBIH "HIDUP" — stagger per section (delay diatur script.js) ----------
Durasi dipercepat sedikit dan kurva dibuat sedikit overshoot ala pixel-snap,
supaya konten muncul terasa "menetap di tempat" bukan cuma fade biasa. */
.reveal,.reveal-scale{transition-duration:.5s !important; transition-timing-function:steps(6) !important;}
.reveal.in-view{animation:pxSettle .32s steps(4) 1;}
@keyframes pxSettle{0%{transform:translate3d(0,6px,0);}60%{transform:translate3d(0,-2px,0);}100%{transform:translate3d(0,0,0);}}
/* ---------- 4. LOADING SKELETON UNTUK GAMBAR PROJECT (sebelum gambar termuat) ----------
Placeholder pixel-checker yang "berkedip" pelan sampai ![]()
selesai load,
menggantikan area kosong polos supaya transisi ke gambar terasa lebih halus. */
.proj-thumb{position:relative; background:var(--gray-100);}
.proj-thumb img,.proj-thumb video{opacity:0; transition:opacity .3s steps(4);}
.proj-thumb img.px-loaded,.proj-thumb video.px-loaded{opacity:1;}
.proj-thumb:not(.thumb-missing)::before{
content:''; position:absolute; inset:0; z-index:0;
background-image:linear-gradient(45deg, var(--gray-200) 25%, transparent 25%, transparent 75%, var(--gray-200) 75%),
linear-gradient(45deg, var(--gray-200) 25%, transparent 25%, transparent 75%, var(--gray-200) 75%);
background-size:16px 16px; background-position:0 0, 8px 8px;
animation:pxSkeletonBlink 1.4s steps(2) infinite;
}
.proj-thumb:has(img.px-loaded)::before,.proj-thumb:has(video.px-loaded)::before{display:none;}
@keyframes pxSkeletonBlink{0%,100%{opacity:.5;}50%{opacity:.25;}}
[data-theme="dark"] .proj-thumb:not(.thumb-missing)::before{
background-image:linear-gradient(45deg, #2a251d 25%, transparent 25%, transparent 75%, #2a251d 75%),
linear-gradient(45deg, #2a251d 25%, transparent 25%, transparent 75%, #2a251d 75%);
}
/* ---------- 5. TRANSISI ANTAR-SECTION LEBIH SMOOTH (scroll snap ringan, opsional halus) ----------
Tidak pakai scroll-snap penuh (bisa terasa memaksa di mobile), cukup
scroll-behavior halus + sedikit padding-top supaya anchor navbar tidak menutupi judul. */
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--px-gutter) + 76px);}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
/* ---------- 6. KONSISTENSI VISUAL — satukan shadow & border-radius yang masih "acak" ----------
Beberapa komponen lama (chat-panel, chat-header-avatar, nav-logo-img) masih pakai
border-radius bulat + shadow soft ala neumorphism, bentrok dengan gaya pixel keras
di komponen lain. Disamakan ke bahasa visual pixel: kotak, border tegas, shadow hard. */
.chat-panel{border-radius:24px !important;}
.chat-header-avatar{border-radius:50% !important; border:2px solid var(--orange) !important; box-shadow:0 0 10px rgba(249,115,22,0.35) !important; overflow:hidden !important; background:#fff !important;}
.chat-header-avatar .chat-avatar-img{border-radius:50% !important; width:100% !important; height:100% !important; object-fit:contain !important;}
.msg-avatar{border-radius:50% !important; overflow:hidden !important;}
.msg-avatar .chat-avatar-img{border-radius:50% !important;}
.nav-logo-img{border-radius:0 !important;}
.fab-badge{border-radius:999px !important;}
/* ---------- 7. MOBILE UX: NAVBAR — jarak & ukuran tombol lebih lega, cegah crowding ----------
Pada layar sempit, grup lang-switch + theme-toggle + nav-toggle cenderung berdesakan
dan margin antar elemen tidak konsisten (2px, 4px, 6px tercampur di style.css).
Disamakan ke satu jarak (8px) supaya kelompok kontrol kanan navbar terlihat rapi. */
@media (max-width:980px){
.navbar{gap:8px !important;}
.lang-switch,.theme-toggle,.nav-toggle{margin-left:0 !important; margin-right:0 !important;}
.navbar > .lang-switch,.navbar > .theme-toggle,.navbar > .nav-toggle{margin:0 !important;}
}
/* ---------- 8. MOBILE UX: DIALOG FOX — pastikan tidak overflow di layar sangat sempit ----------
Sebelumnya width:max-content bisa melebihi layar pada device <340px; dibatasi
dengan max-width relatif viewport dan word-wrap dipastikan aktif. */
@media (max-width:400px){
.px-dialog{max-width:80vw !important; font-size:13px !important;}
}
/* ---------- 9. MOBILE UX: FORM — pastikan input tidak memicu auto-zoom iOS (font-size < 16px) ----------
iOS Safari otomatis zoom in saat fokus ke input dengan font-size di bawah 16px,
ini mengganggu alur pengisian form kontak di HP. Dikunci minimal 16px saat fokus. */
@media (max-width:980px){
.form-row input,.form-row textarea,.chat-input,.chat-setup input{font-size:max(16px, 1em) !important;}
}
/* ---------- 10. MICRO-INTERACTION: nav-links aktif berpindah lebih terasa (pixel snap, bukan slide halus) ---------- */
.nav-links a{transition:transform .1s steps(2), box-shadow .1s steps(2), background-color .1s steps(2) !important;}
/* ---------- 11. FOCUS STATE — aksesibilitas keyboard, gaya pixel (outline kotak, bukan ring blur) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,.btn:focus-visible,.nav-cta:focus-visible{
outline:3px solid var(--orange) !important; outline-offset:2px !important; box-shadow:none !important;
}
/* ---------- 12. BACK-TO-TOP & CHAT-FAB — feedback tekan konsisten dengan tombol lain ---------- */
.back-to-top:active,.chat-fab:active{transform:translate(2px,2px) !important; box-shadow:1px 1px 0 var(--ink) !important;}
/* ==========================================================================
ANIMASI BARU — STARFIELD HERO, TYPEWRITER JUDUL, SKILL ICON POP
========================================================================== */
/* ---------- HERO INNER Z-INDEX ---------- */
.hero-inner{position:relative; z-index:2;}
/* ---------- TYPEWRITER: kursor berkedip di ujung teks selama proses mengetik ---------- */
.px-typing{position:relative;}
.px-typing::after{
content:''; display:inline-block; width:3px; height:.85em; margin-left:2px;
background:var(--orange); vertical-align:middle; animation:blinkDot .6s steps(2) infinite;
}
.hero-copy h1{min-height:1.35em;} /* cegah layout jump saat teks masih kosong di awal ketik */
/* ---------- SKILL ICON POP: meletup dari kecil + rotasi kecil ke ukuran normal, gaya pixel-snap ----------
Progressive enhancement: default tetap terlihat (fallback aman jika JS/IO gagal),
class .px-icon-ready (ditambah JS saat IntersectionObserver tersedia) yang menyembunyikan
sebelum .px-icon-pop memicu animasi masuk. */
.sk-icon.px-icon-ready{transform:scale(0) rotate(-8deg); opacity:0;}
.sk-icon.px-icon-pop{
animation:pxIconPop .45s steps(6) forwards;
}
@keyframes pxIconPop{
0%{transform:scale(0) rotate(-8deg); opacity:0;}
60%{transform:scale(1.25) rotate(4deg); opacity:1;}
80%{transform:scale(.92) rotate(-2deg);}
100%{transform:scale(1) rotate(0deg); opacity:1;}
}
@media (prefers-reduced-motion:reduce){
.sk-icon{transform:none; opacity:1; animation:none !important;}
.px-typing::after{display:none;}
}
/* ==========================================================================
CHATGPT / GEMINI EMBEDDED UI/UX IN CONTACT SECTION
========================================================================== */
.contact-grid {
display: grid !important;
grid-template-columns: 0.95fr 1.25fr !important;
gap: clamp(28px, 3.8vw, 48px) !important;
align-items: start !important;
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
@media (max-width: 960px) {
.contact-grid {
grid-template-columns: minmax(0, 1fr) !important;
gap: 32px !important;
}
}
.contact-right-panel {
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
max-width: 100%;
}
/* Chat Embed Card (ChatGPT / Gemini Workspace Canvas) */
.chat-embed-card {
display: flex;
flex-direction: column;
height: 570px;
max-height: calc(100vh - 120px);
background: #ffffff;
border-radius: 24px !important;
border: 1px solid rgba(21, 19, 15, 0.08) !important;
box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.3), 0 4px 18px -4px rgba(0, 0, 0, 0.08);
overflow: hidden;
position: relative;
transition: border-color 0.3s ease, background 0.3s ease;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
[data-theme="dark"] .chat-embed-card {
background: #171410;
border-color: #2e261d !important;
box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
/* Header */
.chat-embed-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
background: #faf8f5;
border-bottom: 1px solid #eeebe5;
flex-shrink: 0;
gap: 12px;
}
[data-theme="dark"] .chat-embed-header {
background: #1f1a14;
border-bottom-color: #2b2319;
}
.chat-ai-profile {
display: flex;
align-items: center;
gap: 12px;
}
.chat-ai-avatar {
width: 38px;
height: 38px;
border-radius: 50% !important;
background: #ffffff;
border: 1.5px solid var(--orange) !important;
box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25) !important;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 2px;
flex-shrink: 0;
}
.chat-ai-details {
display: flex;
flex-direction: column;
gap: 2px;
}
.chat-ai-name-row {
display: flex;
align-items: center;
gap: 8px;
}
.chat-ai-name-row h4 {
font-family: var(--font-display) !important;
font-size: 14px !important;
font-weight: 700;
color: var(--ink);
margin: 0;
line-height: 1.2;
}
[data-theme="dark"] .chat-ai-name-row h4 {
color: #f5efe6;
}
.chat-ai-sub {
display: flex;
align-items: center;
gap: 5px;
font-family: var(--font-body) !important;
font-size: 11.5px !important;
color: var(--gray-500);
}
[data-theme="dark"] .chat-ai-sub {
color: #9c9184;
}
.chat-ai-sub .status-dot {
width: 6.5px;
height: 6.5px;
border-radius: 50%;
background: #22c55e;
animation: pulseDot 2s infinite;
display: inline-block;
}
.chat-reset-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(21, 19, 15, 0.05);
border: 1px solid rgba(21, 19, 15, 0.1);
color: var(--gray-600);
font-family: var(--font-body) !important;
font-size: 11.5px !important;
font-weight: 600;
cursor: pointer;
transition: all 0.25s ease;
}
.chat-reset-btn svg {
width: 13px;
height: 13px;
transition: transform 0.35s ease;
}
.chat-reset-btn:hover {
background: rgba(249, 115, 22, 0.12);
border-color: var(--orange);
color: var(--orange-deep);
}
.chat-reset-btn:hover svg {
transform: rotate(-180deg);
}
[data-theme="dark"] .chat-reset-btn {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.12);
color: #d6cfc2;
}
[data-theme="dark"] .chat-reset-btn:hover {
background: rgba(249, 115, 22, 0.2);
border-color: var(--orange);
color: #ffb066;
}
/* Chat Messages area */
.chat-embed-messages {
flex: 1;
overflow-y: auto;
padding: 20px 20px 14px;
display: flex;
flex-direction: column;
gap: 14px;
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: rgba(21, 19, 15, 0.15) transparent;
}
.chat-embed-messages::-webkit-scrollbar {
width: 5px;
}
.chat-embed-messages::-webkit-scrollbar-thumb {
background: rgba(21, 19, 15, 0.15);
border-radius: 999px;
}
[data-theme="dark"] .chat-embed-messages::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
}
/* Chat message bubbles: ChatGPT / Gemini styling */
.chat-msg {
display: flex;
gap: 10px;
align-items: flex-start;
animation: msgSlideIn 0.25s ease-out;
}
.chat-msg.user {
flex-direction: row-reverse;
align-items: flex-end;
}
.chat-msg .msg-avatar {
width: 30px;
height: 30px;
border-radius: 50% !important;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-top: 2px;
}
.chat-msg:not(.user) .msg-avatar {
background: #ffffff;
border: 1px solid rgba(249, 115, 22, 0.4);
box-shadow: 0 2px 6px rgba(249, 115, 22, 0.2);
padding: 2px;
}
.chat-msg.user .msg-avatar {
background: var(--ink);
color: #fff;
font-family: var(--font-display) !important;
font-size: 11px !important;
font-weight: 700;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .chat-msg.user .msg-avatar {
background: #2e261e;
color: #ffaa5e;
border: 1px solid #4a3d2e;
}
.msg-bubble {
max-width: 86% !important;
padding: 12px 16px !important;
font-family: var(--font-body) !important;
font-size: 13.5px !important;
line-height: 1.65 !important;
word-break: break-word;
position: relative;
letter-spacing: normal !important;
}
/* Bot bubble: Gemini style clean surface */
.chat-msg:not(.user) .msg-bubble {
background: #f7f5f2 !important;
border: 1px solid #e8e3dc !important;
border-radius: 18px 18px 18px 4px !important;
color: #1f1b15 !important;
}
[data-theme="dark"] .chat-msg:not(.user) .msg-bubble {
background: #231e17 !important;
border-color: #382f23 !important;
color: #f3ece1 !important;
}
/* User bubble: ChatGPT style sleek pill */
.chat-msg.user .msg-bubble {
background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%) !important;
color: #ffffff !important;
border: none !important;
border-radius: 18px 18px 4px 18px !important;
box-shadow: 0 4px 14px rgba(249, 115, 22, 0.3) !important;
}
.msg-bubble strong {
font-weight: 700;
}
.chat-msg:not(.user) .msg-bubble strong {
color: #15130f;
}
[data-theme="dark"] .chat-msg:not(.user) .msg-bubble strong {
color: #ffffff;
}
.chat-md-h2 {
display: block;
font-size: 14.5px;
font-weight: 700;
margin-top: 10px;
margin-bottom: 2px;
color: var(--orange-deep) !important;
}
[data-theme="dark"] .chat-md-h2 {
color: #ffaa5e !important;
}
.chat-md-h3 {
display: block;
font-size: 13.5px;
font-weight: 700;
margin-top: 8px;
margin-bottom: 2px;
color: var(--ink) !important;
}
[data-theme="dark"] .chat-md-h3 {
color: #f5efe6 !important;
}
.chat-bullet {
color: var(--orange);
font-weight: bold;
display: inline-block;
margin-right: 2px;
}
/* Typing bubble */
.typing-bubble {
display: inline-flex !important;
align-items: center;
gap: 5px;
padding: 10px 14px !important;
}
.typing-dot {
width: 6px;
height: 6px;
border-radius: 50% !important;
background: var(--orange);
animation: typingBounce 1.2s ease-in-out infinite;
}
/* Suggestion prompt chips (Gemini style) */
.chat-gemini-prompts {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 18px 10px;
overflow-x: auto;
flex-shrink: 0;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 24px), transparent 100%);
}
.chat-gemini-prompts::-webkit-scrollbar {
display: none;
}
.gemini-prompt-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: 999px !important;
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 600;
white-space: nowrap;
background: #ffffff;
border: 1px solid #dfd9cf !important;
color: #383229;
cursor: pointer;
transition: all 0.22s ease;
user-select: none;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.gemini-prompt-chip:hover {
background: var(--orange-mist);
border-color: var(--orange) !important;
color: var(--orange-deep);
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(249, 115, 22, 0.15);
}
[data-theme="dark"] .gemini-prompt-chip {
background: #221c15;
border-color: #3b3124 !important;
color: #dcd4c8;
}
[data-theme="dark"] .gemini-prompt-chip:hover {
background: #2d241a;
border-color: var(--orange) !important;
color: #ffaa5e;
}
/* Prompt Input Bar (ChatGPT / Gemini style) */
.chat-gemini-input-container {
padding: 8px 18px 14px;
display: flex;
flex-direction: column;
gap: 7px;
flex-shrink: 0;
background: transparent;
}
.chat-prompt-pill {
display: flex;
align-items: center;
gap: 10px;
background: #fcfbf9;
border: 1.5px solid #ded7cc;
border-radius: 999px !important;
padding: 5px 6px 5px 18px;
transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.chat-prompt-pill:focus-within {
border-color: var(--orange) !important;
background: #ffffff;
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}
[data-theme="dark"] .chat-prompt-pill {
background: #14110d;
border-color: #382f23;
}
[data-theme="dark"] .chat-prompt-pill:focus-within {
border-color: var(--orange) !important;
background: #1c1813;
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.22);
}
.chat-prompt-input {
flex: 1;
border: none !important;
outline: none !important;
background: transparent !important;
font-family: var(--font-body) !important;
font-size: 13.5px !important;
color: var(--ink);
padding: 7px 0;
letter-spacing: normal !important;
}
[data-theme="dark"] .chat-prompt-input {
color: #f5efe6;
}
.chat-prompt-input::placeholder {
color: var(--gray-400);
}
.chat-send-btn {
width: 36px;
height: 36px;
border-radius: 50% !important;
background: linear-gradient(135deg, var(--orange), var(--orange-deep)) !important;
color: #ffffff !important;
border: none !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 3px 10px rgba(249, 115, 22, 0.4);
}
.chat-send-btn:hover:not(:disabled) {
transform: scale(1.08);
box-shadow: 0 5px 14px rgba(249, 115, 22, 0.55);
}
.chat-send-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.chat-send-btn svg {
width: 15px;
height: 15px;
}
.chat-disclaimer {
font-family: var(--font-body) !important;
font-size: 11px !important;
color: var(--gray-500);
text-align: center;
line-height: 1.4;
letter-spacing: normal !important;
}
[data-theme="dark"] .chat-disclaimer {
color: #9c9184;
}
/* Contact Form embed adjustments */
.contact-form-embed {
margin: 0;
animation: msgSlideIn 0.3s ease;
}
/* Reposition Back to top button to standard right corner */
.back-to-top {
right: 28px !important;
}
@media (max-width: 480px) {
.chat-embed-card {
height: 520px;
border-radius: 20px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.chat-embed-header {
padding: 12px 12px;
min-width: 0;
box-sizing: border-box;
}
.chat-embed-messages {
padding: 12px 12px 8px;
min-width: 0;
width: 100%;
box-sizing: border-box;
}
.chat-gemini-prompts {
padding: 6px 12px 8px;
max-width: 100%;
box-sizing: border-box;
}
.chat-gemini-input-container {
padding: 6px 12px 12px;
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
.chat-prompt-pill {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding: 4px 5px 4px 12px !important;
}
.chat-prompt-input {
min-width: 0 !important;
width: 100% !important;
font-size: 14px !important;
}
.msg-bubble {
max-width: calc(100% - 44px) !important;
min-width: 0 !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
font-size: 13px !important;
}
.chat-msg {
min-width: 0 !important;
max-width: 100% !important;
}
.chat-consultation-form-card {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 12px 12px !important;
}
.back-to-top {
right: 14px !important;
bottom: 14px !important;
}
}
/* =========================================================
MOBILE CONTACT SECTION & CHATBOT — ANTI OVERFLOW FIX
Mencegah horizontal scroll/clipping di layar <=600px.
========================================================= */
@media (max-width: 640px) {
/* Root overflow guard untuk mobile browser (Safari/Chrome scroll root = html) */
html, body {
overflow-x: hidden !important;
max-width: 100% !important;
width: 100% !important;
}
/* Container tidak boleh memiliki padding yang mendorong konten keluar layar */
.container {
padding-left: clamp(14px, 4vw, 20px) !important;
padding-right: clamp(14px, 4vw, 20px) !important;
box-sizing: border-box !important;
max-width: 100% !important;
width: 100% !important;
}
/* contact-wrap: kurangi shadow hard (8px mendorong kanan) + paksa masuk layar */
.contact-wrap {
box-sizing: border-box !important;
max-width: 100% !important;
width: 100% !important;
overflow: hidden !important;
padding: 22px 16px !important;
box-shadow: 3px 3px 0 rgba(0,0,0,.45) !important;
}
/* Heading pixel font monospace: bisa sangat lebar, wajib word-break */
.contact-copy h2 {
font-size: clamp(15px, 5vw, 24px) !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
line-height: 1.5 !important;
hyphens: auto !important;
}
.contact-copy p {
overflow-wrap: break-word !important;
max-width: 100% !important;
font-size: 14px !important;
}
/* Grid kontak: satu kolom, min-width:0 mencegah blowout */
.contact-grid {
grid-template-columns: minmax(0, 1fr) !important;
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.contact-right-panel {
min-width: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
/* Link kontak: cegah teks meluber */
.clink {
font-size: 13px !important;
padding: 10px 12px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
word-break: break-all !important;
}
/* Chat embed card: full width tanpa blowout */
.chat-embed-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
height: 500px !important;
border-radius: 16px !important;
}
.chat-embed-header {
padding: 10px 12px !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* Nama AI di header jangan terpotong */
.chat-ai-name-row h4 {
font-size: 13px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
}
.chat-reset-btn span {
display: none; /* sembunyikan teks "Reset Chat", cukup icon */
}
.chat-reset-btn {
padding: 6px 8px !important;
}
.chat-embed-messages {
padding: 12px 10px 8px !important;
min-width: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.chat-msg {
min-width: 0 !important;
max-width: 100% !important;
gap: 8px;
}
.msg-bubble {
max-width: calc(100% - 40px) !important;
min-width: 0 !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
font-size: 12.5px !important;
padding: 10px 12px !important;
line-height: 1.55 !important;
}
.chat-gemini-prompts {
padding: 5px 10px 7px !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.gemini-prompt-chip {
font-size: 11px !important;
padding: 6px 10px !important;
}
.chat-gemini-input-container {
padding: 6px 10px 10px !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
.chat-prompt-pill {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding: 4px 5px 4px 12px !important;
}
.chat-prompt-input {
min-width: 0 !important;
width: 100% !important;
font-size: 14px !important; /* >=14px cegah iOS auto-zoom */
}
.chat-send-btn {
flex-shrink: 0 !important;
width: 32px !important;
height: 32px !important;
}
/* Consultation form card dalam chat */
.chat-consultation-form-card {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 12px 10px !important;
}
.cf-actions {
grid-template-columns: 1fr !important;
}
.cf-btn {
font-size: 12px !important;
padding: 8px 10px !important;
}
/* Back-to-top: jauhkan dari tepi layar */
.back-to-top {
right: 14px !important;
bottom: 14px !important;
}
}
/* ==========================================================================
INTERACTIVE IN-CHAT CONSULTATION FORM CARD
========================================================================== */
.chat-consultation-form-card {
width: 100%;
max-width: 100%;
box-sizing: border-box;
background: #ffffff;
border: 1.5px solid #ded8ce;
border-radius: 18px !important;
padding: 16px 18px;
margin-top: 10px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
font-family: var(--font-body);
}
[data-theme="dark"] .chat-consultation-form-card {
background: #201a14;
border-color: #382e22;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.cf-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #eee8df;
gap: 8px;
flex-wrap: wrap;
}
[data-theme="dark"] .cf-header {
border-bottom-color: #2f251a;
}
.cf-title-row {
display: flex;
align-items: center;
gap: 8px;
}
.cf-icon {
width: 16px;
height: 16px;
color: var(--orange-deep);
flex-shrink: 0;
}
.cf-header h5 {
font-family: var(--font-display) !important;
font-size: 13px !important;
font-weight: 700;
color: var(--ink);
margin: 0;
}
[data-theme="dark"] .cf-header h5 {
color: #f5efe6;
}
.cf-badge {
font-size: 10.5px;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
background: rgba(249, 115, 22, 0.1);
color: var(--orange-deep);
border: 1px solid rgba(249, 115, 22, 0.2);
}
[data-theme="dark"] .cf-badge {
background: rgba(249, 115, 22, 0.18);
color: #ffaa5e;
}
.cf-body {
display: flex;
flex-direction: column;
gap: 10px;
}
.cf-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.cf-field label {
font-size: 11.5px;
font-weight: 600;
color: var(--gray-600);
}
[data-theme="dark"] .cf-field label {
color: #c4bbb0;
}
.cf-req {
color: #ef4444;
}
.cf-input {
width: 100%;
border: 1.5px solid #ded7cc;
border-radius: 10px;
padding: 8px 12px;
font-family: var(--font-body);
font-size: 13px;
background: #fbfaf8;
color: var(--ink);
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
outline: none;
}
.cf-input:focus {
border-color: var(--orange);
background: #ffffff;
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}
[data-theme="dark"] .cf-input {
background: #15110d;
border-color: #382f23;
color: #f5efe6;
}
[data-theme="dark"] .cf-input:focus {
background: #1a1510;
border-color: var(--orange);
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}
.cf-textarea {
resize: vertical;
min-height: 64px;
}
.cf-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 4px;
}
@media (max-width: 480px) {
.cf-actions {
grid-template-columns: 1fr;
}
}
.cf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 9px 12px;
border-radius: 10px;
font-family: var(--font-body);
font-size: 12.5px;
font-weight: 600;
border: none;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s;
user-select: none;
}
.cf-btn svg {
width: 15px;
height: 15px;
flex-shrink: 0;
}
.cf-btn:hover {
transform: translateY(-1px);
}
.cf-btn:active {
transform: translateY(0);
}
.cf-btn-wa {
background: #25D366;
color: #ffffff;
box-shadow: 0 3px 10px rgba(37, 211, 102, 0.3);
}
.cf-btn-wa:hover {
background: #20ba59;
box-shadow: 0 5px 14px rgba(37, 211, 102, 0.45);
}
.cf-btn-email {
background: #1f1a14;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}
.cf-btn-email:hover {
background: #2e261e;
}
[data-theme="dark"] .cf-btn-email {
background: #2b2319;
border-color: #443727;
}
[data-theme="dark"] .cf-btn-email:hover {
background: #392e21;
}
.cf-status {
padding: 8px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
line-height: 1.4;
margin-top: 4px;
}
.cf-status.success {
background: rgba(34, 197, 94, 0.12);
color: #15803d;
border: 1px solid rgba(34, 197, 94, 0.25);
}
[data-theme="dark"] .cf-status.success {
background: rgba(34, 197, 94, 0.2);
color: #4ade80;
border-color: rgba(34, 197, 94, 0.3);
}
.cf-status.error {
background: rgba(239, 68, 68, 0.12);
color: #b91c1c;
border: 1px solid rgba(239, 68, 68, 0.25);
}
[data-theme="dark"] .cf-status.error {
background: rgba(239, 68, 68, 0.2);
color: #f87171;
border-color: rgba(239, 68, 68, 0.3);
}
/* ==========================================================================
CUSTOM RADIO GROUP — pengganti native