/* Spinlik Form Add-on - keeps public forms consistent (white, clean) */
.sl-form-wrap{ padding-top: 32px; padding-bottom: 56px; }
.sl-form-card{ padding: 22px; }
@media(min-width:768px){ .sl-form-card{ padding: 30px; } }
.sl-form-title{ font-weight: 800; letter-spacing: -.02em; }
.sl-form-sub{ color: var(--sl-muted); }
.form-label{ font-weight: 600; color: rgba(15,23,42,.80); }
.form-control, .form-select{
  border-radius: 14px;
  border: 1px solid var(--sl-border-strong);
  padding: .70rem .85rem;
}
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .25rem rgba(37,99,235,.14);
  border-color: rgba(37,99,235,.35);
}
.alert{ border-radius: 16px; }
.btn{ border-radius: 999px; font-weight: 700; padding: .65rem 1rem; }
.btn-primary{ background: linear-gradient(135deg, #2563eb, #4f46e5); border:0; }
.btn-outline-secondary{ border-color: rgba(15,23,42,.18); }
.badge{ border-radius: 999px; }

.spinlik-form-page{
  padding: 44px 0 64px;
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(99,102,241,.12), transparent 60%),
    radial-gradient(900px 500px at 0% 20%, rgba(37,99,235,.10), transparent 55%),
    #f7f9fc;
}
.spinlik-form-card{
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(15,23,42,.10);
}
.spinlik-form-card .card-header{
  background: transparent;
  border-bottom: 1px solid rgba(15,23,42,.08);
  padding: 18px 22px;
}
.spinlik-form-card .card-body{ padding: 22px; }

.section-title{ font-weight: 900; color:#0f172a; margin:0; }
.section-sub{ margin-top:6px; color:rgba(15,23,42,.62); font-size:13px; }

.form-label{ font-weight:800; color:rgba(15,23,42,.82); font-size:13px; }
.form-control, .form-select, select, input, textarea{
  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
}
textarea.form-control{ padding: 12px 14px !important; }
.form-control:focus, .form-select:focus, select:focus, input:focus, textarea:focus{
  border-color: rgba(37,99,235,.55) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.12) !important;
}

.badge-soft{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px; border-radius: 999px;
  font-weight: 900; font-size: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  color: rgba(15,23,42,.75);
}
.badge-soft.ok{
  border-color: rgba(16,185,129,.25);
  background: rgba(16,185,129,.10);
  color: rgba(6,95,70,.95);
}
.badge-soft.warn{
  border-color: rgba(245,158,11,.25);
  background: rgba(245,158,11,.10);
  color: rgba(120,53,15,.95);
}

.btn-primary{
  border:0 !important;
  border-radius:999px !important;
  font-weight: 900 !important;
  padding: 12px 16px !important;
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  box-shadow: 0 14px 30px rgba(37,99,235,.22) !important;
}
.btn-success{
  border:0 !important;
  border-radius:999px !important;
  font-weight: 900 !important;
  padding: 12px 16px !important;
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: 0 14px 30px rgba(16,185,129,.18) !important;
}
.btn-outline-secondary{ border-radius:999px !important; font-weight:900 !important; }

.upload-tile{
  border: 1px dashed rgba(15,23,42,.18);
  background: rgba(255,255,255,.70);
  border-radius: 18px;
  padding: 14px;
}
.upload-tile .small{ color: rgba(15,23,42,.55); }
.small-hint{ color: rgba(15,23,42,.58) !important; font-size:12px; }


.profile-header{
  display:flex;
  align-items:center;
  gap:18px;
}
.profile-photo{
  width:120px;
  height:150px;
  border-radius:18px;
  object-fit:cover;
  border: 1px solid rgba(15,23,42,.12);
  background:#fff;
}
.profile-meta .label{
  font-size:12px;
  color: rgba(15,23,42,.55);
  font-weight:700;
  margin-bottom:2px;
}
.profile-meta .value{
  font-size:14px;
  color:#0f172a;
  font-weight:900;
}
.profile-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px 22px;
  margin-top:10px;
}
.profile-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
.profile-top-actions{
  position:absolute;
  right:18px;
  top:14px;
}
.profile-card-body{
  position:relative;
}
@media (max-width: 768px){
  .profile-header{ flex-direction:column; align-items:flex-start; }
  .profile-grid{ grid-template-columns:1fr; }
  .profile-right{ align-items:flex-start; }

  .profile-photo{ width:110px; height:140px; }
}

