/* @import EN BAŞTA olmalı, yoksa tarayıcı yok sayar.
   TEK web font (sadece başlıklar için, 2 ağırlık): @import render-blocking'tir,
   iki aile yüklerken LCP 3084 -> 3712 ms'ye çıktı. Gövde sistem fontunda kalıyor.
   latin-ext = Türkçe karakterler (ı, ğ, ş, İ, Â). */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&display=swap&subset=latin,latin-ext');

/* ============================================================
   HATT-I ÂLÂ — özel tema katmanı
   Hedef: Tasarım > Tema Yönetimi > [KLON tema] > CSS alanı

   Yön: krem zemin + koyu zümrüt + altın.
   Sitede 193 yerde geçen fosforlu #CACC34 ve parlak yeşil #3FC327
   kaldırıldı; 5.000–18.000 TL'lik hat/gümüş ürünlerle uyumsuzdu.

   Seçiciler hattiala.com DOM'undan birebir alındı (productItem,
   discountIcon, landing-block, .bold .satir1 ...) — varsayım yok.
   ============================================================ */

:root {
  --zumrut:        #133D33;
  --zumrut-koyu:   #0C2A23;
  --zumrut-soft:   rgba(19, 61, 51, .08);

  --altin:         #A8842C;
  --altin-acik:    #C9A961;
  --altin-soft:    rgba(168, 132, 44, .10);

  --krem:          #FAF7F1;
  --krem-koyu:     #F2EDE3;
  --beyaz:         #FFFFFF;

  --metin:         #1A1512;
  --metin-orta:    #4A423A;
  --metin-soluk:   #857A6D;
  --cizgi:         #E6DED0;

  --indirim:       #8C2F39;   /* bordo — kırmızı yerine, lüks segment */

  --font-baslik:   "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-govde:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --r-sm: 6px;
  --r:    12px;
  --r-lg: 18px;

  --golge:       0 1px 2px rgba(26, 21, 18, .04), 0 6px 20px rgba(26, 21, 18, .06);
  --golge-hover: 0 2px 6px rgba(26, 21, 18, .06), 0 18px 40px rgba(19, 61, 51, .14);
  --gecis:       220ms cubic-bezier(.2, .8, .2, 1);

  --maxw: 1280px;
}

/* ============================================================
   1) TEMEL
   ============================================================ */

body {
  background: var(--krem) !important;
  color: var(--metin);
  font-family: var(--font-govde);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body h1, body h2, body h3, body h4 {
  font-family: var(--font-baslik);
  color: var(--metin);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
}

body a { transition: color var(--gecis); }
body a:hover { color: var(--altin); }

::selection { background: var(--altin-soft); color: var(--metin); }

/* Fosforlu sarı-yeşili kökten temizle: eski tema onu her yere basmış.
   Sadece bilinen kullanım noktalarında, kör !important taraması değil. */

/* ============================================================
   2) HEADER
   ============================================================ */

body .homeHeader,
body .headerContent {
  background: var(--beyaz);
  border-bottom: 1px solid var(--cizgi);
}

body .HeaderMenu2 .navUl > li > a,
body .navUl > li > a {
  font-family: var(--font-govde);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--metin-orta);
  padding: 18px 14px;
  position: relative;
}

/* Menüde altın alt çizgi — hover'da içeriden dışarı açılır */
body .navUl > li > a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 12px;
  height: 1.5px;
  background: var(--altin);
  transform: scaleX(0);
  transition: transform var(--gecis);
}
body .navUl > li:hover > a { color: var(--zumrut); }
body .navUl > li:hover > a::after { transform: scaleX(1); }

/* .aramaButonu bir <div> — dolgu verilince dikey uzuyordu, boyutu sabitle */
body .aramaButonu {
  width: 38px;
  height: 38px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--metin-orta);
  border-radius: 50%;
  transition: background var(--gecis), color var(--gecis);
}
body .aramaButonu:hover { background: var(--zumrut-soft); color: var(--zumrut); }

/* Header ikonları (sepet, üyelik) aynı dilde */
body .headerContent .fa { color: var(--metin-orta); transition: color var(--gecis); }
body .headerContent a:hover .fa { color: var(--altin); }

/* ============================================================
   3) BÖLÜM BAŞLIKLARI  (.bold .satir1 — "Çok Satanlar" vb.)
   Eski hali: küçük, gri, ortalanmış, bölüm başlığı gibi durmuyordu.
   ============================================================ */

body .bold .satir1,
body .landing-block .satir1 {
  display: inline-block;
  font-family: var(--font-baslik) !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
  color: var(--metin) !important;
  text-transform: none !important;
  padding-bottom: 14px;
  margin-bottom: 6px;
  position: relative;
}

/* Başlığın altına ortalanmış altın çizgi + ortasında elmas */
body .bold .satir1::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 56px; height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--altin), transparent);
}

/* ============================================================
   4) ANA SAYFA BLOK RİTMİ
   ============================================================ */

body .landing-block { padding-top: 8px; padding-bottom: 8px; }

body .landing-block.dd { margin-top: 40px !important; margin-bottom: 40px !important; }

