/*
 * 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-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);
}

/* Hero corporate — eyebrow, çift CTA (amber + cam), güven çipleri, dikey ortalama.
   Eski hand-coded hero'nun premium görünümünü native hero bloğuna taşır. */
.hero--corporate {
  min-height: clamp(440px, 64vh, 640px);
  display: flex;
  align-items: center;
}
.hero--corporate .hero__content {
  padding-block: var(--space-10);
  max-width: 660px;
}
.hero--corporate.hero--align-center .hero__content {
  margin-inline: auto;
  text-align: center;
}
.hero__eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-block-end: var(--space-4);
}
.hero--corporate .hero__title {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  font-weight: 800;
}
.hero--corporate .hero__subtitle {
  font-size: clamp(1rem, 1.4vw, 1.16rem);
  line-height: 1.6;
  max-width: 48ch;
  margin-block-end: var(--space-6);
}
.hero--corporate.hero--align-center .hero__subtitle { margin-inline: auto; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}
.hero--corporate.hero--align-center .hero__actions { justify-content: center; }
.hero__cta {
  padding-inline: var(--space-7);
  padding-block: 0.8rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  text-decoration: none;
}
.hero__cta--primary {
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  color: #1b1205;
}
.hero__cta--primary:hover { filter: brightness(0.95); }
.hero__cta--secondary {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
}
.hero__cta--secondary:hover { background: rgba(255, 255, 255, 0.2); }
.hero__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: 0;
  margin: var(--space-6) 0 0;
}
.hero--corporate.hero--align-center .hero__chips { justify-content: center; }
.hero__chip {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
}

/* --- Breadcrumb / Sayfa Başlığı banner (block-breadcrumb) ---------------
 * Başlık + kırıntı yolu bandı. Üç düzen (başlık solda · başlık sağda · üst
 * üste). Yükseklik: GÖRSELLİ → fotoğrafın yüksekliğinden (akışta figure),
 * GÖRSELSİZ → "Boşluklar" (section padding) ile. Yazı stilleri Typography
 * (text_color / font_size_* …) üzerinden gelir; varsayılan açık (beyaz).
 */
.breadcrumb-banner {
  position: relative;
  isolation: isolate;
  /* FULL-BLEED: section (ve dolayısıyla arka plan rengi/görseli) her zaman
   * viewport tam genişliğinde — herhangi bir sayfa container'ı / sol girinti
   * olsa bile kenardan kenara taşar. İçerik (__inner) container içinde ortalı
   * kaldığı için "zemin full, yazılar container'da" sonucu elde edilir. */
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}
/* Görselsiz modda banner'a SABİT arka plan verilmez — renk girilmezse
 * transparan kalır. Renk "Yazı Rengi → Zemin" veya "Boşluklar → Arka Plan
 * Rengi" ile verilir (içeriğe/section-style'a uygulanır). Görselli modda
 * varsayılan açık (beyaz) yazı; her iki modda Typography text_color ezer. */
.breadcrumb-banner--bg-image {
  color: #fff;
}

/* Görsel ZEMİNE gelir: figure absolute olarak tüm banner'ı kaplar ve
 * object-fit: cover ile alanı doldurur. Banner yüksekliği içerik + "Boşluklar"
 * padding'inden gelir; görsel o alanı kaplar. */
.breadcrumb-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
}
.breadcrumb-banner__bg.image,
.breadcrumb-banner__bg .image__viewport,
.breadcrumb-banner__bg picture,
.breadcrumb-banner__bg img {
  width: 100%;
  height: 100%;
}
.breadcrumb-banner__bg img {
  display: block;
  object-fit: cover;
}
/* İçerik akışta ve görselin ÜSTÜNDE (z-index). Dikey boşluk (yükseklik) SABİT
 * varsayılan vermez — tamamen "Boşluklar" sekmesinden gelir; 0 girilince 0 olur.
 * (gap yalnızca başlık ↔ linkler arası mesafedir, padding değil.) */
.breadcrumb-banner__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-inline: auto;
  display: flex;
  gap: var(--space-2) var(--space-6);
  align-items: center;
  /* Yatay kenar boşluğu her zaman; DİKEY boşluk yalnızca "Boşluklar"dan
   * (0 girilince 0 olur — section-style inline padding bunu ezer). */
  padding-inline: var(--container-padding-inline, 1rem);
}
/* Full Genişlik KAPALI: içerik site container genişliğinde ortalı kalır; arka
 * plan (section) tam genişlikte. Section root'a uygulanan bg_color full görünür,
 * yazılar container içinde. */
.breadcrumb-banner__inner--contained {
  max-width: var(--container-max-width, 1280px);
}
/* İçerik kutusu HER MODDA şeffaf — banner zemini "Yazı Rengi → Zemin" (section
 * root) veya görsel ile verilir. İçerik kutusu kendi arka planını basıp
 * zemini/görseli ortadan kapatmasın. ``!important`` gerekli: eski typography
 * ``text_background_color`` ve section-style ``background_color`` değerleri
 * ``ts.style``/``ss.style`` ile INLINE background-color basıyor (inline, sınıf
 * seçicisini yener). */
.breadcrumb-banner .breadcrumb-banner__inner {
  background: transparent !important;
}
/* Görselli modda banner yüksekliği = Görsel Ayarları'ndaki "Yüksekliği
 * (Masaüstü/Mobil)" değeri (--photo-height-d / -m). Değer girilmediyse içerik +
 * padding kadar (auto). Banner flex ile içeriği dikeyde ortalar; görsel
 * (absolute, cover) bu alanı kaplar. */
.breadcrumb-banner--bg-image {
  display: flex;
  align-items: center;
  min-height: var(--photo-height-d, auto);
}
@media (max-width: 768px) {
  .breadcrumb-banner--bg-image {
    min-height: var(--photo-height-m, var(--photo-height-d, auto));
  }
}
.breadcrumb-banner__title-wrap { margin: 0; }
.breadcrumb-banner__title {
  margin: 0;
  font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-3xl));
  line-height: 1.15;
  color: var(--bc-fg, inherit);
}
/* Yazı boyutu hiyerarşisi (Yazı Büyüklüğü = --typography-font-size-d):
 *   • Linkler  → değerin 0.85 KATI
 *   • Başlık   → değerin 2 KATI
 * Yazı boyutu ayarlanmadıysa linkler taban boyutun 0.85'i (em), başlık kendi
 * varsayılan clamp boyutunu korur. (--font-size-sm artık kullanılmıyor.)
 * (0,2,x) seçiciler generic ``.typography-style--has-font-size <tag>`` (0,1,1)
 * kuralını ezecek özgüllükte. */
.breadcrumb-banner__nav { font-size: 0.85em; }
.typography-style--has-font-size .breadcrumb-banner__title {
  font-size: calc(var(--typography-font-size-d) * 2);
}
.typography-style--has-font-size .breadcrumb-banner__item,
.typography-style--has-font-size .breadcrumb-banner__item a,
.typography-style--has-font-size .breadcrumb-banner__item span {
  font-size: calc(var(--typography-font-size-d));
}
@media (max-width: 768px) {
  .typography-style--has-font-size-m .breadcrumb-banner__title {
    font-size: calc(var(--typography-font-size-m) * 2);
  }
  .typography-style--has-font-size-m .breadcrumb-banner__item,
  .typography-style--has-font-size-m .breadcrumb-banner__item a,
  .typography-style--has-font-size-m .breadcrumb-banner__item span {
    font-size: calc(var(--typography-font-size-m));
  }
}
/* Büyük-Küçük Harf (text-transform) ve Harf Aralığı (letter-spacing) inline
 * olarak iç sarmalayıcıya uygulanır ve kalıtımla TÜM metne iner. İstenen:
 * yalnızca BAŞLIK etkilensin → linklerde kalıtımı iptal et. */
.breadcrumb-banner__nav {
  text-transform: none;
  letter-spacing: normal;
}
/* Yazı Kalınlığı (font-weight) linklere de bağlansın: hem ``<a>`` hem aktif
 * sayfa ``<span>``'i. Özgüllük (0,2,1) aşağıdaki sabit ``aria-current`` 600
 * kuralını (0,2,0) ezer; ayar yokken aktif sayfa varsayılan 600 kalır. */
.typography-style--has-font-weight .breadcrumb-banner__item a,
.typography-style--has-font-weight .breadcrumb-banner__item span {
  font-weight: var(--typography-font-weight-d);
}
@media (max-width: 768px) {
  .typography-style--has-font-weight-m .breadcrumb-banner__item a,
  .typography-style--has-font-weight-m .breadcrumb-banner__item span {
    font-weight: var(--typography-font-weight-m);
  }
}
.breadcrumb-banner__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Boşluklar em tabanlı → link yazı büyüklüğüyle orantılı ölçeklenir. */
  gap: 0.5em;
  padding: 0;
  margin: 0;
}
.breadcrumb-banner__item { display: inline-flex; align-items: center; }
/* Ayraç ikonu, link YAZI BÜYÜKLÜĞÜNE dinamik bağlı: ``em`` zaten elementin
 * resolved font-size'ına (typography ayarlıysa o, değilse varsayılan link
 * boyutu) göre ölçeklenir. Makul oran ~0.85; masaüstü/mobil otomatik. */
.breadcrumb-banner__item:not(:last-child)::after {
  margin-inline-start: 0.5em;
  font-size: calc(var(--typography-font-size-d) * 0.85);
  line-height: 1;
  color: currentColor;
  opacity: 0.55;
}
.breadcrumb-banner--sep-pipe .breadcrumb-banner__item:not(:last-child)::after { content: "|"; }
.breadcrumb-banner--sep-chevron .breadcrumb-banner__item:not(:last-child)::after { content: "\203A"; }
.breadcrumb-banner--sep-slash .breadcrumb-banner__item:not(:last-child)::after { content: "/"; }
.breadcrumb-banner--sep-dot .breadcrumb-banner__item:not(:last-child)::after { content: "\00B7"; }
.breadcrumb-banner__item a { color: var(--bc-fg, var(--color-tertiary, inherit)); text-decoration: none; }
.breadcrumb-banner__item span { color: var(--bc-fg, var(--color-tertiary, inherit)); }
/* Link hover rengi (Yazı Rengi → Hover paleti). Ayarlanmadıysa renk değişmez,
 * yalnızca alt çizgi gelir. */
.breadcrumb-banner__item a:hover { color: var(--bc-link-hover, currentColor); text-decoration: underline; }
.breadcrumb-banner__item [aria-current="page"] { font-weight: 600; }

/* Düzen: başlık ve linkler üst üste (varsayılan) */
.breadcrumb-banner--layout-stacked .breadcrumb-banner__inner {
  flex-direction: column;
  justify-content: center;
}
.breadcrumb-banner--layout-stacked .breadcrumb-banner__inner,
.breadcrumb-banner--layout-stacked .breadcrumb-banner__list {
  align-items: flex-start;
}
/* Düzen: yatay (başlık solda/sağda). Konumlama ``margin-auto`` ile yapılır —
 * ``space-between`` değil — böylece başlık gizliyken bile linkler doğru tarafta
 * kalır (tek çocuk varken space-between onu başa iter). */
.breadcrumb-banner--layout-title_left .breadcrumb-banner__inner,
.breadcrumb-banner--layout-title_right .breadcrumb-banner__inner {
  flex-direction: row;
  align-items: center;
}
/* Başlık solda, linkler sağda → linkleri sağa it. */
.breadcrumb-banner--layout-title_left .breadcrumb-banner__nav {
  margin-inline-start: auto;
}
/* Başlık sağda, linkler solda → linkleri görsel olarak başa al (order), başlığı
 * sağa it. ``order`` olmadan başlık DOM'da önce geldiği için margin-auto hem
 * başlığı hem de ardındaki linkleri sağa iterdi. */
.breadcrumb-banner--layout-title_right .breadcrumb-banner__nav {
  order: -1;
}
.breadcrumb-banner--layout-title_right .breadcrumb-banner__title-wrap {
  margin-inline-start: auto;
}
@media (max-width: 640px) {
  .breadcrumb-banner--layout-title_left .breadcrumb-banner__inner,
  .breadcrumb-banner--layout-title_right .breadcrumb-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  /* Mobilde alt alta → yatay margin-auto ve order sıfırlanır (doğal sıra:
     başlık üstte, linkler altta). */
  .breadcrumb-banner--layout-title_left .breadcrumb-banner__nav,
  .breadcrumb-banner--layout-title_right .breadcrumb-banner__title-wrap {
    margin-inline-start: 0;
  }
  .breadcrumb-banner--layout-title_right .breadcrumb-banner__nav {
    order: 0;
  }
}

/* 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.
   Wrapper div (.block-image) section style'ı alır; <figure> (.image) foto boyutunu. */
.block-image > figure {
  width: var(--photo-width-d, 100%);
  height: var(--photo-height-d, auto);
  overflow: hidden;
  margin: 0 auto;
}
.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 > figure {
    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;
}
/* Kemer (arch) görsel — image bloğuna custom_class="arch-photo" verilince üst
   köşeler tam yay, alt köşeler hafif yuvarlak olur. figure zaten overflow:hidden
   olduğu için içteki görsel kemer şekline kırpılır. */
