/* Abana untuk Joomla 5 - tampilan responsif.
   Template aslinya berlebar tetap (998px); aturan di bawah hanya aktif di layar kecil. */

#menu-toggle { display: none; }

@media (max-width: 1020px) {
	body { min-width: 0 !important; }
	.wrapper { width: 100% !important; box-sizing: border-box; }
	.sheet-body, .sheet { max-width: 100%; }

	#header { height: auto !important; }
	#headerbar { float: none !important; text-align: left; padding: 8px 0; }
	#headerbar .module { max-width: 100%; float: none; }
	#headerbar img { max-width: 100%; height: auto; }
	.tag-line { margin-top: 8px !important; float: none !important; display: block; }

	#toolbar { padding-bottom: 6px; }
	#toolbar .float-left, #toolbar .float-right { float: none !important; }
	#search { margin-left: 0; }
	#search input { max-width: 100%; }

	/* menu menjadi tombol lipat */
	#menubar { position: relative; }
	#menu { float: none !important; width: 100%; }
	#menu-toggle {
		display: block; width: 100%; box-sizing: border-box; padding: 12px 16px; margin: 0;
		border: 0; background: rgba(0,0,0,.35); color: #fff; font: bold 16px/1.2 inherit; text-align: left; cursor: pointer;
	}
	#menu-toggle::before { content: "\2630  "; }
	#menu > ul.menu-dropdown { display: none; margin-bottom: 0; float: none !important; width: 100% !important; }
	.menu-dropdown > li.level1 > a, .menu-dropdown > li.level1 > span { float: none !important; width: 100% !important; box-sizing: border-box; }
	#headerbar img { max-height: 60px; width: auto; }
	#menu.is-open > ul.menu-dropdown { display: block; }
	.menu-dropdown > li.level1 { float: none !important; margin: 0 !important; padding-bottom: 0 !important; width: 100%; }
	.menu-dropdown > li.level1:before { display: none; }
	.menu-dropdown a.level1, .menu-dropdown span.level1 { display: block; width: auto !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.25) !important; }
	.menu-dropdown a.level1 > span, .menu-dropdown span.level1 > span { height: auto !important; line-height: 1.4 !important; padding: 10px 16px; display: block; }
	.menu-dropdown .dropdown {
		position: static !important; width: auto !important; display: none; margin: 0 !important; border: 0 !important;
	}
	.menu-dropdown li.level1.is-open > .dropdown { display: block !important; }
	.menu-dropdown .dropdown > div { height: auto !important; overflow: visible !important; margin: 0 !important; }
	.menu-dropdown .dropdown .column { width: 100% !important; float: none; }
	#call-us { padding: 10px; float: none; }

	#showcase, #banner { max-width: 100%; }
	#banner { position: static !important; }
	#sidebar-a, #sidebar-b, #maininner { position: static !important; width: 100% !important; float: none !important; }
	.grid-box { float: none !important; width: 100% !important; }
	#content { margin: 12px; }

	#footer, #copyright { padding: 0 10px; }
}

@media (max-width: 600px) {
	.module { margin: 10px; }
	#system table { display: block; overflow-x: auto; }
	#toolbar .float-left .module, #toolbar .float-left > time { float: none; display: block; margin: 4px 0; }
}