/* Abana untuk Joomla 5 - penyesuaian markup komponen Joomla 4/5 agar serasi dengan gaya Abana.
   Template lama memakai markup Joomla 2.5; Joomla 5 memakai kelas Bootstrap 5, jadi diberi gaya dasar di sini. */

#system { color: inherit; }
#system img { max-width: 100%; height: auto; }

/* judul halaman & artikel */
#system .page-header h1,
#system .page-header h2,
#system h1.page-title,
#system .com-content-article__body > h2 { margin-top: 0; }
#system .page-header { margin-bottom: 15px; }
#system .article-info,
#system .article-info-term { font-size: 12px; opacity: .8; }
#system .article-info dd { display: inline-block; margin: 0 12px 0 0; }

/* daftar blog */
#system .blog-items .blog-item,
#system .blog-item,
#system .items-leading > div { margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px dotted #bbb; }
#system .item-image img,
#system figure.item-image img { margin-bottom: 10px; }
#system .readmore a,
#system a.btn,
#system .btn,
#system button.btn,
#system input[type=submit] {
	display: inline-block; padding: 6px 14px; border: 1px solid #541515; border-radius: 3px;
	background: #730606; color: #fff; text-decoration: none; cursor: pointer; font: inherit; line-height: 1.4;
}
#system .btn:hover, #system .readmore a:hover { filter: brightness(1.15); color: #fff; }
#system .btn-secondary { background: #888; border-color: #666; }

/* tabel */
#system table, #system .table { width: 100%; border-collapse: collapse; margin-bottom: 15px; }
#system .table th, #system .table td, #system table th, #system table td { padding: 6px 8px; border-bottom: 1px solid #ddd; text-align: left; vertical-align: top; }
#system .table-striped > tbody > tr:nth-child(odd) { background: rgba(0,0,0,.04); }

/* formulir */
#system .form-control,
#system input[type=text], #system input[type=email], #system input[type=password],
#system input[type=search], #system input[type=tel], #system input[type=url],
#system select, #system textarea {
	max-width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #c9c9c9; border-radius: 3px; font: inherit;
}
#system textarea { width: 100%; }
#system .control-group { margin-bottom: 12px; }
#system .control-label label, #system label { font-weight: bold; }
#system fieldset { border: 1px solid #ddd; padding: 12px; margin-bottom: 15px; }
#system legend { padding: 0 6px; font-weight: bold; }
#system .star, #system .required { color: #b00; }

/* paginasi */
#system .pagination { margin: 20px 0; }
#system .pagination ul, #system ul.pagination { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
#system .pagination li { margin: 0; }
#system .pagination a, #system .pagination span.page-link, #system .pagination .page-link {
	display: block; padding: 4px 10px; border: 1px solid #ccc; border-radius: 3px; text-decoration: none; background: rgba(255,255,255,.6);
}
#system .pagination .active .page-link, #system .pagination .active span { background: #730606; color: #fff; border-color: #541515; }
#system .pagination .disabled .page-link { opacity: .5; }

/* tag, kategori, subkategori */
#system .tags { list-style: none; padding: 0; margin: 0 0 12px; }
#system .tags li { display: inline-block; margin-right: 6px; }
#system .tags .badge, #system .badge { background: #730606; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
#system .category-desc { margin-bottom: 15px; }
#system .filters { margin-bottom: 12px; }

/* pesan sistem */
#system .alert, #system joomla-alert { margin-bottom: 15px; }
#system .alert { padding: 10px 14px; border: 1px solid #ddd; border-radius: 3px; background: #fffbe5; color: #333; }
#system .alert-danger, #system .alert-error { background: #fdeaea; border-color: #e6a7a7; }
#system .alert-success { background: #eaf7ea; border-color: #a7d6a7; }

/* utilitas Bootstrap yang sering muncul di tampilan inti */
.visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.d-none { display: none !important; }
.float-end { float: right; }
.float-start { float: left; }
.text-center { text-align: center; }
.list-unstyled { list-style: none; padding-left: 0; }
.icon-spacer { display: none; }

/* Cegah blok showcase/slider terdorong ke samping oleh logo di #headerbar yang lebih tinggi dari header (83px). */
#showcase, #slide-zone, #g-map, #breadcrumbs { clear: both; }

