/* Listing — clean, modern, Apple-like light pastel */
*{box-sizing:border-box;}
/* ═══════════════════════════════════════════════════════════
   Latar hidup.

   Tiga bidang warna besar bergerak sangat lambat dan saling menembus —
   itulah yang membuat permukaan terasa cair, bukan animasi yang mencolok.
   Geraknya sengaja berdurasi puluhan detik: sesuatu yang bergerak cepat
   di latar akan menarik mata terus-menerus dan melelahkan.

   Warnanya pastel dan sangat terang; hijau keluarga aplikasi tetap yang
   paling kuat, dua lainnya hanya memberi kedalaman.
   ═══════════════════════════════════════════════════════════ */
body.market{margin:0;font-family:Inter,system-ui,sans-serif;color:#182320;min-height:100vh;
  background:linear-gradient(168deg,#FBFCFB 0%,#F2F6F3 46%,#EDF3EE 100%);
  background-attachment:fixed;
  position:relative;overflow-x:hidden;}

/* Lapisan cairan. Dipisah dari body agar dapat diberi filter tanpa
   mengaburkan isi halaman. */
body.market::before{
  content:'';position:fixed;inset:-25%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(46% 40% at 18% 22%,rgba(214,242,75,.30),transparent 62%),
    radial-gradient(40% 38% at 82% 16%,rgba(91,173,143,.26),transparent 60%),
    radial-gradient(50% 44% at 62% 84%,rgba(140,214,178,.24),transparent 62%),
    radial-gradient(38% 34% at 12% 78%,rgba(226,244,150,.22),transparent 58%);
  filter:blur(46px) saturate(1.15);
  animation:mkFluid 42s ease-in-out infinite alternate;}

/* Lapisan kedua bergerak berbeda arah dan lebih lambat. Dua lapisan yang
   saling menyilang menghasilkan pola yang tidak pernah berulang persis —
   satu lapisan saja akan terasa seperti gelang yang berputar. */
body.market::after{
  content:'';position:fixed;inset:-25%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(42% 36% at 74% 60%,rgba(214,242,75,.20),transparent 60%),
    radial-gradient(36% 32% at 26% 46%,rgba(120,196,160,.20),transparent 58%);
  filter:blur(58px);
  animation:mkFluid2 67s ease-in-out infinite alternate;}

@keyframes mkFluid{
  0%   {transform:translate3d(0,0,0) scale(1)}
  33%  {transform:translate3d(3%,-2.5%,0) scale(1.07)}
  66%  {transform:translate3d(-2.5%,2%,0) scale(1.03)}
  100% {transform:translate3d(1.5%,3%,0) scale(1.09)}
}
@keyframes mkFluid2{
  0%   {transform:translate3d(0,0,0) scale(1.05)}
  50%  {transform:translate3d(-4%,3%,0) scale(1)}
  100% {transform:translate3d(3%,-3%,0) scale(1.08)}
}

/* Kanvas partikel berada di antara latar dan isi. */
#mkParticles{position:fixed;inset:0;z-index:-1;pointer-events:none;
  width:100%;height:100%}

/* Gerak dimatikan bagi yang memintanya. Latar tetap indah, hanya diam. */
@media (prefers-reduced-motion:reduce){
  body.market::before,body.market::after{animation:none}
  #mkParticles{display:none}
}
a{color:inherit;text-decoration:none;}
/* topbar */
.mk-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;padding:10px clamp(14px,4vw,34px);
  background:rgba(255,255,255,.78);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(20,40,30,.08);}
