/* ==========================================================================
   BIVAK (RCS.CBS - BIVAK) - Modern CSS System
   Clean Header, Responsive Mobile Drawer & Outdoor Dark Mode Aesthetic
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Color Tokens */
  --bg-dark: #070c0b;
  --bg-card: rgba(16, 26, 23, 0.75);
  --bg-card-hover: rgba(24, 38, 34, 0.85);
  --bg-glass: rgba(18, 32, 28, 0.6);
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-emerald: rgba(16, 185, 129, 0.25);
  
  --primary-emerald: #10b981;
  --primary-emerald-hover: #059669;
  --primary-glow: rgba(16, 185, 129, 0.35);
  
  --accent-amber: #f59e0b;
  --accent-amber-hover: #d97706;
  --accent-amber-glow: rgba(245, 158, 11, 0.35);

  --accent-sky: #06b6d4;
  --accent-rose: #f43f5e;

  --text-main: #f3f4f6;
  --text-muted: #9ca3af;
  --text-dim: #6b7280;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

   --transition-fast: 0.1s cubic-bezier(0.4, 0, 0.2, 1);
   --transition-normal: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset & Base Styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* scroll-behavior: smooth; */
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-dark);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(16, 185, 129, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(245, 158, 11, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.04) 0%, transparent 60%);
  background-attachment: fixed;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #050807;
}
::-webkit-scrollbar-thumb {
  background: #1f352e;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-emerald);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

a {
  color: var(--primary-emerald);
  text-decoration: none;
  transition: var(--transition-fast);
}

/* Layout Utilities */
.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: 5rem 0;
  position: relative;
}

.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3.5rem auto;
}

.section-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: var(--primary-emerald);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.section-title {
  font-size: 2.25rem;
  color: #ffffff;
  margin-bottom: 0.75rem;
}

.section-description {
  color: var(--text-muted);
  font-size: 1.05rem;
}

/* ==========================================================================
   Header & Navigation Bar (Clean & Un-cluttered)
   ========================================================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(7, 12, 11, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-glass);
  transition: var(--transition-normal);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 1.5rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  text-decoration: none;
}

.brand-logos {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.brand-logo {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 2px solid var(--primary-emerald);
  box-shadow: 0 0 12px var(--primary-glow);
}

.brand-logo.coin-logo {
  border-radius: 50%;
  border-color: var(--accent-amber);
  box-shadow: 0 0 12px var(--accent-amber-glow);
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-text h1 {
  font-size: 1.25rem;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1.1;
  white-space: nowrap;
}

.brand-subtitle {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  margin-top: 0.15rem;
}

/* Nav Menu Links */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.9rem;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.nav-link:hover, .nav-link.active {
  color: var(--primary-emerald);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* Mobile Toggle Hamburger Button */
.mobile-toggle {
  display: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-glass);
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  font-size: 1.2rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.mobile-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--primary-emerald);
  color: var(--primary-emerald);
}

/* Button UI Components */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
  outline: none;
  white-space: nowrap;
  height: 38px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-emerald) 0%, var(--primary-emerald-hover) 100%);
  color: #000;
  box-shadow: 0 4px 14px var(--primary-glow);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--primary-glow);
  filter: brightness(1.1);
}

.btn-amber {
  background: linear-gradient(135deg, var(--accent-amber) 0%, var(--accent-amber-hover) 100%);
  color: #000;
  box-shadow: 0 4px 14px var(--accent-amber-glow);
}
.btn-amber:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--accent-amber-glow);
  filter: brightness(1.1);
}

.btn-outline {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-main);
  border: 1px solid var(--border-glass);
}
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.btn-whatsapp {
  background: #25d366;
  color: #000;
  font-weight: 700;
}
.btn-whatsapp:hover {
  background: #20ba5a;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}

.notification-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-rose);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-full);
  margin-left: 0.2rem;
}

/* Adopsi Badge - Green */
.adopsi-badge {
  background: #10b981;
}

/* Tombol CTA Pintu Angin — animasi glow + pulse */
.btn-pintuangin {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.4rem;
  border: none;
  border-radius: var(--radius-full, 999px);
  background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
  background-size: 200% 200%;
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.55), 0 4px 14px rgba(0, 0, 0, 0.4);
  animation: paGlow 2.2s ease-in-out infinite, paGradient 4s ease infinite;
  transition: transform 0.2s ease;
}

.btn-pintuangin:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 28px rgba(16, 185, 129, 0.85), 0 6px 18px rgba(0, 0, 0, 0.45);
}

.btn-pintuangin:active {
  transform: scale(0.97);
}

.btn-pintuangin i {
  animation: paWiggle 1.6s ease-in-out infinite;
}

/* Cincin radar yang terus memancar */
.btn-pintuangin::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid rgba(16, 185, 129, 0.7);
  animation: paRing 2.2s ease-out infinite;
  pointer-events: none;
}

@keyframes paGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(16, 185, 129, 0.45), 0 4px 14px rgba(0, 0, 0, 0.4); }
  50%      { box-shadow: 0 0 30px rgba(16, 185, 129, 0.9), 0 4px 14px rgba(0, 0, 0, 0.4); }
}

@keyframes paGradient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes paRing {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.25); }
}

