@charset "UTF-8";
/* pa-build: 20260912-1434 */
/* ==========================================================================
   ParçaApp — bileşen sistemi (Aşama 32)

   Buton, kart, rozet, tablo, form ve boş durum için TEK dil.

   ESKİ SINIFLAR ÇALIŞMAYA DEVAM EDER.

   Kodda 173 yerde `pa-btn-primary`, 44 yerde `btn-outline-secondary`,
   16 farklı kart sınıfı var. Hepsini elle değiştirmek 198 view'a
   dokunmak ve her birinde hata yapma ihtimali demekti.

   Onun yerine eski adlar yeni sisteme takma ad olarak bağlandı.
   Görsel dil tek seferde birleşiyor, geçiş kademeli yapılabiliyor.

   `tokens.css`'ten SONRA, `app.css`'ten ÖNCE yüklenir.
   ========================================================================== */

/* ==========================================================================
   1. BUTON SİSTEMİ
   ========================================================================== */

/*
   Beş rol, beş görünüm. Aynı iş için farklı ekranda farklı buton
   kullanmak, kullanıcının hangi düğmenin ne yaptığını öğrenmesini
   engelliyor.

     primary    turuncu dolgu    — ana eylem, sayfada bir tane
     secondary  lacivert çerçeve — ikincil eylem
     ghost      çerçevesiz       — düşük vurgu
     danger     kırmızı          — geri alınamaz eylem
     success    yeşil            — YALNIZCA anlamsal onay
*/
.pa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pa-space-2);
    min-height: var(--pa-tap);
    padding: 0 var(--pa-space-5);
    border: 1px solid transparent;
    border-radius: var(--pa-radius-md);
    font-family: var(--pa-font);
    font-size: var(--pa-text-base);
    font-weight: var(--pa-weight-semibold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.pa-btn:disabled,
.pa-btn.is-disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Klavye odağı GÖRÜNÜR OLMALI: fare kullanmayanlar nerede olduklarını
   bilmeli. `outline: none` yazmak erişilebilirliği bitirir. */
.pa-btn:focus-visible {
    outline: 2px solid var(--pa-orange-600);
    outline-offset: 2px;
}

.pa-btn--primary {
    background: var(--pa-orange-600);
    border-color: var(--pa-orange-600);
    color: #fff;
}
.pa-btn--primary:hover { background: var(--pa-orange-700); border-color: var(--pa-orange-700); color: #fff; }

.pa-btn--secondary {
    background: transparent;
    border-color: var(--pa-navy-900);
    color: var(--pa-navy-900);
}
.pa-btn--secondary:hover { background: var(--pa-navy-900); color: #fff; }

.pa-btn--ghost {
    background: transparent;
    border-color: var(--pa-border);
    color: var(--pa-text);
}
.pa-btn--ghost:hover { background: var(--pa-surface-2); border-color: var(--pa-border-strong); }

.pa-btn--danger {
    background: transparent;
    border-color: var(--pa-danger);
    color: var(--pa-danger);
}
.pa-btn--danger:hover { background: var(--pa-danger); color: #fff; }

/* Yeşil buton YALNIZCA anlamsal onay için: "doğrula", "onayla".
   Genel bir eylem düğmesi olarak kullanılmaz. */
.pa-btn--success {
    background: var(--pa-success);
    border-color: var(--pa-success);
    color: #fff;
}
.pa-btn--success:hover { filter: brightness(.94); color: #fff; }

.pa-btn--sm { min-height: 34px; padding: 0 var(--pa-space-3); font-size: var(--pa-text-sm); }
.pa-btn--lg { min-height: 52px; padding: 0 var(--pa-space-6); font-size: var(--pa-text-md); }
.pa-btn--block { width: 100%; }

/* ==========================================================================
   2. KART SİSTEMİ
   ========================================================================== */

/*
   Kodda 16 ayrı kart sınıfı vardı: pa-stat-card, pa-panel-card,
   pa-record-card, pa-report-card, pa-garage-box, pa-local-card,
   pa-dup-card... Çoğu aynı şeyi yapıyordu — beyaz yüzey, ince
   kenarlık, köşe yuvarlaklığı — ama biri 10px biri 12px köşe
   kullanıyordu ve fark göze düzensizlik olarak çarpıyordu.

   Tek taban + değiştiriciler. Eski adlar aynı tabanı miras alıyor.
*/
.pa-card {
    background: var(--pa-surface);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-md);
    padding: var(--pa-space-4);
}

.pa-card--flat    { box-shadow: none; }
.pa-card--raised  { box-shadow: var(--pa-shadow-sm); }
.pa-card--floating { box-shadow: var(--pa-shadow-md); }
.pa-card--flush   { padding: 0; overflow: hidden; }
.pa-card--tight   { padding: var(--pa-space-3); }
.pa-card--roomy   { padding: var(--pa-space-6); }

.pa-card--interactive { transition: border-color .15s ease, box-shadow .15s ease; }
.pa-card--interactive:hover {
    border-color: var(--pa-orange-600);
    box-shadow: var(--pa-shadow-sm);
}

/* Durum kartı: sol kenarda renkli şerit */
.pa-card--status { border-left-width: 3px; }
.pa-card--success { border-left-color: var(--pa-success); }
.pa-card--warning { border-left-color: var(--pa-warning); }
.pa-card--danger  { border-left-color: var(--pa-danger); }
.pa-card--info    { border-left-color: var(--pa-info); }

.pa-card-head {
    display: flex;
    align-items: center;
    gap: var(--pa-space-3);
    margin-bottom: var(--pa-space-3);
}
.pa-card-head h2,
.pa-card-head h3 { margin: 0; font-size: var(--pa-text-md); }
.pa-card-head .pa-card-action { margin-left: auto; font-size: var(--pa-text-sm); }

/* ==========================================================================
   3. DURUM ROZETLERİ
   ========================================================================== */

/*
   BİLİNMEYEN ASLA YEŞİL GÖRÜNMEZ.

   Bu kuralın sebebi basit: kullanıcı yeşil gördüğünde "uyar" diye
   okuyor. Bilinmeyen bir uyumluluğu yeşil göstermek, doğrulanmamış
   bir bilgiyi doğrulanmış gibi sunmak demek.

     verified/success   yeşil    doğrulandı
     conditional        sarı     şartlı
     unknown            gri      bilinmiyor  ← yeşil DEĞİL
     danger             kırmızı  uymaz
*/

.pa-badge--verified,
.pa-badge--success {
    background: var(--pa-success-050);
    color: #0b6b35;
}

.pa-badge--conditional,
.pa-badge--warning {
    background: var(--pa-warning-050);
    color: #8a6100;
}

/* Bilinmeyen: nötr gri. Yeşile yaklaştırmak yanıltır. */
.pa-badge--unknown,
.pa-badge--muted {
    background: var(--pa-navy-050);
    color: var(--pa-muted);
}

.pa-badge--danger,
.pa-badge--incompatible {
    background: var(--pa-danger-050);
    color: #a32424;
}

.pa-badge--info { background: var(--pa-info-050); color: #0f47b0; }

/* Marka rozeti: turuncu, yalnızca vurgulanan ticari etiketler için */
.pa-badge--brand { background: var(--pa-orange-050); color: var(--pa-orange-700); }

/* ==========================================================================
   4. TABLOLAR
   ========================================================================== */

.pa-table {
    width: 100%;
    font-size: var(--pa-text-sm);
    border-collapse: collapse;
}

.pa-table thead th {
    background: var(--pa-surface-2);
    border-bottom: 1px solid var(--pa-border);
    padding: var(--pa-space-3);
    text-align: left;
    font-size: var(--pa-text-xs);
    font-weight: var(--pa-weight-semibold);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pa-muted);
    /* Uzun tablolarda başlık ekranda kalır; yoksa kullanıcı hangi
       sütuna baktığını unutuyor */
    position: sticky;
    top: 0;
    z-index: 1;
}

.pa-table tbody td {
    padding: var(--pa-space-3);
    border-bottom: 1px solid var(--pa-border);
    vertical-align: top;
}

.pa-table tbody tr:hover { background: var(--pa-surface-2); }
.pa-table tbody tr:last-child td { border-bottom: 0; }

/* Sayısal sütunlar sağa yaslanır ve tek genişlikli yazı tipi
   kullanır: rakamlar alt alta hizalanınca karşılaştırmak kolaylaşır */
.pa-table .pa-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   5. FORMLAR

   Form kurallari `overrides.css` icinde: `app.css`'te de tanimlilar ve
   o dosya sonra yuklendigi icin buradaki kurallar eziliyordu.

   Bu bolum tasinirken bir hata yaptim: kullandigim regex tek satirlik
   kurallari hedefliyordu, ama form kurallari cok satirli secici
   listesiydi. Govdeler silindi, seciciler kaldi ve dosyada gecersiz
   CSS olustu:

       .pa-form-row select,
       .pa-form-row input:focus,      <- govdesiz secici
       .pa-form-error { ... }

   Tarayici bu listeyi tek kural sayip `pa-form-error`in kurallarini
   hepsine uyguluyordu. Kalinti temizlendi.
   ========================================================================== */

.pa-form-error {
    margin-top: var(--pa-space-1);
    font-size: var(--pa-text-xs);
    color: var(--pa-danger);
}

/* ==========================================================================
   6. BOŞ DURUMLAR

   `pa-empty` ve `pa-empty-state` kurallari `overrides.css` icinde:
   `app.css`'te de tanimlilar.
   ========================================================================== */

/* ==========================================================================
   7. TİPOGRAFİ HİYERARŞİSİ
   ========================================================================== */

.pa-h1 { font-size: var(--pa-text-2xl); font-weight: var(--pa-weight-bold); line-height: var(--pa-leading-tight); }
.pa-h2 { font-size: var(--pa-text-xl); font-weight: var(--pa-weight-bold); line-height: var(--pa-leading-tight); }
.pa-h3 { font-size: var(--pa-text-lg); font-weight: var(--pa-weight-semibold); }
.pa-h4 { font-size: var(--pa-text-md); font-weight: var(--pa-weight-semibold); }

.pa-body  { font-size: var(--pa-text-base); line-height: var(--pa-leading-normal); }
.pa-tiny  { font-size: var(--pa-text-xs); }

.pa-label {
    font-size: var(--pa-text-xs);
    font-weight: var(--pa-weight-semibold);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pa-muted);
}

/* Kod ve numara: tek genişlikli. OEM numarası ve üretici kodu
   okunurken karakterlerin hizalı olması hata yapmayı azaltıyor. */
.pa-code {
    font-family: var(--pa-font-mono);
    font-size: var(--pa-text-sm);
    font-weight: var(--pa-weight-semibold);
    letter-spacing: .01em;
}

/* ==========================================================================
   8. ERİŞİLEBİLİRLİK
   ========================================================================== */

/* Hareketi azalt tercihi: kullanıcı işletim sisteminde bunu açtıysa
   animasyon rahatsızlık veriyor demektir */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Yalnızca ekran okuyucu için */
.pa-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Odak halkası tek yerden */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--pa-orange-600);
    outline-offset: 2px;
}

/* ==========================================================================
   11. DİKEY ÜRÜN KUTUCUĞU

   `part-tile.php` şu an ana sayfada KULLANILMIYOR — orada
   `compare-card` var. Ama silmedim: arama sonuçlarında ve kategori
   sayfalarında dikey kutucuk gerekiyor ve bu kart o iş için doğru
   kuruldu.

   Kuralları burada duruyor ki dosya bir yerde kullanıldığında
   biçimsiz çıkmasın.
   ========================================================================== */

.pa-tile-grid {
    display: grid;
    gap: var(--pa-space-3);
    /* auto-fill + üst sınır: tek öğe kalınca kart ekranı kaplamıyor */
    grid-template-columns: repeat(auto-fill, minmax(200px, 280px));
}

.pa-tile {
    display: flex;
    flex-direction: column;
    background: var(--pa-surface);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-md);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pa-tile:hover { border-color: var(--pa-orange-600); box-shadow: var(--pa-shadow-sm); }

.pa-tile-media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background: var(--pa-surface-2);
}
.pa-tile-media img { max-width: 78%; max-height: 78%; object-fit: contain; }
.pa-tile-media .pa-img-placeholder { width: 46%; }

