/* Aydınlife tema shell — bileşenlerin (Header/Footer/ProductCard/pages)
   kullandığı işlevsel CSS. Kaynak tasarım: template/aydinlife/Aydinlife
   Mobilya v4.dc.html — sıcak amber/turuncu renk şeması, geniş container
   (1600px), yuvarlatılmış köşeler (8/12px). mobilya-classic/theme-shell.css
   İLE AYNI ilke: styles.css sadece token'ları/fontu taşır, bütün gerçek
   layout kuralları burada — regresyon riski olmadan ayrı ayrı güncellenebilir.
*/

/* ---------- Duyuru şeridi ---------- */
.ay-topbar {
  background: var(--ay-band);
  color: var(--ay-band-t);
  font-size: 12.5px;
}
.ay-topbar-inner {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ay-topbar-inner strong {
  color: var(--ay-acc2);
  font-weight: 800;
}
.ay-topbar-right {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.ay-topbar-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.2s;
}
.ay-topbar-link:hover {
  color: #fff;
  opacity: 0.9;
}
.ay-topbar-whatsapp {
  color: #25D366;
  font-weight: 600;
}
.ay-topbar-whatsapp:hover {
  color: #20ba5a;
}
.ay-topbar-socials {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding-left: 12px;
}
.ay-social-icon {
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.2s, transform 0.2s;
}
.ay-social-icon:hover {
  opacity: 1;
  transform: translateY(-1px);
  color: #fff;
}

/* ---------- Header ---------- */
.ay-header {
  position: sticky;
  top: 0;
  z-index: 70;
  background: #fff;
  box-shadow: 0 1px 0 var(--ay-line);
}
.ay-header-main {
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 44px);
  flex-wrap: wrap;
}
.ay-brand {
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  color: var(--ay-ink);
  text-decoration: none;
}
.ay-brand img {
  max-height: 80px;
  display: block;
}
.ay-brand-word {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.025em;
}
.ay-brand-word span {
  color: var(--ay-acc);
}
.ay-brand-sub {
  font-size: 9px;
  letter-spacing: 0.42em;
  color: var(--ay-mut);
  margin-top: 4px;
  font-weight: 600;
}
.ay-search {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  border: 1.5px solid var(--ay-line);
  border-radius: var(--ay-radius);
  background: var(--ay-tint);
  height: 48px;
  padding: 0 6px 0 16px;
  transition: border-color 0.25s ease;
}
.ay-search:focus-within {
  border-color: var(--ay-acc2);
}
.ay-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 14.5px;
  height: 100%;
}
.ay-search button {
  background: var(--ay-acc);
  color: #fff;
  height: 36px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  border: none;
  border-radius: 4px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s ease;
}
.ay-search button:hover {
  background: var(--ay-acc-h);
}
.ay-header-actions {
  display: flex;
  gap: clamp(14px, 1.6vw, 26px);
  align-items: center;
  flex-shrink: 0;
}
.ay-header-action {
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  color: var(--ay-mut);
  transition: color 0.2s;
  text-decoration: none;
}
.ay-header-action:hover {
  color: var(--ay-acc);
}
.ay-header-action-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}
.ay-header-action-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--ay-ink);
}
.ay-header-action-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ay-ink);
}
/* GERÇEK EKSİKLİK DÜZELTMESİ (2026-08-24) — Header.tsx'e eklenen gerçek
   giriş-durumu dropdown'ı için stiller. Mevcut .ay-header-action deseniyle
   AYNI renk/tipografi diline uyar. */
.ay-header-account {
  position: relative;
}
.ay-account-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  background: #fff;
  border-radius: var(--ay-radius);
  box-shadow: 0 16px 40px var(--ay-shadow);
  min-width: 190px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  z-index: 60;
  text-align: left;
}
.ay-account-dropdown a,
.ay-account-dropdown button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ay-ink);
  text-decoration: none;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.ay-account-dropdown a:hover,
.ay-account-dropdown button:hover {
  background: var(--ay-bg-soft, #f5f2ee);
  color: var(--ay-acc);
}
.ay-account-dropdown button {
  border-top: 1px solid #eee;
  margin-top: 4px;
  color: #b3261e;
}
.ay-account-dropdown button:hover {
  background: #fdeceb;
  color: #b3261e;
}

.ay-cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--ay-ink);
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}
.ay-cart-btn:hover {
  color: var(--ay-acc);
  background: var(--ay-tint);
}
.ay-cart-icon {
  display: block;
  width: 23px;
  height: 23px;
}
.ay-cart-count {
  position: absolute;
  top: 2px;
  right: 0;
  background: var(--ay-acc);
  color: #fff;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  padding: 0 4px;
}

/* ---------- Ana navigasyon ---------- */
.ay-nav {
  position: relative;
  border-top: 1px solid var(--ay-line);
}
.ay-nav-row {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}
.ay-nav-item {
  padding: 0 clamp(10px, 1.1vw, 17px);
  height: 50px;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ay-ink);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color 0.2s ease, box-shadow 0.2s ease;
  background: none;
  border: none;
}
.ay-nav-item.is-active,
.ay-nav-item:hover {
  color: var(--ay-acc);
}
.ay-nav-badge {
  background: var(--ay-sale);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.ay-nav-mobile-toggle {
  display: none;
}
.ay-nav-outlet {
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ay-sale);
  cursor: pointer;
  text-decoration: none;
  padding: 0 clamp(10px, 1.1vw, 17px);
}
.ay-mega {
  position: absolute;
  left: 0;
  top: 100%;
  background: #fff;
  border-top: 1px solid var(--ay-line);
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.13);
  z-index: 80;
  padding: clamp(20px, 2.4vw, 34px) clamp(16px, 3vw, 40px);
  /* GERÇEK EKSİKLİK DÜZELTMESİ (2026-08-24) — panel eskiden `right:0` ile
     TÜM nav genişliğine (1376px+) zorlanıyordu, içerik (3-9 öğe) genelde
     bunun küçük bir kısmını doldurup sağda büyük, boş bir beyaz alan
     bırakıyordu. Artık panel SADECE içeriği kadar geniş olur (min-content
     tabanlı column akışı + width:fit-content), maksimum nav genişliğini
     aşmaz — az öğeli kategorilerde (örn. 2 öğeli "Unisex") dar, çok
     öğeli kategorilerde (7-9 öğeli) daha geniş bir panel açılır. */
  width: fit-content;
  max-width: 100%;
}
.ay-mega-col-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--ay-acc);
  margin-bottom: 14px;
}
.ay-mega-col-items {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
/* GERÇEK EKSİKLİK DÜZELTMESİ (2026-08-24, kullanıcı isteği: mega menü
   genişlik/hizalama sorunu) — bkz. Header.tsx dosya başı yorumu. Eski
   3'erli grid (repeat(auto-fit, minmax(180px,1fr))) alt kategori sayısı
   3'ün katı olmayan mağazalarda (bu mağazada 7 öğe) son hücreyi tek
   başına bırakıp geniş, dengesiz bir boş alan üretiyordu. CSS çoklu-
   sütun (column-count), öğe sayısı ne olursa olsun akışı otomatik
   dengeler — 4-8 öğe arası genelde 2-3 sütuna doğal olarak yerleşir,
   panel genişliği kadar yayılır, sağda boşluk BIRAKMAZ.
   break-inside:avoid tek bir linkin sütun sınırında ikiye bölünmesini
   engeller. */
.ay-mega-col-items--balanced {
  display: block;
  column-width: 200px;
  column-gap: clamp(24px, 2.4vw, 40px);
}
.ay-mega-col-items--balanced a {
  display: block;
  margin-bottom: 9px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.ay-mega-col-items a {
  font-size: 14px;
  color: var(--ay-ink);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.18s ease, padding-left 0.18s ease;
}
.ay-mega-col-items a:hover {
  color: var(--ay-acc);
  padding-left: 4px;
}

/* ---------- Hero slider ---------- */
.ay-hero {
  position: relative;
  width: 100%;
  height: clamp(360px, 44vw, 560px);
  background: var(--ay-tint);
  overflow: hidden;
}
.ay-hero-slide {
  position: absolute;
  inset: 0;
}
.ay-hero-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ay-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.42) 46%, rgba(0, 0, 0, 0.05) 78%);
}
.ay-hero-copy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
.ay-hero-copy-inner {
  max-width: min(560px, 82%);
}
.ay-hero-badge {
  display: inline-block;
  background: var(--ay-sale);
  color: #fff;
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 7px 14px;
  border-radius: 3px;
  margin-bottom: clamp(14px, 1.8vw, 22px);
}
.ay-hero-title {
  font-size: clamp(28px, 4.4vw, 52px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 clamp(10px, 1.4vw, 18px);
}
.ay-hero-text {
  font-size: clamp(14px, 1.4vw, 18px);
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 clamp(18px, 2.4vw, 30px);
  line-height: 1.5;
}
.ay-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ay-btn-solid {
  background: var(--ay-acc);
  color: #fff;
  padding: 15px 32px;
  border-radius: var(--ay-radius);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-decoration: none;
  display: inline-block;
  transition: all 0.25s ease;
}
.ay-btn-solid:hover {
  background: var(--ay-acc2);
  color: var(--ay-band);
  transform: translateY(-2px);
}
.ay-btn-outline-light {
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  padding: 15px 28px;
  border-radius: var(--ay-radius);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: all 0.25s ease;
}
.ay-btn-outline-light:hover {
  background: #fff;
  color: var(--ay-ink);
}
.ay-btn-outline {
  display: inline-block;
  border: 1.5px solid var(--ay-acc);
  color: var(--ay-acc);
  padding: 13px 34px;
  border-radius: var(--ay-radius);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
  background: none;
}
.ay-btn-outline:hover {
  background: var(--ay-acc);
  color: #fff;
  box-shadow: 0 10px 26px var(--ay-shadow);
}
.ay-hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 9px;
}
.ay-hero-dot {
  width: 10px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: all 0.35s ease;
  border: none;
  padding: 0;
}
.ay-hero-dot.is-active {
  width: 30px;
  background: var(--ay-acc2);
}
.ay-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  color: var(--ay-ink);
  border: none;
  transition: background 0.2s;
}
.ay-hero-arrow:hover {
  background: var(--ay-acc2);
}
.ay-hero-arrow.is-prev {
  left: clamp(8px, 1.4vw, 20px);
}
.ay-hero-arrow.is-next {
  right: clamp(8px, 1.4vw, 20px);
}

/* ---------- Genel bölüm başlıkları ---------- */
.ay-section {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) clamp(16px, 3vw, 40px) 0;
}
.ay-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.ay-section-title {
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
}
.ay-section-sub {
  font-size: 15px;
  color: var(--ay-mut);
  margin: 0;
}
.ay-section-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--ay-acc);
  cursor: pointer;
  text-decoration: none;
}

