/* ============================================================================
   Frues UI — uygulama sayfası bileşenleri (sepet, ödeme, hesap).

   Neden ayrı dosya: frues-base.css vitrin bileşenlerini taşıyor ve zaten
   1200+ satır. Uygulama sayfaları buraya, böylece ikisi bağımsız büyür.

   Kurallar:
     · Sıfır renk literali — yalnızca frues-tokens.css token'ları
     · Sıfır !important
     · 4 kırılma noktası: 1200 / 991 / 768 / 480
   ========================================================================== */

/* ============================================================================
   [hidden] SIFIRLAMASI — !important ŞART, KALDIRMA.

   Tarayıcının kendi stil sayfası `[hidden] { display: none }` diyor ama bu, bir
   sınıf kuralındaki `display: flex/block`'a özgüllükte YENİLİR. Bugüne dek bu
   boşluğu Bootstrap'in `[hidden] { display: none !important }` kuralı kapatıyordu;
   Bootstrap layout'tan çıkarıldığında ürün detayındaki ışık kutusu
   (.frues-pd-lightbox — `hidden` niteliği + `display:flex`) sayfa açılışında
   kalıcı olarak AÇIK kaldı ve tüm sayfayı kapattı. Aynı desen fatura adresi
   bloğunda, teklif penceresinde ve header'da da kullanılıyor.

   Bu dosya her iki layout tarafından yükleniyor, yani kural her yerde geçerli.
   ========================================================================== */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- sayfa kabuğu */
.fx-page { padding: 28px 0 72px; background: var(--body-bg); min-height: 55vh; }
.fx-breadcrumb { font-size: .82rem; color: var(--text-secondary); margin-bottom: 16px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.fx-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.fx-breadcrumb a:hover { color: var(--primary); }
.fx-breadcrumb .sep { opacity: .45; }
.fx-breadcrumb .cur { color: var(--text-primary); font-weight: 600; }

.fx-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.fx-page-head h1 {
    margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -.4px;
    color: var(--heading-color); font-family: var(--font);
    display: flex; align-items: center; gap: 12px;
}
.fx-page-head h1::before { content: ""; width: 4px; height: 26px; background: var(--primary); border-radius: 3px; }
.fx-page-meta { display: flex; align-items: center; gap: 12px; font-size: .84rem; color: var(--text-secondary); flex-wrap: wrap; }

/* ---------------------------------------------------------------- kart */
.fx-card {
    background: var(--surface); border: 1px solid var(--border-color); border-radius: 14px;
    box-shadow: var(--shadow-1); overflow: hidden;
}
.fx-card + .fx-card { margin-top: 16px; }
.fx-card__head {
    padding: 16px 22px; border-bottom: 1px solid var(--divider);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.fx-card__head h5 {
    margin: 0; font-size: .95rem; font-weight: 700; color: var(--heading-color);
    display: flex; align-items: center; gap: 8px; font-family: var(--font);
}
.fx-card__body { padding: 20px 22px; }
.fx-card--flush .fx-card__body { padding: 0; }

/* ---------------------------------------------------------------- ızgara */
.fx-grid--checkout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 20px; align-items: start; }

/* ---------------------------------------------------------------- form */
.fx-field { margin-bottom: 16px; }
.fx-field > label { display: block; font-size: .8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.fx-field--req > label::after { content: " *"; color: var(--danger); }
.fx-input, .fx-select, .fx-textarea {
    width: 100%; padding: 11px 14px; font-size: .9rem; font-family: inherit;
    color: var(--text-primary); background: var(--surface);
    border: 1px solid var(--border-color); border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fx-input:focus, .fx-select:focus, .fx-textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring);
}
.fx-textarea { min-height: 90px; resize: vertical; }

/* fx-field içindeki ham form elemanları da aynı görünümü alsın — dönüştürülen
   sayfalarda her input'a tek tek sınıf eklemek gerekmesin. */
.fx-field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.fx-field select,
.fx-field textarea {
    width: 100%; padding: 11px 14px; font-size: .9rem; font-family: inherit;
    color: var(--text-primary); background: var(--surface);
    border: 1px solid var(--border-color); border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fx-field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
.fx-field select:focus,
.fx-field textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring);
}
.fx-field textarea { min-height: 90px; resize: vertical; }
.fx-field .req { color: var(--danger); }

/* Form eylem çubuğu */
.fx-form-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 8px; }

/* Bilgi listesi (sipariş detayı, profil) */
.fx-info-list { list-style: none; margin: 0; padding: 0; }
.fx-info-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: .88rem; }
.fx-info-list li + li { border-top: 1px solid var(--divider); }
.fx-info-list li > span:first-child { color: var(--text-secondary); }
.fx-info-list li > span:last-child { color: var(--text-primary); font-weight: 600; text-align: right; }

.fx-line__body { min-width: 0; }
/* ---------------------------------------------------------------- sipariş onayı
   Onay sayfası 48 satırlık bir <style> bloğuyla geliyordu ve tamamı ölüydü: blok
   .gn-success-* tanımlarken markup fx-* kullanıyordu. Görünen sonuç padding'siz bir
   kart, çıplak <h1> ve Bootstrap mavisi bir buton oluyordu. Bileşen artık burada. */
