/* [project]/app/(toko)/globals.css [app-client] (css) */
:root {
  --warna-utama: #16a34a;
  --warna-utama-gelap: #15803d;
  --warna-utama-muda: #dcfce7;
  --warna-aksen: #eab308;
  --warna-aksen-gelap: #ca8a04;
  --warna-latar: #f8fafc;
  --warna-kartu: #fff;
  --warna-teks: #0f172a;
  --warna-teks-redup: #64748b;
  --warna-garis: #e2e8f0;
  --warna-sukses: #16a34a;
  --warna-bahaya: #dc2626;
  --warna-peringatan: #d97706;
  --warna-info: #2563eb;
  --radius: 12px;
  --radius-kecil: 8px;
  --bayangan: 0 2px 12px #0f172a12;
  --bayangan-kuat: 0 8px 28px #0f172a21;
}

*, :before, :after {
  box-sizing: border-box;
}

html, body {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

body {
  background: var(--warna-latar);
  color: var(--warna-teks);
  -webkit-font-smoothing: antialiased;
  font-family: Segoe UI, system-ui, -apple-system, sans-serif;
  line-height: 1.55;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  cursor: pointer;
  font-family: inherit;
}

p, h1, h2, h3, h4 {
  margin: 0;
}

.wadah {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.tombol {
  border-radius: var(--radius-kecil);
  cursor: pointer;
  white-space: nowrap;
  border: none;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all .14s;
  display: inline-flex;
}

.tombol:active {
  transform: scale(.97);
}

.tombol:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

.tombol-utama {
  background: var(--warna-utama);
  color: #fff;
  box-shadow: 0 3px 10px #16a34a40;
}

.tombol-utama:hover:not(:disabled) {
  background: var(--warna-utama-gelap);
}

.tombol-aksen {
  background: var(--warna-aksen);
  color: #fff;
  box-shadow: 0 3px 10px #eab30840;
}

.tombol-aksen:hover:not(:disabled) {
  background: var(--warna-aksen-gelap);
}

.tombol-garis {
  color: var(--warna-teks);
  border: 1.5px solid var(--warna-garis);
  background: #fff;
}

.tombol-garis:hover:not(:disabled) {
  border-color: var(--warna-utama);
  color: var(--warna-utama);
}

.tombol-bahaya {
  color: var(--warna-bahaya);
  background: #fee2e2;
}

.tombol-bahaya:hover:not(:disabled) {
  background: var(--warna-bahaya);
  color: #fff;
}

.tombol-sukses {
  background: var(--warna-utama-muda);
  color: var(--warna-sukses);
}

.tombol-sukses:hover:not(:disabled) {
  background: var(--warna-sukses);
  color: #fff;
}

.tombol-kecil {
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 13px;
}

.tombol-lebar {
  width: 100%;
}

.kartu {
  background: var(--warna-kartu);
  border: 1px solid var(--warna-garis);
  border-radius: var(--radius);
  box-shadow: var(--bayangan);
}

.grup-input {
  margin-bottom: 14px;
}

.grup-input label {
  color: var(--warna-teks);
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 600;
  display: block;
}

.grup-input small {
  color: var(--warna-teks-redup);
  margin-top: 4px;
  font-size: 12px;
  display: block;
}

.input-teks, .input-area, .input-pilih {
  border-radius: var(--radius-kecil);
  border: 1.5px solid var(--warna-garis);
  width: 100%;
  color: var(--warna-teks);
  background: #fff;
  padding: 10px 13px;
  font-family: inherit;
  font-size: 14px;
  transition: border-color .12s;
}

.input-teks:focus, .input-area:focus, .input-pilih:focus {
  border-color: var(--warna-utama);
  outline: none;
  box-shadow: 0 0 0 3px #16a34a1a;
}

.input-area {
  resize: vertical;
}

.lencana {
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.lencana-kuning {
  color: #92400e;
  background: #fef3c7;
}

.lencana-biru {
  color: #1e40af;
  background: #dbeafe;
}

.lencana-hijau {
  background: var(--warna-utama-muda);
  color: #166534;
}

.lencana-merah {
  color: #991b1b;
  background: #fee2e2;
}

.lencana-abu {
  color: #475569;
  background: #f1f5f9;
}

.lencana-ungu {
  color: #6d28d9;
  background: #ede9fe;
}

.bintang {
  color: var(--warna-aksen);
  font-size: 14px;
}

.teks-redup {
  color: var(--warna-teks-redup);
}

.teks-tengah {
  text-align: center;
}

.teks-kecil {
  font-size: 13px;
}

.muat {
  color: var(--warna-teks-redup);
  justify-content: center;
  align-items: center;
  padding: 60px 0;
  display: flex;
}

.kosong {
  text-align: center;
  color: var(--warna-teks-redup);
  padding: 60px 20px;
}

.divider {
  border: none;
  border-top: 1px solid var(--warna-garis);
  margin: 16px 0;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 99px;
}

.banner-slider {
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

.banner-slide {
  transition: transform .5s;
  display: flex;
}

.banner-slide img {
  aspect-ratio: 16 / 5;
  object-fit: cover;
  flex-shrink: 0;
  width: 100%;
}

.banner-dots {
  justify-content: center;
  gap: 6px;
  padding: 10px 0;
  display: flex;
}

.banner-dot {
  cursor: pointer;
  background: #cbd5e1;
  border: none;
  border-radius: 999px;
  width: 8px;
  height: 8px;
  transition: all .2s;
}

.banner-dot.aktif {
  background: var(--warna-utama);
  width: 20px;
}

.badge-flash {
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #f97316);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 800;
}

.tag-diskon {
  color: #fff;
  background: #ef4444;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
}

.bar-verifikasi {
  background: #fef3c7;
  border-bottom: 1px solid #fcd34d;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  font-size: 13.5px;
  display: flex;
}

[vaul-drawer][vaul-drawer-direction="bottom"] > [vaul-drawer-content] {
  border-radius: 20px 20px 0 0 !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  left: 0 !important;
  right: 0 !important;
}

[vaul-overlay] {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #0f172a8c !important;
}

/*# sourceMappingURL=app_%28toko%29_globals_1c0se_g.css.map*/