/* menu utama: item lebih lebar (ubah angka padding kiri/kanan untuk menyesuaikan) */
.menu-dropdown a.level1 > span,
.menu-dropdown span.level1 > span { padding-left: 24px; padding-right: 34px; }
@media (max-width:1020px){
	.menu-dropdown a.level1 > span,.menu-dropdown span.level1 > span{padding-left:7px;padding-right:23px}
}

/* ===== Dropdown menu utama: kartu putih membulat, item merah saat disorot, submenu melayang ke kanan ===== */
#menu .menu-dropdown .dropdown,
#menu .menu-dropdown .dropdown > div,
#menu .menu-dropdown .dropdown-bg,
#menu .menu-dropdown .dropdown-bg > div { overflow: visible !important; }
#menu .menu-dropdown .dropdown-bg > div {
	margin-top: 6px; padding: 0; border: 0 none; border-radius: 12px; background: #fff;
	box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
#menu .menu-dropdown li.level2 {
	position: relative; margin: 0; padding: 0; border: 0 none; border-top: 1px solid #ececec; background: #fff;
}
#menu .menu-dropdown li.level2:first-child { border-top: 0; }
#menu .menu-dropdown li.level2 > a.level2,
#menu .menu-dropdown li.level3 > a.level3 {
	display: block; position: relative; padding: 0; height: auto; border: 0; background: transparent;
	color: #333; text-shadow: none; box-shadow: none !important; font-size: 14px; line-height: 20px;
	transition: background .2s, color .2s;
}
#menu .menu-dropdown li.level2 > a.level2 > span,
#menu .menu-dropdown li.level3 > a.level3 > span { display: block; height: auto; padding: 14px 40px 14px 20px; line-height: 20px; }
#menu .menu-dropdown li.level2:first-child > a.level2 { border-radius: 12px 12px 0 0; }
#menu .menu-dropdown li.level2:last-child > a.level2 { border-radius: 0 0 12px 12px; }
#menu .menu-dropdown li.level2:only-child > a.level2 { border-radius: 12px; }

/* sorot / aktif */
#menu .menu-dropdown li.level2:hover > a.level2,
#menu .menu-dropdown li.level2.remain > a.level2,
#menu .menu-dropdown a.level2:hover,
#menu .menu-dropdown a.current.level2,
#menu .menu-dropdown li.level3 > a.level3:hover,
#menu .menu-dropdown a.current.level3 {
	background: linear-gradient(90deg,#a82a1c,#c0392b); color: #fff; font-weight: 600;
}

/* tanda panah untuk item bercabang */
#menu .menu-dropdown li.level2.parent > a.level2::after {
	content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
	border-top: 2px solid #b9b9b9; border-right: 2px solid #b9b9b9; transform: rotate(45deg);
}
#menu .menu-dropdown li.level2.parent:hover > a.level2::after { border-color: #fff; }

/* submenu (level 3) melayang di sisi kanan */
#menu .menu-dropdown li.level2 > ul.level3 {
	display: none; position: absolute; left: 100%; top: -1px; width: 240px; margin: 0; padding: 0; list-style: none;
	border-left: 8px solid transparent; background: #fff; background-clip: padding-box; border-radius: 12px;
	filter: drop-shadow(0 8px 14px rgba(0,0,0,.22)); z-index: 5;
}
#menu .menu-dropdown li.level2:hover > ul.level3 { display: block; }
#menu .menu-dropdown li.level3 { margin: 0; padding: 0; border: 0; border-top: 1px solid #ececec; background: none; font-size: 14px; line-height: 20px; }
#menu .menu-dropdown li.level3:first-child { border-top: 0; }
#menu .menu-dropdown li.level3:first-child > a.level3 { border-radius: 12px 12px 0 0; }
#menu .menu-dropdown li.level3:last-child > a.level3 { border-radius: 0 0 12px 12px; }
#menu .menu-dropdown li.level3:only-child > a.level3 { border-radius: 12px; }
#menu .menu-dropdown li.level2 span.subtitle, #menu .menu-dropdown li.level3 span.subtitle { display: none; }

