/* =============================================================================
   RAYSU-RENTAL TERINTEGRASI — sistem tampilan

   ## Arah desain
   Latar TERANG tapi tidak putih. Putih murni pada layar seluas dashboard
   memantul terlalu keras di ruangan ber-lampu neon — dan kantor rental
   biasanya begitu. Latar biru-abu sangat muda membuat kartu putih di atasnya
   justru terbaca sebagai "kertas", dan itu yang memberi kesan premium tanpa
   perlu satu pun bayangan tebal.

   Palet mengikuti website Raysu Multimedia (indigo + amber) supaya dashboard
   ini terasa satu keluarga dengan situs perusahaannya, bukan produk pihak lain.
   ============================================================================= */

/* ---------- 1. Font, ditanam sendiri ---------------------------------------
   Bukan dari Google Fonts. Dashboard ini dibuka di kantor rental yang
   internetnya sering lambat; font yang menunggu server luar membuat seluruh
   teks berkedip berganti bentuk beberapa detik setelah halaman tampil. */
@font-face{font-family:Inter;src:url(../fonts/Inter-Regular.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/Inter-Medium.woff2)format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/Inter-SemiBold.woff2)format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/Inter-Bold.woff2)format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/Inter-ExtraBold.woff2)format("woff2");font-weight:800;font-display:swap}

:root{
  /* Merek */
  --indigo:#4F46E5;
  --indigo-tua:#3730A3;
  --indigo-muda:#818CF8;
  --indigo-tipis:#EEF0FE;
  --amber:#F59E0B;
  --amber-tipis:#FEF5E7;

  /* Isyarat */
  --hijau:#0E9E70;
  --hijau-tipis:#E6F6F0;
  --merah:#DC2626;
  --merah-tipis:#FDECEC;
  --langit:#0EA5E9;

  /* Netral — inti kesan "lembut" ada di sini */
  --tinta:#0C1524;
  --tinta-2:#33405A;
  --redup:#66748F;
  --redup-2:#94A0B8;
  --garis:#E4E9F2;
  --garis-2:#EEF1F7;
  --kertas:#FFFFFF;
  --latar:#F4F7FC;      /* latar halaman: terang, tapi bukan putih */
  --latar-2:#EDF1F8;

  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Bayangan berlapis. Satu bayangan tunggal terlihat seperti stiker;
     dua lapis — sangat tipis rapat + lebar sangat lembut — meniru cara
     kertas benar-benar menaungi meja. */
  --bayang:0 1px 2px rgba(12,21,36,.04), 0 4px 16px rgba(12,21,36,.05);
  --bayang-naik:0 2px 6px rgba(12,21,36,.06), 0 16px 40px rgba(12,21,36,.10);

  --lengkung:14px;
  --lengkung-kecil:9px;
  --sisi:262px;          /* lebar bilah samping */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:14px;
  line-height:1.55;
  color:var(--tinta-2);
  background:var(--latar);
  /* Angka di tabel keuangan & armada harus berbaris lurus ke bawah.
     Tanpa ini, "111" tampak jauh lebih sempit daripada "999". */
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;color:var(--tinta);font-weight:700;letter-spacing:-.015em}
h1{font-size:22px;font-weight:800}
h2{font-size:16px}
h3{font-size:14px}
p{margin:0 0 10px}
a{color:var(--indigo);text-decoration:none}
a:hover{text-decoration:underline}
small{font-size:12px}

/* =============================================================================
   2. Kerangka halaman
   ============================================================================= */
.kulit{display:flex;min-height:100vh}

/* ---------- Bilah samping ---------- */
.sisi{
  width:var(--sisi);flex:0 0 var(--sisi);
  background:var(--kertas);
  border-right:1px solid var(--garis);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.sisi__merek{
  display:flex;align-items:center;gap:11px;
  padding:20px 20px 18px;border-bottom:1px solid var(--garis-2);
}
.sisi__merek img{width:34px;height:auto}
.sisi__merek b{display:block;font-size:14.5px;color:var(--tinta);letter-spacing:-.02em}
.sisi__merek span{display:block;font-size:11px;color:var(--redup);line-height:1.3}

.sisi__menu{padding:14px 12px;flex:1;overflow-y:auto}
.sisi__grup{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--redup-2);padding:14px 10px 7px;
}
.sisi__menu a{
  display:flex;align-items:center;gap:11px;
  padding:9px 11px;margin-bottom:2px;border-radius:var(--lengkung-kecil);
  color:var(--tinta-2);font-weight:500;font-size:13.5px;
  transition:background .14s, color .14s;
}
.sisi__menu a:hover{background:var(--latar-2);text-decoration:none}
.sisi__menu a.aktif{background:var(--indigo-tipis);color:var(--indigo-tua);font-weight:600}
.sisi__menu a.aktif svg{color:var(--indigo)}
.sisi__menu svg{width:17px;height:17px;flex:0 0 17px;color:var(--redup)}
.lencana{
  margin-left:auto;min-width:19px;height:19px;padding:0 6px;
  border-radius:999px;background:var(--merah);color:#fff;
  font-size:10.5px;font-weight:700;display:grid;place-items:center;
}
.lencana--redup{background:var(--redup-2)}

.sisi__kaki{padding:14px;border-top:1px solid var(--garis-2)}
.kartu-aku{display:flex;align-items:center;gap:10px}
.awal{
  width:34px;height:34px;flex:0 0 34px;border-radius:10px;
  background:linear-gradient(135deg,var(--indigo),var(--indigo-muda));
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;
}
.kartu-aku b{display:block;font-size:13px;color:var(--tinta);line-height:1.3}
.kartu-aku span{display:block;font-size:11px;color:var(--redup)}

/* ---------- Isi ---------- */
.isi{flex:1;min-width:0;display:flex;flex-direction:column}
.batang{
  position:sticky;top:0;z-index:20;
  background:rgba(244,247,252,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--garis);
  padding:14px 26px;display:flex;align-items:center;gap:14px;
}
.batang h1{flex:1;min-width:0}
.batang__ket{font-size:12.5px;color:var(--redup);font-weight:500}
.wadah{padding:22px 26px 40px;max-width:1500px;width:100%}

/* =============================================================================
   3. Kartu & petak
   ============================================================================= */
.kartu{
  background:var(--kertas);border:1px solid var(--garis);
  border-radius:var(--lengkung);box-shadow:var(--bayang);
}
.kartu__kepala{
  padding:15px 18px;border-bottom:1px solid var(--garis-2);
  display:flex;align-items:center;gap:12px;
}
.kartu__kepala h2{flex:1;min-width:0}
.kartu__isi{padding:18px}
.kartu__isi--rapat{padding:0}

.petak{display:grid;gap:14px}
.petak--4{grid-template-columns:repeat(4,1fr)}
.petak--3{grid-template-columns:repeat(3,1fr)}
.petak--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1200px){.petak--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.petak--3,.petak--2{grid-template-columns:1fr}}
@media(max-width:640px){.petak--4{grid-template-columns:1fr}}

/* ---------- Kartu angka ---------- */
.angka{
  background:var(--kertas);border:1px solid var(--garis);
  border-radius:var(--lengkung);padding:16px 17px;
  box-shadow:var(--bayang);position:relative;overflow:hidden;
  transition:transform .16s, box-shadow .16s;
}
.angka:hover{transform:translateY(-2px);box-shadow:var(--bayang-naik)}
/* Pita warna tipis di tepi kiri. Warna penuh sebagai latar kartu akan
   membuat empat kartu berjajar tampak seperti empat peringatan sekaligus. */
