/* ═══════════════════════════════════════════════════════
   Webreta Ürün Vitrini – v4.0.0
   Desktop: Sol Sidebar + Grid  |  Mobil: Floating Panel
═══════════════════════════════════════════════════════ */
:root {
  --wruv-surface:      #ffffff;
  --wruv-bg:           #f9f8f6;
  --wruv-border:       #e8e4de;
  --wruv-border-light: #f0ece6;

  --wruv-text-main:    #1c1917;
  --wruv-text-mid:     #56514a;
  --wruv-text-muted:   #a09890;
  --wruv-text-light:   #c5bdb5;

  --wruv-accent:       #2c6b50;
  --wruv-accent-tint:  #ecf4ef;
  --wruv-accent-deep:  #1e5039;

  --wruv-sale:         #c0472e;
  --wruv-gold:         #9e7a2a;
  --wruv-gold-tint:    #faf4e5;

  --wruv-radius-card:  10px;
  --wruv-radius-ui:    8px;
  --wruv-radius-xs:    5px;

  --wruv-shadow:       0 1px 3px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.06);
  --wruv-shadow-hover: 0 2px 4px rgba(0,0,0,.04), 0 14px 36px rgba(0,0,0,.11);
  --wruv-shadow-panel: 0 8px 40px rgba(0,0,0,.16);

  --wruv-t: .2s cubic-bezier(.4,0,.2,1);
  --wruv-gap: clamp(12px,1.6vw,18px);
  --wruv-sidebar: 220px;
}
.wruv-wrapper *, .wruv-wrapper *::before, .wruv-wrapper *::after { box-sizing:border-box; }
.wruv-wrapper { font-family:inherit; color:var(--wruv-text-main); width:100%; }

/* ── Başlık ── */
.wruv-header { text-align:center; margin-bottom:clamp(20px,3vw,36px); }
.wruv-title  { font-size:clamp(1.4rem,2.6vw,2rem); font-weight:700; letter-spacing:-.025em; margin:0 0 6px; line-height:1.2; }
.wruv-subtitle { font-size:.9rem; color:var(--wruv-text-muted); margin:0; }

/* ══════════════════════════════════════════════════════
   ANA LAYOUT: Sidebar + Grid
══════════════════════════════════════════════════════ */
.wruv-layout {
  display:grid;
  grid-template-columns: var(--wruv-sidebar) 1fr;
  gap:28px;
  align-items:start;
}

