body{
  background: #f4f7fb;
  font-family: sans-serif;
}

.navbar{
  border-radius: 15px;
  margin: 10px;
}

.hero-section{
  padding-top: 10px;
  padding-bottom: 10px;
}

.map-img{
  max-height: 450px;
}

.statistik-card{
  border-radius: 20px;
  transition: 0.3s;
}

.statistik-card:hover{
  transform: translateY(-5px);
}

.card{
  border-radius: 20px;
}

.laporan-card img{
  height: 170px;
  object-fit: cover;
}

.laporan-card{
  overflow: hidden;
  transition: 0.3s;
}

.laporan-card:hover{
  transform: translateY(-5px);
}

.sidebar{
  width: 260px;
  min-height: 100vh;
}

#map{
  height: 350px;
  border-radius: 15px;
}

.label-map{
    background: rgba(255,255,255,0.95);
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
    border: 1px solid #ddd;
    min-width: 50px;
}

/* =========================
   MAP 
========================= */

.map-wrapper{
    position: relative;
}

#map{
    height: 650px;
    border-radius: 20px;
    overflow: hidden;
    background: #eef3f8;
}

/* TOP CONTROL */
.map-top-control{
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1000;

    display: flex;
    gap: 10px;
}

.map-top-control select{
    width: 220px;
    border-radius: 12px;
}

/* LEGEND */
.map-legend{
    position: absolute;
    bottom: 20px;
    left: 20px;

    background: rgba(255,255,255,0.96);

    padding: 18px;
    border-radius: 18px;

    z-index: 1000;

    box-shadow: 0 4px 15px rgba(0,0,0,0.15);

    min-width: 240px;

    transition: 0.3s;
}

.legend-item{
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 10px;

    font-size: 14px;
}

.legend-color{
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

/* LABEL MAP */
.label-map{

    background: rgba(255,255,255,0.96);

    padding: 6px 10px;

    border-radius: 14px;

    font-size: 11px;
    font-weight: bold;

    text-align: center;

    line-height: 1.4;

    box-shadow: 0 3px 10px rgba(0,0,0,0.25);

    border: 1px solid #ddd;

    min-width: 55px;

}

/* HOVER PROVINSI */
.leaflet-interactive{
    transition: 0.2s;
}

.leaflet-interactive:hover{
    filter: brightness(1.1);
}

/* =========================
   LANDING MAP UI
========================= */

.landing-map-wrapper{
  position: relative;
}

.landing-map-control{

  position: absolute;

  top: 20px;
  right: 20px;

  z-index: 1000;

  display: flex;
  flex-direction: column;
  gap: 12px;

}

.landing-map-control select{

  width: 230px;

  border-radius: 12px;

  box-shadow: 0 3px 10px rgba(0,0,0,0.1);

}

.landing-legend{

  background: rgba(255,255,255,0.96);

  padding: 16px;

  border-radius: 16px;

  box-shadow: 0 4px 15px rgba(0,0,0,0.15);

  min-width: 230px;

}

.legend-title{

  font-weight: bold;

  margin-bottom: 12px;

  font-size: 14px;

}

.legend-item{

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 10px;

  font-size: 13px;

}

.legend-dot{

  width: 14px;
  height: 14px;

  border-radius: 50%;

}

/* ZOOM BUTTON */
#landingMap .leaflet-bottom.leaflet-right{
  margin-bottom: 10px;
  margin-right: 10px;
}

/* =========================
   STATS CARD
========================= */

.stats-card{
  background: white;
  border-radius: 22px;
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.06);
  transition: 0.3s;
  height: 100%;
}

.stats-card:hover{
  transform: translateY(-3px);
}

