/* ===========================================================================
   wk-ui.css — perbaikan tampilan header & footer wisatakita.com
   Hanya override warna, tipografi, dan jarak. Tidak ada perubahan layout
   (position/float/width) supaya struktur head.php & footer.php tetap aman.
   Beberapa aturan pakai !important karena warnanya ditulis inline di markup.

   Cara pasang : di head.php, tepat SETELAH baris
     <link type="text/css" rel="stylesheet" href="<?php echo HOST; ?>css/menu.css" />
   tambahkan
     <link type="text/css" rel="stylesheet" href="<?php echo HOST; ?>css/wk-ui.css?v=7" />
   lalu unggah file ini ke folder css/. Naikkan angka ?v= tiap kali diubah.
   =========================================================================== */

:root{
  --wk-biru:#00699c;
  --wk-biru-tua:#004f78;
  --wk-biru-muda:#e8f2f8;
  --wk-teks:#2b3a44;
  --wk-teks-redup:#6b7b86;
  --wk-garis:#d7e2ea;
}

/* ---------------------------------------------------------------- HEADER --- */

/* bar atas : gradasi halus + bayangan, bukan biru rata */
#navmobil,
#topheder{
  background-image:linear-gradient(180deg,#0079b2 0%,#005c8a 100%) !important;
}
#head{
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}

/* baris menu */
#listmenu{
  background-image:linear-gradient(180deg,#00699c 0%,#005884 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
#listmenu #menu li a,
#listmenu a{
  transition:background-color .18s ease, color .18s ease;
}
/* garis aksen saat hover, tidak menggeser posisi menu */
#listmenu #menu li a:hover{
  background-color:rgba(255,255,255,.12) !important;
  box-shadow:inset 0 -3px 0 #ffd24d;
}

/* kotak pencarian : sudut membulat + fokus jelas */
#pencarian input[type="text"],
#pencarian input[type="search"],
#pencarian .cari,
#pencarian input:not([type="submit"]):not([type="button"]){
  border:1px solid rgba(255,255,255,.35) !important;
  border-radius:22px !important;
  padding:7px 14px !important;
  background:rgba(255,255,255,.96) !important;
  color:var(--wk-teks) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.12) inset;
  outline:none;
  transition:box-shadow .18s ease, border-color .18s ease;
}
#pencarian input:focus{
  border-color:#ffd24d !important;
  box-shadow:0 0 0 3px rgba(255,210,77,.35);
}

/* tombol LOGIN */
#panellogin .tombol{
  border-radius:20px !important;
  background-image:linear-gradient(180deg,#ffffff 0%,#eef4f8 100%) !important;
  color:var(--wk-biru-tua) !important;
  border:1px solid rgba(255,255,255,.7) !important;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
  font-weight:bold;
  transition:transform .15s ease, box-shadow .15s ease;
}
#panellogin .tombol:hover{
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(0,0,0,.22);
}

/* tombol MENU di mobile */
#btnmenu{
  background:rgba(0,0,0,.22);
  border-radius:18px;
  padding:4px 10px;
  font-size:13px;
}

/* ---------------------------------------------------------------- FOOTER --- */

.container-footer,
.container-footer .abrow{
  background-image:linear-gradient(180deg,#f5f8fa 0%,#e6edf2 100%) !important;
  background-color:#eef3f6 !important;
  color:var(--wk-teks);
  border-top:3px solid var(--wk-biru);
}
.isifooter{
  padding:26px 14px 8px;
}

/* judul kolom : h1 di footer terlalu besar, dikecilkan & diberi garis aksen */
.container-footer h1{
  font-size:14px !important;
  line-height:1.3;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--wk-biru-tua);
  margin:16px 0 8px;
  padding-bottom:6px;
  border-bottom:1px solid var(--wk-garis);
  position:relative;
}
.container-footer h1:after{
  content:"";
  position:absolute;
  left:0; bottom:-1px;
  width:34px; height:2px;
  background:#ffb02e;
}
.container-footer h1 u{ text-decoration:none; }

/* daftar link */
.container-footer ul{
  margin:0 0 10px !important;
  padding:0 !important;
  line-height:1.75;
}
.container-footer li{
  font-size:13px;
  color:var(--wk-teks);
  padding:1px 0;
}
.container-footer a{
  color:#1f5f8b !important;
  font-weight:600 !important;
  text-decoration:none;
  transition:color .15s ease, padding-left .15s ease;
}
.container-footer a:hover{
  color:#009ad1 !important;
  padding-left:3px;
}
.container-footer u strong,
.container-footer strong{ color:var(--wk-biru-tua); }