@keyframes paWiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-12deg); }
  75%      { transform: rotate(12deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-pintuangin, .btn-pintuangin i, .btn-pintuangin::after { animation: none; }
}

/* Hero Section */
.hero {
  position: relative;
  min-height: 70dvh;
  display: flex;
  align-items: center;
  padding-top: 110px;
  padding-bottom: 4rem;
  background: linear-gradient(to bottom, rgba(7, 12, 11, 0.4), var(--bg-dark));
  overflow: hidden;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 0%, var(--bg-dark) 90%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.15rem;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid var(--border-emerald);
  backdrop-filter: blur(8px);
  color: var(--primary-emerald);
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  max-width: 100%;
}

.hero-title {
  font-size: 3.25rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.18;
  margin-bottom: 1.25rem;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.hero-title span {
  background: linear-gradient(135deg, #10b981 0%, #34d399 50%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-description {
  font-size: 1.1rem;
  color: #d1d5db;
  margin-bottom: 2.25rem;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero Search & Filter Box */
.search-filter-card {
  background: rgba(14, 24, 21, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-emerald);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px var(--primary-glow);
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr auto;
  gap: 0.85rem;
  align-items: center;
}

.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.input-group i {
  position: absolute;
  left: 1rem;
  color: var(--primary-emerald);
  font-size: 1.05rem;
  pointer-events: none;
}

.form-control {
  width: 100%;
  padding: 0.45rem 0.65rem 0.45rem 2.2rem;
  background: rgba(7, 12, 11, 0.75);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.85rem;
  transition: var(--transition-fast);
  height: 36px;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary-emerald);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}

select.form-control {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2310b981'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 1rem;
  padding-right: 2rem;
}

/* Quick Stats Bar */
.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  margin-top: 3rem;
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  background: rgba(18, 32, 28, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-glass);
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--primary-emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.stat-label {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Vendor Marketplace Grid Section */
.vendor-card {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.vendor-card:hover {
  transform: translateY(-6px);
  background: var(--bg-card-hover);
  border-color: var(--primary-emerald);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px var(--primary-glow);
}

.vendor-cover {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.vendor-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.vendor-card:hover .vendor-cover img {
  transform: scale(1.05);
}

.location-badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  background: rgba(7, 12, 11, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-glass);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.verified-badge {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  background: var(--primary-emerald);
  color: #000;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.collage-badge {
  position: absolute;
  bottom: 0.85rem;
  right: 0.85rem;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.vendor-avatar {
  flex-shrink: 0;
}

.vendor-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.65rem;
}

.vendor-title-wrap {
  flex: 1;
}

.vendor-body {
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.vendor-avatar {
  flex-shrink: 0;
}

.vendor-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.65rem;
}

.vendor-title-wrap {
  flex: 1;
}

.vendor-title {
  font-size: 1.2rem;
  color: #fff;
}

.vendor-rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--accent-amber);
  padding: 0.18rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 700;
}

.vendor-address {
  font-size: 0.83rem;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.gear-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.1rem;
}

.tag {
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

.vendor-footer {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.vendor-price {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.vendor-price span {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--primary-emerald);
  font-family: var(--font-heading);
}

/* Grid Layouts */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1.75rem;
}

/* Auction Section (Lelang Donasi) */
.auction-section {
  background: linear-gradient(to bottom, #091310, #060b09);
  position: relative;
}

.auction-card {
  background: rgba(20, 34, 30, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.auction-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-amber);
  box-shadow: 0 15px 35px rgba(245, 158, 11, 0.2);
}

.auction-badge-cause {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  background: var(--accent-amber);
  color: #000;
  font-weight: 800;
  font-size: 0.72rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
}

.timer-box {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  background: rgba(244, 63, 94, 0.15);
  border: 1px solid rgba(244, 63, 94, 0.3);
  border-radius: var(--radius-md);
  color: var(--accent-rose);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.85rem;
}

.bid-status {
  background: rgba(7, 12, 11, 0.6);
  padding: 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glass);
  margin-bottom: 1.1rem;
}

.bid-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}

.bid-row:last-child {
  margin-bottom: 0;
}

.bid-val {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--accent-amber);
}

/* Impact & Conservation Section */
.impact-banner {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(245, 158, 11, 0.15) 100%);
  border: 1px solid var(--border-emerald);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.impact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.impact-item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.impact-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: rgba(16, 185, 129, 0.2);
  color: var(--primary-emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(4, 8, 7, 0.85);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-container {
  background: #0f1b17;
  border: 1px solid var(--border-emerald);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 550px;
  max-height: 90dvh;
  overflow-y: auto;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7), 0 0 40px var(--primary-glow);
  transform: translateY(20px);
  transition: transform var(--transition-normal);
}

.modal-overlay.active .modal-container {
  transform: translateY(0);
}

.modal-header {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 1.1rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.modal-close {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.modal-close:hover {
  background: var(--accent-rose);
  color: #fff;
}

.modal-body {
  padding: 1rem 1.1rem;
  overflow-y: auto;
  flex: 1;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.form-group-full {
  grid-column: span 2;
}

.form-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #e5e7eb;
  margin-bottom: 0.35rem;
}

/* Upload Area Styles */
.upload-input-wrapper {
  position: relative;
}

.upload-input-wrapper input[type="file"] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: rgba(7, 12, 11, 0.75);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.upload-input-wrapper input[type="file"]:hover {
  border-color: var(--primary-emerald);
  background: rgba(16, 185, 129, 0.05);
}

.upload-input-wrapper input[type="file"]:focus {
  outline: none;
  border-color: var(--primary-emerald);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}

/* Preview Containers */
.preview-container {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.preview-container img {
  border: 2px solid var(--primary-emerald);
  transition: all 0.2s ease;
}

.preview-container img:hover {
  border-color: var(--primary-emerald-hover);
  transform: scale(1.02);
}

/* Admin Panel Table & Tab Components */
.admin-badge {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-glass);
  margin-bottom: 1.25rem;
}

.tab-btn {
  padding: 0.45rem 0.85rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: var(--transition-fast);
}

.tab-btn.active {
  color: var(--primary-emerald);
  border-bottom-color: var(--primary-emerald);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.85rem;
}

.data-table th, .data-table td {
  padding: 0.6rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--border-glass);
  font-size: 0.8rem;
}

/* Admin table: narrow columns for thumbnails */
.data-table td[data-type="thumb"],
.data-table td:nth-child(5):not(:first-child) {
  width: 80px;
  text-align: center;
}

.data-table td:nth-child(6):not(:first-child) {
  width: 120px;
}

.data-table th {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  font-weight: 600;
}

.status-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
}

.status-pending {
  background: rgba(245, 158, 11, 0.2);
  color: var(--accent-amber);
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.status-approved {
  background: rgba(16, 185, 129, 0.2);
  color: var(--primary-emerald);
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.status-rejected {
  background: rgba(244, 63, 94, 0.2);
  color: var(--accent-rose);
  border: 1px solid rgba(244, 63, 94, 0.4);
}

/* Footer */
footer {
  background: #040706;
  border-top: 1px solid var(--border-glass);
  padding: 3.5rem 0 2rem 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.footer-col h4 {
  color: #fff;
  margin-bottom: 1.1rem;
  font-size: 1.05rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-links a {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.footer-links a:hover {
  color: var(--primary-emerald);
}

.copyright {
  text-align: center;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text-dim);
  font-size: 0.82rem;
}

/* Mobile Drawer Extra Action Utilities */
.mobile-drawer-actions {
  display: none;
}

.desktop-only-action {
  display: inline-flex;
}

.btn-block {
  width: 100%;
  justify-content: center;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glass);
}

/* ==========================================================================
   Responsive Breakpoints & Mobile Optimization (HP Fit)
   ========================================================================== */
@media (max-width: 1100px) {
  .nav-menu { gap: 1rem; }
  .nav-actions { gap: 0.4rem; }
  .btn { padding: 0.5rem 0.85rem; font-size: 0.8rem; }
}

@media (max-width: 900px) {
  .mobile-toggle { display: flex; }
  .desktop-only-action { display: none !important; }
  
  /* Mobile Navigation Menu Drawer */
  .nav-menu {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: rgba(7, 12, 11, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 2px solid var(--border-emerald);
    flex-direction: column;
    padding: 1.25rem 1.5rem 1.75rem 1.5rem;
    gap: 0.85rem;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    transform: translateY(-150%);
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-normal);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
    z-index: 1001;
  }

  .nav-menu.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-menu li {
    width: 100%;
  }

  .nav-link {
    display: block;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.95rem;
    text-align: center;
    border: 1px solid var(--border-glass);
  }

  .mobile-drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-glass);
  }

  .nav-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .btn-admin {
    padding: 0.45rem 0.75rem;
    font-size: 0.8rem;
  }

  .hero-title { font-size: 2.2rem; }
  .search-filter-card { grid-template-columns: 1fr; }
  .impact-banner { grid-template-columns: 1fr; gap: 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .navbar .container { padding: 0 0.85rem; height: 68px; }
  
  .brand-logo { width: 32px; height: 32px; }
  .brand-subtitle { display: none; } /* Hide subtitle on phone header so logo + title fit cleanly */
  .brand-text h1 { font-size: 1.05rem; }
  
  .nav-menu { top: 68px; max-height: calc(100vh - 68px); }

  /* Sembunyikan tombol Pintu Angin di navbar HP — versi lebar sudah ada di drawer menu,
     supaya tombol hamburger tidak terdorong keluar layar */
  .nav-actions .btn-pintuangin { display: none; }

  .hero { padding-top: 85px; padding-bottom: 2.5rem; }
  .hero-title { font-size: 1.7rem; line-height: 1.25; }
  .hero-description { font-size: 0.9rem; margin-bottom: 1.5rem; }
  
  .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 0.85rem; margin-top: 1.5rem; }
  .stat-number { font-size: 1rem; overflow-wrap: anywhere; line-height: 1.2; }
  .stat-label { font-size: 0.72rem; }
  
  .grid-3 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-group-full { grid-column: span 1; }
  .footer-grid { grid-template-columns: 1fr; }
  
  .modal-overlay { padding: 0.5rem; }
  .modal-container { max-height: 88dvh; width: 100%; border-radius: 16px; overscroll-behavior: contain; }
  .modal-header { padding: 0.85rem 1rem; }
  .modal-title { font-size: 1.1rem; }
  .modal-body { padding: 1rem 0.85rem; }
  
  .admin-tabs {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 0.35rem;
    -webkit-overflow-scrolling: touch;
  }
  
  .tab-btn {
    flex-shrink: 0;
    padding: 0.5rem 0.8rem;
    font-size: 0.82rem;
  }
  
  .data-table {
    min-width: 580px; /* Enable touch scrolling without squishing content */
  }
}

@media (max-width: 440px) {
  .brand-logo { width: 28px; height: 28px; border-width: 1.5px; } /* Kedua logo tetap tampil, hanya diperkecil */
  .brand-logos { gap: 0.3rem; }
  .brand-text h1 { font-size: 0.95rem; }
  .btn-admin .admin-text { display: none; } /* On screens < 440px, show Admin Icon + Badge count */
  .btn-admin { padding: 0.45rem 0.6rem; }
  
  .hero-stats { grid-template-columns: 1fr; gap: 0.85rem; }
}


/* ==========================================================================
   Visual Polish
   ========================================================================== */

/* Offset jangkar: judul section tidak lagi tertutup navbar saat lompat
   lewat menu navigasi (Katalog Vendor, Lelang Donasi, dst.) */
html {
  scroll-padding-top: 92px;
}

@media (max-width: 640px) {
  html { scroll-padding-top: 76px; }
}

/* Warna seleksi teks mengikuti identitas brand */
::selection {
  background: rgba(16, 185, 129, 0.35);
  color: #fff;
}

/* Indikator fokus keyboard yang jelas (aksesibilitas) */
:focus-visible {
  outline: 2px solid var(--primary-emerald);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Badge rating vendor tetap satu baris (4.9 (128) tidak lagi turun baris) */
.vendor-rating {
  white-space: nowrap;
}

/* Hilangkan sisa ruang beberapa piksel di bawah gambar cover vendor */
.vendor-cover img {
  display: block;
}


/* ==========================================================================
   Coin Admin Button
   ========================================================================== */
.btn-admin-icon {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: transform var(--transition-fast), background 0.2s;
}

.btn-admin-icon:hover {
  background: rgba(245, 158, 11, 0.15);
}

.coin-logo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--accent-amber);
  box-shadow: 0 0 12px var(--accent-amber-glow);
  transition: transform var(--transition-fast);
}

.coin-logo:hover {
  transform: scale(1.1);
}

/* ==========================================================================
   BIVAK v4 - Donasi Pintu Angin Styles
   ========================================================================== */

.btn-rose {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(244, 63, 94, 0.35);
}
.btn-rose:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(244, 63, 94, 0.45);
  filter: brightness(1.1);
}

.donation-section {
  background: linear-gradient(180deg, rgba(15, 25, 22, 0.5) 0%, var(--bg-dark) 100%);
}

.donation-progress-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.quota {
  background: rgba(140, 150, 170, 0.15);
  border-radius: var(--radius-full);
  height: 10px;
  overflow: hidden;
}
.quota i {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.2s ease;
}

.tier-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  color: var(--text-main);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  height: 32px;
}
.tier-btn:hover {
  border-color: var(--primary-emerald);
  background: rgba(16, 185, 129, 0.1);
}
.tier-btn.on {
  border-color: var(--primary-emerald);
  background: rgba(16, 185, 129, 0.2);
  color: var(--primary-emerald);
}

.sh {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 2rem 0 1rem 0;
}
.sh .bar {
  width: 4px;
  height: 24px;
  border-radius: 2px;
}
.sh h3 {
  color: #fff;
  font-size: 1.1rem;
  margin: 0;
}

.form-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

.arow {
  margin-bottom: 0.75rem;
}
.atop {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
  color: var(--text-muted);
}
.atop span:last-child {
  color: var(--primary-emerald);
  font-weight: 700;
}

.note {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
  text-align: center;
}

.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text-rose {
  color: #f43f5e;
}

.status-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

/* =====================================================================
   Perbaikan tampilan HP
   ===================================================================== */

body {
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Dipasang saat modal / menu terbuka agar latar tidak ikut menggulir */
body.no-scroll {
  overflow: hidden;
  touch-action: none;
}

/* Tabel admin lebih lebar dari layar; beri pembungkus yang bisa digeser */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Navbar fixed vs notch / home indicator */
.navbar {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.footer {
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

/* Sertifikat: ketuk untuk perbesar */
canvas.cert-zoom {
  cursor: zoom-in;
}

.cert-hint {
  margin: 0.6rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.cert-lightbox {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(3, 12, 9, 0.94);
  display: flex;
  align-items: center;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
  cursor: zoom-out;
}

.cert-lightbox img {
  width: 200%;
  max-width: 1600px;
  height: auto;
  margin: auto;
  border-radius: 8px;
}

@media (min-width: 900px) {
  .cert-lightbox img { width: 100%; }
  .cert-hint { display: none; }
}

/* Latar gelap di belakang menu HP yang terbuka */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.nav-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 900px) {
  /* iOS memperbesar halaman otomatis kalau font input < 16px.
     !important dipakai sengaja: aturan class yang ada lebih spesifik
     daripada selektor elemen, dan ini perbaikan aksesibilitas. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

@media (max-width: 640px) {
  /* Target sentuh minimum 44px sesuai panduan aksesibilitas */
  .btn,
  .vendor-footer .btn,
  .tab-btn,
  .tier-btn,
  .modal-close,
  .mobile-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Harga + tombol Detail + WA saling dorong keluar kartu */
  .vendor-footer {
    flex-wrap: wrap;
    row-gap: 0.6rem;
  }

  .vendor-footer .vendor-price {
    flex: 1 0 100%;
  }

  .vendor-cover {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .cert-hint {
    font-size: 0.74rem;
  }
}

/* Keterangan kecil di bawah input form */
.form-hint {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-dim);
}

/* ==========================================================================
   Panel tergulung (accordion) untuk section panjang
   ==========================================================================
   Bagian Donasi dan Adopsi sebelumnya menampilkan seluruh materinya
   sekaligus, sehingga scroll di HP sangat panjang. Sekarang materi detail
   disembunyikan sampai tombol "Lihat" ditekan. Progres donasi dan tombol
   "Donasi Sekarang" sengaja TIDAK digulung agar berdonasi tetap satu ketukan.
   ========================================================================== */
.collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 48px;
  padding: 0.8rem 1.05rem;
  margin: 0.5rem 0 0.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-emerald);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(16, 185, 129, 0.05));
  color: #fff;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.collapse-toggle:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.24), rgba(16, 185, 129, 0.1));
  border-color: var(--primary-emerald);
}

.collapse-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-align: left;
}

