/* Functional shell styles for the trimmed mobilya-classic theme components.
   Keep styles.css as the byte-identical upstream reference copy. */

/* GERÇEK BUG DÜZELTMESİ (2026-08-10) — tekstil-classic'teki AYNI kök
   neden: styles.css onlarca yerde `font-family: 'FontAwesome'` kullanıyor
   (favori kalp ikonu dahil) ama fontu yükleyen hiçbir @font-face yoktu,
   tüm ikonlar boş kare (tofu) render ediyordu. Aynı self-host çözümü. */
@font-face {
  font-family: "FontAwesome";
  src: url("/fonts/fontawesome/fontawesome-webfont.woff2") format("woff2"),
    url("/fonts/fontawesome/fontawesome-webfont.woff") format("woff"),
    url("/fonts/fontawesome/fontawesome-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

:root {
  --mobilya-brand: #a46135;
  --mobilya-brand-dark: #7f4827;
  --mobilya-text: #292723;
  --mobilya-muted: #716d65;
  --mobilya-border: #e8e3da;
  --mobilya-soft: #f6f3ed;
  --mobilya-surface: #fff;
  --mobilya-dark: #222;
  --mobilya-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.container {
  width: min(100% - 48px, 1380px);
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--mobilya-surface);
  color: var(--mobilya-text);
  border-bottom: 1px solid var(--mobilya-border);
  box-shadow: none;
}

.topbar {
  background: #292723;
  color: #fff;
  border-bottom: 0;
  font-size: 13px;
}

.topbar-inner {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar-message { font-size: 12px; letter-spacing: .02em; }
.topbar-links { display: flex; align-items: center; gap: 22px; }
.topbar .topbar-link { color: #eeeae3; }

/* Topbar: telefon/whatsapp/adres + sosyal medya — dogtas.com klonu
   template/mobilya/public/index.html'deki topbar tasarımının bire bir
   portu (bkz. Header.tsx dosya başı yorumu). Eskiden burada Mağazalar/
   Yardım linkleri + market seçici vardı; market seçici header-actions'a
   taşındı, Mağazalar/Yardım linkleri ana menüde zaten mevcut değildi
   (bilinçli kayıp: kullanıcı isteği üzerine bayilik/kurumsal linkleri
   yerine iletişim bilgisi öncelikli hale getirildi). */
.topbar-contact { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar-social { display: flex; align-items: center; gap: 14px; }
.topbar-social a { display: inline-flex; align-items: center; color: #eeeae3; opacity: .75; }
.topbar-social a:hover,
.topbar-social a:focus-visible { opacity: 1; color: #fff; }
.topbar-whatsapp { color: #25D366 !important; }
.topbar-address { cursor: default; }

.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mobilya-muted);
}

.topbar-link:hover,
.topbar-link:focus-visible {
  color: var(--mobilya-brand);
}

.header-main {
  min-height: 94px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-width: 150px;
  max-width: 260px;
  color: var(--mobilya-brand);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.brand-logo {
  display: block;
  max-width: 220px;
  max-height: 64px;
  object-fit: contain;
}

.header-search {
  flex: 1 1 420px;
  min-width: 220px;
  height: 46px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--mobilya-border);
  border-radius: 4px;
  background: #faf9f6;
}

.header-search:focus-within {
  border-color: var(--mobilya-brand);
  box-shadow: 0 0 0 3px rgba(239, 125, 0, 0.12);
}

.header-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 16px;
  color: #8a8a8a;
}

.header-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 12px;
  border: 0;
  outline: 0;
  color: var(--mobilya-text);
  background: transparent;
}

.header-search button {
  align-self: stretch;
  min-width: 82px;
  padding: 0 20px;
  border: 0;
  background: var(--mobilya-brand);
  color: #fff;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
}

.header-search button:hover,
.header-search button:focus-visible {
  background: var(--mobilya-brand-dark);
}

.header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.action-user,
.action-bell,
.action-favorite,
.action-cart {
  position: relative;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mobilya-border);
  border-radius: 4px;
  color: var(--mobilya-text);
  background: #fff;
}

/* Giriş yapmış müşteri adı gösterildiğinde .action-user genişler —
   bkz. Header.tsx dosya başı yorumu (2026-08-11 eklendi). Diğer iki
   eylem butonu (.action-bell/.action-cart) her zaman sabit dairesel
   kalır, sadece kullanıcı adı taşıyan buton esner. */
.action-user:has(.action-user-name) {
  width: auto;
  gap: 8px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
}

.action-user-name {
  font-size: 13px;
  font-weight: 600;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-user:hover,
.action-bell:hover,
.action-favorite:hover,
.action-cart:hover,
.action-user:focus-visible,
.action-bell:focus-visible,
.action-favorite:focus-visible,
.action-cart:focus-visible {
  color: var(--mobilya-brand);
  border-color: var(--mobilya-brand);
}

.cart-count {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--mobilya-brand);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.main-nav {
  background: #fff;
  color: var(--mobilya-text);
  border-top: 1px solid var(--mobilya-border);
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav > .container > ul {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 50px;
  justify-content: center;
  overflow-x: auto;
}

.nav-item {
  position: relative;
  flex: 0 0 auto;
}

.nav-item > a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  color: var(--mobilya-text);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .025em;
  white-space: nowrap;
}

.nav-item:hover > a,
.nav-item:focus-within > a {
  background: transparent;
  color: var(--mobilya-brand);
}

.nav-highlight > a { color: var(--mobilya-brand); }
.mobile-menu-toggle { display: none; }

.nav-item.has-children > a::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 7px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.8;
}

.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1100;
  min-width: 240px;
  max-width: min(720px, calc(100vw - 32px));
  padding: 12px;
  background: #fff;
  border: 1px solid var(--mobilya-border);
  box-shadow: var(--mobilya-shadow);
}

.nav-item:hover > .mega-menu,
.nav-item:focus-within > .mega-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 4px 16px;
  align-items: start;
}

.mega-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--mobilya-text);
  font-size: 14px;
  font-weight: 600;
}

.mega-menu a:hover,
.mega-menu a:focus-visible {
  background: rgba(239, 125, 0, 0.1);
  color: var(--mobilya-brand);
}

/* 3. seviye (torun kategoriler) — dogtas.com mega-menu'sündeki alt kategori
   listesi (bkz. Header.tsx). Ana kategori linkinin hemen altında, daha
   küçük/soluk bir liste olarak gösterilir. */
.mega-menu-sub {
  margin: 0 0 4px 12px;
  padding: 0;
  list-style: none;
}

.mega-menu-sub a {
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--mobilya-muted);
}

.mega-menu-sub a:hover,
.mega-menu-sub a:focus-visible {
  background: transparent;
  color: var(--mobilya-brand);
  text-decoration: underline;
}

.site-footer {
  margin-top: 56px;
  background: #222;
  color: #fff;
}

.footer-trust-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-trust-badge {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.footer-trust-badge img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  filter: brightness(0) invert(1) opacity(0.85);
}

.footer-trust-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  color: #dfb28d;
  font-size: 19px;
}

.footer-trust-badge b {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}

.footer-trust-badge span {
  font-size: 12.5px;
  color: #b8b8b8;
  line-height: 1.5;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(220px, 1fr);
  gap: 36px;
  padding: 42px 0;
}

.footer-brand h3,
.footer-brand p {
  margin: 0 0 10px;
}

.footer-brand p {
  color: #d1d1d1;
  line-height: 1.6;
}

.footer-links {
  display: grid;
  gap: 10px;
  align-content: start;
}

.footer-links a {
  color: #e8e8e8;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--mobilya-brand);
}

/* Sosyal medya satırı — dogtas.com klonundaki footer-app-link/social-media
   bloğunun portu (bkz. Footer.tsx). store.socialLinks boşsa hiç render
   edilmez (uydurma link yok). */
.footer-social {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-social-title {
  font-size: 13px;
  font-weight: 600;
  color: #d1d1d1;
}

.footer-social-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  border-color: var(--mobilya-brand);
  color: var(--mobilya-brand);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #bac0c5;
  font-size: 13px;
}

.footer-bottom .container {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.section,
.category-list,
.product-detail {
  padding-top: 36px;
  padding-bottom: 36px;
}

.section-title {
  margin: 0 0 24px;
  color: var(--mobilya-text);
  font-family: 'Lora', serif;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.section-heading .section-title, .section-heading h2 { margin: 0; }
.section-heading h2 { font-family: 'Lora', serif; font-size: clamp(22px, 2.3vw, 34px); color: var(--mobilya-text); }
.section-heading > a { color: var(--mobilya-text); border-bottom: 1px solid currentColor; padding-bottom: 3px; font-weight: 600; }
.section-eyebrow { display: block; margin-bottom: 8px; color: var(--mobilya-brand); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.compact-heading { margin-bottom: 20px; }

.category-count {
  margin: 0;
  color: var(--mobilya-muted);
  font-size: 13px;
}

/* Kategori kısa açıklaması — tekstil-classic'teki AYNI ekleme (bkz. o
   dosyadaki yorum), tutarlılık için burada da uygulanır. */
.category-description {
  margin: 8px 0 20px;
  color: var(--mobilya-muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 720px;
}

/* Sırala dropdown'ı — CategoryListPage'in sort UI kullanmaya başlamasıyla
   eklendi (2026-08-07: referans CategoryList.jsx'in fiyata göre artan/
   azalan/yeni sıralaması hiç port edilmemişti). */
.category-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: -16px 0 20px;
}

/* Aktif filtre çipleri — bkz. CategoryListPage.tsx dosya başı yorumu
   (2026-08-12 eklendi), mobilya-template/src/pages/CategoryList.css'ten
   port edildi (--color-* -> --mobilya-* eşlemesiyle). */
.activeFilterBar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--mobilya-border);
  border-radius: 8px;
  background: var(--mobilya-soft);
  font-size: 12.5px;
  font-weight: 600;
  color: #000;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.filter-chip span {
  font-size: 15px;
  line-height: 1;
  color: var(--mobilya-muted);
}

.filter-chip:hover {
  border-color: var(--mobilya-brand);
  background: rgba(239, 125, 0, 0.07);
}

.filter-chip.chip-clear {
  background: transparent;
  border-style: dashed;
  color: var(--mobilya-brand);
}

.category-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--mobilya-muted);
}

.category-sort select {
  border: 1px solid var(--mobilya-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--mobilya-text);
  background: var(--mobilya-surface);
  cursor: pointer;
}

/* Sayfalama (pageNumber/pageBorder) — CategoryListPage'in pagination
   prop'unu kullanmaya başlamasıyla eklendi (2026-08-07 bug düzeltmesi:
   büyük kategorilerde 24 ürün üstü içerik hiç görünmüyordu). Class isimleri
   referans mobilya-template/src/pages/CategoryList.jsx ile aynı. */
.pageNumber {
  display: flex;
  justify-content: center;
  margin: 40px 0 0;
}

.pageBorder {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pageBorder a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  border: 1px solid var(--mobilya-border);
  border-radius: 8px;
  color: var(--mobilya-text);
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.pageBorder a:hover {
  border-color: var(--mobilya-brand);
  color: var(--mobilya-brand);
}

.pageBorder a.SelectedSayfa {
  background: var(--mobilya-brand);
  border-color: var(--mobilya-brand);
  color: #fff;
}

.pageBorder a.butonDisabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Ana sayfa "Kategoriler" bölümü — ported from mobilya-template/src/pages/
   Home.css (referans site, .category-grid/.category-tile/.category-tile-image)
   — bkz. tasarım doğrulama notu §9 (2026-08-07): HomePage.tsx'e kategori
   kartları eklenirken bu sayfa-özel CSS dosyası ilk implementasyonda hiç
   kopyalanmamıştı (plan sadece real-site.css'i belirtmişti). */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 15px;
}

.category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--mobilya-text, #222);
}

.category-tile-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid #e5e5e5;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease;
}

.category-tile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-tile:hover .category-tile-image {
  border-color: #ef7d00;
}

@media (max-width: 1100px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Bütünleşik müşteri yolculuğu: üyelik, sepet, ödeme ve hesap ekranları */
.commerce-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--mobilya-border);
}

.commerce-page-heading .section-title { margin: 0; }
.commerce-page-heading > span { color: var(--mobilya-muted); font-weight: 700; }

.account-auth-shell {
  max-width: 1080px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  padding-top: 72px;
  padding-bottom: 72px;
}

