/*
 * Corporate — Ana Stil (Phase 18)
 * --------------------------------------------------------------
 * Critical-out-of-fold stiller. base.html'de async yüklenir
 * (preload + onload trick). 56+ blok ds-* class'larını ezmek yerine
 * tema-spesifik tweak'ler ekler.
 */

@import url("./tokens.css");

/* --- Global Hover Transitions --- */
/* Tüm hover renk/stil değişiklikleri smooth geçiş yapacak.
   Süre/easing design-tokens.css'teki --transition token'ından gelir (450ms ease-in-out).
   Kapsam: interactive element'ler + .block (tüm blok kökü) + container varyantları. */
a,
button,
.ds-btn,
.block,
input,
textarea,
select,
[class*="container--"],
[class*="card--"],
[class*="block-card"],
.section-style,
.icon-block,
.typography-style {
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition),
              text-shadow var(--transition),
              opacity var(--transition), transform var(--transition),
              filter var(--transition);
}

/* --- Layout --- */

.site-main {
  min-height: calc(100vh - var(--header-height) - 24rem);
}

/* ============================================================
   SITE HEADER — modern mega-menu navigation
   ============================================================ */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky, 1020);
  background: var(--color-bg, #fff);
  border-block-end: 1px solid var(--color-border, transparent);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  max-width: var(--container-max, 1280px);
  margin-inline: auto;
  padding: var(--space-3) var(--space-6);
  min-height: 64px;
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-fg);
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.site-header__logo img { display: block; height: 32px; width: auto; }
.site-header__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-fg);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
}
.site-header__phone svg { color: var(--color-primary, #2c5f5d); }
.site-header__cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: var(--color-primary, #1f4e4a);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
}
.site-header__cta:hover { background: var(--color-primary-strong, #15403d); }
.site-header__lang {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: transparent;
  color: var(--color-fg);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

/* ============================================================
   NAV-MENU — top-level horizontal menu + mega-menu dropdown
   ============================================================ */
.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu__item {
  position: relative;
  font-size: 0.95rem;
}
.nav-menu__item--link,
.nav-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 22px 14px;
  background: transparent;
  border: 0;
  color: var(--color-fg);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}
.nav-menu__item--link::after,
.nav-menu__trigger::after {
  content: "";
  position: absolute;
  inset-inline: 14px;
  inset-block-end: 14px;
  height: 2px;
  background: var(--color-primary, #1f4e4a);
  transform: scaleX(0);
  transform-origin: center;
}
.nav-menu__item:hover .nav-menu__item--link::after,
.nav-menu__item:hover .nav-menu__trigger::after,
.nav-menu__item--active .nav-menu__item--link::after,
.nav-menu__item[data-open] .nav-menu__trigger::after {
  transform: scaleX(1);
}
.nav-menu__chevron {
  transition: transform var(--transition);
}
.nav-menu__item[data-open] .nav-menu__chevron {
  transform: rotate(180deg);
}

/* Mega-menu dropdown panel — fullwidth altta açılır */
.nav-menu__dropdown {
  position: fixed;
  inset-inline: 0;
  inset-block-start: 64px;
  background: var(--color-bg, #fff);
  border-block-start: 1px solid var(--color-border);
  border-block-end: 1px solid var(--color-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  padding-block: var(--space-6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
}
.nav-menu__item--has-dropdown:hover .nav-menu__dropdown,
.nav-menu__item[data-open] .nav-menu__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-menu__dropdown-inner {
  max-width: var(--container-max, 1280px);
  margin-inline: auto;
  padding-inline: var(--space-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8);
}

/* Mega-menu kolon + link */
.mega-menu__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mega-menu__column-title {
  margin: 0 0 var(--space-2);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-fg);
}
.mega-menu__column-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mega-menu__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-fg);
}
.mega-menu__link:hover {
  background: var(--color-bg-subtle, #f5f5f5);
}
.mega-menu__link-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-bg-subtle, #f5f5f5);
  color: var(--color-primary, #1f4e4a);
}
.mega-menu__link-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mega-menu__link-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-fg);
}
.mega-menu__link-desc {
  font-size: 0.8rem;
  color: var(--color-fg-muted, #666);
  line-height: 1.4;
}

/* Mobile: hamburger drawer */
.site-header__toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  color: var(--color-fg);
  cursor: pointer;
}
@media (max-width: 1024px) {
  .site-header__toggle { display: inline-flex; }
  .site-header__nav {
    position: fixed;
    inset-block-start: 64px;
    inset-inline: 0;
    inset-block-end: 0;
    background: var(--color-bg);
    border-block-start: 1px solid var(--color-border);
    overflow-y: auto;
    padding: var(--space-4);
    transform: translateX(-100%);
    visibility: hidden;
  }
  .site-header[data-mobile-open] .site-header__nav {
    transform: translateX(0);
    visibility: visible;
  }
  .nav-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .nav-menu__item--link,
  .nav-menu__trigger {
    width: 100%;
    justify-content: space-between;
    padding: var(--space-3) 0;
    border-block-end: 1px solid var(--color-border);
  }
  .nav-menu__dropdown {
    position: static;
    box-shadow: none;
    border: 0;
    padding-block: var(--space-3);
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
  }
  .nav-menu__item[data-open] .nav-menu__dropdown {
    display: block;
  }
  .nav-menu__dropdown-inner {
    padding: 0;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .site-header__phone span,
  .site-header__lang { display: none; }
}

.site-footer {
  background: var(--color-fg);
  color: var(--color-bg);
  padding-block: var(--space-12) var(--space-6);
  margin-block-start: var(--space-12);
}
.site-footer a {
  color: var(--color-bg);
  /* transition global kuralda */
}
.site-footer a:hover { color: var(--color-primary-subtle); }
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8);
}
.site-footer__bottom {
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
  padding-block-start: var(--space-6);
  margin-block-start: var(--space-8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-fg-subtle);
}

/* --- Navigation --- */

.site-nav {
  display: flex;
  gap: var(--space-6);
  align-items: center;
}
.site-nav__link {
  color: var(--color-fg);
  font-weight: var(--font-weight-medium);
  padding-block: var(--space-2);
  border-block-end: 2px solid transparent;
  /* transition global kuralda */
}
.site-nav__link:hover,
.site-nav__link--active {
  color: var(--color-primary);
  border-block-end-color: var(--color-primary);
  text-decoration: none;
}

/* --- Mobil drawer --- */

.mobile-menu {
  display: none;
}
@media (max-width: 768px) {
  .site-nav { display: none; }
  .mobile-menu {
    display: flex;
    align-items: center;
    background: transparent;
    border: 0;
    padding: var(--space-2);
    cursor: pointer;
  }
  .mobile-menu[aria-expanded="true"] + .site-nav,
  .site-nav.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset-block-start: var(--header-height);
    inset-inline: 0;
    background: var(--color-bg);
    padding: var(--space-6);
    border-block-end: 1px solid var(--color-border);
    z-index: var(--z-modal);
  }
}

/* --- Breadcrumbs --- */

.breadcrumbs {
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
  padding-block: var(--space-4);
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
}
.breadcrumbs li::after { content: "/"; margin-inline-start: var(--space-2); color: var(--color-fg-subtle); }
.breadcrumbs li:last-child::after { content: ""; }

/* --- Pagination --- */

.pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  padding-block: var(--space-8);
}
.pagination a, .pagination span {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-fg);
}
.pagination a:hover {
  background: var(--color-primary-subtle);
  border-color: var(--color-primary);
  text-decoration: none;
}
.pagination .current {
  background: var(--color-primary);
  color: var(--color-primary-fg);
  border-color: var(--color-primary);
}

