/* ==========================================================================
   JPF — Araca göre jant arama / sportif tema
   ========================================================================== */
.jpf-wrap{
  --jpf-red:#e20100;
  --jpf-red-hot:#ff2a1c;
  --jpf-surface:#15161b;
  --jpf-surface-hi:#1d1f26;
  --jpf-line:#2b2d35;
  --jpf-text:#f4f4f6;
  --jpf-muted:#8a8c95;
  --jpf-h:52px;
  width:100%; max-width:100%; box-sizing:border-box; color:var(--jpf-text);
  font-family:inherit;
}
.jpf-wrap *,.jpf-wrap *::before,.jpf-wrap *::after{ box-sizing:border-box; }

/* --- sekmeler --- */
.jpf-tabs{ display:flex; gap:28px; margin:0 0 22px; border-bottom:1px solid var(--jpf-line); }
.jpf-tab{
  position:relative; padding:0 0 12px; margin:0; background:none; border:0; border-radius:0;
  color:var(--jpf-muted); font:inherit; font-size:13px; font-weight:800; line-height:1.2;
  letter-spacing:.09em; text-transform:uppercase; cursor:pointer; transition:color .18s ease;
}
.jpf-tab::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--jpf-red);
  transform:scaleX(0); transform-origin:left center; transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.jpf-tab:hover{ color:#d6d7dc; }
.jpf-tab.is-active{ color:#fff; }
.jpf-tab.is-active::after{ transform:scaleX(1); }
.jpf-tab:focus-visible{ outline:2px solid var(--jpf-red); outline-offset:4px; }

/* --- paneller --- */
.jpf-panel[hidden]{ display:none; }
.jpf-selects{ display:flex; flex-direction:column; gap:10px; }

/* --- select --- */
.jpf-select{
  -webkit-appearance:none; appearance:none; width:100%; height:var(--jpf-h);
  padding:0 44px 0 18px; background-color:var(--jpf-surface);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e20100' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
  border:1px solid var(--jpf-line); border-radius:2px; box-shadow:inset 3px 0 0 var(--jpf-red);
  color:var(--jpf-text); font:inherit; font-size:14px; font-weight:700; letter-spacing:.02em;
  line-height:var(--jpf-h); cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.jpf-select:hover:not(:disabled){ background-color:var(--jpf-surface-hi); border-color:#3a3d46; }
.jpf-select:focus-visible{ outline:none; border-color:var(--jpf-red);
  box-shadow:inset 3px 0 0 var(--jpf-red), 0 0 0 3px rgba(226,1,0,.22); }
.jpf-select:disabled{ background-color:#101116; border-color:#1e2026;
  box-shadow:inset 3px 0 0 #2b2d35; color:#5a5c66; cursor:not-allowed; }
.jpf-select option{ background:#15161b; color:var(--jpf-text); }

/* --- ARA butonu --- */
.jpf-btn{
  position:relative; overflow:hidden; width:100%; height:56px; margin-top:6px; padding:0 22px;
  background:var(--jpf-red); border:0; border-radius:2px;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  color:#fff; font:inherit; font-size:14px; font-weight:900; letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer; transition:background-color .18s ease, transform .12s ease;
}
.jpf-btn::before{
  content:""; position:absolute; inset:0 auto 0 -60%; width:55%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-18deg); transition:left .45s cubic-bezier(.2,.7,.3,1);
}
.jpf-btn:hover{ background:var(--jpf-red-hot); }
.jpf-btn:hover::before{ left:110%; }
.jpf-btn:active{ transform:translateY(1px); }
.jpf-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* ==========================================================================
   Sonuç sayfası: araç başlığı (sol resim + sağ bilgi) + altta ürünler
   ========================================================================== */
.jpf-hero{
  display:flex; gap:22px; align-items:center; flex-wrap:wrap;
  margin:0 0 26px; padding:22px; background:var(--jpf-surface,#15161b);
  border:1px solid var(--jpf-line,#2b2d35); border-left:4px solid var(--jpf-red,#e20100); border-radius:4px;
}
.jpf-hero__img{ flex:0 0 240px; max-width:240px; }
.jpf-hero__img img{ width:100%; height:auto; display:block; border-radius:4px; }
.jpf-hero__body{ flex:1 1 300px; min-width:260px; }
.jpf-hero__title{ margin:0 0 4px; font-size:22px; font-weight:900; color:#fff; line-height:1.15; text-transform:uppercase; }
.jpf-hero__sub{ margin:0 0 14px; font-size:13px; color:#9a9ca5; }
.jpf-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.jpf-chip{ background:#22242c; border:1px solid #33353f; color:#d7d8de; padding:7px 12px; border-radius:20px; font-size:13px; }
.jpf-chip b{ color:var(--jpf-red,#e20100); }

.jpf-section{ margin-top:26px; }
.jpf-section-head{ margin:0 0 14px; padding-bottom:10px; border-bottom:2px solid var(--jpf-red,#e20100); }
.jpf-section-head h3{ margin:0; font-size:19px; font-weight:800; text-transform:uppercase; }
.jpf-section-head h3 span{ color:var(--jpf-red,#e20100); }
.jpf-section-head p{ margin:4px 0 0; font-size:13px; color:#888; }
.jpf-count{ font-size:14px; color:#777; margin-bottom:14px; }

.jpf-empty{ padding:40px 24px; text-align:center; color:#888; }
.jpf-empty-ico{ font-size:34px; display:block; margin-bottom:10px; opacity:.6; }
.jpf-empty p{ margin:0 0 14px; font-size:15px; }
.jpf-empty-link{ display:inline-block; background:var(--jpf-red,#e20100); color:#fff; text-decoration:none;
  padding:11px 22px; border-radius:2px; font-weight:800; letter-spacing:.05em; font-size:14px; text-transform:uppercase; }

/* --- responsive --- */
@media (max-width:480px){
  .jpf-wrap{ --jpf-h:50px; }
  .jpf-tabs{ gap:20px; }
  .jpf-tab{ font-size:12px; }
  .jpf-hero__img{ flex-basis:100%; max-width:100%; }
}
@media (prefers-reduced-motion:reduce){ .jpf-wrap *{ transition:none !important; } }

/* --- sonuç filtre çubuğu --- */
.jpf-filterbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 20px; padding:14px 16px;
  background:var(--jpf-surface,#15161b); border:1px solid var(--jpf-line,#2b2d35); border-radius:4px; }
.jpf-filterbar__label{ color:#9a9ca5; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.jpf-fsel{ -webkit-appearance:none; appearance:none; height:40px; padding:0 34px 0 12px;
  background-color:#0f1015;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e20100' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
  border:1px solid var(--jpf-line,#2b2d35); border-radius:2px; color:#f4f4f6; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.jpf-fsel:hover{ border-color:#3a3d46; }
.jpf-fsel option{ background:#15161b; }
.jpf-fclear{ color:#e20100; text-decoration:none; font-size:13px; font-weight:700; margin-left:auto; }

/* sonuç sayfasında arama formunu dar kutuda tut */
.jpf-results-page .jpf-form{ display:none; }
/* filtre select'leri yan yana (tema select{width:100%} override) */
.jpf-filterbar .jpf-fsel{ width:auto; min-width:130px; flex:0 0 auto; }

/* dropdown açılır liste okunabilirliği (koyu zemin + açık yazı) */
.jpf-wrap select option,
.jpf-filterbar select option{ background-color:#1d1f26 !important; color:#f4f4f6 !important; }
.jpf-wrap select option:checked,
.jpf-filterbar select option:checked{ background-color:#e20100 !important; color:#fff !important; }
.jpf-wrap select option:disabled{ color:#6b6d76 !important; }

/* ==========================================================================
   Özel dropdown (native select yerine — tutarlı görünüm + özel scrollbar)
   ========================================================================== */
.jpf-native{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }
.jpf-dd{ position:relative; width:100%; }
.jpf-dd--sm{ width:auto; min-width:140px; }
.jpf-dd__btn{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; height:var(--jpf-h,52px); padding:0 16px 0 18px;
  background:var(--jpf-surface,#15161b); border:1px solid var(--jpf-line,#2b2d35);
  border-radius:2px; box-shadow:inset 3px 0 0 var(--jpf-red,#e20100);
  color:var(--jpf-text,#f4f4f6); font:inherit; font-size:14px; font-weight:700; letter-spacing:.02em;
  cursor:pointer; text-align:left; transition:border-color .15s, background .15s;
}
.jpf-dd--sm .jpf-dd__btn{ height:40px; font-size:13px; box-shadow:none; padding:0 12px; }
.jpf-dd__btn:hover{ background:var(--jpf-surface-hi,#1d1f26); border-color:#3a3d46; }
.jpf-dd__btn .jpf-dd__val{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jpf-dd__btn.is-placeholder .jpf-dd__val{ color:var(--jpf-muted,#8a8c95); }
.jpf-dd__btn .jpf-dd__arw{ flex:0 0 auto; width:16px; height:16px; transition:transform .18s; }
.jpf-dd__btn svg{ display:block; stroke:var(--jpf-red,#e20100); }
.jpf-dd.is-open .jpf-dd__arw{ transform:rotate(90deg); }
.jpf-dd.is-open .jpf-dd__btn{ border-color:var(--jpf-red,#e20100); box-shadow:inset 3px 0 0 var(--jpf-red,#e20100), 0 0 0 3px rgba(226,1,0,.18); }
.jpf-dd.is-disabled{ opacity:1; }
.jpf-dd.is-disabled .jpf-dd__btn{ background:#101116; border-color:#1e2026; box-shadow:inset 3px 0 0 #2b2d35; color:#5a5c66; cursor:not-allowed; }

.jpf-dd__menu{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60;
  max-height:300px; overflow-y:auto; padding:5px;
  background:#131419; border:1px solid #33353f; border-radius:4px;
  box-shadow:0 18px 40px rgba(0,0,0,.55);
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.jpf-dd.is-open .jpf-dd__menu{ opacity:1; transform:none; pointer-events:auto; }
.jpf-dd__opt{
  padding:11px 14px; border-radius:3px; color:#dfe0e5; font-size:14px; font-weight:600;
  cursor:pointer; line-height:1.25; transition:background .12s, color .12s;
}
.jpf-dd__opt:hover{ background:#242631; color:#fff; }
.jpf-dd__opt.is-sel{ background:var(--jpf-red,#e20100); color:#fff; }
.jpf-dd__opt.is-ph{ color:#8a8c95; }

/* özel scrollbar */
.jpf-dd__menu{ scrollbar-width:thin; scrollbar-color:#3a3d46 #131419; }
.jpf-dd__menu::-webkit-scrollbar{ width:10px; }
.jpf-dd__menu::-webkit-scrollbar-track{ background:transparent; margin:4px 0; }
.jpf-dd__menu::-webkit-scrollbar-thumb{ background:#3a3d46; border-radius:8px; border:2px solid #131419; }
.jpf-dd__menu::-webkit-scrollbar-thumb:hover{ background:var(--jpf-red,#e20100); }

.jpf-filterbar .jpf-dd{ width:auto; }

/* Aracına Göre / Jantlar sayfasında üst-alt boşluğu azalt (120px -> 25px) */
.page-id-5345 #qodef-page-inner{ padding-top:25px; padding-bottom:25px; }

/* ürün alanı: .jpf-wrap açık rengi sızmasın (fiyat/başlık koyu okunur) */
.jpf-woo{ color:#222; }
.jpf-woo .price, .jpf-woo .price .woocommerce-Price-amount{ color:#111 !important; font-weight:700; }
.jpf-woo .woocommerce-loop-product__title, .jpf-woo .qodef-woo-product-title a{ color:#1a1a1a; }

/* sayfalama */
.jpf-pager{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:28px 0 4px; }
.jpf-pager a, .jpf-pager span{ min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 12px; border:1px solid #2b2d35; border-radius:2px; color:#f4f4f6; background:#15161b; text-decoration:none; font-weight:700; font-size:14px; }
.jpf-pager a:hover{ border-color:#e20100; color:#fff; }
.jpf-pager .is-cur{ background:#e20100; border-color:#e20100; color:#fff; }

/* ==========================================================================
   Shop düzeni: sol filtre sidebar + sağ ürün ızgarası (shop-filter-banner tarzı)
   ========================================================================== */
.jpf-shop{ display:flex; gap:32px; align-items:flex-start; color:#2b2b2b; margin-top:6px; }
.jpf-shop__side{ flex:0 0 250px; max-width:250px; }
.jpf-shop__main{ flex:1 1 auto; min-width:0; }
.jpf-fgroup{ border-bottom:1px solid #ececec; padding:16px 0; }
.jpf-fgroup:first-child{ padding-top:0; }
.jpf-fgroup__h{ font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:#151515; margin:0 0 12px; }
.jpf-fscroll{ max-height:230px; overflow:auto; padding-right:4px; }
.jpf-fopt{ display:flex; align-items:center; gap:9px; padding:6px 0; color:#5a5a5a; text-decoration:none; font-size:14px; line-height:1.3; }
.jpf-fopt .tick{ width:16px; height:16px; border:1px solid #c9c9c9; border-radius:3px; flex:0 0 auto; position:relative; }
.jpf-fopt:hover{ color:#e20100; }
.jpf-fopt.is-on{ color:#e20100; font-weight:700; }
.jpf-fopt.is-on .tick{ border-color:#e20100; background:#e20100; }
.jpf-fopt.is-on .tick::after{ content:""; position:absolute; left:4px; top:1px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.jpf-fopt .cnt{ color:#aaa; font-size:12px; }
.jpf-clear-all{ display:inline-block; margin-top:16px; color:#e20100; font-weight:700; font-size:13px; text-decoration:none; }
.jpf-shopbar{ display:flex; justify-content:space-between; align-items:center; padding:0 0 14px; margin-bottom:18px; border-bottom:1px solid #ececec; color:#666; font-size:14px; }
.jpf-fscroll::-webkit-scrollbar{ width:8px; }
.jpf-fscroll::-webkit-scrollbar-thumb{ background:#d0d0d0; border-radius:6px; }
.jpf-fscroll::-webkit-scrollbar-track{ background:#f4f4f4; }
@media(max-width:900px){
  .jpf-shop{ flex-direction:column; }
  .jpf-shop__side{ flex-basis:auto; max-width:100%; }
}

/* OE değerleri paneli */
.jpf-oe{ background:#fff; border:1px solid #e8e8e8; border-radius:6px; padding:18px 20px; margin:0 0 22px; color:#222; }
.jpf-oe__head h3{ margin:0 0 4px; font-size:17px; font-weight:800; text-transform:uppercase; color:#151515; }
.jpf-oe__head p{ margin:0 0 12px; font-size:13px; color:#666; }
.jpf-oe__tbl{ width:100%; border-collapse:collapse; font-size:14px; }
.jpf-oe__tbl th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#999; padding:6px 10px; border-bottom:2px solid #ececec; }
.jpf-oe__tbl td{ padding:9px 10px; border-bottom:1px solid #f2f2f2; color:#333; }
.jpf-oe__stock{ background:#e20100; color:#fff; font-size:11px; font-weight:800; padding:2px 8px; border-radius:20px; }
.jpf-oe__dash{ color:#ccc; }


/* Uyumlu Araçlar sekmesi */
.jpf-compat__note{ font-size:13px; color:#777; margin:0 0 16px; }
.jpf-compat__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px 30px; }
.jpf-compat__make h4{ margin:0 0 8px; font-size:15px; font-weight:800; text-transform:uppercase; color:#151515; border-bottom:2px solid #e20100; padding-bottom:6px; }
.jpf-compat__make ul{ list-style:none; margin:0; padding:0; }
.jpf-compat__make li{ padding:4px 0; font-size:14px; color:#444; border-bottom:1px solid #f2f2f2; }
.jpf-compat__make li span{ color:#999; font-size:12px; }

/* hero görseli artık MARKA LOGOSU — beyaz zemin, ortalı */
.jpf-hero__img{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 200px; max-width:200px; min-height:120px;
  background:#fff; border-radius:4px; padding:18px;
}
.jpf-hero__img img{ width:auto; max-width:100%; max-height:84px; height:auto; display:block; }
/* logo yoksa marka adı */
.jpf-hero__brand{ color:#111; font-size:22px; font-weight:900; letter-spacing:.02em; text-transform:uppercase; text-align:center; }

/* =====================================================================
   Garajım — koyu panel (form bileşenleri koyu temaya göre tasarlandı)
   ===================================================================== */
.jpf-garage{
  max-width:1100px; margin:0 auto; padding:30px;
  background:var(--jpf-surface,#15161b);
  border:1px solid var(--jpf-line,#2b2d35);
  border-left:4px solid var(--jpf-red,#e20100);
  border-radius:4px; color:var(--jpf-text,#f4f4f6);
}

.jpf-garage__head{
  display:flex; align-items:baseline; gap:12px;
  padding-bottom:14px; margin-bottom:22px; border-bottom:1px solid var(--jpf-line,#2b2d35);
}
.jpf-garage__head h3{ margin:0; font-size:22px; font-weight:900; color:#fff; text-transform:uppercase; letter-spacing:.02em; }
.jpf-garage__head span{ font-size:13px; color:var(--jpf-muted,#8a8c95); }

.jpf-garage__empty{ margin:0 0 26px; font-size:14px; color:var(--jpf-muted,#8a8c95); }

.jpf-garage__grid{
  display:grid; gap:14px; margin-bottom:34px;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
}

.jpf-gcard{
  position:relative; display:flex; align-items:center; gap:16px;
  padding:14px 44px 14px 14px;
  background:var(--jpf-surface-hi,#1d1f26); border:1px solid var(--jpf-line,#2b2d35);
  border-radius:4px; transition:border-color .2s;
}
.jpf-gcard:hover{ border-color:var(--jpf-red,#e20100); }

.jpf-gcard__logo{
  flex:0 0 78px; height:62px; box-sizing:border-box; padding:8px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:3px;
}
.jpf-gcard__logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.jpf-gcard__logo .jpf-hero__brand{ font-size:13px; }

.jpf-gcard__body{ min-width:0; }
.jpf-gcard__body h4{
  margin:0 0 4px; font-size:14px; font-weight:800; line-height:1.3; color:#fff; text-transform:uppercase;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.jpf-gcard__body p{ margin:0 0 9px; font-size:12px; color:var(--jpf-muted,#8a8c95); }
.jpf-gcard__go{
  font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--jpf-red,#e20100); text-decoration:none;
}
.jpf-gcard__go:hover{ color:var(--jpf-red-hot,#ff2a1c); }

.jpf-gcard__del{
  position:absolute; top:10px; right:10px;
  width:26px; height:26px; padding:0; line-height:1; font-size:12px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--jpf-line,#2b2d35); border-radius:50%;
  color:var(--jpf-muted,#8a8c95); cursor:pointer; transition:all .2s;
}
.jpf-gcard__del:hover{ background:var(--jpf-red,#e20100); border-color:var(--jpf-red,#e20100); color:#fff; }

.jpf-garage__add h4{
  margin:0 0 14px; font-size:12px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--jpf-muted,#8a8c95);
}
.jpf-garage__msg{ margin:12px 0 0; font-size:13px; }
.jpf-garage__msg.is-ok{ color:#4ade80; }
.jpf-garage__msg.is-err{ color:var(--jpf-red-hot,#ff2a1c); }

.jpf-garage__guest{ text-align:center; padding:34px 20px; }
.jpf-garage__guest h3{ margin:0 0 10px; font-size:20px; font-weight:900; color:#fff; text-transform:uppercase; }
.jpf-garage__guest p{ margin:0 0 22px; font-size:14px; color:var(--jpf-muted,#8a8c95); }
.jpf-btn--inline{ display:inline-flex; width:auto; padding:0 34px; }
.jpf-garage__reglink{ margin-left:14px; font-size:13px; color:var(--jpf-muted,#8a8c95); }
.jpf-garage__reglink:hover{ color:#fff; }

/* --- Sonuç sayfası hero'sundaki garaj butonu --- */
.jpf-hero__slot{ margin-top:14px; }
.jpf-hero__save{
  display:inline-block; padding:9px 20px;
  background:transparent; border:1px solid #3a3c46; border-radius:3px;
  color:#e8e9ee !important; font-size:12px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; cursor:pointer; transition:all .2s;
}
.jpf-hero__save:hover{ background:var(--jpf-red,#e20100); border-color:var(--jpf-red,#e20100); color:#fff !important; }
.jpf-hero__save.is-saved,
.jpf-hero__save.is-saved:hover{
  background:transparent; border-color:#2b2d35; color:#8a8c95 !important; cursor:default;
}
.jpf-hero__save[disabled]{ opacity:.5; cursor:wait; }

@media (max-width:640px){
  .jpf-garage{ padding:20px; }
  .jpf-garage__grid{ grid-template-columns:1fr; }
}

/* Garaj formu geniş alanda yatay dizilsin */
.jpf-garage .jpf-selects{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px; align-items:start;
}

.jpf-gcard__del.is-confirm{
  width:auto; padding:0 10px; border-radius:13px; font-size:11px; font-weight:700; white-space:nowrap;
  background:var(--jpf-red,#e20100); border-color:var(--jpf-red,#e20100); color:#fff;
}

/* =====================================================================
   Marka şeridi / marka sayfası
   ===================================================================== */
.jpf-brands{ color:#1a1a1a; }
.jpf-brands__head{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 24px; }
.jpf-brands__title{
  margin:0; font-size:38px; font-weight:900; line-height:1.05;
  letter-spacing:-.01em; text-transform:uppercase; color:#151515;
}
.jpf-brands__nav{ display:flex; gap:1px; }
.jpf-brands__arw{
  width:40px; height:40px; padding:0; line-height:1; font-size:20px;
  background:#f2f2f2; border:0; color:#151515; cursor:pointer; transition:all .2s;
}
.jpf-brands__arw:hover{ background:var(--jpf-red,#e20100); color:#fff; }

.jpf-brands__track{ display:flex; gap:16px; }
.jpf-brands--row .jpf-brands__track{
  overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory;
  padding-bottom:8px; scrollbar-width:thin;
}
.jpf-brands--row .jpf-brands__track::-webkit-scrollbar{ height:4px; }
.jpf-brands--row .jpf-brands__track::-webkit-scrollbar-thumb{ background:#d5d5d5; }
.jpf-brands--row .jpf-bcard{ flex:0 0 158px; scroll-snap-align:start; }
.jpf-brands--grid .jpf-brands__track{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px;
}

.jpf-bcard{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:22px 14px; background:#fff; border:1px solid #e6e6e6; border-radius:3px;
  text-decoration:none; color:#151515; transition:border-color .2s, box-shadow .2s, transform .2s;
}
.jpf-bcard:hover{ border-color:var(--jpf-red,#e20100); box-shadow:0 8px 22px rgba(0,0,0,.08); transform:translateY(-2px); }
.jpf-bcard__logo{ display:flex; align-items:center; justify-content:center; height:56px; }
.jpf-bcard__logo img{ max-width:82px; max-height:56px; width:auto; height:auto; display:block; }
.jpf-bcard__txt{ font-size:15px; font-weight:900; text-transform:uppercase; }
.jpf-bcard__name{
  font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  text-align:center; line-height:1.2;
}

/* --- Marka sayfası --- */
.jpf-brand{ max-width:1200px; margin:0 auto; }
.jpf-hero--brand .jpf-hero__title{ font-size:26px; margin:6px 0 4px; }
.jpf-brand__crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:12px; color:#8a8c95; }
.jpf-brand__crumbs a{ color:#c9cad1; text-decoration:none; text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.jpf-brand__crumbs a:hover{ color:var(--jpf-red,#e20100); }
.jpf-brand__none{ padding:30px 0; color:#666; }

.jpf-tiles{
  display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.jpf-tiles--year{ grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); }
.jpf-tile{
  display:flex; flex-direction:column; justify-content:center; gap:3px;
  min-height:58px; padding:12px 16px;
  background:#f6f6f7; border:1px solid #e6e6e6; border-left:3px solid transparent; border-radius:3px;
  color:#1a1a1a; font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  text-decoration:none; transition:all .18s;
}
.jpf-tile:hover{ background:#fff; border-color:#e6e6e6; border-left-color:var(--jpf-red,#e20100); color:var(--jpf-red,#e20100); }
.jpf-tile small{ font-size:11px; font-weight:600; letter-spacing:0; text-transform:none; color:#8b8b8b; }
.jpf-tile:hover small{ color:#8b8b8b; }
.jpf-tiles--year .jpf-tile{ align-items:center; text-align:center; min-height:48px; }

@media (max-width:640px){
  .jpf-brands__title{ font-size:26px; }
  .jpf-brands--row .jpf-bcard{ flex-basis:132px; }
}

/* şerit: kaydırma çubuğunu gizle (oklar var) */
.jpf-brands--row .jpf-brands__track{ scrollbar-width:none; -ms-overflow-style:none; }
.jpf-brands--row .jpf-brands__track::-webkit-scrollbar{ display:none; }

/* -----------------------------------------------------------------
   Logo görselleri: bazı SVG'lerde kök <svg>'de width/height yok
   (sadece viewBox) → flex içinde içsel genişlik 0 çıkıyor ve logo
   görünmüyordu (Fiat, Kia, Suzuki, Volkswagen, Volvo). Kutuyu CSS
   ile sabitleyip object-fit:contain ile oranı koruyoruz.
   ----------------------------------------------------------------- */
.jpf-bcard__logo img{
  width:82px !important; height:56px !important;
  max-width:82px; max-height:56px; object-fit:contain; flex:0 0 auto;
}
.jpf-hero__img img{
  width:100% !important; height:84px !important;
  max-width:100%; max-height:84px; object-fit:contain; flex:0 0 auto;
}
.jpf-gcard__logo img{
  width:100% !important; height:100% !important;
  object-fit:contain; flex:0 0 auto;
}

/* Sidebar bilgi notu (araca uyan ürün yokken) */
.jpf-fnote{
  margin:0 0 18px; padding:12px 14px;
  background:#fbf3f3; border-left:3px solid var(--jpf-red,#e20100);
  font-size:12.5px; line-height:1.45; color:#7a4b4b;
}

/* Marka kartında ürün adedi */
.jpf-bcard__n{ font-size:11px; color:#8b8b8b; letter-spacing:.02em; }

/* Marka şeridi: hepsi tek sırada (slider yok) */
.jpf-brands--fit .jpf-brands__track{
  display:grid; grid-template-columns:repeat(var(--jpf-cols,8),minmax(0,1fr)); gap:12px;
}
.jpf-brands--fit .jpf-bcard{ padding:18px 8px; gap:10px; }
.jpf-brands--fit .jpf-bcard__logo{ height:46px; }
.jpf-brands--fit .jpf-bcard__logo img{ width:100%!important; height:46px!important; max-width:100%; max-height:46px; }
.jpf-brands--fit .jpf-bcard__name{ font-size:12px; }
@media (max-width:1100px){
  .jpf-brands--fit .jpf-brands__track{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
}
@media (max-width:520px){
  .jpf-brands--fit .jpf-brands__track{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
}

/* Logosuz marka kartı: ad logo yerine, tekrar yok */
.jpf-bcard--nologo .jpf-bcard__logo{ align-items:center; }
.jpf-brands--fit .jpf-bcard--nologo .jpf-bcard__txt{ font-size:14px; }

/* =====================================================================
   Marka sayfası: hero + künye + uzun tanıtım
   ===================================================================== */
.jpf-bhero{
  position:relative; margin:0 0 26px; padding:26px;
  background:var(--jpf-surface,#15161b); border-left:4px solid var(--jpf-red,#e20100);
  border-radius:4px; background-size:cover; background-position:center;
}
.jpf-bhero--cover::before{
  content:""; position:absolute; inset:0; border-radius:4px;
  background:linear-gradient(90deg,rgba(10,11,14,.94) 0%,rgba(10,11,14,.78) 60%,rgba(10,11,14,.6) 100%);
}
.jpf-bhero__in{ position:relative; display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.jpf-bhero__logo{
  flex:0 0 168px; max-width:168px; min-height:104px; box-sizing:border-box; padding:16px;
  display:flex; align-items:center; justify-content:center; background:#fff; border-radius:4px;
}
.jpf-bhero__logo img{ width:100%!important; height:72px!important; object-fit:contain; display:block; }
.jpf-bhero__body{ flex:1 1 320px; min-width:280px; }
.jpf-bhero__title{
  margin:0 0 6px; font-size:26px; font-weight:900; line-height:1.15;
  color:#fff; text-transform:uppercase; letter-spacing:.01em;
}
.jpf-bhero__intro{ margin:0 0 14px; max-width:70ch; font-size:14px; line-height:1.55; color:#b9bbc4; }
.jpf-bhero .jpf-chips{ margin-bottom:0; }
.jpf-bhero__site{
  display:inline-block; margin-top:14px; font-size:12px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:var(--jpf-red,#e20100); text-decoration:none;
}
.jpf-bhero__site:hover{ color:var(--jpf-red-hot,#ff2a1c); }

.jpf-btext{
  margin:44px 0 0; padding-top:28px; border-top:1px solid #ececec;
  font-size:15px; line-height:1.7; color:#4a4a4a; max-width:80ch;
}
.jpf-btext__h{
  margin:0 0 14px; font-size:20px; font-weight:900;
  text-transform:uppercase; letter-spacing:.01em; color:#151515;
}
.jpf-btext p{ margin:0 0 14px; }

@media (max-width:640px){
  .jpf-bhero{ padding:18px; }
  .jpf-bhero__logo{ flex-basis:100%; max-width:100%; }
  .jpf-bhero__title{ font-size:20px; }
}

/* Araç markası sayfası: kapak görseli + tanıtım */
.jpf-hero--brand{ position:relative; background-size:cover; background-position:center; }
.jpf-hero--brand.jpf-hero--cover::before{
  content:""; position:absolute; inset:0; border-radius:4px;
  background:linear-gradient(90deg,rgba(10,11,14,.94) 0%,rgba(10,11,14,.8) 55%,rgba(10,11,14,.62) 100%);
}
.jpf-hero--brand > *{ position:relative; }
.jpf-hero__intro{ margin:6px 0 10px; max-width:72ch; font-size:14px; line-height:1.55; color:#c3c5cd; }
.jpf-hero--brand .jpf-chips{ margin-top:12px; }

/* =====================================================================
   Sonuç sayfasında (seçim yokken) arama formu: koyu panel, yatay dizilim
   ===================================================================== */
.jpf-wrap--panel .jpf-form{
  padding:26px 28px 28px;
  margin:0 0 34px;
  background:var(--jpf-surface,#15161b);
  border:1px solid var(--jpf-line,#2b2d35);
  border-left:4px solid var(--jpf-red,#e20100);
  border-radius:4px;
}
.jpf-wrap--panel .jpf-tabs{ margin-bottom:20px; }

/* 4 seçim + buton tek sırada */
.jpf-wrap--panel .jpf-selects{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) 168px;
  gap:10px; align-items:start;
}
.jpf-wrap--panel .jpf-btn{
  width:100%; height:var(--jpf-h,52px); margin-top:0;
  font-size:13px; letter-spacing:.12em;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

@media (max-width:1000px){
  .jpf-wrap--panel .jpf-selects{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .jpf-wrap--panel .jpf-btn{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .jpf-wrap--panel .jpf-form{ padding:20px 18px 22px; }
  .jpf-wrap--panel .jpf-selects{ grid-template-columns:1fr; }
}