/* ============================================================
HISTORY OUTLET — tema hitam mewah + emas (menimpa style.css Clubio)
Dimuat SETELAH css/style.css.
============================================================ */
:root {
--ho-bg: #070707;
--ho-bg-2: #0d0c0b;
--ho-surface: #121110;
--ho-surface-2: #181613;
--ho-line: rgba(225, 191, 95, 0.22);
--ho-line-soft: rgba(225, 191, 95, 0.12);
--ho-gold: #e1bf5f;
--ho-gold-light: #f0d988;
--ho-gold-deep: #a97b29;
--ho-gold-grad: linear-gradient(135deg, #f7e187 0%, #e7b83a 45%, #a97b29 100%);
--ho-gold-text: linear-gradient(180deg, #f6e3a4 0%, #c6a458 55%, #9a7832 100%);
--ho-text: #f1ebdd;
--ho-muted: #a79f8f;
--ho-dim: #6f685b;
--ho-serif: "Playfair Display", "Times New Roman", serif;
--ho-sans: "Montserrat", "Segoe UI", sans-serif;
}
/* ---------- dasar ---------- */
html { background: var(--ho-bg); }
body {
background: var(--ho-bg) !important;
color: var(--ho-muted) !important;
font-family: var(--ho-sans) !important;
font-size: 16px;
line-height: 1.7;
}
h1, h2, h3, h4, h5, h6, .tt-title, .section-title__text, .promo02__title, .tt-parallax01__title,
.mainSlider .tt-title-02, .blocktitle .tt-title {
font-family: var(--ho-serif) !important;
color: var(--ho-text);
font-weight: 600 !important;
letter-spacing: 0 !important;
}
a { color: var(--ho-gold); }
a:hover { color: var(--ho-gold-light); }
::selection { background: var(--ho-gold); color: #111; }
.loading-content { display: none !important; }
/* ---------- emas bergradasi (teks) ---------- */
.ho-gold {
background: var(--ho-gold-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ---------- tombol ---------- */
.tt-btn, .tt-btn-default, .tt-btn_color02 {
font-family: var(--ho-sans) !important;
font-weight: 600 !important;
font-size: 12px !important;
letter-spacing: 0.2em !important;
text-transform: uppercase;
color: var(--ho-gold) !important;
border: 1px solid var(--ho-gold) !important;
padding: 16px 30px !important;
background: transparent !important;
transition: background .25s, color .25s, box-shadow .25s;
}
.tt-btn:before, .tt-btn:after, .tt-btn-default:before, .tt-btn-default:after { display: none !important; }
.tt-btn-default, .tt-btn-default span, .tt-btn-default:not(:hover) { background: transparent !important; background-color: transparent !important; color: var(--ho-gold) !important; }
.tt-btn-default:hover, .tt-btn-default:hover span { background: var(--ho-gold-grad) !important; color: #141108 !important; }
.tt-btn-default span { background: none !important; }
.tt-btn:hover, .tt-btn-default:hover, .tt-btn_color02:hover {
background: var(--ho-gold-grad) !important;
color: #141108 !important;
box-shadow: 0 10px 30px rgba(231, 184, 58, 0.18);
}
.tt-btn.ho-btn-solid { background: var(--ho-gold-grad) !important; color: #141108 !important; border-color: transparent !important; }
.tt-btn.ho-btn-solid:hover { filter: brightness(1.06); }
.tt-row-btn .tt-btn { margin: 0 8px; }
/* ---------- header ---------- */
#tt-header {
background: rgba(7, 7, 7, 0.88) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--ho-line-soft);
height: 92px !important;
}
#tt-header { padding: 0 !important; }
#tt-header .tt-holder { height: 92px; align-items: center !important; }
#tt-header .tt-holder > .tt-col { display: flex; align-items: center; }
#tt-header .tt-logo { top: 0 !important; display: flex !important; align-items: center; }
#tt-header .tt-logo img { height: 46px; width: auto; display: block; }
#tt-header #tt-nav, #tt-header .nav-btn, #tt-header .tt-col-obj { position: relative; top: 0; }
/* Masuk/Daftar satu grup dengan pencarian & bahasa: jarak ke kanan dirapatkan (template memberi margin %, di 1920 px jadi ~100 px) */
#tt-header .tt-col-obj { margin-left: 10px !important; }
#tt-header .nav-btn { margin-left: 24px; }
/* laptop 1240-1599 px: menu sempit -> rapatkan jarak tautan supaya item terakhir tidak turun baris */
@media (min-width: 1240px) and (max-width: 1599px) {
#tt-header #tt-nav > ul > li > a { padding-left: 8px; padding-right: 8px; letter-spacing: 0.12em !important; }
#tt-header #tt-nav { padding-right: 0 !important; }
#tt-header .nav-btn { margin-left: 10px; gap: 6px; }
#tt-header .nav-btn li a { padding-left: 16px !important; padding-right: 16px !important; }
}
#tt-nav > ul > li > a {
font-family: var(--ho-sans) !important;
font-size: 12px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase;
color: var(--ho-text) !important;
}
#tt-nav > ul > li:hover > a, #tt-nav > ul > li.active > a { color: var(--ho-gold) !important; }
#tt-nav__line { background: var(--ho-gold-grad) !important; height: 2px !important; border-radius: 0 !important; }
#tt-nav ul ul { background: var(--ho-surface) !important; border: 1px solid var(--ho-line-soft); }
#tt-nav ul ul li a { color: var(--ho-muted) !important; font-family: var(--ho-sans) !important; font-size: 12px !important; }
#tt-nav ul ul li a:hover { color: var(--ho-gold) !important; background: transparent !important; }
.nav-btn li a {
color: var(--ho-gold) !important;
border: 1px solid var(--ho-gold) !important;
border-radius: 0 !important;
background: transparent !important;
font-family: var(--ho-sans) !important;
font-size: 11px !important;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 10px 18px !important;
}
.nav-btn li a:hover { background: var(--ho-gold-grad) !important; color: #141108 !important; }
.nav-btn li a i { display: none !important; }
.tt-obj__btn { color: var(--ho-text) !important; }
.tt-obj__btn:hover { color: var(--ho-gold) !important; }
.tt-obj__badge { background: var(--ho-gold) !important; color: #141108 !important; }
.tt-obj-chat, .tt-obj-cart { display: none !important; }
.tt-select, .tt-skinSelect-02 .tt-select__value, .tt-obj-languages * { color: var(--ho-text) !important; font-family: var(--ho-sans) !important; }
.tt-dropdown-menu { background: var(--ho-surface) !important; border-top: 1px solid var(--ho-line-soft); }
/* dropdown bahasa (SumoSelect) */
.tt-skinSelect-02 .SumoSelect .optWrapper, .SumoSelect > .optWrapper {
background: var(--ho-surface) !important; color: var(--ho-text) !important;
border: 1px solid var(--ho-line-soft) !important; border-radius: 0 !important;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55) !important;
}
.tt-skinSelect-02 .SumoSelect .optWrapper:before { background: var(--ho-gold-grad) !important; height: 1px !important; }
.SumoSelect > .optWrapper > .options li.opt, .tt-skinSelect-02 .SumoSelect .optWrapper > .options li.opt { color: var(--ho-muted) !important; border-color: transparent !important; font-family: var(--ho-sans) !important; }
.SumoSelect > .optWrapper > .options li.opt label { color: inherit !important; }
.tt-skinSelect-02 .SumoSelect .optWrapper > .options li.opt:hover, .SumoSelect > .optWrapper > .options li.opt:hover { background: rgba(225, 191, 95, 0.08) !important; color: var(--ho-gold) !important; }
.tt-skinSelect-02 .SumoSelect .optWrapper > .options li.opt.disabled, .SumoSelect > .optWrapper > .options li.opt.selected { color: var(--ho-gold) !important; background: transparent !important; }
.tt-skinSelect-02 .SumoSelect > .CaptionCont > label:after, .tt-skinSelect-02 .SumoSelect:hover > .CaptionCont > label:after { color: var(--ho-gold) !important; border-color: var(--ho-gold) !important; }
.tt-search-input { background: transparent !important; color: var(--ho-text) !important; border-color: var(--ho-line) !important; font-family: var(--ho-sans) !important; }
.panel-menu { background: var(--ho-surface) !important; border-right: 1px solid var(--ho-line-soft); }
.panel-menu ul li a { color: var(--ho-text) !important; font-family: var(--ho-sans) !important; font-weight: 500 !important; letter-spacing: 0.06em; }
.panel-menu .mm-navbtn-names { color: var(--ho-gold); font-family: var(--ho-sans); letter-spacing: 0.16em; }
#tt-nav .ho-mobile-only { display: none !important; }
.panel-menu .ho-mobile-only { margin-top: 14px; border-top: 1px solid var(--ho-line-soft); padding-top: 14px; }
.panel-menu .ho-mobile-only a { color: var(--ho-gold) !important; }
.tt-stuck-nav, #tt-stuck { background: rgba(7, 7, 7, 0.95) !important; border-bottom: 1px solid var(--ho-line-soft); }
/* ---------- hero ---------- */
.mainSlider-wrapper { background: var(--ho-bg); }
.mainSlider .slide { min-height: 760px; }
.mainSlider .slide .img--holder:before {
background-color: transparent !important;
opacity: 1 !important;
background:
radial-gradient(ellipse at 50% 35%, rgba(231, 184, 58, 0.10) 0%, rgba(7, 7, 7, 0) 55%),
linear-gradient(180deg, rgba(7, 7, 7, 0.55) 0%, rgba(7, 7, 7, 0.35) 45%, rgba(7, 7, 7, 0.98) 100%) !important;
}
.mainSlider .slide .mainSlider-textmask {
font-family: var(--ho-serif) !important;
opacity: 0.09 !important;
letter-spacing: 0.04em !important;
font-weight: 500 !important;
}
.mainSlider .tt-title-01 {
font-family: var(--ho-sans) !important;
font-size: 12px !important;
letter-spacing: 0.36em !important;
text-transform: uppercase;
color: var(--ho-gold) !important;
font-weight: 500 !important;
}
.mainSlider .tt-title-02 {
font-size: 64px !important;
line-height: 1.12 !important;
font-weight: 500 !important;
color: var(--ho-text) !important;
text-transform: none !important;
margin: 18px auto 0 !important;
max-width: 980px;
}
.mainSlider .tt-title-02 em { font-style: italic; color: var(--ho-gold-light); }
.ho-hero-sub {
max-width: 720px;
margin: 22px auto 0;
font-size: 17px;
line-height: 1.75;
color: #cfc6b4;
}
.mainSlider .tt-row-btn { margin-top: 34px; }
.slick-dots li button:before, .slick-dots01 li button:before { color: var(--ho-gold) !important; }
.slick-dots li.slick-active button:before { color: var(--ho-gold) !important; }
.slick-arrows01 .slick-arrow, .parallax__navleft, .parallax__navright { color: var(--ho-gold) !important; }
/* ---------- pencarian ensiklopedia ---------- */
.mainSlider .slide .slide-content { padding-bottom: 170px !important; }
.ho-search-wrap { position: relative; z-index: 5; margin-top: -110px; margin-bottom: 56px; padding: 0 15px 0; }
.ho-search {
max-width: 1140px;
margin: 0 auto;
background: rgba(13, 12, 11, 0.92);
border: 1px solid var(--ho-line);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.03);
padding: 26px 28px 22px;
backdrop-filter: blur(12px);
}
.ho-search__label {
font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ho-gold);
margin-bottom: 14px; display: flex; align-items: center; gap: 14px;
}
.ho-search__label:after { content: ""; flex: 1; height: 1px; background: var(--ho-line-soft); }
.ho-search__row { display: flex; gap: 12px; flex-wrap: wrap; }
.ho-search__row > * { flex: 1 1 160px; min-width: 0; }
.ho-search__row > .ho-search__q { flex: 3 1 320px; }
.ho-search input, .ho-search select {
width: 100%; height: 54px;
background: #0a0a09; color: var(--ho-text);
border: 1px solid rgba(225, 191, 95, 0.18);
padding: 0 16px; font-family: var(--ho-sans); font-size: 14px;
outline: none; appearance: none; -webkit-appearance: none; border-radius: 0;
transition: border-color .2s, box-shadow .2s;
}
.ho-search select {
background-image: linear-gradient(45deg, transparent 50%, var(--ho-gold) 50%), linear-gradient(135deg, var(--ho-gold) 50%, transparent 50%);
background-position: calc(100% - 20px) 24px, calc(100% - 15px) 24px;
background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px;
}
.ho-search select option { background: #0a0a09; color: var(--ho-text); }
.ho-search input::placeholder { color: var(--ho-dim); }
.ho-search input:focus, .ho-search select:focus { border-color: var(--ho-gold); box-shadow: 0 0 0 3px rgba(225, 191, 95, 0.12); }
.ho-search__btn {
flex: 0 0 auto !important; height: 54px; padding: 0 30px;
background: var(--ho-gold-grad); color: #141108; border: 0; cursor: pointer;
font-family: var(--ho-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
transition: filter .2s, transform .2s;
}
.ho-search__btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.ho-search__chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; font-size: 12px; color: var(--ho-dim); }
.ho-search__chips a {
color: var(--ho-muted); border: 1px solid rgba(255, 255, 255, 0.08); padding: 6px 12px; font-size: 12px;
text-decoration: none; transition: all .2s;
}
.ho-search__chips a:hover { color: var(--ho-gold); border-color: var(--ho-gold); }
/* ---------- judul seksi ---------- */
.section-title { position: relative; }
.section-title__text, .blocktitle .tt-title { color: var(--ho-text) !important; font-size: 42px !important; line-height: 1.15 !important; }
.section-title__text-under, .tt-title-under {
color: transparent !important;
-webkit-text-stroke: 1px rgba(225, 191, 95, 0.10);
font-family: var(--ho-serif) !important;
font-weight: 700 !important;
opacity: 1 !important;
}
.title__text-description, .blocktitle + p, .events-wide_wrapper p, .event-item02 p, .tt-parallax01 p, .tt-promo01 p { color: var(--ho-muted) !important; }
.section-title__link a, .link-01 { color: var(--ho-gold) !important; font-family: var(--ho-sans) !important; letter-spacing: 0.16em; text-transform: uppercase; font-size: 11px !important; }
.section-title__link a:after, .link-01:after { background: var(--ho-gold) !important; }
.section-title__label, .blocktitle .tt-caption, .tt-caption { color: var(--ho-gold) !important; font-family: var(--ho-sans) !important; font-size: 11px !important; letter-spacing: 0.3em !important; }
.ho-kicker { font-family: var(--ho-sans); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ho-gold); margin-bottom: 12px; }
/* penanda gradien di tengah seksi -> garis emas tipis */
.section-marker:before { background: var(--ho-gold-grad) !important; height: 2px !important; width: 56px !important; }
/* ---------- seksi gelap bergantian ---------- */
.ho-section { padding: 96px 0; position: relative; }
.ho-section--alt { background: var(--ho-bg-2); border-top: 1px solid rgba(255, 255, 255, 0.03); border-bottom: 1px solid rgba(255, 255, 255, 0.03); }
.section-indent01, .section-indent02, .section-indent03, .section-indent04, .section-indent06, .section-wrapper01, .section-inner { background: transparent !important; }
.section-wrapper02 { background: var(--ho-bg-2) !important; }
/* ---------- kartu tokoh (tt-box01) ---------- */
.tt-box01 { background: var(--ho-surface); border: 1px solid rgba(255, 255, 255, 0.04); transition: border-color .25s, transform .25s; }
.tt-box01:hover { border-color: var(--ho-line); transform: translateY(-4px); }
.tt-box01__img img { filter: saturate(0.85) contrast(1.05); }
.tt-box01_layout { background: var(--ho-surface) !important; }
.tt-box01__title .tt-title01 a { color: var(--ho-text) !important; font-family: var(--ho-serif) !important; font-size: 22px !important; }
.tt-box01__title .tt-title02 { color: var(--ho-gold) !important; font-family: var(--ho-sans) !important; font-size: 11px !important; letter-spacing: 0.2em; text-transform: uppercase; }
.tt-box01__social li a { color: var(--ho-dim) !important; }
.tt-box01__social li a:hover { color: var(--ho-gold) !important; }
.tt-box01_layout02 { background: var(--ho-surface-2) !important; }
/* ---------- blok lebar (events-wide) ---------- */
.events-wide__content { background: var(--ho-surface) !important; }
.events-wide__content.tt-color01, .events-wide__content.tt-color02 { background: var(--ho-surface) !important; color: var(--ho-muted) !important; }
.events-wide__content.tt-color02 { background: var(--ho-surface-2) !important; }
.events-wide__img .tt-text { font-family: var(--ho-serif) !important; color: rgba(241, 235, 221, 0.9) !important; }
.events-wide__img .tt-icon { border-color: var(--ho-gold) !important; color: var(--ho-gold) !important; }
.events-wide__img a:after { background: linear-gradient(180deg, rgba(7,7,7,.1), rgba(7,7,7,.6)) !important; }
/* ---------- kartu cara kerja (event-item02) ---------- */
.event-item02__content { background: linear-gradient(180deg, rgba(7, 7, 7, 0) 0%, rgba(7, 7, 7, 0.92) 70%) !important; }
.event-item02__border { border: 1px solid var(--ho-line) !important; }
.event-item02 .tt-title { color: var(--ho-text) !important; font-size: 26px !important; }
.event-item02__img { filter: saturate(0.8); }
.event-item02 .event-item02__img:before { background: #070707 !important; opacity: 0.5 !important; }
.event-item02 .ho-step { font-family: var(--ho-serif); font-size: 44px; color: var(--ho-gold); opacity: .55; line-height: 1; margin-bottom: 10px; }
/* ---------- kartu koleksi (event-item) ---------- */
.event-item { background: var(--ho-surface); border: 1px solid rgba(255, 255, 255, 0.04); }
.event-item .event-item__label {
background: var(--ho-gold-grad) !important; background-image: var(--ho-gold-grad) !important;
color: #141108 !important; font-family: var(--ho-sans) !important; font-weight: 700 !important;
font-size: 10px !important; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1 !important;
width: auto !important; height: auto !important; min-width: 0 !important;
padding: 9px 12px 9px 14px !important; /* kanan sedikit lebih tipis: kompensasi spasi huruf terakhir */
display: inline-flex !important; align-items: center; justify-content: center;
top: 12px !important; right: 12px !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.event-item__label span { color: #141108 !important; font-size: 10px !important; }
.event-item__layout { background: rgba(7, 7, 7, 0.78) !important; }
.event-item__layout .tt-btn { margin: 4px 0; }
/* kartu koleksi: ukuran seragam; judul 1 baris, deskripsi 3 baris, sisanya dipotong "..." (detail lewat klik) */
.event-item .event-item__img { height: 300px !important; overflow: hidden; }
.event-item .event-item__img img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.ho-koleksi__meta { padding: 18px 20px 20px; border-top: 1px solid rgba(255,255,255,0.05); height: 150px; }
.ho-koleksi__meta .ho-kicker, .ho-koleksi__meta h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ho-koleksi__meta .ho-kicker { margin-bottom: 6px; font-size: 10px; }
.ho-koleksi__meta h4 { font-size: 20px !important; line-height: 1.3 !important; margin: 0 0 6px; color: var(--ho-text); }
.ho-koleksi__meta p {
margin: 0; font-size: 13px; color: var(--ho-muted); line-height: 1.6;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* ---------- promo02 (strip emas) ---------- */
.promo02 { background: var(--ho-surface-2) !important; border-top: 1px solid var(--ho-line-soft); border-bottom: 1px solid var(--ho-line-soft); }
.promo02__img svg { display: none; }
.promo02__title { color: var(--ho-text) !important; font-size: 32px !important; }
.promo02__content { color: var(--ho-muted) !important; }
.promo02 .tt-base-color { color: var(--ho-gold) !important; }
/* ---------- promo box (dampak) ---------- */
.promo-box-wide { background: var(--ho-surface) !important; }
.promo-box-wide .tt-item__img { background: url(../images/ho/dampak-ilustrasi.jpg?v=4) center/cover no-repeat !important; }
.promo-box-wide .tt-item__content { background: var(--ho-surface) !important; color: var(--ho-muted) !important; }
.tt-item__label { background: var(--ho-gold-grad) !important; border: 0 !important; box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.tt-item__label:before, .tt-item__label:after { display: none !important; }
.tt-item__label-icon span, .tt-item__label-text-02 { color: #141108 !important; font-family: var(--ho-serif) !important; }
.tt-item__label-text-01, .tt-item__label-text-03 { color: #2a2008 !important; font-family: var(--ho-sans) !important; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 10px !important; }
.list-01 li a { color: var(--ho-text) !important; }
.list-01 li:before, .list-01 li a:before { background: var(--ho-gold) !important; color: var(--ho-gold) !important; }
.ho-split { display: flex; gap: 0; margin: 26px 0 8px; border: 1px solid var(--ho-line-soft); }
.ho-split > div { flex: 1; padding: 16px 10px; text-align: center; border-right: 1px solid var(--ho-line-soft); }
.ho-split > div:last-child { border-right: 0; }
.ho-split b { display: block; font-family: var(--ho-serif); font-size: 30px; color: var(--ho-gold); line-height: 1.1; }
.ho-split span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ho-muted); }
.ho-split > div:first-child b { background: var(--ho-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ---------- parallax (kutipan / sorotan) ---------- */
.section-parallax { position: relative; }
.section-parallax:before { content: ""; position: absolute; inset: 0; background: rgba(7, 7, 7, 0.72); }
.section-parallax-border01, .section-parallax-border02 { border-color: var(--ho-line) !important; }
.tt-parallax01__data { color: var(--ho-gold) !important; font-family: var(--ho-sans) !important; letter-spacing: 0.3em; text-transform: uppercase; font-size: 11px !important; }
.tt-parallax01__title { color: var(--ho-text) !important; font-size: 40px !important; line-height: 1.2 !important; }
.tt-parallax01 p { color: #cfc6b4 !important; }
/* ---------- galeri momen ---------- */
.instafeed-masonry .instagram_gallery > * { border: 1px solid #070707; }
.instafeed-masonry .instagram_gallery > * img { filter: saturate(0.8) brightness(0.9); transition: transform .5s, filter .4s; }
.instafeed-masonry .instagram_gallery > *:hover img { transform: scale(1.04); filter: saturate(1) brightness(1); }
.instafeed-masonry .instagram_gallery > *:before { background: var(--ho-gold-grad) !important; width: 44px !important; height: 44px !important; }
.instafeed-masonry .instagram_gallery > *:after { color: #141108 !important; font-size: 20px !important; bottom: 10px !important; right: 12px !important; }
/* ---------- promo01 (ajakan) ---------- */
.tt-promo01 { background: var(--ho-bg) !important; border-top: 1px solid var(--ho-line-soft); }
.tt-promo01:before, .tt-promo01:after { display: none !important; }
.tt-promo01 .tt-promo01__layout { background: var(--ho-bg) !important; }
.tt-promo01 .tt-promo01__layout:before { background: linear-gradient(to right, rgba(7, 7, 7, 0), #070707 60%) !important; }
.tt-promo01 .tt-promo01__layout:after { background: linear-gradient(to left, rgba(7, 7, 7, 0), #070707 60%) !important; }
.tt-promo01 .tt-promo01__layout .tt-title { color: var(--ho-text) !important; font-size: 44px !important; }
.tt-promo01 .tt-base-color { color: var(--ho-gold) !important; }
.tt-promo01 .tt-promo01__layout p { color: var(--ho-muted) !important; }
.tt-promo01 .tt-promo01__layout [class^=tt-btn] { margin: 33px 10px 0 !important; min-width: 220px; }
/* ---------- footer ---------- */
#tt-footer { background: #040404 !important; border-top: 1px solid var(--ho-line-soft); }
#tt-footer:before { background: var(--ho-gold-grad) !important; width: 2px !important; border-radius: 0 !important; }
#tt-footer .footer-wrapper { background-color: #040404 !important; }
.footer-wrapper { background: transparent !important; }
.f-nav ul li a { color: var(--ho-muted) !important; font-family: var(--ho-sans) !important; font-size: 11px !important; letter-spacing: 0.2em; text-transform: uppercase; }
.f-nav ul li a:hover { color: var(--ho-gold) !important; }
.f-logo img, .f-logo .tt-logo > * { height: 96px !important; width: auto !important; max-width: none !important; }
.f-logo { margin: 36px 0 44px; }
.f-info__icon { color: var(--ho-gold) !important; }
.f-info__content .tt-title { color: var(--ho-text) !important; font-family: var(--ho-sans) !important; font-size: 12px !important; letter-spacing: 0.2em; text-transform: uppercase; }
.f-info__content address { color: var(--ho-muted) !important; font-style: normal; }
.f-social ul li a { color: var(--ho-dim) !important; border-color: rgba(255, 255, 255, 0.08) !important; }
.f-social ul li a:hover { color: var(--ho-gold) !important; border-color: var(--ho-gold) !important; }
.f-copyright { color: var(--ho-dim) !important; font-size: 12px; }
.f-copyright a { color: var(--ho-muted); }
.ho-footer-tag { color: var(--ho-dim); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 10px; }
/* ---------- perbaikan putaran 1 ---------- */
.mainSlider .slide .mainSlider-textmask { display: none !important; }
@media (min-width: 1100px) {
.ho-search__row { flex-wrap: nowrap; }
.ho-search__row > select { flex: 1 1 0; min-width: 0; }
.ho-search__row > .ho-search__q { flex: 2.4 1 0; }
.ho-search__btn { flex: 0 0 auto; }
}
.tt-box01 .tt-box01__social { background: var(--ho-gold-grad) !important; }
.tt-box01 .tt-box01__social li a { color: #141108 !important; }
.tt-box01 .tt-box01_layout:not(.tt-box01_layout02), .tt-box01 .tt-box01_layout.tt-box01_layout02 { background-color: var(--ho-surface) !important; }
.blocktitle .tt-title-under, .events-wide .tt-title-under, .promo-box-wide .tt-title-under, .section-title__text-under,
.blocktitle:not([class^=blocktitle_color-]) .tt-title-under, .blocktitle.blocktitle_color-01 .tt-title-under {
color: transparent !important;
text-shadow: none !important;
-webkit-text-stroke: 1px rgba(225, 191, 95, 0.13);
}
.blocktitle .tt-title:after, .blocktitle_color-01 .tt-title:after, .blocktitle .tt-title:before { background: var(--ho-gold-grad) !important; }
.blocktitle_color-01 .tt-caption, .blocktitle_color-01 .tt-title { color: inherit; }
.blocktitle_color-01 .tt-title { color: var(--ho-text) !important; }
/* ---------- hilangkan "coakan" garis bawaan template: garis utuh, rapi ---------- */
.tt-btn span::before, .tt-btn span::after, .tt-btn::before, .tt-btn::after,
.tt-btn:hover span::before, .tt-btn:hover span::after { display: none !important; content: none !important; }
.tt-btn { border: 1px solid var(--ho-gold) !important; }
.section-parallax-border01 { border: 1px solid var(--ho-line) !important; }
.section-parallax-border01::before, .section-parallax-border01::after,
.section-parallax-border01 .section-parallax-border02::before, .section-parallax-border01 .section-parallax-border02::after { display: none !important; content: none !important; }
.event-item02__border::before, .event-item02__border::after, .event-item02__border span::before, .event-item02__border span::after { display: none !important; content: none !important; }
.event-item02__border { border: 1px solid var(--ho-line) !important; }
#tt-header .nav-btn li a::before, #tt-header .nav-btn li a::after,
#tt-header .nav-btn li a span::before, #tt-header .nav-btn li a span::after,
#tt-header .nav-btn li a:hover::before, #tt-header .nav-btn li a:hover::after,
#tt-header .nav-btn li a:hover span::before, #tt-header .nav-btn li a:hover span::after { display: none !important; content: none !important; }
#tt-header .nav-btn li a { border: 1px solid var(--ho-gold) !important; }
/* ---------- jarak antar seksi (template terlalu longgar untuk halaman gelap) ---------- */
.section-wrapper01 .section-inner { padding-bottom: 56px !important; padding-top: 64px !important; }
.section-indent02 { margin-top: 64px !important; }
.section-indent04 { margin-top: 72px !important; }
.section-indent06 { margin-top: 96px !important; }
/* ---------- helper ---------- */
.ho-rule { width: 56px; height: 2px; background: var(--ho-gold-grad); margin: 18px auto; }
.ho-rule--left { margin-left: 0; }
.ho-small { font-size: 12px; color: var(--ho-dim); letter-spacing: 0.08em; }
.tt-base-color { color: var(--ho-gold) !important; }
.tt-color02, .tt-color01 { color: var(--ho-muted) !important; }
img { max-width: 100%; }
/* ---------- tablet & HP ---------- */
@media (max-width: 1239px) {
#tt-header { height: 72px !important; }
#tt-header .tt-holder { height: 72px; }
#tt-header .tt-logo img, #tt-header .tt-logo > * { height: 34px !important; width: auto !important; }
#tt-header .nav-btn { display: none !important; }
}
@media (max-width: 1024px) {
/* hero: template memendekkan slider jadi 250-354 px; kita buat satu layar penuh */
.mainSlider, .mainSlider .slide, .mainSlider .slide .img--holder { height: 620px !important; min-height: 0 !important; }
.mainSlider .slide .slide-content { padding: 70px 0 40px !important; }
.mainSlider .tt-title-02 { font-size: 40px !important; }
.ho-hero-sub { font-size: 15px; }
.ho-search-wrap { margin-top: -30px; margin-bottom: 32px; }
.section-title__text, .blocktitle .tt-title { font-size: 32px !important; }
.section-title__text-under, .tt-title-under, .blocktitle .tt-title-under { font-size: 110px !important; left: 0 !important; }
.promo-box-wide, .events-wide, .section-title, .section-indent01, .section-indent04, .section-indent06, .section-wrapper01 { overflow: hidden; }
}
@media (max-width: 790px) {
.mainSlider, .mainSlider .slide, .mainSlider .slide .img--holder { height: 560px !important; }
.mainSlider .tt-title-02 { font-size: 32px !important; line-height: 1.2 !important; }
.mainSlider .slide .slide-content .container .tt-row-btn { flex-direction: column !important; align-items: center; gap: 10px; margin-top: 22px !important; }
.mainSlider .slide .slide-content .container .tt-row-btn .tt-btn { margin: 0 !important; min-width: 220px; }
.ho-hero-sub { font-size: 14px; line-height: 1.6; margin-top: 14px; }
.ho-search { padding: 18px 16px; }
.ho-search__btn { width: 100%; }
.ho-search__label { font-size: 10px; letter-spacing: 0.22em; }
/* kartu cara kerja: teks lebih ringkas supaya tidak menimpa tombol */
.event-item02 .event-item02__img { height: 470px !important; }
.event-item02 .event-item02__content { padding: 28px 16px 40px !important; }
.event-item02__border p { font-size: 13px !important; line-height: 1.5 !important; margin-bottom: 8px; }
.event-item02 .tt-title { font-size: 22px !important; }
.event-item02 .ho-step { font-size: 32px; margin-bottom: 4px; }
.section-title__text-under, .tt-title-under, .blocktitle .tt-title-under { font-size: 84px !important; }
.ho-split { flex-wrap: wrap; }
.ho-split > div { flex: 1 1 50%; border-bottom: 1px solid var(--ho-line-soft); }
.tt-promo01 .tt-promo01__layout .tt-title { font-size: 30px !important; }
.tt-parallax01__title { font-size: 24px !important; }
.f-logo img, .f-logo .tt-logo > * { height: 64px !important; }
/* kartu tokoh: template menggeser kartu 45 px ke kanan; di HP dibuat pas lebar */
.tt-box01-wrapper .item { padding: 0 12px !important; }
.tt-box01, .tt-box01 .tt-box01__img { margin: 0 !important; width: 100% !important; }
.tt-box01 .tt-box01_layout, .tt-box01 .tt-box01_layout.tt-box01_layout02 { margin: 0 !important; width: 100% !important; top: -20px !important; }
}
/* titik slider: bawaan template merah muda */
.slick-dots li button, .slick-dots01 li button, .slick-dots02 li button { background: #3a3630 !important; background-image: none !important; }
.slick-dots li.slick-active button, .slick-dots01 li.slick-active button, .slick-dots02 li.slick-active button { background: var(--ho-gold) !important; }
/* daftar kategori amal: bulatan kecil, bukan kotak besar */
.list-01 li:before { width: 7px !important; height: 7px !important; min-width: 0 !important; border-radius: 50%; top: 11px !important; left: 0 !important; }
.list-01 li { padding-left: 20px !important; }
@media (max-width: 575px) {
.mainSlider .tt-title-02 { font-size: 30px !important; }
}
/* ---------- putaran koreksi 16 Okt (lanjutan) ---------- */
#tt-pageContent:before, #tt-pageContent:after, .tt-base-color:before, a.tt-base-color:before { background: var(--ho-gold-grad) !important; width: 2px !important; border-radius: 0 !important; }
a.tt-base-color:before { width: 100% !important; height: 1px !important; }
.nav-btn { display: flex; gap: 8px; }
.nav-btn li a.ho-btn-solid { background: var(--ho-gold-grad) !important; color: #141108 !important; border-color: transparent !important; }
.nav-btn li a.ho-btn-solid:hover { filter: brightness(1.06); }
/* kartu tokoh: 5 sebaris di PC (rata lebar); di HP 8 kartu pertama (1 per geser) */
.tt-box01-wrapper .item { padding: 0 10px; }
.tt-box01 .tt-box01_layout:not(.tt-box01_layout02), .tt-box01 .tt-box01_layout.tt-box01_layout02 { margin-left: 16px !important; }
.tt-box01__title .tt-title01 a { font-size: 18px !important; }
.tt-box01__title .tt-title02 { font-size: 10px !important; letter-spacing: 0.14em; }
.tt-box01 .tt-box01__social li a { padding: 18px 8px !important; font-size: 16px !important; }
/* kartu tokoh: bilah nama rata penuh di bawah foto (bukan menggantung), teks 1 baris */
.tt-box01 .tt-box01_layout, .tt-box01 .tt-box01_layout:not(.tt-box01_layout02), .tt-box01 .tt-box01_layout.tt-box01_layout02 {
position: static !important; top: 0 !important; margin: 0 !important; width: 100% !important;
flex-direction: row !important; align-items: stretch !important;
}
.tt-box01 { margin-bottom: 0 !important; }
.tt-box01 .tt-box01_layout > .tt-col:last-child { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.tt-box01 .tt-box01__title { min-width: 0; padding: 12px 12px 12px 14px !important; }
.tt-box01__title .tt-title01, .tt-box01__title .tt-title02 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-box01__title .tt-title01 a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-box01 .tt-box01__social { padding: 0 !important; align-items: center !important; }
.tt-box01 .tt-box01__social li a { padding: 0 !important; width: 54px; height: 100%; min-height: 62px; display: flex !important; align-items: center; justify-content: center; }
@media (max-width: 790px) {
.tt-box01 .tt-box01_layout, .tt-box01 .tt-box01_layout.tt-box01_layout02 { top: 0 !important; }
}
/* lencana 40%: kotak 149 px bawaan terlalu sempit untuk tiga baris teks -> ukuran mengikuti isi, jarak jelas */
.promo-box-wide .tt-item .tt-item__label {
width: 184px !important; height: auto !important; min-height: 184px;
padding: 22px 16px !important; gap: 4px;
justify-content: center; align-items: center;
}
.promo-box-wide .tt-item .tt-item__label-text-01 { margin: 0 !important; line-height: 1.4 !important; }
.promo-box-wide .tt-item .tt-item__label-text-02 { font-size: 46px !important; line-height: 1 !important; margin: 8px 0 6px !important; }
.promo-box-wide .tt-item .tt-item__label-text-03 { margin: 0 !important; line-height: 1.4 !important; }
/* daftar kategori amal vs tombol: beri jarak */
.promo-box-wide .tt-item .list-01 { margin-bottom: 28px !important; }
.promo-box-wide .tt-item .tt-content-text .tt-btn { margin-top: 6px; }
/* tombol Laporan dampak: jarak jelas dari daftar */
.promo-box-wide .tt-item .list-01, .promo-box-wide .tt-item .list-01.list-text-top { margin-bottom: 0 !important; }
.promo-box-wide .tt-item .tt-content-text .tt-btn { margin-top: 36px !important; display: inline-block; }
/* ilustrasi Dampak di HP: kotak 244 px memotong masjid & jembatan -> tinggikan; rata kiri-atas agar potret,
masjid & jembatan tampak dan lencana 40% (menempel di atas kolom teks) hanya menutup sungai di kanan-bawah */
@media (max-width: 576px) { .promo-box-wide .tt-item__img { min-height: 560px; background-position: left top !important; } }
/* lencana 40%: pita mendatar di kolom teks, di atas "Misi sosial" (semua ukuran layar). Tidak menimpa apa pun */
.promo-box-wide .tt-item .tt-item__label {
position: relative !important; top: auto !important; left: auto !important; right: auto !important;
-webkit-transform: none !important; transform: none !important;
width: 100% !important; max-width: 420px; min-height: 0 !important;
flex-direction: row !important; justify-content: center !important; align-items: center !important;
gap: 18px !important; padding: 16px 18px !important; margin: 0 0 34px !important;
}
.promo-box-wide .tt-item .tt-item__label-text-01, .promo-box-wide .tt-item .tt-item__label-text-03 { flex: 0 1 100px; }
.promo-box-wide .tt-item .tt-item__label-text-02 { font-size: 40px !important; margin: 0 !important; flex: 0 0 auto; }
@media (max-width: 767px) { .promo-box-wide .tt-item .tt-item__label { margin-top: 18px !important; } }
/* Dampak (PC): dibagi dua sejajar -- ilustrasi kiri 50%, teks kanan 50%, tepi atas & bawah rata,
tanpa panel teks yang menumpang di atas gambar (template: gambar 60% + panel 54% bertumpuk & berjenjang) */
@media (min-width: 1025px) {
.promo-box-wide .tt-item { padding: 0 !important; justify-content: flex-start !important; align-items: stretch !important; }
.promo-box-wide .tt-item .tt-item__img {
position: relative !important; left: auto !important; top: auto !important;
flex: 0 0 50%; width: 50% !important; height: auto !important; min-height: min(45vw, 980px);
background-position: left center !important;
}
.promo-box-wide .tt-item .tt-item__content {
flex: 0 0 50%; width: 50% !important; margin: 0 !important; box-shadow: none !important;
padding: 72px 6% 72px 5.5% !important;
display: flex; flex-direction: column; justify-content: center;
}
/* bagian berikutnya (Sorotan) tidak lagi ditarik 85 px menimpa dasar Dampak */
#dampak + .section-marker .section-indent-minus01 { margin-top: 0 !important; }
}
/* Dampak (tablet 768-1024): kolom 50% terlalu sempit (masjid terpotong) -> gambar di atas selebar layar, teks di bawah */
@media (min-width: 768px) and (max-width: 1024px) {
.promo-box-wide .tt-item { flex-direction: column !important; flex-wrap: nowrap !important; padding: 0 !important; }
.promo-box-wide .tt-item .tt-item__img {
position: relative !important; left: auto !important; top: auto !important;
width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; background-position: center 40% !important;
}
.promo-box-wide .tt-item .tt-item__content { width: 100% !important; margin: 0 !important; box-shadow: none !important; padding: 48px 48px 64px !important; }
#dampak + .section-marker .section-indent-minus01 { margin-top: 0 !important; }
}
/* kata hantu "Dampak" mulai di bawah pita 40% (bawaan -92 px menabrak pita) */
.promo-box-wide .blocktitle .tt-title-under { top: -14px !important; }
/* layar 1025-1365: kata hantu "Dampak" 160 px melewati tepi kanan layar */
@media (min-width: 1025px) and (max-width: 1365px) { .promo-box-wide .blocktitle .tt-title-under { font-size: 140px !important; } }
/* kolom teks 50%: label pembagian (PEMILIK BENDA, HISTORY OUTLET) tetap satu baris */
@media (min-width: 1025px) and (max-width: 1599px) {
.promo-box-wide .tt-item .tt-item__content { padding-left: 5% !important; padding-right: 5% !important; }
.ho-split > div { padding: 16px 6px; }
.ho-split span { font-size: 10px; letter-spacing: 0.08em; white-space: nowrap; }
}
/* ---------- perbaikan hasil QA 16 Okt ---------- */
/* header: template menyisakan 34 px di atas header HP (untuk bilah tombol yang di sini disembunyikan) -> konten
terlihat di atas header saat menggulir. Header di tablet & HP 72 px, maka hero mulai tepat di bawahnya */
@media (max-width: 1239px) { .mainSlider { margin-top: 72px !important; } }
@media (max-width: 767px) { #tt-header { top: 0 !important; } }
/* tautan menu (#tokoh, #koleksi ...): judul bagian tidak tertutup header tetap */
html { scroll-padding-top: 100px; scroll-behavior: smooth; }
@media (max-width: 1239px) { html { scroll-padding-top: 80px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* panah tautan "Semua tokoh" / "Lihat Market & Lelang": bawaan template merah */
.link-01::before, .link-01:hover::before, .section-title__link a::before, .section-title__link a:hover::before { border-left-color: var(--ho-gold) !important; }
/* slider yang cuma satu halaman: titik tunggal disembunyikan */
.slick-dots li:only-child { display: none !important; }
/* paragraf pengantar bagian: margin negatif template + overflow:hidden memotong baris terakhir (HP, bagian Cara) */
@media (max-width: 1024px) { .section-title .title__text-description { margin-bottom: 0 !important; } }
/* HP: bagian Koleksi ditarik 43 px ke atas oleh template -> titik slider Cara menimpa label "Koleksi" */
@media (max-width: 790px) { #koleksi { margin-top: 16px !important; } }
/* HP: kata hantu di belakang judul dipusatkan (tidak tinggal potongan "koh"/"eksi");
kata vertikal di samping gambar (KISAH, PENGGEMAR) terpotong tepi layar -> disembunyikan */
@media (max-width: 1024px) { .section-title__text-under { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; white-space: nowrap; } }
@media (max-width: 767px) { .events-wide__img .tt-text { display: none !important; } }
/* teks redup (Populer:, hak cipta, penafian HOLA) terlalu pucat untuk ukuran 10-12 px */
:root { --ho-dim: #8a8272; }
/* tombol Masuk/Daftar: tipografi sama dengan tombol lain; jarak di dalam grup kanan dirapatkan */
#tt-header .nav-btn li a { font-weight: 600 !important; letter-spacing: 0.16em !important; }
#tt-header .nav-btn li + li { margin-left: 0 !important; }
#tt-header .tt-obj-search .tt-obj__btn { padding-left: 12px !important; padding-right: 12px !important; }
#tt-header .tt-obj-languages { padding-left: 6px !important; }
/* hero: titik pemisah kicker tidak menggantung di akhir baris (HP) */
.ho-nowrap { white-space: nowrap; }
@media (max-width: 575px) { .mainSlider .ho-sep { display: none; } .mainSlider .ho-nowrap { display: block; } .mainSlider .tt-title-01 { line-height: 1.8 !important; } }
/* pencarian: label pilihan tidak terpotong panah */
.ho-search select { padding-left: 14px; padding-right: 30px; text-overflow: ellipsis; }
.ho-search__q { text-overflow: ellipsis; }
/* catatan ilustrasi Dampak sebagai teks HTML: selalu terbaca, tidak ikut terpotong "cover" maupun bagian berikutnya
(yang ditarik 85 px ke atas menimpa dasar gambar) */
.promo-box-wide .tt-item__img { position: relative; }
.ho-ilustrasi-note {
position: absolute; left: 28px; bottom: 24px; z-index: 2; pointer-events: none;
font-family: var(--ho-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase;
color: rgba(241, 235, 221, 0.62); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
@media (max-width: 767px) { .ho-ilustrasi-note { left: 18px; bottom: 14px; font-size: 9px; } }
/* HP: kartu tokoh selebar slide (template membatasi 287 px lalu ho.css menghapus margin auto -> kartu miring ke kiri) */
@media (max-width: 575px) { .tt-box01-wrapper .tt-box01 { max-width: none !important; } }
/* HP: kata hantu "Tokoh" menabrak paragraf -> naikkan seperti "Proses" */
@media (max-width: 1024px) { #tokoh .section-title__text-under { top: -10px !important; } }
/* ---------- header: tautan Cek Sertifikat (ikon perisai) + submenu emas ---------- */
#tt-header .nav-btn li a.ho-btn-cek {
border: 0 !important; background: transparent !important; color: var(--ho-gold) !important;
display: inline-flex !important; align-items: center; gap: 8px; padding-left: 6px !important; padding-right: 10px !important;
}
#tt-header .nav-btn li a.ho-btn-cek svg { width: 18px; height: 18px; flex: 0 0 auto; }
#tt-header .nav-btn li a.ho-btn-cek:hover { color: #f7e187 !important; filter: none; }
#tt-header .nav-btn li a.ho-btn-cek:hover svg { filter: drop-shadow(0 0 6px rgba(225, 191, 95, 0.55)); }
/* layar 1240-1599: menu lebih padat -> Cek Sertifikat tampil sebagai ikon saja */
@media (min-width: 1240px) and (max-width: 1599px) {
#tt-header .nav-btn li a.ho-btn-cek .tt-text { display: none; }
#tt-header .nav-btn li a.ho-btn-cek { padding-left: 8px !important; padding-right: 8px !important; }
}
#tt-nav ul ul { min-width: 220px; padding: 10px 0 !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); }
#tt-nav ul ul li a { display: block; padding: 9px 22px !important; letter-spacing: 0.06em; }
/* footer: font ikon template tidak punya YouTube -> gambar dari SVG */
.f-social ul li a.icon-social-youtube::before {
content: ''; display: inline-block; width: 18px; height: 13px; vertical-align: middle; background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* ---------- hero vs kotak pencarian di layar lebar-tapi-tinggi (iPad Pro 13", monitor 4:3/5:4), owner 16 Okt ----------
Kotak pencarian harus utuh di layar pertama: tinggi hero mengikuti tinggi layar yang terlihat (svh = dikurangi toolbar browser).
Laptop & layar lebar (rasio > 3:2) dan tablet standar TIDAK berubah. Angka: kotak ~186 px, menumpang 110 px ke hero. */
@media (min-width: 1240px) and (max-aspect-ratio: 3/2) {
.mainSlider, .mainSlider .slide, .mainSlider .slide .img--holder {
height: clamp(620px, calc(100vh - 96px), 900px) !important;
height: clamp(620px, calc(100svh - 96px), 900px) !important;
min-height: 0 !important;
}
}
/* ---------- header HP/tablet: kotak cari yang tertutup tidak boleh menangkap ketukan (review M0a) ----------
Template menaruh kotak cari fixed + opacity 0 (top 34 px di HP), jadi strip 28 px di bawah header "mati": remah roti
dan sub-nav lengket tidak bisa diketuk, keyboard HP malah terbuka. Saat dibuka, bundle.js memberi .active
(z-index 6 + opacity 1 dari style.css). */
@media (max-width: 1024px) {
#tt-header .tt-obj.tt-obj-search:not(.active) .tt-dropdown-menu { visibility: hidden; pointer-events: none; }
}
/* ---------- menu HP: butir halaman yang sedang dibuka + ikon menu emas (bukan merah template) ---------- */
.panel-menu ul li.active > a, .panel-menu ul li.active > a span { color: var(--ho-gold) !important; }
#tt-header .tt-menu-toggle:hover, #tt-header .tt-menu-toggle:focus { color: var(--ho-gold); }
/* pilihan bahasa: "EN · segera" (belum aktif) tampil utuh dan redup, bukan terpotong (audit M0b) */
.tt-obj-languages .tt-skinSelect-02 .SumoSelect > .optWrapper { min-width: 150px; }
.tt-obj-languages .SumoSelect > .optWrapper > .options li.opt label { overflow: visible; text-overflow: clip; white-space: nowrap; }
.tt-obj-languages .optWrapper li.opt.disabled { opacity: .5; cursor: default; }