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

/* 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 {
  width: 350px;
  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). 210px, en dar yaygın ekranda
     (360px) bile hamburger ve sepet simgesiyle çakışmıyor. */
  .logo-header .logo {
    width: 210px;
  }
}

/* === Ü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: #ab1f45;
  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: #ab1f45; }
.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 #ab1f45;
  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: #ab1f45; 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: #ab1f45;
  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: #ab1f45;
  border-color: #ab1f45;
  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: #ab1f45;
  border-color: #ab1f45;
  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: #ab1f45;
  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: #ab1f45;
}
/* 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: #ab1f45;
}
.facet-price .price-apply {
  margin-top: 16px;
  width: 100%;
  justify-content: center;
  background-color: #ab1f45;
  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: #ab1f45;
  color: #ab1f45;
}
.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: #ab1f45;
  border-color: #ab1f45;
  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 #ab1f45;
  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: #ab1f45;
  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: #ab1f45;
  text-decoration: underline;
}

/* Ana sayfadaki kategori daireleri bölümünün alt boşluğu (tema 100px veriyor).
   Yüklem bölümün içeriğine bağlı — `.flat-spacing-2` başka sayfalarda da var. */
section.flat-spacing-2: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;
  }
}

/* === Ü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) ===
   Tema `--Primary: #827460` (kahve) kullanıyor; bağlantı hover'ı markanın
   fuşyası olacak. Yalnızca METİN bağlantıları hedefleniyor — `--Primary`
   değişkeninin kendisi değiştirilmedi, çünkü aynı değişken düğme zeminleri,
   kenarlıklar ve simge dolguları için de kullanılıyor (38 yerde).
   ⚠️ 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: #ab1f45 !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: #ab1f45;
}

/* 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: #ab1f45 !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: #ab1f45;
}
.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: #ab1f45;
  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: #ab1f45;
  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: #ab1f45;
}
.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: #ab1f45;
  color: #ab1f45;
}
@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 */
.urun-sekmeleri .widget-menu-tab {
  gap: 32px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
  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: #ab1f45;
  border-bottom: 2px solid #ab1f45;
  margin-bottom: -1px;
}
@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-header .logo {
    width: clamp(230px, 17.5vw, 350px);
  }
  .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;
  }
}

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