/* ===========================================================
   Showcase — revamp tampilan Layanan & Portofolio (lebih elegan)
   Dimuat SETELAH style.css / home-v2.css / motion.css, jadi aturan di
   sini menimpa gaya lama. Markup diisi oleh js/content.js (dari CMS)
   dan dihidupkan oleh js/showcase.js.
=========================================================== */
body.v2{ --sc-ease: cubic-bezier(.22,1,.36,1); }

/* ---------- Kepala section: judul kiri, deskripsi kanan ---------- */
body.v2 #layanan .section-head,
body.v2 #proyek .section-head{
  display:grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr);
  grid-template-areas: "eye eye" "h2 p";
  column-gap: 64px; row-gap: 18px; align-items:end; max-width:none; margin-bottom: 64px;
}
body.v2 #layanan .section-head .eyebrow,
body.v2 #proyek .section-head .eyebrow{ grid-area: eye; justify-self:start; }
body.v2 #layanan .section-head h2,
body.v2 #proyek .section-head h2{ grid-area: h2; font-size: clamp(32px, 3.8vw, 52px); line-height:1.06; letter-spacing:-0.035em; max-width: 20ch; text-wrap: balance; margin:0; }
body.v2 #layanan .section-head p,
body.v2 #proyek .section-head p{ grid-area: p; margin:0; font-size:16.5px; line-height:1.7; color: var(--ink-soft); padding-bottom:8px; border-left:1px solid var(--line); padding-left:24px; }
@media (max-width:860px){
  body.v2 #layanan .section-head,
  body.v2 #proyek .section-head{ grid-template-columns:1fr; grid-template-areas:"eye" "h2" "p"; margin-bottom:44px; }
  body.v2 #layanan .section-head p,
  body.v2 #proyek .section-head p{ border-left:0; padding-left:0; }
}

