/* ===========================================================
   CariFoto — design system (premium, mobile-first)
   =========================================================== */
:root{
  --brand1:#0EA5A5; --brand2:#0D9488;
  --grad-brand:linear-gradient(135deg,#0FB5AE,#0D9488);
  --grad-hero:linear-gradient(160deg,#10B9B0 0%,#0D9488 48%,#2BD4C0 116%);
  --love:#FF5A7A; --ok:#10B981; --warn:#F59E0B; --accent:#FF5A7A;
  --bg:#F5F5FB; --card:#FFFFFF; --ink:#14141C; --mut:#72728A; --line:#ECECF3;
  --dark:#0C0C12; --dark2:#16161F;
  --r:22px; --r-sm:13px; --r-pill:999px;
  --sh:0 8px 30px rgba(20,20,45,.08); --sh-lg:0 24px 60px rgba(28,18,60,.22);
  --maxw:480px; --ease:cubic-bezier(.22,.9,.3,1); --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.45;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select{font-family:inherit}
a{color:inherit;text-decoration:none}
.muted{color:var(--mut)}
.center{text-align:center}

/* ---------- app shell ---------- */
#app{max-width:var(--maxw);margin:0 auto;min-height:100%;position:relative;
  background:var(--bg);box-shadow:0 0 80px rgba(0,0,0,.06);overflow:hidden}
.screen{display:none;animation:screenIn .44s var(--ease);padding-bottom:96px}
.screen.on{display:block}
@keyframes screenIn{from{opacity:0;transform:translateY(18px) scale(.99)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}
.pad{padding:18px}
.stack>*+*{margin-top:12px}

/* ---------- appbar ---------- */
.appbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;
  padding:14px 16px;background:rgba(245,245,251,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.appbar .bar-t{flex:1;min-width:0}
.appbar .ttl{font-weight:800;font-size:17px;letter-spacing:-.02em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.appbar .sub{font-size:11px;color:var(--mut);margin-top:-2px}
.iconbtn{width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:#fff;box-shadow:var(--sh);font-size:18px;flex:none;transition:transform .15s}
.iconbtn:active{transform:scale(.9)}
.spacer{flex:1}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 18px;border-radius:var(--r-pill);font-weight:700;font-size:15px;
  width:100%;transition:transform .14s var(--ease),box-shadow .2s,filter .2s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--grad-brand);color:#fff;box-shadow:0 10px 26px rgba(14,165,165,.4)}
.btn-primary:active{filter:brightness(1.05)}
.btn-dark{background:var(--ink);color:#fff}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:var(--sh)}
.btn-love{background:var(--love);color:#fff;box-shadow:0 10px 26px rgba(255,77,121,.4)}
.btn-ok{background:var(--ok);color:#fff}
.btn-sm{padding:10px 14px;font-size:13px;width:auto}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ---------- cards ---------- */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:16px}
.card-title{font-weight:800;font-size:15px;letter-spacing:-.01em;margin:0 0 2px}

/* ---------- landing / hero ---------- */
.hero{background:var(--grad-hero);color:#fff;padding:30px 22px 34px;border-radius:0 0 34px 34px;
  position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;
  background:radial-gradient(circle,rgba(255,255,255,.28),transparent 70%)}
.hero .brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px;letter-spacing:-.02em}
.hero h1{font-size:30px;line-height:1.12;letter-spacing:-.03em;margin:22px 0 8px;font-weight:850}
.hero p{margin:0;opacity:.92;font-size:14.5px;max-width:300px}
.hero .fee{display:inline-flex;align-items:center;gap:7px;margin-top:18px;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.3);padding:8px 14px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;
  backdrop-filter:blur(6px)}
.logo-badge{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.2);
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.35)}

.roles{padding:18px;margin-top:-26px;position:relative;z-index:2}
.role{display:flex;align-items:center;gap:15px;background:#fff;border-radius:var(--r);
  padding:18px;box-shadow:var(--sh-lg);transition:transform .16s var(--ease)}
.role:active{transform:scale(.98)}
.role+.role{margin-top:13px}
.role .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:24px;flex:none;color:#fff}
.role .ic.buy{background:var(--grad-brand)}
.role .ic.sell{background:linear-gradient(135deg,#FF7A59,#FF5A7A)}
.role b{font-size:16px;letter-spacing:-.01em}
.role .d{font-size:12.5px;color:var(--mut);margin-top:2px}
.role .arr{margin-left:auto;color:var(--mut);font-size:20px}
.trust{display:flex;gap:10px;padding:0 18px 10px;color:var(--mut);font-size:11.5px;flex-wrap:wrap}
.trust span{display:inline-flex;gap:5px;align-items:center}

/* ---------- forms ---------- */
.field{margin-top:14px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--mut);margin-bottom:6px}
.input{width:100%;padding:14px;border:1.5px solid var(--line);background:#fff;border-radius:var(--r-sm);
  font-size:15px;transition:border-color .2s,box-shadow .2s}
.input:focus{outline:0;border-color:var(--brand1);box-shadow:0 0 0 4px rgba(14,165,165,.12)}
.range{width:100%;accent-color:var(--brand1)}
.drop{border:2px dashed var(--line);border-radius:var(--r);padding:26px 16px;text-align:center;
  background:#fff;transition:.2s}
.drop.hot{border-color:var(--brand1);background:rgba(14,165,165,.05)}
.drop .big{font-size:34px}
.drop b{display:block;margin-top:8px}
.drop small{color:var(--mut)}

/* ---------- selfie capture ---------- */
.selfie-stage{aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--dark);
  position:relative;display:grid;place-items:center;box-shadow:var(--sh)}
.selfie-stage img{width:100%;height:100%;object-fit:cover}
.selfie-stage .hint{color:#fff;text-align:center;padding:20px}
.selfie-stage .ring{width:150px;height:190px;border:2px dashed rgba(255,255,255,.55);border-radius:50%;
  position:absolute;pointer-events:none}
.privacy{display:flex;gap:8px;align-items:center;background:rgba(19,185,129,.1);color:#0b7a56;
  padding:11px 13px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;margin-top:12px}

/* ---------- searching ---------- */
.searching{padding:70px 20px;text-align:center}
.scanner{width:130px;height:130px;margin:0 auto 22px;border-radius:50%;position:relative;
  background:conic-gradient(var(--brand1),#2BD4C0,var(--brand1));animation:spin 1.1s linear infinite;
  filter:drop-shadow(0 10px 26px rgba(14,165,165,.45))}
.scanner::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--bg)}
.scanner::after{content:"";position:absolute;inset:0;background:center/36px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D9488' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E")}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- swipe deck ---------- */
.deck-wrap{background:var(--dark);min-height:100vh;color:#fff;padding:0}
.deck-bar{display:flex;align-items:center;gap:12px;padding:16px;position:sticky;top:0;z-index:5;
  background:linear-gradient(180deg,var(--dark),transparent)}
.deck-bar .iconbtn{background:rgba(255,255,255,.1);color:#fff;box-shadow:none}
.counts{display:flex;gap:7px;margin-left:auto}
.cnt{background:rgba(255,255,255,.1);padding:6px 11px;border-radius:var(--r-pill);font-size:12px;font-weight:700}
.cnt b{color:#fff}
.deck{position:relative;height:66vh;max-height:560px;margin:4px 16px}
.swipe{position:absolute;inset:0;border-radius:24px;overflow:hidden;background:#000;
  box-shadow:0 30px 60px rgba(0,0,0,.5);will-change:transform;touch-action:none}
.swipe img{width:100%;height:100%;object-fit:cover}
.swipe .meta{position:absolute;left:0;right:0;bottom:0;padding:18px 16px;
  background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);display:flex;align-items:flex-end;gap:10px}
.swipe .score{font-size:26px;font-weight:850;letter-spacing:-.02em}
.swipe .price{margin-left:auto;background:rgba(255,255,255,.16);padding:7px 13px;border-radius:var(--r-pill);
  font-weight:700;font-size:14px;backdrop-filter:blur(6px)}
.stamp{position:absolute;top:26px;padding:7px 15px;border:4px solid;border-radius:12px;font-weight:900;
  font-size:26px;letter-spacing:.05em;opacity:0;transform:rotate(-16deg);transition:opacity .1s}
.stamp.like{left:22px;color:var(--ok);border-color:var(--ok)}
.stamp.nope{right:22px;color:var(--love);border-color:var(--love);transform:rotate(16deg)}
.deck-acts{display:flex;justify-content:center;gap:22px;padding:22px}
.deck-acts button{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;font-size:28px;
  box-shadow:0 12px 30px rgba(0,0,0,.4);transition:transform .15s}
.deck-acts button:active{transform:scale(.88)}
.act-skip{background:#fff;color:var(--love)}
.act-love{background:var(--love);color:#fff}
.deck-empty{text-align:center;padding:80px 24px;color:rgba(255,255,255,.8)}
.deck-empty .big{font-size:52px}

/* ---------- grids ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.grid.g2{grid-template-columns:repeat(2,1fr);gap:11px}
.tile{position:relative;border-radius:14px;overflow:hidden;background:#eee;aspect-ratio:1}
.tile img{width:100%;height:100%;object-fit:cover}
.tile .tag{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.6);color:#fff;font-size:10.5px;
  padding:3px 7px;border-radius:var(--r-pill);font-weight:700}
.tile .pick{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.85);display:grid;place-items:center;font-size:13px}
.tile.sel{outline:3px solid var(--brand1);outline-offset:-3px}
.tile.sel .pick{background:var(--brand1);color:#fff}

/* event cards */
.ev{border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--sh);transition:transform .16s}
.ev:active{transform:scale(.98)}
.ev .cov{aspect-ratio:16/10;background:linear-gradient(135deg,#ded9ff,#ffe0ea);position:relative}
.ev .cov img{width:100%;height:100%;object-fit:cover}
.ev .cov .ph{position:absolute;inset:0;display:grid;place-items:center;font-size:40px;opacity:.5}
.ev .body{padding:13px 15px}
.ev .body b{font-size:15.5px;letter-spacing:-.01em}
.ev .body .m{display:flex;gap:12px;color:var(--mut);font-size:12px;margin-top:5px}

/* ---------- stat tiles / earnings ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.stat{background:#fff;border-radius:var(--r);padding:15px;box-shadow:var(--sh)}
.stat .v{font-size:23px;font-weight:850;letter-spacing:-.02em}
.stat .l{font-size:11.5px;color:var(--mut);margin-top:2px;font-weight:600}
.stat.hero-stat{grid-column:1/-1;background:var(--grad-brand);color:#fff}
.stat.hero-stat .l{color:rgba(255,255,255,.85)}
.split{height:12px;border-radius:var(--r-pill);overflow:hidden;display:flex;background:var(--line);margin-top:10px}
.split .a{background:var(--ok)}.split .b{background:var(--warn)}
.legend{display:flex;gap:16px;margin-top:9px;font-size:12px;color:var(--mut)}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:middle}

/* ---------- checkout / qris ---------- */
.qris{background:#fff;border-radius:var(--r);padding:22px;text-align:center;box-shadow:var(--sh)}
.qris .box{width:210px;height:210px;margin:12px auto;border-radius:16px;background:#fff;
  border:1px solid var(--line);display:grid;place-items:center;position:relative;overflow:hidden}
.qris .box img{width:88%}
.qris .sim{position:absolute;bottom:8px;left:0;right:0;font-size:10px;color:var(--mut)}
.cart-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}
.cart-row img{width:52px;height:52px;border-radius:11px;object-fit:cover}
.cart-row .p{margin-left:auto;font-weight:700}
.total{display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-weight:850;font-size:19px}

/* ---------- bottom nav ---------- */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--maxw);
  display:flex;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);border-top:1px solid var(--line);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));z-index:40}
.tabbar.hide{display:none}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;
  color:var(--mut);font-weight:700;padding:5px}
.tabbar button .i{font-size:21px}
.tabbar button.on{color:var(--brand1)}

/* ---------- misc ---------- */
.empty{text-align:center;padding:60px 26px;color:var(--mut)}
.empty .big{font-size:52px;margin-bottom:8px}
.badge{display:inline-flex;align-items:center;gap:5px;background:rgba(14,165,165,.1);color:var(--brand1);
  padding:5px 11px;border-radius:var(--r-pill);font-size:11.5px;font-weight:700}
.chip{display:inline-flex;gap:6px;align-items:center;padding:7px 13px;border-radius:var(--r-pill);
  background:#fff;box-shadow:var(--sh);font-size:12.5px;font-weight:600}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r-pill);font-size:13.5px;font-weight:600;
  box-shadow:var(--sh-lg);opacity:0;transition:.42s var(--spring);z-index:90;max-width:88%;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.spinner{width:22px;height:22px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;display:inline-block}
.skel{background:linear-gradient(90deg,#eee,#f5f5f5,#eee);background-size:200% 100%;
  animation:sh 1.2s infinite;border-radius:14px}
@keyframes sh{to{background-position:-200% 0}}
.progress{height:7px;background:var(--line);border-radius:var(--r-pill);overflow:hidden;margin-top:10px}
.progress>i{display:block;height:100%;background:var(--grad-brand);width:0;transition:width .3s}
.adv{font-size:12.5px;color:var(--brand1);font-weight:700;margin-top:12px}
details.advbox summary{list-style:none}summary::-webkit-details-marker{display:none}

/* ikon garis simpel — alignment & helper */
.icn{flex:none;vertical-align:-.18em}
.iconbtn.brand{color:var(--brand1)}
.adv{display:inline-flex;align-items:center;gap:7px}
.cnt{display:inline-flex;align-items:center;gap:5px}
.tile .tag{display:inline-flex;align-items:center;gap:4px}
.ev .body .m span{display:inline-flex;align-items:center;gap:5px}
.card.ok-note{border-left:4px solid var(--ok);display:flex;align-items:center;gap:9px}
.deck-empty .big .icn,.empty .big .icn{color:var(--brand1)}
.deck-acts .act-skip .icn{stroke-width:2.6}
.hero .fee .icn{color:#FFE9A8}

/* akun & enrollment */
.role.rec{border:2px solid var(--brand1)}
.btn-danger{background:#fff;color:#E5484D;box-shadow:var(--sh);border:1px solid #F3C9CB}
.lnk{color:var(--brand1);font-weight:700}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:13px;color:var(--ink);line-height:1.5}
.consent input{width:22px;height:22px;flex:none;accent-color:var(--brand1);margin-top:1px}
.consent a{color:var(--brand1);font-weight:700;text-decoration:underline}
.terms{white-space:pre-wrap;font-family:inherit;font-size:12.5px;line-height:1.6;color:var(--ink);margin:0;max-height:62vh;overflow:auto}
.acc-face{width:88px;height:88px;border-radius:50%;margin:0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(14,165,165,.14),rgba(255,90,122,.12));color:var(--brand1)}
.acc-face.sm{width:52px;height:52px;margin:0}
.enroll-slots{display:flex;flex-direction:column;gap:11px}
.eslot{display:flex;align-items:center;gap:13px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:12px;transition:.15s}
.eslot:active{transform:scale(.99)}
.eslot.done{border-color:var(--ok);background:rgba(16,185,129,.04)}
.eslot-img{width:58px;height:58px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:#0C0C12;color:#fff;overflow:hidden}
.eslot-img img{width:100%;height:100%;object-fit:cover}
.eslot-t b{font-size:15px}.eslot-t small{display:block;color:var(--mut);font-size:12px;margin-top:1px}

/* auto-enroll kamera (gaya Face ID) */
.cam-wrap{position:relative;width:min(82vw,320px);aspect-ratio:1;margin:12px auto 4px}
.ring-ticks{position:absolute;inset:0;width:100%;height:100%}
.ring-ticks .tick{stroke:rgba(14,165,165,.15);stroke-width:2;stroke-linecap:round;
  transition:stroke .3s ease,stroke-width .3s ease}
.ring-ticks .tick.on{stroke:var(--ok)}
.ring-ticks .tick.active{stroke:#46e6bf;stroke-width:3;filter:drop-shadow(0 0 1.6px rgba(16,185,129,.95))}
.cam-circle{position:absolute;inset:9%;border-radius:50%;overflow:hidden;background:#0C0C12;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.07),0 12px 34px rgba(0,0,0,.28);
  transition:transform .55s var(--spring)}
.cam-circle video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cam-circle.done{transform:scale(.9)}
.cam-ov{position:absolute;inset:0;border-radius:50%;border:3px solid transparent;pointer-events:none;
  transition:border-color .2s,box-shadow .2s}
.cam-ov.hot{border-color:rgba(16,185,129,.9);box-shadow:inset 0 0 24px rgba(16,185,129,.38)}
.cam-ov.flash{border-color:#fff;box-shadow:inset 0 0 44px rgba(255,255,255,.65)}
.cam-done{position:absolute;inset:0;display:grid;place-items:center;background:rgba(13,148,136,.5);
  opacity:0;transition:opacity .35s ease;backdrop-filter:blur(2px)}
.cam-done.show{opacity:1}
.cam-hint{position:absolute;inset:9%;display:grid;place-items:center;color:#fff;font-size:13px;
  text-align:center;padding:20px;text-shadow:0 1px 3px rgba(0,0,0,.6);border-radius:50%}
/* checkmark gambar (sukses) */
.scheck{width:76px;height:76px}
.scheck-c{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151}
.scheck-p{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:44;stroke-dashoffset:44}
.show .scheck-c{animation:drawC .5s ease forwards}
.show .scheck-p{animation:drawP .45s .42s ease forwards}
@keyframes drawC{to{stroke-dashoffset:0}}
@keyframes drawP{to{stroke-dashoffset:0}}
/* layar sukses (bayar/enroll) */
.success-screen{display:grid;place-items:center;min-height:72vh;text-align:center;padding:20px}
.succ-badge{width:124px;height:124px;border-radius:50%;background:var(--grad-brand);display:grid;place-items:center;
  box-shadow:0 22px 54px rgba(14,165,165,.42);transform:scale(.55);opacity:0;transition:.55s var(--spring)}
.succ-badge.show{transform:scale(1);opacity:1}
.succ-badge .scheck{width:66px;height:66px}
.success-screen h2{letter-spacing:-.02em;margin:20px 0 0}
.pose-row{display:flex;justify-content:center;gap:10px;margin-top:14px}
.pstep{width:48px;display:flex;flex-direction:column;align-items:center;gap:5px;font-weight:800;font-size:13px;color:var(--mut)}
.pstep .pdot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:2px solid currentColor}
.pstep>small{font-weight:600;font-size:10px;color:var(--mut)}
.pstep.cur{color:var(--brand1)}.pstep.cur .pdot{background:rgba(14,165,165,.1)}
.pstep.done{color:var(--ok)}.pstep.done .pdot{background:var(--ok);color:#fff;border-color:var(--ok);animation:popIn .42s var(--spring)}
.pstep.cur .pdot{animation:breathe 1.5s ease-in-out infinite}
@keyframes popIn{0%{transform:scale(.4)}60%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(14,165,165,0)}50%{box-shadow:0 0 0 7px rgba(14,165,165,.14)}}
.dbg{text-align:center;font-size:11px;color:var(--mut);margin-top:8px;font-family:monospace;opacity:.7}

/* jejak (dashboard peserta) */
.jhero{display:flex;align-items:center;gap:13px;background:#fff;border-radius:var(--r);padding:14px;box-shadow:var(--sh)}
.jstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.jstat{background:#fff;border-radius:var(--r-sm);padding:14px 8px;text-align:center;box-shadow:var(--sh)}
.jstat .v{font-size:24px;font-weight:850;letter-spacing:-.02em;color:var(--brand1)}
.jstat .l{font-size:11px;color:var(--mut);font-weight:600;margin-top:2px}
.jevent{margin-top:18px}
.jev-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.jev-head b{font-size:14.5px;letter-spacing:-.01em}.jev-head .muted{font-size:11.5px;white-space:nowrap}
.recap-prev{border-radius:18px;overflow:hidden;box-shadow:var(--sh-lg);background:#0C0C12}
.recap-prev canvas{width:100%;display:block}
.theme-row{display:flex;gap:8px;margin-top:12px}
.theme-chip{flex:1;padding:11px;border-radius:12px;border:1.5px solid var(--line);background:#fff;
  font-weight:700;font-size:13.5px;color:var(--mut);transition:.15s}
.theme-chip.on{border-color:var(--brand1);color:var(--brand1);background:rgba(14,165,165,.07)}
.theme-chip:active{transform:scale(.97)}
.sw-row{display:flex;gap:11px}
.sw{width:38px;height:38px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px var(--line);transition:.15s}
.sw.on{box-shadow:0 0 0 3px var(--ink)}
.sw:active{transform:scale(.9)}
.fmt-row{display:flex;gap:8px;margin-top:12px;background:#ECECF3;border-radius:12px;padding:4px}
.fmt-chip{flex:1;padding:9px;border-radius:9px;background:transparent;font-weight:700;font-size:13px;color:var(--mut)}
.fmt-chip.on{background:#fff;color:var(--brand1);box-shadow:var(--sh)}
.kstrip{display:flex;gap:8px;overflow:auto;padding-top:4px}
.kstrip img{flex:none;width:72px;height:72px;object-fit:cover;border-radius:11px;border:3px solid transparent;opacity:.65;transition:.15s}
.kstrip img.on{border-color:var(--brand1);opacity:1}
.pub-link{display:flex;align-items:center;gap:8px;margin-top:9px;background:rgba(14,165,165,.08);border-radius:10px;padding:9px 11px;font-size:12.5px}
.pub-link span{flex:1;color:var(--brand1);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pub-link button{display:inline-flex;gap:5px;align-items:center;background:var(--brand1);color:#fff;font-weight:700;font-size:12px;padding:7px 11px;border-radius:999px;flex:none}
.ev-qr{display:flex;gap:12px;align-items:center}
.ev-qr>img{width:118px;height:118px;border-radius:12px;border:1px solid var(--line);background:#fff;flex:none}
.ev-qr-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.ev-qr-side .pub-link{margin-top:0}

/* ===== Jejak v2 (hero + profil) ===== */
.jejak2{padding-bottom:96px}
.jhero2{position:relative;height:372px;overflow:hidden;border-radius:0 0 30px 30px}
.jhero-bg{position:absolute;inset:-34px;background-position:center;background-size:cover;
  filter:blur(22px) brightness(.6) saturate(1.12);transform:scale(1.14);will-change:transform}
.jhero-ov{position:absolute;inset:0;background:linear-gradient(160deg,rgba(14,165,165,.55),rgba(13,148,136,.22) 45%,rgba(8,11,15,.84))}
.jhero-top{position:absolute;top:14px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;color:#fff;z-index:2}
.jlogo{display:flex;gap:8px;align-items:center;font-weight:800;font-size:16px}
.jic{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);
  display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.25)}
.jhero-c{position:absolute;left:0;right:0;bottom:22px;padding:0 20px;color:#fff;text-align:center;z-index:2}
.ava2{width:106px;height:106px;border-radius:50%;margin:0 auto 12px;padding:4px;
  background:conic-gradient(from 120deg,#2BD4C0,#0EA5A5,#2BD4C0);animation:avaPop .5s var(--spring) both}
.ava2 img,.ava-mono{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.92)}
.ava-mono{display:grid;place-items:center;background:var(--grad-brand);font-size:40px;font-weight:850;color:#fff}
@keyframes avaPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.jnm{font-size:25px;font-weight:850;letter-spacing:-.02em}
.jhandle{opacity:.82;font-size:13.5px;margin-top:1px}
.jgelar{display:inline-flex;gap:7px;align-items:center;margin-top:10px;background:rgba(255,255,255,.2);
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:700}
.jstats2{display:flex;gap:10px;margin-top:16px;justify-content:center}
.jstat2{flex:1;background:rgba(255,255,255,.15);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:11px 6px}
.jstat2 b{display:block;font-size:23px;font-weight:850;letter-spacing:-.02em}
.jstat2 span{font-size:10px;opacity:.85;font-weight:700;letter-spacing:.03em}
.jsec{font-weight:850;font-size:16px;letter-spacing:-.01em;margin:20px 2px 11px;display:flex;align-items:center;gap:8px}
.jsec:first-child{margin-top:8px}
.jbadges{display:flex;gap:9px;overflow:auto;padding-bottom:4px;margin:0 -18px;padding-left:18px;padding-right:18px}
.jbadge{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:74px}
.jbadge .jb{width:60px;height:60px;border-radius:19px;display:grid;place-items:center;font-size:27px;
  background:linear-gradient(135deg,#E9FBF6,#D4F3EB);box-shadow:0 6px 16px rgba(14,165,165,.18);animation:popIn .45s var(--spring) both}
.jbadge.lock .jb{background:#EEF0F4;filter:grayscale(1);opacity:.55;box-shadow:none}
.jbadge small{font-size:10.5px;color:var(--mut);font-weight:700;text-align:center}
.jhl{display:flex;gap:11px;overflow:auto;margin:0 -18px;padding:2px 18px 8px}
.jhl img{flex:none;width:150px;height:200px;object-fit:cover;border-radius:18px;box-shadow:0 10px 26px rgba(20,20,45,.14)}
.jev2{background:#fff;border-radius:22px;box-shadow:var(--sh);padding:13px;margin-bottom:13px;display:flex;gap:13px;align-items:center;transition:transform .15s}
.jev2:active{transform:scale(.99)}
.jcol{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:3px;width:78px;height:78px;flex:none;border-radius:14px;overflow:hidden;background:#eee}
.jcol img{width:100%;height:100%;object-fit:cover}
.jcol img:first-child:nth-last-child(n+3){grid-row:1/3}
.jev-m b{font-size:15px;letter-spacing:-.01em}
.jev-d{color:var(--mut);font-size:12px;margin-top:3px}
.jcta{margin-top:9px;display:inline-flex;gap:6px;align-items:center;background:var(--brand1);color:#fff;font-size:12px;font-weight:700;padding:7px 13px;border-radius:999px}

/* ===== Landing v2 (dinding foto) ===== */
#land{padding-bottom:0}
.lbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;
  padding:13px 16px;background:rgba(245,245,251,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.llogo{display:flex;gap:8px;align-items:center;font-weight:850;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.llogo .icn{color:var(--brand1)}
.lmasuk{display:inline-flex;gap:7px;align-items:center;background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh);padding:9px 15px;border-radius:999px;font-weight:700;font-size:13.5px;color:var(--ink)}
.lmasuk:active{transform:scale(.96)}
.lhero{margin:14px;padding:22px;border-radius:24px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(145deg,#10B9B0,#0D9488 55%,#0b7f73)}
.lhero::after{content:"";position:absolute;right:-40px;top:-40px;width:170px;height:170px;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%)}
.lhero h1{font-size:26px;line-height:1.15;letter-spacing:-.02em;font-weight:850}
.lhero p{opacity:.9;font-size:13.5px;margin-top:7px}
.lstat{display:flex;gap:18px;margin-top:14px;font-size:13px;opacity:.95}
.lstat b{font-size:17px;font-weight:850}
.lcta{display:flex;gap:9px;align-items:center;justify-content:center;background:#fff;color:#0b7f73;font-weight:800;
  width:100%;padding:15px;border-radius:14px;margin-top:16px;font-size:16px;box-shadow:0 12px 28px rgba(0,0,0,.18)}
.lcta:active{transform:scale(.98)}
.lsec{display:flex;justify-content:space-between;align-items:center;margin:20px 16px 11px}
.lsec b{font-size:16px;font-weight:850;letter-spacing:-.01em;display:flex;align-items:center;gap:7px}
.lsec span{color:var(--brand1);font-size:12.5px;font-weight:700}
.lwall{column-count:2;column-gap:9px;padding:0 16px}
.lph{position:relative;break-inside:avoid;margin-bottom:9px;border-radius:16px;overflow:hidden;box-shadow:0 8px 22px rgba(20,20,45,.1);background:#eee}
.lph img{width:100%;display:block}
.levc{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);color:#fff;font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:999px}
.lempty{text-align:center;color:var(--mut);padding:40px 24px}.lempty .icn{color:var(--brand1);opacity:.6}.lempty p{margin-top:10px;font-size:13.5px}
.lfab{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);width:calc(var(--maxw) - 32px);max-width:92%;
  display:flex;gap:9px;align-items:center;justify-content:center;background:var(--grad-brand);color:#fff;
  font-weight:800;font-size:16px;padding:16px;border-radius:16px;box-shadow:0 16px 34px rgba(14,165,165,.45);z-index:15}
.lfab:active{transform:translateX(-50%) scale(.98)}
/* bottom sheet Masuk */
.sheet-bg{position:fixed;inset:0;background:rgba(10,12,16,.5);z-index:100;display:flex;align-items:flex-end;
  opacity:0;transition:opacity .25s}
.sheet-bg.show{opacity:1}
.sheet{width:100%;max-width:var(--maxw);margin:0 auto;background:#fff;border-radius:26px 26px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .3s var(--spring)}
.sheet-bg.show .sheet{transform:none}
.sheet-grip{width:42px;height:5px;border-radius:999px;background:var(--line);margin:4px auto 12px}
.sheet-h{font-weight:850;font-size:17px;margin:2px 4px 12px;letter-spacing:-.01em}
.sheet-opt{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:18px;margin-bottom:10px}
.sheet-opt:active{transform:scale(.99)}
.so-ic{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;color:#fff;flex:none}
.so-ic.buy{background:var(--grad-brand)}.so-ic.sell{background:linear-gradient(135deg,#FF7A59,#FF5A7A)}
.so-t{flex:1}.so-t b{font-size:15.5px}.so-d{font-size:12.5px;color:var(--mut);margin-top:1px}
.sheet-opt .arr{color:var(--mut);font-size:20px}