/* --- Auth & üye sayfaları --- */

.ds-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--color-bg-subtle);
  padding: var(--space-6);
}
.ds-auth__panel {
  background: var(--color-bg);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  width: 100%;
  max-width: 28rem;
}

.member-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-8);
  padding-block: var(--space-8);
}
@media (max-width: 768px) {
  .member-layout { grid-template-columns: 1fr; }
}
.member-sidebar {
  background: var(--color-bg-subtle);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.member-sidebar a {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-fg);
  border-radius: var(--radius-sm);
}
.member-sidebar a:hover,
.member-sidebar a.is-active {
  background: var(--color-primary);
  color: var(--color-primary-fg);
  text-decoration: none;
}

/* --- Error sayfaları --- */

.error-page {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-12);
}
.error-page__code {
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1;
  margin-block-end: var(--space-4);
}
.error-page__title { font-size: clamp(1.5rem, 3vw, 2rem); margin-block-end: var(--space-3); }
.error-page__desc { color: var(--color-fg-muted); max-width: 40ch; margin-inline: auto; margin-block-end: var(--space-6); }

/* --- Listing sayfaları --- */

.list-header {
  padding-block: var(--space-8);
  border-block-end: 1px solid var(--color-border);
  margin-block-end: var(--space-8);
}
.list-header__title { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-block-end: var(--space-2); }
.list-header__desc { color: var(--color-fg-muted); max-width: 60ch; }

/* --- Block override stilleri (Phase 18) ---
 * themes/corporate/templates/blocks/ altındaki tema override'larıyla
 * eşleşen CSS. Default block class'larını ezmez — sadece corporate
 * variant'ı için ek görsel katman sağlar.
 */

/* hero--corporate: image arkaplan üstüne lacivert→koyu gradient overlay,
 * başlık altında turuncu decorative line, CTA accent (turuncu).
 * Bu farklılaşmalar Corporate ADR-0013'te sabitlendi.
 */
.hero--corporate {
  position: relative;
  isolation: isolate;
}
.hero--corporate .hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero--corporate .hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    135deg,
    rgba(30, 58, 138, 0.78) 0%,
    rgba(15, 23, 42, 0.62) 100%
  );
  pointer-events: none;
}
.hero--corporate .hero__title {
  margin-block-end: var(--space-3);
}
.hero--corporate .hero__accent-line {
  display: block;
  width: 4rem;
  height: 4px;
  background: var(--color-accent);
  margin-block-end: var(--space-5);
  border-radius: var(--radius-sm);
}
.hero--corporate.hero--align-center .hero__accent-line {
  margin-inline: auto;
}
.hero--corporate .hero__cta {
  margin-block-start: var(--space-6);
  padding-inline: var(--space-8);
}
.hero--corporate.hero--text-light .hero__title,
.hero--corporate.hero--text-light .hero__subtitle {
  color: var(--color-bg);
}

/* card--corporate: üstte 4px lacivert accent, hover'da hafif kalkma. */
.card--corporate {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  /* transition global kuralda */
}
.card--corporate:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}
.card--corporate .card__corporate-accent {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 4px;
  background: var(--color-primary);
  pointer-events: none;
}
.card--corporate .card__header,
.card--corporate .card__body,
.card--corporate .card__footer {
  padding: var(--space-5);
}
.card--corporate .card__header {
  border-block-end: 1px solid var(--color-border);
}
.card--corporate .card__footer {
  border-block-start: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

/* --- RTL düzeltmeleri ---
 * Tema CSS'i logical properties ile yazıldığı için temel layout RTL'de
 * otomatik flip eder. Bu blok yalnızca **direksiyonel** öğeler için override:
 * - Breadcrumb separator yönü
 * - Ok ikonları (›) → (‹)
 * - Mobil drawer slide yönü
 * - Pagination ›/‹ ok karakterleri
 */

/* Breadcrumb separator: LTR'de "/" sonda, RTL'de başta */
[dir="rtl"] .breadcrumbs li::after { content: ""; }
[dir="rtl"] .breadcrumbs li:not(:last-child)::before {
  content: "/";
  margin-inline-end: var(--space-2);
  color: var(--color-fg-subtle);
}

/* Pagination ok karakterleri RTL'de yön çevirir.
   "‹ Önceki" ve "Sonraki ›" → RTL'de "› السابق" ve "التالي ‹". */
[dir="rtl"] .pagination [rel="prev"]::before,
[dir="rtl"] .pagination [rel="next"]::after {
  display: inline-block;
  transform: scaleX(-1);
}

/* Site nav active border tarafı — logical zaten flip eder, ek tweak gerekmiyor.
   Skip link, mobil drawer pozisyonları logical ile RTL doğru. */

/* Form label/input alignment Arapça için ek kontrol — logical default'lar
   yeterli; özel block override gerekirse buraya eklenir. */

/* === Phase 7d+ — Image block: width + alignment modifier'ları === */
/* Backbone: figure block. <img>'ı parent figure'a sığdır. */
.image {
  display: block;
  margin: 0;
  max-width: 100%;
}
/* Phase 22 — photo_width/height ve opacity CSS vars üzerinden çalışır.
   ``.block-image.image`` specificity'si 0,2,0 — ``.section-style--full-width``
   (0,1,0) override edilir. */
.block-image.image {
  width: var(--photo-width-d, 100%);
  height: var(--photo-height-d, auto);
  overflow: hidden;
}
.image picture {
  display: block;
  width: 100%;
  height: 100%;
}
/* Masaüstü/mobil görsel toggle — sadece mobil görsel varsa kullanılır. */
.image__viewport {
  display: block;
  width: 100%;
  height: 100%;
}
.image__viewport picture {
  width: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  .image__viewport--desktop { display: none; }
}
@media (min-width: 769px) {
  .image__viewport--mobile { display: none; }
}
.image img,
.image picture img {
  display: block;
  width: 100%;
  height: 100%;
  /* default object-fit cover; user dilerse Görsel Ayarları'ndan değiştirir. */
  object-fit: cover;
  /* opacity: 0-100 değer → 0-1'e bölünür. */
  opacity: calc(var(--photo-opacity, 100) / 100);
}
@media (max-width: 768px) {
  .block-image.image {
    width: var(--photo-width-m, var(--photo-width-d, 100%));
    height: var(--photo-height-m, var(--photo-height-d, auto));
  }
}
/* Görsel SEO başlığı — figure dışında orta hizalı */
.image__title {
  text-align: center;
}
/* Photo original size — width/height auto, çocuk img doğal boyutta. */
.image--photo-original,
.image--photo-original img,
.image--photo-original picture,
.image--photo-original picture img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
}
/* object-fit varyantları — figure'da yükseklik varsa devreye girer. */
.image--photo-fit-cover img,
.image--photo-fit-cover picture img { object-fit: cover; }
.image--photo-fit-contain img,
.image--photo-fit-contain picture img { object-fit: contain; }
.image--photo-fit-fill img,
.image--photo-fit-fill picture img { object-fit: fill; }
.image--photo-fit-none img,
.image--photo-fit-none picture img { object-fit: none; }
.image--photo-fit-scale-down img,
.image--photo-fit-scale-down picture img { object-fit: scale-down; }
/* object-position — yatay × dikey kombine (browsers object-position-x/y
   yaygın değil; tek property kullanılır). 3×3 kombinasyon. */
