/* =============================================================================
   Vitrin (kv-*) — anasayfa Kategori Vitrini + /kategoriler sayfası
   Font ve renkler SİSTEMDEN: font miras (seçili font çifti; başlıklar h2/h3 → başlık fontu), renkler tema
   token'ları (--accent, --text, --muted, --bg, --surface). Ana hap = sistemin birincil butonu (.btn-primary).
   ========================================================================== */

/* ── Site geneli ortak bölüm başlığı — başka bölüm ve sayfalar da kullanır (bolumler.css, ic-sayfa.css,
      Corporate/*, Blog, Ürün detayı…). Vitrin artık bunları kullanmıyor; DOKUNMADAN bırakın. ── */
.kv-kap { width: auto; margin-inline: var(--kenar); }   /* header ile aynı hiza (header-hero.css → --kenar) */
.kv-ust { max-width: 720px; margin: 0 auto; text-align: center; }
.kv-etiket { margin: 0 0 10px; font-size: 16px; line-height: 1.6; font-weight: 500; color: var(--accent); }
.kv-baslik { margin: 0; font-size: clamp(26px, 1.6vw + 13px, 36px); line-height: 1.15; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.kv-aciklama { margin: 14px auto 0; max-width: 600px; font-size: 18px; line-height: 1.6; color: var(--muted); }

/* ── Vitrin bölümü: SİYAH zemin (--text), içerik header ile aynı hizada (--kenar; solda logo, sağda Talep Formu).
      Üstte başlık satırı, altında ince çizgili (beyazın %14'ü) aralıksız ızgara; dış kenarlar da çizgili → kapalı çerçeve.
      Eski sol dikey etiket sütunu (.kv-kenar) KALDIRILDI; etiket artık başlığın üstünde küçük üst yazı. ── */
/* site.css'teki genel `section { padding: 5rem 0 }` burada kendi değerleriyle ezilir; sonraki bölümle geçiş
   bolumler.css → "Bölüm geçişleri". */
.kv {
    --kv-cizgi: rgba(255, 255, 255, .14);
    --kv-soluk: rgba(255, 255, 255, .62);
    position: relative; margin-top: 0; padding: clamp(56px, 5vw, 88px) 0; background: var(--text); color: #fff;
}
.kv-cerceve { margin-inline: var(--kenar); }
.kv-govde { min-width: 0; }

/* Başlık satırı: solda üst yazı + büyük başlık (+ kısa açıklama), sağda alta hizalı "Tümü" linki (ve karuselde oklar) */
.kv-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; padding: 0 0 36px; }
.kv-bas-metin { min-width: 0; }
.kv-bas-etiket {
    display: block; margin: 0 0 16px; font-size: 11px; line-height: 1.2; font-weight: 500; letter-spacing: .25em;
    text-transform: uppercase; color: var(--kv-soluk);
}
.kv-bas-baslik {
    margin: 0; font-size: clamp(2rem, 4.2vw, 4.25rem); line-height: .9; font-weight: 700; letter-spacing: -.03em;
    text-transform: uppercase; color: #fff; overflow-wrap: break-word;
}
.kv-bas-baslik--orta { font-size: clamp(1.75rem, 3vw, 3rem); }
.kv-bas-aciklama { margin: 18px 0 0; max-width: 560px; font-size: 14px; line-height: 1.6; color: var(--kv-soluk); }
.kv-bas-sag { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.kv-bas-link {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px;
    font-size: 11px; line-height: 1.2; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; color: var(--kv-soluk);
}
.kv-bas-sag .kv-bas-link { margin-bottom: 0; }
.kv-bas-link svg { width: 14px; height: 14px; transition: transform .2s ease; }
.kv-bas-link:hover, .kv-bas-link:focus-visible { color: #fff; opacity: 1; }
.kv-bas-link:hover svg { transform: translateX(3px); }

/* Izgara: 12 sütun; hücre genişliği VitrinYerlesim'den (kv-k3/4/5/7/12 — satırlar 7+5 / 4+4+4 / 3+4+5) */
.kv-kartlar {
    list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    border-top: 1px solid var(--kv-cizgi); border-left: 1px solid var(--kv-cizgi);
}
.kv-hucre { min-width: 0; border-right: 1px solid var(--kv-cizgi); border-bottom: 1px solid var(--kv-cizgi); }
.kv-k3 { grid-column: span 3; }
.kv-k4 { grid-column: span 4; }
.kv-k5 { grid-column: span 5; }
.kv-k7 { grid-column: span 7; }
.kv-k12 { grid-column: 1 / -1; }

/* Kart: görsel KENDİ RENGİYLE kartın zemini (beyaz perde / gri filtre yok); yalnız alt kısımda yazının okunması için
   koyu geçiş. Üstte numara; altta büyük harfli ad + 2 satır açıklama; bağlantı metni ("Kategoriye göz at") açıklamanın
   ALTINDA, üzerine gelince açılır. Üzerine gelince: görsel hafif büyür + ışık bandı alttan yukarı süpürür (::after). */
.kv-kart {
    position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
    gap: 24px; height: 100%; min-height: 340px; padding: 40px; color: #fff; text-decoration: none;
    background: color-mix(in srgb, #fff 6%, var(--text));
}
a.kv-kart:hover, a.kv-kart:focus-visible { color: #fff; opacity: 1; }
a.kv-kart:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kv-kart-gorsel { position: absolute; inset: 0; z-index: -2; }
.kv-kart-gorsel picture { display: block; width: 100%; height: 100%; }
.kv-kart-gorsel img {
    display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1);
    transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}
a.kv-kart:hover .kv-kart-gorsel img, a.kv-kart:focus-visible .kv-kart-gorsel img { transform: scale(1.045); }
/* Alt okunurluk geçişi (görselin rengi üstte olduğu gibi kalır) */
.kv-kart::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(0deg, color-mix(in srgb, var(--text) 74%, transparent) 0%, color-mix(in srgb, var(--text) 38%, transparent) 34%, transparent 64%);
    transition: opacity .4s ease;
}
.kv-kart:not(:has(.kv-kart-gorsel))::before { display: none; }
/* Işık bandı: iki katman (geniş-soluk + dar-parlak), overlay karışımıyla görselin üstünden alttan yukarı geçer
   (1.2 sn, ease-out). Fare çıkınca geçişsiz başa döner → her üzerine gelişte yeniden parlar. */
.kv-kart::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: overlay;
    background:
        linear-gradient(176deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 75%),
        linear-gradient(176deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 33%, rgba(255, 255, 255, .3) 66%, rgba(255, 255, 255, 0) 100%);
    transform: translateY(105%); transition: none;
}
a.kv-kart:hover::after, a.kv-kart:focus-visible::after { transform: translateY(-105%); transition: transform 1.2s cubic-bezier(.33, 1, .68, 1); }

.kv-kart-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 14px; }
.kv-no { font-size: 10px; line-height: 1; font-weight: 500; letter-spacing: .25em; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }

.kv-kart-alt { min-width: 0; }
.kv-ad {
    margin: 0; font-size: clamp(20px, .9vw + 14px, 30px); line-height: .95; font-weight: 700; letter-spacing: -.02em;
    text-transform: uppercase; color: inherit; overflow-wrap: break-word; text-shadow: 0 1px 14px rgba(0, 0, 0, .3);
}
.kv-kart-aciklama {
    margin: 10px 0 0; max-width: 340px; font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .82);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* "Kategoriye göz at": açıklamanın altında; kapalıyken yer kaplamaz (0fr), üzerine gelince açılır (metin yukarı kayar) */
.kv-git-kap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.4, 0, .2, 1); }
.kv-git-kap > .kv-git { min-height: 0; overflow: hidden; }
a.kv-kart:hover .kv-git-kap, a.kv-kart:focus-visible .kv-git-kap { grid-template-rows: 1fr; }
.kv-git {
    display: inline-flex; align-items: center; gap: 6px; font-size: 10px; line-height: 1; font-weight: 600; letter-spacing: .2em;
    text-transform: uppercase; color: color-mix(in srgb, var(--accent) 55%, #fff);
    opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .35s ease;
}
.kv-git-kap > .kv-git { padding-top: 16px; }
.kv-git svg { width: 13px; height: 13px; }
a.kv-kart:hover .kv-git, a.kv-kart:focus-visible .kv-git { opacity: 1; transform: none; }

/* Son kutu (ızgaranın son hücresi): SİYAH zemin, başlık + metin, süzülen imleçli haplar; ana hap = buton; en altta
   logo renklerinden bant (site.css → --logo-bant).
   --kv-pad: iç boşluk; kenardaki haplar buna göre konumlanıp kutunun kenarından taşar (kesik görünür). */
.kv-kutu {
    --kv-pad: 40px;
    position: relative; height: 100%; min-height: 340px; overflow: hidden; display: flex; flex-direction: column;
    padding: var(--kv-pad) var(--kv-pad) calc(var(--kv-pad) + 12px); background: var(--text); color: #fff;
}
.kv-kutu::after {
    content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 12px; pointer-events: none;
    background: var(--logo-bant);
}
.kv-kutu-baslik {
    margin: 0; font-size: clamp(20px, .9vw + 14px, 30px); line-height: .95; font-weight: 700; letter-spacing: -.02em;
    text-transform: uppercase; color: #fff;
}
.kv-kutu-metin { margin: 10px 0 0; max-width: 300px; font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .62); }
.kv-sahne { position: relative; flex: 1 1 auto; min-height: 180px; margin-top: 8px; }
/* İmleç iki katmanla hareket eder: süzülme (animation → transform) + mouse takibi (translate). Ayrı özellikler
   olduğundan birbirini ezmez. site.js kutuya --kv-mx / --kv-my yazar (-1…1, mouse kutunun neresinde);
   --kv-d / --kv-dy = mouse'la gidilen en fazla yatay / dikey mesafe (px). Farklı derinlik + gecikme → paralaks. */
