/*
 * modules/core.css — extracted shared selectors on 2026-05-24
 *
 * Sprint 1C: CSS Module Split. Loaded on EVERY page (every route in theme.php).
 *
 * Why core, not per-route:
 *   - `.tier-bronze/silver/gold/platinum/onyx` provide `--tier-rgb` + `--tier-color`
 *     CSS variables that the home hero progress bar AND the loyalty hero AND
 *     the header tier-chip all depend on. Putting these in a route-only
 *     module breaks any other route that renders a tier badge.
 *   - `.tier-chip*` ships in `theme.php`'s header greeting — every screen
 *     except `maintenance` shows it.
 *   - `.tier-badge-svg` + `.bonus-cat-badge` are PHP-helper-rendered SVGs
 *     used across 6+ view files (theme/index/bonus/bonus-list/loyalty_store/
 *     loyalty_leaderboard, ...).
 *
 * Selector namespace: `.tier-*`, `.bonus-cat-badge*`.
 */
/* === §3106-3183 — Tier classes (CSS var host) + tier-chip header === */
.tier-bronze   { --tier-color: #b45309; --tier-rgb: 180, 83, 9; }
.tier-silver   { --tier-color: #94a3b8; --tier-rgb: 148, 163, 184; }
.tier-gold     { --tier-color: #eab308; --tier-rgb: 234, 179, 8; }
.tier-platinum { --tier-color: #06b6d4; --tier-rgb: 6, 182, 212; }
.tier-onyx     { --tier-color: #a78bfa; --tier-rgb: 167, 139, 250; }

/* ==========================================================================
   Mini tier chip (header greeting) — MOBILE FIRST
   ========================================================================== */
.tier-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2px;
    background: rgba(var(--tier-rgb), 0.10);
    color: var(--tier-color);
    border: 1px solid rgba(var(--tier-rgb), 0.32);
    text-decoration: none;
    margin-left: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    /* Touch-friendly tap area (görsel boyutu bozmadan tıklanabilir alan) */
    min-height: 24px;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    will-change: transform;
}
.tier-chip-icon {
    display: inline-flex;
    font-size: 0.8rem;
    line-height: 1;
}
.tier-chip-label {
    font-weight: 600;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Touch feedback — tap state mobile için (hover'dan önce) */
.tier-chip:active {
    background: rgba(var(--tier-rgb), 0.22);
    border-color: rgba(var(--tier-rgb), 0.6);
    transform: scale(0.96);
}
/* Hover state — desktop/pointer cihazlar için */
@media (hover: hover) {
    .tier-chip:hover {
        background: rgba(var(--tier-rgb), 0.18);
        border-color: rgba(var(--tier-rgb), 0.55);
        transform: translateY(-1px);
    }
}
.tier-chip.tier-onyx {
    animation: loyalty-onyx-pulse 3s ease-in-out infinite;
}
@keyframes loyalty-onyx-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(var(--tier-rgb), 0); }
    50%      { box-shadow: 0 0 12px rgba(var(--tier-rgb), 0.5); }
}

/* Tablet+ — chip biraz büyür, label genişler */
@media (min-width: 768px) {
    .tier-chip {
        gap: 5px;
        padding: 4px 9px;
        font-size: 0.72rem;
        letter-spacing: 0.3px;
    }
    .tier-chip-icon { font-size: 0.85rem; }
    .tier-chip-label { max-width: none; }
}

/* ==========================================================================

/* === §8184-8264 — Tier badge SVG (used in theme + index + bonus + store + leaderboard) === */
    --status-locked-rgb:    245, 158, 11;
    --status-settled:       #64748B;  /* slate-500 */
    --status-settled-rgb:   100, 116, 139;
    --c-balance:        #06B6D4;  /* cyan */
    --c-balance-rgb:    6, 182, 212;

    /* Apple Dark Mode tarzı light overlay (background-agnostic).
       Daha belirgin kontrast — kartlar arkaplandan net ayrılsın. */
    --surface-1:        rgba(255, 255, 255, 0.06);   /* primary card surface */
    --surface-2:        rgba(255, 255, 255, 0.10);   /* hover/active */
    --surface-border:   rgba(255, 255, 255, 0.12);   /* visible separator */
    --surface-border-strong: rgba(255, 255, 255, 0.18);
}

/* ==========================================================================
   TIER BADGE — Custom SVG marka kimliği (emoji yerine)
   loyalty_tier_badge_svg() helper'ından inline <svg> render edilir.
   Hexagon (Bronze/Silver/Gold) + Octagon (Platinum/Onyx) — Apple Wallet
   pass-vari premium tasarım, Roma rakamları (I-V), metallic gradient.
   ========================================================================== */
.tier-badge-svg {
    display: block;
    flex-shrink: 0;
    /* Glow halo (Gold/Onyx) ve sparkle dots (Onyx) viewBox dışına çıkmasın
       diye overflow visible (path zaten viewBox içinde). */
    overflow: visible;
}

.tier-badge-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-secondary, #888);
}

/* Legacy emoji container'larını badge için adapter'la
   (badge kendi gradient/border'ını taşıyor — outer tint çakışmasın).
   :has() modern browsers (Safari 15.4+, Chrome 105+, FF 121+) — daha eski
   tarayıcılarda fallback: tinted outer container + badge görünür, hâlâ çalışır. */
.loyalty-tier-card__icon:has(.tier-badge-svg),
.loyalty-tier-roadmap-card__emoji:has(.tier-badge-svg),
.home-hero__emoji:has(.tier-badge-svg),
.loyalty-tier-up-row__icon:has(.tier-badge-svg),
.loyalty-leaderboard-preview__tier:has(.tier-badge-svg),
.loyalty-store-balance__icon:has(.tier-badge-svg),
.tier-chip-icon:has(.tier-badge-svg),
.loyalty-lb-row__avatar:has(.tier-badge-svg),
.loyalty-lb-podium__avatar:has(.tier-badge-svg),
.loyalty-lb-you-card__avatar:has(.tier-badge-svg) {
    background: transparent;
    border: 0;
    padding: 0;
    overflow: visible;
}

/* Big square containers — badge fill 100% (52/56/64px). */
.loyalty-tier-card__icon .tier-badge-svg,
.loyalty-tier-roadmap-card__emoji .tier-badge-svg,
.home-hero__emoji .tier-badge-svg,
.loyalty-lb-row__avatar .tier-badge-svg,
.loyalty-lb-podium__avatar .tier-badge-svg,
.loyalty-lb-you-card__avatar .tier-badge-svg {
    width: 100%;
    height: 100%;
}

/* Inline (text-line) contexts — explicit small px so badge sticks to icon size. */
.tier-chip-icon .tier-badge-svg {
    width: 14px;
    height: 14px;
}
@media (min-width: 768px) {
    .tier-chip-icon .tier-badge-svg { width: 15px; height: 15px; }
}

.loyalty-tier-up-row__icon .tier-badge-svg {
    width: 22px;
    height: 22px;
}

/* === §8265-8326 — Bonus category badge (used in bonus + bonus-list + bonus-lost) === */
@media (min-width: 480px) {
    .loyalty-tier-up-row__icon .tier-badge-svg { width: 24px; height: 24px; }
}

.loyalty-leaderboard-preview__tier .tier-badge-svg {
    width: 22px;
    height: 22px;
}

.loyalty-store-balance__icon .tier-badge-svg {
    width: 22px;
    height: 22px;
}

/* ==========================================================================
   BONUS CATEGORY BADGE — Tier badge ile aynı tasarım dili (hexagon/octagon
   shell + metallic gradient + hand-crafted glyph). bonus_category_badge_svg()
   helper'ından inline render edilir. Lucide line-art / generic gold-coin
   yerine brand-specific premium görsel.
   ========================================================================== */
.bonus-badge-svg {
    display: block;
    flex-shrink: 0;
    /* Glow halo (welcome / extra) ve sparkle dots (extra) viewBox dışına
       taşmasın diye overflow visible (path zaten viewBox içinde). */
    overflow: visible;
}

.bonus-badge-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-secondary, #888);
}

/* Eski .card-icon-wrapper kendi gradient/border/padding'ini taşıyor — yeni
   bonus badge zaten metallic shell'i içinde barındırdığı için outer tint
   görsel kirlilik yaratıyor. :has() ile sadece badge varsa container'ı
   şeffaflaştır (Lucide / lucide_icon('gift') durumunda eski stil korunur).
   :has() destekleyen tarayıcılarda (Safari 15.4+, Chrome 105+, FF 121+)
   premium görünüm; eski tarayıcılarda fallback: badge görünür ama dış
   container hâlâ boyalı (yine de çalışır). */
.card-icon-wrapper:has(.bonus-badge-svg),
.bonus-icon-wrapper:has(.bonus-badge-svg) {
    background: transparent;
    border: 0;
    padding: 0;
    overflow: visible;
}

/* Badge container içinde tam doldursun — boyut wrapper'dan gelir
   (bonus.php → 52px, #bonusDetailContent → 42px, mobile → 36/44px). */
.card-icon-wrapper .bonus-badge-svg,
.bonus-icon-wrapper .bonus-badge-svg {
    width: 100%;
    height: 100%;
}

/* Hover state'inde tier-badge gibi: badge zaten kendi gradient'ini taşıyor;
   gold tint koymaya gerek yok (premium-bonus-card / dashboard-card kendi
   gradient'ini taşıyor). */

/* ==========================================================================
   SHARED — Section title row + "View all" CTA pill
   Originally in store.css; promoted to core 2026-05-24 after a Sprint 1C
   cutover regression made these styles invisible on /screen/loyalty hub
   (the "Tüm Ödüller →" and "Tüm tabloyu gör →" links rendered as raw
   blue underlined <a> tags). The selectors are shared between the loyalty
   hub, store, and leaderboard pages, so they belong here.

   Design: pill-style ghost button with gold accent + chevron after the
   label. Subtle border, glass-like background, and a tactile press
   feedback. This replaces the previous plain text link.
   ========================================================================== */
.loyalty-section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 2px 0;
    flex-wrap: wrap;
}
.loyalty-section-title-row .loyalty-section-title { margin: 0; }

.loyalty-section-cta {
    /* World-class pill: glass surface + gold rim + chevron. Tap target
       comfortably ≥ 36px tall for mobile thumbs. */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--primary-gold);
    text-decoration: none;
    background: rgba(var(--primary-gold-rgb), 0.09);
    border: 1px solid rgba(var(--primary-gold-rgb), 0.28);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
                0 4px 12px -6px rgba(var(--primary-gold-rgb), 0.4);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 220ms ease,
                border-color 220ms ease,
                transform 160ms ease,
                box-shadow 220ms ease;
    white-space: nowrap;
}
.loyalty-section-cta:active {
    transform: translateY(1px) scale(0.98);
    background: rgba(var(--primary-gold-rgb), 0.18);
    box-shadow: 0 1px 4px -2px rgba(var(--primary-gold-rgb), 0.5);
}
@media (hover: hover) {
    .loyalty-section-cta:hover {
        background: rgba(var(--primary-gold-rgb), 0.16);
        border-color: rgba(var(--primary-gold-rgb), 0.48);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
                    0 6px 18px -6px rgba(var(--primary-gold-rgb), 0.55);
    }
}

@media (prefers-reduced-motion: reduce) {
    .loyalty-section-cta { transition: none; }
}