/* ==========================================================================
   KRC OTOMOTİV — ÖN YÜZ
   Elle yazılmış tek dosya, derleme adımı yok (bkz. CLAUDE.md ortam kısıtları).

   Tasarım yönü: bu bir TEKNİK KATALOG, pazarlama sitesi değil. Kullanıcı kod
   arayan bir tamirci ya da toptancı. Öncelikler: hızlı tarama, okunaklı tablo,
   net tipografi, mobilde yeterince büyük dokunma hedefi. Dekorasyon değil,
   bilgi yoğunluğu.
   ========================================================================== */

:root {
    /* Renk — kırmızı yalnızca eylem ve vurgu için, zeminde kullanılmaz */
    --renk-zemin: #ffffff;
    --renk-zemin-2: #f4f6f8;
    --renk-zemin-3: #e9edf1;
    --renk-koyu: #16202b;
    --renk-metin: #17202a;
    --renk-metin-soluk: #5b6975;
    --renk-vurgu: #c8102e;
    --renk-vurgu-koyu: #9d0c24;
    --renk-cizgi: #dde3e8;
    --renk-cizgi-koyu: #c3ccd4;
    --renk-tamam: #0f7b4f;
    --renk-tamam-zemin: #e6f4ee;
    --renk-hata: #b03000;
    --renk-hata-zemin: #fdece5;
    --renk-bilgi-zemin: #eaf0fb;
    --renk-bilgi: #23459c;

    /* Tip ölçeği */
    --olcek-1: 0.8125rem;   /* 13px — yardımcı metin, etiket */
    --olcek-2: 0.9375rem;   /* 15px — gövde */
    --olcek-3: 1.0625rem;
    --olcek-4: 1.375rem;
    --olcek-5: 1.75rem;
    --olcek-6: 2.25rem;

    /* Boşluk — 4px tabanlı */
    --bosluk-1: 4px;
    --bosluk-2: 8px;
    --bosluk-3: 16px;
    --bosluk-4: 24px;
    --bosluk-5: 40px;
    --bosluk-6: 64px;

    --kose: 6px;
    --genislik: 1240px;
    --dokunma: 44px;   /* mobil dokunma hedefi alt sınırı */

    --yazi: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --yazi-kod: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

    --golge: 0 1px 2px rgba(22, 32, 43, .06), 0 2px 8px rgba(22, 32, 43, .04);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--renk-zemin-2);
    color: var(--renk-metin);
    font: var(--olcek-2) / 1.6 var(--yazi);
}

h1, h2, h3 { margin: 0 0 var(--bosluk-3); line-height: 1.25; font-weight: 650; }
h1 { font-size: var(--olcek-5); letter-spacing: -0.01em; }
h2 { font-size: var(--olcek-4); }
h3 { font-size: var(--olcek-3); }

p { margin: 0 0 var(--bosluk-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--renk-vurgu); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--renk-vurgu-koyu); }

