:root{
  --primary-color:#2c7be5;
  --secondary-color:#1a5bb8;
  --success-color:#2c7be5;
  --light-bg:#ffffff;
}

body{
  background-color:var(--light-bg);
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  margin:0;
  padding:0;
  min-height:100vh;
}

/* =========================
   LAYOUT WRAPPER
   ========================= */
.auth-container{
  display:flex;
  min-height:100vh;
  background:#ffffff;
}

/* =========================
   LEFT SIDE (INFO / CAROUSEL) + MEGA MENDUNG BG
   ========================= */
.info-section{
  flex:1;
  color:#fff;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;

  /* MEGA MENDUNG PATTERN */
  background-color:#1a5bb8;
  background-image:url("/build/images/megamendung.jpg");
  background-size:160px;
  background-repeat:repeat;
}

/* overlay biru biar motif MEGA MENDUNG tetap keliatan */
.info-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(26,91,184,.70);
  z-index:0;
}

/* container konten harus di atas overlay */
.carousel-container,
.carousel-content,
#infoCarousel,
.system-name{
  position:relative;
  z-index:1;
}

.carousel-container{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3rem;
}

.carousel-content{
  width:100%;
  max-width:800px;
}

/* logo kiri atas */
.system-name{
  position:absolute;
  top:20px;
  left:25px;
  z-index:2 !important;
  margin:0;
  padding:0;
  text-align:left !important;
}

/* logo image */
.system-logo{
  width:250px !important;
  height:auto;
  display:block;
  max-width:300px;
}

/* optional: kalau ada wrapper logo lain */
.carousel-logo{
  position:absolute;
  top:40px;
  left:70px;
  z-index:20;
}

.lock-logo-wrapper{
  position:absolute;
  top:40px;
  left:70px;
  z-index:20;
}

.lock-logo{
  width:260px !important;
  height:auto !important;
}

/* =========================
   CAROUSEL ITEM
   ========================= */
.carousel-item{
  height:400px;
  overflow:hidden;
  position:relative;
  border-radius:18px !important;
}

.carousel-image{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:10px;
}

.carousel-caption{
  background:rgba(0,0,0,.6);
  padding:1rem 1.4rem;
  border-radius:12px !important;
  bottom:20px;
}

/* indicators */
.carousel-indicators{
  bottom:-30px;
}

.carousel-indicators button{
  width:10px;
  height:10px;
  border-radius:50%;
  margin:0 5px;
}

/* =========================
   CAROUSEL ARROW (CENTER FIX + CUSTOM ARROW)
   ========================= */
.carousel-control-prev,
.carousel-control-next{
  width:40px;
  height:40px;
  background:transparent !important;
  border-radius:50%;
  top:50%;
  transform:translateY(-50%);
  opacity:1;
  position:absolute !important;

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

  padding:0 !important;
  margin:0 !important;
  line-height:1 !important;
  text-align:center !important;
}

.carousel-control-prev:hover,
.carousel-control-next:hover{
  background:rgba(255,255,255,.90) !important;
}

/* hide default bootstrap icons */
.carousel-control-prev-icon,
.carousel-control-next-icon{
  background-image:none !important;
}

/* thin arrow */
.carousel-control-prev::after,
.carousel-control-next::after{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:26px;
  font-weight:300;
  color:#fff;
  margin:0;
  padding:0;
  line-height:1;
}

.carousel-control-prev::after{ content:"‹"; }
.carousel-control-next::after{ content:"›"; }

.carousel-control-prev:hover::after,
.carousel-control-next:hover::after{
  color:#1a5bb8;
}

/* =========================
   RIGHT SIDE (LOGIN FORM)
   ========================= */
.login-section{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
  background:#fff;
}

.login-form-container{
  width:470px;
  padding:52px 45px;
}

.login-form-container .form-control{
  border-radius:12px !important;
}

.login-form-container .input-group-text{
  border-radius:0 9px 9px 0 !important;
}

/* logo/login header */
.login-logo{
  margin-top:-30px !important;
  text-align:center;
  margin-bottom:2rem;
}

.login-title{
  font-size:1.75rem;
  font-weight:600;
  margin-bottom:.5rem;
  color:#2c3e50;
}

.login-title-icon{
  width:220px !important;
  height:auto !important;
  margin-bottom:-10px;
}

.login-subtitle{
  color:#666;
  margin-top:1rem;
  margin-bottom:20px;
}

/* labels */
.form-label{
  font-weight:500;
  color:#333;
}

/* password toggle */
.input-group-text{
  cursor:pointer;
  background-color:#f8f9fa;
}

.password-toggle{
  cursor:pointer;
  color:var(--secondary-color);
}

/* button */
.btn-login{
  background-color:#1a5bb8 !important;
  border:none;
  padding:.75rem;
  font-weight:500;
  color:#fff;
}

.btn-login:hover{
  background-color:#1a5bb8 !important;
  opacity:.95;
}

/* error alert */
.alert-danger{
  background-color:rgba(220,53,69,.10);
  border-color:rgba(220,53,69,.30);
  color:#721c24;
}

