/* Contoh tampilan Bi Coffee, dibuat oleh Nusaforma.
   Sistem: tiga warna (krem, hijau taman, cokelat jati), dua huruf (Cormorant Garamond, Jost),
   satu radius (4px), satu struktur bagian. Warna datar, tanpa emoji, tanpa foto atau logo klien. */
:root{
  --cream:#f6f0e2; --alt:#ece3cd; --paper:#fffcf4;
  --green:#1f3d2e; --green-d:#16301f; --teak:#8b5a34;
  --slot:#dde2cf; --ink:#27261f; --mute:#5d5a48; --line:#d6cbb0;
  --r:4px;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --bar:97px; --strip:22px;
}
*{box-sizing:border-box;margin:0}
html{scroll-padding-top:calc(var(--bar) + var(--strip) + 12px)}
@media (min-width:760px){:root{--bar:65px}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--teak);outline-offset:3px;border-radius:3px}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 20px}
@media (min-width:760px){.wrap{padding:0 32px}}

/* penanda contoh */
.mark{position:sticky;top:0;z-index:60;height:var(--strip);line-height:var(--strip);text-align:center;background:var(--teak);color:var(--cream);font-weight:500;font-size:12px;letter-spacing:.04em;pointer-events:none}
.wm{position:fixed;inset:0;z-index:80;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='220'%3E%3Ctext x='60' y='130' transform='rotate(-24 170 110)' font-family='Jost,Arial,sans-serif' font-size='30' font-weight='600' fill='%23273d2e' fill-opacity='.07'%3ECONTOH%3C/text%3E%3C/svg%3E")}

/* ---------- tajuk ---------- */
.bar{position:sticky;top:var(--strip);z-index:50;display:grid;grid-template-columns:1fr auto;grid-template-areas:"logo cta" "links links";align-items:center;column-gap:14px;padding:0 20px;background:var(--cream);border-bottom:1px solid var(--line)}
.bar .logo{grid-area:logo;height:56px;display:flex;align-items:center}
.bar>.btn{grid-area:cta}
.links{grid-area:links;display:flex;justify-content:space-between;gap:4px;font-size:15px;font-weight:500;border-top:1px solid var(--line);margin:0 -20px;padding:0 20px}
.links a{flex:1;display:flex;align-items:center;justify-content:center;min-height:40px;color:var(--mute);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s}
.links a:hover{color:var(--green)}
.links a[aria-current="page"]{color:var(--green);border-bottom-color:var(--teak);font-weight:600}
.logo{font-family:var(--serif);font-weight:700;font-size:26px;letter-spacing:-.005em;color:var(--green);white-space:nowrap}
@media (min-width:760px){
  .bar{grid-template-columns:auto 1fr auto;grid-template-areas:"logo links cta";padding:0 32px}
  .bar .logo{height:64px}
  .links{border-top:0;margin:0;padding:0;justify-content:center;gap:34px;font-size:16px}
  .links a{flex:none;min-height:64px;padding:0 2px}
}

/* ---------- tombol ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:1.5px solid transparent;border-radius:var(--r);font-weight:500;font-size:16px;cursor:pointer;transition:background .2s,color .2s,transform .15s var(--ease)}
.btn:active{transform:scale(.98)}
.btn.sm{min-height:38px;padding:0 16px;font-size:15px}
.btn.solid{background:var(--green);color:var(--cream)}
.btn.solid:hover{background:var(--green-d)}
.btn.line{border-color:var(--green);color:var(--green)}
.btn.line:hover{background:var(--alt)}
.btn.wide{width:100%;margin-top:22px}

/* ---------- tipografi ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:700;color:var(--green);letter-spacing:-.01em}
h1{font-size:clamp(42px,8vw,72px);line-height:1}
h2{font-size:clamp(34px,5vw,48px);line-height:1.05;max-width:20ch}
h3{font-size:26px;line-height:1.15}
.lead{font-size:18px;line-height:1.6;color:var(--mute);max-width:46ch;margin-top:16px}
.fine{font-size:14px;line-height:1.55;color:var(--mute);margin-top:16px;max-width:60ch}

/* ---------- hero ---------- */
.hero{padding:40px 0 0}
.hero-grid{display:grid;gap:30px}
.hero-text{padding-top:6px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.cta .btn{flex:1 1 auto}
.open{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:15px;font-weight:500;color:var(--mute)}
.dot{width:8px;height:8px;border-radius:50%;background:#9a937c;flex:none}
.dot.on{background:var(--green)}
.scene{height:clamp(300px,70vw,420px);overflow:hidden;border-radius:var(--r);background:#e3ead6}
.scene svg{display:block;width:100%;height:100%}
@media (min-width:560px){.cta .btn{flex:0 0 auto}}
@media (min-width:900px){
  .hero{padding:56px 0 0}
  .hero-grid{grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
  .scene{height:520px}
}
.ripples .rp{transform-box:fill-box;transform-origin:center;animation:ripple 5s ease-out infinite;opacity:0}
.ripples .rp2{animation-delay:1.7s}.ripples .rp3{animation-delay:3.4s}
@keyframes ripple{0%{opacity:.8;scale:.4}100%{opacity:0;scale:2}}
.leaf{animation:sway 7s ease-in-out infinite}
.leaf.l2{animation-delay:-3s}
@keyframes sway{0%,100%{rotate:-1.6deg}50%{rotate:1.6deg}}

/* ---------- bagian (satu struktur untuk semuanya) ---------- */
.sec{padding:64px 0}
@media (min-width:760px){.sec{padding:96px 0}}
.sec.alt{background:var(--alt)}
.trio{display:grid;gap:28px;margin-top:40px}
.trio article{border-top:1px solid var(--line);padding-top:20px}
.trio p{color:var(--mute);margin-top:8px;max-width:36ch}
.edit{color:var(--ink);border-bottom:1px dashed var(--teak)}
@media (min-width:820px){.trio{grid-template-columns:repeat(3,1fr);gap:40px}}

/* ---------- menu ---------- */
.tabs{display:flex;gap:4px;overflow-x:auto;margin:28px -20px 0;padding:0 20px;border-bottom:1px solid var(--line);scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
@media (min-width:760px){.tabs{margin:28px 0 0;padding:0}}
.tab{flex:none;min-height:46px;padding:0 16px;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;background:transparent;font-weight:500;font-size:16px;color:var(--mute);cursor:pointer;transition:color .2s,border-color .2s}
.tab:hover{color:var(--green)}
.tab[aria-selected="true"]{color:var(--green);border-bottom-color:var(--teak);font-weight:600}
.mlist{list-style:none;padding:0;margin-top:14px;columns:1}
@media (min-width:820px){.mlist{columns:2;column-gap:64px}}
.mlist li{display:flex;align-items:baseline;gap:10px;padding:13px 0;break-inside:avoid;animation:rise .45s var(--ease) both;animation-delay:calc(var(--n,0)*30ms)}
.mlist .n{font-size:18px;font-weight:500}
.mlist .l{flex:1;border-bottom:2px dotted #a89d7c;translate:0 -5px;min-width:16px}
.mlist .p{font-family:var(--serif);font-weight:700;font-size:21px;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
@keyframes rise{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}

/* ---------- acara ---------- */
.rows{list-style:none;padding:0;margin-top:32px;border-top:1px solid var(--line)}
.rows li{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.rows b{display:block;font-family:var(--serif);font-size:26px;font-weight:700;color:var(--green);line-height:1.15}
.rows small{display:block;font-size:15px;color:var(--mute);margin-top:2px}
.rows .amt{text-align:right;font-weight:600;font-size:17px;color:var(--teak);font-variant-numeric:lining-nums}
.rows .amt small{font-weight:400;font-size:13px}
@media (max-width:559px){.rows li{flex-direction:column;gap:8px}.rows .amt{text-align:left}.facts>div{grid-template-columns:1fr;gap:2px}}

.resv{margin-top:44px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px 24px;max-width:760px}
@media (min-width:760px){.resv{padding:34px 36px 30px}}
.seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:16px}
.seg button{min-height:46px;border:0;background:transparent;font-weight:500;font-size:15px;cursor:pointer;transition:background .2s,color .2s}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--green);color:var(--cream)}
.resv label,.resv .lab{display:block;margin-top:18px;margin-bottom:6px;font-weight:500;font-size:15px}
.t{display:block;width:100%;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);min-height:48px}
textarea.t{min-height:84px;resize:none}
.t:focus{outline:3px solid var(--teak);outline-offset:1px;border-color:transparent}
.row2{display:grid;gap:0}
@media (min-width:560px){.row2{grid-template-columns:1fr 1fr;gap:22px}}
.guests{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:var(--r);background:#fff;min-height:48px}
.guests button{width:52px;height:46px;border:0;background:transparent;color:var(--teak);font-size:22px;cursor:pointer}
.guests button:active{background:var(--alt)}
.guests output{font-weight:600;font-size:20px}

/* ---------- lokasi ---------- */
.two{display:grid;gap:36px;margin-top:32px}
@media (min-width:860px){.two{grid-template-columns:1fr 1fr;gap:64px;align-items:start}}
.facts{border-top:1px solid var(--line)}
.facts>div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.facts dt{font-weight:500;color:var(--mute)}
.status{margin:14px 0 22px;font-weight:600;color:var(--teak)}
.two h3{margin-bottom:6px}
.two .plain+h3{margin-top:30px}
.plain{list-style:none;padding:0;border-top:1px solid var(--line)}
.plain li{padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink)}

/* ---------- kaki ---------- */
.foot{background:var(--green);color:var(--cream);padding:48px 0 72px}
.foot .logo{color:var(--cream);font-size:30px}
.foot p{margin-top:10px;color:#cfd9c8}
.foot .fine{color:#b7c4af}

/* ---------- jendela pratinjau ---------- */
.modal-bg{position:fixed;inset:0;z-index:100;background:rgba(31,61,46,.6);opacity:0;transition:opacity .3s}
.modal-bg.on{opacity:1}
.modal{position:fixed;z-index:101;left:50%;top:50%;width:min(92vw,460px);max-height:88vh;overflow-y:auto;background:var(--paper);color:var(--ink);border-radius:var(--r);padding:26px 22px 22px;translate:-50% -46%;opacity:0;visibility:hidden;transition:opacity .3s,translate .45s var(--ease),visibility 0s .45s}
.modal.on{opacity:1;visibility:visible;translate:-50% -50%;transition:opacity .3s,translate .45s var(--ease),visibility 0s 0s}
.modal .x{position:absolute;top:8px;right:10px;width:40px;height:40px;border:0;border-radius:var(--r);background:transparent;font-size:30px;line-height:1;cursor:pointer}
.modal .x:hover{background:var(--alt)}
.modal h3{margin:2px 40px 14px 0}
.bubble{background:#e2ebd5;border-radius:12px 12px 3px 12px;padding:14px 16px;font-size:15.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.toast{position:fixed;z-index:110;left:50%;bottom:36px;translate:-50% 20px;max-width:86%;background:var(--green);color:var(--cream);font-weight:500;font-size:15px;padding:10px 18px;border-radius:var(--r);opacity:0;pointer-events:none;transition:opacity .3s,translate .4s var(--ease);text-align:center}
.toast.on{opacity:1;translate:-50% 0}


/* ---------- halaman dalam ---------- */
.pagehead{padding:44px 0 8px}
.pagehead h1{font-size:clamp(40px,7vw,64px)}
@media (min-width:760px){.pagehead{padding:64px 0 8px}}
.sec.tight{padding-top:40px}
@media (min-width:760px){.sec.tight{padding-top:56px}}
.body{font-size:18px;line-height:1.65;color:var(--ink);max-width:52ch;margin-top:16px}
.sub{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--teak);margin-top:6px}
.more{margin-top:24px}
.tl{font-weight:600;color:var(--green);border-bottom:2px solid var(--teak);padding-bottom:1px;transition:color .2s}
.tl:hover{color:var(--teak)}

/* slot foto (menunggu foto asli dengan izin) */
.ph{position:relative;margin:0;background:var(--slot);border-radius:var(--r);aspect-ratio:4/3;display:flex;align-items:flex-end;overflow:hidden}
.ph figcaption{padding:10px 14px;font-size:13px;color:var(--mute)}
.ph.tall{aspect-ratio:3/4}
.ph.wide{aspect-ratio:3/2}
.ph.portrait{aspect-ratio:4/5;max-width:340px}
.strip-sec{padding:34px 0 0}
.strip{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px}
.strip::-webkit-scrollbar{display:none}
.strip .ph{flex:0 0 72%;aspect-ratio:4/3}
@media (min-width:760px){.strip{margin:0;padding:0;overflow:visible}.strip .ph{flex:1 1 0;aspect-ratio:3/4}}
.moments{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}
.moments .ph{aspect-ratio:1/1}
.moments .big{grid-column:1/-1;aspect-ratio:16/9}
@media (min-width:760px){.moments{grid-template-columns:repeat(4,1fr)}.moments .big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* kutipan */
.quotes{display:grid;gap:28px;margin-top:36px}
.quotes blockquote{border-top:1px solid var(--line);padding-top:18px}
.quotes p{font-family:var(--serif);font-size:23px;line-height:1.3;font-weight:600;color:var(--green)}
@media (min-width:860px){.quotes{grid-template-columns:repeat(3,1fr);gap:40px}}

/* layanan */
.svc{display:grid;gap:28px;align-items:center}
@media (min-width:860px){.svc{grid-template-columns:1fr 1fr;gap:64px}.svc.rev>div:first-child{order:2}}
.empty{margin-top:28px;color:var(--mute)}
#mSearch{margin-top:6px}
.lab{display:block;font-weight:500;font-size:15px}
.sec.tight .tabs{margin-top:22px}
.sec.tight .btn.solid{margin-top:26px}
.sec .two{margin-top:0}
.foot-grid{display:grid;gap:22px}
@media (min-width:760px){.foot-grid{grid-template-columns:1.2fr 1fr;gap:48px}}
.foot .fine{margin-top:28px}

/* muncul bertahap */
.js .rv{opacity:0;translate:0 16px;transition:opacity .7s var(--ease),translate .7s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.js .rv.in{opacity:1;translate:0 0}

/* mode tangkapan layar */
.shot *,.shot *::before,.shot *::after{animation:none!important;transition:none!important}
.shot .rv{opacity:1!important;translate:0 0!important}
.shot .ripples .rp{opacity:.6;scale:1.2}
.shot .toast{display:none}
html.shot{scroll-behavior:auto}
.shot :focus,.shot :focus-visible{outline:none!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;translate:0 0}
}

.cnt{font-size:12px;font-weight:500;color:var(--mute);margin-left:4px;font-variant-numeric:lining-nums}
.tab[aria-selected="true"] .cnt{color:var(--teak)}

.ph.has figcaption{display:none}
.mlist li.hasth{align-items:center}
.mlist .th{width:56px;height:56px;object-fit:cover;border-radius:var(--r);flex:none}
.mlist li.out .n,.mlist li.out .p{color:var(--mute)}
.mlist li.out .p{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--teak)}

/* ---------- panel admin dan halaman masuk (contoh) ---------- */
body.adm{background:#f3eee0}
.lite{min-height:38px;padding:0 14px;border:1.5px solid rgba(246,240,226,.4);border-radius:var(--r);background:transparent;color:var(--cream);font-weight:500;font-size:15px;cursor:pointer}
.lite:hover{background:rgba(246,240,226,.12)}
.side{background:var(--green);color:var(--cream)}
.side-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;height:56px}
.side .logo{color:var(--cream);font-size:24px}
.snav{display:flex;gap:4px;overflow-x:auto;padding:0 12px 10px;scrollbar-width:none}
.snav::-webkit-scrollbar{display:none}
.snav button{flex:none;min-height:42px;padding:0 14px;border:0;border-radius:var(--r);background:transparent;color:#cfd9c8;font-weight:500;font-size:15px;text-align:left;cursor:pointer}
.snav button:hover{color:var(--cream)}
.snav button[aria-current="page"]{background:rgba(246,240,226,.15);color:var(--cream);font-weight:600}
.side-foot{display:none}
.cont{padding:26px 20px 80px;min-width:0}
.apanel{max-width:960px}
.apanel[hidden]{display:none}
.apanel h1{font-size:clamp(32px,5vw,42px)}
.h2s{font-size:26px;margin:34px 0 14px;max-width:none}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.card.narrow{max-width:520px;margin-top:24px}
@media (min-width:900px){
  .shell{display:grid;grid-template-columns:248px 1fr;min-height:calc(100vh - var(--strip))}
  .side{position:sticky;top:var(--strip);height:calc(100vh - var(--strip));display:flex;flex-direction:column;padding:6px 14px 18px}
  .side-top{padding:0 6px;height:64px}
  .mob{display:none}
  .snav{flex-direction:column;overflow:visible;padding:10px 0;gap:2px}
  .snav button{width:100%;min-height:44px}
  .side-foot{display:flex;flex-direction:column;gap:10px;margin-top:auto;border-top:1px solid rgba(246,240,226,.2);padding:16px 6px 0;font-size:14px;color:#cfd9c8}
  .side-foot .who b{color:var(--cream)}
  .sl{color:var(--cream);border-bottom:1px solid rgba(246,240,226,.5);align-self:flex-start}
  .cont{padding:36px 44px 80px}
}
/* ringkasan */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
@media (min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 14px}
.stat b{display:block;font-family:var(--serif);font-size:34px;line-height:1.05;color:var(--green);font-variant-numeric:lining-nums}
.stat span{display:block;margin-top:6px;font-size:14px;color:var(--mute);line-height:1.35}
.todo{list-style:none;padding:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.todo li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line)}
.todo li:last-child{border-bottom:0}
.todo b{font-weight:600}
@media (max-width:559px){.todo li{flex-direction:column;align-items:flex-start}}
/* menu */
.phead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.tools{display:grid;gap:12px;margin:22px 0 16px}
@media (min-width:760px){.tools{grid-template-columns:2fr 1.3fr 1fr}}
.tools .lab,.lab{display:block;margin-bottom:6px;font-weight:500;font-size:15px}
select.t{appearance:auto}
.mt{list-style:none;padding:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.mr{display:grid;grid-template-columns:60px 1fr auto;grid-template-areas:"th n b" "th c b" "th p s";gap:2px 14px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.mr:last-child{border-bottom:0}
.mr.none{display:block;color:var(--mute)}
.mth{grid-area:th;width:60px;height:60px;padding:0;border:1px dashed #b8ad8c;border-radius:var(--r);background:var(--slot);cursor:pointer;overflow:hidden;font-size:12px;line-height:1.2;color:var(--mute)}
.mth:not(.empty){border:0}
.mth img,.pv img,.gp img{display:block;width:100%;height:100%;object-fit:cover}
.mn{grid-area:n;font-weight:600}
.mn small{font-weight:500;font-size:12px;color:var(--teak);margin-left:6px}
.mc{grid-area:c;font-size:14px;color:var(--mute)}
.mp{grid-area:p;font-weight:600;font-variant-numeric:lining-nums tabular-nums}
.ms{grid-area:s;font-size:14px;font-weight:500;color:var(--green);text-align:right}
.ms.off{color:var(--teak)}
.mb{grid-area:b;justify-self:end}
@media (min-width:860px){
  .mr{grid-template-columns:60px minmax(0,1.7fr) minmax(0,1fr) 120px 110px 78px;grid-template-areas:"th n c p s b";gap:14px}
  .ms{text-align:left}
}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;font-size:15px;color:var(--mute)}
.pager .btn[disabled]{opacity:.4;cursor:default}
#aReset{margin-top:6px}
/* foto situs */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (min-width:760px){.gal{grid-template-columns:repeat(4,1fr)}}
.gp{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--slot);display:grid;place-items:center;color:var(--mute);font-size:13px}
.gp.empty{border:1px dashed #b8ad8c}
.ga{display:flex;gap:8px;margin-top:8px}
/* kotak masuk */
.ir{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line)}
.ir:last-child{border-bottom:0}
.ir small{display:block;color:var(--mute);margin-top:2px}
.st{font-size:14px;font-weight:500;color:var(--mute);white-space:nowrap}
.st.new{color:var(--teak);font-weight:600}
/* jendela ubah */
.dlg{border:0;border-radius:var(--r);padding:0;width:min(94vw,540px);max-height:92vh;background:var(--paper);color:var(--ink)}
.dlg::backdrop{background:rgba(31,61,46,.62)}
.dlg form{padding:24px 22px 22px}
.dlg h2{font-size:30px;max-width:none}
.pick{display:flex;align-items:center;gap:16px;margin-top:18px}
.pv{width:104px;height:104px;border-radius:var(--r);overflow:hidden;background:var(--slot);border:1px dashed #b8ad8c;display:grid;place-items:center;text-align:center;font-size:13px;color:var(--mute);flex:none}
.pv:has(img){border:0}
.pbtn{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.upl{position:relative;cursor:pointer}
.upl:focus-within{outline:3px solid var(--teak);outline-offset:3px}
.dlg .lab{margin-top:16px}
.dlg .row2{display:grid;gap:0}
@media (min-width:520px){.dlg .row2{grid-template-columns:1fr 1fr;gap:18px}}
.chk{display:flex;align-items:center;gap:10px;margin-top:14px;font-weight:500;cursor:pointer}
.chk input{width:20px;height:20px;accent-color:var(--green)}
.dact{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;align-items:center}
.dact .sp{flex:1}
.dact .btn{min-height:44px;padding:0 18px}
.lerr{margin-top:14px;color:#8a3b1f;font-weight:500;font-size:15px}
.lerr[hidden]{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* halaman masuk */
.login{min-height:calc(100vh - var(--strip));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px 20px}
.lcard{width:min(100%,420px);background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px 26px}
.lcard .logo{font-size:28px}
.lcard h1{font-size:34px;margin-top:18px}
.lsub{color:var(--mute);margin-top:6px}
.lcard label{display:block;margin:18px 0 6px;font-weight:500;font-size:15px}
.pw{position:relative}
.pw .t{padding-right:104px}
.pwb{position:absolute;right:4px;top:4px;height:40px;padding:0 12px;border:0;border-radius:var(--r);background:transparent;color:var(--green);font-weight:600;font-size:14px;cursor:pointer}
.pwb:hover{background:var(--alt)}
.lmore{margin-top:18px;text-align:center}
.lnote{margin-top:18px}
.lback{font-size:15px}
.foot .tl{color:var(--cream);border-bottom-color:var(--cream)}
.foot .tl:hover{color:#fff}