/* ===========================================================
   SIA.Sat — Global Stylesheet
   Satu file CSS ini dipakai oleh seluruh halaman.
=========================================================== */

:root{
  --header-bg: #0b5ea3;
  --header-bg-dark: #084b84;
  --accent: #1e93e8;
  --accent-dark: #0d7fd1;
  --bg: #f2f3f0;
  --sidebar-bg: #ffffff;
  --card-bg: #ffffff;
  --border: #dfe2dd;
  --text: #1c1e1c;
  --text-muted: #8b8f89;
  --text-faint: #b7bab4;
  --green-bg: #d9f5e3;
  --green-text: #1a8a4c;
  --red-text: #e0342b;
  --link: #1a73c7;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 2px 10px rgba(20,30,40,.06);
  --font-head: 'Poppins', 'Inter', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Ganti/tambahkan foto kampus Anda di folder images/ dengan nama file berikut,
     lalu background di halaman login / lupa password / panduan otomatis berubah. */
  --photo-guest: url('../foto/kampus-login.jpg');
  --photo-guide: url('../foto/panduan\ regristrasi.jpg');
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }

body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; }
img{ max-width:100%; display:block; }

/* ---------------------------------------------------------
   GUEST PAGES (login / lupa password / panduan)
--------------------------------------------------------- */
.guest-bg{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
  position:relative;
  background:
    linear-gradient(180deg, rgba(10,20,10,.28), rgba(10,20,10,.42)),
    var(--photo-guest);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #2c5530; /* fallback color kalau foto belum ditaruh di images/ */
  overflow:hidden;
}
.guest-bg::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
}
.guest-card{
  position:relative;
  z-index:2;
  width:100%;
  max-width: 650px;
  background: rgba(244,247,242,.97);
  border-radius: 18px;
  padding: 38px 36px 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  text-align:center;
  animation: rise .5s ease;
}
@keyframes rise{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}
.guest-logo{
  width:56px; height:56px; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  color: #8fb8e8;
}
.guest-title{ font-family: var(--font-head); font-weight:600; font-size:1.25rem; color:#4a4f4a; margin:0; }
.guest-sub{ font-family: var(--font-head); font-weight:600; font-size:1.25rem; color:#4a4f4a; margin:0 0 6px; }
.guest-step{ font-weight:600; color:#3a3f3a; margin: 4px 0 22px; }

.field{
  width:100%;
  padding: 13px 16px;
  margin-bottom: 14px;
  border-radius: 9px;
  border: 1px solid #d8dcd5;
  background:#fff;
  font-size: .95rem;
  color: var(--text);
}
.field::placeholder{ color:#9aa09a; }
.field:focus{ outline: 2px solid var(--accent); outline-offset:1px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  padding: 13px 16px;
  border-radius: 9px;
  border: none;
  font-weight:600;
  font-size: .95rem;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn:active{ transform: scale(.98); }
.btn-primary{ background: var(--accent); color:#fff; }
.btn-primary:hover{ background: var(--accent-dark); }
.btn-outline{ background:#fff; border:1px solid #cfd3cc; color:#4a4f4a; }
.btn-outline:hover{ background:#f2f4f0; }
.btn-secondary{ background:#8b8f89; color:#fff; }
.btn-secondary:hover{ background:#767a72; }

.guest-link{
  display:block;
  margin: 14px 0 0;
  color: var(--link);
  font-size: .92rem;
}
.guest-link:hover{ text-decoration:underline; }
.guest-divider{ height:14px; }

/* ---------------------------------------------------------
   APP SHELL (header + sidebar + content)
--------------------------------------------------------- */
.app{ min-height:100vh; display:flex; flex-direction:column; }

.topbar{
  background: var(--header-bg);
  background-image: linear-gradient(90deg, var(--header-bg), var(--header-bg-dark));
  color:#fff;
  padding: 16px 28px;
  display:flex; align-items:center; justify-content:space-between;
  position: sticky; top:0; z-index:50;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.topbar-brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-head);
  font-weight:700;
  font-size:1.3rem;
  letter-spacing:.2px;
}
.topbar-brand svg{ width:26px; height:26px; }
.topbar-burger{
  display:none;
  background:transparent; border:none; color:#fff; cursor:pointer;
  width:36px; height:36px; align-items:center; justify-content:center;
}

.layout{ flex:1; display:flex; align-items:flex-start; }

.sidebar{
  width: 270px;
  flex-shrink:0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  min-height: calc(100vh - 62px);
  padding: 20px 18px 30px;
  transition: width .2s ease, padding .2s ease;
  overflow: hidden;
}
.sidebar-user{
  display:flex; align-items:center; gap:12px;
  padding-bottom:14px;
  margin-bottom:10px;
  border-bottom:1px solid var(--border);
}

/* Collapsed (icon-only) sidebar, toggled by the switch control */
.sidebar.collapsed{
  width: 78px;
  padding: 20px 10px 30px;
}
.sidebar.collapsed .sidebar-user{
  flex-direction: column;
  gap: 12px;
  padding-bottom: 16px;
}
.sidebar.collapsed .sidebar-user-name{
  display:none;
}
.sidebar.collapsed .nav-label{
  display:none;
}
.sidebar.collapsed .nav-item{
  justify-content:center;
  padding: 11px;
  gap: 0;
}
.sidebar.collapsed .nav-item span{
  display:none;
}
.sidebar.collapsed .switch{
  flex-shrink:0;
}
.sidebar-avatar{
  width:38px; height:38px; border-radius:50%;
  background:#e7e9e4;
  display:flex; align-items:center; justify-content:center;
  color:#8b8f89;
  flex-shrink:0;
}
.sidebar-user-name{ font-weight:600; flex:1; }
.switch{
  width:38px; height:20px; border-radius:20px;
  border:1px solid #cfd3cc; background:#fff;
  position:relative; flex-shrink:0; cursor:pointer;
}
.switch::after{
  content:""; position:absolute; top:2px; left:2px;
  width:14px; height:14px; border-radius:50%;
  background:#cfd3cc;
  transition: left .15s ease, background .15s ease;
}
.switch.on{ background: var(--accent); border-color:var(--accent); }
.switch.on::after{ left:20px; background:#fff; }

.nav-group{ margin-top: 6px; }
.nav-label{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color: var(--text-faint); font-weight:700;
  margin: 18px 4px 8px;
}
.nav-item{
  display:flex; align-items:center; gap:12px;
  padding: 10px 12px;
  border-radius: 8px;
  color:#5b615a;
  font-size:.94rem;
  font-weight:500;
  margin-bottom:2px;
  transition: background .12s ease, color .12s ease;
}
.nav-item svg{ width:18px; height:18px; flex-shrink:0; opacity:.85; }
.nav-item:hover{ background:#f0f2ee; color: var(--header-bg); }
.nav-item.active{ background: #e7f2fc; color: var(--accent-dark); font-weight:700; }
.nav-item.active svg{ opacity:1; }
.nav-item.danger{ color:#c94b3f; }
.nav-item.danger:hover{ background:#fbeceb; }

.sidebar-close{ display:none; }

.content{
  flex:1;
  min-width:0;
  padding: 34px 40px 60px;
}
.page-title{
  font-family: var(--font-head);
  font-weight:700;
  font-size:1.5rem;
  margin: 0 0 6px;
  color:#171917;
}
.page-sub{ color: var(--text-muted); margin:0 0 26px; font-size:.95rem; }

/* ---------------------------------------------------------
   CARDS / TABLES / SHARED COMPONENTS
--------------------------------------------------------- */
.card{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
}

.table-wrap{ overflow-x:auto; border-radius: var(--radius-sm); }
table.data{
  width:100%;
  border-collapse: collapse;
  font-size:.94rem;
  min-width: 560px;
}
table.data caption{ text-align:left; }
table.data thead th{
  background: var(--accent);
  color:#fff;
  text-align:left;
  padding: 13px 16px;
  font-weight:700;
  font-size:.88rem;
  white-space:nowrap;
}
table.data tbody td{
  padding: 13px 16px;
  border: 1px solid var(--border);
  vertical-align: middle;
}
table.data tbody tr:nth-child(even){ background:#fafbf9; }
table.data td.num, table.data th.num{ text-align:center; width:56px; }
table.data td.right, table.data th.right{ text-align:right; }
table.data td.center{ text-align:center; }

.link-action{ color: var(--link); font-weight:600; }
.link-action:hover{ text-decoration:underline; }

.status-tag{
  display:inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  font-size:.78rem;
  font-weight:700;
}
.status-aktif{ background: var(--green-bg); color: var(--green-text); }
.status-due{ color: var(--red-text); font-weight:600; }

.btn-sm{
  padding: 7px 18px;
  border-radius:7px;
  border:1px solid var(--accent);
  color: var(--accent);
  background:#fff;
  font-weight:700;
  font-size:.85rem;
  cursor:pointer;
}
.btn-sm:hover{ background: var(--accent); color:#fff; }

.info-box{
  display:flex; gap:12px; align-items:flex-start;
  background:#e7f2fc;
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  color:#2c5e86;
  font-size:.9rem;
  margin-top:22px;
}
.info-box svg{ width:20px; height:20px; flex-shrink:0; margin-top:1px; }
.info-box strong{ display:block; margin-bottom:2px; color:#1b4e78; }

/* Progress bar (dashboard SKS) */
.progress-shell{
  display:flex; align-items:center; gap:14px;
  margin: 10px 0 26px;
}
.progress-track{
  flex:1;
  height: 34px;
  border-radius:7px;
  border:1px solid #cfd3cc;
  background:#fff;
  overflow:hidden;
  display:flex; align-items:stretch;
}
.progress-fill{
  background: var(--accent);
  color:#fff;
  font-weight:700;
  font-size:.85rem;
  display:flex; align-items:center; padding-left:14px;
  border-radius: 6px 0 0 6px;
}
.progress-note{ color: var(--red-text); font-weight:700; white-space:nowrap; font-size:.92rem; }

/* Form grid (dashboard data form, ganti password, dispensasi) */
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
}
.form-field label{ display:block; font-weight:700; margin-bottom:6px; font-size:.92rem; }
.form-field textarea.field{ resize: vertical; min-height:110px; }
.form-note{
  text-align:center; color:var(--text-muted); font-size:.8rem;
  margin-top: 22px; line-height:1.6;
}

/* Profile page */
.profile-head{ display:flex; align-items:center; gap:26px; margin-bottom:28px; flex-wrap:wrap; }
.profile-avatar{
  width:110px; height:110px; border-radius:50%;
  background:#e2e5df; flex-shrink:0;
}
.profile-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 40px;
}
.profile-item{ display:flex; gap:14px; align-items:flex-start; }
.profile-item svg{ width:19px; height:19px; margin-top:3px; color:#5b615a; flex-shrink:0; }
.profile-item .k{ color:var(--text-muted); font-size:.82rem; margin-bottom:2px; }
.profile-item .v{ font-weight:600; }

/* Tabs (kredit poin) */
.tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
.tab{
  padding: 11px 20px;
  border-radius:8px;
  background:#c9cdc5;
  color:#fff;
  font-weight:700;
  font-size:.88rem;
  cursor:pointer;
  border:none;
}
.tab.active{ background: var(--header-bg); }

/* Pendaftaran skripsi */
.status-banner{
  background: var(--green-bg);
  color: var(--green-text);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  font-weight:700;
  margin: 14px 0 24px;
}
.status-banner span{ display:block; font-weight:500; font-size:.86rem; margin-top:2px; }
.req-row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 4px;
  border-top: 1px solid var(--border);
  gap: 14px;
}
.req-row:first-of-type{ border-top:1px solid var(--border); }
.req-left{ display:flex; align-items:center; gap:12px; }
.req-left svg{ width:18px; height:18px; color:#5b615a; }
.badge-ok{
  background: var(--green-bg); color:var(--green-text);
  padding: 5px 14px; border-radius:18px; font-weight:700; font-size:.82rem;
  white-space:nowrap;
}

/* Payment page layout */
.pay-layout{ display:grid; grid-template-columns: 1fr 320px; gap:24px; align-items:start; }
.pay-side{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:24px; }
.pay-total-label{ color:var(--text-muted); font-size:.85rem; margin-bottom:2px; }
.pay-total-value{ font-family:var(--font-head); font-weight:700; font-size:1.5rem; color:var(--link); margin-bottom:18px; }
.pay-method{
  display:flex; align-items:center; gap:12px;
  padding: 13px 6px; border-top:1px solid var(--border);
}
.pay-method:first-of-type{ border-top:1px solid var(--border); }
.pay-method svg{ width:26px; height:26px; color:var(--accent); flex-shrink:0; }
.pay-method .m-title{ font-weight:700; font-size:.9rem; }
.pay-method .m-sub{ color:var(--text-muted); font-size:.78rem; }

/* Dispensasi student info card */
.info-card{
  background:#e9ebe6;
  border-radius: var(--radius);
  padding: 24px 28px;
  display:grid;
  grid-template-columns: 200px 1fr 1fr 1fr;
  gap: 16px 22px;
  margin-bottom: 30px;
}
.info-card .logo-cell{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  color:#aab3c4;
  font-family:var(--font-head); font-weight:700;
  border-right: 1px solid #d3d6cf;
}
.info-card .logo-cell svg{ width:40px; height:40px; }
.info-card .k{ font-size:.82rem; color:#57604f; margin-bottom:2px; }
.info-card .v{ font-weight:700; }

.section-heading{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-head);
  font-weight:700; font-size:1.05rem;
  margin: 0 0 18px;
}
.step-num{
  width:26px; height:26px; border-radius:6px;
  background: var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem;
}

/* Panduan Registrasi (guide split page) */
.guide-wrap{
  max-width: 1180px; width:100%;
  background:#f4f7f2;
  border-radius: 16px;
  overflow:hidden;
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.guide-left{ padding: 40px 44px; }
.guide-back{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #dfe2dd;
  margin-bottom: 22px; cursor:pointer;
}
.guide-title{ font-family:var(--font-head); font-weight:700; font-size:1.35rem; margin:0 0 22px; color:#171917; }
.guide-list{ list-style:none; margin:0; padding:0; counter-reset: guide; }
.guide-list li{
  counter-increment: guide;
  position:relative;
  padding-left: 30px;
  margin-bottom: 18px;
  color:#3d423b;
  line-height:1.55;
}
.guide-list li::before{
  content: counter(guide) ".";
  position:absolute; left:0; top:0;
  font-weight:700; color: var(--header-bg);
}
.guide-right{ position:relative; }
.guide-photo{
  width:100%; height:100%; min-height:340px;
  background:
    linear-gradient(180deg, rgba(20,30,45,.15), rgba(15,25,20,.45)),
    var(--photo-guide);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #4c7aab; /* fallback kalau foto belum ditaruh di images/ */
}

/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */
.site-footer{
  text-align:center; color: var(--text-faint);
  font-size:.78rem; padding: 20px 10px 30px;
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 1024px){
  .form-grid{ grid-template-columns: 1fr; }
  .profile-grid{ grid-template-columns: 1fr; }
  .pay-layout{ grid-template-columns: 1fr; }
  .info-card{ grid-template-columns: 1fr 1fr; }
  .info-card .logo-cell{ display:none; }
  .guide-wrap{ grid-template-columns: 1fr; }
  .guide-right{ min-height:220px; order:-1; }
}

@media (max-width: 1024px){
  .form-grid{ grid-template-columns: 1fr; }
  .profile-grid{ grid-template-columns: 1fr; }
  .pay-layout{ grid-template-columns: 1fr; }
  .info-card{ grid-template-columns: 1fr 1fr; }
  .info-card .logo-cell{ display:none; }
  .guide-wrap{ grid-template-columns: 1fr; }
  .guide-right{ min-height:220px; order:-1; }
  .radio-grid{ grid-template-columns: 1fr 1fr; }
}
 
@media (max-width: 860px){
  .topbar-burger{ display:flex; }
  .sidebar{
    position: fixed; top:0; left:0; bottom:0;
    z-index: 100;
    transform: translateX(-105%);
    transition: transform .22s ease;
    box-shadow: 0 0 30px rgba(0,0,0,.25);
    width: 280px;
  }
  .sidebar.open{ transform: translateX(0); }
  .sidebar-close{
    display:flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:50%;
    background:#f0f2ee; border:none; cursor:pointer;
    position:absolute; top:16px; right:16px;
  }
  .sidebar-backdrop{
    display:none;
    position:fixed; inset:0; background:rgba(10,15,10,.4);
    z-index:90;
  }
  .sidebar-backdrop.show{ display:block; }
  .content{ padding: 24px 18px 50px; }
}
 
@media (max-width: 600px){
  .topbar{ padding: 14px 16px; }
  .guest-card{ padding: 30px 22px 26px; }
  .info-card{ grid-template-columns: 1fr; }
  .radio-grid{ grid-template-columns: 1fr; }
  .guest-card-lg{ padding: 26px 18px 22px; }
  .ipk-box{ justify-content:flex-start; }
}
 
@media (max-width: 480px){
  .content > div[style*="display:flex"]{ flex-wrap: wrap; }
}