/* Kodlar okunaklı olmalı: rakam-harf ayrımı ve hizalı sütunlar */
code {
    font-family: var(--yazi-kod);
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

:focus-visible { outline: 2px solid var(--renk-vurgu); outline-offset: 2px; }

.kapsayici { width: 100%; max-width: var(--genislik); margin: 0 auto; padding: 0 var(--bosluk-3); }
.bolum { padding: var(--bosluk-5) var(--bosluk-3); }
.aciklama { color: var(--renk-metin-soluk); }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.atla { position: absolute; left: -9999px; }
.atla:focus {
    left: var(--bosluk-3); top: var(--bosluk-2); z-index: 20;
    background: var(--renk-zemin); padding: var(--bosluk-2) var(--bosluk-3); border-radius: var(--kose);
}

/* ==========================================================================
   Üst çubuk
   ========================================================================== */

/* Üst şerit: koyu, ince. Solda iletişim, sağda Asmetal B2B yönlendirmesi. */
.serit { background: var(--renk-koyu); color: #b9c5d1; font-size: var(--olcek-1); }

.serit-ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-3);
    min-height: 48px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.serit-iletisim { display: flex; gap: var(--bosluk-4); margin: 0; }
.serit-sag { display: flex; align-items: center; gap: var(--bosluk-3); }

/* Dil seçici: TR | EN — küçük, ama parmakla vurulabilir (min. 32px). */
.dil-secici { display: inline-flex; padding: 2px; border: 1px solid #2f3e4d; border-radius: 999px; }

.dil-secici a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 32px;
    padding: 0 8px;
    border-radius: 999px;
    color: #b9c5d1;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: .06em;
    text-decoration: none;
}

.dil-secici a:hover { color: #fff; }
.dil-secici a.etkin { background: #fff; color: var(--renk-koyu); }

/* Çevirisi olmayan sayfada bilgi notu */
.dil-notu {
    margin: 0 0 var(--bosluk-3);
    padding: var(--bosluk-2) var(--bosluk-3);
    border-left: 4px solid var(--renk-bilgi);
    border-radius: 0 var(--kose) var(--kose) 0;
    background: var(--renk-bilgi-zemin);
    color: var(--renk-bilgi);
    font-size: var(--olcek-1);
}
.serit-iletisim a { color: #dce5ed; text-decoration: none; }
.serit-iletisim a:hover { color: #fff; text-decoration: underline; }

/* B2B bağlantısı — sayfanın en göze batan ikinci öğesi (ilki arama).
   Kırmızı dolgu + nabız atan nokta: bayi "nereden sipariş veriyordum"
   diye aramasın. */
.b2b {
    display: inline-flex;
    align-items: center;
    gap: var(--bosluk-3);
    color: #fff;
    text-decoration: none;
}

.b2b-uyari { display: inline-flex; align-items: center; gap: var(--bosluk-2); color: #dce5ed; font-weight: 600; }

.b2b-uyari::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff6a3d;
    box-shadow: 0 0 0 0 rgba(255, 106, 61, .7);
    animation: b2b-nabiz 2s ease-out infinite;
}

@keyframes b2b-nabiz {
    0%   { box-shadow: 0 0 0 0 rgba(255, 106, 61, .7); }
    70%  { box-shadow: 0 0 0 9px rgba(255, 106, 61, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 106, 61, 0); }
}

.b2b-dugme {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--bosluk-2);
    min-height: 36px;
    padding: 0 14px 0 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--renk-vurgu), #e0312b);
    box-shadow: 0 4px 14px -4px rgba(200, 16, 46, .8), inset 0 1px 0 rgba(255, 255, 255, .2);
    font-weight: 700;
    transition: transform .2s ease, box-shadow .2s ease;
    /* Müşteri isteği: fareyle üzerine gelmeden de dikkat çeksin.
       Kalp atışı ritmi (iki vuruş + dinlenme) — sürekli titreşimden
       daha az yorucu, göz yine de yakalıyor. */
    animation: b2b-kalp 1.8s ease-in-out infinite;
}

/* Her vuruşta dışa doğru yayılıp sönen halka */
.b2b-dugme::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid rgba(255, 106, 61, .85);
    border-radius: inherit;
    pointer-events: none;
    animation: b2b-halka 1.8s ease-out infinite;
}

@keyframes b2b-kalp {
    0%, 45%, 100% { transform: scale(1); }
    10% { transform: scale(1.08); }
    20% { transform: scale(1); }
    30% { transform: scale(1.05); }
}

@keyframes b2b-halka {
    0% { opacity: .9; transform: scale(1); }
    60%, 100% { opacity: 0; transform: scale(1.18, 1.55); }
}

.b2b-marka {
    padding: 3px 10px;
    border-radius: 999px;
    background: #fff;
    color: var(--renk-vurgu);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.b2b-cta { font-size: var(--olcek-2); letter-spacing: .01em; }
.b2b svg { transition: transform .2s ease; }

.b2b:hover, .b2b:focus-visible { color: #fff; }

/* Üzerine gelince atış durur, buton sabitlenir: tıklanacak hedef oynamasın. */
.b2b:hover .b2b-dugme, .b2b:focus-visible .b2b-dugme {
    animation: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px rgba(255, 60, 40, .9), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.b2b:hover svg { transform: translate(2px, -2px); }
.b2b:focus-visible { outline: 2px solid #ffc15e; outline-offset: 3px; border-radius: 999px; }

.b2b:hover .b2b-dugme::after, .b2b:focus-visible .b2b-dugme::after { animation: none; opacity: 0; }

/* Hareket hassasiyeti olan kullanıcıda buton durur (erişilebilirlik);
   kırmızı dolgu ve gölge zaten yeterince belirgin. */
@media (prefers-reduced-motion: reduce) {
    .b2b-uyari::before, .b2b-dugme, .b2b-dugme::after { animation: none; }
    .b2b-dugme::after { opacity: 0; }
    .b2b-dugme, .b2b svg { transition: none; }
}

.ust { background: var(--renk-zemin); border-bottom: 1px solid var(--renk-cizgi); }

.ust-ic {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "marka arama menu";
    align-items: center;
    gap: var(--bosluk-4);
    min-height: 76px;
    padding-top: var(--bosluk-2);
    padding-bottom: var(--bosluk-2);
}

.marka { grid-area: marka; display: flex; align-items: center; gap: var(--bosluk-3); color: var(--renk-metin); text-decoration: none; }
.ust-arama { grid-area: arama; }
.ust-menu { grid-area: menu; }

.teklif-mobil {
    grid-area: teklif;
    display: none;
    align-items: center;
    justify-self: end;
    min-height: var(--dokunma);
    color: var(--renk-metin);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* Menü 5 bağlantıya çıktı: orta genişlikte arama kutusu alt satıra iner,
   slogan gizlenir ki arama kutusu daralıp kullanışsız hale gelmesin. */
@media (max-width: 1200px) {
    .marka-alt { display: none; }
}

@media (max-width: 1100px) {
    .ust-ic { grid-template-columns: auto 1fr; grid-template-areas: "marka menu" "arama arama"; row-gap: var(--bosluk-2); }
    .ust-menu { justify-content: flex-end; }
}

/* Telefonda menü logonun altında tek satır; sığmazsa yatay kayar
   (5 bağlantıyı iki satıra bölmek dokunma hedeflerini küçültürdü). */
@media (max-width: 780px) {
    .serit-iletisim, .b2b-uyari { display: none; }
    .serit-ic { justify-content: center; }
    .ust-ic { grid-template-columns: 1fr auto; grid-template-areas: "marka teklif" "menu menu" "arama arama"; }
    .teklif-mobil { display: inline-flex; }
    .ust-menu .teklif-bagi { display: none; }
    .ust-menu {
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        margin: 0 calc(-1 * var(--bosluk-3));
        padding: 0 var(--bosluk-3);
        border-top: 1px solid var(--renk-cizgi);
    }
    .ust-menu::-webkit-scrollbar { display: none; }
}
.marka-logo { display: block; width: auto; height: 48px; }

/* Slogan logonun yanında, ince bir çizgiyle ayrılır; dar ekranda gizlenir. */
.marka-alt {
    max-width: 16ch;
    padding-left: var(--bosluk-3);
    border-left: 1px solid var(--renk-cizgi-koyu);
    font-size: var(--olcek-1);
    line-height: 1.3;
    color: var(--renk-metin-soluk);
}

.ust-arama { display: flex; gap: var(--bosluk-2); margin: 0; }

.ust-arama input {
    flex: 1;
    font: inherit;
    min-height: var(--dokunma);
    padding: 0 var(--bosluk-3);
    border: 1px solid var(--renk-cizgi-koyu);
    border-radius: var(--kose);
    background: var(--renk-zemin);
    color: var(--renk-metin);
}

.ust-menu { display: flex; align-items: center; gap: var(--bosluk-3); }

/* Menü bağları da dokunma hedefi: mobilde parmakla vurulabilmeli */
.ust-menu a {
    display: inline-flex;
    align-items: center;
    min-height: var(--dokunma);
    color: var(--renk-metin);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.ust-menu a:hover { color: var(--renk-vurgu); }

.teklif-bagi { gap: var(--bosluk-2); }

.teklif-sayi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--renk-vurgu);
    color: #fff;
    font-size: var(--olcek-1);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.teklif-sayi.bos { background: var(--renk-zemin-3); color: var(--renk-metin-soluk); }

/* ==========================================================================
   Kırıntı yolu ve bildirim
   ========================================================================== */

.kirinti { background: var(--renk-zemin); border-bottom: 1px solid var(--renk-cizgi); font-size: var(--olcek-1); }
.kirinti ol { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); list-style: none; margin: 0; padding: var(--bosluk-2) 0; }
.kirinti li + li::before { content: "/"; color: var(--renk-cizgi-koyu); margin-right: var(--bosluk-2); }
.kirinti a { display: inline-block; padding: var(--bosluk-1) 0; color: var(--renk-metin-soluk); text-decoration: none; }
.kirinti a:hover { color: var(--renk-vurgu); }
.kirinti [aria-current] { color: var(--renk-metin); font-weight: 600; }

.bildirim {
    margin: var(--bosluk-3) 0 0;
    padding: var(--bosluk-2) var(--bosluk-3);
    background: var(--renk-tamam-zemin);
    border: 1px solid #b9dfcd;
    border-left: 4px solid var(--renk-tamam);
    border-radius: var(--kose);
    color: #0b5c3b;
}

/* ==========================================================================
   Anasayfa
   ========================================================================== */

/* Hero görseli: solu açık zemin, araç sağda. Yazı solda ve KOYU renkte.
   Soldan sağa beyaz örtü, metnin geçtiği alanda aracı soldurur — hangi
   ekran genişliğinde olursa olsun yazı okunur kalır. */
.hero {
    display: flex;
    align-items: center;
    min-height: 520px;
    padding: var(--bosluk-6) 0;
    color: var(--renk-metin);
    background-color: #f3eeec;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .7) 38%, rgba(255, 255, 255, 0) 60%),
        url("../img/hero-genis.webp");
    background-size: cover;
    background-position: center, right center;
    background-repeat: no-repeat;
}

.hero > .kapsayici { width: 100%; }
.hero h1 { font-size: var(--olcek-6); max-width: 18ch; margin-bottom: var(--bosluk-3); color: var(--renk-koyu); }
.hero-alt { color: #3d4a56; max-width: 46ch; font-size: var(--olcek-3); }

.hero-arama { display: flex; gap: var(--bosluk-2); max-width: 620px; margin: var(--bosluk-4) 0 var(--bosluk-2); }

.hero-arama input {
    flex: 1;
    font: inherit;
    font-size: var(--olcek-3);
    min-height: 56px;
    padding: 0 var(--bosluk-3);
    border: 2px solid var(--renk-cizgi-koyu);
    border-radius: var(--kose);
    background: #fff;
    color: var(--renk-metin);
    box-shadow: 0 6px 20px -8px rgba(22, 32, 43, .35);
}

.hero-arama input:focus { outline: none; border-color: var(--renk-vurgu); }
.hero-ipucu { color: #4a5763; font-size: var(--olcek-1); max-width: 60ch; }
.hero-ipucu code { white-space: nowrap; background: rgba(255, 255, 255, .85); border: 1px solid var(--renk-cizgi); padding: 1px 5px; border-radius: 3px; color: var(--renk-metin); }

.widget {
    background: var(--renk-zemin);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    padding: var(--bosluk-4);
    box-shadow: var(--golge);
}

.widget-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--bosluk-3); align-items: end; margin-top: var(--bosluk-3); }
.widget-alan label { display: block; font-size: var(--olcek-1); font-weight: 600; margin-bottom: var(--bosluk-1); }

.widget-alan select,
.filtre-kutu select,
.filtre-kutu input {
    width: 100%;
    font: inherit;
    min-height: var(--dokunma);
    padding: 0 var(--bosluk-2);
    border: 1px solid var(--renk-cizgi-koyu);
    border-radius: var(--kose);
    background: var(--renk-zemin);
    color: var(--renk-metin);
}

.izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--bosluk-3); }

/* Parça grubu kutusu: solda o gruptan bir ürün fotoğrafı, sağda ad ve sayı. */
.izgara-kutu {
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
    padding: var(--bosluk-3);
    min-height: 88px;
    background: var(--renk-zemin);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    text-decoration: none;
    color: var(--renk-metin);
}

.izgara-kutu:hover { border-color: var(--renk-vurgu); color: var(--renk-metin); box-shadow: var(--golge); }

.izgara-gorsel {
    display: grid;
    place-items: center;
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: var(--kose);
    background: var(--renk-zemin-2);
}

/* Fotoğraflar farklı oranlarda: kutuya sığdırılır, kırpılmaz. */
.izgara-gorsel img { width: auto; height: auto; max-width: 64px; max-height: 64px; mix-blend-mode: multiply; }

.izgara-metin { display: flex; flex-direction: column; gap: var(--bosluk-1); min-width: 0; }
.izgara-ad { font-weight: 650; line-height: 1.3; }
.izgara-sayi { font-size: var(--olcek-1); color: var(--renk-metin-soluk); font-variant-numeric: tabular-nums; }

.etiketler { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); }

.etiket {
    display: inline-flex;
    align-items: center;
    gap: var(--bosluk-2);
    min-height: 38px;
    padding: 0 var(--bosluk-3);
    background: var(--renk-zemin);
    border: 1px solid var(--renk-cizgi);
    border-radius: 999px;
    color: var(--renk-metin);
    text-decoration: none;
    font-size: var(--olcek-2);
}

.etiket:hover { border-color: var(--renk-vurgu); color: var(--renk-vurgu); }

/* Marka ızgarası — logolu kutular. Logo yüklenmemiş markada baş harf
   rozeti var, böylece ızgara her markada aynı yükseklikte duruyor. */
.marka-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--bosluk-2);
}

.marka-kutu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--bosluk-3) var(--bosluk-2);
    background: var(--renk-zemin);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    color: var(--renk-metin);
    text-decoration: none;
    text-align: center;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.marka-kutu:hover {
    border-color: var(--renk-vurgu);
    box-shadow: var(--golge);
    transform: translateY(-2px);
    color: var(--renk-metin);
}