/* gallery bawah */
.photo-gallery{
  display:flex;
  justify-content:center;
  gap:1rem;
  margin-top:2rem;
  flex-wrap:wrap;
}

.gallery-photo{
  width:80px;
  height:80px;
  object-fit:contain;
  border-radius:5px;
}

/* optional info box */
.kegiatan-info{
  background-color:#f8f9fa;
  padding:10px;
  border-radius:5px;
  margin-bottom:20px;
  border-left:4px solid #667eea;
}

/* helper: hilangin rounded kalau dipakai */
.no-radius,
.no-radius *{
  border-radius:0 !important;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:992px){
  .auth-container{ flex-direction:column; }
  .info-section{ min-height:50vh; }
  .carousel-item{ height:300px; }
  .login-section{ padding:2rem 1rem; }
}

@media (max-width:768px){
  .auth-container{ flex-direction:column; }
  .info-section{ display:none; }
  .login-section{ padding:1rem; }
  .login-form-container{ width:100%; padding:40px 24px; }
}

/* ===== FIX: LOGO DI ATAS CAROUSEL (RAPET, GA JAUH) ===== */
.info-logo{
  padding:40px 0 0 60px !important;   /* logo naik + sedikit ke kiri */
  position:relative;
  z-index:5;
}

/* matiin style lama (.system-name) kalo masih ada sisa */
.system-name{
  position:static !important;
  top:auto !important;
  left:auto !important;
  margin:0 !important;
  padding:0 !important;
  line-height:normal !important;
  font-size:inherit !important;
  text-align:left !important;
}

/* carousel naik (hilangin jarak kebawah) */
.carousel-container{
  padding-top:8px !important;         /* lebih rapet */
  padding-left:3rem !important;       /* tetep rapih */
  padding-right:3rem !important;
  padding-bottom:5rem !important;
}

/* tambahan: dorong sedikit naik biar pas banget */
.carousel-content{
  margin-top:-6px !important;
}

.login-section{
  align-items: flex-start !important;    
  padding-top: 30px !important;          
}

.login-form-container{
  margin-top: -100px !important;       
}

.login-logo{
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}
@media (max-width: 768px){
  .login-section{ padding-top: 16px !important; }
  .login-form-container{ margin-top: 0 !important; }
}

        .no-radius,
        .no-radius * {
            border-radius: 0 !important;
        }

        .info-section.baduy-bg {
            position: relative;
            margin-top: -60px !important;
        }

        .info-section,
        .carousel-container,
        .text-white.mt-5.pt-5 {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }

        .btn-row {
            display: flex;
            gap: 12px;
            margin-top: 25px;
        }

        .btn-row .btn-login,
        .btn-row .btn-soft-outline {
            flex: 1;
        }

        .btn-login {
            background-color: #1a5bb8;
            color: #fff !important;
            padding: 14px 18px;
            font-size: 16px;
            border-radius: 12px !important;
            font-weight: 600;
            border: none;
            transition: .2s;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none !important;
        }

        .btn-login:hover {
            opacity: .9;
            color: #fff !important;
            text-decoration: none !important;
        }

        .btn-soft-outline {
            background: transparent;
            border: 2px solid #1a5bb8;
            padding: 14px 18px;
            font-size: 16px;
            border-radius: 12px !important;
            color: #1a5bb8;
            font-weight: 600;
            transition: .2s;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none !important;
        }

        .btn-soft-outline:hover {
            background-color: #1a5bb8;
            color: #fff;
            text-decoration: none !important;
        }

        .error-icon {
            color: #e63946 !important;
        }

        .baduy-bg {
            background-image: url("/build/images/baduy.jpg");
            background-size: 180px;
            background-repeat: repeat;
            background-color: #1a5bb8;
            position: relative;
            color: white;
        }

        .baduy-bg::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: url("/build/images/baduy.jpg");
            background-size: 200px;
            background-repeat: repeat;
            opacity: 0.4;
            z-index: 0;
        }

        .baduy-bg * {
            position: relative;
            z-index: 1;
        }

        @media (max-width: 992px) {
            .auth-container {
                flex-direction: column;
            }

            .info-section {
                min-height: 50vh;
            }

            .carousel-item {
                height: 300px;
            }

            .login-section {
                padding: 2rem 1rem;
            }
        }

        @media (max-width: 768px) {
            .auth-container {
                flex-direction: column;
            }

            .info-section {
                display: none;
            }

            .login-section {
                padding: 1rem;
            }
        }

        .info-section.baduy-bg {
            margin-top: 0 !important;
            padding: 25px 15px !important;
        }

        .login-section {
            margin-top: 10px !important;
        }

        .info-section .text-white {
            margin-top: 40px !important;
        }

        .btn-row {
            flex-direction: column;
            gap: 10px;
            margin-top: 20px;
        }

        .btn-row button,
        .btn-row a {
            width: 100% !important;
            min-width: 100% !important;
            flex: unset !important;
        }

        .login-subtitle {
            font-size: 18px !important;
        }

        .text-center.mb-3 i {
            font-size: 55px !important;
        }

        .login-form-container p[style*="font-size:13px"] {
            margin-top: 20px !important;
        }