/* ============================================================
   TOKOBUNGAJAKARTAUTARA - Custom Styles
   Font: Playfair Display (serif) + DM Sans (body)
   Palette: cream, sage, blush, gold, navy, sky
============================================================ */

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

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background-color: #FDF8F0;
  color: #374151;
}

/* Playfair untuk heading */
h1, h2, h3, .font-serif {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Scroll offset untuk anchor */
section[id] {
  scroll-margin-top: 80px;
}

/* Line clamp */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;
  line-clamp: 2;

  overflow: hidden;
}

/* Prose styles */
.prose p  { margin-bottom: 1rem; line-height: 1.75; }
.prose ul { padding-left: 1.25rem; margin-bottom: 1rem; }
.prose li { margin-bottom: 0.5rem; }
.prose a  { color: #7A9E7E; text-decoration: underline; }
.prose strong { color: #2C3E6B; }

/* WA button pulse animation */
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
}

/* Hover card lift */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* Sticky nav shadow on scroll */
#navbar.scrolled {
  box-shadow: 0 2px 20px rgba(44,62,107,0.1);
}

/* Hero image overlay */
.hero-overlay {
  background: linear-gradient(
    120deg,
    rgba(253,248,240,0.97) 0%,
    rgba(253,248,240,0.85) 50%,
    rgba(253,248,240,0.3) 100%
  );
}

/* Admin sidebar active */
.admin-nav-link.active {
  background-color: #7A9E7E;
  color: white;
}

/* Table styles */
.data-table th {
  background-color: #FDF8F0;
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6B7280;
  border-bottom: 1px solid #E5E7EB;
}
.data-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #F3F4F6;
  font-size: 0.875rem;
}
.data-table tr:hover td {
  background-color: #FDF8F0;
}

/* Badge status */
.badge-active   { background:#D1FAE5; color:#065F46; }
.badge-inactive { background:#FEE2E2; color:#991B1B; }

/* Form styles */
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #D1D5DB;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: white;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: #7A9E7E;
  box-shadow: 0 0 0 3px rgba(122,158,126,0.15);
}
.form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.375rem;
}
/* Wrapper hover effect */
.logo-wrapper {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
}

/* Zoom seluruh brand */
.brand {
  transition: transform 0.35s ease;
}

.brand:hover {
  transform: scale(1.08);
}

/* Glow logo */
.logo-wrapper {
  transition: box-shadow 0.35s ease;
}

.brand:hover .logo-wrapper {
  box-shadow:
    0 0 15px rgba(132, 204, 170, 0.7),
    0 0 30px rgba(132, 204, 170, 0.4);
}

/* Animasi icon subtle */
.logo-img {
  animation: floatLogo 3s ease-in-out infinite;
}

@keyframes floatLogo {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}