/* Styling for content the panel's editor produces (pages, blog posts) and for
   the DB-driven banner strips. Kept in its own file so the theme's own
   stylesheets stay untouched, and written to inherit the theme's typography. */

.cms-content > *:first-child {
  margin-top: 0;
}
.cms-content h2 {
  font-size: 28px;
  line-height: 1.3;
  margin: 32px 0 12px;
}
.cms-content h3 {
  font-size: 22px;
  line-height: 1.3;
  margin: 26px 0 10px;
}
.cms-content p {
  margin-bottom: 16px;
}
.cms-content ul,
.cms-content ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
/* ⚠️ Tema `li { list-style-type: none }` diyor ve bu, listeye verilen
   `list-style` değerini eziyor — işareti li'nin kendisine yazmak şart.
   Aksi hâlde aktarılan yazılardaki numaralı listeler numarasız çıkıyor. */
.cms-content ul {
  list-style: disc;
}
.cms-content ul > li {
  list-style-type: disc;
}
.cms-content ol {
  list-style: decimal;
}
.cms-content ol > li {
  list-style-type: decimal;
}
.cms-content li {
  margin-bottom: 6px;
}
.cms-content blockquote {
  margin: 0 0 20px;
  padding: 4px 0 4px 18px;
  border-left: 3px solid currentColor;
  opacity: 0.85;
}
.cms-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 8px 0 20px;
}
.cms-content a {
  text-decoration: underline;
}
.cms-content table {
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}
.cms-content th,
.cms-content td {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 8px 12px;
  text-align: left;
}

/* --- ozbaymobilya.com'dan aktarılan yazılar ------------------------------- */
/* Kaynak WordPress'te "Easy Table of Contents" eklentisinin kendi CSS'i vardı;
   burada eklenti yok, işaretleme sadeleştirilip biçimlendirmesi buraya taşındı.
   Bkz. tools/blog-import.mjs. */
.cms-toc {
  margin: 0 0 28px;
  padding: 18px 22px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.02);
}
.cms-toc-title {
  margin: 0 0 10px;
  font-weight: 600;
}
.cms-toc ul {
  margin: 0;
  padding-left: 20px;
  list-style: decimal;
}
.cms-toc ul > li {
  list-style-type: decimal;
}
.cms-toc ul ul {
  margin-top: 6px;
}
.cms-toc ul ul > li {
  list-style-type: lower-alpha;
}
.cms-toc li {
  margin-bottom: 6px;
}
.cms-toc a {
  text-decoration: none;
}
.cms-toc a:hover {
  text-decoration: underline;
}

/* WordPress'in `.wp-caption` sarmalayıcısı figure/figcaption'a çevriliyor;
   kaynaktaki sabit piksel genişliği atıldığı için biçim buradan geliyor. */
.cms-figure {
  margin: 0 0 24px;
}
.cms-figure img {
  margin-bottom: 8px;
}
.cms-figure figcaption {
  font-size: 14px;
  opacity: 0.7;
}

/* Gömülü video (YouTube): kaynakta sabit 500x281 idi, dar ekranda taşıyordu. */
.cms-embed {
  position: relative;
  margin: 0 0 24px;
  padding-top: 56.25%;
}
.cms-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
}

/* Banner strip — one image per row on phones, side by side from tablet up. */
.cms-banners {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .cms-banners.cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .cms-banners.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
.cms-banner {
  display: block;
  overflow: hidden;
  border-radius: 8px;
}
.cms-banner img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}
.cms-banner:hover img {
  transform: scale(1.03);
}
/* Desktop / mobile artwork swap. */
.cms-banner .art-mobile,
.cms-slide .art-mobile {
  display: none;
}
@media (max-width: 767px) {
  .cms-banner.has-mobile .art-desktop,
  .cms-slide.has-mobile .art-desktop {
    display: none;
  }
  .cms-banner.has-mobile .art-mobile,
  .cms-slide.has-mobile .art-mobile {
    display: block;
  }
}

/* Product parts module ("ürün parça modülü") on the single product page.
   Reuses the theme's quantity widget, so only the list frame is styled here. */
.tf-product-info-parts .parts-list {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  overflow: hidden;
}
.tf-product-info-parts .parts-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.tf-product-info-parts .parts-item:last-child {
  border-bottom: 0;
}
.tf-product-info-parts .parts-name {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.tf-product-info-parts .parts-price {
  font-size: 13px;
}
.tf-product-info-parts .parts-total {
  min-width: 84px;
  text-align: right;
  font-weight: 600;
}
.tf-product-info-parts .parts-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0, 0, 0, 0.15);
  font-weight: 600;
}
.tf-product-info-parts .parts-summary-price {
  font-size: 20px;
}
@media (max-width: 575px) {
  .tf-product-info-parts .parts-item {
    flex-wrap: wrap;
  }
  .tf-product-info-parts .parts-total {
    min-width: 0;
  }
}

/* Brand colour for the strip above the header — the theme ships it near-black
   (--Onsurface). The light variants (.bg_white) keep the theme's own colour. */
.tf-topbar:not(.bg_white) {
  background-color: #141313;
}

/* Üst şerit: yan bağlantılar duyuruyla dikey ortalı ===
   Şerit üç Bootstrap kolonundan oluşuyor (sol boş · ortada kayan duyuru · sağda
   Hakkımızda/İletişim/Mağazalarımız). Kolonlar birbirini yükseklikte takip
   ediyor ama içlerindeki `.topbar-right` kutusu kendi içeriği kadar yüksek
   kalıp kolonun TEPESİNE yapışıyordu. 1920px'te duyuru tek satıra sığdığı için
   fark görünmüyor; 1366/1440px'te ortadaki kolon dar kaldığından duyuru iki
   satıra düşüyor, şerit büyüyor ve sağdaki bağlantılar yukarıda asılı kalıyordu.
   Kolonların kendisi ortalanıyor — hem sağ hem (ileride doldurulursa) sol kutu
   için geçerli. */
.tf-topbar > .container-full > .row {
  align-items: center;
}

/* The Özbay wordmark is far wider than the mark the theme shipped (8.6:1 vs
   4:1), so it is sized on width and left to find its own height. The theme
   pins .logo-header to 110px under 991px, which would squash it. */
.logo-header .logo {
  /* 3,17:1 logoda 215px → ~68px yükseklik. Eski 350px, bu oranda 110px ederdi
     ve 90px'lik başlığı taşırırdı (bkz. 1200px üstü clamp'teki oran geçmişi). */
  width: 215px;
  height: auto;
  /* Tema `img { max-width: 100% }` uyguluyor; logo `col-xl-2` (252px) içinde
     olduğu için 350px isteği 222px'e kırpılıyordu. Kolon aşağıda genişletiliyor,
     bu yüzden kırpma da kaldırılıyor. */
  max-width: none;
}
/* Logo kolonu 380px'e çıkar (350px logo + pay), yanındaki iki kolon —menü ve
   sağdaki ikonlar— kalan yeri eşit paylaşır; böylece logo ortada kalır.
   Bootstrap'in sabit yüzdeleri korunsaydı satır toplamı %100'ü aşıp taşardı. */
@media (min-width: 1200px) {
  .wrapper-header > .col-xl-2 {
    flex: 0 0 380px;
    width: 380px;
    max-width: 380px;
  }
  .wrapper-header > .col-xl-5 {
    flex: 1 1 0;
    width: auto;
    max-width: none;
  }
}
@media (max-width: 991px) {
  .logo-header {
    width: auto;
  }
  /* Telefonda 150px'te kelime-markası okunmayacak kadar küçük kalıyordu
     (8,6:1 oran → yalnızca 17px yükseklik). Bugünkü logo 3,17:1 olduğu için
     aynı okunurluk daha dar genişlikle sağlanıyor: 175px → ~55px yükseklik.
     360px'lik ekranda hamburger ve sepet simgesiyle çakışmadığı ölçüldü. */
  .logo-header .logo {
    width: 175px;
  }
}

/* === Ürün özellik tablosu (admin panelde girilen satırlar) === */
.urun-ozellik-tablo {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
}
.urun-ozellik-tablo th,
.urun-ozellik-tablo td {
  border: 1px solid #e6e6e6;
  padding: 10px 14px;
  vertical-align: top;
  text-align: left;
  font-size: 15px;
  line-height: 1.6;
}
.urun-ozellik-tablo th {
  width: 34%;
  white-space: normal;
  font-weight: 600;
  color: #1c1c1c;
  background: #fafafa;
}

/* Açıklama sekmesi tek sütun (2026-08-10): şablon `.right` (açıklama) ile
   `.left`i (özellik tablosu) yan yana koyuyordu. Katalogdaki ürünlerin çoğunda
   açıklama boş olduğu için sol yarı bomboş kalıp tabloyu sağa itiyordu.
   Artık ikisi de tam genişlikte ve sola yaslı. */
.tab-description {
  display: block;
}

