/**
 * Gemini (GEMI Nastiti ati-atI) Enterprise Resource Planning
 * Untuk Web Server
 * Oleh Aris S
 * Dibuat di Cilacap, Indonesia 2011.11.11
 */

:root {
  --tf:#6c4903;
  --od:#b0e0e6;
  --ev: #fae1b0;
  --t: black;
  --s:0 0 5px 0 #6c4903,0 0 5px 0 #b0e0e6 inset;
  --sf:0 0 7px 0 black,0 0 7px 0 #fae1b0 inset;
  --bg: radial-gradient(at 20% 10%,#f3b845,#b0e0e6,#f3b845,#b0e0e6);
  --ui: linear-gradient(to bottom right,#f3b845,white);
  --bf: linear-gradient(to right,#f3b845,#b0e0e6,white);
  --lf: linear-gradient(to top right,#f3b845,#b0e0e6);
}

[data-theme="t1"] {
  --ev: #423d26;
  --od: #595542;
  --t: #bbc4c2;
  --tf: #e8d67a;
  --s:0 0 5px 0 #bbc4c2,0 0 5px 0 #595542 inset;
  --sf:0 0 7px 0 #e8d67a,0 0 7px 0 #423d26 inset;
  --bg: radial-gradient(at 75% 5%,#140005,#595542,#423d26,#140005);
  --ui: linear-gradient(to top right,#140005,#595542);
  --bf: linear-gradient(to right,#595542,#140005);
  --lf: linear-gradient(to bottom left,#140005,#595542);
}

[data-theme="t2"] {
  --od: #66bb6a;
  --ev: #8bc34a;
  --tf: #595542;
  --t: #084008;
  --s:0 0 5px 0 #084008,0 0 5px 0 #8bc34a inset;
  --sf:0 0 7px 0 #66bb6a,0 0 7px 0 #595542 inset;
  --bg: radial-gradient(at 45% 15%,#66bb6a,#8bc34a,#c5e1a5);
  --ui: linear-gradient(to bottom right,#8bc34a,#c5e1a5);
  --bf: linear-gradient(to right,#8bc34a,#c5e1a5,#66bb6a);
  --lf: linear-gradient(to top right,#66bb6a,#c5e1a5);
}

[data-theme="t3"] {
  --ev: white;
  --tf: #f3b845;
  --od: #eceded;
  --t: black;
  --s:0 0 5px 0 black,0 0 5px 0 #eceded inset;
  --sf:0 0 7px 0 #f3b845,0 0 7px 0 white inset;
  --bg: linear-gradient(to bottom right,#eceded,white);
  --ui: linear-gradient(to bottom right,white,#eceded);
  --bf: linear-gradient(to right,#dfdddd,white);
  --lf: linear-gradient(to left,#dfdddd,white);
}

[data-theme="t4"] {
  --od: #fbcfe8;
  --ev: #fda4af;
  --tf: #fb7185;
  --t: #3a0f18;
  --s:0 0 5px 0 #3a0f18,0 0 5px 0 #fda4af inset;
  --sf:0 0 7px 0 #fb7185,0 0 7px 0 #fbcfe8 inset;
  --bg: linear-gradient(135deg,#fda4af,#fbcfe8,#ea7c8c,#fbcfe8);
  --ui: linear-gradient(to bottom right,#fda4af,#ffe4e6);
  --bf: linear-gradient(to right,#fb7185,#fda4af,#ffe4e6);
  --lf: linear-gradient(to top right,#fbcfe8,#fb7185,#fda4af,#ffe4e6);
}

*{font-size:1rem;line-height:1.4;margin:0px;padding:0px;box-sizing:border-box;font-family:Arial, sans-serif}
html,body{font-size:12px}
h4,h5,h6{font-size:1.1rem;line-height:1.2}
h3{font-size:1.2rem;line-height:1.3}
h2{font-size:1.3rem;line-height:1.4;margin:25px 0px 5px 0px}
h1{font-size:1.4rem;line-height:1.5;margin:25px 0px;text-align:center;border-right:4px solid var(--t)}
h1,h2{display:block;box-shadow:var(--s);border-radius:8px;border-left:4px solid var(--t);padding: 5px}
hr{height:2px;border:1px solid gray}

form{display:inline}
img{max-width:99%;height:auto}
::placeholder{opacity:0.5;font-weight:bolder;font-style:italic}
table{border-collapse:collapse;box-shadow:var(--s)}
table th{padding:5px;border:1px solid gray;text-align:center}
table td{padding:5px;border:1px solid gray;vertical-align:middle;text-align:left}
table tr:hover{cursor:pointer;box-shadow:var(--s)}
b,u,s,i,span,div{font-size:inherit}

a{cursor:pointer;display:inline-block;text-decoration:none;font-weight:bolder}
a:hover,a:focus{text-decoration:overline;}
.btn,.btn:visited,.btn:link,.btn:active,input[type=submit],input[type=reset],input[type=button],button{box-shadow:var(--s);border-radius:5px;border:0px;min-width: 76px;text-align:center;     cursor:pointer;padding:8px;margin:5px;display:inline-block;text-decoration:none;font-weight:bolder}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=password],input[type=file],input[type=color],select,textarea{border:1px solid gray;border-radius:4px;padding:3px;margin:5px 0px;width:100%}
input:focus,select:focus,input:hover,select:hover,textarea:hover,textarea:focus{box-shadow:var(--sf)}
input[type=submit]:hover,input[type=reset]:hover,input[type=button]:hover,input[type=submit]:focus,input[type=reset]:focus,input[type=button]:focus,.btn:focus,.btn:hover,button:focus,button:hover, .lst:hover,.lst:focus,.gac a:hover,.gac a:focus{box-shadow:var(--sf);text-shadow:none;text-decoration:none}

textarea{height:42px;transition:height 0.7s ease-in-out}
textarea:hover,textarea:focus{height:120px}

input[type=checkbox],input[type=radio]{margin-right:5px;cursor:pointer;transform:translateY(2px)}

.c{text-align:center;vertical-align:middle;align-items:center;align-content:center}
.l{text-align:left}
.r{text-align:right}
.fr{float:right}
.j,.lst,.tile,#gli,p{text-align:justify}
.error,.ok{box-shadow:var(--s);text-align:center;border-radius:4px;padding:5px}
.error{background-color:#f6f6a2;color:red}
.error,.ok,p,table{margin:5px 0px}

.box{display:block;min-width:320px;   box-shadow:var(--s);text-align:center;border-radius:10px;margin:5px;padding:5px}
.box h3{text-align:center;border-bottom:4px double gray}
.box2{text-align:left;vertical-align:top;padding:5px}
#gli{left:0;width:100%;min-height: 100vh;padding:40px 5px 5px 5px}

.lst{display:inline-block;padding:10px;margin:5px;text-decoration:none;box-shadow:var(--s);border-radius:10px;width:99%;overflow:hidden;font-weight:normal;position:relative}
.lst img{width:128px;height:128px;float:left;border:0px;margin-right:10px}
.lst h3{height:28px;overflow:hidden;line-height:1;text-align:left;font-style:italic}

.tile{display:block;margin:5px}
.tile img,#gl img{display:block;margin-left:auto;margin-right:auto;padding:5px;border:0px}
.icoB{width:320px;height:320px;border:0px;margin:5px}

.gac{text-align:left;padding:5px;box-shadow:var(--s);z-index:3}
.fc{width:fit-content;height:fit-content;position:fixed;display:none}
.gac a{border-bottom:1px solid gray;padding:4px 5px;margin:0px;display:block}
.gac a:last-child{border-bottom:0px solid gray}

.scrollx{overflow-x:scroll}
#a_kategori a{width:173px;text-align:left !important}
#cari{width:62px;margin:5px;transition:width 0.7s ease-in-out}
#cari:focus,#cari:hover{width:155px}
.foot{margin: 20px 5px 5px 5px;padding: 20px 5px;text-align:center;box-shadow:var(--s)}
#gnav{padding:0px 5px;position:fixed;width:100%;overflow-x:auto;white-space:nowrap;box-shadow:var(--s);min-height:34px;z-index:2}
#gnav a,.foot a,#gTag a,.cmd a{padding:3px}

[id^="menux-"] {display: none;}


/* slideshow carousel */
.ss-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow:var(--s);
  background: #111;
  opacity: 0; transition: opacity 3s ease;
  text-align: left;
}
.ss-carousel.ss-ready { opacity: 1; }

.ss-slide {
  position: absolute; inset: 0;
  background: center/cover no-repeat;
  opacity: 0; transition: opacity 1.5s;
}
.ss-slide.ss-active { opacity: 1; }

.ss-caption {
  position: absolute; left:0; right:0; bottom:0;
  padding:.6rem; font-weight:600; font-size:1rem;
  background: linear-gradient(to top,rgba(0,0,0,.6),transparent);
  opacity:0; transform:translateY(10px);
}
.ss-caption.ss-show { opacity:1; transform:translateY(0); transition:1.2s; }
.ss-caption.ss-hide { opacity:0; transform:translateY(10px); transition:1s; }

.ss-progress-bars {
  position:absolute; top:0px; left:50%; transform:translateX(-50%);
  display:flex; gap:4px; width:98%;
}
.ss-bar {flex:1; height:3px; background:rgba(243, 184, 69,0.4); border-radius:2px; cursor:pointer}
.ss-bar-fill {height:100%; width:0; background:#b0e0e6}

.ss-tap-zone {
  position:absolute; top:0; bottom:0; width:20px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.ss-tap-zone:hover { background:rgba(0,0,0,.25); }
.ss-tap-left{left:0;} .ss-tap-right{right:0;}

.ss-thumbnails {
  display:flex; gap:6px; overflow-x:auto;
  padding:0;
  width:640px; max-width:90vw;
  justify-content:center;
  margin-top:5px;
}
.ss-thumbnails.top { margin-bottom:5px; }

.ss-thumbnail {
  flex:0 0 auto;
  object-fit:cover;
  border:2px solid transparent;
  border-radius:3px;
  opacity:.6;
  cursor:pointer;
}
.ss-thumbnail:hover { opacity:1; }
.ss-thumbnail.ss-active { border-color:#00d4ff; opacity:1}

/*icon html*/
[class^="i-"]:before, [class*=" i-"]:before {display: inline-block;font-size: 21px;vertical-align: middle;color: white;opacity: .4;}
[class^="i-"]:hover:before,[class*=" i-"]:hover:before{color: #f3b845;opacity: 1;text-shadow: 0 0 7px white;
}
.i-left:before {content:"\25C0\FE0E"}/* ◀︎ */
.i-right:before {content:"\25B6\FE0E"}/* ▶︎ */
.i-up:before {content:"\25B2\FE0E"}/* ▲︎ */
.i-down:before {content: "\25BC\FE0E"}/* ▼︎ */
.i-refresh:before {content: "\21BB\FE0E"}/* ↻ */
.i-star:before {content: "\2605\FE0E"}/* ★ */
.i-star-empty:before {content: "\2606\FE0E"}/* ☆ */
.i-lock:before {content: "\1F512\FE0E"}/* 🔒 */
.i-pause:before {content: "\23F8\FE0E"}/* ⏸ */
.i-stop:before {content: "\25A0\FE0E"}/* ■ */
.i-home:before {content: "\2302\FE0E"}/* ⌂ */
.i-menu:before {content: "\2630\FE0E"}/* ☰ */
.i-search:before {content: "\2315\FE0E"}/* ⌕ */
.i-close:before {content: "\00D7\FE0E"}/* × */
.i-check:before {content: "\2713\FE0E"}/* ✓ */
.i-check-bold:before {content: "\2714\FE0E"}/* ✔ */
.i-cut:before   { content: "\2702\FE0E"; } /* ✂︎ */
.i-copy:before  { content: "\1F5D0\FE0E"; } /* 🗐︎ */
.i-paste:before { content: "\1F4CB\FE0E"; } /* 📋︎ */
.i-phone:before { content: "\260E\FE0E"; } /* ☎︎ */
.i-edit:before  { content: "\270E\FE0E"; } /* ✎︎ */
.i-cart:before  { content: "\1F6D2\FE0E"; } /* 🛒︎ */

@media (max-width:524px){#a_kategori a{width:46%}}

/* animasi */
@keyframes bgScrollX{0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}}
.ani{animation:zoom-hc 0.8s}
@keyframes zoom-hc{0%{transform:scaleX(0.2)}100%{transform:scaleX(1)}}
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/*pc*/
@media (min-width:717px){
textarea{width:300px;transition:width 0.7s,height 0.7s ease-in-out}
textarea:focus{width:500px;height:280px}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=password],input[type=file],input[type=color],select{width:300px}
.box{display:inline-block;vertical-align:top;margin:5px;padding:5px}
.box2{display:inline-block}
.scrollx{overflow-x:visible}
.scrolly{overflow-y:auto;max-height:301px;margin: 5px 0px}
.lst{width:315px;min-height:243px}
.lst div{position:absolute;bottom:10px}
.tile{display:inline-block;width:99%}
.tile img{float:left;margin-right:10px;padding:0px}
.cmd{width:425px}
.br1{border-right:2px solid gray}
.bl1{border-left:2px solid gray}
}

/*tema*/
body,a,::placeholder{color:var(--t)}
table th,table tr:hover,.box,.ok,#gnav,.foot,.gac,.lst,.btn,.btn:visited,.btn:link,.btn:active,input[type=submit],input[type=reset],input[type=button],button,h1{color:var(--t);background:var(--ui)}
input[type=submit]:focus,input[type=reset]:focus,input[type=button]:focus,button:focus,.btn:focus,input[type=submit]:hover,input[type=reset]:hover,input[type=button]:hover,button:hover,.btn:hover{color:var(--t);background:var(--bf);background-size:300% 100%;animation:bgScrollX 3s ease-in-out infinite}
.lst:focus,.lst:hover{color:var(--t);background:var(--lf)}
a:hover,a:focus{color:var(--tf)}
table tbody tr:nth-child(odd),  input,select,textarea,  .gac a:hover,.gac a:focus,  hr,.aktif{color:var(--t);background-color:var(--od)}
table tbody tr:nth-child(even),  input:focus,select:focus,input:hover,select:hover,textarea:hover,textarea:focus{background-color:var(--ev)}
#gli{background:var(--bg)}

#gnav{top:0px}

/*kustom*/
#ss{display:block;margin:10px auto;max-width:1300px;aspect-ratio: 1300 / 300;}
.konten{display:block;margin:0px auto;max-width:1300px}