.mk-brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.mk-logo{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#1A3A2E;color:#8fd9bd;box-shadow:0 6px 16px rgba(26,58,46,.25);}
.mk-logo svg{width:22px;height:22px;}
.mk-brand-t{display:flex;flex-direction:column;line-height:1.05;}
.mk-brand-t b{font-family:Fraunces,serif;font-size:17px;color:#14231c;}
.mk-brand-t i{font-style:normal;font-size:9.5px;color:rgba(20,35,28,.5);letter-spacing:.06em;}
.mk-search{flex:1;display:flex;align-items:center;gap:9px;max-width:520px;background:rgba(20,40,30,.06);border-radius:99px;padding:9px 16px;}
.mk-search svg{width:16px;height:16px;color:rgba(20,35,28,.45);flex-shrink:0;}
.mk-search input{flex:1;min-width:0;background:transparent;border:0;outline:0;font:500 13.5px Inter;color:#182320;}
.mk-nav{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0;}
.mk-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#fff;border:1px solid rgba(20,40,30,.13);color:#22352c;border-radius:11px;padding:8px 14px;font:600 12.5px Inter;cursor:pointer;box-shadow:0 1px 2px rgba(20,40,30,.05);transition:all .15s;white-space:nowrap;}
.mk-btn:hover{background:#f0f5f2;transform:translateY(-1px);}
.mk-btn.pri{background:#5BAD8F;border-color:#5BAD8F;color:#0f231c;}
.mk-btn.on{border-color:#5BAD8F;background:rgba(91,173,143,.12);}
.mk-btn.wide{width:100%;}
.mk-btn.danger{color:#a33d3d;}
.mk-btn.danger:hover{background:rgba(201,79,79,.1);border-color:rgba(201,79,79,.4);}
.mk-user{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#1A3A2E;color:#fff;font:700 14px Fraunces,serif;}
/* layout */
/* Lebar mengikuti layar. Kunci 1180px membuat monitor lebar menyisakan
   ruang kosong di kedua sisi sementara kartunya tetap sempit — ruang yang
   sebenarnya bisa dipakai menampilkan lebih banyak barang. */
.mk-wrap{max-width:min(1800px,96vw);margin:0 auto;padding:22px clamp(14px,3vw,40px) 60px;}
/* Halaman detail tetap sempit: teks panjang lebih mudah dibaca pada baris
   pendek, dan itu alasan yang berbeda dari daftar. */
.mk-wrap.mk-detail{max-width:1180px;}
.mk-h1{font-family:Fraunces,serif;font-size:1.9rem;margin:0;}
.mk-h2{font-family:Fraunces,serif;font-size:1.3rem;margin:30px 0 14px;}
.mk-panel{background:rgba(255,255,255,.82);backdrop-filter:blur(12px);border:1px solid rgba(20,40,30,.08);border-radius:18px;box-shadow:0 8px 28px rgba(24,42,34,.07);}
/* kategori */
.mk-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.mk-cat{background:#fff;border:1px solid rgba(20,40,30,.11);border-radius:99px;padding:8px 16px;font:600 12.5px Inter;color:#33463d;transition:all .15s;}
.mk-cat:hover{border-color:rgba(91,173,143,.6);transform:translateY(-1px);}
.mk-cat.on{background:#1A3A2E;border-color:#1A3A2E;color:#fff;}
.mk-cat i{font-style:normal;opacity:.55;font-size:11px;margin-left:3px;}
/* grid kartu */
/* Kartu lebih besar: foto barang adalah alasan utama orang berhenti
   memindai. auto-fill menjaga lebar kolom tetap konsisten meski barisnya
   belum penuh. */
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px;}
@media (min-width:1500px){ .mk-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;} }
@media (max-width:640px){ .mk-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;} }
.mk-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(20,40,30,.08);border-radius:18px;overflow:hidden;box-shadow:0 6px 20px rgba(24,42,34,.06);transition:transform .18s,box-shadow .18s;}
.mk-card-b{flex:1;}
.mk-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(24,42,34,.13);}
.mk-card.dim{opacity:.65;}
.mk-thumb{position:relative;display:block;aspect-ratio:4/3;background:#eef2f0;overflow:hidden;}
.mk-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s;}
.mk-card:hover .mk-thumb img{transform:scale(1.04);}
.mk-thumb.sm{width:86px;height:66px;aspect-ratio:auto;border-radius:12px;flex-shrink:0;}
.mk-noimg{display:grid;place-items:center;width:100%;height:100%;color:#a9bdb3;}
.mk-noimg svg{width:34px;height:34px;}
.mk-noimg.big svg{width:64px;height:64px;}
.mk-mode{position:absolute;left:10px;top:10px;background:rgba(15,28,23,.72);color:#fff;font:700 9.5px Inter;letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:4px 10px;backdrop-filter:blur(4px);}
.mk-mode.rent{background:rgba(43,93,158,.78);}
.mk-mode.both{background:rgba(122,111,224,.8);}
.mk-sold{position:absolute;right:10px;top:10px;background:rgba(201,79,79,.85);color:#fff;font:700 9.5px Inter;letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:4px 10px;}
.mk-card-b{display:flex;flex-direction:column;gap:7px;padding:13px 15px 15px;}
/* title penuh: bungkus kata (tak potong tengah kata), maksimal 3 baris */
.mk-card-title{font-size:13.5px;font-weight:700;line-height:1.32;color:#182320;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;word-break:normal;}
.mk-price{color:#2e7a5c;font-weight:800;font-size:15px;letter-spacing:-.01em;margin-top:auto;}
.mk-card-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;color:rgba(20,35,28,.55);}
.mk-card-cat{background:rgba(91,173,143,.12);color:#2e7a5c;border-radius:6px;padding:2px 7px;font-weight:600;font-size:10.5px;}
.mk-card-loc{display:inline-flex;align-items:center;gap:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mk-card-loc svg{width:11px;height:11px;flex-shrink:0;opacity:.7;}
/* jumlah foto + tag jenis */
.mk-phcount{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:3px;background:rgba(15,28,23,.7);color:#fff;font:700 10px Inter;border-radius:99px;padding:3px 8px;backdrop-filter:blur(4px);}
.mk-phcount svg{width:11px;height:11px;}
.mk-thumb-tags{position:absolute;left:10px;top:10px;display:flex;gap:5px;flex-wrap:wrap;max-width:calc(100% - 20px);}
.mk-thumb-tags .mk-mode{position:static;left:auto;top:auto;}
.mk-kindtag{font:700 9.5px Inter;letter-spacing:.05em;text-transform:uppercase;border-radius:99px;padding:4px 10px;color:#fff;backdrop-filter:blur(4px);}
.mk-kindtag.don{background:rgba(214,90,90,.82);}
.mk-kindtag.evt{background:rgba(122,111,224,.85);}
.mk-kindtag.svc{background:rgba(43,93,158,.82);}
.mk-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:70px 20px;color:rgba(20,35,28,.55);text-align:center;}
.mk-empty b{font-family:Fraunces,serif;font-size:1.25rem;color:#22352c;}
.mk-empty.sm{padding:26px;}
/* detail */
.mk-crumb{display:flex;align-items:center;gap:7px;font:500 12px Inter;color:rgba(20,35,28,.55);margin-bottom:16px;flex-wrap:wrap;}
.mk-crumb a:hover{color:#2e7a5c;}
.mk-crumb span{color:#182320;font-weight:600;max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mk-det-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start;}
@media(max-width:900px){.mk-det-grid{grid-template-columns:1fr;}}
.mk-hero{aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:#eef2f0;box-shadow:0 14px 40px rgba(24,42,34,.12);}
.mk-hero img{width:100%;height:100%;object-fit:cover;display:block;}
.mk-hero iframe{width:100%;height:100%;border:0;display:block;}
.mk-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;}
.mk-th{flex:0 0 auto;width:76px;height:58px;border-radius:11px;overflow:hidden;border:2px solid transparent;padding:0;background:#eef2f0;cursor:pointer;transition:border-color .15s;}
.mk-th img{width:100%;height:100%;object-fit:cover;display:block;}
.mk-th.on{border-color:#5BAD8F;}
.mk-th.vid{display:grid;place-items:center;color:#1A3A2E;}
.mk-th.vid svg{width:26px;height:26px;}
.mk-sec{margin-top:26px;}
.mk-sec h3{font-family:Fraunces,serif;font-size:1.1rem;margin:0 0 10px;}
.mk-desc{margin:0;line-height:1.65;font-size:14px;color:#2a3a33;white-space:pre-line;}
.mk-attrs{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px;}
.mk-attr{background:#fff;border:1px solid rgba(20,40,30,.08);border-radius:13px;padding:10px 13px;display:flex;flex-direction:column;gap:2px;}
.mk-attr span{font:700 9.5px Inter;letter-spacing:.09em;text-transform:uppercase;color:rgba(20,35,28,.48);}
.mk-attr b{font-size:13.5px;}
.mk-map{aspect-ratio:16/8;border-radius:16px;overflow:hidden;background:#e6ece9;position:relative;box-shadow:inset 0 0 0 1px rgba(20,40,30,.08);}
.mk-map canvas{width:100%;height:100%;display:block;}
.mk-loc-line{margin-top:8px;font-size:12.5px;color:rgba(20,35,28,.65);}
.mk-loc-line a{color:#2e7a5c;font-weight:600;}
/* panel samping */
.mk-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:76px;}
.mk-panel{padding:18px;}
.mk-status-badge{display:inline-block;background:rgba(201,79,79,.12);color:#a33d3d;font:700 10.5px Inter;letter-spacing:.08em;text-transform:uppercase;border-radius:99px;padding:5px 12px;margin-bottom:10px;}
.mk-title{font-family:Fraunces,serif;font-size:1.5rem;line-height:1.2;margin:0 0 8px;}
.mk-price-big{font-size:1.35rem;font-weight:800;color:#2e7a5c;margin-bottom:12px;}
.mk-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.mk-tag{background:rgba(91,173,143,.12);color:#2e6b52;border-radius:99px;padding:5px 11px;font:600 11px Inter;}
.mk-tag.ghost{background:rgba(20,40,30,.06);color:rgba(20,35,28,.6);}
.mk-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:#1A3A2E;color:#fff;border-radius:13px;padding:13px;font:700 14px Inter;margin-bottom:9px;transition:all .16s;box-shadow:0 8px 22px rgba(26,58,46,.28);}
.mk-cta:hover{transform:translateY(-1px);filter:brightness(1.08);}
.mk-cta svg{width:17px;height:17px;}
.mk-seller-row{display:flex;align-items:center;gap:11px;}
.mk-av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#1A3A2E;color:#fff;font:700 16px Fraunces,serif;overflow:hidden;flex-shrink:0;}
.mk-av img{width:100%;height:100%;object-fit:cover;}
.mk-av.lg{width:72px;height:72px;font-size:26px;}
.mk-av.sm{width:30px;height:30px;font-size:12px;}
.mk-seller-i{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.mk-seller-i b{font-size:13.5px;}
.mk-visit{font:700 11.5px Inter;color:#2e7a5c;flex-shrink:0;}
.mk-stars{display:inline-flex;align-items:center;gap:1.5px;}
.mk-stars i{font-style:normal;font:600 11.5px Inter;color:rgba(20,35,28,.55);margin-left:6px;}
.mk-star svg{width:15px;height:15px;display:block;fill:#dde5e1;}
.mk-star.full svg{fill:#e8b45c;}
.mk-star.half svg{fill:url(#half) #e8b45c;opacity:.75;}
.mk-stars.sm .mk-star svg{width:12px;height:12px;}
.mk-contacts{margin-top:14px;border-top:1px dashed rgba(20,40,30,.14);padding-top:12px;display:flex;flex-direction:column;gap:7px;}
.mk-contacts-h{font:700 9.5px Inter;letter-spacing:.1em;text-transform:uppercase;color:rgba(20,35,28,.48);}
.mk-contact{display:flex;justify-content:space-between;font-size:12.5px;}
.mk-contact b{font-weight:600;}
.mk-contact span{font-variant-numeric:tabular-nums;color:rgba(20,35,28,.7);}
.mk-own-h{font:700 10px Inter;letter-spacing:.1em;text-transform:uppercase;color:rgba(20,35,28,.5);margin-bottom:10px;}
.mk-own-row{display:flex;gap:7px;flex-wrap:wrap;}
.mk-report{display:block;text-align:center;background:transparent;border:0;color:rgba(163,61,61,.85);font:600 12px Inter;cursor:pointer;padding:4px;}
.mk-report:hover{text-decoration:underline;}
/* store */
.mk-store-head{display:flex;align-items:center;gap:18px;}
.mk-store-i h1{font-family:Fraunces,serif;margin:0 0 4px;font-size:1.6rem;}
.mk-store-sub{font-size:12px;color:rgba(20,35,28,.55);}
.mk-revform{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.mk-rev-h{font:700 12px Inter;letter-spacing:.02em;}
.mk-rate-in{display:flex;gap:4px;}
.mk-rate-in button{border:0;background:transparent;padding:2px;cursor:pointer;}
.mk-rate-in svg{width:26px;height:26px;fill:#dde5e1;transition:fill .12s,transform .12s;}
.mk-rate-in button:hover svg{transform:scale(1.12);}
.mk-rate-in button.on svg{fill:#e8b45c;}
.mk-revform textarea{border:1px solid rgba(20,40,30,.14);border-radius:12px;padding:10px 12px;font:500 13px Inter;min-height:70px;resize:vertical;outline:0;background:#fff;}
.mk-revform textarea:focus{border-color:#5BAD8F;box-shadow:0 0 0 3px rgba(91,173,143,.14);}
.mk-reviews{display:flex;flex-direction:column;gap:10px;}
.mk-review p{margin:9px 0 0;font-size:13.5px;line-height:1.55;color:#2a3a33;}
.mk-rev-top{display:flex;align-items:center;gap:9px;}
.mk-rev-top b{font-size:13px;}
.mk-rev-top time{margin-left:auto;font-size:11px;color:rgba(20,35,28,.5);}
/* my listings */
.mk-my-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.mk-mylist{display:flex;flex-direction:column;gap:11px;}
.mk-myrow{display:flex;align-items:center;gap:14px;padding:13px 16px;}
.mk-my-i{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.mk-my-i b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mk-st{font:700 9.5px Inter;letter-spacing:.08em;text-transform:uppercase;border-radius:99px;padding:5px 11px;flex-shrink:0;}
.st-active{background:rgba(91,173,143,.16);color:#2e6b52;}
.st-sold,.st-rented{background:rgba(43,93,158,.13);color:#2b5d9e;}
.st-archived{background:rgba(20,40,30,.08);color:rgba(20,35,28,.6);}
.st-suspended{background:rgba(201,79,79,.13);color:#a33d3d;}
/* modals (editor & report) */
/* ═══════════════════════════════════════════════════════════
   Panel geser, bukan kotak melayang.

   Formulir iklan itu panjang — belasan bagian. Kotak yang melayang di
   tengah harus memusatkan diri, membatasi tingginya, lalu menggulir di
   dalam dirinya sendiri; setiap batasan itu bisa saling bertabrakan dan
   isinya meluber. Panel yang menempel di tepi kanan tidak punya masalah
   itu: tingginya selalu setinggi layar, lebarnya ditentukan sendiri, dan
   menggulir seperti halaman biasa.
   ═══════════════════════════════════════════════════════════ */
.mk-modal{position:fixed;inset:0;z-index:200;background:rgba(24,38,32,.34);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:stretch;justify-content:flex-end;padding:0;
  animation:mkFade .22s ease-out;}
@keyframes mkFade{from{opacity:0}to{opacity:1}}
.mk-modal[hidden]{display:none;}
/* Kartu ini menjadi acuan pengukuran bagi isinya. Tanpa ini, aturan
   responsif membaca lebar LAYAR — dan pada layar lebar dengan kartu sempit,
   baris tetap dipaksa tiga kolom lalu meluber keluar. */
.mk-mcard{container-type:inline-size;container-name:mkform;
  /* Lebar ditentukan panel sendiri, tidak boleh ditarik-tarik oleh isinya. */
  flex:0 0 auto;
  width:min(600px,100vw);height:100vh;height:100dvh;max-height:none;
  overflow-y:auto;overscroll-behavior:contain;background:#fff;
  border-radius:0;padding:26px 28px 40px;
  box-shadow:-20px 0 60px rgba(24,42,34,.22);
  animation:mkSlide .28s cubic-bezier(.22,.9,.28,1);scrollbar-width:thin;}
.mk-mcard h2{font-family:Fraunces,serif;margin:0 0 16px;font-size:1.35rem;display:flex;align-items:center;justify-content:space-between;}
.mk-x{border:0;background:rgba(20,40,30,.07);width:30px;height:30px;border-radius:99px;cursor:pointer;font-size:15px;color:#33463d;}
/* atribut hidden HARUS mengalahkan display kelas apa pun (fix: field donasi bocor ke non-donasi) */
[hidden]{display:none!important;}
.mk-f{display:flex;flex-direction:column;gap:5px;margin-bottom:13px;}
.mk-f>label{font:700 10px Inter;letter-spacing:.1em;text-transform:uppercase;color:rgba(20,35,28,.5);}
.mk-f input,.mk-f select,.mk-f textarea{border:1px solid rgba(20,40,30,.15);border-radius:11px;padding:9px 12px;font:500 13px Inter;outline:0;background:#fff;color:#182320;}
.mk-f input:focus,.mk-f select:focus,.mk-f textarea:focus{border-color:#5BAD8F;box-shadow:0 0 0 3px rgba(91,173,143,.14);}
.mk-f textarea{min-height:80px;resize:vertical;}
.mk-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
/* minmax(0,1fr) memungkinkan kolom menyusut lebih kecil daripada isinya.
   Dengan '1fr' saja, kolom menolak menyempit di bawah lebar alaminya dan
   baris pun meluber keluar layar — itulah yang membuat pemilih satuan
   sewa terpotong. */
.mk-row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
/* Mata uang tidak butuh ruang sebanyak kolom harga. */
.mk-row3:has(#edCur){grid-template-columns:minmax(0,.62fr) minmax(0,1fr) minmax(0,1.15fr);}
.mk-seg{display:flex;background:rgba(20,40,30,.06);border-radius:11px;padding:3px;gap:2px;}
.mk-seg button{flex:1;border:0;background:transparent;border-radius:8px;padding:8px;font:600 12px Inter;color:rgba(20,35,28,.6);cursor:pointer;}
.mk-seg button.on{background:#fff;color:#14231c;box-shadow:0 1px 4px rgba(20,40,30,.14);}
/* foto editor */
.mk-ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;}
.mk-ph{position:relative;aspect-ratio:1;border-radius:11px;overflow:hidden;background:#eef2f0;}
.mk-ph img{width:100%;height:100%;object-fit:cover;display:block;}
.mk-ph .x{position:absolute;right:4px;top:4px;width:20px;height:20px;border-radius:99px;border:0;background:rgba(15,28,23,.65);color:#fff;font-size:11px;cursor:pointer;}
.mk-ph-add{display:grid;place-items:center;aspect-ratio:1;border:1.6px dashed rgba(20,40,30,.25);border-radius:11px;color:rgba(20,35,28,.5);cursor:pointer;font-size:22px;background:transparent;}
.mk-ph-add:hover{border-color:#5BAD8F;color:#2e7a5c;}
.mk-hint{font:500 10.5px Inter;color:rgba(20,35,28,.5);}
/* attrs field editor (drag) */
.mk-fields{display:flex;flex-direction:column;gap:6px;}
.mk-field{display:flex;gap:6px;align-items:center;background:#f7faf8;border:1px solid rgba(20,40,30,.08);border-radius:11px;padding:6px 8px;}
.mk-field.dragging{opacity:.4;}
.mk-field .grip{cursor:grab;color:rgba(20,35,28,.35);flex-shrink:0;padding:2px;}
.mk-field input{flex:1;min-width:0;border:0;background:transparent;font:500 12.5px Inter;outline:0;padding:4px;}
.mk-field input.u{flex:0 0 62px;}
.mk-field .x{border:0;background:transparent;color:rgba(20,35,28,.4);cursor:pointer;font-size:13px;flex-shrink:0;}
.mk-field .x:hover{color:#a33d3d;}
.mk-addf{border:1.4px dashed rgba(20,40,30,.24);background:transparent;border-radius:10px;padding:7px;font:600 11px Inter;color:rgba(20,35,28,.55);cursor:pointer;}
.mk-addf:hover{border-color:#5BAD8F;color:#2e7a5c;}
/* map picker mini */
.mk-map.pick{cursor:crosshair;}
.mk-geo-row{display:flex;gap:7px;min-width:0;}
/* flex:1 1 0 dengan min-width:0 — tanpa keduanya, input menolak menyempit
   di bawah lebar bawaan peramban dan mendorong elemen di sebelahnya keluar. */
.mk-geo-row input{flex:1 1 0;min-width:0;}
.mk-geo-row select{flex:0 1 auto;min-width:0;}
/* toast */
.mk-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#14231c;color:#fff;border-radius:13px;padding:11px 18px;font:600 12.5px Inter;box-shadow:0 14px 40px rgba(0,0,0,.3);z-index:400;animation:mkT .25s ease;}
@keyframes mkT{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.mk-foot{text-align:center;padding:26px;font:500 11.5px Inter;color:rgba(20,35,28,.45);}
.mk-foot a{color:#2e7a5c;font-weight:600;}

/* ============ v2: subkategori, varian, lightbox, deal, komentar ============ */
.mk-subs{display:flex;gap:7px;flex-wrap:wrap;margin:-8px 0 20px;}
.mk-sub{background:rgba(255,255,255,.7);border:1px solid rgba(20,40,30,.09);border-radius:99px;padding:6px 13px;font:600 11.5px Inter;color:#3a4d43;transition:all .14s;}
.mk-sub:hover{border-color:rgba(91,173,143,.6);}
.mk-sub.on{background:#5BAD8F;border-color:#5BAD8F;color:#0f231c;}
.mk-sub i{font-style:normal;opacity:.55;font-size:10px;margin-left:2px;}
.mk-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;border:1px solid rgba(20,40,30,.13);background:#fff;color:#33463d;transition:all .15s;}
.mk-ic:hover{background:#f0f5f2;}
.mk-ic.on{border-color:#5BAD8F;background:rgba(91,173,143,.12);color:#2e6b52;}
.mk-ic svg{width:18px;height:18px;}
.mk-likepill{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:4px;background:rgba(15,28,23,.66);color:#fff;font:700 10px Inter;border-radius:99px;padding:3px 8px;backdrop-filter:blur(4px);}
.mk-likepill svg{width:11px;height:11px;color:#ff8fa0;}
.mk-sold.st-reserved{background:rgba(122,111,224,.85);}
.mk-sold.st-sold,.mk-sold.st-rented{background:rgba(43,93,158,.85);}
/* zoom hint + hero */
.mk-hero{position:relative;cursor:zoom-in;}
.mk-zoomhint{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:5px;background:rgba(15,28,23,.62);color:#fff;font:600 11px Inter;border-radius:99px;padding:6px 11px;backdrop-filter:blur(6px);opacity:0;transition:opacity .2s;pointer-events:none;}
.mk-hero:hover .mk-zoomhint{opacity:1;}
.mk-zoomhint svg{width:14px;height:14px;}
/* lightbox */
.mk-lightbox{position:fixed;inset:0;z-index:300;background:rgba(12,20,16,.92);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;}
.mk-lightbox[hidden]{display:none;}
.mk-lb-stage{max-width:94vw;max-height:86vh;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.mk-lb-img{max-width:94vw;max-height:86vh;object-fit:contain;transition:transform .12s ease-out;transform-origin:center;user-select:none;-webkit-user-drag:none;}
.mk-lb-x{position:absolute;top:18px;right:20px;width:42px;height:42px;border-radius:99px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:18px;cursor:pointer;backdrop-filter:blur(6px);}
.mk-lb-x:hover{background:rgba(255,255,255,.24);}
.mk-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:99px;border:0;background:rgba(255,255,255,.13);color:#fff;font-size:26px;cursor:pointer;backdrop-filter:blur(6px);}
.mk-lb-nav:hover{background:rgba(255,255,255,.24);}
.mk-lb-nav.prev{left:20px;} .mk-lb-nav.next{right:20px;}
.mk-lb-count{position:absolute;top:22px;left:50%;transform:translateX(-50%);color:#fff;font:600 12.5px Inter;opacity:.8;}
.mk-lb-zoom{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.13);border-radius:99px;padding:7px 14px;backdrop-filter:blur(6px);}
.mk-lb-zoom button{border:0;background:transparent;color:#fff;font-size:18px;cursor:pointer;width:22px;}
.mk-lb-zoom span{color:#fff;font:600 12px Inter;min-width:42px;text-align:center;}
/* variants */
.mk-variants{margin:-4px 0 14px;}
.mk-vlab{font:700 10px Inter;letter-spacing:.1em;text-transform:uppercase;color:rgba(20,35,28,.5);display:block;margin-bottom:7px;}
.mk-vchips{display:flex;flex-wrap:wrap;gap:7px;}
.mk-vchip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:#fff;border:1.5px solid rgba(20,40,30,.14);border-radius:12px;padding:7px 13px;font:600 12.5px Inter;color:#22352c;cursor:pointer;transition:all .14s;}
.mk-vchip:hover{border-color:rgba(91,173,143,.6);}
.mk-vchip.on{border-color:#5BAD8F;background:rgba(91,173,143,.1);}
.mk-vchip i{font-style:normal;font-size:11px;color:#2e7a5c;font-weight:700;}
.mk-vdesc{margin:8px 0 0;font-size:12.5px;color:rgba(20,35,28,.62);}
/* action row like/save/share */
.mk-actrow{display:flex;gap:8px;margin-bottom:14px;}
.mk-iconbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:#fff;border:1px solid rgba(20,40,30,.13);border-radius:12px;padding:10px;font:600 12px Inter;color:#33463d;cursor:pointer;transition:all .15s;}
.mk-iconbtn:hover{background:#f0f5f2;transform:translateY(-1px);}
.mk-iconbtn svg{width:17px;height:17px;fill:none;transition:fill .15s;}
.mk-iconbtn.on{border-color:#5BAD8F;color:#2e6b52;background:rgba(91,173,143,.1);}
.mk-iconbtn.on svg{fill:currentColor;}
#mkLike.on{border-color:#e0708a;color:#c14d6a;background:rgba(224,112,138,.1);}
#mkLike.on svg{fill:#e0708a;stroke:#e0708a;}
/* CTA ghost variant */
.mk-cta.ghost{background:#fff;color:#1A3A2E;border:1.5px solid rgba(20,40,30,.14);box-shadow:none;}
.mk-cta.ghost:hover{background:#f0f5f2;}
.mk-hintbox{background:rgba(91,173,143,.09);border:1px solid rgba(91,173,143,.24);border-radius:12px;padding:11px 13px;font:500 12px Inter;color:#2e6b52;}
.mk-hintbox.big{padding:16px;font-size:13px;}
.mk-signrow{display:block;padding:12px;text-align:center;background:rgba(20,40,30,.05);border-radius:12px;font:600 12.5px Inter;color:#2e7a5c;}
/* deal box on detail */
.mk-dealbox{display:flex;flex-direction:column;gap:5px;border-radius:14px;padding:14px;margin-bottom:9px;border:1.5px solid;}
.mk-dealbox b{font-size:13.5px;}
.mk-dealbox span{font-size:12.5px;color:rgba(20,35,28,.7);}
.mk-dealbox em{font-style:normal;font-size:12px;background:rgba(255,255,255,.6);border-radius:8px;padding:6px 9px;color:#33463d;}
.mk-dealbox.st-pending{background:rgba(227,185,92,.1);border-color:rgba(227,185,92,.4);}
.mk-dealbox.st-accepted{background:rgba(91,173,143,.12);border-color:rgba(91,173,143,.45);}
.mk-dealbox .mk-btn{align-self:flex-start;margin-top:4px;}
/* status badge colors */
.mk-status-badge.st-reserved{background:rgba(122,111,224,.13);color:#5a4fc0;}
.mk-status-badge.st-sold,.mk-status-badge.st-rented{background:rgba(43,93,158,.13);color:#2b5d9e;}
.st-reserved{background:rgba(122,111,224,.14);color:#5a4fc0;}
/* deals section (my listings) */
.mk-dealsec{margin-bottom:10px;}
.mk-cnt{font:600 11px Inter;background:rgba(91,173,143,.16);color:#2e6b52;border-radius:99px;padding:2px 9px;vertical-align:middle;margin-left:6px;}
.mk-deals{display:flex;flex-direction:column;gap:10px;margin-bottom:8px;}
.mk-deal{padding:14px 16px;border-left:3px solid transparent;}
.mk-deal.st-pending{border-left-color:#e3b95c;}
.mk-deal.st-accepted{border-left-color:#5BAD8F;}
.mk-deal.st-completed{border-left-color:#2b5d9e;}
.mk-deal.st-declined,.mk-deal.st-cancelled{border-left-color:#c9c;opacity:.72;}
.mk-deal-h{display:flex;align-items:center;gap:9px;margin-bottom:7px;}
.mk-deal-h b{font-size:13.5px;}
.mk-deal-h time{margin-left:auto;font-size:11px;color:rgba(20,35,28,.5);}
.mk-deal-b a{font-weight:600;font-size:13px;color:#2e7a5c;}
.mk-deal-terms{display:block;font-size:12.5px;color:rgba(20,35,28,.7);margin-top:2px;}
.mk-deal-terms b{color:#2e7a5c;}
.mk-deal-note{margin:7px 0 0;font-size:12.5px;background:rgba(20,40,30,.04);border-radius:9px;padding:8px 10px;color:#33463d;}
.mk-deal .mk-own-row{margin-top:10px;}
.mk-mini{font:700 8.5px Inter;letter-spacing:.06em;text-transform:uppercase;background:rgba(91,173,143,.18);color:#2e6b52;border-radius:99px;padding:2px 7px;}
/* questions / comments */
.mk-cbox{display:flex;gap:8px;margin-bottom:14px;}
.mk-cbox textarea{flex:1;border:1px solid rgba(20,40,30,.14);border-radius:12px;padding:10px 12px;font:500 13px Inter;min-height:44px;resize:vertical;outline:0;}
.mk-cbox textarea:focus{border-color:#5BAD8F;box-shadow:0 0 0 3px rgba(91,173,143,.14);}
.mk-cbox .mk-btn{align-self:flex-end;}
.mk-comments{display:flex;flex-direction:column;gap:12px;}
.mk-cm{display:flex;gap:10px;}
.mk-cm.reply{margin-left:40px;}
.mk-cm-b{flex:1;min-width:0;}
.mk-cm-h{display:flex;align-items:center;gap:8px;}
.mk-cm-h b{font-size:12.5px;}
.mk-cm-h time{font-size:10.5px;color:rgba(20,35,28,.5);}
.mk-cm-x{margin-left:auto;border:0;background:transparent;color:rgba(20,35,28,.35);cursor:pointer;font-size:11px;}
.mk-cm-x:hover{color:#a33d3d;}
.mk-cm-b p{margin:3px 0 0;font-size:13px;line-height:1.5;color:#2a3a33;}
.mk-cm-reply{margin-top:4px;border:0;background:transparent;color:#2e7a5c;font:600 11px Inter;cursor:pointer;padding:0;}
.mk-cm-reply:hover{text-decoration:underline;}
/* photo cover badge in editor */
.mk-ph-cover{position:absolute;left:4px;bottom:4px;background:rgba(15,28,23,.72);color:#fff;font:700 8px Inter;letter-spacing:.05em;text-transform:uppercase;border-radius:6px;padding:2px 6px;}

/* ============ v3: order progress, timeline, alamat, cabang, jarak ============ */
/* kartu order (list di My listings) */
.mk-orders{display:flex;flex-direction:column;gap:10px;margin-bottom:8px;}
.mk-order{display:flex;align-items:center;gap:13px;padding:12px 14px;text-decoration:none;color:inherit;border-left:3px solid transparent;transition:transform .14s,box-shadow .14s;}
.mk-order:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(24,42,34,.1);}
.mk-order.st-requested{border-left-color:#e3b95c;}
.mk-order.st-accepted,.mk-order.st-processing,.mk-order.st-scheduled{border-left-color:#5BAD8F;}
.mk-order.st-shipped{border-left-color:#4a8fd4;}
.mk-order.st-delivered{border-left-color:#7a6fe0;}
.mk-order.st-completed{border-left-color:#2b5d9e;}
.mk-order.st-declined,.mk-order.st-cancelled,.mk-order.st-disputed{border-left-color:#c98;opacity:.72;}
.mk-order-cov{flex:0 0 54px;height:54px;border-radius:11px;overflow:hidden;background:#eef2f0;display:grid;place-items:center;}
.mk-order-cov img{width:100%;height:100%;object-fit:cover;}
.mk-order-cov.lg{flex:0 0 76px;height:76px;border-radius:14px;}
.mk-noimg.sm{width:22px;height:22px;opacity:.3;}
.mk-order-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.mk-order-b b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mk-order-meta{font-size:12px;color:rgba(20,35,28,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mk-order-stage{display:inline-flex;align-items:center;gap:5px;font:600 11.5px Inter;margin-top:1px;}
.mk-order-stage svg{width:13px;height:13px;}
.mk-order-stage.s-requested{color:#c68a1e;} .mk-order-stage.s-accepted,.mk-order-stage.s-processing,.mk-order-stage.s-scheduled{color:#2e7a5c;}
.mk-order-stage.s-shipped{color:#3676c0;} .mk-order-stage.s-delivered{color:#5a4fc0;} .mk-order-stage.s-completed{color:#2b5d9e;}
.mk-order-stage.s-declined,.mk-order-stage.s-cancelled,.mk-order-stage.s-disputed{color:#a5745a;}
.mk-order-cta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;}
.mk-order-badge{font:700 9px Inter;letter-spacing:.05em;text-transform:uppercase;background:#e3b95c;color:#5a3d00;border-radius:99px;padding:3px 9px;}
.mk-order-badge.ok{background:rgba(43,93,158,.15);color:#2b5d9e;}
.mk-order-open{font:600 11px Inter;color:rgba(20,35,28,.4);}
/* halaman detail order */
.mk-dealpage{max-width:760px;}
.mk-deal-top{display:flex;align-items:center;gap:15px;margin-bottom:14px;}
.mk-deal-topi{flex:1;min-width:0;}
.mk-deal-title{font:700 16px Fraunces,serif;color:#182320;text-decoration:none;display:block;}
.mk-deal-title:hover{color:#2e7a5c;}
.mk-deal-sub{font-size:13px;color:rgba(20,35,28,.7);margin-top:3px;}
.mk-deal-sub b{color:#2e7a5c;font-size:14.5px;}
.mk-deal-role{font-size:12px;color:rgba(20,35,28,.55);margin-top:4px;}
.mk-chatbtn{flex-shrink:0;}
.mk-progwrap{margin-bottom:14px;}
.mk-sec-h{font:700 12px Inter;letter-spacing:.02em;text-transform:uppercase;color:rgba(20,35,28,.5);margin:0 0 14px;}
/* progress stepper */
.mk-prog{position:relative;}
.mk-prog-track{position:absolute;top:15px;left:5%;right:5%;height:3px;background:rgba(20,40,30,.1);border-radius:2px;overflow:hidden;}
.mk-prog-fill{height:100%;background:linear-gradient(90deg,#5BAD8F,#3676c0);border-radius:2px;transition:width .5s cubic-bezier(.4,0,.2,1);}
.mk-prog.closed .mk-prog-fill{background:#c98;}
.mk-prog-steps{display:flex;justify-content:space-between;position:relative;}
.mk-pstep{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;text-align:center;}
.mk-pdot{width:32px;height:32px;border-radius:99px;display:grid;place-items:center;background:#fff;border:2px solid rgba(20,40,30,.14);color:rgba(20,40,30,.3);transition:all .3s;z-index:1;}
.mk-pdot svg{width:15px;height:15px;}
.mk-pstep em{font:600 10px Inter;font-style:normal;color:rgba(20,35,28,.4);line-height:1.2;}
.mk-pstep.done .mk-pdot{background:#5BAD8F;border-color:#5BAD8F;color:#fff;}
.mk-pstep.done em{color:#2e7a5c;}
.mk-pstep.now .mk-pdot{background:#fff;border-color:#3676c0;color:#3676c0;box-shadow:0 0 0 4px rgba(54,118,192,.14);animation:mkPulse 2s infinite;}
.mk-pstep.now em{color:#3676c0;font-weight:700;}
@keyframes mkPulse{0%,100%{box-shadow:0 0 0 4px rgba(54,118,192,.14);}50%{box-shadow:0 0 0 7px rgba(54,118,192,.06);}}
.mk-prog-closed{margin-top:14px;text-align:center;font:700 12px Inter;color:#a5745a;}
.mk-track{display:flex;align-items:center;gap:8px;margin-top:16px;padding:10px 13px;background:rgba(54,118,192,.07);border:1px solid rgba(54,118,192,.18);border-radius:11px;font-size:12.5px;color:#2f5d8f;}
.mk-track svg{width:17px;height:17px;flex-shrink:0;}
.mk-deal-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid rgba(20,40,30,.08);}
.mk-deal-final{margin-top:16px;padding:14px;border-radius:12px;font:600 13px Inter;text-align:center;}
.mk-deal-final.st-completed{background:rgba(43,93,158,.1);color:#2b5d9e;display:flex;flex-direction:column;gap:10px;align-items:center;}
.mk-deal-final.st-disputed{background:rgba(200,120,80,.1);color:#a5522a;}
.mk-deal-final.st-declined,.mk-deal-final.st-cancelled{background:rgba(20,40,30,.05);color:rgba(20,35,28,.6);}
.mk-deal-field{margin-bottom:12px;}
.mk-deal-field:last-child{margin-bottom:0;}
.mk-deal-field span{font:700 10px Inter;letter-spacing:.06em;text-transform:uppercase;color:rgba(20,35,28,.45);display:block;margin-bottom:3px;}
.mk-deal-field p{margin:0;font-size:13px;color:#2a3a33;}
/* timeline */
.mk-timeline{display:flex;flex-direction:column;gap:2px;}
.mk-tl-item{display:flex;gap:12px;position:relative;padding-bottom:16px;}
.mk-tl-item:not(:last-child)::before{content:"";position:absolute;left:15px;top:32px;bottom:0;width:2px;background:rgba(20,40,30,.1);}
.mk-tl-dot{flex:0 0 32px;height:32px;border-radius:99px;display:grid;place-items:center;background:rgba(91,173,143,.14);color:#2e7a5c;z-index:1;}
.mk-tl-dot svg{width:15px;height:15px;}
.mk-tl-dot.s-shipped{background:rgba(54,118,192,.14);color:#3676c0;} .mk-tl-dot.s-delivered{background:rgba(122,111,224,.14);color:#5a4fc0;}
.mk-tl-dot.s-completed{background:rgba(43,93,158,.14);color:#2b5d9e;} .mk-tl-dot.s-declined,.mk-tl-dot.s-cancelled,.mk-tl-dot.s-disputed{background:rgba(200,120,80,.13);color:#a5522a;}
.mk-tl-b{flex:1;padding-top:5px;}
.mk-tl-b b{font-size:13px;display:block;}
.mk-tl-b span{font-size:11px;color:rgba(20,35,28,.5);}
.mk-tl-b p{margin:4px 0 0;font-size:12.5px;color:#33463d;background:rgba(20,40,30,.04);border-radius:8px;padding:7px 10px;}
/* dealbox link + track order */
.mk-dealbox.link{text-decoration:none;color:inherit;transition:transform .14s;}
.mk-dealbox.link:hover{transform:translateY(-1px);}
.mk-dealbox b svg{width:15px;height:15px;vertical-align:-2px;margin-right:3px;}
.mk-track-order{font-style:normal;font-size:11.5px;color:#2e7a5c;font-weight:600;margin-top:4px;}
/* estimasi jarak */
.mk-dist{display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;padding:6px 11px;background:rgba(91,173,143,.09);border-radius:99px;font:600 11.5px Inter;color:#2e6b52;}
.mk-dist svg{width:14px;height:14px;}
/* halaman alamat & cabang */
.mk-addrpage{max-width:680px;}
.mk-sub-note{font-size:13px;color:rgba(20,35,28,.6);margin:-8px 0 18px;}
.mk-cardlist{display:flex;flex-direction:column;gap:10px;}
.mk-addr{display:flex;align-items:center;gap:14px;padding:14px 16px;}
.mk-addr-i{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.mk-addr-i b{font-size:14px;}
.mk-addr-rec{font-size:12.5px;color:rgba(20,35,28,.65);}
.mk-addr-line{font-size:12.5px;color:rgba(20,35,28,.6);}
.mk-addr-geo{font-size:11px;color:rgba(20,35,28,.45);}
.mk-check{display:flex;align-items:center;gap:8px;font:600 12.5px Inter;color:#33463d;margin:4px 0 10px;cursor:pointer;}
.mk-check input{width:16px;height:16px;accent-color:#5BAD8F;}

/* ============ v4: order hero redesign ============ */
.mk-deal-hero{display:flex;align-items:center;gap:15px;padding:16px 18px;margin-bottom:12px;position:relative;overflow:hidden;}
.mk-deal-hero::before{content:"";position:absolute;inset:0;opacity:.08;background:currentColor;}
.mk-deal-hero-ic{flex:0 0 46px;height:46px;border-radius:13px;display:grid;place-items:center;background:currentColor;position:relative;z-index:1;}
.mk-deal-hero-ic svg{width:24px;height:24px;stroke:#fff;}
.mk-deal-hero-b{flex:1;position:relative;z-index:1;}
.mk-deal-hero-b b{display:block;font:700 17px Fraunces,serif;color:#182320;}
.mk-deal-hero-b span{display:block;font-size:12.5px;color:rgba(20,35,28,.62);margin-top:2px;}
.mk-deal-hero-id{font:700 13px Inter;color:rgba(20,35,28,.35);position:relative;z-index:1;}
.mk-deal-hero.st-requested{color:#c68a1e;} .mk-deal-hero.st-accepted,.mk-deal-hero.st-processing,.mk-deal-hero.st-scheduled{color:#2e7a5c;}
.mk-deal-hero.st-shipped{color:#3676c0;} .mk-deal-hero.st-delivered{color:#5a4fc0;} .mk-deal-hero.st-completed{color:#2b5d9e;}
.mk-deal-hero.st-declined,.mk-deal-hero.st-cancelled,.mk-deal-hero.st-disputed{color:#b5623a;}
.mk-deal-ava{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:99px;overflow:hidden;background:#dce8e2;vertical-align:-6px;margin-right:5px;}
.mk-deal-ava img{width:100%;height:100%;object-fit:cover;}
.mk-ava-ph{font:700 10px Inter;color:#2e7a5c;}
.mk-mini{font:600 10px Inter;color:rgba(20,35,28,.45);background:rgba(20,40,30,.06);border-radius:99px;padding:2px 8px;vertical-align:1px;}

/* ============ v4: countdown deadline + kontak call/WA + toggle editor ============ */
/* countdown grafis */
.mk-countdown{margin:14px 0;padding:14px 16px;border-radius:15px;background:linear-gradient(135deg,rgba(91,173,143,.1),rgba(54,118,192,.08));border:1px solid rgba(91,173,143,.22);transition:background .4s,border-color .4s;}
.mk-cd-head{display:flex;align-items:center;gap:7px;font:600 12px Inter;color:#2e6b52;margin-bottom:11px;flex-wrap:wrap;}
.mk-cd-head svg{width:16px;height:16px;}
.mk-cd-when{color:rgba(20,35,28,.5);font-weight:500;margin-left:auto;font-size:11px;}
.mk-cd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.mk-cd-cell{text-align:center;background:rgba(255,255,255,.65);border-radius:11px;padding:9px 4px;}
.mk-cd-cell b{display:block;font:700 24px Fraunces,serif;color:#1a3a2e;line-height:1;font-variant-numeric:tabular-nums;}
.mk-cd-cell em{display:block;font:600 9px Inter;font-style:normal;text-transform:uppercase;letter-spacing:.05em;color:rgba(20,35,28,.5);margin-top:4px;}
.mk-cd-bar{margin-top:11px;height:4px;border-radius:2px;background:rgba(20,40,30,.1);overflow:hidden;}
.mk-cd-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#5BAD8F,#3676c0);border-radius:2px;transition:width 1s linear;}
.mk-countdown.soon{background:linear-gradient(135deg,rgba(227,185,92,.16),rgba(230,150,60,.1));border-color:rgba(227,160,60,.35);}
.mk-countdown.soon .mk-cd-head{color:#a5701a;}
.mk-countdown.soon .mk-cd-bar span{background:linear-gradient(90deg,#e3b95c,#e0913c);}
.mk-countdown.urgent{background:linear-gradient(135deg,rgba(220,90,70,.16),rgba(200,60,60,.12));border-color:rgba(210,70,60,.4);animation:cdPulse 2.4s infinite;}
.mk-countdown.urgent .mk-cd-head{color:#c23a2a;}
.mk-countdown.urgent .mk-cd-cell b{color:#c23a2a;}
.mk-countdown.urgent .mk-cd-bar span{background:linear-gradient(90deg,#e05a46,#c23a2a);}
@keyframes cdPulse{0%,100%{border-color:rgba(210,70,60,.4);}50%{border-color:rgba(210,70,60,.75);}}
.mk-countdown.ended{background:rgba(20,40,30,.05);border-color:rgba(20,40,30,.12);}
.mk-countdown.ended .mk-cd-head{color:rgba(20,35,28,.5);}
.mk-countdown.ended .mk-cd-cell b{color:rgba(20,35,28,.4);}
/* kontak: tombol call/WA */
.mk-contact{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid rgba(20,40,30,.07);}
.mk-contact:first-of-type{border-top:none;}
.mk-contact-i{display:flex;flex-direction:column;min-width:0;}
.mk-contact-i b{font-size:12.5px;}
.mk-contact-i span{font-size:11.5px;color:rgba(20,35,28,.55);}
.mk-contact-btns{display:flex;gap:7px;flex-shrink:0;}
.mk-cbtn{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;text-decoration:none;transition:transform .12s,filter .12s;}
.mk-cbtn:hover{transform:translateY(-1px);filter:brightness(1.05);}
.mk-cbtn svg{width:17px;height:17px;}
.mk-cbtn.call{background:rgba(54,118,192,.13);color:#2f5d8f;}
.mk-cbtn.wa{background:rgba(37,211,102,.15);color:#1a9e4b;}
/* toggle kontak di editor */
.mk-contact-ed{padding:10px;border:1px solid rgba(20,40,30,.1);border-radius:11px;margin-bottom:8px;background:rgba(20,40,30,.02);}
.mk-contact-tg{display:flex;align-items:center;gap:14px;margin-top:8px;}
.mk-tgl{display:inline-flex;align-items:center;gap:5px;font:600 11.5px Inter;color:#33463d;cursor:pointer;}
.mk-tgl input{width:15px;height:15px;accent-color:#5BAD8F;}
.mk-tgl svg{width:14px;height:14px;opacity:.7;}
.mk-contact-rm{margin-left:auto;background:none;border:none;color:rgba(200,90,70,.7);cursor:pointer;font-size:13px;padding:2px 6px;border-radius:6px;}
.mk-contact-rm:hover{background:rgba(200,90,70,.1);}
.mk-lbl-sub{font-weight:500;font-size:11px;color:rgba(20,35,28,.45);}
.mk-btn.sm{padding:6px 12px;font-size:12px;}

/* ============ v5: donasi akumulasi, progress, donatur ============ */
.mk-dono{margin:14px 0;padding:15px 16px;border-radius:15px;background:linear-gradient(135deg,rgba(91,173,143,.1),rgba(43,93,158,.06));border:1px solid rgba(91,173,143,.22);}
.mk-dono-row{margin-bottom:12px;}
.mk-dono-row:last-of-type{margin-bottom:0;}
.mk-dono-top{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:7px;}
.mk-dono-top b{font:700 20px Fraunces,serif;color:#1a3a2e;}
.mk-dono-row.goods .mk-dono-top b{color:#2b5d9e;}
.mk-dono-top span{font-size:12.5px;color:rgba(20,35,28,.6);}
.mk-dono-bar{height:9px;border-radius:5px;background:rgba(20,40,30,.1);overflow:hidden;position:relative;}
.mk-dono-bar span{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#5BAD8F,#43a047);transition:width .6s cubic-bezier(.4,0,.2,1);min-width:3px;}
.mk-dono-bar.goods span{background:linear-gradient(90deg,#4a8fd4,#2b5d9e);}
.mk-dono-pct{font:700 11px Inter;color:#2e7a5c;margin-top:4px;text-align:right;}
.mk-dono-row.goods .mk-dono-pct{color:#2b5d9e;}
.mk-dono-donors{display:inline-flex;align-items:center;gap:7px;margin-top:12px;background:rgba(255,255,255,.6);border:1px solid rgba(20,40,30,.1);border-radius:99px;padding:7px 14px;font:600 12px Inter;color:#33463d;cursor:pointer;transition:background .15s;}
.mk-dono-donors:hover{background:#fff;}
.mk-dono-donors svg{width:15px;height:15px;}
/* panel donasi di halaman order */
.mk-dono-deal{margin-bottom:14px;}
.mk-dono-deal-amt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.mk-dono-deal-lbl{font:600 11px Inter;text-transform:uppercase;letter-spacing:.05em;color:rgba(20,35,28,.5);}
.mk-dono-deal-amt b{font:700 18px Fraunces,serif;color:#1a3a2e;}
.mk-dono-badge{font:700 10px Inter;letter-spacing:.03em;border-radius:99px;padding:4px 10px;background:rgba(20,40,30,.08);color:rgba(20,35,28,.6);display:inline-flex;align-items:center;gap:4px;}
.mk-dono-badge svg{width:12px;height:12px;}
.mk-dono-badge.ok{background:rgba(43,93,158,.14);color:#2b5d9e;}
.mk-dono-badge.wait{background:rgba(227,185,92,.2);color:#a5701a;}
/* daftar donatur (modal) */
.mk-dn-list{display:flex;flex-direction:column;}
.mk-dn-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid rgba(20,40,30,.07);}
.mk-dn-row:first-child{border-top:none;}
.mk-dn-i{display:flex;flex-direction:column;min-width:0;}
.mk-dn-i b{font-size:13.5px;}
.mk-dn-i span{font-size:11.5px;color:rgba(20,35,28,.5);}
.mk-dn-r{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.mk-dn-r b{font-size:13px;color:#2e7a5c;font-variant-numeric:tabular-nums;}
.mk-dn-v{font:700 9px Inter;text-transform:uppercase;letter-spacing:.03em;border-radius:99px;padding:2px 8px;background:rgba(20,40,30,.08);color:rgba(20,35,28,.5);}
.mk-dn-v.ok{background:rgba(43,93,158,.14);color:#2b5d9e;}
.mk-dn-v.wait{background:rgba(227,185,92,.2);color:#a5701a;}

/* ============ v6: event / ticketing ============ */
/* kartu info event di detail */
.mk-ev-info{margin:12px 0;display:flex;flex-direction:column;gap:10px;}
.mk-ev-when,.mk-ev-where{display:flex;align-items:flex-start;gap:10px;}
.mk-ev-when svg,.mk-ev-where svg{width:19px;height:19px;color:#5BAD8F;flex-shrink:0;margin-top:1px;}
.mk-ev-when b,.mk-ev-where b{display:block;font:600 13.5px Inter;color:#182320;}
.mk-ev-when span,.mk-ev-where span{display:block;font-size:11.5px;color:rgba(20,35,28,.55);margin-top:1px;}
/* panel event di order */
.mk-ev-deal{margin-bottom:14px;}
/* tiket display */
.mk-tk-ev{padding:12px 14px;border-radius:12px;background:rgba(91,173,143,.09);margin-bottom:14px;}
.mk-tk-ev b{display:block;font:700 15px Fraunces,serif;color:#1a3a2e;}
.mk-tk-ev span{display:block;font-size:12px;color:rgba(20,35,28,.6);margin-top:2px;}
.mk-tk-list{display:flex;flex-direction:column;gap:12px;}
.mk-tk{position:relative;border-radius:14px;padding:15px 16px;background:linear-gradient(135deg,#f4faf7,#eaf4ef);border:1.5px dashed rgba(26,58,46,.28);overflow:hidden;}
.mk-tk::before,.mk-tk::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:var(--mk-bg,#fff);top:50%;transform:translateY(-50%);}
.mk-tk::before{left:-11px;} .mk-tk::after{right:-11px;}
.mk-tk.used{opacity:.55;filter:grayscale(.4);}
.mk-tk-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.mk-tk-tier{font:700 13px Inter;color:#1a3a2e;}
.mk-tk-ok{font:700 9px Inter;text-transform:uppercase;letter-spacing:.05em;color:#2e7a5c;background:rgba(91,173,143,.18);border-radius:99px;padding:3px 9px;}
.mk-tk-used{font:700 9px Inter;text-transform:uppercase;letter-spacing:.05em;color:rgba(20,35,28,.5);background:rgba(20,40,30,.1);border-radius:99px;padding:3px 9px;}
.mk-tk-code{font:800 22px 'Courier New',monospace;letter-spacing:.08em;color:#1a3a2e;text-align:center;margin:6px 0 10px;}
.mk-tk-bars{width:100%;height:34px;display:block;opacity:.85;}
/* check-in scanner */
.mk-checkin{max-width:520px;}
.mk-ci-card{padding:24px 22px;}
.mk-ci-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.mk-ci-ic{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#1A3A2E,#2e7a5c);display:grid;place-items:center;flex-shrink:0;}
.mk-ci-ic svg{width:26px;height:26px;stroke:#8fd9bd;}
.mk-ci-head .mk-h1{margin:0;font-size:20px;}
.mk-ci-head .mk-sub{margin:2px 0 0;font-size:12.5px;color:rgba(20,35,28,.6);}
.mk-ci-input{display:flex;gap:9px;margin-bottom:16px;}
.mk-ci-input input{flex:1;padding:13px 15px;border:1.5px solid rgba(20,40,30,.16);border-radius:12px;font:700 16px 'Courier New',monospace;letter-spacing:.06em;text-transform:uppercase;}
.mk-ci-input input:focus{outline:none;border-color:#5BAD8F;box-shadow:0 0 0 3px rgba(91,173,143,.15);}
.mk-ci-result{padding:16px;border-radius:12px;background:rgba(20,40,30,.04);text-align:center;transition:background .25s;}
.mk-ci-result span{font-size:12.5px;color:rgba(20,35,28,.55);}
.mk-ci-result b{display:block;font:700 17px Fraunces,serif;}
.mk-ci-result.ok{background:rgba(91,173,143,.16);} .mk-ci-result.ok b{color:#2e7a5c;}
.mk-ci-result.ok span{color:#2e7a5c;}
.mk-ci-result.warn{background:rgba(227,185,92,.18);} .mk-ci-result.warn b{color:#a5701a;}
.mk-ci-result.warn span{color:#a5701a;}
.mk-ci-result.err{background:rgba(220,90,70,.14);} .mk-ci-result.err b{color:#c23a2a;}

/* ============ v7: lokasi lanjutan + peta gabungan ============ */
#edGeoMe{flex:0 0 auto;padding:0 11px;display:grid;place-items:center;}
#edGeoMe svg{width:17px;height:17px;}
#edGeoMe.busy{opacity:.5;pointer-events:none;animation:cdPulse 1s infinite;}
.mk-loc-addr{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:rgba(20,35,28,.7);margin:8px 0 4px;line-height:1.5;}
.mk-loc-addr svg{width:15px;height:15px;color:#5BAD8F;flex-shrink:0;margin-top:2px;}
/* toggle grid/map */
.mk-view-toggle{display:inline-flex;gap:2px;background:rgba(20,40,30,.06);border-radius:11px;padding:3px;margin-bottom:14px;}
.mk-view-toggle button{display:inline-flex;align-items:center;gap:6px;border:none;background:none;border-radius:9px;padding:8px 14px;font:600 12.5px Inter;color:rgba(20,35,28,.55);cursor:pointer;transition:background .15s,color .15s;}
.mk-view-toggle button svg{width:15px;height:15px;}
.mk-view-toggle button.on{background:#fff;color:#1a3a2e;box-shadow:0 1px 4px rgba(20,40,30,.1);}
.mk-vt-n{background:rgba(91,173,143,.25);color:#2e7a5c;border-radius:99px;padding:1px 7px;font-size:10.5px;font-weight:700;}
/* peta gabungan */
.mk-browse-map{position:relative;height:min(62vh,520px);border-radius:16px;overflow:hidden;border:1px solid rgba(20,40,30,.1);margin-bottom:14px;background:#e6ece9;}
.mk-browse-map canvas{width:100%;height:100%;display:block;cursor:pointer;}
.mk-bm-pop{position:absolute;width:180px;background:#fff;border-radius:12px;box-shadow:0 8px 28px rgba(20,40,30,.22);overflow:hidden;z-index:5;}
.mk-bm-pop a{display:block;padding:11px 13px;text-decoration:none;}
.mk-bm-pop b{display:block;font:600 13px Inter;color:#1a3a2e;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mk-bm-pop span{font-size:11.5px;color:#2e7a5c;font-weight:600;}
.mk-bm-pop::after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:#fff;}

/* ============ v8: rekening / QRIS + bukti bayar ============ */
/* kartu rekening di halaman kelola */
.mk-pay{display:flex;align-items:flex-start;gap:13px;}
.mk-pay-ic{flex:0 0 42px;height:42px;border-radius:12px;display:grid;place-items:center;}
.mk-pay-ic svg{width:22px;height:22px;}
.mk-pay-bank{background:rgba(43,93,158,.12);color:#2b5d9e;}
.mk-pay-ewallet{background:rgba(91,173,143,.14);color:#2e7a5c;}
.mk-pay-qris{background:rgba(90,79,192,.13);color:#5a4fc0;}
.mk-pay-i{flex:1;min-width:0;}
.mk-pay-i b{display:block;font:700 14px Inter;color:#1a3a2e;}
.mk-pay-no{display:block;font:600 13px 'Courier New',monospace;color:#33463d;margin-top:2px;letter-spacing:.02em;}
.mk-pay-nm{display:block;font-size:12px;color:rgba(20,35,28,.6);margin-top:1px;}
.mk-pay-qr{width:130px;height:130px;object-fit:contain;border-radius:10px;border:1px solid rgba(20,40,30,.1);margin-top:8px;background:#fff;}
.mk-pay-note{display:block;font-size:11.5px;color:rgba(20,35,28,.5);margin-top:5px;font-style:italic;}
.mk-pay-act{display:flex;flex-direction:column;gap:6px;flex-shrink:0;}
/* upload QRIS di editor */
.mk-qris-up{border:2px dashed rgba(20,40,30,.2);border-radius:12px;min-height:120px;display:grid;place-items:center;cursor:pointer;padding:12px;transition:border-color .15s;}
.mk-qris-up:hover{border-color:#5BAD8F;}
.mk-qris-up span{font-size:12.5px;color:rgba(20,35,28,.5);}
.mk-qris-up img{max-width:100%;max-height:180px;border-radius:8px;}
/* panel pembayaran di order */
.mk-paymethods{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;}
.mk-paym{padding:12px 14px;border-radius:12px;border:1px solid rgba(20,40,30,.1);background:rgba(20,40,30,.02);}
.mk-paym.mk-pay-bank{border-left:3px solid #2b5d9e;}
.mk-paym.mk-pay-ewallet{border-left:3px solid #2e7a5c;}
.mk-paym.mk-pay-qris{border-left:3px solid #5a4fc0;}
.mk-paym-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.mk-paym-h b{font:700 13.5px Inter;color:#1a3a2e;}
.mk-copy{display:inline-flex;align-items:center;gap:6px;background:rgba(20,40,30,.05);border:none;border-radius:8px;padding:5px 10px;font:600 13px 'Courier New',monospace;color:#33463d;cursor:pointer;transition:background .15s;}
.mk-copy:hover{background:rgba(91,173,143,.18);}
.mk-copy svg{width:13px;height:13px;opacity:.6;}
.mk-paym-nm{display:block;font-size:12px;color:rgba(20,35,28,.6);margin-top:4px;}
.mk-paym-qr{width:150px;height:150px;object-fit:contain;border-radius:10px;border:1px solid rgba(20,40,30,.1);margin-top:8px;background:#fff;}
.mk-paym-note{display:block;font-size:11.5px;color:rgba(20,35,28,.5);margin-top:5px;font-style:italic;}
/* bukti bayar */
.mk-proof{margin:12px 0;padding:12px;border-radius:12px;background:rgba(91,173,143,.08);border:1px solid rgba(91,173,143,.2);}
.mk-proof-h{display:flex;align-items:center;gap:7px;font:600 12px Inter;color:#2e7a5c;margin-bottom:9px;}
.mk-proof-h svg{width:15px;height:15px;background:#2e7a5c;color:#fff;border-radius:99px;padding:2px;}
.mk-proof-img{max-width:200px;max-height:260px;border-radius:10px;border:1px solid rgba(20,40,30,.12);display:block;}

/* ============ v9: donasi lewat-target + chart diperjelas ============ */
.mk-dono-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:5px;flex-wrap:wrap;}
.mk-dono-pct{font:700 11px Inter;color:#2e7a5c;font-variant-numeric:tabular-nums;}
.mk-dono-row.goods .mk-dono-pct{color:#2b5d9e;}
.mk-dono-pct em{font-style:normal;font-weight:600;opacity:.8;}
.mk-dono-pct.reached{color:#c68a1e;} .mk-dono-pct.over{color:#c68a1e;}
.mk-dono-goal{display:inline-flex;align-items:center;gap:4px;font:700 10px Inter;text-transform:uppercase;letter-spacing:.04em;color:#c68a1e;background:rgba(227,185,92,.2);border-radius:99px;padding:3px 9px;}
.mk-dono-goal svg{width:12px;height:12px;}
/* bar: state reached = emas + kilau */
.mk-dono-bar{height:11px;border-radius:6px;}
.mk-dono-bar.reached span{background:linear-gradient(90deg,#e3b95c,#d4a017,#e3b95c);background-size:200% 100%;animation:goldShift 3s linear infinite;}
.mk-dono-bar.goods.reached span{background:linear-gradient(90deg,#e3b95c,#d4a017,#e3b95c);background-size:200% 100%;animation:goldShift 3s linear infinite;}
@keyframes goldShift{0%{background-position:0 0;}100%{background-position:200% 0;}}
/* penanda 100% pada bar */
.mk-dono-bar{position:relative;}
.mk-dono-bar.reached::after{content:"";position:absolute;right:0;top:-3px;bottom:-3px;width:3px;background:#c68a1e;border-radius:2px;box-shadow:0 0 6px rgba(198,138,30,.6);}

/* ============ v9: search + export di modal ============ */
.mk-dn-tools{display:flex;gap:8px;align-items:center;margin:2px 0 12px;}
.mk-dn-search{flex:1;padding:9px 13px;border:1.5px solid rgba(20,40,30,.14);border-radius:10px;font:500 13px Inter;}
.mk-dn-search:focus{outline:none;border-color:#5BAD8F;box-shadow:0 0 0 3px rgba(91,173,143,.13);}
.mk-dn-tools .mk-btn.sm{flex:0 0 auto;white-space:nowrap;}

/* ============ v10: save progress + sub-progress + draft ============ */
.mk-ed-actions{display:flex;gap:9px;margin-top:4px;}
.mk-ed-actions .mk-btn{flex:1;padding:12px;font-size:13.5px;}
.mk-ed-actions .mk-btn.pri{flex:1.6;}
.mk-save-prog{margin-top:6px;padding:14px 15px;border-radius:14px;background:linear-gradient(135deg,rgba(91,173,143,.1),rgba(26,58,46,.06));border:1px solid rgba(91,173,143,.22);}
.mk-save-label{font:700 13px Inter;color:#1a3a2e;margin-bottom:9px;display:flex;align-items:center;gap:8px;}
.mk-save-label::before{content:"";width:14px;height:14px;border:2px solid rgba(91,173,143,.35);border-top-color:#2e7a5c;border-radius:99px;animation:cdspin .7s linear infinite;flex-shrink:0;}
@keyframes cdspin{to{transform:rotate(360deg);}}
.mk-save-track{height:9px;border-radius:6px;background:rgba(20,40,30,.1);overflow:hidden;}
.mk-save-track span{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#5BAD8F,#2e7a5c);transition:width .35s cubic-bezier(.4,0,.2,1);box-shadow:0 0 8px rgba(91,173,143,.4);}
.mk-save-sub{margin-top:7px;font:600 11.5px Inter;color:#2e7a5c;font-variant-numeric:tabular-nums;min-height:14px;}
/* badge draft di kartu listing pemilik */
.mk-badge-draft{background:rgba(180,140,40,.16);color:#a5771a;border-radius:99px;padding:2px 9px;font:700 10px Inter;text-transform:uppercase;letter-spacing:.04em;}
.mk-sold.st-draft,.mk-status-badge.st-draft,.mk-st.st-draft{background:rgba(180,140,40,.16);color:#a5771a;}

/* ============ v10: event redesign + QR tiket + quota + tier advanced ============ */
/* tier chip berwarna custom (event) */
.mk-vchip[style*="--tier"]{border-color:var(--tier);}
.mk-vchip[style*="--tier"].on{background:var(--tier);border-color:var(--tier);color:#fff;}
.mk-vchip[style*="--tier"].on i{color:rgba(255,255,255,.85);}
/* quota progress per tier (detail) */
.mk-ev-quota{margin:14px 0;display:flex;flex-direction:column;gap:11px;}
.mk-quota-row.out{opacity:.65;}
.mk-quota-top{display:flex;align-items:center;gap:7px;margin-bottom:5px;font:600 12.5px Inter;color:#1a3a2e;}
.mk-quota-dot{width:9px;height:9px;border-radius:99px;flex-shrink:0;}
.mk-quota-n{margin-left:auto;font-size:11.5px;color:rgba(20,35,28,.6);font-weight:600;}
.mk-quota-row.out .mk-quota-n{color:#c0392b;}
.mk-quota-bar{height:8px;border-radius:5px;background:rgba(20,40,30,.09);overflow:hidden;}
.mk-quota-bar span{display:block;height:100%;border-radius:5px;transition:width .4s;}
/* editor tier advanced (event) */
.mk-tier-adv{flex-direction:column;align-items:stretch;gap:8px;padding:11px;border:1px solid rgba(20,40,30,.12);border-radius:12px;background:rgba(20,40,30,.015);}
.mk-tier-main{display:flex;gap:7px;align-items:center;}
.mk-tier-main input{flex:1;}
.mk-tier-col{flex:0 0 34px!important;width:34px;height:34px;padding:2px;border-radius:8px;border:1px solid rgba(20,40,30,.15);cursor:pointer;background:none;}
.mk-tier-more{display:flex;gap:7px;flex-wrap:wrap;}
.mk-tier-more label{flex:1;min-width:80px;font:600 10.5px Inter;color:rgba(20,35,28,.55);text-transform:uppercase;letter-spacing:.03em;display:flex;flex-direction:column;gap:3px;}
.mk-tier-more input{font:500 12.5px Inter;padding:7px 9px;text-transform:none;letter-spacing:0;}
/* tiket QR + kartu */
.mk-tk-qr{background:#fff;border-radius:12px;padding:10px;display:grid;place-items:center;margin:8px 0;}
.mk-tk-qr svg{width:170px;height:170px;display:block;}
.mk-tk-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.mk-tk-seat{background:rgba(26,58,46,.1);color:#1a3a2e;border-radius:7px;padding:3px 9px;font:700 11px Inter;}
.mk-tk-loc{background:rgba(91,173,143,.14);color:#2e7a5c;border-radius:7px;padding:3px 9px;font:600 11px Inter;}
.mk-tk-actions{display:flex;gap:7px;margin-top:10px;}
.mk-tk-actions .mk-btn{flex:1;}
/* event: kartu order distinct (bukan warna donasi) */
.mk-ev-deal{border-left:3px solid #5a4fc0;}
.mk-ev-deal .mk-dono-deal-lbl{color:#5a4fc0;}

/* scan-list di halaman check-in */
.mk-ci-log{margin-top:16px;}
.mk-ci-log-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.mk-ci-stat{background:rgba(91,173,143,.16);color:#2e7a5c;border-radius:99px;padding:2px 10px;font:700 12px Inter;margin-left:6px;}
.mk-ci-log-tools{display:flex;gap:8px;align-items:center;}
.mk-ci-log-tools input{padding:8px 12px;border:1.5px solid rgba(20,40,30,.14);border-radius:9px;font:500 12.5px Inter;min-width:150px;}
.mk-ci-log-tools input:focus{outline:none;border-color:#5BAD8F;}
.mk-ci-log-list{display:flex;flex-direction:column;gap:2px;max-height:60vh;overflow:auto;}
.mk-ci-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:9px;transition:background .12s;}
.mk-ci-row:hover{background:rgba(20,40,30,.03);}
.mk-ci-row-i{min-width:0;}
.mk-ci-row-i b{display:block;font:600 13px Inter;color:#1a3a2e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mk-ci-row-i span{font:500 11px 'Courier New',monospace;color:rgba(20,35,28,.55);}
.mk-ci-time{font:600 11px Inter;color:#2e7a5c;font-variant-numeric:tabular-nums;flex-shrink:0;white-space:nowrap;}

/* ============ v11.2: diskon + iconic detail + tombol peta + varian card ============ */
/* --- diskon di editor --- */
.mk-og-row{display:flex;align-items:center;gap:9px;margin-top:8px;}
.mk-og-row input{flex:1;}
.mk-og-hint{font:600 11.5px Inter;white-space:nowrap;}
.mk-og-hint.on{color:#c0392b;}
.mk-og-hint.warn{color:#c98a00;font-weight:500;font-size:10.5px;white-space:normal;}
/* --- diskon di detail --- */
.mk-price-wrap{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:4px 0 2px;}
.mk-price-wrap.has-disc .mk-price-big{color:#c0392b;}
.mk-price-og{font:600 15px Inter;color:rgba(20,35,28,.4);text-decoration:line-through;}
.mk-disc-badge{background:#c0392b;color:#fff;font:800 13px Inter;border-radius:8px;padding:3px 9px;letter-spacing:-.01em;}
.mk-disc-save{background:rgba(192,57,43,.1);color:#c0392b;font:700 11.5px Inter;border-radius:7px;padding:3px 9px;}
/* --- iconic highlights detail --- */
.mk-highlights{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px;}
.mk-hi{display:inline-flex;align-items:center;gap:6px;background:rgba(20,40,30,.04);border:1px solid rgba(20,40,30,.08);color:#22352c;font:600 12px Inter;border-radius:10px;padding:7px 12px;}
.mk-hi svg{width:15px;height:15px;color:#5BAD8F;flex-shrink:0;}
/* --- tombol peta lengkap --- */
.mk-mapbtns{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px;}
.mk-mapbtn{display:inline-flex;align-items:center;gap:9px;padding:11px 14px;border-radius:13px;border:1.5px solid rgba(20,40,30,.12);font:700 12.5px Inter;color:#22352c;background:#fff;transition:all .16s;text-decoration:none;}
.mk-mapbtn svg{width:20px;height:20px;flex-shrink:0;}
.mk-mapbtn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(24,42,34,.12);}
.mk-mapbtn.gmap:hover{border-color:#4285F4;color:#4285F4;}
.mk-mapbtn.waze:hover{border-color:#33ccff;color:#0aa5d8;}
.mk-mapbtn.amap:hover{border-color:#5a5a5a;color:#333;}
.mk-mapbtn.osm:hover{border-color:#7ebc6f;color:#5a9e4b;}
@media(max-width:420px){.mk-mapbtns{grid-template-columns:1fr;}}
/* --- varian di card --- */
.mk-card-vars{display:flex;flex-wrap:wrap;gap:4px;margin:1px 0 2px;}
.mk-vchip-mini{background:rgba(91,173,143,.13);color:#2e7a5c;font:600 10px Inter;border-radius:6px;padding:2px 7px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mk-vchip-mini[style*="--vc"]{background:color-mix(in srgb,var(--vc) 16%,transparent);color:var(--vc);}
.mk-vchip-more{background:rgba(20,40,30,.07);color:rgba(20,35,28,.6);font:700 10px Inter;border-radius:6px;padding:2px 6px;}
/* --- harga + coret di card --- */
.mk-price-row{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:auto;}
.mk-price-was{font:500 11.5px Inter;color:rgba(20,35,28,.4);text-decoration:line-through;}
.mk-disc-corner{position:absolute;left:10px;bottom:10px;background:#c0392b;color:#fff;font:800 11px Inter;border-radius:7px;padding:3px 8px;box-shadow:0 2px 8px rgba(192,57,43,.4);}
/* --- foot card: kondisi + kategori iconic --- */
.mk-card-cat{display:inline-flex;align-items:center;gap:4px;}
.mk-card-cat svg{width:11px;height:11px;opacity:.6;flex-shrink:0;}
.mk-card-cond{border-radius:6px;padding:2px 7px;font:700 10px Inter;}
.mk-card-cond.new{background:rgba(91,173,143,.16);color:#2e7a5c;}
.mk-card-cond.used{background:rgba(20,40,30,.06);color:rgba(20,35,28,.6);}

/* ============ v11.3: aksi kartu (bookmark, share, contact expandable) ============ */
.mk-card-wrap{position:relative;display:flex;flex-direction:column;}
.mk-card-wrap .mk-card{flex:1;}
/* aksi cepat di pojok thumbnail */
.mk-card-quick{position:absolute;right:9px;top:9px;display:flex;flex-direction:column;gap:7px;z-index:3;opacity:0;transform:translateX(6px);transition:opacity .18s,transform .18s;}
.mk-card-wrap:hover .mk-card-quick,.mk-card-quick:focus-within{opacity:1;transform:none;}
@media(hover:none){.mk-card-quick{opacity:1;transform:none;}}
.mk-qbtn{width:34px;height:34px;border-radius:50%;border:none;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 10px rgba(24,42,34,.16);transition:transform .14s,background .14s,color .14s;color:#22352c;padding:0;}
.mk-qbtn svg{width:17px;height:17px;}
.mk-qbtn:hover{transform:scale(1.12);}
.mk-q-save.on{background:#1A3A2E;color:#fff;}
.mk-q-save.on svg{fill:#5BAD8F;stroke:#5BAD8F;}
.mk-q-share:hover{background:#5BAD8F;color:#fff;}


/* ============ v11.3: toggle bahasa ============ */
.mk-lang{display:inline-flex!important;align-items:center;gap:4px;width:auto!important;padding:0 10px!important;}
.mk-lang svg{width:17px;height:17px;}
.mk-lang-code{font:800 10.5px Inter;letter-spacing:.04em;}

/* ============ v11.4: overlay kontak menutupi kartu ============ */
/* tombol kontak iconic di thumbnail (mint agar menonjol) */
.mk-q-contact{background:rgba(255,255,255,.82)!important;color:#8a6d1f!important;}
.mk-q-contact:hover{background:rgba(255,244,214,.95)!important;color:#7a5e12!important;}
/* overlay penutup: menutupi seluruh kartu dengan efek reveal */
.mk-card-cover{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;padding:14px;
  background:rgba(28,32,30,.52);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);color:#fff;border-radius:18px;
  border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 30px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;transform:scale(1.04);clip-path:circle(0% at calc(100% - 30px) 30px);
  transition:clip-path .42s cubic-bezier(.2,.8,.25,1),opacity .3s,transform .42s,visibility 0s .42s;}
.mk-card-cover.show{opacity:1;visibility:visible;transform:none;clip-path:circle(150% at calc(100% - 30px) 30px);
  transition:clip-path .5s cubic-bezier(.2,.8,.25,1),opacity .3s,transform .5s;}
.mk-cover-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.mk-cover-title{display:inline-flex;align-items:center;gap:8px;font:800 14px Fraunces,serif;letter-spacing:.01em;}
.mk-cover-title svg{width:17px;height:17px;color:#ffd479;}
.mk-cover-x{width:30px;height:30px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .14s,transform .14s;padding:0;}
.mk-cover-x svg{width:15px;height:15px;}
.mk-cover-x:hover{background:rgba(255,255,255,.26);transform:rotate(90deg);}
.mk-cover-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1;margin:-2px 0;padding:2px 0;}
.mk-cover-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:9px 12px;
  opacity:0;transform:translateY(8px);animation:mkCoverRow .34s ease forwards;animation-delay:calc(.14s + var(--i,0) * .06s);}
.mk-card-cover.show .mk-cover-row{animation-play-state:running;}
@keyframes mkCoverRow{to{opacity:1;transform:none;}}
.mk-cover-name{font:600 13px Inter;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mk-cover-acts{display:flex;gap:7px;flex-shrink:0;}
.mk-cover-acts .mk-cc-btn{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;transition:transform .14s;}
.mk-cover-acts .mk-cc-btn svg{width:17px;height:17px;}
.mk-cover-acts .mk-cc-btn:hover{transform:translateY(-2px) scale(1.05);}
.mk-cover-acts .mk-cc-btn{background:rgba(255,255,255,.16);backdrop-filter:blur(6px);color:#fff;border:1px solid rgba(255,255,255,.2);}
.mk-cover-acts .mk-cc-btn.wa{color:#c9f5df;}          /* aksen mint pucat transparan (WA) */
.mk-cover-acts .mk-cc-btn.call{color:#ffe3a3;}         /* aksen kuning pucat transparan (Call) */
.mk-cover-acts .mk-cc-btn:hover{background:rgba(255,255,255,.28);transform:translateY(-2px) scale(1.05);}
.mk-cover-chat{display:inline-flex;align-items:center;gap:8px;justify-content:center;margin-top:10px;
  background:rgba(255,212,121,.18);border:1px solid rgba(255,212,121,.35);border-radius:13px;padding:11px;font:700 12.5px Inter;color:#ffe3a3;transition:background .14s,transform .14s;}
.mk-cover-chat svg{width:16px;height:16px;}
.mk-cover-chat:hover{background:rgba(255,212,121,.28);transform:translateY(-1px);}

/* ============ v11.5: redesign kartu ala Apple (halus, pastel, modern) ============ */
.mk-card{border:1px solid rgba(20,40,30,.06);border-radius:22px;box-shadow:0 1px 2px rgba(24,42,34,.04),0 8px 24px rgba(24,42,34,.06);transition:transform .22s cubic-bezier(.2,.8,.25,1),box-shadow .22s;}
.mk-card:hover{transform:translateY(-4px);box-shadow:0 2px 6px rgba(24,42,34,.06),0 20px 44px rgba(24,42,34,.14);}
.mk-card-wrap{border-radius:22px;}
.mk-card-cover{border-radius:22px;}
.mk-thumb{aspect-ratio:4/3;border-radius:22px 22px 0 0;}
.mk-card-wrap:hover .mk-thumb img{transform:scale(1.04);}
/* tag jenis lebih lembut (frosted pastel) */
.mk-thumb-tags .mk-mode,.mk-kindtag{backdrop-filter:blur(8px) saturate(1.2);box-shadow:0 2px 8px rgba(0,0,0,.12);font-weight:700;}
.mk-thumb-tags .mk-mode.sale{background:rgba(255,255,255,.86);color:#1a3a2e;}
.mk-thumb-tags .mk-mode.rent{background:rgba(255,255,255,.86);color:#2b5d9e;}
.mk-thumb-tags .mk-mode.both{background:rgba(255,255,255,.86);color:#7a6fe0;}
/* judul & harga lebih tenang */
.mk-card-b{padding:14px 15px 15px;gap:8px;}
.mk-card-title{font:700 13.5px/1.35 Inter;letter-spacing:-.01em;color:#141f1b;}
.mk-price{font:800 15.5px Inter;letter-spacing:-.02em;color:#1a7a55;}
.mk-price-was{color:rgba(20,35,28,.35);}
/* chip varian pastel */
.mk-vchip-mini{background:#e6f4ee;color:#1a7a55;border-radius:8px;font-weight:600;padding:2px 8px;}
.mk-vchip-more{background:#eef1f0;color:rgba(20,35,28,.55);border-radius:8px;}
/* foot: kategori + kondisi pastel Apple */
.mk-card-cat{background:#eef4f1;color:#3a6b57;border-radius:8px;padding:3px 9px;}
.mk-card-cond.new{background:#e3f3ea;color:#1a7a55;}
.mk-card-cond.used{background:#f0f2f4;color:#66707a;}
.mk-card-loc{color:rgba(20,35,28,.5);}
/* aksi cepat: bulat lembut ala iOS */
.mk-qbtn{width:35px;height:35px;background:rgba(255,255,255,.82);backdrop-filter:blur(10px) saturate(1.3);box-shadow:0 2px 8px rgba(24,42,34,.14);}
.mk-q-save.on{background:#1a7a55;}
.mk-q-save.on svg{fill:#d9f2e6;stroke:#d9f2e6;}
.mk-q-share:hover{background:#bcdaff;color:#1160c4;}
/* badge diskon lebih lembut */
.mk-disc-corner{background:#ff6b5e;box-shadow:0 3px 10px rgba(255,107,94,.4);border-radius:9px;}
.mk-phcount{border-radius:99px;background:rgba(15,28,23,.62);}

/* link join online di modal tiket */
.mk-tk-joinlink{display:inline-flex;align-items:center;gap:7px;margin-top:8px;background:rgba(91,173,143,.14);color:#2e7a5c;border-radius:10px;padding:8px 13px;font:700 12.5px Inter;transition:background .14s;}
.mk-tk-joinlink svg{width:15px;height:15px;}
.mk-tk-joinlink:hover{background:rgba(91,173,143,.24);}

/* event/campaign lewat deadline: tutup pembelian */
.mk-cta-closed{display:flex;align-items:center;gap:12px;background:rgba(192,57,43,.07);border:1px solid rgba(192,57,43,.2);border-radius:14px;padding:14px 16px;color:#c0392b;}
.mk-cta-closed svg{width:26px;height:26px;flex-shrink:0;}
.mk-cta-closed b{display:block;font:700 14px Inter;}
.mk-cta-closed span{font:500 12px Inter;color:rgba(120,40,32,.75);}

/* ==================================================================
   v11.6 — Layer responsif: tampil utuh di HP (bukan hanya tablet/desktop)
   ================================================================== */

/* Guard anti-overflow: anak grid/flex boleh menyusut (penyebab utama "kepotong") */
.mk-det-grid>*,.mk-grid>*,.mk-row>*,.mk-row3>*,.mk-attrs>*,.mk-field>*,.mk-ci-row>*{min-width:0;}
.mk-card-title,.mk-price,.mk-cover-name,.mk-crumb span,.mk-sb-price b{overflow-wrap:anywhere;}

/* Action bar melekat di bawah (hanya layar sempit) */
.mk-stickybuy{display:none;}

@media(max-width:900px){
  .mk-side{position:static;}
  .mk-det-grid{padding-bottom:82px;}
  .mk-stickybuy{position:fixed;left:0;right:0;bottom:0;z-index:120;display:flex;align-items:center;gap:12px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.88);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
    border-top:1px solid rgba(20,40,30,.1);box-shadow:0 -6px 24px rgba(24,42,34,.1);
    transition:transform .28s cubic-bezier(.2,.8,.25,1),opacity .2s;}
  .mk-stickybuy.hide{transform:translateY(130%);opacity:0;pointer-events:none;}
  .mk-sb-price{display:flex;flex-direction:column;min-width:0;flex:1;}
  .mk-sb-price b{font:800 15px Inter;color:#1a7a55;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .mk-sb-price s{font:500 11px Inter;color:rgba(20,35,28,.4);}
  .mk-sb-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border:0;
    border-radius:14px;background:#1A3A2E;color:#fff;font:700 13.5px Inter;cursor:pointer;box-shadow:0 6px 18px rgba(26,58,46,.3);}
  .mk-sb-btn.closed{background:rgba(192,57,43,.1);color:#c0392b;box-shadow:none;}
}

/* ---------- HP (<=640px) ---------- */
@media(max-width:640px){
  .mk-wrap{padding:16px 14px 44px;}

  /* Header dua baris: brand + aksi di atas, pencarian penuh di bawah */
  .mk-top{flex-wrap:wrap;gap:9px;padding:9px 14px;}
  .mk-brand-t i{display:none;}
  .mk-logo{width:34px;height:34px;border-radius:11px;}
  .mk-search{order:3;flex-basis:100%;max-width:none;padding:10px 15px;}
  .mk-search input{font-size:16px;}              /* cegah zoom otomatis iOS */
  .mk-nav{margin-left:auto;gap:6px;flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
  .mk-nav::-webkit-scrollbar{display:none;}
  .mk-nav>*{flex-shrink:0;}
  .mk-btn{padding:9px 13px;font-size:12px;min-height:40px;}
  .mk-ic,.mk-user{width:40px;height:40px;}

  /* Kategori: strip gulir mendatar tepi-ke-tepi (ala iOS) */
  .mk-cats{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;
    margin-inline:-14px;padding-inline:14px;padding-bottom:2px;margin-bottom:16px;}
  .mk-cats::-webkit-scrollbar{display:none;}
  .mk-cat{flex-shrink:0;scroll-snap-align:start;min-height:38px;display:inline-flex;align-items:center;}

  /* Form: satu kolom, input nyaman disentuh */
  /* Baris formulir kini diatur oleh container query terhadap kartu modal,
     bukan lebar layar — lihat bagian @container mkform di bawah. Yang
     tersisa di sini hanya .mk-row untuk formulir di luar modal. */
  .mk-row{grid-template-columns:1fr;}
  .mk-f input,.mk-f select,.mk-f textarea{font-size:16px;padding:11px 13px;}
  .mk-seg button{padding:11px 8px;font-size:12.5px;}
  .mk-field{flex-wrap:wrap;}
  .mk-field input{flex:1 1 100%;}

  /* Aturan panel untuk layar kecil ada di bagian bawah berkas, bersama
     definisi panel geser — supaya semuanya di satu tempat dan tidak saling
     menimpa dari dua arah. Di sini hanya ukuran hurufnya. */
  .mk-mcard h2{font-size:1.15rem;}

  /* Detail */
  .mk-hero{aspect-ratio:4/3;border-radius:16px;}
  .mk-thumbs{overflow-x:auto;scrollbar-width:none;}
  .mk-thumbs::-webkit-scrollbar{display:none;}
  .mk-crumb span{max-width:52vw;}
  .mk-price-big{font-size:1.2rem;}
  .mk-mapbtns{grid-template-columns:1fr 1fr;}
  .mk-cd-grid{gap:6px;}
  .mk-cta{min-height:48px;}

  /* Log check-in & alat pencarian */
  .mk-ci-log-tools{flex-wrap:wrap;}
  .mk-ci-log-tools input{min-width:0;flex:1 1 100%;}
  .mk-ci-row{flex-wrap:wrap;}

  /* Overlay kontak di kartu */
  .mk-card-cover{padding:12px;}
  .mk-cover-name{font-size:12.5px;}
}

/* ---------- HP kecil (<=380px) ---------- */
@media(max-width:380px){
  .mk-brand-t{display:none;}
  .mk-cd-grid{grid-template-columns:repeat(2,1fr);}
  .mk-sb-btn{padding:0 15px;font-size:12.5px;}
  .mk-mcard{padding-inline:14px;}
  .mk-mcard h2{margin-inline:-14px;padding-inline:14px;}
}

/* ===== Ajakan masuk (tamu menekan tombol aksi) ===== */
.mk-auth{max-width:400px;text-align:center;padding:30px 26px 24px;position:relative;border-radius:24px;}
.mk-auth-x{position:absolute;top:12px;right:12px;width:32px;height:32px;border:0;border-radius:50%;
  background:rgba(20,40,30,.06);color:#5b6b63;font-size:19px;line-height:1;cursor:pointer;transition:background .15s,transform .15s;}
.mk-auth-x:hover{background:rgba(20,40,30,.12);transform:rotate(90deg);}
.mk-auth-ic{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 15px;border-radius:19px;
  background:linear-gradient(150deg,#e6f4ee,#d2ece0);color:#1a7a55;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
.mk-auth-ic svg{width:27px;height:27px;}
.mk-auth h2{font:700 18px/1.3 Fraunces,serif;color:#14231d;margin:0 0 8px;letter-spacing:-.01em;}
.mk-auth-sub{font:500 12.5px/1.6 Inter,sans-serif;color:#66776e;margin:0 0 20px;}
.mk-auth-btns{display:flex;flex-direction:column;gap:9px;}
.mk-auth-btns .mk-cta{width:100%;justify-content:center;min-height:46px;}
.mk-auth-later{margin-top:14px;border:0;background:transparent;color:#8a978f;font:600 12px Inter,sans-serif;cursor:pointer;padding:6px;}
.mk-auth-later:hover{color:#4a5c53;text-decoration:underline;}
@media(max-width:640px){.mk-auth{padding:26px 18px 20px;}}

/* ══════════════════════════════════════════════════════════════
   Tata letak mengikuti lebar WADAH, bukan lebar layar.

   Aplikasi ini dibuka di dalam jendela desktop, dan lebar jendela sering
   jauh berbeda dari lebar layar. Media query membaca layar: di jendela
   sempit pada monitor lebar, panel samping tetap dipaksakan dan konten
   beserta tombolnya terdorong keluar area yang terlihat — tombol tampak
   "tidak bisa diklik" padahal sebenarnya berada di luar jendela.
   Container query membaca wadahnya sendiri, sehingga selalu tepat.
   ══════════════════════════════════════════════════════════════ */
.mk-wrap { container-type: inline-size; container-name: mkwrap; }
@container mkwrap (max-width: 900px) {.mk-det-grid{grid-template-columns:1fr;}}
@container mkwrap (max-width: 420px) {.mk-mapbtns{grid-template-columns:1fr;}}
@container mkwrap (max-width: 900px) {
  .mk-side{position:static;}
  .mk-det-grid{padding-bottom:82px;}
  .mk-stickybuy{position:fixed;left:0;right:0;bottom:0;z-index:120;display:flex;align-items:center;gap:12px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.88);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
    border-top:1px solid rgba(20,40,30,.1);box-shadow:0 -6px 24px rgba(24,42,34,.1);
    transition:transform .28s cubic-bezier(.2,.8,.25,1),opacity .2s;}
  .mk-stickybuy.hide{transform:translateY(130%);opacity:0;pointer-events:none;}
  .mk-sb-price{display:flex;flex-direction:column;min-width:0;flex:1;}
  .mk-sb-price b{font:800 15px Inter;color:#1a7a55;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .mk-sb-price s{font:500 11px Inter;color:rgba(20,35,28,.4);}
  .mk-sb-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border:0;
    border-radius:14px;background:#1A3A2E;color:#fff;font:700 13.5px Inter;cursor:pointer;box-shadow:0 6px 18px rgba(26,58,46,.3);}
  .mk-sb-btn.closed{background:rgba(192,57,43,.1);color:#c0392b;box-shadow:none;}
}

/* ===== Catatan suara pada iklan ===== */
.mk-voice{margin-top:4px}
.mk-voice-idle{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border:1px dashed var(--mk-line,#dde3ea);border-radius:12px;background:var(--mk-bg,#fafafa)}
.mk-voice-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:11px;
  border:1px solid var(--mk-line,#dde3ea);background:#fff;cursor:pointer;
  font:600 13px/1 inherit;flex:0 0 auto;transition:all .15s}
.mk-voice-btn:hover{border-color:#5BAD8F}
.mk-voice-btn.rec{background:#B33;border-color:#B33;color:#fff}
.mk-voice-btn.rec svg{animation:mkPulse 1.1s ease-in-out infinite}
@keyframes mkPulse{0%,100%{opacity:1}50%{opacity:.45}}
.mk-voice-btn svg{width:16px;height:16px}
.mk-voice-wave{flex:1;min-width:0;height:56px;max-width:100%}
.mk-voice-time{flex:0 0 auto;font:600 12px/1 ui-monospace,monospace;color:#7a8a80;min-width:82px;text-align:right}
.mk-voice-has{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;
  border:1px solid var(--mk-line,#dde3ea);border-radius:12px;background:var(--mk-bg,#fafafa)}
.mk-voice-has audio{flex:1;min-width:200px;height:38px}
@media(max-width:560px){
  .mk-voice-idle{flex-wrap:wrap}
  .mk-voice-wave{width:100%;order:3}
  .mk-voice-time{margin-left:auto}
}

.mk-voice-state{flex:0 0 auto;font-size:11px;font-weight:600;color:#B4741E;
  padding:3px 9px;border-radius:99px;background:rgba(180,116,30,.13)}
.mk-voice-state.ok{color:#2b6b52;background:rgba(91,173,143,.16)}

/* ═══════════════════════════════════════════════════════════
   Open PO & jadwal sewa.

   Gaya mengikuti arahan: sudut membulat besar, lapisan tembus pandang,
   dan aksen yang muncul dari warna itu sendiri — bukan garis tebal.
   ═══════════════════════════════════════════════════════════ */
.po-card{position:relative;padding:18px;border-radius:18px;margin-bottom:14px;
  background:linear-gradient(150deg,rgba(47,143,110,.10),rgba(47,143,110,.03));
  border:1px solid rgba(47,143,110,.22);overflow:hidden}
.po-card::before{content:'';position:absolute;inset:-40% -20% auto auto;width:190px;height:190px;
  border-radius:50%;background:radial-gradient(circle,rgba(91,173,143,.22),transparent 70%);
  pointer-events:none}
.po-card.po-failed,.po-card.po-full{background:linear-gradient(150deg,rgba(150,150,150,.10),rgba(150,150,150,.03));
  border-color:rgba(120,120,120,.22)}
.po-card.po-failed::before,.po-card.po-full::before{background:radial-gradient(circle,rgba(140,140,140,.18),transparent 70%)}

.po-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;position:relative}
.po-badge{display:inline-flex;align-items:center;padding:5px 12px;border-radius:99px;
  background:#1A3A2E;color:#fff;font:700 10.5px 'Inter',system-ui,sans-serif;
  letter-spacing:.08em;text-transform:uppercase}
.po-failed .po-badge,.po-full .po-badge{background:#6B7671}
.po-count{margin-left:auto;font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#2F8F6E}
.po-sub{margin-left:auto;font-size:11.5px;color:#8B968F}

.po-meter{height:9px;border-radius:99px;background:rgba(26,58,46,.10);overflow:hidden;margin-bottom:8px}
.po-meter i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#1A3A2E,#5BAD8F);transition:width .5s cubic-bezier(.2,.8,.25,1)}
.po-nums{font-size:12.5px;color:#5C6B63;margin-bottom:6px}
.po-nums b{color:#1C2621;font-weight:700}
.po-need{margin:0 0 12px;font-size:12px;color:#2F8F6E;font-weight:600}
.po-need b{font-weight:800}

.po-facts{margin:0 0 12px;padding:12px 0 0;border-top:1px solid rgba(26,58,46,.10);
  display:flex;flex-wrap:wrap;gap:16px}
.po-facts div{min-width:110px}
.po-facts dt{font:600 10px 'Inter',system-ui,sans-serif;letter-spacing:.07em;
  text-transform:uppercase;color:#8B968F;margin-bottom:3px}
.po-facts dd{margin:0;font-size:13px;font-weight:600;color:#1C2621}
.po-note{margin:0 0 12px;font-size:12px;line-height:1.6;color:#5C6B63}

.po-order{display:flex;gap:8px}
.po-order input{width:78px;padding:11px 12px;border-radius:12px;border:1px solid rgba(26,58,46,.16);
  background:#fff;font-size:14px;font-weight:600;text-align:center;outline:none}
.po-order input:focus{border-color:#2F8F6E}
.po-btn{flex:1;padding:11px 18px;border-radius:12px;border:0;background:#1A3A2E;color:#fff;
  font:700 13px 'Inter',system-ui,sans-serif;cursor:pointer;transition:all .15s}
.po-btn:hover{background:#2F8F6E}
.po-btn:active{transform:scale(.98)}
.po-btn[disabled]{opacity:.55;pointer-events:none}
.po-btn.ghost{flex:0 0 auto;background:transparent;color:#5C6B63;
  border:1px solid rgba(26,58,46,.16)}
.po-btn.ghost:hover{background:rgba(26,58,46,.05);color:#1C2621}
.po-mine{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;
  background:rgba(255,255,255,.7);font-size:12.5px;color:#5C6B63}
.po-mine b{color:#1C2621}



@media (prefers-color-scheme: dark){
  .po-order input,.bk-card{background:#171F1B;border-color:rgba(255,255,255,.10)}
  .po-nums b,.po-facts dd,.po-mine b,.bk-pick b,.bk-day{color:#E5EDE8}
  .po-mine{background:rgba(255,255,255,.06)}
  .po-badge{background:#5BAD8F;color:#0F1512}
  .po-btn{background:#5BAD8F;color:#0F1512}
  .po-btn:hover{background:#8FD3B6}
  .bk-day.sel{background:#5BAD8F !important;color:#0F1512}
}

/* ── Bagian lanjutan di editor iklan ── */
.mk-adv{margin:14px 0;padding:16px;border-radius:16px;
  background:rgba(26,58,46,.035);border:1px solid rgba(26,58,46,.12)}
.mk-adv-head{margin-bottom:12px}
.mk-adv-head b{display:block;font-size:13.5px;font-weight:700}
.mk-adv-head i{font-style:normal;font-size:11.5px;color:#8B968F}
.mk-adv-body{margin-top:14px}
.mk-tg{display:flex;align-items:flex-start;gap:11px;cursor:pointer}
.mk-tg input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:#2F8F6E}
.mk-tg span b{display:block;font-size:13.5px;font-weight:700}
.mk-tg span i{font-style:normal;font-size:11.5px;color:#8B968F}
.mk-tg.sm{margin-top:10px}
.mk-tg.sm span{font-size:12.5px;color:#5C6B63}
@media (prefers-color-scheme: dark){
  .mk-adv{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10)}
}

/* ── Perbaikan tata letak formulir ──
   Pemilih satuan (/day, /month) diberi lebar yang boleh menyusut, bukan
   angka tetap. Pada kolom sempit ia mengecil; pada layar lebar tetap
   nyaman dibaca. */
.mk-unit{flex:0 1 84px;min-width:56px;padding-left:8px;padding-right:6px}
@media (max-width:1100px){ .mk-unit{flex:0 1 70px} }

/* Semua kolom formulir boleh menyusut. Tanpa ini satu kolom yang isinya
   lebar akan mendorong seluruh baris keluar dari wadahnya. */
.mk-f{min-width:0}
.mk-f input,.mk-f select,.mk-f textarea{max-width:100%}
.mk-og-row{display:flex;align-items:center;gap:7px;min-width:0;margin-top:7px}
.mk-og-row input{flex:1 1 0;min-width:0}
.mk-og-hint{flex:0 0 auto;font-size:11px;color:#8B968F;white-space:nowrap}

/* Baris tiga kolom menjadi dua lalu satu, mengikuti ruang yang tersedia —
   bukan langsung menumpuk semuanya. */
/* Diukur terhadap KARTU, bukan layar. Inilah yang membuat formulir tetap
   rapi saat kartunya sempit meskipun layarnya lebar. */
@container mkform (max-width:640px){
  .mk-row3,.mk-row3:has(#edCur){grid-template-columns:minmax(0,.75fr) minmax(0,1fr);}
  .mk-row3 > *:nth-child(3){grid-column:1 / -1}
}
@container mkform (max-width:430px){
  .mk-row3,.mk-row3:has(#edCur){grid-template-columns:minmax(0,1fr);}
  .mk-row3 > *:nth-child(3){grid-column:auto}
  .mk-geo-row{flex-wrap:wrap}
  .mk-unit{flex:1 1 100%}
}

/* Cadangan untuk peramban yang belum mendukung container query: ukur layar,
   yang setidaknya benar saat jendelanya memang sempit. */
@supports not (container-type: inline-size){
  @media (max-width:820px){
    .mk-row3,.mk-row3:has(#edCur){grid-template-columns:minmax(0,1fr);}
  }
}

/* Input tanggal-waktu punya lebar bawaan besar dari peramban dan menolak
   menyempit. Tanpa aturan ini, satu kolom tanggal mendorong seluruh baris
   keluar dari wadahnya. */
input[type="datetime-local"],input[type="date"],input[type="time"]{
  width:100%;min-width:0;box-sizing:border-box}
/* Harga varian: boleh menyusut, tetapi tetap cukup untuk angka ribuan. */
.mk-price-w{flex:0 1 104px;min-width:72px}
@media (max-width:720px){ .mk-price-w{flex:0 1 84px;min-width:64px} }

/* Nilai yang hanya ditampilkan (bukan diatur di tempat ini). Dibuat mirip
   kolom isian agar sejajar dengan tetangganya, tetapi jelas tidak dapat
   diubah — supaya tidak ada yang mencoba mengaturnya di dua tempat. */
.mk-mirror{padding:11px 13px;border-radius:12px;border:1px dashed rgba(26,58,46,.22);
  background:rgba(26,58,46,.04);font-size:14px;font-weight:600;color:#5C6B63}
@media (prefers-color-scheme: dark){
  .mk-mirror{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#9FB0A7}
}

/* Gerak masuk dari tepi kanan. Arahnya memberi tahu ke mana panel akan
   pergi saat ditutup — orang tidak perlu mencari tombol tutupnya. */
@keyframes mkSlide{from{transform:translateX(100%)}to{transform:none}}

/* Judul menempel di atas saat menggulir: pada formulir sepanjang ini,
   tombol tutup yang ikut hilang ke atas membuat orang merasa terjebak. */
.mk-mcard h2{position:sticky;top:-26px;z-index:5;margin:-26px -28px 18px;
  padding:22px 28px 14px;background:#fff;
  border-bottom:1px solid rgba(26,58,46,.10)}

/* Di layar kecil panel mengambil seluruh lebar dan naik dari bawah —
   arah yang lebih wajar untuk ibu jari. */
@media (max-width:640px){
  .mk-modal{align-items:flex-end;justify-content:center}
  .mk-mcard{width:100vw;height:94vh;height:94dvh;
    border-radius:20px 20px 0 0;
    padding:22px 18px calc(36px + env(safe-area-inset-bottom,0px));
    animation:mkUp .28s cubic-bezier(.22,.9,.28,1)}
  .mk-mcard h2{top:-22px;margin:-22px -18px 16px;padding:18px 18px 12px}
}
@keyframes mkUp{from{transform:translateY(100%)}to{transform:none}}

@media (prefers-color-scheme: dark){
  .mk-mcard h2{background:#171F1B;border-bottom-color:rgba(255,255,255,.10)}
}

/* ═══════════════ Kalender sewa ═══════════════ */
.bk-card{padding:16px;border-radius:18px;border:1px solid rgba(26,58,46,.14);
  background:#fff;margin-bottom:14px}
.bk-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.bk-nav b{font:700 14px 'Inter',system-ui,sans-serif}
.bk-arrow{width:32px;height:32px;border:1px solid rgba(26,58,46,.14);border-radius:10px;
  background:transparent;font-size:17px;line-height:1;color:#5C6B63;cursor:pointer;
  display:grid;place-items:center;transition:all .13s}
.bk-arrow:hover{border-color:#2F8F6E;color:#1A3A2E}

/* pemilih unit */
.bk-units{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.bk-unit{padding:6px 12px;border-radius:99px;border:1px solid rgba(26,58,46,.14);
  background:transparent;font:600 11.5px 'Inter',system-ui,sans-serif;color:#5C6B63;cursor:pointer}
.bk-unit i{font-style:normal;opacity:.6;font-weight:500}
.bk-unit:hover{border-color:#2F8F6E}
.bk-unit.on{background:#1A3A2E;border-color:#1A3A2E;color:#fff}

.bk-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.bk-dow{text-align:center;font:700 9.5px 'Inter',system-ui,sans-serif;color:#8B968F;
  padding-bottom:5px;letter-spacing:.05em}
.bk-pad{aspect-ratio:1}
.bk-day{position:relative;aspect-ratio:1;border:0;border-radius:11px;cursor:pointer;
  font:600 12.5px 'Inter',system-ui,sans-serif;color:#1C2621;
  background:rgba(47,143,110,.13);display:grid;place-items:center;
  transition:transform .12s,background .15s}
.bk-day:hover:not([disabled]){transform:scale(1.08);background:rgba(47,143,110,.28)}
.bk-day.part{background:rgba(180,116,30,.24)}
.bk-day.full{background:rgba(26,58,46,.20);color:#8B968F;cursor:not-allowed}
.bk-day.off{background:repeating-linear-gradient(45deg,rgba(120,120,120,.14),
  rgba(120,120,120,.14) 4px,transparent 4px,transparent 8px);color:#A8B2AC;cursor:not-allowed}
.bk-day.past{background:transparent;color:#C7CFCA;cursor:not-allowed}
.bk-day.sel{background:#1A3A2E !important;color:#fff;transform:scale(1.04)}
.bk-day.open{box-shadow:0 0 0 2px #2F8F6E}
/* Sisa unit ditulis kecil di sudut: sekilas terlihat mana yang mulai menipis. */
.bk-dot{position:absolute;top:3px;right:4px;font:700 8.5px 'Inter',system-ui,sans-serif;
  font-style:normal;opacity:.65}
.bk-day.sel .bk-dot{opacity:.9}

/* panel jam */
.bk-hours{margin-top:14px;padding:14px;border-radius:14px;
  background:rgba(26,58,46,.04);border:1px solid rgba(26,58,46,.10)}
.bk-hours-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.bk-hours-hd b{font:700 12.5px 'Inter',system-ui,sans-serif}
.bk-close{border:0;background:transparent;color:#8B968F;font-size:13px;cursor:pointer;padding:2px 4px}
.bk-hrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:5px}
.bk-hr{padding:9px 4px;border:0;border-radius:9px;background:rgba(47,143,110,.13);
  font:600 11.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:#1C2621;cursor:pointer;
  transition:all .13s}
.bk-hr:hover:not([disabled]){background:rgba(47,143,110,.3)}
.bk-hr.full{background:rgba(26,58,46,.16);color:#9AA5A0;cursor:not-allowed;
  text-decoration:line-through}
.bk-hr.past{background:transparent;color:#C7CFCA;cursor:not-allowed}
.bk-hr.sel{background:#1A3A2E;color:#fff}

.bk-dur{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;
  border-top:1px solid rgba(26,58,46,.10);flex-wrap:wrap}
.bk-dur > span{font:600 11px 'Inter',system-ui,sans-serif;color:#8B968F;
  text-transform:uppercase;letter-spacing:.06em}
.bk-dur-btns{display:flex;gap:5px;flex-wrap:wrap}
.bk-durb{padding:7px 12px;border-radius:9px;border:1px solid rgba(26,58,46,.14);
  background:transparent;font:600 11.5px 'Inter',system-ui,sans-serif;color:#5C6B63;cursor:pointer}
.bk-durb:hover:not([disabled]){border-color:#2F8F6E}
.bk-durb.on{background:#2F8F6E;border-color:#2F8F6E;color:#fff}
.bk-durb[disabled]{opacity:.35;cursor:not-allowed}

.bk-pick{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(26,58,46,.10);flex-wrap:wrap}
.bk-pick-tx{flex:1;min-width:0}
.bk-pick-tx b{display:block;font-size:13.5px;color:#1C2621}
.bk-pick-tx span{font-size:11.5px;color:#8B968F}
.bk-pick .po-btn{flex:0 0 auto;padding:10px 20px}
.bk-hint{margin:14px 0 0;font-size:11.5px;color:#8B968F;line-height:1.55}
.bk-legend{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;
  padding-top:12px;border-top:1px solid rgba(26,58,46,.08);font-size:10.5px;color:#8B968F}
.bk-legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:3px}
.bk-legend i.free{background:rgba(47,143,110,.3)}
.bk-legend i.part{background:rgba(180,116,30,.4)}
.bk-legend i.full{background:rgba(26,58,46,.3)}
.bk-legend i.off{background:repeating-linear-gradient(45deg,rgba(120,120,120,.3),
  rgba(120,120,120,.3) 2px,transparent 2px,transparent 4px)}

/* ── daftar unit di editor ── */
.mk-units{margin-top:14px;padding-top:14px;border-top:1px solid rgba(26,58,46,.10)}
.mk-units-hd{margin-bottom:10px}
.mk-units-hd b{display:block;font-size:13px;font-weight:700}
.mk-units-hd i{font-style:normal;font-size:11.5px;color:#8B968F}
.mk-units-empty{margin:0 0 10px;font-size:11.5px;color:#8B968F;line-height:1.6}
.mk-unit-row{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.mk-unit-n{flex:0 0 22px;text-align:center;font:700 11px ui-monospace,monospace;color:#8B968F}
.mk-unit-l{flex:1 1 0;min-width:0}
.mk-unit-c{flex:0 1 130px;min-width:80px}
.mk-unit-row input{padding:9px 11px;border-radius:10px;border:1px solid rgba(26,58,46,.14);
  background:#fff;font-size:13px;outline:none}
.mk-unit-row input:focus{border-color:#2F8F6E}
.mk-unit-x{flex:0 0 auto;width:30px;height:30px;border:0;border-radius:9px;
  background:transparent;color:#B06060;cursor:pointer;font-size:12px}
.mk-unit-x:hover{background:rgba(200,80,80,.10)}
.mk-unit-add{margin-top:4px;padding:8px 14px;border-radius:10px;
  border:1px dashed rgba(26,58,46,.22);background:transparent;
  font:600 12px 'Inter',system-ui,sans-serif;color:#2F8F6E;cursor:pointer}
.mk-unit-add:hover{border-color:#2F8F6E;background:rgba(47,143,110,.05)}

@media (prefers-color-scheme: dark){
  .bk-card,.mk-unit-row input{background:#171F1B;border-color:rgba(255,255,255,.10)}
  .bk-day,.bk-hr{color:#E5EDE8}
  .bk-nav b,.bk-pick-tx b,.mk-units-hd b{color:#E5EDE8}
  .bk-unit.on,.bk-day.sel,.bk-hr.sel{background:#5BAD8F;color:#0F1512}
  .bk-hours{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
}
@container mkform (max-width:430px){
  .mk-unit-c{flex:1 1 100%;min-width:0}
  .mk-unit-row{flex-wrap:wrap}
}

/* ── Mode pemilik: menandai libur ── */
.bk-owner{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.bk-mode{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:99px;
  border:1px solid rgba(26,58,46,.16);background:transparent;cursor:pointer;
  font:600 11.5px 'Inter',system-ui,sans-serif;color:#5C6B63;transition:all .14s}
.bk-mode svg{width:13px;height:13px}
.bk-mode:hover{border-color:#B4741E;color:#B4741E}
.bk-mode.on{background:#B4741E;border-color:#B4741E;color:#fff}
.bk-owner-hint{font-size:11px;color:#8B968F;flex:1;min-width:150px}
/* Saat menandai, hari tertutup tetap terlihat dapat diklik. */
.bk-mode.on ~ .bk-grid .bk-day.off{cursor:pointer;opacity:.9}
.bk-dur-max{align-self:center;font-size:10.5px;color:#8B968F;margin-left:4px}

@media (prefers-color-scheme: dark){
  .bk-mode{border-color:rgba(255,255,255,.14);color:#9FB0A7}
}

/* ═══════════ Antar ke lokasi ═══════════ */
.bk-dest{margin-top:14px;padding:14px;border-radius:14px;
  background:rgba(26,58,46,.04);border:1px solid rgba(26,58,46,.10)}
.bk-dest-hd{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.bk-dest-hd b{font:700 12.5px 'Inter',system-ui,sans-serif}
.bk-req,.bk-opt{font:700 9px 'Inter',system-ui,sans-serif;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 7px;border-radius:99px}
.bk-req{background:rgba(180,60,60,.14);color:#B04040}
.bk-opt{background:rgba(26,58,46,.08);color:#8B968F}
.bk-dest-note{margin:0 0 10px;font-size:11.5px;color:#8B968F;line-height:1.55}
.bk-dest-row{display:flex;gap:6px;margin-bottom:9px}
.bk-dest-row input{flex:1 1 0;min-width:0;padding:10px 12px;border-radius:11px;
  border:1px solid rgba(26,58,46,.14);background:#fff;font-size:13px;outline:none}
.bk-dest-row input:focus{border-color:#2F8F6E}
.bk-dest-btn{flex:0 0 auto;padding:10px 14px;border-radius:11px;
  border:1px solid rgba(26,58,46,.14);background:#fff;cursor:pointer;
  font:600 12px 'Inter',system-ui,sans-serif;color:#5C6B63}
.bk-dest-btn:hover{border-color:#2F8F6E;color:#1A3A2E}
/* SVG tanpa lebar eksplisit dirender peramban pada ukurannya sendiri
   (300x150) dan terpotong oleh tombol — tampak seperti tidak ada ikon. */
.bk-dest-btn svg{width:15px;height:15px;display:block}
.bk-dest-btn{display:inline-flex;align-items:center;justify-content:center}
.bk-dest textarea{width:100%;margin-top:9px;padding:10px 12px;border-radius:11px;
  border:1px solid rgba(26,58,46,.14);background:#fff;font-size:12.5px;
  resize:vertical;min-height:44px;outline:none;font-family:inherit}
.bk-dest textarea:focus{border-color:#2F8F6E}

/* Biaya jarak ditampilkan lengkap dengan asal angkanya — tarif yang muncul
   tanpa penjelasan selalu terasa mengada-ada. */
.bk-dest-calc{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;
  background:rgba(47,143,110,.10);flex-wrap:wrap}
.bk-dest-calc.over{background:rgba(180,60,60,.10)}
.bk-km{font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#2F8F6E}
.bk-dest-calc.over .bk-km{color:#B04040}
.bk-fee{margin-left:auto;text-align:right}
.bk-fee b{display:block;font-size:14px;color:#1C2621}
.bk-fee i{font-style:normal;font-size:10.5px;color:#8B968F}
.bk-over{margin-left:auto;font:600 11.5px 'Inter',system-ui,sans-serif;color:#B04040}

/* ═══════════ Daftar pemesanan ═══════════ */
.bl-card{padding:16px;border-radius:18px;border:1px solid rgba(26,58,46,.14);
  background:#fff;margin-bottom:14px}
.bl-hd{display:flex;align-items:center;gap:9px;margin-bottom:12px;
  padding-bottom:10px;border-bottom:1px solid rgba(26,58,46,.08)}
.bl-hd b{font:700 13px 'Inter',system-ui,sans-serif}
.bl-hd span{margin-left:auto;font:700 11px ui-monospace,monospace;color:#8B968F}
.bl-empty{padding:22px 14px;text-align:center;font-size:12px;color:#8B968F}
.bl-row{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid rgba(26,58,46,.06)}
.bl-row:last-child{border-bottom:0}
.bl-main{flex:1;min-width:0}
.bl-top{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.bl-top b{font-size:13px}
.bl-st{font:700 9px 'Inter',system-ui,sans-serif;letter-spacing:.07em;
  text-transform:uppercase;padding:2px 8px;border-radius:99px}
.bl-st.wait{background:rgba(180,116,30,.15);color:#B4741E}
.bl-st.ok{background:rgba(47,143,110,.15);color:#2F8F6E}
.bl-st.done{background:rgba(26,58,46,.10);color:#5C6B63}
.bl-st.off{background:rgba(180,60,60,.12);color:#B04040}
.bl-who{font-size:12px;color:#5C6B63}
.bl-code{font:600 10.5px ui-monospace,monospace;color:#8B968F;margin-top:2px}
.bl-dest{display:flex;align-items:flex-start;gap:6px;margin-top:6px;font-size:12px;color:#5C6B63}
.bl-dest svg{width:13px;height:13px;flex:0 0 auto;margin-top:2px;color:#2F8F6E}
.bl-dest i{font-style:normal;flex:0 0 auto;font:600 10.5px ui-monospace,monospace;color:#2F8F6E}
.bl-note{margin-top:5px;padding:7px 10px;border-radius:9px;background:rgba(26,58,46,.04);
  font-size:11.5px;color:#5C6B63;line-height:1.5}
.bl-act{display:flex;flex-direction:column;gap:5px;flex:0 0 auto}
.bl-btn{padding:6px 12px;border-radius:9px;border:1px solid rgba(26,58,46,.14);
  background:transparent;cursor:pointer;font:600 11px 'Inter',system-ui,sans-serif;
  color:#5C6B63;text-decoration:none;text-align:center;white-space:nowrap}
.bl-btn:hover{border-color:#2F8F6E;color:#1A3A2E}
.bl-btn.ok{background:#2F8F6E;border-color:#2F8F6E;color:#fff}
.bl-btn.off{color:#B04040;border-color:rgba(180,60,60,.25)}

@media (prefers-color-scheme: dark){
  .bl-card,.bk-dest-row input,.bk-dest-btn,.bk-dest textarea{background:#171F1B;
    border-color:rgba(255,255,255,.10)}
  .bk-dest{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
  .bl-hd b,.bl-top b,.bk-fee b{color:#E5EDE8}
}
@container mkform (max-width:430px){
  .bl-row{flex-wrap:wrap}
  .bl-act{flex-direction:row;width:100%}
}

/* ── Dua titik perjalanan ── */
.bk-route{position:relative}
.bk-route-line{position:absolute;left:11px;top:34px;bottom:34px;width:2px;
  background:linear-gradient(180deg,#2F8F6E,#B4741E);opacity:.4}
.bk-pt{display:flex;gap:10px;margin-bottom:10px}
.bk-pt-ic{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:9px;margin-top:20px;background:rgba(26,58,46,.10);color:#8B968F;z-index:1}
.bk-pt.ok .bk-pt-ic.Pick{background:#2F8F6E;color:#fff}
.bk-pt.ok .bk-pt-ic.Dest{background:#B4741E;color:#fff}
.bk-pt-in{flex:1;min-width:0}
.bk-pt-in label{display:block;font:600 10.5px 'Inter',system-ui,sans-serif;
  color:#8B968F;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.bk-dest-hint{margin:8px 0 0;font-size:11.5px;color:#8B968F;line-height:1.5}

/* rute pada daftar pemesanan */
.bl-route{position:relative;margin-top:7px}
.bl-rt{display:flex;align-items:flex-start;gap:7px;font-size:12px;color:#5C6B63}
.bl-rt + .bl-rt{margin-top:6px}
.bl-rt-ic{flex:0 0 14px;height:14px;border-radius:50%;display:grid;place-items:center;
  font-size:7px;margin-top:2px;color:#fff;z-index:1}
.bl-rt-ic.pick{background:#2F8F6E}
.bl-rt-ic.drop{background:#B4741E}
.bl-rt i{font-style:normal;flex:0 0 auto;font:600 10.5px ui-monospace,monospace;color:#2F8F6E}
.bl-rt-line{position:absolute;left:6px;top:16px;height:calc(100% - 30px);width:2px;
  background:linear-gradient(180deg,#2F8F6E,#B4741E);opacity:.35}

/* ═══════════ Peta tersemat pada panel ═══════════
   Peta ditampilkan langsung, bukan disembunyikan di balik tombol. Penanda
   diam di tengah dan petanya yang bergeser — titik yang dipilih selalu
   yang di tengah kotak, tanpa perlu dijelaskan. */
/* Lebih tinggi daripada semula: menaruh titik dengan tepat memerlukan
   ruang, dan pada kotak pendek satu gerakan jari sudah bergeser puluhan
   meter. */
/* Latar terang, bukan gelap. Bila ada petak yang belum termuat, celahnya
   menyatu dengan warna peta alih-alih tampak sebagai pita hitam. */
.bk-mini{position:relative;height:300px;margin-top:9px;border-radius:13px;
  overflow:hidden;background:#E9EDE8;border:1px solid rgba(26,58,46,.14);
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  transition:height .18s ease-out}

/* Mode besar: peta yang sama memenuhi layar. Tidak ada jendela baru, tidak
   ada keadaan yang perlu dipindahkan — hanya ukurannya yang berubah. */
/* Dipindahkan ke tingkat halaman saat membesar, jadi tidak ada wadah yang
   mengurungnya. Angka setinggi apa pun tidak menolong bila elemennya
   terkurung di dalam konteks penumpukan lain. */
.bk-mini.big{position:fixed;inset:0;z-index:9000;height:auto;margin:0;
  border-radius:0;border:0;transition:none;max-width:none}
.bk-mini-anchor{display:none}

/* Alamat dan tombol simpan ikut ke dalam peta: pada layar penuh, panel di
   belakangnya tidak terlihat lagi. */
.bk-big-foot{position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding:16px;background:linear-gradient(to top,rgba(10,16,13,.94),rgba(10,16,13,.75) 70%,transparent);
  display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.bk-big-addr{flex:1;min-width:170px;font-size:13px;line-height:1.5;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.bk-big-btns{display:flex;gap:8px;flex:0 0 auto}
.bk-big-cancel{padding:13px 18px;border:0;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;
  font:600 13px 'Inter',system-ui,sans-serif}
.bk-big-cancel:hover{background:rgba(255,255,255,.26)}
.bk-big-ok{padding:13px 24px;border:0;border-radius:12px;cursor:pointer;
  background:#2F8F6E;color:#fff;font:700 13.5px 'Inter',system-ui,sans-serif}
.bk-big-ok:hover{background:#37A37E}
.bk-mini.big .bk-mini-hint{bottom:auto;top:16px}
@media (max-width:520px){
  .bk-big-btns{flex:1}
  .bk-big-ok{flex:1}
}
.bk-mini.big .bk-mini-z{right:16px;top:16px}
.bk-mini.big .bk-mini-z button{width:44px;height:44px;font-size:20px}
.bk-mini.big .bk-mini-big,.bk-mini.big .bk-mini-open{width:44px;height:44px}
.bk-mini.big .bk-mini-big svg,.bk-mini.big .bk-mini-open svg{width:18px;height:18px}
.bk-mini.big .bk-mini-hint{font-size:12px;padding:8px 16px}
.bk-mini.big .bk-mini-pin{width:34px;height:34px}
.bk-mini.drag{cursor:grabbing}
.bk-mini-tiles{position:absolute;inset:0;will-change:transform}
/* 257px, bukan 256: tepi petak saling bertumpang satu piksel sehingga
   tidak ada celah yang menampilkan latar gelap sebagai garis. */
.bk-mini-tiles img{position:absolute;width:257px;height:257px;
  pointer-events:none;-webkit-user-drag:none}
.bk-mini-pin{position:absolute;left:50%;top:50%;width:26px;height:26px;z-index:2;
  transform:translate(-50%,-100%);pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.4))}
.bk-mini-pin::before{content:'';position:absolute;inset:0;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#2F8F6E}
.bk-mini-pin.dest::before{background:#B4741E}
.bk-mini-pin::after{content:'';position:absolute;left:50%;top:8px;
  width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#fff}
.bk-mini-z{position:absolute;right:9px;top:9px;z-index:3;display:flex;flex-direction:column;gap:5px}
.bk-mini-z button{width:32px;height:32px;border:0;border-radius:9px;cursor:pointer;
  background:rgba(15,21,18,.82);color:#fff;font-size:16px;line-height:1;
  display:grid;place-items:center;backdrop-filter:blur(5px)}
.bk-mini-z button:hover{background:rgba(15,21,18,.95)}
.bk-mini-hint{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:2;
  padding:5px 12px;border-radius:99px;background:rgba(15,21,18,.75);
  backdrop-filter:blur(5px);color:rgba(255,255,255,.82);
  font:600 10px 'Inter',system-ui,sans-serif;white-space:nowrap;pointer-events:none}

/* ═══════════ Nama & kontak ═══════════ */
.bk-contact{margin-top:14px;padding:14px;border-radius:14px;
  background:rgba(26,58,46,.04);border:1px solid rgba(26,58,46,.10)}
.bk-contact-hd{margin-bottom:9px}
.bk-contact-hd b{display:block;font:700 12.5px 'Inter',system-ui,sans-serif}
.bk-contact-hd span{font-size:11px;color:#8B968F}
.bk-contact-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bk-contact-row input{padding:10px 12px;border-radius:11px;border:1px solid rgba(26,58,46,.14);
  background:#fff;font-size:13px;outline:none;min-width:0}
.bk-contact-row input:focus{border-color:#2F8F6E}

/* ═══════════ Tiket pemesanan ═══════════ */
.bt-wrap{position:fixed;inset:0;z-index:420;background:rgba(24,38,32,.5);
  backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;
  padding:18px;overflow-y:auto;animation:mkFade .2s ease-out}
.bt-card{position:relative;width:min(380px,100%);background:#fff;border-radius:20px;
  padding:26px 24px;text-align:center;box-shadow:0 24px 70px rgba(24,42,34,.3)}
.bt-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border:0;border-radius:99px;
  background:rgba(20,40,30,.07);color:#33463d;cursor:pointer;font-size:13px}
.bt-hd span{display:block;font:700 9.5px 'Inter',system-ui,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:#8B968F;margin-bottom:4px}
.bt-hd b{display:block;font:700 16px Fraunces,serif;margin-bottom:16px}
.bt-qr{display:inline-block;padding:10px;border-radius:14px;background:#fff;
  border:1px solid rgba(26,58,46,.10)}
.bt-qr svg{width:170px;height:170px;display:block}
.bt-noqr{width:170px;height:170px;display:grid;place-items:center;
  font:700 15px ui-monospace,monospace;color:#1A3A2E}
.bt-code{margin:12px 0 4px;font:700 19px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;color:#1A3A2E}
.bt-rows{margin:16px 0 0;text-align:left}
.bt-rows div{margin-bottom:10px}
.bt-rows dt{font:600 9.5px 'Inter',system-ui,sans-serif;letter-spacing:.07em;
  text-transform:uppercase;color:#8B968F;margin-bottom:2px}
.bt-rows dd{margin:0;font-size:13px;line-height:1.45;color:#1C2621}
.bt-hint{margin:14px 0 0;font-size:11.5px;color:#8B968F}
.bt-used{margin-top:14px;padding:9px 12px;border-radius:10px;
  background:rgba(47,143,110,.12);font:600 11.5px 'Inter',system-ui,sans-serif;color:#2F8F6E}
.bt-print{margin-top:16px;width:100%;padding:11px;border-radius:12px;
  border:1px solid rgba(26,58,46,.14);background:transparent;cursor:pointer;
  font:600 12.5px 'Inter',system-ui,sans-serif;color:#5C6B63}
.bt-print:hover{border-color:#2F8F6E;color:#1A3A2E}

@media (prefers-color-scheme: dark){
  .bt-card,.bk-contact-row input{background:#171F1B}
  .bt-hd b,.bt-rows dd,.bt-code{color:#E5EDE8}
  .bk-contact{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
  .bk-contact-row input{border-color:rgba(255,255,255,.10)}
}
@container mkform (max-width:430px){ .bk-contact-row{grid-template-columns:1fr} }

/* ── Pembayaran & penilaian pada daftar pemesanan ── */
.bl-pay{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
.bl-pay-st{font:700 9px 'Inter',system-ui,sans-serif;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 9px;border-radius:99px}
.bl-pay-st.un{background:rgba(180,60,60,.12);color:#B04040}
.bl-pay-st.pa{background:rgba(180,116,30,.15);color:#B4741E}
.bl-pay-st.ok{background:rgba(47,143,110,.15);color:#2F8F6E}
.bl-pay-when{font-size:11px;color:#8B968F}
.bl-pay-amt{font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace;color:#5C6B63}
.bl-btn.sm{padding:4px 10px;font-size:10.5px}

.bl-rate{display:flex;align-items:center;gap:7px;margin-top:7px;flex-wrap:wrap;
  padding-top:7px;border-top:1px dashed rgba(26,58,46,.10)}
.bl-stars{font-size:12px;color:#B4741E;letter-spacing:1px}
.bl-stars.them{color:#2F8F6E}
.bl-rate i{font-style:normal;font-size:10.5px;color:#8B968F}
.bl-rate em{flex:1 1 100%;font-style:normal;font-size:11.5px;color:#5C6B63;
  padding:6px 10px;border-radius:8px;background:rgba(26,58,46,.04)}

/* Ikon di dalam tombol umum. Tanpa ukuran eksplisit, SVG dirender pada
   ukuran bawaannya (300x150) dan merusak tata letak tombol. */
.mk-btn svg{width:15px;height:15px;flex:0 0 auto}

/* ── Kontak dengan tombol hubungi ── */
.bl-who{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;color:#5C6B63}
.bl-who-n{font-weight:600;color:#1C2621}
.bl-who-p{font:600 11.5px ui-monospace,SFMono-Regular,Menlo,monospace}
.bl-who-p.none{color:#B0B8B4;font-style:italic}
.bl-wa,.bl-tel{width:26px;height:26px;flex:0 0 auto;border-radius:8px;
  display:grid;place-items:center;text-decoration:none;transition:all .13s}
.bl-wa{background:rgba(37,211,102,.14);color:#1EA952}
.bl-wa:hover{background:rgba(37,211,102,.26)}
.bl-tel{background:rgba(26,58,46,.08);color:#5C6B63}
.bl-tel:hover{background:rgba(47,143,110,.18);color:#2F8F6E}
.bl-wa svg,.bl-tel svg{width:14px;height:14px;display:block}

@media (prefers-color-scheme: dark){ .bl-who-n{color:#E5EDE8} }
.bk-mini-big{position:absolute;left:9px;top:9px;z-index:3;width:32px;height:32px;
  border:0;border-radius:9px;cursor:pointer;background:rgba(15,21,18,.82);color:#fff;
  display:grid;place-items:center;backdrop-filter:blur(5px)}
.bk-mini-big:hover{background:rgba(15,21,18,.95)}
.bk-mini-big svg{width:14px;height:14px;display:block}
.bk-mini.big .bk-mini-big svg{transform:rotate(180deg)}
.bk-mini-open{position:absolute;left:49px;top:9px;z-index:3;width:32px;height:32px;
  border:0;border-radius:9px;cursor:pointer;background:rgba(15,21,18,.82);color:#fff;
  display:grid;place-items:center;backdrop-filter:blur(5px)}
.bk-mini-open:hover{background:rgba(15,21,18,.95)}
.bk-mini-open svg{width:14px;height:14px;display:block}

/* Tombol unduh PDF pada panel samping */
.mk-pdf{width:100%;justify-content:center;margin-bottom:12px;text-decoration:none}
.mk-pdf svg{width:15px;height:15px;flex:0 0 auto}

/* ═══════════ Galeri di dalam kartu ═══════════ */
.mk-gal{position:absolute;inset:0;display:block;overflow:hidden}
.mk-gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .22s ease-out}
.mk-gal img.on{opacity:1}
/* Zona ketuk di kiri dan kanan foto. Lebih lebar dari yang terlihat supaya
   mudah dikenai jari, tetapi tidak menutupi tombol aksi di pojok. */
.mk-gal-zone{position:absolute;top:26%;bottom:22%;width:34%;z-index:2;cursor:pointer}
.mk-gal-zone.prev{left:0}
.mk-gal-zone.next{right:0}
.mk-gal-zone::after{content:'';position:absolute;top:50%;width:22px;height:22px;
  margin-top:-11px;border-radius:50%;background:rgba(15,21,18,.5);
  backdrop-filter:blur(4px);opacity:0;transition:opacity .16s}
.mk-gal-zone.prev::after{left:8px}
.mk-gal-zone.next::after{right:8px}
.mk-card-wrap:hover .mk-gal-zone::after{opacity:1}
.mk-gal-zone::before{content:'';position:absolute;top:50%;margin-top:-4px;
  width:7px;height:7px;border-top:2px solid #fff;border-right:2px solid #fff;
  z-index:1;opacity:0;transition:opacity .16s}
.mk-gal-zone.prev::before{left:16px;transform:rotate(-135deg)}
.mk-gal-zone.next::before{right:16px;transform:rotate(45deg)}
.mk-card-wrap:hover .mk-gal-zone::before{opacity:1}
.mk-gal-dots{position:absolute;left:0;right:0;bottom:8px;z-index:2;
  display:flex;justify-content:center;gap:4px;pointer-events:none}
.mk-gal-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5);
  box-shadow:0 1px 2px rgba(0,0,0,.3);transition:all .18s}
.mk-gal-dots i.on{background:#fff;width:14px;border-radius:99px}

/* ═══════════ Kontak utama pada kartu ═══════════ */

/* Foto diperbesar hampir dua kali lipat. Pada 24px wajah orang hanya jadi
   bulatan berwarna — tidak ada gunanya menampilkannya sama sekali. */
.mk-owner-av{width:42px;height:42px;flex:0 0 auto;border-radius:50%;object-fit:cover;
  background:#E8F2ED;border:2px solid #fff;
  box-shadow:0 2px 8px rgba(20,45,32,.14)}
.mk-owner-ini{display:grid;place-items:center;font:800 17px 'Fraunces',Georgia,serif;color:#1A3A2E;background:linear-gradient(145deg,rgba(214,242,75,.5),rgba(91,173,143,.3))}
.mk-owner-n{flex:1;min-width:0;font-size:11.5px;font-weight:600;color:#5C6B63;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-owner-more{flex:0 0 auto;font-style:normal;font:700 9.5px 'Inter',system-ui,sans-serif;
  padding:2px 6px;border-radius:99px;background:rgba(26,58,46,.07);color:#8B968F}

/* Kontak utama ditonjolkan di daftar overlay */
.mk-cover-row.main{background:rgba(47,143,110,.09)}
.mk-cover-av{width:26px;height:26px;flex:0 0 auto;border-radius:50%;object-fit:cover;
  margin-right:2px}
.mk-cover-name em{font-style:normal;font:700 8.5px 'Inter',system-ui,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;padding:1px 5px;border-radius:99px;
  background:rgba(47,143,110,.16);color:#2F8F6E;margin-left:5px}

@media (prefers-color-scheme: dark){
  .mk-owner-n{color:#9FB0A7}
  .mk-owner-ini{background:rgba(255,255,255,.08);color:#8FD3B6}
}

/* ═══════════════════════════════════════════════════════════
   Karakter warna.

   Hijau tua sudah ada tetapi dipakai tipis — untuk teks dan garis saja.
   Warna yang hanya muncul setipis itu tidak pernah menjadi ciri; orang
   mengenali sesuatu dari BIDANG warna, bukan dari garis 1px.

   Lime dipakai sebagai suara: menutupi bidang, jadi latar tombol utama,
   jadi penanda harga. Hijau tua tetap jadi dasar dan warna teks di atasnya
   — pasangan itu memberi kontras kuat tanpa perlu warna ketiga.
   ═══════════════════════════════════════════════════════════ */
:root{
  --mk-lime:#D6F24B;          /* suara: berani, terlihat dari jauh */
  --mk-lime-d:#C2E22F;        /* saat disentuh */
  --mk-ink:#132A21;           /* teks di atas lime — hijau tua, bukan hitam */
}

/* ── Harga: bidang lime, bukan sekadar teks hijau ── */
.mk-price{display:inline-block;padding:3px 9px;border-radius:7px;
  background:var(--mk-lime);color:var(--mk-ink);
  font:800 15px 'Inter',system-ui,sans-serif;letter-spacing:-.01em}
.mk-price-was{margin-left:7px;font-size:12px;color:#9AA5A0}

/* ── Tombol utama ── */
.mk-btn.primary,.mk-post-btn{background:var(--mk-lime) !important;
  border-color:var(--mk-lime) !important;color:var(--mk-ink) !important;
  font-weight:700}
.mk-btn.primary:hover,.mk-post-btn:hover{background:var(--mk-lime-d) !important;
  border-color:var(--mk-lime-d) !important}

/* ── Penanda mode: kuat, bukan pucat ── */
.mk-mode{background:var(--mk-lime);color:var(--mk-ink);font-weight:800}
.mk-mode.rent{background:#1A3A2E;color:var(--mk-lime)}
.mk-kindtag.don{background:var(--mk-lime);color:var(--mk-ink)}

/* ── Diskon: satu-satunya tempat merah dibenarkan ── */
.mk-disc-corner{background:#E8442F;color:#fff;font-weight:800}

/* ── Saringan aktif ── */
.mk-cats a.on,.mk-chip.on,.mk-tab.on{background:var(--mk-lime);
  border-color:var(--mk-lime);color:var(--mk-ink);font-weight:700}

/* ── Kaki kartu: siapa penjualnya, dan dua cara menghubunginya ── */

.mk-owner-n{display:flex;align-items:center;gap:6px}
.mk-owner-acts{margin-left:auto;display:flex;gap:6px;flex:0 0 auto}
.mk-oa{width:30px;height:30px;border:0;border-radius:9px;cursor:pointer;
  display:grid;place-items:center;text-decoration:none;transition:all .14s}
.mk-oa svg{width:15px;height:15px;display:block}
.mk-oa-call{background:var(--mk-lime);color:var(--mk-ink)}
.mk-oa-call:hover{background:var(--mk-lime-d);transform:translateY(-1px)}
.mk-oa-chat{background:#1A3A2E;color:var(--mk-lime)}
.mk-oa-chat:hover{background:#25503F;transform:translateY(-1px)}

/* Panah galeri kini punya jalur bebas: tombol aksi hanya dua dan tetap di
   atas, kontak turun ke kaki. */
.mk-card-quick{gap:8px}

/* ── Kartu: sedikit lebih tegas ── */
.mk-card{border-radius:16px;overflow:hidden;transition:transform .16s,box-shadow .16s}
.mk-card-wrap:hover .mk-card{transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(20,40,30,.13)}
.mk-card-title{font-weight:700;line-height:1.35}

@media (prefers-color-scheme: dark){
  .mk-price{background:var(--mk-lime);color:#0F1512}
  .mk-oa-chat{background:rgba(214,242,75,.14);color:var(--mk-lime)}
}

/* ═══════════ Kartu tiga dimensi ═══════════ */
.mk-card-wrap{perspective:900px}
.mk-card{transform-style:preserve-3d;
  transition:transform .28s cubic-bezier(.2,.8,.25,1),box-shadow .2s;
  will-change:transform}
.mk-card-wrap:hover .mk-card{box-shadow:0 14px 38px rgba(20,40,30,.16)}
/* Sorotan mengikuti kursor — memberi kesan permukaan, bukan gambar datar. */
.mk-card::after{content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;opacity:0;transition:opacity .22s;
  background:radial-gradient(320px circle at var(--gx,50%) var(--gy,50%),
    rgba(255,255,255,.22),transparent 62%)}
.mk-card-wrap:hover .mk-card::after{opacity:1}
/* Tombol di kaki ikut sedikit terangkat, supaya kartu terasa satu benda. */
.mk-card-owner{transition:transform .28s cubic-bezier(.2,.8,.25,1)}
.mk-card-wrap:hover .mk-card-owner{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){
  .mk-card,.mk-card-owner{transition:none}
  .mk-card::after{display:none}
}

/* ── Foto & penanda kontak utama di editor ── */
.mk-ct-extra{display:flex;align-items:center;gap:8px;margin-top:8px;
  padding-top:8px;border-top:1px dashed rgba(26,58,46,.12)}
.mk-ct-av{width:38px;height:38px;flex:0 0 auto;border-radius:50%;cursor:pointer;
  border:1px dashed rgba(26,58,46,.24);background:rgba(26,58,46,.04);
  display:grid;place-items:center;color:#8B968F;overflow:hidden;padding:0}
.mk-ct-av:hover{border-color:var(--mk-lime);color:#2F8F6E}
.mk-ct-av svg{width:17px;height:17px}
.mk-ct-av.has{border-style:solid;border-color:var(--mk-lime)}
.mk-ct-av img{width:100%;height:100%;object-fit:cover;display:block}
.mk-ct-avx{width:22px;height:22px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(200,80,80,.12);color:#B04040;font-size:10px;
  display:grid;place-items:center;margin-left:-6px;align-self:flex-start}
.mk-ct-main{display:flex;align-items:center;gap:6px;margin-left:auto;
  font-size:11.5px;color:#5C6B63;cursor:pointer}
.mk-ct-main input{width:15px;height:15px;accent-color:#2F8F6E}

/* Tombol hubungi di kaki kartu. WhatsApp memakai warna resminya — orang
   mengenalinya tanpa membaca, dan mengubahnya justru memperlambat. */
.mk-oa-wa{background:#25D366;color:#fff}
.mk-oa-wa:hover{background:#1FB855;transform:translateY(-1px)}
.mk-oa-call{background:var(--mk-lime);color:var(--mk-ink)}
.mk-oa-call:hover{background:var(--mk-lime-d);transform:translateY(-1px)}
.mk-oa-more{background:rgba(26,58,46,.08);color:#5C6B63}
.mk-oa-more:hover{background:rgba(26,58,46,.14);color:#1A3A2E}
.mk-oa-more svg{width:14px;height:14px}

/* ═══════════════════════════════════════════════════════════
   Warna yang sama di halaman detail.

   Daftar dan detail adalah satu tempat yang sama; warna yang berubah di
   tengah jalan membuat orang merasa berpindah aplikasi. Lime yang menandai
   harga di kartu harus menandai harga di sini juga.
   ═══════════════════════════════════════════════════════════ */

/* Harga besar: bidang lime, sama seperti di kartu tetapi berskala. */
.mk-price-big{display:inline-block;padding:6px 14px;border-radius:11px;
  background:var(--mk-lime);color:var(--mk-ink);
  font:800 clamp(19px,3vw,26px)/1.15 'Inter',system-ui,sans-serif;
  letter-spacing:-.02em}
.mk-price-og{margin-left:9px;font-size:14px;color:#9AA5A0}
.mk-sb-price{color:var(--mk-ink);font-weight:800}

/* Tombol utama di halaman detail */
.mk-cta{background:var(--mk-lime) !important;border-color:var(--mk-lime) !important;
  color:var(--mk-ink) !important;font-weight:700}
.mk-cta:hover{background:var(--mk-lime-d) !important;border-color:var(--mk-lime-d) !important}
.mk-order-cta{background:var(--mk-lime);border-color:var(--mk-lime);color:var(--mk-ink);
  font-weight:700}
.mk-order-cta:hover{background:var(--mk-lime-d)}

/* Penanda */
.mk-order-badge{background:var(--mk-lime);color:var(--mk-ink);font-weight:800}
.mk-dono-badge{background:#1A3A2E;color:var(--mk-lime);font-weight:800}
.mk-disc-badge{background:#E8442F;color:#fff;font-weight:800}

/* Aksen pada panel: garis lime di sisi kiri menandai bagian penting tanpa
   menambah warna baru. */
.po-card{border-left:3px solid var(--mk-lime)}
.bk-card{border-left:3px solid var(--mk-lime)}
.po-badge{background:var(--mk-lime);color:var(--mk-ink)}
.po-meter i{background:linear-gradient(90deg,#1A3A2E,var(--mk-lime))}
.po-btn{background:#1A3A2E;color:var(--mk-lime)}
.po-btn:hover{background:var(--mk-lime);color:var(--mk-ink)}
.bk-day.sel{background:#1A3A2E !important;color:var(--mk-lime)}
.bk-unit.on{background:var(--mk-lime);border-color:var(--mk-lime);color:var(--mk-ink)}
.bk-hr.sel{background:var(--mk-lime);color:var(--mk-ink)}
.bk-durb.on{background:var(--mk-lime);border-color:var(--mk-lime);color:var(--mk-ink)}
.bk-big-ok,.mkpick-ok{background:var(--mk-lime);color:var(--mk-ink);font-weight:700}
.bk-big-ok:hover,.mkpick-ok:hover{background:var(--mk-lime-d)}
.bl-btn.ok{background:var(--mk-lime);border-color:var(--mk-lime);color:var(--mk-ink)}
.bl-st.ok{background:rgba(214,242,75,.3);color:var(--mk-ink)}
.bl-pay-st.ok{background:rgba(214,242,75,.35);color:var(--mk-ink)}

/* Bagian yang sedang dilihat pada daftar isi / tab detail */
.mk-dt-tab.on{background:var(--mk-lime);color:var(--mk-ink);font-weight:700}

@media (prefers-color-scheme: dark){
  .mk-price-big,.mk-sb-price{color:#0F1512}
  .po-btn{background:rgba(214,242,75,.16);color:var(--mk-lime)}
  .po-btn:hover{background:var(--mk-lime);color:#0F1512}
}

/* ═══════════════════════════════════════════════════════════
   Permukaan kaca.

   Latar yang hidup hanya berarti bila terlihat menembus. Panel dibuat
   semi-tembus dengan pengaburan di belakangnya — warna cair itu ikut
   bergerak samar di balik setiap kartu, dan halaman terasa satu lapisan
   yang utuh alih-alih kotak-kotak putih di atas gambar.

   Pengaburan mahal bagi peramban, jadi hanya dipakai pada permukaan besar
   yang jarang berubah — bukan pada elemen yang bergerak atau berulang
   ratusan kali.
   ═══════════════════════════════════════════════════════════ */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .mk-top{background:rgba(255,255,255,.72);
    backdrop-filter:blur(18px) saturate(1.4);
    -webkit-backdrop-filter:blur(18px) saturate(1.4);
    border-bottom:1px solid rgba(255,255,255,.6)}

  .mk-card{background:rgba(255,255,255,.80);
    backdrop-filter:blur(14px) saturate(1.3);
    -webkit-backdrop-filter:blur(14px) saturate(1.3);
    border:1px solid rgba(255,255,255,.72)}

  /* ── Kontak: mengambang di atas latar, bukan menempel di kartu ──
   Sebelumnya ia menempel di bawah kartu dengan sudut membulat hanya di
   bagian bawah, sehingga terlihat seperti potongan kedua dari kartu yang
   sama — dan kartunya jadi terasa terbelah dua.

   Sekarang ia lapisan tipis yang berdiri sendiri: membulat penuh, sedikit
   lebih sempit dari kartu, dengan jarak di antaranya. Yang menjelaskan
   hubungannya bukan garis penyambung, melainkan kedekatan. */
  .mk-card-owner{display:flex;align-items:center;gap:9px;
    margin:7px 6px 0;padding:9px 12px;
    background:rgba(255,255,255,.5);
    backdrop-filter:blur(16px) saturate(1.5);
    -webkit-backdrop-filter:blur(16px) saturate(1.5);
    border:1px solid rgba(255,255,255,.55);
    border-radius:16px;
    /* Bayangan sangat tipis: cukup untuk memisahkannya dari latar, tidak
       cukup untuk membuatnya tampak sebagai kotak tersendiri. */
    box-shadow:0 1px 3px rgba(20,45,32,.05),
               inset 0 1px 0 rgba(255,255,255,.5);
    transition:background .2s,transform .28s cubic-bezier(.2,.8,.25,1)}
  .mk-card-wrap:hover .mk-card-owner{background:rgba(255,255,255,.66)}

  .mk-cat,.mk-btn{background:rgba(255,255,255,.74);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-color:rgba(255,255,255,.7)}

  .mk-mcard{background:rgba(255,255,255,.88);
    backdrop-filter:blur(24px) saturate(1.4);
    -webkit-backdrop-filter:blur(24px) saturate(1.4)}

  .po-card,.bk-card,.bl-card{background:rgba(255,255,255,.74);
    backdrop-filter:blur(14px) saturate(1.25);
    -webkit-backdrop-filter:blur(14px) saturate(1.25)}
}

/* Kartu: bayangan lebih lembut agar tidak melawan latar yang terang. */
.mk-card{box-shadow:0 1px 2px rgba(20,45,32,.04),0 6px 20px rgba(20,45,32,.06)}
.mk-card-wrap:hover .mk-card{box-shadow:0 2px 4px rgba(20,45,32,.05),0 16px 40px rgba(20,45,32,.11)}

/* Tepi atas yang lebih terang meniru cahaya yang jatuh dari atas —
   detail kecil yang membuat permukaan terasa punya ketebalan. */
.mk-card::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9) 30%,
    rgba(255,255,255,.9) 70%,transparent);pointer-events:none;z-index:1}

/* Kaca hanya untuk mode terang. Pada mode gelap, permukaan tembus di atas
   latar gelap justru menghilangkan kontras yang dibutuhkan teks. */
@media (prefers-color-scheme:dark){
  body.market{background:linear-gradient(168deg,#0F1512 0%,#141C18 100%)}
  body.market::before{opacity:.45}
  body.market::after{opacity:.35}
  .mk-top,.mk-card,.mk-card-owner,.mk-cat,.mk-btn,.mk-mcard,
  .po-card,.bk-card,.bl-card{backdrop-filter:none;-webkit-backdrop-filter:none}
  .mk-card{background:#171F1B;border-color:rgba(255,255,255,.08)}
  .mk-card::before{display:none}
}

/* Latar hias tidak ikut tercetak: tinta terbuang dan teks jadi sulit
   dibaca di kertas. */
@media print{
  #mkParticles{display:none !important}
  body.market::before,body.market::after{display:none !important}
  body.market{background:#fff !important}
  .mk-top,.mk-card,.mk-mcard{backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;background:#fff !important}
}

/* Perangkat yang meminta hemat data juga tidak butuh hiasan bergerak. */
@media (prefers-reduced-data:reduce){
  #mkParticles{display:none}
  body.market::before,body.market::after{animation:none}
}

/* Kanvas memakai z-index -1 dan lapisan cair -2; keduanya sudah berada di
   belakang isi halaman tanpa perlu aturan lain.

   Sebelumnya di sini ada aturan yang memberi setiap anak body konteks
   penumpukannya sendiri. Itu mengurung modal dan lightbox yang berposisi
   tetap di dalamnya — jendela zoom gambar dan tombol sunting jadi tidak
   dapat diklik. */

/* ═══════════ Kontak pada halaman detail ═══════════
   Kontak utama diberi kartu sendiri selebar panel: satu wajah yang jelas
   lebih meyakinkan daripada baris nama dan nomor. Sisanya tetap ada di
   bawahnya, lebih ringkas — mereka pilihan, bukan yang utama. */
.mk-cmain{margin-top:10px;padding:14px;border-radius:15px;
  background:linear-gradient(150deg,rgba(214,242,75,.16),rgba(91,173,143,.08));
  border:1px solid rgba(26,58,46,.10)}
.mk-cmain-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
/* Foto selebar mungkin: wajah kecil tidak meyakinkan siapa pun. */
.mk-cmain-av{width:56px;height:56px;flex:0 0 auto;border-radius:50%;
  object-fit:cover;border:2px solid #fff;
  box-shadow:0 2px 10px rgba(20,45,32,.14);background:#E8F2ED}
.mk-cmain-ini{display:grid;place-items:center;
  font:800 22px 'Fraunces',Georgia,serif;color:#1A3A2E}
.mk-cmain-id{flex:1;min-width:0}
.mk-cmain-id b{display:block;font:700 15px 'Inter',system-ui,sans-serif;
  color:#1C2621;line-height:1.3}
.mk-cmain-id span{font:600 12.5px ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#5C6B63}
.mk-cmain-btns{display:flex;gap:8px}
.mk-cmain-b{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px;border-radius:12px;text-decoration:none;
  font:700 13px 'Inter',system-ui,sans-serif;transition:all .14s}
.mk-cmain-b svg{width:16px;height:16px;flex:0 0 auto}
.mk-cmain-b.wa{background:#25D366;color:#fff}
.mk-cmain-b.wa:hover{background:#1FB855;transform:translateY(-1px)}
.mk-cmain-b.call{background:#1A3A2E;color:var(--mk-lime)}
.mk-cmain-b.call:hover{background:#25503F;transform:translateY(-1px)}

.mk-clist{margin-top:12px;padding-top:12px;border-top:1px solid rgba(26,58,46,.09)}
.mk-clist-h{display:block;font:700 9.5px 'Inter',system-ui,sans-serif;
  letter-spacing:.09em;text-transform:uppercase;color:#8B968F;margin-bottom:8px}
.mk-crow{display:flex;align-items:center;gap:10px;padding:7px 0}
.mk-crow-av{width:32px;height:32px;flex:0 0 auto;border-radius:50%;
  object-fit:cover;background:#E8F2ED}
.mk-crow-ini{display:grid;place-items:center;font:700 13px 'Inter',system-ui,sans-serif;
  color:#1A3A2E}
.mk-crow-i{flex:1;min-width:0}
.mk-crow-i b{display:block;font-size:13px;font-weight:600;color:#1C2621}
.mk-crow-i span{font:600 11.5px ui-monospace,monospace;color:#8B968F}
.mk-crow-btns{display:flex;gap:5px;flex:0 0 auto}

@media (prefers-color-scheme:dark){
  .mk-cmain{background:linear-gradient(150deg,rgba(214,242,75,.10),rgba(91,173,143,.06));
    border-color:rgba(255,255,255,.09)}
  .mk-cmain-id b,.mk-crow-i b{color:#E5EDE8}
  .mk-cmain-av{border-color:#171F1B}
}

/* ═══════════ Kaki kartu, dirancang ulang ═══════════
   Foto lebih besar memerlukan ruang bernapas di sekelilingnya; kaki yang
   sempit membuatnya terlihat sesak alih-alih menonjol. */
.mk-card-owner{padding:11px 13px;gap:11px;margin:8px 6px 0}
.mk-owner-n{flex:1;min-width:0;display:flex;flex-direction:column;
  align-items:flex-start;gap:2px}
.mk-owner-n{font-size:13px;font-weight:700;color:#1C2621;line-height:1.25}
/* Label kecil di bawah nama menjelaskan perannya tanpa perlu ikon. */
.mk-owner-n::after{content:'Penjual';font:600 10px 'Inter',system-ui,sans-serif;
  color:#8B968F;letter-spacing:.02em}
.mk-owner-more{align-self:flex-start;margin-top:1px}
.mk-owner-acts{gap:7px}
.mk-oa{width:34px;height:34px;border-radius:11px}
.mk-oa svg{width:16px;height:16px}

/* Sedikit terangkat saat kursor di atas kartu — kaki dan kartu bergerak
   bersama sebagai satu benda. */
.mk-card-wrap:hover .mk-owner-av{transform:scale(1.05)}
.mk-owner-av{transition:transform .22s cubic-bezier(.2,.8,.25,1)}

@media (prefers-color-scheme:dark){
  .mk-owner-n{color:#E5EDE8}
  .mk-owner-av{border-color:#171F1B}
}
@container mkform (max-width:430px){
  .mk-owner-av{width:36px;height:36px}
}

/* ═══════════════════════════════════════════════════════════
   Harga.

   Ini elemen yang paling dicari mata saat memindai daftar, jadi ia berhak
   jadi yang paling terlihat. Bentuk singkat dibuat besar dan tebal; nilai
   penuh mengikuti di bawahnya dengan ukuran kecil — tersedia bagi yang
   membutuhkan angka pastinya, tanpa memperlambat yang tidak.
   ═══════════════════════════════════════════════════════════ */
.mk-price-row{display:flex;flex-direction:column;align-items:flex-start;gap:1px}

.mk-price{display:inline-flex;align-items:baseline;gap:5px;
  padding:5px 12px;border-radius:9px;
  background:var(--mk-lime);color:var(--mk-ink);
  font:800 19px/1.1 'Inter',system-ui,sans-serif;letter-spacing:-.02em}
/* Kode mata uang kecil dan menempel: ia keterangan, bukan bagian angka. */
.mk-price em{font-style:normal;font:700 9.5px 'Inter',system-ui,sans-serif;
  letter-spacing:.04em;opacity:.62;align-self:center}
.mk-price-full{font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#8B968F;padding-left:2px;letter-spacing:-.01em}
.mk-price-was{font-size:11.5px;color:#A8B2AC;text-decoration:line-through;
  padding-left:2px}

/* Harga besar di halaman detail */
.mk-price-big{display:inline-flex;align-items:baseline;gap:7px;
  padding:8px 18px;border-radius:13px;
  background:var(--mk-lime);color:var(--mk-ink);
  font:800 clamp(24px,3.6vw,34px)/1.1 'Inter',system-ui,sans-serif;
  letter-spacing:-.03em;
  box-shadow:0 3px 14px rgba(214,242,75,.4)}
.mk-price-big em{font-style:normal;font:700 12px 'Inter',system-ui,sans-serif;
  letter-spacing:.05em;opacity:.6;align-self:center}
.mk-price-full-big{margin-top:6px;
  font:600 14px ui-monospace,SFMono-Regular,Menlo,monospace;color:#5C6B63}

@media (prefers-color-scheme:dark){
  .mk-price-full{color:#7E8B84}
  .mk-price-full-big{color:#9FB0A7}
  .mk-price-big{box-shadow:0 3px 14px rgba(214,242,75,.18)}
}
@container mkform (max-width:430px){
  .mk-price{font-size:17px;padding:4px 10px}
}


/* ═══════════ Tempat penting di sekitar ═══════════ */
.near-card{position:relative;padding:16px 16px 0;border-radius:18px;
  border:1px solid rgba(26,58,46,.12);background:#fff;margin-bottom:14px;
  border-left:3px solid var(--mk-lime);overflow:hidden}
.near-hd{display:flex;align-items:baseline;gap:8px;margin-bottom:11px}
.near-hd b{font:700 13px 'Inter',system-ui,sans-serif}
/* Keterangan kecil bahwa kartunya berpindah sendiri — perpindahan tanpa
   pemberitahuan terasa seperti gangguan. */
.near-auto{margin-left:auto;font-style:normal;font:600 10px 'Inter',system-ui,sans-serif;
  color:#A8B2AC;display:inline-flex;align-items:center;gap:5px}
.near-auto::before{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--mk-lime);animation:nearBlip 2.2s ease-in-out infinite}
@keyframes nearBlip{0%,100%{opacity:.35}50%{opacity:1}}

/* ── Tab kategori ── */
.near-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  padding-bottom:11px;margin:0 -16px;padding-inline:16px;
  border-bottom:1px solid rgba(26,58,46,.08)}
.near-tabs::-webkit-scrollbar{display:none}
.near-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:99px;border:1px solid rgba(26,58,46,.13);
  background:transparent;cursor:pointer;transition:all .18s;
  font:600 11.5px 'Inter',system-ui,sans-serif;color:#5C6B63;white-space:nowrap}
.near-tab svg{width:14px;height:14px;flex:0 0 auto}
.near-tab em{font-style:normal;font-size:9.5px;font-weight:700;opacity:.55}
.near-tab:hover{border-color:var(--mk-lime)}
.near-tab.on{background:var(--mk-lime);border-color:var(--mk-lime);
  color:var(--mk-ink);font-weight:700}
.near-tab.on em{opacity:.65}

/* ── Panel isi ──
   Panel disusun bertumpuk supaya tingginya mengikuti yang terpanjang;
   tanpa itu kartunya melompat-lompat tiap kali kategori berganti. */
.near-panes{position:relative;padding:12px 0}
.near-pane{position:absolute;left:0;right:0;top:12px;
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .26s ease-out,transform .26s ease-out}
.near-pane.on{position:relative;top:0;opacity:1;transform:none;pointer-events:auto}

.near-item{display:flex;align-items:center;gap:9px;width:100%;
  padding:7px 8px;margin-left:-8px;border:0;border-radius:9px;
  background:transparent;cursor:pointer;font-size:12.5px;text-align:left;
  transition:background .13s}
.near-item:hover{background:rgba(214,242,75,.2)}
.near-nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:#1C2621}
.near-bar{flex:0 0 46px;height:4px;border-radius:99px;
  background:rgba(26,58,46,.09);overflow:hidden}
.near-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--mk-lime),#5BAD8F)}
.near-km{flex:0 0 auto;font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#8B968F;min-width:48px;text-align:right}

/* Bilah kemajuan di tepi bawah kartu: memberi tahu kapan akan berpindah,
   sehingga perpindahannya tidak mengejutkan. */
.near-prog{height:2px;margin:0 -16px;background:rgba(26,58,46,.06)}
.near-prog i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--mk-lime),#5BAD8F)}
.near-card.manual .near-prog{opacity:0}
.near-item.pilih{background:rgba(214,242,75,.34)}
.near-item.pilih .near-nm{font-weight:700}

@media (prefers-color-scheme:dark){
  .near-card{background:#171F1B;border-color:rgba(255,255,255,.08)}
  .near-hd b,.near-nm{color:#E5EDE8}
  .near-item:hover{background:rgba(214,242,75,.10)}
  .near-item.pilih{background:rgba(214,242,75,.18)}
}

/* ═══════════ Peta lokasi & penanda tujuan ═══════════
   Petak sebagai gambar, bukan kanvas: kanvas menuntut izin lintas-asal dan
   penyedia peta tidak selalu memberikannya. */
/* Tinggi HARUS ditetapkan di sini. Sebelumnya ia datang dari elemen kanvas
   di dalamnya; kanvas sudah diganti petak berposisi absolut, yang tidak
   memberi tinggi apa pun — dan petanya menjadi bidang setinggi nol.

   Diperbesar juga: pada 16:8 peta terasa seperti gambar hiasan. Lebih
   tinggi, ia menjadi sesuatu yang benar-benar dibaca. */
.mk-map{position:relative;overflow:hidden;background:#E9EDE8;
  aspect-ratio:16/11;min-height:340px;border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(20,40,30,.08)}
@media (max-width:640px){ .mk-map{aspect-ratio:4/5;min-height:400px} }
.mk-map-tiles{position:absolute;inset:0}
.mk-map-tiles img{position:absolute;width:257px;height:257px;
  pointer-events:none;-webkit-user-drag:none}
.mk-map-over{position:absolute;inset:0;pointer-events:none}
.mk-map-over > *{pointer-events:auto}
.mk-map-line{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:2}
.ml-lurus{stroke:#1A3A2E;stroke-width:2.5;stroke-dasharray:6 5;opacity:.5;fill:none}
.ml-jalan{stroke:#1A3A2E;stroke-width:7;fill:none;stroke-linecap:round;
  stroke-linejoin:round;opacity:.85}
.ml-jalan-atas{stroke:var(--mk-lime);stroke-width:3.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

.mk-map-pin{position:absolute;width:24px;height:24px;z-index:3;
  transform:translate(-50%,-100%);pointer-events:none;
  border-radius:50% 50% 50% 0;rotate:-45deg;background:#1A3A2E;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.34))}
.mk-map-pin::after{content:'';position:absolute;left:50%;top:50%;
  width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:var(--mk-lime)}
.mk-map-pin.b{background:#B4741E}
.mk-map-pin.b::after{background:#fff}

/* Keterangan tujuan menumpang di bawah peta. */
.mk-map-info{position:absolute;left:10px;right:10px;bottom:10px;z-index:4;
  display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:13px;
  background:rgba(26,58,46,.95);backdrop-filter:blur(8px);color:#fff;
  box-shadow:0 4px 18px rgba(20,45,32,.3)}
.mk-map-info b{flex:1;min-width:0;font:700 13px 'Inter',system-ui,sans-serif;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-map-info span{flex:0 0 auto;font-size:11.5px;color:rgba(255,255,255,.72)}
.mk-map-go{flex:0 0 auto;padding:8px 14px;border-radius:10px;
  background:var(--mk-lime);color:var(--mk-ink);text-decoration:none;
  font:700 12px 'Inter',system-ui,sans-serif}
.mk-map-x{flex:0 0 auto;width:26px;height:26px;border:0;border-radius:50%;
  background:rgba(255,255,255,.15);color:#fff;cursor:pointer;font-size:11px}
@media (max-width:560px){
  .mk-map-info{flex-wrap:wrap}
  .mk-map-info b{flex:1 1 100%}
  .mk-map-go{margin-left:auto}
}

/* ═══════════ Tab kategori mengambang di atas peta ═══════════
   Kaca tembus, bukan bidang pekat: peta di belakangnya tetap terbaca, dan
   keduanya terasa satu benda alih-alih dua panel bertumpuk. */
.mk-map-tabs{position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding:10px 0 0;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.72) 45%,rgba(255,255,255,.9));
  backdrop-filter:blur(10px) saturate(1.3);
  -webkit-backdrop-filter:blur(10px) saturate(1.3)}
.mk-map-tabs .near-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  padding:0 12px 10px;border:0;margin:0}
.mk-map-tabs .near-tabs::-webkit-scrollbar{display:none}
.mk-map-tabs .near-tab{flex:0 0 auto;background:rgba(255,255,255,.86);
  border-color:rgba(26,58,46,.12);box-shadow:0 1px 4px rgba(20,45,32,.08)}
.mk-map-tabs .near-tab.on{background:var(--mk-lime);border-color:var(--mk-lime);
  box-shadow:0 2px 8px rgba(214,242,75,.5)}
.mk-map-tabs .near-prog{height:2px;margin:0;background:rgba(26,58,46,.08)}
.mk-map.manual .near-prog{opacity:0}

/* Keterangan tujuan naik ke atas tab agar keduanya tidak bertindihan. */
.mk-map.ada-tujuan .mk-map-info{bottom:62px}

/* Kartu daftar kini tanpa tab sendiri; batas atasnya menyambung ke peta. */
.near-card{margin-top:12px}

/* ═══════════ Kendali peta ═══════════
   Peta tanpa kendali hanya dapat dilihat, tidak dijelajahi — padahal yang
   paling ingin diketahui orang justru apa yang ada di sekelilingnya. */
.mk-map{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.mk-map.geser{cursor:grabbing}
.mk-map.geser .mk-map-tiles{transition:none}
.mk-map.ada-tujuan{cursor:default}

.mk-map-ctrl{position:absolute;right:10px;top:10px;z-index:6;
  display:flex;flex-direction:column;gap:6px}
.mk-map-ctrl button{width:36px;height:36px;border:0;border-radius:11px;cursor:pointer;
  background:rgba(255,255,255,.94);color:#1C2621;display:grid;place-items:center;
  box-shadow:0 2px 8px rgba(20,45,32,.16);backdrop-filter:blur(6px);
  transition:background .13s,transform .1s}
.mk-map-ctrl button:hover{background:#fff}
.mk-map-ctrl button:active{transform:scale(.93)}
.mk-map-ctrl svg{width:16px;height:16px}

/* Petak tidak boleh diseret sebagai gambar saat peta digeser. */
.mk-map-tiles img{-webkit-user-drag:none;user-drag:none}

@media (prefers-color-scheme:dark){
  .mk-map-ctrl button{background:rgba(23,31,27,.92);color:#E5EDE8}
  .mk-map-ctrl button:hover{background:#171F1B}
}

/* ═══════════ Atribut berikon ═══════════
   Mata menangkap bentuk lebih cepat daripada membaca kata. Di daftar yang
   dipindai sekilas, angka di samping ikon tersampaikan seketika. */
.mk-card-attrs{display:flex;flex-wrap:wrap;gap:5px 10px;margin-top:9px}
.mk-ca{display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:8px;background:rgba(26,58,46,.055)}
.mk-ca .mk-ai{width:14px;height:14px;flex:0 0 auto;color:#2F8F6E}
.mk-ca b{font:700 11.5px 'Inter',system-ui,sans-serif;color:#1C2621;
  white-space:nowrap}

/* Halaman detail: ikon mendahului label, keduanya sejajar. */
.mk-attr.ada-ikon{display:flex;align-items:center;gap:9px}
.mk-attr-ic{width:17px;height:17px;flex:0 0 auto;color:#2F8F6E}
.mk-attr.ada-ikon span{flex:1;min-width:0}
.mk-attr.ada-ikon b{flex:0 0 auto;text-align:right}

@container mkform (max-width:430px){
  .mk-card-attrs{gap:4px 7px}
  .mk-ca{padding:3px 7px}
  .mk-ca b{font-size:11px}
}
@media (max-width:640px){
  .mk-ca{padding:3px 7px}
  .mk-ca b{font-size:11px}
}
@media (prefers-color-scheme:dark){
  .mk-ca{background:rgba(255,255,255,.06)}
  .mk-ca b{color:#E5EDE8}
}

/* ═══════════ Tombol muat ulang bersih ═══════════ */
.mk-reload{width:36px;height:36px;flex:0 0 auto;border:1px solid rgba(20,40,30,.13);
  border-radius:11px;background:#fff;color:#33463d;cursor:pointer;
  display:grid;place-items:center;transition:all .15s}
.mk-reload:hover{border-color:var(--mk-lime);color:#1A3A2E;transform:translateY(-1px)}
.mk-reload svg{width:16px;height:16px}
.mk-reload.putar svg{animation:mkSpin .7s linear infinite}
@keyframes mkSpin{to{transform:rotate(360deg)}}

/* ═══════════ Galeri: pramuat & indikator ═══════════ */
.mk-lb-stage{position:relative}
/* Foto disembunyikan sampai selesai; gambar yang muncul separuh-separuh
   saat mengalir terlihat rusak, bukan sedang dimuat. */
.mk-lb-img{opacity:1;transition:opacity .3s ease-out}
.mk-lb-img.memuat{opacity:0}
.mk-lb-load{position:absolute;left:50%;top:50%;width:34px;height:34px;
  margin:-17px 0 0 -17px;border-radius:50%;pointer-events:none;
  border:2.5px solid rgba(255,255,255,.2);border-top-color:var(--mk-lime);
  animation:mkSpin .8s linear infinite}

.mk-lb-zoom{display:flex;align-items:center;gap:9px}
.mk-lb-znum{min-width:46px;text-align:center;
  font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace}
/* Bilah memberi tahu posisi perbesaran di antara batasnya — angka saja
   tidak memberi tahu seberapa jauh masih bisa. */
.mk-lb-zbar{width:62px;height:3px;border-radius:99px;
  background:rgba(255,255,255,.22);overflow:hidden}
.mk-lb-zbar i{display:block;height:100%;width:0;border-radius:99px;
  background:var(--mk-lime);transition:width .16s ease-out}
.mk-lb-zr{font:700 10.5px 'Inter',system-ui,sans-serif !important;
  letter-spacing:.02em}
/* Ukuran asli: berguna bagi yang ingin tahu apakah fotonya cukup tajam
   untuk dicetak atau diperbesar. */
.mk-lb-dim{position:absolute;left:14px;bottom:16px;z-index:5;
  font:600 10.5px ui-monospace,monospace;color:rgba(255,255,255,.5);
  pointer-events:none}

@media (prefers-color-scheme:dark){
  .mk-reload{background:#171F1B;border-color:rgba(255,255,255,.10);color:#9FB0A7}
}
@media (prefers-reduced-motion:reduce){
  .mk-reload.putar svg,.mk-lb-load{animation:none}
}

/* ═══════════ Video ═══════════ */
.mk-hero-vid{width:100%;aspect-ratio:16/9;border:0;border-radius:16px;display:block}
.mk-th.vid{background-size:cover;background-position:center;position:relative}
.mk-th.vid::after{content:'';position:absolute;inset:0;background:rgba(15,21,18,.35)}
.mk-th.vid svg{position:relative;z-index:1;color:#fff}

/* Pratinjau saat membuat iklan */
.mk-vidprev{margin-top:9px}
.mk-vidprev iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:12px;display:block}
.mk-vidprev-ok{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:99px;
  background:rgba(47,143,110,.14);color:#2F8F6E;
  font:600 10.5px 'Inter',system-ui,sans-serif}
.mk-vidprev-no{margin:0;padding:9px 12px;border-radius:11px;
  background:rgba(180,116,30,.10);color:#8A5B18;font-size:11.5px;line-height:1.5}

/* Video pada kartu daftar */
.mk-vidcard{position:absolute;inset:0;display:block;overflow:hidden;background:#0F1512}
.mk-vidcard img{width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .3s,transform .4s}
.mk-vidcard iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  pointer-events:none;opacity:0;animation:mkVidIn .5s ease-out forwards}
@keyframes mkVidIn{to{opacity:1}}
.mk-vidcard.main img{opacity:0}
/* Tanda putar di tengah, hilang saat videonya mulai. */
.mk-vidplay{position:absolute;left:50%;top:50%;width:46px;height:46px;
  transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;
  background:rgba(15,21,18,.55);backdrop-filter:blur(4px);color:#fff;
  transition:opacity .25s,transform .25s;pointer-events:none;z-index:2}
.mk-vidplay svg{width:19px;height:19px;margin-left:2px}
.mk-card-wrap:hover .mk-vidplay{transform:translate(-50%,-50%) scale(1.08)}
.mk-vidcard.main .mk-vidplay{opacity:0}
.mk-vidtag{position:absolute;left:9px;bottom:9px;z-index:2;
  padding:3px 9px;border-radius:99px;background:var(--mk-lime);color:var(--mk-ink);
  font:800 9.5px 'Inter',system-ui,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;transition:opacity .25s;pointer-events:none}
.mk-vidcard.main .mk-vidtag{opacity:0}

/* ═══════════ Seret foto ═══════════
   Memakai peristiwa penunjuk, bukan seret bawaan HTML — yang bawaan tidak
   bekerja sama sekali di layar sentuh, dan sebagian besar orang menyunting
   iklannya dari ponsel. */
body.mk-drag{overflow:hidden;cursor:grabbing;user-select:none;-webkit-user-select:none}
body.mk-drag *{cursor:grabbing !important}

/* Salinan yang mengikuti jari. Sedikit dimiringkan dan diangkat supaya
   jelas ia sedang "di tangan", bukan menempel di tempatnya. */
.mk-ph.bayang{position:fixed;z-index:9999;pointer-events:none;margin:0;
  transform:translate(-50%,-50%) rotate(-3deg) scale(1.06);
  box-shadow:0 12px 30px rgba(20,45,32,.35);opacity:.94;
  border-radius:10px;overflow:hidden}
.mk-ph.bayang .x,.mk-ph.bayang .mv,.mk-ph.bayang .mk-ph-cover{display:none}
.mk-ph.menyeret{opacity:.28}

/* Garis sisip: menunjukkan posisi persis foto akan mendarat. */
.mk-ph{position:relative}
.mk-ph.sisip-kiri::before,.mk-ph.sisip-kanan::after{
  content:'';position:absolute;top:-3px;bottom:-3px;width:3px;border-radius:3px;
  background:var(--mk-lime);box-shadow:0 0 8px rgba(214,242,75,.8);z-index:3}
.mk-ph.sisip-kiri::before{left:-6px}
.mk-ph.sisip-kanan::after{right:-6px}

/* Tombol pindah — jalan kedua bagi yang kesulitan menyeret. */
.mk-ph .mv{position:absolute;bottom:3px;right:3px;width:22px;height:22px;border:0;
  border-radius:7px;background:rgba(15,21,18,.62);color:#fff;cursor:pointer;
  display:grid;place-items:center;opacity:0;transition:opacity .14s}
.mk-ph .mv svg{width:13px;height:13px}
.mk-ph:hover .mv{opacity:1}
@media (hover:none){ .mk-ph .mv{opacity:1} .mk-ph .x{opacity:1} }

.mk-mvmenu{position:fixed;z-index:9998;min-width:190px;padding:6px;
  border-radius:13px;background:#fff;
  box-shadow:0 8px 30px rgba(20,45,32,.22);border:1px solid rgba(26,58,46,.10)}
.mk-mvmenu button{display:block;width:100%;padding:9px 11px;border:0;border-radius:9px;
  background:transparent;cursor:pointer;text-align:left;
  font:600 12.5px 'Inter',system-ui,sans-serif;color:#1C2621}
.mk-mvmenu button:hover:not([disabled]){background:rgba(214,242,75,.28)}
.mk-mvmenu button[disabled]{opacity:.45;cursor:default}
.mk-mvmenu button i{font-style:normal;font-size:10.5px;color:#A8B2AC;font-weight:500}
.mk-mvmenu button.baru{color:#2F8F6E;border-top:1px solid rgba(26,58,46,.08);
  border-radius:0 0 9px 9px;margin-top:3px}

.mk-phgrp-add{display:flex;align-items:center;justify-content:center;gap:7px}
.mk-phgrp-add svg{width:14px;height:14px}

@media (prefers-color-scheme:dark){
  .mk-mvmenu{background:#171F1B;border-color:rgba(255,255,255,.10)}
  .mk-mvmenu button{color:#E5EDE8}
}

/* ═══════════ Penamaan kelompok yang jelas ═══════════
   Sebelumnya kolomnya tembus tanpa batas — terlihat seperti tulisan biasa,
   dan tidak ada yang menyadari bahwa itu dapat diubah. */
.mk-phgrp-lab{flex:1;min-width:0;display:flex;align-items:center;gap:7px;
  padding:7px 11px;border-radius:10px;background:#fff;
  border:1px solid rgba(26,58,46,.16);transition:border-color .14s,box-shadow .14s}
.mk-phgrp-lab:focus-within{border-color:#2F8F6E;
  box-shadow:0 0 0 3px rgba(47,143,110,.12)}
.mk-phgrp-lab svg{width:14px;height:14px;flex:0 0 auto;color:#8B968F}
.mk-phgrp-lab:focus-within svg{color:#2F8F6E}
/* Warna ditetapkan tegas agar tidak terbawa aturan mode gelap yang
   menimpanya di atas panel yang tetap terang. */
.mk-phgrp-n{flex:1;min-width:0;border:0;background:transparent;outline:none;
  font:700 13px 'Inter',system-ui,sans-serif;color:#1C2621 !important;padding:0}
.mk-phgrp-n::placeholder{color:#A8B2AC;font-weight:500}
.mk-phgrp-c{flex:0 0 auto;padding:4px 9px;border-radius:99px;
  background:rgba(26,58,46,.06);
  font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace;color:#5C6B63}
.mk-phgrp-c i{font-style:normal;font-weight:500;opacity:.6}
.mk-phgrp-x{width:30px;height:30px;display:grid;place-items:center}
.mk-phgrp-x svg{width:13px;height:13px}

/* Keterangan foto */
.mk-ph .cp{position:absolute;bottom:3px;left:3px;width:22px;height:22px;border:0;
  border-radius:7px;background:rgba(15,21,18,.62);color:#fff;cursor:pointer;
  display:grid;place-items:center;opacity:0;transition:opacity .14s}
.mk-ph .cp svg{width:12px;height:12px}
.mk-ph .cp.ada{background:var(--mk-lime);color:var(--mk-ink);opacity:1}
.mk-ph:hover .cp{opacity:1}
@media (hover:none){ .mk-ph .cp{opacity:1} }
.mk-ph-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 5px;
  background:linear-gradient(transparent,rgba(26,58,46,.9));
  backdrop-filter:blur(3px);color:#EEF6E2;
  font:600 9px 'Inter',system-ui,sans-serif;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}

/* Pil kelompok pada galeri publik */
.mk-galpills{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  margin:12px 0 0;padding-bottom:2px}
.mk-galpills::-webkit-scrollbar{display:none}
.mk-galpill{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:99px;cursor:pointer;
  border:1px solid rgba(26,58,46,.14);background:#fff;
  font:600 12px 'Inter',system-ui,sans-serif;color:#5C6B63;white-space:nowrap;
  transition:all .15s}
.mk-galpill em{font-style:normal;font:700 10px ui-monospace,monospace;opacity:.55}
.mk-galpill:hover{border-color:var(--mk-lime)}
.mk-galpill.on{background:var(--mk-lime);border-color:var(--mk-lime);
  color:var(--mk-ink);font-weight:700}
.mk-galpill.on em{opacity:.7}

@media (prefers-color-scheme:dark){
  .mk-phgrp-lab{background:#1C2622;border-color:rgba(255,255,255,.12)}
  .mk-galpill{background:#171F1B;border-color:rgba(255,255,255,.10);color:#9FB0A7}
  .mk-galpill.on{color:var(--mk-ink)}
}

/* Keterangan pada gambar besar */
/* Kaca hijau, bukan hitam. Hitam netral tetapi tidak menyampaikan apa pun;
   hijau tua dengan tepi lime adalah warna yang sama dengan penanda mode,
   tombol utama, dan bidang harga — mata mengenalinya sebagai satu keluarga
   tanpa perlu membaca. */
.mk-herocap{position:absolute;left:14px;right:14px;bottom:14px;z-index:3;
  padding:10px 15px;border-radius:12px;
  background:linear-gradient(135deg,rgba(26,58,46,.82),rgba(20,45,34,.76));
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(214,242,75,.28);
  box-shadow:0 4px 20px rgba(12,26,20,.28),inset 0 1px 0 rgba(255,255,255,.08);
  color:#EEF6E2;
  font:600 12.5px 'Inter',system-ui,sans-serif;line-height:1.45;
  letter-spacing:.005em;pointer-events:none}
/* Garis lime tipis di tepi kiri — tanda yang sama dipakai kartu iklan. */
.mk-herocap::before{content:'';position:absolute;left:0;top:9px;bottom:9px;
  width:2.5px;border-radius:0 3px 3px 0;background:var(--mk-lime)}
.mk-herocap[hidden]{display:none}

/* ═══════════════════════════════════════════════════════════
   Penyunting galeri.

   Sebelumnya wadahnya memakai grid 88px yang dibuat untuk foto polos —
   setiap kelompok terjepit menjadi satu kolom sempit, dan tidak ada yang
   bisa disunting di dalamnya.

   Sekarang wadahnya menumpuk ke bawah: tiap kelompok mendapat lebar penuh,
   dan foto di dalamnya yang mengalir menyamping.
   ═══════════════════════════════════════════════════════════ */
.mk-galed{display:block;width:100%}

.mk-phgrp{width:100%;border:1px solid rgba(26,58,46,.14);border-radius:14px;
  margin-bottom:10px;background:#fff;overflow:hidden}
.mk-phgrp.lepas{border-style:dashed;background:transparent}

/* ── Kepala kelompok ── */
.mk-phgrp-h{display:flex;align-items:center;gap:8px;
  padding:10px 12px;background:rgba(26,58,46,.04);
  border-bottom:1px solid rgba(26,58,46,.08)}
.mk-phgrp-h b{font:700 12px 'Inter',system-ui,sans-serif;color:#5C6B63;flex:1}
.mk-phgrp-lab{flex:1;min-width:0;display:flex;align-items:center;gap:7px;
  padding:8px 12px;border-radius:10px;background:#fff;
  border:1px solid rgba(26,58,46,.18);transition:border-color .14s,box-shadow .14s}
.mk-phgrp-lab:focus-within{border-color:#2F8F6E;box-shadow:0 0 0 3px rgba(47,143,110,.13)}
.mk-phgrp-lab svg{width:14px;height:14px;flex:0 0 auto;color:#8B968F}
.mk-phgrp-lab:focus-within svg{color:#2F8F6E}
.mk-phgrp-n{flex:1;min-width:0;border:0;background:transparent;outline:none;
  font:700 13.5px 'Inter',system-ui,sans-serif;color:#1C2621 !important;padding:0}
.mk-phgrp-n::placeholder{color:#A8B2AC;font-weight:500}
.mk-phgrp-c{flex:0 0 auto;padding:4px 10px;border-radius:99px;
  background:rgba(26,58,46,.07);
  font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace;color:#5C6B63}
.mk-phgrp-c i{font-style:normal;font-weight:500;opacity:.55}
.mk-phgrp-x{flex:0 0 auto;width:30px;height:30px;border:0;border-radius:9px;
  background:transparent;color:#B06060;cursor:pointer;display:grid;place-items:center}
.mk-phgrp-x:hover{background:rgba(200,80,80,.12)}
.mk-phgrp-x svg{width:13px;height:13px}

/* ── Isi kelompok ──
   Foto mengalir menyamping dan menggulir bila melebihi lebar. Membungkusnya
   ke baris baru membuat kelompok berisi enam belas foto menjadi setinggi
   layar, dan kelompok berikutnya tak terlihat lagi. */
.mk-phgrp-b{display:flex;gap:9px;padding:12px;overflow-x:auto;
  scrollbar-width:thin;min-height:104px;align-items:flex-start;
  transition:background .15s}
.mk-phgrp-b::-webkit-scrollbar{height:6px}
.mk-phgrp-b::-webkit-scrollbar-thumb{background:rgba(26,58,46,.2);border-radius:99px}
.mk-phgrp-b.sasaran{background:rgba(214,242,75,.26);
  outline:2px dashed var(--mk-lime);outline-offset:-6px}

.mk-phgrp-add{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:12px;border-radius:12px;
  border:1.5px dashed rgba(26,58,46,.22);background:transparent;cursor:pointer;
  font:700 12.5px 'Inter',system-ui,sans-serif;color:#2F8F6E;transition:all .15s}
.mk-phgrp-add:hover{border-color:var(--mk-lime);background:rgba(214,242,75,.12)}
.mk-phgrp-add svg{width:15px;height:15px}

/* ── Kotak foto ── */
.mk-ph{position:relative;width:88px;height:88px;flex:0 0 auto;
  border-radius:11px;overflow:hidden;cursor:grab;background:#EDF2EE}
.mk-ph:active{cursor:grabbing}
.mk-ph img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.mk-ph .x{position:absolute;top:4px;right:4px;width:21px;height:21px;border:0;
  border-radius:50%;background:rgba(15,21,18,.65);color:#fff;cursor:pointer;
  font-size:9px;opacity:0;transition:opacity .14s;z-index:2}
.mk-ph:hover .x{opacity:1}
.mk-ph.sampul{box-shadow:inset 0 0 0 2.5px var(--mk-lime)}
.mk-ph-cover{position:absolute;left:0;right:0;bottom:0;padding:3px 0;
  background:var(--mk-lime);color:var(--mk-ink);text-align:center;
  font:800 8px 'Inter',system-ui,sans-serif;letter-spacing:.05em;
  text-transform:uppercase;z-index:2}
.mk-ph-add{width:88px;height:88px;flex:0 0 auto;border-radius:11px;cursor:pointer;
  border:1.5px dashed rgba(26,58,46,.24);background:transparent;color:#8B968F;
  display:grid;place-items:center;transition:all .15s}
.mk-ph-add:hover{border-color:var(--mk-lime);color:#2F8F6E;
  background:rgba(214,242,75,.10)}
.mk-ph-add svg{width:20px;height:20px}

@media (prefers-color-scheme:dark){
  .mk-phgrp{background:#171F1B;border-color:rgba(255,255,255,.09)}
  .mk-phgrp-h{background:rgba(255,255,255,.03);border-bottom-color:rgba(255,255,255,.07)}
  .mk-phgrp-lab{background:#1C2622;border-color:rgba(255,255,255,.13)}
}

.mk-galtip{margin:0 0 10px;padding:11px 14px;border-radius:12px;
  background:rgba(214,242,75,.16);border:1px solid rgba(214,242,75,.5);
  font-size:12px;line-height:1.55;color:#3A4A42}
.mk-galtip b{color:#1A3A2E}

/* Di layar sempit foto sedikit lebih kecil agar tiga muat sekaligus —
   melihat tiga foto berdampingan jauh lebih membantu saat mengurutkan
   daripada satu setengah. */
@media (max-width:520px){
  .mk-ph,.mk-ph-add{width:76px;height:76px}
  .mk-phgrp-b{padding:10px;gap:8px;min-height:92px}
  .mk-phgrp-h{padding:9px 10px}
  .mk-phgrp-n{font-size:13px}
}
@media (prefers-color-scheme:dark){
  .mk-galtip{background:rgba(214,242,75,.08);border-color:rgba(214,242,75,.24);color:#C8D4CE}
  .mk-galtip b{color:var(--mk-lime)}
}

/* ═══════════ Video pada halaman detail ═══════════
   Selebar kolomnya. Video yang mengecil di tengah halaman kehilangan
   gunanya — orang menonton video justru untuk melihat detail yang tidak
   tertangkap foto. */
.mk-sec-vid .mk-vidwrap{width:100%;border-radius:16px;overflow:hidden;
  background:#0F1512;line-height:0}
.mk-vidwrap iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.mk-vidlink{display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;aspect-ratio:16/5;color:#fff;text-decoration:none;
  font:600 13.5px 'Inter',system-ui,sans-serif;line-height:1.4}
.mk-vidlink svg{width:16px;height:16px}
.mk-vidlink:hover{background:#161F1A}

/* ═══════════ Penanda perubahan tercatat ═══════════
   Tombol simpan per kelompok akan menambah langkah tanpa menambah
   kepastian — yang sebenarnya dibutuhkan hanyalah tanda bahwa perubahan
   sudah tercatat. */
.mk-phgrp{transition:border-color .2s,box-shadow .2s}
.mk-phgrp.berubah{border-color:rgba(180,116,30,.5)}
.mk-phgrp.berubah .mk-phgrp-lab{border-color:rgba(180,116,30,.6)}
.mk-phgrp.tercatat{border-color:var(--mk-lime);
  box-shadow:0 0 0 3px rgba(214,242,75,.28)}

/* Tanda centang sekejap di kepala kelompok. */
.mk-phgrp-h{position:relative}
.mk-phgrp.tercatat .mk-phgrp-h::after{
  content:'Tercatat';position:absolute;right:46px;top:50%;
  transform:translateY(-50%);padding:3px 10px;border-radius:99px;
  background:var(--mk-lime);color:var(--mk-ink);
  font:800 9.5px 'Inter',system-ui,sans-serif;letter-spacing:.05em;
  text-transform:uppercase;animation:mkPop .25s ease-out;pointer-events:none}
@keyframes mkPop{from{opacity:0;transform:translateY(-50%) scale(.85)}
                 to{opacity:1;transform:translateY(-50%) scale(1)}}

@media (prefers-reduced-motion:reduce){
  .mk-phgrp{transition:none}
  .mk-phgrp.tercatat .mk-phgrp-h::after{animation:none}
}

/* ═══════════ Kotak keterangan foto ═══════════
   Kolom sungguhan, bukan prompt() bawaan — yang tidak dapat ditata, tidak
   menampilkan fotonya, dan di ponsel terasa seperti galat sistem. */
.mk-capbox{position:fixed;inset:0;z-index:9997;
  background:linear-gradient(rgba(26,58,46,.55),rgba(20,45,34,.62));
  backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;
  padding:18px;animation:mkFade .16s ease-out}
.mk-capbox-in{width:min(440px,100%);background:#fff;border-radius:18px;
  padding:16px;display:flex;gap:14px;
  box-shadow:0 18px 50px rgba(20,45,32,.3)}
.mk-capbox-in img{width:96px;height:96px;flex:0 0 auto;border-radius:12px;
  object-fit:cover;background:#EDF2EE}
.mk-capbox-f{flex:1;min-width:0;display:flex;flex-direction:column}
.mk-capbox-f label{font:700 10.5px 'Inter',system-ui,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;color:#8B968F;margin-bottom:6px}
.mk-capbox-f textarea{width:100%;padding:10px 12px;border-radius:11px;
  border:1px solid rgba(26,58,46,.18);background:#fff;resize:none;outline:none;
  font:500 13px 'Inter',system-ui,sans-serif;color:#1C2621;line-height:1.5}
.mk-capbox-f textarea:focus{border-color:#2F8F6E;
  box-shadow:0 0 0 3px rgba(47,143,110,.12)}
.mk-capbox-b{display:flex;align-items:center;gap:8px;margin-top:10px}
.mk-capbox-n{flex:1;font:600 10.5px ui-monospace,monospace;color:#A8B2AC}
.mk-capbox-b button{padding:8px 14px;border-radius:10px;cursor:pointer;
  border:1px solid rgba(26,58,46,.14);background:transparent;
  font:600 12px 'Inter',system-ui,sans-serif;color:#5C6B63}
.mk-capbox-b button.ok{background:var(--mk-lime);border-color:var(--mk-lime);
  color:var(--mk-ink);font-weight:700}
@media (max-width:480px){
  .mk-capbox-in{flex-direction:column}
  .mk-capbox-in img{width:100%;height:120px}
}
@media (prefers-color-scheme:dark){
  .mk-capbox-in{background:#171F1B}
  .mk-capbox-f textarea{background:#1C2622;border-color:rgba(255,255,255,.12);color:#E5EDE8}
}

/* ═══════════ Melepas berkas ke kelompok ═══════════ */
.mk-phgrp-b.lepas-sini{background:rgba(214,242,75,.3);
  outline:2.5px dashed var(--mk-lime);outline-offset:-6px}
.mk-phgrp-b.lepas-sini::before{content:'Lepas foto di sini';
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:6px 14px;border-radius:99px;background:var(--mk-lime);
  color:var(--mk-ink);font:800 11px 'Inter',system-ui,sans-serif;
  pointer-events:none;z-index:5;white-space:nowrap}
.mk-phgrp-b{position:relative}

/* ═══════════ Catatan suara ═══════════
   Gelombangnya dibaca dari berkasnya sendiri, bukan digambar acak — batang
   palsu yang bergoyang tanpa hubungan dengan suaranya akan ketahuan begitu
   bagian yang sunyi tampak bergemuruh. */
.mk-voice{display:flex;align-items:center;gap:14px;padding:14px 18px;
  border-radius:16px;background:rgba(26,58,46,.05);
  border:1px solid rgba(26,58,46,.10)}
.mk-voice-b{width:46px;height:46px;flex:0 0 auto;border:0;border-radius:50%;
  background:var(--mk-lime);color:var(--mk-ink);cursor:pointer;
  display:grid;place-items:center;transition:transform .12s}
.mk-voice-b:hover{transform:scale(1.06)}
.mk-voice-b:active{transform:scale(.95)}
.mk-voice-b svg{width:19px;height:19px}
.ic-play{margin-left:2px}
.mk-voice-w{flex:1;min-width:0;height:44px;cursor:pointer}
.mk-voice-c{width:100%;height:100%;display:block}
.mk-voice-t{flex:0 0 auto;min-width:42px;text-align:right;
  font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#5C6B63}

/* ── Pemutar ringkas pada kartu daftar ──
   Dapat diputar tanpa membuka iklannya. Hanya satu yang berbunyi pada satu
   waktu; memulai yang baru menghentikan yang lama. */
.mk-card-voice{display:flex;align-items:center;gap:8px;margin-top:9px;
  padding:5px 10px 5px 5px;border-radius:99px;
  background:rgba(26,58,46,.06);border:1px solid rgba(26,58,46,.10);
  transition:background .16s,border-color .16s}
.mk-card-voice:hover{background:rgba(214,242,75,.16);border-color:rgba(214,242,75,.5)}
.mk-card-voice.main{background:rgba(26,58,46,.94);border-color:rgba(26,58,46,.94)}

.cv-b{width:26px;height:26px;flex:0 0 auto;border:0;border-radius:50%;
  background:var(--mk-lime);color:var(--mk-ink);cursor:pointer;
  display:grid;place-items:center;transition:transform .12s}
.cv-b:hover{transform:scale(1.09)}
.cv-b:active{transform:scale(.93)}
.cv-b svg{width:11px;height:11px}
.cv-play{margin-left:1px}

/* Batang bergerak mengikuti kemajuan, bukan bergoyang acak — yang bergoyang
   tanpa hubungan dengan suaranya akan ketahuan saat bagian sunyi tetap
   tampak ramai. */
.cv-bars{flex:1;min-width:0;height:18px;display:flex;align-items:center;
  gap:2px;cursor:pointer}
.cv-bars i{flex:1;min-width:1.5px;border-radius:99px;
  background:rgba(26,58,46,.22);transition:background .18s,height .18s}
.cv-bars i:nth-child(3n){height:60%}
.cv-bars i:nth-child(3n+1){height:38%}
.cv-bars i:nth-child(3n+2){height:82%}
.cv-bars i.lewat{background:var(--mk-lime)}
.mk-card-voice.main .cv-bars i{background:rgba(255,255,255,.22)}
.mk-card-voice.main .cv-bars i.lewat{background:var(--mk-lime)}

.cv-t{flex:0 0 auto;min-width:34px;text-align:right;
  font:700 10px ui-monospace,SFMono-Regular,Menlo,monospace;color:#5C6B63}
.mk-card-voice.main .cv-t{color:var(--mk-lime)}

@media (prefers-reduced-motion:reduce){
  .cv-b,.cv-bars i{transition:none}
}

@media (prefers-color-scheme:dark){
  .mk-voice{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
  .mk-voice-t{color:#9FB0A7}
}

/* ═══════════ Kontak sebagai lapisan tipis ═══════════
   Isinya ikut diringankan. Tombol pekat di dalam panel kaca akan menariknya
   kembali menjadi kotak tersendiri — yang justru ingin dihindari. */
.mk-card-owner .mk-owner-av{width:34px;height:34px;
  border-width:1.5px;box-shadow:0 1px 4px rgba(20,45,32,.10)}
.mk-card-owner .mk-owner-n{font-size:11.5px;color:#41544A}
.mk-card-owner .mk-oa{background:rgba(26,58,46,.06);
  border:1px solid transparent;transition:all .16s}
.mk-card-owner .mk-oa:hover{background:rgba(26,58,46,.12);
  border-color:rgba(26,58,46,.14);transform:translateY(-1px)}
.mk-card-owner .mk-oa-wa:hover{background:rgba(37,211,102,.18);
  border-color:rgba(37,211,102,.4);color:#128C4A}

/* Di layar sempit lapisan ini melebar sedikit, karena ruang sisinya lebih
   berharga daripada kesan mengambangnya. */
@media (max-width:520px){
  .mk-card-owner{margin:7px 4px 0;padding:9px 11px;border-radius:14px}
}
@media (prefers-color-scheme:dark){
  .mk-card-owner{background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.09);
    box-shadow:0 1px 3px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.05)}
  .mk-card-wrap:hover .mk-card-owner{background:rgba(255,255,255,.08)}
  .mk-card-owner .mk-owner-n{color:#9FB0A7}
  .mk-card-owner .mk-oa{background:rgba(255,255,255,.07)}
  .mk-card-owner .mk-oa:hover{background:rgba(255,255,255,.13)}
}
@media (prefers-reduced-motion:reduce){
  .mk-card-owner,.mk-card-owner .mk-oa{transition:none}
}