.angka::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--indigo)}
.angka--hijau::before{background:var(--hijau)}
.angka--amber::before{background:var(--amber)}
.angka--merah::before{background:var(--merah)}
.angka--redup::before{background:var(--redup-2)}
.angka__atas{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.angka__ikon{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--indigo-tipis);color:var(--indigo);
}
.angka--hijau .angka__ikon{background:var(--hijau-tipis);color:var(--hijau)}
.angka--amber .angka__ikon{background:var(--amber-tipis);color:var(--amber)}
.angka--merah .angka__ikon{background:var(--merah-tipis);color:var(--merah)}
.angka--redup .angka__ikon{background:var(--latar-2);color:var(--redup)}
.angka__ikon svg{width:16px;height:16px}
.angka__label{font-size:12px;color:var(--redup);font-weight:500}
.angka__nilai{font-size:27px;font-weight:800;color:var(--tinta);letter-spacing:-.03em;line-height:1.1}
.angka__kaki{font-size:11.5px;color:var(--redup-2);margin-top:4px}

/* =============================================================================
   4. Tabel
   -----------------------------------------------------------------------------
   Tanpa garis vertikal sama sekali, dan garis mendatarnya sangat muda. Kisi
   penuh garis membuat mata memburu kotak alih-alih membaca baris — dan yang
   dicari orang di layar ini selalu satu baris: satu unit, satu rental.
   ============================================================================= */
.tabel-bungkus{overflow-x:auto;border-radius:var(--lengkung)}
table.tabel{width:100%;border-collapse:collapse;font-size:13.5px}
table.tabel thead th{
  position:sticky;top:0;z-index:2;
  background:var(--latar-2);
  padding:11px 14px;text-align:left;white-space:nowrap;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--redup);border-bottom:1px solid var(--garis);
}
table.tabel thead th.urut{cursor:pointer;user-select:none}
table.tabel thead th.urut:hover{color:var(--indigo)}
table.tabel thead th .panah{opacity:.35;margin-left:4px}
table.tabel thead th.naik .panah,table.tabel thead th.turun .panah{opacity:1;color:var(--indigo)}
table.tabel thead th.turun .panah{transform:rotate(180deg);display:inline-block}
table.tabel tbody td{padding:12px 14px;border-bottom:1px solid var(--garis-2);vertical-align:middle}
table.tabel tbody tr{transition:background .12s}
table.tabel tbody tr:hover{background:var(--latar)}
table.tabel tbody tr:last-child td{border-bottom:0}
table.tabel .kanan{text-align:right}
table.tabel .tengah{text-align:center}
.sel-utama{font-weight:600;color:var(--tinta)}
.sel-ket{font-size:11.5px;color:var(--redup);display:block;margin-top:1px}

/* =============================================================================
   5. Lencana status
   ============================================================================= */
.tanda{
  display:inline-flex;align-items:center;gap:6px;
  padding:3.5px 10px;border-radius:999px;
  font-size:11.5px;font-weight:600;white-space:nowrap;
  /* Warna diambil dari basis data lewat properti kustom, bukan dari kelas
     yang ditulis mati di sini. Menambah status baru cukup satu baris di tabel
     master — tidak ada CSS yang perlu ikut diubah. */
  color:var(--nada,var(--redup));
  background:color-mix(in srgb, var(--nada,var(--redup)) 11%, transparent);
}
.tanda i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px}

/* =============================================================================
   6. Tombol & kolom isian
   ============================================================================= */
