.elementor-kit-7{--e-global-color-primary:#FFFCF4;--e-global-color-secondary:#023820;--e-global-color-text:#023820;--e-global-color-accent:#FFCC4B;--e-global-color-ee40560:#644536;--e-global-color-8e4b3b9:#BCCC65;--e-global-color-43c9e9e:#FFFFFF;--e-global-typography-primary-font-family:"boldonse";--e-global-typography-primary-font-size:45px;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-line-height:1.8em;--e-global-typography-primary-letter-spacing:0.08em;--e-global-typography-primary-word-spacing:0.1em;--e-global-typography-secondary-font-family:"boldonse";--e-global-typography-secondary-font-size:20px;--e-global-typography-secondary-font-weight:500;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-line-height:1.8em;--e-global-typography-secondary-letter-spacing:0.08em;--e-global-typography-secondary-word-spacing:0.2em;--e-global-typography-text-font-family:"Synonym Reguler";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"boldonse";--e-global-typography-accent-font-size:23px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-text-decoration:none;--e-global-typography-accent-line-height:1em;--e-global-typography-accent-letter-spacing:0.07em;--e-global-typography-accent-word-spacing:0.1em;--e-global-typography-bf30d6d-font-family:"Chillax Bold";--e-global-typography-bf30d6d-text-transform:uppercase;--e-global-typography-205b55e-font-family:"Chillax Semibold";--e-global-typography-9cd3e94-font-family:"Synonym Reguler";--e-global-typography-ae80d9c-font-family:"Synonym Semibold";--e-global-typography-973611c-font-family:"boldonse";--e-global-typography-973611c-font-weight:600;--e-global-typography-973611c-text-transform:uppercase;background-color:var( --e-global-color-primary );color:#023820;font-family:"boldonse", Sans-serif;font-weight:600;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 h1{color:#023820;font-family:"boldonse", Sans-serif;font-size:70px;font-weight:600;text-transform:uppercase;line-height:100px;letter-spacing:1.5px;word-spacing:5px;}.elementor-kit-7 h2{color:#023820;font-family:"boldonse", Sans-serif;font-size:20px;font-weight:600;line-height:1.8em;letter-spacing:0.08em;word-spacing:0.1px;}.elementor-kit-7 h3{color:#023820;font-family:"Synonym Semibold", Sans-serif;font-size:20px;}.elementor-kit-7 h4{color:#023820;font-size:45px;font-weight:100;line-height:85px;letter-spacing:2.5px;word-spacing:5px;}.elementor-kit-7 h5{color:#023820;font-family:"Synonym Semibold", Sans-serif;font-size:14px;}.elementor-kit-7 h6{color:#023820;font-family:"Synonym Semibold", Sans-serif;font-size:15px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1366px){.elementor-kit-7 h1{font-size:45px;line-height:1.8em;}}@media(max-width:1100px){.elementor-kit-7{--e-global-typography-primary-font-size:35px;--e-global-typography-primary-line-height:1.7em;--e-global-typography-primary-letter-spacing:0.07em;--e-global-typography-primary-word-spacing:0.1em;--e-global-typography-secondary-font-size:18px;--e-global-typography-secondary-line-height:1.7em;--e-global-typography-secondary-letter-spacing:0.07em;--e-global-typography-secondary-word-spacing:0.1em;--e-global-typography-text-font-size:17px;--e-global-typography-accent-font-size:19px;--e-global-typography-accent-line-height:1.7em;--e-global-typography-accent-letter-spacing:0.07em;--e-global-typography-accent-word-spacing:0.1em;}.elementor-kit-7 h1{font-size:35px;line-height:1.7em;letter-spacing:0.07px;word-spacing:0.1em;}.elementor-kit-7 h2{font-size:18px;line-height:1.7em;letter-spacing:0.07em;word-spacing:0.1em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:600px){.elementor-kit-7{--e-global-typography-primary-font-size:28px;--e-global-typography-primary-line-height:1.7em;--e-global-typography-primary-letter-spacing:0.07em;--e-global-typography-primary-word-spacing:0.1em;--e-global-typography-secondary-font-size:16px;--e-global-typography-secondary-line-height:1.7em;--e-global-typography-secondary-letter-spacing:0.07em;--e-global-typography-secondary-word-spacing:0.1em;--e-global-typography-text-font-size:15px;--e-global-typography-accent-font-size:16px;--e-global-typography-accent-line-height:1.7em;--e-global-typography-accent-letter-spacing:0.07em;--e-global-typography-accent-word-spacing:0.1em;}.elementor-kit-7 h1{font-size:28px;line-height:1.7em;letter-spacing:0.07em;word-spacing:0.1em;}.elementor-kit-7 h2{font-size:16px;line-height:1.7em;letter-spacing:0.07em;word-spacing:0.1em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ===== DESKTOP HEADER =====
UPDATE: blok ini ditulis ulang supaya menu tidak wrap di ukuran laptop.
Penyebab lama: .header-menu-col dipatok absolute di left:50% + padding
150/100px, jadi lebar maksimal menu cuma (50% layar - 250px). Dengan
width: max-content, menu selalu selebar isinya dan tetap di tengah. */
.main-header-wrap {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
width: 100% !important;
padding: 16px 40px !important;
}
.header-logo-col {
width: auto !important;
flex-shrink: 0 !important;
}
.header-logo-col .elementor-widget-theme-site-logo img {
max-width: 110px !important;
height: auto !important;
}
.header-menu-col {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: max-content !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
justify-content: center !important;
}
.main-header-wrap .header-menu-col .jkit-menu,
.header-menu-col > nav > ul,
.header-menu-col > ul {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
white-space: nowrap !important;
}
.header-menu-col a,
.header-contact-col a {
font-family: 'Synonym', sans-serif !important;
font-weight: 600 !important;
font-size: 15px !important;
letter-spacing: 1px !important;
color: #023820 !important;
}
/* Ukuran laptop: font & letter-spacing mengecil halus dari 15px ke 13px
(mulai mengecil di bawah ~1430px, mentok 13px di sekitar 1240px ke bawah).
Selector dibuat lebih spesifik supaya menang dari aturan
".jkit-menu-wrapper .jkit-menu li a" yang juga kena ke menu desktop. */
.main-header-wrap .header-menu-col .jkit-menu > li > a,
.main-header-wrap .header-menu-col .jkit-menu > li > a span,
.main-header-wrap .header-contact-col a {
white-space: nowrap !important;
font-size: clamp(13px, 1.05vw, 15px) !important;
letter-spacing: clamp(0.5px, 0.07vw, 1px) !important;
}
.header-menu-col ul ul {
background-color: #ffffff !important;
}
.header-menu-col ul ul a {
color: #023820 !important;
}
.header-menu-col ul ul li:hover,
.header-menu-col ul ul li:hover > a {
background-color: #023820 !important;
color: #FAF6EC !important;
}
/* ===== DROPDOWN DESKTOP: sudut membulat 15px =====
Radius juga dipasang ke item pertama & terakhir (li dan a) supaya
background hover hijau ikut melengkung. Tidak pakai overflow:hidden
karena akan memotong panel produk yang keluar ke samping. */
.main-header-wrap .header-menu-col ul ul {
border-radius: 15px !important;
}
.main-header-wrap .header-menu-col ul ul li:first-child,
.main-header-wrap .header-menu-col ul ul li:first-child > a {
border-top-left-radius: 15px !important;
border-top-right-radius: 15px !important;
}
.main-header-wrap .header-menu-col ul ul li:last-child,
.main-header-wrap .header-menu-col ul ul li:last-child > a {
border-bottom-left-radius: 15px !important;
border-bottom-right-radius: 15px !important;
}
/* Panel level 3 (5 produk): sudut kiri-atas lurus supaya menyambung
rapi ke panel SABOOT di sebelah kirinya */
.main-header-wrap .header-menu-col ul ul ul {
border-top-left-radius: 0 !important;
}
.main-header-wrap .header-menu-col ul ul ul li:first-child,
.main-header-wrap .header-menu-col ul ul ul li:first-child > a {
border-top-left-radius: 0 !important;
}
/* Saat panel produk terbuka, sisi kanan panel SABOOT dibuat lurus
(menempel ke panel produk). Kalau yang di-hover SABOOT Portal,
kondisi ini tidak aktif dan semua sudut tetap 15px. */
.main-header-wrap .header-menu-col ul ul:has(> li:hover > ul) {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.main-header-wrap .header-menu-col ul ul:has(> li:hover > ul) > li:first-child,
.main-header-wrap .header-menu-col ul ul:has(> li:hover > ul) > li:first-child > a {
border-top-right-radius: 0 !important;
}
.main-header-wrap .header-menu-col ul ul:has(> li:hover > ul) > li:last-child,
.main-header-wrap .header-menu-col ul ul:has(> li:hover > ul) > li:last-child > a {
border-bottom-right-radius: 0 !important;
}
.header-contact-col {
width: auto !important;
flex-shrink: 0 !important;
}
/* ===== MOBILE & TABLET HEADER ===== */
.mobile-header-wrap {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
padding: 16px 48px !important;
}
/* --- Logo (center, absolute) --- */
.mobile-header-wrap .elementor-widget-theme-site-logo {
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
}
.mobile-header-wrap .elementor-widget-theme-site-logo img {
max-width: clamp(80px, 12vw, 100px) !important;
height: auto !important;
}
/* --- Hamburger button --- */
.mobile-header-wrap .jkit-nav-menu-toggle,
.mobile-header-wrap .jkit-hamburger-icon,
.mobile-header-wrap button,
.mobile-header-wrap [class*="toggle"] {
color: #023820 !important;
font-size: clamp(18px, 4vw, 24px) !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
}
.mobile-header-wrap .jkit-hamburger-menu svg,
.mobile-header-wrap [aria-label="open-menu"] svg {
width: clamp(18px, 4vw, 24px) !important;
height: clamp(18px, 4vw, 24px) !important;
}
.mobile-header-wrap .jkit-nav-menu-toggle:hover,
.mobile-header-wrap .jkit-nav-menu-toggle:focus,
.mobile-header-wrap .jkit-nav-menu-toggle:active,
.mobile-header-wrap button:hover,
.mobile-header-wrap button:focus,
.mobile-header-wrap button:active {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* --- Close (X) button --- */
.mobile-header-wrap [aria-label="close-menu"],
.jkit-menu-wrapper [aria-label="close-menu"] {
color: #023820 !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
font-size: 20px !important;
width: 32px !important;
height: 32px !important;
}
.mobile-header-wrap [aria-label="close-menu"] svg,
.jkit-menu-wrapper [aria-label="close-menu"] svg {
width: 20px !important;
height: 20px !important;
}
.mobile-header-wrap [aria-label="close-menu"]:hover,
.mobile-header-wrap [aria-label="close-menu"]:focus,
.mobile-header-wrap [aria-label="close-menu"]:active {
color: #023820 !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
}
/* --- Menu list wrapper: matikan gap & margin bawaan tema --- */
.jkit-menu-wrapper .jkit-menu,
.jkit-menu-wrapper .jkit-menu ul {
gap: 0 !important;
row-gap: 0 !important;
}
.jkit-menu-wrapper .jkit-menu li,
.jkit-menu-wrapper .jkit-menu li a {
margin: 0 !important;
line-height: 1.2 !important;
}
/* --- Menu text: font-size & letter-spacing disamakan dengan desktop --- */
.jkit-menu-wrapper .jkit-menu li a,
.jkit-menu-wrapper .jkit-menu li a span {
font-family: 'Synonym', sans-serif !important;
font-weight: 600 !important;
font-size: 15px !important;
letter-spacing: 1px !important;
text-transform: none !important;
color: #023820 !important;
text-align: left !important;
}
.jkit-menu-wrapper .jkit-menu li.active > a,
.jkit-menu-wrapper .jkit-menu li > a:after,
.jkit-menu-wrapper .jkit-menu li.jkit-menu-item-active > a {
border-bottom: none !important;
box-shadow: none !important;
}
/* --- Spacing antar item --- */
.jkit-menu-wrapper .jkit-menu > li {
padding-top: 4px !important;
padding-bottom: 4px !important;
}
.jkit-menu-wrapper .jkit-menu li ul li {
padding-top: 3px !important;
padding-bottom: 3px !important;
}
/* --- Submenu (SABOOT, SABOOT Portal, 5 produk): tidak bold --- */
.jkit-menu-wrapper .jkit-menu li ul li a,
.jkit-menu-wrapper .jkit-menu li ul li a span {
font-weight: 400 !important;
text-align: left !important;
justify-content: flex-start !important;
color: #023820 !important;
}
/* --- Level ke-3 (daftar 5 produk) tetap warna coklat --- */
.jkit-menu-wrapper .jkit-menu li ul ul li a,
.jkit-menu-wrapper .jkit-menu li ul ul li a span {
color: #644536 !important;
text-align: left !important;
justify-content: flex-start !important;
}
/* --- WhatsApp icon --- */
.mobile-header-wrap #wa-mobile-header {
font-size: clamp(22px, 5vw, 28px) !important;
}
.mobile-header-wrap #wa-mobile-header i,
.mobile-header-wrap #wa-mobile-header svg {
width: clamp(22px, 5vw, 28px) !important;
height: clamp(22px, 5vw, 28px) !important;
color: #023820 !important;
fill: #023820 !important;
}
.mobile-header-wrap #wa-mobile-header:hover i,
.mobile-header-wrap #wa-mobile-header:hover svg {
color: #FFCC4B !important;
fill: #FFCC4B !important;
}
/* ===== VISIBILITY SWITCH ===== */
@media (min-width: 1101px) {
.mobile-header-wrap { display: none !important; }
}
@media (max-width: 1100px) {
.main-header-wrap { display: none !important; }
.mobile-header-wrap { display: flex !important; }
}
@media (max-width: 767px) {
.mobile-header-wrap { padding: 12px 32px !important; }
}
/* --- Chevron/panah dropdown: hilangkan border --- */
.jkit-menu-wrapper .jkit-menu li .jkit-menu-arrow,
.jkit-menu-wrapper .jkit-menu li .jkit-menu-toggle,
.jkit-menu-wrapper .jkit-menu li [class*="arrow"],
.jkit-menu-wrapper .jkit-menu li [class*="chevron"],
.jkit-menu-wrapper .jkit-menu li i,
.jkit-menu-wrapper .jkit-menu li svg {
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
}
.jkit-menu-wrapper .jkit-menu li [class*="arrow"]:hover,
.jkit-menu-wrapper .jkit-menu li [class*="arrow"]:focus,
.jkit-menu-wrapper .jkit-menu li [class*="arrow"]:active,
.jkit-menu-wrapper .jkit-menu li i:focus,
.jkit-menu-wrapper .jkit-menu li svg:focus {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* ===== FIX STICKY: body overflow-x hidden mematikan position:sticky ===== */
body {
overflow-x: clip !important;
}
/* ===== FIXED HEADER (fallback karena position:sticky gagal) ===== */
.main-header-wrap,
.mobile-header-wrap {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 9999 !important;
background-color: #FFFCF4 !important;
box-shadow: none !important;
}
.card-with-overflow-image {
position: relative !important;
}
@media (min-width: 1101px) {
.phone-overflow-bottom {
position: relative !important;
top: 45px !important;
margin-bottom: 0 !important;
}
}
@media (max-width: 1100px) {
.phone-overflow-bottom {
position: relative !important;
top: 0 !important;
margin-bottom: 0 !important;
}
}
/* ============================================================
ARUNIKA NATURA — FOOTER (Elementor) v12
Tempel di: Site Settings > Custom Code > Additional CSS
(taruh di BAWAH CSS header; ganti blok footer v11 dengan ini)
PERUBAHAN v12 (koreksi atas v11 yang SALAH):
- v11 memaksa arn-footer-content jadi row di laptop (1101-1366px).
Ini KELIRU — arn-footer-content memang SENGAJA diset column +
justify-content:space-between + align-items:flex-end lewat panel
Elementor (bukan bug), supaya menu di atas & logo nempel pojok
kanan-bawah. v11 dibatalkan.
- Fix yang benar: arn-footer-content TIDAK disentuh (tetap column
sesuai panel). Offset kiri sebelumnya disebabkan .arn-footer-menu
yang diberi width:auto (logika row) padahal parent-nya column
dengan align-items:flex-end, sehingga blok menu ikut menyusut &
terdorong ke kanan. Sekarang arn-footer-menu dibuat stretch 100%
supaya tidak ikut terdorong; arn-footer-brand tetap auto width
& align-self:flex-end supaya logo tetap nempel kanan seperti
desain aslinya.
PERUBAHAN v10 (tetap ada di file ini):
- Laptop : teks icon list +1px (15-17px -> 16-18px, fluid)
- Laptop : ikon .arn-footer-contact-icons 15px -> 20px
- Tablet : ikon .arn-footer-contact-icons 16px -> 19px
- bagian 8: gaya link untuk teks footer yang sudah diberi link
============================================================ */
/* ============================================================
1. EFEK SOCIAL ICONS (tidak berubah)
============================================================ */
.arn-footer-social .elementor-social-icon {
background-color: transparent !important;
color: #FFFCF4 !important;
transition: opacity 0.25s ease;
}
.arn-footer-social .elementor-social-icon i {
color: #FFFCF4 !important;
}
.arn-footer-social .elementor-social-icon svg {
fill: #FFFCF4 !important;
color: #FFFCF4 !important;
}
.arn-footer-social .elementor-social-icon:hover,
.arn-footer-social .elementor-social-icon:focus-visible {
background-color: transparent !important;
color: #FFFCF4 !important;
opacity: 0.7;
}
.arn-footer-social .elementor-social-icon:hover i {
color: #FFFCF4 !important;
}
.arn-footer-social .elementor-social-icon:hover svg {
fill: #FFFCF4 !important;
}
/* ============================================================
2. LOGO BRAND — diperbesar di SEMUA device (tidak berubah)
============================================================ */
.arn-footer-brand img {
width: clamp(360px, 26vw, 520px) !important;
max-width: 100% !important;
height: auto !important;
}
/* ============================================================
3. RESET PADDING KIRI-KANAN saja (tidak berubah)
============================================================ */
.arn-footer-menu-col > .e-con {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ============================================================
4. DESKTOP (> 1366px) (tidak berubah)
============================================================ */
@media (min-width: 1367px) {
.arn-footer-menu .elementor-heading-title {
font-size: 17px !important;
}
.arn-footer-menu .elementor-icon-list-icon,
.arn-footer-menu .elementor-icon-list-icon i {
font-size: 9px !important;
}
.arn-footer-menu .elementor-icon-list-icon svg {
width: 9px !important;
height: 9px !important;
}
.arn-footer-menu .elementor-icon-list-text,
.arn-footer-menu .elementor-widget-text-editor,
.arn-footer-menu .elementor-widget-text-editor p {
font-size: 17px !important;
}
.arn-footer-menu .arn-footer-contact-icons .elementor-icon-list-icon,
.arn-footer-menu .arn-footer-contact-icons .elementor-icon-list-icon i {
font-size: 15px !important;
}
.arn-footer-menu .arn-footer-contact-icons .elementor-icon-list-icon svg {
width: 15px !important;
height: 15px !important;
}
}
/* ============================================================
5. LAPTOP (1101px - 1366px)
Teks icon list +1px, ikon kontak jadi 20px
============================================================ */
@media (min-width: 1101px) and (max-width: 1366px) {
.arn-footer {
padding-left: clamp(40px, 5vw, 72px) !important;
padding-right: clamp(40px, 5vw, 72px) !important;
}
/* PENTING: arn-footer-content SENGAJA diset column + justify-content:
space-between + align-items:flex-end lewat panel Elementor (bukan
dari CSS kita) — itu yang membuat menu di atas & logo nempel
pojok kanan-bawah. JANGAN diubah flex-direction-nya di sini.
Penyebab offset sebelumnya: align-items:flex-end di parent column
berlaku di sumbu horizontal, jadi anak yang lebarnya tidak penuh
(width:auto) otomatis didorong ke kanan. Fix: buat blok menu
stretch 100% supaya tidak ikut terdorong, sementara blok logo
dibiarkan auto width supaya tetap nempel kanan sesuai desain. */
.arn-footer-menu {
align-self: stretch !important;
width: 100% !important;
max-width: 100% !important;
flex: none !important;
min-width: 0 !important;
}
.arn-footer-menu-row {
display: flex !important;
flex-wrap: nowrap !important;
width: 100% !important;
gap: clamp(20px, 2.6vw, 40px) !important;
}
.arn-footer-menu-col {
flex: 1 1 0 !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
}
.arn-footer-brand {
align-self: flex-end !important;
flex: none !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
}
.arn-footer-brand img {
width: clamp(280px, 28vw, 400px) !important;
}
.arn-footer-menu .elementor-icon-list-icon,
.arn-footer-menu .elementor-icon-list-icon i {
font-size: 9px !important;
}
.arn-footer-menu .elementor-icon-list-icon svg {
width: 9px !important;
height: 9px !important;
}
.arn-footer-menu .elementor-icon-list-text,
.arn-footer-menu .elementor-widget-text-editor,
.arn-footer-menu .elementor-widget-text-editor p {
font-size: clamp(16px, calc(1.15vw + 1px), 18px) !important;
}
.arn-footer-menu .arn-footer-contact-icons .elementor-icon-list-icon,
.arn-footer-menu .arn-footer-contact-icons .elementor-icon-list-icon i {
font-size: 20px !important;
}
.arn-footer-menu .arn-footer-contact-icons .elementor-icon-list-icon svg {
width: 20px !important;
height: 20px !important;
}
}
/* ============================================================
6. TABLET (<= 1100px)
Ikon kontak 16px -> 19px
============================================================ */
@media (max-width: 1100px) {
.arn-footer {
padding: 48px 40px 28px !important;
}
.arn-footer-content {
--flex-direction: column !important;
--align-items: stretch !important;
--row-gap: 40px !important;
--column-gap: 0px !important;
}
.arn-footer-content.e-con-full,
.arn-footer-content.e-con-boxed > .e-con-inner {
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: 40px !important;
}
.arn-footer-content > .e-con,
.arn-footer-content > .e-con-inner > .e-con {
flex: 0 0 auto !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.arn-footer-menu-row {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 36px 32px !important;
align-items: start !important;
}
.arn-footer-menu-col {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}
.arn-footer-menu-col:last-child {
grid-column: 1 / -1;
}
.arn-footer-menu .elementor-heading-title {
font-size: 15px !important;
}
.arn-footer-menu .elementor-icon-list-icon,
.arn-footer-menu .elementor-icon-list-icon i {
font-size: 10px !important;
}
.arn-footer-menu .elementor-icon-list-icon svg {
width: 10px !important;
height: 10px !important;
}
.arn-footer-menu .elementor-icon-list-text,
.arn-footer-menu .elementor-widget-text-editor,
.arn-footer-menu .elementor-widget-text-editor p {
font-size: 17px !important;
}
.arn-footer-menu .arn-footer-contact-icons .elementor-icon-list-icon,
.arn-footer-menu .arn-footer-contact-icons .elementor-icon-list-icon i {
font-size: 19px !important;
}
.arn-footer-menu .arn-footer-contact-icons .elementor-icon-list-icon svg {
width: 19px !important;
height: 19px !important;
}
.arn-footer-brand {
--align-items: flex-start !important;
--justify-content: flex-start !important;
}
.arn-footer-brand .elementor-widget-image {
text-align: left !important;
}
.arn-footer-brand img {
width: 380px !important;
}
.arn-footer-copy {
--align-items: flex-start !important;
--justify-content: flex-start !important;
}
.arn-footer-copy .elementor-widget-text-editor,
.arn-footer-copy .elementor-widget-container,
.arn-footer-copy p {
text-align: left !important;
}
}
@media (min-width: 901px) and (max-width: 1100px) {
.arn-footer-menu-row {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
column-gap: 32px !important;
}
.arn-footer-menu-col:last-child {
grid-column: auto;
}
}
/* ============================================================
7. MOBILE (<= 767px) (tidak berubah)
============================================================ */
@media (max-width: 767px) {
.arn-footer {
padding: 40px 20px 24px !important;
}
.arn-footer-social-row {
--flex-direction: column !important;
--align-items: flex-start !important;
--row-gap: 16px !important;
}
.arn-footer-social-row .elementor-heading-title {
font-size: 14px !important;
}
.arn-footer-social {
align-self: flex-start !important;
}
.arn-footer-social .elementor-widget-container,
.arn-footer-social .elementor-social-icons-wrapper {
text-align: left !important;
justify-content: flex-start !important;
}
.arn-footer-content {
--row-gap: 32px !important;
}
.arn-footer-content.e-con-full,
.arn-footer-content.e-con-boxed > .e-con-inner {
gap: 32px !important;
}
.arn-footer-menu-row {
grid-template-columns: minmax(0, 1fr) !important;
gap: 32px !important;
}
.arn-footer-menu-col:last-child {
grid-column: auto;
}
.arn-footer-menu .elementor-heading-title {
font-size: 14px !important;
}
.arn-footer-menu .elementor-icon-list-icon,
.arn-footer-menu .elementor-icon-list-icon i {
font-size: 9px !important;
}
.arn-footer-menu .elementor-icon-list-icon svg {
width: 9px !important;
height: 9px !important;
}
.arn-footer-menu .elementor-icon-list-text,
.arn-footer-menu .elementor-widget-text-editor,
.arn-footer-menu .elementor-widget-text-editor p {
font-size: 15px !important;
}
.arn-footer-menu .arn-footer-contact-icons .elementor-icon-list-icon,
.arn-footer-menu .arn-footer-contact-icons .elementor-icon-list-icon i {
font-size: 15px !important;
}
.arn-footer-menu .arn-footer-contact-icons .elementor-icon-list-icon svg {
width: 15px !important;
height: 15px !important;
}
.arn-footer-brand img {
width: 280px !important;
}
.arn-footer-copy .elementor-widget-text-editor,
.arn-footer-copy .elementor-widget-text-editor p,
.arn-footer-copy p {
font-size: 13px !important;
}
}
/* ============================================================
8. GAYA LINK TEKS FOOTER (baru)
Setelah teks diberi link, warna tetap krem tanpa garis bawah,
dan memudar halus saat di-hover (sama seperti social icons).
Hapus bagian ini kalau tampilan link bawaan sudah cukup.
============================================================ */
.arn-footer-menu .elementor-icon-list-item > a,
.arn-footer-menu .elementor-icon-list-item > a .elementor-icon-list-text {
color: #FFFCF4 !important;
text-decoration: none !important;
transition: opacity 0.25s ease;
}
.arn-footer-menu .elementor-icon-list-item > a:hover {
opacity: 0.7;
}
/* ============================================================
ARUNIKA NATURA — POST NAVIGATION (Previous / Next) v2
Tempel di: Site Settings > Custom Code > Additional CSS
(boleh disambung di bawah CSS header/footer yang sudah ada)
UPDATE v2: class DIKONFIRMASI lewat Inspect Element, ternyata
berbeda dari dugaan awal. Struktur asli:
Garis pemisah tengah itu DIV terpisah (.elementor-post-navigation__separator),
BUKAN border-right seperti dugaan awal.
============================================================ */
/* Jarak dari konten artikel di atasnya + garis pembatas atas */
.elementor-post-navigation {
margin-top: 48px !important;
padding-top: 32px !important;
border-top: 1px solid rgba(2, 56, 32, 0.15) !important;
}
/* Blok Previous & Next: jarak dari tepi halaman dan dari garis
pemisah di tengah, supaya teks tidak nempel */
.elementor-post-navigation__prev,
.elementor-post-navigation__next {
padding: 4px 32px !important;
}
/* Garis pemisah tengah: dibuat tipis & pudar (elemen div asli,
bukan border) */
.elementor-post-navigation__separator {
background-color: rgba(2, 56, 32, 0.15) !important;
}
/* Jarak antara label PREVIOUS/NEXT dan judul artikel di bawahnya */
.post-navigation-prev-label,
.post-navigation-next-label {
display: inline-block !important;
margin-bottom: 10px !important;
letter-spacing: 1px !important;
}
/* Judul artikel: line-height dilonggarkan + siap-siap transisi hover */
.post-navigation-prev-title,
.post-navigation-next-title {
display: inline-block !important;
line-height: 1.5 !important;
transition: color 0.2s ease !important;
}
/* Hover warna kuning, KHUSUS perangkat dengan mouse (PC/laptop).
(hover: hover) + (pointer: fine) memastikan ini tidak aktif di
layar sentuh (tablet/mobile). Dipasang di link pembungkus (a)
supaya area hover mencakup seluruh blok, bukan cuma teks judul. */
@media (hover: hover) and (pointer: fine) {
.elementor-post-navigation__link-prev:hover .post-navigation-prev-title,
.elementor-post-navigation__link-next:hover .post-navigation-next-title,
.post-navigation-prev-title:hover,
.post-navigation-next-title:hover {
color: #FFCC4B !important;
}
}
/* Mobile: hilangkan garis vertikal tengah, ganti jadi garis
horizontal antar blok supaya tidak sempit */
@media (max-width: 767px) {
.elementor-post-navigation {
flex-direction: column !important;
}
.elementor-post-navigation__separator-wrapper {
display: none !important;
}
.elementor-post-navigation__prev {
border-bottom: 1px solid rgba(2, 56, 32, 0.15) !important;
padding: 0 0 20px 0 !important;
margin-bottom: 20px !important;
}
.elementor-post-navigation__next {
padding: 0 !important;
}
}
/* ============================================================
ARUNIKA NATURA — KONTEN ARTIKEL (Single Post)
Tempel di: Site Settings > Custom Code > Additional CSS
CATATAN: .elementor-kit-7 menyasar class bawaan widget Elementor Pro
"Post Content" (.elementor-widget-theme-post-content). Kalau
widget yang dipakai berbeda, CSS ini tidak berpengaruh —
screenshot Inspect Element diperlukan untuk konfirmasi.
============================================================ */
/* --- Numbered list (1-4): jarak antar langkah --- */
.elementor-widget-theme-post-content ol {
margin: 24px 0 !important;
padding-left: 26px !important;
}
.elementor-widget-theme-post-content ol li {
margin-bottom: 28px !important;
padding-left: 6px !important;
}
.elementor-widget-theme-post-content ol li:last-child {
margin-bottom: 0 !important;
}
/* Judul tiap langkah (teks bold di awal li): tidak diberi margin
tambahan, dibiarkan mengikuti jarak alami dari (biasanya untuk caption) */
.elementor-widget-theme-post-content figure {
margin: 40px 0 !important;
}
.elementor-widget-theme-post-content figure img {
margin: 0 auto !important;
}
.elementor-widget-theme-post-content figcaption {
text-align: center !important;
font-size: 13px !important;
color: #644536 !important;
margin-top: 10px !important;
}
/* ============================================================
FEATURED IMAGE (gambar utama di atas artikel)
Tempel di: Site Settings > Custom Code > Additional CSS
RIWAYAT: ada CSS LAIN dengan .elementor-kit-7 dua-class
".single-post-wrapper .elementor-widget-theme-post-featured-image img"
yang otomatis menang spesifisitas dari fix kita sebelumnya kalau
cuma satu class — makanya .elementor-kit-7 di bawah tetap pakai [src]/[class]
(trik naikkan spesifisitas) biar selalu menang, berapa pun urutan
penempelannya.
FIX v4 (REVISI dari v3, meniru referensi Kompas.com): kotak pendek
400px/320px/240px bikin rasio terlalu ekstrem lebar (~2.5-2.7:1),
jadi potongan terasa agresif. Diganti pakai aspect-ratio 3:2 (kira-
kira rasio kotak foto di referensi), supaya tinggi kotak otomatis
mengikuti lebar secara proporsional — tidak perlu lagi angka
berbeda tiap breakpoint, rasio konsisten di semua ukuran layar.
object-fit: cover tetap dipakai (boleh sedikit terpotong di tepi
kalau rasio foto asli beda dari 3:2), border-radius 20px tetap di
wrapper & img. ============================================================ */
.single-post-wrapper .elementor-widget-theme-post-featured-image[class] {
width: 100% !important;
aspect-ratio: 16 / 9 !important;
height: auto !important;
min-height: 0 !important;
overflow: hidden !important;
border-radius: 20px !important;
}
.single-post-wrapper .elementor-widget-theme-post-featured-image img[src] {
object-fit: cover !important;
object-position: center center !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
border-radius: 20px !important;
}/* End custom CSS */