/* =====================================================================
   TEMA MOTORU V2 — ORTAK DAVRANIŞ KATMANI
   hardware (hw-), autoparts (ap-), watch (wt-), bilama (bl-) temalarının
   kendi tasarımına dokunmadan: çok slaytlı hero, mobil header, görselsiz
   banner yedekleri, footer ödeme logoları ve mega menü entegrasyonu.
   Renkler temanın değişkenlerinden (--theme-*) gelir.
   ===================================================================== */

/* ---------- hero slaytları ---------- */
.tv2-hero .st-slayt { position: absolute; inset: 0; }
.tv2-hero .st-slayt::after { content: none !important; }
.tv2-hero .tv2-bg-m { display: none; }
.tv2-hero .tv2-btnlar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tv2-hero .tv2-btnlar > a { margin-top: 0; }
.tv2-hero .tv2-btnlar { margin-top: 26px; }
.tv2-hero .tv2-btn2 { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 4px; color: inherit; text-decoration: none; font-size: 13px; font-weight: 600; }
.tv2-hero .tv2-h2 { margin: 0; }
.tv2-hero .st-vurgu { color: var(--theme-accent); }
.tv2-dots { position: absolute; z-index: 6; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 7px; }
.tv2-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .42); cursor: pointer; transition: width .25s, background-color .25s; }
.tv2-dots button.aktif { width: 22px; background: #fff; }
/* Bilama: perde slaytın içinde (metin üstte kalsın) */
.tv2-hero.bl-hero::after { content: none; }
.bl-hero .bl-hero-perde { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(44, 24, 9, .96) 0%, rgba(44, 24, 9, .9) 25%, rgba(44, 24, 9, .55) 47%, rgba(44, 24, 9, .1) 71%, rgba(44, 24, 9, .1) 100%); }
.bl-hero .tv2-baslik { font-family: var(--bl-serif); font-size: clamp(44px, 5.2vw, 78px); font-weight: 650; line-height: .93; letter-spacing: -.03em; margin: 18px 0 19px; max-width: 590px; text-transform: uppercase; }
.bl-hero-badges i { color: var(--theme-accent); }
.bl-hero-badges i svg { width: 17px; height: 17px; }

@media (max-width: 767px) {
  .tv2-hero .tv2-m .tv2-bg-d { display: none; }
  .tv2-hero .tv2-m .tv2-bg-m { display: block; }
  .bl-hero .tv2-baslik { font-size: 40px; margin: 12px 0; }
}

/* ---------- menü: mega menü düğmesi temanın "Tüm Kategoriler" görünümünü alır ---------- */
.tv2-nav .tv2-mega { position: relative; display: flex; align-items: stretch; }
.tv2-nav .tv2-mega .st-mega-btn { height: 100%; border-radius: 0; margin: 0; white-space: nowrap; }
.tv2-nav .st-mega-panel { top: 100%; z-index: 80; }
.tv2-nav [class$="-nav-links"] a[aria-current] { color: var(--theme-accent); }

/* ---------- mobil header: logo + ikonlar üstte, arama kutusu tam genişlik ---------- */
@media (max-width: 1023px) {
  .tv2-header { height: auto !important; }
  .tv2-head { grid-template-columns: auto minmax(0, 1fr) auto !important; grid-template-areas: "ham logo ikon" "ara ara ara"; row-gap: 8px !important; padding-block: 8px 10px; height: auto !important; }
  .tv2-head .tv2-hamb { grid-area: ham; display: block !important; }
  .tv2-head .tv2-logo { grid-area: logo; min-width: 0; }
  .tv2-head .tv2-logo img { max-height: 40px; width: auto; }
  .tv2-head .tv2-search { grid-area: ara; display: block !important; width: 100%; }
  .tv2-head .tv2-ikonlar { grid-area: ikon; display: flex; justify-content: flex-end; }
  .tv2-head .tv2-ikonlar .st-ikonlar { gap: 12px; }
  .tv2-head [class$="-mobile-search"] { display: none !important; }
  .tv2-head #hdrSearch { max-width: none; margin: 0; height: 42px; }
}