.account-auth-intro {
  padding: 64px clamp(36px, 6vw, 78px);
  background: linear-gradient(145deg, #ede5d9, #d8c8b6);
  color: var(--mobilya-text);
}

.account-auth-intro h1 {
  margin: 0 0 18px;
  font-family: 'Lora', serif;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
}

.account-auth-intro p { max-width: 520px; color: #5f594f; font-size: 15px; line-height: 1.75; }
.account-auth-intro ul { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.account-auth-intro li::before { content: "✓"; margin-right: 10px; color: var(--mobilya-brand); font-weight: 800; }

.account-auth-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px clamp(28px, 5vw, 64px);
  border: 1px solid var(--mobilya-border);
  background: #fff;
}

.account-auth-card .account-auth-tabs { margin-bottom: 30px; }
.account-auth-form { gap: 14px; }
.account-auth-form input, .checkout-form input, .checkout-form textarea, .checkout-form select {
  min-height: 48px;
  border-radius: 3px;
  background: #fdfcf9;
}
.auth-help-link { align-self: flex-end; padding: 0; border: 0; background: none; color: var(--mobilya-brand); font-size: 12px; cursor: pointer; }
.auth-submit { width: 100%; min-height: 50px; margin-top: 4px; }
.auth-secure-note { margin: 18px 0 0; color: var(--mobilya-muted); font-size: 11px; text-align: center; }

.account-panel { grid-template-columns: 260px minmax(0,1fr); gap: 40px; align-items: start; }
.account-sidebar { padding: 24px; border: 1px solid var(--mobilya-border); background: #fff; position: sticky; top: 190px; }
.account-content { min-width: 0; padding: 30px; border: 1px solid var(--mobilya-border); background: #fff; }
.account-content h2 { margin: 0 0 24px; font-family: 'Lora',serif; font-size: 30px; }

/* GERÇEK EKSİKLİK DÜZELTMESİ (2026-08-24) — profesyonel sidebar özeti
   (avatar/üyelik tarihi/istatistikler) + Adres Defterim/Yorumlarım/
   sipariş iptali. Aydınlife'ta İLK KEZ eklendi, aynı işlevsellik
   BURADA da mobilya-classic'in kendi --mobilya-* renk diliyle. */
.account-sidebar-profile { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--mobilya-border); }
.account-avatar { width: 46px; height: 46px; min-width: 46px; border-radius: 50%; background: var(--mobilya-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; font-family: 'Lora',serif; }
.account-member-since { display: block; font-size: 11.5px; color: var(--mobilya-muted); margin-top: 2px; }
.account-sidebar-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--mobilya-border); }
.account-sidebar-stats > div { text-align: center; background: var(--mobilya-soft); border-radius: 3px; padding: 10px 4px; display: flex; flex-direction: column; gap: 2px; }
.account-sidebar-stats b { font-size: 13px; color: var(--mobilya-text); line-height: 1.2; }
.account-sidebar-stats span { font-size: 10px; color: var(--mobilya-muted); text-transform: uppercase; letter-spacing: .02em; }

.address-default-badge { position: absolute; top: 14px; right: 14px; background: var(--mobilya-soft); color: var(--mobilya-brand); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 3px 9px; border-radius: 3px; }
.address-card { position: relative; }
.address-card-new { border-style: dashed; background: var(--mobilya-soft); }
.address-card-new > h4 { margin-bottom: 14px; padding-right: 0; font-size: 15px; color: var(--mobilya-dark); }
/* Düzenlenen kart, okunan karttan görsel olarak ayrışsın. */
.address-card-editing { border-color: var(--mobilya-brand); box-shadow: 0 2px 14px rgba(0,0,0,.06); }
.address-card-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.address-delete-btn { color: #b3423a; border-color: rgba(179,66,58,.3); }
.address-delete-btn:hover { background: rgba(179,66,58,.08); border-color: #b3423a; }
.address-form { display: flex; flex-direction: column; gap: 16px; }
.address-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.address-form-full { grid-column: 1 / -1; }
.address-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--mobilya-muted); text-transform: uppercase; letter-spacing: .03em; }
.address-form input, .address-form textarea { width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid var(--mobilya-border); border-radius: 5px; font-size: 13.5px; font-family: inherit; color: var(--mobilya-dark); background: #fff; transition: border-color .2s ease, box-shadow .2s ease; resize: vertical; text-transform: none; letter-spacing: normal; }
.address-form input::placeholder, .address-form textarea::placeholder { color: #b0aca6; }
.address-form input:focus, .address-form textarea:focus { outline: none; border-color: var(--mobilya-brand); box-shadow: 0 0 0 3px rgba(122, 61, 45, .1); }
.address-form textarea { min-height: 72px; line-height: 1.5; }
/* Checkbox satırı: tıklanabilir alan tüm satır, etiket normal cümle. */
.address-form-checkbox { flex-direction: row; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--mobilya-dark); cursor: pointer; padding: 12px 14px; border: 1px solid var(--mobilya-border); border-radius: 5px; background: var(--mobilya-soft); }
.address-form-checkbox input { width: 16px; height: 16px; flex: 0 0 auto; padding: 0; margin: 0; accent-color: var(--mobilya-brand); cursor: pointer; }
.address-form-actions { display: flex; gap: 10px; margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--mobilya-border); }

.my-review-list { display: flex; flex-direction: column; gap: 14px; }
.my-review-card { display: flex; gap: 14px; padding: 16px; border: 1px solid var(--mobilya-border); border-radius: 3px; }
.my-review-card-image { width: 64px; height: 64px; min-width: 64px; border-radius: 3px; overflow: hidden; background: var(--mobilya-soft); display: flex; align-items: center; justify-content: center; }
.my-review-card-image img { width: 100%; height: 100%; object-fit: cover; }
.my-review-card-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.my-review-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.my-review-card-body p { margin: 0; font-size: 13px; color: var(--mobilya-muted); line-height: 1.6; }

.order-detail-header-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.order-cancel-trigger { color: #b3423a; border-color: rgba(179,66,58,.3); }
.order-cancel-trigger:hover { background: rgba(179,66,58,.08); border-color: #b3423a; }
.order-cancel-form { width: 100%; max-width: 360px; }

/* GERÇEK EKSİKLİK DÜZELTMESİ (2026-08-24) — Üyelik Bilgilerim/Şifre
   Değiştir formlarının başarı mesajı (bkz. account-profile-panel.tsx). */
.profile-success { color: #2e7d4f; font-size: 12.5px; margin: 0; }

.cart-layout { align-items: start; gap: 32px; }
.cart-items { border-top: 1px solid var(--mobilya-border); }
.cart-items .cart-item { border: 0; border-bottom: 1px solid var(--mobilya-border); border-radius: 0; padding: 22px 8px; background: transparent; }
.cart-item img { width: 112px; height: 92px; border-radius: 3px; }
.cart-summary { position: sticky; top: 190px; border-radius: 3px; padding: 28px; background: #f6f3ed; box-shadow: none; }
.cart-summary h3 { font-family: 'Lora',serif; font-size: 24px; }
.cart-summary-cta { min-height: 50px; }
.summary-assurance { display: grid; gap: 4px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--mobilya-border); }
.summary-assurance b { font-size: 12px; }
.summary-assurance span { color: var(--mobilya-muted); font-size: 11px; line-height: 1.5; }

.checkout-steps { max-width: 780px; margin: 0 auto 34px; }
.checkout-steps::before { background: var(--mobilya-border); }
.checkout-step-index { border-radius: 50%; }
.checkout-panel { max-width: 860px; margin: 0 auto 22px; padding: clamp(24px,4vw,44px); border-radius: 3px; background: #fff; }
.checkout-actions { max-width: 860px; margin: 0 auto; }
.checkout-form { max-width: none; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.checkout-form label:nth-child(4) { grid-column: 1 / -1; }
.checkout-payment-option { min-height: 74px; border-radius: 3px; padding: 18px; }

@media (max-width: 800px) {
  .account-auth-shell { grid-template-columns: 1fr; padding-top: 28px; padding-bottom: 28px; }
  .account-auth-intro { padding: 38px 28px; }
  .account-auth-card { padding: 32px 24px; }
  .account-panel { grid-template-columns: 1fr; gap: 18px; }
  .account-content { padding: 22px 18px; }
  /* GERÇEK BUG DÜZELTMESİ (2026-08-24) — bkz. aydinlife/theme-shell.css
     aynı yorum: Adres Defterim'in 2 sütunlu grid'i mobilde sıkışıyordu. */
  .address-form-grid { grid-template-columns: 1fr; }
  .address-list { grid-template-columns: 1fr; }
  .address-card h4 { padding-right: 0; }
  .cart-summary { position: static; }
  .checkout-form { grid-template-columns: 1fr; }
  .checkout-form label:nth-child(4) { grid-column: auto; }
}

@media (max-width: 560px) {
  .commerce-page-heading { align-items: flex-start; margin-bottom: 20px; }
  .cart-items .cart-item { grid-template-columns: 76px 1fr auto; gap: 12px; }
  .cart-item img { width: 76px; height: 76px; }
  .cart-item-total { grid-column: 2; }
}

/* Ürün detay kalite revizyonu — referansın sıkı, ürün odaklı tipografisi */
.ProductDetailMainRow,
.ProductDetailMainRow button,
.urunOzellik,
.related-products-section {
  font-family: 'Open Sans', sans-serif;
}

.ProductDetailMainRow {
  grid-template-columns: minmax(0, 58%) minmax(360px, 42%);
  gap: 42px;
  padding-top: 18px;
}

.ProductDetailMainRow .RightDetail {
  align-self: start;
  padding: 28px 30px 32px;
  border-color: #e2e2e2;
  box-shadow: 0 8px 28px rgba(0,0,0,.045);
}

.RightDetail .ProductName h1 {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(23px, 2.1vw, 31px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.015em;
}

.product-eyebrow { color: #8a8a8a; font-size: 10px; letter-spacing: .12em; }
.PriceList { margin-top: 18px; padding-top: 18px; border-top: 1px solid #ededed; }
.PriceList .productPrice { margin: 14px 0 12px; }
.PriceList .discountPriceSpan { font-family: 'Open Sans',sans-serif; font-size: 29px; font-weight: 700; letter-spacing: -.02em; }
.PriceList .regularPriceSpan { font-size: 14px; }
.discount-chip,.new-chip,.installment-chip { padding: 7px 11px; font-size: 11px; }
.product-trust { margin: 20px 0 16px; font-size: 12px; }

.product-service-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  margin: 0 0 22px;
  border: 1px solid #e9e9e9;
  background: #fafafa;
}
.product-service-grid > div { min-width: 0; padding: 15px 8px; text-align: center; border-right: 1px solid #e9e9e9; }
.product-service-grid > div:last-child { border-right: 0; }
.product-service-grid span { display: block; height: 24px; color: var(--mobilya-brand); font-size: 19px; }
.product-service-grid b,.product-service-grid small { display: block; }
.product-service-grid b { margin-top: 4px; color: #333; font-size: 10px; line-height: 1.3; }
.product-service-grid small { margin-top: 3px; overflow: hidden; color: #8a8a8a; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }

.GalleryArea { border: 1px solid #ededed; background: #fff; }
.galleryOwl .item { display: flex; align-items: center; justify-content: center; min-height: 520px; }
.galleryOwl .item img { max-height: 620px; object-fit: contain; }
.galleryOwl-thumb { margin-top: 12px; }
.thumb-list { gap: 9px; }
.thumb-item { width: 78px !important; height: 66px !important; padding: 3px !important; border: 1px solid #ddd !important; background: #fff; }
.thumb-item.active { border-color: var(--mobilya-brand) !important; }

.urunOzellik { margin-top: 48px; }
.urunDetayPanel { border: 0; }
.detail-tabs {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 0;
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  background: #fff;
}
.detail-tabs button {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 10px;
  border: 0;
  border-right: 1px solid #e8e8e8;
  border-bottom: 3px solid transparent;
  background: #fff;
  color: #555;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.detail-tabs button:last-child { border-right: 0; }
.detail-tabs button:hover { color: var(--mobilya-brand); background: #fbfaf8; }
.detail-tabs button.active { color: #222; border-bottom-color: var(--mobilya-brand); background: #f8f5f0; }
.detail-tab-index { color: #aaa; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.detail-tabs button.active .detail-tab-index { color: var(--mobilya-brand); }
.detail-content { min-height: 260px; padding: 42px clamp(22px,5vw,72px); border-bottom: 1px solid #e5e5e5; }
.detail-panel-content { max-width: 1080px; margin: 0 auto; color: #555; font-size: 13px; line-height: 1.85; }
.detail-panel-content h2 { margin: 0 0 24px; color: #222; font-family: 'Open Sans',sans-serif; font-size: 20px; font-weight: 700; }
.detail-panel-content p { line-height: 1.85; }
.spec-list { border-top: 1px solid #e5e5e5; }
.spec-list li { display: grid; grid-template-columns: minmax(170px,30%) 1fr; padding: 13px 16px; border-bottom: 1px solid #e5e5e5; }
.spec-list li:nth-child(odd) { background: #fafafa; }
.spec-list li span:first-child { color: #333; font-weight: 700; }
.bank-table { border-radius: 0 !important; }

.related-products-section { margin-top: 58px; padding-top: 48px; border-top: 1px solid #ddd; }
.related-products-heading { position: relative; margin-bottom: 30px; text-align: center; }
.related-products-heading::before { content: ""; position: absolute; top: 39px; left: 0; right: 0; height: 1px; background: #e2e2e2; }
.related-products-heading span { color: var(--mobilya-brand); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.related-products-heading h2 { position: relative; width: max-content; max-width: 90%; margin: 10px auto 8px; padding: 0 24px; background: #fff; color: #222; font-size: 25px; font-weight: 600; }
.related-products-heading p { margin: 0; color: #888; font-size: 12px; }
.related-products-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.related-products-grid .productItem { transform: none; border-color: #e4e4e4; box-shadow: none; }
.related-products-grid .productItem:hover { transform: none; border-color: var(--mobilya-brand); box-shadow: none; }
.related-products-grid .productName a { font-size: 13px; font-weight: 600; }
.related-products-grid .discountPriceSpan { font-family: 'Open Sans',sans-serif; font-size: 18px; }

@media (max-width: 1050px) {
  .ProductDetailMainRow { grid-template-columns: minmax(0,55%) minmax(330px,45%); gap: 24px; }
  .ProductDetailMainRow .RightDetail { padding: 22px; }
  .related-products-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .ProductDetailMainRow { grid-template-columns: 1fr; }
  .galleryOwl .item { min-height: 360px; }
  .detail-tabs { display: flex; overflow-x: auto; }
  .detail-tabs button { flex: 0 0 170px; min-height: 68px; }
}
@media (max-width: 640px) {
  .ProductDetailMainRow .RightDetail { padding: 20px 16px; }
  .galleryOwl .item { min-height: 280px; }
  .product-service-grid > div { padding-inline: 4px; }
  .product-service-grid small { display: none; }
  .spec-list li { grid-template-columns: 1fr; gap: 4px; padding: 12px; }
  .detail-content { padding: 28px 14px; }
  .related-products-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .related-products-heading h2 { font-size: 22px; }
}

/* Ürün keşif akışı: kategori, filtre, kart ve ürün detay bütünlüğü */
.category-list { padding-top: 0; }
.category-hero {
  margin-bottom: 26px;
  padding: clamp(42px, 6vw, 78px) clamp(24px, 5vw, 68px);
  background: linear-gradient(135deg, #f0e9df, #ded1c1);
}
.category-hero .section-title { margin-bottom: 10px; }
.category-hero .category-description { max-width: 680px; margin: 0; color: #625c52; }
.category-toolbar { margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--mobilya-border); }
.category-toolbar-left { display: flex; align-items: center; gap: 14px; }
.filter-mobile-toggle { display: none; min-height: 38px; padding: 0 15px; border: 1px solid var(--mobilya-border); background: #fff; color: var(--mobilya-text); font-weight: 700; }
.category-sort select { min-height: 40px; border-radius: 3px; background: #fff; }
.category-layout { grid-template-columns: 250px minmax(0,1fr); gap: 34px; }
.filter-sidebar { top: 200px; }
.filter-sidebar .panel { border-width: 0 0 1px; border-radius: 0; background: transparent; }
.filter-sidebar .panel-heading { padding: 15px 0; background: transparent; border: 0; }
.filter-sidebar .panel-title { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.filter-sidebar .panel-body { padding: 0 0 15px; }
.filter-sidebar .list-group-item label { padding: 8px 0; }
.filter-sidebar .list-group-item label:hover { background: transparent; }
.filter-chip { border-radius: 2px; }
.pageBorder a { border-radius: 2px; }

.ProductDetailMainRow {
  display: grid !important;
  grid-template-columns: minmax(0,1.12fr) minmax(360px,.88fr);
  gap: clamp(34px,5vw,72px);
  padding: 24px 0 60px;
}
.ProductDetailMainRow .leftImage, .ProductDetailMainRow .RightDetail { float: none !important; width: auto !important; }
.ProductDetailMainRow .RightDetail { padding: clamp(22px,3vw,38px); border: 1px solid var(--mobilya-border); background: #fff; }
.product-eyebrow { margin-bottom: 12px; }
.RightDetail .ProductName h1 { font-family: 'Lora',serif; font-size: clamp(30px,3.2vw,46px); line-height: 1.13; font-weight: 600; letter-spacing: -.025em; }
.GalleryArea { background: #f4f1eb; }
.galleryOwl .item img { width: 100%; max-height: 680px; object-fit: contain; }
.thumb-item { border-radius: 2px !important; }
.discountPriceSpan { font-family: 'Lora',serif; font-size: 34px; font-weight: 700; }
.discount-chip,.new-chip,.installment-chip { border-radius: 2px; }
.product-trust { margin: 22px 0; padding: 18px 0; border-top: 1px solid var(--mobilya-border); border-bottom: 1px solid var(--mobilya-border); }
.product-trust li { margin: 8px 0; color: var(--mobilya-muted); }
.product-trust li::before { color: var(--mobilya-brand); }
.BasketBtn { gap: 10px; }
.BasketBtn .riSingle,.UFavorilerimeEkle,.basketBtn button { border-radius: 2px !important; }
.basketBtn button { min-height: 54px; background: var(--mobilya-text) !important; }
.basketBtn button:hover { background: var(--mobilya-brand-dark) !important; }
.urunOzellik { margin-top: 16px; }
.urunDetayPanel { border-radius: 0; border-color: var(--mobilya-border); }
.detail-tabs { background: #f6f3ed; }
.detail-tabs button.active { color: var(--mobilya-brand-dark); border-color: var(--mobilya-brand); }
.detail-content { padding: clamp(22px,4vw,44px); }

@media (max-width: 900px) {
  .category-layout { grid-template-columns: 1fr; }
  .filter-mobile-toggle { display: inline-flex; align-items: center; }
  .filter-sidebar { display: none; position: static; padding: 18px; border: 1px solid var(--mobilya-border); background: #fff; }
  .filter-sidebar.is-open { display: grid; }
  .ProductDetailMainRow { grid-template-columns: 1fr; padding-bottom: 36px; }
  .ProductDetailMainRow .RightDetail { padding: 26px 20px; }
}

@media (max-width: 560px) {
  .category-hero { margin-inline: -12px; padding: 34px 22px; }
  .category-toolbar { align-items: flex-end; }
  .category-sort { flex-direction: column; align-items: flex-start; gap: 4px; }
  .category-sort > span { display: none; }
  .ProductDetailMainRow { gap: 18px; }
  .breadcrumb-row .share-buttons { display: none; }
  .RightDetail .ProductName h1 { font-size: 30px; }
  .discountPriceSpan { font-size: 29px; }
  .detail-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .detail-tabs button { flex: 0 0 auto; white-space: nowrap; }
}

.empty-state {
  margin: 24px 0;
  padding: 32px;
  border: 1px dashed var(--mobilya-border);
  border-radius: 14px;
  background: var(--mobilya-soft);
  color: var(--mobilya-muted);
  text-align: center;
}

.home-page {
  background: #fdfcf9;
}

.home-intro { padding: clamp(64px, 9vw, 130px) 0; text-align: center; background: linear-gradient(135deg,#f3ede3,#ddd1c0); max-width: none; width: 100%; }
.home-intro > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.home-intro > span { display: block; margin-bottom: 16px; color: var(--mobilya-brand-dark); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.home-intro h1 { font-family: 'Lora',serif; font-size: clamp(36px,5vw,70px); line-height: 1.08; color: var(--mobilya-text); }
.home-intro p { margin-top: 20px; color: var(--mobilya-muted); font-size: 16px; line-height: 1.7; }
.home-intro a { display: inline-flex; margin-top: 24px; padding: 14px 24px; background: var(--mobilya-text); color: #fff; font-weight: 700; }

.service-strip { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--mobilya-border); border-top: 0; background: #fff; }
.service-strip > div { padding: 22px 26px; border-right: 1px solid var(--mobilya-border); }
.service-strip > div:last-child { border-right: 0; }
.service-strip b,.service-strip span { display:block; }
.service-strip b { color: var(--mobilya-text); font-size: 13px; }
.service-strip span { margin-top: 5px; color: var(--mobilya-muted); font-size: 11px; }

.instagram-story-section { padding: 38px 0 4px; }

.hero-slider {
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  background: var(--mobilya-soft);
}

.hero-slide {
  position: relative;
  display: block;
  width: 100%;
  scroll-snap-align: start;
  overflow: hidden;
  background: #eee;
}

.hero-slide img,
.promo-banner img,
.product-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-grid {
  display: grid;
  gap: 20px;
  padding-top: 32px;
  padding-bottom: 32px;
}

.promo-banner {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 3px;
  background: var(--mobilya-soft);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}

.promo-banner:hover img,
.hero-slide:hover img {
  transform: scale(1.025);
}

.promo-banner img,
.hero-slide img {
  transition: transform 0.25s ease;
}

/* --- Banner overlay (üst yazı + CTA butonu) — bkz. HomePage.tsx
   BannerOverlayContent (kullanıcı isteği 2026-08-12: "üstüne yazı veya
   link buton da gelebilir"). */
.banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 5%, 56px);
  pointer-events: none;
}

/* Kartın tamamını kaplayan görünmez arka plan linki — overlay CTA
   butonundan (bkz. .banner-overlay > * pointer-events:auto) DAHA
   ALÇAK z-index'te durur, böylece kart her yerine tıklanınca ana linke
   gider ama CTA'ya tıklanınca kendi (farklı olabilecek) linkine gider.
   Server Component'te onClick/stopPropagation KULLANILMAZ (bkz.
   HomePage.tsx BannerSlideCard dosya içi yorumu, 2026-08-12). */
.banner-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.banner-overlay > * {
  pointer-events: auto;
}

.banner-overlay-h-left { align-items: flex-start; text-align: left; }
.banner-overlay-h-center { align-items: center; text-align: center; }
.banner-overlay-h-right { align-items: flex-end; text-align: right; }

.banner-overlay-v-top { justify-content: flex-start; }
.banner-overlay-v-middle { justify-content: center; }
.banner-overlay-v-bottom { justify-content: flex-end; }

.banner-overlay-title {
  font-size: clamp(20px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  max-width: 560px;
}

.banner-overlay-subtitle {
  font-size: clamp(13px, 1.6vw, 18px);
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
  max-width: 480px;
}

.banner-overlay-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  width: fit-content;
  transition: transform 0.2s ease, background 0.2s ease;
}

.banner-overlay-btn:hover {
  transform: translateY(-1px);
}

.banner-overlay-btn-solid {
  background: var(--mobilya-brand);
  color: #fff;
}

.banner-overlay-btn-solid:hover {
  background: var(--mobilya-brand-dark);
}

.banner-overlay-btn-outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid #fff;
}

.banner-overlay-btn-outline:hover {
  background: rgba(255, 255, 255, 0.15);
}

.category-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.filter-sidebar {
  position: sticky;
  top: 180px;
  display: grid;
  gap: 14px;
}

.filter-sidebar .panel {
  border: 1px solid var(--mobilya-border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.filter-sidebar .panel-heading {
  padding: 14px 16px;
  background: var(--mobilya-soft);
  border-bottom: 1px solid var(--mobilya-border);
}

.filter-sidebar .panel-title {
  color: var(--mobilya-text);
  font-weight: 800;
}

.filter-sidebar .panel-body {
  padding: 10px 0;
}

.filter-sidebar .list-group {
  margin: 0;
  padding: 0;
  list-style: none;
}

.filter-sidebar .panel.is-open,
.filter-sidebar .panel-default,
.filter-sidebar .vertical-filter-panel {
  border-color: var(--mobilya-border);
}

.filter-sidebar .liFiltreElement {
  display: block;
}

.filter-sidebar .list-group-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  color: var(--mobilya-muted);
  cursor: pointer;
}

.filter-sidebar .list-group-item label:hover {
  color: var(--mobilya-brand);
  background: rgba(239, 125, 0, 0.06);
}

.check-box {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  border: 1px solid #d1d1d1;
  border-radius: 4px;
  background: #fff;
}

.check-swatch {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.check-label {
  min-width: 0;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px 18px;
}

.product-grid .productItem { border-radius: 3px; background: #fff; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.product-grid .productItem:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(49,42,34,.09); }

/* GERÇEK BUG DÜZELTMESİ (2026-08-07, tekstil-classic'in gerçek CSS
   izolasyon düzeltmesi devreye girince ORTAYA ÇIKTI): mobilya-classic'in
   kendi ProductCard.tsx'i ".ItemOrj col-lg-4 col-md-4 col-sm-6 col-xs-6"
   Bootstrap-tarzı sınıflar kullanıyor ama styles.css'te (referans site)
   bunlar TANIMSIZ genel grid sınıfları — hiçbir width/float kuralı
   uygulamıyorlardı, tarayıcı varsayılan block akışına düşüyordu ve
   .product-grid'in display:grid'iyle çakışıp kartların üst üste
   binmesine/bozulmasına yol açıyordu. AYNI bug tekstil-classic'te de
   vardı ve zaten düzeltilmişti (bkz. tekstil-classic/theme-shell.css
   .product-grid .ItemOrj) — mobilya'da bu bug önceki (yanlış) CSS
   mimarisinde tekstil'in CSS'i "kazara" aynı sayfaya sızdığı için hiç
   fark edilmemişti (canlı doğrulama: gerçek per-tema CSS izolasyonu
   devreye girince mobilya-demo anasayfasında ürün kartları bozuk
   render oldu). tekstil-classic'teki AYNI düzeltme burada da uygulanır. */
.product-grid .ItemOrj {
  float: none;
  width: 100%;
  max-width: 100%;
  padding: 0;
}

/* GERÇEK BUG DÜZELTMESİ (2026-08-10, tekstil-classic'te gerçek
   Playwright mouse tıklama testiyle bulundu, mobilya-classic'te de
   AYNI kök neden mevcut — styles.css'in ".productImage a { padding-
   bottom: 68% }" kuralı .favori > a'yı da yakalıyor, kalp ikonu
   linkini kartın büyük bölümünü kaplayan görünmez bir tıklama
   engelleyicisine çeviriyor). Aynı düzeltme burada da uygulanır. */
.productItem .favori a {
  padding-bottom: 0;
  width: 32px;
  height: 32px;
}

.productItem .favori button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mobilya-border);
  border-radius: 50%;
  background: #fff;
  color: var(--mobilya-text);
  font-size: 20px;
  cursor: pointer;
}
.productItem .favori button.is-favorite { color: #a63e35; border-color: #d9aaa5; }

/* GERÇEK BUG DÜZELTMESİ (2026-08-07, AYNI kök neden — CSS izolasyonu
   düzeltilince ortaya çıktı): styles.css'in gerçek CSS'inde (referans
   site) TAG selektörüyle "section{float:left;width:100%}" tanımlı.
   HomePage.tsx'in <section className="section"> (Kategoriler/Yeni
   Ürünler) ve ProductDetailPage'in "Benzer Ürünler" section'ı bu kurala
   tag bazında yakalanıyor, .section sınıf kuralımız float'ı hiç override
   etmiyordu — sonuç: section'lar float'lı kalıp height'ları collapse
   oluyordu, altındaki koyu #222 footer sayfanın ortasında görünür hale
   geliyordu. tekstil-classic'te AYNI bug zaten düzeltilmişti. */
.section {
  float: none;
}

.product-detail-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 40px;
  align-items: start;
}

.product-gallery {
  display: grid;
  gap: 14px;
}

.product-gallery img {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--mobilya-border);
  border-radius: 16px;
  background: var(--mobilya-soft);
}

.product-info {
  position: sticky;
  top: 180px;
  padding: 24px;
  border: 1px solid var(--mobilya-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
}

.product-info h1 {
  margin: 0 0 16px;
  color: var(--mobilya-text);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.product-info .productPrice {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}

.product-info .discountPriceSpan {
  color: #000;
  font-size: 24px;
  font-weight: 800;
}

.product-info .regularPriceSpan {
  color: #8a8a8a;
  font-size: 16px;
  text-decoration: line-through;
}

.installment-options {
  margin: 18px 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(239, 125, 0, 0.08);
  color: var(--mobilya-text);
  font-weight: 700;
}

.product-specs {
  width: 100%;
  margin-top: 18px;
  border-collapse: collapse;
  font-size: 14px;
}

.product-specs th,
.product-specs td {
  padding: 11px 0;
  border-bottom: 1px solid var(--mobilya-border);
  text-align: left;
  vertical-align: top;
}

.product-specs th {
  width: 38%;
  color: var(--mobilya-muted);
  font-weight: 700;
}

.product-reviews,
.related-products {
  margin-top: 42px;
}

.product-reviews h2,
.related-products h2 {
  margin: 0 0 18px;
  color: var(--mobilya-text);
  font-size: 24px;
  font-weight: 800;
}

.review-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--mobilya-border);
}

.review-item strong {
  display: block;
  margin-bottom: 6px;
  color: var(--mobilya-text);
}

.review-item p {
  margin: 0;
  color: var(--mobilya-muted);
  line-height: 1.65;
}

@media (max-width: 900px) {
  .site-header {
    position: static;
  }

  .header-main,
  .topbar-inner {
    flex-wrap: wrap;
  }

  .header-main {
    gap: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .brand {
    min-width: 0;
    flex: 1 1 auto;
  }

  .header-actions {
    order: 2;
  }

  .header-search {
    order: 3;
    flex-basis: 100%;
  }

  .main-nav > .container > ul {
    display: none;
    min-height: 44px;
    flex-direction: column;
    align-items: stretch;
  }

  .main-nav > .container > ul.is-open { display: flex; }
  .mobile-menu-toggle { display: flex; width: 100%; min-height: 46px; align-items: center; gap: 9px; border: 0; background: #fff; color: var(--mobilya-text); font-weight: 700; }
  .nav-item > a { width: 100%; border-top: 1px solid var(--mobilya-border); }

  .nav-item > a {
    min-height: 44px;
    padding-inline: 12px;
  }

  .mega-menu {
    position: fixed;
    top: auto;
    left: 16px;
    right: 16px;
    max-width: none;
  }

  .banner-grid {
    grid-template-columns: 1fr !important;
  }

  .category-layout,
  .product-detail-main,
  .footer-main {
    grid-template-columns: 1fr;
  }

  .service-strip { grid-template-columns: repeat(2,1fr); }
  .service-strip > div:nth-child(2) { border-right: 0; }
  .service-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--mobilya-border); }

  .filter-sidebar,
  .product-info {
    position: static;
  }
}

@media (max-width: 560px) {
  .container {
    width: min(100% - 24px, 1200px);
  }

  .topbar-inner {
    justify-content: center;
  }

  .topbar-message { display: none; }
  .topbar-links { width: 100%; justify-content: space-between; gap: 10px; }

  .header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .header-search button {
    min-width: 64px;
    padding-inline: 14px;
  }

  .hero-slide {
    min-height: 220px;
  }

  .promo-banner {
    min-height: 150px;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
  }

  .section,
  .category-list,
  .product-detail {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .section-heading { align-items: flex-start; }
  .section-heading > a { font-size: 12px; white-space: nowrap; }
  .service-strip > div { padding: 16px 14px; }
}

/* Kurumsal, destek ve favori sayfaları */
.editorial-hero { max-width: 900px; margin: 0 auto 54px; padding: clamp(46px,8vw,92px) 24px; text-align: center; background: linear-gradient(145deg,#f2ece3,#dfd2c2); }
.editorial-hero h1 { margin: 0; font-family: 'Lora',serif; font-size: clamp(38px,5vw,64px); line-height: 1.08; color: var(--mobilya-text); }
.editorial-hero p { max-width: 680px; margin: 20px auto 0; color: var(--mobilya-muted); font-size: 15px; line-height: 1.75; }
.about-page { max-width: 1180px; }
.about-content-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px,7vw,90px); padding: 20px 0 40px; }
.about-content-grid h2,.contact-grid h2,.store-contact-panel h2 { margin: 0; font-family: 'Lora',serif; font-size: clamp(27px,3vw,40px); line-height: 1.2; }
.about-content-grid p { margin: 0 0 18px; color: var(--mobilya-muted); font-size: 15px; line-height: 1.8; }
.about-content-grid a { color: var(--mobilya-brand); font-weight: 700; }
.contact-page { max-width: 1120px; }
.contact-grid { gap: 0; border: 1px solid var(--mobilya-border); background: #fff; }
.contact-info,.contact-form { padding: clamp(28px,5vw,56px); }
.contact-info { background: #f6f3ed; }
.contact-info h2,.contact-form h2 { margin-bottom: 24px; }
.contact-info p { margin: 10px 0; line-height: 1.65; }
.contact-form input,.contact-form textarea { min-height: 48px; border-radius: 3px; background: #fdfcf9; }
.contact-form .btn { border-radius: 2px; min-height: 50px; }
.faq-page { max-width: 960px; }
.faq-page .editorial-hero { margin-bottom: 34px; }
.faq-question { padding: 22px 4px; font-size: 16px; }
.faq-answer { padding: 0 44px 24px 4px; line-height: 1.8; }
.stores-page { max-width: 1180px; }
.store-contact-panel { display: grid; grid-template-columns: 1.2fr .8fr; gap: 36px; align-items: center; padding: clamp(28px,5vw,58px); border: 1px solid var(--mobilya-border); background: #fff; }
.store-contact-panel p { max-width: 620px; color: var(--mobilya-muted); line-height: 1.7; }
.store-contact-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.experience-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 28px; background: var(--mobilya-border); border: 1px solid var(--mobilya-border); }
.experience-grid article { padding: 28px; background: #fdfcf9; }
.experience-grid b { font-family: 'Lora',serif; font-size: 18px; }
.experience-grid p { color: var(--mobilya-muted); line-height: 1.65; }
.favorites-page { max-width: 1180px; }
.favorites-empty { padding: 76px 24px; border: 1px solid var(--mobilya-border); background: #f6f3ed; text-align: center; }
.favorites-empty > span { display: block; color: var(--mobilya-brand); font-size: 54px; }
.favorites-empty h2 { margin: 12px 0 8px; font-family: 'Lora',serif; font-size: 28px; }
.favorites-empty p { max-width: 530px; margin: 0 auto 24px; color: var(--mobilya-muted); line-height: 1.65; }
.favorites-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.favorite-card { border: 1px solid var(--mobilya-border); background: #fff; }
.favorite-card-image { display: flex; aspect-ratio: 4/3; align-items: center; justify-content: center; background: #f4f1eb; color: var(--mobilya-muted); }
.favorite-card-image img { width: 100%; height: 100%; object-fit: cover; }
.favorite-card-body { padding: 20px; }
.favorite-card-body h2 { min-height: 44px; margin: 0 0 12px; color: var(--mobilya-text); font-size: 15px; line-height: 1.45; }
.favorite-card-body b { display: block; font-family: 'Lora',serif; font-size: 21px; }
.favorite-card-body button { margin-top: 16px; padding: 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--mobilya-muted); cursor: pointer; }

@media (max-width: 800px) {
  .about-content-grid,.store-contact-panel { grid-template-columns: 1fr; }
  .store-contact-actions { justify-content: flex-start; }
  .experience-grid { grid-template-columns: 1fr; }
  .favorites-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  /* Negatif marjin yalnızca yatay padding'i olan bir kapsayıcı içinde
     telafi edilebilir; hakkımızda/iletişim/mağazalar sayfalarında
     .editorial-hero doğrudan padding'siz <main> altında duruyor ve
     bu kural sayfayı 12px sağa TAŞIRIYORDU (ölçüm: 375px viewport,
     scrollWidth 387px). */
  .container > .editorial-hero { margin-inline: -12px; }
  .editorial-hero { max-width: 100%; margin-bottom: 28px; padding: 42px 22px; }
  .contact-info,.contact-form { padding: 26px 20px; }
  .favorites-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
 * Statik sayfalar (Iletisim, Magazalarimiz, SSS) -- canli dogrulamada
 * bulundu: Footer.tsx bu sayfalara link veriyordu (/iletisim,
 * /magazalarimiz, /sikca-sorulan-sorular) ama hic sayfa componenti
 * OLUSTURULMAMISTI (404) -- arama kutusu kusuruyla AYNI sinif bir eksik.
 * Sinif adlari referans mobilya-template projesindeki Contact.css,
 * Stores.css ve Faq.css dosyalarindan birebir alindi, ama CSS custom
 * property adlari bu dosyanin kendi mobilya- on ekli degisken setine
 * (dosya basindaki root blogu) eslendi -- referans template projesinin
 * color- / radius / shadow-card-hover degisken seti burada hic tanimli
 * degil (o degiskenler mobilya-template projesinin global index.css
 * dosyasinda, bu port islemine hic dahil edilmemis).
 * ------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
}

.contact-info p {
  margin: 6px 0;
  color: var(--mobilya-muted);
  font-size: 14px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-form input,
.contact-form textarea {
  border: 1px solid var(--mobilya-border);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.contact-form input:hover,
.contact-form textarea:hover {
  border-color: #c9c9c9;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--mobilya-brand);
}

.contact-form .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form .btn-primary {
  background: var(--mobilya-brand);
  color: #fff;
}

.contact-form .btn-primary:hover {
  background: var(--mobilya-brand-dark);
}

.stores-intro {
  text-align: center;
  color: var(--mobilya-muted);
  max-width: 640px;
  margin: 0 auto 32px;
}

.stores-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.store-card {
  border: 1px solid var(--mobilya-border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.store-card:hover {
  border-color: var(--mobilya-brand);
  box-shadow: var(--mobilya-shadow);
}

.store-card img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.4s ease;
  width: 100%;
}

.store-card:hover img {
  transform: scale(1.04);
}

.store-card-body {
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.store-card-body h3 {
  margin: 0;
  font-size: 15px;
}

.store-card-body span {
  font-size: 12.5px;
  color: var(--mobilya-muted);
}

.faq-page {
  max-width: 760px;
}

.faq-list {
  border-top: 1px solid var(--mobilya-border);
}

.faq-item {
  border-bottom: 1px solid var(--mobilya-border);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  background: none;
  border: none;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  transition: color 0.2s ease;
  cursor: pointer;
}

.faq-question:hover {
  color: var(--mobilya-brand);
}

.faq-item.open .faq-question {
  color: var(--mobilya-brand);
}

.faq-icon {
  font-size: 18px;
  font-weight: 400;
  color: var(--mobilya-muted);
}

.faq-answer {
  padding: 0 0 18px;
  color: var(--mobilya-muted);
  line-height: 1.6;
  font-size: 14px;
}

@media (max-width: 900px) {
  .stores-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 800px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* styles.css (referans siteden ham kopyalanan CSS) .leftImage/.RightDetail
   satırlarını "opacity:0; visibility:hidden" ile tanımlıyor ve sadece body'de
   JS'in eklediği ".TopDet" class'ı varken görünür yapıyor (bkz. styles.css
   L459-462) — bu bir JS-tetikli fade-in efekti. Bizim statik server-render
   component'imizde o JS yok, bu yüzden burada her zaman görünür kılıyoruz. */
.leftImage,
.RightDetail {
  opacity: 1 !important;
  visibility: visible !important;
}

/* GERÇEK BUG DÜZELTMESİ (2026-08-07, Playwright mobil viewport
   doğrulamasıyla bulundu): styles.css'in mobil breakpoint'lerinde
   ".RightDetail{width:100%}" tanımlı ama "float:right" hiçbir yerde geri
   alınmıyor (float:none yok) — %100 genişlikte floated bir eleman içeriği
   (Stokta var / Tahmini teslim rozetleri) viewport'un sağına taşırıyordu.
   .ProductDetailMainRow zaten display:flow-root (bkz. yukarıdaki bug
   düzeltmesi), bu yüzden RightDetail'in artık float olmasına hiç gerek yok. */
@media (max-width: 900px) {
  .RightDetail {
    float: none !important;
    width: 100% !important;
  }
}

/* styles.css .leftImage'i "position: sticky !important" yapıyor (referans
   sitede scroll ile galeri sabit kalır). float:left ile birleşince headless
   Chrome/CDP ekran görüntüsü aracında sticky elemanın compositing katmanı
   siyah render ediliyor (bilinen bir tarayıcı motoru rendering hatası — bkz.
   2026-08-07 canlı doğrulama, HTML kaynağında hiçbir siyah arkaplan kuralı
   yok). Statik server-render sayfamızda scroll-sabit galeri gerekli
   olmadığından sticky'i kapatıyoruz. */
.leftImage {
  position: static !important;
}

/* styles.css .ProductDetailMainRow/.leftImage/.RightDetail float:left/right
   kullanıyor ama hiçbir yerde clearfix yok (referans sitede muhtemelen bir
   üst kapsayıcıda global bir clearfix vardı). GERÇEK KÖK NEDEN (2026-08-07
   Playwright ile piksel-piksel doğrulandı): .ProductDetailMainRow'un KENDİSİ
   de float:left — bu yüzden onu saran .container'ın height'ı 0'a collapse
   oluyor, .container'dan SONRA gelen <footer> (background: #222, neredeyse
   siyah) yukarı kayıp floated galeri/detay kutularının ÜSTÜNE görsel olarak
   biniyor (siyah dikdörtgen budur — footer'ın kendisi, konum hatası
   yüzünden). display:flow-root ile .ProductDetailMainRow'a yeni bir block
   formatting context veriyoruz, böylece kendi floated child'larını
   (leftImage/RightDetail) kapsıyor ve KENDİSİ artık floated olmadığından
   .container'ın height'ına normal şekilde katkı sağlıyor. */
.ProductDetailMainRow {
  float: none !important;
  display: flow-root;
}

.ProductDetailMainRow::after {
  content: "";
  display: table;
  clear: both;
}

/* ===== Ürün Detay — zenginleştirilmiş sekmeli sayfa (2026-08-07) =====
   Ported from mobilya-template/src/pages/ProductDetail.css — referans
   token isimleri (--color-primary vb.) buradaki --mobilya-* isimlerine
   eşlendi. bkz. kullanıcı geri bildirimi sonrası ProductDetailPage.tsx
   zenginleştirmesi (breadcrumb, galeri thumbnail, rating, taksit çipi,
   sekmeli detay paneli, ödeme tablosu). Sepet/parça/kartela class'ları
   BİLİNÇLİ OLARAK dahil edilmedi (bkz. ProductDetailPage.tsx dosya başı
   yorumu — kapsam dışı gerekçeler). */

.breadcrumb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 15px;
}

.breadcrumb-row .breadcrumb {
  padding: 0;
}

.product-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 2px;
  font-size: 13px;
  color: var(--mobilya-muted);
}

.rating-stars ul.rating {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 2px;
}

.rating-stars ul.rating li {
  font-size: 15px;
  color: #d9d9d9;
}

.rating-stars ul.rating li.filled {
  color: #ff8a00;
}

.PuanVerSag {
  font-size: 13px;
  color: var(--mobilya-muted);
}

.price-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.discount-chip,
.new-chip,
.installment-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
}

.discount-chip {
  background: rgba(214, 40, 40, 0.09);
  color: #b42323;
}

.new-chip {
  background: rgba(46, 125, 79, 0.1);
  color: #2e7d4f;
}

.installment-chip {
  border: none;
  background: rgba(239, 125, 0, 0.09);
  color: var(--mobilya-brand-dark);
  cursor: pointer;
  transition: background 0.2s;
}

.installment-chip:hover {
  background: rgba(239, 125, 0, 0.16);
}

/* GERÇEK BUG DÜZELTMESİ (2026-08-07, Playwright mobil viewport
   doğrulamasıyla bulundu): .PriceList/.productPrice/.discountPriceSpan/
   .regularPriceSpan hiçbir yerde (bu dosyada da referans styles.css'te de)
   tanımlı değildi — sayfada var olan tek eşleşen kural ".product-info
   .discountPriceSpan" idi (satır ~690), ama ProductDetailPage.tsx'in
   markup'ı .product-info DEĞİL .PriceList altında (bkz. sayfa dosyası).
   Sonuç: fiyat span'leri stilsiz, varsayılan tarayıcı fontuyla render
   oluyordu — masaüstünde az fark ediliyordu, mobilde (dar RightDetail
   genişliğinde) belirgin şekilde taşıyor/kesiliyordu. */
.PriceList {
  margin: 11px 0 0;
}

.productPrice {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}

.discountPriceSpan {
  font-size: 28px;
  font-weight: 800;
  color: var(--mobilya-text);
}

.regularPriceSpan {
  font-size: 15px;
  color: var(--mobilya-muted);
  text-decoration: line-through;
}

.product-trust {
  list-style: none;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--mobilya-border);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  /* GERÇEK BUG DÜZELTMESİ (2026-08-07, Playwright mobil viewport
     doğrulamasıyla bulundu): kardeş elemanlar .ProductName/.PriceList
     referans CSS'te "float:left; width:100%" (styles.css) — bu float'lı
     kutuların yanında .product-trust'a clear uygulanmazsa, tarayıcı onu
     kalan (0 genişlikte) float alanına sıkıştırıyordu; "Stokta var /
     Tahmini teslim" viewport dışına taşıyordu. clear:both bunu düzeltir. */
  clear: both;
  width: 100%;
}

.product-trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--mobilya-muted);
}

.product-trust .trust-stock {
  color: #2e7d4f;
  font-weight: 600;
}

.product-trust .trust-out {
  color: #b3423a;
  font-weight: 600;
}

.urunOzellik {
  margin: 30px 0;
  border: 1px solid var(--mobilya-border);
  border-radius: 8px;
  background: var(--mobilya-surface);
}

/* GERÇEK BUG DÜZELTMESİ (2026-08-07, Playwright mobil viewport
   doğrulamasıyla bulundu): styles.css L2564 "@media (max-width:767px)
   { .urunOzellik{display: none;} }" — referans sitede mobilde bu blok
   tamamen gizlenip yerine ayrı bir accordion markup'ı (.urunOzellikTab,
   bizim component'imizde YOK) gösteriliyor. Bizim ProductDetailPage.tsx
   sadece .urunOzellik render ettiğinden, bu kural mobilde 5 sekmeli detay
   panelinin (Açıklama/Özellikler/Ödeme/Teslimat/Yorumlar) TAMAMEN
   kaybolmasına yol açıyordu — gerçek veri render ediliyordu ama görünmüyordu.
   Statik sayfamızda mobil-özel accordion yok, bu yüzden masaüstüyle aynı
   sekmeli paneli mobilde de görünür tutuyoruz. */
.urunOzellik {
  display: block !important;
}

.urunDetayPanel {
  display: block;
  padding: 28px 28px 22px;
}

.detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--mobilya-soft);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 24px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
}

.detail-tabs button {
  flex: 1 1 0;
  text-align: center;
  border: none;
  background: transparent;
  color: #4a4a4a;
  padding: 16px 22px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.detail-tabs button.active {
  background: var(--mobilya-brand);
  color: #fff;
  box-shadow: 0 14px 28px rgba(239, 125, 0, 0.16);
}

.detail-tabs button:hover {
  background: rgba(239, 125, 0, 0.12);
}

.detail-content {
  padding: 6px 4px 10px;
  min-height: 220px;
}

.detail-panel-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.detail-panel-content p,
.detail-panel-content ul {
  color: #444;
  line-height: 1.8;
  margin: 0;
}

.spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.spec-list li {
  display: grid;
  grid-template-columns: minmax(180px, 320px) 1fr;
  gap: 24px;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.6;
}

.spec-list li:nth-child(even) {
  background: var(--mobilya-soft);
}

.spec-list li span:first-child {
  font-weight: 700;
}

.spec-list li span:last-child {
  color: #444;
}

.delivery-list {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
}

.delivery-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 10px 0;
}
.delivery-content p {
  margin: 0 0 10px;
  line-height: 1.7;
}
.delivery-content ul, .delivery-content ol {
  padding-left: 20px;
  margin: 0 0 10px;
}
/* Teslimat/Kurulum dosya bağlantıları — bkz. aydinlife/theme-shell.css
   AYNI .ay-doc-link yorumu (2026-08-24 kullanıcı geri bildirimi). */
.delivery-content a {
  color: #b5651d;
  text-decoration: underline;
}
.delivery-content a.ay-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 6px 4px 0;
  padding: 9px 14px;
  border: 1px solid #e1ded9;
  border-radius: 5px;
  background: #f7f5f2;
  font-size: 13px;
  font-weight: 700;
  color: #222;
  text-decoration: none;
}
.delivery-content a.ay-doc-link:hover {
  border-color: #b5651d;
}
.delivery-content a.ay-doc-link::before {
  content: "⬇";
  font-size: 13px;
  color: #b5651d;
}

.bank-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.bank-logo {
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
  color: var(--mobilya-brand-dark);
}

.bank-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--mobilya-border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
}

.bank-table th,
.bank-table td {
  padding: 10px 8px;
  text-align: center;
}

.bank-table thead th {
  background: var(--mobilya-brand);
  color: #fff;
  font-weight: 700;
}

.bank-table tbody tr:nth-child(even) {
  background: var(--mobilya-soft);
}

.bank-row-label {
  font-weight: 700;
}

.verified-badge {
  color: #2e7d4f;
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 720px) {
  .urunDetayPanel {
    padding: 0 15px 20px;
  }
}

/* --- Sepete Ekle akışı (kullanıcı geri bildirimi 2026-08-11: "sepete
   ekle butonu yok" — bkz. ProductDetailPage.tsx BasketBtn bölümü).
   mobilya-template/src/pages/ProductDetail.css'ten port edildi (--color-*
   değişkenleri --mobilya-* karşılıklarına eşlendi). */
.meta-dot {
  color: #cfcfcf;
}

.meta-brand strong {
  color: var(--mobilya-dark);
  font-weight: 600;
}

.rating-stars ul.rating {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 2px;
}

.rating-stars ul.rating li {
  font-size: 15px;
  color: #d9d9d9;
}

.rating-stars ul.rating li.filled {
  color: #ff8a00;
}

.PuanVerSag {
  font-size: 13px;
  color: var(--mobilya-muted);
}

.price-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.installment-chip,
.color-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
}

.installment-chip {
  border: none;
  background: rgba(239, 125, 0, 0.09);
  color: var(--mobilya-brand-dark);
  cursor: pointer;
  transition: background 0.2s;
}

.installment-chip:hover {
  background: rgba(239, 125, 0, 0.16);
}

.installment-chip svg {
  width: 16px;
  height: 16px;
}

.installment-chip .chip-go {
  width: 13px;
  height: 13px;
  margin-left: -2px;
  opacity: 0.7;
}

.color-chip {
  border: 1px solid var(--mobilya-border);
  color: #444;
}

.color-chip i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.discount-chip,
.new-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
}

.discount-chip {
  background: rgba(179, 66, 58, 0.1);
  color: #b3423a;
}

.new-chip {
  background: rgba(239, 125, 0, 0.09);
  color: var(--mobilya-brand-dark);
}

#divSatinAl {
  margin: 20px 0 10px;
}

.BasketBtn {
  display: flex;
  align-items: center;
  gap: 12px;
}

.Basketinp {
  margin-right: 0;
}

.riSingle {
  display: flex;
  align-items: center;
  border: 1px solid var(--mobilya-border);
  border-radius: 8px;
  overflow: hidden;
  height: 60px;
}

.riSingle button {
  width: 40px;
  height: 60px;
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
}

.riSingle input {
  width: 40px;
  height: 60px;
  border: none;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #000;
}

.basketBtn {
  flex: 1;
}

.basketBtn button {
  width: 100%;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: 8px;
  background-color: var(--mobilya-brand);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(239, 125, 0, 0.24);
  transition: background 0.25s, box-shadow 0.25s, transform 0.15s;
}

.basketBtn button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.basketBtn button svg {
  width: 21px;
  height: 21px;
}

.basketBtn button:hover {
  background-color: var(--mobilya-brand-dark);
  box-shadow: 0 8px 18px rgba(239, 125, 0, 0.3);
}

.basketBtn button:active {
  transform: translateY(1px);
}

@media (max-width: 640px) {
  .BasketBtn {
    flex-wrap: wrap;
  }
  .Basketinp {
    order: 1;
  }
  .UFavorilerimeEkle {
    order: 2;
    margin-left: auto;
  }
  .basketBtn {
    order: 3;
    flex: 1 1 100%;
  }
}

.UFavorilerimeEkle {
  width: 54px;
  height: 54px;
  border: 1px solid var(--mobilya-border);
  border-radius: 50%;
  background: #fff;
  font-size: 18px;
  color: var(--mobilya-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s, border-color 0.2s;
}

.UFavorilerimeEkle.active,
.UFavorilerimeEkle:hover {
  color: #e0433a;
  border-color: #e0433a;
}

.share-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.share-label {
  font-size: 13px;
  color: var(--mobilya-muted);
  margin-right: 2px;
}

.share-buttons a {
  width: 34px;
  height: 34px;
  border: 1px solid var(--mobilya-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mobilya-muted);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.share-buttons a:hover {
  color: var(--mobilya-brand);
  border-color: var(--mobilya-brand);
  background: rgba(239, 125, 0, 0.06);
}

.share-buttons svg {
  width: 17px;
  height: 17px;
}

.breadcrumb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.cart-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1c1c1c;
  color: #fff;
  padding: 14px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
  z-index: 9999;
  animation: cart-toast-in 0.25s ease;
}

@keyframes cart-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* --- Genel buton/form yardımcıları — mobilya-template/src/index.css'ten
   port edildi (--color-* -> --mobilya-* eşlemesiyle). Sepet/Checkout/
   Hesabım/Sipariş Takip sayfalarının hepsi bunları kullanır. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-primary {
  background: var(--mobilya-brand);
  color: #fff;
}

.btn-primary:hover {
  background: var(--mobilya-brand-dark);
}

.btn-outline {
  background: #fff;
  border-color: var(--mobilya-border);
  color: var(--mobilya-text);
}

.btn-outline:hover {
  border-color: var(--mobilya-brand);
  color: var(--mobilya-brand);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.field-error {
  color: #b3423a;
  font-size: 12.5px;
  margin-top: 4px;
}

/* --- Sepetim sayfası — mobilya-template/src/pages/Cart.css'ten port edildi. --- */
.cart-empty {
  text-align: center;
  padding: 80px 0;
}

.cart-empty h1 {
  margin-bottom: 12px;
}

.cart-empty p {
  color: var(--mobilya-muted);
  margin-bottom: 24px;
}

.cart-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  margin-top: 24px;
}

.cart-items .cart-item {
  display: grid;
  grid-template-columns: 80px 1fr auto auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--mobilya-border);
}

.cart-item img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

.cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cart-item-info a {
  font-weight: 600;
  font-size: 14px;
}

.cart-item-info a:hover {
  color: var(--mobilya-brand);
}

.cart-item-price {
  font-size: 13px;
  color: var(--mobilya-muted);
}

.qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--mobilya-border);
  border-radius: 8px;
}

.qty-stepper button {
  width: 32px;
  height: 36px;
  border: none;
  background: none;
  font-size: 15px;
  cursor: pointer;
}

.qty-stepper button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.qty-stepper span {
  width: 28px;
  text-align: center;
  font-size: 13.5px;
}

.cart-item-total {
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}

.cart-item-remove {
  border: none;
  background: none;
  color: var(--mobilya-muted);
  font-size: 16px;
  cursor: pointer;
}

.cart-item-remove:hover {
  color: #ec1c24;
}

.cart-summary {
  border: 1px solid var(--mobilya-border);
  border-radius: 8px;
  padding: 20px;
  height: fit-content;
}

.cart-summary h3 {
  margin: 0 0 16px;
  font-size: 15px;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  padding: 8px 0;
  color: var(--mobilya-muted);
}

.cart-summary-total {
  border-top: 1px solid var(--mobilya-border);
  margin-top: 8px;
  padding-top: 12px;
  font-weight: 700;
  font-size: 16px;
  color: var(--mobilya-dark);
}

.cart-summary-cta {
  width: 100%;
  margin-top: 16px;
}

@media (max-width: 800px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }
  .cart-items .cart-item {
    grid-template-columns: 60px 1fr;
    grid-template-areas:
      "image info"
      "image qty";
  }
}

@media (max-width: 600px) {
  .cart-items .cart-item { display: block; padding: 12px 0; }
  .cart-item img { width: 64px; height: 64px; }
  .cart-item-info { margin-left: 0; }
  .qty-stepper { margin-top: 8px; }
}

/* --- Sipariş Tamamla (Checkout) — mobilya-template/src/pages/Checkout.css'ten port edildi. --- */
.checkout-steps {
  display: flex;
  gap: 24px;
  margin: 24px 0 32px;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.checkout-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--mobilya-muted);
}

.checkout-steps li.done {
  color: var(--mobilya-dark);
  font-weight: 600;
}

.checkout-step-index {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mobilya-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.checkout-steps li.done .checkout-step-index {
  background: var(--mobilya-brand);
  color: #fff;
}

.checkout-panel {
  border: 1px solid var(--mobilya-border);
  border-radius: 8px;
  padding: 24px;
  min-height: 160px;
  margin-bottom: 20px;
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
}

.checkout-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}

.checkout-form input,
.checkout-form textarea,
.checkout-form select {
  border: 1px solid var(--mobilya-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  transition: border-color 0.2s ease;
  font-family: inherit;
}

.checkout-form input:focus,
.checkout-form textarea:focus,
.checkout-form select:focus {
  outline: none;
  border-color: var(--mobilya-brand);
}

.checkout-actions {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.checkout-cart-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkout-cart-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.checkout-cart-row img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
}

.checkout-cart-row-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 3px;
  font-size: 13.5px;
  font-weight: 600;
}

.checkout-cart-row-meta {
  font-size: 12px;
  color: var(--mobilya-muted);
  font-weight: 400;
}

.checkout-cart-row-price {
  font-weight: 700;
  font-size: 14px;
}

.checkout-cart-total {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--mobilya-border);
  margin-top: 8px;
  padding-top: 12px;
  font-weight: 700;
}

.checkout-payment-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checkout-payment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--mobilya-border);
  border-radius: 8px;
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.checkout-payment-option:hover {
  border-color: var(--mobilya-brand);
  background: var(--mobilya-soft);
}

.checkout-payment-option span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.checkout-payment-option small {
  color: var(--mobilya-muted);
  font-size: 12px;
}

.checkout-confirmation {
  text-align: center;
  padding: 20px 0;
}

.checkout-confirmation-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1c8a3d;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin: 0 auto 16px;
}

.checkout-confirmation p {
  color: var(--mobilya-muted);
  margin: 4px 0;
}

.checkout-error {
  background: rgba(179, 66, 58, 0.08);
  border: 1px solid rgba(179, 66, 58, 0.3);
  color: #b3423a;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13.5px;
}

/* --- Hesabım (üyelik/sipariş görüntüleme) — mobilya-template/src/pages/
   Account/Account.css'ten port edildi. --- */
.account-auth {
  max-width: 420px;
  margin: 0 auto;
}

.account-auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--mobilya-border);
  margin-bottom: 24px;
}

.account-auth-tabs button {
  flex: 1;
  padding: 12px;
  background: none;
  border: none;
  font-weight: 600;
  color: var(--mobilya-muted);
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease;
  cursor: pointer;
}

.account-auth-tabs button:hover {
  color: var(--mobilya-dark);
}

.account-auth-tabs button.active {
  color: var(--mobilya-dark);
  border-color: var(--mobilya-brand);
}

.account-auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.account-auth-form input {
  padding: 12px 14px;
  border: 1px solid var(--mobilya-border);
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s ease;
  font-family: inherit;
}

.account-auth-form input:focus {
  outline: none;
  border-color: var(--mobilya-brand);
}

.account-panel {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
}

.account-sidebar h3 {
  font-size: 15px;
  margin: 0 0 14px;
}

.account-sidebar li {
  margin-bottom: 4px;
  list-style: none;
}

.account-sidebar ul {
  padding: 0;
}

.account-sidebar button {
  background: none;
  border: none;
  padding: 9px 10px;
  width: 100%;
  text-align: left;
  font-size: 13.5px;
  border-radius: 8px;
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.account-sidebar button:hover {
  background: var(--mobilya-soft);
  color: var(--mobilya-brand);
}

.account-sidebar li.active button {
  background: var(--mobilya-soft);
  color: var(--mobilya-brand);
  font-weight: 600;
}

@media (max-width: 800px) {
  .account-panel {
    grid-template-columns: 1fr;
  }
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.order-card {
  border: 1px solid var(--mobilya-border);
  border-radius: 8px;
  padding: 16px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.order-card:hover {
  border-color: var(--mobilya-brand);
  box-shadow: var(--mobilya-shadow);
}

.order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}

.order-card-header b {
  display: block;
  font-size: 14px;
}

.order-card-date {
  font-size: 12px;
  color: var(--mobilya-muted);
}

.order-status {
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  white-space: nowrap;
}

.order-status-done {
  background: rgba(28, 138, 61, 0.12);
  color: #1c8a3d;
}

.order-status-shipping {
  background: rgba(239, 125, 0, 0.12);
  color: var(--mobilya-brand);
}

.order-status-pending {
  background: rgba(154, 154, 154, 0.16);
  color: #6b6b6b;
}

.order-status-cancelled {
  background: rgba(179, 66, 58, 0.12);
  color: #b3423a;
}

.order-card-items {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.order-card-item-chip {
  font-size: 12px;
  color: var(--mobilya-muted);
  background: var(--mobilya-soft);
  border-radius: 8px;
  padding: 6px 10px;
}

.order-card-footer {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  padding-top: 12px;
  border-top: 1px dashed var(--mobilya-border);
}

.order-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.order-detail-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.order-detail-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--mobilya-border);
  border-radius: 8px;
}

.order-detail-item img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--mobilya-soft);
}

.order-detail-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13.5px;
}

.order-detail-summary {
  border-top: 1px solid var(--mobilya-border);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 320px;
  margin-left: auto;
}

/* İade talebi kutusu — hesabim/siparislerim/[id]/page.tsx
   ReturnRequestBox bileşeni. Yalnızca fulfillmentStatus="DELIVERED"
   siparişlerde ürün kaleminin altında görünür. */
.return-request-box {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.return-request-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--mobilya-muted);
}

.return-status {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.return-status-pending {
  background: rgba(154, 154, 154, 0.16);
  color: #6b6b6b;
}

.return-status-approved,
.return-status-completed {
  background: rgba(28, 138, 61, 0.12);
  color: #1c8a3d;
}

.return-status-rejected {
  background: rgba(179, 66, 58, 0.12);
  color: #b3423a;
}

.return-request-box .btn-sm {
  align-self: flex-start;
  padding: 6px 12px;
  font-size: 12.5px;
}

.return-request-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--mobilya-border);
  border-radius: 8px;
  background: var(--mobilya-soft);
  max-width: 320px;
}

.return-request-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--mobilya-muted);
}

.return-request-form input {
  padding: 6px 8px;
  border: 1px solid var(--mobilya-border);
  border-radius: 6px;
  font-size: 13px;
}

.return-request-form-actions {
  display: flex;
  gap: 8px;
}

.order-timeline {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.order-timeline li {
  font-size: 13px;
  color: var(--mobilya-muted);
  padding: 8px 0;
  border-bottom: 1px dashed var(--mobilya-border);
}

.order-timeline li strong {
  color: var(--mobilya-dark);
}

/* GÖRÜNÜM DÜZELTMESİ (2026-08-25) — Adres Defterim tek sütuna sıkışıyordu.
   Eski kural .address-list'i flex-column + .address-card'a max-width:380px
   veriyordu; bu yüzden kartlar sayfanın sadece sol şeridini kullanıyor,
   düzenleme formunun 2 sütunlu grid'i de o 380px'e sıkışıyordu. Artık liste
   responsive bir grid: kartlar yan yana diziliyor, düzenlenen kart ise
   .address-card-editing ile tüm satırı kaplayıp forma gerçek genişlik veriyor. */
.address-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}

.address-card {
  position: relative;
  border: 1px solid var(--mobilya-border);
  border-radius: 8px;
  padding: 18px 18px 16px;
  background: #fff;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.address-card:hover {
  border-color: var(--mobilya-brand);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Varsayılan adres listede görsel olarak öne çıksın. */
.address-card.is-default {
  border-color: var(--mobilya-brand);
  background: var(--mobilya-soft);
}

/* Düzenleme/yeni adres formu satırın tamamını alsın — form 2 sütunlu. */
.address-card-editing,
.address-card-new {
  grid-column: 1 / -1;
  max-width: 720px;
}

.address-card h4 {
  margin: 0 0 10px;
  font-size: 14.5px;
  padding-right: 96px;
  line-height: 1.35;
}

.address-card p {
  margin: 3px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mobilya-muted);
}

/* Butonlar metinden ayrışsın. */
.address-card-actions {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--mobilya-border);
}

.empty-state-inline {
  font-size: 13px;
  color: var(--mobilya-muted);
  line-height: 1.6;
}

/* --- Anasayfa Instagram story şeridi — kullanıcı geri bildirimi
   (2026-08-11): "tüm ekranları birebir aynı olsun". mobilya-template/
   src/pages/Home.css'ten port edildi. GERÇEK VERİ İLKESİ: dış bir
   Instagram feed'imiz yok, bu yüzden halkalar gerçek ürün fotoğraflarını
   gösterir (referans template'in kendi "canlı feed yok" çözümüyle aynı,
   bkz. HomePage.tsx yorumu) — uydurma/stok görsel KULLANILMAZ. */
.instagram-story-section {
  padding: 15px 0 20px;
}

.instagram-story-row {
  display: flex;
  align-items: center;
  gap: 22px;
  overflow-x: auto;
  padding: 4px 10px;
  scrollbar-width: none;
}

.instagram-story-row::-webkit-scrollbar {
  display: none;
}

.instagram-story-item {
  flex: 0 0 auto;
  display: block;
}

.instagram-story-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg, #f9ce34, #ee2a7b 45%, #6228d7);
  transition: transform 0.25s ease;
}

.instagram-story-item:hover .instagram-story-ring {
  transform: scale(1.06);
}

.instagram-story-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  display: block;
}

/* Final product-detail cascade: keep the reviewed layout after legacy rules. */
.product-back-link { display:inline-flex; margin:2px 0 8px; color:#777; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.product-back-link:hover { color:var(--mobilya-brand); }
.GalleryArea { position:relative; }
.gallery-badges { position:absolute; top:16px; left:16px; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.gallery-badges span { padding:7px 10px; background:#292723; color:#fff; font-size:10px; font-weight:700; letter-spacing:.03em; }
.gallery-badges span + span { background:var(--mobilya-brand); }
.gallery-counter { width:max-content; margin:8px 0 0 auto; color:#999; font-size:10px; font-weight:600; }
.ProductDetailMainRow { display:grid !important; grid-template-columns:minmax(0,58%) minmax(360px,42%); gap:42px; padding:18px 0 60px; }
.ProductDetailMainRow .leftImage,.ProductDetailMainRow .RightDetail { float:none !important; width:auto !important; }
.ProductDetailMainRow .RightDetail { padding:28px 30px 32px; border:1px solid #e2e2e2; background:#fff; box-shadow:0 8px 28px rgba(0,0,0,.045); }
.RightDetail .ProductName h1 { font-family:'Open Sans',sans-serif; font-size:clamp(23px,2.1vw,31px); font-weight:600; line-height:1.35; letter-spacing:-.015em; }
.PriceList .discountPriceSpan { font-family:'Open Sans',sans-serif; font-size:29px; font-weight:700; }
.detail-price-caption { margin-top:14px; color:#777; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.price-tax-note { color:#888; font-size:10px; font-weight:500; }
.product-variants { margin:20px 0; padding:17px 0; border-top:1px solid #e7e7e7; border-bottom:1px solid #e7e7e7; }
.product-variants-heading { display:flex; justify-content:space-between; gap:12px; margin-bottom:12px; font-size:11px; }
.product-variants-heading b { color:#333; text-transform:uppercase; letter-spacing:.05em; }
.product-variants-heading span { color:#777; }
.product-variant-list { display:flex; flex-wrap:wrap; gap:8px; }
.product-variant-list button { min-height:48px; display:inline-flex; align-items:center; gap:8px; padding:4px 11px 4px 4px; border:1px solid #ddd; background:#fff; color:#555; font-size:10px; cursor:pointer; }
.product-variant-list button:hover,.product-variant-list button.active { border-color:var(--mobilya-brand); color:#222; box-shadow:inset 0 0 0 1px var(--mobilya-brand); }
.product-variant-list button:disabled { opacity:.4; cursor:not-allowed; text-decoration:line-through; }
.product-variant-list img { width:38px; height:38px; object-fit:cover; }
.variant-color-swatch { display:inline-block; width:20px; height:20px; border-radius:50%; border:1px solid rgba(0,0,0,.15); flex-shrink:0; }
.urunOzellik { margin-top:48px; }
.urunOzellik .urunDetayPanel { border:0; border-radius:0; }
.urunOzellik .detail-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); overflow:visible; border-top:1px solid #dedede; border-bottom:1px solid #dedede; background:#fff; }
.urunOzellik .detail-tabs button { min-height:82px; display:flex; flex:initial; align-items:center; justify-content:center; gap:10px; padding:14px 10px; border:0; border-right:1px solid #e8e8e8; border-bottom:3px solid transparent; background:#fff; color:#555; font-size:12px; font-weight:600; }
.urunOzellik .detail-tabs button.active { color:#222; border-bottom-color:var(--mobilya-brand); background:#f8f5f0; }
.urunOzellik .detail-content { min-height:260px; padding:42px clamp(22px,5vw,72px); border-bottom:1px solid #e5e5e5; }
.related-products-section .related-products-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }

@media (max-width:1050px) {
  .ProductDetailMainRow { grid-template-columns:minmax(0,55%) minmax(330px,45%); gap:24px; }
  .related-products-section .related-products-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .ProductDetailMainRow { grid-template-columns:1fr; }
  .urunOzellik .detail-tabs { display:flex; overflow-x:auto; }
  .urunOzellik .detail-tabs button { flex:0 0 170px; min-height:68px; }
}
@media (max-width:640px) {
  .ProductDetailMainRow .RightDetail { padding:20px 16px; }
  .urunOzellik .detail-content { padding:28px 14px; }
  .related-products-section .related-products-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
}

@media (max-width: 640px) {
  .instagram-story-row {
    justify-content: flex-start;
    gap: 14px;
  }
  .instagram-story-ring {
    width: 68px;
    height: 68px;
  }
}

/* ------------------------------------------------------------------
 * Responsive interface system derived from the reviewed reference.
 * Brand content stays local; geometry, typography and density are shared.
 * ------------------------------------------------------------------ */
html, body, button, input, select, textarea { font-family:'Open Sans',Arial,sans-serif; }
body { color:#222; font-size:13px; background:#fff; }
.container { width:100%; max-width:1600px; padding-left:0; padding-right:0; margin-left:auto; margin-right:auto; }
.section-title,.section-heading h2,.home-intro h1,.account-auth-intro h1,.account-content h2,.cart-summary h3,.editorial-hero h1,.about-content-grid h2,.contact-grid h2,.store-contact-panel h2,.favorite-card-body b,.favorites-empty h2 { font-family:'Open Sans',Arial,sans-serif; }
.section-title { font-size:30px; font-weight:700; letter-spacing:-.02em; }
.section-eyebrow { font-size:10px; letter-spacing:.12em; }

.site-header { position:relative; box-shadow:none; }
.topbar-inner { padding:0 50px; }
.header-main { width:100%; max-width:none; min-height:85px; padding:0 50px; gap:30px; }
.brand { min-width:170px; max-width:260px; }
.brand-logo { max-width:240px; max-height:64px; }
.header-search { max-width:none; height:48px; border-radius:10px; background:#f7f7f7; }
.header-search input { font-size:13px; font-weight:600; }
.header-search button { min-width:84px; border-radius:0 10px 10px 0; font-size:13px; }
.action-user,.action-bell,.action-cart { width:48px; height:48px; border-radius:10px; }
.action-cart { border-color:var(--mobilya-brand); background:var(--mobilya-brand); color:#fff; }
.action-cart:hover { color:#fff; border-color:var(--mobilya-brand-dark); background:var(--mobilya-brand-dark); }
.main-nav > .container { max-width:none; padding:0 50px; }
.main-nav > .container > ul { min-height:56px; justify-content:space-around; }
.nav-item > a { min-height:56px; padding:0 12px; font-size:13px; font-weight:600; }
.nav-item > a::before { content:""; position:absolute; left:auto; right:0; bottom:0; width:0; height:3px; background:var(--mobilya-brand); transition:width .3s ease; }
.nav-item:hover > a::before,.nav-item:focus-within > a::before { left:0; right:auto; width:100%; }

.hero-slide { min-height:auto; aspect-ratio:1920/680; }
.banner-grid { gap:20px; padding-top:30px; padding-bottom:30px; }
.promo-banner { min-height:0; aspect-ratio:1.55/1; border-radius:10px; box-shadow:none; }
.category-tile-image { border-radius:10px; }
.category-tile { font-size:14px; }
.section { padding-top:40px; padding-bottom:40px; }

.product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.product-grid .productItem { border:1px solid #e8e8e8; border-radius:10px; box-shadow:none; }
.product-grid .productItem:hover { transform:none; border-color:var(--mobilya-brand); box-shadow:none; }
.product-grid .productImage,.product-grid .productImage img { border-radius:10px; }
.product-grid .productImage a.detailLink { padding-bottom:68%; }
.product-grid .productDetail { padding:0 5px 20px; }
.product-grid .productName { margin-top:10px; }
.product-grid .productName a { height:20px; line-height:20px; font-size:16px; font-weight:500; white-space:nowrap; text-overflow:ellipsis; }
.product-grid .productPrice { margin-top:30px; }
.product-grid .discountPriceSpan,.product-grid .regularPriceSpan { font-family:'Open Sans',sans-serif; font-size:24px; line-height:18px; }
.product-grid .productIcon { border-radius:0 0 10px 10px; overflow:hidden; }

.category-layout { grid-template-columns:23% minmax(0,77%); gap:0; }
.filter-sidebar { padding-right:40px; }
.category-layout > div:last-child { padding-left:40px; border-left:1px solid #e8e8e8; }
.category-hero { border-radius:20px; }

.site-footer { margin-top:60px; }
.footer-trust-badges,.footer-main,.footer-bottom .container { padding-left:0; padding-right:0; }

@media screen and (min-width:1540px) and (max-width:1660px) {
  .container { max-width:1480px; }
  .header-main,.topbar-inner,.main-nav > .container { padding-left:50px; padding-right:50px; }
  .product-grid .productName a { font-size:15px; }
  .product-grid .discountPriceSpan,.product-grid .regularPriceSpan { font-size:23px; }
}
@media screen and (min-width:1500px) and (max-width:1539px) {
  .container { max-width:1440px; }
  .header-main,.topbar-inner,.main-nav > .container { padding-left:45px; padding-right:45px; }
  .product-grid .productName a { font-size:15px; }
  .product-grid .discountPriceSpan,.product-grid .regularPriceSpan { font-size:22px; }
}
@media screen and (min-width:1380px) and (max-width:1499px) {
  .container { max-width:1320px; }
  .header-main,.topbar-inner,.main-nav > .container { padding-left:40px; padding-right:40px; }
  .product-grid .productName a { font-size:14px; }
  .product-grid .discountPriceSpan,.product-grid .regularPriceSpan { font-size:21px; }
}
@media screen and (min-width:1300px) and (max-width:1379px) {
  .container { max-width:1240px; }
  .header-main,.topbar-inner,.main-nav > .container { padding-left:35px; padding-right:35px; }
  .product-grid .productName a { font-size:14px; }
  .product-grid .discountPriceSpan,.product-grid .regularPriceSpan { font-size:20px; }
}
@media screen and (min-width:1240px) and (max-width:1299px) {
  .container { max-width:1180px; }
  .header-main,.topbar-inner,.main-nav > .container { padding-left:30px; padding-right:30px; }
  .product-grid .productName a { font-size:14px; }
  .product-grid .discountPriceSpan,.product-grid .regularPriceSpan { font-size:19px; }
}
@media screen and (min-width:1160px) and (max-width:1239px) {
  .container { max-width:1100px; }
  .header-main,.topbar-inner,.main-nav > .container { padding-left:25px; padding-right:25px; }
  .nav-item > a { font-size:12px; padding-inline:8px; }
  .product-grid .discountPriceSpan,.product-grid .regularPriceSpan { font-size:18px; }
}
@media screen and (min-width:1025px) and (max-width:1159px) {
  .container { max-width:960px; }
  .header-main,.topbar-inner,.main-nav > .container { padding-left:20px; padding-right:20px; }
  .nav-item > a { font-size:11px; padding-inline:6px; }
  .product-grid .discountPriceSpan,.product-grid .regularPriceSpan { font-size:17px; }
}
@media (max-width:1099px) {
  .site-header { position:relative; }
  .topbar { display:none; }
  .header-main { min-height:85px; padding:10px 20px; }
  .brand { order:1; flex:1; justify-content:center; min-width:0; }
  .brand-logo { max-height:55px; }
  .header-actions { order:2; width:auto; }
  .action-user,.action-bell,.action-cart { width:38px; height:38px; border:0; background:transparent; color:#222; }
  .action-bell { display:none; }
  .action-cart { color:var(--mobilya-brand); }
  .header-search { order:3; flex-basis:100%; height:45px; border-radius:5px; }
  .main-nav > .container { padding:0 20px; }
  .mobile-menu-toggle { min-height:46px; }
  .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .nav-all-categories > button { width:100%; min-height:44px; padding:0 12px; border-top:1px solid var(--mobilya-border); text-align:left; }
  .nav-all-categories:hover > .mega-menu,.nav-all-categories:focus-within > .mega-menu { position:static; display:grid; width:100%; grid-template-columns:1fr; box-shadow:none; }
}
@media (max-width:767px) {
  .container { max-width:100%; padding-left:20px; padding-right:20px; }
  .header-main,.main-nav > .container { padding-left:10px; padding-right:10px; }
  .section { padding-top:28px; padding-bottom:28px; }
  .section-title { font-size:24px; }
  /* Kenardan kenara görsel için negatif marjin YALNIZCA gerçekten
     20px padding'i olan .container içindeyken doğrudur. Ana sayfada
     slider padding'siz .home-page altında duruyor ve bu kural onu
     sağa 20px TAŞIRIYORDU (Playwright 375px: scrollWidth 604px).
     Ölçüm: .hero-slider genişliği 415px, ebeveyni 375px. */
  .container > .hero-slider { margin-left:-20px; margin-right:-20px; width:calc(100% + 40px); }
  .hero-slider { max-width:100%; }
  .hero-slide { aspect-ratio:1/1; min-height:0; }
  .banner-grid { grid-template-columns:1fr; }
  .category-layout { grid-template-columns:1fr; }
  .category-layout > div:last-child { padding-left:0; border-left:0; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .product-grid .productName a { font-size:12px; }
  .product-grid .productPrice { margin-top:20px; }
  .product-grid .discountPriceSpan,.product-grid .regularPriceSpan { font-size:18px; }
  .footer-trust-badges,.footer-main,.footer-bottom .container { padding-left:20px; padding-right:20px; }
}

/* Final interaction-quality pass */
.nav-item { position:relative; }
.nav-all-categories > button { min-height:56px; padding:0 12px; border:0; background:transparent; color:#222; font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.nav-all-categories:hover > button,.nav-all-categories:focus-within > button { color:var(--mobilya-brand); }
.nav-all-categories:hover > .mega-menu,.nav-all-categories:focus-within > .mega-menu { display:grid; grid-template-columns:repeat(2,minmax(170px,1fr)); right:0; left:auto; }
.home-product-tabs { display:none; }
.filter-sidebar-head { display:none; }
.filter-sidebar .panel-heading { width:100%; display:flex; align-items:center; justify-content:space-between; border:0; background:transparent; color:#222; cursor:pointer; }
.filter-sidebar .panel-heading > span:last-child { color:#888; font-size:18px; font-weight:400; }
.filter-backdrop { display:none; }
.mobile-buy-bar { display:none; }

@media (max-width:900px) {
  .filter-sidebar {
    position:fixed;
    z-index:1400;
    top:0;
    left:0;
    bottom:0;
    width:min(390px,88vw);
    max-height:none;
    overflow-y:auto;
    padding:0 22px 30px;
    border:0;
    transform:translateX(-105%);
    transition:transform .25s ease;
    box-shadow:12px 0 35px rgba(0,0,0,.16);
  }
  .filter-sidebar.is-open { display:grid; transform:translateX(0); }
  .filter-sidebar-head { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; min-height:64px; margin:0 -22px 12px; padding:0 22px; border-bottom:1px solid #e8e8e8; background:#fff; }
  .filter-sidebar-head b { font-size:16px; }
  .filter-sidebar-head button { width:36px; height:36px; border:0; background:transparent; font-size:24px; cursor:pointer; }
  .filter-backdrop { display:block; position:fixed; z-index:1300; inset:0; border:0; background:rgba(0,0,0,.38); }
}
@media (max-width:767px) {
  body:has(.mobile-buy-bar) { padding-bottom:70px; }
  body:has(.mobile-buy-bar) .site-footer { margin-bottom:-70px; }
  .mobile-buy-bar { position:fixed; z-index:1200; left:0; right:0; bottom:0; min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:9px 14px calc(9px + env(safe-area-inset-bottom)); border-top:1px solid #ddd; background:#fff; box-shadow:0 -8px 28px rgba(0,0,0,.1); }
  .mobile-buy-bar div { display:grid; gap:2px; }
  .mobile-buy-bar small { color:#777; font-size:9px; text-transform:uppercase; }
  .mobile-buy-bar b { font-size:18px; }
  .mobile-buy-bar button { min-width:150px; min-height:48px; border:0; border-radius:10px; background:var(--mobilya-brand); color:#fff; font-weight:700; }
  .mobile-buy-bar button:disabled { opacity:.5; }
}

/* Collection entries and expanded footer */
.collection-page { padding-top:0; }
.collection-hero { margin-bottom:28px; padding:48px 55px; border-radius:20px; background:#f4f1ec; }
.collection-hero > span { color:var(--mobilya-brand); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.collection-hero h1 { margin:8px 0 10px; }
.collection-hero p { margin:0; color:#777; font-size:12px; }
.footer-main { grid-template-columns:1.4fr repeat(3,1fr); gap:45px; }
.footer-brand img { max-width:210px; max-height:70px; margin-bottom:20px; }
.footer-brand p { max-width:390px; font-size:12px; }
.footer-links b { margin-bottom:8px; color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.05em; }
.footer-links a { font-size:12px; }
@media (max-width:900px) {
  .footer-main { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px) {
  .container > .collection-hero { margin-inline:-20px; }
  .collection-hero { max-width:100%; padding:34px 20px; border-radius:0; }
  .footer-main { grid-template-columns:1fr; gap:28px; }
}
@media (max-width:374px) {
  .container { padding-left:10px; padding-right:10px; }
  .product-grid .discountPriceSpan,.product-grid .regularPriceSpan { font-size:16px; }
}

/* Complete home-page composition */
.home-offer-bar { background:#ef7f1a; color:#fff; }
.home-offer-bar .container { min-height:38px; display:flex; align-items:center; justify-content:space-around; gap:20px; font-size:11px; font-weight:600; }
.home-offer-bar span + span::before { content:"•"; margin-right:32px; opacity:.65; }
.home-fallback-hero { background:linear-gradient(115deg,#e7ded2,#f5f0e9); }
.home-fallback-hero .container { min-height:520px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding-right:50%; }
.home-fallback-hero span,.home-editorial-copy > span,.home-section-heading > div > span,.home-seo-kicker { color:var(--mobilya-brand); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.home-fallback-hero h1 { margin:14px 0; font-size:clamp(36px,4vw,62px); line-height:1.12; }
.home-fallback-hero p { color:#666; font-size:15px; line-height:1.75; }
.home-fallback-hero a,.home-editorial-copy a { display:inline-flex; margin-top:18px; padding:14px 24px; border-radius:10px; background:#222; color:#fff; font-weight:700; }
.home-service-row { display:grid; grid-template-columns:repeat(4,1fr); margin-top:24px; border:1px solid #e8e8e8; border-radius:10px; overflow:hidden; }
.home-service-row > div { padding:22px 24px; border-right:1px solid #e8e8e8; }
.home-service-row > div:last-child { border:0; }
.home-service-row b,.home-service-row span { display:block; }
.home-service-row b { font-size:13px; }
.home-service-row span { margin-top:4px; color:#888; font-size:10px; }
.home-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.home-section-heading h2 { margin:7px 0 0; color:#222; font-size:28px; font-weight:700; }
.home-section-heading > a { padding-bottom:4px; border-bottom:1px solid #333; color:#333; font-size:11px; font-weight:600; }
.home-story-heading { margin-top:28px; margin-bottom:15px; }
.home-story-heading h2 { font-size:20px; }
.instagram-story-section { padding-top:0; }
.instagram-story-row { padding-top:4px; padding-bottom:14px; }
.category-grid { grid-template-columns:repeat(3,1fr); gap:20px; }
.category-tile-image { aspect-ratio:1.45/1; }
.home-product-tabs { display:flex; align-items:center; justify-content:center; gap:50px; margin-bottom:30px; border-bottom:1px solid #e6e6e6; }
.home-product-tabs span { position:relative; padding:0 4px 15px; color:#999; font-size:18px; font-weight:600; }
.home-product-tabs span.active { color:#222; }
.home-product-tabs span.active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--mobilya-brand); }
.home-section-cta { margin-top:30px; text-align:center; }
.home-section-cta a { display:inline-flex; padding:13px 25px; border:1px solid #222; border-radius:10px; color:#222; font-weight:600; }
.home-category-mosaic { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.home-mosaic-card { position:relative; min-height:330px; overflow:hidden; border-radius:10px; background:#eee; }
.home-mosaic-card-1 { grid-row:span 2; min-height:680px; }
.home-mosaic-card img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.home-mosaic-card:hover img { transform:scale(1.025); }
.home-mosaic-card::after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.68)); }
.home-mosaic-card > span { position:absolute; z-index:2; left:30px; right:30px; bottom:28px; display:flex; flex-direction:column; align-items:flex-start; color:#fff; }
.home-mosaic-card small { font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.home-mosaic-card b { margin-top:6px; font-size:25px; }
.home-mosaic-card i { margin-top:12px; padding-bottom:3px; border-bottom:1px solid rgba(255,255,255,.8); font-size:11px; }
.home-editorial { margin:45px 0; padding:55px 0; background:#f4f1ec; }
.home-editorial-grid { display:grid; grid-template-columns:1.2fr .8fr; align-items:center; }
.home-editorial-image { min-height:520px; border-radius:20px; overflow:hidden; background:#fff; }
.home-editorial-image img { width:100%; height:100%; min-height:520px; object-fit:cover; }
.home-editorial-copy { padding:45px 60px; }
.home-editorial-copy h2 { margin:12px 0 18px; font-size:34px; line-height:1.25; }
.home-editorial-copy p { color:#666; font-size:14px; line-height:1.8; }
.home-guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:guide; }
.home-guide-grid article { position:relative; min-height:180px; padding:32px; border:1px solid #e8e8e8; border-radius:10px; counter-increment:guide; }
.home-guide-grid article::before { content:"0" counter(guide); display:block; margin-bottom:25px; color:var(--mobilya-brand); font-size:11px; font-weight:700; }
.home-guide-grid b { font-size:16px; }
.home-guide-grid p { color:#777; font-size:12px; line-height:1.7; }
.home-seo-content { padding:60px 0; background:#f7f7f7; }
.home-seo-content h2 { margin:10px 0 26px; font-size:28px; }
.home-seo-columns { display:grid; grid-template-columns:repeat(2,1fr); gap:60px; }
.home-seo-columns p { margin:0; color:#666; font-size:13px; line-height:1.9; }

@media (max-width:1099px) {
  .home-offer-bar { display:none; }
  .home-service-row { grid-template-columns:repeat(2,1fr); }
  .home-service-row > div:nth-child(2) { border-right:0; }
  .home-service-row > div:nth-child(-n+2) { border-bottom:1px solid #e8e8e8; }
  .home-editorial-copy { padding:35px; }
}
@media (max-width:767px) {
  .home-service-row { margin-top:15px; }
  .home-service-row > div { padding:16px 12px; }
  /* 375px'te başlık + "tümünü gör" bağlantısı tek satıra sığmıyordu:
     flex sarmıyor, gap 24px ve bağlantıda white-space:nowrap vardı, bu
     yüzden blok 122px sağa TAŞIYORDU (ölçüm: scrollWidth 604px).
     Sarma açılır ve boşluk daraltılır; bağlantının nowrap'i korunur ki
     "Tümünü Gör" kendi içinde ikiye bölünmesin. */
  .home-section-heading { align-items:flex-start; margin-bottom:20px; flex-wrap:wrap; gap:8px 12px; }
  .home-section-heading h2 { font-size:22px; }
  .home-section-heading > div { min-width:0; }
  .home-section-heading > a { white-space:nowrap; }
  .home-story-heading { padding-left:0; padding-right:0; }
  /* Kaydırılan halka şeridi kenardan başlasın diye .container padding'i
     sıfırlanıyordu — ama BAŞLIK da aynı .container içinde olduğundan o da
     kenara yapışıp "Tüm ürünler" bağlantısını sağdan TAŞIRIYORDU
     (375px'te scrollWidth 507px; ekran görüntüsüyle doğrulandı).
     Padding korunur, negatif marjin YALNIZCA şeride verilir. */
  .instagram-story-section .home-story-heading { padding-left:0; padding-right:0; }
  .instagram-story-section .instagram-story-row { margin-left:-20px; margin-right:-20px; padding-left:20px; padding-right:20px; }
  .category-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .category-tile-image { aspect-ratio:1/1; }
  .home-product-tabs { justify-content:flex-start; gap:26px; overflow-x:auto; }
  .home-product-tabs span { flex:0 0 auto; font-size:14px; }
  .home-category-mosaic { grid-template-columns:1fr; gap:10px; }
  .home-mosaic-card,.home-mosaic-card-1 { grid-row:auto; min-height:260px; }
  .home-mosaic-card > span { left:20px; right:20px; bottom:20px; }
  .home-mosaic-card b { font-size:21px; }
  .home-editorial { margin:25px 0; padding:20px 0; }
  .home-editorial-grid { grid-template-columns:1fr; }
  .home-editorial-image,.home-editorial-image img { min-height:290px; border-radius:10px; }
  .home-editorial-copy { padding:28px 4px; }
  .home-editorial-copy h2 { font-size:25px; }
  .home-guide-grid,.home-seo-columns { grid-template-columns:1fr; gap:10px; }
  .home-guide-grid article { min-height:0; padding:24px; }
  .home-guide-grid article::before { margin-bottom:15px; }
  .home-seo-content { padding:40px 0; }
}

/* ---------------------------------------------------------------------------
   Ürün detay ALT AKIŞI — referans kilimmobilya.com.tr ürün detay sayfası
   (2026-08-22 canlı incelendi: sekme şeridi ortalanmış ve ince, altında
   sırasıyla "Bunları da beğenebilirsiniz;" yatay ürün şeridi, "Son
   baktıklarınız;" şeridi, yorum özeti + "Yorum Ekle" ve en altta güven
   ikon şeridi yer alır). Slider davranışı ek bir JS kütüphanesi (swiper)
   getirmeden CSS scroll-snap ile sağlanır — aynı kullanıcı deneyimi,
   bundle maliyeti yok.
   --------------------------------------------------------------------------- */

/* Sekme şeridi: referansta kutu/ızgara değil, ortalanmış ince düğmeler
   ve aktif olanın altında 2px çizgi. */
.urunOzellik { margin-top: 32px; border: 0; }
.urunDetayPanel { border: 0; }
.urunOzellik .detail-tabs {
  display: flex;
  grid-template-columns: none;
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
  padding-top: 8px;
  border-top: 0;
  border-bottom: 1px solid #e5e5e5;
  background: transparent;
  scrollbar-width: none;
}
.urunOzellik .detail-tabs::-webkit-scrollbar { display: none; }
.urunOzellik .detail-tabs button {
  flex: 0 0 auto;
  border-radius: 0;
  box-shadow: none;
  transition: none;
  min-height: 0;
  padding: 12px 48px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #000;
  font-size: 16.8px;
  font-weight: 400;
  white-space: nowrap;
  opacity: .8;
}
.urunOzellik .detail-tabs button:hover { background: transparent; opacity: 1; }
.urunOzellik .detail-tabs button.active {
  border-radius: 0;
  box-shadow: none;
  border-bottom-color: var(--mobilya-text);
  background: transparent;
  color: #000;
  font-weight: 600;
  opacity: 1;
}
.urunOzellik .detail-tab-index { display: none; }
.urunOzellik .detail-content { border-bottom: 0; padding-top: 34px; }

/* Yatay ürün şeritleri ("Bunları da beğenebilirsiniz;" / "Son baktıklarınız;") */
.pdp-strip-section { margin-top: 56px; }
.pdp-section-title {
  margin: 0 0 18px;
  color: #212121;
  font-family: 'Lora', serif;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
}
.pdp-strip-scroller {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.pdp-strip-scroller > * { flex: 0 0 calc((100% - 72px) / 4); scroll-snap-align: start; }
.pdp-strip-slide { min-width: 0; }
.pdp-strip-slide .ItemOrj {
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  float: none !important;
  padding: 0 !important;
}
.pdp-strip-slide .productItem { height: 100%; transform: none; border-color: #e4e4e4; box-shadow: none; }
.pdp-strip-slide .productItem:hover { transform: none; border-color: var(--mobilya-brand); box-shadow: none; }
.pdp-strip-slide .productName a { font-size: 13px; font-weight: 600; }
.pdp-strip-slide .discountPriceSpan { font-family: 'Lora', serif; font-size: 18px; }

/* "Son baktıklarınız;" sade kartları */
.pdp-strip-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid #e4e4e4;
  background: #fff;
  color: inherit;
  scroll-snap-align: start;
  text-decoration: none;
}
.pdp-strip-card:hover { border-color: var(--mobilya-brand); }
.pdp-strip-image { display: block; aspect-ratio: 1/1; background: #f4f1eb; }
.pdp-strip-image img { width: 100%; height: 100%; object-fit: contain; }
.pdp-strip-name {
  display: -webkit-box;
  overflow: hidden;
  margin: 12px 14px 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #222;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.pdp-strip-price { margin: 6px 14px 16px; color: var(--mobilya-brand-dark); font-family: 'Lora', serif; font-size: 18px; font-weight: 700; }

/* Nokta (dot) sayfalama + "Tümünü göster" başlık satırı — GERÇEK
   EKSİKLİK DÜZELTMESİ (2026-08-24, kullanıcı geri bildirimi: "son
   baktıklarınız ... altta dot notaka olsun ... Tümünü göster de").
   aydinlife/theme-shell.css İLE AYNI sınıf adları (.slider-dots/
   .pdp-strip-heading/.pdp-strip-view-all) — components/slider-dots.tsx
   ve recently-viewed.tsx tema-bağımsız aynı markup'ı üretir, sadece
   renk token'ları (--mobilya-*) burada değişir. */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.slider-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mobilya-border);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.slider-dot.is-active {
  background: var(--mobilya-brand);
  transform: scale(1.3);
}
.pdp-strip-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.pdp-strip-heading .pdp-section-title {
  margin: 0 0 18px;
  text-align: left;
}
.pdp-strip-view-all {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--mobilya-brand-dark);
  text-decoration: underline;
  white-space: nowrap;
}
.pdp-strip-view-all:hover {
  color: var(--mobilya-brand);
}

/* Yorum özeti + yorum ekle */
.pdp-reviews-section { margin-top: 56px; padding-top: 26px; border-top: 1px solid #e5e5e5; }
.pdp-reviews-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pdp-reviews-score { display: flex; flex-direction: column; gap: 8px; }
.pdp-reviews-score strong { color: #222; font-size: 36px; font-weight: 500; line-height: 1; }
.pdp-reviews-score span { color: #8a8a8a; font-size: 14px; font-weight: 300; }
.pdp-review-cta {
  min-height: 44px;
  padding: 0 26px;
  border: 0;
  background: var(--mobilya-text);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.pdp-review-cta:hover { background: var(--mobilya-brand-dark); }
.pdp-review-cta:disabled { opacity: .6; cursor: default; }
.pdp-review-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
  padding: 24px;
  border: 1px solid #e5e5e5;
  background: #fafafa;
}
.pdp-review-form label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; }
.pdp-review-form input,
.pdp-review-form select,
.pdp-review-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #ddd;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
}
.pdp-review-comment { grid-column: 1 / -1; }
.pdp-review-form .pdp-review-cta { grid-column: 1 / -1; justify-self: start; }
.pdp-review-success { grid-column: 1 / -1; margin: 0; color: #2f7a45; font-size: 13px; }
.pdp-review-list { margin: 26px 0 0; padding: 0; list-style: none; }
.pdp-review-list li { padding: 18px 0; border-top: 1px solid #eee; }
.pdp-review-head { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.pdp-review-stars { color: var(--mobilya-brand); }
.pdp-review-list p { margin: 8px 0 0; color: #555; font-size: 13px; line-height: 1.8; }

/* Alt güven şeridi */
.pdp-trust-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin: 56px 0 8px;
  padding-top: 34px;
  border-top: 1px solid #e5e5e5;
}
.pdp-trust-strip > div { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pdp-trust-strip span { color: var(--mobilya-brand); font-size: 30px; line-height: 1; }
.pdp-trust-strip b { margin-top: 12px; color: #000; font-size: 15px; font-weight: 500; }
.pdp-trust-strip small { margin-top: 4px; color: #8a8a8a; font-size: 12px; }

@media (max-width: 1050px) {
  .pdp-strip-scroller > * { flex-basis: calc((100% - 48px) / 3); }
  .pdp-trust-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
}
@media (max-width: 760px) {
  .pdp-strip-scroller { gap: 16px; }
  .pdp-strip-scroller > * { flex-basis: calc((100% - 16px) / 2); }
  .pdp-section-title { font-size: 20px; }
  .urunOzellik .detail-tabs { justify-content: flex-start; }
  .urunOzellik .detail-tabs button { padding: 10px 20px; }
  .pdp-review-form { grid-template-columns: 1fr; }
  .pdp-trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobil yatay taşma düzeltmesi — grid kolonlarının varsayılan min-width:auto
   değeri, galeri görselinin doğal genişliğini taban yaparak 390px'lik
   ekranda sayfayı 543px'e taşırıyordu (2026-08-23 ölçüldü: leftImage
   right=543 > 390). Kolonların küçülebilmesi için min-width sıfırlanır. */
.ProductDetailMainRow .leftImage,
.ProductDetailMainRow .RightDetail,
.ProductGallery,
.gallery-container,
.GalleryArea,
.galleryOwl,
.galleryOwl .item { min-width: 0; max-width: 100%; }
.galleryOwl .item img { max-width: 100%; }
.galleryOwl-thumb, .thumb-list { max-width: 100%; overflow-x: auto; }

/* ---------------------------------------------------------------------------
   Ürün detay ÜST alanı — referans kilimmobilya.com.tr PDP'si Playwright ile
   ölçüldü (2026-08-23, 1440px): küçük görseller ana görselin ALTINDA;
   sağ kolon sırası başlık+kalp → ayraç → fiyat → taksit satırı → renk
   seçenekleri → TAM GENİŞLİK Sepete Ekle → Paylaş/Favorilere Ekle şeridi.
   Kolonda kutu/gölge yok, ürünün kendisi öne çıkar.
   --------------------------------------------------------------------------- */

/* Küçük görseller altta (styles.css column-reverse ile üste itiyordu). */
body .leftImage .ProductGallery .gallery-container { flex-direction: column; }
body .leftImage .ProductGallery .gallery-container .galleryOwl-thumb { padding: 0; }
.galleryOwl-thumb { margin-top: 12px; }

/* Sağ kolon: kutu değil düz alan. */
.ProductDetailMainRow .RightDetail {
  padding: 0 0 0 8px;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.product-eyebrow { display: none; }

/* Başlık satırı: sol başlık, sağ favori kalbi, altında ince ayraç. */
.RightDetail .ProductName {
  display: grid;
  grid-template-columns: 1fr 24px;
  align-items: start;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e5e5;
}
.RightDetail .ProductName h1 {
  margin: 0;
  font-family: 'Lora', serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
}
.product-title-fav {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mobilya-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.product-title-fav[aria-pressed="true"] { color: var(--mobilya-brand); }

/* Fiyat bloğu: başlıksız, referanstaki gibi doğrudan tutar + taksit satırı. */
.PriceList { margin-top: 14px; padding-top: 0; border-top: 0; }
.detail-price-caption { display: none; }
.PriceList .productPrice { margin: 0; }
.PriceList .discountPriceSpan { font-family: 'Lora', serif; font-size: 22px; font-weight: 500; color: #9f4545; }
.installment-line {
  display: block;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6b6b6b;
  font-size: 14px;
  font-weight: 300;
  text-align: left;
  cursor: pointer;
}
.installment-line:hover { color: var(--mobilya-brand-dark); text-decoration: underline; }
.price-chips:empty { display: none; }

/* Renk/seçenek görselleri: referansta yuvarlak, iri kutucuklar. */
.product-variants { margin: 22px 0; padding: 0; border: 0; }
.product-variants-heading { margin-bottom: 8px; font-size: 14px; }
.product-variants-heading b { font-weight: 400; text-transform: none; letter-spacing: 0; }
.product-variant-list button { padding: 0; border-radius: 50%; overflow: hidden; }
.product-variant-list button img { width: 64px; height: 64px; object-fit: cover; }
.product-variant-list button span:only-child { padding: 10px 14px; }
.product-variant-list button img + span { display: none; }

/* Sepete Ekle: TAM GENİŞLİK, adet kutusu üstte kalır. */
.BasketBtn { display: grid; grid-template-columns: 1fr; gap: 12px; }
.BasketBtn .Basketinp { justify-self: start; }
.BasketBtn .basketBtn { width: 100%; }
.BasketBtn .basketBtn button { width: 100%; min-height: 46px; }

/* Aksiyon satırı: Sepete Ekle'nin altında ayraçlı şerit. */
.pdp-action-row {
  /* RightDetail içindeki eski float kuralları (styles.css) yeni blokları
     sıfır genişliğe sıkıştırıyordu — ölçümle görüldü (w=0). */
  clear: both;
  float: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e5e5e5;
}
.pdp-share { display: flex; align-items: center; gap: 10px; }
.pdp-action-label { color: #4f4f4f; font-size: 14px; font-weight: 300; }
.pdp-share a { display: inline-flex; color: #4f4f4f; }
.pdp-share svg { width: 18px; height: 18px; }
.pdp-share a:hover { color: var(--mobilya-brand); }
.pdp-action-fav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #4f4f4f;
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;
}
.pdp-action-fav:hover { color: var(--mobilya-brand); }
.pdp-action-fav[aria-pressed="true"] { color: var(--mobilya-brand); }

/* Breadcrumb: referansta ince, tek satır, paylaş düğmesi yok. */
.breadcrumb-row { margin-bottom: 14px; padding-bottom: 0; border-bottom: 0; }
.breadcrumb-row .breadcrumb { font-size: 12px; }
.breadcrumb-row .breadcrumb a { color: #4f4f4f; }

@media (max-width: 900px) {
  .ProductDetailMainRow .RightDetail { padding: 22px 0 0; }
  .pdp-action-row { flex-wrap: wrap; gap: 16px; }
}

/* Sağ kolondaki blokların float mirasından etkilenmemesi (ölçüm: aksiyon
   satırı w=0, x=1380 ile kolonun dışına taşmıştı). */
.RightDetail > * { float: none; width: 100%; }
.RightDetail #divSatinAl { clear: both; }

/* "Stok Geldiğinde Haber Ver" formu — bkz. components/stock-notify-form.tsx.
   Sepete Ekle bloğunun hemen altına yerleşir, aynı sağ kolon genişliğini
   kullanır (RightDetail > * { width:100% } kuralına tabidir). */
.stock-notify-form {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  background: #faf9f7;
}
.stock-notify-label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: #2c2c2c;
}
.stock-notify-row {
  display: flex;
  gap: 8px;
}
.stock-notify-row input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #d5d5d5;
  border-radius: 3px;
  font-size: 13px;
}
.stock-notify-row button {
  padding: 10px 16px;
  border: 0;
  border-radius: 3px;
  background: var(--mobilya-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.stock-notify-row button:disabled { opacity: 0.6; cursor: not-allowed; }
.stock-notify-success {
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid #cfe3d4;
  border-radius: 4px;
  background: #f2f8f3;
  color: #2c6e3f;
  font-size: 13px;
}

/* "Bununla Birlikte Alınabilir" — "Bunları da beğenebilirsiniz" şeridiyle
   (.pdp-strip-section) AYNI görünümü paylaşır, ek kural gerekmez. */

/* Duyuru Şeridi — bkz. components/announcement-bar.tsx. Header'ın topbar'ı
   İLE AYNI renk ailesini kullanır (koyu zemin, açık metin) ama ayrı bir
   satırdır — kapatılabilir olduğu için topbar'a GÖMÜLMEZ (topbar panelden
   yönetilmiyor, sabit motor kodu; duyuru ise panelden gelen dinamik veri). */
.announcement-bar {
  background: var(--mobilya-brand-dark);
  color: #f5efe8;
}
.announcement-bar-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
}
.announcement-bar-text {
  font-size: 12.5px;
  letter-spacing: 0.02em;
  text-align: center;
}
.announcement-bar-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
}
.announcement-bar-close:hover { opacity: 1; }
@media (max-width: 600px) {
  .announcement-bar-inner { padding: 8px 40px 8px 16px; }
  .announcement-bar-text { font-size: 11.5px; }
}

/* Anket sarmalayıcı — bkz. layout.tsx site-survey.tsx yerleşimi.
   site-survey.tsx zaten kendi border/padding'ini satır-içi style ile
   taşıyor (bileşen teması bağımsız); burada sadece sayfa ortasına
   hizalanması ve dikey boşluk verilmesi sağlanır. */
.site-survey-wrap {
  padding: 32px 24px;
  display: flex;
  justify-content: center;
}

/* Dinamik Form gömme — bkz. components/dynamic-form-embed.tsx. .contact-form
   İÇİNDE render edildiğinde input/textarea zaten .contact-form'un kendi
   kuralını (üstteki blok) miras alır (descendant selector, direct-child
   DEĞİL) — burada sadece .dynamic-form-embed'e ÖZGÜ ek elemanlar (label,
   select, checkbox satırı, başarı mesajı) stillenir. */
.dynamic-form-embed { display: flex; flex-direction: column; gap: 12px; }
.dynamic-form-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #4f4f4f; }
.dynamic-form-field select {
  border: 1px solid var(--mobilya-border);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.dynamic-form-field:has(input[type="checkbox"]) { flex-direction: row; align-items: center; }
.dynamic-form-field input[type="checkbox"] { width: auto; min-height: auto; }
.dynamic-form-success {
  padding: 14px 16px;
  border: 1px solid #cfe3d4;
  border-radius: 8px;
  background: #f2f8f3;
  color: #2c6e3f;
  font-size: 14px;
}

/* Bülten Aboneliği — bkz. components/newsletter-signup.tsx. Footer'ın
   "footer-brand" sütununda, marka açıklamasının altında yaşar (koyu
   footer zemininde okunur açık renkler). */
.newsletter-signup { margin-top: 16px; max-width: 320px; }
.newsletter-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #eeeae3;
  margin: 0 0 8px;
}
.newsletter-row { display: flex; gap: 8px; }
.newsletter-row input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  color: #eeeae3;
  font-size: 13px;
}
.newsletter-row input::placeholder { color: rgba(238,234,227,0.55); }
.newsletter-row button {
  padding: 9px 16px;
  border: 0;
  border-radius: 3px;
  background: var(--mobilya-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.newsletter-row button:disabled { opacity: 0.6; cursor: not-allowed; }
.newsletter-success { margin-top: 16px; font-size: 12.5px; color: #eeeae3; max-width: 320px; }

/* "Sizi Arayalım" formu — bkz. components/call-request-form.tsx.
   .contact-info kolonunda (açık zemin), .contact-form input/textarea
   kurallarını miras almaz (o kural .contact-form'a scoped) — kendi
   minimal stilini taşır. */
.call-request-form {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid var(--mobilya-border, #e4e4e4);
  border-radius: 8px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.call-request-form h3 { margin: 0; font-size: 15px; }
.call-request-hint { margin: 0; font-size: 12.5px; color: #6b6b6b; }
.call-request-form input {
  border: 1px solid #d5d5d5;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
}
.call-request-success {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid #cfe3d4;
  border-radius: 8px;
  background: #f2f8f3;
  color: #2c6e3f;
  font-size: 13px;
}

/* Havale/EFT Bildirimi — bkz. components/bank-transfer-notice-form.tsx.
   .checkout-confirmation İÇİNDE (sipariş onayının altında) render edilir. */
.bank-transfer-notice {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--mobilya-border, #e4e4e4);
  border-radius: 8px;
  background: #faf9f7;
  text-align: left;
}
.bank-transfer-notice h3 { margin: 0 0 12px; font-size: 15px; text-align: center; }
.bank-transfer-account {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: 13px;
}
.bank-transfer-account:last-of-type { border-bottom: 0; }
.bank-transfer-iban { font-family: monospace; letter-spacing: 0.02em; }
.bank-transfer-form {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bank-transfer-hint { margin: 0; font-size: 12.5px; color: #6b6b6b; text-align: center; }
.bank-transfer-form input {
  border: 1px solid #d5d5d5;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
}
.bank-transfer-success, .bank-transfer-empty {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 13px;
}
.bank-transfer-success { border: 1px solid #cfe3d4; background: #f2f8f3; color: #2c6e3f; }
.bank-transfer-empty { border: 1px solid #e4e4e4; background: #faf9f7; color: #6b6b6b; }

/* Destek Talebi formu — bkz. components/support-ticket-form.tsx.
   .checkout-form class'ını PAYLAŞIR (input/textarea stilini miras alır),
   sadece başarı mesajı için ek kural gerekir. */
.support-ticket-success {
  max-width: 420px;
  padding: 14px 16px;
  border: 1px solid #cfe3d4;
  border-radius: 8px;
  background: #f2f8f3;
  color: #2c6e3f;
  font-size: 13px;
}

/* Market/çoklu para birimi seçici — components/market-switcher.tsx.
   2026-08-23: topbar-links kaldırıldığı için header-actions'a taşındı
   (bkz. Header.tsx) — açık header arka planına göre renk güncellendi. */
.header-actions .market-switcher select {
  background: transparent;
  border: 1px solid var(--mobilya-border);
  border-radius: 4px;
  height: 42px;
  padding: 0 10px;
  color: var(--mobilya-text);
  font-size: 12.5px;
  cursor: pointer;
}

.header-actions .market-switcher select:focus-visible {
  outline: none;
  border-color: var(--mobilya-brand);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Yaklaşık Market fiyatı — ProductDetailPage.tsx marketPrice.converted. */
.market-converted-price {
  font-size: 13px;
  color: var(--mobilya-muted);
  margin-left: 8px;
}
.bank-minimum-note{margin:0;padding:28px 20px;color:#777;font-size:13px;line-height:1.6;text-align:center}

/* Referans ürün detay sekmesi: tek çerçeve, eşit menü ve banka seçicili tablo. */
.urunOzellik{width:calc(100vw - 36px);margin-left:calc(50% - 50vw + 18px);overflow:hidden;border:1px solid #dfe3e8!important;border-radius:8px!important;background:#fff}
.urunOzellik .detail-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));justify-content:stretch;gap:0;padding:0 clamp(16px,20vw,360px);border-bottom:1px solid #dfe3e8;background:#fff}
.urunOzellik .detail-tabs button{width:100%;padding:24px 14px;min-height:60px;border-bottom:2px solid transparent;font-size:16.8px;font-weight:400;opacity:1}
.urunOzellik .detail-tabs button.active{border-bottom-color:#303947;font-weight:700}
.urunOzellik .detail-content{min-height:503px;padding:24px;background:#fff}
.installment-reference-layout{width:min(515px,100%);border:1px solid #dfe3e8;background:#fff}
.installment-bank-strip{display:flex;align-items:center;gap:14px;min-height:56px;padding:10px 24px;overflow-x:auto;border-bottom:1px solid #dfe3e8;white-space:nowrap}
.installment-bank-strip button{border:0;background:transparent;color:#3a4050;font-size:13px;font-weight:800;font-style:italic;letter-spacing:-.4px;cursor:pointer;opacity:.55;padding:5px 0}
.installment-bank-strip button.active{color:var(--mobilya-brand-dark);opacity:1}
.installment-bank-strip button:nth-child(7n+1){color:#6c3a8f}.installment-bank-strip button:nth-child(7n+2){color:#d09a00}.installment-bank-strip button:nth-child(7n+3){color:#d91f6b}.installment-bank-strip button:nth-child(7n+4){color:#14579a}.installment-bank-strip button:nth-child(7n+5){color:#007bb6}.installment-bank-strip button:nth-child(7n+6){color:#e36b21}.installment-bank-strip button:nth-child(7n){color:#43a535}
.installment-reference-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px}
.installment-reference-table th,.installment-reference-table td{height:33px;padding:6px 12px;border-right:1px solid #dfe3e8;border-bottom:1px solid #dfe3e8;text-align:center;font-weight:400}
.installment-reference-table th:last-child,.installment-reference-table td:last-child{border-right:0}.installment-reference-table tbody tr:last-child td{border-bottom:0}.installment-reference-table td:first-child{font-weight:600}
.detail-inline-specs{margin-top:32px;padding-top:24px;border-top:1px solid #e5e5e5}
@media(max-width:900px){.urunOzellik{width:calc(100vw - 20px);margin-left:calc(50% - 50vw + 10px)}.urunOzellik .detail-tabs{display:flex;padding:0;overflow-x:auto}.urunOzellik .detail-tabs button{flex:0 0 190px}.urunOzellik .detail-content{min-height:0;padding:18px}.installment-reference-layout{width:100%}}

/* Referans kategori breadcrumb + başlık alanı. */
.category-list{padding-top:22px}.category-breadcrumb{display:flex;align-items:center;gap:3px;margin:0 0 22px;color:#aaa19b;font-size:12px;line-height:1.2}.category-breadcrumb a{color:#aaa19b;text-decoration:none}.category-breadcrumb a:hover{color:var(--mobilya-brand)}.category-breadcrumb span[aria-hidden=true]{color:#c7c0bb}.category-hero{margin:0 0 26px;padding:0;background:transparent;border:0;text-align:left}.category-title-row{display:flex;align-items:baseline;gap:10px}.category-hero .section-title{margin:0;color:#302e2d;font-size:34px;line-height:1.08;font-weight:800;letter-spacing:-1.2px;text-align:left}.category-title-count{color:#a9a09a;font-size:12px;font-weight:400;white-space:nowrap}.category-hero .category-description{max-width:660px;margin:15px 0 0;color:#948a84;font-size:14px;line-height:1.45}.category-hero+.category-toolbar{margin-top:0}
@media(max-width:700px){.category-list{padding-top:14px}.category-breadcrumb{margin-bottom:16px}.category-hero .section-title{font-size:28px}.category-title-row{gap:8px}.category-hero .category-description{margin-top:10px;font-size:13px}}

/* Parçalı ürün / takım oluşturucu — yalnız SET_PART ilişkisi varsa görünür. */
.set-builder > h2{margin:0 0 22px;font-size:20px;color:#222}.set-builder-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}.set-builder-items{display:grid;gap:16px}.set-builder-item{display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:20px;align-items:center;min-height:176px;padding:20px;border:1px solid #e1ded9;border-radius:6px;background:#fff}.set-builder-image{display:flex;align-items:center;justify-content:center;width:180px;height:136px;overflow:hidden;border:1px dashed #bbb6af;background:#f3f1ee;color:#999;font-size:25px}.set-builder-image img{width:100%;height:100%;object-fit:contain}.set-builder-info h3{margin:0 0 8px;font-size:17px}.set-builder-info p{margin:0 0 25px;color:#999;font-size:13px}.set-builder-info small{color:#999;font-size:13px}.set-builder-info small b{color:#222}.set-builder-stepper{display:grid;grid-template-columns:40px 42px 40px;height:44px;border:1px solid #dedbd6;border-radius:5px;overflow:hidden}.set-builder-stepper button,.set-builder-stepper span{display:flex;align-items:center;justify-content:center;border:0;background:#fff;font-weight:600}.set-builder-stepper button{cursor:pointer;font-size:16px}.set-builder-stepper button:hover{background:#f6f3ef}.set-builder-stepper button:disabled{cursor:not-allowed;opacity:.35}.set-builder-summary{position:sticky;top:150px;padding:24px;border:1px solid #e1ded9;border-radius:6px;background:#fff}.set-builder-summary-head,.set-builder-total,.set-builder-summary-row{display:grid;align-items:center;gap:10px}.set-builder-summary-head{grid-template-columns:1fr auto;padding-bottom:18px;border-bottom:1px solid #e5e2dd}.set-builder-summary-head span{color:#999;font-size:12px}.set-builder-summary-row{grid-template-columns:minmax(0,1fr) auto auto;padding:14px 0;border-bottom:1px solid #ece9e5;font-size:13px}.set-builder-summary-row small{color:#999}.set-builder-summary-row b{white-space:nowrap}.set-builder-total{grid-template-columns:1fr auto;padding:20px 0;font-size:15px}.set-builder-total b{font-size:23px}.set-builder-summary>button{width:100%;height:52px;border:0;border-radius:5px;background:#302522;color:#fff;font-weight:700;cursor:pointer}.set-builder-summary>button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:860px){.set-builder-layout{grid-template-columns:1fr}.set-builder-summary{position:static}.set-builder-item{grid-template-columns:96px minmax(0,1fr);min-height:0;padding:14px}.set-builder-image{width:96px;height:96px;grid-row:span 2}.set-builder-stepper{grid-column:2;justify-self:start}}

/* Referans satın alma paneli: kart kümeleri yerine çizgili fiyat alanı,
   takım parça özeti ve tek sıralı yardımcı aksiyonlar. */
.ProductDetailMainRow .RightDetail{border:0!important;box-shadow:none!important;background:#fff!important}
.ProductDetailMainRow .ProductName{padding-bottom:14px;border-bottom:1px solid #dfe3e8}
.ProductDetailMainRow .PriceList{margin:0;padding:15px 0 18px;border-bottom:1px solid #dfe3e8}
.ProductDetailMainRow .detail-price-caption{display:none}
.ProductDetailMainRow .product-meta-row:empty{display:none}
.ProductDetailMainRow .product-trust,.ProductDetailMainRow .product-service-grid{display:none}
.set-compact-table-wrap{margin:22px 0 20px;padding:14px 20px 20px;border:1px solid #dfe3e8;background:#fff}
.set-compact-table{width:100%;border-collapse:collapse;table-layout:fixed;color:#151515;font-size:14px}
.set-compact-table th,.set-compact-table td{padding:10px 0;border-bottom:1px solid #dfe3e8;text-align:left;font-weight:400}
.set-compact-table th{font-size:16px}.set-compact-table th:first-child,.set-compact-table td:first-child{width:50%}.set-compact-table th:nth-child(2),.set-compact-table td:nth-child(2){width:22%}.set-compact-table td:last-child{white-space:nowrap}
.set-compact-actions{display:grid;gap:10px}
.set-primary-add,.set-customize-button{width:100%;min-height:48px;border:1px solid #3e4a59;border-radius:0;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.set-primary-add{background:#3e4a59;color:#fff}.set-primary-add:hover{background:#303947}.set-primary-add:disabled{cursor:not-allowed;opacity:.48}
.set-customize-button{background:#fff;color:#3e4a59}.set-customize-button:hover{background:#f7f8f9}
.ProductDetailMainRow .pdp-action-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:20px;padding:0;border:0;background:#fafafa}
.ProductDetailMainRow .pdp-action-row button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:52px;padding:8px 5px;border:0;background:transparent;color:#222;font-family:inherit;font-size:13px;white-space:nowrap;cursor:pointer}
.ProductDetailMainRow .pdp-action-row button:hover{background:#f0f1f2}
.ProductDetailMainRow .pdp-action-fav span{font-size:21px;line-height:1}
@media(max-width:700px){.set-compact-table-wrap{padding:10px 12px 14px}.set-compact-table{font-size:12px}.set-compact-table th{font-size:13px}.ProductDetailMainRow .pdp-action-row{grid-template-columns:repeat(2,1fr)}.ProductDetailMainRow .pdp-action-row button{min-height:46px}}

/* Ürün adedi seçici: 40 + 40 + 40px yerine %50 geniş 60 + 60 + 60px. */
.ProductDetailMainRow .riSingle button,
.ProductDetailMainRow .riSingle input{width:60px}
@media(max-width:420px){.ProductDetailMainRow .riSingle button,.ProductDetailMainRow .riSingle input{width:50px}}

/* Kategori/filtre yan menüsü: referanstaki gibi her yazının altında ince çizgi. */
.category-layout .filter-sidebar .list-group{padding:0 16px}
.category-layout .filter-sidebar .list-group-item{border-bottom:1px solid #e6d8cf}
.category-layout .filter-sidebar .list-group-item:last-child{border-bottom:1px solid #e6d8cf}
.category-layout .filter-sidebar .list-group-item label{padding:12px 0}
.category-layout .filter-sidebar .check-label{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}

/* Kategori detay — Aydınlife referans yerleşimi. */
.category-list{max-width:1360px!important;padding-top:25px!important}
.category-list .category-breadcrumb{margin-bottom:25px;color:#aaa;font-size:12px}
.category-list .category-hero{margin-bottom:28px!important}
.category-list .category-hero .section-title{font-size:30px;letter-spacing:-.8px}
.category-list .category-hero .category-description{max-width:670px;margin-top:15px;color:#85807c;line-height:1.55}
.category-list .category-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:32px;align-items:start}
.category-list .filter-sidebar{position:sticky;top:150px;display:grid;gap:16px;padding:0}
.category-list .filter-sidebar .panel{border:1px solid #e4ddd7;border-radius:7px;background:#fff;overflow:hidden}
.category-list .filter-sidebar .panel-heading{min-height:48px;padding:15px 20px;border:0;background:#fff;text-align:left}
.category-list .filter-sidebar .panel-title{font-size:14px;font-weight:700;letter-spacing:0;text-transform:none}
.category-list .filter-sidebar .panel-heading>span:last-child{display:none}
.category-list .filter-sidebar .panel-body{padding:0 0 14px}
.category-list .filter-sidebar .list-group{padding:0 20px}
.category-list .filter-sidebar .list-group-item{border-bottom:1px solid #eadfd7}
.category-list .filter-sidebar .list-group-item:last-child{border-bottom:0}
.category-list .filter-sidebar .list-group-item label{min-height:37px;padding:8px 0;color:#5d5855;font-size:13px}
.category-list .filter-sidebar .check-label{text-decoration:none}
.category-list .category-results{min-width:0;padding:0!important;border:0!important}
.category-list .category-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:61px;margin:0 0 20px;padding:10px 16px;border:1px solid #e4ddd7;border-radius:7px;background:#fff}
.category-list .category-toolbar-left{display:flex;align-items:center}
.category-list .category-count{margin:0;color:#99918c;font-size:13px;white-space:nowrap}
.category-list .category-sort{display:flex;align-items:center;justify-content:flex-end;gap:8px;color:#918a85;font-size:12px}
.category-list .category-sort button{min-height:36px;padding:0 15px;border:1px solid #e4ddd7;border-radius:4px;background:#fff;color:#625d59;font-family:inherit;font-size:12px;white-space:nowrap;cursor:pointer}
.category-list .category-sort button.active{border-color:#76523b;background:#76523b;color:#fff;font-weight:700}
.category-list .product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,252px));justify-content:start;gap:20px}
.category-list .product-grid .ItemOrj{width:auto!important;max-width:252px}
.category-list .product-grid .productItem{overflow:hidden;border:1px solid #e4ddd7;border-radius:0;box-shadow:none}
.category-list .product-grid .productItem:hover{transform:none;border-color:#bda998;box-shadow:none}
.category-list .product-grid .productImage,.category-list .product-grid .productImage img{border-radius:0}
.category-list .product-grid .productImage a.detailLink{padding-bottom:100%;background:#f1eeeb}
.category-list .product-grid .productDetail{padding:0 15px 18px}
.category-list .activeFilterBar{margin:-8px 0 18px}
@media(max-width:1100px){.category-list .category-sort{flex-wrap:wrap}.category-list .category-toolbar{align-items:flex-start}.category-list .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.category-list .product-grid .ItemOrj{max-width:none}}
@media(max-width:900px){.category-list .category-layout{grid-template-columns:1fr}.category-list .filter-sidebar{display:none;position:fixed;top:0;padding:22px}.category-list .filter-sidebar.is-open{display:grid}.category-list .category-toolbar{align-items:center}.category-list .filter-mobile-toggle{display:inline-flex}.category-list .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.category-list .category-hero .section-title{font-size:27px}.category-list .category-toolbar{display:grid}.category-list .category-sort{justify-content:flex-start;overflow-x:auto;padding-bottom:2px}.category-list .category-sort span{display:none}.category-list .category-sort button{flex:0 0 auto;padding:0 12px}.category-list .product-grid{gap:10px}.category-list .product-grid .productDetail{padding:0 10px 14px}}

/* Aydınlife referans header: bilgi şeridi + logo/arama/hesap + kategori menüsü. */
.site-header{background:#fff;box-shadow:none}
.site-header .topbar{display:block;height:38px;border:0;background:#2e2421;color:#ded8d5}
.site-header .topbar-inner{display:flex;align-items:center;justify-content:space-between;max-width:1420px;height:38px;padding:0 16px}
.site-header .topbar-announcement{font-size:12px;letter-spacing:.05px}.site-header .topbar-announcement b{color:#e9bd76}
.site-header .topbar-contact{display:flex;align-items:center;gap:27px}
.site-header .topbar-link{display:inline-flex;align-items:center;gap:5px;color:#ded8d5!important;font-size:11.5px;text-decoration:none;white-space:nowrap}
.site-header .topbar-link:hover{color:#fff!important}.site-header .topbar-whatsapp svg{width:13px;height:13px}
.site-header .header-main{display:grid;grid-template-columns:145px minmax(360px,830px) auto;align-items:center;gap:28px;max-width:1420px;min-height:82px;padding:0 16px}
.site-header .brand{display:flex;align-items:center;min-width:0;color:#202020!important;font-size:25px;font-weight:900;line-height:.9;letter-spacing:-1px;text-decoration:none}
.site-header .brand-logo{display:block;max-width:145px;max-height:54px;object-fit:contain}
.site-header .header-search{display:grid;grid-template-columns:minmax(0,1fr) 68px;align-items:center;height:46px;border:1px solid #ddd9d5;border-radius:4px;background:#faf9f8;overflow:hidden}
.site-header .header-search input{width:100%;height:44px;padding:0 18px;border:0;outline:0;background:transparent;color:#444;font-family:inherit;font-size:13px}
.site-header .header-search button{align-self:center;width:62px;height:36px;margin-right:5px;border:0;border-radius:4px;background:#765039;color:#fff;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}
.site-header .header-actions{display:flex;align-items:center;justify-content:flex-end;gap:27px;white-space:nowrap}
.site-header .header-actions .market-switcher,.site-header .action-bell{display:none}
.site-header .header-text-action{display:flex!important;flex-direction:column;align-items:center;gap:4px;color:#171717;text-decoration:none}
.site-header .header-text-action b{font-size:14px;line-height:1;font-weight:700}.site-header .header-text-action small{color:#837d79;font-size:11px;line-height:1}
.site-header .action-cart{display:flex!important;align-items:center;justify-content:center;gap:10px;min-width:127px;height:46px;padding:0 17px;border-radius:4px;background:#765039!important;color:#fff!important;text-decoration:none}
.site-header .action-cart b{font-size:14px}.site-header .action-cart .cart-count{position:static;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#fff;color:#765039;font-size:11px;font-weight:800}
.site-header .main-nav{border-top:1px solid #eeeae7;border-bottom:1px solid #ddd9d5;background:#fff}
.site-header .main-nav>.container{display:flex;align-items:center;justify-content:space-between;max-width:1420px;min-height:53px;padding:0 16px}
.site-header .main-nav>.container>ul{display:flex;align-items:center;justify-content:flex-start;gap:7px;min-height:53px;margin:0;padding:0;overflow:visible}
.site-header .nav-item>a,.site-header .nav-item>button{min-height:53px;padding:0 16px;color:#222;font-size:13px;font-weight:500}
.site-header .nav-item>a::before{height:2px;background:#765039}.site-header .nav-item:hover>a,.site-header .nav-item:focus-within>a,.site-header .nav-item.active>a{color:#765039}.site-header .nav-item.active>a::before{left:0;right:auto;width:100%}
.site-header .nav-outlet-link{margin-left:auto;color:#dc3d1d;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
@media(max-width:1050px){.site-header .topbar-contact{gap:15px}.site-header .header-main{grid-template-columns:140px minmax(260px,1fr) auto;gap:16px}.site-header .header-actions{gap:14px}.site-header .nav-item>a,.site-header .nav-item>button{padding:0 10px}}
@media(max-width:820px){.site-header .topbar{height:auto;min-height:34px}.site-header .topbar-inner{height:auto;min-height:34px}.site-header .topbar-contact .topbar-link:not(.topbar-whatsapp):not(:last-child){display:none}.site-header .header-main{grid-template-columns:1fr auto;min-height:70px}.site-header .brand{font-size:20px}.site-header .header-search{grid-column:1/-1;grid-row:2;margin-bottom:12px}.site-header .header-text-action{display:none!important}.site-header .action-cart{min-width:104px;height:42px}.site-header .main-nav>.container{display:block}.site-header .nav-outlet-link{display:none}}

/* GERÇEK EKSİKLİK DÜZELTMESİ (2026-08-25) — checkout'ta kayıtlı adres
   seçimi (bkz. checkout-page-content.tsx). Aynı işlevsellik aydinlife'ta
   İLK KEZ eklendi, burada mobilya-classic'in --mobilya-* renk diliyle. */
.checkout-saved-addresses { display: flex; flex-direction: column; gap: 8px; max-width: 420px; margin-bottom: 20px; }
.checkout-saved-addresses-label { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: var(--mobilya-muted); text-transform: uppercase; letter-spacing: .03em; }
.checkout-saved-address-option { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--mobilya-border); border-radius: 3px; cursor: pointer; transition: border-color .2s ease; }
.checkout-saved-address-option:has(input:checked) { border-color: var(--mobilya-brand); background: var(--mobilya-soft); }
.checkout-saved-address-option input { margin-top: 3px; }
.checkout-saved-address-option span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.checkout-saved-address-option b { font-weight: 600; }
.checkout-saved-address-option em { font-style: normal; color: var(--mobilya-brand); font-weight: 700; font-size: 11.5px; }
.checkout-saved-address-option small { color: var(--mobilya-muted); font-size: 12px; }

/* ===========================================================================
   Hesabım panelleri — tipografik ritim, ayırıcı tutarlılığı ve destek
   talepleri listesi (2026-08-25).

   ÖNEMLİ DERS (aynı hatayı tekrarlamamak için): bu blok önce yanlışlıkla
   themes/aydinlife/theme-shell.css'e yazıldı. mobilya-demo mağazası
   AYDINLIFE DEĞİL, mobilya-classic temasını kullanıyor — iki tema bağımsız
   dosyalar ve token adları bile farklı (--ay-* / --mobilya-*). Hesabım
   ekranında bir şey değiştirmeden önce mağazanın GERÇEKTE hangi temayı
   yüklediğini doğrula (DevTools > <link rel=stylesheet> href'i).
   =========================================================================== */

/* --- 1) Link sıfırlaması: kırılganlık düzeltmesi ---
   .order-card bir <a> etiketidir, ama bu dosyada renk/dekorasyon sıfırlaması
   YOKTU — tek dayanak styles.css:29'daki global "a{text-decoration:none;
   color:#666}" kuralıydı. O dosya yüklenmezse (veya sonradan sıralaması
   değişirse) tüm sipariş kartları tarayıcı varsayılanına düşüp MAVİ ve ALTI
   ÇİZİLİ görünüyordu. Kart kendi görünümünü kendi garanti etmeli. */
a.order-card,
a.order-card:hover,
a.order-card:visited{
  color:var(--mobilya-text);
  text-decoration:none;
}
/* Kart içindeki metinler rengi karttan miras alsın — <b>/<span> öğeleri
   ayrı ayrı renk tanımlamak zorunda kalmasın. */
a.order-card *{color:inherit}
.order-card-date,
.order-card-item-chip{color:var(--mobilya-muted)}

/* --- 2) Başlık ritmi ---
   Kullanıcı isteği: "üyelik bilgilerim altında boydan çizgi var, diğer
   sayfalarda aynı style olsun; altın oran / boşluk okunabilirlik
   standartlarını uygula".

   O çizginin kaynağı kaydet çubuğunun (.member-form-actions) border-top'u:
   iki kolonlu grid'in DIŞINDA olduğu için kart genişliğini kaplıyordu.
   Silmiyoruz — kaydet çubuğunu ayırması doğru; ama artık başlığın altındaki
   ayırıcıyla aynı dili konuşuyor, tek başına duran bir çizgi gibi durmuyor.

   Ölçek: 8 / 13 / 21 / 34 (Fibonacci). Ardışık oranları 1.618'e yakınsar,
   yani "altın oran" isteğini keyfi sayı uydurmadan karşılar. */
.account-content > .section-eyebrow{display:block;margin:0 0 2px;line-height:1.3}
.account-content h2{
  margin:0 0 21px;
  padding-bottom:13px;
  border-bottom:1px solid var(--mobilya-border);
  line-height:1.25;
}

/* Form iç ritmi aynı diziyi kullanır. */
.member-form{gap:21px}
.member-form-grid{gap:21px 34px}
.member-form-col{gap:13px}
/* Kaydet çubuğu: üst boşluk başlıktakinin bir adım büyüğü — 18px optik
   olarak çizgiye yapışık duruyordu. */
.member-form-actions{margin-top:13px;padding-top:21px}
/* Satır uzunluğu okunabilirlik aralığında (~45-75 karakter) kalsın. */
.member-field-hint{max-width:62ch}

/* --- 3) Destek Taleplerim listesi ---
   Panel yalnızca boş bir form gösteriyordu; artık mevcut talepler ve
   yazışma listeleniyor (bkz. support-ticket-form.tsx). */
.support-ticket-panel{display:flex;flex-direction:column;gap:21px}
.support-ticket-list{display:flex;flex-direction:column;gap:13px;margin:0;padding:0;list-style:none}
.support-ticket-item{border:1px solid var(--mobilya-border);border-radius:8px;background:var(--mobilya-surface);overflow:hidden}
/* Başlık bir <button> — tüm satır tıklanabilir olmalı ama buton varsayılan
   görünümünü tamamen bırakmalı. */
.support-ticket-head{display:flex;align-items:center;justify-content:space-between;gap:13px;width:100%;padding:13px 16px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.support-ticket-head:hover{background:var(--mobilya-soft)}
.support-ticket-head-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.support-ticket-head-main strong{color:var(--mobilya-text);font-size:14.5px;font-weight:600}
.support-ticket-head-main small{color:var(--mobilya-muted);font-size:12.5px}
/* Önizleme tek satır: kart yüksekliği yanıt uzunluğuna göre zıplamasın. */
.support-ticket-preview{margin:0;padding:0 16px 13px;color:var(--mobilya-muted);font-size:13px;line-height:1.55;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.support-ticket-preview span{font-weight:600;color:var(--mobilya-text)}
.support-ticket-thread{display:flex;flex-direction:column;gap:13px;margin:0;padding:13px 16px 16px;list-style:none;border-top:1px solid var(--mobilya-border)}
.support-ticket-thread li{display:flex;flex-direction:column;gap:4px;max-width:min(100%,62ch);padding:10px 13px;border-radius:8px}
/* Kimin yazdığı renk ve hizadan da anlaşılsın, sadece etiketten değil. */
.support-ticket-thread li.is-customer{align-self:flex-start;background:var(--mobilya-soft)}
.support-ticket-thread li.is-staff{align-self:flex-end;background:var(--mobilya-surface);border:1px solid var(--mobilya-border)}
.support-ticket-author{color:var(--mobilya-muted);font-size:11.5px;font-weight:600}
.support-ticket-thread li p{margin:0;color:var(--mobilya-text);font-size:13.5px;line-height:1.6}
.support-ticket-form-title{margin:0 0 8px;font-size:15px;font-weight:600}

@media(max-width:860px){
  /* Dar ekranda tek kolona düşünce dikey adım bir basamak iner. */
  .member-form-grid{gap:13px}
  .account-content h2{margin-bottom:13px;padding-bottom:8px}
}

/* --- 4) Sipariş kartı ürün görselleri ---
   Kullanıcı isteği (2026-08-25): "siparişlerde resimlerin olması lazım".
   Önceden kalemler yalnızca metin rozetiydi; artık kapak görseli var.

   Kart bir <a> olduğu için görsel de tıklanabilir alanın parçası —
   ayrı bir link YOK, tüm kart zaten sipariş detayına gidiyor. */
.order-card-thumb{
  position:relative;
  display:block;
  width:56px;
  height:56px;
  flex:0 0 auto;
  border:1px solid var(--mobilya-border);
  border-radius:8px;
  background:var(--mobilya-soft);
  overflow:hidden;
}
.order-card-thumb img{
  width:100%;
  height:100%;
  /* cover: mobilya görselleri farklı en-boy oranlarında; kare kutuda
     boşluk/çarpıtma yerine kırpma tercih edildi. */
  object-fit:cover;
  display:block;
}
/* Görseli olmayan ürün: kırık <img> yerine ürün adının baş harfi. */
.order-card-thumb-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  color:var(--mobilya-muted);
  font-size:18px;
  font-weight:600;
}
/* Kalemler alt alta satırlar hâlinde: görsel solda, ad+adet sağda.
   İlk deneme adet rozetini görselin ÜZERİNE bindiriyordu — canlı
   doğrulamada rozet kırpıldı ve ürün adı hiç görünmedi. Satır düzeni
   ikisini de çözüyor. */
.order-card-items{flex-direction:column;gap:8px}
.order-card-line{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.order-card-line-text{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.order-card-line-name{
  color:var(--mobilya-text);
  font-size:13.5px;
  line-height:1.35;
  /* Uzun mobilya adları kartı bozmasın. */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.order-card-line-qty{
  color:var(--mobilya-muted);
  font-size:12px;
}
.order-card-line.is-more{
  color:var(--mobilya-muted);
  font-size:12.5px;
  padding-left:2px;
}

/* -----------------------------------------------------------------------
   Insta Shop — vitrin üstü yuvarlak görsel şeridi.
   bkz. src/components/insta-shop.tsx ve api insta-shop.service.ts.

   Tema-nötr yazıldı (üç temada da BİREBİR aynı blok): ölçüler
   `.container` genişliğinden bağımsız, renkler currentColor/nötr.
   Öğe yoksa bileşen hiç render etmez, bu yüzden boş-durum stili yok.
   ----------------------------------------------------------------------- */
.insta-shop {
  width: min(100% - 32px, 1600px);
  margin-inline: auto;
  padding: 22px 0 6px;
}

.insta-shop__list {
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0 2px 10px;
  list-style: none;
  overflow-x: auto;
  /* Mobilde parmakla kaydırırken daireler kenara yapışık durmasın. */
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.insta-shop__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.insta-shop__link {
  display: flex;
  width: 92px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

/* Instagram highlight halkası — 2px'lik degrade çerçeve. */
.insta-shop__ring {
  display: block;
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
  transition: transform 0.18s ease;
}

.insta-shop__link:hover .insta-shop__ring,
.insta-shop__link:focus-visible .insta-shop__ring {
  transform: scale(1.05);
}

.insta-shop__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 8px;
}

.insta-shop__image {
  display: block;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  /* Yönetici kare (1:1) yükler; cover yine de garanti eder. */
  object-fit: cover;
  border: 2px solid #fff;
  background: #f2f2f2;
}

.insta-shop__title {
  max-width: 92px;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  /* Uzun başlık iki satırda kesilir — şerit yüksekliği sabit kalsın. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 640px) {
  .insta-shop__list { gap: 16px; }
  .insta-shop__link { width: 76px; }
  .insta-shop__image { width: 64px; height: 64px; }
  .insta-shop__title { max-width: 76px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .insta-shop__ring { transition: none; }
  .insta-shop__link:hover .insta-shop__ring { transform: none; }
}

/* İade penceresi ipucu — "İade için son N gün" / süre dolduysa gerekçe.
   bkz. components/order-detail-view.tsx ReturnRequestBox. Metin sunucudan
   gelir (order.policy), burada yalnızca biçimlendirilir. */
.return-window-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: #6b7280;
}

.return-window-hint-closed {
  color: #9ca3af;
  font-style: italic;
}

/* Taksitli satış gösterme ekranı — bkz. components/checkout-page-content.tsx
   "TAKSİTLİ SATIŞ GÖSTERME EKRANI" bloğu. Mevcut .checkout-payment-option
   deseniyle aynı görsel dili kullanır. */
.checkout-installments { margin-top: 8px; }
.checkout-installments h3 { margin: 0 0 4px; font-size: 18px; }
.checkout-installments-total { margin: 0 0 16px; color: var(--muted, #666); font-size: 14px; }
.checkout-installment-plan { margin-top: 18px; border-top: 1px solid rgba(0, 0, 0, 0.08); padding-top: 14px; }
.checkout-installment-plan h4 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.checkout-installment-plan h4 small { font-weight: 400; color: var(--muted, #666); }
.checkout-installment-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.checkout-installment-options label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 8px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.checkout-installment-options label:hover { border-color: rgba(0, 0, 0, 0.28); }
.checkout-installment-options label span { display: flex; flex-direction: column; line-height: 1.35; }
.checkout-installment-options label small { color: var(--muted, #666); font-size: 12px; }
.checkout-pay-button { margin-top: 22px; width: 100%; }
.checkout-installments-note { margin-top: 10px; font-size: 12.5px; color: var(--muted, #666); text-align: center; }

/* Siparişlerim TABLO düzeni — kullanıcı isteği (2026-08-25): kart yığını
   yerine seçim kutusu + görsel + ad + sipariş no + tarih/saat + fiyat +
   toplam sütunlu gerçek tablo. Sipariş kodu/tarih/toplam rowSpan ile ilk
   kaleme bağlı olduğu için sütunlar kalem sayısından bağımsız hizalı. */
.order-table-wrap {
  /* Dar ekranda sayfanın TAMAMI yatay kaymasın; kayma tablonun kendi
     kabına hapsedilir. */
  overflow-x: auto;
  border: 1px solid var(--mobilya-border);
  border-radius: 8px;
}

.order-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 14px;
}

.order-table thead th {
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mobilya-muted);
  background: var(--mobilya-soft);
  padding: 10px 12px;
  white-space: nowrap;
  border-bottom: 1px solid var(--mobilya-border);
}

.order-table td {
  padding: 10px 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--mobilya-border);
}

/* Sipariş grupları arasındaki ayrım, kalemler arasındakinden kalın:
   kullanıcı bir siparişin nerede bitip diğerinin başladığını görmeli. */
.order-table-group + .order-table-group td {
  border-top: 2px solid var(--mobilya-border);
}

.order-table-group {
  cursor: pointer;
}

.order-table-group:hover td {
  background: var(--mobilya-soft);
}

.order-table tr.is-selected td {
  background: var(--mobilya-soft);
}

.order-table-th-select,
.order-table-select {
  width: 40px;
  text-align: center;
}

.order-table-th-media,
.order-table-media {
  width: 72px;
}

.order-table-name {
  font-weight: 500;
  min-width: 200px;
}

.order-table-code {
  white-space: nowrap;
}

.order-table-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.order-table-date {
  white-space: nowrap;
  display: table-cell;
}

.order-table-time {
  display: block;
  font-size: 12px;
  color: var(--mobilya-muted);
}

.order-table-num {
  text-align: right;
  white-space: nowrap;
  /* Rakamlar sütun içinde kaymasın diye sabit genişlikli rakam. */
  font-variant-numeric: tabular-nums;
}

.order-table-total {
  font-weight: 700;
}

.order-table-status {
  white-space: nowrap;
}

.order-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--mobilya-soft);
  border-bottom: 1px solid var(--mobilya-border);
  font-size: 14px;
}


/* --- İade & Değişim sihirbazı (RMA) --- */
.rma-wizard { border: 1px solid var(--mobilya-border); border-radius: 10px; padding: 16px; margin-top: 12px; background: var(--mobilya-soft); }
.rma-steps { display: flex; gap: 8px; list-style: none; margin: 0 0 16px; padding: 0; flex-wrap: wrap; }
.rma-step { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mobilya-muted); }
.rma-step-no { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--mobilya-border); font-size: 11px; }
.rma-step.is-active { color: inherit; font-weight: 600; }
.rma-step.is-active .rma-step-no { border-color: currentColor; }
.rma-step.is-done .rma-step-no { background: var(--mobilya-border); }
.rma-panel { display: flex; flex-direction: column; gap: 14px; }
.rma-question { margin: 0; font-weight: 600; }
.rma-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.rma-type { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; border: 1px solid var(--mobilya-border); border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.rma-type.is-selected { border-color: currentColor; }
.rma-type-label { font-weight: 600; font-size: 14px; }
.rma-type-desc { grid-column: 2; font-size: 12px; color: var(--mobilya-muted); }
.rma-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.rma-field > span { font-weight: 600; }
.rma-field input[type="text"], .rma-field input[type="number"], .rma-field select, .rma-field textarea {
  border: 1px solid var(--mobilya-border); border-radius: 6px; padding: 8px 10px; font: inherit; background: transparent; color: inherit; width: 100%;
}
.rma-field small { color: var(--mobilya-muted); }
.rma-variant-list { display: flex; flex-direction: column; gap: 6px; }
.rma-variant { display: flex; align-items: center; gap: 8px; border: 1px solid var(--mobilya-border); border-radius: 6px; padding: 8px 10px; cursor: pointer; font-size: 13px; }
.rma-variant.is-selected { border-color: currentColor; }
.rma-variant.is-disabled { opacity: 0.5; cursor: not-allowed; }
.rma-variant-label { flex: 1; }
.rma-variant-tag { font-size: 11px; color: var(--mobilya-muted); }
.rma-file-list { margin: 0; padding-left: 18px; font-size: 12px; color: var(--mobilya-muted); }
.rma-summary { display: grid; gap: 8px; margin: 0; }
.rma-summary > div { display: grid; grid-template-columns: 140px 1fr; gap: 8px; font-size: 13px; }
.rma-summary dt { color: var(--mobilya-muted); margin: 0; }
.rma-summary dd { margin: 0; }
.rma-note { font-size: 12px; color: var(--mobilya-muted); margin: 0; }
.rma-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* --- Talep durum kartı + zaman çizelgesi --- */
.rma-status-card { border: 1px solid var(--mobilya-border); border-radius: 8px; padding: 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.rma-status-reason, .rma-status-staff-note { font-size: 12px; color: var(--mobilya-muted); }
.rma-timeline { display: flex; list-style: none; margin: 0; padding: 0; gap: 0; }
.rma-timeline li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--mobilya-muted); position: relative; }
.rma-timeline li::before { content: ""; position: absolute; top: 5px; left: 0; right: 50%; height: 1px; background: var(--mobilya-border); }
.rma-timeline li:first-child::before { display: none; }
.rma-timeline-dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--mobilya-border); background: var(--mobilya-soft); position: relative; z-index: 1; }
.rma-timeline li.is-done { color: inherit; font-weight: 600; }
.rma-timeline li.is-done .rma-timeline-dot { background: currentColor; border-color: currentColor; }


/* --- Kalem seçimli iptal --- */
.cancel-box { border: 1px solid var(--mobilya-border); border-radius: 10px; padding: 16px; margin-top: 12px; background: var(--mobilya-soft); display: flex; flex-direction: column; gap: 14px; }
.cancel-box-title { margin: 0; font-weight: 600; }
.cancel-item-list, .cancel-blocked-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cancel-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--mobilya-border); border-radius: 8px; padding: 10px 12px; flex-wrap: wrap; }
.cancel-item.is-selected { border-color: currentColor; }
.cancel-item-main { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; min-width: 180px; }
.cancel-item-name { font-size: 14px; }
.cancel-item-qty { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mobilya-muted); }
.cancel-item-qty input { width: 62px; border: 1px solid var(--mobilya-border); border-radius: 6px; padding: 6px 8px; font: inherit; background: transparent; color: inherit; }
.cancel-blocked-list li { display: flex; flex-direction: column; gap: 2px; border: 1px dashed var(--mobilya-border); border-radius: 8px; padding: 10px 12px; opacity: 0.75; }
.cancel-blocked-list small { font-size: 12px; color: var(--mobilya-muted); }
.cancel-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.cancel-field > span { font-weight: 600; }
.cancel-field select, .cancel-field input { border: 1px solid var(--mobilya-border); border-radius: 6px; padding: 8px 10px; font: inherit; background: transparent; color: inherit; width: 100%; }
.cancel-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* İptal tetiği "Siparişlerime dön"ün SOLUNDA durur (kullanıcı isteği). */
.order-detail-top-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Form ürün tablosunun altında TAM genişlikte açılır — başlıktaki dar
   sütunun içinde değil. */
.cancel-box { width: 100%; margin-top: 20px; }

/* ------------------------------------------------------------------
   KÖK NEDEN DÜZELTMESİ (2026-08-26, Playwright + CDP
   CSS.getMatchedStylesForNode ile kesin kaynağı bulundu).

   styles.css (referans siteden HAM kopyalanan dosya) satır 868'de
   çıplak bir eleman kuralı taşıyor:

       section { float: left; width: 100%; }

   Referans sitenin kendi HTML'inde bu zararsızdı, ama BİZİM tema
   motorumuz ana sayfanın her bloğunu <section> ile sarıyor. Sonuç:
   her bölüm sola float'lanıyor, kendinden sonraki bölüm float'ın
   YANINA akmaya çalışıyor, 375px'te yatay boşluk kalmadığı için
   grid/flex çocukları SIFIR genişliğe çöküp viewport'un sağına
   taşıyor (ölçüm: .home-guide-grid width 0px / left 375px, belge
   scrollWidth 507px; aynı elemanın KLONU 335px alıyordu — fark
   CSS'ten değil, float bağlamından geliyordu).

   float bir blok düzeninde miras alınmaz ve bu sayfalarda hiç
   istenmiyor; en dar kapsamla geri alınır. styles.css'e
   DOKUNULMAZ — o dosya referans kaynağın birebir kopyası. */
.home-page > section,
.home-page > div,
main > section {
  float: none;
}

/* ------------------------------------------------------------------
   DOKUNMA HEDEFLERİ (WCAG 2.5.8 — Target Size Minimum, 24x24 CSS px)
   Sadece dokunmatik girdide uygulanır: fare ile 24px'in altındaki
   ikonlar sorun değil, parmakla ıskalanıyorlar. Görsel boyut
   büyütülmez; ::after ile görünmez bir dokunma alanı serilir, böylece
   referans siteden gelen görsel tasarım bozulmaz. */
@media (pointer: coarse) {
  .header-actions a, .header-actions button,
  .topbar-link, .action-heart,
  .footer a, .product-card-fav, .pagination a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; min-height: 24px;
  }
  .slider-dot, .hero-dot { position: relative; }
  .slider-dot::after, .hero-dot::after {
    content: ""; position: absolute; inset: -12px -6px;
  }
}

/* Sepete Eklendi Modalı — GERÇEK KULLANICI İSTEĞİ (2026-08-28): "sepete
   ekleme olduğunda ürün sepete eklenme animasyonu oluşsun alışveirşe
   devam et sepete devam et desin ordan sepete giderse". bkz.
   add-to-cart-modal.tsx — .btn/.btn-primary/.btn-outline (bu dosyada zaten
   tanımlı) kullanılır, tema-nötr renkler (nötr gri/siyah tonları) tercih
   edildi ki üç temada da (aydinlife/mobilya-classic/tekstil-classic) AYNI
   dosya İÇERİĞİ kopyalanabilsin (motor kodu, theme-contract dışı ama CSS
   şu an her temanın kendi theme-shell.css'inde ayrı ayrı yaşıyor — bkz.
   .cart-toast'ın da AYNI şekilde tekrarlandığı desen). */
.add-to-cart-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 20, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10000;
  animation: add-to-cart-backdrop-in 0.2s ease;
}
@keyframes add-to-cart-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.add-to-cart-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 14px;
  padding: 32px 28px 28px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  text-align: center;
  animation: add-to-cart-modal-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes add-to-cart-modal-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.add-to-cart-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #8a8a8a;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.15s ease, color 0.15s ease;
}
.add-to-cart-modal-close:hover {
  background: #f2f2f2;
  color: #1c1c1c;
}
.add-to-cart-modal-check {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  animation: add-to-cart-check-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
@keyframes add-to-cart-check-pop {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
.add-to-cart-modal-title {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 700;
  color: #1c1c1c;
}
.add-to-cart-modal-product {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 14px;
  border-radius: 10px;
  background: #f7f7f8;
  margin-bottom: 16px;
}
.add-to-cart-modal-product img,
.add-to-cart-modal-product-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  background: #e9e9ec;
  flex-shrink: 0;
}
.add-to-cart-modal-product-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.add-to-cart-modal-product-name {
  font-size: 14px;
  font-weight: 600;
  color: #1c1c1c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.add-to-cart-modal-product-meta {
  font-size: 13px;
  color: #6b6b6b;
}
.add-to-cart-modal-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
  margin-bottom: 22px;
  font-size: 14px;
  font-weight: 600;
  color: #1c1c1c;
}
.add-to-cart-modal-actions {
  display: flex;
  gap: 10px;
}
.add-to-cart-modal-actions .btn {
  flex: 1;
  height: 46px;
}
@media (max-width: 420px) {
  .add-to-cart-modal-actions {
    flex-direction: column-reverse;
  }
}

/* Checkout Hesap Adımı — bkz. checkout-account-step.tsx dosya başı
   yorumu. .checkout-payment-option zaten burada TANIMLI (kart deseni) —
   checkout-account-option SADECE bunu <button> olarak kullanılabilir
   kılmak için gereken ek stili taşır (radio input'u olmadığı için
   metin/hizalama küçük bir sapma gösterir). */
.checkout-account-step-lead {
  margin: 0 0 18px;
  color: #6b6b6b;
  font-size: 14px;
  line-height: 1.6;
}
.checkout-account-option {
  width: 100%;
  text-align: left;
  border: 1px solid #e4e4e4;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
}
.checkout-account-option:hover {
  border-color: #1c1c1c;
}
.checkout-account-step-alt {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13px;
}
.checkout-account-step-alt a {
  color: #6b6b6b;
  text-decoration: underline;
}
.checkout-account-step-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 14px;
  color: #6b6b6b;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.checkout-account-step-back:hover {
  color: #1c1c1c;
}
.checkout-account-step-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
}
.checkout-guest-note {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f7f7f8;
  font-size: 13px;
  line-height: 1.6;
  color: #4a4a4a;
}
.checkout-guest-note a {
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
}