.pa-tile-drop {
    position: absolute;
    top: var(--pa-space-2);
    left: var(--pa-space-2);
    padding: 2px var(--pa-space-2);
    border-radius: var(--pa-radius-sm);
    background: var(--pa-danger);
    color: #fff;
    font-size: var(--pa-text-xs);
    font-weight: var(--pa-weight-bold);
}

.pa-tile-fav {
    position: absolute;
    top: var(--pa-space-2);
    right: var(--pa-space-2);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--pa-border);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--pa-muted);
    cursor: pointer;
}
.pa-tile-fav.is-active { color: var(--pa-danger); border-color: var(--pa-danger); }

/* Gövde esner, alt blok kartın dibine yapışır: farklı uzunluktaki
   ürün adlarında fiyat satırları aynı hizada kalıyor */
.pa-tile-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--pa-space-3) var(--pa-space-3) 0;
}
.pa-tile-brand {
    font-size: var(--pa-text-xs);
    font-weight: var(--pa-weight-semibold);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pa-muted);
}
.pa-tile-title { margin: 0; font-size: var(--pa-text-sm); font-weight: var(--pa-weight-semibold); }
.pa-tile-title a { color: var(--pa-text); text-decoration: none; }
.pa-tile-title a:hover { color: var(--pa-orange-700); }
.pa-tile-code { font-size: var(--pa-text-xs); color: var(--pa-muted-2); }

