/* ==========================================================================
   OZPAM HOME — beyaz + kırmızı, agresif perakende
   Skinlab tema üstüne özel stiller. Sadece anasayfaya özel selectorlar
   kullanılır; diğer sayfalar etkilenmez.
   ========================================================================== */

:root {
  --ozpam-red:        #d10a11;   /* ana kırmızı */
  --ozpam-red-dark:   #a30007;   /* hover/active */
  --ozpam-red-soft:   #ffe5e6;   /* badge/strip arka */
  --ozpam-black:      #111418;
  --ozpam-text:       #1f242b;
  --ozpam-muted:      #6b7280;
  --ozpam-line:       #e5e7eb;
  --ozpam-bg:         #f7f7f8;
  --ozpam-yellow:     #ffd400;   /* indirim/aksent */
  --ozpam-shadow:     0 6px 24px rgba(17, 20, 24, .08);
  --ozpam-shadow-lg:  0 12px 36px rgba(17, 20, 24, .14);
  --ozpam-radius:     6px;
}

/* sayfa anasayfa olduğunda */
body#index .page-home,
body.cms-id-1 .page-home {
  background: #fff;
}

/* genel section başlık */
.ozpam-section {
  padding: 56px 0;
}
.ozpam-section + .ozpam-section { border-top: 1px solid var(--ozpam-line); }
.ozpam-section.ozpam-section--tight { padding: 32px 0; }
.ozpam-section.ozpam-section--alt { background: var(--ozpam-bg); }

.ozpam-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.ozpam-section-head h2 {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800;
  margin: 0 0 4px;
  color: var(--ozpam-black);
  letter-spacing: -0.01em;
}
.ozpam-section-head h2 .accent { color: var(--ozpam-red); }
.ozpam-section-head p {
  margin: 0;
  color: var(--ozpam-muted);
  font-size: 15px;
}
.ozpam-section-head .all-link {
  font-weight: 600;
  color: var(--ozpam-red);
  text-decoration: none;
  white-space: nowrap;
}
.ozpam-section-head .all-link:hover { text-decoration: underline; }

/* ==========================================================================
   HERO — an_homeslider kapsayıcısının üzerine ince bir overlay/cila
   ========================================================================== */
.ozpam-hero {
  position: relative;
  background: var(--ozpam-black);
}
.ozpam-hero .an-homeslider,
.ozpam-hero .anhomeslider,
.ozpam-hero .swiper-container,
.ozpam-hero .owl-carousel { background: var(--ozpam-black); }

.ozpam-hero .ah-caption,
.ozpam-hero .slide-content {
  color: #fff;
}
.ozpam-hero .btn,
.ozpam-hero .ah-caption .btn {
  background: var(--ozpam-red);
  border-color: var(--ozpam-red);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 12px 26px;
  border-radius: var(--ozpam-radius);
}
.ozpam-hero .btn:hover {
  background: var(--ozpam-red-dark);
  border-color: var(--ozpam-red-dark);
}

/* ==========================================================================
   ARAÇ SEÇİCİ — Marka / Model / Ürün Grubu (stepbystep modülü)
   Layout: SOL = MARKADAN kutusu (beyaz, video üzerine biner)
           SAĞ = "Aracınıza uygun yedek parçayı bulun" (transparan)
           ALT = 3 select dropdown
   ========================================================================== */
.ozpam-vehicle {
  position: relative;
  z-index: 5;
  padding-top: 0;
}

.ozpam-vehicle .vehicle-card {
  /* Eski white card görünümünü kaldır - artık tek wrapper kart yok */
  background: transparent !important;
  box-shadow: none !important;
  border-top: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;

  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "marka baslik"
    "form  form";
  column-gap: 28px;
  row-gap: 8px;
  align-items: end;
}

/* Modülün enjekte ettiği <link> ve <style> tag'lerini grid item olmaktan çıkar */
.ozpam-vehicle .vehicle-card > style,
.ozpam-vehicle .vehicle-card > link { display: none; }

