/* ==========================================================================
   loyalty - T-203 sadakat programi: seviye karti, ilerleme, ayricalik tablosu, rozet vitrini,
   yorumda seviye/rozet etiketi, sepet/odeme tek satir bilgisi, kutlama.
   Onek: loy-  (BEM). Yalniz token; hex / satir ici stil yok. Kose: --radius-btn (hap/daire yok; yalniz ilerleme cubugu yuvarlak).
   ========================================================================== */

/* Seviye renkleri (token): Gumus = nötr, Altin = uyari/kehribar, Platin = bilgi/mavi */
.loy-tier--silver { --loy-c: var(--color-text); --loy-bg: var(--color-secondary); --loy-bd: var(--color-border); }
.loy-tier--gold { --loy-c: var(--color-warning-text); --loy-bg: var(--color-warning-bg); --loy-bd: var(--color-warning-border); }
.loy-tier--platinum { --loy-c: var(--color-info-text); --loy-bg: var(--color-info-bg); --loy-bd: var(--color-info-border); }
.loy-tier--standart { --loy-c: var(--color-muted); --loy-bg: var(--color-bg); --loy-bd: var(--color-border); }

/* Nadirlik renkleri: Yaygin / Seckin / Nadir / Efsanevi */
.loy-r0 { --loy-c: var(--color-muted); --loy-bg: var(--color-bg); --loy-bd: var(--color-border); }
.loy-r1 { --loy-c: var(--color-success-text); --loy-bg: var(--color-success-bg); --loy-bd: var(--color-success-border, var(--color-border)); }
.loy-r2 { --loy-c: var(--color-info-text); --loy-bg: var(--color-info-bg); --loy-bd: var(--color-info-border); }
.loy-r3 { --loy-c: var(--color-warning-text); --loy-bg: var(--color-warning-bg); --loy-bd: var(--color-warning-border); }

/* ---- Hesabim > Sadakat ---- */
.loy-hero { display: grid; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--loy-bd); border-radius: var(--radius-md); background: var(--loy-bg); color: var(--color-text); }
.loy-hero__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.loy-hero__icon { flex: none; width: 56px; height: 56px; display: grid; place-items: center; font-size: 1.6rem; border-radius: var(--radius-btn); background: var(--color-surface); color: var(--loy-c); border: 1px solid var(--loy-bd); }
.loy-hero__name { margin: 0; font-size: var(--fs-h3, 1.25rem); font-weight: 800; color: var(--loy-c); }
.loy-hero__sub { margin: 0; font-size: var(--fs-sm); color: var(--color-muted); }
.loy-hero__points { margin-left: auto; text-align: right; }
.loy-hero__num { font-size: 1.9rem; font-weight: 800; line-height: 1; }
.loy-hero__lbl { font-size: var(--fs-sm); color: var(--color-muted); }
@media (max-width: 575px) { .loy-hero__points { margin-left: 0; text-align: left; width: 100%; } }

.loy-progress { display: grid; gap: var(--space-2); }
.loy-progress__text { font-size: var(--fs-sm); font-weight: 600; }
.loy-bar { height: 10px; border-radius: 999px; background: var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; }
.loy-bar__fill { display: block; height: 100%; width: var(--w, 0%); background: var(--loy-c); border-radius: 999px; transition: width .4s ease; }
.loy-progress__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); font-size: var(--fs-caption); color: var(--color-muted); }