.pa-tile-foot {
    display: flex;
    flex-direction: column;
    gap: var(--pa-space-1);
    padding: var(--pa-space-3);
}
.pa-tile-stores { font-size: var(--pa-text-xs); color: var(--pa-muted); }
.pa-tile-price {
    font-size: var(--pa-text-lg);
    font-weight: var(--pa-weight-bold);
    color: var(--pa-orange-700);
    line-height: 1.2;
}
.pa-tile-price span {
    font-size: var(--pa-text-xs);
    font-weight: var(--pa-weight-normal);
    color: var(--pa-muted);
}
.pa-tile-price--none { font-size: var(--pa-text-md); color: var(--pa-muted); }
.pa-tile-max { font-size: var(--pa-text-xs); color: var(--pa-muted-2); }
.pa-tile-foot .pa-btn { margin-top: var(--pa-space-2); }

.pa-tile-compare {
    border: 0;
    background: none;
    padding: var(--pa-space-1) 0 0;
    font-size: var(--pa-text-xs);
    color: var(--pa-muted);
    cursor: pointer;
}
.pa-tile-compare:hover { color: var(--pa-orange-700); }

/* ==========================================================================
   12. HERO VE BAŞLIK RAFİNASYONU
   ========================================================================== */

/*
   BAŞLIK: iki renk, daha kalın, daha aşağıda.

   Önceki hali ekranın en tepesine yapışıktı ve tek renkti. Şimdi ilk
   satır lacivert, ikinci satır turuncu: göz ikinci satırda duruyor ve
   orada asıl vaat var — "satıcıları karşılaştır".
*/


/* İki renkli bölüm başlığı: ilk kelime lacivert, ikincisi turuncu */
.pa-title-duo {
    font-size: var(--pa-text-xl);
    font-weight: var(--pa-weight-bold);
    letter-spacing: -.3px;
    color: var(--pa-navy-900);
}
.pa-title-duo span { color: var(--pa-orange-600); }


/*
   DEKORATIF ARAÇ GÖRSELİ.

   Yalnızca geniş ekranda; dar ekranda yer kaplayıp aramayı aşağı
   iterdi. Süs olduğu için ilk sırada değil, kaybolabilir.
*/

/* ==========================================================================
   13. ÖZELLİK ŞERİDİ VE KATEGORİLER
   ========================================================================== */

/*
   GÖRSEL KUTUYU DOLDURSUN.

   Kutuyu genişletmiştik ama görsel yükseklik sabit kalınca çevresinde
   boşluk oluşuyor ve küçük görünüyordu.

   Artık yükseklik yerine ORAN kullanılıyor: kutu ne kadar genişse
   görsel de o kadar büyüyor. Ekran boyutuna göre ayrı değer yazmaya
   gerek kalmıyor.
*/
.pa-cat-box {
    display: block;
    padding: var(--pa-space-3) var(--pa-space-3) var(--pa-space-4);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-md);
    background: #fff;
    text-align: center;
    text-decoration: none;
    color: var(--pa-text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pa-cat-box:hover { border-color: var(--pa-orange-600); box-shadow: var(--pa-shadow-sm); }

.pa-cat-box-media {
    display: grid;
    place-items: center;
    /*
       KAYNAK GÖRSELLER KARE (640x640).

       4:3 kutuya koyunca yükseklik sınırlıyor ve yanlarda boşluk
       kalıyordu — görsel büyüyeceğine küçülüyordu. Kutu da kare
       olunca görsel genişliği tam kullanıyor.
    */
    aspect-ratio: 1 / 1;
    /* "Yakında" rozeti buraya mutlak konumlanıyor */
    position: relative;
}
.pa-cat-box-media img {
    width: 100%;
    height: 100%;
    /* `contain`: ürün fotoğrafı kırpılmasın, oranı bozulmasın */
    object-fit: contain;
}

.pa-cat-box-name {
    margin-top: var(--pa-space-2);
    font-size: var(--pa-text-md);
    font-weight: var(--pa-weight-semibold);
    color: var(--pa-navy-900);
}

@media (min-width: 768px) {
    .pa-cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    /* Altı değil BEŞ sütun: kutular nefes alsın */
    .pa-cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


/*
   Hero'daki araç görseli.

   Gerçek bir araç fotoğrafı ama SEÇİLİ ARACI TEMSİL ETMİYOR — süs.
   Bu yüzden ekran okuyucudan gizli ve yalnızca geniş ekranda görünür;
   dar ekranda yer kaplayıp aramayı aşağı iterdi.
*/

/* ==========================================================================
   15. ÜRÜN GÖRSELİ ALANI

   Katalogda henüz ürün fotoğrafı yok. Boş kutular yerine kategori
   görseli gösteriliyor — ama "temsili görsel" etiketiyle.

   Etiket önemli: kullanıcı gördüğü fren diskinin tam olarak alacağı
   ürün olduğunu sanmamalı. Bosch ile TRW diski aynı kategoride ama
   farklı görünür.

   Kurallar 'Karşılaştırma kartı' bölümünde: .pa-cmp-media.is-generic
   ve .pa-cmp-generic. Buradaki kopyalar kaldırıldı — aynı sınıflar iki
   yerde tanımlıydı ve dosyada sonra gelen kazandığı için buradakiler
   zaten çalışmıyordu.
   ========================================================================== */

/* ==========================================================================
   9. ANA SAYFA HERO (Aşama 33)

   Tasarım ölçüleri:
     hero yüksekliği   460–500 px (masaüstü)
     sol sütun         %52   sağ sütun %48
     arama alanı       540×64 px (masaüstü) · %100×56 (mobil)
     mod etiketi       38 px yükseklik, 14 px iç boşluk
     garaj kartı       360×86 px (masaüstü) · %100×78 (mobil)
     başlık            56 px (masaüstü) · 34 px (mobil)
     açıklama          20 px (masaüstü) · 16 px (mobil)
     ızgara aralığı    32 px (masaüstü) · 16 px (mobil)
   ========================================================================== */

.pa-hero-light {
    background: linear-gradient(120deg, #f5f8fc 0%, #eef3f9 55%, #e7eef7 100%);
    border-bottom: 1px solid var(--pa-navy-100);
    overflow: hidden;
    /*
       Dikey dolgu BURADA, kapsayıcıda değil.

       `.pa-hero-light-grid` aynı zamanda `pa-container` sınıfını
       taşıyor ve `app.css` içindeki `.pa-container { padding: 0 16px }`
       kısayolu dikey dolguyu siliyor. Bkz. tools/css-conflicts.php
    */
    padding: 40px 0;
}

.pa-hero-light-grid {
    display: grid;
    gap: var(--pa-space-4);
    grid-template-columns: 1fr;
    align-items: center;
}

/* -- Üst başlık ------------------------------------------------------------ */
.pa-hero-kicker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pa-space-2);
    margin: 0 0 var(--pa-space-3);
    font-size: var(--pa-text-xs);
    font-weight: var(--pa-weight-bold);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pa-orange-600);
}
/* Kelimeler arası nokta: ayrı ayrı okunsunlar */
.pa-hero-kicker span:not(:last-child)::after { content: " •"; }

.pa-hero-light-copy h1 {
    margin: 0 0 var(--pa-space-3);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.8px;
    line-height: 1.14;
    color: var(--pa-navy-900);
}
.pa-hero-light-copy h1 span { color: var(--pa-orange-600); }

.pa-hero-lead {
    margin: 0 0 var(--pa-space-5);
    max-width: 46ch;
    font-size: var(--pa-text-md);
    line-height: 1.55;
    color: var(--pa-muted);
}

/* -- Arama ----------------------------------------------------------------- */
.pa-hero-light-search {
    display: flex;
    align-items: center;
    gap: var(--pa-space-2);
    width: 100%;
    height: 56px;
    padding: 0 6px 0 var(--pa-space-4);
    background: #fff;
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-md);
    box-shadow: var(--pa-shadow-sm);
}
.pa-hero-light-search > i { color: var(--pa-muted-2); font-size: 18px; }
.pa-hero-light-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    font-size: var(--pa-text-base);
    color: var(--pa-text);
}
.pa-hero-light-search input:focus { outline: none; }
.pa-hero-light-search .pa-btn {
    flex-shrink: 0;
    width: 88px;
    height: 46px;
    min-height: 0;
    font-size: var(--pa-text-base);
}

/* -- Arama biçimi kısayolları ---------------------------------------------- */
/*
   Sekme DEĞİL: her biri doğrudan ilgili sayfaya gidiyor. İlki vurgulu
   ama seçili değil — sekme yapmak, araç seçicinin kendi sekmeleriyle
   iç içe geçmeye yol açıyordu.
*/
.pa-hero-modes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pa-space-2);
    margin: var(--pa-space-3) 0 0;
    padding: 0;
    list-style: none;
}
.pa-hero-modes a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-pill);
    background: #fff;
    font-size: var(--pa-text-sm);
    font-weight: var(--pa-weight-medium);
    color: var(--pa-navy-800);
    text-decoration: none;
    white-space: nowrap;
}
.pa-hero-modes a:hover { border-color: var(--pa-orange-600); color: var(--pa-orange-700); }
.pa-hero-modes a.is-primary {
    background: var(--pa-info-050);
    border-color: #bcd4fb;
    color: #0f47b0;
}

/* -- Araç garajı kartı ----------------------------------------------------- */
.pa-garage-box {
    display: flex;
    align-items: center;
    gap: var(--pa-space-3);
    width: 100%;
    min-height: 78px;
    margin-top: var(--pa-space-4);
    padding: var(--pa-space-3);
    background: #fff;
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-md);
    box-shadow: var(--pa-shadow-sm);
}
.pa-garage-box-media {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--pa-radius-md);
    background: var(--pa-navy-050);
    color: var(--pa-navy-800);
    font-size: 22px;
}
.pa-garage-box-text { flex: 1; min-width: 0; }
.pa-garage-box-text strong { display: block; font-size: var(--pa-text-base); color: var(--pa-navy-900); }
.pa-garage-box-text span { font-size: var(--pa-text-sm); color: var(--pa-muted); }

.pa-garage-box-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 40px;
    padding: 0 var(--pa-space-4);
    border: 1px solid var(--pa-orange-600);
    border-radius: var(--pa-radius-md);
    font-size: var(--pa-text-sm);
    font-weight: var(--pa-weight-semibold);
    color: var(--pa-orange-700);
    text-decoration: none;
    white-space: nowrap;
}
.pa-garage-box-action:hover { background: var(--pa-orange-600); color: #fff; }

/* -- Parça kompozisyonu ---------------------------------------------------- */
/*
   Dar ekranda GİZLİ. Orada yer kaplayıp aramayı ekranın altına
   itiyordu; hero'nun işi aramayı öne çıkarmak.
*/
.pa-hero-art { display: none; }
.pa-hero-art img { width: 100%; height: auto; }

/* ==========================================================================
   10. GÜVEN ŞERİDİ

   Kart değil şerit: 82 piksellik tek satır. Kartlar hero'dan sonra
   ikinci bir blok gibi duruyordu; şerit geçiş hissi veriyor.
   ========================================================================== */

.pa-feature-bar {
    background: #fff;
    border-bottom: 1px solid var(--pa-border);
    /*
       Dolgu BÖLÜMDE, kapsayıcıda değil: `.pa-feature-bar-inner`
       aynı zamanda `pa-container` taşıyor ve app.css onun dikey
       dolgusunu siliyor. Denetim aracı bunu yakaladı.
    */
    /*
       Tasarim 82 px diyor: 40 px simge + 2x20 px dolgu = 80 px, ust
       cizgiyle 81. Onceki 46 px simge bu hedefi zaten asiyordu.
    */
    padding: var(--pa-space-5) 0;
}

.pa-feature-bar-inner {
    display: grid;
    gap: var(--pa-space-4);
    grid-template-columns: 1fr;
}

.pa-feature-item { display: flex; align-items: center; gap: var(--pa-space-3); }

/*
   MADDELER ARASI AYRAC.

   Dort madde yan yana dururken aralarindaki bosluk tek basina yetmiyor;
   "Birden Fazla Satici" ile onun alt yazisi mi, yoksa sonraki maddenin
   baslige mi ait belli olmuyordu. Ince bir cizgi gruplari ayiriyor.

   Yalnizca ayni satirdaki maddeler arasinda: alt alta dizildiginde
   sol kenarda asili bir cizgi kalirdi.
*/
@media (min-width: 992px) {
    .pa-feature-item + .pa-feature-item {
        border-left: 1px solid var(--pa-line);
        padding-left: var(--pa-space-5);
    }
}
.pa-feature-item strong {
    display: block;
    font-size: var(--pa-text-base);
    font-weight: var(--pa-weight-semibold);
    color: var(--pa-navy-900);
}
.pa-feature-item span { font-size: var(--pa-text-sm); color: var(--pa-muted); line-height: 1.4; }

/*
   SIMGE: ACIK ZEMINLI YUVARLATILMIS KARE.

   Onceden dolu daireydi — turuncu ve lacivert, donusumlu. Dort dolu
   daire seridi hero'dan daha agir gosteriyordu; goz once onlara
   gidiyor, oysa bunlar destek bilgisi.

   Tasarimda (guven seridi, 82 px) zemin acik, ikon renkli. Renk
   maddeyi ayirt etmeye yariyor, dikkat cekmeye degil.
*/
.pa-feature-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--pa-radius-md);
    font-size: 18px;
}

/*
   DORT MADDE, DORT RENK.

   Iki rengi donusumlu kullanmak birinci ile dorduncu maddeyi ayni
   gosteriyordu; serit tekrar ediyormus gibi duruyordu.
*/
.pa-feature-icon--brand   { background: var(--pa-orange-050);  color: var(--pa-orange-600); }
.pa-feature-icon--success { background: var(--pa-success-050); color: var(--pa-success); }
.pa-feature-icon--info    { background: var(--pa-info-050);    color: var(--pa-info); }
.pa-feature-icon--warning { background: var(--pa-warning-050); color: var(--pa-warning); }

/* -- Duyarlı düzen --------------------------------------------------------- */
@media (min-width: 768px) {
    .pa-hero-light-copy h1 { font-size: 44px; }
    .pa-feature-bar-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pa-garage-box { max-width: 420px; }
}

@media (min-width: 992px) {
    /* Sol %52, sağ %48 — tasarım ölçüsü */
    .pa-hero-light-grid {
        grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
        gap: var(--pa-space-8);
    }
    .pa-hero-art { display: block; }
    .pa-hero-light-search { max-width: 540px; height: 64px; }
    .pa-hero-light-search .pa-btn { width: 124px; height: 52px; }
    .pa-feature-bar-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .pa-hero-light { padding: 56px 0; }
    .pa-hero-light-copy h1 { font-size: 56px; }
    .pa-hero-lead { font-size: 20px; }
    .pa-garage-box { max-width: 460px; min-height: 86px; }
}

/* ==========================================================================
   11. ANA SAYFA BÖLÜMLERİ

   Kategori ızgarası, karşılaştırma kartları, fiyat düşüşü, markalar,
   aynı OEM, bakım paketi ve servis bandı.
   ========================================================================== */

/* -- Bölüm başlığı --------------------------------------------------------- */
.pa-block-title {
    display: flex;
    align-items: baseline;
    gap: var(--pa-space-3);
    margin-bottom: var(--pa-space-4);
}
.pa-block-title h2 { margin: 0; font-size: var(--pa-text-xl); color: var(--pa-navy-900); }
.pa-block-title p { margin: 2px 0 0; font-size: var(--pa-text-sm); color: var(--pa-muted); }
.pa-block-all {
    margin-left: auto;
    flex-shrink: 0;
    font-size: var(--pa-text-sm);
    color: var(--pa-info);
    text-decoration: none;
    white-space: nowrap;
}
.pa-block-all:hover { text-decoration: underline; }

/* -- Karşılaştırma kartı ızgarası ------------------------------------------ */
.pa-cmp-grid { display: grid; gap: var(--pa-space-3); grid-template-columns: 1fr; }

/* -- Fiyatı düşenler ------------------------------------------------------- */
.pa-drop-grid { display: grid; gap: var(--pa-space-3); grid-template-columns: 1fr; }

.pa-drop-card {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--pa-space-3);
    align-items: center;
    padding: var(--pa-space-3);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-md);
    background: #fff;
}
.pa-drop-media { display: grid; place-items: center; }
.pa-drop-media img { max-width: 100%; max-height: 64px; object-fit: contain; }
.pa-drop-media .pa-img-placeholder { width: 58%; }
.pa-drop-info strong { display: block; font-size: var(--pa-text-sm); }

/* Eğri GERÇEK VERİDEN çizilir; üç noktadan az veri varsa hiç çizilmez */
.pa-drop-spark { grid-column: 1 / -1; }
.pa-spark { display: block; width: 100%; height: auto; }

.pa-drop-price { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--pa-space-2); }
.pa-drop-old { font-size: var(--pa-text-xs); color: var(--pa-muted-2); text-decoration: line-through; }
.pa-drop-price strong { font-size: var(--pa-text-lg); color: var(--pa-navy-900); }

.pa-drop-badge { position: absolute; top: var(--pa-space-2); right: var(--pa-space-2); }
.pa-drop-action { grid-column: 1 / -1; }