.collapse-label i { color: var(--primary-emerald); }

.collapse-chevron {
  flex-shrink: 0;
  color: var(--primary-emerald);
  transition: transform var(--transition-normal);
}

.collapse-toggle[aria-expanded="true"] .collapse-chevron {
  transform: rotate(180deg);
}

/* Tertutup secara bawaan; dibuka dengan menambah kelas .open.
   Memakai display:none, bukan grid 0fr: dengan grid, hanya BARIS PERTAMA
   yang ikut dikecilkan, sedangkan anak elemen berikutnya membuat baris
   implisit setinggi kontennya -- panel jadi tidak benar-benar menggulung. */
.collapse-body {
  display: none;
}

.collapse-body.open {
  display: block;
  margin-top: 0.85rem;
  animation: collapseIn var(--transition-normal) ease-out;
}

@keyframes collapseIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tanpa JavaScript, materi tetap bisa dibaca (tidak terkunci tersembunyi) */
.no-js .collapse-body { display: block; }
.no-js .collapse-toggle { display: none; }

@media (prefers-reduced-motion: reduce) {
  .collapse-body.open { animation: none; }
  .collapse-chevron { transition: none; }
}

@media (max-width: 640px) {
  .collapse-toggle { font-size: 0.86rem; padding: 0.75rem 0.85rem; }
}