/* Üçlü konsept banner (Korunma & Nazar / Bereket & Bolluk / Kısmet & Nasip) */
body .dortluAltBlok .blokResimLink,
body .blokResimLink {
  display: block;
  overflow: hidden;
  border-radius: var(--r);
  box-shadow: var(--golge);
  transition: transform var(--gecis), box-shadow var(--gecis);
}
body .blokResimLink:hover {
  transform: translateY(-4px);
  box-shadow: var(--golge-hover);
}
/* width:100% VERME: hero slider görseli de .blokResimLink içinde ve doğal
   genişliği 1147px. %100'e gerilince owl item'ını (1440px) taşırıp
   kenarlardan kesiliyordu. max-width yeter. */
body .blokResimLink img { display: block; max-width: 100%; height: auto; transition: transform 600ms cubic-bezier(.2,.8,.2,1); }
body .blokResimLink:hover img { transform: scale(1.04); }

/* ============================================================
   5) ÜRÜN KARTI — sitenin en çok tekrar eden bileşeni
   ============================================================ */

body .productItem {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
  position: relative;
}
body .productItem:hover {
  transform: translateY(-5px);
  box-shadow: var(--golge-hover);
  border-color: rgba(168, 132, 44, .35);
}

/* Görsel oranını SABİTLE: hem hizasız kartları düzeltir hem de
   CLS 1.527'nin ana sebebi olan lazy-load zıplamasını keser. */
body .productItem .productImage {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--krem-koyu);
  overflow: hidden;
}
body .productItem .productImage img,
body .productItem img.resimOrginal {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.2, .8, .2, 1);
}
body .productItem:hover img.resimOrginal { transform: scale(1.05); }

body .productItem .productDetail { padding: 16px 16px 18px; }

body .productItem .productMarka {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--altin);
  margin-bottom: 6px;
}

body .productItem .productName,
body .productItem .productName a {
  font-family: var(--font-baslik);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--metin);
  /* iki satırda sabitle — kart yükseklikleri eşitlensin */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

/* ============================================================
   6) FİYAT
   ============================================================ */

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

body .discountPrice,
body .discountPriceSpan {
  font-family: var(--font-govde);
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--metin) !important;
  font-feature-settings: "tnum";   /* rakamlar hizalı */
}

body .regularPrice,
body .regularPriceSpan {
  font-size: 14px !important;
  color: var(--metin-soluk) !important;
  text-decoration: line-through;
  text-decoration-color: rgba(140, 47, 57, .5);
}

body .discountKdv, body .regularKdv {
  font-size: 11px;
  color: var(--metin-soluk);
  letter-spacing: .02em;
}

/* ============================================================
   7) ROZETLER — asıl sorun buradaydı
   Eskiden: fosforlu #CACC34 + parlak yeşil #3FC327, her kartta
   2-3 tane, ürünün önüne geçiyordu. Artık sakin ve tek dilde.
   ============================================================ */

body .discountIcon,
body .discountIcon_s1,
body .discountIcon_s2,
body .discountIconDetail,
body .firsatIcon,
body .newIcon,
body .cargoIcon {
  background: var(--zumrut) !important;
  color: var(--beyaz) !important;
  font-family: var(--font-govde) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  border: none !important;
  line-height: 1.4 !important;
}

/* İndirim yüzdesi tek vurgulu öğe olsun — altın */
body .discountIcon,
body .discountIcon_s1,
body .discountIcon_s2 {
  background: var(--altin) !important;
  color: var(--beyaz) !important;
  font-weight: 600 !important;
}

/* "Ücretsiz Kargo" en sessiz olan: çerçeveli, dolgusuz */
body .cargoIcon {
  background: rgba(255, 255, 255, .92) !important;
  color: var(--zumrut) !important;
  border: 1px solid rgba(19, 61, 51, .25) !important;
  backdrop-filter: blur(4px);
}

/* Ticimax rozetleri SABİT px ile konumluyor (left: 245.5px). Ana sayfa
   carousel'indeki kartlar kategori kartlarından dar olduğu için rozet
   taşıyor ve kartın overflow:hidden'ı yarısını kesiyordu.
   Sabit left yerine kenara sabitle — her kart genişliğinde çalışır. */
body .productItem .discountIcon,
body .productItem .discountIcon_s1,
body .productItem .discountIcon_s2 {
  position: absolute !important;
  left: auto !important;
  right: 8px !important;
  top: 8px !important;
  bottom: auto !important;
  z-index: 5;
}

body .productItem .cargoIcon {
  position: absolute !important;
  left: auto !important;
  right: 8px !important;
  top: 42px !important;      /* indirim rozetinin altına */
  bottom: auto !important;
  z-index: 5;
}

body .productItem .firsatIcon,
body .productItem .newIcon {
  position: absolute !important;
  left: 8px !important;
  right: auto !important;
  top: 8px !important;
  bottom: auto !important;
  z-index: 5;
}

/* Rozetin GERÇEK yapısı: .discountIcon > (_s1 "%25" + _s2 "İndirim"
   + .discountIconDetail "%25İndirim"). Tema CSS'i olmadan üçü de ayrı
   hap gibi üst üste biniyordu: dıştaki altın hap kalsın, içtekiler
   düz metin olsun, tekrar eden .discountIconDetail gizlensin. */
body .productItem .discountIcon .discountIcon_s1,
body .productItem .discountIcon .discountIcon_s2 {
  position: static !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: inline !important;
}
body .productItem .discountIcon .discountIconDetail { display: none !important; }

/* ============================================================
   8) AKSİYONLAR — sepete ekle, favori
   ============================================================ */

