/*
 * ================================================================
 *  SERA MALZEMELERİ - 2026 MODERN TEMA
 *  Tarımsal Sera Ekipmanları E-Ticaret Sitesi
 *  Version: 2.0 | Tasarım: 2026 Trendleri
 * ================================================================
 */

/* ================================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ================================================================ */
:root {
  /* Ana Renkler - Sera Teması */
  --c-primary:       #1e6b30;
  --c-primary-light: #2e8b45;
  --c-primary-dark:  #145222;
  --c-primary-hover: #27913e;
  --c-accent:        #f59e0b;
  --c-accent-hover:  #d97706;
  --c-earth:         #7c5c3a;

  /* Nötr Renkler */
  --c-white:   #ffffff;
  --c-bg:      #f8faf8;
  --c-bg-alt:  #f1f5f1;
  --c-border:  #d4e4d6;
  --c-text:    #1a2e1c;
  --c-text-2:  #4a634d;
  --c-text-3:  #7a937c;

  /* Gölgeler */
  --shadow-xs:  0 1px 2px rgba(30, 107, 48, 0.06);
  --shadow-sm:  0 2px 8px rgba(30, 107, 48, 0.10);
  --shadow-md:  0 4px 20px rgba(30, 107, 48, 0.13);
  --shadow-lg:  0 8px 32px rgba(30, 107, 48, 0.16);
  --shadow-xl:  0 16px 48px rgba(30, 107, 48, 0.20);

  /* Border Radius */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-full: 9999px;

  /* Geçişler */
  --t-fast:   all 0.15s ease;
  --t-normal: all 0.25s ease;
  --t-slow:   all 0.4s ease;

  /* Tipografi */
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-body);
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.5rem;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
}

/* ================================================================
   2. GLOBAL RESET & BASE
   ================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  /* background-color kaldırıldı — tema kendi arka planını kontrol eder */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Fixed header için offset — topbar (~36px) + ana header (~96px) = ~132px
     JS (common.js) gerçek yüksekliği hesaplar ve üzerine yazar */
  padding-top: 132px;
}

/* Mobil: header position:static olduğu için padding gerekmez */
@media (max-width: 767px) {
  body {
    padding-top: 0 !important;
  }
}

/* Başlık font — renk override kaldırıldı, tema kendi renklerini koruyor */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.3;
}

/* Global link rengi — tema kendi link renklerini yönetir
   Sadece text-decoration override tutuyoruz */
a {
  text-decoration: none;
  transition: var(--t-fast);
}

a:hover {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* ================================================================
   3. HEADER MODERNİZASYONU
   ================================================================ */

/* ================================================================
   3. SERA TOPBAR — İletişim Çubuğu (Yeni 2026 Header)
   ================================================================ */

#sera-topbar {
  background: var(--c-primary-dark);
  color: rgba(255,255,255,0.92);
  font-size: 12.5px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sera-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.sera-topbar-left,
.sera-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sera-contact-link {
  color: rgba(255,255,255,0.88) !important;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  transition: var(--t-fast);
}

.sera-contact-link:hover {
  color: var(--c-white) !important;
}

.sera-contact-link .fa-phone { color: #86efac; }
.sera-contact-link.sera-wa .fa-whatsapp { color: #4ade80; font-size: 15px; }

.sera-topbar-sep {
  color: rgba(255,255,255,0.25);
  font-size: 11px;
}

.sera-topbar-info {
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

.sera-topbar-info .fa-truck { color: var(--c-accent); }

/* Topbar sağ — dil, para, hesap */
.sera-top-lang,
.sera-top-curr {
  color: rgba(255,255,255,0.85) !important;
}

.sera-top-lang select,
.sera-top-curr select,
.sera-top-lang a,
.sera-top-curr a {
  color: rgba(255,255,255,0.85) !important;
  background: transparent !important;
  border: none !important;
  font-size: 12px;
  padding: 0 2px;
}

.sera-top-account {
  color: rgba(255,255,255,0.85) !important;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  transition: var(--t-fast);
}

.sera-top-account:hover {
  color: var(--c-white) !important;
}

/* ================================================================
   4. ANA HEADER — Logo | Arama | Sepet
   ================================================================ */

#header {
  background: var(--c-white);
  border-bottom: 2px solid var(--c-border);
}

#header .header-bottom {
  padding: 12px 0;
}

.sera-header-row {
  display: flex;
  align-items: center;
}

/* ---- LOGO ---- */
.sera-logo-col {
  display: flex;
  align-items: center;
}

.sera-logo {
  width: 100%;
  float: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
}

.sera-logo a {
  display: block;
  line-height: 0;
}

.sera-logo a img,
.sera-logo a img.lazyload,
.sera-logo a img.lazyloaded,
.sera-logo a img.ls-is-cached {
  display: block !important;
  max-height: 72px !important;
  width: auto !important;
  max-width: 220px !important;
  min-height: 40px;
  min-width: 80px;
}

/* Lazyload placeholder - logo alanını rezerve et */
.sera-logo-col .logo::before {
  content: '';
  display: block;
  min-height: 72px;
  min-width: 80px;
}

/* Lazyload yüklenince before'u gizle */
.sera-logo-col .logo:has(img.lazyloaded)::before,
.sera-logo-col .logo:has(img.ls-is-cached)::before {
  display: none;
}

/* ---- ARAMA ---- */
.sera-search-col {
  padding: 0 12px;
}

.search-header-w {
  width: 100%;
}

/* SO Search Pro özel input */
#sosearchpro .search,
.search-header-w .input-group {
  border: 2px solid var(--c-border);
  border-radius: var(--r-full) !important;
  overflow: hidden;
  background: #f8fafb;
  transition: border-color 0.2s;
}

#sosearchpro .search:focus-within,
.search-header-w .input-group:focus-within {
  border-color: var(--c-primary);
  background: var(--c-white);
  box-shadow: 0 0 0 3px rgba(30,107,48,0.10);
}

#sosearchpro .search .form-control,
.search-header-w input[type="text"] {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 46px;
  font-size: 14px;
  padding: 0 16px;
  color: #1a2e1c;
}

#sosearchpro .search .form-control:focus,
.search-header-w input[type="text"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Kategori select */
#sosearchpro .select_category select,
.search-header-w .filter_type select {
  border: none !important;
  border-right: 1px solid var(--c-border) !important;
  border-radius: 0 !important;
  background: #f1f5f1 !important;
  color: #4a634d;
  font-size: 13px;
  height: 46px;
  padding: 0 8px 0 10px;
  max-width: 130px;
}

/* Arama butonu */
#sosearchpro .search .btn-search,
.search-header-w .btn-search,
.search-header-w .btn-default {
  background: var(--c-primary) !important;
  border: none !important;
  border-radius: 0 var(--r-full) var(--r-full) 0 !important;
  color: var(--c-white) !important;
  height: 46px;
  min-width: 52px;
  padding: 0 18px;
  font-size: 16px;
  transition: background 0.2s;
}

#sosearchpro .search .btn-search:hover,
.search-header-w .btn-search:hover {
  background: var(--c-primary-dark) !important;
}

/* ---- SEPET & HESAP ---- */
.sera-cart-col {
  display: flex;
  justify-content: flex-end;
}

.sera-cart-account {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Sepet butonu */
#cart > .btn,
.shopping_cart .btn,
.cart-total .btn {
  background: var(--c-primary) !important;
  color: var(--c-white) !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--t-fast);
  white-space: nowrap;
}

#cart > .btn:hover,
.shopping_cart .btn:hover {
  background: var(--c-primary-dark) !important;
  color: var(--c-white) !important;
}

/* Sepet sayısı badge */
#cart .cart-total span.label,
.total-shopping-cart {
  background: var(--c-accent) !important;
  color: var(--c-white) !important;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* Hesap butonu */
.sera-account-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #4a634d !important;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  transition: var(--t-fast);
  white-space: nowrap;
}

.sera-account-btn:hover {
  background: var(--c-bg);
  border-color: var(--c-primary);
  color: var(--c-primary) !important;
}

.sera-account-btn .fa-user-circle {
  font-size: 16px;
  color: var(--c-primary);
}

/* Tema'nın orijinal top-link'lerini gizle (topbar'a taşındı) */
header#header ul.top-link.list-inline {
  display: none !important;
}

/* ----------------------------------------------------------------
   MOBİL HEADER
   ---------------------------------------------------------------- */
@media (max-width: 767px) {
  #sera-topbar .sera-topbar-inner {
    justify-content: center;
  }

  #sera-topbar .sera-topbar-right {
    display: none;
  }

  .sera-logo a img,
  .sera-logo a img.lazyloaded {
    max-height: 50px !important;
    max-width: 160px !important;
  }

  #header .header-bottom {
    padding: 8px 0;
  }

  .sera-search-col {
    order: 3;
    padding: 6px 15px 0;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .sera-cart-col {
    justify-content: flex-end;
  }

  /* Mobil: sepet butonu kompakt */
  #cart > .btn,
  .shopping_cart .btn {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .sera-logo a img,
  .sera-logo a img.lazyloaded {
    max-height: 58px !important;
    max-width: 180px !important;
  }
}

.cart-total .total-shopping-cart,
#cart .total-shopping-cart {
  background: var(--c-accent);
  color: var(--c-white);
  font-size: 11px;
  font-weight: var(--fw-bold);
  border-radius: var(--r-full);
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  padding: 0 5px;
  position: absolute;
  top: 0;
  right: 0;
}

/* ================================================================
   4. NAVİGASYON / MENÜ
   ================================================================ */

/* NAVİGASYON: so-kstore vertical megamenu kullanır
   .container-megamenu.vertical = sol sidebar menü
   Tema kendi renklerini ayarlar, biz sadece link renklerini güzelleştiriyoruz */

/* Aktif ve hover menü item'ları */
.container-megamenu .megamenu > li > a:hover,
.container-megamenu .megamenu > li.active_menu > a {
  color: var(--c-primary) !important;
}

/* Dropdown alt menü */
.container-megamenu .megamenu .sub-menu {
  border-top: 2px solid var(--c-primary);
}

.container-megamenu .megamenu .sub-menu a:hover {
  color: var(--c-primary) !important;
}

/* ================================================================
   5. ÜRÜN KARTLARI - MODERN 2026
   ================================================================ */

/* ÖNEMLİ: .products-list Bootstrap row'dur (.row .nopadding-xs)
   ve .product-layout Bootstrap col'dur (col-lg-3 col-md-4 vs.)
   Bu sınıflara padding/margin/display override YAPMA — Bootstrap grid kırılır */

/* Ürün kartı container */
.product-item-container {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: var(--t-normal);
  position: relative;
  /* height: 100% kaldırıldı — Bootstrap col height otomatik */
  box-shadow: var(--shadow-xs);
  margin-bottom: 20px;
}

.product-item-container:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--c-primary-light);
}

/* Ürün görseli alanı */
.product-item-container .left-block,
.product-image-container {
  position: relative;
  overflow: hidden;
  background: var(--c-bg);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  /* aspect-ratio kaldırıldı — so-kstore kendi image yüksekliğini belirler */
}

.product-image-container a {
  display: block;
  width: 100%;
}

.product-image-container img,
.product-item-container .left-block img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  padding: 8px;
  transition: transform 0.4s ease;
}

.product-item-container:hover .product-image-container img,
.product-item-container:hover .left-block img {
  transform: scale(1.06);
}

/* Ürün etiketleri */
.box-label {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.label-product {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.4;
}

.label-new {
  background: var(--c-primary);
  color: var(--c-white);
}

.label-sale {
  background: #ef4444;
  color: var(--c-white);
}

/* Aksiyon butonları (hover) */
.button-group {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateX(8px);
  transition: var(--t-normal);
}

.product-item-container:hover .button-group {
  opacity: 1;
  transform: translateX(0);
}

.button-group .btn-button {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: var(--t-fast);
  box-shadow: var(--shadow-xs);
  padding: 0;
}

.button-group .btn-button:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-white);
  transform: scale(1.1);
}

.button-group .wishlist:hover {
  background: #ef4444;
  border-color: #ef4444;
}

/* Ürün bilgi alanı */
.product-item-container .right-block {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
}

/* Yıldız puanı */
.ratings .rating-box {
  display: flex;
  gap: 2px;
  margin-bottom: 4px;
}

.ratings .rating-box .fa-star {
  color: var(--c-accent);
  font-size: 13px;
}

.ratings .rating-box .fa-star-o {
  color: #d1d5db;
  font-size: 13px;
}

/* Ürün adı */
.product-item-container .right-block h4 {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  line-height: 1.4;
  flex: 1;
}

.product-item-container .right-block h4 a {
  color: var(--c-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-item-container .right-block h4 a:hover {
  color: var(--c-primary);
}

/* Fiyat */
.product-item-container .price {
  margin: 4px 0 0;
}

.product-item-container .price-new {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--c-primary);
  display: block;
}

.product-item-container .price-old {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  text-decoration: line-through;
  margin-left: 6px;
}

/* ================================================================
   6. FİLTRE PANELI
   ================================================================ */

.product-filter.filters-panel {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.product-filter .view-mode .btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  color: var(--c-text-2);
  transition: var(--t-fast);
  font-size: 15px;
}

.product-filter .view-mode .btn:hover,
.product-filter .view-mode .btn.active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-white);
}