/* ICON */
.stats-icon{
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stats-icon img{
  width: 28px;
  height: 28px;
}

/* WARNA ICON */
.stats-blue{
  background: #65A1F3;
}

.stats-green{
  background: #61DE84;
}

.stats-red{
  background: #FF6069;
}

.stats-gray{
  background: #B5C3D6;
}

/* TEXT */
.stats-title{
  font-size: 13px;
  color: #7c8595;
  margin-bottom: 4px;
}

.stats-number{
  font-size: 30px;
  font-weight: bold;
  line-height: 1.1;
  color: #1d2433;
}

.stats-subtitle{
  font-size: 12px;
  color: #9aa4b2;
  margin-top: 3px;
}

/* =========================
   NAVBAR PREMIUM
========================= */

.navbar{

  border-radius: 0 0 24px 24px;

  padding-top: 14px !important;
  padding-bottom: 14px !important;

}

/* LOGO */
.navbar-logo{

  height: 52px;

  width: auto;

}

/* MENU */
.navbar-nav{

  gap: 14px;

}

.nav-link{

  position: relative;

  font-size: 15px;

  color: #2b2f38 !important;

  transition: 0.3s;

}

.nav-link:hover{

  color: #2563eb !important;

}

/* ACTIVE */
.active-nav{

  color: #2563eb !important;

  font-weight: 600;

}

.active-nav::after{

  content: "";

  position: absolute;

  left: 0;
  bottom: -8px;

  width: 100%;
  height: 3px;

  border-radius: 10px;

  background: #2563eb;

}

/* USER */
.navbar-user{

  display: flex;

  align-items: center;

  gap: 12px;

}

.navbar-username{

  display: flex;

  align-items: center;

  height: 100%;

  font-weight: 600;

  color: #1f2937;

  margin-top: 1px;

}

/* BUTTON */
.btn{

  border-radius: 12px !important;

  padding: 10px 18px !important;

}

/* =========================
   LOGIN MODAL PREMIUM
========================= */

.login-modal{

  border: none;

  border-radius: 28px;

  overflow: hidden;

  padding: 10px;

}

.login-body{

  padding: 20px;

  position: relative;

}

/* CLOSE */
.login-close{

  position: absolute;

  top: 18px;
  right: 18px;

  z-index: 10;

}

/* ILLUSTRATION */
.login-illustration{

  text-align: center;

  margin-bottom: 10px;

}

.login-illustration img{

  width: 140px;

}

/* TITLE */
.login-title{

  text-align: center;

  font-weight: bold;

  margin-bottom: 5px;

}

.login-subtitle{

  text-align: center;

  color: #6b7280;

  margin-bottom: 25px;

}

/* LABEL */
.login-label{

  font-weight: 600;

  margin-bottom: 8px;

}

/* INPUT */
.login-input-group{

  border: 1px solid #d1d5db;

  border-radius: 14px;

  overflow: hidden;

}

.login-input-group .input-group-text{

  background: white;

  border: none;

  color: #6b7280;

}

.login-input{

  border: none !important;

  box-shadow: none !important;

  padding: 14px 10px;

}

/* OPTION */
.login-option{

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-top: 14px;

  margin-bottom: 22px;

}

.forgot-link{

  text-decoration: none;

  font-size: 14px;

}

/* BUTTON */
.login-btn{

  width: 100%;

  background: #2563eb !important;

  color: white !important;

  padding: 14px !important;

  border-radius: 14px !important;

  font-weight: 600;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  transition: 0.3s;

}

.login-btn:hover{

  transform: translateY(-2px);

}

/* REGISTER */
.login-register{

  text-align: center;

  margin-top: 24px;

  font-size: 14px;

}

.login-register a{

  text-decoration: none;

  font-weight: 600;

}

/* =========================
   MODAL BACKDROP BLUR
========================= */



.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,27,53,0.55);
  backdrop-filter: blur(4px); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.modal-backdrop.show { opacity: 1; pointer-events: all; }

/* =========================
   REGISTER MODAL
========================= */

.register-modal{

    border: none;

    border-radius: 30px;

    overflow: hidden;

    position: relative;

}

.register-close{

    position: absolute;

    top: 18px;
    right: 18px;

    z-index: 1000;

}

/* LEFT */
.register-left{

    padding: 35px;

}