/* -- Markalar -------------------------------------------------------------- */
.pa-brand-cells { display: grid; gap: var(--pa-space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pa-brand-cell {
    /* Tek satir kaldi: dikeyde ortalansin */
    display: grid;
    place-items: center;
    min-height: 64px;
    padding: var(--pa-space-3);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-md);
    background: #fff;
    text-align: center;
    text-decoration: none;
    color: var(--pa-text);
}
.pa-brand-cell:hover { border-color: var(--pa-orange-600); }
.pa-brand-cell strong { display: block; font-size: var(--pa-text-sm); }

/*
   MARKA LOGOSU: HEPSI AYNI KAPSULDE.

   Logolar birbirinden cok farkli oranlarda geliyor — Goodyear genis ve
   alcak, Bosch neredeyse kare. Serbest biraktiginda kimi devlesiyor
   kimi kayboluyor, serit dagilmis gorunuyor.

   Cozum yuksekligi sabitlemek: 34 px ic guvenli alan, 108 px genislik
   siniri. `contain` orani bozmuyor, kirpmiyor; kapsul yuksekligi her
   markada ayni kaliyor.
*/
.pa-brand-logo {
    display: block;
    max-width: 108px;
    max-height: 34px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Marka sayfasi basligindaki kucuk isaret */
.pa-brand-mark {
    display: inline-grid;
    place-items: center;
    height: 40px;
    margin-bottom: var(--pa-space-2);
}
.pa-brand-mark .pa-brand-logo { max-height: 40px; max-width: 140px; }

/* -- Aynı OEM -------------------------------------------------------------- */
.pa-oem-block {
    margin-bottom: var(--pa-space-3);
    padding: var(--pa-space-4);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-md);
    background: #fff;
}
/*
   Sol tanitim + sag secenekler. Dar ekranda alt alta.
*/
.pa-oem-block-body { display: grid; gap: var(--pa-space-4); }

@media (min-width: 992px) {
    .pa-oem-block-body { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
}

.pa-oem-intro {
    display: flex;
    flex-direction: column;
    gap: var(--pa-space-1);
    padding: var(--pa-space-3);
    border-radius: var(--pa-radius-md);
    background: var(--pa-surface-2);
}
.pa-oem-intro-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: var(--pa-space-2);
    border-radius: var(--pa-radius-md);
    background: var(--pa-orange-050);
    color: var(--pa-orange-600);
}
.pa-oem-intro-name { font-size: var(--pa-text-base); color: var(--pa-navy-900); }
.pa-oem-intro-code { font-size: var(--pa-text-xs); color: var(--pa-muted); }

/*
   IZGARA MARKA SAYISINA UYUYOR.

   Onceden yatay kaydirmali sabit 140 px kutulardi: dort markada
   kaydirma cubugu cikiyordu, iki markada satirin yarisi bostu.
   Sutun sayisi `data-options` ile geliyor.
*/
.pa-oem-row { display: grid; gap: var(--pa-space-3); grid-template-columns: 1fr; }

@media (min-width: 576px) {
    .pa-oem-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .pa-oem-row[data-options="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pa-oem-row[data-options="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pa-oem-row[data-options="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pa-oem-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--pa-space-4) var(--pa-space-3) var(--pa-space-3);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-md);
    text-align: center;
    color: var(--pa-text);
}
.pa-oem-option:hover { border-color: var(--pa-orange-600); }

/*
   En ucuz secenek cerceveyle isaretleniyor, dolu zeminle degil:
   digerleri "pasif" gorunmemeli. Hepsi gecerli secenek.
*/
.pa-oem-option.is-cheapest {
    border-color: var(--pa-orange-600);
    box-shadow: 0 0 0 1px var(--pa-orange-600) inset;
}

.pa-oem-option-flag {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--pa-space-2);
    border-radius: var(--pa-radius-pill);
    background: var(--pa-orange-600);
    font-size: var(--pa-text-xs);
    font-weight: var(--pa-weight-semibold);
    color: #fff;
    white-space: nowrap;
}

.pa-oem-option .pa-btn { margin-top: var(--pa-space-3); }
.pa-oem-option-media img { max-width: 52px; max-height: 52px; object-fit: contain; }
.pa-oem-option-media .pa-img-placeholder { width: 52px; }
.pa-oem-option-brand { display: block; margin-top: var(--pa-space-2); font-size: var(--pa-text-sm); }
.pa-oem-option-price {
    display: block;
    margin-top: 2px;
    font-size: var(--pa-text-md);
    font-weight: var(--pa-weight-bold);
    color: var(--pa-orange-700);
}

/* -- Bakım paketi bandı ---------------------------------------------------- */
.pa-package-band {
    display: grid;
    gap: var(--pa-space-4);
    grid-template-columns: 1fr;
    padding: var(--pa-space-5);
    border: 1px solid var(--pa-orange-100);
    border-radius: var(--pa-radius-lg);
    background: linear-gradient(120deg, var(--pa-orange-050) 0%, #fff 100%);
}
.pa-package-copy h2 { margin: 0 0 var(--pa-space-1); font-size: var(--pa-text-lg); color: var(--pa-navy-900); }
.pa-package-copy p { margin: 0; font-size: var(--pa-text-sm); color: var(--pa-muted); }

.pa-package-vehicle {
    display: flex;
    align-items: center;
    gap: var(--pa-space-3);
    padding: var(--pa-space-3);
    border-radius: var(--pa-radius-md);
    background: #fff;
}
.pa-package-vehicle i { font-size: 22px; color: var(--pa-navy-800); }
.pa-package-vehicle strong { display: block; font-size: var(--pa-text-sm); }

/* Paketin İÇİNDEKİNİ gösteriyor; soyut "bakım paketi" değil */
.pa-package-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pa-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.pa-package-item {
    display: flex;
    align-items: center;
    gap: var(--pa-space-2);
    padding: var(--pa-space-2) var(--pa-space-3);
    border-radius: var(--pa-radius-md);
    background: #fff;
    font-size: var(--pa-text-xs);
}
.pa-package-item i { color: var(--pa-orange-600); }
.pa-package-plus { color: var(--pa-muted-2); font-weight: var(--pa-weight-bold); }

.pa-package-action { display: flex; flex-direction: column; gap: var(--pa-space-2); }
.pa-package-action .pa-btn { align-self: flex-start; }

/* -- Servis bandı ---------------------------------------------------------- */
.pa-service-band {
    display: grid;
    gap: var(--pa-space-4);
    grid-template-columns: 1fr;
    align-items: center;
    padding: var(--pa-space-4);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-lg);
    background: #fff;
}
.pa-service-media img { width: 100%; height: auto; border-radius: var(--pa-radius-md); }
.pa-service-copy h2 { margin: 0 0 var(--pa-space-1); font-size: var(--pa-text-lg); color: var(--pa-navy-900); }
.pa-service-copy p { margin: 0; font-size: var(--pa-text-sm); color: var(--pa-muted); }

.pa-service-points { margin: 0; padding: 0; list-style: none; }
.pa-service-points li {
    display: flex;
    align-items: center;
    gap: var(--pa-space-2);
    padding: var(--pa-space-1) 0;
    font-size: var(--pa-text-sm);
}
.pa-service-points i { color: var(--pa-orange-600); }
.pa-service-action { display: flex; }

/* -- Duyarlı düzen --------------------------------------------------------- */
@media (min-width: 768px) {
    .pa-cmp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pa-drop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pa-brand-cells { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pa-service-band { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) auto auto; }
}

@media (min-width: 992px) {
    .pa-cmp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pa-brand-cells { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .pa-package-band {
        grid-template-columns: minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.4fr) auto;
        align-items: center;
    }
}

/* ==========================================================================
   12. GERİ GETİRİLEN KURALLAR

   Hero'yu yeniden kurarken bölüm 9-14 arasını silip yeniden yazmıştım.
   Silme işlemi fazlasını götürdü: karşılaştırma kartı, kategori
   ızgarası ve ürün kartının bazı parçaları biçimsiz kaldı.

   `tests/Core/CssCoverageTest.php` artık bunu yakalıyor.
   ========================================================================== */

/* -- Kategori ızgarası ----------------------------------------------------- */
/*
   Yatay kaydırmalı seri DEĞİL, sabit ızgara. Kaydırmalı seri ekranın
   çoğunu kullanmıyor ve mobilde tek elle kaydırmak zor.
*/
.pa-cat-grid {
    display: grid;
    gap: var(--pa-space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* -- Karşılaştırma kartı --------------------------------------------------- */
.pa-cmp {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-md);
    background: #fff;
    overflow: hidden;
}
.pa-cmp:hover { border-color: var(--pa-orange-600); }

.pa-cmp-top {
    position: relative;
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: var(--pa-space-3);
    /* Görsel ve metin ÜSTTEN hizalanır; ortalanınca görsel aşağı kayıyordu */
    align-items: start;
    flex: 1;
    padding: var(--pa-space-3);
}

.pa-cmp-media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    /*
       `align-self: start` olmazsa görsel aşağı kayar: ızgara öğeleri
       satır yüksekliğine yayılıyor, metin sütunu daha uzun olduğu için
       görsel kutusu uzuyor ve görsel ortada kalıyor.
    */
    align-self: start;
    border-radius: var(--pa-radius-sm);
    background: var(--pa-surface-2);
    overflow: hidden;
}
.pa-cmp-media img { max-width: 92%; max-height: 92%; object-fit: contain; }
.pa-cmp-media .pa-img-placeholder { width: 58%; }

/* Temsili görsel biraz soluk: gerçek ürün fotoğrafından ayrılsın */
.pa-cmp-media.is-generic img { opacity: .82; }

.pa-cmp-generic {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2px 4px;
    background: rgba(255, 255, 255, .88);
    font-size: 9.5px;
    line-height: 1.3;
    text-align: center;
    color: var(--pa-muted-2);
    letter-spacing: .01em;
}

.pa-cmp-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pa-cmp-brand {
    font-size: var(--pa-text-xs);
    font-weight: var(--pa-weight-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pa-navy-800);
}
.pa-cmp-title { margin: 0; font-size: var(--pa-text-sm); font-weight: var(--pa-weight-semibold); }
.pa-cmp-title a { color: var(--pa-text); text-decoration: none; }
.pa-cmp-title a:hover { color: var(--pa-orange-700); }
.pa-cmp-code { font-size: var(--pa-text-xs); color: var(--pa-muted); }
.pa-cmp-stores { font-size: var(--pa-text-xs); color: var(--pa-muted); }
.pa-cmp-info .pa-fit { align-self: flex-start; margin-top: 2px; }

.pa-cmp-fav {
    position: absolute;
    top: var(--pa-space-2);
    right: var(--pa-space-2);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pa-muted-2);
    cursor: pointer;
}
.pa-cmp-fav.is-active { color: var(--pa-danger); }

.pa-cmp-foot { padding: 0 var(--pa-space-3) var(--pa-space-3); }
.pa-cmp-price {
    display: block;
    margin-bottom: var(--pa-space-2);
    font-size: var(--pa-text-lg);
    font-weight: var(--pa-weight-bold);
    color: var(--pa-navy-900);
}
.pa-cmp-price span {
    font-size: var(--pa-text-xs);
    font-weight: var(--pa-weight-normal);
    color: var(--pa-muted);
}
.pa-cmp-price--none { font-size: var(--pa-text-md); color: var(--pa-muted); }

/* -- Ürün kartı (liste satırı) --------------------------------------------- */
.pa-part-body { flex: 1; min-width: 0; }

.pa-price-stores {
    display: block;
    margin-bottom: 2px;
    font-size: var(--pa-text-xs);
    color: var(--pa-muted);
}
/* "…'den başlayan" küçük: asıl rakam öne çıksın ama bunun en düşük
   teklif olduğu da okunsun */
.pa-price-from {
    font-size: var(--pa-text-xs);
    font-weight: var(--pa-weight-normal);
    color: var(--pa-muted);
}

/* -- Menüdeki sağa yaslı öğe ----------------------------------------------- */
.pa-nav-aside { margin-left: auto; }
.pa-nav-aside a { color: var(--pa-orange-500) !important; font-weight: var(--pa-weight-semibold); }

/* -- Duyarlı düzen --------------------------------------------------------- */
@media (min-width: 768px) {
    .pa-cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .pa-cmp-top { grid-template-columns: 128px minmax(0, 1fr); }
}

@media (min-width: 992px) {
    /* Altı değil BEŞ sütun: kutular nefes alsın */
    .pa-cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* -- "Yakında" kategorileri ------------------------------------------------ */
/*
   Ürünü olmayan kategoriler gizlenmiyor, işaretleniyor.

   Gizlemek ızgarayı yarım bırakıyordu ve kullanıcı katalogun kapsamını
   göremiyordu. Ama tıklanabilir bırakmak da "Sonuç bulunamadı" ekranına
   götürüyordu.

   Bunlar `<span>` olarak çiziliyor — bağlantı değil, tıklanamaz.
*/
.pa-cat-box.is-soon {
    cursor: default;
    background: var(--pa-surface-2);
    border-style: dashed;
}
.pa-cat-box.is-soon:hover { border-color: var(--pa-border); box-shadow: none; }

/* Görsel soluk: dolu kategorilerden ayrılsın */
.pa-cat-box.is-soon .pa-cat-box-media img { opacity: .45; filter: grayscale(.35); }
.pa-cat-box.is-soon .pa-cat-box-name { color: var(--pa-muted); }

.pa-cat-box-soon {
    position: absolute;
    top: var(--pa-space-2);
    right: var(--pa-space-2);
    padding: 2px var(--pa-space-2);
    border-radius: var(--pa-radius-pill);
    background: var(--pa-navy-050);
    font-size: var(--pa-text-xs);
    font-weight: var(--pa-weight-semibold);
    color: var(--pa-muted);
}


/* ==========================================================================
   KART UZERINDEKI EN UCUZ TEKLIF

   Karta kim, kaca ve ne zaman bilgisini getiren satir. Fiyatin hemen
   altinda, dugmelerin hemen ustunde: kullanici rakami gorur, kimden
   geldigini gorur, sonra karar verir.
   ========================================================================== */

.pa-part-offer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: var(--pa-space-2) 0;
    padding: var(--pa-space-2);
    border-radius: var(--pa-radius-sm);
    background: var(--pa-surface-2);
    font-size: var(--pa-text-xs);
    line-height: 1.35;
}

.pa-part-offer-seller {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-weight: var(--pa-weight-semibold);
    color: var(--pa-text);
    /* Uzun satici adi karti genisletmesin */
    min-width: 0;
    overflow-wrap: anywhere;
}

.pa-part-offer-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: var(--pa-weight-normal);
    color: var(--pa-muted);
    white-space: nowrap;
}

