/* ============================================================
   Portal Mitra HaiGili.id — Hotel & Villa
   Tema TERANG (light), mobile-first. Aksen mengikuti brand HaiGili:
   navy #0A2540 · biru #0E7EE4 · cyan #00B4D8
   ============================================================ */
:root{
  --navy:#0A2540; --navy2:#12355B; --blue:#0E7EE4; --cyan:#00B4D8;
  --grad:linear-gradient(135deg,#0E7EE4,#00B4D8);
  --txt:#12233B; --mut:#5B7290; --dim:#8AA0B8;
  --line:#E4EBF4; --soft:#F5F9FD; --soft2:#EFF6FD;
  --ok:#12A150; --okbg:#E7F7EE; --warn:#E8590C; --warnbg:#FFF3E8;
  --bad:#E03131; --badbg:#FDECEC;
  --r:16px; --r2:12px;
  --sh:0 1px 2px rgba(10,37,64,.05),0 8px 24px rgba(10,37,64,.07);
  --sh2:0 -8px 32px rgba(10,37,64,.16);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Roboto,Arial,sans-serif;
  background:var(--soft); color:var(--txt); font-size:14.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:var(--blue);text-decoration:none}
.hg-hide{display:none!important}

/* ---------- kerangka ---------- */
.mt-wrap{max-width:1120px;margin:0 auto;padding:0 14px}
.mt-view{min-height:100vh}

/* ---------- LOGIN ---------- */
.mt-login{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px 16px;
  background:
    radial-gradient(1000px 460px at 50% -140px,#124a86 0%,rgba(18,74,134,0) 70%),
    linear-gradient(160deg,#0A2540 0%,#12355B 46%,#F5F9FD 46.2%,#F5F9FD 100%);
}
.mt-login-box{width:100%;max-width:412px}
.mt-brand{text-align:center;color:#fff;margin-bottom:18px}
.mt-brand .mt-logo{font-size:29px;font-weight:800;letter-spacing:-.5px;line-height:1.1}
.mt-brand .mt-logo span{color:#5FD3F3}
.mt-brand p{margin:7px 0 0;font-size:12.5px;color:#BFD9F0;letter-spacing:.3px;text-transform:uppercase;font-weight:600}
.mt-card{background:#fff;border-radius:20px;padding:22px;box-shadow:0 18px 50px rgba(10,37,64,.22)}
.mt-card h2{margin:0 0 4px;font-size:19px;letter-spacing:-.2px}
.mt-card .mt-sub{margin:0 0 18px;color:var(--mut);font-size:13px}

/* ---------- form ---------- */
.mt-f{margin-bottom:13px}
.mt-f label{display:block;font-size:12px;font-weight:700;color:var(--navy2);margin-bottom:5px;letter-spacing:.1px}
.mt-f .mt-hint{font-weight:500;color:var(--dim);font-size:11.5px}
.mt-in{
  width:100%;height:46px;border:1.5px solid var(--line);border-radius:var(--r2);
  padding:0 13px;background:#fff;outline:0;transition:.15s;
}
.mt-in:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,126,228,.13)}
textarea.mt-in{height:auto;padding:11px 13px;resize:vertical;min-height:88px;line-height:1.5}
select.mt-in{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4.2 6 8.2l4-4' fill='none' stroke='%235B7290' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.mt-row2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.mt-tag{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.2px}
.mt-tag.ok{background:var(--okbg);color:var(--ok)}
.mt-tag.off{background:#EDF1F6;color:var(--mut)}

/* ---------- tombol ---------- */
.mt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:46px;padding:0 18px;border-radius:var(--r2);font-weight:700;font-size:14px;
  background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(14,126,228,.28);transition:.15s;
}
.mt-btn:active{transform:translateY(1px)}
.mt-btn.block{width:100%}
.mt-btn.ghost{background:#fff;color:var(--navy2);border:1.5px solid var(--line);box-shadow:none}
.mt-btn.dark{background:var(--navy);box-shadow:0 6px 16px rgba(10,37,64,.24)}
.mt-btn.sm{height:38px;padding:0 13px;font-size:13px;border-radius:10px}
.mt-btn.danger{background:var(--badbg);color:var(--bad);box-shadow:none}
.mt-btn[disabled]{opacity:.55;pointer-events:none}

/* ---------- header app ---------- */
.mt-top{
  background:linear-gradient(135deg,#0A2540,#1668B8 55%,#00B4D8);
  color:#fff;padding:16px 0 60px;border-radius:0 0 26px 26px;position:relative;overflow:hidden;
}
.mt-top::after{content:'';position:absolute;right:-70px;top:-70px;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.07)}
.mt-top::before{content:'';position:absolute;right:60px;bottom:-90px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.05)}
.mt-top .mt-wrap{position:relative;z-index:1}
.mt-tbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mt-tbar .mt-hi{font-size:11.5px;color:#BFE0F5;font-weight:600;letter-spacing:.4px;text-transform:uppercase}
.mt-tbar .mt-nm{font-size:19px;font-weight:800;letter-spacing:-.3px;line-height:1.2}
.mt-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);color:#fff;padding:7px 12px;border-radius:99px;font-size:12px;font-weight:600}
.mt-pill svg{width:14px;height:14px}

/* ---------- statistik ---------- */
.mt-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:-46px;position:relative;z-index:2}
.mt-stat{background:#fff;border-radius:var(--r);padding:13px 12px;box-shadow:var(--sh);text-align:center}
.mt-stat b{display:block;font-size:23px;font-weight:800;letter-spacing:-.5px;color:var(--navy);line-height:1.15}
.mt-stat span{font-size:11px;color:var(--mut);font-weight:600}

/* ---------- toolbar ---------- */
.mt-tools{display:flex;gap:9px;margin:16px 0 12px}
.mt-search{flex:1;position:relative}
.mt-search .mt-in{padding-left:38px;height:44px;background:#fff}
.mt-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--dim)}
.mt-tools .mt-btn{height:44px;white-space:nowrap}

/* ---------- kartu properti ---------- */
.mt-grid{display:grid;grid-template-columns:1fr;gap:13px;padding-bottom:26px}
.mt-prop{background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;border:1px solid rgba(228,235,244,.9)}
.mt-prop-hd{position:relative;aspect-ratio:16/9;background:var(--soft2)}
.mt-prop-hd img{width:100%;height:100%;object-fit:cover}
.mt-prop-hd .mt-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:var(--dim);font-size:12px;background:repeating-linear-gradient(135deg,#F0F6FC,#F0F6FC 10px,#F7FBFF 10px,#F7FBFF 20px)}
.mt-prop-hd .mt-noimg svg{width:30px;height:30px}
.mt-badges{position:absolute;left:10px;top:10px;display:flex;gap:6px;flex-wrap:wrap}
.mt-bdg{background:rgba(10,37,64,.86);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.4px;padding:4px 9px;border-radius:99px;backdrop-filter:blur(4px)}
.mt-bdg.blue{background:rgba(14,126,228,.94)}
.mt-bdg.off{background:rgba(91,114,144,.9)}
.mt-prop-bd{padding:13px 14px 14px}
.mt-prop-bd h3{margin:0 0 3px;font-size:16px;font-weight:800;letter-spacing:-.2px}
.mt-prop-loc{display:flex;align-items:center;gap:5px;color:var(--mut);font-size:12.5px}
.mt-prop-loc svg{width:13px;height:13px;flex:none;color:var(--cyan)}
.mt-prop-row{display:flex;align-items:baseline;gap:8px;margin-top:9px;flex-wrap:wrap}
.mt-price{font-size:17px;font-weight:800;color:var(--navy);letter-spacing:-.4px}
.mt-price em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--mut)}
.mt-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.mt-chip{background:var(--soft2);color:var(--navy2);border-radius:8px;padding:5px 9px;font-size:11.5px;font-weight:600}
.mt-chip b{color:var(--blue)}
.mt-acts{display:flex;gap:7px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.mt-acts .mt-btn{flex:1}
.mt-icb{width:38px;height:38px;flex:none;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--soft);color:var(--mut);transition:.15s}
.mt-icb:active{background:var(--line)}
.mt-icb svg{width:16px;height:16px}

/* ---------- kosong / info ---------- */
.mt-empty{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:34px 22px;text-align:center}
.mt-empty svg{width:46px;height:46px;color:#C6D8E9;margin-bottom:10px}
.mt-empty h3{margin:0 0 5px;font-size:16px}
.mt-empty p{margin:0 0 16px;color:var(--mut);font-size:13px}
.mt-info{display:flex;gap:9px;background:#F0F7FF;border:1px solid #D5E7FA;border-radius:var(--r2);padding:11px 13px;font-size:12.5px;color:#204A73;margin-bottom:13px}
.mt-info svg{width:16px;height:16px;flex:none;color:var(--blue);margin-top:1px}

/* ---------- sheet / modal ---------- */
.mt-sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.mt-scrim{position:absolute;inset:0;background:rgba(8,26,45,.5);backdrop-filter:blur(2px);animation:mtFade .18s ease}
.mt-panel{
  position:relative;background:#fff;width:100%;max-height:94vh;border-radius:22px 22px 0 0;
  box-shadow:var(--sh2);display:flex;flex-direction:column;animation:mtUp .24s cubic-bezier(.22,.9,.28,1);
}
.mt-ph{display:flex;align-items:center;gap:11px;padding:15px 16px 12px;border-bottom:1px solid var(--line);flex:none}
.mt-ph .mt-grab{position:absolute;left:50%;top:7px;transform:translateX(-50%);width:42px;height:4px;border-radius:99px;background:#D8E3EE}
.mt-ph h3{margin:0;font-size:16.5px;font-weight:800;letter-spacing:-.2px;flex:1}
.mt-ph .mt-sub{margin:2px 0 0;font-size:12px;color:var(--mut);font-weight:500}
.mt-pb{padding:16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mt-pf{display:flex;gap:9px;padding:12px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff;flex:none}
.mt-pf .mt-btn{flex:1}
@keyframes mtUp{from{transform:translateY(26px);opacity:.4}to{transform:none;opacity:1}}
@keyframes mtFade{from{opacity:0}to{opacity:1}}

/* ---------- unggah foto ---------- */
.mt-up{border:1.5px dashed #C9DCEE;border-radius:var(--r2);background:var(--soft);padding:11px;display:flex;gap:11px;align-items:center;cursor:pointer;transition:.15s}
.mt-up:active{border-color:var(--blue)}
.mt-up .mt-thumb{width:82px;height:62px;flex:none;border-radius:9px;overflow:hidden;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--dim)}
.mt-up .mt-thumb img{width:100%;height:100%;object-fit:cover}
.mt-up .mt-thumb svg{width:22px;height:22px}
.mt-up .mt-up-tx{font-size:12.5px}
.mt-up .mt-up-tx b{display:block;color:var(--navy2);font-size:13px}
.mt-up .mt-up-tx span{color:var(--dim)}
.mt-up-busy{opacity:.6;pointer-events:none}
.mt-note{margin:7px 0 0;font-size:11.5px;line-height:1.55;color:var(--dim)}
.mt-note b{color:var(--mut);font-weight:700}

/* ---------- daftar tipe kamar ---------- */
.mt-roomlist{display:flex;flex-direction:column;gap:10px}
.mt-room{border:1px solid var(--line);border-radius:var(--r2);padding:11px;display:flex;gap:11px;align-items:flex-start}
.mt-room .mt-rimg{width:70px;height:56px;flex:none;border-radius:9px;overflow:hidden;background:var(--soft2);display:flex;align-items:center;justify-content:center;color:var(--dim)}
.mt-room .mt-rimg img{width:100%;height:100%;object-fit:cover}
.mt-room .mt-rb{flex:1;min-width:0}
.mt-room .mt-rb h4{margin:0 0 2px;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-room .mt-rb .mt-rp{font-size:14px;font-weight:800;color:var(--navy);letter-spacing:-.3px}
.mt-room .mt-rb .mt-rp em{font-style:normal;font-size:11px;color:var(--mut);font-weight:600}
.mt-room .mt-rmeta{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.mt-rbtns{display:flex;flex-direction:column;gap:6px}

/* ---------- toast ---------- */
.mt-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:90;
  background:var(--navy);color:#fff;padding:12px 18px;border-radius:12px;font-size:13.5px;font-weight:600;
  box-shadow:0 12px 30px rgba(10,37,64,.3);max-width:88vw;text-align:center;animation:mtFade .18s ease;
}
.mt-toast.err{background:#B32020}
.mt-toast.ok{background:#0E7A3C}

/* ---------- skeleton & spinner ---------- */
.mt-skel{background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.mt-skel .s1{height:170px;background:linear-gradient(90deg,#EEF4FA,#F7FBFF,#EEF4FA);background-size:200% 100%;animation:mtShim 1.2s linear infinite}
.mt-skel .s2{height:14px;margin:13px;border-radius:6px;background:#EEF4FA}
.mt-skel .s3{height:14px;margin:13px;width:60%;border-radius:6px;background:#EEF4FA}
@keyframes mtShim{from{background-position:200% 0}to{background-position:-200% 0}}
.mt-spin{width:17px;height:17px;border:2.2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:mtRot .7s linear infinite;display:inline-block}
.mt-spin.dark{border-color:rgba(14,126,228,.25);border-top-color:var(--blue)}
@keyframes mtRot{to{transform:rotate(360deg)}}

/* ---------- footer ---------- */
.mt-foot{text-align:center;color:var(--dim);font-size:11.5px;padding:6px 0 30px;line-height:1.7}
.mt-foot b{color:var(--mut)}
/* --- pendaftaran mandiri mitra: CTA, link tebal, checkbox setuju --- */
.mt-callto{display:grid;gap:9px;margin-top:12px}
a.mt-btn{text-decoration:none}
.mt-linkbig{display:block;text-align:center;font-weight:700;font-size:13px;color:var(--blue);text-decoration:none;padding:10px;border-radius:var(--r2);background:#F0F7FF;border:1px solid #D5E7FA}
.mt-linkbig:hover{background:#E4F0FE}
.mt-check{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--mut);margin:2px 0 14px;line-height:1.5;cursor:pointer}
.mt-check input{width:17px;height:17px;flex:none;margin-top:1px;accent-color:var(--blue);cursor:pointer}
.mt-check span{display:block}

/* ---------- desktop ---------- */
@media(min-width:700px){
  body{font-size:15px}
  .mt-grid{grid-template-columns:1fr 1fr;gap:16px}
  .mt-stats{gap:13px;max-width:620px}
  .mt-stat{padding:16px}
  .mt-stat b{font-size:27px}
  .mt-stat span{font-size:12px}
  .mt-login{background:
    radial-gradient(1100px 520px at 50% -160px,#124a86 0%,rgba(18,74,134,0) 70%),
    linear-gradient(160deg,#0A2540 0%,#12355B 42%,#F5F9FD 42.2%,#F5F9FD 100%);}
  .mt-sheet{align-items:center}
  .mt-panel{max-width:580px;border-radius:20px;max-height:88vh;animation:mtPop .22s cubic-bezier(.22,.9,.28,1)}
  .mt-ph .mt-grab{display:none}
  .mt-ph{padding:17px 20px 14px}
  .mt-pb{padding:20px}
  .mt-pf{padding:14px 20px}
  .mt-toast{left:auto;right:26px;transform:none;bottom:26px}
}
@media(min-width:1020px){
  .mt-grid{grid-template-columns:repeat(3,1fr)}
  .mt-top{padding:20px 0 64px}
}
@media(max-width:360px){
  .mt-stats{gap:7px}
  .mt-stat{padding:11px 8px}
  .mt-stat b{font-size:20px}
  .mt-stat span{font-size:10px}
  .mt-btn{padding:0 14px;font-size:13.5px}
}

/* ---------- layar MENUNGGU VERIFIKASI admin (26 Sep 2026) ---------- */
.mt-wait{text-align:center;padding:4px 0 16px}
.mt-wait-ic{width:58px;height:58px;margin:0 auto 13px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#FFF7E8;border:1px solid #FDE7BC;color:#B7791F}
.mt-wait-ic svg{width:30px;height:30px}
.mt-wait h2{margin:0 0 6px}
.mt-wait .mt-sub{margin:0}
.mt-info.warn{background:#FFF7E8;border-color:#FDE7BC;color:#7A5312}
.mt-info.warn svg{color:#D69E2E}
.mt-bdg.warn{background:rgba(214,158,46,.95)}
.mt-wait-box{border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;margin:0 0 14px}
.mt-wait-row{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:9px 12px;font-size:12.5px;border-top:1px solid var(--line)}
.mt-wait-row:first-child{border-top:0}
.mt-wait-row>span{color:var(--dim);flex:none}
.mt-wait-row>b{color:var(--navy2);text-align:right;word-break:break-word}

/* ---------- galeri foto kamar (boleh banyak) ---------- */
.mt-ups{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.mt-ups-i{position:relative;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--soft2);aspect-ratio:1/1;cursor:pointer}
.mt-ups-i img{width:100%;height:100%;object-fit:cover;display:block}
.mt-ups-x{position:absolute;right:3px;top:3px;width:20px;height:20px;line-height:20px;border-radius:50%;background:rgba(9,26,48,.66);color:#fff;font-size:11px;font-weight:800;text-align:center}
.mt-ups-b{position:absolute;left:3px;bottom:3px;background:var(--blue);color:#fff;font-size:9.5px;font-weight:800;padding:2px 6px;border-radius:999px;font-style:normal}
.mt-ups-add{border:1.5px dashed #C9DCEE;border-radius:10px;background:var(--soft);aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--blue);cursor:pointer}
.mt-ups-add span{font-size:20px;line-height:1}
.mt-ups-add b{font-size:11px;font-weight:800}
.mt-f.busy .mt-ups-add,.mt-ups.busy .mt-ups-add{opacity:.6;pointer-events:none}
.mt-irow{display:grid;grid-template-columns:1fr 1.25fr 32px;gap:7px;align-items:center;margin-bottom:7px}
.mt-irow .mt-in{height:42px;font-size:12.5px}
.mt-irx{border:1px solid var(--line);background:#fff;color:#B42318;border-radius:9px;height:42px;font-size:12px;cursor:pointer}
.mt-iadd{border:1.5px dashed #C9DCEE;border-radius:10px;background:var(--soft);color:var(--blue);font-weight:800;font-size:12px;padding:9px;width:100%;cursor:pointer}
.mt-iadd span{font-size:14px}