/* ============================================================================
   SISTEM DIAKONIA GKI CAWANG — Portal Anak Asuh & Orang Tua Asuh
   portal-diakonia.css (dipakai bersama oleh kedua portal)

   Palet mengikuti warna ASLI Sistem Diakonia (public/assets/css/semantic-colors.css),
   BUKAN palet demo Vuexy — primary #18397B (bukan #7367F0), success #267C1D,
   warning #CB8037, info #228CCA, danger #D33A4B. menu #2F3349, body #F8F7FA,
   border #DBDADE mengikuti Vuexy theme-semi-dark (tidak di-override sistem).

   Sebagian besar blok :root di bawah bisa dihapus karena sudah diwarisi dari
   core.css + semantic-colors.css Vuexy. Yang wajib dipertahankan: bottom
   navigation, save bar, foto profil, dan komponen dk-* lainnya.

   Bagian 1-13: komponen umum kedua portal.
   Bagian 15: komponen khusus Portal Orang Tua Asuh (komitmen, tagihan, dst).
   ============================================================================ */

:root{
  --dk-primary:#18397B;
  --dk-primary-hover:#122C61;
  --dk-primary-light:#3D5FA8;
  --dk-primary-soft:rgba(24,57,123,.16);
  --dk-success:#267C1D;
  --dk-info:#228CCA;
  --dk-warning:#CB8037;
  --dk-danger:#D33A4B;

  --dk-menu:#2F3349;
  --dk-menu-dark:#25293C;

  --dk-bg:#F8F7FA;
  --dk-card:#FFFFFF;
  --dk-ink:#2F2B3D;
  --dk-body:#5D596C;
  --dk-muted:#6F6B7D;
  --dk-line:#DBDADE;

  --dk-radius:.375rem;
  --dk-shadow:0 .125rem .5rem rgba(47,43,61,.12);
  --dk-shadow-lg:0 .25rem 1.125rem rgba(47,43,61,.16);
  --dk-menu-gradient:linear-gradient(72.47deg,#18397B 22.16%,rgba(24,57,123,.7) 76.47%);

  --dk-sidebar-w:260px;
  --dk-bottomnav-h:64px;
}

*{ -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:.9375rem;          /* 15px — sama dengan Vuexy */
  line-height:1.53;
  color:var(--dk-body);
  background:var(--dk-bg);
  margin:0;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{ color:var(--dk-ink); }
a{ text-decoration:none; }
button{ font-family:inherit; }

/* Skala tipografi ---------------------------------------------------------- */
.dk-page-title{ font-size:clamp(1.125rem,4.2vw,1.375rem); font-weight:600; color:var(--dk-ink); margin:0; }
.dk-card-title{ font-size:1.0625rem; font-weight:500; color:var(--dk-ink); margin:0; }
.dk-meta { font-size:.8125rem; color:var(--dk-muted); }   /* 13px */
.dk-micro{ font-size:.75rem;   color:var(--dk-muted); }   /* 12px */
.dk-figure{ font-size:clamp(1.25rem,5vw,1.5rem); font-weight:500; line-height:1.2; color:var(--dk-ink); }

/* ============================================================================
   1. SIDEBAR (desktop ≥992px)
   ============================================================================ */
.dk-sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--dk-sidebar-w);
  background:var(--dk-menu); color:#fff;
  display:flex; flex-direction:column; z-index:1040;
  box-shadow:0 .25rem 1.125rem rgba(47,43,61,.18);
}
.dk-brand{ display:flex; align-items:center; gap:.75rem; padding:1.15rem 1.35rem; }
.dk-brand-mark{
  width:34px; height:34px; border-radius:var(--dk-radius); flex:0 0 auto;
  background:var(--dk-primary); color:#fff; display:grid; place-items:center; font-size:1.1rem;
}
.dk-brand-name{ font-weight:700; font-size:1.0625rem; line-height:1.1; color:#fff; letter-spacing:.02em; }
.dk-brand-sub{ font-size:.6875rem; color:rgba(255,255,255,.5); }

.dk-nav{ padding:.5rem .9rem 1rem; overflow-y:auto; flex:1; }
.dk-nav-label{
  font-size:.6875rem; font-weight:500; color:rgba(255,255,255,.38);
  padding:1rem .65rem .45rem; text-transform:uppercase; letter-spacing:.04em;
}
.dk-nav-link{
  display:flex; align-items:center; gap:.75rem;
  padding:.55rem .75rem; border-radius:var(--dk-radius); margin-bottom:.125rem;
  color:rgba(255,255,255,.78); font-size:.9375rem; font-weight:400;
  transition:background .15s ease,color .15s ease;
}
.dk-nav-link i{ font-size:1.25rem; }
.dk-nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.dk-nav-link.active{
  background:var(--dk-menu-gradient); color:#fff; font-weight:500;
  box-shadow:0 .125rem .375rem rgba(24,57,123,.4);
}
.dk-nav-badge{
  margin-left:auto; background:var(--dk-warning); color:#fff;
  font-size:.6875rem; font-weight:600; border-radius:2rem; padding:.05rem .45rem;
}
.dk-sidebar-foot{ padding:1rem 1.35rem; border-top:1px solid rgba(255,255,255,.08); }

/* ============================================================================
   2. AREA UTAMA & TOPBAR
   ============================================================================ */
.dk-main{ margin-left:var(--dk-sidebar-w); min-height:100vh; display:flex; flex-direction:column; }
.dk-topbar{
  background:var(--dk-card); padding:.8rem 1.5rem;
  display:flex; align-items:center; gap:1rem;
  position:sticky; top:0; z-index:1020;
  box-shadow:0 .125rem .5rem rgba(47,43,61,.08);
}
.dk-search{
  flex:1; max-width:320px; display:flex; align-items:center; gap:.55rem;
  background:var(--dk-bg); border:1px solid var(--dk-line);
  border-radius:var(--dk-radius); padding:.45rem .8rem;
  color:var(--dk-muted); font-size:.875rem;
}
.dk-icon-btn{
  width:38px; height:38px; border-radius:var(--dk-radius);
  border:1px solid transparent; background:transparent; color:var(--dk-body);
  display:grid; place-items:center; font-size:1.2rem; position:relative;
}
.dk-icon-btn:hover{ background:rgba(47,43,61,.06); }
.dk-dot{
  position:absolute; top:7px; right:8px; width:8px; height:8px;
  border-radius:50%; background:var(--dk-danger); border:2px solid var(--dk-card);
}
.dk-avatar{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--dk-primary-soft); color:var(--dk-primary);
  font-weight:500; font-size:.9375rem; flex:0 0 auto; background-size:cover; background-position:center;
  border:0; padding:0; cursor:pointer; font-family:inherit;
}
.dk-content{ padding:1.5rem; flex:1; }

/* ============================================================================
   3. KARTU DASAR
   ============================================================================ */