/* ==========================================================================
   Mobile App Polish - BIVAK
   ========================================================================== */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  body { -webkit-tap-highlight-color: transparent; }

  .container { width: 100%; padding-left: 1rem; padding-right: 1rem; }
  section { padding-top: 2.5rem; padding-bottom: 2.5rem; }

  .hero {
    min-height: auto;
    padding-top: 86px;
    text-align: left;
  }
  .hero .container { padding-left: 1rem; padding-right: 1rem; }
  .hero-badge { font-size: .78rem; padding: .45rem .7rem; }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: .75rem; }
  .hero-actions .btn { width: 100%; min-height: 46px; justify-content: center; }

  .search-filter-card {
    position: sticky;
    top: 72px;
    z-index: 20;
    padding: .75rem;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
  }

  .vendor-card {
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,.22);
  }
  .vendor-card:hover { transform: none; }
  .vendor-cover { height: 210px; background: #111; }
  .vendor-body { padding: 1rem; gap: .85rem; }
  .vendor-header { gap: .5rem; }
  .vendor-title { font-size: 1.05rem; line-height: 1.25; }
  .vendor-rating { font-size: .82rem; }
  .vendor-address { font-size: .86rem; line-height: 1.35; }
  .gear-tags { gap: .4rem; }
  .tag { font-size: .72rem; padding: .35rem .5rem; }
  .vendor-footer {
    flex-direction: column;
    align-items: stretch;
    gap: .85rem;
  }
  .vendor-footer > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: .6rem !important;
  }
  .vendor-footer .btn,
  .btn-whatsapp,
  .btn-outline {
    min-height: 44px;
    justify-content: center;
    border-radius: 12px;
  }

  .location-badge, .verified-badge {
    font-size: .68rem;
    max-width: calc(50% - 1rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .modal-container {
    width: min(100%, 430px);
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    margin-top: auto;
  }
  .modal-overlay { align-items: flex-end; }
  input, select, textarea, .form-control { font-size: 16px; min-height: 46px; }
}

@media (max-width: 390px) {
  .container { padding-left: .85rem; padding-right: .85rem; }
  .hero-title { font-size: 1.48rem; }
  .vendor-cover { height: 190px; }
  .vendor-body { padding: .9rem; }
  .vendor-footer > div:last-child { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Kekinian UX Polish - glass cards, app-like mobile, friendly taps
   ========================================================================== */
:root {
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
}

.vendor-card, .form-card, .donation-progress-card, .auction-card {
  box-shadow: 0 10px 35px rgba(0,0,0,.18);
}

.btn {
  min-height: 42px;
  touch-action: manipulation;
}
.btn:focus-visible, .form-control:focus-visible, .tab-btn:focus-visible {
  outline: 3px solid rgba(16,185,129,.35);
  outline-offset: 2px;
}

.vendor-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.02), rgba(0,0,0,.55));
  pointer-events: none;
}
.location-badge, .verified-badge, .collage-badge { z-index: 2; }

