/* Digioto Mobile UI v1.1.3 */ .dmu-root, .dmu-mobile-header, .dmu-bottom-nav, .dmu-product-actions, .dmu-search-overlay { display: none; } /* * Perlindungan desktop: JavaScript memindahkan komponen mobile langsung ke * agar fixed positioning stabil. Search overlay harus tetap tersembunyi * pada tablet/desktop, meskipun markup-nya sudah dipindahkan dari root plugin. */ @media (min-width: 768px) { #dmu-search-overlay, .dmu-search-overlay { display: none !important; visibility: hidden !important; pointer-events: none !important; } } @media (max-width: 767.98px) { :root { --dmu-red: #ef1b2d; --dmu-ink: #101820; --dmu-muted: #667085; --dmu-line: #e8eaed; --dmu-surface: #ffffff; --dmu-soft: #f7f7f8; --dmu-header-height: 82px; --dmu-product-header-height: 62px; --dmu-bottom-height: 76px; --dmu-safe-bottom: env(safe-area-inset-bottom, 0px); } html.dmu-lock-scroll, body.dmu-lock-scroll { overflow: hidden !important; } body.dmu-mobile-enabled { padding-top: var(--dmu-header-height) !important; padding-bottom: calc(var(--dmu-bottom-height) + var(--dmu-safe-bottom) + 12px) !important; background: #fff; } body.dmu-mobile-enabled.dmu-page-product { padding-top: var(--dmu-product-header-height) !important; padding-bottom: calc(76px + var(--dmu-safe-bottom) + 18px) !important; } body.dmu-mobile-enabled.dmu-page-immersive { padding-top: 0 !important; padding-bottom: 0 !important; } body.dmu-mobile-enabled > header, body.dmu-mobile-enabled .tp-header-area, body.dmu-mobile-enabled .tp-header-area-2, body.dmu-mobile-enabled .tp-header-area-3, body.dmu-mobile-enabled .tp-header-area-4, body.dmu-mobile-enabled .tp-header-area-5, body.dmu-mobile-enabled .tp-header-main, body.dmu-mobile-enabled .tp-header-bottom, body.dmu-mobile-enabled .tp-header-top { display: none !important; } body.dmu-mobile-enabled #tp-bottom-menu-sticky, body.dmu-mobile-enabled .tp-mobile-menu { display: none !important; } body.dmu-mobile-enabled .breadcrumb__area, body.dmu-mobile-enabled .breadcrumb__area-2, body.dmu-mobile-enabled .tp-breadcrumb-area, body.dmu-mobile-enabled .page-breadcrumb { display: none !important; } .dmu-root { display: contents; } .dmu-mobile-header { position: fixed; inset: 0 0 auto; z-index: 1055; height: var(--dmu-header-height); padding: 14px 16px; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.98); border-bottom: 1px solid var(--dmu-line); box-shadow: 0 4px 18px rgba(16, 24, 40, 0.05); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } body.dmu-mobile-enabled:not(.dmu-page-product):not(.dmu-page-immersive) .dmu-standard-header { display: flex; } body.dmu-page-product .dmu-product-header { display: grid; } body.dmu-page-immersive .dmu-mobile-header, body.dmu-page-immersive .dmu-bottom-nav, body.dmu-page-immersive .dmu-product-actions { display: none !important; } .dmu-search { position: relative; display: flex; flex: 1 1 auto; min-width: 0; height: 52px; } .dmu-search input { width: 100%; height: 52px !important; padding: 0 50px 0 16px !important; border: 1px solid #d9dde3 !important; border-radius: 0 !important; background: #fff !important; color: var(--dmu-ink) !important; font-size: 16px !important; line-height: 52px !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; } .dmu-search input:focus { border-color: #98a2b3 !important; outline: none; } .dmu-search button { position: absolute; top: 0; right: 0; display: grid; width: 48px; height: 52px; place-items: center; color: #475467; border: 0; background: transparent; } .dmu-search button svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .dmu-head-action, .dmu-product-cart { position: relative; display: grid; flex: 0 0 43px; width: 43px; height: 48px; place-items: center; color: #202831; text-decoration: none !important; } .dmu-head-action svg, .dmu-product-cart svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } .dmu-head-action:active, .dmu-product-cart:active { transform: scale(0.95); } .dmu-badge { position: absolute; top: 0; right: -2px; display: inline-flex; min-width: 21px; height: 21px; padding: 0 5px; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 999px; background: var(--dmu-red); color: #fff; font-size: 11px; font-weight: 800; line-height: 17px; box-shadow: 0 2px 6px rgba(16, 24, 40, 0.2); } .dmu-badge[hidden] { display: none !important; } .dmu-wishlist-badge { display: none !important; } .dmu-product-header { height: var(--dmu-product-header-height); grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 8px; padding: 0 12px; color: #fff; background: #070707; border-bottom: 0; box-shadow: none; } .dmu-product-header strong { overflow: hidden; color: #fff; font-size: 17px; font-weight: 700; line-height: 1.2; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .dmu-product-back, .dmu-product-cart { display: grid; width: 48px; height: 48px; place-items: center; color: #fff; border: 0; background: transparent; } .dmu-product-back svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .dmu-product-cart .dmu-badge { border-color: #070707; } .dmu-bottom-nav { position: fixed; inset: auto 0 0; z-index: 1050; height: calc(var(--dmu-bottom-height) + var(--dmu-safe-bottom)); padding: 8px 8px calc(7px + var(--dmu-safe-bottom)); align-items: stretch; justify-content: space-around; background: rgba(255, 255, 255, 0.98); border-top: 1px solid var(--dmu-line); box-shadow: 0 -7px 24px rgba(16, 24, 40, 0.08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } body.dmu-mobile-enabled:not(.dmu-page-product):not(.dmu-page-immersive) .dmu-bottom-nav { display: flex; } .dmu-bottom-nav a { display: flex; width: 20%; min-width: 0; align-items: center; justify-content: center; flex-direction: column; gap: 3px; color: #525866; font-size: 12px; font-weight: 500; line-height: 1.2; text-decoration: none !important; -webkit-tap-highlight-color: transparent; } .dmu-bottom-nav a svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .dmu-bottom-nav a[data-dmu-section="home"] svg path, .dmu-bottom-nav a.is-active[data-dmu-section="home"] svg path { fill: currentColor; } .dmu-bottom-nav a.is-active { color: #050505; font-weight: 700; } .dmu-bottom-nav a:active { transform: translateY(1px) scale(0.97); } .dmu-product-actions { position: fixed; inset: auto 0 0; z-index: 1060; min-height: calc(72px + var(--dmu-safe-bottom)); padding: 10px 12px calc(10px + var(--dmu-safe-bottom)); gap: 10px; background: rgba(255, 255, 255, 0.98); border-top: 1px solid #e6e8eb; box-shadow: 0 -8px 24px rgba(16, 24, 40, 0.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } body.dmu-page-product .dmu-product-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .dmu-product-actions button { display: flex; min-width: 0; height: 52px; padding: 0 13px; align-items: center; justify-content: center; gap: 8px; border: 1px solid #d6d9de; border-radius: 12px; font-size: 14px; font-weight: 750; line-height: 1.15; text-align: center; transition: transform 0.15s ease, opacity 0.15s ease; } .dmu-product-actions button:active { transform: scale(0.98); } .dmu-product-actions button:disabled, .dmu-product-actions button.is-disabled { cursor: not-allowed; opacity: 0.5; } .dmu-product-actions .dmu-add-cart { color: #121212; background: #fff; } .dmu-product-actions .dmu-add-cart svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .dmu-product-actions .dmu-buy-now { color: #fff; border-color: #050505; background: #050505; } /* Halaman produk */ body.dmu-page-product .tp-product-details-area { padding-top: 0 !important; } body.dmu-page-product .tp-product-details-top .container, body.dmu-page-product .tp-product-details-bottom .container, body.dmu-page-product .tp-related-product .container { padding-right: 12px !important; padding-left: 12px !important; } body.dmu-page-product .tp-product-details-thumb-wrapper { margin-right: 0 !important; margin-bottom: 18px; } body.dmu-page-product .tp-product-details-title { font-size: 23px !important; line-height: 1.3 !important; } body.dmu-page-product .tp-product-details-sticky-actions { display: none !important; } body.dmu-page-product .product-form .tp-product-details-add-to-cart, body.dmu-page-product .product-form .tp-product-details-action-wrapper > .tp-product-details-buy-now-btn { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } body.dmu-page-product .tp-product-details-action-item-wrapper { display: block !important; } body.dmu-page-product .tp-product-details-quantity { width: 100%; } body.dmu-page-product .tp-product-quantity { margin-right: 0 !important; } /* Halaman keranjang */ body.dmu-page-cart { background: #f7f1eb; } body.dmu-page-cart .tp-cart-area { padding-top: 18px !important; padding-bottom: 32px !important; background: #f7f1eb; } body.dmu-page-cart .tp-cart-area > .container { width: 100%; max-width: none; padding-right: 14px !important; padding-left: 14px !important; } .dmu-cart-heading { display: flex; margin: 4px 2px 18px; align-items: center; justify-content: space-between; gap: 16px; } .dmu-cart-heading h1 { margin: 0; color: #17191c; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; } .dmu-cart-clear { padding: 7px 0; color: #7b7f87; border: 0; background: transparent; font-size: 14px; font-weight: 600; } .dmu-cart-clear:disabled { opacity: 0.45; } body.dmu-page-cart .tp-cart-area .row { display: block; margin: 0; } body.dmu-page-cart .tp-cart-area .row > [class*="col-"] { width: 100%; max-width: none; padding: 0; } body.dmu-page-cart .tp-cart-list { margin: 0 0 16px !important; overflow: visible !important; border: 0 !important; background: transparent; } body.dmu-page-cart .tp-cart-list table, body.dmu-page-cart .tp-cart-list tbody { display: block; width: 100%; } body.dmu-page-cart .tp-cart-list thead { display: none !important; } body.dmu-page-cart .tp-cart-list tbody { display: grid; gap: 14px; } body.dmu-page-cart .tp-cart-list tbody tr { position: relative; display: grid; min-height: 144px; padding: 16px; grid-template-columns: 92px minmax(0, 1fr) 38px; grid-template-areas: "product product remove" ". price remove" ". quantity remove"; column-gap: 12px; row-gap: 10px; overflow: hidden; border: 1px solid #ece8e2; border-radius: 22px; background: #fff; box-shadow: 0 5px 18px rgba(51, 42, 33, 0.04); } body.dmu-page-cart .tp-cart-list tbody tr td { display: block; width: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.dmu-page-cart .tp-cart-list td::before { display: none !important; } body.dmu-page-cart .cart-product-content { grid-area: product; display: grid !important; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: start; padding-right: 26px !important; } body.dmu-page-cart .cart-product-content > a { display: block; width: 92px; height: 92px; overflow: hidden; border-radius: 16px; background: #f7f7f8; } body.dmu-page-cart .cart-product-content > a img { width: 92px !important; height: 92px !important; max-width: none !important; margin: 0 !important; object-fit: contain; } body.dmu-page-cart .tp-cart-title { min-width: 0; } body.dmu-page-cart .tp-cart-title > a { display: -webkit-box; overflow: hidden; margin: 1px 0 6px !important; color: #1d2025; font-size: 15px; font-weight: 750; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } body.dmu-page-cart .tp-cart-title .small, body.dmu-page-cart .tp-cart-title .text-muted { color: #8a8f98 !important; font-size: 12px !important; line-height: 1.35; } body.dmu-page-cart .tp-cart-price { grid-area: price; align-self: center; padding-left: 0 !important; } body.dmu-page-cart .tp-cart-price span, body.dmu-page-cart .tp-cart-price .tp-product-price { color: #15171a !important; font-size: 16px !important; font-weight: 800 !important; } body.dmu-page-cart .tp-cart-quantity { grid-area: quantity; align-self: center; justify-self: start; } body.dmu-page-cart .tp-cart-quantity .tp-product-quantity, body.dmu-page-cart .tp-cart-quantity .tp-cart-input-wrapper { display: grid !important; min-width: 112px; height: 44px; margin: 0 !important; padding: 0 !important; grid-template-columns: 36px 40px 36px; align-items: center; border: 1px solid #e1e3e6; border-radius: 999px; background: #fff; } body.dmu-page-cart .tp-cart-quantity .tp-cart-minus, body.dmu-page-cart .tp-cart-quantity .tp-cart-plus { position: static !important; display: grid !important; width: 36px !important; height: 42px !important; place-items: center; color: #1e2228; transform: none !important; } body.dmu-page-cart .tp-cart-quantity input { width: 40px !important; height: 42px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #111418 !important; font-size: 16px !important; font-weight: 700; line-height: 42px !important; text-align: center; box-shadow: none !important; -moz-appearance: textfield; } body.dmu-page-cart .tp-cart-quantity input::-webkit-outer-spin-button, body.dmu-page-cart .tp-cart-quantity input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } body.dmu-page-cart .tp-cart-total { display: none !important; } body.dmu-page-cart .tp-cart-action { grid-area: remove; align-self: center; justify-self: end; } body.dmu-page-cart .tp-cart-action-btn { display: grid; width: 36px; height: 42px; place-items: center; color: #ef4753 !important; border: 0; background: transparent; } body.dmu-page-cart .tp-cart-action-btn svg { width: 23px; height: 23px; } body.dmu-page-cart .tp-cart-bottom { margin-bottom: 16px; padding: 18px; border: 1px solid #ece8e2; border-radius: 20px; background: #fff; } body.dmu-page-cart .tp-cart-coupon { margin-bottom: 0 !important; } body.dmu-page-cart .tp-cart-coupon-input-box label { display: flex; margin-bottom: 12px; align-items: center; gap: 7px; color: #1c2025; font-size: 15px; font-weight: 750; } body.dmu-page-cart .tp-cart-coupon-input { gap: 9px; } body.dmu-page-cart .tp-cart-coupon-input input { min-width: 0; height: 48px !important; margin: 0 !important; padding: 0 15px !important; border: 1px solid #e0e2e5 !important; border-radius: 999px !important; background: #fbfaf8 !important; font-size: 16px !important; line-height: 48px !important; } body.dmu-page-cart .tp-cart-coupon-input button { flex: 0 0 auto; height: 48px; padding: 0 20px !important; border: 1px solid #23272e; border-radius: 999px; background: #fff !important; color: #171a1f !important; font-size: 14px; font-weight: 750; } body.dmu-page-cart .tp-cart-checkout-wrapper { margin: 0 !important; padding: 22px 18px 18px !important; border: 1px solid #ece8e2; border-radius: 22px; background: #fff; box-shadow: none !important; } body.dmu-page-cart .tp-cart-checkout-top { margin-bottom: 16px; padding-bottom: 14px; } body.dmu-page-cart .tp-cart-checkout-top span { font-size: 15px !important; font-weight: 600 !important; } body.dmu-page-cart .tp-cart-checkout-total { margin-top: 16px !important; margin-bottom: 12px !important; padding-top: 16px; border-top: 1px solid #e7e9ec; } body.dmu-page-cart .tp-cart-checkout-total span:first-child { font-size: 20px !important; font-weight: 800 !important; } body.dmu-page-cart .tp-cart-checkout-total span:last-child { color: #101318 !important; font-size: 25px !important; font-weight: 850 !important; letter-spacing: -0.03em; } body.dmu-page-cart .tp-cart-checkout-wrapper > p.small { margin-bottom: 18px; color: #858a93; } body.dmu-page-cart .tp-cart-checkout-btn { display: flex !important; min-height: 54px; padding: 12px 20px !important; align-items: center; justify-content: center; border-radius: 999px; background: #050505 !important; color: #fff !important; font-size: 16px !important; font-weight: 750 !important; } body.dmu-page-cart .tp-cart-checkout-wrapper .btn-link { min-height: 50px; padding: 12px 20px; border: 1px solid #11151a; border-radius: 999px; color: #11151a !important; font-size: 15px; font-weight: 650; text-decoration: none; } body.dmu-page-cart .tp-cart-area .text-center.pt-50.pb-50 { margin-top: 20px; padding: 42px 18px !important; border-radius: 24px; background: #fff; } /* Jangan tampilkan tombol chat mengambang lama pada mobile. */ #digioto-live-chat-floating, #digioto-live-chat-panel { display: none !important; } /* Pastikan konten footer tidak tertutup navigasi. */ body.dmu-mobile-enabled:not(.dmu-page-product):not(.dmu-page-immersive) footer { padding-bottom: calc(var(--dmu-bottom-height) + var(--dmu-safe-bottom)) !important; } } @media (max-width: 390px) { .dmu-mobile-header { gap: 7px; padding-right: 10px; padding-left: 10px; } .dmu-head-action { flex-basis: 39px; width: 39px; } .dmu-head-action svg { width: 29px; height: 29px; } .dmu-product-actions button { padding-right: 8px; padding-left: 8px; font-size: 13px; } body.dmu-page-cart .tp-cart-list tbody tr { padding: 14px; grid-template-columns: 82px minmax(0, 1fr) 34px; } body.dmu-page-cart .cart-product-content { grid-template-columns: 82px minmax(0, 1fr); gap: 11px; } body.dmu-page-cart .cart-product-content > a, body.dmu-page-cart .cart-product-content > a img { width: 82px !important; height: 82px !important; } body.dmu-page-cart .tp-cart-quantity .tp-product-quantity, body.dmu-page-cart .tp-cart-quantity .tp-cart-input-wrapper { min-width: 104px; grid-template-columns: 33px 38px 33px; } } /* -------------------------------------------------------------------------- * Digioto Mobile UI v1.1.1 — profile header, native AJAX search, shop toolbar * -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { :root { --dmu-header-height: 96px; } .dmu-standard-header { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 14px 12px; } body.dmu-mobile-enabled:not(.dmu-page-product):not(.dmu-page-immersive) .dmu-standard-header { display: grid; } .dmu-customer-summary { display: grid; min-width: 0; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; color: var(--dmu-ink); text-decoration: none !important; -webkit-tap-highlight-color: transparent; } .dmu-customer-summary:active { opacity: 0.78; } .dmu-customer-avatar { display: grid; width: 48px; height: 48px; overflow: hidden; place-items: center; border: 1px solid #eceff2; border-radius: 50%; background: linear-gradient(145deg, #f4f5f7, #e5e8ec); color: #31363d; font-size: 18px; font-weight: 800; box-shadow: 0 3px 10px rgba(16, 24, 40, 0.08); } .dmu-customer-avatar img { width: 100%; height: 100%; object-fit: cover; } .dmu-customer-copy { display: block; min-width: 0; } .dmu-customer-copy .dmu-greeting { display: block; overflow: hidden; margin-bottom: 2px; color: #8a9099; font-size: 12px; font-weight: 500; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .dmu-customer-copy strong { display: block; overflow: hidden; color: #11151a; font-size: 15px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .dmu-wave { display: inline-block; transform-origin: 70% 70%; animation: dmu-wave-hand 2.2s ease-in-out 1; } @keyframes dmu-wave-hand { 0%, 60%, 100% { transform: rotate(0deg); } 10% { transform: rotate(15deg); } 20% { transform: rotate(-9deg); } 30% { transform: rotate(15deg); } 40% { transform: rotate(-5deg); } 50% { transform: rotate(10deg); } } .dmu-header-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 3px; } .dmu-header-actions .dmu-head-action { flex-basis: 42px; width: 42px; height: 52px; } .dmu-search-trigger { padding: 0; border: 0; background: transparent; cursor: pointer; } .dmu-search-trigger svg { width: 34px; height: 34px; stroke-width: 1.8; } .dmu-image-action img { display: block; width: 40px; height: 40px; object-fit: contain; pointer-events: none; } .dmu-header-actions .dmu-chat-link img { width: 42px; height: 42px; } .dmu-product-cart.dmu-image-action img { width: 35px; height: 35px; filter: invert(1); } .dmu-header-actions .dmu-badge { top: 1px; right: -1px; } .dmu-search-overlay { position: fixed; inset: 0 0 calc(var(--dmu-bottom-height) + var(--dmu-safe-bottom)); z-index: 1065; display: none; overflow: hidden; background: #fff; opacity: 0; transform: translateY(-8px); transition: opacity 160ms ease, transform 160ms ease; } .dmu-search-overlay.is-open { display: block; opacity: 1; transform: translateY(0); } body.dmu-search-open .dmu-bottom-nav { z-index: 1070; } .dmu-search-form { position: relative; display: flex; width: 100%; height: 100%; flex-direction: column; margin: 0; background: #fff; } .dmu-search-topbar { display: grid; min-height: 84px; padding: 16px 14px 12px; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; border-bottom: 1px solid #eceef1; background: #fff; } .dmu-search-input-wrap { position: relative; display: flex; min-width: 0; height: 52px; align-items: center; border-radius: 18px; background: #f4eee8; } .dmu-search-input-wrap > svg { position: absolute; left: 14px; z-index: 1; width: 25px; height: 25px; fill: none; stroke: #555d66; stroke-width: 1.8; stroke-linecap: round; pointer-events: none; } .dmu-search-input-wrap input { width: 100%; height: 52px !important; padding: 0 45px 0 48px !important; border: 0 !important; border-radius: 18px !important; outline: 0 !important; background: transparent !important; color: #171b20 !important; font-size: 17px !important; line-height: 52px !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; } .dmu-search-input-wrap input::placeholder { color: #959aa2; } .dmu-search-input-wrap input::-webkit-search-cancel-button { display: none; } .dmu-search-clear { position: absolute; right: 10px; display: grid; width: 29px; height: 29px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: #6c7075; color: #fff; font-size: 22px; font-weight: 400; line-height: 1; } .dmu-search-clear[hidden] { display: none !important; } .dmu-search-close { height: 48px; padding: 0 2px; border: 0; background: transparent; color: #4e535a; font-size: 15px; font-weight: 650; } .dmu-search-form .bb-quick-search-results { position: static !important; display: none; width: 100% !important; min-width: 0 !important; max-height: none !important; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; -webkit-overflow-scrolling: touch; } .dmu-search-form .bb-quick-search-results.show { display: block; } .dmu-search-form .bb-quick-search-content, .dmu-search-form .bb-quick-search-list { display: block; width: 100%; } .dmu-search-form .bb-quick-search-item { display: grid !important; min-height: 106px; padding: 14px 18px !important; grid-template-columns: 78px minmax(0, 1fr); gap: 16px; align-items: center; border-bottom: 1px solid #f0f1f3 !important; color: #171a1f; text-decoration: none !important; } .dmu-search-form .bb-quick-search-item:active { background: #faf8f6; } .dmu-search-form .bb-quick-search-item-image { width: 78px !important; height: 78px !important; overflow: hidden; border-radius: 15px; background: #f6f6f7; } .dmu-search-form .bb-quick-search-item-image img { width: 100% !important; height: 100% !important; object-fit: contain; } .dmu-search-form .bb-quick-search-item-info { min-width: 0; } .dmu-search-form .bb-quick-search-item-name { display: -webkit-box; overflow: hidden; margin-bottom: 7px; color: #1a1d21; font-size: 15px; font-weight: 750; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .dmu-search-form .bb-quick-search-item-rating { display: none !important; } .dmu-search-form .bb-quick-search-item-price, .dmu-search-form .bb-quick-search-item-price .new-price { color: #111418 !important; font-size: 16px !important; font-weight: 800 !important; } .dmu-search-form .bb-quick-search-item-price .old-price { margin-left: 6px; color: #9ca1a8 !important; font-size: 12px !important; } .dmu-search-form .bb-quick-search-view-all { position: sticky; bottom: 0; padding: 13px 18px; border-top: 1px solid #eceef1; background: rgba(255, 255, 255, 0.97); text-align: center; backdrop-filter: blur(8px); } .dmu-search-form .bb-quick-search-view-all a { color: var(--dmu-red) !important; font-size: 14px; font-weight: 750; text-decoration: none !important; } .dmu-search-form .bb-quick-search-empty { padding: 50px 20px; color: #737981; font-size: 14px; text-align: center; } .dmu-search-form .bb-quick-search-highlight { padding: 0; border-radius: 0; background: transparent; color: inherit; font-weight: 850; } .dmu-bottom-nav a.dmu-nav-image-link img { display: block; width: 31px; height: 31px; object-fit: contain; opacity: 0.62; transition: opacity 150ms ease, transform 150ms ease; } .dmu-bottom-nav a.dmu-nav-image-link.is-active img { opacity: 1; transform: scale(1.06); } body.dmu-page-shop .tp-shop-area > .container { padding-top: 18px !important; } body.dmu-page-shop .tp-shop-top { margin: 0 0 22px !important; padding: 17px 15px 15px; border: 1px solid #ebe6e0; border-radius: 18px; background: #faf5ef; box-shadow: 0 4px 14px rgba(49, 42, 34, 0.035); } body.dmu-page-shop .tp-shop-top > .row { margin: 0 !important; row-gap: 14px; } body.dmu-page-shop .tp-shop-top > .row > [class*="col-"] { width: 100%; padding: 0 !important; } body.dmu-page-shop .tp-shop-top-left { display: flex !important; width: 100%; min-height: 42px; align-items: center !important; justify-content: space-between; gap: 12px; } body.dmu-page-shop .tp-shop-top-left::before { content: "Produk"; color: #171a1f; font-size: 23px; font-weight: 850; line-height: 1.1; letter-spacing: -0.025em; } body.dmu-page-shop .tp-shop-top-tab { margin-left: auto; } body.dmu-page-shop .tp-shop-top-tab .nav-tabs { display: flex; gap: 7px; border: 0; } body.dmu-page-shop .tp-shop-top-tab .nav-link { display: grid; width: 40px; height: 40px; padding: 0 !important; place-items: center; border: 1px solid #ded9d3 !important; border-radius: 50% !important; background: #fff !important; color: #858b92 !important; } body.dmu-page-shop .tp-shop-top-tab .nav-link.active { border-color: #bfc3c8 !important; color: #22272d !important; box-shadow: 0 2px 8px rgba(24, 27, 31, 0.07); } body.dmu-page-shop .tp-shop-top-tab .nav-link svg { width: 20px; height: 20px; } body.dmu-page-shop .tp-shop-top-result { display: none !important; } body.dmu-page-shop .tp-shop-top-right { display: grid !important; width: 100%; grid-template-columns: auto minmax(112px, 145px) minmax(0, 1fr) auto; gap: 9px; align-items: center; justify-content: stretch !important; } body.dmu-page-shop .tp-shop-top-right::before { content: "Urutkan:"; color: #72777e; font-size: 13px; font-weight: 600; white-space: nowrap; } body.dmu-page-shop .tp-shop-top-select { width: auto !important; margin: 0 !important; } body.dmu-page-shop .tp-shop-top-select.sort-by { display: none !important; } body.dmu-page-shop .tp-shop-top-select select, body.dmu-page-shop .tp-shop-top-select .nice-select { width: 100% !important; min-width: 0 !important; height: 42px !important; margin: 0 !important; padding: 0 35px 0 13px !important; border: 1px solid #e0ddd9 !important; border-radius: 13px !important; background: #fff !important; color: #30343a !important; font-size: 13px !important; line-height: 40px !important; box-shadow: none !important; } body.dmu-page-shop .tp-shop-top-select .nice-select .list { min-width: 180px; } body.dmu-page-shop .dmu-shop-result-copy { min-width: 0; color: #7a7f86; font-size: 12px; font-weight: 500; line-height: 1.35; text-align: right; } body.dmu-page-shop .tp-shop-top-filter { margin: 0 !important; } body.dmu-page-shop .tp-filter-btn { display: grid !important; width: 42px; height: 42px; min-width: 42px; padding: 0 !important; place-items: center; border-radius: 12px !important; font-size: 0 !important; } body.dmu-page-shop .tp-filter-btn span { margin: 0 !important; } body.dmu-page-shop .tp-filter-btn svg { width: 19px; height: 19px; } } @media (max-width: 389.98px) { .dmu-standard-header { padding-right: 8px; padding-left: 9px; } .dmu-customer-summary { grid-template-columns: 42px minmax(0, 1fr); gap: 8px; } .dmu-customer-avatar { width: 42px; height: 42px; font-size: 16px; } .dmu-customer-copy .dmu-greeting { font-size: 10.5px; } .dmu-customer-copy strong { font-size: 13px; } .dmu-header-actions { gap: 0; } .dmu-header-actions .dmu-head-action { flex-basis: 38px; width: 38px; } .dmu-search-trigger svg { width: 30px; height: 30px; } .dmu-image-action img, .dmu-header-actions .dmu-chat-link img { width: 37px; height: 37px; } body.dmu-page-shop .tp-shop-top-right { grid-template-columns: auto minmax(100px, 132px) minmax(0, 1fr) auto; gap: 6px; } body.dmu-page-shop .dmu-shop-result-copy { font-size: 10.5px; } } /* * v1.1.1 — penyempurnaan Shop mobile * - kontrol toolbar tidak saling bertumpuk pada layar 360–430 px * - tombol filter mempunyai baris sendiri * - kartu produk hanya menampilkan ikon wishlist */ @media (max-width: 767.98px) { body.dmu-page-shop .tp-shop-top { padding: 16px 14px 14px; } body.dmu-page-shop .tp-shop-top > .row { row-gap: 12px; } body.dmu-page-shop .tp-shop-top-left { min-height: 40px; } body.dmu-page-shop .tp-shop-top-left::before { font-size: 21px; } body.dmu-page-shop .tp-shop-top-tab .nav-link { width: 38px; height: 38px; } body.dmu-page-shop .tp-shop-top-right { display: grid !important; grid-template-columns: auto minmax(108px, 1fr) minmax(88px, auto); grid-template-areas: "sort-label sort-control result" "filter filter filter"; column-gap: 8px; row-gap: 10px; align-items: center; } body.dmu-page-shop .tp-shop-top-right::before { grid-area: sort-label; align-self: center; font-size: 12px; } body.dmu-page-shop .tp-shop-top-select:not(.sort-by) { grid-area: sort-control; min-width: 0; } body.dmu-page-shop .dmu-shop-result-copy { grid-area: result; max-width: 112px; justify-self: end; font-size: 11px; line-height: 1.35; text-align: right; overflow-wrap: anywhere; } body.dmu-page-shop .tp-shop-top-filter { grid-area: filter; width: 100%; } body.dmu-page-shop .tp-filter-btn { display: flex !important; width: 100%; height: 38px; min-width: 0; padding: 0 14px !important; align-items: center; justify-content: center; gap: 7px; border: 1px solid #d9d5cf !important; border-radius: 11px !important; background: #fff !important; color: #252a30 !important; font-size: 12px !important; font-weight: 700; line-height: 1; box-shadow: none !important; } body.dmu-page-shop .tp-filter-btn span { display: inline-flex; align-items: center; justify-content: center; } body.dmu-page-shop .tp-filter-btn svg { width: 17px; height: 17px; } /* Sembunyikan compare, quick view/mata, dan action samping lain. Tombol wishlist tetap memakai fungsi asli theme. */ body.dmu-page-shop .tp-shop-area .tp-product-action button:not([data-bb-toggle="add-to-wishlist"]), body.dmu-page-shop .tp-shop-area .tp-product-action-2 button:not([data-bb-toggle="add-to-wishlist"]), body.dmu-page-shop .tp-shop-area .tp-product-action-3 button:not([data-bb-toggle="add-to-wishlist"]) { display: none !important; } body.dmu-page-shop .tp-shop-area .tp-product-action-item, body.dmu-page-shop .tp-shop-area .tp-product-action-item-2, body.dmu-page-shop .tp-shop-area .tp-product-action-item-3 { gap: 0 !important; } body.dmu-page-shop .tp-shop-area .tp-product-action, body.dmu-page-shop .tp-shop-area .tp-product-action-2, body.dmu-page-shop .tp-shop-area .tp-product-action-3 { height: auto !important; min-height: 0 !important; } } @media (max-width: 389.98px) { body.dmu-page-shop .tp-shop-top-right { grid-template-columns: auto minmax(96px, 1fr) minmax(78px, auto); column-gap: 6px; } body.dmu-page-shop .tp-shop-top-select select, body.dmu-page-shop .tp-shop-top-select .nice-select { padding-right: 29px !important; padding-left: 10px !important; font-size: 12px !important; } body.dmu-page-shop .dmu-shop-result-copy { max-width: 92px; font-size: 10px; } } /* * v1.1.2 — posisi wishlist dan footer mobile * - wishlist berada di sudut kanan atas gambar produk * - Sidebar Footer Atas, Utama, dan Bawah tidak ditampilkan pada mobile */ @media (max-width: 767.98px) { /* Footer Atas (newsletter), Footer Utama, dan Footer Bawah khusus mobile. */ body.dmu-mobile-enabled .tp-subscribe-area, body.dmu-mobile-enabled footer, body.dmu-mobile-enabled .tp-footer-area, body.dmu-mobile-enabled .tp-footer-top, body.dmu-mobile-enabled .tp-footer-bottom { display: none !important; } /* Area gambar menjadi acuan absolut untuk tombol wishlist. */ body.dmu-page-shop .tp-shop-area .tp-product-thumb, body.dmu-page-shop .tp-shop-area .tp-product-thumb-2, body.dmu-page-shop .tp-shop-area .tp-product-thumb-3, body.dmu-page-shop .tp-shop-area .tp-product-thumb-4, body.dmu-page-shop .tp-shop-area .tp-product-thumb-5 { position: relative !important; } /* Pindahkan container action ke pojok kanan atas gambar produk. */ body.dmu-page-shop .tp-shop-area .tp-product-action, body.dmu-page-shop .tp-shop-area .tp-product-action-2, body.dmu-page-shop .tp-shop-area .tp-product-action-3, body.dmu-page-shop .tp-shop-area .tp-product-action-4, body.dmu-page-shop .tp-shop-area .tp-product-action-5 { position: absolute !important; inset: 10px 10px auto auto !important; z-index: 6 !important; width: auto !important; height: auto !important; min-height: 0 !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } body.dmu-page-shop .tp-shop-area .tp-product-action-item, body.dmu-page-shop .tp-shop-area .tp-product-action-item-2, body.dmu-page-shop .tp-shop-area .tp-product-action-item-3 { display: flex !important; width: auto !important; height: auto !important; gap: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; } /* Hanya wishlist yang terlihat, berbentuk tombol bulat seperti referensi. */ body.dmu-page-shop .tp-shop-area button[data-bb-toggle="add-to-wishlist"] { display: grid !important; width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; padding: 0 !important; place-items: center !important; color: #20262d !important; border: 1px solid rgba(205, 209, 214, 0.92) !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.96) !important; line-height: 1 !important; box-shadow: 0 3px 10px rgba(16, 24, 40, 0.13) !important; transform: none !important; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } body.dmu-page-shop .tp-shop-area button[data-bb-toggle="add-to-wishlist"] svg { width: 20px !important; height: 20px !important; transform: none !important; } body.dmu-page-shop .tp-shop-area button[data-bb-toggle="add-to-wishlist"].active { color: var(--dmu-red) !important; border-color: rgba(239, 27, 45, 0.28) !important; background: #fff !important; } body.dmu-page-shop .tp-shop-area button[data-bb-toggle="add-to-wishlist"] .tp-product-tooltip { display: none !important; } /* Badge diskon/stok tetap berada di sisi kiri agar tidak bertabrakan. */ body.dmu-page-shop .tp-shop-area .tp-product-badge, body.dmu-page-shop .tp-shop-area .tp-product-badge-2, body.dmu-page-shop .tp-shop-area .tp-product-badge-3, body.dmu-page-shop .tp-shop-area .tp-product-badge-4, body.dmu-page-shop .tp-shop-area .tp-product-badge-5 { inset-inline-start: 10px !important; inset-inline-end: auto !important; left: 10px !important; right: auto !important; } } /* * v1.1.3 — perbaikan isolasi desktop * Search overlay mobile tidak boleh muncul pada layar >= 768px. */ /* ================================================================ * Digioto Mobile UI v1.2.0 — Account Suite * Tampilan khusus mobile. Seluruh route, form, data, dan proses lama * tetap digunakan; bagian ini hanya memperbarui presentasi. * ================================================================ */ .dmu-account-dashboard { display: none; } @media (max-width: 767.98px) { body.dmu-mobile-enabled.dmu-page-account { background: #f6f7f9 !important; } body.dmu-mobile-enabled.dmu-page-account:not(.dmu-account-overview) { padding-bottom: calc(var(--dmu-bottom-height) + var(--dmu-safe-bottom) + 18px) !important; } /* Hilangkan header akun bawaan yang ganda. Header Digioto global tetap tampil. */ body.dmu-page-account .bb-customer-page .customer-body > .d-lg-none, body.dmu-page-account .bb-customer-page .col-lg-3, body.dmu-page-account #customerSidebar { display: none !important; } body.dmu-page-account .bb-customer-page > .container { max-width: none !important; padding: 0 14px !important; } body.dmu-page-account .bb-customer-page .customer-body, body.dmu-page-account .bb-customer-page .row.g-0, body.dmu-page-account .bb-customer-page .col-lg-9, body.dmu-page-account .bb-profile-content { width: 100% !important; max-width: none !important; margin: 0 !important; } body.dmu-page-account .bb-customer-page { padding: 14px 0 0 !important; background: transparent !important; } body.dmu-page-account .bb-profile-content { padding: 0 !important; background: transparent !important; } body.dmu-page-account .bb-profile-header { margin: 0 0 14px !important; padding: 17px 18px !important; border: 1px solid #e8ebf0 !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 8px 24px rgba(15, 23, 42, .045) !important; } body.dmu-page-account .bb-profile-header-title { color: #101828 !important; font-size: 24px !important; font-weight: 800 !important; letter-spacing: -.5px !important; } body.dmu-page-account .bb-profile-main { padding: 0 0 18px !important; } body.dmu-page-account .bb-customer-content-wrapper { margin: 0 !important; } /* Overview baru */ body.dmu-account-overview .bb-customer-page { display: none !important; } body.dmu-account-overview .dmu-account-dashboard { display: block; width: 100%; max-width: 560px; margin: 0 auto; padding: 16px 14px 24px; color: #101828; } .dmu-account-dashboard a { text-decoration: none !important; } .dmu-account-hero { position: relative; display: grid; grid-template-columns: 64px minmax(0,1fr) 32px; gap: 13px; align-items: center; min-height: 130px; padding: 20px 18px; overflow: hidden; border-radius: 22px; background: linear-gradient(135deg,#e70f1c 0%,#c91028 46%,#081a34 100%); color: #fff; box-shadow: 0 16px 34px rgba(143,15,30,.22); } .dmu-account-hero::after { content:""; position:absolute; width:160px; height:160px; right:-56px; top:-65px; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 0 0 28px rgba(255,255,255,.04),0 0 0 56px rgba(255,255,255,.025); } .dmu-account-hero-avatar { position: relative; z-index:1; display:grid; width:64px; height:64px; place-items:center; overflow:hidden; border:3px solid rgba(255,255,255,.9); border-radius:50%; background:#fff; color:#d51221; font-size:24px; font-weight:800; } .dmu-account-hero-avatar img { width:100%; height:100%; object-fit:cover; } .dmu-account-hero-copy { position:relative; z-index:1; min-width:0; } .dmu-account-hero-copy > span { display:block; margin-bottom:2px; color:rgba(255,255,255,.82); font-size:12px; } .dmu-account-hero-copy strong { display:block; overflow:hidden; color:#fff; font-size:19px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; } .dmu-account-hero-copy small { display:block; margin-top:7px; color:rgba(255,255,255,.83); font-size:11px; line-height:1.45; } .dmu-account-hero > a { position:relative; z-index:1; display:grid; width:32px; height:32px; place-items:center; color:#fff; border:1px solid rgba(255,255,255,.28); border-radius:50%; } .dmu-account-hero > a svg { width:18px; fill:none; stroke:currentColor; stroke-width:2; } .dmu-account-section { margin-top:14px; padding:16px; border:1px solid #e7eaf0; border-radius:20px; background:#fff; box-shadow:0 8px 26px rgba(15,23,42,.045); } .dmu-account-section-heading { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:13px; } .dmu-account-section-heading h1,.dmu-account-section-heading h2 { margin:0; color:#101828; font-size:18px; font-weight:800; } .dmu-account-section-heading h1 { font-size:22px; } .dmu-eyebrow { display:block; margin-bottom:1px; color:#98a2b3; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; } .dmu-account-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; } .dmu-account-summary-grid > a { display:grid; min-height:102px; padding:12px 8px; place-items:center; text-align:center; border:1px solid #eceef3; border-radius:15px; background:#fff; color:#101828; } .dmu-account-summary-grid small { color:#667085; font-size:11px; } .dmu-account-summary-grid strong { color:#101828; font-size:20px; line-height:1; } .dmu-summary-icon,.dmu-menu-icon { display:grid; width:34px; height:34px; place-items:center; border-radius:11px; background:#fff0f1; color:#e21626; } .dmu-summary-icon.blue,.dmu-menu-icon.blue { background:#eef5ff; color:#2468ce; } .dmu-summary-icon.amber,.dmu-menu-icon.amber { background:#fff6de; color:#e39a00; } .dmu-menu-icon.violet { background:#f4efff; color:#7654d8; } .dmu-menu-icon.green { background:#eaf9ef; color:#1b9a54; } .dmu-menu-icon.slate { background:#eef1f5; color:#475467; } .dmu-menu-icon.red { background:#fff0f1; color:#e21626; } .dmu-summary-icon svg,.dmu-menu-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .dmu-account-menu-section { padding-bottom:5px; } .dmu-account-menu-list { margin:0 -16px; } .dmu-account-menu-list > a { display:grid; grid-template-columns:42px minmax(0,1fr) 20px; gap:11px; align-items:center; min-height:66px; padding:10px 16px; color:#101828; border-top:1px solid #f0f2f5; } .dmu-account-menu-list > a:first-child { border-top:0; } .dmu-account-menu-list > a > span:nth-child(2) { min-width:0; } .dmu-account-menu-list strong { display:block; color:#101828; font-size:14px; font-weight:750; } .dmu-account-menu-list small { display:block; overflow:hidden; margin-top:2px; color:#98a2b3; font-size:10.5px; text-overflow:ellipsis; white-space:nowrap; } .dmu-account-menu-list i { color:#98a2b3; font-size:24px; font-style:normal; } .dmu-account-coin-banner { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto 16px; gap:10px; align-items:center; margin-top:14px; padding:16px 17px; overflow:hidden; border-radius:20px; background:linear-gradient(135deg,#071a35,#102d55); color:#fff !important; box-shadow:0 12px 28px rgba(7,26,53,.2); } .dmu-account-coin-banner small,.dmu-account-coin-banner strong,.dmu-account-coin-banner em { display:block; } .dmu-account-coin-banner small { color:#cbd5e1; font-size:10px; } .dmu-account-coin-banner strong { margin:2px 0 4px; font-size:18px; } .dmu-account-coin-banner em { color:#cbd5e1; font-size:10px; font-style:normal; } .dmu-coin-stack { color:#ffc23c; font-size:22px; letter-spacing:-8px; text-shadow:0 3px 0 #d98d00; transform:rotate(-8deg); } .dmu-account-coin-banner i { font-size:24px; font-style:normal; } .dmu-account-logout { display:flex; gap:8px; align-items:center; justify-content:center; margin:14px 0 6px; padding:13px; color:#d92d20 !important; border:1px solid #ffd2d5; border-radius:14px; background:#fff; font-weight:700; } .dmu-account-logout svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } /* Kartu Pesanan & Invoice */ body.dmu-account-orders .order-cards, body.dmu-account-invoices .invoice-cards { display:grid !important; gap:12px !important; } body.dmu-page-account .bb-customer-card { overflow:hidden !important; margin:0 !important; border:1px solid #e7eaf0 !important; border-radius:18px !important; background:#fff !important; box-shadow:0 8px 25px rgba(15,23,42,.045) !important; } body.dmu-page-account .bb-customer-card-header { padding:16px !important; border-bottom:1px solid #f0f2f5 !important; background:#fff !important; } body.dmu-page-account .bb-customer-card-title { color:#101828 !important; font-size:16px !important; font-weight:800 !important; } body.dmu-page-account .bb-customer-card-body { padding:16px !important; } body.dmu-page-account .bb-customer-card-footer { display:flex !important; gap:9px !important; padding:0 16px 16px !important; border:0 !important; background:#fff !important; } body.dmu-page-account .bb-customer-card-footer .btn { display:flex !important; flex:1 1 auto !important; min-height:43px !important; align-items:center !important; justify-content:center !important; border-radius:12px !important; font-weight:700 !important; } body.dmu-page-account .bb-customer-card-footer .btn-primary { border-color:#ec1826 !important; background:#ec1826 !important; color:#fff !important; } body.dmu-page-account .bb-customer-card-info .row { row-gap:16px !important; } body.dmu-page-account .info-item .label { display:block !important; margin-bottom:3px !important; color:#98a2b3 !important; font-size:10px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.45px !important; } body.dmu-page-account .info-item .value { display:block !important; color:#101828 !important; font-size:14px !important; font-weight:750 !important; } body.dmu-page-account .bb-customer-card-status .badge { border-radius:999px !important; padding:6px 10px !important; } /* Ulasan */ body.dmu-account-reviews .product-reviews-cards { display:grid !important; gap:12px !important; } body.dmu-account-reviews .bb-customer-card-content { padding:12px 0 !important; } body.dmu-account-reviews .bb-customer-card-image { width:78px !important; height:78px !important; overflow:hidden !important; border:1px solid #edf0f3 !important; border-radius:14px !important; background:#f8fafc !important; } body.dmu-account-reviews .bb-customer-card-image img { width:100% !important; height:100% !important; object-fit:contain !important; } body.dmu-account-reviews .bb-customer-card-name { font-size:14px !important; font-weight:750 !important; } body.dmu-account-reviews .reviewed-products-card .bb-customer-card-body > * { max-width:100% !important; } /* Buku Alamat */ body.dmu-account-addresses .dashboard-address > .d-flex { margin:0 0 12px !important; padding:15px 16px !important; border:1px solid #e7eaf0 !important; border-radius:18px !important; background:#fff !important; } body.dmu-account-addresses .bb-customer-card-list .row { gap:12px !important; margin:0 !important; } body.dmu-account-addresses .bb-customer-card-list .row > .col { width:100% !important; padding:0 !important; } body.dmu-account-addresses .bb-customer-card-info-address .value { line-height:1.55 !important; } body.dmu-account-addresses .card.bg-light { border:1px dashed #f1a5aa !important; border-radius:18px !important; background:#fffafa !important; } /* Pengaturan akun dan semua form customer */ body.dmu-account-settings .account-settings-cards { display:grid !important; gap:13px !important; } body.dmu-account-settings .delete-account-card { display:none !important; } body.dmu-page-account .form-control, body.dmu-page-account .form-select { min-height:48px !important; border:1px solid #e1e5ea !important; border-radius:12px !important; background:#fff !important; box-shadow:none !important; font-size:14px !important; } body.dmu-page-account textarea.form-control { min-height:110px !important; } body.dmu-page-account .form-control:focus, body.dmu-page-account .form-select:focus { border-color:#ec1826 !important; box-shadow:0 0 0 3px rgba(236,24,38,.08) !important; } body.dmu-page-account .btn-primary, body.dmu-page-account button[type="submit"].btn { border-color:#ec1826 !important; background:#ec1826 !important; color:#fff !important; } /* Digioto Koin — hanya saldo, pending, dan riwayat cashback */ body.dmu-account-koin .dck-wrap { padding:0 0 18px !important; background:transparent !important; } body.dmu-account-koin .dck-wrap > .container { max-width:none !important; padding:0 14px !important; } body.dmu-account-koin .dck-head { margin:0 0 13px !important; padding:20px !important; border-radius:22px !important; background:linear-gradient(135deg,#e21626,#aa1024 50%,#091b35) !important; color:#fff !important; box-shadow:0 15px 32px rgba(159,17,36,.21) !important; } body.dmu-account-koin .dck-head h1 { margin:0 0 5px !important; color:#fff !important; font-size:25px !important; font-weight:800 !important; } body.dmu-account-koin .dck-head p { margin:0 !important; color:rgba(255,255,255,.78) !important; font-size:12px !important; } body.dmu-account-koin .dck-coin-stats { display:grid !important; grid-template-columns:1.3fr .9fr !important; gap:10px !important; margin:0 0 12px !important; } body.dmu-account-koin .dck-coin-stat { min-height:130px !important; padding:17px !important; border:1px solid #e7eaf0 !important; border-radius:18px !important; background:#fff !important; box-shadow:0 8px 24px rgba(15,23,42,.045) !important; } body.dmu-account-koin .dck-coin-stat.available { background:linear-gradient(145deg,#fff,#fff5f5) !important; } body.dmu-account-koin .dck-coin-stat strong { display:flex !important; gap:7px !important; align-items:center !important; margin:8px 0 5px !important; font-size:25px !important; } body.dmu-account-koin .dck-coin-stat.pending strong { font-size:22px !important; } body.dmu-account-koin .dck-shop-btn { display:flex !important; width:100% !important; min-height:48px !important; margin:0 0 12px !important; align-items:center !important; justify-content:center !important; border-radius:14px !important; background:#ec1826 !important; } body.dmu-account-koin .dck-account-card { overflow:visible !important; border:1px solid #e7eaf0 !important; border-radius:19px !important; box-shadow:0 8px 24px rgba(15,23,42,.045) !important; } body.dmu-account-koin .dck-account-head { padding:16px !important; font-size:17px !important; } body.dmu-account-koin .dck-account-table { display:block !important; min-width:0 !important; width:100% !important; } body.dmu-account-koin .dck-account-table thead { display:none !important; } body.dmu-account-koin .dck-account-table tbody { display:grid !important; padding:8px 13px !important; } body.dmu-account-koin .dck-account-table tr { position:relative !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; gap:3px 10px !important; padding:13px 0 !important; border-bottom:1px solid #eef0f3 !important; } body.dmu-account-koin .dck-account-table tr:last-child { border-bottom:0 !important; } body.dmu-account-koin .dck-account-table td { display:block !important; padding:0 !important; border:0 !important; } body.dmu-account-koin .dck-account-table td:nth-child(1) { grid-column:1; grid-row:2; color:#98a2b3 !important; font-size:10px !important; } body.dmu-account-koin .dck-account-table td:nth-child(2) { grid-column:1; grid-row:1; color:#101828 !important; font-size:13px !important; font-weight:700 !important; } body.dmu-account-koin .dck-account-table td:nth-child(3) { grid-column:2; grid-row:1 / span 2; align-self:center; font-size:15px !important; } body.dmu-account-koin .dck-account-table td:nth-child(n+4) { display:none !important; } /* Digioto Affiliate — seluruh fungsi asli, tampilan baru */ body.dmu-account-affiliate .dga-wrap, body.dmu-account-affiliate-video .dga-wrap, body.dmu-account-affiliate-video .dsv-affiliate-wrap { padding:0 0 18px !important; background:transparent !important; } body.dmu-account-affiliate .dga-wrap > .container, body.dmu-account-affiliate-video .dga-wrap > .container, body.dmu-account-affiliate-video .dsv-affiliate-wrap > .container { max-width:none !important; padding:0 14px !important; } body.dmu-account-affiliate .dga-head, body.dmu-account-affiliate-video .dga-head { margin:0 0 13px !important; padding:20px !important; border:0 !important; border-radius:22px !important; background:linear-gradient(135deg,#e21626,#b51027 48%,#091b35) !important; color:#fff !important; box-shadow:0 15px 32px rgba(159,17,36,.21) !important; } body.dmu-account-affiliate .dga-head h1, body.dmu-account-affiliate-video .dga-head h1 { margin:0 0 5px !important; color:#fff !important; font-size:25px !important; font-weight:800 !important; } body.dmu-account-affiliate .dga-head p, body.dmu-account-affiliate-video .dga-head p { margin:0 !important; color:rgba(255,255,255,.8) !important; font-size:12px !important; } body.dmu-account-affiliate .dga-nav, body.dmu-account-affiliate-video .dga-nav { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; margin:0 0 13px !important; } body.dmu-account-affiliate .dga-nav a, body.dmu-account-affiliate-video .dga-nav a { display:flex !important; min-height:52px !important; padding:10px 11px !important; align-items:center !important; justify-content:center !important; text-align:center !important; color:#101828 !important; border:1px solid #e5e8ed !important; border-radius:14px !important; background:#fff !important; font-size:11.5px !important; font-weight:700 !important; box-shadow:0 5px 14px rgba(15,23,42,.035) !important; } body.dmu-account-affiliate .dga-nav a.is-active, body.dmu-account-affiliate-video .dga-nav a.is-active { border-color:#ec1826 !important; color:#ec1826 !important; background:#fff7f7 !important; } body.dmu-account-affiliate .dga-stats { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:9px !important; margin:0 0 13px !important; } body.dmu-account-affiliate .dga-stat { min-height:94px !important; padding:14px !important; border:0 !important; border-radius:16px !important; background:#0a1c37 !important; color:#fff !important; box-shadow:none !important; } body.dmu-account-affiliate .dga-stat span { color:#b9c3d2 !important; font-size:10px !important; } body.dmu-account-affiliate .dga-stat strong { display:block !important; margin-top:6px !important; color:#fff !important; font-size:18px !important; } body.dmu-account-affiliate .dga-card, body.dmu-account-affiliate-video .dga-card, body.dmu-account-affiliate-video .dsv-upload-card { margin-bottom:12px !important; border:1px solid #e7eaf0 !important; border-radius:18px !important; background:#fff !important; box-shadow:0 8px 24px rgba(15,23,42,.045) !important; } body.dmu-account-affiliate .dga-card-head, body.dmu-account-affiliate-video .dga-card-head, body.dmu-account-affiliate-video .dsv-upload-head { padding:15px 16px !important; font-size:16px !important; font-weight:800 !important; } body.dmu-account-affiliate .dga-card-body, body.dmu-account-affiliate-video .dga-card-body, body.dmu-account-affiliate-video .dsv-upload-body { padding:14px !important; } body.dmu-account-affiliate .dga-search-card .dga-search-row { display:grid !important; grid-template-columns:1fr auto !important; gap:8px !important; } body.dmu-account-affiliate .dga-search-card .dga-input { grid-column:1 / -1 !important; width:100% !important; min-height:48px !important; border-radius:13px !important; } body.dmu-account-affiliate .dga-search-card .dga-btn { min-height:43px !important; border-radius:12px !important; } body.dmu-account-affiliate .dga-owned-grid, body.dmu-account-affiliate .dga-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; } body.dmu-account-affiliate .dga-owned-card, body.dmu-account-affiliate .dga-product-card { border-radius:15px !important; box-shadow:0 7px 18px rgba(15,23,42,.05) !important; } /* Video affiliate hanya video yang diunggah customer tersebut; UI menegaskan konteksnya. */ body.dmu-account-affiliate-video .dmu-affiliate-video-note { display:block; margin:0 14px 12px; padding:12px 14px; border:1px solid #ffe0e2; border-radius:14px; background:#fff6f7; color:#7a2430; font-size:11.5px; line-height:1.55; } } @media (max-width: 380px) { .dmu-account-summary-grid { grid-template-columns:1fr; } body.dmu-account-koin .dck-coin-stats { grid-template-columns:1fr !important; } } /* ================================================================ * Digioto Mobile UI v1.2.1 — penyelarasan desain akun/koin/affiliate * ================================================================ */ @media (max-width: 767.98px) { /* Dashboard akun: hero + menu kartu 2 kolom seperti rancangan final. */ body.dmu-account-overview .dmu-account-dashboard { padding: 14px 14px 24px !important; } body.dmu-account-overview .dmu-account-hero { min-height: 108px; grid-template-columns: 58px minmax(0, 1fr) 30px; gap: 12px; padding: 16px; border-radius: 18px; box-shadow: 0 12px 28px rgba(143, 15, 30, .18); } body.dmu-account-overview .dmu-account-hero-avatar { width: 58px; height: 58px; } body.dmu-account-overview .dmu-account-hero-copy > span { font-size: 11px; } body.dmu-account-overview .dmu-account-hero-copy strong { font-size: 18px; } body.dmu-account-overview .dmu-account-hero-copy small { margin-top: 5px; font-size: 10px; } .dmu-account-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 10px; padding: 0; } .dmu-account-menu-grid > a { display: grid; min-width: 0; min-height: 62px; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 11px 12px; color: #182230 !important; border: 1px solid #e8ebf0; border-radius: 13px; background: #fff; box-shadow: 0 5px 15px rgba(15, 23, 42, .045); text-decoration: none !important; } .dmu-account-menu-grid > a:active { transform: scale(.985); } .dmu-account-menu-grid .dmu-menu-icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; } .dmu-account-menu-grid .dmu-menu-icon svg { width: 19px; height: 19px; } .dmu-account-menu-grid strong { display: block; min-width: 0; overflow: hidden; color: #182230; font-size: 12px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .dmu-account-menu-grid .dmu-menu-icon.logout { color: #ef1b2d; background: #fff0f1; } .dmu-account-menu-grid .dmu-grid-logout strong { color: #ef1b2d; } body.dmu-account-overview .dmu-account-coin-banner { min-height: 102px; margin-top: 10px; padding: 15px 16px; border-radius: 16px; } .dmu-coin-illustration { position: relative; display: block; width: 76px; height: 54px; } .dmu-coin-illustration b { position: absolute; display: grid; width: 34px; height: 34px; place-items: center; color: #fff4bd; border: 3px solid #ffd861; border-radius: 50%; background: linear-gradient(145deg, #f4a600, #ffcf3f); font-size: 12px; font-weight: 900; box-shadow: 0 4px 0 #c37b00, 0 7px 12px rgba(0, 0, 0, .18); } .dmu-coin-illustration b:nth-child(1) { left: 4px; top: 16px; } .dmu-coin-illustration b:nth-child(2) { left: 28px; top: 4px; } .dmu-coin-illustration b:nth-child(3) { left: 41px; top: 24px; } /* Halaman Koin dan Affiliate memakai judul ringkas, bukan header profil ganda. */ body.dmu-mobile-enabled.dmu-account-koin, body.dmu-mobile-enabled.dmu-account-affiliate, body.dmu-mobile-enabled.dmu-account-affiliate-video { padding-top: 0 !important; background: #f7f8fa !important; } body.dmu-account-koin .dmu-standard-header, body.dmu-account-affiliate .dmu-standard-header, body.dmu-account-affiliate-video .dmu-standard-header { display: none !important; } .dmu-compact-account-head { display: flex !important; min-height: 62px !important; margin: 0 0 8px !important; padding: 8px 0 !important; align-items: center !important; gap: 8px !important; color: #101828 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .dmu-compact-account-head::after { display: none !important; } .dmu-compact-account-head h1 { margin: 0 !important; color: #101828 !important; font-size: 19px !important; font-weight: 800 !important; line-height: 1.2 !important; } .dmu-compact-account-head > p { display: none !important; } .dmu-account-back { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; padding: 0; color: #344054; border: 0; background: transparent; } .dmu-account-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Digioto Koin: satu kartu saldo, satu baris pending, dan list riwayat. */ body.dmu-account-koin .dck-wrap { padding: 0 0 18px !important; background: transparent !important; } body.dmu-account-koin .dck-wrap > .container { max-width: none !important; padding: 0 14px !important; } body.dmu-account-koin .dck-coin-stats { display: block !important; margin: 0 0 13px !important; } body.dmu-account-koin .dck-coin-stat { box-shadow: 0 8px 22px rgba(15, 23, 42, .055) !important; } body.dmu-account-koin .dck-coin-stat.available { position: relative !important; min-height: 108px !important; margin: 0 !important; padding: 18px 104px 16px 16px !important; overflow: hidden !important; color: #fff !important; border: 0 !important; border-radius: 16px 16px 7px 7px !important; background: linear-gradient(135deg, #a90916, #e21928 68%, #f3303d) !important; } body.dmu-account-koin .dck-coin-stat.available::after { content: ""; position: absolute; width: 138px; height: 138px; right: -46px; top: -55px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 50%; box-shadow: 0 0 0 24px rgba(255, 255, 255, .035); } body.dmu-account-koin .dck-coin-stat.available > span, body.dmu-account-koin .dck-coin-stat.available > small, body.dmu-account-koin .dck-coin-stat.available strong { position: relative; z-index: 2; color: #fff !important; } body.dmu-account-koin .dck-coin-stat.available > span { font-size: 11px !important; font-weight: 600 !important; } body.dmu-account-koin .dck-coin-stat.available strong { display: block !important; margin-top: 4px !important; font-size: 28px !important; line-height: 1.1 !important; } body.dmu-account-koin .dck-coin-stat.available strong .dck-coin-icon { position: absolute !important; z-index: 2 !important; width: 72px !important; height: 72px !important; right: -88px !important; top: -18px !important; object-fit: contain !important; filter: drop-shadow(0 6px 7px rgba(90, 0, 0, .23)); } body.dmu-account-koin .dck-coin-stat.available > small { display: block !important; margin-top: 7px !important; font-size: 11px !important; } body.dmu-account-koin .dck-coin-stat.pending { display: grid !important; min-height: 46px !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important; align-items: center !important; margin: 0 !important; padding: 11px 15px !important; border: 1px solid #e8ebf0 !important; border-top: 0 !important; border-radius: 7px 7px 16px 16px !important; background: #fff !important; } body.dmu-account-koin .dck-coin-stat.pending > span { color: #667085 !important; font-size: 11px !important; } body.dmu-account-koin .dck-coin-stat.pending strong { display: block !important; margin: 0 !important; color: #101828 !important; font-size: 15px !important; line-height: 1 !important; } body.dmu-account-koin .dck-coin-stat.pending strong .dck-coin-icon, body.dmu-account-koin .dck-coin-stat.pending > small { display: none !important; } body.dmu-account-koin .dck-shop-btn { display: none !important; } body.dmu-account-koin .dck-account-card { margin: 0 !important; overflow: hidden !important; border: 1px solid #e7eaf0 !important; border-radius: 16px !important; box-shadow: 0 8px 24px rgba(15, 23, 42, .045) !important; } body.dmu-account-koin .dck-account-head { padding: 15px 15px 7px !important; color: #101828 !important; border: 0 !important; font-size: 14px !important; font-weight: 800 !important; } .dmu-koin-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 5px 14px 9px; } .dmu-koin-tools select { width: 100%; height: 36px; padding: 0 30px 0 10px; color: #344054; border: 1px solid #e4e7ec; border-radius: 9px; background-color: #fff; font-size: 11px; font-weight: 600; } body.dmu-account-koin .dck-account-table { display: block !important; width: 100% !important; min-width: 0 !important; } body.dmu-account-koin .dck-account-table thead { display: none !important; } body.dmu-account-koin .dck-account-table tbody { display: block !important; padding: 0 14px 6px !important; } body.dmu-account-koin .dck-account-table tr { position: relative !important; display: grid !important; min-height: 62px !important; grid-template-columns: 32px minmax(0, 1fr) auto !important; grid-template-rows: auto auto !important; column-gap: 10px !important; align-items: center !important; padding: 11px 0 !important; border: 0 !important; border-bottom: 1px solid #eef0f3 !important; } body.dmu-account-koin .dck-account-table tr:last-child { border-bottom: 0 !important; } body.dmu-account-koin .dck-account-table tr::before { content: "+"; display: grid; width: 26px; height: 26px; grid-column: 1; grid-row: 1 / span 2; place-items: center; color: #fff; border-radius: 50%; background: #159455; font-size: 17px; font-weight: 600; } body.dmu-account-koin .dck-account-table tr[data-dmu-direction="out"]::before { content: "−"; background: #ef1b2d; } body.dmu-account-koin .dck-account-table td { display: block !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; } body.dmu-account-koin .dck-account-table td:nth-child(1) { grid-column: 2 !important; grid-row: 2 !important; color: #98a2b3 !important; font-size: 9.5px !important; line-height: 1.3 !important; } body.dmu-account-koin .dck-account-table td:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; overflow: hidden !important; color: #1d2939 !important; font-size: 11.5px !important; font-weight: 700 !important; line-height: 1.35 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body.dmu-account-koin .dck-account-table td:nth-child(3) { grid-column: 3 !important; grid-row: 1 / span 2 !important; align-self: center !important; font-size: 14px !important; font-weight: 800 !important; } body.dmu-account-koin .dck-account-table td:nth-child(n + 4) { display: none !important; } body.dmu-account-koin .dck-account-table tr[hidden] { display: none !important; } body.dmu-account-koin .mt-3 { margin: 10px 0 0 !important; } /* Affiliate: ringkasan gelap, menu ikon 3 kolom, lalu pencarian produk. */ body.dmu-account-affiliate .dga-wrap, body.dmu-account-affiliate-video .dga-wrap, body.dmu-account-affiliate-video .dsv-affiliate-wrap { padding: 0 0 18px !important; background: transparent !important; } body.dmu-account-affiliate .dga-wrap > .container, body.dmu-account-affiliate-video .dga-wrap > .container, body.dmu-account-affiliate-video .dsv-affiliate-wrap > .container { max-width: none !important; padding: 0 14px !important; } body.dmu-affiliate-dashboard .dga-stats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; margin: 0 0 10px !important; padding: 7px !important; overflow: hidden !important; border-radius: 16px !important; background: linear-gradient(145deg, #07182f, #0d2749) !important; box-shadow: 0 10px 24px rgba(7, 24, 47, .18) !important; } body.dmu-affiliate-dashboard .dga-stat { min-height: 67px !important; padding: 11px 12px !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.dmu-affiliate-dashboard .dga-stat:nth-child(1), body.dmu-affiliate-dashboard .dga-stat:nth-child(4) { border-right: 1px solid rgba(255, 255, 255, .13) !important; } body.dmu-affiliate-dashboard .dga-stat:nth-child(1), body.dmu-affiliate-dashboard .dga-stat:nth-child(2) { border-bottom: 1px solid rgba(255, 255, 255, .13) !important; } body.dmu-affiliate-dashboard .dga-stat:nth-child(3) { display: none !important; } body.dmu-affiliate-dashboard .dga-stat span { color: #b8c4d3 !important; font-size: 9px !important; line-height: 1.25 !important; } body.dmu-affiliate-dashboard .dga-stat strong { margin-top: 5px !important; color: #fff !important; font-size: 16px !important; line-height: 1.1 !important; } body.dmu-account-affiliate .dga-nav, body.dmu-account-affiliate-video .dga-nav { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 0 10px !important; } body.dmu-account-affiliate .dga-nav a, body.dmu-account-affiliate-video .dga-nav a { display: flex !important; min-width: 0 !important; min-height: 78px !important; flex-direction: column !important; gap: 6px !important; align-items: center !important; justify-content: center !important; padding: 8px 5px !important; color: #1d2939 !important; border: 1px solid #e6e9ef !important; border-radius: 12px !important; background: #fff !important; font-size: 9.5px !important; font-weight: 700 !important; line-height: 1.25 !important; text-align: center !important; box-shadow: 0 4px 12px rgba(15, 23, 42, .035) !important; } body.dmu-account-affiliate .dga-nav a.is-active, body.dmu-account-affiliate-video .dga-nav a.is-active { color: #e21727 !important; border-color: #f1b2b8 !important; background: #fffafb !important; } .dmu-aff-nav-icon { display: grid; width: 28px; height: 28px; place-items: center; color: #e21727; } .dmu-aff-nav-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } body.dmu-affiliate-dashboard .dga-wrap .row.g-3 { display: none !important; } .dmu-affiliate-dashboard-preview { display: none; } body.dmu-affiliate-dashboard .dmu-affiliate-dashboard-preview { display: block; margin: 0 0 12px; padding: 13px; border: 1px solid #e7eaf0; border-radius: 15px; background: #fff; box-shadow: 0 7px 20px rgba(15, 23, 42, .045); } .dmu-affiliate-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; } .dmu-affiliate-preview-heading strong { color: #101828; font-size: 13px; font-weight: 800; } .dmu-affiliate-preview-heading a { color: #667085 !important; font-size: 10px; font-weight: 600; text-decoration: none !important; } .dmu-affiliate-preview-search { position: relative; display: block; margin-bottom: 11px; } .dmu-affiliate-preview-search svg { position: absolute; top: 50%; left: 11px; width: 17px; height: 17px; fill: none; stroke: #98a2b3; stroke-width: 1.8; transform: translateY(-50%); } .dmu-affiliate-preview-search input { width: 100%; height: 39px; padding: 0 12px 0 35px; color: #1d2939; border: 1px solid #e2e6ec; border-radius: 10px; background: #fff; font-size: 10.5px; } .dmu-affiliate-preview-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .dmu-affiliate-preview-product { display: block; min-width: 0; overflow: hidden; color: #101828 !important; border: 1px solid #ebedf1; border-radius: 11px; background: #fff; text-decoration: none !important; } .dmu-affiliate-preview-image { position: relative; display: block; aspect-ratio: 1.35 / 1; overflow: hidden; background: #f7f8fa; } .dmu-affiliate-preview-image img { width: 100%; height: 100%; object-fit: contain; } .dmu-affiliate-preview-badge { position: absolute; z-index: 2; top: 7px; left: 7px; padding: 4px 6px; color: #fff; border-radius: 4px; background: #d71928; font-size: 8px; font-weight: 800; } .dmu-affiliate-preview-product > strong { display: -webkit-box; min-height: 40px; padding: 8px 9px; overflow: hidden; color: #101828; font-size: 10.5px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .dmu-affiliate-preview-empty { grid-column: 1 / -1; padding: 20px 12px; color: #667085 !important; border: 1px dashed #d9dde5; border-radius: 10px; text-align: center; text-decoration: none !important; font-size: 11px; } @media (max-width: 360px) { .dmu-account-menu-grid > a { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding-inline: 9px; } .dmu-account-menu-grid .dmu-menu-icon { width: 30px; height: 30px; } body.dmu-account-affiliate .dga-nav a, body.dmu-account-affiliate-video .dga-nav a { min-height: 72px !important; font-size: 8.8px !important; } } } /* ================================================================ * Digioto Mobile UI v1.2.2 — ikon akun dan integritas navigasi bawah * ================================================================ */ @media (max-width: 767.98px) { /* Semua ikon pada grid akun memakai kotak dan pusat visual yang sama. */ .dmu-account-menu-grid .dmu-menu-icon { display: grid !important; place-items: center !important; padding: 0 !important; line-height: 0 !important; text-align: center !important; } .dmu-account-menu-grid .dmu-menu-icon svg { display: block !important; margin: 0 auto !important; overflow: visible !important; transform: none !important; transform-origin: center !important; } .dmu-account-menu-grid .dmu-menu-icon.coin svg, .dmu-account-menu-grid .dmu-menu-icon.affiliate svg { width: 20px !important; height: 20px !important; } /* Hanya lima link resmi Mobile UI yang boleh tampil pada bar bawah. */ .dmu-bottom-nav > :not(a[data-dmu-section]) { display: none !important; } .dmu-bottom-nav > a[data-dmu-section] { flex: 0 0 20% !important; width: 20% !important; } } /* ================================================================ * Digioto Mobile UI v1.2.3 — isolasi ikon Koin dan nav bawah * ================================================================ */ @media (max-width: 767.98px) { /* Plugin Koin mengganti SVG menu dengan gambar dan membawa margin sendiri. Reset seluruh ukuran/margin agar gambar tetap tepat di tengah kotak ikon. */ body.dmu-account-overview .dmu-account-menu-grid .dmu-grid-koin .dmu-menu-icon, body.dmu-account-overview .dmu-account-menu-grid .dmu-grid-affiliate .dmu-menu-icon { display: grid !important; width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; margin: 0 !important; padding: 0 !important; place-items: center !important; justify-self: start !important; overflow: hidden !important; } body.dmu-account-overview .dmu-account-menu-grid .dmu-grid-koin .dmu-menu-icon > img.dck-account-menu-icon, body.dmu-account-overview .dmu-account-menu-grid .dmu-grid-affiliate .dmu-menu-icon > svg.dga-affiliate-menu-icon, body.dmu-account-overview .dmu-account-menu-grid .dmu-grid-affiliate .dmu-menu-icon > svg.dga-affiliate-card-icon { position: static !important; display: block !important; width: 19px !important; min-width: 19px !important; max-width: 19px !important; height: 19px !important; min-height: 19px !important; max-height: 19px !important; margin: 0 !important; padding: 0 !important; flex: 0 0 19px !important; object-fit: contain !important; object-position: center !important; transform: none !important; vertical-align: middle !important; } body.dmu-account-overview .dmu-account-menu-grid .dmu-grid-koin, body.dmu-account-overview .dmu-account-menu-grid .dmu-grid-affiliate { grid-template-columns: 34px minmax(0, 1fr) !important; column-gap: 10px !important; } /* Shadow DOM melindungi lima menu utama dari injeksi menu akun plugin lain. */ .dmu-bottom-nav.dmu-bottom-nav-protected { overflow: hidden !important; } .dmu-bottom-nav.dmu-bottom-nav-protected > * { display: none !important; } } /* ================================================================ * Digioto Mobile UI v1.2.4 — Voucher Saya pada dashboard customer * ================================================================ */ @media (max-width: 767.98px) { body.dmu-account-overview .dmu-account-menu-grid .dmu-grid-voucher { grid-template-columns: 34px minmax(0, 1fr) !important; column-gap: 10px !important; } body.dmu-account-overview .dmu-account-menu-grid .dmu-grid-voucher .dmu-menu-icon { display: grid !important; width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; margin: 0 !important; padding: 0 !important; place-items: center !important; overflow: hidden !important; } body.dmu-account-overview .dmu-account-menu-grid .dmu-grid-voucher .dmu-menu-icon svg { display: block !important; width: 19px !important; height: 19px !important; margin: 0 !important; padding: 0 !important; transform: none !important; } /* Dengan tambahan Voucher Saya, Keluar menjadi satu kartu penuh di baris akhir. */ body.dmu-account-overview .dmu-account-menu-grid .dmu-grid-logout.dmu-grid-logout-wide { grid-column: 1 / -1; } } /* -------------------------------------------------------------------------- * Digioto Mobile UI v1.3.0 — Homepage mobile premium * Desktop tetap memakai konten Page Home Shofy yang sudah ada. * -------------------------------------------------------------------------- */ .dmu-home-mobile { display: none; } .dmu-home-desktop { display: block; } @media (max-width: 767.98px) { body.dmu-mobile-enabled.dmu-page-home { background: #fff; } body.dmu-mobile-enabled.dmu-page-home main { overflow: visible; } .dmu-home-mobile { display: block; width: 100%; max-width: 100%; overflow-x: clip; background: #fff; } .dmu-home-desktop { display: none !important; } .dmu-home-shell, .dmu-home-shell *, .dmu-home-shell *::before, .dmu-home-shell *::after { box-sizing: border-box; } .dmu-home-shell { --dmu-home-red: #ef1b2d; --dmu-home-ink: #101318; --dmu-home-muted: #747980; --dmu-home-line: #eceef1; --dmu-home-soft: #f7f7f8; width: 100%; padding: 14px 14px 28px; color: var(--dmu-home-ink); font-family: inherit; } .dmu-home-shell a { color: inherit; text-decoration: none !important; -webkit-tap-highlight-color: transparent; } .dmu-home-search { display: flex; width: 100%; height: 50px; margin: 0 0 14px; padding: 0 15px; align-items: center; justify-content: space-between; gap: 12px; color: #8c9198; border: 0; border-radius: 18px; background: linear-gradient(180deg, #f8f8f9 0%, #f3f4f5 100%); box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .018); text-align: left; } .dmu-home-search-main { display: flex; min-width: 0; align-items: center; gap: 11px; font-size: 14px; font-weight: 500; } .dmu-home-search-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dmu-home-search svg { flex: 0 0 auto; width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .dmu-home-search .dmu-home-scan-icon { width: 21px; height: 21px; color: #1d232b; } .dmu-home-hero { position: relative; width: 100%; overflow: hidden; border-radius: 15px; background: #151515; box-shadow: 0 7px 22px rgba(16, 24, 40, .10); } .dmu-home-hero-track { display: flex; width: 100%; transition: transform .42s cubic-bezier(.2, .72, .28, 1); will-change: transform; } .dmu-home-hero-slide { display: block; flex: 0 0 100%; width: 100%; aspect-ratio: 2.02 / 1; background: #141414; } .dmu-home-hero-slide img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; } .dmu-home-hero-dots { position: absolute; right: 0; bottom: 9px; left: 0; display: flex; align-items: center; justify-content: center; gap: 6px; pointer-events: none; } .dmu-home-hero-dot { width: 7px; height: 7px; min-width: 7px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .04); transition: width .22s ease, background .22s ease; pointer-events: auto; } .dmu-home-hero-dot.is-active { width: 20px; background: #fff; } .dmu-home-hero-fallback { min-height: 170px; padding: 25px; display: flex; align-items: center; background: radial-gradient(circle at 90% 20%, rgba(239, 27, 45, .45), transparent 38%), linear-gradient(135deg, #080808 0%, #27070b 100%); color: #fff; } .dmu-home-hero-fallback > div { max-width: 72%; } .dmu-home-hero-fallback strong, .dmu-home-hero-fallback span { display: block; } .dmu-home-hero-fallback strong { margin-bottom: 6px; font-size: 23px; line-height: 1.05; text-transform: uppercase; } .dmu-home-hero-fallback span { margin-bottom: 15px; color: rgba(255,255,255,.78); font-size: 12px; } .dmu-home-hero-fallback a { display: inline-flex; height: 34px; padding: 0 14px; align-items: center; border-radius: 999px; background: var(--dmu-home-red); color: #fff; font-size: 12px; font-weight: 800; text-transform: uppercase; } .dmu-home-shortcuts { display: grid; margin: 13px 0 21px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; } .dmu-home-shortcut { display: flex; min-width: 0; align-items: center; flex-direction: column; gap: 7px; color: #222831; font-size: 11px; font-weight: 650; line-height: 1.15; text-align: center; } .dmu-home-shortcut-icon { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid #eef0f2; border-radius: 50%; background: #fff; color: var(--dmu-home-red); box-shadow: 0 6px 16px rgba(16, 24, 40, .08); } .dmu-home-shortcut-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .dmu-home-shortcut-ban .dmu-home-shortcut-icon { color: #20252b; } .dmu-home-shortcut-brand .dmu-home-shortcut-icon, .dmu-home-shortcut-promo .dmu-home-shortcut-icon { color: #fff; border-color: rgba(239,27,45,.06); background: linear-gradient(145deg, #f42d3e, #d90f20); } .dmu-home-section { margin-top: 21px; } .dmu-home-section-heading { display: flex; margin-bottom: 10px; align-items: flex-end; justify-content: space-between; gap: 12px; } .dmu-home-section-heading h2 { margin: 0; color: #15191f; font-size: 18px; font-weight: 800; line-height: 1.15; letter-spacing: -.22px; } .dmu-home-section-heading p { margin: 3px 0 0; color: #7c8188; font-size: 11px; line-height: 1.35; } .dmu-home-section-heading > a { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; color: var(--dmu-home-red); font-size: 11px; font-weight: 750; white-space: nowrap; } .dmu-home-section-heading > a span { font-size: 18px; line-height: 12px; } .dmu-home-categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .dmu-home-category-card { display: flex; min-width: 0; overflow: hidden; align-items: center; flex-direction: column; border: 1px solid #eef0f2; border-radius: 12px; background: #fff; box-shadow: 0 4px 13px rgba(16, 24, 40, .045); } .dmu-home-category-media { display: grid; width: 100%; aspect-ratio: 1 / .88; overflow: hidden; place-items: center; background: linear-gradient(145deg, #fafafa, #f4f5f6); } .dmu-home-category-media img { display: block; width: 82%; height: 82%; margin: 0; object-fit: contain; mix-blend-mode: multiply; } .dmu-home-category-media svg { width: 35px; height: 35px; fill: none; stroke: #747980; stroke-width: 1.5; } .dmu-home-category-name { display: flex; width: 100%; min-height: 34px; padding: 7px 4px; align-items: center; justify-content: center; color: #272c33; font-size: 10px; font-weight: 650; line-height: 1.15; text-align: center; } .dmu-home-brand-section { scroll-margin-top: calc(var(--dmu-header-height) + 12px); } .dmu-home-brand-scroller { display: flex; margin: 0 -14px; padding: 0 14px 3px; gap: 9px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .dmu-home-brand-scroller::-webkit-scrollbar { display: none; } .dmu-home-brand-card { display: block; flex: 0 0 105px; width: 105px; scroll-snap-align: start; } .dmu-home-brand-visual { position: relative; display: block; width: 100%; overflow: hidden; aspect-ratio: .82 / 1; border-radius: 11px; background: radial-gradient(circle at 60% 15%, #4b4f55 0%, #16191d 42%, #070809 100%); box-shadow: 0 5px 15px rgba(16, 24, 40, .10); } .dmu-home-brand-cover { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; filter: saturate(.9) contrast(1.03); } .dmu-home-brand-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 32%, rgba(0,0,0,.86) 100%); } .dmu-home-brand-logo { position: absolute; right: 9px; bottom: 10px; left: 9px; display: block; width: calc(100% - 18px); height: 28px; margin: 0; padding: 4px 6px; border-radius: 6px; background: rgba(255,255,255,.90); object-fit: contain; } .dmu-home-brand-logo-text { position: absolute; right: 8px; bottom: 10px; left: 8px; color: #fff; font-size: 13px; line-height: 1.1; text-align: center; text-shadow: 0 2px 5px rgba(0,0,0,.5); } .dmu-home-brand-name { display: -webkit-box; min-height: 29px; margin-top: 6px; overflow: hidden; color: #343941; font-size: 10px; font-weight: 650; line-height: 1.25; text-align: center; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .dmu-home-promo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .dmu-home-promo-card { position: relative; display: grid; min-height: 148px; overflow: hidden; grid-template-columns: minmax(0, 1.04fr) minmax(70px, .96fr); border: 1px solid #f1e5e6; border-radius: 13px; background: linear-gradient(135deg, #fff 0%, #fff5f6 100%); box-shadow: 0 5px 15px rgba(79, 16, 24, .055); } .dmu-home-promo-copy { position: relative; z-index: 2; display: flex; min-width: 0; padding: 11px 5px 10px 10px; align-items: flex-start; flex-direction: column; } .dmu-home-promo-badge { display: inline-flex; margin-bottom: 7px; padding: 3px 6px; border-radius: 5px; background: var(--dmu-home-red); color: #fff; font-size: 8px; font-weight: 850; line-height: 1; letter-spacing: .1px; } .dmu-home-promo-copy strong { display: -webkit-box; overflow: hidden; color: #161a20; font-size: 12px; font-weight: 800; line-height: 1.16; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .dmu-home-promo-price { margin-top: auto; padding-top: 9px; color: var(--dmu-home-red); font-size: 11px; font-weight: 850; line-height: 1.15; } .dmu-home-promo-copy del { margin-top: 2px; color: #9a9ea5; font-size: 8px; line-height: 1.1; } .dmu-home-promo-media { position: relative; display: flex; overflow: hidden; align-items: flex-end; justify-content: center; } .dmu-home-promo-media::before { position: absolute; inset: 19% -22% -18% 4%; border-radius: 50%; background: rgba(239, 27, 45, .07); content: ''; } .dmu-home-promo-media img { position: relative; z-index: 1; display: block; width: 108%; max-width: none; height: 88%; margin: 0 -8% 0 0; object-fit: contain; mix-blend-mode: multiply; } .dmu-home-trust-grid { display: grid; margin-top: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .dmu-home-trust-card { display: grid; min-height: 76px; padding: 12px 10px; grid-template-columns: 37px minmax(0, 1fr) 12px; align-items: center; gap: 8px; border: 1px solid #eef0f2; border-radius: 13px; background: linear-gradient(180deg, #fff, #fbfbfc); box-shadow: 0 5px 14px rgba(16, 24, 40, .045); } .dmu-home-trust-icon { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 10px; background: #fff0f2; color: var(--dmu-home-red); } .dmu-home-trust-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .dmu-home-trust-card strong, .dmu-home-trust-card small { display: block; } .dmu-home-trust-card strong { color: #20252c; font-size: 10px; font-weight: 800; line-height: 1.15; } .dmu-home-trust-card small { display: -webkit-box; margin-top: 4px; overflow: hidden; color: #858a91; font-size: 8px; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .dmu-home-trust-arrow { color: #1d232a; font-size: 22px; font-weight: 300; line-height: 1; } } @media (max-width: 390px) { .dmu-home-shell { padding-right: 11px; padding-left: 11px; } .dmu-home-brand-scroller { margin-right: -11px; margin-left: -11px; padding-right: 11px; padding-left: 11px; } .dmu-home-brand-card { flex-basis: 96px; width: 96px; } .dmu-home-promo-card { min-height: 142px; } } /* -------------------------------------------------------------------------- * Digioto Mobile UI v1.3.1 — homepage refinement * Header home lebih compact, tanpa search ganda, banner full image, * benefit icons + kategori produk horizontal carousel. * -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { body.dmu-mobile-enabled.dmu-page-home { --dmu-header-height: 72px; } body.dmu-mobile-enabled.dmu-page-home .dmu-standard-header { height: var(--dmu-header-height); padding: 8px 12px; gap: 6px; box-shadow: 0 2px 10px rgba(16, 24, 40, .045); } body.dmu-mobile-enabled.dmu-page-home .dmu-customer-summary { grid-template-columns: 38px minmax(0, 1fr); gap: 8px; } body.dmu-mobile-enabled.dmu-page-home .dmu-customer-avatar { width: 38px; height: 38px; font-size: 14px; box-shadow: 0 2px 7px rgba(16, 24, 40, .07); } body.dmu-mobile-enabled.dmu-page-home .dmu-customer-copy .dmu-greeting { margin-bottom: 1px; font-size: 10px; } body.dmu-mobile-enabled.dmu-page-home .dmu-customer-copy strong { font-size: 13px; line-height: 1.15; } body.dmu-mobile-enabled.dmu-page-home .dmu-header-actions { gap: 0; } body.dmu-mobile-enabled.dmu-page-home .dmu-header-actions .dmu-head-action { flex-basis: 36px; width: 36px; height: 42px; } body.dmu-mobile-enabled.dmu-page-home .dmu-search-trigger svg { width: 28px; height: 28px; } body.dmu-mobile-enabled.dmu-page-home .dmu-header-actions .dmu-image-action > img { width: 32px; height: 32px; } body.dmu-mobile-enabled.dmu-page-home .dmu-header-actions .dmu-chat-link img { width: 34px; height: 34px; } body.dmu-mobile-enabled.dmu-page-home .dmu-header-actions .dmu-badge { top: 0; right: -1px; transform: scale(.9); transform-origin: top right; } .dmu-home-shell { padding-top: 10px; } .dmu-home-search { display: none !important; } .dmu-home-hero { border-radius: 13px; background: #fff; box-shadow: 0 5px 16px rgba(16, 24, 40, .08); } .dmu-home-hero-track { align-items: flex-start; background: #fff; } .dmu-home-hero-slide { aspect-ratio: auto; min-height: 0; background: #fff; } .dmu-home-hero-slide img { width: 100%; height: auto; max-height: none; object-fit: contain; object-position: center; } .dmu-home-hero-dots { bottom: 7px; } .dmu-home-benefits { display: grid; margin: 12px 0 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; } .dmu-home-benefit { display: flex; min-width: 0; align-items: center; flex-direction: column; gap: 6px; color: #353a41; font-size: 9px; font-weight: 650; line-height: 1.18; text-align: center; } .dmu-home-benefit-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #f0f1f3; border-radius: 50%; background: #fff; color: var(--dmu-home-red); box-shadow: 0 4px 12px rgba(16, 24, 40, .06); } .dmu-home-benefit-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .dmu-home-category-section { margin-top: 16px; } .dmu-home-categories { display: flex; margin: 0 -14px; padding: 0 14px 4px; gap: 9px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .dmu-home-categories::-webkit-scrollbar { display: none; } .dmu-home-category-card { flex: 0 0 102px; width: 102px; scroll-snap-align: start; border-radius: 12px; } .dmu-home-category-media { aspect-ratio: 1 / .82; } .dmu-home-category-media img { width: 78%; height: 78%; } .dmu-home-category-name { min-height: 34px; padding: 7px 5px; font-size: 10px; } } @media (max-width: 390px) { .dmu-home-categories { margin-right: -11px; margin-left: -11px; padding-right: 11px; padding-left: 11px; } .dmu-home-category-card { flex-basis: 96px; width: 96px; } } /* -------------------------------------------------------------------------- * Digioto Mobile UI v1.3.2 — global compact header + video/youtube homepage * -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { body.dmu-mobile-enabled:not(.dmu-page-product):not(.dmu-page-immersive) { --dmu-header-height: 72px; } body.dmu-mobile-enabled:not(.dmu-page-product):not(.dmu-page-immersive) .dmu-standard-header { height: var(--dmu-header-height); padding: 8px 12px; gap: 6px; box-shadow: 0 2px 10px rgba(16, 24, 40, .045); } body.dmu-mobile-enabled:not(.dmu-page-product):not(.dmu-page-immersive) .dmu-customer-summary { grid-template-columns: 38px minmax(0, 1fr); gap: 8px; } body.dmu-mobile-enabled:not(.dmu-page-product):not(.dmu-page-immersive) .dmu-customer-avatar { width: 38px; height: 38px; font-size: 14px; box-shadow: 0 2px 7px rgba(16, 24, 40, .07); } body.dmu-mobile-enabled:not(.dmu-page-product):not(.dmu-page-immersive) .dmu-customer-copy .dmu-greeting { margin-bottom: 1px; font-size: 10px; } body.dmu-mobile-enabled:not(.dmu-page-product):not(.dmu-page-immersive) .dmu-customer-copy strong { font-size: 13px; line-height: 1.15; } body.dmu-mobile-enabled:not(.dmu-page-product):not(.dmu-page-immersive) .dmu-header-actions { gap: 0; } body.dmu-mobile-enabled:not(.dmu-page-product):not(.dmu-page-immersive) .dmu-header-actions .dmu-head-action { flex-basis: 36px; width: 36px; height: 42px; } body.dmu-mobile-enabled:not(.dmu-page-product):not(.dmu-page-immersive) .dmu-search-trigger svg { width: 28px; height: 28px; } body.dmu-mobile-enabled:not(.dmu-page-product):not(.dmu-page-immersive) .dmu-header-actions .dmu-image-action > img { width: 32px; height: 32px; } body.dmu-mobile-enabled:not(.dmu-page-product):not(.dmu-page-immersive) .dmu-header-actions .dmu-chat-link img { width: 34px; height: 34px; } body.dmu-mobile-enabled:not(.dmu-page-product):not(.dmu-page-immersive) .dmu-header-actions .dmu-badge { top: 0; right: -1px; transform: scale(.9); transform-origin: top right; } .dmu-home-video-section, .dmu-home-youtube-section { margin-top: 22px; } .dmu-home-video-scroller { display: flex; margin: 0 -14px; padding: 0 14px 5px; gap: 10px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .dmu-home-video-scroller::-webkit-scrollbar { display: none; } .dmu-home-video-card { flex: 0 0 136px; width: 136px; scroll-snap-align: start; border-radius: 14px; overflow: hidden; background: #14171b; box-shadow: 0 5px 15px rgba(16, 24, 40, .09); } .dmu-home-video-media { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #20242a; } .dmu-home-video-media > img, .dmu-home-video-media > video { width: 100%; height: 100%; object-fit: cover; display: block; } .dmu-home-video-shade { position: absolute; inset: 35% 0 0; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .76)); pointer-events: none; } .dmu-home-video-play { position: absolute; top: 9px; left: 9px; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: rgba(25, 29, 36, .78); color: #fff; backdrop-filter: blur(5px); } .dmu-home-video-play svg { width: 18px; height: 18px; fill: currentColor; } .dmu-home-video-views { position: absolute; top: 10px; right: 9px; padding: 4px 6px; border-radius: 7px; background: rgba(25, 29, 36, .72); color: #fff; font-size: 9px; font-weight: 700; line-height: 1; } .dmu-home-video-copy { position: absolute; right: 9px; bottom: 10px; left: 9px; color: #fff; } .dmu-home-video-product-count { display: inline-flex; margin-bottom: 7px; padding: 5px 7px; border-radius: 7px; background: var(--dmu-home-red); color: #fff; font-size: 8px; font-weight: 800; line-height: 1; } .dmu-home-video-copy strong { display: -webkit-box; overflow: hidden; color: #fff; font-size: 11px; font-weight: 800; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .dmu-home-youtube-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #eceef1; border-radius: 14px; background: #0f1115; box-shadow: 0 5px 15px rgba(16, 24, 40, .07); } .dmu-home-youtube-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } } @media (max-width: 390px) { .dmu-home-video-scroller { margin-right: -11px; margin-left: -11px; padding-right: 11px; padding-left: 11px; } .dmu-home-video-card { flex-basis: 128px; width: 128px; } } /* -------------------------------------------------------------------------- * Digioto Mobile UI v1.3.3 — product carousels, conditional Flash Sale, * artikel homepage. Shopping sections tetap horizontal-scroll native. * -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .dmu-home-product-section, .dmu-home-flash-sale, .dmu-home-article-section { margin-top: 22px; } .dmu-home-product-scroller, .dmu-home-article-scroller { display: flex; margin: 0 -14px; padding: 1px 14px 7px; gap: 10px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .dmu-home-product-scroller::-webkit-scrollbar, .dmu-home-article-scroller::-webkit-scrollbar { display: none; } .dmu-home-product-card { display: flex; flex: 0 0 min(46vw, 208px); width: min(46vw, 208px); min-width: 0; overflow: hidden; scroll-snap-align: start; flex-direction: column; border: 1px solid #eceef1; border-radius: 14px; background: #fff; box-shadow: 0 5px 16px rgba(16, 24, 40, .065); } .dmu-home-product-media { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: linear-gradient(145deg, #fafafa, #f3f4f5); } .dmu-home-product-media > img { display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; background: #fff; } .dmu-home-product-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: #a7adb5; } .dmu-home-product-placeholder svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.4; } .dmu-home-product-badge { position: absolute; top: 8px; left: 8px; display: inline-flex; min-height: 24px; padding: 0 7px; align-items: center; border-radius: 6px; background: var(--dmu-home-red); color: #fff; font-size: 9px; font-weight: 850; line-height: 1; box-shadow: 0 3px 8px rgba(239, 27, 45, .24); } .dmu-home-product-body { display: flex; flex: 1 1 auto; min-width: 0; padding: 11px 10px 10px; flex-direction: column; } .dmu-home-product-title { display: -webkit-box; min-height: 37px; overflow: hidden; color: #20242a !important; font-size: 12px; font-weight: 720; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .dmu-home-product-prices { display: flex; min-height: 43px; margin-top: 8px; justify-content: flex-end; flex-direction: column; gap: 2px; } .dmu-home-product-prices del { color: #a4a8ae; font-size: 10px; line-height: 1.1; } .dmu-home-product-prices strong { color: #e31b2b; font-size: 14px; font-weight: 850; line-height: 1.2; } .dmu-home-product-cart { display: flex; width: 100%; min-height: 36px; margin-top: 10px; padding: 0 9px; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 9px; background: #111318; color: #fff !important; font-family: inherit; font-size: 11px; font-weight: 800; line-height: 1; text-decoration: none !important; } .dmu-home-product-cart:active { transform: scale(.985); } /* Flash Sale disembunyikan otomatis oleh Blade bila belum ada sale aktif. */ .dmu-home-flash-sale { margin-right: -14px; margin-left: -14px; padding: 15px 0 16px; background: linear-gradient(135deg, #2a0509 0%, #71101b 46%, #bc1525 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.08); } .dmu-home-flash-head { display: flex; padding: 0 14px 11px; align-items: flex-end; justify-content: space-between; gap: 10px; color: #fff; } .dmu-home-flash-kicker { display: block; margin-bottom: 2px; color: #ffd9dd; font-size: 9px; font-weight: 900; letter-spacing: .08em; } .dmu-home-flash-head h2 { margin: 0; color: #fff; font-size: 19px; font-weight: 900; line-height: 1.1; } .dmu-home-flash-countdown { display: flex; align-items: center; gap: 3px; color: #fff; font-size: 10px; font-weight: 850; } .dmu-home-flash-countdown span { display: grid; min-width: 25px; height: 25px; padding: 0 4px; place-items: center; border-radius: 6px; background: rgba(255,255,255,.15); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); } .dmu-home-flash-countdown b { font-weight: 900; } .dmu-home-flash-products { margin: 0; padding: 0 14px 2px; } .dmu-home-flash-products .dmu-home-product-card { box-shadow: 0 8px 20px rgba(0,0,0,.18); } /* Artikel berada paling bawah seperti alur editorial marketplace. */ .dmu-home-article-section { margin-bottom: 10px; } .dmu-home-article-card { display: block; flex: 0 0 min(78vw, 330px); width: min(78vw, 330px); overflow: hidden; scroll-snap-align: start; border: 1px solid #eceef1; border-radius: 14px; background: #fff; box-shadow: 0 5px 16px rgba(16, 24, 40, .055); } .dmu-home-article-media { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #f4f5f6; } .dmu-home-article-media img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; } .dmu-home-article-copy { display: block; min-height: 82px; padding: 12px 13px 13px; } .dmu-home-article-copy strong { display: -webkit-box; overflow: hidden; color: #21252b; font-size: 13px; font-weight: 780; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .dmu-home-article-copy small { display: block; margin-top: 8px; color: #a0a5ac; font-size: 10px; line-height: 1.2; } } @media (max-width: 390px) { .dmu-home-product-scroller, .dmu-home-article-scroller { margin-right: -11px; margin-left: -11px; padding-right: 11px; padding-left: 11px; } .dmu-home-product-card { flex-basis: 46.5vw; width: 46.5vw; } .dmu-home-flash-sale { margin-right: -11px; margin-left: -11px; } .dmu-home-flash-head, .dmu-home-flash-products { padding-right: 11px; padding-left: 11px; } } /* Digioto Mobile UI v1.3.4 — Auth UI (Login / Register / Password) */ body#page-auth.dmu-auth-enhanced { background: radial-gradient(circle at 8% 12%, rgba(239, 27, 45, .045), transparent 28rem), linear-gradient(180deg, #f7f8fa 0%, #f3f5f7 100%); } body#page-auth.dmu-auth-enhanced .dmu-auth-row { min-height: calc(100vh - 64px); margin: 0 !important; align-items: center; padding: 32px 12px !important; } body#page-auth.dmu-auth-enhanced .dmu-auth-column { width: 100% !important; max-width: 1180px !important; flex: 0 0 100% !important; padding: 0 !important; } body#page-auth.dmu-auth-enhanced .dmu-auth-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr); min-height: 650px; overflow: hidden; border: 1px solid #eaecf0; border-radius: 22px; background: #fff; box-shadow: 0 20px 60px rgba(16, 24, 40, .10); } body#page-auth.dmu-auth-enhanced .dmu-auth-card, body#page-auth.dmu-auth-enhanced .dmu-auth-card.auth-card__horizontal { display: flex !important; width: 100% !important; min-width: 0; margin: 0 !important; flex-direction: column; justify-content: center; border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; } body#page-auth.dmu-auth-enhanced .dmu-auth-card .auth-card__left { display: none !important; } body#page-auth.dmu-auth-enhanced .dmu-auth-card .auth-card__right { width: 100% !important; max-width: none !important; flex: 1 1 auto !important; padding: 0 !important; background: #fff !important; } body#page-auth.dmu-auth-enhanced .dmu-auth-brand { padding: 54px 58px 0; } body#page-auth.dmu-auth-enhanced .dmu-auth-brand a { display: inline-flex; align-items: center; text-decoration: none; } body#page-auth.dmu-auth-enhanced .dmu-auth-brand img { display: block; width: min(190px, 48vw); height: auto; } body#page-auth.dmu-auth-enhanced .auth-card__header { padding: 34px 58px 0 !important; border: 0 !important; background: transparent !important; } body#page-auth.dmu-auth-enhanced .auth-card__header > div { display: block !important; } body#page-auth.dmu-auth-enhanced .auth-card__header-icon { display: none !important; } body#page-auth.dmu-auth-enhanced .auth-card__header-title { margin: 0 !important; color: #101828; font-size: clamp(26px, 2.2vw, 34px) !important; font-weight: 800; line-height: 1.18; letter-spacing: -.025em; } body#page-auth.dmu-auth-enhanced .auth-card__header-description[hidden] { display: none !important; } body#page-auth.dmu-auth-enhanced .dmu-auth-subtitle { max-width: 480px; margin: 10px 0 0; color: #667085; font-size: 15px; line-height: 1.6; } body#page-auth.dmu-auth-enhanced .auth-card__body { padding: 28px 58px 56px !important; } body#page-auth.dmu-auth-enhanced .auth-card form label, body#page-auth.dmu-auth-enhanced .auth-card .form-label { margin-bottom: 7px; color: #344054; font-size: 14px; font-weight: 650; } body#page-auth.dmu-auth-enhanced .auth-card form .form-control, body#page-auth.dmu-auth-enhanced .auth-card form .form-select, body#page-auth.dmu-auth-enhanced .auth-card form input:not([type='checkbox']):not([type='radio']) { min-height: 52px !important; border: 1px solid #d0d5dd !important; border-radius: 10px !important; background: #fff !important; color: #101828 !important; font-size: 15px !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .03) !important; transition: border-color .18s ease, box-shadow .18s ease; } body#page-auth.dmu-auth-enhanced .auth-card form .form-control:focus, body#page-auth.dmu-auth-enhanced .auth-card form .form-select:focus, body#page-auth.dmu-auth-enhanced .auth-card form input:not([type='checkbox']):not([type='radio']):focus { border-color: rgba(239, 27, 45, .58) !important; box-shadow: 0 0 0 4px rgba(239, 27, 45, .08) !important; } body#page-auth.dmu-auth-enhanced .auth-card form .auth-input-icon { top: 4px !important; width: 44px; height: 44px; color: #667085; } body#page-auth.dmu-auth-enhanced .auth-card form .auth-input-icon + .form-control, body#page-auth.dmu-auth-enhanced .auth-card form .ps-5 { padding-inline-start: 48px !important; } body#page-auth.dmu-auth-enhanced .auth-card .mb-3 { margin-bottom: 18px !important; } body#page-auth.dmu-auth-enhanced .auth-card .form-check-label { color: #475467; font-size: 14px; font-weight: 500; } body#page-auth.dmu-auth-enhanced .auth-card .form-check-input { border-color: #d0d5dd; border-radius: 4px; } body#page-auth.dmu-auth-enhanced .auth-card .form-check-input:checked { border-color: #ef1b2d !important; background-color: #ef1b2d !important; } body#page-auth.dmu-auth-enhanced .auth-card a { color: #d81929; text-underline-offset: 3px; } body#page-auth.dmu-auth-enhanced .auth-card .btn-auth-submit { min-height: 52px; border: 0 !important; border-radius: 10px !important; background: #ef1b2d !important; color: #fff !important; font-size: 15px; font-weight: 800; letter-spacing: .01em; box-shadow: 0 10px 22px rgba(239, 27, 45, .20); } body#page-auth.dmu-auth-enhanced .auth-card .btn-auth-submit:hover, body#page-auth.dmu-auth-enhanced .auth-card .btn-auth-submit:focus { background: #d91627 !important; box-shadow: 0 12px 24px rgba(239, 27, 45, .24); } body#page-auth.dmu-auth-enhanced .auth-card .mt-3.text-center { margin-top: 18px !important; color: #667085; font-size: 14px; } body#page-auth.dmu-auth-enhanced .login-options { margin-top: 30px; } body#page-auth.dmu-auth-enhanced .login-options-title { position: relative; margin: 0 0 18px; text-align: center; } body#page-auth.dmu-auth-enhanced .login-options-title::before { position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: #eaecf0; content: ''; } body#page-auth.dmu-auth-enhanced .login-options-title p { position: relative; display: inline-block; margin: 0; padding: 0 14px; background: #fff; color: #98a2b3; font-size: 13px; } body#page-auth.dmu-auth-enhanced .social-login-basic, body#page-auth.dmu-auth-enhanced .social-icons { display: grid !important; margin: 0 !important; padding: 0 !important; gap: 10px; list-style: none !important; } body#page-auth.dmu-auth-enhanced .social-login-basic li, body#page-auth.dmu-auth-enhanced .social-icons li { width: 100% !important; margin: 0 !important; } body#page-auth.dmu-auth-enhanced .social-login-basic a, body#page-auth.dmu-auth-enhanced .social-icons a { display: flex !important; width: 100% !important; min-height: 52px; align-items: center; justify-content: center; gap: 10px; border: 1px solid #e4e7ec !important; border-radius: 10px !important; background: #fff !important; color: #344054 !important; font-size: 14px; font-weight: 700; text-decoration: none !important; box-shadow: none !important; } body#page-auth.dmu-auth-enhanced .social-login-basic img, body#page-auth.dmu-auth-enhanced .social-icons img, body#page-auth.dmu-auth-enhanced .social-icons svg { width: 20px !important; height: 20px !important; flex: 0 0 20px; } body#page-auth.dmu-auth-enhanced .dmu-auth-visual { position: relative; display: flex; min-width: 0; overflow: hidden; align-items: flex-end; padding: 68px 64px; background: radial-gradient(circle at 72% 18%, rgba(255, 78, 94, .24), transparent 26%), radial-gradient(circle at 18% 86%, rgba(239, 27, 45, .18), transparent 28%), linear-gradient(145deg, #111216 0%, #1c0b0f 55%, #4c0a12 100%); color: #fff; } body#page-auth.dmu-auth-enhanced .dmu-auth-visual::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 34px 34px; content: ''; mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 92%); } body#page-auth.dmu-auth-enhanced .dmu-auth-visual-content { position: relative; z-index: 2; max-width: 500px; } body#page-auth.dmu-auth-enhanced .dmu-auth-eyebrow { display: inline-flex; margin-bottom: 18px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.06); color: #ffd5d9; font-size: 11px; font-weight: 850; letter-spacing: .14em; } body#page-auth.dmu-auth-enhanced .dmu-auth-visual h2 { margin: 0; color: #fff; font-size: clamp(36px, 4vw, 58px); font-weight: 760; line-height: 1.03; letter-spacing: -.04em; } body#page-auth.dmu-auth-enhanced .dmu-auth-visual h2 strong { color: #ff4556; font-weight: 860; } body#page-auth.dmu-auth-enhanced .dmu-auth-visual p { max-width: 470px; margin: 24px 0 28px; color: rgba(255,255,255,.74); font-size: 15px; line-height: 1.7; } body#page-auth.dmu-auth-enhanced .dmu-auth-benefits { display: flex; flex-wrap: wrap; gap: 10px; } body#page-auth.dmu-auth-enhanced .dmu-auth-benefits span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.055); color: rgba(255,255,255,.88); font-size: 12px; font-weight: 650; backdrop-filter: blur(10px); } body#page-auth.dmu-auth-enhanced .dmu-auth-benefits i { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #ef1b2d; color: #fff; font-size: 11px; font-style: normal; } body#page-auth.dmu-auth-enhanced .dmu-auth-wheel { position: absolute; top: 54px; right: -74px; width: 310px; height: 310px; border: 28px solid rgba(255,255,255,.055); border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.05), 0 0 80px rgba(239,27,45,.12); } body#page-auth.dmu-auth-enhanced .dmu-auth-wheel::before, body#page-auth.dmu-auth-enhanced .dmu-auth-wheel::after { position: absolute; top: 50%; left: 50%; border-radius: 50%; content: ''; transform: translate(-50%, -50%); } body#page-auth.dmu-auth-enhanced .dmu-auth-wheel::before { width: 72px; height: 72px; border: 12px solid rgba(255,255,255,.08); } body#page-auth.dmu-auth-enhanced .dmu-auth-wheel::after { width: 18px; height: 18px; background: rgba(255,255,255,.16); } body#page-auth.dmu-auth-enhanced .dmu-auth-wheel span { position: absolute; top: 50%; left: 50%; width: 118px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.045); transform-origin: 0 50%; } body#page-auth.dmu-auth-enhanced .dmu-auth-wheel span:nth-child(1) { transform: rotate(0deg); } body#page-auth.dmu-auth-enhanced .dmu-auth-wheel span:nth-child(2) { transform: rotate(60deg); } body#page-auth.dmu-auth-enhanced .dmu-auth-wheel span:nth-child(3) { transform: rotate(120deg); } body#page-auth.dmu-auth-enhanced .dmu-auth-wheel span:nth-child(4) { transform: rotate(180deg); } body#page-auth.dmu-auth-enhanced .dmu-auth-wheel span:nth-child(5) { transform: rotate(240deg); } body#page-auth.dmu-auth-enhanced .dmu-auth-wheel span:nth-child(6) { transform: rotate(300deg); } @media (max-width: 991.98px) { body#page-auth.dmu-auth-enhanced .dmu-auth-layout { grid-template-columns: minmax(0, 1fr) minmax(330px, .8fr); } body#page-auth.dmu-auth-enhanced .dmu-auth-brand, body#page-auth.dmu-auth-enhanced .auth-card__header, body#page-auth.dmu-auth-enhanced .auth-card__body { padding-right: 40px !important; padding-left: 40px !important; } body#page-auth.dmu-auth-enhanced .dmu-auth-visual { padding: 48px 36px; } } @media (max-width: 767.98px) { body#page-auth.dmu-page-auth { padding-top: 0 !important; padding-bottom: 0 !important; background: #fff !important; } body#page-auth.dmu-page-auth .dmu-mobile-header, body#page-auth.dmu-page-auth .dmu-bottom-nav, body#page-auth.dmu-page-auth .dmu-product-actions { display: none !important; } body#page-auth.dmu-auth-enhanced .dmu-auth-row { min-height: 100vh; align-items: flex-start; padding: 0 !important; } body#page-auth.dmu-auth-enhanced .dmu-auth-column { max-width: none !important; } body#page-auth.dmu-auth-enhanced .dmu-auth-layout { display: block; min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; } body#page-auth.dmu-auth-enhanced .dmu-auth-visual { display: none !important; } body#page-auth.dmu-auth-enhanced .dmu-auth-card { min-height: 100vh; justify-content: flex-start; } body#page-auth.dmu-auth-enhanced .dmu-auth-brand { padding: 34px 24px 0 !important; } body#page-auth.dmu-auth-enhanced .dmu-auth-brand img { width: 150px; } body#page-auth.dmu-auth-enhanced .auth-card__header { padding: 30px 24px 0 !important; } body#page-auth.dmu-auth-enhanced .auth-card__header-title { font-size: 27px !important; } body#page-auth.dmu-auth-enhanced .dmu-auth-subtitle { font-size: 14px; } body#page-auth.dmu-auth-enhanced .auth-card__body { padding: 24px 24px 44px !important; } body#page-auth.dmu-auth-enhanced .auth-card form .form-control, body#page-auth.dmu-auth-enhanced .auth-card form .form-select, body#page-auth.dmu-auth-enhanced .auth-card form input:not([type='checkbox']):not([type='radio']), body#page-auth.dmu-auth-enhanced .auth-card .btn-auth-submit, body#page-auth.dmu-auth-enhanced .social-login-basic a, body#page-auth.dmu-auth-enhanced .social-icons a { min-height: 50px !important; } }