.marka-logo-alan { display: grid; place-items: center; height: 48px; margin-bottom: var(--bosluk-2); }
.marka-logo-alan img { max-width: 110px; max-height: 48px; width: auto; height: auto; object-fit: contain; }

.marka-harf {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--renk-zemin-3);
    color: var(--renk-metin-soluk);
    font-weight: 700;
    font-size: var(--olcek-3);
    letter-spacing: .02em;
}

.marka-kutu-ad { font-weight: 600; font-size: var(--olcek-2); line-height: 1.25; }
.marka-kutu-sayi { font-size: var(--olcek-1); color: var(--renk-metin-soluk); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .marka-kutu { transition: none; }
    .marka-kutu:hover { transform: none; }
}
.etiket span { font-size: var(--olcek-1); color: var(--renk-metin-soluk); font-variant-numeric: tabular-nums; }

.sayaclar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--bosluk-3); }

.sayac {
    background: var(--renk-zemin);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    padding: var(--bosluk-3) var(--bosluk-4);
}

.sayac-deger { display: block; font-size: var(--olcek-5); font-weight: 700; font-variant-numeric: tabular-nums; }
.sayac-etiket { display: block; font-size: var(--olcek-1); color: var(--renk-metin-soluk); }

/* ==========================================================================
   Katalog
   ========================================================================== */