/* tombol CHAT WHATSAPP dibuat seragam */
.container-footer button{
  border:0 !important;
  border-radius:18px !important;
  padding:6px 12px !important;
  margin:4px 0 6px !important;
  font-size:12px !important;
  font-weight:bold;
  color:#fff !important;
  background-image:linear-gradient(180deg,#2ecc8f 0%,#16a56f 100%) !important;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.container-footer button:hover{
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(0,0,0,.2);
}

/* logo store & ikon sosial */
.fotpad img{
  opacity:.92;
  transition:opacity .15s ease, transform .15s ease;
}
.fotpad img:hover{ opacity:1; transform:translateY(-2px); }

/* baris copyright */
.container-footer .isifooter > div:last-child{
  background:transparent !important;
  border-top:1px solid var(--wk-garis) !important;
  color:var(--wk-teks-redup) !important;
  font-size:12px;
  padding:14px 6px 18px;
  line-height:1.6;
}
.container-footer .isifooter > div:last-child a{
  color:var(--wk-biru) !important;
}

/* ------------------------------------------------------------ RESPONSIF --- */

@media only screen and (max-width:600px){
  .isifooter{ padding:18px 12px 6px; }
  .container-footer h1{ margin-top:18px; }
  .container-footer li{ font-size:14px; }   /* lebih enak disentuh di HP */
}

/* ===========================================================================
   HALAMAN DETAIL ACARA  (event.php?req=detail / /event/<id>/<slug>)
   Markup-nya tabel lama tanpa class, jadi selector menempel pada id yang ada
   (#konfirmasibox, #imageevent, #detailevent, .menutab, #isievent) dan pada
   atribut bgcolor lama. Tidak ada perubahan struktur tabel.
   =========================================================================== */

#view, #detailevent{
  font-size:14px;
  line-height:1.7;
  color:var(--wk-teks);
}

/* -- gambar acara -- */
#imageevent img,
#detailevent img[style*="max-height"]{
  border:0 !important;
  border-radius:12px !important;
  box-shadow:0 8px 24px rgba(13,60,86,.16);
  background:#f2f6f9;
}

/* -- kotak peserta : merah menyala -> kartu tenang -- */
#konfirmasibox td[bgcolor="#FFCACA"]{
  background:#f4fafd !important;
  border:1px solid var(--wk-garis);
  border-bottom:0;
  border-radius:12px 12px 0 0;
  padding:14px !important;
}
#konfirmasibox td[bgcolor="#FF0000"]{
  background:#eaf1f5 !important;
  color:#0d3c56 !important;
  font-size:11px !important;
  text-transform:uppercase;
  letter-spacing:.07em;
  padding:7px 10px !important;
  border-top:1px solid var(--wk-garis);
}
#konfirmasibox td[bgcolor="#FF0000"] strong{ font-weight:700; }
#konfirmasibox table table{
  border:1px solid var(--wk-garis);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 2px 8px rgba(13,60,86,.06);
}
#konfirmasibox em{ color:var(--wk-teks-redup); font-size:12px; }

/* tombol GABUNG dijadikan tombol utama */
#konfirmasibox .tombol,
#view input[value="GABUNG"],
#view input[value="Gabung"]{
  background-image:linear-gradient(180deg,#ff9f2e 0%,#f07d00 100%) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:22px !important;
  padding:9px 26px !important;
  font-size:14px !important;
  font-weight:bold;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(240,125,0,.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
#konfirmasibox .tombol:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(240,125,0,.45);
}

/* -- judul acara -- */
#detailevent h1{
  font-size:22px !important;
  line-height:1.3;
  color:#0d3c56;
  margin:6px 0 12px;
}
#detailevent a h1:hover{ color:var(--wk-biru); }

/* -- tabel keterangan (harga, waktu, paket, jenis, kontak) -- */
#detailevent td[style*="dashed"]{
  border:1px solid var(--wk-garis) !important;
  border-radius:12px;
  background:#fff;
  padding:12px !important;
  box-shadow:0 2px 8px rgba(13,60,86,.05);
}
#detailevent td[style*="dashed"] table td{
  padding:7px 10px !important;
  border-bottom:1px solid #eef2f5;
  vertical-align:top;
}
#detailevent td[style*="dashed"] table tr:last-child td{ border-bottom:0; }
#detailevent td[width="100px"]{
  color:var(--wk-teks-redup);
  font-weight:600;
  white-space:nowrap;
  background:#fafcfd;
}
/* harga promo lebih menonjol, harga lama dibuat redup */
#detailevent strike,
#detailevent del{ color:#9aa8b2; font-weight:normal; }