.dk-card{ background:var(--dk-card); border:0; border-radius:var(--dk-radius); box-shadow:var(--dk-shadow); }
.dk-card-head{
  padding:1.1rem 1.25rem .85rem;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.dk-card-body{ padding:.75rem 1.25rem 1.25rem; }
.dk-card-head + .dk-card-body{ padding-top:.25rem; }

/* Hero profil -------------------------------------------------------------- */
.dk-hero{
  border-radius:var(--dk-radius); overflow:hidden; color:#fff;
  background:var(--dk-menu-gradient); position:relative;
  box-shadow:0 .25rem 1.125rem rgba(24,57,123,.4);
}
.dk-hero::after{
  content:""; position:absolute; right:-60px; bottom:-90px;
  width:230px; height:230px; border-radius:50%; background:rgba(255,255,255,.08);
}
.dk-hero-body{ padding:1.35rem; position:relative; z-index:1; }
.dk-hero h2{ color:#fff; }
.dk-hero-avatar{
  width:58px; height:58px; border-radius:50%; flex:0 0 auto;
  background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.28);
  display:grid; place-items:center; font-size:1.35rem; font-weight:600; color:#fff;
}
.dk-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.2);
  border-radius:2rem; padding:.2rem .65rem; font-size:.75rem; font-weight:400;
}
.dk-hero-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem 1rem;
  margin-top:1.15rem; padding-top:1.15rem; border-top:1px solid rgba(255,255,255,.2);
}
.dk-hero-grid dt{ font-size:.75rem; color:rgba(255,255,255,.72); font-weight:400; margin-bottom:.1rem; }
.dk-hero-grid dd{ font-size:.9375rem; font-weight:500; margin:0; color:#fff; }

/* Kartu statistik ---------------------------------------------------------- */
.dk-stat{
  background:var(--dk-card); border:0; border-radius:var(--dk-radius);
  padding:1.1rem 1.25rem; height:100%; box-shadow:var(--dk-shadow);
}
.dk-stat-ico{
  width:40px; height:40px; border-radius:var(--dk-radius);
  display:grid; place-items:center; font-size:1.25rem; margin-bottom:.85rem;
}

/* Warna label ala Vuexy bg-label-* ----------------------------------------- */
.ico-blue   { background:rgba(24,57,123,.16); color:var(--dk-primary); }
.ico-olive  { background:rgba(38,124,29,.16);  color:var(--dk-success); }
.ico-magenta{ background:rgba(34,140,202,.16);   color:var(--dk-info); }
.ico-amber  { background:rgba(203,128,55,.16);  color:var(--dk-warning); }
.ico-navy   { background:rgba(109,107,119,.16); color:var(--dk-muted); }
.ico-danger { background:rgba(211,58,75,.16);   color:var(--dk-danger); }

.dk-badge{
  display:inline-flex; align-items:center; gap:.3rem; border-radius:2rem;
  padding:.2rem .65rem; font-size:.75rem; font-weight:500; white-space:nowrap;
}
.b-done{ background:rgba(38,124,29,.16);  color:var(--dk-success); }
.b-wait{ background:rgba(203,128,55,.16);  color:var(--dk-warning); }
.b-info{ background:rgba(34,140,202,.16);   color:var(--dk-info); }
.b-none{ background:rgba(109,107,119,.16); color:var(--dk-muted); }
.b-tolak{ background:rgba(211,58,75,.16);  color:var(--dk-danger); }
.b-primary{ background:rgba(24,57,123,.16); color:var(--dk-primary); }

/* Checklist ---------------------------------------------------------------- */
.dk-check{ display:flex; align-items:flex-start; gap:.85rem; padding:.85rem 0; border-bottom:1px solid var(--dk-line); }
.dk-check:last-child{ border-bottom:0; padding-bottom:0; }
.dk-check:first-child{ padding-top:.25rem; }
.dk-check-ico{ width:32px; height:32px; border-radius:var(--dk-radius); flex:0 0 auto; display:grid; place-items:center; font-size:1.05rem; }

/* Tombol aksi besar -------------------------------------------------------- */
.dk-action{
  display:flex; align-items:center; gap:.9rem; width:100%;
  padding:.85rem 1rem; border:1px solid var(--dk-line); background:var(--dk-card);
  border-radius:var(--dk-radius); text-align:left; color:var(--dk-body);
  transition:border-color .15s ease, box-shadow .15s ease, transform .12s ease;
  min-height:64px;
}
.dk-action:hover{ border-color:var(--dk-primary); box-shadow:0 .125rem .375rem rgba(24,57,123,.2); }
.dk-action:active{ transform:scale(.985); }
.dk-action-ico{ width:42px; height:42px; border-radius:var(--dk-radius); display:grid; place-items:center; font-size:1.3rem; flex:0 0 auto; }
.dk-action-title{ font-weight:500; font-size:.9375rem; line-height:1.3; color:var(--dk-ink); }

/* ============================================================================
   4. TABEL & DAFTAR
   ============================================================================ */
.dk-table{ width:100%; margin:0; font-size:.875rem; }
.dk-table thead th{
  background:var(--dk-bg); color:var(--dk-muted);
  font-weight:600; font-size:.75rem; letter-spacing:.04em; text-transform:uppercase;
  padding:.7rem 1.25rem; border-bottom:1px solid var(--dk-line); white-space:nowrap;
}
.dk-table tbody td{ padding:.85rem 1.25rem; border-bottom:1px solid var(--dk-line); vertical-align:middle; }
.dk-table tbody tr:last-child td{ border-bottom:0; }
.dk-table tbody tr:hover{ background:rgba(47,43,61,.03); }

.dk-row{ padding:.95rem 1.25rem; border-bottom:1px solid var(--dk-line); }
.dk-row:last-child{ border-bottom:0; }

.dk-empty{ text-align:center; padding:2.75rem 1.25rem; }
.dk-empty i{ font-size:2.5rem; color:#B7B5BE; }
.dk-empty-title{ font-weight:500; color:var(--dk-ink); margin:.75rem 0 .25rem; }

/* ============================================================================
   5. TOMBOL
   ============================================================================ */
.btn-dk{
  background:var(--dk-primary); border:0; color:#fff; font-weight:500;
  border-radius:var(--dk-radius); padding:.55rem 1.15rem; font-size:.9375rem;
  box-shadow:0 .125rem .25rem rgba(24,57,123,.4);
}
.btn-dk:hover{ background:var(--dk-primary-hover); color:#fff; }
.btn-dk:disabled{ background:var(--dk-primary); opacity:.45; box-shadow:none; color:#fff; }
.btn-dk-ghost{
  background:transparent; border:1px solid var(--dk-line); color:var(--dk-body);
  font-weight:500; border-radius:var(--dk-radius); padding:.55rem 1.15rem; font-size:.9375rem;
}
.btn-dk-ghost:hover{ background:rgba(47,43,61,.06); }
.btn-dk-sm{ padding:.3rem .75rem; font-size:.8125rem; }
.btn-dk-danger{
  background:transparent; border:1px solid rgba(211,58,75,.5); color:var(--dk-danger);
  font-weight:500; border-radius:var(--dk-radius); padding:.55rem 1.15rem; font-size:.9375rem;
}
.btn-dk-danger:hover{ background:rgba(211,58,75,.08); }

/* ============================================================================
   6. BANNER
   ============================================================================ */
.dk-notice{
  display:flex; gap:.9rem; align-items:flex-start;
  border-radius:var(--dk-radius); padding:1rem 1.25rem;
  background:rgba(203,128,55,.12); border:1px solid rgba(203,128,55,.35);
}
.dk-notice-info{ background:rgba(34,140,202,.1);   border-color:rgba(34,140,202,.32); }
.dk-notice-danger{ background:rgba(211,58,75,.1); border-color:rgba(211,58,75,.32); }

/* ============================================================================
   7. SEGMENTED TABS (Akademik)
   ============================================================================ */
.dk-tabs{
  display:inline-flex; gap:.25rem; padding:.25rem;
  background:var(--dk-bg); border:1px solid var(--dk-line);
  border-radius:var(--dk-radius);
}
.dk-tabs .nav-link{
  border:0; border-radius:calc(var(--dk-radius) - .0625rem);
  padding:.45rem 1rem; font-size:.875rem; font-weight:500; color:var(--dk-muted);
}
.dk-tabs .nav-link.active{
  background:var(--dk-primary); color:#fff;
  box-shadow:0 .125rem .25rem rgba(24,57,123,.35);
}
.dk-filter-bar{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.dk-filter-bar .form-select{ width:auto; min-width:150px; }

/* ============================================================================
   8. BERKAS (rapor / bukti SPP)
   ============================================================================ */
.dk-file{
  display:flex; align-items:center; gap:.9rem;
  padding:.9rem 1.25rem; border-bottom:1px solid var(--dk-line);
}
.dk-file:last-child{ border-bottom:0; }
.dk-file-ico{
  width:42px; height:42px; border-radius:var(--dk-radius); flex:0 0 auto;
  display:grid; place-items:center; font-size:1.3rem;
}
.dk-file-name{ font-weight:500; color:var(--dk-ink); font-size:.9375rem; }
.dk-file-actions{ display:flex; gap:.35rem; flex:0 0 auto; }

/* Baris SPP per bulan ------------------------------------------------------ */
.dk-month{
  display:flex; align-items:center; gap:.85rem;
  padding:.8rem 1.25rem; border-bottom:1px solid var(--dk-line);
}
.dk-month:last-child{ border-bottom:0; }
.dk-month-tag{
  width:52px; height:46px; border-radius:var(--dk-radius); flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--dk-bg); color:var(--dk-muted); line-height:1.1;
}
.dk-month-tag strong{ font-size:.875rem; color:var(--dk-ink); font-weight:600; }
.dk-month-tag span{ font-size:.625rem; }
.dk-month.is-lunas   .dk-month-tag{ background:rgba(38,124,29,.16); }
.dk-month.is-lunas   .dk-month-tag strong{ color:var(--dk-success); }
.dk-month.is-menunggu .dk-month-tag{ background:rgba(203,128,55,.16); }
.dk-month.is-menunggu .dk-month-tag strong{ color:var(--dk-warning); }
.dk-month.is-tolak   .dk-month-tag{ background:rgba(211,58,75,.16); }
.dk-month.is-tolak   .dk-month-tag strong{ color:var(--dk-danger); }

/* Progress ----------------------------------------------------------------- */
.dk-progress{ height:6px; border-radius:2rem; background:var(--dk-line); overflow:hidden; }
.dk-progress span{ display:block; height:100%; border-radius:2rem; background:var(--dk-primary); }
.dk-progress.is-success span{ background:var(--dk-success); }

/* ============================================================================
   9. PRESTASI
   ============================================================================ */
.dk-prestasi{
  background:var(--dk-card); border-radius:var(--dk-radius); box-shadow:var(--dk-shadow);
  overflow:hidden; height:100%; display:flex; flex-direction:column;
  transition:box-shadow .15s ease, transform .12s ease;
}
.dk-prestasi:hover{ box-shadow:var(--dk-shadow-lg); }
.dk-thumb{
  aspect-ratio:16/10; background:var(--dk-bg);
  display:grid; place-items:center; position:relative; overflow:hidden;
}
.dk-thumb img{ width:100%; height:100%; object-fit:cover; }
.dk-thumb i{ font-size:2.25rem; color:#B7B5BE; }
.dk-thumb .dk-badge{ position:absolute; top:.6rem; left:.6rem; background:rgba(255,255,255,.94); }
.dk-prestasi-body{ padding:.9rem 1rem 1rem; flex:1; display:flex; flex-direction:column; gap:.4rem; }
.dk-prestasi-title{ font-weight:500; color:var(--dk-ink); font-size:.9375rem; line-height:1.35; }
.dk-prestasi-foot{ display:flex; align-items:center; gap:.4rem; margin-top:auto; padding-top:.5rem; }

/* ============================================================================
   10. FOTO PROFIL & FORM
   ============================================================================ */
.dk-photo-wrap{ position:relative; width:126px; height:126px; margin:0 auto; }
.dk-photo{
  width:126px; height:126px; border-radius:50%; overflow:hidden;
  background:var(--dk-primary-soft); color:var(--dk-primary);
  display:grid; place-items:center; font-size:2.4rem; font-weight:500;
}
.dk-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.dk-photo-btn{
  position:absolute; right:2px; bottom:2px;
  width:40px; height:40px; border-radius:50%; border:3px solid var(--dk-card);
  background:var(--dk-primary); color:#fff; font-size:1.1rem;
  display:grid; place-items:center; box-shadow:0 .125rem .375rem rgba(24,57,123,.5);
}
.dk-photo-btn:active{ transform:scale(.94); }
.dk-photo-hint{ text-align:center; font-size:.75rem; color:var(--dk-muted); margin-top:1rem; line-height:1.5; }

.dk-info-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem 0; border-bottom:1px solid var(--dk-line);
}
.dk-info-row:last-child{ border-bottom:0; padding-bottom:0; }
.dk-info-row:first-child{ padding-top:0; }
.dk-info-row dt{ font-size:.8125rem; color:var(--dk-muted); font-weight:400; margin:0; }
.dk-info-row dd{ font-size:.875rem; font-weight:500; margin:0; text-align:right; color:var(--dk-ink); }

.dk-savebar{
  position:sticky; bottom:1rem; z-index:1010; margin-top:1.25rem;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--dk-line); border-radius:var(--dk-radius);
  box-shadow:var(--dk-shadow-lg);
  padding:.8rem 1rem; display:flex; align-items:center; gap:.75rem;
}
.dk-savebar .dk-meta{ flex:1; min-width:0; }
.dk-lock{ font-size:.9rem; color:var(--dk-muted); }

.form-label{
  font-size:.8125rem; font-weight:500; color:var(--dk-ink); margin-bottom:.35rem;
  display:flex; align-items:center; gap:.4rem;
}
.form-control,.form-select,textarea.form-control{
  border-radius:var(--dk-radius); border-color:var(--dk-line);
  padding:.55rem .85rem; font-size:.9375rem; min-height:44px; color:var(--dk-body);
}
textarea.form-control{ min-height:88px; }
.form-control:focus,.form-select:focus{ border-color:var(--dk-primary); box-shadow:0 .125rem .25rem rgba(24,57,123,.2); }
.form-control:disabled,.form-control[readonly]{ background:var(--dk-bg); color:var(--dk-muted); border-style:dashed; }
.dk-hint{ font-size:.75rem; color:var(--dk-muted); margin-top:.35rem; display:block; }
.dk-invalid{ border-color:var(--dk-danger) !important; }
.dk-error{ font-size:.75rem; color:var(--dk-danger); margin-top:.35rem; display:none; }
.dk-error.show{ display:block; }

/* Pratinjau berkas di dalam modal ------------------------------------------ */
.dk-preview{
  display:none; align-items:center; gap:.75rem; margin-top:.6rem;
  padding:.6rem .75rem; border:1px solid var(--dk-line); border-radius:var(--dk-radius);
  background:var(--dk-bg);
}
.dk-preview.show{ display:flex; }
.dk-preview-thumb{
  width:44px; height:44px; border-radius:var(--dk-radius); flex:0 0 auto; overflow:hidden;
  background:var(--dk-primary-soft); color:var(--dk-primary);
  display:grid; place-items:center; font-size:1.2rem;
}
.dk-preview-thumb img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================================
   11. MODAL, BOTTOM SHEET, TOAST
   ============================================================================ */
.modal-content{ border:0; border-radius:var(--dk-radius); box-shadow:var(--dk-shadow-lg); }
.modal-header{ border-bottom:1px solid var(--dk-line); padding:1.15rem 1.35rem; }
.modal-title{ font-size:1rem; font-weight:600; }
.modal-body{ padding:1.35rem; }
.modal-footer{ border-top:1px solid var(--dk-line); padding:1rem 1.35rem; }

.offcanvas-bottom.dk-sheet{ height:auto; border-radius:.75rem .75rem 0 0; border:0; padding-bottom:env(safe-area-inset-bottom); }
.dk-sheet-grip{ width:42px; height:4px; border-radius:2rem; background:var(--dk-line); margin:.75rem auto .25rem; }

.dk-toast{
  position:fixed; left:50%; transform:translateX(-50%) translateY(20px);
  bottom:calc(var(--dk-bottomnav-h) + env(safe-area-inset-bottom) + 1rem);
  background:var(--dk-ink); color:#fff; border-radius:var(--dk-radius);
  padding:.7rem 1.1rem; font-size:.875rem; max-width:calc(100vw - 2rem);
  box-shadow:var(--dk-shadow-lg); z-index:1090;
  opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease;
}
.dk-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.dk-toast.is-error  { background:var(--dk-danger); }
.dk-toast.is-success{ background:var(--dk-success); }
@media (min-width:992px){ .dk-toast{ bottom:1.5rem; } }

/* ============================================================================
   12. MODE HP — bottom navigation
   ============================================================================ */
.dk-mobile-top{ display:none; }
.dk-bottomnav{ display:none; }

@media (max-width:991.98px){
  .dk-sidebar{ display:none; }
  .dk-main{ margin-left:0; }
  .dk-topbar{ display:none; }

  .dk-mobile-top{
    display:flex; align-items:center; gap:.75rem;
    position:sticky; top:0; z-index:1020;
    padding:calc(.7rem + env(safe-area-inset-top)) 1rem .7rem;
    background:var(--dk-menu-gradient); color:#fff;
  }
  .dk-mobile-top .dk-icon-btn{ background:rgba(255,255,255,.16); border-color:transparent; color:#fff; width:36px; height:36px; }
  .dk-mobile-top .dk-icon-btn:hover{ background:rgba(255,255,255,.26); }
  .dk-mobile-top .dk-dot{ border-color:#8177F3; }
  .dk-mobile-top .dk-avatar{ background:rgba(255,255,255,.2); color:#fff; }

  .dk-content{ padding:1rem; padding-bottom:calc(var(--dk-bottomnav-h) + 26px + env(safe-area-inset-bottom)); }

  /* Modal panjang (mis. Unggah Bukti Pembayaran) sering terpotong di HP —
     .modal-dialog-scrollable Bootstrap SEHARUSNYA sudah cukup, tapi di
     sebagian browser mobile (terutama iOS Safari) "100%" pada
     .modal-dialog-scrollable .modal-content dihitung dari viewport yang
     belum memperhitungkan address bar, dan konten yang bisa discroll tidak
     dapat momentum-scroll bawaan iOS tanpa -webkit-overflow-scrolling —
     hasilnya modal kelihatan "macet", tombol Simpan/Batal di bawah tidak
     terjangkau. dvh (dynamic viewport height) + margin eksplisit
     memperbaiki keduanya (revisi 13 September 2026).
     ============================================================================ */
  .modal-dialog{ max-height:calc(100dvh - 1.75rem); margin-top:.875rem; margin-bottom:.875rem; }
  .modal-dialog-scrollable{ max-height:calc(100dvh - 1.75rem); }
  .modal-dialog-scrollable .modal-content{
    max-height:calc(100dvh - 1.75rem);
    -webkit-overflow-scrolling:touch;
  }
  /* AKAR MASALAH SEBENARNYA (ditemukan 25 September 2026, lewat inspeksi
     DOM langsung di headless Chrome — laporan QA "modal Unggah Bukti
     Pembayaran ngestuck gak bisa discroll, tombol Kirim ketutupan"):
     bundle Bootstrap vendor project ini (public/assets/vendor/css/rtl/core.css)
     TIDAK punya rule gabungan `.modal-dialog-centered.modal-dialog-scrollable`
     yang di Bootstrap versi lebih baru mengubah modal-dialog jadi
     flex-direction:column. Tanpa rule itu, `.modal-dialog-centered` yang
     berlaku sendirian (display:flex; align-items:center; flex-direction
     default ROW) membuat modal-content di-treat sebagai flex item pada
     SUMBU SILANG horizontal-row — align-items:center TIDAK men-stretch
     tingginya ke tinggi modal-dialog, jadi modal-content bebas tumbuh
     setinggi kontennya sendiri (bisa 900px+) lalu di-center, alih-alih
     dibatasi max-height & di-clip supaya modal-body-nya yang scroll
     internal. Solusinya: pasang ulang rule gabungan itu supaya
     flex-direction dipaksa column lagi — modal-content baru benar-benar
     kebatasi tingginya dan modal-body (flex:1 1 0%, di bawah) baru bisa
     mengecil & scroll internal sampai tombol Kirim/Simpan di footer
     kelihatan. */
  .modal-dialog-centered.modal-dialog-scrollable{
    flex-direction:column;
    justify-content:center;
    height:100%;
  }
  /* Kepingan terakhir: beberapa modal (mis. modal_bukti.blade.php) bungkus
     modal-body + modal-footer dalam SATU <form>, supaya submit-nya jalan
     wajar. <form> itu elemen block biasa (bukan flex item yang di-manage
     modal-content), jadi flex/overflow apa pun yang ditaruh di modal-body
     TIDAK ada efeknya sama sekali — <form>-nya sendiri yang jadi flex item
     modal-content, tumbuh mengikuti total tinggi modal-body+modal-footer
     tanpa batas, lalu di-clip diam-diam oleh overflow:hidden modal-content
     (verified: modal-body rect tetap 899px meski sudah dikasih flex:1 1 0%,
     krn effect itu percuma di non-flex parent). Form-nya sendiri perlu
     dijadikan flex column supaya modal-body di dalamnya baru benar-benar
     bisa flex-shrink & scroll internal. */
  .modal-dialog-scrollable .modal-content > form{
    display:flex;
    flex-direction:column;
    flex:1 1 0%;
    min-height:0;
  }
  .modal-dialog-scrollable .modal-body{ flex:1 1 0%; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .dk-hero-body{ padding:1.15rem; }
  .dk-card-head{ padding:1rem 1rem .75rem; }
  .dk-card-body{ padding:.5rem 1rem 1rem; }
  .dk-table thead th,.dk-table tbody td,
  .dk-row,.dk-file,.dk-month{ padding-left:1rem; padding-right:1rem; }

  .dk-savebar{ bottom:calc(var(--dk-bottomnav-h) + env(safe-area-inset-bottom) + .6rem); }
  .dk-savebar .btn-dk{ flex:1; }
  .dk-filter-bar .form-select{ flex:1; min-width:0; }

  .dk-bottomnav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1035;
    background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-top:1px solid var(--dk-line);
    box-shadow:0 -.25rem 1.125rem rgba(47,43,61,.1);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .dk-bn-item{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.15rem; height:var(--dk-bottomnav-h); color:var(--dk-muted);
    font-size:.6875rem; font-weight:400; position:relative; transition:color .15s ease;
  }
  .dk-bn-item i{ font-size:1.4rem; }
  .dk-bn-item.active{ color:var(--dk-primary); font-weight:500; }
  .dk-bn-item.active::before{
    content:""; position:absolute; top:0; width:26px; height:3px;
    border-radius:0 0 4px 4px; background:var(--dk-primary);
  }
  .dk-bn-fab{ flex:1; display:flex; justify-content:center; }
  .dk-bn-fab button{
    width:54px; height:54px; border-radius:50%; border:0; margin-top:-18px;
    background:var(--dk-primary); color:#fff; font-size:1.5rem;
    box-shadow:0 .25rem .75rem rgba(24,57,123,.55);
    display:grid; place-items:center;
  }
  .dk-bn-fab button:active{ transform:scale(.94); }
}

@media (max-width:360px){
  .dk-hero-grid{ grid-template-columns:1fr; }
  .dk-figure{ font-size:1.15rem; }
  .dk-bn-item{ font-size:.625rem; }
  .dk-photo,.dk-photo-wrap{ width:110px; height:110px; }
  .dk-photo{ font-size:2.1rem; }
}

/* ============================================================================
   13. AKSESIBILITAS
   ============================================================================ */
:focus-visible{ outline:2px solid var(--dk-primary); outline-offset:2px; border-radius:var(--dk-radius); }
.dk-skip{
  position:absolute; left:-9999px; top:0; z-index:1100;
  background:var(--dk-primary); color:#fff; padding:.6rem 1rem; border-radius:0 0 var(--dk-radius) 0;
}
.dk-skip:focus{ left:0; color:#fff; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

/* ============================================================================
   14. INTEGRASI VUEXY / LARAVEL
   ============================================================================ */
@media (max-width:991.98px){
  /* Navigasi sudah pindah ke bottom nav — matikan chrome Vuexy di HP */
  #layout-menu,
  .layout-menu-toggle,
  .layout-overlay,
  .drag-target,
  .content-footer{ display:none !important; }

  /* Beri ruang di bawah agar konten tidak tertutup bottom nav */
  .content-wrapper,
  .layout-page > .content-wrapper > .container-fluid{
    padding-bottom:calc(var(--dk-bottomnav-h) + 26px + env(safe-area-inset-bottom)) !important;
  }

  /* Navbar Vuexy generik (search/bahasa/lonceng/avatar) diganti sepenuhnya
     oleh header sapaan personal .dk-mobile-top (revisi 13 September 2026) —
     sebelumnya cuma dipendekkan (padding-top), bukan disembunyikan, jadi
     yang muncul di HP masih navbar generik, bukan sapaan personal seperti
     desain aslinya. */
  .layout-navbar{ display:none !important; }
}

/* ============================================================================
   15. PORTAL ORANG TUA ASUH
   Komponen tambahan: kartu komitmen, jadwal tagihan, kartu anak asuh,
   dan info rekening tujuan transfer.
   ============================================================================ */

/* Kartu komitmen tahunan ---------------------------------------------------- */
.dk-komitmen{
  background:var(--dk-card); border-radius:var(--dk-radius);
  box-shadow:var(--dk-shadow); padding:1.25rem;
}
.dk-komitmen-angka{
  font-size:clamp(1.5rem,6vw,1.875rem); font-weight:600;
  color:var(--dk-ink); line-height:1.15; letter-spacing:-.02em;
}
.dk-komitmen-sisa{ font-size:.875rem; color:var(--dk-muted); }
.dk-komitmen-bar{ margin:1rem 0 .6rem; }
.dk-komitmen-legend{ display:flex; justify-content:space-between; gap:1rem; font-size:.75rem; }

/* Baris tagihan / cicilan --------------------------------------------------- */
.dk-bill{
  display:flex; align-items:center; gap:.9rem;
  padding:.9rem 1.25rem; border-bottom:1px solid var(--dk-line);
  position:relative;
}
.dk-bill:last-child{ border-bottom:0; }
.dk-bill-ico{
  width:42px; height:42px; border-radius:var(--dk-radius); flex:0 0 auto;
  display:grid; place-items:center; font-size:1.25rem;
}
.dk-bill-title{ font-weight:500; color:var(--dk-ink); font-size:.9375rem; }
.dk-bill-amount{ font-weight:600; font-size:.9375rem; color:var(--dk-ink); white-space:nowrap; }
.dk-bill.is-lunas    .dk-bill-amount{ color:var(--dk-success); }
.dk-bill.is-terlambat{ background:rgba(211,58,75,.04); }
.dk-bill.is-terlambat::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--dk-danger);
}
.dk-bill.is-jatuh-tempo::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--dk-warning);
}

/* Kartu anak asuh yang diasuh ---------------------------------------------- */
.dk-anak{
  display:flex; gap:1rem; padding:1.1rem 1.25rem;
  border-bottom:1px solid var(--dk-line);
}
.dk-anak:last-child{ border-bottom:0; }
.dk-anak-foto{
  width:56px; height:56px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  background:var(--dk-primary-soft); color:var(--dk-primary);
  display:grid; place-items:center; font-weight:600; font-size:1.1rem;
}
.dk-anak-foto img{ width:100%; height:100%; object-fit:cover; }
.dk-anak-nama{ font-weight:500; color:var(--dk-ink); font-size:.9375rem; }

/* Slot kapasitas kosong ---------------------------------------------------- */
.dk-slot{
  display:flex; align-items:center; gap:1rem; width:100%;
  padding:1.1rem 1.25rem; border:1px dashed var(--dk-line);
  border-radius:var(--dk-radius); background:transparent;
  color:var(--dk-body); text-align:left; min-height:80px;
  transition:border-color .15s ease, background .15s ease;
}
.dk-slot:hover{ border-color:var(--dk-primary); background:rgba(24,57,123,.04); }
.dk-slot-ico{
  width:56px; height:56px; border-radius:50%; flex:0 0 auto;
  border:1px dashed var(--dk-line); display:grid; place-items:center;
  font-size:1.4rem; color:var(--dk-muted);
}

/* Rekening tujuan transfer -------------------------------------------------- */
.dk-bank{
  background:linear-gradient(120deg,rgba(24,57,123,.1),rgba(158,149,245,.06));
  border:1px solid rgba(24,57,123,.28); border-radius:var(--dk-radius);
  padding:1.1rem 1.25rem;
}
.dk-bank-no{
  font-size:1.125rem; font-weight:600; color:var(--dk-ink);
  letter-spacing:.04em; font-variant-numeric:tabular-nums;
}
.dk-copy{
  border:1px solid var(--dk-line); background:var(--dk-card); color:var(--dk-body);
  border-radius:var(--dk-radius); padding:.3rem .6rem; font-size:.8125rem; font-weight:500;
  display:inline-flex; align-items:center; gap:.35rem;
}
.dk-copy:hover{ background:rgba(47,43,61,.06); }
.dk-copy.is-done{ color:var(--dk-success); border-color:rgba(38,124,29,.4); }

/* Rincian skema per jenjang ------------------------------------------------- */
.dk-jenjang{
  display:flex; align-items:center; gap:.85rem;
  padding:.8rem 0; border-bottom:1px solid var(--dk-line);
}
.dk-jenjang:last-child{ border-bottom:0; padding-bottom:0; }
.dk-jenjang-tag{
  min-width:64px; height:38px; border-radius:var(--dk-radius); flex:0 0 auto;
  display:grid; place-items:center; font-weight:600; font-size:.8125rem;
  background:var(--dk-primary-soft); color:var(--dk-primary);
}

@media (max-width:575.98px){
  .dk-bill{ flex-wrap:wrap; }
  .dk-bill .dk-bill-aksi{ width:100%; padding-left:calc(42px + .9rem); }
  .dk-bill .dk-bill-aksi .btn-dk,
  .dk-bill .dk-bill-aksi .btn-dk-ghost{ width:100%; }
}

/* ============================================================================
   16. PENDAFTARAN OTA — penyusun komitmen
   Alur bertingkat: Jenjang -> Wilayah -> Kelas -> nominal otomatis.
   ============================================================================ */

.dk-form-page{ max-width:960px; margin:0 auto; padding:2rem 1rem 4rem; }

.dk-form-card{
  background:var(--dk-card); border-radius:var(--dk-radius);
  box-shadow:var(--dk-shadow); padding:1.5rem; margin-bottom:1rem;
}
.dk-eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dk-primary); margin-bottom:.35rem;
}
.dk-form-card h2{ font-size:1.0625rem; font-weight:600; margin:0 0 .2rem; }
.dk-form-sub{ font-size:.8125rem; color:var(--dk-muted); margin-bottom:1.25rem; }
.req{ color:var(--dk-danger); }

/* Langkah bernomor di dalam kartu komitmen ---------------------------------- */
.dk-step{ margin-bottom:1rem; }
.dk-step:last-of-type{ margin-bottom:0; }
.dk-step-head{ display:flex; align-items:center; gap:.55rem; margin-bottom:.5rem; }
.dk-step-num{
  width:22px; height:22px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-size:.75rem; font-weight:600;
  background:var(--dk-primary-soft); color:var(--dk-primary);
}
.dk-step-label{ font-size:.8125rem; font-weight:600; color:var(--dk-ink); }
.dk-step.is-locked{ opacity:.45; pointer-events:none; }
.dk-step.is-locked .dk-step-num{ background:rgba(109,107,119,.16); color:var(--dk-muted); }

/* Segmented / chip pilihan -------------------------------------------------- */
.dk-seg{ display:flex; flex-wrap:wrap; gap:.5rem; }
.dk-seg input{ position:absolute; opacity:0; width:0; height:0; }
.dk-seg label{
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  min-height:42px; padding:.5rem .9rem;
  border:1px solid var(--dk-line); border-radius:var(--dk-radius);
  background:var(--dk-card); color:var(--dk-body);
  font-size:.875rem; font-weight:500; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.dk-seg label:hover{ border-color:var(--dk-primary); }
.dk-seg input:checked + label{
  background:var(--dk-primary); border-color:var(--dk-primary); color:#fff;
  box-shadow:0 .125rem .25rem var(--dk-primary-soft);
}
.dk-seg input:focus-visible + label{ outline:2px solid var(--dk-primary); outline-offset:2px; }
.dk-seg-kelas label{ min-width:56px; }

/* Kartu satu baris komitmen ------------------------------------------------- */
.dk-komit{
  border:1px solid var(--dk-line); border-radius:var(--dk-radius);
  padding:1.15rem; margin-bottom:.85rem; background:var(--dk-card);
  position:relative;
}
.dk-komit.is-lengkap{ border-color:var(--dk-primary-light); background:var(--dk-primary-soft); }
.dk-komit-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; margin-bottom:1rem;
}
.dk-komit-no{ font-size:.8125rem; font-weight:600; color:var(--dk-ink); }

/* Stepper jumlah anak ------------------------------------------------------- */
.dk-qty{ display:inline-flex; align-items:center; border:1px solid var(--dk-line); border-radius:var(--dk-radius); overflow:hidden; }
.dk-qty button{
  width:42px; height:42px; border:0; background:var(--dk-card); color:var(--dk-body);
  font-size:1.15rem; display:grid; place-items:center;
}
.dk-qty button:hover:not(:disabled){ background:rgba(47,43,61,.06); }
.dk-qty button:disabled{ opacity:.35; }
.dk-qty input{
  width:52px; height:42px; border:0; border-left:1px solid var(--dk-line); border-right:1px solid var(--dk-line);
  text-align:center; font-size:.9375rem; font-weight:600; color:var(--dk-ink);
  -moz-appearance:textfield;
}
.dk-qty input::-webkit-outer-spin-button,
.dk-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Hasil hitungan otomatis --------------------------------------------------- */
.dk-hasil{
  border-top:1px solid var(--dk-line); margin-top:1rem; padding-top:1rem;
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.dk-hasil-label{ font-size:.75rem; color:var(--dk-muted); }
.dk-hasil-angka{ font-size:1.125rem; font-weight:600; color:var(--dk-ink); }
.dk-hasil-kosong{ font-size:.875rem; color:var(--dk-muted); font-style:italic; }
.dk-hasil-sub{ font-size:.8125rem; color:var(--dk-muted); }
.dk-hasil-sub strong{ color:var(--dk-primary); font-weight:600; }

.dk-rincian{
  margin-top:.75rem; background:var(--dk-bg); border-radius:var(--dk-radius);
  padding:.75rem .9rem; font-size:.8125rem;
}
.dk-rincian-baris{ display:flex; justify-content:space-between; gap:1rem; padding:.15rem 0; color:var(--dk-muted); }
.dk-rincian-baris.is-total{
  border-top:1px solid var(--dk-line); margin-top:.35rem; padding-top:.45rem;
  color:var(--dk-ink); font-weight:600;
}
.dk-rincian-toggle{
  background:none; border:0; padding:0; font-size:.8125rem; font-weight:500;
  color:var(--dk-primary); display:inline-flex; align-items:center; gap:.25rem;
}

/* Total keseluruhan --------------------------------------------------------- */
.dk-total-box{
  background:var(--dk-menu-gradient); color:#fff;
  border-radius:var(--dk-radius); padding:1.25rem 1.35rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  box-shadow:0 .25rem 1.125rem var(--dk-primary-soft);
}
.dk-total-label{ font-size:.75rem; opacity:.85; font-weight:500; letter-spacing:.05em; text-transform:uppercase; }
.dk-total-angka{ font-size:clamp(1.5rem,6vw,1.875rem); font-weight:600; letter-spacing:-.02em; }
.dk-total-ket{ font-size:.8125rem; opacity:.8; max-width:260px; }

/* Pratinjau jadwal pembayaran ---------------------------------------------- */
.dk-jadwal{
  border:1px dashed var(--dk-primary-light); background:var(--dk-primary-soft);
  border-radius:var(--dk-radius); padding:1rem 1.15rem; margin-top:1rem;
}
.dk-jadwal-baris{ display:flex; justify-content:space-between; gap:1rem; font-size:.875rem; padding:.2rem 0; }
.dk-bulan-chip{
  display:inline-block; background:var(--dk-card); border:1px solid var(--dk-primary-light);
  color:var(--dk-primary); font-size:.75rem; font-weight:600;
  border-radius:2rem; padding:.15rem .65rem; margin:.25rem .25rem 0 0;
}

/* Input manual (khusus Kuliah — tidak ada master tarif per kelas) ----------- */
.dk-manual-nominal{ margin-top:.75rem; }
.dk-manual-nominal .input-group-text{
  border-radius:var(--dk-radius) 0 0 var(--dk-radius); background:var(--dk-bg);
  border-color:var(--dk-line); color:var(--dk-ink); font-weight:600; font-size:.875rem;
}

@media (max-width:575.98px){
  .dk-form-card{ padding:1.15rem 1rem; }
  .dk-form-page{ padding:1rem 1rem 3rem; }
  .dk-seg label{ flex:1 1 auto; }
  .dk-seg-kelas label{ flex:0 0 auto; min-width:52px; }
  .dk-total-box{ flex-direction:column; align-items:flex-start; }
  .dk-hasil{ flex-direction:column; align-items:flex-start; gap:.5rem; }
}

/* ============================================================================
   17. DETAIL ANAK ASUH (dilihat OTA) — ota/anak_asuh_detail.blade.php
   ============================================================================ */

.dk-back{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.875rem; font-weight:500; color:var(--dk-primary); margin-bottom:.85rem;
}

.dk-anak-hero-foto{
  width:80px; height:80px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  background:rgba(255,255,255,.2); border:2px solid rgba(255,255,255,.35);
  display:grid; place-items:center; color:#fff; font-size:1.75rem; font-weight:600;
}
.dk-anak-hero-foto img{ width:100%; height:100%; object-fit:cover; }

.dk-fakta{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem 1rem; }
.dk-fakta dt{ font-size:.75rem; color:var(--dk-muted); font-weight:400; margin-bottom:.1rem; }
.dk-fakta dd{ font-size:.9375rem; font-weight:500; margin:0; color:var(--dk-ink); }

.dk-tl{ position:relative; padding-left:1.75rem; }
.dk-tl::before{
  content:""; position:absolute; left:.45rem; top:.35rem; bottom:.35rem;
  width:2px; background:var(--dk-line);
}
.dk-tl-item{ position:relative; padding-bottom:1.25rem; }
.dk-tl-item:last-child{ padding-bottom:0; }
.dk-tl-item::before{
  content:""; position:absolute; left:-1.45rem; top:.3rem;
  width:12px; height:12px; border-radius:50%;
  background:var(--dk-card); border:2px solid var(--dk-primary);
}
.dk-tl-item.is-selesai::before{ background:var(--dk-success); border-color:var(--dk-success); }
.dk-tl-tanggal{ font-size:.75rem; color:var(--dk-muted); margin-bottom:.15rem; }
.dk-tl-judul{ font-weight:500; color:var(--dk-ink); font-size:.9375rem; }

@media (max-width:575.98px){
  .dk-fakta{ grid-template-columns:1fr; }
}

/* ============================================================================
   18. PILIH ANAK ASUH SAAT PENDAFTARAN — auth/register_ota.blade.php
   ============================================================================ */
.dk-pilih{ display:grid; gap:.6rem; }
.dk-pilih input{ position:absolute; opacity:0; width:0; height:0; }

.dk-pilih-item{ position:relative; }
.dk-pilih-item label{
  display:flex; align-items:flex-start; gap:.85rem; width:100%;
  padding:.9rem 6.25rem .9rem 1rem;      /* ruang kanan untuk tombol Detail */
  border:1px solid var(--dk-line); border-radius:var(--dk-radius);
  background:var(--dk-card); cursor:pointer; min-height:76px; margin:0;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.dk-pilih-item label:hover{ border-color:var(--dk-primary); }
.dk-pilih input:checked + label{
  border-color:var(--dk-primary); background:rgba(115,103,240,.05);
  box-shadow:0 .125rem .375rem rgba(115,103,240,.2);
}
.dk-pilih input:focus-visible + label{ outline:2px solid var(--dk-primary); outline-offset:2px; }

/* Baris "serahkan ke pengurus" tidak punya tombol detail */
.dk-pilih-item.is-pengurus label{ padding-right:1rem; }

.dk-pilih-ava{
  width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  background:var(--dk-primary-soft); color:var(--dk-primary);
  display:grid; place-items:center; font-weight:600; font-size:.9375rem;
}
.dk-pilih-ava.is-pengurus{ background:rgba(109,107,119,.14); color:var(--dk-muted); }

.dk-pilih-kode{ font-size:.75rem; color:var(--dk-muted); font-variant-numeric:tabular-nums; }
.dk-pilih-nama{ font-weight:500; color:var(--dk-ink); font-size:.9375rem; line-height:1.3; }
.dk-pilih-meta{ font-size:.75rem; color:var(--dk-muted); }
.dk-pilih-nominal{
  display:inline-block; margin-top:.35rem;
  font-size:.8125rem; font-weight:600; color:var(--dk-primary);
}
.dk-pilih-nominal.is-perkiraan{ color:var(--dk-muted); font-weight:500; }

.dk-pilih-detail{
  position:absolute; top:.9rem; right:.9rem;
  border:1px solid var(--dk-line); background:var(--dk-card); color:var(--dk-body);
  border-radius:var(--dk-radius); padding:.3rem .7rem;
  font-size:.8125rem; font-weight:500; display:inline-flex; align-items:center; gap:.25rem;
}
.dk-pilih-detail:hover{ border-color:var(--dk-primary); color:var(--dk-primary); }

/* Baris data di dalam modal detail */
.dk-detail-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem 1rem; }
.dk-detail-grid dt{ font-size:.75rem; color:var(--dk-muted); font-weight:400; margin-bottom:.1rem; }
.dk-detail-grid dd{ font-size:.9375rem; font-weight:500; margin:0; color:var(--dk-ink); }

@media (max-width:575.98px){
  .dk-pilih-item label{ padding:.9rem 1rem 3.25rem; }
  .dk-pilih-item.is-pengurus label{ padding-bottom:.9rem; }
  .dk-pilih-detail{ top:auto; bottom:.9rem; right:.9rem; }
  .dk-detail-grid{ grid-template-columns:1fr; }
}

/* ============================================================================
   19. PANEL BEASISWA + JABARANNYA — auth/register_ota.blade.php
   Nominal sama untuk semua anak pada satu kombinasi jenjang/kelas/wilayah,
   jadi ditampilkan sekali per baris — bukan diulang di tiap kartu anak.
   ============================================================================ */
.dk-beasiswa{
  border:1px solid rgba(115,103,240,.3); background:rgba(115,103,240,.04);
  border-radius:var(--dk-radius); margin:0 0 1rem; overflow:hidden;
}
.dk-beasiswa-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.85rem 1rem; border-bottom:1px solid rgba(115,103,240,.2);
}
.dk-beasiswa-label{ font-size:.8125rem; font-weight:600; color:var(--dk-ink); }
.dk-beasiswa-angka{
  font-size:clamp(1.125rem,4.5vw,1.375rem); font-weight:600;
  color:var(--dk-primary); letter-spacing:-.01em; white-space:nowrap;
}
.dk-beasiswa-isi{ padding:.5rem 1rem; }
.dk-beasiswa-baris{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:.5rem 0; border-bottom:1px dashed rgba(115,103,240,.2);
}
.dk-beasiswa-baris:last-child{ border-bottom:0; }
.dk-beasiswa-nama{ display:block; font-size:.875rem; font-weight:500; color:var(--dk-ink); }
.dk-beasiswa-detail{ display:block; font-size:.75rem; color:var(--dk-muted); }
.dk-beasiswa-nominal{ font-size:.875rem; font-weight:600; color:var(--dk-ink); white-space:nowrap; }
.dk-beasiswa-catatan{
  padding:.7rem 1rem; font-size:.75rem; color:var(--dk-muted);
  background:rgba(115,103,240,.05); border-top:1px solid rgba(115,103,240,.2);
}

/* ============================================================================
   20. POP-UP PENDAFTARAN BERHASIL — auth/register_ota.blade.php, auth/register_anak.blade.php
   ============================================================================ */
.dk-sukses-body{ text-align:center; padding:2rem 1.5rem 1.25rem; }

.dk-sukses-ikon{ width:88px; height:88px; margin:0 auto 1.25rem; position:relative; }
.dk-sukses-ikon svg{ width:100%; height:100%; display:block; }
.dk-sukses-ring{
  fill:none; stroke:var(--dk-success); stroke-width:3;
  stroke-dasharray:170; stroke-dashoffset:170;
  animation:dk-gambar-ring .6s cubic-bezier(.65,0,.45,1) forwards;
}
.dk-sukses-bg{ fill:rgba(40,199,111,.12); transform-origin:center;
  animation:dk-muncul .35s cubic-bezier(.34,1.56,.64,1) forwards; }
.dk-sukses-centang{
  fill:none; stroke:var(--dk-success); stroke-width:4;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:36; stroke-dashoffset:36;
  animation:dk-gambar-centang .35s .5s cubic-bezier(.65,0,.45,1) forwards;
}
@keyframes dk-gambar-ring{ to{ stroke-dashoffset:0; } }
@keyframes dk-gambar-centang{ to{ stroke-dashoffset:0; } }
@keyframes dk-muncul{ from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }

.dk-sukses-judul{ font-size:1.25rem; font-weight:600; color:var(--dk-ink); margin:0 0 .5rem; }
.dk-sukses-teks{ font-size:.9375rem; color:var(--dk-body); margin:0 auto; max-width:26rem; }

/* Elemen yang muncul menyusul, satu per satu */
.dk-sukses-naik{ opacity:0; animation:dk-naik .4s ease-out forwards; }
.dk-sukses-naik.d1{ animation-delay:.55s; }
.dk-sukses-naik.d2{ animation-delay:.7s; }
.dk-sukses-naik.d3{ animation-delay:.85s; }
@keyframes dk-naik{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.dk-sukses-ringkas{
  background:var(--dk-bg); border-radius:var(--dk-radius);
  padding:1rem 1.15rem; margin:1.5rem 0 0; text-align:left;
}
.dk-sukses-ringkas dt{ font-size:.75rem; color:var(--dk-muted); font-weight:400; margin-bottom:.1rem; }
.dk-sukses-ringkas dd{ font-size:.9375rem; font-weight:500; margin:0; color:var(--dk-ink); }

/* Langkah berikutnya */
.dk-langkah{ text-align:left; margin-top:1.5rem; }
.dk-langkah-judul{ font-size:.8125rem; font-weight:600; color:var(--dk-ink); margin-bottom:.75rem; }
.dk-langkah-item{ display:flex; gap:.85rem; padding-bottom:1rem; position:relative; }
.dk-langkah-item:last-child{ padding-bottom:0; }
.dk-langkah-item:not(:last-child)::before{
  content:""; position:absolute; left:13px; top:30px; bottom:2px; width:2px; background:var(--dk-line);
}
.dk-langkah-num{
  width:28px; height:28px; border-radius:50%; flex:0 0 auto; z-index:1;
  display:grid; place-items:center; font-size:.8125rem; font-weight:600;
  background:var(--dk-primary-soft); color:var(--dk-primary);
}
.dk-langkah-item.is-selesai .dk-langkah-num{ background:var(--dk-success); color:#fff; }
.dk-langkah-teks{ font-size:.875rem; color:var(--dk-body); line-height:1.45; }
.dk-langkah-teks strong{ color:var(--dk-ink); font-weight:500; display:block; }

@media (max-width:575.98px){
  .dk-sukses-body{ padding:1.5rem 1rem 1rem; }
  .dk-beasiswa-baris{ flex-direction:column; gap:.15rem; }
  .dk-beasiswa-nominal{ align-self:flex-end; }
}

/* ============================================================================
   21. WIZARD PENDAFTARAN ANAK ASUH — auth/register_anak.blade.php
   ============================================================================ */
.dk-wizard{
  display:flex; align-items:flex-start; gap:.25rem;
  margin-bottom:1.5rem; counter-reset:langkah;
}
.dk-wizard-step{
  flex:1; text-align:center; position:relative;
  background:none; border:0; padding:0; color:var(--dk-muted);
  font-size:.75rem; font-weight:500; line-height:1.25;
}
.dk-wizard-step:disabled{ cursor:default; }
.dk-wizard-bulat{
  width:32px; height:32px; border-radius:50%; margin:0 auto .4rem;
  display:grid; place-items:center; font-size:.8125rem; font-weight:600;
  background:var(--dk-bg); color:var(--dk-muted);
  border:1px solid var(--dk-line);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.dk-wizard-step::before{
  content:""; position:absolute; top:16px; right:50%; left:-50%; height:2px;
  background:var(--dk-line); z-index:0;
}
.dk-wizard-step:first-child::before{ display:none; }
.dk-wizard-bulat{ position:relative; z-index:1; }

.dk-wizard-step.is-aktif{ color:var(--dk-primary); font-weight:600; }
.dk-wizard-step.is-aktif .dk-wizard-bulat{
  background:var(--dk-primary); color:#fff; border-color:var(--dk-primary);
  box-shadow:0 0 0 4px rgba(115,103,240,.15);
}
.dk-wizard-step.is-selesai{ color:var(--dk-ink); }
.dk-wizard-step.is-selesai .dk-wizard-bulat{
  background:var(--dk-success); color:#fff; border-color:var(--dk-success);
}
.dk-wizard-step.is-selesai::before,
.dk-wizard-step.is-aktif::before{ background:var(--dk-success); }

/* Versi ringkas untuk layar kecil */
.dk-wizard-ringkas{ display:none; margin-bottom:1.25rem; }
.dk-wizard-ringkas-atas{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; margin-bottom:.5rem;
}
.dk-wizard-ringkas-judul{ font-size:.9375rem; font-weight:600; color:var(--dk-ink); }
.dk-wizard-ringkas-hitung{ font-size:.75rem; color:var(--dk-muted); white-space:nowrap; }

.dk-pane{ display:none; }
.dk-pane.is-aktif{ display:block; animation:dk-naik .25s ease-out; }

.dk-grup-judul{
  font-size:.8125rem; font-weight:600; color:var(--dk-primary);
  text-transform:uppercase; letter-spacing:.04em;
  padding-bottom:.4rem; border-bottom:1px solid var(--dk-line); margin-bottom:.25rem;
}

/* Navigasi bawah, menempel di layar kecil */
.dk-wizard-nav{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--dk-line);
}
.dk-wizard-nav .dk-meta{ flex:1; text-align:center; }

/* Kartu ringkasan di langkah Review */
.dk-review{
  border:1px solid var(--dk-line); border-radius:var(--dk-radius);
  margin-bottom:.85rem; overflow:hidden;
}
.dk-review-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem 1rem; background:var(--dk-bg); border-bottom:1px solid var(--dk-line);
}
.dk-review-judul{ font-size:.875rem; font-weight:600; color:var(--dk-ink); }
.dk-review-isi{ padding:.5rem 1rem 1rem; }
.dk-review-baris{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:.55rem 0; border-bottom:1px dashed var(--dk-line);
}
.dk-review-baris:last-child{ border-bottom:0; }
.dk-review-label{ font-size:.8125rem; color:var(--dk-muted); flex:0 0 45%; }
.dk-review-nilai{ font-size:.875rem; font-weight:500; color:var(--dk-ink); text-align:right; word-break:break-word; }
.dk-review-nilai.is-kosong{ color:var(--dk-muted); font-weight:400; font-style:italic; }

@media (max-width:767.98px){
  .dk-wizard{ display:none; }
  .dk-wizard-ringkas{ display:block; }
  .dk-review-baris{ flex-direction:column; gap:.15rem; }
  .dk-review-label{ flex:none; }
  .dk-review-nilai{ text-align:left; }
  .dk-wizard-nav .dk-meta{ display:none; }
  .dk-wizard-nav .btn-dk{ flex:1; }
}

/* ============================================================================
   23. SALDO KOMITMEN & ALOKASI CICILAN (Portal OTA)
   Pembayaran di luar jadwal ikut mengisi cicilan secara berurutan, jadi
   tampilannya harus menunjukkan berapa yang sudah tertutup dan sisa di mana.
   Ditambahkan 12 September 2026 (revisi sample2/dashboard-OTA.html,
   pembayaran-OTA.html) — sebelumnya cuma ada .dk-komitmen (1 warna, 2 legend).
   ============================================================================ */
.dk-saldo{
  background:var(--dk-card); border-radius:var(--dk-radius);
  box-shadow:var(--dk-shadow); padding:1.35rem;
}
.dk-saldo-atas{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.15rem;
}
.dk-saldo-total{ font-size:clamp(1.5rem,6vw,1.875rem); font-weight:600;
  color:var(--dk-ink); line-height:1.15; letter-spacing:-.02em; }

.dk-saldo-bar{
  display:flex; height:12px; border-radius:2rem; overflow:hidden;
  background:var(--dk-line); margin-bottom:.85rem;
}
.dk-saldo-bar span{ display:block; height:100%; transition:width .4s ease; }
.dk-saldo-bar .is-bayar{ background:var(--dk-success); }
.dk-saldo-bar .is-lebih{ background:var(--dk-primary); }

.dk-saldo-legend{ display:flex; flex-wrap:wrap; gap:1.25rem; }
.dk-saldo-item{ min-width:0; }
.dk-saldo-item dt{
  display:flex; align-items:center; gap:.4rem;
  font-size:.75rem; color:var(--dk-muted); font-weight:400; margin-bottom:.15rem;
}
.dk-saldo-item dd{ font-size:1.0625rem; font-weight:600; margin:0; color:var(--dk-ink); }
.dk-saldo-titik{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.dk-saldo-titik.is-bayar{ background:var(--dk-success); }
.dk-saldo-titik.is-sisa{ background:var(--dk-line); }
.dk-saldo-titik.is-lebih{ background:var(--dk-primary); }
.dk-saldo-item.is-bayar dd{ color:var(--dk-success); }
.dk-saldo-item.is-lebih dd{ color:var(--dk-primary); }

/* Ringkas alokasi cicilan di dasbor */
.dk-alokasi{
  display:flex; gap:.4rem; margin-top:1.15rem; padding-top:1rem;
  border-top:1px solid var(--dk-line); flex-wrap:wrap;
}
.dk-alokasi-kotak{
  flex:1 1 0; min-width:74px; border:1px solid var(--dk-line);
  border-radius:var(--dk-radius); padding:.55rem .6rem; text-align:center;
}
.dk-alokasi-kotak.is-lunas{ border-color:rgba(40,199,111,.45); background:rgba(40,199,111,.07); }
.dk-alokasi-kotak.is-sebagian{ border-color:rgba(255,159,67,.5); background:rgba(255,159,67,.07); }
.dk-alokasi-kotak.is-terlambat{ border-color:rgba(234,84,85,.5); background:rgba(234,84,85,.07); }
.dk-alokasi-nama{ font-size:.6875rem; color:var(--dk-muted); }
.dk-alokasi-nilai{ font-size:.8125rem; font-weight:600; color:var(--dk-ink); }
.dk-alokasi-kotak.is-lunas .dk-alokasi-nilai{ color:var(--dk-success); }
.dk-alokasi-kotak.is-sebagian .dk-alokasi-nilai{ color:var(--dk-warning); }
.dk-alokasi-kotak.is-terlambat .dk-alokasi-nilai{ color:var(--dk-danger); }

/* Baris cicilan di halaman Pembayaran, dengan parameter pelunasan */
.dk-cicilan{
  padding:1rem 1.25rem; border-bottom:1px solid var(--dk-line);
  display:flex; gap:.9rem; align-items:flex-start;
}
.dk-cicilan:last-child{ border-bottom:0; }
.dk-cicilan.is-lunas{ background:rgba(40,199,111,.04); }
.dk-cicilan.is-terlambat{ background:rgba(234,84,85,.04); }
.dk-cicilan-ico{
  width:42px; height:42px; border-radius:var(--dk-radius); flex:0 0 auto;
  display:grid; place-items:center; font-size:1.25rem;
}
.dk-cicilan-isi{ flex-grow:1; min-width:0; }
.dk-cicilan-atas{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:.35rem;
}
.dk-cicilan-judul{ font-weight:500; color:var(--dk-ink); font-size:.9375rem; }
.dk-cicilan-nominal{ font-weight:600; font-size:.9375rem; color:var(--dk-ink); white-space:nowrap; }
.dk-cicilan-bar{
  height:8px; border-radius:2rem; background:var(--dk-line);
  overflow:hidden; margin:.5rem 0 .4rem;
}
.dk-cicilan-bar span{ display:block; height:100%; border-radius:2rem; background:var(--dk-success); transition:width .4s ease; }
.dk-cicilan.is-sebagian .dk-cicilan-bar span{ background:var(--dk-warning); }
.dk-cicilan.is-terlambat .dk-cicilan-bar span{ background:var(--dk-danger); }
.dk-cicilan-ket{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; font-size:.75rem; color:var(--dk-muted); flex-wrap:wrap;
}

@media (max-width:575.98px){
  .dk-alokasi-kotak{ flex:1 1 calc(33.333% - .4rem); }
  .dk-cicilan-atas{ flex-direction:column; gap:.15rem; }
}