/* Global shadow reset (requested) */
html body *,
html body *::before,
html body *::after{
box-shadow:none!important;
}
:root{
--primary:#059bb4;
--primary-dark:#077b95;
--ink:#11223f;
--muted:#7d8ba2;
--surface:#fff;
--page:#fbfdfe;
--shadow:0 14px 40px rgba(15,55,73,.055),0 2px 5px rgba(15,55,73,.025);
}
/* Sayfa sayısı oluşmadığında boş sayfalama kutusunu tamamen kaldır. */
body #pagination.pagination:empty,
body #pagination.pagination[hidden]{display:none!important}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:"Manrope",system-ui,sans-serif;
color:var(--ink);
background:
radial-gradient(circle at 78% 14%,rgba(127,219,235,.13),transparent 30%),
linear-gradient(#fff,#fbfdfe);
-webkit-font-smoothing:antialiased;
}
button,
input,
select{font:inherit}
button,
a,
select{transition:.22s ease}
/* Archive breadcrumb — yatay › yolu (ol numaralı liste değil) */
.breadcrumb{
padding:0 0 14px;
background:transparent;
}
.breadcrumb__list{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px 8px;
margin:0;
padding:0;
list-style:none;
font-size:13px;
line-height:1.4;
color:var(--muted);
}
.breadcrumb__list li{
display:inline-flex;
align-items:center;
gap:8px;
min-width:0;
max-width:100%;
list-style:none;
}
.breadcrumb__list li::marker{content:none}
.breadcrumb__list li+li::before{
content:"›";
flex:0 0 auto;
color:var(--muted);
opacity:.55;
font-weight:400;
line-height:1;
}
.breadcrumb__list a{
color:var(--muted);
text-decoration:none;
}
.breadcrumb__list a:hover{color:var(--ink)}
.breadcrumb__list [aria-current]{
color:var(--ink);
font-weight:600;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
max-width:min(280px,70vw);
}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
svg{width:18px;height:18px;stroke-width:1.8;flex:0 0 auto}
.shell{width:min(1600px,calc(100% - 64px));margin-inline:auto}
/* HEADER */
.site-header{
height:98px;
background:rgba(255,255,255,.93);
border-bottom:1px solid #edf3f6;
position:sticky;
top:0;
z-index:50;
backdrop-filter:blur(16px);
}
.header-inner{height:100%;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;min-width:235px}
.brand-mark{position:relative;width:42px;height:42px;margin-right:12px;flex:0 0 auto}
.brand-mark span{
position:absolute;
border:9px solid var(--primary);
border-radius:14px 4px 14px 4px;
transform:rotate(28deg)
}
.brand-mark span:first-child{
width:30px;height:18px;top:2px;left:4px;
border-bottom-color:transparent;border-left-color:transparent
}
.brand-mark span:last-child{
width:27px;height:17px;bottom:1px;left:0;
border-top-color:transparent;border-right-color:transparent
}
.brand-copy{display:flex;flex-direction:column;line-height:1.05}
.brand-copy strong{font-size:27px;letter-spacing:-1.1px}
.brand-copy small{font-size:11px;color:#7c899a;margin-top:5px}
.category-button{
height:56px;padding:0 22px;border:0;border-radius:9px;color:#fff;
background:linear-gradient(135deg,#0aa7bc,#066d92);
display:flex;align-items:center;gap:12px;font-weight:700;
box-shadow:0 10px 22px rgba(5,155,180,.16)
}
.category-button:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(5,155,180,.22)}
.global-search{
height:56px;flex:1;max-width:470px;border:1px solid #d8e2e8;border-radius:9px;
display:flex;align-items:center;padding:0 17px;background:#fff
}
.global-search:focus-within{border-color:#71cddb;box-shadow:0 0 0 4px rgba(5,155,180,.08)}
.global-search input{border:0;outline:0;width:100%;color:var(--ink);background:transparent}
.global-search input::placeholder{color:#9ba8b8}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:26px}
.header-action{position:relative;display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;white-space:nowrap}
.header-action svg{width:23px;height:23px;color:#1c4165}
.header-action.warranty{padding-right:24px;border-right:1px solid #e4ebef}
.header-action.warranty svg{color:var(--primary)}
.header-action.cart b{
position:absolute;right:-10px;top:-13px;width:19px;height:19px;border-radius:50%;
background:var(--primary);color:#fff;font-size:10px;display:grid;place-items:center
}
/* HERO */
/* VEHICLE */
.result-toolbar select{
height:52px;border:1px solid #cfdce3;border-radius:8px;background:#fff;
padding:0 16px;color:#203250;outline:0
}
.result-toolbar select:focus{border-color:#6bc7d6;box-shadow:0 0 0 4px rgba(5,155,180,.08)}
/* ALT KATEGOR? ?ER?D? */
.subcategory-section{
display:grid;grid-template-columns:46px 1fr 46px;align-items:center;gap:12px;
margin-top:22px
}
.subcategory-arrow{
width:46px;height:46px;border:1px solid #dce6eb;border-radius:50%;
background:#fff;color:#52627c;display:grid;place-items:center;box-shadow:0 6px 16px rgba(18,69,86,.04)
}
.subcategory-arrow:hover{border-color:#80ceda;color:var(--primary);transform:translateY(-2px)}
.subcategory-track{
display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;padding:3px 1px
}
.subcategory-track::-webkit-scrollbar{display:none}
.subcategory-chip{
flex:0 0 auto;min-width:265px;height:62px;padding:0 20px;border:1px solid #dce6eb;border-radius:12px;
background:#fff;color:#203250;display:flex;align-items:center;justify-content:space-between;gap:14px
}
.subcategory-chip strong{font-size:13px;white-space:nowrap}
.subcategory-chip span{font-size:11px;color:#8794a5;white-space:nowrap}
.subcategory-chip:hover,
.subcategory-chip.active{
border-color:#7acbd8;background:linear-gradient(135deg,#f8feff,#edf9fb);transform:translateY(-2px)
}
.subcategory-chip.active strong{color:var(--primary)}
/* AR??V */
.archive-layout{display:grid;grid-template-columns:286px 1fr;gap:38px;margin-top:26px}
.sidebar{display:flex;flex-direction:column;gap:18px}
.side-card{background:#fff;border:1px solid #e2ebef;border-radius:15px;box-shadow:var(--shadow);overflow:hidden}
.side-card h3{font-size:15px;margin:0;padding:18px 18px 13px}
/* SATICI KARTI */
.seller-card{padding:18px}
.seller-logo{
min-height:80px;border-radius:12px;background:linear-gradient(135deg,#f7fcfd,#eef8fa);
display:flex;align-items:center;padding:14px
}
.seller-logo>div{display:flex;flex-direction:column}
.seller-logo strong{font-size:20px;letter-spacing:-.6px}
.seller-logo small{font-size:9px;color:#7a8798;margin-top:4px}
.seller-info{padding-top:14px}
.seller-info h3{font-size:18px;padding:0;margin:0 0 8px}
.seller-info p{margin:0;color:#2873e4;font-size:12px;font-weight:700;display:flex;align-items:center;gap:5px}
.seller-info svg{width:15px;fill:#2873e4;color:#2873e4}
.category-row{
width:100%;min-height:44px;height:auto;border:0;background:#fff;padding:8px 16px;
display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;column-gap:12px;text-align:left;
color:#34445d;font-size:13px
}
.category-row--no-image{grid-template-columns:minmax(0,1fr) auto}
.category-row svg{width:17px}
.category-row__image{width:40px;height:40px;min-width:40px;min-height:40px;object-fit:contain;flex-shrink:0;display:block}
.category-row>i{width:40px;height:40px;display:grid;place-items:center;text-align:center;font-size:18px;line-height:1;color:inherit;flex-shrink:0}
#archiveCategoryList .category-row span{line-height:1.3;padding-inline:0}
#archiveCategoryList .category-row b{min-width:1.5em;text-align:right}
.category-row b{font-weight:500;color:#6f7d8f}
.category-row:hover,
.category-row.active{background:linear-gradient(90deg,#e6f6f8,#f8fcfd);color:#008fa8}
.category-row.active{font-weight:700}
.category-row.active b{color:#008fa8}
.all-categories{
width:calc(100% - 30px);height:42px;margin:12px 15px 16px;border:1px solid #aadce5;
border-radius:8px;background:#fff;color:#008fa8;font-weight:700
}
.all-categories:hover{background:#eefafb;transform:translateY(-1px)}
.secure-card{padding-bottom:12px}
.secure-card>div{display:flex;gap:12px;padding:9px 17px}
.secure-card>div svg{color:var(--primary);margin-top:3px}
.secure-card p{display:flex;flex-direction:column;margin:0}
.secure-card strong{font-size:12px}
.secure-card span{font-size:10px;color:#7b889a;margin-top:3px}
.wholesale-card{padding:0 17px 16px}
.wholesale-card h3{padding-left:0;padding-right:0}
.wholesale-card>p{font-size:12px;line-height:1.7;color:#69778a;margin:0 0 14px}
.wholesale-card ul{list-style:none;padding:0;margin:0 0 18px}
.wholesale-card li{font-size:11px;color:#5a687b;display:flex;align-items:center;gap:8px;margin:9px 0}
.wholesale-card li svg{width:13px;color:var(--primary)}
.offer-button{
border:0;width:100%;height:50px;border-radius:9px;color:#fff;font-weight:800;
background:linear-gradient(135deg,#08a7ba,#007092);display:flex;align-items:center;justify-content:center;gap:10px
}
.offer-button:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(5,155,180,.2)}
/* ?ST SEO A?IKLAMASI */
.category-intro{
border:1px solid #dfe8ec;border-radius:16px;background:#fff;padding:20px 24px 15px;
box-shadow:var(--shadow);margin-bottom:12px
}
.category-intro h1,.category-intro h2{font-size:25px;letter-spacing:-.7px;margin:0 0 10px}
.category-intro-copy{position:relative;overflow:hidden;transition:max-height .45s ease}
.category-intro-copy.collapsed{max-height:76px}
.category-intro-copy:not(.collapsed){max-height:520px}
.category-intro-copy.collapsed:after{
content:"";position:absolute;left:0;right:0;bottom:0;height:36px;
background:linear-gradient(transparent,#fff)
}
.category-intro p{font-size:13px;color:#65738a;line-height:1.72;margin:0 0 8px}
.category-intro strong{color:#142942}
.result-toolbar{height:56px;display:flex;align-items:center;justify-content:space-between;color:#65738b;font-size:14px}
.result-toolbar strong{font-size:19px;color:#253957}
.result-toolbar label{display:flex;align-items:center;gap:12px}
.result-toolbar select{height:42px;min-width:215px}
.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.product-card{
min-height:314px;border:1px solid #dae8ed;border-radius:16px;background:rgba(255,255,255,.98);
box-shadow:var(--shadow);padding:17px;display:grid;grid-template-columns:220px 1fr;
grid-template-rows:1fr auto;position:relative;overflow:hidden;
transition:.28s cubic-bezier(.2,.8,.2,1)
}
.product-card:before{
content:"";position:absolute;inset:0;
background:radial-gradient(circle at 18% 36%,rgba(81,203,221,.10),transparent 29%);
opacity:0;transition:.28s
}
.product-card:hover{transform:translateY(-5px);box-shadow:0 22px 45px rgba(15,71,89,.10);border-color:#b8e2e8}
.product-card:hover:before{opacity:1}
.product-visual{position:relative;display:grid;place-items:center;min-height:204px;padding:6px;z-index:1}
.product-visual img{
width:100%;height:210px;object-fit:contain;
filter:drop-shadow(0 18px 16px rgba(18,46,58,.16));
transition:.3s
}
.product-card:hover .product-visual img{transform:scale(1.055) rotate(-1deg)}
.category-pill{
position:absolute;left:0;top:0;background:#dff5f7;color:#0092aa;
font-size:11px;font-weight:700;padding:6px 13px;border-radius:999px
}
.favorite{position:absolute;right:14px;top:14px;border:0;background:none;color:#435777;z-index:3;padding:4px}
.favorite:hover,
.favorite.active{color:#ee5364;transform:scale(1.12)}
.favorite.active svg{fill:#ee5364}
.product-info{padding:28px 0 0 8px;z-index:1;display:flex;flex-direction:column}
.product-info h3{font-size:17px;margin:0 0 13px}
.product-info p{font-size:12px;color:#63718a;margin:0 0 8px}
.price{margin-left:auto;margin-top:-25px;text-align:right}
.price span{display:block;font-size:11px;color:#66758a}
.price strong{font-size:25px;color:#029ab3;letter-spacing:-.8px}
.card-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px;z-index:1}
.card-actions button,
.card-actions a{
height:48px;border-radius:8px;border:1px solid #acdfe7;background:#fff;color:#0092aa;
display:flex;align-items:center;justify-content:center;gap:7px;font-size:10px;font-weight:800;
text-align:center;padding:0 8px
}
.card-actions svg{width:17px}
.card-actions .whatsapp{color:#13b861}
.card-actions .primary{border:0;color:#fff;background:linear-gradient(135deg,#0aa8ba,#007e9c)}
.card-actions button:hover,
.card-actions a:hover{transform:none;box-shadow:none}
/* SAYFALAMA */
.pagination{display:flex;justify-content:center;align-items:center;gap:7px;margin:28px 0 5px}
.page-button{
min-width:40px;height:40px;border:1px solid #dbe5ea;border-radius:9px;background:#fff;
color:#52627c;display:grid;place-items:center;font-weight:700;font-size:13px;padding:0 11px
}
.page-button:hover{border-color:#79cbd8;color:var(--primary);transform:translateY(-2px)}
.page-button.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 8px 18px rgba(5,155,180,.20)}
.page-button:disabled{opacity:.42;cursor:not-allowed;transform:none}
/* ALT SEO A?IKLAMASI */
.seo-content{
background:#fff;border:1px solid #e1eaee;border-radius:16px;padding:25px 28px;
box-shadow:var(--shadow)
}
.seo-content-inner{overflow:hidden;position:relative;transition:max-height .55s ease}
.seo-content-inner.collapsed{max-height:440px}
.seo-content-inner:not(.collapsed){max-height:2500px}
.seo-content-inner.collapsed:after{
content:"";position:absolute;left:0;right:0;bottom:0;height:90px;
background:linear-gradient(transparent,#fff)
}
.seo-content h2{font-size:19px;letter-spacing:-.35px;margin:0 0 9px}
.seo-content h2:not(:first-child){margin-top:23px}
.seo-content p{font-size:12px;color:#607087;line-height:1.72;margin:0 0 9px}
.seo-content .seo-content-toggle{
margin-top:12px;
display:inline-flex;
align-items:center;
gap:6px;
}
/* DESTEK */
.support-strip{
margin-top:28px;margin-bottom:72px;min-height:86px;border:1px solid #d7e8ed;border-radius:15px;
background:#f8fcfd;display:grid;grid-template-columns:auto 1fr auto;align-items:center;
gap:20px;padding:16px 24px
}
.support-icon{width:56px;height:56px;border-radius:50%;background:#e4f6f8;color:var(--primary);display:grid;place-items:center}
.support-icon svg{width:27px;height:27px}
.support-strip h3{font-size:18px;color:#0094ad;margin:0 0 4px}
.support-strip p{font-size:12px;color:#6c7a8d;margin:0}
.support-strip>a{
height:46px;border:1px solid #b6e1e8;border-radius:8px;padding:0 20px;
display:flex;align-items:center;gap:10px;color:#0697ad;font-weight:700
}
.whatsapp-icon{display:block;width:19px;height:19px;object-fit:contain;flex:0 0 auto}
.card-actions .whatsapp .whatsapp-icon{width:18px;height:18px}
.support-strip>a .whatsapp-icon{width:21px;height:21px}
.toast{
position:fixed;left:50%;bottom:30px;transform:translate(-50%,30px);opacity:0;pointer-events:none;
background:#10233e;color:#fff;border-radius:9px;padding:13px 18px;font-size:13px;
z-index:100;transition:.25s
}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1200px){
.header-action.warranty{display:none}
.archive-layout{grid-template-columns:240px 1fr}
.product-card{grid-template-columns:175px 1fr}
.product-visual img{height:178px}
}
@media(max-width:940px){
.site-header{height:auto}
.header-inner{padding:14px 0;flex-wrap:wrap}
.brand{min-width:auto}
.global-search{order:5;max-width:none;flex-basis:100%}
.header-actions{gap:15px}
.archive-layout{grid-template-columns:1fr}
.sidebar{display:grid;grid-template-columns:repeat(3,1fr)}
.seller-card,
.category-card{grid-column:1/-1}
}
@media(max-width:700px){
.shell{width:min(100% - 28px,1600px)}
.header-actions .header-action span{display:none}
.subcategory-section{grid-template-columns:38px 1fr 38px}
.subcategory-arrow{width:38px;height:38px}
.subcategory-chip{min-width:235px;height:58px}
.sidebar{grid-template-columns:1fr}
.product-grid{grid-template-columns:1fr}
.product-card{grid-template-columns:145px 1fr;min-height:300px}
.product-visual img{height:164px}
.card-actions{grid-template-columns:1fr}
.result-toolbar{height:auto;padding:12px 0;gap:14px;align-items:flex-start;flex-direction:column}
.category-intro{padding:18px}
.seo-content{padding:20px}
.support-strip{grid-template-columns:auto 1fr}
.support-strip>a{grid-column:1/-1;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* =========================================================
V7: MANROPE + YEN? RENK PALET? + ?ENT?K TASARIMI
========================================================= */
:root{
--primary:#0A5CD8;
--primary-dark:#082955;
--ink:#082955;
--muted:#718096;
--surface:#FFFFFF;
--page:#F4F6F8;
--shadow:0 18px 42px rgba(8,41,85,.075),0 2px 7px rgba(8,41,85,.035);
}
html,
body,
button,
input,
select,
textarea{
font-family:"Manrope",sans-serif;
font-optical-sizing:auto;
font-style:normal;
}
body{
color:var(--ink);
background:
radial-gradient(circle at 82% 12%,rgba(10,92,216,.07),transparent 29%),
var(--page);
}
.site-header{
background:rgba(255,255,255,.95);
border-bottom:1px solid rgba(8,41,85,.08);
}
.brand-mark span{border-color:var(--primary)}
.brand-mark span:first-child{
border-bottom-color:transparent;border-left-color:transparent
}
.brand-mark span:last-child{
border-top-color:transparent;border-right-color:transparent
}
.category-button,
.offer-button{
background:linear-gradient(135deg,var(--primary),#0849AD);
box-shadow:0 12px 24px rgba(10,92,216,.18)
}
.global-search:focus-within,
.result-toolbar select:focus{
border-color:var(--primary);
box-shadow:0 0 0 4px rgba(10,92,216,.11)
}
.header-action.warranty svg,
.category-row:hover,
.category-row.active,
.secure-card>div svg,
.wholesale-card li svg,
.support-icon,
.support-strip h3,
.support-strip>a{
color:var(--primary)
}
.header-action.cart b,
.page-button.active{
background:var(--primary)
}
.category-intro h2,
.seo-content h2,
.result-toolbar strong{color:var(--primary-dark)}
.subcategory-chip:hover,
.subcategory-chip.active{
border-color:var(--primary);
background:linear-gradient(135deg,#fff,#eef4ff)
}
.subcategory-chip.active strong{color:var(--primary)}
.subcategory-arrow:hover{border-color:var(--primary);color:var(--primary)}
.category-row:hover,
.category-row.active{
background:linear-gradient(90deg,#eaf2ff,#f9fbff);
color:var(--primary)
}
.category-row.active b{color:var(--primary)}
.all-categories{
color:var(--primary);
border-color:rgba(10,92,216,.35)
}
.all-categories:hover{background:#edf4ff}
.category-pill{background:#eaf2ff;color:var(--primary)}
.price strong{color:var(--primary)}
.card-actions button,
.card-actions a{
border-color:rgba(10,92,216,.30);
color:var(--primary)
}
.card-actions .primary{
background:linear-gradient(135deg,var(--primary),#0849AD)
}
/* SELECT g?r?n?m?: 6. referanstaki vurucu mavi odak */
.result-toolbar select{
appearance:auto;
border:1px solid #C9D5E4;
background:#fff;
color:var(--primary-dark);
font-weight:500;
accent-color:var(--primary)
}
.result-toolbar select:hover{border-color:rgba(10,92,216,.55)}
.result-toolbar select:focus{
outline:none;
border:2px solid var(--primary);
padding-left:15px
}
select option:checked{background:var(--primary);color:#fff}
/* S?ralama: sitedeki custom dropdown */
.result-toolbar__sort{
position:relative;
z-index:2;
}
.result-toolbar__sort #sortProducts[hidden]{
display:none!important;
}
.result-toolbar__sort .custom-select{
position:relative;
width:auto;
min-width:215px;
flex:1 1 auto;
z-index:1;
}
.result-toolbar__sort .custom-select.open{
z-index:700;
}
.result-toolbar__sort .custom-select-trigger{
width:100%;
height:42px;
min-width:215px;
padding:0 12px;
border:1px solid #C9D5E4;
border-radius:8px;
background:#fff;
color:var(--primary-dark);
font-size:13px;
font-weight:600;
box-shadow:none;
transform:none;
}
.result-toolbar__sort .custom-select-trigger:hover{
border-color:rgba(10,92,216,.55);
background:#fff;
}
.result-toolbar__sort .custom-select-trigger:focus-visible{
outline:none;
border:2px solid var(--primary);
}
.result-toolbar__sort .custom-select-trigger svg,
.result-toolbar__sort .custom-select-trigger i{
width:14px;
height:14px;
font-size:14px;
color:#657891;
}
.result-toolbar__sort .custom-select-menu{
z-index:700;
max-height:220px;
}
.result-toolbar__sort .custom-select-option{
min-height:38px;
font-size:13px;
}
/* Toolbar + a??k dropdown ?r?n kartlar?n?n ?st?nde kals?n */
.result-toolbar{
position:relative;
z-index:40;
}
body.is-custom-select-open .result-toolbar,
body.is-custom-select-open .result-toolbar__sort,
body.is-custom-select-open .result-toolbar__sort .custom-select.open{
z-index:800!important;
}
body.is-custom-select-open .result-toolbar__sort .custom-select-menu{
z-index:801!important;
}
.product-grid,
#productGrid{
position:relative;
z-index:1;
}
/* ANA KATEGOR?LER: butonla a??l?p kapanan b?l?m */
.all-categories{
display:flex;align-items:center;justify-content:center;gap:8px
}
.all-categories svg{width:16px;transition:transform .28s ease}
.all-categories.open svg{transform:rotate(180deg)}
/* ALT KATEGOR?LER ayr? sayfaya gider */
.subcategory-chip{
text-decoration:none;
cursor:pointer;
}
.subcategory-chip:focus-visible{
outline:3px solid rgba(10,92,216,.22);
outline-offset:2px
}
/* ---------------------------------------------------------
F?LTRE PANEL? SA? ?ENT?K
Border kald?r?ld?. Sa? ?stte e?risel kesim var.
Temizle butonu ?enti?in ?st?nde durur.
--------------------------------------------------------- */
/* ---------------------------------------------------------
?R?N KARTI ALT SA? ?ENT?K
Teklif butonu ?enti?in ?zerinde y?zer.
--------------------------------------------------------- */
.product-card{
overflow:visible;
border:0;
background:var(--surface);
box-shadow:var(--shadow);
padding-bottom:20px
}
.product-card::after{
content:"";
position:absolute;
z-index:2;
right:-1px;
bottom:-1px;
width:245px;
height:68px;
background:var(--page);
border-top-left-radius:88px 62px;
pointer-events:none
}
.product-card::before{border-radius:16px}
.product-card:hover{
border-color:transparent;
box-shadow:0 25px 54px rgba(8,41,85,.13)
}
.card-actions{
position:relative;
z-index:4;
align-items:center;
overflow:visible
}
.card-actions .primary{
position:relative;
z-index:6;
transform:translateY(10px);
min-height:50px;
box-shadow:0 12px 26px rgba(10,92,216,.24)
}
.card-actions .primary:hover{
transform:translateY(6px);
box-shadow:0 16px 31px rgba(10,92,216,.29)
}
/* SEO a??klamas? loop'un hemen alt?nda */
.seo-content{
margin-top:24px;
background:var(--surface);
border:0;
box-shadow:var(--shadow)
}
.archive-main{min-width:0}
.pagination{margin-bottom:0}
/* Genel beyaz y?zeyler */
.side-card,
.category-intro,
.seo-content,
.support-strip,
.subcategory-chip,
.subcategory-arrow,
.product-card{
background:var(--surface)
}
.category-intro,
.side-card,
.support-strip{border-color:rgba(8,41,85,.10)}
.support-strip{background:#fff}
/* dar ekran ?entikleri */
@media(max-width:1200px){
.product-card::after{width:210px}
}
@media(max-width:700px){
.product-card::after{
width:175px;height:64px;border-top-left-radius:68px 54px
}
.card-actions .primary{transform:none}
}
.empty-state{
grid-column:1/-1;
min-height:240px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:32px 24px;
align-content:center;
text-align:center;
background:#fff;
border-radius:18px;
box-shadow:var(--shadow);
color:var(--muted);
}
.empty-state svg{width:34px;height:34px;color:var(--primary);margin-bottom:10px}
.empty-state h3{margin:0 0 6px;color:var(--primary-dark)}
.empty-state p{margin:0;font-size:13px}
.empty-state-action{display:inline-flex;align-items:center;gap:7px;margin-top:18px;padding:11px 17px;border:1px solid var(--primary);border-radius:9px;color:var(--primary);font-size:13px;font-weight:800}
.empty-state-action svg{width:15px;height:15px;margin:0}
/* =========================================================
V9: ?ALI?AN ARA? UYUMLULUK F?LTRES?
========================================================= */
/* Modal ve ?al??an kart aksiyonlar? */
.modal-overlay{position:fixed;inset:0;z-index:5000;background:rgba(2,16,36,.64);backdrop-filter:blur(5px);display:grid;place-items:center;padding:24px}
.modal-overlay[hidden]{display:none}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid #E5EBF2}
.modal-header h2{margin:0;font-size:20px;color:#082955}
.modal-header button{width:38px;height:38px;border:0;border-radius:50%;background:#F1F5F9;color:#52627C;display:grid;place-items:center}
.modal-header button:hover{background:#E6EDF5;color:#0A5CD8}
.modal-content{padding:22px;color:#304868}
.modal-vehicle-list{display:grid;gap:9px;margin:14px 0 0;padding:0;list-style:none}
.modal-vehicle-list li{display:flex;align-items:center;gap:9px;background:#F4F7FB;border-radius:9px;padding:11px 13px;font-size:13px}
.modal-vehicle-list svg{color:#0A5CD8}
/* =========================================================
V10: Kullan?c?n?n verdi?i ger?ek clip-path ?entik sistemi
+ ?al??an marka ve fiyat filtre kartlar?
========================================================= */
/* Sa?-alt tab/?entik. Verilen section--clip-br geometrisi kullan?ld?. */
/* Ara? uyumlulu?u paneli: buton alt sa? tabda. */
/* ?r?n kartlar?nda ayn? sa?-alt tab. */
.product-card.section--clip-br{
overflow:hidden!important;
border:0!important;
border-radius:0;
padding-bottom:112px;
min-height:370px;
background:#fff;
box-shadow:0 18px 42px rgba(8,41,85,.075);
}
.product-card.section--clip-br::after{display:none!important}
.product-card.section--clip-br::before{border-radius:0}
.product-card.section--clip-br .card-actions{
position:static;
grid-column:1/-1;
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
padding:0;
min-height:48px;
}
.product-card.section--clip-br .card-actions .primary{
position:absolute;
right:20px;
bottom:14px;
width:238px;
height:52px;
transform:none!important;
z-index:9;
border-radius:8px;
box-shadow:0 13px 28px rgba(10,92,216,.27);
}
.product-card.section--clip-br .card-actions .primary:hover{transform:translateY(-3px)!important}
/* Marka ve fiyat kartlar? kategori kart?n?n diliyle ayn?. */
.brand-filter-card,
.price-filter-card{
overflow:hidden;
border-radius:16px;
}
.filter-card-heading{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 18px 12px;
}
.filter-card-heading h3{padding:0;margin:0;font-size:15px}
.filter-card-heading button{
border:0;
background:transparent;
color:#0A5CD8;
font-size:11px;
font-weight:750;
padding:5px 0;
}
.brand-search{
margin:0 15px 12px;
height:42px;
border:1px solid #D8E1EC;
border-radius:9px;
display:flex;
align-items:center;
gap:8px;
padding:0 11px;
color:#7A8CA6;
}
.brand-search:focus-within{border-color:#0A5CD8;box-shadow:0 0 0 3px rgba(10,92,216,.09)}
.brand-search svg{width:16px}
.brand-search input{border:0;outline:0;background:transparent;width:100%;font-size:12px;color:#082955}
.filter-option-list{padding:0 0 12px}
.brand-option{
min-height:43px;
display:grid;
grid-template-columns:20px 1fr auto;
align-items:center;
gap:8px;
padding:0 18px;
font-size:12px;
color:#334B6C;
cursor:pointer;
transition:.2s ease;
}
.brand-option:hover{background:#F1F6FF;color:#0A5CD8}
.brand-option input{width:16px;height:16px;accent-color:#0A5CD8}
.brand-option b{font-size:11px;font-weight:550;color:#8190A4}
.brand-option.is-hidden{display:none}
.price-inputs{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:0 15px}
.price-inputs label{display:flex;flex-direction:column;gap:5px}
.price-inputs span{font-size:10px;color:#77879D;font-weight:650}
.price-inputs input{
width:100%;height:42px;border:1px solid #D8E1EC;border-radius:9px;
padding:0 10px;outline:0;color:#082955;font-size:12px;background:#fff
}
.price-inputs input:focus{border-color:#0A5CD8;box-shadow:0 0 0 3px rgba(10,92,216,.09)}
.price-range-wrap{position:relative;height:42px;margin:12px 18px 2px}
.price-range-track{position:absolute;left:0;right:0;top:19px;height:5px;border-radius:99px;background:#DCE5F0}
.price-range-track span{position:absolute;top:0;bottom:0;border-radius:99px;background:#0A5CD8}
.price-range{position:absolute;left:0;top:8px;width:100%;height:26px;background:transparent;pointer-events:none;appearance:none}
.price-range::-webkit-slider-thumb{appearance:none;width:17px;height:17px;border-radius:50%;background:#fff;border:4px solid #0A5CD8;box-shadow:0 2px 8px rgba(10,92,216,.25);pointer-events:auto;cursor:pointer}
.price-range::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#fff;border:4px solid #0A5CD8;pointer-events:auto;cursor:pointer}
.price-presets{display:grid;grid-template-columns:1fr;gap:6px;padding:2px 15px 12px}
.price-presets button{
height:36px;border:1px solid #D9E3EF;border-radius:8px;background:#fff;
text-align:left;padding:0 11px;color:#425979;font-size:11px;font-weight:650
}
.price-presets button:hover,
.price-presets button.active{border-color:#0A5CD8;background:#EEF4FF;color:#0A5CD8}
.apply-price-filter{
margin:0 15px 15px;width:calc(100% - 30px);height:43px;border:0;border-radius:8px;
background:#0A5CD8;color:#fff;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;gap:8px
}
.apply-price-filter:hover{background:#0849AD;transform:translateY(-2px)}
@media(max-width:700px){
.product-card.section--clip-br{border-radius:16px;padding-bottom:84px}
.product-card.section--clip-br .card-actions{grid-template-columns:1fr}
.product-card.section--clip-br .card-actions .primary{left:17px;right:17px;bottom:16px;width:auto}
}
/* =========================================================
V11 D?ZELTMELER?
========================================================= */
/* Native select yerine tamamen stillendirilebilir dropdown. */
.custom-select{position:relative;width:100%}
.custom-select-trigger{
width:100%;height:48px;border:1px solid rgba(113,161,224,.22);border-radius:8px;
background:#0C3B77;color:#fff;padding:0 13px;display:flex;align-items:center;
justify-content:space-between;gap:10px;font-size:13px;font-weight:700;text-align:left;
box-shadow:none;transform:none
}
.custom-select-trigger:hover{background:#104485;border-color:rgba(103,163,243,.55);transform:none}
.custom-select-trigger:focus-visible{outline:3px solid rgba(76,145,241,.24);outline-offset:2px}
.custom-select-trigger:disabled{opacity:.45;cursor:not-allowed}
.custom-select-trigger svg{width:16px;transition:transform .16s ease}
.custom-select.open .custom-select-trigger svg{transform:rotate(180deg)}
.custom-select-menu{
position:absolute;z-index:90;left:0;right:0;top:calc(100% + 6px);display:none;
max-height:240px;overflow:auto;padding:6px;background:#fff;border:1px solid #D6E0EC;
border-radius:10px;box-shadow:0 18px 38px rgba(2,22,50,.22)
}
.custom-select.open .custom-select-menu{display:block;animation:dropdownIn .14s ease}
.custom-select-sheet-header{display:none}
.custom-select-options{display:contents}
@keyframes dropdownIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.custom-select-option{
width:100%;min-height:39px;border:0;border-radius:7px;background:#fff;color:#203B60;
padding:8px 10px;display:flex;align-items:center;justify-content:space-between;text-align:left;
font-size:13px;font-weight:600;transform:none!important;box-shadow:none!important
}
.custom-select-option:hover{background:#EEF4FF;color:#0A5CD8}
.custom-select-option.selected{background:#0A5CD8;color:#fff}
.custom-select-option svg{width:15px}
/* Hero marka logosu se?ime g?re de?i?ir. */
/* Uyumluluk panelinde clip-path yok. ?entik i?eriden oyulur, sa? platform kal?r. */
/* ?r?n kart?: d??ar? ta?an tab kald?r?ld?, kesik kart?n i?ine do?ru. */
.product-card.section--clip-br{
clip-path:none!important;overflow:hidden!important;border-radius:16px!important;border:0!important;
padding-bottom:102px!important;min-height:365px;background:#fff;box-shadow:0 14px 32px rgba(8,41,85,.065);
transform:none!important
}
.product-card.section--clip-br::before{display:none!important}
.product-card.section--clip-br::after{
display:block!important;content:"";position:absolute;z-index:4;left:-2px;bottom:-2px;
width:calc(100% - 252px);height:95px;background-color:transparent;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='%23F4F6F8' d='M0 0H120C285 0 355 16 470 59C555 90 670 100 1000 100H0Z'/%3E%3C/svg%3E");
background-size:100% 100%;background-repeat:no-repeat;pointer-events:none
}
.product-card.section--clip-br:hover{transform:none!important;box-shadow:0 14px 32px rgba(8,41,85,.085)}
.product-card.section--clip-br .card-actions{position:static;grid-template-columns:1fr 1fr;padding:0;min-height:48px}
.product-card.section--clip-br .card-actions .primary{
position:absolute;z-index:9;right:18px;bottom:15px;width:220px;height:52px;
transform:none!important;box-shadow:none!important;transition:background-color .15s ease,border-color .15s ease
}
.product-card.section--clip-br .card-actions .primary:hover{background:#0849AD;transform:none!important;box-shadow:none!important}
.product-visual{background:transparent!important}
.product-visual img,
.product-card:hover .product-visual img{transform:none!important;filter:drop-shadow(0 9px 12px rgba(8,41,85,.10))!important}
/* Alt kategori kartlar? b?y?mez, g?lge yapmaz. */
.subcategory-chip{
transform:none!important;box-shadow:none!important;background:#fff!important;
border:1px solid #D7E0EA!important;transition:border-color .15s ease,background-color .15s ease!important
}
.subcategory-chip:hover{transform:none!important;box-shadow:none!important;border-color:#0A5CD8!important;background:#fff!important}
.subcategory-chip.active{
transform:none!important;box-shadow:none!important;border-color:#0A5CD8!important;
background:linear-gradient(90deg,#EAF2FF,#F9FBFF)!important
}
.subcategory-arrow{box-shadow:none!important;transform:none!important}
.subcategory-arrow:hover{transform:none!important;border-color:#0A5CD8}
/* Üst açıklama doğrudan görünür. Alt SEO bloğu daraltılabilir kalır. */
.category-intro-copy{max-height:none!important;overflow:visible!important}
.category-intro-copy::after{display:none!important}
@media(max-width:1200px){
.product-card.section--clip-br::after{width:calc(100% - 215px)}
.product-card.section--clip-br .card-actions .primary{width:190px}
}
@media(max-width:700px){
.product-card.section--clip-br{padding-bottom:86px!important}
.product-card.section--clip-br::after{display:none!important}
.product-card.section--clip-br .card-actions{grid-template-columns:1fr}
.product-card.section--clip-br .card-actions .primary{left:17px;right:17px;bottom:16px;width:auto}
}
/* =========================================================
V12 SON D?ZEN: VER?LEN CLIP-PATH ?LE GER?EK SA?-ALT TAB
========================================================= */
/* Verilen section--clip-br geometrisinin bu projeye uyarlanm?? hali. */
/* Uyum filtresi: koyu ana g?vde + sa?-alt tab. */
/* ?r?n kart?: verilen ayn? sa?-alt tab ve buton tab?n ?zerinde. */
.product-card.section--clip-br{
overflow:hidden!important;
border:0!important;
border-radius:0!important;
margin-top:0!important;
min-height:414px!important;
padding-bottom:116px!important;
background:#fff!important;
box-shadow:0 14px 32px rgba(8,41,85,.065)!important;
transform:none!important;
}
.product-card.section--clip-br::before,
.product-card.section--clip-br::after{display:none!important}
.product-card.section--clip-br:hover{
transform:none!important;
box-shadow:0 16px 36px rgba(8,41,85,.09)!important;
}
.product-card.section--clip-br .card-actions{
position:static!important;
grid-column:1/-1!important;
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:8px!important;
min-height:48px!important;
padding:0!important;
}
.product-card.section--clip-br .card-actions .primary{
position:absolute!important;
z-index:9!important;
right:18px!important;
bottom:14px!important;
width:238px!important;
height:52px!important;
border-radius:8px!important;
transform:none!important;
box-shadow:none!important;
overflow:hidden;
background:linear-gradient(100deg,#0A5CD8,#0849AD,#0A5CD8)!important;
background-size:220% 100%!important;
background-position:0 0!important;
transition:background-position .28s ease,filter .18s ease!important;
}
.product-card.section--clip-br .card-actions .primary:hover{
transform:none!important;
box-shadow:none!important;
background-position:100% 0!important;
filter:brightness(1.04);
}
.product-card.section--clip-br .card-actions .primary svg{transition:transform .2s ease}
.product-card.section--clip-br .card-actions .primary:hover svg{transform:translateX(3px) rotate(-5deg)}
.product-card.section--clip-br .product-visual img,
.product-card.section--clip-br:hover .product-visual img{transform:none!important}
@media(max-width:760px){
.product-card.section--clip-br{border-radius:16px!important;padding-bottom:86px!important;min-height:0!important}
.product-card.section--clip-br .card-actions{grid-template-columns:1fr!important}
.product-card.section--clip-br .card-actions .primary{left:17px!important;right:17px!important;bottom:16px!important;width:auto!important}
}
/* Specificity fix: V11'deki clip-path:none kural?n? kesin olarak ge?ersiz k?lar. */
.product-card.section--clip-br{
clip-path: polygon(
calc(100% - 1rem) 0.06rem,
1rem 0.06rem,
0.85rem 0.08rem,
0.71rem 0.11rem,
0.58rem 0.17rem,
0.45rem 0.25rem,
0.34rem 0.34rem,
0.25rem 0.45rem,
0.17rem 0.58rem,
0.11rem 0.71rem,
0.08rem 0.85rem,
0.06rem 1rem,
0.06rem calc(100% - 4.88rem),
0.08rem calc(100% - 4.73rem),
0.11rem calc(100% - 4.59rem),
0.17rem calc(100% - 4.45rem),
0.25rem calc(100% - 4.33rem),
0.34rem calc(100% - 4.22rem),
0.45rem calc(100% - 4.12rem),
0.58rem calc(100% - 4.05rem),
0.71rem calc(100% - 3.99rem),
0.85rem calc(100% - 3.95rem),
1rem calc(100% - 3.94rem),
calc(100% - 24.83rem) calc(100% - 3.94rem),
calc(100% - 24.31rem) calc(100% - 3.78rem),
calc(100% - 23.81rem) calc(100% - 3.46rem),
calc(100% - 23.32rem) calc(100% - 3.02rem),
calc(100% - 22.85rem) calc(100% - 2.49rem),
calc(100% - 22.40rem) calc(100% - 1.93rem),
calc(100% - 21.96rem) calc(100% - 1.37rem),
calc(100% - 21.54rem) calc(100% - 0.86rem),
calc(100% - 21.14rem) calc(100% - 0.45rem),
calc(100% - 20.75rem) calc(100% - 0.17rem),
calc(100% - 20.39rem) calc(100% - 0.06rem),
calc(100% - 1rem) calc(100% - 0.06rem),
calc(100% - 0.85rem) calc(100% - 0.08rem),
calc(100% - 0.71rem) calc(100% - 0.11rem),
calc(100% - 0.58rem) calc(100% - 0.17rem),
calc(100% - 0.45rem) calc(100% - 0.25rem),
calc(100% - 0.34rem) calc(100% - 0.34rem),
calc(100% - 0.25rem) calc(100% - 0.45rem),
calc(100% - 0.17rem) calc(100% - 0.58rem),
calc(100% - 0.11rem) calc(100% - 0.71rem),
calc(100% - 0.08rem) calc(100% - 0.85rem),
calc(100% - 0.06rem) calc(100% - 1rem),
calc(100% - 0.06rem) 1rem,
calc(100% - 0.07rem) 0.85rem,
calc(100% - 0.11rem) 0.71rem,
calc(100% - 0.16rem) 0.58rem,
calc(100% - 0.24rem) 0.45rem,
calc(100% - 0.33rem) 0.34rem,
calc(100% - 0.44rem) 0.25rem,
calc(100% - 0.56rem) 0.17rem,
calc(100% - 0.70rem) 0.11rem,
calc(100% - 0.85rem) 0.08rem
)!important;
}
@media(max-width:760px){
.product-card.section--clip-br{clip-path:none!important}
}
/* =========================================================
V13: ??k?nt? ?st?nde buton + ?r?nlerde 3 buton yan yana
========================================================= */
/* Filtre paneli: buton tam sa?-alt ??k?nt?n?n ?st?nde */
/* ?r?n kart?: 3 buton ayn? sat?rda, sadece mavi buton sa?-alttaki ??k?nt?n?n ?st?nde */
.product-card.section--clip-br{
min-height:392px!important;
padding-bottom:28px!important;
clip-path: polygon(
calc(100% - 1rem) 0.06rem,
1rem 0.06rem,
0.85rem 0.08rem,
0.71rem 0.11rem,
0.58rem 0.17rem,
0.45rem 0.25rem,
0.34rem 0.34rem,
0.25rem 0.45rem,
0.17rem 0.58rem,
0.11rem 0.71rem,
0.08rem 0.85rem,
0.06rem 1rem,
0.06rem calc(100% - 1rem),
0.08rem calc(100% - 0.85rem),
0.11rem calc(100% - 0.71rem),
0.17rem calc(100% - 0.58rem),
0.25rem calc(100% - 0.45rem),
0.34rem calc(100% - 0.34rem),
0.45rem calc(100% - 0.25rem),
0.58rem calc(100% - 0.17rem),
0.71rem calc(100% - 0.11rem),
0.85rem calc(100% - 0.08rem),
1rem calc(100% - 0.06rem),
calc(100% - 24.25rem) calc(100% - 0.06rem),
calc(100% - 23.78rem) calc(100% - 0.18rem),
calc(100% - 23.34rem) calc(100% - 0.45rem),
calc(100% - 22.91rem) calc(100% - 0.84rem),
calc(100% - 22.48rem) calc(100% - 1.30rem),
calc(100% - 22.05rem) calc(100% - 1.80rem),
calc(100% - 21.62rem) calc(100% - 2.30rem),
calc(100% - 21.18rem) calc(100% - 2.77rem),
calc(100% - 20.72rem) calc(100% - 3.17rem),
calc(100% - 20.24rem) calc(100% - 3.46rem),
calc(100% - 19.75rem) calc(100% - 3.60rem),
calc(100% - 1rem) calc(100% - 3.60rem),
calc(100% - 0.85rem) calc(100% - 3.62rem),
calc(100% - 0.71rem) calc(100% - 3.66rem),
calc(100% - 0.58rem) calc(100% - 3.72rem),
calc(100% - 0.45rem) calc(100% - 3.80rem),
calc(100% - 0.34rem) calc(100% - 3.90rem),
calc(100% - 0.25rem) calc(100% - 4.01rem),
calc(100% - 0.17rem) calc(100% - 4.15rem),
calc(100% - 0.11rem) calc(100% - 4.29rem),
calc(100% - 0.08rem) calc(100% - 4.44rem),
calc(100% - 0.06rem) calc(100% - 4.60rem),
calc(100% - 0.06rem) 1rem,
calc(100% - 0.07rem) 0.85rem,
calc(100% - 0.11rem) 0.71rem,
calc(100% - 0.16rem) 0.58rem,
calc(100% - 0.24rem) 0.45rem,
calc(100% - 0.33rem) 0.34rem,
calc(100% - 0.44rem) 0.25rem,
calc(100% - 0.56rem) 0.17rem,
calc(100% - 0.70rem) 0.11rem,
calc(100% - 0.85rem) 0.08rem
)!important;
}
.product-card.section--clip-br .card-actions{
position:static!important;
display:grid!important;
grid-template-columns:1fr 1fr 240px!important;
align-items:end!important;
gap:8px!important;
min-height:56px!important;
padding:0!important;
margin-top:10px!important;
}
.product-card.section--clip-br .card-actions .primary{
position:relative!important;
right:auto!important;
left:auto!important;
bottom:auto!important;
width:100%!important;
height:50px!important;
align-self:end!important;
justify-self:stretch!important;
border-radius:8px!important;
background:#0A5CD8!important;
transition:background-color .18s ease, filter .18s ease!important;
}
.product-card.section--clip-br .card-actions .primary:hover{
transform:none!important;
box-shadow:none!important;
background:#0849AD!important;
filter:brightness(1.02);
}
.product-card.section--clip-br .card-actions .primary svg{
transition:transform .15s ease!important;
}
.product-card.section--clip-br .card-actions .primary:hover svg{
transform:translateX(2px)!important;
}
.product-card.section--clip-br .card-actions button:hover,
.product-card.section--clip-br .card-actions a:hover{
transform:none!important;
box-shadow:none!important;
border-color:#0A5CD8!important;
background:#F8FBFF!important;
}
@media(max-width:980px){
.product-card.section--clip-br .card-actions{
grid-template-columns:1fr 1fr!important;
row-gap:8px!important;
}
.product-card.section--clip-br .card-actions .primary{
grid-column:1/-1!important;
}
}
@media(max-width:760px){
.product-card.section--clip-br{
clip-path:none!important;
border-radius:16px!important;
}
.product-card.section--clip-br{
padding-bottom:24px!important;
}
.product-card.section--clip-br .card-actions{
grid-template-columns:1fr!important;
}
}
/* =========================================================
V14: filtre butonu daha a?a?? + ?r?n ??k?nt?s? daralt?ld?
========================================================= */
/* Filtreleme k?sm?: Uygula butonu daha a?a??, ??k?nt?n?n ?st?ne tam otursun */
/* ?r?n kart?: ??k?nt? sadece mavi buton alan?nda kals?n */
.product-card.section--clip-br{
min-height: 394px !important;
padding-bottom: 24px !important;
overflow: hidden !important;
clip-path: polygon(
calc(100% - 1rem) 0.06rem,
1rem 0.06rem,
0.85rem 0.08rem,
0.71rem 0.11rem,
0.58rem 0.17rem,
0.45rem 0.25rem,
0.34rem 0.34rem,
0.25rem 0.45rem,
0.17rem 0.58rem,
0.11rem 0.71rem,
0.08rem 0.85rem,
0.06rem 1rem,
0.06rem calc(100% - 1rem),
0.08rem calc(100% - 0.85rem),
0.11rem calc(100% - 0.71rem),
0.17rem calc(100% - 0.58rem),
0.25rem calc(100% - 0.45rem),
0.34rem calc(100% - 0.34rem),
0.45rem calc(100% - 0.25rem),
0.58rem calc(100% - 0.17rem),
0.71rem calc(100% - 0.11rem),
0.85rem calc(100% - 0.08rem),
1rem calc(100% - 0.06rem),
calc(100% - 16.4rem) calc(100% - 0.06rem),
calc(100% - 15.95rem) calc(100% - 0.16rem),
calc(100% - 15.55rem) calc(100% - 0.38rem),
calc(100% - 15.14rem) calc(100% - 0.70rem),
calc(100% - 14.74rem) calc(100% - 1.10rem),
calc(100% - 14.35rem) calc(100% - 1.56rem),
calc(100% - 13.95rem) calc(100% - 2.02rem),
calc(100% - 13.55rem) calc(100% - 2.46rem),
calc(100% - 13.13rem) calc(100% - 2.83rem),
calc(100% - 12.70rem) calc(100% - 3.12rem),
calc(100% - 12.25rem) calc(100% - 3.30rem),
calc(100% - 11.80rem) calc(100% - 3.38rem),
calc(100% - 1rem) calc(100% - 3.38rem),
calc(100% - 0.85rem) calc(100% - 3.40rem),
calc(100% - 0.71rem) calc(100% - 3.44rem),
calc(100% - 0.58rem) calc(100% - 3.50rem),
calc(100% - 0.45rem) calc(100% - 3.58rem),
calc(100% - 0.34rem) calc(100% - 3.68rem),
calc(100% - 0.25rem) calc(100% - 3.79rem),
calc(100% - 0.17rem) calc(100% - 3.92rem),
calc(100% - 0.11rem) calc(100% - 4.06rem),
calc(100% - 0.08rem) calc(100% - 4.20rem),
calc(100% - 0.06rem) calc(100% - 4.35rem),
calc(100% - 0.06rem) 1rem,
calc(100% - 0.07rem) 0.85rem,
calc(100% - 0.11rem) 0.71rem,
calc(100% - 0.16rem) 0.58rem,
calc(100% - 0.24rem) 0.45rem,
calc(100% - 0.33rem) 0.34rem,
calc(100% - 0.44rem) 0.25rem,
calc(100% - 0.56rem) 0.17rem,
calc(100% - 0.70rem) 0.11rem,
calc(100% - 0.85rem) 0.08rem
) !important;
}
/* 3 buton yan yana, mavi buton ?nde ve tam otursun */
.product-card.section--clip-br .card-actions{
position: relative !important;
z-index: 20 !important;
overflow: visible !important;
display: grid !important;
grid-template-columns: minmax(0,1fr) minmax(0,1fr) 244px !important;
column-gap: 10px !important;
row-gap: 8px !important;
align-items: end !important;
margin-top: 10px !important;
}
.product-card.section--clip-br .card-actions > :nth-child(1),
.product-card.section--clip-br .card-actions > :nth-child(2){
position: relative;
z-index: 10;
}
.product-card.section--clip-br .card-actions > :nth-child(2){
margin-right: 10px !important;
}
.product-card.section--clip-br .card-actions .primary{
position: relative !important;
z-index: 40 !important;
width: 244px !important;
height: 50px !important;
right: auto !important;
left: auto !important;
bottom: auto !important;
justify-self: stretch !important;
align-self: end !important;
overflow: visible !important;
box-shadow: none !important;
}
.product-card.section--clip-br .card-actions .primary:hover{
transform:none !important;
box-shadow:none !important;
background:#0849AD !important;
filter:brightness(1.02);
}
/* K???k ekran */
@media(max-width:980px){
.product-card.section--clip-br .card-actions{
grid-template-columns: 1fr 1fr !important;
}
.product-card.section--clip-br .card-actions > :nth-child(2){
margin-right: 0 !important;
}
.product-card.section--clip-br .card-actions .primary{
grid-column: 1 / -1 !important;
width: 100% !important;
}
}
@media(max-width:760px){
.product-card.section--clip-br{
clip-path:none !important;
border-radius:16px !important;
}
.product-card.section--clip-br .card-actions{
grid-template-columns:1fr !important;
}
}
/* =========================================================
V18: V14 tasar?m? korunarak sadece CTA'lar absolute yap?ld?
Kullan?c?n?n ?izdi?i konuma g?re butonlar ?enti?in i?ine al?nd?
========================================================= */
/* Filtre paneli */
/* ?r?n kart? */
.product-card.section--clip-br{
position:relative !important;
padding-bottom:24px !important;
min-height:394px !important;
}
.product-card.section--clip-br .card-actions{
position:relative !important;
z-index:10 !important;
display:grid !important;
grid-template-columns:1fr 1fr !important;
column-gap:10px !important;
row-gap:8px !important;
padding-right:264px !important; /* mavi buton/notch alan? */
margin-top:10px !important;
overflow:visible !important;
}
.product-card.section--clip-br .card-actions .primary{
position:absolute !important;
right:18px !important;
bottom:-4px !important;
left:auto !important;
top:auto !important;
width:244px !important;
height:50px !important;
z-index:30 !important;
transform:none !important;
box-shadow:none !important;
}
.product-card.section--clip-br .card-actions .primary:hover,
.product-card.section--clip-br .card-actions .primary:active{
transform:none !important;
box-shadow:none !important;
filter:brightness(1.02);
}
.product-card.section--clip-br .card-actions button:not(.primary):hover,
.product-card.section--clip-br .card-actions a:hover{
transform:none !important;
box-shadow:none !important;
}
/* Filtre butonlar?nda animasyon olmas?n */
.brand-filter-card button,
.price-filter-card button,
.filter-card-heading button,
.price-presets button,
.apply-price-filter,
.all-categories,
.brand-option{
transition:background-color .15s ease,border-color .15s ease,color .15s ease !important;
transform:none !important;
box-shadow:none !important;
}
.brand-filter-card button:hover,
.price-filter-card button:hover,
.filter-card-heading button:hover,
.price-presets button:hover,
.price-presets button.active,
.apply-price-filter:hover,
.all-categories:hover,
.brand-option:hover{
transform:none !important;
box-shadow:none !important;
}
@media (max-width:980px){
.product-card.section--clip-br .card-actions{
grid-template-columns:1fr 1fr !important;
padding-right:0 !important;
padding-bottom:66px !important;
}
.product-card.section--clip-br .card-actions .primary{
right:18px !important;
left:18px !important;
width:auto !important;
bottom:10px !important;
}
}
@media (max-width:760px){
.product-card.section--clip-br{
clip-path:none !important;
border-radius:16px !important;
padding-bottom:20px !important;
}
.product-card.section--clip-br .card-actions{
grid-template-columns:1fr !important;
padding-right:0 !important;
padding-bottom:0 !important;
}
.product-card.section--clip-br .card-actions .primary{
position:relative !important;
right:auto !important;
left:auto !important;
bottom:auto !important;
width:100% !important;
}
}
/* =========================================================
V20: ?r?n kart? ve filtre paneli referans g?rsele g?re d?zeltildi
========================================================= */
/* ---------------------------------------------------------
F?LTRE PANEL?
Referanstaki gibi b?y?k lacivert panel:
- Alanlar ?stte
- Sol alttan beyaz oyuk
- Mavi buton sa?-alt platformda
--------------------------------------------------------- */
/* ---------------------------------------------------------
?R?N KARTI
Referanstaki gibi:
- B?y?k beyaz kart
- Mavi buton sa?-alt platformda
- Sol alttaki beyaz alan i?e do?ru oymal?
- Di?er iki buton solda yan yana
--------------------------------------------------------- */
.product-card.section--clip-br{
position:relative!important;
isolation:isolate!important;
overflow:hidden!important;
clip-path:none!important;
border:0!important;
border-radius:18px!important;
min-height:400px!important;
padding:22px 22px 30px!important;
background:#fff!important;
box-shadow:0 18px 42px rgba(8,41,85,.075)!important;
display:grid!important;
grid-template-columns:220px 1fr!important;
grid-template-rows:1fr auto!important;
}
.product-card.section--clip-br::before{
display:none!important;
}
/* Kart i?indeki alt platform: soldaki b?l?m zemine a??l?r, sa?da mavi butonun platformu kal?r */
.product-card.section--clip-br::after{
content:""!important;
position:absolute!important;
left:0!important;
bottom:0!important;
width:calc(100% - 292px)!important;
height:92px!important;
background:#F4F6F8!important;
z-index:1!important;
pointer-events:none!important;
clip-path:polygon(
0 0,
calc(100% - 134px) 0,
calc(100% - 116px) 2px,
calc(100% - 100px) 9px,
calc(100% - 86px) 20px,
calc(100% - 72px) 36px,
calc(100% - 58px) 54px,
calc(100% - 43px) 70px,
calc(100% - 25px) 84px,
100% 92px,
0 92px
)!important;
}
.product-card.section--clip-br>*{
position:relative!important;
z-index:3!important;
}
.product-card.section--clip-br:hover{
transform:none!important;
box-shadow:0 18px 42px rgba(8,41,85,.09)!important;
}
.product-card.section--clip-br .product-visual img,
.product-card.section--clip-br:hover .product-visual img{
transform:none!important;
filter:drop-shadow(0 9px 12px rgba(8,41,85,.10))!important;
}
.product-card.section--clip-br .card-actions{
grid-column:1/-1!important;
position:relative!important;
z-index:5!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:10px!important;
padding-right:304px!important;
margin-top:14px!important;
min-height:58px!important;
overflow:visible!important;
}
.product-card.section--clip-br .card-actions button:not(.primary),
.product-card.section--clip-br .card-actions a{
height:52px!important;
border-radius:10px!important;
background:#fff!important;
transform:none!important;
box-shadow:none!important;
}
.product-card.section--clip-br .card-actions button:not(.primary):hover,
.product-card.section--clip-br .card-actions a:hover{
transform:none!important;
box-shadow:none!important;
border-color:#0A5CD8!important;
background:#F8FBFF!important;
}
.product-card.section--clip-br .card-actions .primary{
position:absolute!important;
right:18px!important;
bottom:0!important;
width:258px!important;
height:52px!important;
border-radius:10px!important;
z-index:8!important;
background:linear-gradient(135deg,#0A5CD8,#0B65EC)!important;
box-shadow:none!important;
transform:none!important;
transition:filter .16s ease,background-color .16s ease!important;
}
.product-card.section--clip-br .card-actions .primary:hover,
.product-card.section--clip-br .card-actions .primary:active{
transform:none!important;
box-shadow:none!important;
filter:brightness(1.04)!important;
}
@media(max-width:980px){
.product-card.section--clip-br{
grid-template-columns:170px 1fr!important;
}
.product-card.section--clip-br::after{
display:none!important;
}
.product-card.section--clip-br .card-actions{
grid-template-columns:1fr 1fr!important;
padding-right:0!important;
padding-bottom:70px!important;
}
.product-card.section--clip-br .card-actions .primary{
left:18px!important;
right:18px!important;
width:auto!important;
bottom:0!important;
}
}
@media(max-width:760px){
.product-card.section--clip-br{
grid-template-columns:1fr!important;
min-height:auto!important;
}
.product-card.section--clip-br .card-actions{
grid-template-columns:1fr!important;
padding-bottom:70px!important;
}
}
/* =========================================================
V21: Uyumluluk butonu grid d???na al?nd? ve ?entik g?r?n?r yap?ld?
========================================================= */
#compatibilityPanel{
position: relative !important;
overflow: hidden !important;
}
/* Form absolute butona referans olsun */
/* Button art?k gridin i?inde de?il; panelin alt-sa??ndaki platformda */
/* ?entik daha g?r?n?r olsun */
/* =========================================================
V22: Buton g?r?n?r hale getirildi ve ?entik tasar?m? sabitlendi
========================================================= */
#compatibilityPanel{
position:relative!important;
overflow:hidden!important;
}
/* Referans g?rseldeki gibi panel */
/* Eski pseudo kurallar? bast?r */
/* Sol alttaki b?y?k beyaz oyuk/?entik */
/* =========================================================
V23: Kullan?c?n?n son referans?na g?re filtre paneli birebir yakla?t?r?ld?
========================================================= */
/* sol-alttaki beyaz b?y?k alan ve sa?daki dark platform: referans 2. g?rsel */
/* =========================================================
V24: Referans filtre paneli
========================================================= */
/* Eski ?entik katmanlar? kapat?l?r. */
/* Referanstaki sol-alt beyaz kesik alan. */
/* Buton formun d???nda, do?rudan compatibilityPanel'in i?indedir. */
/* =========================================================
V25 - spacing, product card, logo badge, side CTA
========================================================= */
/* Filtre panelindeki bo?luklar? azalt ve butonu k???lt */
/* Hero / marka logosu ger?ek g?r?ns?n ve badge i?inde ta?mas?n */
/* ?r?n kart?n? referanstaki gibi s?k? ve dengeli yap */
.product-card.section--clip-br{
position:relative !important;
display:grid !important;
grid-template-columns:220px 1fr !important;
gap:28px !important;
min-height:372px !important;
padding:22px 22px 104px !important;
border:1px solid rgba(8,41,85,.10) !important;
border-radius:20px !important;
background:#fff !important;
box-shadow:none !important;
overflow:hidden !important;
}
.product-card.section--clip-br::before{
display:none !important;
}
.product-card.section--clip-br::after{
content:"" !important;
display:block !important;
position:absolute !important;
right:0 !important;
bottom:0 !important;
width:255px !important;
height:92px !important;
background:#f4f6f8 !important;
pointer-events:none !important;
z-index:1 !important;
clip-path:polygon(
0 0,
72% 0,
80% 2%,
86% 10%,
91% 22%,
95% 40%,
98% 61%,
100% 100%,
0 100%
) !important;
}
.product-card.section--clip-br > *{
position:relative !important;
z-index:2 !important;
}
.product-card.section--clip-br:hover{
transform:none !important;
box-shadow:none !important;
border-color:rgba(8,41,85,.10) !important;
}
.product-visual{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:flex-start !important;
gap:18px !important;
padding-top:6px !important;
}
.product-visual .category-pill{
padding:8px 18px !important;
font-size:14px !important;
font-weight:700 !important;
border-radius:999px !important;
background:#eaf1ff !important;
color:#0a5cd8 !important;
}
.product-visual img,
.product-card:hover .product-visual img{
width:100% !important;
max-width:180px !important;
height:195px !important;
object-fit:contain !important;
margin:0 auto !important;
transform:none !important;
filter:drop-shadow(0 8px 12px rgba(8,41,85,.10)) !important;
}
.product-info{
display:grid !important;
grid-template-columns:1fr 160px !important;
grid-template-areas:
"title fav"
"meta meta"
"line line"
"compat price" !important;
column-gap:18px !important;
row-gap:10px !important;
align-content:start !important;
padding-right:6px !important;
}
.product-info h3{
grid-area:title !important;
margin:4px 0 6px !important;
color:#082955 !important;
font-size:24px !important;
line-height:1.2 !important;
font-weight:800 !important;
}
.product-info p{
margin:0 !important;
color:#74839a !important;
font-size:14px !important;
line-height:1.65 !important;
}
.product-info p:nth-of-type(1),
.product-info p:nth-of-type(2),
.product-info p:nth-of-type(3){
grid-column:1 / span 2 !important;
}
.product-info .price{
grid-area:price !important;
display:flex !important;
flex-direction:column !important;
align-items:flex-end !important;
justify-content:flex-end !important;
min-height:54px !important;
padding-top:12px !important;
border-top:1px solid #dce4ef !important;
}
.product-info .price span{
color:#74839a !important;
font-size:14px !important;
margin-bottom:2px !important;
}
.product-info .price strong{
color:#0A5CD8 !important;
font-size:28px !important;
line-height:1 !important;
font-weight:800 !important;
}
.product-card .favorite{
top:18px !important;
right:18px !important;
background:transparent !important;
box-shadow:none !important;
}
/* Alt butonlar */
.product-card.section--clip-br .card-actions{
position:absolute !important;
left:18px !important;
right:18px !important;
bottom:18px !important;
display:grid !important;
grid-template-columns:1fr 1fr auto !important;
align-items:end !important;
gap:12px !important;
min-height:64px !important;
padding:0 !important;
z-index:3 !important;
}
.product-card.section--clip-br .card-actions > :nth-child(1),
.product-card.section--clip-br .card-actions > :nth-child(2){
height:50px !important;
}
.product-card.section--clip-br .card-actions button:not(.primary),
.product-card.section--clip-br .card-actions a{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
padding:0 18px !important;
border-radius:12px !important;
border:1px solid #b9cdf7 !important;
background:#fff !important;
color:#0A5CD8 !important;
font-size:14px !important;
font-weight:700 !important;
text-decoration:none !important;
box-shadow:none !important;
transform:none !important;
}
.product-card.section--clip-br .card-actions a{
color:#22c55e !important;
border-color:#bdeacb !important;
}
.product-card.section--clip-br .card-actions button:not(.primary):hover,
.product-card.section--clip-br .card-actions a:hover{
transform:none !important;
box-shadow:none !important;
filter:brightness(.99) !important;
}
.product-card.section--clip-br .card-actions .primary{
width:276px !important;
height:54px !important;
border-radius:14px !important;
border:1px solid #2b78ea !important;
background:#0A5CD8 !important;
color:#fff !important;
font-size:14px !important;
font-weight:800 !important;
box-shadow:none !important;
transform:none !important;
}
.product-card.section--clip-br .card-actions .primary:hover{
transform:none !important;
box-shadow:none !important;
background:#0954c6 !important;
}
.product-card.section--clip-br .card-actions .primary svg{
transition:none !important;
}
.product-card.section--clip-br .card-actions .primary:hover svg{
transform:none !important;
}
/* Toptan avantaj kart?ndaki butonu di?er butonlar gibi yap */
.wholesale-card .offer-button{
width:100% !important;
height:50px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
border-radius:12px !important;
border:1px solid #b9cdf7 !important;
background:#fff !important;
color:#0A5CD8 !important;
font-size:14px !important;
font-weight:800 !important;
box-shadow:none !important;
transform:none !important;
}
.wholesale-card .offer-button:hover{
transform:none !important;
box-shadow:none !important;
filter:brightness(.99) !important;
}
/* Responsive */
@media (max-width: 1280px){
.product-card.section--clip-br{
grid-template-columns:190px 1fr !important;
}
.product-card.section--clip-br .card-actions{
grid-template-columns:1fr 1fr !important;
}
.product-card.section--clip-br .card-actions .primary{
grid-column:1 / -1 !important;
width:100% !important;
}
}
@media (max-width: 760px){
.product-card.section--clip-br{
grid-template-columns:1fr !important;
gap:16px !important;
padding:18px 18px 96px !important;
}
.product-info{
grid-template-columns:1fr !important;
grid-template-areas:none !important;
}
.product-info h3,
.product-info p,
.product-info .price{
grid-area:auto !important;
grid-column:auto !important;
}
.product-info .price{
align-items:flex-start !important;
}
.product-card.section--clip-br .card-actions{
grid-template-columns:1fr !important;
}
.product-card.section--clip-br .card-actions .primary{
width:100% !important;
}
}
/* =========================================================
V26 - ?r?n kart?nda ?entik kald?rma + filtre alt beyaz alan
========================================================= */
/* ?r?n kart?: kullan?c? referans?ndaki gibi d?z kart, ?entik yok */
.product-card.section--clip-br{
clip-path:none !important;
overflow:hidden !important;
min-height:356px !important;
padding:22px 22px 20px !important;
border-radius:20px !important;
background:#ffffff !important;
box-shadow:none !important;
}
.product-card.section--clip-br::before,
.product-card.section--clip-br::after{
display:none !important;
content:none !important;
}
.product-card.section--clip-br .card-actions{
position:static !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
margin-top:18px !important;
display:grid !important;
grid-template-columns:1fr 1fr 1fr !important;
gap:12px !important;
align-items:stretch !important;
min-height:auto !important;
}
.product-card.section--clip-br .card-actions > *{
min-width:0 !important;
}
.product-card.section--clip-br .card-actions > :nth-child(1),
.product-card.section--clip-br .card-actions > :nth-child(2),
.product-card.section--clip-br .card-actions .primary{
height:50px !important;
width:100% !important;
}
.product-card.section--clip-br .card-actions .primary{
border-radius:12px !important;
box-shadow:none !important;
}
.product-card.section--clip-br .product-visual img{
max-width:170px !important;
height:185px !important;
}
.product-card.section--clip-br .product-info h3{
font-size:22px !important;
}
.product-card.section--clip-br .product-info .price strong{
font-size:27px !important;
}
/* Filtre paneli: alt beyaz alana radius ekle + bo?lu?u k?salt */
/* Panel i?indeki alt bo?lu?u daha kompakt yap */
@media (max-width: 1280px){
.product-card.section--clip-br .card-actions{
grid-template-columns:1fr 1fr !important;
}
.product-card.section--clip-br .card-actions .primary{
grid-column:1 / -1 !important;
}
}
@media (max-width: 760px){
.product-card.section--clip-br{
padding:18px !important;
}
.product-card.section--clip-br .card-actions{
grid-template-columns:1fr !important;
}
}
/* =========================================================
V27 - Kullan?c?n?n son 2 referans g?rseline g?re sadele?tirme
========================================================= */
/* 1) F?LTRE PANEL? ? sadece ilk g?rsel gibi */
/* 2) ?R?N KARTI ? sadece ikinci g?rsel gibi */
.product-card.section--clip-br{
clip-path:none !important;
overflow:hidden !important;
display:grid !important;
grid-template-columns:205px 1fr !important;
gap:24px !important;
min-height:360px !important;
padding:18px 20px 20px !important;
border:1px solid rgba(8,41,85,.08) !important;
border-radius:16px !important;
background:#fff !important;
box-shadow:none !important;
}
.product-card.section--clip-br::before,
.product-card.section--clip-br::after{
display:none !important;
content:none !important;
}
.product-card.section--clip-br:hover{
transform:none !important;
box-shadow:none !important;
}
.product-visual{
gap:14px !important;
padding-top:0 !important;
}
.product-visual .category-pill{
padding:7px 16px !important;
font-size:13px !important;
border-radius:999px !important;
background:#EAF1FF !important;
color:#0A5CD8 !important;
}
.product-card .favorite{
top:16px !important;
right:16px !important;
background:transparent !important;
box-shadow:none !important;
}
.product-card .favorite:hover{
transform:none !important;
}
.product-visual img,
.product-card:hover .product-visual img{
width:100% !important;
max-width:165px !important;
height:188px !important;
margin:2px auto 0 !important;
object-fit:contain !important;
transform:none !important;
filter:drop-shadow(0 8px 10px rgba(8,41,85,.08)) !important;
}
.product-info{
display:grid !important;
grid-template-columns:1fr 132px !important;
row-gap:10px !important;
column-gap:16px !important;
align-content:start !important;
padding-right:0 !important;
}
.product-info h3{
margin:2px 0 6px !important;
font-size:22px !important;
line-height:1.2 !important;
color:#082955 !important;
}
.product-info p{
margin:0 !important;
font-size:14px !important;
color:#74839a !important;
line-height:1.55 !important;
}
.product-info p:nth-of-type(1),
.product-info p:nth-of-type(2),
.product-info p:nth-of-type(3){
grid-column:1 / span 2 !important;
}
.product-info .price{
display:flex !important;
flex-direction:column !important;
align-items:flex-end !important;
justify-content:flex-end !important;
min-height:52px !important;
padding-top:12px !important;
border-top:1px solid #dce4ef !important;
}
.product-info .price span{
font-size:14px !important;
color:#74839a !important;
}
.product-info .price strong{
font-size:26px !important;
color:#0A5CD8 !important;
line-height:1 !important;
}
.product-card.section--clip-br .card-actions{
position:static !important;
margin-top:18px !important;
display:grid !important;
grid-template-columns:1fr 1fr 1fr !important;
gap:12px !important;
min-height:auto !important;
padding:0 !important;
}
.product-card.section--clip-br .card-actions > *{
height:50px !important;
min-width:0 !important;
}
.product-card.section--clip-br .card-actions button:not(.primary),
.product-card.section--clip-br .card-actions a{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
padding:0 14px !important;
border-radius:10px !important;
border:1px solid #b9cdf7 !important;
background:#fff !important;
color:#0A5CD8 !important;
box-shadow:none !important;
font-size:14px !important;
font-weight:700 !important;
}
.product-card.section--clip-br .card-actions a{
color:#22c55e !important;
border-color:#bdeacb !important;
}
.product-card.section--clip-br .card-actions .primary{
width:100% !important;
border-radius:10px !important;
border:1px solid #0A5CD8 !important;
background:#0A5CD8 !important;
color:#fff !important;
box-shadow:none !important;
font-size:14px !important;
font-weight:800 !important;
}
.product-card.section--clip-br .card-actions .primary:hover,
.product-card.section--clip-br .card-actions button:not(.primary):hover,
.product-card.section--clip-br .card-actions a:hover{
transform:none !important;
box-shadow:none !important;
filter:none !important;
}
@media (max-width: 760px){
.product-card.section--clip-br{
grid-template-columns:1fr !important;
}
.product-card.section--clip-br .card-actions{
grid-template-columns:1fr !important;
}
}
/* =========================================================
V28 - Son referans: d?z filtre paneli + yatay ?r?n kart?
========================================================= */
/* F?LTRE PANEL?: ?entik, kesik ve alt platform tamamen kald?r?ld?. */
#compatibilityPanel .custom-select{
position:relative!important;
width:100%!important;
}
#compatibilityPanel .custom-select-trigger{
width:100%!important;
height:48px!important;
padding:0 13px!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:10px!important;
border:1px solid rgba(113,161,224,.22)!important;
border-radius:7px!important;
background:#0C3B77!important;
color:#F7FAFF!important;
box-shadow:none!important;
transform:none!important;
text-align:left!important;
font-size:13px!important;
font-weight:700!important;
}
#compatibilityPanel .custom-select-trigger:hover,
#compatibilityPanel .custom-select-trigger:focus-visible{
border-color:rgba(103,163,243,.38)!important;
background:#104485!important;
box-shadow:none!important;
outline:none!important;
transform:none!important;
}
#compatibilityPanel .custom-select-trigger:disabled{
opacity:.48!important;
cursor:not-allowed!important;
}
#compatibilityPanel .custom-select-trigger svg{
width:16px!important;
height:16px!important;
}
#compatibilityPanel .custom-select-menu{
z-index:100!important;
}
/* ?R?N KARTI: referanstaki yatay, sade ve ?? butonlu d?zen. */
.product-card{
position:relative!important;
isolation:isolate!important;
overflow:hidden!important;
clip-path:none!important;
min-width:0!important;
min-height:394px!important;
padding:17px 17px 20px!important;
display:grid!important;
grid-template-columns:205px minmax(0,1fr)!important;
grid-template-rows:minmax(0,1fr) auto!important;
column-gap:23px!important;
row-gap:14px!important;
border:1px solid rgba(8,41,85,.06)!important;
border-radius:11px!important;
background:#fff!important;
box-shadow:none!important;
transform:none!important;
}
.product-card::before,
.product-card::after{
display:none!important;
content:none!important;
}
.product-card:hover{
border-color:rgba(8,41,85,.06)!important;
box-shadow:none!important;
transform:none!important;
}
.product-card>.favorite{
position:absolute!important;
z-index:8!important;
top:15px!important;
right:14px!important;
width:28px!important;
height:28px!important;
padding:4px!important;
border:0!important;
background:transparent!important;
color:#173A68!important;
box-shadow:none!important;
transform:none!important;
}
.product-card>.favorite:hover,
.product-card>.favorite.active{
box-shadow:none!important;
transform:none!important;
}
.product-card .product-visual{
grid-column:1!important;
grid-row:1!important;
position:relative!important;
min-height:0!important;
padding:0!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:flex-start!important;
z-index:2!important;
}
.product-card .category-pill{
position:static!important;
align-self:flex-start!important;
margin:0!important;
padding:6px 13px!important;
border-radius:999px!important;
background:#EAF1FF!important;
color:#0A5CD8!important;
font-size:11px!important;
font-weight:700!important;
line-height:1.35!important;
}
.product-card .product-visual img,
.product-card:hover .product-visual img{
width:100%!important;
max-width:176px!important;
height:205px!important;
margin:17px auto 0!important;
object-fit:contain!important;
filter:drop-shadow(0 9px 12px rgba(8,41,85,.10))!important;
transform:none!important;
}
.product-card .product-info{
grid-column:2!important;
grid-row:1!important;
min-width:0!important;
padding:27px 0 0!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) 96px!important;
grid-auto-rows:max-content!important;
column-gap:14px!important;
row-gap:8px!important;
align-content:start!important;
z-index:2!important;
}
.product-card .product-info h3{
grid-column:1/-1!important;
margin:0 34px 4px 0!important;
color:#082955!important;
font-size:18px!important;
font-weight:800!important;
line-height:1.35!important;
letter-spacing:-.2px!important;
}
.product-card .product-info p{
grid-column:1/-1!important;
margin:0!important;
color:#74839A!important;
font-size:12px!important;
font-weight:500!important;
line-height:1.55!important;
}
.product-card .product-info .price{
grid-column:2!important;
margin:9px 0 0!important;
min-height:47px!important;
padding:7px 0 0!important;
display:flex!important;
flex-direction:column!important;
align-items:flex-end!important;
justify-content:flex-start!important;
border-top:1px solid #DCE4EF!important;
text-align:right!important;
}
.product-card .product-info .price span{
display:block!important;
color:#74839A!important;
font-size:11px!important;
line-height:1.3!important;
}
.product-card .product-info .price strong{
display:block!important;
color:#0A5CD8!important;
font-size:27px!important;
font-weight:800!important;
line-height:1.05!important;
letter-spacing:-.7px!important;
}
.product-card .card-actions{
grid-column:1/-1!important;
grid-row:2!important;
position:static!important;
z-index:3!important;
width:100%!important;
min-height:50px!important;
margin:0!important;
padding:0!important;
display:grid!important;
grid-template-columns:160px 149px minmax(0,1fr)!important;
gap:10px!important;
overflow:visible!important;
}
.product-card .card-actions>*{
position:static!important;
width:100%!important;
min-width:0!important;
height:50px!important;
margin:0!important;
padding:0 10px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
border-radius:9px!important;
box-shadow:none!important;
transform:none!important;
font-size:10px!important;
font-weight:800!important;
line-height:1.2!important;
white-space:nowrap!important;
}
.product-card .card-actions button:not(.primary){
border:1px solid #AFC8F8!important;
background:#fff!important;
color:#0A5CD8!important;
}
.product-card .card-actions .whatsapp{
border:1px solid #BDEACB!important;
background:#fff!important;
color:#16C35B!important;
}
.product-card .card-actions .primary{
border:1px solid #0A5CD8!important;
background:#0A5CD8!important;
color:#fff!important;
}
.product-card .card-actions svg{
width:15px!important;
height:15px!important;
}
.product-card .card-actions .whatsapp-icon{
width:18px!important;
height:18px!important;
}
.product-card .card-actions>*:hover,
.product-card .card-actions>*:active{
box-shadow:none!important;
filter:none!important;
transform:none!important;
}
.product-card .card-actions .primary:hover{
background:#0956C9!important;
}
@media(max-width:1280px){
.product-card .card-actions{
grid-template-columns:1fr 1fr!important;
}
.product-card .card-actions .primary{
grid-column:1/-1!important;
}
}
@media(max-width:760px){
.product-card{
min-height:auto!important;
grid-template-columns:1fr!important;
grid-template-rows:auto auto auto!important;
}
.product-card .product-visual{
grid-column:1!important;
grid-row:1!important;
}
.product-card .product-info{
grid-column:1!important;
grid-row:2!important;
padding-top:0!important;
}
.product-card .card-actions{
grid-column:1!important;
grid-row:3!important;
grid-template-columns:1fr!important;
}
.product-card .card-actions .primary{
grid-column:auto!important;
}
}
/* V28 ince ayarlar?: eski grid-area tan?mlar?n? s?f?rla ve referans ?l??lerini sabitle. */
.product-card .product-info{
grid-template-areas:none!important;
}
.product-card .product-info h3,
.product-card .product-info p,
.product-card .product-info .price{
grid-area:auto!important;
grid-row:auto!important;
}
.product-card .product-visual img,
.product-card:hover .product-visual img{
max-width:190px!important;
height:220px!important;
margin-top:4px!important;
}
.product-card .card-actions{
grid-template-columns:160px 149px 244px!important;
}
@media(max-width:1280px){
.product-card .card-actions{
grid-template-columns:1fr 1fr!important;
}
}
/* V28 son yerle?im s?ras? */
.product-card .product-info h3,
.product-card .product-info p{
grid-column:1/-1!important;
}
.product-card .product-info .price{
grid-column:2!important;
}
.product-card .product-visual img,
.product-card:hover .product-visual img{
max-width:205px!important;
margin-top:-13px!important;
}
/* =========================================================
V28 REFERANS ?R?N KARTI
Kullan?c?n?n verdi?i kart g?rseline g?re birebir oranlar.
========================================================= */
.reference-product-card{
position:relative!important;
display:block!important;
min-height:366px!important;
height:366px!important;
padding:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
overflow:visible!important;
transform:none!important;
isolation:isolate;
}
.reference-product-card:hover{
transform:none!important;
box-shadow:none!important;
}
.reference-product-card::before{
content:""!important;
display:block!important;
position:absolute!important;
inset:0 0 48px 0!important;
z-index:0!important;
border-radius:18px!important;
background:#fff!important;
opacity:1!important;
box-shadow:0 10px 30px rgba(8,41,85,.065),0 1px 2px rgba(8,41,85,.035)!important;
pointer-events:none;
}
.reference-product-card::after{
content:""!important;
display:block!important;
position:absolute!important;
left:0!important;
bottom:0!important;
width:58%!important;
height:88px!important;
z-index:0!important;
border-radius:0 34px 18px 18px!important;
background:#fff!important;
box-shadow:0 12px 24px rgba(8,41,85,.045)!important;
pointer-events:none;
}
.reference-product-card .category-pill{
position:absolute!important;
z-index:5!important;
left:16px!important;
top:15px!important;
padding:7px 13px!important;
border-radius:999px!important;
background:#E7F0FF!important;
color:#0A63D9!important;
font-size:11px!important;
line-height:1!important;
font-weight:750!important;
}
.reference-product-card .favorite{
position:absolute!important;
z-index:7!important;
top:17px!important;
right:18px!important;
width:28px!important;
height:28px!important;
display:grid!important;
place-items:center!important;
padding:0!important;
border:0!important;
background:transparent!important;
color:#153B6B!important;
transform:none!important;
}
.reference-product-card .favorite svg{
width:22px!important;
height:22px!important;
stroke-width:1.65!important;
}
.reference-product-card .favorite:hover,
.reference-product-card .favorite.active{
color:#0A63D9!important;
transform:none!important;
}
.reference-product-card .product-visual{
position:absolute!important;
z-index:2!important;
left:24px!important;
top:58px!important;
width:185px!important;
height:190px!important;
min-height:0!important;
padding:0!important;
display:grid!important;
place-items:center!important;
background:transparent!important;
}
.reference-product-card .product-visual img,
.reference-product-card:hover .product-visual img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
transform:none!important;
filter:drop-shadow(0 10px 11px rgba(8,41,85,.12))!important;
}
.reference-product-card .product-info{
position:absolute!important;
z-index:3!important;
left:240px!important;
right:22px!important;
top:56px!important;
padding:0!important;
display:block!important;
color:#0A2D59!important;
}
.reference-product-card .product-info h3{
margin:0 0 18px!important;
color:#0A2D59!important;
font-size:18px!important;
line-height:1.18!important;
font-weight:800!important;
letter-spacing:-.42px!important;
}
.reference-product-card .product-info>p{
margin:0 0 12px!important;
color:#637791!important;
font-size:12px!important;
line-height:1.25!important;
font-weight:500!important;
}
.reference-product-card .price{
margin:0!important;
padding:0!important;
text-align:right!important;
white-space:nowrap!important;
}
.reference-product-card .price span{
display:block!important;
margin:0 0 2px!important;
color:#637791!important;
font-size:11px!important;
line-height:1.15!important;
font-weight:500!important;
}
.reference-product-card .price strong{
display:block!important;
color:#0A63D9!important;
font-size:27px!important;
line-height:1!important;
font-weight:800!important;
letter-spacing:-1px!important;
}
.reference-product-card .card-actions{
position:absolute!important;
z-index:8!important;
left:16px!important;
right:18px!important;
bottom:20px!important;
grid-column:auto!important;
display:grid!important;
grid-template-columns:1.02fr .98fr 1.34fr!important;
gap:10px!important;
min-height:0!important;
padding:0!important;
align-items:center!important;
overflow:visible!important;
}
.reference-product-card .card-actions button,
.reference-product-card .card-actions a{
position:relative!important;
inset:auto!important;
width:auto!important;
height:44px!important;
min-height:44px!important;
margin:0!important;
padding:0 10px!important;
border-radius:8px!important;
background:#fff!important;
border:1px solid #8DB9F4!important;
box-shadow:none!important;
transform:none!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
color:#0A63D9!important;
font-size:10.5px!important;
line-height:1.15!important;
font-weight:800!important;
text-align:center!important;
white-space:nowrap!important;
}
.reference-product-card .card-actions button:hover,
.reference-product-card .card-actions a:hover{
transform:none!important;
box-shadow:none!important;
}
.reference-product-card .card-actions svg{
width:17px!important;
height:17px!important;
stroke-width:1.9!important;
}
.reference-product-card .card-actions .whatsapp{
color:#0CC85B!important;
border-color:#9BE0BD!important;
}
.reference-product-card .card-actions .whatsapp .whatsapp-icon{
width:18px!important;
height:18px!important;
object-fit:contain!important;
}
.reference-product-card .card-actions .primary{
position:relative!important;
inset:auto!important;
width:auto!important;
height:44px!important;
min-height:44px!important;
border:0!important;
border-radius:9px!important;
color:#fff!important;
background:linear-gradient(110deg,#0A67E8 0%,#0759D2 100%)!important;
background-size:100% 100%!important;
box-shadow:0 0 0 8px #F1F4F8,0 10px 22px rgba(8,74,177,.18)!important;
font-size:12px!important;
font-weight:750!important;
transform:none!important;
filter:none!important;
}
.reference-product-card .card-actions .primary:hover{
background:linear-gradient(110deg,#0A67E8 0%,#0759D2 100%)!important;
box-shadow:0 0 0 8px #F1F4F8,0 10px 22px rgba(8,74,177,.18)!important;
transform:none!important;
filter:none!important;
}
.reference-product-card .card-actions .primary svg{
width:19px!important;
height:19px!important;
transition:none!important;
}
.reference-product-card .card-actions .primary:hover svg{
transform:none!important;
}
@media(max-width:1280px){
.product-grid{grid-template-columns:1fr!important}
.reference-product-card{max-width:760px!important;width:100%!important;margin-inline:auto!important}
.reference-product-card .product-visual{left:40px!important;width:205px!important}
.reference-product-card .product-info{left:285px!important}
}
@media(max-width:700px){
.reference-product-card{
height:auto!important;
min-height:600px!important;
padding:0!important;
}
.reference-product-card::before{inset:0!important;border-radius:18px!important}
.reference-product-card::after{display:none!important}
.reference-product-card .category-pill{left:18px!important;top:18px!important}
.reference-product-card .favorite{right:18px!important;top:18px!important}
.reference-product-card .product-visual{
left:50%!important;top:60px!important;width:220px!important;height:210px!important;
transform:translateX(-50%)!important;
}
.reference-product-card .product-info{
left:22px!important;right:22px!important;top:286px!important;text-align:left!important;
}
.reference-product-card .product-info h3{font-size:20px!important}
.reference-product-card .card-actions{
left:18px!important;right:18px!important;bottom:18px!important;
grid-template-columns:1fr!important;gap:10px!important;
}
.reference-product-card .card-actions .primary{box-shadow:none!important}
}
/* V28 kart alt butonlar?n?n referanstaki kesin oranlar?. */
.reference-product-card .card-actions{
width:calc(100% - 34px)!important;
grid-template-columns:27.5% 26% minmax(0,1fr)!important;
}
.reference-product-card .card-actions .primary{
width:auto!important;
}
@media(max-width:700px){
.reference-product-card .card-actions{width:calc(100% - 36px)!important}
.reference-product-card .card-actions .primary{width:auto!important}
}
/* V28 referans koordinat d?zeltmeleri. */
.reference-product-card .product-info{top:49px!important}
.reference-product-card .product-info h3{margin-bottom:17px!important}
.reference-product-card .product-info>p{margin-bottom:10px!important}
/* =========================================================
V30: ?r?n kart? mavi CTA ?entik yerle?imi
- CTA arkas?ndaki beyaz ?er?eve kald?r?ld?
- ?entik ?st?nde ve solunda 5px bo?luk b?rak?ld?
- ?? alt butonun dikey hizas? korunuyor
========================================================= */
.reference-product-card::before{
/* Mavi butonun ?st?nde ?entik i?inde 5px temiz bo?luk */
inset:0 0 69px 0!important;
}
.reference-product-card .card-actions .primary{
/* ?nceki beyaz d?? halka tamamen kald?r?ld? */
box-shadow:none!important;
/* Sol ?entik s?n?r?ndan yakla??k 5px bo?luk */
}
.reference-product-card .card-actions .primary:hover,
.reference-product-card .card-actions .primary:active{
box-shadow:none!important;
}
@media(max-width:700px){
.reference-product-card::before{
inset:0!important;
}
}
/* =========================================================
V31: Mavi CTA ?enti?inin sol-?st ge?i?i
- Alt beyaz tab?n sa? ?st e?risi referanstaki gibi b?y?t?ld?.
- Mavi butonla tab aras?nda en yak?n noktada 5px bo?luk korundu.
========================================================= */
.reference-product-card::after{
border-radius:0 64px 18px 18px!important;
}
/* =========================================================
V32: Mavi CTA'n?n sol-?st ge?i? d?zeltmesi
- Mavi butonun sol ?st?ndeki beyaz ??k?nt?n?n ?st k??e
yuvarlakl??? kald?r?ld?; ge?i? art?k d?z ve temiz.
========================================================= */
.reference-product-card::after{
border-radius:0 0 18px 18px!important;
}
/* =========================================================
V33 - GARAJ / ARA? / ?AS? / ARACIM SUNUM TASARIMI
========================================================= */
:root{
--garage-orange:#0a63df;
}
.catalog-open-button{
width:300px!important;
min-height:54px!important;
margin-top:24px!important;
padding:0 16px 0 10px!important;
border:0!important;
border-radius:6px!important;
background:#f0f0f0!important;
color:#273c52!important;
display:grid!important;
grid-template-columns:38px 1fr 18px!important;
align-items:center!important;
gap:8px!important;
text-align:left!important;
font-size:16px!important;
font-weight:500!important;
box-shadow:none!important;
transform:none!important;
}
.catalog-open-button:hover{background:#e9e9e9!important;color:var(--garage-orange)!important}
.catalog-open-button>svg{width:18px!important;height:18px!important}
/* Statik, d???k indirme boyutlu alt kategori ?eridi */
.static-subcategory-nav{
background:#eff5fb!important;
border:0!important;
border-radius:0!important;
padding:16px 14px!important;
margin-top:16px!important;
margin-bottom:24px!important;
display:grid!important;
grid-template-columns:46px minmax(0,1fr) 46px!important;
gap:12px!important;
overflow:hidden!important;
}
.static-subcategory-nav .subcategory-track{
display:flex!important;
align-items:stretch!important;
gap:12px!important;
overflow:hidden!important;
padding:0!important;
scroll-behavior:auto!important;
}
.static-subcategory-nav .subcategory-arrow{
width:46px!important;
height:46px!important;
align-self:center!important;
border:1px solid #d4e0ed!important;
border-radius:50%!important;
background:#fff!important;
color:#71859b!important;
display:grid!important;
place-items:center!important;
flex:0 0 auto!important;
box-shadow:none!important;
transform:none!important;
}
.static-subcategory-nav .subcategory-arrow:hover{
border-color:#075ee7!important;
color:#075ee7!important;
background:#fff!important;
}
.static-subcategory-nav .subcategory-chip{
min-width:265px!important;
height:62px!important;
padding:0 18px!important;
border:1px solid #d3dfeb!important;
border-radius:12px!important;
background:#fff!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:16px!important;
color:#08213d!important;
box-shadow:none!important;
transform:none!important;
}
.static-subcategory-nav .subcategory-chip strong{font-size:13px!important;white-space:nowrap!important}
.static-subcategory-nav .subcategory-chip span{font-size:10px!important;color:#8594a5!important;white-space:nowrap!important}
.static-subcategory-nav .subcategory-chip:hover,
.static-subcategory-nav .subcategory-chip.active{
border-color:#075ee7!important;
color:#075ee7!important;
background:#fff!important;
}
/* =========================================================
V34 - ?entik bo?luklar?, solda fiyat ve indirimli ?r?nler
========================================================= */
/* Alt ??l? buton grubu kart?n iki yan?ndan e?it bi?imde i?eri al?n?r.
S?tun oranlar? korunur, b?ylece buton hizas? bozulmaz. */
.reference-product-card .card-actions{
left:22px!important;
right:22px!important;
width:calc(100% - 44px)!important;
}
/* Beyaz alt tab?n biti?i mavi CTA'n?n sol kenar?na g?re ortaland?. */
.reference-product-card::after{
width:58.5%!important;
}
/* Fiyat art?k bilgi sat?r?n?n solunda. */
.reference-product-card .price{
order:1!important;
min-width:108px!important;
text-align:left!important;
white-space:nowrap!important;
}
.reference-product-card .price del{
display:block!important;
margin:0 0 2px!important;
color:#8B98A9!important;
font-size:12px!important;
line-height:1.05!important;
font-weight:650!important;
text-decoration-thickness:1.4px!important;
text-decoration-color:#718096!important;
}
.reference-product-card .price.has-discount strong{
color:#0A63D9!important;
font-size:26px!important;
}
.reference-product-card .price small{
display:flex!important;
align-items:center!important;
gap:4px!important;
margin-top:5px!important;
color:#15A95B!important;
font-size:9.5px!important;
line-height:1.15!important;
font-weight:650!important;
letter-spacing:0!important;
}
.reference-product-card .price small svg{
width:12px!important;
height:12px!important;
stroke-width:2!important;
}
.reference-product-card .price small b{
color:#0C8B49!important;
font-weight:800!important;
}
/* ?ndirimli kartlar?n beyaz g?vdeleri ye?il ?er?eveli g?r?n?r. */
.reference-product-card.discounted::before{
box-shadow:inset 0 0 0 1.5px #35C978,0 10px 30px rgba(8,41,85,.065),0 1px 2px rgba(8,41,85,.035)!important;
}
.reference-product-card.discounted::after{
box-shadow:inset 0 0 0 1.5px #35C978,0 12px 24px rgba(8,41,85,.045)!important;
}
.reference-product-card.discounted .category-pill{
background:#EAFBF1!important;
color:#119A50!important;
}
/* Sol fiyat filtresindeki indirim se?ene?i. */
.discount-only-filter{
width:calc(100% - 30px)!important;
min-height:42px!important;
margin:0 15px 10px!important;
padding:0 11px!important;
border:1px solid #B9E7CC!important;
border-radius:9px!important;
background:#F7FFF9!important;
color:#167D46!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:8px!important;
box-shadow:none!important;
transform:none!important;
}
.discount-only-filter>span{
display:flex!important;
align-items:center!important;
gap:7px!important;
font-size:11px!important;
font-weight:750!important;
}
.discount-only-filter svg{width:16px!important;height:16px!important;stroke-width:1.9!important}
.discount-only-filter b{
padding:4px 7px!important;
border-radius:999px!important;
background:#E4F8EC!important;
color:#168A4B!important;
font-size:9px!important;
font-weight:800!important;
white-space:nowrap!important;
}
.discount-only-filter:hover,
.discount-only-filter.active{
border-color:#24B865!important;
background:#ECFBF2!important;
color:#0E934C!important;
}
.discount-only-filter.active{
box-shadow:0 0 0 3px rgba(36,184,101,.10)!important;
}
@media(max-width:700px){
.reference-product-card .card-actions{
left:18px!important;
right:18px!important;
width:calc(100% - 36px)!important;
}
.reference-product-card .price{order:initial!important}
}
/* V34.1: ?nceki y?ksek ?zg?ll?kl? kart kurallar?n? kesin olarak s?f?rla. */
.reference-product-card .product-info .price{
grid-column:1!important;
grid-row:1!important;
order:initial!important;
display:block!important;
min-width:0!important;
min-height:0!important;
margin:0!important;
padding:0!important;
text-align:left!important;
align-self:center!important;
}
.reference-product-card .product-info .price span,
.reference-product-card .product-info .price del,
.reference-product-card .product-info .price strong,
.reference-product-card .product-info .price small{
width:auto!important;
max-width:100%!important;
}
/* Ye?il ?er?eveyi birle?im ?izgisi olu?turmadan d?? form boyunca g?ster. */
.reference-product-card.discounted::before{
box-shadow:
inset 1.5px 0 0 #35C978,
inset -1.5px 0 0 #35C978,
inset 0 1.5px 0 #35C978,
0 10px 30px rgba(8,41,85,.065),
0 1px 2px rgba(8,41,85,.035)!important;
}
.reference-product-card.discounted::after{
box-shadow:
inset 1.5px 0 0 #35C978,
inset -1.5px 0 0 #35C978,
inset 0 -1.5px 0 #35C978,
0 12px 24px rgba(8,41,85,.045)!important;
}
/* =========================================================
V35 - Kategori ?eridi, a??l?r a??klama, temiz ?r?n kart?
ve ?al??an 7 ad?ml? ara? se?ici
========================================================= */
/* 1) ?st kategori ?eridindeki gereksiz mavi arka plan kald?r?ld?. */
.static-subcategory-nav{
width:min(1600px,calc(100% - 64px))!important;
margin:18px auto 22px!important;
padding:0!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
display:grid!important;
grid-template-columns:50px minmax(0,1fr) 50px!important;
align-items:center!important;
gap:12px!important;
overflow:visible!important;
}
.static-subcategory-nav .subcategory-track{
display:flex!important;
gap:12px!important;
min-width:0!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-behavior:smooth!important;
scrollbar-width:none!important;
overscroll-behavior-inline:contain!important;
padding:1px!important;
}
.static-subcategory-nav .subcategory-track::-webkit-scrollbar{display:none!important}
.static-subcategory-nav .subcategory-chip{
flex:0 0 265px!important;
min-width:265px!important;
height:64px!important;
border:1px solid #D9E3EF!important;
border-radius:13px!important;
background:#fff!important;
box-shadow:none!important;
transform:none!important;
transition:border-color .16s ease,background-color .16s ease,color .16s ease!important;
}
.static-subcategory-nav .subcategory-chip:hover,
.static-subcategory-nav .subcategory-chip.active{
border-color:#0A63D9!important;
background:#F7FAFF!important;
color:#0A63D9!important;
transform:none!important;
}
.static-subcategory-nav .subcategory-arrow{
position:relative!important;
inset:auto!important;
width:46px!important;
height:46px!important;
min-width:46px!important;
border:1px solid #D7E2EF!important;
border-radius:50%!important;
background:#fff!important;
color:#56708D!important;
display:grid!important;
place-items:center!important;
box-shadow:none!important;
transform:none!important;
cursor:pointer!important;
}
.static-subcategory-nav .subcategory-arrow:hover{
color:#0A63D9!important;
border-color:#8EB8F2!important;
background:#F6FAFF!important;
}
.static-subcategory-nav .subcategory-arrow svg{width:18px!important;height:18px!important}
/* 2) ?st a??klama art?k tek paragrafla ba?lar, d??meyle devam? a??l?r. */
.category-intro{position:relative!important;padding-bottom:20px!important}
.category-intro-copy{max-height:none!important;overflow:visible!important}
.category-intro-copy::after{display:none!important}
.category-intro-toggle{
display:inline-flex!important;
align-items:center!important;
gap:7px!important;
margin:5px 0 0!important;
padding:0!important;
border:0!important;
background:transparent!important;
color:#0A63D9!important;
font-size:12px!important;
font-weight:800!important;
box-shadow:none!important;
transform:none!important;
}
.category-intro-toggle svg{width:15px!important;height:15px!important;transition:transform .2s ease!important}
.category-intro-toggle.open svg{transform:rotate(180deg)!important}
.category-intro-toggle:hover{color:#074BA5!important;text-decoration:underline!important;text-underline-offset:3px!important}
/* 3) Kart d?? formu ve indirimli ye?il border birle?im ?izgisi olmadan ?izilir. */
.reference-product-card{
--card-outline:#E1E7EF;
min-height:374px!important;
height:374px!important;
}
.reference-product-card.discounted{--card-outline:#24C66D}
.reference-product-card::before{
inset:0 0 68px 0!important;
border:1.5px solid var(--card-outline)!important;
border-radius:18px!important;
background:#fff!important;
box-shadow:0 10px 30px rgba(8,41,85,.055)!important;
}
.reference-product-card::after{
left:0!important;
bottom:0!important;
width:58.5%!important;
height:88px!important;
border:0!important;
border-left:1.5px solid var(--card-outline)!important;
border-right:1.5px solid var(--card-outline)!important;
border-bottom:1.5px solid var(--card-outline)!important;
border-radius:0 0 18px 18px!important;
background:#fff!important;
box-shadow:0 10px 20px rgba(8,41,85,.035)!important;
}
.reference-product-card.discounted::before,
.reference-product-card.discounted::after{box-shadow:0 10px 26px rgba(20,154,79,.06)!important}
.reference-product-card .category-pill{background:#EAF2FF!important;color:#0A63D9!important}
.reference-product-card.discounted .category-pill{background:#EAFBF1!important;color:#129A51!important}
/* ?r?n bilgi alan? sadele?tirildi. Uyumluluk solda, fiyat sa?da. */
.reference-product-card .product-info{top:50px!important}
.reference-product-card .product-info h3{margin-bottom:13px!important;font-size:18px!important}
.reference-product-card .product-info>p{margin-bottom:8px!important}
.reference-product-card .product-info .price{
grid-column:2!important;
grid-row:1!important;
order:initial!important;
justify-self:end!important;
align-self:center!important;
min-width:118px!important;
text-align:right!important;
padding-left:12px!important;
border-left:1px solid #E0E7F0!important;
}
.reference-product-card .product-info .price span{font-size:10px!important;margin-bottom:2px!important}
.reference-product-card .product-info .price del{font-size:11px!important;margin-bottom:1px!important}
.reference-product-card .product-info .price strong{font-size:27px!important;line-height:1!important}
.reference-product-card .product-info .price small{
justify-content:flex-end!important;
margin-top:4px!important;
font-size:9px!important;
white-space:normal!important;
text-align:right!important;
}
.reference-product-card .product-info .price small svg{display:none!important}
/* Beyaz arka planl? JPG/WebP ?r?n foto?raflar? da kart? bozmaz. */
.reference-product-card .product-visual.photo-source{
overflow:hidden!important;
border-radius:12px!important;
background:#fff!important;
}
.reference-product-card .product-visual.photo-source img,
.reference-product-card:hover .product-visual.photo-source img{
width:100%!important;
height:100%!important;
padding:7px!important;
object-fit:contain!important;
background:#fff!important;
filter:none!important;
border-radius:10px!important;
}
/* Alt eylemler ayn? ?izgide kal?r, mavi CTA ?enti?in i?inde nefes al?r. */
.reference-product-card .card-actions{
left:22px!important;
right:22px!important;
bottom:20px!important;
width:calc(100% - 44px)!important;
grid-template-columns:27% 26% minmax(0,1fr)!important;
gap:10px!important;
}
.reference-product-card .card-actions .primary{
box-shadow:none!important;
}
/* 4) Araç seçici — boyut/layout vehicle-catalog.css (off-canvas) kaynağında */
.vehicle-catalog-overlay{background:rgba(5,22,43,.64)!important;backdrop-filter:blur(2px)!important}
.vehicle-catalog-header{height:78px!important;padding:16px 20px!important;border-bottom:1px solid #E2E8F0!important}
.vehicle-catalog-header h2{color:#092C59!important;font-size:18px!important}
.vehicle-catalog-header p{color:#657891!important;font-size:12px!important}
.vehicle-catalog-close{background:#F0F4F8!important;color:#0A2D59!important}
.vehicle-catalog-close:hover{background:#E5EDF7!important;color:#0A63D9!important}
.vehicle-catalog-layout{display:flex!important;flex-direction:column!important;min-height:0!important;flex:1!important}
.vehicle-catalog-steps{background:#F5F7FA!important;border-right:1px solid #E3E8EF!important;padding:22px 18px!important;overflow:auto!important}
.vehicle-catalog-steps li{cursor:default!important}
.vehicle-catalog-steps li::after{background:#CDD7E4!important}
.vehicle-catalog-steps li>span{
border-color:#B9C7D8!important;
background:#fff!important;
color:#51677F!important;
}
.vehicle-catalog-steps li.active>span{
border-color:#0A63D9!important;
color:#0A63D9!important;
background:#fff!important;
}
.vehicle-catalog-steps li.completed>span{
border-color:#0A63D9!important;
background:#0A63D9!important;
color:#fff!important;
}
.vehicle-catalog-steps li.active strong,
.vehicle-catalog-steps li.active small{color:#0A63D9!important}
.vehicle-catalog-steps li.completed strong{color:#0A2D59!important}
.vehicle-catalog-steps li.completed small{color:#637791!important}
.vehicle-catalog-steps li>span svg{width:15px!important;height:15px!important}
.vehicle-catalog-main{min-width:0!important;display:flex!important;flex-direction:column!important;background:#fff!important;overflow:hidden!important}
.vehicle-catalog-toolbar{
min-height:62px!important;
padding:12px 16px!important;
border-bottom:1px solid #E4EAF1!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:16px!important;
}
.vehicle-catalog-toolbar h3{color:#0A2D59!important;font-size:15px!important}
.vehicle-catalog-toolbar label{width:162px!important;height:36px!important;border:1px solid #E2E8F0!important;border-radius:8px!important;background:#F6F8FA!important}
.vehicle-catalog-toolbar label:focus-within{border-color:#8AB7F3!important;box-shadow:0 0 0 3px rgba(10,99,217,.08)!important}
.vehicle-catalog-toolbar input{color:#183B62!important}
.vehicle-catalog-stage{flex:1!important;min-height:0!important;overflow:auto!important;padding:16px!important}
.vehicle-brand-grid.dynamic,
.vehicle-option-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;align-content:start!important}
.vehicle-brand-card,
.vehicle-option-card{
min-height:54px!important;
padding:10px 12px!important;
border:1px solid #DDE5EF!important;
border-radius:9px!important;
background:#fff!important;
color:#102F53!important;
display:flex!important;
align-items:center!important;
gap:12px!important;
text-align:left!important;
box-shadow:none!important;
transform:none!important;
transition:border-color .15s ease,background-color .15s ease,color .15s ease!important;
}
.vehicle-brand-card:hover,
.vehicle-option-card:hover{
border-color:#6FA9EF!important;
background:#F5F9FF!important;
color:#0A63D9!important;
transform:none!important;
}
.vehicle-brand-card img{width:34px!important;height:25px!important;object-fit:contain!important}
.vehicle-brand-card strong{font-size:12px!important}
.vehicle-brand-initial{
width:34px!important;height:27px!important;border-radius:7px!important;background:#EAF2FF!important;color:#0A63D9!important;display:grid!important;place-items:center!important;font-size:10px!important;font-weight:900!important;
}
.vehicle-option-card{justify-content:space-between!important;min-height:54px!important;font-size:12px!important;font-weight:750!important}
.vehicle-option-card svg{width:16px!important;height:16px!important;color:#8A9BB0!important}
.vehicle-empty{grid-column:1/-1!important;padding:42px!important;text-align:center!important;color:#76879C!important}
.vehicle-ready-screen{min-height:100%!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;padding:24px!important}
.vehicle-ready-screen h3{margin:0 0 16px!important;color:#0A63D9!important;font-size:24px!important}
.vehicle-ready-screen>strong{color:#092C59!important;font-size:18px!important}
.vehicle-ready-screen>p{margin:7px 0 16px!important;color:#7B8A9D!important;font-size:12px!important}
.vehicle-ready-screen>div{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:8px!important;max-width:620px!important}
.vehicle-ready-screen>div span{padding:8px 11px!important;border-radius:999px!important;background:#F1F5FA!important;color:#445E79!important;font-size:10px!important;font-weight:700!important}
.vehicle-catalog-footer{
min-height:54px!important;
padding:8px 14px!important;
display:grid!important;
grid-template-columns:auto auto 1fr!important;
gap:8px!important;
border-top:1px solid #E1E7EF!important;
}
.vehicle-catalog-footer button{height:38px!important;border-radius:7px!important;font-size:12px!important;font-weight:800!important}
.vehicle-back-button{background:#fff!important;color:#51677F!important;border:1px solid #D8E2ED!important;display:inline-flex!important;align-items:center!important;gap:5px!important}
.vehicle-back-button:disabled{opacity:.45!important;cursor:not-allowed!important}
#vehicleCatalogReset{background:#EAF2FF!important;color:#0A63D9!important}
#vehicleCatalogReset:hover{background:#DDEBFF!important}
#vehicleCatalogChoose{justify-self:end!important;min-width:104px!important;background:#0A63D9!important;color:#fff!important}
#vehicleCatalogChoose:hover:not(:disabled){background:#0758C5!important}
#vehicleCatalogChoose:disabled{background:#EDF1F5!important;color:#A0ABBA!important}
@media(max-width:900px){
.static-subcategory-nav{width:calc(100% - 28px)!important;grid-template-columns:42px minmax(0,1fr) 42px!important;gap:7px!important}
.static-subcategory-nav .subcategory-chip{flex-basis:230px!important;min-width:230px!important}
.vehicle-brand-grid.dynamic,
.vehicle-option-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:700px){
.reference-product-card{height:auto!important;min-height:620px!important}
.reference-product-card::before{inset:0!important;border-radius:18px!important}
.reference-product-card::after{display:none!important}
.reference-product-card .product-info .price{grid-column:1!important;border-left:0!important;padding-left:0!important;text-align:left!important;justify-self:start!important}
.reference-product-card .product-info .price small{justify-content:flex-start!important;text-align:left!important}
.vehicle-catalog-layout{grid-template-columns:1fr!important}
.vehicle-catalog-steps{display:none!important}
.vehicle-brand-grid.dynamic,
.vehicle-option-grid{grid-template-columns:1fr!important}
.vehicle-catalog-toolbar{align-items:flex-start!important;flex-direction:column!important}
.vehicle-catalog-toolbar label{width:100%!important}
}
/* V35.1 k???k davran?? d?zeltmeleri */
#vehicleCatalogSearchWrap[hidden]{display:none!important}
/* =========================================================
V36: se?ilen ara? ?zeti + t?m ara?larda hafif g?rsel deste?i
========================================================= */
.vehicle-model-grid{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:14px!important;
padding:16px!important;
}
.vehicle-model-card{
min-height:78px!important;
display:grid!important;
grid-template-columns:88px 1fr 20px!important;
align-items:center!important;
gap:12px!important;
padding:8px 14px!important;
border:1px solid #dce3ea!important;
border-radius:8px!important;
background:#fff!important;
color:#0b294f!important;
text-align:left!important;
cursor:pointer!important;
transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease!important;
}
.vehicle-model-card:hover{
border-color:#0a5cd8!important;
box-shadow:0 9px 22px rgba(10,92,216,.10)!important;
transform:translateY(-1px)!important;
}
.vehicle-model-card img{
width:88px!important;
height:58px!important;
object-fit:contain!important;
display:block!important;
}
.vehicle-model-card span{font-size:13px!important;font-weight:700!important;line-height:1.35!important}
.vehicle-model-card svg{width:17px!important;height:17px!important;color:#0a5cd8!important}
.vehicle-ready-screen{
padding:20px 18px 28px!important;
min-height:440px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:flex-start!important;
text-align:center!important;
}
.vehicle-ready-screen h3{
margin:4px 0 20px!important;
color:#0a5cd8!important;
font-size:22px!important;
letter-spacing:.02em!important;
}
.vehicle-ready-photo{
width:300px!important;
height:230px!important;
object-fit:contain!important;
margin:0 auto 22px!important;
border-radius:0!important;
background:transparent!important;
filter:none!important;
box-shadow:none!important;
}
.vehicle-ready-screen>strong{font-size:20px!important;color:#0b294f!important;margin-bottom:7px!important}
.vehicle-ready-screen>p{margin:0 0 13px!important;color:#7a8798!important}
.vehicle-ready-screen>div{display:flex!important;justify-content:center!important;gap:20px!important;flex-wrap:wrap!important;color:#263b53!important;font-size:13px!important}
.vehicle-ready-screen>div span{display:inline-flex!important;align-items:center!important;gap:5px!important}
.vehicle-ready-screen>div span>i{color:#0a63df!important;font-size:9px!important}
/* =========================================================
V37 - Mavi ara? a?ac?, ger?ek WebP ara? g?rselleri ve
?entiksiz indirimli / standart ?r?n kartlar?
========================================================= */
/* Araç ağacı: yalnızca tamamlanan önceki adımlar geri açılabilir. */
body .vehicle-catalog-header{
border-bottom:1px solid #dce5f0!important;
background:#fff!important;
}
body .vehicle-catalog-close{
background:#eef4fb!important;
color:#0b315f!important;
}
body .vehicle-catalog-close:hover{background:#dfeafb!important}
body .vehicle-catalog-layout{display:flex!important;flex-direction:column!important;min-height:0!important}
body .vehicle-catalog-steps{
background:#f5f8fd!important;
border-right:1px solid #d8e2ef!important;
padding:20px 18px!important;
}
body .vehicle-catalog-steps li{
min-height:58px!important;
grid-template-columns:36px minmax(0,1fr)!important;
gap:10px!important;
cursor:default!important;
user-select:none!important;
}
body .vehicle-catalog-steps li:not(:last-child)::after{
left:17px!important;
top:34px!important;
border-left:1px solid #b9cbe2!important;
}
body .vehicle-catalog-steps li>span{
width:34px!important;
height:34px!important;
border:1.5px solid #b9cbe2!important;
color:#607895!important;
background:#fff!important;
font-weight:700!important;
}
body .vehicle-catalog-steps li>span svg{width:16px!important;height:16px!important;stroke-width:2.5!important}
body .vehicle-catalog-steps li strong{
margin-top:2px!important;
color:#0b315f!important;
font-size:13px!important;
line-height:1.25!important;
}
body .vehicle-catalog-steps li small{
color:#8a9caf!important;
font-size:11px!important;
line-height:1.3!important;
}
body .vehicle-catalog-steps li.completed>span{
border-color:#0a63df!important;
background:#0a63df!important;
color:#fff!important;
box-shadow:0 5px 12px rgba(10,99,223,.18)!important;
}
body .vehicle-catalog-steps li.active>span{
border-color:#0a63df!important;
background:#fff!important;
color:#0a63df!important;
box-shadow:0 0 0 3px rgba(10,99,223,.08)!important;
}
body .vehicle-catalog-steps li.active strong,
body .vehicle-catalog-steps li.active small{color:#0a63df!important}
body .vehicle-catalog-steps li.can-return{cursor:pointer!important}
body .vehicle-catalog-steps li.can-return:hover strong{color:#0a63df!important}
body .vehicle-catalog-steps li.can-return:hover>span{transform:scale(1.04)!important}
body .vehicle-catalog-main{background:#fff!important}
body .vehicle-catalog-toolbar{
min-height:62px!important;
height:auto!important;
border-bottom:1px solid #dce5f0!important;
}
body .vehicle-catalog-toolbar h3{color:#0b315f!important;font-size:15px!important}
body .vehicle-catalog-toolbar label{
border:1px solid #d9e3ef!important;
background:#f5f8fc!important;
border-radius:9px!important;
}
body .vehicle-catalog-toolbar label:focus-within{
border-color:#0a63df!important;
box-shadow:0 0 0 3px rgba(10,99,223,.08)!important;
}
body .vehicle-brand-card,
body .vehicle-option-card,
body .vehicle-model-card{
border:1px solid #d3deeb!important;
border-radius:10px!important;
background:#fff!important;
color:#0b315f!important;
box-shadow:0 1px 2px rgba(8,34,70,.025)!important;
}
body .vehicle-brand-card:hover,
body .vehicle-option-card:hover,
body .vehicle-model-card:hover{
border-color:#0a63df!important;
background:#f8fbff!important;
box-shadow:0 8px 22px rgba(10,99,223,.09)!important;
transform:translateY(-1px)!important;
}
body .vehicle-brand-card.selected,
body .vehicle-option-card.selected,
body .vehicle-model-card.selected{
border-color:#0a63df!important;
box-shadow:0 0 0 3px rgba(10,99,223,.10)!important;
}
body .vehicle-option-card svg,
body .vehicle-model-card svg{color:#0a63df!important}
body .vehicle-model-card{
min-height:104px!important;
grid-template-columns:132px minmax(0,1fr) 22px!important;
padding:8px 13px!important;
}
body .vehicle-model-card img{
width:132px!important;
height:82px!important;
object-fit:contain!important;
border-radius:7px!important;
background:#fff!important;
}
body .vehicle-ready-screen h3{color:#0a63df!important}
body .vehicle-ready-photo{
width:360px!important;
height:225px!important;
border-radius:0!important;
background:transparent!important;
object-fit:contain!important;
filter:none!important;
box-shadow:none!important;
}
body .vehicle-ready-screen>div span>i{color:#0a63df!important;font-size:9px!important}
body #vehicleCatalogReset{background:#e8f1ff!important;color:#0a63df!important}
body #vehicleCatalogReset:hover{background:#dceaff!important}
body #vehicleCatalogChoose{background:#0a63df!important;color:#fff!important}
body #vehicleCatalogChoose:hover:not(:disabled){background:#0755c3!important}
body .vehicle-back-button{color:#0a63df!important;border-color:#c9d9ed!important}
/* Se?ilen ara? ?zeti site mavisini kullan?r. */
body .selected-vehicle-visual img{
width:155px!important;
height:98px!important;
object-fit:contain!important;
background:none!important;
border:none!important;
border-radius:0!important;
box-shadow:none!important;
filter:none!important;
}
body .selected-vehicle-specs span>i{color:#0a63df!important;font-size:9px!important}
body .selected-vehicle-links a{color:#0a63df!important}
body .selected-vehicle-actions button:nth-child(1),
body .selected-vehicle-actions button:nth-child(2){color:#0a63df!important;border-color:#0a63df!important}
/* ?r?n listesi art?k tek s?tun, geni? ve ?entiksizdir. */
body .product-grid{
grid-template-columns:1fr!important;
gap:24px!important;
}
body .reference-product-card,
body .reference-product-card.discounted{
position:relative!important;
width:100%!important;
max-width:none!important;
min-height:450px!important;
height:auto!important;
margin:0!important;
padding:0!important;
display:grid!important;
grid-template-rows:minmax(0,1fr) auto!important;
overflow:hidden!important;
background:#fff!important;
border:1px solid #e0e8f1!important;
border-radius:24px!important;
box-shadow:0 12px 35px rgba(8,34,70,.065)!important;
clip-path:none!important;
transform:none!important;
}
body .reference-product-card:hover{
transform:translateY(-2px)!important;
box-shadow:0 18px 42px rgba(8,34,70,.09)!important;
}
body .reference-product-card.discounted{
border:2px solid #18a843!important;
}
body .reference-product-card::before,
body .reference-product-card::after,
body .reference-product-card.discounted::before,
body .reference-product-card.discounted::after{
content:none!important;
display:none!important;
box-shadow:none!important;
}
body .reference-product-card .favorite{
position:absolute!important;
top:28px!important;
right:30px!important;
z-index:5!important;
width:42px!important;
height:42px!important;
border:0!important;
border-radius:50%!important;
background:transparent!important;
color:#0a274f!important;
display:grid!important;
place-items:center!important;
box-shadow:none!important;
}
body .reference-product-card .favorite svg{width:28px!important;height:28px!important;stroke-width:1.7!important}
body .reference-product-card .favorite:hover,
body .reference-product-card .favorite.active{color:#0a63df!important;background:#edf5ff!important}
body .reference-product-card .product-card-main{
min-width:0!important;
display:grid!important;
grid-template-columns:minmax(280px,38%) minmax(0,1fr)!important;
align-items:center!important;
gap:34px!important;
padding:36px 48px 22px!important;
}
body .reference-product-card .product-visual,
body .reference-product-card .product-visual.photo-source{
position:static!important;
inset:auto!important;
width:100%!important;
height:300px!important;
min-width:0!important;
display:grid!important;
place-items:center!important;
overflow:hidden!important;
border:0!important;
border-radius:18px!important;
background:#fff!important;
box-shadow:none!important;
}
body .reference-product-card .product-visual img,
body .reference-product-card:hover .product-visual img,
body .reference-product-card .product-visual.photo-source img{
width:100%!important;
height:100%!important;
max-width:380px!important;
max-height:285px!important;
object-fit:contain!important;
transform:none!important;
filter:drop-shadow(0 14px 16px rgba(8,34,70,.10))!important;
}
body .reference-product-card .product-info{
position:static!important;
inset:auto!important;
min-width:0!important;
display:block!important;
padding:0 30px 0 0!important;
}
body .reference-product-card .category-pill{
position:static!important;
display:inline-flex!important;
align-items:center!important;
gap:9px!important;
width:auto!important;
height:38px!important;
margin:0 0 22px!important;
padding:0 18px!important;
border:0!important;
border-radius:999px!important;
background:#eaf3ff!important;
color:#0a63df!important;
font-size:14px!important;
font-weight:750!important;
box-shadow:none!important;
}
body .reference-product-card .category-pill > b:not(.category-pill__hash){
width:10px!important;
height:10px!important;
border-radius:50%!important;
background:#0a63df!important;
}
body .reference-product-card.discounted .category-pill{
background:#eaf8ef!important;
color:#079135!important;
}
body .reference-product-card.discounted .category-pill b{background:#18a843!important}
body .reference-product-card .product-info h3{
margin:0 52px 12px 0!important;
color:#071d3a!important;
font-size:clamp(26px,2.2vw,38px)!important;
line-height:1.16!important;
font-weight:800!important;
letter-spacing:-.025em!important;
}
body .reference-product-card .product-meta-row{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:14px 24px!important;
margin:0 0 24px!important;
padding:20px 0!important;
border-top:1px solid #dce5ef!important;
}
body .reference-product-card .product-meta-row span{
min-width:0!important;
display:flex!important;
align-items:center!important;
gap:8px!important;
color:#526a87!important;
font-size:16px!important;
}
body .reference-product-card .product-meta-row svg{
width:34px!important;
height:34px!important;
padding:7px!important;
border-radius:9px!important;
background:#f1f5fa!important;
color:#0b315f!important;
}
body .reference-product-card .product-meta-row em{font-style:normal!important}
body .reference-product-card .product-meta-row strong{color:#071d3a!important;font-weight:800!important;overflow-wrap:anywhere!important}
body .reference-product-card .product-price-panel{
width:100%!important;
min-height:104px!important;
margin:0!important;
padding:20px 24px!important;
border:1px solid #d6e0ec!important;
border-radius:17px!important;
background:#fff!important;
box-shadow:none!important;
}
body .reference-product-card .discount-price-row{
display:grid!important;
grid-template-columns:auto auto 1fr!important;
align-items:center!important;
gap:16px!important;
}
body .reference-product-card .discount-price-row del{
color:#50627a!important;
font-size:24px!important;
line-height:1!important;
text-decoration-thickness:2px!important;
}
body .reference-product-card .discount-badge{
min-height:36px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
padding:0 15px!important;
border-radius:10px!important;
background:#eaf8ef!important;
color:#0c9638!important;
font-size:14px!important;
font-weight:750!important;
white-space:nowrap!important;
}
body .reference-product-card .discount-price-row strong{
justify-self:end!important;
color:#0a63df!important;
font-size:42px!important;
line-height:1!important;
letter-spacing:-.035em!important;
}
body .reference-product-card .saving-strip{
min-height:48px!important;
margin-top:18px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
border-radius:12px!important;
background:linear-gradient(90deg,#eefaf2,#e7f7ed)!important;
color:#0a9638!important;
font-size:15px!important;
}
body .reference-product-card .saving-strip svg{width:23px!important;height:23px!important}
body .reference-product-card .saving-strip b{font-size:17px!important;color:#078b31!important}
body .reference-product-card .card-actions{
position:static!important;
inset:auto!important;
width:auto!important;
min-height:92px!important;
margin:0!important;
padding:0 48px 32px!important;
display:grid!important;
grid-template-columns:1fr 1fr 1.08fr!important;
align-items:center!important;
gap:24px!important;
background:transparent!important;
border:0!important;
transform:none!important;
}
body .reference-product-card .card-actions>*{
position:static!important;
inset:auto!important;
width:100%!important;
min-width:0!important;
height:62px!important;
margin:0!important;
padding:0 20px!important;
border-radius:11px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:12px!important;
font-size:15px!important;
font-weight:750!important;
text-decoration:none!important;
box-shadow:none!important;
transform:none!important;
}
body .reference-product-card .card-actions button:not(.primary){
border:1.5px solid #0a63df!important;
background:#fff!important;
color:#0a63df!important;
}
body .reference-product-card .card-actions .whatsapp{
border:1.5px solid #18b85b!important;
background:#fff!important;
color:#0fa34e!important;
}
body .reference-product-card .card-actions .primary{
border:0!important;
background:linear-gradient(135deg,#0a63df,#0759ce)!important;
color:#fff!important;
box-shadow:0 10px 20px rgba(10,99,223,.18)!important;
}
body .reference-product-card .card-actions>*:hover{
transform:none!important;
box-shadow:none!important;
}
body .reference-product-card .card-actions .primary:hover{background:linear-gradient(135deg,#0759ce,#064cb5)!important}
body .reference-product-card .card-actions svg{width:22px!important;height:22px!important}
body .reference-product-card .card-actions .whatsapp-icon{width:23px!important;height:23px!important}
@media(max-width:1000px){
body .reference-product-card .product-card-main{grid-template-columns:270px minmax(0,1fr)!important;padding:32px 30px 20px!important;gap:24px!important}
body .reference-product-card .product-visual{height:260px!important}
body .reference-product-card .product-info h3{font-size:28px!important}
body .reference-product-card .discount-price-row strong{font-size:34px!important}
body .reference-product-card .card-actions{padding:0 30px 28px!important;gap:14px!important}
}
@media(max-width:760px){
body .vehicle-catalog-layout{grid-template-columns:1fr!important}
body .vehicle-catalog-steps{display:block!important;max-height:174px!important;padding:12px 16px!important;overflow:auto!important}
body .vehicle-catalog-steps li{min-height:46px!important}
body .vehicle-model-grid{grid-template-columns:1fr!important;padding:12px!important}
body .reference-product-card{border-radius:18px!important}
body .reference-product-card .product-card-main{grid-template-columns:1fr!important;padding:26px 20px 18px!important}
body .reference-product-card .product-visual{height:230px!important}
body .reference-product-card .product-info{padding:0!important}
body .reference-product-card .product-info h3{font-size:25px!important;margin-right:42px!important}
body .reference-product-card .product-meta-row{grid-template-columns:1fr!important}
body .reference-product-card .discount-price-row{grid-template-columns:auto 1fr!important}
body .reference-product-card .discount-price-row strong{grid-column:1/-1!important;justify-self:start!important}
body .reference-product-card .card-actions{grid-template-columns:1fr!important;padding:0 20px 22px!important;gap:10px!important}
}
/* V37.1: eski ?r?n kart? s?tun ?ablonunu tamamen s?f?rla. */
body .reference-product-card,
body .reference-product-card.discounted{
grid-template-columns:minmax(0,1fr)!important;
}
body .reference-product-card .product-card-main,
body .reference-product-card .card-actions{
grid-column:1/-1!important;
width:100%!important;
min-width:0!important;
}
/* V38: ?r?nleri masa?st?nde 2 s?tun yap ve filtrede kalan turuncu vurgular? mavile?tir. */
body .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px!important}
@media(max-width:1200px){body .product-grid{grid-template-columns:1fr!important}}
body .catalog-open-button:hover,
body .vehicle-catalog-steps li.active strong,
body .vehicle-catalog-steps li.active small,
body .vehicle-catalog-steps li.completed>span,
body .vehicle-catalog-steps li.active>span{color:#0a63df!important;border-color:#0a63df!important}
/* V39: alt kategori kayd?rma kutu kutu hizal? olsun. */
.static-subcategory-nav .subcategory-track{
scroll-snap-type:x mandatory!important;
scroll-padding-left:0!important;
}
.static-subcategory-nav .subcategory-chip{
flex:0 0 265px!important;
width:265px!important;
scroll-snap-align:start!important;
scroll-snap-stop:always!important;
}
/* V39: ?r?n kartlar?n? 2 s?tun yerle?imde daha kompakt hale getir. */
@media(min-width:1201px){
body .reference-product-card,
body .reference-product-card.discounted{
min-height:340px!important;
border-radius:20px!important;
}
body .reference-product-card .product-card-main{
grid-template-columns:170px minmax(0,1fr)!important;
gap:18px!important;
padding:20px 22px 10px!important;
align-items:start!important;
}
body .reference-product-card .product-visual,
body .reference-product-card .product-visual.photo-source{
height:170px!important;
border-radius:14px!important;
}
body .reference-product-card .product-visual img,
body .reference-product-card:hover .product-visual img,
body .reference-product-card .product-visual.photo-source img{
max-width:180px!important;
max-height:165px!important;
}
body .reference-product-card .favorite{
top:16px!important;
right:16px!important;
width:34px!important;
height:34px!important;
}
body .reference-product-card .favorite svg{width:22px!important;height:22px!important}
body .reference-product-card .category-pill{
height:30px!important;
margin:0 0 12px!important;
padding:0 12px!important;
font-size:12px!important;
gap:7px!important;
}
body .reference-product-card .category-pill b{width:8px!important;height:8px!important}
body .reference-product-card .product-info{padding:0!important}
body .reference-product-card .product-info h3{
margin:0 34px 8px 0!important;
font-size:19px!important;
line-height:1.18!important;
}
body .reference-product-card .product-meta-row{
grid-template-columns:1fr!important;
gap:8px!important;
margin:0 0 12px!important;
padding:12px 0!important;
}
body .reference-product-card .product-meta-row span{
font-size:13px!important;
gap:6px!important;
}
body .reference-product-card .product-meta-row svg{
width:26px!important;
height:26px!important;
padding:5px!important;
border-radius:8px!important;
}
body .reference-product-card .product-price-panel{
min-height:auto!important;
padding:12px 14px!important;
border-radius:14px!important;
}
body .reference-product-card .discount-price-row{
grid-template-columns:auto auto!important;
gap:10px!important;
}
body .reference-product-card .discount-price-row strong{
grid-column:1/-1!important;
justify-self:start!important;
font-size:28px!important;
}
body .reference-product-card .discount-price-row del{font-size:14px!important}
body .reference-product-card .discount-badge{
min-height:28px!important;
padding:0 10px!important;
font-size:11px!important;
border-radius:9px!important;
}
body .reference-product-card .saving-strip{
min-height:34px!important;
margin-top:10px!important;
font-size:12px!important;
border-radius:10px!important;
}
body .reference-product-card .saving-strip svg{width:18px!important;height:18px!important}
body .reference-product-card .saving-strip b{font-size:14px!important}
body .reference-product-card .card-actions{
min-height:auto!important;
padding:0 22px 20px!important;
gap:10px!important;
}
body .reference-product-card .card-actions>*{
height:46px!important;
padding:0 12px!important;
gap:8px!important;
border-radius:10px!important;
font-size:12px!important;
}
body .reference-product-card .card-actions svg{width:18px!important;height:18px!important}
body .reference-product-card .card-actions .whatsapp-icon{width:18px!important;height:18px!important}
}
/* V40: 2 s?tunlu kartlar? referanstaki gibi kompakt yatay d?zene getir. */
@media(min-width:1201px){
body .product-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:22px!important;
align-items:start!important;
}
body .reference-product-card,
body .reference-product-card.discounted{
min-height:460px!important;
border-radius:22px!important;
overflow:hidden!important;
}
body .reference-product-card .product-card-main{
grid-template-columns:150px minmax(0,1fr)!important;
gap:18px!important;
padding:18px 20px 8px!important;
align-items:start!important;
}
body .reference-product-card .product-visual,
body .reference-product-card .product-visual.photo-source{
height:180px!important;
align-self:start!important;
}
body .reference-product-card .product-visual img,
body .reference-product-card:hover .product-visual img,
body .reference-product-card .product-visual.photo-source img{
max-width:170px!important;
max-height:170px!important;
}
body .reference-product-card .favorite{
top:15px!important;
right:15px!important;
width:34px!important;
height:34px!important;
}
body .reference-product-card .favorite svg{width:22px!important;height:22px!important}
body .reference-product-card .product-info{padding-right:0!important}
body .reference-product-card .category-pill{
height:28px!important;
padding:0 11px!important;
margin:0 0 8px!important;
font-size:11px!important;
}
body .reference-product-card .product-info h3{
font-size:18px!important;
line-height:1.18!important;
margin:0 28px 8px 0!important;
max-width:92%!important;
}
body .reference-product-card .product-meta-row{
grid-template-columns:1fr!important;
gap:10px!important;
margin:0 0 12px!important;
padding:12px 0!important;
border-top:1px solid #dbe5f0!important;
}
body .reference-product-card .product-meta-row span{
font-size:12px!important;
gap:8px!important;
line-height:1.3!important;
}
body .reference-product-card .product-meta-row svg{
width:24px!important;
height:24px!important;
padding:4px!important;
}
body .reference-product-card .product-price-panel{
width:100%!important;
padding:12px 14px!important;
min-height:96px!important;
border-radius:16px!important;
}
body .reference-product-card .discount-price-row{
grid-template-columns:auto 1fr!important;
align-items:center!important;
gap:8px 12px!important;
}
body .reference-product-card .discount-price-row del{
font-size:12px!important;
}
body .reference-product-card .discount-badge{
justify-self:end!important;
min-height:26px!important;
padding:0 10px!important;
font-size:11px!important;
}
body .reference-product-card .discount-price-row strong{
grid-column:1/-1!important;
justify-self:start!important;
font-size:23px!important;
margin-top:2px!important;
}
body .reference-product-card .saving-strip{
min-height:34px!important;
margin-top:10px!important;
font-size:11px!important;
gap:6px!important;
}
body .reference-product-card .saving-strip svg{width:16px!important;height:16px!important}
body .reference-product-card .saving-strip b{font-size:12px!important}
body .reference-product-card .card-actions{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:10px!important;
padding:0 20px 18px!important;
min-height:auto!important;
}
body .reference-product-card .card-actions>*{
height:44px!important;
padding:0 10px!important;
font-size:11px!important;
gap:7px!important;
border-radius:10px!important;
white-space:nowrap!important;
}
body .reference-product-card .card-actions svg{width:16px!important;height:16px!important}
body .reference-product-card .card-actions .whatsapp-icon{width:16px!important;height:16px!important}
}
/* V41: referans karta daha yak?n denge - fiyat/kazan? k???lt, Marka ve OEM yan yana. */
@media(min-width:1201px){
body .reference-product-card .product-info h3{
font-size:17px!important;
line-height:1.16!important;
margin:0 28px 7px 0!important;
}
body .reference-product-card .product-meta-row{
grid-template-columns:1fr 1fr!important;
gap:10px 14px!important;
margin:0 0 10px!important;
padding:10px 0!important;
align-items:center!important;
}
body .reference-product-card .product-meta-row span{
font-size:11px!important;
gap:7px!important;
white-space:nowrap!important;
}
body .reference-product-card .product-meta-row svg{
width:22px!important;
height:22px!important;
padding:4px!important;
}
body .reference-product-card .product-price-panel{
padding:10px 12px!important;
min-height:84px!important;
border-radius:14px!important;
}
body .reference-product-card .discount-price-row{
gap:8px 10px!important;
}
body .reference-product-card .discount-price-row del{
font-size:11px!important;
}
body .reference-product-card .discount-badge{
min-height:24px!important;
padding:0 9px!important;
font-size:10px!important;
border-radius:8px!important;
}
body .reference-product-card .discount-price-row strong{
font-size:20px!important;
margin-top:0!important;
}
body .reference-product-card .saving-strip{
min-height:28px!important;
margin-top:8px!important;
font-size:10px!important;
gap:5px!important;
border-radius:9px!important;
padding:0 8px!important;
}
body .reference-product-card .saving-strip svg{width:14px!important;height:14px!important}
body .reference-product-card .saving-strip b{font-size:11px!important}
}
/* V42: referans g?rsele daha yak?n nihai kart d?zeni. */
@media(min-width:1201px){
body .reference-product-card,
body .reference-product-card.discounted{
min-height:385px!important;
border-radius:20px!important;
box-shadow:none!important;
}
body .reference-product-card:hover{
transform:none!important;
box-shadow:none!important;
}
body .reference-product-card .product-card-main{
grid-template-columns:155px minmax(0,1fr)!important;
gap:16px!important;
padding:14px 18px 8px!important;
}
body .reference-product-card .product-visual,
body .reference-product-card .product-visual.photo-source{
height:155px!important;
border-radius:12px!important;
background:transparent!important;
box-shadow:none!important;
}
body .reference-product-card .product-visual img,
body .reference-product-card:hover .product-visual img,
body .reference-product-card .product-visual.photo-source img{
max-width:155px!important;
max-height:145px!important;
filter:none!important;
box-shadow:none!important;
transform:none!important;
}
body .reference-product-card .favorite,
body .reference-product-card .favorite:hover,
body .reference-product-card .favorite.active{
top:14px!important;
right:14px!important;
width:32px!important;
height:32px!important;
background:transparent!important;
transform:none!important;
box-shadow:none!important;
}
body .reference-product-card .favorite svg{width:21px!important;height:21px!important}
body .reference-product-card .category-pill{
height:27px!important;
padding:0 11px!important;
margin:0 0 7px!important;
font-size:11px!important;
}
body .reference-product-card .product-info h3{
font-size:16px!important;
line-height:1.18!important;
margin:0 26px 7px 0!important;
}
body .reference-product-card .product-meta-row{
grid-template-columns:1fr 1fr!important;
gap:10px 14px!important;
margin:0 0 10px!important;
padding:10px 0!important;
border-top:1px solid #dbe4ef!important;
}
body .reference-product-card .product-meta-row span{
font-size:11px!important;
gap:7px!important;
white-space:nowrap!important;
}
body .reference-product-card .product-meta-row svg{
width:22px!important;
height:22px!important;
padding:4px!important;
}
body .reference-product-card .product-price-panel{
padding:10px 12px!important;
min-height:74px!important;
border-radius:14px!important;
}
body .reference-product-card .discount-price-row{
grid-template-columns:auto auto 1fr!important;
align-items:center!important;
gap:8px 10px!important;
}
body .reference-product-card .discount-price-row del{
font-size:11px!important;
grid-column:auto!important;
}
body .reference-product-card .discount-badge{
min-height:23px!important;
padding:0 9px!important;
font-size:10px!important;
border-radius:8px!important;
justify-self:start!important;
}
body .reference-product-card .discount-price-row strong{
grid-column:auto!important;
justify-self:end!important;
font-size:19px!important;
margin-top:0!important;
}
body .reference-product-card .saving-strip{
min-height:26px!important;
margin-top:8px!important;
font-size:10px!important;
gap:4px!important;
border-radius:8px!important;
padding:0 8px!important;
}
body .reference-product-card .saving-strip svg{width:13px!important;height:13px!important}
body .reference-product-card .saving-strip b{font-size:11px!important}
body .reference-product-card .card-actions{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:10px!important;
padding:0 18px 18px!important;
min-height:auto!important;
}
body .reference-product-card .card-actions>*,
body .reference-product-card .card-actions>*:hover,
body .reference-product-card .card-actions>*:active{
height:42px!important;
padding:0 10px!important;
font-size:11px!important;
gap:7px!important;
border-radius:10px!important;
transform:none!important;
box-shadow:none!important;
}
body .reference-product-card .card-actions .primary:hover{background:linear-gradient(135deg,#0a63df,#0759ce)!important}
body .reference-product-card .card-actions svg{width:16px!important;height:16px!important}
body .reference-product-card .card-actions .whatsapp-icon{width:16px!important;height:16px!important}
}
/* V43: fiyat/kazan? alan? ile alt butonlar aras?ndaki gereksiz bo?lu?u azalt. */
@media(min-width:1201px){
body .reference-product-card,
body .reference-product-card.discounted{
min-height:0!important;
grid-template-rows:auto auto!important;
}
body .reference-product-card .product-card-main{
padding-bottom:4px!important;
}
body .reference-product-card .card-actions{
padding-top:2px!important;
padding-bottom:16px!important;
}
}
/* V44: ?r?n g?rsellerini b?y?t. */
@media(min-width:1201px){
body .reference-product-card .product-card-main{
grid-template-columns:190px minmax(0,1fr)!important;
gap:18px!important;
}
body .reference-product-card .product-visual,
body .reference-product-card .product-visual.photo-source{
height:185px!important;
}
body .reference-product-card .product-visual img,
body .reference-product-card:hover .product-visual img,
body .reference-product-card .product-visual.photo-source img{
max-width:188px!important;
max-height:180px!important;
width:100%!important;
height:100%!important;
object-fit:contain!important;
}
}
/* V45: ayn? sat?rdaki ?r?n kartlar?n?n y?ksekliklerini e?itle. */
@media(min-width:1201px){
body .product-grid{
align-items:stretch!important;
}
body .reference-product-card,
body .reference-product-card.discounted{
height:100%!important;
min-height:330px!important;
grid-template-rows:minmax(0,1fr) auto!important;
box-sizing:border-box!important;
}
body .reference-product-card .product-card-main{
height:100%!important;
align-content:start!important;
}
body .reference-product-card .card-actions{
align-self:end!important;
}
}
/* V46: indirimsiz kartta kalp d???nda ?st i?erikleri ortala, her iki kartta g?rseli ortala. */
@media(min-width:1201px){
/* Her kartta ?r?n g?rseli tam ortada dursun */
body .reference-product-card .product-visual,
body .reference-product-card .product-visual.photo-source{
display:grid!important;
place-items:center!important;
justify-self:center!important;
align-self:center!important;
}
body .reference-product-card .product-visual img,
body .reference-product-card:hover .product-visual img,
body .reference-product-card .product-visual.photo-source img{
margin:0 auto!important;
}
/* Sadece indirimsiz kartlarda kalp hari? ?st i?erikleri ortala */
body .reference-product-card:not(.discounted) .product-card-main{
align-items:start!important;
}
body .reference-product-card:not(.discounted) .product-info{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
text-align:center!important;
padding-right:0!important;
}
body .reference-product-card:not(.discounted) .category-pill{
align-self:center!important;
margin-left:auto!important;
margin-right:auto!important;
}
body .reference-product-card:not(.discounted) .product-info h3{
margin:0 0 7px!important;
text-align:center!important;
}
body .reference-product-card:not(.discounted) .product-meta-row{
width:100%!important;
grid-template-columns:auto auto!important;
justify-content:center!important;
gap:10px 26px!important;
}
body .reference-product-card:not(.discounted) .product-meta-row span{
justify-content:center!important;
white-space:nowrap!important;
text-align:center!important;
}
}
/* V47: ara? panel link aksiyonlar? ve normal kart?n sol hizas? + fiyat?n OEM yan?nda g?sterimi. */
.selected-vehicle-links a.active{
color:#0a63df!important;
font-weight:700!important;
}
.selected-vehicle-links a.active svg{stroke:#0a63df!important}
@media(min-width:1201px){
body .reference-product-card .product-visual,
body .reference-product-card .product-visual.photo-source{
display:grid!important;
place-items:center!important;
}
body .reference-product-card:not(.discounted) .product-info{
display:block!important;
text-align:left!important;
}
body .reference-product-card:not(.discounted) .category-pill{
display:inline-flex!important;
margin:0 0 7px!important;
}
body .reference-product-card:not(.discounted) .product-info h3{
text-align:left!important;
margin-left:0!important;
margin-right:0!important;
}
body .reference-product-card:not(.discounted) .product-meta-row{
grid-template-columns:auto auto auto!important;
justify-content:flex-start!important;
align-items:center!important;
gap:10px 18px!important;
}
body .reference-product-card:not(.discounted) .product-meta-row span{
justify-content:flex-start!important;
text-align:left!important;
}
body .reference-product-card:not(.discounted) .meta-price{
display:inline-flex!important;
align-items:center!important;
gap:7px!important;
color:#5d7391!important;
}
body .reference-product-card:not(.discounted) .meta-price i{
width:22px!important;height:22px!important;padding:4px!important;border-radius:999px!important;background:#f3f7fd!important;stroke:#21426e!important;
}
body .reference-product-card:not(.discounted) .meta-price em{font-style:normal!important;color:#6b7f98!important}
body .reference-product-card:not(.discounted) .meta-price strong{color:#0a63df!important;font-size:14px!important}
}
/* V49: indirimsiz kartta g?rsel ve bilgi blo?unu referanstaki gibi ortala, ancak yaz?lar sol hizal? kals?n. */
@media(min-width:1201px){
body .reference-product-card:not(.discounted) .product-card-main{
align-items:center!important;
}
body .reference-product-card:not(.discounted) .product-info{
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
align-items:flex-start!important;
min-height:175px!important;
}
body .reference-product-card:not(.discounted) .product-visual,
body .reference-product-card:not(.discounted) .product-visual.photo-source{
align-self:center!important;
}
}
/* V50: indirimsiz kartta metin blo?unu yukar?dan a?a?? tam ortala, yaz?lar sola yasl? kals?n. */
@media(min-width:1201px){
body .reference-product-card:not(.discounted) .product-card-main{
height:100%!important;
align-items:stretch!important;
}
body .reference-product-card:not(.discounted) .product-info{
height:100%!important;
min-height:0!important;
align-self:stretch!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
align-items:flex-start!important;
text-align:left!important;
padding-top:0!important;
padding-bottom:0!important;
}
body .reference-product-card:not(.discounted) .category-pill{
align-self:flex-start!important;
margin-left:0!important;
margin-right:0!important;
}
body .reference-product-card:not(.discounted) .product-info h3{
width:100%!important;
text-align:left!important;
}
body .reference-product-card:not(.discounted) .product-meta-row{
width:100%!important;
justify-content:flex-start!important;
}
body .reference-product-card:not(.discounted) .product-visual,
body .reference-product-card:not(.discounted) .product-visual.photo-source{
align-self:center!important;
}
}
/* V51: indirimsiz kartta alt bo?lu?u azalt?p i?erik blo?unu ger?ek dikey ortaya al. */
@media(min-width:1201px){
body .reference-product-card:not(.discounted){
grid-template-rows:minmax(0,1fr) auto!important;
}
body .reference-product-card:not(.discounted) .product-card-main{
height:100%!important;
align-items:center!important;
align-content:center!important;
padding-top:12px!important;
padding-bottom:4px!important;
}
body .reference-product-card:not(.discounted) .product-info{
height:auto!important;
align-self:center!important;
justify-content:center!important;
min-height:auto!important;
margin-top:0!important;
margin-bottom:0!important;
}
body .reference-product-card:not(.discounted) .product-meta-row{
margin-bottom:0!important;
}
body .reference-product-card:not(.discounted) .card-actions{
padding-top:6px!important;
}
}
/* V52: ara? panel sadele?sin, kategori mant??? ve fiyat g?r?n?m? d?zelsin. */
@media(min-width:1201px){
body .selected-vehicle-links{gap:18px!important}
/* ?r?n buton aral?klar?n? e?itle */
body .reference-product-card .card-actions{gap:12px!important}
body .reference-product-card .card-actions>*{justify-content:center!important}
/* indirimsiz kartta fiyat g?r?n?m? */
body .reference-product-card:not(.discounted) .product-meta-row{gap:10px 16px!important}
body .reference-product-card:not(.discounted) .meta-price{display:inline-flex!important;align-items:center!important;justify-content:flex-start!important}
body .reference-product-card:not(.discounted) .meta-price i,
body .reference-product-card:not(.discounted) .meta-price em{display:none!important}
body .reference-product-card:not(.discounted) .meta-price strong{font-size:19px!important;line-height:1!important;color:#0a63df!important}
}
/* V53: ?r?n kart? alt butonlar?n?n geni?liklerini tamamen e?itle. */
@media(min-width:1201px){
body .reference-product-card .card-actions{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
align-items:stretch!important;
}
body .reference-product-card .card-actions > *{
width:100%!important;
min-width:0!important;
box-sizing:border-box!important;
justify-content:center!important;
}
}
/* V55: ?r?n? G?r butonu di?er iki butonla ayn? ?l??de, sade mavi ve efektsiz. */
body .reference-product-card .card-actions{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
align-items:stretch!important;
}
body .reference-product-card .card-actions > *{
width:100%!important;
min-width:0!important;
height:42px!important;
box-sizing:border-box!important;
border-radius:10px!important;
justify-content:center!important;
transform:none!important;
transition:none!important;
box-shadow:none!important;
}
body .reference-product-card .card-actions .primary,
body .reference-product-card .card-actions .primary:hover,
body .reference-product-card .card-actions .primary:focus,
body .reference-product-card .card-actions .primary:active{
border:1.5px solid #0a63df!important;
background:#0a63df!important;
color:#fff!important;
transform:none!important;
transition:none!important;
box-shadow:none!important;
}
body .reference-product-card .card-actions > *:hover,
body .reference-product-card .card-actions > *:focus,
body .reference-product-card .card-actions > *:active,
body .reference-product-card .card-actions .primary:hover svg,
body .reference-product-card .card-actions .primary:active svg{
transform:none!important;
box-shadow:none!important;
}
/* V57: mavi d?nen indirim ?er?evesi, ara? popup entegrasyonu ve buton/simge iyile?tirmeleri. */
body .reference-product-card.discounted{
border:0!important;
background:#fff!important;
position:relative!important;
}
body .reference-product-card.discounted::before{
content:"";
position:absolute;
inset:0;
padding:2px;
border-radius:24px;
background:conic-gradient(from 0deg,#0a63df 0%,#68a8ff 22%,#c7ddff 38%,#0a63df 55%,#8bb8ff 78%,#0a63df 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
animation:parcanetSpinBorder 3.4s linear infinite;
pointer-events:none;
}
body .reference-product-card.discounted > *{position:relative;z-index:1}
@keyframes parcanetSpinBorder{to{transform:rotate(360deg)}}
/* Favori butonunda hover/active durumda border ya da arka plan olmas?n. */
body .reference-product-card .favorite,
body .reference-product-card .favorite:hover,
body .reference-product-card .favorite:focus,
body .reference-product-card .favorite.active{
border:0!important;
outline:0!important;
box-shadow:none!important;
background:transparent!important;
}
body .reference-product-card .favorite.active svg{fill:#0a63df!important;stroke:#0a63df!important}
/* Kategori pill: DB görseli (ikon/dot yok) */
body .reference-product-card .category-pill > b:not(.category-pill__hash){display:none!important}
body .reference-product-card .category-pill > i,
body .reference-product-card .category-pill > svg{display:none!important}
body .reference-product-card.discounted .category-pill i{stroke:#17964e!important}
body .reference-product-card:not(.discounted) .category-pill i{stroke:#0a63df!important}
/* Ara? se?im ad?mlar?nda ba?l?k ikonlar? g?r?n?r olsun. */
body .vehicle-catalog-steps li strong{display:flex!important;align-items:center!important;gap:7px!important}
body .vehicle-catalog-steps li strong i{width:14px!important;height:14px!important;stroke-width:2.1!important;color:inherit!important}
/* Se?ili ara? kart? sa? aksiyon butonlar? site butonlar?na uyumlu olsun. */
body .selected-vehicle-actions{display:grid!important;gap:8px!important}
body .selected-vehicle-actions button{
width:100%!important;
min-height:34px!important;
border-radius:8px!important;
font-weight:700!important;
font-size:13px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
box-shadow:none!important;
transition:none!important;
}
body .selected-vehicle-actions button svg{width:15px!important;height:15px!important;stroke-width:2!important}
body .selected-vehicle-actions button:nth-child(1),
body .selected-vehicle-actions button:nth-child(2){background:rgba(10,99,223,.06)!important;border:1.5px solid #0a63df!important;color:#0a63df!important}
body .selected-vehicle-actions button:nth-child(3){background:#f8fafc!important;border:1.5px solid #aeb8c5!important;color:#6b7685!important}
body .selected-vehicle-actions button:hover,
body .selected-vehicle-actions button:focus,
body .selected-vehicle-actions button:active{box-shadow:none!important;transform:none!important;filter:none!important}
/* Se?ili ara? linkleri aktif oldu?unda hafif dolu mavi, di?erleri outline. */
body .selected-vehicle-links a{
display:inline-flex!important;
align-items:center!important;
gap:7px!important;
padding:0!important;
color:#0a63df!important;
font-weight:700!important;
}
body .selected-vehicle-links a.active{color:#0a63df!important}
/* Ara? g?r butonu ?r?n kart?ndan popup filtresini a?ar; buton g?r?n?m? korunur. */
body .reference-product-card .card-actions button[data-action="vehicles"],
body .reference-product-card .card-actions a.whatsapp,
body .reference-product-card .card-actions .primary{height:42px!important}
/* Mobil/masa?st? kalp ve panel temizli?i. */
body .selected-vehicle-visual img{display:block!important;margin:0 auto!important}
/* V58: hover b?y?me efektlerini kald?r, kategori kutular?n? kesmeden g?ster, ara? panel aksiyonlar?n? 2x2 yap, fiyat? sa?a hizala ve mavi border animasyonunu g??lendir. */
/* Sayfalama ve ?r?n kartlar?nda b?y?me / translate efekti olmas?n. */
body .page-button,
body .page-button:hover,
body .page-button:focus,
body .page-button:active{
transform:none!important;
box-shadow:none!important;
}
body .reference-product-card,
body .reference-product-card:hover,
body .reference-product-card:focus-within,
body .reference-product-card .product-visual,
body .reference-product-card .product-visual img,
body .reference-product-card:hover .product-visual img,
body .reference-product-card .product-visual.photo-source img{
transform:none!important;
transition:none!important;
animation:none!important;
box-shadow:none!important;
}
/* Alt kategori kutular? masa?st?nde kesilmeden tam g?r?ns?n. */
@media(min-width:1201px){
body .static-subcategory-nav{
grid-template-columns:46px minmax(0,1fr) 46px!important;
align-items:center!important;
}
body .static-subcategory-nav .subcategory-track{
display:grid!important;
grid-auto-flow:column!important;
grid-auto-columns:minmax(0,1fr)!important;
gap:12px!important;
overflow:visible!important;
padding:0!important;
width:100%!important;
scroll-snap-type:none!important;
}
body .static-subcategory-nav .subcategory-chip{
width:auto!important;
min-width:0!important;
flex:none!important;
}
}
/* Se?ili ara? panelindeki 4 aksiyon butonu 2'li 2 sat?r olsun. */
body .selected-vehicle-actions{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
align-content:start!important;
}
body .selected-vehicle-actions button{
min-width:0!important;
}
/* Normal ?r?n kartlar?nda fiyat sa? yasl? olsun. */
@media(min-width:1201px){
body .reference-product-card:not(.discounted) .product-meta-row{
width:100%!important;
grid-template-columns:auto auto 1fr!important;
align-items:center!important;
gap:10px 18px!important;
}
body .reference-product-card:not(.discounted) .meta-price{
display:inline-flex!important;
align-items:center!important;
justify-content:flex-end!important;
text-align:right!important;
width:100%!important;
margin-left:auto!important;
}
body .reference-product-card:not(.discounted) .meta-price strong{
margin-left:auto!important;
text-align:right!important;
}
}
/* ?ndirimli kartlarda mavi border s?rekli dikkat ?ekici animasyonlu olsun. */
body .reference-product-card.discounted::before{
background:conic-gradient(from 0deg,#0a63df 0%,#8fc2ff 20%,#dcebff 36%,#0a63df 52%,#6aa8ff 74%,#0a63df 100%)!important;
animation:parcanetSpinBorderV58 2.6s linear infinite,parcanetGlowBorderV58 1.05s ease-in-out infinite alternate!important;
opacity:1!important;
}
@keyframes parcanetSpinBorderV58{to{transform:rotate(360deg)}}
@keyframes parcanetGlowBorderV58{
0%{filter:drop-shadow(0 0 0 rgba(10,99,223,.0));opacity:.9}
100%{filter:drop-shadow(0 0 10px rgba(10,99,223,.42));opacity:1}
}
/* V59: ad?m tikleri, ara? aksiyon buton boyutu, normal kart hover border sabit, indirimli kartta mavi yan?p s?nen border. */
/* Tamamlanan filtre ad?mlar?nda mavi dairenin i?inde tik olsun. */
body .vehicle-catalog-steps li.completed>span{
position:relative!important;
font-size:0!important;
line-height:0!important;
}
body .vehicle-catalog-steps li.completed>span::before{
content:"?";
position:absolute;
inset:0;
display:grid;
place-items:center;
font-size:16px;
line-height:1;
font-weight:900;
color:#fff;
}
/* Normal kartlarda hover durumunda border hep g?r?n?r olsun. */
body .reference-product-card:not(.discounted),
body .reference-product-card:not(.discounted):hover,
body .reference-product-card:not(.discounted):focus-within{
border:1px solid #dbe5ef!important;
border-color:#dbe5ef!important;
}
body .reference-product-card:not(.discounted):hover{
box-shadow:0 12px 35px rgba(8,34,70,.065)!important;
transform:none!important;
}
/* ?ndirimli kartlarda pseudo iptalinden ba??ms?z ger?ek mavi yan?p s?nen border kullan. */
body .reference-product-card.discounted,
body .reference-product-card.discounted:hover,
body .reference-product-card.discounted:focus-within{
border:2px solid #0a63df!important;
animation:parcanetBlinkBorderV59 1.05s ease-in-out infinite!important;
box-shadow:0 0 0 0 rgba(10,99,223,0)!important;
}
@keyframes parcanetBlinkBorderV59{
0%{border-color:#0a63df; box-shadow:0 0 0 0 rgba(10,99,223,.0)}
50%{border-color:#8fc2ff; box-shadow:0 0 0 4px rgba(10,99,223,.14)}
100%{border-color:#0a63df; box-shadow:0 0 0 0 rgba(10,99,223,.0)}
}
/* ?nceki conic gradient/pseudo kurallar?n? etkisiz b?rak. */
body .reference-product-card.discounted::before,
body .reference-product-card.discounted::after{
content:none!important;
display:none!important;
animation:none!important;
background:none!important;
filter:none!important;
}
/* V60: selected vehicle aksiyon butonlar?n? ger?ekten b?y?t, sabit 100px kolonu kald?r, kart hover g?lgesini kapat ve indirim border?n? g?r?n?r ?ekilde mavi yan?p s?nd?r. */
/* ?r?n kartlar?nda hover box-shadow ve ekstra hover efekti tamamen kapal? olsun. */
body .reference-product-card,
body .reference-product-card:hover,
body .reference-product-card:focus-within{
transform:none!important;
}
body .reference-product-card:hover,
body .reference-product-card:focus-within,
body .reference-product-card:not(.discounted):hover,
body .reference-product-card.discounted:hover{
box-shadow:none!important;
}
/* ?ndirimli kart border? belirgin mavi ?ekilde yan?p s?ns?n. */
body .reference-product-card.discounted,
body .reference-product-card.discounted:hover,
body .reference-product-card.discounted:focus-within{
border:2px solid #0a63df!important;
animation:parcanetBlueBlinkV60 .9s steps(1,end) infinite!important;
}
@keyframes parcanetBlueBlinkV60{
0%,100%{border-color:#0a63df; box-shadow:0 0 0 0 rgba(10,99,223,0)!important}
50%{border-color:#7bb2ff; box-shadow:0 0 0 4px rgba(10,99,223,.18)!important}
}
body .reference-product-card.discounted::before,
body .reference-product-card.discounted::after{
content:none!important;
display:none!important;
}
/* V63: uyumluluk sonucu aynı araç filtreleme popup'ında gösterilir. */
.compatibility-inline-result{gap:10px!important;}
.compatibility-inline-title{
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:12px!important;
margin:0 0 10px!important;
max-width:100%!important;
}
.compatibility-inline-icon{
box-sizing:content-box!important;
width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;
border-radius:0!important;margin:0!important;padding:0!important;flex:0 0 auto!important;
display:inline-block!important;align-items:unset!important;justify-content:unset!important;
line-height:1!important;font-size:36px!important;background:none!important;
}
.compatibility-inline-icon i,
.compatibility-inline-icon svg{
display:unset!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;
font-size:inherit!important;line-height:1!important;color:inherit!important;
}
.compatibility-inline-result.is-compatible .compatibility-inline-icon{background:none!important;color:#18A869!important;}
.compatibility-inline-result.is-not-compatible .compatibility-inline-icon{background:none!important;color:#E24A4A!important;}
.compatibility-inline-result.is-unknown .compatibility-inline-icon{background:none!important;color:#6A7F99!important;}
.compatibility-inline-result .compatibility-inline-title h3,
.compatibility-inline-result h3{margin:0!important;font-size:clamp(16px,2.4vw,22px)!important;line-height:1.25!important;text-align:left!important;}
.compatibility-inline-whatsapp{
display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;
margin-top:14px!important;padding:12px 16px!important;max-width:min(100%,420px)!important;
border:1px solid #D1FAE5!important;border-radius:12px!important;background:#ECFDF5!important;
color:#065F46!important;text-decoration:none!important;font-size:13px!important;font-weight:700!important;line-height:1.35!important;text-align:left!important;
}
.compatibility-inline-whatsapp:hover{background:#D1FAE5!important;color:#064E3B!important;}
.compatibility-inline-whatsapp i{flex:0 0 auto!important;font-size:20px!important;color:#25D366!important;}
/* V65: alt kategori ?eridi birer kart kayacak, yar?m kart g?r?nmeyecek. */
@media(min-width:1201px){
body .static-subcategory-nav{
width:calc(100% - 32px)!important;
margin:0 auto 22px!important;
grid-template-columns:54px minmax(0,1fr) 54px!important;
gap:16px!important;
overflow:hidden!important;
}
body .static-subcategory-nav .subcategory-track{
display:grid!important;
grid-auto-flow:column!important;
grid-auto-columns:calc((100% - (4 * 16px)) / 5)!important;
gap:16px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
scroll-behavior:smooth!important;
scrollbar-width:none!important;
padding:0!important;
margin:0!important;
}
body .static-subcategory-nav .subcategory-track::-webkit-scrollbar{display:none!important}
body .static-subcategory-nav .subcategory-chip{
min-width:0!important;
width:100%!important;
flex:none!important;
scroll-snap-align:start!important;
}
body .static-subcategory-nav .subcategory-arrow{
width:54px!important;
height:54px!important;
flex:0 0 54px!important;
}
}
/* V66: ?st alt-kategori kartlar?n?n tamam? e?it geni?likte olsun. */
@media(min-width:1201px){
body .static-subcategory-nav{
overflow:hidden!important;
}
body .static-subcategory-nav .subcategory-track{
display:flex!important;
gap:16px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
scroll-behavior:smooth!important;
width:100%!important;
}
body .static-subcategory-nav .subcategory-chip,
body .static-subcategory-nav .subcategory-chip.active,
body .static-subcategory-nav .subcategory-chip:hover{
flex:0 0 calc((100% - 64px) / 5)!important;
width:calc((100% - 64px) / 5)!important;
min-width:calc((100% - 64px) / 5)!important;
max-width:calc((100% - 64px) / 5)!important;
box-sizing:border-box!important;
scroll-snap-align:start!important;
scroll-snap-stop:always!important;
}
}
/* V67: ?st kategori alan? 1600px'i ge?mesin. */
@media(min-width:1201px){
body .static-subcategory-nav{
width:min(1600px,calc(100% - 64px))!important;
max-width:1600px!important;
margin-inline:auto!important;
}
}
/* V69: MacBook Air geni?liklerinde ?r?n say?s? ta?mas?n? ?nle. */
body .static-subcategory-nav .subcategory-chip{
min-width:0!important;
overflow:hidden!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:center!important;
column-gap:10px!important;
}
body .static-subcategory-nav .subcategory-chip strong{
min-width:0!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
body .static-subcategory-nav .subcategory-chip span{
flex:0 0 auto!important;
white-space:nowrap!important;
justify-self:end!important;
}
/* Araç arşivinde kategori adı, araç bağlamıyla birlikte eksiksiz okunur. */
body.vehicle-category-page .static-subcategory-nav .subcategory-chip{
height:72px!important;
}
body.vehicle-category-page .static-subcategory-nav .subcategory-chip strong{
white-space:normal!important;
text-overflow:clip!important;
line-height:1.25!important;
display:-webkit-box!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
}
@media(min-width:1201px){
body.vehicle-category-page .static-subcategory-nav .subcategory-chip,
body.vehicle-category-page .static-subcategory-nav .subcategory-chip.active,
body.vehicle-category-page .static-subcategory-nav .subcategory-chip:hover{
flex-basis:calc((100% - 48px) / 4)!important;
width:calc((100% - 48px) / 4)!important;
min-width:calc((100% - 48px) / 4)!important;
max-width:calc((100% - 48px) / 4)!important;
}
}
@media(min-width:1201px) and (max-width:1500px){
body .static-subcategory-nav{
width:calc(100% - 24px)!important;
grid-template-columns:46px minmax(0,1fr) 46px!important;
gap:10px!important;
}
body .static-subcategory-nav .subcategory-track{
gap:10px!important;
}
body .static-subcategory-nav .subcategory-chip,
body .static-subcategory-nav .subcategory-chip.active,
body .static-subcategory-nav .subcategory-chip:hover{
flex-basis:calc((100% - 40px) / 5)!important;
width:calc((100% - 40px) / 5)!important;
min-width:calc((100% - 40px) / 5)!important;
max-width:calc((100% - 40px) / 5)!important;
height:60px!important;
padding:0 12px!important;
column-gap:7px!important;
}
body .static-subcategory-nav .subcategory-chip strong{
font-size:11.5px!important;
}
body .static-subcategory-nav .subcategory-chip span{
font-size:9px!important;
}
body .static-subcategory-nav .subcategory-arrow{
width:46px!important;
height:46px!important;
min-width:46px!important;
}
}
/* V70: MacBook Air ?r?n kart? responsive d?zeni. */
@media(min-width:1201px) and (max-width:1500px){
/* Marka ve OEM alt alta */
body .reference-product-card .product-meta-row,
body .reference-product-card:not(.discounted) .product-meta-row{
display:grid!important;
grid-template-columns:1fr!important;
gap:8px!important;
justify-content:stretch!important;
align-items:start!important;
padding:9px 0!important;
margin-bottom:9px!important;
}
body .reference-product-card .product-meta-row span,
body .reference-product-card:not(.discounted) .product-meta-row span{
width:100%!important;
justify-content:flex-start!important;
text-align:left!important;
}
body .reference-product-card:not(.discounted) .meta-price{
width:100%!important;
justify-content:flex-end!important;
margin-left:0!important;
}
/* ?lk iki buton yan yana ve e?it, ?r?n? G?r altta tam geni?lik */
body .reference-product-card .card-actions{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:10px!important;
padding:0 14px 14px!important;
}
body .reference-product-card .card-actions > *{
width:100%!important;
min-width:0!important;
height:42px!important;
padding:0 8px!important;
font-size:10.5px!important;
white-space:nowrap!important;
}
body .reference-product-card .card-actions .primary{
grid-column:1 / -1!important;
height:44px!important;
font-size:12px!important;
}
/* ?ndirim alan?: indirim ?stte, eski fiyat alt?nda, yeni fiyat sa?da */
body .reference-product-card .discounted-price-panel{
padding:10px 12px!important;
min-height:84px!important;
}
body .reference-product-card .discount-price-row{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
grid-template-areas:
"discount current"
"old current"!important;
align-items:center!important;
gap:3px 10px!important;
}
body .reference-product-card .discount-badge{
grid-area:discount!important;
justify-self:start!important;
min-height:23px!important;
padding:0 8px!important;
font-size:9.5px!important;
}
body .reference-product-card .discount-price-row del{
grid-area:old!important;
justify-self:start!important;
font-size:10px!important;
}
body .reference-product-card .discount-price-row strong{
grid-area:current!important;
justify-self:end!important;
align-self:center!important;
font-size:20px!important;
margin:0!important;
}
body .reference-product-card .saving-strip{
width:max-content!important;
min-width:0!important;
min-height:24px!important;
margin:6px 0 0 auto!important;
padding:0 9px!important;
border-radius:8px!important;
font-size:9px!important;
gap:4px!important;
}
body .reference-product-card .saving-strip svg{
width:12px!important;
height:12px!important;
}
body .reference-product-card .saving-strip b{
font-size:10px!important;
}
/* Kart i?indeki yaz? ve g?rseli dar ekranda ta?madan dengeli tut */
body .reference-product-card .product-card-main{
grid-template-columns:165px minmax(0,1fr)!important;
gap:14px!important;
padding:14px 14px 8px!important;
}
body .reference-product-card .product-visual,
body .reference-product-card .product-visual.photo-source{
height:175px!important;
}
body .reference-product-card .product-visual img,
body .reference-product-card .product-visual.photo-source img{
max-width:170px!important;
max-height:170px!important;
}
}
/* Daha dar tablet g?r?n?m?nde ayn? buton mant??? korunsun. */
@media(min-width:761px) and (max-width:1200px){
body .reference-product-card .product-meta-row{
grid-template-columns:1fr!important;
gap:8px!important;
}
body .reference-product-card .card-actions{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
body .reference-product-card .card-actions .primary{
grid-column:1/-1!important;
}
}
/* V71: MacBook g?r?n?m?nde kazan? alan? tam geni?lik kaplas?n. */
@media(min-width:1201px) and (max-width:1500px){
body .reference-product-card .saving-strip{
width:100%!important;
min-width:100%!important;
max-width:100%!important;
justify-content:center!important;
margin:8px 0 0 0!important;
padding:0 12px!important;
border-radius:10px!important;
min-height:30px!important;
font-size:10px!important;
gap:6px!important;
}
body .reference-product-card .saving-strip b{
font-size:11px!important;
}
}
/* V72: responsive normal kartta fiyat marka sat?r?n?n kar??s?nda olsun. */
@media(max-width:1500px){
body .reference-product-card:not(.discounted) .product-meta-row{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
grid-template-areas:
"brand price"
"oem oem"!important;
gap:8px 12px!important;
align-items:center!important;
width:100%!important;
}
body .reference-product-card:not(.discounted) .product-meta-row > span:nth-of-type(1){
grid-area:brand!important;
width:auto!important;
}
body .reference-product-card:not(.discounted) .product-meta-row > span:nth-of-type(2){
grid-area:oem!important;
width:auto!important;
}
body .reference-product-card:not(.discounted) .product-meta-row .meta-price{
grid-area:price!important;
width:auto!important;
min-width:max-content!important;
justify-self:end!important;
align-self:center!important;
margin-left:auto!important;
text-align:right!important;
}
}
/* V73: MacBook Air g?r?n?m?nde normal kartta fiyat OEM'nin alt?na gelsin. */
@media(min-width:1201px) and (max-width:1500px){
body .reference-product-card:not(.discounted) .product-meta-row{
grid-template-columns:minmax(0,1fr)!important;
grid-template-areas:
"brand"
"oem"
"price"!important;
gap:8px!important;
align-items:start!important;
}
body .reference-product-card:not(.discounted) .product-meta-row > span:nth-of-type(1){
grid-area:brand!important;
}
body .reference-product-card:not(.discounted) .product-meta-row > span:nth-of-type(2){
grid-area:oem!important;
}
body .reference-product-card:not(.discounted) .product-meta-row .meta-price{
grid-area:price!important;
width:100%!important;
min-width:0!important;
justify-content:flex-start!important;
justify-self:start!important;
text-align:left!important;
margin-left:0!important;
margin-top:2px!important;
}
body .reference-product-card:not(.discounted) .product-meta-row .meta-price strong{
margin-left:0!important;
text-align:left!important;
}
}
/* V74: MacBook ve tablet geni?li?inde fiyat kesin olarak OEM sat?r?n?n alt?nda. */
@media(min-width:761px) and (max-width:1500px){
body .reference-product-card:not(.discounted) .product-meta-row{
display:grid!important;
grid-template-columns:1fr!important;
grid-template-rows:auto auto auto!important;
grid-template-areas:
"brand"
"oem"
"price"!important;
justify-content:stretch!important;
align-items:start!important;
gap:8px!important;
width:100%!important;
}
body .reference-product-card:not(.discounted) .product-meta-row > span:nth-child(1){
grid-area:brand!important;
width:100%!important;
}
body .reference-product-card:not(.discounted) .product-meta-row > span:nth-child(2){
grid-area:oem!important;
width:100%!important;
}
body .reference-product-card:not(.discounted) .product-meta-row > .meta-price{
grid-area:price!important;
display:flex!important;
width:100%!important;
min-width:0!important;
justify-content:flex-start!important;
justify-self:stretch!important;
align-self:start!important;
margin:2px 0 0 0!important;
text-align:left!important;
}
body .reference-product-card:not(.discounted) .product-meta-row > .meta-price strong{
margin:0!important;
text-align:left!important;
}
}
/* V75: kalp ikonlar? genel olarak k?rm?z? olsun. */
.favorite,
.favorite:hover,
.favorite:focus,
.favorite:active,
.favorite.active,
body .reference-product-card .favorite,
body .reference-product-card .favorite:hover,
body .reference-product-card .favorite:focus,
body .reference-product-card .favorite:active,
body .reference-product-card .favorite.active,
.product-card .favorite,
.product-card .favorite:hover,
.product-card .favorite:focus,
.product-card .favorite:active,
.product-card .favorite.active{
color:#e6495f!important;
}
.favorite svg,
body .reference-product-card .favorite svg,
.product-card .favorite svg{
stroke:#e6495f!important;
}
.favorite.active svg,
body .reference-product-card .favorite.active svg,
.product-card .favorite.active svg{
fill:#e6495f!important;
stroke:#e6495f!important;
}
/* V76: Ana ar?iv ve markaya ?zel ar?iv sayfalar?. */
.archive-brand-monogram{display:grid;place-items:center;border-radius:13px;background:hsl(var(--brand-hue,215) 88% 95%);color:hsl(var(--brand-hue,215) 75% 43%);font-weight:900;letter-spacing:-.5px}
.archive-brand-card{position:relative;padding-top:44px!important}
.archive-brand-back{position:absolute;left:18px;top:15px;display:inline-flex;align-items:center;gap:6px;color:#0a63df;text-decoration:none;font-size:11px;font-weight:750}
.archive-brand-back svg{width:14px;height:14px}
.archive-brand-logo{background:linear-gradient(135deg,#f7fbff,#eef6ff)!important;gap:12px}
.archive-brand-logo strong{font-size:14px;line-height:1.35;letter-spacing:-.2px}
.archive-brand-monogram{width:50px;height:50px;flex:0 0 50px;font-size:15px}
.archive-brand-monogram.has-logo{width:82px;flex-basis:82px}
.archive-brand-monogram img{display:block;width:72px;height:48px;object-fit:contain}
.archive-brand-monogram>svg{width:25px;height:25px}
body[data-archive-page="brand"] .brand-filter-card{display:none!important}
/* V77: ana ar?iv b?t?n ?r?nleri listeler; marka kart? yoktur. */
/* ========================================================================== */
/* V78: Ticari ?r?n kart?, sepet, stok, yorum, marka logosu ve OEM a??l?r alan */
/* ========================================================================== */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body .reference-product-card{
overflow:visible!important;
}
body .reference-product-card .product-card-main{
overflow:visible!important;
}
body .reference-product-card .product-info{
min-width:0!important;
position:relative!important;
overflow:visible!important;
}
body .reference-product-card .product-title-row{
display:flex!important;
align-items:flex-start!important;
justify-content:space-between!important;
gap:12px!important;
margin:0 30px 8px 0!important;
}
body .reference-product-card .product-title-row h3{
flex:1 1 auto!important;
min-width:0!important;
margin:0!important;
}
body .reference-product-card .stock-badge{
flex:0 0 auto!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-height:25px!important;
padding:4px 9px!important;
border-radius:999px!important;
font-size:10.5px!important;
font-weight:800!important;
line-height:1!important;
white-space:nowrap!important;
}
body .reference-product-card .stock-badge.in-stock{background:transparent!important;color:#138A45!important}
body .reference-product-card .stock-badge.out-stock{background:transparent!important;color:#C9354D!important}
body .reference-product-card .product-code-review-row{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:14px!important;
width:100%!important;
margin:0 0 10px!important;
padding:0 0 10px!important;
border-bottom:1px solid #DCE6F1!important;
}
body .reference-product-card .stock-code{
min-width:0!important;
display:inline-flex!important;
align-items:center!important;
gap:6px!important;
color:#617793!important;
font-size:11px!important;
white-space:nowrap!important;
}
body .reference-product-card .stock-code svg{width:16px!important;height:16px!important;stroke:#0A63DF!important}
body .reference-product-card .stock-code em{font-style:normal!important}
body .reference-product-card .stock-code strong{color:#0C2A4D!important;font-weight:800!important}
body .reference-product-card .product-review-summary{
flex:0 0 auto!important;
display:inline-flex!important;
align-items:center!important;
gap:7px!important;
min-height:27px!important;
padding:0!important;
border:0!important;
background:transparent!important;
color:#647A95!important;
font-size:10.5px!important;
cursor:pointer!important;
box-shadow:none!important;
transform:none!important;
}
body .reference-product-card .review-stars{display:inline-flex!important;align-items:center!important;gap:1px!important}
body .reference-product-card .review-star{font-style:normal!important;color:#CCD6E2!important;font-size:14px!important;line-height:1!important}
body .reference-product-card .review-star.filled{color:#F5AD1B!important}
body .reference-product-card .product-meta-row{
position:relative!important;
display:grid!important;
grid-template-columns:minmax(92px,auto) minmax(105px,auto) minmax(0,1fr)!important;
align-items:center!important;
gap:10px 14px!important;
margin:0 0 10px!important;
padding:10px 0!important;
}
body .reference-product-card .brand-logo-meta{
min-width:0!important;
display:inline-flex!important;
align-items:center!important;
gap:7px!important;
}
body .reference-product-card .brand-logo-meta>i{
flex:0 0 auto!important;
width:25px!important;
height:25px!important;
padding:5px!important;
border-radius:8px!important;
background:#F1F6FC!important;
stroke:#153D6D!important;
}
body .reference-product-card .brand-logo-meta img{
display:block!important;
width:auto!important;
max-width:88px!important;
height:26px!important;
object-fit:contain!important;
object-position:left center!important;
background:transparent!important;
}
body .reference-product-card .oem-toggle{
min-width:0!important;
display:inline-flex!important;
align-items:center!important;
justify-content:flex-start!important;
gap:6px!important;
min-height:31px!important;
padding:0 9px!important;
border:1px solid #D6E2F0!important;
border-radius:9px!important;
background:#F8FBFF!important;
color:#0A63DF!important;
font-size:11px!important;
font-weight:800!important;
cursor:pointer!important;
box-shadow:none!important;
transform:none!important;
}
body .reference-product-card .oem-toggle:hover,
body .reference-product-card .oem-toggle:focus{border-color:#0A63DF!important;background:#EEF5FF!important;box-shadow:none!important;transform:none!important}
body .reference-product-card .oem-toggle svg{width:16px!important;height:16px!important;transition:transform .16s ease!important}
body .reference-product-card .oem-toggle[aria-expanded="true"] svg{transform:rotate(45deg)!important}
body .reference-product-card .oem-popover{
position:absolute!important;
z-index:20!important;
top:49px!important;
left:102px!important;
width:min(290px,calc(100% - 10px))!important;
padding:12px!important;
border:1px solid #CFDCEB!important;
border-radius:12px!important;
background:#FFF!important;
box-shadow:0 16px 36px rgba(8,38,77,.16)!important;
}
body .reference-product-card .oem-popover[hidden]{display:none!important}
body .reference-product-card .oem-popover>strong{display:block!important;margin-bottom:8px!important;color:#0A294D!important;font-size:12px!important}
body .reference-product-card .oem-popover ul{display:grid!important;gap:6px!important;margin:0!important;padding:0!important;list-style:none!important}
body .reference-product-card .oem-popover li{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:7px 9px!important;border-radius:8px!important;background:#F4F8FD!important;color:#173A65!important;font-size:11px!important;font-weight:750!important}
body .reference-product-card .oem-popover li button{display:grid!important;place-items:center!important;width:25px!important;height:25px!important;border:0!important;border-radius:7px!important;background:#FFF!important;color:#0A63DF!important;cursor:pointer!important}
body .reference-product-card .oem-popover li svg{width:14px!important;height:14px!important}
body .reference-product-card .current-price-wrap{
display:inline-flex!important;
align-items:baseline!important;
justify-content:flex-end!important;
gap:5px!important;
min-width:0!important;
}
body .reference-product-card .current-price-wrap strong{white-space:nowrap!important}
body .reference-product-card .current-price-wrap small{
color:#7387A0!important;
font-size:9px!important;
font-weight:700!important;
white-space:nowrap!important;
}
body .reference-product-card:not(.discounted) .meta-price{
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
width:100%!important;
margin-left:auto!important;
}
body .reference-product-card:not(.discounted) .meta-price .current-price-wrap strong{color:#0A63DF!important;font-size:20px!important;line-height:1!important}
body .reference-product-card .discount-price-row{
grid-template-columns:auto auto minmax(0,1fr)!important;
align-items:center!important;
}
body .reference-product-card .discount-price-row .current-price-wrap{justify-self:end!important}
body .reference-product-card.discounted .discount-price-row .current-price-wrap strong{color:#15924A!important}
body .reference-product-card .product-visual{position:relative!important;overflow:visible!important}
body .reference-product-card .vehicle-compatible-badge{
position:absolute!important;
z-index:4!important;
left:50%!important;
bottom:4px!important;
transform:translateX(-50%)!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:6px!important;
min-width:max-content!important;
min-height:30px!important;
padding:0 10px!important;
border:1px solid #32B668!important;
border-radius:999px!important;
background:#E7F9EE!important;
color:#128A45!important;
font-size:10.5px!important;
font-weight:850!important;
box-shadow:0 8px 18px rgba(18,138,69,.12)!important;
}
body .reference-product-card .vehicle-compatible-badge svg{width:16px!important;height:16px!important}
body .reference-product-card.discounted,
body .reference-product-card.discounted:hover,
body .reference-product-card.discounted:focus-within{
border-color:#20A95A!important;
animation:parcanetGreenDiscountPulse 1.4s ease-in-out infinite!important;
}
@keyframes parcanetGreenDiscountPulse{
0%,100%{border-color:#20A95A;box-shadow:0 0 0 0 rgba(32,169,90,0)!important}
50%{border-color:#72D49A;box-shadow:0 0 0 3px rgba(32,169,90,.11)!important}
}
body .reference-product-card.discounted .category-pill{background:#E8F8EE!important;color:#138A45!important}
body .reference-product-card.discounted .category-pill i{stroke:#138A45!important}
body .reference-product-card.discounted .discount-badge{background:#E5F8EC!important;color:#128B46!important}
body .reference-product-card.discounted .saving-strip{background:#E7F8ED!important;color:#128A45!important}
body .reference-product-card .card-actions{
grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(150px,1fr)!important;
align-items:end!important;
}
body .reference-product-card .quantity-control{
display:grid!important;
grid-template-columns:auto 30px minmax(40px,1fr) 30px!important;
align-items:center!important;
gap:5px!important;
min-height:31px!important;
padding:3px 5px 3px 9px!important;
border:1px solid #D5E1EE!important;
border-radius:9px!important;
background:#F8FBFF!important;
color:#5A708C!important;
font-size:10px!important;
font-weight:750!important;
}
body .reference-product-card .quantity-control button{
display:grid!important;
place-items:center!important;
width:30px!important;
height:25px!important;
padding:0!important;
border:0!important;
border-radius:7px!important;
background:#E9F2FF!important;
color:#0A63DF!important;
font-size:17px!important;
font-weight:800!important;
cursor:pointer!important;
}
body .reference-product-card .quantity-control input{
width:100%!important;
min-width:0!important;
height:25px!important;
padding:0 4px!important;
border:0!important;
outline:0!important;
background:transparent!important;
color:#0B2A50!important;
text-align:center!important;
font-size:12px!important;
font-weight:850!important;
-moz-appearance:textfield!important;
}
body .reference-product-card .quantity-control input::-webkit-outer-spin-button,
body .reference-product-card .quantity-control input::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0!important}
body .reference-product-card .add-cart-button{
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
height:42px!important;
}
body .reference-product-card .add-cart-button svg{width:18px!important;height:18px!important}
body .reference-product-card.out-of-stock .product-visual img{opacity:.62!important;filter:grayscale(.25)!important}
body .reference-product-card .add-cart-button:disabled,
body .reference-product-card .quantity-control button:disabled,
body .reference-product-card .quantity-control input:disabled{cursor:not-allowed!important;opacity:.55!important}
body .reference-product-card .add-cart-button:disabled{background:#AAB7C7!important;border-color:#AAB7C7!important}
@media(max-width:1500px){
body .reference-product-card .product-title-row{margin-right:26px!important}
body .reference-product-card .product-code-review-row{align-items:flex-start!important;flex-direction:column!important;gap:7px!important}
body .reference-product-card .product-meta-row{grid-template-columns:minmax(90px,1fr) minmax(105px,1fr)!important}
body .reference-product-card .meta-price{grid-column:1/-1!important;justify-content:flex-start!important;margin-left:0!important}
body .reference-product-card .oem-popover{left:0!important;top:88px!important}
body .reference-product-card .card-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:900px){
body .reference-product-card .product-title-row{flex-direction:column!important;gap:7px!important;margin-right:24px!important}
body .reference-product-card .stock-badge{align-self:flex-start!important}
body .reference-product-card .product-meta-row{grid-template-columns:1fr!important}
body .reference-product-card .meta-price{grid-column:auto!important}
body .reference-product-card .oem-popover{top:120px!important;width:100%!important}
}
@media(max-width:700px){
body .reference-product-card .product-code-review-row{padding-bottom:8px!important}
body .reference-product-card .stock-code{white-space:normal!important;flex-wrap:wrap!important}
body .reference-product-card .product-review-summary{align-items:flex-start!important;flex-direction:column!important;gap:4px!important}
body .reference-product-card .brand-logo-meta img{max-width:80px!important;height:24px!important}
body .reference-product-card .card-actions{grid-template-columns:1fr!important}
body .reference-product-card .vehicle-compatible-badge{bottom:-3px!important;font-size:9.5px!important}
}
/* V79 d?zeltmeleri: kompakt miktar kontrol?, ?st uyumluluk rozeti, OEM paneli, daha b?y?k fontlar */
body .reference-product-card{
min-height:392px!important;
height:392px!important;
}
body .reference-product-card::before{inset:0 0 42px 0!important}
body .reference-product-card::after{height:78px!important}
body .reference-product-card .product-visual{
top:74px!important;
width:192px!important;
height:192px!important;
}
body .reference-product-card .product-info{
top:44px!important;
left:238px!important;
right:18px!important;
}
body .reference-product-card .category-pill{
top:18px!important;
left:18px!important;
padding:8px 14px!important;
font-size:12.5px!important;
}
body .reference-product-card.compatible-card .category-pill{
left:170px!important;
}
body .reference-product-card .vehicle-compatible-badge{
position:absolute!important;
z-index:8!important;
left:18px!important;
top:18px!important;
bottom:auto!important;
transform:none!important;
min-height:34px!important;
padding:0 12px!important;
font-size:12px!important;
box-shadow:none!important;
}
body .reference-product-card .vehicle-compatible-badge svg{
width:16px!important;height:16px!important;
}
body .reference-product-card .product-title-row{
align-items:flex-start!important;
justify-content:space-between!important;
gap:14px!important;
margin:0 28px 10px 0!important;
}
body .reference-product-card .product-title-row h3{
font-size:18px!important;
line-height:1.22!important;
}
body .reference-product-card .stock-badge{
margin-left:auto!important;
align-self:flex-start!important;
min-height:28px!important;
padding:5px 11px!important;
font-size:11.5px!important;
}
body .reference-product-card .product-code-review-row{
margin:0 0 8px!important;
padding:0!important;
border-bottom:0!important;
}
body .reference-product-card .stock-code,
body .reference-product-card .product-review-summary{font-size:12px!important}
body .reference-product-card .stock-code svg{width:17px!important;height:17px!important}
body .reference-product-card .product-review-summary span:last-child{font-size:12px!important}
body .reference-product-card .review-star{font-size:15px!important}
body .reference-product-card .product-meta-row{
grid-template-columns:minmax(120px,auto) minmax(132px,auto) minmax(0,1fr)!important;
gap:12px 16px!important;
margin:0 0 12px!important;
padding:9px 0 10px!important;
}
body .reference-product-card .brand-logo-meta{gap:8px!important;font-size:12px!important}
body .reference-product-card .brand-logo-meta>i{width:26px!important;height:26px!important}
body .reference-product-card .brand-logo-meta img{max-width:92px!important;height:28px!important}
body .reference-product-card .oem-toggle{
min-height:33px!important;
padding:0 10px!important;
font-size:12px!important;
}
body .reference-product-card .oem-popover{
top:44px!important;
left:118px!important;
width:min(300px,calc(100% - 4px))!important;
padding:13px!important;
}
body .reference-product-card .oem-popover>strong{font-size:13px!important}
body .reference-product-card .oem-popover li{font-size:12px!important}
body .reference-product-card .current-price-wrap small{font-size:10px!important}
body .reference-product-card:not(.discounted) .meta-price .current-price-wrap strong{font-size:22px!important}
body .reference-product-card .product-price-panel{margin-top:2px!important}
body .reference-product-card .discount-price-row{gap:10px!important}
body .reference-product-card .discount-price-row del{font-size:15px!important}
body .reference-product-card .discount-badge{font-size:12px!important}
body .reference-product-card.discounted .discount-price-row .current-price-wrap strong{font-size:20px!important}
body .reference-product-card .saving-strip{
gap:7px!important;
min-height:40px!important;
padding:0 12px!important;
}
body .reference-product-card .saving-strip b,
body .reference-product-card .saving-strip span{font-size:12px!important}
body .reference-product-card .card-actions{
left:18px!important;
right:18px!important;
bottom:16px!important;
gap:10px!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) 172px!important;
align-items:end!important;
}
body .reference-product-card .card-actions button,
body .reference-product-card .card-actions a{
height:46px!important;
min-height:46px!important;
font-size:12px!important;
padding:0 12px!important;
}
body .reference-product-card .quantity-control{
justify-self:end!important;
width:140px!important;
grid-template-columns:auto 24px 34px 24px!important;
gap:4px!important;
min-height:28px!important;
padding:2px 4px 2px 8px!important;
font-size:11px!important;
}
body .vehicle-catalog-steps li.completed>span::before{
display:none!important;
content:none!important;
}
body .reference-product-card .quantity-control span{font-size:11px!important}
body .reference-product-card .quantity-control button{
width:24px!important;
height:24px!important;
border-radius:6px!important;
font-size:15px!important;
}
body .reference-product-card .quantity-control input{
height:24px!important;
font-size:11px!important;
}
body .reference-product-card .add-cart-button{
height:46px!important;
min-height:46px!important;
}
body .reference-product-card .add-cart-button svg{width:18px!important;height:18px!important}
body .reference-product-card:hover,
body .reference-product-card:focus-within,
body .reference-product-card:hover::before,
body .reference-product-card:focus-within::before{
transform:none!important;
box-shadow:none!important;
}
@media(max-width:1500px){
body .reference-product-card .product-code-review-row{flex-direction:row!important;align-items:center!important}
body .reference-product-card .product-meta-row{grid-template-columns:minmax(112px,1fr) minmax(128px,1fr) minmax(0,1fr)!important}
body .reference-product-card .oem-popover{left:0!important;top:86px!important;width:min(300px,100%)!important}
}
@media(max-width:900px){
body .reference-product-card.compatible-card .category-pill{left:18px!important;top:56px!important}
body .reference-product-card .vehicle-compatible-badge{top:18px!important;left:18px!important}
}
/* V80: ?r?n bilgi alan? kart i?ine s??s?n, adet se?ici ?r?n g?rselinin alt?nda dursun. */
body .reference-product-card .product-info{
position:absolute!important;
left:205px!important;
right:16px!important;
top:42px!important;
width:auto!important;
max-width:calc(100% - 221px)!important;
min-width:0!important;
box-sizing:border-box!important;
overflow:visible!important;
transform:none!important;
}
body .reference-product-card .product-title-row{
width:100%!important;
margin-right:0!important;
padding-right:30px!important;
box-sizing:border-box!important;
}
body .reference-product-card .product-title-row h3{
overflow-wrap:anywhere!important;
}
body .reference-product-card .product-code-review-row,
body .reference-product-card .product-meta-row,
body .reference-product-card .product-price-panel{
width:100%!important;
max-width:100%!important;
box-sizing:border-box!important;
}
body .reference-product-card .product-meta-row{
grid-template-columns:minmax(100px,1fr) minmax(120px,auto) minmax(0,1fr)!important;
}
body .reference-product-card .visual-quantity-control{
position:absolute!important;
z-index:9!important;
left:38px!important;
top:273px!important;
width:150px!important;
min-height:27px!important;
height:27px!important;
display:grid!important;
grid-template-columns:auto 22px 30px 22px!important;
align-items:center!important;
gap:4px!important;
padding:2px 4px 2px 8px!important;
border:1px solid #D5E1EE!important;
border-radius:8px!important;
background:#F8FBFF!important;
color:#5A708C!important;
font-size:10px!important;
font-weight:750!important;
box-sizing:border-box!important;
}
body .reference-product-card .visual-quantity-control>span{
font-size:10px!important;
white-space:nowrap!important;
}
body .reference-product-card .visual-quantity-control button{
width:22px!important;
height:21px!important;
min-height:21px!important;
padding:0!important;
border:0!important;
border-radius:5px!important;
background:#E9F2FF!important;
color:#0A63DF!important;
font-size:13px!important;
line-height:1!important;
box-shadow:none!important;
transform:none!important;
}
body .reference-product-card .visual-quantity-control input{
width:30px!important;
height:21px!important;
min-height:21px!important;
padding:0!important;
border:0!important;
outline:0!important;
background:transparent!important;
color:#0B2A50!important;
text-align:center!important;
font-size:10.5px!important;
font-weight:850!important;
-moz-appearance:textfield!important;
}
body .reference-product-card .visual-quantity-control input::-webkit-outer-spin-button,
body .reference-product-card .visual-quantity-control input::-webkit-inner-spin-button{
-webkit-appearance:none!important;
margin:0!important;
}
body .reference-product-card .card-actions{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
align-items:center!important;
}
body .reference-product-card .add-cart-button{
width:100%!important;
min-width:0!important;
margin:0!important;
}
@media(max-width:1500px){
body .reference-product-card .product-info{
left:188px!important;
right:14px!important;
max-width:calc(100% - 202px)!important;
top:40px!important;
}
body .reference-product-card .product-visual{
left:20px!important;
width:155px!important;
height:165px!important;
}
body .reference-product-card .visual-quantity-control{
left:28px!important;
top:250px!important;
width:140px!important;
}
body .reference-product-card .product-meta-row{
grid-template-columns:minmax(90px,1fr) minmax(112px,auto)!important;
}
body .reference-product-card .meta-price{
grid-column:1/-1!important;
}
}
/* =========================================================
V81: Referans g?rseldeki yatay ?r?n kart? d?zeni
========================================================= */
body .reference-product-card,
body .reference-product-card.discounted{
position:relative!important;
display:block!important;
width:100%!important;
min-width:0!important;
height:392px!important;
min-height:392px!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
border:1px solid #dce6f1!important;
border-radius:20px!important;
background:#fff!important;
box-shadow:none!important;
clip-path:none!important;
transform:none!important;
}
body .reference-product-card.discounted{
border:2px solid #11a94f!important;
}
body .reference-product-card::before,
body .reference-product-card::after{
display:none!important;
content:none!important;
}
body .reference-product-card .product-card-main{
position:static!important;
display:block!important;
width:100%!important;
height:100%!important;
min-height:0!important;
margin:0!important;
padding:0!important;
overflow:visible!important;
}
body .reference-product-card .favorite{
top:15px!important;
right:14px!important;
width:30px!important;
height:30px!important;
}
body .reference-product-card .favorite svg{
width:21px!important;
height:21px!important;
stroke-width:1.65!important;
}
body .reference-product-card .product-visual,
body .reference-product-card .product-visual.photo-source{
position:absolute!important;
z-index:2!important;
left:20px!important;
top:55px!important;
width:176px!important;
height:190px!important;
min-height:0!important;
margin:0!important;
padding:0!important;
display:grid!important;
place-items:center!important;
transform:none!important;
}
body .reference-product-card .product-visual img,
body .reference-product-card:hover .product-visual img,
body .reference-product-card .product-visual.photo-source img{
width:100%!important;
height:100%!important;
max-width:176px!important;
max-height:190px!important;
object-fit:contain!important;
transform:none!important;
filter:drop-shadow(0 9px 10px rgba(8,41,85,.11))!important;
}
body .reference-product-card .product-info{
position:absolute!important;
z-index:4!important;
left:210px!important;
right:17px!important;
top:65px!important;
width:auto!important;
max-width:none!important;
min-width:0!important;
height:auto!important;
margin:0!important;
padding:0!important;
display:block!important;
overflow:visible!important;
box-sizing:border-box!important;
transform:none!important;
}
body .reference-product-card.discounted .product-info{
top:14px!important;
}
body .reference-product-card .category-pill,
body .reference-product-card.compatible-card .category-pill{
position:static!important;
inset:auto!important;
width:max-content!important;
min-height:27px!important;
height:27px!important;
margin:0 0 8px!important;
padding:0 13px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:6px!important;
border-radius:999px!important;
background:#eaf3ff!important;
color:#0962df!important;
font-size:12px!important;
font-weight:800!important;
line-height:1!important;
box-sizing:border-box!important;
}
body .reference-product-card .category-pill svg,
body .reference-product-card .category-pill i{
width:16px!important;
height:16px!important;
}
body .reference-product-card.discounted .category-pill{
background:#e7f8ed!important;
color:#138a45!important;
}
body .reference-product-card .product-title-row{
display:flex!important;
align-items:flex-start!important;
justify-content:space-between!important;
gap:12px!important;
width:100%!important;
min-height:29px!important;
margin:0 0 7px!important;
padding:0 30px 0 0!important;
box-sizing:border-box!important;
}
body .reference-product-card .product-title-row h3{
flex:1 1 auto!important;
min-width:0!important;
width:auto!important;
max-width:none!important;
margin:0!important;
color:#071d3a!important;
font-size:17px!important;
line-height:1.28!important;
font-weight:850!important;
letter-spacing:-.35px!important;
overflow-wrap:normal!important;
word-break:normal!important;
white-space:normal!important;
}
body .reference-product-card .stock-badge{
flex:0 0 auto!important;
align-self:flex-start!important;
min-height:28px!important;
height:28px!important;
margin:-3px 0 0!important;
padding:0 12px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
border-radius:999px!important;
font-size:11px!important;
line-height:1!important;
font-weight:800!important;
white-space:nowrap!important;
}
body .reference-product-card .product-code-review-row{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:12px!important;
width:100%!important;
min-height:33px!important;
margin:0!important;
padding:0 0 8px!important;
border-bottom:1px solid #dbe5ef!important;
box-sizing:border-box!important;
}
body .reference-product-card .stock-code{
display:inline-flex!important;
align-items:center!important;
gap:6px!important;
min-width:0!important;
color:#687d96!important;
font-size:11px!important;
white-space:nowrap!important;
}
body .reference-product-card .stock-code svg{
width:16px!important;
height:16px!important;
}
body .reference-product-card .product-review-summary{
flex:0 0 auto!important;
min-height:24px!important;
gap:6px!important;
color:#6b8099!important;
font-size:10.5px!important;
white-space:nowrap!important;
}
body .reference-product-card .review-star{
font-size:14px!important;
}
body .reference-product-card .product-meta-row{
position:relative!important;
display:grid!important;
grid-template-columns:minmax(105px,1fr) minmax(120px,auto) minmax(0,1fr)!important;
align-items:center!important;
gap:10px 12px!important;
width:100%!important;
min-height:54px!important;
margin:0!important;
padding:8px 0 10px!important;
box-sizing:border-box!important;
}
body .reference-product-card .brand-logo-meta{
display:inline-flex!important;
align-items:center!important;
gap:7px!important;
min-width:0!important;
}
body .reference-product-card .brand-logo-meta>i,
body .reference-product-card .brand-logo-meta>svg{
flex:0 0 auto!important;
width:24px!important;
height:24px!important;
padding:5px!important;
border-radius:8px!important;
background:#f2f6fb!important;
box-sizing:border-box!important;
}
body .reference-product-card .brand-logo-meta img{
width:auto!important;
max-width:86px!important;
height:25px!important;
object-fit:contain!important;
object-position:left center!important;
}
body .reference-product-card .oem-toggle{
justify-self:start!important;
min-width:120px!important;
min-height:34px!important;
height:34px!important;
padding:0 11px!important;
border:1px solid #d4e1ef!important;
border-radius:9px!important;
background:#f8fbff!important;
color:#526985!important;
font-size:11px!important;
font-weight:800!important;
}
body .reference-product-card .meta-price{
grid-column:auto!important;
justify-self:end!important;
width:auto!important;
margin:0!important;
}
body .reference-product-card:not(.discounted) .meta-price .current-price-wrap strong{
color:#0a63df!important;
font-size:22px!important;
line-height:1!important;
}
body .reference-product-card .current-price-wrap{
gap:5px!important;
}
body .reference-product-card .current-price-wrap small{
font-size:9px!important;
}
body .reference-product-card .product-price-panel{
width:100%!important;
min-height:93px!important;
height:93px!important;
margin:0!important;
padding:10px 12px!important;
border:1px solid #d6e1ec!important;
border-radius:14px!important;
background:#fff!important;
box-shadow:none!important;
box-sizing:border-box!important;
}
body .reference-product-card .discount-price-row{
display:grid!important;
grid-template-columns:auto auto minmax(0,1fr)!important;
align-items:center!important;
gap:10px!important;
min-height:24px!important;
}
body .reference-product-card .discount-price-row del{
color:#5b6e84!important;
font-size:14px!important;
}
body .reference-product-card .discount-badge{
min-height:23px!important;
height:23px!important;
padding:0 10px!important;
border-radius:7px!important;
background:#e8f8ed!important;
color:#118c43!important;
font-size:11.5px!important;
font-weight:800!important;
}
body .reference-product-card.discounted .discount-price-row .current-price-wrap strong{
color:#15924a!important;
font-size:20px!important;
line-height:1!important;
}
body .reference-product-card .saving-strip{
min-height:40px!important;
height:40px!important;
margin-top:7px!important;
padding:0 12px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:7px!important;
border-radius:10px!important;
background:#e7f8ed!important;
color:#128a45!important;
font-size:12px!important;
}
body .reference-product-card .oem-popover{
top:48px!important;
left:0!important;
width:min(300px,100%)!important;
}
body .reference-product-card .vehicle-compatible-badge{
left:18px!important;
top:18px!important;
bottom:auto!important;
transform:none!important;
}
body .reference-product-card.compatible-card .product-visual{
top:62px!important;
}
body .reference-product-card .visual-quantity-control{
position:absolute!important;
z-index:10!important;
left:auto!important;
right:196px!important;
top:auto!important;
bottom:16px!important;
width:24px!important;
height:58px!important;
min-height:58px!important;
margin:0!important;
padding:2px!important;
display:grid!important;
grid-template-columns:1fr!important;
grid-template-rows:18px 18px 18px!important;
align-items:center!important;
justify-items:center!important;
gap:0!important;
border:1px solid #d5e1ee!important;
border-radius:8px!important;
background:#f8fbff!important;
box-sizing:border-box!important;
}
body .reference-product-card .visual-quantity-control>span{
display:none!important;
}
body .reference-product-card .visual-quantity-control button,
body .reference-product-card .visual-quantity-control input{
width:18px!important;
height:18px!important;
min-height:18px!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:5px!important;
background:#e9f2ff!important;
color:#0a63df!important;
text-align:center!important;
font-size:11px!important;
line-height:18px!important;
font-weight:850!important;
box-shadow:none!important;
}
body .reference-product-card .visual-quantity-control input{
border-radius:0!important;
background:transparent!important;
color:#0b2a50!important;
font-size:10px!important;
}
body .reference-product-card .card-actions{
position:absolute!important;
z-index:9!important;
left:18px!important;
right:18px!important;
bottom:16px!important;
width:auto!important;
height:46px!important;
min-height:46px!important;
margin:0!important;
padding:0!important;
display:block!important;
overflow:visible!important;
background:transparent!important;
}
body .reference-product-card .card-actions>button,
body .reference-product-card .card-actions>a{
position:absolute!important;
top:0!important;
bottom:auto!important;
height:46px!important;
min-height:46px!important;
margin:0!important;
padding:0 12px!important;
border-radius:9px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
font-size:12px!important;
font-weight:800!important;
box-sizing:border-box!important;
}
body .reference-product-card .card-actions>button:first-child{
left:0!important;
right:auto!important;
width:180px!important;
}
body .reference-product-card .card-actions>a.whatsapp{
left:200px!important;
right:auto!important;
width:180px!important;
}
body .reference-product-card .card-actions>.primary{
left:auto!important;
right:0!important;
width:170px!important;
background:#0a63df!important;
border-color:#0a63df!important;
color:#fff!important;
box-shadow:none!important;
}
body .reference-product-card:hover,
body .reference-product-card:focus-within{
transform:none!important;
box-shadow:none!important;
}
@media(max-width:1500px){
body .reference-product-card .product-info{
left:190px!important;
right:14px!important;
}
body .reference-product-card .product-visual,
body .reference-product-card .product-visual.photo-source{
left:15px!important;
width:160px!important;
height:180px!important;
}
body .reference-product-card .product-title-row h3{
font-size:16px!important;
}
body .reference-product-card .card-actions>button:first-child{
width:calc((100% - 217px)/2)!important;
}
body .reference-product-card .card-actions>a.whatsapp{
left:calc((100% - 217px)/2 + 18px)!important;
width:calc((100% - 217px)/2)!important;
}
}
@media(max-width:1200px){
body .product-grid{
grid-template-columns:1fr!important;
}
body .reference-product-card{
max-width:760px!important;
margin-inline:auto!important;
}
}
@media(max-width:700px){
body .reference-product-card,
body .reference-product-card.discounted{
height:auto!important;
min-height:630px!important;
}
body .reference-product-card .product-visual,
body .reference-product-card .product-visual.photo-source{
left:50%!important;
top:48px!important;
width:205px!important;
height:210px!important;
transform:translateX(-50%)!important;
}
body .reference-product-card .product-info,
body .reference-product-card.discounted .product-info{
left:18px!important;
right:18px!important;
top:275px!important;
}
body .reference-product-card .category-pill{
margin-bottom:10px!important;
}
body .reference-product-card .product-meta-row{
grid-template-columns:1fr 1fr!important;
}
body .reference-product-card .meta-price{
grid-column:1/-1!important;
justify-self:start!important;
}
body .reference-product-card .visual-quantity-control{
right:18px!important;
bottom:80px!important;
width:92px!important;
height:28px!important;
min-height:28px!important;
grid-template-columns:22px 36px 22px!important;
grid-template-rows:1fr!important;
}
body .reference-product-card .card-actions{
left:18px!important;
right:18px!important;
bottom:16px!important;
height:46px!important;
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:10px!important;
}
body .reference-product-card .card-actions>button,
body .reference-product-card .card-actions>a,
body .reference-product-card .card-actions>button:first-child,
body .reference-product-card .card-actions>a.whatsapp,
body .reference-product-card .card-actions>.primary{
position:static!important;
width:100%!important;
}
body .reference-product-card .card-actions>.primary{
grid-column:1/-1!important;
margin-top:10px!important;
}
}
/* V81.1: piksel hizalama ve CTA ?ak??ma d?zeltmesi */
body .reference-product-card .product-info{
right:35px!important;
}
body .reference-product-card .stock-badge{
margin-right:0!important;
}
body .reference-product-card.discounted .product-price-panel{
margin-top:14px!important;
}
body .reference-product-card:not(.discounted) .product-code-review-row{
padding-bottom:20px!important;
}
body .reference-product-card .product-visual,
body .reference-product-card .product-visual.photo-source{
left:14px!important;
width:182px!important;
}
body .reference-product-card.discounted .product-visual,
body .reference-product-card.discounted .product-visual.photo-source{
top:48px!important;
}
body .reference-product-card:not(.discounted) .product-visual,
body .reference-product-card:not(.discounted) .product-visual.photo-source{
top:59px!important;
}
body .reference-product-card .card-actions>.primary{
position:absolute!important;
top:0!important;
bottom:auto!important;
left:auto!important;
right:0!important;
width:170px!important;
height:46px!important;
min-height:46px!important;
margin:0!important;
}
@media(max-width:1500px){
body .reference-product-card .product-info{
right:22px!important;
}
body .reference-product-card .product-visual,
body .reference-product-card .product-visual.photo-source{
left:12px!important;
width:164px!important;
}
}
/* V81.2: dar masa?st?nde iki s?tunu bozmadan okunabilirli?i koru */
body .reference-product-card .product-meta-row{
border-top:0!important;
border-bottom:0!important;
}
body .reference-product-card .category-pill,
body .reference-product-card.compatible-card .category-pill{
padding-left:17px!important;
padding-right:17px!important;
}
@media(min-width:1201px) and (max-width:1500px){
body .reference-product-card .product-info,
body .reference-product-card.discounted .product-info{
left:178px!important;
right:14px!important;
}
body .reference-product-card .product-visual,
body .reference-product-card .product-visual.photo-source{
left:8px!important;
width:158px!important;
height:176px!important;
}
body .reference-product-card.discounted .product-visual,
body .reference-product-card.discounted .product-visual.photo-source{
top:52px!important;
}
body .reference-product-card:not(.discounted) .product-visual,
body .reference-product-card:not(.discounted) .product-visual.photo-source{
top:62px!important;
}
body .reference-product-card .category-pill,
body .reference-product-card.compatible-card .category-pill{
min-height:25px!important;
height:25px!important;
padding:0 12px!important;
font-size:10.5px!important;
}
body .reference-product-card .product-title-row{
gap:8px!important;
padding-right:24px!important;
}
body .reference-product-card .product-title-row h3{
font-size:15px!important;
line-height:1.25!important;
}
body .reference-product-card .stock-badge{
height:25px!important;
min-height:25px!important;
padding:0 9px!important;
font-size:9.5px!important;
}
body .reference-product-card .stock-code,
body .reference-product-card .product-review-summary{
font-size:9.5px!important;
}
body .reference-product-card .product-review-summary span:last-child{
display:none!important;
}
body .reference-product-card .product-meta-row{
grid-template-columns:minmax(78px,1fr) minmax(94px,auto)!important;
gap:7px!important;
}
body .reference-product-card .brand-logo-meta img{
max-width:64px!important;
height:22px!important;
}
body .reference-product-card .oem-toggle{
min-width:94px!important;
padding:0 7px!important;
font-size:9.5px!important;
}
body .reference-product-card:not(.discounted) .meta-price{
grid-column:1/-1!important;
justify-self:end!important;
}
body .reference-product-card .product-price-panel{
padding-left:10px!important;
padding-right:10px!important;
}
body .reference-product-card .discount-price-row{
gap:6px!important;
}
body .reference-product-card .discount-price-row del{
font-size:12px!important;
}
body .reference-product-card .discount-badge{
padding:0 7px!important;
font-size:10px!important;
}
body .reference-product-card.discounted .discount-price-row .current-price-wrap strong{
font-size:18px!important;
}
body .reference-product-card .current-price-wrap small{
font-size:8px!important;
}
body .reference-product-card .visual-quantity-control{
right:166px!important;
}
body .reference-product-card .card-actions>button,
body .reference-product-card .card-actions>a{
padding:0 4px!important;
gap:4px!important;
font-size:9.5px!important;
}
body .reference-product-card .card-actions>button:first-child{
width:calc((100% - 188px)/2)!important;
}
body .reference-product-card .card-actions>a.whatsapp{
left:calc((100% - 188px)/2 + 10px)!important;
width:calc((100% - 188px)/2)!important;
}
body .reference-product-card .card-actions>.primary{
width:140px!important;
}
}
/* V81.3: ?r?n g?rseli referans ?l??s?ne son hizalama */
@media(min-width:1501px){
body .reference-product-card .product-visual,
body .reference-product-card .product-visual.photo-source{
left:17px!important;
width:186px!important;
height:186px!important;
}
}
/* V81.4: telefon g?r?n?m?nde ta?ma ve buton ?ak??mas? d?zeltmesi */
@media(max-width:700px){
body .reference-product-card,
body .reference-product-card.discounted{
width:100%!important;
max-width:none!important;
height:auto!important;
min-height:0!important;
}
body .reference-product-card .product-visual,
body .reference-product-card .product-visual.photo-source,
body .reference-product-card.discounted .product-visual,
body .reference-product-card.discounted .product-visual.photo-source,
body .reference-product-card:not(.discounted) .product-visual,
body .reference-product-card:not(.discounted) .product-visual.photo-source{
position:relative!important;
left:auto!important;
right:auto!important;
top:auto!important;
width:100%!important;
height:210px!important;
transform:none!important;
}
body .reference-product-card .product-visual img,
body .reference-product-card:hover .product-visual img,
body .reference-product-card .product-visual.photo-source img{
width:100%!important;
height:100%!important;
max-width:210px!important;
max-height:210px!important;
}
body .reference-product-card .product-info,
body .reference-product-card.discounted .product-info{
position:static!important;
left:auto!important;
right:auto!important;
top:auto!important;
width:100%!important;
max-width:none!important;
}
body .reference-product-card .product-title-row{
min-height:32px!important;
padding-right:28px!important;
}
body .reference-product-card .product-title-row h3{
font-size:18px!important;
line-height:1.28!important;
}
body .reference-product-card .stock-badge{
min-height:26px!important;
height:26px!important;
padding:0 9px!important;
font-size:10px!important;
}
body .reference-product-card .product-code-review-row{
min-height:36px!important;
padding-bottom:9px!important;
}
body .reference-product-card:not(.discounted) .product-code-review-row{
padding-bottom:12px!important;
}
body .reference-product-card .stock-code,
body .reference-product-card .product-review-summary{
font-size:10px!important;
}
body .reference-product-card .product-review-summary span:last-child{
display:none!important;
}
body .reference-product-card .product-meta-row{
grid-template-columns:minmax(0,1fr) minmax(110px,auto)!important;
min-height:52px!important;
gap:8px!important;
}
body .reference-product-card:not(.discounted) .meta-price{
grid-column:1/-1!important;
justify-self:end!important;
}
body .reference-product-card .product-price-panel{
height:96px!important;
min-height:96px!important;
margin-top:8px!important;
}
body .reference-product-card .discount-price-row{
gap:6px!important;
}
body .reference-product-card .discount-price-row del{
font-size:12px!important;
}
body .reference-product-card .discount-badge{
padding:0 7px!important;
font-size:10px!important;
}
body .reference-product-card.discounted .discount-price-row .current-price-wrap strong{
font-size:18px!important;
}
body .reference-product-card .visual-quantity-control{
position:relative!important;
left:auto!important;
right:auto!important;
top:auto!important;
bottom:auto!important;
width:92px!important;
height:28px!important;
min-height:28px!important;
grid-template-columns:22px 36px 22px!important;
grid-template-rows:1fr!important;
transform:none!important;
}
body .reference-product-card .card-actions{
position:static!important;
left:auto!important;
right:auto!important;
top:auto!important;
bottom:auto!important;
width:100%!important;
height:auto!important;
min-height:0!important;
display:grid!important;
grid-template-columns:1fr 1fr!important;
grid-template-rows:auto auto!important;
gap:10px!important;
}
body .reference-product-card .card-actions>button,
body .reference-product-card .card-actions>a,
body .reference-product-card .card-actions>button:first-child,
body .reference-product-card .card-actions>a.whatsapp,
body .reference-product-card .card-actions>.primary{
position:static!important;
inset:auto!important;
width:100%!important;
height:46px!important;
min-height:46px!important;
margin:0!important;
padding:0 7px!important;
font-size:10.5px!important;
}
body .reference-product-card .card-actions>.primary{
grid-column:1/-1!important;
}
}
/* V82 kullan?c? revizyonlar? */
body .reference-product-card .product-visual,
body .reference-product-card .product-visual.photo-source{
justify-content:center!important;
align-items:center!important;
text-align:center!important;
margin-inline:auto!important;
}
body .reference-product-card .product-visual img,
body .reference-product-card:hover .product-visual img,
body .reference-product-card .product-visual.photo-source img{
margin:0 auto!important;
}
body .reference-product-card .oem-toggle{
background:transparent!important;
box-shadow:none!important;
}
body .reference-product-card .oem-toggle:hover,
body .reference-product-card .oem-toggle:active,
body .reference-product-card .oem-toggle:focus-visible{
background:transparent!important;
box-shadow:none!important;
transform:none!important;
}
body .reference-product-card .product-title-row{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:center!important;
gap:14px!important;
}
body .reference-product-card .stock-badge{
border:0!important;
background:none!important;
border-radius:0!important;
padding:0!important;
display:inline-flex!important;
align-items:center!important;
gap:8px!important;
font-size:15px!important;
font-weight:700!important;
line-height:1.2!important;
white-space:nowrap!important;
box-shadow:none!important;
}
body .reference-product-card .stock-badge::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:currentColor;
flex:0 0 auto;
}
body .reference-product-card .stock-badge.in-stock{color:#149a51!important;}
body .reference-product-card .stock-badge.out-stock{color:#d53c3c!important;}
body .reference-product-card .vehicle-compatible-badge{
position:absolute!important;
top:16px!important;
left:22px!important;
z-index:5!important;
display:inline-flex!important;
align-items:center!important;
gap:8px!important;
padding:0!important;
border:0!important;
border-radius:0!important;
background:none!important;
color:#149a51!important;
box-shadow:none!important;
font-size:14px!important;
font-weight:700!important;
}
body .reference-product-card .vehicle-compatible-badge::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#149a51;
flex:0 0 auto;
}
body .reference-product-card .vehicle-compatible-badge svg{display:none!important;}
body .reference-product-card .product-code-review-row{
align-items:center!important;
}
body .reference-product-card .stock-code{
display:inline-flex!important;
align-items:center!important;
gap:8px!important;
color:#7b8aa1!important;
}
body .reference-product-card .stock-code svg{display:none!important;}
body .reference-product-card .stock-code em{
font-style:normal!important;
color:#7b8aa1!important;
}
body .reference-product-card .stock-code strong{
color:#071d3a!important;
font-weight:800!important;
}
body .reference-product-card .brand-logo-meta{
display:inline-flex!important;
align-items:center!important;
gap:0!important;
padding:0!important;
border:0!important;
background:none!important;
color:#0a63d9!important;
}
body .reference-product-card .brand-logo-meta img,
body .reference-product-card .brand-logo-meta svg{display:none!important;}
body .reference-product-card .brand-logo-meta strong{
color:#0a63d9!important;
font-size:15px!important;
font-weight:800!important;
letter-spacing:.01em!important;
}
body .reference-product-card .card-actions{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:18px!important;
align-items:stretch!important;
}
body .reference-product-card .card-actions>*{
width:100%!important;
min-width:0!important;
height:56px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
}
body .reference-product-card .card-actions>*:hover,
body .reference-product-card .card-actions>*:active{
transform:none!important;
}
@media (max-width: 900px){
body .reference-product-card .card-actions{
grid-template-columns:1fr!important;
gap:10px!important;
}
}
/* V83 son kullan?c? revizyonlar? */
body .reference-product-card .product-title-row{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:center!important;
gap:12px!important;
}
body .reference-product-card .product-title-row h3{
margin:0!important;
}
body .reference-product-card .stock-badge,
body .reference-product-card .stock-badge.in-stock,
body .reference-product-card .stock-badge.out-stock{
background:transparent!important;
background-image:none!important;
border:0!important;
box-shadow:none!important;
padding:0!important;
border-radius:0!important;
display:inline-flex!important;
align-items:center!important;
justify-self:end!important;
white-space:nowrap!important;
}
body .reference-product-card .stock-badge.in-stock{color:#149a51!important;}
body .reference-product-card .stock-badge.out-stock{color:#d64141!important;}
body .reference-product-card .stock-badge::before{
content:""!important;
width:8px!important;
height:8px!important;
border-radius:50%!important;
background:currentColor!important;
margin-right:8px!important;
flex:0 0 auto!important;
}
body .reference-product-card .product-visual,
body .reference-product-card .product-visual.photo-source,
body .reference-product-card.discounted .product-visual,
body .reference-product-card.discounted .product-visual.photo-source,
body .reference-product-card:not(.discounted) .product-visual,
body .reference-product-card:not(.discounted) .product-visual.photo-source{
background:transparent!important;
background-image:none!important;
border:0!important;
box-shadow:none!important;
}
body .reference-product-card .product-visual::before,
body .reference-product-card .product-visual::after{
display:none!important;
content:none!important;
}
body .reference-product-card .product-visual img,
body .reference-product-card:hover .product-visual img,
body .reference-product-card .product-visual.photo-source img{
transform:none!important;
background:transparent!important;
}
body .reference-product-card .oem-toggle{
padding:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
color:#71829a!important;
gap:6px!important;
}
body .reference-product-card .oem-toggle:hover,
body .reference-product-card .oem-toggle:active,
body .reference-product-card .oem-toggle:focus-visible{
padding:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
color:#0A63DF!important;
}
body .reference-product-card .oem-toggle:hover span,
body .reference-product-card .oem-toggle:hover i,
body .reference-product-card .oem-toggle:active span,
body .reference-product-card .oem-toggle:active i,
body .reference-product-card .oem-toggle:focus-visible span,
body .reference-product-card .oem-toggle:focus-visible i{
color:#0A63DF!important;
}
body .reference-product-card .oem-toggle svg{
color:inherit!important;
}
body .reference-product-card .vehicle-compatible-badge{
background:transparent!important;
border:0!important;
box-shadow:none!important;
padding:0!important;
color:#149a51!important;
}
body .reference-product-card .vehicle-compatible-badge::before,
body .reference-product-card .vehicle-compatible-badge svg{
display:none!important;
content:none!important;
}
body .reference-product-card .brand-logo-meta{
padding:0!important;
border:0!important;
background:transparent!important;
box-shadow:none!important;
display:inline-flex!important;
align-items:center!important;
min-height:40px!important;
}
body .reference-product-card .brand-logo-meta strong{display:none!important;}
body .reference-product-card .brand-logo-meta img{
display:block!important;
max-width:140px!important;
width:auto!important;
height:40px!important;
object-fit:contain!important;
}
@media (max-width: 900px){
body .reference-product-card .product-title-row{
grid-template-columns:1fr!important;
gap:6px!important;
}
body .reference-product-card .stock-badge{
justify-self:start!important;
}
}
/* V84 son d?zenleme */
body .reference-product-card .product-info{
z-index:24!important;
}
body .reference-product-card .product-title-row{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:center!important;
justify-content:space-between!important;
gap:10px!important;
padding-right:30px!important;
}
body .reference-product-card .product-title-row h3{
min-width:0!important;
margin:0!important;
}
body .reference-product-card .stock-badge{
justify-self:end!important;
align-self:center!important;
margin:0!important;
min-height:auto!important;
height:auto!important;
padding:0!important;
}
body .reference-product-card .stock-badge::before{
margin-right:8px!important;
}
body .reference-product-card .product-visual,
body .reference-product-card .product-visual.photo-source,
body .reference-product-card.discounted .product-visual,
body .reference-product-card.discounted .product-visual.photo-source,
body .reference-product-card:not(.discounted) .product-visual,
body .reference-product-card:not(.discounted) .product-visual.photo-source{
top:62px!important;
bottom:102px!important;
height:auto!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
transform:none!important;
}
body .reference-product-card .product-visual img,
body .reference-product-card:hover .product-visual img,
body .reference-product-card .product-visual.photo-source img{
filter:none!important;
box-shadow:none!important;
transform:none!important;
}
body .reference-product-card .product-review-summary{
pointer-events:none!important;
cursor:default!important;
user-select:none!important;
}
body .reference-product-card .product-review-summary:hover,
body .reference-product-card .product-review-summary:active{
transform:none!important;
box-shadow:none!important;
}
body .reference-product-card .product-meta-row{
position:relative!important;
overflow:visible!important;
z-index:40!important;
}
body .reference-product-card .oem-popover{
position:absolute!important;
top:42px!important;
left:118px!important;
width:250px!important;
max-width:calc(100% - 118px)!important;
z-index:90!important;
box-shadow:0 14px 28px rgba(8,41,85,.12)!important;
}
body .reference-product-card .card-actions{
z-index:8!important;
left:16px!important;
right:16px!important;
bottom:14px!important;
height:42px!important;
min-height:42px!important;
}
body .reference-product-card .card-actions>button,
body .reference-product-card .card-actions>a{
height:42px!important;
min-height:42px!important;
font-size:11px!important;
gap:7px!important;
border-radius:9px!important;
padding:0 10px!important;
transition:none!important;
transform:none!important;
box-shadow:none!important;
}
body .reference-product-card .card-actions>button:first-child{
width:176px!important;
left:0!important;
}
body .reference-product-card .card-actions>a.whatsapp{
width:176px!important;
left:188px!important;
}
body .reference-product-card .card-actions>.primary{
width:176px!important;
right:0!important;
transition:none!important;
}
body .reference-product-card .card-actions>button:hover,
body .reference-product-card .card-actions>a:hover,
body .reference-product-card .card-actions>button:active,
body .reference-product-card .card-actions>a:active,
body .reference-product-card .card-actions>.primary:hover,
body .reference-product-card .card-actions>.primary:active{
transform:none!important;
box-shadow:none!important;
filter:none!important;
}
body .reference-product-card .visual-quantity-control{
right:188px!important;
bottom:14px!important;
width:24px!important;
height:42px!important;
min-height:42px!important;
grid-template-rows:13px 14px 13px!important;
border-radius:8px!important;
transition:none!important;
transform:none!important;
box-shadow:none!important;
}
body .reference-product-card .visual-quantity-control button,
body .reference-product-card .visual-quantity-control input{
width:18px!important;
height:12px!important;
min-height:12px!important;
line-height:12px!important;
font-size:10px!important;
transition:none!important;
transform:none!important;
box-shadow:none!important;
}
body .reference-product-card .visual-quantity-control input{
height:14px!important;
min-height:14px!important;
line-height:14px!important;
}
body .reference-product-card .visual-quantity-control button:hover,
body .reference-product-card .visual-quantity-control button:active{
transform:none!important;
box-shadow:none!important;
filter:none!important;
}
body .reference-product-card .saving-strip{
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:7px!important;
}
@media(max-width:1500px){
body .reference-product-card .card-actions>button:first-child{width:168px!important;}
body .reference-product-card .card-actions>a.whatsapp{left:180px!important;width:168px!important;}
body .reference-product-card .card-actions>.primary{width:168px!important;}
body .reference-product-card .visual-quantity-control{right:180px!important;}
}
@media(max-width:700px){
body .reference-product-card .card-actions,
body .reference-product-card .product-title-row{
position:static!important;
}
}
/* V85: stok rozeti ba?l???n yan?nda, adet se?ici CTA'dan e?it aral?kta */
body .reference-product-card .product-title-row{
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
flex-wrap:wrap!important;
padding:0!important;
column-gap:10px!important;
row-gap:5px!important;
}
body .reference-product-card .product-title-row h3{
flex:1 1 0!important;
width:auto!important;
max-width:none!important;
}
body .reference-product-card .stock-badge{
flex:0 0 auto!important;
justify-self:auto!important;
}
body .reference-product-card .visual-quantity-control{
right:204px!important;
}
@media(max-width:1500px){
body .reference-product-card .visual-quantity-control{
right:196px!important;
}
}
/* V85.1: Sepete Ekle butonunda hover/aktif animasyonu yok */
body .reference-product-card .add-cart-button:not(:disabled),
body .reference-product-card .add-cart-button:not(:disabled):hover,
body .reference-product-card .add-cart-button:not(:disabled):focus,
body .reference-product-card .add-cart-button:not(:disabled):active{
background:#0a63df!important;
border-color:#0a63df!important;
color:#fff!important;
font-size:11px!important;
line-height:1!important;
transition:none!important;
animation:none!important;
transform:none!important;
box-shadow:none!important;
filter:none!important;
}
body .reference-product-card .add-cart-button svg,
body .reference-product-card .add-cart-button:hover svg,
body .reference-product-card .add-cart-button:active svg{
width:18px!important;
height:18px!important;
transition:none!important;
animation:none!important;
transform:none!important;
filter:none!important;
}
body .reference-product-card .add-cart-button span,
body .reference-product-card .add-cart-button:hover span,
body .reference-product-card .add-cart-button:focus span,
body .reference-product-card .add-cart-button:active span{
display:inline-block!important;
font-size:11px!important;
line-height:1!important;
letter-spacing:normal!important;
transition:none!important;
animation:none!important;
transform:none!important;
scale:1!important;
filter:none!important;
}
/* V85.2: OEM a??l?r paneli ?r?n kart? s?n?rlar?nda kesilmesin */
body .reference-product-card,
body .reference-product-card.discounted{
overflow:visible!important;
}
body .reference-product-card:focus-within,
body .reference-product-card:has(.oem-popover:not([hidden])){
z-index:120!important;
}
body .reference-product-card .product-card-main,
body .reference-product-card .product-info,
body .reference-product-card .product-meta-row{
overflow:visible!important;
}
body .reference-product-card .oem-popover{
z-index:200!important;
}
/* V86: Aray?z ikonlar? Font Awesome; Lucide SVG ??kt?s? kullan?lmaz. */
i[data-lucide],
i.fa-solid,
i.fa-regular,
i.fa-brands{
display:inline-block;
flex:0 0 auto;
line-height:1;
text-align:center;
}
.whatsapp-icon.fa-brands{
width:auto!important;
height:auto!important;
object-fit:unset!important;
filter:none!important;
font-size:20px!important;
line-height:1!important;
}
.reference-product-card .card-actions .whatsapp-icon.fa-brands{
width:auto!important;
height:auto!important;
font-size:18px!important;
}
.support-strip>a .whatsapp-icon.fa-brands{font-size:21px!important;}
.wa-circle .whatsapp-icon.fa-brands{font-size:24px!important;color:#fff!important;}
.reference-product-card .card-actions i[data-lucide],
.reference-product-card .add-cart-button i[data-lucide]{
width:18px!important;
height:18px!important;
font-size:18px!important;
line-height:18px!important;
}
/* V86.1: OEM kontrol?nde focus/active animasyonu ve panel g?lgesi yok */
body .reference-product-card .oem-toggle,
body .reference-product-card .oem-toggle:hover,
body .reference-product-card .oem-toggle:focus,
body .reference-product-card .oem-toggle:focus-visible,
body .reference-product-card .oem-toggle:active,
body .reference-product-card .oem-toggle[aria-expanded="true"]{
padding:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
background-color:transparent!important;
background-image:none!important;
color:#71829a!important;
transition:none!important;
animation:none!important;
transform:none!important;
box-shadow:none!important;
filter:none!important;
outline:none!important;
}
body .reference-product-card .oem-toggle:hover span,
body .reference-product-card .oem-toggle:focus span,
body .reference-product-card .oem-toggle:focus-visible span,
body .reference-product-card .oem-toggle:active span,
body .reference-product-card .oem-toggle[aria-expanded="true"] span,
body .reference-product-card .oem-toggle:hover i,
body .reference-product-card .oem-toggle:focus i,
body .reference-product-card .oem-toggle:focus-visible i,
body .reference-product-card .oem-toggle:active i,
body .reference-product-card .oem-toggle[aria-expanded="true"] i{
color:#71829a!important;
background:transparent!important;
transition:none!important;
animation:none!important;
transform:none!important;
filter:none!important;
}
body .reference-product-card .oem-toggle i,
body .reference-product-card .oem-toggle svg,
body .reference-product-card .oem-toggle:hover i,
body .reference-product-card .oem-toggle:focus i,
body .reference-product-card .oem-toggle:active i,
body .reference-product-card .oem-toggle[aria-expanded="true"] i,
body .reference-product-card .oem-toggle[aria-expanded="true"] svg{
transition:none!important;
animation:none!important;
transform:none!important;
scale:1!important;
filter:none!important;
}
body .reference-product-card .oem-popover,
body .reference-product-card .oem-popover:focus,
body .reference-product-card .oem-popover:focus-within{
transition:none!important;
animation:none!important;
transform:none!important;
box-shadow:none!important;
filter:none!important;
}
/* V86.2: OEM penceresindeki ikonlar kutusuz g?sterilir */
body .reference-product-card .oem-popover li button,
body .reference-product-card .oem-popover li button:hover,
body .reference-product-card .oem-popover li button:focus,
body .reference-product-card .oem-popover li button:active{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
width:auto!important;
height:auto!important;
min-width:0!important;
min-height:0!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
outline:none!important;
transition:none!important;
animation:none!important;
transform:none!important;
filter:none!important;
}
body .reference-product-card .oem-popover li button i{
display:inline-block!important;
width:auto!important;
height:auto!important;
margin:0!important;
padding:0!important;
background:transparent!important;
box-shadow:none!important;
}
/* V86.3: ?r?n meta sat?r? solda logo, sa?da OEM olacak ?ekilde hizalan?r */
body .reference-product-card .product-meta-row{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:center!important;
justify-items:stretch!important;
column-gap:16px!important;
}
body .reference-product-card .brand-logo-meta{
grid-column:1!important;
justify-self:start!important;
align-self:center!important;
}
body .reference-product-card .oem-toggle{
grid-column:2!important;
justify-self:end!important;
align-self:center!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
width:auto!important;
min-width:0!important;
max-width:none!important;
min-height:0!important;
height:auto!important;
margin:0!important;
padding:0!important;
text-align:center!important;
}
body .reference-product-card .meta-price{
grid-column:1/-1!important;
justify-self:end!important;
}
/* V86.4: ?r?n kart? i?indeki ana i?erik aral?klar? e?itlenir */
body .reference-product-card{
--product-card-inner-gap:10px;
}
body .reference-product-card .product-info,
body .reference-product-card:not(.discounted) .product-info,
body .reference-product-card.discounted .product-info{
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
justify-content:flex-start!important;
gap:var(--product-card-inner-gap)!important;
}
body .reference-product-card .category-pill,
body .reference-product-card .product-title-row,
body .reference-product-card .product-code-review-row,
body .reference-product-card .product-meta-row,
body .reference-product-card .product-price-panel{
margin:0!important;
}
body .reference-product-card .product-title-row,
body .reference-product-card .product-code-review-row,
body .reference-product-card .product-meta-row,
body .reference-product-card .discount-price-row,
body .reference-product-card .saving-strip{
gap:var(--product-card-inner-gap)!important;
}
body .reference-product-card .product-code-review-row{
padding:0 0 var(--product-card-inner-gap)!important;
}
body .reference-product-card .product-meta-row{
padding:0!important;
}
body .reference-product-card .saving-strip{
margin-top:var(--product-card-inner-gap)!important;
}
/* V87: favori se?imi ve hover ile a??lan sade OEM listesi */
body .reference-product-card .favorite,
body .reference-product-card .favorite:hover,
body .reference-product-card .favorite:focus,
body .reference-product-card .favorite:active{
color:#9aa8ba!important;
background:transparent!important;
}
body .reference-product-card .favorite i,
body .reference-product-card .favorite svg{
color:#9aa8ba!important;
fill:transparent!important;
stroke:#9aa8ba!important;
}
body .reference-product-card .favorite.active,
body .reference-product-card .favorite.active:hover,
body .reference-product-card .favorite.active:focus{
color:#e6495f!important;
}
body .reference-product-card .favorite.active i,
body .reference-product-card .favorite.active svg{
color:#e6495f!important;
fill:#e6495f!important;
stroke:#e6495f!important;
}
body .reference-product-card .oem-hover-wrap{
position:relative!important;
grid-column:2!important;
justify-self:end!important;
align-self:center!important;
display:inline-flex!important;
align-items:center!important;
}
body .reference-product-card .oem-popover{
display:none!important;
top:calc(100% + 4px)!important;
right:0!important;
left:auto!important;
width:250px!important;
max-width:min(250px,calc(100vw - 40px))!important;
padding:10px 12px!important;
border:1px solid #e1e8f0!important;
border-radius:10px!important;
background:#fff!important;
box-shadow:none!important;
}
body .reference-product-card .oem-toggle{
position:relative!important;
}
body .reference-product-card .oem-toggle::after{
content:""!important;
position:absolute!important;
top:100%!important;
left:0!important;
width:100%!important;
height:8px!important;
background:transparent!important;
}
body .reference-product-card .oem-hover-wrap:hover .oem-popover,
body .reference-product-card .oem-hover-wrap:focus-within .oem-popover,
body .reference-product-card .oem-popover:hover{
display:block!important;
}
body .reference-product-card .oem-popover>strong{
margin:0 0 6px!important;
background:transparent!important;
}
body .reference-product-card .oem-popover ul{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
grid-auto-rows:minmax(28px,auto)!important;
gap:6px 12px!important;
max-height:62px!important;
overflow-x:hidden!important;
overflow-y:auto!important;
padding:0 5px 0 0!important;
scrollbar-width:thin;
}
body .reference-product-card .oem-popover li{
min-width:0!important;
padding:4px 0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
}
body .reference-product-card .oem-popover li:nth-child(n+3){
padding-top:9px!important;
}
body .reference-product-card .oem-popover li:nth-child(2n+3){
position:relative!important;
}
body .reference-product-card .oem-popover li:nth-child(2n+3)::before{
content:""!important;
position:absolute!important;
top:0!important;
left:0!important;
width:calc(200% + 12px)!important;
height:1px!important;
background:#e3eaf2!important;
}
body .reference-product-card .oem-popover li span{
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
/* V87.1: kategori rozeti ?r?n bilgi alan?nda tam ortalan?r */
body .reference-product-card .category-pill,
body .reference-product-card.compatible-card .category-pill{
align-self:flex-start!important;
justify-self:start!important;
justify-content:flex-start!important;
margin-left:0!important;
margin-right:0!important;
text-align:left!important;
}
body .reference-product-card .category-pill i,
body .reference-product-card.compatible-card .category-pill i{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
align-self:center!important;
position:static!important;
line-height:1!important;
vertical-align:middle!important;
transform:none!important;
}
/* V87.2: Ana Kategoriler yaz? stili Marka ve Fiyat filtrelerinde kullan?l?r */
body .sidebar .brand-option,
body .sidebar .brand-search input,
body .sidebar .price-inputs span,
body .sidebar .price-inputs input,
body .sidebar .price-presets button,
body .sidebar .discount-only-filter{
font-family:"Manrope",sans-serif!important;
font-size:13px!important;
font-weight:400!important;
color:#34445d!important;
letter-spacing:0!important;
}
body .sidebar .brand-option b,
body .sidebar .discount-only-filter b{
font-family:"Manrope",sans-serif!important;
font-size:13px!important;
font-weight:500!important;
color:#6f7d8f!important;
}
/* V89: indirimsiz ürünlerde Marka + OEM + Fiyat tek satır (üst üste binmesin) */
body .reference-product-card:not(.discounted) .product-meta-row{
display:grid!important;
grid-template-columns:auto auto minmax(0,1fr)!important;
align-items:center!important;
column-gap:16px!important;
row-gap:0!important;
width:100%!important;
}
body .reference-product-card:not(.discounted) .brand-logo-meta{
grid-column:1!important;
justify-self:start!important;
min-width:0!important;
}
body .reference-product-card:not(.discounted) .oem-hover-wrap{
grid-column:2!important;
justify-self:start!important;
margin:0!important;
padding-right:4px!important;
}
body .reference-product-card:not(.discounted) .meta-price{
grid-column:3!important;
grid-row:1!important;
justify-self:end!important;
align-self:center!important;
width:auto!important;
margin:0 0 0 8px!important;
padding:0!important;
white-space:nowrap!important;
}
body .reference-product-card:not(.discounted) .meta-price .current-price-wrap{
display:inline-flex!important;
align-items:baseline!important;
justify-content:flex-end!important;
gap:7px!important;
}
@media(max-width:700px){
body .reference-product-card:not(.discounted) .product-meta-row{
grid-template-columns:auto auto minmax(0,1fr)!important;
column-gap:10px!important;
}
body .reference-product-card:not(.discounted) .meta-price{
margin-left:6px!important;
}
body .reference-product-card:not(.discounted) .meta-price .current-price-wrap{gap:4px!important}
body .reference-product-card:not(.discounted) .meta-price .current-price-wrap strong{font-size:18px!important}
body .reference-product-card:not(.discounted) .meta-price .current-price-wrap small{font-size:8px!important}
}
/* V93: off-canvas ara? ad?mlar? yatay sekme d?zeni */
body .vehicle-catalog-layout{
display:flex!important;
flex-direction:column!important;
min-height:0!important;
}
body .vehicle-catalog-steps{
flex:0 0 auto!important;
width:100%!important;
padding:0 18px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
border-right:0!important;
border-bottom:1px solid #e3e7eb!important;
background:#fff!important;
}
body .vehicle-catalog-steps ol{
min-width:520px!important;
margin:0!important;
padding:0!important;
display:grid!important;
grid-template-columns:repeat(5,minmax(96px,1fr))!important;
list-style:none!important;
}
body .vehicle-catalog-steps li{
position:relative!important;
min-height:68px!important;
padding:9px 8px 11px!important;
display:flex!important;
align-items:flex-end!important;
justify-content:center!important;
text-align:center!important;
border-bottom:3px solid transparent!important;
cursor:pointer!important;
user-select:none!important;
}
body .vehicle-catalog-steps li::after{
display:none!important;
content:none!important;
}
body .vehicle-catalog-steps li>span,
body .vehicle-catalog-steps li>small,
body .vehicle-catalog-steps li div>small{
display:none!important;
}
body .vehicle-catalog-steps li>span{
width:24px!important;
height:24px!important;
min-width:24px!important;
display:grid!important;
place-items:center!important;
border:1px solid #c7d2df!important;
border-radius:50%!important;
background:#fff!important;
color:#66788d!important;
font-size:11px!important;
font-weight:700!important;
line-height:1!important;
}
body .vehicle-catalog-steps li{
gap:8px!important;
}
body .vehicle-catalog-steps li.active>span{
border-color:#f05a28!important;
background:#fff!important;
color:#f05a28!important;
box-shadow:none!important;
}
body .vehicle-catalog-steps li.completed>span{
border-color:#0a63df!important;
background:#fff!important;
color:#0a63df!important;
box-shadow:none!important;
font-size:11px!important;
}
body .vehicle-catalog-steps li div{
width:auto!important;
}
body .vehicle-catalog-steps li strong{
margin:0!important;
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
justify-content:flex-end!important;
gap:0!important;
color:#686868!important;
font-size:15px!important;
font-weight:700!important;
line-height:1.05!important;
}
body .vehicle-catalog-steps li strong i{
display:none!important;
}
body .vehicle-catalog-steps li strong em{
display:block!important;
margin:0 0 1px!important;
color:#8a8a8a!important;
font-size:10px!important;
font-style:normal!important;
font-weight:500!important;
line-height:1!important;
}
body .vehicle-catalog-steps li.active{
border-bottom-color:#f05a28!important;
}
body .vehicle-catalog-steps li.active strong{
color:#2b2b2b!important;
}
body .vehicle-catalog-steps li.completed strong{
color:#0a63df!important;
}
body .vehicle-catalog-main{
flex:1 1 auto!important;
min-height:0!important;
}
body .vehicle-catalog-toolbar{
min-height:62px!important;
padding:10px 18px!important;
}
body .vehicle-catalog-toolbar h3{
display:none!important;
}
body .vehicle-catalog-toolbar label{
width:100%!important;
height:52px!important;
}
@media(max-width:620px){
body .vehicle-catalog-steps{
display:block!important;
max-height:none!important;
padding:0 8px!important;
}
body .vehicle-catalog-steps ol{
min-width:500px!important;
}
}
/* V94: sayfa y?klenirken giri?, fade, slide ve pulse animasyonu g?sterilmez */
html{
scroll-behavior:auto!important;
}
body *,
body *::before,
body *::after{
animation:none!important;
animation-delay:0s!important;
}
/* V94.1: off-canvas kapatma kontrol?nde yaln?zca X ikonu g?r?n?r */
body .vehicle-catalog-close,
body .vehicle-catalog-close:hover,
body .vehicle-catalog-close:focus,
body .vehicle-catalog-close:focus-visible,
body .vehicle-catalog-close:active{
width:28px!important;
height:28px!important;
min-width:28px!important;
padding:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
outline:0!important;
color:#082955!important;
}
/* V94.2: eski numaral? ad?m tasar?m?, yatay yerle?im */
body .vehicle-catalog-steps li{
min-height:72px!important;
padding:10px 8px!important;
display:grid!important;
grid-template-columns:34px minmax(0,1fr)!important;
align-items:center!important;
justify-content:start!important;
gap:9px!important;
text-align:left!important;
border-bottom:0!important;
}
body .vehicle-catalog-steps li:not(:last-child)::after{
content:""!important;
position:absolute!important;
top:50%!important;
left:calc(100% - 9px)!important;
width:18px!important;
height:0!important;
display:block!important;
border:0!important;
border-top:1px solid #c9d6e5!important;
background:transparent!important;
transform:none!important;
}
body .vehicle-catalog-steps li>span{
position:relative!important;
z-index:1!important;
width:32px!important;
height:32px!important;
min-width:32px!important;
border:1px solid #b9cbe2!important;
color:#607895!important;
background:#fff!important;
font-size:12px!important;
}
body .vehicle-catalog-steps li div{
width:100%!important;
min-width:0!important;
}
body .vehicle-catalog-steps li strong{
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
justify-content:center!important;
color:#0b315f!important;
font-size:13px!important;
line-height:1.15!important;
text-align:left!important;
}
body .vehicle-catalog-steps li div>small{
display:none!important;
margin-top:0!important;
}
body .vehicle-catalog-steps li div>small:not(:empty):not([hidden]){
display:block!important;
}
body .vehicle-catalog-steps li.active>span{
border-color:#0a63df!important;
color:#0a63df!important;
background:#fff!important;
box-shadow:0 0 0 3px rgba(10,99,223,.08)!important;
}
body .vehicle-catalog-steps li.active strong,
body .vehicle-catalog-steps li.active div>small:not(:empty):not([hidden]){
color:#0a63df!important;
}
body .vehicle-catalog-steps li.completed>span{
border-color:#0a63df!important;
color:#0a63df!important;
background:#fff!important;
}
body .vehicle-catalog-steps li.completed strong{
color:#0b315f!important;
}
/* V94.3: filtre se?eneklerinde hover yaln?zca border rengini de?i?tirir */
body .vehicle-brand-card,
body .vehicle-option-card,
body .vehicle-model-card,
body .vehicle-brand-card:hover,
body .vehicle-option-card:hover,
body .vehicle-model-card:hover,
body .vehicle-brand-card:focus,
body .vehicle-option-card:focus,
body .vehicle-model-card:focus,
body .vehicle-brand-card:active,
body .vehicle-option-card:active,
body .vehicle-model-card:active{
background:#fff!important;
color:#0b315f!important;
box-shadow:none!important;
transform:none!important;
scale:1!important;
filter:none!important;
transition:border-color .15s ease!important;
}
body .vehicle-brand-card:hover,
body .vehicle-option-card:hover,
body .vehicle-model-card:hover,
body .vehicle-brand-card:focus-visible,
body .vehicle-option-card:focus-visible,
body .vehicle-model-card:focus-visible{
border-color:#0a63df!important;
}
body .vehicle-brand-card img,
body .vehicle-model-card img,
body .vehicle-brand-card:hover img,
body .vehicle-model-card:hover img{
transform:none!important;
scale:1!important;
filter:none!important;
}
/* V94.4: ad?m ?izgileri ve numara border efektleri kald?r?l?r */
body .vehicle-catalog-steps li::after,
body .vehicle-catalog-steps li:not(:last-child)::after{
display:none!important;
content:none!important;
border:0!important;
background:none!important;
}
body .vehicle-catalog-steps li>span,
body .vehicle-catalog-steps li:hover>span,
body .vehicle-catalog-steps li:focus>span,
body .vehicle-catalog-steps li.active>span,
body .vehicle-catalog-steps li.completed>span{
box-shadow:none!important;
transform:none!important;
scale:1!important;
filter:none!important;
transition:none!important;
}
/* V94.5: filtre aramas?nda yaln?zca border rengi de?i?ir */
body .vehicle-catalog-toolbar label,
body .vehicle-catalog-toolbar label:hover,
body .vehicle-catalog-toolbar label:focus,
body .vehicle-catalog-toolbar label:focus-within{
background:#f6f8fa!important;
box-shadow:none!important;
outline:0!important;
transform:none!important;
filter:none!important;
transition:none!important;
}
body .vehicle-catalog-toolbar label:focus-within{
border-color:#0a63df!important;
}
body .vehicle-catalog-toolbar input,
body .vehicle-catalog-toolbar input:focus{
outline:0!important;
box-shadow:none!important;
}
/* V95: header ara? se?imi ve se?ili ara? ?zeti */
body .header-inner{gap:18px!important}
body .header-vehicle-button{
height:56px!important;
flex:0 1 218px!important;
min-width:170px!important;
max-width:218px!important;
padding:0 14px!important;
border:1px solid #d8e2e8!important;
border-radius:9px!important;
background:transparent!important;
color:#17385f!important;
display:flex!important;
align-items:center!important;
gap:11px!important;
text-align:left!important;
box-shadow:none!important;
transform:none!important;
transition:border-color .15s ease,background-color .15s ease!important;
}
body .header-vehicle-button:hover,
body .header-vehicle-button:focus-visible{
border-color:#0a63df!important;
background:transparent!important;
box-shadow:none!important;
transform:none!important;
outline:0!important;
}
body .header-vehicle-icon{
position:relative!important;
flex:0 0 25px!important;
width:25px!important;
height:25px!important;
display:grid!important;
place-items:center!important;
color:#17385f!important;
}
body .header-vehicle-icon>i:first-child{
font-size:20px!important;
line-height:1!important;
}
body .header-vehicle-check{
display:none!important;
position:absolute!important;
right:-7px!important;
top:-7px!important;
z-index:2!important;
box-sizing:border-box!important;
width:16px!important;
height:16px!important;
margin:0!important;
padding:0!important;
border:2px solid #fff!important;
border-radius:50%!important;
background:#24a148!important;
color:#fff!important;
font-size:8px!important;
line-height:1!important;
place-items:center!important;
overflow:hidden!important;
}
body .header-vehicle-check::before{
display:block!important;
margin:0!important;
font-size:8px!important;
line-height:1!important;
}
body .header-vehicle-button.has-vehicle .header-vehicle-check{display:grid!important}
body .header-vehicle-button.has-vehicle{overflow:visible!important}
body .header-vehicle-text{
min-width:0!important;
flex:1!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
font-size:13px!important;
line-height:1.2!important;
font-weight:700!important;
}
body .header-vehicle-copy{
min-width:0!important;
flex:1!important;
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
justify-content:center!important;
gap:2px!important;
overflow:hidden!important;
}
body .header-vehicle-copy .header-vehicle-text{flex:none!important;width:100%!important}
body .header-vehicle-hint{
display:block!important;
max-width:100%!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
color:#6b7c90!important;
font-size:10px!important;
line-height:1.15!important;
font-weight:650!important;
}
body .header-vehicle-hint[hidden]{display:none!important}
body .header-vehicle-button.is-guest{min-width:190px!important;max-width:240px!important}
body .header-vehicle-button.has-vehicle .header-vehicle-text{color:#0b315f!important}
body .header-vehicle-arrow{
flex:0 0 auto!important;
color:#647892!important;
font-size:13px!important;
}
@media(max-width:1250px){
body .header-inner{gap:12px!important}
body .brand{min-width:190px!important}
body .header-vehicle-button{flex-basis:168px!important;max-width:168px!important;min-width:145px!important;padding-inline:11px!important}
body .global-search{max-width:360px!important}
body .header-actions{gap:15px!important}
}
@media(max-width:940px){
body .header-vehicle-button{order:4!important;flex:0 1 190px!important;max-width:190px!important}
body .global-search{order:5!important;max-width:none!important;flex-basis:100%!important}
}
@media(max-width:520px){
body .header-vehicle-button{height:48px!important;min-width:142px!important;max-width:172px!important}
body .header-vehicle-text{font-size:12px!important}
}
/* V95.2: kategori butonu sabit, efektsiz g?r?n?m */
body .category-button,
body .category-button:hover,
body .category-button:focus,
body .category-button:focus-visible,
body .category-button:active{
background:#0a5cd8!important;
box-shadow:none!important;
transform:none!important;
filter:none!important;
transition:none!important;
outline:0!important;
}
/* V96: 50 marka + 30 kategori i?eren header mega men?s? */
body.category-mega-open .site-sticky-stack .site-header{z-index:1400!important}
body .category-button[aria-expanded="true"]>i:last-child{transform:rotate(180deg)!important}
body .category-mega-menu[hidden]{display:none!important}
body .category-mega-menu{
position:absolute!important;
top:calc(100% - 1px)!important;
left:50%!important;
right:auto!important;
z-index:1401!important;
width:min(1600px,calc(100vw - 32px))!important;
max-width:none!important;
margin:0!important;
max-height:calc(100vh - 112px)!important;
overflow:auto!important;
transform:translateX(-50%)!important;
border:1px solid #dce5ef!important;
border-top:0!important;
border-radius:0 0 14px 14px!important;
background:#fff!important;
box-shadow:0 18px 44px rgba(8,41,85,.14)!important;
color:#082955!important;
}
body .category-mega-content{
width:100%!important;
max-width:none!important;
margin:0!important;
padding:18px 22px 22px!important;
}
body .category-mega-heading{
min-height:44px!important;
display:flex!important;
align-items:flex-start!important;
justify-content:space-between!important;
gap:20px!important;
padding-bottom:14px!important;
border-bottom:1px solid #e6edf4!important;
}
body .category-mega-heading>div{display:flex!important;flex-direction:column!important;gap:3px!important}
body .category-mega-heading strong{font-size:17px!important;line-height:1.25!important;color:#082955!important}
body .category-mega-heading span{font-size:11px!important;color:#728399!important}
body .category-mega-close,
body .category-mega-close:hover,
body .category-mega-close:focus,
body .category-mega-close:active{
width:30px!important;
height:30px!important;
padding:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
color:#284866!important;
display:grid!important;
place-items:center!important;
box-shadow:none!important;
transform:none!important;
outline:0!important;
}
body .category-mega-section{padding-top:14px!important}
body .category-mega-category-section{margin-top:14px!important;padding-top:14px!important;border-top:1px solid #e6edf4!important}
body .category-mega-section-title{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:14px!important;
margin-bottom:9px!important;
}
body .category-mega-section-title h2{margin:0!important;font-size:14px!important;line-height:1.2!important;color:#0b315f!important}
body .category-mega-section-title span{font-size:10px!important;font-weight:700!important;color:#7a8aa0!important}
body .category-mega-brand-grid,
body .category-mega-category-grid{display:grid!important;grid-template-columns:repeat(10,minmax(0,1fr))!important;gap:8px!important}
body .category-mega-brand{
min-width:0!important;
height:72px!important;
padding:7px 5px!important;
border:1px solid #e1e8f0!important;
border-radius:8px!important;
background:#fff!important;
color:#16385f!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:5px!important;
box-shadow:none!important;
transform:none!important;
transition:none!important;
}
body .category-mega-brand:hover,
body .category-mega-brand:focus-visible{
border-color:#0a63df!important;
background:#f7faff!important;
color:#0a63df!important;
box-shadow:none!important;
transform:none!important;
outline:0!important;
}
body .category-mega-brand img{width:58px!important;height:31px!important;object-fit:contain!important;display:block!important}
body .category-mega-brand span{
width:100%!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
text-align:center!important;
font-size:10px!important;
line-height:1.15!important;
font-weight:700!important;
}
body .category-mega-category{
min-width:0!important;
height:43px!important;
padding:0 10px!important;
border:1px solid #e1e8f0!important;
border-radius:7px!important;
background:#fdf4ea!important;
color:#17385f!important;
display:grid!important;
grid-template-columns:18px minmax(0,1fr) 10px!important;
align-items:center!important;
gap:7px!important;
text-align:left!important;
box-shadow:none!important;
transform:none!important;
transition:none!important;
}
body .category-mega-category:hover,
body .category-mega-category:focus-visible{
border-color:#0a63df!important;
background:#fff9f2!important;
color:#0a63df!important;
box-shadow:none!important;
transform:none!important;
outline:0!important;
}
body .category-mega-category>i:first-child{font-size:13px!important;text-align:center!important}
body .category-mega-category>i:last-child{font-size:9px!important;color:#8291a4!important}
body .category-mega-category span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:10px!important;font-weight:700!important}
@media(max-width:1100px){
body .category-mega-brand-grid,
body .category-mega-category-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
}
@media(max-width:700px){
body .category-button{display:flex!important;width:44px!important;min-width:44px!important;height:44px!important;padding:0!important;justify-content:center!important}
body .category-button span,
body .category-button>i:last-child{display:none!important}
body .category-mega-menu{width:100%!important;max-height:calc(100dvh - var(--site-header-height,148px))!important}
body .category-mega-content{padding:14px!important}
body .category-mega-brand-grid,
body .category-mega-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
/* V96.1: varsay?lan 29 ??e + devam kutusu, e? bi?imli ?effaf kartlar */
body .category-mega-brand,
body .category-mega-brand:hover,
body .category-mega-brand:focus-visible,
body .category-mega-category,
body .category-mega-category:hover,
body .category-mega-category:focus-visible{
height:96px!important;
padding:10px 6px 8px!important;
border:1px solid #e1e8f0!important;
border-radius:8px!important;
background:transparent!important;
color:#16385f!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
text-align:center!important;
box-shadow:none!important;
transform:none!important;
filter:none!important;
transition:none!important;
}
body .category-mega-brand:hover,
body .category-mega-brand:focus-visible,
body .category-mega-category:hover,
body .category-mega-category:focus-visible{border-color:#0a63df!important;color:#0a63df!important;outline:0!important}
body .category-mega-category>i:first-child,
body .category-mega-more>i:first-child{
width:auto!important;
height:27px!important;
display:grid!important;
place-items:center!important;
font-size:22px!important;
line-height:1!important;
color:inherit!important;
}
body .category-mega-category-image{
display:block!important;
width:48px!important;
height:48px!important;
min-width:48px!important;
min-height:48px!important;
max-width:48px!important;
max-height:48px!important;
object-fit:contain!important;
flex:0 0 48px!important;
background:transparent!important;
}
body .category-mega-category span,
body .category-mega-more span{
width:100%!important;
min-width:0!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
text-align:center!important;
font-size:10px!important;
line-height:1.15!important;
font-weight:700!important;
}
body .category-mega-more{
border-style:dashed!important;
border-color:#aebed0!important;
color:#0a63df!important;
}
/* V98: marka sat?rlar? kategori sat?rlar?yla ayn? hover g?r?n?m?n? kullan?r */
body .sidebar .brand-option:hover,
body .sidebar .brand-option:focus-visible{
background:linear-gradient(90deg,#eaf2ff,#f9fbff)!important;
color:#0a5cd8!important;
box-shadow:none!important;
transform:none!important;
outline:0!important;
}
body .sidebar .brand-option:hover span,
body .sidebar .brand-option:hover b,
body .sidebar .brand-option:hover i,
body .sidebar .brand-option:focus-visible span,
body .sidebar .brand-option:focus-visible b,
body .sidebar .brand-option:focus-visible i{
color:#0a5cd8!important;
}
/* V100: dar kategori listesi a?/kapat d??mesi */
body .archive-categories-more,
body .archive-categories-more:hover,
body .archive-categories-more:focus-visible{
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
background:#fff!important;
color:#0a5cd8!important;
border-color:rgba(10,92,216,.28)!important;
box-shadow:none!important;
transform:none!important;
outline:0!important;
}
body .archive-categories-more:hover,
body .archive-categories-more:focus-visible{background:#edf4ff!important;border-color:#0a5cd8!important}
body .archive-categories-more>i{font-size:11px!important}
/* V101: marka bilgi alan? dolgusu kald?r?ld?, yaln?zca d?? kenarl?k kald? */
body .archive-brand-logo{
background:transparent!important;
border:1px solid #d8e2ec!important;
box-shadow:none!important;
}
body .archive-brand-logo .archive-brand-monogram{
background:transparent!important;
border:0!important;
box-shadow:none!important;
}
/* Mevcut projeden korunan marka/model carousel alan?. */
.footer-marka-detayli-slider{margin-top:28px;padding:30px;border:1px solid #dce5ee;border-radius:15px;background:#fff;color:#082955;box-shadow:none;overflow:visible}
.footer-marka-detayli-slider__head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:22px}.footer-marka-detayli-slider__head h2{margin:0 0 8px;color:#082955;font-size:25px;line-height:1.2;letter-spacing:-.55px}.footer-marka-detayli-slider__head p{margin:0;color:#647991;font-size:13px;line-height:1.65}
.footer-marka-detayli-slider__search{width:300px;height:46px;display:flex;align-items:center;gap:9px;padding:0 9px 0 14px;border:1px solid #d6e0ea;border-radius:10px;background:#f8fafc;color:#71839a}.footer-marka-detayli-slider__search:focus-within{border-color:#0a5cd8;box-shadow:0 0 0 3px rgba(10,92,216,.08)}.footer-marka-detayli-slider__search>i{font-size:14px}.footer-marka-detayli-slider__search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#082955;font-size:13px}.footer-marka-detayli-slider__search button{width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:7px;background:#eaf2ff;color:#0a5cd8;font-size:11px}.footer-marka-detayli-slider__search button[hidden]{display:none}
.footer-marka-detayli-slider__selection{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-4px 0 18px;padding:11px 13px;border:1px solid #cfe0f7;border-radius:10px;background:#f2f7ff}.footer-marka-detayli-slider__selection[hidden]{display:none}.footer-marka-detayli-slider__selection>span{display:flex;align-items:center;gap:9px;color:#284769;font-size:12px}.footer-marka-detayli-slider__selection>span i{color:#0a5cd8}.footer-marka-detayli-slider__selection>span strong{font-size:13px}.footer-marka-detayli-slider__selection button{display:flex;align-items:center;gap:7px;padding:7px 10px;border:0;border-radius:7px;background:#0a5cd8;color:#fff;font-size:11px;font-weight:700}
.footer-marka-detayli-slider__rail{position:relative;padding-inline:0}.footer-marka-detayli-slider__track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(265px,1fr);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-inline:contain;scrollbar-width:none}.footer-marka-detayli-slider__track::-webkit-scrollbar{display:none}.footer-marka-detayli-slider__arrow{position:absolute;z-index:3;top:50%;width:38px;height:54px;display:grid;place-items:center;transform:translateY(-50%);border:1px solid #d8e2ec;border-radius:9px;background:#fff;color:#082955;font-size:14px;box-shadow:none}.footer-marka-detayli-slider__arrow:hover:not(:disabled){border-color:#0a5cd8;color:#0a5cd8;background:#f5f9ff}.footer-marka-detayli-slider__arrow:disabled{opacity:.32;cursor:default}.footer-marka-detayli-slider__arrow--prev{left:-50px}.footer-marka-detayli-slider__arrow--next{right:-50px}
.archive-brand-model-card{scroll-snap-align:start;min-height:270px;padding:20px;border:1px solid #dce5ee;border-radius:11px;background:#fff;transition:border-color .18s ease}.archive-brand-model-card:hover,.archive-brand-model-card.is-selected{border-color:#0a5cd8}.archive-brand-model-card__title{width:100%;display:flex;align-items:center;gap:14px;min-height:54px;padding:0 0 15px;border:0;border-bottom:1px solid #e8edf3;background:transparent;color:#082955;text-align:left;cursor:pointer}.archive-brand-model-card__title:hover strong,.archive-brand-model-card__title.is-active strong{color:#0a5cd8}.archive-brand-model-card__title img{width:68px;height:42px;flex:0 0 68px;object-fit:contain}.archive-brand-model-card__title span{min-width:0;display:flex;flex-direction:column;gap:4px}.archive-brand-model-card__title strong{font-size:15px;line-height:1.3;font-weight:750}.archive-brand-model-card__title small{color:#71839a;font-size:11px;line-height:1.35}.archive-brand-model-card__models{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 9px;margin:16px 0 0;padding:0;list-style:none}.archive-brand-model-card__title{text-decoration:none}.archive-brand-model-card__models a{width:100%;min-height:36px;padding:7px 10px;display:flex;align-items:center;border:1px solid #e4eaf0;border-radius:7px;background:#f9fbfc;color:#405773;font-size:12px;font-weight:500;text-align:left;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}.archive-brand-model-card__models a:hover,.archive-brand-model-card__models a.is-active{border-color:#0a5cd8;background:#eaf2ff;color:#0a5cd8}.footer-marka-detayli-slider__empty{margin:0;padding:28px;border:1px dashed #cbd7e4;border-radius:10px;color:#71839a;text-align:center;font-size:12px}
@media(min-width:1250px){.footer-marka-detayli-slider__track{grid-auto-columns:calc((100% - 42px)/4)}}
@media(max-width:850px){.footer-marka-detayli-slider{padding:22px}.footer-marka-detayli-slider__head{align-items:stretch;flex-direction:column}.footer-marka-detayli-slider__search{width:100%}.footer-marka-detayli-slider__track{grid-auto-columns:minmax(250px,78%)}.footer-marka-detayli-slider__arrow--prev{left:-41px}.footer-marka-detayli-slider__arrow--next{right:-41px}}
@media(max-width:560px){.footer-marka-detayli-slider{margin-top:18px;padding:18px 14px;border-radius:10px;overflow:hidden}.footer-marka-detayli-slider__head{gap:16px}.footer-marka-detayli-slider__head h2{font-size:20px}.footer-marka-detayli-slider__selection{align-items:flex-start;flex-direction:column}.footer-marka-detayli-slider__track{grid-auto-columns:88%;gap:10px}.footer-marka-detayli-slider__arrow{display:none}.archive-brand-model-card{min-height:246px;padding:15px}}
/* ?r?n kart? g?rsel ve title detay linkleri */
body .reference-product-card .product-media-link{
display:grid!important;
place-items:center!important;
width:100%!important;
height:100%!important;
text-decoration:none!important;
color:inherit!important;
}
body .reference-product-card .product-media-link img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
}
body .reference-product-card .product-title-link{
color:inherit!important;
text-decoration:none!important;
}
body .reference-product-card .product-title-link:hover{
color:#0a5cd8!important;
text-decoration:underline!important;
text-underline-offset:3px!important;
}
/* =========================================================
V90: ARCHIVE MOBILE POLISH (?767px) ? filters sheet + layout
========================================================= */
.mobile-filters-trigger,
.mobile-filters-sheet-head,
.mobile-filters-sheet-foot,
.mobile-filters-backdrop{
display:none;
}
@media(max-width:767px){
.shell.subcategory-section,
.subcategory-section.static-subcategory-nav{
gap:8px!important;
margin-top:8px!important;
}
.subcategory-chip{
min-width:200px!important;
height:54px!important;
padding:10px 14px!important;
}
.subcategory-chip strong{font-size:13px!important}
.subcategory-chip span{font-size:11px!important}
.archive-layout{
display:block!important;
margin-top:16px!important;
}
.mobile-filters-trigger{
display:inline-flex!important;
align-items:center;
justify-content:center;
gap:8px;
height:42px;
padding:0 14px;
border:1px solid #d5e0ec;
border-radius:10px;
background:#fff;
color:#0a2d59;
font-size:13px;
font-weight:700;
cursor:pointer;
flex:0 0 auto;
}
.mobile-filters-trigger:hover,
.mobile-filters-trigger:focus-visible{
border-color:#0a5cd8;
background:#eaf2ff;
color:#0a5cd8;
outline:0;
}
.mobile-filters-trigger i{font-size:13px}
.result-toolbar{
display:grid!important;
grid-template-columns:1fr auto;
grid-template-areas:
"count filter"
"sort sort";
align-items:center;
gap:10px 12px;
height:auto!important;
padding:10px 0 14px!important;
flex-direction:unset!important;
position:relative!important;
z-index:40!important;
overflow:visible!important;
}
.result-toolbar__count{grid-area:count;min-width:0}
.mobile-filters-trigger{grid-area:filter}
.result-toolbar__sort{
grid-area:sort;
display:flex!important;
align-items:center;
gap:10px;
width:100%;
min-width:0;
position:relative!important;
z-index:2!important;
overflow:visible!important;
}
.result-toolbar select,
.result-toolbar__sort select{
flex:1 1 auto;
width:100%!important;
min-width:0!important;
max-width:none!important;
height:42px;
}
.result-toolbar__sort .custom-select{
flex:1 1 auto!important;
width:100%!important;
min-width:0!important;
max-width:none!important;
position:relative!important;
}
.result-toolbar__sort .custom-select.open{
z-index:800!important;
}
.result-toolbar__sort .custom-select-trigger{
width:100%!important;
min-width:0!important;
height:44px!important;
font-size:13px!important;
border-radius:10px!important;
}
.result-toolbar__sort .custom-select-option{
min-height:50px!important;
font-size:15px!important;
padding:13px 18px!important;
border-radius:0!important;
}
.archive-main,
.product-grid,
#productGrid{
overflow:visible!important;
z-index:1!important;
}
.mobile-filters-backdrop{
display:block;
position:fixed;
inset:0;
z-index:1200;
border:0;
padding:0;
margin:0;
background:rgba(2,12,27,.48);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .22s ease,visibility .22s ease;
cursor:pointer;
}
body.is-archive-filters-open .mobile-filters-backdrop{
opacity:1;
visibility:visible;
pointer-events:auto;
}
body.is-archive-filters-open .mobile-filters-backdrop[hidden]{
display:block!important;
}
.archive-layout > .sidebar,
#archiveSidebar.sidebar{
position:fixed!important;
left:0!important;
right:0!important;
bottom:0!important;
top:auto!important;
z-index:1201!important;
width:100%!important;
max-width:100%!important;
height:min(88dvh,720px)!important;
max-height:min(88dvh,720px)!important;
margin:0!important;
padding:0 0 env(safe-area-inset-bottom,0)!important;
display:flex!important;
flex-direction:column!important;
gap:0!important;
grid-template-columns:none!important;
border-radius:18px 18px 0 0!important;
background:#f4f6f8!important;
box-shadow:0 -18px 48px rgba(2,12,27,.22)!important;
transform:translateY(105%);
transition:transform .28s cubic-bezier(.22,.9,.28,1);
overflow:hidden!important;
-webkit-overflow-scrolling:touch;
pointer-events:none;
visibility:hidden;
}
body.is-archive-filters-open .archive-layout > .sidebar,
body.is-archive-filters-open #archiveSidebar.sidebar{
transform:translateY(0);
pointer-events:auto;
visibility:visible;
}
.mobile-filters-sheet-head{
display:flex!important;
align-items:center;
justify-content:space-between;
gap:12px;
flex:0 0 auto;
position:sticky;
top:0;
z-index:2;
padding:14px 16px 12px;
border-bottom:1px solid #dde5ee;
background:#fff;
}
.mobile-filters-sheet-head strong{
font-size:16px;
font-weight:800;
color:#082955;
}
.mobile-filters-close{
width:36px;
height:36px;
display:grid;
place-items:center;
border:1px solid #d7e1ec;
border-radius:10px;
background:#fff;
color:#405773;
cursor:pointer;
}
.mobile-filters-close:hover,
.mobile-filters-close:focus-visible{
border-color:#0a5cd8;
color:#0a5cd8;
outline:0;
}
#archiveSidebar.sidebar > .side-card,
.archive-layout > .sidebar > .side-card{
margin:12px 14px 0!important;
flex:0 0 auto;
}
#archiveSidebar.sidebar > .side-card:first-of-type,
#archiveSidebar .archive-brand-card{
margin-top:12px!important;
}
#archiveSidebar .brand-filter-card .filter-option-list,
.sidebar .brand-filter-card .filter-option-list{
max-height:180px!important;
overflow-y:auto!important;
overscroll-behavior:contain;
}
#archiveSidebar .secure-card,
#archiveSidebar .wholesale-card,
.archive-layout > .sidebar > .secure-card,
.archive-layout > .sidebar > .wholesale-card{
display:none!important;
}
.mobile-filters-sheet-foot{
display:block!important;
flex:0 0 auto;
position:sticky;
bottom:0;
z-index:2;
margin-top:auto;
padding:12px 14px calc(12px + env(safe-area-inset-bottom,0));
border-top:1px solid #dde5ee;
background:#fff;
}
.mobile-filters-apply{
width:100%;
height:48px;
border:0;
border-radius:12px;
background:linear-gradient(135deg,#0a5cd8,#0849ad);
color:#fff;
font-size:15px;
font-weight:800;
cursor:pointer;
box-shadow:0 10px 22px rgba(10,92,216,.22);
}
.mobile-filters-apply:hover,
.mobile-filters-apply:focus-visible{
filter:brightness(1.04);
outline:0;
}
/* Scrollable filter body between head and foot */
#archiveSidebar.sidebar{
overflow:hidden!important;
}
#archiveSidebar.sidebar > .side-card{
overflow:visible;
}
body.is-archive-filters-open{
overflow:hidden!important;
touch-action:none;
}
body.is-archive-filters-open #archiveSidebar.sidebar{
overflow-y:auto!important;
overscroll-behavior:contain;
}
.archive-main{min-width:0}
.category-intro{padding:16px!important}
.category-intro h1,.category-intro h2{font-size:20px!important;line-height:1.25!important}
.product-grid{
grid-template-columns:1fr!important;
gap:14px!important;
}
/* Product cards: see V91 block below (full mobile redesign) */
}
@media(max-width:767px) and (prefers-reduced-motion:reduce){
.mobile-filters-backdrop,
#archiveSidebar.sidebar,
.archive-layout > .sidebar{
transition:none!important;
}
}
/* Desktop: buy-row is transparent so price stays in product-info flow */
/* Desktop restore: stock in title row, meta-price in meta grid */
@media(min-width:768px){
body .reference-product-card .stock-badge,
body .reference-product-card .stock-badge.in-stock,
body .reference-product-card .stock-badge.out-stock{
position:static!important;
top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
}
body .reference-product-card .product-meta-row,
body .reference-product-card:not(.discounted) .product-meta-row{
display:grid!important;
grid-template-columns:auto auto minmax(0,1fr)!important;
column-gap:16px!important;
align-items:center!important;
}
body .reference-product-card .product-meta-row > .oem-hover-wrap,
body .reference-product-card:not(.discounted) .oem-hover-wrap{
justify-self:start!important;
margin:0!important;
padding-right:4px!important;
}
body .reference-product-card .product-meta-row > .meta-price,
body .reference-product-card:not(.discounted) .meta-price{
display:inline-flex!important;
order:unset!important;
flex:unset!important;
width:auto!important;
max-width:none!important;
margin-left:8px!important;
justify-self:end!important;
}
}
/* Desktop: stok ba?l?k sat?r?nda kals?n (mobil absolute s?z?nt?s? olmas?n) */
@media(min-width:768px){
body .reference-product-card .stock-badge,
body .reference-product-card .stock-badge.in-stock,
body .reference-product-card .stock-badge.out-stock{
position:static!important;
top:auto!important;
left:auto!important;
right:auto!important;
bottom:auto!important;
}
}
/* =========================================================
V98: MOBILE PRODUCT CARD ONLY (max-width:767px)
No display:contents on meta. Real flex rows. Qty beside buy-row.
========================================================= */
@media(max-width:767px){
html body .product-grid{
display:grid!important;
grid-template-columns:1fr!important;
gap:14px!important;
}
html body .reference-product-card,
html body .reference-product-card.discounted,
html body .reference-product-card.out-of-stock,
html body .reference-product-card.compatible-card{
position:relative!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
width:100%!important;
max-width:none!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
margin:0!important;
padding:0 14px 12px!important;
border:1px solid #dce5ee!important;
border-radius:16px!important;
background:#fff!important;
box-shadow:0 8px 24px rgba(8,41,85,.06)!important;
overflow:visible!important;
transform:none!important;
}
html body .reference-product-card.discounted,
html body .reference-product-card.discounted:hover,
html body .reference-product-card.discounted:focus-within,
html body .reference-product-card.discounted:active{
border:2px solid #20A95A!important;
border-color:#20A95A!important;
}
html body .reference-product-card::before,
html body .reference-product-card::after{
content:none!important;
display:none!important;
}
html body .reference-product-card .product-card-main,
html body .reference-product-card.discounted .product-card-main,
html body .reference-product-card:not(.discounted) .product-card-main{
position:static!important;
display:flex!important;
flex-direction:column!important;
width:100%!important;
height:auto!important;
min-height:0!important;
margin:0!important;
padding:0!important;
gap:0!important;
inset:auto!important;
left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
transform:none!important;
overflow:visible!important;
}
html body .reference-product-card > .product-card-chrome{
padding:10px 0 6px!important;
min-height:44px!important;
margin:0!important;
gap:12px!important;
}
html body .reference-product-card > .product-card-chrome > .favorite{
width:36px!important;
height:36px!important;
}
html body .reference-product-card > .product-card-main{
margin-top:0!important;
padding-top:0!important;
}
html body .reference-product-card .product-visual,
html body .reference-product-card .product-visual.photo-source,
html body .reference-product-card.discounted .product-visual,
html body .reference-product-card.discounted .product-visual.photo-source,
html body .reference-product-card:not(.discounted) .product-visual,
html body .reference-product-card:not(.discounted) .product-visual.photo-source{
position:static!important;
left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
inset:auto!important;
transform:none!important;
width:100%!important;
height:220px!important;
min-height:220px!important;
max-height:220px!important;
margin:0!important;
padding:0!important;
display:grid!important;
place-items:center!important;
background:transparent!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
z-index:1!important;
overflow:visible!important;
}
html body .reference-product-card .product-visual img,
html body .reference-product-card:hover .product-visual img,
html body .reference-product-card:active .product-visual img,
html body .reference-product-card .product-visual.photo-source img,
html body .reference-product-card .product-media-link,
html body .reference-product-card .product-media-link img{
position:static!important;
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:220px!important;
margin:0!important;
padding:0!important;
object-fit:contain!important;
transform:none!important;
filter:none!important;
background:transparent!important;
border-radius:0!important;
transition:none!important;
animation:none!important;
}
html body .reference-product-card:hover .product-visual img,
html body .reference-product-card:active .product-visual img{
transform:none!important;
filter:none!important;
}
/* in-stock / out-stock: kapsayıcı yok — sadece nokta + metin */
html body .reference-product-card .stock-badge.in-stock,
html body .reference-product-card .stock-badge.out-stock{
padding:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
}
html body .reference-product-card .stock-badge.in-stock{color:#149a51!important}
html body .reference-product-card .stock-badge.out-stock{color:#d53c3c!important}
html body .reference-product-card .stock-badge.in-stock::before,
html body .reference-product-card .stock-badge.out-stock::before{
content:""!important;
width:8px!important;
height:8px!important;
border-radius:50%!important;
background:currentColor!important;
margin-right:6px!important;
flex:0 0 auto!important;
}
html body .reference-product-card .vehicle-compatible-badge{
position:absolute!important;
top:48px!important;left:12px!important;
z-index:8!important;
padding:5px 9px!important;
border-radius:999px!important;
background:#e8f8ef!important;
font-size:10px!important;
}
html body .reference-product-card .product-info,
html body .reference-product-card.discounted .product-info,
html body .reference-product-card:not(.discounted) .product-info{
position:static!important;
left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
inset:auto!important;
transform:none!important;
width:100%!important;
max-width:none!important;
height:auto!important;
min-height:0!important;
margin:0!important;
padding:12px 0 0!important;
display:grid!important;
grid-template-columns:auto minmax(0,1fr) auto!important;
grid-template-areas:
"title title title"
"code code code"
"cat brand oem"
"price price price" !important;
column-gap:10px!important;
row-gap:10px!important;
align-items:center!important;
overflow:visible!important;
z-index:20!important;
box-sizing:border-box!important;
color:#082955!important;
}
html body .reference-product-card .product-title-row{
grid-area:title!important;
position:static!important;
display:block!important;
margin:0!important;
padding:0!important;
min-height:0!important;
height:auto!important;
}
html body .reference-product-card .product-title-row h3,
html body .reference-product-card .product-title-link{
position:static!important;
display:block!important;
margin:0!important;
padding:0!important;
width:100%!important;
font-size:17px!important;
line-height:1.3!important;
font-weight:800!important;
color:#082955!important;
text-decoration:none!important;
}
html body .reference-product-card .product-code-review-row{
grid-area:code!important;
position:static!important;
display:flex!important;
flex-wrap:wrap!important;
gap:8px 12px!important;
margin:0!important;
padding:0 0 10px!important;
min-height:0!important;
height:auto!important;
border-bottom:1px solid #e8edf3!important;
}
html body .reference-product-card .stock-code,
html body .reference-product-card .product-review-summary{
position:static!important;
display:inline-flex!important;
font-size:12px!important;
line-height:1.35!important;
color:#4a5d75!important;
}
html body .reference-product-card .product-review-summary span:last-child{display:inline!important}
/* Meta: Motor | Bosch | OEM ? display:contents only on mobile */
html body .reference-product-card .product-meta-row,
html body .reference-product-card:not(.discounted) .product-meta-row{
display:contents!important;
}
html body .reference-product-card .category-pill{
grid-area:cat!important;
position:static!important;
left:auto!important;top:auto!important;inset:auto!important;
flex:0 0 auto!important;
display:inline-flex!important;
align-items:center!important;
align-self:center!important;
justify-self:start!important;
gap:5px!important;
margin:0!important;
padding:6px 10px!important;
width:auto!important;
height:auto!important;
min-height:0!important;
border-radius:999px!important;
background:#e7f0ff!important;
color:#0a63d9!important;
font-size:11px!important;
font-weight:750!important;
line-height:1.2!important;
}
html body .reference-product-card .brand-logo-meta{
grid-area:brand!important;
position:static!important;
flex:0 1 auto!important;
min-width:0!important;
min-height:0!important;
display:inline-flex!important;
align-items:center!important;
align-self:center!important;
justify-self:start!important;
margin:0!important;
}
html body .reference-product-card .brand-logo-meta img,
html body .reference-product-card .brand-logo-meta svg{
display:block!important;
max-width:100px!important;
height:28px!important;
width:auto!important;
object-fit:contain!important;
object-position:left center!important;
}
html body .reference-product-card .oem-hover-wrap{
grid-area:oem!important;
position:relative!important;
flex:0 0 auto!important;
margin:0!important;
left:auto!important;right:auto!important;top:auto!important;
z-index:80!important;
overflow:visible!important;
align-self:center!important;
justify-self:end!important;
}
html body .reference-product-card .oem-toggle{
position:static!important;
display:inline-flex!important;
align-items:center!important;
gap:4px!important;
margin:0!important;
padding:0!important;
border:0!important;
background:transparent!important;
box-shadow:none!important;
color:#0a5cd8!important;
font-size:11px!important;
font-weight:700!important;
line-height:1.2!important;
white-space:nowrap!important;
}
html body .reference-product-card .oem-toggle span{
font-size:11px!important;
font-weight:700!important;
line-height:1.2!important;
}
html body .reference-product-card .oem-toggle i,
html body .reference-product-card .oem-toggle svg{
width:11px!important;height:11px!important;font-size:11px!important;
}
html body .reference-product-card:has(.oem-hover-wrap:hover),
html body .reference-product-card:has(.oem-hover-wrap:focus-within),
html body .reference-product-card:has(.oem-popover:not([hidden])),
html body .reference-product-card:has(.oem-popover:hover){
z-index:400!important;
overflow:visible!important;
}
html body .reference-product-card .product-meta-row,
html body .reference-product-card .product-info,
html body .reference-product-card .product-card-main{
overflow:visible!important;
}
html body .reference-product-card .oem-popover{
position:absolute!important;
left:auto!important;right:0!important;
top:calc(100% + 6px)!important;
width:min(260px,calc(100vw - 28px))!important;
max-width:min(260px,calc(100vw - 28px))!important;
max-height:none!important;
padding:12px!important;
z-index:500!important;
overflow:visible!important;
box-shadow:0 14px 32px rgba(8,41,85,.18)!important;
border:1px solid #e1e8f0!important;
border-radius:12px!important;
background:#fff!important;
}
html body .reference-product-card .oem-popover ul{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:8px 10px!important;
max-height:min(220px,42vh)!important;
overflow-x:hidden!important;
overflow-y:auto!important;
-webkit-overflow-scrolling:touch;
}
html body .reference-product-card .oem-popover>strong{font-size:11px!important;margin-bottom:7px!important;font-weight:750!important}
html body .reference-product-card .oem-popover li{
font-size:10px!important;
font-weight:700!important;
padding:5px 0!important;
overflow:visible!important;
line-height:1.3!important;
}
html body .reference-product-card .oem-popover li span{
overflow:visible!important;
text-overflow:clip!important;
white-space:normal!important;
word-break:break-word!important;
font-size:10px!important;
line-height:1.3!important;
}
html body .reference-product-card .oem-popover li button{
width:22px!important;
height:22px!important;
}
html body .reference-product-card .oem-popover li svg,
html body .reference-product-card .oem-popover li i{
width:12px!important;
height:12px!important;
font-size:12px!important;
}
/* Price: tam genişlik (mobil) */
html body .reference-product-card .product-meta-row > .meta-price,
html body .reference-product-card:not(.discounted) .product-meta-row > .meta-price,
html body .reference-product-card .meta-price,
html body .reference-product-card .product-price-panel,
html body .reference-product-card .discounted-price-panel{
grid-area:price!important;
position:static!important;
left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
order:unset!important;
flex:none!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
height:auto!important;
min-height:0!important;
margin:0!important;
padding:10px 12px!important;
border:1px solid #dce5ee!important;
border-radius:12px!important;
background:#f8fafc!important;
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
gap:6px!important;
box-sizing:border-box!important;
justify-self:stretch!important;
overflow:hidden!important;
}
html body .reference-product-card .product-price-panel,
html body .reference-product-card .discounted-price-panel{
width:100%!important;
max-width:100%!important;
}
html body .reference-product-card.discounted .product-price-panel,
html body .reference-product-card.discounted .discounted-price-panel{
border-color:#cfeedd!important;
background:#f3fbf6!important;
}
html body .reference-product-card .discounted-price-panel{
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
gap:8px!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
html body .reference-product-card .discount-price-row{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
grid-template-rows:auto auto!important;
grid-auto-flow:row!important;
align-items:center!important;
gap:2px 8px!important;
min-width:0!important;
width:100%!important;
max-width:100%!important;
box-sizing:border-box!important;
}
html body .reference-product-card .discount-price-row .current-price-wrap{
grid-column:1!important;
grid-row:1!important;
display:inline-flex!important;
flex-wrap:wrap!important;
align-items:baseline!important;
gap:4px!important;
justify-self:start!important;
align-self:end!important;
width:auto!important;
max-width:100%!important;
min-width:0!important;
}
html body .reference-product-card .discount-price-row del{
grid-column:1!important;
grid-row:2!important;
display:block!important;
justify-self:start!important;
align-self:start!important;
font-size:12px!important;
line-height:1!important;
color:#8a9bb0!important;
}
html body .reference-product-card .discount-price-row .current-price-wrap strong{
font-size:18px!important;
line-height:1.15!important;
color:#0a5cd8!important;
grid-column:auto!important;
justify-self:auto!important;
white-space:normal!important;
overflow-wrap:anywhere!important;
word-break:break-word!important;
}
html body .reference-product-card.discounted .discount-price-row .current-price-wrap strong{color:#149a51!important}
html body .reference-product-card .discount-price-row .current-price-wrap small{font-size:10px!important;color:#71839a!important}
html body .reference-product-card .discount-price-row .discount-badge{
grid-column:2!important;
grid-row:1 / span 2!important;
align-self:center!important;
justify-self:end!important;
padding:3px 7px!important;border-radius:999px!important;
background:#19a957!important;color:#fff!important;font-size:10px!important;font-weight:700!important;
white-space:nowrap!important;
flex:0 0 auto!important;
}
html body .reference-product-card .saving-strip{
grid-column:auto!important;
grid-row:auto!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:5px!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
height:auto!important;
min-height:0!important;
margin:0!important;
padding:6px 8px!important;
font-size:11px!important;
color:#149a51!important;
white-space:nowrap!important;
border-radius:8px!important;
background:linear-gradient(90deg,#eefaf2,#e7f7ed)!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
/* Adet + Sepete Ekle: ayni satirda (mobil only) */
html body .reference-product-card .visual-quantity-control,
html body .reference-product-card .quantity-control.visual-quantity-control{
position:absolute!important;
z-index:11!important;
left:14px!important;
right:auto!important;
top:auto!important;
bottom:calc(12px + 42px + 8px)!important;
transform:none!important;
justify-self:auto!important;
align-self:auto!important;
width:calc((100% - 36px) / 2)!important;
min-width:0!important;
max-width:none!important;
height:46px!important;
min-height:46px!important;
margin:0!important;
padding:0!important;
display:grid!important;
grid-template-columns:34px 1fr 34px!important;
grid-template-rows:1fr!important;
align-items:center!important;
border:1px solid #d7e1ec!important;
border-radius:10px!important;
background:#fff!important;
box-sizing:border-box!important;
}
html body .reference-product-card:has(.oem-hover-wrap:hover) .visual-quantity-control,
html body .reference-product-card:has(.oem-hover-wrap:focus-within) .visual-quantity-control,
html body .reference-product-card:has(.oem-popover:hover) .visual-quantity-control,
html body .reference-product-card:has(.oem-popover:not([hidden])) .visual-quantity-control{
z-index:0!important;
}
html body .reference-product-card:has(.oem-hover-wrap:hover) .product-info,
html body .reference-product-card:has(.oem-hover-wrap:focus-within) .product-info,
html body .reference-product-card:has(.oem-popover:hover) .product-info,
html body .reference-product-card:has(.oem-popover:not([hidden])) .product-info{
z-index:60!important;
}
html body .reference-product-card .visual-quantity-control>span{display:none!important}
html body .reference-product-card .visual-quantity-control button,
html body .reference-product-card .visual-quantity-control input{
width:100%!important;height:42px!important;min-height:42px!important;
margin:0!important;border:0!important;background:transparent!important;
font-size:15px!important;font-weight:800!important;color:#0a2d59!important;
border-radius:0!important;
line-height:42px!important;
}
html body .reference-product-card .card-actions,
html body .reference-product-card.discounted .card-actions{
position:static!important;
left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
width:100%!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
margin:10px 0 0!important;
padding:0!important;
display:grid!important;
grid-template-columns:1fr 1fr!important;
grid-template-rows:46px 42px!important;
gap:8px!important;
background:transparent!important;
box-sizing:border-box!important;
overflow:visible!important;
}
html body .reference-product-card .card-actions > .primary,
html body .reference-product-card .card-actions > .add-cart-button{
grid-column:2!important;
grid-row:1!important;
position:static!important;
left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
width:100%!important;
min-width:0!important;
max-width:none!important;
height:46px!important;
min-height:46px!important;
margin:0!important;
padding:0 12px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:6px!important;
border:0!important;
border-radius:10px!important;
background:linear-gradient(135deg,#0a5cd8,#0849ad)!important;
color:#fff!important;
font-size:14px!important;
font-weight:800!important;
box-sizing:border-box!important;
transform:none!important;
}
html body .reference-product-card .card-actions > button[data-action="vehicles"],
html body .reference-product-card .card-actions > button:first-child{
grid-column:1!important;
grid-row:2!important;
order:0!important;
}
html body .reference-product-card .card-actions > a.whatsapp{
grid-column:2!important;
grid-row:2!important;
order:0!important;
}
html body .reference-product-card .card-actions > button,
html body .reference-product-card .card-actions > a,
html body .reference-product-card .card-actions > button:first-child,
html body .reference-product-card .card-actions > a.whatsapp{
position:static!important;
left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
width:100%!important;
min-width:0!important;
max-width:none!important;
height:42px!important;
min-height:42px!important;
margin:0!important;
padding:0 8px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:6px!important;
border:1px solid #d7e1ec!important;
border-radius:10px!important;
background:#fff!important;
color:#0a2d59!important;
font-size:11px!important;
font-weight:700!important;
box-sizing:border-box!important;
transform:none!important;
}
html body .reference-product-card .card-actions > a.whatsapp{
color:#13b861!important;
border-color:#c6ebd6!important;
}
html body .reference-product-card .card-actions span{
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
}
/* =========================================================
V93: MOBILE PAGINATION ?767px
========================================================= */
.page-button__label{display:none}
.pagination__pages{display:contents}
.pagination__status{display:none}
.page-ellipsis{
min-width:28px;height:40px;display:grid;place-items:center;
color:#8a9bb0;font-size:14px;font-weight:700;user-select:none;
}
@media(max-width:767px){
body #pagination.pagination,
body .pagination#pagination,
body #pagination{
display:grid!important;
grid-template-columns:auto 1fr auto!important;
grid-template-areas:
"prev pages next"
"status status status";
align-items:center!important;
justify-content:stretch!important;
gap:8px 6px!important;
width:100%!important;
margin:18px 0 8px!important;
padding:10px!important;
border:1px solid #dce5ee!important;
border-radius:14px!important;
background:#fff!important;
box-sizing:border-box!important;
}
body #pagination .pagination__pages{
grid-area:pages!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:5px!important;
min-width:0!important;
flex-wrap:nowrap!important;
overflow:hidden!important;
}
body #pagination .page-button--nav:first-child{grid-area:prev!important}
body #pagination .page-button--nav:last-of-type{grid-area:next!important}
body #pagination .pagination__status{
grid-area:status!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:6px!important;
margin:0!important;
padding-top:6px!important;
border-top:1px solid #e8edf3!important;
color:#657891!important;
font-size:12px!important;
font-weight:600!important;
}
body #pagination .pagination__status strong{
color:#0a2d59!important;
font-size:13px!important;
font-weight:800!important;
}
body #pagination .page-button{
min-width:40px!important;
width:40px!important;
height:40px!important;
padding:0!important;
border:1px solid #d7e1ec!important;
border-radius:10px!important;
background:#fff!important;
color:#405773!important;
font-size:13px!important;
font-weight:750!important;
box-shadow:none!important;
transform:none!important;
}
body #pagination .page-button--nav{
width:auto!important;
min-width:40px!important;
padding:0 10px!important;
gap:4px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
}
body #pagination .page-button__label{display:none!important}
body #pagination .page-button.active{
background:#0a5cd8!important;
border-color:#0a5cd8!important;
color:#fff!important;
}
body #pagination .page-button:disabled{
opacity:.38!important;
cursor:not-allowed!important;
}
body #pagination .page-ellipsis{
min-width:18px!important;
height:40px!important;
color:#8a9bb0!important;
font-size:13px!important;
}
body #pagination .page-button i,
body #pagination .page-button svg{
width:16px!important;
height:16px!important;
font-size:14px!important;
}
}
/* =========================================================
MOBILE CUSTOM SELECT ? bottom sheet (site standard)
========================================================= */
@media(max-width:767px){
body.custom-select-sheet-open,
body.is-custom-select-open.custom-select-sheet-open{
overflow:hidden!important;
}
body.custom-select-sheet-open::before{
content:"";
position:fixed;
inset:0;
z-index:1400;
background:rgba(2,12,27,.48);
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
body .custom-select-menu,
body .custom-select.open .custom-select-menu,
body .result-toolbar__sort .custom-select-menu,
body .result-toolbar__sort .custom-select.open .custom-select-menu,
body > .custom-select-menu{
position:fixed!important;
z-index:1401!important;
left:8px!important;
right:8px!important;
top:auto!important;
bottom:0!important;
width:auto!important;
max-width:none!important;
max-height:min(70dvh,560px)!important;
margin:0!important;
padding:0 0 env(safe-area-inset-bottom,0)!important;
display:flex!important;
flex-direction:column!important;
overflow:hidden!important;
background:#fff!important;
border:0!important;
border-radius:20px 20px 0 0!important;
box-shadow:0 -16px 50px rgba(0,0,0,.2)!important;
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(105%);
transition:transform .28s cubic-bezier(.22,.8,.24,1),opacity .2s ease,visibility .28s;
animation:none!important;
}
body .custom-select-menu.open,
body .custom-select.open .custom-select-menu.open,
body > .custom-select-menu.open{
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
transform:translateY(0)!important;
}
body .custom-select-sheet-header{
position:relative!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
flex:0 0 auto!important;
min-height:60px!important;
margin:0!important;
padding:18px 18px 10px!important;
border-bottom:1px solid #e1e7ef!important;
color:#082955!important;
font-size:15px!important;
font-weight:700!important;
}
body .custom-select-sheet-header::before{
content:"";
position:absolute;
top:7px;
left:50%;
width:38px;
height:4px;
transform:translateX(-50%);
border-radius:99px;
background:#d3dae4;
}
body .custom-select-sheet-close{
width:30px!important;
height:30px!important;
display:grid!important;
place-items:center!important;
border:0!important;
border-radius:50%!important;
background:#f0f3f7!important;
color:#082955!important;
font-size:12px!important;
cursor:pointer!important;
}
body .custom-select-options{
display:block!important;
flex:1 1 auto!important;
min-height:0!important;
max-height:calc(min(70dvh,560px) - 60px)!important;
overflow-x:hidden!important;
overflow-y:auto!important;
-webkit-overflow-scrolling:touch;
padding:0!important;
}
body .custom-select-menu .custom-select-option,
body .result-toolbar__sort .custom-select-option{
width:100%!important;
min-height:50px!important;
margin:0!important;
padding:13px 18px!important;
border:0!important;
border-bottom:1px solid #edf0f4!important;
border-radius:0!important;
background:#fff!important;
color:#203B60!important;
font-size:15px!important;
font-weight:600!important;
justify-content:space-between!important;
}
body .custom-select-menu .custom-select-option.selected,
body .result-toolbar__sort .custom-select-option.selected{
background:rgba(10,92,216,.07)!important;
color:#0a5cd8!important;
font-weight:700!important;
}
}
/* =========================================================
V99: MacBook ONLY (1201�1500) � fiyat/kazan� ta�mas� + adet/CTA �ak��mas�
Mobil (?767) ve geni� masa�st� (>1500) dokunulmaz.
========================================================= */
@media (min-width:1201px) and (max-width:1500px){
html body .reference-product-card,
html body .reference-product-card.discounted{
height:auto!important;
min-height:460px!important;
overflow:visible!important;
}
/* Bilgi alan� aksiyonlara binmesin */
html body .reference-product-card .product-info,
html body .reference-product-card.discounted .product-info{
position:absolute!important;
bottom:112px!important;
box-sizing:border-box!important;
}
/* Fiyat paneli: sabit y�kseklik kazan� �eridini d��ar� ta��r�yordu */
html body .reference-product-card .product-price-panel,
html body .reference-product-card .discounted-price-panel,
html body .reference-product-card.discounted .product-price-panel{
height:auto!important;
min-height:0!important;
max-height:none!important;
overflow:hidden!important;
display:flex!important;
flex-direction:column!important;
justify-content:flex-start!important;
gap:6px!important;
padding:9px 11px!important;
box-sizing:border-box!important;
}
html body .reference-product-card .discount-price-row{
display:grid!important;
grid-template-columns:auto auto minmax(0,1fr)!important;
align-items:center!important;
gap:6px 8px!important;
min-height:0!important;
width:100%!important;
}
html body .reference-product-card .saving-strip{
position:static!important;
left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
height:26px!important;
min-height:26px!important;
margin:0!important;
padding:0 10px!important;
flex:0 0 auto!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
/* CTA ikili: ustte Uyumlu|WhatsApp, altta adet+Sepete Ekle */
html body .reference-product-card .card-actions,
html body .reference-product-card.discounted .card-actions{
position:absolute!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
grid-template-rows:42px 42px!important;
gap:8px!important;
align-items:stretch!important;
left:14px!important;
right:14px!important;
bottom:12px!important;
width:auto!important;
height:92px!important;
min-height:92px!important;
max-height:none!important;
margin:0!important;
padding:0 0 0 0!important;
overflow:visible!important;
background:transparent!important;
z-index:8!important;
}
html body .reference-product-card .card-actions>button,
html body .reference-product-card .card-actions>a,
html body .reference-product-card .card-actions>button:first-child,
html body .reference-product-card .card-actions>a.whatsapp,
html body .reference-product-card .card-actions>.primary,
html body .reference-product-card .card-actions>.add-cart-button{
position:static!important;
inset:auto!important;
left:auto!important;
right:auto!important;
top:auto!important;
bottom:auto!important;
width:100%!important;
max-width:none!important;
min-width:0!important;
height:42px!important;
min-height:42px!important;
margin:0!important;
padding:0 8px!important;
box-sizing:border-box!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
html body .reference-product-card .card-actions>.primary,
html body .reference-product-card .card-actions>.add-cart-button{
grid-column:1 / -1!important;
width:calc(100% - 40px)!important;
margin-left:40px!important;
justify-self:stretch!important;
}
/* Adet: alt satirda Sepete Ekle'nin solunda dikey */
html body .reference-product-card .quantity-control.visual-quantity-control,
html body .reference-product-card .visual-quantity-control{
position:absolute!important;
z-index:11!important;
left:14px!important;
right:auto!important;
top:auto!important;
bottom:12px!important;
width:32px!important;
min-width:32px!important;
max-width:32px!important;
height:42px!important;
min-height:42px!important;
margin:0!important;
padding:2px!important;
display:grid!important;
grid-template-columns:1fr!important;
grid-template-rows:13px 14px 13px!important;
align-items:center!important;
justify-items:center!important;
gap:0!important;
box-sizing:border-box!important;
transform:none!important;
}
html body .reference-product-card .quantity-control.visual-quantity-control>span,
html body .reference-product-card .visual-quantity-control>span{
display:none!important;
}
html body .reference-product-card .quantity-control.visual-quantity-control button,
html body .reference-product-card .quantity-control.visual-quantity-control input,
html body .reference-product-card .visual-quantity-control button,
html body .reference-product-card .visual-quantity-control input{
width:26px!important;
max-width:26px!important;
min-width:0!important;
height:12px!important;
min-height:12px!important;
margin:0!important;
padding:0!important;
line-height:12px!important;
font-size:10px!important;
box-sizing:border-box!important;
}
html body .reference-product-card .quantity-control.visual-quantity-control input,
html body .reference-product-card .visual-quantity-control input{
height:14px!important;
min-height:14px!important;
line-height:14px!important;
}
}
/* V100: mobil araç kataloğu adımları — placeholder metin yok, sol hizalı satır */
@media(max-width:767px){
html body .vehicle-catalog-steps li{
display:flex!important;
grid-template-columns:none!important;
align-items:center!important;
justify-content:flex-start!important;
text-align:left!important;
min-height:44px!important;
padding:8px 12px!important;
gap:12px!important;
}
html body .vehicle-catalog-steps li>span{
display:grid!important;
flex:0 0 28px!important;
width:28px!important;
height:28px!important;
min-width:28px!important;
}
html body .vehicle-catalog-steps li div{
flex:1 1 auto!important;
min-width:0!important;
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
justify-content:center!important;
}
html body .vehicle-catalog-steps li strong{
flex-direction:row!important;
flex-wrap:wrap!important;
align-items:baseline!important;
justify-content:flex-start!important;
width:100%!important;
text-align:left!important;
}
html body .vehicle-catalog-steps li div>small:empty,
html body .vehicle-catalog-steps li div>small[hidden]{
display:none!important;
}
}
/* Mega: Oto Yedek Parçalar arşiv kutusu */
/* category-pill: DB görsel veya #başharf */
body .reference-product-card .category-pill>i,
body .reference-product-card .category-pill [data-lucide]{
display:none!important;
}
/* category-pill media — görsel her zaman görünsün */
html body .reference-product-card .category-pill{
display:inline-flex!important;
align-items:center!important;
gap:8px!important;
}
/* Kart UI: kategori pill görseli/hash kaldır, marka logosu büyüt, aksiyon hover animasyonu kapat */
html body .reference-product-card .brand-logo-meta{
min-height:40px!important;
}
html body .reference-product-card .brand-logo-meta img,
html body .reference-product-card .brand-logo-meta svg{
display:block!important;
max-width:140px!important;
width:auto!important;
height:40px!important;
object-fit:contain!important;
}
html body .reference-product-card .card-actions > *,
html body .reference-product-card .card-actions > *:hover,
html body .reference-product-card .card-actions > *:focus,
html body .reference-product-card .card-actions > *:active,
html body .reference-product-card .card-actions .primary:hover,
html body .reference-product-card .card-actions .primary:active,
html body .reference-product-card .card-actions .primary:hover svg,
html body .reference-product-card .card-actions .primary:active svg{
transform:none!important;
transition:none!important;
filter:none!important;
}
html body .reference-product-card .card-actions > *:hover,
html body .reference-product-card .card-actions > *:focus,
html body .reference-product-card .card-actions > *:active{
box-shadow:none!important;
}
@media (max-width:900px){
html body .reference-product-card .brand-logo-meta img,
html body .reference-product-card .brand-logo-meta svg{
max-width:120px!important;
height:36px!important;
}
}
@media (max-width:700px){
html body .reference-product-card .brand-logo-meta img,
html body .reference-product-card .brand-logo-meta svg{
max-width:100px!important;
height:28px!important;
}
}
/* V102: mobil meta satırı — kategori, marka ve OEM dikey ortalı */
@media (max-width:767px){
html body .reference-product-card .product-info{
align-items:center!important;
}
html body .reference-product-card .category-pill,
html body .reference-product-card.compatible-card .category-pill{
align-self:center!important;
margin:0!important;
}
html body .reference-product-card .brand-logo-meta,
html body .reference-product-card .oem-hover-wrap,
html body .reference-product-card .oem-toggle{
align-self:center!important;
}
html body .reference-product-card .brand-logo-meta{
min-height:0!important;
}
html body .reference-product-card .brand-logo-meta img,
html body .reference-product-card .brand-logo-meta svg{
max-width:100px!important;
height:28px!important;
}
}
/* V103: masaüstü — OEM ile fiyat yapışmasın */
@media (min-width:768px){
html body .reference-product-card .product-meta-row,
html body .reference-product-card:not(.discounted) .product-meta-row{
display:grid!important;
grid-template-columns:auto auto minmax(0,1fr)!important;
column-gap:16px!important;
row-gap:0!important;
align-items:center!important;
}
html body .reference-product-card .oem-hover-wrap,
html body .reference-product-card:not(.discounted) .oem-hover-wrap{
grid-column:2!important;
justify-self:start!important;
margin:0 12px 0 0!important;
padding:0!important;
}
html body .reference-product-card .oem-toggle,
html body .reference-product-card .oem-toggle span{
margin:0!important;
}
html body .reference-product-card .product-meta-row > .meta-price,
html body .reference-product-card:not(.discounted) .meta-price,
html body .reference-product-card .meta-price{
grid-column:3!important;
justify-self:end!important;
margin:0 0 0 4px!important;
padding:0!important;
}
}
/* Ürün kartı marka logosu: width sabit, sadece height küçült */
html body .reference-product-card .brand-logo-meta{
min-height:24px!important;
}
html body .reference-product-card .brand-logo-meta img,
html body .reference-product-card .brand-logo-meta svg{
width:auto!important;
max-width:140px!important;
height:24px!important;
object-fit:contain!important;
object-position:left center!important;
}
@media (max-width:900px){
html body .reference-product-card .brand-logo-meta img,
html body .reference-product-card .brand-logo-meta svg{
max-width:120px!important;
height:22px!important;
}
}
@media (max-width:700px){
html body .reference-product-card .brand-logo-meta img,
html body .reference-product-card .brand-logo-meta svg{
max-width:100px!important;
height:20px!important;
}
}