body .btnAddToCart,
body .urunListeSpanSepeteEkle {
  background: var(--zumrut) !important;
  color: var(--beyaz) !important;
  border: 1px solid var(--zumrut) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-govde) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background var(--gecis), transform var(--gecis);
}
body .btnAddToCart:hover,
body .urunListeSpanSepeteEkle:hover {
  background: var(--altin) !important;
  border-color: var(--altin) !important;
  transform: translateY(-1px);
}

body .productIcon .favori i,
body .productIcon .favori .fa-heart { color: var(--metin-soluk); transition: color var(--gecis); }
body .productIcon .favori:hover i { color: var(--indirim); }

/* Adet kutusu */
body .urunListeAdet {
  border: 1px solid var(--cizgi) !important;
  border-radius: var(--r-sm) !important;
  background: var(--beyaz) !important;
}
body .qtyPlus, body .qtyMinus { color: var(--metin-orta) !important; transition: color var(--gecis); }
body .qtyPlus:hover, body .qtyMinus:hover { color: var(--altin) !important; }

/* ============================================================
   9) KATEGORİ SAYFASI
   ============================================================ */

body .categoryTitle,
body .categoryTitleText,
body .proCategoryTitle {
  font-family: var(--font-govde);
  font-size: 12px;
  color: var(--metin-soluk);
  letter-spacing: .04em;
}
body .categoryTitleText a { color: var(--metin-soluk); }
body .categoryTitleText a:hover { color: var(--altin); }

body .FiltreUst {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  font-family: var(--font-govde);
}
body .appliedFilter { font-size: 13px; color: var(--metin-orta); }

/* ============================================================
   10) ÜRÜN DETAY
   ============================================================ */

body .urunDetayFiyatContainer h1,
body .proDetayBilgi h1,
body h1 {
  font-family: var(--font-baslik);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--metin);
}

body .urunDetayFiyatContainer .spanFiyat,
body .PriceList .spanFiyat {
  font-family: var(--font-govde);
  font-size: 30px;
  font-weight: 600;
  color: var(--zumrut);
  font-feature-settings: "tnum";
}

body .Formline { border-bottom: 1px solid var(--cizgi); padding: 12px 0; }
body .lineTitle { color: var(--metin-soluk); font-size: 13px; letter-spacing: .02em; }

body .PiyasafiyatiContent { color: var(--metin-soluk); }