/* -- tab (Detail Paket / Foto / Review / ...) -- */
.menupaket{
  margin:22px 0 0;
  border-bottom:2px solid var(--wk-garis);
}
.menutab{
  list-style:none;
  margin:0 !important;
  padding:0 !important;
  display:flex;
  flex-wrap:wrap;
}
.menutab li{
  list-style:none;
  margin:0;
  float:none !important;
}
.menutab li a{
  display:block;
  padding:9px 15px;
  font-size:13px;
  font-weight:600;
  color:#526672;
  text-decoration:none;
  border-radius:9px 9px 0 0;
  transition:background-color .15s ease, color .15s ease;
}
.menutab li a:hover{
  background:var(--wk-biru-muda);
  color:var(--wk-biru-tua);
}
.menutab li a.active{
  background:#fff;
  color:var(--wk-biru) !important;
  box-shadow:inset 0 -3px 0 var(--wk-biru);
}

/* -- isi tab : teks panjang, daftar, dan tabel fasilitas -- */
#isievent{
  padding:18px 6px 6px;
  overflow-x:auto;
}
#isievent b, #isievent strong{ color:#0d3c56; }
#isievent ul, #isievent ol{
  padding-left:22px;
  margin:8px 0 14px;
  line-height:1.85;
}
#isievent li{ margin-bottom:3px; }
#isievent table{
  border-collapse:collapse !important;
  font-size:13px;
  margin:10px 0 18px;
}
#isievent table td, #isievent table th{
  padding:8px 10px !important;
  border-bottom:1px solid #edf1f4;
  vertical-align:middle;
}
#isievent table tr:nth-child(even) td{ background:#fbfdfe; }
#isievent table tr:hover td{ background:#f2f8fb; }
#isievent table td[align="center"] strong{ letter-spacing:.03em; }

/* tombol Detail di tabel fasilitas dibuat kecil & seragam */
#isievent .tombol,
#isievent button,
#isievent input[type="button"],
#isievent input[type="submit"]{
  border:0 !important;
  border-radius:14px !important;
  padding:4px 12px !important;
  font-size:12px !important;
  font-weight:600;
  color:#fff !important;
  background-image:linear-gradient(180deg,#3aa3d4 0%,#1a7fb0 100%) !important;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
#isievent .tombol:hover,
#isievent button:hover{ filter:brightness(1.06); }

/* blok syarat & ketentuan / itinerary yang panjang (inline overflow:auto) */
#isievent div[style*="overflow"]{
  border:1px solid var(--wk-garis) !important;
  border-radius:12px;
  background:#fcfdfe;
  padding:16px !important;
  box-shadow:inset 0 1px 4px rgba(13,60,86,.05);
}

@media only screen and (max-width:700px){
  #detailevent h1{ font-size:18px !important; }
  .menutab li a{ padding:8px 11px; font-size:12px; }
  #isievent table{ font-size:12px; }
  #konfirmasibox table table{ margin-bottom:14px; }
}

/* ===========================================================================
   PERBAIKAN LANJUTAN  (v3)
   =========================================================================== */

/* -- tombol LOGIN di kanan atas : jangan melebar & keluar dari bar biru -- */
#panellogin{ text-align:right; }
#panellogin .tombol{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:auto !important;
  min-width:0 !important;
  height:32px;
  margin:6px 12px 0 0 !important;
  padding:0 16px !important;
  font-size:12px !important;
  line-height:1 !important;
  letter-spacing:.02em;
  white-space:nowrap;
}
#panellogin .tombol img{
  width:16px !important;
  height:16px !important;
  margin:0 !important;
  vertical-align:middle;
}
/* menu user saat sudah login */
#panellogin .divlistbox button{ height:32px; }