@media (max-width:1020px){
	#menu .menu-dropdown li.level2 > ul.level3 { position: static; width: auto; border-left: 0; filter: none; display: block; background: #f6f6f6; border-radius: 0; }
}
#menu .menu-dropdown .dropdown-bg ul.level2 { min-height: 0 !important; margin: 0; padding: 0; list-style: none; }
#menu .menu-dropdown .dropdown-bg > div > .column { padding: 0; margin: 0; }
#menu .menu-dropdown li.level2:first-child { border-radius: 12px 12px 0 0; }
#menu .menu-dropdown li.level2:last-child { border-radius: 0 0 12px 12px; }
#menu .menu-dropdown li.level2:only-child { border-radius: 12px; }
#menu .menu-dropdown li.level3:first-child { border-radius: 12px 12px 0 0; }
#menu .menu-dropdown li.level3:last-child { border-radius: 0 0 12px 12px; }
#menu .menu-dropdown li.level3:only-child { border-radius: 12px; }

/* item dropdown bertipe heading/separator (span) tampil sama seperti item tautan */
#menu .menu-dropdown li.level2 > span.level2 { display: block; position: relative; padding: 0; border: 0; background: transparent; color: #333; text-shadow: none; font-size: 14px; line-height: 20px; cursor: default; transition: background .2s, color .2s; }
#menu .menu-dropdown li.level2 > span.level2 > span { display: block; height: auto; margin: 0; padding: 14px 40px 14px 20px; border: 0; background: transparent; color: inherit; text-transform: none; line-height: 20px; }
#menu .menu-dropdown li.level2:first-child > span.level2 { border-radius: 12px 12px 0 0; }
#menu .menu-dropdown li.level2:last-child > span.level2 { border-radius: 0 0 12px 12px; }
#menu .menu-dropdown li.level2:hover > span.level2,
#menu .menu-dropdown li.level2.remain > span.level2 { background: linear-gradient(90deg,#a82a1c,#c0392b); color: #fff; font-weight: 600; }
#menu .menu-dropdown li.level2.parent > span.level2::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-top: 2px solid #b9b9b9; border-right: 2px solid #b9b9b9; transform: rotate(45deg); }
#menu .menu-dropdown li.level2.parent:hover > span.level2::after { border-color: #fff; }
#menu .menu-dropdown li.level3 > span.level3 { display: block; padding: 14px 20px; color: #333; text-shadow: none; font-size: 14px; }

/* teks menu utama tetap putih saat item aktif/disorot */
#menu .menu-dropdown li.level1.active > a.level1,
#menu .menu-dropdown li.level1.current > a.level1,
#menu .menu-dropdown li.level1:hover > a.level1,
#menu .menu-dropdown li.level1.remain > a.level1 { color: #fff; }

