/* --------------------------------------------------------------------------
   Parcom Otomotiv - kurumsal site

   Tek dosya, sayfaya gomulu. Neden: site 8 sayfa ve stil ~20 KB. Ayri bir
   istek, HTTP round trip'i ilk boyamadan once bekletir; gomulu hali ilk
   ekrani tek istekte bitirir. Build adimi da yok - dosya duzenlenir, biter.
   -------------------------------------------------------------------------- */

:root {
    --ink:        #14181d;
    --ink-soft:   #4a5361;
    --ink-faint:  #7b8595;
    --line:       #e2e6eb;
    --line-soft:  #eef1f4;
    --surface:    #ffffff;
    --canvas:     #f7f8fa;

    /* Sanayi/otomotiv: lacivert guven, turuncu eylem. Turuncu yalnizca
       tiklanacak seylerde kullanilir; her yerde olsa hicbir yeri isaret
       etmezdi. */
    --brand:      #123a63;
    --brand-dark: #0d2b4a;
    --brand-soft: #eaf1f8;
    --accent:     #e8622a;
    --accent-dark:#cf5220;

    --ok:         #1a7f4b;
    --ok-soft:    #e8f5ee;
    --warn:       #a8560a;
    --warn-soft:  #fdf2e5;
    --err:        #b32020;
    --err-soft:   #fdeceb;

    --radius:     10px;
    --radius-lg:  16px;
    --shadow:     0 1px 2px rgba(16,24,40,.05), 0 4px 14px rgba(16,24,40,.06);
    --shadow-lg:  0 12px 40px rgba(16,24,40,.12);

    --wrap:       1140px;
    --font:       system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1em; }

/* Klavye odagi her zaman gorunur. Tasarim ugruna kaldirilirsa site fare
   olmadan kullanilamaz hale gelir. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--brand); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }
.section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--tint { background: var(--canvas); }
.section-head { max-width: 46rem; margin-bottom: 2.5rem; }
.section-head p { color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 0; }
.eyebrow {
    display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--accent); margin-bottom: .6rem;
}

/* --- dugmeler --------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    /* 48px: parmakla basilabilir en kucuk hedef. Sitenin cogu telefondan
       aciliyor, bu bir estetik tercih degil. */
    min-height: 48px; padding: .75rem 1.6rem;
    border: 1px solid transparent; border-radius: var(--radius);
    font: inherit; font-weight: 600; cursor: pointer; text-align: center;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); color: #fff; }