.block-image.arch-photo > figure {
  border-radius: 50% 50% 12% 12% / 42% 42% 6% 6%;
}
/* 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; }
/* === İstatistik Sayacı (stats_counter) — kolon ızgarası + temel tipografi === */
.stats { display: grid; gap: 28px; width: 100%; }
.stats--cols-1 { grid-template-columns: 1fr; }
.stats--cols-2 { grid-template-columns: repeat(2, 1fr); }
.stats--cols-3 { grid-template-columns: repeat(3, 1fr); }
.stats--cols-4 { grid-template-columns: repeat(4, 1fr); }
.stats--cols-5 { grid-template-columns: repeat(5, 1fr); }
.stats--cols-6 { grid-template-columns: repeat(6, 1fr); }
.stats--cols-7 { grid-template-columns: repeat(7, 1fr); }
.stats--cols-8 { grid-template-columns: repeat(8, 1fr); }
.stats--align-center .stats__item { text-align: center; }
.stats--align-right .stats__item { text-align: right; }
.stats__icon { display: inline-flex; margin-bottom: 10px; }
.stats__value { font-size: 2.2em; font-weight: 700; line-height: 1.1; }
/* tema globali span rengini sabitler — deger icindeki span'ler kalitimla gelsin */
.stats__value span { color: inherit; }
.stats__affix { font-size: 0.5em; font-style: normal; }
.stats__label { margin-top: 6px; opacity: 0.75; }
.stats--boxed .stats__item { border: 1px solid var(--color-border, #e5e7eb); border-radius: 12px; padding: 22px; }
.stats--dividers .stats__item + .stats__item { border-left: 1px solid var(--color-border, #e5e7eb); padding-left: 28px; }
@media (max-width: 768px) {
  .stats[class*="stats--cols-"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .stats[class*="stats--cols-"] { grid-template-columns: 1fr; }
}

/* Ayraç genişlik modifier'ları — narrow: etiket önü kısa dekoratif çizgi.
   default davranış (tam genişlik hr) değişmez. */
.divider--narrow { width: 36px; flex: 0 0 auto; }
.divider--narrow hr { width: 36px; margin: 0; border: 0; border-top: 1px solid; }

/* Etiket yazısı yardımcısı (blok Gelişmiş > CSS class: "etiket-cizgi"):
   metnin soluna kısa çizgi ekler; çizgi rengi yazının renginden (currentColor). */
.text.etiket-cizgi .text__inner > p:first-child::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  vertical-align: middle;
  margin-right: 14px;
}

/* Özgüllük (0,2,0): typography span kuralı (0,1,1) eyebrow'u ezmesin */
.heading .heading__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.9em;
}
/* solda kısa dekoratif çizgi */
.heading .heading__eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
/* ortalı/sağa hizalı başlıkta eyebrow da aynı hizaya gelsin */
.heading--align-center .heading__eyebrow { justify-content: center; }
.heading--align-right .heading__eyebrow { justify-content: flex-end; }
.heading__text--has-icon { display: flex; align-items: center; gap: 0.4em; }
/* *kelime* vurgusu — rengi blok ayarındaki --heading-accent değişkeninden alır.
   (0,2,1) özgüllük: typography --has-color'un genel em kuralını (0,1,1) ezer. */
.heading .heading__text em {
  font-style: italic;
  color: var(--heading-accent, inherit);
}

/* === Phase 7d+ — Text block: alignment + width modifier'ları === */
/* Metin bloğu varsayılan TAM GENİŞLİK — eski Dar/Normal/Tam (text--*) ayarı
   kaldırıldı; daraltma kapsayıcı kartın "Yazı Genişliği" ayarından yapılır. */
.text { 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 — card_width ayarsız wrapper: eşit dağılım */
.columns > [data-mintweb-block]:not([style*="--card-width-int"]) {
  flex: 1;
  min-width: 0;
  display: flex;
}

/* Preview — card_width ayarlı wrapper: gap-compensated yüzde (kenarlarda hizalı) */
.columns > [data-mintweb-block][style*="--card-width-int"] {
  flex: 0 0 calc(var(--card-width-desktop) - var(--cols-gap-h, 0px) * (1 - var(--card-width-int) / 100));
  min-width: 0;
  display: flex;
}

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

/* Production: section__inner/container__inner olmayan (leaf) tam genişlik bloklar
   columns içinde alt alta sıralanır — yan yana değil. */
.columns > .section-style--full-width:not([data-mintweb-block]):not(.container--has-card-width):not(:has(> .section__inner)):not(:has(> .container__inner)) {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Preview wrapper içindeki blok tam genişliği kaplasın */
.columns > [data-mintweb-block] > * {
  flex: 1;
  min-width: 0;
}

/* Public modda card_width ayarlı çocuklar: gap-compensated yüzde (kenarlarda hizalı) */
.columns > .container--has-card-width {
  flex: 0 0 calc(var(--card-width-desktop, 100%) - var(--cols-gap-h, 0px) * (1 - var(--card-width-int, 100) / 100));
  width: calc(var(--card-width-desktop, 100%) - var(--cols-gap-h, 0px) * (1 - var(--card-width-int, 100) / 100));
  min-width: 0;
}

/* Preview wrapper yüzde tabanlı boyutlanır; içindeki container 100% kaplamalı
   — global .container--has-card-width kuralının tekrar kısıtlamasını engelle. */
.columns > [data-mintweb-block] > .container--has-card-width {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 768px) {
  .columns--stack-mobile {
    flex-direction: column;
  }
  .columns--stack-mobile > *:not([data-mintweb-block]) {
    flex: 0 0 100%;
  }
  .columns--stack-mobile > [data-mintweb-block] {
    flex: 0 0 100%;
  }
  .columns > [data-mintweb-block][style*="--card-width-int"] {
    flex: 0 0 calc(var(--card-width-mobile, 100%) - var(--cols-gap-h, 0px) * (1 - var(--card-width-int) / 100));
    width: calc(var(--card-width-mobile, 100%) - var(--cols-gap-h, 0px) * (1 - var(--card-width-int) / 100));
    min-width: 0;
  }
  .columns > .container--has-card-width {
    flex: 0 0 calc(var(--card-width-mobile, 100%) - var(--cols-gap-h, 0px) * (1 - var(--card-width-int, 100) / 100));
    width: calc(var(--card-width-mobile, 100%) - var(--cols-gap-h, 0px) * (1 - var(--card-width-int, 100) / 100));
    min-width: 0;
  }
  /* Alt alta dizilen (stack_mobile) kartlar tam genişlik: yan yana gap
     telafisi geçersiz — card_width_mobile kadar (varsayılan 100%), gap çıkarma. */
  .columns--stack-mobile > .container--has-card-width,
  .columns--stack-mobile > [data-mintweb-block][style*="--card-width-int"] {
    flex: 0 0 var(--card-width-mobile, 100%);
    width: var(--card-width-mobile, 100%);
    max-width: var(--card-width-mobile, 100%);
  }
  /* Mobilde sütunlar alt alta dizilince keskin ikili zemin bozulur — kaldır.
     dual_bg_columns ise mobil ikili zemini (--split-bg-m: dikey gradient) korur. */
  .split-columns.columns--stack-mobile {
    background-image: var(--split-bg-m, none);
  }
}

/* İkili Zemin Sütunlar — panelden gelen keskin background split.
   --split-bg değeri split_background template tag'i tarafından üretilir;
   background-color (--section-bg-color) tabanın üstüne bindirilir. */
.split-columns {
  background-image: var(--split-bg, none);
}
/* Mobil yatay kaplama: --split-bg-m tanımlıysa onu kullan (yoksa masaüstü
   --split-bg'ye düş). Alt alta dizilen (columns--stack-mobile) bloklarda
   yukarıdaki daha özgül kural (background-image:none) kazanır. */
@media (max-width: 768px) {
  .split-columns {
    background-image: var(--split-bg-m, var(--split-bg, none));
  }
}

/* === Footer içi yerleşim — kartlar genişliklerine göre yan yana (columns ile
   aynı flex + card_width davranışı; toplam 100'ü geçince alt satıra sarar). === */
.footer_tag__inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--footer-gap, 24px);
  align-items: flex-start;
}
/* Footer'da card_width tanımsız çocuklar (Başlık/Metin vb.) tam satır kaplar;
   yan yana dizilim yalnızca card_width verilmiş kartlar içindir. */
.footer_tag__inner > [data-mintweb-block]:not([style*="--card-width-int"]),
.footer_tag__inner > *:not([data-mintweb-block]):not(.container--has-card-width) {
  flex: 0 0 100%;
  min-width: 0;
}
.footer_tag__inner > [data-mintweb-block] {
  display: flex;
}
.footer_tag__inner > [data-mintweb-block] > * {
  flex: 1;
  min-width: 0;
}
.footer_tag__inner > [data-mintweb-block][style*="--card-width-int"] {
  flex: 0 0 calc(var(--card-width-desktop) - var(--footer-gap, 24px) * (1 - var(--card-width-int) / 100));
  min-width: 0;
}
.footer_tag__inner > .container--has-card-width {
  flex: 0 0 calc(var(--card-width-desktop, 100%) - var(--footer-gap, 24px) * (1 - var(--card-width-int, 100) / 100));
  width: calc(var(--card-width-desktop, 100%) - var(--footer-gap, 24px) * (1 - var(--card-width-int, 100) / 100));
  min-width: 0;
}
/* Önizleme: card_width hem wrapper'a (flex-basis) hem de article'a uygulanınca
   çift daralma olur. Wrapper genişliği yönetir; içteki container tam kaplasın. */
.footer_tag__inner > [data-mintweb-block] > .container--has-card-width {
  width: 100%;
  max-width: 100%;
}
@media (max-width: 768px) {
  .footer_tag__inner > [data-mintweb-block][style*="--card-width-int"],
  .footer_tag__inner > .container--has-card-width {
    flex: 0 0 calc(var(--card-width-mobile, 100%) - var(--footer-gap, 24px) * (1 - var(--card-width-int, 100) / 100));
    width: calc(var(--card-width-mobile, 100%) - var(--footer-gap, 24px) * (1 - var(--card-width-int, 100) / 100));
    min-width: 0;
  }
}

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

/* stack_mobile, section-style--flex'i ezmeli — aksi halde (0,2,0) row kuralı
   (0,1,0) .columns--stack-mobile'ı ezip mobilde sütunları yan yana bırakıyordu.
   (0,3,0) + media ile mobilde alt alta dizilmeyi garanti et. */
@media (max-width: 768px) {
  .columns.section-style--flex.columns--stack-mobile {
    flex-direction: column;
  }
}

/* === 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. */
/* --ts-color: text rengi ayarlandığında tüm child elementlere doğrudan uygula */
.typography-style--has-color h1, .typography-style--has-color h2,
.typography-style--has-color h3, .typography-style--has-color h4,
.typography-style--has-color h5, .typography-style--has-color h6,
.typography-style--has-color p,  .typography-style--has-color span,
.typography-style--has-color li, .typography-style--has-color a,
.typography-style--has-color blockquote,
.typography-style--has-color strong, .typography-style--has-color em,
.typography-style--has-color .heading__text {
  color: var(--ts-color);
}

.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 strong, .typography-style--has-font-size-m em,
  .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);
  }
}

/* Hover rengi — wrapper hover'ında tüm child elementlere doğrudan uygula */
.typography-style--has-color-hover:hover,
.typography-style--has-color-hover:hover h1,
.typography-style--has-color-hover:hover h2,
.typography-style--has-color-hover:hover h3,
.typography-style--has-color-hover:hover h4,
.typography-style--has-color-hover:hover h5,
.typography-style--has-color-hover:hover h6,
.typography-style--has-color-hover:hover .heading__text,
.typography-style--has-color-hover:hover p,
.typography-style--has-color-hover:hover span,
.typography-style--has-color-hover:hover li,
.typography-style--has-color-hover:hover strong,
.typography-style--has-color-hover:hover em {
  color: var(--typography-color-hover) !important;
}
.typography-style--has-bg-hover:hover,
.typography-style--has-bg-hover:hover h1,
.typography-style--has-bg-hover:hover h2,
.typography-style--has-bg-hover:hover h3,
.typography-style--has-bg-hover:hover h4,
.typography-style--has-bg-hover:hover h5,
.typography-style--has-bg-hover:hover h6,
.typography-style--has-bg-hover:hover .heading__text,
.typography-style--has-bg-hover:hover p {
  background-color: var(--typography-bg-hover) !important;
}

/* 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;
}
/* Text bloğunda clamp iç sarmalayıcıya (.text__inner) uygulanır; padding dış
   .block-text'te kalır. -webkit-line-clamp padding ile aynı elemanda olunca
   taşan metin alt padding'i doldurur (alt boşluk kaybolur). İç sarmalayıcıya
   taşıyınca metin içerik kutusunda kırpılır, dış alt padding korunur. */
.block-text.typography-style--clamp {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}
.block-text.typography-style--clamp .text__inner {
  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%; }
/* Tam Genişlik aktif CTA: card body align-items (flex-end/center) override'ı.
   align-self: stretch flex container'ın cross-axis'ini (genişliğini) doldurur;
   içteki ds-btn-block zaten width:100% olduğundan ek width tanımına gerek yok. */
.card-stack__body .block-cta:has(.ds-btn-block),
.card-stack__body [data-mintweb-block]:has(.ds-btn-block) {
  align-self: stretch;
}
/* CTA yazı hizası: card body align-items'ı override et (production + preview wrapper). */
.card-stack__body .block-cta--align-left,
.card-stack__body [data-mintweb-block]:has(.block-cta--align-left),
.card-media__body .block-cta--align-left,
.card-media__body [data-mintweb-block]:has(.block-cta--align-left),
.card-cover__body .block-cta--align-left,
.card-cover__body [data-mintweb-block]:has(.block-cta--align-left) { align-self: flex-start; }

.card-stack__body .block-cta--align-center,
.card-stack__body [data-mintweb-block]:has(.block-cta--align-center),
.card-media__body .block-cta--align-center,
.card-media__body [data-mintweb-block]:has(.block-cta--align-center),
.card-cover__body .block-cta--align-center,
.card-cover__body [data-mintweb-block]:has(.block-cta--align-center) { align-self: center; }