/* Varyant seçimi (Maden Rengi vb.) */
body .eksecenekSelect,
body select.eksecenekSelect {
  border: 1.5px solid var(--cizgi) !important;
  border-radius: var(--r-sm) !important;
  padding: 11px 14px !important;
  font-family: var(--font-govde);
  font-size: 14px;
  color: var(--metin);
  background: var(--beyaz);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
body .eksecenekSelect:focus {
  outline: none;
  border-color: var(--altin) !important;
  box-shadow: 0 0 0 4px var(--altin-soft);
}

/* Galeri */
body .yanResimliMenuContent img { border-radius: var(--r-sm); border: 1px solid var(--cizgi); transition: border-color var(--gecis); }
body .yanResimliMenuContent img:hover { border-color: var(--altin); }

body .odemeSecenekItem {
  border: 1px solid var(--cizgi);
  border-radius: var(--r-sm);
  background: var(--krem);
}

/* ============================================================
   11) OWL CAROUSEL — ok ve noktalar
   ============================================================ */

body .owl-nav button,
body .owl-prev, body .owl-next {
  background: var(--beyaz) !important;
  border: 1px solid var(--cizgi) !important;
  color: var(--zumrut) !important;
  border-radius: 50% !important;
  width: 44px !important; height: 44px !important;
  box-shadow: var(--golge);
  transition: background var(--gecis), color var(--gecis), transform var(--gecis);
}
body .owl-prev:hover, body .owl-next:hover {
  background: var(--zumrut) !important;
  color: var(--beyaz) !important;
  transform: scale(1.06);
}

body .owl-dot span {
  background: var(--cizgi) !important;
  transition: background var(--gecis), width var(--gecis);
}
body .owl-dot.active span { background: var(--altin) !important; width: 22px !important; border-radius: 999px !important; }

/* NOT: .owl-item img'e width:100% VERME. Hero slider görseli 1147px doğal
   genişlikte; owl item genişliğini ona göre hesaplıyor. %100'e zorlayınca
   slayt taşıyor ve kenarlardan kesiliyor. Sadece taşmayı engelle. */
body .owl-carousel .owl-item img { display: block; max-width: 100%; height: auto; }

/* ============================================================
   12) E-BÜLTEN — eskiden yalnız bir input + fosforlu buton
   ============================================================ */

/* Gerçek yapı: .newaslater > .newsletterContent > (input.newstext + a.newsbutton)
   Bandı .newaslater'a veriyoruz — .newsletterContent sadece 40px'lik satır,
   ona dolgu verilince buton banttan dışarı kaçıyordu. */
body .newaslater {
  background: var(--zumrut) !important;
  border-radius: var(--r-lg);
  padding: 26px 30px !important;
  margin: 28px 0;
}

body .newaslater .newsletterContent {
  display: flex !important;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 620px;
  margin: 0 auto;
}

/* Koyu zeminde e-bülten metni okunur kalsın */
body .newaslater,
body .newaslater span,
body .newaslater label { color: rgba(250, 247, 241, .92) !important; }

body input.newstext,
body .newsletterContent input[type="text"] {
  flex: 1 1 240px;
  background: rgba(255, 255, 255, .96) !important;
  border-color: transparent !important;
  min-height: 46px;
}
body input.newstext::placeholder { color: var(--metin-soluk); }

/* Fosforlu "Gönder" (a.newsbutton.button — #CACC34) → altın */
body a.newsbutton,
body a.newsbutton.button {
  background: var(--altin) !important;
  color: var(--beyaz) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  min-height: 46px;
  display: inline-flex !important;
  align-items: center;
  padding: 0 24px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px !important;
}
body a.newsbutton:hover { background: var(--altin-acik) !important; }

body input[type="text"], body input[type="email"], body input[type="password"] {
  font-family: var(--font-govde);
  border: 1.5px solid var(--cizgi);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  color: var(--metin);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
body input[type="text"]:focus, body input[type="email"]:focus {
  outline: none;
  border-color: var(--altin);
  box-shadow: 0 0 0 4px var(--altin-soft);
}

/* Fosforlu "Gönder" butonu → altın */
body .button, body input[type="submit"], body .btnGonder {
  background: var(--altin) !important;
  color: var(--beyaz) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-govde) !important;
  font-weight: 500 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px !important;
  padding: 12px 22px !important;
  transition: background var(--gecis), transform var(--gecis);
}
body .button:hover, body input[type="submit"]:hover {
  background: var(--zumrut) !important;
  transform: translateY(-1px);
}

/* ============================================================
   13) FOOTER  (gerçek class'lar: .homeFooter / .footerTop / .footerCenter)
   ============================================================ */

/* Asıl gri katman .footerGenelTutucu (#EFEFEF) — .footerCenter şeffaf,
   ona renk vermek işe yaramıyordu; içindeki .footerTopTutucu beyazdı ve
   üstünü örtüyordu. İkisini birden hedefle. */
body .footerGenelTutucu {
  background: var(--zumrut-koyu) !important;
  color: rgba(250, 247, 241, .70);
  padding-top: 8px;
}
body .footerTopTutucu { background: transparent !important; }

/* Logo + sosyal ikon şeridi: koyu footer'dan önce krem nefes alanı */
body .homeFooter {
  background: var(--krem) !important;
  border-top: 1px solid var(--cizgi);
  padding: 8px 0 26px !important;
}

body .footerGenelTutucu a,
body .footerCenter a { color: rgba(250, 247, 241, .70) !important; }
body .footerGenelTutucu a:hover,
body .footerCenter a:hover { color: var(--altin-acik) !important; }

/* Koyu zeminde HİÇBİR metin karanlıkta kalmasın (açıklama satırları,
   telif, span'ler). Başlık kuralı bundan sonra gelip altın'ı geri alıyor. */
body .footerGenelTutucu,
body .footerGenelTutucu p,
body .footerGenelTutucu span,
body .footerGenelTutucu li,
body .footerGenelTutucu div { color: rgba(250, 247, 241, .70); }

/* Sütun başlıkları GERÇEKTE <h5> (class'sız, parent .dortluAltBlok).
   Rengi #2F2F2F — koyu zümrüt zeminde okunmuyordu, görünmez metin.
   .dortluAltBlok ana sayfada da var, o yüzden footer'a kapsamlı yaz. */
body .footerGenelTutucu h5,
body .footerGenelTutucu h4,
body .footerGenelTutucu .baslik,
body .footerGenelTutucu strong,
body .footerGenelTutucu b {
  font-family: var(--font-govde) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--altin-acik) !important;
}

/* Sosyal ikonlar krem şeritte — zümrüt, hover'da altın */
body .homeFooter .fa,
body .footerLogoTutucu .fa {
  color: var(--zumrut);
  transition: color var(--gecis), transform var(--gecis);
}
body .homeFooter a:hover .fa { color: var(--altin); transform: translateY(-2px); }

/* Kart logoları koyu zeminde kaybolmasın */
body .footerGenelTutucu img[src*="kart"],
body .footerGenelTutucu img[src*="card"],
body .footerGenelTutucu img[src*="Kart"] { filter: brightness(0) invert(1); opacity: .5; }

/* ============================================================
   14) YÜZEN BUTONLAR (WhatsApp / yukarı çık)
   ============================================================ */

body .scrollTopButton, body .yukariCik, body #btnScrollTop {
  background: var(--zumrut) !important;
  color: var(--beyaz) !important;
  border-radius: 50% !important;
  box-shadow: var(--golge-hover) !important;
  transition: background var(--gecis), transform var(--gecis);
}
body .scrollTopButton:hover, body .yukariCik:hover { background: var(--altin) !important; transform: translateY(-2px); }

/* ============================================================
   15) MOBİL — trafiğin çoğu burada
   ============================================================ */

