/*
 * legacy-theme.css — tema visual storefront legacy.
 *
 * Asal: public/style.js pada script hosting (file terobfuscate yang menyuntikkan
 * seluruh aturan ini lewat CSSStyleSheet.insertRule saat runtime). File itu sengaja
 * TIDAK dibawa ke repo ini; isinya diekstraksi sekali pada 24 Agustus 2026 dengan
 * menjalankannya di halaman kosong terisolasi lalu men-serialisasi document.styleSheets.
 *
 * Audit saat ekstraksi: skrip tersebut murni menyuntikkan CSS — tanpa permintaan
 * jaringan, tanpa cookie/localStorage, tanpa menyuntik markup atau event handler.
 *
 * JANGAN hapus file ini. Tanpa dia seluruh halaman di layouts/storefront-legacy
 * kehilangan gayanya (.desktop-header, .navs, .produk, .card-sales, .dots, dst).
 */

@import url("https://fonts.googleapis.com/css2?family=Karla:ital,wght%400,200..800%3B1,200..800&family=Nata+Sans:wght%40100..900&family=Outfit:wght%40100..900&display=swap");

:root { --primary: #2196f3; }

::-webkit-scrollbar { display: none; }

html { scroll-behavior: smooth; }

* { box-sizing: border-box; font-family: Karla, sans-serif; font-optical-sizing: auto; font-style: normal; }

a:hover { text-decoration: none !important; }

body { -webkit-tap-highlight-color: transparent; background: linear-gradient(174deg, rgb(241, 241, 241) 0%, rgb(242, 243, 246) 50%, rgb(204, 228, 255) 100%); user-select: none !important; }

.desktop-header { display: flex; align-items: center; gap: 15px; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; border-width: 1px 1px 2px; border-style: solid; border-color: rgb(241, 241, 241); border-image: initial; background: white; overflow: hidden; padding: 14px; position: sticky; top: 0px; z-index: 999; }

.desktop-header img { width: 35px; }

.desktop-header h5 { font-size: 17px; font-weight: bold; margin: 0px; width: 100%; color: rgb(34, 148, 242); background-image: linear-gradient(45deg, rgb(34, 148, 242), rgb(25, 117, 209), rgb(69, 165, 245)); background-clip: text; -webkit-text-fill-color: transparent; }

.desktop-header button { display: flex; align-items: center; gap: 5px; font-size: 13px; }

.button-header { display: flex; align-items: center; width: 100%; justify-content: end; gap: 20px; padding-right: 10px; }

.navs img { width: 25px; height: 25px; }

.navs a { font-size: 15px; width: 100%; align-items: center; display: flex; gap: 10px; padding: 8px 10px !important; border-radius: 5px !important; }

.navs h6 { font-size: 14px; }

.navs i { margin-right: 8px; }

.aktif-navs { background: linear-gradient(rgb(25, 118, 210) 20%, rgb(33, 150, 243) 100%); color: white; }

.aktif-navs img { filter: invert(99%) sepia(4%) saturate(7%) hue-rotate(210deg) brightness(103%) contrast(100%); }

#tanggal-waktu { font-size: 14px; }

.metode-pembayaran { position: fixed; bottom: 0px; left: 0px; width: 100%; background: white; padding: 10px 10px 10px 15px; transition: transform 0.3s; z-index: 1; text-align: left; display: flex; align-items: center; gap: 15px; }

.metode-pembayaran h6 { font-size: 12px; width: 100%; color: gray; font-weight: 400; }

.metode-pembayaran img { width: 120px !important; margin-right: 10px; }

.metode-pembayaran.hide { transform: translateY(100%); }

#offcanvas h2 { font-size: 13px; font-weight: 400; }

.show { display: none; }

main { animation: 0.3s ease 0s 1 normal none running fadeIn; }

@keyframes fadeIn { 
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0px); }
}

footer { text-align: center; }

.search-produk { display: flex; align-items: center; gap: 15px; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; border-width: 1px 1px 2px; border-style: solid; border-color: rgb(241, 241, 241); border-image: initial; background: white; padding-left: 15px; border-radius: 8px; overflow: hidden; }

.search-produk img { width: 25px; }

.search-produk input { padding: 14px; font-size: 14px; font-weight: 500; width: 100%; border-width: medium medium medium 2px; border-style: none none none solid; border-color: currentcolor currentcolor currentcolor rgb(241, 241, 241); border-image: initial; outline: none; }

.produk { box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; border-width: 1px 1px 2px; border-style: solid; border-color: rgb(241, 241, 241); border-image: initial; background: white; border-radius: 8px; padding: 10px; position: relative; }