.image--photo-pos-h-start.image--photo-pos-v-start  img,
.image--photo-pos-h-start.image--photo-pos-v-start  picture img { object-position: left top; }
.image--photo-pos-h-center.image--photo-pos-v-start img,
.image--photo-pos-h-center.image--photo-pos-v-start picture img { object-position: center top; }
.image--photo-pos-h-end.image--photo-pos-v-start    img,
.image--photo-pos-h-end.image--photo-pos-v-start    picture img { object-position: right top; }

.image--photo-pos-h-start.image--photo-pos-v-center  img,
.image--photo-pos-h-start.image--photo-pos-v-center  picture img { object-position: left center; }
.image--photo-pos-h-center.image--photo-pos-v-center img,
.image--photo-pos-h-center.image--photo-pos-v-center picture img { object-position: center center; }
.image--photo-pos-h-end.image--photo-pos-v-center    img,
.image--photo-pos-h-end.image--photo-pos-v-center    picture img { object-position: right center; }

.image--photo-pos-h-start.image--photo-pos-v-end  img,
.image--photo-pos-h-start.image--photo-pos-v-end  picture img { object-position: left bottom; }
.image--photo-pos-h-center.image--photo-pos-v-end img,
.image--photo-pos-h-center.image--photo-pos-v-end picture img { object-position: center bottom; }
.image--photo-pos-h-end.image--photo-pos-v-end    img,
.image--photo-pos-h-end.image--photo-pos-v-end    picture img { object-position: right bottom; }
/* Genişlik modifier'ları — figure max-width'ini set eder. */
.image--narrow  { max-width: 320px; }
.image--default { max-width: 640px; }
.image--wide    { max-width: 1024px; }
.image--full    { max-width: 100%; }
/* Hizalama — figure'u block-level ortalar/saga/sola yaslar. */
.image--align-left   { margin-left: 0;    margin-right: auto; }
.image--align-center { margin-left: auto; margin-right: auto; }
.image--align-right  { margin-left: auto; margin-right: 0; }
/* Yuvarlatılmış köşeler — img + picture'a uygulanır. */
.image--rounded img,
.image--rounded picture img {
  border-radius: var(--radius-md, 8px);
}

/* === Phase 7d+ — Heading block: alignment modifier'ları === */
.heading--align-left   { text-align: left; }
.heading--align-center { text-align: center; }
.heading--align-right  { text-align: right; }
.heading__eyebrow { display: block; }

/* === Phase 7d+ — Text block: alignment + width modifier'ları === */
.text { max-width: 100%; }
.text--narrow  { max-width: 480px; }
.text--default { max-width: 720px; }
.text--wide    { max-width: 100%; }
.text--align-left    { text-align: left; }
.text--align-center  { text-align: center; }
.text--align-right   { text-align: right; }
.text--align-justify { text-align: justify; }

/* === Columns block === */
.columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: var(--cols-h, flex-start);
  align-items: var(--cols-v, stretch);
  column-gap: var(--cols-gap-h, 0px);
  row-gap: var(--cols-gap-v, 0px);
  width: 100%;
}

/* Preview modunda eklenen wrapper div layout'tan şeffaf olsun;
   article doğrudan flex child haline gelir, JS/postMessage etkilenmez. */
.columns > [data-mintweb-block] {
  display: contents;
}

/* card_width tanımlanmamış çocuklar eşit alan paylaşır */
.columns > *:not([data-mintweb-block]) {
  flex: 1;
  min-width: 0;
}

/* card_width tanımlanmış çocuklar tam olarak o yüzdeyi kaplar */
.columns > .container--has-card-width {
  flex: 0 0 var(--card-width-desktop, 100%);
  width: var(--card-width-desktop, 100%);
  max-width: var(--card-width-desktop, 100%);
}

@media (max-width: 768px) {
  .columns--stack-mobile {
    flex-direction: column;
  }
  .columns--stack-mobile > *:not([data-mintweb-block]) {
    flex: 0 0 100%;
  }
  .columns > .container--has-card-width {
    flex: 0 0 var(--card-width-mobile, 100%);
    width: var(--card-width-mobile, 100%);
    max-width: var(--card-width-mobile, 100%);
  }
}

/* section-style--flex override: columns her zaman row flex kullanır */
.columns.section-style--flex {
  display: flex;
  flex-direction: row;
}

/* === Yazı Ayarları (Typography) — text-bearing leaf bloklar için ===
   Dış kapsayıcıya font-size/line-height/font-weight uygulanır. Ancak h1-h6
   gibi etiketler UA stylesheet'inde kendi değerlerini taşıdığı için inherit
   etmez — bu yüzden descendant rule'larıyla yaygın metin etiketlerini
   override ediyoruz. */