/* ---------- Ürün Slider & Kategori Sekmeleri ---------- */
.ay-slider-arrows {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ay-slider-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--ay-line, #e4ddd7);
  background: #fff;
  color: var(--ay-ink, #2b2320);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: all 0.2s ease;
}
.ay-slider-arrow:hover {
  background: var(--ay-acc, #765039);
  border-color: var(--ay-acc, #765039);
  color: #fff;
}

/* ---------- Kilim Mobilya Dairesel Kategori Halkaları (Story Bar) ---------- */
.ay-circle-stories-section {
  padding: 20px 0 10px;
  background: var(--ay-bg, #ffffff);
}
.ay-circle-stories-wrap {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 8px 16px 16px;
  scrollbar-width: none;
  justify-content: flex-start;
  -webkit-overflow-scrolling: touch;
}
.ay-circle-stories-wrap::-webkit-scrollbar {
  display: none;
}
@media (min-width: 1024px) {
  .ay-circle-stories-wrap {
    justify-content: center;
  }
}
.ay-circle-story-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
  transition: transform 0.25s ease;
}
.ay-circle-story-item:hover {
  transform: translateY(-4px);
}
.ay-circle-story-ring {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, var(--ay-acc, #765039) 0%, var(--ay-acc2, #f5a623) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.ay-circle-story-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
}
.ay-circle-story-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ay-ink, #2b2320);
  text-align: center;
  white-space: nowrap;
}

.ay-category-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 24px;
  scrollbar-width: none;
}
.ay-category-tabs::-webkit-scrollbar {
  display: none;
}
.ay-category-tab {
  padding: 9px 20px;
  border-radius: 22px;
  border: 1.5px solid var(--ay-line, #e4ddd7);
  background: #fff;
  color: var(--ay-ink, #2b2320);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.ay-category-tab:hover,
.ay-category-tab.is-active {
  background: var(--ay-ink, #2b2320);
  border-color: var(--ay-ink, #2b2320);
  color: #fff;
}

.ay-product-slider-wrap {
  position: relative;
}
.ay-product-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 8px 4px 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ay-product-slider::-webkit-scrollbar {
  display: none;
}

/* ---------- 2 Sıra Halinde Tab'lı Ürün Grid / Slider ---------- */
.ay-two-row-grid-wrap {
  position: relative;
}
.ay-two-row-grid {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 8px 4px 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ay-two-row-grid::-webkit-scrollbar {
  display: none;
}
.ay-two-row-grid > * {
  scroll-snap-align: start;
}
@media (max-width: 768px) {
  .ay-two-row-grid {
    grid-auto-columns: minmax(230px, 1fr);
    gap: 14px;
  }
}
.ay-product-slider > * {
  flex: 0 0 calc(25% - 15px);
  min-width: 270px;
  scroll-snap-align: start;
}
@media (max-width: 1024px) {
  .ay-product-slider > * {
    flex: 0 0 calc(33.333% - 14px);
    min-width: 240px;
  }
}
@media (max-width: 768px) {
  .ay-product-slider > * {
    flex: 0 0 calc(50% - 10px);
    min-width: 210px;
  }
}
@media (max-width: 480px) {
  .ay-product-slider > * {
    flex: 0 0 82%;
    min-width: 190px;
  }
}

/* ---------- Banner Grid (Yan Yana 3'lü / 2'li / 4'lü) ---------- */
.ay-banner-grid {
  display: grid;
  gap: 24px;
}
.ay-banner-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ay-banner-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ay-banner-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .ay-banner-grid-3,
  .ay-banner-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .ay-banner-grid-2,
  .ay-banner-grid-3,
  .ay-banner-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ---------- Ürün Kategorileri Grid (Fotoğraflı Kartlar) ---------- */
.ay-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.ay-cat-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 220px;
  display: block;
  text-decoration: none;
  background: var(--ay-tint, #faf9f8);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.ay-cat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.13);
}
.ay-cat-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.ay-cat-card:hover .ay-cat-card-img {
  transform: scale(1.06);
}
.ay-cat-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 15, 10, 0.82) 0%, rgba(20, 15, 10, 0.15) 60%, transparent 100%);
  display: flex;
  align-items: flex-end;
  padding: 20px;
}
.ay-cat-card-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.ay-banner-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  height: 260px;
  background: var(--ay-tint, #faf9f8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.ay-banner-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
}
.ay-banner-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.ay-banner-card:hover img {
  transform: scale(1.06);
}
.ay-banner-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30, 20, 15, 0.78) 0%, rgba(30, 20, 15, 0.15) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  color: #fff;
}
.ay-banner-card-tag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--ay-acc2, #f5a623);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.ay-banner-card-overlay h3 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
}
.ay-banner-card-overlay p {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}
.ay-banner-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ay-band, #3a2e2b);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

/* ---------- InstaShop ---------- */
.ay-instashop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 900px) {
  .ay-instashop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 500px) {
  .ay-instashop-grid {
    grid-template-columns: 1fr;
  }
}
.ay-instashop-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 290px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  background: var(--ay-tint, #faf9f8);
}
.ay-instashop-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.ay-instashop-card:hover img {
  transform: scale(1.08);
}
.ay-instashop-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 15, 10, 0.85) 0%, rgba(20, 15, 10, 0.25) 50%, rgba(20, 15, 10, 0.4) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  color: #fff;
}
.ay-instashop-card:hover .ay-instashop-overlay {
  opacity: 1;
}
.ay-instashop-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ay-instashop-user {
  font-weight: 700;
  font-size: 13.5px;
}
.ay-instashop-likes {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.9;
}
.ay-instashop-caption {
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

/* ---------- Inspiration / Blog Cards ---------- */
.ay-inspiration-card {
  background: #fff;
  border: 1px solid var(--ay-line, #e4ddd7);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ay-inspiration-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
.ay-inspiration-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ay-acc, #765039);
  margin-bottom: 8px;
}
.ay-inspiration-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ay-ink, #2b2320);
  margin: 0 0 10px;
  line-height: 1.35;
}
.ay-inspiration-desc {
  font-size: 13.5px;
  color: var(--ay-mut, #85807c);
  line-height: 1.55;
  margin: 0 0 18px;
}
.ay-inspiration-link {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ay-ink, #2b2320);
  text-decoration: none;
  transition: color 0.2s;
}
.ay-inspiration-link:hover {
  color: var(--ay-acc, #765039);
}

/* ---------- Doğtaş Tarzı İkili Hizmet Bannerları ---------- */
.ay-duo-banner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 700px) {
  .ay-duo-banner {
    grid-template-columns: 1fr;
  }
}
.ay-duo-card {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  height: 480px;
  text-decoration: none;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.ay-duo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
}
.ay-duo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.ay-duo-card:hover img {
  transform: scale(1.05);
}
.ay-duo-text {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 15, 10, 0.82) 0%, rgba(20, 15, 10, 0.3) 55%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  color: #fff;
}
.ay-duo-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px;
  line-height: 1.3;
}
.ay-duo-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 16px;
  line-height: 1.5;
}
.ay-duo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  padding: 10px 22px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background 0.25s;
  width: fit-content;
}
.ay-duo-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ---------- Düğün Paketleri & Evlilik Setleri ---------- */
.ay-wedding-section {
  background: linear-gradient(180deg, #fbf7f4 0%, #ffffff 100%);
  padding: 40px 24px;
  border-radius: 8px;
  margin: 36px 0;
  border: 1px solid var(--ay-line, #e4ddd7);
}
.ay-wedding-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}
@media (max-width: 990px) {
  .ay-wedding-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}
.ay-wedding-card {
  position: relative;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--ay-line, #e4ddd7);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.ay-wedding-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}
.ay-wedding-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.ay-wedding-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.ay-wedding-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff4e5;
  color: #b86e00;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: fit-content;
}
.ay-wedding-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--ay-ink, #2b2320);
  margin: 0;
  line-height: 1.3;
}
.ay-wedding-desc {
  font-size: 14px;
  color: var(--ay-mut, #85807c);
  margin: 0;
  line-height: 1.5;
}
.ay-wedding-items-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.ay-wedding-item-pill {
  font-size: 12px;
  background: var(--ay-bg-sub, #f5f2ee);
  color: var(--ay-ink, #2b2320);
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 600;
}
.ay-wedding-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ay-acc, #765039);
  transition: color 0.2s;
}
.ay-wedding-card:hover .ay-wedding-cta {
  color: var(--ay-ink, #2b2320);
}

/* ---------- Kampanya Slider ---------- */
.ay-campaign-slider-wrap {
  position: relative;
}
.ay-campaign-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 0;
}
.ay-campaign-slider::-webkit-scrollbar {
  display: none;
}
.ay-campaign-card {
  flex: 0 0 340px;
  scroll-snap-align: start;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ay-line, #e4ddd7);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.ay-campaign-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.13);
}
.ay-campaign-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.ay-campaign-card-body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.ay-campaign-card-badge {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ay-acc, #765039);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ay-campaign-card-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--ay-ink, #2b2320);
  margin: 0;
  line-height: 1.35;
}
.ay-campaign-card-desc {
  font-size: 15px;
  color: var(--ay-mut, #85807c);
  margin: 0;
  line-height: 1.55;
}
.ay-campaign-card-cta {
  font-size: 15px;
  font-weight: 700;
  color: var(--ay-acc, #765039);
  margin-top: auto;
  padding-top: 10px;
  transition: color 0.2s;
}
.ay-campaign-card:hover .ay-campaign-card-cta {
  color: var(--ay-ink, #2b2320);
}

/* ---------- Newsletter ---------- */
.ay-newsletter {
  background: var(--ay-band, #3a2e2b);
  color: #fff;
  padding: 56px 0;
}
.ay-newsletter-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.ay-newsletter-text {
  flex: 1;
  min-width: 260px;
}
.ay-newsletter-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px;
}
.ay-newsletter-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}
.ay-newsletter-form {
  display: flex;
  gap: 0;
  flex: 1;
  min-width: 280px;
  max-width: 440px;
}
.ay-newsletter-input {
  flex: 1;
  padding: 14px 18px;
  border: none;
  border-radius: 10px 0 0 10px;
  font-size: 14px;
  outline: none;
  color: var(--ay-ink, #2b2320);
}
.ay-newsletter-btn {
  padding: 14px 24px;
  border: none;
  border-radius: 0 10px 10px 0;
  background: var(--ay-acc, #765039);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.25s;
  white-space: nowrap;
}
.ay-newsletter-btn:hover {
  background: var(--ay-acc2, #5a3d2b);
}

/* ---------- En Yeniler Showcase (Doğtaş: swiper-camp) ---------- */
.ay-newshowcase {
  display: grid;
  grid-template-columns: 7fr 5fr;
  background: var(--ay-bg-sub, #f9f6f3);
  border-radius: 20px;
  overflow: hidden;
  min-height: 440px;
  margin: 40px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
@media (max-width: 900px) {
  .ay-newshowcase {
    grid-template-columns: 1fr;
  }
}
.ay-newshowcase-img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  overflow: hidden;
}
.ay-newshowcase-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ay-newshowcase-info {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
@media (max-width: 600px) {
  .ay-newshowcase-info {
    padding: 24px;
  }
}
.ay-newshowcase-badge {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--ay-acc, #765039);
  text-transform: uppercase;
}
.ay-newshowcase-name {
  font-size: 32px;
  font-weight: 800;
  color: var(--ay-ink, #2b2320);
  margin: 0;
  line-height: 1.2;
}
.ay-newshowcase-desc {
  font-size: 15px;
  color: var(--ay-mut, #85807c);
  margin: 0;
  line-height: 1.6;
}
.ay-newshowcase-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ay-ink, #2b2320);
  color: #fff;
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  width: fit-content;
  transition: background 0.25s, transform 0.2s;
  margin-top: 8px;
}
.ay-newshowcase-btn:hover {
  background: var(--ay-acc, #765039);
  transform: translateY(-2px);
}
.ay-newshowcase-dots {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

/* ---------- Bu Ayın Ürünleri (Doğtaş: month) ---------- */
.ay-month-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 24px;
  margin: 32px 0;
}
@media (max-width: 900px) {
  .ay-month-grid {
    grid-template-columns: 1fr;
  }
}
.ay-month-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 380px;
  display: block;
  text-decoration: none;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.ay-month-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
}
.ay-month-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.ay-month-card:hover img {
  transform: scale(1.04);
}
.ay-month-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 15, 10, 0.85) 0%, rgba(20, 15, 10, 0.2) 60%, transparent 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 32px;
  color: #fff;
}
.ay-month-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ay-month-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ay-month-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
}
.ay-month-name {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  margin: 4px 0 0;
}
.ay-month-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  transition: background 0.3s, transform 0.3s;
}
.ay-month-card:hover .ay-month-arrow {
  background: rgba(255, 255, 255, 0.4);
  transform: translateX(4px);
}

/* ---------- Kategori ızgarası ---------- */
.ay-quickcat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}
.ay-quickcat {
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.ay-quickcat-image {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ay-tint);
  margin-bottom: 12px;
  transition: box-shadow 0.34s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.34s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.ay-quickcat-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ay-quickcat:hover .ay-quickcat-image {
  box-shadow: 0 14px 32px var(--ay-shadow);
  transform: translateY(-5px);
}
.ay-quickcat-label {
  font-size: 14px;
  font-weight: 700;
}
.ay-quickcat-count {
  font-size: 12.5px;
  color: var(--ay-mut);
}

/* ---------- Ürün ızgaraları ---------- */
/* GERÇEK EKSİKLİK DÜZELTMESİ (2026-08-23, kullanıcı geri bildirimi):
   "ürünler genel olarak yan yana 4 tane olacak" — auto-fill/minmax esnek
   ızgara geniş ekranlarda 5-6 sütuna kadar genişleyebiliyordu (v4.dc.html
   kaynak tasarımının "repeat(4,1fr)" sabit ızgarasıyla TUTARSIZ). Masaüstünde
   sabit 4 sütun, dar ekranlarda kademeli olarak azalır (tablet 3, mobil 2/1).
*/
.ay-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.ay-product-grid.is-wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ay-product-grid.is-list {
  grid-template-columns: 1fr;
}
@media (max-width: 1180px) {
  .ay-product-grid,
  .ay-product-grid.is-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .ay-product-grid,
  .ay-product-grid.is-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .ay-product-grid,
  .ay-product-grid.is-wide {
    grid-template-columns: 1fr;
  }
}

/* ---------- Ürün kartı ---------- */
.ay-card {
  background: #fff;
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--ay-ink);
  transition: box-shadow 0.34s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.34s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.34s ease;
  text-decoration: none;
}
.ay-card:hover {
  box-shadow: 0 18px 42px var(--ay-shadow);
  transform: translateY(-6px);
  border-color: var(--ay-acc2);
}
.ay-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--ay-tint);
  cursor: pointer;
  overflow: hidden;
  display: block;
}
.ay-card-media img,
.ay-card-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.55s ease;
}
.ay-card-media img.is-secondary,
.ay-card-media video.is-secondary {
  opacity: 0;
}
.ay-card-media:hover img.is-primary {
  opacity: 0;
}
.ay-card-media:hover img.is-secondary,
.ay-card-media:hover video.is-secondary {
  opacity: 1;
}
.ay-card-badge-disc {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--ay-sale);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 5px;
  pointer-events: none;
  z-index: 3;
}
.ay-card-badge-tag {
  position: absolute;
  top: 10px;
  right: 46px;
  background: var(--ay-band);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 5px 9px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 3;
}
.ay-card-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  z-index: 4;
  transition: transform 0.2s ease;
  border: none;
  color: #d3c6bf;
}
.ay-card-fav.is-active {
  color: var(--ay-sale);
}
.ay-card-fav:hover {
  transform: scale(1.12);
}
.ay-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ay-card-cat {
  font-size: 11.5px;
  color: var(--ay-mut);
  margin-bottom: 5px;
}
.ay-card-name {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.ay-card-name:hover {
  color: var(--ay-acc);
}
.ay-card-stars {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 14px;
}
.ay-card-stars-val {
  color: var(--ay-star);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.ay-card-stars-count {
  font-size: 12px;
  color: var(--ay-mut);
}
.ay-card-priceblock {
  margin-top: auto;
}
.ay-card-old {
  font-size: 13px;
  color: var(--ay-mut);
  text-decoration: line-through;
}
.ay-card-price {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
}
.ay-card-price.is-discounted {
  color: var(--ay-sale);
}
.ay-card-inst {
  font-size: 12.5px;
  color: var(--ay-mut);
  margin-bottom: 14px;
}
.ay-card-dealer {
  display: inline-block;
  background: var(--ay-tint2);
  color: var(--ay-acc);
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.ay-card-cta {
  background: var(--ay-acc);
  color: #fff;
  text-align: center;
  padding: 12px;
  border-radius: var(--ay-radius);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  width: 100%;
  transition: background 0.25s ease;
}
.ay-card-cta:hover {
  background: var(--ay-acc-h);
}
.ay-card-cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Geniş kart varyantı — kategori/koleksiyon sayfalarında kullanılabilir */
.ay-card.is-wide .ay-card-body {
  padding: clamp(18px, 2vw, 26px);
}
.ay-card.is-wide .ay-card-cat {
  font-size: 12px;
  color: var(--ay-acc);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ay-card.is-wide .ay-card-name {
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.ay-card.is-wide .ay-card-desc {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ay-mut);
  margin: 0 0 14px;
}
.ay-card.is-wide .ay-card-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.ay-card.is-wide .ay-card-cta {
  width: auto;
  padding: 14px 28px;
}

/* ---------- Kampanya bandı ---------- */
.ay-band {
  margin-top: clamp(40px, 5vw, 72px);
  background: var(--ay-band);
  color: var(--ay-band-t);
}
.ay-band-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 56px) clamp(16px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 32px;
  align-items: center;
}
.ay-band-title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.ay-band-text {
  font-size: 15.5px;
  margin: 0;
  max-width: 520px;
}
.ay-band-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ay-btn-band {
  background: var(--ay-acc2);
  color: var(--ay-band);
  padding: 15px 30px;
  border-radius: var(--ay-radius);
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: all 0.25s ease;
  border: none;
}
.ay-btn-band:hover {
  background: #fff;
  transform: translateY(-2px);
}

/* ---------- Güven şeridi ---------- */
.ay-trust-strip {
  background: #fff;
  border-bottom: 1px solid var(--ay-line);
}
.ay-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}
.ay-trust-item {
  display: flex;
  gap: 13px;
  align-items: center;
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius-lg);
  padding: 16px;
}
.ay-trust-no {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ay-tint2);
  color: var(--ay-acc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}
.ay-trust-title {
  font-size: 14.5px;
  font-weight: 700;
}
.ay-trust-sub {
  font-size: 12.5px;
  color: var(--ay-mut);
}

/* ---------- Genel içerik/liste sayfaları ---------- */
.ay-main {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px clamp(16px, 3vw, 40px) 72px;
}
/* .container/.section — GERÇEK EKSİKLİK DÜZELTMESİ (2026-08-24):
   favorilerim/page.tsx, son-baktiklarim/page.tsx, hakkimizda/page.tsx,
   sikca-sorulan-sorular/page.tsx gibi rota-seviyesi sayfalar bu sınıfları
   kullanıyordu ama Aydınlife temasında HİÇ tanımlı değildi (mobilya-classic/
   tekstil-classic'te vardı) — bu sayfalar Aydınlife'ta tamamen stilsiz
   (tarayıcı varsayılanı) görünüyordu. .ay-main İLE AYNI genişlik/dolgu
   token'ları kullanılır, tutarlı bir "genel sayfa" iskeleti sağlar.
   .commerce-page-heading/.favorites-* İLE AYNI mobilya-classic sınıf
   adları — /son-baktiklarim İLE /favorilerim AYNI markup'ı paylaşır. */
.container {
  max-width: 1600px;
  margin: 0 auto;
  padding-left: clamp(16px, 3vw, 40px);
  padding-right: clamp(16px, 3vw, 40px);
}
.section {
  padding-top: 20px;
  padding-bottom: 72px;
}
.commerce-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--ay-line);
  padding-bottom: 20px;
}
.commerce-page-heading .section-eyebrow {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ay-acc-h);
}
.commerce-page-heading .section-title {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.commerce-page-heading > span:last-child {
  color: var(--ay-mut);
  font-weight: 700;
  white-space: nowrap;
}
.favorites-empty {
  padding: 76px 24px;
  border: 1px solid var(--ay-line);
  background: var(--ay-tint);
  text-align: center;
}
.favorites-empty > span {
  display: block;
  font-size: 48px;
}
.favorites-empty h2 {
  margin: 12px 0 8px;
  font-size: 24px;
  font-weight: 800;
}
.favorites-empty p {
  max-width: 520px;
  margin: 0 auto 24px;
  color: var(--ay-mut);
  line-height: 1.65;
}
.favorites-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.favorite-card {
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius-lg);
  overflow: hidden;
  background: #fff;
}
.favorite-card-image {
  display: flex;
  aspect-ratio: 1/1;
  align-items: center;
  justify-content: center;
  background: var(--ay-tint);
  color: var(--ay-mut);
}
.favorite-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.favorite-card-body {
  padding: 16px;
}
.favorite-card-body h2 {
  min-height: 40px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.favorite-card-body b {
  display: block;
  color: var(--ay-acc-h);
  font-size: 18px;
  font-weight: 800;
}
.favorite-card-body button {
  margin-top: 12px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--ay-mut);
  font-size: 12.5px;
  cursor: pointer;
}
@media (max-width: 1180px) {
  .favorites-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .favorites-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .commerce-page-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}
.ay-breadcrumb {
  font-size: 12.5px;
  color: var(--ay-mut);
  margin-bottom: 14px;
}
.ay-breadcrumb a {
  color: var(--ay-mut);
  text-decoration: none;
  cursor: pointer;
}
.ay-breadcrumb a:hover {
  color: var(--ay-acc);
}
.ay-page-title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ay-page-title {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0;
}
.ay-page-count {
  font-size: 14px;
  color: var(--ay-mut);
}
.ay-page-desc {
  font-size: 14.5px;
  color: var(--ay-mut);
  margin: 0 0 28px;
  max-width: 660px;
}

.ay-listing-layout {
  display: grid;
  grid-template-columns: clamp(190px, 17vw, 246px) minmax(0, 1fr);
  gap: clamp(18px, 2vw, 32px);
  align-items: start;
}
.ay-filter-box {
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius-lg);
  padding: 18px;
  margin-bottom: 14px;
}
.ay-filter-title {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 14px;
}
.ay-filter-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Kategori satırları — kullanıcı geri bildirimi (2026-08-23): "sol menüde
   kategori başlıklarının altında altı çizgili ayraç olsun, sağ tarafına
   ok ekle". Sadece .ay-filter-list > .ay-filter-row (Kategori bloğundaki
   gerçek <a> linkleri) etkilenir — Fiyat Aralığı/Kampanya bloklarının
   checkbox satırları (.ay-filter-check) bu kuralın DIŞINDA kalır, onlar
   zaten kendi ayraçsız stilini korur (farklı etkileşim: seçim, gezinme
   değil). */
.ay-filter-list > .ay-filter-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--ay-line);
}
.ay-filter-list > .ay-filter-row:last-child {
  border-bottom: none;
}
.ay-filter-row::after {
  content: "›";
  font-size: 16px;
  line-height: 1;
  color: var(--ay-mut);
  transition: color 0.18s, transform 0.18s;
}
.ay-filter-row:hover::after {
  color: var(--ay-acc);
  transform: translateX(2px);
}
.ay-filter-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #4a423e;
  font-weight: 400;
  transition: color 0.18s;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  width: 100%;
}
.ay-filter-row:hover {
  color: var(--ay-acc);
}
.ay-filter-row.is-active {
  color: var(--ay-acc);
  font-weight: 500;
}
.ay-filter-count {
  color: var(--ay-mut);
  font-size: 12.5px;
}
.ay-filter-check {
  display: flex;
  gap: 9px;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
}
.ay-filter-check-box {
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--ay-line);
  border-radius: 3px;
  background: #fff;
  flex-shrink: 0;
  transition: all 0.18s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ay-filter-check.is-active .ay-filter-check-box {
  border-color: var(--ay-acc);
  background: var(--ay-acc);
}
.ay-filter-swatch {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.ay-listing-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  background: var(--ay-tint);
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius-lg);
  padding: 11px 15px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.ay-listing-toolbar select {
  font-size: 13.5px;
  padding: 7px 13px;
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius);
  background: #fff;
  color: var(--ay-ink);
}
.ay-empty-state {
  padding: 70px 0;
  text-align: center;
  color: var(--ay-mut);
  font-size: 15px;
}
.ay-empty-state button {
  color: var(--ay-acc);
  font-weight: 800;
  cursor: pointer;
  background: none;
  border: none;
  /* underline KALDIRILDI (kullanıcı isteği 2026-08-25: "hiç bir yerde underline olmayacak") */
}

/* ---------- Sayfalama ---------- */
.ay-pagination {
  text-align: center;
  margin-top: 34px;
}
.ay-page-links {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.ay-page-links a,
.ay-page-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: var(--ay-radius);
  border: 1px solid var(--ay-line);
  color: var(--ay-ink);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.ay-page-links a.is-active {
  background: var(--ay-acc);
  border-color: var(--ay-acc);
  color: #fff;
}
.ay-page-links a.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ---------- Ürün detay sayfası ---------- */
.ay-pdp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
  gap: clamp(24px, 3vw, 52px);
  align-items: start;
}
.ay-pdp-gallery {
  position: sticky;
  top: 100px;
}
.ay-pdp-main-image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--ay-tint);
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius-lg);
  overflow: hidden;
}
.ay-pdp-main-image img,
.ay-pdp-main-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ay-pdp-main-image video {
  background: #000;
}
.ay-pdp-badge-disc {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--ay-sale);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  padding: 8px 13px;
  border-radius: var(--ay-radius);
  pointer-events: none;
  z-index: 4;
}
/* Galeri küçük resim şeridi — GERÇEK EKSİKLİK DÜZELTMESİ (2026-08-24,
   kullanıcı geri bildirimi: "büyük resim altındaki resimleri sağa sola
   slider olarak yap"). Önceden sabit 5 sütunlu grid'di (çok görselli
   ürünlerde taşıyor/sıkışıyordu) — artık yatay kaydırılabilir bir şerit
   + sol/sağ ok butonlu (bkz. ProductDetailPage.tsx ay-pdp-thumb-track ve
   scrollThumbs()). Ok butonları sadece taşma varsa görünür durumda
   tutulur (JS ile .is-hidden class'ı), taşma yoksa hiç render edilmez. */
