/* Neon Dark Modern UI */
:root{
  --bg: #0b1116;
  --panel: rgba(9, 18, 25, 0.7);
  --panel-solid: #0e1720;
  --text: #d6f1ff;
  --muted: #93a4b3;
  --neon: #15e3ff;
  --neon-soft: #0cc7e6;
  --accent: #5cf3ff;
  --danger: #ff5c7a;
  --glass: rgba(14, 23, 32, 0.6);
  --glow: 0 0 20px rgba(21,227,255,0.25), 0 0 40px rgba(21,227,255,0.12);
  --radius: 18px;
  --card-radius: 22px;
  --shadow: 0 10px 32px rgba(0,0,0,.45);
  --grid-gap: 18px;
  --border: 1px solid rgba(21, 227, 255, 0.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body.body-dark{
  margin:0; background: radial-gradient(1200px 1200px at 10% 0%, #0b1922 0%, #091219 45%, #070e14 70%);
  color:var(--text); font: 15px/1.6 "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
  position: relative;
}
/* Subtle convex globe grid overlay */
body.body-dark::before{
  content:""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background-image: url("../img/bg_globe.svg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  opacity: .32;
  filter: blur(.2px);
}
a{color:var(--accent); text-decoration:none}
.app-header{
  border-bottom: var(--border);
  background: linear-gradient(180deg, rgba(15,25,35,.9), rgba(10,18,26,.6));
  position: sticky; top:0; z-index: 20;
  box-shadow: var(--shadow);
}
.app-header .brand{ display:flex; align-items:center; gap:16px; padding:18px 28px; }
.brand-center{ justify-content:center; text-align:center; }
.logo{ width:52px; height:52px; filter: drop-shadow(0 0 8px rgba(21,227,255,0.35)); }
.logo.small{ width:24px; height:24px; }
.brand-text h1{ margin:0; letter-spacing:.08em; font-weight:800; font-size:26px; color:var(--text); text-shadow: 0 0 6px rgba(21,227,255,0.25); }
.brand-text p{ margin:2px 0 0; color: var(--muted) }

/* right nav with logout */
.nav-right{
  position:absolute; right:18px; top:14px; display:flex; align-items:center; gap:8px;
}
.btn-logout{
  border-radius:12px; padding:8px 12px; border:1px solid rgba(21,227,255,.35); background:transparent; color:var(--text);
  box-shadow:var(--glow); transition:.2s ease; text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:12px;
}
.btn-logout:hover{ transform: translateY(-1px); border-color: var(--accent); }

.container{ max-width:1100px; margin: 28px auto 80px; padding: 0 20px; }

/* Search */
.search-bar{ display:flex; gap:12px; align-items:center; padding:14px; border:var(--border); border-radius:var(--radius); background:var(--glass); box-shadow:var(--glow); }
.search-bar input{ flex:1; background:transparent; color:var(--text); border:none; outline:none; font-size:18px; padding:10px 12px; }
.btn-secondary, .btn-primary{
  border-radius:12px; padding:10px 16px; border:1px solid rgba(21,227,255,.35); background:transparent; color:var(--text); cursor:pointer;
  transition:.2s ease; box-shadow:var(--glow);
}
.btn-primary{ background: linear-gradient(90deg, rgba(6,170,199,.25), rgba(18,220,255,.2)); }
.btn-secondary:hover, .btn-primary:hover{ transform: translateY(-1px); border-color: var(--accent); }

/* Grid */
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--grid-gap); margin-top:22px; }

/* Identity Card */
.card{
  display:flex; gap:12px; border: var(--border); background: linear-gradient(180deg, rgba(10,18,26,.6), rgba(8,14,21,.55));
  border-radius: var(--card-radius); box-shadow: var(--glow), var(--shadow); padding:14px; align-items: center;
  cursor:pointer; position:relative; overflow:hidden;
}
.card:before{
  content:""; position:absolute; inset:-2px; pointer-events:none;
  background: radial-gradient(400px 140px at -10% -10%, rgba(21,227,255,.18), transparent 40%);
  filter: blur(18px);
}
.card:hover{ transform: translateY(-1px); border-color: rgba(21,227,255,.45); }
.card .photo-wrap{ width:72px; height:72px; border-radius: 14px; overflow:hidden; flex: 0 0 72px; border:1px solid rgba(21,227,255,.35); background:#061016; display:grid; place-items:center;}
.card img.photo{ width:100%; height:100%; object-fit: cover; }
.card .meta{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.card .name{ font-weight:800; letter-spacing:.06em; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card .lines{ display:flex; gap:16px; flex-wrap:wrap; color:var(--muted); font-size:13px; }
.badge{
  border: 1px dashed rgba(21,227,255,.35); padding:2px 8px; border-radius: 999px; font-size:12px;
  background: rgba(12, 199, 230, .08);
}

/* Pagination */
.pagination{ display:flex; gap:8px; justify-content:center; align-items:center; margin-top:22px; flex-wrap:wrap; }
.page-btn{
  border:1px solid rgba(21,227,255,.35); background:transparent; color:var(--text);
  padding:8px 12px; border-radius:10px; cursor:pointer; box-shadow:var(--glow); font-size:13px;
}
.page-btn[disabled]{ opacity:.45; cursor:not-allowed; }
.page-btn.active{ border-color: var(--accent); background: rgba(12,199,230,.08); }

/* Modal */
/* Modal */
.modal{
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  padding: 16px;               /* ruang tepi agar muat di hp kecil */
  z-index: 9999;
}
.modal.hidden{ display:none; }

/* Kartu modal jadi fleksibel & responsif */
.modal-dialog{
  width: min(900px, 92vw);
  background: var(--panel-solid);
  border: var(--border);
  border-radius: 20px;
  box-shadow: var(--glow), var(--shadow);
  display: flex;               /* column layout: header + body */
  flex-direction: column;
  max-height: min(88dvh, 720px);  /* kunci tinggi sesuai layar */
  overflow: hidden;
  position: relative;
}

.modal-close{
  position: absolute; right: 10px; top: 10px; margin: 12px;
  background: transparent; border: 1px solid rgba(21,227,255,.35);
  color: var(--text); border-radius: 10px; width: 34px; height: 34px; cursor: pointer;
}

.detail-header{
  display: flex; gap: 16px; align-items: center;
  padding: 14px 16px;
  border-bottom: var(--border);
}
.detail-header .big-photo{
  width: 96px; height: 96px; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(21,227,255,.4);
}
.detail-header .title{ display: flex; flex-direction: column; gap: 6px; }
.detail-header .title h3{ margin: 0; font-size: 22px; }

.modal-body{
  overflow-y: auto;
  overflow-x: hidden;  
  padding: 16px 18px;
  overflow: auto;              /* scroll konten di dalam modal */
  -webkit-overflow-scrolling: touch;
  flex: 1;                     /* isi mengisi sisa tinggi */
}

/* Pembungkus khusus untuk konten yang boleh geser ke samping */
.scroll-x{
  overflow-x: auto;                   /* aktifkan scroll horizontal */
  -webkit-overflow-scrolling: touch;
}

/* Pastikan ada lebar minimum agar scroll benar-benar muncul */
.scroll-x > .kv{
  min-width: 640px;                   /* sesuaikan dengan lebar desain */
}

.kv{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 8px 16px;
  padding: 10px 4px 4px;
}
.kv .k{ color: var(--muted); }
.kv .v{
  color: var(--text);
  border-bottom: 1px dotted rgba(21,227,255,.18);
  padding-bottom: 6px;
  overflow-wrap: anywhere;     /* aman untuk teks panjang */
  word-break: break-word;
}

/* Mobile tweaks */
@media (max-width: 480px){
  .modal-body{ overflow-x: auto; }    /* berjaga-jaga */
  .scroll-x > .kv{ min-width: 560px; }
  .modal{ padding: 0; }        /* biar full-bleed */
  .modal-dialog{
    width: 100vw;
    height: 100dvh;            /* benar-benar setinggi layar hp */
    max-height: 100dvh;
    border-radius: 0;          /* gaya full-screen sheet */
  }
  .detail-header{
    padding: 16px;
    gap: 12px;
    align-items: flex-start;
    flex-direction: column;    /* foto di atas, teks di bawah */
  }
  .detail-header .big-photo{ width: 84px; height: 84px; }
  .kv{ grid-template-columns: 1fr; }  /* jadi 1 kolom */
}

/* Safe area untuk iOS notch */
@supports (padding: max(0px)){
  .modal-dialog{ padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}
kv .v{ color: var(--text); border-bottom: 1px dotted rgba(21,227,255,.18); padding-bottom: 6px; }
/* Kunci scroll saat modal terbuka */
body.no-scroll{ overflow: hidden; }


/* Footer */
.app-footer{ position: sticky; top:100%; padding:22px 16px; margin-top:60px; background: linear-gradient(180deg, rgba(9,16,23,.6), rgba(7,12,17,.9));
  border-top: var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.footer-inner{ max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.footer-left{ display:flex; gap:10px; align-items:center; }
.footer-right{ display:flex; gap:10px; align-items:center; color: var(--muted); }
.footer-right .dot{ width:6px; height:6px; border-radius:50%; background: var(--neon-soft); box-shadow:0 0 8px rgba(21,227,255,.8); }
.footer-right .tag{ border:1px solid rgba(21,227,255,.35); padding:4px 8px; border-radius:999px; background: rgba(12,199,230,.06); }
.footer-right .tag-strong{ text-transform:uppercase; font-weight:800; letter-spacing:.08em; color:#dff8ff; }
.glass{ background: var(--glass); box-shadow: var(--glow), var(--shadow); border: var(--border); border-radius: var(--radius); }

/* Login */
.login-container{ display:grid; place-items:center; margin: 60px 16px; }
.login-card{ width: min(420px, 92%); padding: 22px; display:flex; flex-direction:column; gap:10px; }
.login-card h2{ margin:0 0 6px; }
.login-card label{ display:flex; flex-direction:column; gap:6px; color:var(--muted); }
.login-card input{ background: transparent; border: 1px solid rgba(21,227,255,.35); border-radius: 10px; color: var(--text); padding: 10px 12px; }
.alert{ color:#ffdce0; background: rgba(255,92,122,.1); border:1px solid rgba(255,92,122,.35); border-radius:12px; padding:10px 12px; }