/* Gömülü ikon seti — kural.md K16. Boyutlar yalnız 16 / 24 / 32 (token iconSm / iconMd / iconLg). */

/* Sprite kapsayıcısı: yer kaplamaz, görünmez. display:none KULLANMA (kırpma yolları bozulur). */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Tek renkli ikonlar: renk kapsayıcının color'ından gelir.
   Çizgi kalınlığı ekranda her boyutta 2px kalsın diye birime göre ayarlanır (24px ızgara). */
.icon      { width: 24px; height: 24px; flex: none; vertical-align: middle; color: inherit; stroke-width: 2; }
.icon--16  { width: 16px; height: 16px; stroke-width: 3; }
.icon--32  { width: 32px; height: 32px; stroke-width: 1.5; }

/* Yalnız ikonlu düğme: ikon 24, dokunma alanı 48, aria-label zorunlu */
.icon-btn  { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px;
             padding: 0; border: 0; border-radius: 12px; background: transparent; color: inherit; cursor: pointer;
             -webkit-tap-highlight-color: transparent; }
.icon-btn:hover         { background: var(--color-surface-alt, rgba(0, 0, 0, .06)); }
.icon-btn:active        { background: var(--color-surface-alt, rgba(0, 0, 0, .10)); }
.icon-btn:focus-visible { outline: 2px solid var(--color-primary, currentColor); outline-offset: 2px; }

/* İkon + yazı: aralık spacing.sm (8) */
.icon-label { display: inline-flex; align-items: center; gap: 8px; }

/* Ödeme rozetleri: sabit 38×24 oranı (token payIconWidth/Height), kırpma/gerdirme yok */
.icon-pay     { width: 38px; height: 24px; flex: none; display: block; }
.icon-pay--32 { width: 51px; height: 32px; } /* ödeme adımı için büyük boy, aynı oran */
.pay-icons    { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }

/* Sosyal medya: dokunma alanı 48, ikon 24, renk temadan */
.social-link       { display: inline-flex; align-items: center; justify-content: center;
                     min-width: 48px; min-height: 48px; color: var(--color-on-surface, currentColor); }
.social-link:hover { color: var(--color-primary, currentColor); }
.social-link:focus-visible { outline: 2px solid var(--color-primary, currentColor); outline-offset: 2px; border-radius: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .icon-btn, .social-link { transition: background-color .2s ease-out, color .2s ease-out; }
}