/**
 * Bay Pipo — müşteri tarafı koyu tema.
 *
 * Yalnızca müşteri sayfaları (index, products, product-detail, cart, 404)
 * bu dosyayı yükler. Admin paneli variables.css / main.css / components.css
 * dosyalarını paylaştığı için koyu tema oraya eklenmedi; admin bu dosyayı
 * hiç yüklemez ve mevcut açık teması aynen korunur.
 *
 * Yaklaşım: önce renk token'ları koyu değerlere çekilir, ardından token
 * yerine sabit açık renk kullanan ya da bordoyu METİN olarak kullanan
 * noktalar tek tek düzeltilir. Bordo koyu zeminde metin olarak yalnızca
 * ~2.1:1 kontrast verir; bu yüzden bordo dolgu (buton, aktif çip, çizgi)
 * için, altın ise küçük metin vurguları için kullanılır (~7.3:1).
 */

/* ==========================================================================
   1. RENK TOKEN'LARI
   ========================================================================== */
:root {
  color-scheme: dark;

  /* Yüzeyler: zemin → kart → yükseltilmiş yüzey */
  --color-bg: #09090b;
  --color-bg-elevated: #111216;
  --color-surface: #111216;
  --color-surface-raised: #18191d;
  --color-surface-muted: #18191d;
  --color-surface-hover: #1d1e23;
  --color-border: #2a2b31;
  /* Form alanı, çip ve adet seçici sınırları — zemine karşı ≥ 3:1 */
  --color-border-strong: #6a6b74;
  --color-border-soft: #3a3b42;

  /* Koyu bantlar (topbar, footer, vitrin, mağaza paneli) */
  --color-ink: #111216;
  --color-ink-soft: #18191d;
  --color-ink-line: rgba(255, 255, 255, 0.1);
  --color-on-ink: #f5f2ea;
  --color-on-ink-muted: #b8b2a7;
  --color-on-ink-soft: #9d968b;

  /* Bordo — ana butonlar, aktif durum, önemli işlemler (dolgu olarak) */
  --color-accent: #8f1d2c;
  --color-accent-soft: rgba(143, 29, 44, 0.22);
  --color-accent-hover: #a62536;
  --color-accent-active: #761824;
  --color-accent-contrast: #f5f2ea;

  /* Altın — logo, ikon, ince çizgi, rozet, küçük metin vurguları */
  --color-gold: #c89a3d;
  --color-gold-soft: rgba(200, 154, 61, 0.14);
  --color-gold-line: rgba(200, 154, 61, 0.5);

  /* Metin */
  --color-text: #f5f2ea;
  --color-text-muted: #b8b2a7;
  --color-text-subtle: #9d968b;

  /* Durum renkleri — koyu zeminde okunur açık tonlar */
  --color-success: #7fd1a0;
  --color-success-soft: rgba(47, 125, 84, 0.2);
  --color-warning: #e0b25a;
  --color-warning-soft: rgba(224, 178, 90, 0.14);
  --color-danger: #f08a8a;
  --color-danger-soft: rgba(196, 64, 64, 0.16);

  /* Koyu zeminde gölge ağırlık değil yalnızca derinlik ipucu verir */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);

  /* Odak halkası: altın, koyu zeminde 7.7:1 */
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-gold);
}

/* ==========================================================================
   2. HEADER, ARAMA, SEPET
   ========================================================================== */
.topbar {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header {
  border-bottom: 1px solid var(--color-border);
}

.header-searchbar {
  background: var(--color-bg-elevated);
  border-top-color: var(--color-border);
}

.searchbar {
  background: var(--color-surface-raised);
  border-color: var(--color-border-strong);
}

.searchbar:focus-within {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(200, 154, 61, 0.38);
}

.searchbar__input {
  color: var(--color-text);
}

.searchbar__input::placeholder,
.input::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}

.searchbar__submit {
  color: var(--color-accent-contrast);
}

/* Koyu header üzerinde sepet: siyah kutu yerine yükseltilmiş yüzey + çerçeve */
.cart-link {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text);
}

.cart-link:hover,
.cart-link:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

.cart-link__count {
  box-shadow: 0 0 0 2px var(--color-bg-elevated);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: var(--color-surface-raised);
}