.ay-pdp-thumbs {
  position: relative;
  margin-top: 10px;
}
.ay-pdp-thumb-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.ay-pdp-thumb-track::-webkit-scrollbar {
  display: none;
}
.ay-pdp-thumb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--ay-line);
  background: #fff;
  color: var(--ay-ink);
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  z-index: 3;
  transition: opacity 0.15s ease;
}
.ay-pdp-thumb-nav:hover {
  background: var(--ay-tint);
}
.ay-pdp-thumb-nav.is-hidden {
  display: none;
}
.ay-pdp-thumb-nav--prev {
  left: -6px;
}
.ay-pdp-thumb-nav--next {
  right: -6px;
}
.ay-pdp-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 84px;
  aspect-ratio: 4 / 3;
  background: var(--ay-tint);
  border: 2px solid var(--ay-line);
  border-radius: var(--ay-radius);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s ease;
}
.ay-pdp-thumb img,
.ay-pdp-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ay-pdp-thumb.is-active {
  border-color: var(--ay-acc);
}
/* Video küçük resmi görselden ayrışsın diye oynat ikonu overlay'i —
   GERÇEK EKSİKLİK DÜZELTMESİ (2026-08-27). */
.ay-pdp-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
  background: rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.ay-pdp-cat {
  font-size: 12.5px;
  color: var(--ay-mut);
  margin-bottom: 8px;
}
.ay-pdp-title {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 10px;
}
/* "Bu takım N parçadan oluşur" özeti — GERÇEK EKSİKLİK DÜZELTMESİ
   (2026-08-24, kullanıcı geri bildirimi: "ürün detayın başında ürün
   parçaları olarak da göstersin"). Önceden setItems SADECE alt "Takım
   İçeriği" sekmesinde görünüyordu — sayfayı ilk açtığında bunun bir
   "takım" ürünü olduğu hemen anlaşılmıyordu. Bu, sağ (bilgi) kolonunun
   en üstünde, başlığın hemen altında küçük bir teaser: parça sayısı +
   ilk birkaç parçanın küçük görseli + "Takım İçeriği" sekmesine atlayan
   link (bkz. ProductDetailPage.tsx handleJumpToKit()). Tıklama olmadan
   da bilgi taşır (uydurma bir CTA değil, gerçek setItems verisiyle). */
.ay-pdp-kit-teaser {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius);
  background: var(--ay-tint);
}
.ay-pdp-kit-teaser-thumbs {
  display: flex;
  flex-shrink: 0;
}
.ay-pdp-kit-teaser-thumb {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #fff;
  overflow: hidden;
  background: #e5e0d9;
  margin-left: -10px;
}
.ay-pdp-kit-teaser-thumb:first-child {
  margin-left: 0;
}
.ay-pdp-kit-teaser-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ay-pdp-kit-teaser-text {
  flex: 1;
  font-size: 13px;
  color: var(--ay-mut);
}
.ay-pdp-kit-teaser-text strong {
  color: var(--ay-ink);
}
.ay-pdp-kit-teaser-link {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ay-acc);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.ay-pdp-kit-teaser-link:hover {
  /* underline KALDIRILDI (kullanıcı isteği 2026-08-25: "hiç bir yerde underline olmayacak") */
}
.ay-pdp-rating-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ay-pdp-price-box {
  background: var(--ay-tint);
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius-lg);
  padding: 20px;
  margin-bottom: 22px;
}
.ay-pdp-old-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.ay-pdp-old {
  font-size: 15px;
  color: var(--ay-mut);
  text-decoration: line-through;
}
.ay-pdp-disc-chip {
  background: var(--ay-sale);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 3px;
}
.ay-pdp-price {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.ay-pdp-price.is-discounted {
  color: var(--ay-sale);
}
.ay-pdp-inst {
  font-size: 13.5px;
  color: var(--ay-mut);
  margin-top: 8px;
}
.ay-pdp-inst strong {
  color: var(--ay-ink);
  font-weight: 800;
}
/* Ürün özellikleri vurgu paneli — bkz. ProductDetailPage.tsx dosya başı
   yorumu (GERÇEK EKSİKLİK DÜZELTMESİ 2026-08-23). Gerçek, sabit ProductSpec
   verisini (Renk/Malzeme/Ölçüler/Garanti) kaynak tasarımın "ÜRÜNÜ
   ÖZELLEŞTİRİN" bölümüyle aynı görsel dilde (kicker + chip grid) ama
   SEÇİLEBİLİR OLMADIĞINI netleştiren bir stille (imleç/hover yok) gösterir. */
.ay-pdp-specs-highlight {
  margin-bottom: 22px;
}
.ay-pdp-specs-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ay-acc);
  margin-bottom: 12px;
}
.ay-pdp-specs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ay-spec-chip {
  border: 1.5px solid var(--ay-line);
  background: var(--ay-tint);
  border-radius: var(--ay-radius);
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 96px;
}
.ay-spec-chip-label {
  font-size: 11px;
  color: var(--ay-mut);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ay-spec-chip-value {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ay-ink);
}
.ay-pdp-variants {
  margin-bottom: 20px;
}
.ay-pdp-variants-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.ay-pdp-variants-heading b {
  font-size: 13.5px;
  font-weight: 800;
}
.ay-pdp-variants-heading span {
  font-size: 13px;
  color: var(--ay-mut);
}
.ay-swatch-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ay-swatch {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 7px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
  border: none;
  padding: 0;
  overflow: hidden;
}
.ay-swatch:hover {
  transform: scale(1.07);
}
.ay-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ay-swatch.is-active::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--ay-acc);
  border-radius: var(--ay-radius-lg);
}
.ay-swatch:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.ay-chip {
  border: 1.5px solid var(--ay-line);
  background: #fff;
  border-radius: var(--ay-radius);
  padding: 10px 15px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  transition: all 0.2s ease;
}
.ay-chip.is-active {
  border-color: var(--ay-acc);
  background: var(--ay-tint2);
  font-weight: 800;
}
.ay-pdp-trust-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ay-mut);
}
.ay-pdp-trust-list li.is-stock {
  color: #2f7d4f;
  font-weight: 700;
}
.ay-pdp-trust-list li.is-out {
  color: var(--ay-sale);
  font-weight: 700;
}
/* Hizmet rozetleri — GERÇEK EKSİKLİK DÜZELTMESİ (2026-08-24): kaynak
   tasarımın (v2.dc.html satır 455-458) 2 sütunlu, sol hizalı, açık gri
   zeminli kart görünümü. Rozet sayısı admin panelden değişebileceği için
   sabit 3 değil, otomatik sarma (auto-fit) — 1 rozet varsa tek satır, 4
   rozet varsa 2x2 grid olur. */
.ay-pdp-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.ay-pdp-service-item {
  background: var(--ay-tint);
  border-radius: var(--ay-radius);
  padding: 13px 15px;
  text-align: left;
  font-size: 13px;
  color: var(--ay-mut);
}
.ay-pdp-service-item b {
  font-weight: 700;
  color: var(--ay-ink);
}
.ay-pdp-buy-row {
  display: flex;
  gap: 10px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.ay-qty-stepper {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--ay-line);
  border-radius: var(--ay-radius);
}
.ay-qty-stepper button {
  padding: 14px 17px;
  cursor: pointer;
  user-select: none;
  font-weight: 800;
  color: var(--ay-acc);
  background: none;
  border: none;
  font-size: 16px;
}
.ay-qty-stepper span {
  width: 34px;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
}
.ay-pdp-add-cart {
  flex: 1 1 200px;
  background: var(--ay-acc);
  color: #fff;
  padding: 16px;
  text-align: center;
  border-radius: var(--ay-radius);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  border: none;
  transition: all 0.25s ease;
}
.ay-pdp-add-cart:hover {
  background: var(--ay-acc-h);
  box-shadow: 0 12px 30px var(--ay-shadow);
  transform: translateY(-2px);
}
.ay-pdp-add-cart:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.ay-pdp-fav-btn {
  width: 56px;
  border: 1.5px solid var(--ay-line);
  border-radius: var(--ay-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  cursor: pointer;
  color: #d3c6bf;
  transition: all 0.2s ease;
  background: #fff;
}
.ay-pdp-fav-btn:hover {
  border-color: var(--ay-acc);
}
.ay-pdp-fav-btn.is-active {
  color: var(--ay-sale);
}
.ay-pdp-share-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--ay-line);
}
.ay-pdp-share-row a {
  color: var(--ay-mut);
  transition: color 0.2s;
}
.ay-pdp-share-row a:hover {
  color: var(--ay-acc);
}

/* YAZDIR BUTONLARI (2026-08-25) — aydinlife temasinda urun detayi yazdirma yoktu;
   mobilya-classic'te var olan A4/A6 yazdirma bu temaya da tasindi. */
.ay-pdp-print-sep {
  width: 1px;
  height: 18px;
  background: var(--ay-line);
  margin: 0 2px;
}
.ay-pdp-print-btn {
  appearance: none;
  border: 1px solid var(--ay-line);
  background: #fff;
  color: var(--ay-mut);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.ay-pdp-print-btn:hover {
  border-color: var(--ay-acc);
  color: var(--ay-acc);
  background: var(--ay-soft, #faf7f5);
}
.ay-pdp-print-btn:focus-visible {
  outline: 2px solid var(--ay-acc);
  outline-offset: 2px;
}

/* Yazdirmada sadece urun bilgisi kalsin: gezinme/aksiyon alanlari gizlenir. */
@media print {
  header,
  footer,
  nav,
  .ay-pdp-share-row,
  .ay-pdp-print-btn,
  .ay-pdp-print-sep,
  .ay-pdp-add-cart,
  .ay-pdp-fav-btn,
  .ay-pdp-qty,
  .ay-pdp-tabs,
  .mobile-buy-bar {
    display: none !important;
  }
  .ay-pdp-gallery img {
    max-width: 60mm !important;
    height: auto !important;
  }
  body {
    background: #fff !important;
  }
}
.ay-pdp-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--ay-line);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ay-pdp-tab {
  padding: 12px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ay-mut);
  box-shadow: inset 0 -2px 0 transparent;
  cursor: pointer;
  background: none;
  border: none;
}
.ay-pdp-tab.is-active {
  font-weight: 800;
  color: var(--ay-acc);
  box-shadow: inset 0 -2px 0 var(--ay-acc);
}
.ay-pdp-tab-body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ay-mut);
}
/* Sekmeler bölümü — kullanıcı geri bildirimi (2026-08-23): "resim
   galerisi altında tab seçenekleri yok". Önceden .ay-pdp-tabs, sağ
   (bilgi) kolonunun İÇİNDE, dar bir alanda render ediliyordu — artık
   .ay-pdp-grid'in (galeri + bilgi ızgarası) ALTINDA, tam genişlik bir
   bölüm. */
.ay-pdp-tabs-section {
  margin-top: clamp(32px, 4vw, 52px);
}
.ay-kit-panel{padding:32px 0}.ay-kit-panel>h3,.ay-product-specifications>h3{margin:0 0 20px;color:var(--ay-ink);font-size:19px;font-weight:800}

/* Takım İçeriği paneli — bkz. ProductDetailPage.tsx dosya başı yorumu
   (GERÇEK EKSİKLİK DÜZELTMESİ 2026-08-23). Sol: aksesuar/parça listesi +
   adet seçici. Sağ: sticky özet + toplam + Sepete Ekle. */
.ay-kit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .ay-kit-layout {
    grid-template-columns: 1fr;
  }
}
.ay-kit-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ay-kit-item {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius-lg);
  padding: 16px;
}
.ay-kit-item-image {
  position: relative;
  width: 180px;
  aspect-ratio: 4 / 3;
  background: var(--ay-tint);
  border-radius: var(--ay-radius);
  overflow: hidden;
}
.ay-kit-item-material{margin-bottom:8px;color:#8b8b8b;font-size:12.5px}.ay-kit-item-color{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:#8b8b8b;font-size:11px}.ay-kit-item-color i{display:block;width:26px;height:26px;border-radius:4px;background:#6d625b;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.ay-kit-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ay-kit-item-name {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}
/* Parça ölçüsü — bkz. ProductDetailPage.tsx dimsSpec yorumu. */
.ay-kit-item-dims {
  font-size: 12px;
  color: var(--ay-mut);
  margin-bottom: 6px;
}
.ay-kit-item-price {
  font-size: 12.5px;
  color: var(--ay-mut);
}
.ay-kit-item-price strong {
  color: var(--ay-ink);
  font-weight: 700;
}
.ay-kit-summary {
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius-lg);
  padding: 22px;
  position: sticky;
  top: 100px;
}
.ay-kit-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 800;
}
.ay-kit-summary-product{display:flex;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--ay-line)}.ay-kit-summary-product>div{width:56px;height:56px;overflow:hidden;flex:0 0 56px;border-radius:4px;background:var(--ay-tint)}.ay-kit-summary-product img{width:100%;height:100%;object-fit:cover}.ay-kit-summary-product strong{color:var(--ay-ink);font-size:14.5px}
.ay-kit-summary-count {
  font-size: 12.5px;
  color: var(--ay-mut);
  font-weight: 500;
}
.ay-kit-summary-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  min-height: 24px;
}
.ay-kit-summary-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  font-size: 13.5px;
}
.ay-kit-summary-line span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ay-kit-summary-qty {
  color: var(--ay-mut);
  white-space: nowrap;
}
.ay-kit-summary-price {
  font-weight: 700;
  white-space: nowrap;
}
.ay-kit-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid var(--ay-line);
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: 800;
}
.ay-spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ay-product-specifications{max-width:760px;padding:32px 0}.ay-product-specifications .ay-spec-list{border-top:1px solid var(--ay-line)}.ay-product-specifications .ay-spec-list li{padding:14px 0}.ay-product-specifications .ay-spec-list li span:first-child{font-weight:700;color:var(--ay-ink)}
.ay-spec-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ay-line);
  font-size: 14px;
}
.ay-spec-list li span:first-child {
  color: var(--ay-mut);
}
.ay-delivery-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ay-radius-lg);
  margin: 10px 0;
}
.ay-delivery-content p {
  margin: 0 0 10px;
  line-height: 1.7;
}
.ay-delivery-content ul,
.ay-delivery-content ol {
  padding-left: 20px;
  margin: 0 0 10px;
}
/* Teslimat/Kurulum içeriğindeki dosya bağlantıları — GERÇEK EKSİKLİK
   DÜZELTMESİ (2026-08-24, kullanıcı geri bildirimi: "teslimat ve
   kurulumda da montaj resimleri veya pdf olabilir"). deliveryContentHtml
   RichTextEditor'ünde artık PDF/Word/Excel eklenebiliyor — bu, editörün
   ürettiği düz <a href="...pdf"> linkidir. .ay-doc-link class'ı admin
   tarafında eklendiğinde (bkz. rich-text-editor.tsx handleFileSelected)
   dosya bağlantısını normal metin linki yerine indirilebilir bir "kart"
   gibi gösterir; class olmasa da normal <a> stiliyle çalışmaya devam eder
   (geriye dönük uyumlu — eski deliveryContentHtml içerikleri kırılmaz). */
.ay-delivery-content a {
  color: var(--ay-acc);
  /* underline KALDIRILDI (kullanıcı isteği 2026-08-25: "hiç bir yerde underline olmayacak") */
}
.ay-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 var(--ay-line);
  border-radius: var(--ay-radius);
  background: var(--ay-tint);
  font-size: 13px;
  font-weight: 700;
  color: var(--ay-ink);
  text-decoration: none;
}
.ay-delivery-content a.ay-doc-link:hover {
  border-color: var(--ay-acc);
}
.ay-delivery-content a.ay-doc-link::before {
  content: "⬇";
  font-size: 13px;
  color: var(--ay-acc);
}
.ay-bank-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.ay-bank-table {
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius-lg);
  padding: 16px;
  background: #fff;
  transition: opacity 0.2s ease;
}
.ay-bank-table--ineligible {
  opacity: 0.55;
}
.ay-bank-logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--ay-tint2);
  color: var(--ay-acc);
  font-size: 11px;
  font-weight: 800;
  margin-right: 8px;
}
.ay-bank-commission {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ay-mut);
  background: var(--ay-tint);
  border-radius: 999px;
  padding: 3px 9px;
}
.ay-bank-commission--free {
  color: #1a7d4f;
  background: rgba(26, 125, 79, 0.1);
}
.ay-bank-minimum-note {
  font-size: 12.5px;
  color: var(--ay-mut);
  margin: 4px 0 0;
}
.ay-bank-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.ay-bank-table th,
.ay-bank-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--ay-line);
  text-align: left;
}
.ay-bank-logo {
  display: flex;
  align-items: center;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--ay-acc);
}
.ay-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.ay-review-card {
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius-lg);
  padding: 16px;
}
.ay-review-stars {
  color: var(--ay-star);
  font-size: 13px;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.ay-review-title {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 6px;
}
.ay-review-body {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ay-mut);
  margin: 0 0 10px;
}
.ay-review-meta {
  font-size: 12px;
  color: var(--ay-mut);
}

.ay-pdp-related {
  margin-top: clamp(40px, 5vw, 64px);
}
.ay-pdp-related-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-bottom: 20px;
}
.ay-pdp-related-title {
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}
.ay-pdp-related-viewall {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  justify-self: end;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--ay-line);
  border-radius: 4px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ay-ink);
  text-decoration: none;
  white-space: nowrap;
}
.ay-pdp-related-viewall:hover {
  border-color: var(--ay-acc);
  color: var(--ay-acc);
}
.ay-pdp-related-viewall span{font-size:17px;line-height:1}

/* "Bu ürünle birlikte alınanlar" yatay slider — GERÇEK EKSİKLİK
   DÜZELTMESİ (2026-08-24, kullanıcı geri bildirimi: "birlikte alınalar
   alt alta satır değil sağa sola sliderli olacak"). Önceden .ay-product-
   grid (sabit ızgara) kullanıyordu — galerideki .ay-pdp-thumb-track/
   .ay-pdp-thumb-nav İLE AYNI ok-butonlu yatay kaydırma deseni burada
   tekrarlanır (tutarlılık: aynı sayfada iki farklı slider mekanizması
   olmasın diye .ay-pdp-thumb-nav sınıfı yeniden kullanılır, sadece
   konumlandırma override edilir). */