.katalog-baslik {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--bosluk-3);
    flex-wrap: wrap;
    margin-bottom: var(--bosluk-3);
}

.katalog-baslik h1 { margin-bottom: var(--bosluk-1); }
.katalog-marka-logo { display: block; max-width: 140px; max-height: 44px; width: auto; margin-bottom: var(--bosluk-2); }

.gorunum-secim { display: flex; gap: var(--bosluk-1); }

.gorunum-secim a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 var(--bosluk-3);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    background: var(--renk-zemin);
    color: var(--renk-metin);
    text-decoration: none;
    font-size: var(--olcek-1);
}

.gorunum-secim a.etkin { background: var(--renk-koyu); border-color: var(--renk-koyu); color: #fff; font-weight: 600; }

/* PDF katalog: görünüm düğmelerinden ayrışsın diye vurgu renkli çerçeve. */
.gorunum-secim a.pdf-katalog {
    gap: 6px;
    margin-left: var(--bosluk-2);
    border-color: var(--renk-vurgu);
    color: var(--renk-vurgu);
    font-weight: 600;
}

.gorunum-secim a.pdf-katalog:hover { background: var(--renk-vurgu); color: #fff; }


.giris-metni { max-width: 80ch; color: var(--renk-metin-soluk); }

.katalog { display: grid; grid-template-columns: 260px 1fr; gap: var(--bosluk-4); align-items: start; }

.filtreler {
    background: var(--renk-zemin);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    padding: var(--bosluk-3);
    position: sticky;
    top: var(--bosluk-3);
}

.filtre-kutu { margin-bottom: var(--bosluk-3); }
.filtre-kutu label { display: block; font-size: var(--olcek-1); font-weight: 600; margin-bottom: var(--bosluk-1); }
.filtreler .dugme { width: 100%; }
.filtre-temizle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--dokunma);
    margin-top: var(--bosluk-1);
    font-size: var(--olcek-1);
}

.filtre-not {
    margin-top: var(--bosluk-3);
    padding-top: var(--bosluk-3);
    border-top: 1px solid var(--renk-cizgi);
    font-size: var(--olcek-1);
    color: var(--renk-metin-soluk);
}

.sonuclar { min-width: 0; }

.tablo-sarmal {
    background: var(--renk-zemin);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    overflow-x: auto;
}

.tablo { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }

.tablo th, .tablo td {
    text-align: left;
    padding: var(--bosluk-2) var(--bosluk-3);
    border-bottom: 1px solid var(--renk-cizgi);
    vertical-align: top;
}

.tablo thead th {
    position: sticky;
    top: 0;
    background: var(--renk-zemin-2);
    font-size: var(--olcek-1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--renk-metin-soluk);
    border-bottom: 2px solid var(--renk-cizgi);
    white-space: nowrap;
}

.tablo tbody tr:hover { background: #fafcfd; }
.tablo tbody tr:last-child td { border-bottom: 0; }

.tablo-katalog .s-kod { white-space: nowrap; }
.tablo-katalog .s-kod code { font-size: var(--olcek-2); font-weight: 650; }
.tablo-katalog .s-ad { min-width: 180px; }
.tablo-katalog .s-ad a { color: var(--renk-metin); text-decoration: none; font-weight: 600; }
.tablo-katalog .s-ad a:hover { color: var(--renk-vurgu); text-decoration: underline; }

/* Grup ayrı kolon değil, ürün adının altında küçük bağlantı: tek başına
   ~220px yiyordu ve 1366px ekranda "Teklife ekle" sağa taşıyordu. */
.tablo-katalog .s-ad .s-grup-bag {
    display: block;
    margin-top: 2px;
    font-size: var(--olcek-1);
    font-weight: 400;
    color: var(--renk-metin-soluk);
}

.tablo-katalog .s-kodlar, .tablo-katalog .s-markalar { font-size: var(--olcek-1); color: var(--renk-metin-soluk); max-width: 260px; }

/* İşlem kolonu sağa yapışık: dar ekranda tablo yatay kaysa bile
   "+ Teklif" her zaman görünür, kullanıcı sağa çekmek zorunda kalmaz. */
.tablo-katalog .s-islem {
    position: sticky;
    right: 0;
    width: 1%;
    white-space: nowrap;
    background: var(--renk-zemin);
    box-shadow: -10px 0 10px -10px rgba(22, 32, 43, .25);
}

.tablo-katalog thead .s-islem { background: var(--renk-zemin-2); z-index: 2; }
.tablo-katalog tbody tr:hover .s-islem { background: #fafcfd; }

/* Tablo içi kısa buton; "Eklendi ✓" yazınca genişlik zıplamasın. */
.dugme-kucuk { min-height: 36px; min-width: 118px; padding: 0 var(--bosluk-3); font-size: var(--olcek-1); }

.sebep {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--renk-bilgi);
    background: var(--renk-bilgi-zemin);
    border-radius: 3px;
    padding: 1px 5px;
    width: fit-content;
}

.rozet-yeni {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    background: var(--renk-vurgu);
    color: #fff;
    border-radius: 3px;
    padding: 0 5px;
    vertical-align: middle;
}

.daha {
    display: inline;
    background: none;
    border: 0;
    padding: 0 0 0 var(--bosluk-1);
    font: inherit;
    font-size: var(--olcek-1);
    color: var(--renk-vurgu);
    cursor: pointer;
    text-decoration: underline;
}

/* Kart görünümü */
.kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--bosluk-3); }

