/* AFA Wholesale — storefront tasarım dili.
   Tüm renkler CSS değişkenleri üzerinden tanımlanır (R G B üçlüsü olarak,
   Tailwind'in rgb(var(--x) / <alpha-value>) opaklık deseniyle uyumlu olsun
   diye). Yeni bir bileşen eklerken burada tanımlı token'ları kullan, sabit
   hex/hsl değer yazma. */

:root {
  --bg: 248 250 252;        /* sayfa zemini (açık gri) */
  --surface: 255 255 255;   /* kart / panel yüzeyi (beyaz) */
  --border: 226 232 240;
  --text: 15 23 42;         /* koyu lacivert; koyu zeminler için de kullanılır */
  --muted: 100 116 139;
  --muted-2: 148 163 184;

  --primary: 124 58 237;    /* mor */
  --primary-2: 20 184 166;  /* turkuaz */
  --success: 22 163 74;
  --warning: 245 158 11;    /* kehribar */
  --danger: 220 38 38;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  /* Katmanlı gölge sistemi — tek gölge yerine üç ince katman (bkz. Apple
     tarzı derinlik dili). product-card/category-card/tooltip bunları kullanır. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 2px 4px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 4px 8px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.12);

  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px;
  --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-32: 32px; --fs-56: 56px;

  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Hareket eğrileri/süreleri — tüm geçişlerde bunlar kullanılır, sabit
     süre/eğri yazılmaz (bkz. hareket dili katmanı). */
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-instant: 100ms;
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;
}

[x-cloak] { display: none !important; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------- Mega menü ---------- */
#mega-menu[open] .mega-backdrop {
  position: fixed; inset: 0; z-index: 30; background: rgb(var(--text) / 0.15);
}
/* Panel, dar "Tüm Kategoriler" düğmesine değil, kategori çubuğunun tüm
   genişliğindeki (position: relative) üst satıra göre konumlanır — #mega-menu
   kasıtlı olarak "relative" DEĞİL, aksi halde panel düğme genişliğine sıkışır. */
#mega-menu .mega-panel {
  position: absolute; inset-inline-start: 0; top: 100%; z-index: 40;
  width: min(900px, 70vw);
  background: rgb(var(--surface)); border-bottom: 1px solid rgb(var(--border));
  box-shadow: var(--shadow-md);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
@media (max-width: 767px) {
  #mega-menu .mega-panel {
    position: fixed; inset: 0; top: 0; width: 100%; overflow-y: auto; border-radius: 0;
  }
}
.mega-sub-panel { display: none; }
.mega-sub-panel.active { display: block; }
.mega-top-item.active {
  background-color: rgb(var(--bg));
  color: rgb(var(--primary));
  font-weight: 600;
}

.nav-search-suggestions { display: none; }
.nav-search-suggestions.open { display: block; }

/* ---------- Rozetler (badge) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-11); font-weight: 600;
  padding: 2px 8px; border-radius: 999px; line-height: 1.5;
  white-space: nowrap;
}
.badge-moq { background: rgb(var(--text) / 0.85); color: rgb(var(--surface)); }
.badge-drop { background: rgb(var(--success)); color: rgb(var(--surface)); }
.badge-soon {
  background: rgb(var(--warning) / 0.12); color: rgb(var(--warning));
  border: 1px solid rgb(var(--warning) / 0.35);
}
.badge-similarity { background: rgb(var(--text) / 0.8); color: rgb(var(--surface)); }
.badge-neutral { background: rgb(var(--bg)); color: rgb(var(--muted)); }
.badge-best-seller { background: rgb(var(--warning)); color: rgb(var(--surface)); }

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r-md); font-size: var(--fs-14); font-weight: 600;
  padding: 10px 18px; white-space: nowrap;
  transition: filter var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--primary) / 0.35);
}
.btn-primary { background: rgb(var(--primary)); color: rgb(var(--surface)); }
.btn-primary:hover { background: rgb(var(--primary) / 0.9); }
.btn-outline {
  background: transparent; color: rgb(var(--text));
  border: 1px solid rgb(var(--border));
}
.btn-outline:hover { border-color: rgb(var(--primary)); color: rgb(var(--primary)); }
.btn-text {
  color: rgb(var(--primary)); font-weight: 600; font-size: var(--fs-14);
  transition: color var(--dur-fast) var(--ease-out);
}
.btn-text:hover { text-decoration: underline; }
.btn-text:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(var(--primary) / 0.35); border-radius: var(--r-sm); }
.btn-danger-outline {
  background: transparent; color: rgb(var(--danger));
  border: 1px solid rgb(var(--danger) / 0.4);
}
.btn-danger-outline:hover { background: rgb(var(--danger) / 0.06); }

/* ---------- Kart kabuğu ---------- */
.card-shell {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: var(--r-lg);
}

/* ---------- "Yakında" durumu ---------- */
.coming-soon-target { position: relative; }
.coming-soon-card { opacity: 0.7; transition: opacity var(--dur-fast) var(--ease-out); cursor: pointer; }
.coming-soon-card:hover { opacity: 0.85; }
.coming-soon-tooltip {
  position: absolute; z-index: 50; width: 260px;
  bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 10px;
  background: rgb(var(--text)); color: rgb(var(--surface));
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  padding: 14px 16px; font-size: var(--fs-13); line-height: 1.5;
  display: none;
}
.coming-soon-tooltip::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: rgb(var(--text));
}
/* Üst çubuktaki tetikleyiciler gibi sayfanın en üstüne yakın öğelerde
   balonu "üstte" açmak görünüm alanının dışına taşırır — bu öğeler için
   balon aşağı açılır. */