.ay-pdp-related-slider {
  position: relative;
}
.ay-pdp-related-track {
  display: flex;
  gap: clamp(14px, 1.6vw, 22px);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.ay-pdp-related-track::-webkit-scrollbar {
  display: none;
}
.ay-pdp-related-slide {
  flex: 0 0 calc((100% - 3 * clamp(14px, 1.6vw, 22px)) / 4);
  min-width: 220px;
  scroll-snap-align: start;
}
.ay-pdp-related-nav {
  top: 38%;
}
.ay-pdp-related-nav--prev {
  left: -16px;
}
.ay-pdp-related-nav--next {
  right: -16px;
}
@media (max-width: 1180px) {
  .ay-pdp-related-slide {
    flex-basis: calc((100% - 2 * clamp(14px, 1.6vw, 22px)) / 3);
  }
}
@media (max-width: 860px) {
  .ay-pdp-related-slide {
    flex-basis: calc((100% - clamp(14px, 1.6vw, 22px)) / 2);
    min-width: 160px;
  }
  .ay-pdp-related-nav--prev {
    left: -4px;
  }
  .ay-pdp-related-nav--next {
    right: -4px;
  }
}
@media(max-width:560px){.ay-pdp-related-heading{grid-template-columns:1fr}.ay-pdp-related-viewall{justify-self:start}.ay-pdp-related-title{font-size:21px}}

/* Nokta (dot) sayfalama — GERÇEK EKSİKLİK DÜZELTMESİ (2026-08-24,
   kullanıcı geri bildirimi: "altta dot notaka olsun max 4 nokta").
   components/slider-dots.tsx tarafından hem "Bu ürünle birlikte
   alınanlar" hem paylaşılan RecentlyViewed şeridinde kullanılır — bkz.
   lib/use-slider-dots.ts dosya başı yorumu. */
.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(--ay-line);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.slider-dot.is-active {
  background: var(--ay-acc);
  transform: scale(1.3);
}

/* pdp-strip-* (Son baktıklarınız) — bu bileşen tüm temalarda paylaşılır
   (bkz. components/recently-viewed.tsx), önceden .pdp-section-title
   dışında hiçbir başlık düzeni tanımı yoktu; "Tümünü göster" linki için
   başlık satırı eklendi. */
.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(--ay-acc-h);
  /* underline KALDIRILDI (kullanıcı isteği 2026-08-25: "hiç bir yerde underline olmayacak") */
  white-space: nowrap;
}
.pdp-strip-view-all:hover {
  color: var(--ay-acc);
}

.ay-mobile-buy-bar {
  display: none;
}

/* ---------- Footer ---------- */
/* GERÇEK EKSİKLİK DÜZELTMESİ (2026-08-24, kullanıcı isteği: "foother
   rengini daha iyi bir renk yap") — önceki zemin var(--ay-tint)
   (#FBFAF8) sayfa beyazından neredeyse ayrışmıyordu, footer görsel
   olarak "bitmiyor" gibi görünüyordu. Yeni zemin, header'ın ZATEN
   kullandığı --ay-band/--ay-band-t koyu kahve ikilisi (uydurma yeni
   renk DEĞİL, aynı marka paleti) — üstteki duyuru şeridiyle aynı
   rengi paylaşarak sayfanın en üstü ve en altı görsel olarak
   "sarmalar", ortadaki beyaz içerik bloğu net biçimde ayrışır. */
.ay-footer {
  background: var(--ay-band);
  color: var(--ay-band-t);
  border-top: 1px solid var(--ay-band);
}
.ay-footer-grid {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 48px) clamp(16px, 3vw, 40px) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: clamp(20px, 2.4vw, 36px);
}
.ay-footer-logo {
  display: block;
  max-width: 190px;
  max-height: 46px;
  object-fit: contain;
  margin-bottom: 14px;
}
.ay-footer-logo--fallback {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.ay-footer-brand-word {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #fff;
}
.ay-footer-brand-word span {
  color: var(--ay-acc2);
}
.ay-footer-brand-sub {
  font-size: 9px;
  letter-spacing: 0.42em;
  color: var(--ay-band-t);
  opacity: 0.75;
  margin: 4px 0 16px;
  font-weight: 600;
}
.ay-footer-desc {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ay-band-t);
  opacity: 0.85;
  margin: 0 0 16px;
  max-width: 280px;
}
.ay-footer-phone {
  font-size: 15px;
  font-weight: 800;
  color: var(--ay-acc2);
}
.ay-footer-phone-note {
  font-size: 13px;
  color: var(--ay-band-t);
  opacity: 0.75;
}
.ay-footer-col-title {
  font-size: 13.5px;
  font-weight: 800;
  margin-bottom: 14px;
  color: #fff;
}
.ay-footer-links {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13.5px;
  color: var(--ay-band-t);
}
.ay-footer-links a {
  color: var(--ay-band-t);
  opacity: 0.85;
  text-decoration: none;
  cursor: pointer;
}
.ay-footer-links a:hover {
  color: var(--ay-acc2);
  opacity: 1;
}
.ay-footer-social {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}
.ay-footer-social a {
  color: var(--ay-band-t);
  transition: color 0.2s;
}
.ay-footer-social a:hover {
  color: var(--ay-acc2);
}
.ay-newsletter-row {
  max-width: 1600px;
  margin: 32px auto 0;
  padding: 0 clamp(16px, 3vw, 40px);
}
.ay-newsletter-form {
  border-top: 1px solid rgba(230, 222, 213, 0.16);
  padding-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
  align-items: center;
}
.ay-newsletter-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 4px;
  color: #fff;
}
.ay-newsletter-sub {
  font-size: 13.5px;
  color: var(--ay-band-t);
  opacity: 0.85;
}
.ay-newsletter-input-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ay-newsletter-input-row input {
  flex: 1 1 200px;
  min-width: 0;
  border: 1.5px solid rgba(230, 222, 213, 0.28);
  border-radius: var(--ay-radius);
  background: #fff;
  padding: 12px 14px;
  font-size: 14px;
}
.ay-newsletter-input-row button {
  border: none;
  background: var(--ay-acc2);
  color: var(--ay-band);
  padding: 12px 28px;
  border-radius: var(--ay-radius);
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.25s;
}
.ay-newsletter-input-row button:hover {
  background: #fff;
}
.ay-footer-bottom {
  border-top: 1px solid rgba(230, 222, 213, 0.16);
  margin-top: 26px;
}
.ay-footer-bottom-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 18px clamp(16px, 3vw, 40px);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 12.5px;
  color: var(--ay-band-t);
  opacity: 0.75;
  flex-wrap: wrap;
}
.ay-footer-badges {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.ay-footer-legal-bar {
  border-top: 1px solid rgba(230, 222, 213, 0.12);
  background: rgba(0, 0, 0, 0.2);
}
.ay-footer-legal-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 14px clamp(16px, 3vw, 40px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--ay-band-t, #e6ded5);
  flex-wrap: wrap;
  text-align: center;
}
.ay-footer-legal-inner a {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s, color 0.2s;
}
.ay-footer-legal-inner a:hover {
  opacity: 1;
  color: #ffffff;
  text-decoration: underline;
}
.ay-footer-dot {
  opacity: 0.4;
  font-size: 10px;
}

/* ---------- Floating Action Buttons (Sağda Kayan Butonlar) ---------- */
.ay-floating-buttons {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.ay-scroll-top-fab {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ay-ink, #2b2320);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, background 0.2s ease;
}
.ay-scroll-top-fab:hover {
  transform: translateY(-3px);
  background: var(--ay-acc, #765039);
}
.ay-whatsapp-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
  transition: transform 0.2s ease;
}
.ay-whatsapp-fab:hover {
  transform: scale(1.08);
}

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
  .ay-listing-layout {
    grid-template-columns: 1fr;
  }
  .ay-nav-row {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .ay-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ay-pdp-gallery {
    position: static;
  }
  .ay-mobile-buy-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: #fff;
    border-top: 1px solid var(--ay-line);
    padding: 12px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
  }
  .ay-mobile-buy-bar b {
    font-size: 16px;
  }
  .ay-mobile-buy-bar button {
    background: var(--ay-acc);
    color: #fff;
    border: none;
    padding: 12px 22px;
    border-radius: var(--ay-radius);
    font-weight: 800;
    font-size: 13.5px;
  }
}

/* ---------- Sepet / Checkout / Hesabım / Sipariş — MOTOR BİLEŞENLERİ ----------
   Bu bloktaki class isimleri (cart-*, checkout-*, account-*, order-*,
   return-*, address-*, field-error, verified-badge) theme-contract'ın
   DIŞINDA: apps/storefront/src/components/{cart-page-content,
   checkout-page-content,account-page-content,product-reviews,...}.tsx
   TÜM temalar arasında paylaşılan "motor" kodudur (bkz. types.ts dosya
   başı: "Sepet/checkout/hesabım BİLİNÇLİ OLARAK bu sözleşmenin DIŞINDA").
   mobilya-classic/theme-shell.css'teki AYNI kural kümesinin renk
   değişkenleri (--mobilya-*) Aydınlife paletine (--ay-*) eşlenerek
   buraya taşındı — bu bölüm olmadan sepet/ödeme/hesabım akışı Aydınlife
   temasında STİLSİZ (çıplak HTML) render olurdu, gerçek işlevi (state,
   API çağrıları) etkilenmez ama kullanılamaz görünürdü. */
/* --- 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(--ay-mut);
  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(--ay-line);
}

.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(--ay-acc);
}

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

.qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--ay-line);
  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(--ay-mut);
  font-size: 16px;
  cursor: pointer;
}

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

.cart-summary {
  border: 1px solid var(--ay-line);
  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(--ay-mut);
}

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

.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(--ay-mut);
}

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

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

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

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

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

/* GERÇEK EKSİKLİK DÜZELTMESİ (2026-08-25) — checkout'ta kayıtlı adres
   seçimi (bkz. checkout-page-content.tsx). .return-request-form/.address-card
   İLE AYNI kart deseni, görsel tutarlılık için. */
.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(--ay-mut);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.checkout-saved-address-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--ay-line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.checkout-saved-address-option:has(input:checked) {
  border-color: var(--ay-acc);
  background: var(--ay-tint);
}
.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(--ay-acc);
  font-weight: 700;
  font-size: 11.5px;
}
.checkout-saved-address-option small {
  color: var(--ay-mut);
  font-size: 12px;
}

.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(--ay-line);
  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(--ay-acc);
}

.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(--ay-mut);
  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(--ay-line);
  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(--ay-line);
  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(--ay-acc);
  background: var(--ay-tint);
}

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

.checkout-payment-option small {
  color: var(--ay-mut);
  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(--ay-mut);
  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(--ay-line);
  margin-bottom: 24px;
}

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

.account-auth-tabs button:hover {
  color: var(--ay-ink);
}

.account-auth-tabs button.active {
  color: var(--ay-ink);
  border-color: var(--ay-acc);
}

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

.account-auth-form input {
  padding: 12px 14px;
  border: 1px solid var(--ay-line);
  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(--ay-acc);
}

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

/* GERÇEK EKSİKLİK DÜZELTMESİ (2026-08-24) — sidebar artık düz metinden
   çıkıp kart/gölge tabanlı profesyonel bir görünüme kavuşuyor: profil
   avatarı + "üyelik tarihi" başlığı + gerçek istatistik kutuları
   (sipariş sayısı/toplam harcama/favori sayısı) ekleniyor. Renkler
   TAMAMEN mevcut --ay-* değişkenlerinden — yeni bir tasarım dili
   İCAT EDİLMEDİ. */
.account-sidebar {
  background: #fff;
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius);
  padding: 22px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  position: sticky;
  top: 24px;
}

.account-sidebar-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ay-line);
}

.account-avatar {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 50%;
  background: var(--ay-acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
}

.account-member-since {
  display: block;
  font-size: 11.5px;
  color: var(--ay-mut);
  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(--ay-line);
}

.account-sidebar-stats > div {
  text-align: center;
  background: var(--ay-tint);
  border-radius: 8px;
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-sidebar-stats b {
  font-size: 13px;
  color: var(--ay-ink);
  line-height: 1.2;
}

.account-sidebar-stats span {
  font-size: 10px;
  color: var(--ay-mut);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

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

.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(--ay-tint);
  color: var(--ay-acc);
}

.account-sidebar li.active button {
  background: var(--ay-tint);
  color: var(--ay-acc);
  font-weight: 600;
}

.account-content {
  background: #fff;
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius);
  padding: 28px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  min-height: 320px;
  /* GERÇEK BUG DÜZELTMESİ (2026-08-24, Playwright mobil viewport
     doğrulaması sırasında bulundu) — grid item'ların varsayılan
     min-width'i "auto"dur (içeriğin intrinsic min-content genişliği,
     0 DEĞİL). Adres Defterim formu (.address-form-grid: 1fr 1fr) veya
     uzun bir kelime/URL içeren herhangi bir içerik grid item'ı kendi
     minimum içerik genişliğine kadar zorlayıp .account-panel grid
     container'ını taşırıyordu (mobilde 390px viewport'ta 60px yatay
     taşma ölçüldü). min-width:0 STANDART grid-taşma düzeltmesidir —
     içerik hâlâ normal şekilde sarılır/kaydırılır, sadece grid'i
     genişletmesine izin verilmez. */
  min-width: 0;
}

.account-content > h2 {
  margin: 2px 0 20px;
  font-size: 22px;
}

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

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

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

.order-card:hover {
  border-color: var(--ay-acc);
  box-shadow: var(--ay-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(--ay-mut);
}

.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(--ay-acc);
}

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

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

/* Sipariş kartı ürün satırları (2026-08-25 kullanıcı isteği: "bunlar solda
   küçük resim olacak"). ÖNCEDEN buradaki tek kural .order-card-item-chip'ti
   — metin rozeti dönemi kalıntısı. Markup .order-card-line/.order-card-thumb
   kullandığı için görseller HİÇ boyutlanmıyor, doğal çözünürlükte akıp
   kartı eziyordu. Küçük resim + yanında ad/adet düzeni: */
.order-card-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.order-card-line {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Sabit kutu + object-fit:cover — kaynak görselin en-boy oranı ne olursa
   olsun satır yüksekliği değişmez, kart hizası bozulmaz. */
.order-card-thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border: 1px solid var(--ay-line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--ay-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.order-card-thumb-fallback {
  font-size: 18px;
  font-weight: 700;
  color: var(--ay-mut);
}

/* min-width:0 olmadan uzun ürün adları flex satırını taşırır. */
.order-card-line-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.order-card-line-name {
  font-size: 13.5px;
  color: var(--ay-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-card-line-qty {
  font-size: 12px;
  color: var(--ay-mut);
}

.order-card-line.is-more {
  font-size: 12.5px;
  color: var(--ay-mut);
  padding-left: 4px;
}

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

.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(--ay-line);
  border-radius: 8px;
}

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

.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(--ay-line);
  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(--ay-mut);
}

.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(--ay-line);
  border-radius: 8px;
  background: var(--ay-tint);
  max-width: 320px;
}

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

.return-request-form input {
  padding: 6px 8px;
  border: 1px solid var(--ay-line);
  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(--ay-mut);
  padding: 8px 0;
  border-bottom: 1px dashed var(--ay-line);
}

.order-timeline li strong {
  color: var(--ay-ink);
}

/* GÖRÜNÜM DÜZELTMESİ (2026-08-25) — bkz. mobilya-classic/theme-shell.css
   aynı yorum: flex-column + max-width:380px kartları tek dar şeride
   sıkıştırıyor, düzenleme formunun 2 sütunlu grid'ine yer bırakmıyordu. */
.address-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}

.address-card {
  border: 1px solid var(--ay-line);
  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(--ay-acc);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.address-card.is-default {
  border-color: var(--ay-acc);
}

.address-card-editing,
.address-card-new {
  grid-column: 1 / -1;
  max-width: 720px;
}

.address-card-editing {
  border-color: var(--ay-acc);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
}

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

.address-card-new > h4 {
  padding-right: 0;
  margin-bottom: 14px;
  font-size: 15px;
}

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

/* GERÇEK EKSİKLİK DÜZELTMESİ (2026-08-24) — Adres Defterim CRUD formu
   (bkz. account-address-panel.tsx). Aynı input dili account-auth-form
   ile TUTARLI (padding/border-radius/focus rengi). */
.address-card {
  position: relative;
}
.address-default-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--ay-tint);
  color: var(--ay-acc);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 6px;
}
.address-card-new {
  border-style: dashed;
  background: var(--ay-tint);
}
.address-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.address-delete-btn {
  color: #b3423a;
  border-color: rgba(179, 66, 58, 0.3);
}
.address-delete-btn:hover {
  background: rgba(179, 66, 58, 0.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(--ay-mut);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.address-form input,
.address-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid var(--ay-line);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  resize: vertical;
  text-transform: none;
  letter-spacing: normal;
}
.address-form textarea {
  min-height: 72px;
  line-height: 1.5;
}
.address-form input:focus,
.address-form textarea:focus {
  outline: none;
  border-color: var(--ay-acc);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
.address-form-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  padding: 12px 14px;
  border: 1px solid var(--ay-line);
  border-radius: 8px;
}
.address-form-checkbox input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  accent-color: var(--ay-acc);
  cursor: pointer;
}
.address-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--ay-line);
}

/* GERÇEK EKSİKLİK DÜZELTMESİ (2026-08-24) — Yorumlarım paneli (bkz.
   account-reviews-panel.tsx). .order-detail-item ile AYNI kart deseni,
   görsel tutarlılık için. */
.my-review-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.my-review-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--ay-line);
  border-radius: 8px;
}
.my-review-card-image {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ay-tint);
  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(--ay-mut);
  line-height: 1.6;
}

/* GERÇEK EKSİKLİK DÜZELTMESİ (2026-08-24) — Sipariş iptal butonu (bkz.
   hesabim/siparislerim/[id]/page.tsx CancelOrderBox). */
.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, 0.3);
}
.order-cancel-trigger:hover {
  background: rgba(179, 66, 58, 0.08);
  border-color: #b3423a;
}
.order-cancel-form {
  width: 100%;
  max-width: 360px;
}