.product-filter select.form-control,
#input-sort {
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-size: var(--fs-sm);
  color: var(--c-text);
  background: var(--c-bg);
  height: 38px;
  transition: var(--t-fast);
}

.product-filter select.form-control:focus,
#input-sort:focus {
  border-color: var(--c-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 107, 48, 0.10);
}

/* ================================================================
   7. KATEGORİ SAYFASI
   ================================================================ */

.page-category {
  padding-top: 24px;
  padding-bottom: 40px;
}

/* Kategori başlığı */
.products-category .category-info {
  margin-bottom: 20px;
}

.products-category .category-info img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: var(--r-lg);
}

/* Alt kategoriler */
.refine-search h3.title-category {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--c-text);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-border);
}

.refine-search__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.refine-search__list li {
  padding: 0;
}

.refine-search__list li a.thumbnail {
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-border);
  aspect-ratio: 1 / 1;
  transition: var(--t-normal);
  background: var(--c-white);
  padding: 8px;
}

.refine-search__list li a.thumbnail:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.refine-search__list li a.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.refine-search__list li > a:not(.thumbnail) {
  display: block;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  margin-top: 6px;
  font-weight: var(--fw-medium);
  transition: var(--t-fast);
}

.refine-search__list li > a:not(.thumbnail):hover {
  color: var(--c-primary);
}

/* Açıklama aç/kapat */
.btn-collapse,
.btn.btn-outlined {
  background: transparent;
  border: 1px solid var(--c-primary);
  color: var(--c-primary);
  border-radius: var(--r-md);
  padding: 8px 20px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: var(--t-fast);
}

.btn-collapse:hover,
.btn.btn-outlined:hover {
  background: var(--c-primary);
  color: var(--c-white);
}

/* ================================================================
   8. ÜRÜN DETAY SAYFASI
   ================================================================ */

.page-product > .row .product-view,
.page-category > .row .product-view {
  background: var(--c-white);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  margin: 0;
}

/* İki sütunlu layout: sol galeri + sağ bilgi — Bootstrap 3 float grid */
/* display:table-cell kaldırıldı: Bootstrap col-md-* float:left ile çakışıyordu */
@media (min-width: 768px) {
  .content-product-mainheader .row {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }
  .product-view .content-product-left,
  .product-view .content-product-right {
    float: none !important;
    vertical-align: top;
  }
}

/* Sol blok: Galeri */
.content-product-left {
  padding: 0 20px 0 0;
}

.large-image {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  position: relative;
  margin-bottom: 12px;
}

.large-image img.product-image-zoom {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 16px;
}

/* Küçük görseller */
#thumb-slider .image-additional {
  padding: 4px;
}

#thumb-slider .image-additional a {
  display: block;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-bg);
  transition: var(--t-fast);
  cursor: pointer;
}

#thumb-slider .image-additional a:hover,
#thumb-slider .image-additional a.active {
  border-color: var(--c-primary);
}

#thumb-slider .image-additional a img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 4px;
}

/* Sağ blok: Ürün bilgileri */
.content-product-right {
  padding: 0 0 0 8px;
}

/* Ürün kodu */
.model.font-ct {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  margin-bottom: 8px;
  background: var(--c-bg-alt);
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-full);
}

.model.font-ct span {
  font-weight: var(--fw-medium);
  color: var(--c-text-2);
}

/* Yıldız puanı - detay sayfası */
.box-review .rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.rating-box {
  display: flex;
  gap: 3px;
}

.rating-box .fa-star { color: var(--c-accent); font-size: 16px; }
.rating-box .fa-star-o { color: #d1d5db; font-size: 16px; }

/* Fiyat alanı - detay */
.product_page_price.price {
  margin: 16px 0;
  padding: 16px;
  background: linear-gradient(135deg, #f0faf2 0%, #e8f5ea 100%);
  border-radius: var(--r-md);
  border-left: 4px solid var(--c-primary);
}

.product_page_price .price-new span {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--c-primary);
  line-height: 1.2;
}

.product_page_price .price-old {
  font-size: var(--fs-md);
  color: var(--c-text-3);
  text-decoration: line-through;
  margin-left: 10px;
}

.product_page_price .price-tax {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  margin-top: 4px;
}

/* Favori / Karşılaştır linkler */
.box-link .add-to-links {
  margin-bottom: 12px;
}

.box-link .add-to-links ul.blank {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 8px;
}

.box-link .add-to-links li a {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: var(--t-fast);
}

.box-link .add-to-links li.wishlist a:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #ef4444;
}

.box-link .add-to-links li.compare a:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #3b82f6;
}

/* Ürün meta bilgiler */
.product-box-desc .inner-box-desc {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-box-desc .inner-box-desc li {
  display: flex;
  align-items: center;
  font-size: var(--fs-sm);
  gap: 8px;
}

.product-box-desc .inner-box-desc li span {
  font-weight: var(--fw-semi);
  color: var(--c-text-2);
  min-width: 100px;
}

.product-box-desc .inner-box-desc li .fa {
  color: var(--c-primary);
}

/* Ürün seçenekleri */
.options-mobi .form-group {
  margin-bottom: 16px;
}

.options-mobi .form-group > .control-label {
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  margin-bottom: 8px;
  display: block;
}

.options-mobi select.form-control {
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: var(--fs-sm);
  height: 44px;
  transition: var(--t-fast);
  background: var(--c-white);
}

.options-mobi select.form-control:focus {
  border-color: var(--c-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 107, 48, 0.10);
}

/* Radio buton options */
.options-mobi .radio-type-button .radio {
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 8px;
}

.options-mobi .radio-type-button .option-content-box {
  display: inline-block;
  padding: 6px 14px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: var(--t-fast);
  background: var(--c-white);
}

.options-mobi .radio-type-button .option-content-box:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.options-mobi .radio-type-button input[type="radio"]:checked + .option-content-box,
.options-mobi .radio-type-button .option-content-box.active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-white);
}

/* Sepet alanı */
.box-cart .box-info-product {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  flex-wrap: wrap;
}

/* Adet kontrolü */
.quantity-control {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  overflow: hidden;
  height: 48px;
}

.quantity-control .input-group-addon {
  width: 40px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg);
  border: none;
  cursor: pointer;
  color: var(--c-text-2);
  font-size: 16px;
  transition: var(--t-fast);
  padding: 0;
  line-height: 1;
}

.quantity-control .input-group-addon:hover {
  background: var(--c-primary);
  color: var(--c-white);
}

.quantity-control .form-control {
  width: 56px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--c-border);
  border-right: 1px solid var(--c-border);
  height: 48px;
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  padding: 0;
  border-radius: 0;
  background: var(--c-white);
}

.quantity-control .form-control:focus {
  outline: none;
  box-shadow: none;
}

/* ================================================================
   9. BUTONLAR - 2026 MODERN
   ================================================================ */

/* Ana buton - Sepete Ekle */
.btn-mega,
#button-cart,
.detail-action .cart input[type="button"]:first-child {
  background: var(--c-primary) !important;
  color: var(--c-white) !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  padding: 12px 28px !important;
  font-size: var(--fs-base) !important;
  font-weight: var(--fw-semi) !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  transition: var(--t-normal) !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(30, 107, 48, 0.30) !important;
  min-width: 160px;
}

.btn-mega:hover,
#button-cart:hover {
  background: var(--c-primary-dark) !important;
  box-shadow: 0 6px 20px rgba(30, 107, 48, 0.40) !important;
  transform: translateY(-1px) !important;
}

.btn-mega:active,
#button-cart:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(30, 107, 48, 0.25) !important;
}

/* İkincil buton - Hemen Satın Al */
.btn-checkout,
#button-checkout {
  background: var(--c-accent) !important;
  color: var(--c-white) !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  padding: 12px 24px !important;
  font-size: var(--fs-base) !important;
  font-weight: var(--fw-semi) !important;
  cursor: pointer !important;
  transition: var(--t-normal) !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.30) !important;
  min-width: 160px;
}

.btn-checkout:hover,
#button-checkout:hover {
  background: var(--c-accent-hover) !important;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.40) !important;
  transform: translateY(-1px) !important;
}

/* Genel buton stili */
.btn.btn-primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  border-radius: var(--r-sm);
  font-weight: var(--fw-medium);
  transition: var(--t-fast);
  padding: 8px 20px;
}

.btn.btn-primary:hover {
  background: var(--c-primary-dark);
  border-color: var(--c-primary-dark);
}

.btn.btn-default {
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  color: var(--c-text-2);
  background: var(--c-white);
  transition: var(--t-fast);
}

.btn.btn-default:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: var(--c-bg);
}

/* Devam butonu (checkout, form) */
.btn-continue,
.buttons .btn.btn-primary,
.buttons .pull-right .btn {
  border-radius: var(--r-md);
  padding: 10px 24px;
  font-weight: var(--fw-semi);
}

/* ================================================================
   10. TABS (ÜRÜN DETAY SEKMELER)
   ================================================================ */

.producttab .nav-tabs {
  border-bottom: 2px solid var(--c-border);
  margin-bottom: 20px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.producttab .nav-tabs > li > a {
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 10px 20px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-2);
  background: transparent;
  margin: 0;
  transition: var(--t-fast);
}

.producttab .nav-tabs > li > a:hover {
  color: var(--c-primary);
  background: transparent;
  border-bottom-color: var(--c-primary-light);
}

.producttab .nav-tabs > li.active > a,
.producttab .nav-tabs > li.active > a:hover {
  color: var(--c-primary);
  background: transparent;
  border-bottom: 3px solid var(--c-primary);
  font-weight: var(--fw-semi);
}

.producttab .tab-content {
  padding: 16px 0;
}

/* Ürün özellikleri listesi */
.product-property-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--c-text);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-border);
}

.product-property-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.product-property-list .property-item {
  display: flex;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  gap: 12px;
  transition: var(--t-fast);
}

.product-property-list .property-item:nth-child(odd) {
  background: var(--c-bg);
}

.product-property-list .property-item:hover {
  background: var(--c-bg-alt);
}

.product-property-list .propery-title {
  font-weight: var(--fw-semi);
  color: var(--c-text-2);
  min-width: 180px;
  flex-shrink: 0;
}

.product-property-list .propery-des {
  color: var(--c-text);
}

/* Yorum formu */
#form-review {
  max-width: 600px;
}

#form-review .form-group {
  margin-bottom: 16px;
}

#form-review .control-label {
  font-weight: var(--fw-medium);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  margin-bottom: 6px;
  display: block;
}

/* ================================================================
   11. CART / CHECKOUT
   ================================================================ */

/* Sepet sayfası */
.checkout-cart {
  padding: 24px 0;
}

.table.table-bordered {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-border) !important;
  box-shadow: var(--shadow-xs);
}

.table.table-bordered thead th {
  background: var(--c-bg-alt);
  font-weight: var(--fw-semi);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  padding: 12px 16px;
  border-color: var(--c-border) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.table.table-bordered tbody td {
  padding: 16px;
  vertical-align: middle;
  border-color: var(--c-border) !important;
  font-size: var(--fs-sm);
}

.table.table-bordered tfoot td {
  padding: 12px 16px;
  border-color: var(--c-border) !important;
  font-size: var(--fs-sm);
}

/* Sepet toplamlar */
.table tfoot tr:last-child td {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-primary);
  background: var(--c-bg);
}

/* Checkout adımları */
.checkout-register,
.checkout-payment,
.checkout-shipping {
  padding: 24px 0;
}

/* Adres formu */
.form-group {
  margin-bottom: 18px;
}

.form-group .control-label {
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  margin-bottom: 6px;
  display: block;
}

.form-group .form-control {
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: var(--fs-sm);
  height: 44px;
  transition: var(--t-fast);
  background: var(--c-white);
  width: 100%;
  color: var(--c-text);
}

.form-group .form-control:focus {
  border-color: var(--c-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 107, 48, 0.10);
}

textarea.form-control {
  height: auto;
  min-height: 100px;
  resize: vertical;
}

/* Ödeme/kargo seçenekleri */
.payment-option,
.shipping-option {
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: var(--t-fast);
  display: flex;
  align-items: center;
  gap: 12px;
}

.payment-option:hover,
.shipping-option:hover {
  border-color: var(--c-primary);
  background: var(--c-bg);
}

