/* =========================================================
   TATLICI MUSTAFA — components.css
   Tekrar kullanılabilir bileşenler: butonlar, ripple, badge vb.
   ========================================================= */

/* Global ikon boyutu: render_icon() ile üretilen <svg>'ler varsayılan tarayıcı
   boyutuna (300x150) düşmesin diye taban kural. Daha spesifik seçiciler
   (örn. .service-card__icon svg) bunu ezmeye devam eder. */
.icon { width: 22px; height: 22px; flex-shrink: 0; display: inline-block; }
.icon--sm { width: 16px; height: 16px; }

.btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 28px; border-radius: 999px; font-weight: 600; font-size: 15px;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
    white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn--lg { padding: 16px 34px; font-size: 16px; }
.btn--block { width: 100%; }

.btn--gold { background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); color: var(--paper); box-shadow: 0 12px 30px -10px rgba(198,146,46,0.6); }
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(198,146,46,0.75); }

.btn--outline { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper); }

.btn--outline-light, .btn--ghost-light { background: transparent; border: 1.5px solid rgba(255,255,255,0.5); color: var(--paper); }
.btn--outline-light:hover, .btn--ghost-light:hover { background: rgba(255,255,255,0.12); border-color: var(--paper); }

.btn--whatsapp-solid { background: #25D366; color: #fff; }
.btn--whatsapp-solid:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(37,211,102,0.6); }

.btn__ripple {
    position: absolute; border-radius: 50%; background: rgba(255,255,255,0.5); pointer-events: none;
    transform: scale(0); animation: rippleAnim 0.6s ease-out;
}
@keyframes rippleAnim { to { transform: scale(2.4); opacity: 0; } }

.magnetic { will-change: transform; }

/* Loading overlay (ilk sayfa yükleme animasyonu) */
.loader {
    position: fixed; inset: 0; z-index: 5000; background: var(--ink);
    display: grid; place-items: center; transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}
.loader__mark {
    width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15);
    border-top-color: var(--gold); animation: loaderSpin 0.9s linear infinite;
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }
.loader.is-hidden { opacity: 0; visibility: hidden; }

/* Breadcrumb */
.breadcrumb { padding: calc(var(--nav-h) + 24px) 0 12px; }
.breadcrumb__list { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--gray); }
.breadcrumb__list a { color: var(--gray); }
.breadcrumb__list a:hover { color: var(--gold-dark); }
.breadcrumb__list span[aria-current] { color: var(--ink); font-weight: 600; }