/* ===============================
   GLOBAL
================================ */
body, html{
  font-family:'Poppins', sans-serif;
  font-size:13px;
  height:100%;
  overflow-x:hidden;
  scroll-behavior:smooth;
  position:relative;
}

/* ===============================
   CARD LOGIN
================================ */
.card-login{
  border-radius:15px;
  box-shadow:0 0 5px 5px rgba(26,26,26,0.2);
}

.card-login .form-control{
  background:#F7F8F9;
  padding-left:30px;
}

.card-login .form-group{position:relative}

.card-login .fa{
  position:absolute;
  font-size:14px;
  color:#999;
  top:8px;
  left:8px;
}

.card-login .btn{
  border-radius:50px;
  background:linear-gradient(90deg, #6c04f0 0%, #8c44f4 100%);
  border:0;
}


/* ===============================
   HEADER
================================ */
.home-header{
  background:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.1);
  position:sticky;
  top:0;
  z-index:99;
}

.home-header-text h5{
  color:#005BEA;
  font-weight:700;
  font-size:18px;
}

.home-header-text h6{color:rgba(0,0,0,.5)}

.home-header nav{background:#fff}

.home-header nav .navbar-brand{
  display:flex;
  align-items:center;
}

.home-header nav .navbar-brand img{
  padding-right:15px;
}

.home-header nav .nav-item{
  padding:10px;
  border-radius:25px;
  transition:.3s;
}

.home-header nav .nav-item.active{
  background:#005BEA;
  padding:5px 15px;
  margin:5px;
  box-shadow:0 0 10px rgba(0,91,234,.15);
}

.home-header nav .nav-item.active .nav-link{
  color:#fff;
  font-weight:bold;
}

/* ===============================
   HOME BANNER (BIRU MELENGKUNG)
================================ */
.home-banner{
  position:relative;
  overflow:hidden;
}

.home-banner-bg{
  position:absolute;
  top:-220px;
  left:-60px;
  right:-60px;
  bottom:-120px;
  transform:rotate(-4deg);
  border-radius:260px;
  z-index:-1;
}

/* WARNA BIRU MODERN */
.home-banner-bg-color{
  background:linear-gradient(135deg,
    #0f4c81 0%,
    #1373b5 45%,
    #1fa2d8 100%
  );
}

/* MOTIF BATIK / BUNGA ABSTRAK 
.home-banner-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.12) 2px, transparent 3px),
    radial-gradient(circle at 80% 40%, rgba(255,255,255,.10) 2px, transparent 3px),
    radial-gradient(circle at 50% 70%, rgba(255,255,255,.08) 2px, transparent 3px);
  background-size:60px 60px;
  opacity:.35;
  pointer-events:none;
}
*/


/* Opsi Batik kedua 
.home-banner-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 25% 25%,
      rgba(255,255,255,.18) 0 6px,
      transparent 7px),
    radial-gradient(circle at 75% 25%,
      rgba(255,255,255,.12) 0 6px,
      transparent 7px),
    radial-gradient(circle at 25% 75%,
      rgba(255,255,255,.12) 0 6px,
      transparent 7px),
    radial-gradient(circle at 75% 75%,
      rgba(255,255,255,.18) 0 6px,
      transparent 7px);
  background-size:90px 90px;
  opacity:.25;
  pointer-events:none;
}
*/


.home-banner-bg::after{
  content:"";
  position:absolute;
  inset:0;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none'%3E%3Cpolygon points='90,10 115,45 170,90 115,135 90,170 65,135 10,90 65,45' stroke='rgba(255,255,255,0.18)' stroke-width='1.6'/%3E%3Cpolygon points='90,40 110,70 140,90 110,110 90,140 70,110 40,90 70,70' stroke='rgba(255,215,140,0.35)' stroke-width='1.2'/%3E%3Cpath d='M10 90 H170' stroke='rgba(255,255,255,0.14)' stroke-width='1'/%3E%3Cpath d='M90 10 V170' stroke='rgba(255,255,255,0.14)' stroke-width='1'/%3E%3Cpath d='M25 25 L155 155' stroke='rgba(255,215,140,0.22)' stroke-width='0.8'/%3E%3Cpath d='M155 25 L25 155' stroke='rgba(255,215,140,0.22)' stroke-width='0.8'/%3E%3C/g%3E%3C/svg%3E");

  background-size:180px 180px;
  opacity:.16;
  pointer-events:none;
}








/* EFEK CAHAYA LEMBUT */
.home-banner-bg::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:radial-gradient(circle at top right,
    rgba(255,255,255,.25),
    transparent 60%);
}

/* ===============================
   BANNER CONTENT
================================ */
.home-banner .carousel-inner{
  min-height:350px;
  display:flex;
  align-items:center;
}

.home-banner .carousel-item{
  color:#fff;
  padding:25px 0;
}

.home-banner .carousel-item ul{
  list-style:none;
  padding:0;
  margin:20px 0;
}

.home-banner .carousel-item ul li{
  position:relative;
  font-size:16px;
  padding:8px 45px;
}

/* ===============================
   HOME CONTENT
================================ */
.home-content{padding-top:150px}

.home-content .card,
.home-content img{
  transition:.3s;
}

.home-content .card:hover,
.home-content img:hover{
  transform:scale(1.05);
}

.home-content-wrapper .card-login{
  position:sticky;
  top:110px;
  border-radius:10px;
  box-shadow:1px 1px 2px rgba(26,26,26,.05);
}

/* ===============================
   FOOTER
================================ */
.home-footer{
  background:linear-gradient(135deg,
    #0f4c81,
    #1fa2d8);
  padding:20px;
  color:#fff;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width:600px){
  .navbar-brand img{height:40px}
  .home-content{padding-top:100px}
}