.typography-style.typography-style--has-font-size,
.typography-style--has-font-size h1, .typography-style--has-font-size h2,
.typography-style--has-font-size h3, .typography-style--has-font-size h4,
.typography-style--has-font-size h5, .typography-style--has-font-size h6,
.typography-style--has-font-size p,  .typography-style--has-font-size span,
.typography-style--has-font-size li, .typography-style--has-font-size a,
.typography-style--has-font-size blockquote,
.typography-style--has-font-size strong, .typography-style--has-font-size em,
.typography-style--has-font-size .heading__text {
  font-size: var(--typography-font-size-d);
}
.typography-style.typography-style--has-line-height,
.typography-style--has-line-height h1, .typography-style--has-line-height h2,
.typography-style--has-line-height h3, .typography-style--has-line-height h4,
.typography-style--has-line-height h5, .typography-style--has-line-height h6,
.typography-style--has-line-height p,  .typography-style--has-line-height li,
.typography-style--has-line-height blockquote,
.typography-style--has-line-height .heading__text {
  line-height: var(--typography-line-height-d);
}
.typography-style.typography-style--has-font-weight,
.typography-style--has-font-weight h1, .typography-style--has-font-weight h2,
.typography-style--has-font-weight h3, .typography-style--has-font-weight h4,
.typography-style--has-font-weight h5, .typography-style--has-font-weight h6,
.typography-style--has-font-weight p,  .typography-style--has-font-weight span,
.typography-style--has-font-weight li, .typography-style--has-font-weight a,
.typography-style--has-font-weight blockquote,
.typography-style--has-font-weight strong,
.typography-style--has-font-weight .heading__text {
  font-weight: var(--typography-font-weight-d);
}
@media (max-width: 768px) {
  .typography-style.typography-style--has-font-size-m,
  .typography-style--has-font-size-m h1, .typography-style--has-font-size-m h2,
  .typography-style--has-font-size-m h3, .typography-style--has-font-size-m h4,
  .typography-style--has-font-size-m h5, .typography-style--has-font-size-m h6,
  .typography-style--has-font-size-m p,  .typography-style--has-font-size-m span,
  .typography-style--has-font-size-m li, .typography-style--has-font-size-m a,
  .typography-style--has-font-size-m blockquote,
  .typography-style--has-font-size-m .heading__text {
    font-size: var(--typography-font-size-m);
  }
  .typography-style.typography-style--has-line-height-m,
  .typography-style--has-line-height-m h1, .typography-style--has-line-height-m h2,
  .typography-style--has-line-height-m h3, .typography-style--has-line-height-m h4,
  .typography-style--has-line-height-m h5, .typography-style--has-line-height-m h6,
  .typography-style--has-line-height-m p, .typography-style--has-line-height-m li,
  .typography-style--has-line-height-m blockquote,
  .typography-style--has-line-height-m .heading__text {
    line-height: var(--typography-line-height-m);
  }
  .typography-style.typography-style--has-font-weight-m,
  .typography-style--has-font-weight-m h1, .typography-style--has-font-weight-m h2,
  .typography-style--has-font-weight-m h3, .typography-style--has-font-weight-m h4,
  .typography-style--has-font-weight-m h5, .typography-style--has-font-weight-m h6,
  .typography-style--has-font-weight-m p, .typography-style--has-font-weight-m span,
  .typography-style--has-font-weight-m li, .typography-style--has-font-weight-m a,
  .typography-style--has-font-weight-m blockquote,
  .typography-style--has-font-weight-m strong,
  .typography-style--has-font-weight-m .heading__text {
    font-weight: var(--typography-font-weight-m);
  }
}

/* Line clamp — max-lines */
.typography-style--clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--typography-max-lines, 1);
  line-clamp: var(--typography-max-lines, 1);
  overflow: hidden;
}

/* Hover varyantları */
.typography-style--has-color-hover:hover { color: var(--typography-color-hover) !important; }
.typography-style--has-bg-hover:hover { background-color: var(--typography-bg-hover) !important; }
/* .typography-style transition global kuralda */

/* === Phase 10c+ — SectionStyleSettings ortak stilleri === */
.section-style {
  box-sizing: border-box;
  /* Hover transition global kuralda — yukarıdaki [class*="container--"]/.section-style selector'ünden gelir. */
}

/* CTA buton — full-width modifier. ".ds-btn" inline-flex oldugundan width:100%
   gerekiyor; ayrica wrapper'in tasmamasi icin block-cta da display:block. */
.block-cta { display: block; }
.ds-btn-block { width: 100%; }
/* CTA: .ds-btn'in sabit height: 2.25rem override edilir ki typography
   line-height ve padding ile buton yuksekligi tipografi ayarlarina gore degissin. */
.block-cta .ds-btn { height: auto; }
/* CTA ikonu font-size ile birlikte ölçeklensin — SVG attr override. */
.block-cta .ds-btn .ctrl-icon { width: 1em; height: 1em; }
/* İkon ile yazı arası boşluk font boyutuna orantılı. */
.block-cta .ds-btn { gap: 0.6em; }
/* ds-btn varsayılan border-radius (var(--radius)=8px) sıfırlanır —
   Köşe Yuvarlaklığı=0 iken köşeler keskin kalır; inline style override eder. */
.block-cta .ds-btn { border-radius: 0; }
/* Tam Genişlik kapalıyken section-style'ın width:100% + padding-inline zorlaması
   butona uygulanmasın — inline-flex kalıp içerik genişliğinde görünsün. */
.block-cta .section-style:not(.section-style--full-width) {
  width: auto;
  padding-inline: 0;
}

/* Gallery bloku — CSS Grid, column + item-level CSS var destekli. */
.block-gallery {
  display: grid;
  grid-template-columns: repeat(var(--gallery-cols-d, 3), minmax(0, 1fr));
  /* --gi-gap-h / --gi-gap-v: Boşluklar sekmesi Dış Boşluk → fotoğraflar arası */
  column-gap: var(--gi-gap-h, 0);
  row-gap:    var(--gi-gap-v, 0);
}
/* .gallery__item — Boşluklar/Köşe Ayarları sekmesi CSS var'larını alır */
.gallery__item {
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* İç boşluk (Boşluklar → İç Boşluk) */
  padding: var(--gi-pad, 0);
  /* Köşe Ayarları */
  border-radius: var(--gi-radius, 0);
  box-shadow: var(--gi-shadow, none);
  /* Görsel Ayarları */
  background-color: var(--gi-bg, transparent);
}
/* Çerçeve overlay — görselin üstüne (foreground) çizilir.
   CSS border kullanılmaz; overflow:hidden+border-radius ile border arasındaki
   boşluk sorununu ::after + inset box-shadow çözer. */
.gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 var(--gi-bw-v, 0px) var(--gi-bc, transparent);
  pointer-events: none;
}
/* picture block düzeyinde fill edilmeli ki img üstte kalsın. */
.gallery__item picture { display: block; width: 100%; }
.gallery__item img, .gallery__item picture > img {
  width: 100%;
  /* --gi-h-d set edilmemişse auto: doğal oran korunur. */
  height: var(--gi-h-d, auto);
  object-fit: var(--gi-fit, cover);
  object-position: var(--gi-pos, center center);
  opacity: var(--gi-opacity, 1);
  display: block;
  border-radius: var(--gi-radius, 0);
}
.gallery__caption { font-size: 0.8em; color: var(--color-text-subtle, #666); padding: 4px 2px 0; }
.gallery__empty { grid-column: 1/-1; color: var(--color-text-subtle, #999); text-align: center; padding: 24px 0; }
@media (max-width: 768px) {
  .block-gallery { grid-template-columns: repeat(var(--gallery-cols-m, 1), minmax(0, 1fr)); }
  .gallery__item img, .gallery__item picture > img { height: var(--gi-h-m, var(--gi-h-d, auto)); }
}
/* "Orginal Boyutunda Gösterilsin mi?" aktifken: figure/picture doğal boyut, img object-fit yok.
   Hücre yine grid sütun genişliği kadar; img'nin max-width:100% taşmayı engeller. */
.block-gallery.gallery--original-size .gallery__item picture {
  display: block;
  width: auto;
}
.block-gallery.gallery--original-size .gallery__item img,
.block-gallery.gallery--original-size .gallery__item picture > img {
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: initial;
  object-position: initial;
}

/* Icon bloku — base + hover renkleri (CSS variable üzerinden) + mobil ikon
   boyutu media query. ``!important`` gerekiyor: ``.section-style:not([style*="--section-bg-color-hover"]):hover``
   kuralı daha yüksek specificity'ye sahip ve hover'da bg'yi inherit'e çeker. */
.icon-block {
  color: var(--icon-color, inherit);
  background-color: var(--icon-bg, transparent);
  /* transition global kuralda */
}
.icon-block:hover {
  color: var(--icon-color-hover, var(--icon-color, inherit)) !important;
  background-color: var(--icon-bg-hover, var(--icon-bg, transparent)) !important;
}
@media (max-width: 768px) {
  .icon-block svg {
    width: var(--icon-size-mobile);
    height: var(--icon-size-mobile);
  }
}

/* Leaf bloklar için border-radius çocukları (img, picture, video) kırpsın diye
   overflow:hidden. Sadece medya bloklarına uygulanır — yazı bloklarında
   (heading/text/quote) text-shadow'un kesilmemesi için bu rule'un dışında
   tutulmuştur. */
.block-image.section-style,
.block-icon.section-style,
.block-video.section-style,
.block-logo-grid.section-style,
.block-cta-button.section-style,
.block-code.section-style,
.block-gallery.section-style {
  overflow: hidden;
}
/* img/picture border-radius'u inherit etsin ki figure radius'una uysun. */
.block-image.section-style img,
.block-image.section-style picture,
.block-image.section-style picture img {
  border-radius: inherit;
}
.section-style--full-width {
  width: 100%;
}
/* full_width kapalı → arka plan tam genişlik kalır, içerik container'a sıkıştırılır.
   max() → ekran > max-width ise eşit padding ile ortalar; küçükse min padding uygular. */
.section-style:not(.section-style--full-width) {
  width: 100%;
  padding-inline: max(
    var(--container-padding-inline, 1rem),
    calc((100% - var(--container-max-width, 1280px)) / 2)
  );
}

/* Flex variant — gap_horizontal/gap_vertical veya align ayarı verildiyse aktif. */
.section-style--flex {
  display: flex;
  flex-direction: column;
}
.section-style--flex.section-style--align-h-start  { align-items: flex-start; }
.section-style--flex.section-style--align-h-center { align-items: center; }
.section-style--flex.section-style--align-h-end    { align-items: flex-end; }
.section-style--flex.section-style--align-v-start  { justify-content: flex-start; }
.section-style--flex.section-style--align-v-center { justify-content: center; }
.section-style--flex.section-style--align-v-end    { justify-content: flex-end; }

/* Columns flex-direction: row — section-style-flex kuralları (0,2,0) align-items/justify-content'i
   yanlış eksene set ediyor. 3-class selector (0,3,0) ile bunları variable'a bağlayarak etkisizleştir. */
.columns.section-style--flex.section-style {
  justify-content: var(--cols-h, flex-start);
  align-items: var(--cols-v, stretch);
}
/* Yatay → justify-content (row'da main axis = yatay) */
.columns.section-style--align-h-start  { --cols-h: flex-start; }
.columns.section-style--align-h-center { --cols-h: center; }
.columns.section-style--align-h-end    { --cols-h: flex-end; }
/* Dikey → align-items (row'da cross axis = dikey) */
.columns.section-style--align-v-start  { --cols-v: flex-start; }
.columns.section-style--align-v-center { --cols-v: center; }
.columns.section-style--align-v-end    { --cols-v: flex-end; }

/* Arka plan ve çerçeve rengi — CSS variable üzerinden; hover override çalışabilsin diye inline style değil. */
.section-style {
  background-color: var(--section-bg-color, transparent);
  border-color: var(--section-border-color, var(--color-border));
}
/* Hover renkleri */
.section-style:hover {
  border-color: var(--section-border-color-hover, var(--section-border-color, var(--color-border)));
  background-color: var(--section-bg-color-hover, var(--section-bg-color, transparent));
}

/* Visibility breakpoint */
@media (max-width: 768px) {
  .section-style--desktop-only { display: none !important; }
}
@media (min-width: 769px) {
  .section-style--mobile-only { display: none !important; }
}

/* ============================================================
   Container blok'u — kart-spesifik stiller (Phase 10c+)
   ============================================================ */

/* Hover-shadow (card_shadow_on_hover=true) — transition global kuralda */
.container--shadow-hover:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Kart arka plan — variable üzerinden; hover override çalışsın diye inline style değil */
.container--has-bg {
  /* Override inherited --section-bg-color from parent Columns; use card-specific bg */
  background-color: var(--container-bg, transparent) !important;
}
.container--bg-hover:hover {
  background-color: var(--container-bg-hover, var(--container-bg, transparent)) !important;
}

/* Kart genişliği — yatayda. CSS variable'lar inline style ile geliyor.
   Parent'a otomatik flex uygulanır (aşağıda :has selector); container'lar
   yatayda sığdığı kadar yan yana dizilir, kalan alt satıra düşer. */
.container--has-width {
  width: var(--container-width-desktop, 100%);
  flex: 0 0 var(--container-width-desktop, 100%);
  max-width: var(--container-width-desktop, 100%);
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .container--has-width {
    width: var(--container-width-mobile, 100%);
    flex-basis: var(--container-width-mobile, 100%);
    max-width: var(--container-width-mobile, 100%);
  }
}

/* Parent oto-flex: kart-genişliği olan container'ların direkt parent'ı row-wrap */
.section__inner:has(> .container--has-width),
.container__inner:has(> .container--has-width) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}

/* İçerik konumu — yatay (flex container davranışı için container__inner) */
.container--ch-left   .container__inner { text-align: left; align-items: flex-start; }
.container--ch-center .container__inner { text-align: center; align-items: center; }
.container--ch-right  .container__inner { text-align: right; align-items: flex-end; }
.container--cv-top    { display: flex; flex-direction: column; justify-content: flex-start; }
.container--cv-middle { display: flex; flex-direction: column; justify-content: center; }
.container--cv-bottom { display: flex; flex-direction: column; justify-content: flex-end; }

/* İçerik blokları parent Container'ın --section-bg-color'ını inherit etmesin */
.section-style.container__inner .section-style,
.container__inner .section-style {
  --section-bg-color: transparent;
}

/* Foto solda/sağda — child img için CSS order */
.container--photo-right > .container__inner > img,
.container--photo-right > .container__inner > .block-image { order: 2; }

/* Foto efektleri — kart içindeki img/.block-image hover'ında uygulanır */
.container--photo-zoom .block-image img,
.container--photo-zoom > .container__inner img {
  transition: transform 0.3s ease;
}
.container--photo-zoom:hover .block-image img,
.container--photo-zoom:hover > .container__inner img {
  transform: scale(1.05);
}
.container--photo-grayscale .block-image img,
.container--photo-grayscale > .container__inner img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
.container--photo-grayscale:hover .block-image img,
.container--photo-grayscale:hover > .container__inner img {
  filter: grayscale(0%);
}
.container--photo-blur .block-image img,
.container--photo-blur > .container__inner img {
  transition: filter 0.3s ease;
}
.container--photo-blur:hover .block-image img,
.container--photo-blur:hover > .container__inner img {
  filter: blur(3px);
}
.container--photo-brightness .block-image img,
.container--photo-brightness > .container__inner img {
  transition: filter 0.3s ease;
}
.container--photo-brightness:hover .block-image img,
.container--photo-brightness:hover > .container__inner img {
  filter: brightness(1.15);
}
/* Static filtreler — kart üzerinde sürekli aktif */
.container--photo-sepia .block-image img,
.container--photo-sepia > .container__inner img { filter: sepia(100%); transition: filter .3s ease; }
.container--photo-sepia:hover .block-image img,
.container--photo-sepia:hover > .container__inner img { filter: sepia(0%); }

.container--photo-darken .block-image img,
.container--photo-darken > .container__inner img { filter: brightness(0.65); transition: filter .3s ease; }
.container--photo-darken:hover .block-image img,
.container--photo-darken:hover > .container__inner img { filter: brightness(1); }

.container--photo-contrast .block-image img,
.container--photo-contrast > .container__inner img { filter: contrast(1.5); transition: filter .3s ease; }
.container--photo-contrast:hover .block-image img,
.container--photo-contrast:hover > .container__inner img { filter: contrast(1); }

.container--photo-saturate .block-image img,
.container--photo-saturate > .container__inner img { filter: saturate(1.8); transition: filter .3s ease; }
.container--photo-saturate:hover .block-image img,
.container--photo-saturate:hover > .container__inner img { filter: saturate(1); }

.container--photo-desaturate .block-image img,
.container--photo-desaturate > .container__inner img { filter: saturate(0.4); transition: filter .3s ease; }
.container--photo-desaturate:hover .block-image img,
.container--photo-desaturate:hover > .container__inner img { filter: saturate(1); }

.container--photo-invert .block-image img,
.container--photo-invert > .container__inner img { filter: invert(100%); transition: filter .3s ease; }
.container--photo-invert:hover .block-image img,
.container--photo-invert:hover > .container__inner img { filter: invert(0%); }

.container--photo-noir .block-image img,
.container--photo-noir > .container__inner img { filter: grayscale(100%) contrast(1.35); transition: filter .3s ease; }
.container--photo-noir:hover .block-image img,
.container--photo-noir:hover > .container__inner img { filter: grayscale(0%) contrast(1); }

.container--photo-vintage .block-image img,
.container--photo-vintage > .container__inner img { filter: sepia(0.5) contrast(1.1) brightness(0.95); transition: filter .3s ease; }
.container--photo-vintage:hover .block-image img,
.container--photo-vintage:hover > .container__inner img { filter: sepia(0) contrast(1) brightness(1); }

.container--photo-warm .block-image img,
.container--photo-warm > .container__inner img { filter: sepia(0.35) saturate(1.4) brightness(1.05); transition: filter .3s ease; }
.container--photo-warm:hover .block-image img,
.container--photo-warm:hover > .container__inner img { filter: none; }

.container--photo-cool .block-image img,
.container--photo-cool > .container__inner img { filter: hue-rotate(180deg) saturate(0.85); transition: filter .3s ease; }
.container--photo-cool:hover .block-image img,
.container--photo-cool:hover > .container__inner img { filter: none; }

.container--photo-dramatic .block-image img,
.container--photo-dramatic > .container__inner img { filter: contrast(1.5) brightness(0.85) saturate(1.2); transition: filter .3s ease; }
.container--photo-dramatic:hover .block-image img,
.container--photo-dramatic:hover > .container__inner img { filter: none; }

.container--photo-faded .block-image img,
.container--photo-faded > .container__inner img { filter: contrast(0.85) saturate(0.7) brightness(1.05); transition: filter .3s ease; }
.container--photo-faded:hover .block-image img,
.container--photo-faded:hover > .container__inner img { filter: none; }

.container--photo-vivid .block-image img,
.container--photo-vivid > .container__inner img { filter: saturate(1.6) contrast(1.15); transition: filter .3s ease; }
.container--photo-vivid:hover .block-image img,
.container--photo-vivid:hover > .container__inner img { filter: none; }

/* Kart genişliği — container elementinin kendisine uygulanır.
   Columns içindeki her kart kendi sütun genişliğinin % kadarını kaplar. */
.container--has-card-width {
  width: var(--card-width-desktop, 100%);
  max-width: var(--card-width-desktop, 100%);
}
@media (max-width: 768px) {
  .container--has-card-width {
    width: var(--card-width-mobile, 100%);
    max-width: var(--card-width-mobile, 100%);
  }
}

/* Yazı (içerik) genişliği — container__inner'a uygulanır.
   Kart genişliği container'ın kendisi; yazı genişliği container içindeki text/heading vb. için. */
.container--has-text-width .container__inner {
  width: var(--container-text-width-desktop, 100%);
  max-width: var(--container-text-width-desktop, 100%);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .container--has-text-width .container__inner {
    width: var(--container-text-width-mobile, 100%);
    max-width: var(--container-text-width-mobile, 100%);
  }
}

/* ============================================================
   Slider (Phase 23) — modern Slider Revolution stili.
   Transition engine: themes/corporate/static/js/main.js
   ============================================================ */

/* --- Container ---------------------------------------------- */
.block-slider {
  position: relative;
  width: 100%;
  isolation: isolate;
  outline: none;
  --slider-h-d: 600px;
  --slider-h-m: 400px;
}
.block-slider:focus-visible { outline: 2px solid var(--color-primary, #2563eb); outline-offset: 2px; }

/* Height modes */
.slider--height-fixed .slider__viewport { height: var(--slider-h-d); }
.slider--height-viewport .slider__viewport { height: 100vh; min-height: 480px; }
.slider--height-content .slider__viewport { height: auto; min-height: var(--slider-h-d); }
@media (max-width: 768px) {
  .slider--height-fixed .slider__viewport { height: var(--slider-h-m); }
  .slider--height-content .slider__viewport { min-height: var(--slider-h-m); }
}

.slider__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* --- Track (slide layout) ----------------------------------- */
.slider__track {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
}
.slider--effect-slide .slider__track,
.slider--effect-parallax .slider__track {
  transition: transform 800ms cubic-bezier(0.65, 0, 0.35, 1);
}
.slider--effect-none .slider__track { transition: none; }

/* Fade / zoom efektlerinde slide'lar stacked */
.slider--effect-fade .slider__track,
.slider--effect-zoom .slider__track {
  display: block;
  position: relative;
}
.slider--effect-fade .slider__slide,
.slider--effect-zoom .slider__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 800ms ease, transform 800ms ease;
}
.slider--effect-fade .slider__slide.is-active,
.slider--effect-zoom .slider__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.slider--effect-zoom .slider__slide.is-leaving {
  transform: scale(1.15);
  opacity: 0;
}

/* --- Slide ---------------------------------------------------- */
.slider__slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
}

/* --- BG katmanı ---------------------------------------------- */
.slider__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.slider__bg-img,
.slider__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.slider__bg-img picture,
.slider__bg-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.slider__bg-img--mobile { display: none; }
@media (max-width: 768px) {
  .slider__bg-img--desktop { display: none; }
  .slider__bg-img--mobile { display: block; }
}
.slider__bg-video {
  object-fit: cover;
}
.slider__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Ken Burns — yavaş zoom (aktif slide'da) */
.slider__slide--ken-burns.is-active .slider__bg-img img,
.slider__slide--ken-burns.is-active .slider__bg-video {
  animation: slider-kenburns 12s ease-out forwards;
}
@keyframes slider-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.15); }
}

/* Parallax — BG yavaş hareket eder (JS data-parallax-speed kontrol eder) */
.slider__slide--parallax .slider__bg {
  will-change: transform;
}

/* --- İçerik (9-grid yerleşim) -------------------------------- */
.slider__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  padding: clamp(16px, 5vw, 64px);
  gap: clamp(8px, 2vw, 16px);
  pointer-events: none;
}
.slider__content > * { pointer-events: auto; }

