body{
            background:#fafafa;
            color:#eee;
            font-family:"inter",Arial, sans-serif;
        }
		
		
		
		
		body{
  background:#07101a;
  position:relative;
  overflow-x:hidden;
}

/* glow kiri + kanan */
body:before{
  content:"";
  position:fixed;
  left:0; top:0; right:0; bottom:0;
  z-index:-2;
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(50,140,200,0.55), rgba(0,0,0,0) 60%),
    radial-gradient(900px 520px at 88% 28%, rgba(60,170,120,0.45), rgba(0,0,0,0) 60%),
    radial-gradient(1200px 800px at 50% 120%, rgba(0,0,0,0.55), rgba(0,0,0,0) 55%);
}
@keyframes bgMove{
  0%{filter:hue-rotate(0deg); transform:translate3d(0,0,0) scale(1);}
  50%{filter:hue-rotate(8deg); transform:translate3d(-10px,6px,0) scale(1.02);}
  100%{filter:hue-rotate(0deg); transform:translate3d(0,0,0) scale(1);}
}
body:before{animation:bgMove 16s ease-in-out infinite;}

/* grain/noise tipis biar modern (tanpa gambar) */
body:after{
  content:"";
  position:fixed;
  left:0; top:0; right:0; bottom:0;
  z-index:-1;
  opacity:0.08;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0, rgba(255,255,255,0.06) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 6px);
  pointer-events:none;
}
		
		
		
		
		
		
		
		
		
		
        .page-wrap{
            max-width:1040px;
            margin:20px auto;
        }
        h1.brand-title{
            font-size:32px;
            font-weight:bold;
            letter-spacing:1px;
            margin-top:0;
            background: linear-gradient(90deg, #425bb3, #fad0c4);
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
        }
        .card{
            background:rgb(88 74 131 / 81%);
            border-radius:12px;
            padding:15px;
            box-shadow:0 10px 30px rgba(0,0,0,0.6);
            margin-bottom:1px;
			 background-size: 220% 220%;
    animation: aiBgMove 18s ease-in-out infinite;
        }
        .card-header{
            font-weight:bold;
            margin-bottom:10px;
        }
        .btn-anim{
            transition:all 0.15s ease;
        }
        .btn-anim:hover{
            transform:translateY(-1px) scale(1.03);
            box-shadow:0 8px 16px rgba(0,0,0,0.5);
        }
        .btn-anim:active{
            transform:translateY(0) scale(0.97);
            box-shadow:none;
        }
        #liveCanvas{
            width:100%;
            max-width:480px;
            border-radius:10px;
            background:#000;
            display:block;
        }
        #videoPreview{
            display:none;
        }
        #canvasPreview{
            display:none;
        }
        #shotPreview{
            max-width:100%;
            border-radius:10px;
            margin-top:10px;
            border:3px solid rgba(255,255,255,0.1);
        }
        .token-badge{
            display:inline-block;
            padding:6px 10px;
            border-radius:999px;
            background:#111d3a;
            border:1px solid #3b4a7c;
            font-size:12px;
        }
        .filter-group label{
            font-size:11px;
        }
        .overlay-thumb{
            width:60px;
            height:60px;
            border-radius:8px;
            border:2px solid transparent;
            overflow:hidden;
            cursor:pointer;
            margin-right:6px;
        }
        .overlay-thumb img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .overlay-thumb.active{
            border-color:#ffcc66;
        }
        .small-note{
            font-size:11px;
          color: currentColor;
        }
        .cam-wrapper{
            position:relative;
            display:inline-block;
        }
        .cam-wrapper canvas{
            display:block;
        }
        #overlayLive{
            position:absolute;
            left:0;
            top:0;
            width:100%;
            height:100%;
            pointer-events:none;
        }
        .preset-btn-group .btn{
            margin-bottom:4px;
        }
        .effect-card-header{
            display:flex;
            justify-content:space-between;
            align-items:center;
            margin-bottom:6px;
        }
        .effect-list{
            display:flex;
            flex-wrap:wrap;
            margin:-4px;
        }
        .effect-item{
            width:23%;
            margin:4px;
            background:#111d3a;
            border-radius:10px;
            border:1px solid #222b48;
            text-align:center;
            font-size:11px;
            padding:8px 4px;
            cursor:pointer;
            overflow:hidden;
            min-height:54px;
        }
        .effect-item span{
            display:block;
            margin-top:2px;
            white-space:nowrap;
            text-overflow:ellipsis;
            overflow:hidden;
        }
        .effect-item.active{
            border-color:#ffcc66;
            box-shadow:0 0 0 1px rgba(255,204,102,0.3);
            background:#1b2342;
        }
        .effect-item.current{
            box-shadow:0 0 0 1px rgba(255,255,255,0.3);
        }
		
		.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    color: black;
}
/* 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);
  margin-bottom: 1em;
}
.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;
}

.intro-seq {
    opacity: 0;
    transform: translateY(22px) scale(0.97);
}

.intro-play {
    animation: dashIntro .55s ease-out forwards;
}





@keyframes dashIntro {
    0%   { opacity:0; transform:translateY(22px) scale(0.97); filter:blur(1px); }
    60%  { opacity:1; transform:translateY(0)    scale(1.00); filter:blur(0);   }
    100% { opacity:1; transform:translateY(0)    scale(1.00); }
}

/* kartu agak “float” dikit di hover */
.card-hover {
    transition: transform .22s ease, box-shadow .25s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(15,23,42,0.9);
}
@keyframes btnShine {
    0%   { left:-40%; opacity:0; }
    20%  { opacity:1; }
    100% { left:130%; opacity:0; }
}