/* -- baris form "buat & gabung" di atas halaman detail -- */
#createevent{
  background:#fff;
  border:1px solid var(--wk-garis);
  border-radius:12px;
  padding:10px 12px !important;
  box-shadow:0 2px 8px rgba(13,60,86,.06);
}
#createevent > div[data-role="none"]{ display:none !important; }   /* lapisan abu di belakang */
#createevent label{
  display:inline-block;
  white-space:nowrap;
  font-size:12px !important;
  font-weight:600;
  color:var(--wk-teks-redup);
  margin:0 6px 0 0;
  line-height:32px;
}
#createevent input[type="text"],
#createevent input[type="number"],
#createevent select{
  height:32px;
  border:1px solid var(--wk-garis) !important;
  border-radius:8px !important;
  padding:0 8px !important;
  font-size:13px;
  color:var(--wk-teks);
  background:#fff;
  box-sizing:border-box;
}
#createevent #tglmulai{ min-width:118px !important; width:118px !important; }
#createevent #jenis{ min-width:132px !important; width:auto !important; }
#createevent #jmlpax{ width:62px !important; text-align:right; }
#createevent input[type="submit"]{
  height:32px;
  border:0 !important;
  border-radius:8px !important;
  padding:0 18px !important;
  font-size:13px !important;
  font-weight:bold;
  color:#fff !important;
  background-image:linear-gradient(180deg,#0f9ad6 0%,#0c7cae 100%) !important;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(12,124,174,.3);
}
#createevent input[type="submit"]:hover{ filter:brightness(1.06); }

/* -- dropdown "searchlist" (Tujuan / Paket) : satu baris, tidak melipat -- */
.divlistbox button{
  display:flex !important;
  align-items:center;
  height:34px;
  padding:0 30px 0 12px !important;
  border:1px solid var(--wk-garis) !important;
  border-radius:9px !important;
  background:#fff !important;
  box-shadow:none !important;
  cursor:pointer;
  overflow:hidden;
}
.divlistbox button > div{
  width:100% !important;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13px;
  color:var(--wk-teks);
}
.divlistbox button > div b{ font-weight:600; }
.divlistbox button:hover{ border-color:#9fc4da !important; }

/* -- gambar acara tampil dua kali : yang di baris atas disembunyikan,
      kotak peserta dibiarkan memakai lebar penuh -- */
#konfirmasibox #imageevent{ display:none !important; }
#konfirmasibox > table > tbody > tr > td[rowspan]{
  width:0 !important;
  padding:0 !important;
}
#konfirmasibox > table > tbody > tr > td[valign="top"]{ padding:0 !important; }
#konfirmasibox table table{ max-width:520px; margin:0 auto 10px; }

/* -- tabel keterangan : label rata atas, nilai lebih lega -- */
#detailevent td[style*="dashed"] table td:first-child{ width:130px; }
#detailevent td[style*="dashed"] table td:last-child{ color:#1b2b36; }

/* -- baris judul & harga -- */
#detailevent td[valign="top"] > strong{ font-size:15px; }

/* -- blok teks deskripsi dari database : batasi lebar baca -- */
#isievent > div, #isievent > p{ max-width:900px; }

@media only screen and (max-width:700px){
  #panellogin .tombol{ margin-right:8px !important; padding:0 12px !important; }
  #createevent label{ line-height:1.4; margin-bottom:2px; }
  #createevent #tglmulai,
  #createevent #jenis,
  #createevent #jmlpax{ width:100% !important; min-width:0 !important; }
  #konfirmasibox table table{ max-width:100%; }
}

/* ===========================================================================
   HALAMAN PENDAFTARAN / LUPA PASSWORD / RESET PASSWORD  (pendaftaran.php)
   Form-formnya memakai tabel lama dengan bgcolor="#CCCCCC"/"#FFFFFF" dan
   <font size=2 face=Verdana>. Dirapikan tanpa mengubah markup.
   =========================================================================== */