.payment-option input:checked + label,
input[type="radio"]:checked ~ .payment-option {
  border-color: var(--c-primary);
  background: linear-gradient(135deg, #f0faf2 0%, #e8f5ea 100%);
}

/* Checkbox / Radio */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--c-primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ================================================================
   12. ALERTler
   ================================================================ */

.alert {
  border-radius: var(--r-md);
  border: none;
  padding: 14px 20px;
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: 10px;
}

.alert-success {
  background: #ecfdf5;
  color: #065f46;
  border-left: 4px solid #10b981;
}

.alert-danger, .alert-error {
  background: #fef2f2;
  color: #991b1b;
  border-left: 4px solid #ef4444;
}

.alert-warning {
  background: #fffbeb;
  color: #92400e;
  border-left: 4px solid var(--c-accent);
}

.alert-info {
  background: #eff6ff;
  color: #1e40af;
  border-left: 4px solid #3b82f6;
}

.alert .close {
  margin-left: auto;
  color: inherit;
  opacity: 0.6;
}

.alert .close:hover {
  opacity: 1;
}

/* ================================================================
   13. FOOTer
   ================================================================ */

.footer-content {
  background: var(--c-text);
  color: rgba(255,255,255,0.8);
  padding: 40px 0 24px;
}

.footer-content a {
  color: rgba(255,255,255,0.7);
  font-size: var(--fs-sm);
  transition: var(--t-fast);
}

.footer-content a:hover {
  color: var(--c-white);
}

.footernav-top {
  background: var(--c-primary);
  padding: 20px;
  border-radius: var(--r-md);
  margin-bottom: 30px;
}

.footernav-top .need-help p {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--c-white);
  margin-bottom: 12px;
}

.footernav-top .nh-contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.15);
  color: var(--c-white);
  padding: 8px 18px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  margin-right: 12px;
  margin-bottom: 8px;
  transition: var(--t-fast);
  border: 1px solid rgba(255,255,255,0.25);
}

.footernav-top .nh-contact a:hover {
  background: rgba(255,255,255,0.25);
}

.footernav-midde {
  margin-bottom: 24px;
}

.footer-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-link-list li a {
  display: block;
  padding: 6px 0;
  font-size: var(--fs-sm);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.footernav-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 20px;
  text-align: center;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.5);
}

/* ================================================================
   14. BREADCRUMB
   ================================================================ */

.breadcrumb {
  background: transparent;
  padding: 12px 0;
  margin: 0;
  font-size: var(--fs-sm);
}

.breadcrumb > li + li::before {
  color: var(--c-text-3);
  content: "›";
  font-size: 16px;
  padding: 0 6px;
}

.breadcrumb a {
  color: var(--c-text-3);
}

.breadcrumb a:hover {
  color: var(--c-primary);
}

.breadcrumb > .active {
  color: var(--c-text-2);
  font-weight: var(--fw-medium);
}

/* ================================================================
   15. PAGİNATİON
   ================================================================ */

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin: 24px 0 0;
}

.pagination > li > a,
.pagination > li > span {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  background: var(--c-white);
  transition: var(--t-fast);
  padding: 0;
}

.pagination > li > a:hover {
  background: var(--c-bg-alt);
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.pagination > .active > a,
.pagination > .active > span {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-white);
}

.pagination > .disabled > a,
.pagination > .disabled > span {
  background: var(--c-bg-alt);
  color: var(--c-text-3);
  cursor: not-allowed;
}

/* ================================================================
   16. SIDEBAR / FİLTRE PANEL
   ================================================================ */

#column-left .box,
.module .box {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--shadow-xs);
}

#column-left .box .box-heading,
.module .box .box-heading {
  background: var(--c-bg-alt);
  padding: 12px 16px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#column-left .box .list-group,
.module .box ul {
  padding: 8px 0;
  list-style: none;
  margin: 0;
}

#column-left .box .list-group a,
.module .box ul li a {
  display: block;
  padding: 8px 16px;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  transition: var(--t-fast);
}

#column-left .box .list-group a:hover,
.module .box ul li a:hover {
  color: var(--c-primary);
  padding-left: 20px;
  background: var(--c-bg);
}

/* ================================================================
   17. DESTEK / MESAI SAATLERİ (HEADER)
   ================================================================ */

.support-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.support-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  transition: var(--t-fast);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
}

.support-link:hover {
  color: var(--c-primary);
  border-color: var(--c-primary);
}

.support-link .fa {
  font-size: 18px;
  color: var(--c-primary);
}

.availability-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: #10b981;
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
  animation: pulse-dot 2s infinite;
}

.availability-dot.offline {
  background: #6b7280;
  box-shadow: none;
  animation: none;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
  50%       { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.05); }
}

/* ================================================================
   18. ANİMASYONLAR
   ================================================================ */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, var(--c-bg) 25%, var(--c-bg-alt) 50%, var(--c-bg) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-sm);
}

/* Sayfa yüklenme animasyonu */
.product-item-container {
  animation: fadeInUp 0.4s ease both;
}

.product-layout:nth-child(1) .product-item-container { animation-delay: 0.05s; }
.product-layout:nth-child(2) .product-item-container { animation-delay: 0.10s; }
.product-layout:nth-child(3) .product-item-container { animation-delay: 0.15s; }
.product-layout:nth-child(4) .product-item-container { animation-delay: 0.20s; }
.product-layout:nth-child(5) .product-item-container { animation-delay: 0.25s; }
.product-layout:nth-child(6) .product-item-container { animation-delay: 0.30s; }

/* ================================================================
   19. TOAST / BİLDİRİM (sepete eklendi vb.)
   ================================================================ */

.alert-dismissible.alert-success {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 9999;
  min-width: 280px;
  max-width: 400px;
  box-shadow: var(--shadow-xl);
  animation: fadeInUp 0.3s ease;
  border-radius: var(--r-md);
}

/* ================================================================
   20. RESPONSIVE - MOBİL
   ================================================================ */

@media (max-width: 991px) {
  .content-product-left {
    padding: 0;
    margin-bottom: 24px;
  }

  .content-product-right {
    padding: 0;
  }

  .product_page_price .price-new span {
    font-size: var(--fs-xl);
  }

  .box-cart .box-info-product {
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .product-item-container .right-block {
    padding: 10px 12px 12px;
  }

  .product-item-container .price-new {
    font-size: var(--fs-base);
  }

  .product-filter.filters-panel {
    padding: 8px 12px;
  }

  .btn-mega,
  #button-cart {
    min-width: unset;
    width: 100% !important;
    justify-content: center !important;
  }

  .btn-checkout,
  #button-checkout {
    min-width: unset;
    width: 100% !important;
    justify-content: center !important;
  }

  .quantity-control {
    width: 100%;
    justify-content: center;
  }

  .support-link .support-info {
    display: none;
  }

  .support-link {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .product-item-container .right-block h4 {
    font-size: 12px;
  }

  .refine-search__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ================================================================
   21. LISTE GÖRÜNÜMÜ
   ================================================================ */

.product-layout.product-list .product-item-container {
  flex-direction: row;
  height: auto;
}

.product-layout.product-list .left-block {
  min-width: 180px;
  width: 180px;
  height: 180px;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  aspect-ratio: unset;
  flex-shrink: 0;
}

.product-layout.product-list .right-block {
  padding: 16px 20px;
  justify-content: center;
}

.product-layout.product-list .right-block h4 {
  font-size: var(--fs-md);
  -webkit-line-clamp: unset;
}

.product-layout.product-list .button-group {
  position: static;
  opacity: 1;
  transform: none;
  flex-direction: row;
  margin-top: 12px;
}

@media (max-width: 767px) {
  .product-layout.product-list .product-item-container {
    flex-direction: column;
  }

  .product-layout.product-list .left-block {
    width: 100%;
    height: auto;
    min-width: unset;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
}

/* ================================================================
   22. FORM - GİRİŞ / KAYIT
   ================================================================ */

.account-register .form-group,
.account-login .form-group {
  margin-bottom: 18px;
}

.account-register .well,
.account-login .well {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.account-register h2,
.account-login h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--c-border);
}

/* ================================================================
   23. RENK AKSESUARLARI
   ================================================================ */

.text-primary, .text-success {
  color: var(--c-primary) !important;
}

.text-accent {
  color: var(--c-accent) !important;
}

.bg-primary {
  background: var(--c-primary) !important;
}

.border-primary {
  border-color: var(--c-primary) !important;
}

/* ================================================================
   24. ÜRÜN ETİKET İYİLEŞTİRMESİ
   ================================================================ */

/* İndirim yüzdesi etiketi */
.label-sale::before {
  content: '';
}

/* "Yeni" etiketi pulse animasyonu */
.label-new {
  animation: pulse-new 3s infinite;
}

@keyframes pulse-new {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.85; }
}

/* ================================================================
   25. ÇEŞITLI
   ================================================================ */

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: #c4d4c6; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-primary-light); }

/* Seçim rengi */
::selection {
  background: rgba(30, 107, 48, 0.15);
  color: var(--c-primary-dark);
}

/* Focus görünürlüğü (erişilebilirlik) */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* Yükleme göstergesi */
.so-loadeding {
  display: none;
}

/* Etiket (badge) */
.badge {
  background: var(--c-primary);
  border-radius: var(--r-full);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--c-white);
}

/* Boş durum */
.text-empty, p.text-muted {
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  text-align: center;
  padding: 40px 0;
}

/* ================================================================
   26. MOBİL HEADER - 2026
   ================================================================ */

/* Ratchet bar-nav modernize */
.bar.bar-nav {
  background: var(--c-primary) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 12px rgba(30, 107, 48, 0.20) !important;
  height: auto !important;
  min-height: 56px !important;
  padding: 0 !important;
}

/* Sticky header */
.bar.bar-nav.bar-navhome,
.bar.bar-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 1050 !important;
  backdrop-filter: blur(8px);
}

/* Hamburger menü butonu */
.bar.bar-nav .toggle-panel,
.bar.bar-nav .btn-nav {
  color: var(--c-white) !important;
  background: transparent !important;
  border: none !important;
}

.bar.bar-nav .toggle-panel .icon-bar,
.bar.bar-nav .btn-nav .icon-bar {
  background-color: var(--c-white) !important;
  height: 2px;
  width: 20px;
  margin: 4px 0;
  border-radius: 2px;
  display: block;
}

/* Logo alanı */
.navbar-logo img {
  max-height: 40px !important;
  filter: brightness(0) invert(1); /* Koyu logolu temalar için beyaz yap */
}

/* Arama kutusu */
.navbar-search input[type="text"],
.navbar-search .form-control {
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  border-radius: var(--r-full) !important;
  color: var(--c-white) !important;
  padding: 8px 14px !important;
  font-size: var(--fs-sm) !important;
  height: 38px !important;
  transition: var(--t-fast) !important;
}

.navbar-search input[type="text"]::placeholder,
.navbar-search .form-control::placeholder {
  color: rgba(255,255,255,0.60) !important;
}

.navbar-search input[type="text"]:focus,
.navbar-search .form-control:focus {
  background: rgba(255,255,255,0.25) !important;
  border-color: rgba(255,255,255,0.60) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Arama butonu */
.navbar-search .btn,
.navbar-search button[type="submit"] {
  background: rgba(255,255,255,0.20) !important;
  border: none !important;
  color: var(--c-white) !important;
  border-radius: var(--r-full) !important;
  height: 38px !important;
  padding: 0 14px !important;
  transition: var(--t-fast) !important;
}

.navbar-search .btn:hover,
.navbar-search button[type="submit"]:hover {
  background: rgba(255,255,255,0.35) !important;
}

/* Subpage header title */
.bar.bar-nav h1.title {
  color: var(--c-white) !important;
  font-size: var(--fs-md) !important;
  font-weight: var(--fw-semi) !important;
}

/* Seçici panel (dropdown, autocomplete) */
.dropdown-search {
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--c-border);
  border-top: none;
  overflow: hidden;
}

/* Panel Sol (off-canvas) */
.panel-left,
#panel-menu {
  background: var(--c-text) !important;
  box-shadow: var(--shadow-xl) !important;
}

.panel-left .navbar-header {
  background: var(--c-primary) !important;
  padding: 16px !important;
}

.panel-left ul.list-group li a,
.panel-left .navbar-nav li a {
  color: rgba(255,255,255,0.85) !important;
  padding: 12px 20px !important;
  font-size: var(--fs-sm) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  transition: var(--t-fast) !important;
}

.panel-left ul.list-group li a:hover,
.panel-left .navbar-nav li a:hover {
  color: var(--c-white) !important;
  background: rgba(255,255,255,0.08) !important;
  padding-left: 28px !important;
}

/* ================================================================
   27. BUTON - SERA ÖZEL (btn-sera sınıfı)
   ================================================================ */

.btn-sera {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  cursor: pointer;
  transition: var(--t-normal);
  text-decoration: none;
  border: none;
}

.btn-sera-primary {
  background: var(--c-primary);
  color: var(--c-white);
  box-shadow: 0 4px 14px rgba(30, 107, 48, 0.25);
}

.btn-sera-primary:hover {
  background: var(--c-primary-dark);
  color: var(--c-white);
  box-shadow: 0 6px 20px rgba(30, 107, 48, 0.35);
  transform: translateY(-1px);
}

.btn-sera-outline {
  background: transparent;
  color: var(--c-primary);
  border: 1.5px solid var(--c-primary);
}

.btn-sera-outline:hover {
  background: var(--c-primary);
  color: var(--c-white);
}

/* Panel bar (üst çubuk) */
.so-topbar,
.panel-bar {
  background: var(--c-primary-dark) !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: var(--fs-xs) !important;
  padding: 6px 0 !important;
}

.so-topbar a,
.panel-bar a {
  color: rgba(255,255,255,0.85) !important;
  font-size: var(--fs-xs) !important;
}

.so-topbar a:hover,
.panel-bar a:hover {
  color: var(--c-white) !important;
}