/* background AI card pelan-pelan bergerak */
 
@keyframes aiBgMove {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 100% 60%; }
    100% { background-position: 0% 0%; }
}

.anim-base {
    opacity: 0;
    transform: translateY(12px);
}

.anim-fade-up {
    animation: animFadeUp 0.6s ease-out forwards;
}
.anim-zoom-in {
    animation: animZoomIn 0.55s ease-out forwards;
}
.anim-fade-right {
    animation: animFadeRight 0.55s ease-out forwards;
}

@keyframes animFadeUp {
    0%   { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0);    }
}
@keyframes animZoomIn {
    0%   { opacity: 0; transform: scale(0.96); }
    100% { opacity: 1; transform: scale(1);    }
}
@keyframes animFadeRight {
    0%   { opacity: 0; transform: translateX(-16px); }
    100% { opacity: 1; transform: translateX(0);     }
}






























/* ===== Mobile Drawer (FotoBooth) ===== */
/* ===========================
   LEOGA Foto Booth UI
   Desktop = panel normal
   Mobile  = drawer slide
   Bootstrap 3 friendly
=========================== */

html, body{height:100%;}
body{
background: #1a1c1b;
  font-family:"Inter", Arial, sans-serif;
  color:#0b1220;
}

.page-wrap{
  max-width:1040px;
  margin:20px auto;
  padding:0 12px;
}

/* title */
h1.brand-title{
  font-size:32px;
  font-weight:bold;
  letter-spacing:1px;
  margin:0;
  background: linear-gradient(90deg, #425bb3, #fad0c4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* cards */
.card{
  /* background:rgba(88,74,131,0.86); */
  color:#eef2ff;
  border-radius:12px;
  padding:15px;
  box-shadow:0 10px 30px rgba(0,0,0,0.22);
  margin-bottom:1px;
  background-size:220% 220%;
  animation: aiBgMove 18s ease-in-out infinite;
}
.card-header{font-weight:bold;margin-bottom:10px;}
.small-note{font-size:11px;color: currentColor;}

.btn-anim{transition:all 0.15s ease;}
.btn-anim:hover{
  transform:translateY(-1px) scale(1.02);
  box-shadow:0 8px 16px rgba(0,0,0,0.25);
}
.btn-anim:active{transform:translateY(0) scale(0.98);box-shadow:none;}

.token-badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:#111d3a;
  border:1px solid #3b4a7c;
  font-size:12px;
}

/* camera */
#liveCanvas{
  width:100%;
  max-width:480px;
  border-radius:10px;
  background:#000;
  display:block;
}
#videoPreview{display:none;}
#canvasPreview{display:none;}
#shotPreview{
  max-width:100%;
  border-radius:10px;
  margin-top:10px;
  border:3px solid rgba(255,255,255,0.10);
}
.cam-wrapper{position:relative;display:inline-block;}
.cam-wrapper canvas{display:block;}
#overlayLive{
  position:absolute;left:0;top:0;width:100%;height:100%;
  pointer-events:none;
}

