/* ==========================================================
   PTSP UI Integration v1.8.0
   MAN Kota Blitar
   Hanya presentation layer — tidak mengubah database/proses.
   ========================================================== */

:root{
  --ptsp-green:#0b5d3b;
  --ptsp-green-dark:#073f2b;
  --ptsp-green-mid:#0c7b4b;
  --ptsp-green-soft:#eaf3ee;
  --ptsp-gold:#d3ad32;
  --ptsp-dark:#173027;
  --ptsp-text:#26332e;
  --ptsp-muted:#69766f;
  --ptsp-border:#e2e9e5;
  --ptsp-light:#f6f9f7;
  --ptsp-white:#fff;
  --ptsp-radius:16px;
  --ptsp-shadow:0 12px 30px rgba(18,55,40,.08);
  --ptsp-container:1180px;
}

/* Harmonisasi warna lama tanpa mengubah nama class aplikasi */
body{
  background:var(--ptsp-light)!important;
  color:var(--ptsp-text)!important;
  font-family:Arial,Helvetica,sans-serif!important;
}

.container{
  width:min(calc(100% - 36px),var(--ptsp-container))!important;
}

/* HEADER */
.ptsp-site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--ptsp-border);
  box-shadow:0 3px 16px rgba(10,60,40,.05);
  backdrop-filter:blur(10px);
}