/* form lupa password & reset password */
form[name="formlupapassword"]{
  display:block;
  max-width:560px;
  margin:0 auto;
}
form[name="formlupapassword"] table{
  width:100% !important;
  background:#fff !important;
  border:1px solid var(--wk-garis);
  border-radius:12px;
  border-collapse:separate !important;
  border-spacing:0 !important;
  box-shadow:0 2px 10px rgba(13,60,86,.07);
  overflow:hidden;
}
form[name="formlupapassword"] td{
  background:#fff !important;
  padding:11px 14px !important;
  border-bottom:1px solid #eef2f5;
  font-size:13px;
  vertical-align:middle;
}
form[name="formlupapassword"] tr:last-child td{ border-bottom:0; }
form[name="formlupapassword"] font{
  font-family:inherit !important;
  font-size:13px !important;
  color:var(--wk-teks) !important;
}
form[name="formlupapassword"] input[type="text"],
form[name="formlupapassword"] input[type="password"],
form[name="pendaftaran"] input[type="text"],
form[name="pendaftaran"] input[type="password"],
form[name="pendaftaran"] input[type="email"],
form[name="pendaftaran"] select{
  height:36px;
  width:100%;
  max-width:320px;
  border:1px solid var(--wk-garis) !important;
  border-radius:8px !important;
  padding:0 10px !important;
  font-size:13px;
  box-sizing:border-box;
  background:#fff;
}
form[name="formlupapassword"] input:focus,
form[name="pendaftaran"] input:focus,
form[name="pendaftaran"] select:focus{
  outline:none;
  border-color:#7fb4d3 !important;
  box-shadow:0 0 0 3px rgba(15,154,214,.15);
}
form[name="formlupapassword"] input[type="submit"],
form[name="pendaftaran"] input[type="submit"]{
  height:38px;
  width:auto !important;
  border:0 !important;
  border-radius:20px !important;
  padding:0 24px !important;
  font-size:14px !important;
  font-weight:bold;
  color:#fff !important;
  background-image:linear-gradient(180deg,#0f9ad6 0%,#0c7cae 100%) !important;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(12,124,174,.3);
}
form[name="formlupapassword"] input[type="submit"]:hover,
form[name="pendaftaran"] input[type="submit"]:hover{ filter:brightness(1.06); }
form[name="formlupapassword"] img[alt="Security Image"]{
  border:1px solid var(--wk-garis);
  border-radius:8px;
}

/* form pendaftaran */
form[name="pendaftaran"]{
  display:block;
  background:#fff;
  border:1px solid var(--wk-garis);
  border-radius:14px;
  padding:18px 20px;
  box-shadow:0 3px 14px rgba(13,60,86,.07);
}
form[name="pendaftaran"] > .abrow > b{
  display:block;
  font-size:18px;
  color:#0d3c56;
  text-align:center;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--wk-garis);
}
form[name="pendaftaran"] label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--wk-teks-redup);
  margin:10px 0 4px;
}

/* detail peserta */
table[bgcolor="#E6FBE7"]{
  background:#fff !important;
  max-width:640px;
  border:1px solid var(--wk-garis);
  border-radius:12px;
  border-collapse:collapse !important;
  box-shadow:0 2px 10px rgba(13,60,86,.06);
  overflow:hidden;
}
table[bgcolor="#E6FBE7"] td{
  padding:10px 14px !important;
  border-bottom:1px solid #eef2f5;
  font-size:13px;
}
table[bgcolor="#E6FBE7"] tr:last-child td{ border-bottom:0; }
table[bgcolor="#E6FBE7"] td:first-child{
  background:#fafcfd;
  color:var(--wk-teks-redup);
  width:170px;
}
.style3{ font-size:13px !important; }

/* ===========================================================================
   FORMULIR PENDAFTARAN / LUPA PASSWORD / RESET PASSWORD  (v4)
   Hook: #pendaftaran (form), baris .abrow dengan .label + .samadengan + .input
   =========================================================================== */

#pendaftaran{
  background:#fff;
  border:1px solid var(--wk-garis);
  border-radius:14px;
  padding:22px 26px 26px;
  box-shadow:0 4px 18px rgba(13,60,86,.07);
  margin:18px auto 28px;
}
#pendaftaran > .abrow > div > b,
#pendaftaran b:first-of-type{
  display:block;
  font-size:18px;
  color:#0d3c56;
  margin-bottom:4px;
}
/* satu baris = label : input */
#pendaftaran .abrow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:12px;
}
#pendaftaran .label{
  flex:0 0 190px;
  font-size:13px;
  font-weight:600;
  color:var(--wk-teks-redup);
  text-align:left;
  padding:0;
}
#pendaftaran .samadengan{
  flex:0 0 14px;
  color:#b9c6d0;
}
#pendaftaran .input{
  flex:1 1 240px;
  min-width:220px;
}
#pendaftaran .input input[type="text"],
#pendaftaran .input input[type="email"],
#pendaftaran .input input[type="password"],
#pendaftaran .input input[type="number"],
#pendaftaran .input select,
#pendaftaran .input textarea{
  width:100%;
  height:38px;
  border:1px solid var(--wk-garis) !important;
  border-radius:9px !important;
  padding:0 12px !important;
  font-size:14px;
  color:var(--wk-teks);
  background:#fff;
  box-sizing:border-box;
  transition:border-color .15s ease, box-shadow .15s ease;
}
#pendaftaran .input textarea{ height:auto; padding:10px 12px !important; }
#pendaftaran .input input:focus,
#pendaftaran .input select:focus,
#pendaftaran .input textarea:focus{
  outline:none;
  border-color:#7fb6d6 !important;
  box-shadow:0 0 0 3px rgba(15,154,214,.15);
}
/* pesan kesalahan per kolom */
#pendaftaran .input font[color="#FF0000"],
#pendaftaran .input .salah,
#pendaftaran .input span[style*="red"]{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:#c0392b !important;
}
/* tombol kirim */
#pendaftaran input[type="submit"],
#pendaftaran button[type="submit"]{
  height:40px;
  border:0 !important;
  border-radius:22px !important;
  padding:0 30px !important;
  font-size:14px !important;
  font-weight:bold;
  color:#fff !important;
  background-image:linear-gradient(180deg,#0f9ad6 0%,#0c7cae 100%) !important;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(12,124,174,.3);
  transition:transform .15s ease, box-shadow .15s ease;
}
#pendaftaran input[type="submit"]:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(12,124,174,.4);
}
/* captcha jangan melebihi lebar kolom di HP */
#pendaftaran .g-recaptcha{ transform-origin:0 0; }