.card-stack__body .block-cta--align-right,
.card-stack__body [data-mintweb-block]:has(.block-cta--align-right),
.card-media__body .block-cta--align-right,
.card-media__body [data-mintweb-block]:has(.block-cta--align-right),
.card-cover__body .block-cta--align-right,
.card-cover__body [data-mintweb-block]:has(.block-cta--align-right) { align-self: flex-end; }
/* 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; }
/* ds-btn varsayılan border-width (1px) sıfırlanır — buton kendi Köşe/Çerçeve
   ayarını vermedikçe kenarlık görünmesin (aksi halde --section-border-color
   parent karttan kalıtımla sızıp ince çerçeve çiziyordu). Buton border verirse
   section_style inline border-width'i bu kuralı ezer. */
.block-cta .ds-btn { border-width: 0; }
/* Çerçeve rengi — section_style border-color'u ``--section-border-color`` var'ı
   olarak inline yazar (hover override için). Buton ``.ds-btn`` ``.section-style``
   class'ına sahip olmadığından var tüketilmiyordu → çerçeve görünmüyordu.
   ss.style border-width/style/radius'u zaten inline uyguluyor; burada rengi bağlarız. */
.block-cta .ds-btn { border-color: var(--section-border-color, transparent); }
.block-cta .ds-btn:hover {
  border-color: var(--section-border-color-hover, var(--section-border-color, transparent));
}
/* 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;
}

/* === Nesne Ekleri (object_attachments) — dosya/link/embed listesi === */
.block-attachments__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 .75rem;
  color: var(--color-fg, #111827);
}
.mw-attachments {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.mw-attachment__file,
.mw-attachment__link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius, 8px);
  background: var(--color-bg, #fff);
  color: var(--color-fg, #111827);
  text-decoration: none;
  transition: border-color .15s, background-color .15s;
}
.mw-attachment__file:hover,
.mw-attachment__link:hover {
  border-color: var(--color-primary, #2563eb);
  background: var(--color-bg-subtle, #f9fafb);
}
.mw-attachment__file-name {
  flex: 1 1 auto;
  font-weight: 600;
  word-break: break-word;
}
.mw-attachment__file-meta {
  flex: 0 0 auto;
  font-size: .85rem;
  color: var(--color-fg-muted, #6b7280);
}
.mw-attachment__title {
  font-size: 1rem;
  font-weight: 600;
  margin: .25rem 0;
}
.mw-attachment__embed {
  position: relative;
  aspect-ratio: 16 / 9;
}
.mw-attachment__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius, 8px);
}

/* Nesne Ekleri grid öğeleri — ``.gallery__item`` (gallery_style: gap+radius). */
.attachments-item__embed {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
}
.attachments-item__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.attachments-item__file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  height: 100%;
  padding: .9rem 1.1rem;
  /* Çerçeve YOK — kart çerçevesi tamamen "Köşe Ayarları → Çerçeve" ayarına
     bağlı (gallery__item::after overlay). Kalınlık 0 iken hiç çizgi olmaz. */
  border: 0;
  border-radius: inherit;
  background: var(--color-bg, #fff);
  color: var(--color-fg, #111827);
  text-decoration: none;
  transition: background-color .15s;
}
.attachments-item__file:hover {
  background: var(--color-bg-subtle, #f9fafb);
}
.attachments-item__file--pdf {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: .55rem;
}
.attachments-item__file-icon {
  display: inline-flex;
  color: var(--color-primary, #2563eb);
}
.attachments-item__file-icon svg { width: 2.4rem; height: 2.4rem; }
.attachments-item__file-name { font-weight: 600; word-break: break-word; }
.attachments-item__file-meta {
  flex: 0 0 auto;
  font-size: .85rem;
  color: var(--color-fg-muted, #6b7280);
}
.attachments-item__caption {
  padding: .6rem .25rem 0;
  font-weight: 600;
  font-size: .95rem;
  color: var(--color-fg, #111827);
  word-break: break-word;
}

/* 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 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-color, inherit);
  background-color: var(--icon-bg, transparent);
  /* transition global kuralda */
}
/* İkon kutusu içeriğe sığar (section-style--full-width width:100%'ü ezer) ve
   zemini .section-style'ın transparent default'una yenilmez (eşit özgüllüğü aşar). */
.icon-block.section-style {
  width: fit-content;
  background-color: var(--icon-bg, transparent);
}
.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%;
}
/* Tam genişlik zemin + container'a hizalı içerik (opt-in).
   Bir Bölüm/Container bloğunun "Özel Class" alanına `full-bleed-bg` yaz:
   "Full Genişlik" AÇIK iken zemin (renk/çerçeve/dekor) ekran kenarına YAPIŞIK
   kalır, ama içerik (.section__inner / .container__inner) sayfa container'ına
   (--container-max-width) sıkışır — yazı kenara yapışmaz.
   max() → geniş ekranda içeriği eşit boşlukla ortalar, dar ekranda min padding. */
.full-bleed-bg.section-style--full-width > .section__inner,
.full-bleed-bg.section-style--full-width > .container__inner {
  padding-inline: max(
    var(--container-padding-inline, 1rem),
    calc((100% - var(--container-max-width, 1280px)) / 2)
  );
}
/* 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; }

/* === Yan yana kartlar her zaman EŞİT YÜKSEKLİK (en uzun karta göre) ===
   Standart Kart / Yatay Kart / Kart Yan Yana / Zeminli Kart, bir Sütunlar
   (columns) bloğunun içinde yan yana durduğunda satırın en uzun kartının
   boyunu alır. Dikey hizalama ayarından bağımsız çalışır.
   - Canlı: kart doğrudan flex çocuğu → align-self:stretch satır boyunu verir.
   - Editör önizlemesi: kart [data-mintweb-block] sarmalayıcı içinde → sarmalayıcı
     gerilir, kart da %100 ile onu doldurur.
   Not: dik-yazı tam-boy kartların (.vertical-text--full-height) kendi (0,3,0)
   istisna kuralı daha yüksek özgüllükte olduğundan bu kural onları ezmez. */
.columns > .block-card-stack,
.columns > .block-card-row,
.columns > .block-card-media,
.columns > .block-card-cover,
.columns > [data-mintweb-block]:has(> .block-card-stack),
.columns > [data-mintweb-block]:has(> .block-card-row),
.columns > [data-mintweb-block]:has(> .block-card-media),
.columns > [data-mintweb-block]:has(> .block-card-cover) {
  align-self: stretch;
}
.columns > [data-mintweb-block] > .block-card-stack,
.columns > [data-mintweb-block] > .block-card-row,
.columns > [data-mintweb-block] > .block-card-media,
.columns > [data-mintweb-block] > .block-card-cover {
  height: 100%;
}

/* 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 tipleri: zengin hover yoğunluğu + hover üst çizgi ===
   Standart (card_stack) / Yatay (card_row) / Yan Yana (card_media) /
   Zeminli (card_cover) kartlarda:
   - "Kart Üzerine Gelince Gölge" aktifken hover daha güçlü olur: yukarı kalkma +
     derin gölge + ince mint kenar tonu (referans tasarım yoğunluğu).
   - "Hover Üst Çizgi" aktifken hover'da üstte renkli çizgi soldan açılır
     (renk: --hover-line-color, boşsa mint gradyan). */
.block-card-stack.container--shadow-hover,
.block-card-row.container--shadow-hover,
.block-card-media.container--shadow-hover,
.block-card-cover.container--shadow-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.block-card-stack.container--shadow-hover:hover,
.block-card-row.container--shadow-hover:hover,
.block-card-media.container--shadow-hover:hover,
.block-card-cover.container--shadow-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -28px rgba(19, 32, 27, 0.35);
  border-color: rgba(43, 189, 143, 0.45);
}

/* Hover üst çizgi — overflow:hidden ile köşe taşması engellenir (referans .mz-dccard ile aynı). */
.block-card-stack.container--hover-line,
.block-card-row.container--hover-line,
.block-card-media.container--hover-line,
.block-card-cover.container--hover-line {
  position: relative;
  overflow: hidden;
}
.block-card-stack.container--hover-line::after,
.block-card-row.container--hover-line::after,
.block-card-media.container--hover-line::after,
.block-card-cover.container--hover-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--hover-line-color, linear-gradient(90deg, var(--color-primary, #1a7458), #2bbd8f));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  pointer-events: none;
  z-index: 3;
}
.block-card-stack.container--hover-line:hover::after,
.block-card-row.container--hover-line:hover::after,
.block-card-media.container--hover-line:hover::after,
.block-card-cover.container--hover-line:hover::after {
  transform: scaleX(1);
}

/* 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 { display: flex; flex-direction: column; text-align: left;   align-items: flex-start; }
.container--ch-center .container__inner { display: flex; flex-direction: column; text-align: center; align-items: center; }
.container--ch-right  .container__inner { display: flex; flex-direction: column; text-align: right;  align-items: flex-end; }
/* block-icon: hizalamaya göre ortalanır/hizalanır (SVG sabit boyut, shrink-wrap OK). */
.container--ch-left   .container__inner .block-icon  { align-self: flex-start; margin-left: 0; }
.container--ch-center .container__inner .block-icon  { align-self: center; }
.container--ch-right  .container__inner .block-icon  { align-self: flex-end; margin-right: 0; }
/* block-image: daima tam genişlik al (align-self:stretch) — içindeki figure'un
   width:% değeri belirli bir containing block'a göre çözümlensin; margin:auto ile ortala. */
.container--ch-left   .container__inner .block-image,
.container--ch-center .container__inner .block-image,
.container--ch-right  .container__inner .block-image { align-self: stretch; width: 100%; }
/* figure: container hizalanmasına göre margin:auto ile konumlandır */
.container--ch-left   .container__inner .block-image > figure { margin-right: auto; }
.container--ch-center .container__inner .block-image > figure { margin-left: auto; margin-right: auto; }
.container--ch-right  .container__inner .block-image > figure { margin-left: auto; }
.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 {
  display: flex;
  flex-direction: column;
}

.card-stack__body { flex: 1; display: flex; flex-direction: column; }

/* Yazı genişliği (text_width_desktop/mobile) */
.block-card-stack.container--has-text-width .card-stack__body {
  flex: none;
  width: var(--container-text-width-desktop, 100%);
  max-width: var(--container-text-width-desktop, 100%);
}
@media (max-width: 768px) {
  .block-card-stack.container--has-text-width .card-stack__body {
    width: var(--container-text-width-mobile, 100%);
    max-width: var(--container-text-width-mobile, 100%);
  }
}

/* Yazı genişliği — Dikey İçerik Bloğu (content_container_2) da aynı ayara uyar */
.block-content-container-2.container--has-text-width .content-container-2__inner {
  width: var(--container-text-width-desktop, 100%);
  max-width: var(--container-text-width-desktop, 100%);
}
@media (max-width: 768px) {
  .block-content-container-2.container--has-text-width .content-container-2__inner {
    width: var(--container-text-width-mobile, 100%);
    max-width: var(--container-text-width-mobile, 100%);
  }
}

/* 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; }

/* Editör önizlemesi: kart gövdesinin flex çocuğu, bloğun kendisi değil
   tam-genişlik ``data-mintweb-block`` sarmalayıcısı olur — align-items o
   sarmalayıcıyı ortalayamaz, içteki blok sola yaslı kalır. Sarmalayıcıyı da
   flex sütun yapıp İçerik Konumu'na göre hizala (canlıda zararsız: sarmalayıcı
   yok, kural eşleşmez). Tüm kart gövdeleri (``*__body``) için geçerli. */
.container--ch-center > [class$="__body"] > [data-mintweb-block],
.container--ch-right  > [class$="__body"] > [data-mintweb-block],
.container--ch-left   > [class$="__body"] > [data-mintweb-block] { display: flex; flex-direction: column; }
.container--ch-center > [class$="__body"] > [data-mintweb-block] { align-items: center; }
.container--ch-right  > [class$="__body"] > [data-mintweb-block] { align-items: flex-end; }
.container--ch-left   > [class$="__body"] > [data-mintweb-block] { align-items: flex-start; }

/* content_vertical → gövde içeriğini dikeyde konumla. Gövde flex:1 ile kartı
   doldurduğundan, dikey hiza article'a değil GÖVDEYE uygulanmalı (Kart-Medya /
   Zeminli Kart ile aynı desen). Aksi halde "Dikey → Orta" ayarı etkisiz kalır. */
.block-card-stack.container--cv-top    .card-stack__body { justify-content: flex-start; }
.block-card-stack.container--cv-middle .card-stack__body { justify-content: center; }
.block-card-stack.container--cv-bottom .card-stack__body { justify-content: flex-end; }

/* Image blok wrapperı her zaman tam genişlik — align-items hizalaması daraltmasın. */
.card-stack__body [data-mintweb-block]:has(.block-image) {
  width: 100%;
}
/* Başlık ve Metin de tam genişlik (align-items daraltmasın); hizalama text-align
   ile gelir. Public (doğrudan blok) — :has'tan bağımsız her zaman geçerli. */
.card-stack__body > .block-heading,
.card-stack__body > .block-text {
  width: 100%;
}
/* Önizleme (preview_mode) — blok [data-mintweb-block] ile sarmalanır. :has ayrı
   kuralda; desteklenmezse üstteki public kural yine de uygular. */
.card-stack__body > [data-mintweb-block]:has(.block-heading),
.card-stack__body > [data-mintweb-block]:has(.block-text) {
  width: 100%;
}
/* --photo-width-d varsa yüzde genişliği override eder. */
.card-stack__body [data-mintweb-block][style*="--photo-width-d"] {
  width: var(--photo-width-d, 100%);
}
.card-stack__body [data-mintweb-block][style*="--photo-width-d"] .block-image.image {
  width: 100%;
}
@media (max-width: 768px) {
  .card-stack__body [data-mintweb-block][style*="--photo-width-d"] {
    width: var(--photo-width-m, var(--photo-width-d, 100%));
  }
}

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

/* ============================================================
   Yatay Kart (card_row) — Standart Kart'ın yan yana varyantı.
   Body flex-row + wrap; çocuklar doğal genişlikte yan yana dizilir.
   ============================================================ */
.block-card-row {
  display: flex;
  flex-direction: column;
}
.card-row__body {
  flex: 1;
  display: flex;
  flex-direction: row;
  /* Kart genişliği ne olursa olsun çocuklar HER ZAMAN yan yana — alt satıra
     kaymaz. Görsel kalan alana sığacak şekilde küçülür; dik yazı/şerit gibi
     sabit öğeler doğal genişliğinde kalır. */
  flex-wrap: nowrap;
  align-items: center;
  /* Bitişik (gap yok) — ayırmak gerekirse child margin'leri ile yapılır. */
}
/* Yatay Kart bir üst flex (örn. columns "Üst"=stretch) tarafından dikeyde
   gerilince, gövdesi flex:1 ile o boyu doldurur ve full-height dik yazı şeridi
   de onu takip edip görselin dışına taşardı. İçinde full-height dik yazı varsa
   gövdeyi içerik (görsel) yüksekliğinde tut → şerit görseli aşmaz. */
.block-card-row:has(.vertical-text--full-height) > .card-row__body {
  flex: 0 1 auto;
}
/* columns "Üst" (align_vertical=start) hiç align-v sınıfı üretmediğinden
   align-items:stretch'e düşer ve Yatay Kart'ı (preview'de sarmalayıcısını)
   yanındaki uzun sütunun boyuna gerer; full-height dik yazı da görseli aşardı.
   SADECE stretch modunda (align-v-center/end YOKKEN) içinde full-height şerit
   olan kartı germeyi engelle → içerik (görsel) yüksekliğinde, üste yaslı kalır.
   Orta/Alt'ta align-v sınıfı olduğundan bu kural devreye girmez (onlar zaten
   kartı germiyordu). */
.columns:not(.section-style--align-v-center):not(.section-style--align-v-end) > .block-card-row:has(.vertical-text--full-height),
.columns:not(.section-style--align-v-center):not(.section-style--align-v-end) > [data-mintweb-block]:has(.vertical-text--full-height) {
  align-self: flex-start;
}
/* Görsel öğeler kalan alana sığabilsin diye min-content altına küçülebilmeli
   (min-width:auto taşmayı/wrap'ı tetiklerdi). Sabit öğeler (dik yazı) etkilenmez. */
.card-row__body > [data-mintweb-block]:has(.block-image),
.card-row__body > .block-image {
  min-width: 0;
}
/* Yazı genişliği (text_width_desktop/mobile) */
.block-card-row.container--has-text-width .card-row__body {
  flex: none;
  width: var(--container-text-width-desktop, 100%);
  max-width: var(--container-text-width-desktop, 100%);
}
@media (max-width: 768px) {
  .block-card-row.container--has-text-width .card-row__body {
    width: var(--container-text-width-mobile, 100%);
    max-width: var(--container-text-width-mobile, 100%);
  }
}
/* content_horizontal → ana eksen (yatay) hizalama */
.block-card-row.container--ch-left   .card-row__body { justify-content: flex-start; }
.block-card-row.container--ch-center .card-row__body { justify-content: center; }
.block-card-row.container--ch-right  .card-row__body { justify-content: flex-end; }
/* content_vertical → çapraz eksen (dikey) hizalama. Gövde satır-flex olduğundan
   align-items dikeyi kontrol eder; İçerik Konumu DİKEY=Üst/Orta/Alt buraya bağlanır
   (yoksa .card-row__body'deki sabit align-items:center geçerliydi → "Üst" işlemezdi).
   Not: bir öğe "Komşu yüksekliği doldur" ile align-self:stretch alırsa onu ezer. */
.block-card-row.container--cv-top    .card-row__body { align-items: flex-start; }
.block-card-row.container--cv-middle .card-row__body { align-items: center; }
.block-card-row.container--cv-bottom .card-row__body { align-items: flex-end; }
/* --photo-width-d varsa görsel wrapper'ı o yüzde genişliği alır. */
.card-row__body [data-mintweb-block][style*="--photo-width-d"] {
  width: var(--photo-width-d, auto);
}
.card-row__body [data-mintweb-block][style*="--photo-width-d"] .block-image.image {
  width: 100%;
}
@media (max-width: 768px) {
  .card-row__body [data-mintweb-block][style*="--photo-width-d"] {
    width: var(--photo-width-m, var(--photo-width-d, auto));
  }
}
/* İçerik blokları parent'ın --section-bg-color'ını inherit etmesin */
.block-card-row .section-style {
  --section-bg-color: transparent;
}

/* ============================================================
   CARD COVER — görsel arka plan, içerik üst katmanda
   ============================================================ */
.block-card-cover {
  position: relative;
  overflow: hidden;
  /* flex column: __body + __overlay absolute → akışta sadece __bg kalır.
     Böylece __bg flex:1 ile kartın tüm yüksekliğini doldurur (grid/columns
     bağlamında kart uzayınca resim de uzar). */
  display: flex;
  flex-direction: column;
  /* photo_height_desktop ayarını KESİN yükseklik olarak uygula.
     Yalnızca min-height verilirse kart yine de içteki görselin doğal boyuna
     açılır (görsel height:100% → kesin yükseklik yokken auto'ya çöker). Bu yüzden
     ayar verildiğinde `height` ile sabitlenir; verilmediğinde (var = auto/0)
     eski davranış (içerik/grid'e göre uzama) korunur. */
  min-height: var(--card-cover-min-h-d, 0);
  height: var(--card-cover-min-h-d, auto);
}
@media (max-width: 768px) {
  .block-card-cover {
    min-height: var(--card-cover-min-h-m, var(--card-cover-min-h-d, 0));
    height: var(--card-cover-min-h-m, var(--card-cover-min-h-d, auto));
  }
}

/* Arka plan görseli — flex:1 ile kartı doldurur */
.card-cover__bg {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
/* Preview wrapper da yüksekliği devralır */
.card-cover__bg > [data-mintweb-block] {
  height: 100%;
}
.card-cover__bg .block-image {
  width: 100%;
  height: 100%;
  display: block;
}
.card-cover__bg .block-image > figure {
  height: 100%;
}
.card-cover__bg img,
.card-cover__bg .block-image img {
  width: 100%;
  height: 100%;
  /* Görsel bloğunun "Sığdırma Şekli" ayarına saygı duy: figure --photo-fit
     set ederse onu kullan, aksi halde varsayılan cover. Aksi halde bu kural
     (0,2,1 özgüllük) per-image image--photo-fit-* (0,1,2) sınıfını ezerdi. */
  object-fit: var(--photo-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;
  /* --cc-pt/r/b/l: section_style_render'dan gelir (card_cover block_type).
     Yoksa (padding ayarı yapılmamış) varsayılan --space-6 kullanılır. */
  padding: var(--cc-pt, var(--space-6)) var(--cc-pr, var(--space-6)) var(--cc-pb, var(--space-6)) var(--cc-pl, var(--space-6));
  justify-content: flex-end;
}
/* Yazı genişliği: right'ı auto yaparak inset override; width değişkeni alır */
.block-card-cover.container--has-text-width .card-cover__body {
  right: auto;
  width: var(--container-text-width-desktop, 100%);
}
@media (max-width: 768px) {
  .block-card-cover.container--has-text-width .card-cover__body {
    right: auto;
    width: var(--container-text-width-mobile, 100%);
  }
}
.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 { color: var(--color-bg); }
.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-cover__bg içindeki görsel bloğu her zaman tam genişlikte olsun
   (section-style padding-inline arka plan görselini kısmaz). */
.card-cover__bg .block-image.section-style {
  padding-inline: 0;
}

/* ============================================================
   CARD MEDIA — medya sol/sağ, içerik karşı tarafta
   ============================================================ */
.block-card-media {
  display: flex;
  flex-direction: row;
  background: var(--color-bg);
  overflow: hidden;
}
/* container--cv-* ve section-style--flex gibi sınıfların flex-direction:column
   override etmesini önle — card_media her zaman yatay düzende kalır. */
.block-card-media.block-card-media {
  flex-direction: row;
}

/* 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 img,
.card-media__media .block-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-media__media .block-image {
  width: 100%;
  /* Kullanıcı yükseklik ayarladıysa onu kullan; yoksa konteyneri doldur (100%). */
  height: var(--photo-height-d, 100%);
  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 + media align-self */
.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; }
.block-card-media.container--cv-top    .card-media__media { align-self: flex-start; }
.block-card-media.container--cv-middle .card-media__media { align-self: center; }
.block-card-media.container--cv-bottom .card-media__media { align-self: 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; }
}

/* content_container: İçerik konumu hizalama.
   card-media yapısı .container__inner kullanmaz; .card-media__body doğrudan hedeflenir.
   Ek olarak .heading--align-* / .text--align-* sınıfları direkt elemente yazılır ve
   inherit edilen değeri ezdikleri için onları da daha yüksek özgüllükle override ediyoruz. */
[data-block-type="content_container"].container--ch-center .card-media__body { align-items: center; }
[data-block-type="content_container"].container--ch-center .card-media__body [class*="heading--align"],
[data-block-type="content_container"].container--ch-center .card-media__body [class*="text--align"] { text-align: center; }
[data-block-type="content_container"].container--ch-right  .card-media__body { align-items: flex-end; }
[data-block-type="content_container"].container--ch-right  .card-media__body [class*="heading--align"],
[data-block-type="content_container"].container--ch-right  .card-media__body [class*="text--align"] { text-align: right; }
[data-block-type="content_container"].container--ch-left   .card-media__body { align-items: flex-start; }
[data-block-type="content_container"].container--ch-left   .card-media__body [class*="heading--align"],
[data-block-type="content_container"].container--ch-left   .card-media__body [class*="text--align"] { text-align: left; }

/* content_container / content_container_2: standalone kart genişliği.
   Columns içinde değil, doğrudan sayfa bloğu olarak kullanıldığında
   card_width_desktop değeri bloğun kendi genişliğine uygulanır. */
[data-block-type="content_container"].container--has-card-width,
[data-block-type="content_container_2"].container--has-card-width {
  width: var(--card-width-desktop, 100%);
  max-width: 100%;
}
@media (max-width: 768px) {
  [data-block-type="content_container"].container--has-card-width,
  [data-block-type="content_container_2"].container--has-card-width {
    width: var(--card-width-mobile, 100%);
  }
}
[data-block-type="content_container"].container--has-card-width.container--ch-center,
[data-block-type="content_container_2"].container--has-card-width.container--ch-center {
  margin-left: auto;
  margin-right: auto;
}
[data-block-type="content_container"].container--has-card-width.container--ch-right,
[data-block-type="content_container_2"].container--has-card-width.container--ch-right {
  margin-left: auto;
}

/* --- 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. */

/* ============================================================
   Header — içindeki bloklar yan yana
   ============================================================ */
/* Scroll'da header üstte sabit kalır (sticky). Arka plan fallback'i
   şeffaf sticky header'ı önler; editörden gelen inline bg bunu ezer. */
.header_tag {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg, #fff);
}
.header_tag__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
}
.header_tag__zone {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  min-width: 0;
}
.header_tag__zone--left {
  flex: 1 1 0;
  justify-content: flex-start;
}
.header_tag__zone--center {
  flex: 0 0 auto;
  justify-content: center;
}
.header_tag__zone--right {
  flex: 1 1 0;
  justify-content: flex-end;
}
.header_tag__zone > * {
  margin: 0;
}
/* Dil Değiştirici blok'u (header sağ bölge) — rafine TR/EN segmented control.
   Tasarım hedefleri:
   · Header'ın metin rengini MİRAS alır (currentColor) → sabit gri yok, her
     header arka planında (açık/koyu) uyumlu.
   · Kab: ince, currentColor-uyumlu hairline (görünmez border yerine).
   · Layout-shift = 0: iki dil eşit ``min-width`` + sabit ``height`` + AYNI
     ``font-weight`` (aktif/inaktif arası genişlik değişmez) → dil değişince
     switcher kaymaz/sapmaz. */
.language-switcher-block {
  display: inline-flex;
  align-items: center;
}
/* KONUM SABİTLEME: section_style sarmalayıcısı varsayılan ``--full-width``
   (width:100%) → switcher esneyen kabın soluna yaslanıp dil değişince yatayda
   KAYIYORDU (TR/EN menü uzunluğu farkı kabı farklı genişletiyor). İçeriğe
   sığdırıp (width:auto) sağa yaslayınca pill, header'ın sağ kenarına sabitlenir
   ve dil değişince oynamaz. yatay-menu-block ile birebir aynı kalıp. */
.language-switcher-block.section-style--full-width {
  width: auto;
}
.language-switcher-block.section-style--full-width > .ds-lang-switcher {
  margin-left: auto;
}
.ds-lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.1875rem;
  border: 1px solid rgba(128, 128, 128, 0.24);
  border-color: color-mix(in srgb, currentColor 24%, transparent);
  border-radius: var(--radius-full, 999px);
  line-height: 0; /* baseline jitter'ı engelle */
}
.ds-lang-switcher__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 2.125rem; /* 34px — TR ve EN eşit ayak izi */
  height: 1.625rem; /* 26px — sabit yükseklik, dikey kayma yok */
  padding: 0 0.5rem;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 600); /* her iki durumda AYNI → genişlik sabit */
  letter-spacing: 0.05em;
  color: currentColor;
  opacity: 0.55;
  text-decoration: none;
  border-radius: var(--radius-full, 999px);
  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.ds-lang-switcher__link:hover {
  opacity: 0.9;
}
.ds-lang-switcher__link--active {
  opacity: 1;
  color: var(--color-primary-contrast, #fff);
  background: var(--color-primary, #1a7458);
}
.ds-lang-switcher__link--active:hover {
  opacity: 1;
}
/* Logo solda: logo doğal genişliğini alır, menü/CTA kalan tüm alanı kullanır
   (eşit 50/50 bölünme yok → menü öğeleri alt satıra kaymaz). */
.header_tag__inner--logo-left .header_tag__zone--left {
  flex: 0 1 auto;
}
.header_tag__inner--logo-left .header_tag__zone--right {
  flex: 1 1 auto;
}
/* Logo ortada: kenar bölgeler simetrik kalsın ki logo gerçekten ortalansın. */
.header_tag__inner--logo-center .header_tag__zone--left,
.header_tag__inner--logo-center .header_tag__zone--right {
  flex: 1 1 0;
}
/* Header içinde menü öğeleri tek satırda yan yana kalır. */
.header_tag .yatay-menu__list {
  flex-wrap: nowrap;
}
/* Preview modunda eklenen wrapper div (data-mintweb-block) layout'tan şeffaf
   olsun → logo/menü/CTA doğrudan zone'un flex child'ı olur; üzerlerindeki
   Dış Boşluk (margin) preview'da da canlı sayfayla aynı çalışır. */
.header_tag__zone > [data-mintweb-block] {
  display: contents;
}

/* render.py margin'i wrapper'a taşır; iç blok kendi margin'ini sıfırlar. */
[data-mintweb-block][style*="margin"] > .block {
  margin: 0 !important;
}

/* --- Header responsive: hamburger + drawer ---
   Masaüstü (≥1024): zone'lar inline (logo + menü + extras), hamburger/drawer gizli.
   Tablet (768-1023): inline menü gizli → hamburger; extras zone'da görünür kalır.
   Mobil (<768): zone'da sadece logo; menü + extras drawer'a. */
.header_tag__burger {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg, #fff);
  color: var(--color-fg);
  cursor: pointer;
}
/* Hamburger çizgileri — açılınca üst+alt dönüp X olur, orta kaybolur. */
.header_tag__burger-box {
  position: relative;
  width: 28px;
  height: 20px;
  flex: 0 0 auto;
}
.header_tag__burger-line {
  position: absolute;
  inset-inline: 0;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transition: top 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
}
.header_tag__burger-line:nth-child(1) { top: 0; }
.header_tag__burger-line:nth-child(2) { top: 9px; }
.header_tag__burger-line:nth-child(3) { top: 18px; }
.header_tag[data-drawer-open] .header_tag__burger-line:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}
.header_tag[data-drawer-open] .header_tag__burger-line:nth-child(2) {
  opacity: 0;
}
.header_tag[data-drawer-open] .header_tag__burger-line:nth-child(3) {
  top: 9px;
  transform: rotate(-45deg);
}

.header_tag__drawer {
  display: none;
  flex-direction: column;
  background: var(--color-bg, #fff);
  overflow: hidden;
}

/* Drawer alt satırı: ekstralar (telefon / CTA / dil) — menüden SONRA. */
.header_tag__drawer-extras {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-5, 1.25rem);
}

/* Drawer menüsü — her öğe tam genişlik, bol padding, alt çizgi, chevron sağda. */
.header_tag__drawer-menu,
.header_tag__drawer-menu .block-yatay-menu,
.header_tag__drawer-menu .yatay-menu__list,
.header_tag__drawer-menu .yatay-menu__item {
  width: 100%;
}
/* Wrapper (block kutusu) drawer'da içeriğe göre büzülmesin → tam genişlik;
   böylece her öğe satırı full-width, ok en sağa yaslanır. */
.header_tag__drawer-menu .block-yatay-menu.section-style {
  display: block;
  width: 100%;
  margin: 0;
}
.header_tag__drawer-menu .yatay-menu {
  width: 100%;
}
.header_tag__drawer-menu .yatay-menu__list {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.header_tag__drawer-menu .yatay-menu__item {
  border-block-end: 1px solid var(--color-border);
}
.header_tag__drawer-menu .yatay-menu__link {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
  font-size: 1.0625rem;
}
/* Dropdown oku öğenin en sağına. */
.header_tag__drawer-menu .yatay-menu__item--has-children > .yatay-menu__link::after {
  margin-inline-start: auto;
}
/* Drawer'da dropdown/mega tıklamayla (data-open) açılır; chevron döner. */
.header_tag__drawer .yatay-menu__item[data-open] > .yatay-menu__submenu,
.header_tag__drawer .yatay-menu__item--mega[data-open] > .yatay-menu__mega {
  display: block;
}
.header_tag__drawer .yatay-menu__item[data-open] > .yatay-menu__link::after {
  transform: translateY(2px) rotate(-135deg);
}
/* Drawer içinde mega panel akışta (fixed değil) — tam genişlik dikey liste. */
.header_tag__drawer .yatay-menu__mega {
  position: static;
  inset: auto;
  box-shadow: none;
  border: 0;
  padding: 0;
}
.header_tag__drawer .yatay-menu__mega-inner {
  grid-template-columns: 1fr;
  padding-inline: var(--space-5, 1.25rem);
  gap: var(--space-4, 1rem);
}
/* Drawer içinde normal dropdown submenu de akışta — dar kutu değil tam genişlik. */
.header_tag__drawer .yatay-menu__submenu {
  position: static;
  inset: auto;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: var(--space-2, 0.5rem) 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--color-bg-subtle, #f6f7f9);
}
.header_tag__drawer .yatay-menu__submenu::before { content: none; }
.header_tag__drawer .yatay-menu__submenu .yatay-menu__item {
  border-block-end: 1px solid var(--color-border);
}
.header_tag__drawer .yatay-menu__submenu .yatay-menu__link {
  padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem) var(--space-3, 0.75rem) var(--space-8, 2rem);
}
/* Drawer'da hover ile açma yok (dokunmada hover "yapışır" → tekrar tıkla
   kapanmaz). data-open yokken hover'ı nötrle; :not([data-open]) sayesinde
   açıkken bu kural devre dışı kalır ve panel görünür. */
.header_tag__drawer .yatay-menu__item:not([data-open]):hover > .yatay-menu__submenu {
  display: none;
}

@media (max-width: 1023px) {
  /* Drawer'ın absolute konumlanacağı referans — sticky de positioning
     context sağlar; scroll'da header mobilde de üstte kalır. */
  .header_tag { position: sticky; }
  .header_tag__burger { display: inline-flex; }
  /* Inline (zone içindeki) yatay menü gizli — drawer'a taşındı. */
  .header_tag__zone .block-yatay-menu { display: none; }
  /* Drawer: header'ın altında ABSOLUTE overlay — yukarıdan aşağı kayarak açılır;
     alttaki bloklar yerinde kalır (layout itilmez), üzerlerine biner. */
  .header_tag__drawer {
    display: flex;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 60;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }
  .header_tag[data-drawer-open] .header_tag__drawer {
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  }
  /* Tablet: extras zone'da görünür → drawer'daki extras kopyası gizli. */
  .header_tag__drawer-extras { display: none; }
}

@media (max-width: 767px) {
  /* Mobil: zone'larda sadece logo kalır; extras drawer'a. */
  .header_tag__zone > *:not(.block-logo) { display: none; }
  .header_tag__drawer-extras { display: flex; }
}

/* ============================================================
   Logo bloğu — genişlik (px) + konum (sol/orta)
   ============================================================ */
.logo-block {
  display: flex;
}
.logo-block--pos-left { justify-content: flex-start; }
.logo-block--pos-center { justify-content: center; }
/* Zemin kutusu — logoyu sarar (genişliğine göre büzülür). Boşluklar (padding/
   margin), Köşe Ayarları (border/radius/shadow) ve Zemin Rengi burada uygulanır.
   Renkler section_style CSS değişkenleri üzerinden gelir (inline style ham
   px/shadow değerlerini taşır). */
.logo-block__bg {
  display: inline-flex;
  box-sizing: border-box;
  background-color: var(--section-bg-color, transparent);
  border-color: var(--section-border-color, var(--color-border));
}
.logo-block__bg :is(img, picture, picture img) {
  border-radius: inherit;
}
.logo-block__img {
  display: block;
  width: var(--logo-width-desktop, 160px);
  max-width: 100%;
}
.logo-block__img :is(img, picture) {
  display: block;
  width: 100%;
  height: auto;
}
.logo-block__img--mobile { display: none; }
@media (max-width: 768px) {
  .logo-block__img { width: var(--logo-width-mobile, 120px); }
  .logo-block__img--desktop { display: none; }
  .logo-block__img--mobile { display: block; }
}

/* ============================================================
   Yatay Menü
   ============================================================ */
/* Menü bloğu parent Container/Section'ın --section-bg-color'ını inherit
   etmesin — aksi halde menü zemini istenmeden gri/parent rengi olur.
   Menü zemini link seviyesinde (--menu-bg-color) yönetilir. */
.block-yatay-menu.section-style {
  --section-bg-color: transparent;
}
/* Menü blok kutusu içeriğe göre büzülür → Dış Boşluk (margin) gerçek boşluk
   oluşturur (full-width 100% genişlik margin'i yutmasın). */
.yatay-menu-block {
  display: inline-flex;
}
.yatay-menu-block.section-style--full-width {
  width: auto;
}
.yatay-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.yatay-menu--left  .yatay-menu__list { justify-content: flex-start; }
.yatay-menu--right .yatay-menu__list { justify-content: flex-end; }

/* Dikey menü (footer sütunları) — başlık üstte, linkler alt alta. */
.yatay-menu-block--vertical {
  display: block;
  width: 100%;
}
.yatay-menu--vertical .yatay-menu__list {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.yatay-menu-block__title {
  margin: 0 0 var(--space-3, 0.75rem);
  font-size: var(--menu-font-size-d, var(--font-size-sm, 0.875rem));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--menu-text-color, inherit);
  opacity: 0.7;
}

/* ============================================================
   Footer bloğu — çok sütunlu düzen
   ============================================================ */
.footer__inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: var(--footer-align-v, stretch);
  gap: var(--footer-gap, 2rem);
  width: 100%;
}

/* Public modda — card_width ayarsız: eşit dağılım */
.footer__inner > *:not([data-mintweb-block]):not(.container--has-card-width) {
  flex: 1 1 0;
  min-width: 0;
}

/* Public modda — card_width ayarlı: oransal büyüme (gap otomatik çıkarılır) */
.footer__inner > .container--has-card-width {
  flex: var(--card-width-int, 1) 0 0;
  min-width: 0;
}

/* Preview modunda — card_width ayarsız wrapper: eşit dağılım */
.footer__inner > [data-mintweb-block]:not([style*="--card-width-int"]) {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}

/* Preview modunda — card_width ayarlı wrapper: oransal büyüme (gap otomatik çıkarılır) */
.footer__inner > [data-mintweb-block][style*="--card-width-int"] {
  flex: var(--card-width-int) 0 0;
  min-width: 0;
  display: flex;
}

/* Preview wrapper içindeki blok da wrapper'ı doldurur */
.footer__inner > [data-mintweb-block] > * {
  flex: 1;
  min-width: 0;
}

/* Preview modunda wrapper oransal büyüme ile boyutlanır; article wrapper'ı
   tam kaplamalı — global .container--has-card-width kuralı var(--card-width-desktop)
   uygular, bu wrapper boyutuna göre yanlış kısıtlar. */
.footer__inner > [data-mintweb-block] > .container--has-card-width {
  width: 100%;
  max-width: 100%;
}

/* Footer kolonları kendi section-style container padding'ini uygulamamalı */
.footer__inner > .section-style:not(.section-style--full-width),
.footer__inner > [data-mintweb-block] > .section-style:not(.section-style--full-width) {
  padding-inline: 0;
}

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

/* ============================================================
   Alt Menü Yönlendirmesi (footer_menu) — başlık + tek kademe dikey liste
   ============================================================ */
.footer-menu {
  display: block;
}
.footer-menu__title {
  margin: 0 0 var(--space-3, 0.75rem);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--footer-menu-title-color, inherit);
  opacity: 0.7;
}
.footer-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}
.footer-menu__list--yatay {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem) var(--space-4, 1rem);
}
.footer-menu__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  text-decoration: none;
  color: var(--footer-menu-link-color, inherit);
  transition: color var(--transition, 450ms ease-in-out);
}
.footer-menu__link:hover {
  color: var(--footer-menu-link-color-hover, var(--footer-menu-link-color, inherit));
}
.footer-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--footer-menu-icon-color, currentColor);
}