/* SAĞ — başlık (transparan) */
.ozpam-vehicle .vehicle-card > h3 {
  grid-area: baslik;
  margin: 0;
  background: transparent !important;
  color: var(--ozpam-black);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 800;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
}
.ozpam-vehicle .vehicle-card > h3::before {
  content: "";
  display: inline-block;
  width: 28px; height: 28px;
  flex-shrink: 0;
  background: var(--ozpam-red);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M5 11l1.5-4.5C6.7 5.6 7.5 5 8.4 5h7.2c.9 0 1.7.6 1.9 1.5L19 11h1a1 1 0 011 1v3a1 1 0 01-1 1h-1v2a1 1 0 01-1 1h-1a1 1 0 01-1-1v-2H8v2a1 1 0 01-1 1H6a1 1 0 01-1-1v-2H4a1 1 0 01-1-1v-3a1 1 0 011-1h1zm2.2 0h9.6l-1-3H8.2l-1 3zM7 14a1 1 0 100-2 1 1 0 000 2zm10 0a1 1 0 100-2 1 1 0 000 2z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M5 11l1.5-4.5C6.7 5.6 7.5 5 8.4 5h7.2c.9 0 1.7.6 1.9 1.5L19 11h1a1 1 0 011 1v3a1 1 0 01-1 1h-1v2a1 1 0 01-1 1h-1a1 1 0 01-1-1v-2H8v2a1 1 0 01-1 1H6a1 1 0 01-1-1v-2H4a1 1 0 01-1-1v-3a1 1 0 011-1h1zm2.2 0h9.6l-1-3H8.2l-1 3zM7 14a1 1 0 100-2 1 1 0 000 2zm10 0a1 1 0 100-2 1 1 0 000 2z'/></svg>") no-repeat center / contain;
}

/* SOL — MARKADAN kutusu (modülün rendered ettiği col-lg-12 wrapper'ı) */
.ozpam-vehicle .vehicle-card > .col-lg-12 {
  grid-area: marka;
  padding: 0 !important;
  position: relative !important;
  top: -64px !important;        /* video üzerine bin (modülün inline -40 değerini ezer) */
  margin-bottom: -56px;          /* lift'i kompanse et, alttaki form yukarı kaymasın */
  z-index: 6;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* MARKADAN'ın iç kutusu — beyaz arka plan + soft shadow */
.ozpam-vehicle .vehicle-card > .col-lg-12 > .col-lg-4 {
  background: #fff !important;       /* #f5f5f5'i ez */
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 14px 18px !important;
  box-shadow: 0 10px 30px rgba(17, 20, 24, .14) !important;
  border-radius: var(--ozpam-radius);
  border-left: 3px solid var(--ozpam-red);
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ozpam-black) !important;
}

/* Modülün animasyonlu küçük kırmızı üçgenini büyüt + hizala */
.ozpam-vehicle .belirgin-ucgen-ok {
  margin: 0 4px 0 0 !important;
  border-left-width: 8px !important;
  border-right-width: 8px !important;
  border-top-width: 12px !important;
  border-top-color: var(--ozpam-red) !important;
}

/* Form / sbsblock — alt sırayı kapla */
.ozpam-vehicle .vehicle-card > .sbsblock {
  grid-area: form;
}
/* --- stepbystep modülü override'ları (.sbsblock + select2) --- */
.ozpam-vehicle .sbsblock {
  /* Modülün inline style'ını ez */
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  position: static !important;
  border: 0 !important;
}
.ozpam-vehicle .sbsblock > h4 { display: none; }   /* modülün kendi başlığı; bizim h3 var */
.ozpam-vehicle .sbsblock .block_content { padding: 0; }

