/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	:root{
	  --lebar-app: 100vw;
	  --wid-space: 0.05;
	}
	body > div.app{ 
		/*margin: auto; left: 0;*/
		width: calc(var(--lebar-app)-20px);
		max-width: calc(var(--lebar-app)-20px);
		min-width: calc(var(--lebar-app)-20px);
	}
	body > div.app:has(nav.tipe2){
		width: calc(var(--lebar-app) - 220px);
		max-width: calc(var(--lebar-app) - 220px);
		min-width: calc(var(--lebar-app) - 220px);
		margin-left: 0;
		left: 200px;
	}

	header.tipe1{
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	header.tipe1 nav.tipe1{
		flex-direction: row;
		position: initial;
		background-color: transparent;
		text-align: center;
	}
	header.tipe1 nav.tipe1 > a,
	header.tipe1 nav.tipe1 .navInduk{
		border-bottom: none;
	}
	nav.tipe1 .tampilkanSubNav{
		position: absolute;
	}
    nav.tipe1 .subNavList{
	    flex-direction: column;
		padding: 3px 10px 3px 15px;
		background-color: whitesmoke;
		margin-top: 5px;
    }
	nav.tipe1 .subNavList a::before{ content: none }
	nav.tipe1 .subNavList a{border-bottom: 1px black solid;}
	nav.tipe1 .subNavList a:last-child{border-bottom: none;}

	header.tipe2{
		justify-content: space-between;
	}
	header.tipe2 > a{ margin: inherit; }
	div.blok-burger{ display: none; }
	#nav_element_yang_dimunculkan { display: block; }
	nav.tipe2 {
		position: fixed;
		font-size: 15px;
		left: 0;
		top: 0;
		bottom: 0;
		/*border-top-right-radius: 0;
		border-top-left-radius: 0;*/
		/*overflow-y: auto;*/
		width: 200px;
		translate: inherit;
		height: inherit;
		box-shadow: rgba(108,114,124,.16) 5px 0 4px 0;
		flex-direction: column;
		justify-content: start;
		padding: 80px 15px 20px;
		gap: 25px;
		max-height: inherit;
	}
	nav.tipe2 > div { width: 100%; border-bottom: none; padding:0 }
	nav.tipe2 > div > a {
		font-size: 15px;
		flex-direction: row;
		justify-content: flex-start;
	}
	nav.tipe2 summary {
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
	}
	nav.tipe2 summary > div {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 5px;
	}
	nav.tipe2 details > summary::after{ content: '\25BF'; }
	nav.tipe2 details[open] > summary::after{ content: '\25B5'; }
	nav.tipe2 details > a {
		text-decoration: none;
		display: block;
		padding: 5px 0 5px 25px;
		margin: 10px 0;
	}
	nav.tipe2 details > a:last-child { margin-bottom: -10px; }

	body > div.app:has(nav.tipe2) footer.tipe2{
		width: calc(var(--lebar-app) - 200px);
	}

	.hdodesk{ display: none; }
	.hdophon { display: block; }
}

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