/* ===========================================================
   LAYANAN
=========================================================== */
body.v2 .services-accordion{ grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: 64px; align-items: stretch; margin-top:0; }
body.v2 .services-accordion-list{ align-content:center; counter-reset: svc; }
body.v2 .service-acc-item,
body.v2 .service-acc-item[data-open="true"]{
  margin:0; padding: 26px 0 26px 0; background:none; box-shadow:none; border:0; border-radius:0;
  border-top: 1px solid var(--line);
}
body.v2 .service-acc-item:last-child{ border-bottom: 1px solid var(--line); }
body.v2 .service-acc-item[data-open="true"] + .service-acc-item{ border-top-color: var(--line); }
body.v2 .service-acc-item::before,
body.v2 .service-acc-item[data-open="true"]::before{
  content:""; position:absolute; left:0; top:-1px; height:2px; width:0; border-radius:0;
  background: var(--acc-color); bottom:auto; transition: width .9s var(--sc-ease);
}
body.v2 .service-acc-item[data-open="true"]::before{ width:100%; }
body.v2 .service-acc-toggle{ gap: 22px; align-items:flex-start; }
body.v2 .service-acc-num{
  width: 44px; font-size: 13px; font-weight: 700; letter-spacing: .12em; line-height: 30px;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
body.v2 .service-acc-item[data-open="true"] .service-acc-num{ color: var(--acc-color); }
body.v2 .service-acc-body h3{
  font-size: clamp(22px, 2.1vw, 28px); font-weight: 750; letter-spacing: -0.025em; line-height: 30px;
  color: #9aa6ba; transition: color .45s ease;
}
body.v2 .service-acc-item[data-open="true"] .service-acc-body h3,
body.v2 .service-acc-item:hover .service-acc-body h3{ color: var(--ink); }
body.v2 .service-acc-body p{
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  transition: max-height .6s var(--sc-ease), opacity .45s ease, margin-top .6s var(--sc-ease);
  color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; max-width: 470px;
}
body.v2 .service-acc-item[data-open="true"] .service-acc-body p{ max-height: 160px; opacity: 1; margin-top: 12px; }
body.v2 .service-acc-tags{ gap: 6px 8px; }
body.v2 .service-acc-item[data-open="true"] .service-acc-tags{ margin-top: 18px; }
body.v2 .service-acc-tags span,
body.v2 .service-acc-item[data-open="true"] .service-acc-tags span{
  background: transparent; box-shadow:none; border: 1px solid color-mix(in srgb, var(--acc-color) 28%, var(--line));
  color: var(--ink); font-size: 12.5px; font-weight: 600; padding: 6px 12px;
}
body.v2 .service-acc-arrow,
body.v2 .service-acc-item[data-open="true"] .service-acc-arrow{
  width: 36px; height: 36px; margin-top: -3px; background: transparent; border: 1px solid var(--line); color: var(--ink-faint);
}
body.v2 .service-acc-item[data-open="true"] .service-acc-arrow{ background: var(--ink); border-color: var(--ink); color:#fff; }
body.v2 .service-acc-item:not([data-open="true"]):hover .service-acc-arrow{ border-color: var(--ink); color: var(--ink); }

/* panggung visual: panel navy dengan cahaya warna layanan */
body.v2 .svc-stage{
  --stage-color:#2563eb;
  min-height: 600px; border-radius: 32px; border: 0;
  background: #0b1a36;
  box-shadow: 0 50px 100px -50px rgba(11,26,54,.75), inset 0 0 0 1px rgba(255,255,255,.06);
  perspective: 1400px;
}
body.v2 .svc-stage-bg{
  background:
    radial-gradient(52% 46% at 50% 44%, color-mix(in srgb, var(--stage-color) 42%, transparent), transparent 72%),
    radial-gradient(38% 30% at 88% 6%, color-mix(in srgb, var(--stage-color) 24%, transparent), transparent 70%),
    linear-gradient(165deg, #10244a 0%, #0a1731 100%);
  transition: background .9s ease;
}
body.v2 .svc-stage-bg::after{
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 20%, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 20%, transparent 78%);
}
body.v2 .svc-stage canvas, body.v2 .svc-stage-hint{ display:none !important; }
body.v2 .svc-stage-caption{
  background: rgba(10,22,46,.55); border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 40px -24px rgba(0,0,0,.6);
}
body.v2 .svc-stage-title{ color:#fff; }
body.v2 .svc-stage-num{ color: color-mix(in srgb, var(--stage-color) 60%, #fff); }
body.v2 .svc-stage .services-view-btn{ background: #fff !important; color: #0b1a36; }
body.v2 .svc-stage .services-view-btn-arrow{ background: var(--stage-color); color:#fff; transition: background .6s ease; }

/* adegan mockup UI per layanan */
.svc-scenes{ position:absolute; inset: 40px 40px 110px; transform-style: preserve-3d; transition: transform .6s var(--sc-ease); }
.svc-scene{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.svc-scene > *{ opacity:0; transform: translateY(26px) scale(.96); transition: opacity .55s ease, transform .9s var(--sc-ease); }
.svc-scene.on > *{ opacity:1; transform:none; }
.svc-scene.on > .sc-chip.c1{ transition-delay: .18s; } .svc-scene.on > .sc-chip.c2{ transition-delay: .32s; }
.sc-win{
  --c: var(--stage-color, #2563eb);
  position:relative; width: min(100%, 470px); background: #fff; border-radius: 16px; overflow:hidden;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08);
  font-family: inherit; color: #0f1b33;
}
.sc-bar{ display:flex; align-items:center; gap:6px; height:34px; padding:0 14px; background:#f3f6fb; border-bottom:1px solid #e6ecf5; }
.sc-bar i{ width:9px; height:9px; border-radius:50%; background:#d5dce8; }
.sc-bar i:nth-child(1){ background:#ff6b6b; } .sc-bar i:nth-child(2){ background:#ffc24b; } .sc-bar i:nth-child(3){ background:#2fd07b; }
.sc-bar span{ margin-left:10px; flex:1; height:20px; border-radius:6px; background:#fff; border:1px solid #e6ecf5; font-size:10.5px; color:#8a97ad; display:flex; align-items:center; padding-left:10px; font-weight:600; }
.sc-l{ display:block; height:8px; border-radius:6px; background:#e7edf6; }
.sc-chip{
  position:absolute; display:inline-flex; align-items:center; gap:8px; padding: 10px 14px; border-radius: 14px;
  background: rgba(255,255,255,.96); color:#0f1b33; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.55);
  animation: scBob 6s ease-in-out infinite;
}
.sc-chip b{ font-size: 18px; color: var(--stage-color); letter-spacing:-.02em; }
.sc-chip .sc-dot{ width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.18); }
.sc-chip.c1{ left: -4%; top: -2%; } .sc-chip.c2{ right: 0; bottom: 8%; animation-delay: -3s; }
@keyframes scBob{ 50%{ translate: 0 -8px; } }

/* 01 website */
.sc-web .sc-bd{ padding: 16px 18px 18px; display:grid; gap:14px; }
.sc-web .sc-nv{ display:flex; align-items:center; gap:10px; }
.sc-web .sc-nv b{ width:54px; height:12px; border-radius:4px; background: var(--c); }
.sc-web .sc-nv .sc-l{ width:34px; height:6px; } .sc-web .sc-nv em{ margin-left:auto; width:64px; height:20px; border-radius:99px; background:#0f1b33; }
.sc-web .sc-hr{ display:grid; grid-template-columns: 1.1fr 1fr; gap:14px; align-items:center; }
.sc-web .sc-hr .sc-t1{ height:14px; width:92%; background:#0f1b33; } .sc-web .sc-hr .sc-t2{ height:14px; width:70%; background:#0f1b33; margin-top:7px; }
.sc-web .sc-hr .sc-t3{ width:85%; margin-top:12px; } .sc-web .sc-hr .sc-t4{ width:60%; margin-top:6px; }
.sc-web .sc-hr .sc-ct{ display:inline-block; margin-top:14px; width:84px; height:24px; border-radius:99px; background: var(--c); }
.sc-web .sc-im{ aspect-ratio: 4/3.2; border-radius:12px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 70%, #fff), color-mix(in srgb, var(--c) 25%, #fff)); position:relative; overflow:hidden; }
.sc-web .sc-im::after{ content:""; position:absolute; left:18%; bottom:-20%; width:64%; height:70%; border-radius:50% 50% 0 0; background: rgba(255,255,255,.35); }
.sc-web .sc-cd{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; }
.sc-web .sc-cd span{ height:58px; border-radius:10px; background:#f3f6fb; border:1px solid #e6ecf5; position:relative; }
.sc-web .sc-cd span::before{ content:""; position:absolute; left:10px; top:10px; width:18px; height:18px; border-radius:6px; background: color-mix(in srgb, var(--c) 22%, #fff); }
.sc-web .sc-cd span::after{ content:""; position:absolute; left:10px; bottom:12px; width:60%; height:6px; border-radius:6px; background:#dfe6f1; }

/* 02 toko online */
.sc-store .sc-bd{ padding: 16px; display:grid; grid-template-columns: repeat(3,1fr); gap:10px; }
.sc-store .sc-pd{ border:1px solid #e6ecf5; border-radius:12px; padding:8px; display:grid; gap:7px; }
.sc-store .sc-pd .sc-ph{ aspect-ratio:1; border-radius:8px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 30%, #fff), #f3f6fb); }
.sc-store .sc-pd:nth-child(2) .sc-ph{ background: linear-gradient(160deg, #ffe3c8, #fff5ec); } .sc-store .sc-pd:nth-child(4) .sc-ph{ background: linear-gradient(160deg, #e5dcff, #f6f2ff); }
.sc-store .sc-pd:nth-child(6) .sc-ph{ background: linear-gradient(160deg, #d6f5e3, #f1fbf5); }
.sc-store .sc-pd .sc-l{ width:80%; height:6px; }
.sc-store .sc-pd .sc-pr{ display:flex; justify-content:space-between; align-items:center; }
.sc-store .sc-pd .sc-pr b{ width:40%; height:8px; border-radius:6px; background:#0f1b33; }
.sc-store .sc-pd .sc-pr i{ width:18px; height:18px; border-radius:6px; background: var(--c); }

/* 03 AI */
.sc-ai .sc-hd{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid #e6ecf5; }
.sc-ai .sc-av{ width:30px; height:30px; border-radius:10px; background: conic-gradient(from 200deg, var(--c), #ffb36b, var(--c)); }
.sc-ai .sc-hd b{ font-size:13.5px; } .sc-ai .sc-hd small{ font-size:11px; color:#22a45d; font-weight:700; margin-left:auto; }
.sc-ai .sc-ms{ padding:16px; display:grid; gap:10px; font-size:12.5px; line-height:1.45; }
.sc-ai .sc-ms p{ margin:0; max-width:78%; padding:10px 12px; border-radius:14px; }
.sc-ai .sc-me{ justify-self:end; background: var(--c); color:#fff; border-bottom-right-radius:4px; }
.sc-ai .sc-bt{ background:#f1f4f9; border-bottom-left-radius:4px; }
.sc-ai .sc-ty{ display:flex; gap:4px; width:auto; }
.sc-ai .sc-ty i{ width:6px; height:6px; border-radius:50%; background:#9aa6ba; animation: scType 1.2s infinite; }
.sc-ai .sc-ty i:nth-child(2){ animation-delay:.15s; } .sc-ai .sc-ty i:nth-child(3){ animation-delay:.3s; }
@keyframes scType{ 30%{ transform: translateY(-4px); opacity:.5; } }

/* 04 sistem custom */
.sc-sys .sc-bd{ display:grid; grid-template-columns: 90px 1fr; min-height: 250px; }
.sc-sys .sc-as{ background:#0f1b33; padding:14px 12px; display:grid; gap:10px; align-content:start; }
.sc-sys .sc-as b{ width:40px; height:10px; border-radius:4px; background: var(--c); margin-bottom:6px; }
.sc-sys .sc-as .sc-l{ background: rgba(255,255,255,.14); height:7px; } .sc-sys .sc-as .sc-l.on{ background: rgba(255,255,255,.6); }
.sc-sys .sc-mn{ padding:14px; display:grid; gap:12px; }
.sc-sys .sc-kp{ display:grid; grid-template-columns: repeat(3,1fr); gap:8px; }
.sc-sys .sc-kp div{ border:1px solid #e6ecf5; border-radius:10px; padding:8px 10px; }
.sc-sys .sc-kp small{ display:block; font-size:9.5px; color:#8a97ad; font-weight:700; }
.sc-sys .sc-kp strong{ font-size:14px; letter-spacing:-.02em; }
.sc-sys .sc-ch{ height: 96px; display:flex; align-items:flex-end; gap:7px; padding:10px; border-radius:10px; background:#f7f9fc; }
.sc-sys .sc-ch i{ flex:1; height: var(--h); border-radius:4px 4px 2px 2px; background: color-mix(in srgb, var(--c) 35%, #fff); transform-origin: bottom; transform: scaleY(.1); transition: transform 1s var(--sc-ease); }
.sc-sys .sc-ch i:last-child{ background: var(--c); }
.svc-scene.on .sc-sys .sc-ch i, .svc-scene.on.sc-sys .sc-ch i{ transform: scaleY(1); }
.sc-sys .sc-ch i:nth-child(2){ transition-delay:.05s } .sc-sys .sc-ch i:nth-child(3){ transition-delay:.1s } .sc-sys .sc-ch i:nth-child(4){ transition-delay:.15s } .sc-sys .sc-ch i:nth-child(5){ transition-delay:.2s } .sc-sys .sc-ch i:nth-child(6){ transition-delay:.25s } .sc-sys .sc-ch i:nth-child(7){ transition-delay:.3s }

@media (max-width:900px){
  body.v2 .services-accordion{ grid-template-columns: minmax(0,1fr); gap: 28px; }  body.v2 .svc-stage{ min-height: 440px; }
  .svc-scenes{ inset: 26px 22px 96px; }
}
@media (max-width:600px){
  body.v2 .svc-stage{ min-height: 400px; }
  .svc-scenes{ inset: 20px 14px 90px; }
  .sc-win{ transform: scale(.9); }
  .sc-chip{ font-size: 11.5px; padding: 8px 11px; }
  .sc-chip b{ font-size:15px; }
  .sc-chip.c1{ top: -4%; left: 2%; } .sc-chip.c2{ bottom: -2%; right: 2%; }
}

/* ===========================================================
   PORTOFOLIO
=========================================================== */
body.v2 .portfolio-grid{ gap: 36px; counter-reset: pf; }
body.v2 .portfolio-card,
body.v2 .portfolio-card:nth-child(even){
  --c:#2563eb;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  background:#fff; border:1px solid var(--line); border-radius: 32px; overflow:hidden;
  box-shadow: 0 1px 2px rgba(15,27,51,.04), 0 30px 60px -40px rgba(15,27,51,.35);
  transition: transform .6s var(--sc-ease), box-shadow .6s var(--sc-ease);
}
body.v2 .portfolio-card:nth-child(even){ grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); }
body.v2 .portfolio-card:hover{ transform: translateY(-4px); box-shadow: 0 2px 4px rgba(15,27,51,.05), 0 44px 80px -44px color-mix(in srgb, var(--c) 55%, rgba(15,27,51,.5)); }
body.v2 .portfolio-copy{ padding: 52px 52px 48px; gap: 0; justify-content:center; }
body.v2 .pf-top{ display:flex; align-items:center; gap:14px; margin-bottom: 22px; }
body.v2 .pf-num{ font-size: 13px; font-weight: 800; letter-spacing: .14em; color: var(--c); font-variant-numeric: tabular-nums; }
body.v2 .pf-num::after{ content:""; display:inline-block; width:28px; height:1px; background: currentColor; opacity:.5; vertical-align: middle; margin-left: 14px; }
body.v2 .portfolio-copy .tag{
  background: transparent; color: var(--ink-faint); padding:0; border-radius:0; font-size: 12px; letter-spacing: .12em; margin:0;
}
body.v2 .portfolio-copy h3{ font-size: clamp(26px, 2.6vw, 36px); line-height:1.08; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 14px; }
body.v2 .portfolio-copy > p{ font-size: 15.5px; line-height: 1.75; margin: 0 0 24px; max-width: 46ch; }
body.v2 .portfolio-feats{ gap: 0; margin: 0 0 24px; border-top: 1px solid var(--line); }
body.v2 .portfolio-feats li{ padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink); gap: 12px; align-items:center; }
body.v2 .portfolio-feats svg{ width: 20px; height: 20px; padding: 4px; border-radius: 50%; margin:0; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
body.v2 .portfolio-stack{ gap: 6px; margin: 0; }
body.v2 .portfolio-stack span{ background: #f5f7fb; border: 0; color: var(--ink-soft); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 8px; }
body.v2 .portfolio-copy .portfolio-link{ margin-top: 22px; align-self:flex-start; color: var(--c); }

body.v2 .portfolio-visual{ background: transparent; padding: 14px; min-height: 480px; display:block; }
body.v2 .portfolio-card:nth-child(even) .portfolio-visual{ order:0; }
body.v2 .portfolio-card:nth-child(even) .portfolio-copy{ order:2; }
body.v2 .portfolio-visual > img{ border-radius: 22px; min-height: 452px; }

.pf-stage{
  position:relative; height:100%; min-height: 452px; border-radius: 22px; overflow:hidden; isolation:isolate;
  display:grid; place-items:center; padding: 40px 34px;
  background:
    radial-gradient(60% 55% at 50% 50%, color-mix(in srgb, var(--c) 30%, transparent), transparent 75%),
    linear-gradient(160deg, color-mix(in srgb, var(--c) 10%, #f6f9ff) 0%, #eef3fb 100%);
  perspective: 1400px;
}
.pf-stage::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image: radial-gradient(color-mix(in srgb, var(--c) 30%, rgba(15,27,51,.14)) 1px, transparent 1.2px); background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 10%, transparent 75%);
}
.pf-device{ position:relative; transition: transform .8s var(--sc-ease); will-change: transform; }
.pf-browser{ width: min(100%, 520px); background:#fff; border-radius: 14px; overflow:hidden; box-shadow: 0 50px 90px -40px rgba(15,27,51,.55), 0 0 0 1px rgba(15,27,51,.06); }
.pf-browser .pf-screen{ aspect-ratio: 16/10.5; position:relative; background:#fff; }
/* bingkai ala iPhone: rangka titanium, bezel hitam, Dynamic Island, tombol samping */
.pf-phone{
  --pw: 248px;
  width: var(--pw); padding: 11px; border-radius: 48px;
  background: #0b0d12;
  box-shadow:
    0 0 0 1.5px #3a3f4a, 0 0 0 3px #8d929c, 0 0 0 4.5px #50555f,
    0 60px 100px -45px rgba(15,27,51,.75), 0 24px 40px -24px rgba(15,27,51,.45);
}
.pf-phone::before{ content:""; position:absolute; top:21px; left:50%; width:78px; height:22px; margin-left:-39px; border-radius:99px; background:#05060a; z-index:6; box-shadow: inset -14px 0 0 -9px #1c2233; }
.pf-phone::after{
  content:""; position:absolute; left:-7px; top:112px; width:3px; height:34px; border-radius:3px 0 0 3px; background:#7d828c;
  box-shadow: 0 46px 0 #7d828c, 0 -36px 0 -.5px #7d828c, calc(var(--pw) + 11px) 22px 0 0 #7d828c, calc(var(--pw) + 11px) 44px 0 0 #7d828c;
}
.pf-phone .pf-screen{ aspect-ratio: 9/19; border-radius: 38px; overflow:hidden; position:relative; background:#fff; }
.pf-phone .pf-screen::after{ content:""; position:absolute; left:50%; bottom:7px; width:36%; height:4px; margin-left:-18%; border-radius:99px; background: rgba(15,20,30,.55); z-index:5; }
.pf-phone .pf-screen::before{ content:""; position:absolute; inset:0; z-index:4; pointer-events:none; border-radius: inherit; background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 32%); }

/* tombol Google Play */
body.v2 .pf-store{
  display:inline-flex; align-items:center; gap:10px; align-self:flex-start; margin-top: 22px;
  padding: 8px 18px 8px 13px; border-radius: 10px; background:#0b0d12; color:#fff; text-decoration:none;
  border: 1px solid #5f6368; box-shadow: 0 14px 28px -16px rgba(11,13,18,.7);
  transition: transform .35s var(--sc-ease), box-shadow .35s var(--sc-ease);
}
body.v2 .pf-store:hover{ transform: translateY(-2px); box-shadow: 0 20px 34px -16px rgba(11,13,18,.75); }
body.v2 .pf-store:focus-visible{ outline: 2px solid var(--c); outline-offset: 3px; }
body.v2 .pf-store-ic{ width: 22px; height: 24px; flex:none; }
body.v2 .pf-store span{ display:flex; flex-direction:column; line-height:1; }
body.v2 .pf-store small{ font-size: 9.5px; font-weight: 600; letter-spacing: .06em; opacity:.9; }
body.v2 .pf-store b{ font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin-top: 3px; }
body.v2 .portfolio-copy .pf-store + .portfolio-link{ margin-top: 14px; }
.pf-screen .pf-slide{ position:absolute; inset:0; opacity:0; transition: opacity .9s ease, transform 1.4s var(--sc-ease); transform: scale(1.04); }
.pf-screen .pf-slide.on{ opacity:1; transform:none; }
.pf-screen img{ width:100%; height:100%; object-fit:cover; object-position: top center; display:block; }
.pf-dots2{ position:absolute; left:0; right:0; bottom:18px; display:flex; justify-content:center; gap:6px; z-index:4; }
.pf-dots2 button{ width:7px; height:7px; padding:0; border:0; border-radius:99px; background: rgba(15,27,51,.22); cursor:pointer; transition: width .5s var(--sc-ease), background .3s; }
.pf-dots2 button.on{ width:24px; background: var(--c); }
.pf-float{
  position:absolute; z-index:5; display:flex; align-items:center; gap:10px; padding: 11px 14px; border-radius: 14px; background:#fff;
  box-shadow: 0 24px 48px -22px rgba(15,27,51,.5); font-size: 12.5px; font-weight:700; color:#0f1b33; white-space:nowrap;
  animation: scBob 7s ease-in-out infinite;
}
.pf-float i{ width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); font-style:normal; }
.pf-float i svg{ width:15px; height:15px; }
.pf-float small{ display:block; color:#8a97ad; font-weight:600; font-size:11px; }
.pf-float.f1{ left: 22px; top: 26px; } .pf-float.f2{ right: 22px; bottom: 30px; animation-delay:-3.5s; }

/* mock layar (dipakai selama gambar portofolio masih placeholder) */
.mk{ position:absolute; inset:0; font-size: 10px; color:#0f1b33; display:flex; flex-direction:column; }
.mk .sc-l{ height:6px; }
.mk-top{ display:flex; align-items:center; gap:8px; padding: 10px 12px; border-bottom:1px solid #eef2f8; }
.mk-top b{ width:46px; height:9px; border-radius:4px; background: var(--c); }
.mk-top .sp{ flex:1; }
.mk-top em{ width:22px; height:22px; border-radius:50%; background:#e7edf6; }
.mk-kpi{ display:grid; grid-template-columns: repeat(3,1fr); gap:8px; padding: 12px 12px 0; }
.mk-kpi div{ border:1px solid #eef2f8; border-radius:9px; padding:7px 9px; }
.mk-kpi small{ display:block; font-size:8.5px; font-weight:700; color:#8a97ad; }
.mk-kpi strong{ font-size:12.5px; letter-spacing:-.02em; }
.mk-kpi strong.up{ color:#16a34a; }
.mk-body{ flex:1; display:grid; grid-template-columns: 1.35fr 1fr; gap:10px; padding:12px; min-height:0; }
.mk-map{ border-radius:10px; background:#eef3fa; position:relative; overflow:hidden; background-image: linear-gradient(#e2e9f3 1px, transparent 1px), linear-gradient(90deg, #e2e9f3 1px, transparent 1px); background-size: 18px 18px; }
.mk-map svg{ position:absolute; inset:0; width:100%; height:100%; }
.mk-list{ display:grid; gap:6px; align-content:start; }
.mk-row{ display:flex; align-items:center; gap:7px; padding:6px 7px; border-radius:8px; border:1px solid #eef2f8; }
.mk-row .sc-l{ flex:1; }
.mk-pill{ font-size:8px; font-weight:800; padding:2px 6px; border-radius:99px; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); }
.mk-pill.g{ background:#dcfce7; color:#15803d; } .mk-pill.y{ background:#fef3c7; color:#b45309; }
.mk-pos{ flex:1; display:grid; grid-template-columns: 1.5fr 1fr; min-height:0; }
.mk-tiles{ padding:12px; display:grid; grid-template-columns: repeat(3,1fr); gap:7px; align-content:start; }
.mk-tiles span{ aspect-ratio: 1/.9; border-radius:9px; background:#f3f6fb; border:1px solid #eef2f8; position:relative; }
.mk-tiles span::before{ content:""; position:absolute; left:8px; top:8px; width:40%; aspect-ratio:1; border-radius:7px; background: color-mix(in srgb, var(--c) 20%, #fff); }
.mk-tiles span:nth-child(3n+2)::before{ background:#ffe8d1; } .mk-tiles span:nth-child(3n)::before{ background:#e5dcff; }
.mk-cart{ border-left:1px solid #eef2f8; padding:12px; display:flex; flex-direction:column; gap:7px; }
.mk-cart .it{ display:flex; justify-content:space-between; gap:6px; }
.mk-cart .it .sc-l{ width:55%; }
.mk-cart .tot{ margin-top:auto; display:flex; justify-content:space-between; font-weight:800; font-size:11px; padding-top:8px; border-top:1px dashed #dfe6f1; }
.mk-cart .pay{ height:26px; border-radius:8px; background: var(--c); color:#fff; font-weight:800; display:grid; place-items:center; font-size:10px; }
.mk-table{ padding: 12px; display:grid; gap:0; flex:1; align-content:start; }
.mk-steps{ display:flex; align-items:center; gap:6px; padding: 12px 12px 0; }
.mk-steps span{ flex:1; height:5px; border-radius:99px; background:#e7edf6; }
.mk-steps span.on{ background: var(--c); }
.mk-tr{ display:grid; grid-template-columns: .8fr 1.6fr 1fr .9fr; gap:10px; align-items:center; padding:8px 4px; border-bottom:1px solid #eef2f8; }
.mk-tr.h{ font-size:8.5px; font-weight:800; color:#8a97ad; letter-spacing:.04em; }
.mk-tr b{ font-size:9.5px; }
/* layar aplikasi ponsel */
.mk-app{ padding: 34px 12px 10px; gap: 10px; }
.mk-app .mk-hi{ font-size: 13px; font-weight: 800; letter-spacing: -.02em; }
.mk-app .mk-hi small{ display:block; font-size:9px; font-weight:600; color:#8a97ad; margin-bottom:2px; }
.mk-app .mk-card{ border-radius: 14px; padding: 12px; background: var(--c); color:#fff; display:grid; gap:4px; }
.mk-app .mk-card small{ font-size:8.5px; opacity:.8; font-weight:700; }
.mk-app .mk-card strong{ font-size: 20px; letter-spacing:-.03em; }
.mk-app .mk-card .mk-bar{ height:5px; border-radius:99px; background: rgba(255,255,255,.28); overflow:hidden; margin-top:4px; }
.mk-app .mk-card .mk-bar i{ display:block; height:100%; width:68%; background:#fff; border-radius:99px; }
.mk-app .mk-q{ display:grid; gap:6px; }
.mk-app .mk-q .mk-row{ padding:8px; border-radius:10px; }
.mk-app .mk-q .av{ width:20px; height:20px; border-radius:7px; background: color-mix(in srgb, var(--c) 18%, #fff); flex:none; }
.mk-app .mk-tabs{ margin-top:auto; display:flex; justify-content:space-around; padding-top:8px; border-top:1px solid #eef2f8; }
.mk-app .mk-tabs i{ width:16px; height:16px; border-radius:5px; background:#e7edf6; } .mk-app .mk-tabs i.on{ background: var(--c); }

@media (max-width:860px){
  body.v2 .portfolio-card, body.v2 .portfolio-card:nth-child(even){ grid-template-columns:1fr; }
  body.v2 .portfolio-card .portfolio-visual, body.v2 .portfolio-card:nth-child(even) .portfolio-visual{ order:0; min-height: 0; height:auto; max-height:none; aspect-ratio:auto; padding: 10px 10px 0; }
  body.v2 .portfolio-card .portfolio-copy, body.v2 .portfolio-card:nth-child(even) .portfolio-copy{ order:2; }
  .pf-stage{ min-height: 360px; height:auto; padding: 34px 20px; }
  body.v2 .portfolio-copy{ padding: 32px 26px 34px; }
}
@media (max-width:600px){
  .pf-float{ display:none; }
  .pf-phone{ --pw: 206px; padding: 9px; border-radius: 40px; }
  .pf-phone .pf-screen{ border-radius: 32px; }
  .pf-phone::before{ top: 18px; width: 64px; height: 18px; margin-left: -32px; }
  .pf-phone::after{ top: 92px; height: 28px; box-shadow: 0 38px 0 #7d828c, 0 -30px 0 -.5px #7d828c, calc(var(--pw) + 11px) 18px 0 0 #7d828c, calc(var(--pw) + 11px) 36px 0 0 #7d828c; }
  .pf-stage{ min-height: 0; padding: 30px 14px; }
  .pf-browser .pf-screen{ aspect-ratio: 4/3.7; }
  .mk{ font-size: 9px; }
  .mk-cart{ padding: 10px 8px; }
  .mk-cart .tot{ font-size: 9.5px; gap: 4px; }
  body.v2 .pf-top{ flex-wrap: wrap; gap: 6px 12px; margin-bottom: 16px; }
  body.v2 .pf-num::after{ width: 18px; margin-left: 10px; }
}
@media (prefers-reduced-motion: reduce){
  .sc-chip, .pf-float, .sc-ai .sc-ty i{ animation:none; }
  .svc-scene > *, .pf-screen .pf-slide{ transition:none; }
}

/* screenshot di dalam bingkai perangkat: matikan zoom/parallax foto lama dari motion.css & style.css */
body.v2 .portfolio-visual .pf-screen img,
body.v2.m-on .portfolio-visual .pf-screen img,
body.v2.m-on .portfolio-card:hover .portfolio-visual .pf-screen img{
  min-height:0; scale:none; translate:none; transform:none; animation:none;
}

/* ===========================================================
   v4 — LAYANAN: ilustrasi vektor bergerak (js/showcase.js)
   Tanpa animasi (atau saat prefers-reduced-motion) setiap adegan
   tampil di keadaan akhirnya, jadi ceritanya tetap terbaca.
=========================================================== */
.svc-scene .sv{ width: min(100%, 520px); height: auto; max-height: 100%; overflow: visible; }
.sv{ --a: var(--stage-color, #3b82f6); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.sv .sv-ln{ stroke: rgba(255,255,255,.5); stroke-width: 1.5; }
.sv .sv-ln-f{ stroke: rgba(255,255,255,.16); stroke-width: 1.2; }
.sv .sv-pane{ fill: rgba(255,255,255,.045); }
.sv .sv-ac{ fill: var(--a); transition: fill .6s ease; }
.sv .sv-wf{ fill: #fff; }
.sv .sv-dim{ fill: rgba(255,255,255,.18); }
.sv .sv-tint{ fill: color-mix(in srgb, var(--a) 50%, #fff); }
.sv .sv-tint2{ fill: color-mix(in srgb, var(--a) 22%, #ffe2c7); }
.sv .sv-mine-bg{ fill: color-mix(in srgb, var(--a) 24%, transparent); stroke: var(--a); stroke-width: 1.5; }
.sv .sv-t{ fill: #fff; font-size: 13px; }
.sv .sv-t-b{ font-weight: 700; }
.sv .sv-t-s{ fill: rgba(255,255,255,.62); font-size: 11px; font-weight: 600; }
.sv .sv-wire{ stroke: rgba(255,255,255,.16); stroke-width: 2; }
.sv .sv-pk{ stroke: var(--a); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 14 300; stroke-dashoffset: -60; filter: drop-shadow(0 0 4px var(--a)); }
.sv .sv-awn{ fill: color-mix(in srgb, var(--a) 30%, transparent); stroke: var(--a); stroke-width: 1.5; stroke-linejoin: round; }
.sv .sv-awn-s{ fill: none; stroke: var(--a); stroke-width: 1.5; }
.sv .sv-qr rect{ fill: rgba(255,255,255,.85); }
.sv .sv-pulse{ fill: none; stroke: var(--a); stroke-width: 2; opacity: 0; }
.sv .sv-dot{ fill: #0b1a36; }
.sv [class*="sv-"]{ transform-box: fill-box; }

/* keadaan akhir (statis) */
.sv-web .sv-me{ transform: translateY(-100px); }
.sv-web .sv-r1, .sv-web .sv-r2{ transform: translateY(50px); }
.sv-web .sv-cursor, .sv-web .sv-ripple{ opacity: 0; }
.sv-web .sv-ripple{ fill: none; stroke: #fff; stroke-width: 2; transform-origin: center; }
.sv-web .sv-type{ transform-origin: left center; }
.sv-store .sv-p1, .sv-store .sv-p3, .sv-store .sv-n0, .sv-store .sv-n1{ opacity: 0; }
.sv-store .sv-qr{ opacity: .15; }
.sv-store .sv-bag{ transform-origin: center bottom; }
.sv-store .sv-ok{ transform-origin: center; }
.sv-sys .sv-gear{ transform-origin: center; }

/* animasi — hanya untuk adegan aktif & saat panggung terlihat */
.sv-play .on .sv-web .sv-type{ animation: svType 9s ease infinite; }
.sv-play .on .sv-web .sv-me{ animation: svMe 9s cubic-bezier(.65,0,.35,1) infinite; }
.sv-play .on .sv-web .sv-r1, .sv-play .on .sv-web .sv-r2{ animation: svOther 9s cubic-bezier(.65,0,.35,1) infinite; }
.sv-play .on .sv-web .sv-rank{ transform-origin: center; animation: svPop 9s ease infinite; }
.sv-play .on .sv-web .sv-cursor{ animation: svCursor 9s cubic-bezier(.5,0,.2,1) infinite; }
.sv-play .on .sv-web .sv-ripple{ animation: svRipple 9s ease-out infinite; }
.sv-play .on .sv-web .sv-wa{ transform-origin: left bottom; animation: svBubble 9s cubic-bezier(.22,1,.36,1) infinite; }
@keyframes svType{ 0%{ transform: scaleX(0); } 14%,92%{ transform: scaleX(1); opacity: 1; } 99%{ opacity: 0; } 100%{ transform: scaleX(0); opacity: 0; } }
@keyframes svMe{ 0%,16%{ transform: translateY(0); } 28%,92%{ transform: translateY(-100px); } 100%{ transform: translateY(0); } }
@keyframes svOther{ 0%,16%{ transform: translateY(0); } 28%,92%{ transform: translateY(50px); } 100%{ transform: translateY(0); } }
@keyframes svPop{ 0%,27%{ opacity: 0; transform: scale(.4); } 32%{ opacity: 1; transform: scale(1.15); } 35%,90%{ opacity: 1; transform: scale(1); } 96%,100%{ opacity: 0; transform: scale(.4); } }
@keyframes svCursor{
  0%,30%{ opacity: 0; transform: translate(110px,150px); }
  33%{ opacity: 1; transform: translate(110px,150px); }
  43%{ opacity: 1; transform: translate(0,0); }
  45%{ transform: translate(0,0) scale(.85); }
  47%,60%{ opacity: 1; transform: translate(0,0); }
  66%,100%{ opacity: 0; transform: translate(14px,24px); }
}
@keyframes svRipple{ 0%,45%{ opacity: 0; transform: scale(.4); } 46%{ opacity: .9; transform: scale(.5); } 60%,100%{ opacity: 0; transform: scale(2.8); } }
@keyframes svBubble{ 0%,48%{ opacity: 0; transform: translateY(16px) scale(.9); } 55%,92%{ opacity: 1; transform: none; } 98%,100%{ opacity: 0; transform: translateY(6px); } }

.sv-play .on .sv-store .sv-p1{ animation: svHop1 9s cubic-bezier(.45,0,.3,1) infinite; }
.sv-play .on .sv-store .sv-p3{ animation: svHop3 9s cubic-bezier(.45,0,.3,1) infinite; }
.sv-play .on .sv-store .sv-bag{ animation: svBag 9s ease infinite; }
.sv-play .on .sv-store .sv-n0{ animation: svN0 9s steps(1) infinite; }
.sv-play .on .sv-store .sv-n1{ animation: svN1 9s steps(1) infinite; }
.sv-play .on .sv-store .sv-n2{ animation: svN2 9s steps(1) infinite; }
.sv-play .on .sv-store .sv-qr{ animation: svQr 9s ease infinite; }
.sv-play .on .sv-store .sv-ok{ animation: svOk 9s cubic-bezier(.22,1,.36,1) infinite; }
.sv-play .on .sv-store .sv-tick{ stroke-dasharray: 100; animation: svTick 9s ease infinite; }
.sv-play .on .sv-store .sv-truck{ animation: svTruck 9s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes svHop1{ 0%,8%{ opacity: 1; transform: none; } 16%{ transform: translate(-4px,-44px) scale(.9); } 25%{ opacity: 1; transform: translate(-10px,124px) scale(.45); } 27%,90%{ opacity: 0; transform: translate(-10px,124px) scale(.4); } 96%{ opacity: 0; transform: none; } 100%{ opacity: 1; transform: none; } }
@keyframes svHop3{ 0%,28%{ opacity: 1; transform: none; } 36%{ transform: translate(-96px,-56px) scale(.85); } 45%{ opacity: 1; transform: translate(-200px,120px) scale(.45); } 47%,90%{ opacity: 0; transform: translate(-200px,120px) scale(.4); } 96%{ opacity: 0; transform: none; } 100%{ opacity: 1; transform: none; } }
@keyframes svBag{ 0%,24%,30%,44%,50%,100%{ transform: none; } 26%,46%{ transform: scale(1.08,.94); } }
@keyframes svN0{ 0%{ opacity: 1; } 26%{ opacity: 0; } }
@keyframes svN1{ 0%{ opacity: 0; } 26%{ opacity: 1; } 46%{ opacity: 0; } }
@keyframes svN2{ 0%{ opacity: 0; } 46%{ opacity: 1; } 96%{ opacity: 0; } }
@keyframes svQr{ 0%,52%{ opacity: 1; } 56%,92%{ opacity: .12; } 100%{ opacity: 1; } }
@keyframes svOk{ 0%,53%{ opacity: 0; transform: scale(.5); } 58%,92%{ opacity: 1; transform: none; } 98%,100%{ opacity: 0; transform: scale(.8); } }
@keyframes svTick{ 0%,56%{ stroke-dashoffset: 100; } 64%,100%{ stroke-dashoffset: 0; } }
@keyframes svTruck{ 0%,62%{ opacity: 0; transform: translateX(-150px); } 66%{ opacity: 1; } 90%{ opacity: 1; transform: translateX(40px); } 96%,100%{ opacity: 0; transform: translateX(60px); } }

.sv-play .on .sv-pk{ animation: svPacket 2.6s cubic-bezier(.45,0,.55,1) infinite; }
.sv-play .on .sv-pk.d2{ animation-delay: .65s; } .sv-play .on .sv-pk.d3{ animation-delay: 1.3s; } .sv-play .on .sv-pk.d4{ animation-delay: 1.95s; }
@keyframes svPacket{ 0%{ stroke-dashoffset: 14; } 70%,100%{ stroke-dashoffset: -100; } }
.sv-play .on .sv-ai .sv-orbit ellipse{ animation: svDash 7s linear infinite; }
@keyframes svDash{ to{ stroke-dashoffset: -110; } }
.sv-play .on .sv-ai .sv-pulse{ transform-origin: center; animation: svPulse 2.8s ease-out infinite; }
.sv-play .on .sv-ai .sv-pulse.p2{ animation-delay: 1.4s; }
@keyframes svPulse{ 0%{ opacity: .7; transform: scale(1); } 100%{ opacity: 0; transform: scale(1.9); } }
.sv-play .on .sv-ai .sv-spark{ transform-origin: center; animation: svSpark 3.2s ease-in-out infinite; }
@keyframes svSpark{ 50%{ transform: rotate(90deg) scale(.8); } }
.sv-play .on .sv-dot{ animation: svTyping 1.2s ease-in-out infinite; }
.sv-play .on .sv-dot.d2{ animation-delay: .15s; } .sv-play .on .sv-dot.d3{ animation-delay: .3s; }
@keyframes svTyping{ 30%{ transform: translateY(-4px); opacity: .5; } }
.sv-play .on .sv-bars rect{ transform-origin: center bottom; animation: svBar 3.6s cubic-bezier(.45,0,.55,1) infinite alternate; }
.sv-play .on .sv-bars rect:nth-child(2){ animation-delay: -.5s; } .sv-play .on .sv-bars rect:nth-child(3){ animation-delay: -1.1s; }
.sv-play .on .sv-bars rect:nth-child(4){ animation-delay: -1.7s; } .sv-play .on .sv-bars rect:nth-child(5){ animation-delay: -.8s; }
.sv-play .on .sv-bars rect:nth-child(6){ animation-delay: -2.2s; } .sv-play .on .sv-bars rect:nth-child(7){ animation-delay: -1.4s; }
@keyframes svBar{ from{ transform: scaleY(.45); } to{ transform: scaleY(1); } }
.sv-play .on .sv-sys .sv-gear{ animation: svSpin 9s linear infinite; }
@keyframes svSpin{ to{ transform: rotate(360deg); } }
.sv-play .on .sv-sys .sv-drop{ animation: svDrop 3.2s cubic-bezier(.5,0,.6,1.4) infinite; }
@keyframes svDrop{ 0%{ opacity: 0; transform: translateY(-22px); } 25%{ opacity: 1; } 45%,85%{ opacity: 1; transform: none; } 100%{ opacity: 0; transform: none; } }

/* ===========================================================
   v4 — PORTOFOLIO: latar vektor bergerak per proyek
=========================================================== */
.pf-stage > .pfx{ position: absolute; z-index: -1; width: clamp(130px, 36%, 250px); height: auto; overflow: visible; pointer-events: none; }
.pf-stage > .pfx-tr{ top: 0; right: 0; }
.pf-stage > .pfx-bl{ bottom: 0; left: 0; }
.pf-stage > .pf-device{ z-index: 1; }
.pfx .pfx-ln{ stroke: color-mix(in srgb, var(--c) 45%, transparent); stroke-width: 1.6; }
.pfx .pfx-ln-f{ stroke: color-mix(in srgb, var(--c) 22%, transparent); stroke-width: 1.3; }
.pfx .pfx-fill{ fill: color-mix(in srgb, var(--c) 16%, transparent); }
.pfx .pfx-paper{ fill: rgba(255,255,255,.75); stroke: color-mix(in srgb, var(--c) 30%, transparent); stroke-width: 1.3; }
.pfx .pfx-laser{ fill: var(--c); opacity: .55; }
.pfx .pfx-ring{ stroke: var(--c); stroke-width: 2; }
.pfx .pfx-dot{ fill: var(--c); }
.pfx .pfx-run{ stroke: var(--c); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 200; }
.pfx [class*="pfx-"]{ transform-box: fill-box; }
.pfx .pfx-spin{ transform-box: view-box; transform-origin: 168px 72px; }
.pfx-bub circle{ opacity: .6; }

.pfx-play .pfx-spin{ animation: svSpin 14s linear infinite; }
.pfx-play .pfx-water{ animation: pfxSlosh 3.2s ease-in-out infinite; }
@keyframes pfxSlosh{ 50%{ transform: translateY(-5px) skewY(-2deg); } }
.pfx-play .pfx-bub circle{ animation: pfxBub 6s ease-in infinite; }
@keyframes pfxBub{ 0%{ opacity: 0; transform: translateY(0); } 15%{ opacity: .8; } 100%{ opacity: 0; transform: translateY(-170px); } }
.pfx-play .pfx-receipt{ animation: pfxPrint 6s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes pfxPrint{ 0%{ transform: translateY(120px); opacity: 0; } 8%{ opacity: 1; } 55%,86%{ transform: none; opacity: 1; } 96%,100%{ transform: none; opacity: 0; } }
.pfx-play .pfx-wifi path{ animation: pfxWifi 2.4s ease-in-out infinite; }
.pfx-play .pfx-wifi .a2{ animation-delay: .25s; } .pfx-play .pfx-wifi .a3{ animation-delay: .5s; }
@keyframes pfxWifi{ 0%,100%{ opacity: .25; } 40%{ opacity: 1; } }
.pfx-play .pfx-coins .c3{ animation: pfxCoin 2.8s cubic-bezier(.5,0,.5,1.5) infinite; }
@keyframes pfxCoin{ 0%{ transform: translateY(-40px); opacity: 0; } 30%,80%{ transform: none; opacity: 1; } 100%{ opacity: 0; } }
.pfx-play .pfx-laser{ animation: pfxScan 2.8s ease-in-out infinite alternate; }
@keyframes pfxScan{ to{ transform: translateY(147px); } }
.pfx-play .pfx-ring{ transform-origin: center; animation: pfxRing 1.8s ease-in-out infinite; }
@keyframes pfxRing{ 50%{ transform: scale(1.25); opacity: .4; } }
.pfx-play .pfx-run{ animation: pfxRun 5s linear infinite; }
@keyframes pfxRun{ from{ stroke-dashoffset: 2; } to{ stroke-dashoffset: -100; } }

/* ===========================================================
   v4 — PROYEK KAMI (beranda): satu panel + tab proyek
=========================================================== */
body.v2 .pf-tabs{ display: flex; align-items: stretch; gap: 16px; margin: 0 0 20px; }
body.v2 .pf-tablist{ display: flex; gap: 10px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
body.v2 .pf-tablist::-webkit-scrollbar{ display: none; }
body.v2 .pf-tab{
  --c: #2563eb;
  position: relative; flex: 1 1 0; min-width: 200px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 16px 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff;
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .35s ease, box-shadow .35s ease;
}
body.v2 .pf-tab-name{ font-size: 17px; font-weight: 750; letter-spacing: -.02em; line-height: 1.25; color: #9aa6ba; transition: color .35s ease; }
body.v2 .pf-tab-kind{ font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--ink-faint); white-space: nowrap; }
body.v2 .pf-tab:hover .pf-tab-name, body.v2 .pf-tab.on .pf-tab-name{ color: var(--ink); }
body.v2 .pf-tab.on{ border-color: color-mix(in srgb, var(--c) 45%, var(--line)); box-shadow: 0 18px 36px -28px color-mix(in srgb, var(--c) 80%, transparent); }
body.v2 .pf-tab:focus-visible{ outline: 2px solid var(--c); outline-offset: 2px; }
body.v2 .pf-tab-bar{ position: absolute; left: 20px; right: 20px; bottom: 10px; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--c) 14%, var(--line)); overflow: hidden; opacity: 0; transition: opacity .35s ease; }
body.v2 .pf-tab.on .pf-tab-bar{ opacity: 1; }
body.v2 .pf-tab-bar i{ display: block; width: 100%; height: 100%; background: var(--c); transform-origin: left center; transform: scaleX(var(--p, 0)); }
body.v2 .pf-tabs.is-manual .pf-tab.on .pf-tab-bar i{ transform: scaleX(1); transition: transform .5s var(--sc-ease); }
body.v2 .pf-arrows{ display: flex; align-items: center; gap: 8px; flex: none; }
body.v2 .pf-arrow{ width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .3s ease, color .3s ease, border-color .3s ease; }
body.v2 .pf-arrow svg{ width: 20px; height: 20px; }
body.v2 .pf-arrow.next svg{ transform: scaleX(-1); }
body.v2 .pf-arrow:hover{ background: var(--ink); border-color: var(--ink); color: #fff; }
body.v2 .pf-arrow:focus-visible{ outline: 2px solid var(--ink); outline-offset: 2px; }

/* semua kartu ditumpuk di sel yang sama; tinggi panel = kartu tertinggi */
body.v2 .portfolio-grid.pf-tabbed{ display: grid; grid-template-columns: minmax(0,1fr); gap: 0; }
body.v2 .pf-tabbed > .portfolio-card,
body.v2 .pf-tabbed > .portfolio-card:nth-child(even){
  grid-area: 1 / 1; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  visibility: hidden; opacity: 0; transform: none;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
body.v2 .pf-tabbed > .portfolio-card.is-active{ visibility: visible; opacity: 1; z-index: 1; transition: opacity .45s ease; }
body.v2 .pf-tabbed > .portfolio-card:hover{ transform: none; }
body.v2 .pf-tabbed > .portfolio-card .portfolio-copy{ order: 0; padding: 44px 48px; }
/* nomor & jenis proyek sudah tampil di tab */
body.v2 .pf-tabbed .pf-num, body.v2 .pf-tabbed .pf-top .tag{ display: none; }
body.v2 .pf-tabbed .pf-top:not(:has(.pf-status)){ display: none; }
body.v2 .pf-tabbed > .portfolio-card .portfolio-visual{ order: 2; min-height: 460px; }
body.v2 .pf-tabbed > .portfolio-card .portfolio-copy > *{ opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .7s var(--sc-ease); }
body.v2 .pf-tabbed > .portfolio-card.is-active .portfolio-copy > *{ opacity: 1; transform: none; }
body.v2 .pf-tabbed > .portfolio-card.is-active .portfolio-copy > :nth-child(2){ transition-delay: .06s; }
body.v2 .pf-tabbed > .portfolio-card.is-active .portfolio-copy > :nth-child(3){ transition-delay: .12s; }
body.v2 .pf-tabbed > .portfolio-card.is-active .portfolio-copy > :nth-child(4){ transition-delay: .18s; }
body.v2 .pf-tabbed > .portfolio-card.is-active .portfolio-copy > :nth-child(n+5){ transition-delay: .24s; }
body.v2 .pf-tabbed > .portfolio-card .pf-stage > .pf-device{ scale: .92; opacity: 0; transition: scale 1s var(--sc-ease), opacity .6s ease, transform .8s var(--sc-ease); }
body.v2 .pf-tabbed > .portfolio-card.is-active .pf-stage > .pf-device{ scale: 1; opacity: 1; transition-delay: .08s; }

@media (max-width: 860px){
  body.v2 .pf-tabbed > .portfolio-card,
  body.v2 .pf-tabbed > .portfolio-card:nth-child(even){ grid-template-columns: minmax(0,1fr); align-content: start; }
  body.v2 .pf-tabbed > .portfolio-card .portfolio-visual{ order: 0; min-height: 0; }
  body.v2 .pf-tabbed > .portfolio-card .portfolio-copy{ order: 2; padding: 28px 24px 32px; }
  body.v2 .pf-tab{ flex: 0 0 auto; min-width: 0; padding: 12px 16px 18px; border-radius: 14px; }
  body.v2 .pf-tab-name{ font-size: 15px; }
  body.v2 .pf-tab-kind{ font-size: 11.5px; }
  body.v2 .pf-tab-bar{ left: 16px; right: 16px; bottom: 8px; }
}
@media (max-width: 600px){
  body.v2 .pf-arrows{ display: none; }
  body.v2 .pf-tabs{ margin-left: -20px; margin-right: -20px; }
  body.v2 .pf-tablist{ padding: 2px 20px; margin: -2px 0; scroll-padding: 0 20px; }
}

@media (prefers-reduced-motion: reduce){
  .sv *, .pfx *{ animation: none !important; }
  body.v2 .pf-tabbed > .portfolio-card .portfolio-copy > *,
  body.v2 .pf-tabbed > .portfolio-card .pf-stage > .pf-device{ transition: none; }
}

/* ===========================================================
   v4 — TESTIMONI (beranda): tumpukan kartu ulasan + daftar klien
=========================================================== */
body.v3 .ts-on .testi-nav{ display: none !important; }
body.v3 .ts-wrap{ display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,.6fr); gap: 72px; align-items: center; }
body.v3 .ts-stage{ position: relative; padding: 10px 76px 44px 0; }
body.v3 .ts-deco{ position: absolute; left: -60px; top: -50px; width: calc(100% + 60px); height: calc(100% + 90px); z-index: 0; pointer-events: none; overflow: visible; }
.ts-deco .ts-q{ stroke: var(--accent, #2f5cf5); stroke-width: 2; opacity: .16; stroke-dasharray: 100; stroke-dashoffset: 0; }
.ts-deco .ts-orbit{ stroke: var(--accent, #2f5cf5); stroke-width: 1.5; opacity: .22; }
.ts-deco .ts-spark{ fill: #f5b83d; transform-box: fill-box; transform-origin: center; opacity: .7; }
.ts-play .ts-deco .ts-q{ animation: tsDraw 2.6s cubic-bezier(.65,0,.35,1) both; }
.ts-play .ts-deco .ts-orbit{ animation: tsFlow 9s linear infinite; }
.ts-play .ts-deco .ts-spark{ animation: tsTwinkle 3.6s ease-in-out infinite; }
@keyframes tsDraw{ from{ stroke-dashoffset: 100; } }
@keyframes tsFlow{ to{ stroke-dashoffset: -120; } }
@keyframes tsTwinkle{ 0%,100%{ scale: .5; opacity: .2; rotate: 0deg; } 50%{ scale: 1.15; opacity: .9; rotate: 45deg; } }

body.v3 .testi-grid.ts-deck{ position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr); overflow: visible; padding: 0; margin: 0; scroll-snap-type: none; }
body.v3 .ts-deck > .testi-card{
  grid-area: 1 / 1; flex: none; margin: 0; padding: 44px 48px 38px;
  background: #fff; border: 1px solid var(--line); border-radius: 28px;
  box-shadow: 0 1px 2px rgba(15,27,51,.04), 0 40px 70px -48px rgba(15,27,51,.45);
  transform-origin: 50% 100%;
  translate: 0 0; rotate: 0deg; scale: 1; z-index: 4;
  transition: translate .8s var(--sc-ease, cubic-bezier(.22,1,.36,1)), rotate .8s var(--sc-ease, cubic-bezier(.22,1,.36,1)), scale .8s var(--sc-ease, cubic-bezier(.22,1,.36,1)), opacity .5s ease, background .5s ease, box-shadow .5s ease;
}
body.v3 .ts-deck > .testi-card[data-pos="1"]{ translate: 38px 20px; rotate: 3deg; scale: .95; z-index: 3; background: #eef3ff; cursor: pointer; }
body.v3 .ts-deck > .testi-card[data-pos="2"]{ translate: 70px 38px; rotate: 6deg; scale: .9; z-index: 2; background: #e2eafe; cursor: pointer; }
body.v3 .ts-deck > .testi-card[data-pos="3"]{ translate: 70px 38px; rotate: 6deg; scale: .9; z-index: 1; opacity: 0; }
body.v3 .ts-deck > .testi-card:not(.is-front) > *{ opacity: 0; transition: opacity .25s ease; }
body.v3 .ts-deck > .testi-card.is-front > *{ opacity: 1; transition: opacity .4s ease .15s; }
body.v3 .ts-deck > .testi-card:hover{ background: #fff; }
body.v3 .ts-deck > .testi-card:not(.is-front):hover{ background: #e8eeff; }
body.v3 .ts-deck > .testi-card.ts-out{ animation: tsOut .95s cubic-bezier(.5,0,.25,1); }
body.v3 .ts-deck > .testi-card.ts-out > *{ animation: tsKeep .95s linear; }
@keyframes tsKeep{ 0%,38%{ opacity: 1; } 48%,100%{ opacity: 0; } }
body.v3 .ts-deck > .testi-card.ts-in{ animation: tsIn .95s cubic-bezier(.5,0,.25,1); }
@keyframes tsOut{
  0%{ translate: 0 0; rotate: 0deg; scale: 1; z-index: 5; }
  45%{ translate: -58% -6%; rotate: -10deg; scale: .97; z-index: 5; }
  46%{ z-index: 0; }
}
@keyframes tsIn{
  0%{ translate: 70px 38px; rotate: 6deg; scale: .9; z-index: 0; }
  50%{ translate: -58% -6%; rotate: -10deg; scale: .97; z-index: 0; }
  51%{ z-index: 6; }
  100%{ z-index: 6; }
}
body.v3 .ts-deck .testi-stars svg{ width: 20px; height: 20px; }
body.v3 .ts-deck .testi-card blockquote{ font-family: var(--serif); font-size: clamp(23px, 2.2vw, 31px); line-height: 1.28; letter-spacing: -0.01em; margin-top: 20px; }
body.v3 .ts-deck .testi-card blockquote::before{ font-size: 96px; line-height: .55; margin-bottom: 14px; }
body.v3 .ts-deck .testi-tag{ margin-top: 22px; }
body.v3 .ts-deck .ts-w{ display: inline-block; }

/* isi kartu depan muncul berurutan: bintang, tanda kutip, kata per kata, nama */
.ts-play .ts-deck .is-front .testi-stars svg{ animation: tsStar .55s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--k, 0) * 90ms + .15s); }
.ts-play .ts-deck .is-front blockquote::before{ animation: tsMark .7s cubic-bezier(.3,1.4,.5,1) both .1s; }
.ts-play .ts-deck .is-front .ts-w{ animation: tsWord .6s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--k, 0) * 32ms + .3s); }
.ts-play .ts-deck .is-front .testi-tag,
.ts-play .ts-deck .is-front .testi-who{ animation: tsUp .7s cubic-bezier(.22,1,.36,1) both .7s; }
@keyframes tsStar{ from{ scale: 0; rotate: -60deg; opacity: 0; } }
@keyframes tsMark{ from{ scale: .3; opacity: 0; translate: -10px 10px; } }
@keyframes tsWord{ from{ opacity: 0; translate: 0 .45em; filter: blur(6px); } }
@keyframes tsUp{ from{ opacity: 0; translate: 0 12px; } }

/* panel samping: nilai rata-rata + daftar klien */
body.v3 .ts-side{ display: flex; flex-direction: column; gap: 26px; }
body.v3 .ts-score{ display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; row-gap: 2px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
body.v3 .ts-score b{ grid-row: span 2; font-size: 58px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
body.v3 .ts-score-stars{ display: flex; gap: 3px; color: #f5b83d; }
body.v3 .ts-score-stars svg{ width: 18px; height: 18px; }
body.v3 .ts-score small{ font-size: 13.5px; color: var(--ink-faint); }
body.v3 .ts-list{ display: flex; flex-wrap: wrap; gap: 6px; }
body.v3 .ts-pick{
  position: relative; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: none;
  font: inherit; cursor: pointer;
}
body.v3 .ts-pick:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
body.v3 .ts-pick-av{ position: relative; width: 56px; height: 56px; display: grid; place-items: center; }
body.v3 .ts-pick-av .testi-avatar{ width: 44px; height: 44px; font-size: 14px; filter: grayscale(.7); opacity: .55; transition: filter .3s, opacity .3s, scale .4s var(--sc-ease, ease); }
body.v3 .ts-pick:hover .ts-pick-av .testi-avatar{ opacity: .9; filter: grayscale(.2); }
body.v3 .ts-pick.on .ts-pick-av .testi-avatar{ filter: none; opacity: 1; scale: 1.06; }
body.v3 .ts-ring{ position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
body.v3 .ts-ring circle{ fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); opacity: 0; transition: opacity .3s; }
body.v3 .ts-pick.on .ts-ring circle{ opacity: 1; }
body.v3 .ts-side.is-manual .ts-pick.on .ts-ring circle{ stroke-dashoffset: 0; transition: stroke-dashoffset .6s ease, opacity .3s; }
/* nama di tombol hanya untuk pembaca layar (nama sudah tampil di kartu) */
body.v3 .ts-pick-txt{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.v3 .ts-count{ white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--ink-faint); font-variant-numeric: tabular-nums; margin-right: auto; }
body.v3 .ts-count b{ color: var(--ink); }
body.v3 .ts-ctrl{ display: flex; align-items: center; gap: 10px; }
body.v3 .ts-arrow{ width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: #fff; border: 1px solid var(--line); color: var(--ink); transition: background .25s, color .25s, border-color .25s; }
body.v3 .ts-arrow svg{ width: 20px; height: 20px; }
body.v3 .ts-arrow.next svg{ transform: scaleX(-1); }
body.v3 .ts-arrow:hover{ background: var(--accent); border-color: var(--accent); color: #fff; }
body.v3 .ts-arrow:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 1000px){
  body.v3 .ts-wrap{ grid-template-columns: minmax(0,1fr); gap: 40px; }
  body.v3 .ts-side{ display: grid; grid-template-columns: auto 1fr; gap: 20px 28px; align-items: center; }
  body.v3 .ts-score{ border-bottom: 0; padding-bottom: 0; }
  body.v3 .ts-list{ grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
  body.v3 .ts-list::-webkit-scrollbar{ display: none; }
  body.v3 .ts-pick{ flex: 0 0 auto; }
  body.v3 .ts-ctrl{ grid-row: 1; grid-column: 2; justify-self: end; }
}
@media (max-width: 640px){
  body.v3 .ts-stage{ padding: 0 30px 30px 0; }
  body.v3 .ts-deck > .testi-card{ padding: 28px 24px 26px; border-radius: 22px; }
  body.v3 .ts-deck > .testi-card[data-pos="1"]{ translate: 16px 14px; rotate: 2deg; }
  body.v3 .ts-deck > .testi-card[data-pos="2"], body.v3 .ts-deck > .testi-card[data-pos="3"]{ translate: 30px 26px; rotate: 4deg; }
  body.v3 .ts-deck .testi-card blockquote{ font-size: 22px; }
  body.v3 .ts-deck .testi-card blockquote::before{ font-size: 72px; }
  body.v3 .ts-score b{ font-size: 44px; }
  body.v3 .ts-count{ display: none; }
  body.v3 .ts-deco{ left: -20px; width: calc(100% + 20px); }
}
@media (prefers-reduced-motion: reduce){
  .ts-deco *, .ts-deck *, body.v3 .ts-deck > .testi-card{ animation: none !important; }
  body.v3 .ts-deck > .testi-card{ transition: opacity .2s ease; }
}

/* ===========================================================
   v4 — BLOG (beranda): cincin berputar masuk, putar otomatis,
   sampul vektor untuk tulisan tanpa gambar, label "Terbaru"
=========================================================== */
.bp-viewport.bp-spin-in .bp-ring{ animation: bpSpinIn 1.6s cubic-bezier(.16,1,.3,1) both; }
@keyframes bpSpinIn{ from{ transform: var(--bp-from); opacity: 0; } 30%{ opacity: 1; } }
.bp-viewport.bp-spin-in .blog-card{ animation: bpCardIn 1.1s cubic-bezier(.16,1,.3,1) both; }
.bp-viewport.bp-spin-in .blog-card:nth-child(2){ animation-delay: .12s; }
.bp-viewport.bp-spin-in .blog-card:nth-child(3){ animation-delay: .24s; }
@keyframes bpCardIn{ from{ translate: 0 60px; rotate: -4deg; opacity: 0; } }

/* titik: yang aktif melebar dan terisi sesuai sisa waktu putar otomatis */
body.v2 .bp-dot{ position: relative; overflow: hidden; width: 9px; transition: width .4s cubic-bezier(.22,1,.36,1), background .25s; }
body.v2 .bp-dot.active{ width: 36px; border-radius: 99px; transform: none; background: #d7e1f5; }
body.v2 .bp-dot i{ position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform-origin: left center; transform: scaleX(0); }
body.v2 .bp-dot.active i{ transform: scaleX(var(--p, 0)); }
body.v2 .bp-manual .bp-dot.active i{ transform: scaleX(1); }

/* label tulisan terbaru */
.blog-card-thumb{ position: relative; }
.bp-new{
  position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px 6px 9px; border-radius: 99px; background: rgba(255,255,255,.94); color: #0f1b33;
  font-size: 12px; font-weight: 700; box-shadow: 0 10px 24px -14px rgba(15,27,51,.6);
}
.bp-new i{ width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: bpPing 1.8s ease-out infinite; }
@keyframes bpPing{ 70%{ box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100%{ box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

/* sampul vektor bergerak */
.bp-gen{ display: block; width: 100%; height: 100%; }
.bp-gen-bg{ fill: color-mix(in srgb, var(--g) 16%, #f4f7ff); }
.bp-gen-orb{ fill: color-mix(in srgb, var(--g) 22%, transparent); }
.bp-gen-sheet rect:first-child{ fill: #fff; stroke: color-mix(in srgb, var(--g) 30%, #dfe6f3); stroke-width: 1.5; }
.bp-gen-h{ stroke: #0f1b33; stroke-width: 8; stroke-linecap: round; }
.bp-gen-l{ stroke: color-mix(in srgb, var(--g) 35%, #cfd9ea); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; }
.bp-gen-img{ fill: color-mix(in srgb, var(--g) 30%, #fff); }
.bp-gen-pen path{ fill: var(--g); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.bp-gen-pen{ transform: translate(184px, 132px); }
.bp-gen-chips rect{ fill: color-mix(in srgb, var(--g) 18%, #fff); stroke: color-mix(in srgb, var(--g) 40%, transparent); }
.bp-live .bp-gen-l{ animation: bpWrite 6s ease-in-out infinite; }
.bp-live .bp-gen-l.l2{ animation-delay: .5s; } .bp-live .bp-gen-l.l3{ animation-delay: 1s; } .bp-live .bp-gen-l.l4{ animation-delay: 1.5s; }
@keyframes bpWrite{ 0%{ stroke-dashoffset: 1; } 18%,80%{ stroke-dashoffset: 0; } 92%,100%{ stroke-dashoffset: 1; } }
.bp-live .bp-gen-pen{ animation: bpPen 6s ease-in-out infinite; }
@keyframes bpPen{
  0%{ transform: translate(88px, 84px); } 9%{ transform: translate(184px, 84px); }
  10%{ transform: translate(88px, 100px); } 17%{ transform: translate(172px, 100px); }
  18%{ transform: translate(88px, 116px); } 26%{ transform: translate(180px, 116px); }
  27%{ transform: translate(88px, 132px); } 33%,80%{ transform: translate(148px, 132px); }
  100%{ transform: translate(88px, 84px); }
}
.bp-live .bp-gen-orb{ transform-box: fill-box; transform-origin: center; animation: bpOrb 7s ease-in-out infinite; }
@keyframes bpOrb{ 50%{ scale: 1.18; } }
.bp-live .bp-gen-chips rect{ transform-box: fill-box; animation: bpChip 3.2s ease-in-out infinite; }
.bp-live .bp-gen-chips rect + rect{ animation-delay: -1.6s; }
@keyframes bpChip{ 50%{ translate: 6px 0; } }

@media (prefers-reduced-motion: reduce){
  .bp-viewport.bp-spin-in .bp-ring, .bp-viewport.bp-spin-in .blog-card, .bp-new i, .bp-gen *{ animation: none !important; }
}