/* ══════════════════════════════════════════════════════
   SOL SİDEBAR — Flatsome override'lı tam spesifisite
══════════════════════════════════════════════════════ */
.wruv-wrapper .wruv-sidebar {
  position: sticky !important;
  top: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Bölüm */
.wruv-wrapper .wruv-sidebar-box {
  padding: 0 0 20px !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.wruv-wrapper .wruv-sidebar-box + .wruv-sidebar-box {
  padding-top: 20px !important;
  border-top: 1px solid var(--wruv-border-light) !important;
}
.wruv-wrapper .wruv-sidebar-title {
  display: block !important;
  font-family: inherit !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--wruv-text-light) !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  line-height: 1 !important;
}

/* ── Arama ── */
.wruv-wrapper .wruv-search-wrap {
  position: relative !important;
  display: block !important;
}
.wruv-wrapper .wruv-search-input {
  display: block !important;
  width: 100% !important;
  font-family: inherit !important;
  font-size: .82rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--wruv-text-main) !important;
  background: var(--wruv-bg) !important;
  border: 1px solid var(--wruv-border) !important;
  border-radius: 7px !important;
  padding: 9px 32px 9px 12px !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color var(--wruv-t), background var(--wruv-t), box-shadow var(--wruv-t) !important;
  margin: 0 !important;
}
.wruv-wrapper .wruv-search-input::placeholder {
  color: var(--wruv-text-light) !important;
  opacity: 1 !important;
}
.wruv-wrapper .wruv-search-input:focus {
  border-color: var(--wruv-accent) !important;
  background: var(--wruv-surface) !important;
  box-shadow: 0 0 0 3px rgba(44,107,80,.1) !important;
}
.wruv-wrapper .wruv-search-icon {
  position: absolute !important;
  right: 10px !important; top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--wruv-text-light) !important;
  pointer-events: none !important;
  display: flex !important;
}
.wruv-wrapper .wruv-search-icon svg { width: 13px !important; height: 13px !important; display: block !important; }
.wruv-wrapper .wruv-search-clear {
  position: absolute !important;
  right: 8px !important; top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 2px !important;
  color: var(--wruv-text-light) !important;
  display: none !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.wruv-wrapper .wruv-search-clear svg { width: 13px !important; height: 13px !important; display: block !important; }
.wruv-wrapper .wruv-search-clear:hover { color: var(--wruv-text-mid) !important; background: none !important; }
.wruv-wrapper .wruv-search-wrap.has-value .wruv-search-icon  { display: none !important; }
.wruv-wrapper .wruv-search-wrap.has-value .wruv-search-clear { display: flex !important; }

/* ── Kategori listesi ── */
.wruv-wrapper .wruv-cat-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.wruv-wrapper .wruv-cat-list li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.wruv-wrapper .wruv-cat-list li::before {
  display: none !important;
  content: none !important;
}

.wruv-wrapper .wruv-cat-item-btn {
  /* Flatsome reset */
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  text-align: left !important;
  font-family: inherit !important;
  font-size: .84rem !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: var(--wruv-text-mid) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 10px 8px 12px !important;
  margin: 0 !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  transition: color .18s ease, background .18s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Sol accent çizgi */
.wruv-wrapper .wruv-cat-item-btn::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important; top: 18% !important; bottom: 18% !important;
  width: 3px !important;
  border-radius: 0 2px 2px 0 !important;
  background: var(--wruv-accent) !important;
  opacity: 0 !important;
  transform: scaleY(.3) !important;
  transition: opacity .18s ease, transform .18s ease !important;
}
.wruv-wrapper .wruv-cat-item-btn:hover {
  color: var(--wruv-text-main) !important;
  background: var(--wruv-bg) !important;
  text-decoration: none !important;
}
.wruv-wrapper .wruv-cat-item-btn.active {
  color: var(--wruv-accent-deep) !important;
  font-weight: 600 !important;
  background: var(--wruv-accent-tint) !important;
}
.wruv-wrapper .wruv-cat-item-btn.active::before {
  opacity: 1 !important;
  transform: scaleY(1) !important;
}

/* ok gizli */
.wruv-wrapper .wruv-cat-arrow { display: none !important; }

/* Sayı */
.wruv-wrapper .wruv-cat-count {
  display: inline-block !important;
  font-family: inherit !important;
  font-size: .68rem !important;
  font-weight: 400 !important;
  color: var(--wruv-text-light) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 0 auto !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
.wruv-wrapper .wruv-cat-item-btn.active .wruv-cat-count {
  color: var(--wruv-accent) !important;
}

/* Sidebar yoksa tam genişlik */
.wruv-wrapper .wruv-layout.wruv-no-sidebar {
  display: block !important;
  grid-template-columns: none !important;
}
.wruv-wrapper .wruv-layout.wruv-no-sidebar .wruv-content {
  width: 100% !important;
}
.wruv-content { min-width:0; }

/* Sonuç sayısı */
.wruv-results-bar {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.wruv-results-count { font-size:.78rem; color:var(--wruv-text-muted); }
.wruv-results-count strong { color:var(--wruv-text-main); font-weight:600; }

/* ══════════════════════════════════════════════════════
   GRID
══════════════════════════════════════════════════════ */
.wruv-grid { display:grid; gap:var(--wruv-gap); }
.wruv-cols-1{grid-template-columns:1fr}
.wruv-cols-2{grid-template-columns:repeat(2,1fr)}
.wruv-cols-3{grid-template-columns:repeat(3,1fr)}
.wruv-cols-4{grid-template-columns:repeat(4,1fr)}
.wruv-cols-5{grid-template-columns:repeat(5,1fr)}
.wruv-cols-6{grid-template-columns:repeat(6,1fr)}

/* ══════════════════════════════════════════════════════
   KART
══════════════════════════════════════════════════════ */
.wruv-card {
  background:var(--wruv-surface); border:1px solid var(--wruv-border);
  border-radius:var(--wruv-radius-card); overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--wruv-shadow);
  transition:transform var(--wruv-t), box-shadow var(--wruv-t), border-color var(--wruv-t);
  will-change:transform; animation:wrupIn .38s ease both;
}
@keyframes wrupIn {
  from{opacity:0;transform:translateY(12px)}
  to  {opacity:1;transform:translateY(0)}
}
.wruv-card:nth-child(1){animation-delay:.04s}.wruv-card:nth-child(2){animation-delay:.08s}
.wruv-card:nth-child(3){animation-delay:.12s}.wruv-card:nth-child(4){animation-delay:.16s}
.wruv-card:nth-child(5){animation-delay:.20s}.wruv-card:nth-child(6){animation-delay:.24s}
.wruv-card:nth-child(7){animation-delay:.28s}.wruv-card:nth-child(8){animation-delay:.32s}
.wruv-card:hover       { transform:translateY(-4px); box-shadow:var(--wruv-shadow-hover); border-color:#d5d0c8; }
.wruv-card.wruv-out-of-stock { opacity:.65; }
.wruv-card.wruv-hidden { display:none !important; }

/* Görsel */
.wruv-card-img-link { display:block; }
.wruv-card-img {
  position:relative; overflow:hidden;
  background:var(--wruv-bg);
  aspect-ratio:16/11;
}
.wruv-card-img img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
}
.wruv-card:hover .wruv-card-img img { transform:scale(1.04); }
.wruv-card-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(160deg,transparent 55%,rgba(0,0,0,.12));
  pointer-events:none;
}
.wruv-card-overlay {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(28,25,23,.22); backdrop-filter:blur(1px);
  opacity:0; transition:opacity var(--wruv-t);
}
.wruv-card:hover .wruv-card-overlay { opacity:1; }
.wruv-quick-view {
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; background:#fff; border-radius:50%;
  color:var(--wruv-text-main); text-decoration:none;
  box-shadow:0 2px 14px rgba(0,0,0,.2);
  transform:scale(.78); opacity:0;
  transition:transform var(--wruv-t), opacity var(--wruv-t);
}
.wruv-card:hover .wruv-quick-view { transform:scale(1); opacity:1; }
.wruv-quick-view svg { width:15px; height:15px; }

/* Rozet / stok */
.wruv-badge { position:absolute; top:10px; left:10px; z-index:2; font-family:inherit; font-size:.63rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border-radius:4px; padding:3px 7px; line-height:1.4; }
.wruv-badge-sale     { background:var(--wruv-sale); color:#fff; }
.wruv-badge-featured { background:var(--wruv-gold-tint); color:var(--wruv-gold); border:1px solid #dbc97a; }
.wruv-stock-label    { position:absolute; inset-inline:0; bottom:0; background:rgba(20,18,16,.55); color:rgba(255,255,255,.9); font-family:inherit; font-size:.63rem; font-weight:600; text-align:center; padding:5px; letter-spacing:.07em; text-transform:uppercase; backdrop-filter:blur(6px); }

/* Gövde */
.wruv-card-body { padding:14px 16px 16px; flex:1; display:flex; flex-direction:column; }
.wruv-card-cat  { font-size:.63rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--wruv-text-muted); margin:0 0 6px; }
.wruv-card-title { margin:0; font-size:.875rem; font-weight:600; line-height:1.45; color:var(--wruv-text-main); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wruv-card-title a { color:inherit; text-decoration:none; transition:color var(--wruv-t); }
.wruv-card-title a:hover { color:var(--wruv-accent); }
.wruv-card-desc { font-size:.76rem; color:var(--wruv-text-muted); line-height:1.6; margin:8px 0 0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; flex-grow:1; }
.wruv-card-desc p { margin:0; }

/* Rating */
.wruv-rating { display:flex; align-items:center; gap:1px; font-size:.7rem; margin-top:6px; }
.wruv-star { color:var(--wruv-border); line-height:1; }
.wruv-star.filled { color:#c9981a; }
.wruv-rating-count { color:var(--wruv-text-light); font-size:.67rem; margin-left:3px; }

/* Footer — divider yok, sadece boşluk */
.wruv-card-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:14px; padding-top:0; border-top:none; }
.wruv-price { flex:1; }
.wruv-price .price { font-family:inherit; font-size:.92rem; font-weight:700; color:var(--wruv-text-main); display:flex; flex-wrap:wrap; align-items:baseline; gap:5px; }
.wruv-price .price ins { text-decoration:none; color:var(--wruv-sale); }
.wruv-price .price del { font-size:.73rem; font-weight:400; opacity:.38; }
.wruv-price .amount { white-space:nowrap; }
.wruv-price-na { font-family:inherit; font-size:.72rem; font-weight:400; color:var(--wruv-text-light); font-style:italic; }

/* Buton */
.wruv-btn { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; background:none; border:none; cursor:pointer; flex-shrink:0; -webkit-tap-highlight-color:transparent; width:32px; height:32px; border-radius:var(--wruv-radius-ui); padding:0; transition:background var(--wruv-t), color var(--wruv-t), transform var(--wruv-t), box-shadow var(--wruv-t); }
.wruv-btn svg { width:15px; height:15px; flex-shrink:0; }
.wruv-btn-cart { background:var(--wruv-accent-tint); color:var(--wruv-accent); border:1px solid transparent; }
.wruv-btn-cart:hover { background:var(--wruv-accent); color:#fff; box-shadow:0 3px 10px rgba(44,107,80,.28); transform:scale(1.07); }
.wruv-btn-cart.adding { opacity:.55; pointer-events:none; }
.wruv-btn-cart.added  { background:#d2edd9; color:#287049; }
.wruv-btn-view { background:var(--wruv-bg); color:var(--wruv-text-muted); border:1px solid var(--wruv-border); }
.wruv-btn-view:hover { background:var(--wruv-accent-tint); color:var(--wruv-accent); border-color:var(--wruv-accent); }

/* Boş */
.wruv-empty { grid-column:1/-1; text-align:center; padding:56px 20px; color:var(--wruv-text-light); }
.wruv-empty svg { width:40px; height:40px; margin:0 auto 12px; display:block; stroke:var(--wruv-border); }
.wruv-empty p { font-size:.9rem; margin:0; }

/* Toast */
.wruv-toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(12px); background:var(--wruv-text-main); color:#fff; font-family:inherit; font-size:.84rem; padding:10px 20px; border-radius:50px; box-shadow:0 8px 28px rgba(0,0,0,.18); z-index:99999; opacity:0; pointer-events:none; transition:opacity .26s, transform .26s; white-space:nowrap; max-width:calc(100vw - 32px); }
.wruv-toast.show    { opacity:1; transform:translateX(-50%) translateY(0); }
.wruv-toast.success { background:var(--wruv-accent); }
.wruv-toast.error   { background:var(--wruv-sale); }

/* ══════════════════════════════════════════════════════
   MOBİL FLOATING PANEL
══════════════════════════════════════════════════════ */

/* FAB butonu */
.wruv-fab {
  display:none; /* sadece mobilde */
  position:fixed; bottom:22px; right:18px; z-index:900;
  width:52px; height:52px;
  background:var(--wruv-accent); color:#fff;
  border:none; border-radius:50%;
  box-shadow:0 4px 20px rgba(44,107,80,.42);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  align-items:center; justify-content:center;
  transition:transform .18s ease, box-shadow .18s ease;
}
.wruv-fab:hover { transform:scale(1.07); box-shadow:0 6px 24px rgba(44,107,80,.5); }
.wruv-fab svg { width:20px; height:20px; }
.wruv-fab .wruv-fab-icon-open  { display:block; }
.wruv-fab .wruv-fab-icon-close { display:none; }
.wruv-fab.open .wruv-fab-icon-open  { display:none; }
.wruv-fab.open .wruv-fab-icon-close { display:block; }
/* aktif filtre noktası */
.wruv-fab-dot {
  position:absolute; top:9px; right:9px;
  width:9px; height:9px; border-radius:50%;
  background:#ffd466; border:2px solid var(--wruv-accent);
  display:none;
}
.wruv-fab-dot.visible { display:block; }

/* Overlay */
.wruv-panel-overlay {
  display:none;
  position:fixed; inset:0; z-index:910;
  background:rgba(28,25,23,.42);
  backdrop-filter:blur(2px);
  animation:wruvFadeIn .2s ease;
}
@keyframes wruvFadeIn { from{opacity:0} to{opacity:1} }
.wruv-panel-overlay.open { display:block; }

/* Sliding Panel */
.wruv-mobile-panel {
  position:fixed; bottom:0; left:0; right:0; z-index:920;
  background:var(--wruv-surface);
  border-radius:18px 18px 0 0;
  box-shadow:var(--wruv-shadow-panel);
  padding:0 0 calc(env(safe-area-inset-bottom) + 16px);
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  max-height:82vh; overflow-y:auto;
}
.wruv-mobile-panel.open { transform:translateY(0); }

.wruv-panel-handle {
  display:flex; justify-content:center;
  padding:12px 0 8px;
}
.wruv-panel-handle::before {
  content:''; width:36px; height:4px;
  background:var(--wruv-border); border-radius:2px;
}

.wruv-panel-inner { padding:0 18px 8px; }
.wruv-panel-section { margin-bottom:20px; }
.wruv-panel-label {
  font-size:.67rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--wruv-text-muted); margin:0 0 9px;
}

/* Panel arama */
.wruv-panel-search-wrap { position:relative; }
.wruv-panel-search-input {
  font-family:inherit; font-size:.9rem;
  color:var(--wruv-text-main);
  background:var(--wruv-bg); border:1px solid var(--wruv-border);
  border-radius:var(--wruv-radius-ui); padding:10px 36px 10px 12px;
  width:100%; outline:none;
  transition:border-color var(--wruv-t), box-shadow var(--wruv-t);
}
.wruv-panel-search-input::placeholder { color:var(--wruv-text-light); }
.wruv-panel-search-input:focus { border-color:var(--wruv-accent); box-shadow:0 0 0 3px rgba(44,107,80,.1); background:var(--wruv-surface); }
.wruv-panel-search-icon { position:absolute; right:11px; top:50%; transform:translateY(-50%); color:var(--wruv-text-light); pointer-events:none; }
.wruv-panel-search-icon svg { width:15px; height:15px; display:block; }

/* Panel kategori butonları */
.wruv-panel-cats { display:flex; flex-direction:column; gap:2px; }
.wruv-panel-cat-btn {
  font-family:inherit; font-size:.875rem; font-weight:400;
  color:var(--wruv-text-mid); background:none; border:none; cursor:pointer;
  text-align:left; padding:9px 10px; border-radius:var(--wruv-radius-xs);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  transition:color var(--wruv-t), background var(--wruv-t);
  -webkit-tap-highlight-color:transparent;
}
.wruv-panel-cat-btn:hover { background:var(--wruv-bg); color:var(--wruv-text-main); }
.wruv-panel-cat-btn.active {
  background:var(--wruv-accent-tint); color:var(--wruv-accent-deep); font-weight:600;
}
.wruv-panel-cat-btn .wruv-cat-count {
  font-size:.7rem; color:var(--wruv-text-light);
  background:var(--wruv-bg); border:1px solid var(--wruv-border-light);
  border-radius:3px; padding:1px 6px; line-height:1.4; flex-shrink:0;
}
.wruv-panel-cat-btn.active .wruv-cat-count {
  background:rgba(44,107,80,.1); border-color:rgba(44,107,80,.2); color:var(--wruv-accent);
}

/* Uygula butonu */
.wruv-panel-apply {
  font-family:inherit; font-size:.875rem; font-weight:600;
  color:#fff; background:var(--wruv-accent); border:none;
  border-radius:var(--wruv-radius-ui); padding:12px;
  width:100%; cursor:pointer; margin-top:4px;
  transition:background var(--wruv-t), box-shadow var(--wruv-t);
}
.wruv-panel-apply:hover { background:var(--wruv-accent-deep); box-shadow:0 4px 14px rgba(44,107,80,.3); }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media(max-width:1100px){
  :root{ --wruv-sidebar:190px; }
}
@media(max-width:900px){
  :root{ --wruv-sidebar:170px; }
  .wruv-cols-4,.wruv-cols-5,.wruv-cols-6{ grid-template-columns:repeat(3,1fr); }
}

/* Tablet küçük + mobil: sidebar gizle, floating aç */
@media(max-width:720px){
  .wruv-layout{ grid-template-columns:1fr; gap:0; }
  .wruv-sidebar{ display:none; }
  .wruv-fab{ display:flex; }
  .wruv-cols-4,.wruv-cols-5,.wruv-cols-6,.wruv-cols-3{ grid-template-columns:repeat(2,1fr); }
  .wruv-card-body{ padding:12px 13px 14px; }
  .wruv-card-title{ font-size:.83rem; }
  .wruv-card-desc{ -webkit-line-clamp:2; }
}

@media(max-width:420px){
  :root{ --wruv-gap:10px; }
  .wruv-cols-2,.wruv-cols-3,.wruv-cols-4,.wruv-cols-5,.wruv-cols-6{ grid-template-columns:repeat(2,1fr); }
}