.fx-success { max-width: 560px; margin: 0 auto; text-align: center; padding: 46px 36px; animation: fx-success-in .35s ease-out; }
@keyframes fx-success-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.fx-success__ic {
    width: 96px; height: 96px; margin: 0 auto 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 42px; background: var(--success); color: var(--on-success, var(--surface));
    box-shadow: 0 16px 32px color-mix(in srgb, var(--success) 32%, transparent);
    animation: fx-success-pop .5s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes fx-success-pop { from { transform: scale(.3); } to { transform: scale(1); } }
.fx-success h1 { font-size: 1.6rem; font-weight: 700; color: var(--heading-color); margin: 0 0 10px; }
.fx-success p { color: var(--text-secondary); font-size: .9rem; line-height: 1.55; margin: 0 0 20px; }
@media (prefers-reduced-motion: reduce) {
    .fx-success, .fx-success__ic { animation: none; }
}

.fx-success-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.fx-hint { font-size: .76rem; color: var(--text-muted); margin-top: 5px; }
.fx-error { font-size: .78rem; color: var(--danger); margin-top: 5px; }
.fx-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------------------------------------------------------------- seçim kutucuğu */
.fx-tile {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 14px 16px; margin-bottom: 10px; cursor: pointer; text-align: left;
    background: var(--surface); border: 1.5px solid var(--border-color); border-radius: 12px;
    font-family: inherit; font-size: .88rem; color: var(--text-primary);
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.fx-tile:hover { border-color: var(--primary); transform: translateY(-1px); }
/* Seçili durum iki yoldan: JS'in eklediği .is-active ve doğrudan radyonun kendisi.
   :has() olmadan seçim yalnız JS sınıf ekleyebildiği zaman görünüyordu; dinamik
   basılan satırlarda (ya da JS hiç çalışmazsa) kutucuk seçili görünmüyordu. */
.fx-tile.is-active,
.fx-tile:has(input[type="radio"]:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.fx-tile__title { font-weight: 600; }
.fx-tile__desc { font-size: .78rem; color: var(--text-secondary); margin-top: 2px; }
.fx-tile__right { margin-left: auto; font-weight: 700; color: var(--primary); }

/* Havale ve Kapıda ödeme adımlarındaki banka/kargo seçimi. Bu iki sayfa markup'ta
   `gn-opt-item` / `gn-kargo-item` yazıyordu ama hem CSS'leri hem JS'leri `.fx-tile`
   arıyordu: seçenekler madde imli çıplak liste olarak çıkıyor ve satıra tıklamak
   seçmiyordu. Kutucuk zaten yukarıda tanımlıydı; eksik olan yalnız şu üç parça. */
.fx-tile-list { list-style: none; padding: 0; margin: 0; }
.fx-tile-list .fx-tile:last-child { margin-bottom: 0; }
/* Radyo düğmesi gizli ama klavyeye açık: odaklandığında halka kutucuğun kendisinde
   çıkıyor, yoksa klavyeyle gezen kullanıcı nerede olduğunu göremiyor. */
.fx-tile { position: relative; }
.fx-tile input[type="radio"] { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.fx-tile:has(input[type="radio"]:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.fx-tile__radio {
    width: 20px; height: 20px; flex-shrink: 0; position: relative;
    border: 2px solid var(--border-strong); border-radius: 50%;
    transition: border-color .16s ease;
}
.fx-tile.is-active .fx-tile__radio,
.fx-tile:has(input[type="radio"]:checked) .fx-tile__radio { border-color: var(--primary); }
.fx-tile.is-active .fx-tile__radio::after,
.fx-tile:has(input[type="radio"]:checked) .fx-tile__radio::after {
    content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary);
}
.fx-tile__ic {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary);
}
.fx-tile__body { flex: 1; min-width: 0; }
/* IBAN gibi kod alanları: eşit genişlikli yazı tipi okumayı kolaylaştırıyor */
.fx-tile__code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .3px; }

/* ---------------------------------------------------------------- onay kutusu
   Adres sayfası bunu `gn-check` adıyla çağırıyordu ve o sınıf hiçbir dosyada
   tanımlı değildi: "Fatura adresim farklı" ve mesafeli satış sözleşmesi onayı
   çıplak bir checkbox + hizasız etiket olarak çıkıyordu. */
/* Bölüm etiketi — "Ödeme Yöntemi" gibi küçük başlıklar. Tipografi ölçeğinden. */
.fx-eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary); }

.fx-check { display: flex; align-items: flex-start; gap: 9px; font-size: .84rem; line-height: 1.45; }
.fx-check input[type="checkbox"] { width: 17px; height: 17px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--primary); cursor: pointer; }
.fx-check label { margin: 0; cursor: pointer; color: var(--text-primary); font-weight: 500; }
.fx-check a { color: var(--primary); font-weight: 600; }