@media (max-width: 640px) {
  body { padding-bottom: calc(76px + var(--app-safe-bottom)); }

  .navbar {
    backdrop-filter: blur(18px);
    background: rgba(6, 12, 10, .82);
  }
  .nav-menu.active {
    border-radius: 0 0 24px 24px;
    box-shadow: 0 18px 35px rgba(0,0,0,.35);
  }

  .hero::before {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1.3rem;
    height: 120px;
    border-radius: 28px;
    background: radial-gradient(circle at 30% 30%, rgba(16,185,129,.22), transparent 60%), rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
    pointer-events: none;
  }
  .hero-tag { margin-top: .25rem; }

  .section-header {
    text-align: left;
    margin-bottom: 1.25rem;
  }
  .section-title { font-size: 1.55rem; line-height: 1.18; }
  .section-subtitle { font-size: .92rem; }

  .grid-3 { gap: 1rem; }
  .vendor-card { overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
  .vendor-cover img { filter: saturate(1.05) contrast(1.02); }
  .vendor-price span { display: block; margin-top: .15rem; font-size: 1.05rem; }

  .search-filter-card .btn { min-height: 48px; }
  .filter-group label { font-size: .75rem; letter-spacing: .02em; }

  .tier-options, .adopsi-packages { grid-template-columns: 1fr 1fr !important; gap: .75rem !important; }
  .tier-btn, .adopsi-card { min-height: 54px; border-radius: 16px !important; }

  .donation-cta { display: grid !important; grid-template-columns: 1fr !important; gap: .75rem !important; }
  .donation-cta .btn { width: 100%; min-width: 0 !important; }

  .modal-close { min-width: 44px; min-height: 44px; }

  .mobile-bottom-nav {
    position: fixed;
    left: .75rem;
    right: .75rem;
    bottom: calc(.65rem + var(--app-safe-bottom));
    height: 62px;
    z-index: 999;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .25rem;
    padding: .45rem;
    border-radius: 22px;
    background: rgba(7, 12, 11, .9);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 18px 45px rgba(0,0,0,.45);
    backdrop-filter: blur(18px);
  }
  .mobile-bottom-nav a, .mobile-bottom-nav button {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .18rem;
    font-size: .68rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 16px;
    min-width: 0;
  }
  .mobile-bottom-nav i { font-size: 1rem; color: var(--primary-emerald); }
  .mobile-bottom-nav a:active, .mobile-bottom-nav button:active { background: rgba(16,185,129,.12); transform: scale(.98); }
}

@media (min-width: 641px) { .mobile-bottom-nav { display: none; } }

/* ==========================================================================
   Mobile vendor grid + compact social mission
   ========================================================================== */
.impact-mobile-toggle { display: none; }

@media (min-width: 641px) {
  #impactPanel.collapse-body { display: contents; }
}

@media (max-width: 640px) {
  /* Vendor tampil 2 kolom agar beberapa kartu langsung terlihat tanpa scroll panjang */
  #vendorGridContainer.grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }

  #vendorGridContainer .vendor-card {
    border-radius: 16px;
  }

  #vendorGridContainer .vendor-cover {
    height: auto;
    aspect-ratio: 1 / .72;
  }

  #vendorGridContainer .vendor-body {
    padding: .72rem;
    gap: .48rem;
  }

  #vendorGridContainer .vendor-header {
    display: block;
    margin-bottom: .35rem;
  }

  #vendorGridContainer .vendor-title {
    font-size: .86rem;
    line-height: 1.22;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.1em;
  }

  #vendorGridContainer .vendor-rating {
    width: fit-content;
    margin-top: .38rem;
    font-size: .7rem;
    padding: .14rem .36rem;
  }

  #vendorGridContainer .vendor-address {
    font-size: .72rem;
    line-height: 1.25;
    margin-bottom: .2rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #vendorGridContainer .gear-tags {
    gap: .28rem;
    margin-bottom: .35rem;
  }

  #vendorGridContainer .tag {
    font-size: .64rem;
    padding: .24rem .36rem;
  }

  #vendorGridContainer .tag:nth-child(n+3) { display: none; }

  #vendorGridContainer .vendor-footer {
    gap: .48rem;
    padding-top: .55rem;
  }

  #vendorGridContainer .vendor-price {
    font-size: .66rem;
  }

  #vendorGridContainer .vendor-price span {
    font-size: .82rem;
  }

  #vendorGridContainer .vendor-footer > div:last-child {
    grid-template-columns: 1fr 1fr;
    gap: .4rem !important;
  }

  #vendorGridContainer .vendor-footer .btn,
  #vendorGridContainer .btn-whatsapp,
  #vendorGridContainer .btn-outline {
    min-height: 38px;
    padding: .42rem .35rem !important;
    font-size: .72rem !important;
    border-radius: 10px;
  }

  #vendorGridContainer .location-badge,
  #vendorGridContainer .verified-badge,
  #vendorGridContainer .collage-badge {
    top: .45rem;
    font-size: .58rem;
    padding: .16rem .38rem;
  }

  #vendorGridContainer .location-badge { left: .45rem; }
  #vendorGridContainer .verified-badge { right: .45rem; }
  #vendorGridContainer .collage-badge { bottom: .45rem; right: .45rem; }

  /* Misi sosial: ringkas di mobile, detail dibuka bila dibutuhkan */
  .impact-banner {
    padding: 1.1rem !important;
    gap: .9rem !important;
  }

  .impact-banner h2 {
    font-size: 1.35rem !important;
    line-height: 1.2;
    margin-bottom: .7rem !important;
  }

  .impact-banner p {
    font-size: .86rem;
    line-height: 1.5;
    margin-bottom: .85rem !important;
  }

  .impact-mobile-toggle { display: flex; }
  #impactPanel.collapse-body.open { display: contents; }

  .impact-list {
    gap: .7rem;
    margin-top: .8rem;
  }

  .impact-item {
    gap: .7rem;
  }

  .impact-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    font-size: 1rem;
  }

  .impact-benefits {
    gap: .65rem !important;
    margin-top: .75rem;
  }

  .impact-benefits > div {
    padding: .8rem !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 360px) {
  #vendorGridContainer.grid-3 { gap: .6rem; }
  #vendorGridContainer .vendor-body { padding: .62rem; }
  #vendorGridContainer .vendor-title { font-size: .8rem; }
  #vendorGridContainer .vendor-footer > div:last-child { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Alur platform lebih compact dan menarik
   ========================================================================== */
.platform-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.flow-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  min-height: 138px;
  padding: 1.15rem;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(18, 32, 28, .86), rgba(7, 12, 11, .78));
  border: 1px solid var(--border-glass);
  overflow: hidden;
}

.flow-card::before {
  content: '';
  position: absolute;
  inset: -45% -25% auto auto;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(16,185,129,.24), transparent 62%);
  pointer-events: none;
}

.flow-donasi::before { background: radial-gradient(circle, rgba(244,63,94,.24), transparent 62%); }
.flow-publik::before { background: radial-gradient(circle, rgba(6,182,212,.24), transparent 62%); }

.flow-number {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(16, 185, 129, .16);
  color: var(--primary-emerald);
  border: 1px solid rgba(16, 185, 129, .3);
  font-weight: 900;
  font-size: 1.05rem;
}

