(lihat homes/partials/
hero.blade.php — supaya tidak ada H1 ganda). Bootstrap memberi heading
`margin-bottom:.5rem` + `font-weight:500` yang TIDAK didapat
, jadi
tanpa aturan ini slide ke-2 dst bakal geser sedikit dan lebih tipis.
Dipin eksplisit di sini biar dua-duanya identik.
===================================================================== */
.maerev-hero-slide .hero-heading {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 500;
}
/* =====================================================================
Breadcrumb (komponen x-breadcrumbs)
---------------------------------------------------------------------
Dipasang di halaman sub-level supaya pengunjung (dan Google) tahu posisi
halaman dalam struktur situs. Ditaruh di bawah navbar yang posisinya
fixed, jadi ikut offset mt-110/pt-85 dari container halamannya.
Tampilannya: satu baris di tengah halaman, tiap remah dipisah "/",
tanpa penomoran — walaupun markup-nya
(dipertahankan karena
urutannya memang bermakna dan cocok dengan schema BreadcrumbList).
===================================================================== */
.maerev-breadcrumb {
margin-bottom: 24px;
text-align: center;
}
.maerev-breadcrumb ol {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
/* Sejajar horizontal, rata tengah — jadi posisinya pas di tengah atas
tepat di bawah header, apa pun lebar layarnya. */
justify-content: center;
gap: 8px;
padding: 0;
margin: 0;
font-size: 15px;
line-height: 1.4;
}
.maerev-breadcrumb ol.left {
align-items: start;
/* Sejajar horizontal, rata tengah — jadi posisinya pas di tengah atas
tepat di bawah header, apa pun lebar layarnya. */
justify-content: left;
}
/* Angka penanda dimatikan berlapis: list-style di - (bukan cuma di
) plus ::marker dikosongkan, supaya tidak muncul lagi kalau ada CSS
lain yang menyetel ulang list-style pada elemen list di dalam konten. */
.maerev-breadcrumb li {
display: flex;
align-items: center;
gap: 8px;
list-style: none;
}
.maerev-breadcrumb li::marker {
content: "";
}
/* Pemisah "/" dibuat lewat CSS, bukan markup — supaya tidak ikut terbaca
screen reader dan tidak ikut ter-copy waktu teksnya di-blok. */
.maerev-breadcrumb li + li::before {
content: "/";
opacity: 0.4;
}
.maerev-breadcrumb a {
color: inherit;
opacity: 0.65;
text-decoration: none;
transition: opacity 0.2s ease;
}
.maerev-breadcrumb a:hover {
opacity: 1;
text-decoration: underline;
}
.maerev-breadcrumb [aria-current="page"] {
font-weight: 600;
}
/* Halaman dengan hero berpadding besar (mis. detail solusi: pt-300) tidak bisa
menaruh breadcrumb di alur normal — posisinya jadi 300px dari atas, jauh dari
header. Bar ini menempel ke section hero (position-relative) dan diangkat ke
195px, yaitu garis yang sama dengan halaman lain (mt-110 + pt-85). */
.maerev-breadcrumb-bar {
position: absolute;
top: 120px;
left: 0;
right: 0;
z-index: 2;
}
.maerev-breadcrumb-bar .maerev-breadcrumb {
margin-bottom: 0;
/* Di halaman detail solusi remahnya rata kiri, sejajar dengan judul hero
di bawahnya — bukan rata tengah seperti halaman lain. */
text-align: left;
}
.maerev-breadcrumb-bar .maerev-breadcrumb ol {
justify-content: flex-start;
}
@media (max-width: 1199px) {
.maerev-breadcrumb-bar {
top: 175px;
}
}
@media (max-width: 575px) {
.maerev-breadcrumb ol {
font-size: 13px;
gap: 6px;
}
.maerev-breadcrumb li {
gap: 6px;
}
/* Di layar kecil padding hero tinggal sm-pt-150, jadi alur normal sudah
pas di bawah header — tidak perlu diangkat, dan aman dari tabrakan
dengan judul hero. */
.maerev-breadcrumb-bar {
position: static;
margin-bottom: 20px;
}
}
/* =====================================================================
Filter kategori yang bisa di-crawl
---------------------------------------------------------------------
Item filter isotope dulu - kosong — tidak ada URL, jadi tidak ada satu
pun halaman kategori yang bisa diindeks Google. Sekarang tiap item berisi
ke halaman kategori sungguhan. Aturan di bawah membuat anchor itu
mengisi penuh pill-nya dan mewarisi warna
- , jadi tampilannya persis
sama seperti sebelumnya.
===================================================================== */
.filter-nav-one .isotop-menu-wrapper li > a[data-filter-link] {
display: block;
color: inherit;
text-decoration: none;
}
/* Baris tautan taksonomi sekunder (mis. "Jelajahi per industri"). */
.maerev-taxonomy-links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 14px;
font-size: 15px;
}
.maerev-taxonomy-links__label {
opacity: 0.55;
}
.maerev-taxonomy-links a {
color: inherit;
opacity: 0.75;
text-decoration: none;
border-bottom: 1px solid currentColor;
transition: opacity 0.2s ease;
}
.maerev-taxonomy-links a:hover,
.maerev-taxonomy-links a.is-active {
opacity: 1;
}
.maerev-taxonomy-links a.is-active {
font-weight: 600;
}
@media (max-width: 575px) {
.maerev-taxonomy-links {
font-size: 13px;
gap: 6px 10px;
}
}
/* =====================================================================
Bagian "Masalah" di halaman detail solusi
---------------------------------------------------------------------
Nada bagian ini sengaja dibuat mendesak — pembaca harus merasa poin
ini menggambarkan situasinya sekarang, sebelum bagian Solusi dan
Manfaat menawarkan jalan keluar. Karena itu silang merah, bukan ikon
info netral, dan tiap poin dibingkai kartu merah tipis.
===================================================================== */
.maerev-problem-list {
display: grid;
gap: 12px;
margin: 0;
padding: 0;
}
.maerev-problem-list li {
padding: 16px 20px;
border: 1px solid rgba(214, 40, 57, 0.16);
/* Garis kiri lebih tebal: bikin daftar terbaca sebagai peringatan,
bukan sekadar bullet biasa. */
border-left: 3px solid #d62839;
border-radius: 12px;
background: rgba(214, 40, 57, 0.05);
line-height: 1.5;
}
.maerev-problem-list__icon {
color: #d62839;
/* Ikon 1em mengikuti fs-22 di
- , diturunkan sedikit supaya
optically sejajar dengan baris teks pertama. */
font-size: 0.95em;
line-height: 1.55;
}
/* Kalimat penutup adalah pukulan terakhir sebelum bagian Solusi —
dinaikkan bobotnya, tapi tetap teks biasa supaya tidak berebut
perhatian dengan heading. */
.maerev-problem-closing {
color: #d62839;
}
@media (max-width: 575px) {
.maerev-problem-list li {
padding: 14px 16px;
}
}