/* 9 grid pozisyon */
.slider__slide--pos-top-left      .slider__content { align-content: start;  justify-items: start;  text-align: left; }
.slider__slide--pos-top-center    .slider__content { align-content: start;  justify-items: center; text-align: center; }
.slider__slide--pos-top-right     .slider__content { align-content: start;  justify-items: end;    text-align: right; }
.slider__slide--pos-center-left   .slider__content { align-content: center; justify-items: start;  text-align: left; }
.slider__slide--pos-center        .slider__content { align-content: center; justify-items: center; text-align: center; }
.slider__slide--pos-center-right  .slider__content { align-content: center; justify-items: end;    text-align: right; }
.slider__slide--pos-bottom-left   .slider__content { align-content: end;    justify-items: start;  text-align: left; }
.slider__slide--pos-bottom-center .slider__content { align-content: end;    justify-items: center; text-align: center; }
.slider__slide--pos-bottom-right  .slider__content { align-content: end;    justify-items: end;    text-align: right; }

/* text_align override (kullanıcı eksplisit ayarladıysa) */
.slider__slide--align-left   .slider__content { text-align: left; }
.slider__slide--align-center .slider__content { text-align: center; }
.slider__slide--align-right  .slider__content { text-align: right; }

.slider__layer {
  max-width: min(720px, 90%);
  opacity: 0;
  will-change: transform, opacity;
}
.slider__layer.is-animating {
  animation-duration: 700ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
}