.flow-donasi .flow-number { background: rgba(244,63,94,.14); color: #fb7185; border-color: rgba(244,63,94,.34); }
.flow-publik .flow-number { background: rgba(6,182,212,.14); color: var(--accent-sky); border-color: rgba(6,182,212,.34); }

.flow-content { position: relative; z-index: 1; }
.flow-content h3 { color: #fff; margin-bottom: .35rem; font-size: 1.02rem; line-height: 1.25; }
.flow-content p { color: var(--text-muted); font-size: .86rem; line-height: 1.45; margin: 0; }

@media (max-width: 640px) {
  /* Rapatkan jarak antar panel/section di tampilan mobile */
  .section { padding-top: 1.65rem; padding-bottom: 1.65rem; }
  .section-header { margin-bottom: 1rem; }
  .section-title { font-size: 1.38rem; }
  .section-description { margin-top: .45rem; }
  #vendors.section { padding-bottom: 1.35rem; }
  #donasi.section,
  #adopsi.section,
  #dampak.section,
  #panduan.section { padding-top: 1.35rem; }

  #panduan .section-header { text-align: left; }
  #panduan .section-subtitle { margin-left: 0; }

  .platform-flow {
    grid-template-columns: 1fr;
    gap: .65rem;
  }

  .flow-card {
    min-height: 0;
    align-items: center;
    gap: .75rem;
    padding: .85rem;
    border-radius: 16px;
  }

  .flow-number {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 12px;
    font-size: .94rem;
  }

  .flow-content h3 {
    font-size: .94rem;
    margin-bottom: .18rem;
  }

  .flow-content p {
    font-size: .78rem;
    line-height: 1.35;
  }
}

/* ==========================================================================
   Bottom nav: lebih native, halus, tidak terlalu template/PWA
   ========================================================================== */
@media (max-width: 640px) {
  .mobile-bottom-nav {
    left: max(1rem, env(safe-area-inset-left));
    right: max(1rem, env(safe-area-inset-right));
    bottom: calc(.8rem + var(--app-safe-bottom));
    height: 58px;
    padding: .35rem;
    gap: .15rem;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(18, 27, 24, .86), rgba(7, 12, 11, .92));
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: 0 10px 30px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(20px) saturate(1.2);
  }

  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    position: relative;
    gap: .14rem;
    color: rgba(226,232,240,.72);
    font-size: .64rem;
    font-weight: 650;
    letter-spacing: -.01em;
    border-radius: 15px;
    transition: background .18s ease, color .18s ease, transform .18s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-bottom-nav i {
    font-size: 1.05rem;
    color: rgba(16,185,129,.92);
    filter: none;
  }

  .mobile-bottom-nav a:hover,
  .mobile-bottom-nav button:hover,
  .mobile-bottom-nav a:focus-visible,
  .mobile-bottom-nav button:focus-visible {
    outline: none;
    background: rgba(255,255,255,.06);
    color: #fff;
  }

  .mobile-bottom-nav a:active,
  .mobile-bottom-nav button:active {
    background: rgba(16,185,129,.13);
    transform: translateY(1px) scale(.98);
  }

  .mobile-bottom-nav button:nth-child(2) i { color: #fb7185; }
  .mobile-bottom-nav button:nth-child(3) i { color: #34d399; }
  .mobile-bottom-nav button:nth-child(4) i { color: #7dd3fc; }
}


/* ==========================================================================
   Mobile-first refinement: vendor actions + app comfort
   ========================================================================== */
@media (max-width: 640px) {
  body { padding-bottom: calc(90px + var(--app-safe-bottom)); }

  .hero {
    padding-top: 78px;
    padding-bottom: 1.35rem;
  }

  .hero-badge {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }

  .search-filter-card {
    position: relative;
    top: auto;
    margin-top: 1.4rem;
    gap: .65rem;
    padding: .7rem;
    border-radius: 18px;
  }

  .section-header { text-align: left; }
  .section-subtitle { margin-left: 0; }

  /* Kartu vendor dibuat mobile-first: tombol tidak kejepit lagi */
  #vendorGridContainer.grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .72rem;
    align-items: stretch;
  }

  #vendorGridContainer .vendor-card {
    min-width: 0;
    overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(18,32,28,.92), rgba(8,15,13,.96));
  }

  #vendorGridContainer .vendor-cover { aspect-ratio: 1 / .68; }

  #vendorGridContainer .vendor-body {
    padding: .68rem;
    gap: .42rem;
  }

  #vendorGridContainer .gear-tags {
    min-height: 46px;
    align-content: flex-start;
  }

  #vendorGridContainer .vendor-footer {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: .48rem;
    padding-top: .55rem;
  }

  #vendorGridContainer .vendor-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .35rem;
    width: 100%;
    font-size: .66rem;
  }

  #vendorGridContainer .vendor-price span {
    display: inline-block;
    font-size: .78rem;
    white-space: nowrap;
  }

  #vendorGridContainer .vendor-footer > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: .42rem !important;
    width: 100%;
    min-width: 0;
  }

  #vendorGridContainer .vendor-footer .btn,
  #vendorGridContainer .btn-whatsapp,
  #vendorGridContainer .btn-outline {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: .45rem .25rem !important;
    font-size: .72rem !important;
    line-height: 1;
    border-radius: 12px;
    gap: .28rem;
    white-space: nowrap;
  }

  #vendorGridContainer .btn-whatsapp {
    background: linear-gradient(135deg, #25D366, #16a34a);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 18px rgba(22,163,74,.18);
  }

  #vendorGridContainer .vendor-footer .btn i { font-size: .86rem; }

  /* Sentuhan mobile: form dan CTA terasa seperti aplikasi, bukan template */
  .btn { border-radius: 14px; }
  .form-control { border-radius: 14px; }
  .modal-container { box-shadow: 0 -12px 50px rgba(0,0,0,.45); }

  .donation-cta {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: .65rem !important;
    margin-bottom: 1rem !important;
  }

  .donation-cta .btn { width: 100%; min-width: 0 !important; }

  .impact-banner,
  .form-card,
  .donation-progress-card,
  .auction-card {
    border-radius: 20px;
  }
}

@media (max-width: 380px) {
  #vendorGridContainer.grid-3 { gap: .58rem; }
  #vendorGridContainer .vendor-body { padding: .58rem; }
  #vendorGridContainer .vendor-title { font-size: .78rem; }
  #vendorGridContainer .tag { font-size: .6rem; padding: .2rem .3rem; }
  #vendorGridContainer .vendor-footer > div:last-child { gap: .34rem !important; }
  #vendorGridContainer .vendor-footer .btn,
  #vendorGridContainer .btn-whatsapp,
  #vendorGridContainer .btn-outline { font-size: .68rem !important; min-height: 38px; }
}


/* Fix tombol aksi vendor mobile agar tidak kepotong */
@media (max-width: 640px) {
  #vendorGridContainer .vendor-footer > div:last-child {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #vendorGridContainer .vendor-footer .btn,
  #vendorGridContainer .btn-whatsapp {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #vendorGridContainer .vendor-footer .btn i,
  #vendorGridContainer .btn-whatsapp i {
    flex: 0 0 auto;
  }

  #vendorGridContainer .btn-label-detail {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 360px) {
  #vendorGridContainer .vendor-footer > div:last-child {
    grid-template-columns: 1fr;
  }

  #vendorGridContainer .vendor-footer .btn,
  #vendorGridContainer .btn-whatsapp {
    min-height: 36px;
  }
}

/* ==========================================================================
   Utility Classes - Trivial Inline Replacements
   ========================================================================== */
.table-overflow {
  overflow-x: auto;
}

.color-emerald {
  color: #10b981;
}

.color-amber {
  color: var(--accent-amber);
}

.footer-desc {
  color: var(--text-muted);
  font-size: 0.9rem;
  max-width: 400px;
}

.btn-margin-top {
  margin-top: 1rem;
}

