/* /categories/ — Kılıç Spot kategori sayfası (Yankare Medya, 2026-11-03).
   mg-theme.css değişkenlerini kullanır (--mg-ink, --mg-brand ...). Sadece .ksk altında geçerli. */

.ksk {
  --ksk-ink: var(--mg-ink, #16181d);
  --ksk-muted: var(--mg-muted, #5b6577);
  --ksk-brand: var(--mg-brand, #d92316);
  --ksk-brand-dark: var(--mg-brand-dark, #a3170d);
  --ksk-line: var(--mg-line, #e3e8ef);
  --ksk-bg: #f6f4f1;
  --ksk-ease: var(--mg-ease, cubic-bezier(.22, .8, .24, 1));
  --ksk-gut: clamp(16px, 4vw, 32px);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ksk-ink);
  background: #fff;
}
.ksk h1, .ksk h2, .ksk p, .ksk ul { margin: 0; padding: 0; }
.ksk ul { list-style: none; }
.ksk a { text-decoration: none; }
.ksk svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ksk :focus-visible { outline: 3px solid rgba(217, 35, 22, .45); outline-offset: 3px; border-radius: 12px; }

.ksk-wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--ksk-gut); box-sizing: border-box; }

/* ---- Üst bant ---- */
.ksk-hero {
  background: var(--ksk-bg);
  padding: clamp(36px, 6vw, 72px) 0 clamp(32px, 5vw, 56px);
  border-bottom: 1px solid var(--ksk-line);
}
.ksk-crumb { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--ksk-muted); margin-bottom: 18px; }
.ksk-crumb a { color: var(--ksk-muted) !important; }
.ksk-crumb a:hover { color: var(--ksk-brand) !important; }
.ksk-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ksk-brand); margin-bottom: 12px !important;
}
.ksk-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.ksk .ksk-title {
  font-family: inherit !important; font-size: clamp(28px, 4.2vw, 46px); font-weight: 800; line-height: 1.12;
  letter-spacing: -.02em; color: var(--ksk-ink) !important; max-width: 720px; text-transform: none;
}
.ksk-lead { margin-top: 14px !important; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; color: var(--ksk-muted); max-width: 600px; }

/* ---- Kartlar ---- */
.ksk-body { padding: clamp(32px, 5vw, 64px) 0 clamp(48px, 7vw, 88px); }
.ksk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(14px, 2vw, 24px); }
.ksk-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--ksk-line); border-radius: 18px; overflow: hidden;
  color: var(--ksk-ink) !important;
  box-shadow: 0 8px 22px rgba(22, 24, 29, .06);
  transition: transform .35s var(--ksk-ease), box-shadow .35s var(--ksk-ease), border-color .35s var(--ksk-ease);
}
.ksk-media {
  display: block; aspect-ratio: 4 / 3; background: var(--ksk-bg); overflow: hidden; position: relative;
}
.ksk-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ksk-ease); }
.ksk-media.is-empty, .ksk-media.is-all { display: flex; align-items: center; justify-content: center; }
.ksk-initial { font-size: 72px; font-weight: 800; color: rgba(217, 35, 22, .22); line-height: 1; }
.ksk-media.is-all { background: linear-gradient(135deg, #1f2937 0%, #16181d 100%); color: #fff; }
.ksk-media.is-all svg { width: 56px; height: 56px; stroke-width: 1.4; opacity: .9; }
.ksk-info { display: flex; flex-direction: column; gap: 4px; padding: 18px 64px 20px 20px; }
.ksk-name { font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.ksk-count { font-size: 14px; font-weight: 600; color: var(--ksk-muted); }
.ksk-arrow {
  position: absolute; right: 18px; bottom: 22px;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(217, 35, 22, .08); color: var(--ksk-brand);
  transition: background .3s var(--ksk-ease), color .3s var(--ksk-ease), transform .3s var(--ksk-ease);
}
.ksk-arrow svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .ksk-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(22, 24, 29, .12); border-color: rgba(217, 35, 22, .35); }
  .ksk-card:hover .ksk-media img { transform: scale(1.04); }
  .ksk-card:hover .ksk-arrow { background: var(--ksk-brand); color: #fff; transform: translateX(2px); }
}
.ksk-card:active { transform: scale(.99); }

.ksk-empty { text-align: center; padding: 40px 0; color: var(--ksk-muted); }
.ksk-empty p { margin-bottom: 16px !important; }

/* ---- Buton ---- */
.ksk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border-radius: 999px;
  font-weight: 800; font-size: 15px; white-space: nowrap;
  background: var(--ksk-brand); color: #fff !important; border: 1px solid var(--ksk-brand);
  transition: background .25s var(--ksk-ease), transform .15s ease;
}
.ksk-btn:hover { background: var(--ksk-brand-dark); border-color: var(--ksk-brand-dark); }
.ksk-btn:active { transform: scale(.97); }

@media (max-width: 575px) {
  .ksk-grid { grid-template-columns: 1fr; }
  .ksk-media { aspect-ratio: 16 / 10; }
  .ksk-media.is-all { aspect-ratio: 3 / 1; }
  .ksk-media.is-all svg { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .ksk-card, .ksk-media img, .ksk-arrow, .ksk-btn { transition: none; }
}