/* Layer animation keyframes */
@keyframes slider-layer-fade        { from { opacity: 0;                                  } to { opacity: 1; transform: none; } }
@keyframes slider-layer-fadeUp      { from { opacity: 0; transform: translateY(40px);     } to { opacity: 1; transform: none; } }
@keyframes slider-layer-fadeDown    { from { opacity: 0; transform: translateY(-40px);    } to { opacity: 1; transform: none; } }
@keyframes slider-layer-zoomIn      { from { opacity: 0; transform: scale(0.85);          } to { opacity: 1; transform: none; } }
@keyframes slider-layer-slideLeft   { from { opacity: 0; transform: translateX(60px);     } to { opacity: 1; transform: none; } }
@keyframes slider-layer-slideRight  { from { opacity: 0; transform: translateX(-60px);    } to { opacity: 1; transform: none; } }

.slider__layer[data-anim="none"].is-animating       { opacity: 1; animation: none; }
.slider__layer[data-anim="fade"].is-animating       { animation-name: slider-layer-fade; }
.slider__layer[data-anim="fadeUp"].is-animating     { animation-name: slider-layer-fadeUp; }
.slider__layer[data-anim="fadeDown"].is-animating   { animation-name: slider-layer-fadeDown; }
.slider__layer[data-anim="zoomIn"].is-animating     { animation-name: slider-layer-zoomIn; }
.slider__layer[data-anim="slideLeft"].is-animating  { animation-name: slider-layer-slideLeft; }
.slider__layer[data-anim="slideRight"].is-animating { animation-name: slider-layer-slideRight; }

/* Serbest container modu: layer sarmalayıcı görünür, çocuklar tek tek animate edilir */
.slider__layer--content {
  max-width: min(860px, 96%);
  opacity: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 16px);
}
.slider__layer--content > * {
  opacity: 0;
  will-change: transform, opacity;
}

/* JS tarafından her bloka eklenen stagger animasyon sınıfı */
.slider-anim {
  animation-duration: 700ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
}

/* --- Navigation arrows --------------------------------------- */
.slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(255, 255, 255, 0.88);
  border: 0;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  transition: background 200ms ease, transform 200ms ease, opacity 200ms ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  opacity: 0;
}
.block-slider:hover .slider__nav,
.block-slider:focus-within .slider__nav { opacity: 1; }
.slider__nav:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.slider__nav:active { transform: translateY(-50%) scale(0.96); }
.slider__nav:disabled { opacity: 0.3; cursor: not-allowed; }
.slider__nav--prev { left: 16px; }
.slider__nav--next { right: 16px; }
@media (max-width: 640px) {
  .slider__nav { opacity: 1; width: 36px; height: 36px; }
  .slider__nav--prev { left: 8px; }
  .slider__nav--next { right: 8px; }
}