.btn--dark { background: var(--brand); color: #fff; }
.btn--dark:hover { background: var(--brand-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--brand); border-color: var(--line); }
.btn--ghost:hover { background: var(--brand-soft); }
.btn--onDark { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.btn--onDark:hover { background: rgba(255,255,255,.2); color: #fff; }
.btn--block { width: 100%; }

/* --- ust bar ---------------------------------------------------------- */
.header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header__inner { display: flex; align-items: center; gap: 1.25rem; min-height: 74px; position: relative; }
.brand { display: flex; align-items: center; gap: .7rem; font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.brand:hover { text-decoration: none; }
.brand img { height: 40px; width: auto; }

.nav { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.nav a {
    padding: .55rem .85rem; border-radius: var(--radius);
    color: var(--ink-soft); font-weight: 500; font-size: .95rem;
}
.nav a:hover { background: var(--canvas); color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--brand); font-weight: 600; }
/* Bayi girisi bir buton, menu baglantisi degil: koyu zemin uzerinde yazisi
   beyaz kalmali. .nav a secicisi .btn--dark'tan daha guclu oldugu icin rengi
   burada geri veriliyor. Hover'a dokunulmuyor - orada menunun kendi hover
   davranisi gecerli. */
.nav a.btn--dark { color: #fff; }

.header__actions { display: flex; align-items: center; gap: .6rem; }

.locale {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius);
}
.locale a {
    min-width: 40px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 .5rem; border-radius: 7px; font-size: .8rem; font-weight: 700; color: var(--ink-faint);
}
.locale a:hover { color: var(--ink); text-decoration: none; }
.locale a[aria-current="true"] { background: var(--surface); color: var(--brand); box-shadow: var(--shadow); }

/* Menu dugmesi yalnizca telefonda gorunur. Gizli bir checkbox ve onun
   etiketi ile calisir - JavaScript yok, script kapaliyken de acilir. */
.menu-state { position: absolute; opacity: 0; pointer-events: none; }
.menu-toggle { display: none; }
/* Etiket gorunmuyorken bile checkbox klavyeyle odaklanabilir olmali. */
.menu-state:focus-visible + .menu-toggle { outline: 3px solid var(--accent); outline-offset: 2px; }

/* --- kahraman alani ---------------------------------------------------- */
.hero {
    background: linear-gradient(160deg, var(--brand-dark) 0%, var(--brand) 55%, #1b4f83 100%);
    color: #fff; padding-block: clamp(3.5rem, 8vw, 6.5rem); position: relative; overflow: hidden;
}
/* Ince bir dokusal katman - duz zemin ucuz gorunuyor, gorsel ise agir. */
.hero::after {
    content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none;
    background-image: repeating-linear-gradient(45deg, #fff 0 1px, transparent 1px 22px);
}
.hero__inner { position: relative; z-index: 1; max-width: 44rem; }
.hero h1 { color: #fff; margin-bottom: 1rem; }
.hero p { color: rgba(255,255,255,.86); font-size: 1.12rem; max-width: 36rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* --- rakamlar --------------------------------------------------------- */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.figure { background: var(--surface); padding: 1.75rem 1.25rem; text-align: center; }
.figure__value { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 800; color: var(--brand); line-height: 1.1; letter-spacing: -.03em; }
.figure__label { color: var(--ink-soft); font-size: .9rem; margin-top: .35rem; }

/* --- kartlar ---------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.25rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.75rem; }
.card--tinted { background: var(--canvas); }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--ink-soft); margin-bottom: 0; font-size: .96rem; }
.card__icon {
    width: 44px; height: 44px; border-radius: var(--radius); margin-bottom: 1rem;
    display: grid; place-items: center; background: var(--brand-soft); color: var(--brand);
}

/* --- urun gruplari ---------------------------------------------------- */
.groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.group {
    border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.25rem;
    background: var(--surface); display: flex; align-items: center; gap: .85rem;
    font-weight: 600; color: var(--ink);
}
.group__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }

/* --- iki sutunlu blok -------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split--form { grid-template-columns: 1fr 1.15fr; align-items: start; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; color: var(--ink-soft); }
.checklist strong { color: var(--ink); display: block; }
.checklist svg { flex: none; margin-top: .2rem; color: var(--ok); }

/* --- form ------------------------------------------------------------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow); }

.field { margin-bottom: 1.15rem; }
.field > label { display: block; font-weight: 600; font-size: .93rem; margin-bottom: .4rem; }
.field .optional { color: var(--ink-faint); font-weight: 400; }

.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
    width: 100%; padding: .8rem .95rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    /* 16px sart: daha kucugu iOS'ta her dokunusta sayfayi yakinlastirir. */
    font: inherit; font-size: 16px; color: var(--ink); background: var(--surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.field textarea { resize: vertical; min-height: 110px; }
.field--error input, .field--error textarea { border-color: var(--err); }
.field__hint { font-size: .84rem; color: var(--ink-faint); margin-top: .35rem; }
.field__error { font-size: .87rem; color: var(--err); margin-top: .35rem; font-weight: 500; }
/* Uzunluk sayaci. Sinira yaklasilana kadar gizli durur - kisa bir cevabin
   pesinde ihtiyac duymadigi bir sayi dolasmasin diye. Sinira varildiginda
   hata rengine gecer: maxlength yaziyi sessizce kesiyor, en azindan sebebi
   gorunur olsun. */
.field__counter { font-size: .82rem; color: var(--ink-soft); margin-top: .35rem; text-align: right; }
.field__counter--full { color: var(--err); font-weight: 500; }
/* Onay kutusunun hatasi .consent flex kabinin disinda durur; oradaki
   bosluklari kapatmak icin. Once satir ici stildi - ayni kural iki
   yerde (Blade ve JS) tekrarlanmasin diye sinifa tasindi. */
.field__error--consent { margin-top: -.75rem; margin-bottom: 1rem; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.consent { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: 1.25rem; }
.consent input { width: 20px; height: 20px; margin-top: .2rem; flex: none; }
.consent label { font-size: .92rem; color: var(--ink-soft); line-height: 1.5; }

/* Honeypot: ekranda yok ama display:none degil - bazi botlar gizli alanlari
   atlar, konumlandirilmis olani doldurur. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- bildirimler ------------------------------------------------------ */
.alert { padding: 1rem 1.15rem; border-radius: var(--radius); margin-bottom: 1.5rem; border: 1px solid; }
.alert--ok   { background: var(--ok-soft);   border-color: #bfe3d0; color: #14603a; }
.alert--err  { background: var(--err-soft);  border-color: #f3c6c4; color: #8f1a1a; }
.alert--warn { background: var(--warn-soft); border-color: #f2d9b8; color: #7d420a; }
.alert strong { display: block; margin-bottom: .2rem; }
.alert p:last-child { margin-bottom: 0; }
.alert code { background: rgba(0,0,0,.06); padding: .1rem .4rem; border-radius: 4px; font-size: .9em; }

/* --- iletisim --------------------------------------------------------- */

/* Iki sutun ustten hizali: solda harita var, sagdaki kartin ortalanmasi onu
   haritanin yarisinda asili birakirdi. */
.split--contact { align-items: start; }

.contact-main { display: grid; gap: clamp(1.25rem, 3vw, 1.75rem); }

/* Aranacak ve yazilacak iki yol. Listenin bir maddesi degil, tiklanacak iki
   kutu: sayfaya gelenin yapacagi sey bu ikisinden biri. Telefonda tek sutuna
   iner ve her kutu parmak boyu (>=56px) yuksekliginde kalir. */
.reach { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .85rem; }
.reach__item {
    display: flex; align-items: center; gap: .9rem; min-height: 76px;
    padding: 1rem 1.15rem; text-decoration: none;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.reach__item:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-1px); }
.reach__item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.reach__icon {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px;
    border-radius: 50%; background: var(--brand-soft); color: var(--brand);
}
.reach__icon svg { width: 22px; height: 22px; }
.reach__text { min-width: 0; }
.reach__label { display: block; font-size: .78rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; }
/* Uzun bir e-posta adresi kutuyu tasirmasin - kirilir, kesilmez: kesilen
   adres okunamaz, kirilan okunur. */
.reach__value { display: block; font-size: 1.05rem; font-weight: 700; color: var(--ink); line-height: 1.35; overflow-wrap: anywhere; }
.reach__hint { display: block; margin-top: .15rem; font-size: .82rem; color: var(--ink-faint); }
.reach__item:hover .reach__value { color: var(--brand); }

/* Harita. Yukseklik degil oran veriliyor: sabit piksel, dar ekranda ya bir
   serit ya da yarim sayfa olurdu. Cerceve kendi kosesini tasimadigi icin
   yuvarlatma disaridan yapiliyor. */
.map {
    margin: 0; overflow: hidden; position: relative;
    aspect-ratio: 16 / 10;
    background: var(--canvas);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.contact-list li { display: flex; gap: .9rem; align-items: flex-start; }
.contact-list svg { flex: none; margin-top: .15rem; color: var(--brand); }
.contact-list span { display: block; font-size: .82rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; }
.contact-list a, .contact-list strong { font-size: 1.02rem; font-weight: 600; color: var(--ink); }
.contact-list a:hover { color: var(--brand); }
.contact-list__extra { margin-top: .35rem; }

.card__rule { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }

/* --- cagri seridi ------------------------------------------------------ */
.cta { background: var(--brand); color: #fff; border-radius: var(--radius-lg); padding: clamp(2rem, 4vw, 3rem); text-align: center; }
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,.85); max-width: 34rem; margin-inline: auto; }

/* --- alt bilgi -------------------------------------------------------- */
.footer { background: #0c1620; color: rgba(255,255,255,.72); padding-block: 3.5rem 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
.footer h4 { color: #fff; font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 1rem; }
.footer a { color: rgba(255,255,255,.72); }
.footer a:hover { color: #fff; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .95rem; }
/* Filtre yok: koyu zemin icin ayri bir dosya var (parcom-logo-light.png,
   beyaz isaretler + saydam zemin). Onceki brightness(0) invert(1), logonun
   opak beyaz arka planini da beyaza cevirdigi icin logoyu duz beyaz bir
   dikdortgene donusturuyordu.

   width:auto sart: onsuz HTML'deki width ozniteligi uygulanir ve logo yatayda
   ezilir - oran 4.571, oznitelik ise yer ayirmak icin yuvarlatilmis bir sayi. */
.footer__brand img { height: 42px; width: auto; margin-bottom: 1rem; opacity: .95; }
.footer__brand p { font-size: .95rem; max-width: 26rem; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .88rem; }
.social { display: flex; gap: .5rem; }
.social a { width: 38px; height: 38px; border-radius: var(--radius); background: rgba(255,255,255,.08); display: grid; place-items: center; }
.social a:hover { background: rgba(255,255,255,.16); }

/* --- uzun metin sayfalari ---------------------------------------------- */
.prose { max-width: 46rem; }
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose ul, .prose ol { padding-left: 1.25rem; color: var(--ink-soft); }
.prose li { margin-bottom: .5rem; }
.prose__updated { color: var(--ink-faint); font-size: .9rem; }

/* --------------------------------------------------------------------------
   Telefon. Sitenin cogu buradan aciliyor, bu yuzden kirilma noktalari
   sonradan yamanmis degil - duzenler bastan tek sutuna inecek sekilde
   kuruldu.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .split, .split--form { grid-template-columns: 1fr; }

    /* Dar ekranda harita 16/10 fazla basik kaliyor - biraz daha kare. */
    .map { aspect-ratio: 4 / 3; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
    .menu-toggle {
        display: grid; place-items: center; margin-left: auto; order: 2;
        width: 46px; height: 46px; border: 1px solid var(--line); border-radius: var(--radius);
        background: var(--surface); cursor: pointer;
    }
    .menu-state:checked + .menu-toggle { background: var(--canvas); border-color: var(--brand); }

    .nav {
        /* Kapaliyken yok. Telefonda menu acilana kadar yer kaplamamali. */
        display: none;
        position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--surface); border-bottom: 1px solid var(--line);
        padding: .5rem 1.25rem 1rem; box-shadow: var(--shadow-lg);
    }
    .menu-state:checked ~ .nav { display: flex; }

    /* Dil secici, menu dugmesinin solunda kalir. */
    .header__actions { order: 1; margin-left: auto; }
    .nav a { padding: .9rem .25rem; min-height: 48px; display: flex; align-items: center; border-bottom: 1px solid var(--line-soft); }
    .nav a:last-child { border-bottom: 0; }
    .nav .btn { margin-top: .75rem; }
}

@media (max-width: 560px) {
    .field-row { grid-template-columns: 1fr; }
    .hero__actions .btn { width: 100%; }
    .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer__bottom { flex-direction: column; }
}

/* --- yazdirma --------------------------------------------------------- */
@media print {
    .header, .footer, .hero__actions, .cta { display: none; }
    body { color: #000; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* --- reCAPTCHA rozeti ---------------------------------------------------
   Google, rozeti gizlemeye YALNIZCA formda atif metni bulunuyorsa izin
   verir - o metin bayilik formunun altinda duruyor.

   Neden gizleniyor: rozet ekranin sag alt kosesine sabitlenir ve telefonda
   icerigin ustune biner; bizim durumumuzda tam da kendi atif metnimizi
   ortuyordu. visibility kullaniliyor, display degil - Google'in scripti
   rozeti olcmeye calisir ve display:none onu kirabiliyor. */
.grecaptcha-badge { visibility: hidden; }

/* =====================================================================
   Herkese acik urun katalogu

   Sitenin geri kalani okunmak icin dar tutuluyor; katalog ise yanyana bir
   filtre rayi ile urun izgarasi tasiyor, o yuzden daha genis bir kabuk
   kullaniyor. Renkler ve kenar yaricaplari sitenin kendi degiskenlerinden
   geliyor - katalog ayri bir yer gibi degil, sitenin bir sayfasi gibi
   gorunsun.
   ===================================================================== */

.wrap--wide { max-width: 1440px; }

.catalogue { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: 1.75rem; align-items: start; }

/* ---- filtre rayi ---- */
.cat-rail {
    position: sticky; top: 1.5rem;
    max-height: calc(100vh - 3rem);
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line, #e5e7eb);
    border-radius: var(--radius, 12px); overflow: hidden;
}
.cat-rail__head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line, #e5e7eb); }
.cat-rail__head h2 { margin: 0; font-size: 1rem; }
.cat-rail__close { display: none; background: none; border: 0; padding: .25rem; cursor: pointer; color: var(--ink-soft, #6b7280); }
.cat-rail__close svg { width: 20px; height: 20px; }
.cat-rail__body { flex: 1; overflow-y: auto; }
.cat-rail__foot { display: none; padding: .85rem 1.1rem; border-top: 1px solid var(--line, #e5e7eb); }
.cat-rail__foot .btn { width: 100%; }

.cat-rail__active { padding: .8rem 1.1rem; border-bottom: 1px solid var(--line, #e5e7eb); background: #f9fafb; }
.cat-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .55rem; }
.cat-chip { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .2rem .55rem; font-size: .8rem; border: 1px solid var(--line, #e5e7eb); border-radius: 999px; background: #fff; cursor: pointer; }
.cat-chip span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9rem; }
.cat-chip__x { font-size: 1rem; line-height: 1; color: var(--ink-soft, #6b7280); }
.cat-chip:hover { border-color: var(--err, #b91c1c); color: var(--err, #b91c1c); }
.cat-clear { background: none; border: 0; padding: 0; font-size: .82rem; color: var(--err, #b91c1c); cursor: pointer; }
.cat-clear:hover { text-decoration: underline; }

/* ---- bir filtre grubu ---- */
.cat-facet { border-bottom: 1px solid var(--line, #e5e7eb); }
.cat-facet:last-child { border-bottom: 0; }
.cat-facet--flat { padding: .6rem 1.1rem; }

.cat-facet__head { display: flex; align-items: center; gap: .5rem; padding: .75rem 1.1rem; cursor: pointer; list-style: none; user-select: none; }
.cat-facet__head::-webkit-details-marker { display: none; }
/* Ucgen elle ciziliyor: tarayicinin kendi isareti konumlandirilamiyor ve
   rozetin yanina yanlis yere dusuyor. */
.cat-facet__head::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-soft, #6b7280); border-bottom: 1.5px solid var(--ink-soft, #6b7280); transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.cat-facet[open] > .cat-facet__head::after { transform: rotate(-135deg) translateY(-2px); }
.cat-facet__title { font-size: .9rem; font-weight: 600; }
.cat-facet__badge { min-width: 1.15rem; padding: 0 .3rem; font-size: .72rem; line-height: 1.15rem; text-align: center; border-radius: 999px; background: var(--accent, #b91c1c); color: #fff; }

.cat-facet__search { width: calc(100% - 2.2rem); margin: 0 1.1rem .45rem; font-size: .86rem; padding: .35rem .55rem; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; }
.cat-facet__list { max-height: 14rem; overflow-y: auto; padding: 0 .6rem .7rem; }

.cat-option { display: flex; align-items: center; gap: .55rem; padding: .35rem .5rem; border-radius: 7px; cursor: pointer; font-size: .89rem; }
.cat-option:hover { background: #f3f4f6; }
.cat-option input { width: 15px; height: 15px; flex: none; margin: 0; }
.cat-option__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-option__count { font-size: .76rem; color: var(--ink-soft, #6b7280); font-variant-numeric: tabular-nums; }

/* ---- ust cubuk ---- */
.cat-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.cat-search { position: relative; flex: 1; min-width: 14rem; }
.cat-search svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--ink-soft, #6b7280); pointer-events: none; }
/* Zemin acikca beyaz: katalog artik hem beyaz bolumde hem de renkli zeminli
   ana sayfa bolumunde duruyor, saydam birakilirsa yanindaki select ile ayni
   gorunmez. */
.cat-search input { width: 100%; padding: .6rem .8rem .6rem 2.3rem; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; font-size: .95rem; background: #fff; }
.cat-bar__right { display: flex; align-items: center; gap: .8rem; }
.cat-total { font-size: .88rem; color: var(--ink-soft, #6b7280); white-space: nowrap; }
.cat-bar select { padding: .55rem .7rem; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; font-size: .9rem; background: #fff; }

/* ---- izgara ---- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.1rem; }
.catalogue.is-loading .cat-grid { opacity: .55; transition: opacity .12s; }

.cat-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line, #e5e7eb); border-radius: var(--radius, 12px); overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.cat-card:hover { border-color: #d1d5db; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
/* Kare: B2B panelindeki urun kutulariyla ayni. Gorseller artik kare
   kirpilmadigi icin kutu ile fotografin orani birbirinden bagimsiz - ikisinin
   ayni yerde ayni gorunmesi, ayni urunun iki sitede farkli durmasindan iyi.
   Zemin beyaz: parca fotograflari zaten beyaz fonda. */
.cat-card__image { aspect-ratio: 1; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cat-card__image img { width: 100%; height: 100%; object-fit: contain; padding: .6rem; }
.cat-card__image--empty::after { content: ""; width: 34px; height: 34px; border: 2px solid #e5e7eb; border-radius: 6px; }
.cat-card__body { padding: .85rem .9rem 1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.cat-card__title { margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.35; }
.cat-card__oem { margin: 0; font-size: .78rem; color: var(--ink-soft, #6b7280); font-variant-numeric: tabular-nums; }
.cat-card__meta { margin: 0; font-size: .8rem; color: var(--ink-soft, #6b7280); }
.cat-card__fit { margin: 0; font-size: .78rem; color: var(--ink-soft, #6b7280); }
/* ---- kart fiyati ----
   Tek fiyat: tavsiye edilen satis fiyati. Solda kucuk etiket, sagda rakam;
   tabular-nums ile basamaklar kart kart ayni hizada durur. Ustteki ince
   cizgi fiyati urun bilgisinden ayirir, margin-top:auto blogu karti dibe
   iter - kisa ve uzun urun adlarinda fiyat ayni yukseklikte kalsin diye. */
.cat-card__prices { margin-top: auto; padding-top: .55rem; border-top: 1px solid var(--line, #e5e7eb); display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.cat-price__label { font-size: .76rem; color: var(--ink-soft, #6b7280); }
.cat-price__value { font-size: .95rem; font-weight: 600; color: var(--ink, #111827); font-variant-numeric: tabular-nums; white-space: nowrap; }

.cat-badge { align-self: flex-start; margin-top: auto; padding: .18rem .5rem; font-size: .74rem; font-weight: 500; border-radius: 999px; }
/* Fiyat blogu varsa dibe iten odur; rozet onun hemen altinda kalir. Fiyati
   olmayan urunde margin-top:auto yine gecerli ve rozet dipte durur. */
.cat-card__prices + .cat-badge { margin-top: .55rem; }
.cat-badge--in { background: #ecfdf5; color: #047857; }
.cat-badge--out { background: #f3f4f6; color: #6b7280; }

/* ---- durum ve sayfalama ---- */
.cat-status { padding: 3rem 1rem; text-align: center; }
.cat-status__text { margin: 0 0 .35rem; font-weight: 500; }
.cat-status__hint { margin: 0 0 1rem; font-size: .88rem; color: var(--ink-soft, #6b7280); }
.cat-status--error .cat-status__text { color: var(--err, #b91c1c); }

.cat-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; margin-top: 2rem; }
.cat-pager__btn { min-width: 2.1rem; padding: .4rem .65rem; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; background: #fff; font-size: .88rem; cursor: pointer; }
.cat-pager__btn:hover:not(:disabled) { border-color: #9ca3af; }
.cat-pager__btn:disabled { opacity: .4; cursor: default; }
.cat-pager__btn.is-current { background: var(--accent, #b91c1c); border-color: var(--accent, #b91c1c); color: #fff; }
.cat-pager__gap { padding: .4rem .2rem; color: var(--ink-soft, #6b7280); }

/* ---- telefon ve tablet ---- */
.cat-toggle { display: none; }
.cat-backdrop { display: none; }

@media (max-width: 1080px) {
    .catalogue { grid-template-columns: minmax(0, 1fr); }

    .cat-toggle {
        display: inline-flex; align-items: center; gap: .5rem;
        margin-bottom: 1rem; padding: .55rem 1rem;
        border: 1px solid var(--line, #e5e7eb); border-radius: 10px;
        background: #fff; font-size: .92rem; cursor: pointer;
    }
    .cat-toggle svg { width: 18px; height: 18px; }
    .cat-toggle__count { min-width: 1.25rem; padding: 0 .3rem; font-size: .74rem; line-height: 1.25rem; text-align: center; border-radius: 999px; background: var(--accent, #b91c1c); color: #fff; }

    /* Tam ekran, dar bir cekmece degil: alti gruplu bir filtre listesi
       telefonda tum genisligi hak ediyor. */
    .cat-rail {
        position: fixed; inset: 0; z-index: 60;
        max-height: none; border: 0; border-radius: 0;
        transform: translateX(-100%); transition: transform .22s ease;
    }
    .catalogue.is-filters-open .cat-rail { transform: translateX(0); }
    .cat-rail__close, .cat-rail__foot { display: block; }
    .cat-rail__close { display: inline-flex; }

    .catalogue.is-filters-open .cat-backdrop { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(15, 23, 42, .45); }

    .cat-facet__list { max-height: none; }
    .cat-option { padding: .55rem .5rem; font-size: .95rem; }
    .cat-option input { width: 18px; height: 18px; }
}

@media (max-width: 640px) {
    .cat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
    .cat-bar { gap: .6rem; }
    .cat-bar__right { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
    .cat-rail { transition: none; }
}