.ozpam-vehicle .sbs_row_flex {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.ozpam-vehicle .sbs_selectbox {
  padding: 0 !important;
  max-width: 100% !important;
  flex: none !important;
  width: 100%;
}
.ozpam-vehicle .sbs_div { width: 100%; }

/* Select2 single trigger */
.ozpam-vehicle .select2-container { width: 100% !important; }
.ozpam-vehicle .select2-container--default .select2-selection--single {
  height: 46px !important;
  border: 1px solid var(--ozpam-line) !important;
  border-radius: var(--ozpam-radius) !important;
  background: #fff !important;
  transition: border-color .15s, box-shadow .15s;
}
.ozpam-vehicle .select2-container--default .select2-selection--single:hover {
  border-color: var(--ozpam-red);
}
.ozpam-vehicle .select2-container--default.select2-container--open .select2-selection--single,
.ozpam-vehicle .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--ozpam-red) !important;
  box-shadow: 0 0 0 3px var(--ozpam-red-soft) !important;
}
.ozpam-vehicle .select2-container--default .select2-selection__rendered {
  line-height: 44px !important;
  padding: 0 32px 0 14px !important;
  font-size: 15px;
  font-weight: 600;
  color: var(--ozpam-text) !important;
}
.ozpam-vehicle .select2-container--default .select2-selection__arrow {
  height: 44px !important;
  right: 8px !important;
}
.ozpam-vehicle .select2-container--default .select2-selection__arrow b {
  border-color: var(--ozpam-red) transparent transparent transparent !important;
  border-width: 6px 5px 0 5px !important;
}
.ozpam-vehicle .select2-container--default.select2-container--open .select2-selection__arrow b {
  border-color: transparent transparent var(--ozpam-red) transparent !important;
  border-width: 0 5px 6px 5px !important;
}
.ozpam-vehicle .select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: #f3f4f6 !important;
  cursor: not-allowed;
}
.ozpam-vehicle .select2-container--default.select2-container--disabled .select2-selection__rendered {
  color: #9ca3af !important;
}
.ozpam-vehicle .select2-container--default .select2-selection__clear {
  color: var(--ozpam-muted);
  margin-right: 8px;
  font-size: 18px;
  font-weight: 400;
}

/* Select2 dropdown panel */
.select2-dropdown {
  border-color: var(--ozpam-line) !important;
  border-radius: var(--ozpam-radius) !important;
  box-shadow: var(--ozpam-shadow);
  overflow: hidden;
}
.select2-results__option {
  padding: 10px 14px !important;
  font-size: 14px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background-color: var(--ozpam-red) !important;
  color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--ozpam-red-soft) !important;
  color: var(--ozpam-red);
  font-weight: 700;
}
.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--ozpam-line) !important;
  border-radius: var(--ozpam-radius) !important;
  padding: 8px 12px !important;
}
.select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: var(--ozpam-red) !important;
}

/* Loader küçük göstergesi */
.ozpam-vehicle .sbs_loader {
  display: none !important;   /* küçük loader'ı gizle, dropdown zaten yüklenirken disabled görünüyor */
}

/* Araç seçici — tablet ve mobil için stack düzeni */
@media (max-width: 991px) {
  .ozpam-vehicle .vehicle-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "marka"
      "baslik"
      "form";
    column-gap: 0;
    row-gap: 14px;
  }
  .ozpam-vehicle .vehicle-card > .col-lg-12 {
    top: -36px !important;
    margin-bottom: -28px;
  }
  .ozpam-vehicle .vehicle-card > h3 { padding-bottom: 4px; }
  .ozpam-vehicle .sbs_row_flex { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
  .ozpam-vehicle .vehicle-card > .col-lg-12 {
    top: -20px !important;
    margin-bottom: -16px;
  }
  .ozpam-vehicle .vehicle-card > .col-lg-12 > .col-lg-4 {
    font-size: 13px;
    padding: 12px 14px !important;
  }
  .ozpam-vehicle .sbs_row_flex { grid-template-columns: 1fr; gap: 10px; }
  .ozpam-vehicle .select2-container--default .select2-selection--single { height: 44px !important; }
  .ozpam-vehicle .select2-container--default .select2-selection__rendered { line-height: 42px !important; font-size: 14px; }
}

/* ==========================================================================
   KATEGORİ KARTLARI
   ========================================================================== */
