/* ============================================================
 * Sportal — Block Bileşen CSS'i (FAZ 3.b)
 * ------------------------------------------------------------
 * 4 block sınıfı (LoopBlock, SliderBlock, AdBlock, CustomHtmlBlock)
 * için 7 template'in stil katmanı. Tamamen --sportal-* token
 * alfabesinden besleniyor (Theme v2 uyumlu light/dark).
 *
 * YÜKLEME: public/assets/sportal/sportal-blocks.css
 *   Ana layout'tan link ile çekilir — F3.d Gökai deploy
 *   sırasında layout'a `<link rel="stylesheet" href="/assets/sportal/sportal-blocks.css?v=<mtime>">`
 *   eklenecek.
 *
 * SIRALAMA (cascade):
 *   1. tokens.css
 *   2. sportal-tokens.css
 *   3. Tailwind @layer (base/components/utilities)
 *   4. sportal-blocks.css  ← BU DOSYA
 *   5. sportal_custom_{hash}_{tema}.css (admin override)
 *
 * Sunai (Frontend/Sunum) — Sportal FAZ 3.b
 *
 * ISOLATION (P0-1 fix — 2026-04-20 Sunai):
 *   Tüm kurallar `@layer sportal-blocks` içine alındı ve
 *   `body[data-sportal="aktif"]` scope'una sarıldı (native CSS nesting).
 *   Kill switch (`sportal.aktif=0`) iken body tag'inde
 *   `data-sportal="pasif"` bulunur ve hiçbir kural uygulanmaz.
 *   Tarayıcı uyumu: Chrome 120+, Safari 17.2+, Firefox 117+
 * ============================================================ */

@layer sportal-blocks {
body[data-sportal="aktif"] {

/* ===== 1) LOOP (ortak) ===== */
.sportal-loop {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sportal-bosluk-6);
}

/* ===== 2) LOOP — GRID (4-kolon responsive) ===== */
.sportal-loop--grid {
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .sportal-loop--grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sportal-loop--grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .sportal-loop--grid { grid-template-columns: repeat(4, 1fr); } }

/* Kart temel iskelet */
.sportal-kart {
  background: var(--sportal-bg);
  border: 1px solid var(--sportal-border);
  border-radius: var(--sportal-radius-lg);
  overflow: hidden;
  transition: transform var(--sportal-gecis), box-shadow var(--sportal-gecis), border-color var(--sportal-gecis);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.sportal-kart:hover,
.sportal-kart:focus-within {
  transform: translate3d(0, -4px, 0);
  box-shadow: var(--sportal-shadow-lg);
  border-color: var(--sportal-border-strong);
}

.sportal-kart-kapak {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--sportal-bg-deep);
}
.sportal-kart-kapak img,
.sportal-kart-kapak picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--sportal-gecis-yavas);
}
.sportal-kart:hover .sportal-kart-kapak img {
  transform: scale(1.04);
}
.sportal-kart-kapak--bos {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--sportal-bg-alt), var(--sportal-bg-deep));
}

.sportal-kart-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sportal-kart-kategori {
  position: absolute;
  top: var(--sportal-bosluk-3);
  left: var(--sportal-bosluk-3);
  background: var(--sportal-primary);
  color: var(--sportal-primary-fg);
  padding: 0.25rem 0.625rem;
  border-radius: var(--sportal-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: var(--sportal-shadow-sm);
}

.sportal-kart-kategori-inline {
  display: inline-block;
  color: var(--sportal-primary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--sportal-bosluk-2);
}

.sportal-kart-govde {
  padding: var(--sportal-bosluk-4);
  display: flex;
  flex-direction: column;
  gap: var(--sportal-bosluk-3);
  flex: 1 1 auto;
}

.sportal-kart-baslik {
  margin: 0;
  font-family: var(--sportal-font-baslik);
  font-size: var(--sportal-h4);
  line-height: var(--sportal-leading-baslik);
  font-weight: 700;
  color: var(--sportal-text);
  letter-spacing: var(--sportal-tracking-baslik);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sportal-kart-baslik a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--sportal-primary), var(--sportal-primary));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size var(--sportal-gecis);
}
.sportal-kart-baslik a:hover,
.sportal-kart-baslik a:focus { background-size: 100% 2px; }

