/* ============================================================ RAANIYAH — MODE GELAP WEBSITE PUBLIK ------------------------------------------------------------ Aktif saat (skrip di includes/header_public.php; pilihan Terang / Gelap / Ikuti perangkat disimpan per perangkat, kunci 'rs_tema_publik'). Hanya mengganti WARNA — tata letak & posisi tidak berubah. Semua aturan diawali html[data-tema="gelap"] sehingga mode terang sama persis seperti sebelumnya. ============================================================ */ /* ---------- 0) TOKEN ---------- */ html[data-tema="gelap"]{ --pg-bg:#141013; --pg-bg-2:#1A1418; --pg-card:#1F181D; --pg-card-2:#271F25; --pg-seg:#2E252C; --pg-line:#3A2F37; --pg-line-soft:#2D252B; --pg-ink:#F3EAEE; --pg-ink-2:#D5C8CE; --pg-muted:#A79AA1; --pg-faint:#8F8289; --pg-aksen:var(--rs-primary,#D6437E); --pg-aksen-tx:color-mix(in srgb, var(--rs-primary,#D6437E) 60%, #fff); --pg-aksen-bg:color-mix(in srgb, var(--rs-primary,#D6437E) 18%, var(--pg-card)); --pg-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.6); /* token lama situs → versi gelap */ --rs-cream:var(--pg-bg); --rs-white:var(--pg-card); --rs-black:var(--pg-ink); --rs-text:var(--pg-ink-2); --rs-blush:var(--pg-card-2); --rs-blush-2:var(--pg-line); --rs-shadow:var(--pg-shadow); --ds-line:var(--pg-line); --ds-surface:var(--pg-card); --ds-bg:var(--pg-bg); --ds-bg-tint:var(--pg-bg-2); --ds-text:var(--pg-ink-2); --ds-text-muted:var(--pg-muted); --ds-heading:var(--pg-ink); --ds-border:var(--pg-line); --ds-link:var(--pg-aksen-tx); --ds-success-bg:rgba(47,170,100,.14); --ds-danger-bg:rgba(220,70,80,.14); --ds-warning-bg:rgba(220,160,50,.14); --bs-body-bg:var(--pg-bg); --bs-body-color:var(--pg-ink-2); --bs-emphasis-color:var(--pg-ink); --bs-secondary-color:var(--pg-muted); --bs-tertiary-color:var(--pg-faint); --bs-border-color:var(--pg-line); --bs-secondary-bg:var(--pg-card-2); --bs-tertiary-bg:var(--pg-seg); --bs-heading-color:var(--pg-ink); --bs-link-color:var(--pg-aksen-tx); --bs-link-hover-color:#fff; color-scheme:dark; } /* ---------- 1) LATAR & TEKS ---------- */ html[data-tema="gelap"] body, html[data-tema="gelap"] body.rs-public{ background:var(--pg-bg) !important; background-image:none !important; color:var(--pg-ink-2) !important; } html[data-tema="gelap"] body.rs-public::before, html[data-tema="gelap"] body.rs-public::after{ opacity:.06 !important; } html[data-tema="gelap"] body.rs-public :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6){ color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public .text-muted, html[data-tema="gelap"] body.rs-public .text-secondary{ color:var(--pg-muted) !important; } html[data-tema="gelap"] body.rs-public .text-dark, html[data-tema="gelap"] body.rs-public .text-black{ color:var(--pg-ink) !important; } html[data-tema="gelap"] body.rs-public .text-body{ color:var(--pg-ink-2) !important; } html[data-tema="gelap"] body.rs-public .bg-white, html[data-tema="gelap"] body.rs-public .bg-light, html[data-tema="gelap"] body.rs-public .bg-body{ background-color:var(--pg-card) !important; } html[data-tema="gelap"] body.rs-public :is(.border,.border-top,.border-bottom,.border-start,.border-end){ border-color:var(--pg-line) !important; } html[data-tema="gelap"] body.rs-public hr{ border-color:var(--pg-line); opacity:1; } html[data-tema="gelap"] body.rs-public ::selection{ background:color-mix(in srgb, var(--pg-aksen) 45%, transparent); color:#fff; } html[data-tema="gelap"] *{ scrollbar-color:#3A3037 transparent; } /* ---------- 2) TOMBOL TEMA (kedua mode) ---------- */ .rs-tema{ position:relative; flex:none; } .rs-tema-btn{ width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1px solid color-mix(in srgb, var(--rs-primary,#D6437E) 22%, transparent); background:rgba(255,255,255,.85); color:var(--rs-primary-dark,#B0336A); font-size:1rem; cursor:pointer; transition:background-color .15s ease, color .15s ease, transform .15s ease; } .rs-tema-btn:hover{ background:color-mix(in srgb, var(--rs-primary,#D6437E) 10%, #fff); } .rs-tema-menu{ position:absolute; right:0; top:calc(100% + 8px); z-index:1080; min-width:184px; padding:6px; background:#fff; border:1px solid #F1E4E8; border-radius:14px; box-shadow:0 16px 36px -10px rgba(80,30,50,.28); display:none; flex-direction:column; gap:2px; } .rs-tema.is-buka .rs-tema-menu{ display:flex; animation:rsTemaMuncul .14s ease-out; } @keyframes rsTemaMuncul{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } } .rs-tema-menu button{ display:flex; align-items:center; gap:10px; width:100%; border:0; background:none; text-align:left; padding:9px 10px; border-radius:9px; font-size:.86rem; font-weight:500; color:#5F5057; cursor:pointer; min-height:40px; } .rs-tema-menu button i{ width:18px; text-align:center; color:#A0939A; } .rs-tema-menu button:hover{ background:#FBF1F4; color:#3D2F35; } .rs-tema-menu button[aria-checked="true"]{ background:color-mix(in srgb, var(--rs-primary,#D6437E) 10%, #fff); color:var(--rs-primary-dark,#B0336A); font-weight:600; } .rs-tema-menu button[aria-checked="true"] i{ color:var(--rs-primary,#D6437E); } .rs-tema-menu button[aria-checked="true"]::after{ content:"✓"; margin-left:auto; font-weight:700; } @media (max-width:991.98px){ .rs-tema-btn{ width:36px; height:36px; } /* HP: kolom cari ringkas yang mengalah (bukan nama toko) saat ada tombol tema */ .navbar-boutique .navbar-brand{ flex:0 0 auto; } .navbar-boutique .nav-quick-actions{ flex:1 1 0% !important; min-width:0; justify-content:flex-end; } .navbar-boutique .nav-quick-actions .nav-search-compact{ flex:0 1 118px; min-width:64px; width:auto; } } html[data-tema="gelap"] .rs-tema-btn{ background:var(--pg-card-2); border-color:var(--pg-line); color:#F2C46B; } html[data-tema="gelap"] .rs-tema-btn:hover{ background:var(--pg-seg); } html[data-tema="gelap"] .rs-tema-menu{ background:var(--pg-card-2); border-color:var(--pg-line); box-shadow:0 18px 40px -10px rgba(0,0,0,.65); } html[data-tema="gelap"] .rs-tema-menu button{ color:var(--pg-ink-2); } html[data-tema="gelap"] .rs-tema-menu button:hover{ background:var(--pg-seg); color:var(--pg-ink); } html[data-tema="gelap"] .rs-tema-menu button[aria-checked="true"]{ background:var(--pg-aksen-bg); color:var(--pg-aksen-tx); } html[data-tema="gelap"] .rs-tema-menu button[aria-checked="true"] i{ color:var(--pg-aksen-tx); } /* ---------- 3) NAVBAR ---------- */ html[data-tema="gelap"] body.rs-public .navbar-boutique{ background:rgba(26,20,24,.92) !important; border-color:var(--pg-line) !important; box-shadow:0 1px 0 var(--pg-line), 0 10px 26px -16px rgba(0,0,0,.7) !important; } html[data-tema="gelap"] body.rs-public .navbar-boutique .navbar-brand span{ color:var(--pg-ink) !important; } html[data-tema="gelap"] body.rs-public .navbar-boutique .nav-link{ color:var(--pg-ink-2) !important; } html[data-tema="gelap"] body.rs-public .navbar-boutique .nav-link:hover, html[data-tema="gelap"] body.rs-public .navbar-boutique .nav-link.active{ color:var(--pg-aksen-tx) !important; } html[data-tema="gelap"] body.rs-public .navbar-boutique .navbar-toggler{ border-color:var(--pg-line) !important; background:var(--pg-card-2) !important; } html[data-tema="gelap"] body.rs-public .navbar-boutique .navbar-toggler-icon{ filter:invert(1) brightness(1.4); } html[data-tema="gelap"] body.rs-public .navbar-boutique .navbar-collapse{ background:transparent; } html[data-tema="gelap"] body.rs-public .nav-search input, html[data-tema="gelap"] body.rs-public .nav-search-compact input{ background:var(--pg-bg) !important; color:var(--pg-ink) !important; border-color:var(--pg-line) !important; } html[data-tema="gelap"] body.rs-public .nav-search i, html[data-tema="gelap"] body.rs-public .nav-search-compact i{ color:var(--pg-muted) !important; } html[data-tema="gelap"] body.rs-public .navbar-boutique .navbar-brand img{ background:#fff; border-radius:50%; } @media (max-width:991.98px){ html[data-tema="gelap"] body.rs-public .navbar-boutique .navbar-collapse{ background:var(--pg-card) !important; border-color:var(--pg-line) !important; } } /* ---------- 4) DROPDOWN, MODAL, ALERT, TOAST ---------- */ html[data-tema="gelap"] body.rs-public .dropdown-menu{ background:var(--pg-card-2) !important; border-color:var(--pg-line) !important; box-shadow:0 18px 40px -10px rgba(0,0,0,.65) !important; } html[data-tema="gelap"] body.rs-public .dropdown-item{ color:var(--pg-ink-2) !important; } html[data-tema="gelap"] body.rs-public .dropdown-item:hover, html[data-tema="gelap"] body.rs-public .dropdown-item.active{ background:var(--pg-seg) !important; color:var(--pg-ink) !important; } html[data-tema="gelap"] body.rs-public .dropdown-divider{ border-color:var(--pg-line) !important; } html[data-tema="gelap"] body.rs-public .modal-content{ background:var(--pg-card) !important; color:var(--pg-ink-2); border-color:var(--pg-line) !important; } html[data-tema="gelap"] body.rs-public :is(.modal-header,.modal-footer){ background:transparent !important; border-color:var(--pg-line-soft) !important; } html[data-tema="gelap"] body.rs-public .modal-title{ color:var(--pg-ink) !important; } html[data-tema="gelap"] body.rs-public .btn-close{ filter:invert(1) grayscale(1) brightness(1.6); } html[data-tema="gelap"] body.rs-public .modal-backdrop.show{ opacity:.7; } html[data-tema="gelap"] body.rs-public .alert-info, html[data-tema="gelap"] body.rs-public .alert-light{ background:rgba(80,120,230,.1) !important; color:#B9C9F3 !important; border-color:rgba(80,120,230,.25) !important; } html[data-tema="gelap"] body.rs-public .alert-success{ background:rgba(47,170,100,.12) !important; color:#9BDDB7 !important; border-color:rgba(47,170,100,.28) !important; } html[data-tema="gelap"] body.rs-public .alert-danger{ background:rgba(220,70,80,.12) !important; color:#F5AEB4 !important; border-color:rgba(220,70,80,.3) !important; } html[data-tema="gelap"] body.rs-public .alert-warning{ background:rgba(224,161,58,.12) !important; color:#F0CD92 !important; border-color:rgba(224,161,58,.3) !important; } /* ---------- 5) FORM ---------- */ html[data-tema="gelap"] body.rs-public :is(.form-control,.form-select,textarea,select, input[type="text"],input[type="search"],input[type="number"],input[type="email"],input[type="tel"],input[type="password"],input[type="date"]){ background-color:var(--pg-bg) !important; color:var(--pg-ink) !important; border-color:var(--pg-line) !important; } html[data-tema="gelap"] body.rs-public :is(.form-control,textarea,input)::placeholder{ color:var(--pg-faint) !important; } html[data-tema="gelap"] body.rs-public :is(.form-control,.form-select,textarea,input):focus{ border-color:color-mix(in srgb, var(--pg-aksen) 55%, var(--pg-line)) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--pg-aksen) 22%, transparent) !important; } html[data-tema="gelap"] body.rs-public .form-select{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b8aab1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; background-repeat:no-repeat !important; background-position:right .75rem center !important; background-size:16px 12px !important; } html[data-tema="gelap"] body.rs-public :is(.form-label,label){ color:var(--pg-ink-2); } html[data-tema="gelap"] body.rs-public .input-group-text{ background:var(--pg-card-2) !important; color:var(--pg-muted) !important; border-color:var(--pg-line) !important; } html[data-tema="gelap"] body.rs-public .form-check-input{ background-color:var(--pg-bg) !important; border-color:#4A3F46 !important; } html[data-tema="gelap"] body.rs-public .form-check-input:checked{ background-color:var(--pg-aksen) !important; border-color:var(--pg-aksen) !important; } html[data-tema="gelap"] body.rs-public input[type=file]::file-selector-button{ background:var(--pg-card-2) !important; color:var(--pg-ink-2) !important; border-color:var(--pg-line) !important; } /* ---------- 6) TOMBOL ---------- */ html[data-tema="gelap"] body.rs-public :is(.btn-outline-custom,.btn-outline-secondary,.btn-light,.btn-outline-dark){ background:transparent !important; color:var(--pg-aksen-tx) !important; border-color:color-mix(in srgb, var(--pg-aksen) 55%, transparent) !important; } html[data-tema="gelap"] body.rs-public :is(.btn-outline-custom,.btn-outline-secondary,.btn-light,.btn-outline-dark):hover{ background:color-mix(in srgb, var(--pg-aksen) 16%, transparent) !important; color:#fff !important; } /* ---------- 7) BREADCRUMB & PAGINASI ---------- */ html[data-tema="gelap"] body.rs-public .breadcrumb-item, html[data-tema="gelap"] body.rs-public .breadcrumb-item.active{ color:var(--pg-muted) !important; } html[data-tema="gelap"] body.rs-public .breadcrumb-item a{ color:var(--pg-aksen-tx) !important; } html[data-tema="gelap"] body.rs-public .breadcrumb-item + .breadcrumb-item::before{ color:var(--pg-faint) !important; } html[data-tema="gelap"] body.rs-public .page-link{ background:var(--pg-card-2) !important; border-color:var(--pg-line) !important; color:var(--pg-ink-2) !important; } html[data-tema="gelap"] body.rs-public .page-item.active .page-link{ background:var(--pg-aksen) !important; border-color:var(--pg-aksen) !important; color:#fff !important; } /* ---------- 8) KARTU PRODUK (bersama) ---------- */ html[data-tema="gelap"] body.rs-public .card-produk{ background:var(--pg-card) !important; border-color:var(--pg-line) !important; box-shadow:var(--pg-shadow) !important; } html[data-tema="gelap"] body.rs-public .card-produk > a:first-of-type, html[data-tema="gelap"] body.rs-public .card-produk picture{ background:var(--pg-card-2); } html[data-tema="gelap"] body.rs-public .card-produk h6, html[data-tema="gelap"] body.rs-public .card-produk h6 a{ color:var(--pg-ink) !important; } html[data-tema="gelap"] body.rs-public .card-produk h6 a:hover{ color:var(--pg-aksen-tx) !important; } html[data-tema="gelap"] body.rs-public .card-produk :is(.kt-cat,.kt-cat-nama){ color:var(--pg-muted) !important; } html[data-tema="gelap"] body.rs-public .card-produk .harga-baru{ color:var(--pg-aksen-tx) !important; } html[data-tema="gelap"] body.rs-public .card-produk .harga-lama{ color:var(--pg-faint) !important; } html[data-tema="gelap"] body.rs-public .rs-kode-produk{ color:#E7B9CB !important; background:rgba(214,67,126,.14) !important; border-color:rgba(214,67,126,.3) !important; } html[data-tema="gelap"] body.rs-public .rs-hemat{ background:rgba(47,170,100,.15) !important; color:#82D5A6 !important; border-color:transparent !important; } html[data-tema="gelap"] body.rs-public .card-produk .wishlist-btn:not(:has(i.fa-solid)), html[data-tema="gelap"] body.rs-public .card-produk .kt-share{ background:rgba(31,24,29,.88) !important; border-color:var(--pg-line) !important; color:var(--pg-aksen-tx) !important; } html[data-tema="gelap"] body.rs-public .card-produk .wishlist-btn:not(:has(i.fa-solid)) i{ color:var(--pg-aksen-tx) !important; } html[data-tema="gelap"] body.rs-public .card-produk .btn-kasir.btn-kasir-habis{ background:var(--pg-seg) !important; color:var(--pg-muted) !important; border-color:var(--pg-line) !important; } /* ---------- 9) GAMBAR ---------- */ html[data-tema="gelap"] body.rs-public img.logo-round{ background-color:#fff; } /* ---------- 10) TRANSISI SAAT GANTI MODE ---------- */ /* ################ kelompok A ################ */ /* Mode gelap publik — kelompok a Beranda/katalog (/), wishlist, akun + komponen global footer_public.php (footer, keranjang/checkout WA, pemilih varian, popup promo, tombol melayang, prompt PWA, toast). HANYA warna — tata letak tidak diubah. */ /* ================================================================= A1) BERANDA / KATALOG — kepala, pencarian, hasil ================================================================= */ html[data-tema="gelap"] body.rs-public .katalog-page, html[data-tema="gelap"] body.rs-public .kt-offcanvas{ --kt-line:var(--pg-line); } html[data-tema="gelap"] body.rs-public .katalog-page .kt-head .kt-sub{ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .katalog-page .kt-head .kt-eyebrow{ color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .katalog-page .kt-count{ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .katalog-page .kt-count b{ color:var(--pg-aksen-tx); } /* kotak pencarian besar */ html[data-tema="gelap"] body.rs-public .katalog-page .kt-cari-hero{ background:var(--pg-card); border-color:var(--pg-line); box-shadow:0 8px 22px -10px rgba(0,0,0,.6); } html[data-tema="gelap"] body.rs-public .katalog-page .kt-cari-hero:focus-within{ border-color:color-mix(in srgb, var(--pg-aksen) 60%, var(--pg-line)); box-shadow:0 0 0 3px color-mix(in srgb, var(--pg-aksen) 20%, transparent), 0 8px 22px -10px rgba(0,0,0,.6); } html[data-tema="gelap"] body.rs-public .katalog-page .kt-cari-hero .kt-cari-hero-input{ background:transparent !important; color:var(--pg-ink) !important; box-shadow:none !important; } html[data-tema="gelap"] body.rs-public .katalog-page .kt-cari-hero-input::placeholder{ color:var(--pg-faint) !important; } html[data-tema="gelap"] body.rs-public .katalog-page .kt-cari-hero-ikon{ color:var(--pg-aksen-tx); } /* chip filter aktif */ html[data-tema="gelap"] body.rs-public .katalog-page .kt-aktif-label{ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .katalog-page .kt-aktif-chip{ color:var(--pg-aksen-tx); background:color-mix(in srgb, var(--pg-aksen) 16%, transparent); border-color:color-mix(in srgb, var(--pg-aksen) 40%, transparent); } html[data-tema="gelap"] body.rs-public .katalog-page .kt-aktif-reset{ color:var(--pg-aksen-tx); } /* keadaan kosong (?q=zzzz) */ html[data-tema="gelap"] body.rs-public .katalog-page .kt-empty{ background:var(--pg-card) !important; border-color:var(--pg-line) !important; } html[data-tema="gelap"] body.rs-public .katalog-page .kt-empty i{ color:color-mix(in srgb, var(--pg-aksen) 55%, var(--pg-muted)); } html[data-tema="gelap"] body.rs-public .katalog-page .kt-empty .btn i{ color:inherit; } html[data-tema="gelap"] body.rs-public .katalog-page .kt-empty-title{ color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public .katalog-page .kt-empty-sub{ color:var(--pg-muted) !important; } /* pemisah "Stok Habis" */ html[data-tema="gelap"] body.rs-public .katalog-page .kt-sold-body{ background:var(--pg-card); box-shadow:0 4px 14px -4px rgba(0,0,0,.55); border-color:color-mix(in srgb, var(--pg-aksen) 70%, transparent); } html[data-tema="gelap"] body.rs-public .katalog-page .kt-sold-ico, html[data-tema="gelap"] body.rs-public .katalog-page .kt-sold-text strong{ color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .katalog-page .kt-sold-text small{ color:var(--pg-muted); border-left-color:var(--pg-line); } /* ================================================================= A2) KARTU PRODUK (katalog & wishlist) ================================================================= */ /* tombol keranjang outline */ html[data-tema="gelap"] body.rs-public .katalog-page .card-produk .btn-kasir:not(.btn-kasir-habis):not(.btn-kasir-preorder){ background:color-mix(in srgb, var(--pg-aksen) 8%, var(--pg-card)); color:var(--pg-aksen-tx); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--pg-aksen) 75%, transparent); } html[data-tema="gelap"] body.rs-public .katalog-page .card-produk .btn-kasir:not(.btn-kasir-habis):not(.btn-kasir-preorder):hover, html[data-tema="gelap"] body.rs-public .katalog-page .card-produk .btn-kasir:not(.btn-kasir-habis):not(.btn-kasir-preorder):focus-visible{ background:linear-gradient(135deg, var(--rs-primary,#D98C8C), var(--rs-primary-dark,#C17272)); color:#fff; box-shadow:0 8px 20px -6px color-mix(in srgb, var(--pg-aksen) 55%, transparent); } html[data-tema="gelap"] body.rs-public .card-produk .btn-kasir.btn-kasir-habis{ box-shadow:none !important; } /* tombol salin link di atas foto */ html[data-tema="gelap"] body.rs-public .katalog-page .card-produk .kt-cta > .kt-share.btn-outline-custom.btn-sm{ background:rgba(31,24,29,.82) !important; color:var(--pg-ink-2) !important; } html[data-tema="gelap"] body.rs-public .katalog-page .card-produk .kt-cta > .kt-share.btn-outline-custom.btn-sm:hover, html[data-tema="gelap"] body.rs-public .katalog-page .card-produk .kt-cta > .kt-share.btn-outline-custom.btn-sm:focus-visible{ background:rgba(31,24,29,.95) !important; color:var(--pg-aksen-tx) !important; } /* wishlist aktif: cincin gelap (bukan putih) */ html[data-tema="gelap"] body.rs-public .katalog-page .card-produk .wishlist-btn:has(i.fa-solid){ border-color:rgba(20,16,19,.85); } html[data-tema="gelap"] body.rs-public .katalog-page .card-produk .wishlist-btn:not(:has(i.fa-solid)):hover{ background:var(--rs-primary,#D98C8C) !important; color:#fff !important; border-color:var(--rs-primary,#D98C8C) !important; } html[data-tema="gelap"] body.rs-public .katalog-page .card-produk .wishlist-btn:not(:has(i.fa-solid)):hover i{ color:#fff !important; } /* opsi warna & ukuran */ html[data-tema="gelap"] body.rs-public .katalog-page .card-produk .kt-sw{ box-shadow:0 0 0 1.5px var(--pg-card), 0 0 0 2.5px #5A4B54; } html[data-tema="gelap"] body.rs-public .katalog-page .card-produk .kt-sw.kt-sw-x{ box-shadow:0 0 0 1.5px var(--pg-card), 0 0 0 2.5px #6A5C64; } html[data-tema="gelap"] body.rs-public .katalog-page .card-produk .kt-ukuran b{ background:var(--pg-card-2); border-color:var(--pg-line); color:var(--pg-ink-2); } html[data-tema="gelap"] body.rs-public .katalog-page .card-produk .kt-ukuran b.habis{ background:transparent; color:var(--pg-faint); border-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public .katalog-page .card-produk .kt-opsi em{ color:var(--pg-muted); } /* pill stok */ html[data-tema="gelap"] body.rs-public .katalog-page .card-produk .kt-stok.low{ color:#F5C27A; background:rgba(38,26,14,.86); box-shadow:0 2px 8px rgba(0,0,0,.35); } html[data-tema="gelap"] body.rs-public .katalog-page .card-produk .kt-stok.ada{ color:#82D5A6; background:rgba(47,170,100,.16); } html[data-tema="gelap"] body.rs-public .katalog-page .card-produk .kt-stok.habis{ color:#F5AEB4; background:rgba(220,70,80,.16); } /* chip "Hemat Rp" (rs-poles.css memakai !important) */ html[data-tema="gelap"] body.rs-public .card-produk .rs-hemat, html[data-tema="gelap"] body.rs-public .katalog-page .card-produk .rs-price-row .rs-hemat{ background:rgba(47,170,100,.16) !important; color:#82D5A6 !important; } /* ================================================================= A3) PANEL FILTER (offcanvas) ================================================================= */ html[data-tema="gelap"] body.rs-public .kt-offcanvas{ background:var(--pg-bg-2); color:var(--pg-ink-2); } html[data-tema="gelap"] body.rs-public .kt-offcanvas .offcanvas-header{ border-bottom-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public .kt-offcanvas .offcanvas-title{ color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public .kt-offcanvas .kt-offcanvas-sub{ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .kt-offcanvas .btn-close{ filter:invert(1) grayscale(1) brightness(1.6); } html[data-tema="gelap"] body.rs-public .kt-offcanvas .kt-fgroup{ background:var(--pg-card); border-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public .kt-offcanvas .kt-fgroup-title{ color:var(--pg-aksen-tx); border-bottom-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public .kt-offcanvas .kt-fgroup-title i{ color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .kt-offcanvas .kt-sortopt span{ background:var(--pg-card-2); border-color:var(--pg-line); color:var(--pg-ink-2); } html[data-tema="gelap"] body.rs-public .kt-offcanvas .kt-sortopt span i{ color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .kt-offcanvas .kt-sortopt:hover span{ background:var(--pg-seg); } html[data-tema="gelap"] body.rs-public .kt-offcanvas .kt-sortopt input:checked + span{ background:var(--pg-aksen-bg); color:var(--pg-aksen-tx); border-color:var(--pg-aksen); box-shadow:0 0 0 1px var(--pg-aksen) inset; } html[data-tema="gelap"] body.rs-public .kt-offcanvas .kt-fcheck{ border-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public .kt-offcanvas .kt-fcheck:hover{ background:var(--pg-seg); } html[data-tema="gelap"] body.rs-public .kt-offcanvas .kt-fcheck:has(.form-check-input:checked){ background:var(--pg-aksen-bg); border-color:var(--pg-aksen); } html[data-tema="gelap"] body.rs-public .kt-offcanvas .kt-fcheck-txt{ color:var(--pg-ink-2); } html[data-tema="gelap"] body.rs-public .kt-offcanvas .kt-harga-sampai{ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .kt-offcanvas .form-label{ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .kt-offcanvas .kt-fbtns-sticky{ background:var(--pg-bg-2); border-top-color:var(--pg-line); box-shadow:0 -6px 14px rgba(0,0,0,.35); } /* tombol Filter melayang: lencana jumlah bercincin gelap */ html[data-tema="gelap"] body.rs-public .kt-filter-fab .kt-filter-fab-count{ border-color:var(--pg-bg); } html[data-tema="gelap"] body.rs-public .kt-filter-fab{ box-shadow:-3px 5px 16px rgba(0,0,0,.5); } /* ================================================================= A4) WISHLIST (/beranda/wishlist.php) ================================================================= */ html[data-tema="gelap"] body.rs-public .katalog-page .cb-hero .section-eyebrow{ color:var(--pg-aksen-tx); background:color-mix(in srgb, var(--pg-aksen) 14%, transparent); } /* ================================================================= A5) AKUN (/beranda/akun.php) ================================================================= */ html[data-tema="gelap"] body.rs-public .filter-box{ background:var(--pg-card) !important; border-color:var(--pg-line) !important; box-shadow:var(--pg-shadow) !important; color:var(--pg-ink-2); } html[data-tema="gelap"] body.rs-public .kt-offcanvas .filter-box{ background:transparent !important; box-shadow:none !important; } html[data-tema="gelap"] body.rs-public .filter-box h6{ color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public .filter-box a:not(.btn){ color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .section-title h2{ background:linear-gradient(180deg,var(--pg-ink) 62%,#D9B48A 100%); -webkit-background-clip:text; background-clip:text; } /* ================================================================= G1) TOMBOL MELAYANG & LENCANA ================================================================= */ html[data-tema="gelap"] body.rs-public .wishlist-float-btn{ background:var(--pg-card-2); color:var(--pg-aksen-tx); border-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public .wishlist-float-btn:hover{ color:#fff; background:var(--pg-seg); } html[data-tema="gelap"] body.rs-public .kasir-float-btn .float-badge, html[data-tema="gelap"] body.rs-public .wishlist-float-btn .float-badge, html[data-tema="gelap"] body.rs-public .rs-bn-center .float-badge{ border-color:var(--pg-bg) !important; } html[data-tema="gelap"] body.rs-public :is(.wa-float-btn,.wishlist-float-btn,.kasir-float-btn,.top-float-btn){ box-shadow:0 8px 20px -6px rgba(0,0,0,.7) !important; } html[data-tema="gelap"] body.rs-public .top-float-btn{ background:rgba(46,37,44,.9); border:1px solid var(--pg-line); color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public .top-float-btn:hover{ background:var(--rs-primary,#D98C8C); color:#fff; } html[data-tema="gelap"] body.rs-public .rs-bottom-nav{ background:rgba(26,20,24,.9); border-color:var(--pg-line); } /* ================================================================= G2) PROMPT "PASANG APLIKASI" (PWA) ================================================================= */ html[data-tema="gelap"] body.rs-public .rs-pwa{ background:rgba(39,31,37,.96); border-color:var(--pg-line); box-shadow:0 14px 34px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.3); } html[data-tema="gelap"] body.rs-public .rs-pwa-go, html[data-tema="gelap"] body.rs-public .rs-pwa-tx b{ color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public .rs-pwa-tx small{ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .rs-pwa-x{ background:rgba(255,255,255,.07); color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .rs-pwa-x:hover{ background:rgba(255,255,255,.14); color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public .rs-install-ios-content .rs-pwa-help{ color:var(--pg-muted) !important; } /* ================================================================= G3) TOAST ================================================================= */ html[data-tema="gelap"] body.rs-public .rsv-toast, html[data-tema="gelap"] body.rs-public .kasir-toast{ background:var(--pg-seg); color:var(--pg-ink); box-shadow:0 0 0 1px var(--pg-line), 0 12px 30px rgba(0,0,0,.55); } html[data-tema="gelap"] body.rs-public .kasir-toast.error{ background:#7E1F19; } /* ================================================================= G4) POPUP PROMO & AJAKAN VIDEO ================================================================= */ html[data-tema="gelap"] body.rs-public .rs-promo-dialog{ box-shadow:0 30px 70px -20px rgba(0,0,0,.8) !important; } html[data-tema="gelap"] body.rs-public .rs-promo-dialog .rs-promo-dialog-close{ background-color:var(--pg-seg); filter:none; opacity:1; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F3EAEE'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e"); } html[data-tema="gelap"] body.rs-public .rs-promo-voucher-chip{ background:color-mix(in srgb, var(--pg-aksen) 10%, var(--pg-card-2)); border-color:color-mix(in srgb, var(--pg-aksen) 75%, transparent); } html[data-tema="gelap"] body.rs-public .rs-promo-voucher-chip .fw-bold{ color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .rs-promo-countdown{ color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public .rs-pv{ background:var(--pg-card) !important; box-shadow:0 24px 60px rgba(0,0,0,.6); } html[data-tema="gelap"] body.rs-public .rs-pv-mode-putar .rs-pv{ background:#000 !important; } html[data-tema="gelap"] body.rs-public .rs-pv .rs-pv-close{ background-color:rgba(46,37,44,.92); } html[data-tema="gelap"] body.rs-public .rs-pv-thumb{ background:var(--pg-card-2); } html[data-tema="gelap"] body.rs-public .rs-pv-eyebrow{ color:var(--pg-aksen-tx); background:var(--pg-aksen-bg); } html[data-tema="gelap"] body.rs-public .rs-pv-teks h5{ color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public .rs-pv-teks p{ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .rs-pv-nanti{ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .rs-pv-nanti:hover{ color:var(--pg-aksen-tx); } /* ================================================================= G5) PEMILIH VARIAN / TAMBAH KE KERANJANG (.rsv-*) ================================================================= */ html[data-tema="gelap"] body.rs-public .rsv-backdrop{ background:rgba(8,5,7,.7); } html[data-tema="gelap"] body.rs-public .rsv-box{ background:var(--pg-card); box-shadow:0 24px 60px rgba(0,0,0,.65); } html[data-tema="gelap"] body.rs-public .rsv-handle{ background:var(--pg-line); } html[data-tema="gelap"] body.rs-public .rsv-close{ background:rgba(46,37,44,.94); color:var(--pg-ink-2); box-shadow:0 2px 10px rgba(0,0,0,.4); } html[data-tema="gelap"] body.rs-public .rsv-close:hover{ background:var(--pg-seg); color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .rsv-foto{ background:var(--pg-card-2); } html[data-tema="gelap"] body.rs-public .rsv-thumb{ background:var(--pg-card-2); border-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public .rsv-thumb.is-active{ border-color:var(--pg-aksen); } html[data-tema="gelap"] body.rs-public .rsv-nama, html[data-tema="gelap"] body.rs-public .rsv-label{ color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public .rsv-label .rsv-hint{ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .rsv-harga{ color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .rsv-coret{ color:var(--pg-faint); } html[data-tema="gelap"] body.rs-public .rsv-badge-stok.is-ada{ background:rgba(47,170,100,.16); color:#82D5A6; } html[data-tema="gelap"] body.rs-public .rsv-badge-stok.is-habis{ background:rgba(220,70,80,.16); color:#F5AEB4; } html[data-tema="gelap"] body.rs-public .rsv-badge-stok.is-preorder{ background:rgba(224,161,58,.16); color:#F0CD92; } html[data-tema="gelap"] body.rs-public .rsv-chip{ background:var(--pg-card-2); border-color:var(--pg-line); color:var(--pg-ink-2); } html[data-tema="gelap"] body.rs-public .rsv-chip:hover:not(:disabled){ border-color:var(--pg-aksen); } html[data-tema="gelap"] body.rs-public .rsv-chip.is-active{ background:var(--pg-aksen-bg); color:var(--pg-aksen-tx); border-color:var(--pg-aksen); } html[data-tema="gelap"] body.rs-public .rsv-qty{ border-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public .rsv-qty button{ background:var(--pg-card-2); color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .rsv-qty button:hover:not(:disabled){ background:var(--pg-seg); } html[data-tema="gelap"] body.rs-public .rsv-qty button:disabled{ color:var(--pg-faint); } html[data-tema="gelap"] body.rs-public .rsv-qty-val{ color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public .rsv-maks{ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .rsv-foot{ background:var(--pg-card); border-top-color:var(--pg-line-soft); } html[data-tema="gelap"] body.rs-public .rsv-pesan{ background:rgba(224,161,58,.12); border-color:rgba(224,161,58,.3); color:#F0CD92; } html[data-tema="gelap"] body.rs-public .rsv-confirm{ box-shadow:0 8px 20px -6px color-mix(in srgb, var(--pg-aksen) 55%, transparent); } html[data-tema="gelap"] body.rs-public .rsv-confirm:disabled{ background:var(--pg-seg); color:var(--pg-faint); box-shadow:none; } html[data-tema="gelap"] body.rs-public .rsv-confirm.rsv-confirm-added, html[data-tema="gelap"] body.rs-public .rsv-confirm.rsv-confirm-added:disabled{ background:#2e9e5b; color:#fff; } html[data-tema="gelap"] body.rs-public .rsv-detail{ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .rsv-detail:hover{ color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .rsv-sk{ background:linear-gradient(90deg, var(--pg-card-2) 25%, var(--pg-seg) 37%, var(--pg-card-2) 63%); background-size:400% 100%; } html[data-tema="gelap"] body.rs-public img.rsv-foto.rsv-sk{ background-color:var(--pg-card-2); } /* ================================================================= G6) MODAL KERANJANG / CHECKOUT WHATSAPP (.kasir-modal) ================================================================= */ html[data-tema="gelap"] body.rs-public .kasir-modal{ --kasir-bg:var(--pg-bg-2); --kasir-border:var(--pg-line); } html[data-tema="gelap"] body.rs-public .kasir-modal .modal-content{ background:var(--pg-bg-2) !important; box-shadow:0 24px 70px rgba(0,0,0,.7); } /* header tetap ber-identitas maroon (fondasi membuatnya transparan) */ html[data-tema="gelap"] body.rs-public .kasir-modal .modal-header{ background:linear-gradient(135deg, color-mix(in srgb, var(--rs-primary,#D98C8C) 55%, #1A1418), color-mix(in srgb, var(--rs-primary-dark,#C17272) 45%, #1A1418)) !important; } html[data-tema="gelap"] body.rs-public .kasir-modal .modal-header .modal-title{ color:#fff !important; } html[data-tema="gelap"] body.rs-public .kasir-modal .modal-footer{ background:var(--pg-card) !important; border-top-color:var(--pg-line) !important; } html[data-tema="gelap"] body.rs-public .kasir-step-dot.is-active .ks-num{ background:#F3EAEE; border-color:#F3EAEE; color:var(--rs-primary-dark,#C17272); } /* kartu item & ringkasan & data pembeli */ html[data-tema="gelap"] body.rs-public .kasir-modal :is(.kasir-item,.kasir-ringkasan,.kasir-pembeli,.kasir-picker){ background:var(--pg-card); border-color:var(--pg-line); box-shadow:0 3px 14px rgba(0,0,0,.3); color:var(--pg-ink-2); } html[data-tema="gelap"] body.rs-public .kasir-modal :is(.kasir-ringkasan,.kasir-pembeli) h6{ color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public .kasir-modal :is(.kasir-ringkasan,.kasir-pembeli) h6 i{ color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-item-nama{ color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public .kasir-modal :is(.kasir-item-harga,.kasir-item-subtotal b){ color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-item-stok{ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-item-stok.is-preorder{ color:#F0CD92; } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-item-top img{ background:var(--pg-card-2); border-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-item-hapus{ color:#F08A8A; } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-item-hapus:hover{ background:rgba(220,70,80,.16); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-ctl label{ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-item-subtotal{ border-top-color:var(--pg-line); color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-item-subtotal span{ color:var(--pg-ink-2); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-qty-box{ background:var(--pg-bg); border-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-qty-box button{ background:var(--pg-aksen-bg); color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-qty-box button:hover{ background:color-mix(in srgb, var(--pg-aksen) 30%, var(--pg-card)); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-qty-box input{ background:var(--pg-bg) !important; color:var(--pg-ink) !important; } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-varian-chip{ background:var(--pg-aksen-bg); border-color:color-mix(in srgb, var(--pg-aksen) 35%, transparent); color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-varian-chip.sku{ background:var(--pg-seg); border-color:var(--pg-line); color:var(--pg-ink-2); } html[data-tema="gelap"] body.rs-public .kasir-modal .btn-kasir-tambah{ background:transparent; color:var(--pg-aksen-tx); border-color:var(--pg-aksen); } html[data-tema="gelap"] body.rs-public .kasir-modal .btn-kasir-tambah:hover{ background:var(--pg-aksen-bg); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-picker-item:hover{ background:var(--pg-seg); } html[data-tema="gelap"] body.rs-public .kasir-modal :is(.kasir-picker-item .kp-stok,.kasir-picker-empty){ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-empty{ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-empty i{ color:color-mix(in srgb, var(--pg-aksen) 60%, var(--pg-muted)); } /* ringkasan & total */ html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-ringkasan-baris .kr-nama{ color:var(--pg-ink-2); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-ringkasan-baris .kr-qty{ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-ringkasan-baris .kr-sub{ color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-ringkasan hr{ border-top-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-total-baris{ color:var(--pg-ink-2); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-total-baris.grand{ background:linear-gradient(135deg, color-mix(in srgb, var(--pg-aksen) 14%, var(--pg-card)), color-mix(in srgb, var(--pg-aksen) 8%, var(--pg-card))); border-top-color:var(--pg-line); color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-total-baris.grand span:last-child{ color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-total-baris.kasir-baris-diskon span:last-child{ color:#82D5A6; } /* voucher */ html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-voucher{ background:var(--pg-card-2); border-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-voucher-label{ color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-voucher-opsional{ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-voucher-info.is-ok{ color:#82D5A6; } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-voucher-info.is-error{ color:#F5AEB4; } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-voucher-info.is-loading{ color:var(--pg-muted); } /* form pembeli & pilihan kirim/bayar */ html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-pembeli .form-label{ color:var(--pg-ink-2); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-pembeli a{ color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-pilihan-item{ background:var(--pg-card-2); border-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-pilihan-item:hover{ border-color:var(--pg-aksen); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-pilihan-item:has(input:checked){ background:var(--pg-aksen-bg); border-color:var(--pg-aksen); box-shadow:0 2px 10px rgba(0,0,0,.3); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-pilihan-item.disabled:hover{ border-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-pilihan-teks b{ color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-pilihan-teks small{ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .kasir-modal :is(.kasir-ongkir-nota,.kasir-alamat-info){ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .kasir-modal :is(.kasir-ongkir-nota,.kasir-alamat-info) i{ color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-bayar-nota{ background:rgba(224,161,58,.12); border-color:rgba(224,161,58,.3); color:#F0CD92; } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-info-warning{ background:rgba(224,161,58,.12); border-color:rgba(224,161,58,.3); color:#F0CD92; } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-rekening{ background:var(--pg-card-2); border-color:color-mix(in srgb, var(--pg-aksen) 60%, transparent); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-rekening-norek{ color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-rekening-logo-fallback{ background:var(--pg-aksen-bg); color:var(--pg-aksen-tx); } /* logo bank & QRIS tetap di atas putih agar terbaca (warna asli) */ html[data-tema="gelap"] body.rs-public .kasir-modal .kasir-rekening-logo{ border-color:var(--pg-line); } /* tombol navigasi */ html[data-tema="gelap"] body.rs-public .kasir-modal .btn-kasir-back{ background:transparent; color:var(--pg-aksen-tx); border-color:color-mix(in srgb, var(--pg-aksen) 70%, transparent); } html[data-tema="gelap"] body.rs-public .kasir-modal .btn-kasir-back:hover{ background:var(--pg-aksen-bg); } html[data-tema="gelap"] body.rs-public .kasir-modal .btn-kasir-next{ box-shadow:0 5px 14px -4px color-mix(in srgb, var(--pg-aksen) 60%, transparent); } html[data-tema="gelap"] body.rs-public .kasir-modal .btn-kasir-wa{ box-shadow:0 5px 14px -4px rgba(37,211,102,.45); } /* ################ kelompok B ################ */ /* Mode gelap publik — kelompok b Cakupan: halaman detail produk (product/index.php) & halaman info (cara-belanja, cek-status-pesanan, lacak-pesanan, kebijakan-retur, halaman, 404). HANYA warna — tata letak tidak disentuh. */ /* ================================================================ DETAIL PRODUK — product/index.php (body.pd-active, .pd-wrap) ================================================================ */ html[data-tema="gelap"] body.rs-public .pd-wrap{ --pd-ink:var(--pg-ink); --pd-line:var(--pg-line); --pd-muted:var(--pg-muted); --pd-shadow-soft:0 10px 30px -12px rgba(0,0,0,.6); --pd-shadow-lift:0 18px 44px -14px rgba(0,0,0,.7); } html[data-tema="gelap"] body.rs-public .pd-wrap .breadcrumb-item.active{ color:var(--pg-muted) !important; } /* Galeri */ html[data-tema="gelap"] body.rs-public .pd-stage{ background:linear-gradient(160deg,var(--pg-card-2) 0%,var(--pg-card) 100%); border-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public .pd-nav{ background:rgba(31,24,29,.86); color:var(--pg-aksen-tx); box-shadow:0 4px 14px rgba(0,0,0,.45); } html[data-tema="gelap"] body.rs-public .pd-nav:hover{ background:var(--pg-seg); } html[data-tema="gelap"] body.rs-public .pd-badge-disc{ box-shadow:0 6px 16px rgba(0,0,0,.45); } html[data-tema="gelap"] body.rs-public .pd-dots button{ background:var(--pg-line); } html[data-tema="gelap"] body.rs-public .pd-dots button.is-active{ background:var(--pg-aksen); } html[data-tema="gelap"] body.rs-public .pd-thumb{ background:var(--pg-card-2); box-shadow:0 3px 10px rgba(0,0,0,.35); } html[data-tema="gelap"] body.rs-public .pd-thumb:not(.is-active){ border-color:var(--pg-line-soft); } html[data-tema="gelap"] body.rs-public .pd-thumb:not(.is-active):hover{ border-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public .pd-thumb.is-active{ border-color:var(--pg-aksen); } /* Info, kategori, rating */ html[data-tema="gelap"] body.rs-public .pd-cat{ background:var(--pg-aksen-bg); color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .pd-meta a{ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .pd-meta .stars{ color:#E5BE72; } /* Kartu harga & badge */ html[data-tema="gelap"] body.rs-public .pd-price-card{ background:linear-gradient(135deg,color-mix(in srgb,var(--pg-aksen) 12%,var(--pg-card)) 0%,var(--pg-card) 100%); border-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public .pd-price-now{ color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .pd-price-old{ color:var(--pg-faint) !important; } html[data-tema="gelap"] body.rs-public .pd-price-save{ background:rgba(214,67,126,.14); color:var(--pg-aksen-tx); border-color:color-mix(in srgb,var(--pg-aksen) 45%,transparent); } html[data-tema="gelap"] body.rs-public .pd-pill.ship{ background:rgba(47,170,100,.16); color:#86D8AA; } html[data-tema="gelap"] body.rs-public .pd-pill.voucher{ background:rgba(214,67,126,.16); color:var(--pg-aksen-tx); border-color:color-mix(in srgb,var(--pg-aksen) 40%,transparent); } /* Stok & catatan pre-order */ html[data-tema="gelap"] body.rs-public .pd-stock.ada{ color:#7FD3A4; } html[data-tema="gelap"] body.rs-public .pd-stock.habis{ color:#F29A96; } html[data-tema="gelap"] body.rs-public .pd-stock.preorder{ color:#EBC07E; } html[data-tema="gelap"] body.rs-public .pd-preorder-note{ background:rgba(224,169,90,.14); color:#EBC98F; border-color:rgba(224,169,90,.32); } /* Varian (warna / ukuran) */ html[data-tema="gelap"] body.rs-public .pd-vgroup-label, html[data-tema="gelap"] body.rs-public .pd-qty-row .lbl{ color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public .pd-vgroup-label .req{ color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .pd-chip{ background:var(--pg-card-2); border-color:var(--pg-line); color:var(--pg-ink-2); } html[data-tema="gelap"] body.rs-public .pd-chip:hover{ border-color:var(--pg-aksen); color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .pd-chip.is-active{ background:var(--pg-aksen-bg); border-color:var(--pg-aksen); color:var(--pg-aksen-tx); box-shadow:0 0 0 3px color-mix(in srgb,var(--pg-aksen) 22%,transparent); } html[data-tema="gelap"] body.rs-public .pd-chip.is-out{ background:var(--pg-bg-2); border-color:var(--pg-line-soft); color:var(--pg-faint); } html[data-tema="gelap"] body.rs-public .pd-chip.color .sw, html[data-tema="gelap"] body.rs-public .pd-chip-photo .sw{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); } html[data-tema="gelap"] body.rs-public [class*="pd-var"].active::after{ box-shadow:0 0 0 2px var(--pg-card); } /* Jumlah */ html[data-tema="gelap"] body.rs-public .pd-qty{ background:var(--pg-card-2); border-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public .pd-qty button{ background:var(--pg-card-2); color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .pd-qty button:hover{ background:var(--pg-seg); } html[data-tema="gelap"] body.rs-public .pd-qty button:disabled{ background:var(--pg-card-2); color:#5E5158; } html[data-tema="gelap"] body.rs-public .pd-qty input{ background:var(--pg-bg) !important; color:var(--pg-ink) !important; border-color:var(--pg-line) !important; } /* Tombol aksi */ html[data-tema="gelap"] body.rs-public .pd-btn-cart{ background:var(--pg-aksen-bg); color:var(--pg-aksen-tx); border-color:var(--pg-aksen); } html[data-tema="gelap"] body.rs-public .pd-btn-cart:hover{ background:color-mix(in srgb,var(--pg-aksen) 28%,var(--pg-card)); color:#fff; } html[data-tema="gelap"] body.rs-public .pd-btn-buy{ box-shadow:0 8px 20px -6px rgba(0,0,0,.6); } html[data-tema="gelap"] body.rs-public .pd-btn-love{ background:var(--pg-card-2); border-color:var(--pg-line); color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .pd-btn-love:hover{ background:var(--pg-aksen-bg); border-color:var(--pg-aksen); } html[data-tema="gelap"] body.rs-public .pd-btn-love i{ color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .pd-btn-love i.fa-solid{ color:var(--pg-aksen); } /* Spesifikasi / SKU & deskripsi */ html[data-tema="gelap"] body.rs-public .pd-specs{ border-color:var(--pg-line); background:var(--pg-card); } html[data-tema="gelap"] body.rs-public .pd-spec-row:nth-child(odd){ background:var(--pg-card-2); } html[data-tema="gelap"] body.rs-public .pd-desc{ color:var(--pg-ink-2); } /* Bagikan & QR */ html[data-tema="gelap"] body.rs-public .pd-share a, html[data-tema="gelap"] body.rs-public .pd-share button{ background:var(--pg-card-2); border-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public .pd-share a:hover, html[data-tema="gelap"] body.rs-public .pd-share button:hover{ border-color:color-mix(in srgb,var(--pg-aksen) 55%,transparent); } html[data-tema="gelap"] body.rs-public .pd-qr img{ border-color:var(--pg-line); background:#fff; } /* Judul seksi (Produk Serupa / Ulasan) — teks gradasi */ html[data-tema="gelap"] body.rs-public.pd-active .section-title h2{ background:linear-gradient(180deg,var(--pg-ink) 62%,#D9B48A 100%); -webkit-background-clip:text; background-clip:text; } /* Ulasan & form tulis ulasan */ html[data-tema="gelap"] body.rs-public .pd-rating-summary{ background:var(--pg-card-2); } html[data-tema="gelap"] body.rs-public .pd-rating-summary .big{ color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .pd-rating-summary .stars{ color:#E5BE72; } html[data-tema="gelap"] body.rs-public.pd-active .filter-box{ background:var(--pg-card) !important; border-color:var(--pg-line); box-shadow:var(--pg-shadow); } html[data-tema="gelap"] body.rs-public.pd-active .filter-box .form-label{ color:var(--pg-ink-2); } html[data-tema="gelap"] body.rs-public .star-rating-input label i.fa-regular{ color:#5A4D55; } html[data-tema="gelap"] body.rs-public .star-rating-input label i.fa-solid{ color:#E5BE72; } /* Bilah bawah HP */ html[data-tema="gelap"] body.rs-public .pd-mobilebar{ background:rgba(26,20,24,.94); border-top-color:var(--pg-line); box-shadow:0 -6px 22px rgba(0,0,0,.5); } html[data-tema="gelap"] body.rs-public .pd-mb-icon{ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .pd-mb-icon.wa{ color:#3DDC84; } html[data-tema="gelap"] body.rs-public .pd-mb-icon .fa-solid{ color:var(--pg-aksen); } html[data-tema="gelap"] body.rs-public .pd-mb-cart{ background:var(--pg-aksen-bg); color:var(--pg-aksen-tx); border-color:var(--pg-aksen); } html[data-tema="gelap"] body.rs-public .pd-mb-sold{ background:var(--pg-seg); color:var(--pg-muted); } /* Lembar pilih varian (HP) */ html[data-tema="gelap"] body.rs-public .pd-sheet-backdrop{ background:rgba(0,0,0,.62); } html[data-tema="gelap"] body.rs-public .pd-sheet-panel{ background:var(--pg-card); box-shadow:0 -12px 40px rgba(0,0,0,.6); } html[data-tema="gelap"] body.rs-public .pd-sheet-grip{ background:var(--pg-line); } html[data-tema="gelap"] body.rs-public .pd-sheet-head{ border-bottom-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public .pd-sheet-head img{ border-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public .pd-sheet-head .pr{ color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .pd-sheet-head .pr .old{ color:var(--pg-faint); } html[data-tema="gelap"] body.rs-public .pd-sheet-close{ background:var(--pg-seg); color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .pd-sheet-confirm{ box-shadow:0 8px 20px -6px rgba(0,0,0,.6); } html[data-tema="gelap"] body.rs-public .pd-sheet-confirm[disabled]{ background:var(--pg-seg); color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .pd-share [aria-label="TikTok"]{ color:var(--pg-ink) !important; } html[data-tema="gelap"] body.rs-public .pd-share [aria-label="Facebook"]{ color:#5B9BF5 !important; } /* Kartu ulasan pelanggan (daftar ulasan di detail produk) */ html[data-tema="gelap"] body.rs-public.pd-active .testi-card{ background-color:var(--pg-card) !important; border-color:var(--pg-line) !important; box-shadow:var(--pg-shadow) !important; } html[data-tema="gelap"] body.rs-public.pd-active .testi-card .testi-avatar-fallback{ background:var(--pg-aksen-bg); color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public.pd-active .testi-card .fa-regular.fa-star{ color:#6A5B63 !important; } /* ================================================================ CARA BELANJA & KEBIJAKAN RETUR — cara-belanja.css (.cb-page) ================================================================ */ html[data-tema="gelap"] body.rs-public .cb-page{ --cb-soft:color-mix(in srgb,var(--pg-aksen) 14%,var(--pg-card)); --cb-border:var(--pg-line); --cb-shadow:0 12px 30px -12px rgba(0,0,0,.65); } html[data-tema="gelap"] body.rs-public .cb-hero h1{ color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public .cb-hero p, html[data-tema="gelap"] body.rs-public .cb-head p{ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .cb-chip{ background:var(--pg-aksen-bg); color:var(--pg-aksen-tx); border-color:color-mix(in srgb,var(--pg-aksen) 35%,transparent); } html[data-tema="gelap"] body.rs-public :is(.cb-step-num,.cb-mini-num){ border-color:var(--pg-bg); box-shadow:0 6px 16px -4px rgba(0,0,0,.6); } html[data-tema="gelap"] body.rs-public :is(.cb-card,.cb-mini,.cb-perk){ background:var(--pg-card); border-color:var(--pg-line); box-shadow:var(--pg-shadow); } html[data-tema="gelap"] body.rs-public :is(.cb-card,.cb-mini,.cb-perk):is(:hover,:focus-within,:active){ border-color:color-mix(in srgb,var(--pg-aksen) 60%,var(--pg-line)); box-shadow:var(--cb-shadow); } html[data-tema="gelap"] body.rs-public :is(.cb-card-ic,.cb-mini-ic,.cb-perk-ic), html[data-tema="gelap"] body.rs-public .cb-card:hover .cb-card-ic{ background:var(--pg-aksen-bg); color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .cb-card-title{ color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public :is(.cb-card p,.cb-list li,.cb-faq .accordion-body){ color:var(--pg-ink-2); } html[data-tema="gelap"] body.rs-public :is(.cb-mini small,.cb-perk small,.cb-phase-txt small){ color:var(--pg-muted); } html[data-tema="gelap"] body.rs-public .cb-list li::before{ color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .cb-ringkas{ color:var(--pg-aksen-tx) !important; } html[data-tema="gelap"] body.rs-public .cb-ringkasan>[class*="col-"]:not(:last-child)::after{ color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .cb-note{ background:rgba(201,161,90,.1); color:var(--pg-ink-2); border-left-color:#C9A15A; } html[data-tema="gelap"] body.rs-public .cb-phase{ background:linear-gradient(135deg,color-mix(in srgb,var(--pg-aksen) 16%,var(--pg-card)),var(--pg-card)); border-color:var(--pg-line); border-left-color:var(--pg-aksen); box-shadow:var(--pg-shadow); } html[data-tema="gelap"] body.rs-public .cb-phase-ic{ background:var(--pg-card-2); color:var(--pg-aksen-tx); border-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public .cb-phase-txt :is(strong,b,h3,h4){ color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public .cb-faq .accordion-item{ background:var(--pg-card); border-color:var(--pg-line) !important; } html[data-tema="gelap"] body.rs-public .cb-faq .accordion-button{ background:var(--pg-card); color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public .cb-faq .accordion-button:not(.collapsed){ background:var(--pg-aksen-bg); color:var(--pg-aksen-tx); } html[data-tema="gelap"] body.rs-public .cb-faq .accordion-button::after{ filter:invert(1) brightness(1.5) grayscale(1); } html[data-tema="gelap"] body.rs-public .cb-faq .accordion-button:not(.collapsed)::after{ filter:invert(1) brightness(1.2) grayscale(.2); } html[data-tema="gelap"] body.rs-public .cb-cta{ background:linear-gradient(135deg,#A8335F,#6E2443); box-shadow:0 14px 34px -12px rgba(0,0,0,.7); } html[data-tema="gelap"] body.rs-public .cb-btn-solid, html[data-tema="gelap"] body.rs-public .cb-btn-solid:hover{ background:var(--pg-ink); color:#8E2A52; } html[data-tema="gelap"] body.rs-public .cb-video{ background:var(--pg-card-2); border-color:var(--pg-line); } /* ikon ✓ / ✗ kebijakan retur (inline style) */ html[data-tema="gelap"] body.rs-public .cb-page [style*="#3a9d5d"]{ color:#6FCF95 !important; } html[data-tema="gelap"] body.rs-public .cb-page [style*="#c0504d"]{ color:#F08A86 !important; } /* ================================================================ CEK STATUS PESANAN & LACAK PESANAN (struktur sama; .rs-hasil-wrap) ================================================================ */ html[data-tema="gelap"] body.rs-public:has(.rs-hasil-wrap) .kontak-card{ background-color:var(--pg-card) !important; border-color:var(--pg-line) !important; box-shadow:var(--pg-shadow) !important; color:var(--pg-ink-2); } html[data-tema="gelap"] body.rs-public:has(.rs-hasil-wrap) .kontak-card .fw-bold, html[data-tema="gelap"] body.rs-public:has(.rs-hasil-wrap) .kontak-card .fw-semibold{ color:var(--pg-ink); } html[data-tema="gelap"] body.rs-public:has(.rs-hasil-wrap) .kontak-card .text-primary-custom{ color:var(--pg-aksen-tx) !important; } html[data-tema="gelap"] body.rs-public:has(.rs-hasil-wrap) .kontak-card [style*="#e5d9d9"]{ border-top-color:var(--pg-line) !important; } html[data-tema="gelap"] body.rs-public:has(.rs-hasil-wrap) .kontak-card .text-success{ color:#7FD3A4 !important; } html[data-tema="gelap"] body.rs-public :is(.rs-cek-status-track,.rs-lacak-track){ background:var(--pg-line); } html[data-tema="gelap"] body.rs-public :is(.rs-cek-status-dot,.rs-lacak-dot):not(.is-active){ background:var(--pg-seg); color:var(--pg-faint); } html[data-tema="gelap"] body.rs-public :is(.rs-cek-status-item,.rs-lacak-item){ border-bottom-color:var(--pg-line); } html[data-tema="gelap"] body.rs-public :is(.rs-cek-status-ringkas,.rs-lacak-ringkas) > summary::after{ color:var(--pg-faint); } /* badge status (bg-warning / bg-info / …) → latar transparan + teks cerah */ html[data-tema="gelap"] body.rs-public :is(.rs-cek-status-meta,.rs-lacak-meta) .badge.bg-warning{ background:rgba(224,169,90,.17) !important; color:#F0C985 !important; } html[data-tema="gelap"] body.rs-public :is(.rs-cek-status-meta,.rs-lacak-meta) .badge.bg-info{ background:rgba(70,170,220,.17) !important; color:#8ED0F0 !important; } html[data-tema="gelap"] body.rs-public :is(.rs-cek-status-meta,.rs-lacak-meta) .badge.bg-primary{ background:rgba(90,130,240,.18) !important; color:#A9C0FA !important; } html[data-tema="gelap"] body.rs-public :is(.rs-cek-status-meta,.rs-lacak-meta) .badge.bg-success{ background:rgba(47,170,100,.17) !important; color:#86D8AA !important; } html[data-tema="gelap"] body.rs-public :is(.rs-cek-status-meta,.rs-lacak-meta) .badge.bg-danger{ background:rgba(220,70,80,.17) !important; color:#F5A3A9 !important; } html[data-tema="gelap"] body.rs-public :is(.rs-cek-status-meta,.rs-lacak-meta) .badge:is(.bg-secondary,.bg-dark,.bg-light){ background:var(--pg-seg) !important; color:var(--pg-ink-2) !important; } html[data-tema="gelap"] body.rs-public:has(.rs-hasil-wrap) .kontak-card::after{ opacity:.2; } /* label kecil di atas judul halaman info (cara belanja, retur, cek status, lacak) */ html[data-tema="gelap"] body.rs-public .cb-hero .section-eyebrow{ color:var(--pg-aksen-tx); } /* ---------- ANIMASI GANTI TEMA (kedua mode) ---------- Ikon matahari ⇄ bulan berputar & bertukar; halaman berganti dengan lingkaran yang menyebar dari tombol (View Transitions API). */ .rs-tema-btn{ position:relative; overflow:hidden; } .rs-tema-btn > i{ position:absolute; top:50%; left:50%; display:inline-block !important; transition:transform .55s cubic-bezier(.34,1.56,.64,1), opacity .3s ease; } .rs-tema-btn > .rs-tema-i-terang{ transform:translate(-50%,-50%) rotate(0) scale(1); opacity:1; } .rs-tema-btn > .rs-tema-i-gelap{ transform:translate(-50%,-50%) rotate(-90deg) scale(.3); opacity:0; } html[data-tema="gelap"] .rs-tema-btn > .rs-tema-i-terang{ transform:translate(-50%,-50%) rotate(90deg) scale(.3); opacity:0; } html[data-tema="gelap"] .rs-tema-btn > .rs-tema-i-gelap{ transform:translate(-50%,-50%) rotate(0) scale(1); opacity:1; } .rs-tema-btn.rs-tema-putar{ animation:rsTemaDenyut .5s ease; } @keyframes rsTemaDenyut{ 0%{ transform:scale(1); } 40%{ transform:scale(.86); } 100%{ transform:scale(1); } } html.rs-vt::view-transition-old(root), html.rs-vt::view-transition-new(root){ animation:none; mix-blend-mode:normal; } html.rs-vt::view-transition-old(root){ z-index:1; } html.rs-vt::view-transition-new(root){ z-index:2; } html.rs-tema-ganti, html.rs-tema-ganti *{ transition:background-color .4s ease, border-color .4s ease, color .3s ease, fill .3s ease !important; } @media (prefers-reduced-motion:reduce){ .rs-tema-btn > i{ transition:none; } .rs-tema-btn.rs-tema-putar{ animation:none; } } @media print{ html[data-tema="gelap"] body{ background:#fff !important; color:#000 !important; } }