/* form lupa & reset password : masih tabel lama dengan <font> */
#formlupapassword, #formresetpassword{
  display:block;
  max-width:520px;
  margin:0 auto;
}
#formlupapassword table, #formresetpassword table{
  width:100% !important;
  background:#fff !important;
  border:1px solid var(--wk-garis);
  border-radius:12px;
  box-shadow:0 2px 8px rgba(13,60,86,.06);
  border-collapse:separate;
  overflow:hidden;
}
#formlupapassword td, #formresetpassword td{
  padding:9px 12px !important;
  font-size:13px;
  color:var(--wk-teks);
}
#formlupapassword input[type="text"],
#formlupapassword input[type="password"],
#formresetpassword input[type="text"],
#formresetpassword input[type="password"]{
  width:100%;
  height:36px;
  border:1px solid var(--wk-garis) !important;
  border-radius:8px !important;
  padding:0 10px !important;
  box-sizing:border-box;
}
#formlupapassword input[type="submit"],
#formresetpassword input[type="submit"]{
  height:38px;
  border:0 !important;
  border-radius:20px !important;
  padding:0 22px !important;
  font-weight:bold;
  color:#fff !important;
  background-image:linear-gradient(180deg,#0f9ad6 0%,#0c7cae 100%) !important;
  cursor:pointer;
}
/* <font> peninggalan html lama */
#formlupapassword font, #formresetpassword font{
  font-family:inherit !important;
  font-size:13px !important;
  color:var(--wk-teks) !important;
}

@media only screen and (max-width:700px){
  #pendaftaran{ padding:16px 14px 20px; }
  #pendaftaran .label{ flex:1 1 100%; margin-bottom:3px; }
  #pendaftaran .samadengan{ display:none; }
  #pendaftaran .input{ flex:1 1 100%; }
  #pendaftaran .g-recaptcha{ transform:scale(.86); }
}

/* ===========================================================================
   SIDEBAR / MENU DASBOR SAAT SUDAH LOGIN  (v5)
   head.php menampilkan #menufilter (isi menu.php) untuk user yang login, tapi
   head.php TIDAK memuat assets/elements/menus.css -- itu hanya ada di
   roothead.php/rootheaddasbor.php. Akibatnya ikon menu tampil sebesar file
   aslinya (SVG tanpa batas ukuran) dan label sulit dibaca. Aturan di bawah
   membatasinya sendiri supaya tidak tergantung stylesheet mana yang termuat.
   =========================================================================== */

#menufilter{
  background:#00699c !important;
  padding-bottom:12px;
}
#menufilter ul{ list-style:none; margin:0; padding:0; }
#menufilter li{ list-style:none; margin:0; }

/* ikon : apa pun bentuknya (img / svg / i) dibatasi 24px */
#menufilter img,
#menufilter svg,
#menufilter object,
#menufilter embed{
  width:24px !important;
  height:24px !important;
  max-width:24px !important;
  max-height:24px !important;
  flex:0 0 24px;
  object-fit:contain;
  vertical-align:middle;
  display:inline-block;
}
#menufilter i{ font-size:16px !important; width:20px; text-align:center; }

/* satu baris menu = ikon + label sejajar */
#menufilter a{
  display:flex !important;
  align-items:center;
  gap:10px;
  padding:9px 14px !important;
  font-size:13px !important;
  line-height:1.3 !important;
  color:#eaf4fa !important;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background-color .15s ease;
}
#menufilter a:hover{ background:rgba(255,255,255,.12); color:#fff !important; }
#menufilter a.active,
#menufilter li.active > a{ background:rgba(255,255,255,.18); color:#fff !important; }