.ptsp-site-header__inner{
  width:min(calc(100% - 36px),var(--ptsp-container));
  min-height:92px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.ptsp-site-brand{
  min-width:0;
  display:flex;
  align-items:center;
  gap:15px;
}

.ptsp-site-brand__logos{
  display:flex;
  align-items:center;
  gap:9px;
  flex:0 0 auto;
}

.ptsp-site-brand__logos img{
  width:54px;
  height:54px;
  display:block;
  object-fit:contain;
}

.ptsp-site-brand__divider{
  width:1px;
  height:48px;
  background:var(--ptsp-border);
}

.ptsp-site-brand__eyebrow{
  color:var(--ptsp-muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  line-height:1.2;
  text-transform:uppercase;
}

.ptsp-site-brand__name{
  margin-top:5px;
  color:var(--ptsp-green);
  font-size:25px;
  font-weight:900;
  line-height:1.05;
}

.ptsp-site-brand__sub{
  margin-top:4px;
  color:var(--ptsp-dark);
  font-size:11px;
  font-weight:600;
}

.ptsp-site-header__right{
  display:flex;
  align-items:center;
  gap:12px;
}

.ptsp-app-label{
  padding:9px 13px;
  border-radius:10px;
  background:var(--ptsp-green-soft);
  color:var(--ptsp-green);
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
}

.ptsp-home-link{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 14px;
  border:1px solid var(--ptsp-border);
  border-radius:10px;
  background:#fff;
  color:var(--ptsp-green)!important;
  font-size:11px;
  font-weight:900;
  text-decoration:none!important;
}

.ptsp-home-link:hover{
  border-color:#bdd5c8;
  background:var(--ptsp-green-soft);
}

/* Override header lama bila masih tertinggal */
.topbar{
  position:static!important;
  background:transparent!important;
  border:0!important;
}

/* HERO */
.hero{
  background:linear-gradient(120deg,var(--ptsp-green-dark),var(--ptsp-green-mid))!important;
  border-radius:22px!important;
  box-shadow:var(--ptsp-shadow);
}

.hero-kicker{
  color:#f2d66d!important;
  border-color:rgba(242,214,109,.32)!important;
  background:rgba(211,173,50,.12)!important;
}

/* STEP */
.steps{gap:12px!important}
.step{
  border-color:var(--ptsp-border)!important;
  border-radius:14px!important;
  box-shadow:none!important;
}
.step.active{
  border-color:#b9d9c8!important;
  background:#f8fcfa!important;
}
.step-number{
  background:var(--ptsp-green-soft)!important;
  color:var(--ptsp-green)!important;
}
.step.active .step-number{
  background:var(--ptsp-green)!important;
  color:#fff!important;
}

/* CARD/FORM */
.card{
  border-color:var(--ptsp-border)!important;
  border-radius:var(--ptsp-radius)!important;
  box-shadow:var(--ptsp-shadow)!important;
}
.card-header{
  border-bottom-color:#edf2ef!important;
}
input, select, textarea{
  border-color:#dbe5df!important;
  border-radius:10px!important;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--ptsp-green)!important;
  box-shadow:0 0 0 3px rgba(11,93,59,.08)!important;
  outline:none!important;
}

/* BUTTON */
.btn-primary,
button[type="submit"]{
  background:var(--ptsp-green)!important;
  color:#fff!important;
}
.btn-primary:hover,
button[type="submit"]:hover{
  background:var(--ptsp-green-dark)!important;
}
.btn-secondary{
  background:#fff!important;
  color:var(--ptsp-green)!important;
  border:1px solid #cfe0d6!important;
}
.btn-gold{
  background:var(--ptsp-gold)!important;
  color:#2e2600!important;
}

/* FOOTER */
.ptsp-site-footer{
  margin-top:36px;
  background:var(--ptsp-green-dark);
  color:rgba(255,255,255,.84);
}
.ptsp-site-footer__inner{
  width:min(calc(100% - 36px),var(--ptsp-container));
  min-height:132px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:28px;
}
.ptsp-site-footer__brand{
  display:flex;
  align-items:center;
  gap:13px;
}
.ptsp-site-footer__brand img{
  width:48px;
  height:48px;
  object-fit:contain;
}
.ptsp-site-footer__title{
  color:#fff;
  font-size:16px;
  font-weight:900;
}
.ptsp-site-footer__text{
  margin-top:5px;
  color:rgba(255,255,255,.68);
  font-size:10px;
}
.ptsp-site-footer__links{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:9px 16px;
}
.ptsp-site-footer__links a{
  color:#f0ce45!important;
  font-size:10px;
  font-weight:800;
  text-decoration:none!important;
}

/* Sembunyikan footer lama yang hanya satu baris bila ada */
body > .footer,
.container > .footer{
  display:none!important;
}

/* RESPONSIVE */
@media(max-width:820px){
  .ptsp-site-header__inner{
    min-height:78px;
    gap:14px;
  }
  .ptsp-site-brand__logos img{
    width:43px;
    height:43px;
  }
  .ptsp-site-brand__divider{height:40px}
  .ptsp-site-brand__eyebrow{font-size:8px}
  .ptsp-site-brand__name{font-size:20px}
  .ptsp-site-brand__sub{font-size:9px}
  .ptsp-app-label{display:none}
  .ptsp-home-link{font-size:10px;padding:0 11px}
  .ptsp-site-footer__inner{
    grid-template-columns:1fr;
    padding:25px 0;
  }
  .ptsp-site-footer__links{justify-content:flex-start}
}

@media(max-width:560px){
  .container{
    width:min(calc(100% - 22px),var(--ptsp-container))!important;
  }
  .ptsp-site-header__inner{
    width:min(calc(100% - 22px),var(--ptsp-container));
    min-height:72px;
  }
  .ptsp-site-brand__logos img:first-child{display:none}
  .ptsp-site-brand__divider{display:none}
  .ptsp-site-brand__name{font-size:17px}
  .ptsp-site-brand__eyebrow{display:none}
  .ptsp-site-brand__sub{font-size:8px}
  .ptsp-home-link span{display:none}
  .hero{
    margin-top:18px!important;
    padding:26px 20px!important;
    border-radius:18px!important;
  }
  .hero h1{font-size:28px!important}
  .hero p{font-size:13px!important}
  .steps{grid-template-columns:1fr!important}
  .ptsp-site-footer__brand img{width:42px;height:42px}
}