/* Ayricalik tablosu: seviyeler yan yana; kilitli (ulasilmamis) sutunlar soluk, kendi seviyeniz vurgulu */
.loy-perks { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); min-width: 560px; }
.loy-perks th, .loy-perks td { padding: var(--space-3); text-align: center; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.loy-perks thead th { font-weight: 800; position: sticky; top: 0; background: var(--color-surface); }
.loy-perks th:first-child, .loy-perks td:first-child { text-align: left; font-weight: 600; width: 28%; }
.loy-perks__hint { display: block; font-weight: 400; font-size: var(--fs-caption); color: var(--color-muted); }
.loy-perks .is-locked { opacity: .55; }
.loy-perks .is-me { background: var(--loy-bg); box-shadow: inset 0 0 0 1px var(--loy-bd); }
.loy-perks thead .is-me { color: var(--loy-c); }
.loy-perks tr.is-off td { opacity: .45; }
.loy-youare { display: block; font-size: var(--fs-caption); font-weight: 600; color: var(--loy-c); }

/* Rozet vitrini */
.loy-badges { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .loy-badges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .loy-badges { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.loy-badge { display: grid; justify-items: center; align-content: start; gap: var(--space-1); text-align: center; padding: var(--space-4) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); min-height: 168px; }
.loy-badge__icon { width: 52px; height: 52px; display: grid; place-items: center; font-size: 1.35rem; border-radius: var(--radius-btn); background: var(--loy-bg); color: var(--loy-c); border: 1px solid var(--loy-bd); margin-bottom: var(--space-1); }
.loy-badge__name { font-weight: 700; font-size: var(--fs-sm); }
.loy-badge__rarity { font-size: var(--fs-caption); color: var(--loy-c); font-weight: 600; }
.loy-badge__how { font-size: var(--fs-caption); color: var(--color-muted); }
.loy-badge__date { font-size: var(--fs-caption); color: var(--color-success-text); display: inline-flex; align-items: center; gap: var(--space-1); }
.loy-badge.is-locked { background: var(--color-bg); }
.loy-badge.is-locked .loy-badge__icon { filter: grayscale(1); opacity: .6; --loy-bg: var(--color-secondary); --loy-c: var(--color-subtle); --loy-bd: var(--color-border); }
.loy-badge.is-locked .loy-badge__name { color: var(--color-muted); }
.loy-badge.is-off { opacity: .5; }

/* Hareket gecmisi */
.loy-tx { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.loy-tx:last-child { border-bottom: 0; }
.loy-tx__main { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.loy-tx__date { font-size: var(--fs-caption); color: var(--color-muted); }

/* Size ozel kampanyalar */
.loy-camp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); text-decoration: none; color: inherit; }
.loy-camp:hover { border-color: var(--color-primary); }
.loy-camp__main { flex: 1 1 220px; min-width: 0; }
.loy-camp__name { font-weight: 700; overflow-wrap: anywhere; }
.loy-camp__meta { font-size: var(--fs-caption); color: var(--color-muted); }
.loy-camp.is-locked { background: var(--color-bg); opacity: .8; }

/* ---- Kucuk etiketler: yorum yazari, hesap menusu ---- */
.loy-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; min-height: 22px; font-size: var(--fs-caption); font-weight: 700; line-height: 1.2; border-radius: var(--radius-btn); border: 1px solid var(--loy-bd); background: var(--loy-bg); color: var(--loy-c); white-space: nowrap; vertical-align: middle; }
.loy-tag i { font-size: .85em; }
.loy-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }

/* ---- Sepet / odeme tek satir bilgisi ---- */
.loy-line { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); border: 1px dashed var(--color-border); border-radius: var(--radius-btn); background: var(--color-bg); color: var(--color-text); }
.loy-line i { color: var(--color-primary-text); flex: none; }
.loy-line strong { font-weight: 700; }
.loy-line--up { border-style: solid; border-color: var(--color-warning-border); background: var(--color-warning-bg); }
.loy-line--up i { color: var(--color-warning-text); }

/* ---- Odeme: puan kullan ---- */
.loy-redeem { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.loy-redeem__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.loy-redeem__text { min-width: 0; }
.loy-redeem__title { font-weight: 700; font-size: var(--fs-sm); display: block; }
.loy-redeem__sub { font-size: var(--fs-caption); color: var(--color-muted); display: block; }

/* ---- Admin ---- */
.loy-adm-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.loy-adm-tier { border: 1px solid var(--loy-bd); border-radius: var(--radius-md); padding: var(--space-4); background: var(--loy-bg); display: grid; gap: var(--space-3); }
.loy-adm-tier h3 { margin: 0; font-size: var(--fs-base); color: var(--loy-c); }
.loy-adm-switches { display: grid; gap: var(--space-2); }