/* ================================================================
   28. ONEPAGECHECKOUT - 2026 MODERNİZASYON
   ================================================================ */

.so-onepagecheckout {
  padding: 8px 0 32px;
}

.so-onepagecheckout .secondary-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--c-text);
  margin: 0 0 14px;
  padding: 14px 16px;
  background: var(--c-bg-alt);
  border-left: 4px solid var(--c-primary);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.so-onepagecheckout .secondary-title .fa {
  color: var(--c-primary);
  font-size: 18px;
}

.so-onepagecheckout .checkout-content {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-xs);
}

.so-onepagecheckout .box-inner {
  padding: 4px 0;
}

/* Checkout buton */
.so-onepagecheckout .btn-primary,
.so-onepagecheckout #button-confirm,
.so-onepagecheckout .button {
  background: var(--c-primary) !important;
  border: none !important;
  color: var(--c-white) !important;
  border-radius: var(--r-md) !important;
  padding: 12px 28px !important;
  font-size: var(--fs-base) !important;
  font-weight: var(--fw-semi) !important;
  cursor: pointer !important;
  transition: var(--t-normal) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 48px !important;
  box-shadow: 0 4px 14px rgba(30, 107, 48, 0.25) !important;
  width: auto !important;
}

.so-onepagecheckout .btn-primary:hover,
.so-onepagecheckout #button-confirm:hover,
.so-onepagecheckout .button:hover {
  background: var(--c-primary-dark) !important;
  box-shadow: 0 6px 20px rgba(30, 107, 48, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Kargo / Ödeme seçenekleri */
.so-onepagecheckout .shipping-method,
.so-onepagecheckout .payment-method {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: var(--t-fast);
  display: flex;
  align-items: center;
  gap: 12px;
}

.so-onepagecheckout .shipping-method:hover,
.so-onepagecheckout .payment-method:hover {
  border-color: var(--c-primary);
  background: var(--c-bg);
}

.so-onepagecheckout .shipping-method input:checked,
.so-onepagecheckout .payment-method input:checked {
  accent-color: var(--c-primary);
}

/* Sipariş özeti kutusu */
.so-onepagecheckout .confirm-section,
.so-onepagecheckout #cart-total {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--shadow-xs);
}

/* Toplam satırı */
.so-onepagecheckout tfoot tr:last-child td,
.so-onepagecheckout .total-order td:last-child {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--c-primary);
}

/* Kupon / voucher */
#coupon_voucher_reward .panel {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  margin-bottom: 16px;
}

#coupon_voucher_reward .panel-heading {
  background: var(--c-bg-alt);
  padding: 12px 16px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

#coupon_voucher_reward .panel-body {
  padding: 16px;
}

/* Checkout adım göstergesi / başlık */
h1.page-title-checkout {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--c-border);
  display: flex;
  align-items: center;
  gap: 12px;
}

h1.page-title-checkout .fa {
  color: var(--c-primary);
  font-size: 24px;
}

/* ================================================================
   29. SEPETİM SAYFASI - 2026
   ================================================================ */

.table-cart td.product-image img {
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  width: 80px;
  height: 80px;
  object-fit: contain;
  padding: 4px;
  background: var(--c-bg);
}

/* Miktar input */
.table-cart input[name="quantity"] {
  width: 60px;
  text-align: center;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}

/* Sil butonu */
.table-cart .btn-danger {
  background: transparent !important;
  border: 1px solid #fca5a5 !important;
  color: #ef4444 !important;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--t-fast);
}

.table-cart .btn-danger:hover {
  background: #ef4444 !important;
  color: var(--c-white) !important;
}

/* Sepet toplamlar */
.cart-total-table td {
  font-size: var(--fs-sm);
  padding: 8px 12px;
  color: var(--c-text-2);
}

.cart-total-table tr:last-child td {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--c-primary);
  padding-top: 12px;
  border-top: 2px solid var(--c-border);
}

/* Sepet aksiyon butonları */
.cart-buttons .btn {
  border-radius: var(--r-md) !important;
  padding: 12px 24px !important;
  font-weight: var(--fw-semi) !important;
  font-size: var(--fs-sm) !important;
  transition: var(--t-normal) !important;
}

.cart-buttons .btn-primary {
  background: var(--c-primary) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(30, 107, 48, 0.25) !important;
}

.cart-buttons .btn-primary:hover {
  background: var(--c-primary-dark) !important;
  transform: translateY(-1px) !important;
}

/* Başarı sayfası */
.checkout-success .well {
  background: linear-gradient(135deg, #f0faf2 0%, #e8f5ea 100%);
  border: 1px solid var(--c-primary-light);
  border-radius: var(--r-lg);
  padding: 32px;
  text-align: center;
  box-shadow: var(--shadow-md);
}

.checkout-success .fa-check-circle {
  color: var(--c-primary);
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

/* ================================================================
   30. FONT OVERRİDE — 2026 (green.css Karla/Raleway/Georgia → sistem)
   ================================================================ */

/*
 * green.css legacy font'larını override ediyoruz.
 * Karla, Raleway: Türkçe karakter desteği zayıf, web font yükü var.
 * Georgia: serif, mobil e-ticarete uygun değil.
 * Hepsi --font-body (sistem font stack) ile değiştiriliyor.
 */

/* Karla override — menu label */
.shoppage .submenu-shop .menu-label,
[style*="font-family: Karla"],
[style*="font-family:Karla"] {
  font-family: var(--font-body) !important;
}

/* Georgia override — blog yorumlar */
.comments .media-body .media-title .username,
[style*="font-family: Georgia"] {
  font-family: var(--font-body) !important;
  font-style: normal !important;
}

/* Raleway override — ürün özellikleri tablosu */
.product-attribute .table-responsive .title-attribute,
.product-attribute .table-responsive .name-attribute,
[style*="font-family: Raleway"],
[style*="font-family:Raleway"] {
  font-family: var(--font-body) !important;
}

/* Global body font garantisi */
body,
input, select, textarea, button {
  font-family: var(--font-body) !important;
}

/* Başlıklar için font-weight + font-family */
h1, h2, h3, h4, h5, h6,
.modtitle, .box-heading, .secondary-title {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: -0.01em;
}

/* ================================================================
   31. GOOGLE FONTS — Inter (2026 standart, Türkçe subset)
   ================================================================ */

/*
 * Inter: 2026'nın #1 UI fontu. Apple/Google/Meta tarafından kullanılıyor.
 * Türkçe karakterler (İ ı Ğ ğ Ş ş Ç ç Ö ö Ü ü) tam destekli.
 * latin-ext subset yüklüyoruz — Türkçe için şart.
 * Yükleme header.twig'e eklendi.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&subset=latin,latin-ext&display=swap');

:root {
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ================================================================
   32. TİPOGRAFİ — 2026 İNCELEME DÜZELTMELERİ
   ================================================================ */

/* İnce font ağırlığı sorununu önle (Raleway ultra-light problemi) */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Türkçe büyük I sorunu için özel düzeltme */
.upper, .text-uppercase, [style*="text-transform: uppercase"], [style*="text-transform:uppercase"] {
  font-variant: none !important;
}

/* Mobil font boyutu — 16px minimum (iOS zoom engelleme) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
  font-size: 16px !important; /* 16px altında iOS'ta zoom yapar */
}

/* Line-height Türkçe harfler için optimize */
p, li, td, th, label, span, div {
  line-height: 1.6;
}

/* Buton yazıları */
button, .btn, input[type="button"], input[type="submit"] {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-semi) !important;
  letter-spacing: 0.01em;
}

/* ================================================================
   33. GREEN.CSS ÇAKIŞMA GİDERME — 2026
   green.css eski renk ve stil tanımlarını sıfırla
   ================================================================ */

/* --- Fiyat renk çakışması ---
   green.css: .price .price-new { color: #ff5c00 }  (turuncu)
   sera-custom: marka yeşili ile override ediyoruz
   ---------------------------------------------------------------- */
.price .price-new,
.price span.price,
.price-new {
  color: var(--c-primary) !important;
}

.price .price-old,
.price-old {
  color: var(--c-text-3) !important;
  text-decoration: line-through !important;
}

/* Ürün detay sayfası fiyatı — daha büyük ve belirgin */
.product_page_price .price-new,
.product_page_price .price-new span,
.product_page_price span.price {
  color: var(--c-primary) !important;
  font-size: var(--fs-2xl) !important;
  font-weight: var(--fw-bold) !important;
}

.product_page_price .price-old {
  color: var(--c-text-3) !important;
  font-size: var(--fs-md) !important;
}

/* Vergi bilgisini göster — green.css'de gizlenmiş */
.price-tax {
  display: block !important;
  font-size: var(--fs-xs) !important;
  color: var(--c-text-3) !important;
  margin-top: 2px;
}

/* Liste görünümü fiyat genişliği — green.css %30'a sınırlamış */
.products-list .product-list .right-block .price {
  width: auto !important;
}

/* --- Alt gezinme çubuğu (panel_bar) ---
   Ratchet bar-tab stilini sera temasıyla uyumlu hale getir
   ---------------------------------------------------------------- */
.bar.bar-tab {
  background: #fff !important;
  border-top: 1px solid var(--c-border) !important;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.06) !important;
}

.bar.bar-tab .tab-item {
  color: var(--c-text-2) !important;
}

.bar.bar-tab .tab-item.active,
.bar.bar-tab .tab-item:focus {
  color: var(--c-primary) !important;
}

.bar.bar-tab .tab-item .tab-label {
  font-size: 10px !important;
  font-family: var(--font-body) !important;
}

/* --- Sol panel (slide menu) ---
   ---------------------------------------------------------------- */
#panel-menu.side-menu {
  background: #fff !important;
}

#panel-menu .panel-left__top {
  background: var(--c-primary) !important;
}

#panel-menu .panel-logo img {
  max-height: 50px;
  width: auto;
}

/* --- Sepet butonu (kırmızı hata rengi) ---
   green.css bazı buton renklerini agresif tanımlar
   ---------------------------------------------------------------- */
.btn.btn-primary,
.btn-sera,
#button-cart,
#button-checkout {
  background-color: var(--c-primary) !important;
  border-color: var(--c-primary-dark) !important;
  color: #fff !important;
}

.btn.btn-primary:hover,
.btn-sera:hover,
#button-cart:hover,
#button-checkout:hover {
  background-color: var(--c-primary-dark) !important;
  border-color: var(--c-primary-dark) !important;
}

/* --- Etiket/Badge renkleri ---
   ---------------------------------------------------------------- */
.label-new,
.tag-new {
  background: var(--c-primary) !important;
  color: #fff !important;
}

.label-sale,
.tag-sale {
  background: #e53e3e !important;
  color: #fff !important;
}

/* --- Breadcrumb ---
   ---------------------------------------------------------------- */
.breadcrumbs {
  background: var(--c-bg-2) !important;
  border-bottom: 1px solid var(--c-border);
  padding: 8px 0 !important;
}

.breadcrumb li a {
  color: var(--c-text-2) !important;
}

.breadcrumb li.active,
.current-name {
  color: var(--c-text-1) !important;
  font-weight: var(--fw-semi) !important;
}

/* --- Para birimi seçici ---
   ---------------------------------------------------------------- */
#form-currency .btn-link {
  color: var(--c-text-1) !important;
  font-weight: var(--fw-semi);
  padding: 4px 8px;
}

#form-currency .dropdown-menu {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 160px;
}

#form-currency .currency-select {
  text-align: left !important;
  background: transparent !important;
  border: none !important;
  color: var(--c-text-1) !important;
  padding: 8px 12px !important;
  font-size: var(--fs-sm) !important;
}

#form-currency .currency-select:hover {
  background: var(--c-bg-2) !important;
  color: var(--c-primary) !important;
}

/* --- Arama kutusu ---
   ---------------------------------------------------------------- */
.search-bar input[type="text"],
#search input[type="text"],
.search input[name="search"] {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-md) 0 0 var(--r-md) !important;
  font-size: 15px !important;
  padding: 8px 12px !important;
}

.search-bar .btn-search,
#search .btn {
  background: var(--c-primary) !important;
  border: 1px solid var(--c-primary-dark) !important;
  border-radius: 0 var(--r-md) var(--r-md) 0 !important;
  color: #fff !important;
}

/* --- Alert mesajları ---
   ---------------------------------------------------------------- */
.alert-success {
  background: #d1fae5 !important;
  border-color: #6ee7b7 !important;
  color: #065f46 !important;
}

.alert-danger,
.alert-error {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
}

.alert-warning {
  background: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}

/* --- Ürün kartı hover efekti ---
   ---------------------------------------------------------------- */
.product-item-container {
  transition: box-shadow 0.2s ease, transform 0.15s ease !important;
}

.product-item-container:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
  transform: translateY(-2px);
}

/* --- Sayfalama ---
   ---------------------------------------------------------------- */
.pagination > li > a,
.pagination > li > span {
  color: var(--c-primary) !important;
  border-color: var(--c-border) !important;
}

.pagination > .active > a,
.pagination > .active > span {
  background-color: var(--c-primary) !important;
  border-color: var(--c-primary-dark) !important;
  color: #fff !important;
}