.yatay-menu__item {
  position: relative;
  list-style: none;
}

.yatay-menu__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* İç Boşluk (Boşluklar sekmesi) her menü öğesine uygulanır → öğeler arası
     boşluk. Ayar yoksa varsayılan 8px 16px. */
  padding: var(--menu-item-pad, 8px 16px);
  text-decoration: none;
  white-space: nowrap;
  color: var(--menu-text-color, inherit);
  background-color: var(--menu-bg-color, transparent);
  font-size: var(--menu-font-size-d, inherit);
  line-height: var(--menu-line-height-d, inherit);
  font-weight: var(--menu-font-weight-d, inherit);
  letter-spacing: var(--menu-letter-spacing, normal);
  transition: color 150ms ease, background-color 150ms ease;
}
.yatay-menu__link:hover,
.yatay-menu__item:hover > .yatay-menu__link {
  color: var(--menu-text-color-hover, var(--menu-text-color, inherit));
  background-color: var(--menu-bg-color-hover, var(--menu-bg-color, transparent));
}

/* Alt menü var — küçük chevron */
.yatay-menu__item--has-children > .yatay-menu__link::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  margin-left: 6px;
  opacity: 0.55;
  flex-shrink: 0;
}
/* Üst seviye basit açılır menüde chevron çizgisini gösterme (mega toggle
   göstergesi korunur). Hover'da beliren eğik çizgi kaldırıldı. Yalnız masaüstü
   yatay menüde (header_tag__zone) — mobil drawer'ın akordeon oku korunur. */