.produk img { transform: scale(1); transition: transform 0.3s; }

.produk img:hover { transform: scale(1.1); }

.produk a:hover { transform: scale(1.1); }

.produk h3 { font-size: 14px; margin: 10px 0px 0px; padding-left: 10px; font-weight: 500; }

.produk p { font-size: 17px; margin: 0px; padding-left: 10px; font-weight: bold; }

.produk h6 { font-size: 12px; font-weight: 500; color: red; padding-left: 10px; }

.produk .gaya-text { color: rgb(0, 212, 74); background-image: linear-gradient(45deg, rgb(0, 212, 74), rgb(34, 148, 242), rgb(25, 117, 209)); background-clip: text; -webkit-text-fill-color: transparent; font-size: 17px; font-family: Poppins, sans-serif; font-weight: bold; }

.produk a { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: white; font-size: 13px; border-radius: 6px; padding: 9px 15px; margin-bottom: 0px; margin-right: 10px; background: linear-gradient(rgb(25, 118, 210) 20%, rgb(33, 150, 243) 100%); box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; font-weight: bold; position: absolute; right: 10px; bottom: 15px; transform: scale(1); transition: transform 0.3s; }

.produk .tot-sale { font-size: 12px; font-weight: 500; position: absolute; right: 20px; bottom: 60px; color: rgb(160, 0, 0); background-image: linear-gradient(45deg, rgb(160, 0, 0), rgb(255, 0, 0), rgb(255, 102, 102)); background-clip: text; -webkit-text-fill-color: transparent; }

.produk .foto-produk { width: 100px; height: 200px; border-radius: 10px; margin-right: 15px; }