/* ===== Submenu bertingkat lebih dalam (level 4 ke atas): melayang ke kanan seperti level 3 ===== */
#menu .menu-dropdown li.level3 { position: relative; }
#menu .menu-dropdown li.level3 > a.level3, #menu .menu-dropdown li.level3 > span.level3 { display: block; position: relative; padding: 0; border: 0; background: transparent; color: #333; text-shadow: none; box-shadow: none !important; font-size: 14px; line-height: 20px; transition: background .2s, color .2s; }
#menu .menu-dropdown li.level3 > a.level3 > span, #menu .menu-dropdown li.level3 > span.level3 > span { display: block; height: auto; padding: 14px 40px 14px 20px; margin: 0; border: 0; background: transparent; color: inherit; text-transform: none; line-height: 20px; }
#menu .menu-dropdown li.level3:hover > a.level3, #menu .menu-dropdown li.level3:hover > span.level3, #menu .menu-dropdown a.current.level3 { background: linear-gradient(90deg,#a82a1c,#c0392b); color: #fff; font-weight: 600; }
#menu .menu-dropdown li.level3.parent > a.level3::after, #menu .menu-dropdown li.level3.parent > span.level3::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-top: 2px solid #b9b9b9; border-right: 2px solid #b9b9b9; transform: rotate(45deg); }
#menu .menu-dropdown li.level3.parent:hover > a.level3::after, #menu .menu-dropdown li.level3.parent:hover > span.level3::after { border-color: #fff; }
#menu .menu-dropdown li.level3 > ul.level4 { display: none; position: absolute; left: 100%; top: -1px; width: 240px; margin: 0; padding: 0; list-style: none; border-left: 8px solid transparent; background: #fff; background-clip: padding-box; border-radius: 12px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.22)); z-index: 8; }
#menu .menu-dropdown li.level3:hover > ul.level4 { display: block; }
#menu .menu-dropdown li.level4 { position: relative; margin: 0; padding: 0; border: 0; border-top: 1px solid #ececec; background: none; font-size: 14px; line-height: 20px; }
#menu .menu-dropdown li.level4:first-child { border-top: 0; border-radius: 12px 12px 0 0; }
#menu .menu-dropdown li.level4:last-child { border-radius: 0 0 12px 12px; }
#menu .menu-dropdown li.level4:only-child { border-radius: 12px; }
#menu .menu-dropdown li.level4 span.subtitle { display: none; }
#menu .menu-dropdown li.level4 { position: relative; }
#menu .menu-dropdown li.level4 > a.level4, #menu .menu-dropdown li.level4 > span.level4 { display: block; position: relative; padding: 0; border: 0; background: transparent; color: #333; text-shadow: none; box-shadow: none !important; font-size: 14px; line-height: 20px; transition: background .2s, color .2s; }
#menu .menu-dropdown li.level4 > a.level4 > span, #menu .menu-dropdown li.level4 > span.level4 > span { display: block; height: auto; padding: 14px 40px 14px 20px; margin: 0; border: 0; background: transparent; color: inherit; text-transform: none; line-height: 20px; }
#menu .menu-dropdown li.level4:hover > a.level4, #menu .menu-dropdown li.level4:hover > span.level4, #menu .menu-dropdown a.current.level4 { background: linear-gradient(90deg,#a82a1c,#c0392b); color: #fff; font-weight: 600; }
#menu .menu-dropdown li.level4.parent > a.level4::after, #menu .menu-dropdown li.level4.parent > span.level4::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-top: 2px solid #b9b9b9; border-right: 2px solid #b9b9b9; transform: rotate(45deg); }
#menu .menu-dropdown li.level4.parent:hover > a.level4::after, #menu .menu-dropdown li.level4.parent:hover > span.level4::after { border-color: #fff; }
#menu .menu-dropdown li.level4 > ul.level5 { display: none; position: absolute; left: 100%; top: -1px; width: 240px; margin: 0; padding: 0; list-style: none; border-left: 8px solid transparent; background: #fff; background-clip: padding-box; border-radius: 12px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.22)); z-index: 9; }
#menu .menu-dropdown li.level4:hover > ul.level5 { display: block; }
#menu .menu-dropdown li.level5 { position: relative; margin: 0; padding: 0; border: 0; border-top: 1px solid #ececec; background: none; font-size: 14px; line-height: 20px; }
#menu .menu-dropdown li.level5:first-child { border-top: 0; border-radius: 12px 12px 0 0; }
#menu .menu-dropdown li.level5:last-child { border-radius: 0 0 12px 12px; }
#menu .menu-dropdown li.level5:only-child { border-radius: 12px; }
#menu .menu-dropdown li.level5 span.subtitle { display: none; }
#menu .menu-dropdown li.level5 { position: relative; }
#menu .menu-dropdown li.level5 > a.level5, #menu .menu-dropdown li.level5 > span.level5 { display: block; position: relative; padding: 0; border: 0; background: transparent; color: #333; text-shadow: none; box-shadow: none !important; font-size: 14px; line-height: 20px; transition: background .2s, color .2s; }
#menu .menu-dropdown li.level5 > a.level5 > span, #menu .menu-dropdown li.level5 > span.level5 > span { display: block; height: auto; padding: 14px 40px 14px 20px; margin: 0; border: 0; background: transparent; color: inherit; text-transform: none; line-height: 20px; }
#menu .menu-dropdown li.level5:hover > a.level5, #menu .menu-dropdown li.level5:hover > span.level5, #menu .menu-dropdown a.current.level5 { background: linear-gradient(90deg,#a82a1c,#c0392b); color: #fff; font-weight: 600; }
#menu .menu-dropdown li.level5.parent > a.level5::after, #menu .menu-dropdown li.level5.parent > span.level5::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-top: 2px solid #b9b9b9; border-right: 2px solid #b9b9b9; transform: rotate(45deg); }
#menu .menu-dropdown li.level5.parent:hover > a.level5::after, #menu .menu-dropdown li.level5.parent:hover > span.level5::after { border-color: #fff; }
#menu .menu-dropdown li.level5 > ul.level6 { display: none; position: absolute; left: 100%; top: -1px; width: 240px; margin: 0; padding: 0; list-style: none; border-left: 8px solid transparent; background: #fff; background-clip: padding-box; border-radius: 12px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.22)); z-index: 10; }
#menu .menu-dropdown li.level5:hover > ul.level6 { display: block; }
#menu .menu-dropdown li.level6 { position: relative; margin: 0; padding: 0; border: 0; border-top: 1px solid #ececec; background: none; font-size: 14px; line-height: 20px; }
#menu .menu-dropdown li.level6:first-child { border-top: 0; border-radius: 12px 12px 0 0; }
#menu .menu-dropdown li.level6:last-child { border-radius: 0 0 12px 12px; }
#menu .menu-dropdown li.level6:only-child { border-radius: 12px; }
#menu .menu-dropdown li.level6 span.subtitle { display: none; }
#menu .menu-dropdown li.level6 { position: relative; }
#menu .menu-dropdown li.level6 > a.level6, #menu .menu-dropdown li.level6 > span.level6 { display: block; position: relative; padding: 0; border: 0; background: transparent; color: #333; text-shadow: none; box-shadow: none !important; font-size: 14px; line-height: 20px; transition: background .2s, color .2s; }
#menu .menu-dropdown li.level6 > a.level6 > span, #menu .menu-dropdown li.level6 > span.level6 > span { display: block; height: auto; padding: 14px 40px 14px 20px; margin: 0; border: 0; background: transparent; color: inherit; text-transform: none; line-height: 20px; }
#menu .menu-dropdown li.level6:hover > a.level6, #menu .menu-dropdown li.level6:hover > span.level6, #menu .menu-dropdown a.current.level6 { background: linear-gradient(90deg,#a82a1c,#c0392b); color: #fff; font-weight: 600; }
#menu .menu-dropdown li.level6.parent > a.level6::after, #menu .menu-dropdown li.level6.parent > span.level6::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-top: 2px solid #b9b9b9; border-right: 2px solid #b9b9b9; transform: rotate(45deg); }
#menu .menu-dropdown li.level6.parent:hover > a.level6::after, #menu .menu-dropdown li.level6.parent:hover > span.level6::after { border-color: #fff; }
#menu .menu-dropdown li.level6 > ul.level7 { display: none; position: absolute; left: 100%; top: -1px; width: 240px; margin: 0; padding: 0; list-style: none; border-left: 8px solid transparent; background: #fff; background-clip: padding-box; border-radius: 12px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.22)); z-index: 11; }
#menu .menu-dropdown li.level6:hover > ul.level7 { display: block; }
#menu .menu-dropdown li.level7 { position: relative; margin: 0; padding: 0; border: 0; border-top: 1px solid #ececec; background: none; font-size: 14px; line-height: 20px; }
#menu .menu-dropdown li.level7:first-child { border-top: 0; border-radius: 12px 12px 0 0; }
#menu .menu-dropdown li.level7:last-child { border-radius: 0 0 12px 12px; }
#menu .menu-dropdown li.level7:only-child { border-radius: 12px; }
#menu .menu-dropdown li.level7 span.subtitle { display: none; }
@media (max-width:1020px){
	#menu .menu-dropdown li ul.level4, #menu .menu-dropdown li ul.level5, #menu .menu-dropdown li ul.level6 { position: static; width: auto; border-left: 0; filter: none; display: block; background: #eee; border-radius: 0; }
}

/* menu di sisi kanan layar: submenu melayang ke kiri agar tidak terpotong */
#menu .menu-dropdown > li.level1:nth-last-child(-n+2) li ul { left: auto; right: 100%; border-left: 0; border-right: 8px solid transparent; }