@media (max-width: 768px) {
  body .bold .satir1,
  body .landing-block .satir1 { font-size: 26px !important; }

  body .productItem .productDetail { padding: 12px 12px 14px; }
  body .productItem .productName,
  body .productItem .productName a { font-size: 15px; }
  body .discountPrice, body .discountPriceSpan { font-size: 17px !important; }

  /* Dokunma hedefi min 44px */
  body .btnAddToCart,
  body .urunListeSpanSepeteEkle { min-height: 44px !important; display: flex !important; align-items: center; justify-content: center; }
  body .productIcon a, body .favori { min-width: 44px; min-height: 44px; }

  body .owl-nav button, body .owl-prev, body .owl-next { width: 38px !important; height: 38px !important; }

  /* Rozetler mobilde kartın önüne geçiyordu — küçült */
  body .discountIcon, body .firsatIcon, body .newIcon, body .cargoIcon {
    font-size: 9px !important;
    padding: 4px 8px !important;
  }

  body h1, body .urunDetayFiyatContainer h1 { font-size: 26px; }

  /* Mobil alt sabit bar (.bottomHead — Anasayfa/Favorilerim/Sepetim/Üye Girişi) */
  body .bottomHead {
    background: rgba(255, 255, 255, .97) !important;
    border-top: 1px solid var(--cizgi) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 -2px 16px rgba(26, 21, 18, .06);
  }
  body .bottomHead a { color: var(--metin-orta) !important; font-size: 11px; }
  body .bottomHead .fa { color: var(--zumrut) !important; }

  /* E-bülten mobilde alt alta: buton input'un ÜSTÜNDE kalıyordu */
  body .newaslater { padding: 20px 16px !important; }
  body .newaslater .newsletterContent {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  body input.newstext { flex: 1 1 auto; width: 100% !important; }
  body a.newsbutton,
  body a.newsbutton.button {
    width: 100% !important;
    justify-content: center;
    order: 2;           /* her koşulda input'un altına */
  }
  body input.newstext { order: 1; }

  /* Footer sütunları mobilde ortalanmış — başlıklar arası nefes */
  body .footerCenter h4, body .footerCenter strong { margin-top: 22px; display: block; }
}

/* ============================================================
   16) YAPISAL KATMAN — yeni Ticimax tasarım editörü için
   Yeni tasarım modülü eski temanın style.css'ini YÜKLEMİYOR;
   sayfada yalnız coreV2 + bu dosya kalıyor. Header, ürün detay,
   footer ve mobil düzeni bu bölüm kuruyor. Tüm seçiciler canlı
   DOM'dan (playwright ile style.css engellenerek) doğrulandı.
   ============================================================ */

/* --- genel kap ve sıfırlamalar ------------------------------ */

body .ticiContainer {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Tema CSS'i yokken owl'un kırpma katmanı da yok — komşu slaytlar
   yana taşıp mobilde yatay kaydırma yaratıyordu */
body .owl-stage-outer { overflow: hidden !important; }

/* padding'li input/butonlar genişlik hesabına dahil olsun
   (e-bülten input'u mobilde %100 + padding ile taşıyordu) */
body input, body select, body textarea, body .button, body a.newsbutton { box-sizing: border-box; }

/* Son emniyet kemeri: tek tük taşan öğe sayfayı kaydırtmasın.
   hidden DEĞİL clip: hidden body'yi kaydırma konteynerine çevirip
   scrollWidth'i büyük bırakıyor, clip gerçekten kırpıyor. */
html, body { overflow-x: clip; }

#header ul, #footer ul, body .footerGenelTutucu ul,
body .bottomHead ul, body .mobilMenu ul, ul.breadcrumb {
  list-style: none;
  margin: 0;
  padding: 0;
}
#header a, #footer a, body .footerGenelTutucu a,
body .bottomHead a, ul.breadcrumb a { text-decoration: none; }

/* --- HEADER: 3 satırlı grid --------------------------------- */
/* Satır 1: tel | Anasayfa-İletişim | üye linkleri
   Satır 2: arama | logo | sepet
   Satır 3: navigasyon (tam genişlik)                           */

#header { background: var(--beyaz); position: relative; z-index: 200; }

#header .headerContent {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 8px 24px 0;
  display: grid;
  grid-template-columns: 1fr minmax(240px, auto) 1fr;
  align-items: center;
  column-gap: 24px;
  row-gap: 2px;
}

/* #logo sarmalayıcıları grid'e karışmasın — çocukları grid item olsun */
#header #logo, #header #logo .hText { display: contents; }

#header .hText .pull-left   { grid-row: 1; grid-column: 1; justify-self: start; }
#header .usernav            { grid-row: 1; grid-column: 2; justify-self: center; }
#header #divMemberPanel     { grid-row: 1; grid-column: 3; justify-self: end; }
#header #divTopProductSearch{ grid-row: 2; grid-column: 1; justify-self: start; width: 100%; max-width: 340px; }
#header .hText .pull-right  { grid-row: 2; grid-column: 2; justify-self: center; padding: 14px 0 12px; }
#header #divHeaderCart      { grid-row: 2; grid-column: 3; justify-self: end; }
#header .navigation         { grid-row: 3; grid-column: 1 / -1; }
#header .yanResimliMenu     { display: none; }

/* Satır 1: sakin üst bar */
#header .hText .pull-left,
#header .usernav,
#header #divMemberPanel {
  font-size: 12.5px;
  color: var(--metin-soluk);
  padding-top: 4px;
}
#header .usernav ul, #header #divMemberPanel ul { display: flex; gap: 20px; }
#header .usernav a, #header #divMemberPanel a { color: var(--metin-orta); }
#header .hText .pull-left a { color: var(--metin-orta); }
#header .hText .pull-left strong { font-weight: 600; color: var(--zumrut); }

/* Logo */
#header .hText .pull-right img { display: block; height: 62px; width: auto; }

/* Arama: hap formu, buton zümrüt */
#header #divArama {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--cizgi);
  border-radius: 999px;
  overflow: hidden;
  background: var(--beyaz);
  transition: border-color var(--gecis);
}
#header #divArama:focus-within { border-color: var(--altin); }
#header #divArama input#txtbxArama {
  flex: 1;
  min-width: 0;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent;
  padding: 10px 18px !important;
  font-size: 13px;
}
#header #divArama input#btnKelimeAra {
  border: none !important;
  border-radius: 0 !important;
  background: var(--zumrut) !important;
  color: var(--beyaz) !important;
  padding: 0 20px !important;
  font-size: 12px !important;
  letter-spacing: .06em;
  cursor: pointer;
}
#header #divArama input#btnKelimeAra:hover { background: var(--altin) !important; }

