/* =====================================================================
   Maknai: rasa aplikasi di HP (2026-11-12)
   Dipakai situs publik dan semua portal. Desktop (>= 1024px) tidak berubah.
   ===================================================================== */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }

/* ── Navigasi bawah ─────────────────────────────────────────────── */
.mk-tabbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 -6px 24px rgba(15, 23, 42, .06);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  justify-content: space-around; align-items: stretch;
}
.mk-tab {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 4px 2px; border: 0; background: none; cursor: pointer; text-decoration: none;
  font: 600 10.5px/1.15 Poppins, system-ui, sans-serif; color: #6b7280; letter-spacing: .01em;
  -webkit-user-select: none; user-select: none;
}
.mk-tab span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-tab-ikon {
  width: 52px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, transform .15s ease;
}
.mk-tab-ikon svg { width: 22px; height: 22px; }
.mk-tab.on { color: var(--mk-tab-warna, #10595E); }
.mk-tab.on .mk-tab-ikon { background: var(--mk-tab-latar, rgba(16, 89, 94, .12)); }
.mk-tab:active .mk-tab-ikon { transform: scale(.9); }
.mk-tab.utama .mk-tab-ikon { background: var(--mk-tab-utama, #FFDBAA); color: #074347; box-shadow: 0 4px 12px rgba(7, 67, 71, .18); }
.mk-tab.utama { color: #074347; }
.mk-tab .mk-tab-badge {
  position: absolute; transform: translate(12px, -10px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: #e11d48; color: #fff; font-size: 9.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* ── Bilah muat di atas (saat pindah halaman) ───────────────────── */
.mk-muat { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 99999; background: linear-gradient(90deg, #FFDBAA, #FFC35A); opacity: 0; transition: width .4s ease, opacity .3s ease; pointer-events: none; }
.mk-muat.jalan { opacity: 1; width: 75%; transition: width 6s cubic-bezier(.1, .7, .2, 1), opacity .2s; }

/* ── Ajakan pasang aplikasi ─────────────────────────────────────── */
.mk-pasang {
  position: fixed; left: 12px; right: 12px; bottom: calc(140px + env(safe-area-inset-bottom)); z-index: 9991;
  display: none; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 18px;
  background: #fff; border: 1px solid rgba(15, 23, 42, .08); box-shadow: 0 12px 40px rgba(15, 23, 42, .18);
  font: 13px/1.4 Poppins, system-ui, sans-serif; color: #374151; animation: mkNaik .35s cubic-bezier(.16, 1, .3, 1);
}
.mk-pasang.on { display: flex; }
.mk-pasang img { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.mk-pasang b { display: block; color: #111827; font-size: 14px; }
.mk-pasang .aksi { margin-left: auto; display: flex; gap: 6px; flex: none; }
.mk-pasang button { border: 0; border-radius: 999px; padding: 9px 14px; font: 600 12.5px/1 Poppins, system-ui, sans-serif; cursor: pointer; }
.mk-pasang .ya { background: #10595E; color: #fff; }
.mk-pasang .tidak { background: #f3f4f6; color: #4b5563; }
@keyframes mkNaik { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Khusus HP dan tablet ───────────────────────────────────────── */
@media (max-width: 1023px) {
  .mk-tabbar { display: flex; }
  body { overscroll-behavior-y: none; }
  a, button, [role="button"], input, select, textarea, label { touch-action: manipulation; }

  /* Situs publik: beri ruang untuk navigasi bawah */
  body.mk-ada-tab { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  body.mk-ada-tab .mk-tanpa-tab-hp { display: none !important; }

  /* Portal (kerangka mk-shell): tinggi layar HP yang benar + ruang navigasi bawah */
  .mk-shell { height: 100vh; height: 100dvh; }
  body.mk-ada-tab .mk-content { padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
  /* Laci menu samping menutupi navigasi bawah agar tombol Keluar tetap terjangkau */
  body.mk-ada-tab .mk-sidebar { z-index: 9995; }
  body.mk-ada-tab .mk-overlay { z-index: 9994; }
  .mk-topbar { height: 58px; padding: 0 14px; }
  .mk-topbar h1 { font-size: 17px; }

  /* Tombol chat jadi tombol bulat di atas navigasi bawah */
  body.mk-ada-tab #mk-ai-launch { bottom: calc(78px + env(safe-area-inset-bottom)) !important; right: 14px !important; padding: 14px !important; border-radius: 999px; }
  body.mk-ada-tab #mk-ai-launch span { display: none; }
  body.mk-ada-tab #mk-ai-launch { box-shadow: 0 0 0 2px #fff, 0 10px 28px rgba(7, 67, 71, .3) !important; }
  body.mk-ada-tab #mk-ai-panel { bottom: calc(78px + env(safe-area-inset-bottom)); height: calc(100dvh - 100px - env(safe-area-inset-bottom)); }
  body.mk-ai-mobile-chat-open .mk-tabbar { display: none; }

  /* Kaki halaman publik lebih ringkas: kolom tautan berdampingan */
  .mk-ft .grid { grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 32px; }
  .mk-ft .grid > div:first-child, .mk-ft .grid > .sm\:col-span-2 { grid-column: 1 / -1; }
  .mk-ft .mk-ft-a { font-size: 14px; }
  .mk-ft ul { gap: 9px; }

  /* Umpan balik sentuh pada kartu dan tombol */
  a.group:active, a[class*="rounded-3xl"]:active, a[class*="rounded-2xl"]:active, .mk-btn:active { transform: scale(.985); transition: transform .1s ease; }

  /* Input minimal 16px agar iPhone tidak memperbesar layar saat mengetik */
  input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=search],
  input[type=date], input[type=time], input[type=url], select, textarea { font-size: 16px !important; }
}

/* Saat dibuka sebagai aplikasi terpasang */
@media (display-mode: standalone) {
  body { -webkit-user-select: none; user-select: none; }
  input, textarea, [contenteditable], p, td, li, h1, h2, h3, .mk-boleh-pilih { -webkit-user-select: text; user-select: text; }
  .mk-sembunyi-di-aplikasi { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mk-muat, .mk-pasang, .mk-tab-ikon { transition: none !important; animation: none !important; }
}