/* ═══════════════════════════════════════════════════════════
   HAIRCULES — Dekorasi & motion tambahan (barbershop flavor)
   Dibaca setelah main.css + tentang.css.
   ═══════════════════════════════════════════════════════════ */

/* ---- angka display: lining figures (bukan oldstyle Cormorant) ---- */
.stats .st b,.tstats b,.tl-item .yr,.hero-media .badge b,.price-row .pp,.od .tagline,.crumb,.stats,.tstats{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1,"tnum" 1}

/* ---- section dengan FOTO background + overlay (biar tak datar) ---- */
.sec-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}

.testimonial-sec{position:relative;overflow:hidden}
.testimonial-sec .sec-bg{filter:grayscale(.2) brightness(.3) saturate(.85);animation:kenburns 20s ease-in-out infinite alternate}
.testimonial-sec::after{content:'';position:absolute;inset:0;z-index:0;background:radial-gradient(120% 95% at 50% 45%,transparent 22%,rgba(16,13,10,.78) 78%),linear-gradient(var(--dark),transparent 22%,transparent 72%,var(--dark))}
.testimonial-sec .container{position:relative;z-index:1}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.14)}}
@media(prefers-reduced-motion:reduce){.testimonial-sec .sec-bg{animation:none}}
.stars{display:flex;gap:7px;justify-content:center;margin-bottom:24px;color:var(--brass-lt)}
.stars svg{width:21px;height:21px;fill:currentColor;stroke:none}

.cta-band{position:relative;overflow:hidden;background:linear-gradient(125deg,var(--brass-lt) -10%,var(--brass) 40%,var(--brass-deep) 110%) !important}
.cta-band .sec-bg{display:none}
.cta-band::before{content:'';position:absolute;inset:0;z-index:0;background:url("../img/barber-pattern.svg") repeat;background-size:128px 128px;opacity:.16}
.cta-band::after{content:'';position:absolute;inset:0;z-index:0;background:radial-gradient(120% 130% at 50% 0%,rgba(255,244,214,.16),transparent 55%)}
.cta-band .container{position:relative;z-index:1}

/* ═══════════ INSTAGRAM CAROUSEL ═══════════ */
.ig-sec{background:var(--dark);color:var(--body-inv)}
.ig-tabs{display:flex;gap:10px;align-items:center;justify-content:center;margin-bottom:28px;flex-wrap:wrap}
.ig-tab{font-family:var(--cond);text-transform:uppercase;letter-spacing:.07em;font-size:13px;padding:9px 18px;border-radius:99px;border:1px solid var(--dark-line);background:transparent;color:var(--body-inv);cursor:pointer;transition:all .2s var(--ease)}
.ig-tab.active{background:var(--brass);color:var(--gold-ink);border-color:var(--brass)}
.ig-tab:not(.active):hover{border-color:var(--brass);color:var(--brass-lt)}
.ig-play{margin-left:4px;width:40px;height:40px;border-radius:50%;border:1px solid var(--dark-line);background:transparent;color:var(--brass-lt);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .2s}
.ig-play:hover{border-color:var(--brass);color:var(--brass)}
.ig-play svg{width:15px;height:15px;fill:currentColor}
.ig-carousel{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ig-track{display:flex;gap:16px;width:max-content;animation:igscroll 48s linear infinite;will-change:transform}
.ig-track.paused{animation-play-state:paused}
.ig-carousel:hover .ig-track{animation-play-state:paused}
@keyframes igscroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ig-track{animation:none;overflow-x:auto;padding-bottom:8px}.ig-carousel{mask:none;-webkit-mask:none}}
.ig-card{position:relative;flex:none;width:clamp(216px,25vw,264px);aspect-ratio:1;border-radius:14px;overflow:hidden;display:block;border:1px solid var(--dark-line);background:var(--dark-2)}
.ig-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.ig-card:hover img{transform:scale(1.07)}
.ig-card .ov{position:absolute;inset:0;background:linear-gradient(transparent 42%,rgba(8,6,4,.86));display:flex;flex-direction:column;justify-content:flex-end;padding:14px}
.ig-card .ov .h{display:flex;align-items:center;gap:7px;color:#fff;font-family:var(--cond);font-size:12px;letter-spacing:.03em;text-transform:none}
.ig-card .ov .h svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
.ig-card .ov .cap{color:rgba(255,255,255,.82);font-size:11.5px;margin-top:4px;line-height:1.3}
.ig-card .igmark{position:absolute;top:11px;right:11px;width:24px;height:24px;color:#fff;opacity:.92}
.ig-card .igmark svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7}

/* ---- grain halus untuk kehangatan ---- */
.grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:150px}
@media(prefers-reduced-motion:reduce){.grain{display:none}}