.header_tag__zone .yatay-menu__list > .yatay-menu__item--has-children:not(.yatay-menu__item--mega) > .yatay-menu__link::after {
  content: none;
}

/* İkon */
.yatay-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--menu-icon-color, inherit);
  background-color: var(--menu-icon-bg-color, transparent);
  padding: var(--menu-icon-bg-pad, 0);
  border-radius: var(--radius-sm, 6px);
  transition: color 150ms ease, background-color 150ms ease;
  flex-shrink: 0;
}
.yatay-menu__link:hover .yatay-menu__icon,
.yatay-menu__item:hover > .yatay-menu__link .yatay-menu__icon {
  color: var(--menu-icon-color-hover, var(--menu-icon-color, inherit));
}

/* Zengin öğe (ikon + açıklama) */
.yatay-menu__text {
  display: flex;
  flex-direction: column;
}
.yatay-menu__label { line-height: 1.3; }
.yatay-menu__desc {
  font-size: 0.75em;
  opacity: 0.65;
  font-weight: 400;
}

/* Dropdown */
.yatay-menu__submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  list-style: none;
  margin: 6px 0 0;
  padding: 12px 0;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius, 6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  z-index: 200;
}
/* Görünmez hover köprüsü — trigger ile submenu arasındaki margin boşluğunu
   doldurur ki mouse aşağı inerken hover kaybolup menü kapanmasın. */
