/**
 * Üyelik iç-link bileşeni - /herbalife-uyelik sayfasına bağlamsal SEO/CRO linki.
 *
 * İki varyant:
 *   .uic--aside  → ürün sayfası satın-alma kolonunda ince satır (Premium notu yanı)
 *   .uic--strip  → kategori sayfası page-header altında tam-genişlik şerit
 *
 * Scope: .uic- prefix; başka section'lara sızmaz. Düşük görsel ağırlık -
 * sayfanın asıl CTA'sıyla (Sepete Ekle) yarışmaz.
 */

.uic {
    --uic-green: #0d5440;
    --uic-green-dark: #0a4a39;
    --uic-gold: #b8860b;
}

/* ---- aside varyant: ürün kolonunda tek satır ---- */
.uic--aside {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.85rem 0 0;
    padding: 0.7rem 0.85rem;
    background: linear-gradient(180deg, #f7fbf7 0%, #eef7f0 100%);
    border: 1px solid #d8ecdd;
    border-radius: 12px;
    font-size: 0.86rem;
    line-height: 1.45;
    color: #334155;
}
.uic--aside .uic__ikon {
    color: var(--uic-gold);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.uic--aside .uic__link {
    color: var(--uic-green);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.uic--aside .uic__link:hover {
    color: var(--uic-green-dark);
    text-decoration: underline;
}

/* ---- strip varyant: kategori page-header altı ---- */
.uic--strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.1rem;
    margin: 1.25rem 0 0;
    padding: 0.9rem 1.15rem;
    background:
        radial-gradient(600px 200px at 100% 0%, rgba(184,134,11,0.08), transparent 60%),
        linear-gradient(135deg, #f3faf4 0%, #e9f5ec 100%);
    border: 1px solid #d8ecdd;
    border-radius: 14px;
}
.uic--strip .uic__ikon {
    color: var(--uic-gold);
    font-size: 1.35rem;
    flex-shrink: 0;
}
.uic--strip .uic__metin {
    flex: 1 1 320px;
    min-width: 0;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #334155;
}
.uic--strip .uic__metin strong {
    color: #0f172a;
    font-weight: 700;
}
.uic--strip .uic__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
    padding: 0.6rem 1.2rem;
    background: linear-gradient(135deg, var(--uic-green) 0%, var(--uic-green-dark) 100%);
    color: #fde68a;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    box-shadow: 0 8px 20px -12px rgba(7, 59, 47, 0.5);
    transition: transform 120ms ease, box-shadow 150ms ease, color 120ms ease;
}
.uic--strip .uic__btn:hover {
    transform: translateY(-1px);
    color: #fef3c7;
    text-decoration: none;
    box-shadow: 0 12px 24px -12px rgba(7, 59, 47, 0.6);
}
.uic--strip .uic__btn i {
    color: #facc15;
}

@media (max-width: 575.98px) {
    .uic--strip {
        padding: 0.85rem 1rem;
    }
    .uic--strip .uic__btn {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .uic--strip .uic__btn { transition: none; }
}