/* === Ürün videosu düğmesi ve penceresi === */
.urun-video-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #141313;
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-weight: 600;
  padding: 12px 22px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: background 0.25s ease;
}
.urun-video-btn:hover { background: #8d1839; color: #fff; }
.urun-video-ikon { font-size: 12px; line-height: 1; }
.urun-video-perde {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.urun-video-kutu {
  position: relative;
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.urun-video-kutu.dikey {
  width: min(420px, 100%);
  aspect-ratio: 9 / 16;
}
.urun-video-kutu iframe { width: 100%; height: 100%; border: 0; display: block; }
.urun-video-kapat {
  position: absolute;
  top: -42px;
  right: 0;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

/* Teslimat süresi satırı */
.urun-teslimat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  margin-bottom: 14px;
}
.urun-teslimat strong { color: #1c1c1c; }

/* === Takım içeriği (parça) modülü === */
.takim-icerigi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
.takim-liste {
  background: #f7f7f7;
  border-radius: 6px;
  padding: 10px;
}
.takim-kart {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  background: #fff;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 10px;
}
.takim-kart:last-child { margin-bottom: 0; }
.takim-kart-gorsel {
  width: 130px;
  height: 86px;
  border-radius: 4px;
  overflow: hidden;
  background: #efefef;
}
.takim-kart-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.takim-kart-bilgi a,
.takim-kart-bilgi span { display: block; }
.takim-kart-bilgi a { color: #1c1c1c; font-weight: 500; }
.takim-kart-bilgi a:hover { color: #141313; }
.takim-kart-fiyat { color: #6b6b6b; margin-top: 4px; }
.takim-kart-adet {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  overflow: hidden;
}
.takim-kart-adet button {
  width: 38px;
  height: 34px;
  border: 0;
  background: #fff;
  color: #1c1c1c;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.takim-kart-adet button:hover { background: #f2f2f2; }
.takim-kart-adet input {
  width: 64px;
  min-width: 64px;
  padding: 0 6px;
  height: 34px;
  border: 0;
  border-left: 1px solid #e3e3e3;
  border-right: 1px solid #e3e3e3;
  text-align: center;
  font-size: 15px;
}

/* Takım özeti kutusu (sekmede ve satın alma kutusunda) */
.takim-ozet {
  border: 1px solid #141313;
  border-radius: 4px;
  padding: 18px 20px 20px;
}
.takim-ozet-baslik { margin: 0 0 14px; font-size: 18px; }
.takim-ozet-tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.takim-ozet-tablo th,
.takim-ozet-tablo td { border: 1px solid #ededed; padding: 7px 10px; text-align: left; }
.takim-ozet-tablo thead th { background: #fafafa; font-weight: 600; color: #4a4a4a; }
.takim-ozet-tablo .orta { text-align: center; }
.takim-ozet-tablo .sag { text-align: right; white-space: nowrap; }
.takim-ozet-tablo .takim-bos { text-align: center; color: #8a8a8a; }
.takim-toplam { text-align: right; margin: 12px 0 14px; font-size: 14px; }
.takim-toplam strong { color: #1c1c1c; }
.takim-sepet-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1c1c1c;
  color: #fff;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 14px;
}
.takim-sepet-btn:hover { background: #141313; color: #fff; }
.takim-ozet-kutu .takim-ozet-tablo { font-size: 13px; }

@media (max-width: 991px) {
  .takim-icerigi { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
  .takim-kart { grid-template-columns: 90px minmax(0, 1fr); row-gap: 12px; }
  .takim-kart-gorsel { width: 90px; height: 70px; }
  .takim-kart-adet { grid-column: 1 / -1; justify-self: start; }
}

/* === Ürün sayfası fiyat ve butonlar (marka rengi) === */
.tf-product-info-price .price-on-sale {
  color: #141313;
  font-size: 36px;
  /* Kanit Medium — bu kural aşağıdaki fiyat fontu kuralından daha belirgin
     (0,2,0 > 0,1,0) olduğu için ağırlık burada da yazılmalı. */
  font-weight: 500;
  line-height: 1.2;
}
/* "Sepete ekle" (siyah) — üzerine gelince marka rengi */
.tf-product-info-by-btn .tf-btn.btn-onsurface:hover,
.tf-sticky-btn-atc .tf-btn.btn-onsurface:hover {
  background-color: #141313;
  border-color: #141313;
  color: #fff;
}
/* "Hemen satın al" — marka rengi, üzerine gelince koyu */
.tf-product-info-by-btn ~ a.tf-btn.btn-primary,
.tf-product-info-choose-option a.tf-btn.btn-primary {
  background-color: #141313;
  border-color: #141313;
  color: #fff;
}
.tf-product-info-by-btn ~ a.tf-btn.btn-primary:hover,
.tf-product-info-choose-option a.tf-btn.btn-primary:hover {
  background-color: #181818;
  border-color: #181818;
  color: #fff;
}

/* === Ürün görseli oranı: mağaza görselleri 1240x776 (≈16:10) ===
   Tema kare kırpma varsayıyordu; oranı sabitleyip kırpmayı kaldırıyoruz. */
.tf-product-stacked .item img,
.tf-product-media-main .item img {
  aspect-ratio: 1240 / 776;
  object-fit: cover;
  width: 100%;
  height: auto;
}
/* Listeleme kartları da aynı oranda */
.card-product .card-product-wrapper .image-wrap,
.card-product .card-product-wrapper .image-wrap img {
  aspect-ratio: 1240 / 776;
}
.card-product .card-product-wrapper .image-wrap img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
/* Büyütülmüş görünüm (photoswipe) görseli kırpmadan sığdırsın */
.pswp__img {
  object-fit: contain;
}

/* === Büyüteç (zoom) penceresi: ürün görselleriyle aynı oran (1240x776) ===
   Tema 520x520 kare pencere kullanıyordu; küçük ızgara görsellerinde de
   kare açıldığı için görüntü sıkışıyordu. */
.tf-zoom-main .drift-zoom-pane {
  height: auto;
  max-width: 620px;
  aspect-ratio: 1240 / 776;
}

/* Ürün galerisi: temanın kendi iki sütunlu düzeni kullanılıyor — ilk görsel
   tam genişlik "ana görsel" (styles.css'te `grid-column: 1/3`), altındakiler
   ikişerli. Hepsi yukarıdaki 1240x776 oranını koruduğu için hiçbiri kırpılmaz.
   (Daha önce burada tek sütuna indiren bir override vardı; kaldırıldı.) */

/* === Ürün Boyutları sekmesindeki modül ölçü tablosu === */
/* Özellik tablosunu miras alır; oradaki "etiket sütunu %34" kuralı çok sütunlu
   boyut tablosunda yanlış olduğu için sıfırlanır. */
.urun-boyut-tablo th {
  width: auto;
}
.urun-boyut-tablo thead th {
  background: #141313;
  color: #fff;
  text-align: center;
  font-weight: 600;
}
.urun-boyut-tablo tbody td {
  text-align: center;
}

/* === Mağaza listeleme: sunucu tarafı filtre/sıralama/sayfalama === */
/* Sıralama seçenekleri artık <a>; temanın .select-item stilleri div'e göre
   yazıldığı için bağlantı görünümü sıfırlanıyor. */
.tf-dropdown-sort .dropdown-menu a.select-item {
  display: block;
  color: inherit;
  text-decoration: none;
}
/* "Sadece indirimdekiler" bir bağlantı oldu; etkinken marka rengiyle işaretlenir. */
a.shop-sale-text {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.shop-sale-text.active,
a.shop-sale-text.active .icon {
  color: #141313;
}
/* Sonuç sayacı her zaman görünür; tek başınayken sağdaki ayraç çizgisi gereksiz. */
.meta-filter-shop .count-text.no-divider {
  padding-right: 0;
}
.meta-filter-shop .count-text.no-divider::after {
  display: none;
}
.meta-filter-shop .filter-tag .remove-tag {
  text-decoration: none;
}
/* Sayfalama: "…" atlama işareti tıklanabilir değil. */
.wg-pagination li > div.pagination-item {
  cursor: default;
}

/* Filtre panelindeki fiyat aralığı — noUiSlider yerine iki alan + Uygula. */
.facet-price .price-input {
  width: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 22px;
  color: var(--main);
  background: #fff;
}
.facet-price .price-input:focus {
  outline: none;
  border-color: #141313;
}
.facet-price .price-apply {
  margin-top: 16px;
  width: 100%;
  justify-content: center;
  background-color: #141313;
  color: #fff;
  border: 0;
}
.facet-price .price-apply:hover {
  background-color: #181818;
  color: #fff;
}
/* Aktarılan katalogda kategori ağacı neredeyse düz (100'e yakın kök düğüm),
   bu yüzden liste panelin içinde kendi içinde kayar. */
.facet-categories .facet-content {
  max-height: 460px;
  overflow-y: auto;
}

/* === Ürün ANA fiyatı yazı tipi: Kanit Medium 500 ===
   Yalnızca ürün sayfasındaki büyük fiyat. Listeleme kartları, sepet, ödeme,
   takım özeti ve üstü çizili eski fiyat dahil diğer tüm fiyatlar temanın
   Marcellus'unda kalır. Font yerelde barındırılıyor (fonts.gstatic.com'a istek
   YOK): sadece 500 ağırlık, latin + latin-ext. */
@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/kanit-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/kanit-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Sadece ürün sayfasının ana fiyatı. `.price-on-sale` sepet tablosunda da
   kullanılıyor (`cart-price text-button price-on-sale`), bu yüzden yüklem satın
   alma kutusuna sabitlendi. */
.tf-product-info-price .price-on-sale {
  font-family: "Kanit", sans-serif;
}

/* === Sayfa genişlikleri ===
   Tema tüm sayfalarda `.container`ı 1320px'e sabitliyor. İki istisna:
   1) Listeleme sayfaları (kategori, mağaza, arama) tam genişlik — ürün ızgarası
      ekranı kullansın.
   2) Ürün sayfası 1440px, sağdaki bilgi kolonu sabit 615px, galeri kolonu kalan
      genişliği alsın.
   Sayfa tipi, içindeki karakteristik blokla ayırt ediliyor (`:has()`) — ızgara
   `.container > .wrapper-control-shop > .wrapper-shop` yolunda, arada .row YOK, bu
   yüzden yüklem doğrudan torun araması yapıyor. Böylece
   üretilen 65 sayfaya sınıf eklemek gerekmiyor ve header/footer etkilenmiyor. */
.container:has(.wrapper-shop),
.container:has(> .tf-shop-control) {
  max-width: 1920px;
}

/* Ürün sayfasının tüm içerik kapsayıcıları (ekmek kırıntısı, galeri+bilgi,
   sekmeler, benzer ürünler). Sınıf convert sırasında ekleniyor — bkz.
   DERIVED_PAGES product mutate. Footer/header ayrı blok olduğu için 1320'de
   kalır. */
.urun-genis {
  max-width: 1440px;
}
/* Bilgi kolonu sabit, galeri kolonu kalan alan. Bootstrap'in .col-md-6
   yüzdelerini geçersiz kılıyoruz (gutter olduğu gibi kalıyor). */
@media (min-width: 768px) {
  .urun-genis:has(.tf-product-info-wrap) > .row > .col-md-6:last-child {
    flex: 0 0 auto;
    width: 615px;
    max-width: 615px;
  }
  .urun-genis:has(.tf-product-info-wrap) > .row > .col-md-6:first-child {
    flex: 1 1 auto;
    width: auto;
    max-width: calc(100% - 615px);
  }
}

/* Tema `.slider-scroll`u 615px'e sabitliyor (galeri eskiden yarım kolondu).
   Galeri kolonu artık kalan tüm genişliği aldığı için serbest bırakılıyor. */
.urun-genis:has(.tf-product-info-wrap) .slider-scroll {
  max-width: 100%;
}

/* Listeleme sayfalarında (kategori, mağaza, arama) ürün kartı çerçevesi.
   Yalnızca listeleme ızgarasındaki kartlara uygulanır — ana sayfa satırları ve
   slider'lar temanın çerçevesiz görünümünde kalır. Görsel kartın üst köşelerine
   dayandığı için içerik alanına hafif yan boşluk verilir. */
.container:has(.wrapper-shop) .card-product {
  border: 1px solid #e5e9ee;
  border-radius: 8px;
  overflow: hidden;
}
.container:has(.wrapper-shop) .card-product .card-product-info {
  padding: 0 14px 14px;
}

/* === Ürün galerisi: "tüm görselleri gör" === */
/* İlk görsel tam genişlik + ikişerli 6 görsel açıkta; kalanı gizli. Gizleme
   CSS ile yapılıyor (bkz. StackedGallery) — anchor'lar DOM'da kalmalı, yoksa
   PhotoSwipe lightbox'ı onları tanımıyor. 8. çocuk = 1 ana + 6 ikişerli sonrası. */
.tf-product-stacked:not(.galeri-hepsi) > .item:nth-child(n + 8) {
  display: none;
}
.galeri-daha {
  /* Izgaranin son elemani: iki sutunu birden kaplar. */
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 20px;
  padding: 12px 20px;
  background: #fff;
  border: 1px solid #e5e9ee;
  border-radius: 8px;
  color: #1c1c1c;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.galeri-daha:hover {
  border-color: #141313;
  color: #141313;
}
.galeri-daha .icon {
  font-size: 11px;
  transition: transform 0.25s ease;
}
.galeri-daha.acik .icon {
  transform: rotate(180deg);
}

/* Küçük resim şeridi de ürün görseli oranında (1240x776) — tema kare kırpıyor.
   Ana görsel oranı yukarıda zaten tanımlı. */
.tf-product-media-thumbs .item img {
  aspect-ratio: 1240 / 776;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* Tema `.thumbs-slider`ı 615px'e sabitliyor (galeri eskiden yarım kolondu);
   galeri kolonu artık kalan tüm genişliği aldığı için serbest bırakılıyor. */
.urun-genis .thumbs-slider {
  max-width: 100%;
}

/* === Küçük resim şeridi okları ===
   zoom.js ana swiper'ın navigasyonunu `.thumbs-next` / `.thumbs-prev`e bağlıyor;
   tema bu düğmeleri hiçbir sayfada basmadığı için markup bizde. Ana görsel ile
   şerit bağlı olduğundan ok, hem görseli değiştirir hem şeridi kaydırır —
   15 fotoğraflı üründe 7'den sonrasına böyle ulaşılıyor. */

.ana-gorsel-sar .nav-buyuk {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e5e9ee;
  color: #1c1c1c;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.ana-gorsel-sar .nav-buyuk:hover {
  background: #141313;
  border-color: #141313;
  color: #fff;
}
.ana-gorsel-sar .thumbs-prev {
  left: 16px;
}
.ana-gorsel-sar .thumbs-next {
  right: 16px;
}
/* Swiper uçlara gelince bu sınıfı ekliyor. */
.ana-gorsel-sar .nav-buyuk.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

/* Ana görsel üstte, şerit altta: temanın `order: 1` kuralı şeride ait, bizim
   sarmalayıcımız (`.ana-gorsel-sar`) varsayılan 0'da kalıyor. */
.thumbs-bottom .thumbs-slider .ana-gorsel-sar {
  order: 0;
  width: 100%;
}
.ana-gorsel-sar {
  position: relative;
}

/* === Ana sayfa kategori daireleri ===
   Ürün fotoğrafları 16:10; tema yalnızca köşe yuvarlatması verdiği için görsel
   elips görünüyordu. Kare kutu + tam yuvarlatma + cover ile daire oluyor. */
.categories-item.style-2 .img-style {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}
.categories-item.style-2 .img-style a,
.categories-item.style-2 .img-style img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Bu bölüm 1440px genişlikte ve ortalı. ⚠️ Satır `.container` DEĞİL
   `.container-full` içinde olduğu için genişlik şeridin kendisine veriliyor. */
.wrap-categories.style-2 {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
/* Daireler yarı boyutta: tema `.wrap-categories.style-2 .categories-item`e
   234px veriyor (bizde 190px'e düşüyordu) ve 10 daire sayfayı kaplıyordu.
   Yüklem temanınkinden daha belirgin olmak zorunda. */
.wrap-categories.style-2 .categories-item.style-2 {
  width: 95px;
  flex: 0 0 auto;
}
/* Marka renkli çerçeve, içte ince beyaz boşlukla (mağazanın kendi sitesindeki
   görünüm). */
.categories-item.style-2 .img-style {
  border: 2px solid #141313;
  padding: 4px;
  background: #fff;
}
.categories-item.style-2 .img-style img {
  border-radius: 50%;
}
/* Kategori adı tek satırda: kart 95px ama ad daha geniş olabilir; taşma
   ortalanmış şekilde dışarı çıkar, komşuya değmiyor (95 + 30px boşluk = 125px
   adım, en uzun ad ~105px). */
.categories-item.style-2 .title {
  font-size: 13px;
  white-space: nowrap;
}
.categories-item.style-2 .content {
  overflow: visible;
}

/* --- Mobil (2026-08-09) -------------------------------------------------- */
/* ⚠️ Tema 767px altında `width: 150px !important` veriyor (styles.css ~12008),
   yani yukarıdaki 95px mobilde hiç uygulanmıyordu ve daireler ekranı yiyordu.
   %40 küçültme: 150 → 90px. `!important` mecburi, temanınkini yenmek için. */
@media (max-width: 767px) {
  .wrap-categories.style-2 .categories-item.style-2 {
    width: 90px !important;
  }
  .wrap-categories.style-2 .categories-item.style-2 .img-style {
    width: 90px;
  }
  .wrap-categories.style-2 {
    gap: 18px;
  }
  .categories-item.style-2 .title {
    font-size: 12px;
  }
}

/* === Sayfa başlığı şeridinin arka planı (2026-08-09) ===
   Tema bu şeridi jquery.parallax ile basıyor ve görseli `data-image-src`ten
   alıyor — ama ThemeForest paketindeki `page-title-*.jpg` dosyalarının HEPSİ
   düz #181818 dolgu (lisanslı fotoğraflar pakete konmuyor). Şeridin siyah
   görünmesinin sebebi buydu; parallax çalışıyordu, gösterecek görsel yoktu.
   Görsel temanın kendi canlı demosundan alınıp WebP'ye çevrildi
   (`mobilya-page-bg.webp`, 1920×420, 53 KB) ve doğrudan arka plana yazıldı —
   temanın Next.js demosu da tam olarak böyle yapıyor.
   Dekoratif bir şerit olduğu için `<img>` değil arka plan: anlamsız `alt`
   metniyle sayfaya gürültü eklemiyor. */
.page-title .paralaximg {
  background-image: url("/images/page-title/mobilya-page-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Sayfa adı ve ekmek kırıntısı BEYAZ; görselin sol tarafı açık ahşap olduğu
   için üzerine karartma olmadan okunmuyordu. Soldan sağa açılan geçiş: yazının
   olduğu yer koyu, görselin sağı neredeyse temiz kalıyor.
   `style-2` hariç — blog yazılarının kapak şeridinde üstte yazı yok
   (başlık aşağıdaki beyaz kartta), orada karartmaya gerek yok. */
.page-title:not(.style-2) .paralaximg {
  position: relative;
}
.page-title:not(.style-2) .paralaximg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.1) 100%);
}

/* === Blog yazısının kapak şeridi (2026-08-09) ===
   Görsel `paralaximg`in arka planına doğrudan yazılıyor (bkz. convert.mjs
   `blog-cover` slotu); ölçekleme burada. Arka plan rengi görsel yüklenene
   kadar ve dar/uzun görsellerde boşlukları kapatıyor. */
.page-title .paralaximg.blog-kapak {
  background-color: #181818;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* === "Güvenli ödeme" ikonları — mobil (2026-08-09) ===
   Tema ikonları tek satırda, sarmasız (`flex-wrap` yok) diziyor ve 50px veriyor.
   Dar ekranda satır sığmayınca ikonlar eziliyordu: 360px'te 45px, 320px'te 38px'e
   inip okunmaz hâle geliyor, sondaki kart ekranın kenarına yapışıyordu.
   Şerit tam genişliğe alınıp sarma açıldı: ikonlar 50px kalıyor, sığmayan alt
   satıra iniyor. */
@media (max-width: 767px) {
  .tf-product-info-list .tf-product-info-guranteed .tf-payment {
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }
  .tf-product-info-list .tf-product-info-guranteed a img {
    width: 50px;
  }
}

/* === Duyuru şeridi: yazı dikeyde ortalı (2026-08-09) ===
   Swiper tüm slaytları en uzunun boyuna geriyor. Telefonda "Peşin Fiyatına 18 Ay
   Taksitle…" iki satıra sarınca şerit 2 satır yüksekliğinde kalıyor; tek satırlık
   "Düğün Paketi…" mesajı ise üste yapışıp altında boşluk bırakıyordu — sağ/sol
   oklar dikeyde ortalı olduğu için yazı onlarla hizasızdı. */
/* ⚠️ Hizalama SLAYTIN İÇİNDE değil, kayan şeridin kendisinde olmalı: swiper
   şeridi en uzun slaytın boyunda (2 satır = 44,8px) ama kısa slayt kendi
   boyunda (1 satır = 22,4px) kalıp şeridin ÜSTÜNE yapışıyor. Slayt içine
   `align-items` vermek bir işe yaramıyor, çünkü paragraf zaten slaytı dolduruyor.
   `.swiper-wrapper`a verilince kısa slayt dikeyde ortalanıyor. */
.tf-sw-top_bar .swiper-wrapper {
  align-items: center;
}
.tf-sw-top_bar .swiper-slide p {
  margin-bottom: 0;
  text-align: center;
}

/* === Ürün ızgaraları mobilde tek sütun (2026-08-09) ===
   Tema telefonda her ürün listesini ikişerli basıyor: `.tf-grid-layout.tf-col-2`
   kuralı + `shop.js` içindeki `swLayoutShop()` 767px altında ızgaraya zorla
   `tf-col-2` sınıfını veriyor. Sınıf JS ile değiştiği için kural sınıfa değil
   kapsayıcının kendisine yazılıyor; cms.css styles.css'ten SONRA yüklendiği
   için aynı ağırlıkta bile kazanıyor.
     .wrapper-shop        → mağaza / kategori listelemesi (#gridLayout)
     .lg-col-4            → ana sayfa "Sizin için seçtiklerimiz"
     .lg-col-3.xl-col-4   → arama sonucu sayfası + arama açılır kutusu
   Blog ızgarası (`md-col-3`) bilerek dışarıda. */
@media (max-width: 767px) {
  .tf-grid-layout.wrapper-shop,
  .tf-grid-layout.lg-col-4,
  .tf-grid-layout.lg-col-3.xl-col-4 {
    grid-template-columns: 1fr;
  }
}

/* === Ana sayfa slider'ı — mobilde tam görsel ===
   Tema 767px altında `.tf-slideshow .wrap-slider`a sabit 400px yükseklik veriyor
   ve görsel `object-fit: cover` olduğu için 1330×702'lik kampanya görselleri
   soldan sağdan kırpılıyordu (390px'lik ekranda genişliğin ~%47'si gidiyordu).
   Yükseklik görselin oranından gelsin: kırpma yok, tamamı görünüyor. */
@media (max-width: 767px) {
  .tf-slideshow .wrap-slider,
  .tf-slideshow .wrap-slider .img-style {
    height: auto;
  }
  .tf-slideshow .wrap-slider .img-style img {
    height: auto;
    object-fit: contain;
  }
}

/* Listeleme/kategori kartlarındaki fiyat da ana fiyatla aynı yazı tipinde. */
.card-product .price,
.card-product .price .old-price,
.card-product .price .current-price {
  font-family: "Kanit", sans-serif;
  font-weight: 500;
}

/* Kategori/mağaza kartlarındaki fiyat: ürün sayfasının fiyatıyla aynı yazı tipi,
   rengi ve 24px büyüklük. Üstü çizili eski fiyat küçük ve soluk kalıyor. */
.card-product .price .current-price {
  color: #141313;
  font-size: 24px;
  line-height: 1.25;
}

/* Galerinin altındaki kampanya görseli: kolonun tamamını kaplar, oranı korunur. */
.urun-kampanya-banner {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 24px;
  border-radius: 8px;
}

/* Üst şerit duyuru metni: tema `.text-caption-1` ile 14px veriyor. Yalnızca
   duyuru şeridinde 16px — aynı sınıf sitenin başka yerlerinde de kullanıldığı
   için yüklem şeride sabitlendi. */
.wrapper-slider-topbar .text-caption-1 {
  font-size: 16px;
  line-height: 1.4;
}

/* Boş yıldız: tema yalnızca dolu yıldız ikonu veriyor, puanı göstermek için
   kalanları soluklaştırıyoruz. */
.icon-star.star-bos {
  opacity: 0.25;
}
/* Yorum kartındaki yıldız satırı, ad ve tarihin altında. */
.reply-comment-item .user .list-star {
  margin-top: 4px;
  font-size: 12px;
}

/* Yıldızların yanındaki "(N yorum)" bağlantısı — metin görünümünü korur. */
.yorum-baglantisi {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.yorum-baglantisi:hover {
  color: #141313;
  text-decoration: underline;
}

/* Ana sayfadaki kategori daireleri bölümünün boşlukları (tema üstte de altta da
   100px veriyor, dairelerin çevresi bomboş kalıyordu — müşteri isteğiyle
   daraltıldı, 2026-08-19). Yüklem bölümün içeriğine bağlı — `.flat-spacing-2`
   başka sayfalarda da var.
     • üstte  100px → 48px  (afişle daireler arası)
     • altta   40px         (çizgi ile H1 arası; daha önce daraltılmıştı)
   Etiketlerin altındaki 80px'lik boşluk aşağıda, iç kapsayıcıda daraltılıyor.
   ⚠️ Mobil değerler dosyanın altındaki 767px bloğunda (24px) ve orası daha
   sonra geldiği için burayı ezer — mobil görünüm değişmiyor. */
section.flat-spacing-2:has(.wrap-categories) {
  padding-top: 48px;
  padding-bottom: 40px;
}
/* Daire etiketleri ile alttaki gri çizgi arası (tema 80px). */
.line-bottom-container:has(.wrap-categories) {
  padding-bottom: 40px;
}

/* === Hero slider: yalnızca ortadaki slayt net ===
   Tema slider'ı ortalanmış (`data-centered`) çalışıyor ve yanlardaki slaytların
   bir kısmı görünüyor; kampanya görselleri metinli olduğu için üç farklı yazı
   aynı anda okunup karışıyordu. Yandakiler karartılıp bulanıklaştırıldı, ortadaki
   net kalıyor. Swiper ortadaki slayta `.swiper-slide-active` verdiği için slayt
   değiştikçe efekt kendiliğinden takip eder. */
.tf-sw-slideshow .swiper-slide {
  /* Yandaki slaytların üzerinde siyah örtü var (Photoshop'ta: siyah dikdörtgen,
     Multiply). Saf siyahla Multiply %N opaklıkta sonuç tabanın %(100-N)'i olduğu
     için ayrı örtü katmanı yerine `brightness()` kullanılıyor:
     brightness(x) === siyah Multiply %(100-100x) opaklık.
     %85 ve %90 denendi, ikisinde de alttaki görsel seçilmiyordu — örtü %60'a
     indirildi, yani görselin %40'ı geçiyor: karartılmış ama okunur.
     Bulanıklık İSTENMİYOR. */
  filter: brightness(0.4);
  opacity: 1;
  transition: filter 0.45s ease;
}
.tf-sw-slideshow .swiper-slide-active {
  filter: none;
  opacity: 1;
}

/* Ana sayfa: "Sizin için seçtiklerimiz" altındaki tam genişlik teslimat afişi.
   `.container` dışında durduğu için kenardan kenara uzanıyor; görsel 1920×550,
   oranı korunarak ölçekleniyor (yükseklik sabitlenmiyor ki kırpma olmasın). */
.tam-genislik-banner {
  margin: 0 0 60px;
}
.tam-genislik-banner img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 767px) {
  .tam-genislik-banner {
    margin-bottom: 40px;
  }
  /* Mobilde afişler ayrı, dikey kurgulu dosyalar (bkz. <picture>/<source>).
     `<img>` etiketindeki ölçü masaüstü görselinin — o oranla yer ayrılırsa
     görsel yüklendiğinde sayfa zıplar.

     ⚠️ Oran artık dosya adına göre DEĞİL: afişler panelden yönetiliyor
     (Bannerlar) ve yüklenen dosyanın adı da ölçüsü de değişebiliyor.
     `TamGenislikBanner` mobil görselin gerçek ölçüsünü dosyadan okuyup
     `--mobil-oran` değişkenine yazıyor; ölçü okunamazsa kural devre dışı
     kalır (auto) ve davranış eskisine döner. */
  .tam-genislik-banner img {
    aspect-ratio: var(--mobil-oran, auto);
  }
}

/* === Ürün kartında ikinci görsele geçiş kapalı (2026-08-09) ===
   Tema, imleç kartın üstündeyken ilk görseli saydamlaştırıp ikinci fotoğrafı
   (`.img-hover`) gösteriyordu. Müşteri ilk görselin hiç değişmemesini istedi.
   İki kural birden gerekiyor: ikinci görseli gizlemek yetmez, temanın ilk
   görsele verdiği `opacity: 0` da geri alınmalı — yoksa üzerine gelince kart
   bomboş kalır. */
.card-product .card-product-wrapper:hover .image-wrap .img-product {
  opacity: 1;
}
.card-product .card-product-wrapper .img-hover,
.card-product .card-product-wrapper:hover .image-wrap .img-hover {
  display: none;
}

/* === Ana sayfa "Blogdan Seçmeler" — sağdaki iki kart (2026-08-09) ===
   Temanın demo görselleri kareye yakındı, bizim yazı kapaklarımız geniş (16:9);
   `height:auto` ile 232×239'luk kutunun ancak yarısını dolduruyor, altında boşluk
   bırakıyorlardı. Kutuyu doldursunlar (kırpma `cover` ile).
   Özetler de temanınkinden çok uzun olduğu için kartlar uzayıp sağ sütun soldaki
   görselden neredeyse iki kat yüksek kalıyordu — üç satıra kırpıldı. */
.section-news-insight .relatest-post-item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-news-insight .relatest-post-item .content p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === Mağaza kartlarının çerçevesi === */
.location-item {
  border: 1px solid #e5e9ee;
  border-radius: 8px;
  overflow: hidden;
  padding-bottom: 24px;
}
.location-item .img-style {
  border-radius: 0;
}

/* Blog kartındaki küçük görselin kutuyu doldurması için: img'in üst öğesi
   `.image` DEĞİL, aradaki `<a>` (inline-block, kendi yüksekliği yok) — bu yüzden
   `height:100%` çözümlenemiyor ve görsel kutunun ancak yarısını dolduruyordu. */
.section-news-insight .relatest-post-item .image > a {
  display: block;
  width: 100%;
  height: 100%;
}

/* İkon şeridi başlığı tek satırda kalsın ("Ankara'da 5, Fas'ta 1 Mağaza"
   24px'te iki satıra düşüyordu; şeritte dört kutu var, sütun ~225px). */
.tf-box-icon .title {
  white-space: nowrap;
  font-size: 16px;
}
/* === Avantaj kutuları: başlık 18px, alt metin 13px (2026-08-10) ===
   Müşteri isteği. Şablon 16/12 (masaüstü) ve 15/14 (mobil) veriyordu; ölçüler
   her ekranda aynı olacak. Alt metnin kendi sınıfı yok — başlıktan sonraki
   kardeş eleman hedefleniyor. */
.tf-box-icon .title {
  font-size: 18px;
}
.tf-box-icon .title + * {
  font-size: 13px;
}

/* Footer bülten başlığının altındaki açıklama satırı. Footer koyu zeminde,
   başlık beyaz — alt metin biraz soluk beyaz. */
.footer-bulten-alt {
  margin: -8px 0 16px;
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 991px) {
  /* Mobilde başlık açılır-kapanır bir düğme; alt metin onun altında kalmalı. */
  .footer-bulten-alt {
    margin-top: 4px;
  }
}

/* === Bağlantı üzerine gelince marka rengi (2026-08-09) ===
   Yalnızca METİN bağlantıları hedefleniyor: koyu metinden markanın fuşyasına
   geçsinler diye. Kural yazıldığında tema `--Primary: #827460` (kahve)
   kullanıyordu ve değişkene dokunulmamıştı; 2026-08-12'de `--Primary` de
   #141313 yapıldı, yani artık aynı rengi iki yoldan veriyoruz — kural
   zararsız ama gereksiz hale geldi.
   ⚠️ Temanın kuralı `!important` taşıdığı için buradaki de taşımak zorunda. */
.link:hover,
.page-title .content .breadcrumb a:hover,
.wg-pagination li:hover .pagination-item,
.mega-menu .demo-item .demo-name:hover,
.mega-menu .demo-item:hover .demo-name,
.tf-social-icon.type-2 a:hover {
  color: #141313 !important;
}

/* İletişim sayfası: harita gömüsü ve altındaki yönlendirme satırı. */
iframe.map-contact {
  display: block;
  width: 100%;
  border: 0;
}
.harita-alti-baglanti {
  padding: 28px 0;
  text-align: center;
}
.harita-alti-baglanti a {
  font-size: 17px;
  text-decoration: underline;
}

/* İkon şeridi alt metni de tek satırda kalsın. "Ankara merkez ilçelerine
   ücretsiz teslimat ve montaj" 16px'te ~380px yer kaplıyor, sütun ~300px. */
.tf-box-icon p {
  white-space: nowrap;
  font-size: 12px;
}
@media (max-width: 991px) {
  /* Mobilde kutular tam genişlik — orada 14px rahat sığıyor. */
  .tf-box-icon p {
    font-size: 14px;
  }
}

/* Footer telif satırındaki tasarım imzası: beyaz alt çizgi. */
.footer-imza {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* === "Blogdan Seçmeler" — mobil düzen (2026-08-09) ===
   Tema, öne çıkan kartın metnini görselin üzerine MUTLAK konumla basıyor
   (`top: -75px`). Bizim özetlerimiz temanınkinden uzun olduğu için metin
   kutusu 435px'e çıkıp 400px'lik görselin dışına taşıyor, başlık yukarıdaki
   bölüm başlığının üstüne biniyordu.
   Çözüm: metin kutusu kartın ALTINA sabitlendi, başlık 2 / özet 3 satıra
   kırpıldı, arkasına okunurluk için karartma geçişi kondu. */
@media (max-width: 767px) {
  .section-news-insight .collection-position.has-over .cls-content {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    padding: 24px 16px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0) 100%);
  }
  .section-news-insight .collection-position.has-over .cls-heading h4 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
  }
  .section-news-insight .collection-position.has-over .cls-heading p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
  }
  /* Alttaki iki kartın görseli mobilde tam kare oluyordu (360×360): kart
     gereksiz uzuyor, geniş kapak fotoğrafları da fena kırpılıyordu.
     ⚠️ Tema 425px altında `aspect-ratio: 1/1` + `height: unset !important`
     diyor — yükseklik vermek işe yaramaz, ORANI değiştirmek gerekiyor.
     Yüklem temanınkinden daha belirgin (`.style-row` de yazılı). */
  .section-news-insight .relatest-post-item.style-row .image {
    aspect-ratio: 16 / 9;
    height: unset !important;
  }
  .section-news-insight .relatest-post-item + .relatest-post-item {
    margin-top: 24px;
  }
}

/* Yukarı çık düğmesi de marka renginde. */
#scroll-top:hover {
  background-color: #141313;
}

/* Footer'daki telefon ve e-posta bağlantıları da marka renginde hover.
   ⚠️ Bu bağlantılarda `.text_white` var ve o kural `!important` taşıyor —
   buradaki de taşımak zorunda, yoksa beyaz kalırlar. */
.footer-phone-number a:hover {
  color: #141313 !important;
}

/* === Düğün paketi tanıtım sayfaları (2026-08-09) ===
   Sayfa, ürün sayfalarına giden tam genişlik afişlerden oluşuyor. */
.cms-content a > img {
  margin-bottom: 0;
}
.cms-content p > a > img,
.cms-content > a > img {
  border-radius: 10px;
}

/* SSS akordiyonu: Elementor'un `<details>/<summary>` çıktısı korunuyor —
   tarayıcının kendi açılır-kapanır davranışı yeterli, eklenti gerekmiyor. */
.cms-content details {
  border: 1px solid #e5e9ee;
  border-radius: 10px;
  margin-bottom: 12px;
  padding: 0 18px;
}
.cms-content details[open] {
  padding-bottom: 6px;
}
.cms-content summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  font-weight: 600;
  position: relative;
  padding-right: 28px;
}
.cms-content summary::-webkit-details-marker {
  display: none;
}
.cms-content summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  color: #141313;
}
.cms-content details[open] summary::after {
  content: "–";
}
.cms-content details > *:not(summary) {
  margin-bottom: 12px;
}

/* === Düğün paketi sayfalarında afişler kenardan kenara ===
   Afişler 1920×750; şablonun kolonu 960px olduğu için ekranın ancak üçte
   ikisini kaplıyorlardı. Kapsayıcıdan çıkarılıyorlar.
   ⚠️ `100vw` kaydırma çubuğunu da sayar; `.sayfa-icerik`e `overflow-x: clip`
   verilmeseydi masaüstünde yatay kaydırma çubuğu çıkardı. (`clip`, `hidden`in
   aksine yeni bir kaydırma bağlamı oluşturmuyor.) */
.sayfa-icerik {
  overflow-x: clip;
}
.cms-content .tam-genislik-afis {
  display: block;
  /* Şablonun kolonu 960px; afişler bölümün `.container` genişliğine (1320px)
     çıkarılıyor, ekranın tamamına DEĞİL (müşteri isteği, 2026-08-09). */
  width: min(1320px, calc(100vw - 30px));
  margin-left: 50%;
  transform: translateX(-50%);
  margin-bottom: 24px;
}
.cms-content .tam-genislik-afis img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
}

/* Ana sayfa kategori daireleri: çerçeve marka renginde, imleç üzerine gelince
   siyaha döner. */
.categories-item.style-2 .img-style {
  transition: border-color 0.3s ease;
}
.categories-item.style-2:hover .img-style {
  border-color: #181818;
}

/* === Ana menü (2026-08-09) ===
   Kısa menüler (Düğün/Koltuk/Köşe) şablonun sade açılır kutusunu kullanıyor
   (`submenu-default` — SAYFALAR menüsündeki görünüm). Mega panel yalnızca
   DİĞER ÜRÜNLER'de; orada sütunlara yayılıyor. */
.box-nav-ul .mega-menu .mega-menu-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* Menü başlıkları tek satırda kalsın — "DÜĞÜN PAKETLERİ" iki satıra düşüyordu. */
.box-nav-ul > .menu-item > .item-link {
  white-space: nowrap;
}

/* Kayan şerit metin-only olduğunda (ana sayfadaki hizmet vaatleri) kartın
   görsel için ayırdığı yer gerekmiyor. */
.cls-item.cls-item-metin {
  display: flex;
  align-items: center;
  padding: 0 40px;
}
.cls-item.cls-item-metin .title {
  margin: 0;
  white-space: nowrap;
}

/* Kayan şeritte metinler arası ayraç: temanın yuvarlak görsellerinin yerine
   marka renginde nokta. */
.cls-item.cls-item-metin::after {
  content: "";
  /* Müşteri isteğiyle üç katına çıkarıldı (12px → 36px, 2026-08-10). */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #141313;
  margin-left: 40px;
  flex: 0 0 auto;
}

/* İkon şeridi 1320px genişlikte ve ortalı olsun — kapsayıcısı `container-full`
   olduğu için sola yaslanmış görünüyordu. */
.wrap-box-icon {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

/* SSS sayfasındaki kapanış notu. */
.sss-not {
  margin-top: 40px;
}

/* Şablonda 1, 2 ve 4 satırlık kırpma var, 3 yok — ana sayfadaki büyük blog
   kartının özeti için eklendi (2026-08-10). */
.text-line-clamp-3 {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: -webkit-box;
}

/* İkon şeridi tam `container` genişliğinde (1320px) olsun: Bootstrap kolonunun
   15+15px dolgusu şeridi 1290px'e düşürüyordu. Swiper `observer: true` ile
   kurulduğu için slayt genişliklerini kendisi yeniden hesaplıyor. */
.row > [class*="col-"]:has(> .tf-sw-iconbox) {
  padding-left: 0;
  padding-right: 0;
}

/* === KOLTUK TAKIMLARI menüsünde sağdaki afiş (2026-08-10) ===
   Üç sütun 4'lük ızgarada panelin ancak solunu dolduruyordu. Sütunlar daraldı,
   kalan yeri afiş aldı. Afiş görseli 1528×800 (≈1.91), köşeler oval. */
/* ⚠️ Seçici temanın `.mega-menu.mega-menu-1 .row-demo-1 .mega-menu-list`
   kuralından (4 sınıf) DAHA güçlü olmak zorunda; aksi hâlde panel flex kalıyor,
   `.menu-afis` de esneme tabanı olmadığı için 0px genişliğe düşüyor.
   Sütunlar içeriği kadar (`max-content`), kalan tüm yeri afiş alıyor. */
.box-nav-ul .mega-menu.mega-menu-1 .row-demo-1 .mega-menu-list.mega-menu-afisli {
  display: grid;
  /* Üç sütun kalan yeri eşit paylaşıp afişe kadar yayılıyor; afiş sabit
     genişlikte. (Önce `max-content` denendi, sütunlar sola sıkışıyordu.) */
  grid-template-columns: repeat(3, minmax(0, 1fr)) 590px;
  gap: 40px;
  align-items: start;
}
.box-nav-ul .menu-afis {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  /* ⚠️ Mega menü paneli 1320px kapsayıcıya değil tam ekrana yayılıyor; sınır
     konmazsa afiş 1187px'e (≈620px yüksekliğe) şişiyordu. Genişlik artık
     ızgara sütununda sabit (590px), afiş de o sütunu dolduruyor. */
  width: 100%;
}
.box-nav-ul .menu-afis img {
  display: block;
  width: 100%;
  height: auto;
}
.box-nav-ul .menu-afis:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px 0 rgba(43, 52, 74, 0.18);
}

/* === DÜĞÜN PAKETLERİ açılır menüsündeki afişler (2026-08-10) ===
   Bağlantı listesi yerine iki kart. Köşeler referanstaki gibi oval. */
.box-nav-ul .menu-gorseller {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 660px;
}
.box-nav-ul .menu-gorsel {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #f4f6f6;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.box-nav-ul .menu-gorsel img {
  display: block;
  width: 100%;
  height: auto;
}
.box-nav-ul .menu-gorsel:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px 0 rgba(43, 52, 74, 0.18);
}
/* Kart adı yalnızca ekran okuyucular için — afişin üstünde zaten yazıyor. */
.box-nav-ul .menu-gorsel-ad {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* === Üst şerit bağlantıları: hover'da yazı kaybolmasın (2026-08-10) ===
   Şablon `.link:hover` için `color: var(--Primary) !important` diyor; üst
   şeridin zemini de marka rengine çekildiği için yazı zeminle aynı renge
   dönüp görünmez oluyordu. Beyaz kalıyor, vurgu altı çizgiyle veriliyor. */
.tf-topbar .link:hover {
  color: #fff !important;
  text-decoration: underline;
}

/* === Kısa açılır menüler tek satır (2026-08-10) ===
   `.sub-menu` mutlak konumlu; kapsayıcı bloğu `li.menu-item.position-relative`
   olduğu için "shrink-to-fit" genişliği ÜST BAŞLIĞIN genişliğiyle sınırlanıyor
   ("Modern Koltuk Takımı" iki satıra düşüyordu). `max-content` bu sınırı
   kaldırır — `min-width: 200px` zaten temadan geliyor. */
.box-nav-ul .menu-item > .submenu-default {
  width: max-content;
  max-width: 340px;
}
.box-nav-ul .submenu-default .menu-link-text {
  white-space: nowrap;
}

/* === Düğün paketi sayfalarında metinler de afiş genişliğinde (2026-08-10) ===
   Afişler 1320px, açıklama yazıları ise şablonun 960px'lik okuma kolonundaydı;
   müşteri ikisinin hizalanmasını istedi. Kolonun kendi dolgusu sıfırlanınca
   içerik tam `container` genişliğine (1320px) oturuyor, `.tam-genislik-afis`
   kuralı da aynı genişliği ürettiği için afişler kaymıyor.
   Yalnızca afiş içeren sayfalarda; kurumsal/hukuki metinler dar kolonda kalır. */
.sayfa-icerik.sayfa-genis > .container > .row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* === SSS: "Sorunuzu sorun" kartı kolonunu doldursun (2026-08-10) ===
   Şablon karta sabit 380px + `margin-left: auto` veriyor; kart kolonun sağına
   yaslanınca soru kartlarıyla arasında geniş bir boşluk kalıyordu. Kolon zaten
   convert'te 5/12'den 4/12'ye daraltıldı, kart da kolonu dolduruyor.
   `.ask-question` şablonda YALNIZCA bu sayfada var, kapsam sınırlamaya gerek yok. */
@media (min-width: 768px) {
  .ask-question {
    width: 100%;
    margin-left: 0;
  }
}

/* === Kategori ızgarasında sabit tanıtım afişi (2026-08-10) ===
   Afiş, ürün kartlarıyla aynı hücreye oturuyor ama altında başlık/fiyat satırı
   yok. Temanın kart görseli kuralı (`height: 100%; object-fit: cover`) afişi
   satırdaki en uzun karta göre kırpardı — afişin kendi en-boy oranı korunsun
   diye burada geri alınıyor. Bkz. src/data/kategori-afisleri.ts */
/* Ürün kartlarının çerçevesi afişte boş bir kutu bırakıyordu (altında başlık
   ve fiyat satırı yok); afiş çerçevesiz duruyor. Seçici, çerçeveyi veren
   `.container:has(.wrapper-shop) .card-product` kuralıyla aynı ağırlıkta
   olmalı — yalnız `.kategori-afis` yazmak yetmiyor. */
.container:has(.wrapper-shop) .card-product.kategori-afis {
  border: 0;
}
.kategori-afis .card-product-wrapper {
  margin-bottom: 0;
}
.kategori-afis .card-product-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: initial;
}

/* === Blog kartlarının kapak görselleri tek boyutta (2026-08-10) ===
   Tema görsele yükseklik vermiyordu (`width:100%` + doğal oran), bizim
   kapaklarımızın oranları birbirinden farklı olduğu için listede kartlar
   basamak basamak kayıyordu. Kapak kutusu 3:2'ye sabitlendi (müşterinin
   referans aldığı yatay kapağın oranı), taşan kısım `cover` ile kırpılıyor.
   Blog listesi, "İlgili yazılar" karuseli ve blog ızgarasının tamamı aynı
   `.blog-article-item` kartını kullanıyor — üçü birden hizalanıyor. */
.blog-article-item .article-thumb {
  aspect-ratio: 3 / 2;
}
.blog-article-item .article-thumb a {
  display: block;
}
.blog-article-item .article-thumb img {
  height: 100%;
  object-fit: cover;
}

/* === İletişim: çalışma saatleri tek satırda (2026-08-10) ===
   Tema, gün etiketini 80px'lik sabit bir sütuna sıkıştırıyor ("Mon - Fri:"
   sığıyordu). "Pazartesi – Cuma:" sığmayıp iki satıra bölünüyor, saat de
   yanında asılı kalıyordu. Etiket kendi genişliğini alsın ve bölünmesin. */
.contact-us-content .open-time span {
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* === Mobilde "Sepete ekle" düğmesi yok (2026-08-10) ===
   Şablon bu düğmeyi 992px ve üstünde karta gelince (hover) açıyor; 992px
   altında hover olmadığı için düğme görselin üzerinde sürekli duruyordu.
   Müşteri ana sayfada ve kategori listelerinde mobilde bu düğmeyi istemiyor.
   ⚠️ Masaüstü davranışı DEĞİŞMEDİ — kural yalnızca 991.98px altında geçerli.
   İki kapsam var: kategori/mağaza listeleri `.wrapper-shop` içinde olduğu için
   doğrudan seçiliyor; ana sayfada tutunacak bir kapsayıcı olmadığından kartın
   kendisi `.mobil-sepet-yok` ile işaretleniyor (ProductCard `mobilSepetiGizle`).
   Izgara kartında düğme `position:absolute` — gizlenince boşluk kalmıyor. */
@media (max-width: 991.98px) {
  .wrapper-shop .card-product .list-btn-main,
  .wrapper-shop .card-product .btn-main-product,
  .mobil-sepet-yok .list-btn-main,
  .mobil-sepet-yok .btn-main-product {
    display: none !important;
  }
}

/* === Kategori daireleri: mobilde ilk daire kesiliyordu (2026-08-10) ===
   Şerit `overflow-x: auto` bir flex satırı ve yukarıda `justify-content: center`
   veriliyor. İçerik kapsayıcıdan genişken (mobilde 650px içerik / 345px ekran)
   ortalama taşmayı İKİ YANA birden dağıtır; soldaki taşma kaydırma ile
   erişilemez ve kalıcı olarak kırpılır — mobilde ilk daire "Düğün Paketleri"
   bu yüzden hiç görünmüyordu (soldaki üç daire ekranın dışında kalıyordu).
   Çözüm, ortalamayı `justify-content` yerine uçlardaki `auto` kenar boşluklarına
   bırakmak: yer varsa (masaüstü) şerit yine ortalanır, yer yoksa boşluklar
   sıfırlanır ve satır ilk daireden başlar. Masaüstü görünümü değişmiyor. */
.wrap-categories.style-2 {
  justify-content: flex-start;
}
.wrap-categories.style-2 > :first-child {
  margin-inline-start: auto;
}
.wrap-categories.style-2 > :last-child {
  margin-inline-end: auto;
}

/* Mobilde şeridin üstündeki/altındaki boşluk fazlaydı (üstte 50px, altta
   50+40px); daireler bandın ortasında durmuyordu. Üç boşluk da eşitlendi. */
@media (max-width: 767px) {
  section.flat-spacing-2:has(.wrap-categories) {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .line-bottom-container:has(.wrap-categories) {
    padding-bottom: 24px;
  }
}

/* === Kategori daireleri: görsel çemberin tam ortasına otursun (2026-08-10) ===
   Daire kutusunun yüksekliği `aspect-ratio`dan, içindeki bağlantı ve görselin
   yüksekliği ise `height: 100%`ten geliyordu. Bu zincir (yüzde yükseklik →
   aspect-ratio'dan türetilmiş yükseklik) Chrome'da çözülüyor ama iOS Safari'de
   çözülemeyip görsel doğal oranına düşüyor; daire içinde yukarı/aşağı kayıyor,
   üstte hilal biçiminde beyaz boşluk kalıyordu. Zincir tamamen kaldırıldı:
   kutuya piksel yükseklik, görsele mutlak konum verildi — hesap tarayıcıdan
   bağımsız. Ölçüler değişmedi (masaüstü 95px, mobil 90px; 2px çerçeve + 4px
   beyaz iç halka), yani masaüstü görünümü birebir aynı kalıyor. */
.categories-item.style-2 .img-style {
  position: relative;
  width: 95px;
  height: 95px;
  /* İçindeki bağlantı satır kutusu oluşturup görseli aşağı itmesin. */
  line-height: 0;
  font-size: 0;
}
.categories-item.style-2 .img-style a {
  position: absolute;
  /* `inset` çerçevenin iç kenarından ölçülür; 4px beyaz halkayı bırakır.
     ⚠️ `width/height: auto` şart: yukarıdaki kural bağlantıya %100 genişlik
     veriyor, bu da `inset` ile çakışıp kutuyu sağa/aşağı 4'er piksel taşırıyor
     (aşırı belirlenmiş denklemde `right`/`bottom` yok sayılıyor). */
  inset: 4px;
  width: auto;
  height: auto;
  display: block;
  border-radius: 50%;
  overflow: hidden;
}
.categories-item.style-2 .img-style img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
@media (max-width: 767px) {
  .categories-item.style-2 .img-style {
    width: 90px;
    height: 90px;
  }
}

/* === Ürün sayfası: mobilde galeri sayfayı "kilitliyordu" (2026-08-10) ===
   Galeri sarmalayıcısı `.sticky-top` (position: sticky) — masaüstünde iki
   sütunlu düzende görselin sağdaki bilgi kolonu okunurken yerinde kalması
   için doğru. Mobilde tek sütun olduğu için görsel ekranın tepesine
   yapışıyor, parmak görselin üzerindeyken sayfa hiç kaymıyormuş gibi
   görünüyordu. Mobilde yapışkanlık kapatıldı; masaüstü aynen kalıyor. */
@media (max-width: 991.98px) {
  .tf-product-media-wrap.sticky-top {
    position: static;
  }
}

/* === Ürün sekmeleri: şeridin sonunda kaydırma oku (2026-08-10) ===
   Altı başlık (Takım İçeriği Fiyatları · Açıklama · Yorumlar · Ürün Boyutları ·
   Teslimat ve Kurulum · Ödeme Seçenekleri) toplam ~1240px; dar ekranda yalnız
   ilk ikisi görünüyor ve kaydırılabildiğine dair hiçbir işaret yoktu.
   Ok, şeridin içinde `position: sticky` ile sağ kenara sabitlenir; altındaki
   başlıklar beyaz geçişle maskelenir. Bkz. ProductTabTitles.tsx */
.widget-tabs .widget-menu-tab .sekme-ok {
  position: sticky;
  right: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  padding-left: 28px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 26px);
}
.widget-tabs .widget-menu-tab .sekme-ok[hidden] {
  display: none;
}
.widget-tabs .widget-menu-tab .sekme-ok button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: #181818;
  font-size: 12px;
  padding: 0;
}

/* === Sepet çekmecesi: öneri listesinde aşağı ok (2026-08-10) ===
   Panelde artık en çok satan 10 ürün var ama yüksekliği ~4 kart alıyor;
   şablon kaydırma çubuğunu gizlediği için (`.wrap-recommendations
   ::-webkit-scrollbar { width: 0 }`) devamı olduğu belli olmuyordu.
   Ok, kaydırma kutusunun içinde `position: sticky` ile alt kenara sabit;
   sona gelince yukarı dönüp başa alıyor. Bkz. MiniCartRecommendations.tsx */
.tf-minicart-recommendations .oneri-ok {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: 10px 0 2px;
  margin-top: -10px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 12px);
}
.tf-minicart-recommendations .oneri-ok[hidden] {
  display: none;
}
.tf-minicart-recommendations .oneri-ok button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: #181818;
  font-size: 12px;
  padding: 0;
}
/* İkon setinde yukarı/aşağı ok yok; sağ ok döndürülüyor. */
.tf-minicart-recommendations .oneri-ok .icon.asagi {
  transform: rotate(90deg);
}
.tf-minicart-recommendations .oneri-ok .icon.yukari {
  transform: rotate(-90deg);
}

/* === Panel sayfaları mobilde kenarlara yapışıyordu (2026-08-10) ===
   `.sayfa-genis` kolonun yatay dolgusunu sıfırlıyor (geniş içerik için doğru),
   ama `.row`un -15px negatif kenar boşluğu açıkta kalınca içerik ekranın tam
   kenarından başlıyordu. Mobilde dolgu geri veriliyor; masaüstü genişliği
   olduğu gibi kalıyor. Etkilenen sayfalar: Full/Small Düğün Paketleri ve
   panelden yönetilen diğer tüm sayfalar. */
@media (max-width: 767px) {
  .sayfa-icerik.sayfa-genis > .container > .row > [class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* === Sayfa altı SEO metni + Sıkça Sorulan Sorular (2026-08-10) ===
   ozbaymobilya.com'daki karşılığının aynısı: metin sabit yükseklikli, kendi
   içinde kaydırılan bir kutuda duruyor (uzun SEO metni sayfayı şişirmesin),
   sorular ise açılır-kapanır. Yükseklik kaynaktaki `data-height` değerinden
   geliyor, satır içi stil olarak basılıyor. Bkz. src/components/shop/SeoBlok.tsx */
.seo-blok-baslik {
  font-size: 22px;
  margin-bottom: 16px;
}
.seo-blok-kutu > .seo-blok-baslik {
  margin-top: 0;
}
.seo-blok-kutu {
  overflow-y: auto;
  /* İnce gri çerçeve + 5px yuvarlatma (müşteri isteği, 2026-08-11).
     Sağ dolgu kaydırma çubuğuna yer bırakıyor. */
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 20px;
  scrollbar-width: thin;
  scrollbar-color: #999 transparent;
}
.seo-blok-kutu::-webkit-scrollbar {
  width: 8px;
}
.seo-blok-kutu::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 8px;
}
.seo-blok-icerik {
  font-size: 14px;
  line-height: 1.7;
  color: var(--Onsurface);
}
.seo-blok-icerik h2,
.seo-blok-icerik h3 {
  font-size: 18px;
  margin: 20px 0 10px;
}
.seo-blok-icerik h2:first-child {
  margin-top: 0;
}
.seo-blok-icerik p {
  margin-bottom: 12px;
}
.seo-blok-icerik ul,
.seo-blok-icerik ol {
  margin: 0 0 12px 20px;
  list-style: revert;
}
.seo-blok-icerik a {
  color: #141313;
  text-decoration: underline;
}
/* Kaynaktaki alıntı kutusu (blockquote) görünümü */
.seo-blok-icerik blockquote {
  background: #f5f5f5;
  padding: 16px 20px;
  margin: 0 0 12px;
}
.seo-blok-icerik blockquote p:last-child {
  margin-bottom: 0;
}

/* --- Sıkça Sorulan Sorular --- */
.seo-sss {
  margin-top: 40px;
}
.seo-sss-oge {
  border-bottom: 1px solid var(--line);
}
.seo-sss-soru {
  cursor: pointer;
  list-style: none;
  padding: 16px 32px 16px 0;
  position: relative;
  font-size: 15px;
  font-weight: 500;
}
.seo-sss-soru::-webkit-details-marker {
  display: none;
}
/* Sağdaki +/− işareti (ikon setinde uygun simge yok, düz karakter kullanılıyor) */
.seo-sss-soru::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  color: #141313;
}
.seo-sss-oge[open] .seo-sss-soru::after {
  content: '−';
}
.seo-sss-cevap {
  padding: 0 32px 18px 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--Onsurface_secondary, #6b6b6b);
}

/* === Ödeme sayfası: havale/EFT hesapları (2026-08-10) === */
.havale-hesap-adi {
  margin: 12px 0 8px;
  font-size: 14px;
}
.havale-hesaplar {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.havale-hesaplar li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  font-size: 14px;
}
.havale-hesaplar li:not(:last-child) {
  border-bottom: 1px solid var(--line);
}
.havale-banka {
  flex: 0 0 130px;
  font-weight: 500;
}
.havale-iban {
  flex: 1 1 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.2px;
  word-break: break-all;
}
.havale-kopyala {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.havale-kopyala:hover {
  border-color: #141313;
  color: #141313;
}
@media (max-width: 767px) {
  .havale-hesaplar li {
    flex-wrap: wrap;
    gap: 4px 10px;
  }
  .havale-banka {
    flex: 0 0 100%;
  }
}

/* Sepet çekmecesindeki kargo aracının sonuç satırı. */
.kargo-hesapla-sonuc {
  font-size: 13px;
  line-height: 1.6;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 10px 12px;
}

/* === Sol kenardaki WhatsApp sekmesi (2026-08-11) ===
   ozbaymobilya.com'daki launcher'ın birebir ölçüleri: 45×150 sekme, 12px köşe
   (yalnız sağ köşeler), #25D366, masaüstünde alttan 10px, mobilde 55px —
   mobil alt çubuğun üstünde kalsın. Bkz. components/shop/WhatsappSekmesi.tsx */
.wa-sekme-kok {
  position: fixed;
  left: 0;
  bottom: 10px;
  z-index: 9999;
}
.wa-sekme {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 45px;
  height: 150px;
  padding: 0;
  border: none;
  cursor: pointer;
  color: #fff;
  background: #25d366;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.wa-ikon svg {
  width: 24px;
  height: 24px;
  display: block;
}
.wa-etiket {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.2px;
  user-select: none;
}
.wa-panel {
  position: absolute;
  top: 0;
  left: 53px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
  padding: 8px;
  min-width: 230px;
}
.wa-panel[hidden] {
  display: none;
}
.wa-hat {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: #111;
  font-weight: 600;
  text-decoration: none;
}
.wa-hat:hover {
  background: rgba(37, 211, 102, 0.12);
  color: #111;
}
@media (max-width: 767px) {
  .wa-sekme-kok {
    bottom: 55px;
  }
}

/* === Ana sayfa: sekmeli ürün bölümü (2026-08-11) ===
   Başlık şeridi temanın ürün sayfası sekmeleriyle aynı işaretlemeyi kullanıyor;
   burada yalnız ortalama, aralık ve etkin sekmenin marka rengi ayarlanıyor.
   Bkz. components/shop/SekmeliUrunler.tsx */
/* ⚠️ Şeridin altındaki ince gri çizgi KALDIRILDI (müşteri isteği, 2026-08-19).
   Etkin sekmenin kırmızı alt çizgisi seçim göstergesi olarak duruyor; gri çizgi
   gittiği için onu 1px yukarı çeken `margin-bottom: -1px` de kalktı. */
.urun-sekmeleri .widget-menu-tab {
  gap: 32px;
  margin-bottom: 28px;
  overflow-x: auto;
  scrollbar-width: none;
}
.urun-sekmeleri .widget-menu-tab::-webkit-scrollbar {
  display: none;
}
.urun-sekmeleri .item-title {
  cursor: pointer;
  padding-bottom: 12px;
  white-space: nowrap;
  font-size: 18px;
}
.urun-sekmeleri .item-title.active {
  color: #141313;
  border-bottom: 2px solid #141313;
}
@media (max-width: 767px) {
  .urun-sekmeleri .widget-menu-tab {
    gap: 22px;
    justify-content: flex-start !important;
  }
  .urun-sekmeleri .item-title {
    font-size: 15px;
  }
}

/* Sekme başlıkları, kaldırılan bölüm başlığının yerini aldı (müşteri isteği,
   2026-08-11): masaüstünde 40/48. ⚠️ Mobilde üç başlık 40px'te ekrana sığmaz,
   orada 22/28 kalıyor — şerit yatay kaydırılabilir. */
/* ⚠️ Seçici temanın `.widget-tabs .widget-menu-tab .item-title` kuralından
   (3 sınıf, 24px) güçlü olmak zorunda; yoksa mobilde tema kazanıyordu. */
.widget-tabs.urun-sekmeleri .widget-menu-tab .item-title {
  font-size: 32px;
  line-height: 36px;
}
/* ⚠️ Mobilde üç başlık 22px'te bile sığmıyordu ("Yeni Ürünler" kesiliyordu);
   16px + dar aralıkla üçü de tek ekranda görünüyor (390px genişlikte ölçüldü). */
@media (max-width: 767px) {
  /* ⚠️ Ölçüm: 390px ekranda şerit 360px, başlıklar+aralık 16px'te 365px
     tutuyordu ("Yeni Ürünler" 5px kesiliyordu). 15px + 10px aralık ile üçü de
     tam sığıyor. Masaüstü 40/48 olarak KALIYOR (müşteri isteği). */
  .widget-tabs.urun-sekmeleri .widget-menu-tab .item-title {
    font-size: 15px;
    line-height: 20px;
  }
  .urun-sekmeleri .widget-menu-tab {
    gap: 10px;
  }
  /* Sekmelerdeki ürünler mobilde tek sütun (müşteri isteği, 2026-08-11);
     şablonun `tf-col-2` sınıfı iki ürünü yan yana koyuyordu. */
  .urun-sekmeleri .tf-grid-layout {
    grid-template-columns: 1fr;
  }
}

/* Google yorum kartındaki tarih satırı (şablonun kartında böyle bir alan yok). */
.testimonial-item .yorum-tarih {
  margin-top: 10px;
  opacity: 0.75;
}

/* === Google yorum kartları: eşit yükseklik + hizalı tarih (2026-08-11) ===
   Şablonun kartı içeriğe göre uzuyordu, üç kart yan yana farklı boyda
   duruyor ve alttaki tarihler kayıyordu. Slaytlar esneyerek eşitleniyor,
   tarih satırı `margin-top: auto` ile kartın en altına itiliyor — böylece
   metin uzunluğu ne olursa olsun tarihler aynı hizada. */
.tf-sw-testimonial .swiper-wrapper {
  align-items: stretch;
}
.tf-sw-testimonial .swiper-slide {
  height: auto;
  display: flex;
}
.tf-sw-testimonial .testimonial-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.tf-sw-testimonial .testimonial-item .content,
.tf-sw-testimonial .testimonial-item .content-top {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.tf-sw-testimonial .testimonial-item .yorum-tarih {
  margin-top: auto;
  padding-top: 12px;
}

/* Blog yazısındaki SSS akordeonu (sayfa altı bloklarıyla aynı stil, biraz
   daha geniş boşluklu). Bkz. lib/blog-sss.ts */
.blog-sss {
  margin: 24px 0 8px;
}
.blog-sss .seo-sss-cevap p:last-child {
  margin-bottom: 0;
}

/* === Başlık: dar masaüstü ekranlarında logo ortada kalsın (2026-08-11) ===
   Sorun: menü kolonu (col-xl-5) içeriğinden taşıyordu — 1366px'te menü ~638px
   istiyor, kolona ise (1366-380)/2 = 493px düşüyor. Flex öğeleri varsayılan
   olarak içeriğinin altına inemediği (min-width:auto) için menü kolonu payından
   fazlasını alıp logoyu sağa itiyordu (ölçüm: logo merkezi 858px, ekran
   merkezi 683px).
   Çözüm iki parçalı: (1) yan kolonlara `min-width: 0` — pay dışına taşamazlar,
   (2) ekran daraldıkça menü yazısı/aralığı ve logo genişliği kademeli küçülür,
   böylece menü kendi payına sığar ve logoyla çakışmaz.
   ⚠️ 1200px altında tema mobil başlığa geçiyor, oraya dokunulmuyor. */
@media (min-width: 1200px) {
  .wrapper-header > .col-xl-2 {
    flex: 0 0 clamp(250px, 19vw, 380px);
    width: clamp(250px, 19vw, 380px);
    max-width: clamp(250px, 19vw, 380px);
  }
  .wrapper-header > .col-xl-5 {
    min-width: 0;
  }
  /* ⚠️ LOGO ORANI DEĞİŞİRSE BU DEĞER DE DEĞİŞMELİ — logo genişlikle
     ölçekleniyor, yüksekliği orandan çıkıyor. Geçmiş:
       tema kelime-markası 7:1 → clamp(230px, 17.5vw, 350px)
       "furniture Morocco"  4,46:1 → clamp(240px, 19.5vw, 320px)
       800w logo (bugünkü)  3,17:1 → aşağıdaki değer
     3,17:1'de eski genişlik 1440px ekranda 281px → 89px yükseklik ederdi;
     başlık 90px, yani logo başlığı tamamen doldururdu. Yeni değerle 1440px'te
     ~202px → ~64px, yani önceki logoyla AYNI görsel ağırlık. */
  .logo-header .logo {
    width: clamp(180px, 14vw, 215px);
  }
  .box-nav-ul {
    gap: clamp(7px, 0.9vw, 32px);
  }
  .box-nav-ul .menu-item > .item-link {
    font-size: clamp(9.5px, 0.78vw, 14px);
    white-space: nowrap;
  }
  .nav-icon {
    gap: clamp(10px, 1.1vw, 20px);
  }
}

/* === Hero slider: slaytlar tıklanabilir ===
   Bağlantı `.img-style` ile `img` arasına giriyor. Tema `img`e `height: 100%`
   veriyor ve bu artık bağlantıya göre çözülüyor — bağlantı blok ve tam boy
   olmazsa görsel yüksekliğini kaybediyordu. Swiper sürüklemesi tıklamayı
   yutmasın diye sürükleme sırasında tarayıcının resmi kapmasını da kapatıyoruz. */
.tf-slideshow .wrap-slider .img-style > a.slayt-bag {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
}
.tf-slideshow .wrap-slider .img-style > a.slayt-bag img {
  pointer-events: none; /* sürüklerken görselin kendisi tutulmasın */
}
@media (max-width: 767px) {
  /* Mobilde sarmalayıcıların yüksekliği görsel oranından geliyor (yukarıdaki
     kural), bağlantı da onu izlemeli. */
  .tf-slideshow .wrap-slider .img-style > a.slayt-bag {
    height: auto;
  }
}

/* === Hero slider: ortadaki slayt tam net ===
   Şablon slaytlara sırayla `opacity: .7 / .8 / .9` veriyor (`.slide-1..3`) —
   demoda görselin ÜSTÜNDE başlık/buton olduğu için arka planı bilerek
   soluklaştırmışlar. Bizim slaytlarda metin katmanı yok (bkz. HeroSlides.tsx),
   dolayısıyla ortadaki kampanya görseli boşuna soluk duruyordu.
   Yalnızca AKTİF slayt tam opaklığa çekiliyor; yandakiler soluk kalsın diye
   şablonun kuralına dokunulmuyor (onlar ayrıca `brightness(.4)` de yiyor).
   ⚠️ `[class*="slide-"]` özgüllüğü şablonun kuralının üstüne çıkarmak için:
   cms.css zaten sonra yükleniyor ama eşit özgüllükte sıraya bağımlı kalmasın. */
.tf-slideshow.style-default .swiper-slide-active .wrap-slider[class*="slide-"] .img-style img {
  opacity: 1;
}

/* === Hero slider: geçiş noktaları slaydın alt kenarına ===
   Şablon masaüstünde `bottom: 60px` veriyor; kampanya görsellerinin alt
   şeridinde ürün adı yazdığı için noktalar yazının üstüne biniyordu. Görselin
   kendi tipografisi var, noktalar onun altına iniyor.
   ⚠️ Yalnızca masaüstü: mobilde slayt `object-fit: contain` ile oranından
   yükseklik alıyor ve şablonun `bottom: 20px` değeri zaten doğru yerde. */
@media (min-width: 768px) {
  .tf-slideshow.style-default.slider-nav-sw .wrap-pagination {
    bottom: 16px;
  }
}

/* === Hero slider: dar masaüstü ekranlarında görsel kırpılmasın ===
   Şablon slayta SABİT PİKSEL yükseklik veriyor (styles.css):
     ≤1515px → 700px, ≤1199px → 650px
   Görsel ise `object-fit: cover`. Slaydın GENİŞLİĞİ ekranla birlikte küçülüyor
   (Swiper: ≥1200px'te slidesPerView 1.428, 768–1199px'te 1.2 → slayt ≈ ekranın
   %70'i) ama yükseklik 700px'te sabit kaldığı için görsel yükseklikten
   büyütülüp soldan sağdan kırpılıyordu:
     1920px → slayt ≈1330px = görselin doğal genişliği → tam görünüyor (doğru)
     1440px → slayt ≈1008px, 700px yükseklik → sağ/sol %24'ü kırpık
     1366px → slayt  ≈956px, 700px yükseklik → sağ/sol %28'i kırpık
   Çözüm: yükseklik piksel yerine görselin oranından gelsin. Kampanya
   görsellerinin tamamı 1330×702; `aspect-ratio` ile yükseklik genişliğe
   bağlanıyor, böylece her ekranda görselin TAMAMI görünüyor ve yüklenmeden önce
   de yer kapladığı için sayfa zıplamıyor (CLS).
   `cover` bilerek kalıyor: panelden farklı oranda bir slayt yüklenirse slaytlar
   yine aynı yükseklikte durur (Swiper'da yamuk yükseklikler kötü görünüyor).
   ⚠️ 767px altı hariç — orada slayt zaten `height: auto` + `contain` ve
   mobile görsel değişimi (`art-mobile`) devrede. */
@media (min-width: 768px) {
  .tf-slideshow.style-default .wrap-slider,
  .tf-slideshow.style-default .wrap-slider .img-style,
  .tf-slideshow.style-default .wrap-slider .img-style > a.slayt-bag {
    height: auto;
  }
  .tf-slideshow.style-default .wrap-slider .img-style img {
    height: auto;
    aspect-ratio: 1330 / 702;
  }
}

/* Ürün sayfası ‹ › okları: kategorinin başında/sonunda hedef yok. Bağlantı
   yerine <span> basılıyor (bkz. ProductPrevNext.tsx); tıklanamadığı belli
   olsun diye soluk ve imleç değişmiyor. */
.tf-breadcrumb-prev-next .disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* === Hero slider: büyüme (zoom) efekti kapalı ===
   Şablon aktif slaydın görselini `zoom1` animasyonuyla `scale(1.2)`den 1'e
   indiriyor (styles.css → `.slider-effect-fade.efect-2 .swiper-slide-active
   .img-style`): her geçişte görsel önce büyüyüp sonra normale oturuyordu.
   Kampanya görsellerinin kendi tipografisi var, büyürken yazılar kırpılıyor ve
   geçiş huzursuz duruyordu — geçiş artık düz kaydırma/solma (müşteri kararı).
   ⚠️ `efect-2` sınıfı şablonun HTML'inden geliyor ve sayfa üretilmiş
   (tools/convert.mjs) — sınıfı elle silmek yerine kural burada eziliyor.
   Özgüllük şablonunkinin (4 sınıf) üstüne çıksın diye `.tf-slideshow` eklendi. */
.tf-slideshow.slider-effect-fade.efect-2 .swiper-slide-active .img-style {
  animation: none;
}

/* === Hero slider: açılıştaki "büyük başlayıp normale oturma" ===
   Swiper devreye girene kadar (JS yüklenip `carousel.js` çalışana kadar) her
   slayt Swiper'ın kendi CSS'indeki `width: 100%` ile duruyor; init olunca
   masaüstünde 1.428 slayt/ekran + ortalama uygulanıp görsel ~%70'e iniyor.
   Sayfa ilk açıldığında görülen sıçrama buydu — animasyon değil, ölçü değişimi.
   Aşağıdaki kurallar init ÖNCESİ ölçüleri Swiper'ın hesabıyla eşitliyor:
   `slaytGenişliği = (kapsayıcı - boşluk × (slaytSayısı - 1)) / slaytSayısı`.
   Kırılım noktaları ve değerler public/js/carousel.js'teki `breakpoints`ten
   ve ana sayfadaki `data-*` özniteliklerinden geliyor (768: 1.2 slayt/20px,
   1200: 1.428 slayt/20px + ortalı; mobilde 1 slayt/0px — orada şablonun kendi
   `width: 100%`u zaten doğru, dokunulmuyor).
   ⚠️ Sınıf `swiper-initialized`: Swiper 8 kurulumu bitince kapsayıcıya ekliyor,
   yani bu kuralların ömrü yalnızca ilk birkaç yüz milisaniye.
   ⚠️ Görseli gizleyip sonra göstermek daha kolay olurdu ama ana sayfanın en
   büyük öğesi bu (LCP) — gizlemek Core Web Vitals'ı düşürürdü. */
.tf-sw-slideshow:not(.swiper-initialized) .swiper-wrapper {
  flex-direction: row;
}
@media (min-width: 768px) {
  .tf-sw-slideshow:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 4px) / 1.2);
    margin-right: 20px;
  }
}
@media (min-width: 1200px) {
  .tf-sw-slideshow:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 8.56px) / 1.428);
  }
  /* `centeredSlides: true` — aktif slayt ortada başlıyor, sarmalayıcı da o
     kadar kaydırılmış olmalı; yoksa görsel önce sola yaslı görünüyor. */
  .tf-sw-slideshow:not(.swiper-initialized) .swiper-wrapper {
    transform: translate3d(calc((100% - (100% - 8.56px) / 1.428) / 2), 0, 0);
  }
}
/* Şablon slaytlara sırayla `opacity: .7/.8/.9` veriyor ve tam opaklık yalnızca
   `.swiper-slide-active`e geliyor (yukarıdaki kural) — o sınıf da init'le
   birlikte geldiği için ilk kare soluk açılıyordu. */
.tf-sw-slideshow:not(.swiper-initialized) .swiper-slide:first-child .img-style img {
  opacity: 1;
}

/* === H1 boyutları: etiket değişti, tasarım değişmesin (2026-08-12) ===
   Taramada 3.205 sayfada H1 yoktu; ürün adı, kategori adı ve yazı başlığı
   h3'ten h1'e alındı. Tema h1'e 56px/68px (mobilde 34px/44px), h3'e 40px/48px
   (mobilde 24px/34px) veriyor — sınıflar kendi boyutunu tanımlamadığı için
   başlıklar büyüyecekti. Eski görünüm birebir korunuyor. */
h1.name,
h1.title,
h1.blog-baslik {
  font-size: 40px;
  line-height: 48px;
}
@media (max-width: 767px) {
  h1.name,
  h1.title,
  h1.blog-baslik {
    font-size: 24px;
    line-height: 34px;
  }
}

/* === Kategori açılış metni (2026-08-12) ===
   Başlık şeridinin altında, filtre çubuğunun üstünde duran 2-3 cümlelik giriş.
   Denetimde 99 kategorinin hiçbirinde ürün ızgarasından önce metin yoktu.
   Genişlik: kapsayıcının tamamı (müşteri isteği) — filtre çubuğu ve ürün
   ızgarasıyla aynı hizada başlayıp aynı hizada biter. Sabit px verilmiyor;
   `.container` zaten sayfa genişliğini belirliyor, ikinci bir sınır koymak
   geniş ekranda metni erken kırıyordu.
   Fiyat yazılmaz: kampanya rakamları yalnız düğün paketi kategorilerinde. */
.kategori-giris {
  margin-bottom: 24px;
  max-width: 100%;
}
.kategori-giris p {
  margin: 0;
  color: var(--Secondary2, #555);
  font-size: 15px;
  line-height: 26px;
}
@media (max-width: 767px) {
  .kategori-giris {
    margin-bottom: 16px;
  }
  .kategori-giris p {
    font-size: 14px;
    line-height: 24px;
  }
}

/* === Site formları: gönder düğmesi + durum satırı (2026-08-12) ===
   İletişim formu ve ürün sayfasındaki "Soru sor" penceresi. Şablonun düğmesi
   `btn-onsurface` (neredeyse siyah) idi; bu iki formda marka rengi isteniyor.
   Ayrı bir sınıf açıldı: o gün `--Primary` hâlâ kahve #827460'tı ve 38 yerde
   kullanıldığı için ona dokunulmamıştı. 2026-08-12'de `--Primary` de #141313
   oldu; sınıf duruyor, çünkü hover'da `--Onsurface`e dönmesi temanın
   `btn-primary` davranışından farklı. */
.tf-btn.btn-marka {
  background-color: #141313;
  border-color: #141313;
  color: #fff;
}
.tf-btn.btn-marka:hover {
  background-color: var(--Onsurface);
  border-color: var(--Onsurface);
  color: #fff;
}
.tf-btn.btn-marka:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Gönderim sonrası geri bildirim satırı ("Mesajınız bize ulaştı…" / hata). */
.form-durum {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 22px;
}
.form-durum.basarili {
  background: #eaf7e6;
  border: 1px solid #3dab25;
  color: #226b14;
}
.form-durum.hatali {
  background: #fdecec;
  border: 1px solid #f03e3e;
  color: #a51c1c;
}

/* === Fırsat Zili: başlıktaki kampanya duyurusu çanı ====================
   Müşteri isteği (2026-08-12), istikbal.com.tr'deki zilin muadili: fareyle
   üstüne gelince duyurular ikonun hemen ALTINDA açılıyor, rozet yayındaki
   duyuru sayısını gösteriyor (en fazla 3). İşaretleme
   components/shop/FirsatZili.tsx, başlığa `firsat-zili` chrome slotuyla
   giriyor (aramanın soluna).
   Rozet zemini marka rengi #141313 — temanın `.count-box`u `var(--Primary)`
   (kahve) kullanıyor, sepet sayacı o renkte kalsın diye yalnız `.count-zil`
   ezildi. */
.nav-firsat-zili {
  position: relative;
}
.nav-firsat-zili .zil-dugme {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  line-height: 1;
}
.nav-firsat-zili .zil-ikon {
  display: flex;
}
.nav-firsat-zili .zil-ikon svg {
  width: 1em;
  height: 1em;
  display: block;
  /* Zil ara sıra sallanıyor (müşteri isteği). Bekleme süresinin tamamı tek
     animasyonun içinde: kare listesinin ilk %85'i hareketsiz. */
  transform-origin: top center;
  /* Üç saniyede bir belirgin bir "çalma": müşteri ilk ayarı "çok az titriyor"
     bulduğu için hem sıklık (6sn→3sn) hem genlik (14°→18°) artırıldı. */
  animation: zil-salla 3s ease-in-out infinite;
}
@keyframes zil-salla {
  0%,
  58%,
  100% {
    transform: rotate(0deg);
  }
  62% {
    transform: rotate(18deg);
  }
  67% {
    transform: rotate(-16deg);
  }
  72% {
    transform: rotate(12deg);
  }
  77% {
    transform: rotate(-9deg);
  }
  82% {
    transform: rotate(6deg);
  }
  87% {
    transform: rotate(-3deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-firsat-zili .zil-ikon svg {
    animation: none;
  }
}
/* Rozet: ikonun sağ üstüne binen, beyaz halkayla zeminden ayrılan yuvarlak.
   Zemin SARI #f9c260, rakam SİYAH (müşteri kararı 2026-08-12 — önce marka
   bordosu #141313 denenmişti). Sepet sayacı temanın kahve `--Primary`
   renginde kalıyor: yalnız `.count-zil` eziliyor. */
.header-default .nav-icon .count-box.count-zil {
  background-color: #f9c260;
  color: #111111;
  width: 20px;
  height: 20px;
  top: -6px;
  right: -7px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px #fff;
}

.firsat-zili-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(340px, calc(100vw - 24px));
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 1200;
  text-align: center;
}
/* Zil ile panel arasındaki boşlukta fare "dışarı" çıkmasın diye görünmez
   köprü — olmazsa panel elin altından kaçıyor. */
.firsat-zili-panel::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.nav-firsat-zili.zil-acik .firsat-zili-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* ⚠️ Fareyle açılma YALNIZ gerçek imleci olan cihazlarda. Dokunmatikte tarayıcı
   dokunuştan sonra `:hover`ı öğenin üstünde bırakıyor; JS `zil-acik` sınıfını
   kaldırsa bile bu kural paneli açık tutuyordu, yani ikinci dokunuş pencereyi
   kapatmıyordu (müşteri bildirdi, 2026-08-12). */
@media (hover: hover) and (pointer: fine) {
  .nav-firsat-zili:hover .firsat-zili-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}
.firsat-zili-ust {
  background: #141313;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  padding: 10px 16px;
}
.firsat-zili-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.firsat-zili-liste > li + li {
  border-top: 1px solid #ececec;
}
.firsat-zili-satir {
  display: block;
  padding: 14px 18px;
  color: #1f1f1f;
  font-size: 14px;
  line-height: 1.5;
}
.firsat-zili-satir strong {
  display: block;
  font-weight: 600;
}
.firsat-zili-satir strong + span {
  display: block;
  margin-top: 4px;
}
a.firsat-zili-satir:hover {
  background: #faf3f5;
  color: #141313;
}

/* Dar ekranda zil sepetin hemen solunda kalıyor (tema arama/hesap/favori
   ikonlarını 1199px altında gizliyor) — ortalanmış panel sağdan taşardı. */
@media (max-width: 1199px) {
  .firsat-zili-panel,
  .nav-firsat-zili:hover .firsat-zili-panel,
  .nav-firsat-zili.zil-acik .firsat-zili-panel {
    left: auto;
    right: -8px;
    transform: none;
  }
}

/* === Ürün sayfası teslimat notu tek satıra sığsın (2026-08-15) ===
   "Türkiye'den tüm dünyaya kapınıza kadar, Ankara merkez ilçelerine ücretsiz
   kurulum ve teslimat." cümlesi uzadığı için temanın 14px `.text-caption-1`
   ölçüsünde iki satıra düşüyordu.

   Ölçüldü (satın alma kutusu 561 px, metnin kaplayacağı genişlik):
   14px → 2 satır · 12px → 559 px (kıl payı) · 11px → 513 px (48 px pay).
   Kıl payı sığan boyut bırakılsaydı birkaç piksel kayan her düzende yine
   kırılırdı; 11px seçildi.

   ⚠️ Yalnız geniş ekranda: dar ekranda kutu daralıyor, orada satırın bölünmesi
   normal — mobilde metni küçültmenin anlamı yok. Yüklem yalnızca bu bloğa
   sabitlendi, `.text-caption-1` sitenin başka yerlerinde de kullanılıyor. */
@media (min-width: 1200px) {
  .tf-product-info-return .text-caption-1 {
    font-size: 11px;
    line-height: 1.45;
  }
}

/* Ürün sayfasında ekranın altına yapışan satın alma çubuğu (.tf-sticky-btn-atc)
   müşteri isteğiyle kaldırıldı (2026-08-19): masaüstünde WhatsApp düğmesiyle ve
   yukarı-çık okuyla çakışıyor, mobilde ekranın önemli bölümünü kapatıyordu.
   ⚠️ Bu kural GEÇİCİ görünüm önlemi. Kalıcı çözüm `tools/convert.mjs` içindeki
   `drop-sticky-atc` slotu — çubuğu DOM'dan tamamen çıkarıyor ama etkisi için
   yeniden derleme gerekiyor. Deploy sonrası bu kural boşa düşer, zararsızdır.
   Tema JS'i (main.js) çubuğu kaydırmada `display:flex` ile açtığı için
   !important şart. */
.tf-sticky-btn-atc {
  display: none !important;
}

/* Blog yazısının içine gömülen gerçek ürün kartı (bkz. BlogUrunKarti).
   Yazı sütunu geniş olduğu için kart tek başına dev görünüyordu; makul bir
   genişlikte ortalanıyor ve etrafına nefes payı bırakılıyor. */
.blog-urun-karti {
  max-width: 420px;
  margin: 28px auto 32px;
}
.blog-urun-karti .card-product {
  border: 1px solid #e5e9ee;
  border-radius: 8px;
  overflow: hidden;
}
.blog-urun-karti .card-product-info,
.blog-urun-karti .card-product-info  {
  padding: 14px 16px 18px;
}
@media (max-width: 767px) {
  .blog-urun-karti { max-width: 100%; }
}

/* === Ana sayfa giriş bölümü: H1 + özet (2026-08-19) ===
   Slider ile kategori dairelerinin arasında duruyor. Başlık ortalı, özet sola
   dayalı (müşteri isteği). Bkz. (storefront)/page.tsx `.anasayfa-giris`.

   Vurgu öbeği binbirdesen.com'daki gibi serif italik: Playfair Display 400
   italic. Temanın başlık fontu Marcellus'un italiği YOK — italik verilseydi
   tarayıcı harfleri eğerek sahte italik üretirdi. Font yerelde barındırılıyor
   (fonts.gstatic.com'a istek YOK), yalnız italik 400, latin + latin-ext. */
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/playfair-400italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/playfair-400italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Bölüm, kategori dairelerinin altındaki çizgi ile ürün sekmelerinin arasında
   duruyor. Üstteki boşluğu kategori bölümünün kendi alt dolgusu veriyor (~40px),
   burada yalnız sekmelere kalan pay ayarlanıyor. */
.anasayfa-giris {
  padding: 0 0 42px;
  position: relative;
  /* Alt çizgi ile ürün sekmeleri arasındaki pay (üstteki çizginin altındaki
     boşlukla aynı mantık). */
  margin-bottom: 42px;
}
/* Özetin altına, kategori dairelerinin altındakinin BİREBİR aynısı olan gri
   ayırıcı çizgi (müşteri isteği, 2026-08-19). Ölçüler `styles.css`teki
   `.line-bottom-container::after` ile aynı: 1px, var(--line), ortalı,
   en fazla 1070px. */
.anasayfa-giris::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 50%;
  background-color: var(--line);
  height: 1px;
  width: 100%;
  max-width: 1070px;
  transform: translateX(-50%);
}
.anasayfa-giris .anasayfa-h1 {
  text-align: center;
  font-size: 32px;
  line-height: 1.25;
  margin: 0 0 14px;
}
.anasayfa-giris .anasayfa-h1 em {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}
/* Özet de ortalı (müşteri isteği, 2026-08-19 — önce sola dayalıydı). */
.anasayfa-giris .anasayfa-ozet {
  text-align: center;
  font-size: 15px;
  line-height: 1.75;
  color: var(--Onsurface);
  margin: 0;
}
/* Kapanış cümlesi ("Mobilyaya servet ödemeyin!") italik — tema em'i sıfırlarsa
   diye açıkça yazıldı (2026-08-20, müşteri isteği). */
.anasayfa-giris .anasayfa-ozet em {
  font-style: italic;
}
@media (max-width: 767px) {
  .anasayfa-giris {
    padding: 0 0 26px;
    margin-bottom: 26px;
  }
  .anasayfa-giris .anasayfa-h1 {
    font-size: 21px;
    line-height: 1.3;
    margin-bottom: 10px;
  }
  .anasayfa-giris .anasayfa-ozet {
    font-size: 14px;
    line-height: 1.7;
  }
}

/* === /magazalar/ — "Yol tarifi al" bağlantısı (2026-08-22, müşteri isteği) ===
   1) Kartların adres/telefon satır sayısı farklı olduğu için bağlantı her kutuda
      başka yükseklikte kalıyordu. Izgara (>=768px) hücreleri zaten eşit
      yükseklikte; eksik olan `.location-item`in hücreyi doldurması. Kart flex
      sütuna çevrilip bağlantı `margin-top:auto` ile dibe itiliyor → hepsi
      aynı hizada.
   2) Yazı ve önüne eklenen konum ikonu marka renginde (#141313). */
@media (min-width: 768px) {
  .wrap-box-location > .swiper-slide {
    height: 100%;
    display: flex;
  }
  .wrap-box-location .location-item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .wrap-box-location .location-item .content {
    flex: 1 1 auto;
  }
  .wrap-box-location .location-item .magaza-yol-tarifi {
    margin-top: auto;
  }
}
.magaza-yol-tarifi,
.magaza-yol-tarifi:hover {
  color: #141313;
  gap: 6px;
}
.magaza-yol-tarifi-ikon {
  flex: 0 0 auto;
  color: #141313;
}