/* ================================================================
   34. HOMEPAGE INFO BLOKLAR — 2026 Redesign (v20260409b)
   Müşteri hizmetleri kartı, duyuru barı, SEO etiketleri
   ================================================================ */

/* ---- Genel HTML Content modül wrapper ---- */
.module {
  margin-bottom: 16px;
}

/* ---- DUYURU BARI (Kargo uyarısı, "× KARGOLARIMIZ ALICI ÖDEMELİDİR!") ----
   Bootstrap alert-dismissible bazlı veya özel banner.
   ---------------------------------------------------------------- */
.alert-dismissible,
.module .alert-dismissible {
  position: relative;
  background: linear-gradient(135deg, #fef3c7 0%, #fff8e6 100%) !important;
  border: none !important;
  border-left: 4px solid var(--c-accent) !important;
  border-radius: var(--r-md) !important;
  padding: 14px 48px 14px 20px !important;
  font-size: var(--fs-sm) !important;
  color: #7c4a0a !important;
  font-weight: var(--fw-medium) !important;
  box-shadow: var(--shadow-sm) !important;
  margin: 12px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.alert-dismissible::before {
  content: "⚠";
  font-size: 18px;
  flex-shrink: 0;
}

.alert-dismissible .close,
.module .alert-dismissible .close {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 0.5 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: #7c4a0a !important;
  background: none !important;
  border: none !important;
  padding: 4px !important;
  cursor: pointer !important;
  transition: opacity 0.2s !important;
}

.alert-dismissible .close:hover {
  opacity: 1 !important;
}

/* ---- MÜŞTERİ HİZMETLERİ KARTI ----
   Modül içinde telefon/saat bilgisi barındıran blok.
   Hedef CSS class örnekleri: .so-customer-service, .module-service,
   ya da genel .module içindeki h3 + p/ul yapısı.
   ---------------------------------------------------------------- */
.module h3 {
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-semi) !important;
  color: var(--c-primary) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

/* Telefon numarası — büyük ve belirgin */
.module a[href^="tel"],
.module span.phone,
.module .phone-number {
  font-size: var(--fs-xl) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--c-primary) !important;
  text-decoration: none !important;
  display: inline-block !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
}

.module a[href^="tel"]:hover {
  color: var(--c-primary-hover) !important;
  text-decoration: underline !important;
}

/* Çalışma saati bilgisi */
.module .hours,
.module p:has(strong) {
  font-size: var(--fs-sm) !important;
  color: var(--c-text-2) !important;
  margin: 4px 0 0 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* ---- SEO ANAHTAR KELİMELER / ÜRÜN LİNKLERİ ----
   Virgülle ayrılmış ürün listesi — pill badge olarak göster.
   ---------------------------------------------------------------- */
.module-keywords,
.seo-tags,
.module.keywords {
  padding: 16px !important;
  background: var(--c-bg-alt) !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--c-border) !important;
  line-height: 2.2 !important;
  font-size: var(--fs-xs) !important;
}

.module-keywords a,
.seo-tags a,
.module.keywords a {
  display: inline-block !important;
  padding: 3px 10px !important;
  background: var(--c-white) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-full) !important;
  color: var(--c-text-2) !important;
  font-size: var(--fs-xs) !important;
  text-decoration: none !important;
  transition: var(--t-fast) !important;
  margin: 2px !important;
}

.module-keywords a:hover,
.seo-tags a:hover,
.module.keywords a:hover {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #fff !important;
}

/* ---- GENEL SO_HTML_CONTENT MODÜLLERİ ----
   Tüm .module blokları için kart stili
   ---------------------------------------------------------------- */
.module.so_html_content,
.module.html-content-module {
  background: var(--c-white);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  padding: 16px 20px;
  box-shadow: var(--shadow-xs);
}

/* ---- MÜŞTERİ HİZMETLERİ ÖZEL KARTI ----
   Telefon ikonu + numara + saat — yatay düzen (karttan çok info strip)
   ---------------------------------------------------------------- */
.sera-service-strip {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-light) 100%) !important;
  color: #fff !important;
  padding: 12px 20px !important;
  border-radius: var(--r-md) !important;
  margin-bottom: 12px !important;
  flex-wrap: wrap !important;
}

.sera-service-strip .service-icon {
  font-size: 28px !important;
  flex-shrink: 0 !important;
}

.sera-service-strip .service-info {
  flex: 1 !important;
  min-width: 180px !important;
}

.sera-service-strip .service-label {
  font-size: var(--fs-xs) !important;
  opacity: 0.85 !important;
  font-weight: var(--fw-medium) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 2px !important;
}

.sera-service-strip .service-phone {
  font-size: var(--fs-xl) !important;
  font-weight: var(--fw-bold) !important;
  color: #fff !important;
  text-decoration: none !important;
  letter-spacing: 0.03em !important;
}

.sera-service-strip .service-hours {
  font-size: var(--fs-xs) !important;
  opacity: 0.8 !important;
  margin-top: 2px !important;
}

/* ---- DUYURU TICKER (scrolling ya da statik) ----
   ---------------------------------------------------------------- */
.sera-ticker {
  background: var(--c-accent) !important;
  color: #fff !important;
  padding: 8px 16px !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semi) !important;
  text-align: center !important;
  letter-spacing: 0.05em !important;
  position: relative !important;
  overflow: hidden !important;
}

.sera-ticker .ticker-icon {
  margin-right: 6px !important;
}

/* ---- Sidebar Panel "Anasayfa" bağlantısı ----
   ---------------------------------------------------------------- */
#panel-menu .megamenu li.home > a,
#panel-menu ul.megamenu > li:first-child > a {
  font-weight: var(--fw-semi) !important;
  color: var(--c-primary) !important;
}

#panel-menu ul.megamenu > li > a strong {
  color: var(--c-text) !important;
  font-size: var(--fs-sm) !important;
}

#panel-menu ul.megamenu > li.active_menu > a strong,
#panel-menu ul.megamenu > li.home > a strong {
  color: var(--c-primary) !important;
}

/* ---- Mobile bottom tab bar ----
   Hem panel_bar (bottom) hem de bottom navigation için
   ---------------------------------------------------------------- */
.bar.bar-tab {
  background: var(--c-white) !important;
  border-top: 1px solid var(--c-border) !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08) !important;
}

.bar.bar-tab .tab-item {
  color: var(--c-text-3) !important;
  transition: var(--t-fast) !important;
}

.bar.bar-tab .tab-item.active,
.bar.bar-tab .tab-item:hover {
  color: var(--c-primary) !important;
}

.bar.bar-tab .tab-item .tab-label {
  font-size: 10px !important;
  font-weight: var(--fw-medium) !important;
  display: block !important;
  margin-top: 2px !important;
}

.bar.bar-tab .tab-item.item-cart .btn-shopping-cart {
  background: var(--c-primary) !important;
  border-radius: var(--r-full) !important;
  padding: 2px 8px !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: var(--fw-bold) !important;
  min-width: 20px !important;
  text-align: center !important;
}

/* Mobil için daha kompakt info blokları */
@media (max-width: 767px) {
  .alert-dismissible,
  .module .alert-dismissible {
    font-size: 12px !important;
    padding: 10px 40px 10px 14px !important;
  }

  .sera-service-strip {
    padding: 10px 14px !important;
    gap: 12px !important;
  }

  .sera-service-strip .service-phone {
    font-size: var(--fs-md) !important;
  }
}

/* ================================================================
   35. ÜRÜN DETAY SAYFASI — Modernizasyon Tamamlama (v20260409d)
   ================================================================ */

/* ---- Ürün Başlığı ---- */
.title-product h1,
.content-product-right .title-product h1 {
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  line-height: 1.3;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

/* ---- Yıldız Puanı & Yorum Bağlantısı ---- */
.box-review {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.box-review .reviews_button {
  font-size: var(--fs-sm);
  color: var(--c-primary);
  border-bottom: 1px dotted var(--c-primary);
}

.box-review .order-num {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  background: var(--c-bg);
  padding: 2px 10px;
  border-radius: var(--r-full);
}

/* ---- Meta bilgiler (marka, model, stok) — div bazlı ---- */
.product-box-desc .inner-box-desc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
  padding: 12px 16px;
  background: var(--c-bg);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
}

.product-box-desc .inner-box-desc .brand,
.product-box-desc .inner-box-desc .model,
.product-box-desc .inner-box-desc .reward,
.product-box-desc .inner-box-desc .stock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.product-box-desc .inner-box-desc .brand span,
.product-box-desc .inner-box-desc .model span,
.product-box-desc .inner-box-desc .stock span {
  font-weight: var(--fw-semi);
  color: var(--c-text-2);
  min-width: 70px;
}

.product-box-desc .inner-box-desc .brand a {
  color: var(--c-primary);
  font-weight: var(--fw-medium);
}

/* Stok — yeşil ikon ile belirgin */
.product-box-desc .inner-box-desc .stock .fa-check-square-o {
  color: var(--c-primary);
}

/* Görüntülenme sayısı */
.product-box-desc .inner-box-viewed {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--c-border);
}

/* ---- Favori & Karşılaştır (wish_comp) ---- */
.add-to-links.wish_comp ul.blank.list-inline {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  gap: 8px;
}

.add-to-links.wish_comp ul li a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  padding: 6px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  background: var(--c-bg);
  transition: var(--t-fast);
  white-space: nowrap;
}

.add-to-links.wish_comp li.wishlist a:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #ef4444;
}

.add-to-links.wish_comp li.compare a:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #3b82f6;
}

.add-to-links.wish_comp .fa-heart { color: #ef4444; }
.add-to-links.wish_comp .fa-retweet { color: #3b82f6; }

/* ---- Güven Çubuğu (Trust Bar) ---- */
.sera-trust-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 16px 0 8px;
  background: var(--c-white);
}

.sera-trust-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-right: 1px solid var(--c-border);
  transition: var(--t-fast);
}

.sera-trust-item:last-child {
  border-right: none;
}

.sera-trust-item:hover {
  background: var(--c-bg);
}

.sera-trust-item .fa {
  font-size: 22px;
  color: var(--c-primary);
  flex-shrink: 0;
}

.sera-trust-item strong {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--c-text);
  display: block;
  line-height: 1.2;
}

.sera-trust-item span {
  font-size: 11px;
  color: var(--c-text-3);
  display: block;
}

@media (max-width: 767px) {
  .sera-trust-bar {
    flex-wrap: wrap;
  }
  .sera-trust-item {
    flex: 0 0 50%;
    border-bottom: 1px solid var(--c-border);
    border-right: none;
  }
  .sera-trust-item:nth-child(1) { border-right: 1px solid var(--c-border); }
  .sera-trust-item:nth-child(3) { border-bottom: none; flex: 0 0 100%; }
}

/* ---- Etiketler (tags) ---- */
#tab-tags {
  margin: 12px 0;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

#tab-tags .btn.btn-primary.btn-sm {
  background: var(--c-bg-alt) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text-2) !important;
  border-radius: var(--r-full) !important;
  font-size: 11px !important;
  padding: 3px 10px !important;
  font-weight: var(--fw-medium) !important;
  transition: var(--t-fast) !important;
}

#tab-tags .btn.btn-primary.btn-sm:hover {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: var(--c-white) !important;
}

/* ---- Ürün Detay Genel İyileştirme ---- */
/* Toast konumunu fixed header altında göster */
.alert-dismissible.alert-success {
  top: 145px !important;
}

/* ================================================================
   36. SEPET — Tetikleyici Buton + Dropdown Panel
   ================================================================ */

/* ── Tetikleyici Buton ─────────────────────────────────────── */
.sera-cart-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--c-primary) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 9px 14px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.18s !important;
  border: none !important;
  line-height: 1 !important;
}
.sera-cart-trigger:hover,
.sera-cart-trigger:focus {
  background: var(--c-primary-dark) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* İkon wrapper — badge'in absolute konumlanması için */
.sera-cart-icon-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sera-cart-icon-wrap .fa {
  font-size: 18px !important;
}

/* Ürün sayısı badge */
/* Badge: sadece sayıyı göster — items_cart2 ve items_carts gizle */
.sera-cart-badge {
  position: absolute !important;
  top: -9px !important;
  right: -10px !important;
  background: var(--c-accent) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  line-height: 1 !important;
  overflow: hidden !important;
}
/* Badge: sadece sayıyı gösterir — Twig'den {{ (products|length) + (vouchers|length) }} */

/* Tetikleyici "Sepetim" etiketi — tek satır, temiz */
.sera-cart-trigger > span:not(.sera-cart-icon-wrap) {
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* Eski SO Framework buton stillerini sıfırla */
#cart > .btn,
.shopping_cart .btn,
.cart-total .btn,
.btn-group.top_cart {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* ── Dropdown Panel ───────────────────────────────────────── */
.sera-cart-panel {
  min-width: 340px !important;
  max-width: 380px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.16) !important;
  overflow: hidden !important;
  top: calc(100% + 8px) !important;
}

/* Panel başlık */
.sera-cart-panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background: var(--c-primary) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.sera-cart-panel-head .fa {
  margin-right: 6px !important;
  opacity: 0.85 !important;
}
.sera-cart-count {
  font-size: 11px !important;
  opacity: 0.8 !important;
  font-weight: 500 !important;
}

/* ── Ürün Listesi ─────────────────────────────────────────── */
.sera-cart-items {
  max-height: 280px !important;
  overflow-y: auto !important;
  background: #fff !important;
}

.sera-cart-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  position: relative !important;
}
.sera-cart-item:last-child {
  border-bottom: none !important;
}
.sera-cart-item:hover {
  background: #fafafa !important;
}

/* Ürün görseli */
.sera-cart-item-img {
  flex: 0 0 52px !important;
  width: 52px !important;
  height: 52px !important;
}
.sera-cart-item-img img {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;
  border-radius: 6px !important;
  border: 1px solid #eee !important;
  display: block !important;
}
.sera-cart-item-no-img {
  width: 52px !important;
  height: 52px !important;
  background: #f5f5f5 !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ccc !important;
  font-size: 20px !important;
}

/* Ürün bilgisi */
.sera-cart-item-info {
  flex: 1 !important;
  min-width: 0 !important;
}
.sera-cart-item-name {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--c-text) !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  margin-bottom: 4px !important;
}
.sera-cart-item-name:hover {
  color: var(--c-primary) !important;
}
.sera-cart-item-option {
  display: block !important;
  font-size: 11px !important;
  color: var(--c-text-3) !important;
  margin-bottom: 2px !important;
}
.sera-cart-item-bottom {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 4px !important;
}
.sera-cart-item-qty {
  font-size: 11px !important;
  color: var(--c-text-3) !important;
  background: #f0f0f0 !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
}
.sera-cart-item-price {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--c-primary) !important;
}

