/* ============================================================
   HERBAL PALACE — ÜRÜN KARTI alt aksiyon alanı · yalnız CSS
   ------------------------------------------------------------
   Kapsam: SADECE statik (hardcoded) görseller — "Sepete Ekle"
   butonu, fav/karşılaştır ikonları, "Stokta Yok" bandı ve
   "Yeni Ürün" şeridi. Bunların renkleri admin panelinden GELMEZ
   (style.css içinde sabittir), bu yüzden burada herbal yeşiline
   çekmek admin ayarlarını BOZMAZ.
   DOKUNULMAYANLAR (admin-driven): kutu arkaplan/çerçeve/radius/
   gölge, yıldız renkleri, fiyat/eski fiyat/marka renkleri,
   indirim rozeti — bunlar category_detail/stil.php'den gelir.
   Geri almak: header_libs.php'den bu dosyanın <link>'ini sil.
   ============================================================ */

/* ---------- 1) "SEPETE EKLE" butonu — herbal yeşil, tek satır, satırı dolduran CTA ---------- */
/* Buton (veya onu saran form) satırdaki boş alanı kaplasın → metin tek satır kalır */
.cat-detail-products-box-cart-2 > form,
.cat-detail-products-box-cart-2 > button {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 10px;
}
.cat-detail-products-box-cart-2 button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: normal;          /* sığmazsa en fazla 2 satıra sarsın, KESİLMESİN */
    line-height: 1.2;
    text-align: center;
    background-color: #2f7d57;
    border-radius: 8px;
    padding: 9px 12px;
    margin-right: 0;
    font-weight: 600;
    letter-spacing: .2px;
    box-shadow: 0 4px 12px rgba(47, 125, 87, .16);
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.cat-detail-products-box-cart-2 button:hover {
    background-color: #25624a;
    box-shadow: 0 6px 16px rgba(47, 125, 87, .26);
    transform: translateY(-1px);
}
.cat-detail-products-box-cart-2 button i { margin-right: 7px; font-size: 14px; flex: 0 0 auto; }

/* ---------- 2) Fav (kalp) ikonu — dolgu yerine yumuşak çerçeve ---------- */
.cat-detail-products-box-cart-2 a {
    background-color: #f4f6f4;
    border: 1px solid #e4e9e4;
    color: #6b756f;
    border-radius: 8px;
    padding: 6px 11px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.cat-detail-products-box-cart-2 a:hover {
    background-color: #2f7d57;
    border-color: #2f7d57;
    color: #fff;
}

/* ---------- 3) Karşılaştır ikonu — aynı sade stil (compare-href !important taşıdığı için eşliyoruz) ---------- */
.cat-detail-products-box-cart-2 .compare-href {
    background-color: #f4f6f4 !important;
    border: 1px solid #e4e9e4 !important;
    color: #6b756f !important;
}
.cat-detail-products-box-cart-2 .compare-href:hover {
    background-color: #2f7d57 !important;
    border-color: #2f7d57 !important;
    color: #fff !important;
}

/* ---------- 4) Üstte beliren ikon-aksiyon (aksiyon tip 1) — mavi yerine yeşil ---------- */
.cat-detail-products-box-cart-1 button { color: #2f7d57; }
.cat-detail-products-box-cart-1 button:hover { background-color: #2f7d57; color: #fff; }

/* ---------- 5) "Stokta Yok" bandı — sert kırmızı yerine yumuşak, yuvarlak ---------- */
/* Yalnız kart içindeki banda dokunur; global .button-red (silme vb.) etkilenmez. */
.cat-detail-products-box-fiyat-out.button-red {
    background-color: #fff1f2;
    border: 1px solid #ffd8dc;
    color: #e0566a;
    border-radius: 8px;
    font-weight: 600;
}

/* ---------- 6) "YENİ ÜRÜN" şeridi — mavi yerine herbal yeşil ---------- */
.ribbon span {
    background: #2f7d57;
    background: linear-gradient(135deg, #348a60 0%, #25624a 100%);
}
.ribbon span::before {
    border-left-color: #25624a;
    border-top-color: #25624a;
}
.ribbon span::after {
    border-right-color: #25624a;
    border-top-color: #25624a;
}

/* ---------- 7) Kart — hover'da hafif yükselme (sadece dönüşüm; gölge/renk admin'de) ---------- */
.cat-detail-products-box {
    transition: transform .18s ease;
}
.cat-detail-products-box:hover {
    transform: translateY(-3px);
}

/* ---------- 8) "Yukarı Çık" (#return-to-top) — modern derinlik + hareket ----------
   NOT: arka plan/ikon rengi, radius ve alt konum ADMIN'den gelir (site-main-stil.php:
   totop_bg / totop_icon / totop_radius / totop_bottom). Burada SADECE gölge, yumuşak
   geçiş ve hover hareketi ekleniyor — admin özelliklerinin hiçbiri ezilmez. */
#return-to-top {
    background-color: #2f7d57;     /* "Sepete Ekle" ile aynı yeşil (admin totop_bg'yi ezer) */
    border-radius: 14px;          /* 2. resimdeki yuvarlak köşe (admin totop_radius'u ezer) */
    box-shadow: 0 6px 20px rgba(47, 125, 87, .28);
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
#return-to-top:hover {
    background-color: #25624a;     /* "Sepete Ekle" hover yeşili */
    transform: translateY(-4px) scale(1.06);
    box-shadow: 0 12px 28px rgba(47, 125, 87, .38);
}
#return-to-top i,
#return-to-top:hover i { color: #ffffff; }   /* ok beyaz (admin totop_icon'u ezer) */
/* İkonu butonun TAM ortasına sabitle (base'deki left:16px/top:13px konumlamayı ezer) */
#return-to-top i {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    line-height: 1;
    transform: translate(-50%, -50%);
    transition: transform .2s ease;
}
#return-to-top:hover i {
    top: 50%;
    transform: translate(-50%, -50%) translateY(-3px);   /* ortalı kalır, hover'da hafif yukarı */
}

/* ---------- 9) FOOTER LOGO — küçült (base'de max-width:80% → çok büyük) ---------- */
.footer-module-box-logo img {
    max-width: 200px !important;
    width: auto;
    height: auto;
}