/**
 * ZIGORA HOME — custom.css
 * -----------------------------------------------------------------------
 * Tailwind CSS CDN kullanıldığı için derleme adımı yoktur; tema renkleri
 * her HTML sayfasının <head>'inde şu şekilde tanımlanan satır-içi config
 * ile Tailwind'e enjekte edilir (bu dosyanın en üstündeki yorum bloğunu
 * HER sayfaya kopyalayın):
 *
 *   <script src="https://cdn.tailwindcss.com"></script>
 *   <script>
 *     tailwind.config = {
 *       theme: {
 *         extend: {
 *           colors: {
 *             anthracite: {
 *               50:  '#f4f5f6', 100: '#e4e6e8', 200: '#c7cbd0',
 *               300: '#a1a8b0', 400: '#78818c', 500: '#5a6470',
 *               600: '#454d57', 700: '#363c44', 800: '#2a2e35',
 *               900: '#1c1f24', 950: '#101216'
 *             },
 *             cream: {
 *               50: '#fdfcfa', 100: '#faf7f2', 200: '#f3ece0',
 *               300: '#e9dcc7', 400: '#ddc9a8', 500: '#cdb188'
 *             },
 *             gold: {
 *               50: '#fbf6e9', 100: '#f5e8c4', 200: '#ead28c',
 *               300: '#deb95b', 400: '#d4af37', 500: '#b8912a',
 *               600: '#967521', 700: '#73591b', 800: '#513f14'
 *             }
 *           },
 *           fontFamily: {
 *             display: ['"Playfair Display"', 'serif'],
 *             sans: ['"Inter"', 'ui-sans-serif', 'system-ui']
 *           }
 *         }
 *       }
 *     }
 *   </script>
 *   <link rel="stylesheet" href="/assets/css/custom.css">
 *
 * Bu dosya, Tailwind utility sınıflarıyla pratik olmayan (özel animasyon,
 * scrollbar, seçim rengi, kapitone doku efekti vb.) stilleri içerir.
 * -----------------------------------------------------------------------
 */

/* =========================================================================
   1. KÖK DEĞİŞKENLER (CSS Custom Properties)
   Tailwind config'i ile aynı paleti JS/inline-style tarafında da kullanmak
   için (örn. admin.js içindeki dinamik grafikler) burada tekrar tanımlanır.
   ========================================================================= */
:root {
  --zh-anthracite-950: #101216;
  --zh-anthracite-900: #1c1f24;
  --zh-anthracite-800: #2a2e35;
  --zh-anthracite-700: #363c44;
  --zh-anthracite-600: #454d57;
  --zh-cream-50: #fdfcfa;
  --zh-cream-100: #faf7f2;
  --zh-cream-200: #f3ece0;
  --zh-gold-400: #d4af37;
  --zh-gold-500: #b8912a;
  --zh-gold-600: #967521;

  --zh-radius-lg: 1rem;
  --zh-radius-md: 0.625rem;
  --zh-shadow-luxe: 0 10px 40px -10px rgba(28, 31, 36, 0.35);
  --zh-shadow-gold: 0 8px 24px -6px rgba(212, 175, 55, 0.35);
  --zh-transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================================
   1b. KAYAN DUYURU ŞERİDİ (header marquee)
   ========================================================================= */
.zh-marquee-track {
  width: max-content;
  flex-shrink: 0;
  -webkit-animation: zh-marquee-scroll 26s linear infinite;
  animation: zh-marquee-scroll 26s linear infinite;
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.zh-marquee-track:hover {
  animation-play-state: paused;
}
@keyframes zh-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =========================================================================
   2. TİPOGRAFİ & TEMEL
   ========================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,500&family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700;800;900&display=swap");

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background-color: var(--zh-cream-50);
  color: var(--zh-anthracite-900);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  max-width: 100vw;
}

.font-display,
h1.zh-heading,
h2.zh-heading,
.zh-brand-logo {
  font-family: "Playfair Display", serif;
}

/* Seçim rengi — şampanya gold */
::selection {
  background-color: var(--zh-gold-400);
  color: var(--zh-anthracite-900);
}

/* =========================================================================
   3. ÖZEL SCROLLBAR (Webkit + Firefox)
   ========================================================================= */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--zh-cream-200);
}
::-webkit-scrollbar-thumb {
  background: var(--zh-gold-600);
  border-radius: 999px;
  border: 2px solid var(--zh-cream-200);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--zh-gold-500);
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--zh-gold-600) var(--zh-cream-200);
}

/* =========================================================================
   4. LÜKS KART / ÜRÜN KARTI EFEKTLERİ
   ========================================================================= */
.zh-card {
  background: #ffffff;
  border-radius: var(--zh-radius-lg);
  box-shadow: 0 2px 14px -4px rgba(28, 31, 36, 0.12);
  transition: transform var(--zh-transition), box-shadow var(--zh-transition), border-color var(--zh-transition);
  border: 1px solid rgba(212, 175, 55, 0.25);
}
.zh-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--zh-shadow-luxe);
  border-color: rgba(212, 175, 55, 0.55);
}

.zh-card-image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--zh-radius-lg) var(--zh-radius-lg) 0 0;
}
.zh-card-image-wrap img {
  transition: transform 500ms ease;
}
.zh-card:hover .zh-card-image-wrap img {
  transform: scale(1.06);
}

