/* ---------------------------------------------------------------------------
   MODELLER KATALOĞU

   Palet, tipografi, üst bar, altbilgi ve butonlar anasayfa.css'ten geliyor;
   burada yalnızca kataloğa özel olanlar var.

   Düzen referans alınan çalışmadaki katalog sayfasından: çok büyük bir başlık,
   altında üç sütunlu ızgara, her kartın üstünde ince bir ayraç çizgisi, görsel
   ve altında ad + ölçü + renk noktaları.

   Referanstaki süzgeç çipleri (Tümü / Koleksiyon / Yüzey / Uygulama / Renk)
   bilinçli olarak YOK — istenmedi, ve zaten süzülecek bir şey de yok: üretim
   tek malzemede (lake) ve şu an üç model var. Model sayısı arttığında buraya
   arama eklenebilir; çip süzgeci ancak gerçek bir ayrım (ör. desen ailesi)
   ortaya çıkarsa anlamlı olur.
--------------------------------------------------------------------------- */

/* Üst bar her sayfada AYNI (bkz. anasayfa.css .ust) — burada rengine
   dokunulmuyor. Yalnızca sayfanın kendi zemini ve menüdeki aktif sayfa
   işareti tanımlanıyor. */
.ic-sayfa { background: var(--kagit); }
.ic-sayfa .menu a.etkin { border-bottom: 1px solid var(--lacivert); }
/* Üst bar sabit (position: fixed) — içerik onun altından başlasın. */
.ic-sayfa main { padding-top: var(--bar-y); }

/* ===================== Sayfa başı ===================== */
.katalog-basi {
    padding-top: clamp(36px, 4.5vw, 68px);
    padding-bottom: clamp(24px, 3vw, 40px);
}
.katalog-basi h1 {
    margin: 10px 0 14px;
    font-size: clamp(44px, 7.5vw, 104px);
    line-height: 0.86;
    letter-spacing: -0.045em;
    font-weight: 600;
}
.katalog-alt-basi {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    max-width: 62ch;
}
.katalog-basi p {
    margin: 0;
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.6;
    color: rgba(21, 21, 21, 0.68);
}
#katalog-sayi {
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--indigo);
    white-space: nowrap;
}

/* Izgarayı taşıyan .bolum'un 152px'e varan dikey dolgusu burada gereksiz:
   üstteki başlık bölümü zaten kendi boşluğunu veriyor ve o dolgu yüzünden
   kartların ilk satırı ekranın altına taşıyordu (ölçüldü: ızgara 575px'ten
   başlıyor, kart 596px, yani 1000px'lik ekranda kart bitmiyordu). */
.katalog-izgara-bolum { padding-top: 0; padding-bottom: 0; }

/* ===================== Izgara ===================== */
.katalog-izgara {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Satır aralığı sütun aralığından belirgin şekilde geniş: kartlar satır
       satır okunsun, tek bir gri blok gibi görünmesin. */
    gap: clamp(40px, 4.5vw, 64px) clamp(16px, 2.4vw, 32px);
    padding-bottom: clamp(56px, 7vw, 104px);
}
.katalog-kart {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Referanstaki ince ayraç: her kart kendi üstünde bir çizgi taşıyor. */
    border-top: 1px solid var(--cizgi);
    padding-top: 18px;
}

.katalog-gorsel {
    display: block;
    /* Görsel MUTLAK konumlanıyor (aşağıya bak) — kapsayıcı referans olmalı. */
    position: relative;
    /* Kutu, kapağın TAMAMI görünsün diye kurulu. Önceden object-fit:cover ve
       4/5 oran vardı: kapak fotoğrafları dar ve uzun (409x663) olduğu için
       yanlardan kırpılıyor, ekranda kapağın ortası dışında bir şey
       kalmıyordu. Artık görsel kutuya SIĞDIRILIYOR (contain) ve beyaz ürün
       zemini modelin formunu dikkat dağıtmadan öne çıkarıyor.
       max-height: geniş ekranda kart yüksekliği ekranı yutmasın — kartın
       tamamı, adı ve renk noktaları dahil, tek ekranda okunabilsin. */
    aspect-ratio: 3 / 4;
    max-height: min(46vh, 440px);
    overflow: hidden;
    background: #fff;
}
.katalog-gorsel img {
    /* MUTLAK konum + inset:0 — böylece %100 genişlik/yükseklik KESİN bir
       kapsayıcıya göre çözülüyor. Akış içinde denendiğinde (grid öğesi olarak)
       yüzdeli ölçüler beklendiği gibi çözülmüyordu: önce height:76% ile görsel
       kutudan 19px, sonra height:100% ile 226px taşıp alttan kırpılıyordu
       (ikisi de ölçüldü).

       Kapağın etrafındaki nefes payı görselin KENDİ dolgusundan geliyor:
       box-sizing border-box olduğu için dolgu içerik kutusunu daraltıyor ve
       object-fit: contain kapağı o daraltılmış alana sığdırıyor. Sonuç:
       kapağın tamamı her zaman görünür, hiçbir ölçüde kırpılmaz. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: clamp(20px, 7%, 48px);
    object-fit: contain;
    /* Zeminden hafifçe ayrılsın — düz bir yapıştırma gibi durmasın. */
    filter: drop-shadow(0 18px 28px rgba(37, 35, 33, 0.18));
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.katalog-gorsel:hover img { transform: scale(1.045); }

.katalog-alt { display: flex; flex-direction: column; gap: 10px; }
.katalog-bas {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}
.katalog-bas h2 {
    margin: 0;
    font-size: clamp(19px, 2vw, 26px);
    font-weight: 500;
    letter-spacing: -0.035em;
}
.katalog-olcu {
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--celik);
    white-space: nowrap;
}
.katalog-aciklama {
    margin: 0;
    font-size: 13px;
    color: rgba(21, 21, 21, 0.62);
}

/* Renk noktaları: her biri konfigüratörü O RENKLE açan gerçek bir bağlantı,
   dekor değil. */
.katalog-noktalar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}
.katalog-nokta {
    width: 22px; height: 22px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(37, 35, 33, 0.28);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.katalog-nokta:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(37, 35, 33, 0.28), 0 0 0 2px var(--kagit), 0 0 0 4px var(--indigo);
}
.katalog-tumu {
    margin-left: 6px;
    font-size: 12px;
    color: var(--indigo);
    border-bottom: 1px solid transparent;
    transition: border-color 0.16s ease;
}
.katalog-tumu:hover { border-bottom-color: var(--indigo); }

@media (max-width: 980px) {
    .katalog-izgara { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .katalog-izgara { grid-template-columns: 1fr; }
}