/* Sil butonu */
.sera-cart-item-remove {
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  background: none !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 50% !important;
  color: #aaa !important;
  font-size: 10px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: all 0.15s !important;
  margin-top: 2px !important;
}
.sera-cart-item-remove:hover {
  background: #fee !important;
  border-color: #e57373 !important;
  color: #e53935 !important;
}

/* ── Footer ──────────────────────────────────────────────── */
.sera-cart-panel-foot {
  padding: 12px 14px !important;
  background: #f8f8f8 !important;
  border-top: 1px solid #eee !important;
  display: flex !important;
  gap: 8px !important;
}
.sera-cart-checkout-btn {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: var(--c-primary) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.15s !important;
}
.sera-cart-checkout-btn:hover {
  background: var(--c-primary-dark) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.sera-cart-view-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  color: var(--c-text-2) !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.15s !important;
}
.sera-cart-view-btn:hover {
  border-color: var(--c-primary) !important;
  color: var(--c-primary) !important;
  text-decoration: none !important;
}

/* ── Boş sepet ───────────────────────────────────────────── */
.sera-cart-empty {
  padding: 32px 16px !important;
  text-align: center !important;
  color: var(--c-text-3) !important;
}
.sera-cart-empty .fa {
  font-size: 36px !important;
  margin-bottom: 10px !important;
  opacity: 0.3 !important;
  display: block !important;
}
.sera-cart-empty p {
  font-size: 13px !important;
  margin: 0 !important;
}

/* ── Mobil ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  .sera-cart-trigger {
    padding: 9px 11px !important;
    border-radius: 8px !important;
  }
  .sera-cart-panel {
    min-width: 300px !important;
    max-width: calc(100vw - 20px) !important;
    right: 0 !important;
    left: auto !important;
  }
}

/* ================================================================
   37. ANA SAYFA BİLGİ BLOKLARI — Profesyonel Kart Tasarımı v2
   MÜŞTERİ HİZMETLERİ (warning/yeşil) + KARGO (danger/turuncu)
   ================================================================ */

.banners.banners1 {
  margin: 20px 0 8px !important;
}
.banners.banners1 > .row {
  margin: 0 -8px !important;
}
.banners.banners1 > .row > .bn {
  padding: 0 8px !important;
  margin-bottom: 16px;
}

/* ── Kart yapısı ─────────────────────────────────────────── */
.banners.banners1 .alert-warning.alert-dismissible,
.banners.banners1 .alert-danger.alert-dismissible {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  /* sol 58px = ikon şeridi, sağ 40px = close butonu */
  padding: 18px 40px 18px 66px !important;
  border: none !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.16) !important;
  min-height: 88px !important;
}