.coming-soon-tooltip.tooltip-below {
  bottom: auto; top: 100%; margin-bottom: 0; margin-top: 10px;
}
.coming-soon-tooltip.tooltip-below::after {
  top: auto; bottom: 100%;
  border-top-color: transparent; border-bottom-color: rgb(var(--text));
}
.coming-soon-tooltip.open { display: block; }
.coming-soon-tooltip a { color: rgb(var(--primary-2)); font-weight: 600; }
.coming-soon-tooltip a:hover { text-decoration: underline; }

/* ---------- Kategori kartları ---------- */
.category-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 12px 6px; border-radius: var(--r-md);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.category-card:active { transform: scale(0.99); transition-duration: var(--dur-instant); }
.category-card-thumb {
  width: 88px; height: 88px; border-radius: var(--r-md);
  background: rgb(var(--bg));
  display: flex; align-items: center; justify-content: center;
  padding: 10px; overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out);
}
.category-card:hover .category-card-thumb { transform: scale(1.05); }
.category-card-thumb img { width: 100%; height: 100%; object-fit: contain; }
.category-card-all .category-card-thumb {
  background: linear-gradient(135deg, rgb(var(--primary)), rgb(var(--primary-2)));
  color: rgb(var(--surface));
}

/* ---------- Ürün kartı ---------- */
.product-card {
  display: flex; flex-direction: column; height: 100%;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.product-card:active { transform: scale(0.99); transition-duration: var(--dur-instant); }
.product-card-media {
  position: relative; aspect-ratio: 1 / 1;
  background: rgb(var(--bg));
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.product-card-media img {
  /* scale-down: contain gibi davranır ama küçük görseli asla büyütmez —
     düşük çözünürlüklü görseller bulanık büyütülmek yerine küçük kalıp
     etrafında boşluk bırakır. */
  width: 100%; height: 100%; max-width: 100%; object-fit: scale-down;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
.product-card:hover .product-card-media img { transform: scale(1.04); }

/* Özellik kartları (ana sayfa "Neler Yapabilirsin?" ızgarası) — kart
   kabuğuna aynı hover/active mantığı, sadece interaktif (a/button) olanlara. */
.card-interactive {
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card-interactive:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-interactive:active { transform: scale(0.99); transition-duration: var(--dur-instant); }

/* ================================================================
   Hareket ve derinlik katmanı (Apple tarzı) — mevcut bileşenlerin
   ÜZERİNE eklenir, tasarım değişmez. bkz. storefront/js/motion.js
   ================================================================ */

html { scroll-behavior: smooth; }

/* ---------- Bulanık katmanlar ---------- */
.blur-surface {
  background: rgb(255 255 255 / 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.blur-surface-strong {
  background: rgb(var(--surface) / 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .blur-surface { background: rgb(var(--surface)); }
  .blur-surface-strong { background: rgb(var(--surface)); }
}
/* Mobilde blur pil ömrü için hafifletilir. */
@media (max-width: 767px) {
  .blur-surface { backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); }
  .blur-surface-strong { backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); }
}

/* ---------- Üst çubuk kaydırma davranışı ----------
   Üst çubuk ve kategori çubuğu İKİ AYRI, bağımsız sticky katman olarak
   dizilir (biri diğerinin normal akış çocuğu DEĞİL) — böylece biri
   yüksekliğini animasyonla değiştirirken diğeri asla üstüne binmez.
   Kategori çubuğunun "top" değeri üst çubuğun güncel yüksekliğini
   (72px / kaydırılmışsa 56px) izler. */
.site-header-bar-outer {
  position: sticky; top: 0; z-index: 20;
}
#site-header .site-header-bar { transition: height var(--dur-base) var(--ease-in-out); }
#site-header[data-scrolled="true"] .site-header-bar { height: 56px !important; }
#site-header[data-scrolled="true"] .site-header-bar-outer.blur-surface {
  background: rgb(255 255 255 / 0.92);
}
#site-header .site-logo-mark { transition: transform var(--dur-base) var(--ease-in-out); }
#site-header[data-scrolled="true"] .site-logo-mark { transform: scale(0.85); }

#category-bar {
  position: sticky; top: 72px; z-index: 19;
  transition: top var(--dur-base) var(--ease-in-out),
              transform var(--dur-base) var(--ease-in-out),
              opacity var(--dur-base) var(--ease-in-out);
}
#site-header[data-scrolled="true"] #category-bar { top: 56px; }
#category-bar[data-hidden="true"] { transform: translateY(-100%); opacity: 0; }

/* Kaydırılarak/bağlantıyla atlanan başlıklar çubukların altında kalmasın. */
main h1, main h2, main h3 { scroll-margin-top: 130px; }

/* ---------- Görünürlük animasyonu (IntersectionObserver ile) ---------- */
.reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---------- Görsel yüklenme durumu ---------- */
.img-fade {
  background: rgb(var(--bg));
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.img-fade.is-loaded { opacity: 1; }

/* ---------- Sayfa üstü ince ilerleme çubuğu ---------- */
#nav-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: rgb(var(--primary)); z-index: 100;
  transition: width var(--dur-slow) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  opacity: 0;
}
#nav-progress.is-active { opacity: 1; }

/* ---------- Buton içi yükleniyor göstergesi ---------- */
.btn-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------- Sayfa geçişi (View Transitions API) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: var(--dur-base);
  animation-timing-function: var(--ease-in-out);
}

/* ---------- Kurallar ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  #category-bar[data-hidden="true"] { transform: none; opacity: 1; }
}