/* ============================================================ * IR DESIGN — style.css (Agent 5-a) * Replika visual 1:1 dari versi Next.js + Tailwind (globals.css * + src/components/site/*.tsx). Plain CSS murni, tanpa Tailwind. * Dark mode: class .dark pada (IRD.toggleTheme). * Breakpoints: 640 / 768 / 1024 / 1280 — mobile-first. * ============================================================ */ /* ============================================================ * 1. DESIGN TOKENS (konversi globals.css — oklch apa adanya) * ============================================================ */ :root { --radius: 0.625rem; --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.646 0.222 41.116); /* orange-600 — brand IR DESIGN */ --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.646 0.222 41.116); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); /* Token tambahan non-globals (diambil dari palet Tailwind asli) */ --emerald: oklch(0.696 0.17 162.48); /* emerald-500 */ --emerald-strong: #059669; /* emerald-600 */ --amber-warm: #f59e0b; /* amber-500 */ --gold: #f59e0b; /* bintang rating */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.05); --shadow-md: 0 4px 10px -2px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.06); --shadow-lg: 0 14px 34px -14px rgb(0 0 0 / 0.25); --ring-soft: color-mix(in oklab, var(--ring) 32%, transparent); --ring-softer: color-mix(in oklab, var(--ring) 18%, transparent); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.705 0.213 47.604); /* orange-500 */ --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.705 0.213 47.604); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); } /* ============================================================ * 2. RESET RINGAN & BASE * ============================================================ */ *, *::before, *::after { box-sizing: border-box; border-color: var(--border); } html { position: relative; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--foreground); background: var(--background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, video { max-width: 100%; } img { border-style: none; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; } button { font-family: inherit; } a { color: inherit; } hr { border: 0; border-top: 1px solid var(--border); } /* Scrollbar halus (semantik) — mirror globals.css */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--foreground) 22%, transparent); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--primary) 55%, transparent); } /* Seleksi warna brand */ ::selection { background: color-mix(in oklab, var(--primary) 28%, transparent); color: var(--foreground); } /* Ring fokus konsisten */ :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 2px; } /* Hilangkan spinner input number */ input[type='number']::-webkit-outer-spin-button, input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type='number'] { -moz-appearance: textfield; appearance: textfield; } /* Safe area footer mobile */ .pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); } /* ============================================================ * 3. UTILITAS UMUM (kosakata SPEC) * ============================================================ */ .row { display: flex; align-items: center; gap: 0.5rem; } .sp-between { justify-content: space-between; } .muted { color: var(--muted-foreground); } .grow { flex: 1 1 0%; min-width: 0; } .font-bold { font-weight: 700; } .font-mono, .mono, .adm-mono { font-family: var(--font-mono); } .text-center { text-align: center; } .text-2xl { font-size: 1.5rem; line-height: 1.35; font-weight: 700; } .mt-2 { margin-top: 0.5rem; } .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-16 { padding-top: 4rem; padding-bottom: 4rem; } .py-24 { padding-top: 6rem; padding-bottom: 6rem; } .trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clamp-1, .clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; } .clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; } /* ---------- IKON (.ico) — default ikut font-size ---------- */ .ico { display: inline-flex; align-items: center; justify-content: center; line-height: 0; flex-shrink: 0; } .ico svg { width: 1em; height: 1em; } /* Ukuran kontekstual */ .btn .ico svg { width: 16px; height: 16px; } .btn-lg .ico svg { width: 18px; height: 18px; } .btn-sm .ico svg { width: 14px; height: 14px; } .icon-chip svg { width: 20px; height: 20px; } .hero-badge svg, .hero-chip svg { width: 14px; height: 14px; } .footer-ico svg { width: 16px; height: 16px; } .nav-admin svg { width: 16px; height: 16px; } .pill svg { width: 12px; height: 12px; } .toast > .ico svg { width: 18px; height: 18px; } .alert-error > .ico svg { width: 16px; height: 16px; } .meta-ico svg { width: 16px; height: 16px; } .stat-icon svg { width: 20px; height: 20px; } .rev-quote svg { width: 22px; height: 22px; } .feat-ico svg { width: 16px; height: 16px; } .notes-title svg { width: 14px; height: 14px; } .formtype-btn svg { width: 16px; height: 16px; } .upload-btn svg { width: 18px; height: 18px; } .track-ico svg { width: 22px; height: 22px; } .notfound-ico svg { width: 30px; height: 30px; } .success-check svg { width: 46px; height: 46px; } .review-done-ico svg { width: 38px; height: 38px; } .data-table .ico svg { width: 14px; height: 14px; } .adm-side-item .ico svg { width: 18px; height: 18px; } .adm-bnav-item .ico svg { width: 18px; height: 18px; } .adm-empty-ico svg, .adm-empty-icon svg { width: 20px; height: 20px; } /* ============================================================ * 4. BOOT LOADER (index.php) * ============================================================ */ .boot-loader { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: var(--background); } .boot-logo { width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; border-radius: 1.1rem; background: linear-gradient(135deg, oklch(0.646 0.222 41.116), oklch(0.53 0.19 35)); color: #fff; font-size: 1.5rem; font-weight: 800; letter-spacing: 0.02em; box-shadow: 0 14px 30px -10px color-mix(in oklab, var(--primary) 55%, transparent); animation: bootPulse 1.4s ease-in-out infinite; } .boot-text { font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; color: var(--foreground); } .boot-bar { width: 10rem; height: 4px; border-radius: 9999px; background: var(--muted); overflow: hidden; } .boot-bar span { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), oklch(0.705 0.213 47.604)); animation: bootBar 1.1s ease-in-out infinite; } .boot-noscript { font-size: 0.8125rem; color: var(--muted-foreground); } /* ============================================================ * 5. TOMBOL (.btn*) * ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: var(--radius-lg); background: transparent; color: var(--foreground); font-size: 0.875rem; font-weight: 500; line-height: 1.25; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; transition: filter 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease; } .btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .btn:disabled, .btn[disabled] { opacity: 0.5; pointer-events: none; } .btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-xs); } .btn-primary:hover { filter: brightness(0.92); } .dark .btn-primary:hover { filter: brightness(1.08); } .btn-outline { border-color: var(--input); background: var(--background); color: var(--foreground); } .btn-outline:hover { background: var(--accent); color: var(--accent-foreground); } .btn-ghost { background: transparent; color: var(--foreground); } .btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); } .btn-danger { background: var(--destructive); color: #fff; } .btn-danger:hover { filter: brightness(0.92); } .btn-emerald { background: var(--emerald-strong); color: #fff; } .btn-emerald:hover { filter: brightness(1.06); } .btn-lg { min-height: 2.75rem; padding: 0.625rem 1.5rem; font-size: 0.9375rem; } .btn-sm { min-height: 2rem; padding: 0.3125rem 0.75rem; font-size: 0.75rem; border-radius: var(--radius-md); } .btn-icon { width: 2.25rem; min-width: 2.25rem; max-width: 2.25rem; min-height: 2.25rem; padding: 0; } .btn-icon .ico svg { width: 18px; height: 18px; } .btn-block { display: flex; width: 100%; } /* ============================================================ * 6. BADGE * ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 0.25rem; width: fit-content; border: 1px solid transparent; border-radius: 9999px; padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 600; line-height: 1.4; white-space: nowrap; } .badge-primary { background: var(--primary); color: var(--primary-foreground); } .badge-soft { border-color: color-mix(in oklab, var(--primary) 20%, transparent); background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); } .badge-outline { border-color: var(--border); background: transparent; color: var(--foreground); } .badge-emerald { border-color: #a7f3d0; background: #ecfdf5; color: #047857; } .badge-amber { border-color: #fde68a; background: #fffbeb; color: #b45309; } .dark .badge-emerald { border-color: #064e3b; background: #022c22; color: #34d399; } .dark .badge-amber { border-color: #78350f; background: #451a03; color: #fbbf24; } .adm-badge-xs { font-size: 0.625rem; padding: 0.0625rem 0.375rem; border-radius: 0.25rem; } /* ============================================================ * 7. KARTU * ============================================================ */ .card { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); } .card-pad { padding: 1.5rem; } .card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .card-sep { height: 1px; width: 100%; background: var(--border); } /* ============================================================ * 8. FORM (.field .label .input .textarea .select ...) * ============================================================ */ .field { margin-bottom: 1.25rem; } .field:last-child { margin-bottom: 0; } .label { display: block; margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 500; color: var(--foreground); } .req { color: var(--destructive); } .input, .textarea, .select { display: block; width: 100%; min-height: 2.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--input); border-radius: var(--radius-md); background: transparent; color: var(--foreground); font-family: inherit; font-size: 0.875rem; line-height: 1.5; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .textarea { min-height: 6rem; resize: vertical; } .select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.625rem center; padding-right: 2.25rem; } .input::placeholder, .textarea::placeholder { color: color-mix(in oklab, var(--muted-foreground) 80%, transparent); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 2px var(--ring-soft); } .input:disabled, .textarea:disabled, .select:disabled { opacity: 0.6; cursor: not-allowed; background: color-mix(in oklab, var(--muted) 40%, transparent); } .field-hint { margin-top: 0.375rem; font-size: 0.75rem; line-height: 1.5; color: var(--muted-foreground); } .field-error { margin-top: 0.375rem; font-size: 0.75rem; font-weight: 500; color: var(--destructive); } .field-error:empty { display: none; } .check-row { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-size: 0.875rem; cursor: pointer; user-select: none; } .check-row input[type='checkbox'], .check-row input[type='radio'] { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--primary); flex-shrink: 0; cursor: pointer; } .form-grid { gap: 1rem; } /* Upload file (form pemesanan) */ .upload-slot { display: block; } .upload-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; min-height: 4.5rem; border: 1.5px dashed var(--input); border-radius: var(--radius-lg); background: color-mix(in oklab, var(--muted) 35%, transparent); color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .upload-btn:hover { border-color: color-mix(in oklab, var(--primary) 50%, transparent); color: var(--primary); } .upload-row { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); font-size: 0.8125rem; } .upload-preview { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; object-fit: cover; flex-shrink: 0; } .upload-ico { color: var(--primary); } .upload-name { flex: 1 1 0%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .upload-size { font-size: 0.75rem; flex-shrink: 0; } .upload-state { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; flex-shrink: 0; } .upload-ok { color: var(--emerald-strong); font-weight: 500; } .upload-remove { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 0; border-radius: 0.5rem; background: transparent; color: var(--muted-foreground); cursor: pointer; flex-shrink: 0; transition: background 0.15s ease, color 0.15s ease; } .upload-remove:hover { background: color-mix(in oklab, var(--destructive) 12%, transparent); color: var(--destructive); } /* Switch kecil (admin-extra) */ .switch { position: relative; width: 2.5rem; height: 1.375rem; border-radius: 9999px; border: 1px solid var(--border); background: var(--muted); cursor: pointer; flex-shrink: 0; padding: 0; transition: background 0.2s ease, border-color 0.2s ease; } .switch .switch-knob { position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; border-radius: 9999px; background: var(--background); box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); transition: transform 0.2s ease; } .switch.on { background: var(--primary); border-color: var(--primary); } .switch.on .switch-knob { transform: translateX(1.0625rem); background: #fff; } .switch.disabled { opacity: 0.5; cursor: not-allowed; } .adm-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); } .adm-switch-title { font-size: 0.875rem; font-weight: 500; } .adm-radio-group { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* ============================================================ * 9. STATUS / PAYMENT / PRINT PILL (warna = STATUS_COLORS asli) * ============================================================ */ .pill { display: inline-flex; align-items: center; gap: 0.25rem; border: 1px solid transparent; border-radius: 9999px; padding: 0.1875rem 0.625rem; font-size: 0.6875rem; font-weight: 600; line-height: 1.45; white-space: nowrap; } /* Status order */ .st-BARU { background: #ffedd5; /* orange-100 */ color: #9a3412; /* orange-800 */ border-color: #fed7aa; /* orange-200 */ } .st-DIPROSES { background: #fef3c7; /* amber-100 */ color: #92400e; /* amber-800 */ border-color: #fde68a; } .st-DESAIN { background: #ede9fe; /* violet-100 */ color: #5b21b6; /* violet-800 */ border-color: #ddd6fe; } .st-REVISI { background: #ffe4e6; /* rose-100 */ color: #9f1239; /* rose-800 */ border-color: #fecdd3; } .st-SELESAI { background: #d1fae5; /* emerald-100 */ color: #065f46; /* emerald-800 */ border-color: #a7f3d0; } .st-DIKIRIM { background: #ccfbf1; /* teal-100 */ color: #115e59; /* teal-800 */ border-color: #99f6e4; } /* Status pembayaran */ .pay-BELUM_BAYAR { background: #fee2e2; /* red-100 */ color: #b91c1c; /* red-700 */ border-color: #fecaca; } .pay-DP { background: #fef3c7; color: #b45309; /* amber-700 */ border-color: #fde68a; } .pay-LUNAS { background: #d1fae5; color: #047857; /* emerald-700 */ border-color: #a7f3d0; } /* Status cetak */ .pr-PENDING { background: #fef9c3; /* yellow-100 */ color: #854d0e; /* yellow-800 */ border-color: #fde047; } .pr-PRINTED { background: #d1fae5; color: #047857; border-color: #a7f3d0; } .pr-OFFLINE { background: #fee2e2; color: #b91c1c; border-color: #fecaca; } .pr-FAILED { background: #ffedd5; color: #9a3412; border-color: #fed7aa; } /* Varian dark: translusen + teks terang */ .dark .st-BARU, .dark .pr-FAILED { background: color-mix(in oklab, #f97316 16%, transparent); color: #fdba74; border-color: color-mix(in oklab, #f97316 32%, transparent); } .dark .st-DIPROSES, .dark .pay-DP { background: color-mix(in oklab, #f59e0b 16%, transparent); color: #fcd34d; border-color: color-mix(in oklab, #f59e0b 32%, transparent); } .dark .st-DESAIN { background: color-mix(in oklab, #8b5cf6 18%, transparent); color: #c4b5fd; border-color: color-mix(in oklab, #8b5cf6 34%, transparent); } .dark .st-REVISI { background: color-mix(in oklab, #f43f5e 16%, transparent); color: #fda4af; border-color: color-mix(in oklab, #f43f5e 32%, transparent); } .dark .st-SELESAI, .dark .pay-LUNAS, .dark .pr-PRINTED { background: color-mix(in oklab, #10b981 16%, transparent); color: #6ee7b7; border-color: color-mix(in oklab, #10b981 32%, transparent); } .dark .st-DIKIRIM { background: color-mix(in oklab, #14b8a6 16%, transparent); color: #5eead4; border-color: color-mix(in oklab, #14b8a6 32%, transparent); } .dark .pay-BELUM_BAYAR, .dark .pr-OFFLINE { background: color-mix(in oklab, #ef4444 16%, transparent); color: #fca5a5; border-color: color-mix(in oklab, #ef4444 32%, transparent); } .dark .pr-PENDING { background: color-mix(in oklab, #eab308 16%, transparent); color: #fde047; border-color: color-mix(in oklab, #eab308 32%, transparent); } /* ============================================================ * 10. TABEL * ============================================================ */ .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } table.data-table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 0.875rem; } .data-table thead th { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--border); font-size: 0.75rem; font-weight: 600; text-align: left; white-space: nowrap; color: var(--muted-foreground); } .data-table tbody td { padding: 0.75rem; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); vertical-align: middle; } .data-table tbody tr:last-child td { border-bottom: 0; } .data-table tbody tr { transition: background 0.15s ease; } .data-table tbody tr:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); } .data-table tr.adm-row-click { cursor: pointer; } .adm-td-right { text-align: right; } .adm-td-center { text-align: center; } .adm-td-nowrap { white-space: nowrap; } .adm-td-xs { font-size: 0.75rem; color: var(--muted-foreground); } .adm-td-actions { display: flex; gap: 0.375rem; justify-content: flex-end; } .prod-name-cell { max-width: 16rem; } .adm-prod-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adm-noresult { padding: 2.5rem 1rem; text-align: center; font-size: 0.875rem; color: var(--muted-foreground); } /* ============================================================ * 11. MODAL * ============================================================ */ .modal-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgb(0 0 0 / 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.18s ease; } .modal-overlay.open { opacity: 1; } .modal-overlay.closing { opacity: 0; } .modal-box { position: relative; width: 100%; max-width: 32rem; max-height: 85vh; overflow-y: auto; padding: 1.5rem; background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); transform: scale(0.95) translateY(10px); transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); } .modal-overlay.open .modal-box { transform: none; } .modal-overlay.closing .modal-box { transform: scale(0.96) translateY(6px); } .modal-wide { max-width: 42rem; } .modal-box.qv-size { max-width: 42rem; padding: 0; overflow: hidden; } .modal-box.ptf-size { max-width: 56rem; padding: 0.75rem; } .modal-x { position: absolute; top: 0.625rem; right: 0.625rem; z-index: 5; background: transparent; } .qv-size .modal-x, .ptf-size .modal-x { background: color-mix(in oklab, var(--background) 85%, transparent); backdrop-filter: blur(4px); border-radius: 9999px; } /* Konten dalam modal */ .modal-form { display: flex; flex-direction: column; gap: 1rem; } .modal-title { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; } .modal-desc { font-size: 0.875rem; color: var(--muted-foreground); } .modal-fields { display: grid; gap: 1rem; } .adm-modal-foot { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; flex-wrap: wrap; } /* Dialog konfirmasi */ .confirm-body { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; } .confirm-icon { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 9999px; background: var(--muted); color: var(--primary); } .confirm-icon .ico svg { width: 22px; height: 22px; } .confirm-title { font-size: 1.125rem; font-weight: 700; } .confirm-msg { font-size: 0.875rem; line-height: 1.6; } .confirm-actions { width: 100%; justify-content: center; gap: 0.5rem; margin-top: 0.25rem; flex-wrap: wrap; } .confirm-actions .btn { flex: 1 1 8rem; } /* ============================================================ * 12. TOAST * ============================================================ */ .toast-wrap { position: fixed; top: 1rem; right: 1rem; z-index: 100; display: flex; flex-direction: column; gap: 0.5rem; width: min(22rem, calc(100vw - 2rem)); pointer-events: none; } .toast { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 0.875rem; border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--radius-lg); background: var(--card); color: var(--foreground); box-shadow: var(--shadow-lg); font-size: 0.875rem; line-height: 1.5; pointer-events: auto; animation: toastIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both; } .toast-out { animation: toastOut 0.26s ease forwards; } .toast-msg { flex: 1 1 0%; min-width: 0; overflow-wrap: anywhere; } .toast-success { border-left-color: #10b981; } .toast-success > .ico { color: #10b981; } .toast-error { border-left-color: #ef4444; } .toast-error > .ico { color: #ef4444; } .toast-info { border-left-color: var(--primary); } .toast-info > .ico { color: var(--primary); } .toast-warning { border-left-color: #f59e0b; } .toast-warning > .ico { color: #f59e0b; } /* ============================================================ * 13. SKELETON / SPINNER / BINTANG * ============================================================ */ .skeleton { border-radius: 0.375rem; background: color-mix(in oklab, var(--muted-foreground) 16%, transparent); animation: skeletonPulse 1.6s ease-in-out infinite; } .spin-wrap { display: inline-flex; align-items: center; } .spin .ico svg, .spin svg { width: 1em; height: 1em; animation: spin 1s linear infinite; } .stars { display: inline-flex; align-items: center; gap: 2px; } .star { color: color-mix(in oklab, var(--muted-foreground) 45%, transparent); line-height: 0; } .star svg { width: 16px; height: 16px; } .star.on { color: var(--gold); } .star.on svg { fill: var(--gold); } .stars-input { gap: 0.125rem; } .stars-input .star { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 0.5rem; background: transparent; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; } .stars-input .star svg { width: 22px; height: 22px; } .stars-input .star:hover { background: color-mix(in oklab, var(--gold) 12%, transparent); transform: scale(1.1); } .adm-star-value { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--gold); font-size: 0.8125rem; font-weight: 600; } .adm-star-ico { color: var(--gold); } .adm-star-ico svg { width: 14px; height: 14px; fill: var(--gold); } /* ============================================================ * 14. APP SHELL / SECTION / GRID / CONTAINER * ============================================================ */ .app-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } .container-x { width: 100%; max-width: 72rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } .section { padding-top: 3.5rem; padding-bottom: 3.5rem; scroll-margin-top: 5rem; } .section-alt { background: color-mix(in oklab, var(--muted) 30%, transparent); } .section-pb0 { padding-bottom: 0; } .section-head { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-bottom: 2.5rem; text-align: center; } .section-head.left { align-items: flex-start; text-align: left; } .kicker, .page-badge { display: inline-flex; align-items: center; border: 1px solid color-mix(in oklab, var(--primary) 20%, transparent); background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); border-radius: 9999px; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .section-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; } .section-sub { max-width: 42rem; font-size: 0.875rem; line-height: 1.65; } .grid-2, .grid-3, .grid-4 { display: grid; gap: 1rem; } .grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; } @media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .grid-2, .grid-3, .grid-4 { gap: 1.5rem; } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ============================================================ * 15. NAVBAR * ============================================================ */ .navbar { position: sticky; top: 0; z-index: 40; width: 100%; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--background) 80%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .navbar { background: color-mix(in oklab, var(--background) 60%, transparent); } } .nav-inner { display: flex; align-items: center; gap: 0.5rem; height: 4rem; } .nav-logo { display: flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; padding: 0 0.5rem 0 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius-md); } .nav-logo-img { width: 36px; height: 36px; border-radius: var(--radius-lg); object-fit: cover; box-shadow: 0 0 0 1px var(--border); } .nav-logo-text { text-align: left; line-height: 1.25; } .nav-logo-name { display: block; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; color: var(--foreground); } .nav-logo-sub { display: block; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-foreground); } .nav-links { display: none; align-items: center; gap: 0.125rem; margin: 0 auto; padding: 0; list-style: none; } .nav-link { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.625rem; border: 0; background: none; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .nav-link:hover { background: color-mix(in oklab, var(--accent) 60%, transparent); color: var(--accent-foreground); } .nav-link.active { color: var(--primary); } .nav-underline { position: absolute; left: 0.625rem; right: 0.625rem; bottom: 0.5rem; height: 2px; border-radius: 9999px; background: var(--primary); } .nav-underline-hover { background: color-mix(in oklab, var(--primary) 40%, transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; } .nav-link:hover .nav-underline-hover { transform: scaleX(1); } .nav-actions { display: flex; align-items: center; gap: 0.375rem; margin-left: auto; } .nav-admin { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); color: var(--muted-foreground); transition: background 0.15s ease, color 0.15s ease; } .nav-admin:hover { background: var(--accent); color: var(--accent-foreground); } /* Toggle tema: ikon murni via CSS dark-mode */ .theme-moon { display: none; } html.dark .theme-sun { display: none; } html.dark .theme-moon { display: inline-flex; } .nav-cta { display: none; } .nav-burger { display: inline-flex; } /* Backdrop + panel mobile (Sheet kanan) */ .nav-backdrop { position: fixed; inset: 0; z-index: 45; background: rgb(0 0 0 / 0.5); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .nav-backdrop.open { opacity: 1; pointer-events: auto; } .nav-mobile { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; display: flex; flex-direction: column; width: min(20rem, 86vw); overflow-y: auto; background: var(--background); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1); visibility: hidden; } .nav-mobile.open { transform: none; visibility: visible; } .nav-mobile-head { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); } .nav-mobile-head img { width: 28px; height: 28px; border-radius: 0.375rem; object-fit: cover; } .nav-mobile-title { font-size: 0.9375rem; font-weight: 700; } .nav-mobile-close { margin-left: auto; } .nav-mobile-list { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 1rem 1rem 0.25rem; list-style: none; } .nav-mobile-link { display: flex; align-items: center; width: 100%; min-height: 2.75rem; padding: 0.5rem 0.75rem; border: 0; border-radius: var(--radius-md); background: none; text-align: left; font-size: 0.875rem; font-weight: 500; color: var(--foreground); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .nav-mobile-link:hover { background: var(--accent); } .nav-mobile-link.active { color: var(--primary); } .nav-mobile-sep { height: 1px; margin: 0.875rem 1.25rem 0; background: var(--border); } .nav-more-label { padding: 0.875rem 1.75rem 0.25rem; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-foreground); } .nav-mobile-foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.25rem; padding-bottom: max(1rem, env(safe-area-inset-bottom)); } .nav-mobile-foot .btn { min-height: 2.75rem; width: 100%; } @media (min-width: 640px) { .container-x { padding-left: 1.5rem; padding-right: 1.5rem; } .nav-cta { display: inline-flex; } } @media (min-width: 1024px) { .nav-links { display: flex; } .nav-burger { display: none; } .nav-actions { margin-left: 0; } .nav-backdrop, .nav-mobile { display: none; } } /* ============================================================ * 16. HERO * ============================================================ */ .hero { position: relative; overflow: hidden; } .hero-blob-1, .hero-blob-2 { position: absolute; border-radius: 9999px; pointer-events: none; filter: blur(60px); } .hero-blob-1 { top: -6rem; right: 0; width: 24rem; height: 24rem; background: color-mix(in oklab, var(--primary) 10%, transparent); } .hero-blob-2 { bottom: 0; left: -6rem; width: 18rem; height: 18rem; background: color-mix(in oklab, #f59e0b 10%, transparent); } .hero-grid { position: relative; display: grid; align-items: center; gap: 2.5rem; padding-top: 3.5rem; padding-bottom: 3.5rem; } .hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; } .hero-badge { display: inline-flex; align-items: center; gap: 0.375rem; border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); background: color-mix(in oklab, var(--primary) 5%, transparent); color: var(--primary); border-radius: 9999px; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 600; } .hero-title { font-size: 1.875rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; } .hero-hl { color: var(--primary); } .hero-sub { max-width: 36rem; font-size: 1rem; line-height: 1.65; } .hero-ctas { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; } .hero-ctas .btn { min-height: 2.75rem; } .hero-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; padding: 0; list-style: none; } .hero-chip { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding: 0.375rem 0.75rem; border: 1px solid var(--border); border-radius: 9999px; background: var(--card); font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); } .hero-chip .ico { color: var(--primary); } .hero-media { position: relative; } .hero-glow { position: absolute; inset: -0.75rem; border-radius: 1.5rem; background: linear-gradient( to top right, color-mix(in oklab, var(--primary) 20%, transparent), color-mix(in oklab, #fbbf24 15%, transparent), transparent ); filter: blur(18px); pointer-events: none; } .hero-img-card { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 1rem; background: var(--card); box-shadow: var(--shadow-lg); animation: floatY 6s ease-in-out infinite; } .hero-img-wrap { position: relative; aspect-ratio: 4 / 3; } .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-float { position: absolute; bottom: -1rem; left: 1rem; border: 1px solid var(--border); border-radius: 0.75rem; background: var(--card); padding: 0.625rem 1rem; box-shadow: var(--shadow-md); } .hero-float-label { font-size: 0.75rem; } .hero-float-value { font-size: 1.125rem; font-weight: 700; color: var(--primary); } @media (min-width: 640px) { .hero-title { font-size: 2.25rem; } .hero-sub { font-size: 1.125rem; } .hero-ctas { flex-direction: row; width: auto; } .hero-chip { min-height: 0; } .hero-float { left: 2rem; } } @media (min-width: 1024px) { .hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 5rem; padding-bottom: 5rem; } .hero-title { font-size: 3rem; } } /* ============================================================ * 17. LAYANAN (Services) * ============================================================ */ .svc-card { display: flex; flex-direction: column; gap: 1rem; height: 100%; padding-top: 1.5rem; padding-bottom: 1.5rem; } .icon-chip { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); flex-shrink: 0; } .svc-title { font-size: 1rem; font-weight: 600; } .svc-desc { font-size: 0.875rem; line-height: 1.65; } /* ============================================================ * 18. ALUR PEMESANAN (OrderProcess) * ============================================================ */ .alur-wrap { position: relative; } .alur-line { display: none; position: absolute; left: 8.333%; right: 8.333%; top: 1.5rem; height: 2px; border-radius: 9999px; background: var(--border); overflow: hidden; } .alur-line-v { position: absolute; top: 1.5rem; bottom: 1rem; left: 1.5rem; width: 2px; transform: translateX(-50%); border-radius: 9999px; background: var(--border); overflow: hidden; } .alur-fill-x { width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(to right, var(--primary), var(--emerald)); transform: scaleX(0); transform-origin: left; transition: transform 1.4s ease; } .alur-fill-y { width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(to bottom, var(--primary), var(--emerald)); transform: scaleY(0); transform-origin: top; transition: transform 1.4s ease; } .alur-wrap.alur-draw .alur-fill-x { transform: scaleX(1); } .alur-wrap.alur-draw .alur-fill-y { transform: scaleY(1); } .alur-steps { position: relative; display: grid; gap: 2rem; margin: 0; padding: 0; list-style: none; } .step { position: relative; display: flex; gap: 1rem; min-width: 0; } .alur-steps .step-dot { position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; flex-shrink: 0; border: 2px solid color-mix(in oklab, var(--primary) 30%, transparent); border-radius: 9999px; background: var(--card); color: var(--primary); box-shadow: var(--shadow-sm); } .alur-steps .step-dot > .ico svg { width: 20px; height: 20px; } .step-num { position: absolute; top: -0.375rem; right: -0.375rem; display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 9999px; background: var(--primary); color: var(--primary-foreground); font-size: 10px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px var(--background); } .alur-steps .step-ring { position: absolute; inset: -2px; border: 2px solid var(--primary); border-radius: 9999px; opacity: 0; pointer-events: none; animation: ringPulse 1.8s ease-out infinite; } .pop-in { animation: popIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .step-card { position: relative; min-width: 0; flex: 1 1 0%; overflow: hidden; padding: 1.25rem 1rem 1rem; border: 1px solid var(--border); border-radius: 0.75rem; background: var(--card); box-shadow: var(--shadow-sm); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .step-card:hover { transform: translateY(-6px); border-color: color-mix(in oklab, var(--primary) 50%, transparent); box-shadow: var(--shadow-md); } .step-mark { position: absolute; top: -0.75rem; right: -0.25rem; font-size: 3.75rem; font-weight: 800; line-height: 1; color: color-mix(in oklab, var(--primary) 8%, transparent); pointer-events: none; user-select: none; } .step-title { position: relative; font-size: 0.875rem; font-weight: 700; } .step-desc { position: relative; margin-top: 0.375rem; font-size: 0.75rem; line-height: 1.65; } @media (min-width: 640px) { .step-title { font-size: 1rem; } .step-desc { font-size: 0.875rem; } } @media (min-width: 1024px) { .alur-line { display: block; } .alur-line-v { display: none; } .alur-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 1rem; } .step { flex-direction: column; align-items: center; gap: 0; } .step-card { flex: none; width: 100%; margin-top: 1.25rem; } } /* ============================================================ * 19. KATEGORI PINTASAN & KATALOG PREVIEW * ============================================================ */ .cat-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .cat-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em; } .cat-sub { margin-top: 0.25rem; font-size: 0.875rem; } .cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } @media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } } button.cat-card { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; width: 100%; padding: 1.25rem; text-align: left; cursor: pointer; font: inherit; color: inherit; } .cat-row { width: 100%; font-size: 0.9375rem; font-weight: 600; } .cat-arrow { color: var(--primary); transition: transform 0.2s ease; } button.cat-card:hover .cat-arrow { transform: translateX(3px); } .cat-count { font-size: 0.75rem; } .preview-holder { width: 100%; } .preview-more { display: flex; justify-content: center; margin-top: 2rem; } /* ---------- Kartu produk ---------- */ .pd-card { position: relative; display: flex; flex-direction: column; overflow: hidden; cursor: pointer; } .pd-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--muted); } .pd-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .pd-card:hover .pd-img, .pd-card:focus-visible .pd-img { transform: scale(1.05); } .pd-noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); } .pd-noimg svg { width: 2rem; height: 2rem; } .pd-badge { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; } .pd-hover { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: rgb(0 0 0 / 0.3); opacity: 0; transition: opacity 0.25s ease; } .pd-card:hover .pd-hover, .pd-card:focus-visible .pd-hover { opacity: 1; } .pd-hover-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.875rem; border-radius: 9999px; background: var(--background); color: var(--foreground); font-size: 0.8125rem; font-weight: 600; box-shadow: var(--shadow-md); } .pd-body { display: flex; flex-direction: column; gap: 0.375rem; flex: 1 1 0%; padding: 1rem; } .pd-cat { font-size: 0.75rem; } .pd-name { font-size: 1rem; font-weight: 700; } .pd-desc { font-size: 0.8125rem; line-height: 1.55; } .pd-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; } .pd-price { font-size: 0.9375rem; font-weight: 700; color: var(--primary); } .pd-dur { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; } .pd-dur svg { width: 12px; height: 12px; } .pd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.375rem; } .pd-skel { cursor: default; } .pd-skel-media { aspect-ratio: 1 / 1; border-radius: 0; border: 0; } /* ============================================================ * 20. LANGGANAN (PosterSubscription) & PAKET (Packages) * ============================================================ */ .plan { position: relative; display: flex; flex-direction: column; height: 100%; } .plan-popular { border-color: color-mix(in oklab, var(--primary) 55%, transparent); box-shadow: 0 10px 34px -12px color-mix(in oklab, var(--primary) 45%, transparent); transform: scale(1.015); } .plan-popular:hover { transform: scale(1.015) translateY(-4px); } .plan-badge { position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); gap: 0.25rem; padding-left: 0.75rem; padding-right: 0.75rem; white-space: nowrap; box-shadow: var(--shadow-sm); } .plan-head { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 0.25rem; } .plan-name { font-size: 1.125rem; font-weight: 700; } .plan-tagline { font-size: 0.8125rem; line-height: 1.55; } .plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.5rem; } .plan-price-val { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--primary); } .plan-price-per, .plan-price-from { font-size: 0.8125rem; color: var(--muted-foreground); } .plan-features { display: flex; flex-direction: column; gap: 0.625rem; margin: 1.125rem 0 1.375rem; padding: 0; list-style: none; font-size: 0.8125rem; } .plan-features li { display: flex; align-items: flex-start; gap: 0.5rem; } .feat-ico { color: #10b981; margin-top: 0.125rem; } .plan-foot { display: flex; margin-top: auto; padding-top: 0.25rem; } .plan-foot .btn { width: 100%; } .plan-note { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 2rem; text-align: center; font-size: 0.875rem; } .plan-note-ico { color: #10b981; } .pkg-grid { display: grid; gap: 1rem; } @media (min-width: 640px) { .pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plan-price-val { font-size: 1.875rem; } } @media (min-width: 1024px) { .pkg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } } /* ============================================================ * 21. TENTANG (About) * ============================================================ */ .about-grid { display: grid; align-items: center; gap: 2.5rem; } .about-media { position: relative; width: 100%; max-width: 20rem; margin: 0 auto; padding-bottom: 2rem; } .about-glow { position: absolute; inset: -1rem; background: color-mix(in oklab, var(--primary) 30%, transparent); filter: blur(40px); animation: blobMorph 12s ease-in-out 1.6s infinite alternate-reverse; pointer-events: none; } .about-float { position: relative; animation: floatY 6s ease-in-out infinite; } .about-blob { position: relative; overflow: hidden; border-radius: 48% 52% 60% 40% / 45% 40% 60% 55%; box-shadow: 0 0 70px color-mix(in oklab, var(--primary) 30%, transparent); animation: blobMorph 12s ease-in-out infinite alternate; } .about-img { display: block; width: 100%; height: auto; object-fit: cover; } .about-badge { position: absolute; bottom: 0.75rem; left: 50%; transform: translateX(-50%); width: max-content; max-width: 92%; border: 1px solid var(--border); border-radius: 0.75rem; background: color-mix(in oklab, var(--card) 70%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 0.625rem 1rem; text-align: center; box-shadow: var(--shadow-md); } .about-owner { font-size: 0.875rem; font-weight: 700; line-height: 1.3; } .about-role { font-size: 0.75rem; } .about-copy { display: flex; flex-direction: column; } .about-paras { display: flex; flex-direction: column; gap: 1rem; margin-top: -1.5rem; font-size: 0.875rem; line-height: 1.7; } .about-paras strong { color: var(--foreground); } .stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; } .stat-card { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; padding: 1rem; border-radius: 0.75rem; text-align: center; } .stat-icon { color: var(--primary); } .stat-value { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; } .stat-label { font-size: 0.75rem; } @media (min-width: 640px) { .about-media { max-width: 24rem; } .about-paras { font-size: 1rem; } .stat-card { padding: 1.25rem; } .stat-value { font-size: 1.5rem; } .stat-label { font-size: 0.875rem; } } @media (min-width: 1024px) { .about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; } .about-media { max-width: 25rem; } } /* ============================================================ * 22. PORTOFOLIO (Portfolio) * ============================================================ */ button.ptf-item { display: block; width: 100%; padding: 0; overflow: hidden; text-align: left; cursor: pointer; font: inherit; color: inherit; } .ptf-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--muted); } .ptf-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .ptf-item:hover .ptf-img { transform: scale(1.05); } .ptf-veil { position: absolute; inset: 0; background: rgb(0 0 0 / 0); transition: background 0.3s ease; } .ptf-item:hover .ptf-veil { background: rgb(0 0 0 / 0.3); } .ptf-expand { position: absolute; top: 0.75rem; right: 0.75rem; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: color-mix(in oklab, var(--background) 90%, transparent); color: var(--foreground); opacity: 0; transition: opacity 0.3s ease; } .ptf-expand svg { width: 16px; height: 16px; } .ptf-item:hover .ptf-expand { opacity: 1; } .ptf-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 1rem; } .ptf-title { font-size: 0.875rem; font-weight: 600; } .ptf-cat { font-size: 0.75rem; margin-top: 0.125rem; } .ptf-chip { border-radius: 9999px; background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 500; white-space: nowrap; flex-shrink: 0; } .ptf-dialog-title { font-size: 1.125rem; font-weight: 700; padding-right: 2.5rem; } .ptf-dialog-sub { font-size: 0.875rem; margin-top: 0.125rem; margin-bottom: 0.75rem; } .ptf-dialog-media { position: relative; width: 100%; height: 60vh; overflow: hidden; border-radius: 0.5rem; background: var(--muted); } .ptf-dialog-media img { width: 100%; height: 100%; object-fit: contain; } @media (min-width: 640px) { .modal-box.ptf-size { padding: 1rem; } .ptf-dialog-media { height: 70vh; } } /* ============================================================ * 23. TESTIMONI (Testimonials) * ============================================================ */ .rev-headrow { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2.5rem; } .rev-headleft { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; } .rev-grid { align-items: stretch; } .review-card { display: flex; flex-direction: column; gap: 1rem; height: 100%; } .rev-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .rev-quote { color: color-mix(in oklab, var(--primary) 30%, transparent); } .rev-text { flex: 1 1 0%; font-size: 0.875rem; line-height: 1.7; } .rev-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; } .rev-name { font-size: 0.875rem; font-weight: 600; } .rev-biz, .rev-time { font-size: 0.75rem; margin-top: 0.125rem; } .rev-type { flex-shrink: 0; } .rev-dialog-title { font-size: 1.125rem; font-weight: 700; } .rev-dialog-sub { font-size: 0.875rem; margin-top: 0.25rem; margin-bottom: 1.125rem; } .rev-form { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 640px) { .rev-headrow { flex-direction: row; align-items: flex-end; justify-content: space-between; } } /* ============================================================ * 24. FAQ * ============================================================ */ .faq-box { max-width: 48rem; margin: 0 auto; padding: 1rem; } .faq-item { border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent); } .faq-item:last-child { border-bottom: 0; } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding: 0.75rem 0; cursor: pointer; list-style: none; user-select: none; } .faq-q::-webkit-details-marker { display: none; } .faq-q-text { font-size: 0.875rem; font-weight: 500; text-align: left; } .faq-chev { color: var(--muted-foreground); transition: transform 0.2s ease; } .faq-chev svg { width: 16px; height: 16px; } .faq-item[open] .faq-chev { transform: rotate(180deg); } .faq-a { padding: 0 0 1rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); animation: fadeUp 0.25s ease both; } @media (min-width: 640px) { .faq-box { padding: 1.5rem; } .faq-q-text { font-size: 1rem; } } /* ============================================================ * 25. KONTAK (Contact) * ============================================================ */ .ct-card { height: 100%; } .ct-card > a { display: block; color: inherit; text-decoration: none; border-radius: inherit; } .ct-link { display: flex; align-items: flex-start; gap: 1rem; height: 100%; } .ct-title { font-size: 0.875rem; font-weight: 600; } .ct-value { margin-top: 0.125rem; font-size: 0.875rem; color: var(--foreground); overflow-wrap: anywhere; } .ct-hint { margin-top: 0.25rem; font-size: 0.75rem; } .ct-cta { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 2.5rem; border-radius: 1rem; padding: 1.5rem; text-align: center; } .ct-cta-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; } .ct-cta-sub { max-width: 36rem; font-size: 0.875rem; line-height: 1.65; } @media (min-width: 640px) { .ct-cta { padding: 2rem; } .ct-cta-title { font-size: 1.5rem; } .ct-cta-sub { font-size: 1rem; } } /* ============================================================ * 26. HALAMAN KATALOG * ============================================================ */ .catalog-page { padding-top: 2.5rem; padding-bottom: 3.5rem; } .catalog-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-bottom: 1.5rem; } .catalog-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; } .catalog-desc { max-width: 42rem; font-size: 0.875rem; line-height: 1.65; } .catalog-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; } .cat-tab { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.375rem 1rem; border: 1px solid var(--border); border-radius: 9999px; background: var(--card); color: var(--muted-foreground); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .cat-tab:hover { background: var(--accent); color: var(--accent-foreground); } .cat-tab.active { background: var(--primary); border-color: transparent; color: var(--primary-foreground); } .catalog-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1.5rem; } .cat-chip { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0.25rem 0.75rem; border: 1px solid var(--border); border-radius: 9999px; background: transparent; color: var(--muted-foreground); font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .cat-chip:hover { background: var(--accent); color: var(--accent-foreground); } .cat-chip.active { border-color: color-mix(in oklab, var(--primary) 30%, transparent); background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); } .catalog-content { width: 100%; } .catalog-group { margin-bottom: 2.5rem; } .catalog-group:last-child { margin-bottom: 0; } .catalog-group-head { margin-bottom: 1rem; } .catalog-group-title { font-size: 1.25rem; font-weight: 700; } .catalog-group-count { font-size: 0.875rem; } .catalog-error, .catalog-empty { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 2rem 1.25rem; text-align: center; } .catalog-error-ico, .catalog-empty-ico { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 9999px; background: color-mix(in oklab, var(--destructive) 10%, transparent); color: var(--destructive); } .catalog-empty-ico { background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); } .catalog-error-ico svg, .catalog-empty-ico svg { width: 22px; height: 22px; } .catalog-error-title, .catalog-empty-title { font-size: 0.9375rem; font-weight: 600; } .fade-in { animation: fadeUp 0.4s ease both; } /* ============================================================ * 27. DETAIL PRODUK * ============================================================ */ .detail-page { padding-top: 2rem; padding-bottom: 3.5rem; } .detail-back { align-self: flex-start; } .detail-grid { display: grid; gap: 2rem; margin-top: 1.25rem; } .detail-skel-media { height: 18rem; border-radius: var(--radius-xl); } .detail-media { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--muted); aspect-ratio: 4 / 3; } .detail-media img { width: 100%; height: 100%; object-fit: cover; } .detail-info { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .detail-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; } .detail-name { font-size: 1.625rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; } .detail-pricewrap { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.75rem; } .detail-price { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; color: var(--primary); } .detail-est { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--muted-foreground); } .detail-desc { font-size: 0.9375rem; line-height: 1.75; color: var(--muted-foreground); } .detail-feats { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; } .detail-feats li { display: flex; align-items: flex-start; gap: 0.5rem; } .detail-notes { border-radius: 0.75rem; background: color-mix(in oklab, var(--muted) 50%, transparent); padding: 1rem; } .detail-notes-title { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 600; } .detail-notes-ico { color: var(--primary); } .detail-notes-list { display: flex; flex-direction: column; gap: 0.375rem; margin: 0; padding: 0; list-style: none; font-size: 0.75rem; color: var(--muted-foreground); } .detail-notes-list li { display: flex; gap: 0.5rem; align-items: flex-start; } .detail-actions { display: grid; gap: 0.625rem; margin-top: 0.25rem; } .detail-shield { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--muted-foreground); } .detail-error { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 3.5rem 1.25rem; text-align: center; } .detail-error-ico { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: color-mix(in oklab, var(--destructive) 10%, transparent); color: var(--destructive); } .detail-error-title { font-size: 1.125rem; font-weight: 700; } .detail-error-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; } @media (min-width: 640px) { .detail-actions { grid-template-columns: 1fr 1fr; } .detail-skel-media { height: 22rem; } } @media (min-width: 1024px) { .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .detail-name { font-size: 2rem; } } /* ============================================================ * 28. QUICK VIEW (modal pratinjau produk) * ============================================================ */ .qv { display: flex; flex-direction: column; } .qv-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--muted); flex-shrink: 0; } .qv-media img { width: 100%; height: 100%; object-fit: cover; } .qv-badge { position: absolute; top: 0.75rem; left: 0.75rem; } .qv-body { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; } .qv-badges { flex-wrap: wrap; } .qv-est { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--muted-foreground); } .qv-est svg { width: 12px; height: 12px; } .qv-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; } .qv-price { font-size: 1.375rem; font-weight: 800; color: var(--primary); margin-top: 0.25rem; } .qv-desc { font-size: 0.875rem; line-height: 1.65; } .qv-sub { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; } .qv-sub svg { width: 14px; height: 14px; } .qv-feats { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.8125rem; } .qv-feats li { display: flex; align-items: flex-start; gap: 0.5rem; } .qv-notes { border-radius: 0.75rem; background: color-mix(in oklab, var(--muted) 45%, transparent); padding: 0.875rem 1rem; } .qv-notes-list { display: flex; flex-direction: column; gap: 0.375rem; margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.75rem; color: var(--muted-foreground); } .qv-notes-list li { display: flex; gap: 0.5rem; align-items: flex-start; } .qv-dot { width: 5px; height: 5px; border-radius: 9999px; background: var(--primary); margin-top: 0.4rem; flex-shrink: 0; } .qv-actions { display: grid; gap: 0.5rem; margin-top: 0.5rem; } @media (min-width: 640px) { .qv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .qv-media { aspect-ratio: auto; min-height: 100%; } .qv-body { padding: 1.5rem; } .qv-actions { grid-template-columns: 1fr 1fr; } } /* ============================================================ * 29. NOT FOUND * ============================================================ */ .notfound { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 5rem 1rem 6rem; text-align: center; } .notfound-ico { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 1.1rem; background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); } .notfound-title { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; } .notfound-sub { max-width: 28rem; color: var(--muted-foreground); } .notfound-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 0.5rem; } /* ============================================================ * 30. FORM PEMESANAN (pesan) * ============================================================ */ .pesan-page { max-width: 56rem; } .pesan-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-bottom: 1.5rem; } .page-title { letter-spacing: -0.015em; } .page-sub { font-size: 0.875rem; line-height: 1.65; } .langganan-badge-wrap { margin-bottom: 1.25rem; } .langganan-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; border: 1px solid color-mix(in oklab, var(--primary) 25%, transparent); border-radius: 0.75rem; background: color-mix(in oklab, var(--primary) 7%, transparent); color: var(--primary); font-size: 0.8125rem; font-weight: 500; } .formtype-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; padding: 0.375rem; margin-bottom: 1.5rem; border-radius: 0.875rem; background: var(--muted); } .formtype-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; border: 0; border-radius: 0.625rem; background: transparent; color: var(--muted-foreground); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .formtype-btn:hover { color: var(--foreground); } .formtype-btn.active { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); } .fitur-box { border: 1px dashed var(--border); border-radius: 0.875rem; background: color-mix(in oklab, var(--muted) 30%, transparent); padding: 1rem; } .fitur-row { min-height: 2.5rem; font-size: 0.875rem; } .notes-panel { border-left: 3px solid var(--primary); border-radius: 0.75rem; background: color-mix(in oklab, var(--primary) 5%, transparent); padding: 1rem; } .notes-title { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 600; } .notes-title .ico { color: var(--primary); } .notes-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font-size: 0.75rem; color: var(--muted-foreground); } .notes-item { display: flex; align-items: flex-start; gap: 0.5rem; } .notes-dot { width: 5px; height: 5px; border-radius: 9999px; background: var(--primary); margin-top: 0.4rem; flex-shrink: 0; } .submit-btn { margin-top: 0.5rem; } .submit-note { margin-top: 0.75rem; text-align: center; font-size: 0.75rem; color: var(--muted-foreground); } .alert-error { display: flex; align-items: flex-start; gap: 0.625rem; margin-bottom: 1.25rem; padding: 0.875rem 1rem; border: 1px solid #fecaca; border-radius: 0.75rem; background: #fef2f2; color: #b91c1c; font-size: 0.8125rem; } .alert-title { font-weight: 700; } .alert-msg { margin-top: 0.125rem; } .dark .alert-error { border-color: #7f1d1d; background: #450a0a; color: #fca5a5; } /* Tampilan sukses (order dibuat) */ .pesan-success { max-width: 42rem; } .success-card { display: flex; flex-direction: column; align-items: center; gap: 0.875rem; padding: 2rem 1.25rem; text-align: center; } .success-check { color: var(--emerald-strong); } .success-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em; } .order-number-box { width: 100%; margin-top: 0.25rem; padding: 1rem; border: 1px dashed color-mix(in oklab, var(--primary) 45%, transparent); border-radius: 0.875rem; background: color-mix(in oklab, var(--primary) 6%, transparent); } .order-number-label, .order-no-label { font-size: 0.75rem; } .order-number-big { font-size: 1.5rem; font-weight: 800; letter-spacing: 0.02em; color: var(--primary); margin-top: 0.125rem; overflow-wrap: anywhere; } .success-actions { display: grid; gap: 0.625rem; width: 100%; margin-top: 0.5rem; } @media (min-width: 640px) { .success-card { padding: 2.5rem 2rem; } .success-actions { grid-template-columns: 1fr 1fr; } } /* ============================================================ * 31. CEK STATUS PESANAN (track) * ============================================================ */ .track-page { max-width: 42rem; } .track-hero { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; } .track-ico { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); } .track-title { letter-spacing: -0.015em; } .track-sub { font-size: 0.875rem; max-width: 28rem; line-height: 1.65; } .track-card { margin-bottom: 1.5rem; } .track-form { display: flex; flex-direction: column; gap: 1rem; } .track-help { margin-left: auto; } .track-skeleton { display: flex; flex-direction: column; gap: 0.625rem; } .track-result { display: flex; flex-direction: column; gap: 1.5rem; } .track-result-col { display: flex; flex-direction: column; gap: 1.5rem; } .track-error { display: flex; align-items: flex-start; gap: 0.625rem; margin-bottom: 1.5rem; padding: 1rem; border: 1px solid #fecaca; border-radius: 0.875rem; background: #fef2f2; color: #b91c1c; } .track-error .ico { margin-top: 0.125rem; } .track-error-title { font-size: 0.875rem; font-weight: 700; } .track-error-msg { font-size: 0.8125rem; margin-top: 0.125rem; } .dark .track-error { border-color: #7f1d1d; background: #450a0a; color: #fca5a5; } .dark .track-error .muted { color: color-mix(in oklab, #fca5a5 75%, transparent); } .result-card { display: flex; flex-direction: column; gap: 1.25rem; } .result-head { flex-wrap: wrap; gap: 0.75rem; } .order-no-value { font-size: 1.125rem; font-weight: 700; color: var(--primary); overflow-wrap: anywhere; } .result-badges { flex-wrap: wrap; gap: 0.375rem; } .result-card-title { font-size: 1.125rem; font-weight: 700; } .meta-grid { display: grid; gap: 1rem; margin: 0; } .meta-item { display: flex; align-items: flex-start; gap: 0.625rem; } .meta-ico { color: var(--primary); margin-top: 0.125rem; } .meta-dt { font-size: 0.75rem; } .meta-dd { margin-top: 0.125rem; font-size: 0.875rem; font-weight: 500; overflow-wrap: anywhere; } @media (min-width: 640px) { .meta-grid { grid-template-columns: 1fr 1fr; } } /* Progres bar */ .prog-block { display: flex; flex-direction: column; gap: 0.5rem; } .prog-head { font-size: 0.75rem; gap: 0.75rem; } .prog { width: 100%; height: 0.5rem; border-radius: 9999px; background: var(--muted); overflow: hidden; } .prog-fill { height: 100%; min-width: 6%; border-radius: inherit; background: linear-gradient(to right, var(--primary), var(--emerald)); transition: width 0.8s ease; } /* Stepper 6 status */ .status-stepper { display: flex; flex-wrap: wrap; gap: 0.5rem; } .status-stepper .step-item { display: flex; flex: 1 1 4rem; min-width: 3.75rem; flex-direction: column; align-items: center; gap: 0.375rem; text-align: center; } .status-stepper .step-dot { display: flex; align-items: center; justify-content: center; width: 1.875rem; height: 1.875rem; border: 2px solid var(--border); border-radius: 9999px; background: var(--card); color: var(--muted-foreground); font-size: 0.6875rem; font-weight: 600; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .status-stepper .step-dot svg { width: 12px; height: 12px; } .status-stepper .step-dot.done { background: var(--emerald); border-color: var(--emerald); color: #fff; } .status-stepper .step-dot.current { border-color: var(--primary); color: var(--primary); animation: admPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .status-stepper .step-label { font-size: 0.625rem; line-height: 1.3; color: var(--muted-foreground); } .status-stepper .step-item.done .step-label { color: var(--emerald-strong); } .status-stepper .step-item.current .step-label { color: var(--primary); font-weight: 600; } /* Riwayat (timeline vertikal) */ .timeline { position: relative; display: flex; flex-direction: column; gap: 1.25rem; margin: 0; padding: 0 0 0 1.5rem; list-style: none; border-left: 2px solid var(--border); } .tl-item { position: relative; } .tl-dot { position: absolute; top: 0.3rem; left: -1.5rem; width: 12px; height: 12px; margin-left: -7px; border-radius: 9999px; background: var(--primary); box-shadow: 0 0 0 3px var(--background); } .tl-action { font-size: 0.875rem; font-weight: 600; } .tl-detail { font-size: 0.8125rem; margin-top: 0.125rem; white-space: pre-wrap; overflow-wrap: anywhere; } .tl-time { font-size: 0.75rem; margin-top: 0.25rem; } /* Ulasan pada hasil track */ .review-card-head { display: flex; align-items: flex-start; gap: 0.625rem; } .review-ico { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: color-mix(in oklab, var(--gold) 12%, transparent); color: var(--gold); flex-shrink: 0; } .review-ico svg { width: 18px; height: 18px; fill: var(--gold); } .review-service { font-size: 0.75rem; margin-top: 0.125rem; } .review-form { display: flex; flex-direction: column; gap: 1rem; } .review-send { min-height: 2.75rem; } .review-done { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem 0; text-align: center; } .review-done-ico { color: var(--emerald-strong); } .review-done-msg { font-size: 0.875rem; max-width: 26rem; } /* ============================================================ * 32. ADMIN (tambahan di atas baseline admin.js; baseline di-inject * JS dan menang cascade — di sini hanya pelengkap & penyempurna) * ============================================================ */ .adm-root { width: 100%; } .gate-btn-text { display: inline-block; } /* Kartu generik tab tambahan (admin-extra) */ .adm-card { background: var(--card); border: 1px solid var(--border); border-radius: 0.875rem; box-shadow: var(--shadow-sm); } .adm-card-flush { overflow: hidden; } .adm-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); } .adm-card-title { font-size: 1rem; font-weight: 600; } .adm-card-body { padding: 1.25rem; } .adm-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.875rem 1.25rem; border-top: 1px solid var(--border); } .adm-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 25%, transparent); } .adm-count { font-size: 0.8125rem; color: var(--muted-foreground); } .adm-search-input { padding-left: 2rem; } /* Page head tambahan */ .adm-pagehead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; } .adm-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } /* Grid & box */ .adm-grid-2 { display: grid; gap: 1rem; } .adm-grid-2-lg { display: grid; gap: 1rem; } @media (min-width: 640px) { .adm-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .adm-grid-2-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .adm-box { border: 1px solid var(--border); border-radius: 0.75rem; padding: 1rem; } .adm-box-title { margin-bottom: 0.75rem; font-size: 0.8125rem; font-weight: 600; } /* Sub-tab & pane (konten website) */ .adm-subtabs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; padding: 0.25rem; margin-bottom: 1.25rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--muted); } .adm-subtab { border: 0; border-radius: 0.375rem; padding: 0.4rem 0.75rem; background: transparent; color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .adm-subtab:hover { color: var(--foreground); } .adm-subtab.active { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-xs); } .adm-tabbody { animation: admFadeIn 0.2s ease-out both; } .adm-pane { display: flex; flex-direction: column; gap: 1.25rem; } /* Banner info */ .adm-banner { display: flex; align-items: flex-start; gap: 0.625rem; margin-bottom: 1rem; padding: 0.75rem 0.875rem; border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); border-radius: 0.75rem; background: color-mix(in oklab, var(--primary) 8%, transparent); color: var(--primary); font-size: 0.8125rem; line-height: 1.55; } .adm-banner-ico { flex-shrink: 0; margin-top: 0.125rem; } /* Preview hero (konten website) */ .adm-hero-preview { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; border: 1px dashed var(--border); border-radius: 0.75rem; padding: 1.25rem; background: color-mix(in oklab, var(--muted) 30%, transparent); } .adm-preview-badge { display: inline-flex; align-items: center; border: 1px solid color-mix(in oklab, var(--primary) 20%, transparent); background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); border-radius: 9999px; padding: 0.125rem 0.625rem; font-size: 0.6875rem; font-weight: 600; } .adm-preview-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; } .adm-preview-sub { font-size: 0.8125rem; color: var(--muted-foreground); } /* Owner (konten website) */ .adm-owner-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .adm-owner-avatar { width: 4rem; height: 4rem; border-radius: 9999px; overflow: hidden; border: 1px solid var(--border); flex-shrink: 0; background: var(--muted); } .adm-owner-avatar img { width: 100%; height: 100%; object-fit: cover; } .adm-owner-avatar-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--muted-foreground); } .adm-owner-upload { display: flex; flex-direction: column; gap: 0.375rem; } .adm-hidden-input { display: none !important; } /* Preset gambar & preview */ .adm-preset-row { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.125rem 0 0.25rem; } .adm-preset-item { width: 3.5rem; height: 3.5rem; padding: 2px; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--card); cursor: pointer; flex-shrink: 0; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .adm-preset-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.375rem; } .adm-preset-item:hover { border-color: color-mix(in oklab, var(--primary) 50%, transparent); } .adm-preset-item.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--ring-soft); } .adm-img-preview { margin-top: 0.5rem; } .adm-img-preview-img { width: 100%; max-height: 14rem; object-fit: cover; border: 1px solid var(--border); border-radius: 0.75rem; } .adm-price-hint { font-size: 0.75rem; color: var(--muted-foreground); } .adm-price-hint.invalid { color: var(--destructive); font-weight: 500; } /* Plan produk */ .adm-plan-box { display: flex; flex-direction: column; gap: 0.75rem; border: 1px solid var(--border); border-radius: 0.75rem; padding: 1rem; } .adm-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; } .adm-plan-pop-label { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 500; color: var(--amber-warm); } .adm-plan-star { color: var(--amber-warm); } .adm-star-pop svg { fill: var(--amber-warm); } /* Steps bernomor (form bertahap admin) */ .adm-steps { display: flex; flex-direction: column; gap: 0.75rem; } .adm-step-num { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary); font-size: 0.6875rem; font-weight: 700; flex-shrink: 0; } /* Ulasan (tab admin) */ .adm-review-list { display: flex; flex-direction: column; } .adm-review-item { display: flex; flex-direction: column; gap: 0.375rem; padding: 1rem 1.25rem; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); } .adm-review-item:last-child { border-bottom: 0; } .adm-review-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .adm-review-who { display: flex; flex-direction: column; min-width: 0; } .adm-review-name { font-size: 0.875rem; font-weight: 600; } .adm-review-biz { font-size: 0.75rem; color: var(--muted-foreground); } .adm-review-comment { font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); white-space: pre-wrap; } .adm-review-meta { font-size: 0.75rem; color: var(--muted-foreground); } .adm-review-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .adm-review-toggle { border: 0; background: none; padding: 0; font-size: 0.75rem; font-weight: 500; color: var(--primary); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } /* Ringkasan (dashboard katalog) */ .adm-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.75rem; } .adm-summary-card { border: 1px solid var(--border); border-radius: 0.75rem; background: var(--card); padding: 0.875rem 1rem; } .adm-summary-label { font-size: 0.75rem; } .adm-summary-value { margin-top: 0.125rem; font-size: 1.125rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Thumbnail produk */ .adm-prod-thumb { width: 2.75rem; height: 2.75rem; border-radius: 0.5rem; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; } .adm-prod-thumb-empty { display: inline-flex; align-items: center; justify-content: center; background: var(--muted); color: var(--muted-foreground); } .adm-prod-name { font-weight: 500; } /* Perangkat push */ .adm-dev-list { display: flex; flex-direction: column; gap: 0.5rem; } .adm-dev-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem; } .adm-dev-main { min-width: 0; } .adm-dev-name { font-size: 0.8125rem; font-weight: 600; } .adm-dev-info { font-size: 0.75rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adm-dev-meta { font-size: 0.75rem; color: var(--muted-foreground); flex-shrink: 0; text-align: right; } .adm-dev-empty { padding: 0.5rem 0; font-size: 0.8125rem; color: var(--muted-foreground); } /* Bantuan & kode */ .adm-help { border: 1px dashed var(--border); border-radius: 0.75rem; padding: 1rem; font-size: 0.8125rem; line-height: 1.65; color: var(--muted-foreground); } .adm-help-title { margin-bottom: 0.375rem; font-weight: 600; color: var(--foreground); } .adm-code { font-family: var(--font-mono); font-size: 0.75rem; background: var(--muted); padding: 0.125rem 0.375rem; border-radius: 0.25rem; overflow-wrap: anywhere; } /* Slider volume */ .adm-range { width: 100%; accent-color: var(--primary); cursor: pointer; } .adm-vol-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.375rem; font-size: 0.8125rem; } .adm-vol-pct { font-weight: 600; font-variant-numeric: tabular-nums; } /* Catatan retry print */ .adm-retry-note { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; border: 1px solid color-mix(in oklab, #f59e0b 35%, transparent); border-radius: 0.5rem; background: color-mix(in oklab, #f59e0b 10%, transparent); color: #b45309; font-size: 0.75rem; } .dark .adm-retry-note { color: #fcd34d; } .adm-reset { border: 0; background: none; padding: 0; font-size: 0.75rem; color: var(--muted-foreground); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .adm-reset:hover { color: var(--foreground); } .adm-save-row { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; } /* Popup order baru — aksen garis gradient di atas modal */ .modal-box .adm-popup { position: relative; } .modal-box .adm-popup::before { content: ''; position: absolute; top: -1.5rem; left: -1.5rem; right: -1.5rem; height: 4px; border-radius: 9999px; background: linear-gradient(90deg, var(--primary), var(--emerald)); pointer-events: none; } .adm-order-dlg { display: flex; flex-direction: column; gap: 1.25rem; } /* ============================================================ * 33. FOOTER * ============================================================ */ .site-footer { margin-top: auto; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 40%, transparent); padding-bottom: env(safe-area-inset-bottom, 0px); } .footer-wrap { padding-top: 2.5rem; padding-bottom: 2.5rem; } .footer-grid { display: grid; gap: 2rem; } .footer-brand { display: flex; flex-direction: column; gap: 0.75rem; } .footer-logo { width: 40px; height: 40px; border-radius: var(--radius-lg); object-fit: cover; box-shadow: 0 0 0 1px var(--border); } .footer-brand-text { line-height: 1.25; } .footer-brand-name { display: block; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; } .footer-brand-sub { display: block; font-size: 0.75rem; } .footer-desc { font-size: 0.875rem; line-height: 1.65; max-width: 22rem; } .footer-title { margin-bottom: 0.75rem; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--foreground); } .footer-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; } .footer-link { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0; border: 0; background: none; color: var(--muted-foreground); font-size: 0.875rem; text-align: left; cursor: pointer; transition: color 0.15s ease; } .footer-link:hover { color: var(--primary); } .footer-contact { display: flex; align-items: center; min-height: 2.75rem; gap: 0.5rem; color: var(--muted-foreground); text-decoration: none; transition: color 0.15s ease; } .footer-contact:hover { color: var(--primary); } .footer-ico { color: var(--primary); } .footer-addr { display: flex; align-items: flex-start; gap: 0.5rem; color: var(--muted-foreground); } .footer-addr .footer-ico { margin-top: 0.2rem; } .footer-bottom { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 2.5rem; border-top: 1px solid var(--border); padding-top: 1.5rem; font-size: 0.75rem; color: var(--muted-foreground); } @media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-wrap { padding-left: 1.5rem; padding-right: 1.5rem; } .footer-bottom { flex-direction: row; } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* ============================================================ * 34. ANIMASI & KEYFRAMES * ============================================================ */ /* Reveal on scroll (IRD.initReveal) */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .reveal.in-view { opacity: 1; transform: none; } .reveal-d1 { transition-delay: 0.08s; } .reveal-d2 { transition-delay: 0.16s; } .reveal-d3 { transition-delay: 0.24s; } .reveal-d4 { transition-delay: 0.32s; } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes popIn { 0% { opacity: 0; transform: scale(0.6); } 70% { transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } } @keyframes ringPulse { 0% { transform: scale(1); opacity: 0.5; } 70%, 100% { transform: scale(1.45); opacity: 0; } } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes blobMorph { 0% { border-radius: 48% 52% 60% 40% / 45% 40% 60% 55%; } 25% { border-radius: 55% 45% 48% 52% / 52% 58% 42% 48%; } 50% { border-radius: 45% 55% 52% 48% / 58% 45% 55% 42%; } 75% { border-radius: 52% 48% 55% 45% / 42% 55% 45% 58%; } 100% { border-radius: 48% 52% 60% 40% / 45% 40% 60% 55%; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes skeletonPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @keyframes toastIn { from { opacity: 0; transform: translateX(16px) scale(0.97); } to { opacity: 1; transform: none; } } @keyframes toastOut { to { opacity: 0; transform: translateX(16px) scale(0.97); } } @keyframes bootBar { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } } @keyframes bootPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* ============================================================ * 35. PRINT * ============================================================ */ @media print { .navbar, .nav-backdrop, .nav-mobile, .site-footer, .toast-wrap, .modal-overlay, .boot-loader, .adm-sidebar, .adm-header, .adm-bnav, .adm-footer, .hero-blob-1, .hero-blob-2 { display: none !important; } body { background: #fff; color: #000; } .card, .modal-box { box-shadow: none !important; } .table-wrap { overflow: visible; } .reveal { opacity: 1 !important; transform: none !important; } } /* ============================================================ * 36. AKSESIBILITAS — kurangi gerakan * ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .boot-bar span { animation: none; } } /* ============================================================ * 37. RESPONSIVE FINETUNE * ============================================================ */ @media (max-width: 400px) { .pd-actions { grid-template-columns: 1fr; } .hero-float { left: 0.75rem; } } /* Target sentuh nyaman di layar kecil */ @media (pointer: coarse) { .btn { min-height: 2.75rem; } } /* ============================================================ * 38. ADMIN — FALLBACK LENGKAP * admin.js meng-inject baseline yang sama saat runtime; blok ini * membuat style.css tetap lengkap & self-contained. Nilai menyamai * baseline admin.js (tak saling bertabrakan — nilai identik). * ============================================================ */ .adm-pulse { animation: admPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .adm-bell { display: inline-flex; animation: admBell 1.4s ease-in-out infinite; } .adm-fade { animation: admFadeIn 0.2s ease-out both; } @keyframes admPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @keyframes admBell { 0%, 100% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.18) rotate(-9deg); } 75% { transform: scale(1.18) rotate(9deg); } } @keyframes admFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } html.dark .adm-sun { display: none; } html:not(.dark) .adm-moon { display: none; } .ta-r { text-align: right; } .ta-c { text-align: center; } @media (max-width: 639.98px) { .adm-sm-hide { display: none !important; } } @media (max-width: 767.98px) { .adm-md-hide { display: none !important; } } /* PIN gate */ .adm-gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--muted); } .adm-gate-card { width: 100%; max-width: 24rem; } .adm-gate-head { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; text-align: center; } .adm-gate-logo { height: 3.5rem; width: 3.5rem; border: 1px solid var(--border); border-radius: 0.75rem; object-fit: cover; } .adm-gate-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; } .adm-gate-sub { font-size: 0.875rem; color: var(--muted-foreground); } .adm-gate-pin { font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: 0.4em; text-align: center; } .adm-gate-error { font-size: 0.875rem; font-weight: 500; color: #dc2626; } .adm-gate-hint { margin-top: 1rem; text-align: center; font-size: 0.75rem; color: var(--muted-foreground); } /* Sidebar desktop */ aside.adm-sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; display: none; flex-direction: column; width: 240px; border-right: 1px solid var(--border); background: var(--sidebar); transition: width 0.2s ease; } .adm-sidebar.adm-collapsed { width: 72px; } @media (min-width: 1024px) { aside.adm-sidebar { display: flex; } } .adm-side-head { display: flex; align-items: center; gap: 0.625rem; height: 3.5rem; padding: 0 1rem; border-bottom: 1px solid var(--border); } .adm-sidebar.adm-collapsed .adm-side-head { justify-content: center; padding: 0; } .adm-side-logo { height: 2rem; width: 2rem; flex-shrink: 0; border-radius: 0.5rem; object-fit: cover; } .adm-side-title { font-size: 0.875rem; font-weight: 700; line-height: 1.25; } .adm-side-sub { font-size: 11px; line-height: 1.25; color: var(--muted-foreground); } .adm-side-nav { flex: 1 1 0%; display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem; overflow-y: auto; } .adm-side-item { display: flex; width: 100%; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border: 0; border-radius: 0.375rem; background: transparent; color: var(--muted-foreground); font-size: 0.875rem; font-weight: 500; text-align: left; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .adm-side-item:hover { background: var(--muted); color: var(--foreground); } /* Item aktif = bg-primary/10 text-primary (persis AdminApp.tsx) */ .adm-sidebar .adm-side-item.active { background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); } .adm-sidebar.adm-collapsed .adm-side-item { justify-content: center; padding: 0.5rem 0; } .adm-sidebar.adm-collapsed .adm-hide-c { display: none; } .adm-side-foot { padding: 0.5rem; border-top: 1px solid var(--border); } /* Wrapper konten */ .adm-wrap { display: flex; flex-direction: column; min-height: 100vh; transition: padding 0.2s ease; } @media (min-width: 1024px) { .adm-wrap { padding-left: 240px; } .adm-wrap.adm-wrap-collapsed { padding-left: 72px; } } /* Header sticky */ .adm-wrap .adm-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; height: 3.5rem; padding: 0 1rem; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--background) 80%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .adm-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; font-weight: 600; } @media (min-width: 640px) { .adm-title { font-size: 1rem; } } .adm-header-actions { display: flex; align-items: center; gap: 0.5rem; } .adm-chip { display: flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border: 1px solid var(--border); border-radius: 9999px; background: transparent; color: var(--muted-foreground); font-size: 0.75rem; cursor: default; } button.adm-chip { cursor: pointer; } .adm-dot { height: 0.5rem; width: 0.5rem; border-radius: 9999px; background: var(--muted-foreground); flex-shrink: 0; } .adm-dot.adm-pulse { background: #10b981; } .adm-printer-chip.ok { border-color: #a7f3d0; background: #ecfdf5; color: #047857; } .adm-printer-chip.off { border-color: #fecaca; background: #fef2f2; color: #dc2626; } .dark .adm-printer-chip.ok { border-color: #064e3b; background: #022c22; color: #34d399; } .dark .adm-printer-chip.off { border-color: #7f1d1d; background: #450a0a; color: #f87171; } .adm-printer-name { display: none; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 768px) { .adm-printer-name { display: inline; } } /* Main + footer admin */ .adm-main { flex: 1 1 0%; padding: 1rem; padding-bottom: 7rem; } @media (min-width: 640px) { .adm-main { padding: 1.5rem; padding-bottom: 7rem; } } @media (min-width: 1024px) { .adm-main { padding-bottom: 2rem; } } .adm-footer { display: none; margin-top: auto; padding: 0.75rem 1.5rem; border-top: 1px solid var(--border); text-align: center; font-size: 0.75rem; color: var(--muted-foreground); } @media (min-width: 1024px) { .adm-footer { display: block; } } /* Bottom nav mobile */ .adm-bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; border-top: 1px solid var(--border); background: var(--background); } @media (min-width: 1024px) { .adm-bnav { display: none !important; } } .adm-bnav-inner { display: flex; gap: 0.25rem; width: 100%; padding: 0.5rem; padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); overflow-x: auto; } .adm-bnav-item { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; min-width: 4.5rem; padding: 0.375rem 0.75rem; border: 0; border-radius: 0.375rem; background: transparent; color: var(--muted-foreground); font-size: 11px; font-weight: 500; cursor: pointer; } .adm-bnav .adm-bnav-item.active { background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); } /* Page head + kartu statistik */ .adm-page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; } .adm-page-title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; } @media (min-width: 640px) { .adm-page-title { font-size: 1.5rem; } } .adm-page-desc { margin-top: 0.125rem; font-size: 0.875rem; color: var(--muted-foreground); } .adm-page-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .adm-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } @media (min-width: 640px) { .adm-cards { gap: 1rem; } } @media (min-width: 1280px) { .adm-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .adm-cards-3 { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } @media (min-width: 640px) { .adm-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .adm-stat-card { padding: 1rem; } .adm-stat-label { font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); } .adm-stat-value { overflow: hidden; margin-top: 0.25rem; text-overflow: ellipsis; white-space: nowrap; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; } @media (min-width: 640px) { .adm-stat-value { font-size: 1.5rem; } } .adm-stat-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .adm-stat-ico { color: var(--primary); flex-shrink: 0; } /* Chips status dashboard */ .adm-chips-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; } .adm-chip-status { display: flex; align-items: center; gap: 0.375rem; } .adm-chip-count { font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; } /* Tab tersegmentasi */ .adm-tabs { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--muted); } .adm-tab { padding: 0.375rem 0.75rem; border: 0; border-radius: 0.375rem; background: transparent; color: var(--muted-foreground); font-size: 0.875rem; font-weight: 500; cursor: pointer; } .adm-tab.active { background: var(--card); color: var(--foreground); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); } /* Pencarian */ .adm-search { position: relative; } .adm-search .ico { position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); pointer-events: none; } .adm-search .input { padding-left: 2rem; } /* Label kecil dialog */ .adm-field-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); } .adm-field-value { white-space: pre-wrap; font-size: 0.875rem; overflow-wrap: anywhere; } .adm-sec-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); } .adm-sep { border-top: 1px solid var(--border); margin: 0.25rem 0; } .adm-info-box { padding: 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem; font-size: 0.875rem; } .adm-note-box { padding: 0.75rem; border: 1px dashed var(--border); border-radius: 0.5rem; } .adm-muted-box { padding: 0.75rem; border-radius: 0.5rem; background: var(--muted); } .adm-info-grid { display: grid; gap: 0.75rem; } @media (min-width: 640px) { .adm-info-grid { grid-template-columns: 1fr 1fr; } } .adm-dlg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } /* Timeline riwayat admin */ .adm-timeline { position: relative; display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0 0 0 1rem; list-style: none; border-left: 2px solid var(--border); } .adm-tl-item { position: relative; } .adm-tl-ico { position: absolute; left: -26px; top: 0; display: flex; align-items: center; justify-content: center; height: 1.25rem; width: 1.25rem; border: 1px solid var(--border); border-radius: 9999px; background: var(--card); } .adm-tl-ico .ico { color: var(--primary); } .adm-tl-ico svg { width: 12px; height: 12px; } .adm-tl-title { font-size: 0.875rem; font-weight: 500; } .adm-tl-detail { font-size: 0.75rem; color: var(--muted-foreground); white-space: pre-wrap; overflow-wrap: anywhere; } .adm-tl-time { font-size: 11px; color: var(--muted-foreground); opacity: 0.75; } /* Preview struk */ .adm-receipt-pre { padding: 1rem; border-radius: 0.5rem; background: #09090b; color: #f4f4f4; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.625; white-space: pre-wrap; overflow-x: auto; } /* Popup notifikasi order baru */ .adm-popup { display: flex; flex-direction: column; gap: 0.75rem; } .adm-popup-icon { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin: 0 auto; border-radius: 9999px; background: var(--muted); } .adm-popup-icon .ico { color: var(--primary); } .adm-popup-icon svg { width: 28px; height: 28px; } .adm-popup-title { text-align: center; font-size: 1.125rem; font-weight: 700; line-height: 1.3; } .adm-popup-sub { text-align: center; font-size: 0.875rem; color: var(--muted-foreground); } .adm-popup-card { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem; text-align: center; } .adm-popup-no { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; color: var(--primary); } .adm-popup-name { font-size: 0.875rem; font-weight: 500; } .adm-popup-actions { display: flex; flex-direction: column; gap: 0.5rem; } @media (min-width: 640px) { .adm-popup-actions { flex-direction: row; } } .adm-popup-actions .btn { flex: 1 1 0%; } .adm-popup-close { margin: 0 auto; } /* Skeleton baris admin */ .adm-skel-rows { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; } .adm-skel-row { width: 100%; height: 2.25rem; } .adm-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 3rem 1rem; text-align: center; } .adm-empty-ico, .adm-empty-icon { display: flex; align-items: center; justify-content: center; height: 3rem; width: 3rem; border-radius: 9999px; background: var(--muted); color: var(--muted-foreground); } .adm-empty-title { font-size: 0.875rem; font-weight: 500; } .adm-empty-desc { max-width: 24rem; font-size: 0.75rem; color: var(--muted-foreground); } .adm-print-problem { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 500; color: #dc2626; } .adm-lunas-note { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: #059669; } .adm-fitur-list { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; } .adm-fitur-list .badge { gap: 0.25rem; font-weight: 400; } .adm-fitur-list .ico { color: #059669; } .adm-wa-link { display: inline-flex; width: fit-content; align-items: center; gap: 0.375rem; color: var(--primary); text-decoration: none; } .adm-wa-link:hover { text-decoration: underline; } .adm-btn-danger { color: #dc2626; } .adm-review-card { /* pemakaian: adm-card adm-card-flush adm-review-card */ } .adm-tabbody > .adm-pane:first-child { animation: admFadeIn 0.2s ease-out both; } /* ============================================================ * 39. PELENGKAP KELAS LAIN (hasil audit kelas JS) * ============================================================ */ /* Form pemesanan — wrapper form */ .order-form { display: flex; flex-direction: column; } /* Bintang statis (display) */ .stars-static .star svg { width: 16px; height: 16px; } .rev-head .stars-static .star svg { width: 15px; height: 15px; } /* Tombol kembali di hasil cek pesanan */ .track-back { align-self: center; min-width: 12rem; margin-top: 0.25rem; } /* Kartu daftar produk admin: nama + thumb */ .adm-prod-thumb-cell { display: flex; align-items: center; gap: 0.625rem; } /* Grid layanan & grid paket langganan (modifier di atas grid-3/grid-4) */ .svc-grid { align-items: stretch; } .plan-grid { align-items: stretch; } /* Kategori pintasan — kiri heading & label baris */ .cat-head-left { min-width: 0; } .cat-label { font-size: 0.9375rem; font-weight: 600; color: var(--foreground); } /* Tombol tema navbar (ikon sun/moon via CSS dark-mode) */ .nav-theme .ico svg { width: 18px; height: 18px; } /* Detail produk */ .detail-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .detail-order { min-height: 2.75rem; } /* Quick view */ .qv-order { min-height: 2.75rem; } .qv-full { min-height: 2.75rem; } /* Footer kontak — teks nilai */ .footer-ct-text { overflow-wrap: anywhere; }