.profile-grid .label{
  font-size:13px;
  color: rgba(15,23,42,.75);
  font-weight: 900;   /* BOLD label */
  letter-spacing:.2px;
  margin-bottom:2px;
  text-transform: uppercase;
}
.profile-grid .value{
  font-size:14px;
  color:#0f172a;
  font-weight:700;
}

.profile-card-actions{
  display:flex;
  justify-content:flex-end;   /* kanan */
  margin-top:14px;            /* bawah konten */
}

.profile-header-wrap{
  display:flex;
  gap:18px;
  align-items:flex-start;
}

/* === Compact header card (kurangi ruang kosong atas/bawah) === */
.profile-card-body{
  padding: 18px 22px !important;   /* sebelumnya kebesaran */
}

.profile-header-wrap{
  align-items: center !important;  /* biar konten sejajar tengah */
}

.profile-photo{
  width: 110px !important;
  height: 135px !important;
  border-radius: 16px !important;
}

.profile-grid{
  margin-top: 6px !important;
  gap: 8px 20px !important;
}

/* badge jangan bikin jarak tinggi */
.profile-right, 
.profile-card-body .d-flex.justify-content-end{
  margin-bottom: 4px !important;
}

/* tombol logout: tetap kanan bawah tapi tidak bikin card jadi tinggi */
.profile-card-actions{
  margin-top: 8px !important;
  justify-content: flex-end;
}
.profile-card-actions .btn{
  padding: 8px 16px;
}

.spinlik-form-card .card-body{
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

/* card header: jadikan anchor untuk elemen absolute */
.profile-card-body{
  position: relative !important;
  padding: 18px 22px !important;
}

/* tombol logout: nempel kanan-bawah, tidak bikin tinggi card */
.profile-card-actions{
  position: absolute !important;
  right: 22px;
  bottom: 18px;
  margin: 0 !important;
}

/* supaya konten tidak ketabrak tombol */
.profile-header-wrap{
  padding-right: 160px; /* ruang untuk badge + tombol */
}
@media (max-width: 768px){
  .profile-card-actions{
    position: static !important;
    margin-top: 10px !important;
  }
  .profile-header-wrap{ padding-right: 0; }
}

/* badge status pojok kanan atas */
.profile-status{
  position: absolute;
  top: 18px;
  right: 22px;
}

/* beri ruang supaya teks tidak menabrak badge */
.profile-header-wrap{
  padding-right: 170px;
}

/* ===== PROFILE HEADER ===== */

.profile-card-body{
  position:relative;
  padding:20px 24px;
}

.profile-header-wrap{
  display:flex;
  align-items:center;
  gap:24px;
}

/* FOTO */
.profile-photo{
  width:120px;
  height:150px;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}

/* DATA */
.profile-data{
  flex:1;
}

/* NAMA */
.profile-name{
  font-size:22px;
  font-weight:700;
  margin-bottom:12px;
}

/* GRID DATA */
.profile-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px 32px;
}

/* LABEL */
.profile-label{
  font-size:12px;
  font-weight:700;
  color:#64748b;
  letter-spacing:.5px;
}

/* VALUE */
.profile-value{
  font-size:15px;
  font-weight:600;
}

/* STATUS */
.profile-status{
  position:absolute;
  top:18px;
  right:22px;
}

/* LOGOUT */
.profile-card-actions{
  position:absolute;
  right:22px;
  bottom:18px;
}