/* Radyo grubu — fatura tipi gibi iki seçenekli satırlar */
.fx-radio-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.fx-radio-row label { display: flex; align-items: center; gap: 7px; margin: 0; cursor: pointer; font-weight: 600; font-size: .86rem; }
.fx-radio-row input[type="radio"] { margin: 0; accent-color: var(--primary); cursor: pointer; }

/* ---------------------------------------------------------------- özet ürün listesi */
.fx-summary-products { list-style: none; padding: 0; margin: 0 0 12px; }
.fx-summary-products li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: .82rem; }
.fx-summary-products li + li { border-top: 1px solid var(--divider); }
.fx-summary-products .name { min-width: 0; color: var(--text-primary); }
.fx-summary-products .name small { display: block; font-size: .72rem; color: var(--text-muted); }
.fx-summary-products .price { white-space: nowrap; font-weight: 600; color: var(--text-primary); }

/* ---------------------------------------------------------------- kupon alanı
   Sepet SAYFASINDA kupon girişi hiç yoktu — yalnız çekmecede vardı. */
.fx-coupon { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--divider); }
.fx-coupon__row { display: flex; gap: 8px; margin-top: 6px; }
.fx-coupon__row input {
    flex: 1; min-width: 0; padding: 11px 14px; font-size: .88rem; font-family: inherit;
    color: var(--text-primary); background: var(--surface);
    border: 1px solid var(--border-color); border-radius: 10px;
}
.fx-coupon__row input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.fx-coupon__applied {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px; border-radius: 10px;
    background: color-mix(in srgb, var(--success) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
    font-size: .84rem; color: var(--text-primary);
}
.fx-coupon__remove {
    background: none; border: none; cursor: pointer; font: inherit; font-weight: 600;
    color: var(--danger); text-decoration: underline;
}

/* ---------------------------------------------------------------- bilgi bandı */
.fx-notice {
    display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
    padding: 16px 20px; border-radius: 14px;
    background: color-mix(in srgb, var(--info) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--info) 35%, transparent);
    color: var(--text-primary);
}
.fx-notice__ic {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--info); color: var(--surface);
}
.fx-notice__text { font-size: .86rem; line-height: 1.5; }

/* Kart içi bölüm başlığı — sol renk çubuğuyla. fx-card__head'den farkı: kartın
   kendi padding'i içinde durur, ayrı bir şerit değil. */
.fx-card__title {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 16px; padding-bottom: 12px;
    font-size: 1rem; font-weight: 700; color: var(--text-primary);
    border-bottom: 1px solid var(--divider);
}
.fx-card__title::before {
    content: ""; width: 4px; height: 18px; flex-shrink: 0;
    border-radius: 2px; background: var(--primary);
}

/* ---------------------------------------------------------------- buton */
.fx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: 10px; border: 1.5px solid transparent;
    font-family: inherit; font-size: .84rem; font-weight: 700; letter-spacing: .4px;
    cursor: pointer; text-decoration: none; transition: filter .16s ease, transform .16s ease, background .16s ease;
}
.fx-btn:hover { transform: translateY(-1px); text-decoration: none; }
.fx-btn:disabled, .fx-btn.is-disabled { opacity: .55; cursor: not-allowed; transform: none; }
.fx-btn--primary { background: var(--primary); color: var(--cta-color); }
.fx-btn--primary:hover { filter: brightness(1.06); color: var(--cta-color); }
.fx-btn--dark { background: var(--btn-dark-bg); color: var(--btn-dark-color); }
.fx-btn--dark:hover { color: var(--btn-dark-color); filter: brightness(1.08); }
.fx-btn--ghost { background: var(--surface); color: var(--text-primary); border-color: var(--border-color); }
.fx-btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
.fx-btn--danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.fx-btn--danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.fx-btn--block { width: 100%; }
.fx-btn--lg { padding: 14px 26px; font-size: .88rem; }

/* ---------------------------------------------------------------- adım göstergesi */
.fx-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.fx-steps__item { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.fx-steps__num {
    width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-2); color: var(--text-secondary); font-size: .74rem;
    border: 1px solid var(--border-color);
}
.fx-steps__item.is-active { color: var(--text-primary); }
.fx-steps__item.is-active .fx-steps__num { background: var(--primary); color: var(--cta-color); border-color: var(--primary); }
.fx-steps__item.is-done { color: var(--success); }
.fx-steps__item.is-done .fx-steps__num { background: var(--success); color: var(--on-success); border-color: var(--success); }
.fx-steps__line { flex: 1 1 20px; height: 2px; background: var(--divider); border-radius: 2px; min-width: 12px; }

/* ---------------------------------------------------------------- özet paneli */
.fx-summary { }
.fx-summary--sticky { position: sticky; top: 88px; }
.fx-summary__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: .88rem; color: var(--text-secondary); }
.fx-summary__row strong { color: var(--text-primary); font-weight: 600; }
.fx-summary__row + .fx-summary__row { border-top: 1px solid var(--divider); }
.fx-summary__total {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 12px; padding-top: 14px; border-top: 2px solid var(--border-color);
    font-size: 1.05rem; font-weight: 800; color: var(--heading-color);
}
.fx-summary__total .fx-amount { color: var(--primary); }