.yatay-menu__submenu::before {
  content: "";
  position: absolute;
  inset-block-start: -6px;
  inset-inline: 0;
  height: 6px;
}
.yatay-menu__item:hover > .yatay-menu__submenu { display: block; }

.yatay-menu__submenu .yatay-menu__link {
  padding: 12px 24px;
  font-size: var(--menu-font-size-d, var(--font-size-sm, 0.875rem));
  line-height: var(--menu-line-height-d, 1.4);
  width: 100%;
  box-sizing: border-box;
}
.yatay-menu__submenu .yatay-menu__item--has-children > .yatay-menu__link::after {
  margin-left: auto;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  border-right: 0;
}
/* Nested submenu — sağa açılır */
.yatay-menu__submenu .yatay-menu__submenu {
  top: 0;
  left: 100%;
  margin: 0 0 0 4px;
}
/* Nested için köprü sol kenarda (yatay geçiş boşluğunu doldurur). */
.yatay-menu__submenu .yatay-menu__submenu::before {
  inset-block: 0;
  inset-inline-start: -6px;
  inset-inline-end: auto;
  width: 6px;
  height: auto;
}

/* ============================================================
   MEGA MENÜ — full-width panel (3 seviye: trigger → kolon → link)
   ============================================================ */
.yatay-menu__mega {
  display: none;
  position: fixed;
  inset-inline: 0;
  /* JS trigger'ın altına hizalar (--yatay-mega-top). Fallback: header altı. */
  top: var(--yatay-mega-top, var(--header-height, 64px));
  background: var(--color-bg, #fff);
  border-block: 1px solid var(--color-border, #e5e7eb);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
  padding-block: var(--space-6, 1.5rem);
  z-index: 200;
}
/* Mega menü tıkla aç/kapa (data-open) — hover ile açılmaz, net toggle. */
.yatay-menu__item--mega[data-open] > .yatay-menu__mega {
  display: block;
}
/* Açıkken ok yukarı döner. */
.yatay-menu__item--mega[data-open] > .yatay-menu__link::after {
  transform: translateY(2px) rotate(-135deg);
}
/* Hover köprüsü — trigger ile fixed panel arası boşluğu doldurur. */
.yatay-menu__item--mega::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 100%;
  height: 10px;
}
.yatay-menu__mega-inner {
  max-width: var(--container-max, 1200px);
  margin-inline: auto;
  padding-inline: var(--space-6, 1.5rem);
  display: grid;
  grid-template-columns: repeat(var(--mega-cols, 4), minmax(0, 1fr));
  gap: var(--space-8, 2rem);
}
.yatay-menu__mega-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}
.yatay-menu__mega-col-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-fg);
  text-decoration: none;
  margin: 0;
}
a.yatay-menu__mega-col-title:hover {
  color: var(--color-primary, inherit);
}
.yatay-menu__mega-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}
.yatay-menu__mega-link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-2, 0.5rem);
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-fg);
}
.yatay-menu__mega-link:hover {
  background: var(--color-bg-subtle, #f5f5f5);
}
.yatay-menu__mega-link-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--color-bg-subtle, #f1f1f1);
  color: var(--color-primary, inherit);
}
.yatay-menu__mega-link-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.yatay-menu__mega-link-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-fg);
}
.yatay-menu__mega-link-desc {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-fg-muted, #666);
}

/* Mega panel — mobil: tam genişlik yerine normal akış (drawer içinde) */
@media (max-width: 768px) {
  .yatay-menu__mega {
    position: static;
    box-shadow: none;
    border: 0;
    padding-block: var(--space-2, 0.5rem);
  }
  .yatay-menu__mega-inner {
    grid-template-columns: 1fr;
    gap: var(--space-4, 1rem);
    padding-inline: 0;
  }
}

/* Mobil */
@media (max-width: 768px) {
  .yatay-menu__link {
    font-size: var(--menu-font-size-m, var(--menu-font-size-d, inherit));
    line-height: var(--menu-line-height-m, var(--menu-line-height-d, inherit));
    font-weight: var(--menu-font-weight-m, var(--menu-font-weight-d, inherit));
  }
}

/* --- 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; }
}

/* === Cookie Consent ============================================== */