/* Kapitone (quilted) doku arka planı — hero / kategori bantları için */
.zh-quilted-bg {
  background-color: var(--zh-cream-100);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.12) 0, transparent 45%),
    radial-gradient(circle at 80% 0%, rgba(212, 175, 55, 0.09) 0, transparent 40%),
    repeating-linear-gradient(45deg, rgba(28, 31, 36, 0.03) 0 2px, transparent 2px 38px),
    repeating-linear-gradient(-45deg, rgba(28, 31, 36, 0.03) 0 2px, transparent 2px 38px);
}

/* =========================================================================
   5. ALTIN (GOLD) VURGU ÖĞELERİ
   ========================================================================= */
.zh-btn-gold {
  background: linear-gradient(135deg, #e8cd7a 0%, var(--zh-gold-400) 45%, var(--zh-gold-600) 100%);
  color: var(--zh-anthracite-900);
  font-weight: 600;
  border-radius: var(--zh-radius-md);
  box-shadow: var(--zh-shadow-gold);
  transition: filter var(--zh-transition), transform var(--zh-transition);
}
.zh-btn-gold:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}
.zh-btn-gold:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

.zh-badge-discount {
  background: var(--zh-anthracite-900);
  color: var(--zh-gold-400);
  border: 1px solid var(--zh-gold-400);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.zh-gold-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--zh-gold-400), transparent);
}

.zh-gold-text {
  color: var(--zh-gold-500);
}

/* =========================================================================
   6. FORM ELEMANLARI (checkout / admin ortak stiller)
   ========================================================================= */
.zh-input {
  background: #ffffff;
  color: var(--zh-anthracite-900);
  border: 1px solid rgba(28, 31, 36, 0.14);
  border-radius: var(--zh-radius-md);
  transition: border-color var(--zh-transition), box-shadow var(--zh-transition);
}
.zh-input::placeholder {
  color: var(--zh-anthracite-500, #8a8f97);
}
.zh-input:focus {
  outline: none;
  border-color: var(--zh-gold-400);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}

/* Koyu zemin (header arama kutusu) için koyu girdi varyantı */
.zh-input-dark {
  background: #1a1c22;
  color: var(--zh-cream-50);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: var(--zh-radius-md);
  transition: border-color var(--zh-transition), box-shadow var(--zh-transition);
}
.zh-input-dark::placeholder {
  color: #8a8f97;
}
.zh-input-dark:focus {
  outline: none;
  border-color: var(--zh-gold-400);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}

/* =========================================================================
   7. YÜKLENİYOR / SKELETON (LocalStorage render öncesi placeholder)
   ========================================================================= */
.zh-skeleton {
  background: linear-gradient(90deg, #1a1c22 25%, #24262d 37%, #1a1c22 63%);
  background-size: 400% 100%;
  animation: zh-skeleton-loading 1.4s ease infinite;
  border-radius: var(--zh-radius-md);
}
@keyframes zh-skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* =========================================================================
   8. TOAST / BİLDİRİM (sepete eklendi, admin işlemleri vb.)
   ========================================================================= */
.zh-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 100;
  background: var(--zh-anthracite-900);
  color: #fff;
  border-left: 3px solid var(--zh-gold-400);
  border-radius: var(--zh-radius-md);
  box-shadow: var(--zh-shadow-luxe);
  padding: 0.85rem 1.25rem;
  transform: translateY(1rem);
  opacity: 0;
  transition: transform var(--zh-transition), opacity var(--zh-transition);
  pointer-events: none;
}
.zh-toast.zh-toast-visible {
  transform: translateY(0);
  opacity: 1;
}

/* =========================================================================
   9. ADMİN PANEL — YAN MENÜ / TABLO AKSANLARI
   ========================================================================= */
.zh-admin-sidebar-link.active {
  background: rgba(212, 175, 55, 0.12);
  color: var(--zh-gold-400);
  border-right: 2px solid var(--zh-gold-400);
}

.zh-admin-table tbody tr {
  transition: background-color var(--zh-transition);
}
.zh-admin-table tbody tr:hover {
  background-color: var(--zh-cream-200);
}

/* Durum rozetleri (sipariş durumları) */
.zh-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
.zh-status-pending     { background: #fef3c7; color: #92400e; }
.zh-status-confirmed   { background: #dbeafe; color: #1e40af; }
.zh-status-preparing   { background: #ede9fe; color: #5b21b6; }
.zh-status-shipped     { background: #e0f2fe; color: #075985; }
.zh-status-delivered   { background: #dcfce7; color: #166534; }
.zh-status-cancelled   { background: #fee2e2; color: #991b1b; }

/* =========================================================================
   10b. ÖNE ÇIKANLAR SLIDER + LIGHTBOX (anasayfa)
   ========================================================================= */
.zh-no-scrollbar::-webkit-scrollbar {
  display: none;
}
.zh-no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#zh-featured-grid .zh-card-image-wrap {
  cursor: zoom-in;
}

.zh-lightbox-img {
  animation: zh-lightbox-zoom-in 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes zh-lightbox-zoom-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

/* =========================================================================
   10. RESPONSIVE YARDIMCILAR
   ========================================================================= */
@media (max-width: 640px) {
  .zh-card:hover {
    transform: none; /* Mobilde hover-translate rahatsız edici olabilir */
  }
}