.empty-state-inline {
  font-size: 13px;
  color: var(--ay-mut);
  line-height: 1.6;
}
/* 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: var(--ay-ink);
  font-family: 'Figtree', system-ui, sans-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; }

/* "Son baktıklarınız;" sade kartları */
.pdp-strip-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--ay-line);
  background: #fff;
  color: inherit;
  scroll-snap-align: start;
  text-decoration: none;
}
.pdp-strip-card:hover { border-color: var(--ay-acc); }
.pdp-strip-image { display: block; aspect-ratio: 1/1; background: var(--ay-tint); }
.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: var(--ay-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.pdp-strip-price { margin: 6px 14px 16px; color: var(--ay-acc-h); font-family: 'Figtree', system-ui, sans-serif; font-size: 18px; font-weight: 700; }

/* Yorum özeti + yorum ekle */
.pdp-reviews-section { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--ay-line); }
.ay-pdp .pdp-reviews-section{margin-top:64px;padding-top:0;border-top:0}.ay-pdp .pdp-reviews-section>h2{margin:0 0 8px;color:var(--ay-ink);font-size:26px;font-weight:800;letter-spacing:-.02em}
.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; }
.ay-pdp .pdp-reviews-score{flex-direction:row;align-items:center;gap:10px;margin-bottom:24px}
.pdp-reviews-score strong { color: var(--ay-ink); font-size: 36px; font-weight: 500; line-height: 1; }
.ay-pdp .pdp-reviews-score strong{font-size:30px;font-weight:800}.pdp-reviews-stars{color:#c9962b;font-size:16px;letter-spacing:.06em}
.pdp-reviews-score span { color: var(--ay-mut); font-size: 14px; font-weight: 300; }
.pdp-review-cta {
  min-height: 44px;
  padding: 0 26px;
  border: 0;
  background: var(--ay-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.pdp-review-cta:hover { background: var(--ay-acc-h); }
.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 var(--ay-line);
  background: var(--ay-tint);
}
.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 var(--ay-line);
  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; }
.ay-pdp .pdp-review-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:0}.ay-pdp .pdp-review-card-grid li{padding:20px;border:1px solid var(--ay-line);border-radius:5px}.ay-pdp .pdp-review-card-grid .pdp-review-head{flex-wrap:wrap}.ay-pdp .pdp-review-card-grid .pdp-review-stars{order:-1;width:100%;margin-bottom:2px}
.pdp-review-list li { padding: 18px 0; border-top: 1px solid var(--ay-line); }
.pdp-review-head { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.pdp-review-stars { color: var(--ay-acc); }
.pdp-review-list p { margin: 8px 0 0; color: var(--ay-mut); font-size: 13px; line-height: 1.8; }


/* GERÇEK EKSİKLİK DÜZELTMESİ (2026-08-24) — .btn/.btn-primary/.btn-outline/
   .btn-sm class'ları platform genelinde (sepet/checkout/destek formu VE
   bu oturumda eklenen Adres Defterim/Yorumlarım/Sipariş İptali) kullanılıyor
   ama Aydınlife temasında HİÇ tanımlı değildi — düğmeler tarayıcı varsayılan
   (unstyled/kutu) görünümündeydi. mobilya-classic'in AYNI .btn ailesi
   (theme-shell.css satır ~2631) buraya --ay-* renk diliyle taşındı. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  height: 44px;
  border-radius: var(--ay-radius);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.25s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary {
  background: var(--ay-acc);
  color: #fff;
  border-color: var(--ay-acc);
}
.btn-primary:hover {
  background: var(--ay-acc-h);
  border-color: var(--ay-acc-h);
}
.btn-outline {
  background: #fff;
  border-color: var(--ay-line);
  color: var(--ay-ink);
}
.btn-outline:hover {
  border-color: var(--ay-acc);
  color: var(--ay-acc);
}
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-sm {
  height: 36px;
  padding: 0 14px;
  font-size: 12.5px;
}

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

.verified-badge {
  color: #2e7d4f;
  font-size: 12px;
  font-weight: 600;
}
/* 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;
}
/* "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(--ay-acc);
  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;
}

/* ---------- Duyuru şeridi (panel yönetimli) ---------- */
.announcement-bar {
  background: var(--ay-band);
  color: var(--ay-band-t);
}
.announcement-bar-inner {
  max-width: 1600px;
  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; }

.site-survey-wrap {
  padding: 32px 24px;
  display: flex;
  justify-content: center;
}

/* ---------- Dinamik form gömme ---------- */
.dynamic-form-embed { display: flex; flex-direction: column; gap: 12px; }
.dynamic-form-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ay-mut); }
.dynamic-form-field select {
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius);
  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: var(--ay-radius);
  background: #f2f8f3;
  color: #2c6e3f;
  font-size: 14px;
}

/* ---------- Bülten aboneliği (Footer içinde, açık zemin) ---------- */
.newsletter-signup { margin-top: 0; max-width: none; display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-label { display: none; }
.newsletter-row { display: flex; gap: 10px; flex: 1 1 200px; flex-wrap: wrap; }
.newsletter-row input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 12px 14px;
  border: 1.5px solid var(--ay-line);
  border-radius: var(--ay-radius);
  background: #fff;
  color: var(--ay-ink);
  font-size: 14px;
}
.newsletter-row button {
  padding: 12px 28px;
  border: 0;
  border-radius: var(--ay-radius);
  background: var(--ay-acc);
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s;
}
.newsletter-row button:hover { background: var(--ay-acc-h); }
.newsletter-row button:disabled { opacity: 0.6; cursor: not-allowed; }
.newsletter-success { margin-top: 8px; font-size: 13.5px; color: var(--ay-acc); font-weight: 700; }

/* ---------- "Sizi Arayalım" formu ---------- */
.call-request-form {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius-lg);
  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: var(--ay-mut); }
.call-request-form input {
  border: 1.5px solid var(--ay-line);
  border-radius: var(--ay-radius);
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
}
.call-request-success {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid #cfe3d4;
  border-radius: var(--ay-radius-lg);
  background: #f2f8f3;
  color: #2c6e3f;
  font-size: 13px;
}

/* ---------- Havale/EFT bildirimi ---------- */
.bank-transfer-notice {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius-lg);
  background: var(--ay-tint);
  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: var(--ay-mut); text-align: center; }
