/* =============================================================================
   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: min(1354px, 94%); margin-inline: auto; }
.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 çerçevesi: üstte tam çizgi; solda 1/12 dikey etiket sütunu, sağda 11/12 gövde (başlık + ızgara).
      İç çizgiler metin renginin %10'u; hücreler aralıksız, her hücrenin sağ ve alt çizgisi var. ── */
/* Boşluk YOK (site.css'teki genel `section { padding: 5rem 0 }` burada ezilir): çizgi bölümün en üstünde, ızgara en altta;
   sonraki bölümle geçiş bolumler.css → "Bölüm geçişleri". */
.kv {
    --kv-cizgi: color-mix(in srgb, var(--text) 10%, transparent);
    position: relative; margin-top: 0; padding: 0; background: var(--bg); color: var(--text); border-top: 1px solid var(--kv-cizgi);
}
.kv-cerceve { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 11fr); }
.kv-kenar { display: flex; justify-content: center; align-items: flex-start; padding-top: 40px; border-right: 1px solid var(--kv-cizgi); }
.kv-dikey {
    writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
    font-size: 10px; line-height: 1; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; color: var(--muted);
}
.kv-govde { min-width: 0; }

/* Başlık satırı: solda büyük başlık (+ kısa açıklama), sağda alta hizalı "Tümü" linki */
.kv-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; padding: 32px 48px; border-bottom: 1px solid var(--kv-cizgi); }
.kv-bas-metin { min-width: 0; }
.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: var(--text); overflow-wrap: break-word;
}
.kv-bas-aciklama { margin: 18px 0 0; max-width: 560px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.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(--muted);
}
.kv-bas-link svg { width: 14px; height: 14px; transition: transform .2s ease; }
.kv-bas-link:hover, .kv-bas-link:focus-visible { color: var(--text); }
.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)); }
.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 zemin (gri, %20) → üzerine gelince renkler tersine döner (zemin metin rengi, yazı zemin rengi),
   görsel renklenir. Üstte numara + (hover'da) bağlantı metni, altta büyük harfli ad + 2 satır açıklama. */
.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: var(--text); text-decoration: none;
    transition: background-color .35s cubic-bezier(.4, 0, .2, 1), color .3s cubic-bezier(.4, 0, .2, 1);
}
a.kv-kart:hover, a.kv-kart:focus-visible { background: var(--text); color: var(--bg);opacity:1; }
a.kv-kart:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kv-kart-gorsel { position: absolute; inset: 0; z-index: -1; }
.kv-kart-gorsel picture { display: block; width: 100%; height: 100%; }
.kv-kart-gorsel img {
    display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .2;
    transition: filter .5s ease-out, opacity .5s ease-out;
}
a.kv-kart:hover .kv-kart-gorsel img, a.kv-kart:focus-visible .kv-kart-gorsel img { filter: grayscale(0); opacity: .35; }

.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: var(--muted); transition: color .3s ease; }
a.kv-kart:hover .kv-no, a.kv-kart:focus-visible .kv-no { color: color-mix(in srgb, var(--bg) 60%, transparent); }
.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) 75%, var(--bg));
    opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .3s ease;
}
.kv-git svg { width: 13px; height: 13px; }
a.kv-kart:hover .kv-git, a.kv-kart:focus-visible .kv-git { opacity: 1; transform: none; }

.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;
}
.kv-kart-aciklama {
    margin: 10px 0 0; max-width: 320px; font-size: 12px; line-height: 1.6; color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .3s ease;
}
a.kv-kart:hover .kv-kart-aciklama, a.kv-kart:focus-visible .kv-kart-aciklama { color: inherit; }

/* Son kutu (ızgaranın son hücresi): başlık + metin, süzülen imleçli haplar; ana hap = buton.
   --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);
}
.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: var(--text);
}
.kv-kutu-metin { margin: 10px 0 0; max-width: 300px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.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: var(--text); filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--text) 30%, transparent)); }
.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) 82%, #000); }
.kv-imlec--sag .kv-hap--yan { background: color-mix(in srgb, var(--accent) 72%, #fff); }
.kv-imlec--sol2 .kv-hap--yan { background: var(--text); color: var(--surface); }
.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); }
}

/* /kategoriler ve /urunler iç sayfası: anasayfa çerçevesi YOK (dikey etiket, başlık satırı yok) — breadcrumb altında,
   içerik alanında (.kv-kap) eşit 3'lü ızgara; dış kenarlar da çizgili, ızgara kapalı kutu gibi durur.
   Tablette ve telefonda aşağıdaki 2 sütun kuralları geçerli (bu kuraldan sonra geldikleri için). */
.kv--sayfa { border-top: 0; padding: 56px 0 96px; }
.kv-kartlar--uc { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--kv-cizgi); border-left: 1px solid var(--kv-cizgi); }

/* ═══ Duyarlılık ═══ */
@media (max-width: 1199.98px) {
    .kv-bas { padding: 28px 32px; }
    .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; }
}
@media (max-width: 767.98px) {
    .kv-cerceve { grid-template-columns: minmax(0, 1fr); }
    .kv-kenar { display: none; }
    .kv-bas { flex-direction: column; align-items: flex-start; padding: 24px 20px; }
    .kv-bas-link { margin-bottom: 0; }
    /* Anasayfa ızgarası ekranın kenarına dayanır → sağ kenardaki hücrelerin çizgisi gereksiz (iç sayfa ızgarası kapalı kalır) */
    .kv-cerceve .kv-hucre:nth-child(2n) { border-right: 0; }
    .kv-cerceve .kv-hucre:last-child:nth-child(odd) { border-right: 0; }
}
/* 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: 32px 0 64px; }
    .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 { display: none; }
    .kv-no { font-size: 9px; }
    .kv-kutu { --kv-pad: 20px; min-height: 0; }
    .kv-kutu-baslik { font-size: 20px; }
    .kv-sahne { min-height: 190px; }
}
@media (pointer: coarse) {
    .kv-bas-link { padding-block: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .kv-kart, .kv-kart-gorsel img, .kv-no, .kv-git, .kv-kart-aciklama, .kv-bas-link svg, .kv-hap--ana.btn { transition: none; }
    .kv-imlec { animation: none; translate: none; transition: none; }
}