.sportal-kart-ozet {
  margin: 0;
  font-size: var(--sportal-small);
  color: var(--sportal-text-muted);
  line-height: var(--sportal-leading);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sportal-kart-meta {
  font-size: 0.8125rem;
  color: var(--sportal-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  margin-top: auto;
}
.sportal-kart-meta a {
  color: var(--sportal-text-muted);
  text-decoration: none;
  transition: color var(--sportal-gecis);
}
.sportal-kart-meta a:hover { color: var(--sportal-primary); }

.sportal-meta-okuma::before {
  content: '';
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  vertical-align: -2px;
  margin-right: 0.25rem;
  background: currentColor;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>") center/contain no-repeat;
}

.sportal-kart-dahafazla {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sportal-primary);
  text-decoration: none;
  margin-top: auto;
  align-self: flex-start;
}
.sportal-kart-dahafazla:hover,
.sportal-kart-dahafazla:focus {
  color: var(--sportal-accent);
}
.sportal-kart-dahafazla svg {
  transition: transform var(--sportal-gecis);
}
.sportal-kart-dahafazla:hover svg { transform: translate3d(3px, 0, 0); }

/* ===== 3) LOOP — OVERLAY (kapak üzerinde başlık) ===== */
.sportal-loop--overlay {
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .sportal-loop--overlay { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sportal-loop--overlay { grid-template-columns: repeat(3, 1fr); } }

.sportal-kart--overlay {
  position: relative;
  border-radius: var(--sportal-radius-lg);
  overflow: hidden;
  border: none;
  background: var(--sportal-bg-deep);
  aspect-ratio: 4 / 5;
}
.sportal-kart-overlay {
  position: absolute;
  inset: 0;
  display: block;
  color: #fff;
  text-decoration: none;
}
.sportal-kart-overlay__kapak,
.sportal-kart-overlay__kapak img,
.sportal-kart-overlay__kapak picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sportal-kart-overlay__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0.10) 75%,
    transparent 100%);
  z-index: 1;
}
.sportal-kart-overlay__ic {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sportal-bosluk-5) var(--sportal-bosluk-5);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sportal-kart-overlay__kategori {
  display: inline-flex;
  align-self: flex-start;
  background: var(--sportal-primary);
  color: var(--sportal-primary-fg);
  padding: 0.25rem 0.625rem;
  border-radius: var(--sportal-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.sportal-kart-overlay__baslik {
  margin: 0;
  color: #fff;
  font-family: var(--sportal-font-baslik);
  font-size: var(--sportal-h3);
  font-weight: 700;
  line-height: var(--sportal-leading-baslik);
  letter-spacing: var(--sportal-tracking-baslik);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sportal-kart-overlay__meta {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.85);
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

/* ===== 4) LOOP — OVERLAY-TITLE (üst başlık) ===== */
.sportal-loop--overlay-title {
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .sportal-loop--overlay-title { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .sportal-loop--overlay-title { grid-template-columns: repeat(4, 1fr); } }

.sportal-kart--overlay-title {
  background: var(--sportal-bg);
  border: 1px solid var(--sportal-border);
  border-radius: var(--sportal-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sportal-kart-ot {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.sportal-kart-ot__kapak {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--sportal-bg-deep);
}
.sportal-kart-ot__kapak img,
.sportal-kart-ot__kapak picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sportal-kart-ot__gradient-ust {
  position: absolute;
  inset: 0 0 auto 0;
  height: 70%;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.20) 60%,
    transparent 100%);
  z-index: 1;
}
.sportal-kart-ot__ust {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: var(--sportal-bosluk-4);
  z-index: 2;
  color: #fff;
}
.sportal-kart-ot__kategori {
  display: inline-block;
  background: var(--sportal-primary);
  color: var(--sportal-primary-fg);
  padding: 0.2rem 0.5rem;
  border-radius: var(--sportal-radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--sportal-bosluk-2);
  letter-spacing: 0.03em;
}
.sportal-kart-ot__baslik {
  margin: 0;
  color: #fff;
  font-family: var(--sportal-font-baslik);
  font-size: var(--sportal-h4);
  font-weight: 700;
  line-height: var(--sportal-leading-baslik);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sportal-kart-ot__ozet {
  margin: 0;
  padding: var(--sportal-bosluk-3) var(--sportal-bosluk-4);
  font-size: var(--sportal-small);
  color: var(--sportal-text-muted);
  line-height: var(--sportal-leading);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* ===== 5) LOOP — BIG-THUMB ===== */
.sportal-loop--big-thumb {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sportal-bosluk-6);
}
@media (min-width: 1024px) {
  .sportal-loop--big-thumb {
    grid-template-columns: 1.25fr 1fr;
    align-items: stretch;
  }
}

.sportal-bt-buyuk {
  position: relative;
  border-radius: var(--sportal-radius-lg);
  overflow: hidden;
  min-height: 380px;
  background: var(--sportal-bg-deep);
}
.sportal-bt-buyuk__link {
  position: absolute;
  inset: 0;
  display: block;
  color: #fff;
  text-decoration: none;
}
.sportal-bt-buyuk__kapak,
.sportal-bt-buyuk__kapak img,
.sportal-bt-buyuk__kapak picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sportal-bt-buyuk__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.55) 35%,
    rgba(0, 0, 0, 0.15) 70%,
    transparent 100%);
  z-index: 1;
}
.sportal-bt-buyuk__ic {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sportal-bosluk-6);
  z-index: 2;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.sportal-bt-buyuk__kategori {
  display: inline-flex;
  align-self: flex-start;
  background: var(--sportal-primary);
  color: var(--sportal-primary-fg);
  padding: 0.25rem 0.625rem;
  border-radius: var(--sportal-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sportal-bt-buyuk__baslik {
  margin: 0;
  color: #fff;
  font-family: var(--sportal-font-baslik);
  font-size: var(--sportal-h2);
  font-weight: 700;
  line-height: var(--sportal-leading-baslik);
  letter-spacing: var(--sportal-tracking-baslik);
}
.sportal-bt-buyuk__ozet {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--sportal-body);
  line-height: var(--sportal-leading);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sportal-bt-buyuk__meta {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8125rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

.sportal-bt-yan {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sportal-bosluk-4);
}
@media (min-width: 640px) {
  .sportal-bt-yan { grid-template-columns: repeat(2, 1fr); }
}

.sportal-bt-mini {
  display: flex;
  gap: var(--sportal-bosluk-3);
  align-items: flex-start;
}
.sportal-bt-mini__thumb {
  flex: 0 0 110px;
  aspect-ratio: 1 / 1;
  border-radius: var(--sportal-radius-sm);
  overflow: hidden;
  display: block;
  background: var(--sportal-bg-deep);
}
.sportal-bt-mini__thumb img,
.sportal-bt-mini__thumb picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sportal-bt-mini__ic {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.sportal-bt-mini__kategori {
  color: var(--sportal-primary);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sportal-bt-mini__baslik {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--sportal-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sportal-bt-mini__baslik a {
  color: inherit;
  text-decoration: none;
}
.sportal-bt-mini__baslik a:hover,
.sportal-bt-mini__baslik a:focus { color: var(--sportal-primary); }
.sportal-bt-mini__tarih {
  font-size: 0.75rem;
  color: var(--sportal-text-muted);
}

/* ===== 6) LOOP — LARGE-FIRST ===== */
.sportal-loop--large-first {
  display: flex;
  flex-direction: column;
  gap: var(--sportal-bosluk-8);
}

.sportal-lf-buyuk__govde {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sportal-bosluk-5);
}
@media (min-width: 768px) {
  .sportal-lf-buyuk__govde {
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
  }
}
.sportal-lf-buyuk__kapak {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--sportal-radius-lg);
  overflow: hidden;
  background: var(--sportal-bg-deep);
}
.sportal-lf-buyuk__kapak img,
.sportal-lf-buyuk__kapak picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--sportal-gecis-yavas);
}
.sportal-lf-buyuk:hover .sportal-lf-buyuk__kapak img,
.sportal-lf-buyuk__kapak:hover img {
  transform: scale(1.02);
}
.sportal-lf-buyuk__kategori {
  position: absolute;
  top: var(--sportal-bosluk-3);
  left: var(--sportal-bosluk-3);
  background: var(--sportal-primary);
  color: var(--sportal-primary-fg);
  padding: 0.3rem 0.75rem;
  border-radius: var(--sportal-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sportal-lf-buyuk__ic {
  display: flex;
  flex-direction: column;
  gap: var(--sportal-bosluk-3);
}
.sportal-lf-buyuk__baslik {
  margin: 0;
  font-family: var(--sportal-font-baslik);
  font-size: var(--sportal-h2);
  line-height: var(--sportal-leading-baslik);
  font-weight: 700;
  color: var(--sportal-text);
  letter-spacing: var(--sportal-tracking-baslik);
}
.sportal-lf-buyuk__baslik a {
  color: inherit;
  text-decoration: none;
  transition: color var(--sportal-gecis);
}
.sportal-lf-buyuk__baslik a:hover { color: var(--sportal-primary); }
.sportal-lf-buyuk__ozet {
  margin: 0;
  font-size: var(--sportal-body);
  color: var(--sportal-text-muted);
  line-height: var(--sportal-leading);
}

.sportal-lf-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sportal-bosluk-6);
}
@media (min-width: 640px) {
  .sportal-lf-liste { grid-template-columns: repeat(2, 1fr); }
}

.sportal-kart--lf .sportal-kart-kapak {
  aspect-ratio: 16 / 9;
}
.sportal-kart--lf .sportal-kart-baslik {
  font-size: 1.0625rem;
}

.sportal-lf-pagi {
  display: flex;
  justify-content: center;
}
.sportal-lf-daha {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
}

/* ===== 7) LOOP — MINI ===== */
.sportal-loop--mini {
  display: flex;
  flex-direction: column;
  gap: var(--sportal-bosluk-4);
  grid-template-columns: initial;
}
.sportal-mini {
  display: flex;
  gap: var(--sportal-bosluk-3);
  align-items: flex-start;
  padding-bottom: var(--sportal-bosluk-4);
  border-bottom: 1px solid var(--sportal-border);
}
.sportal-mini:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.sportal-mini article {
  display: flex;
  gap: var(--sportal-bosluk-3);
  align-items: flex-start;
  width: 100%;
}
.sportal-mini__thumb {
  flex: 0 0 72px;
  aspect-ratio: 1 / 1;
  border-radius: var(--sportal-radius-sm);
  overflow: hidden;
  background: var(--sportal-bg-deep);
  display: block;
}
.sportal-mini__thumb img,
.sportal-mini__thumb picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sportal-mini__ic {
  flex: 1;
  min-width: 0;
}
.sportal-mini__baslik {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--sportal-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sportal-mini__baslik a {
  color: inherit;
  text-decoration: none;
  transition: color var(--sportal-gecis);
}
.sportal-mini__baslik a:hover,
.sportal-mini__baslik a:focus { color: var(--sportal-primary); }
.sportal-mini__tarih {
  font-size: 0.75rem;
  color: var(--sportal-text-muted);
}

/* ===== 8) SLIDER (slider-1) ===== */
.sportal-slider {
  position: relative;
  border-radius: var(--sportal-radius-lg);
  overflow: hidden;
  background: var(--sportal-bg-deep);
  aspect-ratio: 21 / 9;
  width: 100%;
}
@media (max-width: 768px) {
  .sportal-slider { aspect-ratio: 4 / 3; }
}
.sportal-slider__rayi {
  position: relative;
  width: 100%;
  height: 100%;
}
.sportal-slider__slayt {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 520ms var(--sportal-ease-smooth);
  pointer-events: none;
}
.sportal-slider__slayt.is-aktif {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.sportal-slider__link {
  display: block;
  position: absolute;
  inset: 0;
  text-decoration: none;
  color: #fff;
}
.sportal-slider__kapak,
.sportal-slider__kapak img,
.sportal-slider__kapak picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sportal-slider__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.35) 50%,
    rgba(0, 0, 0, 0.05) 100%);
  z-index: 1;
}
.sportal-slider__ic {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1.5rem, 4vw, 3rem);
  z-index: 2;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: 960px;
}
.sportal-slider__kategori {
  display: inline-flex;
  align-self: flex-start;
  background: var(--sportal-primary);
  color: var(--sportal-primary-fg);
  padding: 0.3rem 0.75rem;
  border-radius: var(--sportal-radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sportal-slider__baslik {
  margin: 0;
  font-family: var(--sportal-font-baslik);
  font-size: clamp(1.5rem, 3.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}
.sportal-slider__ozet {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--sportal-body);
  line-height: 1.55;
  max-width: 700px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sportal-slider__meta {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.8125rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

/* Oklar */
.sportal-slider__ok {
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background var(--sportal-gecis), transform var(--sportal-gecis);
  backdrop-filter: blur(6px);
}
.sportal-slider__ok:hover,
.sportal-slider__ok:focus {
  background: var(--sportal-primary);
  outline: none;
}
.sportal-slider__ok--onceki { left: clamp(0.75rem, 2vw, 1.5rem); }
.sportal-slider__ok--sonraki { right: clamp(0.75rem, 2vw, 1.5rem); }
@media (max-width: 640px) {
  .sportal-slider__ok { width: 36px; height: 36px; }
}

/* Dots */
.sportal-slider__noktalar {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 3;
}
.sportal-slider__nokta {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  border: none;
  cursor: pointer;
  transition: background var(--sportal-gecis), width var(--sportal-gecis);
  padding: 0;
}
.sportal-slider__nokta.is-aktif {
  background: var(--sportal-primary);
  width: 28px;
  border-radius: 999px;
}
.sportal-slider__nokta:hover:not(.is-aktif) {
  background: rgba(255, 255, 255, 0.8);
}

/* ===== 9) AD BLOCK ===== */
.sportal-block-ad {
  display: block;
  margin: var(--sportal-bosluk-6) 0;
}
.sportal-ad__wrapper {
  border-radius: var(--sportal-radius);
  overflow: hidden;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sportal-bg-alt);
  border: 1px dashed var(--sportal-border);
}
.sportal-ad__figure {
  margin: 0;
  width: 100%;
  display: block;
}
.sportal-ad__img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.sportal-ad__ozel {
  padding: var(--sportal-bosluk-4);
  width: 100%;
}

/* ===== 10) CUSTOM HTML BLOCK ===== */
.sportal-block-custom-html {
  display: block;
}
.sportal-custom-icerik {
  font-family: var(--sportal-font-metin);
  font-size: var(--sportal-body);
  color: var(--sportal-text);
  line-height: var(--sportal-leading);
}
.sportal-custom-icerik h2,
.sportal-custom-icerik h3,
.sportal-custom-icerik h4 {
  font-family: var(--sportal-font-baslik);
  letter-spacing: var(--sportal-tracking-baslik);
  color: var(--sportal-text);
}
.sportal-custom-icerik a {
  color: var(--sportal-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* CTA kutusu (custom-html içinde) */
.sportal-cta {
  padding: clamp(2rem, 5vw, 4rem) 1rem;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  color: var(--sportal-text);
}
.sportal-section--dark .sportal-cta,
.sportal-section--dark .sportal-custom-icerik {
  color: #fff;
}
.sportal-cta__baslik {
  margin: 0 0 var(--sportal-bosluk-3);
  font-size: var(--sportal-h2);
  font-weight: 700;
  letter-spacing: var(--sportal-tracking-baslik);
}
.sportal-cta__metin {
  margin: 0 0 var(--sportal-bosluk-6);
  font-size: var(--sportal-body);
  line-height: var(--sportal-leading);
  color: inherit;
  opacity: 0.88;
}
.sportal-cta__aksiyon {
  margin: 0;
}

/* ===== 11) GENEL BUTON (ortak) ===== */
.sportal-buton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--sportal-radius);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--sportal-bg);
  color: var(--sportal-text);
  transition: transform var(--sportal-gecis), background var(--sportal-gecis), box-shadow var(--sportal-gecis);
}
.sportal-buton:hover,
.sportal-buton:focus-visible {
  transform: translate3d(0, -1px, 0);
  outline: none;
  box-shadow: var(--sportal-shadow);
}
.sportal-buton--birincil {
  background: var(--sportal-primary);
  color: var(--sportal-primary-fg);
  border-color: var(--sportal-primary);
}
.sportal-buton--birincil:hover,
.sportal-buton--birincil:focus-visible {
  background: var(--sportal-accent);
  color: var(--sportal-accent-fg);
  border-color: var(--sportal-accent);
  box-shadow: var(--sportal-shadow-primary);
}

/* ===== 12) SECTION TITLE 10 STİL ===== */
.sportal-section-title {
  font-family: var(--sportal-font-baslik);
  font-size: var(--sportal-h2);
  font-weight: 700;
  color: var(--sportal-text);
  letter-spacing: var(--sportal-tracking-baslik);
  line-height: var(--sportal-leading-baslik);
  margin: 0 0 var(--sportal-bosluk-6);
  padding-bottom: var(--sportal-bosluk-3);
}
.sportal-section-title-link {
  color: inherit;
  text-decoration: none;
}
.sportal-section-title-text {
  display: inline-block;
}
.sportal-section-title-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -2px;
  margin-right: 0.3em;
  background-color: var(--sportal-primary);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Stil 1: Border-left (Jannah imza) */
.sportal-section-title--1 {
  border-left: 4px solid var(--sportal-primary);
  padding-left: var(--sportal-bosluk-3);
  padding-bottom: 0;
}
/* Stil 2: Underline (alt çizgi) */
.sportal-section-title--2 {
  border-bottom: 1px solid var(--sportal-border);
  position: relative;
}
.sportal-section-title--2::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: var(--sportal-title-line-w);
  height: var(--sportal-title-line-h);
  background: var(--sportal-primary);
  border-radius: 2px;
}
/* Stil 3: Icon prefix */
.sportal-section-title--3::before {
  content: '';
  display: inline-block;
  width: 8px; height: 24px;
  background: var(--sportal-primary);
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 0.5rem;
}
/* Stil 4: Centered */
.sportal-section-title--4 {
  text-align: center;
  position: relative;
  padding-bottom: var(--sportal-bosluk-4);
}
.sportal-section-title--4::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: var(--sportal-title-line-w);
  height: var(--sportal-title-line-h);
  background: var(--sportal-primary);
  border-radius: 2px;
}
/* Stil 5: Gradient text */
.sportal-section-title--5 {
  background: linear-gradient(90deg, var(--sportal-primary) 0%, var(--sportal-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Stil 6: Minimal uppercase */
.sportal-section-title--6 {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--sportal-h3);
  font-weight: 800;
}
/* Stil 7: Boxed badge */
.sportal-section-title--7 {
  display: inline-flex;
  padding: 0.5rem 1rem;
  background: var(--sportal-primary-soft);
  color: var(--sportal-primary);
  border-radius: var(--sportal-radius);
  padding-bottom: 0.5rem;
  font-size: var(--sportal-h3);
}
/* Stil 8: Uppercase thin */
.sportal-section-title--8 {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 400;
  font-size: var(--sportal-h3);
  padding-bottom: var(--sportal-bosluk-3);
  border-bottom: 2px solid var(--sportal-border);
}
/* Stil 9: Double-line */
.sportal-section-title--9 {
  text-align: center;
  position: relative;
}
.sportal-section-title--9::before,
.sportal-section-title--9::after {
  content: '';
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--sportal-border-strong);
  vertical-align: middle;
  margin: 0 1rem;
}
/* Stil 10: Accented (sol başta büyük harf daha koyu) */
.sportal-section-title--10 {
  position: relative;
  padding-left: var(--sportal-bosluk-5);
}
.sportal-section-title--10::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: var(--sportal-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--sportal-primary-soft);
}