/* label kelompok (USER, EVENT, BELANJA, ...) */
#menufilter b,
#menufilter strong,
#menufilter .judulmenu{
  display:block;
  padding:10px 14px 4px;
  font-size:11px !important;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:rgba(255,255,255,.65) !important;
}

/* tabel/daftar yang ikut tercetak di dalam sidebar jangan melebar */
#menufilter table{ width:100% !important; max-width:100% !important; }
#menufilter table img{ width:20px !important; height:20px !important; }

/* tombol keluar di bawah */
#menufilter a[href*="logout"],
#menufilter a[href*="keluar"]{
  margin-top:8px;
  background:rgba(0,0,0,.18);
  font-weight:600;
}

/* tombol X penutup sidebar */
#menufilter .closebtn{
  font-size:26px !important;
  color:#fff !important;
  padding:2px 8px !important;
  border-bottom:0;
}

/* area konten di sebelah sidebar */
@media only screen and (min-width:600px){
  #menufilter{ max-width:230px; }
}

/* ===========================================================================
   FORM LOGIN  (v6) — hook: .wk-auth (loginbawah), #boxlogin/#hallogin
   (userloginbaru), .login (menulogin di header)
   =========================================================================== */

.wk-auth{
  max-width:380px;
  margin:18px auto;
  background:#fff;
  border:1px solid var(--wk-garis);
  border-radius:14px;
  padding:20px 22px;
  box-shadow:0 4px 18px rgba(13,60,86,.08);
}
.wk-auth .wk-field{ margin-bottom:12px; }
.wk-auth label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--wk-teks-redup);
  margin-bottom:4px;
}
.wk-auth input[type="text"],
.wk-auth input[type="email"],
.wk-auth input[type="password"]{
  width:100%;
  height:38px;
  border:1px solid var(--wk-garis) !important;
  border-radius:9px !important;
  padding:0 12px !important;
  font-size:14px;
  box-sizing:border-box;
}
.wk-auth input:focus{
  outline:none;
  border-color:#7fb6d6 !important;
  box-shadow:0 0 0 3px rgba(15,154,214,.15);
}
.wk-auth .wk-btn,
.wk-auth input[type="submit"]{
  width:100%;
  height:40px;
  border:0 !important;
  border-radius:22px !important;
  font-size:14px !important;
  font-weight:bold;
  color:#fff !important;
  background-image:linear-gradient(180deg,#0f9ad6 0%,#0c7cae 100%) !important;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(12,124,174,.3);
}
.wk-auth .wk-links{
  margin-top:12px;
  text-align:center;
  font-size:12px;
}
.wk-auth .wk-links a{ color:var(--wk-biru) !important; }

/* kotak login lama (userloginbaru) */
#boxlogin{
  background:#fff !important;
  border:1px solid var(--wk-garis);
  border-radius:14px !important;
  box-shadow:0 4px 18px rgba(13,60,86,.08);
  padding-bottom:10px;
}
#boxlogin h1{ font-size:18px !important; color:#0d3c56 !important; padding-top:44px !important; }
#boxlogin input[type="text"],
#boxlogin input[type="password"]{
  width:100%;
  height:38px;
  border:1px solid var(--wk-garis) !important;
  border-radius:9px !important;
  padding:0 12px !important;
  box-sizing:border-box;
  font-size:14px;
}
#boxlogin input[type="submit"]{
  width:100%;
  height:40px;
  border:0 !important;
  border-radius:22px !important;
  font-weight:bold;
  color:#fff !important;
  background-image:linear-gradient(180deg,#0f9ad6 0%,#0c7cae 100%) !important;
  cursor:pointer;
}
#boxlogin .headlogin img{ border:4px solid #fff !important; box-shadow:0 2px 8px rgba(0,0,0,.15); }

/* blok nama user + logout di header */
table.login td{ font-size:12px; line-height:1.4; }
table.login img[title="Foto Profil"]{
  border-radius:50%;
  border:2px solid rgba(255,255,255,.6);
  width:36px !important;
  height:36px !important;
  object-fit:cover;
}

/* ===========================================================================
   HALAMAN PROFIL  (v7)
   Hook: .divprofil, .namauser, .profil-label, .profil-data, h3 seksi,
   .wk-konfirmasi (daftar konfirmasi yang kini dibungkus <details>)
   =========================================================================== */