.kv-imlec {
    --kv-d: 18; --kv-dy: calc(var(--kv-d) * .5);
    position: absolute; display: inline-flex; align-items: flex-start; will-change: transform, translate;
    translate: calc(var(--kv-mx, 0) * var(--kv-d) * 1px) calc(var(--kv-my, 0) * var(--kv-dy) * 1px);
    transition: translate .9s cubic-bezier(.22, .61, .36, 1);
}
.kv-imlec svg { flex-shrink: 0; color: var(--accent); filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--accent) 40%, transparent)); }
.kv-imlec--ana { z-index: 2; left: calc(50% - 64px); top: 16%; animation: kv-suzul 7s ease-in-out infinite; --kv-d: 8; transition-duration: .6s; }
.kv-imlec--ana svg { width: 25px; height: 28px; margin-top: -6px; }
.kv-imlec--sol { left: calc(1px - var(--kv-pad)); bottom: 6%; animation: kv-suzul 8.5s ease-in-out -3s infinite reverse; --kv-d: 22; transition-duration: 1.05s; }
.kv-imlec--sag { right: calc(-7px - var(--kv-pad)); bottom: 2%; animation: kv-suzul 6.5s ease-in-out -1.5s infinite; --kv-d: 26; transition-duration: .95s; }
/* Sol orta: alttaki sol hapın üstü, ana butonun solu */
.kv-imlec--sol2 { left: calc(3px - var(--kv-pad)); top: 40%; animation: kv-suzul 9.5s ease-in-out -5s infinite; --kv-d: 16; transition-duration: 1.2s; }
/* Sağ üst: kutuya göre (başlığın hizası). Altındaki metne inmesin diye dikey hareketi küçük */
.kv-imlec--sag2 { right: -24px; top: calc(var(--kv-pad) - 12px); animation: kv-suzul-yatay 7.5s ease-in-out -4s infinite; --kv-d: 20; --kv-dy: 3; transition-duration: .8s; }
.kv-imlec--sol svg, .kv-imlec--sag svg, .kv-imlec--sol2 svg, .kv-imlec--sag2 svg { width: 17px; height: 19px; margin-top: -4px; opacity: .85; }
.kv-imlec--sol2 svg { color: #fff; filter: drop-shadow(0 2px 6px rgba(255, 255, 255, .25)); }
.kv-hap { display: inline-flex; align-items: center; white-space: nowrap; border-radius: 999px; line-height: 1; }
.kv-hap--ana.btn {
    margin: 16px 0 0 -4px; padding: 9px 20px; font-size: 16px; font-weight: 500; border-radius: 999px;
    box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
    transition: box-shadow .25s ease, transform .25s ease;
}
.kv-hap--ana.btn:hover { box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 70%, transparent); transform: translateY(-1px); }
.kv-hap--yan { margin-top: 10px; padding: 7px 14px; font-size: 12px; color: #fff; }
.kv-imlec--sol .kv-hap--yan { background: color-mix(in srgb, var(--accent) 88%, #000); }
.kv-imlec--sag .kv-hap--yan { background: color-mix(in srgb, var(--accent) 72%, #fff); }
.kv-imlec--sol2 .kv-hap--yan { background: #fff; color: var(--text); }
.kv-imlec--sag2 .kv-hap--yan { background: color-mix(in srgb, var(--accent) 90%, #fff); }
@keyframes kv-suzul {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-14px, 9px); }
    50%  { transform: translate(6px, 16px); }
    75%  { transform: translate(14px, -5px); }
    100% { transform: translate(0, 0); }
}
@keyframes kv-suzul-yatay {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-16px, 3px); }
    50%  { transform: translate(-4px, -3px); }
    75%  { transform: translate(10px, 3px); }
    100% { transform: translate(0, 0); }
}

/* ── İç sayfa vitrin bölümü — anasayfa vitriniyle aynı siyah zemin ve kart; breadcrumb'ın hemen ardından gelirse
   çentiğin altına girer (bolumler.css → "Bant birleşimleri").
   • /urunler ve /kategoriler: eşit 3'lü IZGARA (.kv-kartlar--uc; tablette/telefonda aşağıdaki 2 sütun kuralları).
   • Kategori tanıtım sayfasının alt / diğer kategorileri: KARUSEL (.kv-kr-iz; karusel.js data-karusel / data-karusel-oto). */
.kv--sayfa { padding: 64px 0 96px; }
.kv--sayfa + .kv--sayfa { padding-top: 0; }
.kv-kartlar--uc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* .kr-iz.kv-kr-iz: bolumler.css'teki .kr-iz (20px boşluk) bu dosyadan SONRA yüklenir → boşluk 0 için çift sınıf */
.kr-iz.kv-kr-iz {
    --kr-bosluk: 0px; --kr-gen: calc(100% / 3);
    border-top: 1px solid var(--kv-cizgi); border-left: 1px solid var(--kv-cizgi);
}
.kv-kr-iz > .kr-oge { display: flex; }
.kv-kr-iz > .kr-oge > .kv-kart { flex: 1 1 auto; }
.kv-kr-alt { display: flex; justify-content: flex-end; margin-top: 24px; }
.kv-kr-alt:not(:has(.kr-oklar)) { display: none; }
/* Karusel okları koyu zeminde (bolumler.css .kr-ok--acik) */

/* ═══ Duyarlılık ═══ */
@media (max-width: 1199.98px) {
    .kv-kart { min-height: 300px; padding: 28px; }
    .kv-kutu { --kv-pad: 28px; min-height: 300px; }
}
/* Tablet: 2 eşit sütun; tek kalan son hücre tam genişlik */
@media (max-width: 991.98px) {
    .kv-kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kv-k3, .kv-k4, .kv-k5, .kv-k7, .kv-k12 { grid-column: auto; }
    .kv-hucre:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .kv-kr-iz { --kr-gen: 50%; }
}
@media (max-width: 767.98px) {
    .kv { padding: 48px 0; }
    .kv-bas { flex-direction: column; align-items: flex-start; padding-bottom: 28px; }
    .kv-bas-link { margin-bottom: 0; }
    .kv-bas-sag { width: 100%; justify-content: space-between; }
}
/* Telefon: 2 sütun kompakt kart (açıklama ve bağlantı metni gizli); son kutu tam genişlikte, haplar görünür */
@media (max-width: 575.98px) {
    .kv--sayfa { padding: 40px 0 64px; }
    .kv-kr-iz { --kr-gen: 82%; }
    .kv-kart { min-height: 188px; padding: 16px; gap: 12px; }
    .kv-ad { font-size: 15px; line-height: 1.05; letter-spacing: -.01em; }
    .kv-kart-aciklama, .kv-git-kap { display: none; }
    .kv-no { font-size: 9px; }
    .kv-kutu { --kv-pad: 20px; min-height: 0; }
    .kv-kutu::after { height: 10px; }
    .kv-kutu-baslik { font-size: 20px; }
    .kv-sahne { min-height: 190px; }
    /* Karuselde kart geniş (ekranın %82'si) → açıklama sığar */
    .kv-kr-iz .kv-kart { min-height: 260px; padding: 22px; }
    .kv-kr-iz .kv-ad { font-size: 20px; }
    .kv-kr-iz .kv-kart-aciklama { display: -webkit-box; }
}
@media (pointer: coarse) {
    .kv-bas-link { padding-block: 6px; }
}
/* Dokunmatik: üzerine gelme yok → bağlantı metni baştan görünür (≥576; telefonda kart kompakt) */
@media (hover: none) {
    .kv-git-kap { grid-template-rows: 1fr; }
    .kv-git { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .kv-kart, .kv-kart-gorsel img, .kv-git, .kv-git-kap, .kv-bas-link svg, .kv-hap--ana.btn { transition: none; }
    .kv-kart::after { display: none; }
    a.kv-kart:hover .kv-kart-gorsel img { transform: none; }
    .kv-imlec { animation: none; translate: none; transition: none; }
}