/* ==========================================================================
   3. NAVİGASYON (normal + sticky + mobil açılır menü)
   ========================================================================== */
.category-nav {
  border-bottom: 1px solid var(--color-border);
}

.site-nav a,
.site-nav .nav-link {
  color: var(--color-text-muted);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--color-text);
  background: var(--color-surface-raised);
}

/* Aktif sayfa: kırık beyaz metin + bordo alt çizgi (yalnız renge dayanmaz) */
.site-nav a[aria-current="page"] {
  color: var(--color-text);
  background: var(--color-accent-soft);
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

.site-nav.is-open {
  border-bottom-color: var(--color-border);
}

@media (min-width: 60em) {
  .site-nav a:hover {
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--color-border-strong);
  }

  .site-nav a[aria-current="page"] {
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--color-accent);
  }

  .category-nav.is-stuck {
    box-shadow: 0 1px 0 var(--color-border), 0 8px 20px rgba(0, 0, 0, 0.45);
  }
}

/* Mobil alt navigasyon: koyu zemin, üstte ince ayırıcı çizgi */
.tabbar {
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.45);
}

.tabbar__item {
  color: var(--color-text-muted);
}

.tabbar__badge {
  color: var(--color-bg);
}

/* ==========================================================================
   4. BÖLÜMLER VE KARTLAR
   ========================================================================== */
/* Alternatif bölüm zemini: sayfa ile kart arasında bir ton — kartlar ayrışır */
.section--alt {
  background: #0d0e11;
  border-block-color: var(--color-border);
}

.section-eyebrow {
  color: var(--color-gold);
}

.store-point {
  border-color: var(--color-border);
  background: var(--color-surface-raised);
}

.trust-item__icon,
.contact-card__icon,
.step__icon {
  background: var(--color-gold-soft);
  color: var(--color-gold);
}

.trust-item:hover,
.step:hover {
  border-color: var(--color-border-soft);
}

a.contact-card:hover,
a.contact-card:focus-visible {
  border-color: var(--color-gold-line);
}

/* Vitrin kartı: sayfa zemininden ayrışan yüzey + ince çerçeve */
.showcase__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.showcase__media,
.showcase__media img {
  background: var(--color-surface-raised);
}

/* Vitrinde iki büyük bordo buton eşit ağırlıkta yarışmasın:
   birincil eylem bordo dolgu, ikincisi nötr outline kalır. */
.showcase__actions .btn--primary + .btn--primary {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text);
  box-shadow: none;
}

.showcase__actions .btn--primary + .btn--primary:hover {
  background: var(--color-surface-raised);
  border-color: var(--color-gold);
}

.showcase-arrow:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.showcase-dot {
  background: var(--color-border-soft);
}

.category-card {
  border-color: var(--color-border);
}

.category-card--loading {
  background: var(--color-surface);
}

/* ==========================================================================
   5. ÜRÜN KARTI
   ========================================================================== */
.product-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.product-card:hover,
.product-card:focus-within {
  border-color: var(--color-border-soft);
  box-shadow: var(--shadow-md);
}

/* Beyaz fotoğraf çerçevesi yerine yükseltilmiş koyu yüzey */
.product-card__media,
.product-card__media img {
  background: var(--color-surface-raised);
}

.product-card__media {
  border-bottom-color: var(--color-border);
}

.product-card__placeholder {
  background: radial-gradient(
    115% 85% at 50% 12%,
    #202127 0%,
    var(--color-surface-raised) 100%
  );
}

.product-card__placeholder-silhouette {
  background-color: var(--color-gold);
  opacity: 0.28;
}

.product-card__title a:hover,
.product-card__title a:focus-visible {
  color: var(--color-gold);
}

.product-card__price {
  color: var(--color-text);
}

/* Stok bilgisi rozet biçiminde: koyu yeşil zemin, açık metin */
.product-card__stock {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  background: #16301f;
  color: #9ed9b5;
  font-family: var(--font-body);
  letter-spacing: 0;
  white-space: nowrap;
}

.product-card__stock--out {
  background: #3a1518;
  color: #f3a3a3;
}

/* 768 px ve üzeri dar kartlarda (3–4 sütun) iki buton yan yana tek satırda
   kalsın; önceden "Sepete Ekle" iki satıra kırılıp kartı büyütüyordu. */