/* ---------------------------------------------------------------- satır öğesi */
.fx-line { display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center; padding: 16px 22px; }
.fx-line + .fx-line { border-top: 1px solid var(--divider); }
.fx-line__media {
    width: 84px; height: 84px; border-radius: 10px; overflow: hidden;
    background: var(--card-img-bg); border: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: center;
}
.fx-line__media img { width: 100%; height: 100%; object-fit: contain; }
.fx-line__name { font-weight: 600; color: var(--text-primary); text-decoration: none; line-height: 1.35; }
.fx-line__name:hover { color: var(--primary); }
.fx-line__meta { font-size: .8rem; color: var(--text-secondary); margin-top: 4px; }
.fx-line__end { display: flex; align-items: center; gap: 16px; }
.fx-line__price { font-weight: 700; color: var(--text-primary); white-space: nowrap; }

.fx-variant-pill {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
    padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}

/* ---------------------------------------------------------------- miktar */
.fx-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--border-color); border-radius: 999px; overflow: hidden; }
.fx-qty button {
    width: 32px; height: 32px; border: none; background: transparent; cursor: pointer;
    color: var(--text-primary); font-size: 1rem; line-height: 1; display: inline-flex;
    align-items: center; justify-content: center; transition: background .15s ease;
}
.fx-qty button:hover { background: var(--surface-2); }
.fx-qty input {
    width: 54px; text-align: center; border: none; background: transparent;
    color: var(--text-primary); font-family: inherit; font-size: .9rem; font-weight: 600;
    -moz-appearance: textfield;
}
.fx-qty input::-webkit-outer-spin-button, .fx-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.fx-icon-btn {
    width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border-color);
    background: var(--surface); color: var(--text-secondary); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; transition: all .15s ease;
}
.fx-icon-btn:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

/* ---------------------------------------------------------------- uyarı */
.fx-alert { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; border-radius: 11px; font-size: .85rem; margin-bottom: 16px; }
.fx-alert--info { background: color-mix(in srgb, var(--info) 10%, transparent); color: var(--info); border: 1px solid color-mix(in srgb, var(--info) 26%, transparent); }
.fx-alert--success { background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 26%, transparent); }
.fx-alert--warn { background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent); }
.fx-alert--danger { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 26%, transparent); }

.fx-progress { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 8px; }
.fx-progress__bar { height: 100%; background: var(--primary); border-radius: 99px; transition: width .4s ease; }

/* ---------------------------------------------------------------- rozet */
.fx-pill {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px;
    font-size: .75rem; font-weight: 700;
    background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border-color);
}
.fx-pill--free { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.fx-pill--accent { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 28%, transparent); }

/* ---------------------------------------------------------------- boş durum */
.fx-empty { text-align: center; padding: 64px 24px; }
.fx-empty__icon {
    width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center; font-size: 2.2rem;
    background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary);
}
.fx-empty h2 { font-size: 1.3rem; font-weight: 700; color: var(--heading-color); margin: 0 0 8px; font-family: var(--font); }
.fx-empty p { color: var(--text-secondary); font-size: .9rem; margin: 0 auto 22px; max-width: 420px; line-height: 1.6; }

/* ---------------------------------------------------------------- hesap gezinme */
.fx-account-nav { display: flex; flex-direction: column; gap: 4px; }
.fx-account-nav a {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px;
    color: var(--text-secondary); text-decoration: none; font-size: .88rem; font-weight: 600;
    transition: background .15s ease, color .15s ease;
}
.fx-account-nav a:hover { background: var(--surface-2); color: var(--text-primary); }
.fx-account-nav a.is-active { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }

/* ---------------------------------------------------------------- istatistik */
.fx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.fx-stat { background: var(--surface); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px 18px; }
.fx-stat__label { font-size: .74rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); }
.fx-stat__value { font-size: 1.5rem; font-weight: 800; color: var(--heading-color); margin-top: 5px; font-family: var(--font); }

/* ---------------------------------------------------------------- tablo */
.fx-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.fx-table th {
    text-align: left; padding: 12px 16px; font-size: .74rem; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
}
.fx-table td { padding: 14px 16px; border-bottom: 1px solid var(--divider); color: var(--text-primary); }
.fx-table tbody tr:last-child td { border-bottom: none; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 991px) {
    .fx-grid--checkout { grid-template-columns: 1fr; }
    .fx-summary--sticky { position: static; }
}

@media (max-width: 768px) {
    .fx-page { padding: 20px 0 56px; }
    .fx-page-head h1 { font-size: 1.45rem; }
    .fx-row-2 { grid-template-columns: 1fr; }
    .fx-line { grid-template-columns: 64px 1fr; gap: 12px; padding: 14px 16px; }
    .fx-line__media { width: 64px; height: 64px; }
    .fx-line__end { grid-column: 1 / -1; justify-content: space-between; padding-top: 4px; }
    .fx-card__body { padding: 16px; }
    .fx-card__head { padding: 14px 16px; }

    /* Tablo → kart: hücreler data-title etiketiyle satıra döner */
    .fx-table--stack thead { display: none; }
    .fx-table--stack tr { display: block; border-bottom: 1px solid var(--divider); padding: 10px 0; }
    .fx-table--stack td { display: flex; justify-content: space-between; gap: 12px; border: none; padding: 6px 16px; }
    .fx-table--stack td::before { content: attr(data-title); font-weight: 700; color: var(--text-muted); font-size: .76rem; }
}