/* Sepet: zümrüt hap + altın sayaç */
#header #divHeaderCart { position: relative; }
#header #divHeaderCart > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--zumrut);
  color: var(--beyaz) !important;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: .05em;
  transition: background var(--gecis);
}
#header #divHeaderCart > a:hover { background: var(--zumrut-koyu); color: var(--beyaz) !important; }
#header #divHeaderCart .sepetUrunSayisi {
  background: var(--altin);
  color: var(--beyaz);
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  padding: 0 6px;
}
/* Sepet açılır kutusu (JS gösterince) sayfayı itmesin, üstte dursun */
#header #divHeaderCart .CartProduct {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 340px;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  box-shadow: var(--golge-hover);
  padding: 16px;
  z-index: 300;
}

/* Navigasyon: ortalanmış tek sıra */
#header .navigation { border-top: 1px solid var(--cizgi); margin-top: 10px; }
#header #divUcTopMenu { position: relative; }
#header ul.navUl { display: flex; flex-wrap: wrap; justify-content: center; }
#header ul.navUl > li { position: relative; }
#header ul.navUl > li > a { display: inline-block; }
/* Mega menü (JS doldurursa) akışı itmesin */
#header #divUcTopMenu .TempMenu {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  z-index: 250;
  background: var(--beyaz);
}

/* Masaüstünde mobil ikon düğmeleri gizli (tema CSS'i yokken hepsi
   alt alta görünüyordu) */
#header .aramaButonu,
#header .mobilMenuAcButton,
#header .searchClick,
#header .welcomeOpen,
#header .mycartClick { display: none !important; }

/* Mobil çekmece menü ve alt bar: masaüstünde tamamen gizli.
   (JS açınca inline display:block bizim none'ı ezer — istenen bu.) */
body .mobilMenu { display: none; }
body .bottomHead { display: none; }

/* --- BREADCRUMB --------------------------------------------- */

ul.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 18px 0 6px;
  font-size: 12.5px;
  color: var(--metin-soluk);
}
ul.breadcrumb li { display: flex; align-items: center; gap: 8px; }
ul.breadcrumb li + li::before { content: "›"; color: var(--cizgi); }
ul.breadcrumb a { color: var(--metin-soluk); }
ul.breadcrumb li:last-child a { color: var(--metin-orta); }

/* --- ÜRÜN DETAY: 2 sütunlu grid ----------------------------- */

body .productDetailContainer { padding-bottom: 64px; }

body .ProductDetailMainRow {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 8px 56px;
  align-items: start;
  margin-top: 12px;
}
body .ProductDetailMainRow > .leftImage   { grid-column: 1; grid-row: 1; }
body .ProductDetailMainRow > .RightDetail { grid-column: 2; grid-row: 1; }
body .ProductDetailMainRow > #divUrunOzellikAlani,
body .ProductDetailMainRow > #BenzerUrunDiv,
body .ProductDetailMainRow > .clear { grid-column: 1 / -1; }

/* Galeri */
body .leftImage .Images {
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--beyaz);
}
body .leftImage .Images img { display: block; width: 100%; height: auto; }
body #divThumbList { display: flex !important; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
body #divThumbList .AltImgCapSmallImg { width: 84px; margin: 0 !important; }
body #divThumbList .AltImgCapSmallImg img {
  display: block;
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--cizgi);
  cursor: pointer;
  transition: border-color var(--gecis);
}
body #divThumbList .AltImgCapSmallImg:hover img { border-color: var(--altin); }

/* Sağ sütun: sırayı flex order ile kur — uzun tanıtım yazısı (#divOnyazi)
   fiyat ve satın alma düğmelerinin ALTINA insin */
body .RightDetail { display: flex; flex-direction: column; }
body .RightDetail > * { order: 6; }
body .RightDetail > .ProductName  { order: 1; }
body .RightDetail > .productcode  { order: 2; color: var(--metin-soluk); font-size: 12.5px; margin-top: 4px; }
body .RightDetail > .puanVer      { order: 3; border: none; padding: 4px 0; }
body .RightDetail > #divTahminiTeslimatSuresi { order: 4; }
body .RightDetail > .PriceList    { order: 5; margin-top: 16px; }
body .RightDetail > #divSatinAl   { order: 7; margin-top: 20px; }
body .RightDetail > .ProductIcon  { order: 8; margin-top: 20px; }
body .RightDetail > .ProductIcon2 { order: 9; margin-top: 8px; }
body .RightDetail > #divOnyazi {
  order: 10;
  margin-top: 26px;
  padding: 20px 0 0;
  border-top: 1px solid var(--cizgi);
  border-bottom: none;
  color: var(--metin-orta);
  font-size: 14px;
  line-height: 1.75;
}

body .RightDetail .ProductName h1 { font-size: 30px; margin: 0; }