.ozpam-categories .cat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.ozpam-categories .cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #fff;
  border: 1px solid var(--ozpam-line);
  border-radius: var(--ozpam-radius);
  padding: 24px 14px;
  text-decoration: none;
  color: var(--ozpam-black);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}
.ozpam-categories .cat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--ozpam-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.ozpam-categories .cat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ozpam-shadow);
  border-color: transparent;
  color: var(--ozpam-red);
}
.ozpam-categories .cat-card:hover::before { transform: scaleX(1); }

.ozpam-categories .cat-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--ozpam-red-soft);
  color: var(--ozpam-red);
  border-radius: 50%;
  margin-bottom: 12px;
  transition: background .2s, color .2s;
}
.ozpam-categories .cat-card:hover .cat-icon {
  background: var(--ozpam-red);
  color: #fff;
}
.ozpam-categories .cat-icon svg { width: 28px; height: 28px; }
.ozpam-categories .cat-name {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  color: inherit;
}
.ozpam-categories .cat-meta {
  font-size: 12px;
  color: var(--ozpam-muted);
  margin-top: 4px;
}

@media (max-width: 1199px) { .ozpam-categories .cat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px)  { .ozpam-categories .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (max-width: 480px)  { .ozpam-categories .cat-grid { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   ÖNE ÇIKAN ÜRÜNLER — an_homeproducts'ın üzerine boyama
   ========================================================================== */
.ozpam-products .nav-tabs {
  border: none;
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.ozpam-products .nav-tabs > li > a,
.ozpam-products .nav-tabs .nav-link {
  border: 1px solid var(--ozpam-line);
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ozpam-text);
  background: #fff;
  text-transform: uppercase;
  letter-spacing: .03em;
  transition: all .15s;
}
.ozpam-products .nav-tabs > li.active > a,
.ozpam-products .nav-tabs .nav-link.active,
.ozpam-products .nav-tabs > li > a:hover {
  background: var(--ozpam-red);
  border-color: var(--ozpam-red);
  color: #fff;
}

/* ürün kartı — tema'nın .product-miniature'ına ek vurgu */
.ozpam-products .product-miniature .product-title a:hover { color: var(--ozpam-red); }
.ozpam-products .product-miniature .price { color: var(--ozpam-red); font-weight: 800; }
.ozpam-products .product-miniature .regular-price { color: var(--ozpam-muted); }
.ozpam-products .product-flag.discount,
.ozpam-products .product-flag.on-sale {
  background: var(--ozpam-red);
  color: #fff;
  font-weight: 800;
  letter-spacing: .04em;
}
.ozpam-products .product-miniature .add-to-cart,
.ozpam-products .product-miniature .btn-product { background: var(--ozpam-black); border-color: var(--ozpam-black); color: #fff; }
.ozpam-products .product-miniature .add-to-cart:hover { background: var(--ozpam-red); border-color: var(--ozpam-red); }

/* ==========================================================================
   GÜVEN ROZETLERİ ŞERİDİ — blockreassurance üzerine
   ========================================================================== */
.ozpam-reassurance { background: var(--ozpam-bg); }
.ozpam-reassurance .block-reassurance { border: 0; box-shadow: none; padding: 0; margin: 0; }
.ozpam-reassurance .block-reassurance ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0; margin: 0; list-style: none; }
.ozpam-reassurance .block-reassurance li { background: #fff; border: 1px solid var(--ozpam-line); border-radius: var(--ozpam-radius); padding: 18px; }
.ozpam-reassurance .block-reassurance img { filter: invert(15%) sepia(90%) saturate(7000%) hue-rotate(-3deg); width: 36px; height: 36px; }
.ozpam-reassurance .block-reassurance h3 { color: var(--ozpam-black); font-weight: 800; }

@media (max-width: 991px) {
  .ozpam-reassurance .block-reassurance ul { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Util
   ========================================================================== */
.ozpam-container { max-width: 1280px; margin: 0 auto; padding: 0 16px; }

/* ==========================================================================
   GLOBAL RESPONSIVE — tablet & mobil
   Breakpoint mantığı:
     ≤1199 : laptop/küçük desktop
     ≤991  : tablet (portrait + altı)
     ≤767  : büyük telefon / küçük tablet
     ≤575  : telefon
   ========================================================================== */

/* --- Tablet landscape ve küçük desktop --- */
@media (max-width: 1199px) {
  .ozpam-section { padding: 48px 0; }
  .ozpam-section.ozpam-section--tight { padding: 28px 0; }
}

/* --- Tablet portrait ve altı --- */
@media (max-width: 991px) {
  .ozpam-section { padding: 40px 0; }
  .ozpam-section.ozpam-section--tight { padding: 24px 0; }

  .ozpam-section-head {
    margin-bottom: 22px;
    align-items: flex-start;
  }
  .ozpam-section-head .all-link { font-size: 14px; }

  /* Hero — slider yüksekliği + caption ölçek */
  .ozpam-hero .ah-caption,
  .ozpam-hero .slide-content { padding: 0 16px; }
  .ozpam-hero .btn,
  .ozpam-hero .ah-caption .btn {
    padding: 10px 20px;
    font-size: 13px;
  }

  /* Ürün sekmeleri — yatayda sıkışmasın, gerekirse kaydırılabilir */
  .ozpam-products .nav-tabs {
    gap: 6px;
    margin-bottom: 14px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .ozpam-products .nav-tabs::-webkit-scrollbar { display: none; }
  .ozpam-products .nav-tabs > li,
  .ozpam-products .nav-tabs .nav-item { flex: 0 0 auto; }
  .ozpam-products .nav-tabs > li > a,
  .ozpam-products .nav-tabs .nav-link {
    padding: 7px 14px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* Reassurance zaten 2 kolona düşüyor (yukarıda); ek dokunuşlar */
  .ozpam-reassurance .block-reassurance li { padding: 14px; }
  .ozpam-reassurance .block-reassurance h3 { font-size: 14px; }
}

/* --- Büyük telefon / dar tablet --- */
@media (max-width: 767px) {
  .ozpam-section { padding: 32px 0; }
  .ozpam-section.ozpam-section--tight { padding: 20px 0; }

  .ozpam-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 18px;
  }
  .ozpam-section-head p { font-size: 13.5px; }

  /* Kategori kartları — daha kompakt */
  .ozpam-categories .cat-card { padding: 18px 10px; }
  .ozpam-categories .cat-icon { width: 48px; height: 48px; margin-bottom: 8px; }
  .ozpam-categories .cat-icon svg { width: 24px; height: 24px; }
  .ozpam-categories .cat-name { font-size: 13px; }
  .ozpam-categories .cat-meta { font-size: 11px; }
}

/* --- Telefon --- */
@media (max-width: 575px) {
  .ozpam-section { padding: 28px 0; }

  /* Hero butonu mobilde tam genişliğe yakın görünmesi için */
  .ozpam-hero .btn,
  .ozpam-hero .ah-caption .btn {
    padding: 10px 16px;
    font-size: 12px;
    letter-spacing: .03em;
  }

  /* Reassurance — telefonda tek kolon */
  .ozpam-reassurance .block-reassurance ul { grid-template-columns: 1fr; gap: 10px; }
  .ozpam-reassurance .block-reassurance li { padding: 12px 14px; }
  .ozpam-reassurance .block-reassurance img { width: 28px; height: 28px; }

  /* Ürün kartları — tema kendi grid'ini kullanıyor; başlık/fiyat boyutları */
  .ozpam-products .product-miniature .product-title { font-size: 13px; }
  .ozpam-products .product-miniature .price { font-size: 15px; }

  /* Kategori başlığı simgesi — h3 ikonu küçült */
  .ozpam-vehicle .vehicle-card > h3::before { width: 22px; height: 22px; }

  /* Section başlık fontu zaten clamp ile küçülüyor; meta küçült */
  .ozpam-section-head .all-link { font-size: 13px; }
}

/* --- iPad portrait özel: kategori grid 3'e düş --- */
@media (min-width: 768px) and (max-width: 991px) {
  .ozpam-categories .cat-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}