/* ---------- görselsiz bannerlar (kategoriden üretilen ya da görseli yüklenmemiş) ---------- */
:is(.hw-promo, .ap-promo, .wt-promo, .hw-bottom-card, .ap-bottom-card, .wt-bottom-card).tv2-gorselsiz { background-color: var(--theme-primary); }
:is(.hw-promo, .ap-promo, .wt-promo, .hw-bottom-card, .ap-bottom-card, .wt-bottom-card) { position: relative; }
:is(.hw-promo, .ap-promo, .wt-promo, .hw-bottom-card, .ap-bottom-card, .wt-bottom-card) > div,
:is(.hw-bottom-card, .ap-bottom-card, .wt-bottom-card) > :is(h3, p, span):not(.tv2-urun):not(.tv2-ikon) { position: relative; z-index: 2; }
.tv2-urun { position: absolute; right: 4%; top: 8%; bottom: 8%; width: 40%; display: grid; place-items: center; z-index: 1; }
.tv2-urun img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .25)); }
.tv2-ikon, :is(.hw-promo, .ap-promo, .wt-promo, .hw-bottom-card, .ap-bottom-card, .wt-bottom-card) > .tv2-ikon { position: absolute !important; right: 7%; left: auto !important; top: 50%; bottom: auto !important; transform: translateY(-50%); z-index: 1; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--theme-accent); opacity: .55; }
.bl-promo-card.tv2-gorselsiz, .bl-feature.tv2-gorselsiz { background: var(--bl-cream-2, #f5ead7); }
.bl-promo-card .tv2-urun img, .bl-feature .tv2-urun img { width: auto; height: auto; mix-blend-mode: multiply; filter: none; }

/* ---------- blog / hikâye: görselsiz kart ---------- */
:is(.hw-home-guide, .ap-home-guide, .wt-home-guide).tv2-gorselsiz { grid-template-columns: 1fr; min-height: 0; }
:is(.hw-home-guide, .ap-home-guide, .wt-home-guide).tv2-gorselsiz > div { display: flex; flex-direction: column; justify-content: center; }
.tv2-oku { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; opacity: .75; }
.bl-guide-card.tv2-gorselsiz { grid-template-columns: 1fr; }
.bl-story.tv2-gorselsiz { grid-template-columns: 1fr; }
.bl-cats .tv2-harf { width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 9px; background: #f5ede0; color: var(--theme-accent); font-family: var(--bl-serif, serif); font-size: 30px; }
.bl-tabs button { border: 0; background: none; padding: 0 0 7px; font: inherit; color: inherit; cursor: pointer; }
.bl-tabs button.aktif { color: var(--theme-accent); border-bottom: 2px solid var(--theme-accent); }
.bl-card-action { padding: 0 14px 14px; }
.bl-card-action .st-kart-btn { width: 100%; }

/* ---------- bülten ---------- */
.tv2-bulten-ok { margin: 0; font-weight: 600; }

/* footer logosu: ana logo koyu zeminde beyaza çevrilir ya da plaka üzerinde durur */
img.st-f-logo--ters { filter: brightness(0) invert(1); opacity: .92; }
img.st-f-logo--plaka { box-sizing: content-box; background: #fff; padding: 6px 10px; border-radius: 8px; }

/* ---------- footer: sosyal, yasal bağlantılar, ödeme logoları, künye ---------- */
.tv2-sosyal { display: flex; gap: 8px; margin-top: 16px; }
.tv2-sosyal a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: inherit; }
.tv2-alt { flex-wrap: wrap; gap: 10px 20px; }
.tv2-yasal { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.tv2-yasal a { color: inherit; text-decoration: none; }
.tv2-yasal a:hover { text-decoration: underline; }
.tv2-odeme { display: inline-flex !important; align-items: center; gap: 8px; background: #fff; border-radius: 6px; padding: 5px 10px; }
.tv2-odeme img { height: 18px; width: auto; display: block; }
.tv2-kunye { text-align: center; padding: 10px 16px 16px; font-size: 12px; opacity: .85; }
.tv2-kunye a { color: inherit; }
@media (max-width: 767px) {
  .tv2-alt { flex-direction: column; align-items: flex-start !important; }
  .tv2-alt > span:last-child, .tv2-alt .tv2-odeme { display: inline-flex !important; }
}

/* Mobil/tablette kurumsal ve iletişim sütunları gizlenmez (adres, telefon, yasal sayfalar) */
@media (max-width: 1023px) {
  .tv2-footer :is(.hw-footer-col, .ap-footer-col, .wt-footer-col):is(:nth-child(4), :nth-child(5)) { display: flex; }
  .tv2-footer .bl-footer-col:is(:nth-child(4), :nth-child(5)) { display: block; }
}

/* Araç seçici: gerçek modda tek marka listesi (model/motor arac.php'de seçilir) */
.ap-fitment-wide form.tv2-arac-tek { grid-template-columns: minmax(0, 1fr) 180px; }
@media (max-width: 767px) { .ap-fitment-wide form.tv2-arac-tek { grid-template-columns: 1fr; } }

/* sekme panelleri: temanın display kuralı [hidden]'ı ezmesin */
[data-st-sekme-panel][hidden] { display: none !important; }
/* footer içindeki bülten şeridi kendi (açık) zemininde koyu yazıyla */
.tv2-footer .bl-newsletter { color: var(--theme-text, #2f2114); }
.tv2-footer .bl-newsletter h3 { color: inherit; }
.bl-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.bl-price-row .bl-old { margin: 0; }
.bl-story.bl-shell { margin-left: auto !important; margin-right: auto !important; }

/* Banner açıklaması boş bırakılınca düğme başlığın hemen dibine yapışıyordu
   (boşluğu yalnız <p> veriyordu). Düğme başlıktan sonra gelirse kendi boşluğunu alır. */
:is(.hw-bottom-card, .ap-bottom-card, .wt-bottom-card) > div > span { display: inline-block; }
:is(.hw-bottom-card, .ap-bottom-card, .wt-bottom-card, .hw-promo, .ap-promo, .wt-promo) > div > :is(h2, h3) + span { margin-top: 16px; }

/* ===== UZUN İÇERİK DAYANIKLILIĞI (V2 temaları) =====
   Panelden uzun kategori adı, slayt başlığı ya da banner metni girilince:
   menü bağlantıları birbirinin üstüne biniyor, hero başlığı üstten kesiliyor,
   sabit yükseklikli banner kartlarında başlık ve metin kartın dışına taşıyordu. */
.tv2-nav :is(.hw-nav-links, .ap-nav-links, .wt-nav-links, .bl-nav-links) { align-self: center; flex-wrap: wrap; align-content: flex-start; height: 24px; row-gap: 40px; overflow: hidden; }
.tv2-nav :is(.hw-nav-links, .ap-nav-links, .wt-nav-links, .bl-nav-links) > a { flex: 0 0 auto; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 24px; }
.tv2-hero :is(.hw-hero-copy, .ap-hero-copy, .wt-hero-copy, .bl-hero-copy) :is(h1, h2, .tv2-h2, .tv2-baslik) { padding-bottom: .12em; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tv2-hero :is(.hw-hero-copy, .ap-hero-copy, .wt-hero-copy, .bl-hero-copy) p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tv2-hero :is(.hw-hero-copy, .ap-hero-copy, .wt-hero-copy, .bl-hero-copy) > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv2-home :is(.hw-promo, .ap-promo, .wt-promo, .bl-promo-card, .hw-bottom-card, .ap-bottom-card, .wt-bottom-card, .bl-feature) > div > :is(h2, h3) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tv2-home :is(.hw-promo, .ap-promo, .wt-promo, .bl-promo-card, .hw-bottom-card, .ap-bottom-card, .wt-bottom-card, .bl-feature) > div > p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tv2-home :is(.hw-promo, .ap-promo, .wt-promo, .bl-promo-card, .hw-bottom-card, .ap-bottom-card, .wt-bottom-card, .bl-feature) > div > :is(b, small, span:first-child:not(:last-child)) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Uzun marka adları komşusunun üstüne biniyordu */
:is(.hw-brand-logo, .ap-brand-logo, .wt-brand-logo) { min-width: 0; }
:is(.hw-brand-logo, .ap-brand-logo, .wt-brand-logo) span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Uzun hero metni: başlık ve metin küçülür, en fazla 3 / 2 satır */
.tv2-hero .tv2-uzun :is(h1, h2, .tv2-h2, .tv2-baslik) { font-size: clamp(28px, 3.4vw, 50px) !important; line-height: 1.08 !important; -webkit-line-clamp: 3; }
.tv2-hero .tv2-uzun p:not(.tv2-h2):not(.tv2-baslik) { font-size: 14.5px; -webkit-line-clamp: 2; }
.tv2-hero .tv2-uzun > span { margin-bottom: 10px; }
/* Rehber kartı: özet kısaltılmıyordu, kartlar 8 satır uzuyordu */
:is(.hw-home-guide, .ap-home-guide, .wt-home-guide, .bl-home-guide) h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: .1em; }
:is(.hw-home-guide, .ap-home-guide, .wt-home-guide, .bl-home-guide) p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }