/* =========================================================
   Özgün Jant — görsel dil
   Beyaz zemin, antrasit metin, sarı vurgu, büyük fotoğraflar.
   Yazı: Archivo (geniş kesim = lastik yanağındaki kabartma yazı).
   Değişken adları eski temadan kalmadır; renkleri buradan değiştirmek tüm siteyi ve paneli günceller.
   ========================================================= */
:root {
    /* Beyaz, temiz tema: antrasit metin, tek vurgu rengi (yol çizgisi sarısı).
       Değişken adları eski temadan kalmadır; renkleri buradan değiştirmek tüm siteyi ve paneli günceller. */
    --beton: #F3F4F5;      /* açık gri yüzeyler (alan zemini, bölüm arka planı) */
    --kaucuk: #16191D;     /* metin ve koyu yüzeyler: antrasit */
    --kaucuk-2: #2B3036;
    --yanak: #5E6670;      /* ikincil metin */
    --jant: #E3E6E9;       /* çizgiler */
    --jant-acik: #EEF0F2;
    --tabela: #16191D;     /* bağlantılar */
    --tabela-koyu: #000000;
    --amber: #FFC20E;      /* vurgu: ana buton, aktif menü, işaretler */
    --amber-koyu: #F0B000;
    --petrol: #16191D;     /* koyu bantlar (alt bilgi, bayi bandı) */
    --beyaz: #FFFFFF;

    --genis: 125;          /* Archivo genişlik ekseni */
    --yaricap: 12px;

    /* Panel (admin.css) bu adları kullanır */
    --oj-koyu: var(--kaucuk);
    --oj-koyu-2: var(--kaucuk-2);
    --oj-vurgu: var(--amber);
    --oj-zemin: var(--beton);
}

