/* ============================================ SISTEM SUNYI — TOP TOOLS BAR (STICKY + SWIPE) Pola diambil dari Orbit Menu (terbukti bekerja) ============================================ */ .ss-top-tools { width: 100%; background: #fff; border-bottom: 1px solid rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 999; } /* ================================ CONTAINER HORIZONTAL SCROLL ================================ */ .ss-top-tools-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: flex-start; /* MOBILE DEFAULT */ gap: 20px; padding: 10px 14px 8px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.25) transparent; } /* SCROLLBAR (ANDROID / DESKTOP) */ .ss-top-tools-inner::-webkit-scrollbar { height: 4px; } .ss-top-tools-inner::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.25); border-radius: 4px; } /* ================================ ITEM MENU ================================ */ .ss-tool-link { flex: 0 0 auto; font-family: "Lato", sans-serif; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #444; text-decoration: none; padding: 2px 2px 6px; position: relative; white-space: nowrap; scroll-snap-align: start; opacity: 0.85; transition: opacity .22s ease, color .22s ease; } .ss-tool-link:hover, .ss-tool-link:focus-visible { opacity: 1; color: #000; outline: none; } /* GARIS BAWAH */ .ss-tool-link::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0%; height: 1px; background: #000; transform: translateX(-50%); transition: width 0.25s ease; } .ss-tool-link:hover::after { width: 100%; } /* ================================ DESKTOP — CENTER MENU ================================ */ @media (min-width: 768px) { .ss-top-tools-inner { justify-content: center; } } /* ================================ RESPONSIVE FONT ================================ */ @media (max-width: 900px) { .ss-tool-link { font-size: 12.5px; } } @media (max-width: 640px) { .ss-tool-link { font-size: 12px; } }