/* MOBILE */
@media(max-width:768px){

  .profile-header-wrap{
    flex-direction:column;
    align-items:flex-start;
  }

  .profile-grid{
    grid-template-columns:1fr;
  }

  .profile-card-actions{
    position:static;
    margin-top:12px;
  }

}

/* =========================
   PROFILE PRO HEADER
========================= */

.sl-profile-pro__body{
  position: relative;
  padding: 18px 22px;
}

.sl-profile-pro__wrap{
  display: flex;
  gap: 18px;
  align-items: center;
  padding-right: 190px; /* ruang status + logout */
}

.sl-profile-pro__photo img{
  width: 120px;
  height: 150px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
  background: #fff;
}

.sl-profile-pro__data{ flex: 1; min-width: 0; }

.sl-profile-pro__name{
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  margin-bottom: 10px;
}

.sl-profile-pro__meta{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 18px;
  margin-bottom: 12px;
}

.sl-profile-pro__meta .k{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.55);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 2px;
}

.sl-profile-pro__meta .v{
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sl-profile-pro__progress{
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.75);
  border-radius: 14px;
  padding: 12px 12px;
  margin-bottom: 10px;
}

.sl-profile-pro__progress .top{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-bottom: 8px;
}

.sl-profile-pro__progress .t{
  font-weight: 800;
  color: rgba(15,23,42,.75);
  font-size: 13px;
}

.sl-profile-pro__progress .p{
  font-weight: 900;
  color: #1d4ed8;
  font-size: 13px;
}

.sl-profile-pro__progress .bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.08);
  overflow: hidden;
}

.sl-profile-pro__progress .fill{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.sl-profile-pro__progress .chips{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.sl-profile-pro__progress .chip{
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.7);
  color: rgba(15,23,42,.75);
}

.sl-profile-pro__progress .chip.ok{
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.22);
  color: rgba(16,185,129,.95);
}

.sl-profile-pro__progress .chip.no{
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.22);
  color: rgba(180,83,9,.95);
}

/* status badge (kanan atas) */
.sl-profile-pro__status{
  position: absolute;
  top: 18px;
  right: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12.5px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.75);
  color: rgba(15,23,42,.70);
}

.sl-profile-pro__status .dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(245,158,11,.9);
  box-shadow: 0 0 0 4px rgba(245,158,11,.15);
}

.sl-profile-pro__status.is-ok{
  border-color: rgba(16,185,129,.20);
  color: rgba(16,185,129,.95);
}
.sl-profile-pro__status.is-ok .dot{
  background: rgba(16,185,129,.95);
  box-shadow: 0 0 0 4px rgba(16,185,129,.15);
}

.sl-profile-pro__status.is-warn{
  border-color: rgba(245,158,11,.22);
  color: rgba(180,83,9,.95);
}

/* logout kanan bawah */
.sl-profile-pro__actions{
  position: absolute;
  right: 22px;
  bottom: 18px;
}

/* login text */
.sl-profile-pro__login{
  font-size: 13px;
  color: rgba(15,23,42,.65);
}

/* responsive */
@media(max-width: 992px){
  .sl-profile-pro__wrap{ padding-right: 0; }
  .sl-profile-pro__actions{ position: static; margin-top: 10px; }
  .sl-profile-pro__status{ position: static; margin-bottom: 10px; }
  .sl-profile-pro__meta{ grid-template-columns: 1fr; }
  .sl-profile-pro__wrap{ align-items: flex-start; }
}

.sl-profile-pro__print{
margin-top:18px;
}

.btn-gradient-print{
display:inline-block;
background:linear-gradient(135deg,#2b6cf6,#6a4df5);
color:#fff;
padding:12px 28px;
border-radius:40px;
font-weight:600;
text-decoration:none;
box-shadow:0 6px 16px rgba(0,0,0,.15);
transition:.2s;
}

.btn-gradient-print:hover{
transform:translateY(-1px);
color:#fff;
}