/* KKN Estajiu Servisu Sosial Landing Page */

:root{
  --navy:#0b2a4a;
  --blue:#1b74ff;
  --blue2:#00c2ff;
  --muted:#6b7280;
  --card:#ffffff;
  --bg:#f4f7ff;
}

html{scroll-behavior:smooth;}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: var(--bg);
  color:#0f172a;
}

.bg-navy{background:var(--navy)!important;}

/* Navbar */
.navbar{
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.navbar .nav-link{
  color: rgba(255,255,255,.9);
  font-weight: 500;
  padding: .6rem .75rem;
  border-radius: .7rem;
}

.navbar .nav-link:hover{
  background: rgba(255,255,255,.10);
}

/* Hero */
.hero{
  position: relative;
  min-height: 92vh;
  display:flex;
  align-items:center;
  padding-top: 92px;
  overflow:hidden;
  background: radial-gradient(1000px 500px at 10% 10%, rgba(27,116,255,.28), transparent 60%),
              radial-gradient(900px 450px at 90% 20%, rgba(0,194,255,.22), transparent 55%),
              linear-gradient(135deg, #071b34 0%, #0b2a4a 35%, #0b2a4a 100%);
}

.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 100%);
  pointer-events:none;
}

.hero .container{
  position:relative;
  z-index:2;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.15);
  padding:.55rem .85rem;
  border-radius: 999px;
  font-weight:600;
}

.hero-title{
  color:#fff;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
}

.hero-subtitle{
  margin-top: 1rem;
  color: rgba(255,255,255,.88);
  font-size: 1.06rem;
  line-height: 1.65;
}

.btn-cta{
  border-radius: 14px;
  font-weight: 700;
  padding: .75rem 1.15rem;
  transform: translateZ(0);
}

.btn-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(27,116,255,.25);
}

.info-card{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  border-radius: 16px;
  font-weight: 600;
}

/* Cards */
.register-card{
  background: rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.25);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(2,6,23,.20);
  overflow:hidden;
}

.register-card-header{
  padding: .95rem 1.1rem;
  background: linear-gradient(135deg, rgba(27,116,255,.12), rgba(0,194,255,.12));
  border-bottom:1px solid rgba(2,6,23,.06);
  font-weight: 800;
  display:flex;
  align-items:center;
  gap:.6rem;
}

.register-card-body{padding: 1.1rem;}

.check-row{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.65rem .75rem;
  border:1px solid rgba(2,6,23,.06);
  background: #fff;
  border-radius: 14px;
}

.section{
  padding: 5.5rem 0;
}

.section-muted{
  background: #ffffff;
  border-top: 1px solid rgba(2,6,23,.04);
  border-bottom: 1px solid rgba(2,6,23,.04);
}

.section-head{margin-bottom: 2.2rem;}

.section-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 2rem;
}

.section-lead{
  margin-top: .8rem;
  color: var(--muted);
  font-size: 1.05rem;
  line-height:1.7;
  max-width: 74ch;
}

.feature-card{
  background: #fff;
  border:1px solid rgba(2,6,23,.06);
  border-radius: 18px;
  padding: 1.35rem;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.feature-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(2,6,23,.10);
}

.feature-icon{
  color: var(--blue);
  font-size: 1.25rem;
}

.feature-title{margin-top: .85rem; font-weight: 900; font-size: 1.1rem;}
.feature-text{color: var(--muted); margin-top:.45rem; line-height:1.65;}

.list-card{
  background: #fff;
  border:1px solid rgba(2,6,23,.06);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 12px 30px rgba(2,6,23,.06);
}

.check-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: .85rem;}
.check-list li{font-weight:700;}
.check-list i{font-size:1rem;}

.note-card{
  background: linear-gradient(180deg, rgba(27,116,255,.10), rgba(0,194,255,.08));
  border:1px solid rgba(27,116,255,.18);
  border-radius: 18px;
  padding: 1.25rem;
}
.note-title{font-weight: 900; display:flex; align-items:center; gap:.6rem;}
.note-text{color: var(--muted); margin-top:.8rem; line-height:1.7;}

.upload-card{
  background: #fff;
  border-radius: 18px;
  border:1px solid rgba(2,6,23,.06);
  padding: 1.25rem;
  box-shadow: 0 12px 30px rgba(2,6,23,.06);
  text-align:center;
}
.upload-icon{color: var(--blue); font-size: 1.7rem;}
.upload-title{margin-top:.6rem; font-weight: 950;}
.upload-text{color: var(--muted); margin-top:.5rem; line-height:1.7;}

/* Steps */
.steps{
  background:#fff;
  border-radius: 18px;
  border:1px solid rgba(2,6,23,.06);
  box-shadow: 0 12px 30px rgba(2,6,23,.06);
  padding: 1rem;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .9rem;
}

.step{
  padding: 1.05rem 1rem;
  border:1px solid rgba(2,6,23,.06);
  border-radius: 16px;
  background: #fff;
  display:flex;
  gap: .9rem;
  align-items:flex-start;
}

.step-num{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(27,116,255,.18), rgba(0,194,255,.18));
  color: var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  flex: 0 0 auto;
}

.step-title{font-size: 1.02rem; font-weight: 900; margin:0; line-height:1.35;}

/* Benefits */
.benef-card, .cta-card, .contact-card, .contact-quick{
  background:#fff;
  border:1px solid rgba(2,6,23,.06);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(2,6,23,.06);
}

.benef-card{padding: 1.25rem;}

.cta-card{padding: 1.25rem; text-align:center;}
.cta-icon{color: var(--blue); font-size: 1.8rem;}
.cta-title{margin-top:.6rem; font-weight: 950;}
.cta-text{color: var(--muted); margin-top:.5rem; line-height:1.7;}

/* FAQ */
.accordion-item{
  border:1px solid rgba(2,6,23,.06);
  border-radius: 16px;
  margin-bottom: .85rem;
  overflow:hidden;
}

.accordion-button{
  border-radius: 16px !important;
  font-weight: 900;
}

/* Contact */
.contact-card{padding: 1.25rem;}
.contact-item{display:flex; gap: .85rem; align-items:flex-start; padding:.85rem .75rem; border-bottom:1px solid rgba(2,6,23,.06);} 
.contact-item:last-child{border-bottom:none;}
.contact-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(27,116,255,.14), rgba(0,194,255,.10));
  color: var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.contact-label{color: var(--muted); font-weight: 800; font-size:.92rem;}
.contact-value{font-weight: 900; text-decoration:none; color:#0f172a;}

.contact-quick{padding: 1.25rem; background: linear-gradient(180deg, rgba(27,116,255,.08), rgba(0,194,255,.06));}
.contact-quick-title{font-weight: 950; font-size:1.2rem;}
.contact-quick-text{color: var(--muted); margin-top:.55rem; line-height:1.7;}

/* Footer */
.footer{padding: 1.8rem 0; background: #071b34; color: rgba(255,255,255,.9);} 
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;}
.footer-link{color: rgba(255,255,255,.9); text-decoration:none; font-weight:800;}
.footer-link:hover{color:#fff; text-decoration:underline;}

/* Responsive */
@media (max-width: 992px){
  .steps{grid-template-columns: repeat(2, minmax(0,1fr));}
}

@media (max-width: 576px){
  .steps{grid-template-columns: 1fr;}
  .hero{min-height: auto; padding-top: 86px; padding-bottom: 2.5rem;}
  .section{padding: 4rem 0;}
}