/* Palet Business OS: gelap, tenang, satu warna aksen. Dipakai sama di seluruh
   modul Elpix supaya pindah antar aplikasi tidak terasa pindah perusahaan. */
:root{
  --bg:#0f1115; --panel:#161920; --panel2:#1c2029; --garis:#262b36;
  --teks:#e6e8ee; --redup:#8b93a7; --samar:#5d6577;
  --aksen:#4f7cff; --aksen2:#3a63e0;
  --hijau:#2fbf71; --kuning:#e9b949; --merah:#e2483d;
  --r:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--teks); font-size:14px; line-height:1.55;
  font-family:"Plus Jakarta Sans","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--aksen);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}

/* ---- pintu masuk ---- */
.layarMasuk{display:grid;place-items:center;min-height:100vh;padding:24px}
.kartuMasuk{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--garis);
  border-radius:16px;padding:30px}
.merek{font-weight:800;letter-spacing:.14em;font-size:15px}
.merek span{color:var(--aksen)}
.kartuMasuk .sub{color:var(--redup);font-size:13px;margin:8px 0 22px}
.kartuMasuk label{display:block;margin-bottom:14px;font-size:12px;color:var(--redup)}
.kartuMasuk input{width:100%;margin-top:6px;padding:11px 13px;border-radius:10px;
  border:1px solid var(--garis);background:#10131a}
.kartuMasuk input:focus{outline:none;border-color:var(--aksen)}
.kartuMasuk button{width:100%;margin-top:6px;padding:12px;border:0;border-radius:10px;
  background:var(--aksen);color:#fff;font-weight:700;cursor:pointer}
.pesanGalat{margin:14px 0 0;background:#3a1a1a;border:1px solid #6b2a2a;color:#ffb4ab;
  border-radius:9px;padding:9px 12px;font-size:13px}

/* ---- kerangka ---- */
.kerangka{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.sisi{background:#12151c;border-right:1px solid var(--garis);padding:18px 14px;
  display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow:auto}
.sisi .merek{padding:4px 10px 18px}
.sisi a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  color:var(--redup);font-weight:500}
.sisi a:hover{background:var(--panel);color:var(--teks);text-decoration:none}
.sisi a.kini{background:var(--aksen);color:#fff}
.sisi .pisah{margin-top:auto;padding-top:14px;border-top:1px solid var(--garis);font-size:12px;color:var(--samar)}
/* `min-width:0` wajib: kolom grid bawaannya tidak boleh menyusut di bawah
   lebar min-content isinya, jadi satu baris panjang di dalam sini melebarkan
   SELURUH halaman dan memunculkan gulungan mendatar — bukan gulungan di dalam
   kotaknya sendiri. */
.utama{padding:26px 30px 70px;max-width:1280px;min-width:0}
@media(max-width:820px){
  .kerangka{grid-template-columns:1fr}
  .sisi{position:static;height:auto;flex-direction:row;flex-wrap:wrap;overflow:visible}
  .sisi .merek{width:100%;padding-bottom:8px}
  .utama{padding:18px 16px 60px}
}

/* ---- isi ---- */
h1{font-size:23px;font-weight:800;margin:0 0 4px}
h2{font-size:16px;font-weight:700;margin:26px 0 12px}
.redup{color:var(--redup);font-size:13px;margin:0 0 20px}
.baris{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dorong{margin-left:auto}

.tombol{display:inline-flex;align-items:center;gap:7px;background:var(--aksen);color:#fff;border:0;
  border-radius:9px;padding:9px 15px;font-weight:600;cursor:pointer;white-space:nowrap}
.tombol:hover{background:var(--aksen2);text-decoration:none}
.tombol.sunyi{background:var(--panel2);color:var(--teks);border:1px solid var(--garis)}
.tombol.sunyi:hover{background:#242938}
.tombol.bahaya{background:#3a1a1a;color:#ffb4ab;border:1px solid #6b2a2a}
.tombol.kecil{padding:5px 10px;font-size:12px;border-radius:7px}
.tombol[disabled]{opacity:.5;cursor:not-allowed}

.petak{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.kartu{background:var(--panel);border:1px solid var(--garis);border-radius:var(--r);padding:16px}
.kartu.klik{cursor:pointer}
.kartu.klik:hover{border-color:#38405a}
.angka{font-size:26px;font-weight:800;line-height:1.2}
.label{color:var(--redup);font-size:12px;text-transform:uppercase;letter-spacing:.07em}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--redup);font-weight:600;font-size:11px;text-transform:uppercase;
  letter-spacing:.07em;padding:9px 10px;border-bottom:1px solid var(--garis)}
td{padding:10px;border-bottom:1px solid #1e222c;vertical-align:top}
tbody tr:hover{background:#151922}
.tabelBungkus{background:var(--panel);border:1px solid var(--garis);border-radius:var(--r);overflow:auto}

.cari{flex:1;min-width:180px;padding:9px 13px;border-radius:9px;border:1px solid var(--garis);
  background:var(--panel);color:var(--teks)}
.cari:focus{outline:none;border-color:var(--aksen)}

.tanda{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600}
.tanda.hidup{background:rgba(47,191,113,.15);color:#6ee7a8}
.tanda.draf{background:rgba(233,185,73,.15);color:#f0cd78}
.tanda.netral{background:var(--panel2);color:var(--redup)}

.kosong{padding:40px 20px;text-align:center;color:var(--redup)}
.muat{padding:30px;text-align:center;color:var(--samar)}

/* ---- daftar langkah ---- */
.langkah{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--garis);
  border-radius:var(--r);padding:12px 14px;margin-bottom:9px}
.langkah .no{width:26px;height:26px;border-radius:7px;background:var(--panel2);display:grid;
  place-items:center;font-size:12px;color:var(--redup);flex:none}
.langkah .nama{font-weight:600}
.langkah .alamat{color:var(--samar);font-size:12px;font-family:ui-monospace,Menlo,Consolas,monospace}

/* ---- tirai ---- */
.tirai{position:fixed;inset:0;background:rgba(6,8,12,.72);display:grid;place-items:center;
  padding:24px;z-index:60}
.tirai .kotak{background:var(--panel);border:1px solid var(--garis);border-radius:16px;
  padding:24px;width:100%;max-width:520px;max-height:86vh;overflow:auto}
.tirai h3{margin:0 0 16px;font-size:17px}
.tirai label{display:block;margin-bottom:13px;font-size:12px;color:var(--redup)}
.tirai input,.tirai select,.tirai textarea{width:100%;margin-top:6px;padding:10px 12px;border-radius:9px;
  border:1px solid var(--garis);background:#10131a;color:var(--teks)}
.tirai textarea{min-height:110px;resize:vertical;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.tirai input:focus,.tirai select:focus,.tirai textarea:focus{outline:none;border-color:var(--aksen)}

.roti{color:var(--samar);font-size:12px;margin:0 0 10px}
.roti a{color:var(--redup)}

/* --- alamat publik ------------------------------------------------------
   Alamat ditampilkan UTUH di mana-mana, bukan sebagai potongan jalur. Yang
   disalin orang dari layar ini langsung bisa ditempel ke iklan atau ke WA
   tanpa ditambahi nama domain dari ingatan. */
.tautan{display:flex;align-items:center;gap:6px;min-width:0}
.tautan a{color:var(--samar);font-size:12px;font-family:ui-monospace,Menlo,Consolas,monospace;
text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tautan a:hover{color:var(--aksen);text-decoration:underline}
.tautan .domain{color:var(--redup)}
.salin{flex:0 0 auto;background:none;border:1px solid var(--garis);color:var(--redup);
border-radius:6px;padding:1px 7px;font:inherit;font-size:11px;cursor:pointer;line-height:1.7}
.salin:hover{border-color:var(--aksen);color:var(--teks)}
.salin.sudah{border-color:#2fbf71;color:#6ee7a8}
.grupTautan{background:var(--panel);border:1px solid var(--garis);border-radius:var(--r);
padding:14px 16px;margin-bottom:12px}
.grupTautan h2{margin:0 0 4px;font-size:14px;font-weight:700}
.grupTautan .ket{color:var(--redup);font-size:12.5px;margin:0 0 10px}
.barisTautan{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--garis)}
.barisTautan:first-of-type{border-top:0}
.barisTautan .judul{flex:0 0 32%;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barisTautan .judul small{display:block;color:var(--samar);font-size:11.5px}
/* Kolom alamat WAJIB boleh menyusut (`min-width:0`). Tanpa itu isi <a> yang
   panjang memaksa barisnya melebar, dan seluruh layar dapat gulungan mendatar —
   alamat paling kanan jadi tidak terlihat sama sekali. */
.barisTautan>.tautan,.isiTautan{flex:1 1 0;min-width:0}
.isiTautan{display:flex;flex-direction:column;gap:3px}
.isiTautan .lama{display:flex;align-items:center;gap:6px;min-width:0}
.isiTautan .lama>b{flex:0 0 auto;color:var(--samar);font-size:11px;font-weight:600;
text-transform:uppercase;letter-spacing:.04em}
@media(max-width:760px){.barisTautan{flex-wrap:wrap}.barisTautan .judul{flex:1 0 100%}}

/* Link Bio */
.bioIsian{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin-bottom:6px}
.bioIsian label{font-size:12px;color:var(--redup)}
.bioIsian .lebar{grid-column:1/-1}
.bioIsian input:not([type=checkbox]),.bioIsian textarea,.bioTabel input:not([type=checkbox]){width:100%;margin-top:6px;padding:9px 11px;border-radius:9px;
  background:var(--panel2);border:1px solid var(--garis)}
.bioIsian input[type=color]{height:40px;padding:4px}
.bioTabel input:not([type=checkbox]){margin-top:0;padding:7px 9px}