/* HEADER */
.register-header{

    display: flex;

    gap: 18px;

    margin-bottom: 28px;

}

.register-icon{

    width: 70px;
    height: 70px;

    border-radius: 50%;

    background: transparent;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 34px;

    color: #2563eb;

}

.register-title{

    font-weight: bold;

    margin-bottom: 6px;

}

.register-subtitle{

    color: #6b7280;

    line-height: 1.6;

}

/* LABEL */
.register-label{

    font-weight: 600;

    margin-bottom: 8px;

    display: block;

}

/* INPUT */
.register-input-group{

    border: 1px solid #d1d5db;

    border-radius: 14px;

    overflow: hidden;

}

.register-input-group .input-group-text{

    background: white;

    border: none;

    color: #6b7280;

}

.register-input{

    border: none !important;

    box-shadow: none !important;

    padding: 14px 10px;

}

/* CHECK */
.register-check{

    margin-top: 8px;

    margin-bottom: 22px;

    font-size: 14px;

}

.register-check a{

    text-decoration: none;

}

/* BUTTON */
.register-btn{

    width: 100%;

    background: #2563eb !important;

    color: white !important;

    padding: 14px !important;

    border-radius: 14px !important;

    font-weight: 600;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

}

.register-login{

    text-align: center;

    margin-top: 24px;

}

.register-login a{

    text-decoration: none;

    font-weight: 600;

}

/* RIGHT */
.register-right{

    background: #f8fbff;

    height: 100%;

    padding: 35px;

    text-align: center;

    border-left: 1px solid #edf2f7;

}

.register-illustration{

    width: 100%;

    max-width: 320px;

    margin-bottom: 20px;

}

.register-right-title{

    font-weight: bold;

    margin-bottom: 10px;

}

.register-right-subtitle{

    color: #6b7280;

    margin-bottom: 28px;

    line-height: 1.6;

}

/* BENEFIT */
.benefit-list{

    display: flex;

    flex-direction: column;

    gap: 14px;

}

.benefit-item{

    background: white;

    border-radius: 18px;

    padding: 16px;

    display: flex;

    gap: 14px;

    text-align: left;

    box-shadow:
      0 3px 10px rgba(0,0,0,0.05);

}

.benefit-item h6{

    margin-bottom: 3px;

    font-weight: 600;

}

.benefit-item p{

    margin: 0;

    font-size: 13px;

    color: #6b7280;

}

.benefit-icon{

    width: 48px;
    height: 48px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 22px;

    flex-shrink: 0;

}

.benefit-blue{
    background: #e7f0ff;
    color: #2563eb;
}

.benefit-green{
    background: #e7fff0;
    color: #16a34a;
}

.benefit-purple{
    background: #f3e8ff;
    color: #9333ea;
}

/* LOGIN ALERT */
.login-alert{

  border-radius: 14px;
  font-size: 14px;
  margin-bottom: 18px;

}

.navbar-masyarakat .nav-link{

  color:#475569;
  font-weight:500;
  padding:18px 16px;
  border-bottom:3px solid transparent;
  transition:.2s;

}

.navbar-masyarakat .nav-link:hover{

  color:#2563eb;

}

.navbar-masyarakat .nav-link.active{

  color:#2563eb;
  border-bottom:3px solid #2563eb;

}

.upload-box{
  width:100%;
  border:2px dashed #dbeafe;
  border-radius:10px;
  padding:25px;
  text-align:center;
  cursor:pointer;
  background:#fafcff;
}

.password-error{

    border-color: #dc3545 !important;

    box-shadow:
    0 0 0 0.15rem
    rgba(220,53,69,.15);

}

.password-error .input-group-text{

    border-color: #dc3545 !important;

    color: #dc3545;

}

.rating-icon{

    cursor:pointer;

    filter: grayscale(100%);

    opacity:.5;

    transition:.2s;

}

.rating-icon.active{

    filter:none;

    opacity:1;

}

.rating-icon:hover{

    transform:scale(1.15);

}