/* Fiyat satırı */
body .RightDetail .PriceList { border: none; padding: 0; }
body #pnlFiyatlar { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* Varyant seçimleri (Maden Rengi, Zincir Uzunluğu) */
body .productDetailDynamicForm { margin-top: 14px; }
body .productDetailDynamicForm .Formline { border: none; padding: 7px 0; }
body .RightDetail select {
  width: 100%;
  max-width: 420px;
  min-height: 46px;
  border: 1.5px solid var(--cizgi);
  border-radius: var(--r-sm);
  background: var(--beyaz);
  padding: 10px 14px;
  font-family: var(--font-govde);
  font-size: 14px;
  color: var(--metin);
}
body .RightDetail select:focus {
  outline: none;
  border-color: var(--altin);
  box-shadow: 0 0 0 4px var(--altin-soft);
}

/* Satın alma bloğu: [adet] [SEPETE EKLE geniş] [HEMEN AL] */
body #divSatinAl .BasketBtn { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
body #divSatinAl .Basketinp { order: 1; }
body #divSatinAl .basketBtn { order: 2; flex: 1 1 220px; display: flex; }
body #divSatinAl .buyfast   { order: 3; flex: 1 1 160px; display: flex; }

body #divSatinAl .riSingle {
  display: inline-flex;
  align-items: center;
  height: 52px;
  border: 1.5px solid var(--cizgi);
  border-radius: var(--r-sm);
  background: var(--beyaz);
  overflow: hidden;
}
body #divSatinAl input.txtSepetAdet {
  width: 46px;
  border: none !important;
  box-shadow: none !important;
  background: transparent;
  text-align: center;
  font-size: 15px;
  padding: 0 !important;
  order: 2;
}
body #divSatinAl .riDown { order: 1; }
body #divSatinAl .riUp   { order: 3; }
body #divSatinAl .riUp, body #divSatinAl .riDown {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  align-self: stretch;
  height: auto;
  font-size: 18px;
  color: var(--metin-orta);
  background: var(--krem);
  transition: background var(--gecis), color var(--gecis);
}
body #divSatinAl .riUp:hover, body #divSatinAl .riDown:hover { background: var(--altin-soft); color: var(--altin); }
/* Oklar zaten fa-plus/fa-minus ikonu taşıyor — pseudo ile çiftleme,
   ikonları görünür boyuta getir */
body #divSatinAl .riUp .fa, body #divSatinAl .riDown .fa {
  font-size: 13px;
  width: auto;
  color: inherit;
}

body #divSatinAl input.Addtobasket {
  width: 100%;
  min-height: 52px;
  background: var(--zumrut) !important;
  color: var(--beyaz) !important;
  font-size: 13px !important;
  letter-spacing: .1em;
  cursor: pointer;
}
body #divSatinAl input.Addtobasket:hover { background: var(--zumrut-koyu) !important; }
body #divSatinAl input.buyfastbutton {
  width: 100%;
  min-height: 52px;
  background: var(--altin) !important;
  color: var(--beyaz) !important;
  font-size: 13px !important;
  letter-spacing: .1em;
  cursor: pointer;
}
body #divSatinAl input.buyfastbutton:hover { background: var(--altin-acik) !important; }

/* Küçük hizmet linkleri (telefonla sipariş, favori, kargo bedava...) */
body .RightDetail .ProductIcon {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 14px 0;
  border-top: 1px solid var(--cizgi);
  border-bottom: 1px solid var(--cizgi);
}
body .RightDetail .ProductIcon > div { font-size: 12.5px; color: var(--metin-orta); }
body .RightDetail .ProductIcon a { color: var(--metin-orta); }
body .RightDetail .ProductIcon2 { font-size: 12.5px; }

/* Sekmeler (Ürün Özellikleri / Yorumlar / Ödeme Seçenekleri) */
body #divUrunOzellikAlani { margin-top: 56px; }
body .urunTab ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--cizgi);
  list-style: none;
  margin: 0;
  padding: 0;
}
body .urunTab li a {
  display: block;
  padding: 13px 20px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--metin-soluk);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
body .urunTab li.active a {
  color: var(--zumrut);
  border-bottom-color: var(--altin);
  font-weight: 600;
}
body .urunDetayPanel { padding: 22px 0; font-size: 14px; line-height: 1.7; color: var(--metin-orta); }

/* Benzer ürünler: owl yoksa 4'lü grid */
body #BenzerUrunDiv { margin-top: 32px; }
body #BenzerUrunDiv .ProductList:not(:has(.owl-carousel)) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
/* Benzer ürünler owl'u tema CSS'i olmadan item genişliklerini yanlış
   hesaplıyor (90px'lik kulelere eziyordu). Bu bölümde owl mekaniğini
   devre dışı bırakıp düz grid diz: tüm benzer ürünler 4'lü satırlar
   halinde görünür, ok/nokta gizlenir. */
body #BenzerUrunDiv .owl-stage-outer { height: auto !important; overflow: visible !important; }
body #BenzerUrunDiv .owl-stage {
  width: auto !important;
  height: auto !important;
  transform: none !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
body #BenzerUrunDiv .owl-item {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
body #BenzerUrunDiv .owl-nav,
body #BenzerUrunDiv .owl-dots,
body #BenzerUrunDiv .ProductListprev,
body #BenzerUrunDiv .ProductListnext { display: none !important; }

/* --- ÜRÜN KARTI AKSİYON ALANI (.productIcon) ----------------
   Yapı: favori / sepete ekle / ürünü incele / (rozetler absolüt).
   Tema CSS'i olmadan hepsi çıplak link listesiydi.               */

body .productItem a { text-decoration: none; }

body .productItem .productIcon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0 16px 16px;
}

