/* =============================================================================
   Kategori TANITIM sayfası (kt-*) — /kategori/{slug}, Site Ayarları → "Kategori sayfası: tanıtım sayfası" açıkken.
   YALNIZ bu sayfada yüklenir (Views/KategoriTanitim/Index.cshtml → @section Styles).
   Galeri ve iki kolon ürün detayının stillerini KULLANIR (.ud / .ud-galeri / .ud-bilgi — ic-sayfa.css, değiştirilmez);
   kartlar vitrin kartıdır (.kv-kart, .kv-kartlar--uc — vitrin.css). Burada yalnız tanıtıma özgü parçalar var.
   Font ve renkler SİSTEMDEN (--text, --muted, --accent, --surface, --border, --bg); WhatsApp yeşili = sitedeki
   yüzen WhatsApp butonunun rengi.
   ========================================================================== */

/* Görsel yoksa bilgi kolonu tek başına, okunur genişlikte */
.kt-ust--tek { grid-template-columns: minmax(0, 1fr); max-width: 860px; }

.kt-kisa { margin: 0; font-size: 18px; line-height: 1.65; color: var(--muted); }

/* İletişim kutuları: tek kart, iki bölüm (WhatsApp / Talep Formu) arasında ince çizgi */
.kt-iletisim {
    margin-top: 6px; padding: 4px 28px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.kt-kutu { padding: 24px 0; }
.kt-kutu + .kt-kutu { border-top: 1px solid var(--border); }
.kt-kutu-baslik { margin: 0; font-size: clamp(19px, .5vw + 15px, 22px); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.kt-kutu-metin { margin: 6px 0 18px; max-width: 460px; font-size: 15px; line-height: 1.6; color: var(--muted); }

.kt-buton {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: min(100%, 340px);
    padding: 16px 28px; font-size: 17px; font-weight: 600; line-height: 1.1; text-decoration: none; border-radius: 999px;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.kt-buton svg { width: 20px; height: 20px; flex-shrink: 0; }
.kt-buton i { font-size: 18px; line-height: 1; }
.kt-buton--wa { color: #fff; background: #25d366; box-shadow: 0 8px 20px -10px rgba(37, 211, 102, .7); }
.kt-buton--wa:hover, .kt-buton--wa:focus-visible { color: #fff; background: #1fbd5a; transform: translateY(-1px); }
.kt-buton--talep { color: var(--text); background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--text) 14%, transparent); }
.kt-buton--talep:hover, .kt-buton--talep:focus-visible { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.kt-buton:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Uzun açıklama (editör içeriği) — iletişim kutularının altında, ince çizgiyle ayrılır */
.kt-uzun { margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--border); }

/* Alt / diğer kategoriler: vitrin kartları (.kv-kartlar--uc) — çizgi rengi .kv dışında da tanımlı olmalı */
.kt-liste { --kv-cizgi: color-mix(in srgb, var(--text) 10%, transparent); }
.kt-liste-ust { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 32px; }
.kt-liste-ust .kv-ust { margin: 0; }
.kt-tumu {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 11px; line-height: 1.2; font-weight: 500;
    letter-spacing: .25em; text-transform: uppercase; color: var(--muted); text-decoration: none;
}
.kt-tumu svg { width: 14px; height: 14px; transition: transform .2s ease; }
.kt-tumu:hover, .kt-tumu:focus-visible { color: var(--text); }
.kt-tumu:hover svg { transform: translateX(3px); }

/* ═══ Duyarlılık ═══ */
@media (max-width: 575.98px) {
    .kt-kisa { font-size: 16px; }
    .kt-iletisim { padding: 2px 18px; border-radius: 16px; }
    .kt-kutu { padding: 20px 0; }
    .kt-buton { width: 100%; padding: 15px 20px; font-size: 16px; }
    .kt-liste-ust { margin-bottom: 22px; }
}
@media (pointer: coarse) {
    .kt-tumu { padding-block: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .kt-buton, .kt-tumu svg { transition: none; }
    .kt-buton:hover { transform: none; }
}