/* ── Renkler (layered gradient: sol şerit + ana renk) ─────── */
.banners.banners1 .alert-warning.alert-dismissible {
  background:
    linear-gradient(to right, rgba(0,0,0,0.18) 52px, transparent 52px),
    linear-gradient(135deg, #1e4010 0%, #3a7020 55%, #4d8e2a 100%) !important;
  color: #fff !important;
}

.banners.banners1 .alert-danger.alert-dismissible {
  background:
    linear-gradient(to right, rgba(0,0,0,0.18) 52px, transparent 52px),
    linear-gradient(135deg, #6b2408 0%, #a83e12 55%, #cc5a1a 100%) !important;
  color: #fff !important;
}

/* ── Sol şerit ikonu — ::before ──────────────────────────── */
.banners.banners1 .alert-warning.alert-dismissible::before,
.banners.banners1 .alert-danger.alert-dismissible::before {
  font-family: "FontAwesome" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 52px !important;
  text-align: center !important;
  font-size: 22px !important;
  color: rgba(255,255,255,0.88) !important;
  line-height: 1 !important;
}

.banners.banners1 .alert-warning.alert-dismissible::before {
  content: "\f095" !important;  /* fa-phone */
}

.banners.banners1 .alert-danger.alert-dismissible::before {
  content: "\f0d1" !important;  /* fa-truck */
}

/* ── Sağ alt dekoratif büyük ikon — ::after ──────────────── */
.banners.banners1 .alert-warning.alert-dismissible::after {
  content: "\f095" !important;
  font-family: "FontAwesome" !important;
  position: absolute !important;
  right: 14px !important;
  bottom: 6px !important;
  font-size: 76px !important;
  color: rgba(255,255,255,0.05) !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

.banners.banners1 .alert-danger.alert-dismissible::after {
  content: "\f0d1" !important;
  font-family: "FontAwesome" !important;
  position: absolute !important;
  right: 14px !important;
  bottom: 6px !important;
  font-size: 76px !important;
  color: rgba(255,255,255,0.05) !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* ── Kapat butonu ────────────────────────────────────────── */
.banners.banners1 .alert-dismissible .close {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  float: none !important;
  opacity: 0.45 !important;
  color: #fff !important;
  text-shadow: none !important;
  font-size: 16px !important;
  background: none !important;
  border: none !important;
  padding: 4px 8px !important;
  line-height: 1 !important;
  z-index: 5 !important;
}
.banners.banners1 .alert-dismissible .close:hover {
  opacity: 1 !important;
}

/* ── İçerik temizleme: font tag + inline style override ──── */
.banners.banners1 .alert-dismissible font,
.banners.banners1 .alert-dismissible font * {
  font-family: 'Inter', -apple-system, sans-serif !important;
  color: inherit !important;
}

/* Inline font-size span'larını devre dışı bırak */
.banners.banners1 .alert-dismissible span[style] {
  font-size: inherit !important;
  color: inherit !important;
}

/* ── Tüm h2'leri sıfırla ─────────────────────────────────── */
.banners.banners1 .alert-dismissible h2 {
  display: block !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.65) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border: none !important;
  background: none !important;
  line-height: 1.5 !important;
}

/* ── Yeşil kart: 1. h2 = küçük etiket (MÜŞTERİ HİZMETLERİ + tel içinde) */
.banners.banners1 .alert-warning h2:first-of-type {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.52) !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  margin-bottom: 0 !important;
}

/* ── Turuncu kart: 1. h2 = belirgin uyarı başlığı */
.banners.banners1 .alert-danger h2:first-of-type {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  margin-bottom: 2px !important;
}

/* ── Yeşil kart: 3. h2 = ürün listesi (küçük, 2 satıra sınırlı) */
.banners.banners1 .alert-warning h2:nth-of-type(3) {
  font-size: 10px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.38) !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  line-height: 1.4 !important;
}

/* ── Telefon linkleri — büyük ve belirgin ────────────────── */
.banners.banners1 .alert-dismissible a[href^="tel"] {
  display: block !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  margin: 1px 0 4px !important;
}
.banners.banners1 .alert-dismissible a[href^="tel"]:hover {
  opacity: 0.82 !important;
  text-decoration: none !important;
}

/* Strong içindeki text */
.banners.banners1 .alert-dismissible strong {
  font-size: inherit !important;
  font-weight: 700 !important;
  color: #fff !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
}
.banners.banners1 .alert-dismissible strong span[style] {
  font-size: inherit !important;
}

/* ── Mobil ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  .banners.banners1 .alert-warning.alert-dismissible,
  .banners.banners1 .alert-danger.alert-dismissible {
    padding: 14px 36px 14px 54px !important;
    min-height: auto !important;
  }
  .banners.banners1 .alert-warning.alert-dismissible::before,
  .banners.banners1 .alert-danger.alert-dismissible::before {
    width: 42px !important;
    font-size: 18px !important;
  }
  .banners.banners1 .alert-dismissible a[href^="tel"] {
    font-size: 18px !important;
  }
  .banners.banners1 .alert-danger h2:first-of-type {
    font-size: 13px !important;
  }
  .banners.banners1 .alert-warning h2:nth-of-type(3) {
    -webkit-line-clamp: 1 !important;
  }
}

/* ================================================================
   38. ÜRÜN KARTLARI — MOBİL OPTİMİZASYON (2026)
   Tüm kategori/listing sayfalarında geçerli
   ================================================================ */

/* ── Masaüstü: Kart yapısını düzelt ──────────────────────── */
.product-item-container {
  display: flex !important;
  flex-direction: column !important;
}
.product-item-container .right-block {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* İmaj alanı sabit aspect-ratio */
.product-image-container {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}
.product-image-container img.img-responsive {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 10px !important;
}

/* Sepete ekle butonu — kart altına yapış */
.product-item-container .addToCart.btn-button {
  margin-top: auto !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: var(--c-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}
.product-item-container .addToCart.btn-button:hover {
  background: var(--c-primary-dark) !important;
}
.product-item-container .addToCart.btn-button .fa {
  font-size: 13px !important;
}

/* Kısa açıklama — listede gizle */
.product-item-container .description {
  display: none !important;
}

/* ── MOBİL: 2 Sütun Grid ─────────────────────────────────── */
@media (max-width: 767px) {

  /* 2 sütun zorla */
  .products-list .product-layout.product-grid,
  .products-list .product-layout {
    width: 50% !important;
    float: left !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Kart */
  .product-item-container {
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08) !important;
  }
  .product-item-container:hover {
    transform: none !important;
  }

  /* Görsel */
  .product-image-container {
    aspect-ratio: 1 / 1 !important;
  }
  .product-image-container img.img-responsive {
    padding: 6px !important;
  }

  /* Bilgi alanı */
  .product-item-container .right-block {
    padding: 7px 8px 9px !important;
    gap: 3px !important;
  }

  /* Ürün adı */
  .product-item-container .right-block h4 {
    font-size: 11.5px !important;
    margin: 0 !important;
    line-height: 1.35 !important;
  }
  .product-item-container .right-block h4 a {
    -webkit-line-clamp: 2 !important;
  }

  /* Fiyat */
  .product-item-container .price-new {
    font-size: 13px !important;
    font-weight: 700 !important;
  }
  .product-item-container .price-old {
    font-size: 10px !important;
  }
  /* Normal fiyat (indirim yoksa) */
  .product-item-container .price > span.price {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--c-primary) !important;
  }

  /* Rating gizle */
  .product-item-container .rate-history {
    display: none !important;
  }

  /* Hover button group gizle */
  .product-item-container .button-group,
  .product-item-container .so-quickview {
    display: none !important;
  }

  /* İndirim etiketi */
  .box-label {
    top: 6px !important;
    left: 6px !important;
  }
  .label-product {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }

  /* Sepete ekle butonu */
  .product-item-container .addToCart.btn-button {
    padding: 6px 8px !important;
    font-size: 10.5px !important;
    border-radius: 5px !important;
    gap: 4px !important;
  }
  .product-item-container .addToCart.btn-button span {
    display: none !important;
  }
  .product-item-container .addToCart.btn-button .fa {
    font-size: 14px !important;
    display: block !important;
  }

  /* Filtre paneli */
  .product-filter.filters-panel {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .product-filter .view-mode .btn {
    width: 30px !important;
    height: 30px !important;
    font-size: 11px !important;
  }
  /* Masaüstü view butonlarını gizle */
  #grid-view-2, #grid-view-3, #grid-view-4, #grid-view-5, #table-view {
    display: none !important;
  }
  .product-filter .short-by-show {
    font-size: 12px !important;
  }
  .product-filter .form-control {
    font-size: 12px !important;
    padding: 4px 8px !important;
    height: 32px !important;
  }
  .product-filter label {
    font-size: 11px !important;
  }

  /* Stok etiketi */
  .label-stock {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }
}

/* ── Çok küçük ekranlar (< 400px) ────────────────────────── */
@media (max-width: 400px) {
  .products-list .product-layout.product-grid {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
  .product-item-container .right-block {
    padding: 5px 6px 7px !important;
  }
  .product-item-container .right-block h4 {
    font-size: 10.5px !important;
  }
}

/* ================================================================
   39. KATEGORİ SAYFASI — MOBİL UYGULAMA TARZI
   Breadcrumb + Alt Kategoriler + Filtre Paneli
   ================================================================ */

/* ── BREADCRUMB ─────────────────────────────────────────────── */

/* current-name (büyük başlık bandı) — masaüstünde minimal */
.breadcrumbs .current-name {
  display: none !important;
}

/* Breadcrumb satırı */
.breadcrumbs {
  background: #fff !important;
  border-bottom: 1px solid #efefef !important;
  padding: 0 !important;
}
.breadcrumbs .inner {
  padding: 0 !important;
}
ul.breadcrumb {
  background: none !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
}
ul.breadcrumb > div.container {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
  padding: 0 15px !important;
}
ul.breadcrumb li {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 12px !important;
}
ul.breadcrumb li a {
  color: var(--c-text-3) !important;
  text-decoration: none !important;
  padding: 2px 4px !important;
}
ul.breadcrumb li a:hover {
  color: var(--c-primary) !important;
}
ul.breadcrumb li a .fa-home {
  font-size: 13px !important;
}
/* Ayırıcı */
ul.breadcrumb > div.container > li + li::before {
  content: "›" !important;
  color: #ccc !important;
  margin: 0 2px !important;
  font-size: 14px !important;
}
/* Son öğe (aktif) */
ul.breadcrumb li:last-child a {
  color: var(--c-text) !important;
  font-weight: 500 !important;
}

/* ── ALT KATEGORİLER ────────────────────────────────────────── */

/* Başlık */
.refine-search h3.title-category {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--c-text-2) !important;
  margin-bottom: 12px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
}

/* Container */
.refine-search.form-group {
  margin-bottom: 16px !important;
  overflow: hidden !important;
}

/* ── Masaüstü: grid ─────────────────────────────────────────── */
ul.refine-search__content {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.refine-search__subitem {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.refine-search__subitem a.thumbnail {
  display: block !important;
  width: 100% !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid var(--c-border) !important;
  aspect-ratio: 1 / 1 !important;
  background: var(--c-white) !important;
  padding: 8px !important;
  transition: all 0.18s !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
.refine-search__subitem a.thumbnail:hover {
  border-color: var(--c-primary) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10) !important;
  transform: translateY(-2px) !important;
}
.refine-search__subitem a.thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.refine-search__subitem a.thumbnail--title {
  display: block !important;
  text-align: center !important;
  font-size: 11px !important;
  color: var(--c-text-2) !important;
  margin-top: 5px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  transition: color 0.15s !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  word-break: break-word !important;
}
.refine-search__subitem a.thumbnail--title:hover {
  color: var(--c-primary) !important;
}

/* ── FİLTRE PANELİ ──────────────────────────────────────────── */

.product-filter.filters-panel {
  background: #fff !important;
  border: 1px solid #efefef !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin-bottom: 16px !important;
}
.product-filter.filters-panel .row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
}

/* ===================================================
   MOBİL (max-width: 767px)
   =================================================== */
@media (max-width: 767px) {

  /* Breadcrumb: tek satır, kompakt */
  ul.breadcrumb {
    padding: 6px 0 !important;
  }
  ul.breadcrumb li {
    font-size: 11px !important;
  }

  /* current-name tamamen gizle */
  .breadcrumbs .current-name {
    display: none !important;
  }

  /* ── Alt kategoriler: yatay kaydır ─────────────── */
  ul.refine-search__content {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    /* Scrollbar gizle */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  ul.refine-search__content::-webkit-scrollbar {
    display: none !important;
  }

  .refine-search__subitem {
    flex: 0 0 80px !important;
    min-width: 80px !important;
    scroll-snap-align: start !important;
  }

  .refine-search__subitem a.thumbnail {
    width: 80px !important;
    height: 80px !important;
    padding: 6px !important;
    border-radius: 10px !important;
  }

  .refine-search__subitem a.thumbnail--title {
    font-size: 10px !important;
    margin-top: 4px !important;
    -webkit-line-clamp: 2 !important;
  }

  .refine-search h3.title-category {
    font-size: 11px !important;
    margin-bottom: 8px !important;
  }

  /* ── Filtre Paneli: kompakt tek satır ──────────── */
  .product-filter.filters-panel {
    padding: 7px 10px !important;
    border-radius: 8px !important;
  }

  .product-filter.filters-panel .row {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* View mode — sadece grid/list bırak, diğerleri gizle */
  .product-filter .view-mode {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }

  /* "Izgara Görünümü:" yazısı ve sidebar butonu gizle */
  .product-filter .btn-gridview,
  .product-filter .open-sidebar,
  .product-filter .sidebar-overlay {
    display: none !important;
  }

  /* Sadece grid ve list toggle göster */
  #grid-view, #list-view {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    border: 1px solid #e0e0e0 !important;
    background: #fff !important;
    color: var(--c-text-2) !important;
    font-size: 13px !important;
    padding: 0 !important;
  }
  #grid-view.active, #list-view.active {
    background: var(--c-primary) !important;
    border-color: var(--c-primary) !important;
    color: #fff !important;
  }

  /* Sort + Limit: yan yana, esnek */
  .product-filter .short-by-show {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 !important;
    padding: 0 !important;
    text-align: left !important;
    width: auto !important;
  }

  .product-filter .form-group {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    flex: 1 !important;
  }

  .product-filter label.control-label {
    font-size: 10px !important;
    color: var(--c-text-3) !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  .product-filter select.form-control {
    height: 32px !important;
    font-size: 11px !important;
    padding: 0 6px !important;
    border-radius: 6px !important;
    border: 1px solid #e0e0e0 !important;
    background: #f8f8f8 !important;
    flex: 1 !important;
  }

  /* Karşılaştır butonu gizle */
  .product-filter .product-compare {
    display: none !important;
  }

  /* com-md-4 sınıfını override et */
  .product-filter .com-md-4 {
    width: auto !important;
    padding: 0 !important;
  }
}

/* ================================================================
   40. MOBİL KART SATIR ARALIK DÜZELTMESİ
   ================================================================ */
@media (max-width: 767px) {
  /* Bootstrap col padding-bottom sıfırla */
  .products-list .product-layout.product-grid {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Kart margin — sadece alt, 8px */
  .products-list .product-layout .product-item-container {
    margin-bottom: 8px !important;
  }

  /* list-block (♡ ↺ ikonlar) — mobilde gizle */
  .product-item-container .list-block {
    display: none !important;
  }
}

/* ================================================================
   41. MOBİL HEADER LAYOUT + ALT NAVİGASYON ÇUBUĞU
   ================================================================ */

/* ── Topbar: mobilde tamamen gizle ───────────────────────── */
@media (max-width: 767px) {
  #sera-topbar {
    display: none !important;
  }
}

/* ── Header ana satır: mobilde tek sıra, kompakt ─────────── */
@media (max-width: 767px) {
  #header .header-bottom {
    padding: 6px 0 !important;
  }

  /* Logo sol — tam genişlik sütunun solu */
  .sera-logo-col.col-xs-8 {
    display: flex !important;
    align-items: center !important;
    padding-left: 12px !important;
  }
  .sera-logo .logo a img,
  .sera-logo a img.lazyloaded {
    max-height: 44px !important;
    max-width: 140px !important;
  }

  /* Sağ sütun: sepet + hamburger */
  .sera-cart-col.col-xs-4 {
    padding-right: 10px !important;
  }
  .sera-cart-account {
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  /* Hamburger butonu */
  .sera-menu-toggle {
    background: none !important;
    border: none !important;
    padding: 6px 8px !important;
    color: var(--c-text) !important;
    font-size: 20px !important;
    cursor: pointer !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Arama çubuğu: logo satırının altında tam genişlik */
  .sera-search-col.col-xs-12 {
    padding: 4px 12px 2px !important;
    order: 3 !important;
  }
  .search-header-w #search {
    margin: 0 !important;
  }
  .search-header-w #search .form-control {
    height: 36px !important;
    font-size: 13px !important;
    border-radius: 8px 0 0 8px !important;
  }
  .search-header-w #search .btn-search {
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 0 8px 8px 0 !important;
  }
}

/* ── BOTTOM NAVİGASYON ÇUBUĞU ────────────────────────────── */

.sera-bottom-nav {
  display: none; /* Masaüstünde gizle */
}

@media (max-width: 767px) {
  .sera-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1050 !important;
    background: #fff !important;
    border-top: 1px solid #e8e8e8 !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08) !important;
    height: 58px !important;
    align-items: stretch !important;
    justify-content: space-around !important;
  }

  .sera-bnav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    color: #888 !important;
    text-decoration: none !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    padding: 6px 4px !important;
    transition: color 0.15s !important;
    position: relative !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
  }
  .sera-bnav-item .fa {
    font-size: 20px !important;
    line-height: 1 !important;
  }
  .sera-bnav-item span {
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  /* Aktif + hover */
  .sera-bnav-item:hover,
  .sera-bnav-item.active {
    color: var(--c-primary) !important;
    text-decoration: none !important;
  }
  .sera-bnav-item.active .fa {
    color: var(--c-primary) !important;
  }

  /* Sepet item: ikon wrap + badge */
  .sera-bnav-icon-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .sera-bnav-badge {
    position: absolute !important;
    top: -6px !important;
    right: -8px !important;
    background: var(--c-accent) !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    min-width: 16px !important;
    height: 16px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 3px !important;
    line-height: 1 !important;
  }

  /* Orta item (Ara) — vurgulama efekti */
  #bnav-search .fa {
    background: var(--c-primary) !important;
    color: #fff !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    margin-top: -12px !important;
    box-shadow: 0 4px 12px rgba(74,140,47,0.35) !important;
  }
  #bnav-search span {
    margin-top: 2px !important;
    color: var(--c-primary) !important;
  }
}

/* ── BREADCRUMB: mobilde tek satır minimal ───────────────── */
@media (max-width: 767px) {
  .breadcrumbs {
    padding: 0 !important;
    border-bottom: none !important;
  }
  ul.breadcrumb {
    padding: 5px 0 !important;
    background: #f8f8f8 !important;
    border-bottom: 1px solid #efefef !important;
  }
  ul.breadcrumb li {
    font-size: 11px !important;
  }
  /* Uzun kategori adı — kısalt */
  ul.breadcrumb li:last-child a {
    max-width: 180px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
  }
}

/* ================================================================
   42. SEPETİM SAYFASI — checkout/cart modern tasarım
   ================================================================ */

/* ── Sayfa başlığı ─────────────────────────────────────────── */
#checkout-cart h1 {
  font-size: 22px !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  color: var(--c-text) !important;
}

/* ── Ürün tablosu genel ────────────────────────────────────── */
#checkout-cart .table-bordered {
  border: none !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
}
#checkout-cart .table-bordered thead tr {
  background: var(--c-primary) !important;
  color: #fff !important;
}
#checkout-cart .table-bordered thead tr td {
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border: none !important;
  padding: 10px 12px !important;
}
#checkout-cart .table-bordered tbody tr td {
  vertical-align: middle !important;
  padding: 10px 12px !important;
  border-color: #f0f0f0 !important;
}
#checkout-cart .table-bordered tbody tr:hover {
  background: #fafafa !important;
}
#checkout-cart .table-bordered .img-thumbnail {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
  border-radius: 6px !important;
}
/* Miktar input grubu */
#checkout-cart .input-group { max-width: 160px !important; }
#checkout-cart .input-group .form-control {
  text-align: center !important;
  font-weight: 600 !important;
}
#checkout-cart .input-group .btn-primary {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
}
#checkout-cart .input-group .btn-danger {
  background: #e53935 !important;
  border-color: #e53935 !important;
}

/* ── Toplam tablosu ────────────────────────────────────────── */
#checkout-cart .col-sm-4.col-sm-offset-8 .table {
  border: none !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;
}
#checkout-cart .col-sm-4.col-sm-offset-8 .table td {
  padding: 10px 16px !important;
  border-color: #f0f0f0 !important;
  font-size: 14px !important;
}
#checkout-cart .col-sm-4.col-sm-offset-8 .table tr:last-child td {
  background: #f8f8f8 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--c-primary) !important;
}

/* ── Butonlar ──────────────────────────────────────────────── */
#checkout-cart .buttons {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 20px !important;
}
#checkout-cart .buttons .btn-default {
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  border-color: #ddd !important;
  color: var(--c-text-2) !important;
}
#checkout-cart .buttons .btn-primary {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  border-radius: 10px !important;
  padding: 12px 28px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(74,140,47,0.3) !important;
}