@media (max-width: 480px) {
    .fx-page-head h1 { font-size: 1.3rem; }
    .fx-btn { padding: 11px 18px; }
    .fx-empty { padding: 44px 16px; }
    .fx-empty__icon { width: 74px; height: 74px; font-size: 1.8rem; }
}

/* ---------------------------------------------------------------- uzun metin (yasal/kurumsal sayfalar) */
.fx-prose { color: var(--text-primary); font-size: .95rem; line-height: 1.8; }
.fx-prose h1, .fx-prose h2, .fx-prose h3, .fx-prose h4 {
    color: var(--heading-color); font-family: var(--font); font-weight: 700;
    margin: 1.6em 0 .6em; line-height: 1.3;
}
.fx-prose h1 { font-size: 1.6rem; } .fx-prose h2 { font-size: 1.35rem; }
.fx-prose h3 { font-size: 1.15rem; } .fx-prose h4 { font-size: 1rem; }
.fx-prose > *:first-child { margin-top: 0; }
.fx-prose p { margin: 0 0 1em; }
.fx-prose ul, .fx-prose ol { margin: 0 0 1em; padding-left: 1.4em; }
.fx-prose li { margin-bottom: .4em; }
.fx-prose a { color: var(--primary); text-decoration: underline; }
.fx-prose img { max-width: 100%; height: auto; border-radius: 10px; }
.fx-prose table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.fx-prose th, .fx-prose td { border: 1px solid var(--border-color); padding: 9px 12px; }
.fx-prose blockquote {
    margin: 1em 0; padding: 10px 18px; background: var(--surface-2);
    border-left: 3px solid var(--primary); color: var(--text-secondary);
}
.fx-prose hr { border: none; border-top: 1px solid var(--divider); margin: 1.6em 0; }

/* Sayfa sonu iletişim çağrısı */
.fx-cta-band { text-align: center; padding: 30px 22px; }
.fx-cta-band__title { font-size: .78rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-muted); }
.fx-cta-band__subtitle { font-size: 1.25rem; font-weight: 800; color: var(--heading-color); margin: 6px 0 16px; font-family: var(--font); }

/* ---------------------------------------------------------------- marka ızgarası */
.fx-brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.fx-brand-card {
    display: block; text-decoration: none; background: var(--surface);
    border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.fx-brand-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--primary); }
.fx-brand-card__media {
    height: 170px; display: flex; align-items: center; justify-content: center;
    background: var(--card-img-bg); padding: 20px;
}
.fx-brand-card__media img { max-width: 100%; max-height: 130px; object-fit: contain; }
.fx-brand-card__name {
    padding: 12px 14px; text-align: center; font-weight: 700; font-size: .88rem;
    color: var(--text-primary); border-top: 1px solid var(--divider);
}

/* Sayfalama */
.fx-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.fx-pager__info { font-size: .85rem; color: var(--text-secondary); font-weight: 600; }

@media (max-width: 480px) {
    .fx-brand-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .fx-brand-card__media { height: 130px; padding: 14px; }
}

/* ---------------------------------------------------------------- hesap (giriş / üye ol)
   Sayfa daha önce kendi <style> bloğunda ayrı bir tasarım sistemi (.gn-auth-*)
   taşıyordu ama markup fx-* sınıflarını kullandığı için o CSS'in çoğu hiç
   uygulanmıyordu — ikonlar konumlandırılmış atası olmadığından kartın dibine
   kaçıyor, kartlar birbirinden farklı görünüyordu. Bileşenler buraya taşındı:
   token'larla çalışır, koyu modu kendiliğinden alır, sepet/ödeme sayfalarıyla
   aynı dili konuşur. */

.fx-auth { position: relative; overflow: hidden; }
/* Marka tonunda yumuşak bir ortam ışığı — düz gri zemin yerine derinlik verir. */
.fx-auth::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(760px 300px at 84% -8%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 62%),
        radial-gradient(560px 260px at 4% 108%, color-mix(in srgb, var(--primary) 6%, transparent), transparent 60%);
}
.fx-auth > .container { position: relative; }

/* ---- sayfa başlığı: vitrindeki bölüm başlıklarıyla aynı tipografi ---- */
.fx-auth__head { text-align: center; max-width: 640px; margin: 4px auto 34px; }
.fx-auth__eyebrow {
    font-size: .72rem; font-weight: 700; letter-spacing: 2.4px;
    text-transform: uppercase; color: var(--eyebrow-color);
}
.fx-auth__title {
    margin: 12px 0 0; font-family: var(--font);
    font-size: 1.85rem; font-weight: 800; letter-spacing: 2.5px;
    text-transform: uppercase; color: var(--heading-color); line-height: 1.15;
}
.fx-auth__title::after {
    content: ""; display: block; width: 56px; height: 2px;
    margin: 16px auto 0; background: var(--primary);
}
.fx-auth__lead { margin: 15px 0 0; font-size: .9rem; line-height: 1.6; color: var(--text-secondary); }