.ribbon { font-size: 13px; font-weight: bold; color: rgb(255, 255, 255); --f: .5em; --r: .8em; position: absolute; top: 10px; right: calc(-1*var(--f)); padding-inline: 0.5em; line-height: 1.6; background: var(--primary); border-bottom: var(--f) solid #0005; border-left: var(--r) solid #0000; clip-path: polygon(var(--r) 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--r) calc(100% - var(--f)),0 calc(50% - var(--f)/2)); }

.rounded { border-radius: 10px !important; }

.line-cut { display: flex; align-items: center; position: relative; }

.line-cut hr { border-width: 4px medium medium; border-style: dashed none none; border-color: rgb(241, 241, 241) currentcolor currentcolor; border-image: initial; width: 100%; }

.dot-l { width: 25px; height: 25px; background: rgb(241, 241, 241); left: -35px; border-radius: 100px; position: absolute; }

.dot-r { border-radius: 100px; width: 25px; height: 25px; background: rgb(241, 241, 241); right: -35px; position: absolute; }

.pl-15, .pr-15 { padding-left: 15px; padding-right: 15px; }

.tutorial-co h4 { font-size: 15px; font-weight: bold; margin-bottom: 10px; background: linear-gradient(to right, rgb(3, 210, 186) 0%, rgb(46, 1, 210) 100%) text; -webkit-text-fill-color: transparent; }

.tutorial-co ul { list-style-type: disc; padding-left: 20px; font-size: 14px; font-weight: 500; }

.box-cek { position: relative; }

.box-cek .gaya { font-size: 25px; position: absolute; top: 10px; right: 10px; transform: rotate(90deg); color: var(--primary); }

.box-cek .label-cek { font-size: 16px; font-weight: bold; margin-bottom: 15px; color: var(--primary); }

.box-cek input { outline: none; margin-bottom: 10px; border-radius: 6px !important; }

.box-cek button { border-radius: 5px !important; }

.box-cek input:hover { border-color: var(--primary); }

.box-cek h6 { font-size: 14px; }

.error-text { color: rgb(231, 76, 60); font-size: 12px; font-weight: bold; margin-top: 0px; margin-bottom: 10px; display: none; }

.error-text.active { display: block; }

.border-error { border-color: rgb(231, 76, 60) !important; }

.id-trx { text-align: center; font-weight: bold; color: rgb(51, 51, 51); margin-bottom: 15px; }

.tanggal-trx { font-size: 12px; color: gray; }

.status-trx { margin-top: -10px; }

.status-trx img { width: 60px; height: 60px; }

.status-trx p { font-size: 14px; font-weight: bold; }

.data-trx { display: flex; align-items: center; gap: 10px; }

.data-trx p { width: 100%; font-size: 14px; }

.new-order { text-align: center; }

.new-order button { background: var(--primary); color: white; font-size: 14px; padding: 8px 10px; border-radius: 6px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; margin-top: 15px; }

.diskon { padding: 12px; background: rgba(0, 144, 255, 0.2); border-radius: 10px; backdrop-filter: blur(5px); border: 1px solid rgba(0, 144, 255, 0.3); position: relative; }

.diskon h6 { font-size: 13px; font-weight: 500; }

.diskon p { font-size: 14px; font-style: italic; }

.diskon i { color: red; }

.diskon s { font-size: 14px; font-weight: bold; color: red; }

ul li { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; }

.checkout-button { background: linear-gradient(rgb(25, 118, 210) 20%, rgb(33, 150, 243) 100%); box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; font-size: 15px; border-radius: 6px; padding: 10px 15px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: white; width: 100%; }

.download { background: linear-gradient(rgb(25, 118, 210) 20%, rgb(33, 150, 243) 100%); box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; font-size: 15px; border-radius: 6px; padding: 10px 15px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: white; width: 100%; margin-top: 15px; }

.spinner { border-width: 6px; border-style: solid; border-color: rgb(52, 152, 219) rgb(243, 243, 243) rgb(243, 243, 243); border-image: initial; border-radius: 50%; width: 40px; height: 40px; animation: 1s linear 0s infinite normal none running spin; }

@keyframes spin { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.event-img { margin-top: 15px; margin-bottom: -7px; width: 125px !important; }

.tab-btn { display: inline-block; padding: 8px 16px; background: rgb(229, 231, 235); border-radius: 2px; text-decoration: none; color: rgb(17, 17, 17); font-size: 14px; white-space: nowrap; transform: skew(-20deg) !important; transition: background 0.3s !important; }

.tab-btn.active { background: linear-gradient(rgb(25, 118, 210) 20%, rgb(33, 150, 243) 100%); box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; color: white; }

.scrollbar-hide { scrollbar-width: none; }

.scrollbar-hide::-webkit-scrollbar { display: none; }

.checkout-page { box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; border-width: 1px 1px 2px; border-style: solid; border-color: rgb(241, 241, 241); border-image: initial; background: white; padding: 23px; width: auto; margin-top: 15px; border-radius: 10px; display: flex; }

.checkout-page img { width: 100px; height: 200px; margin-right: 15px; }

.co-button { position: fixed; left: 0px; width: 100%; bottom: 0px; padding: 10px 20px; z-index: 99; font-weight: bold; font-size: 12px !important; }

.checkout-page h2 { font-size: 16px; font-weight: bold; color: var(--primary); margin-bottom: 0px; }

.checkout-page h3, .checkout-page h4, .checkout-page h5 { font-size: 14px; font-weight: 500; }

.checkout-page h5 { border-top: 3px dotted rgb(241, 241, 241); padding-top: 10px; margin-top: 10px; }

.checkout-page h3 { font-weight: bold; font-size: 17px; }

.deskripsi-co h5 { font-size: 17px; font-weight: bold; color: black; display: flex; align-items: center; border-top-width: medium; border-top-style: none; border-top-color: currentcolor; margin-bottom: 15px; margin-top: 0px; padding: 0px !important; }

.deskripsi-co h5::before { content: ""; display: inline-block; width: 20px; height: 3px; background-color: var(--primary); margin-right: 5px; }

.deskripsi-co p { font-size: 14px; font-weight: 500; }

.loadersx { width: 100px; height: 10px; position: relative; background: transparent; overflow: hidden; }

.loadersx::before { content: ""; position: absolute; bottom: 0px; left: 0px; height: 4px; width: 40%; background: linear-gradient(90deg, rgb(131, 58, 180) 0%, rgb(253, 29, 29) 50%, rgb(252, 176, 69) 100%); border-radius: 100px; animation: 2s ease-in-out 0s infinite normal none running moveBorder; }

@keyframes moveBorder { 
  0% { left: 0px; }
  50% { left: 60%; }
  100% { left: 0px; }
}

.running-text { display: flex; align-items: center; gap: 12px; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; border-width: 1px 1px 2px; border-style: solid; border-color: rgb(241, 241, 241); border-image: initial; background: white; padding: 12px; border-radius: 6px; margin-bottom: 20px; margin-top: 10px; }

.running-text img { width: 25px; }

.running-text marquee { font-size: 14px; font-weight: 600; }

#transaksiList { display: inline-block; transition: 0.5s; opacity: 1; transform: translateY(0px); margin-bottom: 10px; width: 100%; }

#transaksiList.hide { opacity: 0; transform: translateY(-20px); }

.card-sales { box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; border-width: 1px 1px 2px; border-style: solid; border-color: rgb(241, 241, 241); border-image: initial; background: white; display: flex; align-items: center; gap: 15px; padding: 10px; border-radius: 6px; width: 100%; }

.card-sales img { width: 25px; }

.card-sales div { width: 100%; }

.card-sales h5 { font-size: 13px; font-weight: 350; }

.card-sales p { font-size: 11px; }

.card-sales b { color: rgb(207, 151, 43); background-image: linear-gradient(45deg, rgb(207, 151, 43), rgb(121, 29, 149) 25%, rgb(21, 36, 224) 50%, rgb(74, 197, 162) 75%, rgb(16, 137, 26) 100%); background-clip: text; -webkit-text-fill-color: transparent; font-size: 15px; }

.dots { width: 13.4px; height: 13.4px; background: rgb(33, 150, 243); color: rgb(33, 150, 243); border-radius: 50%; box-shadow: 22.4px 0px, -22.4px 0px; animation: 1s linear 0s infinite alternate none running dots-u8fzftmd; }

@keyframes dots-u8fzftmd { 
  0% { box-shadow: 22.4px 0px, -22.4px 0px; }
  33% { box-shadow: 22.4px 0px, rgba(33, 150, 243, 0.13) -22.4px 0px; background: rgba(33, 150, 243, 0.13); }
  66% { box-shadow: rgba(33, 150, 243, 0.13) 22.4px 0px, -22.4px 0px; background: rgba(33, 150, 243, 0.13); }
}

.info-mt { text-align: center; margin-top: 16%; }

.info-mt img { width: 260px; border-radius: 15px; }

.info-mt h3 { font-size: 18px; font-weight: bold; color: red; margin-bottom: 15px; }

.info-mt p { font-size: 17px; font-weight: 400; color: gray; margin-top: 15px; }

.info-mt button { width: auto; padding: 10px 15px; font-size: 14px; font-weight: 500; color: white; border-radius: 6px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: linear-gradient(174deg, rgb(33, 150, 243) 0%, rgb(25, 118, 210) 50%); margin-top: 15px; }

@media only screen and (min-width: 768px) {
  .responsive-web { display: flex; gap: 15px; justify-content: center; }
  .show { display: flex; }
  main { padding-left: 290px !important; }
}

@media only screen and (min-width: 768px) {
  .responsive-web { display: flex; gap: 15px; justify-content: center; }
  .metode-pembayaran { padding-left: 300px; }
}

@media only screen and (min-width: 768px) {
  .checkout-page { display: flex; gap: 20px; position: relative; width: 50%; }
  .checkout-data-text { width: 100%; }
  .checkout-page img { height: 350px; width: 175px; }
  .co-button { display: flex; margin: 30px 0px 0px; position: relative; width: 50%; font-size: 12px !important; padding: 0px !important; }
  .co-button button { font-size: 13px; }
  .page-co { display: flex; gap: 20px; }
}

@media screen and (min-width: 1024px) {
  .card-sales div { width: 100%; }
  .info-mt { margin-top: 10%; }
  #transaksiList { width: auto; }
}

.mySlides { display: none; }

.mySlides img { width: 125px; height: 220px; object-fit: cover; border-radius: 5px; border: 1px solid rgb(204, 204, 204); cursor: pointer; }

.thumbnail-container { display: flex; margin-top: 5px; gap: 5px; justify-content: center; }

.thumbnail-container img { width: 30px; height: 60px; object-fit: cover; cursor: pointer; border: 1px solid rgb(204, 204, 204); border-radius: 3px; opacity: 0.6; }

.thumbnail-container img.active { opacity: 1; border: 2px solid rgb(0, 123, 255); }

.modal-gambar-produk { display: none; position: fixed; z-index: 999; padding-top: 20px; left: 0px; top: 0px; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.8); opacity: 0; transform: scale(0.95); transition: opacity 0.3s, transform 0.3s; }

.modal-gambar-produk img { display: block; width: 80vw; height: 80vh; object-fit: contain; margin: auto; border-radius: 10px; }

.modal-gambar-produk .close { position: absolute; bottom: 10px; left: 3%; width: 93.5%; color: rgb(255, 255, 255); font-size: 15px; font-weight: bold; cursor: pointer; background: red; border-radius: 10px; padding: 10px; text-align: center; }

.bg-utama { box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; border-width: 1px 1px 2px; border-style: solid; border-color: rgb(241, 241, 241); border-image: initial; background: white; border-radius: 7px; }

#searchInput:focus { border: 2px solid var(--primary) !important; }