.admin-tab-desc {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ==========================================================================
   Mobile Optimizations - Reduce Animations
   ========================================================================== */
@media (max-width: 640px) {
  /* Disable hero floating particles to save battery */
  .hero::before {
    animation: none;
    opacity: 0.5;
  }
  
  /* Keep card stagger but faster */
  .vendor-card {
    animation-duration: 0.3s;
  }
  
  /* Disable badge pulse - static is fine */
  .notification-badge {
    animation: none;
  }
  
  /* Disable shimmer on buttons */
  .btn-primary::before {
    display: none;
  }
  
  /* Disable text breathing */
  .hero-title span {
    animation: none;
  }
  
  /* Disable accent line animation */
  .section-subtitle::after {
    transition: none;
    width: 40px;
  }
  
  /* Keep touch feedback only */
  .vendor-card:active {
    transform: scale(0.98);
  }
  
  .btn:active {
    transform: scale(0.96);
  }
}

/* ==========================================================================
   Fun Visual Effects - Interactive Polish
   ========================================================================== */

/* Floating particles in hero */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(16, 185, 129, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 60%);
  animation: heroFloat 20s ease-in-out infinite;
  pointer-events: none;
}

@keyframes heroFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-10px, -15px) scale(1.02); }
  50% { transform: translate(10px, -8px) scale(0.98); }
  75% { transform: translate(-8px, 10px) scale(1.01); }
}

/* Stagger animation for vendor cards */
.vendor-card {
  animation: cardFadeIn 0.6s ease-out backwards;
}

.vendor-card:nth-child(1) { animation-delay: 0.1s; }
.vendor-card:nth-child(2) { animation-delay: 0.2s; }
.vendor-card:nth-child(3) { animation-delay: 0.3s; }
.vendor-card:nth-child(4) { animation-delay: 0.4s; }
.vendor-card:nth-child(5) { animation-delay: 0.5s; }
.vendor-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pulse effect for notification badges */
.notification-badge {
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Shimmer effect on buttons */
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.25s ease;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary {
  position: relative;
  overflow: hidden;
}

/* Glow on focus for accessibility */
.btn:focus-visible,
.form-control:focus-visible {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.4);
}

/* Smooth scroll behavior - disabled for snappier PWA */
html {
  /* scroll-behavior: smooth; */
}

/* Accent line animation on section headers */
.section-subtitle::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--primary-emerald);
  margin: 0.75rem auto 0;
  border-radius: 2px;
  transition: width 0.15s ease;
}

.section-subtitle:hover::after {
  width: 60px;
}

/* Interactive hover glow on cards */
.vendor-card::before,
.form-card::before,
.donation-progress-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.vendor-card::before {
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.2);
}

.vendor-card:hover::before {
  opacity: 1;
}

/* Subtle breathing effect for hero text */
.hero-title span {
  animation: textBreath 4s ease-in-out infinite;
}