/* ---- pita marquee layanan ---- */
.mband{background:var(--dark);color:var(--ink-inv);padding:20px 0;overflow:hidden;border-block:1px solid var(--dark-line);position:relative}
.mband .marquee{align-items:center}
.mband .v{gap:22px;padding:0 26px}
.mband .v span{font-family:var(--cond);font-weight:500;font-size:clamp(19px,2.3vw,30px);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-inv)}
.mband .v svg{width:22px;height:22px;color:var(--brass);flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mband .v:nth-child(3n) span{color:transparent;-webkit-text-stroke:1px var(--brass-lt)}

/* ---- ornamen gunting pemisah section ---- */
.divider{display:flex;align-items:center;justify-content:center;gap:20px;padding:clamp(30px,5vw,56px) 0}
.divider .ln{height:1px;width:clamp(60px,16vw,160px);background:linear-gradient(90deg,transparent,var(--brass));transform:scaleX(0);transform-origin:right;transition:transform .9s var(--ease)}
.divider .ln.r{background:linear-gradient(90deg,var(--brass),transparent);transform-origin:left}
.divider.in .ln{transform:scaleX(1)}
.divider .ic{width:30px;height:30px;color:var(--brass);flex:none;opacity:0;transform:rotate(-40deg) scale(.6);transition:opacity .6s var(--ease) .3s,transform .7s var(--ease) .3s}
.divider.in .ic{opacity:1;transform:rotate(0) scale(1)}
.divider .ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.divider.on-dark .ln{background:linear-gradient(90deg,transparent,var(--brass-lt))}
.divider.on-dark .ln.r{background:linear-gradient(90deg,var(--brass-lt),transparent)}

/* ---- barber-tape beranimasi (garis diagonal bergerak) ---- */
.bartape{height:7px;width:100%;background:repeating-linear-gradient(-45deg,var(--brass) 0 11px,var(--brass-deep) 11px 22px);background-size:31px 31px;animation:tape 1.3s linear infinite;border-radius:4px}
@keyframes tape{to{background-position:-31px 0}}
@media(prefers-reduced-motion:reduce){.bartape{animation:none}}

/* ---- ikon barbershop melayang (dekor, parallax) ---- */
.has-deco{position:relative;overflow:hidden}
.has-deco > .container{position:relative;z-index:1}
.deco{position:absolute;color:var(--brass);opacity:.07;pointer-events:none;z-index:0;will-change:transform}
.deco svg{width:clamp(120px,17vw,240px);height:auto;fill:none;stroke:currentColor;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.section.dark .deco{color:var(--brass-lt);opacity:.09}
.deco.tr{top:6%;right:-3%}
.deco.bl{bottom:6%;left:-3%}
.deco.tl{top:10%;left:-2%}

/* ---- garis flourish di bawah eyebrow section ---- */
.sec-head .eyebrow{position:relative;display:inline-block}
.sec-head .eyebrow::after{content:'';display:block;height:2px;width:34px;margin:10px auto 0;background:var(--brass);transform:scaleX(0);transition:transform .7s var(--ease) .2s}
.sec-head.in .eyebrow::after,.reveal.in .eyebrow::after,.in .eyebrow::after{transform:scaleX(1)}

/* ---- hover kartu lebih hidup ---- */
.svc{transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s var(--ease)}
.svc:hover{transform:translateY(-9px)}
.svc:hover .ic{transform:rotate(-8deg) scale(1.08)}
.svc .ic{transition:transform .4s var(--ease),background .3s,color .3s}
.outlet{transition:transform .38s var(--ease),box-shadow .38s var(--ease)}
.outlet:hover{transform:translateY(-8px)}
.outlet .ph img{transition:transform .6s var(--ease)}
.outlet:hover .ph img{transform:scale(1.06)}
.od-media img,.brand-card img.bg{transition:transform .8s var(--ease)}
.od:hover .od-media img{transform:scale(1.04)}

/* ---- badge hero: dentang halus ---- */
.hero-media .badge{animation:floaty 5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){.hero-media .badge{animation:none}}