/* overlay thumbs */
.overlay-thumb{
  width:60px;height:60px;border-radius:8px;
  border:2px solid transparent;
  overflow:hidden;cursor:pointer;margin-right:6px;
  background:rgba(0,0,0,0.15);
}
.overlay-thumb img{width:100%;height:100%;object-fit:cover;}
.overlay-thumb.active{border-color:#ffcc66;}

/* effects */
.effect-card-header{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;
}
.effect-list{display:flex;flex-wrap:wrap;margin:-4px;}
.effect-item{
  width:30%;
  margin:4px;
  background:#111d3a;
  border-radius:10px;
  border:1px solid #222b48;
  text-align:center;
  font-size:11px;
  padding:8px 4px;
  cursor:pointer;
  overflow:hidden;
  min-height:54px;
}
.effect-item span{
  display:block;margin-top:2px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
}
.effect-item.active{
  border-color:#ffcc66;
  box-shadow:0 0 0 1px rgba(255,204,102,0.25);
  background:#1b2342;
}
.effect-item.current{box-shadow:0 0 0 1px rgba(255,255,255,0.25);}

/* modal header color */
.modal-header{color:#0b1220;}

/* intro / anim */
.intro-seq{opacity:0;transform:translateY(22px) scale(0.97);}
.intro-play{animation: dashIntro .55s ease-out forwards;}
@keyframes dashIntro{
  0%{opacity:0;transform:translateY(22px) scale(0.97);filter:blur(1px);}
  60%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes aiBgMove{
  0%{background-position:0% 0%;}
  50%{background-position:100% 60%;}
  100%{background-position:0% 0%;}
}

/* ===========================
   MODERN SCROLLBAR (simple)
=========================== */
.drawer-body{
  scrollbar-width:thin;
  scrollbar-color: rgba(0,0,0,0.45) rgba(255,255,255,0.12);
}
.drawer-body::-webkit-scrollbar{width:10px;height:10px;}
.drawer-body::-webkit-scrollbar-track{
  background:rgba(255,255,255,0.10);
  border-radius:999px;
}
.drawer-body::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.35);
  border-radius:999px;
  border:2px solid rgba(255,255,255,0.10);
}
.drawer-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.55);}

/* ===========================
   DRAWER SYSTEM
   Desktop default: STATIC (panel muncul)
=========================== */
#mobileNavBtn{display:none;}

#drawerOverlay{display:none;}

#drawerPanel{
  position:static;
  width:auto;
  height:auto;
  transform:none;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  padding:0;
  overflow:visible;
}
#drawerPanel .drawer-head{display:none;}
#drawerPanel .drawer-body{
  padding:0;
  overflow:visible;
  max-height:none;
}

/* ===========================
   MOBILE: off-canvas drawer
=========================== */
@media (min-width: 991px){
 #drawerClose{display:none}
}

@media (max-width: 991px){

  #mobileNavBtn{
    display:block;
    position:fixed;
    right:14px;
    top:12px;
    width:44px;
    height:44px;
    line-height:44px;
    text-align:center;
    z-index:13050;
    border-radius:12px;
    background:rgba(20,24,35,0.65);
    border:1px solid rgba(255,255,255,0.20);
    color:#fff;
    text-decoration:none;
  }

  #drawerOverlay{
    display:block;
    position:fixed;
    left:0;top:0;right:0;bottom:0;
    background:rgba(0,0,0,0.55);
    opacity:0;
    visibility:hidden;
    z-index:13010;
    transition:all .22s ease;
  }
  #drawerOverlay.open{
    opacity:1;
    visibility:visible;
  }

  #drawerPanel{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:330px;
    max-width:88%;
    padding:12px;
    border-radius:0 14px 14px 0;
  /*  background:rgba(18,20,30,0.92);  */
    box-shadow:0 18px 60px rgba(0,0,0,0.55);
    transform:translateX(-105%);
    transition:transform .25s ease;
    z-index:13020;
  overflow-x: scroll;
  }
  #drawerPanel.open{
    transform:translateX(0);
  }

  #drawerPanel .drawer-head{
    display:block;
    padding:8px 10px;
    margin-bottom:10px;
    border-radius:12px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.10);
    color:#fff;
    font-weight:bold;
    position:relative;
  }

  #drawerClose{
    position:absolute;
    right:8px;
    top:6px;
    width:34px;
    height:34px;
    line-height:30px;
    text-align:center;
    border-radius:10px;
    background:rgba(0,0,0,0.25);
    border:1px solid rgba(255,255,255,0.18);
    color:#fff;
    z-index:13030;
    cursor:pointer;
  }

  #drawerPanel .drawer-body{
    padding:0;
    height:calc(100vh - 78px);
    overflow:auto;
  }

  body.drawer-open{
    overflow:hidden;
  }
  #drawerClose{display:yes}
}
  

*{ 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;
  }
}

 
 
 .jarak{padding: 0.5em;}