/* ---- kart ızgarası ---- */
.fx-auth-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 22px; align-items: start; max-width: 1010px; margin: 0 auto;
}
/* fx-card üstüne kurulu; üstteki ince marka şeridi iki kartı da aynı aileye bağlar. */
.fx-auth-card { position: relative; }
.fx-auth-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--primary); z-index: 1;
}
/* Üyelik kartı asıl eylem: zemini marka tonuyla hafifçe ayrışır. */
.fx-auth-card--accent { background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }

.fx-auth-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.fx-auth-id__ic {
    width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
    color: var(--primary); font-size: 1rem;
}
.fx-auth-id__title {
    margin: 0; font-family: var(--font); font-size: .95rem; font-weight: 800;
    letter-spacing: 1.4px; text-transform: uppercase; color: var(--heading-color);
}
.fx-auth-id__sub { margin: 4px 0 0; font-size: .79rem; line-height: 1.45; color: var(--text-secondary); }

/* ---- form ---- */
.fx-auth-card .fx-field > label {
    font-size: .71rem; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--text-muted);
}
/* İkon ve göster/gizle düğmesi için konumlandırma bağlamı. Bu sarmalayıcı olmadan
   ikonlar en yakın konumlandırılmış ataya (karta) kaçıyordu. */
.fx-field__ctl { position: relative; display: block; }
.fx-field__ic {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); font-size: .84rem; pointer-events: none;
    transition: color .15s ease;
}
/* Özgüllük notu: yukarıdaki genel kural `.fx-field input:not(...):not(...):not(...)`
   üç :not() ile (0,4,1) taşıyor ve `padding` kısayolunu yazıyor. İkona yer açan
   padding'in kazanması için aynı kalıbı tekrarlıyoruz — !important yerine özgüllük. */
.fx-field .fx-field__ctl > input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
    padding-left: 40px;
}
.fx-field .fx-field__ctl--eye > input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
    padding-right: 44px;
}
.fx-field__ctl:focus-within .fx-field__ic { color: var(--primary); }
.fx-field__eye {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; padding: 0; border: none; border-radius: 8px;
    background: transparent; color: var(--text-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .84rem; transition: color .15s ease, background .15s ease;
}
.fx-field__eye:hover { color: var(--primary); background: var(--surface-2); }

.fx-auth-forgot { display: flex; justify-content: flex-end; margin: -8px 0 16px; }
.fx-auth-forgot a { font-size: .8rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; }
.fx-auth-forgot a:hover { color: var(--primary); }

/* ---- üyelik kazanımları: sağ kartın görsel ağırlığını taşır ---- */
.fx-auth-perks { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.fx-auth-perks li { display: flex; align-items: flex-start; gap: 10px; font-size: .82rem; line-height: 1.45; color: var(--text-secondary); }
.fx-auth-perks i { flex: 0 0 auto; margin-top: .28em; font-size: .72rem; color: var(--primary); }

/* ---- ayraç ---- */
.fx-auth-sep {
    display: flex; align-items: center; gap: 14px; margin: 20px 0 14px;
    font-size: .69rem; font-weight: 700; letter-spacing: 1.8px;
    text-transform: uppercase; color: var(--text-muted);
}
.fx-auth-sep::before, .fx-auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--divider); }

/* ---- alt bilgi ---- */
.fx-auth-foot { text-align: center; font-size: .85rem; color: var(--text-secondary); }
.fx-auth-foot a { color: var(--primary); font-weight: 700; text-decoration: none; }
.fx-auth-foot a:hover { text-decoration: underline; }
.fx-auth-fine { margin: 16px 0 0; text-align: center; font-size: .74rem; line-height: 1.55; color: var(--text-muted); }
.fx-auth-fine a { color: var(--text-secondary); font-weight: 600; text-decoration: underline; }
.fx-auth-fine a:hover { color: var(--primary); }

/* Şifre eşleşme geri bildirimi — alert() yerine satır içi.
   Tarayıcı diyalogları sayfayı kilitliyor ve mobilde kötü bir deneyim. */
.fx-field__note { display: none; margin-top: 6px; font-size: .76rem; }
.fx-field__note.is-shown { display: block; }
.fx-field__note--ok { color: var(--success); }
.fx-field__note--err { color: var(--danger); }

