/* ======= THEME ======= */ .ip-clients{ --grad1:#ff2947; /* merah */ --grad2:#ff7a18; /* oranye */ --text:#111827; --active:#e11d48; --tab-bg: rgba(255,255,255,.14); --tab-bg-hover: rgba(255,255,255,.22); } /* ======= BAR + TABS ======= */ .ip-clients__bar{ background: linear-gradient(135deg, var(--grad1), var(--grad2)); padding: 24px 20px; border-radius: 18px; color:#fff; } .ip-clients__title{ margin: 0 0 14px 0; font-weight:800; line-height:1.1; font-size: clamp(20px, 1.4vw + 14px, 28px); } .ip-tabs{ display:flex; gap:12px; list-style:none; padding:0; margin:0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type: x proximity; -ms-overflow-style: none; } .ip-tabs::-webkit-scrollbar{ width:0; height:0; } .ip-tab{ background: var(--tab-bg); color:#fff; border-radius:14px; padding:14px 18px; cursor:pointer; transition:.2s ease; outline:0; display:inline-flex; flex-direction:column; align-items:flex-start; white-space:nowrap; flex:0 0 auto; scroll-snap-align:start; } .ip-tab:hover{ background: var(--tab-bg-hover); } .ip-tab.is-active{ background:#fff; color:var(--active); box-shadow:0 8px 24px rgba(0,0,0,.08); } .ip-tab__title{ font-weight:700; line-height:1.1; } .ip-tab__count{ font-size:12px; opacity:.9; font-weight:500; } /* ======= PANELS ======= */ .ip-panels{ padding: 24px 0; } .ip-panel{ display:none; } .ip-panel.is-active{ display:block; } .ip-panel[hidden]{ display:none !important; } .ip-panel__grid{ display:grid; gap:24px; grid-template-columns: 1fr; } @media (min-width: 900px){ .ip-panel__grid{ grid-template-columns: 0.9fr 1.4fr; } } .ip-panel__right img{ width:100%; height:100%; max-height:420px; object-fit:cover; border-radius:14px; display:block; box-shadow:0 12px 30px rgba(0,0,0,.08); } /* ======= SUB-BAGIAN (dipakai semua tab) ======= */ .ip-subgroup{ margin-bottom: 28px; } .ip-subhead{ display:flex; align-items:baseline; justify-content:space-between; padding-bottom:6px; margin-bottom:12px; border-bottom:1px solid #e5e7eb; } .ip-subhead h5{ margin:0; font-weight:800; color:var(--text); font-size: clamp(18px, 1vw + 14px, 24px); letter-spacing:-0.01em; } .ip-subcount{ color:#9ca3af; font-weight:600; font-size:14px; } .ip-list{ margin:0; padding-left:18px; color:var(--text); } .ip-list--plain{ list-style: none; padding-left:0; } .ip-list--plain li{ margin:4px 0; } .ip-list--wrap{ list-style:none; padding-left:0; margin:0; display:flex; flex-wrap:wrap; gap:4px 12px; } .ip-list--wrap li{ white-space:nowrap; } (function(){ // Init semua instance .ip-clients (front-end & editor Elementor) function initScope(scope){ (scope || document).querySelectorAll('.ip-clients').forEach(function(root){ if (root.dataset.ipReady === '1') return; root.dataset.ipReady = '1'; var tabs = root.querySelectorAll('.ip-tab'); var panels = root.querySelectorAll('.ip-panel'); function activate(id){ tabs.forEach(function(t){ var on = t.getAttribute('data-target') === id; t.classList.toggle('is-active', on); t.setAttribute('aria-selected', on ? 'true' : 'false'); }); panels.forEach(function(p){ var on = p.id === id; p.classList.toggle('is-active', on); if(on){ p.removeAttribute('hidden'); } else { p.setAttribute('hidden',''); } }); if (history.replaceState) history.replaceState(null,'','#'+id); } // Delegasi click + keyboard root.addEventListener('click', function(e){ var tab = e.target.closest('.ip-tab'); if (!tab || !root.contains(tab)) return; activate(tab.getAttribute('data-target')); }); root.addEventListener('keydown', function(e){ var tab = e.target.closest('.ip-tab'); if (!tab || !root.contains(tab)) return; if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); activate(tab.getAttribute('data-target')); } }); // Initial var hashId = (location.hash||'').replace('#',''); var defaultId = (root.querySelector('.ip-tab.is-active')||tabs[0])?.getAttribute('data-target'); if (hashId && root.querySelector('#'+hashId)) activate(hashId); else activate(defaultId); }); } // DOM Ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', function(){ initScope(document); }); } else { initScope(document); } // Elementor editor hooks if (window.elementorFrontend && window.elementorFrontend.hooks) { window.elementorFrontend.hooks.addAction('frontend/element_ready/global', function($scope){ initScope($scope && $scope[0] ? $scope[0] : document); }); } })();