.pa-part-offer-rating .bi-star-fill { color: var(--pa-amber); font-size: 10px; }

.pa-part-offer-count { color: var(--pa-muted-2); }

.pa-part-offer-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    color: var(--pa-muted);
}

.pa-part-offer-terms .bi { font-size: 10px; }

/* Cikis baglantisi ikincil kalsin: varsayilan yol karsilastirma */
.pa-part-offer-go { margin-top: 6px; }

/* ==========================================================================
   ONE CIKAN KARSILASTIRMA

   Bir urun, satici teklifleri ve fiyat egrisi yan yana. Bolumun adi
   "karsilastir" ve artik gercekten karsilastirma gosteriyor.
   ========================================================================== */

.pa-spotlight {
    display: grid;
    gap: var(--pa-space-4);
    margin-bottom: var(--pa-space-4);
    padding: var(--pa-space-4);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-lg);
    background: #fff;
}

@media (min-width: 992px) {
    /* Orta sutun en genis: asil is teklif listesinde */
    .pa-spotlight { grid-template-columns: 240px minmax(0, 1fr) 280px; align-items: start; }
}

/* -- Sol: urun -- */
.pa-spotlight-part { display: flex; flex-direction: column; gap: 2px; }
.pa-spotlight-media {
    display: grid;
    place-items: center;
    margin-bottom: var(--pa-space-2);
    padding: var(--pa-space-3);
    border-radius: var(--pa-radius-md);
    background: var(--pa-surface-2);
}
.pa-spotlight-media img { max-width: 100%; max-height: 140px; object-fit: contain; }
.pa-spotlight-brand {
    font-size: var(--pa-text-xs);
    font-weight: var(--pa-weight-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pa-navy-800);
}
.pa-spotlight-title { margin: 0; font-size: var(--pa-text-md); }
.pa-spotlight-title a { color: var(--pa-text); text-decoration: none; }
.pa-spotlight-title a:hover { color: var(--pa-orange-700); }
.pa-spotlight-code { margin: 0; font-size: var(--pa-text-xs); color: var(--pa-muted); }
.pa-spotlight-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--pa-space-2); }

