/* ==========================
   style_prop_genLEOGA.css
   Modern Glass UI (Bootstrap 3 friendly)
   + Mobile Drawer (slide LEFT -> RIGHT)
   ========================== */

html,body{height:100%;}
body{
  margin:0;
  font-family: 'Inter',Arial, Helvetica, sans-serif;
  background:#0b1220;
  color:#eaf0ff;
  overflow-x:hidden;
}

/* Background glow blobs */
.bg-wrap{
  position:fixed;
  left:0;top:0;right:0;bottom:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.blob{
  position:absolute;
  width:520px;height:520px;
  border-radius:50%;
  filter: blur(40px);
  opacity: .45;
  animation: floaty 10s ease-in-out infinite;
}
.blob.b1{left:-140px;top:-120px;background:#39c5ff;}
.blob.b2{right:-180px;top:60px;background:#7dffb2;animation-duration:12s;opacity:.35;}
.blob.b3{left:20%;bottom:-220px;background:#ffb86b;animation-duration:14s;opacity:.30;}

@keyframes floaty{
  0%{transform:translate(0,0) scale(1);}
  50%{transform:translate(20px,25px) scale(1.05);}
  100%{transform:translate(0,0) scale(1);}
}

/* Main */
.app{
  position:relative;
  z-index:2;
  padding:24px 0 60px;
}

/* Topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
.brandline{
  display:flex;
  align-items:center;
  gap:12px;
}
.logoDot{
     width: 2em;
    height: 2em;
    border-radius: 1em;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  position:relative;
  overflow:hidden;
}
.logoDot:before{
  content:"";
  position:absolute;
  left:-10px;top:-10px;
  width:30px;height:30px;
  background:rgba(57,197,255,.55);
  border-radius:50%;
  filter:blur(4px);
}
.titleWrap h3{
  margin:0;
  font-size:18px;
  font-weight:bold;
  letter-spacing:.2px;
}
.titleWrap .mini{
  display:block;
  font-size:12px;
  color:rgba(234,240,255,.75);
  margin-top:2px;
}
.chip{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(234,240,255,.85);
  font-size:12px;
}

/* Glass cards */
.glass{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  border-radius:18px;
  overflow:hidden;
  position:relative;
  transition:transform .18s ease, box-shadow .18s ease;
  backdrop-filter: blur(10px);
}
.glass:before{
  content:"";
  position:absolute;
  left:-20%;top:-30%;
  width:60%;height:80%;
  background:rgba(255,255,255,.08);
  transform:rotate(20deg);
  filter:blur(1px);
  pointer-events:none;
}

.cardHead{
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.cardHead .mini{
  font-size:12px;
  color:rgba(234,240,255,.75);
}
.cardBody{
  padding:14px 16px 16px;
}

/* Form style */
label{
  font-size:12px;
  color:rgba(234,240,255,.80);
  font-weight:normal;
  margin-bottom:6px;
}
.form-control{
  background:rgba(10,18,32,.55);
  border:1px solid rgba(255,255,255,.14);
  color:#eaf0ff;
  border-radius:12px;
  box-shadow:none;
}
.form-control:focus{
  border-color:rgba(57,197,255,.65);
  box-shadow:0 0 0 3px rgba(57,197,255,.12);
}
textarea.form-control{resize:vertical;}
hr{border-top:1px solid rgba(255,255,255,.10);}

/* Buttons */
.btn{border-radius:12px;}
.btn-primary{
  background:#39c5ff;
  border-color:#39c5ff;
  color:#07101f;
  font-weight:bold;
}
.btn-primary:hover{
  background:#22baff;
  border-color:#22baff;
}
.btn-ghost{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  color:#eaf0ff;
}
.btn-ghost:hover{
  background:rgba(255,255,255,.14);
  color:#ffffff;
}

/* Preview iframe */
.preview{
  height:760px;
  width:100%;
  border:1px solid rgba(255,255,255,.16);
  background:#fff;
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}

/* Reveal animation on scroll */
.reveal{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.in{
  opacity:1;
  transform: translateY(0);
}

/* Helper */
#msg{
  margin-top:10px;
  font-size:12px;
  color:rgba(234,240,255,.85);
  word-break:break-word;
}
#msg a{color:#7dffb2;text-decoration:underline;}
.padTop{margin-top:16px;}
.note{
  font-size:12px;
  color:rgba(234,240,255,.70);
  margin-top:8px;
}

/* Responsive tweaks */
@media (max-width: 767){
  .preview{height:640px;}
}
@media (max-width: 767px){
  .topbar{flex-direction:row;align-items:center;}
  .preview{height:520px;}
}

/* ==========================
   Overlay (AMAN: default tidak nangkep klik)
   ========================== */
#drawerOverlay{
  position:fixed;
  left:0; top:0; right:0; bottom:0;
  z-index:9998;
  background:rgba(0,0,0,.45);

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease;
}
body.drawer-open #drawerOverlay{
  opacity:1;
 
  pointer-events:auto;
}

/* ==========================
   Mobile Drawer (Controls) - slide LEFT -> RIGHT
   ========================== */
@media (max-width: 767px){
  #drawer{
    position:fixed;
    top:0;
    left:-100%;
    width:100%;
  
    height:100%;
    z-index:9999;
    padding:12px;
    overflow:auto;
    transition:left .26s ease;
  }
  body.drawer-open #drawer{
    left:0;background: #373737;
  }

  body.drawer-open{
    overflow:hidden;
  }

  /* sticky header di dalam drawer */
  #drawer .cardHead{
    position:sticky;
    top:0;
    z-index:2;
    background:rgba(11,18,32,.35);
    backdrop-filter: blur(8px);
  }

  /* close button */
  .drawer-close{
    padding:6px 8px;
    line-height:1;
    border-radius:10px;
  }

  /* animasi tombol hamburger */
  #btnDrawer.btn-pop{
    animation: btnPop .22s ease;
  }
  @keyframes btnPop{
    0%{transform:scale(1) rotate(0deg);}
    50%{transform:scale(1.08) rotate(6deg);}
    100%{transform:scale(1) rotate(0deg);}
  }

  /* drawer closing easing (opsional) */
  body.drawer-closing #drawer{
    transition:left .18s ease-in;
  }
}



*{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.28) rgba(0,0,0,.12); }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:rgba(0,0,0,.12); }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.22); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.32); }

/* Footer */
.footerWrap{
  margin-top:16px;
 
}
.footerGlass{
background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
  
    padding: 12px 14px;
    display: block;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
   
}
.footerMini{
  display:block;
  font-size:12px;
  color:rgba(234,240,255,.72);
}
.footerRight{
  display:flex;
  align-items:center;
  gap:10px;
}
.footerDot{
  color:rgba(234,240,255,.35);
}
.footerLink{
  color:rgba(234,240,255,.85);
  text-decoration:none;
}
.footerLink:hover{
  color:#7dffb2;
  text-decoration:underline;
}

@media (max-width: 767px){
  .footerGlass{
    flex-direction:column;
    align-items:flex-start;
  }
  .footerRight{
    flex-wrap:wrap;
    gap:8px;
  }
}