:root{--bg:#07070f;--bg2:#0d0d1c;--card:#0c0c1a;--ink:#f4f6ff;--muted:#9aa0bd;--red:#ff2d55;--red2:#ff6b87;--blue:#4d7cff;--line:rgba(77,124,255,.35);--head:'Bebas Neue',Impact,sans-serif;--sans:'Outfit',system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background-color:var(--bg);background-image:radial-gradient(600px 420px at 88% 0,rgba(255,45,85,.14),transparent),radial-gradient(700px 500px at 0 35%,rgba(77,124,255,.13),transparent);background-attachment:fixed;color:var(--ink);font-family:var(--sans);line-height:1.6;padding-bottom:84px}
a{color:inherit}[hidden]{display:none!important}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
header{position:sticky;top:0;z-index:20;background:rgba(7,7,15,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
header .wrap{display:flex;justify-content:space-between;align-items:center;height:62px;gap:12px}
.logo{font:400 1.9rem var(--head);letter-spacing:.06em;text-decoration:none;color:var(--ink)}
.logo span{color:var(--red);text-shadow:0 0 8px var(--red),0 0 22px var(--red)}
nav{display:flex;gap:22px;align-items:center}
nav a{text-decoration:none;color:var(--muted);font-size:.95rem}
nav a:hover{color:#fff}
.open{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--blue);border-radius:99px;padding:4px 12px;font-size:.78rem;box-shadow:0 0 10px rgba(77,124,255,.4)}
.open::before{content:"";width:8px;height:8px;border-radius:50%;background:#2ee66b;box-shadow:0 0 8px #2ee66b;animation:blink 1.6s infinite}
.open.off::before{background:#ff5470;box-shadow:0 0 8px #ff5470;animation:none}
@keyframes blink{50%{opacity:.35}}
.hero{padding:70px 0 64px}
.hero h1{font:400 clamp(3rem,10.5vw,6.6rem)/.95 var(--head);letter-spacing:.03em;width:fit-content;max-width:100%;color:#fff;text-shadow:0 0 6px #fff,0 0 20px var(--blue),0 0 44px var(--blue)}
.hero p{max-width:28ch;text-wrap:balance;line-height:1.45;color:#dbe6ff;margin:22px 0 28px;font-size:1.3rem;font-weight:500;letter-spacing:.02em;text-shadow:0 0 4px rgba(219,230,255,.7),0 0 14px #4d7cff,0 0 30px rgba(77,124,255,.8);animation:napasTeks 3.4s ease-in-out infinite}
@keyframes napasTeks{0%,100%{opacity:1}45%{opacity:.7;text-shadow:0 0 2px rgba(219,230,255,.4),0 0 7px rgba(77,124,255,.7)}50%{opacity:.55}55%{opacity:.8}}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--red);color:#fff;padding:14px 28px;text-decoration:none;border-radius:14px;border:0;font:600 1rem var(--sans);cursor:pointer;box-shadow:0 0 18px rgba(255,45,85,.55);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(255,45,85,.85)}
.btn.ghost{background:transparent;color:#cfe0ff;border:1px solid var(--blue);box-shadow:0 0 14px rgba(77,124,255,.4),inset 0 0 12px rgba(77,124,255,.15);margin-left:10px}
.btn.ghost:hover{box-shadow:0 0 26px rgba(77,124,255,.8),inset 0 0 14px rgba(77,124,255,.3)}
.btn.sm{padding:10px 20px;font-size:.95rem}
.pill{border:1px solid var(--red);color:var(--red2)!important;padding:7px 16px;border-radius:99px;display:inline-flex;align-items:center;gap:7px;box-shadow:0 0 10px rgba(255,45,85,.4)}
.facts{display:flex;flex-wrap:wrap;gap:12px;margin-top:44px;font-size:.82rem;color:var(--muted)}
.facts div{border:1px solid var(--line);border-radius:14px;padding:11px 16px;background:rgba(77,124,255,.06);box-shadow:0 0 14px rgba(77,124,255,.18)}
.facts b{display:block;font:400 1.2rem var(--head);letter-spacing:.05em;color:var(--ink);text-transform:uppercase}
section{padding:66px 0;scroll-margin-top:62px}
.alt{background:rgba(13,13,28,.5)}
h2{font:400 clamp(2.4rem,6vw,3.4rem)/1.05 var(--head);letter-spacing:.04em;margin-bottom:10px;text-shadow:0 0 14px rgba(77,124,255,.8)}
.sub{color:var(--muted);margin-bottom:30px;max-width:52ch}
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.person{padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:0 0 16px rgba(77,124,255,.14)}
.person .av{width:54px;height:54px;border-radius:50%;border:2px solid var(--red);color:var(--red2);display:grid;place-items:center;font:400 1.8rem var(--head);margin-bottom:14px;box-shadow:0 0 14px rgba(255,45,85,.5)}
.person h3{font:400 1.7rem var(--head);letter-spacing:.04em}
.person p{color:var(--muted);font-size:.95rem}
.gtools{margin-bottom:16px}.gtools input{max-width:300px}.gfilter{margin-bottom:18px}
.cnt{color:var(--muted);font-size:.9rem;margin:0 0 14px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.g{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card);padding:0;color:var(--ink);font:inherit;text-align:left;cursor:pointer;display:block;width:100%;transition:box-shadow .2s,border-color .2s}
.g:hover{border-color:var(--blue);box-shadow:0 0 20px rgba(77,124,255,.5)}
.g .im{position:relative;aspect-ratio:4/5;background:var(--bg2);overflow:hidden}
.g .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:.82rem;text-align:center;padding:12px;background:repeating-linear-gradient(135deg,rgba(77,124,255,.07) 0 10px,transparent 10px 20px)}
.ph svg{width:52px;height:52px;animation:snip 1.6s ease-in-out infinite}
.ph small{font-size:.7rem;opacity:.85;word-break:break-all}
.g .tx{padding:12px 14px}.g .tx b{font:400 1.35rem var(--head);letter-spacing:.04em;display:block;line-height:1.2}.g .tx small{color:var(--muted)}
.g.on{border-color:var(--red);box-shadow:0 0 0 2px var(--red),0 0 24px rgba(255,45,85,.6)}
.g .ck{position:absolute;top:10px;right:10px;z-index:2;background:var(--red);color:#fff;border-radius:99px;padding:3px 12px;font-size:.8rem;font-weight:600;display:none}
.g.on .ck{display:block}
.pick{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;padding:14px 18px;border:1px solid var(--red);border-radius:16px;background:var(--card);box-shadow:0 0 18px rgba(255,45,85,.35)}
.pick span{color:var(--muted)}.pick b{font:400 1.6rem var(--head);letter-spacing:.04em;color:var(--red2)}
.order{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:start}
.step{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:18px}
.step h3{font:400 1.7rem var(--head);letter-spacing:.04em;margin-bottom:14px;display:flex;gap:12px;align-items:center}
.step h3 i{font:600 .95rem var(--sans);font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;box-shadow:0 0 12px rgba(255,45,85,.7)}
.opts{display:grid;gap:10px}
.opt{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;width:100%}
.opt:hover{border-color:var(--blue);box-shadow:0 0 12px rgba(77,124,255,.4)}
.opt.on{border-color:var(--red);background:rgba(255,45,85,.1);box-shadow:0 0 14px rgba(255,45,85,.4)}
.opt small{display:block;color:var(--muted);font-size:.85rem}
.opt .pr{color:var(--red2);font-weight:600;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{padding:10px 16px;border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--ink);font:inherit;cursor:pointer;text-align:center}
.chip small{display:block;font-size:.72rem;color:var(--muted);line-height:1.2}
.chip:hover:not(:disabled){border-color:var(--blue);box-shadow:0 0 10px rgba(77,124,255,.5)}
.chip.on{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 0 16px rgba(255,45,85,.7)}
.chip.on small{color:#fff}
.chip:disabled{opacity:.3;cursor:not-allowed;text-decoration:line-through}
.dates .chip{min-width:62px;padding:8px 10px}.dates .chip b{font:400 1.4rem var(--head);display:block;line-height:1.2}
input[type=text],input[type=tel]{width:100%;padding:13px 16px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}
input[type=text]:focus,input[type=tel]:focus{border-color:var(--blue);box-shadow:0 0 14px rgba(77,124,255,.5);outline:0}
input::placeholder{color:#6a7094}
.sum{position:sticky;top:78px;background:var(--card);border:1px solid var(--red);border-radius:18px;padding:22px;box-shadow:0 0 22px rgba(255,45,85,.3)}
.sum h3{font:400 1.7rem var(--head);letter-spacing:.04em;margin-bottom:12px}
.sum dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.95rem;margin-bottom:16px}
.sum dt{color:var(--muted)}.sum dd{text-align:right}
.total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed var(--line);padding-top:14px;margin-bottom:16px}
.total b{font:400 2.2rem var(--head);color:var(--red2);text-shadow:0 0 12px rgba(255,45,85,.7)}
.sum .btn{width:100%;justify-content:center}
.sum .btn:disabled{background:#1a1a30;color:#6a7094;cursor:not-allowed;box-shadow:none;transform:none}
.hint{color:var(--muted);font-size:.85rem;margin-top:10px;text-align:center;min-height:1.3em}
.bar{display:none}
.hours{max-width:380px}.hours div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px}
footer{padding:30px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;text-align:center}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.pole{position:absolute;right:22px;top:0;width:130px}
.pole svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 12px rgba(77,124,255,.8))}
.hero .wrap{position:relative}

.lb{display:flex;align-items:center;gap:14px}
.lamp{flex:none;width:15px;height:42px;border-radius:8px;border:2px solid #2a3060;background:repeating-linear-gradient(45deg,#ff2d55 0 6px,#fff 6px 12px,#4d7cff 12px 18px,#fff 18px 24px);background-size:100% 34px;animation:putar 1.2s linear infinite;box-shadow:0 0 10px rgba(77,124,255,.8),0 -4px 0 -1px #2a3060,0 4px 0 -1px #2a3060}
.opt.on .lamp{box-shadow:0 0 14px rgba(255,45,85,.95),0 -4px 0 -1px #2a3060,0 4px 0 -1px #2a3060;animation-duration:.6s}
@keyframes putar{to{background-position:0 34px}}
/* latar belakang barbershop bergerak */
body::before{content:"";position:fixed;inset:-220px;z-index:-1;pointer-events:none;background-size:220px 220px;animation:geser 45s linear infinite;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220' fill='none' stroke-opacity='0.2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><g stroke='rgb(77,124,255)' transform='rotate(-18 50 50)'><circle cx='38' cy='72' r='8'/><circle cx='62' cy='72' r='8'/><path d='M41 65L66 24M59 65L34 24'/></g><g stroke='rgb(255,45,85)' transform='rotate(14 150 55)'><rect x='120' y='46' width='60' height='14' rx='3'/><path d='M126 60v14M134 60v14M142 60v14M150 60v14M158 60v14M166 60v14M174 60v14'/></g><g stroke='rgb(77,124,255)' transform='rotate(12 50 165)'><rect x='40' y='140' width='20' height='52' rx='4'/><path d='M40 152l20-8M40 166l20-8M40 180l20-8M44 136h12M44 196h12'/></g><g stroke='rgb(255,45,85)' transform='rotate(-16 150 170)'><rect x='118' y='164' width='46' height='10' rx='5'/><path d='M164 169l28-9v12z'/></g><g stroke='rgb(77,124,255)'><rect x='100' y='108' width='14' height='40' rx='7'/><path d='M100 120l14-8M100 132l14-8M100 144l14-8'/></g></svg>")}
body::after{content:"";position:fixed;inset:-120px;z-index:-1;pointer-events:none;background-size:120px 120px;animation:geserBalik 70s linear infinite;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><circle cx='20' cy='30' r='1.6' fill='rgb(77,124,255)' fill-opacity='.55'/><circle cx='85' cy='70' r='1.3' fill='rgb(255,45,85)' fill-opacity='.55'/><circle cx='55' cy='105' r='1.1' fill='rgb(255,255,255)' fill-opacity='.35'/></svg>")}
@keyframes geser{to{transform:translate(220px,220px)}}
@keyframes geserBalik{to{transform:translate(-120px,-120px)}}
#nm{margin-bottom:12px}
.dp{border:1px dashed var(--red);border-radius:14px;padding:14px 16px;background:rgba(255,45,85,.07);margin-bottom:14px;box-shadow:0 0 14px rgba(255,45,85,.25)}
.dp b{font:400 1.7rem var(--head);letter-spacing:.04em;color:var(--red2);text-shadow:0 0 10px rgba(255,45,85,.7)}
.dp p{color:var(--muted);font-size:.9rem;margin-top:4px}
.agree{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:.95rem}
.agree input{width:20px;height:20px;accent-color:#ff2d55;margin-top:3px;flex:none}
/* teks neon hidup */
.hero h1{animation:neonBiru 5s infinite}
@keyframes neonBiru{0%,17%,22%,61%,66%,100%{opacity:1;text-shadow:0 0 6px #fff,0 0 20px #4d7cff,0 0 44px #4d7cff,0 0 70px #4d7cff}19%{opacity:.45;text-shadow:0 0 2px #fff,0 0 6px #4d7cff}20.5%{opacity:.9}63%{opacity:.35;text-shadow:0 0 2px #fff,0 0 5px #4d7cff}64.5%{opacity:.85}}
.logo span{animation:neonMerah 6s infinite}
@keyframes neonMerah{0%,8%,12%,40%,43%,100%{opacity:1;text-shadow:0 0 6px #ff2d55,0 0 18px #ff2d55,0 0 38px #ff2d55}9%,11%,41.5%{opacity:.3;text-shadow:none}10%{opacity:.8}}
h2,.step h3,.sum h3,.person h3{animation:napas 3.2s ease-in-out infinite}
.step h3,.sum h3,.person h3{text-shadow:0 0 12px rgba(77,124,255,.8)}
.step:nth-child(even) h3{animation-delay:-1.6s}
@keyframes napas{0%,100%{opacity:1;text-shadow:0 0 6px rgba(255,255,255,.5),0 0 18px #4d7cff,0 0 34px rgba(77,124,255,.8)}50%{opacity:.62;text-shadow:0 0 2px rgba(255,255,255,.2),0 0 6px rgba(77,124,255,.6)}}
.total b{animation:napasMerah 2.6s ease-in-out infinite}
@keyframes napasMerah{50%{opacity:.6;text-shadow:0 0 4px rgba(255,45,85,.5)}}
.btn:not(.ghost):not(:disabled),.pill{animation:denyut 2.4s ease-in-out infinite}
@keyframes denyut{50%{box-shadow:0 0 34px rgba(255,45,85,.95)}}
/* ikon tombol bergerak */
.ic{width:19px;height:19px;flex:none}
.sc g{transform-box:view-box;transform-origin:10px 12px}
.sc .b1{animation:snipA 1.3s ease-in-out infinite}
.sc .b2{animation:snipB 1.3s ease-in-out infinite}
@keyframes snipA{50%{transform:rotate(-16deg)}}
@keyframes snipB{50%{transform:rotate(16deg)}}
@keyframes snip{50%{transform:rotate(-10deg) scale(1.08)}}
.cal{animation:bob 1.5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px)}}
.pl{animation:fly 1.4s ease-in-out infinite}
@keyframes fly{50%{transform:translate(3px,-3px) rotate(8deg)}}
.ey circle{animation:look 2.4s ease-in-out infinite}
@keyframes look{25%{transform:translateX(-2.5px)}75%{transform:translateX(2.5px)}}
.ar{animation:slide 1.1s ease-in-out infinite}
@keyframes slide{50%{transform:translateX(4px)}}

@media(max-width:820px){
  .order{grid-template-columns:1fr}.sum{position:static}
  nav a:not(.pill){display:none}.btn.ghost{margin:10px 0 0}
  .pole{position:absolute;width:74px;right:22px;top:6px}
  .gal{grid-template-columns:repeat(2,1fr);gap:12px}.gtools input{max-width:none}
  .gfilter{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px}.gfilter .chip{white-space:nowrap;flex:none}
  .bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bg);border-top:1px solid var(--red);padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));justify-content:space-between;align-items:center;gap:12px}
  .bar b{font:400 1.6rem var(--head);color:var(--red2);display:block;line-height:1.1}.bar small{color:var(--muted)}
  .bar .btn{padding:12px 22px}
}
@media(max-width:520px){html,body{overflow-x:clip}.open{display:none}.logo{white-space:nowrap;font-size:1.45rem}.pill{white-space:nowrap;padding:6px 11px;font-size:.85rem;gap:5px}.hero p{max-width:100%}}}
@media(prefers-reduced-motion:reduce){body::before,body::after{animation:none!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important}}

/* fitur tambahan */
#hp{margin-bottom:12px}
.loc.ok{border-color:#2ee66b;color:#9bf2b6;box-shadow:0 0 14px rgba(46,230,107,.5)}
.hint2{color:var(--muted);font-size:.82rem;margin-top:8px}
.rk{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:10px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.rk b{font:400 1.3rem var(--head);letter-spacing:.06em}.rk small{color:var(--muted)}
#qris{display:block;max-width:220px;width:100%;margin:12px auto 0;border-radius:12px;background:#fff;padding:6px}
.rev{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.rev blockquote{border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--card);box-shadow:0 0 16px rgba(77,124,255,.14)}
.rev cite{display:block;margin-top:10px;font-style:normal;color:var(--red2);font:400 1.2rem var(--head);letter-spacing:.05em}
.av.foto{overflow:hidden;padding:0}.av.foto img{width:100%;height:100%;object-fit:cover;display:block}
.lk{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.lk .btn.ghost{margin-left:0}
.map{border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 0 18px rgba(77,124,255,.3);height:320px;background:var(--card)}
.map iframe{width:100%;height:100%;border:0;filter:invert(.9) hue-rotate(180deg) saturate(.8)}
.pin{animation:loncat 1.3s ease-in-out infinite}@keyframes loncat{40%{transform:translateY(-4px)}}
.ig{animation:goyang 2.2s ease-in-out infinite}@keyframes goyang{10%,30%{transform:rotate(-12deg)}20%,40%{transform:rotate(12deg)}50%{transform:none}}
.wa{position:fixed;right:18px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:40;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 0 20px rgba(37,211,102,.8);text-decoration:none}
.wa .ic{width:28px;height:28px;animation:dering 2.6s ease-in-out infinite}
.wa::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:gelombang 2s ease-out infinite}
@keyframes dering{8%,24%{transform:rotate(-14deg)}16%,32%{transform:rotate(14deg)}40%{transform:none}}
@keyframes gelombang{to{transform:scale(1.7);opacity:0}}
@media(max-width:820px){.wa{bottom:calc(92px + env(safe-area-inset-bottom,0px));width:52px;height:52px}.map{height:260px}}
@media(prefers-reduced-motion:reduce){.wa::after{animation:none}}