/* -- Orta: teklifler -- */
.pa-spotlight-offers-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pa-space-2);
    margin-bottom: var(--pa-space-3);
    padding-bottom: var(--pa-space-2);
    border-bottom: 1px solid var(--pa-line);
}

.pa-offer-rows { display: grid; gap: var(--pa-space-2); margin: 0; padding: 0; list-style: none; }

.pa-offer-row {
    display: grid;
    gap: 2px var(--pa-space-3);
    align-items: center;
    padding: var(--pa-space-3);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-md);
}

@media (min-width: 768px) {
    /* satici | kosullar | fiyat | dugme */
    .pa-offer-row { grid-template-columns: minmax(0, 1fr) auto auto auto; }
}

.pa-offer-row-seller { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pa-offer-row-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--pa-text-xs);
    color: var(--pa-muted);
}
.pa-offer-row-rating .bi-star-fill { color: var(--pa-amber); font-size: 10px; }

.pa-offer-row-terms {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--pa-text-xs);
    color: var(--pa-muted);
}
.pa-offer-row-free { color: var(--pa-success); }

.pa-offer-row-price {
    font-size: var(--pa-text-md);
    font-weight: var(--pa-weight-bold);
    color: var(--pa-orange-700);
    white-space: nowrap;
}

.pa-spotlight-more { display: inline-block; margin-top: var(--pa-space-3); font-size: var(--pa-text-sm); }

/* -- Sag: fiyat gecmisi -- */
.pa-spotlight-chart { display: grid; place-items: center; padding: var(--pa-space-2) 0; }
.pa-spotlight-chart svg { width: 100%; height: auto; }

.pa-spotlight-low {
    display: flex;
    align-items: center;
    gap: var(--pa-space-3);
    margin-top: var(--pa-space-3);
    padding: var(--pa-space-3);
    border-radius: var(--pa-radius-md);
    background: var(--pa-success-050);
    color: var(--pa-navy-900);
}
.pa-spotlight-low .bi { color: var(--pa-success); font-size: 18px; }
.pa-spotlight-low span { display: block; font-size: var(--pa-text-xs); color: var(--pa-muted); }
.pa-spotlight-low strong { font-size: var(--pa-text-md); }