/* ── Bottom Bar ─────────────────────────────────────────────────── */
.cb-bar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 9998;
  background: #111827;
  color: rgba(255,255,255,.9);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid rgba(255,255,255,.06);
}
@media (prefers-color-scheme: dark) {
  .cb-bar { background: #0d0d10; border-top-color: rgba(255,255,255,.08); }
}
.cb-bar__inner {
  max-width: 80rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.cb-bar__text  { flex: 1; min-width: 0; }
.cb-bar__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-1); color: #fff; }
.cb-bar__desc  { font-size: var(--font-size-xs); color: rgba(255,255,255,.78); margin: 0; line-height: 1.55; }
.cb-bar__link  { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cb-bar__link:hover { color: #fff; }
.cb-bar__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.cb-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  padding: 0 var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
  line-height: 1;
}
.cb-bar__btn--settings { background: transparent; color: rgba(255,255,255,.92); border-color: rgba(255,255,255,.35); }
.cb-bar__btn--settings:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.35); }
.cb-bar__btn--accept { background: var(--color-primary); color: var(--color-primary-fg); border-color: var(--color-primary); }
.cb-bar__btn--accept:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
@media (max-width: 640px) {
  .cb-bar { padding: var(--space-4); }
  .cb-bar__inner { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .cb-bar__actions { flex-direction: column-reverse; }
  .cb-bar__btn { width: 100%; height: 2.625rem; }
}

/* ── Modal / Drawer ─────────────────────────────────────────────── */
.cb-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,0);
  visibility: hidden;
  pointer-events: none;
  transition: background .3s, visibility 0s .3s;
}
.cb-modal.is-open {
  background: rgba(0,0,0,.55);
  visibility: visible;
  pointer-events: all;
  transition: background .3s, visibility 0s 0s;
}
.cb-modal__panel {
  background: var(--color-bg);
  width: 100%;
  max-height: 92vh;
  max-height: 92svh;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.cb-modal.is-open .cb-modal__panel { transform: translateY(0); }
@media (min-width: 640px) {
  .cb-modal { align-items: center; }
  .cb-modal__panel {
    width: min(36rem, 95vw);
    max-height: 88vh;
    border-radius: var(--radius-lg);
    transform: scale(.96) translateY(10px);
  }
  .cb-modal.is-open .cb-modal__panel { transform: scale(1) translateY(0); }
}
.cb-modal__handle {
  width: 2.5rem; height: 4px;
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
  margin: var(--space-2) auto var(--space-1);
  flex-shrink: 0;
}
@media (min-width: 640px) { .cb-modal__handle { display: none; } }
.cb-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.cb-modal__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); margin: 0; }
.cb-modal__close {
  width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: var(--color-bg-muted);
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--color-fg-muted);
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.cb-modal__close:hover { background: var(--color-bg-subtle); color: var(--color-fg); }
.cb-modal__scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cb-modal__body   { padding: var(--space-5); }
.cb-modal__desc   { font-size: var(--font-size-sm); color: var(--color-fg-muted); line-height: 1.65; margin: 0 0 var(--space-2); }
.cb-modal__more   { display: inline-block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-primary); text-decoration: none; margin-block-end: var(--space-5); }
.cb-modal__more:hover { text-decoration: underline; }
.cb-modal__accept-all {
  width: 100%;
  height: 2.75rem;
  background: var(--color-primary);
  color: var(--color-primary-fg);
  border: none;
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  margin-block-end: var(--space-5);
  transition: background .15s;
  font-family: inherit;
}
.cb-modal__accept-all:hover { background: var(--color-primary-hover); }
.cb-cats { border-top: 1px solid var(--color-border); }
.cb-cat  { border-bottom: 1px solid var(--color-border); }
.cb-cat__hd {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}
.cb-cat__expand {
  width: 1.5rem; height: 1.5rem;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  color: var(--color-fg-muted);
  font-size: 1rem; line-height: 1;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.cb-cat__expand:hover { background: var(--color-bg-subtle); color: var(--color-fg); }
.cb-cat__name   { flex: 1; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.cb-cat__always { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-primary); white-space: nowrap; }
.cb-cat__body { overflow: hidden; max-height: 0; transition: max-height .3s ease; padding-inline-start: calc(1.5rem + var(--space-3)); }
.cb-cat__body.is-open { max-height: 320px; }
.cb-cat__body-inner { padding-block-end: var(--space-4); }
.cb-cat__desc { font-size: var(--font-size-xs); color: var(--color-fg-muted); line-height: 1.55; margin: 0 0 var(--space-2); }
.cb-cat__link { font-size: var(--font-size-xs); color: var(--color-primary); text-decoration: none; }
.cb-cat__link:hover { text-decoration: underline; }
/* Inline cookie definitions toggle */
.cb-defs-toggle { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }
.cb-defs-toggle__icon { transition: transform .2s; flex-shrink: 0; }
.cb-defs-toggle.is-open .cb-defs-toggle__icon { transform: rotate(180deg); }
.cb-defs-table { margin-top: var(--space-3); overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.cb-defs-tbl { width: 100%; border-collapse: collapse; font-size: var(--font-size-xs); }
.cb-defs-tbl th { text-align: left; padding: var(--space-2) var(--space-3); font-weight: var(--font-weight-semibold); color: var(--color-fg-muted); background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.cb-defs-tbl td { padding: var(--space-2) var(--space-3); vertical-align: top; border-bottom: 1px solid var(--color-border); color: var(--color-fg-muted); line-height: 1.4; }
.cb-defs-tbl tr:last-child td { border-bottom: none; }
.cb-defs-code { font-size: 11px; background: var(--color-bg-muted); padding: 1px 5px; border-radius: var(--radius-sm); font-family: ui-monospace, monospace; color: var(--color-fg); }
.cb-modal__footer {
  padding: var(--space-3) var(--space-5) var(--space-5);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}
.cb-modal__save {
  width: 100%;
  height: 2.75rem;
  background: var(--color-primary);
  color: var(--color-primary-fg);
  border: none;
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background .15s;
  font-family: inherit;
}
.cb-modal__save:hover { background: var(--color-primary-hover); }

/* ── iOS toggle ─────────────────────────────────────────────────── */
.cb-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.cb-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.cb-toggle__track {
  display: block;
  width: 2.75rem; height: 1.5rem;
  background: var(--color-bg-muted);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  position: relative;
  transition: background .2s, border-color .2s;
}
.cb-toggle__track::after {
  content: '';
  position: absolute;
  inset-block-start: 2px; inset-inline-start: 2px;
  width: 1.125rem; height: 1.125rem;
  background: var(--color-fg-subtle);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform .2s cubic-bezier(.4,0,.2,1), background .2s;
}
.cb-toggle__input:checked  ~ .cb-toggle__track { background: var(--color-primary); border-color: var(--color-primary); }
.cb-toggle__input:checked  ~ .cb-toggle__track::after { transform: translateX(1.25rem); background: #fff; }
.cb-toggle__input:disabled ~ .cb-toggle__track { background: var(--color-primary); border-color: var(--color-primary); opacity: .55; }
.cb-toggle__input:disabled ~ .cb-toggle__track::after { transform: translateX(1.25rem); background: #fff; }
.cb-toggle:has(.cb-toggle__input:disabled) { cursor: default; }

/* ============================================================
   Slider2 — kart-bazlı slider (her direkt çocuk = bir slide)
   JS: main.js initSlider2 · Ayarlar: Slider2Settings
   ============================================================ */
.slider2 { position: relative; }
.slider2__viewport { overflow: hidden; }
/* Transform tabanlı motor (main.js initSlider2) — track translateX ile kayar;
   döngüde slide'lar klonlanıp kusursuz (sonsuz) geçiş yapılır. */
.slider2__track {
  display: flex;
  gap: var(--s2-gap, 0px);
  will-change: transform;
}
/* Direkt çocuk (Standart Kart / önizlemede data-mintweb-block sarmalayıcı) = slide */
.slider2__track > * {
  flex: 0 0 calc((100% - (var(--s2-per-view-d, 1) - 1) * var(--s2-gap, 0px)) / var(--s2-per-view-d, 1));
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .slider2__track > * {
    flex-basis: calc((100% - (var(--s2-per-view-m, 1) - 1) * var(--s2-gap, 0px)) / var(--s2-per-view-m, 1));
  }
}

/* --- Yönlendirme okları --- */
.slider2__arrows {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  pointer-events: none;
  /* Navigasyonun X/Y ekseni uzaklığı — tüm ok grubuna uygulanır */
  transform: translate(var(--s2-nav-x, 0px), var(--s2-nav-y, 0px));
}
.slider2__nav--h-justify { justify-content: space-between; }
/* justify (iki yana yaslı): X uzaklığı tüm grubu değil, okları SİMETRİK öteler —
   sol ok X yönünde, sağ ok ters yönde. Böylece negatif X her iki oku dışarı,
   pozitif X içeri taşır. (container yalnızca Y öteler.) */
.slider2__arrows.slider2__nav--h-justify {
  transform: translateY(var(--s2-nav-y, 0px));
}
.slider2__nav--h-justify .slider2__arrow--prev {
  transform: translateX(var(--s2-nav-x, 0px));
}
.slider2__nav--h-justify .slider2__arrow--next {
  transform: translateX(calc(-1 * var(--s2-nav-x, 0px)));
}
.slider2__nav--h-left { justify-content: flex-start; gap: 8px; }
.slider2__nav--h-center { justify-content: center; gap: 8px; }
.slider2__nav--h-right { justify-content: flex-end; gap: 8px; }
.slider2__nav--v-top { align-items: flex-start; padding-top: 12px; }
.slider2__nav--v-center { align-items: center; }
.slider2__nav--v-bottom { align-items: flex-end; padding-bottom: 12px; }
.slider2__arrow {
  pointer-events: auto;
  /* Buton boyutu = ikon boyutu; çevresinde orantılı (makul) boşluk */
  padding: calc(var(--s2-nav-size, 40px) * 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--s2-nav-bg, transparent);
  color: var(--s2-nav-icon, #fff);
  border: var(--s2-nav-border-w, 0px) solid var(--s2-nav-border-c, transparent);
  border-radius: var(--s2-nav-radius, 0px);
  cursor: pointer;
  transition: opacity .2s, background .2s;
}
.slider2__arrow svg {
  width: var(--s2-nav-size, 40px);
  height: var(--s2-nav-size, 40px);
  display: block;
}
.slider2__arrow:hover { opacity: .85; }

/* --- Rakamlı navigasyon (konumlandırılabilir — ok ayarları gibi) --- */
.slider2__numbers {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  pointer-events: none;
  padding-left: 12px;
  padding-right: 12px;
  transform: translate(var(--s2-num-x, 0px), var(--s2-num-y, 0px));
}
.slider2__num {
  pointer-events: auto;
  font-size: var(--s2-num-size, 14px);
  line-height: 1;
  min-width: calc(var(--s2-num-size, 14px) * 1.9);
  padding: calc(var(--s2-num-size, 14px) * 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--s2-num-border-w, 1px) solid var(--s2-num-border-c, #e2e8f0);
  border-radius: var(--s2-num-radius, 4px);
  background: var(--s2-num-bg, #fff);
  color: var(--s2-num-text, #334155);
  cursor: pointer;
  transition: opacity .2s, background .2s;
}
.slider2__num.is-active {
  background: var(--color-primary, #2563eb);
  color: #fff;
  border-color: var(--color-primary, #2563eb);
}

/* --- Noktalı geçiş (altta) --- */
.slider2__dots {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  gap: 8px;
  justify-content: center;
  pointer-events: none;
  /* Navigasyonun X/Y ekseninde uzaklığı (noktalı geçiş) — oklarla aynı mantık */
  transform: translate(var(--s2-dot-x, 0px), var(--s2-dot-y, 0px));
}
.slider2__dot {
  pointer-events: auto;
  width: var(--s2-dot-size, 9px);
  height: var(--s2-dot-size, 9px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #cbd5e1;
  cursor: pointer;
  transition: background .2s, transform .2s, width .2s;
}
.slider2__dot.is-active { background: #475569; transform: scale(1.15); }
/* Pagination stili: çubuklar — yuvarlak yerine yatay pill; aktif olan daha uzun */
.slider2[data-dots-style="bars"] .slider2__dot {
  width: calc(var(--s2-dot-size, 9px) * 2.6);
  border-radius: calc(var(--s2-dot-size, 9px) / 2);
}
.slider2[data-dots-style="bars"] .slider2__dot.is-active {
  width: calc(var(--s2-dot-size, 9px) * 4);
  transform: none;
}

/* --- Masaüstü / mobil görünürlük --- */
@media (min-width: 769px) { .slider2 .s2-d-off { display: none !important; } }
@media (max-width: 768px) { .slider2 .s2-m-off { display: none !important; } }

/* --- Geçiş animasyonu: stack motoru (fade / zoom / flip / cube) ---
   Slide'lar üst üste yığılır; aktif olan görünür. Track/viewport yüksekliği JS
   ile AKTİF slide'ın yüksekliğine ayarlanır (her slide kendi görsel boyunu
   korur); geçişte height yumuşak animasyonla değişir. */
.slider2[data-animation="fade"] .slider2__track,
.slider2[data-animation="zoom"] .slider2__track,
.slider2[data-animation="flip"] .slider2__track,
.slider2[data-animation="cube"] .slider2__track {
  display: block;
  position: relative;
  overflow: hidden;
  scroll-snap-type: none;
  transition: height .45s ease;
}
.slider2[data-animation="fade"] .slider2__viewport,
.slider2[data-animation="zoom"] .slider2__viewport,
.slider2[data-animation="flip"] .slider2__viewport,
.slider2[data-animation="cube"] .slider2__viewport {
  transition: height .45s ease;
}
.slider2[data-animation="fade"] .slider2__track > *,
.slider2[data-animation="zoom"] .slider2__track > *,
.slider2[data-animation="flip"] .slider2__track > *,
.slider2[data-animation="cube"] .slider2__track > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  flex-basis: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
}
.slider2[data-animation="flip"] .slider2__track > *,
.slider2[data-animation="cube"] .slider2__track > * {
  transition: opacity .65s ease, transform .65s ease;
}
.slider2[data-animation="fade"] .slider2__track > *.is-active,
.slider2[data-animation="zoom"] .slider2__track > *.is-active,
.slider2[data-animation="flip"] .slider2__track > *.is-active,
.slider2[data-animation="cube"] .slider2__track > *.is-active {
  opacity: 1;
  pointer-events: auto;
}
.slider2[data-animation="zoom"] .slider2__track > * { transform: scale(1.05); }
.slider2[data-animation="zoom"] .slider2__track > *.is-active { transform: scale(1); }

/* flip — 3D Y ekseni (yatay kapak çevirme) */
.slider2[data-animation="flip"] .slider2__viewport { perspective: 1400px; }
.slider2[data-animation="flip"] .slider2__track > * { transform: rotateY(90deg); }
.slider2[data-animation="flip"] .slider2__track > *.is-active { transform: rotateY(0deg); }

/* cube — 3D X ekseni (dikey yüz geçişi) */
.slider2[data-animation="cube"] .slider2__viewport { perspective: 1400px; }
.slider2[data-animation="cube"] .slider2__track > * { transform: rotateX(-90deg); }
.slider2[data-animation="cube"] .slider2__track > *.is-active { transform: rotateX(0deg); }

/* ─── Ek stacked efektler (reveal / blur / rotate / kenburns) ───
   Hepsi fade ailesiyle aynı yığın (absolute + is-active) modeline oturur;
   per-view > 1 iken sayfalı (çok-kartlı) modda da çalışır. */
.slider2[data-animation="reveal"] .slider2__track,
.slider2[data-animation="blur"] .slider2__track,
.slider2[data-animation="rotate"] .slider2__track,
.slider2[data-animation="kenburns"] .slider2__track {
  display: block;
  position: relative;
  overflow: hidden;
  scroll-snap-type: none;
  transition: height .45s ease;
}
.slider2[data-animation="reveal"] .slider2__viewport,
.slider2[data-animation="blur"] .slider2__viewport,
.slider2[data-animation="rotate"] .slider2__viewport,
.slider2[data-animation="kenburns"] .slider2__viewport {
  transition: height .45s ease;
}
.slider2[data-animation="reveal"] .slider2__track > *,
.slider2[data-animation="blur"] .slider2__track > *,
.slider2[data-animation="rotate"] .slider2__track > *,
.slider2[data-animation="kenburns"] .slider2__track > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  flex-basis: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease, transform .5s ease, filter .5s ease;
}
.slider2[data-animation="reveal"] .slider2__track > *.is-active,
.slider2[data-animation="blur"] .slider2__track > *.is-active,
.slider2[data-animation="rotate"] .slider2__track > *.is-active,
.slider2[data-animation="kenburns"] .slider2__track > *.is-active {
  opacity: 1;
  pointer-events: auto;
}
/* reveal — alttan yukarı belirir */
.slider2[data-animation="reveal"] .slider2__track > * { transform: translateY(40px); }
.slider2[data-animation="reveal"] .slider2__track > *.is-active { transform: translateY(0); }
/* blur — bulanıktan nete */
.slider2[data-animation="blur"] .slider2__track > * { filter: blur(10px); }
.slider2[data-animation="blur"] .slider2__track > *.is-active { filter: blur(0); }
/* rotate — hafif dönerek + küçülerek belirir */
.slider2[data-animation="rotate"] .slider2__track > * { transform: rotate(8deg) scale(.9); }
.slider2[data-animation="rotate"] .slider2__track > *.is-active { transform: rotate(0) scale(1); }
/* kenburns — crossfade + aktif slide yavaşça yakınlaşır */
.slider2[data-animation="kenburns"] .slider2__track > *.is-active {
  animation: s2-kenburns 8s ease-out both;
}
@keyframes s2-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

/* ═══ Hero Slide Decoration ══════════════════════════════════════════════════
   .hero-arch-slide: card_media bloğuna uygulanan özel dekorasyon sınıfı.
   Referans: mintyazilim.com/tr/ — teal arka plan + sağ alt lacivert şekil.
   ═════════════════════════════════════════════════════════════════════════ */
.hero-arch-slide {
  min-height: 540px;
  background: #ffffff;
  overflow: hidden;
}
@media (max-width: 768px) {
  .hero-arch-slide { min-height: 0; flex-direction: column !important; }
}

/* Sağ görsel kolonu: teal düz arka plan — tam yüksekliği doldursun */
.hero-arch-slide .card-media__media {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 540px;
  align-self: stretch !important; /* container--cv-middle'ı override et */
  background-color: #3dbdbd;
}
@media (max-width: 768px) {
  .hero-arch-slide .card-media__media { min-height: 280px; }
}

/* Sağ alt köşe: büyük lacivert yuvarlak dekoratif şekil */
.hero-arch-slide .card-media__media::after {
  content: '';
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 380px;
  height: 380px;
  background-color: #1a2580;
  border-radius: 60px;
  z-index: 0;
}

/* Görsel şeklin üstünde */
.hero-arch-slide .card-media__media .block-image,
.hero-arch-slide .card-media__media [data-block-type="image"] {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero-arch-slide .card-media__media .block-image img,
.hero-arch-slide .card-media__media [data-block-type="image"] img {
  object-fit: contain !important;
  max-height: 520px;
  width: 100%;
}
@media (max-width: 768px) {
  .hero-arch-slide .card-media__media::after { display: none; }
}

/* === FAQ Accordion === */
.faq-accordion__list {
  list-style: none;
  padding: 0;
  width: var(--faq-width-d, 100%);
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
}
@media (max-width: 768px) {
  .faq-accordion__list { width: var(--faq-width-m, 100%); }
}
.faq-accordion__list--ax-center { margin-left: auto; margin-right: auto; }
.faq-accordion__list--ax-right  { margin-left: auto; margin-right: 0; }
.faq-accordion__list--ax-left   { margin-left: 0; margin-right: auto; }

/* Collapse davranışı — yumuşak açılış/kapanış animasyonu.
   Eski tarayıcılar (Firefox/Safari): çocuk öğede grid-template-rows 0fr → 1fr.
   Güncel tarayıcılar (Chrome/Edge): ::details-content pseudo'su block-size ile
   animasyonlanır; grid hilesi bu tarayıcılarda content-visibility nedeniyle
   çalışmadığından @supports ile devre dışı bırakılır. */
.faq-accordion__item details > .faq-accordion__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-accordion__item details[open] > .faq-accordion__answer {
  grid-template-rows: 1fr;
}
.faq-accordion__answer-inner {
  overflow: hidden;
  min-height: 0;
}

@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  .faq-accordion__item details > .faq-accordion__answer {
    display: block;
    grid-template-rows: none;
    transition: none;
  }
  .faq-accordion__details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 320ms cubic-bezier(0.4, 0, 0.2, 1),
                content-visibility 320ms allow-discrete;
  }
  .faq-accordion__details[open]::details-content {
    block-size: auto;
  }
}
.faq-accordion__item {
  padding-top: var(--faq_accordion-pt, 0px);
  padding-bottom: var(--faq_accordion-pb, 0px);
  padding-left: var(--faq_accordion-pl, 0px);
  padding-right: var(--faq_accordion-pr, 0px);
  border-radius: var(--faq_accordion-radius, 0px);
  border-color: var(--faq_accordion-border-color, transparent);
}
.faq-accordion__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  list-style: none;
  cursor: pointer;
}
.faq-accordion__question::-webkit-details-marker { display: none; }
.faq-accordion__question::marker { display: none; }
.faq-accordion__question-text { flex: 1; padding: 0 15px; }
.faq-accordion__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: transform 200ms ease;
  color: currentColor;
  opacity: 0.6;
}
.faq-accordion__icon svg {
  width: 1.5em;
  height: 1.5em;
}
details[open] > .faq-accordion__question .faq-accordion__icon {
  transform: rotate(90deg);
}
.faq-accordion__answer {
  padding: 0;
}
.faq-accordion__answer-inner {
  padding: 0 0 0.875rem;
}

/* Köşe Ayarları (çerçeve/köşe/gölge) + Boşluklar yalnızca soru satırına
   (``<summary>``) inline style olarak uygulanır — cevap çerçeve dışında kalır.
   build_section_style çerçeve rengini ``--section-border-color`` değişkeniyle yazar;
   burada ``border-color``'a bağlanır (border-width/style/radius/padding/shadow inline gelir). */
.faq-accordion__question {
  border-color: var(--section-border-color, currentColor);
}

/* Yazı hizası: ortalı / sağ — ikon metinle birlikte hareket etsin */
.faq-accordion__details--ta-center .faq-accordion__question {
  justify-content: center;
}
.faq-accordion__details--ta-center .faq-accordion__question-text {
  flex: 0 1 auto;
}
.faq-accordion__details--ta-center .faq-accordion__answer--ta-center {
  text-align: center;
}
.faq-accordion__details--ta-right .faq-accordion__question {
  justify-content: flex-end;
}
.faq-accordion__details--ta-right .faq-accordion__question-text {
  flex: 0 1 auto;
}
.faq-accordion__details--ta-right .faq-accordion__answer--ta-right {
  text-align: right;
}

/* Hover rengi (typography-style sistemiyle) */
.faq-accordion__question:hover { opacity: 0.85; }
.faq-accordion__question.typography-style--has-color-hover:hover {
  color: var(--typography-color-hover) !important;
}
.faq-accordion__question.typography-style--has-bg-hover:hover {
  background-color: var(--typography-bg-hover) !important;
}
/* Font size + line-height responsive */
.faq-accordion__question.typography-style--has-font-size {
  font-size: var(--typography-font-size-d);
}
.faq-accordion__question.typography-style--has-line-height {
  line-height: var(--typography-line-height-d);
}
.faq-accordion__question.typography-style--has-font-weight {
  font-weight: var(--typography-font-weight-d);
}
@media (max-width: 768px) {
  .faq-accordion__question.typography-style--has-font-size-m {
    font-size: var(--typography-font-size-m);
  }
  .faq-accordion__question.typography-style--has-line-height-m {
    line-height: var(--typography-line-height-m);
  }
  .faq-accordion__question.typography-style--has-font-weight-m {
    font-weight: var(--typography-font-weight-m);
  }
}

/* ============================================================
   Dekoratif Görsel (block_decor) — kapsayıcı bloğun köşesine
   (corner) veya tüm zeminine (cover) yerleşen, İÇERİĞİN ALTINDA
   duran dekoratif <img>. ``{% block_decor settings %}`` kök
   element'in ilk child'ı olarak basar.
   ============================================================ */
/* Dekor barındıran her blok kökü konumlandırma bağlamı + kendi stacking
   context'i olur; böylece z-index:-1 dekor blok dışına taşmaz, içeriğin
   altında kalır. */
.block:has(> .block-decor) {
  position: relative;
  isolation: isolate;
}
.block-decor {
  position: absolute;
  z-index: -1; /* kök zeminin üstünde, içeriğin altında */
  pointer-events: none;
  user-select: none;
  max-width: 100%;
  height: auto;
}
/* Cover modu — tüm bloğu kaplar (object-fit inline: cover/contain). */
.block-decor--cover {
  inset: 0;
  width: 100%;
  height: 100%;
}
/* İkon modu — span + inline SVG. SVG kendi boyutunu (decor_size) taşır; renk
   span'deki ``color`` (currentColor) üzerinden gelir. */
.block-decor--icon {
  line-height: 0;
}
/* Renk geçişi (glow) modu — kutu boyutunda yumuşak radyal degrade; şekil
   (yuvarlak/yatay/dikey) inline width/height oranından gelir. */
.block-decor--glow {
  background: radial-gradient(closest-side, var(--glow-color) 0%, transparent 74%);
}
/* Yatay: sağdan sola yönlü geçiş; blok SOLA konumlanmışsa soldan sağa. */
.block-decor--glow-h {
  background: linear-gradient(to left, var(--glow-color) 0%, transparent 95%);
}
.block-decor--glow-h.block-decor--pos-top-left,
.block-decor--glow-h.block-decor--pos-center-left,
.block-decor--glow-h.block-decor--pos-bottom-left {
  background: linear-gradient(to right, var(--glow-color) 0%, transparent 95%);
}
/* Dikey: yukarıdan aşağı yönlü geçiş; blok ALTA konumlanmışsa aşağıdan yukarı. */
.block-decor--glow-v {
  background: linear-gradient(to bottom, var(--glow-color) 0%, transparent 95%);
}
.block-decor--glow-v.block-decor--pos-bottom-left,
.block-decor--glow-v.block-decor--pos-bottom-center,
.block-decor--glow-v.block-decor--pos-bottom-right {
  background: linear-gradient(to top, var(--glow-color) 0%, transparent 95%);
}
.block-decor--icon svg {
  display: block;
}
/* Köşe modu — 9 nokta; --decor-offset köşeden içeri/dışarı kaçıklık (inline). */
.block-decor--pos-top-left {
  top: var(--decor-offset, 0);
  left: var(--decor-offset, 0);
}
.block-decor--pos-top-center {
  top: var(--decor-offset, 0);
  left: 50%;
  transform: translateX(-50%);
}
.block-decor--pos-top-right {
  top: var(--decor-offset, 0);
  right: var(--decor-offset, 0);
}
.block-decor--pos-center-left {
  top: 50%;
  left: var(--decor-offset, 0);
  transform: translateY(-50%);
}
.block-decor--pos-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.block-decor--pos-center-right {
  top: 50%;
  right: var(--decor-offset, 0);
  transform: translateY(-50%);
}
.block-decor--pos-bottom-left {
  bottom: var(--decor-offset, 0);
  left: var(--decor-offset, 0);
}
.block-decor--pos-bottom-center {
  bottom: var(--decor-offset, 0);
  left: 50%;
  transform: translateX(-50%);
}
.block-decor--pos-bottom-right {
  bottom: var(--decor-offset, 0);
  right: var(--decor-offset, 0);
}

/* Full Genişlik KAPALI iken: blok tam genişlik (full-bleed zemin) kalır ama
   içerik padding-inline ile ortalanır. Absolute decor padding'i yok sayıp
   padding-box kenarına (viewport sağ/sol) gider → içeriğin dışında kalırdı.
   İçeriğin yan boşluğu kadar (aynı max() formülü) decor'u içeri al ki içerikle
   hizalı dursun. Üst/orta/alt-MERKEZ konumlar (left:50%) etkilenmez. */
.section-style:not(.section-style--full-width) > .block-decor--pos-top-right,
.section-style:not(.section-style--full-width) > .block-decor--pos-center-right,
.section-style:not(.section-style--full-width) > .block-decor--pos-bottom-right {
  right: calc(
    max(
      var(--container-padding-inline, 1rem),
      (100% - var(--container-max-width, 1280px)) / 2
    ) + var(--decor-offset, 0px)
  );
}
/* Renk geçişi (glow) İSTİSNA: ikon/rozet içerikle hizalanır ama glow bir zemin
   efekti — container modunda da bloğun GERÇEK kenarına (sayfa köşesine) gider. */
.section-style:not(.section-style--full-width) > .block-decor--glow.block-decor--pos-top-right,
.section-style:not(.section-style--full-width) > .block-decor--glow.block-decor--pos-center-right,
.section-style:not(.section-style--full-width) > .block-decor--glow.block-decor--pos-bottom-right {
  right: var(--decor-offset, 0);
}
.section-style:not(.section-style--full-width) > .block-decor--glow.block-decor--pos-top-left,
.section-style:not(.section-style--full-width) > .block-decor--glow.block-decor--pos-center-left,
.section-style:not(.section-style--full-width) > .block-decor--glow.block-decor--pos-bottom-left {
  left: var(--decor-offset, 0);
}
.section-style:not(.section-style--full-width) > .block-decor--pos-top-left,
.section-style:not(.section-style--full-width) > .block-decor--pos-center-left,
.section-style:not(.section-style--full-width) > .block-decor--pos-bottom-left {
  left: calc(
    max(
      var(--container-padding-inline, 1rem),
      (100% - var(--container-max-width, 1280px)) / 2
    ) + var(--decor-offset, 0px)
  );
}

/* ─────────────────────────────────────────────────────────────
   Dik Yazı (vertical_text) blok'u — dikey döndürülmüş etiket şeridi
   ───────────────────────────────────────────────────────────── */
.block-vertical-text {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  /* Boşluk/kenarlık "Boşluklar" + "Köşe Ayarları" sekmelerinden (section_style
     inline ss.style) gelir; kenarlık rengi --section-border-color üzerinden. */
  border-color: var(--section-border-color, transparent);
}
.vertical-text--full-height {
  height: 100%;
  min-height: 100%;
  align-self: stretch;
}

/* Şeridi komşu (görsel) yüksekliğine uzat — kart gövdeleri (card_media/card/
   card_stack/card_cover, content_container) sütun-flex olduğundan şerit ana
   eksende içeriği kadar boyutlanır; flex-grow ile gövdenin tüm yüksekliğini
   doldurur. "vertical-text--fill" template'te şu durumlarda eklenir: "Komşu
   yüksekliği doldur" açık VEYA Dikey Konum Orta/Alt — böylece hizalama anlamlı
   olur. Editör preview'inde araya giren [data-mintweb-block] sarmalayıcısı da
   büyütülür (public modda yoktur). Columns gibi satır-flex ebeveynlerde
   align-items:stretch zaten doldurur; orada bu kurallara gerek yok. */
.card-media__body > .vertical-text--fill,
.card__body > .vertical-text--fill,
.card-stack__body > .vertical-text--fill,
.card-cover__body > .vertical-text--fill {
  flex: 1 1 auto;
}
.card-media__body > [data-mintweb-block]:has(> .vertical-text--fill),
.card__body > [data-mintweb-block]:has(> .vertical-text--fill),
.card-stack__body > [data-mintweb-block]:has(> .vertical-text--fill),
.card-cover__body > [data-mintweb-block]:has(> .vertical-text--fill) {
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
}
/* Yatay Kart (card_row, satır-flex): dik yazı şeridinin DİKEY konumu cross-axis
   olduğundan align-self ile sürülür — kısa şerit Üst/Orta/Alt'a yapışır (kart
   genişliğinden bağımsız). "Komşu yüksekliği doldur" açıksa stretch ile komşu
   yüksekliğini doldurur (konumu ezer). Editör preview'inde flex item sarmalayıcı
   ([data-mintweb-block]) olduğundan align-self ona uygulanır. */
.card-row__body > .vertical-text--align-start,
.card-row__body > [data-mintweb-block]:has(> .vertical-text--align-start),
.card-row__body > .vertical-text--valign-right,
.card-row__body > [data-mintweb-block]:has(> .vertical-text--valign-right) {
  align-self: flex-start;
}
.card-row__body > .vertical-text--align-center,
.card-row__body > [data-mintweb-block]:has(> .vertical-text--align-center),
.card-row__body > .vertical-text--valign-center,
.card-row__body > [data-mintweb-block]:has(> .vertical-text--valign-center) {
  align-self: center;
}
.card-row__body > .vertical-text--align-end,
.card-row__body > [data-mintweb-block]:has(> .vertical-text--align-end),
.card-row__body > .vertical-text--valign-left,
.card-row__body > [data-mintweb-block]:has(> .vertical-text--valign-left) {
  align-self: flex-end;
}
.card-row__body > .vertical-text--full-height,
.card-row__body > [data-mintweb-block]:has(> .vertical-text--full-height) {
  align-self: stretch;
}

.vertical-text--align-start { align-items: flex-start; }
.vertical-text--align-center { align-items: center; }
.vertical-text--align-end { align-items: flex-end; }
/* Dikey hiza — typography "Yazı Hizası" (text_align) ile sürülür. Set
   edildiğinde "Dikey Konum"u (--align-*) ezer (source order ile sonra gelir).
   Dik yazıda yatay hiza anlamsız olduğundan yazı hizası dikeye eşlenir:
   Sola → alt, Ortalı → orta, Sağa → üst. */
.vertical-text--valign-left { align-items: flex-end; }
.vertical-text--valign-center { align-items: center; }
.vertical-text--valign-right { align-items: flex-start; }
.vertical-text--valign-justify { align-items: center; }
.vertical-text__inner {
  writing-mode: vertical-rl;
  white-space: nowrap;
  line-height: 1;
}
/* up = aşağıdan yukarı okunur (resimlerdeki yön) */
.vertical-text--up .vertical-text__inner {
  transform: rotate(180deg);
}
/* down = yukarıdan aşağı okunur */
.vertical-text--down .vertical-text__inner {
  transform: none;
}

/* ============================================================
   Erişilebilirlik (WCAG 2.2 — D4.3)
   Skip-link: klavye kullanıcısı için içeriğe atlama; normalde
   ekran-dışı, odaklanınca görünür. Global focus-visible halkası +
   ARIA-live mesaj bölgesi stilleri.
   ============================================================ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 0.6rem 1rem;
  background: #ffffff;
  color: #111111;
  font-weight: 600;
  border-radius: 0 0 0.375rem 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.skip-link:focus {
  left: 0;
}

/* Klavye odağı her zaman görünür (fare odağını bastırmaz). */
:focus-visible {
  outline: 2px solid var(--color-primary, #2563eb);
  outline-offset: 2px;
}

/* Skip-link hedefi programatik odaklanınca outline gerektirmez. */
.site-main:focus {
  outline: none;
}

/* ARIA-live mesaj bölgesi (form bildirimleri ekran okuyucuya duyurulur). */
.site-messages {
  margin: 0 auto;
  max-width: 72rem;
  padding: 0 1rem;
}
.site-messages:empty {
  display: none;
}
.site-alert {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  border: 1px solid var(--color-border, #e5e7eb);
}
.site-alert--success {
  border-color: #16a34a;
  background: #f0fdf4;
}
.site-alert--error {
  border-color: #dc2626;
  background: #fef2f2;
}