.tbl{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;border-radius:var(--lengkung-kecil);
  border:1px solid var(--garis);background:var(--kertas);
  color:var(--tinta-2);font:600 13px/1 var(--font);cursor:pointer;
  transition:background .14s, border-color .14s, transform .1s, box-shadow .14s;
  white-space:nowrap;text-decoration:none;
}
.tbl:hover{background:var(--latar-2);text-decoration:none}
.tbl:active{transform:translateY(1px)}
.tbl svg{width:15px;height:15px}
.tbl--utama{background:var(--indigo);border-color:var(--indigo);color:#fff;box-shadow:0 2px 8px rgba(79,70,229,.28)}
.tbl--utama:hover{background:var(--indigo-tua);border-color:var(--indigo-tua)}
.tbl--hijau{background:var(--hijau);border-color:var(--hijau);color:#fff}
.tbl--hijau:hover{background:#0B7F5A;border-color:#0B7F5A}
.tbl--merah{background:var(--kertas);border-color:#F3C6C6;color:var(--merah)}
.tbl--merah:hover{background:var(--merah-tipis)}
.tbl--kecil{padding:6px 11px;font-size:12px}
.tbl:disabled{opacity:.5;cursor:not-allowed}

label.kolom{display:block;margin-bottom:13px}
label.kolom>span{display:block;font-size:12.5px;font-weight:600;color:var(--tinta-2);margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=date],
input[type=number],input[type=search],select,textarea{
  width:100%;padding:9px 11px;font:400 13.5px/1.45 var(--font);
  color:var(--tinta);background:var(--kertas);
  border:1px solid var(--garis);border-radius:var(--lengkung-kecil);
  transition:border-color .14s, box-shadow .14s;
}
input:focus,select:focus,textarea:focus{
  outline:0;border-color:var(--indigo-muda);
  box-shadow:0 0 0 3px rgba(79,70,229,.13);
}
textarea{resize:vertical;min-height:74px}
select{appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366748F' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:15px;
  padding-right:31px;cursor:pointer;
}

/* ---------- Bilah saring ---------- */
.saring{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.saring select,.saring input{width:auto;min-width:135px}
.saring .cari{position:relative;flex:1;min-width:210px;max-width:340px}
.saring .cari input{padding-left:33px;width:100%}
.saring .cari svg{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--redup-2);pointer-events:none;
}

/* Keping saring cepat */
.keping{display:flex;flex-wrap:wrap;gap:6px}
.keping button{
  padding:6px 13px;border-radius:999px;border:1px solid var(--garis);
  background:var(--kertas);color:var(--tinta-2);
  font:600 12.5px/1 var(--font);cursor:pointer;transition:all .14s;
}
.keping button:hover{border-color:var(--indigo-muda);color:var(--indigo)}
.keping button.aktif{background:var(--indigo);border-color:var(--indigo);color:#fff}

/* =============================================================================
   7. Keadaan kosong, kabar, muat
   ============================================================================= */
.kosong{padding:46px 20px;text-align:center;color:var(--redup)}
.kosong svg{width:38px;height:38px;color:var(--redup-2);margin-bottom:11px}
.kosong b{display:block;color:var(--tinta);font-size:14.5px;margin-bottom:5px}
.kosong p{max-width:420px;margin:0 auto;font-size:13px}

.kabar{padding:12px 15px;border-radius:var(--lengkung-kecil);font-size:13px;margin-bottom:16px}
.kabar--ok{background:var(--hijau-tipis);color:#0A6B4C;border:1px solid #BFE7D8}
.kabar--galat{background:var(--merah-tipis);color:#9B1C1C;border:1px solid #F5C9C9}
.kabar--info{background:var(--indigo-tipis);color:var(--indigo-tua);border:1px solid #D6D8FB}

/* =============================================================================
   8. Jendela sembul
   ============================================================================= */
.tirai{
  position:fixed;inset:0;z-index:80;
  background:rgba(12,21,36,.42);backdrop-filter:blur(3px);
  display:none;place-items:center;padding:20px;
}
.tirai.buka{display:grid}

/* Tirai penutup MENU di layar sempit sengaja diberi lapisan lebih rendah
   daripada jendela sembul.
   
   Sebelumnya keduanya memakai lapisan yang sama, dan karena tirai menu ditulis
   paling akhir di dalam halaman, ia menang dan menutupi jendela yang baru
   dibuka: pengguna melihat layar yang gelap dan buram, dengan seluruh kolom
   isian tersembunyi di baliknya. Tidak ada galat, tidak ada yang kosong —
   formulirnya ada, hanya tertutup. */
#tirai{z-index:50}
.sembul{
  background:var(--kertas);border-radius:16px;box-shadow:var(--bayang-naik);
  width:100%;max-width:470px;max-height:90vh;overflow:auto;
  animation:naik .18s ease-out;
}
@keyframes naik{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.sembul__kepala{padding:17px 20px;border-bottom:1px solid var(--garis-2);display:flex;align-items:center;gap:12px}
.sembul__kepala h2{flex:1}
.sembul__isi{padding:20px}
.sembul__kaki{padding:14px 20px;border-top:1px solid var(--garis-2);display:flex;justify-content:flex-end;gap:9px;background:var(--latar)}
.tutup{background:0;border:0;cursor:pointer;color:var(--redup);padding:5px;border-radius:7px;line-height:0}
.tutup:hover{background:var(--latar-2);color:var(--tinta)}
.tutup svg{width:17px;height:17px}

/* ---------- Roti panggang ---------- */
.roti-wadah{position:fixed;right:20px;bottom:20px;z-index:120;display:flex;flex-direction:column;gap:9px}
.roti{
  background:var(--tinta);color:#fff;padding:12px 17px;border-radius:11px;
  font-size:13px;font-weight:500;box-shadow:var(--bayang-naik);
  animation:naik .2s ease-out;max-width:340px;
}
.roti--ok{background:var(--hijau)}
.roti--galat{background:var(--merah)}

/* =============================================================================
   9. Halaman masuk
   ============================================================================= */
.halaman-masuk{
  min-height:100vh;display:grid;place-items:center;padding:20px;
  /* Gradasi sangat halus, bukan warna rata. Bidang besar berwarna rata
     terlihat seperti halaman yang belum selesai dimuat. */
  background:
    radial-gradient(1100px 520px at 12% -10%, #E9ECFE 0%, transparent 60%),
    radial-gradient(900px 460px at 100% 100%, #FDF3E3 0%, transparent 55%),
    var(--latar);
}
.kartu-masuk{
  background:var(--kertas);border:1px solid var(--garis);border-radius:18px;
  box-shadow:var(--bayang-naik);padding:32px 30px;width:100%;max-width:392px;
}
.kartu-masuk__merek{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.kartu-masuk__merek img{width:40px}
.kartu-masuk h1{font-size:19px;margin-bottom:3px}
.kartu-masuk .ket{color:var(--redup);font-size:13px;margin-bottom:22px}
.kartu-masuk .tbl{width:100%;margin-top:6px;padding:11px}

/* =============================================================================
   10. Halaman pemasang
   ============================================================================= */
.halaman-pasang{background:var(--latar);padding:36px 16px}
.kartu-pasang{
  max-width:600px;margin:0 auto;background:var(--kertas);
  border:1px solid var(--garis);border-radius:16px;
  box-shadow:var(--bayang);padding:30px;
}
.kartu-pasang h2{margin:24px 0 12px;padding-top:16px;border-top:1px solid var(--garis-2);font-size:14px}
.kartu-pasang h2:first-of-type{border-top:0;padding-top:0;margin-top:18px}
.kartu-pasang label{display:block;margin-bottom:12px}
.kartu-pasang label>*{margin-top:5px}
.kartu-pasang .ket{color:var(--redup);margin-bottom:18px}
.langkah-akhir{padding-left:19px;margin:12px 0}
.langkah-akhir li{margin-bottom:7px}

/* =============================================================================
   11. Bagian kecil lain
   ============================================================================= */
.baris-rapat{display:flex;align-items:center;gap:9px}
.baris-rapat--jauh{justify-content:space-between}
.tumpuk{display:flex;flex-direction:column;gap:2px}
.redup{color:var(--redup)}
.tebal{font-weight:600;color:var(--tinta)}
.mini{font-size:11.5px}
.pisah{height:1px;background:var(--garis-2);margin:16px 0}

/* Bilah perbandingan mendatar — dipakai ringkasan per merek & per kelas.
   Angka saja menuntut orang membandingkan sendiri; bilahnya menjawab
   "mana yang terbanyak" dalam sekali lihat. */
.bilah{display:grid;grid-template-columns:1fr 46px;gap:11px;align-items:center;margin-bottom:11px}
.bilah__nama{font-size:12.5px;font-weight:500;color:var(--tinta-2);margin-bottom:5px}
.bilah__alur{height:7px;border-radius:999px;background:var(--latar-2);overflow:hidden}
.bilah__isi{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--indigo),var(--indigo-muda));
  transition:width .5s cubic-bezier(.2,.8,.2,1)}
.bilah__nilai{text-align:right;font-weight:700;color:var(--tinta);font-size:13px}

/* Titik hidup — menandai data yang baru saja diperbarui */
.denyut{width:7px;height:7px;border-radius:50%;background:var(--hijau);position:relative;flex:0 0 7px}
.denyut::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--hijau);opacity:.45;animation:denyut 2s ease-out infinite}
@keyframes denyut{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1.5);opacity:0}}
.denyut--redup{background:var(--redup-2)}
.denyut--redup::after{display:none}

/* =============================================================================
   12. Layar sempit
   -----------------------------------------------------------------------------
   Administrator membuka ini dari ponsel saat sedang di jalan — itu justru
   saat pertanyaan "ada unit kosong tidak?" paling sering muncul.
   ============================================================================= */
.tombol-sisi{display:none;background:0;border:0;padding:6px;cursor:pointer;color:var(--tinta-2);border-radius:8px}
.tombol-sisi:hover{background:var(--latar-2)}
.tombol-sisi svg{width:21px;height:21px}

@media(max-width:900px){
  .sisi{
    position:fixed;left:0;top:0;z-index:60;
    transform:translateX(-100%);transition:transform .22s ease-out;
    box-shadow:var(--bayang-naik);
  }
  .sisi.tampil{transform:none}
  .tombol-sisi{display:block}
  .wadah{padding:16px 15px 32px}
  .batang{padding:12px 15px}
  h1{font-size:18px}
  .angka__nilai{font-size:23px}
  table.tabel{font-size:13px}
  table.tabel tbody td,table.tabel thead th{padding:10px}
}

/* Kolom yang boleh disembunyikan di layar sempit — ditandai di HTML-nya,
   bukan ditebak oleh CSS berdasarkan urutan. Kolom ke-berapa yang penting
   berbeda di tiap tabel. */
@media(max-width:760px){ .sempit-sembunyi{display:none} }
@media(max-width:560px){ .kecil-sembunyi{display:none} }

@media print{
  .sisi,.batang,.saring,.tbl,.tombol-sisi{display:none!important}
  body{background:#fff}
  .kartu{box-shadow:none;border-color:#ccc}
}

/* =============================================================================
   13. PAPAN KAPASITAS — pengganti deretan kartu angka
   -----------------------------------------------------------------------------
   Empat kartu angka berjajar adalah bentuk dashboard paling umum di dunia, dan
   itu justru masalahnya: ia memaksa pembaca menjumlahkan sendiri untuk tahu
   proporsinya, lalu tetap tidak menjawab "jadi sekarang bagaimana?".

   Diganti satu panel yang menaruh ANGKA UTAMA di kiri atas — tempat mata jatuh
   pertama kali — dan menaruh perbandingannya sebagai satu bilah utuh. Satu
   bilah menjawab "berapa bagiannya" tanpa aritmetika.
   ============================================================================= */
.papan{
  background:
    radial-gradient(760px 300px at 88% -30%, rgba(79,70,229,.10) 0%, transparent 62%),
    radial-gradient(560px 260px at 4% 120%, rgba(14,158,112,.09) 0%, transparent 60%),
    var(--kertas);
  border:1px solid var(--garis);border-radius:18px;
  box-shadow:var(--bayang);padding:22px 24px;margin-bottom:16px;
  position:relative;overflow:hidden;
}
.papan__atas{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start}
.papan__utama{flex:1;min-width:250px}
.papan__label{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--redup-2);margin-bottom:7px;display:flex;align-items:center;gap:7px;
}
.papan__angka{
  font-size:clamp(40px,6vw,58px);font-weight:800;
  letter-spacing:-.045em;line-height:.98;
  /* Angka besar diberi gradasi tipis, bukan warna rata. Bidang tinta seluas
     ini terasa berat; gradasi halus membuatnya terbaca sebagai judul, bukan
     sebagai blok. */
  background:linear-gradient(135deg,var(--tinta) 0%,var(--indigo-tua) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.papan__satuan{font-size:15px;font-weight:600;color:var(--redup);margin-left:8px;letter-spacing:0}
.papan__ket{font-size:13.5px;color:var(--redup);margin-top:7px}
.papan__aksi{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}

/* Bilah kapasitas — satu batang, tiap ruas satu status */
.kapasitas{margin-top:20px}
.kapasitas__alur{
  display:flex;height:34px;border-radius:11px;overflow:hidden;
  background:var(--latar-2);
  box-shadow:inset 0 0 0 1px rgba(12,21,36,.05);
}
.kapasitas__ruas{
  position:relative;display:grid;place-items:center;
  color:#fff;font-size:12px;font-weight:700;
  /* Celah 2px antar ruas dibuat dari bayangan sisi, bukan margin: margin
     menggeser lebarnya sehingga proporsinya tidak lagi jujur. */
  box-shadow:2px 0 0 var(--kertas);
  transition:width .7s cubic-bezier(.2,.8,.2,1), filter .15s;
  min-width:0;overflow:hidden;white-space:nowrap;
}
.kapasitas__ruas:last-child{box-shadow:none}
.kapasitas__ruas:hover{filter:brightness(1.08)}
.kapasitas__kunci{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px}
.kapasitas__kunci span{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--redup)}
.kapasitas__kunci i{width:9px;height:9px;border-radius:3px;flex:0 0 9px}
.kapasitas__kunci b{color:var(--tinta)}

/* =============================================================================
   14. PETA KETERSEDIAAN 14 HARI
   -----------------------------------------------------------------------------
   Ini yang tidak dipunyai dashboard rental mana pun: bukan "berapa unit siap
   HARI INI", melainkan "berapa yang siap SABTU DEPAN". Pertanyaan itulah yang
   sebenarnya diajukan orang ketika menelepon administrator.

   Angkanya DICETAK di dalam sel, bukan disembunyikan di balik hover. Peta panas
   yang isinya baru terbaca setelah kursor menyentuhnya sudah gagal sebagai
   gambar — dan di ponsel, hover tidak ada sama sekali.
   ============================================================================= */
.peta-bungkus{overflow-x:auto}
.peta{width:100%;border-collapse:separate;border-spacing:3px;font-size:12px;min-width:620px}
.peta th{
  font-size:10.5px;font-weight:700;color:var(--redup-2);
  text-transform:uppercase;letter-spacing:.05em;padding:0 0 5px;text-align:center;
  white-space:nowrap;
}
.peta th.peta__baris{text-align:left;padding-left:2px}
.peta td.peta__baris{
  text-align:left;font-size:12.5px;font-weight:600;color:var(--tinta-2);
  white-space:nowrap;padding-right:8px;width:1%;
}
.peta__sel{
  height:34px;border-radius:8px;text-align:center;font-weight:700;
  color:var(--tinta-2);position:relative;
  transition:transform .12s, box-shadow .12s;
}
.peta__sel:hover{transform:scale(1.09);box-shadow:var(--bayang-naik);z-index:3}
.peta__sel--nol{color:var(--redup-2);font-weight:500}
/* Hari ini ditandai garis, bukan warna: warna sudah dipakai untuk jumlah, dan
   dua arti pada satu isyarat visual membuat keduanya tidak terbaca. */
.peta__hariini{outline:2px solid var(--indigo);outline-offset:1px}
.peta__pekan{color:var(--indigo)!important}
.peta__kunci{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--redup);margin-top:12px;flex-wrap:wrap}
.peta__tangga{display:flex;gap:2px}
.peta__tangga i{width:22px;height:9px;border-radius:2px}

/* =============================================================================
   15. MATRIKS TITIK ARMADA
   -----------------------------------------------------------------------------
   Satu titik = satu mobil sungguhan. Tidak ada pembulatan, tidak ada persen
   yang menyembunyikan bahwa "50%" itu ternyata dua unit dari empat.

   Bentuk ini juga menjawab yang tidak bisa dijawab diagram lingkaran: melihat
   SEKALIGUS berapa banyak, milik siapa, dan sedang apa.
   ============================================================================= */
.matriks{display:flex;flex-direction:column;gap:15px}
.matriks__grup{display:grid;grid-template-columns:178px 1fr;gap:13px;align-items:start}
@media(max-width:700px){.matriks__grup{grid-template-columns:1fr;gap:6px}}
.matriks__nama{font-size:13px;font-weight:600;color:var(--tinta);padding-top:2px}
.matriks__nama small{display:block;color:var(--redup);font-weight:400;font-size:11.5px}
.matriks__titik{display:flex;flex-wrap:wrap;gap:5px}
.titik{width:19px;height:19px;border-radius:6px;position:relative;transition:transform .12s}
.titik:hover{transform:scale(1.3);z-index:4}
.titik::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  background:var(--tinta);color:#fff;font-size:11.5px;font-weight:500;
  padding:6px 10px;border-radius:7px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .13s;z-index:5;
  box-shadow:var(--bayang-naik);
}
.titik:hover::after{opacity:1}

/* =============================================================================
   16. GARIS WAKTU PENGEMBALIAN
   -----------------------------------------------------------------------------
   Menggantikan tabel "segera kembali". Tabel memberi tanggal; garis waktu
   memberi JARAK — dan yang menentukan keputusan adalah jaraknya.
   ============================================================================= */
.waktu{position:relative;padding-left:26px}
.waktu::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--indigo) 0%,var(--garis) 100%);border-radius:2px}
.waktu__baris{position:relative;padding:9px 0;display:flex;align-items:center;gap:12px}
.waktu__titik{
  position:absolute;left:-24px;top:50%;transform:translateY(-50%);
  width:11px;height:11px;border-radius:50%;background:var(--kertas);
  border:2.5px solid var(--indigo);
}
.waktu__baris--lewat .waktu__titik{border-color:var(--merah)}
.waktu__isi{flex:1;min-width:0}
.waktu__nama{font-size:13.5px;font-weight:600;color:var(--tinta)}
.waktu__ket{font-size:11.5px;color:var(--redup)}
.waktu__kapan{
  font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;
  background:var(--indigo-tipis);color:var(--indigo-tua);white-space:nowrap;
}
.waktu__baris--lewat .waktu__kapan{background:var(--merah-tipis);color:#9B1C1C}
.waktu__baris--hariini .waktu__kapan{background:var(--hijau-tipis);color:#0A6B4C}

/* =============================================================================
   17. KARTU UNIT — halaman cari pinjaman
   -----------------------------------------------------------------------------
   Bukan tabel. Yang dilakukan orang di halaman ini adalah MEMILIH, bukan
   membaca — dan memilih berjalan lewat perbandingan sekilas antar kandidat,
   bukan lewat menyusuri baris. Kartu memberi tiap kandidat wilayahnya sendiri;
   baris tabel membuat semuanya terlihat sama sampai dibaca satu per satu.
   ============================================================================= */
.rak{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.unit{
  background:var(--kertas);border:1px solid var(--garis);
  border-radius:var(--lengkung);box-shadow:var(--bayang);
  padding:16px 17px 15px;display:flex;flex-direction:column;gap:12px;
  transition:transform .16s, box-shadow .16s, border-color .16s;
  position:relative;overflow:hidden;
}
.unit:hover{transform:translateY(-3px);box-shadow:var(--bayang-naik);border-color:var(--indigo-muda)}
/* Sapuan warna sangat tipis di sudut kanan atas — memberi kartu arah pandang
   tanpa memakai bidang warna yang akan bersaing dengan tombolnya. */
.unit::before{
  content:"";position:absolute;right:-58px;top:-58px;width:150px;height:150px;
  border-radius:50%;background:radial-gradient(circle,rgba(79,70,229,.09),transparent 70%);
  pointer-events:none;
}
.unit__atas{display:flex;align-items:flex-start;gap:11px}
.unit__lambang{
  width:42px;height:42px;flex:0 0 42px;border-radius:12px;
  background:linear-gradient(140deg,var(--indigo-tipis),#E4F5EE);
  display:grid;place-items:center;color:var(--indigo);
}
.unit__lambang svg{width:21px;height:21px}
.unit__judul{flex:1;min-width:0}
.unit__nama{font-size:14.5px;font-weight:700;color:var(--tinta);letter-spacing:-.02em}
.unit__plat{font-size:12px;color:var(--redup);margin-top:1px}
.unit__cap{display:flex;flex-wrap:wrap;gap:5px}
.cap{
  font-size:11.5px;font-weight:600;padding:3.5px 9px;border-radius:7px;
  background:var(--latar-2);color:var(--tinta-2);white-space:nowrap;
}
.cap--utama{background:var(--indigo-tipis);color:var(--indigo-tua)}
.unit__pemilik{
  display:flex;align-items:center;gap:9px;padding-top:11px;
  border-top:1px solid var(--garis-2);
}
.unit__pemilik .awal{width:29px;height:29px;flex:0 0 29px;border-radius:9px;font-size:12px}
.unit__pemilik b{font-size:12.5px;color:var(--tinta);display:block;line-height:1.25}
.unit__pemilik small{font-size:11.5px;color:var(--redup)}
.unit__kaki{display:flex;gap:8px;align-items:center}
.unit__kaki .tbl{flex:1}

/* Pita ketersediaan tujuh hari di dalam kartu.
   Menjawab "kapan bisa dipakai" tanpa membuka apa pun — pertanyaan kedua yang
   pasti muncul begitu pertanyaan pertama ("ada apa saja") terjawab. */
.pita{display:flex;gap:3px}
.pita__hari{
  flex:1;height:22px;border-radius:5px;display:grid;place-items:center;
  font-size:9.5px;font-weight:700;color:var(--redup-2);background:var(--latar-2);
}
.pita__hari--bebas{background:var(--hijau-tipis);color:#0A6B4C}
.pita__hari--sibuk{background:var(--indigo-tipis);color:var(--indigo-tua)}
.pita__ket{font-size:11px;color:var(--redup-2);margin-top:5px}

/* =============================================================================
   18. PAPAN ALUR — halaman pengajuan pinjam
   -----------------------------------------------------------------------------
   Peminjaman punya URUTAN yang tetap: diajukan, disetujui, dipakai, diminta
   kembali, diterima. Tabel menyembunyikan urutan itu di dalam satu kolom
   status; papan alur menjadikannya bentuk ruang, sehingga "sekarang giliran
   siapa" terbaca tanpa satu kata pun.
   ============================================================================= */
.alur{display:grid;gap:13px;grid-template-columns:repeat(4,1fr);align-items:start}
@media(max-width:1150px){.alur{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.alur{grid-template-columns:1fr}}
.lajur{background:var(--latar-2);border-radius:var(--lengkung);padding:11px;min-height:120px}
.lajur__kepala{
  display:flex;align-items:center;gap:8px;padding:2px 4px 11px;
  font-size:12px;font-weight:700;color:var(--tinta-2);
}
.lajur__kepala i{width:8px;height:8px;border-radius:3px;flex:0 0 8px}
.lajur__jml{
  margin-left:auto;background:var(--kertas);border-radius:999px;
  padding:1px 8px;font-size:11px;color:var(--redup);
}
.lajur__kosong{
  padding:22px 10px;text-align:center;font-size:12px;color:var(--redup-2);
  border:1.5px dashed var(--garis);border-radius:var(--lengkung-kecil);
}

.tiket{
  background:var(--kertas);border:1px solid var(--garis);border-radius:11px;
  padding:13px;margin-bottom:9px;box-shadow:0 1px 2px rgba(12,21,36,.04);
  transition:transform .14s, box-shadow .14s;
}
.tiket:hover{transform:translateY(-2px);box-shadow:var(--bayang)}
.tiket:last-child{margin-bottom:0}
.tiket__nama{font-size:13.5px;font-weight:700;color:var(--tinta);letter-spacing:-.015em}
.tiket__lawan{font-size:11.5px;color:var(--redup);margin-top:2px}
.tiket__waktu{
  display:flex;align-items:center;gap:6px;margin-top:9px;
  font-size:11.5px;color:var(--tinta-2);font-weight:500;
}
.tiket__biaya{
  margin-top:8px;font-size:12.5px;font-weight:700;color:var(--tinta);
  background:var(--hijau-tipis);border-radius:7px;padding:5px 9px;display:inline-block;
}
.tiket__catatan{
  margin-top:8px;font-size:11.5px;color:var(--tinta-2);line-height:1.45;
  background:var(--latar);border-radius:7px;padding:7px 9px;
  border-left:2.5px solid var(--garis);
}
.tiket__aksi{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap}
.tiket__aksi .tbl{flex:1;min-width:0}
/* Tanda peran: menjelaskan dalam satu kata apakah mobil ini MILIK saya yang
   sedang keluar, atau mobil orang yang sedang saya pakai. Tanpa itu, dua
   tiket yang bentuknya sama persis berarti dua hal yang berlawanan. */
.tiket__peran{
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;display:inline-block;margin-bottom:7px;
}
.tiket__peran--pemilik{background:var(--amber-tipis);color:#8A5A05}
.tiket__peran--peminjam{background:var(--indigo-tipis);color:var(--indigo-tua)}
.tiket--perlu{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(79,70,229,.11)}

/* =============================================================================
   19. KARTU ANGGOTA — halaman rental terhubung
   ============================================================================= */
.kartu-rental{
  background:var(--kertas);border:1px solid var(--garis);border-radius:var(--lengkung);
  box-shadow:var(--bayang);padding:17px;display:flex;flex-direction:column;gap:13px;
  transition:transform .16s, box-shadow .16s;
}
.kartu-rental:hover{transform:translateY(-2px);box-shadow:var(--bayang-naik)}
.kartu-rental--mati{opacity:.62}
.kartu-rental__atas{display:flex;align-items:flex-start;gap:11px}
.kartu-rental__judul{flex:1;min-width:0}
.kartu-rental__nama{font-size:15px;font-weight:700;color:var(--tinta);letter-spacing:-.02em}
.kartu-rental__kota{font-size:12px;color:var(--redup);margin-top:1px}

/* Cincin kesehatan sinkron — dibaca sekilas dari busur yang terisi.
   Angka "3 jam lalu" perlu dibaca; busur cukup dilihat. */
.cincin{width:46px;height:46px;flex:0 0 46px;position:relative}
.cincin svg{transform:rotate(-90deg)}
.cincin__isi{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:10px;font-weight:700;color:var(--tinta);
}
.kartu-rental__bilah{display:flex;height:9px;border-radius:999px;overflow:hidden;background:var(--latar-2)}
.kartu-rental__bilah span{box-shadow:1.5px 0 0 var(--kertas)}
.kartu-rental__bilah span:last-child{box-shadow:none}
.kartu-rental__angka{display:flex;gap:16px}
.kartu-rental__angka div{flex:1}
.kartu-rental__angka b{display:block;font-size:19px;font-weight:800;color:var(--tinta);letter-spacing:-.03em}
.kartu-rental__angka small{font-size:11px;color:var(--redup)}
.kartu-rental__kaki{display:flex;gap:7px;align-items:center;flex-wrap:wrap;
  padding-top:12px;border-top:1px solid var(--garis-2)}

/* Kotak Kode Sambung — tampil sekali saja */
.kode{
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:13px;letter-spacing:.02em;word-break:break-all;
  background:var(--tinta);color:#8DF0C4;padding:13px 15px;border-radius:11px;
  line-height:1.6;
}
.kode-baris{display:flex;gap:8px;align-items:center;margin-top:10px}

/* =============================================================================
   20. OBROL — percakapan antar rental
   -----------------------------------------------------------------------------
   Dua panel: daftar utas di kiri, percakapan di kanan. Bentuk yang sudah
   dikenali semua orang dari aplikasi pesan mana pun — dan di layar yang
   dipakai buru-buru di meja kasir, bentuk yang sudah dikenali lebih berharga
   daripada bentuk yang lebih pintar.
   ============================================================================= */
.obrol{
  display:grid;grid-template-columns:296px 1fr;
  background:var(--kertas);border:1px solid var(--garis);
  border-radius:var(--lengkung);box-shadow:var(--bayang);
  overflow:hidden;
  /* Tinggi dipatok ke layar, bukan ke isinya. Percakapan yang memanjangkan
     halaman membuat kolom ketik ikut turun ke bawah lipatan — dan kolom ketik
     yang harus dicari dengan menggulir adalah alasan orang berhenti membalas. */
  height:calc(100vh - 132px);min-height:440px;
}
@media(max-width:860px){
  .obrol{grid-template-columns:1fr}
  /* Di layar sempit hanya satu panel yang tampil pada satu waktu. */
  .obrol--pilih .obrol__daftar{display:none}
  .obrol:not(.obrol--pilih) .obrol__utas{display:none}
}

.obrol__daftar{border-right:1px solid var(--garis);display:flex;flex-direction:column;min-height:0}
.obrol__cari{padding:12px;border-bottom:1px solid var(--garis-2)}
.obrol__gulir{overflow-y:auto;flex:1;min-height:0}

.utas{
  display:flex;gap:11px;padding:12px;border-bottom:1px solid var(--garis-2);
  cursor:pointer;transition:background .13s;text-decoration:none;color:inherit;
}
.utas:hover{background:var(--latar);text-decoration:none}
.utas.aktif{background:var(--indigo-tipis)}
.utas.aktif .utas__nama{color:var(--indigo-tua)}
.utas__isi{flex:1;min-width:0}
.utas__atas{display:flex;align-items:baseline;gap:8px}
.utas__nama{font-size:13.5px;font-weight:700;color:var(--tinta);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.utas__jam{font-size:10.5px;color:var(--redup-2);flex:0 0 auto}
.utas__cuplik{
  font-size:12px;color:var(--redup);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.utas__unit{
  display:inline-block;margin-top:5px;font-size:10.5px;font-weight:600;
  background:var(--latar-2);color:var(--tinta-2);padding:2px 7px;border-radius:5px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.utas__belum{
  min-width:19px;height:19px;padding:0 6px;border-radius:999px;
  background:var(--indigo);color:#fff;font-size:10.5px;font-weight:700;
  display:grid;place-items:center;align-self:center;flex:0 0 auto;
}

/* ---------- Panel percakapan ---------- */
.obrol__utas{display:flex;flex-direction:column;min-width:0;min-height:0}
.obrol__kepala{
  padding:13px 16px;border-bottom:1px solid var(--garis-2);
  display:flex;align-items:center;gap:11px;background:var(--kertas);
}
.obrol__kepala .awal{width:36px;height:36px;flex:0 0 36px;border-radius:11px}

/* Kartu unit yang sedang dibicarakan, disematkan di bawah kepala.
   Tanpa ini, percakapan "unitnya masih ada?" kehilangan acuannya begitu
   digulir ke atas — dan dua rental bisa membicarakan dua mobil berbeda
   tanpa menyadarinya. */
.obrol__unit{
  margin:12px 16px 0;padding:11px 13px;border-radius:11px;
  background:linear-gradient(120deg,var(--indigo-tipis),#E9F7F1);
  border:1px solid #D8DCFB;display:flex;align-items:center;gap:11px;
}
.obrol__unit svg{color:var(--indigo);flex:0 0 auto}
.obrol__unit b{font-size:13px;color:var(--tinta);display:block;line-height:1.3}
.obrol__unit small{font-size:11.5px;color:var(--redup)}

.obrol__isi{flex:1;overflow-y:auto;padding:16px;min-height:0;
  display:flex;flex-direction:column;gap:3px;
  background:
    radial-gradient(520px 240px at 100% 0%, rgba(79,70,229,.045), transparent 62%),
    var(--latar);
}
.obrol__hari{
  align-self:center;margin:10px 0 6px;font-size:11px;font-weight:600;
  color:var(--redup);background:var(--kertas);border:1px solid var(--garis);
  padding:3px 11px;border-radius:999px;
}

.gelembung{
  max-width:min(72%,520px);padding:9px 13px;border-radius:14px;
  font-size:13.5px;line-height:1.5;word-wrap:break-word;white-space:pre-wrap;
  box-shadow:0 1px 2px rgba(12,21,36,.05);
}
.gelembung--saya{
  align-self:flex-end;background:var(--indigo);color:#fff;
  border-bottom-right-radius:5px;
}
.gelembung--lawan{
  align-self:flex-start;background:var(--kertas);color:var(--tinta);
  border:1px solid var(--garis);border-bottom-left-radius:5px;
}
/* Gelembung berurutan dari pengirim yang sama dirapatkan, dan hanya yang
   terakhir yang memakai sudut runcing. Tanpa itu, lima kalimat beruntun
   terlihat seperti lima percakapan terpisah. */
.gelembung + .gelembung{margin-top:1px}
.gelembung__kaki{
  font-size:10.5px;margin-top:4px;opacity:.72;display:flex;gap:7px;align-items:center;
}
.gelembung--saya .gelembung__kaki{justify-content:flex-end;color:#DCDBFB}
.gelembung--lawan .gelembung__kaki{color:var(--redup)}

.obrol__ketik{
  padding:12px 14px;border-top:1px solid var(--garis-2);background:var(--kertas);
  display:flex;gap:9px;align-items:flex-end;
}
.obrol__ketik textarea{
  flex:1;min-height:42px;max-height:132px;resize:none;border-radius:12px;
  padding:11px 13px;line-height:1.45;
}
.obrol__kirim{
  width:42px;height:42px;flex:0 0 42px;border-radius:12px;padding:0;
  display:grid;place-items:center;
}

.obrol__kosong{
  flex:1;display:grid;place-items:center;padding:30px;text-align:center;
  background:var(--latar);
}

/* -----------------------------------------------------------------------------
   26. SPANDUK "LIHAT SEBAGAI"

   Sengaja memakai warna amber, bukan warna utama: ini bukan bagian dari
   tampilan biasa melainkan keadaan sementara yang harus terbaca sekilas.
   Warna yang menyatu dengan halaman akan berhenti disadari pada menit kelima —
   dan itulah menit saat orang mulai mengira dashboard-nya rusak.
   ----------------------------------------------------------------------------- */
.spanduk-sebagai{
  display:flex;align-items:center;gap:10px;
  padding:10px 20px;
  background:linear-gradient(90deg,#FEF3C7,#FDE68A);
  border-bottom:1px solid #F59E0B;
  color:#78350F;font-size:13px;line-height:1.4;
}
.spanduk-sebagai svg{flex:0 0 auto;color:#B45309}
.spanduk-sebagai b{font-weight:700}
.spanduk-sebagai form{margin:0}

/* -----------------------------------------------------------------------------
   27. TAUTAN PANDUAN DI KAKI MENU
   ----------------------------------------------------------------------------- */
.sisi__panduan{
  display:flex;align-items:center;gap:9px;
  margin:0 0 10px;padding:8px 11px;border-radius:10px;
  background:var(--latar);border:1px solid var(--garis);
  color:var(--redup);text-decoration:none;font-size:12.5px;font-weight:600;
  transition:.15s;
}
.sisi__panduan:hover{
  border-color:var(--indigo-muda);background:var(--indigo-muda);color:var(--indigo);
}

/* -----------------------------------------------------------------------------
   28. KOTAK PENGUMUMAN

   Warnanya datang dari tabel master lewat properti kustom --nada, sama seperti
   lencana status: jenis pengumuman baru cukup ditambah satu baris di basis data
   tanpa menyentuh satu berkas CSS pun.
   ----------------------------------------------------------------------------- */
.kabar-papan{display:grid;gap:9px;margin-bottom:16px}
.kabar-kotak{
  display:flex;gap:11px;align-items:flex-start;
  padding:13px 15px;border-radius:12px;
  background:var(--kertas);
  border:1px solid var(--garis);
  border-left:3px solid var(--nada,#4F46E5);
  box-shadow:var(--bayang);
}
.kabar-kotak__ikon{
  width:28px;height:28px;flex:0 0 28px;border-radius:9px;
  display:grid;place-items:center;
  background:color-mix(in oklab, var(--nada,#4F46E5) 12%, transparent);
  color:var(--nada,#4F46E5);
}
.kabar-kotak__isi{flex:1;min-width:0}
.kabar-kotak__isi b{
  display:block;font-size:13.5px;color:var(--tinta);
  letter-spacing:-.01em;margin-bottom:2px;
}
.kabar-kotak__isi p{font-size:13px;color:var(--tinta-2);line-height:1.55}
.kabar-kotak__isi small{
  display:block;margin-top:6px;font-size:11.5px;color:var(--redup);
}

/* Di halaman masuk kartunya lebih rapat — ruangnya sempit dan yang dicari
   orang di situ tetap formulirnya. */
.halaman-masuk .kabar-papan{margin:0 0 16px}
.halaman-masuk .kabar-kotak{padding:11px 13px;box-shadow:none}
.halaman-masuk .kabar-kotak__isi p{font-size:12.5px}

/* -----------------------------------------------------------------------------
   29. GERBANG — halaman depan sekaligus halaman masuk

   ## Kenapa keduanya terang, bukan gelap di satu sisi
   Percobaan pertama memakai bidang ungu tua di kiri. Ia memang menonjol —
   dan justru itu masalahnya: begitu orang masuk, seluruh dashboard di
   dalamnya terang dan lembut, jadi halaman depannya terasa seperti produk
   yang berbeda. Kesan pertama yang tidak nyambung dengan isinya bukan kesan
   yang baik, cuma kesan yang keras.

   Yang dipakai sekarang: dua bidang terang dengan suhu berbeda. Kiri
   bersemburat hijau-pasir hangat, kanan hampir putih. Bedanya cukup untuk
   memisahkan "penjelasan" dari "formulir" tanpa satu pun bidang gelap.

   ## Kenapa warnanya sedikit
   Satu warna aksi (indigo, hanya di tombol), dan tiga semburat lembut sebagai
   latar. Halaman yang tiap bagiannya berwarna membuat tidak ada bagian yang
   menonjol — termasuk tombol yang seharusnya ditekan.
   ----------------------------------------------------------------------------- */
.gerbang{
  min-height:100vh;display:grid;grid-template-columns:1.12fr 1fr;
  background:var(--latar);
}

/* ------------------------------------------------------------------ KIRI */
.gerbang__kiri{
  position:relative;overflow:hidden;display:flex;align-items:center;
  padding:56px 52px;
  border-right:1px solid var(--garis);
  color:var(--tinta-2);
  background:
    radial-gradient(780px 520px at 88% 6%,  #E8F3EE 0%, transparent 62%),
    radial-gradient(700px 480px at 4% 96%,  #FBF1E4 0%, transparent 58%),
    radial-gradient(620px 420px at 46% 52%, #EFF2FB 0%, transparent 66%),
    #FAFCFE;
}

/* Kisi halus.

   Bidang terang besar tanpa tekstur terlihat seperti halaman yang belum
   selesai dimuat. Garisnya sengaja nyaris tak terlihat — yang dicari kesan
   kertas, bukan pola yang ikut dibaca mata. */
.gerbang__hias{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(19,26,43,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19,26,43,.035) 1px, transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(940px 700px at 34% 44%, #000 0%, transparent 76%);
}
.gerbang__isi{position:relative;max-width:530px}

.gerbang__merek{display:flex;align-items:center;gap:12px;margin-bottom:40px}
.gerbang__merek img{width:42px}
.gerbang__merek b{
  display:block;font-size:15px;color:var(--tinta);letter-spacing:-.02em;font-weight:700;
}
.gerbang__merek span{display:block;font-size:12px;color:var(--redup)}

.gerbang__kiri h1{
  font-size:41px;line-height:1.13;color:var(--tinta);letter-spacing:-.038em;
  margin-bottom:16px;font-weight:760;
}
/* Satu frasa saja yang diberi warna, dan warnanya hijau — warna yang sudah
   berarti "siap sewa" di seluruh dashboard. Memakai warna yang sudah punya
   arti membuatnya terbaca, bukan sekadar meriah. */
.gerbang__kiri h1 em{font-style:normal;color:var(--hijau)}

.gerbang__ket{
  font-size:15.5px;color:var(--tinta-2);line-height:1.68;
  max-width:480px;margin-bottom:32px;
}

.gerbang__angka{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:34px}
.gerbang__angka div{
  flex:1;min-width:120px;padding:15px 17px;border-radius:15px;
  background:rgba(255,255,255,.86);
  border:1px solid var(--garis);
  box-shadow:0 1px 2px rgba(19,26,43,.04), 0 10px 26px rgba(19,26,43,.05);
  backdrop-filter:blur(4px);
}
.gerbang__angka b{
  display:block;font-size:28px;color:var(--tinta);letter-spacing:-.045em;
  line-height:1.08;font-weight:790;
}
.gerbang__angka span{font-size:11.5px;color:var(--redup)}

.gerbang__guna{list-style:none;display:grid;gap:16px;margin-bottom:34px}
.gerbang__guna li{display:flex;gap:13px;align-items:flex-start}
.gerbang__guna i{
  width:35px;height:35px;flex:0 0 35px;border-radius:11px;
  display:grid;place-items:center;
  background:#fff;border:1px solid var(--garis);
  box-shadow:0 1px 2px rgba(19,26,43,.05);
}
/* Tiga ikon, tiga warna — masing-masing warna yang sudah dipakai fiturnya
   sendiri di dalam dashboard, bukan warna baru yang harus dipelajari lagi. */
.gerbang__guna li:nth-child(1) i{color:var(--indigo)}
.gerbang__guna li:nth-child(2) i{color:var(--hijau)}
.gerbang__guna li:nth-child(3) i{color:var(--amber)}
.gerbang__guna b{
  display:block;font-size:14.5px;color:var(--tinta);font-weight:660;
  letter-spacing:-.012em;margin-bottom:2px;
}
.gerbang__guna span{font-size:13.5px;color:var(--redup);line-height:1.55}

.gerbang__kaki{
  font-size:13px;color:var(--redup);padding-top:22px;
  border-top:1px solid var(--garis);
}
.gerbang__kaki b{color:var(--tinta-2)}

/* ----------------------------------------------------------------- KANAN */
.gerbang__kanan{
  display:grid;place-items:center;padding:40px 34px;
  background:var(--kertas);
}
.gerbang__kartu{width:100%;max-width:404px}
.gerbang__kartu h2{font-size:24px;letter-spacing:-.03em;margin-bottom:4px}
.gerbang__sapa{font-size:14px;color:var(--redup);margin-bottom:22px}
.gerbang__kartu form{
  background:var(--latar);border:1px solid var(--garis);border-radius:16px;
  padding:22px;
}
.gerbang__kartu form input{background:var(--kertas)}
.gerbang__kartu .tbl{width:100%;margin-top:10px;padding:11px;justify-content:center}

.gerbang__bantu{margin-top:20px;text-align:center}
.gerbang__bantu p{font-size:12.5px;color:var(--redup);margin-bottom:10px}
.gerbang__bantu a{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;color:var(--tinta-2);text-decoration:none;font-weight:600;
  border:1px solid var(--garis);border-radius:99px;padding:7px 15px;
  background:var(--latar);transition:.15s;
}
.gerbang__bantu a:hover{border-color:var(--garis-2);color:var(--indigo);background:#fff}

.gerbang .kabar-papan{margin-bottom:18px}
.gerbang .kabar-kotak{padding:12px 14px;background:var(--latar)}
.gerbang .kabar-kotak__isi p{font-size:12.5px}

/* -------------------------------------------------------------------- HP */
@media (max-width:900px){
  .gerbang{grid-template-columns:1fr}
  /* Formulir didahulukan di layar sempit.

     Di HP, sisi penjelasan yang panjang akan mendorong formulirnya jauh ke
     bawah — dan yang membuka dashboard dari HP hampir selalu pemilik rental
     yang sudah tahu layanan ini, bukan tamu yang perlu dijelaskan. */
  .gerbang__kanan{order:1;padding:30px 20px 26px;min-height:100vh;align-content:center}
  .gerbang__kiri{
    order:2;padding:38px 22px 44px;
    border-right:0;border-top:1px solid var(--garis);
  }
  .gerbang__kiri h1{font-size:29px}
  .gerbang__ket{font-size:14.5px}
  .gerbang__angka div{min-width:98px;padding:12px 13px}
  .gerbang__angka b{font-size:23px}
}

/* -----------------------------------------------------------------------------
   30. PERBAIKAN TINGGI HALAMAN PESAN

   `.obrol` semula dipatok `height: calc(100vh - 132px)`. Angka 132 itu adalah
   tinggi bilah judul + jarak atas wadah — benar SELAMA tidak ada apa pun lain
   di atasnya di dalam wadah.

   Begitu papan pengumuman muncul, seluruh panel terdorong turun sebanyak tinggi
   papan itu, dan kolom ketik pesan jatuh ke bawah lipatan — pada halaman yang
   seluruh gunanya adalah mengetik. Yang menyesatkan: tidak ada satu baris pun
   di halaman pesan yang berubah, jadi penyebabnya tidak terlihat dari sana.

   Perbaikannya membuang angka tetap itu: panel mengisi ruang yang TERSISA,
   berapa pun yang ada di atasnya.
   ----------------------------------------------------------------------------- */
.kulit:has(.obrol){height:100vh;overflow:hidden}
.kulit:has(.obrol) .isi{min-height:0}
.wadah:has(> .obrol){
  display:flex;flex-direction:column;flex:1;min-height:0;
  overflow:hidden;padding-bottom:22px;
}
.wadah:has(> .obrol) .kabar-papan{flex:0 0 auto}
.wadah:has(> .obrol) > .obrol{flex:1 1 auto;height:auto;min-height:0}

/* Di layar sempit halaman ini boleh menggulir seperti biasa: papan pengumuman
   di HP sudah setinggi separuh layar, dan memaksanya tetap muat hanya
   menyisakan panel percakapan setinggi tiga baris. */
@media(max-width:860px){
  .kulit:has(.obrol){height:auto;overflow:visible}
  .wadah:has(> .obrol){overflow:visible}
  .wadah:has(> .obrol) > .obrol{min-height:440px}
}

/* -----------------------------------------------------------------------------
   31. TOMBOL TUTUP PENGUMUMAN + PERILAKU DI LAYAR SENTUH
   ----------------------------------------------------------------------------- */
.kabar-kotak{position:relative}
.kabar-kotak__tutup{
  position:absolute;top:8px;right:8px;
  width:26px;height:26px;border-radius:8px;border:0;background:none;
  color:var(--redup-2);cursor:pointer;display:grid;place-items:center;
  transition:.15s;
}
.kabar-kotak__tutup:hover{background:var(--latar-2);color:var(--tinta-2)}
.kabar-kotak__isi{padding-right:22px}

/* Halaman Pesan di layar sentuh.

   Papan pengumuman disembunyikan DI HALAMAN INI SAJA. Percakapan adalah satu-
   satunya layar yang tingginya dipatok ke layar; kartu pengumuman setinggi
   separuh HP menyisakan panel percakapan setinggi tiga baris. Pengumumannya
   tetap terbaca di setiap halaman lain. */
@media(max-width:860px){
  .wadah:has(> .obrol) > .kabar-papan{display:none}
  .kulit:has(.obrol){height:100vh;overflow:hidden}
  .wadah:has(> .obrol){overflow:hidden;padding:14px 14px 14px}
  .wadah:has(> .obrol) > .obrol{min-height:0}
}

/* -----------------------------------------------------------------------------
   32. AJAKAN MENYALAKAN PEMBERITAHUAN

   Muncul di sudut, bukan menutupi layar. Kotak izin yang menghalangi seluruh
   halaman membuat orang menekan tombol apa pun supaya cepat hilang — dan yang
   paling dekat biasanya "Blokir", yang tidak bisa ditarik kembali lewat kode.
   ----------------------------------------------------------------------------- */
.ajak-push{
  position:fixed;left:20px;bottom:20px;z-index:70;
  max-width:340px;padding:15px 17px;border-radius:15px;
  background:var(--kertas);border:1px solid var(--garis);
  box-shadow:var(--bayang-naik);
  opacity:0;transform:translateY(14px);
  transition:opacity .24s, transform .24s;
}
.ajak-push.tampil{opacity:1;transform:none}
.ajak-push__isi b{
  display:block;font-size:13.5px;color:var(--tinta);margin-bottom:4px;
  letter-spacing:-.012em;
}
.ajak-push__isi span{display:block;font-size:12.5px;color:var(--redup);line-height:1.55}
.ajak-push__aksi{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

@media(max-width:560px){
  .ajak-push{left:12px;right:12px;bottom:12px;max-width:none}
}

/* Tombol di kaki menu dipakai juga oleh <button>, bukan hanya <a>. */
button.sisi__panduan{width:100%;font:inherit;font-size:12.5px;font-weight:600;
  text-align:left;cursor:pointer}
button.sisi__panduan:disabled{opacity:.55;cursor:default}

/* Kaki gerbang: hak cipta di kiri, kontak di kanan. */
.gerbang__kaki{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.gerbang__kaki a{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  color:var(--tinta-2);text-decoration:none;font-weight:600;
  border:1px solid var(--garis);border-radius:99px;padding:6px 13px;
  background:rgba(255,255,255,.7);transition:.15s;
}
.gerbang__kaki a:hover{border-color:var(--garis-2);color:var(--hijau);background:#fff}
@media(max-width:900px){ .gerbang__kaki a{margin-left:0} }