@media (max-width: 991px) {
    .fx-auth-grid { grid-template-columns: 1fr; max-width: 620px; gap: 18px; }
}
@media (max-width: 768px) {
    .fx-auth__title { font-size: 1.45rem; letter-spacing: 1.6px; }
    .fx-auth__head { margin-bottom: 26px; }
}
@media (max-width: 480px) {
    .fx-auth-id__ic { width: 38px; height: 38px; border-radius: 10px; font-size: .9rem; }
    .fx-auth__title { font-size: 1.25rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Teklif iste penceresi ("Fiyat Alınız" / "Stok Tükendi")

   Neden frues-base.css'te değil: pencere hem Frues layout'una (_view-frues)
   hem de eski layout'a (_view) ekleniyor, ama eski layout frues-base.css'i
   yüklemiyor — orada stilsiz kalırdı. İki layout'un da yüklediği tek bileşen
   dosyası burası. Kurallar bu dosyanınkilerle uyumlu: yalnız token, !important yok.
   ═══════════════════════════════════════════════════════════════════════════ */
.frues-quote-modal { position: fixed; inset: 0; z-index: 2150; display: none; align-items: center; justify-content: center; padding: 20px; }
.frues-quote-modal.open { display: flex; }
.frues-quote-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.frues-quote-panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--surface);
    border-radius: 16px;
    box-shadow: var(--shadow-2);
}

.frues-quote-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border-color); }
.frues-quote-title { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--heading-color); }
.frues-quote-close { width: 34px; height: 34px; border: none; border-radius: 50%; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 1rem; }
.frues-quote-close:hover { background: var(--surface-2); color: var(--text-primary); }

/* Ürün şeridi — pencerenin varlık sebebi: hangi ürün olduğu her zaman görünsün. */
.frues-quote-product { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; background: var(--surface-2); }
.frues-quote-thumb { width: 76px; height: 76px; flex-shrink: 0; border-radius: 10px; background: var(--card-img-bg, var(--surface)); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.frues-quote-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.frues-quote-product-info { min-width: 0; }
.frues-quote-product-name { font-weight: 800; font-size: 1rem; color: var(--text-primary); line-height: 1.25; }
.frues-quote-product-code { margin-top: 3px; font-size: .78rem; color: var(--text-muted); font-family: monospace; }
.frues-quote-lead { margin: 8px 0 0; font-size: .84rem; color: var(--text-secondary); line-height: 1.45; }

.frues-quote-body { padding: 18px 20px 22px; }

.frues-quote-choices { display: flex; gap: 10px; flex-wrap: wrap; }
.frues-quote-choice {
    flex: 1 1 190px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 16px;
    border-radius: 10px;
    font-weight: 700; font-size: .88rem;
    cursor: pointer; text-decoration: none;
    border: 1.5px solid var(--border-strong);
    background: var(--surface); color: var(--text-primary);
    transition: background .15s, color .15s, border-color .15s;
}
.frues-quote-choice:hover { border-color: var(--text-primary); }
.frues-quote-choice--wa { border-color: color-mix(in srgb, var(--success) 45%, transparent); color: var(--success); }
.frues-quote-choice--wa:hover { background: var(--success); color: var(--on-success, #fff); border-color: var(--success); }
.frues-quote-choice--form:hover { background: var(--cta-bg); color: var(--cta-color); }

.frues-quote-form { margin-top: 4px; }
.frues-quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.frues-quote-field { display: block; }
.frues-quote-field--full { display: block; margin-top: 12px; }
.frues-quote-field > span { display: block; font-size: .78rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 5px; }
.frues-quote-field > span b { color: var(--danger); }
.frues-quote-field input,
.frues-quote-field textarea {
    width: 100%; box-sizing: border-box;
    padding: 10px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text-primary);
    font-family: var(--font); font-size: .9rem;
}
.frues-quote-field input:focus,
.frues-quote-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.frues-quote-field textarea { resize: vertical; min-height: 74px; }

.frues-quote-note { min-height: 20px; margin: 12px 0 4px; font-size: .82rem; font-weight: 600; color: var(--text-secondary); }
.frues-quote-note.is-error { color: var(--danger); }
.frues-quote-note.is-ok { color: var(--success); }

.frues-quote-submit {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 18px;
    border: none; border-radius: 10px;
    background: var(--cta-bg); color: var(--cta-color);
    font-weight: 800; font-size: .92rem; cursor: pointer;
}
.frues-quote-submit:disabled { opacity: .6; cursor: wait; }
.frues-quote-fine { margin: 10px 0 0; font-size: .76rem; color: var(--text-muted); text-align: center; }

@media (max-width: 560px) {
    .frues-quote-grid { grid-template-columns: 1fr; }
    .frues-quote-product { flex-direction: column; }
    .frues-quote-thumb { width: 100%; height: 150px; }
}

/* Ücretsiz kargo ilerlemesi — eşik aşılınca çubuk da başarı rengine döner. */
.fx-ship-progress .fx-progress { margin-top: 10px; }
.fx-ship-progress.is-reached .fx-progress__bar { background: var(--success); }

/* ── İskelet yükleme ──────────────────────────────────────────────────────────
   Yalnızca AJAX ile gelen iki yerde: hızlı bakış ve sepet çekmecesi. Sayfalar
   sunucuda render edildiği için listelerde iskelet göstermek yapay bekleme olurdu. */
@keyframes fruesShimmer { from { background-position: -220px 0; } to { background-position: 220px 0; } }

.frues-skeleton,
.frues-quickview-modal.is-loading .frues-quickview-title,
.frues-quickview-modal.is-loading .frues-quickview-desc,
.frues-quickview-modal.is-loading .frues-quickview-rating-row,
.frues-quickview-modal.is-loading .frues-quickview-price-row {
    color: transparent !important;
    border-radius: 6px;
    background-color: var(--surface-2);
    background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-primary) 6%, transparent), transparent);
    background-repeat: no-repeat;
    background-size: 220px 100%;
    animation: fruesShimmer 1.1s linear infinite;
}
.frues-quickview-modal.is-loading .frues-quickview-title { min-height: 1.6em; }
.frues-quickview-modal.is-loading .frues-quickview-desc { min-height: 4em; }
/* Yüklenirken görsel ve aksiyonlar boş bir kutu gibi durmasın. */
.frues-quickview-modal.is-loading .frues-quickview-img img { opacity: 0; }
.frues-quickview-modal.is-loading .frues-quickview-img { background: var(--surface-2); animation: fruesShimmer 1.1s linear infinite; background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-primary) 6%, transparent), transparent); background-repeat: no-repeat; background-size: 220px 100%; }
.frues-quickview-modal.is-loading .frues-quickview-qty-row,
.frues-quickview-modal.is-loading .frues-quickview-buy { opacity: .35; pointer-events: none; }

