/* ==================================================================
 * Modul Pendaftaran - header seperti modul lain + tata letak responsif (HP, tablet, komputer)
 * Dimuat SETELAH assets/style.css sehingga menimpa lebar tetap 600/400 px.
 * ================================================================== */
:root { --containerWidth: 600px !important; --df-teal: #1f6f66; --df-amber: #e08a12; color-scheme: only light; }
@supports (width: min(1px, 2px)) { :root { --containerWidth: min(600px, 100vw) !important; } }   /* WebView lama tanpa min() memakai 600px */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media screen and (max-width: 660px) { :root { --containerWidth: 100vw !important; } }

body { display: flex !important; flex-direction: column !important; align-items: stretch !important;
       justify-content: flex-start !important; min-height: 100vh; margin: 0;
       background: #f3f5f2 url(../images/bgku.jpg) repeat !important; }   /* sisi kiri-kanan seragam di tablet/komputer */
.bacground { width: 100%; flex: 1 0 auto; }
.halaman { width: var(--containerWidth) !important; max-width: 100%; margin: 0 auto; box-sizing: border-box; }
.bacground2 { background-size: 100% auto !important; background-repeat: no-repeat !important; background-position: center top !important; }
.footer { width: var(--containerWidth) !important; left: 50%; transform: translateX(-50%); }
.footer img { display: block; }
@media screen and (max-width: 660px) { .container { padding-left: 16px !important; padding-right: 16px !important; } }

/* ---- Header ---- */
.df-header { position: sticky; top: 0; z-index: 60; width: 100%; background: #fff; border-bottom: 3px solid var(--df-amber);
             box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.df-header-isi { display: flex; align-items: center; gap: 12px; max-width: 1100px; margin: 0 auto; padding: 8px 16px; box-sizing: border-box; }
.df-logo img { width: 46px; height: 46px; display: block; border-radius: 10px; }
.df-nama { flex: 1; min-width: 0; line-height: 1.2; }
.df-bank { font: 700 18px "Poppins", "Segoe UI", sans-serif; color: #1f2b27; letter-spacing: .2px; }
.df-pt { font: 500 12.5px "Poppins", "Segoe UI", sans-serif; color: #6b7873; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-judul { color: var(--df-teal); }
.df-tema { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #dfe5e0; background: #f6f8f6;
           display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.df-tema svg { width: 19px; height: 19px; fill: none; stroke: #1f2b27; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.df-tema .df-ikon-bulan { fill: #1f2b27; stroke: none; }
.df-tema .df-ikon-matahari { display: none; }
@media (max-width: 480px) {
  .df-header-isi { padding: 7px 12px; gap: 10px; }
  .df-logo img { width: 40px; height: 40px; }
  .df-bank { font-size: 16px; }
  .df-sep, .df-judul { display: none; }      /* HP: cukup nama PT, keterangan halaman disembunyikan */
}

/* ---- Mode gelap: header & area di luar kolom menjadi gelap; kolom formulir tetap terang agar mudah dibaca ---- */
html[data-theme="dark"] body { background: #141a18 !important; }
html[data-theme="dark"] .bacground:not(.halaman) { background-image: none !important; background-color: #141a18 !important; }
html[data-theme="dark"] .halaman { background-color: #fff !important; box-shadow: 0 0 0 1px #2c3633, 0 8px 30px rgba(0,0,0,.45); }
html[data-theme="dark"] .bacground2 { background-color: #fff !important; }
html[data-theme="dark"] .df-header { background: #1c2422; border-bottom-color: var(--df-amber); box-shadow: 0 2px 10px rgba(0,0,0,.4); }
html[data-theme="dark"] .df-bank { color: #e6ebe8; }
html[data-theme="dark"] .df-pt { color: #a5b1ac; }
html[data-theme="dark"] .df-judul { color: #6cc4b8; }
html[data-theme="dark"] .df-logo img { background: #fff; padding: 3px; box-sizing: border-box; }
html[data-theme="dark"] .df-tema { background: #26302d; border-color: #33403c; }
html[data-theme="dark"] .df-tema .df-ikon-bulan { display: none; }
html[data-theme="dark"] .df-tema .df-ikon-matahari { display: block; stroke: #f0c36a; }

/* ---- Keterangan status pemuatan data (e-Form) ---- */
.df-info { width: var(--containerWidth); max-width: 100%; margin: 10px auto 0; box-sizing: border-box; padding: 10px 14px; border-radius: 10px;
           font: 400 13px/1.5 "Poppins", "Segoe UI", sans-serif; }
.df-info strong { font-weight: 600; }
.df-info-ok { background: #e4f2e8; color: #1e5a37; border: 1px solid #b9dcc4; }
.df-info-info { background: #e5edf8; color: #24456f; border: 1px solid #bfd0e8; }
@media screen and (max-width: 660px) { .df-info { width: calc(100% - 24px); } }
::placeholder { color: #9aa5a0; opacity: 1; font-size: 13px; }

/* ---- Teks bantuan di bawah kolom ----------------------------------------------------------------------
 * Disusun NORMAL (tanpa margin negatif): di WebView Android kolom tanggal bisa lebih tinggi, dulu teks bantuan
 * yang ditarik ke atas tertutup kolom. Latar putih penuh & teks gelap agar tetap terbaca di semua browser/WebView. */
form .page .field.df-field-tgl { height: auto !important; margin-bottom: 8px !important; }
form .page .field.df-field-tgl input { min-height: 40px; }
.df-bantuan { display: block; position: relative; z-index: 1; margin: 0 0 26px 0; padding: 8px 11px; border-radius: 8px;
              border: 1px solid #cfe3de; border-left: 4px solid #1f6f66; background: #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,.08);
              font: 400 13px/1.5 "Poppins", "Segoe UI", Roboto, Arial, sans-serif; color: #1f2b27; -webkit-text-fill-color: #1f2b27; }
.df-bantuan .fa { color: #1f6f66; -webkit-text-fill-color: #1f6f66; margin-right: 4px; }
/* label kolom tetap terbaca di atas ilustrasi latar */
form .page .field .label { background: #ffffff; padding: 0 5px; border-radius: 4px; }