body {
    font-family: 'Archivo', system-ui, sans-serif;
    font-variation-settings: "wdth" 100;
    background: var(--beton);
    color: var(--kaucuk);
    font-size: 1rem;
    line-height: 1.55;
}
a { color: var(--tabela); }
a:hover { color: var(--tabela-koyu); }
h1, h2, h3, .h1, .h2, .h3, .h4 { font-variation-settings: "wdth" var(--genis); font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
h4, h5, h6, .h5, .h6 { font-weight: 700; }
:focus-visible { outline: 3px solid var(--tabela); outline-offset: 2px; }

.atla { position: absolute; left: -9999px; top: 0; background: var(--kaucuk); color: #fff; padding: .5rem 1rem; z-index: 2000; }
.atla:focus { left: 1rem; top: 1rem; }

/* Bootstrap ana butonu (sitede "btn-warning" ana eylem olarak kullanılıyor) → tabela mavisi */
.btn-warning {
    --bs-btn-bg: var(--amber); --bs-btn-border-color: var(--amber); --bs-btn-color: var(--petrol);
    --bs-btn-hover-bg: var(--amber-koyu); --bs-btn-hover-border-color: var(--amber-koyu); --bs-btn-hover-color: var(--petrol);
    --bs-btn-active-bg: var(--amber-koyu); --bs-btn-active-border-color: var(--amber-koyu); --bs-btn-active-color: var(--petrol);
    --bs-btn-disabled-bg: var(--amber); --bs-btn-disabled-border-color: var(--amber); --bs-btn-disabled-color: var(--petrol);
    font-weight: 700;
}
.btn-dark {
    --bs-btn-bg: var(--kaucuk); --bs-btn-border-color: var(--kaucuk);
    --bs-btn-hover-bg: var(--kaucuk-2); --bs-btn-hover-border-color: var(--kaucuk-2);
    --bs-btn-active-bg: var(--tabela-koyu); --bs-btn-active-border-color: var(--tabela-koyu);
}
.btn-outline-dark {
    --bs-btn-color: var(--kaucuk); --bs-btn-border-color: var(--kaucuk);
    --bs-btn-hover-bg: var(--kaucuk); --bs-btn-hover-border-color: var(--kaucuk);
    --bs-btn-active-bg: var(--kaucuk-2); --bs-btn-active-border-color: var(--kaucuk-2);
}
.btn-outline-light { --bs-btn-hover-color: var(--petrol); }
.btn-whatsapp { background: #25D366; border-color: #25D366; color: #0b3d1f; font-weight: 600; }
.btn-whatsapp:hover { background: #1fb457; border-color: #1fb457; color: #06260f; }
.card { border: 1px solid var(--jant); border-radius: var(--yaricap); box-shadow: none; }
.form-control, .form-select { border-color: var(--jant); }

/* ---------- Üst bant ve menü ---------- */
.ust-bant { background: var(--kaucuk); color: var(--jant); font-size: .85rem; padding: .4rem 0; }
.ust-bant a { color: #fff; text-decoration: none; }
.ust-bant a:hover { text-decoration: underline; }

.site-ust { background: var(--beton); border-bottom: 1px solid var(--jant); position: sticky; top: 0; z-index: 1020; }
.site-ust .navbar { padding: .7rem 0; }
.site-ust .nav-link { color: var(--kaucuk); font-weight: 600; padding: .5rem .8rem !important; border-radius: 6px; }
.site-ust .nav-link:hover { background: var(--jant-acik); color: var(--kaucuk); }
.site-ust .nav-link.aktif { box-shadow: inset 0 -3px 0 var(--amber); border-radius: 0; }
.sepet-adet { display: inline-block; min-width: 1.4rem; padding: 0 .35rem; border-radius: 1rem; background: var(--amber); color: var(--petrol); font-weight: 700; font-size: .75rem; text-align: center; }

.logo { display: inline-flex; align-items: center; gap: .5rem; color: var(--kaucuk); line-height: 1; }
.logo-isaret { width: 2.25rem; height: 2.45rem; flex: 0 0 auto; }
.logo-isaret .l-halka { stroke: currentColor; }
.logo-isaret .l-nokta { fill: var(--amber); }
.logo-yazi { display: inline-flex; align-items: baseline; gap: .3rem; font-variation-settings: "wdth" var(--genis); font-weight: 800; font-size: 1.4rem; letter-spacing: -.015em; }
.logo-yazi span { font-weight: 400; font-variation-settings: "wdth" 112; }
/* Panel üst menüsü ve alt bilgi koyu zeminde */
.marka { font-variation-settings: "wdth" var(--genis); font-weight: 800; font-size: 1.3rem; color: #fff; }
.marka span { color: inherit; }
.ana-menu { background: var(--kaucuk); }

.mesaj-alani:empty { display: none; }
.mesaj-alani .alert { margin-top: 1rem; }

/* ---------- Kampanya slider'ı ---------- */
.vitrin { position: relative; color: #fff; overflow: hidden; background: var(--petrol); }
.slayt { display: none; position: relative; min-height: 28rem; }
.slayt.aktif { display: block; }
/* Lastik sırtı deseni: sağ tarafta diyagonal diş blokları */
.slayt::after {
    content: ""; position: absolute; inset: 0 0 0 auto; width: 46%;
    background:
        repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 14px, transparent 14px 34px),
        repeating-linear-gradient(65deg, rgba(255,255,255,.05) 0 14px, transparent 14px 34px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%);
            mask-image: linear-gradient(90deg, transparent, #000 35%);
    pointer-events: none;
}
.slayt::after { display: none; }   /* eski diş deseni yerine tema çizimi */
.tema-genel, .tema-servis { background: var(--petrol); }
.tema-kis { background: #0E3842; }
.tema-yaz { background: #114640; }
.tema-bayi { background: var(--tabela-koyu); }
/* Tema çizimi: sağda, sola doğru zemine karışır */
.slayt-cizim {
    position: absolute; right: 0; bottom: 0; height: 100%; width: min(62%, 860px); object-fit: cover; object-position: right bottom;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 22%, #000 48%); mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 22%, #000 48%);
    pointer-events: none; user-select: none;
}
.slayt-metin .btn-light { --bs-btn-bg: var(--amber); --bs-btn-border-color: var(--amber); --bs-btn-color: var(--petrol); --bs-btn-hover-bg: var(--amber-koyu); --bs-btn-hover-border-color: var(--amber-koyu); --bs-btn-hover-color: var(--petrol); font-weight: 700; border-radius: 999px; padding-left: 1.6rem; padding-right: 1.6rem; }
.slayt-ic { position: relative; z-index: 2; display: flex; align-items: center; gap: 2rem; min-height: 28rem; padding-top: 3.5rem; padding-bottom: 9rem; }
.slayt-metin { max-width: 36rem; }
.slayt-metin h1, .slayt-metin h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); margin-bottom: 1rem; }
.slayt-metin p { font-size: 1.15rem; color: #D6E2DE; max-width: 32rem; margin-bottom: 1.6rem; }
.slayt-gorsel { margin-left: auto; max-width: 42%; max-height: 18rem; object-fit: contain; }
/* Kontroller sağ altta: soldaki metin ve butonla çakışmaz */
.slayt-kontrol { position: absolute; left: 0; right: 0; bottom: 5.25rem; z-index: 3; display: flex; align-items: center; justify-content: flex-start; gap: .75rem; }
.slayt-ok { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; }
.slayt-ok:hover { background: rgba(255,255,255,.12); }
.slayt-noktalar { display: flex; gap: .4rem; }
.slayt-nokta { width: 1.6rem; height: .35rem; border: 0; border-radius: 2px; background: rgba(255,255,255,.35); padding: 0; }
.slayt-nokta.aktif { background: var(--amber); width: 2.6rem; }
.slayt-sayac { color: var(--jant); font-size: .85rem; margin-left: .25rem; }

/* ---------- Ebat bulucu ---------- */
.yanak {
    position: relative; z-index: 3; margin-top: -3.25rem;
    display: flex; align-items: center; gap: 1.5rem;
    background: var(--beyaz); border: 1px solid var(--jant); border-radius: 16px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 10px 30px rgba(28, 31, 34, .12);
}
/* Soldaki lastik: seçilen ölçü yanağında yazar */
.yanak-lastik { flex: 0 0 auto; width: 7.25rem; height: 7.25rem; }
.yanak-lastik .l-dis { fill: #1D2524; }
.yanak-lastik .l-jant { fill: var(--jant); stroke: var(--beton); stroke-width: 3; }
.yanak-lastik .l-gobek { fill: var(--amber); }
.yanak-lastik .l-yazi { fill: #F3EFE6; font-family: inherit; font-variation-settings: "wdth" var(--genis); font-weight: 800; font-size: 13px; letter-spacing: .04em; }

.yanak-govde { flex: 1; min-width: 0; }
.yanak-baslik { font-size: 1.15rem; margin: 0 0 .65rem; }
.yanak-satir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1.25rem; }
.yanak-olcu { display: flex; align-items: flex-end; gap: .4rem; }
.olcu { display: flex; flex-direction: column; gap: .2rem; }
.olcu-ad { font-size: .78rem; font-weight: 600; color: var(--yanak); }
.olcu .form-select {
    min-width: 6.25rem; height: 2.9rem; padding-left: .85rem;
    font-variation-settings: "wdth" 112; font-weight: 700; font-size: 1.15rem;
    border-color: var(--jant); border-radius: 10px; background-color: var(--beton);
    cursor: pointer;
}
.olcu .form-select:hover { border-color: var(--yanak); }
.olcu .form-select:focus { border-color: var(--tabela); box-shadow: 0 0 0 .2rem rgba(15, 92, 85, .2); background-color: var(--beyaz); }
.olcu-ayrac { font-variation-settings: "wdth" var(--genis); font-weight: 800; font-size: 1.35rem; color: var(--yanak); padding-bottom: .45rem; }

.mevsim-secimi { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.mevsim-secimi legend { float: none; width: auto; margin: 0; padding: 0; }
.mevsim-butonlar { display: inline-flex; background: var(--beton); border: 1px solid var(--jant); border-radius: 10px; padding: 3px; }
.mevsim-butonlar .btn { border: 0; border-radius: 8px; height: calc(2.9rem - 8px); padding: 0 .8rem; display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; white-space: nowrap; color: var(--kaucuk); background: transparent; }
.mevsim-butonlar .btn:hover { background: var(--jant-acik); }
.mevsim-butonlar .btn-check:checked + .btn { background: var(--petrol); color: #fff; }
.mevsim-butonlar .btn-check:focus-visible + .btn { outline: 3px solid var(--tabela); outline-offset: 1px; }

.yanak-bul { height: 2.9rem; padding: 0 1.4rem; margin-left: auto; border-radius: 10px; }
.yanak-not { font-size: .82rem; color: var(--yanak); margin: .6rem 0 0; }

/* ---------- Bölümler ---------- */
.bolum { padding-top: 3.5rem; }
.bolum-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; border-bottom: 2px solid var(--kaucuk); padding-bottom: .6rem; }
.bolum-ust h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0; }
.sayfa-baslik { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: .5rem; }

/* Ürün kartı */
.urun-kart { background: var(--beyaz); border: 1px solid var(--jant); border-radius: var(--yaricap); overflow: hidden; }
.urun-kart:hover { border-color: var(--yanak); }
.urun-gorsel { display: block; position: relative; background: var(--beton); aspect-ratio: 1 / 1; padding: 1.25rem; }
.urun-gorsel img { width: 100%; height: 100%; object-fit: contain; }
.urun-ad { display: block; font-weight: 700; color: var(--kaucuk); text-decoration: none; line-height: 1.25; margin: .15rem 0; }
.urun-ad:hover { color: var(--tabela); }
.ebat { font-variation-settings: "wdth" var(--genis); font-weight: 700; color: var(--yanak); letter-spacing: .01em; }
.fiyat { font-weight: 800; font-size: 1.3rem; font-variation-settings: "wdth" 110; }
.mevsim-etiket { position: absolute; top: .6rem; left: .6rem; font-size: .72rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: #F3E3B5; color: #4A3A0E; }
.mevsim-1 { background: #CFE2F5; color: #0F3557; }
.mevsim-2 { background: #D6EBD9; color: #1E4D27; }
.detay-gorsel { max-height: 360px; }

/* Hizmetler: liste (kart değil) */
.hizmet-listesi { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; }
.hizmet-listesi li { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid var(--jant); }
.hizmet-listesi i { font-size: 1.6rem; color: var(--tabela); line-height: 1; margin-top: .15rem; }
.hizmet-listesi div { flex: 1; }
.hizmet-listesi strong { display: block; }
.hizmet-listesi span { color: var(--yanak); font-size: .92rem; }

/* Şubeler */
.subeler { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem; }
.sube-listesi { display: flex; flex-direction: column; gap: .75rem; }
.sube { background: var(--beyaz); border: 1px solid var(--jant); border-radius: var(--yaricap); padding: 1rem 1.1rem; }
.sube-baslik { all: unset; display: block; width: 100%; cursor: pointer; }
.sube-baslik:focus-visible { outline: 3px solid var(--tabela); outline-offset: 4px; border-radius: 4px; }
.sube-baslik[aria-pressed="true"] .sube-ad::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--tabela); margin-right: .45rem; vertical-align: middle; }
.sube-ad { display: block; font-variation-settings: "wdth" var(--genis); font-weight: 800; font-size: 1.15rem; }
.sube-adres { display: block; color: var(--yanak); font-size: .92rem; }
.sube-saat { font-size: .9rem; margin-top: .35rem; }
.sube-eylemler { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.sube-harita { min-height: 22rem; border-radius: var(--yaricap); overflow: hidden; border: 1px solid var(--jant); background: var(--jant-acik); }
.sube-harita iframe { width: 100%; height: 100%; min-height: 22rem; border: 0; display: block; }

/* Bayi bandı */
.bayi-bandi { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: space-between; align-items: center; background: var(--petrol); color: #fff; border-radius: 18px; padding: 2rem clamp(1.25rem, 3vw, 2.5rem); }
.bayi-bandi h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin-bottom: .35rem; }
.bayi-bandi p { color: var(--jant); margin: 0; }

/* Eski sayfalarla uyum */
.hero { background: var(--kaucuk); color: #fff; }
.b2b-kutu { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; background: var(--kaucuk); color: #fff; border-radius: 18px; padding: 2rem; }

/* ---------- Alt bilgi ---------- */
.alt-bilgi { background: var(--petrol); color: var(--jant); margin-top: 4rem; padding: 3rem 0 1.5rem; }
.alt-bilgi .logo { color: #fff; }
.alt-bilgi a { color: #fff; text-decoration: none; }
.alt-bilgi a:hover { text-decoration: underline; }
.alt-baslik { font-size: 1rem; font-variation-settings: "wdth" 100; font-weight: 700; color: #fff; margin-bottom: .9rem; letter-spacing: 0; }
.alt-subeler li { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-bottom: .6rem; }
.alt-subeler strong { color: #fff; min-width: 8rem; }
.alt-linkler li { margin-bottom: .4rem; }
.alt-cizgi { border-top: 1px solid var(--kaucuk-2); margin-top: 2rem; padding-top: 1rem; font-size: .85rem; }

/* Sabit WhatsApp butonu */
.whatsapp {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 1030;
    display: inline-flex; align-items: center; gap: .5rem;
    background: #25D366; color: #06260f; font-weight: 700; text-decoration: none;
    padding: .7rem 1.1rem .7rem .9rem; border-radius: 999px; box-shadow: 0 6px 18px rgba(28,31,34,.25);
}
.whatsapp i { font-size: 1.35rem; }
.whatsapp:hover { background: #1fb457; color: #06260f; }

/* ---------- Mobil ---------- */
@media (max-width: 991.98px) {
    .yanak-lastik { display: none; }
    .yanak-bul { margin-left: 0; }
    .subeler { grid-template-columns: 1fr; }
    .hizmet-listesi { grid-template-columns: 1fr; }
    .slayt::after { width: 70%; opacity: .6; }
}
@media (max-width: 767.98px) {
    /* Telefonda çizim metnin arkasında, alttan yükselir */
    .slayt-cizim { width: 100%; height: 62%; top: auto; opacity: .45; -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%); mask-image: linear-gradient(180deg, transparent, #000 45%); }
}
@media (max-width: 575.98px) {
    .slayt, .slayt-ic { min-height: 23rem; }
    .slayt-ic { padding-bottom: 9rem; }
    .slayt-kontrol { bottom: 5.5rem; }
    .slayt-gorsel { display: none; }
    .yanak { margin-top: -3rem; padding: 1rem; }
    .yanak-olcu { width: 100%; }
    .olcu { flex: 1; min-width: 0; }
    .olcu .form-select { min-width: 0; font-size: 1.05rem; padding-left: .6rem; }
    .mevsim-secimi, .mevsim-butonlar { width: 100%; }
    .mevsim-butonlar .btn { flex: 1; justify-content: center; padding: 0 .3rem; font-size: .9rem; }
    .yanak-bul { width: 100%; margin-left: 0; }
    .whatsapp span { display: none; }
    .whatsapp { padding: .8rem; }
}

/* =========================================================
   Kurumsal site: kategori/hizmet kartları, iç sayfalar, katalog
   ========================================================= */
.site-ust .dropdown-menu { border-color: var(--jant); border-radius: var(--yaricap); padding: .4rem; box-shadow: 0 10px 30px rgba(28,31,34,.12); }
.site-ust .dropdown-item { border-radius: 6px; padding: .45rem .75rem; font-weight: 500; }
.site-ust .dropdown-item i { width: 1.4rem; display: inline-block; color: var(--tabela); }
.site-ust .dropdown-item:active { background: var(--tabela); }

/* Sayfa yolu */
.kirinti ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; padding: 0; margin: 0 0 .75rem; font-size: .85rem; color: var(--yanak); }
.kirinti li + li::before { content: "›"; margin-right: .25rem; color: var(--jant); }
.kirinti a { color: var(--yanak); text-decoration: none; }
.kirinti a:hover { color: var(--tabela); text-decoration: underline; }
.kirinti-koyu ol, .kirinti-koyu a { color: var(--jant); }
.kirinti-koyu li + li::before { color: var(--yanak); }

/* İç sayfa üst bandı */
.sayfa-basi { background: var(--petrol); color: #fff; padding: 2rem 0 2.25rem; position: relative; overflow: hidden; }
.sayfa-basi::after {
    content: ""; position: absolute; inset: 0 0 0 auto; width: 40%;
    background: repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 14px, transparent 14px 34px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%); mask-image: linear-gradient(90deg, transparent, #000 50%);
}
.sayfa-basi .container { position: relative; z-index: 1; }
.sayfa-basi h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0 0 .5rem; }
.sayfa-basi p { color: #D6E2DE; max-width: 42rem; margin: 0; font-size: 1.05rem; }

/* Lastik kategorileri */
.kategori-kartlari { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.kategori-kart {
    display: flex; flex-direction: column; gap: .35rem; padding: 1.4rem 1.25rem; border-radius: 14px;
    background: var(--beyaz); border: 1px solid var(--jant); color: var(--kaucuk); text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.kategori-kart:hover { color: var(--kaucuk); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(28,31,34,.1); }
.kategori-kart > i { font-size: 2rem; line-height: 1; margin-bottom: .35rem; }
.kategori-kart h3 { font-size: 1.25rem; margin: 0; }
.kategori-kart p { color: var(--yanak); font-size: .92rem; margin: 0; flex: 1; }
.kategori-kart span { font-weight: 700; color: var(--tabela); font-size: .9rem; margin-top: .4rem; }
.kategori-kart.mevsim-0 > i { color: #C98A10; }
.kategori-kart.mevsim-1 > i { color: #1F6FB2; }
.kategori-kart.mevsim-2 > i { color: #2E7D44; }
.kategori-kart.jant > i { color: var(--kaucuk); }

/* Hizmet kartları */
.hizmet-kartlari { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hizmet-kart {
    display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
    background: var(--beyaz); border: 1px solid var(--jant); color: var(--kaucuk); text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.hizmet-kart:hover { color: var(--kaucuk); border-color: var(--tabela); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,61,58,.12); }
.hizmet-kart-gorsel { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--jant-acik); }
.hizmet-kart-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hizmet-kart-gorsel i {
    position: absolute; left: 1rem; bottom: -1.1rem; width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
    background: var(--amber); color: var(--petrol); border-radius: 10px; font-size: 1.25rem; box-shadow: 0 4px 12px rgba(15,61,58,.25);
}
.hizmet-kart-govde { display: flex; flex-direction: column; gap: .35rem; flex: 1; padding: 1.6rem 1.25rem 1.25rem; }
.hizmet-kart h2, .hizmet-kart h3 { font-size: 1.15rem; margin: 0; }
.hizmet-kart-ozet { color: var(--yanak); font-size: .93rem; flex: 1; }
.hizmet-kart-link { color: var(--tabela); font-weight: 700; font-size: .9rem; }

/* Hakkımızda özeti ve değerler */
.hakkimizda-ozet { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; background: var(--beyaz); border: 1px solid var(--jant); border-radius: 16px; padding: clamp(1.25rem, 3vw, 2.25rem); }
.hakkimizda-ozet h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.hakkimizda-ozet p { color: var(--yanak); }
.deger-listesi { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.deger-listesi li { display: flex; gap: .75rem; align-items: flex-start; }
.deger-listesi i { font-size: 1.35rem; color: var(--tabela); line-height: 1.2; }
.deger-listesi strong { display: block; }
.deger-listesi span { color: var(--yanak); font-size: .9rem; }

.hakkimizda-gorsel, .sayfa-gorsel { width: 100%; height: auto; border-radius: 12px; display: block; border: 1px solid var(--jant); }
.sayfa-gorsel { aspect-ratio: 16 / 10; object-fit: cover; }

/* Marka şeridi */
.marka-seridi { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.marka-seridi a {
    display: inline-flex; align-items: baseline; gap: .5rem; padding: .7rem 1.1rem; border-radius: 10px;
    background: var(--beyaz); border: 1px solid var(--jant); color: var(--kaucuk); text-decoration: none;
    font-variation-settings: "wdth" var(--genis); font-weight: 800; font-size: 1.1rem; letter-spacing: .01em;
}
.marka-seridi a:hover { border-color: var(--kaucuk); }
.marka-seridi span { font-variation-settings: "wdth" 100; font-weight: 500; font-size: .78rem; color: var(--yanak); }

/* Soru-cevap (details/summary) */
.soru-listesi { display: flex; flex-direction: column; gap: .5rem; }
.soru { background: var(--beyaz); border: 1px solid var(--jant); border-radius: var(--yaricap); }
.soru summary { list-style: none; cursor: pointer; padding: 1rem 3rem 1rem 1.1rem; font-weight: 700; position: relative; }
.soru summary::-webkit-details-marker { display: none; }
.soru summary::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 400; color: var(--tabela); }
.soru[open] summary::after { content: "–"; }
.soru[open] summary { border-bottom: 1px solid var(--jant-acik); }
.soru p { padding: .9rem 1.1rem 1.1rem; margin: 0; color: #2D4744; }
.sss-grup + .sss-grup { margin-top: 2rem; }
.sss-grup h2 { font-size: 1.35rem; margin-bottom: .9rem; }

/* Hizmet detay */
.hizmet-metin { font-size: 1.05rem; }
.hizmet-metin p { color: #24423F; }
.hizmet-metin h2 { font-size: 1.4rem; margin: 2rem 0 .9rem; }
.tik-listesi { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.tik-listesi li { position: relative; padding-left: 1.9rem; }
.tik-listesi li::before { content: "✓"; position: absolute; left: 0; top: .1rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #E3F1E6; color: #2E7D44; font-weight: 800; font-size: .8rem; display: grid; place-items: center; }
.iletisim-kutu { background: var(--beyaz); border: 1px solid var(--jant); border-radius: 14px; padding: 1.25rem; position: sticky; top: 6rem; }
.iletisim-kutu h2 { font-size: 1.2rem; }
.iletisim-kutu p { color: var(--yanak); font-size: .92rem; }
.iletisim-tel { display: flex; gap: .6rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--jant-acik); color: var(--kaucuk); text-decoration: none; font-size: .92rem; }
.iletisim-tel i { color: var(--tabela); }
.iletisim-tel:hover { color: var(--tabela); }
.diger-hizmetler { margin-top: 1.25rem; }
.diger-hizmetler h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: var(--yanak); font-variation-settings: "wdth" 100; }
.diger-hizmetler ul { list-style: none; padding: 0; margin: 0; }
.diger-hizmetler a { display: flex; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--jant); color: var(--kaucuk); text-decoration: none; font-weight: 600; }
.diger-hizmetler a:hover { color: var(--tabela); }
.diger-hizmetler i { color: var(--tabela); }
.cta-bant { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: space-between; align-items: center; background: var(--petrol); color: #fff; border-radius: 18px; padding: 2rem clamp(1.25rem, 3vw, 2.5rem); }
.cta-bant h2 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); margin-bottom: .35rem; }
.cta-bant p { margin: 0; color: #CFE2DE; }

/* İletişim hızlı kartlar */
.iletisim-hizli { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.iletisim-hizli-kart { display: flex; flex-direction: column; gap: .15rem; padding: 1.25rem; border-radius: 14px; background: var(--beyaz); border: 1px solid var(--jant); color: var(--kaucuk); text-decoration: none; }
.iletisim-hizli-kart i { font-size: 1.6rem; color: var(--tabela); }
.iletisim-hizli-kart span { color: var(--yanak); font-size: .85rem; }
.iletisim-hizli-kart strong { font-size: 1.1rem; }
.iletisim-hizli-kart.wa i { color: #1fb457; }
.iletisim-hizli-kart:hover { border-color: var(--kaucuk); color: var(--kaucuk); }

/* Katalog */
.katalog-ust { margin-bottom: 1rem; }
.katalog-ust .sayfa-baslik { margin-bottom: .2rem; }
.mevsim-sekmeleri { display: flex; gap: .5rem; margin-bottom: 1.5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.mevsim-sekmeleri::-webkit-scrollbar { display: none; }
.sekme {
    display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; padding: .6rem 1rem; border-radius: 10px;
    background: var(--beyaz); border: 1px solid var(--jant); color: var(--kaucuk); text-decoration: none; font-weight: 700;
}
.sekme span { font-weight: 600; font-size: .78rem; background: var(--beton); color: var(--yanak); border-radius: 999px; padding: 0 .5rem; }
.sekme:hover { border-color: var(--kaucuk); color: var(--kaucuk); }
.sekme.aktif { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.sekme.aktif span { background: var(--kaucuk-2); color: var(--jant); }
.sekme.mevsim-0 i { color: #C98A10; } .sekme.mevsim-1 i { color: #1F6FB2; } .sekme.mevsim-2 i { color: #2E7D44; }
.sekme.aktif i { color: #fff; }
.filtre-kutu { background: var(--beyaz); border: 1px solid var(--jant); border-radius: var(--yaricap); padding: 1rem; margin-bottom: 1rem; }
.filtre-baslik { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--yanak); font-variation-settings: "wdth" 100; font-weight: 700; margin-bottom: .6rem; }
.filtre-ebat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.filtre-ebat label span { display: block; font-size: .72rem; color: var(--yanak); font-weight: 600; margin-bottom: .1rem; }
.filtre-ebat .form-select { padding-left: .5rem; padding-right: 1.5rem; background-position: right .3rem center; font-weight: 700; }
.filtre-not { font-size: .78rem; color: var(--yanak); margin: .5rem 0 0; }
.marka-listesi { list-style: none; padding: 0; margin: 0; max-height: 22rem; overflow-y: auto; }
.marka-listesi a { display: flex; justify-content: space-between; padding: .4rem .5rem; border-radius: 6px; color: var(--kaucuk); text-decoration: none; font-weight: 600; }
.marka-listesi a span { color: var(--yanak); font-weight: 500; font-size: .85rem; }
.marka-listesi a:hover { background: var(--beton); }
.marka-listesi a.aktif { background: var(--kaucuk); color: #fff; }
.marka-listesi a.aktif span { color: var(--jant); }
.bos-sonuc { text-align: center; padding: 3rem 1rem; background: var(--beyaz); border: 1px dashed var(--jant); border-radius: 14px; margin-bottom: 1rem; }
.bos-sonuc i { font-size: 2rem; color: var(--yanak); }
.bos-sonuc p { max-width: 28rem; margin: .75rem auto 1rem; color: var(--yanak); }
.kategori-metin { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--jant); color: #2D4744; }
.kategori-metin h2 { font-size: 1.3rem; }

/* Ürün kartı (yeni yapı) */
.urun-kart { display: flex; flex-direction: column; }
.urun-kart .urun-gorsel { aspect-ratio: 4 / 3; padding: 1rem; }
.urun-kart .fiyat { white-space: nowrap; }
.urun-govde { display: flex; flex-direction: column; flex: 1; padding: .85rem .9rem 1rem; }
.urun-marka { font-variation-settings: "wdth" var(--genis); font-weight: 800; font-size: .85rem; letter-spacing: .02em; color: var(--yanak); }
.urun-baslik { font-size: 1rem; font-variation-settings: "wdth" 100; font-weight: 700; letter-spacing: 0; line-height: 1.25; margin: .1rem 0 .2rem; }
.urun-alt { margin-top: auto; padding-top: .6rem; }
.fiyat-not { font-size: .75rem; font-weight: 500; color: var(--yanak); font-variation-settings: "wdth" 100; }
.stok-durum { font-size: .8rem; font-weight: 600; }
.stok-durum.var { color: #2E7D44; }
.stok-durum.yok { color: #9A5B00; }
.urun-eylem { display: flex; gap: .35rem; margin-top: .6rem; }
.urun-eylem .btn { flex: 1; padding-left: .35rem; padding-right: .35rem; white-space: nowrap; }

/* Ürün detay */
.detay-gorsel-kutu { position: relative; background: var(--beyaz); border: 1px solid var(--jant); border-radius: 14px; padding: 2rem; text-align: center; }
.detay-baslik { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: .2rem 0 .75rem; }
.detay-baslik .ebat { display: block; font-size: 1.1rem; margin-top: .35rem; }
.detay-fiyat { padding: 1rem 0; border-top: 1px solid var(--jant); border-bottom: 1px solid var(--jant); margin-bottom: 1rem; }
.detay-eylem { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.detay-hizmet { display: flex; gap: .9rem; padding: 1rem; background: var(--beyaz); border: 1px solid var(--jant); border-radius: var(--yaricap); margin-top: 1rem; }
.detay-hizmet i { font-size: 1.5rem; color: var(--tabela); }
.detay-hizmet strong { display: block; }
.detay-hizmet span { color: var(--yanak); font-size: .92rem; }

/* Alt bilgi şube listesi (yatay) */
.alt-bilgi .alt-subeler { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--kaucuk-2); font-size: .88rem; }
.alt-bilgi .alt-subeler li { margin: 0; }
.alt-bilgi .alt-subeler strong { min-width: 0; }

@media (max-width: 991.98px) {
    .kategori-kartlari { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hizmet-kartlari { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hakkimizda-ozet { grid-template-columns: 1fr; }
    .iletisim-kutu { position: static; }
    .site-ust .dropdown-menu { border: 0; box-shadow: none; padding-left: .5rem; background: transparent; }
}
@media (max-width: 575.98px) {
    .hizmet-kartlari, .deger-listesi, .iletisim-hizli { grid-template-columns: 1fr; }
    /* Telefonda hizmet kartı yatay: solda görsel, sağda metin */
    .hizmet-kart { flex-direction: row; }
    .hizmet-kart-gorsel { flex: 0 0 38%; aspect-ratio: auto; }
    .hizmet-kart-gorsel i { display: none; }
    .hizmet-kart-govde { padding: .85rem 1rem; gap: .2rem; }
    .hizmet-kart h2, .hizmet-kart h3 { font-size: 1.02rem; }
    .hizmet-kart-ozet { font-size: .84rem; line-height: 1.4; }
    .hakkimizda-gorsel { display: none; }
    .kategori-kart p { display: none; }
    .kategori-kart h3 { font-size: 1.05rem; }
    .kategori-kart { padding: 1.1rem; }
    .kategori-kart > i { font-size: 1.6rem; }
    .sayfa-basi { padding: 1.5rem 0 1.75rem; }
    .urun-eylem .btn:last-child { display: none; }
    .urun-kart .fiyat { font-size: 1.15rem; }
    .urun-kart .fiyat-not { display: none; }
}


/* =========================================================
   Araca göre arama, katalog filtreleri, AB lastik etiketi, avantajlar
   ========================================================= */
.yanak-ust { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin-bottom: .65rem; }
.yanak-ust .yanak-baslik { margin: 0; }
.arama-sekme { display: inline-flex; background: var(--beton); border: 1px solid var(--jant); border-radius: 999px; padding: 3px; }
.arama-sekme [role="tab"] { border: 0; background: transparent; color: var(--kaucuk); font-weight: 600; font-size: .9rem; padding: .35rem .9rem; border-radius: 999px; display: inline-flex; gap: .35rem; align-items: center; }
.arama-sekme [role="tab"][aria-selected="true"] { background: var(--petrol); color: #fff; }
.arama-sekme [role="tab"]:focus-visible { outline: 3px solid var(--amber); outline-offset: 1px; }
.arac-secim .olcu .form-select { min-width: 8.5rem; font-size: 1rem; font-variation-settings: "wdth" 100; }
.arac-sonuc { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; flex: 1; min-width: 14rem; }
.arac-ipucu { width: 100%; font-size: .85rem; color: var(--yanak); }
.arac-ebat {
    display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .9rem; border-radius: 10px;
    background: var(--amber); color: var(--petrol); text-decoration: none; font-weight: 800; font-variation-settings: "wdth" 112;
}
.arac-ebat:hover { background: var(--amber-koyu); color: var(--petrol); }

/* Avantajlar */
.avantaj-seridi { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.avantaj-seridi li { display: flex; gap: .7rem; align-items: flex-start; }
.avantaj-seridi i { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--petrol); color: var(--amber); font-size: 1.1rem; }
.avantaj-seridi strong { display: block; font-size: .95rem; }
.avantaj-seridi span { color: var(--yanak); font-size: .85rem; line-height: 1.35; }
.avantaj-liste { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .45rem; font-size: .9rem; }
.avantaj-liste li { display: flex; gap: .55rem; align-items: baseline; color: var(--yanak); }
.avantaj-liste i { color: var(--tabela); }
.avantaj-liste strong { color: var(--kaucuk); }

/* Katalog araç çubuğu, çipler */
.katalog-arac-cubugu { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .9rem; }
.siralama .form-select { min-width: 14rem; }
.stok-anahtar { display: inline-flex; align-items: center; gap: .55rem; color: var(--kaucuk); text-decoration: none; font-weight: 600; font-size: .92rem; }
.stok-anahtar .anahtar { width: 2.4rem; height: 1.35rem; border-radius: 999px; background: var(--jant); position: relative; transition: background .15s; }
.stok-anahtar .anahtar::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.35rem - 6px); height: calc(1.35rem - 6px); border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.stok-anahtar.acik .anahtar { background: var(--tabela); }
.stok-anahtar.acik .anahtar::after { transform: translateX(1.05rem); }
.stok-anahtar:hover { color: var(--tabela); }
.cip-listesi { display: flex; flex-wrap: wrap; gap: .35rem; }
.cip { display: inline-flex; align-items: baseline; gap: .3rem; padding: .3rem .6rem; border-radius: 8px; border: 1px solid var(--jant); background: var(--beyaz); color: var(--kaucuk); text-decoration: none; font-weight: 700; font-size: .88rem; }
.cip small { font-weight: 500; color: var(--yanak); font-size: .72rem; }
.cip:hover { border-color: var(--kaucuk); color: var(--kaucuk); }
.cip.aktif { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.cip.aktif small { color: var(--jant); }
.secili-filtreler { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }

/* Kartta mini etiket */
.etiket-mini { list-style: none; padding: 0; margin: .35rem 0 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.etiket-mini li { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; font-weight: 700; padding: .1rem .4rem; border-radius: 5px; background: var(--beton); color: var(--kaucuk); }
.etiket-mini i { font-size: .75rem; color: var(--yanak); }
/* AB etiket renk ölçeği (A koyu yeşil → E kırmızı) */
.s-A { --s: #1A9641; } .s-B { --s: #73B843; } .s-C { --s: #E5C11F; } .s-D { --s: #F08A24; } .s-E { --s: #D7262C; }
.etiket-mini li[class^="s-"] { box-shadow: inset 3px 0 0 var(--s); }

/* Ürün sayfasında AB lastik etiketi */
.ab-etiket { max-width: 26rem; border: 2px solid var(--kaucuk); border-radius: 12px; overflow: hidden; background: #fff; }
.ab-etiket-ust { display: flex; gap: .75rem; align-items: center; padding: .6rem .85rem; background: #003399; color: #fff; font-weight: 700; line-height: 1.2; }
.ab-etiket-ust small { font-weight: 500; opacity: .85; }
.ab-bayrak { color: #FFCC00; font-size: 1.4rem; }
.ab-etiket-govde { padding: .85rem; display: grid; gap: .75rem; }
.ab-olcek { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: .5rem; }
.ab-ikon { font-weight: 700; font-size: .88rem; }
.ab-olcek ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.ab-olcek li { text-align: center; font-weight: 800; font-size: .85rem; color: #fff; background: var(--s); padding: .2rem 0; border-radius: 3px; opacity: .3; }
.ab-olcek li.secili { opacity: 1; transform: scale(1.12); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.ab-alt { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding-top: .6rem; border-top: 1px solid var(--jant-acik); font-size: .9rem; }
.ab-gurultu em { font-style: normal; color: var(--yanak); margin-left: .2rem; }
.ab-simge { font-weight: 600; color: #1F6FB2; }
.ab-eprel { display: block; padding: .55rem .85rem; background: var(--beton); font-size: .85rem; font-weight: 600; text-decoration: none; border-top: 1px solid var(--jant-acik); }

@media (max-width: 991.98px) {
    .avantaj-seridi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .yanak-ust { flex-direction: column; align-items: stretch; }
    .arama-sekme { width: 100%; }
    .arama-sekme [role="tab"] { flex: 1; justify-content: center; }
    .arac-secim { flex-wrap: wrap; }
    .arac-secim .olcu { flex: 1 1 45%; }
    .arac-secim .olcu .form-select { min-width: 0; }
    .avantaj-seridi { grid-template-columns: 1fr; gap: .75rem; }
    .siralama, .siralama .form-select { width: 100%; min-width: 0; }
}


/* =========================================================
   BEYAZ TEMA KATMANI — fotoğraflı vitrin, sade kartlar, bol boşluk
   (yukarıdaki kuralların üzerine yazar)
   ========================================================= */
body.site { background: #fff; }
a { color: var(--kaucuk); text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: #000; }
:focus-visible { outline-color: var(--amber); }

/* Üst bant ve menü */
.ust-bant { background: var(--beton); color: var(--yanak); border-bottom: 1px solid var(--jant); }
.ust-bant a { color: var(--kaucuk); }
.site-ust { background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--jant); }
.site-ust .nav-link:hover { background: var(--beton); }
.site-ust .nav-link.aktif { box-shadow: inset 0 -3px 0 var(--amber); }
.site-ust .btn-warning { border-radius: 999px; }
.logo { color: var(--kaucuk); }

/* Vitrin: tam genişlik fotoğraf, solda koyu geçiş */
.vitrin { background: var(--kaucuk); }
.slayt, .tema-genel, .tema-servis, .tema-kis, .tema-yaz, .tema-bayi { background: var(--kaucuk); }
.slayt-cizim { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; -webkit-mask-image: none; mask-image: none; }
.slayt::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(14,16,19,.88) 0%, rgba(14,16,19,.62) 42%, rgba(14,16,19,.08) 75%),
                linear-gradient(0deg, rgba(14,16,19,.55), transparent 45%);
}
.slayt, .slayt-ic { min-height: 32rem; }
.slayt-ic { padding-top: 4rem; padding-bottom: 10rem; }
.slayt-metin h1, .slayt-metin h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.slayt-metin p { color: #E6E8EA; }
.slayt-metin .btn-light { border-radius: 999px; }
.slayt-ok { border-color: rgba(255,255,255,.55); }
.slayt-nokta.aktif { background: var(--amber); }

/* Ölçü bulucu: beyaz kart, gri alanlar */
.yanak { background: #fff; border-color: var(--jant); box-shadow: 0 24px 48px rgba(22,25,29,.12); }
.olcu .form-select { background-color: var(--beton); border-color: var(--beton); }
.olcu .form-select:focus { background-color: #fff; border-color: var(--kaucuk); box-shadow: 0 0 0 .2rem rgba(255,194,14,.45); }
.yanak-lastik .l-dis { fill: var(--kaucuk); }
.yanak-lastik .l-jant { fill: #D9DCE0; stroke: #fff; }
.yanak-lastik .l-gobek { fill: var(--amber); }
.yanak-lastik .l-yazi { fill: #fff; }
.mevsim-butonlar { background: var(--beton); border-color: var(--beton); }
.mevsim-butonlar .btn-check:checked + .btn { background: var(--kaucuk); color: #fff; }
.arama-sekme { background: var(--beton); border-color: var(--beton); }
.arama-sekme [role="tab"][aria-selected="true"] { background: var(--kaucuk); }

/* Avantajlar: ince, ikonlu satır */
.avantaj-seridi { margin-top: 2.25rem; padding-bottom: .5rem; }
.avantaj-seridi i { background: transparent; color: var(--kaucuk); border: 2px solid var(--amber); }

/* Bölüm başlıkları: alt çizgi yok, büyük ve sade */
.bolum { padding-top: 4.5rem; }
.bolum-ust { border-bottom: 0; padding-bottom: 0; margin-bottom: 1.5rem; }
.bolum-ust h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.bolum-ust a { font-weight: 600; }

/* Kategori kartları: fotoğraf + alttan koyu geçiş */
.kategori-kartlari { gap: 1rem; }
.kategori-kart {
    position: relative; overflow: hidden; padding: 0; border: 0; border-radius: 16px; min-height: 17rem;
    background: var(--kaucuk); color: #fff; display: block;
}
.kategori-kart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.kategori-kart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,16,19,.9) 0%, rgba(14,16,19,.35) 55%, rgba(14,16,19,.05) 100%); }
.kategori-kart:hover { color: #fff; transform: none; box-shadow: none; }
.kategori-kart:hover img { transform: scale(1.05); }
.kategori-kart-metin { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.25rem; display: flex; flex-direction: column; gap: .2rem; }
.kategori-kart-metin h3 { font-size: 1.3rem; margin: 0; color: #fff; }
.kategori-kart-metin h3 i { color: var(--amber); font-size: 1.1rem; margin-right: .2rem; }
.kategori-kart-metin p { margin: 0; color: #D9DCE0; font-size: .9rem; }
.kategori-kart-metin small { margin-top: .35rem; font-weight: 700; color: var(--amber); font-size: .88rem; }
.marka-satiri { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--jant); }
.marka-satiri span { font-size: .85rem; color: var(--yanak); }
.marka-satiri a { font-variation-settings: "wdth" var(--genis); font-weight: 800; font-size: 1.15rem; color: var(--kaucuk); text-decoration: none; }
.marka-satiri a:hover { text-decoration: underline; text-decoration-color: var(--amber); }

/* Hizmet kartları: fotoğraf üstte, çerçevesiz */
.hizmet-kart { border: 0; border-radius: 16px; background: transparent; }
.hizmet-kart:hover { border-color: transparent; box-shadow: none; transform: none; }
.hizmet-kart-gorsel { border-radius: 14px; overflow: hidden; background: var(--beton); }
.hizmet-kart-gorsel img { transition: transform .4s ease; }
.hizmet-kart:hover .hizmet-kart-gorsel img { transform: scale(1.04); }
.hizmet-kart-gorsel i { display: none; }
.hizmet-kart-govde { padding: .9rem .15rem 0; }
.hizmet-kart h2, .hizmet-kart h3 { font-size: 1.2rem; }
.hizmet-kart-link { color: var(--kaucuk); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Hakkımızda: fotoğraf ve metin yan yana, kutusuz */
.hakkimizda-ozet { background: var(--beton); border: 0; border-radius: 20px; padding: clamp(1rem, 2.5vw, 1.75rem); }
.hakkimizda-gorsel { border: 0; border-radius: 14px; aspect-ratio: 4 / 3; object-fit: cover; }
.hakkimizda-ozet h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }

/* Ürün kartları: beyaz, ince çizgi */
.urun-kart { border-color: var(--jant); border-radius: 14px; }
.urun-kart:hover { border-color: var(--kaucuk); }
.urun-kart .urun-gorsel { background: var(--beton); }

/* SSS, şubeler, iç sayfalar */
.soru { border-color: var(--jant); }
.soru summary::after { color: var(--kaucuk); }
.sube { border-color: var(--jant); }
.sube-baslik[aria-pressed="true"] .sube-ad::before { background: var(--amber); }
.sayfa-basi { background: var(--beton); color: var(--kaucuk); border-bottom: 1px solid var(--jant); }
.sayfa-basi::after { display: none; }
.sayfa-basi p { color: var(--yanak); }
.kirinti-koyu ol, .kirinti-koyu a { color: var(--yanak); }
.iletisim-kutu { border-color: var(--jant); }
.diger-hizmetler i, .iletisim-tel i, .detay-hizmet i, .deger-listesi i { color: var(--kaucuk); }
.tik-listesi li::before { background: var(--amber); color: var(--kaucuk); }
.sekme.aktif, .marka-listesi a.aktif, .cip.aktif { background: var(--kaucuk); border-color: var(--kaucuk); }
.stok-anahtar.acik .anahtar { background: var(--kaucuk); }
.arac-ebat { border-radius: 999px; }

/* Koyu bantlar */
.bayi-bandi, .cta-bant { background: var(--kaucuk); }
.alt-bilgi { background: var(--kaucuk); }

@media (max-width: 767.98px) {
    .slayt::before { background: linear-gradient(0deg, rgba(14,16,19,.92) 20%, rgba(14,16,19,.45) 100%); }
    .slayt-cizim { height: 100%; opacity: 1; -webkit-mask-image: none; mask-image: none; }
    .slayt, .slayt-ic { min-height: 27rem; }
    .kategori-kart { min-height: 12rem; }
    .bolum { padding-top: 3rem; }
}
@media (max-width: 575.98px) {
    .kategori-kartlari { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .kategori-kart { min-height: 10.5rem; border-radius: 12px; }
    .kategori-kart-metin { padding: .8rem; }
    .kategori-kart-metin h3 { font-size: 1rem; }
    .kategori-kart-metin small { font-size: .78rem; }
    .kategori-metin h3 i { display: none; }
}

.bolum-ust a { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; }
}

/* =========================================================
   Responsive yardımcılar (site + panel)
   ========================================================= */
/* Yatay kaydırılabilen sekmeler: telefonda alt satıra kırılmaz */
.nav-kaydir { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nav-kaydir::-webkit-scrollbar { display: none; }
.nav-kaydir .nav-link { white-space: nowrap; }
.pagination { flex-wrap: wrap; }

/* Mobil sepet simgesi (menü kapalıyken de görünür) */
.mobil-sepet { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 8px; color: var(--kaucuk); font-size: 1.35rem; text-decoration: none; }
.mobil-sepet:hover { background: var(--jant-acik); color: var(--kaucuk); }
.mobil-sepet .sepet-adet { position: absolute; top: .1rem; right: -.1rem; font-size: .68rem; }

/* Tablo → kart (telefon). Hücre başlıkları site.js ile data-etiket'e yazılır. */
@media (max-width: 767.98px) {
    .tablo-kart thead { display: none; }
    .tablo-kart, .tablo-kart tbody, .tablo-kart tfoot, .tablo-kart tr { display: block; width: 100%; }
    .tablo-kart tbody tr {
        position: relative; background: var(--beyaz); border: 1px solid var(--jant); border-radius: var(--yaricap);
        margin-bottom: .6rem; padding: .55rem .85rem; overflow: hidden;
    }
    .tablo-kart > :not(caption) > * > * { border-bottom-width: 0; }
    .tablo-kart tbody td, .tablo-kart tbody th {
        display: block; width: 100%; padding: .32rem 0; text-align: right !important; white-space: normal !important;
    }
    .tablo-kart tbody td::before {
        content: attr(data-etiket); float: left; margin-right: 1rem; max-width: 45%; text-align: left;
        font-size: .78rem; font-weight: 600; color: var(--yanak); line-height: 1.9;
    }
    .tablo-kart tbody td::after { content: ""; display: table; clear: both; }
    .tablo-kart tbody td[data-etiket=""]::before, .tablo-kart tbody td:not([data-etiket])::before { content: none; }
    .tablo-kart tbody td:empty { display: none; }
    /* İlk hücre kartın başlığı */
    .tablo-kart tbody td:first-child {
        text-align: left !important; font-size: 1rem; padding-bottom: .5rem; margin-bottom: .2rem;
        border-bottom: 1px solid var(--jant-acik);
    }
    .tablo-kart tbody td:first-child::before { content: none; }
    .tablo-kart tbody td:only-child { border-bottom: 0; margin: 0; padding: .2rem 0; }
    /* Hücre içindeki form elemanları etiketin yanında sağa yaslı */
    .tablo-kart tbody td .form-control, .tablo-kart tbody td .form-select { display: inline-block; width: 58%; }
    .tablo-kart tbody td:first-child .form-control, .tablo-kart tbody td:first-child .form-select { width: 100%; }
    .tablo-kart tbody td .d-flex { justify-content: flex-end; flex-wrap: wrap; }
    .tablo-kart tbody td .d-flex .form-control, .tablo-kart tbody td .d-flex .form-select { width: auto; flex: 0 1 12rem; }
    .tablo-kart tbody td .input-group { display: inline-flex; vertical-align: middle; }
    .tablo-kart tbody td .d-flex .input-group .form-control, .tablo-kart tbody td .input-group .form-control { width: 1%; flex: 1 1 auto; }
    /* Uyarı satırları: sol kenar şeridi */
    .tablo-kart tbody tr.table-danger, .tablo-kart tbody tr.table-warning { padding-left: 1.1rem; }
    .tablo-kart tbody tr.table-danger { background: #fdecee; border-color: #dc3545; box-shadow: inset 5px 0 0 #dc3545; }
    .tablo-kart tbody tr.table-warning { background: #fff6dc; border-color: #e0b100; box-shadow: inset 5px 0 0 #e0b100; }
    .tablo-kart tbody tr.table-danger > *, .tablo-kart tbody tr.table-warning > * { --bs-table-bg-state: transparent; background: transparent; }
    .tablo-kart tbody td.hucre-kritik { padding: .32rem .6rem; border-radius: 6px; }
    /* Alt toplam satırları */
    .tablo-kart tfoot tr { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem .85rem; }
    .tablo-kart tfoot td, .tablo-kart tfoot th { display: block; padding: 0; border: 0; background: transparent; box-shadow: none; }
    .tablo-kart tbody td .d-flex input[type=number] { flex: 0 1 6rem; }
    /* Kartlar zaten çerçeveli: dıştaki .card ve kaydırma kutusu sadeleşir */
    .card:has(> .table-responsive > .tablo-kart), .card:has(> .tablo-kart) { background: transparent; border: 0; }
    .card:has(> .table-responsive > .tablo-kart) > .card-header,
    .card:has(> .table-responsive > .tablo-kart) > .card-footer { border: 1px solid var(--jant); border-radius: var(--yaricap); margin-bottom: .6rem; }
    .card:has(> .table-responsive > .tablo-kart) > .card-footer { margin: 0; }
    .card-body .tablo-kart tbody tr { background: var(--beton); }
    .tablo-kart.mb-0 { margin-bottom: 0 !important; }
    .table-responsive:has(> .tablo-kart) { overflow: visible; }

    /* Başlık + buton satırları */
    .sayfa-eylemler { width: 100%; }
    .sayfa-eylemler .btn { flex: 1 1 auto; }
}
@media (max-width: 575.98px) {
    .ust-bant .ust-saat { display: none; }
    .ust-bant { font-size: .8rem; }
    .logo-yazi { font-size: 1.15rem; }
    .logo-isaret { width: 1.8rem; height: 1.8rem; }
}
/* Site: menü açıkken (telefon) düzen */
@media (max-width: 991.98px) {
    .site-ust .navbar-collapse { padding: .5rem 0 .75rem; }
    .site-ust .nav-link.aktif { box-shadow: inset 3px 0 0 var(--tabela); border-radius: 0 6px 6px 0; }
    .site-ust .navbar-nav .btn { margin-top: .4rem; }
    .urun-ozellik { width: 100% !important; }
}