@media (min-width: 48em) {
  .product-card__actions .btn {
    padding-inline: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ==========================================================================
   6. BUTONLAR, ROZETLER, FORM ALANLARI
   ========================================================================== */
.btn--primary {
  color: var(--color-accent-contrast);
}

.btn--secondary {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn--secondary:hover {
  background: var(--color-surface-raised);
  border-color: var(--color-gold);
  color: var(--color-text);
}

.btn--ghost {
  background: var(--color-surface-raised);
  border-color: var(--color-border);
}

.btn--ghost:hover {
  background: var(--color-surface-hover);
}

/* Pasif buton: yalnız soluklukla değil, dolgusuz nötr yüzeyle ayırt edilir */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 1;
  background: #1f2025;
  border-color: var(--color-border);
  color: #7a756d;
  box-shadow: none;
}

.badge--new {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-gold-line);
  color: var(--color-gold);
}

.badge--soon {
  color: var(--color-gold);
}

.input,
.select__control {
  background: var(--color-surface-raised);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.input:focus,
.select__control:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(200, 154, 61, 0.38);
}

.select__control option {
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.form-alert--error {
  border-color: rgba(240, 138, 138, 0.35);
}

.form-alert--warning {
  border-color: rgba(224, 178, 90, 0.35);
}

.form-alert--success {
  border-color: rgba(127, 209, 160, 0.35);
}

/* ==========================================================================
   7. ÜRÜNLER SAYFASI
   ========================================================================== */
.filter-chip {
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.filter-chip:hover {
  border-color: var(--color-gold);
  color: var(--color-text);
}

/* Aktif kategori: bordo dolgu */
.filter-chip[aria-current="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--color-gold);
}

.breadcrumb__sep {
  color: var(--color-border-soft);
}

/* ==========================================================================
   8. ÜRÜN DETAY
   ========================================================================== */
.detail-gallery__main,
.detail-gallery__main img,
.detail-gallery__main .product-card__placeholder,
.detail-gallery__thumb,
.detail-gallery__thumb img,
.detail-gallery__thumb .product-card__placeholder {
  background: var(--color-surface-raised);
}

.detail-gallery__thumb.is-active,
.detail-gallery__thumb:hover {
  border-color: var(--color-gold);
}

.detail-gallery__thumb.is-active {
  box-shadow: 0 0 0 2px var(--color-gold-soft);
}

.detail-specs th {
  background: var(--color-surface-raised);
}

.detail-note--color {
  color: #e8cf98;
}

/* Mobil sabit satın alma çubuğu (responsive.css'te sabit beyaz zemin) */
@media (max-width: 59.99em) {
  .detail-actions {
    background: rgba(17, 18, 22, 0.97);
    border-top-color: var(--color-border);
    box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.45);
  }
}

/* ==========================================================================
   9. SEPET
   ========================================================================== */
.cart-item__media,
.cart-item__media img,
.cart-item__media .product-card__placeholder {
  background: var(--color-surface-raised);
}

.cart-item--unavailable {
  border-color: rgba(240, 138, 138, 0.35);
}

.cart-item__name a:hover,
.cart-item__name a:focus-visible {
  color: var(--color-gold);
}

.qty-btn:hover:not(:disabled),
.qty-btn:focus-visible {
  background: var(--color-surface-raised);
  color: var(--color-gold);
}

.cart-summary__row--total strong {
  color: var(--color-text);
}

/* ==========================================================================
   10. TOAST, MODAL, BOŞ DURUM, YÜKLENİYOR
   ========================================================================== */
.toast {
  background: var(--color-surface-raised);
  border-color: var(--color-border-soft);
  color: var(--color-text);
}

.modal-overlay {
  background: rgba(0, 0, 0, 0.72);
}

.modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.empty-state,
.coming-soon {
  background: var(--color-surface);
  border-color: var(--color-border-soft);
}

.empty-state::before,
.coming-soon::before {
  background-color: var(--color-gold);
}

.catalog-status--loading::before {
  border-color: var(--color-border-soft);
  border-top-color: var(--color-gold);
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--color-bg-elevated);
  border-top: 2px solid var(--color-accent);
}