/* ============================================================ Chat Antar Store — Design System (mobile-app style) Tanpa framework CSS eksternal. Ringan & cepat. ============================================================ */ :root { --brand: #00C46A; --brand-dark: #009E55; --brand-soft: #E0FFF1; --brand-rgb: 0,196,106; --secondary: #2F6F8F; --secondary-soft: #EAF1F6; --ink: #1F2530; --muted: #8A909B; --line: #EDEFF2; --bg: #F6F7F9; --card: #FFFFFF; --green: #00C46A; --red: #E10E2E; --amber: #FFB800; --radius: 18px; --radius-sm: 12px; --shadow: 0 12px 30px rgba(20, 40, 30, .07); --shadow-sm: 0 4px 14px rgba(20, 40, 30, .05); --app-max: 460px; --nav-h: 66px; --safe-b: env(safe-area-inset-bottom, 0px); font-family: 'Plus Jakarta Sans', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ============ TEMA (data-theme di ) ============ */ html[data-theme="coral"] { --brand:#FF5630; --brand-dark:#D93C1E; --brand-soft:#FFF0ED; --brand-rgb:255,86,48; } html[data-theme="kuning"] { --brand:#FFB800; --brand-dark:#CC9200; --brand-soft:#FFF8E0; --brand-rgb:255,184,0; } html[data-theme="biru"] { --brand:#1488F5; --brand-dark:#0B6ACC; --brand-soft:#E8F3FE; --brand-rgb:20,136,245; } html[data-theme="tosca"] { --brand:#00B5A3; --brand-dark:#008F82; --brand-soft:#E0F7F5; --brand-rgb:0,181,163; } html[data-theme="merah"] { --brand:#E10E2E; --brand-dark:#B50A24; --brand-soft:#FDE8EB; --brand-rgb:225,14,46; } html[data-theme="gelap"] { --brand:#00D47A; --brand-dark:#00A85E; --brand-soft:#003322; --brand-rgb:0,212,122; --ink:#E9ECEF; --muted:#97A1AB; --line:#2A3138; --bg:#13161A; --card:#1D2228; --shadow:0 12px 30px rgba(0,0,0,.4); --shadow-sm:0 4px 14px rgba(0,0,0,.35); --appbar-glass:rgba(29,34,40,.9); } html[data-theme="gelap"] body { background: var(--bg); color: var(--ink); } html[data-theme="gelap"] .searchbar, html[data-theme="gelap"] input, html[data-theme="gelap"] textarea, html[data-theme="gelap"] select { background: var(--card); color: var(--ink); border-color: var(--line); } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; } body { font-family: inherit; color: var(--ink); background: var(--bg); line-height: 1.5; font-size: 15px; overscroll-behavior-y: none; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, select, textarea { font-family: inherit; font-size: 15px; } /* ---- App shell : centered phone frame on desktop ---- */ .app { max-width: var(--app-max); margin: 0 auto; min-height: 100vh; background: var(--bg); position: relative; padding-bottom: calc(var(--nav-h) + var(--safe-b) + 16px); padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 16px); box-shadow: 0 0 60px rgba(0,0,0,.06); } @media (min-width: 480px) { body { padding: 0; } } /* ---- App bar ---- */ .appbar { position: sticky; top: 0; z-index: 40; background: var(--appbar-glass, rgba(255,255,255,.85)); -webkit-backdrop-filter: saturate(1.6) blur(12px); backdrop-filter: saturate(1.6) blur(12px); padding: 12px 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); } .appbar.brand-bar { background: linear-gradient(135deg, var(--brand-dark), var(--brand)); border: none; color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } .appbar .title { font-weight: 800; font-size: 18px; letter-spacing: -.01em; } .appbar .sub { font-size: 12px; opacity: .9; } .appbar .grow { flex: 1; } .appbar .icon-btn { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 16px; background: rgba(255,255,255,.18); color: #fff; transition: transform .12s, background .15s; } .appbar .icon-btn:active { transform: scale(.92); } .appbar:not(.brand-bar) .icon-btn { background: var(--bg); color: var(--ink); border: 1px solid var(--line); } /* ---- Search ---- */ .searchbar { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 11px 16px; box-shadow: var(--shadow-sm); } .searchbar i { color: var(--muted); } .searchbar input { flex: 1; border: none; outline: none; background: none; } /* ---- Sections ---- */ .section { padding: 16px; } .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .section-head h2 { font-size: 16px; font-weight: 700; } .section-head a { font-size: 13px; color: var(--brand); font-weight: 600; } /* ---- Banner / Swiper ---- */ .banner { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .banner img { width: 100%; aspect-ratio: 5/2; object-fit: cover; } /* ---- Category pills ---- */ .cats { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; } .cats::-webkit-scrollbar { display: none; } .cat { flex: 0 0 auto; width: 72px; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); } .cat .ic { width: 58px; height: 58px; border-radius: 18px; margin: 0 auto 6px; display: grid; place-items: center; font-size: 22px; background: var(--ic-bg, var(--brand-soft)); color: var(--ic-fg, var(--brand)); transition: transform .15s, box-shadow .15s; } .cat.active { color: var(--brand); } .cat .ic { transition: background .2s, color .2s, box-shadow .2s; } .cat.active .ic { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(var(--brand-rgb),.22); } .cat:active .ic { transform: scale(.94); } /* ---- Segment toggle ---- */ .segs { display: flex; gap: 8px; background: var(--card); border-radius: 999px; padding: 5px; box-shadow: var(--shadow-sm); } .seg { flex: 1; text-align: center; padding: 9px; border-radius: 999px; font-weight: 600; font-size: 13px; color: var(--muted); } .seg.active { background: var(--brand); color: #fff; } /* ---- Product / menu cards ---- */ .menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .card { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); display: flex; flex-direction: column; } .card .thumb { position: relative; aspect-ratio: 1/1; background: var(--bg); } .card .thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .card .pop { position: absolute; top: 8px; left: 8px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; z-index: 2; } .card .badge-new { position: absolute; top: 8px; left: 8px; background: var(--brand-soft); color: var(--brand); font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 999px; z-index: 2; } .card .body { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 3px; flex: 1; } .card .name { font-weight: 600; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } .card .card-row2 { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 1px; } .card .partner { font-size: 11px; color: var(--muted); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card .price { font-size: 16px; font-weight: 800; color: var(--brand); margin-top: 3px; } .card .stock-low { font-size: 10px; color: var(--amber); font-weight: 600; } /* tombol + bulat di pojok kanan bawah foto */ .thumb-addable { cursor: pointer; } .thumb-addable:active img { transform: scale(.97); } .thumb img { transition: transform .15s ease; } .thumb-plus { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 14px; box-shadow: 0 4px 12px rgba(var(--brand-rgb),.45); } .thumb-plus i { font-size: 13px; } .thumb-soldout { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20,30,25,.55); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .5px; } .thumb-closed { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(20,30,25,.64); color: #fff; font-weight: 800; font-size: 13px; text-align: center; padding: 8px; } .thumb-closed i { font-size: 18px; margin-bottom: 2px; } .thumb-closed small { font-weight: 600; font-size: 10.5px; opacity: .92; line-height: 1.25; } .store-closed-card .body { opacity: .6; } .store-closed-banner { display: flex; align-items: flex-start; gap: 10px; background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.4; } .store-closed-banner i { font-size: 18px; margin-top: 1px; } .card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rating-mini { font-size: 11px; font-weight: 700; color: #E0A100; display: inline-flex; align-items: center; gap: 3px; flex: none; } .rating-mini.rating-new { color: var(--muted); font-weight: 600; } /* header: sapaan + lokasi */ .g-greet { font-size: 12px; color: var(--muted); font-weight: 600; } .g-locbar { display: flex; align-items: center; gap: 8px; margin: 4px 16px 0; padding: 9px 13px; background: var(--brand-soft); border-radius: 14px; color: var(--text); font-size: 13px; font-weight: 600; } .g-locbar .fa-location-dot { color: var(--brand); } .g-locbar-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .g-locbar-ch { font-size: 11px; color: var(--muted); } .card.sold-out { opacity: .55; } /* list style cards (retail / restaurant rows) */ .list-card { display: flex; gap: 12px; background: var(--card); border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); align-items: center; } .list-card img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; } .list-card .info { flex: 1; min-width: 0; } .list-card .info .name { font-weight: 600; } .list-card .info .meta { font-size: 12px; color: var(--muted); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border-radius: 14px; font-weight: 600; transition: transform .12s, box-shadow .12s, background .12s; width: 100%; } .btn:active { transform: scale(.98); } .btn-brand { background: linear-gradient(135deg, var(--brand-dark), var(--brand)); color: #fff; box-shadow: 0 8px 20px rgba(var(--brand-rgb),.22); } .btn-ghost { background: var(--bg); color: var(--ink); } .btn-outline { background: var(--card); color: var(--brand); border: 1.5px solid var(--brand); } .btn-block { width: 100%; } .btn-sm { padding: 9px 14px; font-size: 13px; border-radius: 11px; width: auto; } .btn:disabled { opacity: .55; pointer-events: none; } /* ---- Badges ---- */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; } .badge-amber { background: #FEF3C7; color: #B45309; } .badge-blue { background: #DBEAFE; color: #1D4ED8; } .badge-indigo { background: #E0E7FF; color: #4338CA; } .badge-violet { background: #EDE9FE; color: #6D28D9; } .badge-green { background: #DCFCE7; color: #15803D; } .badge-red { background: #FEE2E2; color: #B91C1C; } .badge-slate { background: #F1F5F9; color: #475569; } /* ---- Bottom navigation ---- */ .bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--app-max); z-index: 50; background: var(--card); border-top: 1px solid var(--line); display: flex; justify-content: space-around; align-items: center; height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -6px 24px rgba(15,24,43,.06); } .bottom-nav a { flex: 1; text-align: center; color: var(--muted); font-size: 10.5px; font-weight: 600; padding: 8px 0; position: relative; } .bottom-nav a i { font-size: 19px; display: block; margin-bottom: 3px; } .bottom-nav a.active { color: var(--brand); } .bottom-nav .cart-btn { position: relative; } .bottom-nav .nav-badge { position: absolute; top: 2px; right: 24%; background: var(--red); color: #fff; font-size: 9px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px; display: grid; place-items: center; padding: 0 4px; } .bottom-nav .chat-nav-dot { position: absolute; top: 4px; right: 28%; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--card); animation: chatDotPulse 1.6s ease-in-out infinite; } @keyframes chatDotPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .7; } } /* ---- Cart per toko ---- */ .cart-group { margin-bottom: 16px; } .cart-store { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 800; font-size: 14px; margin-bottom: 8px; padding-bottom: 7px; border-bottom: 2px solid var(--brand-soft); } .cart-store i { color: var(--brand); margin-right: 5px; } .multi-store-note { background: #FFF6DB; color: #8a6d1a; border-radius: 12px; padding: 10px 12px; font-size: 12px; margin-bottom: 14px; display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; } .multi-store-note i { color: #E0A100; margin-top: 1px; } /* ---- Cart / sheet ---- */ .cart-line { display: flex; gap: 12px; align-items: center; padding: 12px; margin-bottom: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); } .cart-line img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; flex: 0 0 auto; } .qty { display: inline-flex; align-items: center; gap: 10px; background: var(--bg); border-radius: 999px; padding: 4px; } .qty button { width: 28px; height: 28px; border-radius: 50%; background: var(--card); color: var(--brand); display: grid; place-items: center; font-weight: 700; box-shadow: var(--shadow-sm); } .qty span { min-width: 18px; text-align: center; font-weight: 600; } .summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; } .summary-row.total { font-weight: 700; font-size: 16px; border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 12px; } .summary-row .muted { color: var(--muted); } .summary-row .free { color: var(--green); font-weight: 600; } /* ---- Forms ---- */ .field { margin-bottom: 14px; } .field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink); } .input, select.input, textarea.input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); outline: none; transition: border-color .15s; } .input:focus { border-color: var(--brand); } textarea.input { resize: vertical; min-height: 90px; } /* ---- Empty / states ---- */ .empty { text-align: center; padding: 52px 24px; color: var(--muted); } .empty i { font-size: 40px; color: var(--brand); margin-bottom: 16px; width: 96px; height: 96px; border-radius: 50%; background: var(--brand-soft); display: inline-grid; place-items: center; } .empty p { font-weight: 600; color: var(--ink); } /* ---- Sticky checkout bar ---- */ .checkout-bar { position: fixed; bottom: calc(var(--nav-h) + var(--safe-b)); left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--app-max); z-index: 45; background: var(--card); border-top: 1px solid var(--line); padding: 12px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 -6px 24px rgba(15,24,43,.08); } .checkout-bar .total-lbl { font-size: 12px; color: var(--muted); } .checkout-bar .total-val { font-weight: 700; font-size: 17px; } /* ---- Status timeline ---- */ .timeline { position: relative; padding-left: 28px; } .timeline .step { position: relative; padding-bottom: 18px; } .timeline .step::before { content: ''; position: absolute; left: -21px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--line); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); } .timeline .step.done::before { background: var(--green); box-shadow: 0 0 0 1px var(--green); } .timeline .step.active::before { background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); } .timeline::after { content: ''; position: absolute; left: 6px; top: 4px; bottom: 18px; width: 2px; background: var(--line); } .timeline .step .s-title { font-weight: 600; font-size: 14px; } .timeline .step .s-time { font-size: 12px; color: var(--muted); } /* ---- Toast ---- */ #toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: .3s; z-index: 100; max-width: 90%; text-align: center; } #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---- Modal / bottom sheet ---- */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(15,24,43,.5); z-index: 80; opacity: 0; pointer-events: none; transition: opacity .25s; } .sheet-backdrop.open { opacity: 1; pointer-events: auto; } .sheet { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%); width: 100%; max-width: var(--app-max); background: var(--card); border-radius: 22px 22px 0 0; z-index: 81; padding: 8px 18px calc(20px + var(--safe-b)); max-height: 88vh; overflow-y: auto; transition: transform .3s cubic-bezier(.4,0,.2,1); } .sheet.open { transform: translateX(-50%) translateY(0); } .sheet .handle { width: 42px; height: 5px; border-radius: 999px; background: var(--line); margin: 8px auto 14px; } .sheet h3 { font-size: 17px; font-weight: 700; margin-bottom: 12px; } .loc-saved-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 11px 13px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s, background .15s; text-align: left; } .loc-saved-item.active { border-color: var(--brand); background: var(--brand-soft); } .loc-saved-item:disabled { opacity: .6; } /* ---- Chat widget ---- */ .chat-fab { position: fixed; bottom: calc(var(--nav-h) + var(--safe-b) + 16px); right: max(16px, calc(50% - var(--app-max)/2 + 16px)); width: 54px; height: 54px; border-radius: 50%; background: var(--secondary); color: #fff; display: grid; place-items: center; font-size: 22px; box-shadow: 0 10px 24px rgba(63,131,248,.4); z-index: 46; } .chat-bubble { max-width: 78%; padding: 9px 13px; border-radius: 14px; font-size: 14px; margin-bottom: 8px; word-break: break-word; } .chat-bubble.me { background: var(--brand); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; } .chat-bubble.them { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; } /* Lampu merah pesan belum dibaca (di hub Pesan) */ .unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex: 0 0 auto; box-shadow: 0 0 0 0 rgba(224,83,61,.55); animation: unreadPulse 1.6s infinite; } @keyframes unreadPulse { 0% { box-shadow: 0 0 0 0 rgba(224,83,61,.55); } 70% { box-shadow: 0 0 0 6px rgba(224,83,61,0); } 100% { box-shadow: 0 0 0 0 rgba(224,83,61,0); } } /* ---- Utilities ---- */ .muted { color: var(--muted); } .tiny { font-size: 12px; } .center { text-align: center; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .flex { display: flex; } .between { justify-content: space-between; } .items-center { align-items: center; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .grow { flex: 1; } .hidden { display: none !important; } .skeleton { background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%); background-size: 400% 100%; animation: sk 1.4s ease infinite; border-radius: 10px; } @keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ---- Admin specific ---- */ .admin-wrap { max-width: 1100px; margin: 0 auto; padding: 0; } .admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; } .stat-card { background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); } .stat-card .v { font-size: 24px; font-weight: 700; } .stat-card .l { font-size: 12px; color: var(--muted); } .admin-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; scrollbar-width: none; } .admin-tabs::-webkit-scrollbar { display: none; } .admin-tabs a { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--bg); } .admin-tabs a.active { background: var(--brand); color: #fff; } .admin-tabs a .tab-count { display: inline-grid; place-items: center; margin-left: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; vertical-align: middle; } .table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .table th, .table td { padding: 11px 12px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--line); } .table th { background: var(--bg); font-weight: 600; color: var(--muted); } @media (min-width: 480px) { .admin-shell { max-width: 1100px; } } /* Profil */ .profile-hero { padding: 16px; display: flex; align-items: center; gap: 14px; } .profile-hero .avatar { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 24px; color: #fff; background: linear-gradient(135deg, var(--brand-dark), var(--brand)); box-shadow: 0 8px 18px rgba(var(--brand-rgb),.22); } .profile-hero .pname { font-weight: 700; font-size: 17px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-hero .pcontact { font-size: 12.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-hero .pbadges { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; } /* ---- Home hero (gaya app food delivery) ---- */ .home-hero { background: linear-gradient(150deg, var(--brand), var(--brand-dark)); color: #fff; padding: 20px 16px 26px; border-radius: 0 0 28px 28px; box-shadow: 0 12px 26px rgba(var(--brand-rgb),.18); } .home-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .home-hero .hh-hello { font-size: 12.5px; opacity: .9; font-weight: 500; letter-spacing: .02em; } .home-hero .hh-title { font-size: 19px; font-weight: 700; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-hero .hh-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.2); color: #fff; font-size: 17px; } .home-hero .hh-search { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 16px; padding: 13px 16px; margin-top: 16px; box-shadow: 0 12px 26px rgba(34,28,22,.16); } .home-hero .hh-search i { color: var(--brand); } .home-hero .hh-search input { flex: 1; border: none; outline: none; background: none; font-size: 14px; color: var(--ink); font-family: inherit; } .home-hero + .section { padding-top: 14px; } /* ---- Polish global ---- */ .card { transition: transform .14s ease, box-shadow .14s ease; } .card:active { transform: scale(.985); } .seg.active { box-shadow: 0 4px 12px rgba(var(--brand-rgb),.2); } .bottom-nav a.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; border-radius: 0 0 4px 4px; background: var(--brand); } /* ============================================================ ANIMASI & INTERAKSI (UI modern) ============================================================ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes popIn { 0% { opacity: 0; transform: scale(.92); } 100% { opacity: 1; transform: none; } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes floatPulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes rippleAnim { to { transform: scale(2.4); opacity: 0; } } @keyframes navPop { from { width: 0; opacity: 0; } to { width: 24px; opacity: 1; } } /* masuk halaman: hero + sections naik halus dengan stagger */ .home-hero { animation: fadeUp .5s cubic-bezier(.22,.61,.36,1) both; } .app .section { animation: fadeUp .5s cubic-bezier(.22,.61,.36,1) both; } .app .section:nth-of-type(2) { animation-delay: .05s; } .app .section:nth-of-type(3) { animation-delay: .10s; } .app .section:nth-of-type(4) { animation-delay: .15s; } .app .section:nth-of-type(5) { animation-delay: .20s; } .app .section:nth-of-type(6) { animation-delay: .24s; } /* kartu menu muncul pop + angkat saat hover (desktop) */ /* Kartu menu toko TANPA animasi masuk (sama seperti kartu populer di .pop-item) → overlay hijau terpotong rapi mengikuti sudut kartu. */ @media (hover: hover) { .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } } /* efek ripple di tombol & elemen ketuk */ .btn, .card .add, .cat, .seg, .hh-icon, .lang-item, .list-card, .icon-btn { position: relative; overflow: hidden; } .ripple { position: absolute; border-radius: 50%; transform: scale(0); background: currentColor; opacity: .25; animation: rippleAnim .55s ease-out; pointer-events: none; } /* chat mengambang lembut */ .chat-fab { animation: floatPulse 2.6s ease-in-out infinite; } /* sheet & backdrop lebih halus */ .sheet { transition: transform .32s cubic-bezier(.22,.61,.36,1); } .sheet-backdrop { transition: opacity .25s ease; } /* indikator nav aktif animasi */ .bottom-nav a.active::before { animation: navPop .3s ease; } .bottom-nav a i { transition: transform .2s ease; } .bottom-nav a.active i { transform: translateY(-1px) scale(1.08); } /* pilih bahasa */ .lang-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .lang-item { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px; font-weight: 600; color: var(--ink); transition: background .15s ease, border-color .15s ease, transform .1s ease; } .lang-item.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); } .lang-item:active { transform: scale(.98); } .lang-item i { color: var(--brand); } /* skeleton shimmer (untuk loading) */ .skeleton { background: linear-gradient(90deg, var(--line) 25%, var(--bg) 37%, var(--line) 63%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 8px; } /* input fokus modern */ .input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; transition: border-color .15s, box-shadow .15s; } /* hormati preferensi kurangi gerak */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ============================================================ TEMA GROCERY (header lokasi, search, toko bulat, nav pill) ============================================================ */ .g-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 6px; background: var(--card); } .g-user { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; } .g-avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 18px; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); } .g-userinfo { min-width: 0; } .g-name { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .g-name .fa-circle-check { color: var(--brand); font-size: 12px; } .g-loc { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; max-width: 190px; } .g-loc span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .g-loc .fa-location-dot { color: var(--brand); } .g-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .g-iconbtn { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--ink); font-size: 16px; border: 1px solid var(--line); } .g-iconbtn .g-badge { top: -2px; right: -2px; left: auto; } .g-searchbar { padding: 8px 16px 12px; background: var(--card); position: sticky; top: 0; z-index: 15; } .g-search { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; } .g-search .search-ic { color: var(--muted); } .g-search input { flex: 1; border: none; outline: none; background: none; font-size: 14px; color: var(--ink); font-family: inherit; } .g-search .g-filter { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--brand); color: #fff; font-size: 13px; } /* kategori bulat */ .cat .ic { border-radius: 50%; } /* baris toko (logo bulat) */ .store-row { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 6px; } .store-row::-webkit-scrollbar { display: none; } .store-item { flex: 0 0 auto; width: 68px; text-align: center; color: inherit; } .store-logo { position: relative; width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .store-logo img { width: 100%; height: 100%; object-fit: cover; } .store-logo.is-closed img { filter: grayscale(.9) opacity(.6); } .store-closed { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: #fff; background: rgba(20,30,25,.45); } .store-name { font-size: 11.5px; font-weight: 600; margin-top: 7px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ====== Segment switcher besar (Restoran / Ritel) ====== */ .seg-switch { display: flex; gap: 10px; } .seg-card { flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; background: var(--card); border: 1.5px solid var(--line); color: var(--text); transition: transform .15s, box-shadow .2s, border-color .2s; } .seg-card:active { transform: scale(.97); } .seg-emoji { font-size: 26px; line-height: 1; filter: saturate(1.1); } .seg-text { display: flex; flex-direction: column; line-height: 1.15; } .seg-label { font-weight: 800; font-size: 14.5px; } .seg-desc { font-size: 11px; color: var(--muted); margin-top: 2px; } .seg-card.active { background: linear-gradient(135deg, var(--brand), #2c6b39); border-color: transparent; color: #fff; box-shadow: 0 8px 20px rgba(var(--brand-rgb),.28); } .seg-card.active .seg-desc { color: rgba(255,255,255,.85); } /* ====== Kartu toko modern (ganti logo bulat) ====== */ .store-card { flex: 0 0 auto; width: 150px; color: inherit; } .store-img { position: relative; width: 150px; height: 100px; border-radius: 16px; overflow: hidden; background: #eef1ee; box-shadow: var(--shadow-sm); } .store-img img { width: 100%; height: 100%; object-fit: cover; } .store-pill { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; color: #fff; backdrop-filter: blur(2px); } .store-pill.on { background: rgba(var(--brand-rgb),.92); } .store-pill.off { background: rgba(60,60,60,.78); } .store-nm { font-size: 13.5px; font-weight: 700; margin-top: 8px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .store-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; } .store-sub i { font-size: 10px; margin-right: 2px; } /* section head: tautan "Lihat semua" */ .section-head a { font-size: 13px; color: var(--brand); font-weight: 600; } /* bottom nav: pill hijau di item aktif */ .bottom-nav a.active::before { display: none; } .bottom-nav a i { padding: 5px 14px; border-radius: 999px; transition: background .2s ease, color .2s ease, transform .2s ease; } .bottom-nav a.active i { background: var(--brand-soft); color: var(--brand); transform: none; } /* free delivery badge (untuk kartu produk) */ .free-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; padding: 4px 9px; border-radius: 999px; } /* ---- Geser untuk terima (gaya Foodpanda) ---- */ .swipe { position: relative; height: 52px; border-radius: 14px; background: var(--brand-soft); overflow: hidden; user-select: none; touch-action: pan-y; } .swipe .swipe-label { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; color: var(--brand); pointer-events: none; font-size: 14px; } .swipe .swipe-knob { position: absolute; top: 4px; left: 4px; height: 44px; width: 58px; border-radius: 11px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 18px; box-shadow: var(--shadow-sm); cursor: grab; touch-action: none; } .swipe.done { background: var(--brand); } .swipe.done .swipe-label { color: #fff; } .order-incoming { border-left: 3px solid var(--brand); } @keyframes icon-rotate { to { transform: rotate(360deg); } } .icon-spin { display: inline-block; animation: icon-rotate 1s linear infinite; } /* ---- Animasi masak ---- */ @keyframes cookBob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } } @keyframes steamUp { 0% { opacity: 0; transform: translateY(2px) scale(.7); } 35% { opacity: .85; } 100% { opacity: 0; transform: translateY(-16px) scale(1.25); } } .cook-wrap { display: inline-flex; flex-direction: column; align-items: center; position: relative; } .cook-steam { display: flex; gap: 5px; height: 16px; margin-bottom: -2px; } .cook-steam span { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: 0; animation: steamUp 1.6s ease-out infinite; } .cook-steam span:nth-child(2) { animation-delay: .4s; } .cook-steam span:nth-child(3) { animation-delay: .8s; } .cook-emoji { font-size: 46px; animation: cookBob 1.1s ease-in-out infinite; } /* ---- Modal urgent (pop-up pesanan baru) ---- */ .urgent-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(15,30,20,.6); display: flex; align-items: center; justify-content: center; padding: 24px; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .urgent-card { background: var(--card); border-radius: 20px; padding: 26px 22px; text-align: center; max-width: 340px; width: 100%; animation: popIn .25s ease; box-shadow: 0 20px 50px rgba(0,0,0,.25); } .urgent-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-size: 28px; margin: 0 auto 14px; animation: cookBob .8s ease-in-out infinite; } .urgent-card h3 { font-size: 18px; font-weight: 700; } .urgent-card p { color: var(--muted); font-size: 13px; margin: 6px 0 16px; } .urgent-card .btn { margin-top: 8px; } /* ====== Splash pembuka (animasi "Chat Antar" + loading) ====== */ html.splash-lock, html.splash-lock body { overflow: hidden; } .splash { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.18) 0%, transparent 55%), linear-gradient(155deg, var(--brand) 0%, var(--brand-dark) 100%); color: #fff; transition: opacity .6s ease, visibility .6s; } .splash.hide { opacity: 0; visibility: hidden; } .splash-bg-overlay { position: absolute; inset: 0; pointer-events: none; } .splash-inner { position: relative; z-index: 1; } /* ── Promo popup (iklan/promo setelah splash) ── */ .promo-overlay { position:fixed; inset:0; z-index:9997; background:rgba(0,0,0,.78); display:flex; align-items:center; justify-content:center; padding:24px; } .promo-in { animation:obPopIn .32s cubic-bezier(.34,1.28,.64,1) both; } .promo-out { animation:obPopOut .22s ease both; } .promo-card { position:relative; width:100%; max-width:min(320px,calc(100vw - 48px)); border-radius:18px; overflow:hidden; box-shadow:0 28px 72px rgba(0,0,0,.55); } .promo-close { position:absolute; top:10px; right:10px; background:rgba(0,0,0,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:none; color:#fff; width:30px; height:30px; border-radius:50%; cursor:pointer; z-index:5; display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1; } .promo-img { width:100%; display:block; object-fit:cover; } .promo-cta { background:var(--brand); color:#fff; text-align:center; padding:14px 20px; font-weight:700; font-size:15px; } /* ── Onboarding popup (Shopee-style) ── */ .onboard-overlay { position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,.78); display:flex; align-items:center; justify-content:center; padding:20px; } .onboard-overlay.no-backdrop { background:rgba(0,0,0,.45); } .onboard-in { animation:obPopIn .35s cubic-bezier(.34,1.36,.64,1) both; } .onboard-out { animation:obPopOut .25s ease both; } @keyframes obPopIn { from { opacity:0; transform:scale(.88) } to { opacity:1; transform:scale(1) } } @keyframes obPopOut { from { opacity:1; transform:scale(1) } to { opacity:0; transform:scale(.92) } } @keyframes obFadeIn { from { opacity:0; transform:translateX(14px) } to { opacity:1; transform:none } } .onboard-card { background:var(--card); border-radius:20px; width:100%; max-width:min(360px,calc(100vw - 40px)); position:relative; overflow:hidden; box-shadow:0 28px 72px rgba(0,0,0,.45); display:flex; flex-direction:column; max-height:calc(100dvh - 40px); } .onboard-skip { position:absolute; top:10px; right:10px; background:rgba(0,0,0,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:none; color:#fff; width:28px; height:28px; border-radius:50%; cursor:pointer; z-index:5; display:flex; align-items:center; justify-content:center; font-size:12px; line-height:1; } .onboard-slides { position:relative; overflow:hidden; } .onboard-slide { display:none; animation:obFadeIn .3s ease both; } .onboard-slide.active { display:block; } .onboard-img { width:100%; aspect-ratio:3/4; overflow:hidden; position:relative; max-height:56vh; } .onboard-img img { width:100%; height:100%; object-fit:cover; display:block; } .onboard-img-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.55)); pointer-events:none; } .onboard-img-empty { background:var(--brand-soft); display:flex; align-items:center; justify-content:center; font-size:52px; color:var(--brand); aspect-ratio:3/4; max-height:56vh; } .onboard-body { padding:18px 20px 4px; } .onboard-title { font-size:19px; font-weight:800; margin:0 0 7px; line-height:1.3; } .onboard-sub { font-size:13.5px; color:var(--muted); margin:0; line-height:1.6; } .onboard-footer { padding:14px 20px calc(18px + var(--safe-b)); display:flex; align-items:center; gap:10px; } .onboard-dots { display:flex; gap:6px; flex:1; align-items:center; } .onboard-dot { width:7px; height:7px; border-radius:4px; background:var(--line); cursor:pointer; transition:width .2s,background .2s; } .onboard-dot.active { width:22px; background:var(--brand); } .onboard-next { flex:none; height:40px; padding:0 22px; font-size:13.5px; border-radius:12px; } .splash-inner { text-align: center; padding: 24px; } .splash-logo { width: 92px; height: 92px; margin: 0 auto 20px; border-radius: 26px; display: grid; place-items: center; overflow: hidden; background: #fff; box-shadow: 0 18px 44px rgba(0,0,0,.28); animation: splashPop .6s cubic-bezier(.2,.8,.2,1) both, splashFloat 2.4s ease-in-out .7s infinite; } .splash-logo img { width: 100%; height: 100%; object-fit: cover; display: block; } .splash-title { font-size: 30px; font-weight: 800; letter-spacing: .5px; display: inline-flex; align-items: center; } .splash-title span { display: inline-block; animation: splashLetter .5s ease both; } .splash-title .sp-gap { width: 11px; } .splash-title span:nth-child(1){animation-delay:.20s} .splash-title span:nth-child(2){animation-delay:.26s} .splash-title span:nth-child(3){animation-delay:.32s} .splash-title span:nth-child(4){animation-delay:.38s} .splash-title span:nth-child(5){animation-delay:.44s} .splash-title span:nth-child(6){animation-delay:.50s} .splash-title span:nth-child(7){animation-delay:.56s} .splash-title span:nth-child(8){animation-delay:.62s} .splash-title span:nth-child(9){animation-delay:.68s} .splash-title span:nth-child(10){animation-delay:.74s} .splash-sub { margin-top: 9px; font-size: 12px; opacity: .92; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; animation: fadeUp .6s ease 1s both; } .splash-bar { width: 150px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.28); margin: 24px auto 0; overflow: hidden; } .splash-bar span { display: block; height: 100%; width: 38%; border-radius: 999px; background: #fff; animation: splashBar 1.4s ease-in-out infinite; } @keyframes splashPop { from { transform: scale(.5) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes splashFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes splashLetter { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes splashBar { 0% { transform: translateX(-130%); } 100% { transform: translateX(380%); } } /* ====== Banner geser otomatis + titik ====== */ .banner-slider { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .banner-slider::-webkit-scrollbar { display: none; } .banner-slider .banner { flex: 0 0 100%; scroll-snap-align: center; } .banner-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; } .banner-dots span { width: 6px; height: 6px; border-radius: 999px; background: var(--line); transition: width .25s, background .25s; } .banner-dots span.on { width: 20px; background: var(--brand); } /* ====== Baris "Paling Laris" (auto-scroll) ====== */ .pop-row { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .pop-row::-webkit-scrollbar { display: none; } .pop-item { flex: 0 0 160px; } /* ikon promo di pojok atas (aksen) */ .g-iconbtn.g-promo { background: var(--brand-soft); color: var(--brand); border-color: transparent; } /* ====== Segment switcher 3-opsi (kompak) ====== */ .seg-switch-3 { gap: 8px; } .seg-switch-3 .seg-card { flex-direction: column; text-align: center; gap: 4px; padding: 12px 6px; } .seg-switch-3 .seg-emoji { font-size: 24px; } .seg-switch-3 .seg-text { align-items: center; } .seg-switch-3 .seg-label { font-size: 13px; } .seg-switch-3 .seg-desc { font-size: 10px; } /* ====== Modal pembuka: pilih segmen ====== */ .seg-modal { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 22px; background: rgba(15,30,20,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fadeUp .3s ease both; } .seg-modal-card { background: var(--card); border-radius: 24px; padding: 26px 20px 20px; width: 100%; max-width: 360px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.3); animation: popIn .35s ease both; } .seg-modal-emoji { font-size: 44px; animation: splashFloat 2.4s ease-in-out infinite; } .seg-modal-card h3 { font-size: 19px; font-weight: 800; margin-top: 8px; } .seg-modal-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; text-align: left; } .seg-modal-opt { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--line); border-radius: 16px; transition: border-color .15s, background .15s, transform .1s; } .seg-modal-opt:active { transform: scale(.98); } .seg-modal-opt .o-emoji { font-size: 26px; flex: 0 0 auto; } .seg-modal-opt .o-text { flex: 1; display: flex; flex-direction: column; } .seg-modal-opt .o-text b { font-size: 15px; font-weight: 800; } .seg-modal-opt .o-text small { font-size: 11.5px; color: var(--muted); } .seg-modal-opt > i { color: var(--muted); font-size: 13px; } .seg-modal-opt.o-both { border-color: var(--brand); background: var(--brand-soft); } .seg-modal-opt.o-both .o-text b { color: var(--brand); } /* ====== Iklan / promo bergulir ====== */ .ad-row { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .ad-row::-webkit-scrollbar { display: none; } .ad-card { flex: 0 0 230px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 12px 26px rgba(20,40,30,.14); display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .2s ease; } .ad-card:active { transform: scale(.98); } @media (hover: hover) { .ad-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(20,40,30,.18); } } .ad-card img { width: 100%; height: 96px; object-fit: cover; } .ad-card .ad-body { padding: 10px 12px 12px; } .ad-card .ad-title { font-weight: 700; font-size: 13.5px; line-height: 1.25; } .ad-card .ad-desc { font-size: 11.5px; color: var(--muted); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ====== Counter pojok kanan bawah (− qty +) saat item di keranjang ====== */ .thumb-qty { position: absolute; bottom: 6px; right: 6px; z-index: 3; background: var(--brand); border-radius: 999px; padding: 0 4px; display: flex; align-items: center; justify-content: center; gap: 2px; animation: popIn .2s ease; box-shadow: 0 4px 12px rgba(var(--brand-rgb),.5); min-height: 30px; } .thumb-qty .tq-num { color: #fff; font-size: 13px; font-weight: 800; line-height: 1; min-width: 18px; text-align: center; } .thumb-qty .tq-btn { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; display: grid; place-items: center; font-size: 12px; cursor: pointer; } .thumb-qty .tq-btn:active { transform: scale(.9); } /* ====== Ikon kategori: emoji 3D / gambar custom ====== */ .cat .ic .cat-emoji { font-size: 28px; line-height: 1; } .cat .ic .cat-img { width: 36px; height: 36px; object-fit: contain; } /* ====== Popular: kartu sejajar (tinggi sama) ====== */ .pop-row { align-items: stretch; } .pop-item { display: flex; } .pop-item > .card { width: 100%; height: 100%; } /* ====== ETA + notif hampir tiba (tracking) ====== */ .eta-bar { padding: 11px 14px; font-size: 13px; border-top: 1px solid var(--line); background: var(--brand-soft); color: var(--ink); } .arrive-notice { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; border-radius: 14px; padding: 13px 15px; font-size: 13.5px; line-height: 1.45; margin-bottom: 10px; animation: popIn .3s ease, floatPulse 1.8s ease-in-out infinite; box-shadow: 0 10px 24px rgba(var(--brand-rgb),.32); } /* ====== Marker peta tracking ====== */ .map-bike { font-size: 28px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); animation: radarBob 1.4s ease-in-out infinite; } .map-pin { font-size: 26px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); } .map-store { font-size: 24px; line-height: 1; position: relative; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); } .map-store span { position: absolute; top: -5px; right: -7px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 800; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid #fff; } /* rincian ongkir per ruas di checkout */ .leg-row { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); padding: 2px 0; } .leg-row span:last-child { font-weight: 700; color: var(--ink); white-space: nowrap; } .route-sum { font-size: 12.5px; color: var(--ink); margin-bottom: 5px; } .route-sum i { color: var(--brand); } /* ====== Animasi "mencari driver" (radar + ojek berjalan) ====== */ .searching-card { overflow: hidden; } .radar { position: relative; width: 96px; height: 96px; margin: 2px auto 0; display: grid; place-items: center; } .radar-ring { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--brand); opacity: 0; animation: radarPulse 2.4s ease-out infinite; } .radar-ring:nth-child(2) { animation-delay: .8s; } .radar-ring:nth-child(3) { animation-delay: 1.6s; } .radar-core { position: relative; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; display: grid; place-items: center; font-size: 22px; box-shadow: 0 8px 20px rgba(var(--brand-rgb),.4); animation: radarBob 1.6s ease-in-out infinite; } @keyframes radarPulse { 0% { width: 40px; height: 40px; opacity: .7; } 100% { width: 116px; height: 116px; opacity: 0; } } @keyframes radarBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .wait-tip { font-size: 12.5px; font-weight: 600; color: var(--brand); margin-top: 12px; min-height: 18px; transition: opacity .2s ease; } .road { position: relative; height: 28px; margin-top: 8px; overflow: hidden; } .road-line { position: absolute; left: 0; right: 0; bottom: 7px; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 20px); } .road .rider { position: absolute; bottom: 9px; left: -26px; font-size: 20px; color: var(--brand); animation: rideAcross 2.6s linear infinite; } @keyframes rideAcross { 0% { left: -26px; } 100% { left: 100%; } } /* ====== Admin UI (redesign profesional) ====== */ .admin-top { display: flex; align-items: center; gap: 12px; padding: 13px 18px; background: linear-gradient(135deg, var(--brand-dark), var(--brand)); color: #fff; box-shadow: 0 6px 20px rgba(20,40,30,.14); } .admin-brand { font-weight: 800; font-size: 17px; display: flex; align-items: center; gap: 9px; letter-spacing: -.01em; } .admin-logo { width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: 15px; } .admin-tag { font-weight: 600; opacity: .85; font-size: 14px; } .admin-user { font-size: 12.5px; font-weight: 700; background: rgba(255,255,255,.18); padding: 7px 13px; border-radius: 999px; white-space: nowrap; } .admin-logout { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.18); color: #fff; display: grid; place-items: center; flex: 0 0 auto; transition: background .15s; } .admin-logout:hover { background: rgba(255,255,255,.3); } .admin-tabs { gap: 7px; padding: 11px 16px; box-shadow: 0 2px 10px rgba(20,40,30,.05); } .admin-tabs a { padding: 9px 15px; border: 1px solid var(--line); background: var(--card); font-weight: 700; transition: background .15s, color .15s, box-shadow .15s; } .admin-tabs a.active { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); border-color: transparent; color: #fff; box-shadow: 0 6px 14px rgba(var(--brand-rgb),.25); } .stat-card { border-radius: 18px; transition: transform .14s, box-shadow .14s; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .stat-card .v { letter-spacing: -.02em; } .table { border-radius: 16px; box-shadow: 0 6px 18px rgba(20,40,30,.06); overflow: hidden; } .table thead th { background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; } .table td { vertical-align: middle; } @media (hover: hover) { .table tbody tr:hover { background: var(--bg); } } /* ====== Voucher chips (di halaman toko) ====== */ .voucher-row { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .voucher-row::-webkit-scrollbar { display: none; } .voucher-chip { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: linear-gradient(135deg, var(--brand-soft), #fff); border: 1px dashed var(--brand); color: var(--ink); min-width: 185px; } .voucher-chip:active { transform: scale(.97); } .voucher-chip .vc-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; flex: 0 0 auto; } .voucher-chip .vc-label { font-weight: 800; font-size: 13.5px; color: var(--brand); } .voucher-chip .vc-code { font-size: 11px; color: var(--muted); } .ad-voucher { margin-top: 5px; font-size: 11px; font-weight: 700; color: var(--brand); } /* ====== Header hero ojek/mitra + toggle status ====== */ .appbar.brand-bar .hero-avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-weight: 800; font-size: 19px; color: var(--brand); background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.18); } .online-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; background: rgba(255,255,255,.2); color: #fff; font-weight: 800; font-size: 13px; flex: 0 0 auto; transition: background .2s, color .2s, transform .1s; } .online-toggle .ot-dot { width: 9px; height: 9px; border-radius: 50%; background: #d6dbd7; transition: background .2s, box-shadow .2s; } .online-toggle.on { background: #fff; color: var(--brand); } .online-toggle.on .ot-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.3); } .online-toggle:active { transform: scale(.96); } /* ====== Header kartu checkout ====== */ .co-head { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 9px; margin-bottom: 14px; padding-bottom: 11px; border-bottom: 1px solid var(--line); } .co-head i { color: var(--brand); width: 18px; text-align: center; } /* ====== Tombol cari mengambang (muncul saat scroll) ====== */ .search-fab { position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + 16px); transform: translateX(-50%) translateY(90px); z-index: 46; display: inline-flex; align-items: center; gap: 8px; background: var(--brand); color: #fff; font-weight: 600; font-size: 13px; padding: 12px 20px; border-radius: 999px; box-shadow: 0 12px 26px rgba(var(--brand-rgb),.42); opacity: 0; pointer-events: none; transition: transform .32s cubic-bezier(.22,.61,.36,1), opacity .25s; max-width: 78%; white-space: nowrap; overflow: hidden; } .search-fab span { overflow: hidden; text-overflow: ellipsis; } .search-fab.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } /* ====== Profil (redesign) ====== */ .profile-banner { background: linear-gradient(150deg, var(--brand), var(--brand-dark)); color: #fff; padding: 16px 16px 46px; border-radius: 0 0 28px 28px; text-align: center; box-shadow: 0 12px 26px rgba(var(--brand-rgb),.18); } .pb-top { display: flex; align-items: center; justify-content: space-between; } .pb-logout { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.18); color: #fff; display: grid; place-items: center; font-size: 15px; } .pb-avatar { width: 80px; height: 80px; border-radius: 50%; margin: 12px auto 8px; background: #fff; color: var(--brand); display: grid; place-items: center; font-size: 32px; font-weight: 800; border: 4px solid rgba(255,255,255,.35); box-shadow: 0 8px 18px rgba(0,0,0,.18); } .pb-name { font-size: 19px; font-weight: 800; } .pb-contact { font-size: 12.5px; opacity: .9; margin-top: 2px; } .pb-badges { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; } .pb-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.18); padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; } .profile-stats { display: flex; background: var(--card); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; } .pstat { flex: 1; text-align: center; padding: 14px 6px; } .pstat + .pstat { border-left: 1px solid var(--line); } .pstat .v { font-size: 21px; font-weight: 800; color: var(--brand); } .pstat .l { font-size: 11px; color: var(--muted); margin-top: 2px; } .quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .quick-tile { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 4px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--ink); transition: transform .12s; } .quick-tile:active { transform: scale(.95); } .quick-tile .qt-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 18px; } .quick-tile .qt-l { font-size: 11px; font-weight: 600; line-height: 1.2; text-align: center; } /* ====== Hub Pesan (chat admin + order chat) ====== */ .chat-admin-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); box-shadow: 0 10px 24px rgba(var(--brand-rgb),.28); } .chat-admin-card .ca-ic { width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: 22px; flex: 0 0 auto; } .chat-admin-card .ca-title { font-weight: 800; font-size: 16px; } .chat-admin-card .ca-sub { font-size: 12px; opacity: .9; margin-top: 2px; } .chat-admin-card .ca-arrow { opacity: .85; } .chat-order { gap: 12px; } .chat-order .co-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-size: 18px; flex: 0 0 auto; } /* ---- Bintang rating ---- */ .rate-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); } .rate-row .rate-name { font-weight: 600; font-size: 14px; } .stars { display: inline-flex; gap: 4px; font-size: 22px; color: #f5b301; cursor: pointer; } .stars i { transition: transform .1s; } .stars i:active { transform: scale(1.2); } .rating-badge { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #f5b301; } /* ====== Home v2 — discovery mitra (gaya Uber Eats, brand hijau) ====== */ .g-loc { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; color: inherit; } .g-loc-top { font-size: 12px; color: var(--muted); font-weight: 500; } .g-loc-top .fa-chevron-down { font-size: 9px; } .g-loc-addr { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .g-header .g-actions { flex: 0 0 auto; } .g-search { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; } .g-search .search-ic { color: var(--muted); } .g-search-ph { color: var(--muted); font-size: 14px; } a.cat { text-decoration: none; } .seg-pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .seg-pills::-webkit-scrollbar { display: none; } .seg-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 13px; font-weight: 600; color: var(--muted); } .seg-pill.active { background: var(--brand); border-color: var(--brand); color: #fff; } .promo-banner { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--brand-soft); border: 1px solid var(--line); color: inherit; } .promo-banner .pb-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 18px; flex: 0 0 auto; } .promo-banner .pb-tx { flex: 1; display: flex; flex-direction: column; min-width: 0; } .promo-banner .pb-tx b { font-size: 14px; } .promo-banner .pb-tx small { font-size: 12px; color: var(--muted); } .promo-banner .pb-ch { color: var(--muted); } .m-row { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; } .m-row::-webkit-scrollbar { display: none; } .m-card { flex: 0 0 auto; width: 174px; color: inherit; } .m-photo { position: relative; width: 100%; aspect-ratio: 16/7; border-radius: 12px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); } .m-photo img { width: 100%; height: 100%; object-fit: cover; } .m-card.closed .m-photo img { filter: grayscale(.7) opacity(.55); } /* badge row: status di kiri, promo/new di kanan */ .m-badge-row { position: absolute; top: 7px; left: 7px; right: 7px; display: flex; align-items: center; justify-content: space-between; gap: 4px; pointer-events: none; } .m-badge { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; } .m-badge.open { background: var(--brand); color: #fff; } .m-badge.closed-b { background: #6B7280; color: #fff; } .m-badge.promo { background: #FF6B3D; color: #fff; } .m-badge.new-b { background: var(--brand-soft); color: var(--brand); } /* header row: nama + rating */ .m-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 8px; } .m-nm { font-weight: 700; font-size: 13.5px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .m-rating { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: #E0A100; flex: none; } .m-rating .fa-star { font-size: 10px; } /* info row: waktu + min order */ .m-info { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); margin-top: 4px; } .m-info span { display: inline-flex; align-items: center; gap: 3px; } /* promo/menu row */ .m-meta { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ====== Skeleton shimmer (saat foto memuat) ====== */ .m-photo, .card .thumb { background-color: var(--bg); background-image: linear-gradient(100deg, rgba(0,0,0,0) 28%, rgba(0,0,0,.05) 50%, rgba(0,0,0,0) 72%); background-size: 220% 100%; background-repeat: no-repeat; animation: caSkel 1.4s ease-in-out infinite; } @keyframes caSkel { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } } /* ============================================================ HALAMAN TOKO — detail merchant (gaya GoFood/Uber Eats) ============================================================ */ /* Hero */ .st-hero { position: relative; width: 100%; height: 210px; background: var(--bg); overflow: hidden; } .st-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; } .st-hero-grad { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,0) 32%, rgba(0,0,0,0) 64%, rgba(0,0,0,.12)); } .st-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.94); color: #1c1c1c; display: grid; place-items: center; font-size: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.18); z-index: 2; } .st-icon:active { transform: scale(.92); } .st-back { position: absolute; top: 14px; left: 14px; } .st-hero-actions { position: absolute; top: 14px; right: 14px; display: flex; gap: 10px; z-index: 2; } #stFav.on { color: #e23744; } /* Kartu info merchant (menumpuk di bawah hero) */ .st-info { position: relative; margin: -24px 14px 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-sm); z-index: 3; } .st-name-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .st-name { font-size: 20px; font-weight: 800; line-height: 1.25; margin: 0; color: var(--ink); } .st-halal { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 4px 10px; white-space: nowrap; } .st-halal i { font-size: 11px; } .st-meta, .st-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-top: 8px; } .st-meta .st-rate { color: var(--ink); font-weight: 600; } .st-meta .st-rate .fa-star { color: #F5A623; } .st-dot { color: var(--line); } .st-open { color: var(--brand); font-weight: 600; } .st-open .fa-circle, .st-shut .fa-circle { font-size: 8px; vertical-align: middle; } .st-shut { color: #e23744; font-weight: 600; } .st-freeship { margin-top: 12px; background: var(--brand-soft); color: var(--brand-dark); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; } /* Cari menu di toko */ .st-search-wrap { padding: 14px 14px 4px; } .st-search { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; } .st-search > i { color: var(--muted); font-size: 14px; } .st-search input { flex: 1; border: none; background: transparent; font-size: 14px; color: var(--ink); outline: none; font-family: inherit; min-width: 0; } .st-search-clear { color: var(--muted); width: 28px; height: 28px; display: grid; place-items: center; } /* Tab kategori (sticky) */ .st-tabs { position: sticky; top: 0; z-index: 20; display: flex; gap: 8px; overflow-x: auto; padding: 10px 14px; background: var(--bg); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .st-tabs::-webkit-scrollbar { display: none; } .st-tab { flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--card); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; transition: background .15s, color .15s; } .st-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); } /* Daftar menu */ .st-menu { padding: 4px 14px 0; } .st-sec { margin-bottom: 10px; } .st-sec-title { font-size: 16px; font-weight: 700; margin: 10px 0 2px; display: flex; align-items: center; gap: 8px; color: var(--ink); } .st-sec-n { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 1px 9px; } /* Baris menu (horizontal) */ .menu-row { display: flex; gap: 12px; align-items: stretch; padding: 14px 0; border-bottom: 1px solid var(--line); } .menu-row-wrap:last-child .menu-row { border-bottom: none; } .mr-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .mr-name { font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--ink); } .mr-desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mr-badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; } .mr-badge { font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 2px 7px; } .mr-badge.hot { color: #d9480f; background: rgba(217,72,15,.1); } .mr-badge.low { color: var(--amber); background: rgba(232,146,60,.13); } .mr-price { font-weight: 700; font-size: 15px; color: var(--ink); margin-top: auto; padding-top: 8px; } .mr-photo { flex: 0 0 92px; width: 92px; height: 92px; position: relative; border-radius: 12px; overflow: hidden; background: var(--bg); align-self: center; } .mr-photo img { width: 100%; height: 100%; object-fit: cover; } .menu-row.sold-out .mr-photo img, .menu-row.store-closed-card .mr-photo img { filter: grayscale(.6) opacity(.55); } .mr-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); color: #fff; font-size: 12px; font-weight: 700; } /* tombol + (lingkaran) menonjol di pojok kanan-bawah foto */ .mr-add { position: absolute; right: -3px; bottom: -3px; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 14px; border: 2px solid var(--card); box-shadow: 0 3px 8px rgba(var(--brand-rgb),.35); transition: transform .12s; } .mr-add:active { transform: scale(.88); } /* stepper − jumlah + */ .mr-step { position: absolute; right: -3px; bottom: -3px; align-items: center; gap: 1px; background: var(--brand); border-radius: 999px; padding: 2px; border: 2px solid var(--card); box-shadow: 0 3px 8px rgba(var(--brand-rgb),.35); animation: popIn .16s ease; } .mr-step .tq-num { color: #fff; font-weight: 800; font-size: 13px; min-width: 18px; text-align: center; } .mr-step-btn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 10px; } .mr-step-btn:active { transform: scale(.85); } /* Tidak ada hasil */ .st-noresult { text-align: center; padding: 44px 0; color: var(--muted); } .st-noresult i { font-size: 30px; opacity: .35; } .st-noresult p { margin-top: 10px; font-size: 13px; } /* Bilah keranjang melayang */ .st-cartbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(70px + env(safe-area-inset-bottom, 0px)); width: min(420px, calc(100% - 28px)); z-index: 60; display: flex; align-items: center; gap: 10px; background: var(--brand); color: #fff; border-radius: 14px; padding: 13px 16px; box-shadow: 0 8px 22px rgba(var(--brand-rgb),.4); font-weight: 700; animation: cartUp .25s ease; } .scb-left { display: flex; align-items: center; gap: 8px; font-size: 13px; } .scb-mid { flex: 1; text-align: center; font-size: 14px; } .scb-right { font-size: 14px; } @keyframes cartUp { from { transform: translate(-50%, 16px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } /* ====== Section kategori (scroll menyamping + "Lihat semua" -> grid) ====== */ .cat-sec { margin-top: 4px; scroll-margin-top: 60px; } .cat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px 0; } .cat-title { font-size: 16px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; margin: 0; } .cat-n { font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 1px 9px; } .cat-seeall { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: 4px; padding: 4px 2px; white-space: nowrap; } .cat-seeall i { font-size: 9px; } /* Container: default scroll menyamping; .expanded -> grid 2 kolom */ .cat-items { display: flex; gap: 12px; overflow-x: auto; padding: 8px 14px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .cat-items::-webkit-scrollbar { display: none; } /* Kartu di toko = kartu menu home (_menu_card di .pop-item), scroll bebas tanpa batas */ .cat-items .pop-item { scroll-snap-align: start; } .cat-items.expanded { flex-wrap: wrap; overflow-x: visible; } .cat-items.expanded .pop-item { flex: 0 0 calc(50% - 6px); } /* ====== Keranjang: catatan + peralatan makan per toko (gaya list rapi) ====== */ .store-extra { margin-top: 10px; border-top: 1px solid var(--line); } .se-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 2px; background: transparent; text-align: left; cursor: pointer; font-family: inherit; } .se-row + .se-row { border-top: 1px solid var(--line); } .se-ico { flex: 0 0 22px; width: 22px; text-align: center; color: var(--ink); font-size: 17px; } .se-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .se-title { font-size: 14px; font-weight: 500; color: var(--ink); } .se-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .se-check { flex: 0 0 auto; width: 22px; height: 22px; accent-color: var(--brand); } .se-chev { flex: 0 0 auto; color: var(--muted); font-size: 13px; } /* ============================================================ CHECKOUT (redesain: toggle, peta pin-tengah, rincian, sheet) ============================================================ */ .co-appbar { position: sticky; top: 0; z-index: 30; background: var(--card); border-bottom: 1px solid var(--line); } .co-sec { padding-top: 14px; padding-bottom: 0; } .co-sec:first-of-type { padding-top: 16px; } /* Toggle pengantaran / ambil sendiri */ .ship-toggle { display: flex; gap: 6px; background: var(--bg); border-radius: 14px; padding: 5px; } .st-pill { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 8px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--muted); background: transparent; transition: background .15s, color .15s; } .st-pill.active { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); } .st-badge { position: absolute; top: -9px; right: 4px; background: var(--brand); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; } /* Peta + pin di tengah */ .co-map-wrap { position: relative; height: 190px; border-radius: 14px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); } .co-map-wrap #map { width: 100%; height: 100%; } .co-map-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); font-size: 30px; color: #1f2530; z-index: 500; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); } .co-edit-pin { position: absolute; top: 10px; right: 10px; z-index: 500; background: var(--card); color: var(--ink); font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.18); display: inline-flex; align-items: center; gap: 6px; } .co-map-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 13px; z-index: 400; } /* Baris alamat */ .co-addr-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 2px; margin-top: 2px; background: transparent; } .co-addr-ico { color: var(--brand); font-size: 17px; flex: 0 0 auto; } .co-addr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .co-addr-title { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .co-addr-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .co-chev { color: var(--muted); font-size: 13px; flex: 0 0 auto; } .co-far-warn { background: #FFF7E0; border: 1px solid #F4D77E; color: #946c00; font-size: 12.5px; font-weight: 600; border-radius: 10px; padding: 9px 12px; display: flex; align-items: center; gap: 8px; margin-top: 6px; } .co-save-addr { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); margin-top: 12px; cursor: pointer; } .co-save-addr input { width: 18px; height: 18px; accent-color: var(--brand); } /* Kartu & baris opsi */ .co-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: var(--shadow-sm); } .co-card-head { font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .co-card-head i { color: var(--brand); } .co-row { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; box-shadow: var(--shadow-sm); } .co-row-ico { color: var(--brand); font-size: 17px; flex: 0 0 22px; text-align: center; } .co-row-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .co-row-title { font-size: 14px; font-weight: 600; color: var(--ink); } .co-row-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Rincian harga */ .co-prow { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; padding: 5px 0; } .co-prow .muted { color: var(--muted); } .co-info { color: var(--muted); font-size: 12px; cursor: pointer; } .co-disc { color: var(--brand); font-weight: 600; } .co-total { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 700; color: var(--ink); } .co-total-val { display: flex; align-items: center; gap: 8px; } .co-total-val s { color: var(--muted); font-weight: 500; font-size: 13px; } .co-total-val b { color: var(--ink); font-size: 17px; } /* Opsi pembayaran (di sheet) */ .pay-opt { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 14px; } .pay-opt input { display: none; } .pay-tick { color: var(--line); font-size: 18px; flex: 0 0 auto; } .pay-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); } .pay-opt:has(input:checked) .pay-tick { color: var(--brand); } /* Alasan pembatalan (track) */ .cancel-reasons { display: flex; flex-direction: column; gap: 8px; } .cancel-reason { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; color: var(--ink); background: var(--card); } .cancel-reason i { color: var(--muted); width: 18px; text-align: center; } .cancel-reason:active { background: var(--bg); } /* ============================================================ LIVE TRACKING — overlay 70/30 + marker berdenyut (pulsing) ============================================================ */ html.lt-lock { overflow: hidden; } .lt-overlay { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: none; flex-direction: column; } .lt-overlay.open { display: flex; } .lt-map { position: relative; flex: 1; min-height: 200px; background: var(--bg); } .lt-map #trackMap { width: 100%; height: 100%; } .lt-close { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); left: 14px; z-index: 1001; width: 42px; height: 42px; border-radius: 50%; background: var(--card); box-shadow: 0 2px 10px rgba(0,0,0,.22); display: grid; place-items: center; color: var(--ink); font-size: 16px; } .lt-livechip { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); right: 14px; z-index: 1001; background: var(--card); border-radius: 999px; padding: 6px 12px; font-size: 11px; font-weight: 800; color: var(--ink); box-shadow: 0 2px 10px rgba(0,0,0,.18); display: flex; align-items: center; gap: 6px; letter-spacing: .5px; } .lt-livedot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: ltBlink 1.2s infinite; } .lt-livechip .lt-ago { font-weight: 500; color: var(--muted); letter-spacing: 0; } @keyframes ltBlink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } .lt-panel { flex: none; background: var(--card); border-radius: 22px 22px 0 0; margin-top: -22px; position: relative; z-index: 1002; padding: 6px 18px calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -6px 24px rgba(0,0,0,.1); display: flex; flex-direction: column; gap: 14px; } .lt-grab { width: 42px; height: 4px; background: var(--line); border-radius: 999px; margin: 6px auto 2px; } .lt-phase { display: flex; align-items: flex-start; justify-content: center; gap: 4px; } .lt-step { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); width: 80px; text-align: center; } .lt-pdot { width: 40px; height: 40px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 15px; color: var(--muted); border: 2px solid var(--line); transition: background .25s, color .25s, transform .25s; } .lt-step.active .lt-pdot { background: var(--brand); color: #fff; border-color: var(--brand); transform: scale(1.06); } .lt-step.done .lt-pdot { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); } .lt-step.active { color: var(--brand); font-weight: 700; } .lt-pline { flex: 1; height: 3px; background: var(--line); border-radius: 2px; margin-top: 18px; max-width: 50px; transition: background .25s; } .lt-pline.on { background: var(--brand); } .lt-eta { text-align: center; font-size: 14px; color: var(--ink); line-height: 1.5; } .lt-notice { background: var(--brand-soft); color: var(--brand-dark); border-radius: 12px; padding: 11px; font-size: 13px; text-align: center; font-weight: 600; } /* Marker berdenyut */ .lt-marker { position: relative; width: 44px; height: 44px; display: grid; place-items: center; } .lt-marker .lt-ico { position: relative; z-index: 2; font-size: 24px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); } .lt-marker .lt-pulse { position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; z-index: 1; } .lt-marker.driver .lt-pulse { background: rgba(53,127,67,.45); animation: ltPulse 1.5s ease-out infinite; } .lt-marker.store .lt-pulse { background: rgba(232,146,60,.5); animation: ltPulse 1.9s ease-out infinite; } .lt-marker.dest .lt-pulse { background: rgba(225,55,68,.45); animation: ltPulse 2.1s ease-out infinite; } @keyframes ltPulse { 0% { transform: scale(.8); opacity: .75; } 100% { transform: scale(3.4); opacity: 0; } } /* ====== Modal upsell (tawaran minuman saat checkout) ====== */ .up-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 4px; } .up-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); display: flex; flex-direction: column; } .up-photo { aspect-ratio: 1/1; background: var(--bg); } .up-photo img { width: 100%; height: 100%; object-fit: cover; } .up-body { padding: 8px 9px 9px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .up-name { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; } .up-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; } .up-price { font-size: 12.5px; font-weight: 700; color: var(--brand); } .up-add { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 13px; flex: 0 0 auto; transition: transform .12s; touch-action: manipulation; border: none; cursor: pointer; } .up-add:active { transform: scale(.85); } .up-add.added { background: var(--brand-dark); } /* ====== Catatan/peralatan di order — mitra (perhatian) & tracking pelanggan ====== */ .order-meta { margin-top: 8px; background: #FFF8E6; border: 1px solid #F4E2B8; border-radius: 10px; padding: 8px 11px; display: flex; flex-direction: column; gap: 4px; } .order-meta .om-row { font-size: 12.5px; color: #8a6512; display: flex; align-items: flex-start; gap: 7px; line-height: 1.4; } .order-meta .om-row i { margin-top: 2px; } .track-meta { margin: 8px 0 2px; background: var(--brand-soft); border-radius: 10px; padding: 10px 12px; } .track-meta .tm-store { font-size: 12.5px; font-weight: 700; color: var(--brand-dark); } .track-meta .tm-store:not(:first-child) { margin-top: 8px; } .track-meta .tm-row { font-size: 12.5px; color: var(--ink); display: flex; align-items: flex-start; gap: 7px; line-height: 1.4; padding: 2px 0 0 2px; } .track-meta .tm-row i { margin-top: 2px; color: var(--brand); } /* ====== Thumbnail menu + tombol AI (admin) ====== */ .menu-thumb-wrap { width: 46px; height: 46px; } .menu-thumb { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; display: block; background: var(--bg); border: 1px solid var(--line); } .menu-thumb.noimg { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 8.5px; line-height: 1.05; color: var(--muted); background: var(--bg); border: 1px dashed var(--line); } .ai-btn { color: #7c3aed; } .ai-btn:hover { color: #6d28d9; } /* ====== Ambil Sendiri / Pickup CVS (7-11 / FamilyMart) ====== */ .pickup-opt { display: flex; align-items: center; gap: 11px; padding: 13px 2px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); cursor: pointer; } .pickup-opt:last-of-type { border-bottom: none; } .pickup-opt input { width: 18px; height: 18px; accent-color: var(--brand); flex: 0 0 auto; } .pickup-opt small { font-weight: 400; } .cvs-store { display: flex; align-items: flex-start; gap: 10px; background: var(--brand-soft); border-radius: 10px; padding: 11px 13px; margin-top: 10px; font-size: 13.5px; color: var(--ink); } .cvs-store > i { margin-top: 2px; font-size: 15px; } .cvs-item { display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 11px; margin-bottom: 8px; background: var(--card); font-size: 13.5px; color: var(--ink); } .cvs-item:active { background: var(--bg); } .cvs-item > i { margin-top: 2px; font-size: 16px; flex: 0 0 auto; } .cvs-or { display: flex; align-items: center; gap: 10px; margin: 13px 0 10px; color: var(--muted); font-size: 11.5px; } .cvs-or::before, .cvs-or::after { content: ''; flex: 1; height: 1px; background: var(--line); } /* Pilihan metode pengiriman (list opsi) */ .ship-opt { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); cursor: pointer; } .ship-opt:last-child { border-bottom: none; } .ship-opt input { width: 20px; height: 20px; accent-color: var(--brand); flex: 0 0 auto; } .ship-opt .so-ic { font-size: 19px; width: 24px; text-align: center; flex: 0 0 auto; } .ship-opt .so-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .ship-opt .so-txt b { font-size: 14px; color: var(--ink); } .ship-opt .so-txt small { font-size: 11.5px; color: var(--muted); } .ship-opt:has(input:checked) .so-txt b { color: var(--brand); } /* Catatan pengiriman ekspedisi di halaman lacak */ .cvs-track-note { background: #FFF7E6; border: 1px solid #FFE0A3; color: #7a5200; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; display: flex; gap: 8px; } .cvs-track-note i { margin-top: 2px; } /* ===================== FAB bottom-nav + Services slide-up panel ===================== */ .bottom-nav.has-fab { align-items: flex-end; } .nav-fab-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; padding: 0 0 8px; } .nav-fab { width: 54px; height: 54px; border-radius: 50%; margin-top: -26px; background: linear-gradient(135deg,var(--brand),var(--brand-dark)); color: #fff; display: grid; place-items: center; font-size: 20px; box-shadow: 0 12px 24px -6px rgba(var(--brand-rgb),.6); border: 4px solid var(--card); transition: transform .15s ease; } .nav-fab-wrap:active .nav-fab { transform: scale(.92); } .nav-fab-l { font-size: 10px; font-weight: 700; color: var(--brand); } .svc-overlay { position: fixed; inset: 0; background: rgba(13,23,18,.42); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .svc-overlay.on { opacity: 1; pointer-events: auto; } .svc-sheet { position: fixed; left: 50%; bottom: 0; width: 100%; max-width: var(--app-max); z-index: 61; background: var(--card); border-radius: 24px 24px 0 0; padding: 16px 18px calc(20px + var(--safe-b)); box-shadow: 0 -26px 54px -16px rgba(13,23,18,.4); transform: translateX(-50%) translateY(110%); transition: transform .28s cubic-bezier(.2,.8,.2,1); } .svc-sheet.on { transform: translateX(-50%) translateY(0); } .svc-sheet .handle { width: 42px; height: 5px; border-radius: 999px; background: var(--line); margin: 0 auto 14px; } .svc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .svc-head b { font-size: 16px; font-weight: 800; color: var(--ink); } .svc-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; } .svc-x { width: 30px; height: 30px; border-radius: 10px; background: var(--bg); color: var(--muted); display: grid; place-items: center; cursor: pointer; border: 0; } .svc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px 6px; } .svc-item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; } .svc-item .si { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 25px; background: var(--b, var(--bg)); transition: transform .15s ease; } .svc-item:active .si { transform: scale(.9); } .svc-item .sl { font-size: 10.5px; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.15; } /* Kargo: ikon premium minimalis (gradient + line-icon) */ .svc-kargo .si { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; font-size: 22px; box-shadow: 0 9px 20px -8px var(--brand-dark); position: relative; } .svc-kargo .si::after { content: "TW→ID"; position: absolute; bottom: -4px; right: -4px; background: var(--card); color: var(--brand-dark); font-size: 7px; font-weight: 800; padding: 2px 4px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.18); } .svc-kargo .sl { color: var(--brand-dark); font-weight: 700; } /* ====== Logo brand adaptif (Baloo 2 ExtraBold) ====== */ .brand-logo { font-family: 'Baloo 2', sans-serif; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; border-radius: 18px; background: var(--brand); color: #fff; line-height: 1; letter-spacing: -.02em; user-select: none; } /* ====== Splash redesign: teks Baloo 2 "chatantar" ====== */ .splash-logo-brand { width: 116px; height: 116px; display: grid; place-items: center; overflow: hidden; margin: 0 auto 18px; animation: splashPop .6s cubic-bezier(.2,.8,.2,1) both, splashFloat 2.4s ease-in-out .7s infinite; } .splash-brand-text { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 21px; color: #fff; line-height: 1.15; text-align: center; letter-spacing: -.01em; } /* ====== Transisi halaman fade-in (tanpa transform agar position:fixed tetap aman) ====== */ .app { animation: pageSlideIn .25s ease both; } @keyframes pageSlideIn { from { opacity: 0; } to { opacity: 1; } } /* ====== Deal cards (Harga Terbaik / Lagi Diskon) ====== */ .deal-row { padding: 10px 18px 16px; display: flex; gap: 11px; overflow-x: auto; scrollbar-width: none; } .deal-row::-webkit-scrollbar { display: none; } .deal-card { flex: 0 0 132px; background: var(--card); border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 6px 16px -10px rgba(20,40,28,.18); } .deal-thumb { position: relative; height: 88px; background: var(--bg); display: grid; place-items: center; font-size: 36px; overflow: hidden; } .deal-thumb img { width: 100%; height: 100%; object-fit: cover; } .deal-badge { position: absolute; top: 7px; left: 7px; background: var(--brand); color: #fff; font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; } .deal-badge.hot { background: #FF5630; } .deal-body { padding: 8px 10px 10px; } .deal-name { font-size: 11.5px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; } .deal-price-row { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; } .deal-price { font-size: 13.5px; font-weight: 800; color: var(--brand); } .deal-add { width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 11px; cursor: pointer; border: 0; flex: none; } /* ====== Segera Hadir (mitra 0 menu) ====== */ .soon-row { display: flex; gap: 11px; overflow-x: auto; padding: 10px 18px 16px; scrollbar-width: none; } .soon-row::-webkit-scrollbar { display: none; } .soon-card { flex: 0 0 142px; border-radius: 16px; border: 1px solid var(--line); overflow: hidden; background: var(--card); } .soon-cover { height: 78px; background: var(--line); display: grid; place-items: center; font-size: 30px; filter: grayscale(1) opacity(.5); overflow: hidden; } .soon-cover img { width: 100%; height: 100%; object-fit: cover; } .soon-body { padding: 9px 10px 11px; } .soon-name { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); } .soon-btn { margin-top: 7px; width: 100%; font-size: 10.5px; font-weight: 700; padding: 7px 4px; border-radius: 10px; border: 1.5px solid var(--brand); background: var(--brand-soft); color: var(--brand); cursor: pointer; }