/* Sepete Ekle: tam genişlik ana düğme */
body .productItem .productIcon .mycartIcon { flex: 1 1 100%; order: 1; }
body .productItem .productIcon .mycartIcon a.btnAddToCart {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 0 14px !important;
}

/* Favori + Ürünü İncele: sessiz ikinci satır */
body .productItem .productIcon .favori { order: 2; }
body .productItem .productIcon .examineIcon { order: 3; margin-left: auto; }
body .productItem .productIcon .favori a,
body .productItem .productIcon .examineIcon a {
  font-size: 12px;
  color: var(--metin-soluk);
  letter-spacing: .02em;
}
body .productItem .productIcon .favori a:hover { color: var(--indirim); }
body .productItem .productIcon .examineIcon a:hover { color: var(--altin); }

/* Ürün detay alanındaki tüm linklerde alt çizgi kalksın */
body .ProductDetailMainRow a { text-decoration: none; }
body .urunTab li a { text-decoration: none; }

/* E-bülten bandı ortalı otursun */
body .newaslater { text-align: center; }

/* --- FOOTER: 4 sütun ---------------------------------------- */

body .footerGenelTutucu .ticiContainer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px;
  padding-top: 44px;
  padding-bottom: 28px;
}
body .footerGenelTutucu .dortluAltBlok ul li { margin: 8px 0; font-size: 13px; }
body .footerGenelTutucu .dortluAltBlok h5 { margin: 0 0 14px; }

/* --- MOBİL YAPI (≤991px) ------------------------------------ */

@media (max-width: 991px) {
  /* Header: [menü] [logo] [üye] [sepet] + altta tam genişlik arama */
  #header .headerContent {
    grid-template-columns: auto 1fr auto auto;
    column-gap: 14px;
    padding: 10px 16px 10px;
  }
  #header .mobilMenuAcButton {
    display: flex !important;
    grid-row: 1;
    grid-column: 1;
    align-items: center;
    gap: 6px;
    color: var(--metin-orta);
    font-size: 12px;
    cursor: pointer;
  }
  #header .hText .pull-right { grid-row: 1; grid-column: 2; justify-self: center; padding: 4px 0; }
  #header .hText .pull-right img { height: 44px; }
  #header .welcomeOpen, #header .mycartClick {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--krem);
    cursor: pointer;
  }
  #header .welcomeOpen { grid-row: 1; grid-column: 3; }
  #header .mycartClick { grid-row: 1; grid-column: 4; }
  #header #divTopProductSearch {
    grid-row: 2;
    grid-column: 1 / -1;
    max-width: none;
    margin: 8px 0 2px;
  }
  #header .hText .pull-left,
  #header .usernav,
  #header #divMemberPanel,
  #header #divHeaderCart,
  #header .navigation { display: none !important; }

  /* Çekmece menü: JS inline display:block verince soldan panel */
  body .mobilMenu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: var(--beyaz);
    z-index: 1000;
    overflow-y: auto;
    box-shadow: 20px 0 60px rgba(26, 21, 18, .28);
    padding: 16px 18px 32px;
  }
  body .mobilMenu .menuUstBolum {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cizgi);
    font-size: 14px;
    color: var(--metin);
  }
  body .mobilMenu ul.navUl { display: block; }
  body .mobilMenu ul.navUl > li > a {
    display: block;
    padding: 13px 4px;
    border-bottom: 1px solid var(--krem-koyu);
    font-size: 14px;
    color: var(--metin-orta);
  }
  body .mobilMenu ul.navUl > li > a::after { display: none; }

  /* Alt sabit bar */
  body .bottomHead {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
  }
  body .bottomHead ul { display: flex; }
  body .bottomHead li { flex: 1; text-align: center; padding: 9px 0 7px; }
  body { padding-bottom: 64px; }

  /* Ürün detay tek sütun — minmax(0,1fr) ŞART: düz 1fr'de kolonun
     min-content'i 1200px'lik ürün görseline kilitlenip taşıyor */
  body .ProductDetailMainRow { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  body .ProductDetailMainRow > .RightDetail { grid-column: 1; grid-row: auto; }
  body .ProductDetailMainRow > .leftImage { grid-column: 1; grid-row: auto; }
  body .RightDetail .ProductName h1 { font-size: 24px; }
  body #divThumbList .AltImgCapSmallImg,
  body #divThumbList .AltImgCapSmallImg img { width: 64px; }
  body #divThumbList .AltImgCapSmallImg img { height: 64px; }
  body #divSatinAl .basketBtn, body #divSatinAl .buyfast { flex: 1 1 100%; }

  /* Mobil sekmeler (.mobilTab — masaüstündeki .urunTab'ın mobil ikizi):
     çıplak mavi liste yerine hap çipler */
  body .mobilTab ul {
    list-style: none;
    margin: 0;
    padding: 0 0 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid var(--cizgi);
  }
  body .mobilTab li a {
    display: block;
    padding: 10px 14px;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--metin-orta);
    text-decoration: none;
    background: var(--beyaz);
  }
  body .mobilTab li.active a {
    background: var(--zumrut);
    border-color: var(--zumrut);
    color: var(--beyaz);
  }

  /* Benzer ürünler + footer daralt */
  body #BenzerUrunDiv .ProductList:not(:has(.owl-carousel)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body #BenzerUrunDiv .owl-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .footerGenelTutucu .ticiContainer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}

@media (max-width: 560px) {
  body .footerGenelTutucu .ticiContainer { grid-template-columns: 1fr; }
}