/* =============================================================
   online.css — "Online'a Özel" satış bölümü + YENİDEN KULLANILABİLİR ürün kartı.
   Ayrı dosya: kart (.mcy-online__card) başka sayfalarda da kullanılabilsin diye
   kart kuralları .mcy-online atasına BAĞIMLI DEĞİL (tek başına taşınabilir).
   Bölüm yerleşimi (.mcy-online / __inner / __head / __grid / __trust) ayrıdır.
   Sıcak kâğıt + tek kırmızı; hairline ayraç YOK, dot eyebrow YOK.
   ============================================================= */

/* ---------- Bölüm yerleşimi ---------- */
.mcy-online {
  --o-ease: cubic-bezier(0.22, 1, 0.36, 1);
  display: flex; justify-content: center; background: var(--bg-color);
  padding: clamp(48px, 7vh, 96px) clamp(16px, 3vw, 40px);
}
.mcy-online .mcy-online__inner { width: 100%; max-width: 1280px; }
.mcy-online .mcy-online__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 18px 56px; margin-bottom: clamp(28px, 3.4vw, 46px); }
.mcy-online .mcy-online__eyebrow { display: block; margin-bottom: 14px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--primary-color); }
.mcy-online .mcy-online__title { margin: 0; font-family: "Poppins", sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.04; letter-spacing: -0.04em; color: var(--text-dark-dark); text-wrap: balance; }
.mcy-online .mcy-online__title b { color: var(--primary-color); }
.mcy-online .mcy-online__headside { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 44ch; }
.mcy-online .mcy-online__intro { margin: 0; font-size: clamp(0.92rem, 1.1vw, 1rem); line-height: 1.55; color: rgba(28, 22, 18, 0.6); }
.mcy-online .mcy-online__all { display: inline-flex; align-items: center; gap: 8px; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 14px; color: var(--text-dark); text-decoration: none; transition: color 0.2s var(--o-ease), gap 0.2s var(--o-ease); }
.mcy-online .mcy-online__all:hover { color: var(--primary-color); gap: 12px; }
.mcy-online .mcy-online__all .mcy-ico { width: 15px; height: 15px; }
.mcy-online .mcy-online__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.4vw, 20px); }
.mcy-online .mcy-online__more { display: flex; justify-content: center; margin-top: clamp(30px, 3.6vw, 48px); }
.mcy-online .mcy-online__morebtn { min-height: 54px; padding: 8px 30px 8px 8px; font-size: 15px; font-weight: 600; box-shadow: 0 18px 32px -16px rgba(234, 29, 38, 0.62); }
.mcy-online .mcy-online__morebtn .mcy-btn__ico { padding: 9px; }
.mcy-online .mcy-online__morebtn .mcy-btn__ico .mcy-ico { width: 17px; height: 17px; }
.mcy-online .mcy-online__trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 34px; margin-top: clamp(20px, 2.4vw, 30px); }
.mcy-online .mcy-online__titem { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: rgba(28, 22, 18, 0.6); }
.mcy-online .mcy-online__titem .mcy-ico { width: 17px; height: 17px; color: var(--primary-color); }

/* ---------- Yeniden kullanılabilir ürün kartı (ata bağımsız) ---------- */
.mcy-online__card {
  --o-ease: cubic-bezier(0.22, 1, 0.36, 1);
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--card-bg); border-radius: 18px; padding: 10px;
  box-shadow: 0 26px 50px -40px rgba(28, 22, 18, 0.4);
  transition: transform 0.4s var(--o-ease), box-shadow 0.4s var(--o-ease);
}
.mcy-online__card:hover { transform: translateY(-6px); box-shadow: 0 54px 92px -46px rgba(28, 22, 18, 0.5); }
.mcy-online__media { position: relative; overflow: hidden; border-radius: 15px; aspect-ratio: 4 / 3; background: #f3efe9; }
.mcy-online__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--o-ease); }
.mcy-online__card:hover .mcy-online__media img { transform: scale(1.05); }
.mcy-online__badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(252, 251, 251, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--text-dark-dark); box-shadow: 0 10px 22px -14px rgba(28, 22, 18, 0.5); }
.mcy-online__badge i { width: 7px; height: 7px; border-radius: 999px; background: #22a447; }
.mcy-online__body { display: flex; flex-direction: column; flex: 1; padding: 14px 7px 7px; }
.mcy-online__brand { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary-color); }
.mcy-online__name { margin-top: 5px; font-family: "Poppins", sans-serif; font-weight: 600; font-size: clamp(0.98rem, 1.05vw, 1.08rem); letter-spacing: -0.02em; color: var(--text-dark-dark); line-height: 1.25; }
.mcy-online__spec { margin-top: 5px; font-size: 12px; line-height: 1.4; color: rgba(28, 22, 18, 0.52); }
.mcy-online__foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mcy-online__price { font-family: "Poppins", sans-serif; font-weight: 700; font-size: clamp(1.1rem, 1.25vw, 1.3rem); letter-spacing: -0.025em; color: var(--text-dark-dark); }
.mcy-online__unit { font-size: 11.5px; font-weight: 500; color: rgba(28, 22, 18, 0.5); }
.mcy-online__go { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 999px; background: rgba(28, 22, 18, 0.06); color: var(--text-dark-dark); transition: background-color 0.25s var(--o-ease), color 0.25s var(--o-ease), transform 0.25s var(--o-ease); }
.mcy-online__card:hover .mcy-online__go { background: var(--primary-color); color: var(--text-light); transform: translate(2px, -2px); }
.mcy-online__go .mcy-ico { width: 16px; height: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .mcy-online .mcy-online__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .mcy-online .mcy-online__grid { grid-template-columns: repeat(2, 1fr); }
  .mcy-online .mcy-online__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 460px) {
  .mcy-online .mcy-online__grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
  .mcy-online .mcy-online__trust { gap: 10px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .mcy-online__card:hover { transform: none; }
  .mcy-online__card:hover .mcy-online__media img { transform: none; }
  .mcy-online__card:hover .mcy-online__go { transform: none; }
}