/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	:root{
	  --lebar-app: calc(100vw - 220px);
	  --wid-space: 0.05;
	}
	/*body{ background-color: #f7f7f9; }
	body > div.app { margin-top: 80px; }
	body > div.app { margin-bottom: 80px; }*/
	.app{
		/*position: relative;
		box-sizing: border-box;
		width: var(--lebar-app);
		max-width: var(--lebar-app);
		min-width: var(--lebar-app);
		overflow-x: hidden;*/
		margin: inherit;
		left: 200px;
	}

	.app:not(:has(nav)){
		margin: auto;
		left: 0;
	}

	header{
		/*width: calc(var(--lebar-app) - var(--lebar-app) * var(--wid-space));
		translate: calc(var(--lebar-app) * 0.5 * var(--wid-space)) 0;*/
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
	}
	header.header-tipe-2{
		justify-content: space-between;
	}
	header > a{ margin: inherit; }
	nav {
		font-size: 15px;
		left: 0;
		top: 0;
		bottom: 0;
		border-top-right-radius: 0;
		border-top-left-radius: 0;
		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;
		overflow-y: auto;
	}
	nav > div { width: 100% }
	nav > div > a {
		font-size: 15px;
		flex-direction: row;
		justify-content: flex-start;
	}
	nav summary {
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
	}
	nav summary > div {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 5px;
	}
	nav details > summary::after{ content: '\25BF'; }
	nav details[open] > summary::after{ content: '\25B5'; }
	nav details > a {
		text-decoration: none;
		display: block;
		padding: 5px 0 5px 25px;
		margin: 10px 0;
	}
	nav details > a:last-child { margin-bottom: -10px; }

	.blok-burger {display: none;}

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

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