/* ── MOBİL: Kart görünümü ─────────────────────────────────── */
@media (max-width: 767px) {

  /* Tablo overflow gizle — scrollbar olmasın */
  #checkout-cart .table-responsive { overflow: visible !important; }

  /* Tablo → block yapısı */
  #checkout-cart table.table,
  #checkout-cart table.table thead,
  #checkout-cart table.table tbody,
  #checkout-cart table.table tfoot,
  #checkout-cart table.table tr { display: block !important; width: 100% !important; }
  #checkout-cart table.table td { display: block !important; }

  /* Tablo başlığını gizle */
  #checkout-cart table.table thead { display: none !important; }

  /* Her ürün satırı → kart */
  #checkout-cart table.table tbody tr {
    position: relative !important;
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    padding: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    display: grid !important;
    grid-template-columns: 76px 1fr !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 12px !important;
    overflow: hidden !important;
  }

  /* Sütun 1 — Ürün görseli */
  #checkout-cart tbody tr td:nth-child(1) {
    grid-row: 1 / 3 !important;
    grid-column: 1 !important;
    width: 76px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }
  #checkout-cart tbody tr td:nth-child(1) img.img-thumbnail {
    width: 76px !important;
    height: 76px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    border: 1px solid #eee !important;
    display: block !important;
  }

  /* Sütun 2 — Ürün adı */
  #checkout-cart tbody tr td:nth-child(2) {
    grid-row: 1 !important;
    grid-column: 2 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: var(--c-text) !important;
  }

  /* Sütun 3 — Model: gizle */
  #checkout-cart tbody tr td:nth-child(3) {
    display: none !important;
  }

  /* Sütun 4 — Miktar kontrolü */
  #checkout-cart tbody tr td:nth-child(4) {
    grid-row: 2 !important;
    grid-column: 2 !important;
    padding: 8px 0 0 0 !important;
    border: none !important;
    background: transparent !important;
  }
  #checkout-cart tbody tr td:nth-child(4) .input-group {
    max-width: 140px !important;
  }
  #checkout-cart tbody tr td:nth-child(4) .form-control {
    height: 34px !important;
    font-size: 14px !important;
  }
  #checkout-cart tbody tr td:nth-child(4) .btn {
    height: 34px !important;
    padding: 6px 10px !important;
  }

  /* Sütun 5 — Birim fiyat: gizle */
  #checkout-cart tbody tr td:nth-child(5) {
    display: none !important;
  }

  /* Sütun 6 — Satır toplamı */
  #checkout-cart tbody tr td:nth-child(6) {
    grid-row: 3 !important;
    grid-column: 1 / 3 !important;
    padding: 8px 0 0 0 !important;
    border: none !important;
    border-top: 1px solid #f0f0f0 !important;
    background: transparent !important;
    text-align: right !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: var(--c-primary) !important;
    margin-top: 8px !important;
  }

  /* Toplam kutu */
  #checkout-cart .col-sm-4.col-sm-offset-8 {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Butonlar — tam genişlik */
  #checkout-cart .buttons {
    flex-direction: column !important;
    gap: 8px !important;
  }
  #checkout-cart .buttons .pull-left,
  #checkout-cart .buttons .pull-right {
    float: none !important;
    width: 100% !important;
  }
  #checkout-cart .buttons .btn-default {
    width: 100% !important;
    text-align: center !important;
  }
  #checkout-cart .buttons .btn-primary {
    width: 100% !important;
    text-align: center !important;
    padding: 14px !important;
    font-size: 16px !important;
    order: -1 !important;
  }
}

/* ================================================================
   43. CHECKOUT SAYFALARI — Sidebar gizle, içerik tam genişlik
   ================================================================ */
body.checkout-cart #column-left,
body.checkout-cart #column-right {
  display: none !important;
}
body.checkout-cart #content {
  width: 100% !important;
  float: none !important;
  margin-left: 0 !important;
}

/* ================================================================
   44. ÜRÜN DETAY — Açıklama & Breadcrumb Düzeltmeleri
   ================================================================ */

/* Ürün açıklaması: gradient overlay kaldır, her zaman görünür */
.desc-collapse.showdown::before {
  display: none !important;
}
.desc-collapse.showdown {
  max-height: none !important;
  overflow: visible !important;
}
.button-toggle {
  display: none !important;
}

/* Breadcrumb: .current-name bandı — masaüstü ve mobilde minimal */
.breadcrumbs .current-name {
  display: none !important;
}
/* Breadcrumb satırı yüksekliği sıkıştır */
.breadcrumbs .inner {
  padding: 0 !important;
}
.breadcrumbs {
  padding: 0 !important;
}
ul.breadcrumb {
  padding: 6px 0 !important;
  margin: 0 !important;
}

/* Mobilde breadcrumb minimal */
@media (max-width: 767px) {
  .breadcrumbs .current-name {
    display: none !important;
  }
  .breadcrumbs {
    padding: 0 !important;
  }
  ul.breadcrumb {
    padding: 4px 0 !important;
  }
}

/* ================================================================
   45. MOBİL KAPSAMLI DÜZELTME (v20260410)
   Header + Ürün Detay + Footer + Genel
   ================================================================ */

/* ── 1. HEADER: Mobilde static konuma al ─────────────────── */
@media (max-width: 767px) {
  /* Fixed header mobilde içerik üstüne binmesin */
  .typeheader-1,
  header#header.typeheader-1 {
    position: static !important;
    width: 100% !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
  }
  /* body padding-top sıfırla (header artık static) */
  body {
    padding-top: 0 !important;
    /* Alt nav için fallback padding — JS üzerine yazar */
    padding-bottom: 70px !important;
  }
}

/* ── 2. ÜRÜN DETAY GALERİ ───────────────────────────────── */
@media (max-width: 767px) {
  /* Ana görsel — mobilde kare yerine 4:3 oran */
  .large-image img.product-image-zoom {
    aspect-ratio: 4 / 3 !important;
    padding: 8px !important;
  }
  /* Küçük görseller — yatay kaydırma */
  #thumb-slider {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 4px 0 8px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  #thumb-slider::-webkit-scrollbar {
    display: none !important;
  }
  #thumb-slider .image-additional {
    flex: 0 0 68px !important;
    width: 68px !important;
    min-width: 68px !important;
    padding: 2px !important;
  }
  #thumb-slider .image-additional a img {
    width: 64px !important;
    height: 64px !important;
    aspect-ratio: 1/1 !important;
    object-fit: contain !important;
  }
}

/* ── 3. ÜRÜN BİLGİ BÖLÜMÜ ───────────────────────────────── */
@media (max-width: 767px) {
  /* Ürün başlığı */
  .title-product h1,
  .content-product-right .title-product h1 {
    font-size: 1.2rem !important;
    margin-bottom: 8px !important;
  }
  /* Fiyat alanı */
  .product_page_price .price-new span,
  .product_page_price .price-new {
    font-size: 1.5rem !important;
  }
  .product_page_price .price-old span {
    font-size: 0.95rem !important;
  }
  /* Sepete ekle bölümü */
  .box-cart {
    padding: 12px 0 !important;
  }
  .box-cart .box-info-product {
    gap: 10px !important;
  }
  /* Form grupları (ürün seçenekleri) */
  .product-view .form-group label {
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
  }
  .product-view .form-group select,
  .product-view .form-group input[type="text"],
  .product-view .form-group input[type="number"] {
    font-size: 14px !important;
    height: 40px !important;
    padding: 6px 10px !important;
    width: 100% !important;
    border-radius: 8px !important;
  }
  /* Radio/checkbox seçenekler */
  .product-view .form-group .radio label,
  .product-view .form-group .checkbox label {
    font-size: 13px !important;
    padding: 6px 0 !important;
  }
  /* Miktar kontrolü */
  .quantity-control {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  /* Sepete ekle + Hızlı satın al butonları */
  #button-cart,
  #button-checkout,
  .btn-mega {
    font-size: 15px !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
  }
  /* Ürün meta kutusu (marka, model, stok) */
  .product-box-desc .inner-box-desc {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
  .product-box-desc .inner-box-desc span {
    min-width: 55px !important;
  }
}

/* ── 4. ÜRÜN DETAY TAB BÖLÜMÜ ───────────────────────────── */
@media (max-width: 767px) {
  /* Tab listesi — yatay kaydırma, satır kesmez */
  .nav-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    border-bottom: 2px solid var(--c-border) !important;
    gap: 0 !important;
    margin-bottom: 16px !important;
  }
  .nav-tabs::-webkit-scrollbar { display: none !important; }
  .nav-tabs > li {
    flex-shrink: 0 !important;
    float: none !important;
  }
  .nav-tabs > li > a {
    padding: 10px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  /* Tab içerik alanı padding */
  .tab-content > .tab-pane {
    padding: 12px 0 !important;
  }
  .tab-content > .tab-pane p,
  .tab-content > .tab-pane li {
    font-size: 13px !important;
    line-height: 1.7 !important;
  }
  /* Açıklama başlığı */
  .product-property-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    color: var(--c-text) !important;
  }
  /* Yorum formu */
  #tab-review .table {
    font-size: 12px !important;
  }
}

/* ── 5. FOOTER MOBİL ────────────────────────────────────── */
@media (max-width: 767px) {
  /* Footer ana kutu */
  .footer-container {
    padding-bottom: 20px !important;
  }
  /* Page builder row — boşlukları sıkıştır */
  .footer-container .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .footer-container [class*="col-"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Footer modtitle */
  .footer-container .modtitle,
  .footer-container h3.modtitle {
    font-size: 14px !important;
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
  }
  /* Newsletter form */
  .footer-container .newsletter .block_content form {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .footer-container .newsletter input[type="text"],
  .footer-container .newsletter input[type="email"] {
    width: 100% !important;
    font-size: 13px !important;
    height: 40px !important;
    border-radius: 8px !important;
  }
  .footer-container .newsletter .btn-newsletter,
  .footer-container .newsletter button[type="submit"] {
    width: 100% !important;
    border-radius: 8px !important;
    height: 40px !important;
    font-size: 14px !important;
  }
  /* Footer linkler */
  .footer-container a {
    font-size: 13px !important;
    line-height: 2 !important;
  }
  /* Ödeme ikonları */
  .footer-container .payment-img img {
    max-height: 28px !important;
    margin: 2px !important;
  }
  /* Footer bottom */
  .footer-container .footer-bottom {
    text-align: center !important;
    padding: 12px !important;
    font-size: 11px !important;
  }
}

/* ── 6. GENEL MOBİL İYİLEŞTİRMELER ─────────────────────── */
@media (max-width: 767px) {
  /* Wrapper taşma önleme */
  #wrapper {
    overflow-x: hidden !important;
  }
  /* Container genişliği */
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Bootstrap row negatif margin düzelt */
  .row {
    margin-left: -8px !important;
    margin-right: -8px !important;
  }
  /* Modül başlıkları */
  .modtitle span {
    font-size: 16px !important;
  }
  /* Ürün kartlarında resim galerisi taşmasını engelle */
  .so-extraslider .extraslider-inner,
  .so-listing-tabs .ltabs-items-inner {
    overflow: hidden !important;
  }
  /* Alert ve toast — mobilde tam genişlik */
  .alert {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }
  /* Tablo taşması */
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* H1 genel */
  h1 { font-size: clamp(1.3rem, 5vw, 1.6rem) !important; }
  h2 { font-size: clamp(1.1rem, 4vw, 1.35rem) !important; }
}

/* ── 7. KÜÇÜK EKRAN (≤480px) ────────────────────────────── */
@media (max-width: 480px) {
  .sera-logo a img,
  .sera-logo a img.lazyloaded {
    max-height: 38px !important;
    max-width: 120px !important;
  }
  .large-image img.product-image-zoom {
    aspect-ratio: 1 / 1 !important;
    padding: 6px !important;
  }
  .title-product h1,
  .content-product-right .title-product h1 {
    font-size: 1.1rem !important;
  }
  .product_page_price .price-new span,
  .product_page_price .price-new {
    font-size: 1.3rem !important;
  }
  /* Tüm ürün kartları — küçük ekranda 2 kolon */
  .products-list.grid .product-layout {
    width: 50% !important;
    float: left !important;
  }
}

/* ================================================================
   46. ÜRÜN DETAY — Buton & Etiket Düzeltmeleri (v20260410)
   ================================================================ */

/* "Ürün Hakkında Bilgi Al" butonu — mavi primary yerine outline */
#so_askquestion_product.btn.btn-primary,
a#so_askquestion_product.btn {
  background-color: transparent !important;
  color: var(--c-text, #333) !important;
  border: 1px solid #ccc !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  box-shadow: none !important;
  transition: border-color 0.2s, color 0.2s !important;
}
#so_askquestion_product.btn.btn-primary:hover,
a#so_askquestion_product.btn:hover {
  border-color: var(--c-green, #2e7d32) !important;
  color: var(--c-green, #2e7d32) !important;
  background-color: transparent !important;
}

/* Ürün etiketleri (#tab-tags) — pill stili, mavi dolgu değil */
#tab-tags .btn.btn-primary,
#tab-tags a.btn {
  background-color: #f1f5f0 !important;
  color: var(--c-text, #444) !important;
  border: 1px solid #d0d8cf !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  padding: 4px 12px !important;
  margin: 3px !important;
  box-shadow: none !important;
  transition: background-color 0.2s, color 0.2s !important;
}
#tab-tags .btn.btn-primary:hover,
#tab-tags a.btn:hover {
  background-color: var(--c-green-light, #e8f5e9) !important;
  color: var(--c-green, #2e7d32) !important;
  border-color: var(--c-green, #2e7d32) !important;
}