.kart-urun {
    display: flex;
    flex-direction: column;
    gap: var(--bosluk-2);
    background: var(--renk-zemin);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    padding: var(--bosluk-3);
}

.kart-kod code { font-size: var(--olcek-3); font-weight: 700; }
.kart-ad { font-size: var(--olcek-2); margin: 0; }
.kart-ad a { color: var(--renk-metin); text-decoration: none; }
.kart-ad a:hover { color: var(--renk-vurgu); }
.kart-kategori, .kart-markalar { margin: 0; font-size: var(--olcek-1); color: var(--renk-metin-soluk); }
.kart-urun form { margin-top: auto; }
.kart-urun .dugme { width: 100%; }

.bos-sonuc {
    background: var(--renk-zemin);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    padding: var(--bosluk-5);
    text-align: center;
}

.bos-sonuc code { background: var(--renk-zemin-2); padding: 1px 5px; border-radius: 3px; }

.sayfalama { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--bosluk-1); margin-top: var(--bosluk-4); }

.sayfalama a, .sayfalama span {
    display: inline-flex;
    align-items: center;
    min-height: var(--dokunma);
    min-width: var(--dokunma);
    justify-content: center;
    padding: 0 var(--bosluk-3);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    background: var(--renk-zemin);
    text-decoration: none;
    color: var(--renk-metin);
    font-variant-numeric: tabular-nums;
}

.sayfalama .etkin { background: var(--renk-koyu); border-color: var(--renk-koyu); color: #fff; font-weight: 700; }
.sayfalama .bosluk { border: 0; background: transparent; min-width: 0; padding: 0 var(--bosluk-1); }

/* ==========================================================================
   Ürün detay
   ========================================================================== */

.urun { background: var(--renk-zemin); border: 1px solid var(--renk-cizgi); border-radius: var(--kose); }

.urun-ust {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--bosluk-4);
    padding: var(--bosluk-4);
    border-bottom: 1px solid var(--renk-cizgi);
}

/* Görseli olan ürünlerde üç kolon: galeri | kimlik | teklif kutusu */
.urun-ust.galerili { grid-template-columns: 300px 1fr 280px; }

/* Ürün galerisi */
.urun-galeri { grid-row: span 2; }

.galeri-buyuk {
    display: block;
    background: var(--renk-zemin-2);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    overflow: hidden;
}

.galeri-buyuk img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
}

.galeri-kucukler { display: flex; gap: var(--bosluk-2); flex-wrap: wrap; margin-top: var(--bosluk-2); }

.galeri-kucuk {
    padding: 2px;
    background: #fff;
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    cursor: pointer;
    line-height: 0;
}

.galeri-kucuk.etkin { border-color: var(--renk-vurgu); }
.galeri-kucuk img { width: 64px; height: 64px; object-fit: contain; }

/* Katalog listesindeki küçük görsel */
.s-gorsel { width: 64px; }
.s-gorsel a { display: block; line-height: 0; }
.s-gorsel img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--renk-cizgi);
    border-radius: 3px;
}

.gorsel-yok {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--renk-zemin-2);
    border: 1px dashed var(--renk-cizgi-koyu);
    border-radius: 3px;
    color: var(--renk-metin-soluk);
    font-size: var(--olcek-1);
}

.kart-gorsel {
    display: block;
    line-height: 0;
    background: #fff;
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    overflow: hidden;
}

.kart-gorsel img { width: 100%; height: 160px; object-fit: contain; }

.kart-gorsel .gorsel-yok {
    width: 100%;
    height: 160px;
    border: 0;
    border-radius: 0;
}

.urun-kod-etiket { font-size: var(--olcek-1); color: var(--renk-metin-soluk); margin: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.urun-kod { display: flex; align-items: center; gap: var(--bosluk-2); margin: 0 0 var(--bosluk-2); }
.urun-kod code { font-size: var(--olcek-5); font-weight: 700; letter-spacing: -0.01em; }
.urun-ust h1 { font-size: var(--olcek-4); margin-bottom: var(--bosluk-2); }
.urun-grup { margin: 0; font-size: var(--olcek-1); }

.kopyala {
    background: var(--renk-zemin-2);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    font: inherit;
    font-size: var(--olcek-1);
    color: var(--renk-metin-soluk);
    padding: 2px var(--bosluk-2);
    cursor: pointer;
}

.kopyala:hover { border-color: var(--renk-vurgu); color: var(--renk-vurgu); }
.kopyala.tamam { background: var(--renk-tamam-zemin); border-color: #b9dfcd; color: var(--renk-tamam); }

.urun-eylem { background: var(--renk-zemin-2); border: 1px solid var(--renk-cizgi); border-radius: var(--kose); padding: var(--bosluk-3); }
.teklif-form { display: flex; gap: var(--bosluk-2); margin: 0 0 var(--bosluk-2); }
.teklif-form input[type="number"] { width: 84px; font: inherit; min-height: var(--dokunma); padding: 0 var(--bosluk-2); border: 1px solid var(--renk-cizgi-koyu); border-radius: var(--kose); text-align: center; }
.teklif-form .dugme { flex: 1; }
.urun-eylem-not { margin: 0; font-size: var(--olcek-1); color: var(--renk-metin-soluk); }

.urun-bolum { padding: var(--bosluk-4); border-bottom: 1px solid var(--renk-cizgi); }
.urun-bolum:last-child { border-bottom: 0; }
.urun-bolum h2 { font-size: var(--olcek-3); display: flex; align-items: center; gap: var(--bosluk-2); }
.urun-bolum h2 .sayi { font-size: var(--olcek-1); font-weight: 400; color: var(--renk-metin-soluk); background: var(--renk-zemin-2); border-radius: 999px; padding: 1px var(--bosluk-2); }

.tablo-ozellik { max-width: 560px; }
.tablo-ozellik th { width: 40%; color: var(--renk-metin-soluk); font-weight: 500; }

.kod-listesi { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--bosluk-2); list-style: none; margin: 0; padding: 0; }

.kod-listesi li {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    padding: var(--bosluk-2);
    background: var(--renk-zemin-2);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
}

.kod-listesi code { font-size: var(--olcek-2); font-weight: 600; }
.kod-marka { font-size: var(--olcek-1); color: var(--renk-metin-soluk); }
.kod-listesi .kopyala { margin-left: auto; }

.uyumlu-metin {
    font-family: var(--yazi-kod);
    font-size: var(--olcek-1);
    line-height: 1.8;
    background: var(--renk-zemin-2);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    padding: var(--bosluk-3);
    word-break: break-word;
}

.benzer { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--bosluk-2); }
.benzer a { display: flex; gap: var(--bosluk-2); padding: var(--bosluk-2); border: 1px solid var(--renk-cizgi); border-radius: var(--kose); text-decoration: none; color: var(--renk-metin); }
.benzer a:hover { border-color: var(--renk-vurgu); }
.benzer code { font-weight: 650; white-space: nowrap; }
.benzer span { font-size: var(--olcek-1); color: var(--renk-metin-soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   Teklif listesi
   ========================================================================== */

.tablo-teklif { background: var(--renk-zemin); }
.tablo-teklif .s-adet { white-space: nowrap; }
.tablo-teklif .s-adet input { width: 84px; font: inherit; min-height: 38px; padding: 0 var(--bosluk-2); border: 1px solid var(--renk-cizgi-koyu); border-radius: var(--kose); text-align: center; }
.tablo-teklif .birim { font-size: var(--olcek-1); color: var(--renk-metin-soluk); margin-left: var(--bosluk-1); }

.teklif-arac { display: flex; align-items: center; gap: var(--bosluk-3); margin-top: var(--bosluk-3); flex-wrap: wrap; }

.bag-dugme { background: none; border: 0; padding: 0; font: inherit; color: var(--renk-hata); cursor: pointer; text-decoration: underline; }

.teklif-form-bolum {
    margin-top: var(--bosluk-5);
    background: var(--renk-zemin);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    padding: var(--bosluk-4);
}

.iletisim-form { max-width: 760px; }
.form-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bosluk-3); }
.form-alan { margin-bottom: var(--bosluk-3); }
.form-alan label { display: block; font-size: var(--olcek-1); font-weight: 600; margin-bottom: var(--bosluk-1); }