/* --- Pagination ---------------------------------------------- */
.slider__pagination {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.slider__dot {
  border: 0;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 0;
  transition: background 220ms ease, width 220ms ease, color 220ms ease;
  color: transparent;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.slider__dot:hover { background: rgba(255, 255, 255, 0.85); }

/* Pagination styles */
.slider--pagination-dots .slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.slider--pagination-dots .slider__dot--active {
  background: #fff;
  width: 24px;
}
.slider--pagination-bars .slider__dot {
  width: 32px;
  height: 4px;
  border-radius: 2px;
}
.slider--pagination-bars .slider__dot--active { background: #fff; }
.slider--pagination-numbers .slider__dot {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider--pagination-numbers .slider__dot--active {
  background: #fff;
  color: #111;
}

/* ============================================================
   CARD STACK — görsel üstte, içerik altta
   ============================================================ */
.block-card-stack {
  /* overflow: visible — text-shadow ve içerik taşması için.
     Image clipping .card-stack__image kendi içinde yapılır. */
  display: flex;
  flex-direction: column;
  background: var(--container-bg, var(--color-bg));
}

/* Görsel bölümü — kendi border-radius'unu kart'tan inherit ederek
   üst köşelerde kart border'ına uyar. */
.card-stack__image {
  flex-shrink: 0;
  overflow: hidden;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
/* aspect-ratio sadece görsel-only kartlarda; image div'in içinde
   başka blok (heading/text/cta/quote/button) varsa doğal yüksekliğe izin
   verilir, içerik klip edilmez. */
.card-stack__image:not(:has(.block-heading, .block-text, .block-cta, .block-quote, .block-button)) {
  aspect-ratio: 4 / 3;
}
.card-stack__image img,
.card-stack__image .block-image img { width: 100%; height: 100%; display: block; }

/* İçerik bölümü */
.card-stack__body { flex: 1; display: flex; flex-direction: column; }

/* content_horizontal → text alignment */
.block-card-stack.container--ch-left   .card-stack__body { text-align: left;   align-items: flex-start; }
.block-card-stack.container--ch-center .card-stack__body { text-align: center; align-items: center; }
.block-card-stack.container--ch-right  .card-stack__body { text-align: right;  align-items: flex-end; }

/* İçerik blokları parent'ın --section-bg-color'ını inherit etmesin */
.block-card-stack .section-style {
  --section-bg-color: transparent;
}

/* ============================================================
   CARD COVER — görsel arka plan, içerik üst katmanda
   ============================================================ */
.block-card-cover {
  position: relative;
  overflow: hidden;
}

/* Arka plan görseli — normal akışta, yüksekliği karta verir */
.card-cover__bg { position: relative; }
.card-cover__bg img,
.card-cover__bg .block-image,
.card-cover__bg .block-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
.card-cover--zoom-image .card-cover__bg img,
.card-cover--zoom-image .card-cover__bg .block-image img {
  transition: transform 0.5s ease;
}
.card-cover--zoom-image:hover .card-cover__bg img,
.card-cover--zoom-image:hover .card-cover__bg .block-image img {
  transform: scale(1.06);
}

/* Overlay */
.card-cover__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  pointer-events: none;
}

/* İçerik katmanı — görsel üzerine absolute */
.card-cover__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  justify-content: flex-end;
}
.card-cover--pos-top    .card-cover__body { justify-content: flex-start; }
.card-cover--pos-center .card-cover__body { justify-content: center; }
.card-cover--pos-bottom .card-cover__body { justify-content: flex-end; }

/* Yazı rengi */
.card-cover--text-light .card-cover__body,
.card-cover--text-light .card-cover__body * { color: var(--color-bg); }
.card-cover--text-dark  .card-cover__body,
.card-cover--text-dark  .card-cover__body * { color: var(--color-fg); }

/* content_horizontal → body text alignment */
.block-card-cover.container--ch-left   .card-cover__body { align-items: flex-start; text-align: left; }
.block-card-cover.container--ch-center .card-cover__body { align-items: center;     text-align: center; }
.block-card-cover.container--ch-right  .card-cover__body { align-items: flex-end;   text-align: right; }

/* content_vertical → body justify (overrides pos-*) */
.block-card-cover.container--cv-top    .card-cover__body { justify-content: flex-start; }
.block-card-cover.container--cv-middle .card-cover__body { justify-content: center; }
.block-card-cover.container--cv-bottom .card-cover__body { justify-content: flex-end; }

/* İçerik blokları parent'ın --section-bg-color'ını inherit etmesin */
.block-card-cover .section-style {
  --section-bg-color: transparent;
}

/* ============================================================
   CARD MEDIA — medya sol/sağ, içerik karşı tarafta
   ============================================================ */
.block-card-media {
  display: flex;
  flex-direction: row;
  background: var(--color-bg);
  overflow: hidden;
}

/* Medya bölümü */
.card-media__media {
  flex: 0 0 var(--media-width, 30%);
  width: var(--media-width, 30%);
  overflow: hidden;
}
.card-media__media img,
.card-media__media .block-image,
.card-media__media .block-image img,
.card-media__media .block-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-media--right .card-media__media { order: 2; }
.card-media--right .card-media__body  { order: 1; }

/* İçerik bölümü */
.card-media__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.card-media--align-top    .card-media__body { justify-content: flex-start; }
.card-media--align-center .card-media__body { justify-content: center; }
.card-media--align-bottom .card-media__body { justify-content: flex-end; }

/* content_vertical → body justify */
.block-card-media.container--cv-top    .card-media__body { justify-content: flex-start; }
.block-card-media.container--cv-middle .card-media__body { justify-content: center; }
.block-card-media.container--cv-bottom .card-media__body { justify-content: flex-end; }

/* photo_left=false → medya sağa taşı (container--photo-right sınıfıyla) */
.block-card-media.container--photo-right .card-media__media { order: 2; }
.block-card-media.container--photo-right .card-media__body  { order: 1; }

/* İçerik blokları parent'ın --section-bg-color'ını inherit etmesin */
.block-card-media .section-style {
  --section-bg-color: transparent;
}

/* Mobilde alt alta */
@media (max-width: 640px) {
  .card-media--stack-mobile {
    flex-direction: column;
  }
  .card-media--stack-mobile .card-media__media {
    width: 100%;
    flex: none;
    max-height: 220px;
  }
  .card-media--stack-mobile .card-media__media img,
  .card-media--stack-mobile .card-media__media .block-image img {
    height: 100%;
  }
  .card-media--stack-mobile.card-media--right .card-media__media { order: 0; }
  .card-media--stack-mobile.card-media--right .card-media__body  { order: 0; }
}

/* --- Editor preview tweaks ----------------------------------- */
/* Preview iframe içinde slider tıklanınca seçilebilsin diye nav/dot e.stopPropagation
   JS tarafında yapılır. Buraya görsel pointer tweak gerekmiyor. */

/* --- Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .slider__track,
  .slider__slide,
  .slider__layer.is-animating,
  .slider-anim,
  .slider__slide--ken-burns.is-active .slider__bg-img img,
  .slider__slide--ken-burns.is-active .slider__bg-video {
    animation: none !important;
    transition: none !important;
  }
  .slider__layer { opacity: 1; }
  .slider__layer--content > * { opacity: 1; }
}