/* =============== Arsemia – Product Card (PC) =============== */
:root{
  --ars-bg:#ffffff;
  --ars-text:#111827;
  --ars-muted:#6b7280;
  --ars-line:#e5e7eb;
  --ars-soft:#f8fafc;
  --ars-brand:#1d4ed8;  /* Arsemia mavi */
  --ars-accent:#ff6a00; /* Turuncu vurgu */
  --ars-danger:#e11d48; /* İndirim rozeti */
  --ars-success:#16a34a;/* Yeşil fiyat */
}

.ars-card{
  background:var(--ars-bg);
  border:1px solid var(--ars-line);
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:box-shadow .2s ease, transform .12s ease;
}
.ars-card:hover{
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  transform:translateY(-1px);
}

/* Görsel */
.ars-img{
  display:block;
  background:var(--ars-soft);
  aspect-ratio: 1 / 1;
  overflow:hidden;
}
.ars-img img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .25s ease;
}
.ars-card:hover .ars-img img{ transform:scale(1.03); }

/* İçerik */
.ars-body{
  display:flex; flex-direction:column; gap:10px;
  padding:12px;
  color:var(--ars-text);
}
.ars-cat{
  font-size:12px; color:var(--ars-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ars-title{
  font-size:15px; line-height:1.3; margin:0;
}
.ars-title a{
  color:var(--ars-text); text-decoration:none;
}
.ars-title a:hover{ text-decoration:underline; }

/* Fiyat Bloğu */
.ars-price-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.ars-price{
  font-weight:800; color:var(--ars-success); font-size:16px;
}
.ars-old{
  font-size:13px; color:var(--ars-muted); text-decoration:line-through;
}
.ars-off{
  font-size:12px; color:#fff; background:var(--ars-danger);
  padding:2px 8px; border-radius:999px; line-height:18px;
}

/* Aksiyonlar */
.ars-actions{
  margin-top:6px;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.ars-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; height:36px; padding:0 14px;
  border-radius:10px; border:1px solid var(--ars-line);
  background:#fff; color:var(--ars-text); text-decoration:none;
  font-weight:600; font-size:14px; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
  user-select:none;
}
.ars-btn:hover{ background:var(--ars-soft); }
.ars-btn:active{ transform:translateY(1px); }

/* Varyasyonlar */
.ars-btn.primary{
  background:var(--ars-accent);
  border-color:var(--ars-accent);
  color:#fff;
}
.ars-btn.primary:hover{ filter:brightness(.96); }

.ars-btn.ghost{
  background:#fff; color:var(--ars-brand);
  border-color:var(--ars-brand);
}
.ars-btn.ghost:hover{
  background:rgba(29,78,216,.06);
}

/* Grid uyumu: 2-3 sütun kart dizilişinde nefes payı */
.ars-card + .ars-card{ /* yalnızca sıkı listelerde görsel ayrım için opsiyonel */ }

/* Renk/kontrast – koyu moda otomatik uyum */
@media (prefers-color-scheme: dark){
  :root{
    --ars-bg:#0b1220;
    --ars-text:#e5e7eb;
    --ars-muted:#9aa7b0;
    --ars-line:#1f2937;
    --ars-soft:#0f172a;
  }
  .ars-btn{ background:#0b1220; color:#e5e7eb; border-color:#1f2937; }
  .ars-btn.ghost{ background:#0b1220; color:#93c5fd; border-color:#273449; }
  .ars-card{ border-color:#1f2937; }
  .ars-img{ background:#0f172a; }
}

/* Küçük ekranlar için başlık ve buton optimizasyonu */
@media (max-width: 640px){
  .ars-title{ font-size:14px; }
  .ars-price{ font-size:15px; }
  .ars-btn{ height:34px; padding:0 12px; font-size:13px; }
}