.form-alan input, .form-alan textarea {
    width: 100%;
    font: inherit;
    min-height: var(--dokunma);
    padding: 10px var(--bosluk-2);
    border: 1px solid var(--renk-cizgi-koyu);
    border-radius: var(--kose);
    background: var(--renk-zemin);
    color: var(--renk-metin);
}

.form-alan textarea { min-height: 0; resize: vertical; }
.form-alan.hatali input { border-color: var(--renk-hata); }
.zorunlu { color: var(--renk-vurgu); }

.bal-kupu { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hata-kutu {
    background: var(--renk-hata-zemin);
    border: 1px solid #f0c8b8;
    border-left: 4px solid var(--renk-hata);
    border-radius: var(--kose);
    padding: var(--bosluk-3);
    margin-bottom: var(--bosluk-3);
}

.hata-kutu ul { margin: var(--bosluk-1) 0 0; padding-left: var(--bosluk-4); }

.basari-kutu {
    background: var(--renk-zemin);
    border: 1px solid #b9dfcd;
    border-top: 4px solid var(--renk-tamam);
    border-radius: var(--kose);
    padding: var(--bosluk-5);
    text-align: center;
}

/* ==========================================================================
   İçerik sayfaları (kurumsal, haber, katalog)
   ========================================================================== */

.icerik-sayfa {
    background: var(--renk-zemin);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    padding: var(--bosluk-5);
    max-width: 860px;
}

.icerik-govde { font-size: var(--olcek-3); line-height: 1.75; }
.icerik-govde h2 { font-size: var(--olcek-4); margin-top: var(--bosluk-4); }
.icerik-govde h3 { font-size: var(--olcek-3); margin-top: var(--bosluk-3); }
.icerik-govde ul, .icerik-govde ol { padding-left: var(--bosluk-4); }
.icerik-govde li { margin-bottom: var(--bosluk-1); }
.icerik-govde img { max-width: 100%; height: auto; border-radius: var(--kose); }
.icerik-govde table { width: 100%; border-collapse: collapse; }
.icerik-govde th, .icerik-govde td { border: 1px solid var(--renk-cizgi); padding: var(--bosluk-2); text-align: left; }

/* Kurumsal metin bileşenleri — panelden girilen HTML bu sınıfları kullanabilir */
.icerik-giris { font-size: var(--olcek-3); color: var(--renk-metin); }

.icerik-alinti {
    margin: var(--bosluk-4) 0;
    padding: var(--bosluk-3) var(--bosluk-4);
    border-left: 4px solid var(--renk-vurgu);
    border-radius: 0 var(--kose) var(--kose) 0;
    background: var(--renk-zemin-2);
    font-weight: 600;
    color: var(--renk-koyu);
}

.deger-kartlari {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--bosluk-3);
    margin: var(--bosluk-4) 0 var(--bosluk-3);
}

.deger-kart {
    position: relative;
    padding: var(--bosluk-4) var(--bosluk-3) var(--bosluk-3);
    border: 1px solid var(--renk-cizgi);
    border-top: 3px solid var(--renk-vurgu);
    border-radius: var(--kose);
    background: var(--renk-zemin);
    font-size: var(--olcek-2);
    line-height: 1.65;
}

.icerik-govde .deger-kart h2 { margin: 0 0 var(--bosluk-2); font-size: var(--olcek-3); }
.deger-no { display: block; margin-bottom: var(--bosluk-1); font-family: var(--yazi-kod); font-size: var(--olcek-1); font-weight: 700; color: var(--renk-vurgu); }

.icerik-govde .deger-etiketleri { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); padding: 0; list-style: none; }
.deger-etiketleri li {
    margin: 0;
    padding: 4px 12px;
    border: 1px solid var(--renk-cizgi-koyu);
    border-radius: 999px;
    background: var(--renk-zemin-2);
    font-size: var(--olcek-1);
    font-weight: 600;
}