.bank-transfer-form input {
  border: 1.5px solid var(--ay-line);
  border-radius: var(--ay-radius);
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
}
.bank-transfer-success, .bank-transfer-empty {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: var(--ay-radius-lg);
  font-size: 13px;
}
.bank-transfer-success { border: 1px solid #cfe3d4; background: #f2f8f3; color: #2c6e3f; }
.bank-transfer-empty { border: 1px solid var(--ay-line); background: var(--ay-tint); color: var(--ay-mut); }

/* ---------- Destek talebi formu ---------- */
.support-ticket-success {
  max-width: 420px;
  padding: 14px 16px;
  border: 1px solid #cfe3d4;
  border-radius: var(--ay-radius-lg);
  background: #f2f8f3;
  color: #2c6e3f;
  font-size: 13px;
}

/* ---------- Market/para birimi seçici ---------- */
.header-actions .market-switcher select,
.ay-header-actions .market-switcher select {
  background: transparent;
  border: 1.5px solid var(--ay-line);
  border-radius: var(--ay-radius);
  height: 42px;
  padding: 0 10px;
  color: var(--ay-ink);
  font-size: 12.5px;
  cursor: pointer;
}

/* 2026-08-24 kategori referansı: çalışan aydinlife temasının kesin ölçüleri. */
.ay-container{max-width:1600px}
.ay-topbar{display:block;min-height:38px;background:#2b2320}
.ay-topbar-inner{min-height:38px;padding-left:0;padding-right:0}
.ay-topbar-links{gap:27px;font-size:11.5px}
.ay-header-main{min-height:118px;display:grid;grid-template-columns:290px minmax(360px,1fr) auto;gap:28px;padding-left:0;padding-right:0;align-items:center}
.ay-brand img{max-width:290px;max-height:108px;object-fit:contain}.ay-brand-word{font-size:25px;white-space:nowrap}.ay-brand-sub{letter-spacing:.4em}
.ay-search{height:46px;border-width:1px;border-radius:4px;background:#faf9f8}.ay-search button{height:36px;padding:0 21px;background:var(--ay-acc)}
.ay-header-actions{justify-self:end;justify-content:flex-end;gap:27px}.ay-header-actions .market-switcher{display:none}.ay-header-action-title{font-size:14px}.ay-cart-btn{background:transparent}
.ay-header-main>.ay-search{width:60%;max-width:620px;justify-self:center;justify-content:center}
.ay-nav{border-top:1px solid #eeeae7;border-bottom:1px solid #ddd9d5}.ay-nav-row{min-height:53px;padding-left:0;padding-right:0}.ay-nav-item{height:53px;padding:0 16px;font-size:13.5px}.ay-nav-item.is-active{color:var(--ay-acc);box-shadow:inset 0 -2px 0 var(--ay-acc)}.ay-nav-outlet{color:#dc3d1d}
.ay-main{max-width:1600px;padding:25px 40px 72px}.ay-breadcrumb{margin-bottom:25px;font-size:12px}.ay-page-title-row{margin-bottom:14px}.ay-page-title{font-size:22.5px}.ay-page-count{font-size:12px}.ay-page-desc{max-width:670px;margin-bottom:28px;color:#85807c;font-size:14px;line-height:1.55}
.ay-listing-layout{grid-template-columns:236px minmax(0,1fr);gap:32px}.ay-filter-box{padding:20px;border-radius:7px}.ay-filter-title{margin-bottom:12px;font-size:14px}.ay-filter-list{gap:0}.ay-filter-list>.ay-filter-row{min-height:32px;padding:8px 0;font-size:15.5px}.ay-filter-check{min-height:32px;font-size:13px}
.ay-listing-toolbar{min-height:61px;margin-bottom:20px;padding:10px 16px;border-radius:7px;background:#fff;color:#99918c;font-size:13px}
.ay-sort-buttons{display:flex;align-items:center;justify-content:flex-end;gap:8px;color:#918a85;font-size:12px}.ay-sort-buttons 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}.ay-sort-buttons button.is-active{border-color:var(--ay-acc);background:var(--ay-acc);color:#fff;font-weight:700}
.ay-sort-select{display:flex;align-items:center;gap:8px;color:#918a85;font-size:12px;white-space:nowrap}.ay-sort-select select{min-width:180px;height:38px;padding:0 36px 0 13px;border:1px solid #e4ddd7;border-radius:4px;background:#fff;color:#4e4946;font-family:inherit;font-size:13px;cursor:pointer}
.ay-listing-all{color:#4e4946;font-size:14px;font-weight:500}
.ay-filter-list>.ay-filter-row,.ay-filter-list>.ay-filter-row:last-child{border-bottom:0}
.ay-filter-row{font-weight:500}
.ay-filter-list>.ay-filter-row{color:#3f3a37;font-weight:500;text-decoration:none!important;text-decoration-line:none!important}
.ay-filter-list>.ay-filter-row span{text-decoration:none!important;text-decoration-line:none!important}
.ay-product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.ay-card{border-radius:8px !important;overflow:hidden}.ay-card-media{border-radius:8px 8px 0 0 !important}
@media(max-width:1460px){.ay-container{padding-left:40px;padding-right:40px}}
@media(max-width:1100px){.ay-header-main{grid-template-columns:220px minmax(260px,1fr) auto;gap:16px}.ay-header-main>.ay-search{width:82%}.ay-header-actions{gap:14px}.ay-sort-buttons{flex-wrap:wrap}.ay-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ay-brand img{max-width:190px;max-height:72px}}
@media(max-width:860px){.ay-topbar-links a:not(:last-child){display:none}.ay-header-main{display:flex;padding:12px 20px}.ay-header-main>.ay-search{width:100%;max-width:none;order:3}.ay-main{padding-left:20px;padding-right:20px}.ay-listing-layout{grid-template-columns:1fr}.ay-listing-layout>aside{display:none}.ay-sort-buttons{justify-content:flex-start;overflow-x:auto}.ay-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Tüm masaüstü yüzeyleri aynı gerçek 1600px içerik ekseninde hizala. */
:root{--ay-site-width:1600px;--ay-site-gutter:24px}
.ay-container,
.ay-main{width:min(var(--ay-site-width),calc(100% - (var(--ay-site-gutter) * 2)));max-width:none;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
.ay-header-main,.ay-nav-row,.ay-topbar-inner{width:min(var(--ay-site-width),calc(100% - (var(--ay-site-gutter) * 2)));max-width:none}
.ay-main{padding-top:25px;padding-bottom:72px}
.ay-mega{left:50%;right:auto;width:min(var(--ay-site-width),calc(100% - (var(--ay-site-gutter) * 2)));transform:translateX(-50%);padding-left:28px;padding-right:28px}
@media(max-width:860px){:root{--ay-site-gutter:16px}.ay-header-main{width:calc(100% - 32px);padding-left:0;padding-right:0}.ay-mega{position:static;width:100%;transform:none}}

/* Referans liste/galeri anahtarı ve satır satır açılan sıralama menüsü. */
.ay-listing-view-actions{display:flex;align-items:center;gap:10px}.ay-listing-view-actions>button,.ay-sort-trigger{height:42px;padding:0 17px;border:1px solid #dfe3e8;background:#fff;color:#292929;font-family:inherit;font-size:14px;cursor:pointer}
.ay-sort-menu{position:relative;margin-left:auto}.ay-sort-trigger{min-width:190px;text-align:left}.ay-sort-dropdown{position:absolute;z-index:35;top:calc(100% + 6px);left:0;width:100%;min-width:210px;padding:4px 0;border:1px solid #e6e6e6;background:#fff;box-shadow:0 12px 24px rgba(0,0,0,.08)}
.ay-sort-dropdown button{display:block;width:100%;padding:10px 13px;border:0;background:#fff;color:#222;font-family:inherit;font-size:14px;text-align:left;cursor:pointer}.ay-sort-dropdown button:hover,.ay-sort-dropdown button.is-active{background:#f7f7f7;color:#465165}
.ay-toolbar-controls{display:flex;align-items:center;gap:10px;margin-left:auto}.ay-view-mode-buttons{display:flex;align-items:center;border:1px solid #dfe3e8}.ay-view-mode-buttons button{display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-right:1px solid #dfe3e8;background:#fff;cursor:pointer}.ay-view-mode-buttons button:last-child{border-right:0}.ay-view-mode-buttons button.is-active{background:#465466;color:#fff}.ay-grid-icon{display:grid;width:18px;height:18px;grid-template-columns:repeat(2,1fr);gap:2px}.ay-grid-icon:before,.ay-grid-icon:after{content:"";border:1.5px solid currentColor}.ay-grid-icon.is-four{grid-template-rows:repeat(2,1fr);background:linear-gradient(currentColor,currentColor) 50% 0/1.5px 100% no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 1.5px no-repeat;border:1.5px solid currentColor}.ay-grid-icon.is-four:before,.ay-grid-icon.is-four:after{display:none}.ay-list-icon{width:19px;height:14px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}.ay-list-icon:after{content:"";position:absolute;left:0;right:0;top:5px;border-top:2px solid currentColor}
.ay-product-grid.is-grid-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.ay-product-grid.is-list{display:grid;grid-template-columns:1fr}.ay-product-grid.is-list .ay-card{display:grid;grid-template-columns:320px minmax(0,1fr)}.ay-product-grid.is-list .ay-card-media{min-height:245px}.ay-product-grid.is-list .ay-card-body{padding:22px}

/* Parçalı ürünün sağ kolondaki kısa takım özeti. */
.ay-pdp-kit-compact{margin:20px 0;padding:18px;border:1px solid #dfe3e8;background:#fff}.ay-pdp-kit-compact-title{margin-bottom:12px;font-size:16px;font-weight:700}.ay-pdp-kit-compact-head,.ay-pdp-kit-compact-row{display:grid;grid-template-columns:minmax(0,1fr) 72px 110px;gap:10px;align-items:center}.ay-pdp-kit-compact-head{padding:8px 0;border-bottom:1px solid #dfe3e8;font-size:12px;color:#777}.ay-pdp-kit-compact-row{padding:10px 0;border-bottom:1px solid #eceff2;font-size:13px}.ay-pdp-kit-compact-row b{text-align:right;white-space:nowrap}.ay-pdp-kit-compact-total{display:flex;align-items:center;justify-content:space-between;padding:15px 0;font-size:14px}.ay-pdp-kit-compact-total b{font-size:18px}.ay-pdp-kit-customize{width:100%;height:45px;border:1px solid #465466;background:#fff;color:#465466;font-family:inherit;font-weight:700;cursor:pointer}.ay-pdp-kit-customize:hover{background:#f5f7f9}.ay-pdp-kit-buy-row .ay-pdp-add-cart{width:100%}
@media(max-width:700px){.ay-listing-toolbar{align-items:flex-start}.ay-listing-view-actions{width:100%;justify-content:space-between}.ay-sort-menu{width:100%;margin-left:0}.ay-sort-trigger{width:100%}.ay-product-grid.is-list .ay-card{grid-template-columns:1fr}.ay-pdp-kit-compact-head,.ay-pdp-kit-compact-row{grid-template-columns:minmax(0,1fr) 56px 90px;font-size:12px}}
@media(max-width:760px){.ay-kit-item{grid-template-columns:100px minmax(0,1fr)}.ay-kit-item-image{width:100px}.ay-kit-item .ay-qty-stepper{grid-column:1/-1;justify-self:end}.ay-pdp .pdp-review-card-grid{grid-template-columns:1fr}}

/* Mağazalar ve iletişim: doğrulanmış şubeler, haritalar ve yol tarifi. */
.ay-stores-page .editorial-hero,.ay-contact-page .editorial-hero{max-width:760px;margin-bottom:32px}.ay-stores-page .editorial-hero h1,.ay-contact-page .editorial-hero h1{margin:7px 0 10px;font-size:30px}.ay-stores-page .editorial-hero p,.ay-contact-page .editorial-hero p{color:#756e69;line-height:1.6}
.ay-store-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.ay-store-card{overflow:hidden;border:1px solid #e2dcd7;border-radius:8px;background:#fff}.ay-store-card iframe{display:block;width:100%;height:260px;border:0}.ay-store-card-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:22px}.ay-store-card-body>span,.ay-contact-location-grid article>span{color:var(--ay-acc);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.ay-store-card h2{margin:0;font-size:21px}.ay-store-card p{margin:0;color:#706a66;line-height:1.55}.ay-store-card a{color:#2b2725;text-decoration:none;font-weight:600}.ay-store-route{display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin-top:8px;padding:0 18px;border:1px solid var(--ay-acc)!important;background:var(--ay-acc);color:#fff!important;border-radius:4px}.ay-store-online{display:flex;min-height:360px;background:#f8f4f1}.ay-store-online .ay-store-card-body{justify-content:center;max-width:560px}
.ay-contact-page .contact-grid{margin-bottom:54px}.ay-contact-page .contact-info a{color:var(--ay-acc);text-decoration:none}.ay-contact-locations{padding-top:38px;border-top:1px solid #e2dcd7}.ay-contact-locations>h2{margin:8px 0 24px;font-size:26px}.ay-contact-location-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.ay-contact-location-grid article{display:flex;min-height:230px;flex-direction:column;align-items:flex-start;gap:9px;padding:20px;border:1px solid #e2dcd7;border-radius:7px}.ay-contact-location-grid h3{margin:0;font-size:17px}.ay-contact-location-grid p{flex:1;margin:0;color:#756e69;font-size:13px;line-height:1.55}.ay-contact-location-grid a{color:var(--ay-acc);text-decoration:none;font-size:13px;font-weight:700}
@media(max-width:1000px){.ay-contact-location-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.ay-store-grid,.ay-contact-location-grid{grid-template-columns:1fr}.ay-store-card iframe{height:220px}.ay-stores-page .editorial-hero h1,.ay-contact-page .editorial-hero h1{font-size:25px}}

/* Üye girişi: formu geniş yüzeye yaymadan ortalanmış kompakt kart. */
.account-auth-shell{width:min(100% - 32px,520px)!important;max-width:520px!important;margin:0 auto!important;padding:48px 0 64px!important}.account-auth-intro{text-align:center;margin-bottom:24px}.account-auth-intro h1{margin:8px 0 10px;font-size:28px;letter-spacing:-.02em}.account-auth-intro p{margin:0;color:var(--ay-mut);font-size:14px;line-height:1.65}.account-auth-intro ul{display:none}.account-auth-card{padding:28px;border:1px solid var(--ay-line);border-radius:8px;background:#fff;box-shadow:0 12px 34px rgba(43,35,32,.06)}.account-auth-card .account-auth-tabs{margin-bottom:20px}.account-auth-card .account-auth-form{gap:12px}.account-auth-card .account-auth-form input{width:100%;height:46px;box-sizing:border-box;border-radius:4px}.account-auth-card .auth-help-link{align-self:center;width:auto;padding:2px 0;border:0;border-bottom:1px solid transparent;background:transparent;color:var(--ay-mut);font-family:inherit;font-size:12.5px;cursor:pointer}.account-auth-card .auth-help-link:hover{border-bottom-color:var(--ay-acc);color:var(--ay-acc)}.account-auth-card .auth-submit{width:100%;height:46px;margin-top:2px;border-radius:4px}.account-auth-card .auth-secure-note{margin:16px 0 0;text-align:center;color:var(--ay-mut);font-size:12px}
.account-auth-name-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.account-auth-card .auth-demo-login{width:100%;height:44px;border:1px solid var(--ay-acc);border-radius:4px;background:#fff;color:var(--ay-acc);font-family:inherit;font-weight:700;cursor:pointer}.account-auth-card .auth-demo-login:hover{background:var(--ay-tint)}
@media(max-width:600px){.account-auth-shell{padding-top:30px!important}.account-auth-card{padding:20px}.account-auth-intro h1{font-size:24px}.account-auth-name-row{grid-template-columns:1fr}}

/* Hesabım: daha ferah navigasyon ve okunabilir, gruplanmış sipariş tablosu. */
.account-panel{width:min(100% - 48px,1460px);max-width:1460px;margin:0 auto;padding:32px 0 72px;grid-template-columns:270px minmax(0,1fr);gap:28px}.account-sidebar{border-radius:10px;padding:22px;background:#fff;box-shadow:0 8px 30px rgba(43,35,32,.05)}.account-sidebar-profile{padding-bottom:20px;margin-bottom:12px}.account-avatar{width:48px;height:48px;background:var(--ay-acc);color:#fff}.account-sidebar li{margin:3px 0}.account-sidebar button{min-height:42px;padding:0 12px;border-radius:6px;font-size:13.5px}.account-sidebar li.active button{background:#f5f1ee;color:var(--ay-acc);font-weight:800}.account-content{padding:30px 32px;border-radius:10px;box-shadow:0 8px 30px rgba(43,35,32,.04)}.account-content>h2{margin-bottom:22px;font-size:25px}.order-table-wrap{border-radius:8px;background:#fff;box-shadow:none}.order-list-summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 18px;border-bottom:1px solid var(--ay-line);background:#faf9f7}.order-list-summary>div{display:flex;flex-direction:column;gap:3px}.order-list-summary strong{font-size:14px}.order-list-summary span{color:var(--ay-mut);font-size:12px}.order-table{min-width:1120px;font-size:13.5px}.order-table thead th{height:46px;padding:0 14px;background:#fff;border-bottom:1px solid #d9d3ce;color:#716a65;font-size:11px;font-weight:800}.order-table td{padding:14px;line-height:1.45}.order-table-group+ .order-table-group td{border-top:8px solid #f7f5f3}.order-table-group:hover td{background:#fcfaf8}.order-table-name{min-width:240px;font-weight:650}.order-table-code{min-width:132px}.order-table-link{display:inline-flex;padding:7px 9px;border:1px solid var(--ay-line);border-radius:4px;text-decoration:none;font-size:12px}.order-table-date{min-width:100px}.order-table-status{padding-right:18px!important}.order-card-thumb{width:64px;height:64px;border-radius:5px}.order-status{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px}.order-table input[type=checkbox]{width:16px;height:16px;accent-color:var(--ay-acc)}
@media(max-width:900px){.account-panel{width:min(100% - 32px,720px);grid-template-columns:1fr}.account-sidebar{position:static}.account-content{padding:24px}.order-list-summary{align-items:flex-start;flex-direction:column}}@media(max-width:560px){.account-content{padding:20px 16px}.account-panel{width:calc(100% - 24px);padding-top:20px}.order-list-summary>span{display:none}}
.account-nav a,.account-nav li>button{display:flex;align-items:center;gap:11px;text-decoration:none}.account-menu-icon-wrap{display:inline-grid!important;place-items:center!important;width:18px!important;height:18px!important;min-width:18px!important;max-width:18px!important;flex:0 0 18px!important;overflow:hidden!important;line-height:0!important;opacity:1!important}.account-menu-icon-wrap>.account-menu-icon{display:block!important;width:18px!important;height:18px!important;min-width:18px!important;max-width:18px!important;color:#857a73;transition:color .2s ease}.account-nav li.active .account-menu-icon,.account-nav a:hover .account-menu-icon,.account-nav button:hover .account-menu-icon{color:var(--ay-acc)}.account-nav-group-toggle{display:flex!important;align-items:center;justify-content:space-between;width:100%}.account-nav-group-label{display:flex;align-items:center;gap:11px}.account-nav-group-toggle>.account-nav-group-label .account-menu-icon{color:var(--ay-acc)}

/* GERÇEK BUG DÜZELTMESİ (2026-08-24, Playwright mobil viewport
   doğrulaması sırasında bulundu) — Adres Defterim formunun 2 sütunlu
   grid'i (.address-form-grid, tanımı yukarıda satır ~3365) küçük
   ekranlarda 161px gibi kullanışsız dar input'lara sıkışıyordu.
   Bu kural DOSYANIN EN SONUNA bilinçli olarak eklendi: aynı specificity
   (0,1,0) taşıyan CSS kurallarında DOSYA SIRASINDA SONRA gelen kazanır
   — bu media query'i .address-form-grid tanımından ÖNCE bir yere
   koymak (ilk denemede yapılan hata) sessizce override edilirdi. */
@media (max-width: 800px) {
  .address-form-grid {
    grid-template-columns: 1fr;
  }
  .address-list {
    grid-template-columns: 1fr;
  }
  .address-card h4 {
    padding-right: 0;
  }
}

/* ------------------------------------------------------------------
   ÜYE PANELİ — 2026-08-25 (referans ekran tasarımı).
   Sosyal giriş butonları, katlanabilir "Hesap Ayarlarım" menü grubu ve
   iki kolonlu üyelik bilgileri formu.

   Yeni bir tasarım dili İCAT EDİLMEDİ: renkler mevcut --ay-* token'ları
   (--ay-line/--ay-mut/--ay-acc/--ay-tint), kenar yarıçapı ve tipografi
   dosyadaki .account-* / .btn ailesiyle aynı. Sosyal butonların marka
   renkleri (Google beyaz+gri çerçeve, Facebook #1877F2) BİLİNÇLİ
   İSTİSNADIR — sağlayıcı marka kılavuzları bunu şart koşar.

   Bu blok DOSYANIN SONUNA eklendi: dosya kronolojik/append-only bir
   düzende ve aynı specificity'de SONRAKİ kural kazanıyor.
   ------------------------------------------------------------------ */

/* --- Sosyal giriş --- */
.social-auth-buttons{display:flex;flex-direction:column;gap:10px;margin-bottom:0}
.social-auth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:46px;padding:0 16px;border-radius:4px;border:1px solid var(--ay-line);background:#fff;color:#2b2320;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}
.social-auth-btn:hover{background:#f7f5f3;box-shadow:0 2px 8px rgba(43,35,32,.07)}
.social-auth-btn svg{flex:none}
.social-auth-facebook{border-color:#1877f2;background:#1877f2;color:#fff}
.social-auth-facebook:hover{background:#166fe5;border-color:#166fe5;box-shadow:0 2px 10px rgba(24,119,242,.28)}
/* Facebook logosunun beyaz "f" boşluğu koyu zeminde kaybolmasın diye
   marka işaretine beyaz bir daire zemin veriyoruz. */
.social-auth-facebook svg{border-radius:50%;background:#fff}
.social-auth-divider{display:flex;align-items:center;gap:12px;margin-bottom:18px;color:var(--ay-mut);font-size:12px}
.social-auth-divider:before,.social-auth-divider:after{content:"";flex:1;border-top:1px solid var(--ay-line)}

/* --- Katlanabilir "Hesap Ayarlarım" menü grubu --- */
.account-nav-group-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:9px 10px;border:0;border-radius:8px;background:none;color:inherit;font-family:inherit;font-size:13.5px;font-weight:700;text-align:left;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.account-nav-group-toggle:hover,.account-nav-group-toggle.open{background:var(--ay-tint);color:var(--ay-acc)}
.account-nav-group-toggle>span:last-child{font-size:16px;line-height:1;opacity:.7}
.account-nav-group{margin:2px 0 6px;padding-left:12px!important;border-left:2px solid var(--ay-line)}
.account-nav-group li a,.account-sidebar li a{display:block;padding:9px 10px;border-radius:8px;color:inherit;font-size:13.5px;text-decoration:none;transition:background-color .2s ease,color .2s ease}
.account-nav-group li a:hover,.account-sidebar li a:hover{background:var(--ay-tint);color:var(--ay-acc)}

/* --- Üyelik bilgileri / şifre / tercih formları --- */
.member-form{display:flex;flex-direction:column;gap:20px}
.member-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;align-items:start}
.member-form-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.member-field{display:flex;flex-direction:column;gap:6px;margin:0;border:0;padding:0;min-width:0}
.member-field>span,.member-field>legend{display:flex;align-items:center;gap:8px;padding:0;color:#2b2320;font-size:13px;font-weight:600}
.member-field em{color:#c0392b;font-style:normal}
.member-field input,.member-field select{width:100%;height:44px;box-sizing:border-box;padding:0 12px;border:1px solid var(--ay-line);border-radius:4px;background:#fff;color:#2b2320;font-family:inherit;font-size:14px}
.member-field input:focus,.member-field select:focus{outline:0;border-color:var(--ay-acc);box-shadow:0 0 0 3px var(--ay-tint)}
.member-field input[readonly],.member-field input:disabled{background:#f6f4f2;color:var(--ay-mut);cursor:not-allowed}
.member-field-hint{color:var(--ay-mut);font-size:12px;line-height:1.5}
.member-verified-badge{padding:2px 8px;border-radius:999px;background:#e7f5ec;color:#1c7a45;font-size:11px;font-weight:700;letter-spacing:.02em}

.member-phone-row{display:flex;align-items:stretch;gap:0}
.member-phone-prefix{display:grid;place-items:center;min-width:56px;padding:0 12px;border:1px solid var(--ay-line);border-right:0;border-radius:4px 0 0 4px;background:#f6f4f2;color:var(--ay-mut);font-size:14px;font-weight:600}
.member-phone-row input{border-radius:0 4px 4px 0}
.member-otp-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.member-otp-row input{width:130px;flex:none;text-align:center}
/* Harf aralığı SADECE girilen koda uygulanır; placeholder'a uygulanınca
   "SMS Kodu" yazısı kutuya sığmayıp kırpılıyordu. */
.member-otp-row input:not(:placeholder-shown){letter-spacing:.18em}
.member-otp-row .btn{flex:none;white-space:nowrap}

.member-radio-group{gap:8px}
.member-radio-group label{display:flex;align-items:center;gap:8px;color:#2b2320;font-size:13.5px;font-weight:400;cursor:pointer}
.member-radio-group input{width:auto;height:auto;accent-color:var(--ay-acc)}
.member-checkbox{display:flex;align-items:flex-start;gap:9px;color:#2b2320;font-size:13.5px;line-height:1.5;cursor:pointer}
.member-checkbox input{width:auto;height:auto;margin-top:2px;flex:none;accent-color:var(--ay-acc)}
.member-consent-block{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--ay-line);border-radius:var(--ay-radius);background:#faf8f6}

.member-linked-accounts h3{margin:0 0 10px;font-size:14px}
.member-linked-accounts ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.member-linked-accounts li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--ay-line);border-radius:var(--ay-radius);background:#fff}
.member-linked-accounts li>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.member-linked-accounts small{color:var(--ay-mut);font-size:12px;overflow:hidden;text-overflow:ellipsis}

.member-form-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;padding-top:18px;border-top:1px solid var(--ay-line)}

@media(max-width:860px){
  .member-form-grid{grid-template-columns:1fr;gap:16px}
  .member-otp-row input{width:100%}
  .member-otp-row .btn{flex:1 1 auto}
  .member-form-actions{justify-content:stretch}
  .member-form-actions .btn{flex:1 1 auto}
}

/* ------------------------------------------------------------------
   Giriş / Üye Ol ekranı — referans tasarıma göre YENİDEN düzenlendi
   (2026-08-25). Değişen: tek sütunlu 520px kart yerine İKİ PANELLİ
   kart (solda form, sağda görsel/teklif alanı), alanlarda placeholder
   yerine görünür etiket, kart üstünde başlık.

   !important kullanımı: yukarıdaki .account-auth-shell bloğu (satır
   ~4001) genişlik/padding'i zaten !important ile sabitliyor; aynı
   özelliği geri almanın tek yolu bu. YENİ özelliklerde kullanılmadı.
   ------------------------------------------------------------------ */
.account-auth-shell{width:min(100% - 32px,980px)!important;max-width:980px!important;padding:40px 0 64px!important}
.account-auth-intro{display:none}

.account-auth-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;padding:0;overflow:hidden;border-radius:var(--ay-radius)}
.account-auth-pane{display:flex;flex-direction:column;padding:34px 40px 30px}

.account-auth-card .account-auth-tabs{margin:0 0 26px;border:1px solid var(--ay-line);border-radius:999px;background:var(--ay-tint);padding:4px;gap:4px}
.account-auth-card .account-auth-tabs button{border:0;border-radius:999px;padding:10px 12px;font-size:14px}
.account-auth-card .account-auth-tabs button.active{background:#fff;color:var(--ay-ink);box-shadow:0 1px 3px rgba(43,35,32,.12)}

.account-auth-heading{margin-bottom:22px}
.account-auth-heading h1{margin:0 0 8px;font-size:26px;letter-spacing:-.02em}
.account-auth-heading p{margin:0;color:var(--ay-mut);font-size:14px;line-height:1.6}

/* Etiket + alan. .account-auth-form gap'i 12px olduğu için etiketin
   kendi iç boşluğunu ayrı veriyoruz. */
.account-auth-field{display:flex;flex-direction:column;gap:6px}
.account-auth-field>span{font-size:13px;font-weight:600;color:var(--ay-ink)}
.account-auth-card .account-auth-form{gap:14px}
.account-auth-card .auth-help-link{align-self:flex-start}
.account-auth-card .auth-submit{margin-top:6px;height:50px;font-size:15px}
.account-auth-card .auth-secure-note{margin-top:14px}

/* Sağ panel. Gerçek bir görsel yok — bu yüzden vitrin alanını taban
   rengi + üstte yazı ile temsil ediyoruz; ürün görseli geldiğinde
   background-image ile aynı kutuya oturur. */
.account-auth-aside{position:relative;display:flex;align-items:flex-end;min-height:420px;padding:26px;background:var(--ay-tint);border-left:1px solid var(--ay-line)}
.account-auth-aside-note{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;color:var(--ay-mut);font-size:13.5px}
.account-auth-aside-caption{position:relative;margin:0;color:#fff;font-size:15px;font-weight:600;line-height:1.45;text-shadow:0 1px 8px rgba(43,35,32,.55)}
.account-auth-aside::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(to top,rgba(43,35,32,.72),transparent)}
.account-auth-aside-caption{z-index:1}

@media(max-width:860px){
  .account-auth-shell{width:min(100% - 32px,520px)!important;max-width:520px!important}
  .account-auth-card{grid-template-columns:1fr}
  .account-auth-pane{padding:26px 22px 24px}
  /* Görsel panel dar ekranda formu aşağı itmesin diye gizlenir. */
  .account-auth-aside{display:none}
}

/* Giriş ekranı sağ paneli — artık gerçek görsel var (2026-08-25).
   Görsel: themes/aydinlife/images/auth-showroom.webp — boucle koltuk /
   terracotta sıva yakın plan. 896x1200 PNG'den 821x1100 WebP'ye
   indirildi (2.4MB -> 110KB); giriş sayfasının ilk yükünü şişirmemek
   için. Kalite 80 yerine 72: bu kadrajda doku yoğun olduğu için fark
   gözle görünmüyor ama dosya ~30KB küçülüyor.

   Görseli değiştirmek için AYNI dosya adının üzerine yazmak yeterli —
   aşağıdaki yol sabittir. Alt bandın koyu gradyanı (::after) yazının
   okunurluğunu garanti eder, açık zeminli bir görselde bile. */
.account-auth-aside{
  background-image:url("/themes/bediloy/images/auth-showroom.webp");
  background-size:cover;
  background-position:center;
}
.account-auth-aside-note{display:none}

/* Sosyal giriş butonları artık HER ZAMAN görünür; yapılandırılmamış
   sağlayıcı disabled gelir (bkz. auth-forms.tsx). Devre dışı görünüm
   markayı soldurur ama yok saymaz — buton tasarımda yerini korur. */
.social-auth-btn:disabled{opacity:.5;cursor:not-allowed}
.social-auth-btn:disabled:hover{background:#fff}
.social-auth-hint{
  margin:10px 0 0;
  color:var(--ay-mut);
  font-size:12.5px;
  line-height:1.5;
  text-align:center;
}

/* Sosyal giriş bloğu, e-posta formunun ALTINA taşındı ve butonlar YAN
   YANA dizildi (2026-08-25). Yukarıdaki dikey/alt-boşluklu tanımların
   üzerine yazıyor.

   min-width:0 grid item'ların içeriğe göre taşmasını engeller: onsuz
   uzun etiket sütunu 1fr'den geniş yapar ve butonlar kartı aşar. */
.social-auth-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.social-auth-btn{min-width:0;padding:0 10px;gap:8px}
.social-auth-btn>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Ayırıcı artık formun altında; üst boşluk alttan büyük olmalı. */
.social-auth-divider{margin:20px 0 14px}

@media(max-width:420px){
  /* Çok dar ekranda iki sütun sıkışıyor — alt alta al. */
  .social-auth-buttons{grid-template-columns:1fr}
}

/* --- Hesabım panelleri: tipografik ritim + ayırıcı tutarlılığı (2026-08-25)

   Kullanıcı iki şey bildirdi: (1) "Üyelik Bilgilerim" altında boydan boya
   bir çizgi var, (2) diğer sekmeler aynı stilde olmalı ve boşluklar
   okunabilirlik standartlarına uymalı.

   (1)'in kaynağı .member-form-actions'ın border-top'u: iki kolonlu grid'in
   DIŞINDA olduğu için kart genişliğini kaplıyordu. Silmiyoruz — kaydet
   çubuğunu içerikten ayırması DOĞRU; ama artık başlığın altındaki ayırıcıyla
   AYNI dili konuşuyor, yani tek başına duran bir çizgi gibi görünmüyor.

   (2) için ölçek: 28px kart iç boşluğunu temel alıp altın orana (~1.618)
   yakın bir dikey adım dizisi kullanıyoruz — 8 / 13 / 21 / 34. Fibonacci
   dizisi ardışık oranları 1.618'e yakınsar, bu yüzden "altın oran" isteğini
   keyfi sayılar uydurmadan karşılar ve zaten var olan 20/24/32'lik
   değerlerle çakışmaz.

   Satır uzunluğu okunabilirlik standardı (~45-75 karakter) tek kolonlu
   yardım metinleri için max-width ile sınırlanıyor; form alanları grid'in
   yarısında zaten bu aralıkta kalıyor. */

/* Başlık bloğu: eyebrow + h2 tek bir birim gibi dursun, altında panelin
   geri kalanından ayıran ayırıcı olsun. Böylece HER sekme aynı açılışa
   sahip — Siparişlerim, Adres Defterim, Yorumlarım dahil. */
.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(--ay-line);
  font-size:22px;
  line-height:1.25;
}

/* Panel gövdesi ile başlık arasındaki nefes payı zaten h2'nin margin'inde;
   formun kendi iç ritmi 21px'e çekiliyor (eski 20px ile görsel olarak
   aynı ama dizinin parçası). */
.member-form{gap:21px}
.member-form-grid{gap:21px 34px}
.member-form-col{gap:13px}

/* Kaydet çubuğu: üstündeki boşluk, altındaki ayırıcının okunması için
   başlıktakinin bir adım büyüğü (21px) olmalı — 18px optik olarak
   çizgiye yapışık duruyordu. */
.member-form-actions{margin-top:13px;padding-top:21px}

/* Yardım/açıklama metinleri: satır uzunluğunu okunabilir aralıkta tut. */
.member-field-hint{max-width:62ch}

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

/* --- Destek Taleplerim listesi (2026-08-25) ---
   Panel artık formdan önce mevcut talepleri ve yazışmayı gösteriyor.
   Dikey ritim hesap panellerinin geri kalanıyla AYNI Fibonacci adımlarını
   (8/13/21) kullanır. */
.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(--ay-line);border-radius:var(--ay-radius);background:#fff;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;text-align:left;cursor:pointer}
.support-ticket-head:hover{background:var(--ay-tint)}
.support-ticket-head-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.support-ticket-head-main strong{color:var(--ay-ink);font-size:14.5px;font-weight:600}
.support-ticket-head-main small{color:var(--ay-mut);font-size:12.5px}
.support-ticket-preview{margin:0;padding:0 16px 13px;color:var(--ay-mut);font-size:13px;line-height:1.55;
  /* Önizleme tek satır: kart yüksekliği yanıt uzunluğuna göre zıplamasın. */
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.support-ticket-preview span{font-weight:600;color:var(--ay-ink)}
.support-ticket-thread{display:flex;flex-direction:column;gap:13px;margin:0;padding:0 16px 16px;list-style:none;border-top:1px solid var(--ay-line);padding-top:13px}
.support-ticket-thread li{display:flex;flex-direction:column;gap:4px;max-width:min(100%,62ch);padding:10px 13px;border-radius:var(--ay-radius)}
/* Müşteri solda/nötr, ekip sağda/vurgulu — kimin yazdığı renkten de
   anlaşılsın, sadece etiketten değil. */
.support-ticket-thread li.is-customer{align-self:flex-start;background:var(--ay-tint)}
.support-ticket-thread li.is-staff{align-self:flex-end;background:#f6f4f2;border:1px solid var(--ay-line)}
.support-ticket-author{color:var(--ay-mut);font-size:11.5px;font-weight:600}
.support-ticket-thread li p{margin:0;color:var(--ay-ink);font-size:13.5px;line-height:1.6}
.support-ticket-form-title{margin:0 0 8px;font-size:15px;font-weight:600}

/* Sipariş detayı — Adres Bilgileri (2026-08-25). Teslimat + fatura yan
   yana; dar ekranda tek sütuna iner. */
.order-address-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  margin-top:12px;
}
.order-address-card{
  border:1px solid var(--ay-line);
  border-radius:8px;
  padding:16px;
  background:#fff;
}
.order-address-card h3{
  margin:0 0 10px;
  font-size:13.5px;
  font-weight:700;
  color:var(--ay-ink);
}
.order-address-card p{
  margin:0 0 4px;
  font-size:13px;
  line-height:1.55;
  color:var(--ay-mut);
}
.order-address-card p:last-child{margin-bottom:0}
.order-address-same{font-style:italic}

/* -----------------------------------------------------------------------
   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; }
}

/* ===========================================================================
   ALTI ÇİZİLİ METİN YOK — kullanıcı isteği (2026-08-25):
   "hiç bir yerde underline olmayacak".

   Tarayıcının <a> için varsayılan alt çizgisi de dahil TÜM underline
   kapatılır. line-through (indirimli fiyatın üstü çizili gösterimi)
   ETKİLENMEZ; o ayrı bir text-decoration-line değeridir ve aşağıdaki
   kural yalnızca "underline"ı hedeflemez şekilde değil, `none` ile
   tümünü sıfırladığı için line-through kullanan kurallar KENDİ
   bildirimleriyle bunu geri açar (daha spesifik oldukları için).
   =========================================================================== */
a,
a:hover,
a:focus,
a:visited,
button,
.btn,
ins,
u {
  text-decoration: none;
}

/* İndirimli fiyat üstü çizili KALIR — yukarıdaki genel kuralın istisnası. */
.price-old,
.ay-price-old,
del,
s,
strike {
  text-decoration: line-through;
}

/* ===========================================================================
   SİPARİŞ DETAYI (hesap paneli içinde ve /hesabim/siparislerim/[id])
   bkz. components/order-detail-view.tsx
   =========================================================================== */
.order-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-detail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ay-line);
  margin-bottom: 18px;
}

.order-detail-back {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ay-acc);
}
.order-detail-back:hover {
  color: var(--ay-acc-h);
}

.order-detail-top-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.order-detail-title {
  margin: 28px 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ay-ink);
}

/* --- Künye / kargo bilgi tablosu (etiket | değer) --- */
.order-meta-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius);
  overflow: hidden;
  background: #fff;
}
.order-meta-table th,
.order-meta-table td {
  padding: 11px 14px;
  font-size: 13.5px;
  text-align: left;
  border-bottom: 1px solid var(--ay-line);
  vertical-align: top;
}
.order-meta-table tr:last-child th,
.order-meta-table tr:last-child td {
  border-bottom: none;
}
.order-meta-table th {
  width: 200px;
  font-weight: 600;
  color: var(--ay-mut);
  background: var(--ay-tint);
  white-space: nowrap;
}
.order-meta-table td {
  color: var(--ay-ink);
  font-weight: 600;
}
.order-tracking-link {
  color: var(--ay-acc);
  font-weight: 700;
}

/* --- Sipariş süreci (stepper) --- */
.order-process {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius);
  padding: 16px;
  background: #fff;
}
.order-process.is-cancelled {
  display: block;
  padding: 16px;
}
.order-process.is-cancelled p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ay-mut);
}

.order-process-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.order-process-dot {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--ay-line);
  background: #fff;
  color: var(--ay-mut);
}
.order-process-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.order-process-text b {
  font-size: 13px;
  color: var(--ay-ink);
}
.order-process-text small {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ay-mut);
}

/* Tamamlanan adım: dolu accent. Aktif adım: çerçeveli vurgulu. */
.order-process-step.is-done .order-process-dot {
  background: var(--ay-acc);
  border-color: var(--ay-acc);
  color: #fff;
}
.order-process-step.is-active .order-process-dot {
  border-color: var(--ay-acc);
  color: var(--ay-acc);
  box-shadow: 0 0 0 3px rgba(107, 74, 50, 0.12);
}
.order-process-step.is-active .order-process-text b {
  color: var(--ay-acc);
}
.order-process-step.is-todo {
  opacity: 0.55;
}

/* --- Ürün tablosu --- */
.order-items-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius);
  background: #fff;
}
.order-items-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.order-items-table th,
.order-items-table td {
  padding: 12px 14px;
  font-size: 13.5px;
  text-align: left;
  border-bottom: 1px solid var(--ay-line);
  vertical-align: top;
}
.order-items-table thead th {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ay-mut);
  background: var(--ay-tint);
  white-space: nowrap;
}
.order-items-table tbody tr:last-child td {
  border-bottom: none;
}
.order-items-table .col-index {
  width: 48px;
  color: var(--ay-mut);
  font-weight: 700;
}
.order-items-table .col-num {
  white-space: nowrap;
  text-align: right;
}
.order-items-product {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.order-items-product-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.order-items-product-text b {
  font-size: 13.5px;
  color: var(--ay-ink);
  line-height: 1.4;
}
.order-items-product-text small {
  font-size: 11.5px;
  color: var(--ay-mut);
}

/* Sipariş kartı artık <button> — tarayıcı varsayılanlarını temizle. */
button.order-card {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: #fff;
  cursor: pointer;
}

/* İ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;
}

/* ------------------------------------------------------------------
   Hesabım — Özet (dashboard) ekranı
   bkz. components/account-page-content.tsx > DashboardPanel

   Kullanıcı isteği (2026-08-25): "ilk girişte boş bir alan gelmeden
   soldaki menülerden beslenen ortaya güzel bir dashboard yap".
   Soldaki sipariş/harcama/favori kutuları kaldırıldı, sayılar buraya
   taşındı.
   ------------------------------------------------------------------ */
.account-dashboard {
  display: grid;
  gap: 22px;
}

.account-dashboard-hero {
  background: var(--ay-tint);
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius);
  padding: 20px 22px;
}
.account-dashboard-hero h3 {
  margin: 0 0 6px;
  font-size: 19px;
  color: var(--ay-ink);
}
.account-dashboard-hero p {
  margin: 0;
  color: var(--ay-mut);
  font-size: 14px;
}

.account-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.account-dashboard-stats button {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 14px;
  background: #fff;
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.account-dashboard-stats button:hover {
  border-color: var(--ay-acc);
  background: var(--ay-tint);
}
.account-dashboard-stats b {
  font-size: 22px;
  color: var(--ay-acc);
  line-height: 1.2;
}
.account-dashboard-stats span {
  font-size: 12px;
  color: var(--ay-mut);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.account-dashboard-section {
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius);
  padding: 18px 20px;
  background: #fff;
}
.account-dashboard-section h4 {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--ay-ink);
}
.account-dashboard-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.account-dashboard-section-head h4 {
  margin: 0;
}

.account-dashboard-lastorder {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--ay-tint);
  border-radius: var(--ay-radius);
}
.account-dashboard-lastorder > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-right: auto;
}
.account-dashboard-lastorder > div span {
  font-size: 13px;
  color: var(--ay-mut);
}
.account-dashboard-lastorder-total {
  font-size: 17px;
  color: var(--ay-ink);
}

.account-dashboard-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.account-dashboard-links button {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  column-gap: 10px;
  row-gap: 4px;
  padding: 14px 15px;
  background: #fff;
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.account-dashboard-links button>.account-menu-icon-wrap{grid-row:1/3;width:34px!important;height:34px!important;max-width:34px!important;align-self:start;border-radius:7px;background:var(--ay-tint)}
.account-dashboard-links button>.account-menu-icon-wrap>.account-menu-icon{color:var(--ay-acc)}
.account-dashboard-links button:hover {
  border-color: var(--ay-acc);
  background: var(--ay-tint);
}
.account-dashboard-links b {
  font-size: 14px;
  color: var(--ay-ink);
}
.account-dashboard-links span {
  font-size: 12.5px;
  color: var(--ay-mut);
  line-height: 1.45;
}

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

/* Yapisal urun ozellikleri (attributes) — specs chip'lerinden ayirt edilebilsin
   diye hafif vurgulu bir zemin; ayni satir yuksekligi/ritmi korunur. */
.ay-spec-chip-attr {
  border-color: rgba(0, 0, 0, 0.14);
  background: rgba(0, 0, 0, 0.035);
}
.ay-spec-chip-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  vertical-align: middle;
}

/* 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(--ay-line);
  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(--ay-mut);
  background: var(--ay-tint);
  padding: 10px 12px;
  white-space: nowrap;
  border-bottom: 1px solid var(--ay-line);
}

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

/* 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(--ay-line);
}

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

.order-table-group:hover td {
  background: var(--ay-tint);
}

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

.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(--ay-mut);
}

.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(--ay-tint);
  border-bottom: 1px solid var(--ay-line);
  font-size: 14px;
}


/* --- İade & Değişim sihirbazı (RMA) --- */
.rma-wizard { border: 1px solid var(--ay-line); border-radius: 10px; padding: 16px; margin-top: 12px; background: var(--ay-tint); }
.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(--ay-mut); }
.rma-step-no { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--ay-line); 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(--ay-line); }
.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(--ay-line); 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(--ay-mut); }
.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(--ay-line); border-radius: 6px; padding: 8px 10px; font: inherit; background: transparent; color: inherit; width: 100%;
}
.rma-field small { color: var(--ay-mut); }
.rma-variant-list { display: flex; flex-direction: column; gap: 6px; }
.rma-variant { display: flex; align-items: center; gap: 8px; border: 1px solid var(--ay-line); 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(--ay-mut); }
.rma-file-list { margin: 0; padding-left: 18px; font-size: 12px; color: var(--ay-mut); }
.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(--ay-mut); margin: 0; }
.rma-summary dd { margin: 0; }
.rma-note { font-size: 12px; color: var(--ay-mut); 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(--ay-line); 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(--ay-mut); }
.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(--ay-mut); position: relative; }
.rma-timeline li::before { content: ""; position: absolute; top: 5px; left: 0; right: 50%; height: 1px; background: var(--ay-line); }
.rma-timeline li:first-child::before { display: none; }
.rma-timeline-dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--ay-line); background: var(--ay-tint); 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(--ay-line); border-radius: 10px; padding: 16px; margin-top: 12px; background: var(--ay-tint); 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(--ay-line); 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(--ay-mut); }
.cancel-item-qty input { width: 62px; border: 1px solid var(--ay-line); 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(--ay-line); border-radius: 8px; padding: 10px 12px; opacity: 0.75; }
.cancel-blocked-list small { font-size: 12px; color: var(--ay-mut); }
.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(--ay-line); 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; }

/* ==================================================================
   MOBİL UYUM (2026-08-26)

   Bağlam: <meta viewport> etiketi bu tarihe kadar hiç yoktu, bu yüzden
   yukarıdaki tüm @media (max-width) kuralları mobil tarayıcıda HİÇ
   çalışmıyordu. Etiket eklendikten sonra Playwright ile 14 rota 375px
   ve 768px'te ölçüldü: yatay taşma kalmadı, geriye iki gerçek kusur
   kaldı ve burada giderilir.
   ================================================================== */

/* 1) Ana navigasyon mobilde SATIRA SARMAZ, tek düğmeye iner.
   .ay-nav-mobile-toggle ve mobileNavOpen paneli Header.tsx'te zaten
   vardı ama hiçbir yerde görünür yapılmıyordu; kategori bağlantıları
   375px'te alt alta sarılarak menüyü sayfa boyu uzatıyordu. */
@media (max-width: 860px) {
  .ay-nav-row {
    flex-wrap: nowrap;
    gap: 0;
  }
  .ay-nav-mobile-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ay-ink);
    background: none;
    border: none;
    cursor: pointer;
  }
  /* display:none — ekran dışına itmek DEĞİL: gizli ama odaklanılabilir
     bağlantılar klavye ve ekran okuyucu kullanıcısını görünmeyen bir
     menüde dolaştırır. */
  .ay-nav-row .ay-nav-item {
    display: none;
  }
  .ay-nav-outlet {
    margin-left: auto;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* 2) Dokunma hedefleri — WCAG 2.5.8 (Target Size, Minimum) 24×24 CSS
   piksel ister. Ölçümde her sayfada 17–29 hedef bunun altındaydı.
   Görsel boyut büyütülmez; tıklanabilir alan sözde-eleman ile
   genişletilir, böylece tasarım aynı kalır. */
@media (pointer: coarse) {
  .ay-hero-dot {
    position: relative;
  }
  .ay-hero-dot::after {
    content: "";
    position: absolute;
    inset: -12px -4px;
  }
  .ay-section-link,
  .ay-footer a,
  .ay-topbar-links a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }
}

/* ==================================================================
   MOBİL TAŞMA KÖK NEDENİ — /yatak vb. kategori sayfaları (2026-08-26)
   Playwright + CDP CSS.getMatchedStylesForNode ile iki ayrı hata
   ölçüldü; ikisi de tek başına taşma üretiyordu.

   1) <body> tarayıcı varsayılanı olan margin:8px'i hiç sıfırlanmamış.
      Masaüstünde .ay-main ortalandığı için görünmüyordu, 375px'te
      doğrudan 16px taşma demek. Sıfırlanır.

   2) .ay-listing-layout mobilde grid-template-columns:1fr'e düşüyor,
      ama CSS gridde `1fr` = `minmax(auto, 1fr)`'dir: parça min-content
      genişliğinin ALTINA inmez. Kolonun içindeki .ay-listing-toolbar
      (flex, sarmıyor) ve .ay-product-grid min-content'i 362px olduğu
      için 327px'lik kapsayıcıda kolon 362px hesaplandı ve sağa taştı.
      Doğru düzeltme minmax(0,1fr) — böylece parça kapsayıcıdan
      taşamaz; taşmayı üreten toolbar da mobilde sarmaya alınır.
      ================================================================== */
body { margin: 0; }

@media (max-width: 860px) {
  .ay-listing-layout { grid-template-columns: minmax(0, 1fr); }
  .ay-listing-layout > * { min-width: 0; }
  .ay-listing-toolbar { flex-wrap: wrap; row-gap: 10px; }
  .ay-listing-toolbar > * { min-width: 0; }
}

/* ==================================================================
   MOBİL BAŞLIK YENİDEN DÜZENİ (2026-08-26, kullanıcı isteği:
   "hamburger menü solda, sepeti sepet ikonuna çevir, arama kısmını
   daha iyi hale getir")

   Önceki mobil başlık üç ayrı satıra yayılıyordu (logo / Hesabım +
   geniş "Sepetim" düğmesi / arama), hamburger ise en altta ayrı bir
   nav şeridindeydi — ekranın yarısı başlıkla doluyordu. Yeni düzen:
   tek kompakt bar (hamburger · logo · hesap + sepet ikonu) + altında
   tam genişlikte arama.
   ================================================================== */

/* Hamburger yalnızca mobilde; masaüstünde gizli. */
.ay-mobile-burger { display: none; }

.ay-cart-icon { display: block; width: 22px; height: 22px; }
.ay-user-icon { display: block; width: 22px; height: 22px; }

@media (max-width: 860px) {
  .ay-header-main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "burger brand actions" "search search search";
    align-items: center;
    gap: 10px 12px;
    padding: 10px 0 12px;
    min-height: 0;
  }

  .ay-mobile-burger {
    grid-area: burger;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: -10px;
    padding: 0; border: none; background: none; cursor: pointer;
    color: var(--ay-ink, #2b2320);
  }
  /* Hamburger üç çizgisi tek elemandan: orta çizgi background,
     alt/üst ::before-::after. Ekstra <span> gerektirmez. */
  .ay-mobile-burger > span,
  .ay-mobile-burger > span::before,
  .ay-mobile-burger > span::after {
    display: block; width: 22px; height: 2px;
    background: currentColor; border-radius: 2px;
  }
  .ay-mobile-burger > span { position: relative; }
  .ay-mobile-burger > span::before,
  .ay-mobile-burger > span::after {
    content: ""; position: absolute; left: 0;
  }
  .ay-mobile-burger > span::before { top: -7px; }
  .ay-mobile-burger > span::after { top: 7px; }

  .ay-brand { grid-area: brand; justify-self: center; }
  .ay-brand img { max-width: 170px; max-height: 46px; }

  .ay-header-actions {
    grid-area: actions; gap: 4px; margin-right: -6px;
    justify-self: end; align-items: center;
  }
  /* Hesap kutusundaki iki satırlık metin ("Hesabım / Giriş yap") mobil
     barda çok yer kaplıyordu; metnin TAMAMI gizlenip yerine kullanıcı
     ikonu gösterilir (sepetle aynı desen). Tıklama hedefi 44px korunur;
     anlam aria-label ile taşınır. */
  .ay-header-action { min-width: 44px; min-height: 44px; display: flex;
    align-items: center; justify-content: center; font-size: 12px; }
  .ay-header-action-text { display: none; }
  .ay-user-icon { display: block; width: 23px; height: 23px; }
  /* Hesap açılır menüsü fare üzerine gelmeye bağlı — dokunmatikte
     açılamaz ve mobilde zaten çekmecede aynı bağlantılar var. */
  .ay-account-dropdown { display: none; }
  .ay-header-account > a { display: flex; align-items: center;
    justify-content: center; width: 44px; height: 44px; }
  .ay-header-actions .market-switcher { display: none; }

  /* Sepet: yalnızca ikon + adet rozeti.
     Kullanıcı isteği (2026-08-26): "altında ren olmasın ... zemini kaldır,
     rengini de user iconu gibi yap". Masaüstündeki kahverengi dolgu
     (.ay-cart-btn { background:#765039 }) mobilde iki ikonu görsel olarak
     eşitsiz yapıyordu — biri düz çizgi, diğeri dolu kutu. Mobilde zemin ve
     çerçeve kaldırılır, renk user ikonuyla aynı metin rengine (currentColor
     üzerinden --ay-ink) döner. !important gerekli: masaüstü kuralı
     (satır ~4126) bu media bloğundan SONRA tanımlı. */
  .ay-cart-btn {
    position: relative;
    width: 44px; height: 44px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* user ikonuyla BİREBİR aynı renk: .ay-header-action metin rengi
       ölçümle rgb(122,122,122) çıktı; var(--ay-ink) 28,28,28 verip iki
       ikonu farklı tonda bırakıyordu. Aynı değişkene bağlanır. */
    color: #7a7a7a !important;
  }
  .ay-cart-label { display: none; }
  .ay-cart-icon { display: block; width: 23px; height: 23px; }
  /* Zemin kalktığı için rozet artık sayfa arka planının üzerinde duruyor;
     ince beyaz halka onu ikon çizgilerinden ayırır. */
  .ay-cart-count {
    position: absolute; top: 1px; right: -1px;
    box-shadow: 0 0 0 2px #fff;
    min-width: 17px; height: 17px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; background: #dc3d1d; color: #fff;
    font-size: 11px; font-weight: 700; line-height: 1;
  }

  /* ARAMA — önceden 46px yüksekliğinde, içindeki "Ara" düğmesi metni
     kırpacak kadar genişti ve placeholder mobil ekrana sığmıyordu
     (ekran görüntüsünde "...örn. köşe k" diye kesiliyordu). Artık
     tam genişlikte, kısa placeholder'lı ve düğme yerine büyüteç
     ikonlu — metin alanına maksimum yer kalır. */
  .ay-header-main > .ay-search {
    grid-area: search;
    width: 100%; max-width: none; order: 0;
    height: 44px; border-radius: 6px;
  }
  .ay-search input { font-size: 16px; /* iOS'ta <16px odakta zoom yapar */ }
  .ay-search button {
    height: 36px; min-width: 44px; padding: 0 14px;
    font-size: 0; /* metin gizlenir, ikon kalır */
  }
  .ay-search button::after {
    content: "⌕"; font-size: 22px; line-height: 1; color: #fff;
  }

  /* Nav şeridi mobilde tamamen kalkar — kategoriler artık çekmecede.
     display:none kullanılır: ekran dışına itilen ama odaklanılabilir
     bağlantılar klavye kullanıcısını görünmeyen bir menüde dolaştırır. */
  .ay-nav { display: none; }
}

/* Mobil arama placeholder'ı kısaltılır: uzun metin dar ekranda kesiliyor
   ve kullanıcıya hiçbir şey anlatmıyordu. */
@media (max-width: 860px) {
  .ay-search input::placeholder { font-size: 14px; }
}

/* ------------------------------ ÇEKMECE ------------------------------ */
.ay-drawer-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20, 15, 12, 0.5);
}
.ay-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 1001;
  width: min(86vw, 340px);
  display: flex; flex-direction: column;
  background: #fff; box-shadow: 2px 0 24px rgba(0, 0, 0, 0.18);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: ay-drawer-in 0.18s ease-out;
}
/* Hareketi azalt tercihi olan kullanıcıda kaydırma animasyonu çalışmaz. */
@media (prefers-reduced-motion: reduce) { .ay-drawer { animation: none; } }
@keyframes ay-drawer-in { from { transform: translateX(-100%); } to { transform: none; } }

.ay-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #eeeae7;
}
.ay-drawer-title { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; }
.ay-drawer-close {
  width: 40px; height: 40px; margin-right: -8px;
  border: none; background: none; cursor: pointer;
  font-size: 30px; line-height: 1; color: #6d635d;
}

.ay-drawer-nav { padding: 4px 0; }
.ay-drawer-group + .ay-drawer-group { border-top: 1px solid #f3efec; }
.ay-drawer-row { display: flex; align-items: center; }
.ay-drawer-link {
  flex: 1; min-width: 0;
  padding: 13px 16px; font-size: 15px; color: inherit; text-decoration: none;
}
.ay-drawer-expand {
  width: 46px; min-height: 46px;
  border: none; background: none; cursor: pointer;
  font-size: 20px; color: #9a908a;
  transition: transform 0.15s ease;
}
.ay-drawer-expand.is-open { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .ay-drawer-expand { transition: none; } }

.ay-drawer-sub { padding: 2px 0 10px; background: #faf9f8; }
.ay-drawer-sub a {
  display: block; padding: 10px 16px 10px 28px;
  font-size: 14px; color: #5d534e; text-decoration: none;
}

.ay-drawer-foot {
  margin-top: auto; display: flex; flex-direction: column;
  padding: 12px 16px 22px; border-top: 1px solid #eeeae7; gap: 2px;
}
.ay-drawer-foot a,
.ay-drawer-logout {
  display: flex; align-items: center; min-height: 42px;
  padding: 0; border: none; background: none;
  font-size: 14px; color: #4a423e; text-align: left;
  text-decoration: none; cursor: pointer;
}
.ay-drawer-outlet { color: #dc3d1d !important; font-weight: 600; }

/* ==================================================================
   MOBİL ÜST BAR + SABİT WHATSAPP (2026-08-28, kullanıcı isteği:
   "üst barda sepete ek indirim alanı da mobilde sosyal medya
   ikonları, whatsapp ikonu da sağ alt köşede olacak")

   Önceki durum: 860px altında .ay-topbar-links'in son eleman dışındaki
   tüm bağlantıları gizleniyordu ve .ay-topbar-right taşmasın diye
   pratikte sosyal ikonlar da görünmüyordu. Duyuru metni ("Sepette %20
   ek indirim...") tek başına kalıyordu.

   Yeni düzen: duyuru metni üstte tam satır, sosyal ikonlar altında
   ortalanmış ikinci satır. WhatsApp üst bardan ÇIKARILIR — mobilde
   sağ alt köşede sabit (floating) butona döner; orası dokunmatikte
   başparmağın doğal eriştiği yer ve sayfa kaydırılsa da kaybolmaz.
   ================================================================== */
@media (max-width: 860px) {
  .ay-topbar { font-size: 12px; }
  .ay-topbar-inner {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center;
  }
  .ay-topbar-right {
    gap: 14px;
    justify-content: center;
  }
  /* Metin bağlantıları mobilde yer kaplıyor; aynı hedefler zaten
     hamburger çekmecesinin altında var. */
  .ay-topbar-right > .ay-topbar-link { display: none; }

  /* Sosyal ikonlar mobilde GÖRÜNÜR — ayırıcı çizgi ve sol boşluk
     dikey düzende anlamsız olduğu için kaldırılır. */
  .ay-topbar-socials {
    display: flex;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    gap: 18px;
  }
  /* WCAG 2.5.8: ikonun kendisi 14px, dokunma alanı görünmez şekilde
     24px'e tamamlanır. */
  .ay-social-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
  }

  /* WhatsApp üst bardan kalkar — sabit butona taşındı. */
  .ay-topbar-whatsapp { display: none; }
}

/* ---------- Sabit WhatsApp (sağ alt köşe) ---------- */
.ay-whatsapp-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 900; /* çekmece (1001) ve arka planının (1000) ALTINDA kalır */
  width: 54px;
  height: 54px;
  display: none; /* yalnızca mobilde */
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transition: transform 0.15s ease;
}
.ay-whatsapp-fab:active { transform: scale(0.94); }
@media (prefers-reduced-motion: reduce) { .ay-whatsapp-fab { transition: none; } }

@media (max-width: 860px) {
  .ay-whatsapp-fab { display: flex; }
}

/* ==========================================================================
   CANLI RENK PALETİ + KAMPANYA SAYFASI
   (kullanıcı isteği 2026-08-26: "burda çok soluk. bir şekilde daha canlı
   renkler de düzeltelim")

   styles.css referans sitenin BİREBİR kopyasıdır ve DEĞİŞTİRİLMEZ; oradaki
   :root token'ları burada, sonradan gelen bir kuralla ezilir. Sadece
   DOYGUNLUK artırılır — renklerin kimliği (kahve/amber/kırmızı) korunur,
   böylece tema başka bir temaya dönüşmez.

   Kontrast kontrolü (WCAG 1.4.3, beyaz zemine karşı):
     --ay-acc  #6b4a32 -> #8a4a1f : 5.9:1  (metin için AA)
     --ay-sale #b02a26 -> #d32011 : 4.6:1  (AA, 14px+ normal metin)
   ========================================================================== */
:root {
  --ay-acc: #8a4a1f;    /* daha sıcak/doygun kahve-turuncu */
  --ay-acc-h: #6d3915;  /* hover: aynı tonun koyusu */
  --ay-acc2: #ffb733;   /* amber: soluk #f2c77a yerine gerçek amber */
  --ay-sale: #d32011;   /* indirim kırmızısı: canlı */
  --ay-tint2: #f1ece5;  /* ürün görseli zemini: hafif daha sıcak */
}

.ay-campaign-hero {
  background: linear-gradient(135deg, #2b2320 0%, #5a3418 55%, #8a4a1f 100%);
  color: #fff;
}
.ay-campaign-inner {
  max-width: var(--ay-site-width, 1600px);
  margin: 0 auto;
  padding: 48px var(--ay-site-gutter, 24px) 52px;
  text-align: center;
}
.ay-campaign-eyebrow {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--ay-acc2, #ffb733);
  color: #2b2320;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.ay-campaign-title {
  margin: 16px 0 0;
  font-size: clamp(26px, 4.4vw, 46px);
  line-height: 1.15;
  font-weight: 800;
  color: #fff;
}
.ay-campaign-desc {
  margin: 14px auto 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
}

.ay-campaign-countdown { margin-top: 26px; }
.ay-campaign-countdown-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.ay-campaign-clock {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.ay-campaign-unit {
  min-width: 68px;
  padding: 10px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.ay-campaign-unit strong {
  display: block;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  /* Rakamlar saniyede bir değişiyor: eş genişlikli rakam yoksa kutu
     genişliği titrer. */
  font-variant-numeric: tabular-nums;
}
.ay-campaign-unit span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.ay-campaign-bullets {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
}
.ay-campaign-bullets li::before {
  content: "✓";
  margin-right: 7px;
  font-weight: 800;
  color: var(--ay-acc2, #ffb733);
}

.ay-campaign-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  min-height: 48px;
  padding: 0 30px;
  border-radius: 8px;
  background: var(--ay-acc2, #ffb733);
  color: #2b2320;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.ay-campaign-cta:hover { filter: brightness(1.06); }
.ay-campaign-cta:active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) {
  .ay-campaign-cta { transition: none; }
}

.ay-campaign-fineprint {
  margin: 18px auto 0;
  max-width: 70ch;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
}

@media (max-width: 860px) {
  .ay-campaign-inner { padding-top: 34px; padding-bottom: 36px; }
  .ay-campaign-clock { gap: 8px; }
  .ay-campaign-unit { min-width: 62px; }
  .ay-campaign-bullets {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .ay-campaign-cta { width: 100%; }
}

/* GERÇEK TAŞMA DÜZELTMESİ (2026-08-28, /kampanyalar üzerinde ölçüldü):
   .ay-page-links `inline-flex` + wrap yok. Arama sonuçlarında sayfa
   sayısı az olduğu için (6 bağlantı, 246px) sorun görünmüyordu; 23
   bağlantılı kampanya listesinde satır 960px'e çıkıp 390px ekranda
   586px yatay taşma yarattı. Sarmalama açılır ve ortalanır. */
.ay-page-links {
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

/* ═══ PANELDEN YÖNETİLEN KART IZGARASI (2026-08-28) ═══
   Elementor tarzı "card-grid" bölümü. Aynı sınıf hem ızgara hem
   yatay slider olarak kullanılıyor: mağaza panelden düzeni seçiyor.
   Sütun sayısı satır içi gridTemplateColumns ile geliyor — burada
   SADECE mobil geri dönüş tanımlı, yoksa 3 sütun telefonda ezilir. */
.ay-cardgrid {
  display: grid;
  gap: 20px;
}
.ay-cardgrid--slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.ay-cardgrid--slider .ay-cardgrid-card {
  flex: 0 0 clamp(240px, 30%, 380px);
  scroll-snap-align: start;
}
.ay-cardgrid-card {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: var(--ay-tint2, #f1ece5);
  color: inherit;
  text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
  .ay-cardgrid-card { transition: transform .25s ease, box-shadow .25s ease; }
  .ay-cardgrid-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(16, 24, 40, .14); }
  .ay-cardgrid-card:hover .ay-cardgrid-img { transform: scale(1.04); }
  .ay-cardgrid-img { transition: transform .4s ease; }
}
.ay-cardgrid-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.ay-cardgrid-body { padding: 18px 20px 22px; }
.ay-cardgrid-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ay-acc2, #ffb733);
  color: #2b2320;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ay-cardgrid-title { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; }
.ay-cardgrid-desc { margin: 8px 0 0; font-size: 14px; line-height: 1.6; opacity: .82; }
.ay-cardgrid-cta {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ay-acc, #8a4a1f);
}
@media (max-width: 860px) {
  /* Panelden gelen sütun sayısı ne olursa olsun mobilde tek sütun. */
  .ay-cardgrid:not(.ay-cardgrid--slider) { grid-template-columns: 1fr !important; }
  .ay-cardgrid--slider .ay-cardgrid-card { flex-basis: 78%; }
  .ay-cardgrid-body { padding: 16px 16px 20px; }
  .ay-cardgrid-title { font-size: 17px; }
}

/* 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;
}

/* ─── DÜĞÜN PAKETLERİ & KAMPANYALI SETLER VİTRİN STİLLERİ ─── */
.ay-wedding-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
  margin-top: 20px;
}
.ay-wedding-showcase-card {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e8e8ea;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}
.ay-wedding-showcase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  border-color: #cbd5e1;
}
.ay-wedding-cover-wrap {
  position: relative;
  height: 230px;
  background: #f1f5f9;
  overflow: hidden;
}
.ay-wedding-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ay-wedding-showcase-card:hover .ay-wedding-cover-img {
  transform: scale(1.04);
}
.ay-wedding-badge-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 8px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  z-index: 2;
}
.ay-wedding-card-content {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ay-wedding-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px;
  line-height: 1.35;
}
.ay-wedding-card-desc {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 16px;
  line-height: 1.5;
}
.ay-bundle-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.ay-bundle-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #f1f5f9;
}
.ay-bundle-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ay-bundle-item-thumb {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.ay-bundle-item-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ay-bundle-item-cat {
  font-size: 11px;
  color: #64748b;
}
.ay-bundle-item-prices {
  text-align: right;
  flex-shrink: 0;
  margin-left: 10px;
}
.ay-bundle-item-single {
  font-size: 11px;
  text-decoration: line-through;
  color: #94a3b8;
}
.ay-bundle-item-pkg {
  font-size: 12.5px;
  font-weight: 700;
  color: #059669;
}
.ay-bundle-gifts-box {
  background: #fefce8;
  border: 1px solid #fef08a;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 18px;
}
.ay-bundle-gifts-title {
  font-size: 11px;
  font-weight: 700;
  color: #854d0e;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ay-bundle-gift-line {
  font-size: 12px;
  color: #713f12;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ay-bundle-pricebox {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: auto;
}
.ay-bundle-row-normal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
}
.ay-bundle-row-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.ay-bundle-label-total {
  font-size: 14px;
  font-weight: 700;
  color: #065f46;
}
.ay-bundle-val-total {
  font-size: 20px;
  font-weight: 800;
  color: #047857;
}
.ay-bundle-row-savings {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  border-top: 1px dashed #6ee7b7;
  font-size: 12px;
  font-weight: 700;
  color: #d97706;
}
.ay-bundle-add-btn {
  width: 100%;
  margin-top: 14px;
  padding: 12px 16px;
  background: #0f172a;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.ay-bundle-add-btn:hover {
  background: #1e293b;
  transform: translateY(-1px);
}
.ay-analytics-popularity-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(220, 38, 38, 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.ay-analytics-views-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
}