/* ===== 13) SECTION WRAPPER ===== */
.sportal-section {
  padding: var(--sportal-section-pad-y) 0;
  position: relative;
}
.sportal-section--first {
  padding-top: clamp(1rem, 2vw, 2rem);
}
.sportal-section--dark {
  background: var(--sportal-bg-deep);
  color: #fff;
}
.sportal-section--dark .sportal-kart {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
.sportal-section--dark .sportal-kart-baslik,
.sportal-section--dark .sportal-section-title,
.sportal-section--dark .sportal-custom-icerik h2 {
  color: #fff;
}
.sportal-section--dark .sportal-kart-ozet,
.sportal-section--dark .sportal-kart-meta {
  color: rgba(255, 255, 255, 0.75);
}

/* Container */
.sportal-container {
  max-width: var(--sportal-container);
  margin: 0 auto;
  padding: 0 var(--sportal-bosluk-4);
}
.sportal-container--full {
  max-width: 100%;
  padding: 0;
}
.sportal-section--stretch .sportal-container--normal {
  max-width: var(--sportal-container);
  padding: 0 var(--sportal-bosluk-4);
}

/* Sidebar layout */
.sportal-container--sidebar-none {
  display: block;
}
.sportal-container--sidebar-right,
.sportal-container--sidebar-left {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sportal-bosluk-8);
}
@media (min-width: 1024px) {
  .sportal-container--sidebar-right { grid-template-columns: minmax(0, 1fr) 320px; }
  .sportal-container--sidebar-left  { grid-template-columns: 320px minmax(0, 1fr); }
  .sportal-container--sidebar-left  .sportal-section__sidebar { order: -1; }
}
.sportal-section__icerik {
  min-width: 0;
}
.sportal-section__sidebar {
  min-width: 0;
}

/* ===== 14) REDUCED MOTION — saygılı geri çekilme ===== */
@media (prefers-reduced-motion: reduce) {
  .sportal-kart:hover,
  .sportal-kart:focus-within,
  .sportal-kart:hover .sportal-kart-kapak img,
  .sportal-lf-buyuk__kapak:hover img,
  .sportal-buton:hover,
  .sportal-kart-dahafazla:hover svg {
    transform: none !important;
    transition: none !important;
  }
  .sportal-slider__slayt {
    transition: none !important;
  }
}

} /* /body[data-sportal="aktif"] */
} /* /@layer sportal-blocks */