.iletisim-harita { display: inline-block; margin-top: var(--bosluk-2); font-size: var(--olcek-1); font-weight: 600; }

.iletisim-kutulari {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--bosluk-3);
    margin: var(--bosluk-4) 0;
}

.iletisim-kutu {
    background: var(--renk-zemin-2);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    padding: var(--bosluk-3);
}

.iletisim-kutu h2 { font-size: var(--olcek-1); text-transform: uppercase; letter-spacing: 0.04em; color: var(--renk-metin-soluk); margin-bottom: var(--bosluk-1); }
.iletisim-kutu p { margin: 0; font-size: var(--olcek-3); }

.haber-listesi { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--bosluk-3); }

.haber-kart {
    background: var(--renk-zemin);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    padding: var(--bosluk-3);
}

.haber-kart time, .haber-tarih { font-size: var(--olcek-1); color: var(--renk-metin-soluk); font-variant-numeric: tabular-nums; }
.haber-kart h2 { font-size: var(--olcek-3); margin: var(--bosluk-1) 0 var(--bosluk-2); }
.haber-kart h2 a { color: var(--renk-metin); text-decoration: none; }
.haber-kart h2 a:hover { color: var(--renk-vurgu); }
.haber-kart .devam { display: inline-flex; align-items: center; min-height: 38px; font-size: var(--olcek-1); }
.haber-ozet { font-size: var(--olcek-3); color: var(--renk-metin-soluk); }

.katalog-listesi { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bosluk-2); max-width: 760px; }

.katalog-listesi a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--bosluk-3);
    background: var(--renk-zemin);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    text-decoration: none;
    color: var(--renk-metin);
}

.katalog-listesi a:hover { border-color: var(--renk-vurgu); }
.katalog-ad { font-weight: 650; }
.katalog-aciklama, .katalog-boyut { font-size: var(--olcek-1); color: var(--renk-metin-soluk); }

