/*
 * Liste/vitrin urun karti - duzen sozlesmesi.
 *
 * NEDEN AYRI DOSYA (Tailwind utility'leri yerine): public/build icindeki
 * derlenmis CSS elle uretiliyor ve yenilenmiyor. Blade'e bugun yazilan YENI
 * bir utility derlenmis dosyada YOK ve sessizce etkisiz kaliyor. Kartin yeni
 * duzeni bu yuzden burada. Markup'ta zaten bulunan ve derlendigi dogrulanan
 * siniflar (kenarlik, arka plan, hover rengi) yerinde birakildi.
 *
 * NEDEN BU DUZEN: eski kart sabit yukseklikliydi (h-32) ve disinda
 * overflow-hidden vardi. Icerik 128 px'i asinca kart buyumuyor, kirpiliyordu:
 * baslik iki satira tasinca alttaki spec hucreleri kartin alt kenarindan
 * kesiliyordu. Spec kabindaki line-clamp-2 ise kabi IKI SATIRA indirdigi icin
 * bir hucre sarinca digeri tamamen dusuyordu. Sabit iki sutunlu flex satirlar
 * daralinca esnemedigi icin hucreler kelime kelime dikey yigina donuyordu.
 *
 * NEDEN REM (px degil): eski kart Tailwind sinifi kullaniyordu ve Tailwind'in
 * olculeri rem tabanli (text-sm .875rem, h-32 8rem). Sabit px'e cevrilince
 * tarayicinin varsayilan yazi tipi boyutunu buyuten kullanicida kart ve metin
 * oldugu gibi kaliyordu, yani kullanicinin ayari yok sayiliyordu. Butun
 * olculer rem, boylece kart kullanicinin olcegiyle birlikte buyur.
 *
 * Sozlesme:
 * - Sabit yukseklik YOK, yalnizca min-height. Icerik gerektirdiginde kart buyur.
 * - Uc sutun: gorsel (sabit KARE), icerik (esner, min-width 0), puan halkasi.
 * - BASLIK DA KIRPILMAZ. Adin ayirt edici parcasi sonda duruyor, satir
 *   kirpma tam o parcayi gizliyordu. Tam ad ayrica title niteliginde durur.
 * - Spec alani auto-fit izgara: yer varsa iki sutun, daralinca tek sutun.
 * - DEGER ASLA KIRPILMAZ. Sigmazsa sarar, kart buyur.
 *
 * Palet public/css/header-search.css ve category-filter.css ile ayni.
 */

:root {
    --pc-text: #374151;
    --pc-text-strong: #111827;
    --pc-text-muted: #6b7280;
    --pc-accent: #0284c7;
    --pc-media-bg: #f9fafb;

    /* Gorsel sutunu ve kartin taban yuksekligi (7.5rem = 120 px). */
    --pc-media: 7.5rem;
    --pc-min-height: 7.5rem;

    /* Spec hucresinin en dar hali: bunun altina dusunce izgara tek sutuna
       iner. 7.25rem = 116 px. */
    --pc-spec-min: 7.25rem;

    /* Spec izgarasinin sutun araligi. Sutun sayisi hesabina girdigi icin
       degisken: (kap + bosluk) / (hucre + bosluk). */
    --pc-spec-gap: 0.625rem;
}

/* ------------------------------------------------------------------ govde */

/*
 * Kart kabugu. Kenarlik, arka plan, hover ve kose yuvarlama markup'taki
 * mevcut Tailwind siniflarindan geliyor; burasi yalnizca duzeni kurar.
 * NEDEN flex: kart izgarada satir yuksekligine kadar gerilir, bag (<a>) ve
 * govde de o yuksekligi doldurur, yani gorsel sutunu bos kalmaz.
 */
.pc-card {
    display: flex;
    flex-direction: column;
}

.pc-card__link {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.pc-card__body {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: var(--pc-min-height);
    position: relative;
}

/* ----------------------------------------------------------------- gorsel */

/*
 * NEDEN KARE KUTU (aspect-ratio + align-self): kutu yalnizca GENISLIK aliyordu
 * ve .pc-card__body icindeki align-items: stretch onu kartin yuksekligine
 * kadar uzatiyordu. Kart min-height'i asinca kutu 128x137 gibi dikdortgene
 * donuyor, object-fit: cover da gorseli yatayda kesiyordu (olculdu: surf
 * casting listesinde 30 kartin 8'i). Eski kartta kutu her zaman kareydi
 * (w-32 icinde h-32). aspect-ratio kutuyu kare tutar, align-self: flex-start
 * kartin buyumesine ragmen uzamasini engeller.
 */
.pc-card__media {
    position: relative;
    flex: 0 0 var(--pc-media);
    align-self: flex-start;
    width: var(--pc-media);
    aspect-ratio: 1 / 1;
    background: var(--pc-media-bg);
    overflow: hidden;
}

.pc-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------- icerik */

/*
 * NEDEN min-width: 0: flex cocugunun varsayilan min-width'i auto'dur, yani
 * icerigin en uzun kelimesinden dar olamaz. Bu kural olmadan uzun bir spec
 * degeri sutunu itiyor ve kart tasiyor.
 */
.pc-card__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.375rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.625rem 0.75rem;
}

