:root{ 
  --warna-primer: #1bae70;
  --warna-sekunder: #f4f6f4;
  --warna-anti-primer: #06752E;
  --warna-anti-sekunder: #fff;

  --warna-hitam: ;
  --warna-putih: ;
  --warna-terang: ;
  --warna-gelap: ;

  --warna-merah: ;
  --warna-kuning: ;
  --warna-hijau: ;
  --warna-biru: ;

  --warna-judul-hitam: rgb(78, 86, 82);

  --warna-tombol-primer: rgb(255, 171, 94);
  --warna-tombol-primer-font: #efefef;

  --warna-font-primer: rgb(29, 28, 27);
  --warna-font-putih: #efefef;

  --warna-latar-putih: rgb(250, 250, 250);

  --sbar-leb: 200px;
  --lebar-app: 350px;
  --tinggi-footer: 60px;
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	:root{
	  --lebar-app: calc(100vw - 220px);
	  --wid-space: 0.05;
	}
}

div.global-wrapper{
	position: relative;
	min-height: 100vh;
	padding-bottom: var(--tinggi-footer);
}

body{background-color: rgb(235 250 235 / 1);}
h1{font-size: 36px; font-weight: bold; text-transform: capitalize;}
h2{font-size: 28px; font-weight: bold;}
h3{font-size: 24px; font-weight: bold;}
h4{font-size: 22px; font-weight: bold;}
h5{font-size: 18px; font-weight: bold;}
h6{font-size: 16px; font-weight: bold;}

header {
	background-color: var(--warna-primer);
	text-align: center;
	padding: 5px 0;
}

header h1{
	font-family: monospace;
	font-style: italic;
	color: rgb(0 0 100 / 1);
	margin: 10px 5px 5px;
}

nav {
	display: block;
	background-color: rgb(225 255 255 / 30%);
	margin: 15px 0 5px;
	padding: 3px 3px;
	min-height: 42px;
}
nav a {
	color: darkgreen;
	margin: 5px 10px;
}

nav a:hover:not(:has(span.tombol)){
	text-decoration-line: none;
	border-bottom: 5px double darkgreen;
}

body:has(aside) main{
	top: -130px;
}
body:not(:has(aside)) main:has(>section.fdiv){
	position: relative;
	top: -30px;
}
aside{
	position: relative;
	top: -30px;
	padding: 25px 20px;
}

main {
	padding: 0 0 0;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
}
main > section:has( > :first-child){
	padding: 25px 20px;
}
main > .fdiv{
	position: absolute;
	left: 0;
	right: 0;
	z-index: 0;
}
main > section:not(:first-child){
	position: relative;
	z-index: 1;
}

footer {
	display: flex;
	position: absolute;
	left: 0; right: 0;
	bottom: 0;
	background-color: var(--warna-primer);
	border-top: 2px solid var(--warna-anti-primer);
	height: var(--tinggi-footer);
	box-sizing: border-box;
	box-shadow: 0 -7px 10px -5px #888888;
	text-align: center;
	font-weight: bold;
	font-style: arial;
}
footer div {
	margin: auto;
}

.title-pg {
	font-weight: bold;
	color: rgb(10 10 10 / 1);
	text-align: center;
	background-color: #4ce155;
	padding-bottom: 40px;
}

.fdiv {
	background-image: linear-gradient(to bottom, rgb(220 245 100) 50%, rgb(235 250 235 / 1));
	box-shadow: 0 7px 10px -5px #888888 inset;
	height: 100px;
	border-top-right-radius: 25px;
	border-top-left-radius: 25px;
}

aside.fdiv{ height: 5px; overflow: hidden; }
aside.fdiv.extended{ height: unset; }

.ldiv{
	background-image: linear-gradient(to top, rgb(220 245 100) 50%, rgb(235 250 235 / 1));
	/*border-top-left-radius: 30px;*/
	height: 100px;
	margin-top: 15px;
}

.keteranganLain {
	background-color: lightyellow;
	border: 1px black solid;
	text-align: center;
	margin: 20px -10px 30px -10px;
	padding: 20px 0 25px;
	line-height: 25px;
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 992px) {
	aside{
		position: absolute;
		min-height: calc(100% - 350px);
		top: 120px;
		max-width: var(--sbar-leb);
	}
	body:has(aside) main{
		position: relative;
		margin-left: var(--sbar-leb);
		top: -30px;
	}
	aside.fdiv{ height: 100px; overflow: unset; }
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 1200px) { ... }

/*Extra large devices (large desktops, 1200px and up)*/


section.upd-harga{
	margin: 0;
	padding: 15px 30px;
	border-radius: 0;
	line-height: 25px;
}
section form > div{
	text-align: left;
}
section.upd-harga .inner-sect > div{
	text-align: right;
	margin-right: 10px;
}
section.upd-harga .inner-sect > div :where(input[type='number'], input[type='text'], select){
	width: 40%;
}
section.upd-harga > :first-child{
	padding-bottom: 5px;
	margin-bottom: 5px;
	border-bottom: 1px solid rgba(0, 0, 0, .3);
}
section.upd-harga form > :last-child{
	padding-top: 5px;
	margin-top: 5px;
	border-top: 1px solid rgba(0, 0, 0, .3);
}



.kontener-kartu-1{
	display: flex;
	gap: 10px;
}
.kartu-1{
	display: flex;
	flex-direction: column;
	border: 1px solid grey;
	border-radius: 10px;
	padding: 10px 8px;
}