/* ==========================================================================
   components.css — Buton, rozet, ürün kartı, form, chip, sayfalama
   ========================================================================== */

/* ---------------------------------------------------------------- Butonlar */
.btn {
  --_bg: var(--ink);
  --_fg: var(--ink-on);
  --_bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
  line-height: 1;
  padding: 0.95em 1.6em;
  min-height: 48px;             /* dokunma hedefi */
  border-radius: var(--radius-pill);
  background: var(--_bg);
  color: var(--_fg);
  border: 1.5px solid var(--_bd);
  cursor: pointer;
  text-align: center;
  transition: transform var(--t-fast) var(--ease),
              background var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* Birincil (koyu) */
.btn--primary:hover { --_bg: #000; --_bd: #000; color: #fff; }

/* Teal (marka aksiyonu) */
.btn--teal {
  --_bg: var(--teal); --_fg: #fff; --_bd: var(--teal);
}
.btn--teal:hover { --_bg: var(--teal-press); --_bd: var(--teal-press); color: #fff; }

/* Outline */
.btn--outline {
  --_bg: transparent; --_fg: var(--ink); --_bd: var(--line-strong);
}
.btn--outline:hover { --_bg: var(--ink); --_fg: #fff; --_bd: var(--ink); color: #fff; }

/* Ghost (çizgisiz) */
.btn--ghost {
  --_bg: transparent; --_fg: var(--ink); --_bd: transparent;
  padding-inline: 0.6em;
}
.btn--ghost:hover { --_bg: var(--mist-2); transform: none; color: var(--ink); }

/* Açık zemin üstünde ters (koyu bölümlerde) */
.btn--inverse {
  --_bg: #fff; --_fg: var(--ink); --_bd: #fff;
}
.btn--inverse:hover { --_bg: transparent; --_fg: #fff; color: #fff; }

/* Boyutlar */
.btn--sm { font-size: var(--fs-xs); padding: 0.7em 1.1em; min-height: 40px; }
.btn--lg { font-size: var(--fs-base); padding: 1.05em 2em; min-height: 54px; }
.btn--block { display: flex; width: 100%; }

.btn[disabled], .btn.is-loading { opacity: 0.55; pointer-events: none; }

/* ------------------------------------------------------------------ Rozet */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 0.42em 0.7em;
  border-radius: var(--radius-xs);
  line-height: 1;
  white-space: nowrap;
}
.badge--sale  { background: var(--coral); color: #fff; }       /* indirim */
.badge--new   { background: var(--ink); color: #fff; }          /* yeni */
.badge--out   { background: var(--mist-2); color: var(--ink-3); }
.badge--teal  { background: var(--teal-tint); color: var(--teal-press); }

/* ------------------------------------------------------------ Ürün kartı */
/* İMZA etkileşim: kart kalkar, görsel hafif zoom, ikincil görsel hover'da */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
.product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--mist);
  isolation: isolate;
}
.product-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-base) var(--ease);
}
.product-card__img--hover {
  position: absolute; inset: 0;
  opacity: 0;
}
.product-card:hover .product-card__img--main  { transform: scale(1.04); opacity: 0; }
.product-card:hover .product-card__img--hover { opacity: 1; transform: scale(1.04); }
/* ikincil görsel yoksa: ana görsel sadece zoom yapsın */
.product-card:hover .product-card__img--main:only-child { opacity: 1; }

.product-card__badges {
  position: absolute;
  top: var(--sp-3); left: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2);
  z-index: 2;
}
/* Hızlı aksiyon (favori) — köşe */
.product-card__quick {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  z-index: 2;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.92);
  border-radius: var(--radius-pill);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), color var(--t-fast) var(--ease);
}
.product-card:hover .product-card__quick,
.product-card:focus-within .product-card__quick { opacity: 1; transform: translateY(0); }
.product-card__quick:hover { color: var(--teal); }
.product-card__quick svg { width: 18px; height: 18px; }

.product-card__body {
  padding: var(--sp-4) var(--sp-1) 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.product-card__cat {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}
.product-card__title {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card__title a { color: inherit; }
.product-card__title a:hover { color: var(--teal); }
/* tüm kartı tıklanabilir yapan görünmez katman (title linki kapsar) */
.product-card__title a::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}

.product-card__price {
  display: flex; align-items: baseline; gap: var(--sp-2);
  margin-top: 2px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-size: var(--fs-md);
}
.product-card__price del {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-3);
}
.product-card__price ins { text-decoration: none; color: var(--coral); }

/* WooCommerce yıldız mini */
.product-card__rating {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); color: var(--ink-3);
}
.product-card__rating .stars { color: var(--teal-soft); letter-spacing: 1px; }

/* ----------------------------------------------------------- Kategori kartı */
.cat-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--mist-2);
  isolation: isolate;
}
.cat-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.cat-card:hover .cat-card__img { transform: scale(1.05); }
.cat-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,22,22,0) 38%, rgba(15,22,22,0.72) 100%);
  z-index: 1;
}
.cat-card__label {
  position: absolute;
  left: var(--sp-5); bottom: var(--sp-5); right: var(--sp-5);
  z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
}
.cat-card__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  letter-spacing: var(--tracking-snug);
  color: #fff;
}
.cat-card__count {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.82);
}
.cat-card__arrow {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-pill);
  color: #fff;
  backdrop-filter: blur(4px);
  transition: background var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.cat-card:hover .cat-card__arrow { background: var(--teal); border-color: var(--teal); transform: translateX(3px); }
.cat-card__arrow svg { width: 18px; height: 18px; }

/* Görseli olmayan kategori için zarif fallback */
.cat-card--placeholder {
  background: linear-gradient(135deg, var(--mist-2), var(--teal-tint));
}
.cat-card--placeholder::after { opacity: 0.35; }
.cat-card--placeholder .cat-card__name,
.cat-card--placeholder .cat-card__count { color: var(--ink); }
.cat-card--placeholder .cat-card__arrow { background: var(--ink); border-color: var(--ink); color:#fff; }

/* --------------------------------------------------------------- Formlar */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.input, .textarea, select.input {
  width: 100%;
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.85em 1em;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .textarea:focus, select.input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-tint);
}
.textarea { min-height: 120px; resize: vertical; }

/* ------------------------------------------------------------ Chip / etiket */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.5em 1em;
  transition: all var(--t-fast) var(--ease);
}
a.chip:hover { color: var(--teal-press); background: var(--teal-tint); border-color: var(--teal-tint-2); }

/* ---------------------------------------------------- Güven/değer şeridi */
.trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.trust-item {
  display: flex; align-items: center; gap: var(--sp-3);
}
.trust-item__icon {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--teal-tint);
  color: var(--teal-press);
}
.trust-item__icon svg { width: 24px; height: 24px; }
.trust-item__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-sm); letter-spacing: var(--tracking-snug); }
.trust-item__desc  { font-size: var(--fs-xs); color: var(--ink-3); }

@media (max-width: 820px) {
  .trust-row { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}
@media (max-width: 460px) {
  .trust-row { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- Boş durum */
.empty-state {
  text-align: center;
  padding: var(--sp-8) var(--gutter);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--ink-2);
  background: var(--mist);
}
.empty-state__title { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--ink); margin-bottom: var(--sp-2); }