/* ============================================================
   main.css — temel tipografi, layout, ortak bileşenler
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap&subset=latin,latin-ext');

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scrollbar-gutter:stable; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.no-scroll{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; transition:color .15s ease; }
button{ font-family:inherit; }
h1,h2,h3,h4,h5{ font-family:var(--font-head); font-weight:700; color:var(--primary-color); margin:0; line-height:1.18; letter-spacing:-.01em; }

/* container */
.container, .container-wide{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:18px;
}
.container-wide{ max-width:1340px; }

/* ---------- Bölüm başlıkları ---------- */
.section{ padding:38px 0; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:22px;
}
.section-head h2{ font-size:24px; }
.section-head .eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-body); font-weight:700; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent-color);
  margin-bottom:8px;
}
.section-head .eyebrow::before{
  content:""; width:18px; height:2px; background:var(--accent-color); border-radius:2px;
}
.section-head .more-link{
  font-weight:700; font-size:13.5px; color:var(--primary-color);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.section-head .more-link:hover{ color:var(--accent-color); }
.section-head .more-link i{ transition:transform .15s ease; }
.section-head .more-link:hover i{ transform:translateX(3px); }

/* ---------- Butonlar ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:14px;
  border:1px solid transparent; border-radius:var(--radius-sm);
  padding:11px 20px; cursor:pointer; line-height:1; white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-accent{ background:var(--accent-color); color:#fff; box-shadow:0 6px 16px rgba(242,106,27,.28); }
.btn-accent:hover{ background:var(--accent-color-600); color:#fff; }
.btn-primary{ background:var(--primary-color); color:#fff; }
.btn-primary:hover{ background:var(--primary-color-600); color:#fff; }
.btn-outline{ background:#fff; color:var(--primary-color); border-color:var(--seperator-dark-color); }
.btn-outline:hover{ border-color:var(--primary-color); background:var(--primary-tint); }
.btn-ghost{ background:transparent; color:var(--primary-color); }
.btn-ghost:hover{ background:var(--manu-hover-bg); }
.btn-block{ width:100%; }
.btn-lg{ padding:14px 26px; font-size:15px; }
.btn-sm{ padding:8px 14px; font-size:13px; }

/* ---------- Rozetler ---------- */
.badge-pill{
  display:inline-flex; align-items:center; gap:5px;
  font-weight:700; font-size:11.5px; letter-spacing:.01em;
  padding:4px 9px; border-radius:var(--radius-pill); line-height:1;
}
.badge-discount{ background:var(--accent-color); color:#fff; }
.badge-new{ background:var(--primary-color); color:#fff; }
.badge-stock{ background:#E9F6EE; color:var(--success-color); }
.badge-soft{ background:var(--primary-tint); color:var(--primary-color); }

/* ---------- Rating yıldızları ---------- */
.rating-stars{ display:inline-flex; align-items:center; gap:2px; color:var(--rating-stars-color); font-size:12px; }
.rating-stars .fa-star-o{ color:#D7DEE6; }
.rating-count{ font-size:12px; color:var(--muted); font-weight:600; }

/* ============================================================
   ÜRÜN KARTI — product-list-item  (en kritik bileşen)
   ============================================================ */
.product-list-item{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid var(--product-list-item-border-color);
  border-radius:var(--product-list-item-radius);
  overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  height:100%;
}
.product-list-item:hover{
  border-color:var(--primary-tint-strong);
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
}

/* görsel alanı 1:1 */
.pli-media{
  position:relative;
  aspect-ratio:1/1;
  background:
    radial-gradient(120% 120% at 50% 18%, #ffffff 0%, #F4F7FA 70%, #EDF1F6 100%);
  display:flex; align-items:center; justify-content:center;
  padding:14px;
}
.pli-media .ph-remote{ width:62%; height:82%; opacity:.92; }

/* üst etiketler */
.pli-flags{ position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:6px; z-index:2; }
.pli-fav{
  position:absolute; top:9px; right:9px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:#A9B6C3; border:1px solid var(--seperator-color);
  box-shadow:var(--shadow-xs); cursor:pointer;
  transition:color .15s ease, transform .12s ease;
}
.pli-fav:hover{ color:var(--accent-color); }
.pli-fav.active{ color:var(--danger-color); }
.pli-fav.active .fa::before{ content:"\f004"; }

/* gövde */
.pli-body{ display:flex; flex-direction:column; gap:9px; padding:13px 14px 15px; flex:1; }
.pli-brand{
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--accent-color);
}
.pli-title{
  font-size:var(--product-list-item-title-size);
  font-weight:var(--product-list-item-title-weight);
  color:var(--ink); line-height:1.35; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.7em;
}
.pli-title a:hover{ color:var(--primary-color); }
.pli-rating{ display:flex; align-items:center; gap:6px; }

/* uyumluluk çipi */
.pli-compat{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  font-size:11.5px; font-weight:600; color:var(--primary-color);
  background:var(--primary-tint); padding:4px 9px; border-radius:6px;
}
.pli-compat i{ color:var(--success-color); }

/* fiyat */
.pli-price-row{ display:flex; align-items:baseline; gap:9px; margin-top:auto; padding-top:3px; flex-wrap:wrap; line-height:1.2; }
.pli-price{
  font-family:var(--font-head);
  color:var(--product-list-item-price-color);
  font-weight:var(--product-list-item-price-weight);
  font-size:var(--product-list-item-price-size);
  letter-spacing:-.01em; white-space:nowrap;
}
.pli-price-del{
  color:var(--product-list-item-price-del-color);
  font-weight:var(--product-list-item-price-del-weight);
  font-size:var(--product-list-item-price-del-size);
  text-decoration:line-through;
  text-decoration-color:var(--product-list-item-price-del-line-color);
  white-space:nowrap;
}
.pli-installment{ font-size:11.5px; color:var(--muted); font-weight:600; }

/* aksiyon */
.pli-actions{ display:flex; gap:8px; margin-top:4px; }
.pli-actions .btn{ flex:1; }

/* stokta yok */
.product-list-item-out-of-stock .pli-media,
.product-list-item-out-of-stock .pli-body{ opacity:.55; }
.product-list-item-out-of-stock .pli-actions .btn-accent{
  background:#E7ECF1; color:var(--muted-soft); box-shadow:none; pointer-events:none;
}
.pli-soldout-tag{ background:#5C6B7A; color:#fff; }

/* ---------- yardımcılar ---------- */
.text-muted{ color:var(--muted); }
.divider{ height:1px; background:var(--seperator-color); border:0; margin:0; }
.skip-link{ position:absolute; left:-9999px; }
@media (max-width:991px){ .section{ padding:30px 0; } .section-head h2{ font-size:21px; } }
@media (max-width:575px){ .section-head h2{ font-size:19px; } }