@keyframes textBreath {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* Mobile touch feedback */
@media (hover: none) {
  .vendor-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  
  .btn:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .notification-badge,
  .hero-title span,
  .section-subtitle::after {
    animation: none;
  }
  
  .vendor-card {
    animation: none;
  }
}

/* ==========================================================================
   Utility Classes - Inline Style Replacements
   ========================================================================== */

/* Width & Display */
.w-full { width: 100%; }
.d-none { display: none; }

/* Spacing */
.mt-sm { margin-top: 0.5rem; }
.mt-md { margin-top: 1rem; }
.mt-lg { margin-top: 1.5rem; }
.mb-sm { margin-bottom: 0.5rem; }
.mb-md { margin-bottom: 1rem; }
.mb-lg { margin-bottom: 1.5rem; }
.mb-auto { margin-bottom: auto; }

/* Padding */
.p-sm { padding: 0.5rem; }
.p-md { padding: 1rem; }
.p-lg { padding: 1.5rem; }

/* Text Colors */
.text-white { color: #fff; }
.text-muted { color: var(--text-muted); }
.text-emerald { color: #10b981; }
.text-rose { color: #f43f5e; }
.text-amber { color: #f59e0b; }
.text-sky { color: #06b6d4; }

/* Font Weights */
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* Font Sizes */
.fs-xs { font-size: 0.75rem; }
.fs-sm { font-size: 0.85rem; }
.fs-md { font-size: 0.9rem; }
.fs-lg { font-size: 1.1rem; }

/* Backgrounds */
.bg-glass { background: rgba(255, 255, 255, 0.03); }
.bg-emerald-light { background: rgba(16, 185, 129, 0.1); }
.bg-rose-light { background: rgba(244, 63, 94, 0.15); }
.border-emerald-light { border-color: rgba(16, 185, 129, 0.2); }
.border-rose-light { border-color: rgba(244, 63, 94, 0.3); }

/* Progress Bar */
.progress-bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #10b981, #059669);
}

.progress-bar-rose {
  background: linear-gradient(90deg, #f43f5e, #e11d48);
}

.progress-bar-amber {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.progress-bar-sky {
  background: linear-gradient(90deg, #06b6d4, #0284c7);
}

/* Section Headers */
.sh-emerald .bar { background: #10b981; }
.sh-rose .bar { background: #f43f5e; }
.sh-amber .bar { background: #f59e0b; }

/* Certification */
.cert-canvas {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 2px solid rgba(16, 185, 129, 0.3);
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.cert-canvas-example {
  border-color: rgba(247, 224, 138, 0.3);
}

/* Impact Cards */
.impact-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border-emerald);
  border-radius: var(--radius-lg);
  padding: 1rem 1.15rem;
}

/* Button Variants */
.btn-full { width: 100%; }
.btn-block { display: flex; width: 100%; }

/* Grid Layouts */
.grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.flex-center {
  display: flex;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-gap-sm { gap: 0.75rem; }
.flex-gap-md { gap: 1rem; }

/* Donor & Payment Info */
.payment-box {
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
}

/* Admin Tables */
.table-responsive {
  overflow-x: auto;
}

/* Adopsi Package Cards */
.adopsi-card-wrapper {
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
}

.adopsi-card-wrapper:hover {
  border-color: var(--primary-emerald);
}

/* Notification Badge */
.badge-hidden {
  display: none;
}

/* CTA Container */
.donation-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.donation-tier-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0;
}

.btn-cta-flex {
  flex: 1;
  min-width: 200px;
}

.btn-wa-style {
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Modal Adjustments */
.modal-sm { max-width: 520px; }
.modal-lg { max-width: 900px; }

/* Form Summary Box */
.summary-box {
  padding: 1rem;
  background: rgba(16, 185, 129, 0.1);
  border-radius: var(--radius-md);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Info Alert Box */
.info-alert {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
}

/* Section Backgrounds */
.section-alt {
  background: rgba(8, 185, 111, 0.08);
}

.section-dark {
  background: rgba(16, 26, 23, 0.4);
}

/* Impact Section */
.impact-benefits-col {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Section Header Accent */
.section-subtitle-rose {
  background: rgba(244, 63, 94, 0.15);
  border-color: rgba(244, 63, 94, 0.3);
  color: #f43f5e;
}

/* Modal Title Icons */
.icon-emerald { color: #10b981; }
.icon-rose { color: #f43f5e; }

/* Hero Title */
.hero-title-lg {
  font-size: 2rem;
  color: #fff;
  margin-bottom: 1rem;
}

/* Navbar Small Button */
.btn-small {
  padding: 0.5rem 1.1rem;
  font-size: 0.82rem;
}

/* Quota Labels */
.quota-label {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

/* Donation Amount Display */
.amount-display {
  color: #10b981;
  font-size: 15px;
}

/* Row Between Small */
.row-small {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 6px;
}

/* Footer Brand */
.footer-brand { margin-bottom: 1rem; }

/* Footer Text */
.footer-text {
  color: var(--text-muted);
  font-size: 0.9rem;
  max-width: 400px;
}

/* Admin Content */
.admin-desc {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Additional Utilities */
.flex-shrink-0 { flex-shrink: 0; }
.mt-3xs { margin-top: 0.25rem; }
.mt-2xs { margin-top: 0.5rem; }
.mt-xs { margin-top: 0.75rem; }
.mb-3xs { margin-bottom: 0.25rem; }
.mb-2xs { margin-bottom: 0.5rem; }
.mb-xs { margin-bottom: 0.75rem; }
.me-sm { margin-right: 0.375rem; }
.ms-sm { margin-left: 0.375rem; }
.max-height-400 { max-height: 400px; }
.overflow-y-auto { overflow-y: auto; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.justify-content-end { justify-content: flex-end; }
.gap-md { gap: 1rem; }
.gap-sm { gap: 0.5rem; }
.p-lg { padding: 1.5rem; }
.p-md { padding: 1rem; }
.p-sm { padding: 0.5rem; }

/* Form Control Utilities */
.input-group .form-control {
  display: block;
  width: 100%;
}

/* Quota & Progress */
.quota {
  position: relative;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin: 4px 0;
}

.quota i {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 3px;
}

/* Row utilities */
.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Note/Footnote */
.note {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Cert hint */
.cert-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* bg-white rounded-lg */
.bg-white { background: #fff; }
.rounded-lg { border-radius: var(--radius-lg); }

/* flex-column gap */
.flex-column.gap-md {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.flex-column.gap-sm {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ==========================================================================
   Mobile UX v2: chips, nav aktif, bottom sheet, lightbox koleksi
   ========================================================================== */
.city-chips {
  grid-column: 1 / -1;
  display: flex;
  gap: .45rem;
  overflow-x: auto;
  padding: .15rem .1rem .35rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.city-chips::-webkit-scrollbar { display: none; }

.city-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-height: 36px;
  padding: .4rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--border-glass);
  background: rgba(255,255,255,.04);
  color: var(--text-muted);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.city-chip:hover { border-color: var(--primary-emerald); color: #fff; }
.city-chip.active {
  background: var(--primary-emerald);
  border-color: var(--primary-emerald);
  color: #04120d;
}

.mobile-bottom-nav a.active,
.mobile-bottom-nav button.active {
  background: rgba(16,185,129,.14);
  color: #fff;
}
.mobile-bottom-nav a.active i,
.mobile-bottom-nav button.active i { color: #34d399; }

/* Badge Foto Koleksi sekarang tombol yang bisa diklik */
.collage-badge-btn {
  border: 1px solid rgba(255,255,255,.22);
  font-family: inherit;
  cursor: zoom-in;
  transition: background .18s ease, transform .18s ease;
}
.collage-badge-btn:hover,
.collage-badge-btn:focus-visible {
  background: rgba(16,185,129,.9);
  color: #04120d;
  outline: none;
}
.collage-badge-btn:active { transform: scale(.96); }

/* Caption di lightbox koleksi */
.lightbox-caption {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  max-width: calc(100vw - 2rem);
  padding: .5rem .9rem;
  border-radius: 999px;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.16);
  color: #e5e7eb;
  font-size: .78rem;
  text-align: center;
  pointer-events: none;
}

@media (max-width: 640px) {
  /* Badge Terverifikasi: lingkaran centang bersih, teks tidak lagi kepotong.
     Teks lengkap tetap terbaca lewat title/aria-label dan muncul penuh di modal detail. */
  #vendorGridContainer .verified-badge {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
  }
  #vendorGridContainer .verified-badge i { margin: 0; font-size: .68rem; }
  #vendorGridContainer .verified-badge .verified-text { display: none; }

  #modalVendorDetail.modal-overlay { align-items: flex-end; padding: 0; }
  #modalVendorDetail .modal-container {
    width: 100%;
    max-width: 100%;
    border-radius: 22px 22px 0 0;
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
  }
  #modalVendorDetail .modal-body {
    overflow-y: auto;
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }

  #modalVendorDetail .vendor-detail-actions {
    position: sticky;
    bottom: 0;
    margin: 1rem -0.85rem -1rem;
    padding: .7rem .85rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(10,17,15,0), rgba(10,17,15,.96) 28%);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .6rem !important;
  }
  #modalVendorDetail .vendor-detail-actions .btn-whatsapp {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
  }

  .search-filter-card { overflow: hidden; }
  .city-chips { margin: 0 -0.1rem; }

  #vendorGridContainer .collage-badge-btn {
    top: auto;
    bottom: .45rem;
    right: .45rem;
    min-height: 30px;
  }
}

/* ==========================================================================
   Panel gabungan: Konservasi Gunung Bawakaraeng (Donasi + Adopsi)
   ========================================================================== */
.konservasi-section {
  padding-bottom: 0;
}

.konservasi-toggle {
  min-height: 64px;
  font-size: 1.05rem;
  padding: 1rem 1.2rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(16,185,129,.2), rgba(6,182,212,.08));
  border: 1px solid rgba(16,185,129,.4);
  box-shadow: 0 10px 30px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
}

.konservasi-toggle:hover {
  background: linear-gradient(135deg, rgba(16,185,129,.32), rgba(6,182,212,.14));
  border-color: var(--primary-emerald);
}

.konservasi-toggle .collapse-label i { font-size: 1.15rem; }

.konservasi-hint {
  color: var(--text-muted);
  font-size: .8rem;
  margin: .5rem 0 0;
  text-align: center;
}

/* Saat panel terbuka, hint disembunyikan supaya tidak mengulang info */
#konservasiPanel.open { margin-top: 0; }
.konservasi-toggle[aria-expanded="true"] + .konservasi-hint { display: none; }

/* Section di dalam panel: padding dirapatkan supaya tidak dobel */
#konservasiPanel > .section { padding-top: 1.5rem; }
#konservasiPanel > .section:last-child { padding-bottom: 2rem; }

@media (max-width: 640px) {
  .konservasi-section { padding-top: 1.35rem; }
  .konservasi-toggle {
    min-height: 58px;
    font-size: .94rem;
    padding: .85rem 1rem;
    border-radius: 18px;
  }
  .konservasi-hint { font-size: .74rem; }
  #konservasiPanel > .section { padding-top: 1.1rem; }
}