.alt-sosyal { margin-top: var(--bosluk-2); display: flex; gap: var(--bosluk-3); flex-wrap: wrap; }
.alt-sosyal a { color: #dce5ed; text-decoration: none; font-size: var(--olcek-1); }
.alt-sosyal a:hover { color: #fff; text-decoration: underline; }

/* ==========================================================================
   Düğmeler
   ========================================================================== */

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bosluk-2);
    background: var(--renk-vurgu);
    color: #fff;
    font: inherit;
    font-weight: 600;
    padding: 0 var(--bosluk-4);
    min-height: var(--dokunma);
    border: 1px solid var(--renk-vurgu);
    border-radius: var(--kose);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.dugme:hover { background: var(--renk-vurgu-koyu); border-color: var(--renk-vurgu-koyu); color: #fff; }
.dugme-buyuk { min-height: 52px; font-size: var(--olcek-3); padding: 0 var(--bosluk-5); }

.dugme-ikincil { background: var(--renk-zemin); color: var(--renk-metin); border-color: var(--renk-cizgi-koyu); font-weight: 500; }
.dugme-ikincil:hover { background: var(--renk-zemin-2); color: var(--renk-vurgu); border-color: var(--renk-vurgu); }

.dugme.eklendi { background: var(--renk-tamam); border-color: var(--renk-tamam); color: #fff; }

/* ==========================================================================
   Alt bilgi
   ========================================================================== */

.alt { background: var(--renk-koyu); color: #b9c5d1; margin-top: var(--bosluk-6); padding-top: var(--bosluk-4); }

/* OEM uyarısı — koyu zeminde amber: göze çarpsın ama hata gibi durmasın. */
.oem-uyari {
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
    margin: 0 0 var(--bosluk-4);
    padding: 12px var(--bosluk-3);
    border: 1px solid rgba(255, 193, 94, .35);
    border-left: 4px solid #ffc15e;
    border-radius: var(--kose);
    background: rgba(255, 193, 94, .1);
    color: #fff;
    font-size: var(--olcek-2);
    line-height: 1.4;
}

.oem-uyari svg { flex: none; color: #ffc15e; }

/* Dört sütun, içerik kadar geniş: eskiden iki blok ekranın iki ucuna
   yaslanıyor, ortası boş kalıyordu. */
.alt-ic {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: var(--bosluk-4);
    padding-bottom: var(--bosluk-4);
}

@media (max-width: 1000px) {
    .alt-ic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .alt-kurum { grid-column: 1 / -1; }
}

.alt-marka { color: #fff; font-weight: 700; font-size: var(--olcek-3); margin-bottom: var(--bosluk-1); }
.alt .aciklama { color: #94a3b1; max-width: 36ch; font-size: var(--olcek-1); }

.alt-sutun { display: flex; flex-direction: column; align-items: flex-start; }

.alt-baslik {
    margin: 0 0 var(--bosluk-1);
    color: #7d8b98;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.alt-sutun a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: #dce5ed;
    text-decoration: none;
    font-size: var(--olcek-2);
}

.alt-sutun a:hover { color: #fff; text-decoration: underline; }
.alt-telif {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-3);
    flex-wrap: wrap;
    border-top: 1px solid #2a3948;
    padding-top: var(--bosluk-3);
    padding-bottom: var(--bosluk-3);
    font-size: var(--olcek-1);
    color: #7d8b98;
}

/* Telif + yasal bağlantılar (Gizlilik, KVKK, Çerez tercihleri) */
.alt-yasal { display: flex; flex-direction: column; gap: var(--bosluk-1); }
.alt-yasal p { margin: 0; }
.alt-yasal nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bosluk-1) var(--bosluk-3); }
.alt-yasal form { margin: 0; }

.alt-yasal a,
.alt-yasal-dugme {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: #b9c5d1;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.alt-yasal a:hover, .alt-yasal-dugme:hover { color: #fff; text-decoration: underline; }

/* ==========================================================================
   Çerez / KVKK bandı — ekranın altına sabit, seçim yapılınca kaybolur
   ========================================================================== */

.cerez-bandi {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    padding: var(--bosluk-3) 0;
    background: #0f1720;
    border-top: 3px solid var(--renk-vurgu);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
    color: #dce5ed;
    font-size: var(--olcek-1);
    animation: cerez-giris .35s ease-out;
    transition: transform .25s ease, opacity .25s ease;
}

.cerez-bandi.kapaniyor { transform: translateY(100%); opacity: 0; }

@keyframes cerez-giris {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.cerez-ic { display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-3) var(--bosluk-4); flex-wrap: wrap; }
.cerez-metin { flex: 1 1 520px; max-width: 80ch; }
.cerez-metin p { margin: 0; line-height: 1.55; }
.cerez-baslik { color: #fff; font-weight: 700; font-size: var(--olcek-2); margin-bottom: 2px !important; }
.cerez-metin a { color: #ffc15e; }
.cerez-metin a:hover { color: #fff; }

.cerez-dugmeler { display: flex; gap: var(--bosluk-2); margin: 0; flex: none; }

/* İki seçenek aynı boyda ve aynı görünürlükte — "Reddet" gizlenmiyor. */
.cerez-dugmeler .dugme { min-width: 128px; min-height: var(--dokunma); justify-content: center; }
.cerez-ret { background: transparent; border: 2px solid #dce5ed; color: #fff; }
.cerez-ret:hover { background: #fff; color: var(--renk-koyu); }
.cerez-kabul { border: 2px solid var(--renk-vurgu); }

@media (max-width: 600px) {
    .cerez-dugmeler { width: 100%; }
    .cerez-dugmeler .dugme { flex: 1; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cerez-bandi { animation: none; transition: none; }
}

@media print {
    .cerez-bandi { display: none; }
}

/* Geliştirici imzası — koyu zeminde kırmızı kenarlı, parlayan rozet.
   Kırmızı burada "vurgu" rolünde: sayfanın tek dış bağlantı rozeti. */
.imza {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: var(--dokunma);
    padding: 8px 18px 8px 8px;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    background:
        linear-gradient(#1c2935, #1c2935) padding-box,
        linear-gradient(120deg, var(--renk-vurgu), #ff6a3d 45%, #ffc15e 70%, var(--renk-vurgu)) border-box;
    background-size: 100% 100%, 250% 100%;
    border: 1.5px solid transparent;
    box-shadow: 0 4px 18px -8px rgba(200, 16, 46, .45);
    transition: box-shadow .25s ease, transform .25s ease, background-position .6s ease;
}

/* Genel `a:hover` rengi (kırmızı) koyu zeminde okunmaz — burada ezilir. */
.imza:hover,
.imza:focus-visible {
    color: #fff;
    text-decoration: none;
    background-position: 0 0, 100% 0;
    box-shadow: 0 8px 28px -6px rgba(200, 16, 46, .7);
    transform: translateY(-2px);
}

.imza:focus-visible { outline: 2px solid #ffc15e; outline-offset: 3px; }

.imza-simge {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--renk-vurgu), var(--renk-vurgu-koyu));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

.imza-simge svg { transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.imza:hover .imza-simge svg { transform: rotate(180deg); }

.imza-metin { display: flex; flex-direction: column; line-height: 1.2; }
.imza-ust { font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: #9fb0bf; }
.imza-alt { font-size: var(--olcek-3); font-weight: 700; letter-spacing: .01em; color: #fff; }
.imza-ok { display: inline-block; color: #ff6a3d; transition: transform .25s ease; }
.imza:hover .imza-ok { transform: translateX(4px); }

@media (max-width: 600px) {
    .alt-telif { flex-direction: column; align-items: stretch; text-align: center; }
    .imza { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .imza, .imza-simge svg, .imza-ok { transition: none; }
    .imza:hover, .imza:focus-visible { transform: none; }
    .imza:hover .imza-simge svg { transform: none; }
}

/* ==========================================================================
   Duyarlılık — mobilde tablo yatay kayar, filtreler üste geçer
   ========================================================================== */

@media (max-width: 1000px) {
    .katalog { grid-template-columns: 1fr; }
    .filtreler { position: static; }
    .urun-ust, .urun-ust.galerili { grid-template-columns: 1fr; }
    .urun-galeri { max-width: 420px; }
}

@media (max-width: 780px) {
    /* Dar ekranda araç metnin arkasına düşer: küçük görsel, alta yaslanır,
       üst kısım neredeyse düz beyaz örtüyle okunur tutulur. */
    .hero {
        min-height: 0;
        padding: var(--bosluk-5) 0 200px;
        background-image:
            linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .9) 55%, rgba(255, 255, 255, 0) 80%),
            url("../img/hero-dar.webp");
        background-size: cover, 180% auto;
        background-position: center, 70% 100%;
    }
    .hero h1 { font-size: var(--olcek-5); }
    .marka-alt { display: none; }
    .marka-logo { height: 40px; }
    .icerik-sayfa { padding: var(--bosluk-4) var(--bosluk-3); }
    .hero-arama { flex-direction: column; }
    .widget-form { grid-template-columns: 1fr; }
    .form-ikili { grid-template-columns: 1fr; }
    .bolum { padding: var(--bosluk-4) var(--bosluk-3); }
    .urun-bolum { padding: var(--bosluk-3); }
    .tablo th, .tablo td { padding: var(--bosluk-2); }
    /* Telefonda: kurum bilgisi tam genişlik, bağlantı sütunları ikişer;
       bağlantılar parmakla vurulabilsin diye 44px. */
    .alt-ic { grid-template-columns: 1fr 1fr; gap: var(--bosluk-3) var(--bosluk-4); }
    .alt-kurum { grid-column: 1 / -1; }
    .alt-sutun a { min-height: var(--dokunma); }
    .oem-uyari { font-size: var(--olcek-1); }

    /* Tablo içindeki bağlantılar mobilde parmakla vurulabilir olmalı.
       Tam 44px vermek 6 kolonlu veri tablosunda satırları şişirir ve
       "50 satırı bir bakışta tara" davranışını bozar; bunun yerine
       dokunma alanı dolgu ile ~34px'e çıkarılıyor. */
    .tablo td a,
    .tablo td .daha {
        display: inline-block;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .tablo-katalog .s-kodlar,
    .tablo-katalog .s-markalar { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}

@media print {
    .ust, .alt, .filtreler, .gorunum-secim, .sayfalama, .urun-eylem, .kopyala, .daha { display: none; }
    body { background: #fff; }
    .urun, .tablo-sarmal { border: 0; }
}