/* Sepet çekmecesi yenilenirken kısa bir meşgul durumu. */
.frues-cart-drawer.is-busy .frues-cart-drawer-list,
.frues-cart-drawer.is-busy .frues-cart-drawer-foot { opacity: .5; transition: opacity .15s ease; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .frues-skeleton,
    .frues-quickview-modal.is-loading .frues-quickview-title,
    .frues-quickview-modal.is-loading .frues-quickview-desc,
    .frues-quickview-modal.is-loading .frues-quickview-rating-row,
    .frues-quickview-modal.is-loading .frues-quickview-price-row,
    .frues-quickview-modal.is-loading .frues-quickview-img { animation: none; }
}

/* ============================================================================
   KLAVYE ODAĞI — tek küresel kural.

   Vitrinde odak halkası pratikte hiç yoktu: `--focus-ring` jetonu tanımlıydı ama
   yalnız üç metin alanında kullanılıyordu; buton, bağlantı, ikon düğmesi, kart,
   sayfalama ve çekmece kapatma düğmeleri klavyeyle gezildiğinde hiçbir iz
   vermiyordu. Üstüne frues-base.css'te geniş kapsamlı `outline: none` kuralları
   var. Bu dosya base'ten SONRA yüklendiği için burada tanımlanan halka kazanır.

   :focus-visible kullanılıyor, :focus değil — fareyle tıklamada halka çıkmaz,
   yalnız klavye/erişilebilirlik aracıyla gezildiğinde görünür.
   Her iki layout da frues-ui.css'i yüklüyor, yani eski temalarda da geçerli.
   ========================================================================== */
:is(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--focus-ring);
    border-radius: 4px;
}
/* Zaten kendi köşe yuvarlaklığı olan bileşenlerde halkayı bozmayalım */
.fx-btn:focus-visible, .frues-icon-btn:focus-visible, .frues-card-fav-left:focus-visible,
.frues-card-action:focus-visible, .frues-page-link:focus-visible, .fx-tile:focus-visible {
    border-radius: inherit;
}

/* ============================================================================
   HESAP KİTİ — avatar, bilgi satırı, durum çipi, hesap ızgarası.

   Bu bileşenler Dashboard.cshtml'in kendi <style> bloğunda yaşıyordu ve iyi
   yazılmışlardı (yalnız jeton, sıfır !important). Sayfaya gömülü oldukları için
   Profil ve Sipariş Detayı onları kullanamıyor, kendi ölü `gn-*` sistemlerini
   taşıyorlardı: Profil'de 117 satır, Sipariş Detayı'nda 68 satır CSS tanımlanıp
   markup fx-* yazdığı için hiç uygulanmıyordu — sol menü çıplak madde imli bir
   liste, kartlar padding'siz çıkıyordu. Blok buraya taşındı, üç sayfa da aynı
   bileşenleri kullanıyor.
   ========================================================================== */
.fx-avatar-lg, .fx-avatar-sm {
    border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: var(--cta-color);
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #000));
}
.fx-avatar-lg { width: 60px; height: 60px; font-size: 22px; }
.fx-avatar-sm { width: 42px; height: 42px; font-size: 15px; font-weight: 700; }

.fx-acc-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }

.fx-info-row { display: flex; gap: 12px; padding: 10px 0; }
.fx-info-row + .fx-info-row { border-top: 1px solid var(--divider); }
.fx-info-row__icon {
    width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary);
}
.fx-info-row__label { font-size: .74rem; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: var(--text-muted); }
.fx-info-row__value { font-size: .88rem; color: var(--text-primary); margin-top: 2px; }

.fx-status { display: inline-flex; padding: 4px 12px; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.fx-status--prep { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }
.fx-status--shipping { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.fx-status--done { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.fx-status--cancel { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.fx-status--unpaid { background: var(--surface-2); color: var(--text-secondary); }

@media (max-width: 991px) {
    .fx-acc-grid { grid-template-columns: 1fr; }
}