.rating-box{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

}

.rating-action{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}

@media (max-width: 1200px){

    .rating-action{

        flex-direction:column;

        align-items:center;

        width:100%;

    }

}

.rating-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

}

.rating-action{

    display:flex;

    align-items:center;

    gap:10px;

}

/* Saat area mulai sempit */

@media (max-width: 1300px){

    .rating-wrapper{

        flex-direction:column;

        align-items:flex-start;

    }

    .rating-action{

        width:100%;
        flex-direction:column;
        align-items:center;

    }

}

.cara-hero{
    background:#CBE1FB;
    border-radius:25px;
    padding:60px;
    margin-bottom:50px;
    box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

.step-circle{
    width:70px;
    height:70px;
    border-radius:50%;
    background:#0d6efd;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    margin-bottom:15px;
    font-weight:bold;
    font-size:20px;
}

.security-box{
    background:#F3F7FE;
    border-radius:25px;
    padding:40px;
    margin-top:20px;
    box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

.tip-card{
    background:white;
    border:1px solid #eaeaea;
    border-radius:20px;
    padding:25px;
    height:100%;
    box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

.cta-box{
    background:white;
    border-radius:25px;
    padding:40px;
    box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

/* ===== STEPS ===== */

.steps-wrapper{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}

.step-item{
    width:200px;
    text-align:center;
}

.step-item h5{
    font-weight:600;
    margin-top:20px;
    margin-bottom:15px;
}

.step-item p{
    font-size:15px;
    color:#6c757d;
    line-height:1.8;
}

.step-icon{
    width:95px;
    height:95px;
    border-radius:50%;
    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:auto;
}

.step-icon i{
    font-size:40px;
}

.step-number{
    position:absolute;

    top:-10px;
    right:-10px;

    width:35px;
    height:35px;

    border-radius:50%;

    color:white;
    font-weight:600;

    display:flex;
    align-items:center;
    justify-content:center;
}

.blue{
    background:#cce0ff;
    color:#2563eb;
}

.blue .step-number{
    background:#2563eb;
}

.green{
    background:#dcffe8;
    color:#22c55e;
}

.green .step-number{
    background:#22c55e;
}

.yellow{
    background:#fff3d3;
    color:#f59e0b;
}

.yellow .step-number{
    background:#f59e0b;
}

.purple{
    background:#eae3ff;
    color:#8b5cf6;
}

.purple .step-number{
    background:#2563eb;
}

.step-line{
    flex:1;
    border-top:2px dashed #aebed3;
    margin-top:48px;
}

.tips-card{
    background:#fff;
    border:1px solid #e9edf3;
    border-radius:24px;

    padding:28px;

    height:100%;

    transition:.3s;
}

.tips-card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.tips-icon{
    width:64px;
    height:64px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:24px;
}

.tips-icon i{
    font-size:28px;
}

.tips-card h5{
    font-size:20px;
    font-weight:600;
    margin-bottom:15px;
}

.tips-card p{
    color:#6b7280;
    line-height:1.9;
    margin-bottom:0;
}

/* ================================= */
/* TENTANG KAMI */
/* ================================= */

.about-hero{
    background:#f8fbff;

    border-radius:30px;

    padding:50px;

    overflow:hidden;
}

.about-hero h1{
    font-size:45px;
    font-weight:700;
    margin-bottom:25px;
    color:#1e293b;
}

.about-hero h1 span{
    color:#2563eb;
}

.about-hero p{
    font-size:18px;

    line-height:2;

    color:#4b5563;
}

.about-hero img{
    max-width:100%;
}

/* ========================= */
/* CAPSTONE */
/* ========================= */

.capstone-section{

    background:#fff;

    margin-top:40px;

    border-radius:28px;

    padding:50px;

    border:1px solid #e8eef8;

    box-shadow:
    0 10px 25px rgba(0,0,0,.03);

}

.capstone-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:linear-gradient(
    90deg,
    #2563eb,
    #0d6efd);

    color:white;

    padding:12px 30px;

    border-radius:999px;

    font-weight:600;

    margin:auto;

    display:flex;

    width:max-content;
}

.capstone-title{

    text-align:center;

    margin-top:25px;

    margin-bottom:35px;

    font-size:48px;

    font-weight:700;

    color:#1e293b;
}

.project-label{

    text-align:center;

    color:#2563eb;

    font-weight:600;

    margin-bottom:20px;
}

.project-box{

    position:relative;

    border:2px solid #dbeafe;

    border-radius:22px;

    padding:50px;

    text-align:center;
}

.project-box h3{

    font-size:28px;

    font-weight:700;

    line-height:1.5;

    color:#1e293b;

    margin:0;
}

.quote-left{

    position:absolute;

    left:15px;
    top:-5px;

    font-size:70px;

    color:#2563eb;
}

.quote-right{

    position:absolute;

    right:15px;
    bottom:-35px;

    font-size:70px;

    color:#2563eb;
}

/* ========================= */
/* FITUR PROYEK */
/* ========================= */

.project-features{
    margin-top:60px !important;
}

.feature-item{
    text-align:center;
    padding:10px 15px;
}

.feature-item i{
    display:block;

    font-size:42px;

    color:#2563eb;

    margin-bottom:18px;
}

.feature-item h5{
    font-size:22px;

    font-weight:700;

    color:#1e293b;

    margin-bottom:12px;
}

.feature-item p{
    color:#6b7280;

    line-height:1.8;

    margin:0 auto;

    max-width:220px;
}

/* ========================= */
/* TEAM */
/* ========================= */

.team-section{
    margin-top:70px;
}

.team-header{
    text-align:center;
    margin-bottom:50px;
}

.team-header h2{
    font-size:42px;
    font-weight:700;
    color:#1e293b;
}

.team-header i{
    color:#2563eb;
}

.team-header p{
    color:#6b7280;
    max-width:700px;
    margin:15px auto 0;
}

.member-card{

    background:#fff;

    border:1px solid #e8eef8;

    border-radius:24px;

    padding:30px 20px;

    text-align:center;

    height:100%;

    transition:.3s;
}

.member-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 10px 25px rgba(0,0,0,.05);
}

.member-card img{

    width:120px;
    height:120px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:20px;
}

.member-card h5{

    font-size:20px;

    font-weight:700;

    color:#1e293b;

    margin-bottom:10px;
}

.member-card p{

    color:#6b7280;

    margin-bottom:15px;
}

.role-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    font-size:14px;

    font-weight:600;
}

.role-blue{
    background:#e8f0ff;
    color:#2563eb;
}

.role-green{
    background:#e9f9ef;
    color:#16a34a;
}

.role-purple{
    background:#f2ebff;
    color:#7c3aed;
}

.role-orange{
    background:#fff2e8;
    color:#ea580c;
}

.role-pink{
    background:#ffe9f0;
    color:#db2777;
}

.team-members{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:20px;
}

.member-card{
    width:100%;
}

/* ========================= */
/* TERIMA KASIH */
/* ========================= */

.thanks-section{

    margin-top:40px;

    background:white;

    border-radius:28px;

    padding:50px;

    border:1px solid #e8eef8;
}

.thanks-section h2{

    font-size:48px;

    font-weight:700;

    color:#1e293b;

    margin-bottom:20px;
}

.thanks-section p{

    color:#6b7280;

    line-height:2;
}

.thanks-bold{

    color:#1e293b !important;

    font-weight:700;
}

.thanks-img{

    max-width:220px;
}

.legend-scale{
    display:flex;
    align-items:center;
    gap:12px;
    margin:12px 0;
}

.legend-gradient{
    width:14px;
    height:50px;
    border-radius:999px;
    background:linear-gradient(
        to bottom,
        #22c55e,
        #eab308,
        #ef4444
    );
    flex-shrink:0;
}

.legend-scale-labels{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:50px;
}

.legend-scale-labels div{
    font-size:13px;
}