.divprofil{
  background:#fff;
  border:1px solid var(--wk-garis);
  border-radius:14px;
  box-shadow:0 4px 18px rgba(13,60,86,.07);
  padding:4px 0 18px;
  margin-bottom:18px;
}
.divprofil .abrow{ background:transparent !important; }

/* foto profil */
.divprofil img[style*="border-radius: 50%"],
.divprofil .col-3 > img{
  width:150px !important;
  height:150px !important;
  max-width:150px !important;
  max-height:150px !important;
  object-fit:cover;
  border:3px solid #fff !important;
  box-shadow:0 3px 14px rgba(13,60,86,.18);
  padding:0 !important;
  margin:18px auto 4px !important;
  display:block;
}

/* nama user : dulu bar biru penuh dengan h1 besar */
.divprofil .namauser,
h1.namauser{
  font-size:20px !important;
  font-weight:600;
  color:#fff !important;
  margin:0 !important;
  padding:10px 16px !important;
  line-height:1.3;
}
.divprofil .col-9 > div[style*="background: #069"]{
  background:linear-gradient(90deg,#00699c 0%,#0a87c4 100%) !important;
  border-radius:10px !important;
  margin:18px 0 12px 10px !important;
}

/* baris keterangan : label | isi, dua kolom rapi */
.divprofil .col-12{ font-size:13px !important; }
.profil-label{
  float:left;
  width:190px;
  padding:7px 10px;
  color:var(--wk-teks-redup);
  font-weight:600;
  font-size:12px;
}
.profil-data{
  float:left;
  width:calc(100% - 200px);
  padding:7px 10px;
  color:#1b2b36;
  border-bottom:1px solid #eef2f5;
  word-break:break-word;
}
.profil-data b{ color:#c3cfd8; font-weight:normal; margin-right:4px; }
.profil-label + .profil-data{ border-bottom:1px solid #eef2f5; }
.profil-label i{ color:var(--wk-biru); margin-right:5px; }
.profil-label i.fa-border{ border:0 !important; padding:0 !important; }
.divprofil .clear{ clear:both; }

/* judul seksi : Data Akun, Data Agen & Travel, DEPOSIT, MENU CEPAT */
.divprofil h2, .divprofil h3,
.panel-body > h3{
  font-size:13px !important;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--wk-biru-tua) !important;
  margin:18px 0 6px 10px !important;
  padding-bottom:5px;
  border-bottom:1px solid var(--wk-garis);
}

/* tombol Edit Profile */
.divprofil a[href*="req=e"]{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 16px;
  border-radius:20px;
  background:#f2f8fb;
  border:1px solid var(--wk-garis);
  font-size:12px;
  font-weight:600;
  color:var(--wk-biru-tua) !important;
  text-decoration:none;
}
.divprofil a[href*="req=e"]:hover{ background:#e4f1f8; }
.divprofil a[href*="req=e"] span{ line-height:1 !important; }

/* daftar deposit & menu cepat */
.panel-body ul{ margin:0 0 14px 10px; padding-left:18px; font-size:13px; line-height:1.9; }
.panel-body ul a{ color:var(--wk-biru) !important; }

/* daftar konfirmasi belum cocok : sekarang <details>, ditutup default */
.wk-konfirmasi{
  margin:16px 10px 6px;
  border:1px solid var(--wk-garis);
  border-radius:12px;
  background:#fff;
  padding:10px 14px;
}
.wk-konfirmasi > summary{
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--wk-biru-tua);
  padding:4px 0;
}
.wk-konfirmasi > em{
  display:block;
  font-size:12px;
  color:var(--wk-teks-redup);
  margin:4px 0 10px;
}
.wk-konfirmasi table{
  width:100% !important;
  border-collapse:collapse !important;
  font-size:12px;
}
.wk-konfirmasi td, .wk-konfirmasi th{
  padding:7px 9px !important;
  border-bottom:1px solid #eef2f5;
}
.wk-konfirmasi tr:nth-child(even) td{ background:#fbfdfe; }
/* dibatasi tingginya supaya tidak memanjang ratusan baris */
.wk-konfirmasi > div,
.wk-konfirmasi > table{
  display:block;
  max-height:420px;
  overflow:auto;
}

@media only screen and (max-width:700px){
  .profil-label{ float:none; width:100%; padding-bottom:0; }
  .profil-data{ float:none; width:100%; padding-top:2px; }
  .divprofil img[style*="border-radius: 50%"]{ width:120px !important; height:120px !important; }
  h1.namauser{ font-size:17px !important; }
}