/*
 * Baslik. NEDEN KIRPMA YOK: urun adinin AYIRT EDICI kismi sonda duruyor
 * ("Shimano Tribal TX-Extreme Carp Spod & Marker 366 cm 115 - 170 gr" ile
 * ayni adin 396 cm'lik kardesi yalnizca son parcada ayriliyor). Satir
 * kirpma tam da o parcayi gizliyordu ve tam ad geriye yalnizca title
 * niteliginde kaliyordu, title ise dokunmatik cihazda hic gosterilmiyor.
 * Olculdu: katalogun en uzun adi (65 karakter) 768 ve 1024 px'te bes satir
 * istiyor, uc satir kirpmada scrollHeight 94 / clientHeight 56. Kart artik
 * buyuyebildigi icin satirlarin maliyeti yok, kesilen bilgi ise geri
 * gelmiyor. Spec degerindeki "kesme yok" kurali ile ayni gerekce.
 * NEDEN mb-4 yok: sabit 16 px dis bosluk yerine kapsayicinin gap'i
 * kullaniliyor, boylece baslik ile spec bloku arasindaki mesafe kartin
 * yuksekligine bagli degil.
 */
.pc-card__title {
    display: block;
    overflow: visible;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--pc-text-strong);
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* -------------------------------------------------------------- spec alani */

/*
 * NEDEN auto-fit: sabit iki sutun daralinca esnemiyordu. Burada hucre
 * --pc-spec-min'in altina dusecekse izgara kendiliginden tek sutuna iner,
 * hucre icerigi dikey yigina donmez.
 */
.pc-card__specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--pc-spec-min), 1fr));
    gap: 0.125rem var(--pc-spec-gap);
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--pc-text);
}

.pc-card__spec {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    min-width: 0;
}

/*
 * NEDEN etiket kuculebilir: eski kartta etiket flex-shrink-0 idi, uzun bir
 * etiket ("Maksimum Fren Gucu:") hucrenin tamamini yiyor ve degere yer
 * kalmiyordu. Artik once etiket sarar, deger butun halde kalir.
 */
.pc-card__label {
    flex: 0 1 auto;
    min-width: 0;
    color: var(--pc-text-muted);
    overflow-wrap: anywhere;
}

/*
 * Kisaltilmis etiketin tam adi (ornek: "Fren" yerine "Maksimum Fren Gucu").
 * NEDEN GORSEL OLARAK GIZLI: tam ad bugun yalnizca title niteligindeydi,
 * title ise dokunmatik cihazda hic gosterilmiyor ve etkilesimli olmayan bir
 * span uzerinde cogu ekran okuyucuda okunmuyor. Boylece kart gorunumu
 * degismeden tam ad okunabilir kalir. display: none KULLANILMAZ, o metni
 * ekran okuyuculardan da gizler.
 */
.pc-card__label-full {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * DEGER: kirpma yok, truncate yok, text-overflow yok. Sigmazsa sarar.
 * Sunucudaki Str::limit cagrilari da bu yuzden kaldirildi.
 */
.pc-card__value {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
    color: var(--pc-text);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ puan halkasi */

/*
 * Halkanin hesabi ve gorunumu degismedi; yalnizca yerlesimi buraya tasindi.
 * Alt yazi 0.75rem (eski text-xs) ve halka ile arasi 0.5rem (eski space-y-1
 * arti mt-1), yani eski olculer. Masaustunde sag sutun, mobilde gorselin
 * ustunde rozet.
 */
.pc-card__score {
    display: none;
}

.pc-card__badge {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    z-index: 1;
}

.pc-card__score-cap {
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.15;
    color: #4b5563;
}

/* ------------------------------------------------------------- arama karti */

/*
 * Arama sonucu karti farkli bir iskelet tasiyor (kendi izgarasi, p-3,
 * rounded-xl). Tek govdeye zorlanmadi; yalnizca ayni kesme-yok ve
 * sabit-yukseklik-yok kurallari uygulandi.
 */
.pc-card-plain {
    min-height: 8rem;
}

.pc-card-plain .pc-card__title {
    font-size: 1rem;
    font-weight: 600;
}

/*
 * NEDEN IZGARA DEGIL SATIR: arama sonucu karti sayfanin tam genisligini
 * kapliyor. auto-fit izgara bu genislikte hucreleri birbirinden cok
 * uzaklastiriyordu. Burada hucreler sola toplanip gerektiginde alt satira
 * sarar; kesme kurali ayni kalir.
 */
.pc-card-plain .pc-card__specs {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.125rem;
    row-gap: 0.125rem;
}

.pc-card-plain .pc-card__spec {
    flex: 0 1 auto;
    max-width: 100%;
}

/* --------------------------------------------------------------- hover */

.pc-card:hover .pc-card__title,
.pc-card:hover .pc-card__label,
.pc-card:hover .pc-card__value,
.pc-card-plain:hover .pc-card__title,
.pc-card-plain:hover .pc-card__label,
.pc-card-plain:hover .pc-card__value {
    color: var(--pc-accent);
}

/* ------------------------------------------------------------ masaustu */

@media (min-width: 768px) {
    :root {
        --pc-media: 8rem;
        --pc-min-height: 8rem;

        /*
         * NEDEN 7.125rem (114 px): masaustunde kartin spec kabi 1280 px'te
         * 239-253 px. Iki sutun icin 2 x hucre + 0.625rem bosluk gerekiyor,
         * yani 124 px'lik hucreyle 258 px isteniyordu ve 1280-1600 araliginda
         * izgara hep tek sutuna dusuyordu (olculdu: 1280 px'te "239px").
         * 114 px ile 239 px'te iki sutun cikiyor; uc sutun icin 372 px
         * gerektigi icin en genis olculen kapta (1920 px'te 339 px) hala iki
         * sutun kaliyor.
         */
        --pc-spec-min: 7.125rem;
    }

    .pc-card__badge {
        display: none;
    }

    .pc-card__score {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        flex: 0 0 auto;
        padding: 0.5rem;
        background: #ffffff;
    }
}